/* main.css contains a reset, font normalization and some base styles. html5boilerplate.com/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} nav ul {list-style:none} blockquote, q {quotes:none} blockquote:before, blockquote:after, q:before, q:after {content:'';content:none} a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent} ins {background-color:#ff9;color:#000;text-decoration:none} mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold} del {text-decoration: line-through} abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help} table {border-collapse:collapse;border-spacing:0} hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} input, select {vertical-align:middle} /* END RESET CSS */ body {font: 13px/1.4 sans-serif;background:#fff;*font-size:small} /* hack retained to preserve specificity */ body, select, input, textarea {font-family: Arial, Georgia, serif;color: #444} select, input, textarea, button {font:99% sans-serif} pre, code, kbd, samp {font-family: monospace, sans-serif} /* Headers */ h1,h2,h3,h4,h5,h6 {font-weight: bold;margin: 0 0 0.3em} h1 {font-size: 2em} h2 {font-size: 1.6em} h3 {font-size: 1.4em} h4 {font-size: 1.2em} h5 {font-size: 1.1em} h6 {font-size: 1em} h1, h2, h3, h4, h5, h6 {line-height: 1.2em} h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-weight: normal} /* always force a scrollbar in non-IE */ html {overflow-y: scroll} /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active {outline: none;color:#fff} a, a:active, a:visited {color: #fff} a:hover {color: #fff} ul, ol {margin-left: 1.8em} ol {list-style-type: decimal} ul {list-style: square} /* Remove margins for navigation lists */ nav ul, nav li {margin: 0} small {font-size: 11px} strong, th {font-weight: bold} td, td img {vertical-align: top} sub {vertical-align: sub;font-size: smaller} sup {vertical-align: super;font-size: smaller} pre {padding: 15px;/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre;/* CSS2 */ white-space: pre-wrap;/* CSS 2.1 */ white-space: pre-line;/* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word;/* IE */ } textarea {overflow: auto} .ie6 legend, .ie7 legend {margin-left: -7px} /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] {vertical-align: text-bottom} input[type="checkbox"] {vertical-align: bottom} .ie7 input[type="checkbox"] {vertical-align: baseline} .ie6 input {vertical-align: text-bottom} /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button {cursor: pointer} /* webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0} /* colors for form validity */ input:valid, textarea:valid {} input:invalid, textarea:invalid {border-radius: 1px;-moz-box-shadow: 0px 0px 5px red;-webkit-box-shadow: 0px 0px 5px red;box-shadow: 0px 0px 5px red} .no-boxshadow input:invalid, .no-boxshadow textarea:invalid {background-color: #f0dddd} /* These selection declarations have to be separate. */ ::-moz-selection{background: #fc0;color:#000;text-shadow: none} ::selection {background:#fc0;color:#000;text-shadow: none} /* j.mp/webkit-tap-highlight-color */ a:link {-webkit-tap-highlight-color: #fc0} /* make buttons play nice in IE */ button {width: auto;overflow: visible} /* bicubic resizing for non-native sized IMG */ .ie7 img {-ms-interpolation-mode: bicubic} /* ================ Non-semantic helper classes ================ */ /* for image replacement */ .ir {display: block;text-indent: -999em;overflow: hidden;background-repeat: no-repeat;text-align: left;direction: ltr} /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden {display: none;visibility: hidden} /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden {position: absolute !important;clip: rect(1px 1px 1px 1px);/* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px)} /* Hide visually and from screenreaders, but maintain layout */ .invisible {visibility: hidden} /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ .clearfix:before, .clearfix:after {content: "\0020";display: block;height: 0;visibility: hidden} .clearfix:after {clear: both} /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix {zoom: 1} /* ================ Grid CSS ================ * grid used is blueprint: http://www.blueprintcss.org/ * grid calculated by: http://bgg.kematzy.com/ ================ Structure ================ * Page width: 940 px * Number of columns: 12 * Column width: 60 px * Margin width: 20 px =========================================== */ .container {width: 940px;margin: 0 auto} /* Use this class on any div.span / container to see the grid. */ .showgrid {background: url("images/blueprint_grid.png")} /* Sets up basic grid floating and margin. */ .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12 {float:left;margin-right: 20px} .ie6 .column, .ie6 .span-1, .ie6 .span-2, .ie6 .span-3, .ie6 .span-4, .ie6 .span-5, .ie6 .span-6, .ie6 .span-7, .ie6 .span-8, .ie6 .span-9, .ie6 .span-10, .ie6 .span-11, .ie6 .span-12 {display:inline;overflow-x:hidden} /* The last column in a row needs this class. */ div.last {margin-right: 0} /* Use these classes to set the width of a column. */ .span-1 {width: 60px} .span-2 {width: 140px} .span-3 {width: 220px} .span-4 {width: 300px} .span-5 {width: 380px} .span-6 {width: 460px} .span-7 {width: 540px} .span-8 {width: 620px} .span-9 {width: 700px} .span-10 {width: 780px} .span-11 {width: 860px} .span-12, div.span-12 {width: 940px;margin: 0} /* Add these to a column to append empty cols. */ .append-1 {padding-right: 80px} .append-2 {padding-right: 160px} .append-3 {padding-right: 240px} .append-4 {padding-right: 320px} .append-5 {padding-right: 400px} .append-6 {padding-right: 480px} .append-7 {padding-right: 560px} .append-8 {padding-right: 640px} .append-9 {padding-right: 720px} .append-10 {padding-right: 800px} .append-11 {padding-right: 880px} /* Add these to a column to prepend empty cols. */ .prepend-1 {padding-left: 80px} .prepend-2 {padding-left: 160px} .prepend-3 {padding-left: 240px} .prepend-4 {padding-left: 320px} .prepend-5 {padding-left: 400px} .prepend-6 {padding-left: 480px} .prepend-7 {padding-left: 560px} .prepend-8 {padding-left: 640px} .prepend-9 {padding-left: 720px} .prepend-10 {padding-left: 800px} .prepend-11 {padding-left: 880px} /* Border on right hand side of a column. */ div.border {padding-right:9px;margin-right:10px;border-right: 1px solid #eee} /* Border with more whitespace, spans one column. */ div.colborder {padding-right:49px;margin-right:50px;border-right: 1px solid #eee} /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 {margin-left: -80px} .pull-2 {margin-left: -160px} .pull-3 {margin-left: -240px} .pull-4 {margin-left: -320px} .pull-5 {margin-left: -400px} .pull-6 {margin-left: -480px} .pull-7 {margin-left: -560px} .pull-8 {margin-left: -640px} .pull-9 {margin-left: -720px} .pull-10 {margin-left: -800px} .pull-11 {margin-left: -880px} .pull-12 {margin-left: -960px} .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12 {float:left;position:relative} .push-1 {margin: 0 -80px 1.5em 80px} .push-2 {margin: 0 -160px 1.5em 160px} .push-3 {margin: 0 -240px 1.5em 240px} .push-4 {margin: 0 -320px 1.5em 320px} .push-5 {margin: 0 -400px 1.5em 400px} .push-6 {margin: 0 -480px 1.5em 480px} .push-7 {margin: 0 -560px 1.5em 560px} .push-8 {margin: 0 -640px 1.5em 640px} .push-9 {margin: 0 -720px 1.5em 720px} .push-10 {margin: 0 -800px 1.5em 800px} .push-11 {margin: 0 -880px 1.5em 880px} .push-12 {margin: 0 -960px 1.5em 960px} .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12 {float:right;position:relative} /* Use a .box to create a padded box inside a column. */ .box {padding: 1.5em;margin-bottom: 1.5em;background: #E5ECF9} /* Use this to create a horizontal ruler across a column. */ hr {background: #ddd;color: #ddd;clear: both;float: none;width: 100%;height: .1em;margin: 0 0 1.45em;border: none} hr.space {background: #fff;color: #fff} /* button ---------------------------------------------- */ .button {display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2)} .button:hover {text-decoration: none} .button:active {position: relative;top: 1px} .bigrounded {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em} .medium {font-size: 12px;padding: .4em 1.5em .42em} .small {font-size: 11px;padding: .2em 1em .275em} /* color styles ---------------------------------------------- */ /* black */ .black {color: #d7d7d7;border: solid 1px #333;background: #333;background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));background: -moz-linear-gradient(top, #666, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000')} .black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000')} .black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666')} /* gray */ .gray {color: #e9e9e9;border: solid 1px #555;background: #6e6e6e;background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));background: -moz-linear-gradient(top, #888, #575757);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757')} .gray:hover {background: #616161;background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));background: -moz-linear-gradient(top, #757575, #4b4b4b);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b')} .gray:active {color: #afafaf;background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));background: -moz-linear-gradient(top, #575757, #888);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888')} /* white */ .white {color: #606060;border: solid 1px #b7b7b7;background: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));background: -moz-linear-gradient(top, #fff, #ededed);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')} .white:hover {background: #ededed;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));background: -moz-linear-gradient(top, #fff, #dcdcdc);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc')} .white:active {color: #999;background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));background: -moz-linear-gradient(top, #ededed, #fff);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff')} /* orange */ .orange {color: #fef4e9;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top, #faa51a, #f47a20);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')} .orange:hover {color:#fff;background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background: -moz-linear-gradient(top, #f88e11, #f06015);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015')} .orange:active {color: #fcd3a5;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background: -moz-linear-gradient(top, #f47a20, #faa51a);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a')} /* red */ .red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));background: -moz-linear-gradient(top, #ed1c24, #aa1317);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317')} .red:hover {color:#fff;background: #b61318;background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));background: -moz-linear-gradient(top, #c9151b, #a11115);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115')} .red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24')} /* blue */ .blue {color: #d9eef7;border: solid 1px #0076a3;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top, #00adee, #0078a5);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5')} .blue:hover {background: #007ead;background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));background: -moz-linear-gradient(top, #0095cc, #00678e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e')} .blue:active {color: #80bed6;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee')} /* rosy */ .rosy {color: #fae7e9;border: solid 1px #b73948;background: #da5867;background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));background: -moz-linear-gradient(top, #f16c7c, #bf404f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f')} .rosy:hover {background: #ba4b58;background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));background: -moz-linear-gradient(top, #cf5d6a, #a53845);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845')} .rosy:active {color: #dca4ab;background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));background: -moz-linear-gradient(top, #bf404f, #f16c7c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c')} /* green */ .green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e')} .green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c')} .green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top, #4e7d0e, #7db72f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f')} /* pink */ .pink {color: #feeef5;border: solid 1px #d2729e;background: #f895c2;background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));background: -moz-linear-gradient(top, #feb1d3, #f171ab);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab')} .pink:hover {background: #d57ea5;background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));background: -moz-linear-gradient(top, #f4aacb, #e86ca4);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4')} .pink:active {color: #f3c3d9;background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));background: -moz-linear-gradient(top, #f171ab, #feb1d3);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3')} /* ================ Primary Styles ================ */ p, dl, hr, ol, ul, pre, table, address, fieldset, blockquote {margin-bottom: 25px} html, body, #wrap {height:100%;background:#000} #wrap {max-width:1920px;position:relative;margin: 0 auto} table {width:100%} tbody th, tbody td {border-bottom:1px solid #ccc;border-top:1px solid #ccc} th, td {padding:0.2em 1em;text-align:left} blockquote {margin-left:60px;border-left: 3px solid #ccc;padding-left:15px;font: italic 100%/1.5 Georgia, "Times New Roman", Times, serif;color:#666} #content {width: 100%;margin: 0 auto;height:100%} #logo {width:220px;height:120px;background: url("images/logo.png") 0 0 no-repeat;position:fixed;top:100px;right:0;z-index:2500} .ie6 #logo {background: url("images/logo_ie6.gif") 0 0 no-repeat;position:absolute} #navigation {position:fixed;top:240px;right:0;width:220px;z-index:2000;background: url("images/black_70.png");padding:40px;margin:0;padding:0;border-bottom: 1px solid rgba(255,255,255,0.1)} .ie6 #navigation {background:#333;position:absolute} #navigation a {display:block;padding:10px} #navigation a:link, #navigation a:visited {text-decoration:none;color:#fff} #navigation a:hover, #navigation a:active {text-decoration:none;color:#fff;background: #000} #navigation, #navigation li {list-style-type:none;margin:0;padding:0} #navigation li {border-top: 1px solid rgba(255,255,255,0.1);font: bold 18px/18px arial;letter-spacing:-0.05em} .ie6 #navigation li {width:220px} section {height: 100%; max-width: 1920px;padding: 0; width: 100%; position: relative; margin: 0 auto;border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4)} section h2 {font: bold 88px/88px arial;letter-spacing:-0.05em} section article {font: normal 14px/1.4 arial;margin: 100px 35% 0 12%;color:#fff;background: url("images/black_70.png");padding:20px} .ie6 section article {background:#333} #first {background: #000 url("images/1920wide/section1_bg.jpg") 50% 50% no-repeat fixed} #second {background: #000 url("images/1920wide/section2_bg.jpg") 50% 50% no-repeat fixed} #third {background: #000 url("images/1920wide/section3_bg.jpg") 50% 50% no-repeat fixed} #fourth {background: #000 url("images/1920wide/section4_bg.jpg") 50% 50% no-repeat fixed} #fifth {background: #000 url("images/1920wide/section5_bg.jpg") 50% 50% no-repeat fixed} /* ================ Media Queries ================ */ @media screen and (min-width: 1024px) and (min-height: 747px) and (max-width: 1400px) and (max-height: 1021px) { #first {background-image: url("images/1400wide/section1_bg.jpg")} #second {background-image: url("images/1400wide/section2_bg.jpg")} #third {background-image: url("images/1400wide/section3_bg.jpg")} #fourth {background-image: url("images/1400wide/section4_bg.jpg")} #fifth {background-image: url("images/1400wide/section5_bg.jpg")} } @media screen and (max-width: 1024px) and (min-height: 747px) and (max-height: 1021px) { #first {background-image: url("images/1400wide/section1_bg.jpg")} #second {background-image: url("images/1400wide/section2_bg.jpg")} #third {background-image: url("images/1400wide/section3_bg.jpg")} #fourth {background-image: url("images/1400wide/section4_bg.jpg")} #fifth {background-image: url("images/1400wide/section5_bg.jpg")} } @media screen and (max-width: 1024px) and (max-height: 747px) { #first {background-image: url("images/1024wide/section1_bg.jpg")} #second {background-image: url("images/1024wide/section2_bg.jpg")} #third {background-image: url("images/1024wide/section3_bg.jpg")} #fourth {background-image: url("images/1024wide/section4_bg.jpg")} #fifth {background-image: url("images/1024wide/section5_bg.jpg")} } @media screen and (max-width: 1000px) { section h2 {font: bold 44px/44px arial} section article {font: normal 12px/1.3 arial;margin-right:40%} } @media screen and (max-height: 790px) { section {padding-bottom:100px;height:auto;min-height:100%} } @media screen and (max-height: 590px) { #logo {top:0} #navigation {top:140px} section article {margin-top: 20px} } /* iPad [portrait + landscape] */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #first {background-image: url("images/1400wide/section1_bg.jpg")} #second {background-image: url("images/1400wide/section2_bg.jpg")} #third {background-image: url("images/1400wide/section3_bg.jpg")} #fourth {background-image: url("images/1400wide/section4_bg.jpg")} #fifth {background-image: url("images/1400wide/section5_bg.jpg")} #first, #second, #third, #fourth, #fifth {background-attachment:scroll} section {padding-bottom:100px;height:auto;min-height:100%} } @media all and (orientation:portrait) {/* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) {/* Style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) {/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you j.mp/textsizeadjust html {-webkit-text-size-adjust:none;-ms-text-size-adjust:none} */ #first {background-image: url("images/1400wide/section1_bg.jpg")} #second {background-image: url("images/1400wide/section2_bg.jpg")} #third {background-image: url("images/1400wide/section3_bg.jpg")} #fourth {background-image: url("images/1400wide/section4_bg.jpg")} #fifth {background-image: url("images/1400wide/section5_bg.jpg")} #first, #second, #third, #fourth, #fifth {background-attachment:scroll;-webkit-background-size:cover;-moz-background-size: cover;background-size: cover} section {padding-bottom:100px;height:auto;min-height:100%} } /* ================ Print Styles ================ */ @media print {* {background: transparent !important;color: #444 !important;text-shadow: none !important} a, a:visited {color: #444 !important;text-decoration: underline} a:after {content: " (" attr(href) ")"} abbr:after {content: " (" attr(title) ")"} .ir a:after {content: ""} /* Don't show links for images */ pre, blockquote {border: 1px solid #999;page-break-inside: avoid} thead {display: table-header-group} /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img {page-break-inside: avoid} @page {margin: 0.5cm} p, h2, h3 {orphans: 3;widows: 3} h2, h3{page-break-after: avoid} }