/*** features ***/

body { background:url(Roundels.jpg) top center;}
#Wrapper { background:url(Symbols.jpg) no-repeat top; }

p a { color:#1B80B0; text-decoration:underline; }
p a:hover { text-decoration:none; }

h1, h2, h5, #BodyHeader strong {text-shadow:1px 1px 2px #fff;}

.Relative, .RoundedImg { background:#333;background:rgba(0,0,0,0.3); padding:7px; width:616px; border-radius:6px; height:auto; }
.Relative img { width:616px; }
.Relative span { display:none;}

#BodyHeader {
	background:url(Border.gif) no-repeat bottom center;
	height:120px;
}
#BodyHeader strong {
	color:#000000;
	font-weight:normal;
	float:left;
	padding:10px 0 0 0;	
}
	#BodyHeader strong a {
		color:#000000;
		font-size:44px;
		top:34px;
		left:22px;
	}
		#BodyHeader strong a:hover {
			text-shadow:2px 2px 3px #fff;
		}
		
#PageTitle { position:relative; padding:0 0 10px 0;}
#SocialMedia { position:absolute; right:0; top:-100px;}
		
#Body { background:none;}
		
.features h1 {color:#666 !important; display:block !important; text-align:center; float:none;}
			
.features .Content a {color:#202020;}
.features .Panel li a, .features .Panel li div, .InfoLink li a {background:#333;background:rgba(0,0,0,0.3); color:#FFF !important; border-top:1px solid #666; border-bottom:1px solid #efefef; }
.features .Panel li a:hover, .InfoLink li a:hover {background:#000;background:rgba(0,0,0,0.6);}

.features .Rounded { background:#333;background:rgba(0,0,0,0.3);}

.features .Guide li a {background:#333;background:rgba(0,0,0,0.3);}
.features .Guide li a:hover {background:#000;background:rgba(0,0,0,0.6);}

blockquote { background-color:rgba(0,0,0,0.6); border-top:1px solid #666;border-bottom:1px solid #333;}

h4, h3 {background:#000;background:rgba(0,0,0,0.6); color:#fff !Important; border-bottom:1px solid #999; font-size:18px;}
h4 a, h3 a {color:#fff !important;}
h4 a:hover, h3 a:hover {text-decoration:underline;}

.features .SideNav li { padding:0;}
.features .SideNav li a {background:#ccc;background:rgba(255,255,255,0.3); border-bottom:1px solid #999; border-top:1px solid #fff; padding:0px 10px; line-height:50px; color:#000;}
.features .SideNav li a:hover {background:#333;background:rgba(0,0,0,0.3); padding:0px 10px; color:#fff;}
.features .SideNav li a img {height:30px; float:left; padding:10px 10px 0 0; display:inline;}

.features .Flash { border-top:1px solid #666; border-bottom:1px solid #efefef; padding:4px; background:#333;background:rgba(0,0,0,0.3);  }

.features .Results li {	border-bottom:1px dotted #416c92; }
.features .Results li img {	width:120px; }
.features .Results li p a, .features .More li p a { color:#333333;}
.features .Results li strong, .features .More li strong {color:#416c92;}

.features .Quiz input:focus {background:#416c92; color:#FFFFFF;}

.CirclePanel li { position:relative; width:191px; text-align:center; float:left; height:190px; }	
.CirclePanel li img { margin:24px auto; display:block; height:80px; border-radius:6px; border-top:1px solid #666; border-bottom:1px solid #efefef; padding:4px; background:#333;background:rgba(0,0,0,0.3); }	
.CirclePanel li a { position:absolute; font-weight:bold; top:0; left:0; z-index:2; display:block;  width:192px; height:50px; padding:130px 0 0 0 ; color:#666 !important; text-shadow:1px 1px 1px #fff; font-size:15px; }	
.CirclePanel li a:hover { text-decoration:underline; color:#333 !important; }	

hr { background:url(Border.gif) no-repeat; height:6px; border:none; clear:both; margin:40px 0 20px 0;}

/* Home Promo*/

@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

#FeaturedPromo {
	width:978px;
	height:290px;
	position:relative;
	overflow:hidden;
}

#PanelContent {
	width:630px;
	height:290px;
	margin:0 auto;	
}

#Tabs {
	position:absolute;
	top:0;
	left:0;
	width:978px;
}
	#Tabs li {
		position:absolute;
		background:#ccc;background:rgba(255,255,255,0.3);
	}
	#Tabs li, #Tabs li a {
		display:block;
		width:30px;
	}

	#f1 {left:50px;top:65px;}
	#f1, #f1 a {height:160px;}
	
	#f2 {left:90px;top:40px;}
	#f2, #f2 a {height:210px;}
	
	#f3 {left:130px;top:15px;}
	#f3, #f3 a {height:260px;}
	
	#f4 {right:130px;top:15px;}
	#f4, #f4 a {height:260px;}
	
	#f5 {right:90px;top:40px;}
	#f5, #f5 a {height:210px;}

	#f6 {right:50px;top:65px;}
	#f6, #f6 a {height:160px;}

.ui-tabs-nav .ui-tabs-selected a {
	background-color:#fff;
}

.ui-tabs-panel a {
	position:relative;
	display:block;	
}
.ui-tabs-panel a span {
	position:absolute;
	display:block;	
	bottom:0;
	left:0;
	padding:10px 16px;
	background:#000;
	color:#fff;
	border-radius:0 8px 0 0;
}

/* Diary */

.Diary {
	width:840px;
	margin:20px auto;
	border-radius:6px;
	border-top: 1px solid #666;
	border-bottom: 1px solid #EFEFEF;
	background:#666;
	background:rgba(0, 0, 0, 0.3);
	padding:0px 30px 30px 30px;
	position:relative;
}

.Slider {
	width:840px;
	height:210px;
	overflow:auto;
	position:relative;
	padding:20px 0 0 0;
	background:url(http://www.thedoctorwhosite.co.uk/wp-styles/features/Highlight.gif) top center repeat-y;	
}	
	.Slider ul {
		position:absolute;
	}	
	.Slider li {
		width:280px;
		float:left;
	}
	.Slider li div {
		width:180px;
		height:140px;
		margin:0 auto;
		padding:20px 20px 0 20px;
		background:url(http://www.thedoctorwhosite.co.uk/wp-styles/features/Roundels.jpg) top center;
		text-align:center;
		border-top: 1px solid #666;
		border-bottom: 1px solid #EFEFEF;
		border-radius:9px;-moz-border-radius:9px;
		box-shadow:1px 1px 30px #666;-moz-box-shadow:1px 1px 30px #666;
		cursor:pointer;
	}
	.Slider li div:hover {
		box-shadow:1px 1px 30px #000;-moz-box-shadow:1px 1px 30px #000;
	}
	.Slider li span {
		display:block;
		height:50px;
		line-height:14px;
		font-size:12px;
	}
	.Slider li div img {
		height:80px;
		padding:0 0 10px 0;
	}
	
.Overlay {
	position:absolute;
	top:0;
	left:0;	
	width:840px;
	height:210px;
	background:red;
	z-index:999;
}