@charset "UTF-8";
/******************************************************
*
* Author : Tom Courant
*
* For : Idé Agence (http://www.ide.fr/)
*
* Date : 000
*
* Version : 1.1
* File : style.css
* 
*******************************************************/
/******************************************************
~ Fonts
*******************************************************/
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);/******************************************************
~ Reset & Hack
*******************************************************/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:normal;font-family: 'Lato'; font-weight: 700;}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.5em}sup{top:-0.5em}svg{overflow:hidden}
* {margin:0;padding:0;}
body {position: relative; font-family:'Lato','Arial',Helvetica, Verdana, Geneva, sans-serif;font-size:12px;font-weight: 400;color:#000;background: #ccc;}
h1, h2, h3, h4, h5, h6 {font-style: normal; font-weight: normal;}
li {list-style-type:none;}
button {border: none; background: transparent; cursor: pointer;}
a{text-decoration:none; cursor:pointer; color: #fff;}
a:visited{text-decoration:none;cursor:pointer;}
a:hover{text-decoration:none;cursor:pointer;}
/******************************************************
~ Colors
*******************************************************/
.blue {background: #7398ab;}

/******************************************************
~ Content Global
*******************************************************/
#wrap {position: relative; width: 640px; height: 360px; margin: 0 auto; background: #fff;}

#start {display: block; position: absolute; width: 640px; height: 360px; margin: 0 auto; background: #fff; text-align: center;}
#start #logo {margin-top: 75px; margin-bottom: 60px;}
#start #title {font-size: 20px; line-height: 25px; color: #7398ab;}
#start #title span {display: block; font-size: 14px; text-transform: uppercase; font-style: italic;}

#main {display: none; position: absolute; width: 640px; height: 360px; margin: 0 auto; background: #fff;}
#main #header {width: 100%; height: 27px; background: #7398ab;}
#main #header h1 {float: left; margin-left: 15px; font-size: 16px; line-height: 27px; color: #fff;}
#main #header span {float: right; margin-right: 15px; font-size: 12px; line-height: 27px; color: #fff; text-transform: uppercase;}

#main #arrow {position: absolute; left: 55px; top: 70px; width: 450px; height: 254px;}
#main #arrow #mask1 {position: absolute; top: 0; right: 0; width: 450px; height: 74px; background: #fff;}
#main #arrow #mask2 {position: absolute; top: 100px; right: 0; width: 450px; height: 150px; background: #fff;}

#main #nav {position: absolute; top: 170px; left: 5px; width: 630px; height: 0px;}
#main #nav #navLeft {position: absolute; top: 0; left: 0; width: 17px; height: 25px; background: url('../img/left.png') top left no-repeat; cursor: pointer;}
#main #nav #navRight {position: absolute; top: 0; right: 0; width: 17px; height: 25px; background: url('../img/right.png') top left no-repeat; cursor: pointer;}

#main #wrapBtn .mapBtn {display: none; position: absolute; width: 88px; height: 74px; background: url('../img/picto_sprite.png') top left no-repeat; cursor: pointer;}
#main #wrapBtn .mapBtn .more {position: absolute; top: -8px; right: -8px; width: 16px; height: 16px;}
#main #wrapBtn .mapBtn p {padding-top: 76px; margin-left: -5px; width: 100px; text-align: center; font-size: 12px;}

#main #intro {position: absolute; top: 100px; left: 220px; width: 210px; padding: 10px; background: #E2ECF5; color: #007eb9; font-size: 15px;}
#main #intro p {margin-bottom: 10px;}

#main #wrapBox {display: none; position: absolute; top: 27px; left: 0; width: 640px; height: 333px; background: url('../img/blue.png') top left repeat;}
#main #wrapBox .toolBox {display: none; position: relative; width: 340px; height: 280px; margin: 10px auto;}
#main #wrapBox .toolBox .titleBox {position: relative; width: 200px; height: 16px; padding-left: 10px; background: #868789; color: #fff; font-size: 12px; line-height: 16px; font-family: 'Lato'; font-weight: 700; text-transform: uppercase;}
#main #wrapBox .toolBox .titleBox span {position: absolute; top: 0; right: -12px; width: 12px; height: 16px; background: url('../img/triangle.png') top left no-repeat;}
#main #wrapBox .toolBox .contentBox {width: 320px; height: 244px; padding: 10px; background: #fff; color: #868789;}
#main #wrapBox .toolBox .contentBox p {padding-bottom: 5px;}
#main #wrapBox .toolBox .close {position: absolute; top: 8px; right: -8px; width: 16px; height: 16px; background: url('../img/close.png') top left no-repeat; cursor: pointer;}


#main #credits {position: absolute; bottom: 8px; right: 5px; width: 160px; height: 16px; font-size: 10px; line-height: 16px; text-align: center; color: #fff; background: #7398ab;}
#main #credits span {display: block; position: absolute; top: -1px; left: -20px; width: 22px; height: 18px; background: url('../img/credits.png') top left no-repeat;}

/******************************************************
~ Clear
*******************************************************/
.clear {clear:both;}