/* Start of CMSMS style sheet 'figurato : Top menu + 2 columns' */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}
.floatLeft {float: left;}
.floatRight {float: right;}
/*
default link styles
*/
/* set all links to have underline and bluish color */
a {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   color: #F14E03; 
}


/* remove underline on hover and change color */
a:hover {
   color: #333;
}

/*****************
basic layout 
*****************/
body {
   background: #BDAD9B url(images/bg-body.jpg) repeat-x;
   color: #000;
}

/* center wrapper, min max width */
div#pagewrapper {
   margin: 0 auto;     /* this centers wrapper */
   width: 930px;
}



/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
   height: 116px; /* adjust according your image size */        
	position: relative;
}
div#header h1 {width: 239px; height: 89px;padding-left: 40px;float: left;}
div#header h1 a {
/* you can set your own image here */
   background: url(images/figurato-logo.png) no-repeat; 
   display: block; 
   width: 239px;
   height: 89px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

	div#liens-top {float: right;text-align: right;padding-top: 10px; color: #787067;line-height: 22px;}
	div#liens-top a {color: #787067; text-decoration: none;}
	div#liens-top a:hover{text-decoration: underline;}

		div#search {
		   float: right;
		   width: 200px;     /* enough width for the search input box */
		   text-align: right;
		}
			div#search label {display: none;}
			div#search input.searchinput {background: url(images/bg-input-search.png) no-repeat; width: 134px; height: 18px; padding: 2px; color: #999; border: 0 none;}
			div#search input.searchsubmit {background: url(images/search-btn.png) no-repeat; width:46px; height:22px; border: 0 none; cursor: pointer }
	
div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   float: right;
   color: #BDAD9B
}
	div.breadcrumbs a {color: #BDAD9B; text-decoration: none;}
 div.breadcrumbs span.lastitem { 
   
 }


div#content {
   margin: 0 auto 30px 0; /* some air above and under menu and content */
   padding: 0 0 50px 0;
   position: relative
}

div#main {
   margin-left: 230px; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   background-color: #fff;
   /*overflow: hidden;
   height: 1%;*/
}
div#visuel {width: 700px; height: 219px; position: relative; margin: 0; padding: 0;}
* html #visuel {float: right;margin: 0 0 0 -6px;}
div#visuel p {display: block; position: absolute; bottom: 14px; right: 15px; background: url(images/transparent.png) repeat; color: #fff; padding: 11px 14px 11px 50px; text-align: right;margin:0;}

div#contenu {padding: 0 15px 0 37px; overflow: hidden;height: 1%}
* html #contenu {float: left}

div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 230px;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   background: #BDAE9B url(images/bg-sidebar.jpg) no-repeat 0 284px; min-height: 719px; height: auto!important; height: 719px;
}
div#texte-page {padding: 26px 0 85px 56px; width: 174px; height: 173px;}

div#etiquette-pose-stickers a{display: block;width: 230px; height: 93px; background: url(images/etiquette-pose-stickers.jpg) no-repeat right;text-indent: -9000em; margin-top: 35px;}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {

}

div#footer {
   clear:both;       /* keep footer below content and menu */
   color: #787067;
   margin-left: 230px;
}
div#footer a {color: #787067; text-decoration: none;}
div#footer a:hover {text-decoration: underline;}

div#footer #menu-footer {border-top: 1px solid #A6998A; border-bottom: 1px solid #A6998A;padding: 12px 5px 12px 10px;overflow: hidden;height: 1%; margin-bottom: 10px;}
div#footer #menu-footer #logo-clairefontaine, div#footer #logo-rainbow {float: right;}

div#footer #menu-footer #titre {width: 130px; float: left;text-transform: uppercase;font-weight: 600;text-align: right;}
div#footer #menu-footer #titre  p{margin: 2px 0; background: url(images/puce-footer.png) no-repeat center right; padding: 0 14px 0 0;}

div#footer #menu-footer #liens, div#footer #autre-liens {font-family: Arial, Verdana, Helvetica, sans-serif; margin-left: 140px;font-size: 0.83em;}
div#footer #menu-footer #liens ul {padding: 1px 0;list-style-type: none;overflow: hidden;line-height: 17px;height: 1%;}
div#footer #menu-footer #liens ul li {list-style-type: none; float: left;}
div#footer #menu-footer #liens ul li.sep {margin: 0 3px;}
div#footer #menu-footer #liens ul li a{float: left;}

