@charset "utf-8";
/* CSS Document */

/*----------FONT FACE----------*/

@font-face {
    font-family: 'LeagueGothicRoman';
    src: url('./fonts/league_gothic-webfont.eot');
    src: url('./fonts/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/league_gothic-webfont.woff') format('woff'),
         url('./fonts/league_gothic-webfont.ttf') format('truetype'),
         url('./fonts/league_gothic-webfont.svg#LeagueGothicRoman') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SavoyeLETPlain';
    src: url('./fonts/savoye_let_plain-webfont.eot');
    src: url('./fonts/savoye_let_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/savoye_let_plain-webfont.woff') format('woff'),
         url('./fonts/savoye_let_plain-webfont.ttf') format('truetype'),
         url('./fonts/savoye_let_plain-webfont.svg#SavoyeLETPlain') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SquareSerifMedium';
    src: url('./fonts/square/squareserif_medium_macroman/SquareSerif-Medium-webfont.eot');
    src: url('./fonts/square/squareserif_medium_macroman/SquareSerif-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/square/squareserif_medium_macroman/SquareSerif-Medium-webfont.woff') format('woff'),
         url('./fonts/square/squareserif_medium_macroman/SquareSerif-Medium-webfont.ttf') format('truetype'),
         url('./fonts/square/squareserif_medium_macroman/SquareSerif-Medium-webfont.svg#SquareSerifMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SquareSerifBook';
    src: url('./fonts/square/squareserif_book_macroman/SquareSerif-Book-webfont.eot');
    src: url('./fonts/square/squareserif_book_macroman/SquareSerif-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/square/squareserif_book_macroman/SquareSerif-Book-webfont.woff') format('woff'),
         url('./fonts/square/squareserif_book_macroman/SquareSerif-Book-webfont.ttf') format('truetype'),
         url('./fonts/square/squareserif_book_macroman/SquareSerif-Book-webfont.svg#SquareSerifBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SquareSerifDemi';
    src: url('./fonts/square/squareserif_demi_macroman/SquareSerif-Demi-webfont.eot');
    src: url('./fonts/square/squareserif_demi_macroman/SquareSerif-Demi-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/square/squareserif_demi_macroman/SquareSerif-Demi-webfont.woff') format('woff'),
         url('./fonts/square/squareserif_demi_macroman/SquareSerif-Demi-webfont.ttf') format('truetype'),
         url('./fonts/square/squareserif_demi_macroman/SquareSerif-Demi-webfont.svg#SquareSerifDemi') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*----------Fin de FONT FACE----------*/

body{
    background:url(../images/back-popup.jpg) repeat top left;
    margin:auto;
    width:900px;
    text-align: center;
}

.bx-wrapper{
    /*padding: 0 49px;*/
    padding:0;
}

.products .bx-wrapper{
    padding: 0 49px;
}

.popupnews .bx-wrapper{
    padding: 0 49px;
}

.clear{
    clear:both;
}

.ui-state-error,
.ui-state-highlight{
    background: #AC4AFF;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 660px;
    margin: 0 60px 10px 60px;
    padding: 4px 20px;
    color: #FFFFFF;
    font-family:'LeagueGothicRoman';
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0.02em;
}

.ui-state-error p, .ui-state-highlight p{
    padding: 0;
    margin: 10px 0;
}

.ui-state-error b,
.ui-state-highlight b{
    font-family:'LeagueGothicRoman';
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
    text-transform: uppercase;
}


/*----------POPUP PRODUITS----------*/
a{
    outline: none;
}

a img, img{
    border:none;
    padding:0;
    margin:0;
    outline: none;
}

.contact,
.products,
.contenu-actu{
    position: relative;
    text-align: left;
}

.products a#gamme-prev,
.products a#gamme-next{
    font-family: 'SavoyeLETPlain';
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
    position: relative;
    z-index: 1000;
    background: transparent url(../images/picto_fleche_gauche_noire.png) no-repeat left 12px;
    padding: 0 0 0 15px;
}

.products a#gamme-prev{
    float: left;
    margin:0 0 0 60px
}

.products a#gamme-next{
    float: right;
    margin: 0 88px 0 0;
    background: transparent url(../images/picto_fleche_droite_noire.png) no-repeat right 14px;
    padding: 0 15px 0 0;
}

