/*======================================================
Title:      Myjudebox.com
Author:     Julie Baribeau :: judehbk31[AT]hotmail.com

Created:	2006
=======================================================*/

body {
	padding: 0;
	margin: 0;
	text-align: center;
	font-family:arial;
	font-size:11px;
	}
	
h1 {
	margin:0;
	padding:0 0 8px 0;
	font-size:28px;
	font-family:Trebuchet MS;
	font-weight:normal;
	color:#fff;
	background: url("../images/Separateur_Home.gif") no-repeat 2px 37px;
	}
	
h1 span {
	display:none;
	}
	
h2 {
	margin:0;
	padding:0 0 5px 0;
	font-size:11px;
	font-weight:bold;
	color:#CC6600;
	}
	
h3 {
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:bold;
	color:#81754F;
	}
	
h4 {
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:bold;
	color:#81754F;
	}
	
a {
	color:#fff;
	text-decoration:none;
	}
	
a:hover {
	color:#606060;
	}
	
ul {
	margin:0;
	list-style:none;
	}
	
/*#Next {
	border:0;
	float:right;
	padding:7px 35px 0 0;
	}
	
#Previous {
	border:0;
	float:left;
	padding:7px 35px 0 0;
	}*/
	
/************** Main Structure *************/

#header {
	height:16px;
	width:716px;
	margin-top:50px;
	margin-right:auto;
	margin-left:auto;
	background: #fff url("../images/Header.gif") no-repeat 0 0;
	text-align:left;
	color:#fff;
	}
	
	#header span {
		padding:1px 0 0 15px;
		}
		
	#header a:hover {
		color:#fff;
		}
		
#container {
	width:718px;
	height:460px;
	margin-right:auto;
	margin-left:auto;
	text-align:left;
	margin-top:20px;
	color: #000;
	background: #fff url("../images/Bkg_Content.gif") no-repeat 0 0;
	}
	
	#main-content {
		width:718px;
		height:290px;
		color: #81754F;
		background: #fff url("../images/Bkg_Content.gif") no-repeat 0 0;
		}
		
	#main-content-exp {
		width:718px;
		height:350px;
		color: #81754F;
		background: #fff url("../images/Bkg_Content_Exp.gif") no-repeat 0 0;
		}
		
	#boxes {
		width:718px;
		height:155px;
		margin-right:auto;
		margin-left:auto;
		color:#fff;
		}	
		
		#boxes img {
			float:left;
			padding:0 10px 0 0;
			}
			
		#boxes p {
			margin:0;
			padding:5px 0 5px 0;
			}
			
		#box2-large {
			width:460px;
			height:155px;
			float:left;
			margin:15px 0 0 0;
			padding:5px 0 0 10px;
			background: url("../images/Box2_Large.gif") no-repeat 0 0;
			}	
			
			#box2-large	h1 {
				background: url("../images/Separateur_Latest.gif") no-repeat 2px 37px!important;
				}
			
		#box1 ul{
			margin:35px 0 0 0;
			padding:0;
			width:100px;
			}	
#content {
	width:718px;
	height:260px;
	position:relative;
	color: #000;
	margin-top:10px;
	}	
		
	#content table {
		text-align:left;
		margin:0 0 0 65px
		}			
/*************************************
Footer
*************************************/			

	#footer {
		width:718px;
		height:10px;
		text-align:right;
		}
		
		#footer div {
			padding:5px 0 0 0;
			color:#666666;
			text-transform:uppercase;
			font-size:10px;
			}
			
/*************************************
Index
*************************************/		

#home {
	width:718px;
	height:260px;
	position:relative;
	color: #000;
	}
	
	#photo-flower {
		margin:30px 0 0 20px;
		float:left;
		}
		
	#title-julie {
		position:absolute;
		top:80px;
		left:360px;
		float:right;
		}
		
#box1 {
	width:219px;
	height:155px;
	float:left;
	margin:15px 13px 0 0;
	padding:5px 0 0 10px;
	background: #fff url("../images/Box1_Small.gif") no-repeat 0 0;
	}	
			
