/*------------------------------------------------------
Basic Style Sheet for ( leftcoaststudios.com )

version:	1.0
author:		Justin Tucker
email:		justin@leftcoaststudios.com
website:	http://www.leftcoaststudios.com

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

/* =Resets
------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,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;}
ol,ul{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;}
a { text-decoration: none; outline: none;}



/* =base (site wide styles)
------------------------------------------------------*/
html {
	overflow-y: scroll;
}

body {
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	background: #f2f2f2 url(../images/tile-bckgrnd.jpg) repeat-x top left;
}

#header,#port-intro,#content,#callouts,#footer {
	margin: 0 auto;
	position: relative;
	width: 940px;
}

a { color:#9CA23B; }

.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}
.center {text-align: center;}


/* =Header
------------------------------------------------------*/
#header {
	height: 104px;
	padding-top: 14px;
}

h1{
	width:280px;
	height:104px;
	background:url(../images/leftcoast-studios-logo.jpg) no-repeat;
}
h1 a:link, h1 a:hover, h1 a:visited, h1 a:active{
	display: block;
	width:280px;
	height:104px;
	text-indent: -10000px;
}


/* =Main Nav
------------------------------------------------------*/
ul#main-nav {
	position: absolute;
	top:13px;
	right: 3px;

}

ul#main-nav li {
	float: left;
}

ul#main-nav li a{
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: #111;
	font-weight: bold;
	display: block;
	padding: 32px 0 0 30px;
	width: 95px;
	height: 85px;
	background: url(../images/main-nav-off.jpg) 0px 1px no-repeat;
}

ul#main-nav li a:hover, 
#home .selected,
#about .selected,
#work .selected,
#services .selected,
#contact .selected {
	background: url(../images/main-nav-hover.jpg) 0px 1px no-repeat;
}

ul#main-nav li a span {
	display: block;
	font-size: 12px;
	margin-top: 3px;
	line-height: 12px;
	color:#9CA23B;
	width: 85px;
	font-weight: normal !important;
}


/* =Secondary Nav - portfolio nav
------------------------------------------------------*/

.portfolio{
	background:	url(../images/content-tile.jpg) top left repeat-y;
	overflow: auto;
}

#content-header{
	background: url(../images/content-header.jpg) top left no-repeat;
	width: 940px;
	overflow: auto;
	position: relative;
}

#content-footer{
	background: url(../images/content-footer.jpg) bottom left no-repeat;
	width: 940px;
	height: 8px;
	margin-bottom: 10px !important;
	margin: 0 auto;
}

#port-nav{
	width: 340px;
	float: left;
	margin-top: 9px;
	padding-left: 10px;
}

dl#categories-list {
	width: 312px;
	background: url(../images/categories-background.jpg) top left no-repeat;
	height: 202px;
	padding: 20px 15px 0 15px;
}

dl#categories-list dt{ padding-bottom: 8px; }

dl#categories-list dt,dl#categories-list dd { border-bottom: 1px dotted #fff; }

dl#categories-list a{
	color: #fff;
	display: block;
	width: 210px;
	padding: 4px 0 4px 3px;
}

dl#categories-list a:hover,
#home .cat-selected,
#about .cat-selected,
#work .cat-selected,
#services .cat-selected,
#contact .cat-selected 
{ color: #cbcf7a; }


#port-nav dt{ 
	color: #cbcf7a; 
	font-size: 14px; 
	border-bottom: 1px dotted #fff;}

#slider{
	position: relative;
}	

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
	
#slider li{ 
	width: 340px;
	overflow:hidden;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}

#slider dd {
	width: 160px;
	height: 86px;
	float: left;
	padding: 0 8px 10px 0;
	text-align: center;
}

#portfolio-samples {
	position: relative;
	width: 340px;
	padding-top: 10px;
	height: 310px;
	background: url(../images/samples-nav-bckgrnd.gif) bottom left no-repeat;
}

#prevBtn a, #nextBtn a{
	display:block;
	position: absolute;
	color: #fff;
	text-align: center;
	bottom: 0px;
	width: 80px;
	padding: 5px 0px;
}

#prevBtn a { left: 0px; }
#nextBtn a { right: 0px; }




/* =Main Content
------------------------------------------------------*/
#port-intro { 
	width:940px;
	height:303px;
	padding-bottom: 16px;
}

/* =Secondary Content
------------------------------------------------------*/
#callouts { background: url(../images/callouts-bckgrnd.jpg) top left no-repeat ;height: 200px; padding-bottom: 9px;}
#callouts dl{ float: left; font-size: 16px;}
#callouts .header { margin-top: 22px; }
#callouts p { font-size: 12px; margin: 5px 0;}
#callouts img { padding-right: 10px; }

#callouts #first { width:250px; padding-left: 23px;}
#callouts #second { width:420px; }
#callouts #third { 
	width:230px;
	height: 200px;
	padding-left: 10px;
	text-align: center;	
	background: url(../images/homepage-toolbox-img.jpg) no-repeat top center;
}


#port-content{
	width: 580px;
	height: 548px;
	float: left;
	margin-top: 9px;
}

#flash-content {
	width: 600px;
	height: 548px;
}

dl#page-greeting{
	width: 290px;
	color: #fff;
	line-height: 16px;
	padding: 23px 0 70px 5px;
}

