/* global (+ reset.css) */

body {
	background-color: #ffffff;
	font-family: arial;
	font-size: 13px;
	line-height: 17px;
	color: #111111;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

#wrap { width: 800px; margin: 0 auto; }



/* nav & header */

#header {
	width: 820px;
	height: 142px;
	margin: 0 auto;
}

#logo {
	width: 142px;
	height: 74px;
	margin: 39px 0 0 10px;
	float: left;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
}
#logo h1 { display: none; }

ul#nav {
	float: right;
	margin-top: 83px;
	width: 442px;
	height: 29px;
	margin-right: -29px;
}
ul.contact { margin-right: 0; }

ul#nav span { display: none; }
ul#nav li, ul#nav a {
	height: 29px;
	display: block;
	background-image: url(images/nav.png);
}
ul#nav li {
	float: left;
	list-style: none;
	display: inline;
}

ul#nav li#nav-01 a { width: 77px; background-position: -6px -29px }
ul#nav li#nav-02 a { width: 84px; background-position: -95px -29px }
ul#nav li#nav-03 a { width: 111px; background-position: -190px -29px }
ul#nav li#nav-04 a { width: 98px; background-position: -313px -29px; }

ul#nav .current { background-image: url(images/nav.png); margin: 0 20px 0 20px; }

ul#nav li#nav-01.current { width: 89px; background-position: 0px 0px; }
ul#nav li#nav-02.current { width: 95px; background-position: -89px 0px; }
ul#nav li#nav-03.current { width: 123px; background-position: -184px 0px; }
ul#nav li#nav-04.current { width: 110px; background-position: -307px 0px; }

ul#nav li#nav-01 a:hover { background-position: -6px -58px; }
ul#nav li#nav-02 a:hover { background-position: -95px -58px; }
ul#nav li#nav-03 a:hover { background-position: -190px -58px; }
ul#nav li#nav-04 a:hover { background-position: -313px -58px; }

ul#nav li#nav-01 a:active { background-position: -6px -57px; }
ul#nav li#nav-02 a:active { background-position: -95px -57px; }
ul#nav li#nav-03 a:active { background-position: -190px -57px; }
ul#nav li#nav-04 a:active { background-position: -313px -57px; }




/* index */

#home_top {
	width: 800px;
	height: 255px;
	background: url(images/home_top.png) no-repeat;
	position: relative;
	margin-bottom: 10px;
}
#home_top h2, #home_top h3 { display: none; }

#banner_wrap {
	width: 423px;
	height: 198px;
	position: absolute;
	top: 97px;
	left: 30px;
	z-index: 10;
}
#banner_content, ul#slide_num { display: none; }
#b1 { width: 423px; height: 198px; background-image: url(images/latest1.png); }
#b2 { width: 423px; height: 198px; background-image: url(images/latest2.png); }
#b3 { width: 423px; height: 198px; background-image: url(images/latest3.png); }

#home_top_more {
	width: 185px;
	height: 29px;
	position: absolute;
	top: 174px;
	right: 132px;
}
#home_top_more a {
	display: block;
	width: 185px;
	height: 29px;
	background: url(images/view_portfolio.png) top no-repeat;
}
#home_top_more a:hover { background-position: bottom; }
#home_top_more span { display: none; }

#home_top_quote {
	width: 277px;
	height: 62px;
	position: absolute;
	top: 223px;
	right: 35px;
	z-index: 15;
}
#home_top_quote a {
	display: block;
	width: 277px;
	height: 62px;
	background: url(images/quote.png) top no-repeat;
}
#home_top_quote a:hover { background-position: bottom; }
#home_top_quote em, #home_top_quote span { display: none; }

#home_top_social {
	position: absolute;
	bottom: 52px; right: 30px;
	width: 60px;
	height: 16px;
	padding: 7px 5px 6px 5px;
}
#home_top_social a {
	display: block;
	width: 16px; height: 16px;
	background: url(images/twitter_sm.png) top no-repeat;
	float: left;
}
#home_top_social a.linked {
	background: url(images/linked_sm.png) top no-repeat;
	margin: 0 5px 0 5px;
}
#home_top_social a.aim {
	background: url(images/aim_sm.png) top no-repeat;
}
#home_top_social a:hover { background-position: bottom; }

