Commit b923b59f by Bridger Maxwell

Merge

--HG--
branch : bridger-dev
parents 67047cd1 3ce85573
No preview for this file type
...@@ -5,3 +5,5 @@ syntax: glob ...@@ -5,3 +5,5 @@ syntax: glob
*.swp *.swp
*.orig *.orig
*.DS_Store *.DS_Store
#*
.#*
\ No newline at end of file
<%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage">
<div>
<h1>
More about 6.002x
</h1>
<h2> Answering common questions about the first course on <i>MITx</i>, the
Institute&rsquo;s online-learning initiative.</h2>
<p>
This set of questions and answers accompanies MIT&rsquo;s February 13,
2012, announcement regarding <i>MITx</i>&rsquo;s prototype course &mdash;
6.002x: Circuits and Electronics.
</p>
<h2> I tried to register for the course, but it says the username
is already taken.</h2>
<p> 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.</p>
<h2> I am interested in a different subject. What other courses do
you offer? </h2>
<p> 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.</p>
<h2>How will I know that the course has started?</h2>
<p> 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.</p>
<h2> Why is there no log-in button?</h2>
<p> You will not be able to log into the course until either the
starting date, or shortly before.</p>
<h2> Does the class have a schedule?</h2>
<p> 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. </p>
<h2> I just enrolled for the course. I have not received any form
of acknowledgement that I have enrolled.</h2>
<p> You should receive a single activation e-mail. If you did not, the
most common issues are:
<ul>
<li> Typo in e-mail address
<li> Old browser. We recommend trying a modern version of Firefox or Chrome
<li> JavaScript disabled
<li> Activation e-mail in spam folder. Check spam folder.
<li> Non-unique username. Try adding a random string at the end.
</ul>
<p>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.
<h2> How do I drop the course?</h2>
<p> You do not have to do anything. You can simply stop working on the
course at any time you choose to do so.</p>
<h2>What happens if I drop the course?</h2>
<p> 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. </p>
<h2>
What is <i>MITx</i>?</h2>
<p> MIT seeks through the development of <i>MITx</i> to improve
education both on the MIT campus and around the world.
<p> On campus, <i>MITx</i> will be coupled with an Institute-wide research
initiative on online teaching and learning. The online learning tools
that <i>MITx</i> develops will benefit the educational experience of
residential students by supplementing and reinforcing the classroom
and laboratory experiences.</p>
<p>
Beyond the MIT campus, <i>MITx</i> 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 <i>MITx</i> courses are based.
</p>
<p>
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 <i>MITx</i> represents a next step forward in that
effort.
</p>
<h2>
What is 6.002x, and how is it different from the on-campus version of
6.002?
</h2>
<p>
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. <i>MITx</i>&rsquo;s 6.002x is modeled on the on-campus
version of 6.002.
</p>
<p>
The course introduces engineering in the context of the lumped
circuit abstraction. Topics covered include: resistive elements and
networks; independent and dependent sources; switches and MOS
transistors; digital abstraction; amplifiers; energy storage
elements; dynamics of first- and second-order networks; design in
the time and frequency domains; and analog and digital circuits and
applications.
</p>
<p>
6.002x is built on the content created collaboratively by MIT
professors Anant Agarwal and Jeffrey H. Lang for 6.002.
</p>
<h2>
How do I enroll in 6.002x?
</h2>
<p>
To enroll, visit <a href="http://mitx.mit.edu">http://mitx.mit.edu</a>
and sign up.
</p>
<h2>
When will the course be available online?
</h2>
<p>
6.002x will become available online on Monday, March 5.
</p>
<h2>
Do I need to follow a set timeline in completing 6.002x?
</h2>
<p>
In this pilot course of <i>MITx</i>, 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.
</p>
<h2>
How much time is required to complete the course?
</h2>
<p>
Students should expect to spend approximately 10 hours per week on the
course. However, the time taken by individual students might vary
considerably depending on background and skill.
</p>
<h2>
Who are the instructors for 6.002x?
</h2>
<p>
There are four instructors for 6.002x: Anant Agarwal, Chris Terman,
Gerald Sussman and Piotr Mitros. The team also includes several
teaching assistants (TAs).
</p>
<h2>
What is the work like in 6.002x?
</h2>
<p>
Students taking 6.002x will have weekly video lectures, readings from
the textbook, practice exercises and homework; design and laboratory
exercises are also significant components of the course. The course
will also provide additional tutorial material. There will be a
midterm and a final exam. An interactive laboratory playground will
also be made available for students to experiment creatively.
</p>
<p>
In general, for any given week, learners are expected to work through
a couple of lecture sequences containing a few videos (each 5 to 10
minutes in length) and a few interactive practice exercises. Learners
can also read appropriate parts of the textbook linked to the
videos. Lab and homework exercises will round out the week. Tutorials
are also provided as additional reference material.
</p>
<h2>
What if I have a question during the course?
</h2>
<p>
The course will include a discussion forum for learners to ask
questions, to post answers, and for discussions. Several helpful
documents, FAQs, tutorials and videos on using the various components
of the course will also be provided.
</p>
<h2>
Will 6.002x offer any means for collaboration among online learners?
</h2>
<p>
Yes. 6.002x will offer modest support for collaborative work through a
prototype wiki and discussion forum.
</p>
<h2>
Are there prerequisites to take the course?
</h2>
<p>
While <i>MITx</i> courses are open to all, there are some skills required to
succeed in taking the course.
</p>
<p>
In 6.002x, students are encouraged to have the knowledge obtained from
a college-level physics course in electricity and
magnetism (or from an advanced secondary-education course in electricity and magnetism, as with an Advanced Placement course in the United States). Students must know basic calculus and linear algebra, and
have some basic background in differential equations.
</p>
<p>
Since more advanced mathematics will not show up until the second half
of the course, the first half of the course will include an optional
remedial differential equations component for students with weaker
math backgrounds.
</p>
<h2>
How much does the course cost?
</h2>
<p>
All of the courses on <i>MITx</i> 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.
</p>
<h2>
What is a credential?
</h2>
<p>
Any learner who successfully completes 6.002x will receive an
electronic certificate indicating a grade. This certificate will
indicate that you earned it from <i>MITx</i>&rsquo;s pilot course. In this
prototype version, <i>MITx</i> will not require that you be tested in a
testing center or otherwise have your identity certified in order to
receive this certificate.
</p>
<h2>
Who is grading the course?
</h2>
<p>
<i>MITx</i> courses will use automated technologies to check student work
including practice exercises, homework assignments, labs and exams.
</p>
<h2>
What is a passing grade?
</h2>
<p>
Grading schemes for each course will be announced with the
course. 6.002x will be graded on an absolute scale. The components
affecting a student&rsquo;s grade and the grade thresholds will be
posted on the course website when the course comes online.
</p>
<h2>
Do I need to buy a textbook?
</h2>
<p>
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. Relevant sections will be
provided electronically as part of the online course. While the
textbook is recommended, it is not required. The electronic text is
provided 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.
</p>
<h2>
Do I need to have special software to access 6.002x?
</h2>
<p>
No, you do not need special software to access 6.002x, as you will
access the online interactive course through your browser. The course
website was developed and tested primarily with Google Chrome. We
support current versions of Mozilla Firefox as well. The video player
is designed to work with Flash. While we provide a partial non-Flash
fallback for the video, as well as partial support for Internet
Explorer, other browsers and tablets, portions of the functionality
will be unavailable.
</p>
<h2>
When will the next courses become available and what topics will they be on?
</h2>
<p>
Additional courses will be announced
on <a href="http://mitx.mit.edu">mitx.mit.edu</a> as they become
available. We expect this will happen in fall 2012.
</p>
</div>
</section>
<%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage">
<div>
<h1> <i>MITx</i> prototype course opens for enrollment&mdash;Online-learning
initiative&rsquo;s first offering, &lsquo;6.002x: Circuits and
Electronics,&rsquo; accepting registrants now.</h1>
<p> MIT News Office</p>
<p> In December,
MIT <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">announced </a>the
launch of an online learning initiative called &ldquo;<i>MITx</i>.&rdquo;
Starting this week, interested learners can now enroll for free in the
initiative&rdquo;s prototype course -- 6.002x: Circuits and
Electronics.</p>
<p>Students can sign up for the course
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>. The course will
officially begin on March 5 and run through June 8.</p>
<p> Modeled after MIT&rsquo;s 6.002 &mdash; an introductory course for
undergraduate students in MIT&rsquo;s Department of Electrical
Engineering and Computer Science (EECS) &mdash; 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
Artificial Intelligence Laboratory (CSAIL); Chris Terman, CSAIL
co-director; EECS Professor Gerald Sussman; and CSAIL Research
Scientist Piotr Mitros.</p>
<blockquote>
<p>
&ldquo;We are very excited to begin <i>MITx</i> with this prototype
class,&rdquo; says MIT Provost L. Rafael Reif. &ldquo;We will use
this prototype course to optimize the tools we have built by
soliciting and acting on feedback from learners.&rdquo;
</p>
</blockquote>
<p>
To access the course, registered students will log in
at <a href="http://mitx.mit.edu">mitx.mit.edu</a>, where they will
find a course schedule, an e-textbook for the course, and a discussion
board. Each week, students will watch video lectures and
demonstrations, work with practice exercises, complete homework
assignments, and participate in an online interactive lab specifically
designed to replicate its real-world counterpart. Students will also
take exams and be able to check their grades as they progress in the
course. Overall, students can expect to spend approximately 10 hours
each week on the course.
</p>
<blockquote>
&ldquo;We invite you to join us for this pilot course of <i>MITx</i>,&rdquo;
Agarwal says. &ldquo;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
experience.&rdquo;
</blockquote>
<p> <a href="http://mitx.mit.edu"> A video introduction to 6.002x can
be found here.</a></p>
<p> <a href="/6002x-faq.html"> A set of Frequently Asked Questions
about 6.002x can be found here.</a></p>
<p>
<a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219">
FAQs about <i>MITx</i> as a whole can be found here.
</a>
</p>
<p>
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 <i>MITx</i> courses, students who complete the mastery
requirement on <i>MITx</i> will be able to receive the credential for a
modest fee.
</p>
<p>
Further courses are expected to become
available beginning in the fall.
</p>
<h3>
RELATED:
</h3>
<p>
<a href="/index.html">
6.002x course website
</a>
</p>
<p>
<a href="/6002x-faq.html">
6.002x FAQ
</a>
</p>
<h3>
ARCHIVE: &quot;MIT launches online learning initiative&quot;
</h3>
<a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html">
http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html
</a>
<h3>
<i>MITx</i> website
</h3>
<a href="http://mitx.mit.edu">
http://mitx.mit.edu
</a>
<!--h3>
TAGS:
</h3>
<p>
<i>MITx</i>; students; education, teaching, academics; innovation and
invention; faculty; mit administration; learning; electrical
engineering and computer science; csail
</p-->
</div>
</section>
../data/problems/Lab2A.html
\ No newline at end of file
$("#accordion").accordion({ $("#accordion").accordion({
active: ${ active_chapter }, 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) { $('.ui-accordion').bind('accordionchange', function(event, ui) {
......
<%inherit file="marketing.html" />
<%inherit file="main.html" /> <section class="tos">
<div>
<section class="activation"> <section class="activation">
<h1>Account already active!</h1> <h1>Account already active!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p> This account has already been activated. We will notify you as <p> This account has already been activated. We will notify you as
soon as the course starts.</p> soon as the course starts.</p>
<p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
</div>
</section> </section>
<%inherit file="marketing.html" />
<%inherit file="main.html" /> <section class="tos">
<div>
<section class="activation">
<h1>Activation Complete!</h1> <h1>Activation Complete!</h1>
<!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> --> <!-- <p>Now go <a href="/">log in</a> and try the course!</a></p> -->
<p>Thanks for activating your email. We will notify you as soon as the course starts.</p> <p>Thanks for activating your email. We will notify you as soon as the course starts.</p>
<p>For now you can go to the <a href="https://mitx.mit.edu/">MITx homepage</a> or the <a href="/">6.002x course page</a>.</p>
</div>
</section> </section>
Someone, hopefully you, signed up for an account for MIT's on-line Someone, hopefully you, signed up for an account for MITx's on-line
offering of 6.002 using this email address. If it was you, and you'd offering of 6.002 using this email address. If it was you, and you'd
like to activate and use your account, copy and paste this address like to activate and use your account, copy and paste this address
into your web browser's address bar: into your web browser's address bar:
...@@ -6,4 +6,5 @@ into your web browser's address bar: ...@@ -6,4 +6,5 @@ into your web browser's address bar:
http://${ site }/activate/${ key } http://${ site }/activate/${ key }
If you didn't request this, you don't need to do anything; you won't 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.
Your account for MIT's on-line 6.002 Your account for MITx's on-line 6.002
<%inherit file="main.html" /> <%inherit file="marketing.html" />
<section class="activation">
<section class="tos">
<div>
<h1>Activation Invalid</h1> <h1>Activation Invalid</h1>
<p>Something went wrong. Check to make sure the URL you went to was <p>Something went wrong. Check to make sure the URL you went to was
correct -- e-mail programs will sometimes split it into two 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 lines. If you still have issues, e-mail us to let us know what happened
at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p> at <a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a>.</p>
<p>Or you can go back to the <a href="/">6.002x course page</a>.</p>
</div>
</section> </section>
<li><a href="javascript:goto_page(9)"> Contents ix </a>
<li><a href="javascript:goto_page(1)"> Preamble i </a>
<ul> <li><a href="javascript:goto_page(1)"> Comments on the Book i</a>
<li><a href="javascript:goto_page(4)"> About the Authors iv</a>
<li><a href="javascript:goto_page(7)"> Dedication vii</a>
<li><a href="javascript:goto_page(19)"> Preface xix </a>
<li><a href="javascript:goto_page(19)"> Approach xix </a>
<li><a href="javascript:goto_page(21)"> Overview xxi </a>
<li><a href="javascript:goto_page(23)"> Course Organization xxiii </a>
<li><a href="javascript:goto_page(23)"> Web Supplements xxiii </a>
<li><a href="javascript:goto_page(24)"> Acknowledgments xxiv </a>
</ul>
<li><a href="javascript:goto_page(27)"> The Circuit Abstraction </a> <li><a href="javascript:goto_page(27)"> 1 The Circuit Abstraction 3 </a>
<ul> <li><a href="javascript:goto_page(27)"> The Power of Abstraction </a> <ul> <li><a href="javascript:goto_page(27)"> 1.1 The Power of Abstraction 3 </a>
<li><a href="javascript:goto_page(29)"> The Lumped Circuit Abstraction</a> <li><a href="javascript:goto_page(29)"> 1.2 The Lumped Circuit Abstraction 4 </a>
<li><a href="javascript:goto_page(33)"> The Lumped Matter Discipline </a> <li><a href="javascript:goto_page(33)"> 1.3 The Lumped Matter Discipline 9 </a>
<li><a href="javascript:goto_page(37)"> Limitations of the Lumped Circuit Abstraction </a> <li><a href="javascript:goto_page(37)"> 1.4 Limitations of the Lumped Circuit Abstraction 13 </a>
<li><a href="javascript:goto_page(39)"> Practical Two-Terminal Elements </a> <li><a href="javascript:goto_page(39)"> 1.5 Practical Two-Terminal Elements 15 </a>
<ul> <li><a href="javascript:goto_page(40)"> Batteries </a> <ul> <li><a href="javascript:goto_page(40)"> 1.5.1 Batteries 16 </a>
<li><a href="javascript:goto_page(42)"> Linear Resistors </a> <li><a href="javascript:goto_page(42)"> 1.5.2 Linear Resistors 18 </a>
<li><a href="javascript:goto_page(49)"> Associated Variables Convention </a> <li><a href="javascript:goto_page(49)"> 1.5.3 Associated Variables Convention 25 </a>
</ul> <li><a href="javascript:goto_page(53)"> Ideal Two-Terminal Elements </a> </ul> <li><a href="javascript:goto_page(53)"> 1.6 Ideal Two-Terminal Elements 29 </a>
<ul> <li><a href="javascript:goto_page(54)"> Ideal Voltage Sources, Wires and Resistors </a> <ul> <li><a href="javascript:goto_page(54)"> 1.6.1 Ideal Voltage Sources, Wires and Resistors 30 </a>
<li><a href="javascript:goto_page(56)"> Element Laws </a> <li><a href="javascript:goto_page(56)"> 1.6.2 Element Laws 32 </a>
<li><a href="javascript:goto_page(57)"> The Current Source</a> <li><a href="javascript:goto_page(57)"> 1.6.3 The Current Source 33 </a>
</ul> <li><a href="javascript:goto_page(60)"> Modeling Physical Elements </a> </ul> <li><a href="javascript:goto_page(60)"> 1.7 Modeling Physical Elements 36 </a>
<li><a href="javascript:goto_page(64)"> Signal Representation </a> <li><a href="javascript:goto_page(64)"> 1.8 Signal Representation 40 </a>
<ul> <li><a href="javascript:goto_page(65)"> Analog Signals</a> <ul> <li><a href="javascript:goto_page(65)"> 1.8.1 Analog Signals 41 </a>
<li><a href="javascript:goto_page(66)"> Digital Signals</a> <li><a href="javascript:goto_page(66)"> 1.8.3 Digital Signals 42 </a>
</ul> <li><a href="javascript:goto_page(70)"> Summary </a> </ul> <li><a href="javascript:goto_page(70)"> 1.9 Summary 46 </a>
</ul> <li><a href="javascript:goto_page(77)"> Resistive Networks </a> </ul> <li><a href="javascript:goto_page(77)"> 2 Resistive Networks 53 </a>
<ul> <li><a href="javascript:goto_page(78)"> Terminology </a> <ul> <li><a href="javascript:goto_page(78)"> 2.1 Terminology 54 </a>
<li><a href="javascript:goto_page(79)"> Kirchhoff's Laws </a> <li><a href="javascript:goto_page(79)"> 2.2 Kirchhoff's Laws 55 </a>
<ul> <li><a href="javascript:goto_page(80)"> KCL </a> <ul> <li><a href="javascript:goto_page(80)"> 2.2.1 KCL 56 </a>
<li><a href="javascript:goto_page(84)"> KVL </a> <li><a href="javascript:goto_page(84)"> 2.2.1 KVL 60 </a>
</ul> <li><a href="javascript:goto_page(90)"> Circuit Analysis: Basic Method </a> </ul> <li><a href="javascript:goto_page(90)"> 2.3 Circuit Analysis: Basic Method 66 </a>
<ul> <li><a href="javascript:goto_page(91)"> Single-Resistor Circuits </a> <ul> <li><a href="javascript:goto_page(91)"> 2.3.1 Single-Resistor Circuits 67 </a>
<li><a href="javascript:goto_page(94)"> Quick Intuitive Analysis of Single-Resistor Circuits </a> <li><a href="javascript:goto_page(94)"> 2.3.2 Quick Intuitive Analysis of Single-Resistor Circuits 70 </a>
<li><a href="javascript:goto_page(95)"> Energy Conservation </a> <li><a href="javascript:goto_page(95)"> 2.3.3 Energy Conservation 71 </a>
<li><a href="javascript:goto_page(97)"> Voltage and Current Dividers </a> <li><a href="javascript:goto_page(97)"> 2.3.4 Voltage and Current Dividers 73 </a>
<li><a href="javascript:goto_page(99)"> Voltage Dividers </a> <li><a href="javascript:goto_page(99)"> 2.3.4.1 Voltage Dividers 73 </a>
<li><a href="javascript:goto_page(100)"> Resistors in Series </a> <li><a href="javascript:goto_page(100)"> 2.3.4.2 Resistors in Series 76 </a>
<li><a href="javascript:goto_page(104)"> Current Dividers </a> <li><a href="javascript:goto_page(104)"> 2.3.4.3 Current Dividers 80 </a>
<li><a href="javascript:goto_page(108)"> Resistors in Parallel </a> <li><a href="javascript:goto_page(108)"> 2.3.4.4 Resistors in Parallel 82 </a>
<li><a href="javascript:goto_page(108)"> A More Complex Circuit </a> <li><a href="javascript:goto_page(108)"> 2.3.5 A More Complex Circuit 84 </a>
</ul> <li><a href="javascript:goto_page(131)"> Intuitive Method of Circuit Analysis </a> </ul> <li><a href="javascript:goto_page(131)"> 2.4 Intuitive Method of Circuit Analysis 107 </a>
<li><a href="javascript:goto_page(132)"> More Examples </a> <li><a href="javascript:goto_page(132)"> 2.5 More Examples 108 </a>
<li><a href="javascript:goto_page(122)"> Dependent Sources and the Control Concept </a> <li><a href="javascript:goto_page(122)"> 2.6 Dependent Sources and the Control Concept 98 </a>
<ul> <li><a href="javascript:goto_page(126)"> Circuits with Dependent Sources </a> <ul> <li><a href="javascript:goto_page(126)"> 2.6.1 Circuits with Dependent Sources 102 </a>
</ul> <li><a href="javascript:goto_page(131)"> A Formulation Suitable for a Computer Solution * </a> </ul> <li><a href="javascript:goto_page(131)"> 2.7 A Formulation Suitable for a Computer Solution * 107 </a>
<li><a href="javascript:goto_page(132)"> Summary </a> <li><a href="javascript:goto_page(132)"> 2.8 Summary 108 </a>
</ul> <li><a href="javascript:goto_page(143)"> Network Theorems </a> </ul> <li><a href="javascript:goto_page(143)"> 3 Network Theorems 119 </a>
<ul> <li><a href="javascript:goto_page(143)"> Introduction </a> <ul> <li><a href="javascript:goto_page(143)"> 3.1 Introduction 119 </a>
<li><a href="javascript:goto_page(143)"> The Node Voltage </a> <li><a href="javascript:goto_page(143)"> 3.2 The Node Voltage 119 </a>
<li><a href="javascript:goto_page(149)"> The Node Method </a> <li><a href="javascript:goto_page(149)"> 3.3 The Node Method 125 </a>
<ul> <li><a href="javascript:goto_page(154)"> Node Method: A Second Example </a> <ul> <li><a href="javascript:goto_page(154)"> 3.3.1 Node Method: A Second Example 130 </a>
<li><a href="javascript:goto_page(159)"> Floating Independent Voltage Sources </a> <li><a href="javascript:goto_page(159)"> 3.3.2 Floating Independent Voltage Sources 135 </a>
<li><a href="javascript:goto_page(163)"> Dependent Sources and the Node Method </a> <li><a href="javascript:goto_page(163)"> 3.3.3 Dependent Sources and the Node Method 139 </a>
<li><a href="javascript:goto_page(169)"> The Conductance and Source Matrices *}</a> <li><a href="javascript:goto_page(169)"> 3.3.4 The Conductance and Source Matrices * 145 </a>
</ul> <li><a href="javascript:goto_page(169)"> Loop Method * </a> </ul> <li><a href="javascript:goto_page(169)"> 3.4 Loop Method * 145 </a>
<li><a href="javascript:goto_page(169)"> Superposition </a> <li><a href="javascript:goto_page(169)"> 3.5 Superposition 145 </a>
<ul> <li><a href="javascript:goto_page(176)"> Superposition Rules for Dependent Sources </a> <ul> <li><a href="javascript:goto_page(176)"> 3.5.1 Superposition Rules for Dependent Sources 152 </a>
</ul> <li><a href="javascript:goto_page(182)"> Th\'e}venin's Theorem and Norton's Theorem </a> </ul> <li><a href="javascript:goto_page(182)"> 3.6 Thevenin's Theorem and Norton's Theorem 158 </a>
<ul> <li><a href="javascript:goto_page(182)"> The Th\'e}venin Equivalent Network </a> <ul> <li><a href="javascript:goto_page(182)"> 3.6.1 The Thevenin Equivalent Network 158 </a>
<li><a href="javascript:goto_page(192)"> The Norton Equivalent Network </a> <li><a href="javascript:goto_page(192)"> 3.6.2 The Norton Equivalent Network 168 </a>
<li><a href="javascript:goto_page(195)"> More Examples </a> <li><a href="javascript:goto_page(195)"> 3.6.3 More Examples 171 </a>
</ul> <li><a href="javascript:goto_page(201)"> Summary </a> </ul> <li><a href="javascript:goto_page(201)"> 3.7 Summary 177 </a>
</ul> <li><a href="javascript:goto_page(217)"> Analysis of Nonlinear Circuits </a> </ul> <li><a href="javascript:goto_page(217)"> 4 Analysis of Nonlinear Circuits 193 </a>
<ul> <li><a href="javascript:goto_page(217)"> Introduction to Nonlinear Elements </a> <ul> <li><a href="javascript:goto_page(217)"> 4.1 Introduction to Nonlinear Elements 193 </a>
<li><a href="javascript:goto_page(221)"> Analytical Solutions </a> <li><a href="javascript:goto_page(221)"> 4.2 Analytical Solutions 197 </a>
<li><a href="javascript:goto_page(227)"> Graphical Analysis </a> <li><a href="javascript:goto_page(227)"> 4.3 Graphical Analysis 203 </a>
<li><a href="javascript:goto_page(230)"> Piecewise Linear Analysis </a> <li><a href="javascript:goto_page(230)"> 4.4 Piecewise Linear Analysis 206 </a>
<ul> <li><a href="javascript:goto_page(238)"> Improved Piecewise Linear Models for Nonlinear Elements * </a> <ul> <li><a href="javascript:goto_page(238)"> 4.4.1 Improved Piecewise Linear Models for Nonlinear Elements * 214 </a>
</ul> <li><a href="javascript:goto_page(238)"> Incremental Analysis </a> </ul> <li><a href="javascript:goto_page(238)"> 4.5 Incremental Analysis 214 </a>
<li><a href="javascript:goto_page(253)"> Summary </a> <li><a href="javascript:goto_page(253)"> 4.6 Summary 229 </a>
</ul> <li><a href="javascript:goto_page(267)"> The Digital Abstraction </a> </ul> <li><a href="javascript:goto_page(267)"> 5 The Digital Abstraction 243 </a>
<ul> <li><a href="javascript:goto_page(269)"> Voltage Levels and the Static Discipline </a> <ul> <li><a href="javascript:goto_page(269)"> 5.1 Voltage Levels and the Static Discipline 245 </a>
<li><a href="javascript:goto_page(256+24)"> Boolean Logic </a> <li><a href="javascript:goto_page(256+24)"> 5.2 Boolean Logic 256 </a>
<li><a href="javascript:goto_page(258+24)"> Combinational Gates </a> <li><a href="javascript:goto_page(258+24)"> 5.3 Combinational Gates 258 </a>
<li><a href="javascript:goto_page(261+24)"> Standard Sum-of-Products Representation </a> <li><a href="javascript:goto_page(261+24)"> 5.4 Standard Sum-of-Products Representation 261 </a>
<li><a href="javascript:goto_page(262+24)"> Simplifying Logic Expressions * </a> <li><a href="javascript:goto_page(262+24)"> 5.5 Simplifying Logic Expressions * 262 </a>
<li><a href="javascript:goto_page(267+24)"> Number Representation </a> <li><a href="javascript:goto_page(267+24)"> 5.6 Number Representation 267 </a>
<li><a href="javascript:goto_page(274+24)"> Summary </a> <li><a href="javascript:goto_page(274+24)"> 5.7 Summary 274 </a>
</ul> <li><a href="javascript:goto_page(285+24)"> The MOSFET Switch </a> </ul> <li><a href="javascript:goto_page(285+24)"> 6 The MOSFET Switch 285 </a>
<ul> <li><a href="javascript:goto_page(285+24)"> The Switch </a> <ul> <li><a href="javascript:goto_page(285+24)"> 6.1 The Switch 285 </a>
<li><a href="javascript:goto_page(288+24)"> Logic Functions Using Switches </a> <li><a href="javascript:goto_page(288+24)"> 6.2 Logic Functions Using Switches 288 </a>
<li><a href="javascript:goto_page(298+24)"> The MOSFET Device and Its S Model </a> <li><a href="javascript:goto_page(298+24)"> 6.3 The MOSFET Device and Its S Model 298 </a>
<li><a href="javascript:goto_page(291+24)"> MOSFET Switch Implementation of Logic Gates </a> <li><a href="javascript:goto_page(291+24)"> 6.4 MOSFET Switch Implementation of Logic Gates 291 </a>
<li><a href="javascript:goto_page(296+24)"> Static Analysis Using the S Model </a> <li><a href="javascript:goto_page(296+24)"> 6.5 Static Analysis Using the S Model 296 </a>
<li><a href="javascript:goto_page(300+24)"> The SR Model of the MOSFET </a> <li><a href="javascript:goto_page(300+24)"> 6.6 The SR Model of the MOSFET 300 </a>
<li><a href="javascript:goto_page(301+24)"> Physical Structure of the MOSFET $*$ </a> <li><a href="javascript:goto_page(301+24)"> 6.7 Physical Structure of the MOSFET * 301 </a>
<li><a href="javascript:goto_page(306+24)"> Static Analysis Using the SR Model </a> <li><a href="javascript:goto_page(306+24)"> 6.8 Static Analysis Using the SR Model 306 </a>
<ul> <li><a href="javascript:goto_page(311+24)"> Static Analysis of the \it NAND} Gate Using the SR Model </a> <ul> <li><a href="javascript:goto_page(311+24)"> 6.8.1 Static Analysis of the NAND Gate Using the SR Model 311 </a>
</ul> <li><a href="javascript:goto_page(314+24)"> Signal Restoration </a> </ul> <li><a href="javascript:goto_page(314+24)"> 6.9 Signal Restoration 314 </a>
<ul> <li><a href="javascript:goto_page(314+24)"> Signal Restoration and Gain </a> <ul> <li><a href="javascript:goto_page(314+24)"> 6.9.1 Signal Restoration and Gain 314 </a>
<li><a href="javascript:goto_page(317+24)"> Signal Restoration and Nonlinearity </a> <li><a href="javascript:goto_page(317+24)"> 6.9.2 Signal Restoration and Nonlinearity 317 </a>
<li><a href="javascript:goto_page(318+24)"> Buffer Characteristics and the Static Discipline </a> <li><a href="javascript:goto_page(318+24)"> 6.9.3 Buffer Characteristics and the Static Discipline 318 </a>
<li><a href="javascript:goto_page(319+24)"> Inverter Transfer Characteristics and the Static Discipline </a> <li><a href="javascript:goto_page(319+24)"> 6.9.4 Inverter Transfer Characteristics and the Static Discipline 319 </a>
</ul> <li><a href="javascript:goto_page(320+24)"> Power Consumption in Logic Gates </a> </ul> <li><a href="javascript:goto_page(320+24)"> 6.10 Power Consumption in Logic Gates 320 </a>
<li><a href="javascript:goto_page(321+24)"> Active Pullups </a> <li><a href="javascript:goto_page(321+24)"> 6.11 Active Pullups 321 </a>
<li><a href="javascript:goto_page(322+24)"> Summary </a> <li><a href="javascript:goto_page(322+24)"> 6.12 Summary 322 </a>
</ul> <li><a href="javascript:goto_page(331+24)"> The MOSFET Amplifier </a> </ul> <li><a href="javascript:goto_page(331+24)"> 7 The MOSFET Amplifier 331 </a>
<ul> <li><a href="javascript:goto_page(332+24)"> Signal Amplification </a> <ul> <li><a href="javascript:goto_page(332+24)"> 7.1 Signal Amplification 332 </a>
<li><a href="javascript:goto_page(332+24)"> Review of Dependent Sources </a> <li><a href="javascript:goto_page(332+24)"> 7.2 Review of Dependent Sources 332 </a>
<li><a href="javascript:goto_page(335+24)"> Actual MOSFET Characteristics</a> <li><a href="javascript:goto_page(335+24)"> 7.3 Actual MOSFET Characteristics 335 </a>
<li><a href="javascript:goto_page(340+24)"> The Switch Current Source (SCS) MOSFET Model </a> <li><a href="javascript:goto_page(340+24)"> 7.4 The Switch Current Source (SCS) MOSFET Model 340 </a>
<li><a href="javascript:goto_page(344+24)"> The MOSFET Amplifier </a> <li><a href="javascript:goto_page(344+24)"> 7.5 The MOSFET Amplifier 344 </a>
<ul> <li><a href="javascript:goto_page(349+24)"> Biasing the MOSFET Amplifier </a> <ul> <li><a href="javascript:goto_page(349+24)"> 7.5.1 Biasing the MOSFET Amplifier 349 </a>
<li><a href="javascript:goto_page(352+24)"> The Amplifier Abstraction and the Saturation Discipline </a> <li><a href="javascript:goto_page(352+24)"> 7.5.2 The Amplifier Abstraction and the Saturation Discipline 352 </a>
</ul> <li><a href="javascript:goto_page(353+24)"> Large Signal Analysis of the MOSFET Amplifier </a> </ul> <li><a href="javascript:goto_page(353+24)"> 7.6 Large Signal Analysis of the MOSFET Amplifier 353 </a>
<ul> <li><a href="javascript:goto_page(353+24)"> $v_IN}$ versus $v_OUT}$ in the Saturation Region </a> <ul> <li><a href="javascript:goto_page(353+24)"> 7.6.1 v_IN versus v_OUT in the Saturation Region 353 </a>
<li><a href="javascript:goto_page(356+24)"> Valid Input and Output Voltage Ranges </a> <li><a href="javascript:goto_page(356+24)"> 7.6.2 Valid Input and Output Voltage Ranges 356 </a>
<li><a href="javascript:goto_page(363+24)"> Alternative Method for Valid Input and Output Voltage Ranges </a>z <li><a href="javascript:goto_page(363+24)"> 7.6.3 Alternative Method for Valid Input and Output Voltage Ranges 363 </a>z
</ul> <li><a href="javascript:goto_page(385+24)"> Operating Point Selection </a> </ul> <li><a href="javascript:goto_page(385+24)"> 7.7 Operating Point Selection 385 </a>
<li><a href="javascript:goto_page(386+24)"> Switch Unified (SU) MOSFET Model $*$ </a> <li><a href="javascript:goto_page(386+24)"> 7.8 Switch Unified (SU) MOSFET Model * 386 </a>
<li><a href="javascript:goto_page(389+24)"> Summary </a> <li><a href="javascript:goto_page(389+24)"> 7.9 Summary 389 </a>
</ul> <li><a href="javascript:goto_page(405+24)"> The Small Signal Model </a> </ul> <li><a href="javascript:goto_page(405+24)"> 8 The Small Signal Model 405 </a>
<ul> <li><a href="javascript:goto_page(405+24)"> Overview of the Nonlinear MOSFET Amplifier </a> <ul> <li><a href="javascript:goto_page(405+24)"> 8.1 Overview of the Nonlinear MOSFET Amplifier 405 </a>
<li><a href="javascript:goto_page(405+24)"> The Small Signal Model </a> <li><a href="javascript:goto_page(405+24)"> 8.2 The Small Signal Model 405 </a>
<ul> <li><a href="javascript:goto_page(413+24)"> Small Signal Circuit Representation </a> <ul> <li><a href="javascript:goto_page(413+24)"> 8.2.1 Small Signal Circuit Representation 413 </a>
<li><a href="javascript:goto_page(418+24)"> Small Signal Circuit for the MOSFET Amplifier </a> <li><a href="javascript:goto_page(418+24)"> 8.3.2 Small Signal Circuit for the MOSFET Amplifier 418 </a>
<li><a href="javascript:goto_page(420+24)"> Selecting an Operating Point </a> <li><a href="javascript:goto_page(420+24)"> 8.2.3 Selecting an Operating Point 420 </a>
<li><a href="javascript:goto_page(423+24)"> Input and Output Resistance, Current and Power Gain </a> <li><a href="javascript:goto_page(423+24)"> 8.2.4 Input and Output Resistance, Current and Power Gain 423 </a>
</ul> <li><a href="javascript:goto_page(447+24)"> Summary </a> </ul> <li><a href="javascript:goto_page(447+24)"> 8.3 Summary 447 </a>
</ul> <li><a href="javascript:goto_page(457+24)"> Energy Storage Elements </a> </ul> <li><a href="javascript:goto_page(457+24)"> 9 Energy Storage Elements 457 </a>
<ul> <li><a href="javascript:goto_page(461+24)"> Constitutive Laws </a> <ul> <li><a href="javascript:goto_page(461+24)"> 1-Sep Constitutive Laws 461 </a>
<ul> <li><a href="javascript:goto_page(461+24)"> Capacitors </a> <ul> <li><a href="javascript:goto_page(461+24)"> 9.1.1 Capacitors 461 </a>
<li><a href="javascript:goto_page(466+24)"> Inductors </a> <li><a href="javascript:goto_page(466+24)"> 9.1.2 Inductors 466 </a>
</ul> <li><a href="javascript:goto_page(470+24)"> Series \& Parallel Connections </a> </ul> <li><a href="javascript:goto_page(470+24)"> 9.2 Series & Parallel Connections 470 </a>
<ul> <li><a href="javascript:goto_page(471+24)"> Capacitors </a> <ul> <li><a href="javascript:goto_page(471+24)"> 9.2.1 Capacitors 471 </a>
<li><a href="javascript:goto_page(472+24)"> Inductors </a> <li><a href="javascript:goto_page(472+24)"> 9.2.2 Inductors 472 </a>
</ul> <li><a href="javascript:goto_page(473+24)"> Special Examples </a> </ul> <li><a href="javascript:goto_page(473+24)"> 9.3 Special Examples 473 </a>
<ul> <li><a href="javascript:goto_page(473+24)"> MOSFET Gate Capacitance </a> <ul> <li><a href="javascript:goto_page(473+24)"> 9.3.1 MOSFET Gate Capacitance 473 </a>
<li><a href="javascript:goto_page(476+24)"> Wiring Loop Inductance </a> <li><a href="javascript:goto_page(476+24)"> 9.3.2 Wiring Loop Inductance 476 </a>
<li><a href="javascript:goto_page(477+24)"> IC Wiring Capacitance and Inductance </a> <li><a href="javascript:goto_page(477+24)"> 9.3.3 IC Wiring Capacitance and Inductance 477 </a>
<li><a href="javascript:goto_page(478+24)"> Transformers * </a> <li><a href="javascript:goto_page(478+24)"> 9.3.4 Transformers * 478 </a>
</ul> <li><a href="javascript:goto_page(480+24)"> Simple Circuit Examples </a> </ul> <li><a href="javascript:goto_page(480+24)"> 9.4 Simple Circuit Examples 480 </a>
<ul> <li><a href="javascript:goto_page(482+24)"> Sinusoidal Inputs * </a> <ul> <li><a href="javascript:goto_page(482+24)"> 9.4.1 Sinusoidal Inputs * 482 </a>
<li><a href="javascript:goto_page(482+24)"> Step Inputs </a> <li><a href="javascript:goto_page(482+24)"> 9.4.2 Step Inputs 482 </a>
<li><a href="javascript:goto_page(488+24)"> Impulse Inputs </a> <li><a href="javascript:goto_page(488+24)"> 9.4.3 Impulse Inputs 488 </a>
<li><a href="javascript:goto_page(489+24)"> Role Reversal$*$ </a> <li><a href="javascript:goto_page(489+24)"> 9.4.4 Role Reversal * 489 </a>
</ul> <li><a href="javascript:goto_page(489+24)"> Energy, Charge and Flux Conservation </a> </ul> <li><a href="javascript:goto_page(489+24)"> 9.5 Energy, Charge and Flux Conservation 489 </a>
<li><a href="javascript:goto_page(492+24)"> Summary </a> <li><a href="javascript:goto_page(492+24)"> 9.6 Summary 492 </a>
</ul> <li><a href="javascript:goto_page(503+24)"> First-order Transients </a> </ul> <li><a href="javascript:goto_page(503+24)"> 10 First-order Transients 503 </a>
<ul> <li><a href="javascript:goto_page(504+24)"> Analysis of RC Circuits </a> <ul> <li><a href="javascript:goto_page(504+24)"> 10.1.1 Analysis of RC Circuits 504 </a>
<ul> <li><a href="javascript:goto_page(504+24)"> Parallel RC Circuit, Step Input </a> <ul> <li><a href="javascript:goto_page(504+24)"> 10.1.2 Parallel RC Circuit, Step Input 504 </a>
<li><a href="javascript:goto_page(509+24)"> RC Discharge Transient </a> <li><a href="javascript:goto_page(509+24)"> 10.1.3 RC Discharge Transient 509 </a>
<li><a href="javascript:goto_page(511+24)"> Series RC Circuit, Step Input </a> <li><a href="javascript:goto_page(511+24)"> 10.1.4 Series RC Circuit, Step Input 511 </a>
<li><a href="javascript:goto_page(515+24)"> Series RC Circuit, Square Wave Input </a> <li><a href="javascript:goto_page(515+24)"> 10.2 Series RC Circuit, Square Wave Input 515 </a>
</ul> <li><a href="javascript:goto_page(517+24)"> Analysis of RL Circuits </a> </ul> <li><a href="javascript:goto_page(517+24)"> 10.2.1 Analysis of RL Circuits 517 </a>
<ul> <li><a href="javascript:goto_page(517+24)"> Series RL Circuit, Step Input </a> <ul> <li><a href="javascript:goto_page(517+24)"> 10.3 Series RL Circuit, Step Input 517 </a>
</ul> <li><a href="javascript:goto_page(520+24)"> Intuitive Analysis </a> </ul> <li><a href="javascript:goto_page(520+24)"> 10.4 Intuitive Analysis 520 </a>
<li><a href="javascript:goto_page(525+24)"> Propagation Delay and the Digital Abstraction </a> <li><a href="javascript:goto_page(525+24)"> 10.4.1 Propagation Delay and the Digital Abstraction 525 </a>
<ul> <li><a href="javascript:goto_page(527+24)"> Definitions </a> <ul> <li><a href="javascript:goto_page(527+24)"> 10.4.2 Definitions 527 </a>
<li><a href="javascript:goto_page(529+24)"> Computing $t_pd}$ from the SRC MOSFET Model </a> <li><a href="javascript:goto_page(529+24)"> 10.5 Computing t_pd from the SRC MOSFET Model 529 </a>
</ul> <li><a href="javascript:goto_page(538+24)"> State and State Variables * </a> </ul> <li><a href="javascript:goto_page(538+24)"> 10.5.1 State and State Variables * 538 </a>
<ul> <li><a href="javascript:goto_page(538+24)"> The Concept of State </a> <ul> <li><a href="javascript:goto_page(538+24)"> 10.5.2 The Concept of State 538 </a>
<li><a href="javascript:goto_page(540+24)"> Computer Analysis using the State Equation </a> <li><a href="javascript:goto_page(540+24)"> 10.5.3 Computer Analysis using the State Equation 540 </a>
<li><a href="javascript:goto_page(541+24)"> Zero-input and Zero-state Response </a> <li><a href="javascript:goto_page(541+24)"> 10.5.4 Zero-input and Zero-state Response 541 </a>
<li><a href="javascript:goto_page(544+24)"> Solution by Integrating Factors* </a> <li><a href="javascript:goto_page(544+24)"> 10.6 Solution by Integrating Factors* 544 </a>
</ul> <li><a href="javascript:goto_page(545+24)"> Additional Examples </a> </ul> <li><a href="javascript:goto_page(545+24)"> 10.6.1 Additional Examples 545 </a>
<ul> <li><a href="javascript:goto_page(545+24)"> Effect of Wire Inductance in Digital Circuits </a> <ul> <li><a href="javascript:goto_page(545+24)"> 10.6.2 Effect of Wire Inductance in Digital Circuits 545 </a>
<li><a href="javascript:goto_page(545+24)"> Ramp Inputs and Linearity </a> <li><a href="javascript:goto_page(545+24)"> 10.6.3 Ramp Inputs and Linearity 545 </a>
<li><a href="javascript:goto_page(550+24)"> Response of an RC Circuit to Short Pulses and the Impulse Response </a> <li><a href="javascript:goto_page(550+24)"> 10.6.4 Response of an RC Circuit to Short Pulses and the Impulse Response 550 </a>
<li><a href="javascript:goto_page(553+24)"> Intuitive Method for the Impulse Response </a> <li><a href="javascript:goto_page(553+24)"> 10.6.5 Intuitive Method for the Impulse Response 553 </a>
<li><a href="javascript:goto_page(554+24)"> Clock Signals and Clock Fanout </a> <li><a href="javascript:goto_page(554+24)"> 10.6.6 Clock Signals and Clock Fanout 554 </a>
<li><a href="javascript:goto_page(558+24)"> RC Response to Decaying Exponential * </a> <li><a href="javascript:goto_page(558+24)"> 10.6.7 RC Response to Decaying Exponential * 558 </a>
<li><a href="javascript:goto_page(558+24)"> Series RL Circuit with Sinewave Input </a> <li><a href="javascript:goto_page(558+24)"> 10.7 Series RL Circuit with Sinewave Input 558 </a>
</ul> <li><a href="javascript:goto_page(561+24)"> Digital Memory </a> </ul> <li><a href="javascript:goto_page(561+24)"> 10.7.1 Digital Memory 561 </a>
<ul> <li><a href="javascript:goto_page(561+24)"> The Concept of Digital State </a> <ul> <li><a href="javascript:goto_page(561+24)"> 10.7.2 The Concept of Digital State 561 </a>
<li><a href="javascript:goto_page(562+24)"> An Abstract Digital Memory Element </a> <li><a href="javascript:goto_page(562+24)"> 10.7.3 An Abstract Digital Memory Element 562 </a>
<li><a href="javascript:goto_page(563+24)"> Design of the Digital Memory Element </a> <li><a href="javascript:goto_page(563+24)"> 10.7.4 Design of the Digital Memory Element 563 </a>
<li><a href="javascript:goto_page(567+24)"> A Static Memory Element </a> <li><a href="javascript:goto_page(567+24)"> 10.7.5 A Static Memory Element 567 </a>
</ul> <li><a href="javascript:goto_page(568+24)"> Summary </a> </ul> <li><a href="javascript:goto_page(568+24)"> 10.8 Summary 568 </a>
</ul> <li><a href="javascript:goto_page(595+24)"> Energy and Power in Digital Circuits </a> </ul> <li><a href="javascript:goto_page(595+24)"> 11 Energy and Power in Digital Circuits 595 </a>
<ul> <li><a href="javascript:goto_page(595+24)"> Power and Energy Relations for a Simple RC Circuit </a> <ul> <li><a href="javascript:goto_page(595+24)"> 11.1 Power and Energy Relations for a Simple RC Circuit 595 </a>
<li><a href="javascript:goto_page(597+24)"> Average Power in an RC Circuit </a> <li><a href="javascript:goto_page(597+24)"> 11.2 Average Power in an RC Circuit 597 </a>
<ul> <li><a href="javascript:goto_page(599+24)"> Energy Dissipated during Interval $T_1$ </a> <ul> <li><a href="javascript:goto_page(599+24)"> 11.2.1 Energy Dissipated during Interval T_1 599 </a>
<li><a href="javascript:goto_page(601+24)"> Energy Dissipated during Interval $T_2$ </a> <li><a href="javascript:goto_page(601+24)"> 11.2.2 Energy Dissipated during Interval T_2 601 </a>
<li><a href="javascript:goto_page(603+24)"> Total Energy Dissipated </a> <li><a href="javascript:goto_page(603+24)"> 11.2.3 Total Energy Dissipated 603 </a>
</ul> <li><a href="javascript:goto_page(604+24)"> Power Dissipation in Logic Gates </a> </ul> <li><a href="javascript:goto_page(604+24)"> 11.3 Power Dissipation in Logic Gates 604 </a>
<ul> <li><a href="javascript:goto_page(604+24)"> Static Power Dissipation </a> <ul> <li><a href="javascript:goto_page(604+24)"> 11.3.1 Static Power Dissipation 604 </a>
<li><a href="javascript:goto_page(605+24)"> Total Power Dissipation </a> <li><a href="javascript:goto_page(605+24)"> 11.3.2 Total Power Dissipation 605 </a>
</ul> <li><a href="javascript:goto_page(611+24)"> NMOS Logic </a> </ul> <li><a href="javascript:goto_page(611+24)"> 11.4 NMOS Logic 611 </a>
<li><a href="javascript:goto_page(611+24)"> CMOS Logic </a> <li><a href="javascript:goto_page(611+24)"> 11.5 CMOS Logic 611 </a>
<ul> <li><a href="javascript:goto_page(616+24)"> CMOS Logic Gate Design </a> <ul> <li><a href="javascript:goto_page(616+24)"> 11.5.1 CMOS Logic Gate Design 616 </a>
</ul> <li><a href="javascript:goto_page(618+24)"> Summary </a> </ul> <li><a href="javascript:goto_page(618+24)"> 11.6 Summary 618 </a>
</ul> <li><a href="javascript:goto_page(625+24)"> Transients in Second Order Circuits </a> </ul> <li><a href="javascript:goto_page(625+24)"> 12 Transients in Second Order Circuits 625 </a>
<ul> <li><a href="javascript:goto_page(627+24)"> Undriven LC Circuit </a> <ul> <li><a href="javascript:goto_page(627+24)"> 12.1 Undriven LC Circuit 627 </a>
<li><a href="javascript:goto_page(640+24)"> Undriven, Series RLC Circuit </a> <li><a href="javascript:goto_page(640+24)"> 12.2 Undriven, Series RLC Circuit 640 </a>
<ul> <li><a href="javascript:goto_page(644+24)"> Under-Damped Dynamics </a> <ul> <li><a href="javascript:goto_page(644+24)"> 12.2.1 Under-Damped Dynamics 644 </a>
<li><a href="javascript:goto_page(648+24)"> Over-Damped Dynamics </a> <li><a href="javascript:goto_page(648+24)"> 12.2.2 Over-Damped Dynamics 648 </a>
<li><a href="javascript:goto_page(649+24)"> Critically-Damped Dynamics </a> <li><a href="javascript:goto_page(649+24)"> 12.2.3 Critically-Damped Dynamics 649 </a>
</ul> <li><a href="javascript:goto_page(651+24)"> Stored Energy in Transient, Series RLC Circuit </a> </ul> <li><a href="javascript:goto_page(651+24)"> 12.3 Stored Energy in Transient, Series RLC Circuit 651 </a>
<li><a href="javascript:goto_page(654+24)"> Undriven, Parallel RLC Circuit * </a> <li><a href="javascript:goto_page(654+24)"> 12.4 Undriven, Parallel RLC Circuit * 654 </a>
<ul> <li><a href="javascript:goto_page(654+24)"> Under-Damped Dynamics </a> <ul> <li><a href="javascript:goto_page(654+24)"> 12.4.1 Under-Damped Dynamics 654 </a>
<li><a href="javascript:goto_page(654+24)"> Over-Damped Dynamics </a> <li><a href="javascript:goto_page(654+24)"> 12.4.2 Over-Damped Dynamics 654 </a>
<li><a href="javascript:goto_page(654+24)"> Critically-Damped Dynamics </a> <li><a href="javascript:goto_page(654+24)"> 12.4.3 Critically-Damped Dynamics 654 </a>
</ul> <li><a href="javascript:goto_page(654+24)"> Driven, Series RLC Circuit </a> </ul> <li><a href="javascript:goto_page(654+24)"> 12.5 Driven, Series RLC Circuit 654 </a>
<ul> <li><a href="javascript:goto_page(657+24)"> Step Response </a> <ul> <li><a href="javascript:goto_page(657+24)"> 12.5.1 Step Response 657 </a>
<li><a href="javascript:goto_page(661+24)"> Impulse Response * </a> <li><a href="javascript:goto_page(661+24)"> 12.5.2 Impulse Response * 661 </a>
</ul> <li><a href="javascript:goto_page(678+24)"> Driven, Parallel RLC Circuit * </a> </ul> <li><a href="javascript:goto_page(678+24)"> 12.6 Driven, Parallel RLC Circuit * 678 </a>
<ul> <li><a href="javascript:goto_page(678+24)"> Step Response </a> <ul> <li><a href="javascript:goto_page(678+24)"> 12.6.1 Step Response 678 </a>
<li><a href="javascript:goto_page(678+24)"> Impulse Response </a> <li><a href="javascript:goto_page(678+24)"> 12.6.2 Impulse Response 678 </a>
</ul> <li><a href="javascript:goto_page(678+24)"> Intuitive Analysis of Second-Order Circuits </a> </ul> <li><a href="javascript:goto_page(678+24)"> 12.7 Intuitive Analysis of Second-Order Circuits 678 </a>
<li><a href="javascript:goto_page(684+24)"> Two-Capacitor Or Two-Inductor Circuits </a> <li><a href="javascript:goto_page(684+24)"> 12.8 Two-Capacitor Or Two-Inductor Circuits 684 </a>
<li><a href="javascript:goto_page(689+24)"> State-Variable Method * </a> <li><a href="javascript:goto_page(689+24)"> 12.9 State-Variable Method * 689 </a>
<li><a href="javascript:goto_page(691+24)"> State-Space Analysis * </a> <li><a href="javascript:goto_page(691+24)"> 12.10 State-Space Analysis * 691 </a>
<ul> <li><a href="javascript:goto_page(691+24)"> Numerical Solution * </a> <ul> <li><a href="javascript:goto_page(691+24)"> 12.10.1 Numerical Solution * 691 </a>
</ul> <li><a href="javascript:goto_page(691+24)"> Higher-Order Circuits* </a> </ul> <li><a href="javascript:goto_page(691+24)"> 12.11 Higher-Order Circuits* 691 </a>
<li><a href="javascript:goto_page(692+24)"> Summary </a> <li><a href="javascript:goto_page(692+24)"> 12.12 Summary 692 </a>
</ul> <li><a href="javascript:goto_page(703+24)"> Sinusoidal Steady State </a> </ul> <li><a href="javascript:goto_page(703+24)"> 13 Sinusoidal Steady State 703 </a>
<ul> <li><a href="javascript:goto_page(703+24)"> Introduction </a> <ul> <li><a href="javascript:goto_page(703+24)"> 13.1 Introduction 703 </a>
<li><a href="javascript:goto_page(706+24)"> Analysis using Complex Exponential Drive </a> <li><a href="javascript:goto_page(706+24)"> 13.2 Analysis using Complex Exponential Drive 706 </a>
<ul> <li><a href="javascript:goto_page(706+24)"> Homogeneous Solution </a> <ul> <li><a href="javascript:goto_page(706+24)"> 13.2.1 Homogeneous Solution 706 </a>
<li><a href="javascript:goto_page(707+24)"> Particular Solution </a> <li><a href="javascript:goto_page(707+24)"> 13.2.2 Particular Solution 707 </a>
<li><a href="javascript:goto_page(710+24)"> Complete Solution </a> <li><a href="javascript:goto_page(710+24)"> 13.2.3 Complete Solution 710 </a>
<li><a href="javascript:goto_page(710+24)"> Sinusoidal Steady State Response </a> <li><a href="javascript:goto_page(710+24)"> 13.2.4 Sinusoidal Steady State Response 710 </a>
</ul> <li><a href="javascript:goto_page(712+24)"> The Boxes: Impedance </a> </ul> <li><a href="javascript:goto_page(712+24)"> 13.3 The Boxes: Impedance 712 </a>
<ul> <li><a href="javascript:goto_page(718+24)"> Example: Series RL Circuit </a> <ul> <li><a href="javascript:goto_page(718+24)"> 13.3.1 Example: Series RL Circuit 718 </a>
<li><a href="javascript:goto_page(722+24)"> Example: Another RC Circuit </a> <li><a href="javascript:goto_page(722+24)"> 13.3.2 Example: Another RC Circuit 722 </a>
<li><a href="javascript:goto_page(724+24)"> Example: RC Circuit with Two Capacitors </a> <li><a href="javascript:goto_page(724+24)"> 13.3.3 Example: RC Circuit with Two Capacitors 724 </a>
<li><a href="javascript:goto_page(729+24)"> Example: Analysis of Small Signal Amplifier with Capacitive Load </a> <li><a href="javascript:goto_page(729+24)"> 13.3.4 Example: Analysis of Small Signal Amplifier with Capacitive Load 729 </a>
</ul> <li><a href="javascript:goto_page(731+24)"> Frequency Response: Magnitude/Phase vs. Frequency </a> </ul> <li><a href="javascript:goto_page(731+24)"> 13.4 Frequency Response: Magnitude/Phase vs. Frequency 731 </a>
<ul> <li><a href="javascript:goto_page(732+24)"> Frequency Response of Capacitors, Inductor </a> <ul> <li><a href="javascript:goto_page(732+24)"> 13.4.1 Frequency Response of Capacitors, Inductor 732 </a>
<li><a href="javascript:goto_page(737+24)"> Intuitively Sketching th </a> <li><a href="javascript:goto_page(737+24)"> 13.4.2 Intuitively Sketching th 737 </a>
<li><a href="javascript:goto_page(741+24)"> The Bode Plot: Sketching the Frequency Response of General Functions * </a> <li><a href="javascript:goto_page(741+24)"> 13.4.3 The Bode Plot: Sketching the Frequency Response of General Functions * 741 </a>
</ul> <li><a href="javascript:goto_page(742+24)"> Filters </a> </ul> <li><a href="javascript:goto_page(742+24)"> 13.5 Filters 742 </a>
<ul> <li><a href="javascript:goto_page(744+24)"> Filter Design Example: Crossover Network </a> <ul> <li><a href="javascript:goto_page(744+24)"> 13.5.1 Filter Design Example: Crossover Network 744 </a>
<li><a href="javascript:goto_page(746+24)"> Decoupling Amplifier Stages </a> <li><a href="javascript:goto_page(746+24)"> 13.5.2 Decoupling Amplifier Stages 746 </a>
</ul> <li><a href="javascript:goto_page(751+24)"> Time Domain </a> </ul> <li><a href="javascript:goto_page(751+24)"> 13.6 Time Domain 751 </a>
<ul> <li><a href="javascript:goto_page(751+24)"> Frequency Domain Analysis </a> <ul> <li><a href="javascript:goto_page(751+24)"> 13.6.1 Frequency Domain Analysis 751 </a>
<li><a href="javascript:goto_page(754+24)"> Time Domain Analysis </a> <li><a href="javascript:goto_page(754+24)"> 13.6.2 Time Domain Analysis 754 </a>
<li><a href="javascript:goto_page(756+24)"> Comparing Time Domain and Frequency Domain Analyses </a> <li><a href="javascript:goto_page(756+24)"> 13.6.3 Comparing Time Domain and Frequency Domain Analyses 756 </a>
</ul> <li><a href="javascript:goto_page(757+24)"> Power and Energy in an Impedance </a> </ul> <li><a href="javascript:goto_page(757+24)"> 13.7 Power and Energy in an Impedance 757 </a>
<ul> <li><a href="javascript:goto_page(758+24)"> Arbitrary Impedance </a> <ul> <li><a href="javascript:goto_page(758+24)"> 13.7.1 Arbitrary Impedance 758 </a>
<li><a href="javascript:goto_page(760+24)"> Pure Resistance </a> <li><a href="javascript:goto_page(760+24)"> 13.7.2 Pure Resistance 760 </a>
<li><a href="javascript:goto_page(761+24)"> Pure Reactance </a> <li><a href="javascript:goto_page(761+24)"> 13.7.3 Pure Reactance 761 </a>
<li><a href="javascript:goto_page(763+24)"> Example: Power in an RC Circuit </a> <li><a href="javascript:goto_page(763+24)"> 13.7.4 Example: Power in an RC Circuit 763 </a>
</ul> <li><a href="javascript:goto_page(765+24)"> Summary </a> </ul> <li><a href="javascript:goto_page(765+24)"> 13.8 Summary 765 </a>
</ul> <li><a href="javascript:goto_page(777+24)"> Sinusoidal Steady State: Resonance </a> </ul> <li><a href="javascript:goto_page(777+24)"> 14 Sinusoidal Steady State: Resonance 777 </a>
<ul> <li><a href="javascript:goto_page(777+24)"> Parallel RLC, Sinusoidal Response </a> <ul> <li><a href="javascript:goto_page(777+24)"> 14.1 Parallel RLC, Sinusoidal Response 777 </a>
<ul> <li><a href="javascript:goto_page(778+24)"> Homogeneous Solution </a> <ul> <li><a href="javascript:goto_page(778+24)"> 14.1.1 Homogeneous Solution 778 </a>
<li><a href="javascript:goto_page(780+24)"> Particular Solution </a> <li><a href="javascript:goto_page(780+24)"> 14.1.2 Particular Solution 780 </a>
<li><a href="javascript:goto_page(781+24)"> Total Solution for the Parallel RLC Circuit </a> <li><a href="javascript:goto_page(781+24)"> 14.1.3 Total Solution for the Parallel RLC Circuit 781 </a>
</ul> <li><a href="javascript:goto_page(783+24)"> Frequency Response for Resonant Systems </a> </ul> <li><a href="javascript:goto_page(783+24)"> 14.2 Frequency Response for Resonant Systems 783 </a>
<ul> <li><a href="javascript:goto_page(792+24)"> The Resonant Region of the Frequency Response </a> <ul> <li><a href="javascript:goto_page(792+24)"> 14.2.1 The Resonant Region of the Frequency Response 792 </a>
</ul> <li><a href="javascript:goto_page(801+24)"> Series RLC </a> </ul> <li><a href="javascript:goto_page(801+24)"> 14.3 Series RLC 801 </a>
<li><a href="javascript:goto_page(808+24)"> The Bode Plot for Resonant Functions * </a> <li><a href="javascript:goto_page(808+24)"> 14.4 The Bode Plot for Resonant Functions * 808 </a>
<li><a href="javascript:goto_page(808+24)"> Filter Examples </a> <li><a href="javascript:goto_page(808+24)"> 14.5 Filter Examples 808 </a>
<ul> <li><a href="javascript:goto_page(809+24)"> Bandpass Filter </a> <ul> <li><a href="javascript:goto_page(809+24)"> 14.5.1 Bandpass Filter 809 </a>
<li><a href="javascript:goto_page(810+24)"> Lowpass Filter </a> <li><a href="javascript:goto_page(810+24)"> 14.5.2 Lowpass Filter 810 </a>
<li><a href="javascript:goto_page(812+24)"> Highpass Filter </a> <li><a href="javascript:goto_page(812+24)"> 14.5.3 Highpass Filter 812 </a>
<li><a href="javascript:goto_page(815+24)"> Notch Filter </a> <li><a href="javascript:goto_page(815+24)"> 14.5.4 Notch Filter 815 </a>
</ul> <li><a href="javascript:goto_page(816+24)"> Stored Energy in a Resonant Circuit </a> </ul> <li><a href="javascript:goto_page(816+24)"> 14.6 Stored Energy in a Resonant Circuit 816 </a>
<li><a href="javascript:goto_page(821+24)"> Summary </a> <li><a href="javascript:goto_page(821+24)"> 14.7 Summary 821 </a>
</ul> <li><a href="javascript:goto_page(837+24)"> The Operational Amplifier Abstraction </a> </ul> <li><a href="javascript:goto_page(837+24)"> 15 The Operational Amplifier Abstraction 837 </a>
<ul> <li><a href="javascript:goto_page(837+24)"> Introduction </a> <ul> <li><a href="javascript:goto_page(837+24)"> 15.1 Introduction 837 </a>
<ul> <li><a href="javascript:goto_page(838+24)"> Historical Perspective </a> <ul> <li><a href="javascript:goto_page(838+24)"> 15.1.1 Historical Perspective 838 </a>
</ul> <li><a href="javascript:goto_page(839+24)"> Device Properties of the Operational Amplifier </a> </ul> <li><a href="javascript:goto_page(839+24)"> 15.2 Device Properties of the Operational Amplifier 839 </a>
<ul> <li><a href="javascript:goto_page(839+24)"> The Op Amp Model </a> <ul> <li><a href="javascript:goto_page(839+24)"> 15.2 The Op Amp Model 839 </a>
</ul> <li><a href="javascript:goto_page(842+24)"> Simple Op Amp Circuits </a> </ul> <li><a href="javascript:goto_page(842+24)"> 15.3 Simple Op Amp Circuits 842 </a>
<ul> <li><a href="javascript:goto_page(842+24)"> The Non-inverting Op Amp </a> <ul> <li><a href="javascript:goto_page(842+24)"> 15.3.1 The Non-inverting Op Amp 842 </a>
<li><a href="javascript:goto_page(844+24)"> A Second Example: The Inverting Connection </a> <li><a href="javascript:goto_page(844+24)"> 15.3.2 A Second Example: The Inverting Connection 844 </a>
<li><a href="javascript:goto_page(846+24)"> Sensitivity </a> <li><a href="javascript:goto_page(846+24)"> 15.3.3 Sensitivity 846 </a>
<li><a href="javascript:goto_page(847+24)"> A Special Case: The Voltage Follower </a> <li><a href="javascript:goto_page(847+24)"> 15.3.4 A Special Case: The Voltage Follower 847 </a>
<li><a href="javascript:goto_page(848+24)"> An Additional Constraint: $v^+ - v^- \simeq 0$ </a> <li><a href="javascript:goto_page(848+24)"> 15.3.5 An Additional Constraint: v+ - v- ~ 0 848 </a>
</ul> <li><a href="javascript:goto_page(849+24)"> Input and Output Resistances </a> </ul> <li><a href="javascript:goto_page(849+24)"> 15.4 Input and Output Resistances 849 </a>
<ul> <li><a href="javascript:goto_page(849+24)"> Output Resistance, Inverting Op Amp </a> <ul> <li><a href="javascript:goto_page(849+24)"> 15.4.1 Output Resistance, Inverting Op Amp 849 </a>
<li><a href="javascript:goto_page(851+24)"> Input Resistance, Inverting Connection </a> <li><a href="javascript:goto_page(851+24)"> 15.4.2 Input Resistance, Inverting Connection 851 </a>
<li><a href="javascript:goto_page(853+24)"> Input and Output R for Non-Inverting Op Amp </a> <li><a href="javascript:goto_page(853+24)"> 15.4.3 Input and Output R for Non-Inverting Op Amp 853 </a>
<li><a href="javascript:goto_page(855+24)"> Generalization on Input Resistance * </a> <li><a href="javascript:goto_page(855+24)"> 15.4.4 Generalization on Input Resistance * 855 </a>
<li><a href="javascript:goto_page(855+24)"> Example: Op Amp Current Source </a> <li><a href="javascript:goto_page(855+24)"> 15.4.5 Example: Op Amp Current Source 855 </a>
</ul> <li><a href="javascript:goto_page(857+24)"> Additional Examples </a> </ul> <li><a href="javascript:goto_page(857+24)"> 15.5 Additional Examples 857 </a>
<ul> <li><a href="javascript:goto_page(858+24)"> Adder </a> <ul> <li><a href="javascript:goto_page(858+24)"> 15.5.1 Adder 858 </a>
<li><a href="javascript:goto_page(858+24)"> Subtracter </a> <li><a href="javascript:goto_page(858+24)"> 15.5.2 Subtracter 858 </a>
</ul> <li><a href="javascript:goto_page(859+24)"> Op Amp RC Circuits </a> </ul> <li><a href="javascript:goto_page(859+24)"> 15.6 Op Amp RC Circuits 859 </a>
<ul> <li><a href="javascript:goto_page(859+24)"> Op Amp Integrator </a> <ul> <li><a href="javascript:goto_page(859+24)"> 15.6.1 Op Amp Integrator 859 </a>
<li><a href="javascript:goto_page(862+24)"> Op Amp Differentiator </a> <li><a href="javascript:goto_page(862+24)"> 15.6.2 Op Amp Differentiator 862 </a>
<li><a href="javascript:goto_page(863+24)"> An RC Active Filter </a> <li><a href="javascript:goto_page(863+24)"> 15.6.3 An RC Active Filter 863 </a>
<li><a href="javascript:goto_page(865+24)"> The RC Active Filter -- Impedance Analysis </a> <li><a href="javascript:goto_page(865+24)"> 15.6.4 The RC Active Filter -- Impedance Analysis 865 </a>
<li><a href="javascript:goto_page(866+24)"> Sallen-Key Filter </a> <li><a href="javascript:goto_page(866+24)"> 15.6.5 Sallen-Key Filter 866 </a>
</ul> <li><a href="javascript:goto_page(866+24)"> Op Amp in Saturation </a> </ul> <li><a href="javascript:goto_page(866+24)"> 15.7 Op Amp in Saturation 866 </a>
<ul> <li><a href="javascript:goto_page(867+24)"> Op Amp Integrator in Saturation </a> <ul> <li><a href="javascript:goto_page(867+24)"> 15.7.1 Op Amp Integrator in Saturation 867 </a>
</ul> <li><a href="javascript:goto_page(869+24)"> Positive Feedback </a> </ul> <li><a href="javascript:goto_page(869+24)"> 15.8 Positive Feedback 869 </a>
<ul> <li><a href="javascript:goto_page(869+24)"> RC Oscillator </a> <ul> <li><a href="javascript:goto_page(869+24)"> 15.8.1 RC Oscillator 869 </a>
</ul> <li><a href="javascript:goto_page(872+24)"> Two-ports* </a> </ul> <li><a href="javascript:goto_page(872+24)"> 15.9 Two-ports* 872 </a>
<li><a href="javascript:goto_page(873+24)"> Summary </a> <li><a href="javascript:goto_page(873+24)"> 15.10 Summary 873 </a>
</ul> <li><a href="javascript:goto_page(905+24)"> Diodes </a> </ul> <li><a href="javascript:goto_page(905+24)"> 16 Diodes 905 </a>
<ul> <li><a href="javascript:goto_page(905+24)"> Introduction </a> <ul> <li><a href="javascript:goto_page(905+24)"> 16.1 Introduction 905 </a>
<li><a href="javascript:goto_page(905+24)"> Semiconductor Diode Characteristics </a> <li><a href="javascript:goto_page(905+24)"> 16.2 Semiconductor Diode Characteristics 905 </a>
<li><a href="javascript:goto_page(908+24)"> Analysis of Diode Circuits </a> <li><a href="javascript:goto_page(908+24)"> 16.3 Analysis of Diode Circuits 908 </a>
<ul> <li><a href="javascript:goto_page(908+24)"> Method of Assumed States </a> <ul> <li><a href="javascript:goto_page(908+24)"> 16.3.1 Method of Assumed States 908 </a>
</ul> <li><a href="javascript:goto_page(912+24)"> Nonlinear Analysis with RL and RC </a> </ul> <li><a href="javascript:goto_page(912+24)"> 16.4 Nonlinear Analysis with RL and RC 912 </a>
<ul> <li><a href="javascript:goto_page(912+24)"> Peak Detector</a> <ul> <li><a href="javascript:goto_page(912+24)"> 16.4.1 Peak Detector 912 </a>
<li><a href="javascript:goto_page(915+24)"> Example: Clamping Circuit </a> <li><a href="javascript:goto_page(915+24)"> 16.4.2 Example: Clamping Circuit 915 </a>
<li><a href="javascript:goto_page(918+24)"> A Switched Power Supply Using a Diode </a> <li><a href="javascript:goto_page(918+24)"> 16.4.3 A Switched Power Supply Using a Diode 918 </a>
</ul> <li><a href="javascript:goto_page(918+24)"> Additional Examples </a> </ul> <li><a href="javascript:goto_page(918+24)"> 16.5 Additional Examples 918 </a>
<ul> <li><a href="javascript:goto_page(918+24)"> Piecewise Linear Example: Clipping Circuit </a> <ul> <li><a href="javascript:goto_page(918+24)"> 16.5.1 Piecewise Linear Example: Clipping Circuit 918 </a>
<li><a href="javascript:goto_page(918+24)"> Exponentiation Circuit </a> <li><a href="javascript:goto_page(918+24)"> 16.5.2 Exponentiation Circuit 918 </a>
<li><a href="javascript:goto_page(918+24)"> Piecewise Linear Example: Limiter </a> <li><a href="javascript:goto_page(918+24)"> 16.5.3 Piecewise Linear Example: Limiter 918 </a>
<li><a href="javascript:goto_page(918+24)"> Example: Full-Wave Diode Bridge </a> <li><a href="javascript:goto_page(918+24)"> 16.5.4 Example: Full-Wave Diode Bridge 918 </a>
<li><a href="javascript:goto_page(918+24)"> Incremental Example: Zener Diode Regulator </a> <li><a href="javascript:goto_page(918+24)"> 16.5.5 Incremental Example: Zener Diode Regulator 918 </a>
<li><a href="javascript:goto_page(918+24)"> Incremental Example: Diode Attenuator </a> <li><a href="javascript:goto_page(918+24)"> 16.5.6 Incremental Example: Diode Attenuator 918 </a>
</ul> <li><a href="javascript:goto_page(919+24)"> Summary </a> </ul> <li><a href="javascript:goto_page(919+24)"> 16.6 Summary 919 </a>
</ul> <li><a href="javascript:goto_page(927+24)"> Maxwell's Equations and the LMD </a> </ul> <li><a href="javascript:goto_page(927+24)"> A1 Maxwell's Equations and the LMD 927 </a>
<ul> <li><a href="javascript:goto_page(927+24)"> The Lumped Matter Discipline </a> <ul> <li><a href="javascript:goto_page(927+24)"> A.1 The Lumped Matter Discipline 927 </a>
<ul> <li><a href="javascript:goto_page(927+24)"> The First Constraint of the Lumped Matter Discipline </a> <ul> <li><a href="javascript:goto_page(927+24)"> A.1.1 The First Constraint of the Lumped Matter Discipline 927 </a>
<li><a href="javascript:goto_page(930+24)"> The Second Constraint of the Lumped Matter Discipline </a> <li><a href="javascript:goto_page(930+24)"> A.1.2 The Second Constraint of the Lumped Matter Discipline 930 </a>
<li><a href="javascript:goto_page(932+24)"> The Third Constraint of the Lumped Matter Discipline </a> <li><a href="javascript:goto_page(932+24)"> A.1.3 The Third Constraint of the Lumped Matter Discipline 932 </a>
<li><a href="javascript:goto_page(933+24)"> The Lumped Matter Discipline Applied to Circuits </a> <li><a href="javascript:goto_page(933+24)"> A.1.4 The Lumped Matter Discipline Applied to Circuits 933 </a>
</ul> <li><a href="javascript:goto_page(934+24)"> Deriving Kirchhoff's Laws </a> </ul> <li><a href="javascript:goto_page(934+24)"> A.2 Deriving Kirchhoff's Laws 934 </a>
<li><a href="javascript:goto_page(936+24)"> Deriving the Resistance of a Piece of Material </a> <li><a href="javascript:goto_page(936+24)"> A.3 Deriving the Resistance of a Piece of Material 936 </a>
</ul> <li><a href="javascript:goto_page(941+24)"> Trigonometric Functions \& Identities </a> </ul> <li><a href="javascript:goto_page(941+24)"> B Trigonometric Functions & Identities 941 </a>
<ul> <li><a href="javascript:goto_page(941+24)"> Negative Arguments </a> <ul> <li><a href="javascript:goto_page(941+24)"> B.1 Negative Arguments 941 </a>
<li><a href="javascript:goto_page(942+24)"> Phase-Shifted Arguments </a> <li><a href="javascript:goto_page(942+24)"> B.2 Phase-Shifted Arguments 942 </a>
<li><a href="javascript:goto_page(942+24)"> Sum and Difference Arguments </a> <li><a href="javascript:goto_page(942+24)"> B.3 Sum and Difference Arguments 942 </a>
<li><a href="javascript:goto_page(943+24)"> Products </a> <li><a href="javascript:goto_page(943+24)"> B.4 Products 943 </a>
<li><a href="javascript:goto_page(943+24)"> Half-Angle \& Twice-Angle Arguments </a> <li><a href="javascript:goto_page(943+24)"> B.5 Half-Angle & Twice-Angle Arguments 943 </a>
<li><a href="javascript:goto_page(943+24)"> Squares </a> <li><a href="javascript:goto_page(943+24)"> B.6 Squares 943 </a>
<li><a href="javascript:goto_page(943+24)"> Miscellaneous </a> <li><a href="javascript:goto_page(943+24)"> B.7 Miscellaneous 943 </a>
<li><a href="javascript:goto_page(944+24)"> Taylor Series Expansions </a> <li><a href="javascript:goto_page(944+24)"> B.8 Taylor Series Expansions 944 </a>
<li><a href="javascript:goto_page(944+24)"> Relations to $e^j\theta}$ </a> <li><a href="javascript:goto_page(944+24)"> B.9 Relations to e^j\theta 944 </a>
</ul> <li><a href="javascript:goto_page(947+24)"> Complex Numbers </a> </ul> <li><a href="javascript:goto_page(947+24)"> C Complex Numbers 947 </a>
<ul> <li><a href="javascript:goto_page(947+24)"> Magnitude and Phase</a> <ul> <li><a href="javascript:goto_page(947+24)"> C.1 Magnitude and Phase 947 </a>
<li><a href="javascript:goto_page(948+24)"> Polar Representation </a> <li><a href="javascript:goto_page(948+24)"> C.2 Polar Representation 948 </a>
<li><a href="javascript:goto_page(949+24)"> Addition and Subtraction </a> <li><a href="javascript:goto_page(949+24)"> C.3 Addition and Subtraction 949 </a>
<li><a href="javascript:goto_page(949+24)"> Multiplication and Division </a> <li><a href="javascript:goto_page(949+24)"> C.4 Multiplication and Division 949 </a>
<li><a href="javascript:goto_page(950+24)"> Complex Conjugate </a> <li><a href="javascript:goto_page(950+24)"> C.5 Complex Conjugate 950 </a>
<li><a href="javascript:goto_page(951+24)"> Properties of $e^j\theta}$ </a> <li><a href="javascript:goto_page(951+24)"> C.6 Properties of e^j\theta 951 </a>
<li><a href="javascript:goto_page(951+24)"> Rotation </a> <li><a href="javascript:goto_page(951+24)"> C.7 Rotation 951 </a>
<li><a href="javascript:goto_page(952+24)"> Complex Functions of Time </a> <li><a href="javascript:goto_page(952+24)"> C.8 Complex Functions of Time 952 </a>
<li><a href="javascript:goto_page(952+24)"> Numerical Examples </a> <li><a href="javascript:goto_page(952+24)"> C.9 Numerical Examples 952 </a>
</ul> <li><a href="javascript:goto_page(957+24)"> Solving Simultaneous Linear Equations </a> </ul> <li><a href="javascript:goto_page(957+24)"> D Solving Simultaneous Linear Equations 957 </a>
<li><a href="javascript:goto_page(959+24)"> Answers to Selected Problems 959 </a>
<li><a href="javascript:goto_page(971+24)"> Figure Acknowledgments 971 </a>
<li><a href="javascript:goto_page(973+24)"> Index 973 </a>
...@@ -27,9 +27,16 @@ ...@@ -27,9 +27,16 @@
<section class="main-content"> <section class="main-content">
<div class="course-wrapper"> <div class="course-wrapper">
<section class="course-index">
<div id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
</div>
<div id="accordion"> <div id="accordion">
${accordion} ${accordion}
</div> </div>
</section>
<section class="course-content"> <section class="course-content">
${content} ${content}
......
<!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details--> <!-- TODO: Add pattern field to username. See HTML5 cookbook, page 84 for details-->
<div name="enroll_form" id="enroll_form"> <div name="enroll_form" id="enroll_form">
<h1>Enroll in 6.002 Circuits &amp; Electronics</h1> <h1>Enroll in 6.002x Circuits &amp; Electronics</h1>
<p class="ie-warning"> Enrollment requires a modern web browser with JavaScript enabled. You don't have this. You can&rsquo;t enroll without upgrading, since you couldn&rsquo;t take the course without upgrading. Feel free to download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a> or <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=95346">Google Chrome</a>, for free, to enroll and take this course.</p>
<form name="enroll" id="enroll_form" method="get"> <form name="enroll" id="enroll_form" method="get">
<fieldset><% if 'error' in locals(): e = error %> <fieldset><% if 'error' in locals(): e = error %>
...@@ -11,26 +14,26 @@ ...@@ -11,26 +14,26 @@
<li class="email"> <li class="email">
<label>E-mail*</label> <label>E-mail*</label>
<input name="email" id="ca_email" type="email" required /> <input name="email" id="ca_email" type="email" />
</li> </li>
<li class="password"> <li class="password">
<label>Password*</label> <label>Password*</label>
<input name="password" id="ca_password" type="password" required /> <input name="password" id="ca_password" type="password" />
</li> </li>
<li class="username"> <li class="username">
<label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label> <label>Username (public)* <span class="ui-icon ui-icon-help" id="spinner_nick" style="display:inline-block;"></span></label>
<input name="username" id="ca_username" type="text" required /> <input name="username" id="ca_username" type="text" />
<div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div> <div id="sregion_nick" class="tip">Nickname you'd like to use on forums.</div>
</li> </li>
<li class="full-name"> <li class="full-name">
<label>Full name<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label> <label>Full name*<span class="ui-icon ui-icon-help" id="spinner_name" style="display:inline-block;"></span></label>
<input name="name" id="ca_name" type="text" /> <input name="name" id="ca_name" type="text" />
<div class="tip" id="sregion_name">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. &quot;John Smith, Jr&quot;).</div> <div class="tip" id="sregion_name">If you successfully complete the course, you will receive an electronic certificate of accomplishment from <i>MITx</i> with this name on it.</div>
</li> </li>
<li class="location"> <li class="location">
...@@ -49,16 +52,17 @@ ...@@ -49,16 +52,17 @@
</li> </li>
<li class="terms"> <li class="terms">
<label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" required />I agree to the Terms of Service*</label> <label> <input name="terms_of_service" id="cb_terms_of_service" type="checkbox" value="terms_of_service" />I agree to the <a href="/t/tos.html">Terms of Service</a>*</label>
</li> </li>
<li class="honor-code"> <li class="honor-code">
<label> <label>
<input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" required />I agree to the Honor code.*</label> <input name="honor_code" id="cb_honor_code" type="checkbox" value="honor_code" />I agree to the <a href="/t/honor.html">Honor Code</a>, summarized as:*</label>
<ul> <ul>
<li>Complete all mid-terms and final exams with only my own work.</li>
<li>Maintain only one account, and not share the username or password.</li>
<li>Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li> <li>Not engage in any activities that would dishonestly improve my results, or improve or hurt those of others.</li>
<li>Never post answers to problems.</li> <li>Not post answers to problems that are being used to assess student performance.</li>
<li>Maintain only one account.</li>
</ul> </ul>
</li> </li>
......
<%inherit file="marketing.html" /> <%inherit file="marketing.html" />
<%block name="title">MITx 6.002x: Circuits & Electronics</%block>
<%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>
<%block name="keywords">MITx, circuits, electronics, EECS, electrical engineering, analog circuits, digital circuits, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>
<%block name="header_text"> <%block name="header_text">
<section class="course"> <section class="course">
<section> <section>
<h1>Circuits &amp; Electronics</h1> <h1>Circuits &amp; Electronics</h1>
<h2>6.002x</h2> <h2>6.002x</h2>
<a class="enroll" rel="leanModal" href="#enroll">Enroll in 6.002x Circuits <span>&amp;</span> Electronics</a> <a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits <span>&amp;</span> Electronics <noscript>you need to have javascript enabled</noscript></a>
</section> </section>
<p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012.</p> <p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
</section> </section>
</%block> </%block>
...@@ -31,7 +35,7 @@ ...@@ -31,7 +35,7 @@
<p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx&rsquo;s</em> pilot course. In this prototype version, <em>MITx</em> will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.</p> <p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx&rsquo;s</em> pilot course. In this prototype version, <em>MITx</em> will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.</p>
<p>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 <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim" target="_blank">Amazon</a>.</p> <p>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 <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim/mitopencourse-20" target="_blank">Amazon</a>.</p>
</section> </section>
<section class="requirements"> <section class="requirements">
...@@ -48,7 +52,7 @@ ...@@ -48,7 +52,7 @@
</section> </section>
<section class="cta"> <section class="cta">
<a class="enroll" rel="leanModal" href="#enroll">Enroll in 6.002x Circuits &amp; Electronics</a> <a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits &amp; Electronics <noscript>you need to have javascript enabled</noscript></a>
</section> </section>
</section> </section>
...@@ -58,17 +62,17 @@ ...@@ -58,17 +62,17 @@
<ul> <ul>
<li> <li>
<img src="/static/staff/agarwal-mit-news-small.jpg"> <img src="/static/staff/agarwal-mit-news-small.jpg" alt="Anant Agarwal">
<h2>Anant Agarwal</h2> <h2>Anant Agarwal</h2>
<p>Director of MIT&rsquo;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&rsquo;s Smullin and Jamieson prizes for teaching and co-authored the course textbook &ldquo;Foundations of Analog and Digital Electronic Circuits.&rdquo;</p></li> <p>Director of MIT&rsquo;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&rsquo;s Smullin and Jamieson prizes for teaching and co-authored the course textbook &ldquo;Foundations of Analog and Digital Electronic Circuits.&rdquo;</p></li>
<li> <li>
<img src="/static/staff/gjs-small.jpg"> <img src="/static/staff/gjs-small.jpg" alt="Gerald Sussman">
<h2>Gerald Sussman</h2> <h2>Gerald Sussman</h2>
<p>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.</p></li> <p>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.</p></li>
<li> <li>
<img src="/static/staff/pmitros-small.jpg"> <img src="/static/staff/pmitros-small.jpg" alt="Piotr Mitros">
<h2>Piotr Mitros</h2> <h2>Piotr Mitros</h2>
<p>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.</p></li> <p>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.</p></li>
</ul> </ul>
...@@ -102,7 +106,7 @@ $(function() { ...@@ -102,7 +106,7 @@ $(function() {
if(json.success) { if(json.success) {
$('#enroll').html(json.value); $('#enroll').html(json.value);
} else { } else {
$('#enroll_error').html(json.value); $('#enroll_error').html(json.value).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
} }
} }
); );
......
<!-- TODO: http://docs.jquery.com/Plugins/Validation --> <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
${ error }
<div id="login_div"> <div id="login_div">
<header> <header>
<h1>Log in to MITx</h1> <h1>Log in to MITx</h1>
......
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<%block name="title"><title>MITx 6.002</title></%block> <%block name="title"><title>MITx 6.002x</title></%block>
<link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /> <link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
<link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" /> <link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/> <link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script> <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
...@@ -38,7 +37,7 @@ ...@@ -38,7 +37,7 @@
</head> </head>
<body> <body class="<%block name="bodyclass"/>">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
......
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<%block name="title"><title>MITx 6.002</title></%block> <title><%block name="title">MITx: MIT's new online learning initiative</%block></title>
<meta name="description" content="<%block name="description">MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world</%block>" />
<meta name="keywords" content="<%block name="keywords">MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>" />
<!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /--> <!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
<link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" /> <link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" /> <link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" />
<![endif]--> <![endif]-->
...@@ -68,7 +73,9 @@ function postJSON(url, data, callback) { ...@@ -68,7 +73,9 @@ function postJSON(url, data, callback) {
<nav> <nav>
<h1><a href="http://mitx.mit.edu/">MITx</a></h1> <h1><a href="http://mitx.mit.edu/">MITx</a></h1>
% if settings.COURSEWARE_ENABLED: % if settings.COURSEWARE_ENABLED:
<%block name="login_area">
<a rel="leanModal" class="login" href="#login">Log In</a> <a rel="leanModal" class="login" href="#login">Log In</a>
</%block>
% endif % endif
</nav> </nav>
</%block> </%block>
...@@ -94,13 +101,13 @@ function postJSON(url, data, callback) { ...@@ -94,13 +101,13 @@ function postJSON(url, data, callback) {
<li><a href="/t/tos.html">Terms of Service</a></li> <li><a href="/t/tos.html">Terms of Service</a></li>
<li><a href="/t/privacy.html">Privacy Policy</a></li> <li><a href="/t/privacy.html">Privacy Policy</a></li>
<li><a href="/t/honor.html">Honor Code</a></li> <li><a href="/t/honor.html">Honor Code</a></li>
<li><a href="/t/mitx_help.html">Help</a></li>
</ul> </ul>
</div> </div>
</footer> </footer>
% if settings.COURSEWARE_ENABLED: % if settings.COURSEWARE_ENABLED:
<div id="login" class="leanModal_box"><%include file="login.html" /></div> <div id="login" class="leanModal_box"><%include file="login.html" /></div>
<div id="enroll" class="leanModal_box" name="enroll"><%include file="create_account.html" /></div>
% endif % endif
<div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div> <div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
<div id="reset_done" class="leanModal_box"></div> <div id="reset_done" class="leanModal_box"></div>
...@@ -142,7 +149,7 @@ $(document).ready(function(){ ...@@ -142,7 +149,7 @@ $(document).ready(function(){
if (json.success) { if (json.success) {
$('#pwd_reset').html(json.value); $('#pwd_reset').html(json.value);
} else { } else {
$('#pwd_error').html(json.error); $('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
} }
} }
); );
......
<%inherit file="marketing.html" />
<%block name="login_area">
</%block>
<section class="subpage">
<div>
<h1> <i>MITx</i> Advances MIT&rsquo;s Vision for Online Learning</h1>
<p> 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 <i>MITx</i>, an initiative to
offer exciting, challenging and enriching courses to anyone,
anywhere, who has the motivation and ability to engage MIT&rsquo;s
educational content.</p>
<p> Ten years ago, MIT
launched <a href="http://ocw.mit.edu/index.htm">OpenCourseWare</a>,
which places online the course materials for substantially the entire
MIT curriculum, and was the genesis of today&rsquo;s worldwide
movement in free, open educational resources. <i>MITx</i> is the next step
in opening MIT&rsquo;s educational doors to the world. Through OCW and
<i>MITx</i>, MIT invites the world to join it in the passion, hard work and
thrill of learning and discovery.</p>
<h2><i>MITx</i> will e-publish interactive online courses that:</h2>
<ul>
<li>Empower students to learn at their own pace;</li>
<li>Offer online laboratories where students can experiment and apply their learning;</li>
<li>Connect students to each other in online discussion groups and wiki-based collaborative learning; </li>
<li>Challenge learners with MIT-rigor course materials; and</li>
<li>Assess individual student learning as the student progresses through the course.</li>
</ul>
<p> <i>MITx</i> students who demonstrate their mastery of a subject can earn
a certificate of completion awarded by <i>MITx</i>.</p>
<p> <i>MITx</i> 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
benefit of learners. Because the platform will be open-source and
scalable, adopters and users can continuously improve it, for the
benefit of everyone.</p>
<h2> Why Is MIT Creating <i>MITx</i>?</h2>
<p> Excellence in teaching and learning. MIT must always provide its
students the very best teaching and learning tools possible. MIT
began experimenting with online technologies in its educational
programs long before we launched OCW in 2001. We have only increased
our emphasis in recent years, as several MIT committees have studied
how MIT might enhance the learning experience of its students and
expand its impact worldwide through new online offerings.</p>
<p> These efforts, combined with those of numerous individual MIT
faculty members, confirmed MIT&rsquo;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 <i>MITx</i>
aspiration to capture and encourage the energy of our faculty in
creating new online teaching and learning tools. </p>
<p> Once up and running, <i>MITx</i> will be a laboratory for online
learning. Whether <i>MITx</i> learners are MIT&rsquo;s on-campus students,
university students elsewhere, or independent learners, <i>MITx</i> 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 <i>MITx</i> and our on-campus teaching. </p>
<p> Access to higher education. <i>MITx</i> will help shatter barriers to
education. The constraints of MIT&rsquo;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 <i>MITx</i>, MIT educational content can reach, augment, and enrich
the education and livelihood of many learners who cannot attend
MIT. </p>
<p> <i>MITx</i> does not provide a full MIT education. Our residential
campus is the heart of MIT&rsquo;s knowledge creation and
dissemination. MIT students enjoy a comprehensive curriculum and
distinct educational environment. Without MIT, there would be no
<i>MITx</i>. </p>
<p> Advancing the public good. <i>MITx</i> 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,
leading to capable citizens, innovation, job creation, economic
development, and broader welfare.</p>
<p> Today, as computation and Internet technologies enable higher
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. <i>MITx</i> is our contribution. </p>
</div>
</section>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</section> </section>
<section class="intro-video"> <section class="intro-video">
<a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a> <a id="video-overlay-link" rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" id="video-img" alt="Link to MITx introduction video" /><span> Watch intro video</span></a>
</section> </section>
</section> </section>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<li>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.</li> <li>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.</li>
</ul> </ul>
<p><strong>Press &amp; links:</strong> <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a></p> <p><strong>Press &amp; links:</strong> <a href="/6002x-press-release.html">6.002x Press Release</a>, <a href="/6002x-faq.html">6.002x FAQ</a>, <a href="/mitx-overview.html">MITx overview</a>, <a href="http://www.boston.com/news/local/massachusetts/articles/2011/12/19/mit_to_launch_online_only_graded_courses_free_to_all/?page=full" target="_blank">Boston Globe</a>, <a href="http://www.nytimes.com/2011/12/19/education/mit-expands-free-online-courses-offering-certificates.html?_r=3&hpw=" target="_blank">New York Times</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-education-initiative-1219.html" target="_blank">MIT Press Release</a>, <a href="http://web.mit.edu/newsoffice/2011/mitx-faq-1219" target="_blank"><em>MITx</em> FAQ</a>, <a href="http://ocw.mit.edu/index.htm" target="_blank">OpenCourseWare</a></p>
</section> </section>
</section> </section>
...@@ -40,20 +40,40 @@ ...@@ -40,20 +40,40 @@
</hgroup> </hgroup>
<p> <p>
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll</a> <a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll <span class="arrow">&#8227;</span></a>
</p> </p>
<p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p> <p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;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 <em>MITx</em>.</p>
</section> </section>
</section> </section>
<div id="video-overlay" class="leanModal_box"> <div id="video-overlay" class="leanModal_box">
<iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe> <iframe id="player" type="text/html" width="560" height="390" src="http://www.youtube.com/embed/p2Q6BrNhdh8?enablejsapi=1" frameborder="0">
</iframe>
</div> </div>
<script> <script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
});
}
$(function() { $(function() {
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$("a#video-overlay-link").click(function(){
player.playVideo();
$("a.modal_close, #lean_overlay").click(function(){
player.pauseVideo();
});
});
// TODO: Clean up as per http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery // TODO: Clean up as per http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
/* Handles when the user hits 'enroll'. Grabs form data. Does AJAX. /* Handles when the user hits 'enroll'. Grabs form data. Does AJAX.
...@@ -89,7 +109,7 @@ $(function() { ...@@ -89,7 +109,7 @@ $(function() {
}); });
}) })
/*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */ /*$("sregion"+$("[id^=spinner_]")[1].id.substring(7)) */
}); });
</script> </script>
<%inherit file="marketing.html" />
<section class="tos">
<div>
<section class="help-email">
<h2>Help &amp; Feedback</h2>
<p> If run into problems signing up for the web site which you
cannot resolve on your own, please check
the <a href="http://mitx.mit.edu/6002x-faq.html">Frequently
Asked Questions</a>. If you find a bug or other issues, you can
reach us at:</p>
<dl>
<dt>System-related questions</dt>
<dd><a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a></dd>
<dt>Content-related questions</dt>
<dd><a href="mailto:content@mitx.mit.edu">content@mitx.mit.edu</a></dd>
<dt>Bug reports</dt>
<dd><a href="mailto:bugs@mitx.mit.edu">bugs@mitx.mit.edu</a></dd>
<dt>Suggestions</dt>
<dd><a href="mailto:suggestions@mitx.mit.edu">suggestions@mitx.mit.edu</a></dd>
</dl>
<p> Please bear in mind that while we read them, we do not expect to
have time to respond to all e-mails.</p>
</section>
</div>
</section>
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
</hgroup> </hgroup>
<nav class="${active_page}"> <nav class="${active_page}">
<ul class="coursenav"> <ul class="coursenav">
<li class="courseware"><a href="/courseware">Courseware</a></li> <li class="courseware"><a href="/courseware">Courseware</a></li>
<li class="info"><a href="/info">Course Info</a></li> <li class="info"><a href="/info">Course Info</a></li>
......
...@@ -13,11 +13,15 @@ function ${ id }_load() { ...@@ -13,11 +13,15 @@ function ${ id }_load() {
postJSON('/modx/problem/${ id }/problem_check', postJSON('/modx/problem/${ id }/problem_check',
submit_data, submit_data,
function(json) { function(json) {
switch(json.success) {
if(json['success'] == 'syntax') case 'incorrect': // Worked, but answer not
alert('Syntax error'); case 'correct':
else
${ id }_load(); ${ id }_load();
//alert("!!"+json.success);
break;
default:
alert(json.success);
}
}); });
log_event('problem_check', submit_data); log_event('problem_check', submit_data);
}); });
......
...@@ -91,49 +91,45 @@ $(function() { ...@@ -91,49 +91,45 @@ $(function() {
<div id="grade-detail-graph" style="width:650px;height:200px;"></div> <div id="grade-detail-graph" style="width:650px;height:200px;"></div>
<ol> <ol class="chapters">
<% %for chapter in chapters:
lastChapter = None %if not chapter['chapter'] == "hidden":
%>
% for hw in homeworks:
<li> <li>
%if hw['chapter'] != lastChapter: <h2><a href="${reverse('courseware_chapter', args=format_url_params([chapter['course'], chapter['chapter']])) }">
<h2><a href="${reverse('courseware_chapter', args=format_url_params([hw['course'], hw['chapter']])) }"> ${ chapter['chapter'] }</a></h2>
${ hw['chapter'] }</a></h2>
<% lastChapter = hw['chapter'] %>
%else:
<h2>-</h2>
%endif
<div class="scores"> <ol class="sections">
<h3><a href="${reverse('courseware_section', args=format_url_params([hw['course'], hw['chapter'], hw['section']])) }"> %for section in chapter['sections']:
<li>
<% <%
earned = hw['section_total'][0] earned = section['section_total'][0]
total = hw['section_total'][1] total = section['section_total'][1]
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else "" percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 else ""
%> %>
${ hw['section'] }</a> ${"({0}/{1}) {2}".format( earned, total, percentageString )}</h3>
${hw['subtitle']}
% if 'due' in hw and hw['due']!="":
due ${hw['due']}
% endif
<ul> <h3><a href="${reverse('courseware_section', args=format_url_params([chapter['course'], chapter['chapter'], section['section']])) }">
%if len(hw['scores']) > 0: ${ section['section'] }</a> ${"({0}/{1}) {2}".format( earned, total, percentageString )}</h3>
%if hw['graded']: ${section['subtitle']}
Problem Scores: %if 'due' in section and section['due']!="":
%else: due ${section['due']}
Practice Scores:
%endif
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
%endif %endif
</ul>
</div> %if len(section['scores']) > 0:
</li> <ol class="scores">
% endfor ${ "Problem Scores: " if section['graded'] else "Practice Scores: "}
%for score in section['scores']:
<li class="score">${ score[0] }/${ score[1] }</li>
%endfor
</ol> </ol>
%endif
</li> <!--End section-->
%endfor
</ol> <!--End sections-->
</li> <!--End chapter-->
%endif
%endfor
</ol> <!--End chapters-->
</section> </section>
<section class="user-info"> <section class="user-info">
......
...@@ -127,7 +127,7 @@ $(function () { ...@@ -127,7 +127,7 @@ $(function () {
var plot = $.plot($grade_detail_graph, series, options); var plot = $.plot($grade_detail_graph, series, options);
var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}}); var o = plot.pointOffset({x: ${overviewBarX} , y: ${totalScore}});
$grade_detail_graph.append('<div style="position:absolute;left:' + (o.left - 12) + 'px;top:' + (o.top - 20) + 'px">${"{:.0%}".format(totalScore)}</div>'); $grade_detail_graph.append('<div style="position:absolute;left:' + (o.left - 12) + 'px;top:' + (o.top - 20) + 'px">${"{totalscore:.0%}".format(totalscore=totalScore)}</div>');
// //Rotate the x-axis labels // //Rotate the x-axis labels
// var rotateValue = "rotate(-60deg)"; // var rotateValue = "rotate(-60deg)";
......
{% load humanize %}
Someone, hopefully you, signed up for a new account at djangoproject.com using this email address. If it was you, and you'd like to activate and use your account, click the link below or copy and paste it into your web browser's address bar:
http://127.0.0.1:8000/accounts/activate/{{ activation_key }}/
If you didn't request this, you don't need to do anything; you won't receive any more email from us, and the account will expire automatically in {{ expiration_days|apnumber }} days.
Activate your djangoproject.com account - you have {{ expiration_days }} days!
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<h1>Password reset unsuccessful</h1> <h1>Password reset unsuccessful</h1>
<p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p> <p>The password reset link was invalid, possibly because the link has already been used. Please request a new password reset.</p>
{% endif %} {% endif %}
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% trans "Please go to the following page and choose a new password:" %} {% trans "Please go to the following page and choose a new password:" %}
{% block reset_link %} {% block reset_link %}
https://6002x.mitx.mit.edu{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %} {{ protocol }}://{{ site_name }}{% url 'django.contrib.auth.views.password_reset_confirm' uidb36=uid token=token %}
{% endblock %} {% endblock %}
{% trans "Your username, in case you've forgotten:" %} {{ user.username }} {% trans "Your username, in case you've forgotten:" %} {{ user.username }}
......
No preview for this file type
...@@ -5,7 +5,13 @@ $ gem install sass ...@@ -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 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 $ 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.
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();
}
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;
}
}
}
}
}
}
...@@ -3,37 +3,88 @@ div.info-wrapper { ...@@ -3,37 +3,88 @@ div.info-wrapper {
section.updates { section.updates {
@extend .content; @extend .content;
> h1 {
@extend .top-header;
}
> p {
margin-bottom: lh();
}
ol {
list-style: none;
li {
padding-bottom: lh(.5);
margin-bottom: lh(.5);
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
h2 {
float: left;
width: flex-grid(2, 9);
margin: 0 flex-gutter() 0 0;
}
p {
float: left;
width: flex-grid(7, 9);
margin-bottom: 0;
}
}
}
} }
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
@include border-radius(0px 4px 0px 4px); @include border-radius(0 4px 4px 0);
border-right: 0; border-right: 0;
border-left: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3;
h1 { h1 {
padding: 0 lh(); padding: 0 lh();
font-size: 18px;
} }
ol { ol {
list-style: none; list-style: none;
li { li {
h2 { @include box-shadow(0 1px 0 #eee);
padding: 0 lh(); border-bottom: 1px solid #d3d3d3;
@extend .clearfix;
p {
padding: 7px lh();
margin: 0;
text-transform: none;
letter-spacing: 0;
font-size: $body-font-size;
&:hover {
background: #efefef;
}
a {
display: inline;
padding: 0;
&:hover {
text-decoration: underline;
background: none;
}
}
} }
a { a {
@include box-shadow(0 1px 0 #eee);
@include transition(); @include transition();
border-bottom: 1px solid #d3d3d3;
color: lighten($text-color, 10%); color: lighten($text-color, 10%);
display: block; display: block;
padding: 7px lh(); padding: 7px lh();
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@include box-shadow(0 1px 0 #fff);
background: #efefef; background: #efefef;
} }
} }
......
/*
* 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
#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;}
...@@ -9,7 +9,8 @@ div.profile-wrapper { ...@@ -9,7 +9,8 @@ div.profile-wrapper {
border-right: 0; border-right: 0;
h1 { h1 {
padding: lh(); padding:0 lh();
font-size: 18px;
} }
ul { ul {
...@@ -52,31 +53,54 @@ div.profile-wrapper { ...@@ -52,31 +53,54 @@ div.profile-wrapper {
section.course-info { section.course-info {
@extend .content; @extend .content;
ol { > h1 {
@extend .top-header;
}
> ol {
list-style: none; list-style: none;
border-top: 1px solid #e3e3e3;
margin-top: lh();
> li { > li {
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
padding: lh() 0; padding: lh() 0;
width: 100%;
display: table;
@extend .clearfix; @extend .clearfix;
h2 { h2 {
float: left; display: table-cell;
padding: 0; padding: 0;
margin: 0; margin: 0;
width: flex-grid(2, 9); 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 { ol.sections {
float: left; padding-left: flex-gutter(9);
display: table-cell;
list-style: none;
width: flex-grid(7, 9); width: flex-grid(7, 9);
> li {
padding:0 0 lh() 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: 0;
}
h3 { h3 {
color: #666; color: #666;
} }
ul { ol {
list-style: none; list-style: none;
li { li {
...@@ -87,6 +111,7 @@ div.profile-wrapper { ...@@ -87,6 +111,7 @@ div.profile-wrapper {
} }
} }
} }
}
} }
} }
...@@ -74,6 +74,13 @@ div.book-wrapper { ...@@ -74,6 +74,13 @@ div.book-wrapper {
} }
} }
} }
&.bottom-nav {
margin-top: lh();
margin-bottom: -(lh());
border-bottom: 0;
border-top: 1px solid #EDDFAA;
}
} }
section.page { section.page {
......
/*
----------------------------------------------------------------------------------------
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; }
@import "bourbon/bourbon"; @import "bourbon/bourbon";
@import "reset";
@import "font-face";
// Base layout // Base layout
@import "base-variables", "base-extends", "base"; @import "base/reset", "base/font-face";
@import "layout"; @import "base/variables", "base/functions", "base/extends", "base/base";
@import "leanmodal"; @import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
@import "jquery-ui-1.8.16.custom";
// pages // pages
@import "courseware", "courseware-video", "courseware-sequence-nav"; @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav";
@import "textbook"; @import "textbook";
@import "info"; @import "info";
@import "profile"; @import "profile";
@import "wiki-basic-html", "wiki-create", "wiki"; @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
@import "activation";
@import "help"; @import "help";
@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar";
// left over @import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar", "discussion/modals", "discussion/profile";
// @import "theme";
// @import "local";
...@@ -29,6 +29,11 @@ em { ...@@ -29,6 +29,11 @@ em {
font-style: italic; font-style: italic;
} }
img {
max-width: 100%;
height: auto;
}
#{$all-text-inputs}, textarea { #{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff); @include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff); @include linear-gradient(#eee, #fff);
......
...@@ -19,6 +19,13 @@ ...@@ -19,6 +19,13 @@
} }
} }
h1.top-header {
margin: (-(lh())) (-(lh())) lh();
padding: lh();
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
}
.button { .button {
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc); @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%)); @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
...@@ -29,6 +36,8 @@ ...@@ -29,6 +36,8 @@
font: bold $body-font-size $body-font-family; font: bold $body-font-size $body-font-family;
cursor: pointer; cursor: pointer;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-shadow: none;
text-decoration: none;
&:hover, &:focus { &:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc); @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
...@@ -100,6 +109,10 @@ ...@@ -100,6 +109,10 @@
} }
} }
} }
a.button {
text-decoration: none;
}
} }
.topbar { .topbar {
......
// Functions
//---------------------------------------- //
// Flexible grid // Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) { @function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter; $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
...@@ -14,8 +11,12 @@ ...@@ -14,8 +11,12 @@
@return percentage($gutter / $container-width); @return percentage($gutter / $container-width);
} }
// Percentage of container calculator
@function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width);
}
// Line-height // Line-height
@function lh($amount: 1) { @function lh($amount: 1) {
@return $lh * $amount; @return $body-line-height * $amount;
} }
// 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 // Variables
// ---------------------------------------- // // ---------------------------------------- //
......
// Custom Functions // Custom Functions
@import "functions/deprecated-webkit-gradient"; @import "functions/deprecated-webkit-gradient";
@import "functions/golden-ratio";
@import "functions/grid-width"; @import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/tint-shade"; @import "functions/tint-shade";
// CSS3 Mixins // CSS3 Mixins
......
...@@ -5,6 +5,23 @@ ...@@ -5,6 +5,23 @@
$style: simple; $style: simple;
} }
// 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);
}
}
// Colored button
@else {
@if $style == simple { @if $style == simple {
@include simple($base-color); @include simple($base-color);
} }
...@@ -16,13 +33,17 @@ ...@@ -16,13 +33,17 @@
@else if $style == pill { @else if $style == pill {
@include pill($base-color); @include pill($base-color);
} }
}
} }
@mixin simple ($base-color) {
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); // Simple Button
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); //************************************************************************//
@mixin simple($base-color, $grayscale: false) {
$color: hsl(0, 0, 100%); $color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); $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%); $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
@if lightness($base-color) > 70% { @if lightness($base-color) > 70% {
...@@ -30,6 +51,13 @@ ...@@ -30,6 +51,13 @@
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); $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; border: 1px solid $border;
@include border-radius (3px); @include border-radius (3px);
@include box-shadow (inset 0 1px 0 0 $inset-shadow); @include box-shadow (inset 0 1px 0 0 $inset-shadow);
...@@ -44,8 +72,14 @@ ...@@ -44,8 +72,14 @@
&:hover { &:hover {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); $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%); $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); @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer; cursor: pointer;
...@@ -56,27 +90,44 @@ ...@@ -56,27 +90,44 @@
$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%); $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; 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); @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); // Shiny Button
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); //************************************************************************//
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); @mixin shiny($base-color, $grayscale: false) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$color: hsl(0, 0, 100%); $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); $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); $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% { @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%); $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: 1px solid $border;
border-bottom: 1px solid $border-bottom; border-bottom: 1px solid $border-bottom;
@include border-radius(5px); @include border-radius(5px);
...@@ -85,9 +136,10 @@ ...@@ -85,9 +136,10 @@
display: inline; display: inline;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 7px 20px 8px; padding: 7px 20px 8px;
text-decoration: none;
text-align: center; text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
&:hover { &:hover {
...@@ -96,24 +148,41 @@ ...@@ -96,24 +148,41 @@
$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); $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; cursor: pointer;
@include linear-gradient(top, $first-stop-hover 0%,
$second-stop-hover 50%,
$third-stop-hover 50%,
$fourth-stop-hover 100%);
} }
&:active { &:active {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); $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); @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%); // Pill Button
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); //************************************************************************//
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); @mixin pill($base-color, $grayscale: false) {
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$color: hsl(0, 0, 100%); $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%); $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%); $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
@if lightness($base-color) > 70% { @if lightness($base-color) > 70% {
...@@ -121,7 +190,15 @@ ...@@ -121,7 +190,15 @@
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); $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: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom; border-color: $border-top $border-sides $border-bottom;
@include border-radius(16px); @include border-radius(16px);
...@@ -131,6 +208,7 @@ ...@@ -131,6 +208,7 @@
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: 3px 16px 5px; padding: 3px 16px 5px;
text-align: center; text-align: center;
text-shadow: 0 -1px 1px $text-shadow; text-shadow: 0 -1px 1px $text-shadow;
...@@ -138,18 +216,28 @@ ...@@ -138,18 +216,28 @@
&:hover { &:hover {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%); $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%); $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%); $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%); $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
@include linear-gradient ($base-color-hover, $stop-gradient-hover); @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);
}
border: 1px solid $border-top; border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom; border-color: $border-top $border-sides $border-bottom;
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer; cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
text-shadow: 0 -1px 1px $text-shadow-hover; text-shadow: 0 -1px 1px $text-shadow-hover;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
} }
...@@ -161,6 +249,14 @@ ...@@ -161,6 +249,14 @@
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); $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%); $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; background: $active-color;
border: 1px solid $border-active; border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active; border-bottom: 1px solid $border-bottom-active;
...@@ -168,3 +264,4 @@ ...@@ -168,3 +264,4 @@
text-shadow: 0 -1px 1px $text-shadow-active; text-shadow: 0 -1px 1px $text-shadow-active;
} }
} }
$georgia: Georgia, Cambria, "Times New Roman", Times, serif; $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, 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; $verdana: Verdana, Geneva, sans-serif;
// http://www.w3.org/TR/css3-animations/#the-animation-name-property- // 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. // 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, @mixin animation-name ($name-1,
$name-2: false, $name-3: false, $name-2: false, $name-3: false,
$name-4: false, $name-5: false, $name-4: false, $name-5: false,
...@@ -127,8 +143,7 @@ ...@@ -127,8 +143,7 @@
} }
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable. // Deprecated
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
@mixin animation-basic ($name, $time: 0, $motion: ease) { @mixin animation-basic ($name, $time: 0, $motion: ease) {
$length-of-name: length($name); $length-of-name: length($name);
$length-of-time: length($time); $length-of-time: length($time);
...@@ -151,11 +166,6 @@ ...@@ -151,11 +166,6 @@
} @else { } @else {
@include animation-timing-function( $motion); @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;
}
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
$G3: false, $G4: false, $G3: false, $G4: false,
$G5: false, $G6: false, $G5: false, $G6: false,
$G7: false, $G8: false, $G7: false, $G8: false,
$G9: false, $G10: false) { $G9: false, $G10: false,
$fallback: false) {
// Detect what type of value exists in $pos // Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1)); $pos-type: type-of(nth($pos, 1));
...@@ -15,7 +16,15 @@ ...@@ -15,7 +16,15 @@
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); $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: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background-image: -moz-linear-gradient($pos, $full); background-image: -moz-linear-gradient($pos, $full);
...@@ -27,5 +36,6 @@ ...@@ -27,5 +36,6 @@
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. // 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);
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); // @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%); // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
@function golden-ratio($value, $increment) { @function modular-scale($value, $increment, $ratio) {
@if $increment > 0 { @if $increment > 0 {
@for $i from 1 through $increment { @for $i from 1 through $increment {
$value: ($value * 1.618); $value: ($value * $ratio);
} }
} }
@if $increment < 0 { @if $increment < 0 {
$increment: abs($increment); $increment: abs($increment);
@for $i from 1 through $increment { @for $i from 1 through $increment {
$value: ($value / 1.618); $value: ($value / $ratio);
} }
} }
...@@ -17,15 +17,24 @@ ...@@ -17,15 +17,24 @@
// div { // div {
// Increment Up GR with positive value // Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
// //
// Increment Down GR with negative value // Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
// //
// Can be used with ceil(round up) or floor(round down) // Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
// } // }
// //
// modularscale.com // 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 // goldenratiocalculator.com
require "bourbon/generator"
module Bourbon module Bourbon
if defined?(Rails) if defined?(Rails)
class Engine < ::Rails::Engine class Engine < ::Rails::Engine
......
...@@ -5,87 +5,17 @@ div.course-wrapper { ...@@ -5,87 +5,17 @@ div.course-wrapper {
list-style: none; list-style: none;
} }
div#accordion { .tran {
@extend .sidebar; @include transition( all, .2s, $ease-in-out-quad);
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;
}
}
}
}
}
} }
section.course-content { section.course-content {
@extend .content; @extend .content;
h1 {
@extend .top-header;
}
p { p {
margin-bottom: lh(); margin-bottom: lh();
...@@ -95,6 +25,12 @@ div.course-wrapper { ...@@ -95,6 +25,12 @@ div.course-wrapper {
} }
} }
ul {
li {
margin-bottom: lh(.5);
}
}
.problem-set { .problem-set {
position: relative; position: relative;
@extend .clearfix; @extend .clearfix;
...@@ -180,7 +116,6 @@ div.course-wrapper { ...@@ -180,7 +116,6 @@ div.course-wrapper {
} }
} }
section.problems-wrapper, div#seq_content { section.problems-wrapper, div#seq_content {
@extend .problem-set; @extend .problem-set;
} }
...@@ -195,6 +130,15 @@ div.course-wrapper { ...@@ -195,6 +130,15 @@ div.course-wrapper {
} }
} }
div#seq_content {
h1 {
background: none;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
ol.vert-mod { ol.vert-mod {
> li { > li {
@extend .clearfix; @extend .clearfix;
...@@ -211,4 +155,34 @@ div.course-wrapper { ...@@ -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();
}
}
} }
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;
}
}
}
}
}
}
}
...@@ -88,6 +88,7 @@ section.course-content { ...@@ -88,6 +88,7 @@ section.course-content {
li { li {
float: left; float: left;
margin-bottom: 0;
a { a {
@include box-shadow(1px 0 0 #555); @include box-shadow(1px 0 0 #555);
......
div.answer-controls { div.answer-controls {
@include box-sizing(border-box); @include box-sizing(border-box);
@extend div.question-controls;
display: inline-block; display: inline-block;
margin: 20px 0; margin: 0 0 15px;
padding-left: flex-grid(1.1); padding-left: flex-grid(1.1);
width: 100%;
div.answer-count {
display: inline-block;
float: left;
}
div.answer-sort { div.answer-sort {
@extend div.question-sort; float: right;
margin-left: flex-gutter();
nav {
@extend .action-link;
float: right;
margin-top: 34px;
a {
&.on span{
font-weight: bold;
} }
div.answer-count { &:before {
@extend div.question-count; content: '|';
color: darken(#F6EFD4, 10%);
font-size: 16px;
}
}
}
} }
} }
...@@ -44,7 +64,48 @@ div.answer-block { ...@@ -44,7 +64,48 @@ div.answer-block {
} }
div.answered-by-owner { div.answered-by-owner {
color: darken($mit-red, 20%); p {
font-style: italic;
color: #656565;
}
div.comments-container {
color: #555;
}
}
div.deleted {
p {
color: $mit-red;
}
}
}
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;
}
} }
} }
...@@ -56,17 +117,27 @@ div.answer-own { ...@@ -56,17 +117,27 @@ div.answer-own {
} }
div.answer-actions { div.answer-actions {
text-align: right;
margin: 0; margin: 0;
padding: 0; padding:8px 8px 8px 0;
text-align: right;
border-top: 1px solid #efefef;
span.sep { span.sep {
color: #ddd; color: #EDDFAA;
} }
a { a {
cursor: pointer;
text-decoration: none; text-decoration: none;
&.question-delete {
color: $mit-red;
} }
a.question-edit, a.permant-link {
color: #999; &.question-edit, &.permant-link {
color: darken(#F6EFD4, 45%);;
}
} }
} }
// Original styles // original styles
// body { // body {
// background: #FFF; // background: #fff;
// font-size: 14px; // font-size: 14px;
// line-height: 150%; // line-height: 150%;
// margin: 0; // margin: 0;
// padding: 0; // padding: 0;
// color: #000; // color: #000;
// font-family: Arial; } // font-family: arial; }
// div { // div {
// margin: 0 auto; // margin: 0 auto;
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
// input, select { // input, select {
// vertical-align: middle; // 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; } // margin-left: 0px; }
// textarea:focus, input:focus { // textarea:focus, input:focus {
...@@ -73,23 +73,23 @@ ...@@ -73,23 +73,23 @@
// margin: 3px 3px 4px 3px; } // margin: 3px 3px 4px 3px; }
// pre { // pre {
// font-family: Consolas, Monaco, Liberation Mono, Lucida Console, Monospace; // font-family: consolas, monaco, liberation mono, lucida console, monospace;
// font-size: 100%; // font-size: 100%;
// margin-bottom: 10px; // margin-bottom: 10px;
// background-color: #F5F5F5; // background-color: #f5f5f5;
// padding-left: 5px; // padding-left: 5px;
// padding-top: 5px; // padding-top: 5px;
// padding-bottom: 20px; } // padding-bottom: 20px; }
// code { // code {
// font-family: Consolas, Monaco, Liberation Mono, Lucida Console, Monospace; // font-family: consolas, monaco, liberation mono, lucida console, monospace;
// font-size: 100%; } // font-size: 100%; }
// blockquote { // blockquote {
// margin-bottom: 10px; // margin-bottom: 10px;
// margin-right: 15px; // margin-right: 15px;
// padding: 10px 0px 1px 10px; // padding: 10px 0px 1px 10px;
// background-color: #F5F5F5; } // background-color: #f5f5f5; }
// * html { // * html {
// .clearfix, .paginator { // .clearfix, .paginator {
...@@ -107,9 +107,9 @@ ...@@ -107,9 +107,9 @@
// height: 0; // height: 0;
// visibility: hidden; } // visibility: hidden; }
.badges a { // .badges a {
color: #763333; // color: #763333;
text-decoration: underline; } // text-decoration: underline; }
// a:hover { // a:hover {
// text-decoration: underline; } // text-decoration: underline; }
...@@ -148,14 +148,14 @@ body.user-messages { ...@@ -148,14 +148,14 @@ body.user-messages {
text-align: center; text-align: center;
background-color: #f5dd69; background-color: #f5dd69;
border-top: #fff 1px solid; border-top: #fff 1px solid;
font-family: 'Yanone Kaffeesatz',sans-serif; font-family: 'yanone kaffeesatz',sans-serif;
p.notification { p.notification {
margin-top: 6px; margin-top: 6px;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 16px; font-size: 16px;
color: #424242; } } color: #424242; } }
#closeNotify { #closenotify {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 7px; top: 7px;
...@@ -172,7 +172,7 @@ body.user-messages { ...@@ -172,7 +172,7 @@ body.user-messages {
#header { #header {
margin-top: 0px; margin-top: 0px;
background: #16160f; background: #16160f;
font-family: 'Yanone Kaffeesatz',sans-serif; } font-family: 'yanone kaffeesatz',sans-serif; }
/*.content-wrapper { /*.content-wrapper {
width: 960px; width: 960px;
...@@ -185,7 +185,7 @@ body.user-messages { ...@@ -185,7 +185,7 @@ body.user-messages {
width: auto; width: auto;
float: left; } float: left; }
#userToolsNav { #usertoolsnav {
height: 20px; height: 20px;
padding-bottom: 5px; padding-bottom: 5px;
a { a {
...@@ -208,7 +208,7 @@ body.user-messages { ...@@ -208,7 +208,7 @@ body.user-messages {
margin: 0; margin: 0;
text-decoration: none; } } text-decoration: none; } }
#metaNav { #metanav {
float: right; float: right;
a { a {
color: #e2e2ae; color: #e2e2ae;
...@@ -225,42 +225,42 @@ body.user-messages { ...@@ -225,42 +225,42 @@ body.user-messages {
text-decoration: underline; } text-decoration: underline; }
&.on { &.on {
font-weight: bold; font-weight: bold;
color: #FFF; color: #fff;
text-decoration: none; } text-decoration: none; }
&.special { &.special {
font-size: 18px; font-size: 18px;
color: #B02B2C; color: #b02b2c;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; } } } text-decoration: underline; } } }
#navTags { #navtags {
background: -50px -5px url(../images/sprites.png) no-repeat; } background: -50px -5px url(../images/sprites.png) no-repeat; }
#navUsers { #navusers {
background: -125px -5px url(../images/sprites.png) no-repeat; } background: -125px -5px url(../images/sprites.png) no-repeat; }
#navBadges { #navbadges {
background: -210px -5px url(../images/sprites.png) no-repeat; } } background: -210px -5px url(../images/sprites.png) no-repeat; } }
// #header { // #header {
// &.with-logo #userToolsNav { // &.with-logo #usertoolsnav {
// position: absolute; // position: absolute;
// bottom: 0; // bottom: 0;
// right: 0px; } // right: 0px; }
// &.without-logo { // &.without-logo {
// #userToolsNav { // #usertoolsnav {
// float: left; // float: left;
// margin-top: 7px; } // margin-top: 7px; }
// #metaNav { // #metanav {
// margin-bottom: 7px; } } } // margin-bottom: 7px; } } }
// #secondaryHeader { // #secondaryheader {
// height: 55px; // height: 55px;
// background: #e9e9e1; // background: #e9e9e1;
// border-bottom: #d3d3c2 1px solid; // border-bottom: #d3d3c2 1px solid;
// border-top: #fcfcfc 1px solid; // border-top: #fcfcfc 1px solid;
// margin-bottom: 10px; // margin-bottom: 10px;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// #homeButton { // #homebutton {
// border-right: #afaf9e 1px solid; // border-right: #afaf9e 1px solid;
// background: -6px -36px url(../images/sprites.png) no-repeat; // background: -6px -36px url(../images/sprites.png) no-repeat;
// height: 55px; // height: 55px;
...@@ -269,7 +269,7 @@ body.user-messages { ...@@ -269,7 +269,7 @@ body.user-messages {
// float: left; // float: left;
// &:hover { // &:hover {
// background: -51px -36px url(../images/sprites.png) no-repeat; } } // background: -51px -36px url(../images/sprites.png) no-repeat; } }
// #scopeWrapper { // #scopewrapper {
// width: 688px; // width: 688px;
// float: left; // float: left;
// a { // a {
...@@ -286,7 +286,7 @@ body.user-messages { ...@@ -286,7 +286,7 @@ body.user-messages {
// .ask-message { // .ask-message {
// font-size: 24px; } } } // font-size: 24px; } } }
#searchBar { #searchbar {
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
width: 412px; width: 412px;
...@@ -294,28 +294,28 @@ body.user-messages { ...@@ -294,28 +294,28 @@ body.user-messages {
float: right; float: right;
height: 42px; height: 42px;
margin: 6px 0px 0px 15px; margin: 6px 0px 0px 15px;
.searchInput, .searchInputCancelable { .searchinput, .searchinputcancelable {
font-size: 30px; font-size: 30px;
height: 40px; height: 40px;
font-weight: 300; font-weight: 300;
background: #FFF; background: #fff;
border: 0px; border: 0px;
color: #484848; color: #484848;
padding-left: 10px; padding-left: 10px;
font-family: Arial; font-family: arial;
vertical-align: middle; } vertical-align: middle; }
.searchInput { .searchinput {
width: 352px; } width: 352px; }
.searchInputCancelable { .searchinputcancelable {
width: 317px; } width: 317px; }
.logoutsearch { .logoutsearch {
width: 337px; } width: 337px; }
.searchBtn { .searchbtn {
font-size: 10px; font-size: 10px;
color: #666; color: #666;
background-color: #eee; background-color: #eee;
height: 42px; height: 42px;
border: #FFF 1px solid; border: #fff 1px solid;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
float: right; float: right;
...@@ -325,7 +325,7 @@ body.user-messages { ...@@ -325,7 +325,7 @@ body.user-messages {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: -146px -36px url(../images/sprites.png) no-repeat; } } background: -146px -36px url(../images/sprites.png) no-repeat; } }
.cancelSearchBtn { .cancelsearchbtn {
font-size: 30px; font-size: 30px;
color: #ce8888; color: #ce8888;
background: #fff; background: #fff;
...@@ -338,14 +338,14 @@ body.user-messages { ...@@ -338,14 +338,14 @@ body.user-messages {
&:hover { &:hover {
color: #d84040; } } } color: #d84040; } } }
body.anon #searchBar { body.anon #searchbar {
width: 500px; width: 500px;
.searchInput { .searchinput {
width: 440px; } width: 440px; }
.searchInputCancelable { .searchinputcancelable {
width: 405px; } } width: 405px; } }
#askButton { #askbutton {
background: url(../images/bigbutton.png) repeat-x bottom; background: url(../images/bigbutton.png) repeat-x bottom;
line-height: 44px; line-height: 44px;
text-align: center; text-align: center;
...@@ -371,18 +371,18 @@ body.anon #searchBar { ...@@ -371,18 +371,18 @@ body.anon #searchBar {
-moz-text-shadow: 0px 1px 0px #c6d9dd; -moz-text-shadow: 0px 1px 0px #c6d9dd;
-webkit-text-shadow: 0px 1px 0px #c6d9dd; } } -webkit-text-shadow: 0px 1px 0px #c6d9dd; } }
/*#ContentLeft { /*#contentleft {
width: 730px; width: 730px;
float: left; float: left;
position: relative; position: relative;
padding-bottom: 10px; } padding-bottom: 10px; }
#ContentRight { #contentright {
width: 200px; width: 200px;
float: right; float: right;
padding: 0 0px 10px 0px; }*/ padding: 0 0px 10px 0px; }*/
#ContentFull { #contentfull {
float: left; float: left;
width: 960px; } width: 960px; }
...@@ -396,62 +396,62 @@ body.anon #searchBar { ...@@ -396,62 +396,62 @@ body.anon #searchBar {
text-align: right; text-align: right;
margin: 0; } } margin: 0; } }
h2 { h2 {
padding-left: 0; // padding-left: 0;
/*background: #eceeeb;*/ // /*background: #eceeeb;*/
height: 30px; // height: 30px;
line-height: 30px; // line-height: 30px;
/*text-align: right;*/ // /*text-align: right;*/
/*font-size: 18px !important;*/ // /*font-size: 18px !important;*/
font-weight: normal; // // font-weight: normal;
color: #656565; // // color: #656565;
/*padding-right: 10px;*/ // /*padding-right: 10px;*/
/*margin-bottom: 10px;*/ // /*margin-bottom: 10px;*/
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/ // /*font-family: 'yanone kaffeesatz',sans-serif;*/
} }
h3 { // h3 {
/*color: #4a757f;*/ // /*color: #4a757f;*/
/*font-size: 18px;*/ // /*font-size: 18px;*/
text-align: left; // text-align: left;
font-weight: normal; // font-weight: normal;
/*font-family: 'Yanone Kaffeesatz',sans-serif;*/ // /*font-family: 'yanone kaffeesatz',sans-serif;*/
padding-left: 0px; } // padding-left: 0px; }
.contributorback { // .contributorback {
background: #eceeeb url(../images/contributorsback.png) no-repeat center left; } // background: #eceeeb url(../images/contributorsback.png) no-repeat center left; }
// label { // label {
// color: #707070; // color: #707070;
// font-size: 15px; // font-size: 15px;
// display: block; // display: block;
// float: right; // float: right;
// text-align: left; // text-align: left;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// width: 80px; // width: 80px;
// margin-right: 18px; } // margin-right: 18px; }
// #displayTagFilterControl label { // #displaytagfiltercontrol label {
// width: 160px; } // width: 160px; }
ul { // ul {
margin-left: 22px; } // margin-left: 22px; }
li { // li {
list-style-type: disc; // list-style-type: disc;
font-size: 13px; // font-size: 13px;
line-height: 20px; // line-height: 20px;
margin-bottom: 10px; // margin-bottom: 10px;
color: #707070; } // color: #707070; }
ul.tags { // ul.tags {
list-style: none; // list-style: none;
margin: 0; // margin: 0;
padding: 0; // padding: 0;
line-height: 170%; // line-height: 170%;
display: block; } // display: block; }
#displayTagFilterControl p label { // #displaytagfiltercontrol p label {
color: #707070; // color: #707070;
font-size: 15px; } // font-size: 15px; }
/*.inputs { /*.inputs {
#interestingTagInput, #ignoredTagInput { #interestingtaginput, #ignoredtaginput {
width: 153px; width: 153px;
padding-left: 5px; padding-left: 5px;
border: #c9c9b5 1px solid; border: #c9c9b5 1px solid;
height: 25px; } height: 25px; }
#interestingTagAdd, #ignoredTagAdd { #interestingtagadd, #ignoredtagadd {
background: url(../images/small-button-blue.png) repeat-x top; background: url(../images/small-button-blue.png) repeat-x top;
border: 0; border: 0;
color: #4a757f; color: #4a757f;
...@@ -472,101 +472,102 @@ body.anon #searchBar { ...@@ -472,101 +472,102 @@ body.anon #searchBar {
-webkit-box-shadow: 1px 1px 2px #808080; -webkit-box-shadow: 1px 1px 2px #808080;
-moz-box-shadow: 1px 1px 2px #808080; -moz-box-shadow: 1px 1px 2px #808080;
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; } }*/ background: url(../images/small-button-blue.png) repeat-x bottom; } }*/
img.gravatar { // img.gravatar {
margin: 1px; } // margin: 1px; }
a { // a {
&.followed, &.follow { // &.followed, &.follow {
background: url(../images/medium-button.png) top repeat-x; // background: url(../images/medium-button.png) top repeat-x;
height: 34px; // height: 34px;
line-height: 34px; // line-height: 34px;
text-align: center; // text-align: center;
border: 0; // border: 0;
font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
color: #4a757f; // color: #4a757f;
font-weight: normal; // font-weight: normal;
font-size: 21px; // font-size: 21px;
margin-top: 3px; // margin-top: 3px;
display: block; // display: block;
width: 120px; // width: 120px;
text-decoration: none; // text-decoration: none;
border-radius: 4px; // border-radius: 4px;
-ms-border-radius: 4px; // -ms-border-radius: 4px;
-moz-border-radius: 4px; // -moz-border-radius: 4px;
-webkit-border-radius: 4px; // -webkit-border-radius: 4px;
-khtml-border-radius: 4px; // -khtml-border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #636363; // -webkit-box-shadow: 1px 1px 2px #636363;
-moz-box-shadow: 1px 1px 2px #636363; // -moz-box-shadow: 1px 1px 2px #636363;
box-shadow: 1px 1px 2px #636363; // box-shadow: 1px 1px 2px #636363;
margin: 0 auto; // margin: 0 auto;
padding: 0; } // padding: 0; }
&.followed:hover, &.follow:hover { // &.followed:hover, &.follow:hover {
text-decoration: none; // text-decoration: none;
background: url(../images/medium-button.png) bottom repeat-x; // background: url(../images/medium-button.png) bottom repeat-x;
text-shadow: 0px 1px 0px #c6d9dd; // text-shadow: 0px 1px 0px #c6d9dd;
-moz-text-shadow: 0px 1px 0px #c6d9dd; // -moz-text-shadow: 0px 1px 0px #c6d9dd;
-webkit-text-shadow: 0px 1px 0px #c6d9dd; } // -webkit-text-shadow: 0px 1px 0px #c6d9dd; }
&.followed { // &.followed {
div.unfollow { // div.unfollow {
display: none; } // display: none; }
&:hover div { // &:hover div {
display: none; // display: none;
&.unfollow { // &.unfollow {
display: inline; // display: inline;
color: #a05736; } } } } // color: #a05736; } } } }
.favorite-number { // .favorite-number {
padding: 5px 0 0 5px; // padding: 5px 0 0 5px;
font-size: 100%; // font-size: 100%;
font-family: Arial; // font-family: arial;
font-weight: bold; // font-weight: bold;
color: #777; // color: #777;
text-align: center; } // text-align: center; }
.notify-sidebar #question-subscribe-sidebar { // .notify-sidebar #question-subscribe-sidebar {
margin: 7px 0 0 3px; } } // margin: 7px 0 0 3px; }
}
.statsWidget p { //.statswidget p {
color: #707070; // color: #707070;
font-size: 16px; // font-size: 16px;
border-bottom: #cccccc 1px solid; // border-bottom: #cccccc 1px solid;
font-size: 13px; // font-size: 13px;
strong { // strong {
float: right; // float: right;
padding-right: 10px; } } // padding-right: 10px; } }
.questions-related { // .questions-related {
word-wrap: break-word; // word-wrap: break-word;
p { // p {
line-height: 20px; // line-height: 20px;
padding: 4px 0px 4px 0px; // padding: 4px 0px 4px 0px;
font-size: 16px; // font-size: 16px;
font-weight: normal; // font-weight: normal;
border-bottom: #cccccc 1px solid; } // border-bottom: #cccccc 1px solid; }
a { // a {
font-size: 13px; } } // font-size: 13px; } }
#tips { // #tips {
li { // li {
color: #707070; // color: #707070;
font-size: 13px; // font-size: 13px;
list-style-image: url(../images/tips.png); } // list-style-image: url(../images/tips.png); }
a { // a {
font-size: 16px; } } // font-size: 16px; } }
#markdownHelp { // #markdownhelp {
li { // li {
color: #707070; // color: #707070;
font-size: 13px; } // font-size: 13px; }
a { // a {
font-size: 16px; } } // font-size: 16px; } }
// .tabBar { // .tabbar {
// background-color: #eff5f6; // background-color: #eff5f6;
// height: 30px; // height: 30px;
// margin-bottom: 3px; // margin-bottom: 3px;
// margin-top: 3px; // margin-top: 3px;
// float: right; // float: right;
// font-family: Georgia,serif; // font-family: georgia,serif;
// font-size: 16px; // font-size: 16px;
// border-radius: 5px; // border-radius: 5px;
// -ms-border-radius: 5px; // -ms-border-radius: 5px;
...@@ -576,19 +577,19 @@ body.anon #searchBar { ...@@ -576,19 +577,19 @@ body.anon #searchBar {
// h2 { // h2 {
// float: left; } } // float: left; } }
// .tabsA, .tabsC { // .tabsa, .tabsc {
// float: right; // float: right;
// position: relative; // position: relative;
// display: block; // display: block;
// height: 20px; } // height: 20px; }
// .tabsA { // .tabsa {
// float: right; } // float: right; }
// .tabsC { // .tabsc {
// float: left; } // float: left; }
// .tabsA a, .tabsC a { // .tabsa a, .tabsc a {
// border-left: 1px solid #d0e1e4; // border-left: 1px solid #d0e1e4;
// color: #7ea9b3; // color: #7ea9b3;
// display: block; // display: block;
...@@ -598,19 +599,19 @@ body.anon #searchBar { ...@@ -598,19 +599,19 @@ body.anon #searchBar {
// padding: 4px 7px 4px 7px; // padding: 4px 7px 4px 7px;
// text-decoration: none; } // 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; } // color: #4a757f; }
// .tabsA .label, .tabsC .label { // .tabsa .label, .tabsc .label {
// float: left; // float: left;
// color: #646464; // color: #646464;
// margin-top: 4px; // margin-top: 4px;
// margin-right: 5px; } // margin-right: 5px; }
// .main-page .tabsA .label { // .main-page .tabsa .label {
// margin-left: 8px; } // margin-left: 8px; }
// .tabsB a { // .tabsb a {
// background: #eee; // background: #eee;
// border: 1px solid #eee; // border: 1px solid #eee;
// color: #777; // color: #777;
...@@ -622,7 +623,7 @@ body.anon #searchBar { ...@@ -622,7 +623,7 @@ body.anon #searchBar {
// padding: 0 11px 0 11px; // padding: 0 11px 0 11px;
// text-decoration: none; } // text-decoration: none; }
// .tabsC .first { // .tabsc .first {
// border: none; } // border: none; }
// .rss { // .rss {
...@@ -635,12 +636,12 @@ body.anon #searchBar { ...@@ -635,12 +636,12 @@ body.anon #searchBar {
// padding-top: 3px; // padding-top: 3px;
// background: white url(../images/feed-icon-small.png) no-repeat center right; // background: white url(../images/feed-icon-small.png) no-repeat center right;
// float: right; // float: right;
// font-family: Georgia,serif; // font-family: georgia,serif;
// font-size: 16px; // font-size: 16px;
// &:hover { // &:hover {
// color: #F4A731 !important; } } // color: #f4a731 !important; } }
// #questionCount { // #questioncount {
// font-weight: bold; // font-weight: bold;
// font-size: 23px; // font-size: 23px;
// color: #7ea9b3; // color: #7ea9b3;
...@@ -648,19 +649,19 @@ body.anon #searchBar { ...@@ -648,19 +649,19 @@ body.anon #searchBar {
// float: left; // float: left;
// margin-bottom: 8px; // margin-bottom: 8px;
// padding-top: 6px; // padding-top: 6px;
// font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'yanone kaffeesatz',sans-serif; }
#listSearchTags { // #listsearchtags {
float: left; // float: left;
margin-top: 3px; // margin-top: 3px;
color: #707070; // color: #707070;
font-size: 16px; // font-size: 16px;
font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'yanone kaffeesatz',sans-serif; }
ul#searchTags { // ul#searchtags {
margin-left: 10px; // margin-left: 10px;
float: right; // float: right;
padding-top: 2px; } // padding-top: 2px; }
// .search-tips { // .search-tips {
// font-size: 16px; // font-size: 16px;
...@@ -669,7 +670,7 @@ ul#searchTags { ...@@ -669,7 +670,7 @@ ul#searchTags {
// margin: 5px 0 10px 0; // margin: 5px 0 10px 0;
// padding: 0px; // padding: 0px;
// float: left; // float: left;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// a { // a {
// text-decoration: underline; // text-decoration: underline;
// color: #1b79bd; } } // color: #1b79bd; } }
...@@ -677,7 +678,7 @@ ul#searchTags { ...@@ -677,7 +678,7 @@ ul#searchTags {
// #question-list { // #question-list {
// float: left; // float: left;
// position: relative; // position: relative;
// background-color: #FFF; // background-color: #fff;
// padding: 0; // padding: 0;
// width: 100%; } // width: 100%; }
...@@ -685,7 +686,7 @@ ul#searchTags { ...@@ -685,7 +686,7 @@ ul#searchTags {
// position: relative; // position: relative;
// filter: inherit; // filter: inherit;
// padding: 10px; // padding: 10px;
// border-bottom: 1px solid #DDDBCE; // border-bottom: 1px solid #dddbce;
// margin-bottom: 1px; // margin-bottom: 1px;
// overflow: hidden; // overflow: hidden;
// width: 710px; // width: 710px;
...@@ -698,13 +699,13 @@ ul#searchTags { ...@@ -698,13 +699,13 @@ ul#searchTags {
// padding-left: 0; // padding-left: 0;
// margin-bottom: 6px; // margin-bottom: 6px;
// display: block; // display: block;
// font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'yanone kaffeesatz',sans-serif; }
// a { // a {
// color: #464646; } // color: #464646; }
// .userinfo { // .userinfo {
// text-align: right; // text-align: right;
// line-height: 16px; // line-height: 16px;
// font-family: Arial; // font-family: arial;
// padding-right: 4px; // padding-right: 4px;
// .relativetime { // .relativetime {
// font-size: 11px; // font-size: 11px;
...@@ -722,11 +723,11 @@ ul#searchTags { ...@@ -722,11 +723,11 @@ ul#searchTags {
// .counts { // .counts {
// float: right; // float: right;
// margin: 4px 0 0 5px; // margin: 4px 0 0 5px;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// .item-count { // .item-count {
// padding: 0px 5px 0px 5px; // padding: 0px 5px 0px 5px;
// font-size: 25px; // font-size: 25px;
// font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'yanone kaffeesatz',sans-serif; }
// .votes div, .views div, .answers div, .favorites div { // .votes div, .views div, .answers div, .favorites div {
// margin-top: 3px; // margin-top: 3px;
// font-size: 14px; // font-size: 14px;
...@@ -773,7 +774,7 @@ ul#searchTags { ...@@ -773,7 +774,7 @@ ul#searchTags {
// background: #eab243; // background: #eab243;
// color: yellow; } } // color: yellow; } }
// .evenMore { // .evenmore {
// font-size: 13px; // font-size: 13px;
// color: #707070; // color: #707070;
// padding: 15px 0px 10px 0px; // padding: 15px 0px 10px 0px;
...@@ -791,83 +792,83 @@ ul#searchTags { ...@@ -791,83 +792,83 @@ ul#searchTags {
margin-bottom: 16px; margin-bottom: 16px;
float: right; } float: right; }
.paginator { // .paginator {
padding: 5px 0 10px 0; // padding: 5px 0 10px 0;
font-size: 13px; // font-size: 13px;
margin-bottom: 10px; // margin-bottom: 10px;
.prev a, .next a { // .prev a, .next a {
background-color: #fff; // background-color: #fff;
color: #777; // color: #777;
padding: 2px 4px 3px 4px; // padding: 2px 4px 3px 4px;
&:visited { // &:visited {
background-color: #fff; // background-color: #fff;
color: #777; // color: #777;
padding: 2px 4px 3px 4px; } } // padding: 2px 4px 3px 4px; } }
a { // a {
color: #7ea9b3; } // color: #7ea9b3; }
.prev { // .prev {
margin-right: .5em; } // margin-right: .5em; }
.next { // .next {
margin-left: .5em; } // margin-left: .5em; }
.page a { // .page a {
padding: .25em; // padding: .25em;
background-color: #fff; // background-color: #fff;
margin: 0em .25em; // margin: 0em .25em;
color: #ff; // color: #ff;
&:visited { // &:visited {
padding: .25em; // padding: .25em;
background-color: #fff; // background-color: #fff;
margin: 0em .25em; // margin: 0em .25em;
color: #ff; } } // color: #ff; } }
.curr { // .curr {
padding: .25em; // padding: .25em;
background-color: #fff; // background-color: #fff;
margin: 0em .25em; // margin: 0em .25em;
color: #ff; // color: #ff;
background-color: #8ebcc7; // background-color: #8ebcc7;
color: #fff; // color: #fff;
font-weight: bold; } // font-weight: bold; }
.next a, .prev a { // .next a, .prev a {
color: #7ea9b3; } // color: #7ea9b3; }
.page a:hover, .curr a:hover, .prev a:hover, .next a:hover { // .page a:hover, .curr a:hover, .prev a:hover, .next a:hover {
color: #8C8C8C; // color: #8c8c8c;
background-color: #E1E1E1; // background-color: #e1e1e1;
text-decoration: none; } // text-decoration: none; }
.text { // .text {
color: #777; // color: #777;
padding: .3em; } // padding: .3em; }
.paginator-container-left { // .paginator-container-left {
padding: 5px 0 10px 0; } } // padding: 5px 0 10px 0; } }
.tag-size-1 { // .tag-size-1 {
font-size: 12px; } // font-size: 12px; }
.tag-size-2 { // .tag-size-2 {
font-size: 13px; } // font-size: 13px; }
.tag-size-3 { // .tag-size-3 {
font-size: 14px; } // font-size: 14px; }
.tag-size-4 { // .tag-size-4 {
font-size: 15px; } // font-size: 15px; }
.tag-size-5 { // .tag-size-5 {
font-size: 16px; } // font-size: 16px; }
.tag-size-6 { // .tag-size-6 {
font-size: 17px; } // font-size: 17px; }
.tag-size-7 { // .tag-size-7 {
font-size: 18px; } // font-size: 18px; }
.tag-size-8 { // .tag-size-8 {
font-size: 19px; } // font-size: 19px; }
.tag-size-9 { // .tag-size-9 {
font-size: 20px; } // font-size: 20px; }
.tag-size-10 { // .tag-size-10 {
font-size: 21px; } // font-size: 21px; }
// ul { // ul {
// &.tags { // &.tags {
...@@ -895,29 +896,29 @@ ul#searchTags { ...@@ -895,29 +896,29 @@ ul#searchTags {
// padding: 0; // padding: 0;
// height: 20px; } } // height: 20px; } }
.wildcard-tags { // .wildcard-tags {
clear: both; } // clear: both; }
ul.tags.marked-tags li, .wildcard-tags ul.tags li { // ul.tags.marked-tags li, .wildcard-tags ul.tags li {
margin-bottom: 5px; } // margin-bottom: 5px; }
#tagSelector div.inputs { // #tagselector div.inputs {
clear: both; // clear: both;
float: none; // float: none;
margin-bottom: 10px; } // margin-bottom: 10px; }
.tags-page ul.tags li { // .tags-page ul.tags li {
width: 160px; // width: 160px;
margin: 5px; } // margin: 5px; }
ul { // ul {
&#ab-user-tags li { // &#ab-user-tags li {
width: 160px; // width: 160px;
margin: 5px; } // margin: 5px; }
&#related-tags li { // &#related-tags li {
margin: 0 5px 8px 0; // margin: 0 5px 8px 0;
float: left; // float: left;
clear: left; } } // clear: left; } }
// .tag-left { // .tag-left {
// cursor: pointer; // cursor: pointer;
...@@ -946,31 +947,31 @@ ul { ...@@ -946,31 +947,31 @@ ul {
// text-align: center; // text-align: center;
// white-space: nowrap; // white-space: nowrap;
// vertical-align: middle; // vertical-align: middle;
// font-family: Arial; // font-family: arial;
// color: #717179; } // color: #717179; }
.deletable-tag { // .deletable-tag {
margin-right: 3px; // margin-right: 3px;
white-space: nowrap; // white-space: nowrap;
border-top-right-radius: 4px; // border-top-right-radius: 4px;
border-bottom-right-radius: 4px; // border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px; // -moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px; // -moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px; // -webkit-border-bottom-right-radius: 4px;
-webkit-border-top-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; } }
.users-page h1, .tags-page h1 { // .tags {
float: left; } // a.tag-right, span.tag-right {
// color: #585858;
// text-decoration: none; }
// a:hover {
// color: #1a1a1a; } }
.main-page h1 { // .users-page h1, .tags-page h1 {
margin-right: 5px; } // float: left; }
// .main-page h1 {
// margin-right: 5px; }
// .delete-icon { // .delete-icon {
// margin-top: -1px; // margin-top: -1px;
...@@ -984,7 +985,7 @@ ul { ...@@ -984,7 +985,7 @@ ul {
// cursor: default; // cursor: default;
// color: #fff; // color: #fff;
// border-top: #cfdbdb 1px solid; // border-top: #cfdbdb 1px solid;
// font-family: Arial; // font-family: arial;
// border-top-right-radius: 4px; // border-top-right-radius: 4px;
// border-bottom-right-radius: 4px; // border-bottom-right-radius: 4px;
// -moz-border-radius-topright: 4px; // -moz-border-radius-topright: 4px;
...@@ -997,28 +998,28 @@ ul { ...@@ -997,28 +998,28 @@ ul {
// &:hover { // &:hover {
// background: #b32f2f; } } // background: #b32f2f; } }
.tag-number { // .tag-number {
font-weight: normal; // font-weight: normal;
float: left; // float: left;
font-size: 16px; // font-size: 16px;
color: #5d5d5d; } // color: #5d5d5d; }
.badges .tag-number { // .badges .tag-number {
float: none; // float: none;
display: inline; // display: inline;
padding-right: 15px; } // padding-right: 15px; }
.section-title { // .section-title {
color: #7ea9b3; // color: #7ea9b3;
font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
font-weight: bold; // font-weight: bold;
font-size: 24px; } // font-size: 24px; }
// #fmask { // #fmask {
// margin-bottom: 30px; // margin-bottom: 30px;
// width: 100%; } // width: 100%; }
// #askFormBar { // #askformbar {
// display: inline-block; // display: inline-block;
// padding: 4px 7px 5px 0px; // padding: 4px 7px 5px 0px;
// margin-top: 0px; // margin-top: 0px;
...@@ -1027,7 +1028,7 @@ ul { ...@@ -1027,7 +1028,7 @@ ul {
// font-size: 14px; // font-size: 14px;
// color: #525252; // color: #525252;
// line-height: 1.4; } // line-height: 1.4; }
// .questionTitleInput { // .questiontitleinput {
// font-size: 24px; // font-size: 24px;
// line-height: 24px; // line-height: 24px;
// height: 36px; // height: 36px;
...@@ -1036,44 +1037,44 @@ ul { ...@@ -1036,44 +1037,44 @@ ul {
// border: #cce6ec 3px solid; // border: #cce6ec 3px solid;
// width: 725px; } } // width: 725px; } }
.ask-page div#question-list, .edit-question-page div#question-list { // .ask-page div#question-list, .edit-question-page div#question-list {
float: none; // float: none;
border-bottom: #f0f0ec 1px solid; // border-bottom: #f0f0ec 1px solid;
float: left; // float: left;
margin-bottom: 10px; } // margin-bottom: 10px; }
.ask-page div#question-list a, .edit-question-page div#question-list a { // .ask-page div#question-list a, .edit-question-page div#question-list a {
line-height: 30px; } // line-height: 30px; }
.ask-page div#question-list h2, .edit-question-page div#question-list h2 { // .ask-page div#question-list h2, .edit-question-page div#question-list h2 {
font-size: 13px; // font-size: 13px;
padding-bottom: 0; // padding-bottom: 0;
color: #1b79bd; // color: #1b79bd;
border-top: #f0f0ec 1px solid; // border-top: #f0f0ec 1px solid;
border-left: #f0f0ec 1px solid; // border-left: #f0f0ec 1px solid;
height: 30px; // height: 30px;
line-height: 30px; // line-height: 30px;
font-weight: normal; } // font-weight: normal; }
.ask-page div#question-list span, .edit-question-page div#question-list span { // .ask-page div#question-list span, .edit-question-page div#question-list span {
width: 28px; // width: 28px;
height: 26px; // height: 26px;
line-height: 26px; // line-height: 26px;
text-align: center; // text-align: center;
margin-right: 10px; // margin-right: 10px;
float: left; // float: left;
display: block; // display: block;
color: #fff; // color: #fff;
background: #b8d0d5; // background: #b8d0d5;
border-radius: 3px; // border-radius: 3px;
-ms-border-radius: 3px; // -ms-border-radius: 3px;
-moz-border-radius: 3px; // -moz-border-radius: 3px;
-webkit-border-radius: 3px; // -webkit-border-radius: 3px;
-khtml-border-radius: 3px; } // -khtml-border-radius: 3px; }
.ask-page label, .edit-question-page label { // .ask-page label, .edit-question-page label {
color: #525252; // color: #525252;
font-size: 13px; } // font-size: 13px; }
// .ask-page #id_tags, .edit-question-page #id_tags { // .ask-page #id_tags, .edit-question-page #id_tags {
// border: #cce6ec 3px solid; // border: #cce6ec 3px solid;
...@@ -1082,16 +1083,16 @@ ul { ...@@ -1082,16 +1083,16 @@ ul {
// width: 395px; // width: 395px;
// font-size: 14px; } // font-size: 14px; }
.title-desc { // .title-desc {
color: #707070; // color: #707070;
font-size: 13px; } // font-size: 13px; }
// #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit { // #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit {
// float: left; // float: left;
// background: url(../images/medium-button.png) top repeat-x; // background: url(../images/medium-button.png) top repeat-x;
// height: 34px; // height: 34px;
// border: 0; // border: 0;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// color: #4a757f; // color: #4a757f;
// font-weight: normal; // font-weight: normal;
// font-size: 21px; // font-size: 21px;
...@@ -1132,20 +1133,20 @@ ul { ...@@ -1132,20 +1133,20 @@ ul {
// .wmd-preview { // .wmd-preview {
// margin: 3px 0 5px 0; // margin: 3px 0 5px 0;
// padding: 6px; // padding: 6px;
// background-color: #F5F5F5; // background-color: #f5f5f5;
// min-height: 20px; // min-height: 20px;
// overflow: auto; // overflow: auto;
// font-size: 13px; // font-size: 13px;
// font-family: Arial; // font-family: arial;
// p { // p {
// margin-bottom: 14px; // margin-bottom: 14px;
// line-height: 1.4; // line-height: 1.4;
// font-size: 14px; } // font-size: 14px; }
// pre { // pre {
// background-color: #E7F1F8; } // background-color: #e7f1f8; }
// blockquote { // blockquote {
// background-color: #eee; } // background-color: #eee; }
// IMG { // img {
// max-width: 600px; } } // max-width: 600px; } }
// .preview-toggle { // .preview-toggle {
...@@ -1172,43 +1173,43 @@ ul { ...@@ -1172,43 +1173,43 @@ ul {
label { label {
vertical-align: text-bottom; } } vertical-align: text-bottom; } }
.edit-content-html { // .edit-content-html {
border-top: 1px dotted #D8D2A9; // border-top: 1px dotted #d8d2a9;
border-bottom: 1px dotted #D8D2A9; // border-bottom: 1px dotted #d8d2a9;
margin: 5px 0 5px 0; } // margin: 5px 0 5px 0; }
.edit-question-page, #fmedit, .wmd-preview { // .edit-question-page, #fmedit, .wmd-preview {
color: #525252; } // color: #525252; }
.edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision { // .edit-question-page #id_revision, #fmedit #id_revision, .wmd-preview #id_revision {
font-size: 14px; // font-size: 14px;
margin-top: 5px; // margin-top: 5px;
margin-bottom: 5px; } // margin-bottom: 5px; }
.edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title { // .edit-question-page #id_title, #fmedit #id_title, .wmd-preview #id_title {
font-size: 24px; // font-size: 24px;
line-height: 24px; // line-height: 24px;
height: 36px; // height: 36px;
margin: 0px; // margin: 0px;
padding: 0px 0 0 5px; // padding: 0px 0 0 5px;
border: #cce6ec 3px solid; // border: #cce6ec 3px solid;
width: 725px; // width: 725px;
margin-bottom: 10px; } // margin-bottom: 10px; }
.edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary { // .edit-question-page #id_summary, #fmedit #id_summary, .wmd-preview #id_summary {
border: #cce6ec 3px solid; // border: #cce6ec 3px solid;
height: 25px; // height: 25px;
padding-left: 5px; // padding-left: 5px;
width: 395px; // width: 395px;
font-size: 14px; } // font-size: 14px; }
.edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc { // .edit-question-page .title-desc, #fmedit .title-desc, .wmd-preview .title-desc {
margin-bottom: 10px; } // margin-bottom: 10px; }
// .question-page { // .question-page {
// h1 { // h1 {
// padding-top: 0px; // padding-top: 0px;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// a { // a {
// color: #464646; // color: #464646;
// font-size: 30px; // font-size: 30px;
...@@ -1223,7 +1224,7 @@ ul { ...@@ -1223,7 +1224,7 @@ ul {
// background-position: center left; // background-position: center left;
// margin-left: 0px !important; // margin-left: 0px !important;
// a { // a {
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// vertical-align: top; } } // vertical-align: top; } }
// .question-content { // .question-content {
// float: right; // float: right;
...@@ -1242,7 +1243,7 @@ ul { ...@@ -1242,7 +1243,7 @@ ul {
// width: 670px; // width: 670px;
// padding-right: 10px; // padding-right: 10px;
// margin-top: 0px; // margin-top: 0px;
// border-bottom: 1px solid #D4D4D4; // border-bottom: 1px solid #d4d4d4;
// float: right; // float: right;
// td { // td {
// width: 20px; // width: 20px;
...@@ -1253,7 +1254,7 @@ ul { ...@@ -1253,7 +1254,7 @@ ul {
// .question-body, .answer-body { // .question-body, .answer-body {
// overflow: auto; // overflow: auto;
// margin-top: 10px; // margin-top: 10px;
// font-family: Arial; // font-family: arial;
// color: #4b4b4b; } // color: #4b4b4b; }
// .question-body p, .answer-body p { // .question-body p, .answer-body p {
// margin-bottom: 14px; // margin-bottom: 14px;
...@@ -1264,7 +1265,7 @@ ul { ...@@ -1264,7 +1265,7 @@ ul {
// color: #1b79bd; } // color: #1b79bd; }
// .question-body li, .answer-body li { // .question-body li, .answer-body li {
// margin-bottom: 7px; } // margin-bottom: 7px; }
// .question-body IMG, .answer-body IMG { // .question-body img, .answer-body img {
// max-width: 600px; } // max-width: 600px; }
// .post-update-info-container { // .post-update-info-container {
// float: right; // float: right;
...@@ -1273,7 +1274,7 @@ ul { ...@@ -1273,7 +1274,7 @@ ul {
// background: white url(../images/background-user-info.png) repeat-x bottom; // background: white url(../images/background-user-info.png) repeat-x bottom;
// float: right; // float: right;
// font-size: 9px; // font-size: 9px;
// font-family: Arial; // font-family: arial;
// width: 158px; // width: 158px;
// padding: 4px; // padding: 4px;
// margin: 0px 0px 5px 5px; // margin: 0px 0px 5px 5px;
...@@ -1316,7 +1317,7 @@ ul { ...@@ -1316,7 +1317,7 @@ ul {
// cursor: pointer; // cursor: pointer;
// border: none; // border: none;
// font-size: 12px; // font-size: 12px;
// font-family: Arial; // font-family: arial;
// text-decoration: none; // text-decoration: none;
// height: 18px; // height: 18px;
// display: block; // display: block;
...@@ -1352,11 +1353,11 @@ ul { ...@@ -1352,11 +1353,11 @@ ul {
// background: url(../images/close.png) no-repeat center left; } // background: url(../images/close.png) no-repeat center left; }
// .post-controls .permant-link, .answer-controls .permant-link { // .post-controls .permant-link, .answer-controls .permant-link {
// background: url(../images/link.png) no-repeat center left; } // background: url(../images/link.png) no-repeat center left; }
// .tabBar { // .tabbar {
// width: 100%; } // width: 100%; }
// #questionCount { // #questioncount {
// float: left; // float: left;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// line-height: 15px; } // line-height: 15px; }
// .question-img-upvote, .question-img-downvote, .answer-img-upvote, .answer-img-downvote { // .question-img-upvote, .question-img-downvote, .answer-img-upvote, .answer-img-downvote {
// width: 25px; // width: 25px;
...@@ -1390,7 +1391,7 @@ ul { ...@@ -1390,7 +1391,7 @@ ul {
// color: #7ea9b3; // color: #7ea9b3;
// width: 200px; // width: 200px;
// float: left; // float: left;
// font-family: 'Yanone Kaffeesatz',sans-serif; } // font-family: 'yanone kaffeesatz',sans-serif; }
// .comments { // .comments {
// font-size: 12px; // font-size: 12px;
// clear: both; // clear: both;
...@@ -1402,7 +1403,7 @@ ul { ...@@ -1402,7 +1403,7 @@ ul {
// .controls a { // .controls a {
// color: #988e4c; // color: #988e4c;
// padding: 0 3px 2px 22px; // padding: 0 3px 2px 22px;
// font-family: Arial; // font-family: arial;
// font-size: 13px; // font-size: 13px;
// background: url(../images/comment.png) no-repeat center left; // background: url(../images/comment.png) no-repeat center left;
// &:hover { // &:hover {
...@@ -1426,7 +1427,7 @@ ul { ...@@ -1426,7 +1427,7 @@ ul {
// height: 42px; // height: 42px;
// width: 100%; // width: 100%;
// margin: 7px 0 5px 1px; // margin: 7px 0 5px 1px;
// font-family: Arial; // font-family: arial;
// outline: none; // outline: none;
// overflow: auto; // overflow: auto;
// font-size: 12px; // font-size: 12px;
...@@ -1443,7 +1444,7 @@ ul { ...@@ -1443,7 +1444,7 @@ ul {
// background: url(../images/small-button-blue.png) repeat-x top; // background: url(../images/small-button-blue.png) repeat-x top;
// border: 0; // border: 0;
// color: #4a757f; // color: #4a757f;
// font-family: Arial; // font-family: arial;
// font-size: 13px; // font-size: 13px;
// width: 100px; // width: 100px;
// font-weight: bold; // font-weight: bold;
...@@ -1473,7 +1474,7 @@ ul { ...@@ -1473,7 +1474,7 @@ ul {
// float: right; // float: right;
// color: #b6a475 !important; // color: #b6a475 !important;
// vertical-align: top; // vertical-align: top;
// font-family: Arial; // font-family: arial;
// float: right; // float: right;
// text-align: right; } // text-align: right; }
// .comment { // .comment {
...@@ -1483,7 +1484,7 @@ ul { ...@@ -1483,7 +1484,7 @@ ul {
// margin-top: 8px; // margin-top: 8px;
// padding-bottom: 4px; // padding-bottom: 4px;
// overflow: auto; // overflow: auto;
// font-family: Arial; // font-family: arial;
// font-size: 11px; // font-size: 11px;
// min-height: 25px; // min-height: 25px;
// background: white url(../images/comment-background.png) bottom repeat-x; // background: white url(../images/comment-background.png) bottom repeat-x;
...@@ -1506,7 +1507,7 @@ ul { ...@@ -1506,7 +1507,7 @@ ul {
// width: 14px; // width: 14px;
// height: 14px; // height: 14px;
// &:hover { // &:hover {
// border: #BC564B 2px solid; // border: #bc564b 2px solid;
// border-radius: 10px; // border-radius: 10px;
// -ms-border-radius: 10px; // -ms-border-radius: 10px;
// -moz-border-radius: 10px; // -moz-border-radius: 10px;
...@@ -1562,7 +1563,7 @@ ul { ...@@ -1562,7 +1563,7 @@ ul {
// margin-bottom: 0px; // margin-bottom: 0px;
// margin-top: 0px; // margin-top: 0px;
// line-height: 50%; } } // line-height: 50%; } }
// #questionTools { // #questiontools {
// font-size: 22px; // font-size: 22px;
// margin-top: 11px; // margin-top: 11px;
// text-align: left; } // text-align: left; }
...@@ -1582,10 +1583,10 @@ ul { ...@@ -1582,10 +1583,10 @@ ul {
// // text-align: center; // // text-align: center;
// // padding-top: 2px; // // padding-top: 2px;
// // margin: 10px 10px 0px 3px; // // margin: 10px 10px 0px 3px;
// IMG { // img {
// cursor: pointer; } } // cursor: pointer; } }
// .vote-number { // .vote-number {
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// padding: 0px 0 5px 0; // padding: 0px 0 5px 0;
// font-size: 25px; // font-size: 25px;
// font-weight: bold; // font-weight: bold;
...@@ -1595,7 +1596,7 @@ ul { ...@@ -1595,7 +1596,7 @@ ul {
// // width: 120px; // // width: 120px;
// label { // label {
// vertical-align: top; } } // vertical-align: top; } }
// .tabBar-answer { // .tabbar-answer {
// margin-bottom: 15px; // margin-bottom: 15px;
// padding-left: 7px; // padding-left: 7px;
// width: 723px; // width: 723px;
...@@ -1605,7 +1606,7 @@ ul { ...@@ -1605,7 +1606,7 @@ ul {
// } // }
// .accepted-answer { // .accepted-answer {
// background-color: #f7fecc; // background-color: #f7fecc;
// border-bottom-color: #9BD59B; // border-bottom-color: #9bd59b;
// // .vote-buttons { // // .vote-buttons {
// // width: 27px; // // width: 27px;
// // margin-right: 10px; // // margin-right: 10px;
...@@ -1614,19 +1615,19 @@ ul { ...@@ -1614,19 +1615,19 @@ ul {
// .answer .post-update-info a { // .answer .post-update-info a {
// color: #444444; } // color: #444444; }
// .answered { // .answered {
// background: #CCC; // background: #ccc;
// color: #999; } // color: #999; }
// .answered-accepted { // .answered-accepted {
// background: #DCDCDC; // background: #dcdcdc;
// color: #763333; // color: #763333;
// strong { // strong {
// color: #E1E818; } } // color: #e1e818; } }
// .answered-by-owner { // .answered-by-owner {
// background: #F1F1FF; // background: #f1f1ff;
// .comments { // .comments {
// .button { // .button {
// background-color: #E6ECFF; } // background-color: #e6ecff; }
// background-color: #E6ECFF; } // background-color: #e6ecff; }
// // .vote-buttons { // // .vote-buttons {
// // margin-right: 10px; } // // margin-right: 10px; }
// } // }
...@@ -1642,7 +1643,7 @@ ul { ...@@ -1642,7 +1643,7 @@ ul {
// line-height: 1.2; // line-height: 1.2;
// margin-top: 10px; // margin-top: 10px;
// h2 { // h2 {
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// color: #7ea9b3; // color: #7ea9b3;
// font-size: 24px; } // font-size: 24px; }
// label { // label {
...@@ -1689,7 +1690,7 @@ ul { ...@@ -1689,7 +1690,7 @@ ul {
font-size: 13px; font-size: 13px;
color: #707070; color: #707070;
line-height: 1.3; line-height: 1.3;
font-family: Arial; font-family: arial;
color: #525252; color: #525252;
margin-bottom: 12px; } margin-bottom: 12px; }
...@@ -1725,7 +1726,7 @@ ul { ...@@ -1725,7 +1726,7 @@ ul {
// color: #4a757f; // color: #4a757f;
// font-weight: bold; // font-weight: bold;
// font-size: 13px; // font-size: 13px;
// font-family: Arial; // font-family: arial;
// height: 26px; // height: 26px;
// margin: 5px 0px; // margin: 5px 0px;
// width: 100px; // width: 100px;
...@@ -1771,7 +1772,7 @@ ul { ...@@ -1771,7 +1772,7 @@ ul {
color: #4a757f; color: #4a757f;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
font-family: Arial; font-family: arial;
height: 24px; height: 24px;
margin-top: -2px; margin-top: -2px;
padding-left: 10px; padding-left: 10px;
...@@ -1802,7 +1803,7 @@ ul { ...@@ -1802,7 +1803,7 @@ ul {
background: url(../images/openid.gif) no-repeat 0% 50%; background: url(../images/openid.gif) no-repeat 0% 50%;
padding: 5px 5px 5px 15px; padding: 5px 5px 5px 15px;
cursor: pointer; cursor: pointer;
font-family: Trebuchet MS; font-family: trebuchet ms;
font-weight: 300; font-weight: 300;
font-size: 150%; font-size: 150%;
width: 500px; } width: 500px; }
...@@ -1816,7 +1817,7 @@ ul { ...@@ -1816,7 +1817,7 @@ ul {
font-weight: bold; font-weight: bold;
font-size: 120%; } font-size: 120%; }
.tabBar-user { .tabbar-user {
width: 375px; } width: 375px; }
.user { .user {
...@@ -1841,54 +1842,54 @@ ul { ...@@ -1841,54 +1842,54 @@ ul {
margin-right: 4px; margin-right: 4px;
display: inline; } } display: inline; } }
.tabBar-tags { // .tabbar-tags {
width: 270px; // width: 270px;
margin-bottom: 15px; } // margin-bottom: 15px; }
a { // a {
&.medal { // &.medal {
font-size: 17px; // font-size: 17px;
line-height: 250%; // line-height: 250%;
margin-right: 5px; // margin-right: 5px;
color: #333; // color: #333;
text-decoration: none; // text-decoration: none;
background: url(../images/medala.gif) no-repeat; // background: url(../images/medala.gif) no-repeat;
border-left: 1px solid #EEE; // border-left: 1px solid #eee;
border-top: 1px solid #EEE; // border-top: 1px solid #eee;
border-bottom: 1px solid #CCC; // border-bottom: 1px solid #ccc;
border-right: 1px solid #CCC; // border-right: 1px solid #ccc;
padding: 4px 12px 4px 6px; } // padding: 4px 12px 4px 6px; }
&:hover.medal { // &:hover.medal {
color: #333; // color: #333;
text-decoration: none; // text-decoration: none;
background: url(../images/medala_on.gif) no-repeat; // background: url(../images/medala_on.gif) no-repeat;
border-left: 1px solid #E7E296; // border-left: 1px solid #e7e296;
border-top: 1px solid #E7E296; // border-top: 1px solid #e7e296;
border-bottom: 1px solid #D1CA3D; // border-bottom: 1px solid #d1ca3d;
border-right: 1px solid #D1CA3D; } } // border-right: 1px solid #d1ca3d; } }
#award-list .user { #award-list .user {
float: left; float: left;
margin: 5px; } margin: 5px; }
.tabBar-profile { .tabbar-profile {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
float: left; } float: left; }
.user-profile-page { // .user-profile-page {
font-size: 13px; // font-size: 13px;
color: #525252; // color: #525252;
p { // p {
font-size: 13px; // font-size: 13px;
line-height: 1.3; // line-height: 1.3;
color: #525252; } // color: #525252; }
.avatar img { // .avatar img {
border: #eee 1px solid; // border: #eee 1px solid;
padding: 5px; } // padding: 5px; }
h2 { // h2 {
padding: 10px 0px 10px 0px; // padding: 10px 0px 10px 0px;
font-family: 'Yanone Kaffeesatz',sans-serif; } } // font-family: 'yanone kaffeesatz',sans-serif; } }
.user-details { .user-details {
font-size: 13px; font-size: 13px;
...@@ -1896,7 +1897,7 @@ a { ...@@ -1896,7 +1897,7 @@ a {
font-size: 16px; } } font-size: 16px; } }
.user-about { .user-about {
background-color: #EEEEEE; background-color: #eeeeee;
height: 200px; height: 200px;
line-height: 20px; line-height: 20px;
overflow: auto; overflow: auto;
...@@ -1915,7 +1916,7 @@ a { ...@@ -1915,7 +1916,7 @@ a {
// margin-top: -2px; // margin-top: -2px;
// font-size: 15px; // font-size: 15px;
// cursor: pointer; // cursor: pointer;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// background: url(../images/small-button-blue.png) repeat-x top; // background: url(../images/small-button-blue.png) repeat-x top;
// border-radius: 4px; // border-radius: 4px;
// -ms-border-radius: 4px; // -ms-border-radius: 4px;
...@@ -1945,18 +1946,18 @@ a { ...@@ -1945,18 +1946,18 @@ a {
// display: inline; // display: inline;
// color: #fff; // color: #fff;
// font-weight: bold; // font-weight: bold;
// color: #A05736; } // color: #a05736; }
// &.unfollow-green { // &.unfollow-green {
// display: none; } } } } // display: none; } } } }
.count { .count {
font-family: 'Yanone Kaffeesatz',sans-serif; font-family: 'yanone kaffeesatz',sans-serif;
font-size: 200%; font-size: 200%;
font-weight: 700; font-weight: 700;
color: #777777; } color: #777777; }
.scoreNumber { .scorenumber {
font-family: 'Yanone Kaffeesatz',sans-serif; font-family: 'yanone kaffeesatz',sans-serif;
font-size: 35px; font-size: 35px;
font-weight: 800; font-weight: 800;
color: #777; color: #777;
...@@ -1964,21 +1965,21 @@ a { ...@@ -1964,21 +1965,21 @@ a {
margin-top: 3px; } margin-top: 3px; }
.vote-count { .vote-count {
font-family: Arial; font-family: arial;
font-size: 160%; font-size: 160%;
font-weight: 700; font-weight: 700;
color: #777; } color: #777; }
.answer-summary { // .answer-summary {
display: block; // display: block;
clear: both; // clear: both;
padding: 3px; } // padding: 3px; }
.answer-votes { .answer-votes {
background-color: #EEEEEE; background-color: #eeeeee;
color: #555555; color: #555555;
float: left; float: left;
font-family: Arial; font-family: arial;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
height: 17px; height: 17px;
...@@ -2060,11 +2061,11 @@ a { ...@@ -2060,11 +2061,11 @@ a {
line-height: 1.3; line-height: 1.3;
color: #525252; } color: #525252; }
h3 { h3 {
font-family: 'Yanone Kaffeesatz',sans-serif; font-family: 'yanone kaffeesatz',sans-serif;
font-size: 21px; font-size: 21px;
padding-left: 0px; } padding-left: 0px; }
.header { .header {
background-color: #F5F5F5; background-color: #f5f5f5;
padding: 5px; padding: 5px;
cursor: pointer; } cursor: pointer; }
.author { .author {
...@@ -2100,54 +2101,54 @@ a { ...@@ -2100,54 +2101,54 @@ a {
font-weight: bold; font-weight: bold;
font-family: sans-serif; } } font-family: sans-serif; } }
del { // del {
color: #C34719; // color: #c34719;
.post-tag { // .post-tag {
color: #C34719; } } // color: #c34719; } }
ins { ins {
.post-tag, p { .post-tag, p {
background-color: #E6F0A2; } background-color: #e6f0a2; }
background-color: #E6F0A2; } background-color: #e6f0a2; }
.vote-notification { // .vote-notification {
z-index: 1; // z-index: 1;
cursor: pointer; // cursor: pointer;
display: none; // display: none;
position: absolute; // position: absolute;
font-family: Arial; // font-family: arial;
font-size: 14px; // font-size: 14px;
font-weight: normal; // font-weight: normal;
color: white; // color: white;
background-color: #8e0000; // background-color: #8e0000;
text-align: center; // text-align: center;
padding-bottom: 10px; // padding-bottom: 10px;
-webkit-box-shadow: 0px 2px 4px #370000; // -webkit-box-shadow: 0px 2px 4px #370000;
-moz-box-shadow: 0px 2px 4px #370000; // -moz-box-shadow: 0px 2px 4px #370000;
box-shadow: 0px 2px 4px #370000; // box-shadow: 0px 2px 4px #370000;
border-radius: 4px; // border-radius: 4px;
-ms-border-radius: 4px; // -ms-border-radius: 4px;
-moz-border-radius: 4px; // -moz-border-radius: 4px;
-webkit-border-radius: 4px; // -webkit-border-radius: 4px;
-khtml-border-radius: 4px; // -khtml-border-radius: 4px;
h3 { // h3 {
background: url(../images/notification.png) repeat-x top; // background: url(../images/notification.png) repeat-x top;
padding: 10px 10px 10px 10px; // padding: 10px 10px 10px 10px;
font-size: 13px; // font-size: 13px;
margin-bottom: 5px; // margin-bottom: 5px;
border-top: #8e0000 1px solid; // border-top: #8e0000 1px solid;
color: #fff; // color: #fff;
font-weight: normal; // font-weight: normal;
border-top-right-radius: 4px; // border-top-right-radius: 4px;
border-top-left-radius: 4px; // border-top-left-radius: 4px;
-moz-border-radius-topright: 4px; // -moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px; // -moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px; // -webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px; } // -webkit-border-top-right-radius: 4px; }
a { // a {
color: #fb7321; // color: #fb7321;
text-decoration: underline; // text-decoration: underline;
font-weight: bold; } } // font-weight: bold; } }
// #ground { // #ground {
// width: 100%; // width: 100%;
...@@ -2156,12 +2157,12 @@ ins { ...@@ -2156,12 +2157,12 @@ ins {
// padding: 6px 0 0 0; // padding: 6px 0 0 0;
// background: #16160f; // background: #16160f;
// font-size: 16px; // font-size: 16px;
// font-family: 'Yanone Kaffeesatz',sans-serif; // font-family: 'yanone kaffeesatz',sans-serif;
// p { // p {
// margin-bottom: 0; } } // margin-bottom: 0; } }
.footer-links { .footer-links {
color: #EEE; color: #eee;
text-align: left; text-align: left;
width: 500px; width: 500px;
float: left; float: left;
...@@ -2201,8 +2202,8 @@ span { ...@@ -2201,8 +2202,8 @@ span {
p.form-item { p.form-item {
margin: 0px; } margin: 0px; }
.deleted { // .deleted {
background: #F4E7E7 none repeat scroll 0 0; } // background: #f4e7e7 none repeat scroll 0 0; }
.form-row { .form-row {
line-height: 25px; } line-height: 25px; }
...@@ -2274,8 +2275,8 @@ label.retag-error { ...@@ -2274,8 +2275,8 @@ label.retag-error {
font-weight: bold; font-weight: bold;
text-decoration: none; } text-decoration: none; }
.narrow .tags { // .narrow .tags {
float: left; } // float: left; }
.user-action-1 { .user-action-1 {
font-weight: bold; font-weight: bold;
...@@ -2283,7 +2284,7 @@ label.retag-error { ...@@ -2283,7 +2284,7 @@ label.retag-error {
.user-action-2 { .user-action-2 {
font-weight: bold; font-weight: bold;
color: #CCC; } color: #ccc; }
.user-action-3, .user-action-4 { .user-action-3, .user-action-4 {
color: #333; } color: #333; }
...@@ -2297,16 +2298,16 @@ label.retag-error { ...@@ -2297,16 +2298,16 @@ label.retag-error {
.user-action-8 { .user-action-8 {
padding: 3px; padding: 3px;
font-weight: bold; font-weight: bold;
background-color: #CCC; background-color: #ccc;
color: #763333; } color: #763333; }
.revision-summary { .revision-summary {
background-color: #FFFE9B; background-color: #fffe9b;
padding: 2px; } padding: 2px; }
.question-title-link a { .question-title-link a {
font-weight: bold; font-weight: bold;
color: #0077CC; } color: #0077cc; }
.answer-title-link a { .answer-title-link a {
color: #333; } color: #333; }
...@@ -2327,13 +2328,13 @@ label.retag-error { ...@@ -2327,13 +2328,13 @@ label.retag-error {
background-color: #0ff; } background-color: #0ff; }
.gold, .badge1 { .gold, .badge1 {
color: #FFCC00; } color: #ffcc00; }
.silver, .badge2 { .silver, .badge2 {
color: #CCCCCC; } color: #cccccc; }
.bronze, .badge3 { .bronze, .badge3 {
color: #CC9933; } color: #cc9933; }
.score { .score {
font-weight: 800; font-weight: 800;
...@@ -2341,7 +2342,7 @@ label.retag-error { ...@@ -2341,7 +2342,7 @@ label.retag-error {
a { a {
&.comment { &.comment {
background: #EEE; background: #eee;
color: #993300; color: #993300;
padding: 5px; } padding: 5px; }
&.offensive { &.offensive {
...@@ -2366,7 +2367,7 @@ button::-moz-focus-inner { ...@@ -2366,7 +2367,7 @@ button::-moz-focus-inner {
// .submit { // .submit {
// cursor: pointer; // cursor: pointer;
// background-color: #D4D0C8; // background-color: #d4d0c8;
// height: 30px; // height: 30px;
// border: 1px solid #777777; // border: 1px solid #777777;
// font-weight: bold; // font-weight: bold;
...@@ -2399,9 +2400,9 @@ button::-moz-focus-inner { ...@@ -2399,9 +2400,9 @@ button::-moz-focus-inner {
text-align: center; text-align: center;
font-family: sans-serif; font-family: sans-serif;
font-size: 120%; font-size: 120%;
font-weight: Bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
background-color: #AE0000; } background-color: #ae0000; }
.big { .big {
font-size: 14px; } font-size: 14px; }
...@@ -2421,7 +2422,7 @@ button::-moz-focus-inner { ...@@ -2421,7 +2422,7 @@ button::-moz-focus-inner {
border-top: 1px dashed #aaaaaa; } border-top: 1px dashed #aaaaaa; }
.highlight { .highlight {
background-color: #FFF8C6; } background-color: #fff8c6; }
.nomargin { .nomargin {
margin: 0; } margin: 0; }
...@@ -2518,33 +2519,33 @@ ul.form-horizontal-rows { ...@@ -2518,33 +2519,33 @@ ul.form-horizontal-rows {
font-weight: bold; font-weight: bold;
vertical-align: top; } vertical-align: top; }
ul { // ul {
&.post-tags { // &.post-tags {
margin-left: 3px; // margin-left: 3px;
li { // li {
margin-top: 4px; // margin-top: 4px;
margin-bottom: 3px; } } // margin-bottom: 3px; } }
&.post-retag { // &.post-retag {
margin-bottom: 0px; // margin-bottom: 0px;
margin-left: 5px; } } // margin-left: 5px; } }
#question-controls .tags { // #question-controls .tags {
margin: 0 0 3px 0; } // margin: 0 0 3px 0; }
#tagSelector { // #tagselector {
padding-bottom: 2px; // padding-bottom: 2px;
margin-bottom: 0; } // margin-bottom: 0; }
#related-tags { // #related-tags {
padding-left: 3px; } // padding-left: 3px; }
#hideIgnoredTagsControl { #hideignoredtagscontrol {
margin: 5px 0 0 0; margin: 5px 0 0 0;
label { label {
font-size: 12px; font-size: 12px;
color: #666; } } color: #666; } }
#hideIgnoredTagsCb { #hideignoredtagscb {
margin: 0 2px 0 1px; } margin: 0 2px 0 1px; }
#recaptcha_widget_div { #recaptcha_widget_div {
...@@ -2620,18 +2621,18 @@ p.signup_p { ...@@ -2620,18 +2621,18 @@ p.signup_p {
li { li {
display: inline; } } display: inline; } }
.user-profile-page { // .user-profile-page {
.avatar p { // .avatar p {
margin-bottom: 0px; } // margin-bottom: 0px; }
.tabBar a#stats { // .tabbar a#stats {
margin-left: 0; } // margin-left: 0; }
img.gravatar { // img.gravatar {
margin: 2px 0 3px 0; } // margin: 2px 0 3px 0; }
h3 { // h3 {
padding: 0; // padding: 0;
margin-top: -3px; } } // margin-top: -3px; } }
.userList { .userlist {
font-size: 13px; } font-size: 13px; }
img.flag { img.flag {
...@@ -2666,8 +2667,8 @@ a.edit { ...@@ -2666,8 +2667,8 @@ a.edit {
.pln { .pln {
color: #000; } color: #000; }
.tag { // .tag {
color: #008; } // color: #008; }
.atn { .atn {
color: #606; } color: #606; }
......
...@@ -16,74 +16,21 @@ ...@@ -16,74 +16,21 @@
border: 1px solid #ccc; border: 1px solid #ccc;
text-decoration: none; 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;
}
}
.action-link {
a { a {
text-transform: capitalize; color: darken(#F6EFD4, 50%);
text-shadow: none;
font-size: 14px;
&.on { &:hover {
font-weight: bold; text-decoration: none;
} color: darken(#F6EFD4, 70%);
}
}
}
}
&.search-box {
margin-left:2%;
text-align:right;
width: flex-grid(8);
input[type="text"] {
margin-right: 6px;
width: flex-grid(2,8);
} }
} }
}
} // Layout
} body.askbot {
}
section.main-content { section.main-content {
div.discussion-wrapper { div.discussion-wrapper {
...@@ -92,18 +39,21 @@ body.askbot { ...@@ -92,18 +39,21 @@ body.askbot {
div.discussion-content { div.discussion-content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: $gw-gutter; padding: lh();
vertical-align: top; vertical-align: top;
width: flex-grid(9); width: flex-grid(9) + flex-gutter();
p.tabula-rasa { .tabula-rasa {
@extend .light-button;
@include border-radius(5px); @include border-radius(5px);
background-color: #f6f6f6; display: block;
color: #888;
margin: 10px auto; margin: 10px auto;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
width: flex-grid(5); width: flex-grid(5);
text-decoration: none;
color: #888;
font-weight: bold;
&:first-child { &:first-child {
margin-top: 70px; margin-top: 70px;
...@@ -112,54 +62,14 @@ body.askbot { ...@@ -112,54 +62,14 @@ body.askbot {
margin-bottom: 70px; margin-bottom: 70px;
} }
a { // span, a {
text-decoration: none; // text-decoration: none;
color: #888; // color: #888;
font-weight: bold; // font-weight: bold;
} // }
}
}
aside {
@extend .sidebar;
@include box-shadow(inset 1px 0 0 #f6f6f6);
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;
}
}
} }
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
} }
#wmd-button-bar { #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; border: 1px solid #ddd;
height:36px; height:36px;
float:left; float:left;
......
...@@ -13,17 +13,27 @@ form.answer-form { ...@@ -13,17 +13,27 @@ form.answer-form {
} }
div.form-item { div.form-item {
margin: 25px 0; margin: 15px 0;
label { label {
display: block; display: block;
margin-bottom: -5px; margin-bottom: -5px;
} }
.title-desc {
@include box-sizing(border-box);
background: #333;
color: #fff;
font-size: 13px;
padding: 5px 10px;
width: flex-grid(6);
-webkit-font-smoothing: antialiased;
}
} }
span.form-error, label.form-error { span.form-error, label.form-error {
color: #990000; color: #990000;
display: inline; display: inline-block;
font-size: 90%; font-size: 90%;
font-weight: bold; font-weight: bold;
padding: 10px 0; padding: 10px 0;
...@@ -73,7 +83,12 @@ form.question-form { ...@@ -73,7 +83,12 @@ form.question-form {
padding: 0; padding: 0;
margin-top: -15px; margin-top: -15px;
h1 a {
float: right;
}
input[type="text"] { input[type="text"] {
@include box-sizing(border-box);
width: flex-grid(6); width: flex-grid(6);
} }
......
.vote-notification {
background-color: darken($mit-red, 7%);
@include border-radius(4px);
@include box-shadow(0px 2px 9px #aaa);
color: white;
cursor: pointer;
display: none;
font-size: 14px;
font-weight: normal;
padding-bottom: 10px;
position: absolute;
text-align: center;
h3 {
background: $mit-red;
padding: 10px 10px 10px 10px;
font-size: 13px;
margin-bottom: 5px;
border-bottom: darken(#8e0000, 10%) 1px solid;
@include box-shadow(0 1px 0 lighten($mit-red, 10%));
color: #fff;
font-weight: normal;
@include border-radius(4px 4px 0 0);
}
a {
color: #fb7321;
text-decoration: underline;
font-weight: bold; } }
body.user-profile-page {
section.user-info {
// @extend .sidebar;
header {
@extend .clearfix;
section {
float: left;
width: flex-grid(2, 3);
margin-right: flex-gutter(3);
h1 {
@extend h2;
margin-top: 0;
}
}
p.karma {
float: left;
width: flex-grid(1, 3);
border: 1px solid #D3D3D3;
@include border-radius(3px);
@include box-shadow(inset 0 0 0 1px #fff, 0 1px 0 #fff);
background: #eee;
text-align: center;
padding: lh(.5) 0;
strong {
display: block;
font-style: 20px;
}
}
}
}
section.questions {
h1 {
@extend .top-header;
}
}
ul.sub-info {
border-top: 1px solid #ddd;
margin-top: lh();
list-style: none;
> li {
width: flex-grid(2.25, 9);
display: table-cell;
padding: (flex-gutter(9)/2);
border-right: 1px solid #ddd;
@include box-sizing(border-box);
&:first-child {
padding-left: 0;
}
&:last-child {
border-right: 0;
padding-right: 0;
}
h2 {
margin-top: 0;
}
span.tag-number {
display: none;
}
}
ul {
list-style: none;
&.user-stats-table {
list-style: none;
}
&.vote-buttons {
list-style: none;
li {
@include border-radius(4px);
background-color: lighten(#F6EFD4, 3%);
background-position: 10px center;
background-repeat: no-repeat;
height: 20px;
padding: 10px 10px 10px 40px;
display: inline-block;
&.up {
background-image: url(/static/images/askbot/vote-arrow-up.png);
margin-right: 6px;
}
&.down {
background-image: url(/static/images/askbot/vote-arrow-down.png);
}
}
}
&.badges {
@include border-radius(4px);
background-color: #e3e3e3;
@include inline-block();
a {
border: 0;
background: none;
text-transform: uppercase;
color: #292309;
font-size: 12px;
padding: 10px;
text-shadow: 0 1px 0 #fff;
display: block;
}
}
}
}
}
...@@ -93,17 +93,17 @@ div.question-header { ...@@ -93,17 +93,17 @@ div.question-header {
float: left; float: left;
margin-right: flex-gutter(8); margin-right: flex-gutter(8);
width: flex-grid(6.2,8); width: flex-grid(6.2,8);
} }
div.post-update-container { div.post-update-container {
display: inline-block; display: inline-block;
float: left; float: left;
width: flex-grid(1.8,8); width: flex-grid(1.8,8);
border-left: 1px dotted #CCC;
div.post-update-info { div.post-update-info {
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(5px);
background:lighten(#F6EFD4, 5%);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -126,29 +126,19 @@ div.question-header { ...@@ -126,29 +126,19 @@ div.question-header {
div.change-date { div.change-date {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 2px;
} }
div.avatar { div.user-meta {
display: inline-block; display: inline-block;
float: left;
margin-right: 3px;
img.gravatar { span.username {
background: white; font-size: 20px;
border: 1px solid darken(#F6EFD4, 10%);
margin-right: 5px; margin-right: 5px;
padding: 3px ;
vertical-align: bottom;
} }
}
div.user-meta {
display: inline-block;
width: 60%;
span.user-badges { span.user-badges {
display: block; // display: block;
} }
} }
} }
...@@ -157,10 +147,8 @@ div.question-header { ...@@ -157,10 +147,8 @@ div.question-header {
div.comments-container { div.comments-container {
@include box-sizing(border-box); @include box-sizing(border-box);
// background: lighten(#efefef, 3%);
padding: 3%; padding: 3%;
display: inline-block; display: inline-block;
// margin: 15px 0 0;
padding: 3%; padding: 3%;
width: 100%; width: 100%;
...@@ -176,9 +164,6 @@ div.question-header { ...@@ -176,9 +164,6 @@ div.question-header {
&:first-child { &:first-child {
border-top: 0; border-top: 0;
} }
// &:last-child {
// border-bottom: 1px solid #ddd;
// }
} }
form.post-comments { form.post-comments {
...@@ -310,4 +295,18 @@ div.question-header { ...@@ -310,4 +295,18 @@ div.question-header {
} }
} }
div.question-status {
background: $mit-red;
clear:both;
color: #fff;
display: block;
padding: 10px 0 10px 7.5%;
h3 {
font-weight: normal;
}
a {
color: #eee;
}
}
div.question-controls { div.question-list-header {
display: block; display: block;
margin-bottom: 30px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
width: flex-grid(9,9); width: flex-grid(9,9);
section.question-list-meta {
display: block;
overflow: hidden;
width: 100%;
div { div {
display: inline-block; display: inline-block;
float: left;
} }
div.question-count { span.label {
color: #555;
}
div.question-list-title {
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(4,9);
h1 { h1 {
margin-top: 0; margin-top: 0;
} }
} }
div.question-sort { div.question-sort {
vertical-align: bottom; float: right;
width: flex-grid(5,9); margin-left: flex-gutter();
margin-top: 10px;
nav { nav {
@include border-radius(35px); @extend .action-link;
background-color: lighten(#F6EFD4, 5%) ;
height: 30px;
float: right; float: right;
font-size: 16px;
margin: 3px 0;
padding:0px 20px 5px;
a { a {
color: darken(#F6EFD4, 50%);
&.on span{ &.on span{
font-weight: bold; font-weight: bold;
} }
...@@ -40,19 +44,40 @@ div.question-controls { ...@@ -40,19 +44,40 @@ div.question-controls {
&:before { &:before {
content: '|'; content: '|';
color: darken(#F6EFD4, 10%); color: darken(#F6EFD4, 10%);
font-size: 22px; font-size: 16px;
}
}
}
}
} }
&:hover { section.question-tags-list {
text-decoration: none; display: block;
color: darken(#F6EFD4, 70%); 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); width: flex-grid(9,9);
li.single-question { li.single-question {
...@@ -61,7 +86,7 @@ ul.question-list { ...@@ -61,7 +86,7 @@ ul.question-list {
padding: 10px 0; padding: 10px 0;
&:hover { &:hover {
background: lighten(#F6EFD4, 8%); background: #fbfbfb;
} }
div { div {
...@@ -75,7 +100,7 @@ ul.question-list { ...@@ -75,7 +100,7 @@ ul.question-list {
h2 { h2 {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: bold;
margin: 0px 0 15px 0; margin: 0px 0 15px 0;
text-transform: none; text-transform: none;
} }
...@@ -106,27 +131,31 @@ ul.question-list { ...@@ -106,27 +131,31 @@ ul.question-list {
text-align: right; text-align: right;
li { li {
@include border-radius(3px); @include linear-gradient(#fff, #f5f5f5);
border: 1px solid #eee;
display: inline-block; display: inline-block;
height:60px; height:60px;
margin-right: 10px; margin-right: 10px;
width: 60px; width: 60px;
&:hover {
span, div {
color: #555;
}
}
&.views { &.views {
background: lighten(#F6EFD4, 5%);
} }
&.answers { &.answers {
background: #F6EFD4;
} }
&.votes { &.votes {
background: darken(#F6EFD4, 5%);
} }
span, div { span, div {
@include box-sizing(border-box); @include box-sizing(border-box);
color: darken(#F6EFD4, 60%); color: #888;
display: block; display: block;
text-align: center; text-align: center;
} }
...@@ -149,10 +178,15 @@ ul.question-list { ...@@ -149,10 +178,15 @@ ul.question-list {
} }
} }
}
div.search-tips { div.post-own-question {
display: block; border-top: 1px solid #efefef;
padding: 10px;
a {
font-weight: bold;
}
}
} }
.search-result-summary { .search-result-summary {
......
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;
}
}
}
ul.tags { ul.tags {
list-style: none; list-style: none;
display: inline;
li, a { li, a {
position: relative; position: relative;
} }
li { li {
@include border-radius(4px);
background: #eee; background: #eee;
@include border-radius(4px);
@include box-shadow(1px 1px 0px #bbb);
color: #555; color: #555;
display: inline; display: inline-block;
font-size: 12px; font-size: 12px;
margin-bottom: 5px;
margin-left: 15px; margin-left: 15px;
padding: 3px 10px 5px 5px; padding: 3px 10px 5px 5px;
&:before { &:before {
border-color:transparent #eee transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
content:""; content:"";
height:0;
left:-10px;
position:absolute; position:absolute;
top:0; top:0;
left:-11px;
width:0; width:0;
height:0; }
border-color:transparent #eee transparent transparent;
border-style:solid; span.delete-icon, div.delete-icon {
border-width:12px 12px 12px 0; background: #555;
@include border-radius(0 4px 4px 0);
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 {
display: none;
// @include border-radius(3px);
// background: #555;
// font-size: 10px;
// margin: 0 3px;
// padding: 2px 5px;
// color: #eee;
// opacity: 0.5;
} }
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;
}
}
}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto; margin: 0 auto;
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; // min-width: $fg-min-width;
padding: lh(); padding: lh();
width: flex-grid(12); width: flex-grid(12);
} }
...@@ -14,8 +14,13 @@ ...@@ -14,8 +14,13 @@
> div { > div {
padding-left: flex-grid(4) + flex-gutter(); padding-left: flex-grid(4) + flex-gutter();
@media screen and (max-width: 940px) {
padding-left: 0;
}
p { p {
margin-bottom: lh(); margin-bottom: lh();
line-height: lh();
} }
h1 { h1 {
...@@ -33,6 +38,15 @@ ...@@ -33,6 +38,15 @@
li { li {
list-style: disc outside none; list-style: disc outside none;
line-height: lh();
}
}
dl {
margin-bottom: lh();
dd {
margin-bottom: lh(.5);
} }
} }
} }
......
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;
}
}
}
}
}
}
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%;
}
}
}
}
}
}
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;
}
...@@ -5,7 +5,7 @@ $fg-column: 60px; ...@@ -5,7 +5,7 @@ $fg-column: 60px;
$fg-gutter: 25px; $fg-gutter: 25px;
$fg-max-columns: 12; $fg-max-columns: 12;
$fg-max-width: 1400px; $fg-max-width: 1400px;
$fg-min-width: 810px; $fg-min-width: 781px;
$gw-column: 60px; $gw-column: 60px;
$gw-gutter: 25px; $gw-gutter: 25px;
...@@ -13,16 +13,8 @@ $gw-gutter: 25px; ...@@ -13,16 +13,8 @@ $gw-gutter: 25px;
$body-font-family: Georgia, serif; $body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif; $header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
// @media screen and (min-width: 940px) { $body-font-size: 16px;
$body-font-size: 16px; $body-line-height: golden-ratio($body-font-size, 1);
// }
// @media screen and (max-width: 939px) {
// $body-font-size: 14px;
// }
$lh: golden-ratio($body-font-size, 1);
// Colors // Colors
$mit-red: #933; $mit-red: #933;
......
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;
}
}
}
}
}
html { div.header-wrapper {
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; background: $mit-red;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
@include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
header { header {
@extend .clearfix; @extend .clearfix;
...@@ -23,25 +12,38 @@ html { ...@@ -23,25 +12,38 @@ html {
hgroup { hgroup {
@extend .clearfix; @extend .clearfix;
float: left; float: left;
min-width: flex-grid(3);
padding-top: 13px;
h1 { h1 {
border-right: 1px solid darken($mit-red, 5%);
color: darken($mit-red, 25%); color: darken($mit-red, 25%);
font-size: 20px; font-size: 18px;
font-weight: 800; 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(); @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 { h2 {
font-size: 16px;
@include inline-block(); @include inline-block();
margin: 0 lh() 0 0; letter-spacing: 0;
padding: 19px lh() 9px 0; margin: 0;
line-height: lh(); padding: 0 lh() 0px 0;
border-right: 1px solid darken($mit-red, 5%); text-shadow: 0 -1px 0 darken($mit-red, 10%);
text-transform: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
a { a {
...@@ -54,128 +56,121 @@ html { ...@@ -54,128 +56,121 @@ html {
} }
} }
@media screen and (max-width: 920px) {
border-bottom: 1px solid darken($mit-red, 5%); @media screen and (max-width: 900px) {
display: block; display: block;
float: none; float: none;
h1 { h1 {
float: right;
border: 0; border: 0;
margin-right: 0; float: left;
padding-right: 0;
} }
h2 { h2 {
float: left;
border: 0; border: 0;
float: left;
margin-right: 0; margin-right: 0;
padding-right: 0;
} }
} }
} }
nav { nav {
float: left; 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; display: block;
margin: 0; float: left;
margin: 5px 0 0;
padding: 0; padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%); text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
ul { ul {
@extend .clearfix; @extend .clearfix;
display: inline-block;
padding: 19px 0 9px;
margin: 0; margin: 0;
li { li {
margin-right: lh();
display: inline-block;
margin-bottom: 0;
line-height: lh(); line-height: lh();
margin-bottom: 0;
float: left;
a { a {
color: #fff; color: #fff;
display: block;
font-weight: bold;
padding: 10px lh() 8px;
text-decoration: none; text-decoration: none;
@media screen and (max-width: 1020px) {
padding: 10px lh(.7) 8px;
}
&:hover { &:hover {
color: rgba(#fff, .7); color: rgba(#fff, .7);
background-color: none; background-color: none;
text-decoration: none;
} }
} }
} }
} }
@media screen and (max-width: 900px) {
width: 100%;
float: none;
ul {
li {
padding: auto;
display: table-cell;
width: 16.6666666667%;
text-align: center;
} }
} }
} }
section.main-content { .active {
@extend .clearfix; background: #F4F4F4;
@extend .wrapper; border: 1px solid darken(#501016, 10%);
@include box-sizing(border-box); border-bottom: 0;
@include border-radius(4px); @include border-radius(3px 3px 0 0);
overflow: hidden; @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
background: #fff; color: #333;
border-bottom: 1px solid #bbb; text-shadow: 0 1px 0 #fff;
}
@media screen and (min-width: 1400px) { &.courseware {
// @include border-radius(3px); li.courseware a {
@include box-shadow(0 0 4px #dfdfdf); @extend .active;
border: 1px solid #bbb;
margin-top: lh(.5);
} }
} }
img { &.book {
max-width: 100%; li.book a {
height: auto; @extend .active;
} }
} }
footer { &.info {
@extend .clearfix; li.info a {
@extend .wrapper; @extend .active;
@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;
} }
&.discussion {
li.discussion a {
@extend .active;
} }
} }
ul { &.wiki {
float: right; li.wiki a {
@extend .active;
li {
display: inline-block;
margin-right: 20px;
a {
color: #444;
&:link, &:visited {
color: #444;
} }
&:hover, &:focus {
color: #000;
} }
&.profile {
li.profile a {
@extend .active;
} }
} }
} }
......
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);
}
}
}
}
...@@ -10,24 +10,24 @@ ...@@ -10,24 +10,24 @@
} }
div.leanModal_box { div.leanModal_box {
background: #fff;
border: none;
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(0 0 6px #000); @include box-shadow(0 0 6px #000);
@include box-sizing(border-box); @include box-sizing(border-box);
display: none; display: none;
border: none;
background: #fff;
padding: lh(2); padding: lh(2);
a.modal_close { a.modal_close {
color: #aaa;
display: block;
font-style: normal;
height: 14px;
position: absolute; position: absolute;
top: 12px;
right: 12px; right: 12px;
display: block; top: 12px;
width: 14px; width: 14px;
height: 14px;
z-index: 2; z-index: 2;
color: #aaa;
font-style: normal;
&:hover{ &:hover{
text-decoration: none; text-decoration: none;
...@@ -36,17 +36,21 @@ div.leanModal_box { ...@@ -36,17 +36,21 @@ div.leanModal_box {
} }
h1 { h1 {
border-bottom: 1px solid #eee;
font-size: 24px; font-size: 24px;
margin-bottom: lh();
margin-top: 0; margin-top: 0;
padding-bottom: lh(); padding-bottom: lh();
border-bottom: 1px solid #eee;
margin-bottom: lh();
text-align: left; text-align: left;
} }
&#enroll { &#enroll {
max-width: 600px; max-width: 600px;
p.ie-warning {
display: none;
}
ol { ol {
@extend .clearfix; @extend .clearfix;
...@@ -63,16 +67,16 @@ div.leanModal_box { ...@@ -63,16 +67,16 @@ div.leanModal_box {
&:hover { &:hover {
div.tip { div.tip {
display: block;
line-height: lh();
position: absolute;
background: #333; background: #333;
color: #fff; color: #fff;
width: 500px; display: block;
font-size: 16px;
line-height: lh();
margin: 0 0 0 -10px; margin: 0 0 0 -10px;
padding: 10px; padding: 10px;
position: absolute;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 16px; width: 500px;
} }
} }
} }
...@@ -84,16 +88,16 @@ div.leanModal_box { ...@@ -84,16 +88,16 @@ div.leanModal_box {
div#enroll_error, div#login_error, div#pwd_error { div#enroll_error, div#login_error, div#pwd_error {
$error-color: #333; $error-color: #333;
-webkit-font-smoothing: antialiased;
background-color: $error-color; background-color: $error-color;
border: darken($error-color, 20%); border: darken($error-color, 20%);
color: #fff; color: #fff;
text-shadow: 0 1px 0 darken($error-color, 10%);
font-family: "Open sans"; font-family: "Open sans";
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
margin: (-(lh())) (-(lh())) lh(); margin: (-(lh())) (-(lh())) lh();
padding: lh(.5); padding: lh(.5);
text-shadow: 0 1px 0 darken($error-color, 10%);
-webkit-font-smoothing: antialiased;
&:empty { &:empty {
padding: 0; padding: 0;
...@@ -108,11 +112,11 @@ div.leanModal_box { ...@@ -108,11 +112,11 @@ div.leanModal_box {
margin-bottom: lh(.5); margin-bottom: lh(.5);
&.terms, &.remember { &.terms, &.remember {
float: none; border-top: 1px solid #eee;
width: auto;
clear: both; clear: both;
float: none;
padding-top: lh(); padding-top: lh();
border-top: 1px solid #eee; width: auto;
} }
&.honor-code { &.honor-code {
...@@ -139,11 +143,11 @@ div.leanModal_box { ...@@ -139,11 +143,11 @@ div.leanModal_box {
margin: lh(.5) 0 lh() lh(); margin: lh(.5) 0 lh() lh();
li { li {
list-style: disc outside none;
margin-bottom: lh(.5);
color: #666; color: #666;
font-size: 14px;
float: none; float: none;
font-size: 14px;
list-style: disc outside none;
margin-bottom: lh(.5);
} }
} }
} }
...@@ -221,7 +225,6 @@ div#feedback_div{ ...@@ -221,7 +225,6 @@ div#feedback_div{
div#calculator_div { div#calculator_div {
max-width: 500px; max-width: 500px;
form { form {
padding-bottom: lh(); padding-bottom: lh();
margin-bottom: lh(); margin-bottom: lh();
...@@ -246,11 +249,12 @@ div#calculator_div { ...@@ -246,11 +249,12 @@ div#calculator_div {
input#calculator_output { input#calculator_output {
border: 0; border: 0;
background: 0; background: none;
padding: lh(.35); padding: lh(.35);
width: 60px;
font-size: 24px; font-size: 24px;
width: 378px;
font-weight: bold; font-weight: bold;
margin-top: 4px;
} }
} }
......
...@@ -7,3 +7,14 @@ body { ...@@ -7,3 +7,14 @@ body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
div#enroll {
p.ie-warning {
display: block !important;
line-height: 1.3em;
}
form {
display: none;
}
}
@import "bourbon/bourbon"; @import "bourbon/bourbon";
@import "reset"; @import "base/reset", "base/font-face", "base/functions";
@import "font-face";
// pages // pages
@import "index-functions", "index-variables", "index-extends", "index"; @import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "leanmodal"; @import "layout/leanmodal";
.header-wrapper {display:none;}
#accordion {display:none;}
.ui-accordion {display:none;
visibility:hidden;
width:0%;
}
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;
}
}
}
}
}
...@@ -2,76 +2,6 @@ div.wiki-wrapper { ...@@ -2,76 +2,6 @@ div.wiki-wrapper {
display: table; display: table;
width: 100%; 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 { section.wiki-body {
@extend .content; @extend .content;
......
../data/problems/schematic_tutorial.html
\ No newline at end of file
<div class="staff_info">
${xml | h}
</div>
...@@ -16,19 +16,19 @@ function goto_page(n) { ...@@ -16,19 +16,19 @@ function goto_page(n) {
if(n<10) { if(n<10) {
prefix="00"; 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() { function prev_page() {
var newpage=page-1; var newpage=page-1;
if(newpage<1) newpage=1; if(newpage<0) newpage=0;
goto_page(newpage); goto_page(newpage);
log_event("book", {"type":"prevpage","new":page}); log_event("book", {"type":"prevpage","new":page});
} }
function next_page() { function next_page() {
var newpage=page+1; var newpage=page+1;
if(newpage>1764) newpage=1764; if(newpage>1008) newpage=1008;
goto_page(newpage); goto_page(newpage);
log_event("book", {"type":"nextpage","new":page}); log_event("book", {"type":"nextpage","new":page});
} }
...@@ -56,7 +56,18 @@ function next_page() { ...@@ -56,7 +56,18 @@ function next_page() {
</ul> </ul>
</nav> </nav>
<img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.jpg"> <img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.png">
<nav class="bottom-nav">
<ul>
<li class="last">
<a href="javascript:prev_page()">Previous page</a>
</li>
<li class="next">
<a href="javascript:next_page()">Next page</a>
</li>
</ul>
</nav>
</section> </section>
</section> </section>
</div> </div>
......
...@@ -78,9 +78,7 @@ intent of misleading others. ...@@ -78,9 +78,7 @@ intent of misleading others.
<li>You, furthermore, agree not to scrape, or otherwise download in <li>You, furthermore, agree not to scrape, or otherwise download in
bulk, user-contributed content, a list or directory of users on the bulk, user-contributed content, a list or directory of users on the
system, or other material including but not limited to on-line system, or other material including but not limited to on-line
textbooks, User Postings, or user information. You agree not to store textbooks, User Postings, or user information.
more than 5 pages of the electronic textbook or 5 forum posts in any
permanent medium (hard drive, optical disk, etc., flash drive, etc.).
<lu>You agree to not misrepresent or attempt to misrepresent your <lu>You agree to not misrepresent or attempt to misrepresent your
identity while using the Sites (although you are welcome and identity while using the Sites (although you are welcome and
encouraged to use an anonymous username in the forums). encouraged to use an anonymous username in the forums).
...@@ -215,7 +213,8 @@ risk. Your access to or download of information, materials, or data ...@@ -215,7 +213,8 @@ risk. Your access to or download of information, materials, or data
through the Site or any reference sites is at your own discretion and through the Site or any reference sites is at your own discretion and
risk and that you will be solely responsible for any damage to your risk and that you will be solely responsible for any damage to your
property (including your computer system) or loss of data that results property (including your computer system) or loss of data that results
from the download or use of such material or data.</p> from the download or use of such material or data. We may close or
limit enrollment for pedagogical or technological reasons.</p>
<p><strong>User Postings Disclaimer.</strong> You understand that when <p><strong>User Postings Disclaimer.</strong> You understand that when
using the Site you will be exposed to User Postings from a variety of using the Site you will be exposed to User Postings from a variety of
...@@ -301,6 +300,6 @@ consent to the personal jurisdiction of and exclusive venue in the ...@@ -301,6 +300,6 @@ consent to the personal jurisdiction of and exclusive venue in the
federal and state courts located in and serving Boston, Massachusetts federal and state courts located in and serving Boston, Massachusetts
as the legal forum for any such dispute.</p> as the legal forum for any such dispute.</p>
<p><strong>Effective Date:</strong> February 6, 2012</p><div> <p><strong>Effective Date:</strong> February 20, 2012</p><div>
</div> </div>
</section> </section>
...@@ -58,15 +58,23 @@ for(var i=0; i<l.length; i++) { ...@@ -58,15 +58,23 @@ for(var i=0; i<l.length; i++) {
add_speed(l[i], streams[l[i]]) add_speed(l[i], streams[l[i]])
} }
//toggle video play/pause. the HTML assumes video is always autoplayed function toggleVideo(){
//initially since it starts with class "pause". may want to set that in if ($("#video_control").hasClass("play")){
//javascript
$("#video_control").click(function(){
if ($(this).hasClass("play")){
play(); play();
$(this).removeClass().addClass("pause"); $("#video_control").removeClass().addClass("pause");
} else { } else {
pause(); pause();
$(this).removeClass().addClass("play"); $("#video_control").removeClass().addClass("play");
}
}
$("#video_control").click(toggleVideo);
// space bar to pause video
$(".video-wrapper").keyup(function(e){
active = document.activeElement;
if (e.which == 32) {
e.preventDefault();
$("#video_control").click();
} }
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment