/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body, html {
	padding:  0px;
	margin:  0px;
	width: 100%;
	height:  100%;
	background:  url( '../images/bg.gif' );
	background-size: cover;
}

.social-share {
	margin-top:  50px;
	margin-left: 20px;
}

@transition: 1.0s;
.transition {
	-webkit-transition: all @transition ease;
	-moz-transition: all @transition ease;
	-ms-transition: all @transition ease;
	-o-transition: all @transition ease;
	transition: all @transition ease;
}

@radius: 1000px;
.round {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
	-khtml-border-radius: @radius;
}

@size: 50px;
@pink: rgb( 255, 0, 100 );
@green: rgb( 0, 170, 210 );

#page {
	
	.left {
		float: left;
	}
	
	.spacer {
		clear: both;
	}
	
	.first {
		width:  500px;
		padding: 0px 200px;
	}
	
	.second {
		width:  300px;
	}
	
	.container {
		position:  absolute;
		width:  100%;
		height:  100%;
		width:  100%;
		
	}
	
	#titleContainer {
		z-index: 30;
		
		#title {
		 	width:  1200px;
		 	color: rgba( 255, 255, 255, 0.9 );
		 	margin:  0 auto;
		 
		 	.title {
		 		font-family: Gothic725BlkBT;
		 		font-size: 50px;
		 		line-height:  60px;
		 	}
		 	
		 	.description {
		 		font-family: PTSerif-Regular;
		 		font-size: 22px;
		 		line-height:  26px;
		 		margin-top:  30px;
		 	}
		 	
		 	.lead {
		 		font-family: PTSansPro-Caption;
		 		font-size: 14px;
		 		line-height:  30px;
		 		margin-top:  40px;
		 	}
		 	
		 	#start {
		 		cursor:  pointer;
		 		width:  197px;
		 		height: 67px;
		 		background:  url( '../images/button.png' );
		 		position:  absolute;
		 		top: 433px;
		 		
		 		&:hover {
		 			background:  url( '../images/button_hover.png' );
		 		}
		 	}
		 }	
	 }
	 
	 #actionContainer {
	 	top: -100%;
	 	z-index:  50;
	 	
	 	background:  #ffffff;
	 	
	 	#action {
	 		margin: 0 auto;
	 		width:  1050px;
	 		
	 		.left {
	 			width:  640px;
	 			
	 			&:first-child {
	 				width: 410px;
	 			}
	 		}
	 		 
	 		#song {
	 			.song {
	 				width: @size;
	 				height: @size;
	 				line-height: @size;
	 				text-align: center;
	 				color: @pink;
	 				border: @pink 1px solid;
	 				float:  left;
	 				cursor: pointer;
	 				font-family: PTSans-Caption;
	 				
	 				&:hover {
	 					-moz-box-shadow: 0px 0px 0px 1px @pink;
						-webkit-box-shadow: 0px 0px 0px 1px @pink;
						box-shadow: 0px 0px 0px 1px @pink;
	 				
	 					.hint {
	 						display: block;
	 					}
	 				}
	 				
	 				.ch {
	 					display: none;
	 				}
	 			}
	 			
	 			.green {
	 				color: @green;
	 				border-color: @green;
	 				
	 				&:hover {
	 					-moz-box-shadow: 0px 0px 0px 1px @green;
						-webkit-box-shadow: 0px 0px 0px 1px @green;
						box-shadow: 0px 0px 0px 1px @green;
	 				}
	 				
	 				.hint {
	 					color: @green;
	 					border-color: @green;
	 				}
	 				
	 				.ch {
	 					display: block;
	 				}
	 			}
	 			
	 			.ch {
	 				position:  absolute;
	 				width:  100px;
	 				font-family: PTSans-Caption;
	 				font-size:  12px;
	 				color: @green;
	 				font-style: italic;
	 				line-heigt: 15px;
	 				width:  200px;
	 				text-align:  center;
	 				margin-top: -50px;
	 				margin-left: -75px;
	 			}
	 			
	 			.hint {
	 				position:  absolute;
	 				width: 200px;
	 				padding:  10px 20px;
	 				z-index: 70;
	 				border: @pink 1px solid;
	 				margin-top: 75px;
	 				margin-left: -100px;
	 				display: none;
	 				background:  #ffffff;
	 				font-family: PTSans-Caption;
	 				font-size:  12px;
	 				line-height:  18px;
	 				color: @pink;
	 			}
	 			
	 			.description {
	 				position:  absolute;
	 				margin-left: -200px;
	 				margin-top: 20px;
	 				font-size:  12px;
	 				color: @pink;
	 				font-family: PTSans-Caption;
	 			}
	 			
	 			.active {
	 				color: #ffffff;
	 				background: @pink;
	 			}
	 			
	 			.activeGreen {
	 				color: #ffffff;
	 				background: @green;
	 			}
	 		}
	 		
	 		#movie {
	 			width: 638px;
	 			height: 358px;
	 			border: @pink 1px solid;
	 			margin-top: 70px;
	 			
	 			.button {
	 				cursor: pointer;
	 				position: absolute;
	 				color: @pink;
	 				font-family: PTSans-Caption;
	 				font-size: 12px;
	 				margin-top: 140px;
	 				
	 				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
					filter: alpha(opacity=70);
					-moz-opacity: 0.3;
					-khtml-opacity: 0.3;
					opacity: 0.3;
	 				
	 				.hint {
	 					display: none;
	 					margin-top: 10px;
	 				}
	 				
	 				&:hover {
	 					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
						filter: alpha(opacity=0);
						-moz-opacity: 1;
						-khtml-opacity: 1;
						opacity: 1;
	 				
	 					.hint {
	 						display: block;
	 					}
	 				}
	 			}
	 			
	 			.firsty {
	 				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
					filter: alpha(opacity=0);
					-moz-opacity: 1;
					-khtml-opacity: 1;
					opacity: 1;
 				
 					.hint {
 						display: block;
 					}
	 			}
	 			
	 			#prev {
	 				margin-left: -58px;
	 				
	 				.hint {
	 					margin-left: -32px;
	 				}
	 			}
	 			
	 			#next {
	 				margin-left: 652px;
	 				
	 				.hint {
	 					margin-left: 0px;
	 				}
	 			}
	 		}
	 		
	 		#about {
	 			width:  300px;
	 			margin-top: 250px;
	 		
	 			.pre {
		 			color: @pink;
		 			font-family: PTSans-Caption;
		 			font-size:  12px;
		 		}
		 		
		 		.name {
		 			font-family: Gothic725BlkBT;
		 			font-size: 14px;
		 			line-height: 17px;
		 			margin-bottom: 20px;
		 		}
		 		
		 		.info {
		 			font-family: PTSans-Caption;
		 			font-size:  12px;
		 			line-height: 14px;
		 		}
	 		}
		 }	
	 }
}