#box2 {
	width:219px;
	height:155px;
	float:left;
	margin:15px 13px 0 0;
	padding:5px 0 0 10px;
	background: #fff url("../images/Box2_Small.gif") no-repeat 0 0;
	}	
			
#box3 {
	width:219px;
	height:155px;
	float:left;
	margin:13px 0 0 0;
	padding:5px 0 0 13px;
	background: #fff url("../images/Box3_Small.gif") no-repeat 0 0;
	}	
			
	#box1 a, #box2 a, #box3 a {
		font-weight:bold;
		}	
			
/*************************************
Section Compétences
*************************************/		
			
#competences {
	color:#81754F;
	padding:10px 0 0 15px;
	}
	
	#competences #content1 {
		width:270px;
		float:left;
		padding:0 30px 0 0;
		}
		
	#competences #content1 #programmation {
			padding:0 0 10px 0;
			margin:0;
			}
			
		#competences #content1 #programmation li {
			display:inline;
			width:80px;
			padding:0 12px 0 0;
			margin:0;
			}
			
		#competences #content1 #environnements {
			padding:0 0 10px 0;
			margin:0;
			}
			
			#competences #content1 #environnements li {
				display:inline;
				width:80px;
				padding:0 15px 0 0;
				}
				
	#competences #content2 {
		width:170px;
		float:left;
		padding:0 30px 0 0;
		}
		
		#competences #content2 select {
			font-size:9px;
			width:165px;
			color:#CC6600;
			margin:0 0 12px 0;
			}
			
	#competences #content3 {
		width:170px;
		float:left;
		padding:0;
		}
		
		#competences #content3 select {
			font-size:9px;
			width:165px;
			color:#CC6600;
			margin:0 0 12px 0;
			}
			
/*************************************
Section Présentation
*************************************/		
	
#presentation-content {
	float:left;
	color:#81754F;
	padding:30px 0 0 0;
	}
	
	#presentation-content img {
		margin:0 20px 0 20px;
		}
		
	#presentation-content a {
		color: #81754F;
		font-weight:bold;
		}
			
	#presentation-content a:hover {
		color: #81754F;
		font-weight:bold;
		text-decoration:underline;
		}
		
/*************************************
Section Expériences
*************************************/

span.title {
	margin-left:4px;
    cursor: hand;
	}
div.TitleBar {
	padding:2px 0 0 0;
	height:16px;
	cursor: hand;
	border-bottom:1px solid #fff;
	border-top:1px solid #A0A0A0;
	border-left:1px solid #A0A0A0;
	}
div#formLetterDiv,div#formLetterDiv2,div#formLetterDiv3,
div#formLetterDiv4,div#formLetterDiv5,div#codeScroller {
	margin:10px 0 0 5px;
	float:left;
	background:#fff;
	}
div.logo {
	position:absolute;
	top:25px;
	left:110px;
	}
div.title_left {
	float:left;
	}	
div.year {
	margin:0 5px 0 0;
	float:right;
	font-weight:none;
	}
#back-top{
	margin:0;
	text-align:right;
	padding:0 0 5px 0;
	}
	#back-top a{
		text-decoration:none;
		}
	td.liens a {
		text-decoration:none;
		padding:0 10px 0 0;
		}
		td.liens a img {
			float:left;
			padding:0 10px 0 0;
			}
#formLetterAccordionContent, #codeContent{
		color:#81754F;
		}
		
/*************************************
Section Photos
*************************************/

#photo {
	width:718px;
	height:276px;
	position:relative;
	color: #000;
	padding:8px 0 0 0;
	}	
		
#gal_container {
	width:718px;
	height:260px;
	margin:0 0 15px 0;
	text-align:left;
	}

#gal_enlarge_container { 
	width: 346px; 
	height: 220px; 
	padding:0 0 0 15px;
	text-align:center;
	}
	
	#gal_enlarge_container img { 
		border:3px solid #fff;
		}
		
