html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, 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;
}

:active, :focus{outline: none;}

body
{
    background: #ececec;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    text-align: justify;
    line-height: 1.3;
}

ol, ul {list-style: none;}

a{text-decoration: 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: "" "";}

textarea{overflow: auto;}

.stopfloat{clear: both;}


/*-----------PAGE ACCUEIL-------------*/

#header #menu{position: absolute; top: 170px; left: 385px; z-index: 3;}
.btn-menu a{display: block; width: 80px; height: 100px; line-height: 0px; text-align: center; color: #bf1e2e; font-style: italic; font-weight: bold;}
.btn-menu a#concept{background:url(img-pozpom/btn-concept-00.png) no-repeat bottom;}
.btn-menu a#panier{background:url(img-pozpom/btn-panier-00.png) no-repeat bottom;}
.btn-menu a#livraison{background:url(img-pozpom/btn-livraison-00.png) no-repeat bottom;}
.btn-menu a#contact{background:url(img-pozpom/btn-contact-00.png) no-repeat bottom;}
#header #menu li{float: left; margin: 0 10px;}

#contenu{background: url(img-pozpom/bureau_accueil.jpg) no-repeat; width: 1000px; height: 511px; margin: auto; border-top: 4px solid #f7941e; position: relative;}
.texte-accueil p{font-family: 'Nunito', sans-serif; font-size: 30px; background: #f7941e; color: #fff; text-align: center; padding: 5px 10px;}
#texte-concept{visibility: hidden; position: absolute; top: 100px; left: 500px; z-index:5;}
#texte-panier{visibility: hidden; position: absolute; top: 400px; left: 500px;}
#texte-livraison{visibility: hidden; position: absolute; top: 100px; left: 50px;}
#texte-contact{visibility: hidden; position: absolute; top: 350px; left: 300px;}

.pastille-concept
{
    background-image: url("img-pozpom/pastille-1.png");
    background: url("img-pozpom/pastille-1.png") no-repeat scroll center bottom transparent;
    visibility: visible;
    width:111px;
    height:111px;
    position: absolute; 
    top: 172px; 
    left: 47px;
    z-index:4;
}
.pastille-panier
{
    background-image: url("img-pozpom/pastille-2.png");
    background: url("img-pozpom/pastille-2.png") no-repeat scroll center bottom transparent;
    visibility: visible;
    width:47px;
    height:47px;
    position: absolute; 
    top: 215px; 
    left: 464px;
}
.pastille-livraison
{
    background-image: url("img-pozpom/pastille-3.png");
    background: url("img-pozpom/pastille-3.png") no-repeat scroll center bottom transparent;
    visibility: visible;
    width:25px;
    height:25px;
    position: absolute; 
    top: 218px; 
    left: 747px;
}
.pastille-contact
{
    background-image: url("img-pozpom/pastille-4.png");
    background: url("img-pozpom/pastille-4.png") no-repeat scroll center bottom transparent;
    visibility: visible;
    width:94px;
    height:93px;
    position: absolute; 
    top: 108px; 
    left: 874px;
}


/*---------------PAGE GENERAL-----------------*/

#header{width: 1000px; height: 247px; position: relative; background: #fff; margin: auto; z-index: 3;}

#header #barre{background: url(img-pozpom/bandeau-vert-haut-page.png) no-repeat; width: 1000px; height: 17px;}

#header #logo{width: 361px; margin-top: 10px; margin-left: 5px;}
#header #logo img{width: 288px; height: 170px; margin-left: 33px; margin-bottom: 2px;}
#header h1{font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; letter-spacing: 0.025em; font-size: 22px; color: #f7941e; text-align: center;}
#header h1 span{color: #bf1e2e;}

#header #postit{width: 216px; height: 228px; position: absolute; top: 45px; right: 10px; z-index: 2;}

/*background*/
#contenu-type{background: url(img-pozpom/img-pozpom-page-type-00.jpg) no-repeat; width: 1000px; height: 511px; margin: auto; border-top: 4px solid #f7941e; position: relative;}

/*menu*/
#header #menu-type{position: absolute; top: 170px; left: 385px; z-index: 3;}
.btn-menu-type a{display: block; width: 80px; height: 100px; line-height: 15px; text-align: center; color: #e5a2a9; font-style: italic; font-weight: bolder;}
.btn-menu-type a#concept{background:url(img-pozpom/btn-concept-01.png) no-repeat bottom;}
.btn-menu-type a:hover#concept{background:url(img-pozpom/btn-concept-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#concept.current{background:url(img-pozpom/btn-concept-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#paniers{background:url(img-pozpom/btn-panier-01.png) no-repeat bottom;}
.btn-menu-type a:hover#paniers{background:url(img-pozpom/btn-panier-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#paniers.current{background:url(img-pozpom/btn-panier-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#livraison{background:url(img-pozpom/btn-livraison-01.png) no-repeat bottom;}
.btn-menu-type a:hover#livraison{background:url(img-pozpom/btn-livraison-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#livraison.current{background:url(img-pozpom/btn-livraison-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#contact{background:url(img-pozpom/btn-contact-01.png) no-repeat bottom;}
.btn-menu-type a:hover#contact{background:url(img-pozpom/btn-contact-00.png) no-repeat bottom; color: #bf1e2e;}
.btn-menu-type a#contact.current{background:url(img-pozpom/btn-contact-00.png) no-repeat bottom; color: #bf1e2e;}
#header #menu-type li{float: left; margin: 0 10px;}

/*texte et titre*/
#contenu-type h2{font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; letter-spacing: 0.028em; margin-left: 20px; font-size: 25px; color: #f7941e; text-align: left;}
#contenu-type h2 span{color: #bf1e2e;}
#contenu-type .titre-pal{font-size: 34px; text-align: center;}
.intervale{padding-top: 25px;}
.inter{padding-top: 4px;}
.puce{width: 10px; height: 10px; padding-right: 10px;}
#contenu-type h3{font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; text-align: center; font-size: 24px; color: #a2af1e;}
#contenu-type h4{font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; text-align: center; font-size: 14px; color: #bf1e2e; padding-bottom: 15px;}
#contenu-type p{padding: 3px 20px;}
#contenu-type p .vert{color: #A2AF1E; font-style: italic; font-size: 14px;}
#contenu-type p .vert-offre{color: #A2AF1E; font-style: italic; font-size: 14px; text-align: center;}
#contenu-type p strong{font-weight: bolder; color: #bf1e2e;}
#contenu-type a{color: #000; font-style: italic;}
#contenu-type a:hover{text-decoration: underline;}
.notes{font-style: italic; font-size: 11px;}

/*alignement par le bas des div*/
#contenu-type .col{display: inline-block; vertical-align: bottom; padding-top: 40px;}

/*gestion du floatant*/
.floatleft{float: left;}
.floatright{float: right;}


/*block contact et logo client*/
.top-block2{background: url(img-pozpom/bloc-contenu-contact-client-haut.png) no-repeat; width: 188px; height: 13px;}
.mid-block2{background: url(img-pozpom/bloc-contenu-contact-client-milieu.png) repeat-y; width: 188px;}
.bot-block2{background: url(img-pozpom/bloc-contenu-contact-client-bas.png) no-repeat; width: 188px; height: 13px;}

#block-contact{margin-right: 15px;}
#block-client{padding-top: 15px; margin-right: 15px;}

/*animation défilement logo client*/
#block-client #logo-client {position:relative; height:80px; margin-left: 14px; padding-bottom: 10px;}
#block-client #logo-client img {position:absolute; top:0; left:0; z-index:8; cursor: pointer; height:80px; width:160px;}
#block-client #logo-client img.active {z-index:10;}
#block-client #logo-client img.last-active {z-index:9;}

/*block contact téléphone et bouton*/
#block-contact .phone{font-family: 'Nunito', sans-serif; text-align: center; letter-spacing: 0.01em; font-size: 20px; color: #bf1e2e; font-weight: bold; padding: 10px 0;}
#block-contact .btn-contact{background: url(img-pozpom/btn-contact-formulaire-00.png) no-repeat; width: 157px; height: 32px; display: block; text-align: center; color: #fff; font-style: normal; font-size: 19px; line-height: 32px; margin: auto; padding-bottom: 10px;}
#block-contact .btn-contact:hover{text-decoration: none; background: url(img-pozpom/btn-contact-formulaire-01.png) no-repeat;}

/*footer*/
#footer{background: url(img-pozpom/bandeau-blc-bas-page.png) no-repeat; width: 969px; height: 48px; display: block; margin: auto; margin-left: 15px; top: 458px; position: absolute;}
#footer ul{width: 733px; margin: auto;}
#footer li{float: left; font-weight: bold; font-size: 11px; color: #000; line-height: 48px;}
#footer .copy{padding-right: 15px;}
#footer a{font-weight: bold; font-size: 11px; color: #000; line-height: 48px; padding: 0 15px;}
#footer a:hover{text-decoration: underline;}
#footer #facebook{margin-left: 175px; line-height: 69px; padding: 0;}
#footer #facebook img{width: 30px; height: 30px;}
#footer #twitter{margin-left: 10px; line-height: 69px; padding: 0;}
#footer #twitter img{width: 30px; height: 30px;}
#footer #admin{margin-left: 40px; line-height: 58px; padding: 0;}
#footer #admin img{width: 15px; height: 15px;}
.centered {margin-left: 50%;color: forestgreen}
.centered:hover{color:lawngreen;text-decoration: none;}
/*------------------Page concept-----------------------------*/
#main{margin: 0 30px 0 15px;}
#texte{width: 515px;}
#panier-test{width: 222px; margin-left: 5px;}
#panier-test img{width: 197px; height: 291px; margin-left: 10px;}
#panier-test .btn-panier-test
{background: url(img-pozpom/btn-test-00.png) no-repeat; width: 200px; height: 37px; display: block; font-style: normal; text-align: right; color: #fff; font-size: 13px; line-height: 34px; margin: 5px auto; font-weight: bold;}
#panier-test .btn-panier-test:hover{background: url(img-pozpom/btn-test-01.png) no-repeat; text-decoration: none;}

/*pavé principal*/
.top-block{background: url(img-pozpom/bloc-contenu-concept-haut.png) no-repeat; width: 743px; height: 15px;}
.block{background: url(img-pozpom/bloc-contenu-concept-milieu.png) repeat-y; width: 743px; height: 383px;}
.bot-block{background: url(img-pozpom/bloc-contenu-concept-bas.png) no-repeat; width: 743px; height: 15px;}


/*------------------Page offres-----------------------------*/
#main{width: 743px; height: 413px; position: relative;}
#fruitibox{width : 364px;}
#panier-offre{width : 362px;}
.photo-panier{margin-left: 10px;}
.photo-peche-offre{float: right; margin: 0 10px;}

#fruitibox .info-prix{text-align: center;}

#panier-offre .btn-panier-test
{background: url(img-pozpom/btn-test-00.png) no-repeat; width: 200px; height: 37px; display: block; font-style: normal; text-align: right; color: #fff; font-size: 13px; line-height: 34px; margin: 5px auto 15px; font-weight: bold;}
#panier-offre .btn-panier-test:hover{background: url(img-pozpom/btn-test-01.png) no-repeat; text-decoration: none;}

#Scroller-1 {
    height: 377px;
    overflow: hidden;
    position: absolute;
    width: 743px;
}

.Scroller-Container {
    left: 0;
    position: absolute;
    top: 0;
}
.Scrollbar-Track {
    background-color: #b4b4b4;
    height: 380px;
    right: 7px;
    position: absolute;
    top: 55px;
    width: 10px;
    z-index: 6;
}
.Scrollbar-Handle {
    background-color: #a2af1e;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
}



/*------------------Page livraison-----------------------------*/

.photo-peche{float: right; margin-right: 10px; margin-top: 25px;}
.photo-groseille{float: left; margin-left: 10px;}


/*-------------------Page contact--------------------*/

#contenu-type .main-contact{margin-left: 25px; padding-top: 40px;}

.top-contact{background: url(img-pozpom/cadre-contact-haut.png) no-repeat; width: 949px; height: 23px;}
.mid-contact{background: url(img-pozpom/cadre-contact-milieu.png) repeat-y; width: 949px; height: 365px;}
.bot-contact{background: url(img-pozpom/cadre-contact-bas.png) no-repeat; width: 949px; height: 23px;}

.contact{float: left;}

#contenu-type .formulaire-pozpom
{
    width: 805px;
    margin: 20px 0;
}

#contenu-type .formulaire-pozpom .contact-gauche{float: left;}
#contenu-type .formulaire-pozpom .contact-mid{margin: 0 auto;display: block}
#contenu-type .formulaire-pozpom .contact-drt{float: right;}
#contenu-type .formulaire-pozpom .contact-gauche input{width: 247px;}
#contenu-type .formulaire-pozpom .contact-gauche textarea{width: 247px; resize: none;}
#contenu-type .formulaire-pozpom .contact-drt input{width: 300px;}
#contenu-type .formulaire-pozpom .contact-drt textarea{width: 300px; resize: none;}
#contenu-type .formulaire-pozpom .contact-mid input{width: 300px;margin: auto;padding-left: 5px;}
#contenu-type .formulaire-pozpom .contact-mid textarea{width: 300px; resize: none;}
#contenu-type .formulaire-pozpom .contact-mid select{width: 300px;margin: auto;padding-left: 5px;}

#contenu-type .formulaire-pozpom p, #contenu-type .formulaire-pozpom label
{
    font-family: arial;
    font-size: 12px;
    padding: 0;
    margin: 0;
    text-align: right;
}

.formulaire-pozpom label{display: block; width: 110px; float: left;}

#contenu-type .formulaire-pozpom input
{
    background-color: #a2af1e;
    margin-bottom: 9px;
    margin-left: 5px;
    height: 20px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#contenu-type .formulaire-pozpom .contact-mid input,#contenu-type .formulaire-pozpom .contact-mid select
{
    background-color: #a2af1e;
    margin-left: 40%;
    height: 20px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: black;
}

#contenu-type .formulaire-pozpom .contact-mid input:-moz-placeholder
{
    font-size: ;
}

#contenu-type .formulaire-pozpom .contact-mid input::-webkit-input-placeholder
{
    color: white;
}


#contenu-type .formulaire-pozpom #objet
{
    background-color: #a2af1e;/*#a2af1e*/
    margin-bottom: 10px;
    width: 246px;
    height: 22px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#contenu-type .formulaire-pozpom #objet option{background: #a2af1e;}

#contenu-type .formulaire-pozpom textarea
{
    background-color: #a2af1e;
    margin-bottom: 10px;
    font-family: arial;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 12px;
    resize: none;
}

#contenu-type .formulaire-pozpom .btn
{
    float: right;
    width: 100px;
    height: 25px;
}

#contenu-type .formulaire-pozpom .btn:hover{background: #bf1e2e; cursor: pointer;}

.rep{font-size: 15px;}

#contenu-type .formulaire-pozpom .btn_mid
{
    float:inherit;
    margin-left:-51%;
    position: absolute;
    width: 100px;
    height: 25px;
}

#contenu-type .formulaire-pozpom .btn_mid2
{
    float:inherit;
    margin-left:-57%;
    position: absolute;
    width: 200px;
    height: 25px;
}


#contenu-type .formulaire-pozpom .btn_mid:hover{background: #bf1e2e; cursor: pointer;}

.rep{font-size: 15px;}

/*-------------------Page offre contact--------------------*/

#contenu-type .main-contact{margin-left: 25px; padding-top: 40px;}

.top-contact{background: url(img-pozpom/cadre-contact-haut.png) no-repeat; width: 949px; height: 23px;}
.mid-contact{background: url(img-pozpom/cadre-contact-milieu.png) repeat-y; width: 949px; height: 365px;}
.bot-contact{background: url(img-pozpom/cadre-contact-bas.png) no-repeat; width: 949px; height: 23px;}

.contact{float: left;}

#contenu-type .formulaire-offre-pozpom
{
    width: 805px;
    margin: 20px 0;
}

#contenu-type .formulaire-offre-pozpom .contact-gauche{float: left;}
#contenu-type .formulaire-offre-pozpom .contact-drt{float: right;}
#contenu-type .formulaire-offre-pozpom .contact-mid{margin: auto;}
#contenu-type .formulaire-offre-pozpom .contact-gauche input{width: 247px;}
#contenu-type .formulaire-offre-pozpom .contact-gauche textarea{width: 247px; resize: none;}
#contenu-type .formulaire-offre-pozpom .contact-drt input{width: 300px;;}
#contenu-type .formulaire-offre-pozpom .contact-drt textarea{width: 300px; resize: none;}

#contenu-type .formulaire-offre-pozpom p, #contenu-type .formulaire-offre-pozpom label
{
    font-family: arial;
    font-size: 12px;
    padding: 0;
    margin: 0;
    text-align: right;
}

.formulaire-offre-pozpom label{display: block; width: 110px; float: left;}

#contenu-type .formulaire-offre-pozpom input
{
    background-color: #f7941e;
    margin-bottom: 9px;
    margin-left: 5px;
    height: 20px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#contenu-type .formulaire-offre-pozpom select
{
    background: #f7941e;
    margin-bottom: 10px;
    width: 246px;
    height: 22px;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#contenu-type .formulaire-offre-pozpom option{background: #fff;}

#contenu-type .formulaire-offre-pozpom textarea
{
    background-color: #f7941e;
    margin-bottom: 10px;
    font-family: arial;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 12px;
    resize: none;
}

#contenu-type .formulaire-offre-pozpom .btn
{
    float: right;
    width: 100px;
    height: 25px;
}

#contenu-type .formulaire-offre-pozpom .btn:hover{background: #bf1e2e; cursor: pointer;}

.rep{font-size: 15px;}


/*------------------ page mentions légales --------------------*/


#main-mention{width: 945px; height: 410px; position: relative;}
#contenu-type .mention h3, #contenu-type .mention h4{text-align: left; margin-left: 50px; padding: 10px 0;}
#contenu-type .mention h3{font-size: 20px;}

/*------------------------- page CGV -------------------------*/

.parenthese{font-size: 14px;}
.centree{text-align: center;}
.mention ul{list-style: disc; margin-left: 50px;}
sup{font-size: 12px;}


/*------------------ css plugin validity --------------------*/

/* 
* Style used by the label output mode.
* Applied to the error labels that get positioned after an input.
*/
label.error { 
    color:#000; 
    margin-left:2px;     
    background: #f7941e;
    padding:2px;
    padding-left:18px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
}

/*
* Styles used by the modal output mode.
* '.validity-modal-msg' is applied to the modal boxes 
* and '.validity-modal-msg:hover' is applied to suggest 
* to the user that the boxes are clickable.
*/
.validity-modal-msg {
    font-family: arial;
    font-size: 12px;
    color: #000;
    position:absolute; 
    z-index:2; 
    background-color:#bf1e2e; 
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    padding:2px;
    cursor:pointer;
    margin-top: 10px;
}
.validity-modal-msg:hover { 
    background-color:#aaa; 
}

/*
* Styles used by the summary output mode.
* '.validity-summary-container' is a container on the page that should contain a UL 
* which is the actual summary. The container can hold 
* an extra bit of text (or anything really) that explains what the summary is.
* '.validity-erroneous' is applied to every input that fails.
*/
.validity-summary-container { display:none; }
.validity-summary-output ul { }
.validity-erroneous { border:solid 2px #f56600 !important; }