/* Main layout settings */

body
{
    background: #2b150b url("sidebar-line.gif") repeat-y top left;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: .92em;
    font-weight: normal;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

body.popuppage
{
    background-image: none;
    padding: .5em 1em 1em 1em;
}

#menu
{
    position: absolute;
    width: auto;
    height: 180px;
    top: 0;
    left: 0;
    bottom: auto;
    right: 0;
    background: #753e12 url("music.gif") no-repeat top right;
}

#sidebar
{
    position: absolute;
    width: 180px;
    height: 470px;
    top: 180px;
    left: 0;
    bottom: 0;
    right: auto;
    background: #929d37 url("sidebar-bottom.gif") no-repeat top left;
}

#main
{
    margin: 190px 24px 8px 204px;
}

/* General Styles */

a
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

a:link
{
    border-bottom: dotted 1px #ffffff;
}

a:visited
{
    border-bottom: dotted 1px #cccccc;
}

a:hover, a:focus, a:active
{
    color: #929d37;
    border-bottom: solid 1px #929d37;
}

h1
{
    clear: both;
    font-size: 1.63em;
    font-weight: bold;
}

h2
{
    clear: both;
    font-size: 1.36em;
    font-weight: bold;
    margin-top: 1.27em;
}

h3
{
    font-size: 1.09em;
    font-weight: bold;
}

dd
{
    margin-bottom: 1.12em;
}

li
{
    margin-bottom: 1em;
}
strong
{
   font-weight: bold;
   color: #929d37;
}

sup
{
    font-size: 0.66em;
}

div.hr, div.hrhalf, div.hrnoclear
{
    display: block;
    clear: both;
    height: 1px;
    font-size: 1pt;
    margin: 12px 0px 12px 0px;
    border-bottom: solid 1px #ffffff;
}

div.hrhalf
{
    width: 66%;
}

div.hrnoclear
{
    clear: none;
}

.clear
{
    clear: both;
    height: 1px;
    font-size: 1pt;
}

.left
{
    text-align: left;
}

.right
{
    text-align: right;
}

.centre
{
    text-align: center;
}

div.copyright
{
    clear: both;
    font-size: 0.7em;
    float: right;
    border-top: solid 1px #ffffff;
    padding-left: 40px;
    margin-top: 24px;
}

.rightimage
{
    float: right;
    margin-top: -30px;
    padding-top: 0px;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-right: 0px;
}

/* Menu styles */

div.sidebartop, div.sidebarbottom
{
    position: absolute;
    left: 0px;
    width: 180px;
}

div.sidebartop
{
    background: #929d37 url("sidebar-top.gif") no-repeat top left;
    top: 0px;
    height: 180px;
}

div.sidebarbottom
{
    background: #929d37 url("sidebar-bottom.gif") no-repeat top left;
    top: 180px;
    height: 100%;
}

div.menuarea
{
    margin-left: 180px;
}

div.leftimage
{
    width: 380px;
    height: 120px;
    background: url("sunburst.gif") no-repeat top left;
}

#menutabs
{
    width: 761px;
    height: 40px;
    padding-left: 38px;
    background: url("leftfiller.gif") no-repeat;
}

#menutabs > a, #menutabs > div
{
    float: left;
    width: 120px;
    height: 40px;
    margin: 0;
    border: none;
    outline: none;
    background-repeat: no-repeat;

    /* Settings for text links in case images are not available */
    color: #ffffff;
    background-color: #929d37;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16pt;
    font-weight: bold;
}

#menutabs > a:hover, #menutabs > a:focus, #menutabs > a:active
{
    color: #001c70;
}

#menutabs > div
{
    background-color: #2b150b;
}

a#Home
{
    background-image: url('tabs/Home.gif');
}
a:hover#Home, a:focus#Home, a:active#Home
{
    background-image: url('tabs/Home-over.gif');
}
div#Home
{
    background-image: url('tabs/Home-sel.gif');
}

a#Music
{
    background-image: url('tabs/Music.gif');
}
a:hover#Music, a:focus#Music, a:active#Music
{
    background-image: url('tabs/Music-over.gif');
}
div#Music
{
    background-image: url('tabs/Music-sel.gif');
}

a#Essays
{
    background-image: url('tabs/Essays.gif');
}
a:hover#Essays, a:focus#Essays, a:active#Essays
{
    background-image: url('tabs/Essays-over.gif');
}
div#Essays
{
    background-image: url('tabs/Essays-sel.gif');
}

a#Bio
{
    background-image: url('tabs/Bio.gif');
}
a:hover#Bio, a:focus#Bio, a:active#Bio
{
    background-image: url('tabs/Bio-over.gif');
}
div#Bio
{
    background-image: url('tabs/Bio-sel.gif');
}

a#Contact
{
    background-image: url('tabs/Contact.gif');
}
a:hover#Contact, a:focus#Contact, a:active#Contact
{
    background-image: url('tabs/Contact-over.gif');
}
div#Contact
{
    background-image: url('tabs/Contact-sel.gif');
}

a#Links
{
    background-image: url('tabs/Links.gif');
}
a:hover#Links, a:focus#Links, a:active#Links
{
    background-image: url('tabs/Links-over.gif');
}
div#Links
{
    background-image: url('tabs/Links-sel.gif');
}

/* Settings for text links in case images are not available */

#menutabs span
{
    display: none;
}

/* Go from menu area to main page */

div.roundtomain
{
    width: 100%;
    height: 20px;
    background-color: #2b150b;
}

div.roundtomain div div
{
    background: url("corners/rounded-left.gif") no-repeat top left;
}

div.roundtomain div
{ 
    background: url("corners/rounded-right.gif") no-repeat top right;
} 

/* Music page styles */

.detailscontrol
{
    display: none;
}

.popuplink
{
    display: inline;
}

.listen
{
    font-size: 0.6em;
    font-weight: bold;
    border: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    behavior: url('layout/PIE.htc');
    padding: 0.3em 0.4em;
    margin: 0 0.3em;
    position: relative;
    top: -0.2em;
    background-color: #929d37;
}

.notation
{
    font-family:  Opus Text, Helsinki Text, Inkpen2 Text, Opus, Helsinki, Inkpen2, Jazz, Petrucci, Maestro, EngraverTextH, MusicalSymbols, Swing, TempiFont;
}

.workdetails, .lyrics
{
    margin-left: 20px;
    margin-bottom: 1.2em;
}

.music h2
{
    display: block;
    clear: both;
    border-top: solid 1px #ffffff;
    margin-top: 1.2em;
    padding-top: 1.2em;
}

.music ul
{
   list-style: none;
   padding-left: 20px;
}

li:last-child > .workdetails, .workdetails[last]
{
   border-bottom: none;
}

.workdetails
{
    /* display: none; */
    font-size: .8em;
    width: 66%;
    border-bottom: solid 1px #ffffff;
}

.workdetails ol
{
    margin-top: 1em;
    margin-bottom: 1em;
}

.workdetails ol > li
{
    list-style-type: upper-roman;
    margin-bottom: .2em;
}

div.lyrics
{
    white-space: pre;
}

pre.lyrics
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
}
    
