/* CSS Document */

/*--START TOP HASH INCLUDE--*/

/*focus tab state colours for all default O2 colours
a:active, a:focus, a:active span,  a:focus span {
	text-decoration:underline !important;
	background:red !important; 
	color:#FFF !important;
}*/

body {
	text-align:center;
	}


#main {
	margin-left:auto !important;
	margin-right:auto !important;
	width:755px;
	text-align:left;
	}
 
/*to make the top header float*/
#headerfloat {
	margin-left:auto !important;
	margin-right:auto !important;
	}
	

#nav {
	font-size: 0.9em;
	width: 765px;
	background-repeat:repeat-x;
	height:28px;
	margin-left:30px;
	background-color:#355295;
	border-right: 2px #7B9AD2 solid;
	border-left: #435DA1 solid 2px;
	margin-left:auto;
	margin-right:auto;
	border-top: #304d91 solid 2px;
	border-bottom: #5a74b2 solid 2px;
	margin-bottom:5px;
	}
	
html>body #nav{
	width:761px;
	}
	
#nav ul {
	float: left;
	list-style: none; 
	padding: 0; 
	margin: 0;
	background-color:#355295;
	}


li#navhome a {
	border-left:none; 
	}

li#navazindex {
	border-right: #7B9AD2 solid 2px; 
	}


#nav li {
	float:left;
	 line-height: 100%; 
	}

#nav a {
	padding: 10px 1px 5px 1px; 
	display: block;
	font-weight: bold; 
	text-decoration: none; width/**/:/**/1%; white-space:nowrap; 
	border-left: #728bcb solid 2px; 
	color: #FFF;
	}

html>/**/body #nav a {width:auto;}

* html #nav a {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.open2.net/open2static/graphics/top_tabs_gradient.png', sizingMethod='scale');
	}
	
html>body #nav a { 
	background-image:url(http://www.open2.net/open2static/graphics/top_tabs_gradient.png);
	background-repeat: repeat-x !important; 
	background-position: top !important;
	filter: none;
	}


#header, #topnavhome {
	background-image:url(http://www.open2.net/open2static/graphics/gradient_topbanner.jpg);
	/*background-image: url(http://www.open2.net/open2static/graphics/background_blue.jpg);*/
	background-position: 0px 0px;
	background-repeat: repeat-x;
	/*background-color: #346bcd;*/
	}
	
	
	
	
/*put highlight graphic onto title bars*/	
* html .titlehighlight {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.open2.net/open2static/graphics/title_gradient.png', sizingMethod='scale')!important;
	height: 1%;
	}
	
html>body .titlehighlight { 
	background-image:url(http://www.open2.net/open2static/graphics/title_gradient.png) !important;
	background-repeat: repeat-x !important; 
	background-position: top !important;
	filter: none;
	height: auto;
	}

	
	
	
	
/*put highlight graphic onto title bars on the bottom slots on the tv index page to get around the 1px div clear that pushes the graphic down */	
* html .titlehighlight2 {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.open2.net/open2static/graphics/title_gradient2.png', sizingMethod='scale')!important;
	height: 1%;
	}
	
html>body .titlehighlight2 { 
	background-image:url(http://www.open2.net/open2static/graphics/title_gradient2.png) !important;
	background-repeat: repeat-x !important; 
	background-position: top !important;
	filter: none;
	height: auto;
	}
	
	
	

/* open2 logo in top banner*/
#header img {
	padding-left:3px;
	float: left;
	width: 194px;
	height: 69px
	}

#header div {
	width: 765px;
	/*margin-left:auto !important;
	margin-right:auto !important;*/
	}

/* ou logo in top banner*/
#header img.oulogo {
	float: left;
	margin-left: 360px;
	width: 71px;
	height: 60px
	}

/* bbc logo in top banner*/
#header img.bbclogo {
	float:right;
	margin-top:19px;
	width: 93px;
	height: 27px
	}

#header .clearwhite {
	width: 100%;
	}

.clearwhite {
	background-color: #fff;
	}

#headersearch {
	float:left;
	padding: 5px 1px 2px 1px;
	display: block;
	width: 226px;
	}
	
