@import "reset.css";
@import url(http://fonts.googleapis.com/css?family=Maven+Pro:700);
html {
	overflow-y:	scroll;
	overflow-x: hidden;
}
body {
	background: #49392a url(bg.gif);
	/* font-family:Georgia, "Times New Roman", Times, serif;*/
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック', sans-serif;
}


/*-----------------------------------------------------------
　　ヘッダー
-----------------------------------------------------------*/

p#ie7,p#js {
	padding: 0.2em 0;
	color: #fff8e8;
	font-size: 12px;
	text-align: center;
}
p#ie7 {	background: #49392a;}
p#js {	background: #a0632a;}

h1#top {
	margin-top: -0.1em;
	position:absolute;
	top: 0;
	right:0;
	font-size: 350px;
	color: #e4d7b5;
	line-height: 1;
	letter-spacing: -0.05em;
	vertical-align:text-top;
	z-index: -1;
	text-shadow: -1px -1px 1px #eee3c5;
	-webkit-transform: rotate(6.5deg);
	-moz-transform: rotate(6.5deg);
	-o-transform: rotate(6.5deg);
}
h1#top:after {
	display: block;
	margin: -0.5em 0 0 0;
	font-size: 25px;
	content: "http://256c.net/";
	letter-spacing: 1.3em;
	text-align: right;
}

header nav {
	width : 10em;
	height : 100%;
	overflow : auto;
	position : fixed;
	top : 0;
	left : 0;
	_position:absolute;
	_top: 0;
	_left: 0;
	padding: 20px 0 0 0;
	font-size: 16px;
}

header nav ul {
	position: relative;
}
header nav li {
	margin:0 0 10px 0;
	display:inline-block;  
	/display:inline;
	/zoom:1;
	zoom:1;
	text-align: center;
}
header nav li a {
	display: block;
	padding: 0.5em 0;
	background: #49392a;
	color: #fff8e8;
	font-weight: bold;
	line-height:normal;
	width: 8em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.35);
}
header nav li.navi1 a{	background: #a0632a;}
header nav li.navi2 a{	background: #6a7e41;}
header nav li.navi3 a{	background: #426283;}
header nav li.navi4 a{	background: #968458;}
header nav li a:hover {	background: #c2b186;}

body#color_red li.navi1,body#color_green li.navi2,body#color_blue li.navi3,body#color_brown li.navi4{
	margin:0 0 10px -1em;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
}

/*-----------------------------------------------------------
　　フッター
-----------------------------------------------------------*/
footer {
	position:absolute;
	left:0;
	bottom:0;
	background: #49392a;
	width:100%;
	margin-top: -5em;
	height: 5em;
	font-size:15px;
	box-shadow: 0px -2px 2px rgba(0,0,0,0.5);
}
footer:before {
	position: absolute;
	display:block;
	width: 100%;
	bottom: 10em;
	font-size: 10px;
	color: #968458;
	content: "All fanfiction and fanart is not to be used without permission from the artist or author.";
	letter-spacing: 0.3em;
	text-align: center;
}
html,body{
	height:100%;
}
div#container{
	position:relative;
	min-height:100%;
}
* html div#container{
	height:100%;
}
footer ul {
	padding: 1.5em 0 0 0;
	text-align: center;}
footer ul li {
	display: inline;
	padding: 0 10px;
	font-size: 12px;
	letter-spacing: 1px;
}
footer ul li,footer ul li a{		color: #968458;}
footer ul li a:hover { color: #fff8e8;}
p.gotop {
	margin:0;
	padding: 0;
	font-size: 12px;
}
p.gotop a {
	position: absolute;
	display: block;
	bottom: 5.5em;
	right: 10px;
	z-index: 5;
	padding: 0.8em 1em;
	background: #49392a;
	color: #fff8e8;
	border-radius:8px;
	text-decoration: none;
	box-shadow: 0px -2px 1px rgba(0,0,0,0.3);
}
p.gotop a:hover {
	padding: 0.8em 1em 1.2em 1em;
}

/*-----------------------------------------------------------
　　コンテンツ
-----------------------------------------------------------*/

/*　各要素のスタイルまとめ　*/
header h1{	font-family:'Century Gothic','Futura','sans-serif';}
header nav li,p.hitorigochi:before,dl.memo dt,body#color_blue form:after
{	font-family:'Maven Pro','Verdana','sans-serif';}

div#contents p a {	color: #1c89ce;}
div#contents a:hover {	background: #fff8e8;}
div#contents p s {	color: #ccc;}
div#contents p strong { 
	font-weight: bold;
	color:#a0632a;
}
div#contents p {
	margin: 1.5em 16px 1.5em 24px;
	font-size: 15px;
	line-height: 1.6;
	color: #49392a;
	letter-spacing: 0.05em;
}
div#contents a.blank {
	padding: 0 2px 0 16px;
	background:url(newwindow.gif) 3px 4px no-repeat;
}
hr { display: none;}

/*　入れ子　*/

div#contents {
	margin: 0 0 0 10em;
	padding: 3em 0 10em 0;
	font-size: 16px;
}

