/* altered as similar and/or better code is present below and some preset styles were conflicting with page layout */
@import url(blocks/sake.css);

/* CANGC stylesheet */

/* ============== PAGE STYLES ============== */
#container {
	position: relative;
	width: 975px;
	margin: 0 auto;
	background: #FFFFFF;
	text-align: center;
}
#header {
	position: relative;
	padding: 10px 20px 0;
	overflow: visible;
	z-index: 999;
}

	#header a {
		text-decoration: none;
		font-weight: bold;
	}

	#header #logo {
		width: 214px;
		height: 130px;
		background: url(image/logo.png) no-repeat left top;
		position: absolute;
		top: 0;
		left: 10px;
	}
	#logo a {
		display: block;
		width: 214px;
		height: 130px;
		text-indent: -900em;
	}
	
	#socialweb { }
	
		#socialweb li {
			float: right;
			display: block;
			height: 22px;
			text-indent: -900em;
		}
		#socialweb li.twitter {
			background: url(image/social_sprites.gif) no-repeat 35% top;
			width: 17px;
			padding: 0 0.5em;
		}
		#socialweb li.fb {
			background: url(image/social_sprites.gif) no-repeat left top;
			width: 32px;
		}
		#socialweb li.youtube {
			background: url(image/social_sprites.gif) no-repeat right top;
			width: 51px;
		}
		#socialweb a {	
			display: block;
			text-indent: -900em;
			overflow: hidden;
		}
	
	#topnavbox {
		margin: 0 0 0 224px;
		padding: 1em 0 0.6em;
		text-align: center;
		position: relative;
		clear: both;
	}
	#topnav {
		display: block;
		position: relative;
	}
		
		#topnav a,
		#topnav h3 {
			display: block;
			color: #666;
			font-size: 82%;
			margin: 0;
			padding-bottom: 0.1em;
		}
		#topnav a:hover, 
		#topnav a:focus,
		#topnav h3:hover,
		#topnav h3:focus {
			color: #006600;
		}
		#topnav li {
			float: left;
			display: block;
			position: relative;
			padding: 0 0.6em;
			border-right: 2px solid #d84242;
		}
		#topnav li:first-child {
			padding-left: 0;
		}
		#topnav li:last-child {
			border: none;			
		}
		/* hide in IE, which doesn't properly render the style reset in borders */
		#topnav li.last {
			border-color: #FFF;
		}
		/* start styling the dropdown menus */
		#topnav li ul {
			display: block;
			visibility: hidden;
			/* width: inherit; */
			/* explicit width is needed to accommodate the links below */
			position: absolute;
			top: 0.1em;
			left: 0;
			margin: 0.8em 0 0 0;
			padding: 0 0.6em 0.4em;
			background: #EEE;
			border-top: 0.4em solid #007ab9;
			-moz-border-radius-bottomleft: 5px;
			-moz-border-radius-bottomright: 5px;
			-webkit-border-bottom-left-radius: 5px;
			-webkit-border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
		}
		/* Round off the overlapping top right corner on the last dropdown */
		#topnav li:last-child ul {
			-moz-border-radius-topright: 5px;
			-webkit-border-top-right-radius: 5px;
			border-bottom-top-radius: 5px;
		}
		#topnav li:hover ul, #topnav li:focus ul {
			visibility: visible;
		}
		#topnav li ul li {
			/* explicit width is set here */
			width: 11em;
			text-align: left;
			display: block;
			float: left;
			clear: left;
			margin: 0;
			padding: 0;
			border: none;
		}
		#topnav ul li a {
			padding: 0.3em 0;			
		}
		#topnav ul li:first-child a {
			padding: 0.4em 0 0.3em;
		}
		#topnav li ul a:hover, #topnav li ul a:focus {
			text-decoration: underline;
		}

	#headerBanner, #headerBorder {
		width: 975px;
		margin: 0 0 0 -20px;
		background: #007ab9;
	}
	#headerBanner {
		height: 185px;
		padding: 10px 0;
	}

