@charset "utf-8";
/*/////////////////////////////////////////////////////////////////////////////
   mise en page 
/////////////////////////////////////////////////////////////////////////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -265px;
	margin-left: -500px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #fff;
	behavior: url(css/csshover.htc);
	}

/*/////////////////////////////////////////////////////////////////////////////
   structure de la page 
/////////////////////////////////////////////////////////////////////////////*/
#container {
	width: 1000px;
	height: 530px;
	}
#header {
	height: 90px;
	width: 100%;
	color: #000033;
	background: #fff;
	}
#projets_container {
	height: 420px;
	width: 1000px;
	overflow:hidden;
	}
#portrait_container {
	height: 420px;
	width: 1000px;
	}


/*/////////////////////////////////////////////////////////////////////////////
   HEADER
/////////////////////////////////////////////////////////////////////////////*/
#logo {
	float: left;
	width: 390px;
	margin-top: 3px;
	font-size: 11px;
	line-height: 13px;
	}
#logo img {
	float: left;
	margin: 2px 20px 0 0;
	vertical-align: middle;
	}
#logo a {
	color: #000033;
	text-decoration: none;
	}
#logo a:hover {
	color: #00aad2;
	}

#top_nav {
	float: left;
	width: 450px;
	}
#top_nav  li {
	float: left;
	margin: 0 85px 0 30px;
	list-style-type: none;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size: 13px;
	}
#top_nav  li a {
	padding-left: 20px;
	color: #000033;
	text-decoration: none;
	background: url(../img/tmpl/top_off.gif) 0 5px no-repeat;
	}
#top_nav  li a:hover,
#top_nav  li a.active {
	color: #00aad2;
	background: url(../img/tmpl/top_on.gif) 0 5px no-repeat;
	}

#cat_nav {
	float: left;
	width: auto;
	margin-top: 19px;
	padding-left: 30px;
	}
#cat_nav  li {
	float: left;
	height: 25px;
	list-style-type: none;
	font-size: 12px;
	}
#cat_nav  li .types,
#cat_nav  li .types_active {
	margin: 0 136px 0 0;
	}
#cat_nav  li .presentation,
#cat_nav  li .presentation_active {
	margin: 0 97px 0 0;
	}
#cat_nav  li .localisations,
#cat_nav  li .localisations_active {
	margin: 0 130px 0 0;
	}
#cat_nav  li a {
	padding-left: 20px;
	color: #000033;
	text-decoration: none;
	background: url(../img/tmpl/li_off.gif) 0 3px no-repeat;
	}
#cat_nav  li a:hover,
#cat_nav  li .types_active,
#cat_nav  li .presentation_active,
#cat_nav  li .localisations_active,
#cat_nav  li .dates_active  {
	color: #00aad2;
	background: url(../img/tmpl/li_on.gif) 0 3px no-repeat;
	}

div#header ul#cat_nav li:hover ul {
	display:block;
	}

#ss_cat_nav,
#ss_cat_nav_small {
	display: none;
	position: absolute;
	z-index: 100;
	top: 50px;
	left: auto;
	width: 144px;
	height: 220px;
	padding: 4px 8px 6px 8px;
	margin-top: 10px;
	list-style-type: none;
	background-color: #fff;
	border: 2px solid #3fbfdd;
	}
#ss_cat_nav {
	height: 220px;
	overflow-y: scroll;
	}
#ss_cat_nav_small {
	height:auto;	
	}
#ss_cat_nav li,
#ss_cat_nav_small li {
	height: auto;
	width: 100px; 
	list-style-type: disc;
	margin-left: 10px;
	padding-left: -5px;
	font-size: 10px;
	line-height: 15px;
	}
#ss_cat_nav li a,
#ss_cat_nav li a:hover,
#ss_cat_nav_small li a,
#ss_cat_nav_small li a:hover {
	padding-left: 0;
	background: none;
	}
#ss_cat_nav li:hover,
#ss_cat_nav li a.sel ,
#ss_cat_nav_small li:hover,
#ss_cat_nav_small li a.sel{
	color: #00aad2;
	}

