/* Datum UK CSS Document */
/* BDA May 2006          */


body {
	background-color:		#fff;
	background-image:		url(images/container_bg.gif);
	background-repeat:		repeat-y;
	background-position:	top left;
	font-size:				70%;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	margin:					0;
	padding:				0;
}

#page_container {
	margin:					0 0 0 138px;
	padding:				0;
}

/*ADDED AFTER FULL WIDTH MODIFICATIONS */
#content_wrapper {
	width:					600px;
}

/* news scroller properties ****************************************************** */
#top_scroller {
	height:					20px;
	background-color:		#ccc;
	margin:					0 0 0 -138px;
	padding:				0 5px;	

}
#top_scroller a {
	font-size:				90%;
	font-family:			"Courier New", Courier, mono;
	color:					#333;
	text-decoration:		none;
}
#top_scroller a:hover {
	text-decoration:		underline;
	color:					#cc0000;
}


/* into the menu area ************************************************************ */
#left_navigation {
	width:					138px;
	padding:				5px 0 5px 5px;
	margin:					0 0 0 -138px;
	float:					left;
}

* html #left_navigation {
	margin:					0 0 0 -70px;
}

#search_input {
	padding:				0;
	margin:					5px 0 5px 16px;
}
#search_input form {
	padding:				0;
	margin:					0;
}
#search_input input.off {
	width:					105px;
	border:					2px solid black;
	background-color:		#E5E5E5;
	font-size:				90%;
	padding:				2px;
	
	/* add the arrow as bg */
	background-image:		url(images/black-arrow-14x14.gif);
	background-position:	93px 2px;
	background-repeat:		no-repeat;
}
/* relates to js mouseover event; classname change */
#search_input input.on {
	width:					105px;
	border:					2px solid black;
	background-color:		#E5E5E5;
	font-size:				90%;
	padding:				2px;
	
	/* add the arrow as bg */
	background-image:		url(images/red-arrow-14x14.gif);
	background-position:	93px 2px;
	background-repeat:		no-repeat;
}





/* the main navigation menu  ****************************************************  */
#menu_container {
	padding:				0;
	margin:					5px 0 5px 16px;
}

/* main menu li items */
#menu_container ul.main {
	padding:			0 0 3px 0;
	margin:				0;
	border-left:		2px solid #151515;
	
	/* typography */
	font-size:			90%;
	
	/* bottom 'border' of menu  */
	background-image:	url(images/menu_grad_foot_110x4.gif);
	background-repeat:	no-repeat;
	background-position:	bottom left;
}
#menu_container ul.main li {
	list-style:		none;
	padding:		0;
	margin:			0;
	
	/* gradient 'border'  */
	background-image:		url(images/menu_grad_top_110x25.gif);
	background-repeat:		no-repeat;
	background-position:	top left;
}
#menu_container ul.main li a {
	display:			block;
	text-decoration:	none;
	color:				#000000;
	padding:			4px 0 3px 18px;
	margin:				0;
}
#menu_container ul.main li a:hover {
	display:			block;
	text-decoration:	none;
	color:				#cc0000;
	padding:			4px 0 3px 18px;
	margin:				0;

	background-image:		url(images/red-arrow-14x14.gif);
	background-repeat:		no-repeat;
	background-position:	2px 4px;
}
#menu_container ul.main li.current a {
	font-weight:			bold;
}


/* keep it clean ... ahem, Win IE "workaround" for its maverick ways  */
* html #menu_container ul.main li a, * html #menu_container ul.main li a:hover {
	height:				15px;
}

/* and the submenu beneath main menu   */
#menu_container ul.main li ul.submenu {
	padding:			0 0 0 0;
	margin:				0;
}

#menu_container ul.main li ul.submenu li {
	padding:			0 0 0 7px;
	margin:				0;

	/* force disinheritance ... */
	background-image:	url();
}
#menu_container ul.main li.current ul.submenu li a {
	color:				black;
	font-weight:		normal;
}
#menu_container ul.main li.current ul.submenu li a:hover {
	color:				#cc0000;
}
#menu_container ul.main li.current ul.submenu li.subcurrent a {
	color:				#cc0000;
	font-weight:		bold;
}
#menu_container ul.main li.current ul.submenu li.subcurrent a:hover {
	color:				#cc0000;
}



