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

#post {
	display:block;
	position:relative;
	float:left;
	width:470px;
	margin:0px 10px 0px 0px;
}

		#post::after {
			content:"";
			display:block;
			clear:both;
		}

	#post-header {
		display:block;
		position:relative;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		width:100%;
		height:107px;
		margin-bottom:5px;
		border:1px solid rgba(0, 0, 0, 0.5);
	}
			
			#post-header::before {
				content:"";
				display:block;
				position:absolute;
				bottom:0px;
				right:41px;
				width:68px;
				height:2px;
				margin:0px 0px -1px -34px;					
				background-color:rgba(255, 255, 255, 1.0);
				z-index:5;
			}
	
			#post-header::after {
				content:"";
				display:block;
				box-sizing:border-box;
					-webkit-box-sizing:border-box;
					-moz-box-sizing:border-box;
					-o-box-sizing:border-box;
				position:absolute;
				bottom:-1px;
				right:50px;
				width:50px;
				height:50px;
				margin:0px 0px -25px -25px;
				border-right:1px solid rgba(0, 0, 0, 0.5);
				border-bottom:1px solid rgba(0, 0, 0, 0.5);					
				background-color:rgba(255, 255, 255, 0.5);
				transform:rotate(45deg);
					-webkit-transform:rotate(45deg);
					-moz-transform:rotate(45deg);
					-ms-transform:rotate(45deg);
					-o-transform:rotate(45deg);
				z-index:10;
			}
		
		#post-header h1 {
			display:block;
			margin:0px;
			color:rgba(113, 170, 179, 1.0);
			text-align:center;
			line-height:105px;
			font-family:Arial, Helvetica, sans-serif;
			font-size:39px;
			font-weight:normal;
		}
	
	#post-user {
		float:left;
		width:150px;
		height:150px;
		margin:0px 5px 0px 0px;
	}
	
		#post-user > .box {
			position:relative;
			width:100%;
			margin:5px 0px 0px 0px;
			color:rgba(0, 0, 0, 1.0);
		}
		
		#post-user > .box.invalid {color:rgba(144, 51, 51, 1.0) !important;}
			
			#post-user > .box:first-of-type {margin:0px;}
			
				#post-user > .box.required::after {
					content:"*";
					display:inline;
					position:absolute;
					top:8px;
					right:6px;
					font-family:Arial, Helvetica, sans-serif;
					opacity:0.25;
				}
			
			#post-user input {
				display:block;
				box-sizing:border-box;
					-webkit-box-sizing:border-box;
					-moz-box-sizing:border-box;
					-o-box-sizing:border-box;
				position:relative;
				width:100%;
				margin:0px;
				padding:5px;
				color:rgba(0, 0, 0, 0.5);
				border:1px solid rgba(0, 0, 0, 0.25);
				background:rgba(255, 255, 255, 0);
			}
			
				#post-user input:hover, #post-user input:focus {border-color:rgba(0, 0, 0, 0.5);}
				#post-user input:focus {color:rgba(0, 0, 0, 1.0);}
			
			#post-user > .box.invalid input {color:rgba(144, 51, 51, 1.0) !important; border-color:rgba(144, 51, 51, 0.5) !important;}
				#post-user > .box.invalid input:hover {border-color:rgba(144, 51, 51, 1.0) !important;}
			
			#post-user > .box.valid input {color:rgba(0, 0, 0, 1.0) !important;}
			
			/*#post-user select {
				display:block;
				box-sizing:border-box;
					-webkit-box-sizing:border-box;
					-moz-box-sizing:border-box;
					-o-box-sizing:border-box;
				position:relative;
				width:100%;
				height:23px;
				margin:0px;
				border:1px solid rgba(0, 0, 0, 0.25);
				background:rgba(255, 255, 255, 0);
				opacity:0.5;
			}*/
		
		#post-button {
			display:block;
			box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-o-box-sizing:border-box;
			width:120px;
			margin:20px auto 0px auto;
			padding:10px;
			color:rgba(0, 102, 144, 1.0);
			text-align:center;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			border:1px solid rgba(0, 102, 144, 1.0);
			border-radius:5px;
				-webkit-border-radius:5px;
				-moz-border-radius:5px;
			opacity:0.5;
		}
		
			#post-button:hover {opacity:1.0;}
			
	#post-comment {
		display:block;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		float:left;
		width:315px;
		height:400px;
		padding:5px;
		color:rgba(0, 0, 0, 0.5);
		border:1px solid rgba(0, 0, 0, 0.25);
		background:transparent;
		resize:vertical;
	}
	
		#post.post-calc #post-comment {padding:112px 5px 5px 5px;}
		
		#post-comment:hover, #post-comment:focus {border-color:rgba(0, 0, 0, 0.5);}
		#post-comment:focus {color:rgba(0, 0, 0, 1.0);}
	
	#post-comment.invalid {color:rgba(144, 51, 51, 1.0) !important; border-color:rgba(144, 51, 51, 0.5) !important;}
		#post-comment.invalid:hover {border-color:rgba(144, 51, 51, 1.0) !important;}
	
	#post-comment.valid {color:rgba(0, 0, 0, 1.0) !important;}
	
	#post-calc-result {
		position:absolute;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		top:8px;
		right:6px;
		width:303px;
		height:102px;
		margin-top:110px;
		padding:5px;
		color:rgba(0, 102, 144, 1.0);
		font-family:Arial, Helvetica, sans-serif;
		border:1px solid rgba(0, 102, 144, 0.5);
		background:rgba(0, 102, 144, 0.125);
		z-index:-5;
	}
	
	#post-comment:hover + #post-calc-result {background:rgba(0, 102, 144, 0.1875);}
	
	#post-comment:focus + #post-calc-result {
		border:1px solid rgba(0, 102, 144, 1.0);
		background:rgba(0, 102, 144, 0.25);
	}
	
			#post-calc-result::after {
				content:"";
				display:block;
				clear:both;
			}
	
		#post-calc-total {
			box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-o-box-sizing:border-box;
			float:left;
			width:90px;
			height:90px;
			margin-right:5px;
			padding:10px;
			text-align:center;
			border:1px solid rgba(0, 102, 144, 0.5);
			background:rgba(255, 255, 255, 1.0);
		}
		
			#post-calc-total h1 {
				margin:-2px 0px 0px 0px;
				padding:0px;
				font-size:30px;
				font-weight:normal;
			}
			
					#post-calc-total h1::before {
						content:"$";
						display:inline;
						position:relative;
						top:-6px;
						margin-left:-6px;
						font-size:15px;
						opacity:0.5;
					}
			
			#post-calc-total h2 {
				margin:-2px 0px 0px 0px;
				padding:0px;
				font-size:10px;
				font-weight:normal;
				opacity:0.875;
			}
			
			#post-calc-total h3 {
				margin:5px 0px 0px 0px;
				padding:0px;
				font-size:10px;
				opacity:0.75;
			}
		
		#post-calc-detail {
			box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-o-box-sizing:border-box;
			float:left;
			width:196px;
			height:90px;
			margin:0px;
			padding:5px 10px 5px 22px;
			font-size:10px;
			border:1px solid rgba(0, 102, 144, 0.5);
			background:rgba(255, 255, 255, 1.0);
			list-style-type:circle;
		}
		
			#post-calc-detail li {
				margin-top:2px;
				color:rgba(0, 102, 144, 0.5);
			}
			
				#post-calc-detail li:first-of-type {margin-top:1px !important;}
				
				#post-calc-detail li:nth-of-type(n + 7) {display:none;}
				
				#post-calc-detail li > p {
					margin:0px;
					padding:0px;
					color:rgba(0, 102, 144, 1.0);
				}
				
					#post-calc-detail span {
						display:inline-block;
						float:right;
						width:30px;
						text-align:center;
						opacity:0.75;
					}
					
							#post-calc-detail span.calc-quantity::before {
								content:"× ";
								display:inline;
								opacity:0.75;
							}
	
	#post-submit {
		display:block;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		float:right;
		width:215px;
		margin:10px 50px 10px 50px;
		padding:10px;
		color:rgba(255, 255, 255, 1.0);
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		font-weight:bold;
		border:3px double rgba(255, 255, 255, 1.0);
		border-radius:10px;
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
		background:rgba(102, 144, 0, 1.0);
		cursor:pointer;
		opacity:0.75;
	}
	
	#post.invalid #post-submit {background:rgba(144, 51, 51, 1.0);}
	
		#post-submit:hover {opacity:1.0;}
	
	#post-confirmation {
		display:none;
		position:absolute;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		color:rgba(102, 144, 0, 1.0);
		font-family:Arial, Helvetica, sans-serif;
		background:url(../image/tone/stripe.png) repeat;
		z-index:15;
	}
	
		#post-confirmation > .box {
			box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-o-box-sizing:border-box;
			position:relative;
			width:200px;
			height:200px;
			margin:50px auto 0px auto;
			border:10px solid rgba(102, 144, 0, 1.0);
			border-radius:100px;
				-webkit-border-radius:100px;
				-moz-border-radius:100px;
			background:rgba(255, 255, 255, 0.5);
		}
		
				#post-confirmation > .box::before {
					content:"";
					display:block;
					box-sizing:border-box;
						-webkit-box-sizing:border-box;
						-moz-box-sizing:border-box;
						-o-box-sizing:border-box;
					position:absolute;
					top:50%;
					left:50%;
					width:170px;
					height:170px;
					margin:-85px 0px 0px -85px;
					border:1px solid rgba(102, 144, 0, 1.0);
					border-radius:85px;
						-webkit-border-radius:85px;
						-moz-border-radius:85px;
				}
		
			#post-confirmation > .box h1 {
				display:block;
				position:absolute;
				top:50%;
				width:100%;
				height:72px;
				margin:-30px 0px 0px 0px;
				padding:0px;
				text-align:center;
				line-height:36px;
				font-size:36px;
				font-weight:normal;
			}
		
		#post-confirmation h2 {
			margin:20px 0px 5px 0px;
			text-align:center;
			font-size:24px;
			font-weight:normal;
		}
		
		#post-confirmation h3 {
			margin:0px;
			text-align:center;
			font-size:14px;
			font-weight:normal;
		}

