/* COLORS
   Wrapper background:      
   Body Background:         #
   Link:                    #
   Text color:              #
   Link nav:                #
   ...
*/

/* SECTIONS
     =General
     =Header
     =Page
     =Menu
	 =Horaires
	 =Breadcrumb
	 =Content
	 =Contenu
	 =Visuels
     =Navigation Footer
	 =Footer
*/

/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   
-------------------------------------------------------------- */
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,
b, u, i, center,
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-size: 100%;vertical-align: baseline;background: transparent;}

body {line-height: 1;}

ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}

/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
   By default, the grid is 950px wide, with 24 columns 
   spanning 30px, and a 10px margin between columns.
   
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   Total width = (columns * 40) - 10
   
   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container { width: 950px;margin: 0 auto;padding-right: 10px;}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {float: left;margin-right: 10px;}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
.span-5   { width: 190px; }
.span-6   { width: 230px; }
.span-7   { width: 270px; }
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
.span-11  { width: 430px; }
.span-12  { width: 470px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 590px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 750px; }
.span-20  { width: 790px; }
.span-21  { width: 830px; }
.span-22  { width: 870px; }
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 40px; }  
.append-2   { padding-right: 80px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 40px; }  
.prepend-2   { padding-left: 80px; } 
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 


/* Border on right hand side of a column. */
.border {padding-right: 4px;margin-right: 5px;border-right: 1px solid #eee;}

/* Border with more whitespace, spans one column. */
.colborder {padding-right: 24px;margin-right: 25px;border-right: 1px solid #eee;}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box {padding: 1.5em;margin-bottom: 1.5em;background: #eee;}

/* Use this to create a horizontal ruler across a column. */
hr {display:none;}
div.hr {clear:both;}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clear { display: block; }

/*  =General
-------------------------------------------------------------- */
body { font-size: 75%; line-height: 1.5em;  }

body { 
  color: #000; 
  font-family: Arial, sans-serif;
  background: #bab;  
}

h1,h2,h3,h4,h5,h6 { 
  color: #000; 
  font-family: Arial, sans-serif; 
}

/* =Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }


/* =Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p.last      { margin-bottom: 0; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0em 1.5em 1.5em; padding: 0; clear:both;}
p img.top   { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
img         { margin: 0 0 1.5em; }

ul, ol      { margin:0 1.5em 1.5em 0em; }
dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin-top: 1.5em; font-style: italic; }
del         { color:#666; }

a:focus, 
a:hover     { color: #414666; text-decoration: none; }
a           { color: #414666; text-decoration: underline; cursor: pointer; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } 
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }


/* =Tables
-------------------------------------------------------------- */

table   { margin-bottom: 1.4em; }
th      { border-bottom: 2px solid #ccc; font-weight: bold; }
td      { border-bottom: 1px solid #ddd; }
th,td   { padding: 4px 10px 4px 0; }
tfoot   { font-style: italic; }
caption { background: #ffc; }

/* Use this if you use span-x classes on th/td. */
table .last { padding-right: 0; } 


/* =Some default classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #666; }

.hide       { display: none; }
.highlight  { background:#ff0; }
.added      { color:#060; }
.removed    { color:#900; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.left   { float:left; }
.right  { float:right; }

.reset-margin   { margin:0; } 
.reset-padding  { padding:0; } 
.reset          { margin:0; padding:0; } 

.align-justify  { text-align:justify; } 
.align-left     { text-align:left; } 
.align-center   { text-align:center; } 
.align-right    { text-align:right; } 

p.incr, .incr p {
	font-size: 10px;
	line-height: 1.44em;  
	margin-bottom: 1.5em;
}

/*  =Form
-------------------------------------------------------------- */
label { font-weight: normal; display: block; float: left; }
.inline label, label.inline { font-weight: normal; display: inline; float: none; }

/* Fieldsets */
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

/* Text fields */
input[type="text"], 
input.text   { margin:0.5em 0.5em 0.5em 0; padding: 2px; border:1px solid #bbb; background:#f6f6f6; }

/* Textareas */
textarea            { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; }
textarea            { border:1px solid #bbb; background:#eee; padding:5px; }

/* Select fields */
select              { border:1px solid #ccc; background:#f6f6f6; }

/* Success, error & notice boxes for messages and errors. */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a    { color: #D12F19; }
.notice a   { color: #817134; }
.success a  { color: #529214; }
.error ul { margin: 0; }

.accessibility {text-align:left;text-indent:-5000px;padding:0;margin:0;height:1px;line-height:1%;display:block;position:absolute;}


/*  =General
-------------------------------------------------------------- */
#header, #content, #footer{width:960px;}



/*  =Header
-------------------------------------------------------------- */
#header{position:relative;text-indent:-5000px;background:#6E748F;height:231px;color:white;}
#header h1{background:#393F63 url(img/titre-header-page.jpg) 500px 10px no-repeat;height:60px;margin-top:0px;border-bottom:11px solid #F8EFEA;}
#header h1 span{position:absolute;top:0;right:0;width:122px;height:171px;background:url(img/bobine-page.png) 0px 0px no-repeat;z-index:22;}
#header p.branding{background:url(img/visuel-bandeau-page.jpg) 0px 0px no-repeat;width:600px;height:160px;position:absolute;top:71px;left:345px;border-right:2px solid #F8EFEA;}
/* annuaire  */
#header p.annuaire{position:absolute;background:transparent url(img/annuaire.gif) 0 0 no-repeat;width:130px;height:193px;margin-left:20px; top:5px;z-index:20;left:0;}
#header p.annuaire a{display:block;width:100%;height:100%;}
/* home */
#home #header{height:454px;color:white;}
#home #header h1{background:#393F63 url(img/titre-header.gif) 290px 45px no-repeat;height:149px;margin-top:0px;}
#home #header h1 span{background:url(img/bobine.png) 0px 0px no-repeat;width:195px;height:217px;position:absolute;top:50px;left:765px;z-index:5;}
#home #header p.branding{background:url(img/visuel-bandeau.jpg) 0px 0px no-repeat;width:665px;height:295px;top:160px;left:269px;}



/*  =Page
-------------------------------------------------------------- */
#page{position:relative;font:normal 12px Arial, sans-serif;background:#fff;border:2px solid #fff;margin:0 auto;width:960px;}



/*  =Menu
-------------------------------------------------------------- */
#nav-principale{position:absolute;top:71px;left:0px;width:345px;height:180px;border-right:2px solid #F8EFEA;z-index:10;}
#nav-principale ul{float:left;position:relative;text-align:right;margin-top:5px;left:160px;}
#nav-principale li{background:url(img/puce-menu.jpg) 100% 0 no-repeat;width:130px;top:5px;line-height:15px;padding:0 35px 0 10px;margin:5px 0;}
#nav-principale a{font:bold 14px Arial;color:#fff;}
#nav-principale li.menu_item_commerce-de-poitiers-centre-la-mercerie-la-mode-accessoires,
#nav-principale li.menu_item_la-laine {line-height:30px;}
#nav-principale li.menu_item_patchwork-et-tissus-a-broder{background:url(img/puce-menu.jpg) 100% 10% no-repeat;}
/* home */
#home #nav-principale{top:160px;width:268px;height:294px;background:url(img/fond-menu.jpg) 0 232px no-repeat;}
#home #nav-principale ul{margin-top:80px;left:70px;}
#home #nav-principale li.patchworks{line-height:15px;background:url(img/puce-menu.jpg) 100% 10% no-repeat;}



/*  =Horaires
-------------------------------------------------------------- */
#horaires{background:url(img/horaires-page.jpg) 0px 0px no-repeat;width:160px;height:64px;position:absolute;left:785px;font:bold 12px Arial;color:#494949;top:-102px;}
#horaires ul{text-align:center;margin:15px 0 0 10px;}
#horaires li{padding-bottom:10px;}
/*home*/
#home #horaires{background:url(img/horaires.jpg) 0px 0px no-repeat;width:320px;height:91px;left:607px;font:bold 18px Arial;margin-top:0;padding-top:20px;}
#home #horaires ul{margin:0 0 0 90px;font:bold 18px Arial;height:30px;position:relative}
#home #horaires li{padding-bottom:5px;}



/*  =Breadcrumb 
-------------------------------------------------------------- */
#breadcrumb {width:75%;position:absolute;left:20px;color:#414666;}
#breadcrumb a {font-weight:bold;text-decoration:underline;}
#breadcrumb li {display:inline;padding:0 5px 0 0;}
#breadcrumb li span{padding:0 0 0 5px;}



/*  =Content
-------------------------------------------------------------- */
#content{border-top:11px solid #D7A7DD;margin-top:0px;position:relative;z-index:40;}



/*  =Contenu
-------------------------------------------------------------- */
#contenu{float:left;width:915px;padding-right:10px;padding-top:50px;padding-left:35px;margin-top:0;color:#414666;background:#F8EFEA;}
#contenu h3{color:#6B7292;padding-top:5px;padding-bottom:2px;margin:0;border-bottom:5px solid #D7A7DD;margin-bottom:20px;}
#contenu h4{color:#414666;font:bold 14px Arial;padding:0;margin:0;}
#contenu p{display:block;padding:0;margin:0;padding-bottom:10px;color:#414666}
#contenu p.accroche{font:bold 14px Arial;}
#contenu ul{margin-left:20px;}
#contenu li{background:url(img/puce.jpg) 0px 7px no-repeat;padding-left:10px;}
#contenu span{font:bold 14px Arial;}
/* home */
#home #contenu{padding:20px;color:#414666;padding:0;width:960px;}
#home #contenu h3{font:bold 14px Arial;color:#414666;padding-top:5px;margin:0;border: 0;}


/*  =Textes
-------------------------------------------------------------- */
.richtext {width:100%;clear:both;}
#home .richtext {margin-top:30px;float:right;width:533px;}

#contenu p.picture-right {border:3px solid #E2D6D8;float:right;background:#E2D6D8;padding:0;}
p.picture-right img {margin:0;}

/*  =Visuels
-------------------------------------------------------------- */
#contenu .visuels {position:relative;display:block;width:100%;}
#contenu .visuels ul {position:relative;height:1%;padding:10px 10px 10px 0;background:#E2D6D8;border:1px solid #fff;margin:0 25px 15px 20px;overflow:hidden;list-style-type:none;}
#contenu .visuels li {margin:10px 20px;float:left;text-align:center;width:170px;background:0;padding:0;}
.visuels li a {background:#F8EFEA url(/images/miniature.png) repeat scroll 0%;color:#414666;display:block;font-family:Georgia,Bookman,Palatino,"Times New Roman",serif;font-size:0.9em;font-size-adjust:none;font-stretch:normal;font-style:italic;font-variant:normal;font-weight:normal;height:200px;line-height:normal;overflow:hidden;width:100%;}
.visuels li a:hover, .visuels li a:active, .visuels li a:focus {color:#001166;}
.visuels li img {border:3px solid #fff;display:block;}
.visuels li.paysage img {margin:32px 10px 0px 8px;}
.visuels li.portrait img {margin:15px 10px 0px 25px;}
.visuels li a:hover img, .visuels ol li a:active img, .visuels ol li a:focus img {border-color:#9A829C;}
/*home*/
#home .visuels{background:none;float:left;width:410px;text-align:left;border:0;margin-top:0;padding-left:0;}
#home #contenu .visuels ul {padding:5px;margin:10px 10px 15px 10px;overflow:hidden;list-style-type:none;}
#home #contenu .visuels li {margin:10px 5px;float:left;text-align:center;width:170px;background:0;padding:0;}










/* Contact
-------------------------------------------------------------- */
#adresse-contact{width:380px;float:left;}



/* Googlemaps
-------------------------------------------------------------- */
#map_canvas{float:right;width: 380px;margin-right:15px;border:2px solid #9A829C; height: 300px;overflow:hidden;margin-bottom:15px;}



/*  =Navigation Footer
-------------------------------------------------------------- */
#nav-footer{margin-top:20px;margin-left:20px;}



/*  =Footer
-------------------------------------------------------------- */
#footer{position:relative;background:url(img/fond-footer.jpg) 0 0 no-repeat;height:200px}
#footer ul.vcard{margin-top:20px;float:right;}
#footer li{font:bold 12px Verdana;color:white;display:inline;width:400px;}
#footer li.url{display:block;text-align:right;}
#footer a{color:#fff;}