/* CSS Document */

/* ##### BODY ##### */
body {
	margin:0px;
	padding:0px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	
	color:#ffffff;
	background-color:#77618D;
}




/* ##### BASE STYLES ##### */
img { border:0px; }
a {
	color:#71C2FF;
	background-color:#77618D;
	text-decoration:none;
}
a:hover { text-decoration:underline; }





/* ##### SITE CONTIANER ##### */
/* Location: body */
div#site_container {

	width:754px;
	
	margin-left:auto;
	margin-right:auto;

}




/* ##### HEADER ##### */
/* Location: body > div#site_container */
div#header { 
	float:left;
	width:100%;
}

div#header img#logo { float:left; }

div#header img#img_rotate_1 {
	float:right;
	margin-top:21px;
}

div#header div#text {
	float:right;
	margin:133px 6px 0px 0px;
	width:147px;
	
	font-size:0.8em;
}





/* ##### MENU CONTAINER ##### */
/* Location: body > div#site_container */
div#menu_container {
	float:left;
	margin-bottom:10px;
}





/* ##### MENU ##### */
/* Location: body > div#site_cotainer > div#menu_container */
div#menu{
	float:left;
	width:280px;
	padding:0px 10px 0px 0px;
	margin:0px;
	
	font-size:0.8em;
}

div#menu ul{
	list-style-image:none;
	list-style-type:none;
	margin:0px;
	padding:0px;
}

div#menu ul li{
	background-image:url(images/menu_icon.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	padding:0px 0px 0px 22px;
	margin-bottom:5px;
}

div#menu ul li a{
	color:#ffffff;
	background-color:#77618D;

	font-weight:bold;
}

div#menu ul li a.selected{
	color:#FFCC33;
	background-color:#77618D;
}

div#menu ul li a:hover {
	color:#FFCC33;
	background-color:#77618D;
}





/* ##### ROTATE IMAGES LEVEL 2 */
/* Location: body > div#site_cotainer > div#menu_conatiner */
img#img_rotate_4 {
	float:right;
	margin:0px 0px 0px 6px;
}

img#img_rotate_3 {
	float:right;
	margin:0px 0px 0px 6px;
}

img#img_rotate_2 { float:right; }





/* ##### LEFT CHANNEL ##### */
/* Location: body > div#site_cotainer */
div#left_channel{
	float:left;
	width:425px;
	margin:0px 0px 20px 0px;
	
	line-height:15px;
	font-size:0.8em;
}

div#left_channel h1{
	padding:0px;
	margin:10px 0px 24px 0px;
	
	color:#71C2FF;
	background-color:#77618D;
	
	font-size:1.4em;
}





/* ##### RIGHT CHANNEL ##### */
/* Location: body > div#site_cotainer */
div#right_channel {
	float:right;
	width:300px;

	margin-top:6px;
}

div#right_channel img#img_rotate_6 {
	float:right;
	margin:0px 0px 0px 6px;
}

div#right_channel img#img_rotate_5 { float:right; }

div#right_channel div#content {
	float:left;
	margin:10px 0px 0px 0px;
	padding:10px;
	width:280px;
	
	color:#FFFFFF;
	background-color:#8A73A5;
	
	font-size:0.7em;
	font-weight:normal;
	line-height:15px;
}

div#right_channel div#content h2 {
	padding:0px;
	margin:0px 0px 10px 0px;
	
	font-size:1.3em;
}

div#right_channel div#content ul {
	list-style-type:none;
	list-style-image:none;
	padding:0px;
	margin:0px 0px 30px 0px;
}

div#right_channel div#content li {
	background-image:url(images/news_bullet.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	padding:0px 0px 0px 15px;
	margin-bottom:10px;
}

div#right_channel div#content span.title {
	font-weight:bold;
}

div#right_channel div#content a {
	padding:0px;
	
	color:#71C2FF;
	background-color:#8A73A5;
	
	font-weight:bold;
}

/* Amend the right channel content for when a caption on a dynamic page is displayed */
div#right_channel div#content div#caption{
	font-weight:bold;
}

div#right_channel div#content div#caption li {
	margin-bottom:0px;
}




/* ##### SPEECH BUBBLE ##### */
/* Location: body > div#site_container > div#right_channel > div#content */
div#speech_bubble_container {
	/* This is the main container for the speech bubble */
	float:left;
	width:256px;
	
	margin:10px 0px 0px 10px;
	
	background-image:url(images/speach_sliver.jpg);
}
* html div#speech_bubble_container { margin-left:5px; }

div#speech_bubble_container div#left_background {
	/* This div needs a bit of explaining. This divs purpose is to make sure the
	bottom left of the speech bubble image is in place. It does this by placing the image
	at the bottom left and containing div#right_background which contains div#speech_content
	which contains the content. So as the content grows the image will move down. */
	float:left;
	width:100%;
	
	background-image:url(images/speach_bottom_left.jpg);
	background-position:bottom left;
	background-repeat:no-repeat;
}

div#speech_bubble_container div#left_background div#right_background {
	/* This div needs a bit of explaining. This divs purpose is to make sure the
	bottom right of the speech bubble image is in place. It does this by placing the image
	at the bottom right and containing the div#speech_content which contains the content. So
	as the content grows the image will move down. */
	float:left;
	width:100%;
	
	background-image:url(images/speach_bottom_right.jpg);
	background-repeat:no-repeat;
	background-position:bottom right;
}

div#speech_bubble_container div#left_background div#right_background img#top_left {
	/* This image is the top left image for the speech bubble. */
	float:left;
}

div#speech_bubble_container div#left_background div#right_background div#speech_container {
	/* This div contains the content for the speech bubble. */
	float:left;
	width:100%;
}

div#speech_bubble_container div#left_background div#right_background img#top_right {
	/* This image is the top right image for the speech bubble. */
	float:left;
}





/* ##### FOOTER ##### */
/* Location: body > div#site_container */
div#footer{
	float:left;
	width:100%;
	
	margin:10px 0px 0px 0px;
	padding:0px 0px 30px 0px;
	
	font-size:0.7em;
}

div#footer div#left { 
	float:left;
}

div#footer div#right {
	float:right;
	text-align:right;
}