/* -   Copyright 2008 Boundless Creative                   --*/

/* -   Smart developers look at the code!                  --*/

/* -   Site Colors:                                        --*/

/* -   Orange: #f2731c                                     --*/

/* -   Blue: #375097                                       --*/

/* -   Nav-edge  Blue: #2e4777                             --*/

/* -   Nav Grey: #aaaaaa                                   --*/

/* -   Nav-edge Grey: #bfbfbf                              --*/

/* -------------------------------------------------------------*/







/* Reset (why can't those browsers get along?) 

---------------------------------------------------------------------*/

	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;}

	:focus {outline: 0;}



/*  Font Reset 

---------------------------------------------------------------------*/

	body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}



/* Forms Reset

---------------------------------------------------------------------*/

	input.text {

		padding: 3px;

		border: 1px solid #999999;    

	}



/*  Default Font CSS

---------------------------------------------------------------------*/

	h1, h2, h3, h4, h5, h6, h7 {

		font-family: 'Lucida Grande', 'Verdana';

		margin: 5px;

	}

	

	h1{

		font-size: 167%; /* 22px */

	}

	h2{

		font-size: 153.9%; /* 20px */

	}

	h3{

		font-size: 138.5%; /* 18px */

	}

	h4{

		font-size: 123.1%; /* 16px */

	}

	h5{

		font-size: 108%; /* 14px */

	}

	

	p {

		font-size: 100%;

		margin: 5px;
		
		line-height:130%;

	}

	

	.clear{

		clear: both;

	}

/*  Custom Font CSS

---------------------------------------------------------------------*/

	a{

		color: #375097;

	}

	a:hover{

		color: #f2731c;

	}



	h1, h2, h3, h4, h5, h6, h7, label, legend {

		color: #375097;

		font-weight: bold;

	}

	

	h1{

		margin: 15px 7px;

	}

	h2{

		margin: 15px 7px;

	}

	

	p,ul{

		color: #7b7b7b;

		margin: 12px 7px;

	}

	

	div#content ul li{

		margin-left: 20px;

		line-height: 160%;

		list-style-type: disc;

	}

	

	legend {

		font-size: 123.1%; /* 16px */	

	}

	

	strong{

		font-weight: bold;

	}

/*  Standard Box Styles

---------------------------------------------------------------------*/

	.info, .alert{

		padding:5px 20px 5px 45px;

		margin: 10px 5px;

	}

	.alert {

		background: #fff6bf url(../images/icons/exclamation.png) center no-repeat;

		background-position: 15px 50%; /* x-pos y-pos */

		border-top: 2px solid #ffd324;

		border-bottom: 2px solid #ffd324;

	}

	.info{

		background:#F8FAFC url(../images/icons/information.png) no-repeat scroll 15px 50%;

		border-bottom:2px solid #B5D4FE;

		border-top:2px solid #B5D4FE;

	}

	.alert, .debug, .info{

		clear: both;

	}

	.ajax-loading {

		padding: 20px 0;

		background: url(../images/icons/spinner.gif) no-repeat center;

	}

/*   Site Structure 

---------------------------------------------------------------------*/

	html{

		background-color: #000;

		font-family: 'Lucida Grande', 'Verdana', 'Arial';

		font-weight: normal;

		background: #000 url(../images/background.jpg) no-repeat center top;

		text-align: center; /* IE Hack: Center align column */

	}

	body{

		width: 731px;

		margin: 0px auto;

	}

	

	

	div#wrapper {

		text-align: left; /* IE Hack: Undo ie fix */	

		position: relative;

	}

	

	h1#logo, a#logo_hover{

		font-size: 90%;

		display: block;

		margin: 0px;

		padding: 0px;

		text-indent: -99999px;

		overflow: hidden;

		height: 183px;

		width: 731px;

		background: url(../images/logo_hover.jpg) no-repeat 0pt;

		position:relative;

	}	

	

	a#logo_hover{

		background: url(../images/logo.jpg) no-repeat 0pt;

		position:absolute;

		top:0px;

		left:0px;

	}

	

	h2#slogan{

		font-size: 90%;

		margin: 0px;

		padding: 0px;

		text-indent: -99999px;

		overflow: hidden;

		height: 72px;

		width: 731px;

		background: url(../images/slogan.jpg) no-repeat 0pt;

		color: #999999;

	}

	



