@charset "utf-8";
/*  ---------------- Pierre Croft - Folio CSS ----------------  */

* {
	padding:0;
	margin:0;
}

body {
	background-color: #FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	margin: 0;
	background: #E9E9E9;
}

#page_wrapper {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.clearfix {
  clear: both;
  font-size: 1px;
}

.toplink {
	text-decoration: none;
	color: #000;
	font-size: 8px;
	text-align:center;
	display: block;
	height: 12px;
	width: 75px;
	margin: 0 auto;
}

.toplink:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #0F7CB7;
	margin-bottom: -2px;
}


/* ---------------- Header Styles ----------------  */

#header_wrapper {
	height: 120px;
	width: 100%;
	display: block;
	background-color: #FFF;
}

#header_main {
	width: 960px;
	margin: 0px auto;
}

#header_main img {
	margin-left: 50px;
	margin-top: 19px;
	border: none;
	}
	
#header_shadow {
	width: 100%;
	background: #FFF url(../images/BG_headershadow.jpg) repeat-x;
	height: 30px;
}

/* ---------------- Header Styles - Navigation ----------------  */

#header_nav {
	width: 500px;
	height: 20px;
	margin-top: 68px;
	margin-right: 50px;
	padding: 0px;
	float: right;
}

.nav, .nav_selected {
	list-style: none;
	height: 20px;
	float: right;
	margin-left: 30px;
}

	.nav a, .nav_selected a {
	display: block;
	height: 26px;
	text-decoration: none;
	color: #000;
	font: 14px 'SansationBold', Arial, sans-serif;
	}
	
	.nav a:hover, .nav_selected a{
	text-decoration: none;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #0F7CB7;
	}
	
	.nav a:visited, .nav a:active, .nav_selected a:active, .nav_selected a:visited {
	color:#000;
	}
	
/* ---------------- Content Styles  ---------------- */

#content_wrapper {
	width: 100%;
	background-image: url(../images/BG_contentmain.jpg);
}

#content_main {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.content_title {
	font: 18px/27px 'SansationBold', Arial, sans-serif;
	text-align: center;
	margin: 20px auto 0px auto;
	background-image:url(../images/BG_title.jpg);
	background-position:center 40px;
	background-repeat:no-repeat;
	width: 960px;
	height: 75px;
	text-shadow: 0px 2px 0px rgba(255, 255, 255, 1);
}

/*
#content_separator_top {
	background-image:url(../images/separator_horz.jpg);
	background-position:center;
	background-repeat:no-repeat;
	width: 960px;
	height: 40px;
}
*/

/* ---------------- Content Menu to select type of work  ---------------- */

#content_menu {
	float: left;
	/* position: relative; */
	overflow: hidden;
	width: 100%;
	height: 35px;
	margin: 0px auto 0px auto;
	text-align: center;
	border-bottom: solid 1px #eaeaea;
	
}

	#content_menu ul {
	   clear:left;
	   float:left;
	   list-style:none;
	   margin:0;
	   padding:0;
	   position:relative;
	   left:50%;
	   text-align:center;
	}
	
	#content_menu li {
		display: inline;
		list-style: none;
		border: none;
		float: left;
		position:relative;
   		right:50%;
	}
	
	#content_menu li a{
		text-decoration: none;
		color: #000;
		height: 20px;
		width: 160px;
		display: block;
		margin: 0px 30px;
		font: 14px 'SansationRegular', Arial, sans-serif;
		text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
	}
	
	#content_menu li a:hover{
		text-decoration: none;
		color: #000;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		border-bottom-color: #0F7CB7;
	}

/*
#content_menu ul {
	margin: 0 auto;
	background-color:#F00;
}
*/


/* ---------------- Main Gallery ----------------  */

.bodytext {
	width: 620px;
	font-size: 1.4em;
	line-height: 1.5em;
	margin-left: auto;
	margin-right: auto;
}

.content_main {
	width: 960px;
	margin: auto 0 auto 0;
	padding: 0;
	overflow: hidden;
}

	.content_main li{
		display: block;
		width: 300px;
		height: 240px;
		margin: 35px 10px 35px 10px;
		list-style: none;
		float: left;
		border: none;
	}
	
	.content_main li.hiddenitem{
		display: none;
	}
	
	.content_main li a{
		width: 300px;
		height: 240px;
		color: #666;
		text-decoration: none;
		font-size: 1.2em;
		text-align: center;
		margin: 0 auto;
		display: block;
		border: 1px solid #888;
		-webkit-box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 1);
		-moz-box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 1); 
	}
	
	.content_main li a span{
		width: 180px;
		margin: 10px auto 0px auto;
		text-align: center;
		display: block;
	}
	
	.content_main li a img{
		border: none;
	}
	
	.content_main li a:hover {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); 
	}
	
	.content_main li a:hover span{
		color: #333;
		/* text-decoration: underline; */
		display: block;
		text-align: center;
	}

/* ---------------- footer styles ----------------  */

	#footer{
		width:100%;
		height:320px;
		margin: 60px auto 0px auto;
		background-position: top center;
		background-repeat: no-repeat;
		background-image: url(../images/BG_footer.jpg);
		background-color: #020616;
		font-size:1.2em;
		color: #ccc;
	}
	
		#footer_content {
			width: 430px;
			height: 140px;
			position: relative;
			margin: 0 auto;
			top: 70px;
		}
		
		h3 {
			border-bottom: 1px solid #666;
			height: 30px;
		}
		
		.column {
			width:110px;
			margin-right:50px;
			float:left;
		}
			.column ol {
				list-style:none;
				margin: 20px 0px 0px 0px;
			}
			
			.column ol a:link {
				color: #CCC;
				text-decoration:none;
			}
			
			.column ol a:hover, a:visited, a:active {
				text-decoration: underline;
				color: #CCC;				
			}
			
		p {
			margin-top: 20px;
		}

/* ---------------- These h tags are for cufon to replace the font ----------------  */

h1 {font-size:24px; color:#FFF;}

h2 {font-size:18px;}

h3 {font-size: 14px; color:#FFF;}