.colorpicker{
    width:100%;
    display:table;
    margin:0 auto
}

.color-wrapper{
    position:relative;
    display:table;
    margin:20px auto 0;
}

input.call-picker{
    border:1px solid #aaa;
    float:left;
    text-transform:uppercase;
    outline:none;
    padding:8px;
    width:85px;
    font-size:13px;
    text-align:center;
    background:#fefefe;
    color:#757575;
    border-radius:4px !important;
    box-shadow:0 6px 1px -5px #666;
    display:inline;
    vertical-align:top
}

.color-picker{
    width:160px;
    background:#f3f3f3;
    height:140px;
    padding:5px;
    border:5px solid #fff;
    box-shadow:0 0 3px 1px #ddd;
    position:absolute;
    top:40px;
    left:2px;
    z-index:999;
}

.color-holder{
    background:#9f6;
    cursor:pointer;
    border:1px solid #3d8ec4;
    width:40px;
    height:36px;
    float:left;
    margin-left:5px;
}

.color-picker .color-item{
    cursor:pointer;
    width:16px;
    height:16px;
    list-style-type:none;
    float:left;
    margin:2px;
    border:1px solid #ddd;
}

.color-picker .color-item:hover{
    border:1px solid #666;
    -moz-opacity:.8;
    opacity:.8;
    filter:alpha(opacity=8);
}

@media (max-width:768px){
    .watermark textarea{
        margin:0 auto 0;
    }

    .color-wrapper{
        margin:0 auto 10px auto;
    }
}

@media (max-width:668px){
    .btn-group.saveformat{
        float:none;
        margin:10px auto;
        width:100%;
        display:table;
    }

    .btn-group > .btn:first-child,.saveas .saveformat button{
        width:100%;
    }

    .color-wrapper{
        display:block
    }

    input.call-picker{
        width:85%;
        text-align:left;
        padding-left:15px;
    }

    .color-holder{
        width:13%;
    }

    .filedrop{
        margin:30px auto 25px;
    }

    .convertbtn{
        margin-bottom:20px;
    }
}