.products a:hover#gamme-prev,
.products a:hover#gamme-next{
    color: #fa7400;
    text-decoration: none;
}

h1,
.products h1,
.contenu-actu h1{
    font-family:'SquareSerifDemi';
    font-size:48px;
    color: #96CE27;
    text-shadow:2px 2px 0px #000000;
    /*padding:50px 0 0 0;*/
    padding:20px 0 0 0;
    margin: auto;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:45px;
    width:800px;
    text-align: left;
}

.products h1,
.contenu-actu h1{
    color:#fa7400;
    width: auto;
    margin:0 0 0 60px;
}

.contenu-actu{
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:230px;
    width:740px;
    padding: 0 0 45px 0;
    overflow: hidden;
    font-family: 'SavoyeLETPlain';
    -webkit-font-smoothing: antialiased;
    font-size: 26px;
    line-height: 28px;
    position: relative;
    margin: auto;
    text-align: left;
}

.contenu-actu#legalterms{
    font-size: 26px;
    line-height: 28px;
    overflow-y: scroll;
    height: 300px;
    width:720px;
    padding: 0 20px 45px 0;
    font: normal 14px/17px Georgia;
}

.bx-next{
    background:url(../images/arrow-right-news.png) no-repeat left center;
    position:absolute;
    right:0;
    top:170px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
    display: block;
}

.bx-prev{
    background:url(../images/arrow-left-news.png) no-repeat left center;
    position:absolute;
    left:0px;
    top:170px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
    display: block;
}

#naturalexperience3{
    position:absolute;
    top:150px;
    right: 160px;
    z-index:100;
}

#naturalexperience4{
    position:absolute;
    top:175px;
    left: 153px;
    z-index:100;
}


.contenu-actu h1{
    color: #5ac20f;
    margin: 0 0 10px 0;
}

.contenu-actu h2,
.products h2{
    font-family:'SquareSerifDemi';
    font-size:22px;
    color:#000000;
    padding:0 0 15px 0;
    margin:7px 0 10px 60px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    width:760px;
    line-height:22px;
}

.contenu-actu h2{
    margin:0 0 30px 0;
}

.contenu-actu img{
    float: left;
    margin: 0 20px 0 0;
}

.products h3{
    font-family:'SquareSerifDemi';
    font-size:19px;
    color:#fa7400;
    padding:0;
    margin:0 0 11px 0px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:20px;
    display: block;
    clear: both;
    /*float:left;
    width: 340px;*/
}

.products .txt{
    float:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    color:#000;
    font-weight:normal;
    margin:10px 0 0 20px;
    /*width:470px;*/
    width:340px;
}

.products .txt p{
    margin:0;
    line-height:18px;
}

.products .picto-actu{
    float:left;
}

.products ul, ul li{
    float:left;
    list-style:none;
    margin:20px 10px 0 20px;
}

.products ul#pictures li{
    margin: 20px 10px 0 10px;
}

ul li, ul li a, ul li a:hover, ul li a img,
ul#pictures li, ul#pictures li a, ul#pictures li a:hover, ul#pictures li a img{
    border: none;
    outline: none;
}

.products ul{
    margin: 0 10px 0 20px;
}

.products li.current{
    background:url(../images/star.png) no-repeat center 60px;
    height:90px;
}

/*.products .bx-window{
    margin:55px 0 0 70px;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:230px;
    width:740px;
}*/

.products .bx-window{
    margin:55px 0 0 15px;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:230px;
    width:740px;
}

