@import "common.less";
@import "style.less";

.main#top{
	.flower{
		.abs();
		left : -45px;
		top : -48px;
		width : 180px;
		height : 250px;
		background-image: url(../img/flower.png);
		background-repeat: no-repeat;
		background-position: center center;
	}
	.top_img{
		.abs();
		width : 100%;
		height : 100%;
		background-image: url(../img/top.png);
		background-repeat: no-repeat;
		background-position: center center;
	}

	
	.sub_nav{
		.abs();
		right : 5px;
		top : 10px;		
		width : 510px;
		height : 90px;
		background-color : rgba(0,0,0,.5);
		ul{
			li{
				position : relative;
				// .protected();
				cursor : pointer;

				top : 0px;
				margin-left : 10px;
				margin-top : 10px;

				float : left;
				width : 160px - 3px;
				height : 30px;
				line-height : 30px;	
				font-size : 16px;
				font-family: HGMaruGothicMPRO,"HG丸ｺﾞｼｯｸM-PRO", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
				font-weight : lighter;
				color : #eee;
				text-align : center;
				&:nth-child(1){
					margin-left : 5px;
					border-left : 3px solid @red;
				}
				&:nth-child(2){
					border-left : 3px solid @orange;
				}
				&:nth-child(3){
					border-left : 3px solid @yellow;
				}
				&:nth-child(4){
					margin-left : 5px;
					border-left : 3px solid @green;
				}
				&:nth-child(5){
					border-left : 3px solid @blue;
				}
				&:nth-child(6){
					border-left : 3px solid @purple;
				}
				&:hover{
					border-left : 3px solid #eee;
					color : #fff;
					span.default{
						display: none;
					}
					span.hover{
						display: inline;
					}
				}
				a{
					.abs();
					text-decoration: none;
					display:block;
					top : 0px;
					left : 0px;
					width : 100%;
					height : 100%;
					border-radius : 3px;
					text-shadow : 0px 0px 5px rgba(0,0,0,.3);
					color : #eee;
					&:link{
						color : #eee;
					}
					&:visited{
						color : #eee;
					}
					&:hover{
						color : #fff;
					}
					span.hover{
						display: none;
						color : #eee;
					}
				} /*li*/				
			} /*ul*/
		} /*sub_nav*/
	}
		

	.view{
		.abs();
		right : 260px;
		bottom : 15px;
		border-radius : 5px;
		background-color : rgba(0,0,0,.5);
		color : #eee;
		.view_content{
			display : none;
			opacity : 0;
		}
		.view_content_shown{
			display : block;
			opacity : 1;
		}
		a{
			color: #99f;
			text-decoration:none;
			&:visited{
				color: #f6f;
				text-decoration:none;
			}
			&:hover{
				text-decoration:underline;
			}
		}
		&:after{
			content : '';
			.abs();
			right : -30px;
			bottom : 5px;
			width : 0px;
			height : 0px;
			border : 15px solid transparent;
			border-left : 15px solid rgba(0,0,0,.5);
		}
	}
	.view_animated{
		transition : width 0.5s ease, height 0.5s ease;
	}

	.view.updates{
		width : 420px;
		height : 200px;
		#updates_caption{
			cursor : pointer;
		}
		.updates_content{
			position : relative;
			width : 100%;
			height : 100%;
			overflow : hidden;
		}
		.updates_list{
			width : 96%;
			height : 200px - 10px - 36px;
			margin : 5px auto 5px auto;
			border : 1px solid #ccc;
			overflow : auto;
		}
		h4{
			// computed_h = 36
			margin : 5px auto 0px 5px;
			padding-left : 0.4em;
			font-size : 1.1em;
			line-height : 26px;
			height : 26px;
			border-left : 2px solid #ccc;
		}
		table{
			tr{
				td:nth-child(1){
					text-align : center;
				}
			}
		}
		.toggler{
			.abs();
			cursor : pointer;
			right : 4px;
			top : 8px;
			width : 20px;
			height : 20px;
			background-position: center center;
			background-size: cover;
			opacity : 0.6;
			&:hover{
				opacity : 1;
			}
		}
		.toggler.close{
			background-image : url(../img/triangle_bottom.png);
		}
		.toggler.open{
			background-image : url(../img/triangle_top.png);
		}
	}
	.view.updates_closed{
		height : 40px;
	}
	
	.view.details{
		width : 700px;
		height : 400px;
		.details_content{
			padding : 0px 30px 20px 10px;
			width : 700px - 40px;
			height : 400px - 20px;
			overflow : auto;
		}
		#cm_content{
			overflow : hidden;
		}
		.close{
			.abs();
			.protected();
			top : 5px;
			right : 5px;
			width : 20x;
			height : 20px;
			margin-top : -10px;
			margin-left : -10px;
			content:url(../img/close.png);
		}
	}
	form{
		margin: 5px 0 0 30px;
		.input{
			margin:0px;
			padding:3px;
			font-size:1em;
			background-color : rgba(255,255,255,.4);
			border:solid 1px #ccc;
			width:200px;
			&:focus {
			    border:solid 1px #EEA34A;
			}
		}
		.button{
			margin:0px;
			border:solid 1px #ccc;
			font-size:1em;
			color:#333;
			cursor:pointer;
		}
	}

}