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

	Title: YELL - Youth Engage Learn Lead
	Author: SPECTRAMEDIA (http://spectramedia.net)
	Date: November 2008 

***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar 
			2.4 Footer
		
***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
@import "calendar.css";

/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	


	body {
		background: #e6e6e6 url(../images/bg.jpg) repeat-x top right;
		font: 62.5% Verdana, Arial, Helvetica, sans-serif;
		color: #000;
		text-align: center;
		}

	hr { display: none; }
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
	
	big {
		font-size: 1.2em;
	}
	
	small {
		font-size: .75em;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Verdana, Arial, Helvetica, sans-serif;
	}

	a {
		color: #666;
		text-decoration: underline;
	}
	
	a:hover, 
	a:active {
		color: #333;
		text-decoration: none;
	} 
	
	address { font-style: normal; }
	
   .center { text-align: center; margin: 0 auto;}
	
	.clearfix:after,  div.wrapper:after,p.map-photos:after, div.con:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	


	.hide {
		display: block;
		font-size: 1px;
		height: 1px;	
		width: 1px; 
		overflow: hidden;	
		position: absolute;
		text-indent: -999em;
		top: -999em;
		left: 0;
	}  
	
	.underline {
		text-decoration: underline;
	}  
	
/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

div.container { width: 994px; margin: 0 auto; background: #fff; text-align: left; color: #666; }
 div.wrapper { background: url(../images/bg.gif) repeat-y top left; font-size: 1.1em; line-height: 1.6;}
 body.three-col div.wrapper { background: url(../images/bg2.gif) repeat-y top left; }
   div.wrapper  p { padding-bottom: 20px; }
div#content{float:right;width:743px;overflow:hidden;}
div#sidebar{float:left;width:251px;background:#efefee;overflow:hidden;}  
div#footer{clear:both;width:100%}

h2 { color: #369; padding-bottom: 25px; padding-top: 50px; font-size: 1.7em;font-weight:normal;}
div#content h2 { padding-top: 40px;padding-bottom:30px; }


/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
 

#header { height: 249px; background: url(../images/header1_homepage.jpg) no-repeat top left;
		position: relative; }
		
body.three-col div#header, body.alt-header1 div#header { background: url(../images/header1.jpg) no-repeat top left; }
body.one-col div#header, body.alt-header1 div#header { background: url(../images/header1_homepage.jpg) no-repeat top left; }
body.alt-header2 div#header { background: url(../images/header2.jpg) no-repeat top left; }
body.alt-header3 div#header { background: url(../images/header3.jpg) no-repeat top left; }
body.alt-header4 div#header { background: url(../images/header4.jpg) no-repeat top left; }
body.one-col div#content div.inner { width: auto; float:left;}

#header p { margin: 0; }
	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 273px;
		height: 84px;
		overflow: hidden;
		cursor: pointer;
	}
	 
	
	#header h1,
	#header .logo { 
		top: 0;
		left: 0;
		text-align: center;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 12px;
		background: url(../images/logo.jpg) no-repeat top left;
	}
	
	a.more-sports { position: absolute; top: 0; right: 715px; width: 150px; height: 75px; display: block; text-indent: -999em; }
	
	div#navigation { border-top: 3px solid #e3e3e3; border-bottom: 3px solid #e3e3e3; width: 667px; position: absolute; top: 11px; right: 25px; } 
	div#navigation ul li { float: left; font-size: 1.4em;  }
	div#navigation ul li a { background: url(../images/star.gif) no-repeat center right; padding: 3px 23px 3px 9px; display: block;text-decoration: none; color: #666;}
div#navigation ul li.last a { background: none;  padding-right: 0; }
div#navigation ul li.first a { padding-left: 5px; }
	div#navigation ul li.current a, div#navigation ul li a:hover { color:#000; } 
	
	
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
 

