/********************************************************
*		CSS layout by Erik Kretschmer			        *
*		Orchestre d'Harmonie des Chutes, Levis, Canada	*
*	  													*
*		kretsch@gmail.com								*	
*	  													*
*		August 2007										*
*********************************************************/

	/*362012 disco right*/
	/*988675 disco left */
	/*230E00 head back  */
	/*85745D navbar back*/
	
* { padding: 0; margin: 0; }

/*********************************/
/* Base layout fundations 		   */
/*********************************/
body {
 font-family : Arial, Helvetica, sans-serif;
 font-size	 : 13px;
 background	 : rgb(212,204,197);
}
#base { 
 margin			: 0px 20px auto;
 width			: 840px;
}
#header {
 position		: absolute;
 top			: 0px;
 left			: 20px;
 width			: 840px;
 color			: #FFFFFF;
 padding		: 0px 0px 0px 0px;
 height			: 97px;
 margin			: 20px 0px 3px 0px;
 background	: #230E00;
}
#contentbase { 
 position		: absolute;
 top			: 160px;
 left			: 20px;
 width			: 840px;
 color			: #333;
 background	: #F2F2E6;
 margin			: 0px 0px 5px 0px;
 padding		: 0px 0px 0px 0px;
 height			: 395px;
}

/************************************************/
/* PRIMARY NAV BAR RELATED STUFF AND SUB MENUES */
/************************************************/
/* MAIN NAV BAR									*/

#navbar {
 position		: absolute;
 top			: 118px;
 left			: 20px;
 width			: 840px;
 height			: 24px;
 background	: #85745d;
 padding		: 0px 0px 0px 0px;
 margin			: 5px 0px 20px 0px;
 z-index		: 10000;
}
	/* Hide/Display of menus */
	div#navbar ul ul {
	 display			: none;
	}
	div#navbar ul li:hover ul {
	 display			: block;
	}	
	div#navbar ul ul,
	div#navbar li:hover ul ul,
	div#navbar ul ul li:hover ul ul {
	 display			: none;
	}
	div#navbar ul li:hover ul,
	div#navbar ul ul li:hover ul,
	div#navbar ul ul ul li:hover ul{
	 display			: block;
	}
	div#navbar h2:hover {
 	 color				: #230E00;
	}
	
	
	/* menu construction */
	#navbar ul {
	 list-style		: none;
	 margin				: 0;
	 padding			: 0;
	 width				: 165px;
	 float				: left;
	 position			: relative;
	 z-index			: 10000;
	}
	#navbar a,
	#navbar h2{
	 height				: 20px;
	 font					: bold 11px/16px arial, helvetica, sans-serif;
	 display			: block;
	 border-style	: none;
	 margin				: 0px 0px 0px 0px;
	 padding			: 0px 10px;
	 z-index			: 500;
	}
	#navbar h2.curr {
	 background		: #230E00;
	 height				: 20px;
	 font					: bold 11px/16px arial, helvetica, sans-serif;
	 display			: block;
	 border-style	: none;
	 margin				: 0px 0px 0px 0px;
	 padding			: 0px 10px;
	 z-index			: 500;
	}

	#navbar h2,
	#navbar h2.curr {
	 color						: #FFFFFF;
	 text-transform		: uppercase;
	 text-align				: center;
	}
	
	#navbar a,
	#navbar h2.curr a,
	#navbar li.curr a {
	 color						: #FFFFFF;
	 text-decoration	: none;
	}
	#navbar a:hover {
	 color						: #230E00;
	}

	#navbar h2.curr a:hover,
	#navbar li.curr a:hover {
	 color						: #85745d;
	}
		
	#navbar li,
	#navbar li.curr {
	 position					: relative;
	 background				: #85745d;
	 z-index					: 500;
	 padding					: 4px 0px 0px 0px;
	 margin						: 0px 0px 0px 0px;
	}
	#navbar li.curr,
	#navbar li.curr li {
	 background				: #230E00;
	}
		
	#navbar ul ul ul {
	 position					: absolute;
	 top							: 0;
	 left							: 100%;
	 z-index					: 10000;
	}
	#navbar ul ul {
	 position					: relative;
	 z-index					: 10000;
	}
	
	#navbar li span { 
	font-size					: 12pt;
	color							: #230E00; 
	}
	#navbar li.curr span { 
	font-size					: 12pt;
	color							: #85745d; 
	}
	
/*********************************/
/* Header	                       */
/*********************************/
	div#header .logo {
	 position	: relative;
	 top			: -5px;
	 left			: 10px;
	}
	div#header .topimg {
	 position	: relative;
	 top			: 0px;
	 left			: 280px;
	}

