/*
*
* Thème 'crystal' pour sveetch.biz
* Créée en Aout 2005 par David Thenon
* Mis à jour en Mars 2009 par David Thenon
* Copyright 2005 sveetch.biz
* Images non libres de droits sauf ceux provenant
* du set d'icônes kde "FairytaleWorld"
*
=================================================
    Redéfinitions de balises
=================================================
*/
html{
    background-color:#cccccc;
    background-image:url("./fond_body.png");
    background-position:top left;
    background-repeat:repeat-x;
}
body{
    margin:0;
    padding:28px 0 0 0;
    height:100%;
    width:100%;
    font-family:Arial,sans-serif;
    background-image:url("./border_top_root.gif");
    background-position:center 13px;
    background-repeat:no-repeat;
    text-align:center;
}
html>body{
    padding:10px 0 0 0;
    background-image:url("./border_top_root.png");
}
hr,
.cale{
    visibility:hidden;
    width:0;
    height:0.05px;
    font-size:0;
    line-height:0;
    clear:both;
}
img{
    border:0;
}
form{
    margin:0;
    padding:0;
}

/*______________________________
*   Cadre principal
*/
#root{
    width:771px;
    margin:20px auto 20px auto;
    padding-bottom:30px;
    background-image:url("./fond_root.gif");
    background-position:top center;
    background-repeat:repeat-y;
    text-align:left;
}
html>body #root{
    padding-bottom:0;
    background-image:url("./fond_root.png");
}

/*______________________________
*   Objet CSS libres
*/
/* bordure arrondi du bas du cadre principale */
#bottomObj{
    margin:0;
    padding:0;
    width:100%;
    height:50px;
    position:absolute;
    background-color:#cccccc;
    background-image:url("./border_bottom_root.gif");
    background-position:center 0;
    background-repeat:no-repeat;
}
html>body #bottomObj{
    left:0;
    right:0;
    width:auto;
    background-image:url("./border_bottom_root.png");
}
/*______________________________
*   Cadre d'entete et ses éléments
*/
#body_head{
    margin:0 15px 0 16px;
    background-color:#f5f5f5;
}
#body_head h1{
    margin:0;
    padding:0;
    width:740px;
    height:142px;
    background-color:#f5f5f5;
    background-image:url("./banniere_crystal.jpg");
    background-position:center bottom;
    background-repeat:no-repeat;
}
#body_head h1 a{
    display:block;
    margin:0;
    padding:0;
    width:152px;
    height:27px;
    position:absolute;
    top:14px;
    left:auto;
    z-index:5;
    background-image:url("./logo.png");
    background-position:5px 5px;
    background-repeat:no-repeat;
}
html>body #body_head h1 a{
    top:17px;
}
#body_head h1 a span,
#body_head h2{
    display:none;
}
#body_head ul{
    margin:1px 0 0 0;
    padding:8px 5px 10px 5px;
    background-color:#4f4f5e;
}
#body_head li{
    margin:0;
    padding:0;
    display:inline;
    font-size:13px;
    white-space:nowrap;
    list-style-type:none;
}
#body_head li a{
    padding-left:14px;
    color:white;
}
#body_head a,
#body_head a:link{
    text-decoration:none;
}
#body_head a:hover{
    text-decoration:underline;
}