html>body #headersearch  {
	min-width: 224px;
	width: auto;
	}

* html #headersearch {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.open2.net/open2static/graphics/top_tabs_gradient.png', sizingMethod='scale');
}

html>body #headersearch {
	background-image:url(http://www.open2.net/open2static/graphics/top_tabs_gradient.png);
	position:top;
	background-repeat:repeat-x;
}

* html #headersearch input {
	position: relative;
}






.navsearch {
	padding: 2px 1px 0 1px;
	}

/* overstate for top tabs*/
#nav a:hover, #nav a:active, #nav a:focus, #topnavhome #navhome a:link, #topnavhome #navhome a:visited, #topnavhome #navhome a:hover, #topnavhome #navhome a:active, 
#topnavo2today #navopen2today a:link, #topnavo2today #navopen2today a:visited, #topnavo2today #navopen2today a:hover, #topnavo2today #navopen2today a:active, 
#topnavprogrammes #navprogrammes a:link, #topnavprogrammes #navprogrammes a:visited, #topnavprogrammes #navprogrammes a:hover, #topnavprogrammes #navprogrammes a:active,
#topnavdiscuss #navdiscussing a:link, #topnavdiscuss #navdiscussing a:visited, #topnavdiscuss #navdiscussing a:hover, #topnavdiscuss #navdiscussing a:active,  
#topnavlearning #navlearning a:link, #topnavlearning #navlearning a:visited, #topnavlearning #navlearning a:hover, #topnavlearning #navlearning a:active, 
#topnavindex #navazindex a:link, #topnavindex #navazindex a:visited, #topnavindex #navazindex a:hover, #topnavindex #navazindex a:active {
	
	background-color:#bfcae3;
	color: #333 !important;
	}

#navhome a {
	width: 53px;
	}

html>body #navhome a {
	min-width: 51px;
	width: auto;
	}

#navopen2today a {
	width: 113px;
	}

html>body #navopen2today a {
	min-width: 109px;
	width: auto;
	}

#navprogrammes a {
	width: 108px;
	}

html>body #navprogrammes a {
	min-width: 104px;
	width: auto;
	}

#navlearning a {
	width: 78px;
	}

html>body #navlearning a {
	min-width: 74px;
	width: auto;
	}

#navdiscussing a {
	width: 88px;
	}

html>body #navdiscussing a {
	min-width: 84px;
	width: auto;
	}

#navazindex a {
	width: 93px;
	}

html>body #navazindex a {
	min-width: 89px;
	width: auto;
	}

div.clearwhite {
	clear: both;
	height: 1px !important;
	font-size: 1px !important;
	background: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	}
	
/*--END TOP HASH INCLUDE--*/



/*--START Bottom HASH INCLUDE--*/
#btnav {
	width: 761px;
	margin-left:auto !important;
	margin-right:auto !important;
	}

#btnav ul {
	list-style: none; 
	padding: 0; 
	margin: 10px 5px; 
	white-space: nowrap; 
	text-align: center;
	font-size:0.9em;
	}

#btnav li {
	display: inline; 
	padding: 0 0.2em 0 0.8em; 
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #666;
	}

#btnav a {
	font-weight: normal; 
	text-decoration: none;
	font-size: 0.9em;
	color: #666;
	}

#btnav a:hover {
	text-decoration: underline;
	color: #666;
	}

#btnav li.help {
	border: 0; 
	padding-left: 0;
	}
/*--END Bottom HASH INCLUDE--*/



/* Font resizer */

/*focus tab state colours for header, breadcrumbs, font resizer and footer*/
.hide a:active, .hide a:focus, #bread a:active, #bread a:focus, #btnav a:focus, #btnav a:active {
	text-decoration:underline !important;
	background:#143A74 !important; 
	color:#FFF !important;
	}
	
/*focus tab state colours for social bookmarks - nb needs the extensive specificity in order to over-ride the prog-specific bg color for these states*/
.open2articletext .socialbookmarks li a:active, .open2articletext .socialbookmarks li a:hover, .open2articletext .socialbookmarks li a:focus {
	border-bottom: 2px solid #143A74 !important;
	padding-bottom: 2px;
	background-color: transparent !important
   }

