/* sl.css */

@import "fixed.css";  /* position fixed with hack IE Eric Bednarz : http://tagsoup.com/-dev/null-/css/fixed/ */
 
/* general */

body, td, p, div, small, big { font-family: 'Myriad Web', Verdana, sans-serif; }
.font-modern, .font-neutral small b, .font-neutral b small, small.font-neutral b, small b.font-neutral { font-family: 'Myriad Web', Verdana, sans-serif; }
.font-neutral { font-family: Arial, Helvetica, sans-serif; }
.font-classic { font-family: Garamond, 'Minion Web', Georgia, Palatino, 'Palatino Linotype', 'Times New Roman', serif; }
small.font-neutral, .font-neutral small { font-family: Helvetica, sans-serif; }
big.font-modern, .font-modern big { font-family: 'Myriad Web', Tahoma, Verdana, sans-serif; }
.font-fix { font-family: 'Courier New', Courier, monospace; }
.font-comic { font-family: 'Comic sans MS', 'Trebuchet MS', sans-serif; }
.font-fantasy { font-family: 'Curlz MT', 'Matisse ITC', Papyrus, fantasy, serif; }
.font-hand { font-family: 'Edwardian Script ITC', 'Nimbus Script', BrushScrD, 'Bradley Hand ITC', cursive, serif; }
.font-eurostile { font-family: Eurostile, sans-serif; }
.font-caps { font-family: 'Copperplate Gothic Bold', 'Engravers MT', 'Felix Titling', sans-serif; }
.font-black { font-family: Impact, 'Rockwell Extra Bold', 'Arial Black', 'Franklin Gothic Demi', sans-serif; }
.font-narrow { font-family: 'Arial Narrow', sans-serif; }
.font-min { font-size: 9px;font-family: sans-serif; }

.font-xxs { font-size: xx-small; }
.font-xs { font-size: x-small; }
.font-small { font-size: small; }
.font-medium { font-size: medium; }
.font-large { font-size: large; }
.font-xl { font-size: x-large; }
.font-xxl { font-size: xx-large; }

.align-center { text-align:center; } 
.align-center * { margin-left:auto; margin-right:auto; }  
.align-left { text-align:left; } 
.align-left * { margin-left: 0; margin-right: auto; }  
.align-right { text-align: right; } 
.align-right * { margin-left: auto; margin-right: 0; }  
.align-both { position: relative; padding:1px; margin:0px; }
.align-both *.align-left { position: absolute; left: 1px; top: 1px; margin:0; padding: 0; }
.align-both *.align-right { text-align: right; margin:0; padding:0; }

/* Elements */

h1, h2, h3	{margin-top: 2ex; margin-bottom: 0;}
h1, h2, h3	{ font: 1em/1.3em 'Copperplate Gothic Bold', 'Engravers MT', 'Felix Titling', sans-serif;}
h4, h5, h6	{ margin-top:	1ex; margin-bottom: 0; line-height: 100%; }
h1 { font-size: 1.5em; font-weight: normal; letter-spacing: 0.1em; word-spacing: 0.1em; text-align: center; margin-top: 0ex ; padding-top: 0ex;}
h1 small {font-size: 0.67em; font-family: 'Copperplate Gothic Bold', 'Engravers MT', 'Felix Titling', sans-serif;}
h2	{font-size: 1.33em; font-weight: normal;}
h2 small {font-size: 0.75em;}
h3	{font-size: 1.2em; font-weight: bold; font-style: italic;}
h4	{font-size: 1.1em; font-weight: normal;}
h5	{font-size: 1em; font-weight: normal; font-style: italic; }
h6	{ font-size: smaller; font-weight: normal;}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {font-weight: normal;}
h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {font-family: 'Copperplate Gothic Bold', 'Engravers MT', 'Felix Titling', sans-serif; font-weight: bold;}
h3 em, h5 em {font-style: normal;}

