diff --git a/.DS_Store b/.DS_Store index b9a4099392..6e5576ca7e 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.hgignore b/.hgignore index c93aa7128d..e2ae8c91cb 100644 --- a/.hgignore +++ b/.hgignore @@ -5,3 +5,5 @@ syntax: glob *.swp *.orig *.DS_Store +#* +.#* \ No newline at end of file diff --git a/6002x-faq.html b/6002x-faq.html index fe49474bdf..475e0312c8 100644 --- a/6002x-faq.html +++ b/6002x-faq.html @@ -9,39 +9,107 @@ More about 6.002x -

Answering common questions about the first course on MITx, the +

Answering common questions about the first course on MITx, the Institute’s online-learning initiative.

This set of questions and answers accompanies MIT’s February 13, -2012, announcement regarding MITx’s prototype course — +2012, announcement regarding MITx’s prototype course — 6.002x: Circuits and Electronics.

-

-What is MITx? MIT seeks through the development of MITx to improve -education both on the MIT campus and around the world. -

+

I tried to register for the course, but it says the username +is already taken.

-

On campus, MITx will be coupled with an Institute-wide research +

The system only allows each username to be used once. Probably, +someone else already signed up with that username. Try a different, +more unique username. For example, try adding a random number to the +end.

+ +

I am interested in a different subject. What other courses do +you offer?

+ +

6.002x is the pilot course for MITx. While we plan to offer a +range of courses in the future, at present, 6.002x is the only course +available.

+ +

How will I know that the course has started?

+ +

The course will start on March 5. Check the website +mitx.mit.edu as the date approaches. A login button will appear on +the course website 6.002x.mitx.mit.edu on or slightly before March 5 +so you can login, begin to get familiar with the site and start the +course.

+ +

Why is there no log-in button?

+ +

You will not be able to log into the course until either the +starting date, or shortly before.

+ +

Does the class have a schedule?

+ +

The lectures are on-line videos, and may be watched at your own +pace and schedule. The course will have fixed deadlines for homework +assignments and exams.

+ +

I just enrolled for the course. I have not received any form +of acknowledgement that I have enrolled.

+ +

You should receive a single activation e-mail. If you did not, the +most common issues are: +

+ +

If you run into issues, try recreating your account. There is no need +to do anything about the old account, if any. If it is not activated +through the link in the e-mail, it will disappear later. + +

How do I drop the course?

+ +

You do not have to do anything. You can simply stop working on the +course at any time you choose to do so.

+ +

What happens if I drop the course?

+ +

For the prototype course, learners achieving grades of "A," "B," +or "C" will receive an electronic Certificate of completion with the +learner's name and grade on it. If you receive a grade below a "C" or +do not complete the course, you will not receive a Certificate and no +grade record attaching your name to your participation in the class +will be disclosed outside of MITx. You can also choose to opt for a +no record at any time. However, the posts you make while enrolled in +the class will remain visible.

+ +

+What is MITx?

+ +

MIT seeks through the development of MITx to improve +education both on the MIT campus and around the world. + +

On campus, MITx will be coupled with an Institute-wide research initiative on online teaching and learning. The online learning tools -that MITx develops will benefit the educational experience of +that MITx develops will benefit the educational experience of residential students by supplementing and reinforcing the classroom and laboratory experiences.

-Beyond the MIT campus, MITx will endeavor to break down barriers to +Beyond the MIT campus, MITx will endeavor to break down barriers to education in two ways. First, it will offer the online teaching of MIT courses to people around the world and the opportunity for able learners to gain certification of mastery of MIT material. Second, it will make freely available to educational institutions everywhere the -open-source software infrastructure on which MITx courses are based. +open-source software infrastructure on which MITx courses are based.

Since it launched OpenCourseWare 10 years ago, MIT has been committed to using technology to improve and greatly widen access to -education. The launch of MITx represents a next step forward in that +education. The launch of MITx represents a next step forward in that effort.

@@ -55,7 +123,7 @@ At MIT, each course is assigned a number. All courses in the Department of Electrical Engineering and Computer Science (EECS) start with the number 6, and 6.002 (also known as Circuits and Electronics) is one of the introductory courses for EECS -undergraduates. MITx’s 6.002x is modeled on the on-campus +undergraduates. MITx’s 6.002x is modeled on the on-campus version of 6.002.

@@ -95,7 +163,7 @@ Do I need to follow a set timeline in completing 6.002x?

-In this pilot course of MITx, learners seeking a certificate will have +In this pilot course of MITx, learners seeking a certificate will have weekly deadlines for homework and labs. Similarly, the midterm and final exam will be given within a specific range of days. However, faster-paced learners can proceed multiple weeks ahead if they choose. @@ -162,7 +230,7 @@ prototype wiki and discussion forum. Are there prerequisites to take the course?

-While MITx courses are open to all, there are some skills required to +While MITx courses are open to all, there are some skills required to succeed in taking the course.

@@ -184,7 +252,7 @@ math backgrounds. How much does the course cost?

-All of the courses on MITx will be free of charge. Those who have the +All of the courses on MITx will be free of charge. Those who have the ability and motivation to demonstrate mastery of content can receive a credential for a modest fee. For this prototype course, the fee for a credential will be waived. @@ -196,8 +264,8 @@ What is a credential?

Any learner who successfully completes 6.002x will receive an electronic certificate indicating a grade. This certificate will -indicate that you earned it from MITx’s pilot course. In this -prototype version, MITx will not require that you be tested in a +indicate that you earned it from MITx’s pilot course. In this +prototype version, MITx will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.

@@ -206,7 +274,7 @@ receive this certificate. Who is grading the course?

-MITx courses will use automated technologies to check student work +MITx courses will use automated technologies to check student work including practice exercises, homework assignments, labs and exams.

diff --git a/6002x-press-release.html b/6002x-press-release.html index c5ead707e8..439c234edd 100644 --- a/6002x-press-release.html +++ b/6002x-press-release.html @@ -5,7 +5,7 @@
-

MITx prototype course opens for enrollment—Online-learning +

MITx prototype course opens for enrollment—Online-learning initiative’s first offering, ‘6.002x: Circuits and Electronics,’ accepting registrants now.

@@ -13,7 +13,7 @@ Electronics,’ accepting registrants now.

In December, MIT announced the -launch of an online learning initiative called “MITx.” +launch of an online learning initiative called “MITx.” Starting this week, interested learners can now enroll for free in the initiative”s prototype course -- 6.002x: Circuits and Electronics.

@@ -28,14 +28,14 @@ Engineering and Computer Science (EECS) — 6.002x will introduce engineering in the context of the lumped circuit abstraction, helping students make the transition from physics to the fields of electrical engineering and computer science. It will be taught by Anant Agarwal, -EECS professor and director of MIT”s Computer Science and +EECS professor and director of MIT's Computer Science and Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL co-director; EECS Professor Gerald Sussman; and CSAIL Research Scientist Piotr Mitros.

- “We are very excited to begin MITx with this prototype + “We are very excited to begin MITx with this prototype class,” says MIT Provost L. Rafael Reif. “We will use this prototype course to optimize the tools we have built by soliciting and acting on feedback from learners.” @@ -56,7 +56,7 @@ each week on the course.

-“We invite you to join us for this pilot course of MITx,” +“We invite you to join us for this pilot course of MITx,” Agarwal says. “The 6.002x team of professors and teaching assistants is excited to work with you on the discussion forum, and we look forward to your feedback to improve the learning @@ -70,16 +70,16 @@ be found here.

about 6.002x can be found here.

- -FAQs about MITx as a whole can be found here. + +FAQs about MITx as a whole can be found here.

At the end of the prototype course, students who demonstrate their mastery will be able to receive a certificate of completion for -free. In future MITx courses, students who complete the mastery -requirement on MITx will be able to receive the credential for a +free. In future MITx courses, students who complete the mastery +requirement on MITx will be able to receive the credential for a modest fee.

@@ -112,19 +112,19 @@ http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html

-MITx website +MITx website

http://mitx.mit.edu -

+

diff --git a/accordion_init.js b/accordion_init.js index 138ac15608..7c4ca2603c 100644 --- a/accordion_init.js +++ b/accordion_init.js @@ -1,10 +1,19 @@ $("#accordion").accordion({ active: ${ active_chapter }, - autoHeight: false + header: 'h3', + autoHeight: false, +}); + +$("#open_close_accordion a").click(function(){ + if ($(".course-wrapper").hasClass("closed")){ + $(".course-wrapper").removeClass("closed"); + } else { + $(".course-wrapper").addClass("closed"); + } }); $('.ui-accordion').bind('accordionchange', function(event, ui) { var event_data = {'newheader':ui.newHeader.text(), - 'oldheader':ui.oldHeader.text()}; + 'oldheader':ui.oldHeader.text()}; log_event('accordion', event_data); }); diff --git a/activation_active.html b/activation_active.html index 5b5e42478f..5f2af64c21 100644 --- a/activation_active.html +++ b/activation_active.html @@ -1,9 +1,13 @@ +<%inherit file="marketing.html" /> -<%inherit file="main.html" /> +
+

Account already active!

This account has already been activated. We will notify you as soon as the course starts.

+

For now you can go to the MITx homepage or the 6.002x course page.

+
diff --git a/activation_complete.html b/activation_complete.html index c74af930d5..f976f00239 100644 --- a/activation_complete.html +++ b/activation_complete.html @@ -1,8 +1,10 @@ +<%inherit file="marketing.html" /> -<%inherit file="main.html" /> - -
+
+

Activation Complete!

Thanks for activating your email. We will notify you as soon as the course starts.

+

For now you can go to the MITx homepage or the 6.002x course page.

+
diff --git a/activation_email.txt b/activation_email.txt index 0bd636428c..21a09335c7 100644 --- a/activation_email.txt +++ b/activation_email.txt @@ -6,4 +6,5 @@ into your web browser's address bar: http://${ site }/activate/${ key } If you didn't request this, you don't need to do anything; you won't -receive any more email from us. +receive any more email from us. Please do not reply to this e-mail; if +you require assistance, check the help section of the MITx web site. diff --git a/activation_invalid.html b/activation_invalid.html index 583c5d9a90..419f7a0ae6 100644 --- a/activation_invalid.html +++ b/activation_invalid.html @@ -1,9 +1,14 @@ -<%inherit file="main.html" /> -
+<%inherit file="marketing.html" /> + +
+

Activation Invalid

Something went wrong. Check to make sure the URL you went to was correct -- e-mail programs will sometimes split it into two lines. If you still have issues, e-mail us to let us know what happened at bugs@mitx.mit.edu.

+ +

Or you can go back to the 6.002x course page.

