/* -- ensure <h4> heading tags clear floats in the right column -- */
/* -- needed to clear the social networking buttons widget as it's all contained in a floated <ul> block -- */
#col3newsright h4 {
	clear: both;
}

/* -- left column categories and archive list --*/
#newscategorylist,
#eventcategorylist,
#archivelist {
	list-style: none;
	margin: 0;
	padding: 6px 0 25px;
}

#newscategorylist a,
#eventcategorylist a,
#archivelist a {
	color: #000;
	text-transform: uppercase;
}

#archivelist a {
	color: #777;
}

#newscategorylist a.active,
#eventcategorylist a.active,
#archivelist a.active {
	color: #e21f25;
}

/* -- right column news/event featured (the pick) -- */
#newseventfeatured {
	height: 1%; /* IE6/7 fix for floated child elements */
	height: 274px; /* setting an explicit height (all good since we have fixed image heights) to contain child floats - can't use overflow as child elements are absolute positioned and need to break out of the <ol> container */
	list-style: none;
	margin: 0;
	padding-top: 6px;
}

#newseventfeatured li {
	float: left;
	height: 80px;
	margin: 0;
	padding: 0 7px 7px 0;
	position: relative;
	width: 80px;
}

#newseventfeatured .end {
	padding-right: 0;
}

#newseventfeatured li img {
	display: block;
}

#newseventfeatured li a img {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 100; /* zone hotspot has higher z-index than the flyout hover node set */
}

/* -- news/event featured flyout hover styles -- */
#newseventfeatured li div {
	background-color: #000;
	height: 60px;
	left: -87px;
	padding: 10px;
	position: absolute;
	top: 0;
	width: 147px;
	z-index: 50; /* flyout hover node set has a lower z-index than the zone hotspot */
}

#newseventfeatured li div h5,
#newseventfeatured li div p {
	font-size: 0.9em;
	font-weight: bold;
	margin: 0;
	text-transform: uppercase;
}

#newseventfeatured li div h5 {
	color: #fff;
}

#newseventfeatured li div p {
	color: #e31e27;
}

/* -- right column upcoming events -- */
#upcomingevents {
	list-style: none;
	margin: 0;
	padding: 6px 0 16px;
}

#upcomingevents li {
	height: 1%; /* IE6 fix of <li> height */
	margin-bottom: 0.4em;
}

#upcomingevents a,
#upcomingevents span {
	color: #000;
	display: block;
	font-size: 0.9em;
	line-height: 1.4;
	text-transform: uppercase;
}

#upcomingevents span {
	color: #777;
	font-style: italic;
}

/* -- right column kiteboarding school promotion -- */
#kiteboardpromo {
	background: url(/img/dashline.png) repeat-x 0 100%;
	height: 1%; /* IE6 has layout fix to stop dashline re-rendering all over the template */
	margin: 0;
	padding: 6px 0;
}

#kiteboardpromo a {
	background: url(/img/kiteboardpromo.jpg) no-repeat 0 0;
	display: block;
	height: 175px;
	width: 254px;
}

/* -- right column social networking buttons -- */
#social {
	float: left; /* contain child floats */
	list-style: none;
	margin: 0;
	padding: 6px 0 20px;
	width: 100%;
}

#social li {
	margin: 0;
	overflow: hidden; /* contain child floats */
	padding: 2px 0;
}

#social a {
	background: url(/img/socialicon.png) no-repeat 0 50%;
	clear: left;
	color: #000;
	display: block;
	float: left;
	font-size: 0.9em;
	padding: 4px 0 4px 20px;
	text-transform: uppercase;
	white-space: nowrap;
}

#social .facebook:hover {
	background-position: -254px 50%;
}

#social .twitter {
	background-position: -508px 50%;
}

#social .twitter:hover {
	background-position: -762px 50%;
}

#social .delicious {
	background-position: -1016px 50%;
}

#social .delicious:hover {
	background-position: -1270px 50%;
}

/* -- middle column news and event items -- */
#col3newsmiddle .newsitem {
	padding-bottom: 28px;
}