.products .bx-next{
    background:url(../images/arrow-right-news.png) no-repeat left center;
    position:absolute;
    left:840px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

.products .bx-prev{
    background:url(../images/arrow-left-news.png) no-repeat left center;
    position:absolute;
    left:0px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

.pager{
    position: relative;
    min-height: 230px;
    text-align: left;
}

/*.pager .fb-like{
    position: absolute;
    top: 180px;
    right: 162px;
}*/

.pager .fb-like{
    display: block;
    clear: both;
    width:100%;
    margin: 15px 0 10px 0;
    float: left;
}

.accessories {
    position: relative;
}

/*.accessories .pager .fb-like{
    top: 215px;
}*/

.accessories .il-vous-suffit{
    font-size: 13px;
    line-height: 18px;
}


/*---------- Enquète ----------*/

.products#enquete .txt{
    font: 17px/19px 'SquareSerifDemi';
    -webkit-font-smoothing:antialiased;
    width: 725px;
    overflow: auto;
    height: 150px;
}

/*#picto-scroll{
    position: absolute;
    top: 105px;
    right: -10px;
    width: 88px;
    height: 92px;
}*/

#picto-scroll{
    position: absolute;
    top: 0px;
    right: 55px;
    width: 88px;
    height: 92px;
}

.products#enquete .bx-window{
    /*margin:0px 0 0 70px;*/
    margin:0px 0 0 0;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:230px;
    width:740px;
}

.products#enquete .bx-next{
    top:140px;
    width:34px;
}

.products#enquete .bx-prev{
    left:0px;
    top:140px;
}

.products#enquete input{
    margin: 0 10px 0 0;
}

.products#enquete input.habillage-champs,
.products#enquete input.habillage-champs2,
.products#enquete textarea{
    border: 1px solid #cccccc;
    background: #FFFFFF;
    font: normal 12px/14px 'SquareSerifDemi';
    width: 90%;
    padding: 4px 10px;
    margin: 0 0 7px 10px;
    height: 22px;
}

.products#enquete input.habillage-champs2{
    margin: 6px 0 7px 0;
}

.products#enquete textarea{
    height: 130px;
}

.products#enquete h3{
    margin:25px 0 15px 20px;
    width:710px;
}

.spacer{
    clear: both;
}

.products#enquete .slider{
}

.products#enquete table#smiley img{
    text-align: center;
    margin: 0;
}

.products#enquete table#smiley input{
    text-align: center;
    margin: 0 0 0 6px;
}

.products#enquete a#envoyer{
    float: right;
    margin: 75px 195px 0 0;
    background: #000000;
    font: 17px/19px 'SquareSerifDemi';
    -webkit-font-smoothing:antialiased;
    text-transform: uppercase;
    color: #FFFFFF;
    padding: 10px 25px;
    text-decoration: none;
}

.products#enquete a:hover#envoyer{
    background: #fa7400;
    text-decoration: none;
    color: #FFFFFF;
}

#naturalexperience-chanvrebio1{
    position:absolute;
    top:0px;
    right: 270px;
    z-index:100;
}

#naturalexperience-chanvrebio2{
    position:absolute;
    top:0px;
    right: 270px;
    z-index:100;
}

#naturalexperience-chanvrebio3{
    position:absolute;
    top:0px;
    right: 270px;
    z-index:100;
}

/*----------Fin de l'Enquète ----------*/

/*----------Fin de POPUP PRODUITS----------*/


/*----------POPUP ACCESSOIRES----------*/

.accessories h1{
    font-family:'SquareSerifDemi';
    -webkit-font-smoothing:antialiased;
    font-size:48px;
    color:#F5CC24;
    text-shadow:2px 2px 0px #000000;
    /*padding:50px 0 0 0;*/
    padding:20px 0 0 0;
    margin:0 0 0 60px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:45px;
    width:640px;
}

.accessories h2{
    font-family:'SquareSerifDemi';
    -webkit-font-smoothing:antialiased;
    font-size:22px;
    color:#000000;
    padding:0 0 15px 0;
    margin:7px 0 10px 60px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    width:760px;
    line-height:22px;
    text-align: left;
}

