@charset "utf-8";
/* CSS Document */
/*  colors
	#893c06 maroon-color in garage logo
	#7FA0FF light blue in garage logo
*/
body  {
	background: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}

body.home #ahome,
body.about #areviewing,
body.current #amemoir,
body.celebs #aessay,
body.contact #abeyond,
body.reviews #abuy  {
	border-bottom: 7px solid #EDEEE9;
	padding: 5px;
	}
	
p, h1, h2, h3, h4, h5, h6, ul, li, embed {
	padding: 0px;
	margin: 0px;
}

h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: bold;
	color: #000000;
	margin: 0 0 .4ex 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #000000;
	margin-bottom: 0.4ex;
	
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #000000;
	margin-bottom: .2ex;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #000000;
	margin-bottom: .2ex;
}

h5{
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	font-weight: bold;
	color: #000000;
	margin-bottom: .2ex;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
	text-align: justify;
	text-indent: 25px;
	padding-right: 10px;
	padding-bottom: 1em;
	padding-left: 10px;
}

#container  {
	width: 880px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 4px solid #804000;
	text-align: left;
} 

#container #music {
	color: #FFFFFF;
	font-size: 0.8em;
	background-image: none;
	height: 40px;
	width: 880px;
	background-color: #7FA0FF;
	margin: 0px;
	padding: 0px;
}
 
#container  #music #musicLeft {
		width: 60px;
		float: left;
}

#container #music #musicRight {
		width: 820px;
		float: right;
		}

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 50px;
	border-top-width: thick;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: thick;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #2A3998;
	font-weight: bold;
}

#navigation ul li {
	float: left;
	margin-left: 40px;
	padding: 0;
}

#navigation li a:link, #navigation li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	color: #000;
	text-decoration: none;
	margin-right: 10px;
	line-height: 25px;
	background: url(../images/nav_rollover.gif) no-repeat left top;
	border: none;
	margin-top: 7px;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 20px;
	width: 40px;
}

#navigation li a:hover, #navigation li a:active {
	color: #000000;
	background-position: left bottom;
}

#navigation ul li a.current {
	margin-top: -5px;
	height: 30px;
	background: url(../images/nav_current.gif) no-repeat;
	color: #000;
	line-height: 25px;	
}


#mainContent {
	width: 880px;
	margin: 0px;
	padding: 0px;
}

#mainContent li {
	font-variant: small-caps;
	list-style-type: none;
	font-size: .9em;
}

#mainContentCalendar {
	background-color: #FFFFFF;
}

#mainContentCalendar table  {
	border: thick solid #000000;
}

#mainContent #leftContent {
	float: left;
	width: 520px;
	margin: 0px;
	font-variant: small-caps;
	line-height: 1.8em;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}

#mainContent #rightContent {
	float: right;
	width: 280px;
}
#mainContent #rightContent p {
	padding-right: 20px;
}

#mainContentCalendar  .data  {
	width: 95%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

#mainContentCalendar table.data {
	width: 95%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

#mainContentCalendar    table.data      td {
	font-size: 0.8em;
	font-style: italic;
	color: #000000;
	font-weight: bold;
	padding-right: 5px;
	padding-left: 5px;
}

#mainContentCalendar  table.data  th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	padding-right: 10px;
	padding-left: 10px;
	color: #FFFFFF;
	background-color: #804000;
}

#mainContent #leftContent #buttomButtons #buttonLeft img {
	margin: 0px;
	float: left;
	padding-left: 10px;
}

#mainContent #leftContent #buttomButtons #buttonRight img {
	margin: 0px;
	float: right;
	padding-right: 40px;
}

/*form styling*/
#mainContent form {
	font: normal .9em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #149523;
	background: #900
}
#mainContent fieldset {
	padding: 40px 20px  0 0; /*the padding on the top gives space for legend tag.*/
	margin:0 0 2em; /*The 2em pushes the field sets away from each other*/
	background-color: #893c06;
	border: none; /*takes away default border*/
	position: relative; /* position relative so we can position items within the fieldset using absolute or relative positioning */
	float: left; /*this is not for our form but other forms so we are leaving it in there just so that it will work for us site wid.  It's causing some issues which we will correct.*/
}

#mainContent fieldset legend { /*legend tag is difficult because different browsers handle it different ways.  thus we will use dome default styles and then correct them as needed.  Position is a case example.  In code view highlight each legend individually and make it bold*/
	padding: 0;
	margin: 0;
	color: #FF0;
}

#mainContent legend strong { /* the strong tag gives us a way to postion it and instead of using offsets, we use margins*/
	position: absolute;
	margin-left: 20px;
	margin-top: 0px;
	font-size: 1.2em;
}

