/* ---------------------------------------------------
* CSS Screen pour Sopyrec.com
* version 1.0 - Juillet 2007
* Auteur : Erwann Ser
------------------------------------------------------
*/
body {
	padding-bottom: 15px;
	font: 75%/1.5 Tahoma, Arial, Helvetica, sans-serif; 
	text-align:center;
	background: #C6CBDE url(../images/bg.gif) repeat-x;
	color:#38393D;
}

/*RUB ACTIVES*/
#equipe #sopy a, #historique #sopy a, #missions #miss a, #cas_concrets #cas a, #liens #lien a, #contact #ctc a 
{background: #BD7700 url(../images/menu_bg_1.gif); color:#FFF}
#historique #sopy ul a, #equipe #sopy ul a {background: url(../images/menu_bg.gif) repeat-x; color: #38393D}
#historique ul #hist a, #equipe ul #equi a, #historique #sopy ul a:hover, #equipe #sopy ul a:hover, #historique #sopy ul a:focus, #equipe #sopy ul a:focus {background: #BD7700; color: #FFF;}

#accueil #menus li#acc a, #contact #menus #ctc a {background-position: 0 -25px; color:#FFF}
#map #plan a {background-position: 0 -117px; color: #3A3A3A;}


#container {
	max-width: 774px;
	position: relative;
	margin: 0 auto 10px auto;
	text-align:left;
	background:#FFF;
}
#content {
	padding: 0 4%;
	border-left: 1px solid #4A519E;
	border-right: 1px solid #4A519E;
	border-bottom: 1px solid #FFF;
}

/*=------------------------ ELEMENTS COMMUNS ----------------------*/

/*Reset CSS*/
ul {margin:0; padding:0;}
li {list-style:none}
h1,h2,h3,h4,h5 {font-size:1em; margin-top:0}
a img {border: none;}

strong {color:#835000}
abbr {border: none;}
p {
	margin: 0 0 .7em;
	font-size: 1.05em;
	text-align:left;
	margin-bottom: .9em;
	color:#38393D;
	background: transparent;
	}
#content p {max-width: 470px;}
ul.arrow1 li {	
	background:url(../images/arrow1.png) no-repeat 0 .5em;
	padding-left: 19px;
	margin-bottom: .5em;
	}
ul.arrow2 li {	
	background:url(../images/arrow2.png) no-repeat 0 .35em;
	padding-left: 19px;
	margin-bottom: .5em;
	}
#content .pdf {background: url(../images/icone_pdf.gif) no-repeat; padding-left: 22px}
hr {
	visibility:hidden;
	clear:both;
	height: 1px;
}
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.contain_float, .format_context {overflow:hidden;}

/*ACCESSIBILITE
=--------------------------------------=*/
img {
	max-width: 95%; 
	height: auto;
	}
.hidden {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}

/*TITRES
=----------------------------------------*/
h2 {	
	font-size: 2.1em;
	margin: 0 0 1em;
	line-height:1.2em;
	color: #353FB8;
	font-weight: normal;
	border-bottom: 1px solid #CED2F0;
	}
#accueil h2, #contact_us h2 {	
	margin-bottom: .2em;
	border:none;
	}
h3 {
	font-size: 1.2em;
	margin: 1.5em 0 .5em;
	border-top: 1px solid #E5E5E9;
	border-bottom: 1px solid #DEDEE2;
	background: #E9E9EF url(../images/h3_bg.gif) repeat-x bottom;
	text-transform: uppercase;
	}
h3 span {background: url(../images/h3_arrow.png) no-repeat 0 -5px;	padding-left: 30px; display:block;

	}
h4 {
	font-size: 1.3em; 
	margin: 0 0 .3em; 
	color: #835000;
	}
#equipe h3 {margin: 0 0 1.4em;}

