/* CSS for DerbyLIVE: layout */

/* Global Resets */
* { margin: 0; padding: 0; }
dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1,h2,h3,h4,h5,h6,pre,code { line-height: normal; }
a img,:link img,:visited img, abbr, acronym { border: none; }

/*== html elements ==*/

body {
	font-size: 80%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin: 10px 0;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
}


/* IE fix to provide a gap between bottom border of fieldset and siteinfo div
god alone knows why this is only broken on the login page */
* html #siteinfo {
  border-top: 5px solid #fff;
}

fieldset {
  border: 1px solid #eee;
  padding: 10px;
  margin: 0 0 1em 0;
}

form fieldset legend {
	color:#666;
	font-weight: bold;
	margin-left:-5px;
	padding: 0 5px; 
}

fieldset label {
	display: block;  
	float: left; 
	width: 250px; 
	padding: 0 5px 0 0;
	margin: 8px 0 0 3px   /* set top margin same as form input - textarea etc. elements */
}

/* gives a slight left-hand padding for when a second label is placed on the same line */
form label.inline { 
    margin-left: 20px;
}

fieldset input, fieldset textarea, fieldset select {
  	float:left;
    width:auto;
	margin:5px 5px 0 0;
}

 /*  style the button. Ensure a label is added to the form if the button 
    is to be positioned alongside the other input controls  */
form fieldset input.button
{
    background-color: #666;
	color: #fff;
	margin-left:-2px;
	padding: 0 2px;
	font-weight: bold;
}

fieldset br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
	margin:0 0 10px 0;
}

form .radio {
	margin:0 0 10px 0;
}

form .instruction {
	font-size: 88%;
	margin:0 0 0 0;
}
fieldset em {
	font-style:normal;
	color: #DD2222;
}

p span.mandatory, label span.mandatory {
	color:#DD2222;
	font-weight:bold;
	padding:0 3px;
}

p.mandatory img, p.information img {
	vertical-align:-5px;
}

p.feed, p.feed-newslist {
	margin:1em 0 0 0;
	text-align: right;
}

p.feed-newslist {
	text-align: left;
}

p.feed img {
    vertical-align:top;
}

p.feed a, p.feed-newslist a {
	color: #666 !important;
	text-decoration:none !important;
	border-bottom:dotted #666 1px;
	font-size: 89%;
}

p.feed-newslist a {
	color: #e0007a !important;
}

p.feed a:hover, p.feed-newslist a:hover {
	text-decoration:none;
	border-bottom:dotted #666 2px;
}

/* this should be in the contentsub section, but is placed here so it's kept with other 'feed' styles */
#contentsub p.feed {
	font-size: 110%;
}

table {
	width:100%;
	border-bottom:1px #eee solid;
	margin-bottom:5px;
}

table img {
    vertical-align:middle;
    margin:0 3px;
}

table th, table td {
	font-size:89%;
	padding:0.4em;
	text-align:left;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	}

table th#booknow {
	display:none;
}

table tr {
	height:.9em;
}

table tr.evenrow {
	background-color: #fff;
}

table tr.oddrow {
	background-color: #eee;
}

table tr td.master-event 
{
    border:1px solid red;
}

table tr td span.master-event, #master-event 
{
    font-weight:bold;
    margin-left:15px;
    color:Red;
}

table td.event a {
	color:#e0007a;
}

table td.booknow {
	width: 5.5em;
	padding:0;
}

table td.booknow a, table td.booknow a:hover {
	margin:0;
	width: 5.5em;
	padding: 0.3em;
	background-color: #E969A3;
	color: #333;
	display: block;
	text-align: center;
	text-decoration:none;
	font-size:100%;
	font-weight:normal;
}

table td.booknow a:hover {
	background-color: #666;
	color: #fff;
}

.panto_yellow {
	background-color:#FFFF33;
}

.panto_green {
	background-color:#33CC66;
}

.panto_blue {
	background-color:#33CCFF;
}

.panto_red {
	background-color:#FF3300;
}

