+
+
+
+
+
+
+
+
+
Credits
+
+
The team of instructors is Anant Agarwal, Piotr Mitros, Chris
+ Terman, and Gerald Sussman. Our intrepid team of TAs is
+
+
The main codebase was crammed out in two months by Piotr
+ Mitros. Evgeny Fadeev helped integrate Askbot into the
+ system. Schematic entry and circuit simulation are by Chris
+ Terman. Jean-Michel Claus designed the applets. IT and infrastructure
+ are managed by Scott Bloomquist of TechSquare, Inc.
+
+
The codebase was made possible by Django, JQuery, JQueryUI,
+ MathJAX, swfobject, askbot, django-simplewiki, pyparsing, and the
+ original FancyBox. Graphic design and css started from a free template
+ from dotemplate.com , one of
+ the few, genuinely free template web sites (although you have to
+ e-mail the owner to find that out), and was heavily modified by Piotr
+ Mitros, and later, thoughtbot.
+
+
The system is running in the Amazon cloud, which allows us to hold up to anticipated loads.
+
+
+
diff --git a/credits.html.orig b/credits.html.orig
new file mode 100644
index 0000000000..67485cf1e0
--- /dev/null
+++ b/credits.html.orig
@@ -0,0 +1,53 @@
+<%inherit file="main.html" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Credits
+
+
The team of instructors is Anant Agarwal, Piotr Mitros, Chris
+ Terman, and Gerald Sussman. Our intrepid team of TAs is
+
+
The main codebase was crammed out in two months by Piotr
+ Mitros. Evgeny Fadeev helped integrate Askbot into the
+ system. Schematic entry and circuit simulation are by Chris
+ Terman. Jean-Michel Claus designed the applets. IT and infrastructure
+ are managed by Scott Bloomquist of TechSquare, Inc.
+
+
The codebase was made possible by Django, JQuery, JQueryUI,
+ MathJAX, swfobject, askbot, django-simplewiki, pyparsing, and the
+ original FancyBox. Graphic design and css started from a free template
+ from dotemplate.com , one of
+ the few, genuinely free template web sites (although you have to
+ e-mail the owner to find that out), and was heavily modified by Piotr
+ Mitros, and later, thoughtbot.
+
+
The system is running in the Amazon cloud, which allows us to hold up to anticipated loads.
+
+
+
diff --git a/help.html b/help.html
index 75ab5d1e00..8b1abcff84 100644
--- a/help.html
+++ b/help.html
@@ -1,41 +1,24 @@
<%inherit file="main.html" />
-
-
-
-
Help
+<%include file="navigation.html" />
-
If you need help, first try asking
-a question in the forums and in the IRC channel (irc.mitx.org,
-channel #6002). As the semester starts, we will add a Frequently Asked
-Questions section.
+
+ Help
- If you can't solve your problems with self-help, we have several
-e-mail addresses set up:
-
- technical@mitx.mit.edu
- System-related questions
- content@mitx.mit.edu
- Content-related questions
- bugs@mitx.mit.edu
- Bug reports
- suggestions@mitx.mit.edu
- Suggestions
-
- Please bear in mind that while we read them, we do not expect to
-have time to respond to all e-mails.
-
-
+
If you need help, first try asking a question in the forums and in the IRC channel (irc.mitx.org, channel #6002). As the semester starts, we will add a Frequently Asked Questions section.
+
+
If you can't solve your problems with self-help, we have several e-mail addresses set up:
+
+
+ technical@mitx.mit.edu
+ System-related questions
+ content@mitx.mit.edu
+ Content-related questions
+ bugs@mitx.mit.edu
+ Bug reports
+ suggestions@mitx.mit.edu
+ Suggestions
+
+
+
Please bear in mind that while we read them, we do not expect to have time to respond to all e-mails.
+
diff --git a/homework.html b/homework.html
index 6e5a83b15e..86f356dbc6 100644
--- a/homework.html
+++ b/homework.html
@@ -1,10 +1,14 @@
${ homework['name']}
+
% for problem in homework['problems']:
- ${ problem['name'] }
- ${ problem['html'] }
-
+ ${ problem['name'] }
+ ${ problem['html'] }
+
% endfor
+
diff --git a/index.html b/index.html
index d1ae7f8168..6e354074b7 100644
--- a/index.html
+++ b/index.html
@@ -74,76 +74,78 @@ $(function() {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Enroll >> Log In >>
-
-Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
-Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
-MIT's first undergraduate analog design course. This course will run,
-free of charge, for students worldwide from February 1, 2012 through
-July 1, 2012.
-
-
Students who successfully complete the course will receive an
-electronic certificate of accomplishment from MIT. Students will not
-receive course credit, but students successfully finishing the course
-will be well-placed to take an exam to pass out of 6.002 should they
-ever enroll at MIT, and potentially, similar courses at other schools.
-
-
In order to succeed in this course, students must have some
-background in calculus and differential equations. 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.
-
+
-
<%include file="create_account.html" />
-
<%include file="login.html" />
-
<%include file="password_reset_form.html" />
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enroll >> Log In >>
+
+ Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
+ Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
+ MIT's first undergraduate analog design course. This course will run,
+ free of charge, for students worldwide from February 1, 2012 through
+ July 1, 2012.
+
+
+
+ <%include file="create_account.html" />
<%include file="login.html" />
<%include file="password_reset_form.html" />
+
-
-
-
-
+
+
-
-
-
+
+
+
+
+
diff --git a/index.html.orig b/index.html.orig
new file mode 100644
index 0000000000..6e354074b7
--- /dev/null
+++ b/index.html.orig
@@ -0,0 +1,151 @@
+<%inherit file="main.html" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enroll >> Log In >>
+
+ Taught by Anant Agarwal, with Gerald Sussman, Piotr Mitros, and Chris
+ Terman, "6.002 Circuits and Electronics" is an an on-line adaption of
+ MIT's first undergraduate analog design course. This course will run,
+ free of charge, for students worldwide from February 1, 2012 through
+ July 1, 2012.
+
+
+
+ <%include file="create_account.html" />
<%include file="login.html" />
<%include file="password_reset_form.html" />
+
+
+
+
+
+
+
+
+
+
+
diff --git a/info.html b/info.html
index af89db648d..f525946589 100644
--- a/info.html
+++ b/info.html
@@ -1,7 +1,9 @@
<%inherit file="main.html" />
+
+
diff --git a/main.html b/main.html
index 0189a0f644..056ad74944 100644
--- a/main.html
+++ b/main.html
@@ -1,29 +1,29 @@
-
+
- MITX 6.002
-MITX 6.002
+
+
-
-
+
+
Found a bug? Got an
idea for improving our system? Let us know.
@@ -85,10 +82,15 @@ idea for improving our system? Let us know.
});
MITX 6.002
+
+ ${ problem['name'] }
${ problem['html'] }
-
- ${name}
-Forum name: ${username}
-E-mail: ${email}
- Location: ${location}
-Language:
${language}
Password:
********
+<%include file="navigation.html" />
-
+
+
+
-
+ ${name}
- Course Progress
-
- % for hw in homeworks:
- ${ hw['chapter'] } / ${ hw['section'] }
- % for score in hw['scores']:
- ${ score[0] }/${ score[1] }
- % endfor
-
-
+
+ Forum name: ${username}
+ E-mail: ${email}
+ Location: ${location}
+ Language: ${language}
+ Password: ********
+
-
-
-
Password reset
+
+
-Hit the button below, and we'll e-mail you a password reset link at ${email}.
+
+
Password reset
-
-
-
-
-
-
We'll e-mail you a password reset link at ${email}.
+
+
+
+ Course Progress
+
+
+
+
+ % for hw in homeworks:
+
+ ${ hw['chapter'] }
+ ${ hw['section'] }
+
+
+ % for score in hw['scores']:
+ ${ score[0] }/${ score[1] }
+ % endfor
+
+
+ % endfor
+
+
+
+
diff --git a/profile.html.orig b/profile.html.orig
new file mode 100644
index 0000000000..eeff106431
--- /dev/null
+++ b/profile.html.orig
@@ -0,0 +1,116 @@
+<%inherit file="main.html" />
+
+
+
+<%include file="navigation.html" />
+
+
+
+
+
+ ${name}
+
+
+ Forum name: ${username}
+ E-mail: ${email}
+ Location: ${location}
+ Language: ${language}
+ Password: ********
+
+
+
+
+
+
+
Password reset
+
+
We'll e-mail you a password reset link at ${email}.
+
+
+
+
+
+
+ Course Progress
+
+
+
+
+ % for hw in homeworks:
+
+ ${ hw['chapter'] }
+ ${ hw['section'] }
+
+
+ % for score in hw['scores']:
+ ${ score[0] }/${ score[1] }
+ % endfor
+
+
+ % endfor
+
+
+
diff --git a/sass/.DS_Store b/sass/.DS_Store
new file mode 100644
index 0000000000..293c0b03ea
Binary files /dev/null and b/sass/.DS_Store differ
diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
new file mode 100644
index 0000000000..e24b3c2c93
--- /dev/null
+++ b/sass/_base-extends.scss
@@ -0,0 +1,32 @@
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: $max-width;
+ width: grid-width(12);
+ text-align: left;
+}
+
+.button {
+ @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc);
+ @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+ @include border-radius(3px);
+ border: 1px solid darken($mit-red, 10%);
+ padding: 10px 15px;
+ color: #fff;
+ font: bold $body-font-size $body-font-family;
+ text-shadow: 0 1px 0 darken($mit-red, 10%);
+ cursor: pointer;
+
+ &:hover, &:focus {
+ @include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc);
+ @include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%));
+ border: 1px solid darken($mit-red, 20%);
+ }
+}
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
new file mode 100644
index 0000000000..356869ada3
--- /dev/null
+++ b/sass/_base-variables.scss
@@ -0,0 +1,34 @@
+// Percentage of container calculator
+@function perc($width, $container-width: $max-width) {
+ @return percentage($width / $container-width);
+}
+
+// Line-height
+@function lh($amount: 1) {
+ @return $base-line-height * $amount;
+}
+
+// Variables
+// ---------------------------------------- //
+
+// fonts
+$body-font-family: "Droid Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;;
+$body-font-size: 14px;
+
+// grid
+$columns: 12;
+$column-width: 80px;
+$gutter-width: 25px;
+$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
+
+$gw-column: perc($column-width);
+$gw-gutter: perc($gutter-width);
+$body-line-height: golden-ratio($body-font-size, 1);
+
+// color
+$light-gray: #ddd;
+$dark-gray: #333;
+$mit-red: #993333;
+
+$text-color: $dark-gray;
+$border-color: $light-gray;
diff --git a/sass/_base.scss b/sass/_base.scss
new file mode 100644
index 0000000000..95f3c30136
--- /dev/null
+++ b/sass/_base.scss
@@ -0,0 +1,33 @@
+h1 {
+
+}
+
+h2 {
+
+}
+
+h3 {
+
+}
+
+p {
+ margin-bottom: $body-line-height;
+}
+
+#{$all-text-inputs}, textarea {
+ @include border-radius(3px);
+ @include box-shadow(0 -1px 0 #fff);
+ @include linear-gradient(#eee, #fff);
+ border: 1px solid #bbb;
+ font: $body-font-size $body-font-family;
+ padding: 8px;
+
+ &:focus {
+ border-color: $mit-red;
+ }
+}
+
+input[type="submit"], input[type="button"], button {
+ // @extend .button;
+}
+
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
new file mode 100644
index 0000000000..6950690489
--- /dev/null
+++ b/sass/_courseware.scss
@@ -0,0 +1,157 @@
+div.course-wrapper {
+ display: table;
+ width: 100%;
+
+ div#accordion {
+ @include box-shadow( inset -1px 0 0 #f6f6f6);
+ background: #e3e3e3;
+ border-right: 1px solid #d3d3d3;
+ display: table-cell;
+ font-family: $body-font-family;
+ text-shadow: 0 1px 0 #f6f6f6;
+ vertical-align: top;
+ width: grid-width(3);
+
+ h3 {
+ &.ui-accordion-header {
+ color: #000;
+
+ a {
+ font-size: $body-font-size;
+ color: lighten($text-color, 10%);
+ }
+
+ &.ui-state-default {
+ background: none;
+ font-weight: normal;
+ border: none;
+ border-bottom: 1px solid #d3d3d3;
+ @include box-shadow(0 1px 0 #eee);
+ }
+
+ &.ui-state-hover {
+ border: none;
+ border-bottom: 1px solid #d3d3d3;
+ }
+
+ &.ui-state-active {
+ @include box-shadow(none);
+ background: none;
+ border: 0;
+ border-bottom: 1px solid #aaa;
+ color: #000;
+ font-weight: bold;
+
+ a {
+ color: #000;
+ }
+ }
+ }
+ }
+
+ ul.ui-accordion-content {
+ @include border-radius(0);
+ @include box-shadow( inset -1px 0 0 #e6e6e6);
+ background: #d6d6d6;
+ border-bottom: 1px solid #c3c3c3;
+ border-top: 1px solid #c3c3c3;
+ border: none;
+ font-size: 12px;
+ margin: 0;
+
+ li {
+ &.active {
+ font-weight: bold;
+ }
+ }
+ }
+ }
+
+ section.course-content {
+ @include box-sizing(border-box);
+ display: table-cell;
+ padding: $gw-gutter;
+ vertical-align: top;
+ width: grid-width(9);
+
+ ol.vert-mod {
+ li {
+ @extend .clearfix;
+ }
+ }
+
+ ol.sequence-nav {
+ margin-bottom: $body-line-height;
+
+ li {
+ cursor: pointer;
+ display: table-cell;
+ min-width: 30px;
+ min-height: 30px;
+ padding: 0 10px;
+ }
+ }
+
+ div.video-wrapper {
+ float: left;
+ width: 640px;
+ min-height: 500px;
+
+ section {
+ ul {
+ display: inline-block;
+
+ li {
+ margin-top: 5px;
+ display: inline-block;
+ cursor: pointer;
+
+ div {
+ &:empty {
+ display: none;
+ }
+ }
+ }
+ }
+
+ div#slider {
+ margin: -14px 0 10px 60px;
+ }
+
+ div#vidtime {
+ float: left;
+ }
+
+ div#video_speeds {
+ float: right;
+ cursor: pointer;
+
+ span {
+ &:hover {
+ color: $mit-red;
+ }
+ }
+ }
+ }
+ }
+
+ ol.subtitles {
+ width: 220px;
+ margin-left: 20px;
+ float: left;
+
+ li {
+ margin-bottom: 8px;
+ cursor: pointer;
+
+ &.current {
+ background-color: #f3f3f3;
+ }
+
+ &:hover {
+ color: $mit-red;
+ }
+ }
+ }
+ }
+}
diff --git a/sass/_font-face.scss b/sass/_font-face.scss
new file mode 100644
index 0000000000..132e3a0d75
--- /dev/null
+++ b/sass/_font-face.scss
@@ -0,0 +1,12 @@
+@font-face {
+ font-family: 'Droid Sans';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');
+}
+@font-face {
+ font-family: 'Droid Sans';
+ font-style: normal;
+ font-weight: bold;
+ src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMXbFhgvWbfSbdVg11QabG8w.woff') format('woff');
+}
diff --git a/sass/_layout.scss b/sass/_layout.scss
new file mode 100644
index 0000000000..4e7dd4fa42
--- /dev/null
+++ b/sass/_layout.scss
@@ -0,0 +1,111 @@
+html {
+ margin-top: 0;
+
+ body {
+ color: $dark-gray;
+ font: $body-font-size $body-font-family;
+ text-align: center;
+ margin: 0;
+ background: #f3f3f3;
+
+ div.header-wrapper {
+ @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
+ @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+ border-bottom: 1px solid darken($mit-red, 10%);
+
+ header {
+ @extend .clearfix;
+ @extend .wrapper;
+ @include box-sizing(border-box);
+ padding: 0 $body-line-height;
+
+ h1 {
+ border-right: 1px solid darken($mit-red, 5%);
+ font-size: $body-font-size;
+ font-weight: bold;
+ margin: 0 $gw-gutter 0 0;
+ padding: 15px $gw-gutter 15px 0;
+ display: block;
+ float: left;
+ color: #000;
+ text-shadow: 0 1px 0 lighten($mit-red, 10%);
+ }
+
+ nav {
+ float: left;
+ display: block;
+ margin: 0;
+ text-shadow: 0 -1px 0 darken($mit-red, 10%);
+
+ ul {
+ @extend .clearfix;
+ display: inline-block;
+ padding: 15px 0;
+ margin: 0;
+
+ li {
+ margin-right: $body-line-height;
+ display: inline-block;
+ margin-bottom: 0;
+
+ a {
+ color: #fff;
+
+ &:hover {
+ color: rgba(#fff, .7);
+ background-color: none;
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ section.main-content {
+ @extend .clearfix;
+ @extend .wrapper;
+ @include box-shadow(0 1px 0 #fff);
+ @include box-sizing(border-box);
+ background: #fff;
+ border-top: 0;
+ border: 1px solid #ccc;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+ }
+
+ footer {
+ @extend .clearfix;
+ @extend .wrapper;
+ @include box-sizing(border-box);
+ color: #777;
+ margin-top: $body-line-height;
+ padding: 0 $body-line-height;
+
+ p {
+ float: left;
+
+ a {
+ color: #444;
+ }
+ }
+
+ ul {
+ float: right;
+
+ li {
+ display: inline-block;
+ margin-right: 20px;
+
+ a {
+ color: #444;
+ }
+ }
+ }
+ }
+}
diff --git a/sass/_local.scss b/sass/_local.scss
new file mode 100644
index 0000000000..3f11d9ca57
--- /dev/null
+++ b/sass/_local.scss
@@ -0,0 +1,37 @@
+#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_video_visited { background-color: #cccaac;}
+.seq_html_visited { background-color: #caaccc;}
+.seq_tab_visited { background-color: #aacccc;}
+.seq_vertical_visited { background-color: #acaccc;}
+.seq_sequential_visited { background-color: #cacacc;}
+.seq_problem_visited { background-color: #ccacac;}
+.seq_schematic_visited { background-color: #cccaca;}
+
+.seq_problem_inactive { background-color: #aaaa99;}
+.seq_video_inactive { background-color: #aa99aa;}
+.seq_video_inactive { background-color: #aaa99a;}
+.seq_html_inactive { background-color: #a99aaa;}
+.seq_tab_inactive { background-color: #99aaaa;}
+.seq_vertical_inactive { background-color: #9a9aab;}
+.seq_sequential_inactive { background-color: #a9a9aa;}
+.seq_problem_inactive { background-color: #aa9a9a;}
+.seq_schematic_inactive { background-color: #aaa9a9;}
+
+.seq_active { background-color: red;}
diff --git a/sass/_profile.scss b/sass/_profile.scss
new file mode 100644
index 0000000000..093b7acd1e
--- /dev/null
+++ b/sass/_profile.scss
@@ -0,0 +1,28 @@
+div.profile-wrapper {
+ display: table;
+
+ section.user-info {
+ @include box-sizing(border-box);
+ margin-right: $gw-gutter;
+ padding: $body-line-height;
+ width: grid-width(6);
+ background: #e3e3e3;
+ border-right: 1px solid #d3d3d3;
+ text-shadow: 0 1px 0 #f6f6f6;
+ display: table-cell;
+ }
+
+ section.course-info {
+ @include box-sizing(border-box);
+ padding: $body-line-height;
+ width: grid-width(6);
+ display: table-cell;
+
+ ul {
+ li {
+ display: inline-block;
+ padding-right: 1em;
+ }
+ }
+ }
+}
diff --git a/sass/_reset.scss b/sass/_reset.scss
new file mode 100644
index 0000000000..d1f752f88e
--- /dev/null
+++ b/sass/_reset.scss
@@ -0,0 +1,47 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-weight: inherit;
+ font-style: inherit;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+}
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+body {
+ line-height: 1;
+ color: black;
+ background: white;
+}
+ol, ul {
+ list-style: none;
+}
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+}
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: "";
+}
+blockquote, q {
+ quotes: "" "";
+}
+
diff --git a/sass/_textbook.scss b/sass/_textbook.scss
new file mode 100644
index 0000000000..f4f6f514c7
--- /dev/null
+++ b/sass/_textbook.scss
@@ -0,0 +1,69 @@
+div.book-wrapper {
+ display: table;
+
+ ul#booknav {
+ @include box-shadow( inset -1px 0 0 #f6f6f6);
+ @include box-sizing(border-box);
+ background: #e3e3e3;
+ border-right: 1px solid #d3d3d3;
+ font-family: $body-font-family;
+ padding: $body-line-height;
+ text-shadow: 0 1px 0 #f6f6f6;
+ vertical-align: top;
+ width: grid-width(3);
+ min-width: 240px;
+ display: table-cell;
+
+ li {
+ ul {
+ background: none;
+ }
+ }
+ }
+
+ section.book {
+ @include box-sizing(border-box);
+ padding: $body-line-height;
+ vertical-align: top;
+ width: grid-width(9) + $gw-gutter;
+ display: table-cell;
+
+ nav {
+ background: #F6EFD4;
+ border-bottom: 1px solid darken(#F6EFD4, 10%);
+ margin: (-$body-line-height) (-$body-line-height) $body-line-height;
+
+ ul {
+ @extend .clearfix;
+ li {
+ padding: 15px;
+
+ &.last {
+ float: left;
+ }
+
+ &.next {
+ float: right;
+ }
+
+ a {
+ font-size: 12px;
+ text-transform: uppercase;
+ color: darken(#F6EFD4, 80%);
+ text-shadow: 0 1px 0 #fff;
+
+ &:hover {
+ color: darken(#F6EFD4, 60%);
+ }
+ }
+ }
+ }
+ }
+
+ section.page {
+ img {
+ border: 1px solid $border-color;
+ }
+ }
+ }
+}
diff --git a/sass/_theme.scss b/sass/_theme.scss
new file mode 100644
index 0000000000..6aed8d9750
--- /dev/null
+++ b/sass/_theme.scss
@@ -0,0 +1,206 @@
+/*
+----------------------------------------------------------------------------------------
+
+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;
+
+----------------------------------------------------------------------------------------
+*/
+
+
+body {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+h1 {
+ font-size:1.6em;
+ margin:25px 0 10px 0;
+ clear:both;
+}
+
+h2 {
+ font-size:1.1em;
+ margin:20px 0 10px 0;
+ clear:both;
+}
+
+h3 {
+ font-size:1em;
+ margin:20px 0 5px 0;
+ clear:both;
+}
+
+a:link, a:visited {
+ text-decoration:none;
+}
+
+a:hover {
+ text-decoration:underline;
+}
+
+#wrapper {
+ background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
+ margin:0 auto ;
+ width:100%;
+}
+
+// marketing pages
+#topWrapper {
+ width:100%;
+ height:100px;
+ background-image:url(images/css/topWrapper-bg.jpg);
+ background-position:center top ;
+ background-repeat:repeat-x;
+}
+
+#topBanner {
+ width:800px;
+ margin:0 auto;
+ height:100px;
+ background-image:url(images/css/topBanner.jpg);
+ background-repeat:no-repeat;
+}
+
+#topnav {
+ background:transparent url('images/css/hmenu.jpg') repeat-x top left;
+ height:20px;
+ margin:0 auto ;
+ text-align:center;
+ width:800px;
+
+ ul {
+ display:table;
+ margin:0 auto;
+ padding:0;
+ list-style-type:none;
+ position:relative;
+ height:20px;
+ text-transform:uppercase;
+ font-size:0.9em;
+ font-family:Arial,sans-serif;
+
+ li {
+ display:block;
+ float:left;
+ margin:0;
+ padding:0;
+ background:transparent url('images/css/hmenu.jpg') repeat-x top left;
+
+ a {
+ display:block;
+ float:left;
+ color:#031634;
+ text-decoration:none;
+ padding:0px 50px ;
+ line-height:20px;
+ font-weight:bold;
+ }
+ }
+ }
+}
+
+#topnav ul li a:hover, #topnav li#current a {
+ color:#7a994c;
+ background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
+}
+
+#bg {
+ margin:0 auto;
+ padding:0;
+ background:transparent ;
+ background-image:url(images/css/hat.jpg);
+ background-repeat:no-repeat;
+ background-position: center top ;
+}
+
+#header {
+ margin: 0 auto;
+ min-height:0px;
+ height: 0px;
+ width: 800px;
+}
+
+
+#page {
+ background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
+}
+
+#container {
+ margin:0 auto;
+ width:800px;
+}
+
+
+#content {
+ width:780px;
+ margin:0 auto ;
+ text-align:left;
+ min-height:800px;
+}
+
+
+#content p {
+ text-align:justify;
+}
+
+
+
+
+
+#footerWrapper {
+ margin:0 auto;
+ height:10px;
+ padding:0;
+ background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
+}
+
+
+#footer {
+ margin:0 auto;
+ padding:0;
+ width:800px;
+ height:10px;
+}
+
+#sidebar ul.vmenu {
+ list-style: none;
+ text-align: left;
+ margin: 7px 0px 8px 0px;
+ padding: 0;
+ text-decoration: none;
+ border-top: 1px solid #eeeeee;
+}
+
+#sidebar ul.vmenu li {
+ list-style: none;
+ padding: 4px 0 4px 0px;
+ margin: 0 2px;
+ border-bottom: 1px solid #eeeeee;
+}
+
+#sidebar ul.vmenu li a {
+ text-decoration: none;
+ color:#023063;
+}
+
+#sidebar ul.vmenu li a:hover {
+ color:#adcc80;
+}
+
+#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
+#sidebar ul.vmenu ul li { border: none; }
diff --git a/sass/application.scss b/sass/application.scss
new file mode 100644
index 0000000000..e5169b13a5
--- /dev/null
+++ b/sass/application.scss
@@ -0,0 +1,16 @@
+@import "bourbon/bourbon";
+@import "reset";
+@import "font-face";
+
+// Base layout
+@import "base-variables", "base-extends", "base";
+@import "layout";
+
+// pages
+@import "courseware";
+@import "textbook";
+@import "profile";
+
+// left over
+@import "theme";
+@import "local";
diff --git a/sass/bourbon/_bourbon.scss b/sass/bourbon/_bourbon.scss
new file mode 100644
index 0000000000..5c1bc8a4a9
--- /dev/null
+++ b/sass/bourbon/_bourbon.scss
@@ -0,0 +1,29 @@
+// Custom Functions
+@import "functions/deprecated-webkit-gradient";
+@import "functions/golden-ratio";
+@import "functions/grid-width";
+@import "functions/tint-shade";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/font-family";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";
diff --git a/sass/bourbon/addons/_button.scss b/sass/bourbon/addons/_button.scss
new file mode 100644
index 0000000000..d2f98ab0c3
--- /dev/null
+++ b/sass/bourbon/addons/_button.scss
@@ -0,0 +1,170 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+ @if type-of($style) == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+
+ @else if $style == pill {
+ @include pill($base-color);
+ }
+}
+
+@mixin simple ($base-color) {
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font-size: 11px;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 6px 18px 7px;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+@mixin shiny($base-color) {
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font-size: 14px;
+ font-weight: bold;
+ padding: 7px 20px 8px;
+ text-decoration: none;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+
+ &:hover {
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $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%);
+ cursor: pointer;
+ }
+
+ &:active {
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+ }
+}
+
+@mixin pill($base-color) {
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @include linear-gradient ($base-color, $stop-gradient);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include border-radius(16px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+ color: $color;
+ display: inline;
+ font-size: 11px;
+ font-weight: normal;
+ line-height: 1;
+ padding: 3px 16px 5px;
+ text-align: center;
+ text-shadow: 0 -1px 1px $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ border: 1px solid $border-top;
+ border-color: $border-top $border-sides $border-bottom;
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ text-shadow: 0 -1px 1px $text-shadow-hover;
+ -webkit-background-clip: padding-box;
+ }
+
+ &:active {
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+ background: $active-color;
+ border: 1px solid $border-active;
+ border-bottom: 1px solid $border-bottom-active;
+ @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+ text-shadow: 0 -1px 1px $text-shadow-active;
+ }
+}
diff --git a/sass/bourbon/addons/_font-family.scss b/sass/bourbon/addons/_font-family.scss
new file mode 100644
index 0000000000..9e3bc6ee20
--- /dev/null
+++ b/sass/bourbon/addons/_font-family.scss
@@ -0,0 +1,4 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$verdana: Verdana, Geneva, sans-serif;
diff --git a/sass/bourbon/addons/_html5-input-types.scss b/sass/bourbon/addons/_html5-input-types.scss
new file mode 100644
index 0000000000..9d86fbb4d4
--- /dev/null
+++ b/sass/bourbon/addons/_html5-input-types.scss
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+ 'input[type="number"]',
+ 'input[type="password"]',
+ 'input[type="search"]',
+ 'input[type="tel"]',
+ 'input[type="text"]',
+ 'input[type="url"]',
+
+ // Webkit & Gecko may change the display of these in the future
+ 'input[type="color"]',
+ 'input[type="date"]',
+ 'input[type="datetime"]',
+ 'input[type="datetime-local"]',
+ 'input[type="month"]',
+ 'input[type="time"]',
+ 'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+// #{$all-text-inputs}, textarea {
+// border: 1px solid red;
+// }
diff --git a/sass/bourbon/addons/_position.scss b/sass/bourbon/addons/_position.scss
new file mode 100644
index 0000000000..6ad330f1df
--- /dev/null
+++ b/sass/bourbon/addons/_position.scss
@@ -0,0 +1,30 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+ @if type-of($position) == list {
+ $coordinates: $position;
+ $position: relative;
+ }
+
+ $top: nth($coordinates, 1);
+ $right: nth($coordinates, 2);
+ $bottom: nth($coordinates, 3);
+ $left: nth($coordinates, 4);
+
+ position: $position;
+
+ @if not(unitless($top)) {
+ top: $top;
+ }
+
+ @if not(unitless($right)) {
+ right: $right;
+ }
+
+ @if not(unitless($bottom)) {
+ bottom: $bottom;
+ }
+
+ @if not(unitless($left)) {
+ left: $left;
+ }
+}
diff --git a/sass/bourbon/addons/_timing-functions.scss b/sass/bourbon/addons/_timing-functions.scss
new file mode 100644
index 0000000000..51b2410914
--- /dev/null
+++ b/sass/bourbon/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/sass/bourbon/css3/_animation.scss b/sass/bourbon/css3/_animation.scss
new file mode 100644
index 0000000000..08f3b13e61
--- /dev/null
+++ b/sass/bourbon/css3/_animation.scss
@@ -0,0 +1,161 @@
+// 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.
+
+@mixin animation-name ($name-1,
+ $name-2: false, $name-3: false,
+ $name-4: false, $name-5: false,
+ $name-6: false, $name-7: false,
+ $name-8: false, $name-9: false)
+ {
+ $full: compact($name-1, $name-2, $name-3, $name-4,
+ $name-5, $name-6, $name-7, $name-8, $name-9);
+
+ -webkit-animation-name: $full;
+ -moz-animation-name: $full;
+ animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ -webkit-animation-duration: $full;
+ -moz-animation-duration: $full;
+ animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+// ease | linear | ease-in | ease-out | ease-in-out
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4,
+ $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+ -webkit-animation-timing-function: $full;
+ -moz-animation-timing-function: $full;
+ animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+// infinite |
+ $value-2: false, $value-3: false,
+ $value-4: false, $value-5: false,
+ $value-6: false, $value-7: false,
+ $value-8: false, $value-9: false)
+ {
+ $full: compact($value-1, $value-2, $value-3, $value-4,
+ $value-5, $value-6, $value-7, $value-8, $value-9);
+
+ -webkit-animation-iteration-count: $full;
+ -moz-animation-iteration-count: $full;
+ animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+// normal | alternate
+ $direction-2: false, $direction-3: false,
+ $direction-4: false, $direction-5: false,
+ $direction-6: false, $direction-7: false,
+ $direction-8: false, $direction-9: false)
+ {
+ $full: compact($direction-1, $direction-2, $direction-3, $direction-4,
+ $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+ -webkit-animation-direction: $full;
+ -moz-animation-direction: $full;
+ animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+// running | paused
+ $state-2: false, $state-3: false,
+ $state-4: false, $state-5: false,
+ $state-6: false, $state-7: false,
+ $state-8: false, $state-9: false)
+ {
+ $full: compact($state-1, $state-2, $state-3, $state-4,
+ $state-5, $state-6, $state-7, $state-8, $state-9);
+
+ -webkit-animation-play-state: $full;
+ -moz-animation-play-state: $full;
+ animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4,
+ $time-5, $time-6, $time-7, $time-8, $time-9);
+
+ -webkit-animation-delay: $full;
+ -moz-animation-delay: $full;
+ animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+// http://goo.gl/l6ckm
+// none | forwards | backwards | both
+ $mode-2: false, $mode-3: false,
+ $mode-4: false, $mode-5: false,
+ $mode-6: false, $mode-7: false,
+ $mode-8: false, $mode-9: false)
+ {
+ $full: compact($mode-1, $mode-2, $mode-3, $mode-4,
+ $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+ -webkit-animation-fill-mode: $full;
+ -moz-animation-fill-mode: $full;
+ animation-fill-mode: $full;
+}
+
+
+// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
+@mixin animation-basic ($name, $time: 0, $motion: ease) {
+ $length-of-name: length($name);
+ $length-of-time: length($time);
+ $length-of-motion: length($motion);
+
+ @if $length-of-name > 1 {
+ @include animation-name(zip($name));
+ } @else {
+ @include animation-name( $name);
+ }
+
+ @if $length-of-time > 1 {
+ @include animation-duration(zip($time));
+ } @else {
+ @include animation-duration( $time);
+ }
+
+ @if $length-of-motion > 1 {
+ @include animation-timing-function(zip($motion));
+ } @else {
+ @include animation-timing-function( $motion);
+ }
+}
+
+// Official animation shorthand property. Needs more work to actually be useful.
+@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
+ -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
+ -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
+ animation: $name $duration $timing-function $delay $iteration-count $direction;
+}
diff --git a/sass/bourbon/css3/_appearance.scss b/sass/bourbon/css3/_appearance.scss
new file mode 100644
index 0000000000..548767e166
--- /dev/null
+++ b/sass/bourbon/css3/_appearance.scss
@@ -0,0 +1,7 @@
+@mixin appearance ($value) {
+ -webkit-appearance: $value;
+ -moz-appearance: $value;
+ -ms-appearance: $value;
+ -o-appearance: $value;
+ appearance: $value;
+}
diff --git a/sass/bourbon/css3/_background-image.scss b/sass/bourbon/css3/_background-image.scss
new file mode 100644
index 0000000000..b11ab3fd53
--- /dev/null
+++ b/sass/bourbon/css3/_background-image.scss
@@ -0,0 +1,71 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+@import "../functions/linear-gradient";
+@import "../functions/radial-gradient";
+
+@mixin background-image(
+ $image-1 , $image-2: false,
+ $image-3: false, $image-4: false,
+ $image-5: false, $image-6: false,
+ $image-7: false, $image-8: false,
+ $image-9: false, $image-10: false
+) {
+ $images: compact($image-1, $image-2,
+ $image-3, $image-4,
+ $image-5, $image-6,
+ $image-7, $image-8,
+ $image-9, $image-10);
+
+ background-image: add-prefix($images, webkit);
+ background-image: add-prefix($images, moz);
+ background-image: add-prefix($images, ms);
+ background-image: add-prefix($images, o);
+ background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+ $images-prefixed: ();
+
+ @for $i from 1 through length($images) {
+ $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+ // If variable is a list - Gradient
+ @if $type == list {
+ $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+ $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+ $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+ $images-prefixed: append($images-prefixed, $gradient, comma);
+ }
+
+ // If variable is a string - Image
+ @else if $type == string {
+ $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+ }
+ }
+ @return $images-prefixed;
+}
+
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+ $vendor-gradients: false;
+ @if $vendor {
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+ }
+
+ @else if $vendor == false {
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+ $vendor-gradients: unquote($vendor-gradients);
+ }
+ @return $vendor-gradients;
+}
+
+//Examples:
+ //@include background-image(linear-gradient(top, orange, red));
+ //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+ //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+ //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+ //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
diff --git a/sass/bourbon/css3/_background-size.scss b/sass/bourbon/css3/_background-size.scss
new file mode 100644
index 0000000000..4bba11027d
--- /dev/null
+++ b/sass/bourbon/css3/_background-size.scss
@@ -0,0 +1,15 @@
+@mixin background-size ($length-1,
+ $length-2: false, $length-3: false,
+ $length-4: false, $length-5: false,
+ $length-6: false, $length-7: false,
+ $length-8: false, $length-9: false)
+ {
+ $full: compact($length-1, $length-2, $length-3, $length-4,
+ $length-5, $length-6, $length-7, $length-8, $length-9);
+
+ -webkit-background-size: $full;
+ -moz-background-size: $full;
+ -ms-background-size: $full;
+ -o-background-size: $full;
+ background-size: $full;
+}
diff --git a/sass/bourbon/css3/_border-image.scss b/sass/bourbon/css3/_border-image.scss
new file mode 100644
index 0000000000..0373980422
--- /dev/null
+++ b/sass/bourbon/css3/_border-image.scss
@@ -0,0 +1,7 @@
+@mixin border-image ($image) {
+ -webkit-border-image: $image;
+ -moz-border-image: $image;
+ -ms-border-image: $image;
+ -o-border-image: $image;
+ border-image: $image;
+}
diff --git a/sass/bourbon/css3/_border-radius.scss b/sass/bourbon/css3/_border-radius.scss
new file mode 100644
index 0000000000..f950d4dd98
--- /dev/null
+++ b/sass/bourbon/css3/_border-radius.scss
@@ -0,0 +1,59 @@
+@mixin border-radius ($radii) {
+ -webkit-border-radius: $radii;
+ -moz-border-radius: $radii;
+ -ms-border-radius: $radii;
+ -o-border-radius: $radii;
+ border-radius: $radii;
+}
+
+@mixin border-top-left-radius($radii) {
+ -webkit-border-top-left-radius: $radii;
+ -moz-border-top-left-radius: $radii;
+ -ms-border-top-left-radius: $radii;
+ -o-border-top-left-radius: $radii;
+ border-top-left-radius: $radii;
+}
+
+@mixin border-top-right-radius($radii) {
+ -webkit-border-top-right-radius: $radii;
+ -moz-border-top-right-radius: $radii;
+ -ms-border-top-right-radius: $radii;
+ -o-border-top-right-radius: $radii;
+ border-top-right-radius: $radii;
+}
+
+@mixin border-bottom-left-radius($radii) {
+ -webkit-border-bottom-left-radius: $radii;
+ -moz-border-bottom-left-radius: $radii;
+ -ms-border-bottom-left-radius: $radii;
+ -o-border-bottom-left-radius: $radii;
+ border-bottom-left-radius: $radii;
+}
+
+@mixin border-bottom-right-radius($radii) {
+ -webkit-border-bottom-right-radius: $radii;
+ -moz-border-bottom-right-radius: $radii;
+ -ms-border-bottom-right-radius: $radii;
+ -o-border-bottom-right-radius: $radii;
+ border-bottom-right-radius: $radii;
+}
+
+@mixin border-top-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+ @include border-top-right-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+ @include border-bottom-left-radius($radii);
+ @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+ @include border-top-left-radius($radii);
+ @include border-bottom-left-radius($radii);
+}
diff --git a/sass/bourbon/css3/_box-shadow.scss b/sass/bourbon/css3/_box-shadow.scss
new file mode 100644
index 0000000000..ad5c24e7aa
--- /dev/null
+++ b/sass/bourbon/css3/_box-shadow.scss
@@ -0,0 +1,16 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+ $shadow-2: false, $shadow-3: false,
+ $shadow-4: false, $shadow-5: false,
+ $shadow-6: false, $shadow-7: false,
+ $shadow-8: false, $shadow-9: false)
+ {
+ $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+ $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+ -webkit-box-shadow: $full;
+ -moz-box-shadow: $full;
+ -ms-box-shadow: $full;
+ -o-box-shadow: $full;
+ box-shadow: $full;
+}
diff --git a/sass/bourbon/css3/_box-sizing.scss b/sass/bourbon/css3/_box-sizing.scss
new file mode 100644
index 0000000000..a9c6cdb43f
--- /dev/null
+++ b/sass/bourbon/css3/_box-sizing.scss
@@ -0,0 +1,8 @@
+@mixin box-sizing ($box) {
+// content-box | border-box | inherit
+ -webkit-box-sizing: $box;
+ -moz-box-sizing: $box;
+ -ms-box-sizing: $box;
+ -o-box-sizing: $box;
+ box-sizing: $box;
+}
diff --git a/sass/bourbon/css3/_columns.scss b/sass/bourbon/css3/_columns.scss
new file mode 100644
index 0000000000..2896c91d7f
--- /dev/null
+++ b/sass/bourbon/css3/_columns.scss
@@ -0,0 +1,67 @@
+@mixin columns($arg: auto) {
+// ||
+ -webkit-columns: $arg;
+ -moz-columns: $arg;
+ columns: $arg;
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+ -webkit-column-count: $int;
+ -moz-column-count: $int;
+ column-count: $int;
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+ -webkit-column-gap: $length;
+ -moz-column-gap: $length;
+ column-gap: $length;
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+ -webkit-columns-fill: $arg;
+ -moz-columns-fill: $arg;
+ columns-fill: $arg;
+}
+
+@mixin column-rule($arg) {
+// || ||
+ -webkit-column-rule: $arg;
+ -moz-column-rule: $arg;
+ column-rule: $arg;
+}
+
+@mixin column-rule-color($color) {
+ -webkit-column-rule-color: $color;
+ -moz-column-rule-color: $color;
+ column-rule-color: $color;
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+ -webkit-column-rule-style: $style;
+ -moz-column-rule-style: $style;
+ column-rule-style: $style;
+}
+
+@mixin column-rule-width ($width: none) {
+ -webkit-column-rule-width: $width;
+ -moz-column-rule-width: $width;
+ column-rule-width: $width;
+}
+
+@mixin column-span($arg: none) {
+// none || all
+ -webkit-column-span: $arg;
+ -moz-column-span: $arg;
+ column-span: $arg;
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+ -webkit-column-width: $length;
+ -moz-column-width: $length;
+ column-width: $length;
+}
diff --git a/sass/bourbon/css3/_flex-box.scss b/sass/bourbon/css3/_flex-box.scss
new file mode 100644
index 0000000000..44c1dfd789
--- /dev/null
+++ b/sass/bourbon/css3/_flex-box.scss
@@ -0,0 +1,67 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+ @include display-box;
+ @include box-orient($orient);
+ @include box-pack($pack);
+ @include box-align($align);
+}
+
+@mixin display-box {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+ -webkit-box-orient: $orient;
+ -moz-box-orient: $orient;
+ box-orient: $orient;
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+ -webkit-box-pack: $pack;
+ -moz-box-pack: $pack;
+ box-pack: $pack;
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+ -webkit-box-align: $align;
+ -moz-box-align: $align;
+ box-align: $align;
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+ -webkit-box-direction: $direction;
+ -moz-box-direction: $direction;
+ box-direction: $direction;
+}
+@mixin box-lines($lines: single) {
+// single|multiple
+ -webkit-box-lines: $lines;
+ -moz-box-lines: $lines;
+ box-lines: $lines;
+}
+
+@mixin box-ordinal-group($integer: 1) {
+ -webkit-box-ordinal-group: $integer;
+ -moz-box-ordinal-group: $integer;
+ box-ordinal-group: $integer;
+}
+
+@mixin box-flex($value: 0.0) {
+ -webkit-box-flex: $value;
+ -moz-box-flex: $value;
+ box-flex: $value;
+}
+
+@mixin box-flex-group($integer: 1) {
+ -webkit-box-flex-group: $integer;
+ -moz-box-flex-group: $integer;
+ box-flex-group: $integer;
+}
diff --git a/sass/bourbon/css3/_inline-block.scss b/sass/bourbon/css3/_inline-block.scss
new file mode 100644
index 0000000000..d79a13c851
--- /dev/null
+++ b/sass/bourbon/css3/_inline-block.scss
@@ -0,0 +1,10 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+ display: -moz-inline-box;
+ -moz-box-orient: vertical;
+ display: inline-block;
+ vertical-align: baseline;
+ zoom: 1;
+ *display: inline;
+ *vertical-align: auto;
+}
diff --git a/sass/bourbon/css3/_linear-gradient.scss b/sass/bourbon/css3/_linear-gradient.scss
new file mode 100644
index 0000000000..585921f30b
--- /dev/null
+++ b/sass/bourbon/css3/_linear-gradient.scss
@@ -0,0 +1,31 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ background-color: nth($G1, 1);
+ background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
+ background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+ background-image: -moz-linear-gradient($pos, $full);
+ background-image: -ms-linear-gradient($pos, $full);
+ background-image: -o-linear-gradient($pos, $full);
+ background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// 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(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/sass/bourbon/css3/_radial-gradient.scss b/sass/bourbon/css3/_radial-gradient.scss
new file mode 100644
index 0000000000..fbd0a8523c
--- /dev/null
+++ b/sass/bourbon/css3/_radial-gradient.scss
@@ -0,0 +1,22 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($pos, $shape-size,
+ $G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+ background-color: nth($G1, 1);
+ background-image: deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
+ background-image: -webkit-radial-gradient($pos, $shape-size, $full);
+ background-image: -moz-radial-gradient($pos, $shape-size, $full);
+ background-image: -ms-radial-gradient($pos, $shape-size, $full);
+ background-image: -o-radial-gradient($pos, $shape-size, $full);
+ background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+// Usage: Gradient position and shape-size are required. Color stops are optional.
+// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/sass/bourbon/css3/_transform.scss b/sass/bourbon/css3/_transform.scss
new file mode 100644
index 0000000000..8d19e8b88d
--- /dev/null
+++ b/sass/bourbon/css3/_transform.scss
@@ -0,0 +1,19 @@
+@mixin transform($property: none) {
+// none |
+ -webkit-transform: $property;
+ -moz-transform: $property;
+ -ms-transform: $property;
+ -o-transform: $property;
+ transform: $property;
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right | length | %
+// y-axis - top | center | bottom | length | %
+// z-axis - length
+ -webkit-transform-origin: $axes;
+ -moz-transform-origin: $axes;
+ -ms-transform-origin: $axes;
+ -o-transform-origin: $axes;
+ transform-origin: $axes;
+}
diff --git a/sass/bourbon/css3/_transition.scss b/sass/bourbon/css3/_transition.scss
new file mode 100644
index 0000000000..058dbe0e33
--- /dev/null
+++ b/sass/bourbon/css3/_transition.scss
@@ -0,0 +1,104 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
+
+ // Detect # of args passed into each variable
+ $length-of-property: length($property);
+ $length-of-duration: length($duration);
+ $length-of-timing-function: length($timing-function);
+ $length-of-delay: length($delay);
+
+ @if $length-of-property > 1 {
+ @include transition-property(zip($property)); }
+ @else {
+ @include transition-property( $property);
+ }
+
+ @if $length-of-duration > 1 {
+ @include transition-duration(zip($duration)); }
+ @else {
+ @include transition-duration( $duration);
+ }
+
+ @if $length-of-timing-function > 1 {
+ @include transition-timing-function(zip($timing-function)); }
+ @else {
+ @include transition-timing-function( $timing-function);
+ }
+
+ @if $length-of-delay > 1 {
+ @include transition-delay(zip($delay)); }
+ @else {
+ @include transition-delay( $delay);
+ }
+}
+
+
+@mixin transition-property ($prop-1: all,
+ $prop-2: false, $prop-3: false,
+ $prop-4: false, $prop-5: false,
+ $prop-6: false, $prop-7: false,
+ $prop-8: false, $prop-9: false)
+ {
+ $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+ $prop-6, $prop-7, $prop-8, $prop-9);
+
+ -webkit-transition-property: $full;
+ -moz-transition-property: $full;
+ -ms-transition-property: $full;
+ -o-transition-property: $full;
+ transition-property: $full;
+}
+
+@mixin transition-duration ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ -webkit-transition-duration: $full;
+ -moz-transition-duration: $full;
+ -ms-transition-duration: $full;
+ -o-transition-duration: $full;
+ transition-duration: $full;
+}
+
+@mixin transition-timing-function ($motion-1: ease,
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+ $motion-6, $motion-7, $motion-8, $motion-9);
+
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+ -webkit-transition-timing-function: $full;
+ -moz-transition-timing-function: $full;
+ -ms-transition-timing-function: $full;
+ -o-transition-timing-function: $full;
+ transition-timing-function: $full;
+}
+
+@mixin transition-delay ($time-1: 0,
+ $time-2: false, $time-3: false,
+ $time-4: false, $time-5: false,
+ $time-6: false, $time-7: false,
+ $time-8: false, $time-9: false)
+ {
+ $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9);
+
+ -webkit-transition-delay: $full;
+ -moz-transition-delay: $full;
+ -ms-transition-delay: $full;
+ -o-transition-delay: $full;
+ transition-delay: $full;
+}
+
diff --git a/sass/bourbon/functions/_deprecated-webkit-gradient.scss b/sass/bourbon/functions/_deprecated-webkit-gradient.scss
new file mode 100644
index 0000000000..1322f6f60e
--- /dev/null
+++ b/sass/bourbon/functions/_deprecated-webkit-gradient.scss
@@ -0,0 +1,36 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type, $full) {
+ $gradient-list: ();
+ $gradient: false;
+ $full-length: length($full);
+ $percentage: false;
+ $gradient-type: $type;
+
+ @for $i from 1 through $full-length {
+ $gradient: nth($full, $i);
+
+ @if length($gradient) == 2 {
+ $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+ @else {
+ @if $i == $full-length {
+ $percentage: 100%;
+ }
+ @else {
+ $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+ }
+ $color-stop: color-stop(unquote($percentage), $gradient);
+ $gradient-list: join($gradient-list, $color-stop, comma);
+ }
+ }
+
+ @if $type == radial {
+ $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+ }
+ @else if $type == linear {
+ $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+ }
+ @return $gradient;
+}
diff --git a/sass/bourbon/functions/_golden-ratio.scss b/sass/bourbon/functions/_golden-ratio.scss
new file mode 100644
index 0000000000..8f825addf3
--- /dev/null
+++ b/sass/bourbon/functions/_golden-ratio.scss
@@ -0,0 +1,31 @@
+@function golden-ratio($value, $increment) {
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * 1.618);
+ }
+ }
+
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / 1.618);
+ }
+ }
+
+ @return $value;
+}
+
+// div {
+// Increment Up GR with positive value
+// font-size: golden-ratio(14px, 1); // returns: 22.652px
+//
+// Increment Down GR with negative value
+// font-size: golden-ratio(14px, -1); // returns: 8.653px
+//
+// Can be used with ceil(round up) or floor(round down)
+// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
+// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
+// }
+//
+// modularscale.com
+// goldenratiocalculator.com
diff --git a/sass/bourbon/functions/_grid-width.scss b/sass/bourbon/functions/_grid-width.scss
new file mode 100644
index 0000000000..8e63d83d60
--- /dev/null
+++ b/sass/bourbon/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@function grid-width($n) {
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+// $gw-column: 100px; // Column Width
+// $gw-gutter: 40px; // Gutter Width
+//
+// div {
+// width: grid-width(4); // returns 520px;
+// margin-left: $gw-gutter; // returns 40px;
+// }
diff --git a/sass/bourbon/functions/_linear-gradient.scss b/sass/bourbon/functions/_linear-gradient.scss
new file mode 100644
index 0000000000..3b10ca82a6
--- /dev/null
+++ b/sass/bourbon/functions/_linear-gradient.scss
@@ -0,0 +1,23 @@
+@function linear-gradient($pos: top, $G1: false, $G2: false,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+
+ // Detect what type of value exists in $pos
+ $pos-type: type-of(nth($pos, 1));
+
+ // If $pos is missing from mixin, reassign vars and add default position
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+ $pos: top; // Default position
+ }
+
+ $type: linear;
+ $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
+
diff --git a/sass/bourbon/functions/_radial-gradient.scss b/sass/bourbon/functions/_radial-gradient.scss
new file mode 100644
index 0000000000..3d5461ad6e
--- /dev/null
+++ b/sass/bourbon/functions/_radial-gradient.scss
@@ -0,0 +1,15 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($pos, $shape-size,
+ $G1, $G2,
+ $G3: false, $G4: false,
+ $G5: false, $G6: false,
+ $G7: false, $G8: false,
+ $G9: false, $G10: false) {
+
+ $type: radial;
+ $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+ $type-gradient: append($type, $gradient, comma);
+
+ @return $type-gradient;
+}
+
diff --git a/sass/bourbon/functions/_tint-shade.scss b/sass/bourbon/functions/_tint-shade.scss
new file mode 100644
index 0000000000..f7172004ac
--- /dev/null
+++ b/sass/bourbon/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+ @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+ @return mix(black, $color, $percent);
+}
diff --git a/sass/bourbon/lib/bourbon.rb b/sass/bourbon/lib/bourbon.rb
new file mode 100644
index 0000000000..ca440eefbc
--- /dev/null
+++ b/sass/bourbon/lib/bourbon.rb
@@ -0,0 +1,17 @@
+module Bourbon
+ if defined?(Rails)
+ class Engine < ::Rails::Engine
+ require 'bourbon/engine'
+ end
+
+ module Rails
+ class Railtie < ::Rails::Railtie
+ rake_tasks do
+ load "tasks/install.rake"
+ end
+ end
+ end
+ end
+end
+
+require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
diff --git a/sass/bourbon/lib/bourbon/sass_extensions.rb b/sass/bourbon/lib/bourbon/sass_extensions.rb
new file mode 100644
index 0000000000..ad567200e3
--- /dev/null
+++ b/sass/bourbon/lib/bourbon/sass_extensions.rb
@@ -0,0 +1,6 @@
+module Bourbon::SassExtensions
+end
+
+require "sass"
+
+require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
diff --git a/sass/bourbon/lib/bourbon/sass_extensions/functions.rb b/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
new file mode 100644
index 0000000000..daa877650e
--- /dev/null
+++ b/sass/bourbon/lib/bourbon/sass_extensions/functions.rb
@@ -0,0 +1,13 @@
+module Bourbon::SassExtensions::Functions
+end
+
+require File.join(File.dirname(__FILE__), "/functions/compact")
+
+module Sass::Script::Functions
+ include Bourbon::SassExtensions::Functions::Compact
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+ include Sass::Script::Functions
+end
diff --git a/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
new file mode 100644
index 0000000000..5192e921e7
--- /dev/null
+++ b/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
@@ -0,0 +1,13 @@
+# Compact function pulled from compass
+module Bourbon::SassExtensions::Functions::Compact
+
+ def compact(*args)
+ sep = :comma
+ if args.size == 1 && args.first.is_a?(Sass::Script::List)
+ args = args.first.value
+ sep = args.first.separator
+ end
+ Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
+ end
+
+end
diff --git a/sass/reademe.md b/sass/reademe.md
new file mode 100644
index 0000000000..04d0dd1df9
--- /dev/null
+++ b/sass/reademe.md
@@ -0,0 +1,11 @@
+This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster developmnet of CSS. For more information about sass: http://sass-lang.com
+
+To use sass all you need to do is enter:
+$ gem install sass
+
+We are also using Bourbon with sass. They are a genaric set of mixins, and functions that allow for more rpid 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:
+$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb
+
+This will automatically generate the CSS files on save.
diff --git a/seq_module.html b/seq_module.html
index 6309245dd3..c2891af8f9 100644
--- a/seq_module.html
+++ b/seq_module.html
@@ -1,14 +1,15 @@
-
-
-% endfor
+
-
+ % for t in range(1,1+len(items)):
+
+ % endfor
+
+ Previous
+ Next
+
+
+
+
+
+
diff --git a/staticbook.html b/staticbook.html
index 6aea49eb8c..af3cade9cb 100644
--- a/staticbook.html
+++ b/staticbook.html
@@ -32,39 +32,32 @@ function next_page() {
goto_page(newpage);
log_event("book", {"type":"nextpage","new":page});
}
-
-
-
-
-
-
-
-
-<%include file="book_toc.html" />
-
-
-
-
-
-
-
+<%include file="navigation.html" />
+
+
+
+
+ <%include file="book_toc.html" />
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/textbook.html b/textbook.html
index 6d4d4537f7..432dba470a 100644
--- a/textbook.html
+++ b/textbook.html
@@ -1,34 +1,9 @@
<%inherit file="main.html" />
+
-
-
-
-
-
- ${ text }
-
-
-
-
+ <%include file="navigation.html" />
+
+ ${ text }
+
Using the system
+Using the system
- During video playback, use the subtitles and the scroll bar to
-navigate. Clicking the subtitles is a fast way to skip forwards and
-backwards by small amounts.
- If you are on a low-resolution display, the left navigation bar
-can be hidden by clicking on the set of three left arrows next to it.
- If you need bigger or smaller fonts, use your browsers settings
-to scale them up or down. Under Google Chrome, this is done by
-pressing ctrl-plus, or ctrl-minus at the same time.
+
+ During video playback, use the subtitles and the scroll bar to navigate. Clicking the subtitles is a fast way to skip forwards and backwards by small amounts.
+
+
+ If you are on a low-resolution display, the left navigation bar can be hidden by clicking on the set of three left arrows next to it.
+
+
+
+ If you need bigger or smaller fonts, use your browsers settings to scale them up or down. Under Google Chrome, this is done by pressing ctrl-plus, or ctrl-minus at the same time.
+
diff --git a/vert_module.html b/vert_module.html
index a50c9b2c8e..c68f4ae60e 100644
--- a/vert_module.html
+++ b/vert_module.html
@@ -1,7 +1,7 @@
-
+
% for t in items:
-
- ${t[1]['content']}
-
+
+ ${t[1]['content']}
+
% endfor
-
-
-
- You need Flash player 8+ and JavaScript enabled to view this video.
-
-
-
-
-
-
-
0:00/0:00
+
+
+
You need Flash player 8+ and JavaScript enabled to view this video.
+
+
+
+
+
