@charset "UTF-8";
@font-face{
	font-family:'tanuki';
	src: url('./karei.eot');
}
@font-face{
	font-family:'tanuki';
	src: url('./karei.ttf') format('truetype');
}

*{
	margin:0;
	padding:0;
	line-height:100%;
}

a{
	color:rgba(255,48,0,1);
	text-decoration:none;
}
body{
	color:rgba(200,200,200,1);
	font-family:sans-serif;
	background:#4ab500;
}
img{
	border:none;
}

p#headline{
	margin:0 10px;
	padding:5px;
}
textarea,input[type='text'],input[type='password'],input[type='button'],input[type='submit'],input[type='reset'],button{
	font-family:sans-serif;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	-webkit-appearance: none !important; /* Safari */
}
select{
	font-family:sans-serif;
}
input[type='checkbox']{
	-webkit-appearance: checkbox !important; /* Safari */
}
textarea:focus, input:focus,button:focus{
	box-shadow:0 0 10px rgba(255, 235, 0, 0.9);
	outline:none;
}


/* ==================================================
 *  HEADER    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 * =============================================== */
#header{
	min-width:960px;
	height:140px;
	color:#fff;
}

/* --------------------------------------------------
    USER INFORMATION
-------------------------------------------------- */
#header #userInfo{
	text-align:center; /* IE6- */
	height:30px;
	overflow:hidden;
	background: rgba(0,0,0,0.7);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
}
#header #userInfo p{
	width:960px;
	margin:0 auto;
	line-height:30px;
	color:rgba(255,255,255,1);
	text-shadow:0 -1px 0 rgba(0,0,0,1);
}
#header #userInfo p span{
	display:block;
	height:20px;
	padding:5px 20px;
}
#header #userInfo p span#siteLogo{
	float:left;
	width:280px;
}
#header #userInfo p span#authMsg{
	display:none;
}
#header #userInfo p span#authUser{
	float:left;
	margin:0 0 0 300px;
	width:100px;
	background: rgba(0,0,0,0.3);
}
#header #userInfo p span#authLogin{
	float:right;
	width:160px;
	background: rgba(0,0,0,0.3);
}

/* --------------------------------------------------
    HEADER INFORMATION
-------------------------------------------------- */
#header #headInfo,#header #userInfo p #backButton{
	display:none;
}
/* --------------------------------------------------
    GLOBAL NAVIGATION
-------------------------------------------------- */
#header #globalNav{
	min-width:960px;
	height:110px;
	font-family:'tanuki';
}

#header #globalNav ul{
	margin:0 auto;
	width:940px;
	height:110px;
	list-style-type:none;
}

#header #globalNav ul li{
	float:left;
	margin-left:20px;
	width:160px;
	height:110px;
	position:relative;
}

#header #globalNav ul li a{
	position:absolute;
	width:100%;
	display:block;
	overflow:hidden;
	color:#fff;
	line-height:50px;
	text-align:center;
	text-shadow:-1px -1px 6px rgba(0,0,0,0.5), 1px 1px 5px rgba(255,255,255,0.6);
	font-size:25px;
	box-sizing: border-box;
	box-shadow:0 5px 16px rgba(0,0,0,0.5), 0 40px 40px rgba(0, 0, 0, 0.1) inset;
	border-top:10px solid rgba(255,255,255,0.3);
	border-top-left-radius:15px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

#header #globalNav ul li.current a,
#header #globalNav ul li a:hover{
	box-shadow:0 5px 16px rgba(0,0,0,0.5), 0 -40px 40px rgba(255, 255, 255, 0.2) inset;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	transition: all  0.1s ease;
}
/*  Navigation Items
-------------------------------------------------- */
#header #globalNav ul li#gnavHome{
	margin:0;
	width:220px;
}
#header #globalNav ul li#gnavHome a{
	height:70px;
	margin-top:40px;
	letter-spacing:5px;
	background:#ffc800 /*url(images/gnav_img.png) no-repeat 0px -120px*/;
}
#header #globalNav ul li#gnavBoard a{
	height:60px;
	margin-top:50px;
	letter-spacing:15px;
	background:#3FB411 /*url(images/gnav_img.png) no-repeat -260px -120px*/;
}
#header #globalNav ul li#gnavUploader a{
	height:70px;
	margin-top:40px;
	letter-spacing:-2px;
	background:#31ADFF /*url(images/gnav_img.png) no-repeat -440px -120px*/;
}
#header #globalNav ul li#gnavAlbum a{
	height:80px;
	margin-top:30px;
	letter-spacing:7px;
	background:#eb6877 /*url(images/gnav_img.png) no-repeat -620px -120px*/;
}
#header #globalNav ul li#gnavHakoniwa a{
	height:60px;
	margin-top:50px;
	letter-spacing:7px;
	background:#FC8E02 /*url(images/gnav_img.png) no-repeat -780px -120px*/;
}
#header #globalNav ul li#gnavHome a:hover,
#header #globalNav ul li#gnavBoard a:hover,
#header #globalNav ul li#gnavUploader a:hover,
#header #globalNav ul li#gnavAlbum a:hover,
#header #globalNav ul li#gnavHakoniwa a:hover,
#header #globalNav ul li#gnavHome.current a,
#header #globalNav ul li#gnavBoard.current a,
#header #globalNav ul li#gnavUploader.current a,
#header #globalNav ul li#gnavAlbum.current a,
#header #globalNav ul li#gnavHakoniwa.current a{
	height:100px;
	margin-top:10px;
	text-shadow:0 0 8px #fff;
}


/* ==================================================
 *  CONTENT   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 * =============================================== */
