/*================================================== LAYOUT STYLES */
/*
    CSS Document for juliendecaudin.com
    By Julien Decaudin - 01/05/2009
*/

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

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

/*--------------------------------------------------=> HEADERS */
/* H1 */
h1
{
    
}

/* H2 */
h2
{
    padding: 2px 0 0 0;
}

#footer h2
{
	margin-top:7px;
	margin-bottom:13px;
}

#contact_form_container h2
{
	/*padding-left:14px;
	padding-bottom:0;*/
	margin-bottom:0;
	padding-left:14px;	
}

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

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

.home_copy p
{
	padding-bottom:20px;
}

.home_copy p strong
{
	padding:0px 2px;
}

.js #no_javascript
{
	display:none;
}

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

a
{
    
}

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

/*-------------> Lists */

/*-------------> Project */
#projects
{    
    z-index:20; 
    width:580px;   
    margin-left:185px;
}

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

.project
{
    float:left;
	width:610px;
    margin:40px 13px 25px 0px;
}

.js .project
{
	margin-bottom:0;
}

.current_project
{
    /*margin-left:185px;*/
}

ul.project_details
{
    padding-bottom:25px;
}

ul.project_details li
{
    display:inline;
    padding-right:20px;
}

ul.project_images
{
    float:left;
    width:350px;
    margin-left:-10px;
}

.js .disabled_project
{
    cursor:pointer;
}

.js ul.project_images
{
    display:none;
}

.js .current_project ul.project_images
{
    display:block;
}

ul.project_images li
{
    /*padding:10px;
    padding-bottom:7px;*/
    margin-bottom:20px;    
}

ul.project_images li a
{
	display:block;
	padding:10px;    
    width:300px;
    background-repeat:no-repeat;
    background-position:0 -186px;
}

ul.project_images li a:hover
{	
    background-position:0 0;
}

.home_copy
{
    float:left;
    width:410px;    
}

.project_copy
{
    float:left;
    width:200px;    
}

.project_copy p
{
	margin-top:6px;
}

.js .home_copy,
.js .project_copy,
.js .project_year
{
    display:none;
}

.js .current_project .home_copy,
.js .current_project .project_copy
{
    display:block;
}

/*-------------> Misc */


/*--------------------------------------------------=> FORMS */
#contact_form
{
	float:left;
	background-repeat:no-repeat;
	background-position:top left;
	width:270px;
	height:297px;	
}

#contact_form fieldset
{
	padding:15px 0 0 15px;
}

#contact_form_container p
{
	float:right;
	width:180px;
	padding-top:27px;
}

#submit_message
{
	float:left;
	width:190px !important;
	padding-top:12px !important;
}

form label
{
	float:left;
	display:block;
	margin-bottom:4px;
	line-height:15px;	
}

span.error
{
	float:right;	
	padding:0 9px 0 5px;
}

.input_text,
textarea
{
	border:none;
	background:none;
	/*background:red;*/
}

.input_text
{
	display:block;
	margin-bottom:16px;	
	padding:0;
	height:15px;
	width:240px;
	padding:0;	
}

textarea
{
	display:block;
	width:250px;
	height:130px;
}

button
{
	display:block;
	float:right;
	width:65px;
	height:25px;
	margin:7px 0 0 0;
	padding:0px 0 2px 0;
	border:none;
	background:none;
	cursor:pointer;
}

/*--------------------------------------------------=> CONTENT LAYOUT */
/*-------------> Columns */
/* utilities */
.column_half_left
{
    float: left;
    width: 49.1%;
}

.column_half_right
{
    float: right;
    width: 49.1%;
}

.column_third
{
    float: left;
    width: 32.1%;
}

.column_fourth
{
    float: left;
    width: 24.1%;
}

.column_last
{
    margin-right: 0;
}

/* specific */
#areaexp_container
{
	width:470px;
}

#areaexp_container li span
{
	display:none;
}

#areaexp_description
{
	margin-top:25px;
	width:300px;
}

/*--------------------------------------------------=> MASTER LAYOUT */
#page
{
    position:relative;
    width:100%;    
    height:100%;
    /*min-height:600px;*/
    background-repeat: repeat-x;
    background-position: left top;
}

.js #page
{
	overflow:hidden;
}

body > #page 
{
	height: auto; 
	min-height: 100%;
}

#header
{    
    position:absolute;
	width: 5000px;
    height:154px;    
    background-repeat: repeat-x;
    background-position: left top;
    top:0;
    left:0;
    z-index:50;
}

#header_inner
{
    width: 950px;
    height:140px;
    background-repeat: no-repeat;
    background-position: left top;
}

#connect
{
    float:left;    
    width:290px;
    height:100%;
}

.js #connect
{   
    margin-left:-260px;
}

#connect_content
{
    position:relative;
    float:left;
    width:229px;
    height:130px;
    padding:40px 0px 0px 30px;
    z-index:70;
}

