/* Jonathan Creek homepage style sheet */
/* For Firefox 2.0.0.14 */
/* Created 30/04/2008 by Liane Frydland */

/* Colours to use
Black = #000000
White = #ffffff
yellow = #e9e079
*/

/*=======Body styles===================*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background-color:#ffffff; font-size:85%; margin:0px; padding:0px;}

h2 {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:150%;}
h3 {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:110%;}
h4 {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:100%; margin-left:10px;}


/*=======Header styles================*/
#header {width:100%; background-color:#000000;}
#header h1 {font-family:Verdana, Arial, Helvetica, sans-serif; margin: 0px 25px 0px 0px; padding-top:5px; color:#ffffff; font-size:151%; text-align:right;}
#header p {font-family:Verdana, Arial, Helvetica, sans-serif; color:#ffffff; text-align:right; vertical-align:bottom;  margin-right:25px; font-size:small;}
#header img {margin:0px; padding:0px; float:left;}
#header a {color:#ffffff;}
html>body #header {height:136px;} /* firefox bug fix - ensures the height of the header matches the logo image used */

#header .imgnoborder {border:none; margin-top:15px;margin-left:5px;}

/*=======Side bar menu styles==========*/
#leftcol {margin:0px; padding:0px; float:left; width:175px; background-color:#000000}
#leftcol h2 {border-bottom:1px solid #ffffff; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:150%; font-weight:bold; padding:0px 0px 0px 5px; width:95%;}
#leftcol ul{margin-left:0px; margin-bottom:0px; padding:0px; width:168px;}
#leftcol li {margin:0px; padding:0px; list-style:none; width:100%;}
/* #leftcol a {padding: 2px 2px 2px 5px; margin:0px; display:block;  width:100%; text-decoration:none!important; color:#ffffff; font-weight:bold; cursor:pointer;} */
#leftcol a {padding: 2px 2px 2px 5px; margin:0px; display:block;  width:100%; text-decoration:none!important;}
#leftcol a:link {color:#ffffff; font-weight:bold; cursor:pointer; width:inherit;}
#leftcol a:visited {color:#ffffff; font-weight:bold; cursor:pointer; width:inherit;}
#leftcol a:hover {background-color:#ffffff; color:#000000; width:inherit;}
#leftcol a:active {background-color:#ffffff; color:#000000; width:inherit;}

#leftcol img {float:right;}


#leftcol ul .submenu {padding: 2px 2px 2px 5px; margin-left:10px; display:block; text-decoration:none!important; width:153px; color:#ffffff; font-weight:bold;}

/*=======Main body of the page styles===*/
#middle {margin-left:181px; padding-left:10px; width:inherit; margin-top:0px; margin-right:25px;}
html>body #middle {min-height:500px} /* Firefox only - so the footer doesn't cut across the page */
#middle h2 {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:150%; margin-top:-15px;}

#middle img {border:1px solid #000000; margin:5px;}
#middle .imagefloat01 {border:1px solid #000000; float:right; margin-left:5px;}
#middle .imagefloat02 {border:1px solid #000000; float:left; margin-right:5px;}
#middle .imgcorner {border:0px; margin-left:-16px;margin-top:-0px;margin-bottom:0px;padding-bottom:0px;}

#middle .topofpage img {border:none; vertical-align:bottom; margin-bottom:0px; padding-bottom:0px;}
#middle .topofpage p {font-size:90%;}

#middle .imgnoborder {border:none; margin:5px;}

#middle ul ul {font-size:100%;}

#middle .photocaption02 {float:right; width:400px;}
#middle .photocaption02 img {border:0px;}
#middle .photocaption02 p {text-align:center;}

/*=======Footer styles==================*/
#footer {border-top:3px solid #000000;}
#footer p {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:80%; margin-left:5px;}
#footer img {border:none;}

/*===========Standard table styles==================*/
table {width:100%;}
#middle .smalltable {width:50%;}
#middle table {padding:0px;margin:0px; border-collapse: collapse;}
#middle th {background-color:#000000; color:#FFFFFF; text-align:left;padding:3px;margin:0px;font-weight:bold; vertical-align:text-top;}
#middle td {background-color:#CCCCCC; color:#000000; padding:4px; margin:0px; vertical-align:top; font-size:90%;}
#middle .altrow {background-color:#ededed; color:#000000; padding:4px; margin:0px; vertical-align:top; font-size:90%;}
#middle table .left {background:#000000 url(../images/corner3.jpg) top left no-repeat; padding-left:15px; text-align:left;}
#middle table .right {vertical-align:top;float:right; margin-right:-3px; margin-top:-3px; border:0px;}

#middle table .multicolleft {background:#000000 url(../images/corner3.jpg) top left no-repeat; padding-left:15px; text-align:left;}
#middle table .multicolright {background:#000000 url(../images/corner4.jpg) top right no-repeat; padding-right:15px;}

/*========= Episode summary table styles============*/
#middle #summary {float:right; width:25%;padding-left:10px;}
#middle #summary table {padding:0px;margin:0px;width:100%; border-collapse: collapse;}
#middle #summary th {background-color:#000000; color:#FFFFFF; text-align:center;padding:5px;margin:0px;font-weight:bold;}
#middle #summary td {background-color:#CCCCCC; color:#000000; padding:4px; margin:0px; vertical-align:top; font-size:90%;}
#middle #summary table .left {background:#000000 url(../images/corner3.jpg) top left no-repeat; padding-left:15px; text-align:center;}
#middle #summary .epsumrc {vertical-align:top;float:right; margin-right:-5px; margin-top:-5px; border:0px;}

/*======= Episode guide guest cast table ==========*/
#middle .guestcast th {text-align:left; vertical-align:middle;}
#middle .guestcast td {width:25%; text-align:center; vertical-align:text-bottom;}

/*========= Episode guide episode naviagtion text ==============*/
#middle .episodeguideheader .epnav {font-size:90%; text-align:right; padding-bottom:3px;float:right;margin-top:-40px;}
#middle .episodeguidefooter .epnav {font-size:90%; text-align:right; padding-top:10px!important;float:right;display:block;width:100%;}

/*========== Lists ================*/

#middle ul {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:90%; list-style-image:url(../images/icons_bullets.jpg);margin-left:20px;}
#middle ul li {line-height:2.0em;}
#middle .skip {list-style-image:url(../images/icons_skipto.jpg);}

/*====== pictures with captions =====*/
#middle #piccap {float:right; padding-left:10px; font-size:80%; text-align:center; max-width:30%;}
#middle #piccaplarge {float:right; padding-left:10px; font-size:80%; text-align:center; max-width:400px;}

/*============= bug fixes ===========*/

/*=== IE 7 fixes ===*/
/* IE7 likes to have the li in front of the a for the menu styles */
*:first-child+html #leftcol li {margin:0px; padding:0px; list-style:none; width:100%;}
*:first-child+html #leftcol li a {padding: 2px 2px 2px 5px; margin:0px; display:block; text-decoration:none!important; width:100%; color:#ffffff; font-weight:bold;}
*:first-child+html #leftcol li a:hover {background-color:#ffffff; color:#000000; cursor:pointer; width:inherit;}
/* for some reason in IE7 the lists are not indented, so I had to increase the left margin */
*:first-child+html #middle ul {margin-left:60px;}

/*=== Safari bug fixes ===*/
/* The table didn't have the left table cell v-aligned to the top so had to fix this in Safari */
html*#middle table .left {vertical-align:top;}
/* The up arrow wasn't bottom aligned in Sarafi */
html*#middle .topofpage img {margin-bottom:2px;}