/* CSS Document */

/*------------------ POSITIONING DIVS -----------------------*/


body {
background-color: #d5642c;
text-align : center; /*For IE */
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(elements/menu-background.jpg);
background-repeat: repeat-x;
background-position: top left;
}


#container {
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #d5642c;
	text-align: center;

}


#masthead {
position: relative;
margin: 0 auto;
width: 100%;
height: 47px !important;
height: 100px;background-image: url(elements/menu-background.jpg);
background-repeat: repeat-x;
z-index: 500;
}

#menu {
/* see towerhouse-menu.css for specifications */
}



/* detail area contains two different templates. 
In template one the footer is inside the imagearea, in template 2 it is inside the textare */
#detail { 
position: relative;
margin: 0 auto;
width: 800px;
height: 480px;
z-index: 0;
}

	/* TEMPLATE 1 */
	
	#textarea1 {
	position: absolute;
	left: 0;
	padding: 20px;
	padding-right: 50px;
	width: 330px;
	min-height: 453px; height: auto !important; /*this line for firefox (and IE7) etc */
	height: 453px; /* this line for IE6 */
	background-color: #d5642c;
	text-align: left;
	overflow: visible;
	z-index: 0;
	}	
	
	#imagearea { /* containing div to include footer */
	position: absolute;
	top: 0px;
	left: 400px;
	width: 100%;
	height: auto;
	z-index: 0;
	text-align: left;
	}
		
	#imagearea1 { /* image container with borders */
	border: 5px solid #ffffff;
	border-right: none;
	background-color: #872907;
	z-index: 0;
	text-align: left;
	}
	
	#footer1 {
	position: relative;
	float: left;
	width: 400px;
	height: 0px;
	}

	
	/* TEMPLATE 2 */
	
	
	#textarea2 {
	position: absolute;
	left: 0;
	padding: 20px;
	padding-right: 50px;
	width: 330px;
	min-height: 453px; height: auto !important; /*this line for firefox (and IE7) etc */
	height: 453px; /* this line for IE6 */
	background-image: url(elements/white-watermark.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #FFFFFF;
	text-align: left;
	overflow: visible;
	}	
	
	#footer2 {
	/* see footer2 p tag at bottom */
	}

	#imagearea2 {
	position: absolute;
	top: 90px;
	left: 370px;
	width: 458px;
	height: 247px;
	border: 5px solid #ffffff;
	z-index: 0;
	text-align: left;
	}


	/* TEMPLATE 3 (for online calander booking page) */
	
	#textarea3 {
	position: absolute;
	left: 0;
	padding: 20px;
	padding-right: 50px;
	width: 420px;
	min-height: 453px; height: auto !important; /*this line for firefox (and IE7) etc */
	height: 453px; /* this line for IE6 */
	background-image: url(elements/white-watermark.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #FFFFFF;
	text-align: left;
	overflow: visible;
	}	

	#imagearea3 {
	position: absolute;
	top: 90px;
	left: 460px;
	width: 458px;
	height: 247px;
	border: 5px solid #ffffff;
	z-index: 0;
	text-align: left;
	}

	#imageareabk {
	position: absolute;
	top: 90px;
	left: 480px;
	width: 500px;
	height: 247px;
	border: 5px solid #ffffff;
	z-index: 0;
	text-align: left;
	}


/*------------------ TYPOGRAPHY -----------------------*/

#textarea1 a:link {text-decoration: underline; color: #FFFFFF;}
#textarea1 a:visited {text-decoration: underline; color: #FFFFFF;}
#textarea1 a:active {text-decoration: underline; color: #FFFFFF;}
#textarea1 a:hover {text-decoration: underline; color: #872907;}

#textarea2 a:link, #textarea3 a:link {text-decoration: underline; color: #621503;}
#textarea2 a:visited, #textarea3 a:visited {text-decoration: underline; color: #621503;}
#textarea2 a:active, #textarea3 a:active {text-decoration: underline; color: #621503;}
#textarea2 a:hover, #textarea3 a:hover {text-decoration: underline; color: #d5642c;}


#footer1 a:link {text-decoration: none; color: #FFFFFF;}
#footer1 a:visited {text-decoration: none; color: #FFFFFF;}
#footer1 a:active {text-decoration: none; color: #FFFFFF;}
#footer1 a:hover {text-decoration: none; color: #872907;}

#footer2 a:link {text-decoration: none; color: #621503;}
#footer2 a:visited {text-decoration: none; color: #621503;}
#footer2 a:active {text-decoration: none; color: #621503;}
#footer2 a:hover {text-decoration: none; color: #d5642c;}

p, #textarea1 li, #textarea2 li, #textarea3 li {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
margin-top: 0;
margin-bottom: 8px;
text-align: justify;
}

table {
border-collapse: collapse;
} 

td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
padding: 5px;
border: 1px solid #f0bea5;
}

#textarea1 th, #textarea2 th  {
text-align: left;
font-weight: bold;
}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
margin-top: 8px;
margin-bottom: 2px;
}

#textarea1 p, #textarea1 li, #textarea1 h1,  #textarea1 h2, #textarea1 td, #textarea1 th {
color: #FFFFFF;
}
#textarea2 p, #textarea2 li, #textarea2 h1,  #textarea2 h2, #textarea2 td, #textarea2 th {
color: #621503;
}
#textarea3 p, #textarea3 li, #textarea3 h1,  #textarea3 h2, #textarea3 td, #textarea3 th {
color: #621503;
}


#textarea1 ul,  #textarea2 ul {
margin-left: 5px;
padding-left: 5px;
}

#textarea1 ol,  #textarea2 ol  {
margin-left: 12px;
padding-left: 5px;
}

#imagearea1 p, #imagearea2 p, #imagearea3 p {
margin: 0;
padding: 0;
}

#imagearea1 img {
border-right: 5px solid #ffffff;
border-bottom: none;
}
#imagearea1 img.image3 {
border-top: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
}
#imagearea1 img.image4 {
border-right: 6px solid #ffffff;
}


#footer1 p {
font-size: 8pt;
color: #FFFFFF;
margin-top: 10px;
margin-bottom: 50px;
}

#footer2 p {
font-size: 8pt;
color: #621503;
margin-top: 30px;
margin-bottom: -10px;
}