BODY {
background-color: #a99a94; 
margin: 0;
} /* Sets background colour, margin: 0; is important for the layout. */

A:link {
color: white;
} /* Colour of link that hasn't been clicked.*/

A:visited {
color: #dadada;
} /* Colour of link that has already been visited*/

H1 {
font-size: 25pt; 
font-family: arial, "times new roman"; 
font-weight: normal; 
color: #000000;
} /* Meaning of h1 tag.*/
/* all the following refer to what type of text 
 is associated with which header tag.*/

H2 {
font-size: 16pt; 
font-family: arial; 
font-weight: bold; 
color: #000000;
}

H3 {
font-size: 12pt; 
font-family: arial; 
font-weight: bold; 
color: white;
}

H4 {
font-size: 16pt; 
background color: #black;
font-weight: bold; 
font-family: arial; 
font-weight: normal; 
color: black;
}

H5 {
font-size: 10pt; 
font-family: arial; 
font-weight: normal; 
color: black;
}


            

img { 
border-width: 0px; 
} /* Makes sure there are no borders around images, can look unprofessional.*/

a.link { 
position: relative;
z-index: 24; 
} /* z-index 24 means it's hidden from view.*/

a.link:hover { 
z-index:25; 
} /* when the hover term is satisfied it becomes visible (z-index: 25;)*/

a.link span {
display: none;
} /* The text used in the popup description is hidden from view.*/

a.link:hover span {
display: block;
position: absolute; 
top: 5px; 
left: 20px;
width: 125px; 
padding: 5px; 
margin: 10px; 
z-index: 100; 
border: solid;
border-width: 2px;
border-color: #2B2B2B; 
color: #FFF; 
font-weight: bold; 
background-color: #404040;
font: 10px Verdana, sans-serif; 
text-align: center;
} /* This deturmines where the pop up appears, how large it is, colour etc.*/

a.album { 
position: relative;
z-index: 24; 
} /* The same as above, just it's linked with a different class name.*/
/* in this case album. Since the album pop up needs different 
 dimensions to the text one above.*/

a.album:hover { 
z-index:25; 
}

a.album span {
display: none;
}

a.album:hover span {
display: block;
position: absolute; 
top: 5px; 
left: 40px;
width: 125px;
height: 90px 
padding: 5px; 
margin: 10px; 
z-index: 100; 
border: solid;
border-width: 2px;
border-color: #2B2B2B; 
color: #FFF; 
font-weight: bold; 
background-color: #404040;
font: 10px Verdana, sans-serif; 
text-align: center;
}

div.header-top { 
position: absolute; 
width: 1044px; 
border: solid; 
border-width: 3px; 
border-color: #2B2B2B; 
padding: 0px; 
margin: 0px; 
height: 20px; 
margin-top: 0px; 
right: 50px; 
left: 50px; 
background: #4682B4;
} /* Small div, right at the very top, contains what looks like a 'bar' across the top.*/

div.header-logo { 
position: absolute; 
width: 1044px; 
border: solid; 
border-width: 3px; 
border-color: #2B2B2B; 
padding: 0px; 
margin: 0px; 
height: 40px; 
right: 50px; 
left: 50px; 
background: #778899; 
text-align: left; 
} /* Section that in this case only contains the logo, but could contain a search and other content.*/

div.header-bottom { 
position: absolute; 
width: 1044px; 
border: solid; 
border-width: 3px; 
border-color: #2B2B2B; 
padding: 0px; 
margin: 0px; 
height: 20px; 
right: 50px; 
left: 50px; 
top: 115px; 
background: #4682B4;
} /* Another small div containing the seperating 'bar'.*/


div.left-menu { 
position: absolute; 
height: 120px; 
top: 135px; 
left: 50px; 
width: 200px; 
float: left; 
border: none; 
border-width: 0px; 
border-color: #2B2B2B; 
background-color: #000; 
} /* This is simply to give the left menu div a black outline around it*/
/* aswell as its own border.*/

div.dyno-flyer { 
position: absolute; 
top: 130px;
height: 325px; 
left: 0px; 
float: left;
width: 200px;  
background-color: #000; 
}

 div.left-menu-links { 
position: absolute; 
height: 102px; 
top: 1px; 
margin-bottom: 5px; 
left: 3px; 
width: 180px; 
padding: 5px; 
border: solid; 
border-width: 2px; 
border-color: #2B2B2B; 
background-color: #778899; 
} /* Left menu section that contains the small link divs.*/

	div.link-box { 
position: relative; 
top: 0px; 
left: -1px; 
width: 168px; 
padding: 5px; 
border: solid; 
border-width: 2px; 
border-color: #595959; 
background-color: #2B2B2B; 
} /* Small divs that contain the HTML code that make the menu links.*/

div.content { 
position: absolute; 
top: 135px; 
width: 624px; 
border: solid; 
padding: 10px; 
margin-left: 250px; 
margin-right: 250px; 
border-width: 3px; 
border-color: #2B2B2B; 
background-color: #36648B; 
color: #fff;
} /* Main div, placed in the centre, holds all main content.*/

div.right-menu { 
position: absolute; 
height: 357px; 
top: 135px; 
width: 200px; 
border: none; 
background-color: #000;
left: 900px; 
} 



 div.right-menu-links { 
position: absolute; 
float: left; 
height: 338px; 
top: 1px; 
margin-bottom: 5px; 
right: 3px; 
width: 180px; 
padding: 5px; 
border: solid; 
border-width: 2px; 
border-color: #2B2B2B; 
background-color: #778899; 
} /* Right menu section which 
holds the small divs.*/

	div.link-box { 
position: relative; 
top: 0px; 
left: -1px; 
width: 168px; 
padding: 5px; 
border: solid; 
border-width: 2px; 
border-color: #595959; 
background-color: #383838; 
}