/* 
    Document   : StyleSaepe
    Created on : 25 janv. 2010, 13:11:06
    Author     : Didier
    Description:
        lié à mise en forme Saepe
*/

/* 
    Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/



body
{
    /*width:1250px; /*obligera au scroll horizontal  */



    /* font-family:Verdana, Arial, Helvetica, sans-serif;*/
    font-size:12px;
    cursor:default;
    color:#3b5367;
    background-color:#ffffff;
    font:13px/1.231 arial,helvetica,clean,sans-serif;
    line-height:1.5;

    /*background-image: url(images/backg.jpg);
	background-repeat: no-repeat;*/
}


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}




#barreflottanteduhaut	{
    border-bottom:1px solid #e9e9e9;
    background:#e1e1e1;
    padding:0.2em 50%;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    width:100%;

    color:#000000;
    cursor:default;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:10px;

}/*
#barreflottanteduhautlarge	{
    border-bottom:1px solid #e9e9e9;
    background:#e1e1e1;
    padding:1.2em 50%;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    width:100%;

    color:#000000;
    cursor:default;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:10px;

}*/

root {
    display: block;
}


#left,#right {
    position: absolute;
    top:20px;
    margin:0;
    padding:0 2%;
}


#left {
    width:250px;
    left:0;
}

#right {
    width:auto;
    left:680px;
}




/* pour le check domaine */
#container{
    margin: 0 auto;
    width: 759px;
    text-align: center;

}

#content{
    width: 600px;
    /* border: 1px solid #d1d1d1;*/
    padding: 15px;
    background: #f8f8f8;
    margin: 50px auto;
    float: left;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;

}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

fieldset{
    border: 0;
}

/* -- Form Elements -- */

ul.form{
    width: 98%;
    float: left;
    clear: both;
}

ul.form li{
    padding: 0 0 5px 0;
    margin: 0 0 5px 0;
    float: left;
    clear: both;
    width: 100%;
}

label{
    float: left;
    clear: both;
    font-size: 1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 15px 0 0;
    line-height: 2em;
}

#menuPage{
    position: fixed;
  top:10px;
  left:10px;
}


#domaine_name.text{
    width: 100%;
    margin: 0;
    padding: 7px 5px 4px;
    color: #555;
    font-size: 18px;
    font-family: inherit;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0 1px 1px 0;
    /*background: #fff url(CheckDomaine/img/bg_input.png) no-repeat scroll left top;*/
}

#domaine_name.success{
    border: 3px solid #e3f7b2;
}

#domaine_name.error{
    border: 3px solid #fbe1a4;
}


#responseBTN{
    font-family: Georgia;
    text-align: left;
    color: #333;
}
#response{
    /* font-family:Verdana, Arial, Helvetica, sans-serif;*/
    font-size:12px;
    cursor:default;
    color:#3b5367;
    background-color:#ffffff;
    font:13px/1.231 arial,helvetica,clean,sans-serif;
    line-height:1.5;

}

/* boutton du Check Domaine */


input.button {
    float: left;
    border: 0;
    display: inline-block;
    /* avec padding:25px 50px 75px;
    //The padding clears an area around the content (inside the border) of an element.
    //    * top padding is 25px
    //    * right and left paddings are 50px
    //    * bottom padding is 75px
    */
    padding: 5px 10px 6px;

    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px #999;

    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

    border-bottom: 1px solid rgba(0,0,0,0.25);
}

input.button:visited {  color: #5D7589;background-color: #f09b27;}
input.button:active {  color: #193145;}
input.button:hover {  color: #082034; background-color: #f09b27; }


.inactif.button {
    background-color: #e1e1e1;
}
.gris.button {
    background-color: #e1e1e1;
}
.vert.button {
    background-color: #32AE32;
}

.bleu.button {
    background-color: #50b1f5;

    /*    border:none;
       color:#fff;
       background: transparent url('images/btnrecherche1.png') no-repeat top left;
    */


}
.rouge.button {
    background-color: #E10006;
}
.magenta.button {
    background-color: #ed468f;
}
.orange.button {
    background-color: #ee854a;
}
.yellow.button {
    background-color: #fdc13f;
}
.petit.button {
    font-size: 11px;
}
.moyen.button {
    font-size: 13px;
}
.grand.button {
    font-size: 14px;
    padding: 10px 14px 9px;
}

button.grand.button {
    font-size: 14px;
    padding: 7px 7px 7px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
a:link {  color: #3B5367;}
a:visited {  color: #5D7589;}
a:active {  color: #193145;}
a:hover {  color: #082034; }


/* contenu et bas de page  */
#contenu{
    width: 600px;
    padding: 15px;
    background: #f8f8f8;
    margin: 50px auto;
    /*float: left;*/
    float: right;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
    The Prefixes:
                -moz (e.g. -moz-border-radius) works in FireFox.
                -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;

}

#zoneaccordeon {
    /* position:absolute;
     left:10%;
     top:400px;
     width:50%;*/
    /*height:1200px;*/
    float: left;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:8px;
    z-index:1;


    /*   font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline;*/


}
#zoneaccordeon h3 {
    padding-left: 25px;

}
div#page {
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
        position: relative;

}

div#page #dernier-element {
	margin-bottom: 0;
        padding-bottom: 4em;
        position: relative;

}




#pieddepage {
    background-color: #f8f8f8;
    /*position: relative;
    float: left;

    position:absolute;bottom:0; left:0;
    */
 position: relative;
    
    
    width: 1110px;


    z-index:1;
    font-size:10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #999999;
    /*text-align: right;*/
    height: 20px;
    /*  padding:0.2em 80%;
      padding-top:30px;
      padding-bottom:30px;
      padding-right:50px;
      padding-left:50px;
    width:1250px;*/
}
#pieddepage a {
    color: #999999;
}



/* pour les pages avec contenu type News */
#container_news{
    margin: 0 auto;
    width: 900px;
    text-align: center;

}

