* {
 margin: 0;
 padding: 0;
}

html { font-size: 100% }

body {
 padding: 0;
 margin: 0;
 background: #330001 url(images/fond.jpg) left 150px repeat;
 background-color: #57001A;
 text-align: center; 
 font-family: "trebuchet ms", Verdana, Arial, Helvetica, sans-serif; 
 font-size: 0.70em;
 color: #520008;
}

a         { text-decoration: none; color: #520008; } 	
a:visited { text-decoration: none; } 	
a:hover	  { color: #b94a55; }
a:active  { border-bottom: 0; color : #ffee99; }


#global {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -295px; /* moitié de la hauteur */
 margin-left: -440px; /* moitié de la largeur */
 width: 880px;
 height: 590px;
 background-color: #FFE700;
 text-align: left;
}

#fond-accueil {
 position: absolute;
 left: 0;
 top: 0;
 width: 880px;
 height: 590px;
 background: transparent url(images/fond-accueil.jpg);
}

#fond-section {
 position: absolute;
 left: 0;
 top: 0;
 height: 590px;
 width: 880px;
 background: transparent url(images/fond-section.jpg);
}

div#credits {
 position: absolute;
 color: #916667;
 border: 0;
 width: 884px;
 bottom: -12px;
 right: 3px;
 font-family: Verdana, sans-serif;
 font-size: 9px;
 font-weight: normal;
 text-align: right;
}

div#credits a {
 color: #BE8586;
}

div#credits a:hover {
 color: #FFE800;
}


/****** Espace principal de chaque section (avec ascenseur graphique) ********/

div#main {
 position: absolute;
 width: 580px;
 height: 460px;
 top: 60px;
 left: 60px;
 font-weight: normal;
 clip: rect(0px, 620px, 460px, 0px);
 overflow: hidden;
}

div#main div#contenu {
	position: absolute;
	left: 0;
	top: 0;
	width: 562px;
} 

div#main img {
 border: 1px solid #520008;
}

div#main p {
 text-align: left;
 font-size: 1.1em;
 margin: 0px 0px 10px;
}

div#main h1 {
 font-size: 2em;
 margin: 0 0px 15px;
}

div#main h1 span {
 font-size: 10px;
 font-weight: normal;
}

div#main h2 {
 font-size: 1.3em;
 margin:  15px 0px 10px;
}

div#main ul {
 font-size: 1em;
 margin:  10px 20px;
}

div#main ul li {
 list-style-image: none;
 list-style-type: disc;
 line-height: 1.4em;
}



/****** Les boutons des sections du menu ********/

dt#id1,dt#id2,dt#id3,dt#id4 {
 position: absolute;
 height: 97px;
 width: 205px;
 right: 36px;
 border: 0px red solid;
}

dt#id1   { top:  42px; height: 194px; }
dt#id2   { top: 236px; height: 98px; }
dt#id3   { top: 334px; height: 96px; }
dt#id4   { top: 430px; height: 102px; }



#menu-accueil dt#id1 a  { background-image: url(images/accueil-galerie.jpg) }
#menu-accueil dt#id2 a  { background-image: url(images/accueil-presentation.jpg) }
#menu-accueil dt#id3 a  { background-image: url(images/accueil-stages.jpg) }
#menu-accueil dt#id4 a  { background-image: url(images/accueil-boutique.jpg) }

#menu-section dt#id1 a  { background-image: url(images/section-galerie.jpg) }
#menu-section dt#id2 a  { background-image: url(images/section-presentation.jpg) }
#menu-section dt#id3 a  { background-image: url(images/section-stages.jpg) }
#menu-section dt#id4 a  { background-image: url(images/section-boutique.jpg) }

dt a  { background-position: top left }
dt a:hover, dt.here a  { background-position: right top }


dt a {
 display: block;
 width: 100%;
 height: 100%;
}

dt span {
	position:absolute;
	left:0px;
	top: -500px;
	width:1px;
	height:1px;
	overflow:hidden;
}

