/* Theme Name: Essential Version: 1.0 Author: aether_ Author URI: http://www.aetherdesign.net */ @import "reset.css"; @import "layout.css"; @import "elements.css"; /* Table of Contents ================================================== #Common Styles #Navigation #Call To Action #Footer #Home Page #Home Page 2 #About Page #Portfolio Page #Features Page #Contact Page #Blog Page */ /* #Common Styles ================================================== */ body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }strong { font-weight: 900; } small { font-size: 0.75em; }a, a:visited { color: #221e1e; text-decoration: none; } a:hover { color: #009640; text-decoration: none; } a:hover, a:active { outline: 0; } input:focus { outline: none; } /* #Navigation ================================================== */ #logo {margin: 10px 0px 10px 0px !important;line-height: 40px;} header .columns {margin: 0px !important} #navigation { float: right; } #navigation li {display: block;float: left;margin-top: 30px;margin-right: 5px;line-height: 100%;} #navigation a {display: block;padding: 8px 17px 11px 17px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} #navigation li.last { margin-right: 0px; } #navigation li:hover a {color: white;background: #009640;} #navigation li.active {padding-bottom: 7px!important;background: url('img/nav-arrow.png') no-repeat bottom center;} #navigation li.active ul.dropdown li.active{background: #009640 url(http://www.clemensschleiwies.com/wp-content/themes/clsc/css/style.css);background-image: none;color: #FFF;} #navigation li.active ul.dropdown li.active a{background: #47aa71;color: #FFF;} #navigation li.active a, #navigation li.active a:hover {color: white;background: #009640;} /* Dropdown */ #navigation .dropdown {display: none;margin: 0;padding: 0;position: absolute;margin-top: 30px;z-index: 10000;background: #221e1e;margin-left: -20px;line-height: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow:visible !important;} #navigation .dropdown li { float: none; margin: 0; padding: 0; } #navigation li.drop { padding-bottom: 30px; } #navigation .dropdown li.active, #navigation li.drop .dropdown li.drop, #navigation li.drop .dropdown li.drop.active { padding-bottom: 0px!important; } #navigation li.drop:hover { cursor: pointer; background: url('img/nav-drop.png') no-repeat bottom center; padding-bottom: 30px!important; } #navigation li.drop .dropdown li.drop:hover {padding-bottom: 0px!important;} #navigation .dropdown li a { color: white;font-size: 0.875em; /* 14/16 */background: #221e1e;margin: 0;padding: 15px 80px 15px 37px; } #navigation .dropdown li.active a, #navigation .dropdown li.active:hover, #navigation .dropdown li a:hover {color: white;background: #47aa71;} #navigation .dropdown li .dropdown{display: none;margin: 0;padding: 0;position: absolute;margin-top: 0px;margin-left: 100px;z-index: 100000;background: #221e1e;line-height: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} #navigation .dropdown li .dropdown li { float: left; margin: 0; padding: 0;} #navigation .dropdown li ul.dropdown li a { color: white;font-size: 0.875em; /* 14/16 */background: #221e1e;margin: 0px 0px 0px 0px;padding: 15px 37px; }/* Mobile */ #mobile-nav {display: none;width: 100%;background: #221e1e;} #mobile-nav .navigationButton img { margin: 15px 0px; } #mobile-nav .navigationButton img:hover { cursor: pointer; } #mobile-nav .navigationContent { padding-bottom: 15px; } #mobile-nav .navigationContent .dropdown { margin-left: 15px; font-size: 0.875em; /* 14/16 */ } #mobile-nav .navigationContent a { display: block; color: white; padding: 7px 0px; border-bottom: 1px solid #333; } #mobile-nav .navigationContent a.active { font-weight: 400; } #mobile-nav .navigationContent a:hover { color: #009640; } /* #Clients ================================================== */ #clients {padding-top: 80px;padding-bottom: 80px;width: 100%;background: #221E1E;} #clients img { width: 100%; } /* #Call-To-Action ================================================== */ #call-to-action {margin-top:20px;padding-top: 80px;padding-bottom: 80px;width: 100%;background: #009640;text-align: center;} #call-to-action h1 {color: #fff;padding-bottom: 20px;} #call-to-action h2 {color: #221E1E;padding-bottom: 35px;} /* #Footer ================================================== */ footer {padding-top: 80px!important;padding-bottom: 80px!important;font-size: 0.8125em; /* 13 / 16 */} #copyright a { font-weight: 400; } #foot-nav, #foot-nav ul { float: right; } #foot-nav li { float: left; padding: 0px 15px; } #foot-nav li.first { padding-left: 0px; } #foot-nav li.last { padding-right: 0px; } #foot-nav a.active { font-weight: 400; } /*********************** -HOME PAGE - ***********************/ /* #Features ================================================== */ #features {width: 100%;background: #009640;color: #221e1e;text-align: center;padding-top: 60px;padding-bottom: 80px;} #features h2 { color: #221e1e; padding-bottom: 15px; } #features .feature { padding-top: 20px; } /* #Featureshome ================================================== */ #featureshome {width: 100%;background: #009640;color: #221e1e;padding-top: 60px;padding-bottom: 80px;} #featureshome h2 { color: #221e1e; padding-bottom: 15px; } #featureshome .featurehome { padding-top: 20px; } /* #Gallery ================================================== */ #gallery { padding-top: 80px; padding-bottom: 40px; } #gallery .intro h2, #gallery .intro p { padding-top: 25px; } #gallery .intro .button { margin-top: 40px; } /*********************** - HOME PAGE 2 - ***********************/ .auth {width:140px;} .com {width: 80%;} /* #Showcase ================================================== */ .showcase-entry { padding-top: 80px; } .showcase-entry img { width: 100%; } .showcase-entry h1 { padding-bottom: 15px; } .showcase-entry h2 { padding-bottom: 25px; } .showcase-entry p { padding-bottom: 40px; } .showcase-entry .button { margin-bottom: 40px; } .showcase-entry.light .screen { float: left; } .showcase-entry.light .description { float: right; } .showcase-entry.dark {width: 100%;background: #444444;color: white;padding-bottom: 80px;} .showcase-entry.dark h1 { color: white; } /*********************** - ABOUT PAGE - ***********************/ /* #Title ================================================== */ #title { padding-top: 50px; padding-bottom: 80px; } #title h1 { padding-bottom: 20px; } /* #Team ================================================== */ #team { padding-bottom: 80px; text-align: center; } #team .members h2 { padding-top: 20px; } #team .members a { color: #ff2a00; } #team .members a:hover { color: #221e1e; } #team .members p { padding-top: 30px; } /* #Services ================================================== */ #services {width: 100%;background: #221E1E;padding-top: 80px;padding-bottom: 80px;} #services h1 { color: #fff; padding-bottom: 20px; } #services h2 { padding-bottom: 40px; } #services h4 {color: #fff;line-height: 16px;padding-left: 24px;} #services ul, #services p {font-size: 0.875em; /* 14 / 16 */color: #bdbdbd;padding-top: 30px;} #services .list-one h4 { background: url('img/lightning.png') no-repeat top left; } #services .list-two h4 { background: url('img/lightning.png') no-repeat top left; } #services .list-three h4 { background: url('img/lightning.png') no-repeat top left; } #services .list-three a { color: #ff2a00; } #services .list-three a:hover { color: #221e1e; } /*********************** - PORTFOLIO PAGE - ***********************/ /* #Filters ================================================== */ #filters {padding-top: 40px;padding-bottom: 40px;width: 100%;background: #444444;} #filters h2 {color: #fff;padding-bottom: 20px;} #filter li {display: block;float: left;margin-right: 20px;background: #221e1e;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} #filter li.current { background: #009640; } #filter li.last { margin-right: 0px; } #filter li:hover { background: #009640; } #filter a { display: block; line-height: 100%;padding: 8px 20px 11px 20px; color: #fff; } /* #Work ================================================== */ #work {padding-top: 40px;padding-bottom: 60px;} .switch ul { float: right; } .switch li { float: left; } .switch a {display: block;text-indent: -999em;width: 34px;height: 34px;} .switch .prev {margin-right: 10px;background: url('img/arrow_large_left.png') no-repeat top left;background-position: top;} .switch .next {background: url('img/arrow_large_right.png') no-repeat top left;background-position: top;} .switch .prev:hover, .switch .next:hover { background-position: bottom; } #project { padding-bottom: 80px; } #project .overview h2 { padding-bottom: 40px; } #project .overview p { padding-bottom: 25px; } /*********************** - FEATURES PAGE - ***********************/ #elements { padding-bottom: 80px; } #accordion, #tabs, #alerts, #infobox, #lists, #dropcaps, #quote { padding-top: 20px; padding-bottom: 20px; } #accordion .title, #tabs .title, #infobox .title, #lists .title, #quote .title { padding-bottom: 20px; } #alerts p { margin-top: 10px; }#dropcaps p { padding-top: 20px; font-size: 0.875em; } #lists ul {border-bottom: 1px dotted #d0d0d0;margin-bottom: 5px;padding-bottom: 5px;} #lists .list.dash { border-bottom: none; } .grid {margin-top: 20px;text-align: center;line-height: 40px;height: 40px;background: #d0d0d0;} .grid:hover { background: #ececec; } /*********************** - CONTACT PAGE - ***********************/ /* #Form ================================================== */ #contact { padding-bottom: 80px; } #alert {display: none;padding-top: 20px;padding-bottom: 20px;width: 100%;} /* #Sidebar ================================================== */ #contact aside { padding-left: 40px; } #contact aside h3 {padding-bottom: 20px;} #contact aside h3.first { padding-top: 0px; } #contact aside span.telephone {font-weight: 900;font-size: 1.2em;} #contact aside li, #contact aside .social li {float: left;margin-right: 10px;margin-bottom: 10px;} /***********************- BLOG - ***********************/ .content { width: 100%; background: #f1f1f1; } /* #Entries ================================================== */ .entry { padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid #cecece; } .entry img {max-width: 100%; height: auto; } .entry h1 {margin: 30px 0px;-webkit-transition: color ease .33s;-moz-transition: color ease .33s;transition: color ease .33s;} .entry h1:hover {color: #ff2a00;-webkit-transition: color ease .33s;-moz-transition: color ease .33s;transition: color ease .33s;} .entry .meta { display: block; padding-bottom: 30px; } .entry .meta li {display: inline-block;font-size: 0.875em;color: rgb(157, 160, 164);} .entry .meta li a { color: rgb(157, 160, 164); } .entry .meta li a:hover { color: #221e1e; } .entry .button, .wp-polls .Buttons, .post-edit-link { margin-top: 30px; } /* Link */ .entry.link { text-align: center; } .entry.link h1 {text-decoration: underline;line-height: 110%;} /* Audio */ #blog .entry audio { width: 100%; } /* Quote */ .entry.quote h1 { line-height: 110%; } .entry.quote h1:hover { color: #221e1e; } .entry.quote { text-align: center; } #blog .switch ul {margin-top: 80px;padding-bottom: 80px;} /* #Single-post ================================================== */ .entry.standard.full .content { padding-bottom: 30px; } .entry.standard.full blockquote { margin-bottom: 30px; } .entry.standard.full .content a { font-weight: 400; } /* Comments */ #comments { } .comment-list {margin-top: 20px;margin-bottom: 30px;overflow: hidden; } .comment-list .comment {float: left;margin-bottom: 30px;padding-top: 30px;border-top: 1px solid #cecece;} .comment-list .comment:first-child { border-top: none; } .comment-list img {float: left;margin-bottom: 10px;} .comment-list .comment-meta {float: left;padding-left: 20px;} .comment-body { float: left; } ul.children .comment {border-top: 1px solid #cecece!important;padding-top: 15px;margin-top: 15px;margin-bottom: 0px;margin-left: 55px;} .date {font-size: 0.875em;color: rgb(157, 160, 164);} .reply {font-weight: 400;font-size: 0.875em;padding-left: 10px;} /* Form */ #respond { } #respond form {} #respond .form-field span input, #respond .form-field span textarea { background: #fff; } /* #Sidebar ================================================== */ #blog aside {font-size: 0.875em;padding-left: 40px;padding-bottom: 80px;} #blog aside h2 { padding-top: 80px; } /* Text Widget */ #blog .text-widget p { padding: 30px 0px; } /* Tweets */ .latest-tweets p { padding-top: 30px; } .latest-tweets a { font-weight: 400; } .latest-tweets small { color: rgb(157, 160, 164); } /* Photo Stream */ #flickrs {display: block;padding-top: 30px;} #flickrs { display: block; float: left; } #flickrs li { display: block;list-style: none; float: left; background: #e5e5e5;border: 1px solid #d5d5d5;padding: 5px;margin-top: 10px;margin-right: 10px;} #flickrs a {display: block;position: relative;} #flickrs img {width: 50px;height: 50px;} /* Social */ #blog aside .social {padding-top: 30px;} #blog aside .social li {float: left;margin-right: 10px;margin-bottom: 10px;} /*========== Media Queries ==========*/ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { #mobile-nav { display: block; }#navigation { display: none; }} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .showcase-entry.light .description, .showcase-entry.dark .description { width: 748px; }.showcase-entry.light .screen, .showcase-entry.dark .screen { width: 620px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #gallery .intro .button { margin-bottom: 40px; } #foot-nav { display: none; } #copyright { text-align: center; } .showcase-entry { text-align: center; } #team .members li { padding-top: 40px }#team .members li.first { padding-top: 0px; } #services .list-two, #services .list-three { padding-top: 40px; } #filters { padding-bottom: 20px; }#filter li { margin-bottom: 20px; } .switch ul { float: left; margin-top: 20px; padding-bottom: 0px; }#blog .switch ul { float: left; margin-top: 20px; padding-bottom: 0px; } #project .overview { padding-top: 40px; }#project .overview h2 { padding-bottom: 25px; } #contact aside h3.first { padding-top: 40px; }#contact aside, #blog aside { padding-left: 0px; } #respond { padding-bottom: 0px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { } /* Targets Retina Enabled Devices */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -moz-min-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #navigation li.active { background: url('img/nav-arrow_2x.png') no-repeat bottom center; -webkit-background-size: 16px 7px; -moz-background-size: 16px 7px; background-size: 16px 7px; } #navigation li.drop:hover { background: url('img/nav-drop_2x.png') no-repeat bottom center; -webkit-background-size: 11px 20px; -moz-background-size: 11px 20px; background-size: 11px 20px; } #services .list-one h4 { background: url('img/lightning_2x.png') no-repeat top left; -webkit-background-size: 16px 16px; -moz-background-size: 16px 16px; background-size: 16px 16px; } #services .list-two h4 { background: url('img/lightning_2x.png') no-repeat top left; -webkit-background-size: 16px 16px; -moz-background-size: 16px 16px; background-size: 16px 16px; } #services .list-three h4 { background: url('img/lightning_2x.png') no-repeat top left; -webkit-background-size: 16px 16px; -moz-background-size: 16px 16px; background-size: 16px 16px; } }