/* THINGS to WATCH OUT for:
ULs - create default margins or padding (depends on browser) of 2.5em to accommodate the identifying disc, square etc.  Set margin and padding explicitly for headers.

Anchors - both link and visited must be defined within divs, or page defaults apply to whichever is not so defined (ie 'visited'). Active properties MUST follow hover, or else fail.

Images as links - specify the hover property, as FF and IE treat this differently (FF requires it)

See the use of height=auto - necessary to get Firefox to scroll. See also the IEhack.css

See also the treatment of text in LIs, compared with the anchor properties.

Don't understand why pseudo class As need to be redefined when they are of a class (.active1, .active2 - see navbar links), but they seem to.
*/

/* hack to stop old browsers loading handheld styles */


/* body background-color set per page in html code */
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Verdana, Helvetica, Arial, sans-serif;font-size: .8em;font-weight: normal;font-style: normal;text-decoration: none;
background-color: #161616;color: #dfdfdf;}


/* LAYOUT DIVS */

#navbar {
overflow: hidden;
font-family: sans-serif;}

#maincontent {
height: 100%;
overflow: auto;}

#shrinkwrap {
margin: 5px 5px 0px 5px;
max-width: 800px; /* gecko only */}

#popupshrinkwrap {
margin: 50px 20px 50px 20px;}

/* NAVBAR and MENU */
/*declare left margin of ul list to override browser defaults of 2.5em (margin or padding depending on browser*/

#player {
height: 35px;
padding: 10px;
text-align: left;}

#player a:link {color: #fff; text-decoration: none;}
#player a:visited {color: #fff; text-decoration: none;}
#player a:hover {color: #ff0000; text-decoration: none;}
#player a:link img {border: 1px solid #000;}
#player a:visited img {border: 1px solid #000;}
#player a:hover img {border: 1px solid #ff0000;}


#navbar ul {
margin-left: 10px;
padding-left: 0;
border-left: 1px solid red;}

#navbar ul li {
padding-left: 10px;
list-style-type: none;}

#navbar ul li a {
text-decoration: none;}

/* both link and visited must be defined or page defaults apply */
#navbar ul li a:link {color: #bfbfbf;}
#navbar ul li.active1 a:link {color: red;}
#navbar ul li.active2 a:link {color: red;}

#navbar ul li a:visited {color: #bfbfbf;}
#navbar ul li.active1 a:visited {color: red;}
#navbar ul li.active2 a:visited {color: red;}

#navbar ul li a:hover {color: #ffffff;}
#navbar ul li.active1 a:hover {color: #ffffff;}
#navbar ul li.active2 a:hover {color: #ffffff;}

/* active MUST follow hover */
/* maybe not implement this - bit naff, tho' boundary highlighted anyway... */
#navbar ul li a:active {color: red;}
#navbar ul li.active1 a:active {color: red;}
#navbar ul li.active2 a:active {color: red;}


/* set up text size etc, also when active page */ 
li.level1 {
text-align: left;
font-size: 1.1em;}

li.active1 {
text-align: left;
font-size: 1.1em;
font-style: italic;}

li.level2 {
text-align: left;
font-size: 1em;
margin-left: 25px;}

li.active2 {
text-align: left;
font-size: 1em;
margin-left: 25px;
font-style: italic;}


/* set up general links  - CHOOSE COLOURS*/ 
a:link {
color: #bfbfbf;
text-decoration: underline;}

a:visited {
color: #bfbfbf;
text-decoration: underline;}

a:hover {
color: #ffffff;
text-decoration: underline;}