#retour {
 position: absolute;
 right: 30px;
 bottom: 0;
 width: 74px;
 height: 58px;
}

#retour a {
 display: block;
 width: 100%;
 height: 100%;
 background: transparent url(images/retour.gif) top right no-repeat;
}

#retour a:hover {
 background-image: url(images/retour-hover.gif);
}

 #retour span {
  display: none;
}


/* Galeries */

.thumbscontainer .thumbs li p { display: none ; }
.icone { margin-bottom: -10px; }
div#imageDetails span#numberDisplay { visibility: hidden; line-height: 0.5em }
div#imageDetails { clear: both; width: 80% !important}
#main img.thumbnail { border: 0 }


#main #legende h3 {
 margin-bottom: 10px;
}

#main #legende p {
 float: left;
 display: inline;
 width: 240px;
 margin: 3px 0 4px 20px;
 height: 20px;
 line-height: 20px;
 font-size: 1em;
}

#main #legende p img {
 border: 0;
}

#galerie-mandalas,#galerie-tableaux,#galerie-commandes {
 float: left;
 display: inline;
 margin: 20px 41px 0;
 width: 100px;
 height: 130px;
 background: transparent url(assets/images/galerie-mandalas.jpg) bottom left no-repeat;
 text-align:center;
 font-size: 16px;
 font-weight: bold;
}

#galerie-mandalas  { background-image: url(http://www.mandala-wbird.com/assets/images/galerie-mandalas.jpg); }
#galerie-tableaux  { background-image: url(http://www.mandala-wbird.com/assets/images/galerie-tableaux.jpg); }
#galerie-commandes { background-image: url(http://www.mandala-wbird.com/assets/images/galerie-commandes.jpg); }

#galerie-mandalas a,#galerie-tableaux a,#galerie-commandes a {
 display: block;
 width: 100%;
 height: 100%;
}

 
/*************************/
/* La Boutique           */
/*************************/

#main #boutique p {
 font-size: 1em;
 margin: 5px 10px;
}

#main #boutique img {
 border: 1px solid #520008;
}

#main #boutique h2 {
 margin-bottom: 0px;
}

table col.c1 { width: 200px }
table col.c2 { width: 60px }

table {
 border-collapse: collapse;
 border: 0;
 width: 260px !important;
 margin: 10px 10px 0 10px;
 font-size: 1em;
}

table th {
 font-weight: bold;
 text-align: left;
}

table th span {
 font-weight: normal;
 font-style: italic;
 font-size: 0.9em;
}

table td {
 border: 1px solid #FEC600;
 border-width: 1px 0;
}

table td.col1 { width: 200px; }
table td.col2 { 
 width: 60px; 
 text-align: right;
}
 
#cp10x15, #cp15x15, #mp, #posters {
 float: left;
 display: inline;
}

/*************************/
/* Manager de galeries   */
/*************************/

div.managecontainer {
 float: none;
 width: 100%
}

div.managecontainer input,div.managecontainer textarea {
 border-width: 1px;
}

 
/*************************/
/* Ascenceurs graphiques */
/*************************/

#divUp   {
	position:absolute;
	left: 0px;
	top: 42px;
  width: 40px;
  height: 41px;	
}

#divDown {
	position:absolute;
	left: 0px;
	top: 491px;	
	width: 40px;
  height: 40px;	
}

#divUp a,#divDown a {
 display: block;
 width: 100%;
 height: 100%;
}


/* Base line */

div#baseline {
 position:  absolute;
 bottom: 26px;
 left: 50px; 
 width: 740px; 
}


/******************/
/* Classes utiles */
/******************/
.centrage { text-align: center; }
.droite { float: right }
.gauche { float: left }
.spacer { clear: both; }

img.gauche { margin: 5px 5px 0 0 }
img.droite { margin: 5px 0 0 5px }

span.gros { 
 font-size: 2em;
 font-family: verdana; 
}