/* ============================================  GENERICS ============================================ */

body
	{	font-family:		"century gothic", sans serif;
		font-size:			1em;
		letter-spacing:		1px;
		line-height:		150%;
		
		
	}
#pagename
	{	display:			none; /*This is meant for the styled version, while the title must show in the no-style version.*/
	
	}
	

#container
	{	
		float:				left;/*I do not get the positioning to work in IE6 without using position absolute or without making margin-left to 0... SOLVED IT!	One has to mark it with display: inline  */
		width:				1000px;
		height:				575px;
		margin-left:		0;
		display:			block;
		background:			url(../home/logobottom02.png); /*I wanted to add a second background img on specific CSS for every page, but apparently only Safari supports that. Moreover: the background of the .png is transparent, yet IE6 shows it as light blue.*/
		background-repeat:	no-repeat;
		background-position:center 101%;
	
	}
#container.gallery /*No background image in the galleries => takes too much space.*/
	{
			
		background-color:	#fff;
		background-image:	none;
		
	}

#menu
	{
		float:				left; 
		width:				801px;
		height:				5%;
		margin-top:			-10px;
		margin-left:		10%;
		display:			inline;
		
	}
	

#menu a
	{
		display:			none;
		
		
	}

#menu ul, #contentlist ul, #contentlinks ul
	{	
		list-style-type:	none;
  		padding: 			0;
 		margin: 			0;
		margin-top:			4px;
		
  }
  
#menu ul li 
	{
		float: 				left;
		position: 			relative;
		width: 				10em;
	
	}
		
#menu ul li a
	{
		display:			block;
		text-align:			center;
		line-height:		30px;
		text-decoration:	none;
		font-weight:		bold;
		letter-spacing:		2px;
		text-transform:		lowercase;
		color:				#000;
		border-right:		solid 1px #ccc; /*Despite having tried - in my opinion - all possible variables I couldn't make the right border from the end of the menu disappear.*/
			}
	

#menu ul li a:hover
	{	
		color:				#ccc;
	}	
	
#menu ul li.active a
	{
		color:				#ccc;
	}


/*========================================================== MAINPAGE =========================================== */
#pichome
	{
		float:				left;
		width:				450px;
		margin-left:		275px;
		margin-top:			55px;
		display:			inline; /*To fix it for IE6 in order to avoid double margin*/
		
				
	}
	
/* ===================================================== CONTENT FORMATTING on every page ==========================================*/	

#contentexhibitions, #contentabout, #contentlinks, #contentguestbook
	{
		float:				left;
		width:				700px;
		margin-top:			5%;
		margin-left:		17%;
		padding:			7px;
		overflow:			auto;
		min-height:			300px;
		height:				300px !important;
		height:				330px;
		font-size:			80%;
		clear:				both;
		color:				#666;
		display:			inline; /*To fix for IE6*/
		
		
	}

#contentexhibitions p
	{
		width:				450px !important;
		width:				420px; /* to fix IE box model problem*/
	}	

#contentlist
	{
		margin-top:			5%;
		height:				350px;
	}

#textstat
	{
		height:				450px;
	}

#contentexhibitions h3, #contentabout h3
	{
		color:				#e38711;
		
	}

#contact
	{
		border-style:		double;
		border-color:		#e38711;
		color:				#666;
		min-width:			210px;
		width:				210px !important;
		width:				230px;
		padding:			5px;
		margin-left:		auto;
		margin-right:		auto;
	
	}	
a 
	{
		color:				#e38711;
		text-decoration:	none;
	}

a:hover
	{
		text-decoration:		underline;
		
	}
	

img#cow, img#rita, img#door, img#refl, #bor, img#statpic, img#livpic 
	{	
		float:				right;
		width:				200px;
		padding:			7px;
		margin-left:		14px;
		margin-top:			-5%;
		font-size:			smaller;
		
		}

img#refl
	{
		margin-top:			-17%;
	}

/* ==================================================== GALLERY INDEX ====================================================== */
#thumbcontainer
	{
		float:				left;
		width:				400px;
		
		height:				280px;
		margin-top:			8%;
		margin-left:		30%;
		
		padding:			7px;
		overflow:			auto;
		
		display:			inline; /*To make it work in IE6*/
		
		}

#thumbcontainer img
	{	
		border-style:		none;
		
	}
	
#thumbcontainer .thumb a /*Remember to put every link image in it's own div, otherwise mouseover=total chaos. This allows also to have a caption under the pics. Also image order gets berserk in IE if thumbs not in divs.*/
	{	
		float:				left;
		width:				102px;	
		display:			inline;
		padding:			10px;
		
		margin:				auto;
		
	}

.clearboth
	{
		clear:				both;
	
	}
	

#thumbcontainer .thumb a:hover 
{
	position:				relative;
	bottom:					-2px;
	left:					2px;
	
}


/*#thumbcontainer .thumb a:hover I wanted to change image on hover, but I could not make it work despite following Zeldman's p. 262 instructions.
	{
		position:			relative;
		bottom:				0;
		left:				0;
		width:				102px;
		heigth:				102px;
				
	}
	
	*/
/*	=================================================== THOUGHTS hoverbox =========================================================*/
/*Courtesy of: http://sonspring.com/journal/hoverbox-image-gallery */
#hoverboxcontainer
	{
		float:				left;
		width:				900px !important;
		width:				800px;
		margin-right:		5%;
		
		display:			inline;
		
		
		
	}

.hoverbox
{
		min-height:			600px;
		height:				600px !important;
		height:				660px; /*To fix height in IE. Found in: http://www.dustindiaz.com/min-height-fast-hack*/
		
		margin-top:			5%;
		margin-left:		20%;
		margin-right:		-5%; /*This gets more space to the right in order to show the full preview BUT maintain 4 pics/row.*/
		padding:			30px 60px 40px 50px;
		overflow:			visible;
		
		cursor: 			default;
		list-style: 		none;
		
}



.hoverbox a
{
	cursor: 				default;
}

.hoverbox a .preview, .hoverbox a .Vpreview
{
	display: 				none;
}

.hoverbox a:hover .preview, .hoverbox a:hover .Vpreview
{
	display: 				block;
	position: 				absolute;
	top: 					-33px;
	left: 					-45px;
	z-index: 				1;
	
}

.hoverbox img
{
	background: 			#fff;
	border-color: 			#aaa #ccc #ddd #bbb;
	border-style: 			solid;
	border-width: 			1px;
	color: 					inherit;
	padding: 				2px;
	vertical-align: 		top;
	width: 					100px;
	height: 				75px;
	margin:					10px;
}

.hoverbox img.Vpic
{	width: 					75px;
	height:					100px;
}


.hoverbox li
{
	background: 			#fff;
	border-color: 			#fff #ccc #ccc #fff;
	border-style: 			solid;
	border-width: 			2px;
	color: 					inherit;
	display: 				inline;
	float: 					left;
	margin: 				3px;
	padding: 				1px;
	position: 				relative;
}

.hoverbox .preview
{
	border-color: 			#ccc;
	width: 					300px;
	height: 				200px;
	
}


.hoverbox .Vpreview
{	width: 					167px;
	height:					250px;
	
}

/* ================================================================ LINKS page  ==============================================*/

p.links
	{
		font-weight:		bolder;
		font-size:			large;
		
				
	}