@charset "utf-8";
* { margin: 0;padding: 0;
}
html { font-size: 100%;
}
body {
	background: #000000;
	margin: 10px 0 10px 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #ffffff;
}
img { border: 0;
}
.oneColLiqCtrHdr #container {
	width: 720px;  /* this will create a container 80% of the browser width */
	background: #000000;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #eeeeee;
	text-align: left; /* this overrides the text-align: center on the body element. */
	color:#FFFFFF;
}
.oneColLiqCtrHdr #header {
	background: url(../images/header.jpg) 0 0 no-repeat;
	height: 189px; 
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#flash {
	z-index:400;
	position:absolute;
	top:13px;
	left: 274px;
	width: 430px;
	height: 189px;
	margin: 0 auto;
	padding:0;
}


/*--------------- IMAGE REPLACEMENT TECHNIQUE ---------------*/

h1 {width : 720px; height : 189px; margin : 0; position : relative;
}
#header h1 span { background : url(../images/header.jpg) no-repeat 0 0;	width : 720px; height : 189px; position : absolute;	top : 0;	left : 0;
}
#header2 h1 span { background : url(../images/header2.jpg) no-repeat 0 0;	width : 720px; height : 189px; position : absolute;	top : 0;	left : 0;
}
#header3 h1 span { background : url(../images/header3.jpg) no-repeat 0 0;	width : 720px; height : 189px; position : absolute;	top : 0;	left : 0;
}
#header4 h1 span { background : url(../images/header4.jpg) no-repeat 0 0;	width : 720px; height : 189px; position : absolute;	top : 0;	left : 0;
}
h1 a { cursor : pointer; height : 100%; display : block;
}


/*-------------------------- NAV ----------------------------*/

.oneColLiqCtrHdr #nav { background:url(../images/menuhome2.jpg) no-repeat 0 0; height:34px; margin:0; padding: 0 0 0 30px;
}
.oneColLiqCtrHdr #nav2 { background:url(../images/menulaw2.jpg) no-repeat 0 0; height:34px; margin:0; padding: 0 0 0 30px;
}
.oneColLiqCtrHdr #nav3 { background:url(../images/menueffects2.jpg) no-repeat 0 0; height:34px; margin:0; padding: 0 0 0 30px;
}
.oneColLiqCtrHdr #nav4 { background:url(../images/menucomments2.jpg) no-repeat 0 0; height:34px; margin:0; padding: 0 0 0 30px;
}
#nav ul, #nav2 ul, #nav3 ul, #nav4 ul{
	margin: 0; padding: 0; display: inline; list-style-type: none;
}

#home_nav, #laws_nav, #effects_nav, #comments_nav, #play_nav, #news_nav, #comp_nav {
	float:left; margin: 0;	padding: 0;	display: inline; list-style-type: none;
}

#home_nav a {
	display:block; width:57px; height:30px;	margin: 0;	padding: 0;	background: url(../images/homewht.gif) 0 0 no-repeat;
}
#home_nav a:hover, #home_nav a.active{	
	background-position: 0 -30px;
}
#laws_nav a {
	display:block; width:136px; height:30px; margin: 0;	padding: 0;	background: url(../images/lawwht.gif) 0 0 no-repeat;
}
#laws_nav a:hover, #laws_nav a.active{	
	background-position: 0 -30px;
}
#effects_nav a {
	display:block; width:68px; height:30px;	margin: 0;	padding: 0;	background: url(../images/effectswht.gif) 0 0 no-repeat;
}
#effects_nav a:hover, #effects_nav a.active{	
	background-position: 0 -30px;
}
#comments_nav a {
	display:block; width:102px; height:30px;	margin: 0;	padding: 0;	background: url(../images/commentswht.gif) 0 0 no-repeat;
}
#comments_nav a:hover, #comments_nav a.active{	
	background-position: 0 -30px;
}
#play_nav a {
	display:block; width:127px; height:30px;	margin: 0;	padding: 0;	background: url(../images/gamewht.gif) 0 0 no-repeat;
}
#play_nav a:hover, #play_nav a.active{	
	background-position: 0 -30px;
}
#news_nav a {
	display:block; width:55px; height:30px;	margin: 0;	padding: 0;	background: url(../images/news.gif) 0 0 no-repeat;
}
#news_nav a:hover, #news_nav a.active{	
	background-position: 0 -30px;
}
#comp_nav a {
	display:block; width:108px; height:30px;	margin: 0;	padding: 0;	background: url(../images/competition.gif) 0 0 no-repeat;
}
#comp_nav a:hover, #comp_nav a.active{	
	background-position: 0 -30px;
}
.invisibleLink { position:absolute; left: -1000em;
}
#skipNav { position:absolute; left: -1000em;
}


/* -----------------------CONTENT ----------------------------------*/