.panto_gold {
	background-color:#CC9900;
}

table.panto {
	width:60%;
	border:#666 solid 1px;
}

table.panto thead {
	font-weight:bold;
	color:#666;
	background-color:#eee;
}

table.panto td {
	border:#999 solid 1px;
}

/*== container div ==*/

#container {
	width: 950px;
	background: url(../images/topcurves.gif) no-repeat top;
	margin: 0 auto; /* centre in browser */
	padding-top: 14px; /* take account of curves background image */
}

/*== navigation div ==*/

#navigation {
	float: left;
	background-color: #000;
	color:#fff;
	width:100%;
}

#navigation a {
	color: #fff;
	text-decoration: none;
}

#navigation a:hover {
	color: #e0007a;
	text-decoration: none;
	border-bottom: dotted 1px #fff;
}

#navigation h1 {
	font-size:100%;
	padding-bottom: 0.75em;
	line-height: normal;
	font-weight: bold;
}

#navigation li {
	float: left;
	margin: 0 6px;
	border-left: 1px solid #666;
	padding-left: 0.5em;	
}

#navigation li#logo {
	border: none;
	text-decoration:none !important;
}

#navigation li#logo a:hover {
	border: none;
}

#navigation li li {
	font-size:91%;
	clear: left;
	border: none;
	padding-left: 15px;	
	padding-bottom: 0.25em;
	background-image: url(../images/pinkbullet.gif);
	background-position: left center;
	background-repeat: no-repeat;
}

/*== boxoffice div ==*/

#boxoffice {
	clear: both;
	width: 930px; /* width plus padding below = 950px; */
	padding: 5px 10px;
	float: left;
	font-weight: bold;
	background-color: #eee;
	color: #666;	
}

#boxoffice li em {
	color: #E0007A;
	font-style: normal;
}

#boxoffice li#telephone {
	float: left;
	font-size: 1.5em;
}

#boxoffice #search {
	float: right;
}

#boxoffice #search label 
{
    display: none;
}

/*== content div ==*/

#content {
	clear: both;  /* clears the navigation and box office floats */
	/* display: inline; hack to fix top margin bug in IE */
	color: #333;
	background-color:#fff;
	width:100%;
	overflow:auto;
}

/*== contentmain div ==*/

#contentmain {
	width: 925px;
	margin: 10px 10px 0 10px;
	float: left;
}

/* IE hack of above - no width, plus display inline */
*html #contentmain {
	display: inline; /* hack to fix IE margins bug? */
	width: auto;
}

#contentmain h1 {
	padding: 0.25em 0.5em;
	background-color: #999;
	color: #fff;
	font-size: 1.1em;
}

#contentmain ul 
{
	list-style-type:disc;
	list-style-position:inside;
}

#contentmain li 
{
	line-height:20px;
	margin-left:10px;
}

#contentmain li.list {
	float:none;
	display:block;
}

#contentmain li.list img 
{
    vertical-align:middle;
}

#contentmain input {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size:95%;
}

#contentmain p, #maincontent p {
	line-height:1.5em;
	margin:8px 0;
	font-size:0.95em;
}

#maincontent  #online-brochure {
float:right;
margin-left:5px;
}

#contentmain p a, .static #contentmain li a, #maincontent li a {
	font-size:0.9em;
}

#contentmain p a img {
	vertical-align:top;
	font-size:0.9em;
}

/* allows user to align an image in their own image tag*/
#contentmain img.left {
	float:left;
	margin-right:5px;
}

/* allows user to align an image in their own image tag*/
#contentmain img.right {
	float:right;
	margin-left:5px;
}

#contentmain .currentPagination 
{
    background-color:#eee;
    border: solid 1px #bbb;
    font-weight:bold;
    color:#555;
    padding:0 3px;
}

/*== promo div ==*/

#promo {
	clear: both;  /* clears the navigation and box office floats */
	float: left; /* float to fix a float */
	width: 100%;
	background-color: #666;
	color: #fff;
	min-height:200px;
}

