/* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== 00. RETINA CSS 01. TESTING TEXT 02. BASE STYLES (1240px) 03. #DESKTOP-LARGE (1140px) 04. #DESKTOP-SMALL (960px) 05. #Tablet (Portrait) 06. #Mobile (Portrait) 07. #Mobile (Landscape) */ /* =============================================== 00. RETINA CSS =============================================== */ only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ nav li:first-child a, nav li:first-child a:hover, h2, h2:after {-webkit-background-size: 50% auto ; -moz-background-size: 50% auto; background-size: 50% auto ;} nav li:first-child a, nav li:first-child a:hover {background-image: url(images/navigation-home@2x.png);} h2 { background-image:url(images/heading2@2x.png);} h2:after {background-image:url(images/heading-sidebar-arrow@2x.png);} } .header-ad-banner { display:none !important;} /* =============================================== 01. TESTING TEXT =============================================== */ body:after {position:relative; z-index:55; content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff; display:none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */} /* =============================================== 02. BASE STYLES (1240px) =============================================== */ /* Note: Design for a width of 1240px */ body:after {content: "Wider than 1240px";background-color: hsla(200,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ html {-webkit-text-size-adjust: none;} /* Removes webkit font resizing */ body {max-width:100%; width:100%;} img {max-width:100%; height: auto; } .lt-ie9 img {width: auto; } #main, #content-sidebar, #sidebar, .slider-content .slider-image, .slider-text, .slider-text-overlay {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, #content-sidebar .grid2column, #content-sidebar .grid3column, #content-sidebar .grid3columnbig, #content-sidebar .grid4column, #content-sidebar .grid4columnbig {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } /* =============================================== 03. #DESKTOP-LARGE (1140px) =============================================== */ /* Note: Design for a width of 1140px */ @media only screen and (min-width: 1140px) and (max-width: 1240px) { body:after {content: "1140px to 1224px";background-color: hsla(150,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Main Containers */ #main {width:1045px;} #content-sidebar { width:680px;} #sidebar {width:345px;} .slider-content .slider-image { width:700px;} .slider-text { width:300px; padding-top:25px; padding-bottom:15px;} .slider-text-overlay { width:300px;height:243px; margin-top:-288px; padding-top:25px;} /* Default Grid */ .grid2column {width:510px; } .grid3column {width:332px; } .grid3columnbig {width:688px; } .grid4column {width:243px; } .grid4columnbig {width:777px; } #content-sidebar .grid2column {width:328px;} #content-sidebar .grid4column {width:152px;} #content-sidebar .grid4columnbig {width:504px;} #content-sidebar .grid3column {width:210px;} #content-sidebar .grid3columnbig {width:444px;} /* Misc Adjustments */ #flickr-footer ul li img { width:65px; height:65px;} footer #flickr-footer ul li img { width:52px; height:52px; } .contact-form-border-input { width:490px; } #contactform input#contactname, #contactform input#email {width:387px; } #contactform .contact-form-border {width:575px;} #contactform textarea#message {width:472px; } #about-author-description {width:882px;} #content-sidebar #about-author-description {width:510px;} } /* =============================================== 04. #DESKTOP-SMALL (960px) =============================================== */ /* Note: Design for a width of 960px */ @media only screen and (min-width: 959px) and (max-width: 1140px) { body:after {content: "959px to 1139px";background-color: hsla(0,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Main Containers */ #main {width:882px; padding:30px 30px 0px 30px; } #content-sidebar { width:565px;} #sidebar {width:300px;} footer { margin:20px -30px 0px -30px; padding:30px 30px 25px 30px;} #sidebar h2 {margin:0px 0px 20px 0px;} .sidebar-padding {padding:0px 0px 22px 0px;} /* FEATURED SLIDER */ .slider-content .slider-image { width:591px;} .slider-text { width:250px; padding-top:25px; padding-bottom:10px;} .slider-text-overlay { float:right; position:relative; width:250px; height:198px; margin-top:-243px; padding-top:25px;} .flexslider .blog-post-icons {padding-bottom:9px;} .slider-text p, .flexslider .blog-post-icons a.comments-icon, .slider-text-overlay p {display:none;} /* Default Grid */ .grid2column {width:428px; } .grid3column {width:277px; } .grid3columnbig {width:579px; } .grid4column {width:202px; } .grid4columnbig {width:654px; } #content-sidebar .grid2column {width:270px;} #content-sidebar .grid4column {width:123px;} #content-sidebar .grid4columnbig {width:417px;} #content-sidebar .grid3column {width:172px;} #content-sidebar .grid3columnbig {width:368px;} /* Misc Adjustments */ .sf-menu a {padding:16px 12px;} /* Top Menu Size */ #flickr-footer ul li img { width:65px; height:65px;} footer #flickr-footer ul li img { width:41px; height:41px; } .contact-form-border-input { width:470px; } #contactform input#contactname, #contactform input#email {width:367px; } #contactform .contact-form-border {width:520px;} #contactform textarea#message {width:417px; } #mc_embed_signup input { width:150px; } #about-author-description {width:718px;} #content-sidebar #about-author-description {width:400px;} } /* =============================================== 05. #Tablet (Portrait) =============================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Main Containers */ #main {width:702px; } #main, footer {padding:30px 25px 0px 25px;} footer {padding-bottom:25px;} #content-sidebar { width:432px;} #sidebar {width:250px;} footer { margin:20px -25px 0px -25px; } #sidebar h2 {margin:0px 0px 20px 0px;} .sidebar-padding {padding:0px 0px 22px 0px;} a { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; } /* FEATURED SLIDER */ .slider-content .slider-image { width:100%;} .slider-text, .slider-text-overlay { width:220px; height:254px; margin-top:-289px; margin-right:0px; padding:20px 20px 15px 20px; background:#393939; background: rgba(57,57,57,.9);} .slider-text-overlay { float:right; position:relative; width:210px; padding:20px 0px; margin:0px; height:153px; margin-top:-193px; padding:20px; background:#393939; background: rgba(57,57,57,.9);} .flexslider .blog-post-icons {padding-bottom:9px;} .slider-text p, .flexslider .blog-post-icons a.comments-icon, .slider-text-overlay p {display:none;} /* Default Grid */ .grid2column {width:338px; } .grid3column {width:218px; } .grid3columnbig {width:460px; } .grid4column {width:157px; } .grid4columnbig {width:519px; } #content-sidebar .grid2column {width:204px;} #content-sidebar .grid4column {width:90px;} #content-sidebar .grid4columnbig {width:318px;} #content-sidebar .grid3column {width:128px;} #content-sidebar .grid3columnbig {width:280px;} /* Misc Fixes */ .commentlist {width:72%;} .sf-menu a {padding:16px 9px;} /* Top Menu Size */ #flickr-footer ul li img { width:52px; height:52px;} footer #flickr-footer ul li img { width:31px; height:31px; } .contact-form-border-input { width:420px; } #contactform input#contactname, #contactform input#email {width:317px; } #contactform .contact-form-border {width:420px;} #contactform textarea#message {width:317px; } #mc_embed_signup input { width:90px; } #about-author-description {width:538px;} #content-sidebar #about-author-description {width:260px;} } /* =============================================== 06. #Mobile (Portrait) =============================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ body, body.myatu_bgm_body { background-color: #fff!important; } /* Main Containers */ #main {width:100% !important; margin:0px !important; box-shadow: none;} #main, footer {padding:30px 14px 0px 14px; box-sizing: border-box;} /*#content { margin-left: 10px; margin-right: 10px; }*/ footer { margin: 0 -15px; } #content-sidebar { width:100%; /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ /* -ms-word-break: break-all; word-break: break-all;*/ /* Non standard for webkit */ /*word-break: break-word;*/ } #sidebar {width:100%;} #sidebar h2 {margin:0px 0px 20px 0px;} .sidebar-padding { padding: 0; margin-top: 25px; } #related-article {width: 200px;} .header-widget {display: none;} /*h2 { font-size: .7em; margin-top: 8px; margin-bottom: 8px; padding-top: 10px 15px; }*/ a { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; } p { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; } ul.tabs { font-size: 0.8em !important; } ul.tabs li a { padding: 0px 8px; } /* EHP Custom */ ehp_ad_banner {display: none; } #header-ad-banner {display: none; } #myatu_bgm_img_group.myatu_bgm_fs {display: none !important} #socialbox {display: none;} /* FEATURED SLIDER */ .slider-content .slider-image { width:100%;} .slider-text, .slider-text-overlay { display:none;} .commentlist {width:95%; left:0px;} .commentlist .children li.comment .comment-meta {margin-left:0px;} .commentlist .avatar {display:none;} .soliloquy-caption-inside h3 { font-size: 1.5em !important; } .lt-ie9 header #logo {max-width:120%; } header #logo img {max-width:120%; } /* Default Grid */ .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, #content-sidebar .grid2column, #content-sidebar .grid3column, #content-sidebar .grid3columnbig, #content-sidebar .grid4column, #content-sidebar .grid4columnbig {width:100%; margin-bottom:15px;} /* Misc Fixes */ header #logo, .social-icons, footer #copyright .copyright-right, footer #copyright .copyright-left {float:none; margin:0 auto; text-align:center;} footer #copyright {padding:7px 0px 25px 0px;} #right-header-container {float:none; display:block;} header .searchform {float:none; margin:0px auto;} header ul.sub-navigation {padding:15px 0px 10px 0px; float:none; margin:0px auto; text-align: center;} header ul.sub-navigation li {padding:0px 4px; float:none;} .flex-direction-nav {display:none;} .contact-form-border-input { width:290px; } #contactform input#contactname, #contactform input#email {width:187px; } #contactform .contact-form-border {width:290px;} #contactform textarea#message {width:187px; } #content-sidebar #about-author-description, #about-author-description {width:140px;} #respond input {width:70%;} #respond textarea {width:80%;} /* Select Menu */ body nav {background:transparent;} nav ul, .sub-navigation-child { display: none; } nav select option {font-size:12px; background:#fff; color:#888;} header nav {float:none; text-align:center; z-index:0; } nav select { text-transform:none; display:block; margin:15px auto 20px auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none; background-image: url(../images/select-arrow.png), -webkit-linear-gradient(#FAFAFA, #f9f9f9 40%, #e8e8e8); background: linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: center right; background-repeat: no-repeat; font-size:13px; border: 1px solid #aaaaaa; color: #555555; padding:7px 5px 7px 10px;} } .header-ad-banner { display:none !important;} /* =============================================== 07. #Mobile (Landscape) =============================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { body:after { content: "480 to 767px"; background-color: hsla(150,50%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Main Containers */ #main {width:100% !important; margin:0px !important; } #main, footer {padding:30px 14px 0px 14px; box-sizing: border-box; border: 0;} footer { margin: 0 -15px; padding: 15px; } a { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; } .lt-ie9 header #logo {max-width:70%; } header #logo img {max-width:70%; } /* Misc Fixes */ .contact-form-border-input { width:420px; } #contactform input#contactname, #contactform input#email {width:317px; } #contactform .contact-form-border {width:420px;} #contactform textarea#message {width:317px; } #content-sidebar #about-author-description, #about-author-description {width:280px;} .header-widget {display: none;} .header-ad-banner { display:none !important;}