/*  Sliding doors CSS for menus

---------------------------------------------------------------------*/

	.nav{

		position: relative;

		left: 65px;

	}

	.nav .inner-door{

		float: left;

		padding: 0px 10px 0px 0px;

	}

	.nav ul{

		margin: 0px;

	}

	.nav ul li{

		margin: 0px;

		float: left;

		display: block;

		list-style: none;

	}

	.nav ul li a, #nav_bottom ul li.empty{

		color: #FFF;

		display: block;

		padding: 5px 7px;

		text-decoration: none;

	}





/*  Top nav bar 

---------------------------------------------------------------------*/

	#nav_top ul li a{

		background: #636363 url(../images/nav_top_stretch.gif) repeat-x top left;

		border-right: 1px solid #000;

	}

	#nav_top ul li a.first{

		background: url(../images/nav_top.gif) repeat-x top left;

		padding-left: 17px;

	}

	#nav_top ul li a.first:hover,#nav_top ul li a.first.active{

		background: url(../images/nav_top_hover.gif) repeat-x top left;

	}

	#nav_top ul li a.last{

		background: url(../images/nav_top.gif) repeat-x top right;

		padding-right: 17px;

		border-right: 0px;

	}

	#nav_top ul li a.last:hover, #nav_top ul li a.last.active{

		background: url(../images/nav_top_hover.gif) repeat-x top right;

	}

	#nav_top ul li a:hover, #nav_top ul li a.active{

		color: #FFF;

		background: #f2731c;

	}





/*  General content section 

---------------------------------------------------------------------*/	

	#content_box{

		clear: both;

		color: #000;

		background: #FFF;

		border: 3px solid #f2731c;

		padding: 10px;

		position: relative;

	}



/*  Bottom nav bar 

---------------------------------------------------------------------*/

	#nav_bottom{

		left: 75px;

	}

	#nav_bottom ul li a, #nav_bottom ul li.empty{

		color: #FFF;

		background: #AAA url(../images/nav_bottom_stretch.gif) repeat-x bottom left;

		border-right: 1px solid #000;

	}

	#nav_bottom ul li a.first{

		background: url(../images/nav_bottom.gif) repeat-x bottom left;

		padding-left: 17px;

	}

	#nav_bottom ul li.empty{

		overflow:hidden;

		text-indent: -9000px;

		cursor:normal;

		width: 230px;

	}

	#nav_bottom ul li a.first:hover,#nav_bottom ul li a.first.active{

		background: url(../images/nav_bottom_hover.gif) repeat-x bottom left;

	}

	#nav_bottom ul li a.last{

		background: url(../images/nav_bottom.gif) repeat-x bottom right;

		padding-right: 17px;

		border-right: 0px;

	}

	#nav_bottom ul li a.last:hover, #nav_bottom ul li a.last.active{

		background: url(../images/nav_bottom_hover.gif) repeat-x bottom right;

	}

	#nav_bottom ul li a:hover, #nav_bottom ul li a.active{

		color: #FFF;

		background: #f2731c;

	}

	

/* Footer

---------------------------------------------------------------------*/

	h2#slogan2{

		clear: both;

		float: left;

		width: 100%;

		text-align: center;

		color: #FFF;

		font-size: 93%;

		font-weight:normal;

		margin: 14px 0px 23px 0px;

	}

	

	#buttom_buttons{

		border-top: 1px solid #575757;

		margin: 0px 0px 20px 93px;

		float: left;

	}

	#buttom_buttons li{

		display: block;

		float: left;

		margin-top:-10px;

	}

	#buttom_buttons li a{

		display: block;

		text-indent: -9000px;

		overflow: hidden;

	}

	#buttom_buttons li.boundless a{

		background: url(../images/buttons/button_bo.gif) no-repeat top left;

		width: 258px;

		height: 20px;

	}

	#buttom_buttons li.boundless a:hover{

		background: url(../images/buttons/button_bo.gif) no-repeat bottom left;

	}

	#buttom_buttons li.boundless{

		margin-right: 43px;

	}

	

	#buttom_buttons li.portfolio a{

		background: url(../images/buttons/button_portfolio.gif) no-repeat top left;

		width: 258px;

		height: 20px;

	}

	#buttom_buttons li.portfolio a:hover{

		background: url(../images/buttons/button_portfolio.gif) no-repeat bottom left;

	}

	

	

	