/*　ヘッドライン　*/

div#contents h1,h2,h3 {
	font-weight: normal;
}
div#contents h2{
	margin: 0 16px 0 0;
	padding: 0 0 0 0.5em;
	border-left: 5px solid #c2b186;
	font-size: 30px;
	color: #968458;
	line-height:1.2em;
	letter-spacing: 0.2em;
}

div#contents section h1 {
	margin: 0 16px 0.8em 16px;
	padding: 40px 0 5px 0;
	font-size: 24px;
	color: #5c574f;
	letter-spacing: 0.1em;
	line-height: 1.2;
	border-bottom: 2px solid #c2b186;
	text-align: left;
}
section h1:first-letter {
	font-size: 32px;
}
div#contents section h2 {
	margin: 0 16px 0 24px;
	padding: 0 0 0 10px;
	font-size: 16px;
	font-weight: bold;
	color: #5c574f;
	text-align: left;
	letter-spacing: 0.2em;
	border-left: 10px solid #c2b186;
}

/*　ひとりごち　*/

p.hitorigochi {
	background: url(tori.gif) no-repeat;
	margin: 1.5em 16px 1.5em 24px;
	padding: 0.1em 0 0 80px;
	min-height: 80px;
	height: auto !important;
	height: 100px;
}
body#color_red p.hitorigochi{	background: url(tori_red.gif) no-repeat;}
body#color_green p.hitorigochi{	background: url(tori_green.gif) no-repeat;}
body#color_blue p.hitorigochi{	background: url(tori_blue.gif) no-repeat;}
body#color_brown p.hitorigochi{	background: url(tori_brown.gif) no-repeat;}
p.hitorigochi:before {
	display: block;
	font-size: 14px;
	content: "HITORIGOCHI";
	color: #fff8e8;
	letter-spacing: 1em;
	font-weight:bold;
}

/* ------ 下部ナビゲーション ------ */

ul.topic_path {
	margin: 0 16px 0 24px;
	font-size: 14px;
	text-align: right;
}
ul.topic_path li{
	display: inline-block;
	/display: inline;
	/zoom: 1;
	_padding: 0 0 0 2em;
	white-space:nowrap;
	letter-spacing: normal;
}
ul.topic_path li:after {
	padding: 0 0.5em;
	content: ">";
	color: #5c574f;
	font-weight:bold;
}
ul.topic_path li.now:after {
	content: "";
	padding: 0;
}
ul.topic_path li a{
	text-align:center;
	color: #a0632a;
	font-weight:bold;
	text-decoration: none;
}
ul.topic_path li.now a {
	color: #968458;
	font-weight: normal;
}

/*-----------------------------------------------------------
　　サイトについて
-----------------------------------------------------------*/
p.author {
	padding-left: 26px;
	background: url(author16x16.gif) 0 3px no-repeat;
}

