@font-face
	{
	  font-family: "Georgia";
	  src: url(fonts/georgia.ttf) format("truetype")
	  	url(fonts/georgiab.ttf) format("truetype")
	  	url(fonts/georgiai.ttf) format("truetype");
	}

	body
	{
		background: #351500;
		background-color: #080808;
		background-image: url("images/back.png");
		font-family: "Georgia", "Times New Roman", "Times", serif;
		font-size: 8pt;
		cursor:default;
		-moz-user-select: -moz-none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-o-user-select: none;
		user-select: none;
	}

	:root:before
	{
		content: url(images/back.png);
		content: url(images/logo.png);
		content: url(images/logo-mobile.png);
		content: url(images/edge-left.png);
		content: url(images/edge-right.png);
		content: url(images/button-pause.png);
		content: url(images/button-play.png);
		content: url(images/link-itunes.png);
		content: url(images/link-amazon.png);
		content: url('');
	}


	#div-main
	{
		top: 57%;
		left: 50%;
		background: #080808;
		color: #FFFFFF;
		position: absolute;
		width: 500px;
		height: 500px;
		margin-left: -260px;
		margin-top:  -300px; 
		border: 7px double #998866;
		vertical-align: middle;
		border-radius: 250px;
		box-shadow: 20px 20px 80px #010101;
	}


	#div-logo
	{
		background-image: url("images/logo-mobile.png");
		position: absolute;
		top: 30px;
		left: 140px;
		width: 232px;
		height: 51px;
		/* user-drag: none;  */
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

	#div-image
	{
		height: 200px;
		width: 200px;
		position: absolute;
		top:  144px;
		left: 149px;
		border: 1px solid #998866;
	}

	#greeter,
	.greeter
	{
		background:url(images/greeter-mobile.png);
		width: 97px;
		height: 112px;
		position: absolute;
		top: 48px;
		left: 125px;
		display: none;
		z-index: 10;
	}

	#button
	{
		visibility: visible;
		z-index: 1;
		background-color: #080808;
		background:url(images/button-play.png);
		width: 32px;
		height: 32px;
		vertical-align: middle;
		position: relative;
		top: 170px;
		left: 210px;
		border-radius: 4px;
		border: 2px solid #998866;
		cursor: pointer;
	}

	#button:hover,
	#button:active
	{
		z-index: 1;
		box-shadow: 0px 0px 12px #998866;
		transition: all 0.2s ease 0s;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		-moz-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
	}

	#button:active
	{
		background-position: -1px -1px;
		transition: all 0s ease 0s;
	}
	#button:after
	{
		z-index: 1;
		transition: all 0.2s ease 0s;
	}

	#buttonText
	{
		color: #555555;
	}

	#buttonTextPause,
	#buttonTextPlay
	{
		z-index: 1;
		color: white;
		position: absolute;
		top: 141px;
		font-size: 10pt;
		font-weight: 700;
	}

	#buttonTextPause
	{
		left: 210px;
	}

	#buttonTextPlay
	{
		left: 215px;
	}


	#blurb,
	#paused
	{
		z-index: 1;
		display: none;
		font-size: 8pt;
		font-style: italic;
		color: #998866;
		width: 62px;
		height: 12px;
		margin: auto;
		position: absolute;
		top: 82px;
		left: 150px;
	}

	#paused
	{
		width: 50px;
		left: 219px;
		height: 12px;
	}

	#data-title1,
	#data-title2
	{
		font-size: 6pt;
		font-weight: 700;
		width: 100%;
		height: 33px;
		background: none;
		text-align: center;
		vertical-align: bottom;
		position: absolute;
		top: 98px;
		left: 0px;
	} 

	#data-artist1,
	#data-artist2
	{
		font-weight: 700;
		width: 100%;
		height: 24px;
		background: none;
		margin: auto;
		text-align: center;
		position: absolute;
		top: 121px;
		left: 0px;
	} 

	#edge-left
	{
		width: 150px;
		height: 240px;
		position: absolute;
		top: 126px;
		left: 0px;
	}

	#edge-right
	{
		width: 150px;
		height: 240px;
		position: absolute;
		top: 126px;
		left: 351px;
	}

	#data-image
	{
		display: none;
		background-color: #080808;
		width: 200px;
		height: 200px;
		position: absolute;
		border: 1px solid #998866;
		top: 59px;
		left: 59px;
		top: -1px;
		left: -1px;

		/* user-drag: none;  */
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

	#album,
	#catalog,
	#year,
	#track
	{
		display: block;
		color: #998866;
		position: absolute;
		width: 517px;
		height: 20px;
		line-height: 20px;
		left: 76px;
	}

	#album
	{
		top: 352px;
	}

	#catalog
	{
		top: 368px;
	}

	#year
	{
		top: 384px;
	}

	#track
	{
		top: 400px;
	}


	#entry-album,
	#entry-catalog,
	#entry-year,
	#entry-track
	{
		display: block;
		position: absolute;
		width: 87px;
		text-align:right;
	}

	#data-album1,
	#data-album2,
	#data-catalog1,
	#data-catalog2,
	#data-year1,
	#data-year2,
	#data-track1,
	#data-track2
	{
		color: white;
		position: absolute;
		width: 450px;
		text-align:left;
		left: 92px;
		vertical-align: middle;
	}

	#data-album1,
	#data-album2
	{
		font-size: 10pt;
		font-weight: 700;
		vertical-align: text-bottom;
	}

	#div-links
	{
		color: #998866;
		display: inline;
		position: absolute;
		width: 250px;
		height: 38px;
		padding-top: 0px;
		vertical-align: text-top;
		top: 425px;
		left: 125px;
		border-top: 1px solid #998866;
	}

	#div-links-text
	{
		display: inline;
		float: left;
		font-size: 11pt;
		font-weight: 700;
		padding-left: 4px;
		padding-top: 2px;
		line-height: 38px;
	}

	#link-itunes
	{
		width: 32px;
		height: 32px;
		z-index: 1;
		position: relative;
		top: 3px;
		left: 3px;
		cursor: pointer;
		border-radius: 16px;
		/* user-drag: none;  */
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

	#link-itunes:hover
	{
		background-color: #332D22;
		background-color: #4C4433;
		box-shadow: 0px 0px 12px #998866;
		transition: all 0.2s ease 0s;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		-moz-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
	}

	#link-amazon
	{
		width: 32px;
		height: 32px;
		z-index: 1;
		position: relative;
		top: 5px;
		left: 7px;
		border-radius: 4px;
		cursor: pointer;
		/* user-drag: none;  */
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

	#link-amazon:hover
	{
		box-shadow: 0px 0px 12px #998866;
		transition: all 0.2s ease 0s;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		-moz-box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
		box-shadow: 0px 0px 12px 0px rgba(153,136,102,1);
	}

	#header,
	#footer
	{
		visibility: hidden;
		font-weight: 300;
		margin: auto;
		position: relative;
		color: #998866;
		text-shadow: 2px 2px 0px #000000;
		text-align: center;
	}

	#header
	{
		font-size: 12pt;
		top: -29px;
	}

	#footer
	{
		font-size: 9pt;
		top: 7px;
	}

	/**********************************************************/

	.tooltip-button,
	.tooltip-itunes,
	.tooltip-amazon
	{
		font-size: 10pt;
		font-weight: 700;
		position: relative;
		display: inline-block;
	}

	.tooltip-button .tooltiptext-button,
	.tooltip-itunes .tooltiptext-itunes,
	.tooltip-amazon .tooltiptext-amazon
	{
		visibility: hidden;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		position: absolute;
		z-index: 1;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 1s;
	}

	.tooltip-button .tooltiptext-button
	{
		width: 50px;
		top:  136px;
		left: 265px;
		visibility: visible;
		opacity: 1;
	}

	.tooltip-itunes .tooltiptext-itunes
	{
		width: 94px;
		top:  -34px;
		left: 32px;
	}

	.tooltip-amazon .tooltiptext-amazon
	{
		width: 67px;
		top:  -34px;
		left: 49px;
	}

	.tooltip-button .tooltiptext-button::after,
	.tooltip-itunes .tooltiptext-itunes::after,
	.tooltip-amazon .tooltiptext-amazon::after
	{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

	.tooltip-button .tooltiptext-button::after
	{
		left: 42%;
	}

	.tooltip-button:hover .tooltiptext-button,
	.tooltip-itunes:hover .tooltiptext-itunes,
	.tooltip-amazon:hover .tooltiptext-amazon
	{
		visibility: visible;
		opacity: 1;
	}