html,body{
width:100%;
height:100%;
margin:0;
background:#000;
color:#fff;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
}
.container{
padding:20px;
padding-bottom:68px;
max-width:900px;
margin:auto;
line-height:1.6;
min-height: calc(100vh - 48px - 48px);
}
h1{
text-align:center;
}
a:link,a:visited,a:active{
color:#44f;
text-decoration:none;
}
.footer{
border-top:1px solid #aaa;
text-align:center;
height:48px;
margin-left:auto;
margin-right:auto;
padding-bottom:30px;
padding-top:10px;
margin-top:10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #000;
z-index: 1000;
box-sizing: border-box;
}
.footer a{padding-left:10px;
padding-right:10px;
margin-top:30px;
color:#fff;
}
#topbar{
position:fixed;
top:0;
left:0;
width:100%;
height:48px;
background:#000;
border-bottom:1px solid #aaa;
display:flex;
align-items:center;
padding:0 20px;
z-index:1000;
box-sizing:border-box;
}
#topbar-icon{
width:32px;
height:32px;
margin-right:12px;
}
#topbar a{
color:#fff;
text-decoration:none;
margin-right:16px;
font-size:20px;
}
body{
padding-top:48px;
padding-bottom: 48px;
}
.sImg{
width:312px;
height:180px;
border-top:2px outset white;
border-radius:0px;
cursor:pointer;
display:inline-block;
margin-top:6px;
}
.sDiv{
width:312px;
height:242px;
border:2px outset white;
border-radius:8px;
cursor:default;
text-align:center;
overflow:hidden;
font: 16px "Consolas";
padding-top:6px;
display:inline-block;
margin-right:2px;
margin-left:2px;
}
.color{
width:180px;
height:35px;
border:3px outset white;
border-radius:8px;
display:inline-block;
vertical-align:middle;
cursor:pointer;
}
.colorOption{
width:35px;
height:35px;
border:2px outset white;
border-radius:8px;
display:inline-block;
cursor:pointer;
}
.colorOptions{
position: absolute;
width:270px;
height:auto;
border:2px outset white;
border-radius:8px;
box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
padding: 12px 16px;
background-color: #000000;
margin-top:35px;
z-index: 1;
cursor:default;
display:inline-block;
}
.iInput{
font: 20px Sans;
width:180px;
height:35px;
border:2px outset white;
border-radius:8px;
}
button{
font: 20px Sans;
width:180px;
height:35px;
border:3px outset green;
border-radius:8px;
background-color:#000000;
color:green;
cursor:pointer;
}
button[disabled]{
color:red;
border-color:red;
cursor:not-allowed;
}
.toolbar{
width:960px;
height: 35px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
border:2px outset #ffffff;
font: 20px "Consolas";
color:#ffffff;
padding:0px 0px 0px 20px;
cursor:default;
display:inline-block;
}
.toolbarlink{
background-color: #000000;
border:2px outset #ffffff;
font: 20px "Consolas";
color:#ffffff;
cursor:pointer;
display:inline-block;
border:0;
vertical-align:middle;
padding-top:5px;
}
#mainDiv{
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap:wrap;
padding-top:10px;
}
#div1,#div2,#div3{
margin-left:auto;
margin-right:auto;
border:2px outset #ffffff;
padding:20px 0px 20px 20px;
width:960px;
height:350px;
}
#div2{
overflow-y:scroll;
padding:20px 0px 20px 6px;
width:974px;
}
#div3{
background-size:312px 180px;
background-repeat:no-repeat;
background-attachment:relative;
background-position-x:400px;
background-position-y:50px;
}