/*-----------------------------------------------------------
　　お絵かきログ
-----------------------------------------------------------*/

dl.oelog {
	position: relative;
	padding: 1.5em 0;
}
dl.oelog dt {
	position: absolute;
	right: 16px;
	font-family: Century Gothic;
	color: #c2b186;
	word-wrap : break-word;
	text-align: right;
	line-height:1;
	font-size: 40px;
	z-index: -1;
	overflow: hidden;
}
dl.oelog dd {
	padding: 0 0 2em 0;
	font-size: 14px;
	z-index: 4;
}
dl.oelog dd p img {
	background: #fff;
	border: 10px solid #fff;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.25);
	border-radius: 10px;
}
div#contents section dl.oelog dd p.text {
	margin: 10px 16px 0 24px;
	padding: 8px 12px;
	background: #e4d7b5;
	color: #968458;
	line-height: 1.5;
	border-radius: 10px;
}

/*-----------------------------------------------------------
　　メモちょう
-----------------------------------------------------------*/

dl.memo {
	margin: 4em 16px 1em 16px;
	padding: 0;
	position: relative;
}
dl.memo dt{
	position: absolute;
	left: 480px;
	margin: 10px 0 0 0;
	padding: 0.2em 0.2em 0.2em 0.4em;
	width: 4em;
	background: #a0632a;
	font-size: 20px;
	color: #f8e8c0;
	text-align: center;
	letter-spacing: 0.2em;
	font-weight:bold;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
}
dl.memo dt:nth-child(3n+1){ 
	background: #a0632a;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
}
dl.memo dt:nth-child(3n){ 
	background: #6a7e41;
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);
}
dl.memo dt:nth-child(3n+2){
	background: #426283;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
}
dl.memo dd{
	width: 500px;
	background: #f6f9f0;
	margin:0 0 5px 0;
	border-top: 2px dotted #e2d7c8;
	border-left: 2px dotted #e2d7c8;
	border-right: 2px dotted #e2d7c8;
	border-bottom: 2px dotted #e2d7c8;
}
dl.memo dd.memo_end {	border-bottom: 2px dotted #e2d7c8;}
dl.memo dd p {
	min-height: 120px;
	height: auto !important;
	height: 120px;
}
div#contents dl.memo dd p{
	padding: 20px 30px 20px 20px;
	margin: 0;
	font-size: 13px;
	color: #777;
}
dl.memo dd p img {
	background: #fff;
	margin: 0 12px 3px 0;
	max-height: 100px;
	height: auto !important;
	height: 100px;
	max-width: 100px;
	width: auto !important;
	width: 100px;
	float: left;
	border-radius:5px;
	border:5px solid #fff;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
dl.memo dd p a img {	border:3px solid #f8e8c0;}
dl.memo dd p a img:hover {	border:3px solid #ffcc00;}

div#contents dl.memo a:hover { color: #ffcc00;}

dl.memo span {
	margin: 5px 0 0 10px;
	padding: 0;
	display: block;
	background: #968458 url(continue.gif);
	width: 440px;
	height: 20px;
	text-indent: -9999em;
/*\*/
	overflow: hidden;
/**/
}
dl.memo span:hover {
	border: 2px dashed #ddd;
	padding: 12px;
	background: #f3e8cd;
	display: normal;
	width: auto;
	height: auto;
	text-indent: 0;
/*\*/
	overflow: hidden;
/**/
}
div#archive {
	position : fixed;
	top : 18em;
	left : 1em;
	_position:absolute;
	_top : 18em;
	_left : 1em;
	font-size: 14px;
}
form#log p{
	margin: 0;
}
form#log p:before {
	display: block;
	font-size: 14px;
	font-family:'Maven Pro','Verdana','sans-serif';
	content: "ARCHIVE";
	color: #968458;
	letter-spacing: 0.2em;
	font-weight:bold;
}
form#log select {
	width: 8em;
	text-align: center;
}


/*-----------------------------------------------------------
　　リスト・切手型
-----------------------------------------------------------*/