p	{margin: 2ex 0; padding: 2ex 0.3em 0ex 0.3em ; text-align: justify;}
p,  #main li, #menu li { line-height: 150%; }
li { list-style-image: url(liste.gif); }
address	{text-align: right; margin: 1ex 0; padding: 0ex 0.3em;}

.gigogne  { 
 position: absolute;
 height: 100%;
 width: 100%;
 margin:-1px; /* compense bordure, parfois necessaire pour tracer la boite... */
 padding:0; 
 border: 1px solid transparent;
 }
 
/*	 positionnements */

html  {margin: 0; padding: 0; border: 0; 
 background: rgb(51, 102, 51) url(bg.jpg) fixed;
 }

head { display: none; } /* bug opera */

body {margin: 0; padding: 0; border: 0;  
 background: rgb(51, 102, 51) url(bg.jpg) fixed; /* idem html */
 color: rgb(204,204,204);
 }
	 
/* contenu defilant */

#content {	/* hack position fixed */
 position: absolute;
 top:0;
 left:0;
 margin:0;
 padding: 0 5% 10ex 5%;	 /* padding-top would not work in IE */  	  
 border: 0;	  		  	  
 } 

#main {	
 position: relative;
 margin-top: 25ex ;
 margin-left: 12em ;
 padding-bottom: 2ex;	
 z-index: 2;
 }    

#main-left  { 
 position: relative;
 margin: 2ex 170px 2ex 0em;
 padding: 0 1em 0 2em;
 z-index: 2;
 }

#main-left h2 { margin-left: -1ex; }

#footer	{
 color: rgb(128,128,128);
 border-top: 3px ridge rgb(204, 204, 204);
 margin: 3ex 0em 0ex -1em;
 padding: 1ex 0;
 clear: both;
 } 

#main-right-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding-bottom: 5ex;
 } 	

#main-right {
 float: right;
 margin-top: 2ex;
 margin-right: 20px;
 width: 150px; 
 border-top: 0.2em solid transparent;
 z-index: 2;
 } 	

/* titre */
	
#accessibility {
 position: absolute;
 margin-top: 5ex;
 top: -2em;
 left: 5%;
 right: 5%;
 z-index: 4;
 }

#header { 	
 position: absolute;
 top: 0ex;
 left: 5%;
 right: 5%;
 height: 25ex;
 }

#header2 { 	
 position: absolute;
 top: 0ex;
 left: 12em;
 right: 0%;
 height: 25ex;
 z-index: 3;
 }
 
#banner {
 position: absolute;
 top: 5ex;
 height: 15ex;
 padding: 0 2em;
}
 
#navigation { 
 position: absolute;
 bottom: -0.8em;
 margin-bottom: 5ex;
 left: -9em;
 }

#accessibility, #navigation, #footer { 
 font-size: smaller; 
 font-family: Arial, Helvetica, sans-serif;
 }

/* bandeau gauche logo menu */
	
#left  { 
 position: absolute;
 top: 5ex;
 left: 5%;
 width: 12em;
 bottom: 10ex;
 z-index: 1;
 }

#left-top {
 position: absolute;
 top: 0ex;
 height: 15ex;
 width: 12em;
 }

#left-bottom {
 position: absolute;
 top: 20ex;
 bottom: 0;
 width: 100%;
 }

#logo { 
 position: absolute;
 width: 100%;
 }

#scie { 
 background: url(bgscie.gif) no-repeat left bottom;
 position: absolute;
 top: 1.5em;
 bottom: 30px; /* + 70px biseau = 100 px apparents */
 left: 1.5em;
 width: 2em;
 min-width: 15px;
 z-index: 1;
 }

#scierie { 
 position: absolute;
 font-style: italic;
 top: 0.6em;
 left: 2.05em;
 font-weight: bold;
 font-size: 1em;
 white-space: nowrap;
 z-index: 2;
 }

