/* YUI css reset
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;} .yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

html{background:#d4d4d4;}
body{font-family:arial; text-align:left;}
form{margin:0; padding:0;}
#main{margin:0 auto; background:#737477 url(/img/bg.jpg) 0 70px repeat-x;}
a {text-decoration:none; color:#000;}
a:hover{color:#999;}
h1{color:#fff; margin:45px 0 30px; font-size:29px; font-weight:bold;}
h2{color:#80cfe5; font-size:16px; font-weight:bold;}
p{color:#ccc; font-size:12px; margin:2px 0 20px; width:360px; line-height:17px;}
ul {margin:0; padding:0;}
h1, h2, p {padding-left:45px;}

#hd .container, #bd, #ft .nav {width:925px; margin:0 auto;}
	
#hd {background:#fff; color:#000; font-size:14px; padding:25px 0 10px;}
#hd .container{width:925px; margin:0 auto;}
#hd .nav {float:right; margin-top:23px;}
#hd .nav li{display:inline; margin-left:15px;}
#hd .nav li a:hover {border-bottom:1px dotted #ff0000; padding-bottom:1px; color:#222;}
#hd a {color:#000;}
#hd a#logo{ display:block; float:left; background:transparent url(/img/wfh-sprite.png) 0 0 no-repeat; width:315px; height:43px; text-indent:-999em;}

#about .nav .about,
#portfolio .nav .portfolio,
#pricing .nav .pricing,
#contact .nav .contact {border-bottom:1px dotted #ff0000;}


#bd {text-align:center; position:relative;}
#story_nav {width:500px; height:55px; margin:0 auto;}
#story_nav li{float:left; margin-left:0px; padding:20px 0px;}
#story_nav li a {color:#808080; font-weight:bold; font-size:14px; margin:30px 20px;}
#story_nav li a:hover {color:#ccc;}
#story_nav li.selected{ background:url(/img/triangle.png) 50% 100% no-repeat;}
#story_nav li.selected a {color:#fff;}
.content {background:#000; padding:0px 0 5px; text-align:left; margin-bottom:0px;}
.content #great_website{background:#000 url(/img/collage.jpg) 100% -30px no-repeat;}
.content .off{display:none;}

.intro .content {position:relative; height:400px; overflow:hidden; width:925px; float:left;}
.intro .content ul#carousel {position:absolute; left:0; width:6000px;}
.intro .content #great_website, .content #we_offer, .content #get_started {width:925px; float:left; margin-right:150px; position:relative; height:390px;}
.intro a {outline-style:none;}

#get_started #col_1 {float:left; width:550px;}
#get_started #col_2 {float:right; width:310px; border-left:solid 1px #333; background:#1a1a1a; padding:45px 0 65px;}
#get_started #col_2 h2 {padding-left:25px;}
#get_started #col_2 label {color:#999;}
#get_started p a {border-bottom:1px dotted #ff0000; color:#fff;}
#get_started p a:hover {border-bottom:1px dotted #ff0000; color:#ff0000;}
#get_started ul {float:left;}
#get_started form {float:right;}

#we_offer ul{margin-left:45px;}
#we_offer li{ width:220px; padding-top:85px; float:left; margin-right:75px;}
#we_offer li h1,
#we_offer li h2,
#we_offer li p {padding-left:0;}
#we_offer li p{width:auto;}
#we_offer li.technology {background:url(/img/t.png) 0 0 no-repeat;}
#we_offer li.user_experience {background:url(/img/ux.png) 0 0 no-repeat;}
#we_offer li.price {background:url(/img/pr.png) 0 0 no-repeat; margin-right:0;}	


div.call_2_action{width:925px; height:25px; background:#1a1a1a; position:absolute; bottom:20px; right:0px;}

.call_2_action a {cursor:finger; cursor:pointer; display:block; height:25px; float:left; padding:0 10px; background:url(/img/arrowhead.png) 100% 0 no-repeat; color:#fff; font-weight:bold;}
.call_2_action:link{color:#fff;}
.call_2_action a:hover{text-decoration:underline; color:#fff;}
.call_2_action:visted{color:#fff;}
.call_2_action a, 
.call_2_action em, 
.call_2_action span {display:block; height:24px; float:left; line-height:25px; white-space:nowrap;}
.call_2_action a span {padding-left:10px; background:transparent url(/img/arrowback.png) 0 -1px no-repeat;}

.call_2_action a.prev {background:url(/img/arrowheadblue.png) 0 0 no-repeat;}
.call_2_action a.prev span,	.call_2_action a span em{ background-color:#f15a24;}
.call_2_action a.prev span {padding-left:0px; background:transparent url(/img/arrowbackblue.png) 100% 0 no-repeat;}
.call_2_action a.prev span em{padding-left:5px; background:#0071bc; margin-right:10px; _margin-right:5px;}
.call_2_action .prev em {color:#B3E4FF; text-transform:uppercase;}

.call_2_action b {color:#FFC5B3; text-transform:uppercase; margin-right:5px;}
.call_2_action em {padding:0 7px; font-weight:bold;}
.call_2_action a {margin:0 35px;}

.intro #contact_form button{border:0; display:block; height:25px; float:left; margin:16px 0 0 0; padding:0 10px 0 0; background:url(/img/arrowhead.png) 100% 1px no-repeat; *width:220px;}	
.intro #contact_form button span {color:#FFC5B3; display:block; height:24px; float:left; line-height:24px; padding-left:10px; background:transparent url(/img/arrowback.png) 0 -1px no-repeat;}	

.intro #contact_form button em {display:block; height:24px; float:left; line-height:24px; background-color:#f15a24; padding:0 7px; font-size:11px; font-size:11px;}
.intro #contact_form button b {color:#fff text-transform:uppercase; margin-right:5px; font-size:13px;}

.landing .call_2_action {background:#f0f0f0;}
.landing .call_2_action a {float:right; margin:0 -25px; _margin:0; white-space:nowrap;}
.landing .prev {display:none;}
#pricing .box .call_2_action {display:block; width:100%; bottom:0; _background:transparent;}
#pricing .box .call_2_action a {border:none; color:#fff;}

	
#ft {background:#d4d4d4; color:#999; font-size:11px; padding:15px 0 40px 0; margin-top:45px;}
#ft a{color:#999;}
#ft a:hover{color:#000;}
#ft .nav li{ display:inline; margin-left:15px;}

.clearfix {zoom: 1;}   
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}  

.landing #story_nav li.selected{background-image:none;}
.landing #story_nav li.selected a {color:#808080;}
.landing .content {background:#fff url(/img/bgwhite.png) repeat-x; padding:1px 0 0px;}
.landing h1, .landing h2, .landing h3, .landing p {padding-left:25px;}
.landing h1 {color:#000; margin: 25px 0 10px; font-size:32px; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;}
.landing h2 {color:#000; font-size:18px; margin-bottom:20px;}
.landing h3 {color:#000; font-weight:bold; font-size:14px;}
.landing p {width:auto; color:#333;}
.landing .content a {border-bottom:1px dotted #ff0000; color:#000;}
.landing .content a:hover {border-bottom:1px dotted #ff0000; color:#ff0000;}

#about .call_out_box {width:500px; background:#CFF8FF; border:solid 1px #A9F7FF; margin:25px 0 30px 25px; padding:10px 10px 15px;}
#about .call_out_box h4 {color:#0071BC; font-size:14px; font-weight:bold;}
#about .call_out_box ul {float:left; margin-right:15px;}
#about .call_out_box li {list-style-type:disc; margin: 5px 0 0px 15px;}
#about #col_1 {float:left; width:550px;}
#about #col_2 {float:right; width:310px; height:450px; border-left:solid 1px #e6e6e6; background:#ececec; padding:65px 0;}
label {font-size:12px; color:#333; display:block;}
#contact_form {margin:10px 25px 0 25px;}
#contact_form input {margin: 0 0 10px; width:200px; padding:3px; border:solid 1px #bbb;}
#contact_form textarea {margin: 0 0 10px; width:250px; padding:3px; border:solid 1px #bbb;}
#contact_form button {background:#3A54A5 url(/img/bgbutton.png) repeat-x; border:solid 1px #3A54A5; color:#fff; font-weight:bold; padding:3px 10px; margin:0; cursor:pointer;}
#contact_form .error {border:solid 1px #ff0000;}

.row {margin-bottom: 30px; padding-bottom: 30px; border-bottom:solid 2px #f1f1f1;}
.row-last {border:none;}

#portfolio .row .screenshot {float:left; padding-left:50px;}
#portfolio .row .screenshot img {border:solid 8px #e6e6e6;}
#portfolio .row .screenshot img {padding:7px; border:solid 1px #e6e6e6; background:#fff url(/img/bgwhite.png) repeat-x;}
#portfolio .row .blurb {float:left; width: 250px;}
#portfolio .row .blurb h3 {margin:0 0 5px;}
#portfolio .row .blurb p {margin:0 0 10px;}
#portfolio .row .blurb a {margin-left: 25px;}
#portfolio .row .list {float:left; width: 130px; margin-left:10px; padding-top:5px;}
#portfolio .row .list h3 {font-size:11px; color:#808080;}
#portfolio .row .list ul {margin-left:25px; font-size:11px; color:#b2b2b2;}

#pricing .bucket {float:left;}
#pricing .bucket .box {position:relative; width:220px; height:150px; background:#fff url(/img/bgblue.png) repeat-x; border:solid 1px #CFF8FF; margin-left: 50px; text-align:center; padding:15px 10px;}
#pricing .bucket h3 {padding:0; font-size:32px; font-weight:bold;}
#pricing .bucket p {padding:5px 0; margin:0; color:#666; font-size:13px; width:auto;}
#pricing .bucket .price {font-size:22px; margin-left:0;}
#pricing .bucket ul {margin: 15px 0 10px 50px;}
#pricing .bucket li {margin: 5px 0 5px 5px; color:#000;}
#pricing .bucket li.special {font-weight:bold;}
#pricing p {margin-bottom:5px; width:500px;}
#pricing .other_services ul {margin: 0 0 40px 25px;}
#pricing .other_services li {list-style-type: disc; color:#666; margin-left:20px;}
#pricing .price {font-size:14px; font-weight:bold; color:#20D800; margin-left:25px;}
#pricing .call_2_action {display:none;}

#contact #col_1 {float:left; width:550px;}
#contact #col_2 {float:right; width:335px; padding:30px 30px 0 0;}
#contact #col_2 em {font-weight:bold; margin-right:5px;}
#contact #col_2 span{display:block; font-size:11px;}
#contact #contact_form {margin:10px 0 25px 25px; border-left:solid 1px #e6e6e6; background:#ececec; padding:20px;}
#contact #contact_form input {margin: 0 0 10px; width:300px; padding:3px;}
#contact #contact_form select {margin: 0 0 10px; width:310px; padding:3px;}
#contact #contact_form textarea {margin: 0 0 10px; width:475px; padding:3px;}

#contact #contact_form .notes {display:inline; line-height:25px; vertical-align:top; margin-left:5px;}
#contact #contact_form .notes a {font-size:11px;}
#contact .call_2_action {display:none;}

#thank-you .call_2_action {display:none;}
#thank-you p {width:500px; line-height:27px; font-size:14px;}

/*#want-a-great-website .call_2_action a {margin-left:193px;}
*/
#get-started #col_1{position:relative; }

#arrow3 {width:615px; right:0; left:0; _bottom:62px; position:absolute;}