/*

	Cape Breton Regional Library
	Website Layout Redesign - Summer 2006

	- Design - Markup - Styling - JavaScript - Initial Image Editing - Bizarre Code Hacks

	By Jamie MacKinon

*/

/*
*******************************************************************	

	This is the unclassed, base element stylings.
	Unless altered for a specific page or section, these styles will be universal site wide.

*******************************************************************
*/



body {
	margin: 0 auto 0 auto;
	padding: 0;
	font: 70% Verdana, Sans-serif;
	background: #FFF url('../layout_images/pagebg.png') top left repeat-x;
	color: #333;
}

a:link {
	color: #0033CC;
}

a:hover {
	text-decoration: none;
}

#content a:hover {
	background: #DFEFFF;
	color: #09439F;
}

p {
	line-height: 18px;
	margin: 0 0 10px 0;
	
}

hr {
	height: 1px;
	color: #9CF;
	background-color: #9CF;
	border: 0;
	margin: 15px 0 10px 0;
//	margin: 0 0 5px 0;
}

pre {
	font-size: 9pt;
}

/*
*******************************************************************	

	This is the style for the container element which allows the page to be centered.

*******************************************************************	
*/


#holder {
	margin: auto;
	width: 800px;

}


/*
*******************************************************************	

	These are the styles for the header of the page.
	Logo, main title, image banner, and the top-only styles of the mininav

*******************************************************************
*/


#header {
	float: left;
	width: 800px;
	margin: 30px 0 0 0;
}


#header .title_link {
	text-decoration: none;
	color: #111;
}

#header h1 span {
	font-size: 85%;
	display: block;
	text-align: center;
}

#header h1 {
	font: bold 175% 'Trebuchet MS', Sans-serif;
	text-transform: uppercase;
	width: 225px;
	float: left;
	margin: 20px 0 10px 0;
	color: #111;
}

#header .banner {
	border-top: 1px solid #9CF;
	border-bottom: 1px solid #9CF;
	width: 780px;
	padding: 10px;
	margin: 0 0 -10px 0;
}

#header .logo {
	margin: 5px 10px 0 10px;
	padding: 0;
	float: left;
	border: none;
	width: 83px;
	width: 83px;
}

#header .mininav {
	margin: 66px 0 0 0;
}

#header .mininav a {
	padding: 7px 9px 5px 5px;
	border-bottom: 5px solid #DFEEFF;
}

#header .mininav li a:hover {
	border-bottom: 5px solid #9CF;
	background: #DFEEFF url('../layout_images/mininav-hover-bg-top.png') bottom left repeat-x;
}



/*
*******************************************************************	

	These styles define the look for the miniature navigation bar located
	at the top of the page (above the image banner) and at the bottom
	of the page (below the contact information).

	Both the top and bottom mininav have styles specific to their location (top or bottom). 
	These styles are grouped in the appropriate section (header or footer).

	
*******************************************************************
*/


.mininav {
	float: right;
	padding: 0 0 0 0px;
	list-style-type: none;
}

.mininav li {
	float: left;
	border-right: 1px solid #9CF;
}

.mininav li a {
	display: block;
	font-weight: bold;
	
}


.mininav li.last {
	border-right: none;
}

.mininav li a:hover {
	text-decoration: none;
}



/*
*******************************************************************	

	This is the CSS for the main content area (not the sidebar).
	For the most part, only a few general styles will be defined here,
	because each seperate section or page which requires elements to be custom
	styled will have its own unique stylesheet.
	
*******************************************************************
*/



#content {
	float: left;
	clear: right;
	width: 444px;
	margin-top: 5px;
}

#content h2 {
	font-weight: bold;
	font-size: 170%;
	margin: 10px 0 5px 0;
	color: #007BDF;
}



#content h3 {
	font-size: 110%;
	margin: 5px 0 5px 0;
	padding: 7px 0 7px 7px;
//	padding: 3px 0 7px 7px;
	color: #007BDF;
	clear: both;
	background: #FFF url('../layout_images/h3bg.png') top left repeat-y;
}



/*
*******************************************************************	

	These are the styles for the navigation sidebar located on the left hand side 
	of the site.
	
*******************************************************************
*/