#s { 
 font-size: 3em;
 color: rgb(56, 225, 0);
 }

#cierie { margin-left: -0.15em;
 font-size: 2.3em;
 color: rgb(51, 204, 0);
 }

#delerm { 
 position: absolute;
 color: rgb(221, 176, 176);
 left: 2em;
 top: 3.8em;
 font-weight: bold;
 font-size: 1em;
 white-space: nowrap;
 z-index: 3;
 }

#de { 
 font-style: italic;
 color: rgb(210, 168, 168);
 font-size: 1.2em;
 }

#lerm { 
 letter-spacing: 0.55em;
 color: rgb(128, 0, 0);
 font-style: normal;
 font-size: 1.5em;
 margin-left: 0em;
 }

#trait { 
 background-color: rgb(210, 168, 168);
 height: 0.3em;
 line-height: 0.3em;
 position: absolute;
 top: 6em;
 left: 2em;
 width: 8.5em;
 z-index: 4;
 }

#menu-bg { margin: 20ex 0 0 0; padding-bottom: 120px; } /* cf bas scie */	

#menu {
 position: relative; 
 top: 2ex; 
 border-top: 1px solid transparent;
 margin: 0px 0 0 1em; 
 padding: 0 0 0 0em; 
 z-index: 5;
 }

#menu ul {margin: 0; padding: 0 0 0 2.8em;  }	

#menu li {margin: 0.5em 0.5ex 0.5em 0em; padding: 0 0 0 0.5em;  }	

#nicole { min-height: 102px; }

#christophe { min-height: 152px; }

/* zoom images */

.zoom { 
 position: relative;
 float: left;
 margin: 1ex 0ex 0 0px;
 border: 2px solid transparent;
 }

.zoom a, .zoom img {
 position: absolute;
 top: 0;
 right: 0;
 display: block;
 width: 100%;
 height: 100%;
 }

.zoom a:hover { 
 top: -175px;
 right: -65px;
 width: 400%;
 height: 400%;
 z-index: 5;
 }

.rectangle {
 width: 150px;
 height: 100px;
 }

.carre {
 width: 150px;
 height: 150px;
 }

/* 	Decoration */


.bg-forest { color: rgb(204,230,204); background: rgb(51, 102, 51) url(bg.jpg) fixed;} 

.bg-forest a:link  { color: rgb(255, 255, 255); }
.bg-forest a:visited { color: rgb(204, 204, 204); }
.bg-forest a:hover { 
 background: rgb(102, 153, 102); 
 color: rgb(255, 255, 255);
 }
   
.bg-forest a:active, .bg-forest *:active { color: rgb(255, 51, 51); }

.bg-forest ul, .bg-forest li, .bg-forest span {
 background: rgb(51, 102, 51);
 display:inline ;
 margin: 0 0.5em;
 padding: 0;
 }

.bg-forest ul, .bg-forest span {border: 1px solid rgb( 128, 128, 128);}

.bg-pine {		  
 color: rgb(51,51,51);
 background: rgb(250, 228, 142) url(pin.jpg) fixed left;
 }

.bg-pine a:link { color: rgb(51, 102, 204); }
.bg-pine a:active { color: rgb(255, 102, 51); }
.bg-pine a:visited { color: rgb(102,102,102); }
.bg-pine a:hover, #main p, #main ul, #main address {  
 background: rgb(255, 248, 204);
 border: 1px solid rgb(204, 204, 204);
 margin-right: 1px;
 }  
.bg-pine .zoom a:hover { background: transparent; }

a, img { 
 text-decoration: none;
 border: 0; 
 }

#main p:first-letter { 
 color: rgb(51, 204, 0);
 font-size: 3em;
 font-family: 'Arial Narrow', sans-serif;
 }

.lettrine { 
 color: rgb(51, 204, 0);
 font-size: 2em;
 }  

.groove  { border: 2px groove white; }

/*	Fin sl.css	*/