/* 	Generic style sheet for two image toggle images with Gel style selectors
	Developed by Steven Atherton and Steven Connor
*/

div#toggle_wrapper {
	/*float: right;*/
	position: relative;
	margin-bottom: 10px;
	width: 976px;
}

div#toggle_wrapper div#intro-text{
	padding-bottom: 8px;
}

/* This is the container which just the controls */
div#toggle-controls {
	padding: 3px 0px 3px 0;
	float:left;
    
    margin-bottom: 9px;
}

/* The menu title*/
div#toggle-title {
	float:left;
	padding: 4px 6px 6px 4px; 
	display:none;
}

/* Position the list items for the menu*/
div#toggle-controls ul li{
	float:left;
    border-right: 1px solid #ffffff;
	margin: 0;
	padding: 0;
	font-size: 0.95em;
    height: 100px;
    cursor: pointer;
    background-position: 0px 0px;
    background-color: #cccccc;
    /*
	background-image:none;*/
}

div#toggle-controls ul li#tab2{
    background-image: url("http://www.bbc.co.uk/news/special/world/11/9_11_globalness/css/img/afghanistan.jpg");
 }
div#toggle-controls ul li#tab3{
    background-image: url("http://www.bbc.co.uk/news/special/world/11/9_11_globalness/css/img/iraq.jpg");
 }
div#toggle-controls ul li#tab1{
 background-image: url("http://www.bbc.co.uk/news/special/world/11/9_11_globalness/css/img/terrorattacks.jpg");
 background-repeat: no-repeat;}
div#toggle-controls ul li#tab4{
 background-image: url("http://www.bbc.co.uk/news/special/world/11/9_11_globalness/css/img/guantanamo.jpg");
 background-repeat: no-repeat;}
div#toggle-controls ul li#tab5{
 background-image: url("http://www.bbc.co.uk/news/special/world/11/9_11_globalness/css/img/rendition.jpg");
 background-repeat: no-repeat;}

div#toggle-controls ul li span{
	background-color: #404040;
	/*border-bottom: 1px solid #ffffff; */
	color: #ffffff;
	display: block;
	font-weight: normal;
	float: left;
	padding: 4px 0px 4px 0px;
	text-align: center;
    width: 194px;
    
    margin-top: 76px;
}


div#toggle-controls ul#selector-menu li a{
height: 100px;
width: 194px;
display:block;
}


div#toggle-controls ul#selector-menu li a span.selected,
div#toggle-controls ul#selector-menu li a:hover span.selected{
	text-decoration: none;
	font-weight: bold;
}
div#toggle-controls ul li a span {
	font-weight: normal;
    display: block;
}

div#toggle-controls ul#selector-menu li a span,
div#toggle-controls ul#selector-menu li a:visited span{
	color: #ffffff;
}

div#toggle-controls ul#selector-menu li a:hover span{
	background-color: #000000;
	text-decoration: underline;
}

div#toggle-controls ul#selector-menu li a:hover span.selected{
	background-color: #D1700E;
	text-decoration: none;
}

div#toggle-controls ul#selector-menu li a:hover span.selected,
div#toggle-controls ul#selector-menu li a span.selected{
	background-color: #D1700E;
}
/* This is the container which just the images */
div#toggle-divs{
	clear: both;
}

div#display-pane{
	position:absolute;
	top: 55px;
	right:0;
	width: 442px;
	
}
div#display-pane h2{
	font-size: 1.846em;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 24px;
	margin-bottom: 8px;
    text-rendering: optimizelegibility;
}