#sidebar {
	border-right: 1px solid #9CF;
	padding: 0 0 40px 0;
	float: left;
	width: 220px;
	margin: 0 25px 0 0;
//	margin: -2px 25px 0 0;
}

#sidebar .mainnav {
	padding: 0;
	margin: 0 0 15px 0;
	list-style-type: none;
}

#sidebar .nav_header a {
	display: block;
	width: 205px;
	line-height: 28px;
	padding: 0 0 0 15px;
	font-weight: bold;
	background: #DDEFFF url('../layout_images/mininav-hover-bg-top.png') top left repeat-x;
	margin: 0;
	border-bottom: 1px solid #9CF;
	font-size: 105%;
}

#sidebar .nav_header a:hover {
	background-image: url('../layout_images/mainnav-hover.png');
	background-position:  top left;
	background-repeat:  repeat-x;
	text-decoration: none;
	color: #FFF;
}

#sidebar .mainnav .nav_header .link_on {
	background: #5FB7FF;
	color: #FFF !important;
}

#sidebar .mainnav .nav_header .link_on:hover {
	background: #5FB7FF;
}


#sidebar .mainnav .subnav {
	margin: 0;
	padding: 0 0 20px 30px;
	width: 190px;
	background: #FFF url('../layout_images/navbg.png') top left repeat-x;
	border-bottom: 1px solid #9CF;
}

#sidebar .mainnav .subnav .subtitle {
	margin: 0 0 0 -15px;
	padding: 10px 0 0 0;
	list-style-type: none;
}

#sidebar .subtitle strong {
	display: inline;
}

#sidebar .mainnav .subnav a {
	display: block;
	width: 175px;
	padding: 8px 15px 0 0;
	line-height: 15px;
	margin: 0;
	font-weight: normal;
	background: none;
	color: #03C;
	font-size: 100%;
	border-bottom: none;
}

#sidebar .mainnav .subnav a:hover {
	background-image: url('../layout_images/blank.gif');
	text-decoration: none;
	color: #03C;
}

#sidebar hr {
	margin: 15px 0 10px 0;
//	margin: -8px 0 0 0;
}

#sidebar .useful {
	margin: 0;
	padding: 3px 0 0 20px;
	line-height: 20px;
}


/*
*******************************************************************	

	This is the CSS for the footer of the site. 
	Included is the CSS code for the bottom specific elements of the mininav 
	located at the bottom of the page.
	
*******************************************************************
*/



#footer {
	width: 770px;
	clear: both;
	float: left;

}

#footer .info {
	width: 100%;
	float: left;
	margin: 20px 0 0 0;
	padding: 10px 15px 10px 15px;
	background: #DDEFFF url('../layout_images/searchbg.png') top left repeat-x;
	border-top: 1px solid #9CF;
	border-bottom: 1px solid #9CF;
}

#footer p {
	float: left;
	margin: 0;
	line-height: 18px;
	width: 300px;
}

#footer p1 {
	float: right;
	margin: 0;
	line-height: 18px;
	width: 170px;
	
}

#footer .mininav {
	margin: 0 -30px 32px 0;
}

#footer .mininav a {
	padding: 5px 15px 8px 15px;
	border-top: 5px solid #DFEEFF;
}

#footer .mininav li a:hover {
	border-top: 5px solid #9CF;
	background: #DFEEFF url('../layout_images/mininav-hover-bg.png') top left repeat-x;
}

@media print {
		#header .banner, .mininav, #sidebar, .useful,  .mainnav, .quick_search {
		display: none;
	}

	#content {
		float: left;
		width: 600px;
		border-top: 2px solid #000;
		padding: 10px 0 0 0;
		margin: 10px 0 0 0;
	}

	#sidebar {
		width: 0;
		border: none;
		margin: 0 5px 0 0;
		padding: 0;
	}

	h1, a:link, a:visited, h2 {
		color: #000;
	}

	hr {
		color: #000;
	}

	#footer .info {
		padding: 15px 0 0 0;
		border: none;
		border-top: 2px solid #000;
		width: 600px;	
	}


}