/*  
Site: http://cody-jones.com
Description: Site designed for Cody Jones Web Portfolio
Version: 1.1
Author: Cody Jones
Author URI: http://cody-jones.com
*/

/* Typography */

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/League_Gothic-webfont.woff') format('woff'),
         url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SortsMillGoudyRegular';
    src: url('../fonts/GoudyStM-webfont.eot');
    src: url('../fonts/GoudyStM-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GoudyStM-webfont.woff') format('woff'),
         url('../fonts/GoudyStM-webfont.ttf') format('truetype'),
         url('../fonts/GoudyStM-webfont.svg#SortsMillGoudyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SortsMillGoudyItalic';
    src: url('../fonts/GoudyStM-Italic-webfont.eot');
    src: url('../fonts/GoudyStM-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GoudyStM-Italic-webfont.woff') format('woff'),
         url('../fonts/GoudyStM-Italic-webfont.ttf') format('truetype'),
         url('../fonts/GoudyStM-Italic-webfont.svg#SortsMillGoudyItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**/

p.serif {
	font-family: 'SortsMillGoudyRegular', Helvetica, serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.6em;
	color: #666;
	letter-spacing: 1;
	}

p.italic {
	font-family: 'SortsMillGoudyItalic', Helvetica, serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.6em;
	color: #666;
	}


.wrapper {
	margin: 0px auto;
	padding-left: 15px;
	padding-right: 15px;
	width: 930px;
	position: relative;
	}

a {color: #000; text-decoration: underline; }
#mygallery a {color: #ccc; text-decoration: none; }

h1.fontface {
	text-transform: uppercase; 
	font: 32px/52px 'LeagueGothicRegular', Arial, sans-serif;
	letter-spacing: 2;
	color: #666;
	}

h2 {
		font-size: 20px;
          color: #333;
          text-shadow: 1px 1px 0px #ffffff;
          font-weight: bold;
          margin-bottom: 1px;
          }
h3 {font-size: 12px; color: #333; }
h4 {font-size: 12px; color: #666; }
h5 {font-size: 10px; color: #999; }
h6 {text-align: justify; }

/*----Text styling / Paragraphs-----*/

.panelp {color: #8c8683; font-size: 12px;} /*Class for paragraphs inside a panel slider */

#content p img {background: #f5f5f5; border: 1px solid #e9e9e9; float: left; padding: 5px; margin: 5px 10px 0px 0px;}
#content p img.right {float: right; margin: 5px 30px 10px 60px;}
#content p img.simple {background: none; border: none; padding:0; margin: 0}
.work {background: #f5f5f5; border: 1px solid #e9e9e9; float: left; padding: 5px; margin: 5px 10px 0px 0px;}


.news p {border-bottom: 1px solid #e9e9e9; padding-bottom: 14px; margin-bottom: 5px;}
.news p:last-child {border: none; margin-bottom: 0px;}

.home {padding-top: 10px;}
.home img {margin: 0px 5px;}

blockquote {
  background: url(../images/quote1.gif) left top no-repeat;
}
blockquote p {
  padding: 0 60px;
  background: url(../images/quote2.gif) right bottom no-repeat;
  font-style: italic;
}

.listitem li {
	padding-left: 15px;
	margin-left: 4px;
	background: url(../images/listitem.gif) no-repeat left ;

} 
p {
	padding-bottom: 10px;
}

.specs li  {
	text-align: left;
	background: #f5f5f5; 
	border: 1px solid #e9e9e9; 
	padding: 5px; 
	margin: 5px 10px 0px 0px;
	float: left;
}



/*---------------Header Part----------------*/
	
#bigheader {
	position: relative;
	height: 450px;
	background: #000 url(../images/home.jpg) repeat center top;
	overflow: hidden;
	}

#smallheader {
	height: 100px;
	background: #000 url(../images/home.jpg) repeat center top;
	overflow: hidden;
	}

#logo {
	float: left;
	width: 465px;
	height: 75px;
	padding-top: 22px;
	overflow: hidden;
}

#logocenter {
	width: 930px;
	padding-top: 180px;
	text-align: center;
}

#alert {
	background: url(../images/alert.png) no-repeat;
	position: absolute;
	top: 0px;
	left: 113px;
	width: 737px;
	height: 42px;
}
	
#alert p {
	padding-top: 5px;
	padding-left: 85px;
}
#togglegallery {
	float: right;
	width: 70px;
	height: 55px;
	overflow: hidden;
	padding-top: 45px;
}

	/*-------Search-------*/
	#right {
		float: right;
		width: 250px;
		overflow: hidden;
		height: 60px;
		padding-top: 43px;	
	}
	
	.search input, .search button {
		border: none;
		float: left;
	}
	
	.search input.box {
		color: #666;
		border: 1px solid #666;
		width: 150px;
		height: 15px;
		padding: 2px 5px;
		background: url(../images/bg_1.jpg);
		margin-right: 5px;
	}
	
	.search input.box:focus {
		border: 1px solid #000;
	}
	
	.search button.btn {
		width: 60px;
		height: 22px;
		cursor: pointer;
		text-indent: -9999px;
		background: url(../images/search.png);	
	}
	
	.search button.btn:hover {
		background: url(../images/searcha.png);	
	}

		/*-----------Slide Gallery----------------*/
		
		.stepcarousel{
		position: relative; /*leave this value alone*/
		overflow: scroll; /*leave this value alone*/
		width: 930px; /*Width of Carousel Viewer itself*/
		height: 300px; /*Height should enough to fit largest content's height*/
		}
		
		.stepcarousel .belt{
		position: absolute; /*leave this value alone*/
		left: 0;
		top: 0;
		}
		
		.stepcarousel .panel{
		float: left; /*leave this value alone*/
		overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
		margin-right: 10px; /*margin around each panel*/
		width: 930px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
		}
		
					/*-----------Slide Gallery Panel Styles----------------*/
					
						/*----Panel 1-----*/
		
						#panel1l {
							float: left;
							width: 330px;
							padding-left: 40px;
							padding-top: 40px;
						}
						
						#panel1r {
							float: left;
							width: 520px;
							padding-right: 40px;
							padding-top: 60px;
						}					
						
						/*----Panel 2-----*/
						
						#panel2 {
							padding-top: 30px;
						}
						
						
						/*----Panel 3-----*/
						
						#panel3l {
							float: left;
							width: 520px;
							padding-left: 40px;
							padding-top: 60px;
						}
						
						#panel3r {
							float: left;
							width: 330px;
							padding-right: 40px;
							padding-top: 40px;
						}
						
						/*----Panel 4-----*/
						
						
						/*----Panel 5-----*/



