/* IT270: External style-sheet */

html {
	height:100%;
}

body {
	width:90%;
	margin: auto; /* center the body */
	min-width:800px;
	min-height:100%; /* stick the footer at the bottom even if content is shorter than screen */
	color:#ffcc00; /* main color will be a jazzy, brass-like yellow-ish */
	background-color:#000000;
	position:relative;
}

/* Use id/class prefixes to quickly show what element the ID refers to.
 * 	d for div, i for image, h for headers, n for nav, a for anchors, etc.
*/


#dTopBanner {
	color:black;
	margin: auto;
	position:relative;
}

#iTopBanner { 
	width:100%; /* Resize image to width of body */
}	

h1.hSiteTitle { /* Site title in the banner */
	text-shadow: 2px 2px 4px #ffcc00; /* CSS3 shadow effect */
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
	position: absolute;
	clear:none;
	top: 10px;
	padding-left:10px;
}

h2.hPageTitle { /* Page titles */
	margin-top: 50px; /* Add some space under the menu */
	clear: both;
}

.nMenuBar {
	margin: auto;
	width:90%; /* match banner */
}

a {
	color:#ffcc00;
}

a:visited {
	color:#ffee00;
}

.aMenuItem { /* links to the various pages */
	float: left;
	bottom:0px;
	position: relative;
	margin: 0px 1%;
	padding: 2px 0px; /* pad the top and bottom */	
	background-color:#ffcc00;
	color:black;
	text-align: center;
	width: 18%;	
	font-size:1.25em;
	text-decoration:none; /* remove link underlines */
}

.aMenuItemOpen { /* The currently open page. Only overwrites certain 
				attributes from aMenuItem*/
	background-color:#222222;
	font-weight:bold;
	color:#ffcc00;
}

.aMenuItem:hover { /* same as selected, except black */
	background-color:black;
	font-weight:bold;
	color:#ffcc00;
}

.aRefLink {
	color:#ffcc00;
	font-style:italic;
}

aside.disclaimer { /* float to the side of the page */
	float: right;
	width: 25%;
	background-color:#111111;
	color: #ffee00;
	font-size:0.8em;
	padding: 0px 10px 10px 10px; /* pad left, right and bottom */
	margin: 0px 0px 3px 3px; /* add margins to bottom and left, to separate
					from text*/
	text-align: justify;
}

p {
	text-align: justify; /* Makes text flow better */
}

.dFooterClear {
	width:100%;
	height:0px;
	padding-bottom: 2em;
	position: relative;
}

.fCopyright {
	position:absolute;
	bottom: 0px;
	width:90%;
	margin: 0px 5%;
	padding:0.5em 0px 0.5em 0px;
	background-color:#111111;
	color:#ddbb00;
	text-align:center;
}

.iFlRight {
	float:right;
	margin-left:5px;
}

.iFlLeft {
	float:left;
	margin-right:5px;
}

/* Discography page 
 * (could be a separate CSS file, but the project is small enough not to bother)
 * */

div.dDiscog {
	border-width:1px;
	border-style:solid;
	border-color:#ccaa00;
	clear:both;
}

div.dTrackList {
	clear:both;
	border-width:1px;
	border-style:solid;
	margin: 0px 10px 10px 5px;

}

img.iDiscog {
	float:left;
	margin-right:5px;
	margin-bottom:5px;
	margin-left:5px;
	width:100px;
	height:100px;
}