/* CSS Document */

*
{
	margin: 0;
	padding: 0;
}

/* TAG OVERRIDES */
	body
	{
		height: 100%;
		width: 100%;
		position: absolute;
		background: #7E5BA9 url(images/body_background.jpg) center center repeat-y;
	}

/* GENERAL CLASSES */
	a.button_play
	{
		display: block;
		width: 59px;
		height: 20px;
		background: url(images/button_play.gif) no-repeat top left;
	}
	a.button_play:hover { background: url(images/button-o_play.gif) no-repeat top left; }

	a.button_learn_how
	{
		display: block;
		width: 82px;
		height: 20px;
		background: url(images/button_learn_how.png) no-repeat top left;
	}
	a.button_learn_how:hover {	background: url(images/button-o_learn_how.png) no-repeat top left; }

	a.button-home
	{
		display: block;
		width: 59px;
                /*width: 198px;*/
		height: 20px;
		background: url(images/button_home.png) no-repeat top left;
		margin-left: 45px;
		/*margin-top: 4px;*/
	}
	a.button-home:hover {	background: url(images/button-o_home.png) no-repeat top left; }
	a.button-blog
	{
		display: block;

		width: 59px;
                /*width: 198px;*/
		height: 20px;
		background: url(images/button_blog.png) no-repeat top left;
		/*margin-left: 118px;*/
                margin-left: 24px;
	}
	a.button-blog:hover {	background: url(images/button-o_blog.png) no-repeat top left; }

	.clear_right
	{
		clear: right;
		font-size: 0;
	}

	.float_right
	{
		float: right;
	}

	.cleaner
	{
		clear: both;
		font-size: 1px;
		line-height: 0;
	}

/* LAYOUT */
	#body
	{
		margin: 0 auto;
		width: 748px;
	}
	
	#container1
	{
		background: url(images/background.jpg) no-repeat top center;
	}
	
	#home
	{
		display: block;
		position: absolute;
		width: 204px;
		height: 75px;
	}
	
	#header
	{
		height: 90px;
		background: url(images/header.png) no-repeat top left;
	}
	
	#header a.button
	{
		display: block;
		height: 28px;
		position: absolute;
		margin-top: 38px;
		z-index: 9;
	}
	
	a#button_about_the_centre	{	width: 128px;	margin-left: 228px;	}
	a#button_about_the_centre:hover { background: url(images/top_button-o_about_the_centre.gif) no-repeat top left; }	
	a#button_about_the_centre.selected { background: url(images/top_button-o_about_the_centre.gif) no-repeat top right; cursor: default; }
	a#button_plan_your_visit { width: 118px; margin-left: 345px; }
	a#button_plan_your_visit:hover { background: url(images/top_button-o_plan_your_visit.gif) no-repeat top left; }	
	a#button_plan_your_visit.selected { background: url(images/top_button-o_plan_your_visit.gif) no-repeat top right; cursor: default; }			
	a#button_shop_online { width: 141px; margin-left: 451px; }
	a#button_shop_online:hover { background: url(images/top_button-o_call_box.gif) no-repeat top left; }			
	a#button_shop_online.selected { background: url(images/top_button-o_call_box.gif) no-repeat top right; cursor: default; }				
	a#button_get_help { width: 91px; margin-left: 582px; }
	a#button_get_help:hover { background: url(images/top_button-o_get_help.gif) no-repeat top left; }	
	a#button_get_help.selected { background: url(images/top_button-o_get_help.gif) no-repeat top right; cursor: default; }				
        a#button_support_us { width: 87px; margin-left: 663px; }
        a#button_support_us:hover { background: url(images/top_button-o_support_us.gif) no-repeat top left; }
        a#button_support_us.selected { background: url(images/top_button-o_support_us.gif) no-repeat top right; cursor: default; }
	//a#button_online_safety_week{ width: 130px; margin-left: 620px; }
	//a#button_online_safety_week:hover { background: url(images/top_button-o_online_safety_week.gif) no-repeat top left; }	
	//a#button_online_safety_week.selected { background: url(images/top_button-o_online_safety_week.gif) no-repeat top right; cursor: default; }				

	#left
	{
		width: 10px;
		height: 510px; /* ensure it's height encompasses the background height */
		float: left;
	}
	
	#left_menu
	{

		background: url(images/left_menu_background.png) no-repeat top;		
	}
	
	#menu_area
	{
		width: 145px;
		margin-left: 10px;
		padding-top: 21px;
	}
	
	#left_menu a.button
	{
		display: block;
		width: 145px;
		height: 26px;
		position: relative;
		margin-top: 7px;
	}
	
	#left_menu a.first
	{
		margin-top: 0;
	}
	
	a#button_kids_zone { background: url(images/left_button_kids_zone.png) no-repeat top right; }
	a#button_kids_zone:hover { background: url(images/left_button-o_kids_zone.png) no-repeat top right; }
	a#button_parents { background: url(images/left_button_parents.png) no-repeat top right; }
	a#button_parents:hover { background: url(images/left_button-o_parents.png) no-repeat top right; }
	a#button_teachers {	background: url(images/left_button_teachers.png) no-repeat top right; }
	a#button_teachers:hover {	background: url(images/left_button-o_teachers.png) no-repeat top right; }

	a#button_how_to_use {	background: url(images/left_button_HowToUse.png) no-repeat top right; }
	a#button_how_to_use:hover {	background: url(images/left_button-o_HowToUse.png ) no-repeat top right; }
	a#button_how_to_use.selected {	background: url(images/left_button-o_HowToUse.png ) no-repeat top right; }

	a#button_safe_surf {	background: url(images/left_button_safeSurf.png) no-repeat top right; }
	a#button_safe_surf:hover {	background: url(images/left_button-o_safeSurf.png ) no-repeat top right; }
	a#button_safe_surf.selected {	background: url(images/left_button-o_safeSurf.png ) no-repeat top right; }
        a#button_online_safety_week { background: url(images/blue_left_button_OnlineSafety.png) no-repeat top left; }
	a#button_online_safety_week:hover { background: url(images/left_button-o_OnlineSafety.png) no-repeat top left; }	
	a#button_online_safety_week.selected { background: url(images/left_button-o_OnlineSafety.png) no-repeat top right; cursor: default; }	
	
	#middle
	{
		width: 564px;
		float: right;
	}
	#sm
	{
		float: right;
		margin-top: 463px;
	}
	
