/* css Zen Garden submission 088 - 'Tulipe', by Eric Sheperd, http://www.arkitrave.com/log */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
/* All associated graphics copyright 2004, Eric Sheperd */
/* Added: March 29th, 2004 */


/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. */
   



/*********************
     TYPOGRAPHY
*********************/
@font-face {
	font-family: "test";
	src: url('test.otf');
}

body {
	background-color: black;
	font-family: tahoma, arial, helvetica, sans-serif;
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	font-size: 16px;
  	
	}
	html>body {
  		font-size: 16px;
		}


.columns {
			-webkit-columns: 4;
			-moz-columns: 4;
			columns: 4;
}


		
.liste {
			position: relative;
			height: 100px;
			padding: 5px;
			margin: 0px;
			font-family: New Century Schoolbook, cursive;
			-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
               break-inside: avoid-column; /* W3C */ 
}			
.catalogue {
 
 position: absolute;
			
			width: 1070px;    /*all text boxes are 257px*/
			top: 137px;
			left: 100px;
			padding: 15px;
 
}

.catalogue img{
   margin-right: 5px;
   float:left;
   
}

#total{
	margin-bottom: 100px;
	margin-top: 10px;
}

#accueil{
font-family: URW Chancery L,serif;
font-size: 125%;
position: relative;
height: 180px;
width: 1000px;

}

 
.calque {


height: 100px;
top: 5px;
left: 5px;

}

.graine {
width: 100px;
height: 100px;
}



.liste{
	background: #C8C8C8;
opacity: 1;

}
.liste:hover{
opacity: 1;
font-weight: bolder;
}



.nom {
margin-top: 10px;
margin-left: 105px;
font-size: 18px;

}



	
.summary {
	color: #665;
	font-weight: bold;
	font-size: .8em;
	}

.summary p {
	padding: 0 15px;
	}
	


/*********************
        LINKS
*********************/

.liste a {
	text-decoration: none;
	font-size: 18px;
color: #000;
}

.liste  a:link {
	text-decoration: none;
	color: #000
	font-size: 18px;
	}
	
.liste  a:visited {
	text-decoration: none;
	color: #000;
	border:10px;
	font-size: 18px;
	}
	
.liste  a:hover {
font-weight: bold;
font-size: 18px;
	}
	
.liste  a:active {
	text-decoration: none;
color: #000;
font-size: 18px;
	}


/**************************
     DO THE DIV - LAYOUT
**************************/

/*basics*/

body {
	background: #C8C8C8;
	margin: 0;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 890px;
	z-index: 0;
	}
	
.page-wrapper {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	}
	
/*intro stuff*/	
	
	.intro {
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		z-index: 1000;
		}
	
		header {
			position: relative;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			
			height: 126px;
			width: 1200px;
			}
			
			header h1 {       /*contains the zen text and flowery images*/
				margin: 0;
				margin-left: 100px;
				background: transparent url(header.jpeg) no-repeat; /*thanks to dubstastic for brushes*/
				height: 126px;

				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
				}
				
		
				
				.titre{
				font-family: test,URW Chancery L,serif;
				font-size: 27px;
				
				}
				
				p{
				font-family: New Century Schoolbook, cursive;
				
				}
				.soustitre{
				font-family: test,URW Chancery L,serif;				
				}
				
				
		.summary {           /*runs along left side, includes flower and below*/
			position: absolute;
			margin-top: 10px;
			margin-left: 100px;
			width: 352px;
			z-index: 500;
			}
							
							/*graphic backgrounds are applied to head, paragraphs, and last paragraph*/
		.preamble {               /*first of boxes, but different in document tree so separate css*/
			position: absolute;
			background: #f2f4ee;
			z-index: 1000;
			width: 320px;    /*all text boxes are 257px*/
			top: 137px;
			left: 470px;
			height : 350px;
			padding: 15px;
			border: solid #998;    /*only for IE, overridden later*/
			border-width: 0px 1px 1px 1px; /*no top border*/
			
			}
			
	
	
			
	
		
/*next four text boxes are under .supporting div*/	
							
		.explanation, .participation, .benefits, .requirements {
			position: absolute;
			background: #f2f4ee;
			z-index: 1000;
			width: 338px;    /*all text boxes are 257px*/
			top: 0px;
			left: 520px;
			padding: 15px;
			border: solid #998;    /*only for IE, overridden later*/
			border-width: 0px 1px 1px 1px; /*no top border*/
			margin-left: 10px;
			}
		
		.explanation {
			left: 350px;
			height : 350px;
			
			}		
		
		
		.explanation p, .participation p, .benefits p, .requirements p {
			margin: 0;
			padding: 1px 1px; /*need to apply to the p elements because of background image reqts*/
			}
			
		
		.participation {   /*see above for comments*/
			top: 530px;
			left : 460px;
			width: 700px;
			margin-bottom: 100px;
			}
			
		
			
		.benefits {
			left: 1280px;
			display: none;
			}
			
		.benefits h3 {
			background: transparent url(title_benefits.jpg) no-repeat;
			}
			
		.requirements {
			left: 1580px;
			display: none;
			}
				
		.requirements h3 {
			background: transparent url(title_requirements.jpg) no-repeat;
			}
		
		
			
			
			
