@charset "UTF-8";

html 
{
	background: #f3f3f3;
}

html,
body {height:100%;}

#header
{
	z-index: 100;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#headerBar
{
	position: absolute;
	background: #222;
	width: 100%;
	height: 40px;
	z-index: 5000;
}

#header h1
{
	top: 0;
	left: 0;
	height: 40px;
	margin: 0;
	float: left;
	font-size: 150%;
	text-shadow: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.1);
	border-right: 1px solid #111;
}

#header h1 a 
{
	color: #eee;
	text-decoration: none;
	padding-right: 20px;
}

.title
{
	font-family: 'Pinyon Script', cursive;
}

#header nav
{
	float: left;
	font-size: 90%;
}

#header h1, 
#header nav #gnavi
{
	line-height: 40px;
}

#header nav #gnavi li
{
	display: block;
	float: left;
	border-left: 1px solid #333;
	border-right: 1px solid #111;
}

#header nav #gnavi li a
{
	display: block;
	padding: 0 20px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.1);
}
#header nav #gnavi li a:hover
{
	color: #999;
}

#header nav #gnavi li input
{
	width: 120px;
	margin: 0 10px;
	padding: 4px;
	border-radius: 4px;
	outline: none;
	border: 1px solid;
	border-top-color: #111;
	border-left-color: #111;
	border-right-color: #444;
	border-bottom-color: #444;
	background: #333;
	color: #DDD;
}

#taglist
{
	position: absolute;
	top: -300px;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,.9);
	-webkit-transition: top .35s cubic-bezier(.5,.5,.5,1);
    -moz-transition   : top .35s cubic-bezier(.5,.5,.5,1);
    -o-transition     : top .35s cubic-bezier(.5,.5,.5,1);
    transition        : top .35s cubic-bezier(.5,.5,.5,1);
	transition        : top .35s cubic-bezier(.5,.5,.5,1);
}

#taglist .container
{
	font-size: 95%;
}

#header #taglist .inner
{
	margin-right: -12px;
}

#header #taglist li.cat
{
	display: block;
	width: 252px;
	margin: 0 12px 12px 0;
	padding: 12px 12px 0 12px;
	float: left;
}

#header #taglist li.cat li
{
	padding: 2px 0;
}

#header #taglist li.cat h3
{
	font-weight: bold;
	color: #FFF;
	margin-bottom: .5em;
}

#header #taglist li.cat a
{
	display: block;
	color: #CCC;
}

#header #taglist li.cat a:hover
{
	color: #999;
}

#header #taglist .close
{
	position: absolute;
	top: 0px;
	right: 0px;
}

.close .icon
{
}

.container 
{
	position: relative;
	width: 858px;
	margin: 0 auto;
	text-align: left;
	overflow: visible;
}

#permalink .container
{
	width: 980px;
}

#contents
{
	position: relative;
	overflow: visible;
	padding-top: 52px;
	margin-bottom: 24px;
}

.second
{
	position: relative;
}

/*------------------------------
AD section
------------------------------*/
.ad
{
	margin-bottom: 12px;
}

.ad .ads
{
	height: 60px;
	overflow: hidden;
	margin-bottom: 6px;
}

.ad .ads .unit
{
	float: left;
}

.ad .ads .left
{
	float: left;
}

.ad .ads .right
{
	float: right;
}

.center 
{
	text-align: center;
}


/*------------------------------
UTILITY section
------------------------------*/
.utility
{
	position: relative;
	margin-bottom: 12px;
	background: #FFF;
	box-shadow: 0 1px 6px rgba(0,0,0,.15);
	border-radius: 4px;
	height: 33px;
	overflow: hidden;
}

.pr
{
	position: relative;
}

.pr li
{
	position: absolute;
	display: block;
	top: 40px;
	left: 12px;
}


/*------------------------------
SNS section
------------------------------*/
.utility .sns
{
	position: absolute;
	right: 12px;
	top: 7px;
}

.sns .btn
{
	float: left;
	margin-left: 3px;
}


