/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
html {background:url(images/bgd_body.png) top center no-repeat #3e3e3e;}
body {font:12px/1.5 verdana,arial,helvetica,sans-serif; color:#565656;}
a:link, a:visited{text-decoration:none; color:#21A4F4;}
p{margin-bottom:10px;}
ul{padding-bottom:5px;}
li{list-style:none; margin-bottom:5px; background:url(images/li_normal.png) left center no-repeat; padding-left:15px; font-size:12px;}
h4{font-size:15px; margin-bottom:5px; font-weight:normal; color:#af3100;}
h5{font-size:13px; font-weight:normal;}
strong{color:#ce5700; font-weight:normal;}
.hr{background:url(images/bg_hr.png) 0 0 no-repeat; height:3px; overflow:hidden;}
.code{font-family:monospace; color:#53289a; font-size:12px;}
.rating_wrapper{margin-bottom:15px;}
.vcard *{display:none;}
.vcard p{display:block;}
.vcard p a{display:inline;}
#header_wrapper {height:46px; background:url(images/tint.png) 0 0 repeat; margin-bottom:16px; min-width:946px;}
#header{padding:6px 8px 0px 8px; width:890px; margin:auto;}
#logo{background:url(images/gears.gif) top left no-repeat; height:30px; padding-left:30px; width:150px; display:block; text-indent:-9999px; float:left;}
#logo a{background:url(images/logo_color_powered.png) top left no-repeat; display:block; height:30px;}
#header ul{float:right; margin-top:10px;}
#header li{float:left; background:url(images/li_nav.png) 0 2px no-repeat; padding:0 0 0 9px; margin:0 0 0 7px;}
#header li a{background:url(images/nav.png) 0 0 no-repeat; text-indent:-9999px; display:block; width:100px; height:13px; overflow:hidden;}
#header #nav_home a{width:32px; background-position:0 0px;}
#header #nav_web a{width:65px; background-position:-34px 0px;}
#header #nav_illustration a{width:143px; background-position:-102px 0px;}
#header #nav_approach a{width:80px; background-position:-248px 0px;}
#header #nav_about a{width:36px; background-position:-331px 0px;}
#header #nav_contact a{width:50px; background-position:-369px 0px;}
#header #nav_apps a{width:100px; background-position:-422px 0px;}
#header #nav_home a:hover{background-position:0 -10px;}
#header #nav_web a:hover{background-position:-34px -10px;}
#header #nav_illustration a:hover{background-position:-102px -10px;}
#header #nav_approach a:hover{background-position:-248px -10px;}
#header #nav_about a:hover{background-position:-331px -10px;}
#header #nav_contact a:hover{background-position:-369px -10px;}
#header #nav_apps a:hover{background-position:-422px -10px;}
#header .first{margin:0; padding:0; background:none;}
#content_wrapper {padding:8px; background:url(images/tint.png) 0 0 repeat; width:930px; margin:auto;}
#content {background:url(images/bg_content.png) 0 0 repeat-y #fff; overflow:hidden; padding:60px 15px 15px 15px; position:relative;}
#footer {padding:6px 20px 1px 20px;}
#footer p{color:#999; text-align:right; margin:0;}
#footer a:link, #footer a:visited{color:#fff;}
/* HOME PAGE */
#page_home #content{padding-top:185px; background:url(images/we_build.png) 0 0 no-repeat #fff;}
p#we_build{position:absolute; text-indent:-9999px; width:0;}
#page_home h1{float:left; position:absolute; width:0;}
.home_callout{width:278px; float:left;}
.home_callout p{clear:both;margin-bottom:10px;}
.home_callout h2{height:19px; text-indent:-9999px; margin-bottom:5px;}
.home_callout img{border:1px solid #d7d7d7; width:274px; height:85px; margin-bottom:5px;}
#home_web{margin-right:23px; margin-left:10px; display:inline;}
#home_branding{margin-right:23px;}
#home_web h2{background:url(images/h2_home_web.png) 0 0 no-repeat;}
#home_branding h2{background:url(images/h2_home_branding.png) 0 0 no-repeat;}
#home_analysis h2{background:url(images/h2_home_analysis.png) 0 0 no-repeat;}
#home_web li{font-size:11px; padding-left:10px; background:url(images/li_small.png) 0 5px no-repeat;}
.title{height:27px; padding:4px 15px 0 15px; position:absolute; top:0; left:0; width:100%; overflow:hidden;}
.current{cursor:inherit;}
.section{margin-bottom:20px; overflow:auto; height:1%;}
.info{float:right; width:590px;}
.callout{float:left; width:280px;}
.callout h2{font-size:19px;}
.comment{background:url(images/bg_comment.png) right bottom no-repeat #e3e3e3; color:#666; padding:6px; font-size:12px;}
.quote{background:url(images/bg_quote.png) 0 0 no-repeat; padding:5px 5px 20px 40px;}
.statement{background:#e3e3e3; padding:15px;}
.goal1{background:url(images/num1_goal.png) 0 4px no-repeat; padding-left:30px; margin-bottom:7px;}
.goal2{background:url(images/num2_goal.png) 0 4px no-repeat; padding-left:30px; margin-bottom:7px;}
.box{background:url(images/bg_box.png) 0 0 no-repeat; width:298px; height:85px; margin-left:-8px; margin-top:-7px; margin-bottom:5px; position:relative;}
.box h3{position:absolute; top:25px; left:24px; width:255px;}
.box .numbernav{position:absolute; top:48px; left:89px; width:150px;}
.box .examples{position:absolute; top:49px; left:24px; width:150px;}
#download{background:url(images/bg_download.png) 0 0px no-repeat;}
#download.hover{background-position:0 -91px;}
#download h3{left:72px; width:100px;}
.download_links{position:absolute; top:49px; left:72px; width:210px;}
table{background:#fff;border-collapse: collapse; margin-top:15px; margin-bottom:10px; width:588px;}
th{text-align:left; background:#404046; color:#fff; font-weight:normal;}
th,td{vertical-align:top; padding:5px 0px 5px 8px;}
#default{width:65px;}
#key{width:95px;}
th{border:1px solid #404046; border-bottom:none;}
td{border:1px solid #E3E3E3;}
tr{padding-right:15px;}
h1,h2,h3{text-indent:-9999px;}
h1{color:#fff; background:url(images/h.page.png) 0 0 no-repeat; height:25px; width:224px; margin-top:1px;}
#page_web h1{background-position:0 0;}
#page_apps h1{background-position:0 -25px;}
#page_branding h1{background-position:0 -50px;}
#page_approach h1{background-position:0 -75px;}
#page_about h1{background-position:0 -100px;}
h2{margin-bottom:5px; background:url(images/h.section.png) 0 0 no-repeat; height:35px;}
#h_whyColorBox{background-position:0 0;}
#h_instructions{background-position:0 -35px;}
#h_jack{background-position:0 -70px; margin-left:160px;}
#h_alex{background-position:0 -105px; margin-left:160px;}
#h_standards{background-position:0 -210px;}
#h_speed{background-position:0 -245px;}
#h_seo{background-position:0 -280px;}
#h_process{background-position:0 -140px;}
#h_deploy{background-position:0 -350px;}
#h2_demonstration{background-position:0 -385px;}
#h_documentation{background-position:0 -420px;}
#h_help{background-position:0 -455px;}
#h_author{background-position:0 -490px;}
#h_extending{background-position:0 -525px;}
h3{margin-bottom:10px; background:url(images/h.comment.png) 0 0 no-repeat; height:25px;}
#h_our_design{background-position:0 0;}
#h_pastis{background-position:0 -30px;}
#h_hyundai{background-position:0 -60px;}
#h_artisan{background-position:0 -90px;}
#h_meyer{background-position:0 -120px;}
.box h3{background-image:url(images/h.box.png);}
#h_downloads{background-position:0 0;}
#h_demonstration{background-position:0 -25px;}
.statement h3{background-image:url(images/h.statement.png);}
#h_goalsColorBox{background-position:0 0;}
#h_ColorBox{background:url(images/h.colorBox.png) 0 0 no-repeat; height:40px; margin-bottom:5px;}
#h_ColorRating{background:url(images/h.colorRating.png) 0 0 no-repeat; height:40px; margin-bottom:5px;}
#h_Blend{background:url(images/h.blend.png) 0 0 no-repeat; height:40px; margin-bottom:5px;}
/* ABOUT US */
#page_about{}
#page_about .title{background-color:#2FC1F4;}
#page_about img{float:left; margin-right:20px;}
#page_about .info p{overflow:auto;}
#page_web{}
#page_web .title{background-color:#FF6D00;}
#page_web .first{margin-bottom:0;}
.photonav{}
.photonav span{float:left; margin-right:3px;}
.photonav a, .numbernav a {background:url(images/numbers.png) 0 0 no-repeat; width:19px; height:19px; display:block; float:left; margin-right:3px; text-indent:-9999px;}
a#nav1{background-position:0 -20px;}
a#nav2{background-position:-20px -20px;}
a#nav3{background-position:-40px -20px;}
a#nav4{background-position:-60px -20px;}
a#nav5{background-position:-80px -20px;}
a#nav1:hover{background-position:0 -1px;}
a#nav2:hover{background-position:-20px -1px;}
a#nav3:hover{background-position:-40px -1px;}
a#nav4:hover{background-position:-60px -1px;}
a#nav5:hover{background-position:-80px -1px;}
a#nav1.current{background-position:0 -39px;}
a#nav2.current{background-position:-20px -39px;}
a#nav3.current{background-position:-40px -39px;}
a#nav4.current{background-position:-60px -39px;}
a#nav5.current{background-position:-80px -39px;}
a.website{width:auto; height:auto; display:inline; text-indent:0; background:none;}
#tabnav{position:absolute; top:9px; left:310px;}
#tabnav a{font-size:12px; display:inline; background:#999; color:#fff; padding:3px 10px 4px 10px; line-height:22px;}
#tabnav a:hover{background:#21A4F4; color:#fff;}
#tabnav a.current{background:#fff; color:#666;}
#tabnav li{float:left; padding:0; margin:0 3px 0 0; }
#page_apps{}
#page_apps .title{background-color:#FFAA00;}
#page_approach{}
#page_approach .title{background-color:#02B74B;}
#page_branding{}
#page_branding .title{background-color:#A1D333;}
#branding_thumbs{margin-left:-4px; width:290px; margin-bottom:15px; overflow:auto;}
#branding_thumbs li{float:left; display:inline; background:none; padding:0; margin:0 0 4px 4px; border:2px solid #fff;}
#branding_thumbs img{float:left;}
#photos{height:427px; overflow:hidden; position:relative;}
#portfolio_photos{width:1800px; position:absolute; top:0; left:0;}
#photos img{float:left;}
#photos .branding_info{position:absolute; bottom:0; background:url(images/tint75.png) 0 0 repeat; width:100%; color:#fff}
#photos .micro{float:left; margin:0; padding:5px;}
.design_nav {float:right; padding:3px 5px 0 0; margin-bottom:0;}
.design_nav a.dnav1, .design_nav a.dnav2, .design_nav a.dnav3, .design_nav a.dnav4{display:block; width:19px; height:19px; float:left; margin-left:5px; text-indent:-9999px;}
.design_nav a.dnav1{background:url(images/number_panel.png) -2px -65px no-repeat;}
.design_nav a.dnav2{background:url(images/number_panel.png) -24px -65px no-repeat;}
.design_nav a.dnav3{background:url(images/number_panel.png) -46px -65px no-repeat;}
.design_nav a.dnav1:hover{background:url(images/number_panel.png) -2px -43px no-repeat;}
.design_nav a.dnav2:hover{background:url(images/number_panel.png) -24px -43px no-repeat;}
.design_nav a.dnav3:hover{background:url(images/number_panel.png) -46px -43px no-repeat;}
#preload{background:#000; position:absolute; width:100%; height:100%;}
#loading_bgd{background:url(images/loading_bgd.png) center center no-repeat; position:absolute; width:100%; height:100%;}
#loading{background:url(images/loading.gif) center center no-repeat; width:100%; height:100%;}
/* CONTACT */
#contact_form {/*width:590px; height:280px;*/}
#contact_form label{position:absolute; text-indent:-9999px;}
#h_contact {background-position:0 -315px; margin-left:15px; margin-top:15px;}
#contact_form form{width:100%; height:100%; background:url(images/bg_contact.png) 0 -10px no-repeat; position:absolute; top:0; left:0;}
#name, #email, #subject, #message{position:absolute; padding:5px; background:#ebebeb; border:none; width:165px}
#name{top:103px; left:15px;}
#email{top:164px; left:15px;}
#subject{top:228px; left:15px;}
#message{top:103px; left:205px; width:360px; height:142px;}
#submit{position:absolute; outline:none; width:66px; height:25px; background:url(images/submit.png) left bottom no-repeat #fff; top:263px; left:205px;}
#submit input{cursor:pointer; width:66px; height:25px; background:url(images/submit.png) 0 0 no-repeat #fff; border:0;}
#required{position:absolute; top:266px; left:278px; width:262px;}
#status{width:550px; position:absolute; top:160px; left:46px; text-align:center;}
div#modalLoadedContent{margin-bottom:0; border:0;}
div#modalLoadingOverlay{background:none;}
a#modalClose{top:5px; right:5px;}