#location {
	position:relative;
	float:right;
	width:470px;
	margin:0px;
}

	#location > .label {
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
	}
	
		#location > .label h1 {
			font-size:30px;
			font-weight:normal;
			margin:0px;
		}
		
		#location > .label h2 {
			font-size:16px;
			font-weight:normal;
			margin:0px;
			color:rgba(113, 170, 179, 1.0);
		}
		
			#location > .label h2 span {opacity:0.5;}
	
	#location-direction {
		display:block;
		position:relative;
		margin:5px 0px 0px 0px;
		padding:0px;
		list-style:none;
	}
	
			#location-direction::after {
				content:"";
				display:block;
				clear:both;
			}
	
		#location-direction li {
			position:relative;
			float:left;
			width:153px;
			height:50px;
			margin-right:5px;
		}
		
			#location-direction li:last-of-type {width:154px; margin:0px;}
			
			#location-direction li a {
				display:block;
				box-sizing:border-box;
						-webkit-box-sizing:border-box;
						-moz-box-sizing:border-box;
						-o-box-sizing:border-box;
				position:relative;
				width:100%;
				height:100%;
				text-align:center;
				line-height:50px;
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				border:1px solid rgba(0, 0, 0, 0.5);
				opacity:0.25;
			}
			
				#location-direction li a.selected {opacity:1.0;}
		
		#location-map {
			box-sizing:border-box;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				-o-box-sizing:border-box;
			position:relative;
			width:470px;
			height:470px;
			margin-top:5px;
			border:1px solid rgba(0, 0, 0, 0.5);
		}