#promo a {
	font-size: 0.85em;
	color: #fff;
	text-decoration:none;
	border-bottom: dotted #fff 1px;
}

#promo a:hover {
	text-decoration:none;
	border-bottom: solid #fff 1px;
}

#promo h1 {
	background-color:#666 !important;
	font-size: 1.0em;
	font-weight: bold;
	margin-top:10px;
}

#promo img {
	float: left;
	border: none;
	margin-right:10px;
}

/* IE hack of above */
*html #promo img {
	margin-bottom: -10px;
}

#promo p {
	margin-right:10px;

}

#promo li {
	margin:4px 0;
	list-style-type: square;  
}

/*== media div ==*/

#media li {
	display:inline;
	float:left;
	padding-right:10px;
	margin:8px 0;
}

#media li a {
	font-size:0.89em;
}

#media li a:hover {
	color:#333;
}

#media label {
	display:none;
}

/*== cross-sell div ==*/

#cross-sell {
	background-color:#fff;
	width:100%;
	border-top:10px solid #fff;
	clear:both;
	overflow:auto;
	margin-bottom:5px;
}

#cross-sell h2, #cross-sell h3, #cross-sell h4 {
	margin:0 0 3px 0 !important;
	font-size:85% !important;
	font-weight:bold !important;
	color:#333 !important;
}

#cross-sell h3, #cross-sell h4 {
	font-weight:normal !important;
}

#cross-sell li {
	display:inline;
	float:left;
	padding-right:10px;
	margin:8px 0;
}

#cross-sell p {
	font-size:75%;
	margin:2px 0;
}

#cross-sell p a {
	font-size:1em;
}

#cross-sell img {
	margin-top:5px;
}

#cross-sell a {
	color: #666;
	text-decoration:underline;
}

#cross-sell a:hover {
	color:#333;
}

/*== latestnews div ==*/

#latestnews {
	clear:both;
	overflow:auto;
	width:100%;
}

#latestnews h1 {
	padding: 0.25em 0.5em;
	color: #fff;
	background-color: #999;
	font-size: 110%;
	font-weight: bold;
}

#latestnews ul {
	margin-top:7px;
}

#latestnews li {
	font-size:89%;
	margin-bottom:3px;
}

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

#latestnews a:hover {
	color:#333;
}

/*== contentsub div ==*/

#contentsub {
	display: inline; /* hack to fix IE margins bug? */
	width: 255px;
	margin: 10px 10px 0 0;	
	float: right;
	font-size:0.9em;
	padding-left:10px;
	border-left:#eee solid 1px;
}

#contentsub1, #contentsub2 {
	font-size:0.9em;
}

#contentsub h1, #contentsub1 h1, #contentsub2 h1 {
	padding: 0.25em 0.5em;
	margin-top:4px;
	background-color: #999;
	color: #fff;
	font-size: 1.1em;
}
#contentsub h1.related, #contentsub1 h1.related, #contentsub2 h1.related {
	margin-top:25px;
}

#contentsub table caption, #contentsub1 table caption, #contentsub2 table caption, table.panto caption {
	display: none;
}

#contentsub table td, #contentsub1 table td, #contentsub2 table td {
	padding: 0.5em 0;
	font-size:99%;
}

#contentsub img, #contentsub1 img, #contentsub2 img {
	vertical-align:middle;
	margin: 0 5px;
}

/*== siteinfo div ==*/

#siteinfo {
	clear: both;
	color:#fff;
	overflow:auto;
	width:100%;
	background: url(../images/bottomcurves.gif) no-repeat bottom;
}

#siteinfo a{
	color:#fff;
}

#siteinfo a:hover{
	border-bottom:#fff 2px solid;
	color:#fff;
}

#siteinfo li {
	display:inline;
}

#siteinfo img {
	margin:15px;
}

#siteinfolinks p {
	font-size:0.8em;
	text-align:right;
	padding-right:20px;
	display:inline;
}

#siteinfologos {
	float:left;
}