dl#page-greeting dt{
	color: #cbcf7a; 
	font-size: 14px;
	margin-bottom: 8px;
	padding-bottom: 6px; 
}



/* about */
.about, .services { background:	url(../images/content-tile.jpg) top left repeat-y;}
.about #content-header,.services #content-header { padding-top: 30px; }
.about h3,.services h3{ 
	font-size: 34px; 
	margin: 0 30px 10px 30px; 
	line-height: 33px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #9ba23b;
}
.about p { padding: 0 30px 15px 30px; }


ul#services-list { padding: 5px 0 5px 11px; 
	overflow: auto;
	line-height: 1.2em;
}

ul#services-list li{
	width: 454px;
	height: 156px;
	background: url(../images/service-desc-backgrnd.jpg) top left no-repeat; 
	float: left;
	margin-bottom: 10px;
}

.spad { margin-right: 10px; }

ul#services-list h4 {
	font-weight: bold;
	font-size: 16px;
	margin: 21px 0 0 40px;
}
ul#services-list p {
	font-size: 12px;
	padding: 20px;
}

/* =Contact Page
------------------------------------------------------*/
.contact-form{
	background: url(../images/contact-form-background.jpg) top left no-repeat;
	height: 310px;
}

#contact-intro-box {
	width: 280px;
	padding: 50px 0 16px 20px;
	float: left;
	color: #fff;
	font-size: 16px;
}

#contact-intro-box dt{ font-size: 28px; margin-bottom: 5px;}
#contact-intro-box img{ padding-right: 10px; }
#contact-intro-box p{ font-size: 11px; padding: 8px 0;}

.header-green-text {
	color: #9ba23b;
}

#form-container{
	width: 608px;
	padding: 8px 18px 0 0;
	float: right;
}

fieldset { float: left; margin-top: 18px; }
fieldset#leftcol { padding-right: 32px; }

label { display: block; color: #fff; line-height: 12px; }
label span{ color: #9ba23b; display: block; font-size: 10px; }

input{ width: 240px; height: 16px; margin: 3px 0 23px 0; }

textarea{ width: 324px; height: 139px; margin: 3px 0 20px 0; }

#checkbox-container{ margin-top: 5px; }

.checkbox{
	width: auto;
	margin: auto;
	height: auto;
}

.checkboxlabel{ display: inline; }

#message{
	width: 300px;
	margin: 95px auto;
	color: #fff;
	font-size: 14px;
}

#message h2 { font-size: 22px; color: #9BA23B; font-weight: bold; }
#message p { margin-bottom: 20px; }
#message a { color: #9BA23B; }
#message a:hover { text-decoration: underline; }

.submit{
	border-top: 1px dotted #fff;
	clear: both;
	padding: 6px 0 0 0;
	color: #9ba23b;
	position: relative;
}

#submit{
	width: 111px;
	height: 19px;
	border: none;
	background: url(../images/submit-btn-img.jpg) top left no-repeat;
	cursor: pointer;
	position: absolute;
	top:6px;
	right: 0;
}

/* testimony callout */

#testimonials{
	background: url(../images/testimonial-background.jpg) top left no-repeat;
	width: 880px;
	height: 200px;
	clear: both;
	margin: 0 auto;
	padding: 0 30px;
}

#testimonials dt { 
	font-size: 26px;
	margin-bottom: 10px;
	padding: 15px 0px 5px 0;
	width: 100%; 
	border-bottom: 1px dotted #9ba23b; 
}

#testimonials dd { width: 270px; float: left; }
#testimonials .pad { padding-right: 30px; }
#testimonials dd h3 { font-size: 16px; line-height: 17px !important; }
#testimonials dd p { margin: 5px 0 15px 0; line-height: 14px;}

#testimonials a {
	background: url(../images/btn-img-on.jpg) 0px 11px no-repeat;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding: 10px 0 0 23px;
	height: 40px;
	
}

/* testimonys page */

#testimony-content{
	width: 100%;
	float: left;
	padding-top: 25px;
}

.testimony {
	padding: 15px 30px 20px 30px;
	clear: both;
	overflow: auto;
}

.testimony dt,.testimony dd { float: left; }
.testimony dt { padding: 0 15px 0 0; }
.testimony .title {
	font-size: 20px;
	border-bottom: 1px dotted #111;
	font-weight: bold;
	line-height: 20px;
	width: 380px;
	margin-bottom: 10px;
	padding-bottom: 5px;
}

.testimony .desc { width: 665px; margin-bottom: 10px; }
.testimony .desc h3{ 
	margin-left: 0 !important; 
	font-size: 24px;
	line-height: 26px;	
}
.testimony dd img { margin-top: 15px; }


/* =Footer
------------------------------------------------------*/
#footer{
	height: 55px;
	padding-top: 35px;
	margin-bottom: 50px;
	clear: both;
	background: url(../images/footer-background.jpg) top left no-repeat;
}

#footer, #footer a{
	color:#999;
	text-decoration: none;
	font-size: 10px;
}
#footer a:hover{
	text-decoration: underline;
}

#footer-nav {
	float: left;
	padding-left: 25px;
}

#copy{
	float: right;
	padding-right: 25px;
}