Files
edx-platform/css/marketing.css
Kyle Fiedler 0b771777ce generated css
2012-01-19 22:49:57 -05:00

610 lines
25 KiB
CSS

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: "" ""; }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local("Open Sans"), local("OpenSans"), url("http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff") format("woff"); }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url("http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff") format("woff"); }
.wrapper, header.announcement div, section.index-content, footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 1400px;
min-width: 810px;
padding: 25.888px;
width: 100%; }
.clearfix:after, header.announcement div section:after, section.index-content:after, section.index-content section:after, section.index-content section.about section:after, footer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.button, header.announcement div section.course section a, section.index-content section.course a, section.index-content section.staff a, section.index-content section.about-course section.cta a.enroll {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
background-color: #990000;
color: #fff;
margin: 25.888px 0 12.944px;
padding: 6.472px 12.944px;
text-decoration: none; }
.button:hover, header.announcement div section.course section a:hover, section.index-content section.course a:hover, section.index-content section.staff a:hover, section.index-content section.about-course section.cta a.enroll:hover {
background-color: #660000; }
.button span, header.announcement div section.course section a span, section.index-content section.course a span, section.index-content section.staff a span, section.index-content section.about-course section.cta a.enroll span {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-style: italic; }
body {
background-color: #fff;
color: #444;
font: 16px Georgia, serif; }
body input[type="email"], body input[type="number"], body input[type="password"], body input[type="search"], body input[type="tel"], body input[type="text"], body input[type="url"], body input[type="color"], body input[type="date"], body input[type="datetime"], body input[type="datetime-local"], body input[type="month"], body input[type="time"], body input[type="week"], body textarea {
-webkit-box-shadow: 0 -1px 0 white;
-moz-box-shadow: 0 -1px 0 white;
-ms-box-shadow: 0 -1px 0 white;
-o-box-shadow: 0 -1px 0 white;
box-shadow: 0 -1px 0 white;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, white));
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -ms-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(top, #eeeeee, white);
border: 1px solid #999;
font: 16px Georgia, serif;
padding: 4px;
width: 100%; }
body input[type="email"]:focus, body input[type="number"]:focus, body input[type="password"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="text"]:focus, body input[type="url"]:focus, body input[type="color"]:focus, body input[type="date"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body textarea:focus {
border-color: #990000; }
header.announcement {
color: #fff;
border-bottom: 1px solid #000;
background: #e3e3e3;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover; }
@media screen and (min-width: 1200px) {
header.announcement.home {
background: #e3e3e3 url("/static/images/marketing/shot-1-large.jpg"); } }
@media screen and (max-width: 1199px) {
header.announcement.home {
background: #e3e3e3 url("/static/images/marketing/shot-1-medium.jpg"); } }
header.announcement.home div {
padding: 258.88px 25.888px 77.664px; }
@media screen and (min-width: 1200px) {
header.announcement.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg"); } }
@media screen and (max-width: 1199px) and (min-width: 700px) {
header.announcement.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover; } }
@media screen and (max-width: 699px) {
header.announcement.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover; } }
header.announcement.course div {
padding: 103.552px 25.888px 51.776px; }
header.announcement div {
position: relative; }
header.announcement div nav {
position: absolute;
top: 0;
right: 25.888px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
background: rgba(0, 0, 0, 0.7);
padding: 12.944px; }
header.announcement div nav h1 {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 25.888px; }
header.announcement div nav h1 a {
font: 800 18px "Open Sans", Helvetica, Arial, sans-serif;
color: #fff;
text-decoration: none; }
header.announcement div nav a.login {
text-decoration: none;
color: #fff;
font-size: 12px; }
header.announcement div nav a.login:hover {
color: rgba(255, 255, 255, 0.6); }
header.announcement div section {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
background: #990000;
margin-left: 34.171%;
padding: 25.888px 38.832px; }
header.announcement div section h1 {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
margin: 0 25.888px 0 0; }
header.announcement div section h2 {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
line-height: 1.2em; }
header.announcement div section.course section {
width: 48.092%;
margin-right: 3.817%;
float: left;
margin-left: 0;
padding: 0; }
header.announcement div section.course section a {
background-color: #330000;
display: block;
padding: 12.944px 25.888px;
text-align: center; }
header.announcement div section.course section a:hover {
background-color: #660000; }
header.announcement div section.course p {
width: 48.092%;
line-height: 25.888px;
float: left; }
section.index-content section {
float: left; }
section.index-content section h1 {
font-size: 24px;
font-weight: 800;
font-family: "Open Sans";
margin-bottom: 25.888px; }
section.index-content section p {
line-height: 25.888px;
margin-bottom: 25.888px; }
section.index-content section ul {
margin: 0; }
section.index-content section.about {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
padding-right: 1.256%;
width: 65.829%; }
section.index-content section.about section {
margin-bottom: 25.888px; }
section.index-content section.about section p {
width: 48.092%;
float: left; }
section.index-content section.about section p:nth-child(odd) {
margin-right: 3.817%; }
section.index-content section.about section.features {
border-top: 1px solid #E5E5E5;
padding-top: 25.888px;
margin-bottom: 0; }
section.index-content section.about section.features h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: 25.888px; }
section.index-content section.about section.features p {
width: auto; }
section.index-content section.about section.features p strong {
font-family: "Open sans";
font-weight: 800; }
section.index-content section.about section.features p a {
color: #990000;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.index-content section.about section.features p a:hover, section.index-content section.about section.features p a:focus {
color: #4d0000; }
section.index-content section.about section.features ul {
margin-bottom: 0; }
section.index-content section.about section.features ul li {
line-height: 25.888px;
width: 48.092%;
float: left;
margin-bottom: 12.944px; }
section.index-content section.about section.features ul li:nth-child(odd) {
margin-right: 3.817%; }
section.index-content section.course, section.index-content section.staff {
width: 31.658%; }
section.index-content section.course h1, section.index-content section.staff h1 {
font: normal 16px Georgia, serif;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: 25.888px; }
section.index-content section.course h2, section.index-content section.staff h2 {
font: 800 24px "Open Sans", Helvetica, Arial, sans-serif; }
section.index-content section.course h3, section.index-content section.staff h3 {
font: 400 18px "Open Sans", Helvetica, Arial, sans-serif; }
section.index-content section.course ul li img, section.index-content section.staff ul li img {
float: left;
margin-right: 12.944px; }
section.index-content section.course h2 {
padding-top: 129.44px;
background: url("/static/images/marketing/circuits-bg.jpg") 0 0 no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
-o-background-size: contain;
background-size: contain; }
@media screen and (max-width: 998px) {
section.index-content section.course h2 {
background: url("/static/images/marketing/circuits-medium-bg.jpg") 0 0 no-repeat; } }
section.index-content section.about-course {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #e5e5e5;
margin-right: 2.513%;
padding-right: 1.256%;
width: 65.829%; }
section.index-content section.about-course section {
width: 48.092%; }
section.index-content section.about-course section.about-info {
margin-right: 3.817%; }
section.index-content section.about-course section.requirements {
clear: both;
width: auto;
border-top: 1px solid #E5E5E5;
padding-top: 25.888px;
margin-bottom: 0; }
section.index-content section.about-course section.requirements p {
float: left;
width: 48.092%;
margin-right: 3.817%; }
section.index-content section.about-course section.requirements p:nth-child(odd) {
margin-right: 0; }
section.index-content section.about-course section.cta {
width: 100%; }
section.index-content section.about-course section.cta a.enroll {
padding: 12.944px 25.888px;
display: block;
text-align: center;
font: 800 18px "Open Sans", Helvetica, Arial, sans-serif; }
footer {
padding-top: 0; }
footer div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: 25.888px 0;
background: url("/static/images/marketing/mit-logo.png") right center no-repeat; }
footer div.footer-wrapper a {
color: #888;
text-decoration: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
footer div.footer-wrapper a:hover, footer div.footer-wrapper a:focus {
color: #666; }
footer div.footer-wrapper p {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 25.888px; }
footer div.footer-wrapper ul {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
footer div.footer-wrapper ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
footer div.footer-wrapper ul li:after {
content: ' |';
display: inline;
color: #ccc; }
footer div.footer-wrapper ul li:last-child:after {
content: none; }
div#fancybox-overlay {
background: #333 !important; }
div#fancybox-wrap {
width: auto !important; }
div#fancybox-wrap div#fancybox-outer {
background: none;
max-width: 600px; }
div#fancybox-wrap div#fancybox-outer div.fancybox-bg {
display: none;
background: none; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 6px black;
-moz-box-shadow: 0 0 6px black;
-ms-box-shadow: 0 0 6px black;
-o-box-shadow: 0 0 6px black;
box-shadow: 0 0 6px black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
border: none;
padding: 51.776px;
max-width: 600px;
width: auto !important; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content h1 {
font-size: 24px;
margin-top: 0;
font-family: "Oswald";
padding-bottom: 25.888px;
border-bottom: 1px solid #eee;
margin-bottom: 25.888px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form {
text-align: left; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form div#enroll_error {
padding-bottom: 25.888px;
color: #DF8B2C;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li {
margin-bottom: 25.888px;
width: 485px;
float: left; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li:nth-child(odd) {
margin-right: 25px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li.terms, div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li.remember {
float: none;
width: auto;
clear: both;
padding-top: 25.888px;
border-top: 1px solid #eee; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li.honor-code {
width: auto;
float: none; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li label {
display: block;
font-weight: bold; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="email"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="number"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="password"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="search"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="tel"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="text"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="url"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="color"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="date"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="datetime"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="datetime-local"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="month"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="time"], div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="week"] {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form ol li input[type="checkbox"] {
margin-right: 10px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form input[type="button"] {
border: 1px solid #520000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #dc0909;
-moz-box-shadow: inset 0 1px 0 0 #dc0909;
-ms-box-shadow: inset 0 1px 0 0 #dc0909;
-o-box-shadow: inset 0 1px 0 0 #dc0909;
box-shadow: inset 0 1px 0 0 #dc0909;
color: white;
display: inline;
font-size: 11px;
font-weight: bold;
background-color: #990000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #990000), color-stop(100%, #610000));
background-image: -webkit-linear-gradient(top, #990000, #610000);
background-image: -moz-linear-gradient(top, #990000, #610000);
background-image: -ms-linear-gradient(top, #990000, #610000);
background-image: -o-linear-gradient(top, #990000, #610000);
background-image: linear-gradient(top, #990000, #610000);
padding: 6px 18px 7px;
text-shadow: 0 1px 0 #3d0000;
-webkit-background-clip: padding-box;
font-size: 18px;
padding: 12.944px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form input[type="button"]:hover {
-webkit-box-shadow: inset 0 1px 0 0 #ac0606;
-moz-box-shadow: inset 0 1px 0 0 #ac0606;
-ms-box-shadow: inset 0 1px 0 0 #ac0606;
-o-box-shadow: inset 0 1px 0 0 #ac0606;
box-shadow: inset 0 1px 0 0 #ac0606;
cursor: pointer;
background-color: #7d0303;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d0303), color-stop(100%, #520000));
background-image: -webkit-linear-gradient(top, #7d0303, #520000);
background-image: -moz-linear-gradient(top, #7d0303, #520000);
background-image: -ms-linear-gradient(top, #7d0303, #520000);
background-image: -o-linear-gradient(top, #7d0303, #520000);
background-image: linear-gradient(top, #7d0303, #520000); }
div#fancybox-wrap div#fancybox-outer div#fancybox-content form input[type="button"]:active {
border: 1px solid #520000;
-webkit-box-shadow: inset 0 0 8px 4px #420000, inset 0 0 8px 4px #420000, 0 1px 1px 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px #420000, inset 0 0 8px 4px #420000, 0 1px 1px 0 #eeeeee;
-ms-box-shadow: inset 0 0 8px 4px #420000, inset 0 0 8px 4px #420000, 0 1px 1px 0 #eeeeee;
-o-box-shadow: inset 0 0 8px 4px #420000, inset 0 0 8px 4px #420000, 0 1px 1px 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #420000, inset 0 0 8px 4px #420000, 0 1px 1px 0 #eeeeee; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content div#login {
min-width: 300px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content div#login ol li {
width: auto;
float: none; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content div.lost-password {
text-align: left;
margin-top: 25.888px; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content div.lost-password a {
color: #999; }
div#fancybox-wrap div#fancybox-outer div#fancybox-content div.lost-password a:hover {
color: #444; }