#connect_link_container
{
    position:relative;
    float:left;
    width:31px;
    height:140px;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: top right;
}

#connect_link
{        
    position:absolute;
    width:11px;
    height:100%;
    background-repeat: no-repeat;
    background-position: -11px 0;
    z-index:80;
}

#connect.opened #connect_link
{
    background-position: 0px 0;
}

.connect_link_bar
{
    position:absolute;
    top:0;
    left:0;
    width:10px;
    height:140px;
}

#connect_link_bar_front
{
    z-index:40;
}

#connect_link_bar_back
{
    z-index:30;
}

#logo
{
    position:relative;
    float:left;
    width:655px;
    height:100%;
    background-repeat: repeat-y;
    background-position: left top;
}

#logo_content
{
    position:absolute;
    top:37px;
    left:45px;
}

#logo_content h1,
#logo_content h1 a,
#logo_content h1 a div
{
    display:block;
    width:547px;
    height:26px;
    background-repeat: no-repeat;
    background-position: left top;
}

#logo_content h1 a:hover
{
    text-decoration:none;
}

#logo_content h1 a div
{
	display:none;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}

#thumbnails_title_panel
{
    display:none;
    position:absolute;
    left:46px;
    bottom:0px;
}

#content
{
    position:relative;
    padding:195px 0 520px 0;
    min-height:750px;    
    z-index:5;
    background-repeat:repeat-x;
    background-position:left bottom;
}

#footer
{    
	clear:both;
	position:relative;
	height:455px;
    /*width: 5000px;*/
    margin-top:-455px;
    background-repeat:repeat-x;
    background-position:left top;
    z-index:15;
}

#footer_inner
{    
    position:relative;
	width: 950px;
	height:440px;
    padding:0px 15px 15px 15px;    
}

/*--------------------------------------------------=> NAVIGATION */
/* Connect links */
#connect_content ul
{    
    float:left;
}

#connect_content li
{
    float:left;
    padding-right:30px;
}

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

#connect_content li a
{
	display:block;	
	padding:0 0 0 0;
	text-align:center;
}

#connect_content li a span
{
	display:block;
	width:43px;
	height:43px;
	background-repeat:no-repeat;
	background-position:0 -43px;	
	margin:0 auto;
	cursor:pointer;
}

/* Project thumbnail navigation */
.thumbnails
{
    position:absolute;
    float:left;
    top:140px;
    left:0;
    height:30px; 
}

.thumbnails ul
{    
    float:left;
    width:9000px;
    height:30px;
}

.thumbnails li
{
    float:left;     
}

#thumbnails_bg
{
    z-index:10;
    background-repeat:no-repeat;
    background-position:0 0;
}

.js #thumbnails_bg ul
{
    margin-top:-30px;    
}

#thumbnails_front
{
    z-index:150;
}

#thumbnails_front a
{
    display:block;    
    width:35px;
    height:30px;
    background-repeat:no-repeat;
    background-position:0 -30px;
}

#thumbnails_front a.highlight
{
	background-position:0 0px;	
}

/* Project navigation */
#projects_nav_bg
{
    position:absolute;
    width:880px;
    height:590px;
    z-index:10;
}

#year
{
    position:absolute;
    left:185px;
    top:7px;    
}

#link_previous_bg
{
    float:left;
    display:block;
    width:75px;
    height:540px;
    background-repeat:no-repeat;
    background-position:-75px 0;
    margin:42px 0 0 11px;
}

#link_next_bg
{
    float:right;
    display:block;
    width:75px;
    height:272px;
    background-repeat:no-repeat;
    background-position:0 0;
    margin:122px 0 0 0px;
}

#link_previous,
#link_next
{
    position:absolute;
    display:block;
    float:left;
    height:540px;
    z-index:50;
    margin-top:42px;
}

#link_previous
{
    width:86px;
}

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

/* Footer top of the page link */
#link_top
{
	position:absolute;
	display:block;
	width:43px;
	height:21px;
	background-repeat:no-repeat;
	background-position:0 9px;
	top:9px;
	right:0px;
}

/* Footer Areas of expertise list */
#areaexp_container li
{
	padding-bottom:0px;	
}

#areaexp_container li a
{
	display:block;
	width:100%;
	padding:2px 0px 2px 0px;
}

/* Footer support navigation */
#support_nav
{
    float: left;
    position:absolute;
    bottom:30px;
}

#support_nav li
{
    float: left;
    padding-right: 21px;
}

#support_nav li.first a
{
    padding-left: 0;
}

/* Footer bottom line */
#footer_bottom_line
{
	position:absolute;
	bottom:5px;
}

#footer_bottom_line li
{
	float: left;
    padding-right: 10px;
}

#copyright
{
	
}

#credits
{
	
}

/*--------------------------------------------------=> 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 */