/* Foundation v2.2.1 http://foundation.zurb.com */ /* Artfully Masterminded by ZURB */ /* Artfully Revised by Katherine Spencer Joyce, WHOI */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Reset & Standards :: Links :: Lists :: Tables :: Misc */ /* -------------------------------------------------- :: Global Reset & Standards -------------------------------------------------- */ /* Eric Meyer's CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } html { font-size: 62.5%; background-color: #e0eaf3; } html,body { margin: 0px; padding: 0px; overflow-x: hidden; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-color: #e0eaf3; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } sub {vertical-align: sub;} sup {vertical-align: super;} body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-size: 1.3em; line-height: 20px; color: #000; position: relative; -webkit-font-smoothing: antialiased; } /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: Grid This is the mobile-friendly, responsive grid that lets Foundation work much of its magic. -------------------------------------------------- */ .container { padding: 0 20px; } .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; position: relative;} /* To fix the grid into a certain size, set max-width to width */ .row .row { min-width: 0; } .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative;max-width:980px; } .column:first-child, .columns:first-child { margin-left: 0; } [class*="column"] + [class*="column"]:last-child { float: right; } [class*="column"] + [class*="column"].end { float: left; } .row .one { width: 4.3%; } .row .two { width: 13%; } .row .three { width: 21.679%; } .row .four { width: 30.37%; } .row .five { width: 39.1%; } .row .six { width: 47.8%; } .row .seven { width: 56.5%; } .row .eight { width: 65.2%; } .row .nine { width: 73.9%; } .row .ten { width: 82.6%; } .row .eleven { width: 91.3%; } .row .twelve { width: 100%; } .row .offset-by-one { margin-left: 13.1%; } .row .offset-by-two { margin-left: 21.8%; } .row .offset-by-three { margin-left: 30.5%; } .row .offset-by-four { margin-left: 39.2%; } .row .offset-by-five { margin-left: 47.9%; } .row .offset-by-six { margin-left: 56.6%; } .row .offset-by-seven { margin-left: 65.3%; } .row .offset-by-eight { margin-left: 74.0%; } .row .offset-by-nine { margin-left: 82.7%; } .row .offset-by-ten { margin-left: 91.4%; } .row .centered { float: none; margin: 0 auto; } .row .offset-by-one:first-child { margin-left: 8.7%; } .row .offset-by-two:first-child { margin-left: 17.4%; } .row .offset-by-three:first-child { margin-left: 26.1%; } .row .offset-by-four:first-child { margin-left: 34.8%; } .row .offset-by-five:first-child { margin-left: 43.5%; } .row .offset-by-six:first-child { margin-left: 52.2%; } .row .offset-by-seven:first-child { margin-left: 60.9%; } .row .offset-by-eight:first-child { margin-left: 69.6%; } .row .offset-by-nine:first-child { margin-left: 78.3%; } .row .offset-by-ten:first-child { margin-left: 87%; } .row .offset-by-eleven:first-child { margin-left: 95.7%; } /* Source Ordering */ .push-two { left: 17.4% } .push-three { left: 26.1%; } .push-four { left: 34.8%; } .push-five { left: 43.5%; } .push-six { left: 52.2%; } .push-seven { left: 60.9%; } .push-eight { left: 69.6%; } .push-nine { left: 78.3%; } .push-ten { left: 87%; } .pull-two { right: 17.4% } .pull-three { right: 26.1%; } .pull-four { right: 34.8%; } .pull-five { right: 43.5%; } .pull-six { right: 52.2%; } .pull-seven { right: 60.9%; } .pull-eight { right: 69.6%; } .pull-nine { right: 78.3%; } .pull-ten { right: 87%; } .row .multimedia { width: 19%; } img, object, embed { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } #map_canvas img, .map_canvas img {max-width: none!important;} /* Nicolas Gallagher's micro clearfix */ .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* -------------------------------------------------- :: Block grids These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating blocks of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones For IE7/8 compatibility block-grid items need to be the same height. You can optionally uncomment the lines below to support arbitrary height, but know that IE7/8 do not support :nth-child. -------------------------------------------------- */ .block-grid { display: block; overflow: hidden; } .block-grid>li { display: block; height: auto; float: left; } .block-grid.two-up { margin-left: -4% } .block-grid.two-up>li { margin-left: 4%; width: 46%; margin-bottom: 4%;} /* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ .block-grid.three-up { margin-left: -2% } .block-grid.three-up>li { margin-left: 2%; width: 31.3%; margin-bottom: 2%;} /* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ .block-grid.four-up { margin-left: -2% } .block-grid.four-up>li { margin-left: 2%; width: 23%; margin-bottom: 2%;} /* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ .block-grid.five-up { margin-left: -1.5% } .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; margin-bottom: 1.5%;} /* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */ /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ @font-face { font-family: 'fontin_sans_rgregular'; src: url('fontin_sans_r_45b-webfont.eot'); src: url('fontin_sans_r_45b-webfont.eot?#iefix') format('embedded-opentype'), url('fontin_sans_r_45b-webfont.woff') format('woff'), url('fontin_sans_r_45b-webfont.ttf') format('truetype'), url('fontin_sans_r_45b-webfont.svg#fontin_sans_rgregular') format('svg'); font-weight: normal; font-style: normal; } h1, h2, h3, h4, h5, h6 { color: #631e2c; font-weight: normal; line-height: 1.25; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; } h1 { font-size: 32px; font-size: 3rem; margin-bottom: 10px; } h2 { font-size: 20px; font-size: 1.8rem; margin-bottom: 4px; } h3 { font-size: 24px; font-size: 1.7rem; margin-bottom: .1em; margin-top:1em; } h4 { font-size: 16px; font-size: 2rem; margin-bottom: 3px; } h5 { font-size: 12px; font-size: 1.4rem; font-weight: normal; margin-bottom: 3px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; letter-spacing: .05em; } h6 { font-size: 11px; font-size: 1.3rem; font-weight: normal;} .subheader { color: #777; font-weight: 300; margin-bottom: 24px; } p { font-size: 14px; font-size: 1.4rem; line-height: 1.7; } p img { margin: 0; } p.lead { font-size: 18px; font-size: 1.8rem; line-height: 1.5; } em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 60%; line-height: inherit; } h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; } /* Blockquotes */ blockquote, blockquote p { } blockquote { } blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555; } hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } abbr { text-transform: none; } /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */ .print-only { display: none !important; } @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ p a, p a:visited { color: #444 !important; text-decoration: underline; } p a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ 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; } .banner img {width:94%;} @page { margin:.6in; } p, h2, h3 { orphans: 3; widows: 3; font-family:Georgia, "Times New Roman", Times, serif; } h2, h3{ page-break-after: avoid; font-size:18px; } h1 {font-family:Georgia, "Times New Roman", Times, serif; font-size:24px; } p {font-size:13px} .hide-on-print { display: none !important; } .print-only { display: block !important; } html, body {font-size: 10px;color: #000;font-family:Georgia, "Times New Roman", Times, serif; height:auto !important;} .row .eight, .row .nine, .row .ten, .row .eleven, .row .twelve { width: 94%; align-content:center; } .top, .bgNav, .navigation, .article .asset, .asset.topic, .tools, .showLink, ul.breadcrumbs li, #paginate-slider4, .homebottom .three.columns, .all, form.custom, .four.pad.columns .subscribe, .hide-on-phones, .asset.refine, .button.nice, ul.pagination, .bgFooter {display:none !important;} } /* -------------------------------------------------- :: Header area ---------------------------------------------------*/ .top {background: #031c33;} .brand { margin-top: 8px; padding-left: 12px; text-align:left; } .bgBanner {background: #22476e; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNDc2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIyNDc2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzE4MmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #22476e 0%, #22476e 65%, #03182b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22476e), color-stop(49%,#22476e), color-stop(100%,#03182b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* IE10+ */ background: linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22476e', endColorstr='#03182b',GradientType=0 ); /* IE6-8 */ *background: #22476e; /* IE7 */ } .banner {padding-top:6px;margin:0px;} .bgNav { background: #336291; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzNjI5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNzM2NTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #336291 0%, #173656 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#336291), color-stop(100%,#173656)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #336291 0%,#173656 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #336291 0%,#173656 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #336291 0%,#173656 100%); /* IE10+ */ background: linear-gradient(top, #336291 0%,#173656 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336291', endColorstr='#173656',GradientType=0 ); /* IE6-8 */ margin:0px; padding:0px; box-shadow: 0 0px 22px rgba(0,0,0,0.65); -webkit-box-shadow: 0 0px 22px rgba(0,0,0,0.65); -moz-box-shadow: 0 0px 22px rgba(0,0,0,0.75); *background: #336291; height:46px; padding:0px; margin-bottom: 15px\9; } /* -------------------------------------------------- :: SEARCH ---------------------------------------------------*/ .searchform { display: inline-block; zoom: 1; *display: inline; border: solid 1px #010637; float: right; margin-right: 0px; color: #E0EAF3; font-size: 0.85em; margin-top: 5px; margin-bottom: 0px; margin-left: 0px; overflow:hidden; } .searchform input { font: normal 13px Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #13304E; padding: 0px 0px 0px 8px; border: 1px solid #01648E; outline: none; width:15rem; height: 27px; margin: 0px; line-height: 27px; } div.row.searchoceanus .searchform {border:none !important} div.row.searchoceanus .searchform .searchfield { background: #fff !important; color:#13304E; } .searchform .searchbutton { color: #fff; border: 1px solid #001630; font-size: 11px; width: 29px; background: #173656; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MzY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjQ3NmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #173656 0%, #22476e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(100%,#22476e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#22476e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#22476e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#22476e 100%); /* IE10+ */ background: linear-gradient(to bottom, #173656 0%,#22476e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#22476e',GradientType=0 ); /* IE6-8 */ margin: 0px; padding: 0px; height: 29px; } /* -------------------------------------------------- Nav Bar with Dropdowns -------------------------------------------------- */ .navigation {width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto;} .navigation .row {height: 46px;} .nav-bar {height: 46px;} .nav-bar>li { float: left; display: block; position: relative; padding: 0; margin: 0; border-right: 1px solid #264e77; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 46px; } .nav-bar>li>a .main { position: relative; padding: 0 10px 0 12px; display: block; text-decoration: none; font-size: 15px; font-size: 1.4rem; color: #FFF; text-transform: uppercase; } .nav-bar>li>a:hover .main, .nav-bar>li>a:focus .main { color:#cdd74c; background: #173656; cursor:pointer; } .nav-bar>li>input { margin: 0 16px; } .nav-bar>li ul { margin-bottom: 0; } .nav-bar>li li { line-height: 1.3; } .nav-bar>li.has-flyout>a .main { padding-right: 35px; } .nav-bar li .has-flyout .main a {color: #FFF;} .nav-bar li .has-flyout .main a:hover { color: #cdd74c; } a:focus { color: #990000; outline: none; } .nav-bar>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 20px 15px 20px 20px; z-index: 2; display: block; } .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #FFF; display: block; } .flyout { background: #173656; margin: 0; padding: 20px; position: absolute; top: 45px; left: -1px; width: 350px; z-index: 40; color: #E0EAF3; } .flyout h4 {color: #ddd; font-size: 16px; font-size:1.4rem; font-weight:normal; } .flyout h4 a {color: #0cf;} .flyout h5 {color: #ddd; font-size: 12px; font-size:1rem; text-transform: uppercase; margin-top:12px;} .flyout h5 a { color: #C7D9E6; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #C7D9E6; margin-top: 8px; } .flyout h5 .first {margin-top:0px;} .flyout p {margin-bottom: 0px;} .flyout p a {color: #0cf; margin-bottom:0px;} .flyout a:hover {color: #cdd74c} .flyout.small { width: 430px; } .flyout.medium { width: 640px; } .flyout.large {width: 760px; } .flyout.right { left: auto; right: 0; } .flyout.centered { margin: 0 auto; } .flyout p:last-child { margin-bottom: 0; } .nav-bar>li .flyout { display: none; } .flyout.medium .row {margin-bottom: 18px;height: auto;} .flyout.medium h4 {font-size:12px; font-size:1.2rem; text-transform:uppercase;text-align: center;} .flyout .two p, .flyout .five p, .flyout .twelve p, .flyout .three p {margin-bottom:2px; padding:0px; font-size:12px; font-size:1.2rem; text-transform:uppercase;} .flyout .two p a, .flyout .five p a, .flyout .twelve p a {color:#00CCFF;} .flyout .two p a:hover, .flyout .five p a:hover {color:#FFF;} .flyout a:hover {color:#FFF; border-bottom: dotted 1px #FFF;} .issues {float: left;margin-right:12px;margin-bottom:12px;} .twelve .issues {margin-right:26px;margin-bottom:16px;text-align: center;padding:0;} .twelve .issues a:hover img {opacity:0.3; filter:alpha(opacity=30); border-bottom:0px;} .flyout .five h4 {clear:both;} .flyout.small .row {clear: both;margin-bottom: 8px;height: auto;} .flyout.small img {margin:0px;float:none;} .flyout.small h4, .flyout.small h4 a {margin-top:0px; margin-bottom:8px; text-transform:uppercase; font-size:12px; font-size:1.2rem;text-align: center;} /* -------------------------------------------------- Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na -------------------------------------------------- */ .subscribe-new {float:left; margin-left:26px;padding-top:14px;font-size: 15px; font-size: 1.4rem; color: #FFF; text-transform: uppercase;font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif;} dl.sub-nav {margin-top:8px; display: block; width: auto; overflow: hidden; float:right; -webkit-border-radius: 10px; font-size:1.2rem; border-radius: 10px; background: #173656; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MzY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNzIyM2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #173656 0%, #07223b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(100%,#07223b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#07223b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#07223b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#07223b 100%); /* IE10+ */ background: linear-gradient(top, #173656 0%,#07223b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#07223b',GradientType=0 ); /* IE6-8 */ padding: 6px 10px; } dl.sub-nav dt, dl.sub-nav dd { float: left; display: inline; } dl.sub-nav dt { color: #999; font-weight: normal; } dl.sub-nav dd a { text-decoration: none; color: #fff; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; } dl.sub-nav dd a:hover { color: #cdd74c; } dl.sub-nav dd.active a { background: #00A6FC; color: #fff; padding: 3px 9px; } dl.sub-nav dd.divide a {margin-right:12px; padding-right: 10px; border-right: 1px solid #264e77; } /* -------------------------------------------------- :: Links -------------------------------------------------- */ a { color: #27668f; text-decoration: none; line-height: inherit; } a:hover { color: #631e2c; } a:focus { color: #631e2c; outline: none; } p a, p a:visited { line-height: inherit; } /* -------------------------------------------------- :: Lists -------------------------------------------------- */ ul, ol { margin-bottom: 18px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } li { margin-bottom: 12px; } ul.large li { line-height: 21px; } /* -------------------------------------------------- :: Tables -------------------------------------------------- */ table { margin:0; padding:0px; } table thead, table tfoot { } table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; } table thead tr th, table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; } table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; } table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; } table tbody tr.even, table tbody tr.alt { } table tbody tr:nth-child(even) { background:} table tbody tr td { color: #333; padding: 2px; vertical-align: top; border: none; } /* -------------------------------------------------- :: Misc ---------------------------------------------------*/ .left {float: left;margin-right: 15px;} .right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .hide { display: none; } .highlight { background: #ff0; } #googlemap img, object, embed { max-width: none; } #map_canvas embed { max-width: none; } #map_canvas img { max-width: none; } #map_canvas object { max-width: none; } /* -------------------------------------------------- Buttons -------------------------------------------------- */ .button { display: inline-block; text-align: center; padding: 9px 24px; color: #FFFFFF; text-decoration: none; font-size: 13px; font-size: 1.5rem; line-height: 1; font-family: 'fontin_sans_rgregular', "Trebuchet MS", Arial, Helvetica, sans-serif; position: relative; cursor: pointer; border: none; outline: none; margin: 0; } /* Don't use native buttons on iOS */ input[type=submit].button, button.button { -webkit-appearance: none; } /* Hide inner focus effect in Firefox */ button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } .button.nice { background: #a2a939; /* Old browsers */ background: -moz-linear-gradient(top, #a2a939 0%, #9fa800 50%, #a2a939 51%, #cdd74c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a2a939), color-stop(50%,#9fa800), color-stop(51%,#a2a939), color-stop(100%,#cdd74c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* IE10+ */ background: linear-gradient(to bottom, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2a939', endColorstr='#cdd74c',GradientType=0 ); /* IE6-9 */ text-shadow: 0 -1px 1px rgba(0,0,0,0.28); text-transform:uppercase; letter-spacing: .05em; -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; float: left; margin-right: 20px; margin-top: 25px; } .subscribe .button.nice a {color:#FFF;} .text-center .button { margin-bottom: 25px; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; background-image: url(../images/arrow.png); background-repeat: no-repeat; background-position: center 35px; letter-spacing: 0.05em; height: 48px; color: #666; } .text-center .button:hover { background-color: none; color:#333; } .button.nice:hover { background: #173656; /* Old browsers */ background: -moz-linear-gradient(top, #173656 0%, #006699 50%, #006699 51%, #8dc7f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(50%,#006699), color-stop(51%,#006699), color-stop(100%,#8dc7f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* IE10+ */ background: linear-gradient(to bottom, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#8dc7f0',GradientType=0 ); /* IE6-9 */ -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; color: #fff; } .button.radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .button.round { -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; } .button.full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } .button.left-align { text-align: left; text-indent: 12px; } /* Sizes ---------- */ .tiny.button { font-size: 10px; padding: 6px 14px 8px; width: auto; } .small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; } .medium.button { font-size: 13px; width: auto; } .large.button { font-size: 18px; padding: 11px 48px 13px; width: auto; } /* Nice Sizes ---------- */ .nice.tiny.button { background-position: 0 -37px; } .nice.small.button { background-position: 0 -34px; } .nice.large.button { background-position: 0 -30px; } /* Colors ---------- */ .blue.button { background-color: #00a6fc; } .red.button { background-color: #e91c21; } .white.button { background-color: #e9e9e9; color: #333; } .black.button { background-color: #141414; } .green.button { background-color: #5b8737; } /* Nice Colors ---------- */ .nice.blue.button { border: 1px solid #0593dc; } .nice.red.button { border: 1px solid #b90b0b; } .nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; } .nice.black.button { border: 1px solid #000; } .nice.green.button { border: 1px solid #4a6b2d; } /* Hovers ---------- .button:hover, .button:focus { background-color: #0192dd; color: #fff; } .blue.button:hover, .blue.button:focus { background-color: #0192dd; } .red.button:hover, .red.button:focus { background-color: #d01217; } .white.button:hover, .white.button:focus { background-color: #dadada; color: #333; } .black.button:hover, .black.button:focus { background-color: #000; } .green.button:hover, .green.button:focus { background-color: #699c40; } */ /* Hovers ---------- */ .nice.button:active { -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); box-shadow: inset 0 1px 0 rgba(0,0,0,.15); } /* Disabled ---------- */ .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; } /* Correct FF button padding */ @-moz-document url-prefix("http://") { input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner { border: 0; padding: 0; } input[type=submit].tiny.button { padding: 5px 14px 7px; } input[type=submit].small.button { padding: 7px 20px 8px; } input[type=submit].medium.button { padding: 8px 34px 9px; } input[type=submit].large.button { padding: 9px 48px 10px; } } /* -------------------------------------------------- Alerts -------------------------------------------------- */ div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px rgba(255,255,255,0.9); position: relative; } .alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box.warning { background-color: #f68b01; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0; font-size: 18px; opacity: 0.2; padding: 4px; } .alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; } /* -------------------------------------------------- Labels -------------------------------------------------- */ .label { padding: 0 4px 2px; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: #00a6fc; } .label.radius { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .label.round { padding: 1px 7px 2px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* Colors ---------- */ .blue.label { background-color: #00a6fc; } .red.label { background-color: #e91c21; } .green.label { background-color: #7fae00; } .white.label { background-color: #e9e9e9; color: #333; } .black.label { background-color: #141414; } /* -------------------------------------------------- Tabs -------------------------------------------------- */ dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; } dl.tabs dt { display: block; width: auto; height: 30px; padding: 0 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; } dl.tabs dt:first-child { padding: 0 9px 0 0; } dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; } dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: solid 1px #ddd; margin: 0 -1px 0 0; color: #555; background: #eee; } dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0 1px; height: 30px; } .nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; } .nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; font-size: 1.5rem; color: #555555; background: none; border: none; } .nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; } .nice.tabs dd:first-child a.active { margin-left: 0; } dl.tabs.vertical { height: auto; } dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd { float: none; height: auto; } dl.tabs.vertical dd a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } dl.tabs.vertical dd a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } .nice.tabs.vertical { border-bottom: solid 1px #eee; height: auto; } .nice.tabs.vertical dd a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } .nice.tabs.vertical dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .nice.tabs.vertical dd:first-child a.active { margin: 0; } ul.tabs-content { margin: 0; display: block; } ul.tabs-content>li { display: none; } .no-js ul.tabs-content>li { display: block; } ul.tabs-content>li.active { display: block; } dl.contained, dl.nice.contained { margin-bottom: 0; } dl.contained.tabs dd a { padding: 0 14px; } dl.nice.contained.tabs dd a { padding: 7px 18px 9px; } ul.contained.tabs-content { padding: 0; } ul.contained.tabs-content>li { padding: 20px; border: solid 0 #ddd; border-width: 0 1px 1px 1px; } ul.contained.vertical.tabs-content>li { border-width: 1px 1px 1px 1px; } ul.nice.contained.tabs-content>li { border-color: #eee; } /* -------------------------------------------------- Pagination -------------------------------------------------- */ ul.pagination { display: block; height: 24px; margin-left: -5px; float: right; } ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; border: 1px solid #e0eaf3; } ul.pagination li.current a, ul.pagination li:hover a, ul.pagination li a:focus { color: #141414; border: 1px solid #006699; } ul.pagination li.unavailable a { cursor: default; color: #999; } ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { border: 1px solid #e0eaf3; } /* -------------------------------------------------- Lists -------------------------------------------------- */ ul.nice, ol.nice { list-style: none; margin: 0; } ul.nice li, ol.nice li { padding-left: 13px; position: relative } ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0; top: 0; color: #ccc; } div.panel li {list-style-type: square;list-style-position: inside;padding-left: 16px;text-indent: -13px;font-size: 14px;font-size: 1.4em;line-height: 1.7;} /* -------------------------------------------------- Breadcrumbs -------------------------------------------------- */ ul.breadcrumbs { display: block; overflow: hidden; font-family: 'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom: 8px; line-height:normal; } ul.breadcrumbs li { margin: 0; padding: 0; float: left; list-style-type:none; text-indent: 0px; } ul.breadcrumbs li a, ul.breadcrumbs li span { text-transform: uppercase; font-size: 11px; padding-right:4px; } @-moz-document url-prefix() { ul.breadcrumbs li a, ul.breadcrumbs li span {padding-right:5px;}} ul.breadcrumbs li:first-child { padding-left: 0px; padding-right:3px; } ul.breadcrumbs li:after { content: " |"; color: #aaa; margin-right: 8px; line-height:normal; } ul.breadcrumbs li:last-child:after { content: " "; } ul.breadcrumbs li.current a { cursor: default; color: #333; } ul.breadcrumbs li:hover a, ul.breadcrumbs li a:focus { text-decoration: underline; } ul.breadcrumbs li.current:hover a, ul.breadcrumbs li.current a:focus { text-decoration: none; } ul.breadcrumbs li.unavailable {font-size: 11px;color:#666666;padding-top:1px;} @-moz-document url-prefix() { ul.breadcrumbs li.unavailable {padding-top:2px;}} ul.breadcrumbs li.unavailable:hover a, ul.pagination li.unavailable a:focus { text-decoration: none; cursor: default; text-transform: none; } ul.breadcrumbs li.unavailable:after { content: " "; margin-right:4px; padding:0px; line-height:normal;} /* -------------------------------------------------- Show Hide Caption -------------------------------------------------- */ .more { display: none; } a.showLink, a.hideLink { text-decoration: none; padding-left: 0px; font-weight: normal; white-space:nowrap; float:right; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; } a.showLink { font-size:.85em; line-height:.5em; } #topImageCaption.more p {font-size:.9em;} #topImageCaption.more p a.hideLink{font-size:.95em; margin-top:3px;} /* -------------------------------------------------- Breadcrumbs -------------------------------------------------- */ div.panel p.byline {margin-bottom:6px; font-size:12px; font-size:1.1rem;} /* -------------------------------------------------- Panels and assets -------------------------------------------------- */ div.panel p {margin: 0 0 12px;} .panel p { font-size: 1.4em; } .panel h4 { font-size: 16px; font-size: 2.9rem; margin: 1.25em 0 .25em 0; letter-spacing: -1px; } .row .four p { font-size: 1.1em; } div.panel h1 {margin-bottom: 0px;font-size:3.1em;letter-spacing: -1px;} div.panel h2, div.panel h3 {font-size:1.9em;letter-spacing: -1px;} .all {text-transform:uppercase; text-align:right; border-bottom: 1px #666666 solid; padding-bottom:15px; margin-top:10px; margin-bottom: 25px; letter-spacing: .05em; font-weight:bold; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif} div.asset { padding: 12px; background: #c7d9e6; box-shadow: 0 2px 8px rgba(0,0,0,0.45); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45); -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55); margin: 0; margin-bottom: 24px; font-family: 'fontin_sans_rgregular', "Trebuchet MS", Arial, Helvetica, sans-serif; overflow: hidden; } div.asset.darker {background: #173656; /* Old browsers */ background: -moz-linear-gradient(top, #173656 0%, #036291 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(100%,#036291)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#036291 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#036291 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#036291 100%); /* IE10+ */ background: linear-gradient(to bottom, #173656 0%,#036291 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#036291',GradientType=0 ); /* IE6-9 */ padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.45);-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45);-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55);margin: 0; margin-bottom:24px;font-family: 'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; } div.asset p, div.asset ul, div.asset li {margin-bottom:0.5em;} .fulltopic.special div.asset p {line-height:1.4em;} div.asset li {padding-left: 16px;text-indent: -13px;} div.asset li a {margin:0px;margin-bottom:0em; font-size: 13px;font-size:1.4rem;} div.asset li:before{content: "\00BB"; padding-right: 5px;} div.asset h2 {font-size:14px; font-size: 1.5rem; margin:0px;} div.asset h3 { color: #631e2c; font-family: 'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:18px; font-size: 1.8rem;font-weight:normal; text-transform:uppercase; margin-top:0px; } div.asset h4 { margin:0px; font-size: 13px; font-size: 1.5rem;} div.asset h5 {color: #666;font-family:Arial, Helvetica, sans-serif;font-size:11px;font-size: 1rem;text-transform: uppercase;} div.asset h5 a {color: #666;} div.four.columns .asset img {min-width:274px; height:auto; margin-top:1em;} div.four.columns .asset h5 img {margin:0px;margin-right:3px; width: 12px; min-width:0; max-width:12px; } div.asset.darker h2 {color: #fff} div.asset.darker p {color: #fff} div.panel h1.toc {margin-bottom: 20px; color: #631e2c} h2.toc { margin-top: 28px; color: #631e2c; font-family: 'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; text-transform: uppercase; border-top-width: 1px; border-top-style: solid; border-top-color: #666; padding-top: 10px; margin-bottom: 10px; } .asset h3.toc {font-size: 16px; font-size: 1.4rem; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:0px; height:2.8em;} .clear {float:right;margin-left:5px;} div.sidebar { padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.45); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45); -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55); background-color: #f1f7fd; margin-top: 30px; font-family: 'fontin_sans_rgregular', "Trebuchet MS", Arial, Helvetica, sans-serif; overflow: hidden; display:inline-block; } div.sidebar h1 {font-size: 30px; font-size: 2.3rem;margin-bottom:3px;} div.sidebar h2 {font-size: 16px; font-size: 1.5rem;margin-bottom:6px;} div.sidebar p {line-height:1.5em;} .imagePanel { } .imagePanel img {margin-right: 18px;margin-bottom: 12px;float:left; } .imagePanel img.top {margin-right:0px;margin-bottom: 0px;float:none; } .imagePanel p {font-size:1.2rem;} .subarticles .row {margin-top:15px; padding-top:15px; border-top: #069 1px dotted;} .printedissue .asset h3.toc{height:1.2em;} h3.toc2 { font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; margin:0px; } h3.toc2 img {margin-right:5px; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif;} .margin {margin-bottom: 18px;} div.panel .margin p {line-height:1.5; font-family:Arial, Helvetica, sans-serif; font-size:.9em;margin-bottom:0px;} div.asset .margin p {line-height:1.3; font-size:.85em; text-align:center; margin:0px} div.asset.refine #form1{margin-bottom:20px;} .archives .row .four { width: 32%; } .archives .row .eight { width: 66%; } .archives .columns { margin-left: 2%;} .archives .row .four.columns { margin-left:0px; } .archives p.clearfix {margin-bottom:25px;} .archives .row {margin-top:30px;} .archives h3 { font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif;color: #631e2c; font-size:16px; font-size: 1.6rem; margin:0px; } .archives h5, .list h5 {color: #666;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-size: 1.1rem;text-transform: uppercase; margin-top:0px;} div.asset.refine h2, div.asset.refine h3 { font-family:Georgia, "Times New Roman", Times, serif; color: #031c33; font-weight:bold;} div.asset.refine h2 { font-size:18px; font-size: 1.8rem; } div.asset.refine h3 { font-size:14px; font-size: 1.4rem; margin-top: 12px; margin-bottom:0px;} div.asset.refine form p {float: left; width: 50px; margin: 0px;} div.asset.refine form {margin: 0px;} div.asset.refine .submitbutton { color: #fff; border: 1px solid #001630; font-size: 11px; width: 40px; background: #152e5d; background: -webkit-gradient(linear, left top, left bottom, from(#4684a9), to(#152e5d)); background: -moz-linear-gradient(top, #4684a9, #152e5d); padding: 4px; margin-right:0px; margin-top: 0px; margin-bottom: 0px; -moz-border-radius: 3px; border-radius: 3px; } div.asset.refine ul { margin-top:5px;} .row .topic {border-top: 1px #666666 solid; padding-top:15px; margin-top:10px;} .row .topic h2 {font-size: 20px; font-size: 1.8rem; margin-bottom:0px} .row .topic h3 {color: #031c33; margin:0px; font-size:1.1em;} .row .topic h5 {color: #666;font-family:Arial, Helvetica, sans-serif;font-size:11px;font-size: 1rem;text-transform: uppercase;} .row .topic p, .list p {font-family:Arial, Helvetica, sans-serif; font-size:12px; font-size: 1.3rem; line-height:1.5em; margin:0px;} .list .row {margin-bottom:25px;} .list h3 { margin:0px; font-size:1.1em;} .list .row img {margin-right:10px; float: left;} .row .asset.topic {border-top:none; padding:8px;} .row .asset.topic img {margin:0px;} .row .asset.topic a:hover img {filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8;} .row .asset.topic a p {margin-top:-7px; margin-bottom:20px; padding:3px; background-color:#031c33; color: #8dc7f0; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:.9em; height:20px; line-height:20px; text-align:center;} .row .asset.topic a:hover p {color:#cdd74c;} .maintopic h2 {color:#333; font-size:1.4em; border-top:0 none; padding-top: 0px;margin:0px;} .row.maintopic {margin-top:24px;} .row.maintopic h1 {margin-bottom:0px;} .row.maintopic h5 { font-family: 'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; border-top-width: 1px; border-top-style: dotted; border-top-color: #006699; padding-top: 5px; } .row.maintopic p {font-size:.95em; line-height:1.5em;} .video h3 {margin-top:0px;} .video .three.columns {overflow:hidden;} .video .three.columns img {min-height: 135px; max-height:135px;} .fulltopic div.asset:hover, .printedissue div.asset:hover, .video div.asset:hover { background: #E0EAF3; box-shadow: 0 3px 10px rgba(0,0,0,0.65); -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.65); -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.85); } .fulltopic div.asset.darker:hover { background: #173656; } .fulltopic h2, .video h2 {text-transform:uppercase; margin:12px 0 ;} .fulltopic div.asset h3, .printedissue div.asset h3 { color: #069;} .fulltopic .four.columns div.asset {height:270px;} .fulltopic div.asset h3.toc {height: auto !important; margin:0;} .fulltopic a div.asset p {color:#000; font-size:.95em; line-height:1.4em;} div.asset.darker h3 {color: #fff} div.current { padding: 12px; background: #c7d9e6; box-shadow: 0 2px 8px rgba(0,0,0,0.45); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45); -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55); margin: 0; margin-bottom: 24px; overflow: hidden; } div.current li {padding-left: 16px;text-indent: -13px;} div.current li a {margin:0px;margin-bottom:0em; font-size: 12px;font-size:1.2rem;} div.current li:before{content: "\00BB"; padding-right: 5px;} .subscribe { background: #173656; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MzY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNzY2OGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #173656 0%, #27668f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(100%,#27668f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#27668f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#27668f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#27668f 100%); /* IE10+ */ background: linear-gradient(to bottom, #173656 0%,#27668f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#27668f',GradientType=0 ); /* IE6-8 */ color:#fff; padding:15px; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; overflow: hidden; } .subscribe a {color: #69c8f2;} .subscribe a:hover {color: #fff;} .subscribe p {margin-bottom:7px;line-height:1.6em;} .subscribe .signup {text-transform:uppercase; letter-spacing:.1em;margin:0px;} .subscribe h3 {color:#fff; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:1.4em;margin-top:0;} .subscribe img.cover {box-shadow: 0 2px 8px rgba(0,0,0,0.45);-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45);-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55); background-color:transparent !important; border: 1px #69c8f2 solid;} .subscribe img.pdf {padding-right: 10px; float:left;} .subscribe input {background-color:#e0eaf3; color: #999; width:95%; margin-top:10px;} .subscribe .submitbutton { color: #fff; border: 1px solid #001630; font-size: 11px; width: 63px; background: #152e5d; background: -webkit-gradient(linear, left top, left bottom, from(#4684a9), to(#152e5d)); background: -moz-linear-gradient(top, #4684a9, #152e5d); padding: 8px; float: right; margin-right:3px; margin-top: 8px; margin-bottom: 8px; } .subscribe .button.nice { background: #173656; /* Old browsers */ background: -moz-linear-gradient(top, #173656 0%, #006699 50%, #006699 51%, #8dc7f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#173656), color-stop(50%,#006699), color-stop(51%,#006699), color-stop(100%,#8dc7f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* IE10+ */ background: linear-gradient(to bottom, #173656 0%,#006699 50%,#006699 51%,#8dc7f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173656', endColorstr='#8dc7f0',GradientType=0 ); /* IE6-9 */ -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.28); text-transform:uppercase; letter-spacing: .05em; -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .subscribe .button.nice:hover {background: #a2a939; /* Old browsers */ background: -moz-linear-gradient(top, #a2a939 0%, #9fa800 50%, #a2a939 51%, #cdd74c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a2a939), color-stop(50%,#9fa800), color-stop(51%,#a2a939), color-stop(100%,#cdd74c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* IE10+ */ background: linear-gradient(to bottom, #a2a939 0%,#9fa800 50%,#a2a939 51%,#cdd74c 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2a939', endColorstr='#cdd74c',GradientType=0 ); /* IE6-9 */ } .subscribe a.button.nice {color:#FFF; float:none; margin-top:0px;} /*************************************************** Carousel on Homepage ***************************************************/ .jcarousel-skin-tango .jcarousel-container { background: #c7d9e6; box-shadow: 0 2px 8px rgba(0,0,0,0.45); -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45); -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.55); margin-bottom: 35px; } .jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } .multi {font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif;} .multi h2 { margin-top: 0px; text-transform:uppercase; letter-spacing:.05em;} .multi h2 .all { margin-left:15px; font-size:.8em; letter-spacing:.05em; } .multi .seven.columns form { float:right;} .multi .seven.columns p {float: right; text-transform:uppercase;margin-top:5px;} .multi .asset.darker {margin-top:24px;} .jcarousel-skin-tango .jcarousel-container-horizontal { padding: 20px 40px; } .jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } .jcarousel-skin-tango .jcarousel-clip-horizontal { height: 165px; } .jcarousel-skin-tango .jcarousel-item { width: 200px; } .jcarousel-skin-tango .jcarousel-item h3 {margin:0px;padding:0px;color:#069; font-size:1em;} .jcarousel-skin-tango .jcarousel-item img { width: 200px; height: 143px; margin:0px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0; margin-right: 20px; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 65px; right: 5px; width: 47px; height: 47px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; background-image: url(prev-horizontal.png); } .jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { background-position: -48px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -48px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -48px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 65px; left: 5px; width: 47px; height: 47px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(next-horizontal.png); } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { background-position: -48px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -48px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -48px 0; } /* -------------------------------------------------- Popup galleries -------------------------------------------------- */ /*Override WHOI's fancybox */ .fancybox-overlay { background: url('overlay.png'); } .fancybox-skin { position: relative; background: #333; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } /* -------------------------------------------------- Caption over top images -------------------------------------------------- */ div.href="http://www.whoi.edu/page.do{position:relative;} div.description{position:absolute;bottom:6px;left:0px;display:none;background-color:black;font-family:Arial, Helvetica, sans-serif;color:white;font-size:12px;line-height:1.4em;font-size: 1.3rem; } div.description-content{padding:6px;} div.href="http://www.whoi.edu/page.do span.caption-icon{ visibility:visible; position:absolute; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; bottom: 0px; right: 0px; } div.description-content a:link,div.description-content a, div.description-content p a { color: #8dc7f0; text-decoration: none; } div.description-content a:visited { color: #603; text-decoration: none; } div.description-content a:hover, a:active, a:focus { text-decoration: none; color: #631e2c; } /* -------------------------------------------------- Tools -------------------------------------------------- */ .tools { font-size:11px; font-size:1.1rem; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666666; margin-bottom: 0px; margin-bottom: 7px; padding-bottom: 7px; margin-top:0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #666; } .tools .img { padding-left: 3px; vertical-align: bottom; margin-top:0px; } .transcript {margin-top:2.5em} /*.transcript p a{color: #77acdc;} .transcript .asset li a{color: #77acdc;}*/ /* -------------------------------------------------- Fancybox override -------------------------------------------------- */ .fancybox-skin { color: #fff; } /* -------------------------------------------------- Slideshow override for Gallery page -------------------------------------------------- */ #wrapper { margin: 0 0 15px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6897AF; padding-bottom: 15px; } #wrapper h2 { text-transform:uppercase; margin: 8px 0; } .contentSlider { width: 100%; } .contentSlider .rsSlide { background: transparent !important; } .contentSlider .rsOverflow { background: transparent !important; } .contentSlider p { font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; margin:0 0 10px 0px; padding:0px; } .contentSlider img { max-width: 100%; height: auto; display: block; float:left; margin:0 20px 20px 0px; } .content-slider-bg { width: 86%; padding: 24px 7%; background: #eee; } .rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs {background-color: transparent !important;} /* -------------------------------------------------- Video Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ -------------------------------------------------- */ .flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; } .flex-video.widescreen { padding-bottom: 56.25%; } .flex-video.vimeo { padding-top: 0; } .flex-video iframe, .flex-video object, .flex-video embed, .flex-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------------------------------------------------- Microformats -------------------------------------------------- */ /* hCard */ ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px; } ul.vcard li { margin: 0; display: block; } ul.vcard li.fn { font-weight: bold; font-size: 15px; font-size: 1.5rem; } p.vevent span.summary { font-weight: bold; } p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; } /* -------------------------------------------------- Tooltips -------------------------------------------------- */ .has-tip { border-bottom: dotted 1px #ccc; cursor: help; font-weight: bold; color: #333; } .has-tip:hover { border-bottom: dotted 1px #0593dc; color: #0192dd; } .tooltip { display: none; background: rgb(0,0,0); background: rgba(0,0,0,0.8); position: absolute; color: #fff; font-weight: bold; font-size: 12px; font-size: 1.2rem; padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal; } .tooltip > .nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.8) transparent; position: absolute; top: -10px; left: 10px; } .tooltip.tip-override > .nub { border-color: transparent transparent rgb(0,0,0) transparent !important; border-color: transparent transparent rgba(0,0,0,0.8) transparent !important; top: -10px !important; } .tooltip.tip-top > .nub { border-color: rgb(0,0,0) transparent transparent transparent; border-color: rgba(0,0,0,0.8) transparent transparent transparent; top: auto; bottom: -10px; } .tooltip.tip-left, .tooltip.tip-right, .has-tip.tip-left, .has-tip.tip-right { float: none !important; } .tooltip.tip-left > .nub { border-color: transparent transparent transparent rgb(0,0,0); border-color: transparent transparent transparent rgba(0,0,0,0.8); right: -10px; left: auto; } .tooltip.tip-right > .nub { border-color: transparent rgb(0,0,0) transparent transparent; border-color: transparent rgba(0,0,0,0.8) transparent transparent; right: auto; left: -10px; } .tooltip.noradius { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .has-tip.opened { color: #0192DD !important; border-bottom: dotted 1px #0593DC !important; } .tap-to-close { display: block; font-size: 10px; font-size: 1.0rem; color: #888; font-weight: normal; } /* Artfully masterminded by ZURB Make sure to include app.js / foundation.js if you are going to use inline label inputs */ /* ----------------------------------------- Standard Forms ----------------------------------------- */ form { margin: 0 0 18px; } form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; } input.input-text, textarea, select { display: block; margin-bottom: 9px; } label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: 0px; } textarea { max-width: 100%; } /* Text input and textarea font and padding */ input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; background: #fff; } input.input-text:focus, textarea:focus { outline: none !important; } input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; } input.input-text:focus, textarea:focus { background: #f9f9f9; } /* Text input and textarea, disabled */ input.input-text[disabled], textarea[disabled] { background-color: #ddd; } /* Inlined Label Style */ input.placeholder, textarea.placeholder { color: #888; } /* Text input and textarea sizes */ input.input-text, textarea { width: 254px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } input.small, textarea.small { width: 134px; } input.medium, textarea.medium { width: 254px; } input.large, textarea.large { width: 434px; } input.expand, textarea.expand { width: 100%; } /* Lock textareas so they can't be resized beyond their set width in webkit */ textarea.locked { max-width: 254px; } textarea.locked.small { max-width: 134px; } textarea.locked.large { max-width: 434px; } textarea.locked.expand { max-width: 100%; } /* Fieldsets */ form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } /* Inlined Radio & Checkbox */ .form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } /* Errors */ .form-field.error input, input.input-text.red { border-color: #C00000; background-color: rgba(255,0,0,0.15); } .form-field.error label, label.red { color: #C00000; } .form-field.error small, small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: #C00000; width: 254px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .small + small.error { width: 134px; } .medium + small.error { width: 254px; } .large + small.error { width: 434px; } .expand + small.error { width: 100%; } .small.oversize + small.error { width: 144px; } .medium.oversize + small.error { width: 264px; } .large.oversize + small.error { width: 444px; } .expand.oversize + small.error { width: 100%; } /* ----------------------------------------- Nicer Forms ----------------------------------------- */ form.nice div.form-field input, form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } form.nice div.form-field input, form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; } form.nice div.form-field input:focus, form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; } /* Text input and textarea, disabled */ form.nice div.form-field input[disabled], form.nice input.input-text[disabled], form.nice textarea[disabled] { background-color: #ddd; } form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } form.nice div.form-field input[type=radio], form.nice div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 4px; border: solid 0 #C00000; border-width: 0 1px 1px 1px; margin-top: -10px; background: #C00000; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; } form.nice div.form-field.error .small + small, form.nice .small + small.error { width: 132px; } form.nice div.form-field.error .medium + small, form.nice .medium + small.error { width: 252px; } form.nice div.form-field.error .large + small, form.nice .large + small.error { width: 432px; } form.nice div.form-field.error .small.oversize + small, form.nice .small.oversize + small.error { width: 136px; } form.nice div.form-field.error .medium.oversize + small, form.nice .medium.oversize + small.error { width: 256px; } form.nice div.form-field.error .large.oversize + small, form.nice .large.oversize + small.error { width: 436px; } /* Custom Forms ---------------------- */ .twelve.pad.columns h1 {float:left;} form.custom { /* Custom input, disabled */ float: left; margin-left: 15px; } form.custom span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px #ccc; background: #fff; } form.custom span.custom.radio { -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; } form.custom span.custom.checkbox:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; left: 0; font-size: 14px; color: #fff; } form.custom span.custom.radio.checked:before { content: ""; display: block; width: 8px; height: 8px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; background: #222; position: relative; top: 3px; left: 3px; } form.custom span.custom.checkbox.checked:before { content: "\00d7"; color: #222; } form.custom div.custom.dropdown { display: block; position: relative; width: 100%; height: 28px; margin-bottom: 9px; margin-top: 2px; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif } form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 28px; min-height: 28px; padding: 0 38px 0 6px; border: 1px solid #999; color: #031C33; background-color: #C7D9E6; white-space: nowrap; background: #c7d9e6; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3ZDllNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #c7d9e6 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7d9e6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c7d9e6 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c7d9e6 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c7d9e6 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #c7d9e6 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7d9e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ margin: 0px; } form.custom div.custom.dropdown a.selector { position: absolute; width: 27px; height: 28px; display: block; right: 0; top: 0; border: solid 1px #999; } form.custom div.custom.dropdown a.selector:after { content: ""; display: block; content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: #333 transparent transparent transparent; position: absolute; left: 50%; top: 50%; margin-top: -2px; margin-left: -5px; } form.custom div.custom.dropdown:hover a.selector:after, form.custom div.custom.dropdown.open a.selector:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: #000 transparent transparent transparent; } form.custom div.custom.dropdown.open ul { display: block; z-index: 10; } form.custom div.custom.dropdown.small { width: 134px !important; } form.custom div.custom.dropdown.medium { width: 254px !important; } form.custom div.custom.dropdown.large { width: 434px !important; } form.custom div.custom.dropdown.expand { width: 100% !important; } form.custom div.custom.dropdown.open.small ul { width: 134px !important; } form.custom div.custom.dropdown.open.medium ul { width: 254px !important; } form.custom div.custom.dropdown.open.large ul { width: 434px !important; } form.custom div.custom.dropdown.open.expand ul { width: 100% !important; } form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0; top: 27px; margin: 0; padding: 0; background: #fff; background: rgba(255, 255, 255, 0.95); border: solid 1px #999; } form.custom div.custom.dropdown ul li { color: #333; font-size: 13px; cursor: pointer; padding: 3px 38px 3px 6px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; } form.custom div.custom.dropdown ul li.subtopic { padding-left:10px; color:#F00;} form.custom div.custom.dropdown ul li.selected { background: #C7D9E6; color: #000; } form.custom div.custom.dropdown ul li.selected:after { content: "\2013"; position: absolute; right: 10px; } form.custom div.custom.dropdown ul li:hover { background-color: #C7D9E6; color: #222; } form.custom div.custom.dropdown ul li:hover:after { content: "\2013"; position: absolute; right: 10px; color: #222; } form.custom div.custom.dropdown ul li.selected:hover { background: #C7D9E6; cursor: default; color: #000; } form.custom div.custom.dropdown ul li.selected:hover:after { color: #000; } form.custom div.custom.dropdown ul.show { display: block; } form.custom .custom.disabled { background-color: #ddd; } /* Correct FF custom dropdown height */ @-moz-document url-prefix() { form.custom div.custom.dropdown a.selector { height: 28px; } } .lt-ie9 form.custom div.custom.dropdown a.selector { height: 30px; } /* ----------------------------------------- Footer Area ----------------------------------------- */ .bgFooter {background: #22476e; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNDc2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIyNDc2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzE4MmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #22476e 0%, #22476e 65%, #03182b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22476e), color-stop(49%,#22476e), color-stop(100%,#03182b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* IE10+ */ background: linear-gradient(top, #22476e 0%,#22476e 65%,#03182b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22476e', endColorstr='#03182b',GradientType=0 ); /* IE6-8 */; color: #c7d9e6; font-family:Arial, Helvetica, sans-serif;font-size:11px; font-size:1.3rem; margin-top:25px; padding-bottom: 12px; *background: #22476e; /*stupid IE7*/ } .bgFooter img {float:left; margin-right:10px;} .bgFooter a {color:#FFF; border-bottom: dotted 1px #c7d9e6;} .bgFooter .row .twelve {padding-top:12px; } .bgFooter h4 {text-transform:uppercase; color: #e0eaf3; font-size: 14px; font-size:1.4rem; font-weight:normal; font-family:'fontin_sans_rgregular',"Trebuchet MS", Arial, Helvetica, sans-serif} .bgFooter li { padding-left: 15px; text-indent: -11px; margin:0px;} .bgFooter li a { margin:0px; color: #c7d9e6; border: none; } .bgFooter li:before{ content: "\00BB"; padding-right: 5px; } /* CSS for jQuery Orbit Plugin 1.4.0 * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* CONTAINER ================================================== */ div.orbit-href="http://www.whoi.edu/page.do { width: 1px; height: 1px; position: relative; } div.orbit { width: 1px; height: 1px; position: relative; overflow: hidden } div.orbit.with-bullets { margin-bottom: 40px; } div.orbit .orbit-slide { max-width: 100%; position: absolute; top: 0; left: 0; } div.orbit a.orbit-slide { border: none; line-height: 0; display: none; } div.orbit div.orbit-slide { width: 100%; height: 100%; } /* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-href="http://www.whoi.edu/page.do */ /* TIMER ================================================== */ div.orbit-href="http://www.whoi.edu/page.do div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 31; } div.orbit-href="http://www.whoi.edu/page.do span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(../images/orbit/rotator-black.png) no-repeat; z-index: 3; } div.orbit-href="http://www.whoi.edu/page.do span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } div.orbit-href="http://www.whoi.edu/page.do span.rotator.move { left: 0 } div.orbit-href="http://www.whoi.edu/page.do span.mask.move { width: 40px; left: 0; background: url(../images/orbit/timer-black.png) repeat 0 0; } div.orbit-href="http://www.whoi.edu/page.do span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(../images/orbit/pause-black.png) no-repeat; z-index: 4; opacity: 0; } div.orbit-href="http://www.whoi.edu/page.do span.pause.active { background: url(../images/orbit/pause-black.png) no-repeat 0 -40px } div.orbit-href="http://www.whoi.edu/page.do div.timer:hover span.pause, div.orbit-href="http://www.whoi.edu/page.do span.pause.active { opacity: 1 } /* CAPTIONS ================================================== */ .orbit-caption { display: none; font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; } .orbit-href="http://www.whoi.edu/page.do .orbit-caption { background: #000; background: rgba(0,0,0,.6); z-index: 30; color: #fff; text-align: center; padding: 7px 0; font-size: 13px; position: absolute; right: 0; bottom: 0; width: 100%; } /* DIRECTIONAL NAV ================================================== */ div.orbit-href="http://www.whoi.edu/page.do div.slider-nav { display: block } div.orbit-href="http://www.whoi.edu/page.do div.slider-nav span { width: 78px; height: 100px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -50px; cursor: pointer; } div.orbit-href="http://www.whoi.edu/page.do div.slider-nav span.right { background: url(../images/orbit/right-arrow.png); right: 0; } div.orbit-href="http://www.whoi.edu/page.do div.slider-nav span.left { background: url(../images/orbit/left-arrow.png); left: 0; } /* BULLET NAV ================================================== */ ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; left: 50%; margin-left: -50px; padding: 0; } ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(../images/orbit/bullets.jpg) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; } ul.orbit-bullets li.active { color: #222; background-position: -8px 0; } ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } ul.orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } /* FLUID LAYOUT ================================================== */ div.orbit img.fluid-placeholder { visibility: hidden; position: static; display: block; width: 100%; } div.orbit, div.orbit-href="http://www.whoi.edu/page.do { width: 100% !important; } ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -50px; left: 50%; margin-left: -50px; padding: 0; } ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(../images/orbit/bullets.jpg) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; } ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } ul.orbit-bullets li.active { color: #222; background-position: -8px 0; } ul.orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } /* Correct timer in IE */ .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } /* CSS for jQuery Reveal Plugin * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* -------------------------------------------------- Reveal Modals -------------------------------------------------- */ .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; z-index: 40; display: none; top: 0; left: 0; } .reveal-modal { visibility: hidden; top: 100px; left: 50%; margin-left: -300px; width: 520px; background: #eee url(../images/misc/modal-gloss.png) no-repeat -200px -80px; position: absolute; z-index: 41; padding: 30px 40px 34px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); box-shadow: 0 0 10px rgba(0,0,0,.4); } .reveal-modal.small { width: 200px; margin-left: -140px;} .reveal-modal.medium { width: 400px; margin-left: -240px;} .reveal-modal.large { width: 600px; margin-left: -340px;} .reveal-modal.xlarge { width: 800px; margin-left: -440px;} .reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; } .reveal-modal .row { min-width: 0; } /* Mobile */ @media handheld, only screen and (max-width: 1023px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 60%; top: 60px; left: 15%; margin-left: 0; padding: 20px; height: auto; } } @media handheld, only screen and (max-width: 767px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80%; top: 15px; left: 5%; margin-left: 0; padding: 20px; height: auto; } } /* Social Media in the header */ .connect {text-align:right;display:block;padding-top:0px;} .connect a { text-decoration:none;} .oceanus-social-media { float:right; width:250px; height:40px; padding:0; margin:0; } ul.cv-social-media2 { padding:0; margin-top:0; display: inline-block; zoom: 1; *display: inline; } .cv-social-media2 { margin:0; overflow:hidden; list-style:none; text-align:center; display:table; } .cv-social-media2 li { width:40px; height:33px; width:34px; height:27px; width:26px; height:24px; display:inline-block; font-size:15px; background:#fff; background:#326091; padding:0px 0px 0px 0px; margin:9px 0px 0px 0px; content: none; } .cv-social-media2 li.connect { font-family:'fontin_sans_rgregular','Trebuchet MS', Arial, Helvetica, sans-serif; font-size:.9em; color:#326091; width:120px; margin:0; padding:0; background:transparent; margin-top:-5px; } .cv-social-media2 a { margin:0px 0px 0px 0px; color:#FFF; color:#326091; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; text-decoration:none; border-bottom: none; } .cv-social-media2 li:before { content: none; padding-right: 0px; } .cv-social-media2 a:hover { opacity: 0.5; } #facebook {background:#031d34;background-image:url(https://www.whoi.edu/cms/css/oceanus_redesign/fb-oceanus.png); background-size: 22px; background-repeat:no-repeat;background-position:center; -webkit-border-radius: 0px; border-radius: 0px;} #twitter {background:#031d34;background-image:url(https://www.whoi.edu/cms/css/oceanus_redesign/tw-oceanus.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 0px; border-radius: 0px;} #pinterest {background:#910101;background-image:url(https://www.whoi.edu/cms/css/whoi_redesign/pinterest.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 10px; border-radius: 10px;} #youtube {background:#031d34;background-image:url(https://www.whoi.edu/cms/css/oceanus_redesign/youtube-oceanus.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 0px; border-radius: 0px;} #instagram {background:#031d34; background-image:url(https://www.whoi.edu/cms/css/oceanus_redesign/instagram-oceanus.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 0px; border-radius: 0px;} #rss {background:#F60;background-image:url(https://www.whoi.edu/cms/css/whoi_redesign/rss.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 10px; border-radius: 10px;} #vimeo {background:#069; background-image:url(https://www.whoi.edu/cms/css/whoi_redesign/vimeo.png); background-size: 22px; background-repeat:no-repeat;background-position:center;-webkit-border-radius: 10px; border-radius: 10px;} /* NOTES Close button entity is × Example markup

