/*
***********************************************************

Title:			styleMain.css
Browser(s): 	All (except IE)

Author: 		Michael Carducci
Created: 		08.08.2008
Last modified: 	08.10.2008

***********************************************************
*/





/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}



/* Global reset-RESET */
/* The below restores some sensible defaults */

strong { font-weight: bold }
em { font-style: italic }
ol, ul, li { list-style:none }

* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */



/* Typography */

h1 { font:24px/24px "Helvetica Neue", Helvetica, Arial, sans-serif bold; color:#fff; margin-bottom:30px; margin-top:30px}
h2 { font:20px/20px Georgia, "Times New Roman", Times, serif bold; margin:60px 0 2px 0; color:#fff }
h3 { font:italic 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif bold; margin:40px 0 2px 0; color:#fff }
h4 { font:16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif bold; margin:40px 0 2px 0; color:#fff }

p { margin:2px 0 16px 0; text-align:left;}
body, h4, p, li, dt, dd, label, input, textarea { font-family : "Palatino Linotype", "Century Schoolbook", "Times New Roman", serif;}
body, p, li, dt, dd, label {  font-size:95%;color:#fff }
input, textarea { font-size:11px; color:#000; padding:2px }
cite { margin-left:auto; margin-right:auto;
font:italic 120% "Palatino Linotype", "Century Schoolbook", "Times New Roman", serif;}


a { color:#3399FF; text-decoration:none }
a:hover { color:#fff; }
h2 a { color:#fff }
a.hasAnImage:hover, a.hasAnImage:hover img, a.thickbox, a.nav, a.anav, a.subNav, a.shows, a.events { border:none; text-decoration:none }

p.centered {
	text-align: center;
}

b.nav {font:130% "Helvetica Neue", Helvetica, Arial, sans-serif bold;} 

/*body { font:20px/20px "Courier New", Courier, mono; color:#0f0 } */ /* To easily spot text sitting outside of a tag */



/* Layout (basic)*/

body { background:#2d2d2d; text-align:center; background:url(images/background.jpg) repeat; }

div#headerWrapper { width:100%; margin:0; padding:1px 0 0 0; z-index:100 } /* The 1px padding is there to fix a weird height bug. Don't ask... */

div#header { width:100%; height:120px; margin:0px auto 0 auto; padding:0; text-align:left; position:relative; text-align:center; z-index:100 }

html>body div#headerWrapper{ position:relative; height:275px; 
background:url(images/headerWrapperBG01.png) center left repeat-x } /* 'html>body' because IE can't understand parent/child selectors */

html>body div#navigation { margin-right:auto;margin-left:auto; height:160px; width:950px; margin-top:42px; 
}

html>body div#container { margin-right:auto;margin-left:auto;width:900px; height:auto;  position:relative; z-index:1
}

div#mainbody {float:left; margin-right:auto;margin-left:auto; width:520px; height:auto;  z-index:100  
}

html>body div#sidebar {float:right; width:342px; background:url(images/semiTransparent.png); border:5px solid #000; margin:3px 0 10px 0; }


html>body div#quote{background:url(images/semiTransparent.png); border:5px solid #000; width:75%; padding:10px; margin-left:auto; margin-right:auto; height:auto; z-index:0; position:relative;z-index:1}


/*'html>body' because IE can't understand parent/child selectors */



/* Navigation */


 ul li {
    display:block;
    float:left;
    list-style-type:none;
	margin-left:8px;
    }

ul li a {
   display:block;
   height:190px; width:183px;
   background:transparent url(images/magician-nav.jpg) no-repeat 0 0;
   text-indent:-9009px;
   }
   
ul li#shows a {
    width:180px;
    background-position: -182px 0;
	
    }

	ul li ul{
	background:url(images/background.jpg);  }

	ul li ul a {
    background:#333333; 
	text-align:left;
	text-indent:0;
    }

 ul li#events a {
    width:180px;
    background-position: -361px 0;
    }

 ul li#kudos a {
    width:180px;
    background-position: -539px 0;
    }

 ul li#contact a {
    width:180px;
    background-position: -719px 0;
    }


	ul li#aboutFocus {
    background-position: -1px -193px;
    }
	
ul li#showsFocus{
    background-position: -182px -193px;
    }

	ul li#eventsFocus{
    background-position: -361px -193px;
    }
	
	ul li#eventsFocus {
    background-position: -361px -193px;
    }

 ul li#kudosFocus {
    background-position: -539px -192px;
    }

 ul li#contactFocus {
    background-position: -719px -193px;
    }
	
