/* reset browser rules */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* apply own rules */
body {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.35;
	color: #333;
}

p,
ul.text,
ol.text,
dl.text,
blockquote
{
    margin-bottom: 1em;
}

ul.text,
ul.text ul,
ol.text ul { margin-left: 2em; list-style-type: disc; }
ul.text ul { list-style-type: circle; }

ol.text,
ol.text ol,
ul.text ol { margin-left: 2em; list-style-type: decimal; }

ol.text.letters,
ol.text ol { list-style-type: lower-alpha; }

ul.text li,
ol.text li { margin-bottom: .25em; }

dl.text dt { font-style: italic; margin-top: 1em; }
dl.text dt:first-child { margin-top: 0; }
dlt.text dd { color: #666; margin-bottom: .5em; }

strong { font-weight: bold; }
em { font-style: italic; }
q:before { content:open-quote; }
q:after { content: close-quote; }
cite:before { content: '\2014\0020'; color: #666; } /* emdash + space */
cite { font-style: italic; }
abbr, acronym { border-bottom: 1px dotted #ccc; cursor:help; }
var { font-style: italic; }

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, sans-serif;
	margin-top: 1em;
}
h1 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.1;
}
h2 {
	font-size: 1.125em;
	line-height: 1.5;
	font-weight: bold;
	margin-top: 2em;
}
	#article h2:first-child { margin-top: 0; }
		
h3 { font-weight: bold; }
/* h4, h5, h6 { font-style: italic; } */

a:link { color: #027; }
a:visited { color: #507; }
a:hover { color: #05b; text-decoration: none; }
a:active { color: #700; }
a { outline: none; }
ul.programs {
	margin-bottom: 1em;
}
ul.programs > li {
	padding-right: 215px;
	margin-right: 1em;
	margin-bottom: 1em;
	background-position: 100% 30px;
	background-repeat: no-repeat;
}
ul.programs p.action {
	font-style: italic;
}
ul.cal-legend > li  {
	border-left: 1.25em solid #ccc;
	padding-left: 12px;
	margin-bottom: .5em;
	margin-left: 1em;
	float: left;
}
ul.cal-legend:after {
	content: '.';
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}
ul.cal-legend > li:first-child {
	margin-left: 0;
}
ul.cal-events > li {
	border-left: 9px solid #ccc;
	padding-left: 12px;
}


/* section-specific rules */
#head-inner,
#nav-inner,
#content-inner,
#footer-inner {
	width: 971px;
	margin: 0 auto;
}
#content-inner {
	width: 969px;
	border: 1px solid #ddd;
	border-width: 0 1px;
	/*
	-moz-box-shadow: 0 1em 1em rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1em 1em rgba(0,0,0,.2);
	box-shadow: 0 1em 1em rgba(0,0,0,.2);
	*/
}
#footer-inner {
	width: 945px;
	padding: 13px;
	min-height: 43px;
}
#head-outer {
	height: 296px;
	background: url(../images/header-bg-trans.png) center 26px no-repeat;
	position: relative;
	z-index: 2;
}
#head {
	padding-top: 26px;
	background: url(../images/page-top-bar-trans.png) 0 0 repeat-x;
}
#page-title { position: relative; top: 11px; left: 13px; }
#nav {
	height: 48px;
	padding-top: 229px;
	background: #97cbfe url(../images/nav-bg-trans.png) center bottom no-repeat;
	margin-top: -319px;
}
#nav h2 { display: none; }
#nav li {
	float: left;
	padding-right: 13px;
}
#nav li * {
	display: block;
}
#nav li span {
	display: block;
	padding-left: 13px;
}
#nav li.active {
	background: url(../images/nav-tab-bg-right-trans.png) right top no-repeat;
}
#nav li.active span {
	background: url(../images/nav-tab-bg-left-trans.png) left top no-repeat;
}

#nav li a {
	position: relative;
	z-index: 3;
	line-height: 34px;
	text-decoration: none;
	color: #fff;
}
#nav li a:hover {
	text-decoration: underline;
}
#nav li a.active {
	color: #333;
}
#nav li a.current {
	cursor: default;
	text-decoration: none;
}
#content {
	background: #fff url(../images/content-bg-trans.png) 0 0 repeat-x;
}
#content-inner:after {
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
#content-inner {
	background: #fff;
}
#content h1 {
	position: relative;
	z-index: 3;
	
	margin: 0;
	padding: 0;
	padding-left: 13px;
	margin-bottom: 1em;
	
	height: 42px;
	padding-right: 285px;
	line-height: 42px;
	white-space: nowrap;
	overflow: hidden;
	border-bottom: 1px solid #ffda89;
	
	
}

