/* CSS Document */

/* undohtml ------------------------------------------------------------------ */

:link,:visited { text-decoration:none }
ul,ol,dl { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,dl,dd,dt,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

/* undohtml ------------------------------------------------------------------ */


/* 

png porblem ie6
to get png's working in ie6 we need the ie image filter.
However this screws up all interactive elemtents to fix this al elementes with a png background
are not allowed to have have any positioning thus we need to make a container div for every png background
ie .png this leads to extra divs but its the only fullproof solution I've found so far.
David - Twist of Lemon

*/

html{
	height: 100%;
}

body{
	background: #fff url(../img/bg_body.jpg) center;
	color: #1A0606;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	height: 100%;
}

#overlay{
	position: absolute;
	height: 100%;
	width: 100%;
}
#overlay .png{
	background: url(../img/bg_overlay.png) repeat-x;
	height: 100%;
	width: 100%;
}

#padding{	/* firefox bugs when using 100% height, margin of a child seems to get inherited by the parent with the 100% */
	height: 100px;
}

#container{
	margin: 0 auto;
	position: relative;
	width: 809px;
	height: 490px;
	z-index: 15;
}
#container .png{
	background: url(../img/bg_container.png) center no-repeat;
	width: 809px;
	height: 490px;
}

#watermark{
	background: url(../img/bg_content.jpg) 200px 30px no-repeat;
	width: 809px;
	height: 490px;
}

#textbox{
	position: absolute;
	bottom: 40px;
	left: 40px;
}
#textbox .png{
	background: url(../img/bg_textbox.png) no-repeat;
	width: 278px;
	height: 259px;
	padding: 20px;
	color: #1A0606;	
}

#contactbar{
	position: absolute;
	right: 40px;
	top: 35px;
	color: #1A0606;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	z-index: 10;
}

#contactbar a{
	color: #1A0606;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	position: relative;
}
a:hover{
	text-decoration: underline;
	position: relative;
	display: inline;
}

#linkbox{
	position: absolute;
	right: 40px;
	top: 110px;
}
#linkbox .png{
	background: url(../img/bg_links.png);
	width: 400px;
	height: 32px;
}	
#linkbox td{
	width: 33%;
	padding: 0 10px;
}
#linkbox a, #linkbox a:active{
	color: #1A0606;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
	position: relative;
	outline: none;
}

#slideshow{
	background: #efefef;
	width: 400px;
	height: 300px;
	position: absolute;
	right: 40px;
	bottom: 40px;
	overflow: hidden;
}

#slideshow #frame{
	background: url(../img/frame.png) no-repeat;
	width: 400px;
	height: 300px;
	position: absolute;
	right: 0;
	top: 0;	
}

#logo{
	background: url(../img/logo.png) no-repeat;
	width: 386px;
	height: 219px;
	position: absolute;
	top: -79px;
	left: -70px;
	z-index: 1;
}


h1{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 10px;
}

p{
	font-size: 12px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}


/* RED VERSION */

body.red{
 background: url(../img/bg_red.jpg);
}

body.red #logo{
	background: url(../img/logo_red.png) no-repeat;
}

body.red #linkbox a{
	color: #C71D0A;
}