/*/////////////////////////////////////////////////////////////////////////////
   BOITES
/////////////////////////////////////////////////////////////////////////////*/
p.br,
p.dk,
p.tr,
a.br,
a.dk,
a.tr {
	display: block;
	position: relative;
	float: left;
	margin: 0 5px 5px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	}
p.br,
p.tr,
p.dk,
a.br,
a.dk {
	width: 90px;
	height: 90px;
	padding: 5px;
	}
p.tr,
a.tr {
	padding: 0;
	width: 100px;
	height: 100px;
	}
p.br,
a.br{
	background-color: #00aad2;
	}
p.dk,
a.dk {
	background-color: #000033;
	}
p.tr {
	}
	
p.br em,
p.dk em,
p.tr em,
a.br em,
a.dk em,
a.tr em {
	display: block;
	height: 9px;
	font-size: 9px;
	text-align: right;
	font-weight: normal;
	font-style: normal;
	}

p.br strong,
p.dk strong,
p.tr strong,
a.br strong,
a.dk strong,
a.tr strong {
	display: block;
	margin-top: 17px;
	font-size: 30px;
	font-weight: normal;
	}

p.br span,
p.dk span,
p.tr span,
a.br span,
a.dk span,
a.tr span {
	position: absolute;
	width: 90px;
	bottom: 5px;
	display: block;
	font-size: 10px;
	font-weight: normal;
	}
.col {
	float: left;
	width: 105px;
	}

/*/////////////////////////////////////////////////////////////////////////////
   PAGE PROJET
/////////////////////////////////////////////////////////////////////////////*/
#legende {
	float: left;
	margin: 0 10px 0 5px;
	width: 300px;
	}
#legende h1, .h1 {
	font-family: 'Arial Black', Gadget, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	color: #00aad2;
	}
.h1 span {
	text-transform: none;
	color: #000033;
	}
#legende h2 {
	font-size: 11px;
	font-weight: normal;
	color: #00aad2;
	}
#legende #specs {
	font-size: 10px;
	}
#legende #desc {
	margin-top: 20px;
	text-align: justify;
	font-size: 10px;
	}
#images {
	float: left;
	}
#images img {
	margin-left: 5px;
	float: left;
	}
#test {
	width: 4700px;
	}
.crc {
	margin-top: 4px;
	}

/*/////////////////////////////////////////////////////////////////////////////
   PAGE PORTRAIT
/////////////////////////////////////////////////////////////////////////////*/
#portrait_left {
	float: left;
	width: 440px;
	}
#portrait_right {
	float: right;
	width: 520px;
	}
	
#portrait_left h1 {
	font-size: 11px;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	color: #00aad2;
	}
	
#portrait_left p{
	margin-bottom: 10px;
	font-size: 10px;
	}
	
#portrait_left .bleu {
	color: #00aad2;
	margin-bottom: 0px;	
	}

.cv {
	clear: left;
	width: 440px;
	font-size: 10px;
	}
.cv dt {
	float: left;
	width: 75px;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	color: #00aad2;
	}
.cv dd {
	float: left;
	}
#portrait_left em {
	font-style: normal;
	color: #00aad2;
	}
a.liens {
	color: #000033;
	text-decoration: none;
	}
a.liens:hover {
	color: #00aad2;
	text-decoration: underline;
	}
	

/*/////////////////////////////////////////////////////////////////////////////
   commun
/////////////////////////////////////////////////////////////////////////////*/

.scrollbar{
	float: left;
	background-color: #eee;
	margin-top: 10px;
	height: 15px;
	width: 1000px;
	}
.handle{
	float: left;
	top: -10px;
	height: 50px;
	width: 195px;
	background: url(../img/tmpl/handle.gif) 0 10px no-repeat;
	}
.handle:hover{
	background: url(../img/tmpl/handle_on.gif) 0 10px no-repeat;
	}
	
/* hack webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#projets_container {
	overflow: auto;
		}
	.scrollbar{
	visibility: hidden
		}
	.handle{
	visibility: hidden
		}
	}