@charset "utf-8";
/* CSS Document */


/* Tags
-------------------------------------------*/
	body {background-color: black; color: #eee; 
		font-family: "Arial Black", Arial, "Century Gothic", Impact, Verdana; text-align: center}

	a {color: #c0c0c0; text-decoration: none; font-weight: bold}
	a:hover {color: #f26426; border-bottom: 1px dotted #f26426}
	a:active {color: #ffff80; border-bottom-color: #ffff80}
	a.em {border-bottom: 1px dotted #f26426}
	a.em:hover {border-bottom-style: solid}
	a.em:active {border-bottom-style: solid}

	img {border: 0}

	sup, sub {
		vertical-align: baseline;
		_vertical-align: bottom; /*Hack for IE < 7*/
		position: relative;
		width: 16px;
		}
	sup {bottom: 1ex;}
	sub {top: 2px;}


/* Template
-------------------------------------------*/
	#wrapper {position: relative; width: 800px; min-height: 800px; margin: 1em auto; 
		background: #333 url(/images/brand/urbanFolk.gif) 700px 35px no-repeat; 
		padding: 0 0 2em 0}
	#pageIcon {position: absolute; z-index: 10; top: -12px; left: 87px; width: 25px; height: 70px; 
		background: url(/images/brand/pageIcon.png) 0 0 no-repeat}
	#content {width: 600px; margin: auto; line-height: 1.4}

	#menuTop ul {list-style: none; padding: 0; margin: 1ex 0;}
	#menuTop li {display: inline; margin: 0 1.5em}
	#menuTop h2 {display: inline; font-size: 100%; margin: 0; padding: 0}
	#menuTop h2 a {color: white}
	#menuTop a {font-family: Arial, Helvetica, sans-serif;}

	#photoZone, #photoZoneSlice {position: relative; width: 600px; margin: auto}
	#photoZone h1, #photoZoneSlice h1 {margin: 0; padding: 0}
	#photoZone img {position: relative; width: 600px; height: 400px}
	#photoZoneSlice img {width: 600px; height: 60px}
	#quoteZone {font-size: 80%}

	#footer {width: 800px; margin: 3em auto; font-size: 70%; color: #fe8e0a}
	#copyright {font-family: Arial, Helvetica, sans-serif; float: left;}
	#devCredit {font-family: "Trebuchet MS", Verdana, Arial, sans-serif; float: right;}
	#devCredit a {color: #fdae36}


/* Classes
-------------------------------------------*/
	.bb1s {border-bottom: 1px solid silver}
	.light {font-family: Arial, Helvetica, sans-serif;}
	.lighter {font-family: Arial, Helvetica, sans-serif; color: #888}
	.mono {font-family: "Courier New", Courier, monospace}
	.accent {color: #c27c2a}
	.accentOff {color: #eee}


/* Page-specific
-------------------------------------------*/
/* Home page 
-----------------*/
	#overPrint {position: absolute; left: 60px; top: 10px; width: 275px; padding: 5px;
		text-align: left; font-size: 80%; z-index: 2;
		background: url(/images/widgets/black20.png) repeat}

/* Music/lyrics 
-----------------*/
	a.lyrics, a.track {display: block; height: 23px; width: 23px;}
	a.lyrics {background: url(/images/widgets/iconLyrics.png) 0 -23px no-repeat;}
	a.track {background: url(/images/widgets/iconTune.png) 0 -23px no-repeat;}
	a:hover.lyrics, a:hover.track {background-position: 0 0; border: none}
	a.lyrics span, a.track span {display: none}

	#logoMS, #logoE24 {vertical-align: text-bottom; border: 1px solid black}
	#logoMS {width: 75px; height: 20px}
	#logoE24 {width: 57px; height: 20px}
	a:hover #logoMS, a:hover #logoE24  {border: 1px solid #f26426}

/* Lyrics 
-----------------*/
	#btnClose {display: none; position: absolute; right: 5px; top: 5px; z-index: 10; 
		width: 30px; height: 30px; background: url(/images/widgets/btnClose.png) 0 -30px no-repeat}
	a:hover #btnClose {background-position: 0 0}
	#btnClose span {display: none}
	#lyrics p {font-family: Arial, Helvetica, sans-serif; font-size: 95%}
	
/* Links 
-----------------*/
	#linkZone {width: 600px; margin-top: 100px}
	#linx {float: left; text-align: left; width: 350px; margin-left: 40px}
	#linx h3 {padding: 0; margin: 0;}
	#linx p {padding: 0; margin: 0; margin-bottom: 2ex}
	
/* Photos 
-----------------*/
	#thumbZone {position: relative; width: 400px; height: 450px; margin: 2em auto; 
		background-color: black; 
		border-color: black; border-style: solid; border-width: 20px 100px}
	#thumbZone img {position: absolute; border: 1px solid black; z-index: 1}
	#thumbZone a:hover img {border: 1px solid silver}
	#thumbZone img.blowup {display: none}
	#thumbZone a:hover img.blowup {display: block; z-index: 2; border: 3px solid #6c532c}
	
/* Shop 
-----------------*/
	#merchZone {margin: 2em auto;}
	#merchZone ol {padding-left: 1em; margin-left: 1em; margin-top: 0; font-size: 80%}
	#merchZone p {font-size: 85%}
	
	img.packShot {float: left; width: 300px; height: 300px}
	img.packShotSm {width: 74px; height: 74px; margin-right: 0.5em; 
		vertical-align: middle}
	img.packShotM {width: 150px; height: 150px}

	img.preview {width: 25px; height: 21px; vertical-align: text-bottom}
	.player {clear: both; margin-bottom: 1em; width: 600px; height: 50px; 
		padding-top: 1em; border-bottom: 1px solid #633105}
	table {width: 283px; margin-left: -3px; margin-top: 1em; font-family: arial; font-size: 80%}
	td {text-align: right}

	a.btnBuy {display: block; width: 70px; height: 25px; float: right;
		background: url(/images/widgets/btnBuy.png) 0 -50px no-repeat}
	a.btnBuy:hover {background-position: 0 -25px; border: none}
	a.btnBuy:active {background-position: 0 0}
	a.btnBuy span {display: none}

	button.btnBuy {display: block; width: 70px; height: 25px; float: right;
		background: url(/images/widgets/btnBuy.png) 0 -50px no-repeat;
		border: 0; padding: 0}
	a:hover button.btnBuy {background-position: 0 -25px; border: none}
	a:active button.btnBuy {background-position: 0 0}

/* Shop - cart 
-----------------*/
	a .btnDrop {width: 20px; height: 20px; 
		background: url(/images/widgets/btnDrop.png) 0 -20px no-repeat; border: 0}
	a:hover .btnDrop {background-position: 0 0}

/* Shop - download pages 
-----------------*/
	#btnDown {display: block; width: 128px; height: 70px; margin: auto; 
		background: url(/images/widgets/btnDownloadSm.png) 0 -140px no-repeat}
	#btnDown:hover {background-position: 0 -70px; border: none}
	#btnDown:active {background-position: 0 0}
	#btnDown span {display: none}
	p#errMsg {color: #fe8e0a}

	table#pick {width: 100%}
	table#pick td {vertical-align: middle; padding: 0.5em 0}
	table#pick th, #pick td {border-bottom: 1px solid #633105}
	td.album {text-align: left; font-size: 1.35em; letter-spacing: 0.1em}


/* Print
-------------------------------------------*/
	@media print {
		#pageIcon {display: none}
		#menuTop {visibility: hidden}
		#menuTop h2 {visibility: visible; font-size: 200%; border-bottom: 1px solid black}
		}

/* CSS3
-------------------------------------------*/
	#menuTop {
		text-shadow: 0px 0px 2px #eeeedd;
		}
	#menuTop h2 {
		text-shadow: 0px 0px 4px white;
		}
	#photoZone, #chair, #photoZoneSlice {
		-moz-box-shadow: 0px 0px 15px #955b01;
		-webkit-box-shadow: 0px 0px 15px #955b01;
		box-shadow: 0px 0px 15px #955b01;
		}
	#overPrint, #songs {
		text-shadow: 3px 3px 3px #955b01;
		}
	#quoteZone, p#errMsg, .accent {
		text-shadow: 0px 0px 3px #eeeedd;
		}
	.accent a, .accentOff {
		text-shadow: none;
		}
	#thumbZone a:hover img.blowup {
		-moz-box-shadow: 0px 0px 20px #fe9c02;
		-webkit-box-shadow: 0px 0px 20px #fe9c02;
		box-shadow: 0px 0px 20px #fe9c02;
		}
	img.packShot {
		-moz-box-shadow: 0px 0px 10px #955b01;
		-webkit-box-shadow: 0px 0px 10px #955b01;
		box-shadow: 0px 0px 10px #955b01;
		}
	img.packShotSm {
		-moz-box-shadow: 0px 0px 6px #955b01;
		-webkit-box-shadow: 0px 0px 6px #955b01;
		box-shadow: 0px 0px 6px #955b01;
		}
	td.album {
		text-shadow: 0px 0px 5px white;
		}