/* Costa Designs Stylesheet by Danielle LeComte - danielle@costadesigns.com */

html {
 	min-height: 100%;
 	height: auto; 
}

* html img, * html div, * html a, * html input, * html li { behavior: url(iepngfix.htc) }

body {
	background: #E9E6C2 url(../img/bottom-bg.jpg) bottom center repeat-x;
	font: 16px/20px "Myriad Pro","Myriad Web","Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
	color:#000033;
	text-align:center;
	margin:0;
	clear:both;
}

h1, h2, h2.welcome, h3, h4, h5 {font-weight:normal; margin:5px 0; padding:0; letter-spacing:1px;}

p {font-weight:normal; font: 13px/20px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}

h1 {
	font-size:34px; /* mostly for client names on client page and services name on services page */
	color:#BE1405;
}

h1#web {background:url(../img/icons/web.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#mobweb {background:url(../img/icons/mobweb.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#market {background:url(../img/icons/seo.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#print {background:url(../img/icons/print.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#email {background:url(../img/icons/email.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#photo {background:url(../img/icons/photo.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#video {background:url(../img/icons/video.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}
h1#host {background:url(../img/icons/hosting.png) left center no-repeat;padding:0;margin:0;padding-left:65px;line-height:48px;}

h2 {
	font-size:30px; /*page titles*/
	color:#000033;
}

h2.featured {
	font-size:25px;
	color: #000033;
}

h2.welcome {
	font-size:32px; /* home page welcome text */
	color:#BE1405;
}

h2 span {
	font-size:14px; /* text in parenthesis following page titles */
	color:#BE1405;
}

h2 span.plus {
	font-size:30px; /* text in paragraphs following page titles */
	color:#BE1405;
}

h2 span.late {
	font-size:12px; /* text in parenthesis following page titles for latest projects */
	color:#fff;
}

h3 {
	font-size:20px; /*section titles*/
	color:#000033;
}

h3.org {
	font-size:20px; /*section titles*/
	color:#BE1405;
}

h3.blk {
	font-size:20px; /*section titles*/
	color:#fff;
}

h3 span {
	color:#BE1405; /* plus signs in section titles */
}

h4 {
	font-size:16px; /* sub titles under page titles */
	margin:8px 0 15px 0;
}

h4 a:link { color:#BE1405; text-decoration:none; border-bottom:1px dotted #BE1405; margin:0 10px;}
h4 a:visited { color:#BE1405; text-decoration:none; border-bottom:1px dotted #BE1405; margin:0 10px;}
h4 a:hover { color:#BE1405; text-decoration:none; border-bottom:0;}


ul#plus li {
	background:url(../img/plus-bullet.png) left center no-repeat;
	font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:20px;
	padding-left:20px;
	list-style:none;
	margin:0 -30px;
}

ul.why li {
	background:url(../img/plus-bullet.png) left center no-repeat;
	font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	padding-left:20px;
	list-style:none;
	margin:0 -30px;

}

/* Breadcrumb stytles */

#bread {font-weight:normal; font: 16px/55px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; color:#363636;}

#bread span {color:#BE1405; font-weight:bold;}

#bread a:link, a:visited {
	text-decoration:none;
	border-bottom:0;
	color:#363636;
	font-weight:bold;
}

#bread a:hover {
	text-decoration:none;
	color:#BE1405;
	border-bottom:1px dotted #BE1405;
	font-weight:bold;
}

/* End Breadcrumb Styles */

#wrapper {
	background: url(../img/topper-bg.jpg) top center repeat-x;
	margin:0 auto;
	width:100%;
	height:inherit;
	clear:both;
}

#wrapper #topper #content {
	width:936px;
	text-align:right;
	clear:both;
	margin:0 auto;
}

#wrapper #topper #content h2.topnav {
	font-size:13px;
	color:#000033;
	float:right;
	margin:5px 0 10px 15px;
	padding:0;
	letter-spacing:1px;
	font-weight:normal;
}

#wrapper .inner-logo {
	float:left;
	width:205px;
}

#wrapper #topper #nav {
	width:936px;
	text-align:right;
	clear:both;
	margin:0 auto;
}

#wrapper #topper #nav ul {margin:0; padding:0; float:right; width:730px;}

#wrapper #topper #nav ul li {
	font-size:17px;
	color:#fff;
	float:right;
	margin:25px 10px 0 20px;
	padding:0;
	letter-spacing:2px;
	font-weight:normal;
	list-style:none;
	
}

#wrapper #topper #nav a:link, #wrapper #topper #nav a:visited {
	color:#fff;
	text-decoration:none;
	border-bottom:0px;
	font-weight:normal;
}

#wrapper #topper #nav a:hover, #wrapper #topper #nav a.active {
	color:#000033;
	text-decoration:none;
	border-bottom:2px #000033 dotted;
	font-weight:normal;
}

/* Home Page Styles */

#wrapper #home {
	width:950px;
	margin:0 auto;
	text-align:left;
	padding-top:55px;
	clear:both;
}

