@charset "utf-8";

*{
	margin:0px;
	padding:0px;
	font-size:16px;
	line-height:1.5em;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	/*color:#333333;  これを有効にするとbotoombuttonのアイコンが黒固定になる*/
}

/********** basic **********/
body{
	background:url('image/bg2.gif');
}

#main{
	width:1000px;
	margin:0px auto;
	border-left:1px solid #aaaaaa;
	border-right:1px solid #aaaaaa;
	box-shadow:0px 0px 20px #808080;
	background-color:#e0e0ff;
}

header{
	background-color:#f0f0ff;
	padding:35px 20px 0px;
}
header a{
	font-size:38px;
	text-decoration:none;
	font-weight:bold;
	text-shadow:
	#3333ff 1px 1px 0px,
	#3333ff -1px 1px 0px,
	#3333ff 1px -1px 0px,
	#3333ff -1px -1px 0px,
	#3333ff 0px 1px 0px,
	#3333ff 1px 0px 0px,
	#3333ff 0px -1px 0px,
	#3333ff -1px 0px 0px;
	color:#9999ff;

/*
	color: #0000ff;
	text-shadow: 1px 1px 1px #8080ff,
	-1px 1px 1px #8080ff,
	1px -1px 1px #8080ff,
	-1px -1px 1px #8080ff;
*/
}

#cont{
	dxxisplay:flex;
	overflow: hidden;
}

nav{
	width:22%;
	margin:10px 5px 10px 10px;
	float:left;
}
nav ul{
	border:1px solid #aaaaaa;
	border-top:0px;
	list-style-type:none;
	margin-bottom:10px;
}
nav ul li{
	border-bottom:1px dotted #aaaaaa;
	background-color:#ffffff;
}
nav ul li:last-child{
	border-bottom:0px;
}
nav ul li a{
	text-decoration:none;
	display:block;
	padding:2px 10px;
}
nav ul li a:hover{
	background-color:yellow;
}
nav dl dt{
	background-color:#f0f0ff;
	padding:2px 5px;
	font-size:13px;
	font-weight:bold;
	border:1px solid #aaaaaa;
}

main{
	width:73%;
	border:1px solid #aaaaaa;
	margin:10px 10px 10px 5px;
	padding:5px;
	border-radius:5px;
	float:right;
	background-color:#ffffff;
}

footer{
	background-color:#f0f0ff;
	text-align:center;
	padding-top:5px;
	height:100px;
	font-size:12px;
}

