/* 21 Jan 2015 LINE 43 - body#home article header h1 line 40 reduced from 1.6em to 1.4em to allow for larger white text above the 8 homepage boxes 28 Feb 2014 H1 font size reduced to allow for long page titles line 58 from 3em to 2.8em Content font : #444 Header 2 : # Header 3 : # Header 4 : # Content Anchor : # GNS BG : # GNS link : # */ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { } body{background:url(../t4cms/2012r-header-bg.jpg) no-repeat top center ; color:#333333;} body#home{background:url(2012-home-bg.jpg) no-repeat top center #08244c; color:#fff;} body#home header h1 strong{font-weight:bold;} body#home #title header h1{font-weight:normal;margin:40px 0 20px 0;text-align:center;} body#home h2{color:#ccc321;font-weight:normal;font-size:2.5em;text-transform:none;border-bottom:1px solid #0089cf;padding-bottom:10px;} body#home article header h1{text-transform:uppercase;font-size:1.4em;margin:0 0 18px 0;font-weight:bold;} body#home article header h1 a:link {color: #fff;} body#home article header h1 a:visited {color: #fff;} body#home article header h1 a:hover {text-decoration:underline;} body#home article h2{margin:14px 0 0 0;font-size:1.4em;border:none;text-transform:uppercase;font-weight:bold;min-height:70px} body#home article h2 a{color:#06e43a;} body#home article p{color:#fff;font-family: 'Ubuntu', sans-serif;font-size:1.4em;min-height:160px} #title {/*min-height: 54px;*/} #title h1{color:#fff;margin:34px 0 8px 14.5%;text-transform:uppercase;font-size:2.8em;} #breadcrumb{font-size:1.3em;} #gns ul li a{font-size:1.5em;} #tns ul li{font-size:1.1em;} #fns ul li{border-left:1px solid #003366;font-size:0.9em;} #fns ul li:first-child{border:none;} /* HOME */ #main{float:left;width:100%;} #main section{margin-bottom:20px} /* hr{border:1px solid #99ccff;margin-bottom:10px;} old rule*/ hr{ background-color: #99ccff; border: 0 none; color: #99ccff; height: 1px; margin-bottom:10px; } /* FAQS */ #faqs-list{margin:10px 0;} #faqs-list article p:first-child{cursor:pointer} /* IE8 */ .ie8 #gns,.ie7 #gns{margin-top:14px;} /* footer.mf {width:100%;float:left;background:#444;} footer.mf .container_12 {background:#444;color:#fff} footer.mf .container_12 ul li a {color:#fff} form ol, form ol li {margin:0.5em 0;padding:0 0 0.25em 0;float:left;width:100%;list-style:none;clear:both} form ol li label {float:left;width:20%;} form ol li label .extra {float:right;} form ol li input, form ol li select, form ol li textarea {float:left;width:50%;} form ol li textarea {height:100px;} form ol li.submit {text-align:center} form ol li.submit input.submit-button {float:none;width:25%} */ /*--- Sometimes on larger screens I use this. Apply constraints for wide and cinema screens, 1300px (iMac) and up ---*/ @media screen and (max-width: 1300px) { } /*--- Apply constraints for screens larger than tablet portrait, 1024px wide (iPad landscape) and up ---*/ @media screen and (max-width: 1055px) { #title h1{font-size:2.6em;margin-top:42px;} } @media screen and (max-width: 1010px) { body{background:url(../t4cms/2012r-header-bg-sm.jpg) no-repeat 0 0;} body#home{background:url(../t4cms/2012-home-bg-sm.jpg) no-repeat 0 0 #08244c;} #gns{margin-top:6px;} .content .researcher-video-list .col .researcher.grid_6 {width:48%;margin:0 3px 0px 1px;} } @media screen and (max-width: 930px) { #gns ul{width: 84%;} } /*--- Apply constraints for screens like tablet, 768px wide (iPad portrait) and up ---*/ @media screen and (max-width: 835px) { .container_12 .grid_4, .container_12 .grid_8, .container_12 .grid_3, .container_12 .grid_9, .container_12 .grid_6{width:96%;padding:0 1%;} .container_12 .grid_9,.container_12 .grid_6{float: left;} .container_12 .grid_3{float:none;margin-bottom:20px} .container_12 aside.grid_3{margin-top:20px;} p, h3,.list article header h2,#rhs figure figcaption {font-size:1.6em;} .twtr-tweet{font-size:1.2em;} .content #links dd a,.content #links dd span,article.content ul li,article.content ol li, table td, table th{font-size:1.25em;line-height:1.6em;} article.content ul li ul li,article.content ul li ul li,article.content ol li ul li{font-size:1em;} #breadcrumb,.lns ul li a, .lns ul li .currentsection{font-size:1.5em;} #header{min-height:0;} #tns,#gns ul,#header .search-form a,.lns.desktop/*, .rns */{display:none;} #header .search-form {margin-top:32px;} a.contact-btn{display:block;text-transform:uppercase;font-family: 'Ubuntu', sans-serif;font-weight:bold;padding:10px;font-size:1.1em;position:absolute;right:-10px;top:20px;z-index:2; } a.mobMenu {color:#fff;text-transform:uppercase;font-size:1.5em;margin-top:45px;display:block;font-weight:bold;background:url(../t4cms/2012r-down-arrow-nav-btn.gif) no-repeat right center;padding-right:10px;float:right;} a.mobMenu.active{background:url(../t4cms/2012r-down-arrow-nav-btn-active.gif) no-repeat right center;} #gns{margin:5px 0 8px 0;font-size:1em;} #gns nav{position:relative;} #gns nav ul {margin:0;width:60%;position:absolute;z-index:2;right:0px;top:6px;background:url(../t4cms/2012r-gns-bg-mobile.jpg) repeat-x 0 0 #0089CF;padding:0;} #gns nav ul li{width:98%;display:block;border-top:1px solid #0170a9} #gns nav ul li a{padding:10px;} #header header h1{float:left;width:98%;} body#home #main{margin-bottom:0;} body#home #header h1{border:none;} body#home #title header h1{margin-left:0;} body#home h1{font-size:2.3em;border-bottom:1px solid #0089cf;padding-bottom:10px;} body#home h2{font-size:2em;border:none;} body#home .container_12 .grid_3{float:left;width:45%;margin:0 2% 0 0;min-height:500px;} body#home article h2{clear:both;float:left;width:100%;} #banner{border-bottom:1px solid #0089cf;} #banner div ol.flex-control-nav,#banner #mobile-slider{display:block!important;} #banner #mobile-slider h2{clear:both;float:left;margin:10px 0 0 0;text-transform:uppercase;font-weight:bold;width:100%;} #banner #mobile-slider a h2{color:#06E43A;} #banner #mobile-slider p,body#home article p,body#home article h2{float:left;font-size:1.6em;} #banner #desktop-slider,.flex-direction-nav{display:none!important;} .lns.mobile,#rhs{float:left;display:block;border-top:1px solid #99ccff;padding-top:20px;} .container_12 .grid_3 {margin-bottom:0;} #title h1{font-size:2.4em;margin:30px 0 10px 0;} article.content,article.content.grid_6{float:left;border:none;} .addthis_toolbox{padding-bottom:20px;} /*.content .spotlights a{float:left;border-top:1px solid #99ccff;} .content .spotlights a:first-child{border:none;} .content .spotlights figure{display:table;} .content .spotlights a figcaption{text-align:left;display: table-cell; vertical-align: middle;width:75%;} .content .spotlights a h2{float:left;font-size:1.6em;margin:1px 0 0 5%;} .content .spotlights a p{clear:both;float:left;text-align:left;margin-top:10px;}*/ .content .spotlights .desc{margin:0px 0 0 0%} .content .spotlights article{float:left;width:100%;border-top:1px solid #99ccff;padding-top:20px;} .content .search-form label{width:100%;} .content .search-form input{float:left;margin-top:10px!IMPORTANT;} .content #links.three-col dl{width:100%;margin:0;} .content nav.az ul li{margin:0 1px 10px 0;} article.content #tabs {border:none;} article.content #tabs .tab{border:1px solid #99ccff;margin-bottom:10px;padding-bottom:0;} article.content #tabs nav/*, article.content #tabs div*/ {display:none;} article.content #tabs header{display:block;} article.content #tabs header h2{margin:0;} article.content #tabs header h2 a{display:block;color:#06e43a;background:#fff;text-decoration:none;padding:10px;} article.content #tabs header h2 a.active{background:#003366;} .content .filters h2{margin-top:0;} .content .filters ul{float:left;width:45%;} .content .filters ul + ul{margin-left:5%;float:left;} .content #GoogleResultsContainer .search-form fieldset {width:100%;margin:0;} .content #GoogleResultsContainer #tabs nav {display:block;} article.content #GoogleResultsContainer #tabs ul li{width:40%;} #footer .block section nav, #footer .block section div{display:none;} #footer .block section,#footer .block section:first-child{width:100%;padding:0;margin:0;cursor:pointer;} #footer .block section h3{color:#fff;background:url(../t4cms/2012r-footer-header-bg.gif) no-repeat center right #051d3f;padding:12px 10px;} #footer .block section h3.active{background:url(../t4cms/2012r-footer-header-bg-active.gif) no-repeat center right #051d3f;} #footer section nav, #footer section .contact-info{display:none;padding-left:10px;} #footer section nav{margin-bottom:20px;} #footer .social-media h3,#footer section nav.social-media{display:block;margin:0 1%;width:98%;} #footer #fns h3{margin:0;display:block;} #footer #fns,#footer section nav.social-media{margin:0 0 20px 0;} #footer #fns ul {border-top: none;} #footer #fns ul li {display:block;border:none;padding:0;font-size:1em;font-weight:normal;} #footer section nav.social-media {padding:0;} #footer section nav.social-media h3{border:none;} #footer section nav.social-media{margin:20px 0;} .twtr-doc{width:100%!important} #footer nav ul, #footer p {font-size: 1.6em;} .content .research-video{float:left;width:100%;padding:0;} .content .research-video iframe,.content .researcher-video-list .col {float:left;width:100%;padding:0;} .content .research-video .caption {float:left;width:96.5%;padding:0 2%;min-height:0;} .content .research-video .caption p{font-size:1.6em;} .content .researcher-video-list{margin-left:0;} .content .researcher-video-list .col{margin-left:0;width:100%;} .content .researcher-profile figure{max-width:100%;} .content .researcher-profile .profile{background:#051d3f;width:auto;} .content .researcher-video-list .col .researcher{width:98.7%} .content .researcher-video-list .col .researcher img{width:100%} .content .researcher-video-list .col .researcher.grid_6 {width:48.8%;margin:0 3px 1px 0;padding:0;} .content .researcher-video-list .summary, .fade{display:none!important;} #rhs .play span{left:46%;} .content .spotlights figure{margin-bottom:10px;} } /*--- Apply constraints for screens larger than mobile, 600px wide (Xoom and other tablets) and up ---*/ @media screen and (max-width: 658px) { #header .search-form{display:none;} .content .research-video{float:left;width:100%;padding:0;} .content .research-video iframe,.content .researcher-video-list .col {float:left;width:100%;padding:0;} .content .research-video .caption {float:left;width:96.5%;padding:0 2%;min-height:0;} .content .research-video .caption p{font-size:1.6em;} .content .researcher-video-list{margin-left:0;} .content .researcher-video-list .col{margin-left:0;} .content .researcher-profile figure{max-width:100%;} .content .researcher-video-list figure.grid_6 figcaption {float:left;width:100%} a.mobMenu {margin-top:102px;} #title h1{margin-top:25px;font-size:1.8em;} #gns nav ul {right:-20px;} #rhs .play span{left:44%} .content .researcher-profile #profile-image{float:left;} } /*--- Apply constraints for screens larger than mobile, 480px wide (iPhone landscape) and up ---*/ @media only screen and (max-width: 480px) { body, body#home{background-position:0 -16px;} #title h1{font-size:1.5em;margin:32px 0 10px 0;} #footer nav ul, #footer p{font-size:1.6em;} #footer nav ul li{margin-bottom:5px} article.content #links dl{width:100%;} .content figure {margin:20px auto;} .content .researcher-profile figure img{width:100%;} #header header h1{float:left;width:80%;} body#home .container_12 .grid_3{float:left;width:100%;min-height:0px;} body#home article h2{clear:both;float:left;width:100%;} body#home article{float:left;width:100%;border-top:1px solid #0089cf;padding:15px 0 10px 0;margin:0} body#home article:first-child{border:none;} body#home article header h1{border:none;font-size:1.8em;margin-bottom:5px;} body#home article h2, body#home article p{min-height:0;} .content .spotlights a figcaption{width:58%;} .list article p, .list article header h2 {width:69%;} .content figure {float:left;width:100%} a.mobMenu {margin-top:86px;} #rhs .play span{left:42%} .content .spotlights figcaption {width:60%;} #profile-image figure {width:100%!important;} /* HOME */ body#home header + article{border:none;padding-top:0;} } /*--- Apply constraints for screens larger than mobile, 350px wide (iPhone landscape) and up ---*/ @media only screen and (max-width: 350px) { #gns nav ul {right:-14px;} .content .researcher-video-list figure figcaption {float:left;width:100%} .content .research-video .caption {width:96.8%;} .content #GoogleResultsContainer .search-form {background:none;} .content.events table tr > th:nth-child(3),.content.events table tr > td:nth-child(3) {display:none;} #title h1{font-size:1.5em;margin-top:25px;} #breadcrumbs{padding-top:6px;} #rhs .play span{left:38%} .fancybox-outer{padding-top:34px;} }