#coloringPage {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0;
height: auto
}
.top {
background: #fd7405;
width: 100%;
height: 38px;
border: 1px solid #de6605;
box-shadow: 0 0 4px rgba(0, 0, 0, .11);
border-radius: 0 0 12px 12px;
margin: 0 auto;
text-align: center;
position: relative
}
.adsL {
width: 160px;
height: 600px;
position: absolute;
top: 0;
display: none;
overflow: hidden
}
.left {
position: absolute;
top: 190px;
width: 70px;
height: 250px;
text-align: center;
border: 1px solid #de6605;
box-shadow: 0 0 4px rgba(0, 0, 0, .11);
border-radius: 0 12px 12px 0;
background: #fd7405;
z-index: 1000
}
.right {
position: absolute;
width: 174px;
height: 500px;
top: 65px;
right: -152px;
position: absolute;
text-align: center;
z-index: 1000;
background-color: initial
}
.rightSelect {
margin-top: 125px;
width: 20px;
height: 250px;
background: #fd7405;
float: left;
border: 1px solid #de6605;
box-shadow: 0 0 4px rgba(0, 0, 0, .11);
border-radius: 12px 0 0 12px;
position: relative
}
.rightSelect span {
width: 20px;
height: 30px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/close.png);
float: left;
line-height: 252px;
margin-top: 111px
}
.rightSelect span.used {
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/open.png)
}
.rightSelect div {
position: absolute;
top: 50px;
padding: 5px;
right: 27px;
height: 20px;
width: 90px;
background-color: #ffc;
border: 1px solid #fd7405;
border-radius: 5px;
display: none
}
.rightSelect div i {
width: 10px;
height: 12px;
position: absolute;
top: 10px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/spinR.png)-26px -16px no-repeat;
right: -9px
}
.leftSelect span {
width: 20px;
height: 30px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/open.png);
float: left;
line-height: 252px;
margin-top: 111px
}
.leftSelect span.used {
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/close.png)
}
.leftSelect {
background-color: initial;
width: 20px;
height: 250px;
float: right;
position: relative
}
.leftSelect div {
position: absolute;
top: 50px;
padding: 5px;
left: 27px;
height: 20px;
width: 80px;
background-color: #ffc;
border: 1px solid #fd7405;
border-radius: 5px;
display: none
}
.leftSelect div i {
width: 10px;
height: 12px;
position: absolute;
top: 10px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/spinL.png)-25px -16px no-repeat;
left: -10px
}
.right,
.left {
cursor: pointer
}
#center {
width: -webkit-calc(100% - 44px);
width: -moz-calc(100% - 44px);
width: calc(100% - 44px);
height: 600px;
margin: 0 auto;
text-align: center;
overflow: hidden;
vertical-align: top;
z-index: 1;
margin-top: 20px
}
#canvasDiv {
margin: 0 auto;
border: 1px solid #333;
border-radius: 5px;
padding: 1px
}
#canvas {
width: 100%;
height: 100%
}
.top .icon {
width: 50px;
height: 50px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/control.png)no-repeat;
top: 8px;
position: absolute;
cursor: pointer
}
.top .icon img {
background-color: initial;
position: relative
}
.top .icon span {
background-color: #ffc;
border: 1px solid #fd7405;
padding: 5px;
border-radius: 5px;
position: absolute;
top: 53px;
left: 0;
max-width: 53px;
height: auto;
display: none
}
.top .icon span,
.top .icon a span {
color: #333
}
.top .icon span i {
width: 10px;
height: 12px;
position: absolute;
top: -11px;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/spin.png)-25px -16px no-repeat;
left: 15px
}
#help {
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/help.png)-20px 0 no-repeat;
position: absolute;
cursor: pointer;
left: 10px;
width: 20px;
height: 20px;
top: 10px
}
#home {
left: 80px
}
#tags {
left: 140px
}
#save a,
#print a,
#fullscreen a,
#home a,
#tags a {
background-color: initial
}
.selectIcon {
top: 1px !important
}
.hiddenn {}
.hiddenn1 {}
#colorTablet { height: 650px;
overflow-y: auto;
overflow-x: clip
}
#sizeTablet {
width: calc(100% - 8px);
height: auto;
border-radius: 20px
}
.itemColor {
width: 55px;
height: 120px;
transform: rotate(270deg);
margin-bottom: -90px;
position: relative;
left: 45px;
margin-right: 0;
margin-top:-30px;
}
.itemSize {
display: inline-block;
background-color: initial;
width: 100%;
margin-top: 10px;
margin-left: 15px;
}
.itemSize div {
width: 60px !important;
margin-top: 0 !important;
height: 60px !important;
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/bt.png);
background-size: 100%;
display: inline-block
}
.itemSize div i {
color: #fff;
font-size: 25px;
line-height: 60px;
margin-left: 20px;
}
}
#huge div {
width: 35px;
height: 35px;
margin-top: 2px;
border-radius: 18px;
}
#small div,
#least div {
width: 20px;
height: 20px;
margin-top: 13px;
}
#medium div {
width: 20px;
height: 20px;
margin-top: 9px;
}
#least div img {
width: 10px;
height: 80px;
transform: rotate(45deg);
}
.itemSize div img {
width: 20px;
height: 80px;
transform: rotate(45deg);
}
#large div {
width: 26px;
height: 26px;
margin-top: 6px;
}
.colorSelect {
left: 30px;
}
#getImg {}
.itemSize div.sizeSelect {
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/bt-orange.png);
background-size: 100%;
}
@media (min-width:1050px) {
.adsL {
display: block
}
}::-webkit-scrollbar {
height: 8px;
}
::-moz-scrollbar {
height: 8px;
}
@media screen and (min-width: 680px){
::-webkit-scrollbar {
height: 8px;
}
::-moz-scrollbar {
height: 8px;
}
}
@media screen and (min-width: 680px){
::-webkit-scrollbar-thumb {
border-width: 3px;
}
::-moz-scrollbar-thumb {
border-width: 3px;
}
}
::-webkit-scrollbar-thumb {
border-radius: 20px;
padding-bottom: 10px;
border: 5px solid transparent;
background-color: hsla(0,0%,100%,.3);
background-clip: padding-box;
}
::-moz-scrollbar-thumb {
border-radius: 20px;
padding-bottom: 10px;
border: 5px solid transparent;
background-color: hsla(0,0%,100%,.3);
background-clip: padding-box;
}
.clearboth{clear:both;}
#coloringPage{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
height: auto;
}
#center{float:left;
vertical-align: top;
background: #fff;
border-radius: 10px;
width: calc(70% - 20px);
height: 630px;
margin: 0 auto;
text-align: center;
overflow: hidden;
vertical-align: top;
z-index: 1;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
.leftBox{
float:left;
width: 15%;
vertical-align: top; height:650px;
overflow-y:auto;
}
.leftBox .icon{
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/bt.png);
background-size: 100%;
width:85px;
height:85px;
margin-bottom:-5px;
margin-left: 30px;
}
.leftBox .icon.iconSelect{
background: url(//freemandala.com/wp-content/themes/coloring/color/icon/bt.png);
background-size: 100%;
}
.leftBox .icon i{
color:#fff;
font-size:30px;
line-height:85px;
margin-left: 28px;
}
#canvasDiv{border:none;    margin: 0 auto;
border-radius: 5px;
padding: 1px;
display: contents;
}
.rightBox{
position: relative;
float:right; width: 10%;
height:650px
}
.colors{width:100%;margin-top:20px}
.rightSelect{width:100%;float:none;margin-top:10px;border:0;background:transparent;box-shadow:none}
#colorTablet{float: none;
width: 100%;
background: transparent;
border: none;}
@media only screen and (max-width: 600px) {
.leftBox .icon{width:45px;height:45px;}
.leftBox .icon i{font-size:20px;line-height:45px;}
}