@charset "utf-8";

/*--------------------------------
 ページ
--------------------------------*/

html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: none;
overflow: hidden;
font-family: sans-serif;
}


/*--------------------------------
 レイアウト
--------------------------------*/

#wrapper{
position: absolute; left: 0px; top: 0px; z-index: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 80px 0px 0px;
border: none;
background: #000;
overflow: hidden;
}

form[name="edit"]{
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: none;
border-top: solid 2px #999;
background: #fff;
overflow: hidden;
}
form > section{
box-sizing: border-box;
}

#main{
position: absolute; left: 0px; top: 0px; z-index: 0;
width: 100%;
height: 100%;
margin: 0px;
padding: 8px 12px;
border: none;
background: #fff;
overflow-x: auto;
overflow-y: auto;
}


/*--------------------------------
 共通
--------------------------------*/

h1{
white-space: nowrap;
}
h2{
position: relative;
width: 200px;
height: 32px; line-height: 32px;
margin: 8px 0px 4px;
padding: 0px 12px;
background: #666;
color: #fff;
font-size: 16px;
font-weight: bold;
overflow: visible;
white-space: nowrap;
}
h2:after{
content: "";
display: block;
position: absolute; right: -32px; top: 0px;
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border: solid 16px transparent;
border-left: solid 16px #666;
}


/*--------------------------------
 #main
--------------------------------*/

/*---- セクション ----*/
#main section{
box-sizing: border-box;
width: 100%; min-width: 800px;
margin: 0px;
padding: 0px 100px 0px 0px;
}

/*---- リンクボタン ----*/
#gotop,
#dltool{
display: inline-block;
width: 240px;
height: 32px; line-height: 32px;
margin: 4px;
padding: 0px;
border: solid 2px #666;
background: #ccc;
color: #000;
font-size: 20;
font-weight: bold;
white-space: nowrap;
text-align: center;
text-decoration: none;
}
#gotop:hover,
#dltool:hover{
color: #fff;
background: #999;
}

/*---- 説明 ----*/
#about div{
box-sizing: border-box;
width: 100%;
margin: 32px 0px;
padding: 12px 16px;
border-radius: 10px;
border: solid 2px #666;
white-space: pre-wrap;
}

/*---- パラメータ設定 ----*/
#params li { white-spase: nowrap }
#params li label { display: inline-block; width: 150px }
#params li input[ type="number" ] {  width: 60px }

/*---- コンテンツ ----*/
#content p{
width: 100%;
margin: 0px;
padding: 0px;
border: none;
}

#wrap_text{
height: 240px;
}
#content textarea{
display: block;
resize: none;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0px;
padding: 8px 12px;
border: solid 2px #666;
border-bottom: none;
background: #fff;
font-size: 16px;
}
#content textarea.drag{
border: solid 4px #f69;
background: #fee;
}

#wrap_btn_output{
height: 32px; line-height: 32px;
}
#btn_output{
display: block;
box-sizing: border-box;
width: 100%
height: 32px; line-height: 32px;
margin: 0px;
padding: 0px;
border: solid 2px #666;
background: #ccc;
color: #000;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#btn_output:hover{
color: #fff;
background: #999;
}


/*--------------------------------
 XREA
--------------------------------*/

#XREA a img{
border: solid 1px #fff;
}