html,
body {
margin: 0px;
padding: 0px;
height: 100%;
background-color: #F0F8FF;
background-size: cover;
overflow-y: hidden;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
display: inline;
padding: 0;
margin: 0;
}
#menu li a {
display: block;
border-left: 8px solid #F78181;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #81BEF7;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 224px;
margin: 1px 0px;
text-align: left;
font-size: 14px;
}
#menu li a:hover {
border-left: 8px solid #FE2E64;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #A9E2F3;
}
div.pagebox {
min-height: 100%;
max-height: 100%;
padding-top: 1px;
line-height: 26px;
letter-spacing: 1px;
}
div.bamp_main {
position: relative;
padding-left: 0;
width: 700px;
margin: 0 auto;
text-align: left;
height: 512px;
z-index: 0;
}
div.bamp_main2 {
position: relative;
padding-left: 0;
width: 700px;
margin: 0 auto;
text-align: left;
height: 320px;
z-index: 0;
}
div.page-5 {
position: relative;
padding-left: 0;
width: 700px;
margin: 0 auto;
text-align: left;
height: 512px;
z-index: 0;
}
.modal { display: none }
.modalBody {
position: fixed;
z-index: 1000;
background: #F0FFFF;
width: 512px;
left: 50%;
top: 50%;
height: 320px;
}
.modalBK {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
background: #000080;
opacity: 0.7;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
}
div.foot {
color: white;
background-color: rgba(0,0,0,0.8);
font-size: smaller;
}
#plt { background-color: #81BEF7 }
#c2 { background-color: #81BEF7 }
/* Macでの表示 */
.mac #editor {
position: relative;
float: left;
width: 525px;
height: 512px;
}
.mac #palette {
float: Right;
width: 175px;
height: 512px;
margin-right: 10px;
}
.mac #ops {
position: relative;
float: left;
width: 416px;
height: 512px;
background-color: #81BEF7;
padding-left: 5px;
}
.mac #opm {
float: Right;
width: 256px;
height: 512px;
background-color: #81BEF7;
}
/* Winでの表示 */
.win #editor {
position: relative;
float: left;
width: 525px;
height: 512px;
}
.win #palette {
float: Right;
width: 175px;
height: 512px;
margin-right: 10px;
}
.win #ops {
position: relative;
float: left;
width: 493px;
height: 512px;
background-color: #81BEF7;
}
.win #opm {
float: Right;
width: 207px;
height: 512px;
margin-right: 10px;
background-color: #81BEF7;
}
/* iPadでの表示 */
.ipad #editor {
position: relative;
float: left;
width: 512px;
height: 512px;
}
.ipad #palette {
float: Right;
width: 160px;
height: 512px;
margin-right: 10px;
}
.ipad #ops {
position: relative;
float: left;
width: 416px;
height: 512px;
background-color: #81BEF7;
padding-left: 5px;
}
.ipad #opm {
float: Right;
width: 256px;
height: 512px;
background-color: #81BEF7;
}
/* Androidでの表示 タブレット向け */
.android #editor {
position: relative;
float: left;
width: 512px;
height: 512px;
}
.android #palette {
float: Right;
width: 160px;
height: 512px;
margin-right: 10px;
}
.android #ops {
position: relative;
float: left;
width: 416px;
height: 512px;
background-color: #81BEF7;
padding-left: 5px;
}
.android #opm {
float: Right;
width: 256px;
height: 512px;
background-color: #81BEF7;
}
/* iphoneでの表示 6以降 */
.iphone #editor {
position: relative;
float: left;
width: 480px;
height: 228px;
}
.iphone #palette {
float: Right;
width: 160px;
height: 228px;
margin-right: 32px;
}
.iphone #ops {
position: relative;
float: left;
width: 416px;
height: 512px;
background-color: #81BEF7;
padding-left: 5px;
}
.iphone #opm {
float: Right;
width: 256px;
height: 512px;
background-color: #81BEF7;
}
.iphone div.bamp_main {
position: relative;
padding-left: 0;
width: 650px;
margin: 0 auto;
text-align: left;
height: 228px;
background-color: silver;
}
.i3 .btn{background-color: #fff; border: 1px solid #000;}
.i3 ul{list-style: none; margin: 0; padding: 0; }
.i3 .checktab > li{float:left; margin-right: 2px; }
.i3 .checktab .btn{display: block; width: 130px; height: 10px; font-size: 12px; line-height:4px; padding: 10px; background-color: #81BEF7; cursor:pointer;}
.i3 .checktab .btn:hover{background-color: #A9E2F3; color: #000;}
.i3 .checktab input[type="radio"]{ display: none;}
.i3 .checktab input[type="radio"]:checked ~ .contents{display:block;}
.i3 .checktab input[type="radio"]:checked + .btn{background-color:#fff; cursor:default; color: #000;}
.i3 .checktab .contents{position: absolute; top: 35px ; left: 0; width: 698px; height: 310px; display: none; border: 1px solid #000; overflow-y: scroll;}
/*===============================================
レスポンシブ 高さ調整
===============================================*/
@media screen and (max-height: 590px) {
.mac #editor { height: 320px }
.mac #palette { height: 320px }
.mac #ops { height: 320px }
.mac #opm { height: 320px }
.win #editor { height: 320px }
.win #palette { height: 320px }
.win #ops { height: 320px }
.win #opm { height: 320px }
div.bamp_main { height: 320px }
div.i4 { height: 319px }
}
#c1 {
position: absolute;
z-index: 2;
}
#c2 {
position: absolute;
z-index: 0;
}
div.i1 {
clear: both;
position: relative;
padding-left: 0;
width: 680px;
margin: 0 auto;
text-align: left;
height: 512px;
}
div.i3 {
clear: both;
position: relative;
padding-left: 0;
width: 700px;
margin: 0 auto;
text-align: left;
height: 512px;
}
div.i4 {
clear: both;
position: relative;
padding: 4px;
width: 685px;
margin: 0 auto;
text-align: left;
height: 320px;
overflow-y: scroll;
}
div.ore {
clear: both;
position: relative;
padding-left: 0;
width: 700px;
margin: 0 auto;
text-align: left;
height: 512px;
}
#top {
background-color: rgba(255,255,255,0.5);
z-index: 2;
}
#top p {
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px;
text-align: center;
}
#page1 {
background-color: rgba(0,10,50,0.6);
text-align: center;
}
#page2 {
background-color: rgba(0,20,70,0.7);
text-align: center;
}
#page3 { background-color: rgba(0,0,50,0.6) }
#menubar {
position: relative;
z-index: 3;
top: 0;
left: 0;
width: 100%;
background-color: #00BFFF;
opacity: 0.6;
text-align: left;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar ul li {
font-size: 32px;
line-height: 1.2;
display: inline-block;
*display: inline;
nowhitespace: afterproperty;
*zoom: 1;
}
#menubar ul li a {
text-decoration: none;
display: block;
padding: 0px 0.3em;
color: #DC143C;
}
#menubar ul li a:hover {
background-color: #DC143C;
color: #00BFFF;
}
#table {
width: 100%;
border-collapse: collapse;
}
#table td,
#table th {
padding: 5px;
border: 1px dashed #ccc;
}
#table th { font-weight: bold }
#table thead th { background: rgba(0,0,0,0.5) }
a {
color: blue;
font-style: normal;
text-decoration: underline;
}
a:link {
color: blue;
font-style: normal;
text-decoration: underline;
}
a:visited {
color: blue;
text-decoration: underline;
}
a:hover {
color: red;
font-style: normal;
text-decoration: underline;
}
/*===============================================
画面の横幅が750pxまで
===============================================*/
@media screen and (max-width:750px) {
#editor { height: 320px }
#palette { height: 320px }
div.bamp_main { height: 320px }
div.i4 { height: 319px }
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#page1 { text-align: left }
#page2 { text-align: left }
#menubar {
/* ページの上部に固定する */
position: relative;
z-index: 3;
top: 0;
left: 0;
width: 100%;
background-color: #00BFFF;
opacity: 1;
text-align: center;
}
#table { display: block }
#table thead { display: none }
#table tbody { display: block }
#table tbody tr {
display: block;
margin-bottom: 1.5em;
}
#table tbody th,
#table tbody td {
display: list-item;
border: none;
}
#table tbody th {
margin-bottom: 5px;
list-style-type: square;
color: #fff;
background: rgba(0,0,0,0.5);
}
#table tbody td {
margin-left: 20px;
padding: 0;
list-style-type: square;
}
}