/* HTML Elements */
*{
	padding:						0px;
	margin:							0px;
}
body{
	background-color:				#FFFFFF;
	font-family:					Verdana,Arial,Tahoma,Helvetica,sans-serif;
	font-size: 						12px;
	color:							#336699;
	scrollbar-face-color: 			#336699; 
	scrollbar-highlight-color: 		#4488BB; 
	scrollbar-3dlight-color: 		#55AADD; 
	scrollbar-shadow-color: 		#224477; 
	scrollbar-arrow-color: 			#FFFFFF; 
	scrollbar-track-color: 			#F1F1F8; 
	scrollbar-darkshadow-color: 	#000000; 
}
p{
	margin:							10px 0px 10px 0px;
}
img{
	margin:							5px 5px 5px 5px;
}

div.caption-container {
	background-color: 				#e2e5f2;
	border: 						1px solid #336699;
	/*width: 							260px;*/
	padding: 						10px;
	margin:							10px;
	text-align:						center;
}
div.caption-container#left {
	float: 							left;
}
div.caption-container#right {
	float: 							right;
}
div.caption-container img {
	padding: 						0px;
	margin: 						0px 0px 3px 0px;
	/*border: 						none;*/
	border: 						1px solid #336699;
}
div.caption-container .caption {
	font-size: 						11px;
	color:							#336699;
	width: 							250px;
}

div.content a{
	color: 							#336699;
	border: 						none;
	text-decoration: 				none;
	font-weight:					bold;
}
div.content a:hover {
	color: 							#55AADD;
	border: 						none;
	text-decoration: 				none;
	font-weight:					bold;
}

/* Defined Objects */
/* top header */
div.header{
	height:							30px;
	line-height:					30px;
	margin:							0px 40px 0px 40px;
	background-image:				url(../img/header-main.gif);
	background-repeat:			    repeat-x;
	background-color:				#336699;
	position:						relative;
}
div.header h1{
	margin:							0px 0px 0px 10px;
	font-size:						18px;
	font-weight:					bold;
	color:							#FFFFFF;
	line-height:					30px;
}
div.header h1 a {
	text-decoration:				none;
	color:							#FFFFFF;
}
div.header div.start {
	float: 							left;
	width:							10px;
	height:							30px;
	background-image:				url(../img/header-left.gif);
	background-repeat:				no-repeat;
}
div.header div.end{
	float:							right;
	background-image:				url(../img/header-right.gif);
	background-position:			right;
	background-repeat:				no-repeat;
	display:						block;
	height:							30px;
	padding:						0px 10px 0px 0px;
	color:							#FFFFFF;
	font-size:						14px;
	position:						absolute;
	top:							0px;
	right:							-1px;
}
div.header div.end a{
	color:							#FFFFFF;
	font-size:						12px;
	font-weight:					bold;
	text-decoration:				none;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
}
div.header div.end .bullet{
	color:							#FFFFFF;
	font-size:						12px;
	font-weight:					bold;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
	padding:						0px 5px 0px 5px;
}
div.header div.end a:hover{
	background-image:				url(../img/header-focus.gif);
	background-repeat:				no-repeat;
}

/* secondary header */
div.subheader{
	height:							30px;
	line-height:					30px;
	margin:							0px 80px 0px 80px;
	background-image:				url(../img/subheader-bottom-main.gif);
	background-repeat:				repeat-x;
	background-color:				#99b2cc;
	position:						relative;
}
div.subheader h1{
	margin:							0px 0px 0px 10px;
	font-size:						16px;
	font-weight:					bold;
	color:							#336699;
	line-height:					30px;
}
div.subheader h1 a {
	color:							#336699;
	font-size:						16px;
	font-weight:					bold;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
	text-decoration: 				none;
}
div.subheader div.start {
	height:							30px;
	background-image:				url(../img/subheader-bottom-left.gif);
	background-repeat:				no-repeat;
	display:						block;
	float: 							left;
}
div.subheader div.start .bullet{
	color:							#336699;
	font-size:						16px;
	font-weight:					bold;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
	padding:						0px 5px 0px 5px;
}
div.subheader div.end{
	float:							right;
	background-image:				url(../img/subheader-bottom-right.gif);
	background-position:			right;
	background-repeat:				no-repeat;
	display:						block;
	height:							30px;
	padding:						0px 10px 0px 0px;
	color:							#336699;
	font-size:						14px;
	position:						absolute;
	top:							0px;
	right:							-1px;
}
div.subheader div.end a{
	color:							#336699;
	font-size:						12px;
	font-weight:					bold;
	text-decoration:				none;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
}
div.subheader div.end a:hover{
	background-image:				url(../img/subheader-bottom-focus.gif);
	background-repeat:				no-repeat;
}
div.subheader div.end .bullet{
	color:							#336699;
	font-size:						12px;
	font-weight:					bold;
	height:							30px;
	line-height:					30px;
	display:						block;
	float:							left;
	padding:						0px 5px 0px 5px;
}