div#content div.inner { padding: 0 45px 45px 45px; width: 373px; float: left; } 
div.entry { padding-bottom: 45px; border-bottom: 1px solid #ccc; }
div.entry-last { padding-bottom: 0; border: none; }
ul.list li { background: url(../images/bullet.gif) no-repeat 0 2px; padding-left: 14px; }

/* content sidebar */
div#content div.secondary-sidebar { float: right; width: 222px;overflow:hidden;background: #efefee; padding: 10px 28px 30px 30px; }
p.map-photos {margin-bottom:10px;}
div#content div.secondary-sidebar-nav { background:white; padding-top:0;padding-right: 0;width: 150px;}
p.map-photos img { display: block; float: left; margin-right: 15px;  }
p.map-photos img.last { margin-right: 0; }
div.box { width: 143px; background:#369 url(../images/bg-top.gif) no-repeat top left; padding-top: 18px; float:right;} 
div.box ul {background: url(../images/bg-bottom.gif) no-repeat bottom left; padding-bottom: 18px; }
div.box ul li.last { background: url(../images/bg-btm.gif) no-repeat bottom left; padding-bottom: 18px; }
div.box ul li a { text-decoration: none; color: #fff; display:block;padding: 5px 10px 5px 25px; }
div.box ul li.current a { background:#5882ab;}
div.box ul li a:hover { background-color: #5882ab; color: #fff; }
div.con { background: #ddd; padding: 23px; }
a.arrow { background: url(../images/bullet-grey.gif) no-repeat center left; padding-left: 15px; color: #666;text-decoration: none;float:right;}
a.arrow:hover{ text-decoration: underline; }

/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
 
div#sidebar div.inner { padding: 0 10px 45px 30px; } 
div#sidebar div.inner-pad { padding: 45px; }
 
ul.list1 li { background: url(../images/bullet-blue.gif) no-repeat 0 2px; padding-left: 14px; }
ul.list1 li, ul.list1 li a { text-decoration: none; color: #369; }

ul.list2 li { background: url(../images/bullet-green.gif) no-repeat 0 2px; padding-left: 14px; }
ul.list2 li, ul.list2 li a { text-decoration: none; color: #363; }

ul.list3 li { background: url(../images/bullet-purple.gif) no-repeat 0 2px; padding-left: 14px; }
ul.list3 li, ul.list3 li a { text-decoration: none; color: #609; }

ul.list1, ul.list2, ul.list3 { padding-bottom: 15px; margin-left: 12px; }
ul.list1 li a:hover, ul.list2 li a:hover, ul.list3 li a:hover{ text-decoration:underline; }

h2.ir, div#content h2.ir { position: relative; overflow: hidden; padding: 0; margin: 0 0 14px;}
div#content h2.ir { margin: 0; }
h2.ir span { position: absolute; top: 0; left: 0; }
h2.news, h2.news span { width: 199px; height: 62px; }
h2.courses, h2.courses span { width: 201px; height: 65px; color: #609;  }
h2.enews, h2.enews span { width: 201px; height: 70px;color: #363;  }
h2.planning, h2.planning span { width: 222px; height: 29px; color: #666; }
h2.cal, h2.cal span { width: 222px; height: 29px; color: #666; }
h2.news span { background: url(../images/title-news.gif) no-repeat top left; }
h2.courses span { background: url(../images/title-courses.gif) no-repeat top left; }
h2.enews span { background: url(../images/title-enews.gif) no-repeat top left; }
h2.planning span { background:url(../images/title-planning.gif) no-repeat top left; }
h2.cal span { background:url(../images/title-calendar.gif) no-repeat top left; }

/* rollover effect */

div.myYell { position: relative; margin-top: 20px; width: 199px; height: 51px; }
div.myYell a { position: absolute; width: 199px; height: 51px; background: url(../images/my-yell.gif); text-indent: -999em; }
div.myYell a:hover { background-position: bottom left; }

/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	

div#footer { clear: both; background: white; }  
div#footer ul {  padding: 22px 0 22px 30px;border-top: 3px #ffbf00 solid; }
div#footer ul li { display: inline; }
div#footer ul li { margin-right: 60px; }
div#footer ul li img { vertical-align: middle; }
div#footer ul li.last { margin-right: 0; }
div#footer ul li.partners {	vertical-align: top; font-size: 2em; color:#ffbf00;  }
div#footer ul li a {  text-decoration: none; } 

/* peter adjusting spacing on yell event listing */
div.eventItem p{padding-bottom: 0;}