/*-----------------------------------------------------------
	VARIABLE
	-----------------------------------------------------------*/
@light-blue: #6699cc;
@deep-blue: #336699;
@content-width:940px;

.border-radius (@radius) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.text-shadow{
	text-shadow:1px 1px 1px #cccccc;
}
.border-gray{
	border:1px solid #cccccc;
}

/**/
/*-----------------------------------------------------------
	CLOCK
	-----------------------------------------------------------*/
/*----- clock common -----*/
body.index,
body.use,
body.about {
	div.two_column {
		width: 100%;
		overflow: auto;
		zoom: 1;

		.left02 {
			width: 620px;
			padding: 10px 20px;
			float: left;
		}
		.right02 {
			width: 220px;
			margin: 10px 0;
			float: right;
			padding-right: 0;
		}
	}
}
/*----- end clock common -----*/

// body.index {
// 	#content {
// 		div.row {
// 			background-color: #fee2d8;
// 		}
// 	}
// }

body.index,
body.use,
body.about,
body.movie {
	#content_header {
		background-color:#99ccff;
		border-radius:10px 10px 0 0;
	}

	.app_container {
		padding:0 20px;
		color:#ff3333;
		width: 750px;
		margin: 0 auto;

		dl.available_at {

			dt {
				padding-right: 3px;
			}

			dd {
				padding-top: 1px;
				width: 400px;
			}

		}

		h1 {
			padding: 15px 0;
			text-align: center;

			img#under_page_ttlImg {
				width:150px;
				margin-right: 30px;
				padding-right: 30px;
				border-right: 3px solid #6699cc;
			}

			span {
				color: #ff6803;
			}

		}

		.intro {
			height:320px;
			overflow: hidden;
			// position: relative;
			// bottom: 20px;

		}

		.intro .desc {
			float: left;
			width:528px;
			padding-right: 20px;
			color:@deep-blue;
		}

		.new {
			height: 44px;
			background: url(/images/badge_new.png) left 50% no-repeat;
			padding-left: 52px;
			color: #c14437;
			text-shadow: none;
			font-weight: bold;
			margin: 15px 0;
			font-size: 16px;
			line-height: 1.6;
		}
		#available{
			background-color:#85add6;
			border:1px solid #336699;
			/*width:380px;*/
			text-align:left;
			margin: 20px auto 0;
			padding:20px;

			#on_appstore{
				/*width:190px;*/
				float:left;
				margin-right: 100px;
			}
			#on_googleplay{
				float:left;
			}
			img{
				margin-bottom:10px;
			}
			p{
				background:url('/images/icon_blue_arrow.png') no-repeat left 50%;
				padding-left:12px;
				margin:0;
				text-align:left;
			}
			a{
				color:#336699;
				font-weight:bold;
				text-shadow:1px 1px 1px #ffffff;
			}
		}
		.visual {

			img {
				border: 1px solid #336699;
				width: 180px;
				height: auto;
			}
		}


		h2 {
			color:@deep-blue;
			font-weight: bold;
			font-size: 18px;
		}
	}/* .app_container */

	#content{

		h3{
			background:url('../images/icon_ring.png') no-repeat left 50%;
			padding-left:38px;
			font-size:22px;
			font-weight:bold;
			vertical-align:center;
		}

		#about_clock{
			color:@deep-blue;
			background-color:#ffffff;
			border-radius:0 0 8px 8px ;
			margin-bottom: 25px;
			padding:40px 35px 5px 35px;

			a:link, a:hover, a:active, a:visited {
				color: #ff6803;
			}

			.row{
				margin-bottom:20px;
				padding-bottom: 5px;
				overflow: hidden;

				h1{
					font-size:28px;
					margin-bottom:10px;
				}

				p {
					font-size: 16px;
				}

				p.desc{
					font-size:15px;
					line-height:1.6;
					margin-bottom: 10px;
				}

				.left01{
					width:400px;
					float:left;
					color:@deep-blue;

					h3 {
						width: 240px;
						margin-bottom: 15px;
					}

					p {
						width: 230px;
						padding-right: 15px;
						float: left;

					}

					img{
						width:150px;
						margin-top: -45px;
					}
				}

				// .right01 {
				// 	width:150px;
				// 	float:right;
				// 	padding-right:15px;
				// 	text-align:center;

				// }
				// h2{
				// 	font-size:20px;
				// 	margin-bottom:20px;
				// }
				// li{
				// 	background:url('../images/top_content_header_check.png') no-repeat left 50%;
				// 	padding:2px 0 2px 45px;
				// 	font-size:16px;
				// 	font-weight:bold;
				// 	vertical-align:center;
				// }
			}/* .row */
			.clock_box {
				margin-bottom: 50px;
				padding: 30px 30px 20px;
				background-color: #fee2d8;
				border-radius: 8px;

				ol {
					padding-left: 0;
					list-style-type: none;
					overflow: hidden;

					li {
						float: left;
						width: 180px;
						height: 400px;
						padding: 0 65px 0 35px;
						font-size:16px;
						line-height: 1.4em;
						background-image: url('../images/arrowClock.png');
						background-position: right 150px;
						background-repeat: no-repeat;
					}

					li.lc {
						padding-right: 35px;
						background-image: none;
					}

					img,
					span {
						display: block;
						margin: 0;
						padding: 0;
					}

					img {
						width: 180px;
						// padding: 0 20px;
					}

					img:last-child {
						background-image: none;
					}

					span {
						/*border-top: 1px dotted #b5b5b5;*/
						background-color: #fee2d8;
						padding-top: 12px;
					}
				}
				ul {
					padding-left: 0;
					list-style-type: none;
					overflow: hidden;

					li.leftmovie {
						display: block;
						width: 640px;
						height: 360px;
						margin: 5px auto 0;
					}
				}

			}/* .clock_box */

		}
	}/* #content */
}

body.about {
	#content {
		#about_clock {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
}