+
diff --git a/book_toc.html b/book_toc.html index 44904d8f60..35ef650b21 100644 --- a/book_toc.html +++ b/book_toc.html @@ -1,339 +1,356 @@ +
  • Contents ix +
  • Preamble i + -
  • The Circuit Abstraction -
  • A1 Maxwell's Equations and the LMD 927 +
  • B Trigonometric Functions & Identities 941 +
  • C Complex Numbers 947 +
  • D Solving Simultaneous Linear Equations 957 + + +
  • Answers to Selected Problems 959 +
  • Figure Acknowledgments 971 +
  • Index 973 diff --git a/courseware.html b/courseware.html index 4b3a1291e3..b77806f3e1 100644 --- a/courseware.html +++ b/courseware.html @@ -27,9 +27,16 @@
    -
    - ${accordion} -
    +
    +
    +

    Courseware Index

    + close +
    + +
    + ${accordion} +
    +
    ${content} diff --git a/create_account.html b/create_account.html index 0b15a323e2..e50c26d748 100644 --- a/create_account.html +++ b/create_account.html @@ -1,7 +1,7 @@
    -

    Enroll in 6.002 Circuits & Electronics

    +

    Enroll in 6.002x Circuits & Electronics

    <% if 'error' in locals(): e = error %> @@ -11,26 +11,26 @@
  • - +
  • - +
    Nickname you'd like to use on forums.
  • - - + + -
    If you would like us to give you a certificate of completion at the end, we need your full legal name, as you would like it to appear on the certificate (e.g. "John Smith, Jr").
    +
    If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx with this name on it.
  • @@ -49,16 +49,17 @@
  • - +
  • + I agree to the Honor Code, summarized as:*
      +
    • Complete all mid-terms and final exams with only my own work.
      • +
    • Maintain only one account, and not share the username or password.
    • Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.
      • -
    • Never post answers to problems.
      • -
    • Maintain only one account.
      • +
    • Not post answers to problems that are being used to assess student performance.
    • diff --git a/custom_tags b/custom_tags index bd9c88c4ae..ec1dac8fbe 120000 --- a/custom_tags +++ b/custom_tags @@ -1 +1 @@ -../data/custom_tags/ \ No newline at end of file +../data/custom_tags \ No newline at end of file diff --git a/index.html b/index.html index ff32f6a336..f71f9430d5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,9 @@ <%inherit file="marketing.html" /> +<%block name="title">MITx 6.002x: Circuits & Electronics +<%block name="description">6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT's first undergraduate analog design course: 6.002. +<%block name="keywords">MITx, circuits, electronics, EECS, electrical engineering, analog circuits, digital circuits, online learning, MIT, online laboratory, education, learners, undergraduate, certificate + <%block name="header_text">
    @@ -31,7 +35,7 @@

    If you successfully complete the course, you will receive an electronic certificate of accomplishment from MITx. This certificate will indicate that you earned it from MITx’s pilot course. In this prototype version, MITx will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.

    -

    The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005. While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on Amazon.

    +

    The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005. While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on Amazon.

    @@ -58,17 +62,17 @@
    • - + Anant Agarwal

      Anant Agarwal

      Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”

    • - + Gerald Sussman

      Gerald Sussman

      Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.

    • - + Piotr Mitros

      Piotr Mitros

      Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

    diff --git a/login.html b/login.html index 798817047a..abf59aae74 100644 --- a/login.html +++ b/login.html @@ -1,6 +1,4 @@ -${ error } -

    Log in to MITx

    diff --git a/main.html b/main.html index 05d00112f5..567f41b1db 100644 --- a/main.html +++ b/main.html @@ -5,7 +5,6 @@ - @@ -38,7 +37,7 @@ - +"> ${self.body()} <%block name="bodyextra"/> diff --git a/marketing.html b/marketing.html index f34150fcf0..74b3bd6651 100644 --- a/marketing.html +++ b/marketing.html @@ -1,10 +1,15 @@ - <%block name="title">MITx 6.002 + <%block name="title">MITx: MIT's new online learning initiative</%block> + + MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world" /> + + MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate" /> + @@ -96,6 +101,7 @@ function postJSON(url, data, callback) {
  • Terms of Service
  • Privacy Policy
  • Honor Code
    • +
  • Help
    • diff --git a/mitx-overview.html b/mitx-overview.html index 6279d88a05..c0de06e281 100644 --- a/mitx-overview.html +++ b/mitx-overview.html @@ -4,12 +4,12 @@
    -

    MITx Advances MIT’s Vision for Online Learning

    +

    MITx Advances MIT’s Vision for Online Learning

    Education has entered an era of rapid, exciting, technology-enabled change. At MIT, we welcome the opportunity to harness the power of on-line technology for our students and for the -world. On December 19, 2011, we announced MITx, an initiative to +world. On December 19, 2011, we announced MITx, an initiative to offer exciting, challenging and enriching courses to anyone, anywhere, who has the motivation and ability to engage MIT’s educational content.

    @@ -18,12 +18,12 @@ educational content.

    launched OpenCourseWare, which places online the course materials for substantially the entire MIT curriculum, and was the genesis of today’s worldwide -movement in free, open educational resources. MITx is the next step +movement in free, open educational resources. MITx is the next step in opening MIT’s educational doors to the world. Through OCW and -MITx, MIT invites the world to join it in the passion, hard work and +MITx, MIT invites the world to join it in the passion, hard work and thrill of learning and discovery.

    -

    MITx will e-publish interactive online courses that:

    +

    MITx will e-publish interactive online courses that:

    • Empower students to learn at their own pace;
      • @@ -33,10 +33,10 @@ thrill of learning and discovery.

    • Assess individual student learning as the student progresses through the course.
    -

    MITx students who demonstrate their mastery of a subject can earn -a certificate of completion awarded by MITx.

    +

    MITx students who demonstrate their mastery of a subject can earn +a certificate of completion awarded by MITx.

    -

    MITx courses will be available to the world through an Internet +

    MITx courses will be available to the world through an Internet platform that MIT will make freely available. MIT hopes that other educational institutions, anywhere in the world, will adapt and use the platform to publish their own educational content online for the @@ -44,7 +44,7 @@ benefit of learners. Because the platform will be open-source and scalable, adopters and users can continuously improve it, for the benefit of everyone.

    -

    Why Is MIT Creating MITx?

    +

    Why Is MIT Creating MITx?

    Excellence in teaching and learning. MIT must always provide its students the very best teaching and learning tools possible. MIT @@ -59,34 +59,34 @@ faculty members, confirmed MIT’s conviction that digital technologies enrich learning. Many other innovative institutions and enterprises believe the same and are bringing creative online offerings forward. Having brain-stormed, investigated and studied, -we were ready to act and eager to start. We announced our MITx +we were ready to act and eager to start. We announced our MITx aspiration to capture and encourage the energy of our faculty in creating new online teaching and learning tools.

    -

    Once up and running, MITx will be a laboratory for online -learning. Whether MITx learners are MIT’s on-campus students, -university students elsewhere, or independent learners, MITx will help +

    Once up and running, MITx will be a laboratory for online +learning. Whether MITx learners are MIT’s on-campus students, +university students elsewhere, or independent learners, MITx will help us understand how online learning occurs and how virtual communities of learners assemble -- information that in turn will allow us to -improve both MITx and our on-campus teaching.

    +improve both MITx and our on-campus teaching.

    -

    Access to higher education. MITx will help shatter barriers to +

    Access to higher education. MITx will help shatter barriers to education. The constraints of MIT’s physical campus allow us to admit less than 10 percent of our undergraduate applicants. We teach on-campus only a tiny fraction of the people in the world with the ability and motivation to learn MIT content. Online technology provides a new and different portal into MIT-quality education. -Through MITx, MIT educational content can reach, augment, and enrich +Through MITx, MIT educational content can reach, augment, and enrich the education and livelihood of many learners who cannot attend MIT.

    -

    MITx does not provide a full MIT education. Our residential +

    MITx does not provide a full MIT education. Our residential campus is the heart of MIT’s knowledge creation and dissemination. MIT students enjoy a comprehensive curriculum and distinct educational environment. Without MIT, there would be no -MITx.

    +MITx.

    -

    Advancing the public good. MITx is an opportunity to help +

    Advancing the public good. MITx is an opportunity to help preserve and expand higher education as a public good. Historically, the investment of public and private assets in enormous amounts has produced the public benefits of knowledge creation and dissemination, @@ -98,7 +98,7 @@ education to migrate online, MIT sees the opportunity to democratize education with unprecedented efficiency and scalability. We possess a strong desire and feel a compelling obligation to offer a not-for-profit, mission-driven, open-technology approach to online -learning. MITx is our contribution.

    +learning. MITx is our contribution.

    diff --git a/mitx_global.html b/mitx_global.html index e592e4077d..9c4e6402c7 100644 --- a/mitx_global.html +++ b/mitx_global.html @@ -12,7 +12,7 @@
    - Watch intro video + Link to MITx introduction video Watch intro video
    @@ -27,7 +27,7 @@
  • operates on an open-source, scalable software infrastructure in order to make it continuously improving and readily available to other educational institutions, such as universities and K-12 school systems.
    • -

    Press & links: 6.002x Press Release, 6.002x FAQ, MITx overview, Boston Globe, New York Times, MIT Press Release, MITx FAQ,

    +

    Press & links: 6.002x Press Release, 6.002x FAQ, MITx overview, Boston Globe, New York Times, MIT Press Release, MITx FAQ, OpenCourseWare

    @@ -40,7 +40,7 @@

    - More information & Enroll + More information & Enroll ‣

    Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT’s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from MITx.

    @@ -48,12 +48,32 @@
    • - +
    diff --git a/mitx_help.html b/mitx_help.html new file mode 100644 index 0000000000..a9ec20eb44 --- /dev/null +++ b/mitx_help.html @@ -0,0 +1,28 @@ +<%inherit file="marketing.html" /> + +
    +
    +
    +

    Help & Feedback

    +

    If run into problems signing up for the web site which you + cannot resolve on your own, please check + the Frequently + Asked Questions. If you find a bug or other issues, you can + reach us at:

    +
    +
    System-related questions
    +
    technical@mitx.mit.edu
    +
    Content-related questions
    +
    content@mitx.mit.edu
    +
    Bug reports
    +
    bugs@mitx.mit.edu
    +
    Suggestions
    +
    suggestions@mitx.mit.edu
    +
    + +

    Please bear in mind that while we read them, we do not expect to + have time to respond to all e-mails.

    +
    +
    +
    + diff --git a/navigation.html b/navigation.html index 3b4b50d314..bba364d18b 100644 --- a/navigation.html +++ b/navigation.html @@ -7,7 +7,6 @@
    diff --git a/profile_graphs.js b/profile_graphs.js index 80eb9dc3b0..502c3c1469 100644 --- a/profile_graphs.js +++ b/profile_graphs.js @@ -16,7 +16,7 @@ $(function () { }).appendTo("body").fadeIn(200); } - /* -------------------------------- Grade detail graph -------------------------------- */ + /* -------------------------------- Grade detail bars -------------------------------- */ var colors = [$.color.parse("#E8B800"), $.color.parse("#A0CEFA"), $.color.parse("#BD3738"), $.color.parse("#429A2E")]; //var colors = [$.color.parse("#1B2045"), $.color.parse("#557a00"), $.color.parse("#F5600"), $.color.parse("#FEBA2C")]; //var colors = [$.color.parse("#E7C856"), $.color.parse("#CD462E"), $.color.parse("#B01732"), $.color.parse("#41192A")]; @@ -42,7 +42,7 @@ $(function () { data: ${ json.dumps( [[i + tickIndex, score['percentage']] for i,score in enumerate(section['subscores'])] ) }, color: colors[${sectionIndex}].toString(), }); - ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, str(i + 1)] for i,score in enumerate(section['subscores'])] ) } ); + ticks = ticks.concat( ${ json.dumps( [[i + tickIndex, score['label'] ] for i,score in enumerate(section['subscores'])] ) } ); bottomTicks.push( [ ${tickIndex + len(section['subscores'])/2}, "${section['category']}" ] ); detail_tooltips["${section['category']}"] = ${ json.dumps([score['summary'] for score in section['subscores']] ) }; @@ -57,8 +57,8 @@ $(function () { data: [[${tickIndex}, ${section['totalscore']['score']}]], color: colors[${sectionIndex}].toString(), }); - ticks = ticks.concat( [ [${tickIndex}, "Total"] ] ); - detail_tooltips["${section['category']} Total"] = [ "${section['totalscore']['summary']}" ]; + ticks = ticks.concat( [ [${tickIndex}, "${section['totallabel']}"] ] ); + detail_tooltips["${section['category']} Average"] = [ "${section['totalscore']['summary']}" ]; <% tickIndex += 1 + sectionSpacer %> %else: ##This is for sections like midterm or final, which have no smaller components @@ -66,12 +66,8 @@ $(function () { data: [[${tickIndex}, ${section['totalscore']['score']}]], color: colors[${sectionIndex}].toString(), }); - %if section['category'] == "Midterm": - bottomTicks = bottomTicks.concat( [ [${tickIndex}, "${section['category']}"] ] ); - %else: - ticks = ticks.concat( [ [${tickIndex}, "${section['category']}"] ] ); - %endif - + ticks = ticks.concat( [ [${tickIndex}," ${section['totallabel']}"] ] ); + detail_tooltips["${section['category']}"] = [ "${section['totalscore']['summary']}" ]; <% tickIndex += 1 + sectionSpacer %> @@ -80,13 +76,45 @@ $(function () { %endfor //Alwasy be sure that one series has the xaxis set to 2, or the second xaxis labels won't show up - series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red", xaxis: 2} ); + series.push( {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false}, color: "red"} ); + + /* ----------------------------- Grade overviewew bar -------------------------*/ + <% + totalWeight = 0.0 + sectionIndex = 0 + totalScore = 0.0 + overviewBarX = tickIndex + %> + %for section in grade_summary: + <% + weighted_score = section['totalscore']['score'] * section['weight'] + summary_text = "{0} - {1:.1%} of a possible {2:.0%}".format(section['category'], weighted_score, section['weight']) + %> + %if section['totalscore']['score'] > 0: + series.push({label: "${section['category']} - Weighted", + data: [[${overviewBarX}, ${weighted_score}]], + color: colors[${sectionIndex}].toString(), + }); + %endif + + detail_tooltips["${section['category']} - Weighted"] = [ "${summary_text}" ]; + <% + sectionIndex += 1 + totalWeight += section['weight'] + totalScore += section['totalscore']['score'] * section['weight'] + %> + %endfor + ticks = ticks.concat( [ [${overviewBarX}, "Total"] ] ); + + <% tickIndex += 1 + sectionSpacer %> + + var options = { - series: {lines: {show: false, steps: false }, - bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},}, - xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}}, - xaxes: [{ticks: ticks}, {ticks: bottomTicks}], + series: {stack: true, + lines: {show: false, steps: false }, + bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},}, + xaxis: {tickLength: 0, min: 0.0, max: ${tickIndex - sectionSpacer}, ticks: ticks, labelAngle: 90}, yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50}, grid: { hoverable: true, clickable: true, borderWidth: 1, markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#E6FFFF"}, @@ -94,17 +122,42 @@ $(function () { legend: {show: false}, }; - if ($("#grade-detail-graph").length > 0) { - $.plot($("#grade-detail-graph"), series, options); + var $grade_detail_graph = $("#grade-detail-graph"); + if ($grade_detail_graph.length > 0) { + var plot = $.plot($grade_detail_graph, series, options); + + var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}}); + $grade_detail_graph.append('
    ${"{totalscore:.0%}".format(totalscore=totalScore)}
    '); + + // //Rotate the x-axis labels + // var rotateValue = "rotate(-60deg)"; + // var rotateOrigin = "bottom left"; + // $("#grade-detail-graph .x1Axis .tickLabel").css( { + // '-webkit-transform': rotateValue, + // '-moz-transform': rotateValue, + // '-ms-transform': rotateValue, + // '-o-transform': rotateValue, + // 'transform': rotateValue, + // + // '-webkit-transform-origin': rotateOrigin, + // '-moz-transform-origin': rotateOrigin, + // '-ms-transform-origin': rotateOrigin, + // '-o-transform-origin': rotateOrigin, + // + // 'text-align' : 'left', + // }); } + + + var previousPoint = null; $("#grade-detail-graph").bind("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(2)); $("#y").text(pos.y.toFixed(2)); if (item) { - if (previousPoint != item.dataIndex) { - previousPoint = item.dataIndex; + if (previousPoint != (item.dataIndex, item.seriesIndex)) { + previousPoint = (item.dataIndex, item.seriesIndex); $("#tooltip").remove(); diff --git a/sass/.DS_Store b/sass/.DS_Store index 108b7e7ea0..5b92100c38 100644 Binary files a/sass/.DS_Store and b/sass/.DS_Store differ diff --git a/sass/reademe.md b/sass/README similarity index 65% rename from sass/reademe.md rename to sass/README index 4550d0c9c5..fcd2d290a5 100644 --- a/sass/reademe.md +++ b/sass/README @@ -5,7 +5,13 @@ $ gem install sass We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon -Then to generate Sass files cd to templates directory and watch the sass files with: +To use bourbon you need to install it with: +$ gem install bourbon + +Then to generate Sass files cd to templates directory and watch the sass files for developement: $ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb -This will automatically generate the CSS files on save. +To generate a compressed css file for production: +$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed + +These will automatically generate the CSS files on save. diff --git a/sass/_activation.scss b/sass/_activation.scss deleted file mode 100644 index 0ec5ea837a..0000000000 --- a/sass/_activation.scss +++ /dev/null @@ -1,11 +0,0 @@ -section.activation { - @extend .wrapper; - @include box-shadow(0 1px 0 #fff); - @include box-sizing(border-box); - background: #fff; - border-top: 0; - border: 1px solid #ccc; - max-width: 600px; - padding: lh(); - margin-top: lh(); -} diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss deleted file mode 100644 index c89d62b3f2..0000000000 --- a/sass/_base-variables.scss +++ /dev/null @@ -1,53 +0,0 @@ -// Flexible grid -@function flex-grid($columns, $container-columns: $fg-max-columns) { - $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($width / $container-width); -} - -// Flexible grid gutter -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($gutter / $container-width); -} -// Percentage of container calculator -@function perc($width, $container-width: $max-width) { - @return percentage($width / $container-width); -} - -// Line-height -@function lh($amount: 1) { - @return $body-line-height * $amount; -} - -// Variables -// ---------------------------------------- // - -// fonts -$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; -$body-font-size: 14px; - -// grid -$columns: 12; -$column-width: 80px; -$gutter-width: 25px; -$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); - -$gw-column: perc($column-width); -$gw-gutter: perc($gutter-width); -$body-line-height: golden-ratio($body-font-size, 1); - -//Flexible grid -$fg-column: $column-width; -$fg-gutter: $gutter-width; -$fg-max-columns: $columns; -$fg-max-width: 1400px; -$fg-min-width: 810px; - -// color -$light-gray: #ddd; -$dark-gray: #333; -$mit-red: #993333; - -$text-color: $dark-gray; -$border-color: $light-gray; diff --git a/sass/_discussion-answers.scss b/sass/_discussion-answers.scss deleted file mode 100644 index 17e1df160f..0000000000 --- a/sass/_discussion-answers.scss +++ /dev/null @@ -1,77 +0,0 @@ -div.answer-controls { - @include box-sizing(border-box); - @extend div.question-controls; - display: inline-block; - margin: 20px 0; - padding-left: flex-grid(1.1); - - div.answer-sort { - @extend div.question-sort; - } - - div.answer-count { - @extend div.question-count; - } -} - -div.answer-block { - @extend div.question-header; - border-top: #ddd 1px solid; - display: inline-block; - float: left; - padding-top: 20px; - width: 100%; - - img.answer-img-accept { - margin: 10px 0px 10px 16px; - } - div.answer-container { - @extend div.question-container; - - div.answer-content { - @extend div.question-content; - - div.answer-body { - @extend div.question-body; - } - } - } - - div.meta-bar { - div.answer-actions { - @extend div.question-actions; - } - } - - div.answered-by-owner { - color: $mit-red; - - div.comments-container { - color: #555; - } - } -} - -div.answer-own { - border-top: 1px solid #eee; - overflow:hidden; - padding-left: flex-grid(1.2); - padding-top: 10px; -} - -div.answer-actions { - text-align: right; - margin: 0; - padding: 0; - - span.sep { - color: #ddd; - } - a { - text-decoration: none; - cursor: pointer; - } - a.question-edit, a.permant-link { - color: #999; - } -} diff --git a/sass/_discussion-tags.scss b/sass/_discussion-tags.scss deleted file mode 100644 index 8dcbb2446e..0000000000 --- a/sass/_discussion-tags.scss +++ /dev/null @@ -1,27 +0,0 @@ -ul.tags { - list-style: none; - li, a { - position: relative; - } - li { - @include border-radius(4px); - background: #eee; - color: #555; - display: inline; - font-size: 12px; - margin-left: 15px; - padding: 3px 10px 5px 5px; - - &:before { - content:""; - position:absolute; - top:0; - left:-11px; - width:0; - height:0; - border-color:transparent #eee transparent transparent; - border-style:solid; - border-width:12px 12px 12px 0; - } - } -} diff --git a/sass/_discussion.scss b/sass/_discussion.scss deleted file mode 100644 index 58250f9b73..0000000000 --- a/sass/_discussion.scss +++ /dev/null @@ -1,166 +0,0 @@ -// Base extends (Merge with main stylesheet later) -.light-button { - @include box-shadow(inset 0 1px 0 #fff); - @include linear-gradient(#fff, lighten(#888, 40%)); - @include border-radius(3px); - border: 1px solid #ccc; - padding: 4px 8px; - color: #666; - font: normal $body-font-size $body-font-family; - text-decoration: none; - cursor: pointer; - -webkit-font-smoothing: antialiased; - - &:hover, &:focus { - @include linear-gradient(#fff, lighten(#888, 30%)); - border: 1px solid #ccc; - text-decoration: none; - } -} - -// Layout -body.askbot { - .secondary-nav { - margin: 0; - - nav { - @extend .clearfix; - @extend .topbar; - @extend .wrapper; - @include box-sizing(border-box); - border: 1px solid darken(#F6EFD4, 10%); - border-top: 0; - margin: 0 auto; - padding: $body-line-height; - - div { - float: left; - - &.question-filter { - font-size:16px; - margin-top: 4px; - width: flex-grid(4); - - ul { - @include border-radius(35px); - background: darken(#F6EFD4, 20%); - display: inline; - margin: 0 0 0 10px; - padding: $body-line-height/4 20px; - - li { - display: inline-block; - list-style: none; - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - - a { - text-transform: capitalize; - text-shadow: none; - font-size: 14px; - - &.on { - font-weight: bold; - } - } - } - } - } - - &.search-box { - margin-left:2%; - text-align:right; - width: flex-grid(8); - - input[type="text"] { - margin-right: 6px; - width: flex-grid(2,8); - } - } - - } - } - } - - section.main-content { - div.discussion-wrapper { - @extend .table-wrapper; - - div.discussion-content { - @include box-sizing(border-box); - display: table-cell; - padding: $gw-gutter; - vertical-align: top; - width: flex-grid(9); - - p.tabula-rasa { - @include border-radius(5px); - background-color: #f6f6f6; - color: #888; - margin: 10px auto; - padding: 20px; - text-align: center; - width: flex-grid(5); - - &:first-child { - margin-top: 70px; - } - &:last-child { - margin-bottom: 70px; - } - - a { - text-decoration: none; - color: #888; - font-weight: bold; - } - } - } - - aside { - @extend .sidebar; - @include box-shadow(inset 1px 0 0 #f6f6f6); - @include border-radius(0 4px 4px 0); - border-left: 1px solid #d3d3d3; - border-right: 1px solid #f6f6f6; - padding: $gw-gutter; - width: flex-grid(3); - - h2 { - font-size: 16px; - } - - h3 { - border-bottom: 0; - box-shadow: none; - } - - input[type="text"] { - width: 76%; - } - - #displayTagFilterControl { - margin-top: 10px; - } - } - } - } - - // footer { - // margin: 0 auto; - // padding: 0; - - // div.footer-wrapper { - // @extend .clearfix; - // @extend .wrapper; - // @include box-shadow(0 1px 0 #fff); - // @include box-sizing(border-box); - // background-color: #000; - // border-top: 0; - // padding: $gw-gutter/2; - // } - // } -} diff --git a/sass/_index.scss b/sass/_index.scss deleted file mode 100644 index d579eb8ea6..0000000000 --- a/sass/_index.scss +++ /dev/null @@ -1,481 +0,0 @@ -body { - background-color: #fff; - color: #444; - font: $body-font-size $body-font-family; - - :focus { - outline-color: #ccc; - } - - h1 { - font: 800 24px $header-font-family; - } - - li { - margin-bottom: lh(); - } - - em { - font-style: italic; - } - - a { - color: $mit-red; - font-style: italic; - text-decoration: none; - - &:hover, &:focus { - color: darken($mit-red, 10%); - } - } - - #{$all-text-inputs}, textarea { - @include box-shadow(0 -1px 0 #fff); - @include linear-gradient(#eee, #fff); - border: 1px solid #999; - font: $body-font-size $body-font-family; - padding: 4px; - width: 100%; - - &:focus { - border-color: $mit-red; - } - } -} - -header.announcement { - @include background-size(cover); - background: #333; - border-bottom: 1px solid #000; - color: #fff; - -webkit-font-smoothing: antialiased; - - &.home { - background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); - - @media screen and (min-width: 1200px) { - background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); - } - - // @media screen and (max-width: 1199px) { - // } - - div { - padding: lh(10) lh() lh(3); - - //hide login link for homepage - nav { - h1 { - margin-right: 0; - } - - a.login { - display: none; - } - } - } - } - - &.course { - background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); - - @media screen and (min-width: 1200px) { - background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); - } - - @media screen and (max-width: 1199px) and (min-width: 700px) { - background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); - } - - div { - padding: lh(4) lh() lh(2); - } - } - - div { - @extend .wrapper; - position: relative; - - nav { - position: absolute; - top: 0; - right: lh(); - @include border-radius(0 0 3px 3px); - background: #333; - background: rgba(#000, .7); - padding: lh(.5) lh(); - - h1 { - @include inline-block(); - margin-right: lh(.5); - - a { - font: italic 800 18px $header-font-family; - color: #fff; - text-decoration: none; - - &:hover, &:focus { - color: #999; - } - } - } - - a.login { - text-decoration: none; - color: #fff; - font-size: 12px; - font-style: normal; - font-family: $header-font-family; - - &:hover, &:focus { - color: #999; - } - } - } - - section { - @extend .clearfix; - @include inline-block(); - background: $mit-red; - margin-left: flex-grid(4) + flex-gutter(); - padding: lh() lh(1.5); - - h1 { - @include inline-block(); - font-family: "Open Sans"; - font-size: 30px; - font-weight: 800; - line-height: 1.2em; - margin: 0 lh() 0 0; - } - - h2 { - @include inline-block(); - font-family: "Open Sans"; - font-size: 24px; - font-weight: 400; - line-height: 1.2em; - } - - &.course { - section { - width: flex-grid(4, 8); - margin-right: flex-gutter(8); - float: left; - margin-left: 0; - padding: 0; - - a { - @extend .button; - @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%)); - background-color: darken($mit-red, 20%); - display: block; - padding: lh(.5) lh(); - border-color: darken($mit-red, 30%); - text-align: center; - - &:hover { - background-color: darken($mit-red, 10%); - border-color: darken($mit-red, 20%); - } - } - } - - p { - width: flex-grid(4, 8); - line-height: lh(); - float: left; - } - } - } - } -} - -section.index-content { - @extend .wrapper; - @extend .clearfix; - - section { - @extend .clearfix; - float: left; - - h1 { - font-size: 24px; - font-weight: 800; - font-family: "Open Sans"; - margin-bottom: lh(); - } - - p { - line-height: lh(); - margin-bottom: lh(); - } - - ul { - margin: 0; - // list-style: disc outside none; - - // li { - // list-style: disc outside none; - // } - } - - &.about { - @include box-sizing(border-box); - border-right: 1px solid #e5e5e5; - margin-right: flex-gutter(); - padding-right: flex-gutter() / 2; - width: flex-grid(8); - - section { - @extend .clearfix; - margin-bottom: lh(); - - p { - width: flex-grid(4, 8); - float: left; - - &:nth-child(odd) { - margin-right: flex-gutter(8); - } - } - - &.intro { - section { - margin-bottom: 0; - - &.intro-text { - margin-right: flex-gutter(8); - width: flex-grid(4, 8); - - p { - margin-right: 0; - width: auto; - float: none; - } - } - - &.intro-video { - width: flex-grid(4, 8); - - a { - display: block; - width: 100%; - - img { - width: 100%; - } - - span { - display: none; - } - } - } - } - } - - &.features { - border-top: 1px solid #E5E5E5; - padding-top: lh(); - margin-bottom: 0; - - h2 { - text-transform: uppercase; - letter-spacing: 1px; - color: #666; - margin-bottom: lh(); - - span { - text-transform: none; - } - } - - p { - width: auto; - clear: both; - - strong { - font-family: "Open sans"; - font-weight: 800; - } - - a { - color: $mit-red; - text-decoration: none; - @include transition(); - - &:hover, &:focus { - color: darken($mit-red, 15%); - } - } - } - - ul { - margin-bottom: 0; - - li { - line-height: lh(); - width: flex-grid(4, 8); - float: left; - margin-bottom: lh(.5); - - &:nth-child(odd) { - margin-right: flex-gutter(8); - } - } - } - } - } - } - - &.course, &.staff { - width: flex-grid(4); - - h1 { - font: normal $body-font-size $body-font-family; - text-transform: uppercase; - letter-spacing: 1px; - color: #666; - margin-bottom: lh(); - } - - h2 { - font: 800 24px $header-font-family; - } - - h3 { - font: 400 18px $header-font-family; - } - - a { - @extend .button; - } - - ul { - list-style: none; - - li { - img { - float: left; - margin-right: lh(.5); - } - } - } - } - - &.course { - h2 { - padding-top: lh(5); - background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; - @include background-size(contain); - - @media screen and (max-width: 998px) { - background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat; - } - } - } - - - // index - //---------------------------------------- // - &.about-course { - @include box-sizing(border-box); - border-right: 1px solid #e5e5e5; - margin-right: flex-gutter(); - padding-right: flex-gutter() / 2; - width: flex-grid(8); - - section { - width: flex-grid(4, 8); - - - &.about-info { - margin-right: flex-gutter(8); - } - - &.requirements { - clear: both; - width: 100%; - border-top: 1px solid #E5E5E5; - padding-top: lh(); - margin-bottom: 0; - - p { - float: left; - width: flex-grid(4, 8); - margin-right: flex-gutter(8); - - &:nth-child(odd) { - margin-right: 0; - } - } - } - - &.cta { - width: 100%; - text-align: center; - - a.enroll { - @extend .button; - padding: lh(.5) lh(2); - @include inline-block(); - text-align: center; - font: 800 18px $header-font-family; - } - } - } - } - } -} - -section.copyright, section.tos, section.privacy-policy, section.honor-code { - @extend .subpage; -} - -footer { - @extend .wrapper; - @extend .clearfix; - padding-top: 0; - - div.footer-wrapper { - border-top: 1px solid #e5e5e5; - padding: lh() 0; - background: url('/static/images/marketing/mit-logo.png') right center no-repeat; - - a { - color: #888; - text-decoration: none; - @include transition(); - - &:hover, &:focus { - color: #666; - } - } - - p { - @include inline-block(); - margin-right: lh(); - } - - ul { - @include inline-block(); - - li { - @include inline-block(); - - &:after { - content: ' |'; - display: inline; - color: #ccc; - } - - &:last-child { - &:after { - content: none; - } - } - - } - } - } -} diff --git a/sass/_jquery-ui-1.8.16.custom.scss b/sass/_jquery-ui-1.8.16.custom.scss new file mode 100644 index 0000000000..d03e1ca7a2 --- /dev/null +++ b/sass/_jquery-ui-1.8.16.custom.scss @@ -0,0 +1,568 @@ +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } +.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +.ui-helper-clearfix { display: inline-block; } +/* required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { height:1%; } +.ui-helper-clearfix { display:block; } +/* end clearfix */ +.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { cursor: default !important; } + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } + + +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + * + * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=7fbcfd&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=dae5c9&fcHeader=031634&iconColorHeader=031634&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=dae5c9&fcContent=031634&iconColorContent=adcc80&bgColorDefault=7fbcdf&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=100&borderColorDefault=dae5c9&fcDefault=7a994c&iconColorDefault=adcc80&bgColorHover=bddeff&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=25&borderColorHover=7fbcdf&fcHover=7a994c&iconColorHover=adcc80&bgColorActive=023063&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dae5c9&fcActive=dae5c9&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=adcc80&bgColorError=ffffff&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=fa720a&fcError=222222&iconColorError=fa720a&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px + */ + + +/* Component containers +----------------------------------*/ +.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; } +.ui-widget .ui-widget { font-size: 1em; } +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; } +.ui-widget-content { border: 1px solid #dae5c9; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #031634; } +.ui-widget-content a { color: #031634; } +.ui-widget-header { border: 1px solid #dae5c9; background: #7fbcfd url(images/ui-bg_highlight-soft_50_7fbcfd_1x100.png) 50% 50% repeat-x; color: #031634; font-weight: bold; } +.ui-widget-header a { color: #031634; } + +/* Interaction states +----------------------------------*/ +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dae5c9; background: #7fbcdf url(images/ui-bg_highlight-soft_100_7fbcdf_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; } +.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #7a994c; text-decoration: none; } +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #7fbcdf; background: #bddeff url(images/ui-bg_highlight-soft_25_bddeff_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; } +.ui-state-hover a, .ui-state-hover a:hover { color: #7a994c; text-decoration: none; } +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dae5c9; background: #023063 url(images/ui-bg_glass_65_023063_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #dae5c9; } +.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #dae5c9; text-decoration: none; } +.ui-widget :active { outline: none; } + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; } +.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; } +.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #fa720a; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } +.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; } +.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; } +.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } +.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } +.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-widget-content .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-widget-header .ui-icon {background-image: url(images/ui-icons_031634_256x240.png); } +.ui-state-default .ui-icon { background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } +.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); } +.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_fa720a_256x240.png); } + +/* positioning */ +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-off { background-position: -96px -144px; } +.ui-icon-radio-on { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; } +.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; } + +/* Overlays */ +.ui-widget-overlay { background: #eeeeee url(images/ui-bg_flat_0_eeeeee_40x100.png) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); } +.ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }/* + * jQuery UI Resizable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Resizable#theming + */ +.ui-resizable { position: relative;} +.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; } +.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } +.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } +.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } +.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } +.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } +.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } +.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } +.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } +.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* + * jQuery UI Selectable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Selectable#theming + */ +.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } +/* + * jQuery UI Accordion 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Accordion#theming + */ +/* IE/Win - Fix animation bug - #4615 */ +.ui-accordion { width: 100%; } +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-accordion .ui-accordion-li-fix { display: inline; } +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } +.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } +.ui-accordion .ui-accordion-content-active { display: block; } +/* + * jQuery UI Autocomplete 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Autocomplete#theming + */ +.ui-autocomplete { position: absolute; cursor: default; } + +/* workarounds */ +* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ + +/* + * jQuery UI Menu 1.8.16 + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Menu#theming + */ +.ui-menu { + list-style:none; + padding: 2px; + margin: 0; + display:block; + float: left; +} +.ui-menu .ui-menu { + margin-top: -3px; +} +.ui-menu .ui-menu-item { + margin:0; + padding: 0; + zoom: 1; + float: left; + clear: left; + width: 100%; +} +.ui-menu .ui-menu-item a { + text-decoration:none; + display:block; + padding:.2em .4em; + line-height:1.5; + zoom:1; +} +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} +/* + * jQuery UI Button 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Button#theming + */ +.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ +.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ +button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ +.ui-button-icons-only { width: 3.4em; } +button.ui-button-icons-only { width: 3.7em; } + +/*button text element */ +.ui-button .ui-button-text { display: block; line-height: 1.4; } +.ui-button-text-only .ui-button-text { padding: .4em 1em; } +.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } +.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } +.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } +.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } +/* no icon support for input elements, provide padding by default */ +input.ui-button { padding: .4em 1em; } + +/*button icon element(s) */ +.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } +.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } +.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } +.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } +.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } + +/*button sets*/ +.ui-buttonset { margin-right: 7px; } +.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } + +/* workarounds */ +button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ +/* + * jQuery UI Dialog 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Dialog#theming + */ +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } +.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } +.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } +.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } +.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } +.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } +.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } +.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } +.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } +.ui-draggable .ui-dialog-titlebar { cursor: move; } +/* + * jQuery UI Slider 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Slider#theming + */ +.ui-slider { position: relative; text-align: left; } +.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } +.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } + +.ui-slider-horizontal { height: .8em; } +.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } +.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } +.ui-slider-horizontal .ui-slider-range-min { left: 0; } +.ui-slider-horizontal .ui-slider-range-max { right: 0; } + +.ui-slider-vertical { width: .8em; height: 100px; } +.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } +.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } +.ui-slider-vertical .ui-slider-range-min { bottom: 0; } +.ui-slider-vertical .ui-slider-range-max { top: 0; }/* + * jQuery UI Tabs 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Tabs#theming + */ +.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ +.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } +.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } +.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } +.ui-tabs .ui-tabs-hide { display: none !important; } +/* + * jQuery UI Datepicker 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Datepicker#theming + */ +.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } +.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } +.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } +.ui-datepicker .ui-datepicker-prev { left:2px; } +.ui-datepicker .ui-datepicker-next { right:2px; } +.ui-datepicker .ui-datepicker-prev-hover { left:1px; } +.ui-datepicker .ui-datepicker-next-hover { right:1px; } +.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } +.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } +.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } +.ui-datepicker select.ui-datepicker-month-year {width: 100%;} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { width: 49%;} +.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } +.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } +.ui-datepicker td { border: 0; padding: 1px; } +.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } +.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } +.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { width:auto; } +.ui-datepicker-multi .ui-datepicker-group { float:left; } +.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } +.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } +.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } +.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } +.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; } + +/* RTL support */ +.ui-datepicker-rtl { direction: rtl; } +.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } +.ui-datepicker-rtl .ui-datepicker-group { float:right; } +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } + +/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ +.ui-datepicker-cover { + display: none; /*sorry for IE5*/ + display/**/: block; /*sorry for IE5*/ + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +}/* + * jQuery UI Progressbar 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Progressbar#theming + */ +.ui-progressbar { height:2em; text-align: left; } +.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } \ No newline at end of file diff --git a/sass/_layout.scss b/sass/_layout.scss deleted file mode 100644 index 6984531ff9..0000000000 --- a/sass/_layout.scss +++ /dev/null @@ -1,183 +0,0 @@ -html { - margin-top: 0; - - body { - color: $dark-gray; - font: $body-font-size $body-font-family; - text-align: center; - margin: 0; - background: #f4f4f4; //#f3f1e5 - - div.header-wrapper { - // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%)); - @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%)); - background: $mit-red; - border-bottom: 1px solid #fff; - - header { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - padding: 0 $body-line-height; - - hgroup { - @extend .clearfix; - float: left; - - h1 { - border-right: 1px solid darken($mit-red, 5%); - color: darken($mit-red, 25%); - font-size: 20px; - font-weight: 800; - margin: 0 lh() 0 0; - padding: 17px lh() 14px 0; - text-shadow: 0 1px 0 lighten($mit-red, 10%); - line-height: lh(); - @include inline-block(); - } - - h2 { - @include inline-block(); - margin: 0 lh() 0 0; - padding: 19px lh() 9px 0; - line-height: lh(); - border-right: 1px solid darken($mit-red, 5%); - -webkit-font-smoothing: antialiased; - - a { - color: #fff; - text-decoration: none; - - &:hover { - color: rgba(#fff, .7); - } - } - } - - @media screen and (max-width: 920px) { - border-bottom: 1px solid darken($mit-red, 5%); - display: block; - float: none; - - h1 { - float: right; - border: 0; - margin-right: 0; - padding-right: 0; - } - - h2 { - float: left; - border: 0; - margin-right: 0; - padding-right: 0; - } - } - } - - nav { - float: left; - display: block; - margin: 0; - padding: 0; - text-shadow: 0 -1px 0 darken($mit-red, 10%); - -webkit-font-smoothing: antialiased; - - - ul { - @extend .clearfix; - display: inline-block; - padding: 19px 0 9px; - margin: 0; - - li { - margin-right: lh(); - display: inline-block; - margin-bottom: 0; - line-height: lh(); - - a { - color: #fff; - text-decoration: none; - - &:hover { - color: rgba(#fff, .7); - background-color: none; - text-decoration: none; - } - } - } - } - } - } - } - - section.main-content { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - @include border-radius(4px); - overflow: hidden; - background: #fff; - border-bottom: 1px solid #bbb; - - @media screen and (min-width: 1400px) { - // @include border-radius(3px); - @include box-shadow(0 0 4px #dfdfdf); - border: 1px solid #bbb; - margin-top: lh(.5); - } - } - - img { - max-width: 100%; - height: auto; - } - } - - footer { - @extend .clearfix; - @extend .wrapper; - @include box-sizing(border-box); - color: #777; - margin-top: $body-line-height; - padding: 0 $body-line-height; - - p { - float: left; - - a { - color: #444; - - &:link, &:visited { - color: #444; - } - - &:hover, &:focus { - color: #000; - } - } - } - - ul { - float: right; - - li { - display: inline-block; - margin-right: 20px; - - a { - color: #444; - - &:link, &:visited { - color: #444; - } - - &:hover, &:focus { - color: #000; - } - } - } - } - } -} diff --git a/sass/_local.scss b/sass/_local.scss deleted file mode 100644 index bd866e3bb5..0000000000 --- a/sass/_local.scss +++ /dev/null @@ -1,36 +0,0 @@ -#hide_acc { - min-height:600; -} - -#mainblock { - border: 0; - padding: 0; - margin: 0; - width: 200; - min-height:600px; - margin-left: 276px; - margin-right: 0px; -} - -.bordered { border: 1px solid #AAAAAA; border-style : dotted; } - -.seq_problem_visited { background-color: #ccccaa;} -.seq_video_visited { background-color: #ccaacc;} -.seq_html_visited { background-color: #caaccc;} -.seq_tab_visited { background-color: #aacccc;} -.seq_vertical_visited { background-color: #acaccc;} -.seq_sequential_visited { background-color: #cacacc;} -.seq_problem_visited { background-color: #ccacac;} -.seq_schematic_visited { background-color: #cccaca;} - -.seq_problem_inactive { background-color: #aaaa99;} -.seq_video_inactive { background-color: #aa99aa;} -.seq_video_inactive { background-color: #aaa99a;} -.seq_html_inactive { background-color: #a99aaa;} -.seq_tab_inactive { background-color: #99aaaa;} -.seq_vertical_inactive { background-color: #9a9aab;} -.seq_sequential_inactive { background-color: #a9a9aa;} -.seq_problem_inactive { background-color: #aa9a9a;} -.seq_schematic_inactive { background-color: #aaa9a9;} - -.seq_active { background-color: red;} diff --git a/sass/_profile.scss b/sass/_profile.scss index 68a93cf73f..8a08759294 100644 --- a/sass/_profile.scss +++ b/sass/_profile.scss @@ -57,31 +57,50 @@ div.profile-wrapper { @extend .top-header; } - ol { + > ol { list-style: none; + border-top: 1px solid #e3e3e3; + margin-top: lh(); > li { border-bottom: 1px solid #e3e3e3; padding: lh() 0; + width: 100%; + display: table; @extend .clearfix; h2 { - float: left; + display: table-cell; padding: 0; margin: 0; width: flex-grid(2, 9); - margin-right: flex-gutter(9); + padding-right: flex-gutter(9); + border-right: 1px dotted #ccc; + @include box-sizing(border-box); } - div.scores { - float: left; + ol.sections { + padding-left: flex-gutter(9); + display: table-cell; + list-style: none; width: flex-grid(7, 9); + > li { + padding:0 0 lh() 0; + + &:first-child { + padding-top: 0; + } + + &:last-child { + border-bottom: 0; + } + h3 { color: #666; } - ul { + ol { list-style: none; li { @@ -89,6 +108,7 @@ div.profile-wrapper { padding-right: 1em; } } + } } } } diff --git a/sass/_theme.scss b/sass/_theme.scss deleted file mode 100644 index 31e45ae734..0000000000 --- a/sass/_theme.scss +++ /dev/null @@ -1,190 +0,0 @@ -/* ----------------------------------------------------------------------------------------- - -Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved. - -THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER -TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate - -pmitros donated $10 - -Colors: -Light blue: bddeff - Blue: 7fbcfd -Very dark blue: #031634 - -Dark blue: #023063; -Dark Greenish: #7a994c; -Greenish: #adcc80; -Very light greenish: #dae5c9; -Bright orange: #fa720a; - ----------------------------------------------------------------------------------------- -*/ - - -h1 { - clear:both; -} - -h2 { - clear:both; -} - -h3 { - font-size:1em; - margin:20px 0 5px 0; - clear:both; -} - -#wrapper { - background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px; - margin:0 auto ; - width:100%; -} - -// marketing pages -#topWrapper { - width:100%; - height:100px; - background-image:url(images/css/topWrapper-bg.jpg); - background-position:center top ; - background-repeat:repeat-x; -} - -#topBanner { - width:800px; - margin:0 auto; - height:100px; - background-image:url(images/css/topBanner.jpg); - background-repeat:no-repeat; -} - -#topnav { - background:transparent url('images/css/hmenu.jpg') repeat-x top left; - height:20px; - margin:0 auto ; - text-align:center; - width:800px; - - ul { - display:table; - margin:0 auto; - padding:0; - list-style-type:none; - position:relative; - height:20px; - text-transform:uppercase; - font-size:0.9em; - font-family:Arial,sans-serif; - - li { - display:block; - float:left; - margin:0; - padding:0; - background:transparent url('images/css/hmenu.jpg') repeat-x top left; - - a { - display:block; - float:left; - color:#031634; - text-decoration:none; - padding:0px 50px ; - line-height:20px; - font-weight:bold; - } - } - } -} - -#topnav ul li a:hover, #topnav li#current a { - color:#7a994c; - background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left; -} - -#bg { - margin:0 auto; - padding:0; - background:transparent ; - background-image:url(images/css/hat.jpg); - background-repeat:no-repeat; - background-position: center top ; -} - -#header { - margin: 0 auto; - min-height:0px; - height: 0px; - width: 800px; -} - - -#page { - background: transparent url( images/css/page-bg.jpg ) no-repeat center top; -} - -#container { - margin:0 auto; - width:800px; -} - - -#content { - width:780px; - margin:0 auto ; - text-align:left; - min-height:800px; -} - - -#content p { - text-align:justify; -} - - - - - -#footerWrapper { - margin:0 auto; - height:10px; - padding:0; - background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top; -} - - -#footer { - margin:0 auto; - padding:0; - width:800px; - height:10px; -} - -#sidebar ul.vmenu { - list-style: none; - text-align: left; - margin: 7px 0px 8px 0px; - padding: 0; - text-decoration: none; - border-top: 1px solid #eeeeee; -} - -#sidebar ul.vmenu li { - list-style: none; - padding: 4px 0 4px 0px; - margin: 0 2px; - border-bottom: 1px solid #eeeeee; -} - -#sidebar ul.vmenu li a { - text-decoration: none; - color:#023063; -} - -#sidebar ul.vmenu li a:hover { - color:#adcc80; -} - -#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; } -#sidebar ul.vmenu ul li { border: none; } diff --git a/sass/application.scss b/sass/application.scss index a32d8b3172..81e2af18c9 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -1,22 +1,16 @@ @import "bourbon/bourbon"; -@import "reset"; -@import "font-face"; // Base layout -@import "base-variables", "base-extends", "base"; -@import "layout"; -@import "leanmodal"; +@import "base/reset", "base/font-face"; +@import "base/variables", "base/functions", "base/extends", "base/base"; +@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal"; +@import "jquery-ui-1.8.16.custom"; // pages -@import "courseware", "courseware-video", "courseware-sequence-nav"; +@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav"; @import "textbook"; @import "info"; @import "profile"; -@import "wiki-basic-html", "wiki-create", "wiki"; -@import "activation"; +@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki"; @import "help"; -@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar"; - -// left over -// @import "theme"; -// @import "local"; +@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar"; diff --git a/sass/_base.scss b/sass/base/_base.scss similarity index 95% rename from sass/_base.scss rename to sass/base/_base.scss index 8ea0957ac3..fd3f7774f7 100644 --- a/sass/_base.scss +++ b/sass/base/_base.scss @@ -29,6 +29,11 @@ em { font-style: italic; } +img { + max-width: 100%; + height: auto; +} + #{$all-text-inputs}, textarea { @include box-shadow(0 -1px 0 #fff); @include linear-gradient(#eee, #fff); diff --git a/sass/_base-extends.scss b/sass/base/_extends.scss similarity index 97% rename from sass/_base-extends.scss rename to sass/base/_extends.scss index 93ef00dd3f..c482b947e6 100644 --- a/sass/_base-extends.scss +++ b/sass/base/_extends.scss @@ -36,6 +36,8 @@ h1.top-header { font: bold $body-font-size $body-font-family; cursor: pointer; -webkit-font-smoothing: antialiased; + text-shadow: none; + text-decoration: none; &:hover, &:focus { @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); @@ -107,6 +109,10 @@ h1.top-header { } } } + + a.button { + text-decoration: none; + } } .topbar { diff --git a/sass/_font-face.scss b/sass/base/_font-face.scss similarity index 100% rename from sass/_font-face.scss rename to sass/base/_font-face.scss diff --git a/sass/_index-functions.scss b/sass/base/_functions.scss similarity index 76% rename from sass/_index-functions.scss rename to sass/base/_functions.scss index d0777bd813..2c4195d41b 100644 --- a/sass/_index-functions.scss +++ b/sass/base/_functions.scss @@ -1,6 +1,3 @@ -// Functions -//---------------------------------------- // - // Flexible grid @function flex-grid($columns, $container-columns: $fg-max-columns) { $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; @@ -14,8 +11,12 @@ @return percentage($gutter / $container-width); } -// Line-height -@function lh($amount: 1) { - @return $lh * $amount; +// Percentage of container calculator +@function perc($width, $container-width: $max-width) { + @return percentage($width / $container-width); } +// Line-height +@function lh($amount: 1) { + @return $body-line-height * $amount; +} diff --git a/sass/_reset.scss b/sass/base/_reset.scss similarity index 100% rename from sass/_reset.scss rename to sass/base/_reset.scss diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss new file mode 100644 index 0000000000..249f92dc96 --- /dev/null +++ b/sass/base/_variables.scss @@ -0,0 +1,31 @@ +// Variables +// ---------------------------------------- // + +// fonts +$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;; +$body-font-size: 14px; + +// grid +$columns: 12; +$column-width: 80px; +$gutter-width: 25px; +$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width); + +$gw-column: perc($column-width); +$gw-gutter: perc($gutter-width); +$body-line-height: golden-ratio($body-font-size, 1); + +//Flexible grid +$fg-column: $column-width; +$fg-gutter: $gutter-width; +$fg-max-columns: $columns; +$fg-max-width: 1400px; +$fg-min-width: 810px; + +// color +$light-gray: #ddd; +$dark-gray: #333; +$mit-red: #993333; + +$text-color: $dark-gray; +$border-color: $light-gray; diff --git a/sass/bourbon/_bourbon.scss b/sass/bourbon/_bourbon.scss index 5c1bc8a4a9..447167c5ab 100644 --- a/sass/bourbon/_bourbon.scss +++ b/sass/bourbon/_bourbon.scss @@ -1,7 +1,7 @@ // Custom Functions @import "functions/deprecated-webkit-gradient"; -@import "functions/golden-ratio"; @import "functions/grid-width"; +@import "functions/modular-scale"; @import "functions/tint-shade"; // CSS3 Mixins diff --git a/sass/bourbon/addons/_button.scss b/sass/bourbon/addons/_button.scss index d2f98ab0c3..1d32125140 100644 --- a/sass/bourbon/addons/_button.scss +++ b/sass/bourbon/addons/_button.scss @@ -5,31 +5,59 @@ $style: simple; } - @if $style == simple { - @include simple($base-color); + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } } - @else if $style == shiny { - @include shiny($base-color); - } + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } - @else if $style == pill { - @include pill($base-color); + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } } } -@mixin simple ($base-color) { - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + border: 1px solid $border; @include border-radius (3px); @include box-shadow (inset 0 1px 0 0 $inset-shadow); @@ -43,9 +71,15 @@ -webkit-background-clip: padding-box; &:hover { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); cursor: pointer; @@ -53,30 +87,47 @@ } &:active { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + border: 1px solid $border-active; @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); } } -@mixin shiny($base-color) { - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + border: 1px solid $border; border-bottom: 1px solid $border-bottom; @include border-radius(5px); @@ -85,43 +136,69 @@ display: inline; font-size: 14px; font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); padding: 7px 20px 8px; - text-decoration: none; text-align: center; + text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; &:hover { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); - @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%); + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); } &:active { $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); } } -@mixin pill($base-color) { - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $color: hsl(0, 0, 100%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); + $color: hsl(0, 0, 20%); $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); } - @include linear-gradient ($base-color, $stop-gradient); + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; @include border-radius(16px); @@ -131,35 +208,54 @@ font-size: 11px; font-weight: normal; line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); padding: 3px 16px 5px; text-align: center; text-shadow: 0 -1px 1px $text-shadow; -webkit-background-clip: padding-box; &:hover { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } - @include linear-gradient ($base-color-hover, $stop-gradient-hover); border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); text-shadow: 0 -1px 1px $text-shadow-hover; -webkit-background-clip: padding-box; } &:active { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } background: $active-color; border: 1px solid $border-active; @@ -168,3 +264,4 @@ text-shadow: 0 -1px 1px $text-shadow-active; } } + diff --git a/sass/bourbon/addons/_font-family.scss b/sass/bourbon/addons/_font-family.scss index 9e3bc6ee20..df8a80ddfc 100644 --- a/sass/bourbon/addons/_font-family.scss +++ b/sass/bourbon/addons/_font-family.scss @@ -1,4 +1,5 @@ $georgia: Georgia, Cambria, "Times New Roman", Times, serif; $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; $verdana: Verdana, Geneva, sans-serif; diff --git a/sass/bourbon/css3/_animation.scss b/sass/bourbon/css3/_animation.scss index 08f3b13e61..f99e06eb6f 100644 --- a/sass/bourbon/css3/_animation.scss +++ b/sass/bourbon/css3/_animation.scss @@ -1,6 +1,22 @@ // http://www.w3.org/TR/css3-animations/#the-animation-name-property- // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. +// Official animation shorthand property. +@mixin animation ($animation-1, + $animation-2: false, $animation-3: false, + $animation-4: false, $animation-5: false, + $animation-6: false, $animation-7: false, + $animation-8: false, $animation-9: false) + { + $full: compact($animation-1, $animation-2, $animation-3, $animation-4, + $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); + + -webkit-animation: $full; + -moz-animation: $full; + animation: $full; +} + +// Individual Animation Properties @mixin animation-name ($name-1, $name-2: false, $name-3: false, $name-4: false, $name-5: false, @@ -127,8 +143,7 @@ } -// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable. -// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in); +// Deprecated @mixin animation-basic ($name, $time: 0, $motion: ease) { $length-of-name: length($name); $length-of-time: length($time); @@ -151,11 +166,6 @@ } @else { @include animation-timing-function( $motion); } + @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; } -// Official animation shorthand property. Needs more work to actually be useful. -@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) { - -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction; - -moz-animation: $name $duration $timing-function $delay $iteration-count $direction; - animation: $name $duration $timing-function $delay $iteration-count $direction; -} diff --git a/sass/bourbon/css3/_linear-gradient.scss b/sass/bourbon/css3/_linear-gradient.scss index 585921f30b..0b68501719 100644 --- a/sass/bourbon/css3/_linear-gradient.scss +++ b/sass/bourbon/css3/_linear-gradient.scss @@ -2,7 +2,8 @@ $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, - $G9: false, $G10: false) { + $G9: false, $G10: false, + $fallback: false) { // Detect what type of value exists in $pos $pos-type: type-of(nth($pos, 1)); @@ -15,7 +16,15 @@ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - background-color: nth($G1, 1); + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if type-of($fallback) == color { + $fallback-color: $fallback; + } + + background-color: $fallback-color; background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -moz-linear-gradient($pos, $full); @@ -27,5 +36,6 @@ // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. // @include linear-gradient(#1e5799, #2989d8); +// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); // @include linear-gradient(top, #1e5799 0%, #2989d8 50%); // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/sass/bourbon/functions/_golden-ratio.scss b/sass/bourbon/functions/_golden-ratio.scss deleted file mode 100644 index 8f825addf3..0000000000 --- a/sass/bourbon/functions/_golden-ratio.scss +++ /dev/null @@ -1,31 +0,0 @@ -@function golden-ratio($value, $increment) { - @if $increment > 0 { - @for $i from 1 through $increment { - $value: ($value * 1.618); - } - } - - @if $increment < 0 { - $increment: abs($increment); - @for $i from 1 through $increment { - $value: ($value / 1.618); - } - } - - @return $value; -} - -// div { -// Increment Up GR with positive value -// font-size: golden-ratio(14px, 1); // returns: 22.652px -// -// Increment Down GR with negative value -// font-size: golden-ratio(14px, -1); // returns: 8.653px -// -// Can be used with ceil(round up) or floor(round down) -// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px -// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px -// } -// -// modularscale.com -// goldenratiocalculator.com diff --git a/sass/bourbon/functions/_modular-scale.scss b/sass/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000000..dddccb5224 --- /dev/null +++ b/sass/bourbon/functions/_modular-scale.scss @@ -0,0 +1,40 @@ +@function modular-scale($value, $increment, $ratio) { + @if $increment > 0 { + @for $i from 1 through $increment { + $value: ($value * $ratio); + } + } + + @if $increment < 0 { + $increment: abs($increment); + @for $i from 1 through $increment { + $value: ($value / $ratio); + } + } + + @return $value; +} + +// div { +// Increment Up GR with positive value +// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px +// +// Increment Down GR with negative value +// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px +// +// Can be used with ceil(round up) or floor(round down) +// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px +// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px +// } +// +// modularscale.com + +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, 1.618) +} + +// div { +// font-size: golden-ratio(14px, 1); // returns: 22.652px +// } +// +// goldenratiocalculator.com diff --git a/sass/bourbon/lib/bourbon.rb b/sass/bourbon/lib/bourbon.rb index ca440eefbc..1635be836d 100644 --- a/sass/bourbon/lib/bourbon.rb +++ b/sass/bourbon/lib/bourbon.rb @@ -1,3 +1,5 @@ +require "bourbon/generator" + module Bourbon if defined?(Rails) class Engine < ::Rails::Engine diff --git a/sass/_courseware.scss b/sass/courseware/_courseware.scss similarity index 69% rename from sass/_courseware.scss rename to sass/courseware/_courseware.scss index 489657459f..9d7ab8123a 100644 --- a/sass/_courseware.scss +++ b/sass/courseware/_courseware.scss @@ -5,87 +5,17 @@ div.course-wrapper { list-style: none; } - div#accordion { - @extend .sidebar; - - div#open_close_accordion { - position: absolute; - right: 0px; - width: 20px; - height: 20px; - background: #ccc; - border: 1px solid black; - right: -22px; - top: 5px; - } - - h3 { - overflow: hidden; - margin: 0; - - &:last-child { - @include box-shadow(none); - } - - &.ui-accordion-header { - color: #000; - - a { - font-size: $body-font-size; - color: lighten($text-color, 10%); - } - - &.ui-state-hover { - border: none; - border-bottom: 1px solid #d3d3d3; - } - - &.ui-state-active { - @extend .active; - } - } - } - - ul.ui-accordion-content { - @include border-radius(0); - @include box-shadow( inset -1px 0 0 #e6e6e6); - background: #d6d6d6; - border: none; - border-bottom: 1px solid #c3c3c3; - font-size: 12px; - margin: 0; - overflow: hidden; - - li { - &.active { - font-weight: bold; - } - - a { - text-decoration: none; - margin-bottom: lh(.5); - display: block; - color: #000; - - &:hover { - color: #666; - } - - p { - margin-bottom: 0; - - &.subtitle { - color: #666; - } - } - } - } - } + .tran { + @include transition( all, .2s, $ease-in-out-quad); } section.course-content { @extend .content; + h1 { + @extend .top-header; + } + p { margin-bottom: lh(); @@ -95,6 +25,12 @@ div.course-wrapper { } } + ul { + li { + margin-bottom: lh(.5); + } + } + .problem-set { position: relative; @extend .clearfix; @@ -180,7 +116,6 @@ div.course-wrapper { } } - section.problems-wrapper, div#seq_content { @extend .problem-set; } @@ -195,8 +130,17 @@ div.course-wrapper { } } + div#seq_content { + h1 { + background: none; + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + } + ol.vert-mod { - > li { + > li { @extend .clearfix; @extend .problem-set; border-bottom: 1px solid #ddd; @@ -211,4 +155,34 @@ div.course-wrapper { } } } + + &.closed { + section.course-index { + width: flex-grid(.6); + + div#open_close_accordion { + padding: 0; + + a { + background-image: url('/static/images/slide-right-icon.png'); + } + + h2 { + visibility: hidden; + width: 10px; + padding: 0; + } + } + + div#accordion { + visibility: hidden; + width: 10px; + padding: 0; + } + } + + section.course-content { + width: flex-grid(11.5) + flex-gutter(); + } + } } diff --git a/sass/_courseware-sequence-nav.scss b/sass/courseware/_sequence-nav.scss similarity index 100% rename from sass/_courseware-sequence-nav.scss rename to sass/courseware/_sequence-nav.scss diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss new file mode 100644 index 0000000000..3f937433f2 --- /dev/null +++ b/sass/courseware/_sidebar.scss @@ -0,0 +1,98 @@ +section.course-index { + @extend .sidebar; + @extend .tran; + + div#open_close_accordion { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + padding: 0 lh(); + position: relative; + + h2 { + padding-right: 20px; + } + + a { + width: 16px; + text-indent: -9999px; + height: 16px; + position: absolute; + padding: 8px; + top: -12px; + right: -1px; + border: 1px solid #D3D3D3; + background: #eee url('/static/images/slide-left-icon.png') center center no-repeat; + @include border-radius(3px 0 0 3px); + + &:hover { + background-color: white; + } + } + } + + div#accordion { + + h3 { + overflow: hidden; + margin: 0; + + &:last-child { + @include box-shadow(none); + } + + &.ui-accordion-header { + color: #000; + + a { + font-size: $body-font-size; + color: lighten($text-color, 10%); + } + + &.ui-state-hover { + border: none; + border-bottom: 1px solid #d3d3d3; + } + + &.ui-state-active { + @extend .active; + } + } + } + + ul.ui-accordion-content { + @include border-radius(0); + @include box-shadow( inset -1px 0 0 #e6e6e6); + background: #d6d6d6; + border: none; + border-bottom: 1px solid #c3c3c3; + font-size: 12px; + margin: 0; + overflow: hidden; + + li { + &.active { + font-weight: bold; + } + + a { + text-decoration: none; + margin-bottom: lh(.5); + display: block; + color: #000; + + &:hover { + color: #666; + } + + p { + margin-bottom: 0; + + &.subtitle { + color: #666; + } + } + } + } + } + } +} diff --git a/sass/_courseware-video.scss b/sass/courseware/_video.scss similarity index 99% rename from sass/_courseware-video.scss rename to sass/courseware/_video.scss index 45e7777399..264bcc953d 100644 --- a/sass/_courseware-video.scss +++ b/sass/courseware/_video.scss @@ -88,6 +88,7 @@ section.course-content { li { float: left; + margin-bottom: 0; a { @include box-shadow(1px 0 0 #555); diff --git a/sass/discussion/_answers.scss b/sass/discussion/_answers.scss new file mode 100644 index 0000000000..88965db304 --- /dev/null +++ b/sass/discussion/_answers.scss @@ -0,0 +1,138 @@ +div.answer-controls { + @include box-sizing(border-box); + display: inline-block; + margin: 0 0 15px; + padding-left: flex-grid(1.1); + width: 100%; + + div.answer-count { + display: inline-block; + float: left; + } + + div.answer-sort { + float: right; + margin-left: flex-gutter(); + + nav { + @extend .action-link; + float: right; + margin-top: 25px; + + a { + &.on span{ + font-weight: bold; + } + + &:before { + content: '|'; + color: darken(#F6EFD4, 10%); + font-size: 22px; + } + } + } + } +} + +div.answer-block { + @extend div.question-header; + border-top: #ddd 1px solid; + display: inline-block; + float: left; + padding-top: 20px; + width: 100%; + + img.answer-img-accept { + margin: 10px 0px 10px 16px; + } + div.answer-container { + @extend div.question-container; + + div.answer-content { + @extend div.question-content; + + div.answer-body { + @extend div.question-body; + } + } + } + + div.meta-bar { + div.answer-actions { + @extend div.question-actions; + } + } + + div.answered-by-owner { + p { + font-style: italic; + color: #656565; + } + + div.comments-container { + color: #555; + } + } +} + +div.paginator { + @extend div.answer-block; + text-align: center; + padding: 20px 0; + + span { + @include border-radius(3px); + background: #eee; + margin: 0 5px; + padding: 4px 10px; + + &.curr { + background: none; + color: $mit-red; + font-weight: bold; + } + + &.next, &.prev { + @extend .light-button; + } + + a { + color: #555; + text-decoration: none; + } + } +} + +div.answer-own { + border-top: 1px solid #eee; + overflow:hidden; + padding-left: flex-grid(1.2); + padding-top: 10px; +} + +div.answer-actions { + border-left: 3px solid darken(#F6EFD4, 10%); + margin: 0; + padding:8px 8px 8px 0; + text-align: right; + background:lighten(#F6EFD4, 5%); + + span.sep { + color: #ddd; + } + + a { + cursor: pointer; + text-decoration: none; + + &.question-delete { + color: $mit-red; + } + + &.question-edit, &.permant-link { + color: darken(#F6EFD4, 45%);; + } + + } + +} diff --git a/sass/_askbot-original.scss b/sass/discussion/_askbot-original.scss similarity index 80% rename from sass/_askbot-original.scss rename to sass/discussion/_askbot-original.scss index a1ff71cb0e..0e6b761181 100644 --- a/sass/_askbot-original.scss +++ b/sass/discussion/_askbot-original.scss @@ -1,13 +1,13 @@ -// Original styles +// original styles // body { -// background: #FFF; +// background: #fff; // font-size: 14px; // line-height: 150%; // margin: 0; // padding: 0; // color: #000; -// font-family: Arial; } +// font-family: arial; } // div { // margin: 0 auto; @@ -27,7 +27,7 @@ // input, select { // vertical-align: middle; -// font-family: Trebuchet MS,"segoe ui",Helvetica,Tahoma,Verdana,MingLiu,PMingLiu,Arial,sans-serif; +// font-family: trebuchet ms,"segoe ui",helvetica,tahoma,verdana,mingliu,pmingliu,arial,sans-serif; // margin-left: 0px; } // textarea:focus, input:focus { @@ -73,23 +73,23 @@ // margin: 3px 3px 4px 3px; } // pre { -// font-family: Consolas, Monaco, Liberation Mono, Lucida Console, Monospace; +// font-family: consolas, monaco, liberation mono, lucida console, monospace; // font-size: 100%; // margin-bottom: 10px; -// background-color: #F5F5F5; +// background-color: #f5f5f5; // padding-left: 5px; // padding-top: 5px; // padding-bottom: 20px; } // code { -// font-family: Consolas, Monaco, Liberation Mono, Lucida Console, Monospace; +// font-family: consolas, monaco, liberation mono, lucida console, monospace; // font-size: 100%; } // blockquote { // margin-bottom: 10px; // margin-right: 15px; // padding: 10px 0px 1px 10px; -// background-color: #F5F5F5; } +// background-color: #f5f5f5; } // * html { // .clearfix, .paginator { @@ -148,14 +148,14 @@ body.user-messages { text-align: center; background-color: #f5dd69; border-top: #fff 1px solid; - font-family: 'Yanone Kaffeesatz',sans-serif; + font-family: 'yanone kaffeesatz',sans-serif; p.notification { margin-top: 6px; margin-bottom: 6px; font-size: 16px; color: #424242; } } -#closeNotify { +#closenotify { position: absolute; right: 5px; top: 7px; @@ -172,7 +172,7 @@ body.user-messages { #header { margin-top: 0px; background: #16160f; - font-family: 'Yanone Kaffeesatz',sans-serif; } + font-family: 'yanone kaffeesatz',sans-serif; } /*.content-wrapper { width: 960px; @@ -185,7 +185,7 @@ body.user-messages { width: auto; float: left; } -#userToolsNav { +#usertoolsnav { height: 20px; padding-bottom: 5px; a { @@ -208,7 +208,7 @@ body.user-messages { margin: 0; text-decoration: none; } } -#metaNav { +#metanav { float: right; a { color: #e2e2ae; @@ -225,42 +225,42 @@ body.user-messages { text-decoration: underline; } &.on { font-weight: bold; - color: #FFF; + color: #fff; text-decoration: none; } &.special { font-size: 18px; - color: #B02B2C; + color: #b02b2c; font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } } } - #navTags { + #navtags { background: -50px -5px url(../images/sprites.png) no-repeat; } - #navUsers { + #navusers { background: -125px -5px url(../images/sprites.png) no-repeat; } - #navBadges { + #navbadges { background: -210px -5px url(../images/sprites.png) no-repeat; } } // #header { -// &.with-logo #userToolsNav { +// &.with-logo #usertoolsnav { // position: absolute; // bottom: 0; // right: 0px; } // &.without-logo { -// #userToolsNav { +// #usertoolsnav { // float: left; // margin-top: 7px; } -// #metaNav { +// #metanav { // margin-bottom: 7px; } } } -// #secondaryHeader { +// #secondaryheader { // height: 55px; // background: #e9e9e1; // border-bottom: #d3d3c2 1px solid; // border-top: #fcfcfc 1px solid; // margin-bottom: 10px; -// font-family: 'Yanone Kaffeesatz',sans-serif; -// #homeButton { +// font-family: 'yanone kaffeesatz',sans-serif; +// #homebutton { // border-right: #afaf9e 1px solid; // background: -6px -36px url(../images/sprites.png) no-repeat; // height: 55px; @@ -269,7 +269,7 @@ body.user-messages { // float: left; // &:hover { // background: -51px -36px url(../images/sprites.png) no-repeat; } } -// #scopeWrapper { +// #scopewrapper { // width: 688px; // float: left; // a { @@ -286,7 +286,7 @@ body.user-messages { // .ask-message { // font-size: 24px; } } } -#searchBar { +#searchbar { display: inline-block; background-color: #fff; width: 412px; @@ -294,28 +294,28 @@ body.user-messages { float: right; height: 42px; margin: 6px 0px 0px 15px; - .searchInput, .searchInputCancelable { + .searchinput, .searchinputcancelable { font-size: 30px; height: 40px; font-weight: 300; - background: #FFF; + background: #fff; border: 0px; color: #484848; padding-left: 10px; - font-family: Arial; + font-family: arial; vertical-align: middle; } - .searchInput { + .searchinput { width: 352px; } - .searchInputCancelable { + .searchinputcancelable { width: 317px; } .logoutsearch { width: 337px; } - .searchBtn { + .searchbtn { font-size: 10px; color: #666; background-color: #eee; height: 42px; - border: #FFF 1px solid; + border: #fff 1px solid; line-height: 22px; text-align: center; float: right; @@ -325,7 +325,7 @@ body.user-messages { cursor: pointer; &:hover { background: -146px -36px url(../images/sprites.png) no-repeat; } } - .cancelSearchBtn { + .cancelsearchbtn { font-size: 30px; color: #ce8888; background: #fff; @@ -338,14 +338,14 @@ body.user-messages { &:hover { color: #d84040; } } } -body.anon #searchBar { +body.anon #searchbar { width: 500px; - .searchInput { + .searchinput { width: 440px; } - .searchInputCancelable { + .searchinputcancelable { width: 405px; } } -#askButton { +#askbutton { background: url(../images/bigbutton.png) repeat-x bottom; line-height: 44px; text-align: center; @@ -371,18 +371,18 @@ body.anon #searchBar { -moz-text-shadow: 0px 1px 0px #c6d9dd; -webkit-text-shadow: 0px 1px 0px #c6d9dd; } } -/*#ContentLeft { +/*#contentleft { width: 730px; float: left; position: relative; padding-bottom: 10px; } -#ContentRight { +#contentright { width: 200px; float: right; padding: 0 0px 10px 0px; }*/ -#ContentFull { +#contentfull { float: left; width: 960px; } @@ -396,62 +396,62 @@ body.anon #searchBar { text-align: right; margin: 0; } } h2 { - padding-left: 0; - /*background: #eceeeb;*/ - height: 30px; - line-height: 30px; - /*text-align: right;*/ - /*font-size: 18px !important;*/ - font-weight: normal; - color: #656565; - /*padding-right: 10px;*/ - /*margin-bottom: 10px;*/ - /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ + // padding-left: 0; + // /*background: #eceeeb;*/ + // height: 30px; + // line-height: 30px; + // /*text-align: right;*/ + // /*font-size: 18px !important;*/ + // // font-weight: normal; + // // color: #656565; + // /*padding-right: 10px;*/ + // /*margin-bottom: 10px;*/ + // /*font-family: 'yanone kaffeesatz',sans-serif;*/ } - h3 { - /*color: #4a757f;*/ - /*font-size: 18px;*/ - text-align: left; - font-weight: normal; - /*font-family: 'Yanone Kaffeesatz',sans-serif;*/ - padding-left: 0px; } - .contributorback { - background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } + // h3 { + // /*color: #4a757f;*/ + // /*font-size: 18px;*/ + // text-align: left; + // font-weight: normal; + // /*font-family: 'yanone kaffeesatz',sans-serif;*/ + // padding-left: 0px; } + // .contributorback { + // background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } // label { // color: #707070; // font-size: 15px; // display: block; // float: right; // text-align: left; - // font-family: 'Yanone Kaffeesatz',sans-serif; + // font-family: 'yanone kaffeesatz',sans-serif; // width: 80px; // margin-right: 18px; } - // #displayTagFilterControl label { + // #displaytagfiltercontrol label { // width: 160px; } - ul { - margin-left: 22px; } - li { - list-style-type: disc; - font-size: 13px; - line-height: 20px; - margin-bottom: 10px; - color: #707070; } - ul.tags { - list-style: none; - margin: 0; - padding: 0; - line-height: 170%; - display: block; } - #displayTagFilterControl p label { - color: #707070; - font-size: 15px; } + // ul { + // margin-left: 22px; } + // li { + // list-style-type: disc; + // font-size: 13px; + // line-height: 20px; + // margin-bottom: 10px; + // color: #707070; } + // ul.tags { + // list-style: none; + // margin: 0; + // padding: 0; + // line-height: 170%; + // display: block; } + // #displaytagfiltercontrol p label { + // color: #707070; + // font-size: 15px; } /*.inputs { - #interestingTagInput, #ignoredTagInput { + #interestingtaginput, #ignoredtaginput { width: 153px; padding-left: 5px; border: #c9c9b5 1px solid; height: 25px; } - #interestingTagAdd, #ignoredTagAdd { + #interestingtagadd, #ignoredtagadd { background: url(../images/small-button-blue.png) repeat-x top; border: 0; color: #4a757f; @@ -472,101 +472,102 @@ body.anon #searchBar { -webkit-box-shadow: 1px 1px 2px #808080; -moz-box-shadow: 1px 1px 2px #808080; box-shadow: 1px 1px 2px #808080; } - #interestingTagAdd:hover, #ignoredTagAdd:hover { + #interestingtagadd:hover, #ignoredtagadd:hover { background: url(../images/small-button-blue.png) repeat-x bottom; } }*/ - img.gravatar { - margin: 1px; } - a { - &.followed, &.follow { - background: url(../images/medium-button.png) top repeat-x; - height: 34px; - line-height: 34px; - text-align: center; - border: 0; - font-family: 'Yanone Kaffeesatz',sans-serif; - color: #4a757f; - font-weight: normal; - font-size: 21px; - margin-top: 3px; - display: block; - width: 120px; - text-decoration: none; - border-radius: 4px; - -ms-border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - -webkit-box-shadow: 1px 1px 2px #636363; - -moz-box-shadow: 1px 1px 2px #636363; - box-shadow: 1px 1px 2px #636363; - margin: 0 auto; - padding: 0; } - &.followed:hover, &.follow:hover { - text-decoration: none; - background: url(../images/medium-button.png) bottom repeat-x; - text-shadow: 0px 1px 0px #c6d9dd; - -moz-text-shadow: 0px 1px 0px #c6d9dd; - -webkit-text-shadow: 0px 1px 0px #c6d9dd; } - &.followed { - div.unfollow { - display: none; } - &:hover div { - display: none; - &.unfollow { - display: inline; - color: #a05736; } } } } - .favorite-number { - padding: 5px 0 0 5px; - font-size: 100%; - font-family: Arial; - font-weight: bold; - color: #777; - text-align: center; } - .notify-sidebar #question-subscribe-sidebar { - margin: 7px 0 0 3px; } } + // img.gravatar { + // margin: 1px; } + // a { + // &.followed, &.follow { + // background: url(../images/medium-button.png) top repeat-x; + // height: 34px; + // line-height: 34px; + // text-align: center; + // border: 0; + // font-family: 'yanone kaffeesatz',sans-serif; + // color: #4a757f; + // font-weight: normal; + // font-size: 21px; + // margin-top: 3px; + // display: block; + // width: 120px; + // text-decoration: none; + // border-radius: 4px; + // -ms-border-radius: 4px; + // -moz-border-radius: 4px; + // -webkit-border-radius: 4px; + // -khtml-border-radius: 4px; + // -webkit-box-shadow: 1px 1px 2px #636363; + // -moz-box-shadow: 1px 1px 2px #636363; + // box-shadow: 1px 1px 2px #636363; + // margin: 0 auto; + // padding: 0; } + // &.followed:hover, &.follow:hover { + // text-decoration: none; + // background: url(../images/medium-button.png) bottom repeat-x; + // text-shadow: 0px 1px 0px #c6d9dd; + // -moz-text-shadow: 0px 1px 0px #c6d9dd; + // -webkit-text-shadow: 0px 1px 0px #c6d9dd; } + // &.followed { + // div.unfollow { + // display: none; } + // &:hover div { + // display: none; + // &.unfollow { + // display: inline; + // color: #a05736; } } } } + // .favorite-number { + // padding: 5px 0 0 5px; + // font-size: 100%; + // font-family: arial; + // font-weight: bold; + // color: #777; + // text-align: center; } + // .notify-sidebar #question-subscribe-sidebar { + // margin: 7px 0 0 3px; } + } -.statsWidget p { - color: #707070; - font-size: 16px; - border-bottom: #cccccc 1px solid; - font-size: 13px; - strong { - float: right; - padding-right: 10px; } } +//.statswidget p { + // color: #707070; + // font-size: 16px; + // border-bottom: #cccccc 1px solid; + // font-size: 13px; + // strong { + // float: right; + // padding-right: 10px; } } -.questions-related { - word-wrap: break-word; - p { - line-height: 20px; - padding: 4px 0px 4px 0px; - font-size: 16px; - font-weight: normal; - border-bottom: #cccccc 1px solid; } - a { - font-size: 13px; } } +// .questions-related { +// word-wrap: break-word; +// p { +// line-height: 20px; +// padding: 4px 0px 4px 0px; +// font-size: 16px; +// font-weight: normal; +// border-bottom: #cccccc 1px solid; } +// a { +// font-size: 13px; } } -#tips { - li { - color: #707070; - font-size: 13px; - list-style-image: url(../images/tips.png); } - a { - font-size: 16px; } } +// #tips { +// li { +// color: #707070; +// font-size: 13px; +// list-style-image: url(../images/tips.png); } +// a { +// font-size: 16px; } } -#markdownHelp { - li { - color: #707070; - font-size: 13px; } - a { - font-size: 16px; } } +// #markdownhelp { +// li { +// color: #707070; +// font-size: 13px; } +// a { +// font-size: 16px; } } -// .tabBar { +// .tabbar { // background-color: #eff5f6; // height: 30px; // margin-bottom: 3px; // margin-top: 3px; // float: right; - // font-family: Georgia,serif; + // font-family: georgia,serif; // font-size: 16px; // border-radius: 5px; // -ms-border-radius: 5px; @@ -576,19 +577,19 @@ body.anon #searchBar { // h2 { // float: left; } } -// .tabsA, .tabsC { +// .tabsa, .tabsc { // float: right; // position: relative; // display: block; // height: 20px; } -// .tabsA { +// .tabsa { // float: right; } -// .tabsC { +// .tabsc { // float: left; } -// .tabsA a, .tabsC a { +// .tabsa a, .tabsc a { // border-left: 1px solid #d0e1e4; // color: #7ea9b3; // display: block; @@ -598,19 +599,19 @@ body.anon #searchBar { // padding: 4px 7px 4px 7px; // text-decoration: none; } -// .tabsA a.on, .tabsC a.on, .tabsA a:hover, .tabsC a:hover { +// .tabsa a.on, .tabsc a.on, .tabsa a:hover, .tabsc a:hover { // color: #4a757f; } -// .tabsA .label, .tabsC .label { +// .tabsa .label, .tabsc .label { // float: left; // color: #646464; // margin-top: 4px; // margin-right: 5px; } -// .main-page .tabsA .label { +// .main-page .tabsa .label { // margin-left: 8px; } -// .tabsB a { +// .tabsb a { // background: #eee; // border: 1px solid #eee; // color: #777; @@ -622,7 +623,7 @@ body.anon #searchBar { // padding: 0 11px 0 11px; // text-decoration: none; } -// .tabsC .first { +// .tabsc .first { // border: none; } // .rss { @@ -635,12 +636,12 @@ body.anon #searchBar { // padding-top: 3px; // background: white url(../images/feed-icon-small.png) no-repeat center right; // float: right; - // font-family: Georgia,serif; + // font-family: georgia,serif; // font-size: 16px; // &:hover { - // color: #F4A731 !important; } } + // color: #f4a731 !important; } } -// #questionCount { +// #questioncount { // font-weight: bold; // font-size: 23px; // color: #7ea9b3; @@ -648,19 +649,19 @@ body.anon #searchBar { // float: left; // margin-bottom: 8px; // padding-top: 6px; -// font-family: 'Yanone Kaffeesatz',sans-serif; } +// font-family: 'yanone kaffeesatz',sans-serif; } -#listSearchTags { - float: left; - margin-top: 3px; - color: #707070; - font-size: 16px; - font-family: 'Yanone Kaffeesatz',sans-serif; } +// #listsearchtags { +// float: left; +// margin-top: 3px; +// color: #707070; +// font-size: 16px; +// font-family: 'yanone kaffeesatz',sans-serif; } -ul#searchTags { - margin-left: 10px; - float: right; - padding-top: 2px; } +// ul#searchtags { +// margin-left: 10px; +// float: right; +// padding-top: 2px; } // .search-tips { // font-size: 16px; @@ -669,7 +670,7 @@ ul#searchTags { // margin: 5px 0 10px 0; // padding: 0px; // float: left; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // a { // text-decoration: underline; // color: #1b79bd; } } @@ -677,7 +678,7 @@ ul#searchTags { // #question-list { // float: left; // position: relative; -// background-color: #FFF; +// background-color: #fff; // padding: 0; // width: 100%; } @@ -685,7 +686,7 @@ ul#searchTags { // position: relative; // filter: inherit; // padding: 10px; -// border-bottom: 1px solid #DDDBCE; +// border-bottom: 1px solid #dddbce; // margin-bottom: 1px; // overflow: hidden; // width: 710px; @@ -698,13 +699,13 @@ ul#searchTags { // padding-left: 0; // margin-bottom: 6px; // display: block; -// font-family: 'Yanone Kaffeesatz',sans-serif; } +// font-family: 'yanone kaffeesatz',sans-serif; } // a { // color: #464646; } // .userinfo { // text-align: right; // line-height: 16px; -// font-family: Arial; +// font-family: arial; // padding-right: 4px; // .relativetime { // font-size: 11px; @@ -722,11 +723,11 @@ ul#searchTags { // .counts { // float: right; // margin: 4px 0 0 5px; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // .item-count { // padding: 0px 5px 0px 5px; // font-size: 25px; -// font-family: 'Yanone Kaffeesatz',sans-serif; } +// font-family: 'yanone kaffeesatz',sans-serif; } // .votes div, .views div, .answers div, .favorites div { // margin-top: 3px; // font-size: 14px; @@ -773,7 +774,7 @@ ul#searchTags { // background: #eab243; // color: yellow; } } -// .evenMore { +// .evenmore { // font-size: 13px; // color: #707070; // padding: 15px 0px 10px 0px; @@ -791,83 +792,83 @@ ul#searchTags { margin-bottom: 16px; float: right; } -.paginator { - padding: 5px 0 10px 0; - font-size: 13px; - margin-bottom: 10px; - .prev a, .next a { - background-color: #fff; - color: #777; - padding: 2px 4px 3px 4px; - &:visited { - background-color: #fff; - color: #777; - padding: 2px 4px 3px 4px; } } - a { - color: #7ea9b3; } - .prev { - margin-right: .5em; } - .next { - margin-left: .5em; } - .page a { - padding: .25em; - background-color: #fff; - margin: 0em .25em; - color: #ff; - &:visited { - padding: .25em; - background-color: #fff; - margin: 0em .25em; - color: #ff; } } - .curr { - padding: .25em; - background-color: #fff; - margin: 0em .25em; - color: #ff; - background-color: #8ebcc7; - color: #fff; - font-weight: bold; } - .next a, .prev a { - color: #7ea9b3; } - .page a:hover, .curr a:hover, .prev a:hover, .next a:hover { - color: #8C8C8C; - background-color: #E1E1E1; - text-decoration: none; } - .text { - color: #777; - padding: .3em; } - .paginator-container-left { - padding: 5px 0 10px 0; } } +// .paginator { +// padding: 5px 0 10px 0; +// font-size: 13px; +// margin-bottom: 10px; +// .prev a, .next a { +// background-color: #fff; +// color: #777; +// padding: 2px 4px 3px 4px; +// &:visited { +// background-color: #fff; +// color: #777; +// padding: 2px 4px 3px 4px; } } +// a { +// color: #7ea9b3; } +// .prev { +// margin-right: .5em; } +// .next { +// margin-left: .5em; } +// .page a { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; +// &:visited { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; } } +// .curr { +// padding: .25em; +// background-color: #fff; +// margin: 0em .25em; +// color: #ff; +// background-color: #8ebcc7; +// color: #fff; +// font-weight: bold; } +// .next a, .prev a { +// color: #7ea9b3; } +// .page a:hover, .curr a:hover, .prev a:hover, .next a:hover { +// color: #8c8c8c; +// background-color: #e1e1e1; +// text-decoration: none; } +// .text { +// color: #777; +// padding: .3em; } +// .paginator-container-left { +// padding: 5px 0 10px 0; } } -.tag-size-1 { - font-size: 12px; } +// .tag-size-1 { +// font-size: 12px; } -.tag-size-2 { - font-size: 13px; } +// .tag-size-2 { +// font-size: 13px; } -.tag-size-3 { - font-size: 14px; } +// .tag-size-3 { +// font-size: 14px; } -.tag-size-4 { - font-size: 15px; } +// .tag-size-4 { +// font-size: 15px; } -.tag-size-5 { - font-size: 16px; } +// .tag-size-5 { +// font-size: 16px; } -.tag-size-6 { - font-size: 17px; } +// .tag-size-6 { +// font-size: 17px; } -.tag-size-7 { - font-size: 18px; } +// .tag-size-7 { +// font-size: 18px; } -.tag-size-8 { - font-size: 19px; } +// .tag-size-8 { +// font-size: 19px; } -.tag-size-9 { - font-size: 20px; } +// .tag-size-9 { +// font-size: 20px; } -.tag-size-10 { - font-size: 21px; } +// .tag-size-10 { +// font-size: 21px; } // ul { // &.tags { @@ -895,29 +896,29 @@ ul#searchTags { // padding: 0; // height: 20px; } } -.wildcard-tags { - clear: both; } +// .wildcard-tags { +// clear: both; } -ul.tags.marked-tags li, .wildcard-tags ul.tags li { - margin-bottom: 5px; } +// ul.tags.marked-tags li, .wildcard-tags ul.tags li { +// margin-bottom: 5px; } -#tagSelector div.inputs { - clear: both; - float: none; - margin-bottom: 10px; } +// #tagselector div.inputs { +// clear: both; +// float: none; +// margin-bottom: 10px; } -.tags-page ul.tags li { - width: 160px; - margin: 5px; } +// .tags-page ul.tags li { +// width: 160px; +// margin: 5px; } -ul { - &#ab-user-tags li { - width: 160px; - margin: 5px; } - &#related-tags li { - margin: 0 5px 8px 0; - float: left; - clear: left; } } +// ul { +// &#ab-user-tags li { +// width: 160px; +// margin: 5px; } +// &#related-tags li { +// margin: 0 5px 8px 0; +// float: left; +// clear: left; } } // .tag-left { // cursor: pointer; @@ -946,31 +947,31 @@ ul { // text-align: center; // white-space: nowrap; // vertical-align: middle; -// font-family: Arial; +// font-family: arial; // color: #717179; } -.deletable-tag { - margin-right: 3px; - white-space: nowrap; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-topright: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-top-right-radius: 4px; } +// .deletable-tag { +// margin-right: 3px; +// white-space: nowrap; +// border-top-right-radius: 4px; +// border-bottom-right-radius: 4px; +// -moz-border-radius-topright: 4px; +// -moz-border-radius-bottomright: 4px; +// -webkit-border-bottom-right-radius: 4px; +// -webkit-border-top-right-radius: 4px; } -.tags { - a.tag-right, span.tag-right { - color: #585858; - text-decoration: none; } - a:hover { - color: #1A1A1A; } } +// .tags { +// a.tag-right, span.tag-right { +// color: #585858; +// text-decoration: none; } +// a:hover { +// color: #1a1a1a; } } -.users-page h1, .tags-page h1 { - float: left; } +// .users-page h1, .tags-page h1 { +// float: left; } -.main-page h1 { - margin-right: 5px; } +// .main-page h1 { +// margin-right: 5px; } // .delete-icon { // margin-top: -1px; @@ -984,7 +985,7 @@ ul { // cursor: default; // color: #fff; // border-top: #cfdbdb 1px solid; -// font-family: Arial; +// font-family: arial; // border-top-right-radius: 4px; // border-bottom-right-radius: 4px; // -moz-border-radius-topright: 4px; @@ -997,28 +998,28 @@ ul { // &:hover { // background: #b32f2f; } } -.tag-number { - font-weight: normal; - float: left; - font-size: 16px; - color: #5d5d5d; } +// .tag-number { +// font-weight: normal; +// float: left; +// font-size: 16px; +// color: #5d5d5d; } -.badges .tag-number { - float: none; - display: inline; - padding-right: 15px; } +// .badges .tag-number { +// float: none; +// display: inline; +// padding-right: 15px; } -.section-title { - color: #7ea9b3; - font-family: 'Yanone Kaffeesatz',sans-serif; - font-weight: bold; - font-size: 24px; } +// .section-title { +// color: #7ea9b3; +// font-family: 'yanone kaffeesatz',sans-serif; +// font-weight: bold; +// font-size: 24px; } // #fmask { // margin-bottom: 30px; // width: 100%; } -// #askFormBar { +// #askformbar { // display: inline-block; // padding: 4px 7px 5px 0px; // margin-top: 0px; @@ -1027,7 +1028,7 @@ ul { // font-size: 14px; // color: #525252; // line-height: 1.4; } -// .questionTitleInput { +// .questiontitleinput { // font-size: 24px; // line-height: 24px; // height: 36px; @@ -1091,7 +1092,7 @@ ul { // background: url(../images/medium-button.png) top repeat-x; // height: 34px; // border: 0; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // color: #4a757f; // font-weight: normal; // font-size: 21px; @@ -1132,20 +1133,20 @@ ul { // .wmd-preview { // margin: 3px 0 5px 0; // padding: 6px; -// background-color: #F5F5F5; +// background-color: #f5f5f5; // min-height: 20px; // overflow: auto; // font-size: 13px; -// font-family: Arial; +// font-family: arial; // p { // margin-bottom: 14px; // line-height: 1.4; // font-size: 14px; } // pre { -// background-color: #E7F1F8; } +// background-color: #e7f1f8; } // blockquote { // background-color: #eee; } -// IMG { +// img { // max-width: 600px; } } // .preview-toggle { @@ -1172,43 +1173,43 @@ ul { label { vertical-align: text-bottom; } } -.edit-content-html { - border-top: 1px dotted #D8D2A9; - border-bottom: 1px dotted #D8D2A9; - margin: 5px 0 5px 0; } +// .edit-content-html { +// border-top: 1px dotted #d8d2a9; +// border-bottom: 1px dotted #d8d2a9; +// margin: 5px 0 5px 0; } -.edit-question-page, #fmedit, .wmd-preview { - color: #525252; } +// .edit-question-page, #fmedit, .wmd-preview { +// color: #525252; } -.edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision { - font-size: 14px; - margin-top: 5px; - margin-bottom: 5px; } +// .edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision { +// font-size: 14px; +// margin-top: 5px; +// margin-bottom: 5px; } -.edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title { - font-size: 24px; - line-height: 24px; - height: 36px; - margin: 0px; - padding: 0px 0 0 5px; - border: #cce6ec 3px solid; - width: 725px; - margin-bottom: 10px; } +// .edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title { +// font-size: 24px; +// line-height: 24px; +// height: 36px; +// margin: 0px; +// padding: 0px 0 0 5px; +// border: #cce6ec 3px solid; +// width: 725px; +// margin-bottom: 10px; } -.edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary { - border: #cce6ec 3px solid; - height: 25px; - padding-left: 5px; - width: 395px; - font-size: 14px; } +// .edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary { +// border: #cce6ec 3px solid; +// height: 25px; +// padding-left: 5px; +// width: 395px; +// font-size: 14px; } -.edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc { - margin-bottom: 10px; } +// .edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc { +// margin-bottom: 10px; } // .question-page { // h1 { // padding-top: 0px; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // a { // color: #464646; // font-size: 30px; @@ -1223,7 +1224,7 @@ ul { // background-position: center left; // margin-left: 0px !important; // a { -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // vertical-align: top; } } // .question-content { // float: right; @@ -1242,7 +1243,7 @@ ul { // width: 670px; // padding-right: 10px; // margin-top: 0px; -// border-bottom: 1px solid #D4D4D4; +// border-bottom: 1px solid #d4d4d4; // float: right; // td { // width: 20px; @@ -1253,7 +1254,7 @@ ul { // .question-body, .answer-body { // overflow: auto; // margin-top: 10px; -// font-family: Arial; +// font-family: arial; // color: #4b4b4b; } // .question-body p, .answer-body p { // margin-bottom: 14px; @@ -1264,7 +1265,7 @@ ul { // color: #1b79bd; } // .question-body li, .answer-body li { // margin-bottom: 7px; } -// .question-body IMG, .answer-body IMG { +// .question-body img, .answer-body img { // max-width: 600px; } // .post-update-info-container { // float: right; @@ -1273,7 +1274,7 @@ ul { // background: white url(../images/background-user-info.png) repeat-x bottom; // float: right; // font-size: 9px; -// font-family: Arial; +// font-family: arial; // width: 158px; // padding: 4px; // margin: 0px 0px 5px 5px; @@ -1316,7 +1317,7 @@ ul { // cursor: pointer; // border: none; // font-size: 12px; -// font-family: Arial; +// font-family: arial; // text-decoration: none; // height: 18px; // display: block; @@ -1352,11 +1353,11 @@ ul { // background: url(../images/close.png) no-repeat center left; } // .post-controls .permant-link, .answer-controls .permant-link { // background: url(../images/link.png) no-repeat center left; } -// .tabBar { +// .tabbar { // width: 100%; } -// #questionCount { +// #questioncount { // float: left; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // line-height: 15px; } // .question-img-upvote, .question-img-downvote, .answer-img-upvote, .answer-img-downvote { // width: 25px; @@ -1390,7 +1391,7 @@ ul { // color: #7ea9b3; // width: 200px; // float: left; -// font-family: 'Yanone Kaffeesatz',sans-serif; } +// font-family: 'yanone kaffeesatz',sans-serif; } // .comments { // font-size: 12px; // clear: both; @@ -1402,7 +1403,7 @@ ul { // .controls a { // color: #988e4c; // padding: 0 3px 2px 22px; -// font-family: Arial; +// font-family: arial; // font-size: 13px; // background: url(../images/comment.png) no-repeat center left; // &:hover { @@ -1426,7 +1427,7 @@ ul { // height: 42px; // width: 100%; // margin: 7px 0 5px 1px; -// font-family: Arial; +// font-family: arial; // outline: none; // overflow: auto; // font-size: 12px; @@ -1443,7 +1444,7 @@ ul { // background: url(../images/small-button-blue.png) repeat-x top; // border: 0; // color: #4a757f; -// font-family: Arial; +// font-family: arial; // font-size: 13px; // width: 100px; // font-weight: bold; @@ -1473,7 +1474,7 @@ ul { // float: right; // color: #b6a475 !important; // vertical-align: top; -// font-family: Arial; +// font-family: arial; // float: right; // text-align: right; } // .comment { @@ -1483,7 +1484,7 @@ ul { // margin-top: 8px; // padding-bottom: 4px; // overflow: auto; -// font-family: Arial; +// font-family: arial; // font-size: 11px; // min-height: 25px; // background: white url(../images/comment-background.png) bottom repeat-x; @@ -1506,7 +1507,7 @@ ul { // width: 14px; // height: 14px; // &:hover { -// border: #BC564B 2px solid; +// border: #bc564b 2px solid; // border-radius: 10px; // -ms-border-radius: 10px; // -moz-border-radius: 10px; @@ -1562,7 +1563,7 @@ ul { // margin-bottom: 0px; // margin-top: 0px; // line-height: 50%; } } -// #questionTools { +// #questiontools { // font-size: 22px; // margin-top: 11px; // text-align: left; } @@ -1582,10 +1583,10 @@ ul { // // text-align: center; // // padding-top: 2px; // // margin: 10px 10px 0px 3px; -// IMG { +// img { // cursor: pointer; } } // .vote-number { -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // padding: 0px 0 5px 0; // font-size: 25px; // font-weight: bold; @@ -1595,7 +1596,7 @@ ul { // // width: 120px; // label { // vertical-align: top; } } -// .tabBar-answer { +// .tabbar-answer { // margin-bottom: 15px; // padding-left: 7px; // width: 723px; @@ -1605,7 +1606,7 @@ ul { // } // .accepted-answer { // background-color: #f7fecc; -// border-bottom-color: #9BD59B; +// border-bottom-color: #9bd59b; // // .vote-buttons { // // width: 27px; // // margin-right: 10px; @@ -1614,19 +1615,19 @@ ul { // .answer .post-update-info a { // color: #444444; } // .answered { -// background: #CCC; +// background: #ccc; // color: #999; } // .answered-accepted { -// background: #DCDCDC; +// background: #dcdcdc; // color: #763333; // strong { -// color: #E1E818; } } +// color: #e1e818; } } // .answered-by-owner { -// background: #F1F1FF; +// background: #f1f1ff; // .comments { // .button { -// background-color: #E6ECFF; } -// background-color: #E6ECFF; } +// background-color: #e6ecff; } +// background-color: #e6ecff; } // // .vote-buttons { // // margin-right: 10px; } // } @@ -1642,7 +1643,7 @@ ul { // line-height: 1.2; // margin-top: 10px; // h2 { -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // color: #7ea9b3; // font-size: 24px; } // label { @@ -1689,7 +1690,7 @@ ul { font-size: 13px; color: #707070; line-height: 1.3; - font-family: Arial; + font-family: arial; color: #525252; margin-bottom: 12px; } @@ -1725,7 +1726,7 @@ ul { // color: #4a757f; // font-weight: bold; // font-size: 13px; -// font-family: Arial; +// font-family: arial; // height: 26px; // margin: 5px 0px; // width: 100px; @@ -1771,7 +1772,7 @@ ul { color: #4a757f; font-weight: bold; font-size: 13px; - font-family: Arial; + font-family: arial; height: 24px; margin-top: -2px; padding-left: 10px; @@ -1802,7 +1803,7 @@ ul { background: url(../images/openid.gif) no-repeat 0% 50%; padding: 5px 5px 5px 15px; cursor: pointer; - font-family: Trebuchet MS; + font-family: trebuchet ms; font-weight: 300; font-size: 150%; width: 500px; } @@ -1816,7 +1817,7 @@ ul { font-weight: bold; font-size: 120%; } -.tabBar-user { +.tabbar-user { width: 375px; } .user { @@ -1841,9 +1842,9 @@ ul { margin-right: 4px; display: inline; } } -.tabBar-tags { - width: 270px; - margin-bottom: 15px; } +// .tabbar-tags { +// width: 270px; +// margin-bottom: 15px; } a { &.medal { @@ -1853,25 +1854,25 @@ a { color: #333; text-decoration: none; background: url(../images/medala.gif) no-repeat; - border-left: 1px solid #EEE; - border-top: 1px solid #EEE; - border-bottom: 1px solid #CCC; - border-right: 1px solid #CCC; + border-left: 1px solid #eee; + border-top: 1px solid #eee; + border-bottom: 1px solid #ccc; + border-right: 1px solid #ccc; padding: 4px 12px 4px 6px; } &:hover.medal { color: #333; text-decoration: none; background: url(../images/medala_on.gif) no-repeat; - border-left: 1px solid #E7E296; - border-top: 1px solid #E7E296; - border-bottom: 1px solid #D1CA3D; - border-right: 1px solid #D1CA3D; } } + border-left: 1px solid #e7e296; + border-top: 1px solid #e7e296; + border-bottom: 1px solid #d1ca3d; + border-right: 1px solid #d1ca3d; } } #award-list .user { float: left; margin: 5px; } -.tabBar-profile { +.tabbar-profile { width: 100%; margin-bottom: 15px; float: left; } @@ -1888,7 +1889,7 @@ a { padding: 5px; } h2 { padding: 10px 0px 10px 0px; - font-family: 'Yanone Kaffeesatz',sans-serif; } } + font-family: 'yanone kaffeesatz',sans-serif; } } .user-details { font-size: 13px; @@ -1896,7 +1897,7 @@ a { font-size: 16px; } } .user-about { - background-color: #EEEEEE; + background-color: #eeeeee; height: 200px; line-height: 20px; overflow: auto; @@ -1915,7 +1916,7 @@ a { // margin-top: -2px; // font-size: 15px; // cursor: pointer; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // background: url(../images/small-button-blue.png) repeat-x top; // border-radius: 4px; // -ms-border-radius: 4px; @@ -1945,18 +1946,18 @@ a { // display: inline; // color: #fff; // font-weight: bold; -// color: #A05736; } +// color: #a05736; } // &.unfollow-green { // display: none; } } } } .count { - font-family: 'Yanone Kaffeesatz',sans-serif; + font-family: 'yanone kaffeesatz',sans-serif; font-size: 200%; font-weight: 700; color: #777777; } -.scoreNumber { - font-family: 'Yanone Kaffeesatz',sans-serif; +.scorenumber { + font-family: 'yanone kaffeesatz',sans-serif; font-size: 35px; font-weight: 800; color: #777; @@ -1964,7 +1965,7 @@ a { margin-top: 3px; } .vote-count { - font-family: Arial; + font-family: arial; font-size: 160%; font-weight: 700; color: #777; } @@ -1975,10 +1976,10 @@ a { padding: 3px; } .answer-votes { - background-color: #EEEEEE; + background-color: #eeeeee; color: #555555; float: left; - font-family: Arial; + font-family: arial; font-size: 15px; font-weight: bold; height: 17px; @@ -2060,11 +2061,11 @@ a { line-height: 1.3; color: #525252; } h3 { - font-family: 'Yanone Kaffeesatz',sans-serif; + font-family: 'yanone kaffeesatz',sans-serif; font-size: 21px; padding-left: 0px; } .header { - background-color: #F5F5F5; + background-color: #f5f5f5; padding: 5px; cursor: pointer; } .author { @@ -2100,22 +2101,22 @@ a { font-weight: bold; font-family: sans-serif; } } -del { - color: #C34719; - .post-tag { - color: #C34719; } } +// del { +// color: #c34719; +// .post-tag { +// color: #c34719; } } ins { .post-tag, p { - background-color: #E6F0A2; } - background-color: #E6F0A2; } + background-color: #e6f0a2; } + background-color: #e6f0a2; } .vote-notification { z-index: 1; cursor: pointer; display: none; position: absolute; - font-family: Arial; + font-family: arial; font-size: 14px; font-weight: normal; color: white; @@ -2156,12 +2157,12 @@ ins { // padding: 6px 0 0 0; // background: #16160f; // font-size: 16px; -// font-family: 'Yanone Kaffeesatz',sans-serif; +// font-family: 'yanone kaffeesatz',sans-serif; // p { // margin-bottom: 0; } } .footer-links { - color: #EEE; + color: #eee; text-align: left; width: 500px; float: left; @@ -2202,7 +2203,7 @@ p.form-item { margin: 0px; } .deleted { - background: #F4E7E7 none repeat scroll 0 0; } + background: #f4e7e7 none repeat scroll 0 0; } .form-row { line-height: 25px; } @@ -2274,8 +2275,8 @@ label.retag-error { font-weight: bold; text-decoration: none; } -.narrow .tags { - float: left; } +// .narrow .tags { +// float: left; } .user-action-1 { font-weight: bold; @@ -2283,7 +2284,7 @@ label.retag-error { .user-action-2 { font-weight: bold; - color: #CCC; } + color: #ccc; } .user-action-3, .user-action-4 { color: #333; } @@ -2297,16 +2298,16 @@ label.retag-error { .user-action-8 { padding: 3px; font-weight: bold; - background-color: #CCC; + background-color: #ccc; color: #763333; } .revision-summary { - background-color: #FFFE9B; + background-color: #fffe9b; padding: 2px; } .question-title-link a { font-weight: bold; - color: #0077CC; } + color: #0077cc; } .answer-title-link a { color: #333; } @@ -2327,13 +2328,13 @@ label.retag-error { background-color: #0ff; } .gold, .badge1 { - color: #FFCC00; } + color: #ffcc00; } .silver, .badge2 { - color: #CCCCCC; } + color: #cccccc; } .bronze, .badge3 { - color: #CC9933; } + color: #cc9933; } .score { font-weight: 800; @@ -2341,7 +2342,7 @@ label.retag-error { a { &.comment { - background: #EEE; + background: #eee; color: #993300; padding: 5px; } &.offensive { @@ -2366,7 +2367,7 @@ button::-moz-focus-inner { // .submit { // cursor: pointer; -// background-color: #D4D0C8; +// background-color: #d4d0c8; // height: 30px; // border: 1px solid #777777; // font-weight: bold; @@ -2399,9 +2400,9 @@ button::-moz-focus-inner { text-align: center; font-family: sans-serif; font-size: 120%; - font-weight: Bold; - color: #FFFFFF; - background-color: #AE0000; } + font-weight: bold; + color: #ffffff; + background-color: #ae0000; } .big { font-size: 14px; } @@ -2421,7 +2422,7 @@ button::-moz-focus-inner { border-top: 1px dashed #aaaaaa; } .highlight { - background-color: #FFF8C6; } + background-color: #fff8c6; } .nomargin { margin: 0; } @@ -2518,33 +2519,33 @@ ul.form-horizontal-rows { font-weight: bold; vertical-align: top; } -ul { - &.post-tags { - margin-left: 3px; - li { - margin-top: 4px; - margin-bottom: 3px; } } - &.post-retag { - margin-bottom: 0px; - margin-left: 5px; } } +// ul { +// &.post-tags { +// margin-left: 3px; +// li { +// margin-top: 4px; +// margin-bottom: 3px; } } +// &.post-retag { +// margin-bottom: 0px; +// margin-left: 5px; } } -#question-controls .tags { - margin: 0 0 3px 0; } +// #question-controls .tags { +// margin: 0 0 3px 0; } -#tagSelector { - padding-bottom: 2px; - margin-bottom: 0; } +// #tagselector { +// padding-bottom: 2px; +// margin-bottom: 0; } -#related-tags { - padding-left: 3px; } +// #related-tags { +// padding-left: 3px; } -#hideIgnoredTagsControl { +#hideignoredtagscontrol { margin: 5px 0 0 0; label { font-size: 12px; color: #666; } } -#hideIgnoredTagsCb { +#hideignoredtagscb { margin: 0 2px 0 1px; } #recaptcha_widget_div { @@ -2623,7 +2624,7 @@ p.signup_p { .user-profile-page { .avatar p { margin-bottom: 0px; } - .tabBar a#stats { + .tabbar a#stats { margin-left: 0; } img.gravatar { margin: 2px 0 3px 0; } @@ -2631,7 +2632,7 @@ p.signup_p { padding: 0; margin-top: -3px; } } -.userList { +.userlist { font-size: 13px; } img.flag { @@ -2666,8 +2667,8 @@ a.edit { .pln { color: #000; } -.tag { - color: #008; } +// .tag { +// color: #008; } .atn { color: #606; } diff --git a/sass/discussion/_discussion.scss b/sass/discussion/_discussion.scss new file mode 100644 index 0000000000..effb9a22ec --- /dev/null +++ b/sass/discussion/_discussion.scss @@ -0,0 +1,72 @@ +// Base extends (Merge with main stylesheet later) +.light-button { + @include box-shadow(inset 0 1px 0 #fff); + @include linear-gradient(#fff, lighten(#888, 40%)); + @include border-radius(3px); + border: 1px solid #ccc; + padding: 4px 8px; + color: #666; + font: normal $body-font-size $body-font-family; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; + + &:hover, &:focus { + @include linear-gradient(#fff, lighten(#888, 30%)); + border: 1px solid #ccc; + text-decoration: none; + } + +} +.action-link { + a { + color: darken(#F6EFD4, 50%); + + &:hover { + text-decoration: none; + color: darken(#F6EFD4, 70%); + } + } +} + +// Layout +body.askbot { + + section.main-content { + div.discussion-wrapper { + @extend .table-wrapper; + + div.discussion-content { + @include box-sizing(border-box); + display: table-cell; + padding: lh(); + vertical-align: top; + width: flex-grid(9) + flex-gutter(); + + p.tabula-rasa { + @include border-radius(5px); + background-color: #f6f6f6; + color: #888; + margin: 10px auto; + padding: 20px; + text-align: center; + width: flex-grid(5); + + &:first-child { + margin-top: 70px; + } + &:last-child { + margin-bottom: 70px; + } + + a { + text-decoration: none; + color: #888; + font-weight: bold; + } + } + } + } + } + +} diff --git a/sass/_form-wmd-toolbar.scss b/sass/discussion/_form-wmd-toolbar.scss similarity index 96% rename from sass/_form-wmd-toolbar.scss rename to sass/discussion/_form-wmd-toolbar.scss index 050f4bf354..be5bdaa24a 100644 --- a/sass/_form-wmd-toolbar.scss +++ b/sass/discussion/_form-wmd-toolbar.scss @@ -3,7 +3,7 @@ } #wmd-button-bar { - background: url(static/images/askbot/editor-toolbar-background.png) repeat-x bottom; + background: url(/static/images/askbot/editor-toolbar-background.png) repeat-x bottom; border: 1px solid #ddd; height:36px; float:left; diff --git a/sass/_discussion-forms.scss b/sass/discussion/_forms.scss similarity index 97% rename from sass/_discussion-forms.scss rename to sass/discussion/_forms.scss index 4b6098adf9..e8fcd22193 100644 --- a/sass/_discussion-forms.scss +++ b/sass/discussion/_forms.scss @@ -73,6 +73,10 @@ form.question-form { padding: 0; margin-top: -15px; + h1 a { + float: right; + } + input[type="text"] { width: flex-grid(6); } diff --git a/sass/_question-view.scss b/sass/discussion/_question-view.scss similarity index 90% rename from sass/_question-view.scss rename to sass/discussion/_question-view.scss index 1fae85f023..bdc2b3f980 100644 --- a/sass/_question-view.scss +++ b/sass/discussion/_question-view.scss @@ -93,6 +93,7 @@ div.question-header { float: left; margin-right: flex-gutter(8); width: flex-grid(6.2,8); + } div.post-update-container { @@ -102,8 +103,9 @@ div.question-header { div.post-update-info { @include box-sizing(border-box); - @include border-radius(5px); - background:lighten(#F6EFD4, 5%); + // @include border-radius(5px); + // background:lighten(#F6EFD4, 5%); + border-left: 3px solid darken(#F6EFD4, 10%); padding: 10px; margin-bottom: 10px; @@ -126,29 +128,33 @@ div.question-header { div.change-date { font-size: 12px; - margin-bottom: 10px; + margin-bottom: 2px; } - div.avatar { - display: inline-block; - float: left; - margin-right: 3px; + // div.avatar { + // display: inline-block; + // float: left; + // margin-right: 3px; - img.gravatar { - background: white; - border: 1px solid darken(#F6EFD4, 10%); - margin-right: 5px; - padding: 3px ; - vertical-align: bottom; - } - } + // img.gravatar { + // background: white; + // border: 1px solid darken(#F6EFD4, 10%); + // margin-right: 5px; + // padding: 3px ; + // vertical-align: bottom; + // } + // } div.user-meta { display: inline-block; - width: 60%; + + span.username { + font-size: 20px; + margin-right: 5px; + } span.user-badges { - display: block; + // display: block; } } } diff --git a/sass/_discussion-questions.scss b/sass/discussion/_questions.scss similarity index 66% rename from sass/_discussion-questions.scss rename to sass/discussion/_questions.scss index a776c316d4..526d03a98d 100644 --- a/sass/_discussion-questions.scss +++ b/sass/discussion/_questions.scss @@ -1,58 +1,82 @@ -div.question-controls { +div.question-list-header { display: block; - margin-bottom: 30px; + margin-bottom: 15px; overflow: hidden; width: flex-grid(9,9); - div { - display: inline-block; - } + section.question-list-meta { + display: block; + overflow: hidden; + width: 100%; - div.question-count { - margin-right: flex-gutter(); - width: flex-grid(4,9); - - h1 { - margin-top: 0; + div { + display: inline-block; + float: left; } - } - div.question-sort { - vertical-align: bottom; - width: flex-grid(5,9); + span.label { + color: #555; + } - nav { - @include border-radius(35px); - background-color: lighten(#F6EFD4, 5%) ; - height: 30px; + div.question-list-title { + margin-right: flex-gutter(); + + h1 { + margin-top: 0; + } + } + + + div.question-sort { float: right; - font-size: 16px; - margin: 3px 0; - padding:0px 20px 5px; + margin-left: flex-gutter(); - a { - color: darken(#F6EFD4, 50%); + nav { + @extend .action-link; + float: right; - &.on span{ - font-weight: bold; - } + a { + &.on span{ + font-weight: bold; + } - &:before { - content: '|'; - color: darken(#F6EFD4, 10%); - font-size: 22px; - } - - &:hover { - text-decoration: none; - color: darken(#F6EFD4, 70%); + &:before { + content: '|'; + color: darken(#F6EFD4, 10%); + font-size: 22px; + } } } } } + + section.question-tags-list { + display: block; + min-height: 26px; + overflow: hidden; + padding-top:5px; + width: 100%; + + div { + display: inline-block; + float: left; + } + + div.back { + margin-right: 10px; + + a { + color: #555; + } + } + + div.tags-list { + + } + } } -ul.question-list { +ul.question-list, div#question-list { width: flex-grid(9,9); li.single-question { @@ -75,7 +99,7 @@ ul.question-list { h2 { font-size: 16px; - font-weight: normal; + font-weight: bold; margin: 0px 0 15px 0; text-transform: none; } @@ -151,9 +175,5 @@ ul.question-list { } } -div.search-tips { - display: block; -} - .search-result-summary { } diff --git a/sass/discussion/_sidebar.scss b/sass/discussion/_sidebar.scss new file mode 100644 index 0000000000..341fe7ee91 --- /dev/null +++ b/sass/discussion/_sidebar.scss @@ -0,0 +1,164 @@ + +div.discussion-wrapper aside { + @extend .sidebar; + @include box-shadow(inset 1px 0 0 #f6f6f6); + @include border-radius(0 4px 4px 0); + border-left: 1px solid #d3d3d3; + border-right: 1px solid #f6f6f6; + padding: lh(); + width: flex-grid(3); + + + h2 { + color: #4D4D4D; + + &.first { + margin-top: 0px; + } + } + + h3 { + border-bottom: 0; + box-shadow: none; + } + + input[type="text"] { + width: 76%; + } + + div.box { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + display: block; + padding-bottom: 20px; + overflow: hidden; + + &:last-child { + @include box-shadow(none); + border: 0; + } + + &.contributors { + + a { + @include border-radius(3px); + border: 1px solid #aaa; + cursor: pointer; + display: inline-block; + margin-right: 6px; + position: relative; + + &:before { + @include border-radius(3px); + @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4)); + top: 1px; left: 1px; bottom: 1px; right: 1px; + content: ''; + position: absolute; + } + + } + img.gravatar { + @include border-radius(3px); + } + } + + &.tag-selector { + ul { + margin-bottom: 10px; + display: block; + } + } + } + + #displayTagFilterControl { + margin-top: 10px; + } + + div.search-box { + input { + @include box-sizing(border-box); + display: inline; + } + + input[type='submit'] { + @include box-shadow(none); + opacity: 0.5; + background: url(/static/images/askbot/search-icon.png) no-repeat center; + border: 0; + margin-left: 3px; + position: absolute; + text-indent: -9999px; + width: 24px; + + &:hover { + opacity: 0.9; + } + + &:focus { + opacity: 1; + } + } + + input#keywords { + padding-left: 30px; + padding-right: 30px; + width: 100%; + } + + input#clear { + @include box-shadow(none); + @include border-radius(15px); + border: none; + background: #bbb; + color: #fff; + display: inline; + font-size: 10px; + margin-left: -25px; + padding: 2px 5px; + } + } + + // Question view sopecific + + div.follow-buttons { + margin-top: 20px; + display: block; + + a.button { + @include box-sizing(border-box); + display: block; + text-align: center; + width: 100%; + } + } + + + div.question-stats { + ul { + color: #777; + + li { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + padding: 7px 0; + + &:last-child { + @include box-shadow(none); + border: 0; + } + strong { + float: right; + padding-right: 10px; + } + } + } + } + + div.markdown ul li { + margin: 20px 0; + + ol li { + margin: 0; + } + } +} diff --git a/sass/discussion/_tags.scss b/sass/discussion/_tags.scss new file mode 100644 index 0000000000..a1b11625c0 --- /dev/null +++ b/sass/discussion/_tags.scss @@ -0,0 +1,63 @@ +ul.tags { + list-style: none; + display: inline; + li, a { + position: relative; + } + li { + @include border-radius(4px); + background: #eee; + color: #555; + display: inline-block; + font-size: 12px; + margin-left: 15px; + padding: 3px 10px 5px 5px; + margin-bottom: 5px; + + &:before { + border-color:transparent #eee transparent transparent; + border-style:solid; + border-width:12px 12px 12px 0; + content:""; + height:0; + left:-11px; + position:absolute; + top:0; + width:0; + } + + span.delete-icon, div.delete-icon { + @include border-radius(0 4px 4px 0); + background: #555; + clear: none; + color: #eee; + cursor: pointer; + display: inline; + float: none; + left: 10px; + opacity: 0.5; + padding: 3px 6px; + position: relative; + top: 1px; + + &:hover { + opacity: 1; + } + } + + a { + color: #555; + text-decoration: none; + } + } +} + +span.tag-number { + @include border-radius(3px); + background: #555; + font-size: 10px; + margin: 0 3px; + padding: 2px 5px; + color: #eee; + opacity: 0.5; +} diff --git a/sass/index/_base.scss b/sass/index/_base.scss new file mode 100644 index 0000000000..c2a5b9dcc2 --- /dev/null +++ b/sass/index/_base.scss @@ -0,0 +1,44 @@ +body { + background-color: #fff; + color: #444; + font: $body-font-size $body-font-family; + + :focus { + outline-color: #ccc; + } + + h1 { + font: 800 24px $header-font-family; + } + + li { + margin-bottom: lh(); + } + + em { + font-style: italic; + } + + a { + color: $mit-red; + font-style: italic; + text-decoration: none; + + &:hover, &:focus { + color: darken($mit-red, 10%); + } + } + + #{$all-text-inputs}, textarea { + @include box-shadow(0 -1px 0 #fff); + @include linear-gradient(#eee, #fff); + border: 1px solid #999; + font: $body-font-size $body-font-family; + padding: 4px; + width: 100%; + + &:focus { + border-color: $mit-red; + } + } +} diff --git a/sass/_index-extends.scss b/sass/index/_extends.scss similarity index 88% rename from sass/_index-extends.scss rename to sass/index/_extends.scss index 2d3f911633..eaeb34a9e8 100644 --- a/sass/_index-extends.scss +++ b/sass/index/_extends.scss @@ -2,7 +2,7 @@ @include box-sizing(border-box); margin: 0 auto; max-width: $fg-max-width; - min-width: $fg-min-width; + // min-width: $fg-min-width; padding: lh(); width: flex-grid(12); } @@ -20,6 +20,7 @@ p { margin-bottom: lh(); + line-height: lh(); } h1 { @@ -37,6 +38,15 @@ li { list-style: disc outside none; + line-height: lh(); + } + } + + dl { + margin-bottom: lh(); + + dd { + margin-bottom: lh(.5); } } } diff --git a/sass/index/_footer.scss b/sass/index/_footer.scss new file mode 100644 index 0000000000..5a6736ba42 --- /dev/null +++ b/sass/index/_footer.scss @@ -0,0 +1,57 @@ +footer { + @extend .wrapper; + @extend .clearfix; + padding-top: 0; + + div.footer-wrapper { + border-top: 1px solid #e5e5e5; + padding: lh() 0; + background: url('/static/images/marketing/mit-logo.png') right center no-repeat; + + @media screen and (max-width: 780px) { + background-position: left bottom; + padding-bottom: lh(3); + } + + a { + color: #888; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: #666; + } + } + + p { + @include inline-block(); + margin-right: lh(); + } + + ul { + @include inline-block(); + + @media screen and (max-width: 780px) { + margin-top: lh(); + } + + li { + @include inline-block(); + margin-bottom: 0; + + &:after { + content: ' |'; + display: inline; + color: #ccc; + } + + &:last-child { + &:after { + content: none; + } + } + + } + } + } +} diff --git a/sass/index/_header.scss b/sass/index/_header.scss new file mode 100644 index 0000000000..4cfe1578b5 --- /dev/null +++ b/sass/index/_header.scss @@ -0,0 +1,169 @@ +header.announcement { + @include background-size(cover); + background: #333; + border-bottom: 1px solid #000; + color: #fff; + -webkit-font-smoothing: antialiased; + + &.home { + background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg"); + } + + div { + padding: lh(10) lh() lh(3); + + @media screen and (max-width:780px) { + padding: lh(2.5) lh() lh(2); + } + + //hide login link for homepage + nav { + h1 { + margin-right: 0; + } + + a.login { + display: none; + } + } + } + } + + &.course { + background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg"); + + @media screen and (min-width: 1200px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); + } + + @media screen and (max-width: 1199px) and (min-width: 700px) { + background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg"); + } + + div { + padding: lh(4) lh() lh(2); + + @media screen and (max-width:780px) { + padding: lh(2.5) lh() lh(2); + } + } + + } + + div { + @extend .wrapper; + position: relative; + + nav { + position: absolute; + top: 0; + right: lh(); + @include border-radius(0 0 3px 3px); + background: #333; + background: rgba(#000, .7); + padding: lh(.5) lh(); + + h1 { + @include inline-block(); + margin-right: lh(.5); + + + a { + font: italic 800 18px $header-font-family; + color: #fff; + text-decoration: none; + + &:hover, &:focus { + color: #999; + } + } + } + + a.login { + text-decoration: none; + color: #fff; + font-size: 12px; + font-style: normal; + font-family: $header-font-family; + + &:hover, &:focus { + color: #999; + } + } + } + + section { + @extend .clearfix; + background: $mit-red; + @include inline-block(); + margin-left: flex-grid(4) + flex-gutter(); + padding: lh() lh(1.5); + + @media screen and (max-width: 780px) { + margin-left: 0; + } + + h1 { + font-family: "Open Sans"; + font-size: 30px; + font-weight: 800; + @include inline-block(); + line-height: 1.2em; + margin: 0 lh() 0 0; + } + + h2 { + font-family: "Open Sans"; + font-size: 24px; + font-weight: 400; + @include inline-block(); + line-height: 1.2em; + } + + &.course { + section { + float: left; + margin-left: 0; + margin-right: flex-gutter(8); + padding: 0; + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + float: none; + width: 100%; + margin-right: 0; + } + + a { + @extend .button; + background-color: darken($mit-red, 20%); + border-color: darken($mit-red, 30%); + @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%)); + display: block; + padding: lh(.5) lh(); + text-align: center; + + &:hover { + background-color: darken($mit-red, 10%); + border-color: darken($mit-red, 20%); + } + } + } + + p { + width: flex-grid(4, 8); + line-height: lh(); + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: 100%; + } + } + } + } + } +} diff --git a/sass/index/_index.scss b/sass/index/_index.scss new file mode 100644 index 0000000000..3fbae44b67 --- /dev/null +++ b/sass/index/_index.scss @@ -0,0 +1,323 @@ +section.index-content { + @extend .wrapper; + @extend .clearfix; + + section { + @extend .clearfix; + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: auto; + margin-right: 0; + } + + h1 { + font-size: 800 24px "Open Sans"; + margin-bottom: lh(); + } + + p { + line-height: lh(); + margin-bottom: lh(); + } + + ul { + margin: 0; + } + + &.about { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + @media screen and (max-width: 780px) { + width: 100%; + border-right: 0; + margin-right: 0; + padding-right: 0; + } + + section { + @extend .clearfix; + margin-bottom: lh(); + + p { + width: flex-grid(4, 8); + float: left; + + @media screen and (max-width: 780px) { + float: none; + width: auto; + } + + &:nth-child(odd) { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + } + + &.intro { + section { + margin-bottom: 0; + + &.intro-text { + margin-right: flex-gutter(8); + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + margin-right: 0; + width: auto; + } + + p { + margin-right: 0; + width: auto; + float: none; + } + } + + &.intro-video { + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + width: auto; + } + + a { + display: block; + width: 100%; + + img { + width: 100%; + } + + span { + display: none; + } + } + } + } + } + + &.features { + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + h2 { + text-transform: uppercase; + letter-spacing: 1px; + color: #888; + margin-bottom: lh(); + font-weight: normal; + font-size: 14px; + + span { + text-transform: none; + + } + } + + p { + width: auto; + clear: both; + + strong { + font-family: "Open sans"; + font-weight: 800; + } + + a { + color: $mit-red; + text-decoration: none; + @include transition(); + + &:hover, &:focus { + color: darken($mit-red, 15%); + } + } + } + + ul { + margin-bottom: 0; + + li { + line-height: lh(); + width: flex-grid(4, 8); + float: left; + margin-bottom: lh(.5); + + @media screen and (max-width: 780px) { + width: auto; + float: none; + } + + &:nth-child(odd) { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + } + } + } + } + } + + &.course, &.staff { + width: flex-grid(4); + + @media screen and (max-width: 780px) { + width: auto; + } + + h1 { + color: #888; + font: normal $body-font-size $body-font-family; + font-size: 14px; + letter-spacing: 1px; + margin-bottom: lh(); + text-transform: uppercase; + } + + h2 { + font: 800 24px $header-font-family; + } + + h3 { + font: 400 18px $header-font-family; + } + + a { + @extend .button; + + span.arrow { + color: rgba(#fff, .6); + font-style: normal; + @include inline-block(); + padding-left: 10px; + } + } + + ul { + list-style: none; + + li { + img { + float: left; + margin-right: lh(.5); + } + } + } + } + + &.course { + h2 { + padding-top: lh(5); + background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; + @include background-size(contain); + + @media screen and (max-width: 998px) and (min-width: 781px){ + background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat; + } + + @media screen and (max-width: 780px) { + padding-top: lh(5); + background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat; + } + + @media screen and (min-width: 500px) and (max-width: 781px) { + padding-top: lh(8); + } + } + } + + + // index + //---------------------------------------- // + &.about-course { + @include box-sizing(border-box); + border-right: 1px solid #e5e5e5; + margin-right: flex-gutter(); + padding-right: flex-gutter() / 2; + width: flex-grid(8); + + @media screen and (max-width: 780px) { + width: auto; + border-right: 0; + margin-right: 0; + padding-right: 0; + } + + section { + width: flex-grid(4, 8); + + @media screen and (max-width: 780px) { + width: auto; + } + + &.about-info { + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + } + } + + &.requirements { + clear: both; + width: 100%; + border-top: 1px solid #E5E5E5; + padding-top: lh(); + margin-bottom: 0; + + p { + float: left; + width: flex-grid(4, 8); + margin-right: flex-gutter(8); + + @media screen and (max-width: 780px) { + margin-right: 0; + float: none; + width: auto; + } + + &:nth-child(odd) { + margin-right: 0; + } + } + } + + &.cta { + width: 100%; + text-align: center; + + a.enroll { + @extend .button; + padding: lh(.5) lh(2); + @include inline-block(); + text-align: center; + font: 800 18px $header-font-family; + } + } + } + } + + &.staff { + h1 { + margin-top: lh(1); + } + } + } +} + +section.copyright, section.tos, section.privacy-policy, section.honor-code { + @extend .subpage; +} diff --git a/sass/_index-variables.scss b/sass/index/_variables.scss similarity index 61% rename from sass/_index-variables.scss rename to sass/index/_variables.scss index 47eb6b9179..6d9730b9db 100644 --- a/sass/_index-variables.scss +++ b/sass/index/_variables.scss @@ -5,7 +5,7 @@ $fg-column: 60px; $fg-gutter: 25px; $fg-max-columns: 12; $fg-max-width: 1400px; -$fg-min-width: 810px; +$fg-min-width: 781px; $gw-column: 60px; $gw-gutter: 25px; @@ -13,16 +13,8 @@ $gw-gutter: 25px; $body-font-family: Georgia, serif; $header-font-family: "Open Sans", Helvetica, Arial, sans-serif; -// @media screen and (min-width: 940px) { - $body-font-size: 16px; -// } - - -// @media screen and (max-width: 939px) { -// $body-font-size: 14px; -// } - -$lh: golden-ratio($body-font-size, 1); +$body-font-size: 16px; +$body-line-height: golden-ratio($body-font-size, 1); // Colors $mit-red: #933; diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss new file mode 100644 index 0000000000..97c28d5fd8 --- /dev/null +++ b/sass/layout/_footer.scss @@ -0,0 +1,45 @@ +footer { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + color: #777; + margin-top: $body-line-height; + padding: 0 $body-line-height; + + p { + float: left; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + + ul { + float: right; + + li { + display: inline-block; + margin-right: 20px; + + a { + color: #444; + + &:link, &:visited { + color: #444; + } + + &:hover, &:focus { + color: #000; + } + } + } + } +} diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss new file mode 100644 index 0000000000..beaf1b2e45 --- /dev/null +++ b/sass/layout/_header.scss @@ -0,0 +1,178 @@ +div.header-wrapper { + background: $mit-red; + border-bottom: 1px solid #fff; + @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%)); + + header { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + padding: 0 $body-line-height; + + hgroup { + @extend .clearfix; + float: left; + min-width: flex-grid(3); + padding-top: 13px; + + h1 { + color: darken($mit-red, 25%); + font-size: 18px; + font-weight: 800; + @include inline-block(); + line-height: lh(); + margin: 0; + padding: 0 lh(.5) 0 0; + text-shadow: 0 1px 0 lighten($mit-red, 10%); + + &:after { + color: darken($mit-red, 10%); + content: "•"; + display: inline-block; + font-size: 10px; + letter-spacing: -2px; + padding-left: lh(.5); + text-shadow: 0; + } + } + + h2 { + font-size: 16px; + @include inline-block(); + letter-spacing: 0; + margin: 0; + padding: 0 lh() 0px 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); + text-transform: none; + -webkit-font-smoothing: antialiased; + + a { + color: #fff; + text-decoration: none; + + &:hover { + color: rgba(#fff, .7); + } + } + } + + + @media screen and (max-width: 900px) { + display: block; + float: none; + + h1 { + border: 0; + float: left; + } + + h2 { + border: 0; + float: left; + margin-right: 0; + } + } + } + + nav { + background: #501016; + border-bottom: 1px solid darken(#501016, 10%); + @include border-radius(3px 3px 0 0); + @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%)); + display: block; + float: left; + margin: 5px 0 0; + padding: 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); + -webkit-font-smoothing: antialiased; + + ul { + @extend .clearfix; + margin: 0; + + li { + line-height: lh(); + margin-bottom: 0; + float: left; + + a { + color: #fff; + display: block; + font-weight: bold; + padding: 10px lh() 8px; + text-decoration: none; + + @media screen and (max-width: 1020px) { + padding: 10px lh(.7) 8px; + } + + &:hover { + color: rgba(#fff, .7); + background-color: none; + } + } + } + } + + @media screen and (max-width: 900px) { + width: 100%; + float: none; + + ul { + li { + padding: auto; + display: table-cell; + width: 16.6666666667%; + text-align: center; + } + } + } + + .active { + background: #F4F4F4; + border: 1px solid darken(#501016, 10%); + border-bottom: 0; + @include border-radius(3px 3px 0 0); + @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff); + color: #333; + text-shadow: 0 1px 0 #fff; + } + + &.courseware { + li.courseware a { + @extend .active; + } + } + + &.book { + li.book a { + @extend .active; + } + } + + &.info { + li.info a { + @extend .active; + } + } + + &.discussion { + li.discussion a { + @extend .active; + } + } + + &.wiki { + li.wiki a { + @extend .active; + } + } + + &.profile { + li.profile a { + @extend .active; + } + } + } + } +} diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss new file mode 100644 index 0000000000..584e1e1fa2 --- /dev/null +++ b/sass/layout/_layout.scss @@ -0,0 +1,28 @@ +html { + margin-top: 0; + + body { + color: $dark-gray; + font: $body-font-size $body-font-family; + text-align: center; + margin: 0; + background: #f4f4f4; //#f3f1e5 + + section.main-content { + @extend .clearfix; + @extend .wrapper; + @include box-sizing(border-box); + overflow: hidden; + background: #fff; + border-bottom: 1px solid #bbb; + margin-top: 3px; + @include box-shadow(0 0 4px #dfdfdf); + border: 1px solid #bbb; + + @media screen and (min-width: 1400px) { + @include border-radius(4px); + margin-top: lh(.5); + } + } + } +} diff --git a/sass/_leanmodal.scss b/sass/layout/_leanmodal.scss similarity index 98% rename from sass/_leanmodal.scss rename to sass/layout/_leanmodal.scss index 9e754377e2..fb3e2d5a8f 100644 --- a/sass/_leanmodal.scss +++ b/sass/layout/_leanmodal.scss @@ -221,7 +221,6 @@ div#feedback_div{ div#calculator_div { max-width: 500px; - form { padding-bottom: lh(); margin-bottom: lh(); @@ -246,11 +245,12 @@ div#calculator_div { input#calculator_output { border: 0; - background: 0; + background: none; padding: lh(.35); - width: 60px; font-size: 24px; + width: 378px; font-weight: bold; + margin-top: 4px; } } diff --git a/sass/marketing.scss b/sass/marketing.scss index 61dff2d197..7b93c36a3b 100644 --- a/sass/marketing.scss +++ b/sass/marketing.scss @@ -1,7 +1,6 @@ @import "bourbon/bourbon"; -@import "reset"; -@import "font-face"; +@import "base/reset", "base/font-face", "base/functions"; // pages -@import "index-functions", "index-variables", "index-extends", "index"; -@import "leanmodal"; +@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index"; +@import "layout/leanmodal"; diff --git a/sass/print.scss b/sass/print.scss new file mode 100644 index 0000000000..12436ba683 --- /dev/null +++ b/sass/print.scss @@ -0,0 +1,6 @@ +.header-wrapper {display:none;} +#accordion {display:none;} +.ui-accordion {display:none; +visibility:hidden; +width:0%; +} diff --git a/sass/_wiki-basic-html.scss b/sass/wiki/_basic-html.scss similarity index 100% rename from sass/_wiki-basic-html.scss rename to sass/wiki/_basic-html.scss diff --git a/sass/_wiki-create.scss b/sass/wiki/_create.scss similarity index 100% rename from sass/_wiki-create.scss rename to sass/wiki/_create.scss diff --git a/sass/wiki/_sidebar.scss b/sass/wiki/_sidebar.scss new file mode 100644 index 0000000000..513b3c2556 --- /dev/null +++ b/sass/wiki/_sidebar.scss @@ -0,0 +1,69 @@ +div#wiki_panel { + @extend .sidebar; + overflow: auto; + + input[type="button"] { + @extend h3; + @include transition(); + color: lighten($text-color, 10%); + font-size: $body-font-size; + margin: 0 !important; + padding: 7px lh(); + text-align: left; + width: 100%; + + &:hover { + @include box-shadow(0 1px 0 #fff); + background: #efefef; + } + } + + ul { + li { + &.search { + @include box-shadow(0 1px 0 #eee); + border-bottom: 1px solid #d3d3d3; + padding: 7px lh(); + + label { + display: none; + } + } + + &.create-article { + h3 { + a { + padding: 7px lh(); + } + } + } + } + } + + div#wiki_create_form { + @extend .clearfix; + padding: 15px; + background: #d6d6d6; + border-bottom: 1px solid #bbb; + + input[type="text"] { + margin-bottom: 6px; + display: block; + width: 100%; + @include box-sizing(border-box); + } + + ul { + list-style: none; + + li { + float: left; + + &#cancel { + float: right; + margin-top: 10px; + } + } + } + } +} diff --git a/sass/_wiki.scss b/sass/wiki/_wiki.scss similarity index 53% rename from sass/_wiki.scss rename to sass/wiki/_wiki.scss index 86b90c43d6..8078273514 100644 --- a/sass/_wiki.scss +++ b/sass/wiki/_wiki.scss @@ -2,76 +2,6 @@ div.wiki-wrapper { display: table; width: 100%; - div#wiki_panel { - @extend .sidebar; - overflow: auto; - - input[type="button"] { - @extend h3; - @include transition(); - color: lighten($text-color, 10%); - font-size: $body-font-size; - margin: 0 !important; - padding: 7px lh(); - text-align: left; - width: 100%; - - &:hover { - @include box-shadow(0 1px 0 #fff); - background: #efefef; - } - } - - ul { - li { - &.search { - @include box-shadow(0 1px 0 #eee); - border-bottom: 1px solid #d3d3d3; - padding: 7px lh(); - - label { - display: none; - } - } - - &.create-article { - h3 { - a { - padding: 7px lh(); - } - } - } - } - } - - div#wiki_create_form { - @extend .clearfix; - padding: 15px; - background: #d6d6d6; - border-bottom: 1px solid #bbb; - - input[type="text"] { - margin-bottom: 6px; - display: block; - width: 100%; - @include box-sizing(border-box); - } - - ul { - list-style: none; - - li { - float: left; - - &#cancel { - float: right; - margin-top: 10px; - } - } - } - } - } - section.wiki-body { @extend .content; diff --git a/simplewiki_base.html b/simplewiki_base.html index 17f110bf1a..0f4e70cb2c 100644 --- a/simplewiki_base.html +++ b/simplewiki_base.html @@ -65,35 +65,29 @@ }); - - -<%block name="bodyextra"> + <%block name="wiki_head"/> + +<%block name="bodyextra"> <%include file="navigation.html" args="active_page='wiki'" />
    - <%block name="wiki_panel"> - + <%block name="wiki_panel">
    - <% - if (wiki_article is not UNDEFINED): - baseURL = reverse("wiki_view", args=[wiki_article.get_url()]) - else: - baseURL = reverse("wiki_view", args=["/"]) - %> - + <% + if (wiki_article is not UNDEFINED): + baseURL = reverse("wiki_view", args=[wiki_article.get_url()]) + else: + baseURL = reverse("wiki_view", args=["/"]) + %>
      - - -
      • -

    • Create Article diff --git a/simplewiki_edit.html b/simplewiki_edit.html index 7d7a9c6bb8..e0bffd5f31 100644 --- a/simplewiki_edit.html +++ b/simplewiki_edit.html @@ -8,6 +8,22 @@ ${ wiki_article.title } +<%block name="wiki_head"> + + + + <%block name="wiki_body">
      diff --git a/staff_problem_info.html b/staff_problem_info.html new file mode 100644 index 0000000000..e617584a17 --- /dev/null +++ b/staff_problem_info.html @@ -0,0 +1,3 @@ +
      +${xml | h} +
      diff --git a/staticbook.html b/staticbook.html index a9afbede22..6e080f5165 100644 --- a/staticbook.html +++ b/staticbook.html @@ -16,19 +16,19 @@ function goto_page(n) { if(n<10) { prefix="00"; } - $("#bookpage").attr("src","${ settings.BOOK_URL }p"+prefix+n+".jpg"); + $("#bookpage").attr("src","${ settings.BOOK_URL }p"+prefix+n+".png"); }; function prev_page() { var newpage=page-1; - if(newpage<1) newpage=1; + if(newpage<0) newpage=0; goto_page(newpage); log_event("book", {"type":"prevpage","new":page}); } function next_page() { var newpage=page+1; - if(newpage>1764) newpage=1764; + if(newpage>1008) newpage=1008; goto_page(newpage); log_event("book", {"type":"nextpage","new":page}); } @@ -56,7 +56,7 @@ function next_page() {

    - +
    diff --git a/tos.html b/tos.html index 42bab7a235..c76dd13143 100644 --- a/tos.html +++ b/tos.html @@ -78,9 +78,7 @@ intent of misleading others.
  • You, furthermore, agree not to scrape, or otherwise download in bulk, user-contributed content, a list or directory of users on the system, or other material including but not limited to on-line -textbooks, User Postings, or user information. You agree not to store -more than 5 pages of the electronic textbook or 5 forum posts in any -permanent medium (hard drive, optical disk, etc., flash drive, etc.). +textbooks, User Postings, or user information. You agree to not misrepresent or attempt to misrepresent your identity while using the Sites (although you are welcome and encouraged to use an anonymous username in the forums). @@ -302,6 +300,6 @@ consent to the personal jurisdiction of and exclusive venue in the federal and state courts located in and serving Boston, Massachusetts as the legal forum for any such dispute.

    -

    Effective Date: February 10, 2012

    +

    Effective Date: February 20, 2012

    diff --git a/video_init.js b/video_init.js index 42dddad573..0ec2fe2e2c 100644 --- a/video_init.js +++ b/video_init.js @@ -58,15 +58,23 @@ for(var i=0; i