#bread {
	width: 751px;
	height: 15px;
	margin-top: 4px; /* only 4px as there is a 1px white clearing div at the end of the header, together equals 5px of whitespace */
	/*margin:0px auto;*/
	text-align:left;
	margin-left:auto !important;
	margin-right:auto !important;
	}

html>body #bread {
	height: auto;
	min-height: 15px;
	}

#bread div {
	float: right;
	}

#bread div.youare {
	float: left;
	font-size: 0.9em;
	width: 580px;
	padding-left: 100px;
	text-indent: -95px;
	}

html>body #bread div.youare {
	width: 480px;
	}

#bread div.clear {
	float:none;
	}

.youare a {
	white-space:nowrap;
	text-decoration:none;
	color: #000 ;
	}

.youare a:link, .youare a:hover, .youare a:visited, #bread p a:link, #bread p a:hover, #bread p a:visited {
	color: #000 ;
	}

.youare a:hover, #bread p a:hover {
	text-decoration:underline;
	}
	
.youare a:active, #bread p a:active {
	color: #FFF !important;
	}

/*info for font size*/
#bread div p {
	font-size:1em;
	float:left;
	margin: 0 2px 0 8px;
	font-weight:normal;
	height: 17px; 
	line-height: 17px;
	}

html>body #bread div p {
	min-height: 17px;
	height: auto
}

ul#fonts {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}

ul#fonts li {
	margin-left:5px;
	float:left;
}

ul#fonts li a:link, ul#fonts li a:visited {
	text-decoration: none; 
	font: 9px verdana,arial,helvetica,sans-serif,serif; 
	border-style: solid;
	border-width: 1px;
	height: 15px; 
	line-height: 15px; 
	width: 15px; 
	text-align: center; 
	display: block;
	float: left;
	color: #000; 
	background: #FFF; 
	border-color: #000;
}

html>body ul#fonts li a, html>body ul#fonts li a:visited {
	min-width: 15px;
	width: auto;
}

/*hover state*/
ul#fonts li a:hover, ul#fonts li a:active, ul#fonts li a:focus {
	border-color: #1B52AC !important;
}

/*hit state*/
ul#fonts li.sma a:link, ul#fonts li.sma a:visited, ul#fonts li.fon1 a:link, ul#fonts li.fon1 a:visited {
	cursor/**/:/**/text;
	border-color: #1B52AC;
}

ul#fonts li.med a, ul#fonts li.med a:visited, ul#fonts li.fon2 a, ul#fonts li.fon2 a:visited {
	font-size: 14px;
}

ul#fonts li.lar a, ul#fonts li.lar a:visited, ul#fonts li.fon3 a, ul#fonts li.fon3 a:visited {
	font-size: 18px;
}

#headersearch .search {
 	margin-left:3px;
	background-image:url(http://www.open2.net/open2static/graphics/searchicon.gif);
	background-position: 2px 2px;
	background-repeat:no-repeat;
	padding-left: 15px;
}


/*-- END FONT RESZIER --*/

/*--START styling for LAST UPDATED--*/
p.lastupdated {
	text-align: center;
	font-style: italic;
	}
/*--END styling for LAST UPDATED--*/

/*-- Start PageTools (div holding socialbookmarks and ratings) --*/
.pagetools {
	border-top: 1px dotted #ccc; 
	border-bottom: 1px dotted #ccc; 
	padding: 5px;
	}
/*-- END PageTools --*/

/*--START Social Bookmarks HASH INCLUDE--*/

.socialbookmarks {
	width: 50%; 
	float: left; 
	clear: both;
	margin: 0; 
	padding: 0;
	border-top:0; 
	}

.socialbookmarks p {
	display: inline;
	}

.socialbookmarks ul {
	display: block;
	white-space: nowrap;
	padding: 0 0 0 85px;
	margin: 0;
	}
	
.socialbookmarks li {
	list-style: none;
	display: inline; 
	padding: 0 0.2em 0 0.4em; 
	}

.socialbookmarks li.firstbookmark {
	border: 0; 
	}

.socialbookmarks a {
	padding-bottom: 4px;
	}

/*--END Social Bookmarks HASH INCLUDE--*/

