.clear{
    clear: both;
}
.left{
    float: left;
}
#sitelogo{
    background-image: url(../img/buttons.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 256px 256px;
    background-position: 0 0;
    height: 35px;
    margin: 7px 3px;
    width: 170px;
}
.canvas{
    display: block;
    margin: 53px auto 0px;
    padding: 0px;
    width: auto;
    height: auto;
    cursor: crosshair;
}
.nav > li{
    float: left;
}
.navbar-colors ul ul{
    width: 430px;
}
.navbar-colors ul.dropdown-menu li,
.navbar-colors ul ul li{
    float: left;
    max-width: 200px;
}

.navbar .clearfix{
    padding: 10px 10px;
}
.navbar .clearfix span.label{
    float: left;
}
.navbar .color-dropdown{
    height: 52px !important;
    margin: 0 10px !important;
    padding: 10px !important;
    width: 60px !important;
}
.navbar .color-dropdown .color-preview,
.navbar .btn span.icon,
.navbar .clearfix span.icon,
.navbar-toggle span.icon{
    display: block;
    float: left;
    width: 32px !important;
    height: 32px !important;
    margin: 0px !important;
    padding: 0px !important;
}
.navbar .btn.dropdown-toggle .icon{
    width: 22px !important;
}
.navbar .navbar-colors .navbar-btn{
    padding: 6px 0 6px 12px !important;
}
.navbar .navbar-colors .dropdown-toggle{
    padding: 6px 12px 6px 0 !important;
}
.navbar .btn .caret{
    padding: 7px 0 !important;
}
.btn:active, .btn.active {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.325) inset;
}
.navbar .inactive{
    opacity: 0.3;
}
.navbar .inactive a{
    cursor: default;
}
.navbar .colorSwitcher span.icon.label{
    border: 1px solid black;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: rgba(47, 82, 118, 0.5);
}
.listImage{
    width: 80px;
    display: block;
}


/*https://www.iconfinder.com/iconsets/windows-8-metro-style*/
/*https://www.iconfinder.com/iconsets/glaze*/
[class*=ico-]{
    width: 32px;
    height: 32px;
    background-image: url(../img/buttons.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 256px 256px;
}
.cur-pencil{    cursor: url(../img/pencil.png) 0 32,default;}
.cur-brush{     cursor: url(../img/brush.png) 4 30,default;}
.cur-brush2{    cursor: url(../img/brush2.png) 7 24,default;}
.cur-bucket{    cursor: url(../img/bucket.png) 0 24,default;}
.cur-eraser{    cursor: url(../img/eraser.png) 10 22,default;}
.cur-wait{      cursor: wait;}
.ico-pencil{    background-position: 0px -64px;}
.ico-brush{     background-position: -32px -64px;}
.ico-brush2{    background-position: -64px -64px;}
.ico-bucket{    background-position: -96px -64px;}
.ico-eraser{    background-position: -128px -64px;}
.ico-save{      background-position: 0px -128px;}
.ico-delete{    background-position: -32px -128px;}
.ico-undo{      background-position: -64px -128px;}
.ico-redo{      background-position: -96px -128px;}
.ico-open{      background-position: -128px -128px;}
.ico-palette{   background-position: -160px -128px;}
.ico-fullscreen{background-position: -192px -128px;}
.ico-smallscreen{background-position: -224px -128px;}
.ico-tools      {background-position: 0px -160px;}
.ico-operations {background-position: -32px -160px;}
.ico-colors     {background-position: -64px -160px;}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    [class*=ico-]{
        background-image: url(../img/buttons2x.png);
    }
    #sitelogo{
        background-image: url(../img/buttons2x.png);
    }
}