/********** tag **********/
h1{
	border-top:2px solid #aaaaaa;
	border-bottom:2px solid #aaaaaa;
	background:linear-gradient(#ffffff, #f0f0f0);
	margin:10px 0px 0px;
	padding-left:10px;
	font-size:28px;
}
h1:before{
	font-family:FontAwesome;
	content:'\f101';
	padding-right:5px;
	color:#000099;
}
h2{
	border-left:8px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
	margin:35px 5px 0px;
	padding-left:5px;
	font-size:20px;
}
h3{
	margin:20px 10px 0px;
	font-size:15px;
}
h3:before{
	font-family:FontAwesome;
	content:'\f138';
	padding-right:5px;
	color:#aa0000;
	font-size:18px;
}

div.viewsample{
	/* 背景色あり版 */
	margin:10px 15px;
	padding:5px;
	border:1px solid #808080;
	background-color:#fffff0;
}
div.viewsample2{
	/* 背景色無し版 */
	margin:10px 15px;
}

p{
	margin:5px 10px 0px;
}
p.caution:before{
	padding-right:3px;
	content: url(image/caution.png);
	position: relative;
	top:2px;
}

p.caution{
	margin-left:25px;
	font-size:14px;
	color:#009900;
}

table{
	border-collapse:collapse;
	width:100%;
	max-width:700px;
	margin:10px 10px 0px;
}
th{
	border:1px solid #aaaaaa;
	background-color:#f0f0f0;
	padding-left:5px;
	text-align:left;
}
td{
	border:1px solid #aaaaaa;
	padding-left:5px;
}
caption{
	font-size:12px;
}
/*
pre{
	border:1px solid #aaaaaa;
	margin:10px 10px 0px;
	padding:5px;
}
*/
main ul{
	margin:10px 20px 0px 35px;
}
main ol{
	margin:10px 20px 0px 25px;
	list-style-position: inside;
	padding:5px 10px;
}

dl.syntax{
	margin:10px 15px 0px;
	border:3px solid #e0e0e0;
	border-radius:3px;
}
dl.syntax dt{
	border-bottom:1px solid #aaaaaa;
	background-color:#e0e0e0;
	padding-left:5px;
	font-size:12px;
}
dl.syntax dd{
	padding:3px 5px;
	white-space:pre;
	background-color:#000000;
	color:#ffffff;
	font-family:monospace;
	line-height:1.1em;
	overflow:auto;
}
div.syntax{
	margin:10px 15px 0px;
	padding:5px 8px;
	background-color:#ffffa0;
	border:1px dashed #808080;
	font-family:monospace;
	line-height:1.2em;
	font-size:18px;
	white-space:pre;
	overflow:auto;
}

.bt{
	margin:20px auto;
	text-align:center;
}

.bb{
	margin:40px auto 40px;
	text-align:center;
}

.bs{
	margin:30px auto;
	text-align:center;
}

.sns{
	padding:10px;
}

div.tag{
	margin:0px 15px 0px;
	padding:4px 5px;
	border:1px solid #000099;
	white-space:pre;
	background-color:#f0f0ff;
	color:#333333;
	font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
	line-height:1.1em;
	-webkit-text-size-adjust: 100%;
	overflow:auto;
}
pre{
	margin:0px 15px;
}
code{
	font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
	line-height:1.2em;
}

div.cmd{
	margin:0px 15px 0px;
	padding:4px 5px;
	border:2px ridge #cccccc;
	white-space:pre;
	background-color:#000000;
	color:#eeeeee;
	font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
	line-height:1.1em;
	-webkit-text-size-adjust: 100%;
	overflow:auto;
}

div.file{
	margin:0px 15px 0px;
	padding:3px 5px;
	border:1px solid #808080;
	white-space:pre;
	background-color:#f0f0f0;
	color:#333333;
	font-family:monospace;
	line-height:1.1em;
	overflow:auto;
}

table.option{
	margin:10px auto 0px;
}
table.option td:nth-of-type(1){
	text-align:left;
	padding-left:10px;
	background-color:#f9f9f9;
	min-width:90px;
	width:20%;
}
table.option td:nth-of-type(2){
	width:80%;
}

table.info{
	margin:10px auto 0px;
}
table.info td:nth-of-type(1){
	padding:2px 10px;
	background-color:#f9f9ff;
	min-width:100px;
	width:26%;
}
table.info td:nth-of-type(2){
	padding:2px 5px;
	width:74%;
	background-color:#fffff9;
}

table.attribute{
	margin:10px auto 0px;
}
table.attribute td:nth-of-type(1){
	text-align:left;
	padding-left:10px;
	background-color:#f9f9f9;
	min-width:90px;
	width:20%;
}
table.attribute td:nth-of-type(2){
	width:80%;
}

.square_btn{
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.5em 0.8em;
    text-decoration: none;
    color: #00BCD4;
    background: #ECECEC;
    transition: .4s;
	border-radius:3px;
  }
.square_btn:hover{
    background: #00bcd4;
    color: white;
}
.bbtn{
	text-align:right;
	padding-right:30px;
	margin-bottom:30px;
}

table.tab1{
	border-collapse:collapse;
	width:96%;
	max-width:700px;
	margin:10px 15px 0px;
}
table.tab1 th{
	border:1px solid #999999;
	background-color:#c0c0ff;
	padding-left:5px;
	text-align:left;
	font-size:14px;
}
table.tab1 td{
	border:1px solid #999999;
	padding-left:5px;
}
table.tab1 tr td:nth-of-type(1){background-color:#ddddff;}

.comm{
	color:#f0f000;
}

.box1{
	margin:10px 15px;
	padding:3px 5px;
	background-color:#fcefdc;
	border-left:5px #f0ad4e solid;
}
.box2{
	margin:10px 15px;
	padding:3px 5px;
	background-color:#f0f0ff;
	border-left:5px #0000ff solid;
}

div.sentence{
	border:1px solid #aaaaaa;
	background-color:#f3f3f3;
	margin:15px 20px;
	padding-left:8px;
	white-space:pre;
}

.example{
	border:1px dashed #808080;
	padding:3px 5px;
	margin :5px 10px 10px;
	background-color:#fffff0;
	white-space:pre;
}

@media screen and (max-width:750px)
{
	header{
		width:auto;
		padding-left:10px;
		padding-bottom:5px;
	}

	header a{
		font-size:28px;
	}

	#main{
		width:auto;
		padding:0px 10px;
	}

	nav{
		width:auto;
		float:none;
		margin:5px 0px;
	}

	nav ul li a{
		text-decoration:none;
		padding:10px;
		font-size:22px;
		display:block;
	}

	main{
		width:auto;
		float:none;
		margin:10px 0px 10px;
	}

	nav dl dt{
		padding:8px 25px;
		font-size:16px;
		background:#f0f0f0 url(image/045.gif) no-repeat;
		background-position:10px;
	}

	nav dl dd{
		display:none;
	}

	footer{
		font-size:9px;
	}

	.bs{
		display:none
	}

	table.option{
		width:93%;
		margin:10px auto 0px;
	}

	table.option td:nth-of-type(1){
		padding-left:5px;
	}

	div.syntax{
		margin:10px 10px 0px;
	}
}