div.attribution
{
    margin-top: 0;
    margin-left: 40px;
    width: 360px;
    text-align: right;
}

/* Link page styles */

ul.links
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.links > li
{
    display: inline;
    float: left;
    height: auto;
    text-align: center;
    margin: 8px;
    line-height: 2;
    font-size: 1.2em;
    color: #fff;
    background-color: #fff;
    border: 8px solid #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    behavior: url('layout/PIE.htc');
}

ul.links > li > a
{
    float: left;
    padding: 8px;
    outline: none;
    border: none;
    line-height: 1;
    white-space: nowrap;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    behavior: url('layout/PIE.htc');
}

ul.links > li > a:active, ul.links > li > a:focus, ul.links > li > a:hover
{
    color: #bbb !important;
}

ul.links > li > a > span.note
{
    margin: 0px;
    font-size: 0.8em;
    font-weight: normal;
    white-space: nowrap;
}


#popupcontainer
{
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   z-index: -100;
}

.popup
{
    background-color: #2b150b;
    margin: 5% auto;
    max-width: 32em;
    min-width: 320px !important;
    height: 80%;
    min-height: 400px !important;
    border: 8px solid #ffffff;
    padding: 0;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    behavior: url('layout/PIE.htc');
}

.closecontainer
{
    margin-top: 12px;
    text-align: center;
}

.close
{
    background-color: #2b150b;
    border: 4px solid #ffffff !important;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-radius: 0 0 8px 8px;
    behavior: url('layout/PIE.htc');
    padding: .5em 2em;
}