#wrapper #home #left {
	width:252px;
	float:left;
}

#wrapper #home #left p {
	color:#363636;
}

#wrapper #home #right {
	width:645px;
	margin-left:16px;
	float:left;
	background: url(../img/boxes-bg.png) top left repeat;
	border:1px solid  #fff;
	padding:15px;
}

img.origami {
	margin-right:30px;
}

#wrapper #home #right .mid1 {
	width:46%;
	float:left;
	margin-right:30px;
}

#wrapper #home #right .mid2 {
	width:47%;
	float:left;
}

/* End Home Page Styles */

/* Inner Pages with Latest Projects Styles */


#wrapper #inner {
	width:960px;
	margin:0 auto;
	text-align:left;
	padding-top:0px;
	clear:both;
}

#wrapper #inner #left {
	width:644px;
	margin-right:16px;
	float:left;
	background: url(../img/boxes-bg.png) top left repeat;
	border:1px solid #fff;
	padding:10px;
}

#wrapper #inner #left .mid1 {
	width:46%;
	float:left;
	margin-right:20px;
}

#wrapper #inner #left .mid2 {
	width:47%;
	float:left;
}

#wrapper #inner #right {
	width:250px;
	float:left;
	border:1px solid #fff;
	background:url(../img/boxes-org-bg.png) top left repeat;
	padding:10px;
}

#wrapper #inner #right p {
	color:#000;
	line-height:16px;
}

#right p a:link, #right p a:visited {
	color:#BE1405;
	text-decoration:none;
	font-weight:normal;
}

#right p a:hover {
	text-decoration:underline;
	color:#BE1405;
	font-weight:normal;
}

#left p a:link, #left p a:visited {
	color:#BE1405;
	text-decoration:none;
	border-bottom:1px dotted #BE1405;
}

#left p a:hover {
	color:#BE1405;
	text-decoration:none;
	border-bottom:0;
}

/* End Inner Styles */

/* Latest Projects Column Styles */

.latest {
	padding:3px;
	border-bottom:1px  dotted #fff;
	margin-bottom:5px;
	
}

.latest a:link, .latest a:hover {
	text-decoration:none;
	font-size:16px;
	color: #fff;
	margin:0;
}

.latest a:visited {
	text-decoration:none;
	font-size:16px;
	color: #CCCCCC;
	margin:0;
	font-weight:bold;
}
	

.latest:hover {
	padding:3px;
	border-bottom:1px solid #363636;
	margin-bottom:5px;
	background: url(../img/latest-bg.png) top center repeat;	
}

.latest h1 {
	color:#000033;
	margin:0;
	font-size:16px;
	padding:0 2px;
}

.latest .sub, #active .sub {
	font-style:italic;
	color:#fff;
	margin:0;
	font-size:12px;
	padding:0 2px;
}

#active {
	background: url(../img/latest-bg.png) top center repeat;
	padding:3px;
	border-bottom:1px solid #363636;
	margin-bottom:5px;
}

#active h1 {
	color:#000;
	font-size:18px;
	margin:0;
	padding:2px 2px;
}

/* End Latest Projects Column */

/* Portfolio Page */

#wrapper #port {
	width:912px;
	background: url(../img/boxes-bg.png) top left repeat;
	border:1px solid  #fff;
	padding:10px;
	clear:both;
}

#wrapper #port h4 {
	float:left;
	margin:8px 8px 15px 0;
	font-size:16px;
}

#wrapper #port #navigation {
	float:left;
	width:700px;
}

#navigation ul{
	margin:8px 0 15px 0;
	list-style:none;
	padding:0;						
}

#navigation ul li {
	display:inline;
	margin:0;
	padding:0;
	line-height:23px;
}
	
#navigation a {
	color:#BE1405;
	font-weight:normal;
	text-decoration:none;
	margin:0 10px;
}

#navigation a:hover {
	text-decoration:underline;
}				

#navigation a.scrolling{
	color:#BE1405;
}

#scroller{
	overflow:hidden;
	width:912px;
	position:relative;
	height:640px;
	float:left;
}
#scroller h2{
	color:#BE1405;
	margin:5px 0;
	font-size:16px;
}

#scroller a{
	color:#BE1405;
	font-weight:bolder;
	text-decoration:none;
}

.section{
	width:3000px;
	position:relative;
}

.section ul, .section li {
	margin:0;
	padding:0;
	list-style:none;
}

.section .sub{
	position:relative;
	float:left;
	padding:0;
	width:912px;
	height:700px;
}

ul#portlinks {
	margin:0px;
	width:912px;
	padding:0;
	clear:both;
}

ul#portlinks li {
	margin: 0;
	list-style: none;
	text-align: center;
	display: inline;
	float:right;
	color:#BE1405;
	line-height: 13px;
	font-size:16px;
	padding:0;
}

ul#portlinks li a {
	color: #000033;
	text-decoration:none;
	margin:0 5px;
}
ul#portlinks li a:hover {
	color: #BE1405;
}

