/*=== RESET STYLES ===*/
/* Use YUI to reset */

/*=== Prep Styles ===*/
body {
	font-size: 62.5%;	
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
table{  /*IE fixes in separate sheet*/
	font-size: inherit;
	color: inherit;
}
h1{font-size: 3.6em;}
h2{font-size: 2.1em;}
h3{font-size: 1.8em;}
h4{font-size: 1.6em;}
h5{font-size: 1.4em;}
h6{font-size: 1.3em;}

h1, h2, h3, h4, h5, h6, p, t, ul, ol, table{
	padding-left: 10px;
	padding-right: 5px;
}

h2, h3{
	margin: 1em 0 .5em 0;
	line-height: 1;
}

p, ul, ol, td {
	font-size: 1.2em;
	line-height: 1.5;
	margin: .5em 0 1em 0;
}



/*=== WWAA-specific styles===*/

/*== TEST ===*/
/*div{
	border: solid 1px #006485;
}*/

body{
	color: #fff;
	background: #005bcc url(img_sty/bg_body.png) repeat-x;
}

h1, h2, h3{
	color: #ffde4f;
	font-weight: normal;
}

/*img{
	float: right;
	margin-left: 10px;
	margin-bottom: 5px
}
*/



/*=== GRID ===*/

.wrapper {
	width: 780px;
	width: 784px;
	position: relative;
	left: 50%;
	margin-left: -390px;
	margin-left: -392px;
	background-color: #004ea2;
	padding-bottom: 5px;
	margin-top: 15px;
	
}

.inner_wrapper{
	/*background: url(img_sty/watermark.png) no-repeat 30px 65px;
	position: relative;
	z-index: 15;*/
	
}

/*columns layed out using CSS table rules
and fixed for >IE8 in separate stylesheet*/
.table{
	display: table;
	border-collapse: collapse;
	width: 100%;
	position: relative;
	z-index: 5;
}

.row{
	display: table-row;
}
.cell{
	display: table-cell;
	/*border: solid black 1px;*/
}

.side{
	position: relative;
	z-index: 200;
	width: 158px;
	padding-right: 15px;
}





.emph{
	font-weight: bold;
	font-size: 120%;
}
/*de-emph used specifically for .prog h5 */
.de_emph{
	font-size: .9em;
	color: #004ea2;
	font-weight: normal;
}

.head{
	color: #fff;
	background: #004ea2 url(img_sty/bg_head.png) no-repeat top;
	position: relative;
	z-index: 0;
	
}
.head h1{
	font-size: 4.2em;
	/*margin-left: 60px;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 30px;
	padding-bottom: 10px;*/
	margin-top: 0;
}
h1.heading{
	width: 760px;
	height: 105px;
	text-indent: -9999px;
	
}

.logo{
	position: absolute;
	top: -5px;
	left: 37px;
	z-index: 11;
	
}

.nav{
	/*margin-top: 15px;*/
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
	position: relative;
	z-index: 3;
	
}


.foot {
	font-size: .9em;
	padding-left: 10px;
	z-index:5;
	position: relative;
}
/*used for ByteHaven signature*/
.sig{
	text-align: right;
	font-size: .8em;
	background-image: none;
	background-color: transparent;
	border: none;
}


.side p{
	padding-left: 5px;
	padding-right: 5px;
	font-size: 1.12em;
	line-height: 1.3;

}

/* columns styles as table cells
	headings line up vertically - more or less
	so putting an image above side heading
	forces main heading down.  Solution:
	add a heading above image and style it
	so it does not display*/
.side h2.hidden{
	line-height: 0;
	font-size: 1px;
	margin: 0;
	padding: 0;
	color: #004ea2;
}

.side img{
	float: none;
	margin-left: 5px;
	margin-bottom: 0;
}

.inner_side{
	position: relative;
	z-index: 7;
	background-color: #fff;
	color: #000;
	margin-top: -20px;
	padding-top: 7px;
	padding-bottom: 5px;
	background: #fff url(img_sty/corners_side_top.png) no-repeat top;
}



.main{
	width: auto;
	
	padding-left: 10px;
}
.address p{
	line-height: 1;
	
}


/*===BOXES===*/
/*three basic boxes called prog, box and box3.
prog and box3 have a corresponding "outer" to hold
rounded corners*/

.box{
	position: relative;
	margin: 5px;
	margin: 0;
}
.box h3{
	color: #004ea2;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.2;
	border-bottom: 1px solid #0089cf;
	padding-bottom: .2em;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 0;
	padding-right:0;
}

.prog_outer{
	position: relative;
}

.prog_outer img{
	float: right;
	margin-left: 10px;
	margin-bottom: 5px
}

.box3_outer img{
	float: right;
	margin-left: 10px;
	margin-bottom: 5px;
}

.prog_outer, .box3_outer{
	background: #fff url(img_sty/prog_btm.gif) no-repeat bottom;
	width: 574px;
	margin: 20px 10px 0 10px;
	position: relative;
	z-index: 0;
}

/* In non-IE browsers, clears floats */
.prog_outer:after, .box3_outer:after .box4_outer:after{
	content: ".";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}

.prog_outer img, .box3_outer img{
	position: relative;
	right: 5px;
	top: 5px;
	z-index: 10;
}

.prog_outer img.tall{
	position: relative;
	/*top: -12px;*/
	top: -10px;
	right: 0;
	z-index: 10;
}



.prog, .box3{
	position: relative;	/* used to position sponsorship block */
	color: #000;
	background-image: url(img_sty/prog_top.png);
	background-repeat: no-repeat;
	background-position: top;
	margin: 0;
	padding: 10px;
}

.box3{
	background-image: url(img_sty/box3_top.gif);
}

.box3 h3{
	color: #004ea2;
}

.prog p, .prog h4, .prog h5{
	margin: 0 0 .3em 0;
	padding: 0;
}
.prog p{
	font-size: 1.1em;
}
.prog h4{
	color: #004ea2;
	font-size: 2.1em;
	font-weight: normal;
	
}
.prog h5{
	color: #000;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.2;
}





/*extends box3_outer */

.sponsor{
	margin-top: 100px;
	
}
.sponsor img{
	float: none;
	border: none;
	padding: 0 18px 10px 18px;	/*controls spacing of logos in banner*/
	display: inline;
	margin: 0;
}
.sponsor_logo{
	position: absolute;
	top: 5px;
	right: 5px;
	height: 36px;
	background-image: url(img_sty/minghella-logo-prog.png);
	background-repeat: no-repeat; /*text-indent: -9999px;*/
	width: 200px;
	width: 175px;
}
.sponsor_logo p{
	font-size: .9em;
	/*text-indent: -135px;
	padding-top: 10px;*/
	padding-top: 5px;
}

/*2010-2011 season - two sponsors for late concerts so on
index page, they occur after sidebar ends*/
.prog_outer .sponsor{
	margin: 0;
	position: absolute;
	right: -170px;
	width: 150px;
	text-align: center;
}
.prog_outer .sponsor img{
	margin: 0;
	padding: 0;
}

/* LINKS - see also NAVBAR */

a:link {
	color: #8cd7ff;
	color: #ffde4f;
	font-weight: bold;
}
.box a:link, .box3 a:link{
	color: #003e82;
}
a:visited{
	color: #ceeeff;
	color: #ffeba0;
	font-weight: bold;
}
.box a:visited, .box3 a:visited{
	color: #004ea2;
}
a:hover, a:active{
	color: #ffde4f;
	background-color: #0089cf;
}

.box a:hover, .box a:active, .box3 a:hover, .box3 a:active{
	color: #ceeeff;
	background-color: #003e82;
}
.sponsor a:hover, .sponsor a:active{
	background-color: transparent;
}

.prog a:link{
	color: #000;
}
.prog a:visited{
	color: #000;
}
.prog a:hover, .prog a:active{
	color: #a61a00;
	color: #ff2800;
	color: #004ea2;
	background-color: transparent;
}
.sig a:link, .sig a:visited, .sig a:hover, .sig a:active{
	color: #c9f2ff;
	font-weight: normal;
}



/*=================*/
/*=== NAVBAR ===*/
/*==============*/
.nav ul{
	display: block;
	list-style-type: none;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.6em;
	font-weight: bold;
	background-color: transparent;
	margin: 0;
	
}
.nav li{
	display: inline;
}

.nav a:link, .nav a:visited{
	color: #ffde4f;
	text-decoration: none;
	font-variant: small-caps;
	padding: .5em .4em;
	border-left: solid 2px transparent;
	border-right: solid 2px transparent;
}
.nav li a:hover, .nav li a:active{
	background-color: #0089cf;
	border-left: solid 2px #ffde4f;
	border-right: solid 2px #ffde4f;
}






/*=== PAGE-SPECIFIC STYLES ===*/
/*About*/
#grand_piano{
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 0;
	float: none;
}
/*steps text around grand piano image*/
p.step{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.s1, .s2, .s3, .s4, .s5, .s6{
	position: relative;
	z-index: 10;
}
.s1{margin-right: 240px;}
.s2{margin-right: 300px;}
.s3{margin-right: 380px;}
.s4{margin-right: 420px;}
.s5{margin-right: 480px;}
.s6{margin-left: 350px;	text-align: right;}




/*Venue*/
#map_canvas{
	width: 535px;
	height: 500px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px
}


/*Side bar*/
#piano_th{
	position: absolute;
	top:7em;
	right:5px;
	z-index:0;
}

/*Step the text around the stein piano in sidebar*/
#step1, #step2, #step3{
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	z-index: 10px
}
#step1{
	/*margin-right: 40px;*/
}
#step2{
	margin-right: 60px;
}
#step3{
	margin-right: 90px;
}

.splash{
	position: absolute;
	top: -20px;
	right: -30px;
	z-index: 20;
}

.splash-left{
	position: absolute;
	top: 40px;
	left: -40;
	z-index: 20;
}

/*Artists Biographies*/
/*list of names*/
ul.biog li{
	list-style: none;
	font-weight: bold;
}



/*review*/
.review{
	padding-bottom: 0;
	margin-bottom: 0;
	margin-top: 1em;
	
}
/*review source*/
.source{
	margin-top: 0;
	line-height: 1;
	font-style: italic;
	text-align: right;
}

/*photo with credit*/
div.photo {
	float: right;
	margin-left: 1em;
	
}
div.photo img{
	position: static;
}

div.photo p{
	text-align: right;
	margin-top: -.2em;
	font-size: .8em;
	color: gray;
}