/*
    équivalences rgba -> rgb
    rgbR = α*rgbaR + (1-α)*rgbRFond
    rgbG = α*rgbaG + (1-α)*rgbGFond
    rgbB = α*rgbaB + (1-α)*rgbBFond

    couleur moyenne du sable : rgb(230,208,171)
*/


@font-face {
    font-family: 'Bitstream Vera Serif';
    src: url('../../rs/fonts/VeraSerif.eot');
    src: url('../../rs/fonts/VeraSerif.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/VeraSerif.woff') format('woff'),
         url('../../rs/fonts/VeraSerif.ttf') format('truetype'),
         url('../../rs/fonts/VeraSerif.svg#BitstreamVeraSerifRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitstream Vera Serif';
    src: url('../../rs/fonts/VeraSerifBold.eot');
    src: url('../../rs/fonts/VeraSerifBold.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/VeraSerifBold.woff') format('woff'),
         url('../../rs/fonts/VeraSerifBold.ttf') format('truetype'),
         url('../../rs/fonts/VeraSerifBold.svg#BitstreamVeraSerifBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bitstream Vera Sans';
    src: url('../../rs/fonts/Vera.eot');
    src: url('../../rs/fonts/Vera.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/Vera.woff') format('woff'),
         url('../../rs/fonts/Vera.ttf') format('truetype'),
         url('../../rs/fonts/Vera.svg#BitstreamVeraSansRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitstream Vera Sans';
    src: url('../../rs/fonts/VeraItalic.eot');
    src: url('../../rs/fonts/VeraItalic.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/VeraItalic.woff') format('woff'),
         url('../../rs/fonts/VeraItalic.ttf') format('truetype'),
         url('../../rs/fonts/VeraItalic.svg#BitstreamVeraSansOblique') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Bitstream Vera Sans';
    src: url('../../rs/fonts/VeraBold.eot');
    src: url('../../rs/fonts/VeraBold.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/VeraBold.woff') format('woff'),
         url('../../rs/fonts/VeraBold.ttf') format('truetype'),
         url('../../rs/fonts/VeraBold.svg#BitstreamVeraSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bitstream Vera Sans';
    src: url('../../rs/fonts/VeraBoldItalic.eot');
    src: url('../../rs/fonts/VeraBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../../rs/fonts/VeraBoldItalic.woff') format('woff'),
         url('../../rs/fonts/VeraBoldItalic.ttf') format('truetype'),
         url('../../rs/fonts/VeraBoldItalic.svg#BitstreamVeraSansBoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
}


body {
    margin: 0;
    padding: 0;
    background : url("../../rs/images/commun/sable.jpg") repeat;
    overflow: hidden;
    color: rgb(77,48,0);
}


/********************/
/* bandeau d'entête */
/********************/

#entete {
    display: block;
    background-color : rgb(212,178,120);
    background-color : rgba(169,108,0,0.3);
    border-width : 0px 0px 1px;
    border-color : transparent transparent rgb(169,108,0);
    border-style : none none solid;
    margin: 0;
    font-size : medium;
    line-height: 1;
    box-shadow: 0 6px 10px rgb(169,108,0);
}

#headTitre {
    position: relative;
}

#headLogoTexture {
    display: inline-block;
    margin: 0 .5em;
    padding: 0;
    background-image: url(../../rs/images/commun/sable.jpg);
    background-repeat: repeat;
}

#headLogoColor {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    background-color : rgb(212,178,120);
    background-color : rgba(169,108,0,0.3);
}

#headLogo {
    height: 3.5em;
    margin: 0;
    padding: .75em .25em 0;
}

.headTrait {
    display: block;
    width: 100%;
    z-index: -1;
    height: 1.4em;
    margin: 1.6em 0 0;
    padding:0;
    vertical-align : top;
    border-width : 0px 0px 3px;
    border-style : solid;
    border-color : rgb(202,64,11);
}

#headTraitLogo {
    position: absolute;
    top: 0;
}

#headMenu {
    position: absolute;
    top: 0;
    width: 100%;
    font-family : "Bitstream Vera Serif", serif;
    color: rgb(77,48,0);
/*    height: 4.25em; */
    margin: 0;
    padding: 0;
    text-align: right;
}

.headItemTexture {
    display: inline-block;
    position: relative;
    margin: 0 .5em;
    padding: 0;
    background-image: url(../../rs/images/commun/sable.jpg);
    background-repeat: repeat;
}

.headItemColor {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    background-color : rgb(212,178,120);
    background-color : rgba(169,108,0,0.3);
}

