/************************************************************************************************
* Josh Knox - Photographer & Videographer online portfolio
* August 2009
* Authors: Chris Whatley & Seb Kern
************************************************************************************************/

/* Site wide rules 
************************************************************************************************/
body {
	margin:0;
	padding:0;
	border:0;
	height:100%;
	font-family: Georgia,"Times New Roman",Times,serif;
	background: #000000 url(../images/site_bg_2.jpg) top center no-repeat;
	background-attachment:fixed;
	font-size: 90%;
	line-height: 1.5em;
	color: #000000;
}

/* Homepage Fade-In */
#body_wrap{position:absolute; bottom:0; left:0; width:100%; height:5000px; z-index:50;}

a {
	outline-style: none;
}

h1, h2, h3, h4, h5, h6, ul {
	margin: 0;
	padding: 0;
}

/* Our content container
************************************************************************************************/
#pageWrapper {
	/*color: #0099ff;*/
	color: #ffffff;
	margin: 0 auto;
	padding: 10px;
	min-width:500px;
	width: 875px;
}

#footer, #content {
	padding: 10px;
}

.textHolder {
	background-color: #0F0F0F;
	filter: alpha(opacity=80); 
	opacity: 0.70; 
	padding: 10px 15px 15px 15px;
	margin-bottom: 15px;
}

/* Main Logo and tagline text
************************************************************************************************/
#masthead {
	margin: 0 auto;
	width: 97%;
	text-align: center;
}

#masthead h1 {
	font-size: 80px;
	font-weight: bold;
	margin: 10px 0 15px 0px;
	color: #ffffff;
}

/* Main Navigation
************************************************************************************************/
#mainNav {
	text-align: center;
}

#mainNav ul {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ffffff;
	height: 30px;
}

#mainNav ul li {
	list-style-type: none;
	display: inline;
	margin: 0 10px 0 10px;
	padding: 0;
	color: #000000;
}

a.mainNavLink, a.mainNavLink:visited, a.mainNavLink:active {
	font: 25px 'Academy Engraved LET', serif;
	color: #0099ff;
	text-decoration: none;
}

a.mainNavLink:hover {
	color: #ff0099;
}

/* Content
************************************************************************************************/
#content {
    margin: 20px 0 10px 0;
	padding: 10px 25px 10px 30px;
	min-height: 480px;
}

#content h2 {
	background-color: #0F0F0F;
	filter: alpha(opacity=85); 
	opacity: 0.85; 
	width: 220px;
	padding: 6px;
	margin: 10px 0 25px 5px;
	margin-left: 35%;
	font-size: 30px;
	color: #ffffff;
	text-align: center;
}

#content h3 {
	margin: 5px 0 10px 5px;
	font-size: 20px;
}

#content h3 a:link, #content h3 a:visited, #content h3 a:active {
	text-decoration: none;
	color: #0099ff;
}

#content h3 a:hover {
	text-decoration: underline;
}

#content h6 {
	margin: 5px 0 10px 5px;
	font-size: 20px;
}

/* Home page
************************************************************************************************/
#index_pic {
	margin: 10px auto;
	border: 3px solid #ffffff;
}

/* Photos page
************************************************************************************************/
ul#photoGallery {
	list-style: none;
	margin: 0 ;
	padding: 0;
}

li#lifestyle, li#portrait, li#action {
	display: inline;
	float: left;
	margin: 10px 5px 10px 5px;
	text-align: center;
}
li#lifestyle h6, li#portrait h6, li#action h6 {
	background-color: #0F0F0F;
	filter: alpha(opacity=80); 
	opacity: 0.70; 
	width: 250px;
	padding: 3px;
}

li#lifestyle h6 a, li#portrait h6 a, li#action h6 a {
	border: 0;
}

#lifestyle a:link, #lifestyle a:visited, #lifestyle a:active, #portrait a:link, #portrait a:visited, #portrait a:active, #action a:link, #action a:visited, #action a:active {
	border: 4px solid #ffffff;
	display: block;
	width: 255px;
	height: 170px;
}

#lifestyle a:hover, #portrait a:hover, #action a:hover {
	border: 4px solid #ff0099;
}

#action_gallery_items a, #lifestyle_gallery_items a , #portrait_gallery_items a {
	display: none;
}

/* Movies page
************************************************************************************************/
.movie_item {
	clear: left;
	width: 75%;
	margin: 0 auto 15px;
	height: 118px;
	padding: 15px;
	background-color: #0F0F0F;
	/* The hover class ruleset doesn't work when the opacity is applied to the parent div, so we have taken it out for now... */
	/*filter: alpha(opacity=85); 
	opacity: 0.85; */
	padding: 10px 15px 15px 15px;
}
	
.movie_item a{
	margin: 0 15px 20px 0;
	float: left;
}

.movie_item a:link, .movie_item a:visited, .movie_item a:active {
	border: 4px solid #ffffff;
	width: 200px;
	height: 115px;
	display: block;
}

.movie_item a:hover {
	border-color: #ff0099;
}

/* Contact page
************************************************************************************************/
#contact {
	filter: alpha(opacity=85); 
	opacity: 0.80; 
	background-color: #0F0F0F;
	padding: 15px;
	width: 350px;
	margin: 0 auto;
}

#contact h3 {
	text-align: center;
}

/* The Footer
************************************************************************************************/
#footer {
	clear: both;
	padding: 5px 10px 15px 0;
	border-top: 1px solid #ffffff;
	color: #ffffff;
	text-align: center;
}

#footer h3 {
	float: right;
}