#content_news{
    width: 600px;
    padding: 15px;
    background: #e3f7b2;
    margin: 50px auto;
    float: left;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;

}
#content_news h2 {
    color: #2068bd;
    text-align: left;
    margin: 10px auto;
}
#content_news p {
    color: #2068bd;
    text-align: justify;
}


#content_news ul {
    list-style-type: circle;
    color: #2068bd;
    text-align: justify;
}

#content_news li {

    color: #2068bd;
    text-align: justify;
}

/* pour les pages avec contenu type Contact  */
#container_Contact{
    margin: 0 auto;
    width: 900px;
    text-align: left;
    position: relative;

}
#content_Contact{
    position: relative;
 
    width: 600px;

    padding: 15px;
    background: #fbe1a4;
    margin: 50px auto;
    float: left;
    clear: both;
    z-index :10;
    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;
}
#content_Contact h2 {
    color: #2068bd;
    text-align: left;
    margin: 10px auto;
}
#content_Contact p {
    color: #2068bd;
    text-align: justify;
}
#container_Aide{
    margin: 0 auto;
    width: 900px;
    text-align: left;

}
#content_Aide{
    width: 800px;

    padding: 15px;
    background: #f39523;
    margin: 50px auto;
    float: left;
    clear: both;
    z-index :10;
    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;

}
#content_Aide h2 {
    color: #ffffff;
    text-align: left;
    margin: 10px auto;
}
#content_Aide p {
    color: #ffffff;
    text-align: justify;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:10px;

}


/* pour les pages avec contenu type Login */
#container_Login{
    margin: 0 auto;
    width: 900px;
    text-align: center;

}
#content_Login{
    width: 570px;

    padding: 15px;
    background: #eecda0;
    margin: 50px auto;
    float: left;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
    The Prefixes:
                -moz (e.g. -moz-border-radius) works in FireFox.
                -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;
}
#content_Login h2 {
    color: #2068bd;
    text-align: left;
    margin: 10px auto;
}
#content_Login p {
    color: #2068bd;
    text-align: justify;
}


/* pour les pages avec contenu type News */
#container_onenparle{
    margin: 0 auto;
    width: 900px;
    text-align: center;

}
#content_onenparle{
    width: 600px;

    padding: 15px;
    background: #e3f7b2;
    margin: 50px auto;
    float: left;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;
}
#content_onenparle h2 {
    color: #2068bd;
    text-align: left;
    margin: 10px auto;
    font-size: 15px;
}
#content_onenparle p {
    color: #2068bd;
    text-align: justify;
}
#container_onenparle_image{
    margin: 0 auto;
    width: 1120px;
    text-align: center;

}
#content_onenparle_image {

    padding: 5px;
    margin: 10px auto;
    float: left;
    /* Fonctionne seulement avec browser compatible CCS3
    The Prefixes:
                -moz (e.g. -moz-border-radius) works in FireFox.
                -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;
}


label.overTxtLabel {
    font-weight: bold;
    font-family: arial, helvetica, verdana;
    font-size: 15px;
    color: #c8d6e1;
}

.pointyTips{
    color: #2068bd;
    text-align: left;
}
.pointyTips ul {
    color: #2068bd;
    text-align: left;
}
.infobulle{
    background-color: #FF3366;
    padding : 6px;
    border : 1px solid #000;
    font: lighter 10px/1.3 Verdana,Arial,sans-serif;
    text-decoration: none;
    text-align: center;
}
.pointyTipsLarge{
    background-color: #FF3366;
    padding : 6px;
    border : 1px solid #000;
    font: lighter 10px/1.3 Verdana,Arial,sans-serif;
    text-decoration: none;
    text-align: center;
    width:300px
}
.pointyTipsLarge ul {
    background-color: #FF3366;
    padding : 6px;
    border : 1px solid #000;
    font: lighter 10px/1.3 Verdana,Arial,sans-serif;
    text-decoration: none;
    text-align: center;
    width:300px
}
.tipaidesaepe {
    height:100px;

 width:311px;

}
.tipaidesaepe tip	{
   /* max-width: 200px;*/
    width:311px;
    font-family:tahoma,arial;
    background:url(images/Tip-text.png) left top repeat-y;
}

