/*  
Theme Name: O2 Understanding your bill
Theme URI: http://www.02.co.uk
Description: O2 Understanding your bill
Version: 0.1
Author: The Tin Limited
Author URI: http://www.thetin.net
*/

/*
-----------------------------------------------------------------------------
STRUCTURAL ELEMENTS
-----------------------------------------------------------------------------*/


	* html
	{
	margin:0px;
	padding:0px;
	}
	
	body{
	background:#fff url('../images/backGround.jpg') no-repeat top left;
	font:1.0em/2.0em verdana, arial, helvetica, sans-serif;
	color:#ccc;
	margin:0px;
	padding:0px;
	text-align:left;
	}
	
	#wrap{
	width:760px;
	height:560px;
	margin:20px 20px 0px 0px;
	padding:0px 0px 20px 20px;
	text-align:left;
	float:left;
	position:relative;
	}
	#banner
	{
		width:762px;
		height:46px;
		padding:0px;
		margin:0px 0px 18px 0px;
		position:relative;
		float:left;
		clear:both;
		}
	
	h1#logo{
	width:46px;
	height:45px;
	background:url('../images/02Logo.gif') no-repeat;
	text-indent:-9999em;
	padding:0px;
	margin:0px;
	float:left;
	position:relative;
	}
	#banner h2{
	background:url('../images/urBill.gif') no-repeat;
	position:absolute;
	top:30px;
	right:0;
	text-indent:-9999em;
	width:197px;
	height:18px;
	padding:0px;
	margin:0px;
	z-index:1;
	}
/*
-----------------------------------------------------------------------------
NAVIGATION, MENU AND SUBMENUS
-----------------------------------------------------------------------------*/
	ul#nav{
	width:695px;
	height:22px;
	margin:0px;
	padding:0px;
	float:right;
	position:relative;
	list-style:none;
	border-bottom:1px solid #1D224C;
	font:0.60em/2.0em verdana,sans-serif;
	}
		
		ul#nav li
		{
		height:22px;
		padding:0px;
		margin:0px;
		position:relative;
		float:left;
		display:inline;
		list-style:none;
		}
			ul#nav li ul#subnav
			{
			display:block;
			position:absolute; 
			top:100%;
			left:0;
			width:178px;
			height:22px;
			list-style:none;
			margin:0px;
			padding:0px;
			background-color:#0C1442;
			color:inherit;
			}
			
			ul#nav li ul#subnav li
			{
			width:89px;
			height:22px;
			margin:0px;
			padding:0px;
			position:relative;
			float:left;
			}
			
			ul#nav li ul#subnav li a
			{
			width:89px;
			height:22px;
			display:inline;
			margin:0px;
			padding:0px;
			position:relative;
			float:left;
			}
			
			ul#nav li ul#subnav li a:hover,
			ul#nav li ul#subnav li.subCurrent
			{
			background-color:#202953;
			color:inherit;
			width:89px;
			height:22px;
			display:inline;
			margin:0px;
			padding:0px;
			position:relative;
			float:left;
			}
		
		
		ul#nav li a
		{
		height:22px;
		width:89px;	
		color:#fff; 
		background-color:inherit;
		position:relative;
		float:left;
		padding:0px;
		margin:0px;
		display:inline;
		text-decoration:none;
		text-align:center;
		font-weight:bold;
		}
		ul#nav li a:hover,
		ul#nav li.current
		{
		background-color:#61667B;
		color:#fff; 
		padding:0px;
		margin:0px;
		position:relative;
		float:left;
		font-weight:bold;
		text-decoration:none;
		}
		
		/*-----------------
		menu and navigation
		------------------*/
		ul#menu
		{
			width:230px;
			padding:0px;
			position:relative;
			margin:8px 0 0 9px;
			list-style:none;
			font:0.70em/1.50em verdana, sans-serif;
			
			
			
			}
			ul#menu li
			{	
				
				margin:0px;
				padding:0px;
				float:left;
				position:relative;
				display:inline;
				}
			
			ul#menu li a
			{
				width:18px;
				height:17px;
				color:#fff; 
				background-color:inherit;
				position:relative;
				float:left;
				padding-bottom:1px;
				margin-right:2px;
				display:inline;
				text-decoration:none;
				text-align:center;
				vertical-align:middle;
				border:1px solid #fff;
				}
		    
			ul#menu li a:hover,
			ul#menu li a.active
			
			{
				background-color:#00CCCC;
				color:#fff; 
				}
			/*-----
			SUBMENUS
			------------*/
			#onlineSubmenus,
			#submenus {
				
				
				width:240px;
				height:140px; 
				padding:0px;
				margin:10px 0 0 0px;
				position:relative;
				float:left; 
				font:0.59em/1.70em verdana,sans-serif;
				text-align:left;
				background-color:inherit;
				color:#fff; 
				}
				
			#submenus dl {
				height:150px; 
				width:240px;
				display:block;
				margin:0px;
				padding:0px;
				}
			 
			#submenus dt a 
			{
				background-color:#404B6A;
				color:#fff; 
				display:block; 
				width:234px;
				padding-left:6px;
				margin:0px; 
				text-align:left;
				position:relative;
				float:left;
				outline:none;
				text-decoration:none;
				}

			#submenus dd,
			#submenus a.onSubUsed,
			#submenus a.onSub,
			#submenus a.sub {
				display:block; 
				width:240px;
				padding:0px;
				margin:0.06em 0 0 0em;
				text-align:left;
				text-decoration:none; 
				text-indent:10px;
				color:#fff;  
				background-color:inherit;
				position:relative;
				float:left;
				
				}
				#submenus a.onSub
				{
					text-indent:15px;}
				#submenus a.onSubUsed
				{
					text-indent:30px;}	
			#submenus a.onSubUsed:hover,		
			#submenus a.onSub:hover,
			#submenus a.active,
			#submenus a.sub:hover
			{
				background-color:#404B6A;
				color:#fff;
				width:240px;
				padding:0px;
				margin:0.06em 0 0 0em;  
				display:block; 
				outline:none;
				}	
	
	#submenus a.subIndent {
				display:block; 
				width:240px;
				padding:0px;
				margin:0.06em 0 0 0em; 
				text-align:left;
				text-decoration:none; 
				text-indent:20px;
				color:#fff; 
				background-color:inherit;
				position:relative;
				float:left;
				}
			#submenus a.subIdent:hover
			{
				background-color:#404B6A;
				color:#fff;
				width:240px;
				display:block; 
				
				}	
