/* 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;}


/* 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;}

/*  =General
-------------------------------------------------------------- */
body {background: #D8D8CC;color: #000;font-size: 75%; line-height: 1.5em;font-family: Arial, sans-serif;}

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.picture-left img  { float: left; margin: 1.5em 1.5em 1.5em 0;}
p.picture-right img { float: right; margin: 1.5em 0em 1.5em 1.5em;}

img         { margin: 0 0 1.5em;border:3px solid #CCCCCC;padding:0;}

ul, ol      { margin:0 0 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; }

/* Fieldsets */
fieldset    { padding:1.4em 1.4em 1.4em 0; margin: 0 0 1.5em 0; border: none; }
legend      { font-weight: bold; font-size:1.2em; }

/* Text fields */
input   { display:block;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    { width:95%;padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { width:95%;background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice     { width:95%;background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }
#contenu .error { background: #FBE3E4;border-color: #FBC2C4; }
#contenu .error p, #contenu .error li     { color: #92281B;background:none;}

.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }
#contenu .notice     { color: #817134;}

.success    { background: #E6EFC2; border-color: #C6D880; }
#contenu .success p     { color: #529214;}
.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;}

/*  =Page
-------------------------------------------------------------- */
#page{position:relative;font:normal 12px Arial, sans-serif;background:#fff url(img/fond_pages.jpg) 0 0 repeat-y;border:2px solid #434E46;border-top:0;border-bottom:0;margin:0 auto;width:960px;}
/*home*/
#home #page{background:none;}


/*  =Header
-------------------------------------------------------------- */
#header{position:relative;background:#635E74 url(img/fond-header-pages.gif) 0 0 repeat-x;height:232px;}
#header h1{text-indent:-5000px;background:transparent url(img/titre-header-pages.jpg) 0 0 no-repeat;height:87px;margin:0;}
#header h1 a{position:absolute;height:77px;width:239px;left:440px;top:30px;}
#header p.branding{text-indent:-5000px;background:transparent url(img/visuel-bandeau-page.jpg) 0 0 no-repeat;height:146px;width:960px;margin:0;}
/* home */
#home #header{height:451px;background:#635E74 url(img/fond-header.gif) 0 0 repeat-x;}
#home #header h1{background:url(img/titre-header.jpg) 0 0 no-repeat;height:148px;}
#home #header p.branding{display:block;background:#fff url(img/visuel-bandeau.jpg) 0 0 no-repeat;width:729px;height:303px;top:148px;left:231px;position:absolute;}



/*  =Adherent
-------------------------------------------------------------- */
#adherent {position:absolute;right:0px;top:30px;height:45px;width:130px;}
#adherent li{height:45px;float:left;width:54px;}
#adherent li.cheque-cadeau{width:56px;background:url(../common/cheque-cadeau.gif) 0 50% no-repeat;margin-right:10px;}
#adherent li.charte-qualite{width:40px;background:url(../common/charte-qualite.gif) 0 0 no-repeat;margin-right:15px;}
#adherent li.carte-en-ville{width:54px;background:url(../common/ma-carte-en-ville.gif) 0 50% no-repeat;}
#adherent li a{text-indent:-5000px;display:block;height:100%;width:100%;}
/*home*/
#home #header #adherent {top:90px;}

/*  =Annuaire
-------------------------------------------------------------- */
#annuaire {position:absolute;top:5px;left:10px;z-index:99;background:#fff url(img/annuaire.gif) 0 0 no-repeat;width:130px;height:193px;}
#annuaire a{display:block;width:100%;height:100%;text-indent:-5000px;}


/*  =Menu
-------------------------------------------------------------- */
#nav-principale{float:left;position:relative;padding-bottom:119px;top:0;left:0px;width:239px;z-index:90;background:transparent url(img/fond_menu_pages.jpg) 0 0 no-repeat;}
#nav-principale ul{float:left;position:relative;width:235px;left:0px;padding:65px 0 75px 25px;}
#nav-principale li{text-align:left;float:left;position:relative;width:100%;clear:both;background:url(img/puce-menu.gif) 0 0.7em no-repeat;line-height:36px;margin-bottom:0;padding-left:30px;}
#nav-principale a{font:bold 14px Arial;color:#fff;text-decoration:none;position:relative;margin-left:10px;}
#nav-principale a:hover{text-decoration:underline;}
/* home */
#home #nav-principale{background:#fff url(img/fond_menu.jpg) 0 0 repeat-x;position:relative;margin-top:-303px;width:234px;height:298px;padding:0;}
#home #nav-principale ul{background:none;width:100%;margin-top:0;padding-bottom:0;}


/*  =Content
-------------------------------------------------------------- */
#content {float:left;position:relative;width:720px;background:#756F86 url(img/degrade_haut.png) 0 0 no-repeat;}
/*home*/
#home #content{width:100%;background:#756F86;}

/*  =Horaires
-------------------------------------------------------------- */
#horaires{position:relative;right:20px;float:right;background:#88829C url(img/motif.jpg) 0 0 repeat-x;width:160px;height:5em;border:2px solid #757A80;color:#fff;text-align:center;padding:2px 0;margin-top:-7em;}
#horaires p{font-weight:bold;margin:0;}
/*home*/
#home #horaires{margin-top:-6.5em;margin-right:0;right:15px;}


/*  =Breadcrumb 
-------------------------------------------------------------- */
#breadcrumb {position:relative;margin-top:2em;top:0;left:0;width:700px;color:#fff;border-bottom:4px solid #474A4D;}
#breadcrumb ul{margin-bottom:0;}
#breadcrumb a {position:relative;font-weight:bold;text-decoration:none;color:#fff;}
#breadcrumb li {position:relative;display:inline;padding:0 1px 0 0;font-weight:bold;}
#breadcrumb li span{padding:0 0 0 5px;}
#main #breadcrumb div.hr {background:none;height:1px;}

/*  =Main
-------------------------------------------------------------- */
#main{padding:0;margin-left:10px;}
/*#page div.sep{display:block;float:none;clear:both;background:transparent url(img/degrade-bas.png) 240px 100% no-repeat;height:25px;margin-top:-25px;width:960px;}*/
/*home*/
#home #main {float:left;width:100%;margin:0;}
/*#home #page div.sep{background-color:#2D3339 ;background-position:0 100%;}*/


/*  =Contenu
-------------------------------------------------------------- */
#contenu{float:left;padding:10px 0 35px 0;margin:0;color:#fff;float:none;}
#contenu h3{color:#fff;padding-top:5px;padding-bottom:2px;margin:0 0 5px 0;border-bottom:2px solid #fff;}
#contenu h4{color:#fff;font:bold 14px Arial;padding:0;margin:0 0 10px 0;}
#contenu p{display:block;padding:0;margin:0;padding-bottom:10px;color:#fff;line-height:1.2em;font-size:14px;}
#contenu p.accroche{font:bold 14px Arial;}
#contenu ul{margin-left:20px;}
#contenu li{background:url(img/puce.gif) 0px 5px no-repeat;padding-left:10px;margin-bottom:3px;font-size:14px;color:#fff;}
#contenu span{font:bold 14px Arial;}


/* home */
#home #contenu{width:960px;padding-top:35px;background:url(img/degrade_haut.png) 0 0 no-repeat;}


/*  =Textes
-------------------------------------------------------------- */
.richtext {width:92%;clear:both;}
#contenu p.picture-right {padding:0;}
/*home*/
#home .richtext {float:right;width:553px;}
#home #contenu p.picture-right img {margin:0 0.5em 0.5em 0.5em;}

/*  =Visuels
-------------------------------------------------------------- */
#contenu .visuels {position:relative;display:block;width:100%;}
#contenu .visuels ul {position:relative;height:1%;padding:0;background:none;border:none;margin:0 0 20px 0;overflow:hidden;list-style-type:none;}
#contenu .visuels li {margin:0px 2px 4px 2px;float:left;text-align:center;width:170px;background:0;padding:0;}
.visuels li a {display:block;background:#625C73;border:1px solid #A8A4B2;color:#fff;font-stretch:normal;font-style:italic;font-variant:normal;height:200px;line-height:normal;overflow:hidden;width:100%;}
.visuels li a:hover, .visuels li a:active, .visuels li a:focus {color:#E3C6B9;}
.visuels li img {border:2px solid #A8A4B2;display:block;}
.visuels li.paysage img {margin:10px 10px 5px 8px;}
.visuels li.portrait img {margin:10px auto 0px auto;}
.visuels li a:hover img, .visuels ol li a:active img, .visuels ol li a:focus img {border-color:#E3C6B9;}
/*home*/
#home .visuels{background:none;float:left;width:190px;text-align:left;border:0;margin-top:0;padding-left:0;margin-left:10px;width:365px;}


/* Contact
-------------------------------------------------------------- */
#adresse-contact{width:300px;float:left;margin:0 0 20px 0;}
#sf_fieldset_contact{width:700px;float:left;margin:0 0 20px 0;}
#sf_admin_edit_form p.submit button{background:#625C73;color:#fff;border:1px solid #8B9096;cursor:pointer;}

/* Googlemaps
-------------------------------------------------------------- */
#map_canvas{width: 380px;margin:1.4em auto 30px auto;border:2px solid #DEE6F3; height: 300px;overflow:hidden;}
#map_canvas p{color:#625C73;}


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


/*  =Footer
-------------------------------------------------------------- */
#footer{position:relative;background:#88829C url(img/fond-footer.jpg) 0 0 repeat-x;height:200px;clear:both;margin:0 auto;border-top:1px solid #625C73;}
#footer ul.vcard{margin-top:20px;float:right;margin-right:20px;}
#footer li{font:bold 12px Verdana;color:#fff;display:inline;}
#footer li.url{display:block;text-align:right;}
#footer li.num{display:block;}
#footer a{color:#fff;}