#home_bottom {
	width: 800px;
	height: 172px;
	background: url(images/home_bottom.png) no-repeat;
	position: relative;
}
#home_bottom_left {
	position: absolute;
	bottom: 40px;
	left: 30px;
	width: 411px;
	height: 36px;
	line-height: 18px;
	text-align: center;
	font-size: 13px;
	color: #656565;
	text-shadow: 0px 1px 0px #f0f0f0;
}
#home_bottom_left h4 { display: none; }
#home_bottom_right {
	position: absolute;
	top: 48px;
	left: 510px;
	line-height: 24px;
	color: #3d3d3d;
	font-size: 15px;
	text-shadow: 0px 1px 0px #dddddd;
}
#home_bottom_right a {
	display: block;
	width: 70px;
	height: 24px;
	font-size: 13px;
	font-family: georgia;
	font-style: italic;
	color: #686868;
	background: url(images/arrow.png) 40px 9px no-repeat;
}
#home_bottom_right a:hover { background-position: 43px 9px; color: #3c3c3c; text-decoration: none; font-weight: bold; }




/* all sub pages */

#left, #right { padding: 10px 0 30px 0; }
#left { float: left; width: 484px; padding-right: 10px; }
#right { float: right; width: 306px; }




/* about page */

#about_banner {
	width: 800px;
	height: 255px;
	position: relative;
	z-index: 1;
	background: url(images/about_banner.png) no-repeat;
}
#about_banner h2 { display: none; }
.about_right#about_1 {
	width: 447px;
	height: 255px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 2;
}
.about_right#about_1 a { display: block; width: 447px; height: 255px; background: url(images/about_banner_1.png) no-repeat; }
.about_right#about_1 a:hover { background-position: bottom; }
.about_right#about_2 {
	width: 319px;
	height: 167px;
	position: absolute;
	bottom: 0px;
	right: 128px;
	z-index: 3;
}
.about_right#about_2 a { display: block; width: 319px; height: 167px; background: url(images/about_banner_2.png) no-repeat; }
.about_right#about_2 a:hover { background-position: bottom; }
.about_right#about_3 {
	width: 269px;
	height: 141px;
	position: absolute;
	bottom: 0px;
	right: 178px;
	z-index: 4;
}
.about_right#about_3 a { display: block; width: 269px; height: 141px; background: url(images/about_banner_3.png) no-repeat; }
.about_right#about_3 a:hover { background-position: bottom; }
.about_right#about_4 {
	width: 239px;
	height: 108px;
	position: absolute;
	bottom: 0px;
	right: 208px;
	z-index: 5;
}
.about_right#about_4 a { display: block; width: 239px; height: 108px; background: url(images/about_banner_4.png) no-repeat; }
.about_right#about_4 a:hover { background-position: bottom; }

#light_box_wrap {
	background: url(images/light_box_bg.png) repeat-y;
	width: 484px;
	margin-bottom: 10px;
}
#light_box { background: url(images/light_box_top.png) top no-repeat; }
#light_box p {
	width: 444px;
	padding: 20px;
	background: url(images/light_box_bottom.png) bottom no-repeat;
	line-height: 22px;
	font-size: 13px;
	color: #8e8e8e;
}
#light_box p strong { color: #515151; }

ul#process {
	width: 308px;
	height: 165px;
	padding-top: 55px;
	background: url(images/process.png) no-repeat;
	margin-bottom: 10px;
}
ul#process li {
	list-style: none;
	height: 41px;
	line-height: 39px;
	padding-left: 35px;
	color: #535353;
	font-size: 12px;
}

#social {
	height: 37px;
	width: 116px;
	padding: 11px 10px 10px 180px;
	background: url(images/social_bg.png) no-repeat;
}
#social a {
	float: left;
	width: 58px;
	height: 37px;
	display: block;
	background: url(images/twitter.png) no-repeat;
}
#social a.facebook { background: url(images/facebook.png) no-repeat; }
#social a:hover { background-position: bottom; }
#social a span { display: none; }

#bio {
	width: 484px;
	height: 214px;
	padding-top: 15px;
	background: url(images/bio.png) no-repeat;
}
#bio_box {
	position: relative;
	width: 242px;
	float: left;
}
#bio_box h3, #bio_box em { display: none; }
#bio_box img { position: absolute; top: 13px; left: 13px; }
#bio_box ul#bio_list {
	width: 200px;
	padding: 105px 0 0 43px;
}
#bio_box ul#bio_list li {
	list-style: none;
	height: 27px;
	font-family: arial;
	font-size: 11px;
	color: #777777;
}
#bio_box ul#bio_list li.light { color: #a2a2a2; }


/* footer */

