/* --------------------------------------------------------
    Main stylesheet
    Site: BOCK
    Filename: main.css
   -------------------------------------------------------- */

/* --------------------------------------------------------
    COLORS
    Grey: 				#646466
    orange: 			#f6a800
   -------------------------------------------------------- */

@import url(reset.css);


/********** Karl *********/
.titre {
	color: #000 ;
	font-family: Arial, Verdana, sans-serif;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.2em;
}
.contact {
	color: #000;
	font-family: Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 1.2em;
}
a.contact:link {
	color: #000;
	decoration:none;
}

/********** commun *********/
html { font-size: 62.5%; height: 100%; }

body {
	background: #000 url(../img/bg.gif) repeat-x;
	color: #ccc ;
	font-family: Arial, Verdana, sans-serif;
	font-size: 120%;
	height: 100%;
	line-height: 1.8em;
	position: relative;
}

body.backPhoto {background: #000 url(../img/backgroundPhoto.gif) repeat-x;}
body.backPhotoNav {background: #000 url(../img/backgroundPhotoSingle.gif) repeat-x;}
body.film {background: #000 url(../img/backgroundVideo.gif) repeat-x;}

body.bio #container { background: url(../img/bio.jpg) 0 110px no-repeat; }
#container {
	width:900px;
	position: relative;
	margin: 0 auto;
}

p,ul,ol,table { margin-bottom: 1em; }
sup { font-size: 65%; line-height: 1; vertical-align: super; }
small { font-size: 90%; }

ul { margin-left: 20px; }
a { cursor: pointer; color: #fff; }
a:focus {  }
a:visited { }
a:hover, a:focus { color: #999999; }
a *, button * { cursor: pointer; }
hr { display: none; }

input, select, button, textarea, option { font-family: Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.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 */

p.txt { position:relative; margin: 20px auto 0; line-height:1.2em; width: 600px;}
p.txt strong { display: block; font-size: 130%; color: #fff; line-height:1.2em;}
p.txt span.white { display:block; color: #fff;}


.film p.txt { text-align: left; margin-top: 20px;  width: 620px;  height:100px; overflow: auto;}

/*************** structure *****************/
#header { height: 115px;}
body.backPhotoNav #header { height: 135px;}
body.film #header { height: 145px;}
body.film.film2 #header { height: 125px;}

body.fr #header h1 {
	background: url(../img/fr/logo.gif) no-repeat;
	height:92px;
	position: relative;
	width: 900px;
}

body.en #header h1 {
	background: url(../img/en/logo.gif) no-repeat;
	height:92px;
	position: relative;
	width: 900px;
}

#header h1 a {
	display: block;
	height: 100%;
	position: absolute;
	right:0;
	text-indent: -9999px;
	width: 500px;
}

#mainContent { height: 512px; }

#footer { 
	position: absolute;
	top: 621px;
	left: 550px;
}

/*************** navigation *****************/

ul.nav {
	background: url(../img/nav1-arrow.gif) right top no-repeat;
	list-style: none;
	margin:0 20px;
	width: 175px;
	height: 19px;
	position: relative
}

ul.nav ul { 
	background: url(../img/nav1-arrow.gif) right top no-repeat; 
	position: absolute; 
	left: 175px;top:0; 
	width: 400px;
	display: none;
}

#smFilm { width: 500px; }
#footer ul.nav { 
	background: none;
	width: 370px;
}

ul.nav ul ul { background: none; left: 330px;}


ul.nav li {
	display: inline;
	float: left;
	margin-right: 20px;
}

ul.nav li a { color: #999999; text-decoration: none; text-transform: uppercase; text-align: center;}
ul.nav li a:hover, ul.nav li a.active { color: #fff; }
ul.nav li a img { text-align:center; display:block; border: 1px solid #666; margin: 0 auto; width: 60px;}
ul.nav li a:hover img, ul.nav li a.active img { border: 1px solid #fff; }

ul.nav ul ul ul#smPersonnes { position: absolute; left: -550px; top:22px; width: 850px;}
ul.nav ul ul#smReportage { position: absolute; left: -215px; top:22px; width: 850px;}
ul.nav ul#smFilm .sousmenu3 { position: absolute; left: -215px; top:23px; width: 850px;}
ul.nav ul#smFilm li li { width: 120px; text-align: center;}

#smPhoto{ width: 330px;}
body.photo #smPhoto{ display: block;}
body.film #smFilm{ display: block; }
body.perso #smPerso{ display: block; }
body.portrait #smPortrait{ display: block; }
body.personnes #smPersonnes { display: block; }
body.reportage #smReportage { display: block; }
body.doc #smDocumentaires { display: block; }
body.fic #smFiction { display: block; }
body.VFX #smVFX { display: block; }
body.pub #smPub { display: block; }