body {
    margin: 0;
    padding: 0;
    font: 400 14px Arial;
    background-color: #fff;
    color:#333;
    text-align:center;
}
.both {clear: both;}
#boxshadow-fon {position: relative; width: 100%; align:center; background: #fff; margin:0; padding: 20px 0;}
#boxshadow {width: 600px; background: rgb(158,59,14); box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
position: relative; height:200px;  margin: 20px auto;}

#top {text-align:left; background: #46afda;}
h1 {width: 400px; height:auto; float:left; margin: 10px; padding:0; font-size: 24px; color:#10235d;}
#logo {width: 300px; height:60px; float:left; position: relative; display:inline-block; margin: 10px 10px; border-radius: 8px;}
#top img {margin: 6px 0 0 10px;}
input.b {font-size: 18px; color:#555;}
.b {margin: 0 20px; padding: 5px 20px;}
.comp {font: bold 32px Arial;}
#color-picker {left: 0px; top: 35px; position: absolute; display:none; z-index:1000;}
#main {
    width: 800px;
    margin: 40px auto 0 auto;
}

#res0 {position: relative; background-color: #eee; width: 600px; border-radius: 5px; margin: -20px auto 0 auto; padding: 10px 0; text-align:left;}
#res0 p {margin: 0 10px; font: bold 14px Arial;}
#res0 div.block {width: 280px; float: left; position: relative;}
#res {background-color: #fff; width: 90%; height: 70px; border-radius: 5px; margin: 0 10px; border:none;}
div.color {position: relative; width: 200px; margin: 15px 10px;}
#color-b,#color-s,#color-f {width: 60px; height: 40px; margin: 10px 0; background:#ccc; cursor: pointer; display:inline-block;}
#color-f {background:#fff;}
.bc {border: 2px solid #999;}
.self {border: 2px solid #46afda;}
div.shk0 {position: relative; width: 230px; height: 30px; margin: 15px 10px; font:400 14px Arial;}
div.shk {position: relative; width: 200px; height: 10px; margin: 5px 5px; background-color: #fff;}
div.sbegun {cursor:move; top: 0; left: 0; position: absolute; width: 6px; height:20px; transform: translate(-3px, -5px); border: 1px solid #333; background: linear-gradient(90deg, rgb(55, 55, 55) 0%, rgb(155, 155, 155) 100%); border-radius: 4px;}
div.info {z-index:500; top: -24px; left: 0; text-align:center; font-size: 13px; color:#888; position: absolute; width: 30px; height:15px; border-radius: 5px; transform: translate(-15px, 0px); background:#fff; box-shadow: 0px 0px 29px 2px rgba(50, 50, 50, 0.26);}

#mygradient {text-align:left; width: 800px; height: 80px; margin: 20px auto;}
#mygradient input.add {display:inline-block; font-size: 18px; padding: 6px 20px; margin: 15px 20px 0 20px; vertical-align:top;}
#mygradient div.my-g {display:inline-block; width: 80px; height: 80px; margin: 0 10px; cursor: pointer; border-radius: 6px;}
#mygradient div.my-g a.del {float:right;}

#theme-selector {
    float: left;
    clear: both;
    position: relative;
    left: 515px;
    top: -100px;
}
#theme-selector a {
    text-decoration: none;
    background-color: white;
    color: black;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 20px;
    padding: 5px;
}
#theme-selector a:hover {
    background-color: black;
    color: white;
}

#color-values {
    list-style-type: none;
    clear: both;
    position: relative;
}

#color-values li {display: inline-block; margin: 0 5px 0 0;}
#color-values label {
    display: inline-block;
    width: 50px;
    font-size: 14px;
}
#color-values span {
    display: inline-block;
    border: 1px solid gray;
    padding: 4px;
    font-size: 12px;
    width: 100px;
    margin-bottom: 4px;
    margin-left: -5px;
}
#color-values span:hover {
    background-color: white;
}
.clear {
    height: 1px;
    clear: both;
}
#bottom {position: relative; margin: 20px; padding: 20px; border-top: 1px solid #ccc;}