/*LIENS
=--------------------------------------=*/
#topbar a, #content a {padding: 0 2px;}
a:link {background-color: transparent; color:#0D238A}
a:visited {color:#7B7D8A}
#footer a:link:hover, #content a:link:hover, #content a:visited:hover {text-decoration: none}
#content a:link:focus, #content a:visited:focus, #content a:link:active, 
#content a:visited:active {
	background-color: #343D9E; 
	color:#FFF; 
	text-decoration: none;
	}

/*=------------------------- HEADER -----------------------------*/
#topbar {
	padding: 0 8px;
	background: #4A519E;
	color:#FFF;
	height: 23px;
	line-height: 23px;
	}
#crn_tl, #crn_tr {
	position:absolute;
	width: 5px;
	height: 23px;
}
#crn_tl {background: url(../images/corner_top-left.gif); left:0}
#crn_tr {background: url(../images/corner_top-right.gif); right:0}

#topbar p {color:#FFF;}
#topbar #en {background: url(../images/drapeau_en.gif) no-repeat 0; padding-left: 23px; margin-right: 8px}
#topbar #de {background: url(../images/drapeau_de.gif) no-repeat 0; padding-left: 25px;}
#topbar #fr {background: url(../images/drapeau_fr.gif) no-repeat 0; padding-left: 21px;}
#topbar a:link, #topbar a:visited  {color:#FFF; background: #4A519E; text-decoration: none;}
#topbar a:link:hover, #topbar a:visited:hover {text-decoration: underline}
#header #topbar a:focus {background-color:#FFF; color: #0D238A;}

#crnl, #crnr {position:absolute; top:0}
#crnl {left:-5px}
#crnr {right:-5px}

#logo_menu {
	background: #FFF url(../images/top_bg.gif) repeat-x top;
	border-left: 1px solid #4A519E;
	border-right: 1px solid #4A519E;
	}
h1 img {margin: 18px 0 0 3%;} 

/*MENU
=-----------------------------------------------------------------------*/
#menus {
	height: 25px;
	margin: 23px 0 0 3%; 
	padding-bottom: 25px; 
	position:relative;
	}
#menus li {
	display: inline; 
	position:relative; 
	z-index:2;
	}
#menus li a {
	float:left; 
	height: 25px; 
	line-height: 25px;
	background: url(../images/menu_bg.gif) repeat-x;
	border-right: 1px solid #9F9F9F; 
	}
#menus li a:hover, #menus a:focus {background: #BD7700 url(../images/menu_bg_1.gif); color:#FFF}
#menus li#acc {text-align:center;}
#menus li#acc a {
	background:url(../images/menu_acc.png) no-repeat; 
	width: 40px;
	}
#menus li#ctc a {
	background:url(../images/menu_ctc.png) no-repeat; 
	border: none;
	width: 47px;
	}
#menus li#cli a {
	border: none;
	margin-left: 10px;
	}
#menus li#cli a {
	background: url(../images/menu_client.png) no-repeat; 
	width: 95px;
	}
#menus li#cli.engl a {
	background: url(../images/menu_client_en.png) no-repeat; 
	width: 114px;
	}
#menus li#cli.deu a {
	background: url(../images/menu_client_de.png) no-repeat; 
	width: 132px;
	}
#menus li#acc a:focus, #menus li#acc a:hover, #menus li#cli a:focus, #menus li#cli a:hover, 
#menus li#ctc a:focus, #menus li#ctc a:hover {background-position: 0 -25px}

#menus a {
	background: #fff;
	padding: 0 10px; 
	text-decoration: none;
	color: #3A3A3A;
	}
#menus li#plan {position:static; text-align:center;}
li#plan a {
	position:absolute;
	padding:0 6px;;
	right: 15px;
	top: -92px;
	height: 117px;
	width: 131px;
	text-transform: uppercase;
	letter-spacing: .34em;
	text-indent: .15em;
	border: none;
	background:url(../images/plan_acces.png) no-repeat;
	}
