@charset "utf-8";


//palette

//deafult
/*
@black: #000;
@gray: #444;
@white: #fff;

@main: #5c87a1;
@sub: #acc1cd;

@link: #734EAD;
@vlink: #D34CC1;
@alink: #E2A63F;
*/

//20111201

@black: #fff;
@gray: #444;
@white: #000;

@main: #fff;
@sub: #ccc;

@link: #734EAD;
@vlink: #D34CC1;
@alink: #E2A63F;



//mixins

.border-radius(@radius: 10px) {
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
		-ms-border-radius: @radius;
		 -o-border-radius: @radius;
			border-radius: @radius;
	behavior: url('/common/css/ie-css3.htc');
}

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
	-webkit-box-shadow: @arguments;
	   -moz-box-shadow: @arguments;
		-ms-box-shadow: @arguments;
		 -o-box-shadow: @arguments;
			box-shadow: @arguments;
	behavior: url('/common/css/ie-css3.htc');
}

.opacity(@opacity: .9) {
	-webkit-opacity: @opacity;
	   -moz-opacity: @opacity;
		 -o-opacity: @opacity;
			opacity: @opacity;
}

.text-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
	-webkit-text-shadow: @arguments;
	   -moz-text-shadow: @arguments;
		-ms-text-shadow: @arguments;
		 -o-text-shadow: @arguments;
			text-shadow: @arguments;
	behavior: url('/common/css/ie-css3.htc');
}



//initial

html {
	scrollbar-face-color: @sub;
	scrollbar-3dlight-color: @main;
	scrollbar-highlight-color: @sub;
	scrollbar-shadow-color: @sub;
	scrollbar-darkshadow-color: @main;
	scrollbar-arrow-color: @main;
	scrollbar-track-color: @main;
}

body {
	background: #000 url('/common/img/loader.gif') 50% 50% no-repeat;
	color: @main;
	font-size: medium;
	.text-shadow(0, 1px, 0, rgba(255, 255, 255, .4));
}

a {
	color: @link;
	&:visited {
		color: @vlink;
	}
	&:active {
		color: @alink;
	}
	&:hover {
		color: @alink;
	}
}


.label {
	letter-spacing: 0;
	line-height: 1;
	text-shadow: none;
}



//layout

html {
	margin: 0!important;
	padding: 0!important;
}
#backstretch img {
	pointer-events: none;
}

.container-fluid {
	z-index: 2;

	.sidebar {
		float: left;
		width: 410px!important;
	}
	.content {
		margin: 50px 0 20px 400px!important;

		article {
			background: #fff;
			.border-radius();
			.box-shadow(0, 0, 8px, rgba(64, 64, 64, .4));
			.opacity();
			margin: 50px 0 60px 20px;
			padding: 20px;
		}

	}

}


hgroup {

	.text-shadow(0, 1px, 0, rgba(0, 0, 0, .4));

	h1 {
		color: @main;
		font-weight: normal;
		line-height: 1;
		margin: 0;
		padding: 0;
		.text-shadow(1px, 1px, 3px, rgba(0, 0, 0, 1));

		a {
			text-decoration: none!important;
		}
		.alfa {
			color: @main;
			display: block;
			font-family: 'Pacifico', sans-serif;
			font-weight: normal;
			font-size: 78px;
			line-height: 1;
			white-space: nowrap;
			z-index: 4;
			&:first-letter {
				font-size: 128px;
				font-weight: normal;
			}
		}
		.beta {
			color: @main;
			display: block;
			font-family: 'Alice', sans-serif;
			font-size: 24px;
			font-weight: normal;
			line-height: 1;
			padding-left: 5px;
			z-index: 3;
		}

	}
	h2 {
		color: @main;
		font-family: 'Alice', sans-serif;
		font-size: 20px;
		font-weight: normal;
		position: absolute;
		top: 50px;
		left: 200px;
		.text-shadow(1px, 1px, 1px, rgba(0, 0, 0, 1));
		z-index: 2;
	}

}


.sidebar header p {
	font-family: 'Chivo', sans-serif;
	font-size: medium;
	line-height: 1.5;
	margin: 30px 0 10px 5px;
	.text-shadow(1px, 1px, 1px, rgba(0, 0, 0, 1));
}


aside {
	margin: 30px 0 40px 5px;
	overflow: hidden;
	position: absolute;
	width: 395px;
	height: 150px;

	ul {
		list-style: none;
		margin: 0;
	}
	li {
		float: left;
		margin: 0 10px 5px 0;
		width: 90px;
		height: 20px;
		overflow: hidden;
		
		iframe {
			background: transparent;
		}

	}
	.twitter {
		width: 395px!important;
		height: 28px!important;
	}
	.fblike {
		width: 395px!important;
		height: 24px!important;
	}
	.google1 {
		width: 395px!important;
		height: 24px!important;
	}
	.mixifav {
		width: 105px!important;
	}
	.pinterest {
		width: 156px!important;
		height: 26px!important;
		a {
			background: url('https://a248.e.akamai.net/passets.pinterest.com.s3.amazonaws.com/images/follow-on-pinterest-button.png') no-repeat;
			display: block;
			text-indent: -10000px;
			width: 156px!important;
			height: 26px!important;
		}
	}
	.pinterestpin {
		width: 90px!important;
		height: 26px!important;
	}
	.tumblr {
		width: 129px!important;
		height: 20px!important;
		a {
			background: url('http://platform.tumblr.com/v1/share_3.png') no-repeat;
			display: block;
			text-indent: -10000px;
			width: 156px!important;
			height: 26px!important;
		}
	}
	.fb_edge_comment_widget {
		display: none!important;
	}

}