/*______________________________
*   Cadre principal et ses éléments
*/
#body_content{
    margin:0 15px 0 16px;
    padding:5px;
    background-color:#f5f5f5;
    min-height:400px;
}
#body_content h2{
    margin:5px 0 7px 0;
    padding:5px 0 7px 0;
    font-size:24px;
    font-weight:bold;
    line-height:24px;
    color:#0e0e0e;
    /*
    padding:5px 0 7px 24px;
    background:url("./0146_splat.gif") 7px 12px no-repeat;
    */
}
#body_content h3{
    margin:26px 0 7px 0;
    padding:0 0 7px 20px;
    font-size:18px;
    font-weight:bold;
    color:#0e0e0e;
    line-height:18px;
    border-bottom:1px dotted #5f5f6e;
    background:url("./0147_splat_blue.gif") 3px 3px no-repeat;
}
#body_content h4{
    margin:16px 0 4px 0;
    padding:0 0 5px 5px;
    font-size:16px;
    font-weight:bold;
    color:#2f2f3e;
    line-height:16px;
}
#realisations h4{
    margin:4px 0 4px 0;
}
#body_content h5{
    margin:8px 0 2px 0;
    padding:0 0 3px 5px;
    font-size:15px;
    font-weight:bold;
    color:#2f2f3e;
    line-height:15px;
}
#body_content h6{
    margin:6px 0 2px 0;
    padding:0 0 3px 5px;
    font-size:15px;
    font-weight:normal;
    color:#2f2f3e;
    line-height:15px;
}
#body_content p{
    margin:3px 0 3px 0;
    padding:5px;
    font-size:14px;
    line-height:18px;
    color:#2f2f3e;
}
#body_content blockquote{
    margin:3px 0 3px 0;
    padding:5px;
    color:#74a5be;
    border:1px dashed #74a5be;
    background-color:#efefef;
}
#body_content blockquote p{
    margin:2px 0 2px 0;
    padding:1px;
    font-size:12px;
    line-height:13px;
    color:#2f2f3e;
}
#body_content pre{
    margin:3px 0 3px 0;
    padding:5px;
    color:#74a5be;
    border:1px dashed #74a5be;
    background-color:#ebeded;
    font-family:monospace;
    font-size:11px;
    line-height:12px;
    color:#2f2f3e;
}
#body_content code{
    padding:0 3px 0 3px;
    font-size:13px;
    border:1px dashed #74a5be;
    background-color:#ebeded;
}
#body_content a:hover{
    text-decoration:underline;
}
#body_content ul{
    margin:0;
    padding:6px 0 6px 35px;
    list-style-image: url("./0121_ul.gif");
}
#body_content ul li{
    list-style-image: url("./0121_ul.gif");
}
#body_content ol{
    margin:0;
    padding:6px 0 6px 35px;
    list-style-type:upper-roman;
}
#body_content ul ul,
#body_content ol ul{
    margin:0;
    padding:3px 0 3px 20px;
    list-style-image: url("./0027_datadialogsbullet.gif");
}
#body_content ol ol,
#body_content ul ol{
    margin:0;
    padding:3px 0 3px 20px;
    list-style-type:decimal;
}
#body_content li{
    margin:2px 0 2px 0;
    padding:2px;
    font-size:13px;
    line-height:18px;
    color:#2f2f3e;
}
#body_content li li{
    margin:2px 0 2px 0;
    padding:2px;
    font-size:12px;
    line-height:17px;
    color:#2f2f3e;
}
#body_content a{
    text-decoration:none;
}

/*______________________________
*   Cadre du chemin de navigation
*/
#pathline{
    text-align:right;
    display:none;
}
#pathline p{
    display:inline;
    padding:3px 0 3px 20px;
    font-size:12px;
    line-height:17px;
    background-image:url("./0094_sitemap.gif");
    background-position:5px center;
    background-repeat:no-repeat;
}

/*______________________________
*   Éléments du plan du site
*/
#body_content #site_map_navigation ul{
    margin-left:0px;
    padding-left:0px;
}
#body_content #site_map_navigation li{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    margin-left:0px;
    margin-right:40px;
    font-size:16px;
    list-style-position:inside;
    border-bottom:2px dotted #afafbe;
}
#body_content #site_map_navigation li li{
    border-bottom:0;
    padding-top:5px;
    padding-bottom:5px;
    margin-left:15px;
    margin-right:15px;
    font-size:14px;
    list-style-position:outside;
}