/*-- START ratings --*/
.ratings_area p {
	color: #666;
	font-size: 0.8em;
	}

.ratings_area div.starRating {
	margin-left: 50px
	}

.pagetools h3,.pagetools h2 {
	margin-top:0;
	font-size: 1em;
	}

.ratings_area {
	width: 45%;
	float: left;
	margin-bottom: 0pt;
	}

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.cancel,div.star{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.cancel,div.cancel a{background:url(delete.gif) no-repeat 0 -16px}
div.star,div.star a{background:url(star.gif) no-repeat 0 0px}
div.cancel a,div.star a{display:block;width:16px;height:100%;background-position:0 0px;}
div.star_on a{background-position:0 -16px!important}
div.star_hover a,div.star_live a:hover{background-position:0 -32px}
/* Read Only CSS */
div.star_readonly a,div.star_readonly a:hover{cursor:default !important}
/* Partial Star CSS */
div.star{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */


/*-- END ratings--*/


/*-- Start Also Liked - based on ratings results --*/
div#alsoliked ul {
	margin-left: 90px;
	}
/*-- END Also Liked --*/

/*-- START Comments--*/

.comments_area {
	margin:15px;
	}

#login-form {
	background: #eee;
	border: 1px solid #ccc;
	padding: 1em;
	margin: 0 5em 0.5em 9em
	}


#login-form label {
	float: left;
	display: block;
	width: 10.5em;
	text-align: right;
	margin: 0 0.5em 0.5em 0;
	}

#login-form input {
	margin: 0 0 0.5em 0;
	padding: 0;
	}

#login-form .submit {
	margin-left: 11em;
	padding: 0 1em;
	}


#comments-form form {
	margin: 10px 25px;
	}

#comments-form label {
	float: left;
	display: block;
	width: 9.5em;
	text-align: right;
	margin: 0 0.5em 0.5em 0;
	}


#comments-form input{
	margin: 0 0 0.5em 0;
	}

#comments-form #message {
	width: 300px;
	height: 300px;
	}

#comments-form input#submit {
	margin: 0.5em 0 0 220px;
	padding: 0 1em;
	}

.comment {
	background-color: #eee;
	padding: 15px 15px 10px 15px;
	font-size: 0.9em;
	border: 1px solid #ccc;
	}

.commenttext {
	padding: 0 30px;
	}

.commentquote {
	margin: 1em 2em;
	display: block;
}

/*-- END Comments--*/



/*-- Print Only class - used to hide footnoted links generated by javascript function - revealed using print stylesheet --*/
.printOnly {
	display: none;
}

/*-- External Link  class - used for icons inserted into the page by javascript function to indicate links to external sites --*/
img.externallink {
	width: 10px !important;
	height: 10px !important;
	margin: 0 -0.5em 0 -0.5em !important;
	padding: 0 !important;
	display: inline !important;
	float: none !important;
}

span.externallink {
	white-space: nowrap;
}

.socialbookmarks img.externallink {
	display: none;
}
/*-- END External Link --*/


/*---------------- Collapso v1.0 (Psycle Plugin) ----*/

.expanderIndependent, .expanderLinked {
	clear:both;
	margin:0px 0px 15px 0px;
	width:100%;
}

.expanderHeading {
	clear:both;
	margin:2px 0px 0px 0px;
	position:relative;
	width:100%;
}

.expanderHeading h2 {
	margin-top: 0;
	margin-right:4em;
}

.expanderHeading img,
.expanderHeading span {
	position:absolute;
	display:block;
	cursor:pointer;
	right:5px;
	top:5px;
}

.expanderHeading span {
	font-size:0.8em;
	top:4px;
}

.expanderContent {
	clear:both;
	float:left;
}

.linkMore {
	color:#FF0000;
	text-decoration:underline;
	cursor:pointer;
}

.linkLess {
	color:#FF0000;
	text-decoration:underline;
	cursor:pointer;
}

/*---------------- End Collapso ----*/


