/*===================================	
	layout.css
	for illo.juliendecaudin.com    
    by Julien Decaudin http://www.juliendecaudin.com
    25/04/2010
===================================*/

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

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

/*--------------------------------------------------=> HEADERS */
/* H1 */
h1
{	
	text-align:center;
	padding-bottom:20px;
	padding-left:2px;
}

/* H2 */


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

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

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

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

.illo_list a,
#illo_nav a,
#main_nav a,
#support_nav a,
#illo_details a,
#page_copy a
{
    padding:0 2px;
}

/*-------------> Images */
img
{
}

/*-------------> Lists */
#contact_list
{
	text-align:center;
	padding-bottom:17px;
}

#illo_type_list
{
	float:left;
	padding-bottom:20px;
}

#illo_type_list li
{
	float:left;
	padding-right:4px;
}

#illo_type_list li.label
{
	padding-left:8px;	
}

#illo_type_list a
{
	display:block;
	background-repeat:no-repeat;
	background-position:50% -15px;
	width:16px;
	height:15px;	
}

#illo_type_list a:hover,
#illo_type_list a.current
{
	background-position:50% 0px;
}

#illo_list_holder
{
	float:left;
	width:600px;		
}

.current_sk
{
	margin-left:-170px;
}

.illo_list
{
	float:left;
	width:170px;
	padding-bottom:10px;
}

.illo_list li
{
	padding-bottom:3px;
}

.illo_list .prj_all
{
	margin-top:7px;
	margin-right:0px;
	padding-top:3px;
}

#illo_thumbnails
{
	width:750px;
	padding-top:35px;
}

#illo_thumbnails_primary
{
	float:left;
	width:300px;
}

#illo_thumbnails_secondary
{
	position:relative;
	float:right;
	width:330px;
}

#illo_thumbnails_cache
{
	position:absolute;
	display:block;
	width:330px;
	height:450px;	
	top:20px;
	left:0;
	opacity:0.5;
}

#illo_thumbnails ul
{
	float:left;
	width:330px;
	height:450px;	
}

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

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

#content_illo ul
{
	padding-bottom:25px;
}

/*--------------------------------------------------=> CONTENT LAYOUT */
#page_copy{
	float:left;
	width:450px;
	padding-top:34px;
}

#page_image{
	float:right;
	width:280px;
	padding-top:42px;
}

#illo_content{
	margin:0;
	padding-top:40px;	
	width:750px;	
	text-align:center;
	overflow:hidden;
	position:relative;
}

#illo_container{
	width:100%;
	height:563px;	
	margin-bottom:15px;		
}

.js #illo_container img{
	display:none;
}

#illo_container a{
	display:block;		
	overflow:hidden;
}

#illo_container a img{
	position:relative;
}

#illo_cache{
	position:absolute;
	width:750px;
	height:563px;
	top:40px;
	left:0;	
	background-repeat:no-repeat;
	background-position:top left;
	z-index:100;
}
/*
#illo_cache_previous{
	left:-1500px;	
}

#illo_cache_next{
	left:750px;	
}
*/
/* vertical centering */
.vcenter_outer{	
	overflow: hidden; 
	position: relative;
}
.vcenter_outer{
	display: table; 
	position: static;
}

.vcenter_middle{
	display: table-cell; 
	vertical-align: middle; 
	width: 100%;
}

.vcenter_inner{
	position:static;	
}

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

#column_left
{    
	float:left;
	width:180px;		
}

#column_left .content_holder
{
	padding:20px 0 10px 12px;
	overflow:hidden;	
}

#column_right
{    
	float:left;
	width:780px;		
}

#column_right .content_holder
{
	padding:0px 0 10px 30px;
	margin-top:29px;
}

#column_left,
#column_right
{
	overflow:auto;
	padding-bottom:60px;
}

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

#footer .content_holder
{
	padding-right: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;		
}

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

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

/* Illo nav */
#illo_nav
{	
	float:right;
	margin-right:334px;	
}

#illo_nav li span
{
	padding:0 2px;
}

/* Footer support navigation */
#support_nav
{
	float:left;
	width:100%;
}

#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;
}