#article {
	padding-left: 13px;
	width: 668px;
	float: left;
	margin-bottom: 1em;
}

#aside {
	width: 262px;
	padding-right: 13px;
	float: right;
	margin-bottom: 1em;
}
	#aside h2 { position: absolute; top: 0; left: 0; visibility: hidden; } /* hide, but still readable by screen readers */
	#aside h3 { /* make look like h2s */
		font-size: 1.125em;
		line-height: 1.1;
		font-weight: bold;
	}

#subnav { 
	background: #eff7ff url('../images/subnav-bg.png') 0 100% no-repeat;
	padding-bottom: 38px;
	color: #052b4d; 
	overflow: hidden; 
	margin-bottom: 2em;
}
	#subnav .subnav-hd {
		background: url('../images/subnav-bg.png') 0 0 no-repeat;
		height: 38px;
		overflow: hidden;
		padding: 0 38px;
	}
	#subnav h3 {
		margin-top: 0;
		line-height: 38px;
		white-space: nowrap;
		font-weight: normal;
		font-style: italic;
	}
	#subnav .subnav-bd {
		background: url('../images/subnav-bg.png') 0 -38px no-repeat;
	}
	#subnav ul  { }
		#subnav li span { display: block; }
		#subnav a {
			text-decoration: none;
			color: #052b4d;
			display: block;
			line-height: 1.2;
			padding: .5em 38px;
			border: 1px solid #DBE8F5;
			border-width: 1px 0;
			margin-top: -1px;
			background: url(../images/bullet-arrow-trans.png) 20px .85em no-repeat;
		}
		#subnav li:hover {
			background: rgb(137, 197, 255);
			/* background: rgba(137, 197, 255, .5); */
		}
		#subnav li.active {
			background: rgb(137, 197, 255);
			/* background: rgba(137, 197, 255, .5); */
		}
		#subnav li.active a {
			cursor: default;
			color: #000;
		}

#upcoming-events { 
	background: #F6F1E5 url('../images/upcoming-events-bg.png') 0 100% no-repeat;
	padding-bottom: 38px;
	overflow: hidden; 
	margin-bottom: 2em;
}
	#upcoming-events .ue-hd {
		background: url('../images/upcoming-events-bg.png') 0 0 no-repeat;
		height: 38px;
		overflow: hidden;
		padding: 0 38px;
	}
	#upcoming-events h3 {
		margin-top: 0;
		line-height: 38px;
		white-space: nowrap;
		font-weight: normal;
		font-style: italic;
	}
	#upcoming-events .ue-bd {
		background: url('../images/upcoming-events-bg.png') 0 -38px no-repeat;
		padding-top: .5em;
	}
	#upcoming-events .ue-bd > *:first-child { margin-top: 0; }
	#upcoming-events h4  {
		font-family: "Trebuchet MS", sans-serif;
		padding: 0 38px;
	}
	#upcoming-events p {
		padding: 0 38px;
	}
	#upcoming-events p.more {
		font-size: .875em;
		line-height: 1.3;
		margin-bottom: 0;
		margin-top: 2em;
	}
	#upcoming-events h5 {
		margin-top: 0;
		font-family: "Trebuchet MS", sans-serif;
	}
	#upcoming-events .ue-bd > ul > li {
		margin-left: 20px;
		border-left: 6px solid #ccc;
		padding-left: 12px;
		margin-right: 38px;
		margin-bottom: .25em;
	}
	#upcoming-events .ue-bd ul ul > li {
		font-size: .8em;
		color: #666;
		display: inline;
	}
	#upcoming-events .ue-bd ul ul > li:after {
		content: ', ';
	}
	#upcoming-events .ue-bd ul ul > li:last-child:after {
		content: '';
	}
	#upcoming-events li.when .label,
	#upcoming-events li.where .label {
		display: none;
	}
	
	

#footer {
	background: #fff url(../images/footer-bg-sides.png) 0 0 repeat-x;
	font-size: .75em; /* 12px */
	color: #666;
}
	#footer-inner {
		background: #fff url(../images/footer-bg.png) 0 0 repeat-x;
	}

	#footer #footer-nav { color: #666; width: 59%; float: left; }
		#footer #footer-nav a { color: #666; }
		#footer #footer-nav h2 { display: none; }
		#footer #footer-nav li  { float: left; padding-left: .5em; }
		#footer #footer-nav li:first-child { border-left: none; padding-left: 0; }
		
		#footer #footer-nav li:before { content: '|'; padding-right: .5em; }
		#footer #footer-nav li:first-child:before { content: ''; }
		
	#footer #copyright { width: 39%; float: right; text-align: right; }





