@charset "utf-8";


/* Canvas Style */

.aMyCanvasContainer {
	width:640px;
	margin: 5px 5px 5px 100px;
	padding: 0px;
	float:left;
	-webkit-box-shadow: 0 0 5px #222222;
	-webkit-border-radius: 4px;
	background: -webkit-gradient(linear,left top,left bottom, from(#666), to(#000));		
}

.myCanvasContainer {
	width:213px;
	margin: 10px;
	padding: 0px;
	float:left;
	-webkit-box-shadow: 0 0 5px #222222;
	-webkit-border-radius: 4px;
	background: -webkit-gradient(linear,left top,left bottom, from(#666), to(#000));	
	
}

.myCC-fir {
    margin-left:100px;
}


#aCanvas {

	margin: 0;
	padding: 0;

}

/* Audio Player Style */


#button{
	float: left;
	height: 182px;
	width: 182px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(../contents/play.png);
}

#seek{
	float: left;
	height: 182px;
	width: 182px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(../contents/seek.png);
}

.button_play{
	background-image: url(../contents/play_o.png);
}

.button_pause{
	background-image: url(../contents/pause_o.png);
}

#progressBar{
	float: left;
	border-right-color: yellow;
	border-right-style: solid;
	border-left-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 5px;
	border-top-width: 0px;
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
	width: 0px;
	height: 180px;
	background-color: #000;
	-webkit-box-shadow: 0 0 10px #111;
	text-overflow: clip;
}
#time {
	margin: 10px;
	padding: 0px;
	font-family: "Helvetica Neue";
	font-size: 64px;	
}
#player {
width:640px;
margin:60px;
}


/*  Google o3d Style */

.aO3dContainer {
    width:640px;
	margin: 5px 5px 5px 100px;
	padding: 0px;
	-webkit-box-shadow: 0 0 5px #222222;
	-webkit-border-radius: 4px;
	background: -webkit-gradient(linear,left top,left bottom, from(#666), to(#000));
}


/* CSS 3D Transforms */

#a3DTransfomrsContainer {
    margin-left:40px;
	-webkit-perspective: 800px;
}

#a3DImg1:hover {
	-webkit-transform-style: preserve-3d;	
	-webkit-transform: rotateY(60deg);
	-webkit-transition: -webkit-transform 0.5s ease-in
}

#a3DImg2:hover {
	-webkit-transform-style: preserve-3d;	
	-webkit-transform:rotateY(360deg);
	-webkit-transition: -webkit-transform 0.5s ease-in
}

#a3DText:hover {
	-webkit-transform-style: preserve-3d;	
	-webkit-transform:rotateY(180deg);
	-webkit-transition: -webkit-transform 0.5s ease-in
}


#a3DImg3:hover {
	-webkit-transform-style: preserve-3d;	
	-webkit-transform: rotateY(-60deg);
	-webkit-transition: -webkit-transform 0.5s ease-in
}

/* video */


video {
margin:40px 0 0 100px;
}