@charset "utf-8";

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
canvas {
	display: inline-block;
}
html {
	font-family: sans-serif;
	font-size: 1em;
}
html, button, input, select, textarea {
	font-family: sans-serif;
	color: #222;
}
body  {
	color: #DDD;
	background : -moz-linear-gradient(top, rgba(64,64,64,1), rgba(32,32,32,1));
	background : -webkit-gradient(linear,right  top,right bottom, to(rgba(64,64,64,1)), from(rgba(32,32,32,1)));
	
	text-shadow: 1px 1px 1px #BBB;
	background-size: cover;
	
}

body {
	margin: 0px;
	padding: 0px;
}

header, footer{
	margin: 16px auto;
	padding: /*0*/ 16px;
	width: 1024px;
}

header, footer {
	background-color: #111;
	color: #EEE;
	border: solid 2px #667;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	border-radius: 16px;
	background : -moz-linear-gradient(left , rgba(16,16,16,0.8), rgba(32,32,32,0.4));
	background : -webkit-gradient(linear,left top,right bottom, to(rgba(16,16,16,0.8)), from(rgba(32,32,32,0.4)));
}

a {
	color: #DDE;
	text-decoration: none;
}

article a {
	border-radius: 8px;
	padding: 1px;
}
a:hover {
	text-decoration: underline;
	background-color: #EEF;
	color : #112;
}

a[href^=http] {
	border : 2px solid rgba(255,255,255,0.5);
}

a[href^=http]:before {
	content: "外部リンク ";
	color : rgba(128,128,128,0.9);	
}



nav {
	width: 256px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: content-box;
}

nav {
	background : -moz-linear-gradient(top, rgba(16,16,16,0.2), rgba(64,64,64,0.4));
	background : -webkit-gradient(linear,right top, right bottom, from(rgba(16,16,16,0.2)), to(rgba(64,64,64,0.4)));
	
	box-shadow: 8px 8px 4px rgba(0,0,0,0.2);
}

#main {
	width: 756px;
	display: block;
	padding: 8px;
	margin: 8px;
	border-radius: 8px;
	display: block;
	vertical-align: top;
}

#main {
	background-color: rgba(64,64,64,0.5);
	box-shadow: 8px 8px 4px rgba(0,0,0,0.2);
	background : -moz-linear-gradient(top, rgba(32,32,32,0.2), rgba(64,64,64,0.4));
	background : -webkit-gradient(linear,right top,right  bottom, from(rgba(32,32,32,0.2)), to(rgba(64,64,64,0.4)));

}

nav a {
	text-shadow: none;
	margin: auto;
	padding: 8px;
	/*width: 96px;*/
	text-align: left;
	border-radius: 32px;
	line-height: 2.5;
	font-size : 0.9em;
}

nav a{
	font-weight: bolder;
	background-color: #223;
	box-shadow: #445 0px 8px 8px inset;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333344), color-stop(100%, #222233));
	background-image: -webkit-linear-gradient(top, #333344, #222233);
	background-image: -moz-linear-gradient(top, #333344, #222233);
}

nav a:hover{
 background-color: #DDDDEE;
 box-shadow: #999 0px -8px 8px inset;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DDDDEE), color-stop(100%, #EEEEFF));
 background-image: -webkit-linear-gradient(top, #DDDDEE, #EEEEFF);
 background-image: -moz-linear-gradient(top, #DDDDEE, #EEEEFF);
}

nav ol, nav ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	display:block;
}

nav ul li {
	display: block;
}



nav ul li {
	margin:/*16px*/ auto;
}

nav, article, aside {
	text-align: left;
	margin: 8px;
	padding: 8px;
	border-radius: 8px;
	display: block;
	vertical-align: top;
}

nav, article, aside {
	background-color: rgba(64,64,64,0.5);
}


article {
	margin: 8px;
	padding:8px;
	border-radius: 8px;
	
}

article {
	background-color: rgba(64,64,80,0.5);
	box-shadow :  4px 4px 4px rgba(0,0,16,0.2);
	border : solid 4px rgba(128,128,160,0.5);
	background : -moz-linear-gradient(left, rgba(64,64,80,0.2), rgba(80,80,100,0.4));
	background : -webkit-gradient(linear, left top, right bottom, from(rgba(80,80,100,0.2)), to(rgba(80,80,100,0.4)));

}

.box {
	display: -moz-box;
	display: -webkit-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: content-box;
	width: 100%;

}

article dl {
	width: 512px;
}

article aside {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	margin: 8px;
	padding: 8px;
	display: block;
}

article aside {
	background-color: rgba(96,96,96,0.5);
	background : -moz-linear-gradient(top, rgba(96,96,96,0.2), rgba(108,108,108,0.4));
	background : -webkit-gradient(linear,right  top,right  bottom, from(rgba(96,96,96,0.2)), to(rgba(108,108,108,0.4)));
	box-shadow : 2px 2px 2px rgba(0,0,0,0.2)

}

article > p {
	width: 512px;
}

hr {
	/*display: block;*/
	height: 1px;
	border: 0;
	margin: 4px 0;
	padding: 0;
}

hr {
	border-top: 1px solid #ccc;
}

pre, code, kbd, samp {
	font-family: monospace, serif;
	_font-family: 'IPA gothic', monospace;
	font-size: 1em;
	text-shadow: none;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/*.CollapsibleBox {
	display: none;
}*/



.current {
	background-color:#556;
	box-shadow: #667 0px 8px 8px inset;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #556), color-stop(100%, #445));
    background-image: -webkit-linear-gradient(top, #556, #445);
    background-image: -moz-linear-gradient(top, #556, #445);
}

#contents {
	margin: 8px auto;
	text-align:center;
	display: -moz-box;
	display: -webkit-box;
	width: 100%;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#title {
	margin: 0;
}

::selection { 
    background: #eee;
    color: #444;
    text-shadow: none;
}

::-moz-selection {
    color: #444;
    background: #eee;
    text-shadow: none;
}


dt {
	padding: 4px;
}
/*
 border:0px;
 box-shadow: #AAA 0px -8px 8px inset; -webkit-border-radius: 32px;
 border-radius: 32px;
 padding: 8px;
 text-shadow: 0px 0px 0 rgba(0,0,0,0.3);
 font-weight:bolder;
 text-align: center;
 color: #DDDDEE;
 background-color: #333344;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333344), color-stop(100%, #222233));
 background-image: -webkit-linear-gradient(top, #333344, #222233);
 background-image: -moz-linear-gradient(top, #333344, #222233);
 */