/* 1) Globals
----------------------------------------------------------------------------------- */
html, body {
 height: 100%;
 }

body {
	color: #333333;
	margin: 0;
	padding: 0;
	background-image: url(../images/background_black.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Helvetica, Sans;
	font-size: 13px;
	line-height: 145%;
 }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
 margin:0;
 padding:0;
 }

img {
	border: 0;
}

img.right {
 float: right;
 }

.spacer {
	height: 25px;
 }

.content-spacer {
 height: 30px;
 }

.clear {
 clear: both;
 height: 20px;
 }

ul {
	margin-left: 50px;
}

/* 2) Structure
----------------------------------------------------------------------------------- */
#header-wrap {
	height: 221px;
	margin: 0 auto;
	background-color: #000;
	background-image: url(../images/topbackground_oi5.jpg);
	background-repeat: no-repeat;
	background-position: center;
 }

#header {
 width: 925px;
 margin: 0 auto;
 padding: 0;
 height: 163px;
 position: relative;
 }

#fade {
 position: absolute;
 right: -7px;
 bottom: -52px;
 width: 12px;
 height: 60px;
 background: url(../images/fader.png) left no-repeat;
 }

#logo {
	position: absolute;
	left: -153px;
	top: 10px;
	margin: 0;
	padding: 0;
	height: 170px;
	width: 623px;
	background-repeat: no-repeat;
	background-position: left;
 }

h1#title a {
	position: absolute;
	left: 170px;
	top: 5px;
	height: 205px;
	width: 300px;
	margin: 0;
	padding: 0;
	display: block;
	text-indent: -9000px;
	outline: none;
	background-color: transparent;
	background-image: url(../images/logo5_205.png);
	background-repeat: no-repeat;
 }

#container {
	width: 924px;
	padding: 0;
	margin-top: -30px;
	background: url(../images/contentback.gif) no-repeat top;
	z-index: 1000;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
 }

#content_wrapper {
 padding: 15px;
 padding-top: 0px;
 }

#sidebar {
 float: left;
 width: 281px;
 padding-right: 10px;
 border-right: 1px #ddd solid;
 margin-right: 7px;
 }

#content {
 width: 565px;
 padding-right: 10px;
 float: right;
 }

#footer_wrapper {
	width: 900px;
	text-align: right;
	padding-top: 10px;
	padding-bottom: 30px;
	line-height: 22px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ddd;
 }


/* 3) Navigation
----------------------------------------------------------------------------------- */
#navigation {
 display: block;
 float: right;
 margin: 0px;
 padding: 0;
 font: 9px Arial;
 margin-top: 105px;
 margin-right: 3px;
 position: relative;
 text-align: right;
 width: 507px;
 height: 42px;
 }

ul#navlinks {
 position: absolute;
 height: 28px;
 margin: 0;
 margin-top: 18px;
 padding: 0;
 right: 10px;
 width: 462px;
 }
 
 ul#navlinks li {
 display: block;
 float: left;
 width: 110px;
 height: 28px;
 padding: 0px 0px 0px 5px;
 }

 ul#navlinks li a {
 height: 28px;
 width: 110px;
 color: #000;
 display: block;
 float: left;
 text-decoration: none;
 }

ul#navlinks li#contact a {
	background-image: url(../images/contact.gif);
	background-repeat: no-repeat;
 }

ul#navlinks li#contact a:hover {
	background-image: url(../images/contact-over.gif);
	background-repeat: no-repeat;
 }

ul#navlinks li#links a {
 background: url(../images/links.gif) no-repeat;
 }

ul#navlinks li#links a:hover {
	background-image: url(../images/links-over.gif);
	background-repeat: no-repeat;
 }

ul#navlinks li#programme a {
 background: url(../images/programme.gif) no-repeat;
 }

ul#navlinks li#programme a:hover {
 background: url(../images/programme-over.gif) no-repeat;
 }

ul#navlinks li#faqs a {
 background: url(../images/faqs.gif) no-repeat;
 }

ul#navlinks li#faqs a:hover {
 background: url(../images/faqs-over.gif) no-repeat;
 }


/* 4) Sidebar
----------------------------------------------------------------------------------- */
#sidebar p {
 padding: 0px 15px;
 margin: 5px 0px;
 }

#sidebar h3 {
 height: 57px;
 width: 283px;
 text-indent: -9000px;
 margin: 0px 0px 0px 0px;
 }

#sidebar a {
	color: #00a5e4;
 }

#sidebar a:hover {
 color: #000;
 }

h3#why {
	background-image: url(../images/why_involved.gif);
	background-repeat: no-repeat;
 }
 
h3#quotes {
	background-image: url(../images/we_say.gif);
	background-repeat: no-repeat;
 } 
 
h3#privacy {
	background-image: url(../images/your_privacy.gif);
	background-repeat: no-repeat;
 } 

h3#what_happens {
 background: url(../images/what_happens.gif) no-repeat;
 }

.quote_boy {
	float: none;
	margin-left: 15px;
 }
 
 .speech {
	float: left;
 }
 
 .speech_close {
	vertical-align: top;
 } 
 
.quote_by {
	font-style: italic;
	font-size: 11px;
	text-align: left;
	padding-left: 15px;
 }
