@import "reset.css";

.hide { display: none; }
.page-title { margin: 0 0 20px 0; }

#wrap { width: 960px; margin: 0 auto; padding-left: 250px; padding-right: 50px;}
body { font: normal 14px/1.618 arial, sans-serif;

       background-repeat:no-repeat;
       }
h1, h2, h3, h4, h5, h6 { margin: 0px 0 0 0; }
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; font-family: 'Roboto', sans-serif;}
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { margin: 0 0 15px 0; }
a { text-decoration: none; color: #ff2f92;}
a:hover { color: #ffffff; background-color: #555555}
em { font-style: italic; }
ul { margin: 0 0 15px 15px; list-style-type: circle; }
ol { margin: 15px 0 15px 20px; list-style-type: decimal; }
strong, b { font-weight: bold; }
blockquote { margin: 20px 40px; padding: 10px; background-color: #eee; border: 1px #ddd solid; }

#main-logo {position: absolute; left: -18em ; top: -5em; z-index:-10;}
#overtone-text {position: relative; left: -31px ; top: 0px; z-index:-1;}

.line { clear: both; border-bottom: 1px #ccc dotted; }
.post-line { clear: both; border-bottom: 1px #ccc dotted; margin-bottom: 50px; padding-top: 42px; }

#top-banner { height: 5px; background-color: #3c3a33; padding-left: 250px;}

#header { padding: 50px 0 0 0; }
#header img { float: left; }

#nav { float: left;  width: 960px; padding: 80px  0px 0px;  position: relative; list-style: none; margin: 20px 0 0 0; z-index: 0; }
#nav a { float: left; display: block; font: normal 18px Arial, sans-serif; color: #555555; }
#nav li a:hover { background-color: #555555; color: #ffffff }
#nav li { float: left; position: relative; }
#nav li span { float: left; padding: 0 20px; font-size: 18px; color: #555; margin-top: -3px }
#nav-item-last span { display: none; }
#nav li:hover > ul { display: block; }
#nav ul { background: #EEEEEE; display: none; margin: 0; padding: 0; width: 230px; position: absolute; top: 20px; left: 0px; border: solid 1px #ddd; list-style: none; }
#nav ul a:hover { background-color: #555555; color: #ffffff; }
#nav ul li { float: none; margin: 0; padding: 0; }
#nav ul a { padding: 8px 10px; color: #444444; font-size: 16px; float: none; }
#nav ul span { display: none; }
#nav ul ul { left: 230px; top: -1px; }
#nav li.current a { color: #0B79A3; }
#nav li.current li a { color: #444444; }
#nav li.current li a:hover { color: #ffffff; }
#nav ul li.current a:hover { color: #ffffff; }

#featured-section { clear: both; padding: 30px 0 10px 0; overflow: hidden; width: 100%; }
#featured-section h3 { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 40px; letter-spacing: -1px; color: #444444; margin-bottom: 5px; }
#featured-section h4 { font-family: 'Roboto', sans-serif; font-size:2.5em; color:#3c3a33;}
#featured-section-img { float: left;}
#featured-section-details { clear: none;  width: 950px; }
#featured-section-details p { font: normal 18px/1.618 Arial, sans-serif; margin: 13px 0 23px 0; color: #555; }


#latest-projects { clear: both; padding: 0px 0 0px 0; overflow: hidden; margin-left: -5px; }
#latest-projects h3 { margin-bottom: 30px; margin-left: 5px; }
.latest-project { float: left; margin: 0 0 0px 55px; width: 282px; }
.latest-project .post-image { width: 280px; height: 190px; -webkit-box-shadow: 0px 0 10px #aaa; -moz-box-shadow: 0px 0 10px #aaa; box-shadow: 0px 0 10px #aaa; }
.latest-project p { margin-bottom: 0; }
.first-latest-project { margin-left: 5px; }

#overview { clear: both; padding: 0px 0 40px 0; overflow: hidden; }
.overview-block { float: left; width: 280px; margin-left: 60px; }
.overview-block p { font-size: 1em; padding-top: 10px;}
.first { margin-left: 0; }

#main { float: left; width: 100%; margin: 50px 0 60px 0; }
#content { float: left; width: 500px; }

.blog-title { margin-bottom: 40px; }
.post .post-title { font-size: 26px; line-height: 32px; padding: 0; margin: 0 0 -4px 0; }
.post-meta, .post-meta a { font-size: 20px; line-height: 32px; color: #888; padding: 0 0 20px 0; margin: 0 0 0 0; }
.post .more-link { display: block; margin-top: 10px; }
.post .more-link:hover { color: #222; }
.post-image { float: left; width: 125px; height: 125px; border: 1px #ddd solid; margin: 5px 20px 20px 0; }

#sidebar { float: right; width: 280px; padding: 20px 20px 5px 20px; margin: 5px 0 0 0; background: #f5f5f5; font-size: 12px; border: 1px #e5e5e5 solid; }
#sidebar h3 { font-size: 20px; margin: 0 0 5px 0; padding: 0; }
#sidebar p { font-size: 12px; line-height: 20px; }
#sidebar ul, sidebar li { margin-left: 16px; }
.sidebar-contact-title { margin-bottom: -2px; font-weight: bold; }

#footer { float: left; padding: 10px 0 30px 0; width: 100%; color: #888; }
#footer p { font-size: 12px; }
.copyright{ float: left; }
.social { float: right; }