div#footer #logo-figurato {float: left;margin-left: 10px;}


/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1em;
   clear:left;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {
	background: #FFFFFF url(images/bg-content.png) repeat-y;
	overflow: hidden;
	height: 1%;
}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #000; 
   font-size: 1.5em; 
   text-align: left; 
   padding: 0 0 8px 36px;

   line-height: 1em;
   margin: 0 0 0.5em 0;
   width: 300px;
}

div#content h3 {
   color: #F14E03; 
   font-size: 1.45em;
   margin: 1.5em 0 0.5em 0;
   font-weight: 500;
   line-height: 1em;
}
div#content h4 {
   color: #F14E03; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
   margin: 0 0 0 3em;
}
 dl{width: 67%;}
dl dt {
   font-weight: bold;
   margin: 0 0 8px 5px;
   border-bottom: 1px solid #333
}
dl dd {
   margin: 0 0 15px 15px;
}

/* END LISTS */
/********** LISTE PRODUITS ****************/
.liste-produit {width: 33%;float: left;min-height: 200px; height: auto!important; height: 200px;}
.liste-produit .nom-produit a{font-size: 1.17em;color: #333;text-decoration: none;}
.liste-produit .nom-produit p {width: 158px;padding-top: 10px;margin: 0;}
.liste-produit .nom-produit p .voir-fiche{float: right;background: url(images/voir-fiche.png) no-repeat; display: block; width: 60px; height: 18px;text-indent: -9000em;}

.thumb {position: relative;}
.thumb span {position: absolute; background: url(images/border.png) no-repeat;display: block; width: 158px; height: 139px;}


/********** FICHE PRODUITS ****************/
#fiche-produit {margin: 0 0 22px 0;position:relative;}
/*#fiche-produit h3, #fiche-produit p {margin-left: 385px!important;}*/
#fiche-produit .ambiance {margin-right: 30px;}
#fiche-produit #planche1 {margin: 0 7px 0 0;}
#fiche-produit .planche {float: left; border: 1px solid #ccc;}
#fiche-produit #rouleau {border: 1px solid #ccc; margin-top: 10px;}
#fiche-produit h3 {font-size: 1.5em;margin: 0 0 3px 0;}
#fiche-produit .ref {color: #999; font-size: 0.83em; margin: 0 0 3px 0;}
#fiche-produit .format, #fiche-produit .createur {color: #000; margin: 0;}
#fiche-produit .pays {color: #999; margin: 3px 0 11px 0;}

div#texte {margin: 15px 0 18px; width: 365px; float: left;}
div#texteRouleau {margin: 190px 0 0; position: absolute;left:0;width: 365px;}
div#texte p {margin: 0!important;}

p#retour-liste {text-align: right;}
p#retour-liste a {background: url(images/retour-liste.png) no-repeat left; padding-left: 23px; color: #BDAD9B; text-decoration: none;}
p#retour-liste a:hover {text-decoration: underline;}

/********** THEME ENFANTS ****************/
#enfants #header {background: url(images/enfants/bg-header.jpg) no-repeat bottom left;}
#enfants #texte-page {background: url(images/enfants/bg-texte-page.jpg) no-repeat; }
#enfants #contenu {background: url(images/enfants/coin-main.jpg) no-repeat left top}
#enfants #visuel {background: url(images/enfants/visuel.jpg) no-repeat;}
#enfants #content h2{background: url(images/enfants/bg-h2.png) no-repeat left 12px;}
#enfants #fiche-produit h3, #enfants h2 {color: #5EC5ED!important;}

/********** THEME ANIMAUX ****************/
#animaux #header {background: url(images/animaux/bg-header.jpg) no-repeat bottom left;}
#animaux #texte-page {background: url(images/animaux/bg-texte-page.jpg) no-repeat; }
#animaux #contenu {background: url(images/animaux/coin-main.jpg) no-repeat left top}
#animaux #visuel {background: url(images/animaux/visuel.jpg) no-repeat;}
#animaux #content h2{background: url(images/animaux/bg-h2.png) no-repeat left 12px;}
#animaux #fiche-produit h3, #animaux h2 {color: #EC7527!important;}

/********** THEME CUISINE ****************/
#cuisine #header {background: url(images/cuisine/bg-header.jpg) no-repeat bottom left;}
#cuisine #texte-page {background: url(images/cuisine/bg-texte-page.jpg) no-repeat; }
#cuisine #contenu {background: url(images/cuisine/coin-main.jpg) no-repeat left top}
#cuisine #visuel {background: url(images/cuisine/visuel.jpg) no-repeat;}
#cuisine #content h2{background: url(images/cuisine/bg-h2.png) no-repeat left 12px;}
#cuisine #fiche-produit h3, #cuisine h2 {color: #D4021D!important;}

/********** THEME NATURE ****************/
#nature #header {background: url(images/nature/bg-header.jpg) no-repeat bottom left;}
#nature #texte-page {background: url(images/nature/bg-texte-page.jpg) no-repeat; }
#nature #contenu {background: url(images/nature/coin-main.jpg) no-repeat left top}
#nature #visuel {background: url(images/nature/visuel.jpg) no-repeat;}
#nature #content h2{background: url(images/nature/bg-h2.png) no-repeat left 12px;}
#nature #fiche-produit h3, #nature h2 {color: #84A70C!important;}

/********** THEME RETRO ****************/
#retro #header {background: url(images/retro/bg-header.jpg) no-repeat bottom left;}
#retro #texte-page {background: url(images/retro/bg-texte-page.jpg) no-repeat; color: #fff}
#retro #contenu {background: url(images/retro/coin-main.jpg) no-repeat left top}
#retro #visuel {background: url(images/retro/visuel.jpg) no-repeat;}
#retro #content h2{background: url(images/retro/bg-h2.png) no-repeat left 12px;}
#retro #fiche-produit h3, #retro h2 {color: #873E16!important;}

/********** THEME MESSAGES ****************/
#messages #header {background: url(images/messages/bg-header.jpg) no-repeat bottom left;}
#messages #texte-page {background: url(images/messages/bg-texte-page.jpg) no-repeat; }
#messages #contenu {background: url(images/messages/coin-main.jpg) no-repeat left top}
#messages #visuel {background: url(images/messages/visuel.jpg) no-repeat;}
#messages #content h2{background: url(images/messages/bg-h2.png) no-repeat left 12px;}
#messages #fiche-produit h3, #messages h2 {color: #CB96DB!important;}

/********** THEME ETHNIQUE ****************/
#ethnique #header {background: url(images/ethnique/bg-header.jpg) no-repeat bottom left;}
#ethnique #texte-page {background: url(images/ethnique/bg-texte-page.jpg) no-repeat; }
#ethnique #contenu {background: url(images/ethnique/coin-main.jpg) no-repeat left top}
#ethnique #visuel {background: url(images/ethnique/visuel.jpg) no-repeat;}
#ethnique #content h2{background: url(images/ethnique/bg-h2.png) no-repeat left 12px;}
#ethnique #fiche-produit h3, #ethnique h2 {color: #F0A500!important;}

/********** THEME GRAPHIK ****************/
#graphik #header {background: url(images/graphik/bg-header.jpg) no-repeat bottom left;}
#graphik #texte-page {background: url(images/graphik/bg-texte-page.jpg) no-repeat; color: #fff}
#graphik #contenu {background: url(images/graphik/coin-main.jpg) no-repeat left top}
#graphik #visuel {background: url(images/graphik/visuel.jpg) no-repeat;}
#graphik #content h2{background: url(images/graphik/bg-h2.png) no-repeat left 12px;}
#graphik #fiche-produit h3, #graphik h2 {color: #D7418E!important;}

/********** THEME LOISIRS ****************/
#loisirs #header {background: url(images/loisirs/bg-header.jpg) no-repeat bottom left;}
#loisirs #texte-page {background: url(images/loisirs/bg-texte-page.jpg) no-repeat; color: #fff}
#loisirs #contenu {background: url(images/loisirs/coin-main.jpg) no-repeat left top}
#loisirs #visuel {background: url(images/loisirs/visuel.jpg) no-repeat;}
#loisirs #content h2{background: url(images/loisirs/bg-h2.png) no-repeat left 12px;}
#loisirs #fiche-produit h3, #loisirs h2 {color: #2E5375!important;}

/********** THEME NOEL ****************/
#noel #header {background: url(images/noel/bg-header.jpg) no-repeat bottom left;}
#noel #texte-page {background: url(images/noel/bg-texte-page.jpg) no-repeat; }
#noel #contenu {background: url(images/noel/coin-main.jpg) no-repeat left top}
#noel #visuel {background: url(images/noel/visuel.jpg) no-repeat;}
#noel #content h2{background: url(images/noel/bg-h2.png) no-repeat left 12px;}
#noel #fiche-produit h3, #noel h2 {color: #BE873B!important;}

/********** THEME AUTRE ET ACCUEIL****************/
#autre #header, #accueil #header {background: url(images/autre/bg-header.jpg) no-repeat bottom left;}
#autre #texte-page, #accueil #texte-page {background: url(images/autre/bg-texte-page.jpg) no-repeat; color: #fff}
#accueil #texte-page {text-align: right;}
#autre #texte-page p, #accueil #texte-page p {margin: 0 0 0.5em}
#autre #texte-page h3, #accueil #texte-page h3 {margin: 0 0 0.5em; color: #fff; line-height: 1.4em;}
#autre #contenu {background: url(images/autre/coin-main.jpg) no-repeat left top}
#autre #visuel {background: url(images/autre/visuel.jpg) no-repeat;}
#accueil #visuel {background: url(images/visuel-accueil.jpg) no-repeat; height: 346px}
#autre #content h2, #accueil #content h2{background: url(images/autre/bg-h2.png) no-repeat left 12px;}
#autre #fiche-produit h3, #autre h2, #accueil #fiche-produit h3, #accueil h2 {color: #F14E03!important;}
#accueil #content h2 {padding: 0; background: none;margin: 0}


/********** THEME ACCUEIL****************/
#accueil #colonne1 {width: 371px;overflow: hidden; float: left;}
#accueil .liste-produit {width: 48%;}
#accueil #colonne2 {width: 277px;overflow: hidden; float: left;}
#accueil h3.titre {margin: 0 0 10px;}

#bloc-createur {background: url(images/bloc-createur.jpg) no-repeat; width:277px; height: 140px;}
#bloc-createur h3, #bloc-video h3 {text-indent: -9000em;}
#bloc-createur a{display: block; width: 153px; height: 51px;padding: 20px 96px 40px 18px; color: #fff; text-decoration: none;}
*html #bloc-createur a {padding: 0 96px 40px 18px;}
*+html #bloc-createur a {padding: 0 96px 40px 18px;}

#bloc-video {width: 277px; height: 121px; background: url(images/bloc-video.jpg) no-repeat;margin-bottom: 18px;}
#bloc-video a{display: block; color:#fff; text-decoration: none; padding: 20px 21px 0 94px;width: 162px; height: 73px}
*html #bloc-video a {padding: 0 21px 0 94px}
*+html #bloc-video a {padding: 0 21px 0 94px}

/********** PAGE FAQ************/
#notices {background: url(images/bg-notices.png) no-repeat; width: 169px; height:139px;float: right; list-style-type: none;padding: 30px 10px 0;text-align: right;}
#main #notices li {list-style-type: none;margin: 10px 0!important;line-height: 1.1em;}
#notices a {color: #524536; text-decoration: none;}
#notices a:hover {text-decoration: underline;}
#notices a.pdf {padding-right: 20px; background: url(images/pdf.png) no-repeat right 2px;display: block }
*html #main #notices li {margin: 0}
#notices a.pdf span {color: #9F968B}
#notices a.pdf:hover span {color: #524536;}

#encart-video {width: 200px; height: 80px; margin: 50px 0 53px;background: url(images/video-img.png) no-repeat;padding: 5px 0 0 69px;color: #333 }
#encart-video p {margin: 0 0 5px;}
#encart-video a {background: url(images/video-btn.png) no-repeat top; width: 91px; height: 25px; display: block;color: #fff; text-decoration: none;line-height: 25px; padding-left: 25px;}
#encart-video a:hover {background-position:0 -25px;}

/* End of 'figurato : Top menu + 2 columns' */