/* Theme Name: Emmedia Theme URI: http://emmediagroup.com Description: CSS made for emmedia website Version: 2.0 Author: Ted McIlwain Author URI: http://emmediagroup.com */ @import "style/css/reset.css"; @import "style/css/typography.css"; @import "style/css/layout.css"; /* ----- global styles ----- */ body {background: #dbd7cf ;color: #4a4a48; font-size: 18px; line-height: 20px; font-family: Calibri, GillSans, Trebuchet, sans-serif; } a {text-decoration: underline;color: #141414; outline:none;} a:hover {color: #4a4a48;} em {font-style: italic;color: #80807e;} .hidden {display:none;} .greenlink {color:#1aa55f;} .top-margin {margin-top:20px;} h2.green {background:#58faa8 url(style/images/nav_bg.jpg) repeat-x top left; float: left;padding:6px 18px; color: white; font-weight:normal; font-size:20px;} h2.grey {background:#c7c7c7 url(style/images/grey_bg.jpg) repeat-x top left; float: left;padding:6px 18px; color: white; font-weight:normal; font-size:20px;} h2.green, .nav_current {text-shadow:1px 1px 1px #3ba771;box-shadow: 1px 1px 1px #bdb9a2;-moz-box-shadow:1px 1px 1px #bdb9a2;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;} h2.grey {text-shadow:1px 1px 1px #909090;box-shadow: 1px 1px 1px #bdb9a2;-moz-box-shadow:1px 1px 1px #bdb9a2;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;} /* ----- structure styles ----- */ #wrapper {width:100%; float: left; position:relative; background:#f3f1e5 url(style/images/bg_top.jpg) repeat-x top left;} #header {width:100%; float: left; position:relative;} #header .container {width:960px; margin:0 auto; height: 60px; padding-top: 30px;} #content {width:100%; float:left; position:relative;} #content .container {width:960px; margin:0 auto; height:auto; min-height:300px !important; } #footer {background:url(style/images/bg_footer.jpg) repeat-x top left;width:100%; float:left; position:relative; } #footer .container {width:960px; margin:0 auto; height:160px; } /* ----- #nav ----- */ #header .logo {margin:0;padding:0; width: 39%;float: left;} #nav {float: right; position:relative; padding-top:10px;} #nav li {float: left;margin:0 4px; } #nav li a {display:block;float: left;padding:6px 18px; color: #4a4a48; text-decoration:none;display:block;} #nav li a:hover, #nav li.active a {color: white; background:#58faa8 url(style/images/nav_bg.jpg) repeat-x top left; } #nav li a:hover, #nav li.active a {text-shadow:1px 1px 1px #3ba771;box-shadow: 1px 1px 1px #bdb9a2;-moz-box-shadow:1px 1px 1px #bdb9a2;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px; -webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;} #nav li .nav_current {color: white;background:#58faa8 url(style/images/nav_bg.jpg) repeat-x top left;padding:6px 18px; font-weight:normal; } /* ------ content styles ------- */ #content h2.grey {position:relative;top:15px;left: 15px; z-index:1;} #content .featured {width: 100%; float: left; height: auto;margin-bottom:20px;} #slider_wrap {float: left;position:relative; display: block; overflow:hidden; top:-50px; height: 340px;width:960px;} #slides {float:left; position:relative; width: 960px;} #slides img {float: left;position:absolute; top:40px; left:60px; border:1px solid white;-ms-interpolation-mode:bicubic;} #slides img {box-shadow: 1px 1px 3px #c9c7bd;-moz-box-shadow:1px 1px 3px #c9c7bd; -webkit-box-shadow:1px 1px 3px #c9c7bd;} #slides .cs_text {display:block; width: 320px; float:right;font-style:italic; padding:40px 40px 0 0;} #slides .cs_text p {font-size:14px;} #slides .cs_text h4 {font-size: 22px} #slides .cs_text .title {color: #80807e; padding-bottom: 20px;} #slides .cs_text ul {color: #80807e; padding-left: 20px;list-style-type:none; padding-bottom: 20px;} #prevNext {width: 960px;} #prevNext img { z-index:1000; cursor:pointer} .jFlowPrev {height:50px; width:50px; position:absolute; float:left; top:175px; z-index:1000;} .jFlowNext {height:50px; width:50px; position:relative; float:right; top:175px; z-index:1000;} #content .info {width: 100%; float: left; margin-top: -20px;} #content .info .left-info {width: 660px; float: left;} #content .info .right-info {width: 294px; float: right; } #content .about h2 {display:none;} #content .about .me {float: left; position:relative; top:-20px;} #content .about .aboutme {font-style:italic; width: 70%; float: left; padding: 30px 10px 0;} #content .info-bottom {width:100%; float: left; position:relative;} #content .info-bottom h3 {font-weight:normal; font-size: 20px; float: left;} #content .info-bottom .recent {width:48%; float: left;} #content .info-bottom .twitter {width:50%; float: right; } #content .twitter .title {background:url(style/images/twitter_bubble.png) no-repeat top left; height: 38px; padding-left: 50px; line-height:25px;} #content .twitter .follow {color:#80807e; font-style:italic; float: left; font-size: 14px; padding:4px 0 0 10px; text-decoration: none;} #content .twitter a:hover {text-decoration: underline;} #content .twitter .twit {font-style:italic; float: left; font-size: 14px;padding-right: 10px; width: 100%;} #content .twitter .twittime {float: right; font-size: 12px;color:#80807e;padding-right: 10px;} #content .recent-gallery {float:left; width:100%; margin-top:8px;} #content .recent-gallery li {float:left; width:auto;margin-right:8px;} #content .recent-gallery a {float:left; padding:6px; background:white; display:block; height:56px; width:56px;} #content .recent-gallery a:hover {background:#58faa8;} #content .recent-gallery a {box-shadow: 1px 1px 3px #c9c7bd;-moz-box-shadow:1px 1px 3px #c9c7bd; -webkit-box-shadow:1px 1px 3px #c9c7bd; -moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;} #content .recent-gallery a:hover {box-shadow: 2px 2px 3px #aaa9a6;-moz-box-shadow:2px 2px 3px #aaa9a6; -webkit-box-shadow:2px 2px 3px #aaa9a6; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #content .recent-gallery img {border:1px solid #cecece;} #content .recent-gallery img:hover {border:1px solid white;} #content .test {background: url(style/images/test_mid.png) repeat-y;float: left; width:100%; height:auto; position:relative;} #content .test-top {background: url(style/images/test_top.png) no-repeat; height:10px;float: left;width:100%;} #content .test-bottom {background: url(style/images/test_bottom.png) no-repeat; height:38px;float: left;width:100%;} #content .test h2 {position:relative; top:-25px; left: 75px; } #content .test p {font-style:italic;} #content .test .quote {padding:20px 20px; float:left;} #content .test .name {padding:0 20px; float:left; width:254px; text-align:right;} #content .test .company {padding:0 20px 30px; float:left; font-size: 14px; color:#80807e;width:254px; text-align:right;} /* ------ contact page -------- */ .contact-info {width:100%; float: left; margin:20px 0 0 15px; } .contact-info .title {width:100%; float: left;} .find-info {width:100%; float: left; margin-top:10px;} .find-info ul {width:100%; float:left;margin:40px 0 0 18px; } .find-info li {width:62px;padding-right: 20px; float:left; } .contact-info p {width:100%; float: left; font-style:Italic; padding-top: 20px;} .contact-info input[type=text] {height: 20px;} .contact-info textarea {height:100px;} .contact-info input[type=text], .contact-info textarea {padding: 6px; border:4px solid #d5d5d5;background:white;} .contact-info input[type=text]:hover, .contact-info input[type=text]:focus, .contact-info textarea:hover, .contact-info textarea:focus {border:4px solid #58faa8;} .contact-info input[type=text], .contact-info textarea {-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .contact-info input[type=submit] {background:#c7c7c7 url(style/images/grey_bg.jpg) repeat-x top left; padding:6px 18px; color: white; font-weight:normal; font-size:16px; border:none;} .contact-info input[type=submit] {text-shadow:1px 1px 1px #909090;box-shadow: 1px 1px 1px #bdb9a2;-moz-box-shadow:1px 1px 1px #bdb9a2;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;} .contact-info input[type=submit]:hover {cursor:pointer;background:#58faa8 url(style/images/nav_bg.jpg) repeat-x top left;} .contact-info input[type=text], .contact-info textarea {font-family: Calibri, GillSans, Trebuchet, sans-serif; font-size: 18px;color: #4a4a48; width: 400px;} /* -------- bio style ---------*/ .bio {margin-top:20px; float: left;} .bio h3 {width:100%; float: left;font-weight:normal; font-size: 20px; padding:20px 0 10px;} .bio p {width:100%; float: left; font-style:italic; color:#80807E;} /* -------- portfolio style ---------*/ .portfolio-gallery {width: 100%; float:left;} .portfolio-gallery li {width: 200px; margin: 40px 40px 0 0; float: left;} .portfolio-gallery a {float:left; padding:6px; background:white; display:block; } .portfolio-gallery a:hover {background:#58faa8;} .portfolio-gallery a {box-shadow: 1px 1px 3px #c9c7bd;-moz-box-shadow:1px 1px 3px #c9c7bd; -webkit-box-shadow:1px 1px 3px #c9c7bd; -moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;} .portfolio-gallery a:hover {box-shadow: 2px 2px 3px #aaa9a6;-moz-box-shadow:2px 2px 3px #aaa9a6; -webkit-box-shadow:2px 2px 3px #aaa9a6; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} /* ------ footer styles ------- */ #footer p {font-size: 16px; font-style: italic; padding: 10px; margin-top:80px; float: right;} #footer p {text-shadow: 1px 1px white} #footer a {text-decoration:none;}