.our_work ul {
	margin:0;
	padding:0;
}

.our_work li{
	list-style:none;
	float:left;
	background: #fff url(../img/test/bg_with_caption.png) no-repeat 0 0;
	margin:3px 15px 30px 0px;
	padding: 8px 7px 5px 8px;
	width:278px;
	position: relative;
	color:#f3f2ec;
}

.our_work li.last{
	margin-right:0;
}

#scroller .our_work li a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 129px;
	width: 258px;
	padding: 12px;
	color: #000033;
	font: 1.75em/1.2 "Avenir LT Std", Avenir, Helvetica, Arial, sans-serif;
}

.our_work li a:focus, .our_work li a:hover, .our_work li a:link { text-decoration: none; color:#f3f2ec; }

.our_work li img {
	position: absolute;
	top: 1px;
	left: 2px;
	height: 149px;
	width: 273px;
	border: 0;
}

.our_work li .caption_cover {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.our_work li .caption_cover a {
	display: block;
	height: 100%;
	width: 100%;
}


/* End Portfolio Page */

/* Client Page Rotator Styles */

.projects {
	width: 620px;
	background-color: #000033;
	position: relative;
	padding:12px;
	height:350px;
	margin:20px 0 5px 0;
}

.projects2 {
	width: 620px;
	background-color: #fff;
	position: relative;
	padding:12px;
	height:200px;
	margin:20px 0 5px 0;
}

.projects-bottom {
	width: 620px;
	height: 2px;
	overflow: hidden;
	clear: both;
}

ul#thumbnail {
	margin:0px;
	width:610px;
}

ul#thumbnail li {
	margin: 0;
	list-style: none;
	text-align: center;
	display: inline;
	float:right;
	color:#BE1405;
	line-height: 13px;
	font-size:18px;

}

ul#thumbnail li a {
	color: #000033;
	text-decoration:none;
	margin:0 5px;
}
ul#thumbnail li a:hover {
	color: #BE1405;
}

#large {
	width: 620px;
	height: 350px;
	float: left;
	display: inline;
	padding: 0;
	background: #000033 url(../img/spinner.gif) no-repeat 50% 50%;
}

#large2 {
	width: 620px;
	height: 200px;
	float: left;
	display: inline;
	padding: 0;
	background: #fff url(../img/spinner.gif) no-repeat 50% 50%;
}



/*Roster Styles */

#roster {
	width:915px;
	margin:0 auto;
	text-align:left;
	margin-top:35px;
	clear:both;
	border:0px solid #000033;
	padding:10px;
	border-top:3px dotted #fff;
	border-bottom:3px dotted #fff;
}

#roster .col {
	width:165px;
	padding:5px;
	float:left;
}

#roster p {
	margin:2px 0;
	padding:0;
	font: 12px/20px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

#roster a:link, #roster a:visited {
	color:#BE1405;
	text-decoration:none;
	border-bottom:1px dotted #BE1405;
}

#roster a:hover {
	color:#BE1405;
	text-decoration:none;
	border-bottom:0;
}

/* End Roster Styles */

/* Contact Form */

#contact-area {
	width: 600px;
	border:0px solid #000033;
	padding:15px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 380px;
	font: 14px/20px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 100px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #BE1405;
}

#contact-area input.submit-button {
	width: 80px;
	float: left;
	margin-left:190px;
}

label {
	float: left;
	text-align: left;
	margin-right: 10px;
	width: 180px;
	padding-top: 5px;
	font: 14px/20px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

/* Footer Styles 8 */

#footer {
	background: url() top left repeat-x;
	height:400px;
	width:100%;
	padding:25px 0 0 0;
	overflow:hidden;
}

#footer #content {
	width:936px;
	text-align:left;
	clear:both;
	margin:0 auto;
	font: 14px/22px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	height:320px;
	overflow:hidden;

}

#footer #content .lists {
	font-size:12px;
	color:#fff;
	float:left;
	margin:10px 15px 10px 0px;
	padding-right:15px;
	letter-spacing:1px;
	font-weight:normal;
	width:175px;
}

#footer #content ul {margin:0; padding:0;}

#footer #content ul li {
	color:#fff;
	margin:5px;
	padding:0;
	letter-spacing:2px;
	font-weight:normal;
	list-style:none;
	border-bottom:1px dotted #fff;
	line-height:24px;
}

#footer #content .mission {
	font: 12px/22px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	float:left;
	width:500px;
	margin:10px 0 0 0;
}

#footer #content .mission p {
	margin:0 0 8px 5px;
}

#footer a {
	color:#fff;
	text-decoration:none;
	

/* New Project Pages Slideshow */
#slideshow { /* left: 20px */ }
#naver { width: 620px; height: 50px; margin: 15px 0; padding: 0; } 
#naver li { width: 50px; float: right; margin: 8px; list-style: none; padding: 0; }
#naver a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#naver a.activeSlide { background: #ddd }
#naver a:focus { outline: none; }
#naver img { border: none; display: block }