* {margin: 0px; padding:0px; border:0px; outline:none;}

html, body {height: 100%; width: 100%;}

body{background-color:#6E8285;text-align: center;}

:focus {outline:0px;}

img{outline:none; border:0px;}

a {outline:none; text-decoration:none;}

#wrap{
	position: relative;
	min-height: 100%;
	#height:expression(document.body.clientHeight); /*ie hack*/
	#width:100%;
}

body > #wrap {height: auto; min-height: 100%; text-align: center;}

#head {
	width: 800px;
	height: 321px;
	margin: 0px auto;
	text-align: center;
}
#logo {
	width: 53px;
	height: 321px;
	position: relative;
	top: 0px;
	left: 0px;
	float: left;
	background: transparent url('logo.jpg') no-repeat 0px 0px;
}
#headImage{
	width: 468px;
	height: 321px;
	position: relative;
	top: 0px;
	left: 0px;
	float: left;
	background: transparent url('tony.jpg') no-repeat 0px 0px;
}
#headGradient{
	width: 279px;
	height: 321px;
	position: relative;
	top: 0px;
	left: 0px;
	float: left;
	background: #6E8285 url('hgrad.jpg') repeat-y;
}
.clear{clear:both;}
.line{
	width: 100%;
	min-width: 800px;
	height: 2px;
	background-color: #1E3532;
	font-size: 0px;
}
#nav{
	height: 45px;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	margin: 0px auto;
	text-align: center;
}
#innerNav {
	width: 390px;
	position: relative;
	top: 12px;
	text-align: left;
}
#nav div{
	float: right;
	color: #C8DFDA;
	font: normal normal normal 20px Arial, Helvetica, sans-serif;
	padding: 0px 20px;
}

#nav div a:link {color: #C8DFDA;text-decoration: none;}
#nav div a:visited {color: #C8DFDA;text-decoration: none;}
#nav div a:hover {color: #FFFFFF;text-decoration: underline;}
#nav div a:active {color: #FFFFFF;text-decoration: none;}

#main{
	text-align:center;
	margin: 0px auto;
}

#text {
	max-width:800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	font: normal normal normal 15px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin: 0px auto;
	padding: 40px 40px;
	text-indent: 20px;
	text-align: justify;
	overflow:auto;
	padding-bottom: 80px;  /* must be same height as the footer */
}

#works {
	max-width:665px;
	width:expression(document.body.clientWidth > 665? "665px": "auto" );
	font: normal normal normal 15px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: left;
	margin: 0px auto;
	padding: 20px 40px 40px 90px;
	overflow:auto;
	padding-bottom: 80px;  /* must be same height as the footer */
}
#works a{font-style:italic;}
#works a:link {color: #FFFFFF;text-decoration: underline;}
#works a:visited {color: #FFFFFF;text-decoration: underline;}
#works a:hover {color: #C8DFDA;text-decoration: underline;}
#works a:active {color: #C8DFDA;text-decoration: underline;}

.worksFullDiv {
	width:100%;
	height:100%;
	max-height:40px;
	display:inline-block;
	vertical-align:top;
	margin:20 0;
	padding:0;
}
.worksLeftDiv {
	width:100%;
	height:100%;
	max-width:300px;
	max-height:40px;
	display:inline-block;
	vertical-align:middle;
	margin:0;
	padding:10 0 0 0;
}

.worksRightDiv {
	width: 100%;
	max-width:350px;
	max-height:70px;
	display: inline-block;
	vertical-align:top;
	margin:0 0 20 0;
	padding:0;
}

#contact {
	max-width:665px;
	width:expression(document.body.clientWidth > 800? "800px": "auto" );
	font: normal normal normal 15px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin: 0px auto;
	padding: 40px 40px;
	text-indent: 20px;
	text-align: justify;
	overflow:auto;
	padding-bottom: 80px;  /* must be same height as the footer */
}

#contact a:link {color: #FFFFFF;text-decoration: none;}
#contact a:visited {color: #FFFFFF;text-decoration: none;}
#contact a:hover {color: #1E3532;text-decoration: underline;}
#contact a:active {color: #FFFFFF;text-decoration: none;}

#contact a:link .svgFill {fill:#C8DFDA;}
#contact a:visited .svgFill{fill:#C8DFDA;}
#contact a:hover .svgFill{fill:#C8DFDA;}
#contact a:active .svgFill{fill:#C8DFDA;}

.svgFill{fill-rule:evenodd;}

#contact #emailSVG,
#contact #facebookSVG,
#contact #twitterSVG,
#contact #instagramSVG,
#contact #mastodonSVG{
	width:30px;
	height:30px;
	vertical-align: middle;
	padding-right:10px;
}

#player{
	width: 1px;
	height: 1px;
	line-height: 0px;
	font-size: 0px;
	float: left;
}

#playerController{
	width: 302px;
	height: 172px;
	background-image:url('player.jpg');
	background-repeat:no-repeat;
	float: left;
}

#messageOuterC, #songTimeOuterC, #controllerOuterC{
	width: 300px;
	margin: 0px auto;
	display: table;
	#position: relative;
}

#messageInnerC, #songTimeInnerC, #controllerInnerC{
	width: 300px;
	margin: 0px auto;
	display: table-cell;
    vertical-align: middle;
	#position: absolute; 
	#top: 50%;
	text-align: center;
}
#message, #songtime, #controller{
	margin: 0px auto;
	#position: relative; 
	#top: -50%;
	text-align: center;
}

#messageOuterC{
	height: 75px;
	margin-top:22px;
}
#message{
	width: 236px;
}

#songTimeOuterC{
	height: 30px;
}
#songtime{
	width: 300px;
	color: #AEB9BB;
}

#controllerOuterC{
	height: 25px;
}
#controller{
	width: 174px;
}

.controlButton{
	width: 25px;
	height: 25px;
	float: left;
	padding: 0px 2px;
}


.title{
	color: #C8DFDA;
	font: normal normal bold 22px Arial, Helvetica, sans-serif;
	margin-left: -40px;
}

#foot{
	width: 100%;
	height: 40px;
	position: relative;
	margin-top: -40px; /* negative value of footer height */
	clear:both;
	z-index: 10;
}

#innerFoot {
	max-width: 740px;
	width:expression(document.body.clientWidth > 740? "740px": "auto" );
	height: 32px;
	padding-top: 0px;
	padding-left: 30px;
	padding-right: 30px;
	margin: 0px auto;
}

#innerFoot img{
	width: 24px;
	height: 24px;
	float: right;
	margin-left: 10px;
	margin-top: 8px;
}

#innerFoot a:link .svgFill {fill:#C8DFDA;}
#innerFoot a:visited .svgFill{fill:#C8DFDA;}
#innerFoot a:hover .svgFill{fill:#ffffff;}
#innerFoot a:active .svgFill{fill:#ffffff;}

#innerFoot #emailSVGF,
#innerFoot #facebookSVGF,
#innerFoot #twitterSVGF,
#innerFoot #instagramSVGF,
#innerFoot #mastodonSVGF{
	width:24px;
	height:24px;
	float: right;
	margin-left: 10px;
	margin-top: 8px;
}

#footBackground{
	width:100%;
	height: 40px;
	background: #6E8285 url('vgrad.jpg') repeat-x;
	z-index: 0;
	position: relative;
	margin-top: -40px; /* negative value of footer height */
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}