ul li a:hover {
    background-position: -1px -193px;
    }
	
ul li#shows:hover a, #shows a:hover{
    background-position: -182px -193px;
    }

	ul li#events:hover a, #events a:hover{
    background-position: -361px -193px;
    }
	
	ul li#events a:hover {
    background-position: -361px -193px;
    }

 ul li#kudos a:hover {
    background-position: -539px -192px;
    }

 ul li#contact a:hover {
    background-position: -719px -193px;
    }
	
#nav li:hover {position:relative; z-index:1000;}
#nav a:hover {position:relative; white-space:normal; z-index:100}
			
	#nav .subShows {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin-top:120px; padding:0; list-style:none;z-index:1000;}

	#nav table {position:absolute; top:0; left:0; border-collapse:collapse; padding:0; width:0; height:0; margin-top:-1px; z-index:1000}
	

#nav :hover ul.subShows
{left:0; top:52px; background: #000; width:152px; height:auto; z-index:300;}
#nav :hover ul.subShows li
{display:block; height:52px; position:relative; float:left; width:152px; font-weight:normal;}
#nav :hover ul.subShows li a
{display:block; height:50px; width:152px; border:1px solid #000;  text-decoration:none; padding:0; cursor:pointer; text-indent:5px;}

	#nav .subEvents {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin-top:120px; padding:0; list-style:none; z-index:300}


#nav :hover ul.subEvents
{left:0; top:52px; background: #000; width:152px; height:auto; z-index:300;}
#nav :hover ul.subEvents li
{display:block; height:52px; position:relative; float:left; width:152px; font-weight:normal;}
#nav :hover ul.subEvents li a
{display:block; height:50px; width:150px; border:1px solid #000;  text-decoration:none; padding:0; cursor:pointer; text-indent:5px;}



/*forms*/

/* Styles */
form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 1em 0;
	border: none;
	border-top: 1px solid #ccc;
}


label {
	float: left;
	width: 100px;
	padding: 0 1em;
	text-align: right;
}

fieldset div {
	margin-bottom: .5em;
	padding: 0;
	display: block;
}

fieldset div input, fieldset div textarea {
	width: 150px;
	border-top: 1px solid #555;
	border-left: 1px solid #555;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 1px;
	color: #000000;
}

fieldset div select {
	padding: 1px;
}

div.fm-multi div {
	margin: 5px 0;
}

div.fm-multi input {
	width: 1em;
}

div.fm-multi label {
	display: block;
	width: 200px;
	padding-left: 5em;
	text-align: left;
}

#fm-submit {
	clear: both;
	padding-top: 1em;
	text-align: center;
}

#fm-submit input {
	border: 1px solid #333;
	padding: 2px 1em;
	background: #555;
	color: #fff;
	font-size: 100%;
}

input:focus, textarea:focus {
	background: #efefef;
	color: #000;
}
img.leftaln{
	float: left;
	padding: 0px 7px 1px 0px;
}
	
/* required fields - does not work in IE */
fieldset div.fm-req {
	font-weight: bold;
}

fieldset div.fm-req label:before {
	content: "* "; /* does not work in IE */
}

p.centered {
	text-align: center;
}

p.footnote {
	text-align: center;
	font-size : 80%;
}

object.centered {
	text-align: center;
}

	

/* And one last thing... */

body { background:#333333 url(images/darkmarble.jpg) top center no-repeat fixed } 
/* This is all the way down here so that - in theory - everything else will load before the (rather huge) background image does */