/*********** Reset default browser CSS. Based on work by Eric Meyer. ***************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table {	border-collapse: collapse;	border-spacing: 0; }
a img {	border: none; }

/************ General global settings ************/
h1, h2, h3, h4, h5, h6, p, blockquote, ul, li, ol, dl, fieldset { margin: .5em 24px; } 
li, dd { margin-left: 36px; }
img { border: 0; }
a:link, a:visited { color: #000099; font-weight: 700; }
a:hover, a:focus, a:active { color: #CC0000; }

/************ The layout stuff ************/
body {
margin: 0;
padding: 20px 0;
text-align: center; /* To center the page in IE */
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
color: #111111;
background-color: #ffffff;
}

.container {
margin: 0 auto; /* To center the page */
text-align: left;
width: 940px;
background-color: #ffffcc; 
border: 2px solid #000000;
line-height: 1.4;
}

.header { 
padding-top: 1px; /* to enclose top margin */ 
height: 100px;
background-image: url(Cliffe_cliff.jpg);
background-repeat: no-repeat;
background-position: top left;
border-bottom: 2px solid #000000;
}

.sidebox {      
float: left;
width: 200px;
overflow: hidden;
border: 0;
margin: 12px 0 0 8px;
background-color: #ffffcc; /*-- Same as container */
}

.sidebox  a{ /*-- This targets all the menu links */
	display: block;
	border-radius: 25px;
	background-color: #f1dab3;
	float: left;
	width: 90px;
	padding: 6px;
	margin: 6px;
	border: 0;
	text-align: center;
	text-decoration: none;
}


.mainbox {
float: right;
width: 720px;
overflow: hidden;
padding-left: 10px;
background-color: #ffffcc;
}

.upperbox {
float: left;
width: 670px;
overflow: hidden;
background-color: #ffffcc;  /*-- same as mainbox */
color: #990000;  /*-- russet font*/
}


.leftbox {      
float: left;
width: 325px;
height: 300px;  /*-- Remove height later */
overflow: hidden;
margin: 12px 0 0 8px;
padding: 6px;
border: 5px solid #000099;
color: #000099;
}

.rightbox {      
float: right;
width: 325px;
height: 300px;  /*-- Remove height later */
overflow: hidden;
margin: 12px 0 0 8px;
padding: 6px;
border: 5px solid #004d13;
color: #004d13;
}


.footer {
clear: both;
overflow: hidden;
border-top: 1px solid #000000;
background-color: #f1dab3;
}


/******************* Design stuff *****************/
.header h1 { 
color: #eff5f1; 
font-weight: 700;
margin: 0 0 0 48px; 
}

.bulletlist {
list-style-type: square;
line-height: 100%;
}	

.highlight {
background-color: #ffd24d;
font-weight: 700;
}

.captions {
	float: left;
	min-height: 270px;
	border: 1px solid #000099;
	padding: 6px;
	margin: .5em 2em .5em 0;
}

.captions img {
	padding: 4px;
}

.captions p {
	width: 270px;
	margin: 0;
	color: #990000;
	text-align: center;
}


/****** Simple floats ******/
.floatleft { float: left; }
.floatright { float: right; }

/****** Floats for images in the text-flow (not in <p> tags) ******/
.imageright {
float: right;
clear: right;
margin: .5em 24px;
}

.imageleft {
float: left;
clear: left;
margin: .5em 24px;
}


/****** Miscellaneous bits and bobs ******/
.clearfloat { clear: both; }
.center { text-align: center; }