/*********************************/
/* ACCEUIL BASE (index.html)	 	 */
/*********************************/
	#contentindex {
	 width				: 840px;
	 color				: #333;
	 background		: #988675;
	 background-image	: url(img/index_content_bg.jpg);
	 margin				: 0px 0px 5px 0px;
	 padding			: 0px 0px 0px 0px;
	 height				: 415px;
	}
	/********* 2 COL ZONE 1 (base) **********/
	#contentzone_F { 
	 color				: #230E00;
	 background		: #362012;
	 margin				: 0px 0px 0px 0px;
	 padding			: 0px;
	 height				: 415px;
	 width				: 840px;
	}
	/********* 2 COL ZONE 1 (LEFT) **********/
	#contentzone_L { 
	 color				: #230E00;
	 background		: #988675;
	 margin				: 0px 0px 0px 0px;
	 position			: absolute;
	 padding			: 0px;
	 height				: 415px;
	 width				: 370px;
	 float				: left;
	}
	#contentzone_L div {
	 padding			: 40px 40px 0px 40px;
	 font-family	: Helvetica, Arial, sans-serif;
	 font-size		: 10pt;
	}
	#contentzone_L div h1 {
	 padding			: 0px 0px 20px 0px;
	 font-family	: Helvetica, Arial, sans-serif;
	 font-size		: 16pt;
	 font-weight	: lighter;
	}
	#contentzone_L div h2 {
	 padding			: 5px 0px 5px 0px;
	 font-family	: Helvetica, Arial, sans-serif;
	 font-size		: 12pt;
	 font-weight	: normal;
	 cursor				: pointer;
    width				: 160px;
	}
	/********* 2 COL ZONE 2 (RIGHT) **********/
	#contentzone_R { 
	 float				: left;
	 color				: #FFF;
	 background			: #362012;
	 margin				: 0px 0px 0px 0px;
	 padding			: 0px;
	 height				: 415px;
	 width				: 470px;
	 display			: inline;
	 position			: relative;
	}
	
	/********* ZONE 2 (RIGHT ALONE) **********/
	#contentzone_2 {
	 width				: 390px;
	 height				: 375px;
	 position			: relative;
	 top				: 0px;
	 left				: 370px;
	 padding			: 40px 40px 0px 40px;
	 /*float			:	right;*/
	 color				: #FFF;
	 background			: #362012;
	 filter				: alpha(opacity=90);
	 opacity			: 0.90;
	 -moz-opacity		: 0.90;
	 z-index			: 1;
	 font-size			: 10pt;
	}
	
	#contentzone_2.large {
	 width				: 470px;
	 height				: 415px;
	 position			: relative;
	 top				: 0px;
	 left				: 290px;
	 /*float				: right;*/
	 padding			: 0px 0px 0px 80px;
	 color				: #FFF;
	 background			: #362012;
	 filter				: alpha(opacity=90);
	 opacity			: 0.90;
	 -moz-opacity		: 0.90;
	 z-index			: 1;
	 font-size			: 10pt;
	}
	
	#contentzone_2.largehigh {
	 width				: 470px;
	 height				: 415px;
	 position			: relative;
	 top				: 0px;
	 left				: 290px;
	 /*float				: right;*/
	 padding			: 0px 0px 0px 80px;
	 color				: #FFF;
	 background			: #362012;
	 filter				: alpha(opacity=90);
	 opacity			: 0.90;
	 -moz-opacity		: 0.90;
	 font-size			: 10pt;
	}

	#contentzone_2 div {
	 filter				: alpha(opacity=100);
	 opacity			: 1;
	 -moz-opacity		: 1;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 10pt;
	 // float				: left;
	}
	div#norm {
	 filter				: alpha(opacity=100);
	 opacity			: 1;
	 -moz-opacity		: 1;
		padding			: 40px 40px 0px 40px;
		color			: #FFF;
	}
	#norm {
	 filter				: alpha(opacity=100);
	 opacity			: 1;
	 -moz-opacity		: 1;
		color			: #FFF;
	}
	#contentzone_2 div.full {
		padding			: 40px 40px 0px 40px;
	}
	
	#contentzone_2 div.scroll {
		padding			: 80px 40px 0px 40px; 
	}
    #contentzone_2 div.norm h1 {
	 filter				: alpha(opacity=100);
	 opacity			: 1;
	 -moz-opacity		: 1;
	 padding			: 0px 0px 20px 0px;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 16pt;
	 color				: #FFF;		
	}
	#contentzone_2 div h1 {
	 padding			: 0px 0px 10px 0px;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 16pt;
	 font-weight		: lighter;
	 color				: #FFF;
	}
	#contentzone_2 h1 {
		position		: relative;
		height			: 20px;
		top				: 0px;
		padding			: 40px 5px 20px 5px;
		font-family		: Helvetica, Arial, sans-serif;
		font-size		: 16pt;
		font-weight		: lighter;
		color			: #FFF;
	}
	#contentzone_2.largehigh h1 {
		position		: relative;
		height			: 20px;
		top			    : 0px;
		padding			: 50px 0px 10px 0px;
		font-family		: Helvetica, Arial, sans-serif;
		font-size		: 16pt;
		font-weight		: lighter;
		color			: #FFF;
	}
	#contentzone_2 h2 {
		position		: relative;
		top				: 0px;
		padding			: 20px 0px 10px 0px;
		margin			: 0;
		font-family		: Helvetica, Arial, sans-serif;
		font-size		: 12pt;
		font-weight		: strong;
		color			: #FFF;
	}
	#contentzone_2.largehigh h2 {
		position		: relative;
		top				: 0px;
		padding			: 20px 0px 10px 0px;
		margin			: 0;
		font-family		: Helvetica, Arial, sans-serif;
		font-size		: 12pt;
		font-weight		: strong;
		color			: #FFF;
	}
	#norm h2 {
	 filter				: alpha(opacity=100);
	 opacity			: 1;
	 -moz-opacity		: 1;
		position		: relative;
		top				: 0px;
		padding			: 20px 0px 10px 0px;
		margin			: 0;
		font-family		: Helvetica, Arial, sans-serif;
		font-size		: 12pt;
		font-weight		: strong;
		color			: #FFF;
	}
	
	/* Scroll Area classes */
	#contentzone_2 div#scrollable {
		position		: relative;
		top			  	: 0px;
		padding			: 0px 0px 0px 0px;
		margin			: 0px 0px 0px 0px;
		width		  	: 400px;
		height			: 260px;
		overflow		: hidden;
		z-index			: 1;
	}
	
	#contentzone_2 div#scrollable_narrow {
		position		: relative;
		top				: 0px;
		padding			: 0px 0px 0px 0px;
		margin			: 0px 0px 0px 0px;
		width			: 400px;
		height			: 260px;
		overflow		: hidden;
		z-index			: 1;
	}
	
	#contentzone_2 div#scrollable_short {
		position		: relative;
		top				: 0px;
		padding			: 0px 0px 0px 0px;
		margin			: 0px 0px 0px 0px;
		width			: 400px;
		height			: 200px;
		overflow		: hidden;
		z-index			: 1;
	}
	
	#contentzone_2 div#scrollcontent {
		position		: relative;
		width			: 390px;
		left			: 5px;
		z-index			: 1;
	}
	#contentzone_2 div#scrollcontent_narrow {
		position		: relative;
		width			: 370px;
		left			: 5px;
		z-index			: 1;
	}
	
	#contentzone_2 div#scrollcontent_narrow span{
		position		: relative;
		float			: right;
		top				: -14px;
	}
	
	#contentzone_2 div#scrollcontent_short {
		position		: relative;
		width			: 370px;
		left			: 5px;
		z-index			: 1;
	}
	
	#contentzone_2 div#scrollArea {
		position		: absolute;
		left			: 415px;
		top				: 110px;
		height			: 260px;
		width			: 15px;
		border			: 1px solid #FFF;
		overflow		: hidden;
		z-index			: 10;
	}
	
	#contentzone_2 div#scrollArea_narrow {
		position		: absolute;
		left			: 470px;
		top				: 80px;
		height			: 260px;
		width			: 15px;
		border			: 1px solid #FFF;
		overflow		: hidden;
		z-index			: 10;
	}
	
	#contentzone_2 div#scrollArea_short {
		position		: absolute;
		left			: 470px;
		top				: 110px;
		height			: 200px;
		width			: 15px;
		border			: 1px solid #FFF;
		overflow		: hidden;
		z-index			: 10;
	}
	
	#contentzone_2 div#scroller {
		position		: absolute;
		top				: -1px;
		width			: 15px;
		padding			: 0px 0px 0px 0px;
		margin			: 0px 0px 0px 0px;
		background		: #85745D;
		border-top		: 1px solid #FFF;
		border-bottom	: 1px solid #FFF;
		z-index			: 10;
	}
	
	#contentzone_2 span.em {
		font-size		: 12px;
		font-style		: italic;
	}
	
	#contentzone_2 span.smaller {
	 color					: #FFF;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size		: 12pt;
	 font-weight		: strong;
	}
	
	#contentzone_2 a{
	 position				: relative;
	 float					: right;
	 top						: 20px;
	 left						: 0px;	 
	 color					: #FFF;
	 text-decoration: none;
	 filter					: alpha(opacity=80);
	 opacity				: 0.80;
	 -moz-opacity		: 0.80;
	}
	
	#contentzone_2.largehigh a{
	 position				: relative;
	 float					: none;
	 top					: 0px;
	 left					: 0px;	
	 color					: #FFF;
	 text-decoration		: none;
	}
	
	#contentzone_2 a:hover{
	  color					: #85745D;
	}
					
	/********* ZONE 1 (LEFT ALONE) **********/
	#contentzone_1 {
	 width					: 370px;
	 height					: 415px;
	 position				: absolute;
	 float					: left;
	 color					: #230E00;
	 z-index				: 0;
	}
	#contentzone_1 {
	 /* background: #988675; */
	}
	#contentzone_1.dark {
	 background			: #362012;
	}
	#contentzone_1 img.portrait {
	 height					: 100%;
	 float					: left;
	}
	#contentzone_1 div {
	 padding				: 40px 40px 0px 40px;
	 filter					: alpha(opacity=100);
	 opacity				: 1;
	 -moz-opacity		: 1;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 10pt;
	}
	#contentzone_1 div h1 {
	 padding				: 0px 0px 20px 0px;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 16pt;
	 font-weight		: lighter;
    /*border: 1px solid #0f0;*/
	}
	#contentzone_1 div h2 {
	 padding				: 5px 0px 5px 0px;
	 font-family		: Helvetica, Arial, sans-serif;
	 font-size			: 12pt;
	 font-weight		: normal;
	 cursor					: pointer;
    /*border: 1px solid #00f;*/
   width					: 150px;
	}
	