.oneColLiqCtrHdr #mainContent {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#000000 url(../images/homeunder.jpg) 0 30px no-repeat;
	margin: 0px;
}
.oneColLiqCtrHdr #mainContent2 {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#000000 url(../images/lawunder.jpg) 0 30px no-repeat;
	margin: 0px;
}
.oneColLiqCtrHdr #mainContent3 {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#000000 url(../images/efftcsunder.jpg) 0 30px no-repeat;
	margin: 0px;
}
.oneColLiqCtrHdr #mainContent4 {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background:#000000 url(../images/commentsunder.jpg) 0 30px no-repeat;
	margin: 0px;
}
.oneColLiqCtrHdr #contentContainer { padding: 15px; color:#FFFFFF;
}
.oneColLiqCtrHdr #listenDiv { background:url(../images/mindBody.jpg) 0 0 repeat-y;
}
.oneColLiqCtrHdr #footer { 
	width: 720px;
	margin: 0 auto;
	padding: 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#000000;
	text-align:left;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrtAlignRight { float:right; text-align:right;
}
.fltrtAlignRight a { color:#FFFFFF;
}
.fltrtAlignRight a:hover { color:#cccccc; text-decoration:none;
}
table {border-collapse: collapse;
}
td {padding: 0 10px 0 0; 
}
#audio { width: 690px;
}
td.left { text-align:left; width: 200px;
}
td.right { text-align:right; vertical-align:middle;
}
caption {text-indent:-3000em;
}
#longDesc { text-indent:-3000px; width: 500px;
}
/* ----------------- FONTS ----------------------*/
h2 {color: #34cc6a; font: bold 1.4em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; line-height: 30px;
}
h3 { font: bold 1.2em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
}
p, ul {font: 1.2em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; margin-bottom: 1em; color:#FFFFFF;
}
.hr {height: 25px; background:#000000 url(../images/hr.gif) 0 0 repeat-x;
}
.list { margin-left: 30px; list-style-image:url(../images/bullet.gif); list-style-type:disc;
}
.list2 { margin-left: 30px;
}
.green {color: #78b68e; font-weight: bold;
}
.blue { color: #2298b7; font-weight: bold;
}
.yellow { color: #FFCC33; font-weight: bold;
}
a {color:#CCCCCC; text-decoration: underline;
}
a:hover { color:#FFFFFF; text-decoration: none;
}

/*------------------IMAGES ----------------------*/

.drugDriving { text-indent: -3000px;
}
#listen { width: 690px; height: 79px; background: url(../images/mind.jpg) 0 0 no-repeat;
}
#footerImage {width: 370px; height: 35px; background:url(../images/wcag2.gif) 0 0 no-repeat; text-align:left;
}
#sound {width: 69px; height: 28px; background:url(../images/listen.gif) 0 0 no-repeat; text-align:left;
}
#theLaw {width: 79px; height: 22px; background:url(../images/thelaw.gif) 0 0 no-repeat; text-align:left;
}
#thePenalties {width: 137px; height: 25px; background:url(../images/penalties.gif) 0 0 no-repeat; text-align:left;
}
#reconstruction {width: 487px; height: 30px; background:url(../images/click-law.gif) 0 0 no-repeat; text-align:left;
}
#effects {width: 130px; height: 26px; background:url(../images/theeffects.gif) 0 0 no-repeat; text-align:left;
}
#cannabis {width: 152px; height: 105px; background:url(../images/drugs-weed.gif) 0 0 no-repeat; text-align:left;
}
#cocaine {width: 140px; height: 105px; background:url(../images/drugs-coke.jpg) 0 0 no-repeat; text-align:left;
}
#ecstacy {width: 134px; height: 105px; background:url(../images/drugs-ectasy.jpg) 0 0 no-repeat; text-align:left;
}
#prescription {width: 244px; height: 105px; background:url(../images/drugs-pres.jpg) 0 0 no-repeat; text-align:left;
}
#presc {width: 244px; height: 105px; background:url(../images/drugs-pres.jpg) 0 0 no-repeat; text-align:left;
}
#heroin {width: 244px; height: 105px; background:url(../images/drugs_heroin.jpg) 0 0 no-repeat; text-align:left;
}
#lsd {width: 244px; height: 105px; background:url(../images/drugs_lsd.jpg) 0 0 no-repeat; text-align:left;
}
#speed {width: 244px; height: 105px; background:url(../images/drugs_speed.jpg) 0 0 no-repeat; text-align:left;
}
#herion_effects {width: 244px; height: 105px; background:url(../images/drugs-heroin.jpg) 0 0 no-repeat; text-align:left;
}
#comments {width: 114px; height: 29px; background:url(../images/thecomments.gif) 0 0 no-repeat; text-align:left;
}
#news {width: 79px; height: 22px; background:url(../images/newsTitle.gif) 0 0 no-repeat; text-align:left;
}
#ipod {width: 150px; height: 480px; background:url(../images/ipod.jpg) 0 0 no-repeat; text-align:left; float: left; padding-right: 25px;
}
#ipod2 {width: 480px; height: 198px; background:url(../images/ipod2.jpg) 0 0 no-repeat; text-align:left; float: right; 
}
#comp {width: 150px; height: 29px; background:url(../images/competitionTitle.gif) 0 0 no-repeat; text-align:left; 
}
#survey {width: 177px; height: 133px; background:url(../images/survey.jpg) 0 0 no-repeat; margin-left: 180px;
}
#larsoa {width: 106px; height: 31px; background:url(../images/Larsoa_London_Logo.gif) 0 0 no-repeat;
}
#poster1 {width: 300px; height: 426px; background:url(../images/poster1.png) 0 0 no-repeat;
}
#poster2 {width: 300px; height: 426px; background:url(../images/poster2.png) 0 0 no-repeat;
}
#poster {width: 650px; height: 426px; background:url(../images/poster.png) 0 0 no-repeat;
}
#fit1 {width: 670px; height: 208px; background:url(../images/fit_test.jpg) 0 0 no-repeat;
}
#fit2 {width: 670px; height: 272px; background:url(../images/fit_test2.jpg) 0 0 no-repeat;
}
/* TEXT RESIZER */

#text_resize_div{
	text-align:right;
	color:#FFFFFF;
}
#text_resize_div a{
	color:#FFFFFF;
}