/* ---------------- MAIN  ---------------- */

body {font: 62.5%/1.4em Helvetica, Arial, Sans-Serif; color: #4C4C4C; background: #F4F2ED url(../images/body-bg.png) repeat-x fixed top left; padding: 0; margin: 8px 0 0 0;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { display:inline-block;}
/* Hide from IE Mac \*/
.clearfix { display:block;}
/* End hide from IE Mac */

p { margin: 0 0 15px 0;}
a { font-weight: bold; text-decoration: none; color: #191919; outline: none; -webkit-transition: all 300ms; -moz-transform: all 300ms;} 
a:hover { text-decoration: underline; -webkit-transition: all 300ms; -moz-transform: all 300ms; color: #777;}
a img {border:none; color: #fff;}


/* ---------------- BASIC STRUCTURE ---------------- */

#wrap { margin: 0 auto; width: 940px; text-align: left; position: relative; font-size: 1.3em; line-height: 1.4em;}



/* ---------------- CONTENT ---------------- */

#content { float: right; width: 940px; margin: 53px 0 20px 0; padding: 135px 0 0 0;}
#page-about #content {width: 940px; float: right;}
h2 { display: block; margin: 0 0 20px 0; background: url(../images/heading-bg.png) repeat-x bottom left; padding-bottom: 20px; font-size: 2.5em; letter-spacing: -1px; color: #333333;}
#content h2 { width: 740px; margin: 0 0 20px 0; background: url(../images/heading-bg.png) repeat-x bottom left; padding-bottom: 20px;}

h3 { margin: 0 0 20px 0; font-size: 2.31em; letter-spacing: -1px; font-weight: bold;background: url(../images/heading-bg.png) repeat-x bottom left; padding-bottom: 30px; color: #333;}
.blog-item h3 {margin-top: 30px;}
h4 { font-size: 1.08em;}

#content-bottom {float:right; clear:both;}
#content #about, #content #blog, #content #contact { width: 640px; float: right;}



/* ---------------- SIDEBAR ---------------- */

#header { position: fixed; height: 190px; z-index: 200000;}
.branding { margin: -8px 0 33px 0; position: relative; z-index: 100000; border-top: 5px solid #F4F2ED;}
p.branding a { color: #fff; display: block; width: 280px; height: 185px; background: url(../images/logo.png) no-repeat 0px 0px; text-indent: -9999px;}
p.branding a:hover { border: none;}
.standfirst { font-size: 1.2em; text-shadow: rgb(255, 255,255) 1px 1px 1px;}
/*#sidebar ul { margin: 10px 0 0 0;}
#sidebar h4 { font-weight: bold;}*/

#page-about #sidebar{ height: 180px;}
.about-bar .branding { margin-bottom: 115px;}
#mugshot { background: #E9E7E1; padding: 0 0 0 10px; margin: 105px 0 30px 0; width: 270px; float: left;}
#mugshot img { float: right;}
#mugshot p { float: left; padding-top: 165px; margin: 0; text-shadow: rgb(255, 255,255) 1px 1px 1px;}

.col1 ul { margin: 20px 0 0 0; padding: 0; list-style-type: none; }
.col1 ul li { padding-left: 20px; background: url(../images/bullet.png) no-repeat center left; margin: 0 0 5px 0;}

#client-list { margin: 0; padding: 0; list-style-type: none; font-size: 1.08em;}
#client-list li { padding-left: 20px; background: url(../images/bullet.png) no-repeat center left; margin: 0 0 5px 0;}



/* ---------------- PORTFOLIO ITEMS ---------------- */

#portfolio { width: 640px; float: right;}
.portfolio-item { width: 200px; float: left; display: block; margin: 0 20px 17px 0; position: relative;}
#home .portfolio-item { margin: 0 0 0 0;}
.portfolio-item a:hover { border: none; background: none;}
#page-home .portfolio-item { margin-bottom: 0;}
.last { margin: 0;}
.portfolio-item img {border: none; margin: 0 0 10px 0;}
.portfolio-item h4 {margin: 0 0 5px 0;}
.portfolio-detail img { float: left;}
.portfolio-detail-item { float: right; width: 200px;}
.portfolio-detail-item h3 { background: none; border-bottom: 5px solid #E9E7E1; margin: 0px 0 20px 0; padding-bottom: 20px; line-height: 1.2em;}
.portfolio-detail .portfolio-detail-item .more {float:none;}
#services { margin: 20px 0 0 0; background: #fff; padding: 10px; clear:both;}
#services h4 { margin: 0 0 10px 0; text-transform: uppercase; color: #333;}
#services p { margin: 0;}


/* ---------------- NAVIGATION ---------------- */

#nav { padding: 0 0 0 155px; margin: 0 0 0 0; position: absolute; top: -8px; left:280px; background: #fff url(../images/body-bg.png) repeat-x; height: 62px; z-index: 100; width: 505px; float: right; text-transform: uppercase; letter-spacing: 0px; font-size: 0.92em; text-transform: uppercase;}
#nav li { display: inline;}
#nav li a { padding: 20px 0px 10px 10px; height: 20px; width: 90px; display: block; float: left; background: #F4F2ED; margin: 10px 1px 0 0; color: #1B1B1B;-webkit-transition: all 500ms; -moz-transform: all 500ms; }
#nav #selected a, #nav a:hover {-webkit-transition: all 500ms; -moz-transform: all 500ms; background: #E9E7E1 url(../images/nav-item-bg.png) repeat-x bottom left; padding-top: 20px; height: 20px; color: #000; text-decoration: none; text-shadow: rgb(255, 255,255) 1px 1px 1px;}
#nav .last a { margin-right: 0!important;}
#nav a:active {background: #FFF; color: #1d1d1d;}


/* ---------------- CONTENT BOTTOM ---------------- */

#content-bottom { width: 940px;clear:both; margin-bottom: 30px;}
.col1 { width: 280px; float: left; margin: 0 20px 0 0;position: relative; z-index: 10001;}
.col2, .col3 { width: 310px; float: left;}
.col2 { margin-right: 20px;}
.col2 ul { margin: 0; padding: 0;list-style-type: none;}
.col2 h4 { margin: 20px 0 0 0;}

.col3 img { padding: 10px 0; background: #E9E7E1;}

#contact-details { list-style-type: none; padding: 0; margin: 20px 0 0 0;}
#contact-details li { list-style-type: none; margin: 0 0 5px 0;}
#contact-details span { display: block; float: left; width: 100px; font-weight: bold;}


/* ---------------- BLOG ---------------- */

.blog-item { margin: 0 0 30px 0; border-bottom: 5px solid #E9E7E1; padding-bottom: 20px;}
.more { float: right; padding-left: 15px; background: url(../images/bullet.png) no-repeat center left;}
.link { padding-bottom: 0;}
#content blockquote {font-size: 1.2em; font-family: Georgia, Serif; line-height: 1.4em; font-style: italic;}
.pagination {border-bottom: 5px solid #E9E7E1; background: #FFF; padding: 5px 10px;}
.pagination a {padding: 7px 5px;}
.pagination a:hover {background: #F4F2ED; text-decoration: none;}
.pagination span {padding: 7px 5px; background: #E9E7E1;}


/* ---------------- CONTACT FORM ---------------- */

#contactForm {}
#contactForm * {vertical-align: middle;}
#contactForm label {font-size: 1.08em; font-weight: bold; margin: 0 0 10px 0;}
#contactForm input {width:250px; border: 1px solid #CCC; padding: 7px 3px 3px 3px; height: 20px; font-size: 1.08em; color: #4C4C4C;}
#contactForm textarea {width: 540px; border: 1px solid #CCC; padding: 3px; font-family: Helvetica, Arial, Sans-Serif; padding: 7px 3px 3px 3px; height: 120px; color: #4C4C4C}
#contactForm button {cursor:pointer; width: 140px; height: 30px; text-indent: -9999px; background: url(../images/send.png) no-repeat top left; border: none;}


/* ---------------- FOOTER ---------------- */

#footer { clear: both; margin: 20px 0 0 0; font-size: 11px; border-top: 5px solid #E9E7E1; padding: 20px 0; background: #fff; border-bottom: 5px solid #1D1D1D;}
#footer ul { margin: 0; padding: 0 0 8px 0; text-align: center; border-bottom: 1px solid #E9E7E1;}
#footer ul li { margin: 0; padding: 0; display: inline; margin: 0 10px 0 0;}
#footer p { text-align: center; margin: 10px 0 0 0;}


/* ---------------- Headings ---------------- */

#content h2.about {background: url(../images/h2-about.png) no-repeat top left; height: 49px; text-indent: -9999px; padding: 0; margin-top: 22px;}
#portfolio h1 { margin: 0 0 20px 0; background: url(../images/h2-featured-work.png) no-repeat top left; height: 71px; text-indent: -9999px; padding-bottom: 0;}
#about h1 { margin: 0 0 30px 0; background: url(../images/h2-about-dan.png) no-repeat top left; height: 71px; text-indent: -9999px; padding-bottom: 0;}
#contact h1 { margin: 0 0 30px 0; background: url(../images/h2-contact.png) no-repeat top left; height: 71px; text-indent: -9999px; padding-bottom: 0;}
#blog h1 {margin: 0 0 30px 0; background: url(../images/h2-latest-blog.png) no-repeat top left; height: 71px; text-indent: -9999px; padding-bottom: 0;}
#content h2.selected-work { background: url(../images/h2-selected-work.png) no-repeat top left; height: 50px; text-indent: -9999px; padding: 0; margin-top: 22px;}

h3.categories, h3.chums, h3.contact {margin: 24px 0 0 0;}
#blog h2 {background: none; padding: 0; margin-bottom: 0px;}
.link h2 {font-size: 1.5em;}
.link h2 a {background: url(../images/link-bg.png) no-repeat center left; padding-left: 25px;}
.link h4 {font-size: 1.0em;}
.blog-item h4 {border-bottom: 1px solid #E9E7E1; padding-bottom: 5px; margin: 10px 0 20px 0;}