/*===================================	
	layout.css
	webdev.juliendecaudin.com    
    by Julien Decaudin http://www.juliendecaudin.com
    18/07/2010
===================================*/

html, body
{
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}

body
{
    background-repeat:repeat-y;
    background-position:top left;
}

/*--------------------------------------------------=> HEADERS */
/* H1 */
h1
{		
	float:left;	
	padding-left:2px;
}

/* H2 */
h2{
	padding-bottom:15px;
}

/* H3 */
/*--------------------------------------------------=> CONTENT ELEMENTS */
/*-------------> Global */
.content_holder
{
    padding: 10px;
}

/*-------------> Paragraph */
p
{
    padding-bottom: 10px;
    margin: 0;
}

#page_copy p
{
	padding-bottom:20px;
}

/*-------------> Links */

#main_nav a,
#support_nav a,
.project_details a,
#projects_nav a span,
#page_copy a
{
    padding:0 2px;
}

/*-------------> Images */


/*-------------> Lists */
#project_thumbnails
{
	float:left;
	width:300px;
	padding-top:43px;
}

#project_thumbnails li
{
	float:left;
	padding-right:5px;
	padding-bottom:5px;
	line-height:0px;
}

/*-------------> Misc */
#preloader
{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	z-index:999;
}

/*--------------------------------------------------=> CONTENT LAYOUT */
/*-------------> Projects */
#projects{
	margin: 40px 0 0 210px;
	z-index:20;
}

.js #projects{
	position:absolute;
	width:99999px;
}

.project{
	position:relative;
	float:left;
	width:500px;
	height:188px;
	margin-top:40px;
}

#prj_all
{
	height:480px;
}

#projects h2
{
	position:absolute;
	top:0;
	left:0;
}

#projects .project_copy
{
	position:absolute;	
	top:30px;
	left:145px;
	width:250px;
}

#projects .project_image
{
	padding-top:32px;
	width:130px;
	height:130px;
}

#projects .project_details
{
	position:absolute;
	bottom:0;
	left:0;
}

#projects .project_details p
{
	padding-bottom:0;
}

#projects_thumbnails
{
	float:left;
	width:100%;
	margin-top:32px;
}

#projects_thumbnails li
{
	float:left;
	line-height:0;
	padding-bottom: 5px;
	padding-right: 5px;
}

.js #projects .off{
	cursor:pointer;
}

.js #projects .off h2,
.js #projects .off .project_copy,
.js #projects .off .project_details
{
	display:none;
}

.js #projects .off h2
{
	top:5px;
}

.js #projects .off .project_copy
{
	left:140px;
}

.js #projects .off .project_image img.default,
.js #projects .off #projects_thumbnails img
{
	opacity:0.2;
}

#projects .project_image img.over
{
	position:absolute;
	top:32px;
	left:0;
	opacity:0;
}

#projects .off .project_image img.over
{
	display:none;
	visibility:hidden;
}

.js #projects .off .project_details
{
	bottom:5px;
}


/*-------------> Copy */
#page_content
{
	width:960px;
	min-height:800px;
}

#page_copy,
#page_image
{
	margin-bottom:35px;
}

#page_copy
{
	float:left;
	width:450px;
	margin:15px 0 0 210px;
}

#page_image
{
	float:left;
	width:280px;
	margin:20px 0 0 20px;
}

/*--------------------------------------------------=> MASTER LAYOUT */
#page
{
	position:relative;
	width:100%;
	min-height:100%;	
}

.js #page{
	overflow:hidden;
}

#header
{
	position:relative;
	width:960px;
	height:65px;	
}

#header .content_holder
{
	padding:19px 0 0 13px;
}

#content
{
	position:relative;
	min-height:600px;
}

#content .content_holder
{
	padding:40px 0 0 0;
}

#footer
{    
	width:960px;
	position:relative;
	margin-top:-63px;
	height:63px;
	clear:both;
}

#footer .content_holder
{
	padding-right:0;
}

#footer p
{
	padding:0;	
}

/*Opera Fix*/
body:before 
{
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/*--------------------------------------------------=> NAVIGATION */
/* Main nav */
#main_nav{
	float:left;		
	margin:9px 0 0 30px;
}

#main_nav li{
	float:left;
	padding-right:26px;
}

#main_nav li.last
{
	padding-right:0;
}

/* Projects timeline */
#projects_timeline
{
	display:none;
	float:left;
	margin:2px 0 0 35px;
}

.js #projects_timeline
{
	display:block;
}

#projects_timeline_title
{
	position:absolute;
	display:none;
	top:47px;
	left:355px;	
}

#projects_timeline li
{
	float:left;
	margin:0 1px 0 0;
	padding:0;
}

#projects_timeline a
{
	display:block;
	width:20px;
	height:20px;
	background-repeat:no-repeat;
	background-position:0 14px;
}

#projects_timeline li.current a
{
	background-position:0 0;
}

/* Projects navigation */
#projects_nav
{
	position:absolute;
	top:85px;
}

#link_previous,
#link_next
{
	visibility:hidden;
	display:block;
	position:absolute;
	height:480px;
	z-index:50;
	background:url('/images/blank.gif') repeat 0 0;
}

.js #link_previous,
.js #link_next
{
	visibility:visible;
}

.js #link_previous
{
	display:none;
}

#link_previous
{
	width:180px;
	padding-left:14px;
}

#link_next
{
	left:708px;
	width:2000px;
}

/* Footer support navigation */
#support_nav
{
	float:left;
	width:100%;
	margin-bottom:8px;
}

#support_nav li.left
{
	float:left;
}

#support_nav li.right
{
	float:right;
}

/*--------------------------------------------------=> UTILITY CLASSES */
.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}

.halfwidth
{
    float: left;
    width: 50%;
}

.halfwidth_right
{
    float: right;
    width: 50%;
}

.thirdwidth
{
    float: left;
    width: 33%;
    padding: 3px 0 10px 0;
}

.nodisplay
{
    display: none;
}

.nopadding_top
{
    padding-top: 0;
}

.nopadding_bottom
{
    padding-bottom: 0;
}

.nopadding_vertical
{
    padding-top: 0;
    padding-bottom: 0;
}

.clearmargin
{
    margin: 0;
    padding: 0;
}

.clearer
{
    clear: both;
    height: 0;
    padding: 0;
    margin: 0;
}

.spacer
{
    clear: both;
    height: 25px;
    padding: 0;
    margin: 0;
}

.clearfix:after 
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix 
{
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/************************** TEMPORARY PAGE */
#temp{
	background:#fff;	
}

#temp #page{
	width:100%;
}

#temp #header{
	margin-top:150px;
	text-align:center;
}

#temp h1{
	float:none;
	width:auto;
	margin-bottom:35px;
}

#temp p{
	padding-bottom:25px;
}

#temp a{
	text-decoration:underline;
}