#col3newsmiddle .newsitemtail {
	padding: 0;
}

#col3newsmiddle .newsitem .image {
	margin-bottom: 0.6em;
}

#col3newsmiddle .newsitem .imageposthead {
	padding-top: 28px;
}

#col3newsmiddle .newsitem .image img {
	display: block;
}

/* -- news and event item header with publish date and link to story -- */
#col3newsmiddle .newsitem h3 {
	background: url(/img/dashline.png) repeat-x 0 0;
	color: #000;
	margin-bottom: 6px;
	padding-top: 2px;
	text-transform: uppercase;
}

#col3newsmiddle .newsitem h3 span {
	background: url(/img/dashline.png) repeat-x 0 100%;
	display: block;
	padding-bottom: 2px;
}

#col3newsmiddle .newsitem h3 span a {
	color: #000;
	margin-right: 80px;
	padding: 0;
}

#col3newsmiddle .newsitem h3 span span {
	background: none;
	color: #777;
	float: right;
	padding: 0 2px 0 0;
	text-align: right;
	width: 70px;
}

/* -- news and event item body headings -- */
#col3newsmiddle .newsitem h4,
#col3newsmiddle .newsitem h5 {
	font-weight: bold;
	margin-bottom: 0.3em;
}

#col3newsmiddle .newsitem h4 {
	font-size: 1.3em;
}

/* -- news and event item youtube video embed -- */
#col3newsmiddle .newsitem .youtube {
	background: url(/img/youtubeplaybar.png) #000 no-repeat 0 100%;
	height: 295px;
	margin: 0 auto 1.4em auto;
	width: 480px;
}

#col3newsmiddle .newsitem .youtube div div {
	color: #fff;
	font-size: 1.4em;
	padding: 130px 20px 0;
	text-align: center;
}

#col3newsmiddle .newsitem .youtube .noflash {
	display: none;
}

/* -- youtube video embed - javascript enabled -- */
.js #col3newsmiddle .newsitem .youtube .nojs {
	display: none;
}

/* -- youtube video embed - flash not available -- */
.noflash #col3newsmiddle .newsitem .youtube .noflash {
	display: block;
}

/* -- news and event item author/category/event date/location styles -- */
#col3newsmiddle .newsitem .author,
#col3newsmiddle .newsitem .category,
#col3newsmiddle .newsitem .eventdate,
#col3newsmiddle .newsitem .location,
#col3newsmiddle .newsitem .contact {
	font-size: 1.1em;
	margin: 0;
	text-transform: uppercase;
}

#col3newsmiddle .newsitem .category a {
	color: #000;
	text-decoration: underline;
}

#col3newsmiddle .newsitem .author strong,
#col3newsmiddle .newsitem .category strong,
#col3newsmiddle .newsitem .eventdate strong,
#col3newsmiddle .newsitem .location strong,
#col3newsmiddle .newsitem .contact strong {
	color: #777;
	font-weight: normal;
}

#col3newsmiddle .newsitem .readon {
	margin: 1.2em 0 0;
}

/* -- news/event paging UI -- */
#newspaging {
	background: url(/img/dashline.png) repeat-x 0 0;
	font-size: 1.2em;
	padding-top: 2px;
	text-transform: uppercase;
}

#newspaging a {
	color: #000;
}

#newspaging div {
	background: url(/img/dashline.png) repeat-x 0 100%;
	float: left; /* contain child floats (overflow: hidden does not work for IE6) */
	padding-bottom: 2px;
	width: 100%;
}

#newspaging div div {
	background: none;
	color: #777;
	padding: 0;
}

#newspaging div .prev,
#newspaging div .next {
	float: left;
	line-height: 1.5;
	width: 120px;
}

#newspaging div .next {
	text-align: right;
}

#newspaging a.active {
	color: #e21f25;
}

#newspaging ol {
	float: left;
	list-style: none;
	margin: 0;
	text-align: center;
	width: 248px;
}

#newspaging ol li {
	display: inline;
	font-size: 1em;
	margin: 0;
	padding: 0 5px;
}

#newspaging ol li a {
	padding: 0 3px;
}