#gal_thumb_container_bottom {
	position:absolute;
	float:left;
	height: 155px;
	left:380px;
	top:13px;
	}
	
	#gal_thumb_container_bottom ul {
		margin:0;
		padding:0;
		float: left;
		width:500px;
		}
	
		#gal_thumb_container_bottom ul li {
			padding:0 10px 5px 0;
			display: inline;
			float: left;
			width: 89px;
			height: 67px;
			}	
			
	#latests-photos {
		margin:6px 0 0 3px;
		height:69px;
		}	
		
		#latests-photos img {
			margin:0 15px 0 0;
			padding:0;
			display:inline;
			float:left;
			width:89px;
			height:67px;
			border:3px solid #fff;
			}	
			
		#gal_thumb_container_bottom ul li img{ 
			border:3px solid #fff;
			}
			
		#latests-photos-date { 
			width:460px;
			height:12px;
			color:#ffffff;
			position:relative;
			}
			
			#latests-photos-date a:hover { 
				color:#FFCF63;
				}
				
		#latests-photos-date span.date { 
			padding:3px 0 0 2px;
			width:300px;
			float:left;
			display:inline;
			text-align:left;
			}
			
		#latests-photos-date span.flickr { 
			padding:3px 8px 0 2px;
			text-align:right;
			float:right;
			margin:0 23px 0 0;
			}
			
	#nav-photos { 
			width:340px;
			float:left;
			}
			
	#page-number { 
		position:absolute;
		top:330px;
		left:42%;
		}	
				
	#page-number span { 
			font-weight:bold;
			padding:0 5px 0 0;
			}
			
		#page-number a.selected { 
			text-decoration:underline;
			font-weight:normal;
			font-size:20px;
			}
			
/*************************************
Section Liens
*************************************/			

#links{ 
	padding:15px 0 0 15px;
	}	
	
#links a{  
	color:#666633;
	}	
	
#links h1{  
	font-size:12px;
	margin:0;
	padding:0;
	color:#666633;
	float:left;
	}	
				
	#link-column-left { 
		width:245px;
		margin:0;
		padding:0;
		list-style: none;
		float:left;
		}
		
		#link-column-left li { 
			margin:0 0 5px 0;
			}	
			
			#link-column-left li a{ 
				color:#CC6600;
				font-size:12px;
				}	
				
			#link-column-left li.selected { 
				color:#CC6600;
				font-size:24px;
				}		
				
	#link-column-middle { 
		width:210px;
		margin:0;
		padding:0;
		list-style: none;
		float:left;
		}
		
		#link-column-middle li { 
			color:#666633;
			font-size:10px;
			}	
			
	#link-column-right { 
		width:243px;
		margin:0;
		padding:0;
		list-style: none;
		float:left;
		}
		
		#link-column-right li a { 
			color:#666633;
			font-size:10px;
			}		
			
			#link-column-right li a:hover { 
				color:#fff;
				font-size:10px;
				}	
		
.content-images	{ 
	width:210px;
	float:left;
	}	
		
/*************************************
Section Compétences
*************************************/	
	
.vert {
color:#55AF28;
}
.gris {
color:#585857;
}
.logiciels {
border-collapse: collapse;

}
.logiciels td{
padding:2px 2px 2px 6px;
font-family: arial, helvetica, sans-serif;
font-size:11px;
color:#CC6600;
}
.logiciels th{
padding:2px 2px 2px 6px;
text-align:left;
font-size:20px;
color:#CC6600;
}
.end{
border-right: 1px solid #66CC33;
}

/*************************************
Section Contact
*************************************/

#contact #content {
	margin:90px 0 0 70px;
	width:200px;
	float:left;
	}
	
	#contact a {
		color: #81754F;
		font-weight:bold;
		}
		
	#contact a:hover {
		color: #81754F;
		font-weight:bold;
		text-decoration:underline;
		}
		
	#contact span {
		display:block;
		margin:0;
		color:#81754F;
		}
		
	#contact span.email {
		display:block;
		margin:25px 0 0 0;
		font-weight:bold;
		}
		
#contact #visual {
	float:right;
	display:block;
	}
	
	
/* NEW */	

#home {
	background-color:#181717;
	color:#fff;
	text-align:left;
	font-family:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
	}
	#home h1 {
		color:#fff;
		background:none;
		font-size:12px;
		}
#info {
	width:425px;
	height:600px;
	top:30%;
	left:80%;
	position:relative;
	background: #181717 url("../images/Bkg_Index.gif") no-repeat 0 0;
	}