/* 
Title:     Boudj Design master styles for screen media
Author:    David Boudjenah | http://www.boudj.fr/
Created:   25 Janvier 2009
*/

/* GLOBAL RESET
------------------------------------------------------------------*/
html,body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,blockquote,table,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img,abbr { border: 0; }
address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; }
ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6,p { font-size: 1.0em; margin: 0 0 .8em 0; padding: 0; }
.hide { display: none; }

a img, :link img, :visited img { border: 0; }
a, a:link{ text-decoration: none; color: #f5f4e9 ; outline: none; }
a:visited { text-decoration: none; outline: none; }
a:hover { color: #e8b43d; outline: none; }	

/* HEADINGS
------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; color: #8eab99}
h2{
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size:20px;
	color:#E8B43D;
	line-height:1.3em;
	text-align:justify;
	font-style:italic;
	font-weight: 400;
	margin-bottom: 30px;
}
h3{ font-size: 1.2em; margin: .6em 0 0 0; font-weight: normal; }

/* MAIN STRUCTURE
------------------------------------------------------------------*/
body {
	color: #E4D9BB;
	background: #010101 url(../images/background.png) no-repeat;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}
#container{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
#page {
	float:left;
	margin:0 auto;
	width:930px;
}
#header{
	height: 200px;
	text-align: left;
	padding-top: 15px;
}
#logo {
	float:left;
	margin-left:55px;
}
#logo h1, #logo span {
	display:none;

}
#nav { 
	width: auto;
	float:right;
	height:100px;
	margin-top:53px;
	text-align:center;

}

#nav ul li { 

	width: 68px; 
	height: 100px; 
	margin-right:35px;
	opacity: .5;
	_filter: alpha(opacity=50); // for IE5-7
	cursor: pointer;
	display:inline;
	float:left;
	-webkit-transition: all 0.5s ease-in-out;
	}
	
#nav ul li#contact {
	margin-right:0;
	}

	
#nav ul li a { 
	height:66px; 
	width: 66px; 
	border: 1px solid #fff; 
	display: block;
}
	
#nav ul li#galerie a { background: transparent url('../images/galerie.png') no-repeat  scroll 0 0 ; }
#nav ul li#expo a { background: transparent url('../images/expo.png') no-repeat  scroll 0 0 ; }
#nav ul li#jupiter a { background: transparent url('../images/jupiter.png') no-repeat  scroll 0 0 ; }
#nav ul li#preface a { background: transparent url('../images/guestbook.png') no-repeat  scroll 0 0 ; }
#nav ul li#contact a { background: transparent url('../images/contact.png') no-repeat  scroll 0 0 ; }

#nav ul li a span { 
	display: block; 
	font-size: 17px;
	line-height: 2em;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 66px;
	color:#e8b43d;
	}
	
#nav ul li#jupiter a span { line-height: 1em; padding-top: 3px; }

#nav ul li#guestbook a span { font-size: 15px; font-weight: bold; letter-spacing: 0; padding-top: 3px; }
	
#nav ul li a:hover span { color: #e8b43d ; }
	  
#nav ul li:focus ,
#nav ul li:hover,
#nav ul li:active  { opacity: 1; _filter: alpha(opacity=50); // for IE5-7 }
	  
#nav ul li.current {  opacity: 1; _filter: alpha(opacity=50); // for IE5-7; color: #f5f4e9 ; }
	  
#nav ul li.current a span,
#nav ul li.current a:focus span,
#nav ul li.current a:hover span,
#nav ul li.current a:active span { color: #f5f4e9;  }

#main { margin: 0px; width: 930px;  }

#main .leftCol { width: 430px; float:left; }

#main .leftCol .preface { padding:30px 50px 0 30px; }
#main .leftCol .actu {  }

#main .leftCol .preface p {
	font-size:14px;
	line-height:1.3em;
	text-align:justify;
	font-style:italic;
	}
	
	#main .leftCol .actu p {
	font-style:italic;
	font-size:14px;
	line-height:1.3em;
	text-align:justify;
	}

#main .leftCol .preface span { color: #E8B43D ; }
#main .leftCol .actu span { color: #E8B43D ; }
#main .leftCol .preface p.sign { text-align:right; color: #f5f4e9; margin-top: 30px}

#main .rightCol { width: 480px; float: right }
#main .rightCol img  { border: 2px solid #f5f4e9; }


/* GALERIE */


div#galerie
{
	float:left;
	width: 930px ;
	border: 0;
	bottom: 10px;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	list-style-type:none;
	margin:20px auto;
	padding:0;
	width:280px;
}

ul#galerie_mini li
{
	float:left;
	height:50px;
	margin-bottom:25px;
	margin-left:25px;
	width:50px;
}

ul#galerie_mini li a img
{
	margin: 20px 10px ;
	border: 1px solid #F5F4E9 ;
	-webkit-transition: all 0.5s ease-in-out;
	opacity:1;
	
}

ul#galerie_mini li a:hover img
{
	opacity: .5;
	_filter: alpha(opacity=50); // for IE5-7
}
ul#galerie_mini li a.active img
{
	opacity: .5;
	_filter: alpha(opacity=50); // for IE5-7
}

dl#photo
{
	float:right;
	margin:39px auto 0;
	width:480px;
}
dl#photo dt
{
	font: normal 1.3em Georgia, serif ;
	color:#333333;
}
dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 0 solid #dcb ;
}

.biographie {

	margin-left:50px;
}

.galeriejupinfo {

	margin-top:40px;
	text-align:center;
	font-size:19px;
	
}

.contact {

	margin-top: 60px;
	font-style:italic;
	
}

.contact ul li {

	margin: 0 0 10px;
	list-style-type: disc;
	list-style-position: inside;
	
}

.contact a { color: #e8b43d; }
.contact a:hover { text-decoration: underline;  }


.nicefont { color: #e8b43d;  }
a.nicefont:hover { color: #E4D9BB; }
.nicefont a:hover { color: #E4D9BB;  }
.galeriejupinfo span { display: block; }



span.date { font: italic 1.5em Georgia, serif ; color: #fff; display: block; margin: 15px 0 5px; }

span.descr { 
	background:transparent url(../images/puce.png) no-repeat scroll 0 11px;
	padding:1px 0 1px 10px;
	font-size:0.8em;
	color: #e8b43d; 
	display: block; 
	margin-bottom:15px; 
}

span.imp { font-size: 18px; }

span.prix { font: normal 1.5em Georgia, serif ; text-transform: uppercase; color: #f5f4e9  }

img.jupiter { width:480px; }

span.galeriejupiter { color: #e8b43d;  }

a.acces { font-size:0.8em; color:#e8b43d  }

a.acces:hover { text-decoration:underline;  } 


#footer { 
background: #010101 url(../images/footer.png) no-repeat center center; 
float: left; 
display: block; 
clear: both; 
width:100%; 
height:111px; 
margin-top: 50px; 
text-align:center }

#footer p { padding-top:42px; text-align:center; font-size: 0.8em; color:#666666;  }

#footer p a { color: #999999; }
#footer p a:hover { color: #e8b43d; }