/* image link behaviour*/
a img {
border: 1px solid #000000;}

a:hover img {
border: 1px solid #ffffff;}

/* to push toolbar menu downwards */
.xpropnav {
clear: both;
height: 1px;
width: 1px;}

.prop {}

/* to prevent divs appearing right, left, or both, sides */
.clear {
clear: both;
height: 1px;
overflow: hidden;}

/* margin must be set to 0 for headings or line breaks are huge */
h1 {
margin: 0;
font-family: Times, "Times New Roman", serif;font-size: 2em;font-weight: normal;font-style: normal;text-decoration: none;font-variant: small-caps;color: #ebf1ff;}h2 {
margin: 0;font-family: Times, "Times New Roman", serif;font-size: 1.8em;font-weight: normal;font-style: normal;text-decoration: none;
font-variant: small-caps;}h3 {
margin: 0;
font-family: Times, "Times New Roman", serif;font-size: 1.5em;font-weight: normal;font-style: normal;font-variant: small-caps;}h4 {}h5 {}h6 {}img {vertical-align: middle;}table {font-size: 100%;}tr.rectitle {
height: 1.00em}

td {vertical-align: top;}table.rectable {border: 1px silver solid;font-size: .8em;}td.recheader {font-weight: normal;font-family: Verdana, Helvetica, Arial, sans-serif;color: #2b4460;}

td.rectitle {font-family: Times, "Times New Roman", serif;font-size: 1em;border-top: 1px gray solid;color: #2b4460;}
td.reccomposer {font-family: Times, "Times New Roman", serif;font-size: 1.3em;}
td.recdetails {color: #303030;font-family: Verdana, Helvetica, Arial, sans-serif;font-size: .7em;}td.recspace {background-color: #cfcfcf;}
table.revtable {margin: 1em;}td.revtitle {font-family: Times, "Times New Roman", serif;font-size: 1.4em;line-heightx: 2em;vertical-align: bottom;padding-top: 2em;}td.revcrit {color: #bbbbbb;padding-bottom: 1em;}

td.revdetail {
color: #dddddd;
font-size: .9em;}

td.revcat {padding-top: 0em;font-family: Times, "Times New Roman", serif;font-size: 1.5em;
color: #dddddd;}

table.soundtable {padding: 0;}

td.soundheader {font-size: 1.1em;
border-bottom: 1px black solid;padding: 5px;}

td.soundcomposer {border-bottom: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
padding: 5px;}

td.soundtitle {
border-bottom: 1px black solid;
border-right: 1px black solid;
padding: 5px;}

td.soundensemble {border-bottom: 1px black solid;
border-right: 1px black solid;
font-size: .85em;
padding: 5px;}

td.soundlink {
border-bottom: 1px black solid;
border-right: 1px black solid;
padding: 5px;}

/* cdthumbs sets default padding to zero; cdpic adds back padding only on 2 sides; cdtableleft and -right control position of divs, and cdtableright plays with padding to offset the cd_big.jpg images; centeredimage1px places the image centrally and adds a 1px border to align (should both these things be needed) with the lefthand table images */

table.cdthumbs {
border-collapse: collapse;}

td.cdpic {
padding: 0px 4px 4px 0px;}

.cdthumbsdiv {
max-width: 400px;}

/* here to set the width and other properties of the right hand area where the cd details appear. Images are 275px wide. Top and left padding force the image down and right. */
.cdinfodiv {
width: 245px;
padding: 10px 10px 20px 15px;
border-top: 1px groove #dfdfdf;
border-right: 1px groove #dfdfdf;
border-left: 1px groove #dfdfdf;
background-color: transparent;
color: #dfdfdf;}

/* padding  centers content which otherwise seems off-center because of skewing layout */
#cd_details {
padding: 0 15px 0 0;}

.centeredimage1px {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;}

.cdtitle {
margin-left: auto;
margin-right: auto;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-decoration: none;
padding: 0 15px 0 0;
}

.cdleft {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
padding: 0;
}

.cdright {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
padding: 0 0 0 5px;
}

.cdboth {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: normal;
font-style: normal;
text-decoration: none;
padding: 0;
}

table.cdbox {}

div.floatbox {
overflow: hidden;
width: 100%;}

div.floatleft {
float: left;
width: 75%;}

div.floatright {
width: 25%;
float: right;}

div.floatright35 {
width: 35%;
float: right;
margin: 10px;}

/* these 2 attributes bring the li flush to the top and left of the box */
ul.pubgallery {
margin: 0px;
padding: 0;}

.pubgallery li {
display: inline;
list-style: none;
text-indent: 0px;
width: 175px;
height: 210px;
float: left;
margin: 0 0px 0px 0;}


/* these 2 attributes bring the li flush to the top and left of the box */
ul.cdgallery {
margin: 0;
padding: 0;}

/* inline and float combine to allow flow of li's */
.cdgallery li {
display: inline;
float: left;
list-style: none;
width: 105px;
height: 105px;
margin: 0 3px 3px 0;}