/*---------------Content Part----------------*/

#contentpart {
	background: #fff  url(../images/bg_1.jpg) repeat-x;
}

#content {
	clear: both;
}

.title {
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
	

		/*---------------Menu----------------*/
		
		.menu {
			float: left;
			height: 50px;
			margin-bottom: 30px;
			list-style: none;
			}
		
		.menu li {
			float: left;
			
			}
		
		.menu li a{
			float: left;
			color: #666;
			text-decoration:none;
			display: block;
			padding-left: 15px;
			padding-right: 15px;
			height: 36px;
			padding-top: 14px;
			min-width: 35px;
			text-align: center;
			}
		
		.menu li a:hover{
			background: #d46036;
			color: #fff;
			}
		
		.menu li.current a {
			background: #cccccc;
			color: #fff;
			}
			
		#arrow {
			clear: both;
			height: 39px;
			padding-left: 750px;
			overflow: hidden;
		}
			
					/*---------------3 Column Layout (3 equal columns)----------------*/
					
					#column1 {
						float: left;
						width: 280px;
						border-top: 4px solid #D46036;
						padding: 20px 0 0 0;
					}
					
					#column2 {
						float: left;
						width: 280px;
						margin-left: 45px;
						margin-right: 45px;
						border-top: 4px solid #36AAD4;
						padding: 20px 0 0 0;

					}
					
					#column3 {
						float: left;
						width: 280px;
						border-top: 4px solid #D46036;
						padding: 20px 0 0 0;
					}
					
					/*---------------2 Column Layout (with small sidebar)----------------*/
					
					#main {
						float: left;
						width: 585px;
					}
					
					#maintext {
						float: left;
						width: 885px;
					}
					
					#sidebar {
						float: left;
						width: 300px;
						margin-left: 45px;
					}
					
							/*---------------Sidebar menu----------------*/
					
							.sideimg {
								padding-right: 5px;
								border-right: 1px solid #e9e9e9;							
							}
							.sidemenu {
								list-style: none;
							}
							
							.sidemenu li {
								border-bottom: 1px solid #e9e9e9;
								height: 27px;
								padding-top: 8px;
								padding-left: 8px;
								}
							
							.sidemenu li a {
								text-decoration:none;
								color: #666;
								font-size: 11px;
								}
							
							.sidemenu li a:hover{
								padding-left: 5px;
								}
								
							
							/*---------------Contact form----------------*/
							

							#contact-area {
								width: 585px;
							}
							
							#contact-area input, #contact-area textarea {
								padding: 5px;
								width: 356px;
								margin: 0px 0px 10px 0px;
								border: 1px solid #ccc;
							}
							
							#contact-area textarea {
								height: 90px;
							}
							
							#contact-area textarea:focus, #contact-area input:focus {
								border: 1px solid #666;
							}
							
							#contact-area input#submit {
								width: 70px;
								float: right;
								background: #000;
								color: #fff;
								border: 1px solid #e9e9e9; 
								padding: 5px;
								margin-right: 100px;
								cursor: pointer;
							}
							
							label {
								float: left;
								text-align: right;
								margin-right: 15px;
								width: 100px;
								padding-top: 5px;
							}			
							




/*---------------Footer----------------*/

#leftfoot {
	clear:  both;
	float: left;
}

#bottom {
	clear: both;
	margin: 30px 0px 30px 0px;
	padding-top: 10px;
	border-top: 1px solid #e9e9e9;
	text-align: right;
}