/*
____________________
    Formulaire vertical en deux colonnes (label|input)
*/
#body_content div.vertical_form{
    padding:5px 9px 8px 9px;
    margin-top:13px;
    font-size:12px;
}
#body_content div.vertical_form div.row{
    padding:13px;
    margin-bottom:8px;
    color:#494A4C;
    border:1px solid #5f5f6e;
}
#body_content div.vertical_form label,
#body_content div.vertical_form p.label{
    display:block;
    width:160px;
    float:left;
    padding-top:2px;
    margin-right:12px;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    text-align:right;
}
#body_content div.vertical_form .field{
    display:block;
    width:485px;
    float:left;
}
#body_content div.vertical_form .help{
    padding-top:4px;
    font-size:11px;
    color:#073BF3;
}
#body_content div.vertical_form .error{
    padding:2px 2px 2px 28px;
    font-size:12px;
    font-weight:bold;
    color:#ba221e;
    background:url("./messagebox_warning.png") 4px center no-repeat;
}
#body_content div.vertical_form .nofield .help,
#body_content div.vertical_form .nofield .error{
    padding-top:0;
    padding-bottom:4px;
}
#body_content div.vertical_form .field input,
#body_content div.vertical_form .field select,
#body_content div.vertical_form .field textarea{
    width:400px;
    padding:2px;
    color:#000000;
    border:1px solid #808080;
    background-color:#f0f0f0;
}
#body_content div.vertical_form .field select{
    padding:0;
    font-size:10px;
}
#body_content div.vertical_form .field select option{
    padding:2px;
}
#body_content div.vertical_form .field textarea{
    padding:3px;
}
/* Spécifités des champs à checkbox/radio */
#body_content div.vertical_form .checkfield input{
    border:0;
    width:auto;
}
#body_content div.vertical_form .checkfield ul{
    list-style-type:none;
}
#body_content div.vertical_form .checkfield li{
    float:left;
    padding-top:5px;
    margin-right:10px;
}
#body_content div.vertical_form .checkfield label{
    display:inline;
    width:auto;
    float:none;
    padding:2px;
    margin:0;
    font-weight:normal;
    text-transform:none;
    text-align:left;
    vertical-align:bottom;
}
/* Spécifités des champs multiples */
#body_content div.vertical_form .multiplefield input,
#body_content div.vertical_form .multiplefield select,
#body_content div.vertical_form .multiplefield textarea{
    width:122px;
    margin-right:2px;
    padding:2px;
    color:#494A4C;
    border:1px solid #AEAEB1;
    font-family:monospace;
}

/* Ligne de contenu sans champs */
#body_content div.vertical_form .nofield{
    display:block;
    width:485px;
    padding-top:5px;
    float:left;
    font-size:11px;
}
#body_content div.vertical_form .nofield a{
    color:#0C6379;
}

/* Toolbar avec des inputs prévus pour juste au dessus d'un input, un peu comme des onglets */
#body_content div.vertical_form .ui_input_toolbar input,
#body_content div.vertical_form .ui_input_toolbar button{
    padding:2px;
    border:1px solid #ACACAC;
    border-bottom:0;
    font-size:11px;
    font-family:monospace;
}
#body_content div.vertical_form .ui_input_toolbar input:hover,
#body_content div.vertical_form .ui_input_toolbar button:hover{
    position:relative;
    top:1px;
    background-color:#FFFFFF;
}

/* Boutons submit du formulaire */
#body_content div.vertical_form div.actions{
    margin:15px 0 15px 0;
    padding:5px;
    text-align:center;
}
#body_content div.vertical_form div.actions p{
    font-size:10px;
    font-weight:normal;
    font-style:italic;
}
#body_content div.vertical_form div.actions input{
    padding:3px 6px 3px 6px;
    font-size:14px;
    font-weight:bold;
    color:#073BF3;
    border:1px solid #5f5f6e;
    background-color:#f0f0f0;
}


/*
* Pied de page
*/
#footer{
    margin:15px 10px 0 11px;
    padding:5px 5px 0 5px;
}
#footer p{
    margin:2px auto 2px auto;
    padding:0;
    font-size:11px;
}
#footer p.copyright{
    margin:5px 0 0 0;
    padding:10px 0 10px 0;
    border-top:1px solid #b9bfc4;
    border-bottom:1px solid #b9bfc4;
    background-color:#ced5da;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    color:#56585b;
}
#footer ul{
    margin:5px auto 0 auto;
    padding:0;
    text-align:center;
}
#footer li{
    display:block;
    float:left;
    margin:4px 0 0 17px;
    font-size:11px;
    white-space:nowrap;
    list-style-type:none;
}
#footer li a{
    display:block;
    width:80px;
    height:15px;
    padding:4px 0 0 17px;
    font-size:11px;
}
#footer #valid_xhtml a{
    background:url("./valid_xhtml.png") top left no-repeat;
}
#footer #valid_css a{
    background:url("./valid_css.png") top left no-repeat;
}
#footer #hosted_by_ikoula a{
    background:url("./hosted_by_ikoula.png") top left no-repeat;
}
#footer li a span{
    display:none;
}
#footer p.topanchor a{
    display:block;
    padding:0 0 0 15px;
    background:url("./0036_bullet02.gif") left center no-repeat;
}
#footer a,
#footer a:link{
    text-decoration:none;
}
#footer a:hover{
    text-decoration:underline;
}