/*-----------------------------------------------------------------------------------
Global Reset v0.2 (based on http://meyerweb.com/eric/tools/css/reset/ - v1.0 | 20080212)
-----------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, 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; background: #000; }
ol, ul { list-style: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
/*---------------------------
Elements
---------------------------*/
body { font-family:Helvetica, Arial, sans-serif; font-size: 11px; }
/*---------------------------
Global
---------------------------*/
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
/*---------------------------
Layout/structure
---------------------------*/

#phrase { font-size: 60px; height:500px; margin: 20px 0px 0px 20px; }

#phrase span { float: left; margin-bottom: 4px; padding: 4px; }

span.black { color: #000000; }
span.white { color: #FFFFFF; }
span.orange { color: #F7941D; }

span.bg_orange { background-color: #F7941D; } 
span.bg_white { background-color: #FFFFFF; } 
span.bg_black { background-color: #000000; } 

span.sans { font-family: Helvetica, Arial, sans-serif; font-weight: bold; }
span.serif { font-family: "Times New Roman", Times, serif; font-weight: normal; }


#navigation { height: 26px; margin: 20px 0px 0px 20px; }
#navigation li { float: left; margin-right: 2px; } 
#navigation li a,#navigation li a:active,#navigation li a:visited { background-color: #000000; color: #FFFFFF; display: block; height: 26px; font-family: Helvetica, Arial, sans-serif; font-size:11px; line-height:26px; text-align: center; text-decoration: none; text-transform: uppercase; width: 70px; }
#navigation li a:hover { background-color: #F7941D; color: #FFFFFF; }
#navigation a.contact, #navigation a.contact:active, #navigation a.contact:visited { background-image: url('../images/contact.jpg'); background-position:0px 0px; display: block; height: 26px; width: 30px; }
#navigation a.contact:hover { background-position:0px -26px; display: block; height: 26px; width: 30px; }


img.logo { clear:both; display:block; margin:20px 0px 0px 60px; }

#arrows { position: absolute; right: 20px; top: 20px; }
#arrows li { margin:0px 2px 2px 0px; }
#arrows li a.next { background-image: url('../images/arrow_next.jpg'); background-position:0px -17px; display: block; height: 17px; width: 19px; }
#arrows li a.next:hover { background-position:0px 0px; }
#arrows li a.previous {  background-image: url('../images/arrow_previous.jpg'); background-position:0px -17px; display:block; height:17px; width:19px; }
#arrows li a.previous:hover { background-position:0px 0px; }

#content { background-color:#FFFFFF; left:280px; margin:20px 0 30px 0; position:absolute; top:520px; width:700px; }
#content.bg_black { background-color:#000000; }
#main { border-right: 1px solid #CCCCCC; float: left; width: 489px; }
#side { float:right; width:209px; } /* for stupid ie6 */
html>body #side { float:right; width:210px; } /*for all others */

/*About Page*/
#people { float:left; width: 465px; padding: 0 0 0 25px; }
#people div.person { border-bottom:1px solid #CCCCCC; float: left; height:320px; margin:0px 20px 25px 0px; padding: 0px; width: 210px; }
#people h2 { color: #F7941D; font-size: 20px; font-weight:normal; margin:25px 0px 15px 0px; text-transform: lowercase; }
#people .person img { border:1px solid #CCCCCC; margin-bottom:5px; padding:2px; }
#people .person h3 { color: #000000; font-size: 12px; font-weight:bold; padding: 2px 0px; text-transform: lowercase; }
#people .person h4 { color: #F7941D; font-size: 12px; font-weight:normal; padding: 2px 0px; text-transform: lowercase; }
#people .person p  { color: #333333; line-height:16px; margin-top:10px; }
#people p.contact { color: #999999; line-height:16px; margin-top:10px; }
#people .contact a, #people .contact a:link, #people .contact a:active, #people .contact a:visited { color: #999999; text-decoration: none; }
#people .contact a:hover { color: #000000; }

#promise {  border-top:1px solid #CCCCCC; float:left; width: 490px; }
#promise h2 { color: #F7941D; font-size: 20px; font-weight:normal; padding:25px 0px 15px 25px; text-transform: lowercase; }
#promise p  { color: #333333; font-size:17px; line-height:20px; padding:0px 25px 30px 25px; }

#services { float:left; }
#services h2 { color: #F7941D; font-size: 20px; font-weight:normal; padding:25px 0px 10px 25px; text-transform: lowercase; }
#services h3 { color: #666666; font-size: 14px; font-weight:normal; padding:5px 0px 5px 25px; text-transform: lowercase; }
#services p  { color: #666666; font-size:12px; padding:0px 25px 10px 25px; }
#services ul { padding:0px 25px 10px 25px; }
#services li { color: #999999; line-height:14px; padding: 2px 0; }
#services li strong { margin: 5px 0 0 0; }

#testimonial { background-color:#F7941D; float:left; margin:10px 0px 20px 0; padding: 0px; }
#testimonial blockquote p { background: url('../images/quote.gif') no-repeat;  color: #FFFFFF; font-size: 13px; line-height:16px; font-weight:normal; margin:25px 25px 5px 25px; padding: 0; text-indent: 18px; }
#testimonial blockquote { background: url('../images/quote-close.gif') no-repeat bottom 90%; }
#testimonial p.name { color: #FFFFFF; float:right; font-size: 12px; font-weight:normal; font-style: italic; margin:0px 25px 15px 0px; }

#clients { border-top:1px solid #CCCCCC; float:left; width: 490px; }
#clients h2 { color: #F7941D; font-size: 20px; font-weight:normal; padding:25px 0px 15px 25px; text-transform: lowercase; }
#clients ul { float: left; padding:0px 0px 25px 25px;  width: 120px;}
#clients li { color: #333; line-height:14px; padding: 2px 0; }


/*work Page*/
#featured { border-bottom: 1px #101010 solid; height: 150px; margin: 0 0 20px 0; padding: 25px 25px 30px 25px; width: 650px;}
#featured .colone { border:1px solid #414141; float: left; height: 150px; padding:2px; width: 423px; }
#featured .colone img { height: 150px; width: 423px; }
#featured .colone .desc { position: relative; top: -135px; z-index: 5; }
#featured .colone .desc .text { background: #000; color: #FFF; font-size: 11px; font-weight:normal; padding: 5px; text-transform: uppercase; }
#featured .coltwo { float: right; width: 210px; }
#featured .coltwo h2 a { color: #F7941D; font-size: 18px; font-weight:normal; padding: 5px 0 10px 0; text-transform: lowercase; text-transform: lowercase; text-decoration: none; }
#featured .coltwo h3 a { color: #FFFFFF; font-size: 13px; font-weight:normal; padding: 0 0 13px 0; text-transform: lowercase; text-transform: lowercase; text-decoration: none; }
#featured .coltwo p { border-top: 1px #101010 solid; color: #FFFFFF; float:right; line-height:16px; padding: 10px 0 0 0;}

#work { float:left; margin: 0 0 20px 0; padding: 0 0 0 25px; width: 700px; }
#work .project { border:1px solid #000000; float: left; height:144px; margin: 0px 6px 6px 0px; padding:2px; position: relative; text-decoration: none; width: 206px; overflow: hidden;}
#work .project:hover { border:1px solid #414141; cursor: pointer; }
#work .project img { height:144px; position: relative; z-index: 4; width: 206px; }
#work .project .cover { background: url('../images/project_cover.png') repeat; float: left; height: 150px; position: relative; top: -150px; width: 206px; z-index: 6; }
#work .project .desc { position: relative; top: -125px; z-index: 5; }
#work .project .desc .client { background: #000; color: #FFF; font-size: 11px; font-weight:normal;  padding: 5px; text-transform: uppercase; }
#work .project .desc .name { background: #000; color: #FFF; font-size: 11px; font-weight:normal; line-height: 42px; padding: 5px; }

/*project display*/
#projectdesc { background: #000; margin: 0 0 0px 0; padding: 10px 25px; width: 650px; }
#projectdesc .backbtn { display: block; letter-spacing: 1px; padding: 5px 0 10px 0; }
#projectdesc .backbtn a, #projectdesc .backbtn a:link, #projectdesc .backbtn a:visited, #projectdesc .backbtn a:active { color: #414141; text-decoration: none; text-transform: uppercase; }
#projectdesc .backbtn a:hover { color: #999; }
#projectdesc .col { float: left; height: 120px; margin: 0 15px 0 0; width: 200px; }
#projectdesc .col h2 { color: #F7941D; font-size: 18px; font-weight:normal; text-transform: lowercase; text-transform: lowercase; }
#projectdesc .col h3 { color: #FFF; font-size: 13px; font-weight:normal; padding: 10px 0 0 0; text-transform: lowercase; text-transform: lowercase; }
#projectdesc .col p { color: #FFF; line-height: 16px; }
#projectdesc a { color:#F7941D; text-decoration: none; }
#projectdesc a:hover { text-decoration: underline; }
/*project nav*/
#projectnav { background: #121212; font-size: 11px; height: 24px; letter-spacing: 1px; padding: 9px 25px 0 25px; margin: 20px 0 0 -25px; text-transform: uppercase; width: 650px;  }
#projectnav a, #projectnav a:link, #projectnav a:visited, #projectnav a:active { color: #ccc; text-decoration: none; text-transform: uppercase; vertical-align: middle; }
#projectnav a:hover { color: #F7941D; }
#projectnav a.next { background: url('../images/next_btn.png') no-repeat top right; float: right; height: 11px; padding: 1px 18px 0 0; }
#projectnav a.next:hover { background: url('../images/next_btn_o.png') no-repeat top right; }
#projectnav a.prev { background: url('../images/prev_btn.png') no-repeat top left; float: left; height: 11px; padding: 1px 0 0 18px; }
#projectnav a.prev:hover { background: url('../images/prev_btn_o.png') no-repeat top left; }

/*project imgs*/
#projectimgs { padding: 10px 25px; text-align: center; width: 650px; }
#projectimgs img { margin: 15px 0; }
#projectimgs p { color: #CCC; text-align: left; padding-left: 10px; }

/*contact*/
#contact { height: 250px; padding: 25px 25px 30px 25px; width: 650px; }

#footer { border-top:1px solid #CCCCCC; float:left; height: 175px; width:700px; }
#footer h2 { color: #F7941D; font-size: 16px; font-weight:normal; padding:25px 0px 5px 25px; text-transform: lowercase; }
#footer p { color: #999999; line-height:16px; padding:0px 0px 0px 25px; }
#footer a, #footer a:link, #footer a:visited, #footer a:active { color: #999999; text-decoration: none; }
#footer a:hover { color:#000000; }
#footer em {color: #F7941D; font-weight:bold; font-style: normal; padding-right:2px; }
#footer ul { padding:25px 0px 0px 0px; width:209px; }
#footer li { height:40px; margin-bottom:10px; width:199px;}
#footer li h2 { padding:0px 0px 2px 0px; }
#footer img { float:left; clear:left; height:32px; margin-right:7px; width:25px; }

/* footer black */
#footer_black { border-top:1px solid #101010; float:left; height: 175px; width:700px; }
#footer_black h2 { color: #FFF; font-size: 16px; font-weight:normal; padding:25px 0px 5px 25px; text-transform: lowercase; }
#footer_black p { color: #414141; line-height:16px; padding:0px 0px 0px 25px; }
#footer_black a, #footer_black a:link, #footer_black a:visited, #footer_black a:active { color: #414141; text-decoration: none; }
#footer_black a:hover { color:#FFF; }
#footer_black em {color: #FFF; font-weight:bold; font-style: normal; padding-right:2px; }
#footer_black ul { padding:25px 0px 0px 0px; width:209px; }
#footer_black li { height:40px; margin-bottom:10px; width:199px;}
#footer_black li h2 { padding:0px 0px 2px 0px; }
#footer_black img { float:left; clear:left; height:32px; margin-right:7px; width:25px; }

#totop { background: transparent; display: block; padding: 20px;}

#padbottom { display: block; height: 20px; }