#content{
	z-index:100;
	margin:0 auto;
	padding:0 0 120px;
	width:960px;
	box-shadow:0 5px 50px rgba(0,0,0,0.5);
	background:#fff;
	background-clip: padding-box;
}
/* --------------------------------------------------
    BODY
-------------------------------------------------- */
#content #body{
	margin:0 auto;
	width:960px;
	color:#544;
	text-align:left;
}

/*  Shout Box
-------------------------------------------------- */
#content #body #shoutBox{
	position:relative;
	margin:0 0 ;
	left:-30px;
	width:1020px;
	height:50px;
	box-shadow:0 5px 40px rgba(0,0,0,0.45), 0 0 10px rgba(255,255,190,0.45) inset;
	border-radius:5px;
	z-index:100;
}
#content #body #shoutBox:after{
	content: " ";
	position:absolute;
	top:0;
	display:block;
	width:1020px;
	height:50px;
	border-radius:5px;
	z-index:-5;
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 49%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 95%, rgba(255, 255, 255, 0.1) 100%);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 49%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 95%, rgba(255, 255, 255, 0.1) 100%);
	background: linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 49%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.1) 95%, rgba(255, 255, 255, 0.1) 100%);
}

#content #body #shoutBox input[type="text"]{
	width:905px;
	margin:10px;
	height:30px;
	line-height:30px;
	padding:0 5px;
	color:#fff;
	border-top:1px solid rgba(0, 0, 0, 0.2);
	border-left:1px solid rgba(0, 0, 0, 0.1);
	border-right:1px solid rgba(0, 0, 0, 0.1);
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	border-radius:2px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) inset;
	background:rgba(0, 0, 0, 0.1);
 	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#content #body #shoutBox input[type="text"]:focus{
	background:rgba(0, 0, 0, 0.5);
}
#content #body #shoutBox input[type="text"]:focus{
	background:rgba(0, 0, 0, 0.5);
}
#content #body #shoutBox input[type="submit"]{
	width:60px;
	height:30px;
	margin:0 0 0 5px;
	border-top:1px solid rgba(255,255,255,0.5);
	border-bottom:1px solid rgba(0,0,0,0.2);
	background:rgba(0,0,0,0.2);
}
#content #body #shoutBox input[type="submit"]:hover{
	background:rgba(255, 200, 0, 1);
}

/*  Heading
-------------------------------------------------- */
#content #body h1, #content #body h2, #content #body h3,
#content #body h4, #content #body h5, #content #body h6{
	clear:both;
	font-weight:bold;
}

#content #body h2{
	position: relative;
	left:-30px;
	height: 40px;
	margin:5px 0 10px;
	padding:0 30px;
	width:960px;
	line-height: 40px;
	color:#fff;
	text-shadow:0 1px 6px rgba(0,0,0,0.4);
	box-shadow:0 5px 10px rgba(0,0,0,0.3);
	background:#ffc800;
}
#content #body h2:before{
	content:'';
	position: absolute;
	left: 0px;
	top: 25px;
	height:0px;
	width:0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 30px solid rgba(255,200,0,0.5);
	z-index: -1;
}
#content #body h2:after{
	content:'';
	position: absolute;
	left: 990px;
	top: 25px;
	height:0px;
	width:0px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid rgba(255,200,0,0.5);
	z-index: -1;
}

/*  Page Information
-------------------------------------------------- */
#content #body #pageInfo,
#content #body p.nav{
	margin:2em 0 2em;
	clear:both;
	text-align:right;
}
#content #body #pageInfo{
	width:200px;
	margin:0 0 0 700px;
}
#content #body #pageInfo a{
	width:200px;
	display:block;
	padding:20px 0 20px 30px;
	border-radius:5px;
	text-align:center;
	background:rgba(255, 200, 0, 1) url(uparrow2.png) 10px 50% no-repeat;;
	color:rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
	font-weight:bold;
	font-family: meiryo;
	border:none;
	border-radius:5px;
	border-bottom:1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(255, 255, 255, 0.2) inset;
}

/*  Panel
-------------------------------------------------- */
#content #body .panel{
	width:940px;
	margin:0 0 50px;
	padding:10px;
	background:#fff;
	overflow:auto;
	border-radius:5px;
	box-shadow: 0 0 4px #ccc; 
}
/*  General Elements
-------------------------------------------------- */
#content #body p{
	margin:0 10px 1em;
	line-height:160%;
}

#content #body input[type="submit"],
#content #body input[type="button"],
#content #body input[type="reset"]{
	color:rgba(255,255,255, 1);
	box-sizing: border-box;
	text-shadow:0 -1px 1px rgba(0, 0, 0, 0.4);
	font-weight:bold;
	font-family: meiryo;
	border:none;
	border-radius:5px;
	border-top:1px solid rgba(255,255,255, 0.6);
	border-bottom:1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(255, 255, 255, 0.13) inset, 0 -12px 12px rgba(0,0,0, 0.05) inset;
}
#content #body input[type="submit"]:hover,
#content #body input[type="button"]:hover,
#content #body input[type="reset"]:hover{
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.3), 0 15px 15px rgba(255, 255, 255, 0.3) inset, 0 -15px 15px rgba(0,0,0, 0.1) inset;
}
#content #body input[type="submit"]:active,
#content #body input[type="reset"]:active{
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 3px 16px rgba(0, 0, 0, 0.2) inset;
}


/* ==================================================
 *  FOOTER    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 * =============================================== */
#footer{
	margin:-200px auto 0;
	height:320px;
	min-width:960px;
	clear:both;
	color:#fff;
	overflow:hidden;
	background:transparent url(footer.png) 50% 0% no-repeat;
 }

#footer #announce{
	text-align:center;
	padding:270px 0 0;
	text-shadow:0 1px 2px rgba(0,0,0,1);
}

#footer #footNav,
#footer #newPosts,
#footer #recentUps,
#footer #announce h4{
	display:none;
}