#siteinfolinks {
	float:right;
	vertical-align:bottom;
	margin-top:50px;
}

/*== body id signatures ==*/

/* homepage */

.homepage #contentmain, .event #contentmain {
	display: inline; /* hack to fix IE margins bug? */
	width: 650px;
	margin: 10px 10px 0 10px;
	float: left;
}

.homepage #cross-sell h1 {
	padding: 0.25em 0.5em;
	color: #fff;
	background-color: #999;
	font-size: 110%;
	font-weight: bold;
}

/* event */

.event #contentsub p.booknow {
	margin:10px 0 13px 0;
}

.event #contentsub p.booknow a{
	background-color: #eee;
	border:1px solid #ccc;
	color:#e0007a;
	font-size:110%;
	padding:0.2em 0.4em;
	text-decoration:none;
	font-weight:normal;
}

.event #contentsub p.booknow a:hover{
	text-decoration:underline;
}

.event #contentmain h1{
	font-size:1.8em;
	font-weight:normal;
	color:#999;
	padding: 0;
	background-color: #fff;
}

.event #contentmain h2{
	margin:5px 0 10px 0;
	font-size:1.3em;
	font-weight:normal;
	color:#666;
}

.event #contentmain object{
	margin:10px 0;
}

.event #contentsub h2{
	margin:5px 0;
	font-size:1.5em;
	color:#e0007a;
	font-weight:normal;
}

.event #contentsub h3{
	margin:5px 0;
	font-size:110%;
	color:#333;
	font-weight:normal;
}

.event #contentsub ul{
	margin:8px 0;
	font-size:99%;
}

.event #contentsub ul#emailprint{
	margin:10px 0;
	font-size:99%;
}

.event #contentsub li{
	margin:3px 0 0 0;
}

.event #contentsub p{
	margin:10px 0;
	font-size:99%;
	color:#333;
}

.event #contentsub p#concession{
	margin:-7px 0 7px 0;
	font-size:99%;
	color:#333;
}

.event #contentmain #media h1, .event #contentmain #cross-sell h1 {
	font-size:1.4em;
	font-weight:normal;
	border-bottom:#eee solid 1px;
	padding-bottom:5px;
	color:#999;
	background-color: #fff;
	clear:both;
}

/* static (no columns) */

.static #contentmain h1, .twoColFixLt #maincontent h1, .twoColFixRt #maincontent h1, .oneCol #maincontent h1, .thrColFix #maincontent h1  {
	font-size:1.7em;
	font-weight:normal;
	padding:0 0 5px 0;
	color:#e0007a;
	background-color: #fff;
}

.static #contentmain h2 {
	margin-top:15px;
	font-size:1.3em;
	border-bottom:1px dotted #666;
	font-weight:normal;
	color:#666;
}

.twoColFixLt #maincontent h2, .twoColFixRt #maincontent h2, .oneCol #maincontent h2, .thrColFix #maincontent h2 {
 margin:12px 0 12px 0;
 font-size:1.2em;
 color:#666;
}

.static #contentmain h3, .twoColFixLt #maincontent h3, .twoColFixRt #maincontent h3, .oneCol #maincontent h3, .thrColFix #maincontent h3 {
	margin:15px 0 10px 0;
	font-size:1.1em;
	font-weight:bold;
	color:#666;
}

.static #contentmain ul, .twoColFixLt #maincontent ul, .twoColFixRt #maincontent ul, .oneCol #maincontent ul, .thrColFix #maincontent ul {
	margin:0 0 0 2em;
}

.static #contentmain li, .twoColFixLt #maincontent li, .twoColFixRt #maincontent li, .oneCol #maincontent li, .thrColFix #maincontent li {
	list-style-type:disc; 
}

/* ================================================= */
/* KSH ADDITIONS FOR FLAT CONTENT COLUMNAR TEMPLATES */
/* ================================================= */

/* =oneCol = One Column Layout */