/*********************************/
/* DISCO BASE (disco.html)	 	   */
/*********************************/
	#contentdisco {
	 width					: 840px;
	 color					: #333;
	 font-size			: 10pt;
	 background			: #362012;
	 margin					: 0px 0px 5px 0px;
	 padding				: 0px 0px 0px 0px;
	 height					: 415px;
   border					: 1px solid #00f;
   display				: block;
	}
	
	/*div#contentzone_1 .cd1 {
	 margin: 20px 0px 0px 0px;
	 color: #FFF;
	}*/
	
	#tcd1 {
	 color				: #FFF;
	}
	#cd1 {
	 position			: relative;
	 top					: 40px;
	 left					: 40px;
	 padding			: 0px 0px 5px 0px;
	 margin				: 0px 0px 0px 0px;
	 width				: 300px;
    /*border: 1px solid #f00;*/
	 color				: #230E00;
	 font-size		: 10pt;
	 display			: block;
	}
	
	#cd1 a{
	 border				: 1px solid #230E00;
	 color				: #230E00;
	 background		: #362012;
	 padding			: 4px 4px 4px 4px;
	 filter				: alpha(opacity=80);
	 opacity			: 0.80;
	 -moz-opacity	:0.80;
	 text-decoration: none;
	}
	
	#cd2 {
	 position			: relative;
	 top					: 40px;
	 left					: 40px;
	 padding			: 0px 0px 5px 0px;
	 margin				: 0px 0px 0px 0px;
	 width				: 300px;
	 color				: #230E00;
	 font-size		: 10pt;
	 display			: none;
	}
	#cd2 a{
	 border				: 1px solid #230E00;
	 color				: #230E00;
	 background		: #362012;
	 padding			: 4px 4px 4px 4px;
	 filter				: alpha(opacity=80);
	 opacity			: 0.80;
	 -moz-opacity : 0.80;
	 text-decoration: none;
	}
	
	#cd1_img {
	 position			: absolute;
	 top					: -140px;
	 left					: 440px;
	 width				: 250px;
	 height				: 370px;
	 z-index			: 2;
	 overflow			: hidden;
	}
	#cd2_img {
	 position			: absolute;
	 top					: -140px;
	 left					: 440px;
	 width				: 250px;
	 height				: 370px;
	 z-index			: 2;
	 overflow			: hidden;
	}
	
/*********************************/
/* Credits											 */
/*********************************/
	#credits {
	 position			: absolute;
	 top				: 580px;
	 left				: 0px;
	 float				: left;
	 height				: 36px;
	 padding			: 2px 0px 0px 390px;
	 font-family	: Helvetica, Arial, sans-serif;
	 font-size		: 8pt;
	 color				: #988675;
	}
	#credits a{
	 color				: #988675;
	 text-decoration: none;
	}
	#credits a:hover{
	 color				: #85745D;
	}
	#credits img{
	 position			: relative;
	 float				: left;
	 top					: -21px;
	 left					: 370px;
	}