Awesome. I have it.

Your couch. I it's mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam.

×
*/ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ @media handheld, only screen and (max-width: 767px) { h1 { font-size: 24px; font-size: 2.7rem; line-height: 1.3; } h2 { font-size: 18px; font-size: 2.0rem; line-height: 1.3; } h3 { font-size: 18px; font-size: 1.8rem; line-height: 1.3; } h4 { font-size: 16px; font-size: 1.6rem; line-height: 1.2; } h5 { font-size: 14px; font-size: 1.5rem; line-height: 1.2; } h6 { font-size: 13px; font-size: 1.4rem; line-height: 1.2; } body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } } /* -------------------------------------------------- :: Grid -------------------------------------------------- */ /* Mobile */ @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .column:last-child, .columns:last-child { margin-right: 0; float: none; } [class*="column"] + [class*="column"]:last-child { float: none; } .column:before, .columns:before, .column:after, .columns:after { content:""; display:table; } .column:after, .columns:after { clear: both; } .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0 !important; } .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; } .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; } /* Mobile 4-column Grid */ .row .phone-one:first-child, .row .phone-two:first-child, .row .phone-three:first-child, .row .phone-four:first-child { margin-left: 0; } .row .phone-one:last-child, .row .phone-two:last-child, .row .phone-three:last-child, .row .phone-four:last-child { float: right; } .row .phone-one, .row .phone-two, .row .phone-three, .row .phone-four { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } .row .phone-one { width: 21.68% !important; } .row .phone-two { width: 47.8% !important; } .row .phone-three { width: 73.9% !important; } .row .phone-four { width: 100% !important; } .row .push-one-phone { left: 26.08%; } .row .push-two-phone { left: 52.2% } .row .push-three-phone { left: 78.3% } .row .pull-one-phone { right: 26.08% } .row .pull-two-phone { right: 52.2% } .row .pull-three-phone { right: 78.3%; } } /* -------------------------------------------------- :: Block Grids -------------------------------------------------- */ @media only screen and (max-width: 767px) { .block-grid.mobile { margin-left: 0; } .block-grid.mobile > li { float: none; width: 100%; margin-left: 0; } } /* -------------------------------------------------- :: Mobile Visibility Affordances ---------------------------------------------------*/ .show-on-phones { display: none !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: block !important; } .hide-on-phones { display: block !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: none !important; } /* Modernizr-enabled tablet targeting */ @media only screen and (max-width: 1280px) and (min-width: 768px) { .touch .hide-on-phones { display: block !important; } .touch .hide-on-tablets { display: none !important; } .touch .hide-on-desktops { display: block !important; } .touch .show-on-phones { display: none !important; } .touch .show-on-tablets { display: block !important; } .touch .show-on-desktops { display: none !important; } } @media only screen and (max-width: 767px) { .hide-on-phones { display: none !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: block !important; } .show-on-phones { display: block !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: none !important; } } /* Specific overrides for elements that require something other than display: block */ table.show-on-desktops { display: table !important; } table.hide-on-phones { display: table !important; } table.hide-on-tablets { display: table !important; } @media only screen and (max-width: 1280px) and (min-width: 768px) { .touch table.hide-on-phones { display: table !important; } .touch table.hide-on-desktops { display: table !important; } .touch table.show-on-tablets { display: table !important; } } @media only screen and (max-width: 767px) { table.hide-on-tablets { display: table !important; } table.hide-on-desktops { display: table !important; } table.show-on-phones { display: table !important; } } /* -------------------------------------------------- :: Forms ---------------------------------------------------*/ @media only screen and (max-width: 767px) { div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea, form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 100%; padding: 6px 2% 4px; font-size: 18px; } form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; } form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; } form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; } form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; } form.nice div.form-field.error .expand + small, form.nice .expand + .error { width: auto; } } /* -------------------------------------------------- :: UI ---------------------------------------------------*/ /* Buttons */ @media only screen and (max-width: 767px) { .button { display: block; } button.button, input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; margin-bottom: 5px; } } /* Tabs */ @media only screen and (max-width: 767px) { dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; } dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; } dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; } .nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; } .nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; } .nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .nice.tabs.mobile dd:first-child a.active { margin: 0; } dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0; } dl.contained.tabs.mobile dd a { padding: 18px 20px; } dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; } dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; } } /* Nav Bar */ /* Modernizr-enabled tablet targeting */ @media only screen and (max-width: 1000px) and (min-width: 768px) { .margin {padding-left:10px;} .touch .nav-bar li a {font-size: 13px;font-size: 1.3rem;} .touch .nav-bar li.has-flyout>a.flyout-toggle { padding: 20px; } .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 0px solid transparent;border-right: 0px solid transparent; border-top: 0px solid transparent; display: none; } .flyout {width:0px; display:none; height: 0px; background-color:transparent !important;} .flyout p {width:0px; display:none; height: 0px;} .flyout H5, .flyout p a {width:0px; display:none; height: 0px;} .flyout .row .columns {width:0px; display:none; height: 0px;} .flyout.small { width: 0px; display:none; height: 0px;} .flyout.medium { width: 0px; display:none; height: 0px; } .flyout.large {width: 0px; display:none; height: 0px;} div.asset.refine form p{float: none !important;} .list .row p {font-size: 12px;margin:0px;} .list .row img {margin-bottom:15px;} .fulltopic {padding-right: 10px; padding-left: 10px;} .left {padding-left:8px;margin-top:5px;} .button {padding: 9px 20px 11px;font-size: 1.2rem;} div.asset.refine .left {margin-right:0px;} .subscribe {overflow:hidden;} .subscribe p {font-size:.9em;} .maintopic {overflow:hidden;} .fulltopic.special div.asset p{font-size:.9em; line-height:1.5em;} .fulltopic .four.columns div.asset{height: 235px;} div.asset h2{font-size: 1.4rem;} .article .columns {margin-right:5px; margin-left:5px;} .asset h3.toc {font-size: 1.2rem;} div.asset h5 {font-size:9px;text-transform: capitalize;} div.four.columns .asset img {min-width: 100%;margin-top:.5em;} .bgFooter .column {margin-left: 3.8%;} .bgFooter [class*="column"] + [class*="column"]:last-child {padding-right:10px;} .bgFooter {margin-top:0px;} } /* Small tablets */ @media only screen and (max-width: 767px) and (min-width: 600px) { .article .columns {margin-right:2px; margin-left:2px;} } @media only screen and (max-width: 952px) { .nav-bar>li>a .main {padding: 0 12px; padding-right: 10px;} .nav-bar>li.has-flyout>a .main { padding-right: 10px; } dl.sub-nav {font-size:1.1rem;} dl.sub-nav dd.active a { padding: 3px 6px; } dl.sub-nav dd.divide a {margin-right:12px; padding-right: 7px; } } @media only screen and (max-width: 768px) { .nav-bar>li>a .main {padding: 0 12px;} .nav-bar>li.has-flyout>a .main { padding-right: 10px; } .nav-bar>li.has-flyout>a.flyout-toggle {padding: 20px 10px 10px;} } @media only screen and (max-width: 767px) { h1 { padding-top: 5px;margin:0px;} .wrapper {padding-top:10px;} .navigation .row {height: 40px;} .nav-bar {height: 36px;} .nav-bar>li {line-height: 40px;} .nav-bar>li>a .main { position: relative; padding: 0 24px; display: block; text-decoration: none; font-size: 15px; font-size: 1.4rem; color: #FFF; text-transform:uppercase; } .nav-bar>li>a:hover .main, .nav-bar>li>a:focus .main { color:#cdd74c; background: #173656; cursor:pointer; } .nav-bar>li>input { margin: 0 14px; } .nav-bar>li ul { margin-bottom: 0; } .nav-bar>li li { line-height: 1.3; } .nav-bar>li.has-flyout>a .main { padding-right: 40px; } .nav-bar li .has-flyout .main a {color: #FFF;} .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #FFF; display: block; } .nav-bar>li.has-flyout>a.flyout-toggle {position: absolute;right: 0;top: 0;padding: 20px;z-index: 2;display: block; } .flyout { background: #173656; margin: 0; padding: 10px 20px; position: absolute; top: 35px; left: -1px; width: 400px; z-index: 40; color: #E0EAF3; } .flyout p {margin-bottom: 8px;} ul.breadcrumbs li a, ul.breadcrumbs li span{padding-left: 3px;} div.sidebar h1 {font-size: 30px; font-size: 2.3rem;margin-bottom:3px;} div.sidebar h2 {font-size: 16px; font-size: 1.5rem;margin-bottom:6px;} div.sidebar p {line-height:1.5em;} div.sidebar img {max-width: 440px; float:none; margin-right:0px;} #slider4 {height: auto !important; padding-bottom:10px;} .archives .row { margin-bottom: 20px; margin-right: 8px; margin-left: 8px; } .archives h2 {padding-left: 8px; } .archives h3 { color: #631e2c; font-size:16px; font-size: 1.4rem; margin:0px;} .archives p { font-size:12px;} .eight.columns.archives {padding-right:8px;} .list { margin-right: 8px; margin-left: 8px; } .list .row {margin:0px;} .list .four.columns {margin-bottom:15px;} .list h3 {font-size:14px;} .article .columns {margin-right:3px; margin-left:3px;} .fulltopic .row {margin-top: 0px; margin-bottom: 0px;} .fulltopic .pad.columns {padding-left:10px; padding-right: 10px;} .pad.columns {padding-left:10px; padding-right: 10px;margin-top:10px;} .fulltopic .row.margin .columns {padding: 10px; margin: 0;margin-bottom:0px; border-top:#666 solid 1px; padding-top:10px; padding-bottom: 10px;} .fulltopic .row.margin .columns p {font-size: .9em;} .fulltopic .asset {padding: 12px;background: none;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;margin: 0;margin-bottom:0px; border-top:#666 solid 1px; padding-top:10px; padding-bottom: 3px;} .fulltopic div.asset:hover { background: #E0EAF3; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;; } .fulltopic .asset img {float:left; width: 25%; margin-right: 10px;} div.four.columns .asset img {min-width: 40%; margin-top: 0em;} .fulltopic .four.columns div.asset{height: auto; overflow:hidden;padding-bottom:8px;} h2.toc {color: #FFF; margin-top: 15px;border:none;padding-left: 10px;margin-bottom: 0px;margin-botton: 5px; background-color:#173656; height: 27px; line-height:27px;} h3.toc2 {font-size:.9em; font-weight: normal;} .left {margin-right: 10px;} .refine {overflow:hidden;} .row.maintopic {margin-top:5px;} .row.maintopic h5 {margin-top: 15px;border-top:0;} form{margin-bottom: 0px;} form.custom{ margin-left: 0px; margin-right:10px;} div.sidebar { padding: 18px; margin-bottom: 20px; margin-right:4px; display:block; } /* -------------------------------------------------- :: SEARCH ---------------------------------------------------*/ .searchform { zoom: 1; border: 0px !important; float: none !important; line-height: 20px; margin: 0px; overflow: auto; margin-top:8px; padding-left:15px; padding-right:10px; } @-moz-document url-prefix() { .searchform {padding:0px;margin-top:2px;} } .searchform .searchfield { width:10rem; height: 25px; margin: 0px; line-height: 25px; } .searchform .searchbutton { margin: 0px; padding: 0px; height: 25px; } /* -------------------------------------------------- Tools -------------------------------------------------- */ .tools {margin-bottom: 5px; float:none;} /* Footer */ .bgFooter {padding-top:0px;} .bgFooter .two, .bgFooter .four, .bgFooter .twelve {padding-left:10px;} .bgFooter .seven {margin-top:10px;} .bgFooter .two {text-align: left; border-top: 1px solid #ddd; margin-top: 8px;margin-bottom: 0px; padding-top: 10px;} .bgFooter .two ul {margin:0px;} } @media only screen and (max-width: 900px) and (min-width: 768px) { .bgFooter {padding-top:0px; margin-top:0px;} .bgFooter .four, .bgFooter .twelve {padding-left:5px;} .bgFooter .two {padding-left:0px;border-top: 0px solid #ddd; margin-top: 0px;margin-bottom: 0px; padding-top: 0px;padding-left:0px;} .bgFooter .twelve {margin-top:10px;padding-left:10px;} .bgFooter .row .four{width: 28%;} } /* Tooltips */ @media only screen and (max-width: 767px) { .tooltip { font-size: 14px; font-size: 1.4rem; line-height: 1.4; padding: 7px 10px 9px 10px; } .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub { border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.85) transparent; top: -12px; left: 10px; } } /* Video */ @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } }