/*
Name: Famille Jouffreau
URL: http://www.famille-jouffreau.com/
Author: Com-Ocean | http://www.com-ocean.com
Date: Juillet 2010
*/


* {outline: none;}

html, body, #wrap {height: 100%;}

html {font-size: 100.01%;}

body {
	background: #ac0304 url(../images/bkgd.jpg) no-repeat center top;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 62.5%;
	margin: 0;
  padding: 0;
}

body#home {background: #3d0b06 url(../images/bkgd_home.jpg) no-repeat center top;}

	
h1, h2, h3, h4, h5, h6, address, p {
	font-weight: normal;
	margin: 0 0 10px;
	padding: 0;
}

ol, ul, blockquote {
	font-weight: normal;
  line-height: 16px;
}

button, input, select, textarea {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
}

/* ----------------------------------------------------------------------- */
/*                             	GENERAL STYLES                             */
/* ----------------------------------------------------------------------- */

.left {float: left;}

.right {float: right;}

.clear {clear: both;}
 
img {border: 0; display: block;}
 
.italic {font-style: italic;}
 
.uppercase {text-transform: uppercase;}
	
.ir {
	background-position: 0 0;
	background-repeat: no-repeat !important;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}

h1 {
	color: #ac0304;
  font-size: 32px;
  text-transform: uppercase
}

h2 {
	border-bottom: #a08674 dashed 1px;
	color: #393939;
  font-size: 24px;
  font-style: italic;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

h3 {
	color: #393939;
  font-size: 18px;
  font-style: italic;
	font-weight: bold;
  margin: 30px 0 10px;
}

h4 {
	color: #555;
  //display: inline;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 15px;
}

h5 {
	color: #ac0304;
  font-size: 14px;
  font-style: italic;
}

h6 {
	color: #393939;
  font-size: 12px;
  font-weight: italic;
}

p {
	color: #555555;
  font-size: 12px;
  line-height: 16px;
}

a { 
	color: #393939; 
  text-decoration: underline;
}

a:hover { text-decoration: none; }

hr {
	border-width: 1px 0 0 0;
  border-color: #d0d0d2;
  border-style: dashed;
	color: #d0d0d2;
  padding: 10px 0 0;
}

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

li {
	color: #555555;
  font-size: 12px;
  padding: 0 0 5px 12px;
  }


/* ----------------------------------------------------------------------- */
/*                             	LAYOUT                                                            */
/* ----------------------------------------------------------------------- */

#container {
	margin: 0 auto 50px;
  position: relative;
	width: 980px;
}

  #header {
    left: 0;
    margin:0;
    position: absolute;
    top: 0;
    width: 260px;
    z-index: 5;
  }
  
  #main {
  	background-position: top right;
  	background-repeat: no-repeat;
    margin: 4px 0 20px 10px;
    position: relative;
    width: 970px;
  }
  
  	#content-box {
    	background: url(../images/bkgd_content_bottom.png) no-repeat bottom left;
      margin: 0 0 0 210px;
      padding-bottom: 17px;
      width: 450px;
    }
    
    .content-box-galerie {
    	background-image: url(../images/bkgd_content-galerie_bottom.png) !important;
      width: 375px !important;
    }
  
    #content {
    	position: relative;
      background: url(../images/bkgd-content.png) repeat-y 0 0;
      min-height: 500px;
      height:auto !important;
      height: 500px;
      padding: 80px 50px 50px;
      width: 350px;
      z-index: 2;
    }
    	
      .content-galerie {
        background-image: url(../images/bkgd-content-galerie.png) !important;
      	width: 275px !important;
      }
    
    #bloc-content {
    	background-color: #3d0b06;
      padding: 0 15px 10px 25px;
    	position: absolute;
      right: 0;
      top: 460px;
      width: 290px;
      z-index: 1;
    }
    
    .content-produit {
    	padding-top: 20px !important;
      top: 550px !important;
    }
    
    #slideshow-box {
    	position: absolute;
      right: 0;
      top: 0;
      width: 410px;
      z-index: 1;
}

  
  #footer {
    clear: both;
    height: 20px;  
    width: 980px;
  }


/* ----------------------------------------------------------------------- */
/*                             	NAVIGATION                                                      */
/* ----------------------------------------------------------------------- */

/*------------- Nav --------------- */
#nav {
	list-style-type: none;
  margin: 0;
  width: 260px;
 }
 
 #nav li {
 	margin: 0; 
  padding: 0;  
  position: relative;
}
 
   #nav li a {
    background-position: top left;
    background-repeat: no-repeat !important;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
  }
  
    #nav li a:hover, #nav li.selected a {background-position: top right;}
 
      body.fr #nav-famille-jouffreau a { background-image: url(../images/fr/nav_famille.png); height: 80px; }
      body.fr #nav-nos-terroirs a { background-image: url(../images/fr/nav_terroir.png); height: 80px; }
      body.fr #nav-nos-vins a { background-image: url(../images/fr/nav_vins.png); height: 80px; }
      body.fr #nav-nos-vieux-millesimes a { background-image: url(../images/fr/nav_collection.png); height: 80px; }
      body.fr #nav-presse a { background-image: url(../images/fr/nav_presse.png); height: 50px; }
      body.fr #nav-contact a { background-image: url(../images/fr/nav_contact.png); height: 60px; }

      body.en #nav-famille-jouffreau a { background-image: url(../images/en/nav_famille.png); height: 80px; }
      body.en #nav-our-terroir a { background-image: url(../images/en/nav_terroir.png); height: 80px; }
      body.en #nav-our-wines a { background-image: url(../images/en/nav_vins.png); height: 80px; }
      body.en #nav-our-old-vintages a { background-image: url(../images/en/nav_collection.png); height: 80px; }
      body.en #nav-press a { background-image: url(../images/en/nav_presse.png); height: 50px; }
      body.en #nav-contact a { background-image: url(../images/en/nav_contact.png); height: 60px; }


#nav ul {display: none;}

#nav li.selected {height: 239px;}

	#nav li#nav-presse  {height: 50px;}
	#nav li#nav-contact  {height: 60px;}

  #nav li.selected ul {
    background: url(../images/subnav_body.png) no-repeat 0 0;
    display: block;
    height: 154px;
    margin: 0;
    position: absolute;
    padding: 10px 10px 5px 20px;
    top: 75px;
    width: 220px;
    z-index: 10;
    }
    
      #nav li.selected li {height: auto;}  
    
       #nav li.selected ul a {
        background-image: none;
        color: #3d0b06;
        display: block;
        font-size: 13px;
        font-weight: bold;
        height: auto !important;
        margin: 5px 0;
        overflow: visible;
        text-indent: 0;
        text-decoration: none;
    }
  
       #nav li.selected ul a:hover, #nav li.selected ul li.selected a {color: #ac0304; font-style: italic;}


/*------------- sous-nav --------------- */
  
#top-subnav {
  border-bottom: #ce776d 1px dashed;
  height: 50px;
  padding: 15px 0 0;
  width: 980px;
  text-align: right;
}

	#subnav {
    list-style-type: none; 
    display:inline-block;
    vertical-align: middle;
  }

    #subnav li {
      color: #f3ecd8;
      float: right;
      font-size: 14px;
      font-style: italic;
      font-weight: bold;
      margin-left: 10px;
      padding: 0;
    }
  
      #subnav li a {
        color: #f3ecd8;
        text-decoration: none;
        margin-right: 10px;
      }
      
      #subnav li a:hover, #subnav li.selected a {color: #3d0b06;}

	.but_version {
    color: #f3ecd8;
  	float: right;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin: 10px 0 0 10px;
    text-decoration: none;
}
  
  .but_blog {
    color: #f3ecd8;
  	float: right;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin: 0;
    text-decoration: none;
}
  
  	a:hover.but_version, a:hover.but_blog {color: #3d0b06;}

.langs {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0 10px 10px;
}

.langs a {
  display: inline-block; 
  color: #f3ecd8;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
}

.langs a img {
  display: inline-block; 
  margin-right: 5px;
}

.social-link {
  display: inline-block; 
  color: #f3ecd8;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
}
.social-link.ig { margin-right: 15px; }

.social-link img {
	display: inline-block;
	margin-right: 5px;
}

 
/* ----------------------------------------------------------------------- */
/*                             	SPECIFIC STYLES                            */
/* ----------------------------------------------------------------------- */

#bloc-content * {color: #f2edd7;}

/*------------- footer --------------- */

#footer p, #footer a {
  color: #bcaa99;
	font-size: 11px;
  text-align: center;
 }
 
	 .copyright, .copyright  a {
  	border-top: #ce776d 1px dashed;
  	font-size: 10px!important;
		text-align: right !important;
  }
  
  #home .copyright, #home .copyright  a {border-top: #5a2f2b 1px dashed; }

/*------------- Accueil --------------- */

#news {
   /*background: url(../images/bkgd_actu.jpg) no-repeat bottom left;*/
   background: rgba(0, 0, 0, 0) url("../images/bkgd_actu.jpg") no-repeat scroll left top / cover;
   min-height: 200px;
   height:auto !important;
   height: 200px;
   padding: 15px 30px;
   width: 920px;
}

	#news * {color: #f2edd7;}
  
  #news h3 {
    font-size: 14px;
    font-style: normal;
    margin: 0 0 10px;
    text-transform: uppercase;
  }

	.title-actus {
  	background: url(../images/fr/title_actu.png) no-repeat 0 0;
    height: 20px;
    margin: 0 0 20px;
    width: 910px;
  	}

	body.en .title-actus {
  	background: url(../images/en/title_actu.png) no-repeat 0 0;
  }
    
.bloc-news {
  border-right: #ce776d 1px dashed;
	float: left;
  margin: 0 20px 0 0;
  padding: 0 20px 0 0;
  width: 280px;
} 

.img-bloc-news img { 
	background-color: #f2edd7;
  border: #f2edd7 5px solid;
} 

.bloc-news a,.bloc-3 a {
	display: block;
  font-size: 13px;
	font-style: italic;
  font-weight: bold;
  padding: 5px 0;
  text-decoration: none;
} 

.bloc-news a:hover,.bloc-3 a:hover {text-decoration: underline;}    


.imgright {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

#bloc-newsletter {
	float: left;
  width: 270px;
}   

.bloc-3 {
  border-bottom: #ce776d 1px dashed;
  margin: 0 0 10px;
}

#newsletterForm label { display: none; }

#bloc-newsletter form {margin-top: 10px;}

    #newsletter-txt {
   		background-color: #3d0b06;
    	border: 0;
      color: #f2edd7;
      float: left;
      font-style: italic;
      height: 20px;
      padding: 0 5px;
      width: 200px;
    }
    
   #newsletter-butt {
    background-color: #3d0b06;
    border: 0;
   	cursor: pointer;
    color: #f2edd7;
    float: left;
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    height: 20px;
   } 
    
/*------------- Galerie photo --------------- */

#slideshow { 
	height:460px;
  position: relative;
}

#slideshow div.bloc {
    position:absolute;
    top:0;
    left:0;
    z-index:-30;
    display: none;
}

#slideshow div.active {
    z-index:-10;
    display: block;
}

#slideshow div.last-active {
    z-index:-20;
}

#slideshow div div.legende { 
	background-color: #3d0b06;
	padding: 10px 15px 10px 25px;
}
  
#slideshow div div.legende * {color: #f2edd7;}
  
#slidectrl {
  background-color: #3d0b06;
  color: #969082;
  font-size: 18px;
  height: auto;
  position:absolute;
  padding: 3px 10px;
  right: 0;
  top: 435px;
  width: 130px;
}

#slidebut {
	font-weight: bold;
  float: right;
}

#slidectrl a {
  color: #969082;
  text-decoration: none;
}