.accessories h3{
    font-family:'SquareSerifDemi';
    -webkit-font-smoothing:antialiased;
    font-size:20px;
    color:#F5CC24;
    padding:0;
    margin:0 0 20px 0;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:20px;
    float:left;
    width: 100%;
    text-shadow: 2px 2px 2px #000000;
}

.accessories .txt{
    float:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:15px;
    color:#000;
    font-weight:normal;
    margin:10px 0 0 20px;
    /*padding: 0 207px 0 0;*/
    width: 470px;
    position: relative;
}

.accessories .txt p{
    margin:0;
    line-height:20px;
}

#naturalexperience2{
    position:absolute;
    top:135px;
    left: 15px;
    z-index:100;
}

.accessories .picto-actu{
    float:left;
}

.accessories a#gamme-prev,
.accessories a#gamme-next{
    font-family: 'SavoyeLETPlain';
    -webkit-font-smoothing: antialiased;
    font-size: 23px;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
    position: relative;
    z-index: 1000;
    background: transparent url(../images/picto_fleche_gauche_noire.png) no-repeat left 12px;
    padding: 0 0 2px 15px;
}

.accessories a#gamme-prev{
    float: left;
    margin:0 0 0 60px
}

.accessories a#gamme-next{
    float: right;
    margin: 0 88px 0 0;
    background: transparent url(../images/picto_fleche_droite_noire.png) no-repeat right 14px;
    padding: 0 15px 2px 0;
}

.accessories a:hover#gamme-prev,
.accessories a:hover#gamme-next{
    color:#F5CC24;
    color:#caa220;
    text-decoration: none;
}

.accessories ul, ul li{
    float:left;
    list-style:none;
    margin:20px 10px 0 20px;
}

.accessories li.current{
    background:url(../images/star.png) no-repeat center 60px;
    height:90px;
}

.accessories .bx-window{
    margin:50px 0 0 70px;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:250px;
    width:740px;
}

.accessories .bx-next{
    background:url(../images/arrow-right-news.png) no-repeat left center;
    position:absolute;
    left:840px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

.accessories .bx-prev{
    background:url(../images/arrow-left-news.png) no-repeat left center;
    position:absolute;
    left:0px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

/*----------Fin de POPUP ACCESSOIRES----------*/

/*----------POPUP CONTACT----------*/

.contact h1{
    font-family:'SquareSerifDemi';
    font-size:48px;
    color:#ac4aff;
    text-shadow:2px 2px 0px #000000;
    padding:20px 0 0 0;
    margin:0 0 7px 60px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:45px;
    width:640px;
}

.contact h2{
    font-family:'SquareSerifDemi';
    font-size:23px;
    color:#000000;
    padding:0 0 15px 0;
    margin:7px 0 0 60px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    width:760px;
    line-height:23px;
}

.contact h3{
    font-family:'SquareSerifDemi';
    font-size:20px;
    color:#ac4aff;
    padding:0;
    margin:0 0 0 20px;
    font-weight:normal;
    font-smooth:always;
    text-transform:uppercase;
    line-height:20px;
    float:left;
}

.contact .txt{
    float:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:15px;
    color:#000;
    font-weight:normal;
    margin:10px 0 0 20px;
    width:470px;
}

.contact .txt p{
    margin:0;
    line-height:20px;
}

.contact .contenu-actu{
    font: normal 14px/17px Georgia;
}


.contact .picto-actu{
    float:left;
}

.contact ul, ul li{
    float:left;
    list-style:none;
    margin:20px 10px 0 20px;
}

.contact li.current{
    background:url(../images/star.png) no-repeat center 60px;
    height:90px;
}

.contact .bx-window{
    margin:50px 0 0 70px;
    background:url(../images/separation-popup.png) no-repeat bottom left;
    min-height:250px;
    width:740px;
}

.contact .bx-next{
    background:url(../images/arrow-right-news.png) no-repeat left center;
    position:absolute;
    left:840px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

.contact .bx-prev{
    background:url(../images/arrow-left-news.png) no-repeat left center;
    position:absolute;
    left:0px;
    top:70px;
    width:34px;
    height:34px;
    font-size:0px;
    text-decoration:none;
}

.formulaire{
    padding: 10px 50px;
}

#form-left{
    float:left;
    width:365px;
    margin:0;
}

#form-right{
    float:left;
    width:365px;
    margin:0;
}

#form-message{
    float:left;
    width:715px;
    margin:0;
}

