/* h2osa.com | styled by digital design | www.digital-design.ch */

/* GLOBAL */
* { margin: 0; padding: 0; border: 0 }
html, body { height:100 } /* une h est nécessaire et pour content, et pour mycontent afin que le % ait un sens */
body { font-size: 62.5%; background-color: #fff }
/*scrollbar-3dlight-color:#eaeaea;scrollbar-arrow-color:#f00;scrollbar-base-color:#eaeaea;scrollbar-darkshadow-color:#f00;scrollbar-face-color:#fff;scrollbar-highlight-color:#eaeaea;scrollbar-shadow-color:#db797a*/
p, a, td, input, textarea { font-family: "trebuchet ms", trebuchet, arial, helvetica, sans-serif }
p, td, input { font-size:1.1em; margin:0; color:#333 }
input, textarea {	margin:0; padding: 0 4px; color:#333; font-weight: bold }
a { color:#10598C; text-decoration: none; font-weight:bold }
a:hover { text-decoration: underline; cursor: pointer }
.spacer24 { position: relative; display: block; width: auto; height: 24px; clear: both }
.spacer16 { position: relative; display: block; width: auto; height: 16px; clear: both }

/* TEXTE */
#content p, #content form { padding-left: 16px; padding-right: 16px; padding-bottom:1.6em } /* ne surtout pas positionner ici, sinon animated divs foutues! */
#content input, #content textarea { border: 1px solid #eadcc1 }
#content input.noborder { border: none }

h1 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-align: right; color:#850606; font-size:1.8em; margin-top: -4px; padding-right:16px; padding-bottom: 12px }
h2 { color:#555; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size:1.4em; margin: 0; padding: 0; padding-left:16px; padding-right:16px; padding-bottom:0.8em }
h2.chapeau { position: relative; height: auto; width: 516px; color: #850606; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size:1.6em; padding-top: 17px; padding-left: 24px; padding-right: 16px; padding-bottom:0.8em; margin-bottom: 0;background: url(../layout/bg_title.png) no-repeat 0 0 }
div.indent { padding-left: 8px }
div.indent16 { padding-left: 16px }
div.indent24 { padding-left: 24px }

h2.chapeau img.haspdf { float: right; width: 16px; height: 16px; margin-right: 40px; padding: 0; margin-top: -1px}

a.plus, a.minus, h2.chapeau a { display: block; width: 436px; color: #850606; font-family: Arial, Helvetica, sans-serif }
a.plus, a.minus { padding-left: 24px }
a.plus:hover, a.minus:hover, h2.chapeau a:hover { color: #10598c; text-decoration: none}
a.plus { background: url(../layout/bg_plus.gif) no-repeat 0 0.12em}
a.plus:hover { background: url(../layout/bg_plus_ov.gif) no-repeat 0 0.12em }
a.minus { background: url(../layout/bg_minus.gif) no-repeat 0 0.12em }
a.minus:hover { background: url(../layout/bg_minus_ov.gif) no-repeat 0 0.12em }
a.pdf { display: block; height: 48px; background: url(../layout/pdf_transp.png) no-repeat 0 top; padding-left: 56px; line-height: 80px} /* solution pour l'alignement vertical en bas: utiliser line-height de même hauteur que height centre verticalement; aligner image en haut, puis doubler line-height pr à height, moins hauteur de la ligne :-) */
a.vdo { display: block; height: 48px; background: url(../layout/vdo_transp.png) no-repeat 0 top; padding-left: 56px; line-height: 80px}

h3 { color:#850606; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size:1.1em; padding-left:16px; padding-right:16px  }
h3.soustitre { color:#333; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size:1.3em; line-height:1.3em; padding-top:0; padding-left:24px; padding-right:16px; padding-bottom: 1em }

div.chapeau { height: 172px; background: url(../layout/bg_title.png) no-repeat 0 0 }
div.chapeau h2 { font-family: "trebuchet ms", trebuchet, arial, helvetica, sans-serif; font-weight: normal; font-size:2.1em; line-height: 1.6em; text-align: right; padding-top:16px; padding-left: 16px; margin-right: 24px; color: #666 }
div.chapeau img { float: right; width: 198px; height: 132px; margin: 16px; margin-left: 24px }

.leftcol, .rightcol { float: left; width: auto }

#content ul, #content ol { margin-bottom: 1.1em; margin-left: 5.6em; font-family: "trebuchet ms", trebuchet, arial, helvetica, sans-serif; font-size:1.1em; color:#333}
#content ul li { margin-bottom: 0.2em; margin-left: -1.7em; _margin-left: -2em; padding-left: 1.7em; _padding-left: 2em; list-style-image: none; list-style-type: none; background-image: url(../layout/redbullet.gif); background-repeat: no-repeat }
/* impossible d'utiliser list-style-image à cause d'un bug d'IE6; d'où le background-image */

p.indent {margin-left:1.6em}
.bold {font-weight:bold}
.red,div#status p.red {color: #850606}
.blue {color:#10598C}
.gris {color:#333}
.prtlogo {display:none; width:0; height:0}


/* ELEMENTS DE FORMULAIRE */
.login p, .login a {color: #312E2A; font-size: 1em; text-decoration: none}
.login input  { color: #312E2A; font-size: 1em; width: 128px; margin-bottom: 0.4em}
.login input.button, input.button  { margin-top: 1.6em;color: #312E2A; font-size: 1em; text-decoration: none; background-color: #eaeaea;width:80px; height: 20px; border: outset 2px #eaeaea }
.login input.button:focus, input.button:focus  { color: #fff; background-color: #f00 }

/* HEADER */
#logo {position:absolute;top:0;left:0;width:200px; height:40px; background: url(../layout/bglogo.gif) no-repeat 0 0}
.logore {position:absolute;left:16px;top:18px;border:none; text-decoration:none}
#greybar {float:right; width:800px;height:28px;background-color: #f00;}
#pub {float:right; width:800px;height:34px;background-color: #FFFFFF;padding-top:12px}
#pub p {display:inline;padding:0;margin:0;padding-left:18px;margin-right:60px;font-size: 11px;font-weight:bold;background-image: url(../layout/redbullet.png);background-repeat:no-repeat;background-position: 0 3px;color:#312E2A}

#lang {
position: absolute;
top: 0;
right: 16px;
}

#lang ul {
position: relative; 
list-style-type:none;
/*  width: auto; 
height: 2em; */
}

#lang li {
position: relative; 
display:block;
float:left;
height: 2em;
line-height: 2em;
}

#lang a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFF;
border-left:1px solid white;
text-transform:uppercase;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
height: 2em;
line-height: 2em;
}

#lang a.current {
color: #aaa;

}

#lang a:hover {
background-color: #fff;
color: #10598C;
text-decoration: none
}

/* COLONNE DE GAUCHE */
div#col p  {font-size:1.1em; line-height:1.6em;margin:0;color:#312E2A}
div#col a {margin:0}
div#contact p {font-size:1em;color:#312E2A}
div#contact br {line-height:0.75em}

/* TEASERS */
.Teaser  { line-height: auto; position: relative; width: 220px; height: auto; }
.TeaserTop, .TeaserMiddle, .TeaserBottom  { position: relative; width: 220px }
.TeaserTop   { padding: 8px 0 0; background-position: center top;  }
.TeaserMiddle  { padding-top: 10px; background-position: center top }
.TeaserBottom  {  margin-top: 0px; padding-bottom: 24px; background-position: center bottom }

.TeaserTop h4, .TeaserTop h5 { font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; margin-left: 12px; }
/* .TeaserMiddle p, .TeaserBottom p, .TeaserMiddle a { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; font-size: 1em; line-height: auto } */
/* .TeaserMiddle a: visited, .TeaserMiddle a:focus, .TeaserMiddle a:hover, .TeaserMiddle a:active { color: white } */
div#col div.TeaserMiddle a:focus, .TeaserMiddle a:hover, .TeaserMiddle a:active, .TeaserBottom a:focus, .TeaserBottom a:hover, .TeaserBottom a:active { font-family: Verdana, Arial, Helvetica, SunSans-Regular, sans-serif; font-size: 1em; line-height: 1.6em;text-decoration: underline }
.TeaserMiddle p, .TeaserBottom p { position: relative; width: 172px; color: #333; text-align: left }
.TeaserMiddle p { position: relative; font-size: 1.2em; padding-left: 24px}
div#col div.TeaserBottom p { font-family: Verdana, Arial, Helvetica, SunSans-Regular, sans-serif; font-size: 1em; line-height: 1.6em; padding-left: 24px}
div#col div.TeaserBottom a { font-family: Verdana, Arial, Helvetica, SunSans-Regular, sans-serif; color:#10598C}
.TeaserMiddle a, .TeaserBottom a { text-decoration: none }
.TeaserMiddle img { margin-top: 6px; margin-bottom: 6px}
.TeaserMiddle a img { border:none}
.TeaserTop h4, h5 {  width: 196px; font-weight: bold }
.TeaserTop h4 {  font-size: 18px; color: #10598C } /* #10598C */
.TeaserTop h5 {  font-size: 12px; color: #444 } /* #8C8E94 */
/* .TeaserBottom span.right { position: absolute; bottom: 0; right: 0 } */
.txtright {display: inline; float: right}

.sec2tc { background-image: url(../layout/bg_teaser_top.gif); }
.sec2mc { background-image: url(../layout/bg_teaser_middle.gif); }
.sec2bc { background-image: url(../layout/bg_teaser_bottom.png); }

/* NAV */
.mlmenu {margin-top: 8px; text-align:left}

/* FOOTER */
/*div#footer p{font-size: 1.1em; padding: 0; padding-left: 10px; line-height: 20px} */

/* LAYOUT ELEMENTS */

/* COLLAPSIBLE DIVS */
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen, #fourteen, #fifteen, #sixteen, #seventeen, #eighteen { margin: 0; margin-bottom: 1.6em; margin-bottom: 0.8em}

div#buttons {margin-left: 16px; margin-top: 8px; margin-bottom: 8px; width: 768px; height: auto; min-height:20px;text-align:left;clear:both }
div#buttons a {
	font-family: arial, helvetica, sans-serif;
	float: left;
	cursor: pointer;
	display: block;
	line-height: 16px;
	width: 145px;
	color: #000;
	background-color: #eaeaea;
	text-decoration: none;
	font-weight: bold;
	padding-top:1px;
	padding-bottom: 1px;
	padding-left: 4px;
	margin-bottom: 1px;
	border: 2px;
	border-style: outset;
	border-color: #fff;	
}
div#buttons a:hover {
	background-color: #f00;
	color: #fff;
	text-decoration: none;
}
div#buttons a:active {
width: 143px;
line-height: 15px;
	border-style: inset;
	padding-top:3px;
	padding-bottom: 0px;
	padding-left: 6px;
	padding-right:-2px;
	background-color: #f00;
	color: #fff;
	text-decoration: none;
}
div#notice{text-align:left;margin-top:0.8em;margin-bottom:1.6em;margin-left:1.6em;width:480px;padding:0;background-color: #FFD6D6;border:1px;border-color:#FF0000;border-width:1px;border-style:solid}
p.erreur {color:#f00;width:114px;padding:8px;background-color: #FFD6D6;border: 1px;border-color: #FF0000;border-width: 1px;border-style: solid}


.ecarteur { margin: 0 24px }

.expand { border: 0; width: 22px; height: 22px; }

a.reflogo { position: relative; float: left; width: 150px; height: 150px; background-image:url(../layout/bg_reflogo.png); background-repeat:no-repeat; margin-bottom: 16px }
a.middlelogo { margin: 0 17px; width: 150px; height: 150px;}
a.lonelogo { margin-left: 167px; width: 150px; height: 150px;}
a.reflogo:hover { background-image:url(../layout/bg_reflogo_ov.png); text-decoration: none }
a.reflogo img { padding-top: 1px; padding-left: 1px; width: 148px; height: 98px}
#content a.reflogo p { margin: 0; padding: 0; /* stupid IE6 needs this or else... */ text-align:center; line-height: 15px; font-weight: bold; color: #eadcc1; height:auto }
#content a.reflogo:hover p { color: #10598C; text-decoration: none }

/* MAIN LAYOUT */
div#container {position:relative; margin:0 auto; width: 760px; height: 100%;}
div#header {position:relative;top:0;left:0;height:84px;width:760px;background: url(../layout/header_good.jpg) no-repeat 0 0}
div#main{position:relative;top:0;left:244px;width:516px;height:100%}
div#col {position:absolute;top:113px;left:0;width:220px;height:640px}
iframe#myleftcol {position:absolute;top:114px;left:0;width:220px;height:680px}
div#teaser,div#contact{position:relative;width:128px;margin-left:16px;height:auto}
div#nav {position:relative;margin:0;width:220px;margin-top:0px;height:auto}
div#contact{position:absolute;bottom:12px;left:0}
div#content{ position:absolute; /* crucial! et non pas relative */ width:516px; height: auto; padding-bottom: 1.6em; background: url(../layout/runner.gif) no-repeat; background-position: 496px bottom; z-index:100} /* height:632px; */
/* la div content est une relique du contenu dans l'iframe; je la laisse en fonction pour le cas où un jour... */

/* div#runner {position:absolute;bottom:-16px;left:744px;width:16px;height:16px;background: url(../layout/runner2.gif) no-repeat 0 0; z-index:100 }
Dans RE, on a une hauteur fixe, mais pas dans le site; donc sur le site, le runner va en bas de la div content, qui est dans les pages intérieures (auparavant affichées à travers l'iframe) */