#menus #plan a:hover, #menus #plan a:focus {background: url(../images/plan_acces.png) 0 -117px no-repeat; color: #3A3A3A;}
#menus #sopy {position: static}
#menus li ul {
		position:absolute;
		top: 25px;
		left:65px;
		width: 100px;
		}
	#menus li ul li {
		display: block; 
		border: 1px solid #CCC;
		border-top: none;
		}
	#menus li ul li#hist {border-top: 1px solid #AAA;}
	#menus li ul li a {
		float:none;
		height: 23px;
		background: #F5F5F5 url(none);
		border: none;
		padding: 0 7px;
		display:block;
		}
	#menus li ul li a:focus, #menus li ul li a:hover {background: #BD7700;}            

 /*=---------------------------- CONTENU --------------------------------*/

#visuel {
	border: 1px solid #999;
	margin: 7px 3% 30px 0;
	}
#presentation {max-width: 400px;}
#contact_us {
	float: right;
	margin-top: -90px;
	text-align:right;
	border-left: 1px solid #999;
	padding-left: 15px;
	}
#contact_us h2 {
	margin-bottom: .3em;
	line-height: 1em; 
	font-size: 1.5em; 
	}
#contact_us p {text-align:right; font-size: .95em}
#ttt {
	border-left: 1px solid #9E9E9E; 
	padding-left: 15px;
	}

/*Equipe
----------------------------------------------------*/
#equipe h3 {margin: 1.5em 0 1em}
#equipe #contact_us {margin:0}

.direction {
	float: left;
	border: 1px solid #E0B87C;
	padding: .6em .8em 1em;
	margin: 0 18px 30px 7px;
	background: #FCF9EB;
	color:#222;
	}
.equipe {
	width: 650px; 
	padding-bottom: 35px; 
	margin-left: 7px;
	}
.equipe li {
	float: left;
	width: 270px;
	border: 1px solid #D3D3DE;
	padding: .6em .9em .8em .6em;
	margin: 0 18px 18px 5px;
	background: #F1F1F5;
	color:#222;
	}
.equipe strong {font-size: 1.1em;}
.portraits {margin: 3px 12px 0 0;}

/*Missions
----------------------------------------------------*/
#missions #content ul  {margin-left: 12px}
#missions #content li  {margin-bottom: .3em; font-size: 1.2em}

/*Cas_concrets
----------------------------------------------------*/
#cas_concrets h3  {
	background: none; 
	text-transform: none; 
	border:none; 
	font-size: 1.3em;
}

/*Liens_utiles
----------------------------------------------------*/
#liens #contact_us { margin-top: -30px;}
#liens #content ul li {margin-left: 10px;}
#liens #content ul a {
	background: url(../images/liens_ext.gif) no-repeat right; 
	padding-right: 12px;
	}
#liens #content ul a.en {background: none;} 
.eng #content ul a {background: none !important;} 
.eng #content ul a.en {background: url(../images/liens_ext.gif) no-repeat right !important;} 

#liens #content ul a:focus, #liens #content a:active {background-color: #0D238A;}
#contact #content ul  { margin: 15px 0 0 10px}
#contact #contact_us { margin-top: -5px}

/*Plan d'accès
----------------------------------------------------*/
#map #contact_us {margin-top: 20px;}
#load {
	position:absolute;
	top: 410px;
	left:320px;
	z-index:0;
	}
iframe {position: relative; z-index:1;}

/*=--------------------------- FOOTER -----------------------------*/

#footer {
	height: 26px; 
	line-height: 26px;
	padding: 0 8px;
	background: #60616A;
	font-size: .9em;
	}
#footer p {
	float:right;
	color:#FFF;
	}
#footer a:link {color:#FFF}
#footer a:visited {color:#AAA}
	
#crn_bl, #crn_br {
	position:absolute;
	width: 3px;
	height: 26px;
}
#crn_bl {background: url(../images/corner_bott-left.gif); left:0}
#crn_br {background:  url(../images/corner_bott-right.gif); right:0}