div#contents ul.link_a {
	margin: 1.5em 16px 2em 24px;
	font-size: 14px;
}
div#contents ul.link_a li{
	display: inline-block;
	/display: inline;
	/zoom: 1;
	padding-right:3px; 
	white-space:nowrap;
	letter-spacing: normal;
}
div#contents ul.link_a li:nth-child(3n) {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
}
div#contents ul.link_a li:nth-child(3n+1) {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}
div#contents ul.link_a li:nth-child(3n+2) {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
}
div#contents ul.link_a li a{
	padding: 0.5em 0.7em;
	text-align:center;
	line-height:3.2em;
	font-size: 14px;
	color: #a0632a;
	background: #fff8e8;
	border: 2px dotted #e2d7c8;
	text-decoration: none;
}
div#contents ul.link_a li.new a{	background: #ffe789;}
div#contents ul.link_a li a:hover {	background: #ded1b1;}


/*-----------------------------------------------------------
　　メールフォーム
-----------------------------------------------------------*/
body#color_blue form {
	position: relative;
	margin: 1.5em 16px 1.5em 24px;
	padding: 15px 0 30px 0;
	width: 33em;
	background:#fff8e8;
	border: 2px dotted #e4d7b5;
}
body#color_blue form:after {
	position: absolute;
	right: 10px;
	bottom: 10px;
	text-align: right;
	content: "MAILFORM";
	font-size: 30px;
	color: #e4d7b5;
	font-weight:bold;
}
body#color_blue form p,body#color_blue form p input,body#color_blue form p textarea {
	margin: 0;
	color: #968458;
	font-size: 12px;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック', sans-serif;
}
body#color_blue form p input,body#color_blue form p textarea {
	margin: 0;
	padding: 5px;
	background: #e4d7b5;
	border: 1px solid #e4d7b5;
}
body#color_blue form p.form_name input,body#color_blue form p.form_mail input {
	width: 20em;
	margin:0 10px 0 0;
}
body#color_blue form p { padding: 0 0 5px 1.5em;}
body#color_blue form p.form_submit {
	padding: 10px 0 0 0;
	text-align: center;
}
body#color_blue form p.form_submit input {
	width: 15em;
	letter-spacing: 0.2em;
	background: #968458;
	color: #fff8e8;
}
body#color_blue form p textarea{	width: 38em;}

/*-----------------------------------------------------------
　　更新履歴
-----------------------------------------------------------*/

dl.data_a  {
	height: 5em;
	max-width: 540px;
	width: auto !important;
	width: 540px;
	margin: 0 16px 0 24px;
	padding: 8px 8px 3px 10px;
	border:1px solid #968458;
	background: #968458;
	overflow-x: hidden;
	overflow-y: scroll;
	font-size: 12px;
	line-height: 1.7;
}
dl.data_a dt {
	float: left;
	width: 4em;
	padding: 0 0 0.3em 0;
	font-weight: bold;
	color: #f1e4bd;
}
dl.data_a dd {
	margin: 0 0 0 6em;
	padding: 0 0 0.3em 0;
	color: #fff8e8;
}
dl.data_a a {	color: #ffcc00;}


/*-----------------------------------------------------------
　　ハイクログ
-----------------------------------------------------------*/

div#haiku {
	width: 765px;
	background: #fff url(bg_haiku3.gif) no-repeat;
	margin: 45px 0 30px 0;
	padding: 160px 0 0 0;
}
#haiku h4 {
	padding: 8px 0 18px 65px;
	border: 0;
	background: url(bg_haiku.gif) no-repeat 20px 50%;
	color: #427131;
	font-size:14px;
	text-decoration: underline;
	letter-spacing: 1px;
	font-family: "sans-serif";
}
#haiku p {
	margin: 0;
	padding: 0 0 60px 45px;
	background: url(bg_haiku2.gif) no-repeat 45px 100%;
	border-bottom: 1px solid #eee;
}
div#haiku p img {
	margin: 0;
	border: 16px solid #fff;
}