* html body {font-size: 75%;}
body {padding: 23px 23px 0; margin: 0; font: 80% georgia, serif; color: #633;}
#home, #about {background: #800000;}
#recordings {background: #5a2d47;}
#timeline {background: #b97e43;}
#education, #directory {background: #808000;}
#news {background: #2f4f4f;}
#listen {padding: 0;}

a {color: #800000;}
a:visited {color: #696969;}
a:hover {color: #c60;}
img {border: 0;}
h1 {margin: 0;}
h2 {font-size: 160%; font-weight: normal; margin: 24px 0 4px; line-height: 1.2;}
h2 span {font-size: 70%; display: block;}
h3 {font-size: 140%; font-weight: normal; margin: 18px 0 4px;}
#directory h3 {margin-left: 6px;}
h4 {font-size: 120%; font-weight: normal; margin: 8px 0 4px;}
h5 {font-size: 100%; font-weight: bold; margin: 18px 0 8px;}
p {margin: 0 0 12px;}
#directory p {margin: 0 44px 12px;}
ul, ol {margin: 0 0 12px 24px; padding: 0;}
li {margin-bottom: 6px;}
li span {font-size: 90%;}
ol li li {list-style-type: lower-alpha;}
hr {border: 1px solid #633; border-width: 1px 0 0; width: 100%; margin: 16px 0; height: 1px;}
table {border-collapse: collapse; border-spacing: 0;}
table td, table th {vertical-align: top; padding: 0; text-align: left;}
#recordings hr {width: 30%; margin: 16px auto;}
#directory hr {width: 631px; margin: 24px 0 24px;}

#wrapper {width: 978px; margin: auto; position: relative; background: url(../img/bg.gif) top right repeat-y; overflow: auto; min-height: 722px;}
#home #wrapper {background: #b5c0b9 url(../img/bg-home.jpg) no-repeat; height: 722px;}

* html #content {margin-right: 20px;}
#content {width: 543px; float: right; margin: 15px 44px; line-height: 1.4;}
#home #content {margin: 42px 0 0 310px; width: 270px; float: none; font-style: italic; font-size: 14.5pt; line-height: 1.5;}
* html #directory #content {margin-right: 0;}
#directory #content {margin: 15px 0; width: 631px;}

#hdsection {margin-bottom: 2px;}
#hdsection, #hdpage {display: block;}
#hdpage {margin-bottom: 12px;}

.intro {font-size: 130%; line-height: 1.4;}
.attr {margin: -8px 0 18px; font-style: italic;}
#about .intro, #about .attr, #about .pullquote {color: #800000;}
#recordings .intro, #recordings .attr, #recordings .pullquote {color: #5a2d47;}
#timeline .intro, #timeline .attr, #timeline .pullquote {color: #c60;}
#education .intro, #education .attr, #education .pullquote, #directory .intro, #directory .attr, #directory .pullquote {color: #808000;}
#news .intro, #news .attr, #news .pullquote {color: #2f4f4f;}
.related {padding-left: 12px; margin: 0 0 24px;}
.related h4, .pullquote h4 {margin: 0 0 8px;}
.related ul {margin: 0 0 0 24px;}
.pullquote {float: right; width: 40%; font-size: 130%; margin: 0 0 12px 12px; padding-left: 18px;}
.pullquote p {margin-bottom: 0;}
#about .related, #about .pullquote {background: url(../img/bg-nav-about.gif) -6px 2px repeat-y;}
#recordings .related, #recordings .pullquote {background: url(../img/bg-nav-recordings.gif) -6px 2px repeat-y;}
#timeline .related, #timeline .pullquote {background: url(../img/bg-nav-timeline.gif) -6px 2px repeat-y;}
#education .related, #education .pullquote, #directory .related, #directory .pullquote {background: url(../img/bg-nav-education.gif) -6px 2px repeat-y;}
#news .related, #news .pullquote {background: url(../img/bg-nav-news.gif) -6px 2px repeat-y;}

.sep {display: block; margin: 16px auto 22px;}
#nvtimeline, #nvtimeline li {text-align: center; padding: 0; margin: 0; list-style: none;}
#nvtimeline li {background: url(../img/li.gif) top center no-repeat; padding: 7px 0 4px;}
#nvtimeline li.first {background: none; padding-top: 0;}
#nvtimeline a {font-weight: bold; text-decoration: none;}

.next {margin-top: 16px; padding-top: 4px; text-align: right; border-top: 1px solid #633;}
.back {clear: both; margin-top: 16px; padding-top: 4px; border-top: 1px solid #633;}
.back2 {clear: both; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 1px solid #633;}
.caption {padding: 4px; font-size: 70%; font-family: verdana; color: #696969;}
.thumb {float: right; margin: 16px 0 8px 16px;}
.printonly {float: right; width: 240px; margin: 4px 0 4px 12px; display: none;}
.photos {text-align: center;}
.photos img {display: block; margin: 24px auto 4px;}

.tracks, .players, .recordings, .tracks li, .players li, .recordings li {list-style: none; margin: 0; padding: 0;}
.tracks, .players, .recordings {margin: 16px 0;}
.tracks li, .players li, .recordings li {text-indent: -1em; padding-left: 1em;}
.recordings li {margin-bottom: 6px;}
.review {font-style: italic; color: #800000;}
.review em {font-style: normal;}

.column-l {width: 54%; float: left; margin: 0 0 24px -30px; position: relative;}
#recordings .column-l {clear: both;}
#recordings .column-l h2, #recordings .column-r h2 {margin-top: 10px;}

.column-r {width: 54%; float: right; margin: 0 -30px 24px 0; position: relative;}
.column-c {width: 54%; margin: 0 auto 24px; position: relative; clear: both;}

* html #photos {font-size: 75%;}
#photos {width: 324px; background: #b5c0b9; position: absolute; top: 295px; left: 0; padding-top: 17px; font-size: 70%; font-family: verdana; color: #696969;}
#photos img {display: block;}
#photos div {position: absolute; top: 15px; left: 0; display: none; background: #b5c0b9; width: 324px;}
#photos div span {display: block; padding: 4px;}
#photos .thumb {float: left; margin: 0 8px 8px 0; cursor: pointer;}
#photos .close {position: absolute; top: 0; left: 0; cursor: pointer;}
#photos .nomargin {margin-right: 0;}

#contactform {width: 100%; margin: 16px 0 0; padding: 0;}
fieldset {margin: 0; padding: 18px 8px 16px; position: relative; border: 0;}
#contactform div {width: 100%; margin: 0;}
input, select, textarea {font-size: 100%; font-family: arial, sans-serif; color: #343434; border: 1px solid #633;}
form .required {font-weight: bold;}
form .required:after {content: "*";}
form label {display: block;}
form .radioset {overflow: auto; height: 100%;}
form .radioset label {float: left;}
form input {display: block; margin-bottom: 8px; width: 80%;}
form .radioset input {width: auto; float: left; clear: left;}
form textarea {display: block; margin-bottom: 8px; width: 90%; height: 100px;}
form .button {float: right; margin-top: 8px; width: auto; color: #fff; background-color: #633; border-color: #633;}
.err {font-weight: bold; color: #900;}

#directory table {width: 631px; margin: 0 0 24px 0;}
#directory table th, #directory table td {font-family: verdana; font-size: 80%; color: #000; padding: 4px 6px 4px 6px;}
#directory table th {vertical-align: bottom; padding-top: 12px;}
#directory table th a, #directory table th span.selected {color: #633;}
#directory table th span.selected {padding-left: 14px; background: url(../img/ic-arrow.gif) 0 3px no-repeat;}
#directory table .odd td {background: #fff;}
#directory table .filters {}
#directory table .filters span {margin: 0 0 8px; display: block;}
#directory table .filters form input {width: auto; display: inline; margin: 0;}

* html #navwrapper {height: 280px;}
#navwrapper {width: 324px; min-height: 280px; background: #b5c0b9; padding-top: 15px;}
#navwrapper img {display: block;}
#logo {margin: 0 auto 15px;}

#home #nav {position: absolute; top: 70px; left: 28px; width: 230px;}
#home #nav #nav-about, #home #nav #nav-recordings, #home #nav #nav-timeline, #home #nav #nav-education, #home #nav #nav-news {background-repeat: repeat-y;}
* html #home #nav #nav-about ul {width: auto;}
#home #nav #nav-about ul {width: 130px;}
#home #heading {margin: 70px 0 0 260px;}

#nav, #nav li, #nav ul {margin: 0; padding: 0; list-style: none; color: #633;}
#nav {margin: 0 0 40px 50px;}
#home #nav {margin: 0;}
#nav a {text-decoration: none; color: #696969;}
#home #nav a, #about #nav #nav-about a, #recordings #nav #nav-recordings a, #timeline #nav #nav-timeline a, #education #nav #nav-education a, #directory #nav #nav-education a, #news #nav #nav-news a {color: #633;}
#nav a:hover {text-decoration: underline;}
#nav li {font-weight: bold; font-size: 110%; margin-bottom: 3px; padding-left: 32px; text-indent: -1em;}
#home #nav li {margin-bottom: 28px;}
#nav li ul {margin-top: 3px;}
#nav li ul li {font-weight: normal; font-size: 90%; margin: 0 0 3px 12px; padding: 0;}
#nav li ul li a.current {font-weight: bold; text-decoration: underline;}
#home #nav li ul li {margin: 0 0 3px;}
#nav #nav-about {background: url(../img/bg-nav-about.gif) 0 2px no-repeat;}
#nav #nav-recordings {background: url(../img/bg-nav-recordings.gif) 0 2px no-repeat;}
#nav #nav-timeline {background: url(../img/bg-nav-timeline.gif) 0 2px no-repeat;}
#nav #nav-education {background: url(../img/bg-nav-education.gif) 0 2px no-repeat;}
#nav #nav-news {background: url(../img/bg-nav-news.gif) 0 2px no-repeat;}
#nav #nav-facebook {background: url(../img/bg-nav-facebook.gif) 0 2px no-repeat;}
#nav #facebook {padding-left: 6px;}
#facebook img {vertical-align: -6px;}

#player {position: absolute; bottom: 40px; left: 0;}

* html #footer {font-size: 75%;}
#footer {width: 631px; margin: 0 auto; color: #a8b2a8; text-align: center; font: 70% verdana, sans-serif; padding: 4px 0 4px 347px;}
#home #footer {width: 978px; padding-left: 0;}
#footer a {color: #a8b2a8; text-decoration: none;}
#footer a:hover {text-decoration: underline;}

/* news scroller */
#newsbox {margin: 30px 0 0 310px; width: 270px;}
#newsbox h3 {color: #2f4f4f; text-transform: uppercase; font-size: 100%; margin: 0 0 -3px;}
#newsbox p {font-size: 85%; margin: 4px 4px 12px 4px;}
#scroll-pane {height: 142px; overflow: auto; border: 7px solid #2f4f4f;}