nav {
	margin: 200px 0 50px 50px;
	.text-shadow(0, 1px, 0, rgba(0, 0, 0, .4));

	ul {
		margin: 0;
		margin-bottom: 20px;
		position: relative;
		width: 320px;
	}
	li {
		color: @main;
		cursor: pointer;
		font-family: 'Chivo', sans-serif;
		font-size: large;
		line-height: 57px;
		position: relative;
		text-indent: 67px;
		width: 320px;
		height: 58px;
		.text-shadow(1px, 1px, 1px, rgba(0, 0, 0, 1));

		&:hover {
			color: #fff;
		}

		&:hover a {
			color: #fff;
			text-decoration: none;
			.text-shadow(-1px, -1px, 0, rgba(0, 0, 0, .2));
			width: 320px;
		}

	}
	a {
		background: url('/common/img/splite/icon.png') no-repeat;
		border: 5px solid @sub;
		.border-radius(57px);
		color: @white;
		display: block;
		line-height: 47px;
		.opacity();
		position: absolute;
		text-indent: 62px;
		text-decoration: none;
		white-space: nowrap;
		width: 47px;
		height: 47px;
		z-index: 1;

		.label {
			font-size: large;
			font-weight: normal;
			line-height: 47px;
			margin-left: .5em;
		}
	}

}


nav {

	.activity {
		a {
//			background: #5c87a1 url('http://img.tweetimag.es/i/matsuyou_n') no-repeat;
//			background: #5c87a1 url('http://api.dan.co.jp/twicon/matsuyou/normal') no-repeat;
		}
		&:after {
			content: 'Activity - ja';
		}
	}
	.profile-ja {
		a {
			background-color: #fafafa;
			background-position: 0  -94px;
		}
		&:after {
			content: 'Profile - ja';
		}
		&:hover {
			a {
				color: #000;
				.text-shadow(0, 1px, 0, rgba(255, 255, 255, .4));
			}
		}
	}
	.profile-en {
		a {
			background-color: #004c8f;
			background-position: 0 -141px;
		}
		&:after {
			content: 'Profile - en';
		}
	}
	.inquiry {
		a {
			background-color: #d82c2d;
			background-position: 0 -188px;
		}
		&:after {
			content: 'Inquiry';
		}
	}
	.yaplog {
		a {
			background-color: #f8cb2a;
			background-position: 0 -235px;
		}
		&:after {
			content: 'Blog at Yaplog! - ja';
		}
	}
	.numero {
		a {
			background-color: #000;
			background-position: 0 -47px;
		}
		&:after {
			content: 'Blog at Numéro.jp - ja';
		}
	}
	.glamcom {
		a {
			background-color: #da4276;
			background-position: 0 -282px;
		}
		&:after {
			content: 'Blog at Glam.com - en';
		}
	}
	.twitter {
		a {
			background-color: #00aced;
			background-position: 0 -329px;
		}
		&:after {
			content: 'Twitter';
		}
	}
	.fbpage {
		a {
			background-color: #3B5998;
			background-position: 0 -376px;
		}
		&:after {
			content: 'Facebook page';
		}
	}
	.google1 {
		a {
			background-color: #D14836;
			background-position: 0 -423px;
		}
		&:after {
			content: 'Google+';
		}
	}
	.mixipage {
		a {
			background-color: #e0c074;
			background-position: 0 -470px;
		}
		&:after {
			content: 'Mixi page';
		}
	}
	.ustream {
		a {
			background-color: #5baefa;
			background-position: 0 -517px;
		}
		&:after {
			content: 'Ustream "生シネ nama cine"';
		}
	}
	.youtube {
		a {
			background-color: #e60012;
			background-position: 0 -564px;
		}
		&:after {
			content: 'YouTube channel';
		}
	}
	.glamkr {
		a {
			background-color: #da4276;
			background-position: 0 -611px;
		}
		&:after {
			content: 'Blog at Glam.kr - ko';
		}
	}
	.instagram {
		a {
			background-color: #563c13;
			background-position: 0 -658px;
		}
		&:after {
			content: 'Instagram';
		}
	}

}


footer {
	border: 0;
	font-size: x-small;
	line-height: 1.3;
	position: fixed;
	bottom: 10px;
	right: 20px;
	.text-shadow(0, 1px, 0, rgba(0, 0, 0, .4));
	z-index: 1;

	a {
		text-decoration: none;
	}

}


article {

	h2 {
		color: @sub;
		font-family: monospace;
		margin-bottom: 20px;
	}

	.note {
		text-indent: -1em;
		margin-left: 1em;
	}

	ul {
		list-style: disc;
	}

	li {
		letter-spacing: .1em;
		line-height: 1.3;
		margin-bottom: .2em;
	}

	.date {
		dt {
			float: left;
			font-family: monospace;
			line-height: 1.3;
			margin-bottom: .4em;
			width: 6em;
		}
		dd {
			line-height: 1.3;
			margin-left: 6em;
			margin-bottom: .4em;
		}
		li {
			letter-spacing: .1em;
			line-height: 1.3;
			margin-bottom: .7em;
		}
	}

	.alert-message {
		background: lighten(@main, 40%)!important;
		border: 1px solid @sub!important;
	}
}