/* stacked subheader */
div.subheader#inner{
	background-image:				url(../img/subheader-inner-main.gif);
}
div.subheader#inner div.start{
	background-image:				url(../img/subheader-inner-left.gif);
}
div.subheader#inner div.end{
	background-image:				url(../img/subheader-inner-right.gif);
}
div.subheader#inner div.end a:hover{
	background-image:				url(../img/subheader-inner-focus.gif);
}


/* side column */
div.box-col{
	display:						block;
	float:							right;
	width:							200px;
	margin:							0px 80px 0px 0px;
	overflow:						hidden;
}
div.box{
	width:							180px;
	padding:						10px 10px 0px 10px;
	margin:							0px 0px 20px 0px;
	background-image:				url(../img/column-inner.gif);
	background-repeat:				repeat-y;
	float:							none;
}
div.box .head{
	display:						block;
	height:							10px;
	width:							200px;
	margin:							-10px 0px 0px -10px;
	background-image:				url(../img/column-top.gif);
	background-repeat:				no-repeat;
}
div.box .base{
	display:						block;
	height:							20px;
	width:							200px;
	margin:							0px 0px 0px -10px;
	background-image:				url(../img/column-bottom.gif);
	background-repeat:				no-repeat;
}
div.box h3{
	font-size:						16px;
	font-weight:					bold;
	text-align: 					center;
}
div.box ul, div.box ul li{
	list-style: 					none;
	list-style-type: 				none;
	padding: 						5px 0px 0px 0px;
}
div.box ul.menu li a{
	font-weight:					bold;
	color:							#336699;
	text-decoration:				none;
	padding:						0px 0px 0px 10px;
}
div.box ul.menu li a:hover, div.box ul.menu li a.focus{
	color: 							#55AADD;
	background-image:				url(../img/hover.gif);
	background-repeat:				no-repeat;
}

/* side column thumbs are variable height, to use space more efficiently */
div.box span.thumb{
	display: 						block;
	width: 							180px;
	height:							105px;
	margin:							8px 0px 0px 0px;
	text-align:						center;
	font-size:						10px;
	/*border: 						1px solid #CCDDEE;*/
}
div.box span.thumb div.caption{
	margin: 						0px 4px 0px 4px;
}
div.box span.thumb a{
	font-weight:					bold;
	display:						block;
	text-decoration:				none;
	width: 							180px;
	height:							105px;
	padding: 						0; 
	margin: 						0;
	color:							#336699;
	float:							left;
}
div.box span.thumb a:hover{
	background-color:				#336699;
	color: 							#FFFFFF;
	background-image:				url(../img/thumb-corner.gif);
	background-repeat:				no-repeat;
}
div.box span.thumb a img{
/*	border:							1px solid #000; */
	border:							1px solid #336699;
	margin: 						12px 0px 2px 0px;
	width: 							70px;
	height: 						70px;
}
div.box span.thumb a:hover img{
	border:							1px solid #FFFFFF;
}
div.box span.thumb a.details{
	padding: 						0px;
	width: 							60px;
	height:							16px;
	margin:							-105px 60px 4px 60px;
	background-image:				url(../img/details.gif);
	background-repeat:				no-repeat;
}
div.box span.thumb a.details:hover{
	background-image:				url(../img/details-hover.gif);
	background-color:				transparent;
}


/* footer */
div.footer{
	background-image:				url(../img/section-top.gif);
	background-repeat:				repeat-x;
	margin: 						-10px 0px 0px 0px;
	padding:						0px 320px 25px 100px;
}

/* main content */
div.content{
	background-image:				url(../img/section-top.gif);
	background-repeat:				repeat-x;
	padding:						0px 320px 20px 100px;
	text-align:						justify;
}
div.content#fullwidth{
	padding:						0px 100px 20px 100px;
}

div.content a.details-example{
	display: 						block;
	width: 							60px;
	height: 						16px;
	background-image:				url(../img/details.gif);
	background-repeat:				no-repeat;
}
div.content a.details-example:hover{
	background-image:				url(../img/details-hover.gif);
	background-color:				transparent;
}

div.content div.thumb-box{
	border:							1px solid #336699;
	margin:							10px 10px 10px 10px;
	background-image:				url(../img/thumb-background.gif);
	padding:						5px 5px 5px 5px;
	text-align:						center;
	float:							left;
	display:						block;
}