/* pther content that is put in the left hand bar ******* */
div.left_column_content {
	padding:				0;
	margin:					10px 0 5px 16px;
	font-size:				90%;
}
div.left_column_content a {
	text-decoration:		none;
	color:					#333;
}
div.left_column_content a:hover {
	border-bottom:			2px solid #cc0000;
	color:					#cc0000;
}

/* main body cotnent area ******************************************************* */
#body_content {
	margin:					0 0 0 0px;
	padding:				0 5px 0 24px;

}
/* try to align things in Win IE  */
* html #body_content {
	padding:				0 5px 0 21px;
}
#top_movie {
	height:					100px;
	padding:				0;
	margin:					0 0 0 17px;
	background-image:		url(images/bg.gif);
	background-repeat:		repeat-x;
	background-position:	bottom left;
}

#bottom_movie {
	float:right;
}

/* breadcrumbs -- will need an extra property for variable bottom margin *** */
#crumb_trail {
	margin:					10px 0 3px 0;
	padding:				0;

	/* typography */
	font-size:				95%;
	font-family:			Arial, Helvetica, sans-serif;
}
#crumb_trail a {
	color:					#444;
	text-decoration:		none;
}
#crumb_trail a:hover {
	color:					#cc0000;
	text-decoration:		underline;
}



#page_title {
	border-bottom:			1px solid #ccc;
	margin:					10px 14px 10px 0;
}
#page_title h2 {

	font-size:				120%;
	color:					#003399;
	padding:				0;
	margin:					0 0 4px 0;
}


/* mainly a wrapper element to enclose content-specific styles */
#content_format {
		margin:				10px 20px 10px 2px;
}
#content_format ul {
		margin:				5px 10px 5px 20px;
}
#content_format ul li {
	list-style-type:		square;
	padding:				4px 0 2px 3px;
}


#content_format p {
		padding:			0;
		margin:				10px 20px 5px 0;
		line-height:		120%;
		font-size:			95%;
}

/* to style the horizontal lists on specific section pages */
#horiz_section {
		padding:				5px 20px 15px 0;
		width:					560px;
}
#horiz_section ul, #horiz_section li {
		display: 				inline;
		margin: 				5px 12px 2px 0;
		padding: 				0;
}

#horiz_section li a {
		margin: 				0;
		padding: 				4px 0 3px 18px;
		font-weight:			bold;
		color:					#333;
		text-decoration:		none;
}

#horiz_section li a:hover {
		color:					#cc0000;
		
		background-image:		url(images/red-arrow-14x14.gif);
		background-position:	2px 5px;
		background-repeat:		no-repeat;



}


/* class to score a smart hr */
div.hr {
	border-bottom:			1px solid #ccc;
	margin:					15px 14px 0 0;
}



/* special classes to construct the shadow frame around images   ************************ */
div.img_frm_container{
			margin:		5px 3px 20px 0;
			padding:	0;
}
div.img_frm_container img {
	border:					0;
	padding:				0;
	margin:					0;
}
* html div.img_frm_container img {
	margin:					-1px;
}


div.img_frm_top_left {
	background-image:		url(images/frame/top_left.gif);
	background-position: 	top left;
	background-repeat:		no-repeat;
	padding:				6px 1px 1px 6px;
	margin:					0;

}

div.img_frm_top_right {
	background-image:		url(images/frame/top_right.gif);
	background-position:	top right;
	width:					6px;
	background-repeat:		no-repeat;
	float:					right;
	padding:				0;
	margin:					0;

}
div.img_frm_bottom {
	height:					10px;
	padding:				0;
	margin:					0;
	background-dcolor:		blue;
}
div.img_frm_bottom_right {
	background-image:		url(images/frame/bottom_right.gif);
	background-position:	bottom right;
	width:					6px;
	background-repeat:		no-repeat;
	float:					right;
	padding:				0;
	margin:					0;
	height:					10px;
}

div.img_frm_bottom_left {
	background-image:		url(images/frame/bottom_left.gif);
	background-position:	bottom left;
	background-repeat:		no-repeat;
	padding:				0;
	margin:					0;
	height:					10px;
}

/* and the obligatory strait jacket to restrain Win IE   *** */
* html div.img_frm_top_left {
	margin:					0 0 -3px 0;
}
* html div.img_frm_bottom_right {
	width:					10px;
	margin:					-3px 0 -1px -3px;
	height:					9px;
}
* html div.img_frm_bottom_left {
	margin:					-3px -3px 1px 0;
	height:					9px;
}
* html div.img_frm_container img {
	margin:					-1px;
}