/*footer stuff - footer will be on the side, floated, and consist of buttons for MOSE, boxes for IE*/			
			
		footer {
			position: absolute;
			background: transparent;
			z-index: 5000;
			width: 43px; /*make sure floats go to next line*/
			top: 0px;
			left: 1880px;
			padding: 0;
			margin-top: 5px;
			}
			
		footer a {
			display: block; /*for text positioning and link activation*/
			background: url(link_background.gif) no-repeat; /*standard link bk for all just for IE*/
			border: 1px solid #998;
			font-weight: normal;
			text-align: center;
			}
			
		html>head:first-child+body footer a { /*buttons only for MOSE*/
			border: 0;
			padding-top: 15px; 
			background: url(footer_back.png) no-repeat;
			height: 26px;
			}
			
		html>head:first-child+body footer a:hover { /*i'm lazy, i just used 2 images instead of pixy method*/
			background: url(footer_back_hover.png) no-repeat;
			border: 0;
			}
	
/*****************************
	link list...here we go...
*****************************/
			
	.sidebar a:link, .sidebar a:visited, .sidebar a:hover, .sidebar a:active {
		border: 0;
		padding: 0;
		margin: 0;
		}
		
		.sidebar .wrapper {
			position: absolute;
			top: 67px;
			left: 750px;
			z-index: 2000;
			height: 150px;
			margin: 0;
			padding: 0;
			width: 1350px;
			}
			
		.sidebar .wrapper a {
			border: 0;
			}
			
		.sidebar .wrapper .design-selection li > a:first-child {
			display: block;
			}
			
		.sidebar .wrapper ul > li:last-child {
			border-bottom: 0;
			}
		
			
		.sidebar .wrapper {
			list-style-type: none;
			font-size: .7em;
			}	
			
		.sidebar .wrapper a {
			white-space: normal;
			}
			
		.sidebar .wrapper a:first-child {
			font-size: 1.3em;
			}
			
		.sidebar .wrapper li:hover {
			background: url(link_background.gif) no-repeat;
			}
			
		.sidebar .wrapper li a:hover {
			text-decoration: underline;
			border: 0;
			background: transparent;
			}
		
		.sidebar .wrapper li {
			padding: 0 3px;
			border: 0;
			}
		
		html > body .sidebar .wrapper li {
			margin: 0;
			padding: 3px;
			border-bottom: 1px solid #887;
			}
			
			.design-selection, .design-archives, .zen-resources {
				float: left;
				}
			
		
			
			.design-selection ul, .design-archives ul, .zen-resources ul {
				float: left;
				position: relative;
				top: -45px;
				z-index: 3000;
				left: -15px;
				}
				
			
		
				
			html > body .design-selection ul {
				display: none;
				position: relative;
				top: -5px;
				left: 0;
				}
				
			html > body .design-selection:hover ul {
				float: none;
				display: block;
				background: url(drop_background.png) repeat;
				border: 1px solid #776;
				margin: 0 5px;
				padding: 5px;
				width: 128px;
				list-style-type: none;
				display: none;
				}
				
			html > body .design-selection li {
				float: none;
				}
				
			.design-selection ul {
				list-style-type: none;
				display: block;
				}	
				
			
			
			
				
				
				
		
		
				
			html > body .design-archives h3 {
				background: transparent url(drop_archives.png) no-repeat;
				height: 36px;
				width: 123px;
				padding-top: 0;
				float: none;

				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;

				border: none;
				display: none;
				}
				
			html > body .design-archives ul {
				display: none;
				position: relative;
				top: -5px;
				left: 0;
				}
				
			html > body .design-archives:hover ul {
				float: none;
				display: block;
				background: url(drop_background.png) repeat;
				border: 1px solid #776;
				margin: 5px;
				padding: 5px;
				width: 128px;
				list-style-type: none;
				display: none;
				}
				
			html > body .design-archives li {
				float: none;
				display: block;
				}
				
			.design-archives ul {
				list-style-type: none;
				}
				
				
			
				
			
				
			.zen-resources ul {
				display: block;
				}
				
			html > body .zen-resources ul {
				display: none;
				position: relative;
				top: -5px;
				left: 0;
				}
				
			html > body .zen-resources:hover ul {
				float: none;
				display: block;
				background: url(drop_background.png) repeat;
				border: 1px solid #776;
				margin: 5px;
				padding: 5px;
				width: 128px;
				list-style-type: none;
				display: none;
				
				}
			
			html > body .zen-resources li {
				float: none;
				}
				
			.zen-resources ul {
				list-style-type: none;
				}
				




.extra1 {
	display: block;
	background: url(noStandards.gif) fixed no-repeat;
	position: absolute;
	top: 542px;
	left: 22px;
	width: 330px;
	height: 100px;
	}
	
.extra2 {
	}	
	
html>body div.extra1 {
	display: none;
	}
	
	
/*
thank you very much. try the filet.*/