/*
-----------------------------------------------------------------------------
CONTENT, LEFT AND RIGHT PANELS
-----------------------------------------------------------------------------*/				
	#content{
	width:760px;
	height:495px;
	border:1px solid #6BAED7;
	position:relative;
	float:left;
	padding:0px;
	margin:0px;
	border-style:solid;
	border-width:1px;
	}	
	#leftPanel
	{
	width:239px;
	height:495px;
	background:#fff url('../images/contBg.gif') repeat-x top left;
	color:red;
	float:left;
	position:relative;
	display:block;
	}
	
	
	    #navigation
	    {
		width:239px;
		height:182px;
		margin:0px;
		padding:0px;
		position:relative;
		clear:left;
		
		}
		#leftContent
		{
		color:#333333;
		background-color:inherit;
		font:0.70em/1.1em verdana, Helvetica, sans-serif;
		margin:0px;
		padding:10px;
		text-align:left;
		overflow:hidden;
		}
		
		#leftContent h3
		{
			font-size:98%;
			color:#333;
			background-color:inherit;
			margin:0 0 10px 0;
			padding:0px;
			}
		#leftContent p
		{
			margin:0px;
			padding:0px;
			}
			
			/*#contentDetails	
			{
			overflow:hidden;
			height:305px;
			}
			.txt 
			{
			display:block; 
			height:305px;}*/	
			
			.shownPanel {
			display: block;
			/*height:200px;*/
			}
			.hiddenPanel {
			display: none;
			}
	
	#rightPanel
	{
	width:520px;
	float:right;
	position:relative;
	clear:right;
	}
	
		#rightContent
		{
			
			width:332px;
			height:469px;
			margin-left:80px;
			margin-top:10px;
			padding:0px;
			
			}
			
		#rightContent img
		{
			padding:0px;
			margin:0px;
			display:block;
			}	
		#onlineContent
		{	
			width:520px;
			float:left;
			position:relative;
			padding:0px;
			margin:0px;
			
			}
			
		#imageHolder
		{
			width:500px;
			height:360px;
			padding:10px;
			margin:0px;
			}	
		#onlineTxt
		{
			
			background:#fff url('../images/txtBg.gif') repeat-x top left;
			color:#333;
			width:520px;
			height:115px;
			padding:0px;
			margin:0px;
			overflow:auto;
			font:0.70em/1.1em verdana, Helvetica, sans-serif;
			}
			
			#onlineTxt p
			{
				margin:0px;
				padding:10px 10px;
				}	
			#onlineTxt h3
			{
				font-size:98%;
				color:#333;
				background-color:inherit;
				margin:0px;
				padding:10px 0px 0px 10px;
				}
				
				#onlineTxt .shownPanel 
				{
				
				display: block;
				margin:0px;
				}
				
				#onlineTxt .hiddenPanel {
				display: none;
				}
/*
-----------------------------------------------------------------------------
CLEARING ALL FLOATS
-----------------------------------------------------------------------------*/				
	.clearFix
	{
		margin:0px;
		padding:0px;
		height:0px;
		clear:both;
		}