.form-title{
    font-family:'LeagueGothicRoman', Arial;
    font-size:14px;
    color:#000;
    font-weight:normal;
    text-transform:uppercase;
    width:70px;
    float:left;
}

#form-left span{
    font-family:'LeagueGothicRoman', Arial;
    font-size:14px;
    color:#000;
    font-weight:normal;
    text-transform:uppercase;
    width:auto;
}

#form-left span span.radio{
    width:auto;
    margin: 0 0 0 70px;
}

#form-left span span input{
	margin-left:0;
	margin-right: 5px;
}

.form-type{
    width:260px;
    height:35px;
    background-color:#fff;
    border:none;
    border-radius:5px;
}

.form-message{
    width:260px;
    height:113px;
    background-color:#fff;
    border:none;
    border-radius:5px;
    margin: 0 20px 0 0;
    float: left;
}

input{
    padding:0 0 0 5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#252525;
    margin: 0 0 25px 0;
}

select.form-type {
    color: #252525;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    margin: 0 0 25px;
    padding: 10px 0 10px 5px;
    height: 35px;
    outline: none;
}

textarea{
    padding:8px 0 0 5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#252525;
}

#form-submit{
    margin:25px 0 0 130px;
}

.send{
    background-color:#000;
    border-radius:5px;
    padding:5px 20px 5px 20px;
    font-family:'SquareSerifDemi';
    font-size:15px;
    color:#fff;
    border:none;
    cursor:pointer;
    margin: 28px 0 0 77px;
}

input:hover.send{
    background-color: #5ac20f;
    background-color: #ac4aff;
}

.title{
    padding:4px 5px 0 0;
    text-align:right;
}

/*----------Fin de POPUP CONTACT----------*/

/*---------- BLOC PICTOS ----------*/

.bloc-pictos{
    background: transparent url(../images/background_pictos_ocb.png) no-repeat left top;
    width:83px;
    height: 160px;
    float: right;
    text-align: center;
    padding: 15px 20px 10px 10px;
    margin: 0 145px 0 0;
}

.bloc-picto-combustion,
.bloc-picto-nombre-feuille,
.bloc-picto-format{
    text-align: center;
    font: normal 11px/13px Arial;
    color: #FFFFFF;
    display: block;
    float:left;
    clear: both;
    margin: 0;
    width: 100%;
}

.bloc-picto-combustion img,
.bloc-picto-nombre-feuille img{
    margin: 0 0 5px 0;
}
.bloc-picto-format img{
    margin: 0 0 8px 0;
}


.bloc-picto-combustion{
    height: 49px;
}

.bloc-picto-nombre-feuille{
    height: 34px;
    padding: 10px 0 0 0;
}

.bloc-picto-format{
    height: 46px;
    padding: 10px 0 0 0;
}

/*---------- FIN DE DIV BLOC PICTOS----------*/

/** VISUEL ZOOM **/

#pictures-zoom {
    position: absolute;
    top:40px;
    left:80px;
    z-index:9999;
}

.picto-zoom {
    display:none;
    width: 710px;
    height: 375px;
    border:3px black solid;
    position: absolute;
}

.zoom-close {
    position:absolute;
    right:-3px;
    top:-3px;
}



Type
Type MIME	text/css
Type de ressource	Feuille de style
Emplacement
URL complète	http://www.ocb.net/css/popup.css
Schéma	http
Hôte	www.ocb.net
Chemin	/css/popup.css
Nom du fichier	popup.css
Demande et réponse
Méthode	—
En cache	Non
État	—
Code	—