/*---------------- Tabbo v1.0 (Psycle Plugin) ----*/

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
 width: auto;
}
/*constrain width if body text area has related content */
.hasrelated .tabberlive {
 width: 380px;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav {
 margin:0;
 padding: 0.3em 0;
 border-bottom: 1px solid #778;
 font-weight: bold;
}

ul.tabbernav li {
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a,
ul.tabbernav li span {
 padding: 0.2em 0.5em 0.3em 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover {
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a,
ul.tabbernav li.tabberactive span {
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;
}
/*---------------- End Tabbo ----*/


/* FLV and MP3 Players - center them */

.flvplayer, .mp3player {
	margin: 1.1em auto;
	text-align: center;
}

/* setup filler used by js to balance colums - based on NiftyCube */
.JQfiller, b.niftyfill {
	display:block;
	margin:0 !important;
	padding:0 !important;
	border:0 none!important;
	font-size: 1px;
	}

/* IE6 and IE5.5 only - fix issue with italic text breaking loayout when just the same length as the text area length (the italics *just* push it over the edge */
* html em {
	overflow: visible;
	height: auto;
	}
	
/* rules used for BBC image rotator */
img.rotimg {
	position: absolute;
	left: 0;
	top:0;
	}

#firstimg{
	z-index: 2;
	}
	
/*------------------------------ tags added from design tweaks ------------------------------*/

#main .aboutauthor {
	border-top: #ccc 1px dotted;
	/*border-bottom: #ccc 1px dotted;*/
	padding-top: 5px;
	}

#main .aboutauthor img {
	float: left;
	margin: 5px;
	}
	
#main .aboutauthor h2 {
	margin: 3px;
	}
	
/*--------START generic quotes-----------*/

/* avoid overflow issue with forum quote (e.g. if they have long urls in them) */
.forumquote {
	overflow-x: hidden
	}
* html .forumquote {
	width: 100%; /* IE6 needs this to enable the overflow statement to work */
}

/*html>body .forumquote {
	BACKGROUND-IMAGE: url(http://www.open2.net/open2static/graphics/bt_speach_box.png) !important;
	background-repeat: no-repeat !important;
	background-position: bottom !important;
	}

html>body .forumquote p {
	BACKGROUND-IMAGE: url(http://www.open2.net/open2static/graphics/top_speach_box.png) !important;
	background-repeat: no-repeat !important;
	background-position: top !important;
	filter: none;
	}*/
	
/* USE THIS CLASS AND DELETE TH NEXT ONE ONCE FLOATING ON THE SITE IS BEING USED*/		
#index .forumquote  p {
	padding:4px 0 13px 0px;
	}
	
/*#index .forumquote  p {
	padding:4px 0 13px 4px;
	}*/
	
.discussingtoplevel .forumquote  p {
	padding:4px 0 1px 4px;
	
	}
	
/*--------END generic quotes-----------*/



/*--------START TV sites quotes-----------*/
	
html>body#tvsite .forumquote {
	background-image: url(http://www.open2.net/open2static/graphics/bt_speach_box_tvsite.png) !important;
	background-repeat: no-repeat !important;
	background-position: bottom !important;
	} 

html>body#tvsite .forumquote p {
	background-image: url(http://www.open2.net/open2static/graphics/top_speach_box_tvsite.png) !important;
	background-repeat: no-repeat !important;
	background-position: top !important;
	padding:4px 0 1px 4px;
	} 
	
	
/*--------END TV sites quotes-----------*/

/* Font resizer */
#displayoptions ul#fonts
{
	float: left;
	width: 10em;
}
#displayoptions p
{
	display: block;
	float: left;	
}
#displayoptions h2
{
	clear: left:
}

/*----------TLA top banner----------*/

#tlanavlist {
	white-space:nowrap;
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	width: 755px;
	height: 3.8em;
	/*thin line along the bottom of the top banner that runs underneath the section banner tabs*/  
	border-bottom: solid #630031 3px;
	margin-left:auto !important;
	margin-right:auto !important;
}


#tlanavlist ul {
	float: right;
	white-space: nowrap;
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	bottom: 0;
}

#tlanavlist li {
	float: left;
	margin: 0;
}