#content {
	position: relative;
	min-height: 39em;
	padding: 20px 20px 0 240px;
	text-align: left;
	background: #FFF url(image/content.png) no-repeat left bottom;
	color: #000;
}
	#content h2 {
		font-size: 110%;
		color: #000;
		padding: 0.1em 0 0.3em;
	}
	#content h3 {
		font-size: 90%;
		color: #336600;
		padding: 0.1em 0 0.3em;
	}
	#content p {
		font-size: 80%;
		color: #000;
		padding: 0.1em 0 0.3em;
	}
	#content li {
		font-size: 80%;
	}
		#content #leftNav li,
		#content #rightPane li {
			font-size: 100%;
		}
	
	#center {
		width: 495;
		/*margin-right: 240px;*/
		padding-right: 20px;
		overflow: hidden;
	}
		#centerPane {
			position: relative;
			margin-bottom: 40px;
			padding-top: 10px;
			width: inherit;
		}
		
		#content div.centerBlock {
			position: relative;
			margin-bottom: 1em;
			clear: left;
			width: inherit;
		}	
			#content div.centerBlock h2, #content div.centerBlock h3 {
				color: #006699;
			}
			#content div.centerBlock h2 {
				padding: 5px;
			}
			#content div.centerBlock .picFrame {
				position: relative;
				float: left;
				display: block;
				height: 113px;
				width: 164px;
				margin: 0;
				padding: 6px 6px 7px;
				background: transparent url(image/pictureframe.png) no-repeat left top;
				overflow: hidden;
			}
			#content div.centerBlock .blockContent {
				margin-left: 184px;
			}
			#content div.centerBlock p {
				font-size: 0.8em;
				width: 310px;
				word-wrap: break-word;
				text-overflow: ellipsis;
			}
			#content div.centerBlock a.readMore {
				display: block;
				position: relative;
				float: left;
				margin-top: 10px;
				width: 57px;
				height: 14px;
				overflow: hidden;
				text-indent: -900em;
				background: transparent url(image/readLink.png) no-repeat center top;
				color: #FFF;
				font-size: 70%;
			}
			#content div.centerBlock a.readMore:hover, #content div.centerBlock a.readMore:focus {
				background: transparent url(image/readLink.png) no-repeat center bottom;
			}
	
	#rightPane {
		position: relative;
		width: 200px;
		padding: 10px 0 10px 0;
		float: right;
	}
		#rightPane div.rightBlock {
			position: relative;
			margin-bottom: 10px;
		}
			#rightPane h3 {
				color: #CF1111;
				width: 180px;
				padding: 0 10px;
				margin: 0;
				font-size: 100%;
				line-height: 40px;
				text-align: left;
				background: transparent url(image/rightBlock.png) no-repeat center top;
				overflow: hidden;
			}
			#rightPane div.rightContent {
				width: 180px;
				padding: 0 10px;
				background: transparent url(image/rightBlock.png) no-repeat center bottom;
				overflow: hidden;
				text-align: center;
			}
				#rightPane div.rightDetails {
					width: 180px;
					padding: 15px 0 12px;
				}
					#rightPane div.rightDetails p {
						/*float: left;
						clear: left;*/
					}
					#rightPane div.rightDetails a.details {
						display: block;
						float: right;
						width: 40px;
						height: 14px;
						padding: 0;
						overflow: hidden;
						background: #C00 url(image/detailsLink.png) no-repeat top right;
						text-indent: -900em;
						color: #FFF;
						font-size: 70%;
						text-decoration: none;
					}
					#rightPane div.rightDetails a.details:hover, #rightPane div.rightDetails a.details:focus {
						background: #C00 url(image/detailsLink.png) no-repeat bottom right;
					}
					#rightPane div.events div.rightDetails {
						padding: 0 0 12px;
					}
					#rightPane div.events div.rightDetails h4 {
						/*float: left;*/
						color: #000;
						font-size: 80%;
					}
					#rightPane div.events a.moreEvents {
						position: absolute;
						top: 13px;
						right: 10px;
						color: #CF1111;
						font-size: 80%;
						text-decoration: underline;
					}
					#rightPane div.events div.rightDetails li {
						clear: both;
						text-align: left;
						margin: 0;
						padding: 5px 0;
						border-top: 2px solid #d6d6d6;
					}
					#rightPane div.events div.rightDetails li:first-child {
						border-color: #FFF;
					}
	
	#leftNav {
		display: block;
		width: 200px;
		margin: 0;
		padding: 0 0 10px;
		position: absolute;
		top: -70px;
		left: 20px;
		z-index: 9999;
		background: url(image/sideNavTop.png) no-repeat center top;
	}
		#leftNav li {
			display: block;
			background: transparent url(image/navSpacer.png) no-repeat left top;
			width: 170px;
			padding: 0.4em 15px;
			/* line-height: 1.3em; */
		}
		#leftNav li:first-child {
			padding-top: 10px;
			background: none;
		}
		#leftNav a {
			text-decoration: none;
			font-size: 80%;			
			font-weight: bold;
			color: #336600;
			line-height: 1em;
		}
		#leftNav a:hover, #leftNav a:focus {
			color: #007ab9;
		}
		#leftNav li.logo {
			text-align: center;
		}
		#leftNav #logo {
			margin: 0 auto;
			padding: 0;
			width: 118px;
			height: 114px;
			background: transparent url(image/sideLogo.png) no-repeat left top;
		}
		#leftNav #logo a {
			display: block;
			width: 118px;
			height: 100%;
			text-indent: -900em;
		}
	

#footer {
	position: relative;
	border-top: 10px solid #007ab9;
	padding: 10px 20px;
	color: #333;
	font-size: 80%;
}
	#footer a {
		color: #333;
		text-decoration: underline;
	}
	#footer a:hover,
	#footer a:focus {
		text-decoration: none;
	}
	#footer li {
		float: left;
		border-right: 1px solid #333;
		padding: 0 0.6em;
	}
	#footer li:first-child {
		padding-left: 0;
	}
	#footer li:last-child {
		border: none;
	}
	/* hide in IE, which doesn't properly render the change in borders */
	#footer li.last {
		border-color: #FFF;
	}