.headTexte {
    display: inline-block;
    width: 2.5em;
    position: absolute;
    top: 3.5em;
    left: -2.3em;
    font-size: x-small;
    text-align: right;
}

#headComparateur, #headTraduction, #headEvangiles {
    background-image: -moz-linear-gradient(top, rgba(169,108,0,0) 0%, rgba(169,108,0,1) 100%);
    background-image: -webkit-linear-gradient(top, rgba(169,108,0,0) 0%, rgba(169,108,0,1) 100%);
    background-image: -o-linear-gradient(top, rgba(169,108,0,0) 0%, rgba(169,108,0,1) 100%);
    background-image: -ms-linear-gradient(top, rgba(169,108,0,0) 0%, rgba(169,108,0,1) 100%);
    background-image: linear-gradient(top, rgba(169,108,0,0) 0%, rgba(169,108,0,1) 100%);
    background-position: center top;
    background-repeat: no-repeat;
    height: 1em;
    margin: 1.6em .2em 0;
    display: inline-block;
    vertical-align: middle;
    border-style : solid;
    border-radius : .2em;
    font-family : "Bitstream Vera Serif", serif;
    text-align: center;
}

#headComparateur.headItem, #headTraduction.headItem, #headEvangiles.headItem {
    border-width : 1px 2px 2px 1px;
    border-color : rgb(169,108,0);
    padding: 5px 15px 11px;
    font-weight : normal;
    color: rgb(77,48,0);
    cursor: pointer;
}

#headComparateur.headItemSelect, #headTraduction.headItemSelect, #headEvangiles.headItemSelect {
    border-width : 2px 3px 3px 2px;
    border-color : rgb(202,64,11);
    padding: 4px 14px 10px;
    font-weight : normal;
    color: rgb(202,64,11);
    cursor: pointer;
}

.headTraitMenu {
    display: none;
    position: absolute;
    top: 0em;
}

#headTraitMenu2 {
    top: 3.95em;
}

#headTraitMenu3 {
    top: 7.9em;
}

/**********/
/* frames */
/**********/

#contenu {
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    top: -5px;
}

#plan, #mentions {
    position: absolute;
    top: 3000px;
    border: 0;
    -webkit-transition-property: top;
    -webkit-transition-duration: .5s;
    -moz-transition-property: top;
    -moz-transition-duration: .5s;
    -o-transition-property: top;
    -o-transition-duration: .5s;
    -ms-transition-property: top;
    -ms-transition-duration: .5s;
    transition-property: top;
    transition-duration: .5s;
}


/*******************/
/* bandeau de pied */
/*******************/

#pied {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background-color : rgb(212,178,120);
    box-shadow:0px -2px 0px white, 0px -3px 0px rgb(169,108,0);
/*    border-width : 1px 0px 0px, 1px 0px 0px;
    border-color : white transparent transparent, rgb(169,108,0) transparent transparent;
    border-style : solid none none, solid none none; */
    height: 25px;
}

#realisation {
    position: relative;
    top: -.3em;
    padding-left: 10px;
    font-size: x-small;
}
#logoWebConcept{
    height: .8em;
    padding-top: .3em;
    cursor : pointer;
}

#liens {
    float: right;
    font-family : "Bitstream Vera Serif", serif;
    font-size : x-small;
    text-align : right;
}

#lienContact, #lienPlan, #lienMentions {
    display: inline-block;
    padding: .5em 1em 0;
    text-decoration: none;
    cursor: pointer;
}

#lienContact:link, #lienContact:visited, #lienPlan:link, #lienPlan:visited, #lienMentions:link, #lienMentions:visited {
    color : rgb(0,0,0);
}



/*****************/
/* petits écrans */
/*****************/

@media screen and (max-width: 640px) {
    #entete {
        font-size: small;
    }

    .headTexte {
        font-size: xx-small;
        top: 3.2em;
    }

    #headComparateur.headItem, #headTraduction.headItem, #headEvangiles.headItem {
        padding-bottom: 8px;
    }

    #headComparateur.headItemSelect, #headTraduction.headItemSelect, #headEvangiles.headItemSelect {
        padding-bottom: 7px
    }
}



/**********************/
/* très petits écrans */
/**********************/

@media screen and (max-width: 400px) {
    #entete {
        font-size: x-small;
    }

    .headTexte {
        top: 2.4em;
        left: -2em;
    }

    #headComparateur.headItem, #headTraduction.headItem, #headEvangiles.headItem {
        padding-bottom: 5px;
    }

    #headComparateur.headItemSelect, #headTraduction.headItemSelect, #headEvangiles.headItemSelect {
        padding-bottom: 4px
    }
}