/** body **/
html, body, #hbox, #vbox, #mbox { height: 100%; }
body { font: 12px "Century Gothic", Tahoma, sans-serif; color: black; }

/** header/footer **/
#header,
#footer { width: 100%; position: fixed; left: 0; z-index: 3; }

/** header **/
#access { display: none; }
#header { height: 75px; top: 0; padding: 5px 0; background: black; text-align: right; }
#header div.box { width: 1024px; margin: 0 auto; }

/** identity **/
#identity { display: none; }

/** nav **/
#crumbs { display: none; }
#menu ul { list-style: none; float: right; width: 340px; }
#menu a { float: left; display: block; height: 75px; margin-right: 10px; background: transparent no-repeat center; }
#menu a span { display: none; }
#menu li { display: inline; }
#menu li.accueil a { background-image: url(menu/accueil.png); width: 52px; }
#menu li.pourquoi a { background-image: url(menu/pourquoi.png); width: 52px; }
#menu li.alerte a { background-image: url(menu/alerte.png); width: 70px; }
#menu li.partenaires a { background-image: url(menu/partenaires.png); width: 58px; }
#menu li.presse a { background-image: url(menu/presse.png); width: 52px; }

/** main **/
#main { height: 100%; text-align: center; }
#center { width: 100%; height: 100%; }
#center td { text-align: center; vertical-align: middle; height: 560px; }
#main div.box { position: relative; height: 465px; width: 1024px; padding: 85px 0 80px 0; margin: 0 auto; }

/** footer **/
#footer { height: 60px; bottom: 0; padding: 10px 0; background: white; text-align: center; }
#footer div.box { width: 1024px; margin: 0 auto; }
#url { display: none; }
#footer ul { list-style: none; margin: 0; padding: 0; width: 480px; margin: 0 auto; }
#footer li { float: left; margin-right: 30px; }
#footer a span { display: none; }

/** pages **/

h2 { font: 1em "Century Gothic", Tahoma, sans-serif; font-weight: bold; }

