@charset "utf-8";
/* CSS Document made by Nono*/
/* Copyright Osmoz 2009 */

@font-face {
    font-family:qlassik;
    src:url("/fonts/Qlassik_TB.otf");
}

/*************/
/* CSS Reset */
/*************/

html {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, tt, var,dl, dt, dd, ol, ul, li,form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
pre, sub, sup {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/*************/
/* Mise en forme générale */
/*************/

html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background:url("/images/motif.jpg") top left repeat-x;
}
#conteneurGlobal{
    background:url("/images/bg_repeaty.jpg") top left repeat-y;
    min-height:100%;
}
#conteneur{
    padding-left:284px;
    padding-top:80px;
    background:url("/images/bg.jpg") top left no-repeat;
}
#corps h1{
    width:470px;
    height:210px;
    margin:auto;
    background:url("/images/titre.jpg") top center no-repeat;
}
#corps h1 span{
    display:none;
}
#content{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}

/* classes générales */

.note{
    font-size:smaller;
    color:#333;
}
.bold{
    font-weight:bold;
}
.error{
    color:#ef2222;
}
.success{
    color:#21b312;
}
.spacer{ /* on reset les floats */
    clear:both;
}
.valid{
    color:green;
}
.notvalid{
    color:orange;
}
/*************/
/* Mise en forme de la page welcome */
/*************/

#welcome .left img{
    float:left;
}
#welcome .right img{
    float:right;
}
#welcome p{
    clear:both;
    position:relative;
    width:700px;
    margin:auto;
}
#welcome .button{
    width:500px;
    margin:auto;
}
#welcome .button img{
    border:none;

}
#welcome .button a{
    display:block;
}

/*************/
/* Mise en forme de la page d'inscription */
/*************/

#inscriptions{
    width:700px;
    margin:auto;
}
#inscriptions .intro{
    position:relative;
    padding-top:20px;
    padding-bottom:30px;
}
#inscriptions .intro p.consigne{
    width:320px;
    margin-top:1px;
    font-family:georgia,arial,"sans-serif";
    font-size:12px;
    line-height:17px;
    float:left;
    padding:0 20px 0 20px;
}
#inscriptions .intro p.legend{
    width:270px;
}
#inscription .intro h3{
    text-align:center;
    font-family:georgia,arial,"sans-serif";
    font-weight:lighter;
    font-size:18px;
}
#inscriptions .bungalow{
    position:relative;
    float:left;
    width:90px;
    height:90px;
    cursor:pointer;
}
#inscriptions .bungalow span.places_occupees{
    position:absolute;
    top:47px;
    left:28px;
}
#inscriptions .bungalow span.places_totales{
    position:absolute;
    top:47px;
    right:27px;
}
#details{
    position:absolute;
    background-color:#FFF;
    border:2px solid #CCC;
    padding:5px 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
#details li{
    color:orange;
}
#details li.valide{
    color:green;
}

#formulaire{
    background-color:#CCC;
    border:2px solid #555;
    padding:5px 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/*************/
/* Mise en forme du formulaire */
/*************/

#inscriptions .error{
    font-size:smaller;
    font-style:italic;
    padding-left:115px;
    width:180px;
    margin-top:-20px;
    margin-bottom:20px;
    clear:left;
}

#inscriptions #gauche{
    float:left;
    width:330px;
   
}
#inscriptions #gauche form{
    position:relative;
     border-right:2px solid #069;
}

#inscriptions #gauche h3{
    margin-top:30px;
    margin-bottom:35px;
    font-size:18px;
    font-variant:small-caps;
    font-weight:bold;
}
#inscriptions #gauche form label{
    font-size:18px;
    height:24px;
    width:120px;
    float:left;
    margin-bottom:10px;
    clear:both;
}
#inscriptions #gauche form input{
    font-size:18px;
    height:22px;
    width:150px;
    margin-bottom:10px;
}
#inscriptions span.urbankiller{
    font-size:12px;
}
#inscriptions #gauche form #submit{
    height:30px;
    display:block;
    margin-top:10px;
    width:275px;
    clear:both;
}
#inscriptions #droite{
    position:relative;
}
#inscriptions .bungalow_form{
    position:absolute;
    width:90px;
    height:90px;
    top:50px;
    left:450px;
    
}
#inscriptions .bungalow_form span.places_occupees{
    position:absolute;
    top:47px;
    left:28px;
}
#inscriptions .bungalow_form span.places_totales{
    position:absolute;
    top:47px;
    right:27px;
}
#inscriptions #droite .people{
    position:absolute;
    top:136px;
    left:430px;
}
#inscriptions #droite h3{
    font-weight:bold;
    font-size:18px;
    font-variant:small-caps;
    padding-top:30px;
    margin-bottom:20px;
}

#inscriptions #gauche a, #inscriptions #droite a{
    color:#666;
    font-weight:bold;
    text-decoration:none;
}
#inscriptions #gauche a:hover, #inscriptions #droite a:hover{
    color:black;
    text-decoration:underline;
}


/*************/
/* Mise en forme des messages de confirmation */
/*************/

body#message{
    background:transparent;
}

#message div{
    width:600px;
    height:375px;
    margin:auto;
    margin-top:70px;
}

#message div p{
    background:transparent url('/images/message_bg.png') center center no-repeat;
    padding:130px 100px 70px 160px;
    min-height:170px;
    
}

/*************/
/* Mise en forme de la page des recommandations */
/*************/

#recommandations{
    width:600px;
    margin:auto;
}
#recommandations ul{
    list-style-type:square;
    margin-left:1em;
    margin-top:1em;
}
#recommandations li{
    margin-bottom:10px;
    font-weight:bold;
}
#recommandations a{
    text-decoration:none;
    color:#333;
}
#recommandations a:hover{
    text-decoration:underline;
    color:#666;
}

/*************/
/* Mise en forme de la page Urban Killer */
/*************/

#urbankiller_view{
    width:600px;
    margin:auto;
}
#urbankiller_view h3{
    font-size:20px;
    padding:10px;
    border:1px solid #888;
    margin-top:30px;
}
#urbankiller_view p{
    margin-top:30px;
    line-height:20px;
}

/*************/
/* Mise en forme des tableaux output */
/*************/

#output{
    width:700px;
    margin:auto;
    font-size:18px;
}
#output table{
    margin : 20px 0 40px 0;
}
#output th{
    width:20%;
    height:17px;
    font-size:14px;
    text-align:center;
}
#output td{
    width:220px;
    height:25px;
    border : 1px solid #069;
    text-align:center;
}
#output h3{
    margin:40px 0 20px -20px;
    font-variant:small-caps;
    font-size:24px;
    border:2px #333 groove;
}
#output h4{
    font-style:italic;
    border-bottom:1px dashed #333
}