#contact {
	display:block;
	position:absolute;
	top:35px;
	left:50%;
	width:300px;
	margin:0px 0px 0px 180px;
	list-style:none;
}

	#contact dt {
		display:block;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		position:relative;
		float:left;
		clear:both;
		width:40px;
		height:40px;
		margin:0px 10px 10px 20px;
		color:rgba(113, 170, 179, 0.5);
		text-align:center;
		line-height:30px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:18px;
		font-weight:bold;
		border:5px solid rgba(113, 170, 179, 0.75);
		border-radius:25px;
			-webkit-border-radius:25px;
			-moz-border-radius:25px;
		cursor:pointer;
	}
	
			#contact dt:hover {color:rgba(113, 170, 179, 1.0);}
	
		#contact dt span {
			display:block;
			position:absolute;
			top:-5px;
			left:-5px;
			width:40px;
			height:20p;
			line-height:20px;
			font-size:10px;
			transform-origin:top left;
				-webkit-transform-origin:top left;
				-moz-transform-origin:top left;
				-ms-transform-origin:top left;
				-o-transform-origin:top left;
			transform:rotate(90deg);
				-webkit-transform:rotate(90deg);
				-moz-transform:rotate(90deg);
				-ms-transform:rotate(90deg);
				-o-transform:rotate(90deg);
		}
	
	#contact dd {
		display:block;
		box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-o-box-sizing:border-box;
		height:40px;
		margin:0px 0px 10px 0px;
		padding:5px 0px 5px 10px;
		color:rgba(113, 170, 179, 1.0);
		line-height:30px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
	}
	
		/*#contact dd:last-of-type {line-height:15px;}*/