/* content thumbs are fixed height, to keep rows looking neat */
div.content div.thumb-box span.thumb{
	width: 							100px;
	height:							120px;
	padding:						0px;
	margin: 						0px 4px 8px 4px;
	float: 							left;
	font-size:						10px;
	/*border: 						1px solid #CCDDEE;*/
}
div.content div.thumb-box span.thumb div.caption{
	margin: 						0px 4px 0px 4px;
}
div.content div.thumb-box span.thumb a{
	font-weight:					bold;
	padding: 						0; 
	margin: 						0;
	color:							#336699;
	text-align:						center;
	text-decoration:				none;
	vertical-align:					top;
	display:						block;
	width:							100px;
	height:							120px;
	float:							left;
}
div.content div.thumb-box span.thumb a:hover{
	background-color:				#336699;
	color: 							#FFFFFF;
	background-image:				url(../img/thumb-corner.gif);
	background-repeat:				no-repeat;
	margin: 						0;
}
div.content div.thumb-box span.thumb a img{
	margin: 						12px 0px 2px 0px;
/*	border:							1px solid #000; */
	border:							1px solid #336699;
	width: 							70px;
	height: 						70px;
}
div.content div.thumb-box span.thumb a:hover img{
	border:							1px solid #FFFFFF;
}
div.content div.thumb-box span.thumb a.details{
	width: 							60px;
	height: 						16px;
	margin: 						-120px 20px 0px 20px;
	background-image:				url(../img/details.gif);
	background-repeat:				no-repeat;
}
div.content div.thumb-box span.thumb a.details:hover{
	margin: 						-120px 20px 0px 20px;	/* IE doesn't like it if you omit this, for some reason */
	background-image:				url(../img/details-hover.gif);
	background-color:				transparent;
}

/* small thumbs, used for junk section; handy for when there's LOTS of thumbnails */
div.content div.thumb-box span.thumb#small{
	width: 							70px;
	height:							80px;
	margin: 						0px;
}
div.content div.thumb-box span.thumb#small a{
	width: 							70px;
	height: 						80px;
}
div.content div.thumb-box span.thumb#small a img{
	width: 							50px;
	height: 						50px;
}
div.content div.thumb-box span.thumb a.thumb{
	height:							80px;
}

div.content ul li{
	list-style-image: 				url(../img/bullet.gif);
	list-style-type: 				circle;
	margin:							5px 0px 5px 20px;
}
div.content ol li{
	margin:							5px 0px 5px 20px;
}

/* main heading */
div.content div.section-heading{
	display:						block;
	height:							30px;
	line-height:					30px;
	background-image:				url(../img/section-heading-inner.gif);
	background-repeat:				repeat-x;
	margin:							0px -20px 0px -20px;
	color:							#336699;
	padding:						0px 0px 10px 0px;
	font-size:						16px;
	font-weight:					bold;
}
div.content#fullwidth div.section-heading{
	margin:							0px -20px 0px -20px;
}
div.content div.section-heading div.start {
	float: 							left;
	width:							10px;
	height:							30px;
	background-image:				url(../img/section-heading-left.gif);
	background-repeat:				no-repeat;
}
div.content div.section-heading div.end{
	float:							right;
	width:							17px;
	height:							30px;
	background-image:				url(../img/section-heading-right.gif);
	background-repeat:				no-repeat;
}

/* subheading */
div.content div.section-subheading {
	padding: 						20px 0px 5px 0px;
	font-size:						14px;
	font-weight:					bold;
}

/* sub-heading for thumb box */
div.thumb-box div.heading{
	display:						block;
	height:							22px;
	line-height:					22px;
	background-image:				url(../img/thumbbox-heading-inner.gif);
	background-repeat:				repeat-x;
	margin:							0px 0px 10px -20px;
	color:							#336699;
	padding:						0px 0px 0px 0px;
	font-size:						14px;
	font-weight:					bold;
	text-align: 					right;
}
div.thumb-box div.heading div.start {
	float: 							left;
	width:							10px;
	height:							22px;
	background-image:				url(../img/thumbbox-heading-left.gif);
	background-repeat:				no-repeat;
}
div.thumb-box div.heading div.end{
	float:							right;
	width:							17px;
	height:							22px;
	background-image:				url(../img/thumbbox-heading-right.gif);
	background-repeat:				no-repeat;
}

/* welcome image */
img.welcome {
	margin: -72px -80px -30px 0px;
}

/* details page close-ups */
div.close-up {
	padding: 						5px;
	margin:							5px;
	text-align:						center;
}
div.close-up img {
	background-color: 				#ffffff;
	/*border: 						1px solid #a8bcd4;*/
	border: 						1px solid #000000;
}
div.close-up#left {
	float: left;
}
div.close-up#right {
	float: right;
}

/* quotations */
blockquote{
	background-color: 				#f1f1f8;
	border: 						1px solid #a8bcd4;
	padding: 						5px 15px 5px 15px;
	margin:							20px 20px 20px 20px;
	font-size: 						11px;
	text-align:						justify;
}

/* general */
.left{
	float:							left;
}
.right{
	float:							right;
}
.centre{
	text-align:						center;
}