/* page-specific rules */

#p-arts-dasf			{ background-image: url(../images/programs/DAF.gif); min-height: 159px; }
#p-arts-im				{ background-image: url(../images/programs/imagemakers09.jpg); min-height: 218px; }
#p-arts-mm				{ background-image: url(../images/programs/musicmakers_logo_black.gif); min-height: 82px; }
#p-arts-nfae			{ background-image: url(../images/programs/FineArts.gif); min-height: 172px; }

#p-cl-kc				{ background-image: url(../images/programs/keystone.gif); min-height: 120px; }
#p-cl-yoty				{ background-image: url(../images/programs/yoy.gif); min-height: 230px; }
#p-cl-tc				{ background-image: url(../images/programs/torchclub.gif); min-height: 128px; }

#p-ecd-cl 				{ background-image: url(../images/programs/CareerLaunch.gif); min-height: 133px; }
#p-ecd-cs 				{ background-image: url(../images/programs/CLUBService.gif); min-height: 82px; }
#p-ecd-gfg 				{ background-image: url(../images/programs/GoalsforGraduation.gif); min-height: 95px; }
#p-ecd-js 				{ background-image: url(../images/programs/JuniorStaff_logo.gif); min-height: 130px; }
#p-ecd-mm 				{ background-image: url(../images/programs/MoneyMatters.gif); min-height: 230px; }
#p-ecd-ph 				{ background-image: url(../images/programs/PowerHour.gif); min-height: 83px; }
#p-ecd-pl 				{ background-image: url(../images/programs/ProjectLearn.gif); min-height: 53px; }
#p-ecd-ct 				{ background-image: url(../images/programs/clubtech_logo.gif); min-height: 163px; }
#p-ecd-saas				{  }

#p-hals-hh				{ background-image: url(../images/programs/programlogo.gif); min-height: 161px; }
#p-hals-ns				{ background-image: url(../images/programs/NetSmartz.gif); min-height: 148px; }
#p-hals-sm				{ background-image: url(../images/programs/SmartMoves.gif); min-height: 112px; }
#p-hals-sg				{ background-image: url(../images/programs/smartgirls.gif); min-height: 124px; }
#p-hals-ptm				{ background-image: url(../images/programs/PassporttoManhood.gif); min-height: 87px; }

#p-sfae-tp				{ background-image: url(../images/programs/TriplePlay_thumb.gif); min-height: 157px; }
#p-sfae-tppgp			{  }
#p-sfae-rbi				{ background-image: url('../images/programs/RBI%20sponsored%20by%20KPMG%20(2).JPG'); min-height: 274px; }
#p-sfae-jrbi			{ background-image: url(../images/programs/JR%20RBI_Final.jpg); min-height: 210px; }
#p-sfae-nflyf			{ background-image: url(../images/programs/Youth-Football-Fund_rgb.gif); min-height: 180px; }


/* photos */
#photo-albums {}
	#photo-albums > ul {
		margin-left: -8px;
	}
	#photo-albums > ul > li {
		display: inline-block;
		width: 150px;
		margin-left: 8px;
		margin-bottom: 8px;
		background-color: #fff;
	}
		#photo-album > ul > li h3 {
			font-family: "Trebuchet MS", Arial, sans-serif;
			font-size: 1em;
			font-weight: normal;
			color: #333;
		}
		#photo-albums > ul > li p.photo a,
		#photo-albums > ul > li p.photo img {
			display: block;
		}

#photo-album {}
	#photo-album > div.description {}
	#photo-album > ul {
		margin-left: -4px;
	}
	#photo-album > ul > li {
		display: inline-block;
		width: 104px;
		margin-left: 4px;
		margin-bottom: 4px;
	}
		#photo-album > ul > li h3 {
			font-family: "Trebuchet MS", Arial, sans-serif;
			font-size: .75em;
			font-weight: normal;
			color: #333;
		}
		#photo-album > ul > li p.photo a,
		#photo-album > ul > li p.photo img {
			display: block;
		}
/* staff page */
ul#staff > li {
	margin-bottom: 2em;
}
ul#staff > li :after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}
ul#staff > li  { *zoom: 1; }

ul#staff > li > * {
	margin-right: 215px;
}
ul#staff > li > p.photo { 
	margin-right: 0;
	width: 200px;
	height: 150px;
	overflow: hidden;
	float: right;
	margin-top: -1.875em;
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
ul#staff > li > p.photo img {
	display: block;
}
		
/* tables */
/* We collapse borders because we don't want cell spacing.
   We specify the font family here too, including a generic fall-back.
   We specify a global table font size, using 'ems' because they are
   resizable and take their relative value from the global stylesheet. */
