/* Theme Name: Pacifichem 2015 Author: Cstraight Media Author URI: http://www.cstraight.com Version: 0.1 Description: Responsive web design for The International Chemical Congress of Pacific Basin Societies conference in Hawaii * COLORS * * Dark Blue 1a556a * Medium Blue 2382a4 * Light Blue 2796bd * * Lime c3dd75 * * Dark Green 5e6d32 * Brown 928b7d * * * GRADIENTS * * blue-inset-small Base: 2281a2 * Border: 2589ad * blue-inset-large Base: 2281a2 * Border: 2589ad * dark-blue-x-small Base: 1a5468 * Border: ? * * green-small Base: a8c15f * Border: a5be5b * * tan-inset-small Base: ccc7b9 * Border: cfcac1 * * white-small Base: edece9 * Border: dbdbda * * bg-inset-tan Base: efede8 * Border: bdb6a7 */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300'); /* ---------------------------------------------------------------------- */ /* RESET /* ---------------------------------------------------------------------- */ html, body, ul, ol, li, dl, dt, dd, img, h1, h2, h3, h4, h5, h6, input, textarea { margin: 0; padding: 0; } a img, fieldset, button, hr { border: 0; } :focus { outline: 0; } input, textarea, button { font-family: inherit; font-size: inherit; } textarea { overflow: auto; } body { -webkit-text-size-adjust: none; } /* Clearfix */ #nav, #callouts { zoom: 1; } #nav:after, #callouts:after { display: block; clear: both; content: "."; visibility: hidden; height: 0; } /* Clearing */ .clear { clear: both; } /* Cancel List Style */ #nav, #footer-nav , .social-icons, .secondary-nav, .post-list, .logo-list, .search-results, .secondary-nav ul, .sliderPager { list-style: none; margin: 0; padding: 0; } /* ---------------------------------------------------------------------- */ /* GENERAL /* ---------------------------------------------------------------------- */ /* Structure */ html { background: #e4e2de url(images/bg-tan-fabric.jpg) repeat top center; } body { width: 100%; background: #e4e2de url(images/bg-tan-fabric.jpg) repeat top center; } #header, #content-wrap, #nav { width: 90%; padding: 0 20px; margin: 0 auto; max-width: 1200px; } /* ---------------------------------------------------------------------- */ /* TYPOGRAPHY & IMAGES /* ---------------------------------------------------------------------- */ body { font-size: 13px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 400; color: #7a7364; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1 { font-size: 30px; margin: 30px 0 15px; color: #1a556a; } h2 { font-size: 24px; margin: 24px 0 12px; color: #2796bd; } h3 { font-size: 20px; margin: 20px 0 10px; color: #97b23d; font-style: italic; } h4 { font-size: 16px; margin: 16px 0 8px; color: #928b7d; } h5 { font-size: 14px; margin: 14px 0 7px; color: #000; } h6 { font-size: 12px; margin: 12px 0 6px; color: #c3dd75; } /* Copy */ p { line-height: 165%; margin: 14px 0; } code { font-family: Monaco, 'Courier New', Courier, monospace; } blockquote { font-style: italic; color: #888; margin: 0 0 0 30px; } hr { clear: both; padding: 30px 0 0; margin: 0 0 30px; border-bottom: 1px dotted #CCC; } /* Lists */ ul, ol { padding: 14px 0 14px 30px; } ul { list-style: disc; } ol { list-style: decimal; } li { line-height: 140%; } /* Links */ a, a:visited { color: #1a556a; } a:hover { color: #2382a4; } /* WordPress Alignment */ .alignleft { float: left; margin: 0 20px 12px 0; } .alignright { float: right; margin: 0 0 12px 20px; } .aligncenter { margin: 0 auto; text-align: center; } /* WordPress Image Captions */ .wp-caption { display: block; } .wp-caption img { display: block; margin: 0; } .wp-caption p.wp-caption-text { font-size: 12px; color: #888; } /* Images */ img { max-width: 100%; height: auto; width: auto; } /* ---------------------------------------------------------------------- */ /* FORMS /* ---------------------------------------------------------------------- */ /* Inputs */ input, textarea { padding: 6px 7px; background: #efede8 url(images/bg-inset-tan.png) repeat-x 0 0; border: 1px solid #bdb6a7; font-size: 12px; } textarea { overflow: auto; } input[type='radio'], input[type='checkbox'] { border: 0; padding: 0; background: none; } /* Labels */ label { display: block; font-size: 12px; font-weight: bold; padding: 0 0 8px; } label span { display: block; padding: 0 0 3px; } /* Fieldsets */ fieldset { border: 1px dotted #CCC; padding: 15px; margin: 0 -15px 15px; } legend { font-weight: bold; font-size: 18px; color: #000; } /* Buttons */ button, .button, .button:visited { display: inline-block; padding: 6px 15px; margin: 0 0 0 -1px; border: 1px solid #a5be5b; background: #a8c15f url(images/gradient-green-small.png) repeat-x 0 0; color: #FFF; font-size: 12px; text-shadow: 1px 1px 1px #94ab50; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; overflow: visible; } button:hover, .button:hover { background-position: 0 -5px; cursor: pointer; color: #FFF; } button[type='reset'], button.secondary, .button.secondary { background: #EEE; color: #888; } button[type='reset']:hover, button.secondary:hover, .button.secondary:hover { background: #DDD; } /* ---------------------------------------------------------------------- */ /* HEADER /* ---------------------------------------------------------------------- */ #header-wrap { background: #dcd8cf url(images/bg-brown-fabric.jpg) repeat-x top center; } #header { padding: 10px 0; overflow: hidden; } #logo { display: block; float: left; margin: 0; } #skip-to-nav { display: none; } #tagline { float: left; margin: 35px 0 0; } #tagline h1.mobile-title { display: none; } #tagline h1, #tagline h2 { line-height: 100%; margin: 0; text-transform: uppercase; text-shadow: 1px 1px 3px #aba598; } #tagline h1 { color: #FFF; font-weight: normal; font-size: 19px; margin: 0 0 14px; } #tagline h1 span { display: block; padding: 5px 0 0; font-size: 26px; color: #1a556a; font-weight: bold; } #tagline h2 { font-size: 12px; color: #efede8; } #tagline h2 span { display: inline-block; margin-right: 10px; font-size: 14px; font-style: italic; font-weight: bold; color: #928b7d; text-transform: none; text-shadow: 1px 1px 1px #aba598; } /* Utilities */ #utilities { float: right; padding: 30px 0 0; } .social-icons {text-align: right; margin: 10px 0 0 0; } .social-icons li {display: inline-block; margin-left: 7px; } .social-icons a { display: block; width: 25px; height: 25px; background: url(images/social-media-sprite.png) no-repeat center center; } .social-icons .acscommunity a { background-position: 0 0; } .social-icons .facebook a { background-position: -25px 0; } .social-icons .twitter a { background-position:-50px 0; } /* Navigation */ #nav-wrap { background: #2281a2 url(images/gradient-blue-inset-small.png) repeat-x 0 0; border-top: 1px solid #2589ad; } #nav { } #nav li { position: relative; display: inline-block; } #nav > li:first-child { } #nav a { display: block; padding: 10px 15px 12px; font-weight: 700; font-size: 13px; text-decoration: none; color: #FFF; border: 1px solid transparent; text-shadow: 1px 1px 1px #195368; } #nav > li:hover > a, #nav > .current_page_parent > a, #nav > .current_page_ancestor > a, #nav > .current_page_item > a { background: #195368 url(images/gradient-dark-blue-inset-small.png) repeat-x 0 0; padding-top: 15px; margin-top: -5px; border-color: #1a6680; color: #c3dd75; } #nav ul { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: 250px; background: #195368; list-style: none; padding: 5px 0; margin: -1px 0 0; font-size: 12px; } #nav li:hover > ul { display: block; } #nav ul li { display: block; margin: 0; } #nav ul a { background: none; padding: 6px 10px; font-weight: normal; border: 0; color: #CCC; } #nav ul a:hover, #nav li .children li a:hover { background: #2b697f; padding: 6px 10px; margin: 0; color: #FFF; } #nav .current_page_ancestor .current_page_item a, #nav .current_page_ancestor .current_page_parent a { color: #FFF; padding: 4px 10px; background: none; } .index #nav > li:first-child { margin-left: -15px; } /* Search Form */ form.search { overflow: hidden; } .search label { } .search input[type='text'] { float: left; width: 160px; margin-right: -5px; font-weight: 700; font-size: 12px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .search button { float: left; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /* ---------------------------------------------------------------------- */ /* FOOTER /* ---------------------------------------------------------------------- */ #footer { clear: both; border-top: 1px solid #c8c4bd; padding: 15px 0; overflow: hidden; font-size: 12px; } /* Copy */ #footer .copyright { line-height: 130%; margin: 0; } /* Footer Navigation */ #footer-nav { float: right; margin: 0 0 10px; text-align: right; } #footer-nav li { display: inline-block; padding: 0 0 0 10px; margin: 0 0 0 10px; border-left: 1px solid #928b7d; line-height: 100%; } #footer-nav li:first-child { border-left: 0; } #footer-nav a { display: block; text-decoration: none; color: #928b7d; } #footer-nav a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------- */ /* CONTENT /* ---------------------------------------------------------------------- */ #content-wrap { padding: 2% 0 0; } #sidebar { float: left; width: 220px; margin: 0 0 40px; } #content { margin: 0 0 40px 240px; background: #FFF; padding: 20px; -moz-box-shadow: 0 0 8px #BBB; -webkit-box-shadow: 0 0 8px #BBB; box-shadow: 0 0 8px #BBB; min-height: 400px; } .landing-page #content, .landing-page .breadcrumbs { margin-left: 0; } .page-news.landing-page #content, .page-news.landing-page .breadcrumbs { margin-left: 240px; } /* Page Titles */ .pagetitle { margin-top: 0; } /* Sidebar */ .secondary-nav { } .secondary-nav li { border-bottom: 1px solid #c8c4bd; } .secondary-nav a { display: block; text-decoration: none; padding: 12px 30px 12px 15px; color: #1a556a; font-weight: 700; background: url(images/icon-arrow-right-dark-blue.png) no-repeat 95% 50%; } .secondary-nav a:hover { color: #2382a4; } .secondary-nav .active a { background-color: #1a556a; color: #FFF; background-image: url(images/icon-arrow-right-white.png); } .secondary-nav ul { margin: 5px 0 0 15px; padding: 0 0 10px; } .secondary-nav ul li { padding-left: 5px; border: 0; border-left: 2px solid #c8c4bd } .secondary-nav ul li a { padding: 3px 5px; color: #928B7D; } .secondary-nav ul li a:hover { text-decoration: underline; } .secondary-nav .active li a { background: transparent; color: #928B7D; font-weight: normal; } .secondary-nav ul .active { border-color: #1a556a; border-left-width: 6px; margin-left: -2px; padding-left: 3px; } .secondary-nav ul .active a { color: #1a556a; } .secondary-nav ul .active a:hover { text-decoration: none; } /* Post Lists */ .post-list { font-size: 12px; } .post-list li { padding: 10px 0; border-top: 1px solid #ede5d3; } .post-list li:first-child { border-top: 0; } .post-list li a { text-decoration: none; color: #7a7364; } .post-list li a:hover { text-decoration: underline; color: #2382a4; } /* Logo Lists */ .logo-list { text-align: center; } .logo-list li { display: inline-block; vertical-align: middle; margin: 0; } .logo-list a { display: block; padding: 10px; } .logo-list a img { vertical-align: bottom; } /* Breadcrumbs */ .breadcrumbs { margin: 0 0 0 240px; padding: 0 0 15px; font-size: 12px; } .breadcrumbs a, .breadcrumbs .separator { display: inline-block; vertical-align: middle; } .breadcrumbs .separator { padding: 0 2px; font-size: 16px; line-height: 100%; color: #BBB; } .breadcrumbs a { padding: 4px; } .breadcrumbs a:first-child { margin-left: -4px; } .breadcrumbs a.last { color: #928b7d; font-weight: bold; text-decoration: none; } /* Post Navigation */ .post-navigation { clear: both; list-style: none; margin: 0; padding: 30px 0 15px; text-align: center; } .post-navigation li { display: inline-block; } .post-navigation a { display: block; padding: 4px 10px; font-size: 12px; text-decoration: none; background: #F4F4F4; color: #888; } .post-navigation a:hover { background: #DDD; color: #666; } .post-navigation .next a, .post-navigation .previous a { background: none; } .post-navigation .next a:hover, .post-navigation .previous a:hover { text-decoration: underline; } .post-navigation .active a { background: #1a556a; color: #FFF; } /* Landing Pages */ .landing-page .post-list { overflow: hidden; } .landing-page .post-list .post { display: block; width: 49%; margin-left: 2%; margin-bottom: 2%; float: left; } .landing-page .post-list .post.first { clear: both; margin-left: 0; } .landing-page .post-list .post .module-header a { display: block; color: inherit; text-decoration: none; } .landing-page .post-list .post .inside { padding: 10px; } .landing-page .post-list .post .inside p { margin: 15px 0 0; } .landing-page .post-list .post .inside p:first-child { margin-top: 0; } /* ---------------------------------------------------------------------- */ /* UI ELEMENTS /* ---------------------------------------------------------------------- */ #top-section { position: relative; zoom: 1; } /* Slider */ #slider-wrap { position: absolute; top: 0; left: 0; width: 65%; height: 100%; } #slider-tagline { position: absolute; top: 0; left: 0; z-index: 5; padding: 20px; text-transform: uppercase; } #slider-tagline h1, #slider-tagline h2 { text-shadow: 2px 2px 2px #1a556a; line-height: 100%; margin: 0; } #slider-tagline h1 { font-size: 36px; color: #FFF; } #slider-tagline h2 span { display: inline-block; margin-right: 10px; vertical-align: top; line-height: 100%; } #slider-tagline h2 .primary { color: #c3de6f; font-size: 28px; font-weight: bold; } #slider-tagline h2 .secondary { font-weight: normal; color: #36b7e4; font-size: 22px; margin: 0; } #slider { position: relative; width: 100%; height: 100%; overflow: hidden; } #slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #slider .slide img { max-width: 1000%; } #slider .slide .overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: #edece9 url(images/gradient-white-medium.png) repeat-x 0 0; border: 1px solid #dbdbda; } #slider .slide .inside { padding: 10px; } #slider .slide .overlay h2 { margin: 0 0 4px; font-size: 16px; color: #289ec7; font-weight: 700; text-shadow: 1px 1px 2px #dededc; } #slider .slide .overlay p { font-size: 12px; color: #545047; font-weight: 700; margin: 5px 0 0; } .sliderNavigation { text-align: center; margin-top: -2px; } .sliderNavigation li { display: inline-block; margin: 0 3px; } .sliderNavigation a { display: block; background: #cfc7b6; width: 8px; height: 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .sliderNavigation a:hover { background: #a69e8b; } .sliderNavigation .active a { background: #2796bd; } /* Modules */ .module { background: #FFF; border: 1px solid #dbdbda; -moz-box-shadow: 0 0 6px #d9d8d3; -webkit-box-shadow: 0 0 6px #d9d8d3; box-shadow: 0 0 6px #d9d8d3; } .module-header { position: relative; padding: 8px 30px 8px 10px; background: repeat-x bottom center; border-bottom: 1px solid #dbdbda; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .module-header h2 { text-shadow: 1px 1px 1px #BBB; margin: 0; font-size: 16px; text-transform: uppercase; font-weight: 700; } .module-header .arrow-link { position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; background: url(images/icon-arrow-link-sprite.png) no-repeat 0 0; margin-top: -8px; } .module .inside { padding: 10px; } .module.primary .module-header { background-color: fff; background-image: url(images/gradient-white-small.png); } .module.primary .module-header h2 { color: #2796bd; } .module.primary .module-header .arrow-link { background-position: 0 0; } .module.primary .module-header .arrow-link:hover { background-position: 0 -16px; } .module.secondary .module-header { background-color: #e6e1d7; background-image: url(images/gradient-tan-inset-small.png); border: 1px solid #cfcac1; } .module.secondary .module-header h2 { color: #FFF; } .module.secondary .module-header .arrow-link { background-position: 0 -16px; } .module.secondary .module-header .arrow-link:hover { background-position: -16px -16px; } .module.bold .module-header { background-color: #1a5468; background-image: url(images/gradient-dark-blue-x-small.png); border: 1px solid #1a5468; } .module.bold .module-header h2 { color: #FFF; text-shadow: none; } .module.primary .module-header .arrow-link { background-position: 0 0; } .module.primary .module-header .arrow-link:hover { background-position: 0 -16px; } /* CTAs */ .cta { display: block; padding: 10px; background: #a8c15f url(images/gradient-green-small.png) repeat-x 0 0; border: 1px solid #a5be5b; font-size: 12px; } .cta h2 { color: #FFF; font-size: 17px; margin: 0 0 5px; font-weight: 400; } .cta p { margin: 5px 0 0; font-weight: bold; color: #5e6d32; } .cta .inside { display: block; text-decoration: none; } .cta.registration .inside { padding-right: 50px; background: url(images/icon-calendar-green.png) no-repeat 100% 50%; } /* Callouts */ #callouts { clear: both; background: #2281a2 url(images/gradient-blue-inset-large.png) repeat-x 0 0; border: 1px solid #2589ad; padding: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #FFF; } #callouts .callout { float: left; width: 31%; margin-left: 3%; font-size: 12px; } #callouts .callout:first-child { margin-left: 0; } #callouts .callout h3 { color: #1a556a; font-size: 15px; font-weight: 400; margin: 0 0 10px; text-shadow: 1px 1px 1px #217d9e; } #callouts .callout p { text-shadow: 1px 1px 1px #207e9e; } #callouts .callout .more-link { margin: 0; text-align: right; font-size: 12px; font-weight: 700; } #callouts .callout .more-link a { color: #c3dd75; } /* Societies */ #societies { } #logo-ACS { width: 30%; } #logo-CSC { width: 40%; } #logo-CSJ { width: 20%; } #logo-RACI { width: 17%; } #logo-NZIC { width: 12%; } #logo-KCS { width: 35%; } #logo-CCS { width: 17%; } /* Tables */ table, tr, td, th { border: 0; padding: 0; margin: 0; border-collapse: collapse; } table.table-borderless { } table.table-data { } table.table-data td { padding: 7px; border: 1px solid #DDD; } table.table-data thead td { background: #EEE; font-weight: bold; } table.table-data tfoot td { background: #F6F6F6; padding: 4px 7px; } /* ---------------------------------------------------------------------- */ /* LAYOUT /* ---------------------------------------------------------------------- */ /* Gutters */ #slider-wrap, #top-section, #callouts, .cta { margin-bottom: 2%; } #slider-wrap { float: left; } #primary-cta, #latest-news { margin-left: 67%; } #callouts { clear: both; } /* ---------------------------------------------------------------------- */ /* HP Footer /* ---------------------------------------------------------------------- */ .sponsorship-information { display: table; } .col_one_third { float: left; width: 28%; margin: 0 auto; min-height: 1px; position: relative; overflow: hidden; } .col_two_third { float: left; width: 70%; min-height: 1px; position: relative; } .col_last { float: right; } .small_col_inside.inside { padding: 10px 0; display: table; width: 100%; } .small_col_inside.inside .logo-list { display: table-cell; vertical-align: middle; } @media (max-width: 768px) { .col_one_third, .col_two_third { width: 100%; float: none; margin: 0 0 2em 0; } } @media (min-width: 1225px) { .small_col_inside.inside { height: 200px !important; } } /* ---------------------------------------------------------------------- */ /* POSTS /* ---------------------------------------------------------------------- */ .post-archive { padding: 20px 0 0; } .post-archive .post { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px dotted #CCC; } .search-results li { padding: 15px 0; margin: 0; border-bottom: 1px dotted #CCC; } /* ---------------------------------------------------------------------- */ /* KEEP THINGS CLEAN /* ---------------------------------------------------------------------- */ /* Inline-Block IE7 */ #nav li, .social-icons li, #footer-nav li, .logo-list li, #slider-tagline h2 span, .breadcrumbs a, .breadcrumbs .separator, button .button, .sliderNavigation li { *display: inline; zoom: 1; } /* Image Replacement */ .social-icons a, .module-header .arrow-link, #skip-to-nav, .sliderNavigation a { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* Rounded Corners */ /* 5px */ .module, .cta, #callouts, #slider-wrap { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* 5px - Top */ #nav > li:hover > a, #nav > .current_page_parent > a, #nav > .current_page_ancestor > a, #nav >.current_page_item > a, .module-header, #nav > .current_page_item > a { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } /* ---------------------------------------------------------------------- */ /* MEDIA QUEEERRRRIIIIEEEESSSSSSS /* ---------------------------------------------------------------------- */ /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 960px) { #header, #content-wrap, #nav { width: 95%; } #header-wrap { background-image: url(images/bg-brown-fabric-tiled.jpg); background-repeat: repeat; } #logo { width: 130px; } #tagline { margin-top: 25px; } #tagline h1 { font-size: 16px; margin: 0 0 10px; } #tagline h1 span { padding: 3px 0 0; font-size: 20px; } #tagline h2 { font-size: 11px; } #tagline h2 span { margin-right: 5px; font-size: 12px; } #primary-cta .inside { padding-top: 15px; padding-bottom: 15px; } #primary-cta h2 { font-size: 15px; font-weight: 700; } #primary-cta p { display: none; } #header .search input[type='text'] { width: 120px; } #nav a { font-weight: 400; } #slider-tagline h1 { font-size: 30px; } #slider-tagline h2 .primary { font-size: 22px; } #slider-tagline h2 .secondary { font-size: 18px; } .landing-page .post { width: 100%; float: none; margin-left: 0; } } /* Mobile */ @media only screen and (min-width: 320px) and (max-width: 767px) { h1 { font-size: 24px; margin: 24px 0 12px; color: #1a556a; } h2 { font-size: 20px; margin: 20px 0 10px; color: #2796bd; } h3 { font-size: 16px; margin: 16px 0 8px; color: #97b23d; font-style: italic; } h4 { font-size: 14px; margin: 14px 0 7px; color: #928b7d; } h5 { font-size: 12px; margin: 12px 0 6px; color: #000; } h6 { font-size: 12px; margin: 12px 0 6px; color: #c3dd75; } #header, #content-wrap { width: 95%; min-width: 300px; } #header-wrap { padding: 0; border: 0; } #header { width: 100%; padding: 0; } #logo { width: 66px; height: 40px; position: absolute; top: 0; left: 0; margin: 0; background: url(images/logo-pacifichem-globe-no-text.png) no-repeat center center; text-indent: 100%; overflow: hidden; white-space: normal; } #logo img { width: 0; } #skip-to-nav { float: right; display: block; border-left: 1px solid #105773; background: url(images/icon-menu.png) no-repeat center center; width: 48px; height: 40px; padding: 0; } #skip-to-nav.active { background-color: #105773; background-image: url(images/icon-menu-white.png); } #tagline { float: none; margin: 0; padding: 0; } #tagline h1 { display: none; } #tagline h1.mobile-title { display: block; background: #2281a2 url(images/gradient-blue-inset-small.png) repeat-x 0 0; border-bottom: 1px solid #105773; font-size: 20px; color: #1a556a; text-shadow: 1px 1px 1px #2796bd; font-weight: 700; margin: 0; padding: 10px 10px 10px 70px; } #tagline h2 { border-bottom: 1px solid #a4a18e; padding: 8px 10px; text-align: right; } #tagline h2 span { float: left; } #utilities { display: none; } #primary-cta .inside { padding: 10px 10px; } #primary-cta h2 { font-size: 15px; font-weight: 700; } #primary-cta p { display: none; } #nav-wrap { background: #105773; padding: 0; border: 0; } #nav { padding: 0; margin: 0; width: 100%; } #nav ul { background: #042536; position: static !important; margin: 0; padding: 10px 0; width: auto; -webkit-transition: none; } .index #nav li:first-child { margin-left: 0; border: 0; } #nav ul, #nav li:hover ul { display: none; } #nav li { display: block; border-top: 1px solid #042536; } #nav a, #nav > .current_page_item > a, #nav > .current_page_parent > a, #nav > .current_page_ancestor > a, #nav li:hover > a { padding: 10px 10px 10px 35px; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: no-repeat 10px 50%; font-size: 16px; margin: 0; color: #FFF; background: url(images/icon-arrow-accordion-right.png) no-repeat 10px 50%; } #nav li.expanded > a { background: url(images/icon-arrow-accordion-down.png) no-repeat 10px 50%; } #nav .children li a { padding: 6px 10px 6px 35px; font-size: 14px; color: #FFF; background: none; } #nav .current_page_ancestor .current_page_item a, #nav .current_page_ancestor .current_page_parent a { color: #c3dd75; padding: 6px 10px 6px 35px; } #nav ul a:hover { background: #195368; } #nav > li.current_page_parent > a, #nav > li.current_page_ancestor > a, #nav > li.current_page_item > a { color: #c3dd75; margin: 0; } #slider-wrap { float: none; position: static; height: 250px; width: 100%; margin-bottom: 5%; } #slider .slide img { max-width: 130%; } #slider-tagline { padding: 10px; } #slider-tagline h1 { font-size: 20px; } #slider-tagline h2 .primary { display: block; font-size: 16px; } #slider-tagline h2 .secondary { display: block; font-size: 14px; } #primary-cta, #latest-news { clear: both; margin-left: 0; } #slider-wrap, #latest-news, #callouts, .cta { margin-bottom: 5%; } #callouts .callout { width: auto; margin: 0 0 5%; } #sidebar { display: none; } #content { margin-top: 10px; padding: 10px; } #content, .breadcrumbs { margin-left: 0; } .breadcrumbs { padding: 0; margin: 0; } .breadcrumbs a.last { padding-left: 0; } #societies { } #societies .logo-list { white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; } #societies .logo-list li { width: auto; } .landing-page .post { width: 100%; float: none; margin-left: 0; margin-bottom: 6%; } } /* iOS Device Rotate Bug */ @media only screen and (width:320px) and (device-width:320px) and (device-height:480px) and (orientation: landscape) { html { -webkit-transform: scale(0.667); -webkit-transform-origin: top right; position: absolute; right: 0; top: 0; width: 480px; } } @media only screen and (width:768px) and (device-width:768px) and (device-height:1024px) and (orientation: landscape) { html { -webkit-transform: scale(0.75); -webkit-transform-origin: top right; position: absolute; right: 0; top: 0; width: 1024px; } }