/* Title: Master styles for screen media Author: Jordan Cooperman, jordan@vectormediagroup.com Year: 2011 Welcome, thou wanderer of the interwebs! If you have any questions, Don't be shy. Send me a line! ================================================================ ---------------------------------------------------------------- [Table of contents] 0.General 1.Layout 2.Navigation 3.Header 4.Footer 5.Pages i. 6.Modules 7.Forms 8.Sprites *.User Defined ----------------------------------------------------------------*/ /* positioning */ /* sprites */ /* borders made from backgrounds */ /* triangles */ /* css3 */ /* grid container ============================================== */ .container-12 { width: 960px; margin: 0 auto; position: relative; } .container-12:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* grid divisions ============================================== */ .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { margin: 5px 5px; padding: 0; display: inline; float: left; } .grid-1 { width: 7.292%; } .grid-2 { width: 15.625%; } .grid-3 { width: 23.958%; } .grid-4 { width: 32.292%; } .grid-5 { width: 40.625%; } .grid-6 { width: 48.958%; } .grid-7 { width: 57.292%; } .grid-8 { width: 65.625%; } .grid-9 { width: 73.958%; } .grid-10 { width: 82.292%; } .grid-11 { width: 90.625%; } .grid-12 { width: 98.958%; } .from-left-1 { margin-left: 70px; } .from-left-2 { margin-left: 150px; } .from-left-3 { margin-left: 230px; } .from-left-4 { margin-left: 310px; } .from-left-5 { margin-left: 390px; } .from-left-6 { margin-left: 470px; } .from-left-7 { margin-left: 550px; } .from-left-8 { margin-left: 630px; } .from-left-9 { margin-left: 710px; } .from-left-10 { margin-left: 790px; } .from-left-11 { margin-left: 870px; } .from-left-12 { margin-left: 950px; } .grid-centered { display: block; float: none; margin: 0 auto; } * { font-family: "Verdana", "Helvetica Neue", "Arial", "Sans-serif"; } body { /* 16px / 24px */ font-size: 1em; line-height: 1.5em; } .small { /* 13px / 18px */ font-size: 0.813em; line-height: 1.385em; } .normal, h3 { /* 16px / 24px */ font-size: 1em; line-height: 1.5em; /* 24 */ } .normal-large { /* 18 / 30 */ font-size: 1.125em; line-height: 1.667em; } .large, h2, h1 { /* 26 / 36px */ font-size: 1.625em; line-height: 1.385em; } .large-huge { /* 30 / 42px */ font-size: 1.875em; line-height: 1.4em; } .large-huge.spaced { line-height: 2.4em; } .huge { /* 42px / 48px */ font-size: 2.625em; line-height: 1.143em; } .massive { /* 68px / 72px */ font-size: 4.25em; line-height: 0.988em; } .gigantic { /* 110px / 120px */ font-size: 6.875em; line-height: 1.091em; } p { font-size: 1.125em; /* 18 / 16 */ font-family: "minion-pro"; } p .drop-cap { font-size: 2em; /* 24 / 12 */ } h1, h2, h3, h4, h5, h6 { font-family: "museo-slab"; font-weight: 700; margin: 0; } h1 .small { font-size: 0.66666666666667em; /* 20 / 30 */ font-family: "museo-sans"; font-weight: 300; } #user-nav li { font-family: "museo-sans"; font-weight: 500; font-style: italic; } #user-nav a { font-family: "museo-sans"; font-weight: 500; font-style: normal; } #main-nav a { font-family: "museo-slab"; font-weight: 700; } button, #footer-nav a { font-family: "museo-sans"; font-weight: 500; } /* * media queries included * at end of document */ /* 0.`general ============================================== */ ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; } ::selection { background: #44a1dd; color: #fff; text-shadow: none; } hr.stripes { margin: 0; height: 16px; clear: both; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff; background-image: url("../img/bg-stripes.png"); background-repeat: repeat; background-color: #fff; } hr.spacer { padding: 0; margin: 10px 0 30px 0; } hr.heading { margin-bottom: 16px; } hr.bordered { border-bottom: 2px solid #f2b83b; } button { -moz-border-radius: 5px; border-radius: 5px; padding: 8px 24px; border: 0; background-image: url("../img/button-bg.png"); background-repeat: repeat-x; background-position: left bottom; } button.blue { background-color: #367da9; border: 1px solid #16567e; color: #fff; } button.green { background-color: #78b343; border: 1px solid #4f901b; color: #fff; } button.three-dim.blue { -moz-box-shadow: 2px 2px 0 #16567e; -webkit-box-shadow: 2px 2px 0 #16567e; box-shadow: 2px 2px 0 #16567e; } button.three-dim.green { -moz-box-shadow: 2px 2px 0 #4f901b; -webkit-box-shadow: 2px 2px 0 #4f901b; box-shadow: 2px 2px 0 #4f901b; } h3.heading { margin-bottom: 16px; padding-left: 12px; } em { font-family: "Georgia", "serif"; } /* 1.`layout ============================================== */ html, body { height: 100%; margin: 0; } body { background-image: url("../img/bg-black-noise.gif"); background-repeat: repeat; } .header { -moz-box-shadow: 0 1px 1px #888888; -webkit-box-shadow: 0 1px 1px #888888; box-shadow: 0 1px 1px #888888; border-top: 1px solid #f2b83b; position: relative; z-index: 10; border-bottom: 2px solid #333; } .header .container-12 > div { margin-top: 0; margin-bottom: 0; } .content { background-color: #fff; padding: 1em 3%; min-height: 25em; } /* 2.`navigation ============================================== */ #user-nav { border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; float: right; background-color: #f2b83b; } #user-nav li { display: inline-block; vertical-align: middle; float: none; padding: 3px 12px; color: #fff; } #user-nav li a { display: block; color: #fff; } #main-nav { clear: both; } #main-nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #main-nav ul { float: right; } #main-nav li { display: inline-block; vertical-align: middle; float: none; } #main-nav li a { -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; display: block; padding: 10px; padding-left: 20px; text-transform: uppercase; color: #aaa; } #main-nav li a.active { position: relative; color: #fff; } #main-nav li a.active em { position: absolute; left: 0; top: 50%; margin-top: -8px; background-position: 0 0; width: 14px; height: 14px; background-repeat: no-repeat; } #main-nav li a em { text-transform: none; } #main-nav li a:hover { color: #eee; } /* 3.`header ============================================== */ #logo { float: left; padding: 5px; margin-left: 10px; margin-top: 5px; } #header { margin-top: 20px; } .highlight { background-image: url("../img/logo-bg.png"); background-position: left bottom; background-repeat: no-repeat; } /* 4.`footer ============================================== */ .footer { color: #444; padding-top: 24px; } .footer #footer-nav { float: right; margin-right: -16px; } .footer #footer-nav li { display: inline-block; *display: inline; } .footer #footer-nav a { -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; padding: 5px 16px; color: #999; } .footer #footer-nav a:hover { color: #fff; } .footer p { float: right; clear: both; margin-top: 24px; } .footer .creative_commons { float: right; clear: both; } .footer .creative_commons .section { clear: both; float: right; } .footer .creative_commons a { color: #777; } /* 6.`modules ============================================== */ .padded-loose { padding: 10px; padding-top: 0; padding-bottom: 0; } .button-set.vertical button { margin-bottom: 16px; } .button-set.half-width-buttons button { width: 48%; } .button-set.centered { text-align: center; } .video-wrapper { -moz-border-radius: 5px; border-radius: 5px; padding: 5px; background-color: #f5f5f5; text-align: center; } .schools ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .schools li { float: left; width: 25%; height: 100px; } .schools em { margin: 0 auto; } /* 8.`sprites ============================================== */ .icon, .sprite, .sprite-school { text-indent: -9999px; line-height: 0; font-size: 0; overflow: hidden; display: block; } .sprite { background-image: url("../img/finalsclub-sprite-images.png"); } .icon { background-image: url("../img/finalsclub-sprite-icons.png"); } .sprite-school { background-image: url("../img/finalsclub-sprite-schools.gif"); } .brown { background-position: 0 0; width: 61px; height: 72px; } .columbia { background-position: -62px 0; width: 81px; height: 61px; } .cornell { background-position: -144px 0; width: 71px; height: 72px; } .dartmouth { background-position: -216px 0; width: 56px; height: 71px; } .shield { background-position: -273px 0; width: 59px; height: 60px; } .mit { background-position: -333px 0; width: 79px; height: 41px; } .lock_haven { background-position: -413px 0; width: 61px; height: 68px; } .cal { background-position: -475px 0; width: 91px; height: 72px; } .texas { background-position: -567px 0; width: 54px; height: 68px; } .yale { background-position: -622px 0; width: 51px; height: 50px; } .penn { background-position: -674px 0; width: 115px; height: 65px; } .harvard { background-position: -790px 0; width: 67px; height: 65px; } /* media queries */ /* media queries ============================================== */ /* *.`user defined ============================================== */ .right { float: right !important; } .no-top-margin { margin-top: 0; } .spacer { padding-top: 16px; padding-bottom: 32px; } .yellow { color: #f2b83b; } .half-width { width: 50%; } .centered { text-align: center; } .centered-rt-parent { margin: 0 auto; } #messages { text-align: center; background: #adf; color: black; font-weight: bold; padding: 0.5em 0; } div.school { cursor: pointer; cursor: hand; margin: 1%; padding: 2%; border: solid 1px #888; -moz-border-radius: 0.20em; -webkit-border-radius: 0.20em; -webkit-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1); -moz-box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, .1); /* */ } div.school div.name { font-weight: bold; font-size: 120%; margin: 0 0; } div.school div.desc { font-size: 90%; color: #888; font-style: italic; margin: 0 0; } div.course { margin: 1em 0; } div.press { margin: 2em 0; } img.press { height: 2.5em; float: left; zborder: solid 1px #aaa; margin: 0 2em 1em 0; } div.press p.date { font-size: 90%; color: #68a; } div.press p.readmore { font-size: 90%; font-style: italic; } div.press p.readmore a { color: #48c; } div.conduct { text-align: center; } div.conduct p.academic { padding: 2em 0; } div.conduct img { display: inline; padding: 20px; border: solid 1px #888; background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#f8f8f8)); background: -moz-linear-gradient(top, #fdfdfd, #f8f8f8); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcff', endColorstr='#f4f4ff'); -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 1px 2px rgba(0,0,0,.5); } div.conduct p.vague { font-style: italic; font-size: 80%; color: #888; } .row { display: table-row; } .row .label { width: 50%; text-align: right; display: table-cell; padding: 0.8em 3% 0.8em 0%; white-space: nowrap; font-weight: bold; } .row .field { width: 300px; display: table-cell; padding: 0.2em 0; } .row .field input { width: 90%; } div.content h1 { color: #000; text-align: left; font-weight: bold; font-family: Georgia, Helvetica; } .content h1 { border-bottom: 2px solid #5c6572; zbackground: transparent url("/images/bg_main-heading.gif") 0 100% repeat-x; font-family: Georgia, helvetica; font-weight: normal; font-size: 140%; padding: 0.2em 0; margin-bottom: 1em; } #pg_courses { min-height:700px; } #pg_courses #right { float:right; width:500px; } .note, .notes_instructor, .notes_head { margin: 1.0em 0; } .notes_head { font-weight: bold; } .notes_instructor, .notes_head { color: #888; } .notes_instructor { padding-bottom: 1.0em; border-bottom: solid 1px #aaa; } .note .name { font-size: 110%; } .note .visits { font-style: italic; color: #aaa; } .lecture, .lectures_instructor, .lectures_head { margin: 1.0em 0; } .lectures_head { font-weight: bold; } .lectures_instructor, .lectures_head { color: #888; } .lectures_instructor { padding-bottom: 1.0em; border-bottom: solid 1px #aaa; } .lecture .name { font-size: 110%; } .lecture .created { font-style: italic; color: #aaa; } .lecture { margin: 0.5em 0; padding: 0.5em 1em; border: solid 1px #888; -moz-border-radius: 0.20em; -webkit-border-radius: 0.20em; }