.footer {
	margin-top: 35px;
	padding: 12px 0 50px 0;
	border-top: 1px solid #bcbcbc;
	font-size: 11px;
	text-transform: uppercase;
	clear: both;
}
.footer#home { padding-top: 25px; margin: 0; border: 0; }
.footer .left { float: left; color: #686868; }
.footer .right { float: right; color: #8a8989; }
.footer .right a { color: #8a8989; padding: 0 5px 0 5px; }




/* contact page */

#contact_banner {
	width: 800px;
	height: 95px;
	background: url(images/contact_banner.png) no-repeat;
}
#contact_banner h2 { display: none; }

#quote_box {
	width: 484px;
	height: 394px;
	background: url(images/quote_box.png) no-repeat;
	position: relative;
}
#quote_box input.contact {
	height: 28px;
	border: 1px solid #c0c0c0;
	background-color: #ebebeb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #868686;
	font-size: 12px;
	padding: 0 7px 0 7px;
	margin: 0;
}
input, textarea { outline: none; }
#quote_box input.contact:focus, #quote_box textarea:focus { background-color: #ffffff; border: 1px solid #a7a7a7; }
#quote_box #qleft {
	float: left;
	width: 272px;
	height: 334px;
	margin: 0 20px 0 20px;
	padding-top: 60px;
}
#quote_box #qleft input.contact { width: 266px; }
#quote_box #qright {
	float: left;
	width: 140px;
	height: 334px;
	margin-left: 10px;
	padding-top: 60px;
}
#quote_box #qright input.contact { width: 124px; }
.quote_text {
	height: 30px;
	line-height: 38px;
	color: #5f5f5f;
	text-shadow: 0px 1px 0px #f0f0f0;
	font-weight: bold;
}
#quote_box textarea {
	position: absolute;
	bottom: 60px;
	left: 20px;
	padding: 7px;
	width: 426px;
	height: 107px;
	border: 1px solid #c0c0c0;
	background-color: #ebebeb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-family: arial;
	color: #868686;
	font-size: 12px;
	line-height: 17px;
}
#buttons {
	height: 29px;
	position: absolute;
	bottom: 15px;
	left: 20px;
}
#buttons #hrs, #buttons #submit_error, #buttons #submit_success { 
	float: left;
	width: 282px;
	height: 29px;
	background: url(images/24hrs.png) no-repeat;
	text-align: center;
	line-height: 29px;
	font-family: georgia;
	font-style: italic;
	font-size: 11px;
	color: #6a6a6a;
	padding-right: 20px;
}
#buttons #submit_error {
	background: url(images/submit_error.png) no-repeat;
	color: #ffffff;
	font-family: arial;
	text-transform: uppercase;
	text-style: regular;
}
#buttons #submit_success {
	background: url(images/submit_success.png) no-repeat;
	color: #ffffff;
	font-family: arial;
	text-transform: uppercase;
	text-style: regular;
	font-weight: bold;
}
#buttons input.send {
	float: left;
	width: 140px;
	height: 29px;
}

ul#quick_contact {
	width: 258px;
	height: 135px;
	background: url(images/quick_contact.png) no-repeat;
	margin-bottom: 20px;
	padding: 80px 0 0 48px;
	margin-bottom: 10px;
}
ul#quick_contact li { list-style: none; height: 30px; color: #ffffff; line-height: 23px; }
ul#quick_contact li#im { font-size: 11px; color: #a1d1d6; line-height: 15px; }




/* portfolio page */

.latest_banner { width: 800px; height: 95px; position: relative; }
.latest_banner h2 { display: none; }
.latest_banner#web { background: url(images/latest_web.png) no-repeat; }
.latest_banner#logo { background: url(images/latest_logo.png) no-repeat; }
.latest_banner .quote_button {
	position: absolute;
	top: 25px;
	right: 20px;
	width: 207px;
	height: 47px;
}
.latest_banner .quote_button a {
	display: block;
	width: 207px;
	height: 47px;
	background: url(images/portfolio_quote.png) top no-repeat;
}
.latest_banner .quote_button a span { display: none; }
.latest_banner .quote_button a:hover { background-position: bottom; }

.portfolio {
	width: 800px;
	height: 190px;
	padding-top: 30px;
}
.portfolio .pleft {
	float: left;
	width: 508px;
	margin-right: 20px;
}
.portfolio .pright {
	float: left;
	width: 272px;
}
.portfolio .pright h4 {
	font-size: 15px;
	text-transform: uppercase;
	font-family: arial;
	color: #2b2b2b;
	padding-bottom: 20px;
	margin-top: -3px;
	font-weight: bold;
}
.portfolio .pright p { color: #7f7f7f; font-size: 12px; line-height: 16px; padding-bottom: 20px; }
.portfolio a.more {
	display: block;
	width: 125px;
	height: 28px;
	background: url(images/viewmore.png) top no-repeat;
}
.portfolio a.more:hover { background-position: bottom; }




/* banner stuff */

.slide {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}
#slide_wrapper {
	margin: 0;
	padding: 0;
}
 
#slide_wrapper li {
	float: left;
	position: absolute;
}
.active {
	font-weight: bold;
	color: #f00;
}