/* 5) Content
----------------------------------------------------------------------------------- */
#rotator
{
	width: 550px;
	height: 310px;
	background-image: url(../image_rotator/rotate.php);
	background-repeat: no-repeat;
	background-position: center top;
}


#content h1 {
 height:30px;
 margin: 0;
 padding-bottom: 5px;
 border-bottom: 1px solid #ddd;
 text-indent: -9000px;
 }

#content a {
	color: #00a5e4; /*was 666666 */
 }

#content a:hover {
 color: #000;
 }

#content h1#internalcontact {
 background: url(../images/h1contact.gif) left top no-repeat;
 }

#content h2 {
 height:30px;
 margin: 0;
 padding-bottom: 5px;
 border-bottom: 1px solid #ddd;
 text-indent: -9000px;
 }

#content h2#whatwe {
	background-image: url(../images/main_tltle_about.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
#content h2#whatnow {
	background-image: url(../images/what_happens_now.gif);
	background-repeat: no-repeat;
	background-position: left top;
	clear: both;
 }

#content h2#smooth {
 background: url(../images/h2smooth.gif) left top no-repeat;
 }

#content h2#txt {
	background-image: url(../images/txt.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }

#content h2#design {
 background: url(../images/design.gif) left top no-repeat;
 }

#content h2#prog {
	background-image: url(../images/sub.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
#content h2#confid {
	background-image: url(../images/confid.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#links {
	background-image: url(../images/links_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#programme {
	background-image: url(../images/programme_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#photos {
	background-image: url(../images/photos_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#contact {
	background-image: url(../images/contact_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#quotes {
	background-image: url(../images/quotes_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#about {
	background-image: url(../images/about_the_project_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#faqs {
	background-image: url(../images/faqs_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
#content h2#opps {
	background-image: url(../images/opps_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#youth_panel {
	background-image: url(../images/youth_panel_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }

 #content h2#privacy {
	background-image: url(../images/privacy_and_confidentiality_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
 #content h2#training {
	background-image: url(../images/training_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 

 #content h2#downloads {
	background-image: url(../images/downloads_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }

#content h2#news {
	background-image: url(../images/news_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }
 
#content h2#staff {
	background-image: url(../images/staff_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
 }

#content h2#usea2 {
 background: url(../images/usea2.gif) left top no-repeat;
 }
 
#content h3#staff {
	padding-top: 25px;
 }

#content h2#search {
 background: url(../images/seo.gif) left top no-repeat;
 }

#content h2#search2 {
 background: url(/../images/search2.gif) left top no-repeat;
 }
 
#content h2#site_map {
 background: url(../images/site_map.gif) left top no-repeat;
 }

#content p {
 margin: 10px 0px;
 }

#txt {
 float: left;
 width: 186px;
 }
 
#prog {
 float: left;
 width: 194px;
 }
 
#confid {
 float: left;
 width: 184px;
 }

#use {
 width: 189px
 }

#txt p, #prog p {
 margin-right: 15px;
 }

#clientphoto {
 margin-bottom: -4px;
 }

#content h3#training {
	margin-top: 35px;
}

#content #breadcrumb {
	margin-top: 15px;
	background-color: #F4F4F4;
	margin-bottom: 15px;
	padding-left: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.ground_rules {
	position:relative;
	margin-left: 20px;
}

.ground_rules li {
	margin-top: 10px;
}

/* 6) Additions
----------------------------------------------------------------------------------- */
.anon_badge {
	margin-right: 5px;
	margin-left: 5px;
	float: right;
 }
 
#googletab {
	position: fixed !important;
	top: 40% !important;
	display: block !important;
	width: 29px !important;
	height: 136px !important;
	z-index: 100001 !important;
	background-image: url(../images/tab3.gif);
	background-repeat: no-repeat !important;
	text-indent: -9000px;
}

#footer_wrapper a {
	color: #00a5e4; /*was 666666 */
 }

#footer_wrapper a:hover {
 color: #000;
 }
 
.skip_link {
	color:#000000
}

#TJK_ToggleON,#TJK_ToggleOFF {display:none}

.news_photo {
	border-top-width: thin;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	float: right;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
}

.pdf_logo { vertical-align:middle}

a[class ="popup"] {
   padding-right: 18px;
   background: transparent url(../images/icon_popup.gif) no-repeat center right;
}

/* 7) Contact Form
------------------------------------------------------------------------------------ */
/*form*/

.row {
		clear: both;
		padding-top: 5px;
		}

form {
		margin-bottom: 1em;
		}
		
fieldset {
	margin-bottom: 20px;
	width: 454px;
	padding: 10px;
	border: 1px dotted #666666;
	margin-top: 30px;
		}		

legend {
		padding: 0 10px;
		background: #ffffff;
		text-transform: uppercase;
		color: #666666;
		font-size: 1.0em;
		}

.formLabel {
		font-size: 100%;
		line-height: 1.6em;
		text-align: right;
		margin-right: 10px;
		width: 100px;
		float: left;
		}

.formControl {
		float: left;
		width: 326px;
		}
		
input, textarea {
		border: 1px solid #666666;
		padding: 2px;
		font: 1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		}	
		
.inputcontact {
		font-size: 1.0em;
		width: 322px;
		}			

.contacttext {
		width: 474px;
		}
			
.submitButtoncontact {
		background: #eeeeee;
		font: bold 1.0em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		padding: 4px 6px;
		width: auto;
		}