/*****************************************
 WELCOME to all the geeks and webdesigners
 that spend their time in page sources.
 
 I can mainly see 3 reasons why you would
 read these lines:
 1. you want to "steal" some trick
 2. you noticed a bug
 3. you don't know what the hell you're 
 doing here...
 
 My reactions are, respectively:
 1. feel free! It's pure CSS...  :-)
 2. PLEASE, send me a mail to 
 	pablo@bijoucontemporain.com
 3. everybody started like that
****************************************/



/****************************************
		GENERAL STYLE
****************************************/

body  	{ 
		margin: 0; 
 		padding: 0; 
 		font-family: helvetica, sans-serif;
 		color: #000;
		background-color: #e0e0f0;
		/*background: transparent url("img/bkg.jpg") 0px 0px repeat;*/
 		height: 100%;
 		width: 100%;
 		font-size: 12pt;
		}

a		{
		text-decoration: none;
		}

				
		
/****************************************
		DEFINE THE 4 MAIN DIV
****************************************/
		
	
#general {
		width: 70%;
		height: 80%;
		position: absolute;
    	top: 0;
    	left:20px;
		}

#generalfixed {
		width: 740px;
		height: 80%;
		position: absolute;
    	top: 0;
    	left:20px;
		}

#menu {
		background-color: #d5d8f5; 
		position: absolute;
 		width: 12em;
 		padding: 5px 0px 0px 0px;
    	top: 20px;
    	right:3%;
 		border: 2px solid #000;
 		font-size: 12pt;
  		font-weight: bold;
		}
		
#titleframe {
		width: 760px;
		height: 110px;
		position: absolute;
    	bottom: 0;
 		padding:  0px;
 		border-top: 2px solid #000;		
		background-color: #e0e0f0;
		}
					

#mykeywords {display: none;}
				
/****************************************
		IN THE "TITLEFRAME" DIV
****************************************/

#title	{
		width: 397px; 
		height: 105px; 
		background-repeat:no-repeat;
		position: absolute;
    	top: 5px;
    	left: 0px;
		}

#undertitle { 
		width: 350px;
		height: 95px;
		position: absolute;
    	top: 15px;
    	left: 410px;

 		line-height: 150%;
 		text-align:center;
 		color: #007; 
 		font-size: 14pt;
		}
		
#detail	{
		width: 397px; 
		height: 40px; 
		background-repeat:no-repeat;
		position: absolute;
    	top: 5px;
    	left: 0px;
		}

#description { 
		width: 350px;
		height: 100px;
		position: absolute;
    	top: 10px;
    	left: 410px;

 		line-height: 150%;
 		text-align:right;
 		color: #000; 
 		font-size: 14pt;
		}
		
.prix {
		position: absolute;
		bottom: 1px;
		right:0px;
		font-size: 10pt;
		text-align:right;
		color: #000;
		line-height: 140%;
		}


				
/****************************************
		IN THE "GENERAL" DIV
****************************************/
		
	/*********************************************************
	define 3 boxes of variable widht and horizontal position
	*********************************************************/

#box1 	{
		width:30%;
		height: 100%;
		position: absolute;
		left:3%;
		top:0;
	  	}

#box2 	{
		width:35%;
		height: 100%;
		position: absolute;
		left:37%;
		top:0;
	  	}

#box3 	{
		width:30%;
		height: 100%;
		position: absolute;
		left:70%;
		top:0;
	  	}


	/*********************************************************
	rules for the arrows
	*********************************************************/
		
#navigate {
		position:  absolute;
		right: 0px;
		top: 20px;
 		line-height: 150%;
		text-align: right;
		font-size: 11pt;
	  	}

#navigate a {
		text-decoration: none;
		color: #000; 
		}
		
#navigate a:hover {
		color: #a11;
		}
		

	/*********************************************************
	rules for different classes
	*********************************************************/

		
.oneimage {
		position:  absolute;
		left: 9%;
		top: 20px;
		}


.manyimages {
		position: absolute;
		border: 1px solid #000;
		overflow: hidden;
		}

.manyimages a {display: block;}

		
.rope	{
		width: 4px;
		position:  absolute;
		left: 100px;
		top: 0px;
		background-color: #225;
		/*background-image:url("img/rope1.jpg");
		background-repeat: repeat-y*/
		}
	
.ropeshadow  {
		width: 4px;
		position:  absolute;
		left: 80px;
		top: 0px;
		/*background-color: #999;*/
		background: transparent url("img/shadow.jpg") 0px 0px repeat;
		}
		
.shadow {
		position: absolute;
		/*background-color: #999;*/
		background: transparent url("img/shadow.jpg") 0px 0px repeat;
		}



/****************************************
		IN THE "MENU" DIV
****************************************/
		
						
#menu ul { 	
		list-style-type: none; 
		margin: 0; 
		padding: 0px 0px 0.5em 1em;
		color: #a00;
		}
					
#menu ul li {
			padding: 0.5em 0px 0px 0px;
		}					

#menu ul li a {
 		font-weight: normal;
		display: block;
		width: 11em/*185px*/;
		}					

#menu ul li ul li a {
		display: block;
		width: 10em/*170px*/;
		}					

#menu a:link, #menu a:visited {
		color: #a00; }

#menu a:hover  {
		color: #fff; 
	 	background-color: #900; 
		}

#menu a:active {
		color: #a00; 	 	
		background-color: #d5d8f5; 
		}

		


/**********************************************************
		WHAT TO DO WITH LINKS IN IMAGES OR IN THE MENU
**********************************************************/


div.manyimages  a span.hide, li a span.hide {
		display: none; 
		text-decoration: none;
		line-height: 120%;
		z-index: 1;
		}
		
div.manyimages  a span.hideie6 {
		display: none; 
		text-decoration: none;
		line-height: 120%;
		}
		
div.manyimages  a:hover span.hide, li  a:hover span.hide {
		display: block; 
		text-decoration: none;
		text-align: center;
		color: #a00; 
		position: fixed;
		right: 3%;
		top: 27em;
		width: 12em;
		height: 5em;
		z-index: 1;
		}