/* html5 elements */
article, aside, header, footer, section, nav { display: block; }

/* text */
span.heavy { font-weight: bold; }

/* Start Page */
body { font-family: Lucida Grande, Helvetica, Arial; background: #fff; border-top: 45px solid #000; padding-top: 40px; }
.container { height: 800px; width: 960px; margin: 0 auto; background: #fff;
			-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }

.intro, .cubes { -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }

.intro { position:relative; border-bottom: 1px solid #ddd; padding: 30px 30px 0; margin-bottom: 60px; overflow: hidden; 
		background: #fff url(../images/sunset.jpg) bottom center no-repeat; text-align: center; 
		font-family: Myriad Web Pro, Lucida Grande, Helvetica, Arial;
		-webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; }

.intro h1 { margin-bottom: 25px; font-size: 54px; color: #111; }
.intro p { display: block; font-size: 26px; line-height: 31px; color: #888; margin-bottom: 10px; }

.intro .player { width: 100%; margin-top: 30px; position: relative; z-index: 5; }
.intro .player img, .intro .largePlayer img { display: block; margin: 0 auto; }
.intro .largePlayer img { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.intro .largePlayer { position: absolute; width: 100%; top: 198px; left: 0; opacity: 0; filter: alpha(opacity=0); }

.cubes { margin-bottom: 30px; -webkit-box-shadow: 1px 1px 8px #ddd; -moz-box-shadow: 1px 1px 8px #ddd; box-shadow: 1px 1px 8px #ddd; background: url(../images/sunset.jpg) no-repeat bottom center; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
.cubes > div { float: left; width: 259px; height: 240px; border-left: 1px solid #ddd; padding: 20px 30px 30px; cursor: hand; cursor: pointer; }
	
.cubes > div:first-child, .cubes .shrink { border: none; }
.cubes h3 { font-weight: bold; color: #333; margin-bottom: 10px; }
.cubes p { font-size: 13px; color: #777; line-height: 22px; margin-bottom: 15px; }
.cubes a { font-weight: bold; color: #00a4ff; text-decoration: none; }

/* images */
.cubes .expand { background: url(../images/expand2.png) bottom right no-repeat; }
.expand p { width: 140px; }
.cubes .choose { background: url(../images/choose2.png) bottom right no-repeat; cursor: default; }
.cubes .shrink { display: none; background: url(../images/shrink2.png) bottom right no-repeat; }
.cubes .control { width: 260px; background: url(../images/control.png) bottom right no-repeat; }
.control p { width: 160px; }

.cubes .expand:hover { background: #f5f5f5 url(../images/expand2.png) bottom right no-repeat; 
	-webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-topleft: 7px; -moz-border-radius-bottomleft: 7px;
	border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
.cubes .shrink:hover { background: #f5f5f5 url(../images/shrink2.png) bottom right no-repeat; }
.cubes .control:hover { background: #f5f5f5 url(../images/control.png) bottom right no-repeat; 
	-webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; 
	border-top-right-radius: 7px; border-bottom-right-radius: 7px; }

.bottomSpacer { width: 100%; height: 60px; }

/* animated blips */
.clickMark { position: absolute; width: 40px; height: 40px; cursor: pointer; opacity: 0; -webkit-transition: opacity .5s ease; z-index: 20;  }
.clickMark.large { visibility: hidden; }
.clickMarkGlow { position: absolute; top: -15px; left: -15px; width: 60px; height: 60px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; border: 5px solid red; opacity: 0;
	-webkit-animation-name: 'blip'; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; }
.clickMarkShape { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; background: #FF2400; }
.clickMark a:hover .clickMarkGlow { border: 5px solid #00a5ff; }
.clickMark a:hover .clickMarkShape { background: #00a5ff; }

/* ie won't have hover over a transparent object: to fix, have a transparent BG */
.ie .clickMark { filter: alpha(opacity=0); background: url(../images/transBG.png); } 
.ie .clickMarkGlow { display: none; }


@-webkit-keyframes 'blip'
{
	0% { -webkit-transform: scale(.1); opacity: 0; }
	1% { -webkit-transform: scale(.1); opacity: 1; }
	60% { opacity: 0; -webkit-transform: scale(1); }
	100% { opacity: 0; -webkit-transform: scale(1); }
}

@-webkit-keyframes 'blip2'
{		
	0% { opacity: 0; -webkit-transform: scale(.1); }
	1% { opacity: .8; -webkit-transform: scale(.1); }
	60% { opacity: 0; -webkit-transform: scale(1); }
	100% { opacity: 0; -webkit-transform: scale(1); }
}


/* Popup */
.tooltipPop {
	position: absolute; opacity: 0; max-width: 270px; padding: 0; z-index: 10; visibility: hidden; border: 1px solid #084369;
	-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6); box-shadow: 0 1px 3px rgba(0,0,0,.5);	
	background: #073654; background: -moz-linear-gradient(top, #1E5799 0%, #0C6CA9 1%, #073654 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(12,108,169)), to(rgb(7,54,84)));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#073654',GradientType=0 );	
	-webkit-transition-property: -webkit-transform, opacity; -webkit-transition-duration: .3s; -webkit-transform-origin: center bottom; -webkit-transform: translateY(20px);
}

.tooltipPop.popped { -webkit-transform: translateY(0px); opacity: 1; visibility: visible; }
.tooltipPop.leaving { -webkit-transform: translateY(-20px); opacity: 0; }
.tooltipPop h3 { margin: 0 10px 5px 10px; font-size: 17px; font: 17px/17px "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: bold; color: #fff; text-align: left; text-shadow: none; background: transparent; -webkit-background-clip: none; }
.tooltipPop p { /*width: 250px;*/ padding: 0 10px 0 0; margin: 0 0 10px 0; text-align: left; margin-left: 10px; font: 14px/20px "HelveticaNeue", Helvetica, Arial, sans-serif; color: #fff; }
.tooltipPopTop { height: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-top: 1px solid rgba(255,255,255,.25); }
.tooltipPopArrow { width: 27px; height: 13px; position: absolute; left: 90px; background: url(../images/downArrow.png) no-repeat; }

/* positioning special cases */
#markOpenPlayer { left: 150px; bottom: 10px; }
#markClosePlayer { left: 785px; bottom: 680px; }
#markWide { left: 155px; bottom: 687px; }
#markShortcuts { left: 670px; bottom: 670px; }
#markShuffle { left: 700px; bottom: 460px; }
#markSaveQueue { left: 575px; bottom: 390px; }
#markPlayhead { left: 460px; bottom: 472px; }
#markPlaylist { left: 455px; bottom: 130px; }
#markSearchMusic { left: 500px; bottom: 20px; }

#popOpenPlayer { left: 66px; bottom: 65px; }
#popClosePlayer { right: 70px; bottom: 745px; }
#popClosePlayer .tooltipPopArrow { left: 165px; }
#popWide { left: 120px; bottom: 740px; }
#popWide .tooltipPopArrow { left: 40px; }
#popShortcuts { left: 520px; bottom: 730px; }
#popShortcuts .tooltipPopArrow { left: 155px; }
#popShuffle { left: 520px; bottom: 530px; }
#popShuffle .tooltipPopArrow { left: 185px; }
#popSaveQueue { left: 426px; bottom: 460px; }
#popSaveQueue .tooltipPopArrow { left: 155px; }
#popPlayhead { left: 330px; bottom: 522px; }
#popPlayhead .tooltipPopArrow { left: 135px; }
#popPlaylist { left: 306px; bottom: 180px; }
#popPlaylist .tooltipPopArrow { left: 154px; }
#popSearchMusic { left: 415px; bottom: 65px; }

/* keybaord side */
.keyboardControls { position: relative; margin: 0 auto; display: none; padding: 30px 0 30px 0; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; box-shadow: 1px 2px 10px #bbb;
	background: #f0f0f0; background: -moz-linear-gradient(top, #FFFFFF 28%, #EFEFEF 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(28%,#FFFFFF), color-stop(100%,#EFEFEF)); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFEFEF',GradientType=0 ); }
.keyboardControls #close { position: absolute; top: 10px; right: 10px; }
.ie .keyboardControls #close { display: block; padding: 3px; text-decoration: none; }
.keyboardControls .keyboard { position: relative; width: 883px; margin: 0 auto; }
.keyboard img { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-background-clip: none; }
.keyboard #pre, .keyboard #activate { position: absolute; top: 0; left: 0; }
.keyboard #pre { z-index: 5; display: none; }
.keyboard #activate { z-index: 6; opacity: 0; filter: alpha(opacity=0); }

#markShift { left: 14px; top: 230px; width: 110px; }
#popShift { left: -40px; bottom: 140px; }
#popShift .tooltipPopArrow { left: 55px ;}

.keyboardControls .text { position: relative; width: 883px; margin: 0 auto 30px auto; }
.keyboardControls .text h3 { font: normal 34px Myriad Web Pro, Lucida Grande, Helvetica, Arial; margin-bottom: 15px; }
.keyboardControls .text p { color: #777; margin-bottom: 15px; font-family: Lucida Grande, Helvetica, Arial; }
.keyboardControls .text button { position: absolute; top: 33px; right: 0px; height: 35px; padding: 5px; }

.clickMark.keyPop { width: 50px; height: 50px; display: none; }
.clickMark.small { height: 28px; }

#markMinus { left: 675px; top: 49px; }
#markPlus { left: 736px; top: 49px; }
#markQ { left: 98px; top: 109px; }
#markW { left: 159px; top: 109px; }
#markE { left: 220px; top: 109px; }
#markA { left: 114px; top: 168px; }
#markS { left: 174px; top: 168px; }
#markD { left: 235px; top: 168px; }
#markZ { left: 144px; top: 227px; }
#markX { left: 205px; top: 227px; }
#markC { left: 266px; top: 227px; }
#markV { left: 327px; top: 227px; }
#markM { left: 509px; top: 227px; }
#markLeft { left: 706px; top: 316px; }
#markDown { left: 767px; top: 316px; }
#markRight { left: 827px; top: 316px; }
#markUp { left: 767px; top: 286px; }

.tooltipPop.keyPop { max-width: 150px; }
.tooltipPop.keyPop .tooltipPopArrow { left: 25px }
#popZ { left: 130px; bottom: 140px; }
#popX { left: 190px; bottom: 140px; }
#popC { left: 250px; bottom: 140px; }
#popV { left: 310px; bottom: 140px; }
#popM { left: 495px; bottom: 140px; }
#popA { left: 101px; bottom: 197px; }
#popS { left: 161px; bottom: 197px; }
#popD { left: 221px; bottom: 197px; }
#popQ { left: 84px; bottom: 256px; }
#popW { left: 144px; bottom: 256px; }
#popE { left: 204px; bottom: 256px; }
#popPlus { left: 724px; bottom: 319px; }
#popMinus { left: 664px; bottom: 319px; }
#popLeft { left: 694px; bottom: 55px; }
#popDown { left: 754px; bottom: 55px; }
#popRight { left: 814px; bottom: 55px; }
#popUp { left: 754px; bottom: 82px; }