@charset "utf-8";

/**********==========
Authour :: Ben King, http://webkingdesign.com
Version 1.0 :: July 2010
==========**********/

/*========== CSS Structure
1. reset
2. html5 tags
3. global text and link styles
4. main layout styles
5. global CSS3 styles
6. global form styles
7. pages
8. print styles

/*========== 1. reset ==========*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, figcaption, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0; 
padding:0; 
border:0; 
outline:0; 
font-size:100%; 
vertical-align:baseline; 
background:transparent;
}
html { overflow-y:scroll; }
html a { outline:0; }
html:focus { outline:0; }
ul, li { list-style:none; }
img, img a { border:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse; border-spacing:0; }
.hide { display:none; visibility:hidden; }
.invisible { visibility:hidden; }
.wrap-l{float:left;}
.wrap-r{float:right;}


/*========== 2. html5 tags ==========*/
header, section, footer, aside, nav, article, figure, figcaption, hgroup, canvas { display:block; }

/*========== 3. global text and link styles ==========*/
html {-webkit-font-smoothing:antialiased;}
mark {background:#ff9; color:#000; font-style:italic; font-weight:bold;}
time { color:#903}
a:link {-webkit-tap-highlight-color: none;}
::-moz-selection{background:#BF4800; color:#fff; text-shadow:none;}
::selection {background:#BF4800; color:#fff; text-shadow:none;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
pre {padding:10px; white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
h1, h2, h3, h4, h5, h6, .button{ margin:0; font-weight:normal; font-style:normal; line-height:normal; font-family: 'DistrictThinRegular', sans-serif;}
h2{font-size:2.8em; color:#000;}
h3{font-size:2.2em; color:#BF4800; margin:20px 0 0 0;}
p{font-size:1.6em; margin-bottom:1.0em;}
figcaption{font-size:1.4em;}
a{text-decoration:underline; color:#c57a00;}
a:hover{text-decoration:underline; color:#600;}
.blockquote{padding:10px; background:#fff; margin:20px 0 20px 0; -moz-box-shadow:1px 1px 2px #999; -webkit-box-shadow:1px 1px 2px #999; box-shadow:1px 1px 2px #999;}
.button, .button a{width:130px; height:48px; background:url(../images/button.png) no-repeat 0 0; display:block; color:#fff; font-size:1.4em; text-decoration:none; padding:5px 0 0 15px;}
a:hover.button{text-decoration:none; color:#F60; background:url(../images/button.png) no-repeat 0 -53px;}
.button2, .button2 a{background:#101111 url(../images/eye.png) no-repeat top right; color:#fff; font-size:2.2em; border: solid 1px #333; padding:7px 50px 7px 10px; margin:17px 0 17px 0; text-decoration:none; display:block;}
a:hover.button2{background:#333 url(../images/eye.png) no-repeat top right; color:#fff; border: solid 1px #000; text-decoration:none;}
@font-face {
font-family:'DistrictThinRegular';
src:url('../fonts/distth___-webfont.eot');
src:local('?'), url('../fonts/distth___-webfont.woff') format('woff'), url('../fonts/distth___-webfont.ttf') format('truetype'), url('../fonts/distth___-webfont.svg#webfont6zzfnRmc') format('svg');
font-weight:normal;
font-style:normal;
}
.emph{font-weight:900; padding:5px; background:#600; color:#fff; text-align:center;}

/*========== 4. main layout styles ==========*/
body{margin:0; padding:0; font:62.5% Georgia, "Times New Roman", Times, serif; color:#232627;}
#bg1{background:#f1f1f1 url(../images/body-bg.png) top repeat-x}
#bg2{background:#f1f1f1 url(../images/body-bg2.png) top repeat-x}
#bg3{background:#f1f1f1 url(../images/body-bg3.png) top repeat-x}

/*===== containers =====*/
#sitewrap{width:990px; margin:0 auto; position:relative;}
.container{width:990px; position:relative; z-index:1; background:url(../images/content-shadow.png) no-repeat top center; *background:none; float:left;}
.container-inner{width:908px; background:#fff url(../images/inner-bg.png) top repeat-x;  margin:25px 0 25px 0; border:solid 1px #d0d6dc; position:relative; z-index:1; float:left; padding:40px; min-height:830px;}
.container-inner h1{font-size:3.6em; color:#000;}
.container-inner ul{padding:10px 0 20px 28px;}
.container-inner li{font-size:1.4em; line-height:1.8em; list-style-image:url(../images/li.png); list-style-position:outside;}
.container-inner li span{color:#999;}

/*===== header =====*/
#top{width:990px; height:169px; background:url(../images/header-bg.png) top left no-repeat; position:relative;}
#free-quote, #free-quote a{width:203px; height:57px; position:absolute; bottom:-15px; right:0; display:block; background:url(../images/free-quote.png) no-repeat 0 0; z-index:2;}
a:hover#free-quote{background:url(../images/free-quote.png) no-repeat 0 -57px;}
#facebook-like-page{width:120px; text-align:right; position:absolute; top:23px; right:0;}

/*===== site title / logo =====*/
.logo, .logo a{width:444px; height:167px; display:block; background:url(../images/logo.png) left top no-repeat;}
a:hover.logo{}

/*===== main navigation =====*/
#navigation{width:500px; height:48px; float:right; margin-top:60px;}
#navigation li{float:left; margin:0 5px;}
#navigation li a{color:#232627; font-size:1.5em; text-decoration:none; text-transform:uppercase; font-weight:700; float:left; padding:15px 10px 15px 10px; text-shadow:1px 1px 1px #fff; height:18px; font-family:Arial, Helvetica, sans-serif;}
#navigation li a:hover, #navigation li.menuactive a{padding:15px 10px 15px 10px; background:#101111; color:#fff; text-shadow:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:1px 1px 6px #666; -webkit-box-shadow:1px 1px 6px #666; box-shadow:1px 1px 6px #666; background:url(../images/menu-bg-left.png) no-repeat left, url(../images/menu-bg-right.png) no-repeat right;}

/*===== content divs =====*/
.content-full{width:990px; float:left;}
.sidebar{width:200px; float:left;}
.content-right{width:790px; float:left;}

/*===== inner pages global =====*/
.snippets-img{margin:10px; background:#d1d8dd; padding:3px; border:solid 1px #fff;}
.side-img{border:solid 1px #fff;}
.side-img-outer{background:#d1d8dd; padding:3px; border:solid 1px #ccc; margin-bottom:10px; height:211px;}
.side-img-outer figcaption{margin:1.0em 0 1.5em 0; border-bottom:solid 1px #CCC; padding-bottom:1.0em; float:left;}
#snippets{width:345px; height:330px; position:absolute; bottom:-1px; right:-1px; background:#f1f1f1 url(../images/snippets-line-bottom.jpg) no-repeat bottom; border-bottom:solid 1px #f1f1f1; border-right:solid 1px #f1f1f1; border-top:solid 1px #d0d6dc; border-left:solid 1px #d0d6dc; text-align:center; padding:15px 10px 0 15px; -webkit-border-top-left-radius:4px;-khtml-border-radius-topleft:4px; -moz-border-radius-topleft:4px; border-top-left-radius:4px;}
#inner-left{float:left; width:540px;}
#inner-left figure{margin:0; border:solid 1px #ccc;}
#inner-left img{border:solid 1px #fff; padding:5px; background:#CCC; display:block; }
#inner-left figcaption{padding:10px; background:#ddd; border-left:solid 1px #fff; border-top:solid 1px #fff; border-right:solid 1px #fff; border-bottom:solid 1px #ccc; }
#inner-left h1{font-size:3.6em; width:542px; height:74px; background:url(../images/big-title-bg.png) no-repeat; color:#f1f1f1; text-align:center; padding:11px 0 0 0;}
.inner-right{width:330px; float:right;}
.inner-right h2{margin-bottom:0.4em;}
.inner-right form{padding-bottom:10px; margin-bottom:10px;}
.inner-right input{padding:4px; font-size:1.2em; width:200px; background:#eaedf0; border:solid 1px #d0d6dc; color:#000; outline:0; margin-top:5px; -moz-border-radius:4px;-webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;}
.inner-right input:focus{background:#d0d6dc; color:#000; border:solid 1px #bbc4cc;}
.social{background: #fff; padding:10px; float:left; border:solid 1px #f3f3f3;}
.fb-share{float:left; margin:0 10px 0 0;}
.tweet-this{width:95px; height:18px; background:url(../images/tweet-this.png); float:left; }

/*===== footer =====*/
#footer-container{background:url(../images/footer-bg.png) top repeat-x; height:202px; width:100%; float:left; position:relative;}
#footer{width:990px; margin:0 auto; height:202px;}
#footer-holder{background:url(../images/footer-bg2.png) no-repeat right top; position:absolute; top:-19px; height:221px; width:990px;}
#footer-holder ul{position:absolute; right:20px; width:153px; height:39px; background:url(../images/connect-with-me-bg.png) no-repeat; top:50px; padding:12px 0 0 155px;}
#footer-holder li{float:left; margin:3px 5px 3px 5px;}
#footer-holder li a{float:left;}
li#facebook a{background:url(../images/facebook_icon.png) no-repeat; width:22px; height:22px;}
li#twitter a{background:url(../images/twitter_icon.png) no-repeat; width:22px; height:22px;}
li#linkedin a{background:url(../images/linkedin_icon.png) no-repeat; width:22px; height:22px;}
li#paypal a{background:url(../images/paypal_icon.png) no-repeat; width:35px; height:22px;}
#copyright{width:225px; height:106px; background:url(../images/copyright.png) no-repeat; text-align:center; position:absolute; top:95px; left:0;}
#copyright p{color:#d9dde2; font-size:1.3em; padding-top:75px;}
#footer-links{width:600px; position:absolute; right:0; bottom:30px; text-align:right;}
#footer-links p{font-size:1.5em;}
#footer-links a{color:#fff; text-decoration:none; margin:0 10px 0 10px;}
#footer-links a:hover{text-decoration:underline; color:#c57a00;}

/*========== 5. global CSS3 styles ==========*/
.border-radius{-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.box-shadow{-moz-box-shadow:0px 6px 9px #999; -webkit-box-shadow:0px 6px 9px #999; box-shadow:0px 6px 9px #999;}

/*========== 6. global forms styles ==========*/	
input, textarea, select{padding:7px; font-size:1.2em; width:360px; background:#eaedf0; border:solid 1px #d0d6dc; color:#000; outline:0; margin-top:13px; -moz-border-radius:4px;-webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; font-family:Georgia, "Times New Roman", Times, serif;}
select{width:375px;}
input:focus, textarea:focus, select:focus{background:#d0d6dc; color:#000; border:solid 1px #bbc4cc; outline:0;}
label{color:#000; width:145px; float:left; font-size:1.0em; margin-top:19px;}
textarea{width:360px; height:150px;}
.submit{background:#101111; color:#fff; width:auto; cursor:pointer; outline:0; border:solid 1px #000; padding:7px;}
.submit:hover{background:#333; color:#fff; cursor:pointer; border:solid 1px #000;}
span.required{color:#F60;}
#message{margin:10px 0; padding:0;}
.error_message{display:block; height:22px; line-height:22px; background: #FFE9D2 url(../js/assets/error.gif) no-repeat 10px center; padding:3px 10px 3px 35px; color:#000;
border: 1px solid #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; font-size:1.2em; width:475px;}
.loader{padding:0 10px; float:right; }
#success_page h2{background:#ECFFEC url(../js/assets/success.gif) no-repeat 500px 15px; width:518px; padding:10px; margin-bottom:10px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; border:solid 1px #DFD;}

/*========== 7. pages ==========*/

/*===== home =====*/
#scroller-holder{width:990px; height:405px; background:url(../images/scroller-bg.png) left top no-repeat; margin-top:22px; float:left; position:relative;}
.slideshow-img{position:absolute; left:22px; top:21px; z-index:3; width:941px; height:301px; background:#101111;}
#latest-work-spider{width:621px; height:169px; position:absolute; right:0; bottom:-34px; background:url(../images/latest-work-spider.png) no-repeat; z-index:4;}
#scroller-nav{width:220px; height:31px; position:absolute; bottom:38px; left:30px; background:url(../images/scroller-nav-default.jpg) no-repeat;}
#intro{width:311px; padding:0 19px 0 0; float:left; margin-top:50px;}
#intro h1{padding:15px 0 0 0; color:#fff; background:#101111 url(../images/title-bg.png) no-repeat; text-align:center; font-size:2.2em; height:40px; margin-bottom:20px;}
.mini{padding:2px; background:#fff; border:solid 1px #d9dde3;}
#mini-1{margin:0 19px 0 0;}
#mini-2{margin:0;}
#thebuzz{width:316px; padding:0 19px 0 15px; float:left; margin-top:50px;}
#thebuzz h2{padding:8px 0px 10px 70px; color:#000; font-size:3.6em; background:url(../images/thebuzz.png) no-repeat left;}
#thebuzz div{padding:10px 10px 0px 10px; background:#eaedf0; float:left; margin:7px 0 7px 0; width:296px;}
#thebuzz div:hover{background:#fff;}
#thebuzz div.last{margin-bottom:15px;}
#tweets{width:300px; float:left; margin-top:50px; padding:0px 0px 0px 10px;}
#tweets h3{padding:8px 0px 15px 70px; margin:0; color:#000; font-size:3.6em; background:url(../images/tweets.png) no-repeat left;}
#twitter_update_list li{font-size:1.6em; color:#232627; padding:5px 0 25px 10px; background:url(../images/tweet_bg_line.png) bottom repeat-x;}
#twitter_update_list a{color:#c57a00;}
#twitter_update_list a:hover{color:#600;}
#twitter_update_list li:last-child{margin-bottom:10px;}

/*===== testimonials =====*/
.testi-post article{padding:20px; background:#f1f1f1; border:solid 1px #F9F9F9; float:left; margin:20px 0 20px 0; width:866px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.testi-post article:hover{background:#ddd;}
.testi-post article figure{float:right; width:262px; margin:0 0 0 20px;}
.testi-post article img{margin-bottom:20px; border:solid 1px #fff;}
#place-testi{position:absolute; top:62px; right:41px;}

/*===== blog =====*/
.blog-post article{padding:20px; background:#f1f1f1; border:solid 1px #F9F9F9; float:left; margin:20px 0 20px 0; width:498px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.blog-post article header span{float:right; font-size:1.2em; font-style:italic;}
.blog-social{background: #fff; padding:10px; float:left; border:solid 1px #ccc; margin:15px 0 15px 0; width:478px;}

/*===== portfolio =====*/
.portfolio-landing figure{margin:0px; border:solid 1px #ccc; width:225px; float:left;}
.portfolio-landing img{border:solid 1px #fff; padding:5px; background:#CCC; display:block;}
.portfolio-landing img:hover{filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
#gallerymode, #gallerymode a{width:148px; height:148px; position:absolute; right:-1px; top:-1px; background:url(../images/gallerymode.png) 0 0;}
a:hover#gallerymode{background:url(../images/gallerymode.png) 0 148px;}

.portfolio article{padding:20px; background:#f1f1f1; border:solid 1px #F9F9F9; float:left; margin:20px 0 20px 0; width:866px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.portfolio article header{padding:0 0 10px 0;}
.portfolio article header span{float:right; font-size:1.2em; font-style:italic; padding:10px 0 0 0; text-transform:uppercase;}
.portfolio article:hover{background:#ddd;}
.portfolio article img{ margin:0; border:solid 1px #fff;}
.portfolio article img:hover{filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
.portfolio article figure{float:right; width:866px; margin:0;}
.portfolio article figure a{text-decoration:none;}
.portfolio article h2{margin:0 0 0.3em 0; font-size:1.4em; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; text-transform:uppercase;}
.portfolio article h3{float:right; margin:0;}

/*==== image hover ====*/
.viewport{float:left; overflow:hidden; position:relative; width:213px;}
.viewport a{display:block; position:relative;}
.viewport a img{position:relative; width:213px;}
.viewport a span{display:none; position: absolute; width: 100%; height: 100%; z-index: 100;}
.viewport a span em{display:block;}
.dark-background{background:rgba(15, 15, 15, 0.6) url(../images/magni.png) no-repeat 60px 30px;}

.viewport-2{float:left; overflow:hidden; position:relative; width:864px; height:590px; padding-bottom:20px;}
.viewport-2 a{display:block; position:relative;}
.viewport-2 a img{position:relative; width:864px;}
.viewport-2 a span{display:none; position: absolute; width: 100%; height: 100%; z-index: 100;}
.viewport-2 a span em{display:block;}
.dark-background-2{background:rgba(15, 15, 15, 0.6) url(../images/external.png) no-repeat 700px 30px;}

/*========== 8. print styles ==========*/
@media print {
* { background:transparent !important; color:#444 !important; text-shadow:none; }
a, a:visited { color:#444 !important; text-decoration:underline; }
a:after { content:" (" attr(href) ")"; } 
abbr:after { content:" (" attr(title) ")"; }
blockquote { border:1px solid #999; page-break-inside:avoid; }
img { page-break-inside:avoid; }
@page { margin:0.5cm; }
p, h2, h3 { orphans:3; widows:3; }
h2, h3{ page-break-after:avoid; }
}
/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) */
@media screen and (max-device-width: 480px) {
/* Prevent iOS, WinMobile from adjusting font size */
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}