#tlanavlist a {
	display: block;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 1.3em;
	width: 10em;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	/*puts a thin vertical line on the left hand side in the colour specified*/
	border-left: 0.1em solid #fff;
	/*specifies the colour for the top tab bg & the top RH knock off corner*/	
	color: #fff;
	float: left;
	text-decoration: none;
	background: #630031;
}
/*given IE a width to avoid issue, now give all other browsers auto width*/
html>body #tlanavlist a { 
	width: auto;
	min-width: 10em;
}


#tlanavlist a:hover, #tlanavlist a:active, #tlanavlist a:focus, #tlanavlist .currenttab a  {
	color: #fff;
	background-color: #803058;
}

/* IE% Mac Hack \*/
#tlanavlist a {float: none;}

#tlanavlist .lasttab a {
	/*specifies the colour for the top tab bg & the top RH knock off corner*/
	background: #630031 url(http://www.open2.net/open2static/graphics/learning_top_corner2.jpg) no-repeat 100% 0;
}

#tlanavlist .lasttab a:hover, #tlanavlist .lasttab a:active {
	background: #803058 url(http://www.open2.net/open2static/graphics/learning_top_corner_hover.gif) no-repeat 100% 0;
}

/* IE% Mac Hack \*/
#tlanavlist .lasttab a {float: none;}


/*------START bottom promofooter--------*/

#promofooter a {
	color: #002d5a;
	font-weight: bold;
	}


#promofooter h2 {
	font-size: 1.5em !important;
	padding-left: 2px;
	}

#promofooter h3 {
	font-size: 1em;
	padding-left: 0;
	padding-top:0;
	}

#promofooter p {
	margin-left: 98px;
	}

.promotitle {
	font-size: 1.2em !important;
	background-color:#355295;
	padding: 2px 0 4px 5px;
	height:10px;
	margin-bottom:5px;
	color:#FFF;
	}

	
#promotwosubs {
	float:left !important;
	width: 501px;
	}
	
#promo1 {
	padding-left:5px;
	padding-right:3px;
	float: left;
	width: 242px;
	}

* html #promo1 {
	width:250px;
	}

#promo2 {
	padding-left:5px;
	padding-right:3px;
	float: right;
	width: 241px;
	border-right: 1px dotted #ccc;
	border-left: 1px dotted #ccc;
	}


#promo3 {
	padding-left:5px;
	padding-right:3px;
	float: left;
	width: 242px;
	}

#promofooter {
	margin-left:5px;
	margin-top: 3px;
	background-color:#FFF;
	width:755px;
	min-height: 73px;
	text-align:left;
	margin-left:auto !important;
	margin-right:auto !important;
	border: 2px Solid #304d91;
	border-top: 1px Solid #304d91;;
	}
	
* html #promofooter {
	height: 85px;
	}
	
/*#main {
	width: 755px;
	margin: 4px 5px 5px 5px;  only 4px at top as there is a 1px white clearing div after the breadcrumbs. Together equals 5px of whitespace */


/*html>body #promofooter {
	min-width: 760px;
}*/
	

	
#promo1 img, #promo2 img, #promo3 img{
 	width: 93px;
	height: 56px;
	float: left!important;
	padding-right: 5px;
	margin-top:0;
	}

/*put highlight graphic onto title bars*/	
* html .titlehighlight {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.open2.net/open2static/graphics/title_gradient.png', sizingMethod='scale')!important;
	height: 1%;
	}
	