/* COMMON ID SELECTORS */
	#home_button
	{
		/*width: 115px;*/
		width: 198px;
		height: 38px;
		position: absolute;
		background: url(images/home_button_area.png) no-repeat top left;
		/*margin-left: 635px;*/
		margin-left: 552px;
		margin-top: 4px;
	}
        ul#home_blog_button {
                list-style-type: none;
        }
        ul#home_blog_button li {
                display: inline;
        }
        ul#home_blog_button li a{
                float: left;
        }
	/*#home_button a
	{
		position: absolute;
		margin-left: 44px;
		margin-top: 4px;
	}*/	
	
	#footer
	{
		text-align: center;
		margin-top: 20px;
		color: #35559D;
		clear: right;
	}
	#footer,
	#footer a
	{
		text-decoration: none;
		font-size:9px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #35559D;
	}
	#footer a:hover
	{
		text-decoration: underline;
	}
	
	a#commerx
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #F3171F;
		font-weight: bold;
	}
	a#commerx span.company
	{
		font-size: 12.5px;
	}
	a#commerx span.company span.sub
	{
		color: Black;
	}
	a#commerx:hover
	{
		text-decoration: none;
	}
	
#did-you-know
{
	position: absolute;
	width: 246px;
	height: 38px;
	background: url(images/did_you_know.png) no-repeat center left;
	margin-top: 84px;
	margin-left: 486px;
	z-index: 99;
}
#did-you-know p
{
	display: block;
	width: 174px;
	height: 40px;
	background-color: #321B6D;
	margin-left: 59px;
	overflow: hidden;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #fff;	
	padding-top: 6px;
	padding-right: 9px;
	padding-left: 3px;
}

#did-you-know a
{
	color: #50C842;
}
#did-you-know a:hover
{
	text-decoration: none;
}	

div#menu_content {
  position:relative;
  padding-top:11px;
  padding-left:10px;
  
}

#donate_now {
  margin-top:11px;
}

ul#quotes {
  display: block;
  margin-top:11px;
  height: 80px;
  width: 150px;
}

ul#quotes li{
  background-color: #9691dc;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #fff;
  list-style: none;
}