/* some style to control the gallery pages   ************************************** */
#gallery_container {
		clear:			all;

}

#gallery_column {
		width:					300px;
}
#gallery_screen {
		margin:					5px 0;
		padding:				0;
		width:					300px;
		height:					227px;
		border:					0;
}
#gallery_controls {
		margin:					10px 4px 0 0;
		padding:				3px;
		height:					30px;
}


#gallery_navigation {
		float:				right;
		width:				85px;

		margin:				0;
		padding:			0;
		height:				25px;
}
#gallery_text {
		padding:			0;
		margin:				10px 15px 10px 0;
		line-height:		110%;
		width:				270px;
		
		float:				right;		
		
}
#gallery_text h3 {
		margin:				0 0 10px 0;
		padding:			0;
		
		font-size:			100%;
		color:				#003399;
}
#enlarge_link a {
		text-decoration:	none;
		color:				#444;
}
#enlarge_link a:hover {
		text-decoration:	underline;
}
#enlarge_link img {
		border:				0;
		margin:				0;
		padding:			0;
}
#float_square_gallery {
		float:				right;
		margin:				0 0 10px 10px;
		width:				330px;
}

/* stylings for the lightbox functions ******************************************** */

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

/* contact form styles and such ********************************************************* */
#contact_wrapper {
	margin:				5px 15px 5px 0;

}
#contact_wrapper label {
	font-weight:		bold;
}


#contact_wrapper input, #contact_wrapper textarea {
		border:				1px solid #999;
		background-color:	#E5E5E5;
		
		padding:			1px;
		margin:				5px;
}

#contact_map_wrap {
		margin:				20px 0 0 0;
}

#contact_map {
	float:				right;
	width:				300px;
}
#contact_map a {
	text-decoration:		none;
	font-weight:			bold;
	color:					#333;
}
#contact_map a:hover {
	border-bottom:			2px solid #333;
}

#contact_wrapper #cf_submit {
		border:			2px solid #333;
		background-color:	#E5E5E5;
		width:				100px;
		
		background-image: 		url(images/red-arrow-14x14.gif);
		background-position:	80px 3px;
		background-repeat:		no-repeat;
	
}


/*  news styles ******* **** */

div.news_folder {
		border-bottom:			1px dotted #ccc;
		margin:					10px 14px 2px 0px;
		padding:				0 0 10px 0;
}
div.news_folder h3 {
		font-size:		12px;
		color:			#003399;
		letter-spacing:	3px;
		margin:			5px 0 0 0;
		padding:		0;

}

div.news_folder p.news_post {
		margin:			2px 0 3px 10px;
		padding:		0;
		font-size:		10px;
}


p.news_abstract {
	padding:			0 0 0 30px;
	margin:				2px 0 1px 10px;
	line-height:		110%;
	color:				#333333;
	border-left:		10px solid #ddd;
	padding-left:		15px;
	
	font-size:			12px;
}

p.news_teaser {
	padding:			0;
	margin:				2px 0 1px 10px;
	font-size:			10px;
	
}

p.news_teaser a {
	text-decoration:		none;
	color:					#cc0000;
}

p.news_teaser a:hover {
	border-bottom:		2px solid #cc0000;
}

.search_result {
	border-bottom:		1px dotted #ccc;
	margin:				2px 14px 3px 0;
	padding:			3px;
}
.search_result a {
	text-decoration:	none;
	color:				#cc0000;
}
.search_result a:hover {
	border-bottom:		2px solid #cc0000;
}


/* attachemnts in their floated boxes  *** */
.attachment-box-wrapper {
	float:				right;
	clear:				right;
	width:				150px;
}

.attachment-box-header {
	background-color:	#666666;
	color:				#fff;
	font-weight:		bold;
	padding:			2px;
	margin:				0 0 0 20px;
}
.attachment-box-header h4 {
	margin:				0;
	padding:			0;
}
.attachment-box {
	border:				2px solid #666;
	padding:			3px;
	margin:				0 0 0 20px;
}



/*  footer begins ***************************************************************** */
#footer {
	clear:					both;
	height:					20px;
	padding:				6px 0 2px 16px;
	margin:					0 5px;
	
	color:					#000;
	font-size:				90%;
}

#footer a {
	color:					#003399;
	text-decoration:		none;
}
#footer a:hover {
	text-decoration:		underline;
}
#footer_faded {
		float:				right;
		color:				#003399;
		margin:				0 30px 0 0;
}