#mainContent  form p {
	color: #ffffff;
	margin: 0 0 20px 20px; /* the margins push each away from each other by 20pz and away from the text input by 20px.*/
}

#mainContent form label{ /* form label within the mainContent eliminates ragged edge to labels*/
	width: 80px; /*you may need to do individual pages with a wider width - see #mainContent form#frmGarage label */ 
	float: left; /* floats cause the object underneath them to come up and float beside them.  Here it has the text input fields to come up beside them and not stack one on top of the other.*/
	clear: left; /*this says, don't let anybody float to my left and keeps them from stacking up on one line.*/
	margin-right: .75em; /*this keeps the form elements themselves away from the labels by a consistant amount.  We should now have a two column look*/
}

#mainContent  form p.subHead { /*any para within for that has a subhead*/
	margin: 0 0 0 20px; /*20 px meens small amount of space between our paras & for elements.*/
	clear: both; /*does not allow any floating whatsoever paragraph stays by itself*/	
}

#mainContent form label.subHead { /*mainArticle overides everything that came before so this is more specific*/
	display: block; /*displays on own line*/
	float: none;  /*prevents textarea from floating besides the label*/ 
	margin: 0; /*right above with no spacing*/
	width: auto;
	}
	
/*registration form*/
#mainContent form#frmGarage fieldset { /*element specific, targeting fieldsets that are only on our join form*/
	width: 530px;
}

#mainContent form#frmGarage label {
	width: 100px;
	position: relative;
}

#mainContent form#frmGarage input.text { /*input text in this specific form whith a class of .text style it like this  don't forget to add the class to each text field individually*/
	width: 200px;
}

#mainContent form#frmGarage textarea {
	width: 400px;
	height: 150px;
}

#mainContent form#frmGarage .col1 {
	float: left; /*this helps give the two column layout*/
	padding-left: 10px;
	margin-right: 10px; /* this will keep them away from each other a little bit*/
	width: 180px;
}

#mainContent form#frmGarage .col2 {
	float: left;
	padding-left: 10px;
	margin-right: 10px;
	width: 200px;	
}

#mainContent form#frmGarage div { /*we are targeting div tags within that form*/
	margin: 0 0 20px 20px; /*this will push those headings down a little bit*/
}

#mainContent form#frmGarage div p { /*we are targeting paragraphs within that form*/
	margin: 0 0 .5em 0;/*paragraph closer together*/
}

#mainContent form#frmGarage div label{ /*we are targeting labels within that form*/
	font-size: .9em;
	display: inline; /*so the checkboxx displays right beside.*/
	float: none; /*this takes away the default float we want them on their own line.*/	
}
#mainContent form#frmGarage div label.inline{
	float: none;
	auto: none;	
}

#menuMain {
	background-color: #000000;
	position: relative;
	padding-top: 5px;
	height:35px;
	font-size: 9pt;
}

#menuMain ul, #menuMain li {
	padding: 0;
	margin: 0;
}

#menuMain ul {
	list-style: none;
}

#menuMain li {
	display: block;
	background-color: #000000;
	width: 110px;
	height: 35px;
	padding: 0;
	background-image: url(../images/clef.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 30px;
}

#menuMain a {
	display: block;
	padding-left: 15px;
	margin-top: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}

#menuMain a:hover {
    color: #8aa635;
}

#menuMain a:link, #menuMain a:visited {
	color: white;
	text-decoration: none;
}

#jazzMenuLeft {
	float: left;
	width: 420px;
	margin: 0px;
	padding: 0 10px
}

#jazzMenuRight {
	float: right;
	width: 420px;
	margin: 0px;
	padding: 0 10px
}

#sidebar {
	float: right;
	width: 290px;
	background-color: #FFF;
}

ul.menuHoriz li {
    float: left;
}

ul.menuVert {
	position: absolute;
	top: 35px;
	visibility: hidden;
}

ul#menuSubOne {left: 32px}
ul#menuSubTwo {left: 140px}
ul#menuSubThree {left: 280px}
ul#menuSubfour {left: 377px}
ul#menuSubFive {
	left: 600px
}

ul#menuSubSix {
	left: 700px
}

.bold {
	font-weight: bold;
	}

.caption {
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}

.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;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.centerUnderline {
	text-align: center;
	text-decoration: underline;
}

.table {
	margin: 30px;
	padding: 0px;
}

.performersSpecial {
	font-variant:  normal;
	font-size: 0.8em;
	line-height: 1em;
	}

.time {
	background-color: #FFFF66;
}
.performersSpecialItalics {
	font-variant:  normal;
	font-size: 0.8em;
	line-height: 1em;
	font-style: italic;
}
.italic {
	font-style: italic;
}