.tipaidesaepe tip-top {
    background:url(images/Tip-top.png)
        top left no-repeat;
    height:21px;
    width:311px; }


.tipaidesaepe tip-title	{ color:#e95e25; font-weight:bold; margin:0 10px 0 10px; }  /*margin= top right bottom left*/
.tipaidesaepe tip-text		{ color:#000; padding:0px 0px 0px 20px; } /*{ color:#000; padding:10px 30px 20px 50px; }*/
.tipaidesaepe tip-bottom	{
    background:url(images/Tip-bottom.png) left bottom no-repeat;
    width:311px;
    height:78px; }




#iconeDuSearch {
    float: right;
}

#TopMenu {
    color: #000000;
    background:  #ffffff;

}
#TopMenuBlack {
    color: #000000;
    background:  #000000;

}

#myGraph {
    color: #ffffff;
    background:  #000000;

}

.message{
    width: 100px;
    border: 1px solid #d1d1d1;
    padding: 5px;
    background: #f8f8f8;
    margin: 10px auto;
    /*float: left;*/
    float: right;
    clear: both;
}

.containzoom {
    width:52em;
    left:50px;
    padding: 5px;
    padding-left:  2px;
    text-align: justify;
    color: #000000;
    background: #f8f8ff;
    z-index:9005; /* rq: au dessus du tip à 9002 */
}


.containzoomimg {
    display: inline;
    color: #3b5367;



}


.finfin
{position: static;
 clear: both;
 height:20px;
}
/* attention = existe par ailleurs aussi pour les pages construites; definition dans styleResSN.css */
#listing_sn {
    text-align: justify;
    color: #3b5367;
    width: 800px;
    background: #e1e1e1;
}

#zoneretwitt{
    display: block;
    position :absolute;
    top : 820px;
    left : 2px;
    width:auto;

}
#zoneretwitt p {
    display: inline;
    width : 204px;
}

#zoneretwitt box {

    width : 104px;
}
#zoneretwitt script {
    display: inline;
}
#zoneretwitt input {
    display: inline;
}




#zoneimagettes  {
    position:static;
    /* left:0px;
     top:500px;
    */
    width:auto;
    height:auto;
}



#slideshow-container  { width:800px; height:600px; position:relative; }

#slideshow-container img { width:800px; height:600px; display:block; position:absolute; top:0; left:0; z-index:1; }

#slideshow-container-controls { margin:10px 0 0 0; }

#slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #50b1f5; float:left; margin:0 1px 0 0; }

#slideshow-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#2aa1d5; z-index:10; overflow:hidden; }

* html #slideshow-container-caption { width:100%; }

#slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }

#slideshow-container-caption p  { color:#50b1f5; font-size:11px; padding:0 10px 10px 10px; }

.toc-active        { border-color:#000; }


#zonetampon{
    position:relative;
    left:0px;
    top:80px;
    width:auto;
    height:30px;
}


#zoneimagettesresume  {
    position:relative;
    left:0px;
    top:-40px;
    width:auto;
    height:auto;
}
#resume-container  { width:800px; height:auto; position:relative; }

#resume-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#2aa1d5; z-index:10; overflow:hidden; }

* html #resume-container-caption { width:100%; }

#resume-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }

#resume-container-caption p  { color:#3b5367; font-size:18px; padding:0 10px 10px 10px; }


/* FIN partie pour slideshow des imagettes */


/* pour les pages avec contenu type WhatsNew */


#content_whatsnew{
    width: 800px;
    padding: 35px;
    background: #fffff;
    margin-left: 20px;
    
    float: left;
    clear: both;

    /* Fonctionne seulement avec browser compatible CCS3
   The Prefixes:
               -moz (e.g. -moz-border-radius) works in FireFox.
               -webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. */
    border: 5px solid #c4c8cc;
    -moz-box-shadow: 5px 5px 7px #888;
    -moz-border-radius-bottomright: 15px;
    -webkit-box-shadow: 5px 5px 7px #888;
    -webkit-border-bottom-right-radius: 15px;
  behavior: url(CSS3/PIE.htc);
}
#content_whatsnew h2 {
    color: #2068bd;
    text-align: left;
    margin: 10px auto;
}
#content_whatsnew p {
   font-size:18px;
    color: #2068bd;
    text-align: justify;
}


#content_whatsnew ul {
    list-style-type: circle;
     font-size:18px;
    color: #2068bd;
    text-align: justify;
}

#content_whatsnew li {
 font-size:18px;
    color: #2068bd;
    text-align: justify;
}