/*------------- page produits --------------- */

body#gamot, body#malbec, body#magot {background: #ac0304 url(../images/bkgd_CG.jpg) no-repeat center top;}
body#CVC {background: #ac0304 url(../images/bkgd_CGVV.jpg) no-repeat center top;}
body#jean {background: #ac0304 url(../images/bkgd_CSJ.jpg) no-repeat center top;}
body#gamotin {background: #ac0304 url(../images/bkgd_gamotin.jpg) no-repeat center top;}
body#saisons {background: #ac0304 url(../images/bkgd_saisons.jpg) no-repeat center top;}

.photo-produit {
	position: absolute;
  top: 0;
  left: 615px;
  z-index: 10;
}

.fiches-pdf li {
	background: url(../images/icon_PDF.jpg) no-repeat 0 0;
  height: 25px;
  padding: 10px 0 0 32px;
}

/*------------- page contact --------------- */

#myContactFormContainer fieldset {
	border: 0;
  margin: 0;
  padding: 0;
}

  #myContactFormContainer .form-row {	
    clear: both;
    padding: 5px 0;
  }
  
    #myContactFormContainer label {
      color: #555555;
      display: block;
      float: left;
      font-size: 12px;
      width: 120px;
    }
    
    #myContactFormContainer input {
      background-color:#3d0b06;
      border: 0;
      color: #f2edd7;
      display: block;
      float: left;
      font-size: 12px;
      font-style: italic;
      height: 20px;
      padding: 0 5px;
      width: 220px;
    }
    
    #myContactFormContainer textarea {
      background-color:#3d0b06;
      border: 0;
      color: #f2edd7;
      display: block;
      float: left;
      font-size: 12px;
      font-style: italic;
      padding: 0 5px;
      width: 220px;
    }
  
  .form-submit p {
    font-size: 11px; 
    font-style: italic;
  }
  
#myContactFormContainer .radio_list {
	float: left; 
  margin: 0; 
  padding: 0;
  width: 220px;
}
  
  #myContactFormContainer .radio_list li { 
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
  }  
  
    #myContactFormContainer .radio_list label {
    	margin: 0;
    	width: 30px;
    }
     #myContactFormContainer .radio_list input {
     	background-color: transparent;
    	margin: 0;
    	width: 20px;
    }
    
#myContactFormContainer #envoyer {
	background-color: #ac0304;
  border: #f2edd7 3px double;
  cursor: pointer;
  font-weight: bold;
  float: right;
  height: 30px;
  text-transform: uppercase; 
  width: 100px;
}    

.error_list {
  margin: 10px 0 5px;
  padding: 0;
}

  .error_list li {
    color: #ac0304;
    font-style: italic;
    font-weight: bold;
    padding: 0;
  }

/*------------- page actualités --------------- */

.actualite {
	border-bottom: #a08674 dashed 1px;
  margin: 0 0 10px;
  padding: 10px 0;
}
   
   .actualite h3 {
   	margin: 0 0 10px;
   }

     .actualite h3 a{
      color:#ac0304;
      cursor: pointer;
      text-decoration: none;
     }

     .actualite h3 a:hover {color:#393939;}
   
   .date {font-size: 12px;}

.pager { 
	color: #393939; 
  font-size: 12px; 
  text-align: center;
}
  
  .pager span {
    color:#ac0304; 
    font-size: 18px; 
    font-style: italic; 
    font-weight: bold; 
    margin: 0 2px;
  }
  
  .pager a {
  	font-weight: bold;
  	text-decoration: none;
  }

  .pager a:hover {color:#ac0304; }


/************ chargement ajax ************/

.prettyLoader {
	background: url(/images/prettyLoader/prettyLoader.png) top left no-repeat;
	height: 30px;
	position: absolute;
	width: 30px;
	z-index: 30000;
}

.prettyLoader img {
	display: block;
	margin: 7px 0 0 7px;
}

.pl_ie6 { background-image: url(/images/prettyLoader/prettyLoader.gif); }