/* Buttons

---------------------------------------------------------------------*/



	.ask-about-webdev{

		text-indent: -40000px;

		overflow: hidden;

		height: 26px;

		width: 210px;

		background: url(../images/ask_about_webdev.gif);	

	}



	

/* Page specific CSS

---------------------------------------------------------------------*/



	body.about #content_box{

		padding-right: 185px;

		background: #FFF url(../images/backgrounds/about.jpg) no-repeat bottom right;

	}

	

	body.clients ul.client-list{

		float: left;

		width: 30%;

		margin: 0px;

		padding: 5px;

	}

	body.clients ul.client-list li{

		list-style: none;

		line-height: 200%;

	}

	

	body.contact div#email_form{

		float: right;

		width: 250px;

	}

	body.contact div#email_form fieldset{

		border: 1px solid #CCC;

		padding: 10px;

	}

	body.contact div#email_form legend{

		padding: 4px;

	}

	

	body.contact div#email_form label{

		font-weight: bold;

	}

	body.contact div#email_form input, body.contact div#email_form textarea{

		margin-bottom: 10px;

	}



/*  Portfolio page 

---------------------------------------------------------------------*/



	#nextSlide, #prevSlide{

		display: none;

		background: url(../images/buttons/arrows.gif) no-repeat top left;

		width: 28px;

		height: 28px;

		text-indent: -9000px;

		overflow:hidden;

		position: absolute;

		top: 142px;

	}

	body.portfolio #nextSlide{

		display: block;

		left:-14px;

	}

	body.portfolio #nextSlide:hover{

		background-position: bottom left;

	}

	body.portfolio #prevSlide{

		display: block;

		background-position: top right;

		right: -14px;

	}

	body.portfolio #prevSlide:hover{

		background-position: bottom right;

	}

	

	body.portfolio #content_box{

		padding:0px;

		margin: 0px;

	}

	

	body.portfolio #content_box h2{

		margin-top: 11px;

	}

	

	div#portfolio{

		/*position: relative;

		overflow: hidden;

		width: 726px;

		height: 305px;*/

	}

	

	div#portfolio ul.carousel{

		/*position: absolute;

		top:0px;

		left: 0px;

		width:3630px;

		height: 305px;*/

	}	

	

	div#portfolio ul.carousel li.slide{

		float: left;

		display:block;

		width: 726px;

		height: 305px;

	}

	

	div#portfolio ul.carousel li.slide img{

		float: left;

		margin: 0px 10px 0px 0px;

	}

	div#portfolio ul.carousel li.slide div {

		float: left;

		width: 346px;

	}	

	

	div#portfolio ul.carousel li.slide div a {

		text-decoration: none;

	}

	

	div#portfolio ul.carousel li.slide div h4 {

		padding-top: 20px;

	}

	

	#video_container{

		padding: 20px;

		margin: 20px;

	}

	

/*  Squeezebox CSS

---------------------------------------------------------------------*/

	#sbox-window embed, #sbox-window object, #sbox-window select

	{

		visibility:				visible;

	}

	

	#sbox-overlay

	{

		position:				absolute;

		background-color:		#000;

	}

	

	#sbox-window

	{

		position:				absolute;

		background-color:		#fff;

		text-align:				left;

		overflow:				visible;

		padding:				10px;

		-moz-border-radius:		3px;

		-webkit-border-radius:	3px;

	}

	

	#sbox-btn-close

	{

		position:				absolute;

		width:					30px;

		height:					30px;

		right:					-15px;

		top:					-15px;

		background:				url(../images/icons/closebox.png) no-repeat center;

		border:					none;

	}

	

	.sbox-window-ie6 #sbox-btn-close

	{

		background-image:		url(../images/icons/closebox.gif);

	}

	

	.sbox-loading #sbox-content

	{

		background-image:		url(../images/icons/spinner.gif);

		background-repeat:		no-repeat;

		background-position:	center;

	}

	

	#sbox-content

	{

		clear:					both;

		overflow:				auto;

		background-color:		#fff;

		height:					100%;

		width:					100%;

	}

	

	.sbox-content-image#sbox-content

	{

		overflow:				visible;

	}

	

	#sbox-image

	{

		display:				block;

	}

	

	.sbox-content-image img

	{

		display:				block;

	}

	

	.sbox-content-iframe#sbox-content

	{

		overflow:				visible;

	}

	

	.body-overlayed embed, .body-overlayed object, .body-overlayed select

	{

		visibility:				hidden;

	}