/*****************************************************
 * website designed and developed by Jonathan P.Reeb *
 *****************************************************/

/************************
 * reset default styles *
 ************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border:0; font-size:100%; font-style:inherit; font-weight:inherit; font-family:inherit; margin:0; outline:0; padding:0; vertical-align:baseline;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
caption, th, td {font-weight:normal; text-align:left;}
:focus {outline:0;}
form {display:inline;}
ol, ul {list-style:none;}
table {border-collapse:separate; border-spacing:0;} /* tables still need 'cellspacing="0"' in the markup */

/********************
 * float management *
 ********************/

.clearfix:after {content:"."; clear:both; display:block; height:0; visibility:hidden;}
	
/*********************
 * basic tag styling *
 *********************/

body {background:url(../img/elements/bkg-ptrn.gif) 0 0 repeat; color:#212121; font:11px arial, verdana, helvetica; text-align:left; width:auto;}
a {color:#666; text-decoration:underline;} a:hover {color:#212121; text-decoration:none;}
em {font-style:italic;}
h2, h3, h4, h5, h6 {background:#ccc; height:25px; margin:0 0 10px; overflow:hidden; padding-left:0; text-indent:-1000px;}
.text-heading {background:none; border-bottom:3px solid #ccc; font-size:11pt; font-weight:normal; height:auto; margin:0 7px 7px; text-indent:5px;}
strong, .bold {font-weight:bold;}
.highlight {color:#741c12}

/*************
 * container *
 *************/

div#container {margin: 0 auto; position:relative; width:760px;}
span.background-fade {background:url(../img/elements/bkg-ptrn-fade.gif) 0 0 repeat-x; display:block; height:136px; left:0; position:absolute; top:0; width:100%;}

/**********
 * header *
 **********/

div#header {height:99px; position:relative; width:760px;}
div#header span.header-top-bkg {background:url(../img/elements/container-top.png) 0 0 no-repeat; bottom:0; display:block; left:0; height:49px; position:absolute; width:760px;}
div#header h1 {height:40px; overflow:hidden; left:-255px; margin-left:50%; position:absolute; top:36px; width:509px; z-index:1;}
div#header h1 a {background:url(../img/elements/mew-soprano.png) 0 0 no-repeat; display:block; height:80px; position:relative; text-indent:-1000px; top:0; width:509px;}
div#header h1 a:hover {top:-40px;}

/* nav */
ul#nav {left:8px; position:absolute; top:108px; width:750px;}
ul#nav li {float:left; height:25px; margin:0 4px; position:relative; text-align:center; width:178px;}
ul#nav li a {display:block; height:25px; overflow:hidden; text-indent:-1000px; width:auto;}
ul#nav li a:hover, ul#nav li.selected a {background-position:0 25px;}
ul#nav li.biography a {background-image:url(../img/elements/headings/biography.gif);}
ul#nav li.repertoire a {background-image:url(../img/elements/headings/repertoire.gif);}
ul#nav li.media a {background-image:url(../img/elements/headings/media.gif);}
ul#nav li.contact a {background-image:url(../img/elements/headings/contact.gif);}

/********
 * body *
 ********/

div#body {background:url(../img/elements/body-transparent-bkg.png) 0 0 repeat; padding-bottom:4px; z-index:1;}
div#body-inner {background:#fff; margin:0 auto; padding:48px 0 55px; width:752px;}

/* quotes */
ul#quotes {color:#912317; font-size:16px; font-style:italic; line-height:21px; margin-bottom:15px; position:relative; text-align:center;}
ul#quotes li {display:none; width:100%;}
ul#quotes li.first {display:block;} /* show for non-javascript users */

/* slideshow/upcoming performances */
body.home h2 {background:#ccc url(../img/elements/headings/upcoming-preformances.gif) 20px 5px no-repeat;}
div#slideshow-container {color:#fff; background:#000; font-size:12px; height:400px; margin:0 auto; position:relative; width:735px;} /* container to append jQuery slideshow controller to */
div#slideshow-container .highlight {color:#ffc;}
div#slideshow-container ul#upcoming-performances {color:#fff; left:0; text-align:left; position:absolute; top:0; z-index:5;}
div#slideshow-container ul#upcoming-performances li {background:url(../img/elements/bullet.gif) 5px 0 no-repeat; line-height:16px; margin:5px 0; padding-left:25px; width:510px;}
div#slideshow-container ul#upcoming-performances li a:hover {color:#fff;}
div#slideshow-container ul#upcoming-performances li.review {background:none; font-style:italic; height:auto; padding:5px 0 5px 35px; width:450px;}
div#slideshow-container div#slideshow img {display:none; opacity:0.0; position:absolute; right:0; top:0; z-index:2;}
div#slideshow-container div#slideshow img.first {display:block; opacity:1.0;} /* show for non-javascript users */
div#slideshow-container div#slideshow img.active {opacity:1.0; z-index:4;}
div#slideshow-container div#slideshow img.last-active {z-index:3;}
div#slideshow-container div.controller {background:#000; bottom:0; filter:alpha(opacity=80); height:19px; left:0; -moz-opacity:.8; margin:0 auto; opacity:.8; position:absolute; width:100%; z-index:5;}
div#slideshow-container div.controller a {display:block; height:11px; position:absolute; top:4px; width:13px;}
div#slideshow-container div.controller a:hover {filter:alpha(opacity=80); -moz-opacity:.8; opacity:.8;}
div#slideshow-container div.controller a.play {background:url(../img/elements/play.gif) 0 0 no-repeat !important; right:85px;}
div#slideshow-container div.controller a.pause {background:url(../img/elements/pause.gif) 0 0 no-repeat; right:85px;}
div#slideshow-container div.controller a.prev {background:url(../img/elements/prev.gif) 0 0 no-repeat; right:110px;}
div#slideshow-container div.controller a.next {background:url(../img/elements/next.gif) 0 0 no-repeat; right:65px;}

/* biography */
/*************/

body.biography div#body-inner {font-size:8pt; line-height:20px; padding-left:15px; padding-right:15px; text-align:left; width:722px;}
div.headshot {background: url(../img/elements/headshot.gif) 0 0 no-repeat; height:279px; margin-right: 3px; position:absolute; right:1px; top:176px; width:421px;}
body.biography p {text-indent:50px;}

/* repertoire */
/**************/

body.repertoire table {border-bottom:4px solid #ccc; border-left:4px solid #ccc; font-size:12px; margin:0 auto; width:600px;}
body.repertoire table th,
body.repertoire table td {border-right:4px solid #ccc; padding:10px 0 10px 10px; width:33%;}
body.repertoire table th {overflow:hidden; text-indent:-1000px;}
body.repertoire table th.role {background:#ccc url(../img/elements/headings/role.gif) 10px center no-repeat;}
body.repertoire table th.opera {background:#ccc url(../img/elements/headings/opera.gif) 10px center no-repeat;}
body.repertoire table th.composer {background:#ccc url(../img/elements/headings/composer.gif) 10px center no-repeat;}
body.repertoire table tr.even td {background:#efefef;}

/* contact */
/***********/

body.contact div.form-container {margin-bottom:10px;}
body.contact div.form {float:left;}
body.contact div.form h3 {text-align:center; text-indent:0;}
body.contact div.email {margin-left:8px; width:365px;}
body.contact div.guestbook {border-left:3px solid #ccc; width:368px;}
body.contact div.guestbook div {margin-left:10px;}
body.contact div.guestbook h3 {text-indent:10px;}
body.contact div.email form div.input-control input,
body.contact div.email form div.input-control textarea {width:352px;}
body.contact div.guestbook form div.input-control input,
body.contact div.guestbook form div.input-control textarea {width:355px;}
body.contact p  {text-align:center;}
body.contact .text-heading {margin:0 0 10px; padding-bottom:3px;}
h2.email {background:#ccc url(../img/elements/headings/email.gif) center center no-repeat;}
h3.email-agent {background:#ccc url(../img/elements/headings/email-agent.gif) center center no-repeat; border:none; text-indent:-1000px;}

/* contact forms */
input, select, textarea {border:1px solid #212121;}
input, select, textarea, label {font-size:11px; margin:0; padding:1px 0; vertical-align:middle;}
input.checkbox, input.radio {margin-right:5px;}
form div {margin:10px 0; position:relative;}
form div.input-control label {display:block; float:left; margin-right:5px;}
form div.compact label {color:#333; font-style:italic; position:absolute; width:auto; left:3px; top:0;}

a.button {position:relative; top:2px;}
form div.input-control input.submit-button {width:auto;}
input.submit {background:#ccc; cursor:pointer; font-weight:bold; padding:0 5px;}

/* guestbook */
/*************/

body.guestbook h2 {background:#ccc url(../img/elements/headings/guestbook.gif) center center no-repeat;}
div.GBentry {border-bottom:1px solid #ccc; margin:0 7px 7px; padding:5px;}
div.GBentry span.name-email {display:block; font-size:12px; font-weight:bold; padding-bottom:3px;}
div.GBentry span.date {font-style:italic;}

/* media */
/*********/

body.media div.photo-gallery {left:1px; margin-bottom:20px; position:relative;}
body.media div.photo-gallery img {float:left; margin:0 0 6px 6px; width:180px;}
body.media div.photo-gallery p,
body.media div.video p {margin-bottom:10px; padding:0 10px; text-align:left; z-index:2;}
body.media div.video {margin-bottom:20px; text-align:center;}

/**********
 * footer *
 **********/

div#footer {padding:10px 0; position:relative; text-align:center; top:-47px;}