/*
Colours:
Light grey page surround: #e9e9e9
Light grey borders: #cfcfcf
Dark grey footer: #999999

Grey text: #666666
red warning header: #dd2222
into text blue: #335588

Dialogue colours:
Dilogue old logo orange: #ff8b1e
orange: #f09b1c
red: #f83c30
Dark blue: #0c0c92
Light blue: #2994e6
Purple: #59004e
Green: #93b100

NOTE: some of these were taken from .jpg files and might not be accurate.
*/


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #e9e9e9;
	margin:0px;
}

.bodydiv {
	background: #ffffff url(images/topgrad.gif) repeat-x; /* This grad goes from #e9e9e9 to white */
	border: 2px solid #cfcfcf;
	border-top: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
	padding: 10px;
	margin: 3px;
	margin-bottom: 10px;
}

.ldiv {
	float: left;
}

/* Horrible layout hack for the "our partners" bit */
.rdiv {
	float: right;
	padding-left: 20px;
	height:130px;
	border-left: 2px dotted #000000;
}

.cdiv {
	clear: both;
}


/* Small uppercased links menus */
.minimenu {
	text-transform: uppercase;
}

.minimenu a {
	text-decoration: none;
}

.minimenu a:hover {
	text-decoration: underline;
}

/* The page container */
#wrap {
	margin: 0 auto;
	margin-top: 0px;
	/* This width is something like:
	 2 (columns) * ( #main.bodydiv.style.width (380px)
	 			+ 3px border per div
	 			+ 6px total margin per div
	 			+ 20px total padding per div) = ...px
	 Gives pixel perfect right hand edge... but not in IE
	 818px
	 */
	width: 850px;
	background: #ffffff;
	padding: 5px;
	padding-top: 10px;
	
}

/* 
HEADER
The whole top div with logos, menus etc 
*/
#header {

}


#header #logo {
	float: left;
	margin: 10px;
	border: 0px;
}

#header .minimenu {
	color: #666666;
	font-size: 11px;
	text-align: right;
	float: right;
	width: 250px;
	border-bottom: 2px dotted #999999;
	padding-bottom: 10px; 
	margin-bottom: 40px; /* This is a bit of a cheat to stop the "bubble" pic drifting too high  */
}

#header .minimenu a {
	color: #666666;
}

/* The menu with "wallpapers" "mp3s" etc */
#header #mainmenu {
	margin-left: 0px;
	float:left;
	clear: both;
	width: 260px;

}

#header #mainmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header #mainmenu li {
	color: #666666;
	font-size: 14px;
	text-transform: uppercase;
	border-bottom: 2px dotted #999999;
	padding-top: 9px;
	padding-bottom: 4px;
}

#header #mainmenu li a {
	color: #666666;
	text-decoration: none;
}

#header #mainmenu li a:hover {
	text-decoration: none;
}

#header #mainmenu .wallpapers a:hover {
	color: #59004e; /*purple*/
}

#header #mainmenu .mp3s a:hover {
	color: #93b100; /*green*/
}

#header #mainmenu .subscriptions a:hover {
	color: #2994e6; /*light blue*/
}

/* These should match the above */
.wallpapers {
	color: #59004e;
	border-color: #59004e;
}

.mp3s {
	color: #93b100;
	border-color: #93b100;
}

.subscriptions {
	color: #2994e6;
	border-color: #2994e6;
}


/* The big "speech bubble" .jpg at the top */
#header #bubble {
	float:right;
}


/*
MAIN PAGE CONTENT
*/
#main {
	width: auto;
	border: 0;
	padding: 0;
	margin: 0;
}

#main .halfdiv {
	width: 40%;
}

/* Main body items... */
#main .bodydiv {
	width: 390px;
}

/* Div big enough to put a PFIIframe in */
#main .pfidiv {
	width: 700px;
}

#main #pfiiframe {
	border: none;
	width: 650px;
	height: 670px;
}

#main .bodydiv h2 {
	font-size: 16px;
	width: 100%;
	font-family: serif;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
/*	border-bottom: 2px dotted #000000;*/
}



#main .bodydiv .headera {
	text-decoration: none;
}

#main .bodydiv a {
	text-decoration: none;
}

#main .bodydiv a:hover {
	text-decoration: underline;
}

/* Warning about the site really working */
#main #warning {
	/*width: 200px;*/
}

#main #warning h3 {
	font-size: 14px;
	color: #dd2222; /*non dialogue red*/
}

/* Message telling people to follow the Payforit instructions */
#main #instructions {
	font-size: 13px;
	color: #0c0c92;
	width: 200px;
}

/* The blue intro text */
#main #introduction {
	font-size: 13px;
}

/* The div containing the explination of the services */
#main #info {
	float: right;
}

#main #info ul {
	list-style: none ;
}

#main #info li {
	padding-bottom: 15px;
	padding-left: 10px;
	margin-left: -30px;
}



/*
FOOTER
*/
#footer {
	clear:both; /* This stops all the floating divs in the main body spilling out over the page */
	font-size: 11px;
	color: #ffffff;
	background: #999999;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align:left;
}

#footer #leftside {
	float: left;
}

#footer .minimenu {
	text-align:right;
}

#footer .minimenu a {
	color: #ffffff;
}