/* stevecantwell.co.uk index style sheet */
/* used in the following pages of stevecantwell.co.uk:
index; blog; faq; learning; links; pictures; site_map; videos
*/
/* Main difference is that the ID "column" here stretches the whole way along main frame.
It has ID "quote" replacing ID "arearight" (on stylesheet and source) to place the quotation at bottom left.
*/

body {
	background-color: #cceeff;
	font-family: "Times New Roman", Times, serif;
}

/* Main picture.  Could alternatively be placed as background picture of body */
#box {
	position:absolute;
	left: 0px;
	top: 0px;
	background-image: url(images/main_image.jpg);
	background-repeat: no-repeat;
	width: 1780px;
	height: 1313px;
	z-index: 4;
}
#header {
	position:absolute;
	width:867px;
	height:198px;
	background-image: url(images/bannerphoto.jpg);
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 5px;
	top: 22px;
	left: 38px;
}
#navbar {
	position: absolute;
	left: 38px;
	top:221px;
	width: 870px;
	height: 43px;
	background-image: url(images/navbar.jpg);
	background-repeat: no-repeat;
	z-index: 20;
}


/* Main area for text, quotes and pictures */
#mainarea {
	position:absolute;
	left:38px;
	top:254px;
	height: 489px;
	width: 868px;
	
}
	
h1 {
	font: Tahoma, Geneva, sans-serif;
	font-size: 28px;
	color: #FFF;
	text-align:center;
	text-decoration:none;
	margin-top: .4em;
	line-height: .5em;
}
h1 a {
	color:#FFF;
}

.contact {
	margin-left: 6px;
	background-color: #666;
	font-size: x-large;
	line-height: 1.2;
	text-align: center;
	color: white;
	width: 867px;
}

h2 {
	font:Tahoma, Geneva, sans-serif;
	font-size:16px;
	color:#CCC;
	text-align:center;
	text-decoration:none;
	line-height:.8em;
	margin-top: -.6em;
}

/* Main column for text */
#column {
	background-color: #000;
	width: 830px;
	height: auto;
	max-height: 320px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px;
	padding-top: 0px;
	line-height: 150%;
	overflow: auto;
	float: left;
	color: #CCC;
}
#column p {
	font-family: "Times New Roman", Times, serif;
	font-size: larger;
	color: #CCC;
	line-height: 150%;
}
#column a {
	color: #FFF;
	text-decoration: underline;
}


#quote {
	position: absolute;
	bottom: 0px;
	left: 20px;
	font-size: xx-large;
	color:#C00;
	font-style:italic;
	text-indent: 0px;
	margin-top: 0px;
	margin-left: 0px;
}


/* text and links columns underneath main picture */
#extracolumn {
	position: absolute;
	left: 50px;
	top: 1200px;
	background-color: #666;
	width: 400px;
	height: auto;
	max-height: 1000px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px;
	padding-top: 0px;
	line-height: 150%;
	overflow: auto;
	float: left;
	border: thick ridge #C90;
}
#linkscolumn {
	position: absolute;
	left: 500px;
	top: 1200px;
	background-color: #666;
	width: 400px;
	height: auto;
	max-height: 1000px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 10px;
	padding-top: 0px;
	line-height: 150%;
	overflow: auto;
	float: left;
	border: thick ridge #C90;
}
ul.extralinks li {
	
}


/* Navigation links right at bottom of page */
#bottomnavigation {
	position: absolute;
	bottom:0;
	left:0;
	width: 1400px;
}
.bottomnavigation {
	position: absolute;
	top: 2000px;
	font:"Times New Roman", Times, serif;
	font-size:small;
	color: #000;
	list-style-type: square;
}
	
ul.bottomnavigation li {
	float:left;
	width:10em;
}