/* prehome */
body.prehome #header { background: white; }
body.prehome #main { background: black; }
body.prehome #main div.box { height: 425px; padding-bottom: 100px; margin: 0 auto; }
body.prehome #footer { display: none; }
body.prehome div.flash { width: 650px; height: 370px; margin: 30px auto; }
body.prehome h2 { margin: 1em 0; color: white; font-size: 2em; font-weight: normal; }
body.prehome p.skip a { color: #ccc; }
body.prehome p.skip a:hover { color: white; }

/* accueil */
body.accueil #header { background: #1b1818; }
body.accueil div.right { float: right; width: 480px; padding-right: 165px; padding-top: 35px; background: url(pages/accueil-back.png) no-repeat 70px 35px; text-align: left; }
body.accueil div.right h2 { text-transform: uppercase; margin-bottom: 1em; font-size: 1em; }
body.accueil div.right a { display: block; color: #df0015; font-weight: bold; margin-top: 1em; }
body.accueil div.right a:hover { color: black; }
body.accueil div.left a { display: block; }
body.accueil div.left a.alerte { padding: 115px 90px 40px 130px; width: 135px; height: 75px; background: url(pages/accueil-start.png) no-repeat 130px 60px; }
body.accueil div.left a.start { padding: 60px 150px 65px 70px; width: 135px; height: 75px; background: url(pages/alerte-aide.png) no-repeat 102px 40px; }
body.accueil div.left a span { text-transform: uppercase; }
body.accueil div.left a.alerte span { color: white; font-size: 1.2em; }
body.accueil div.left a.start span { color: black; font-size: .9em; }
body.accueil div.left a:hover span { font-weight: bold; }
body.accueil div.left a.alerte:hover span { color: white; }
body.accueil div.left a.start:hover span { color: black; }
body.accueil div.left a div { display: none; font-size: .9em; width: 180px; color: #444; border: 2px #eee solid; background: white; padding: 1em; }
body.accueil div.left a:hover div { display: block; position: absolute; top: 80px; right: 30px; }

/* depart */
body.depart #header { background: #1b1818; }
body.depart div.left { margin-left: 140px; }
body.depart div.col { float: left; width: 155px; padding: 120px 50px 0 0; height: 220px; background: url(pages/depart-back.png) no-repeat 50px 80px; text-align: left; margin-right: 45px; }
body.depart div.col h2 { font-size: 1.1em; margin-bottom: .3em; }
body.depart div.left h2 { visibility: hidden; }
body.depart div.legal { clear: both; width: 720px; margin: 0 auto; padding-top: 1em; color: #444; }
body.depart div.legal h3 { font-size: 1.1em; font-weight: normal; margin-bottom: 1em; }

/* pourquoi */
body.pourquoi #header { background: #464749; }
body.pourquoi div.cles { text-align: left; padding-top: 50px; line-height: 1.7em; font-size: 1.1em; margin: 0 70px; }
body.pourquoi div.cles h2 { font-size: 1em; margin-bottom: 2em; }
body.pourquoi div.cles ul { margin-bottom: 2em; }
body.pourquoi div.cles span { color: #464749; font-weight: bold; }
body.pourquoi div.cles em { color: #df0015; font-style: normal; }
body.pourquoi div.attention { text-align: left; margin: 0 70px; padding-top: 1.5em; line-height: 1.7em; font-size: 1.1em; color: #df0015; }
body.pourquoi div.attention span { font-weight: bold; }

/* alerte */
body.alerte #header { background: #df0015; }
body.alerte h2 { font-weight: bold; }
body.alerte div.aide { }
body.alerte div.on div.toggle { display: block; }
body.alerte div.off div.toggle { display: none; }
body.alerte div.numeros { margin-left: 235px; padding-top: 50px; font-size: 1.1em; }
body.alerte div.numeros div.num { float: left; width: 165px; height: 310px; background: no-repeat url(pages/alerte-off.png) top; }
body.alerte div.numeros div.toggle span { display: block; font-size: 1.1em; font-weight: bold; }
body.alerte div.numeros div.on { background-image: url(pages/alerte-orange.png); }
body.alerte div.numeros h2 a { font-size: 30px; line-height: 30px; display: block; padding: 55px 0; color: white; }
body.alerte div.numeros h2 a:hover { color: white; }
body.alerte div.numeros address { margin-top: .5em; font-weight: bold; font-style: normal; }
body.alerte #tel-119 div.toggle { margin-left: -90px; background: url(pages/alerte-119.png) no-repeat 0 15px; padding: 15px 0 80px 90px; }
body.alerte #tel-116000 { width: 240px; }
body.alerte #tel-116000 div.toggle { background: url(pages/alerte-116000.png) no-repeat bottom; padding: 15px 0 70px 0; }
body.alerte #tel-17 div.toggle { padding-top: 15px; }
body.alerte #aide { position: absolute; top: 340px; left: 30px; }
body.alerte #aide div.toggle { text-align: left; width: 820px; padding-left: 100px; padding-top: 20px; height: 180px; }
body.alerte #aide h2 { float: left; margin-right: 20px; }
body.alerte #aide h2 a { display: block; font-size: 14px; line-height: 14px; width: 70px; height: 14px; padding: 28px 0; background: url(pages/alerte-aide.png) no-repeat center; color: black; }
body.alerte #aide h2 a:hover { color: black; }
body.alerte #aide p.gouv { color: #444; font-size: .9em; }
body.alerte #aide p.gouv a { color: #df0015; }
body.alerte #aide p.gouv a:hover { color: #c7c8cb; }
body.alerte #aide p.conseil { font-size: 1.1em; color: #808386; margin: 1em 0; font-weight: bold; }
body.alerte #aide div.col { float: left; width: 220px; margin-right: 40px; }
body.alerte #aide h3 { font-weight: bold; font-size: 1em; margin-bottom: .2em; }
body.alerte #aide h3 span { display: block; text-transform: uppercase; }
body.alerte #aide address { font-style: normal; font-size: .9em; }
body.alerte #aide address a { color: black; font-weight: bold; }
body.alerte #aide address a:hover { color: #df0015; }

/* partenaires */
body.partenaires #header { background: #808386; }
body.partenaires div.logos ul { width: 650px; margin: 0 auto; padding-top: 120px; }
body.partenaires div.logos li { display: inline; }
body.partenaires div.logos img { margin: 7px; }
body.partenaires div.tds { font-size: .9em; padding-top: 10em; text-transform: uppercase; }
body.partenaires div.tds p,
body.partenaires div.tds a,
body.partenaires div.tds a:hover { color: #aaa; }
body.partenaires div.tds img { display: block; margin: .4em auto; }
body.partenaires #footer { visibility: hidden; }

/* presse */
body.presse #header { background: #464749; }
body.presse div.download { height: 220px; padding-top: 120px; }
body.presse div.download h2 { font-size: 1.2em; margin-bottom: 2em; }
body.presse div.download p { margin-bottom: 2em; color: #444; }
body.presse div.download ul { width: 590px; margin: 0 auto; padding-left: 50px; }
body.presse div.download li { display: inline; }
body.presse div.download a { display: block; float: left; margin-right: 50px; }