html>body .titlehighlight { 
	background-image:url(http://www.open2.net/open2static/graphics/title_gradient.png) !important;
	background-repeat: repeat-x !important; 
	background-position: top !important;
	filter: none;
	height: auto;
	}
	
/*------END bottom promofooter--------*/

/*------START blog data table--------*/

.datatable {
	width:90% !important;
	border: 2px Solid #000;
	margin-left: 3%;
	margin-bottom: 1.1em;
}

.datatable th, .datatable td {
	border: 1px Solid #000;
	padding: 3px;
	}

/*------END blog data table--------*/

/*------START inline captions--------*/
.inlineimageleft {
	float: left;
	margin-right: 1em;
	}
.inlineimagecenter {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
.inlineimageright {
	float: right;
	margin-left: 1em;
	}
.inlinecaption {
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
	}
/*------END inline captions--------*/


/*------START font, colour & layout options--------*/

body.fon2 #bread div.youare, body.fon2 #header, body.fon2 #topbanner, body.fon2 #main, body.fon2 #btnav, body.fon2 #promofooter {font-size:1.2em !important}

body.fon2 ul#fonts li.fon2 a:link, body.fon2 ul#fonts li.fon2 a:visited {border-color:#1B52AC; background:#FFF; cursor:text}
body.fon2 ul#fonts li.fon1 a:link, body.fon2 ul#fonts li.fon1 a:visited {background:#FFF; border-color:#999; cursor:pointer}


body.fon3 #bread div.youare, body.fon3 #header, body.fon3 #topbanner, body.fon3 #main, body.fon3 #btnav, body.fon3 #promofooter {font-size:1.4em !important}

body.fon3 ul#fonts li.fon3 a:link, body.fon3 ul#fonts li.fon3 a:visited {border-color:#1B52AC; background:#FFF; cursor:text}
body.fon3 ul#fonts li.fon1 a:link, body.fon3 ul#fonts li.fon1 a:visited {background:#FFF; border-color:#999; cursor:pointer}




body.col2 {
	background: #000;
	}

body.col2 * {
	color: #ff0!important;
	background: #000!important
	}

body.col2 ul#fonts li a:link { 
	border:1px solid #ff0 !important
	}

body.col2 ul#colour li a:link { 
	border:1px solid #ff0 !important
	}

body.col2 #index #hero, body.col2 #subhero div, body.col2 .learning #subhero div {
	border-bottom-color: #000;
	}


body.col3 {
	background: #FFF;
	}

body.col3 * {
	color: #000!important;
	}


body.col3 #hero, body.col3 #related div, body.col3 #related, body.col3 #learning, body.col3 .title, body.col3 #related h2, body.col3 #forums h2, body.col3 #whatson, body.col3 #subhero, body.col3 #browse, body.col3 #utility #content, body.col3 #subnav, body.col3 #toptitlepages, body.col3 .righthandbackground, body.col3 .righthandtitlebackground, body.col3 .herobackground, body.col3 .subherobackground, body.col3 .subherotitlebackground, body.col3 #subhero div, body.col3 .open2articletext, body.col3 #subhero h2, body.col3 #browse h2 {
	background:#ffffe5;
	}

body.col3 #whatson {
	border-right: 5px solid #FFF;
	}




body.col4 {
	background: #FFF;
	}

body.col4 * {
	color: #000!important;
	}


body.col4 #hero, body.col4 #related div, body.col4 #related, body.col4 #learning, body.col4 .title, body.col4 #related h2, body.col4 #forums h2, body.col4 #whatson, body.col4 #subhero, body.col4 #browse, body.col4 #utility #content, body.col4 #subnav, body.col4 #toptitlepages, body.col4 .righthandbackground, body.col4 .righthandtitlebackground, body.col4 .herobackground, body.col4 .subherobackground, body.col4 .subherotitlebackground, body.col4 #subhero div, body.col4 .open2articletext, body.col4 #subhero h2, body.col4 #browse h2 {
	background:#dedfff;
	}

body.col4 #whatson {
	border-right: 5px solid #FFF;
	}



body.lay2 #main, body.lay2 #content, body.lay2 #hero, body.lay2 #subhero, body.lay2 #browse, body.lay2 #explore, body.lay2 #learning, body.lay2 #whatson, body.lay2 #related, body.lay2 #relatedcontent, body.lay2 #promofooter #promotwosubs>div, body.lay2 #promofooter #promo3 {
	float:none !important;
	width:755px !important;
	clear:both !important;
	}

/*------END font, colour & layout options--------*/

/*------START Flickr rotator--------*/

#relatedcontent .flickr_rotator {
	margin-bottom: 1em;
	}

#relatedcontent .flickr_rotator img {
	width: 100%;
	height: auto;
	}

/*------END Flickr rotator--------*/


/*styling for caption under image in RH related col*/
#rhcaption {
	background: url(http://www.open2.net/open2static/graphics/captionarrow.gif) no-repeat;
	margin-left: 5px;
	font-style:italic;
	padding:1px 0 5px 14px;
	color:#666;
	}