/*------------------------------
main section
------------------------------*/
	#main
	{
		margin-right: -12px;
		padding-bottom: 0;
	}
	
	#permalink #main
	{
	}
	
	#main .unit
	{
		position: relative;
		display: block;
		width: 258px;
		padding: 9px;
		background: #FFF;
		box-shadow: 0 1px 6px rgba(0,0,0,.15);
		border-radius: 4px;
	}
	
	#index #main .unit
	{
		height: 320px;
		float: left;
		margin: 0 12px 24px 0;
	}
	
	#permalink #main .unit
	{
		width: 962px;
		margin-bottom: 12px;
		padding-bottom: 30px;
	}
	
	#main .unit .ttl
	{
		font-size: 150%;
		font-weight: bold;
	}
	
	#main .unit .screen
	{
		border: 4px solid #DDD;
		border-radius: 3px;
		background: #DDD;
	}
	
	#main .unit .screen .bg
	{
		background: #000;
		display: table-cell;
		vertical-align: middle;
	}
	
	#index #main .unit .screen .bg { height: 188px; }
	
	#main .unit .screen a img
	{
		display: block;
	}
	
	#main .unit .screen a 
	{
		display: block;
		
		-moz-transition: 0.15s;
		-webkit-transition: 0.15s;
		-o-transition: 0.15s;
		transition: 0.15s;
		
		filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	}
	
	#main .unit .screen a:hover
	{
		filter: alpha(opacity=75);
		-moz-opacity:0.75;
		opacity:0.75;
	}
	
	#main .unit .txt
	{
		padding-top: 5px;
		min-height: 2.5em;
		line-height: 1.4em;
	}
	
	#main .unit .txt .blank
	{
		padding-left: 16px;
		background: url(../images/blank.png) no-repeat;
	}
	
	#main .unit h1
	{
		font-weight: bold;
	}
	
	#main .unit .via
	{
		padding-top: .1em;
	}
	
	#main .unit .tag, 
	#main .unit .via, 
	#main .unit .meta
	{
		font-size: 85%;
		position: relative;
	}
	
	#main .unit .data
	{
		padding-top: .3em;
		margin-bottom: 1em;
	}
	
	#main .unit .data dl dt, 
	#main .unit .data dl dd
	{
		padding: 2px 0;
	}
	
	#main .unit .data dl dt
	{
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#main .unit .data dl dd
	{
		margin-left: 30px;
	}
	
	#main .unit .data .label
	{
		font-weight: bold;
	}
	
	#main .unit .tag a
	{
		display: block;
		float: left;
		margin: 0 5px 2px 0;
	}
	
	#main .unit .meta
	{
		width: 100%;
		height: 30px;
		line-height: 30px;
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 85%;
		border-top: 1px solid #CCC;
	}
	
	#main .unit .meta .like, 
	#main .unit .meta .perma, 
	#main .unit .meta .reblog, 
	#main .unit .meta .count
	{
		position: absolute;
	}
	
	#main .unit .meta .like { left: 9px; }
	#main .unit .meta .reblog { left: 27px; }
	#main .unit .meta .count { left: 47px; }
	#main .unit .meta .perma { right: 9px; }
	
	/*#main .unit .meta i.icon*/
	i.icon
	{
		display: inline-block;
		line-height: 14px;
		width: 14px;
		height: 14px;
		background: url(../images/icon.png) no-repeat;
		vertical-align: text-top;
	}
	
	#main .unit .meta .perma i.icon { background-position: -42px 0; }
	#main .unit .meta .like i.icon { background-position: -28px 0; }
	#main .unit .meta .like .liked i.icon { background-position: -28px -14px; }
	#main .unit .meta .reblog i.icon { background-position: -70px 0; }

	#main .unit .meta .tooltip
	{
		position: absolute;
		top: -10px;
		left: 0;
		text-align: center;
		display: none;
	}
	
	#main .unit .meta .like .tooltip
	{
		width: 30px;
		left: -15px;
	}
	
	#main .unit .meta .reblog .tooltip
	{
		width: 46px;
		left: -23px;
	}
	
	#main .unit .meta .perma .tooltip
	{
		width: 60px;
		left: -30px;
	}
	
	
	.tooltip {
		position: relative;
		background: #ffffff;
		border: 1px solid #cccccc;
		z-index: 1000;
		border-radius: 6px;
		line-height: 1;
		padding: 6px;
	}
	.tooltip:after, .tooltip:before {
		top: 100%;
		border: solid transparent;
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	
	.tooltip:after {
		border-top-color: #FFF;
		border-width: 3px;
		left: 50%;
		margin-left: -3px;
	}
	.tooltip:before {
		border-top-color: #CCC;
		border-width: 4px;
		left: 50%;
		margin-left: -4px;
	}
	
	/**
	 * Notes
	 */
	#main .notes
	{
		height: auto !important;
	}
	
	#main .notes h2
	{
		font-weight: bold;
		margin-bottom: 1em;
	}
	
	#main .notes li
	{
		font-size: 90%;
		line-height: 2em;
	}
	
	#main .notes li .avatar
	{
		margin-right: 3px;
		vertical-align: middle;
	}
	

.pager
{
	height: 35px;
	line-height: 35px;
	background: #FFF;
	position: relative;
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

.pager a
{
	display: block;
	height: 100%;
	text-decoration: none;
	text-align: center;
}

.pager .btn
{
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	text-align: center;
	line-height: 30px;
	color: #444;
	text-decoration: none;
	vertical-align: bottom;
	background: #FFF;
	margin-right: 3px;
}

.pager a:hover .btn
{
	background: #EEE;
}


/**
* Information Sector
*/
#information 
{
	padding: 18px 0;
	font-size: 85%;
}

#information .module
{
	width: 264px;
	float: left;
	padding: 0 6px;
	margin-right: 12px;
}

#information h2
{
	font-size: 125%;
	margin-bottom: .5em;
}


#footer
{
	border-top: 1px solid #CCC;
	padding: 12px 0;
	font-size: 85%;
}


/**
* Modal Window
*/
.modal
{
	display: none;
	text-align: left;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	overflow: hidden;
}

.modal .mask
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 0;
}

.modal .window
{
	position: absolute;
	left: 50%;
	background: #FFF;
	z-index: 1000;
	border-radius: 5px;
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

#submit .window, 
#contact .window
{
	width: 400px;
	margin: 0 0 0 -200px;
}

#submit .header, 
#contact .header
{
	padding: 18px;
	background: #EEE;
	border-bottom: 1px solid #CCC;
	border-radius: 4px 4px 0 0;
}

#submit .header h2, 
#contact .header h2
{
	color: #333;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(255,255,255,.5);
	font-size: 130%;
	padding-bottom: 6px;
}

#submit .header p, 
#contact .header p
{
	font-size: 85%;
}

#submit iframe,
#contact iframe
{
	width: 100%;
	border-radius: 0 0 4px 4px;
}

#submit iframe
{
	height: 179px;
}

#contact iframe
{
	height: 289px;
}


#tumblr_controls
{
	position: fixed !important;
	top: 7px !important;
	right: 7px !important;
}



/**
* Loading
*/
.loading{
display: none;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
width:23px;
height:23px;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:4px;
width:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:0.64s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:f_fadeG;
-moz-animation-duration:0.64s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:f_fadeG;
-o-animation-duration:0.64s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:f_fadeG;
-ms-animation-duration:0.64s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}

.frotateG_01{
left:0;
top:9px;
-webkit-animation-delay:0.24000000000000005s;
-moz-animation-delay:0.24000000000000005s;
-o-animation-delay:0.24000000000000005s;
-ms-animation-delay:0.24000000000000005s}

.frotateG_02{
left:3px;
top:3px;
-webkit-animation-delay:0.32s;
-moz-animation-delay:0.32s;
-o-animation-delay:0.32s;
-ms-animation-delay:0.32s}

.frotateG_03{
left:9px;
top:0;
-webkit-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-o-animation-delay:0.4s;
-ms-animation-delay:0.4s;
}

.frotateG_04{
right:3px;
top:3px;
-webkit-animation-delay:0.4800000000000001s;
-moz-animation-delay:0.4800000000000001s;
-o-animation-delay:0.4800000000000001s;
-ms-animation-delay:0.4800000000000001s;
}

.frotateG_05{
right:0;
top:9px;
-webkit-animation-delay:0.56s;
-moz-animation-delay:0.56s;
-o-animation-delay:0.56s;
-ms-animation-delay:0.56s;
}

.frotateG_06{
right:3px;
bottom:3px;
-webkit-animation-delay:0.64s;
-moz-animation-delay:0.64s;
-o-animation-delay:0.64s;
-ms-animation-delay:0.64s;
}

.frotateG_07{
left:9px;
bottom:0;
-webkit-animation-delay:0.72s;
-moz-animation-delay:0.72s}

.frotateG_08{
left:3px;
bottom:3px;
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-o-animation-delay:0.72s;
-ms-animation-delay:0.72s;
}

.frotateG_08{
left:3px;
bottom:3px;
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-o-animation-delay:0.8s;
-ms-animation-delay:0.8s;
}

@-webkit-keyframes f_fadeG{
0%{
background-color:#444444}

100%{
background-color:#FFFFFF}

}

@-moz-keyframes f_fadeG{
0%{
background-color:#444444}

100%{
background-color:#FFFFFF}

}

@-o-keyframes f_fadeG{
0%{
background-color:#444444}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#444444}

100%{
background-color:#FFFFFF}

}