table.data {
    border-collapse: collapse;
    background: #fff;
    color: #333;
    width: 100%;
    
    margin-bottom: 1em;
}

table.data.verbose 
{
    font-size: 75%;
}

/* We add letter spacing because all caps makes the letters scrunchy
   Also, left aligned because it was favoured by my university for table
   captions, but yours might be different. Actually for a scientific paper,
   the caption would be more detailed, resembling a table 'summary' */
table.data caption 
{
    /* DAXMOD 090909: Removed caption */
    display: none;
    /*
    padding: .25em;
    font-style: italic;
    font-size: 90%;
    line-height: 140%;
    letter-spacing: 0.1em;
    text-align: right;
    color: #999;
    caption-side: bottom;
    background: #fff;
    background: rgba(255,255,255,.9);
    border-top: 1px dashed #ccc;
    margin-top: -1px;
    */
}

/* Table headers should be clear, but concise and discreet.
   The double border separates the row from caption and the table body 
   without needing a different background colour. Because we've specified
   a text colour, we also specify a background colour (even though it's the
   same as the main table colour) to accommodate personal stylesheets. */
table.data thead th {
    border-bottom: 1px solid #ccc;
    padding: 2px 10px;
    color: #888;
    text-align: left;
    letter-spacing: 0.1em;
    white-space: nowrap;
    background: #f0f0f0;
    /* background: rgba(240,240,240,.9); */
}
table.data.verbose thead th,
table.data.verbose thead td 
{
    padding: 2px 2px;
}

table.data.verbose thead th 
{
    white-space: normal;
}

/* We've given the table footer the same double border treatment for the
   same reason.  It also acts as a nice "end of table" indicator. It's 
   part of the data so we leave the text black. We also treat the header
   and data the same way. */
table.data tfoot th, 
table.data tfoot td {
    border-top: 3px double #ccc;
    padding: 2px 10px;
    color: #888;
    letter-spacing: 0.1em;
    background: #f6f6f6;
    /* background: rgba(246,246,246,.9); */
}
table.data.verbose tfoot th,
table.data.verbose tfoot td 
{
    padding: 2px 2px;
}


/* We now revert to discreet single pixel horizontal borders to separate
   each entry.  If your table content is numerical data, you might want the
   vertical borders too, but I find it's visually more pleasing and easier to
   read online when there is plenty of padding instead of borders. 
   NOTE: we treat the headers and data cells the same here, visually it's clear
   enough (header text is bold) and does not affect screen-reader software */
table.data tbody th, 
table.data tbody td {
    border-bottom: 1px solid #ccc;
    padding: 2px 10px;
    vertical-align: top;
    background: #fff;
    /* background: rgba(255,255,255,.9); */
}
table.data.verbose tbody th,
table.data.verbose tbody td 
{
    padding: 2px 2px;
}


table.data tbody th { color: #666; }

/* Faux alpha transparency.  It's just a 16px square image (a PNG, but
   could be a GIF) filled with a colour (I chose orange because it
   contrasts pleasingly with blue - opposite on colour wheel) and then
   every other pixel is filled with another colour (e.g. white) which is
   made the transparent colour (ordinary transparency) - anything behind
   the transparent pixels shows through and our wonderful brain fills in
   the rest, thanks to Gestalt psychology.  Only really works when a solid
   colour is required, such as table row rollovers. NOTE: IE doesn't like
   tr:hover anyway so "pprrffffft!" to that! */
/* 
table.data tbody tr:nth-child(even) th, 
table.data tbody tr:nth-child(even) td
{
    background: #fafafa;
	background: rgba(250,250,250,.9);
}
*/
table.data tbody tr:hover th {
    background: #f0f0f0;
    /* background: rgba(240,240,240,.9); */
}
table.data tbody tr:hover td {
    background: #eaeaea;
    /* background: rgba(234,234,234,.9); */
}
table.data col.primary,
table.data colgroup.primary col 
{
    background-color: #000;
}
table.data col:hover 
{
    background-color: #888;
}

table.data col.money { text-align: right; width: 12em; }
table.data col.time { text-align: right; }

div.sponsors { border: 4px outset #ccc; padding: .6em 1em 0; background-color: #eee; margin-bottom: 1em; }
div.sponsors.platinum { border-color: #dcdcdc; background-color: #dcdcdc; }
div.sponsors.gold { border-color: #EBD86F; background-color: #EBD86F; }
div.sponsors.silver { border-color: #C0C0C0; background-color: #C0C0C0; }
div.sponsors.bronze { border-color: #CFAB54; background-color: #CFAB54; }

div.sponsors h3 { margin-top: 0; }