.oneCol #maincontent { 
	margin: 0px; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the contentsub1 div contains, the column space will remain. You can remove this margin if you want the #maincontent div's text to fill the #contentsub1 space when the content in #contentsub1 ends. */
	padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color:#fff;
} 

/* =twoColFixRt = Two Column Layout - right-hand sidebar */

.twoColFixRt #maincontent { 
	margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the contentsub1 div contains, the column space will remain. You can remove this margin if you want the #maincontent div's text to fill the #contentsub1 space when the content in #contentsub1 ends. */
	padding: 0px 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixRt contentsub1 {
	float: right; /* since this element is floated, a width must be given */
	width: 240px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 10px;
	border-left:1px dotted #ccc;
}

/* =twoColFixLt = Two Column Layout - left-hand sidebar */

.twoColFixLt #maincontent { 
	margin: 0 0 0 224px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the contentsub1 div contains, the column space will remain. You can remove this margin if you want the #maincontent div's text to fill the #contentsub1 space when the content in #contentsub1 ends. */
	padding: 10px 20px 20px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	border-left:1px dotted #ccc;
} 
.twoColFixLt #contentsub1 {
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 10px 0px 0px 12px;
}

/* =thrColFix = Three Column Layout - left and right-hand sidebars */

.thrColFix #maincontent { 
	margin: 0 195px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #maincontent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 10px 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	border-left:1px #ccc dotted;
	border-right:1px #ccc dotted;
}
.thrColFix #contentsub1 {
	float: left; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
.thrColFix #contentsub2 {
	float: right; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
}
/* =Columnar layout globals */


.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.shoutbox1 {
	width: 18em;
	background-color:#eee;
	margin:12px;
	border:1px #bbb solid;
	float:left;
	padding:5px;
	font-size:1.0em;
	font-weight:bold;
	color:#333;
}

.shoutbox2 {
	width: 18em;
	background-color:#eee;
	margin:12px;
	border:1px #bbb solid;
	float:right;
	padding:5px;
	font-size:1.0em;
	font-weight:bold;
	font-size:0.9em;
	color:#333;
}

img.left {
	float:left;
	margin-right:8px;
	padding:2px;
	border: 1px solid #ccc;
}

img.right {
	float:right;
	margin-left:8px;
	padding:2px;
	border: 1px solid #ccc;
}

img.left-ub {
	float:left;
	margin-right:8px;
	padding:2px;
}

img.right-ub {
	float:right;
	margin-left:8px;
	padding:2px;
}

a.external:link
{
    background:url(../images/elicon-small.gif) 99% 40% no-repeat;
    padding-right: 15px;
}

a.external:visited
{
    color:#666;
    background:url(../images/elicon-small.gif) 99% 40% no-repeat;
    padding-right: 15px;
} 

a.external:hover
{
    color:#e0007a;
    background:url(../images/elicon-small.gif) 99% 40% no-repeat;
    padding-right: 15px;
}

#map {
	width:450px;
	height:380px;
	border:4px solid #ccc;
	padding:12px;
}

address {
	font-style:normal;
}

#contentsub1 li, #contentsub2 li {
	color: #333 !important;
	font-size: 95%;
	margin:5px 0 12px 5px;
}

#contentsub1 a, #contentsub2 a {
	color: #e0007a !important;
	border-bottom:dotted #333 1px;
	text-decoration:none;
}

#contentsub1 a:hover, #contentsub2 a:hover {
	text-decoration:none;
	border-bottom:dotted #333 2px;
}

#ctl00_chkMailings, #ctl00_chkEventTypes, #ctl00_chkPatronType 
{
	float:left;
	margin-left:255px
}

#ctl00_chkMailings label, #ctl00_chkEventTypes label, #ctl00_chkPatronType label 
{
	margin-top:3px
}

#feedbackform textarea {
	width:280px;
	height:80px;
}

#feedbackform p {
	clear:both;
}

.btn 
{
	padding: 0;
	font-weight: bold;
	float:none;
    width:auto;
	margin:15px 4px;
}