#social {
	display:block;
	position:relative;
	float:right;
	clear:right;
	width:470px;
	list-style:none;
}

	#social-list {
		display:block;
		position:relative;
		padding:0px 30px;
		list-style:none;
	}
	
			#social-list::after {
				content:"";
				display:block;
				clear:both;
			}
			
		#social-list li {
			position:relative;
			float:left;
			width:95px;
			height:95px;
			margin-right:10px;
		}
		
			#social-list li:last-of-type {margin:0px;}
			
			#social-list li a {
				display:block;
				position:relative;
				width:75px;
				height:75px;
				margin:10px;
				border-radius:10px;
					-webkit-border-radius:10px;
					-moz-border-radius:10px;
			}
			
				#social-list li:nth-of-type(1) a {background:url(../image/icon/facebook.jpg);}
				#social-list li:nth-of-type(2) a {background:url(../image/icon/twitter.jpg);}
				#social-list li:nth-of-type(3) a {background:url(../image/icon/soundcloud.jpg);}
				#social-list li:nth-of-type(4) a {background:url(../image/icon/youtube.jpg);}
			
					#social-list li a::before {
						content:"";
						display:block;
						position:absolute;
						top:-5px;
						bottom:-5px;
						left:-5px;
						right:-5px;
						border-width:1px;
						border-style:solid;
						border-radius:13px;
							-webkit-border-radius:13px;
							-moz-border-radius:13px;
						opacity:0.25;
						transition:opacity .25s ease;
							-webkit-transition:opacity .25s ease;
								-webkit-backface-visibility: hidden;
							-moz-transition:opacity .25s ease;
					}
					
						#social-list li:nth-of-type(1) a::before {border-color:rgba(71, 99, 152, 1.0);}
						#social-list li:nth-of-type(2) a::before {border-color:rgba(56, 202, 241, 1.0);}
						#social-list li:nth-of-type(3) a::before {border-color:rgba(255, 113, 1, 1.0);}				
						#social-list li:nth-of-type(4) a::before {border-color:rgba(212, 48, 53, 1.0);}
					
							#social-list li a:hover::before {opacity:1.0;}
	
	#social .twtr-widget {
		border:1px solid rgba(0, 0, 0, 0.1);
		padding:5px;
		margin-top:5px;
	}
	
		#social .twtr-widget .twtr-tweet {
			border:1px solid rgba(0, 0, 0, 0.25);
			margin-bottom:5px;
		}
			
			#social .twtr-widget .twtr-tweet:hover {border:1px solid rgba(0, 0, 0, 0.5);}
			#social .twtr-widget .twtr-tweet:last-of-type {margin-bottom:0px;}
		
		#social .twtr-widget .twtr-ft a[href=http://twitter.com] {
			position:relative;
			opacity:0.75;
			transition:opacity .25s ease;
				-webkit-transition:opacity .25s ease;
					-webkit-backface-visibility: hidden;
				-moz-transition:opacity .25s ease;
		}
		
				#social .twtr-widget .twtr-ft a[href=http://twitter.com]:hover {opacity:1.0;}
		
				#social .twtr-widget .twtr-ft a[href=http://twitter.com]::before {
					content:"";
					display:block;
					position:absolute;
					left:-5px;
					right:-5px;
					top:-5px;
					bottom:-5px;
					border-radius:5px;
						-webkit-border-radius:5px;
						-moz-border-radius:5px;
					background:#33ccff;
				}
	
	#social-soundcloud {margin-top:10px;}