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

.dj-play {
	width:200px;
	float:left;
	padding: 400px 0 0 ;
}

.player {
	border:#333 solid 5px;
}

.dj-disc {
	margin:20px 0;
	width:560px;
	float:left;
}

.dj-etc {
	width:200px;
	float:left;
}

.botton {
	display:block;
	border-radius: 5px;
	background-color: #F33;
	cursor: pointer;
	color: #fff;
	font-size: 13px;
	height: 40px;
	line-height: 50px;
	margin: 25px auto;
	text-align: center;
	width: 100px;
}



/*画像回転*/
.spin {
/* keyframes に任意の名前を付ける */
  -moz-animation-name: rotate1;
  -webkit-animation-name: 'rotate1';
  animation-name: rotate1;
  -goog-ms-animation-name: 'rotate1'; 
 
 /* 1動作(ここでは1回転)あたりの秒数 */
  -moz-animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -goog-ms-animation-duration: 4s;
 
/* 動作の向き、初期値はnormal 、逆再生は alternate */
  -moz-animation-direction: normal;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -goog-ms-animation-direction: normal;
  
/* 動き方 linear, ease, easein, ease-out, ease-in-out */
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -goog-ms-animation-timing-function: linear;
  
/* 動作 (ここでは回転) の回数を数値で指定、無限ループは infinite */
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -goog-ms-animation-iteration-count: infinite;
}

@-moz-keyframes rotate1 {
  from {
  /* 最初の回転角 */
    -moz-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(-360deg);
  }
}
  
@-webkit-keyframes 'rotate1' {
  from {
  /* 最初の回転角 */
    -webkit-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -webkit-transform: rotate(-360deg);
  }
}
  
@-goog-ms-keyframes 'rotate1' {
  from {
  /* 最初の回転角 */
    -goog-ms-transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -goog-ms-transform: rotate(-360deg);
  }
}
  
  @keyframes 'rotate1' {
  from {
  /* 最初の回転角 */
    transform: rotate(0deg);
  }
  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    transform: rotate(-360deg);
  }
}

/*針を動かす*/
.swing {
	-moz-transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-goog-ms-transform: rotate(40deg);
	transform: rotate(40deg);
	position: relative;
	left:-55px;
	top: 20px;
	
}