﻿


a {
    outline: none;
}

    a img {
        outline: none;
    }

img {
    border: 0;
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menuwrapper {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

[dir="rtl"] #menuwrapper {
    right: 0;
    left: auto;
}

#contentwrapper {
    position: fixed;
    left: 65px;
    right: auto;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

[dir="rtl"] #contentwrapper {
    right: 65px;
    left: auto;
}

#wrapperBoQ {
    position: fixed;
    left: 65px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #444444;
    padding: 20px;
}

[dir="rtl"] #wrapperBoQ {
    right: 65px;
    left: 0;
}

#contentfull {
    position: fixed;
    left: 65px;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
    padding: 0;
}

[dir="rtl"] #contentfull {
    float: left;
    right: 65px;
    left: 0;
}

#contentleft {
    height: 100%;
    width: 320px;
    position: relative;
    float: left;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

[dir="rtl"] #contentleft {
    float: right;
}

#contentright {
    /*left: 385px;*/
    position: fixed;
    float: left;
    left: 385px;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
    padding: 0;
}

[dir="rtl"] #contentright {
    float: right;
    right: 385px;
    left: 0;
}

#sidemenu {
    background: #272727;
    width: 65px;
    height: 100%;
}

[dir="rtl"] #sidemenu {
    float: right;
    right: 0;
    left: auto;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li {
    background-color: #272727;
    width: 65px;
    cursor: pointer;
    text-align: center;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover {
    /*position:relative;*/
}

/* We apply the link style */
#menuwrapper ul li a {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
}

#menuwrapper ul li a img {
    width: 21px;
    height: 21px;
}

#menuwrapper ul li a.selected {
   color: #ddd;
}


#menuwrapper ul li ul li {
    color: #fff;
    background: transparent;
    padding: 15px;
    text-align: center;
    display: table-cell;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */

#menuwrapper ul li ul {
    z-index: 1000;
    left: 65px;
    top: 0px;
    position: absolute;
    display: block;
    visibility: hidden;
    color: #fff;
    width: 320px;
    height: 100%;
    background-color: #444444;
    transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
}

[dir="rtl"] #menuwrapper ul li ul {
    left: 0;
    right: 65px;
}

.show {
    visibility: visible !Important;
    display: block !important;
}

.hide {
    display: none !important;
    visibility: hidden !Important;
}

.rotate {
    width: 100%;
    clear: both;
    position: absolute;
    white-space: nowrap;
    left: 0px;
    bottom: 70px;
    color: #777777;
    font-size: 15px;
    font-weight: normal;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

[dir="rtl"] .rotate {
    bottom: 10%;
}
    /* ========================================== Color Drop Down ================================*/


    .selectColor {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0 !important; /*REMOVES BORDER*/
    background-image: url(../images/Calc_Dropdown_Arrow.png);
    background-size: 22px 15px;
    background-repeat: no-repeat;
    background-position: 180px;
    background-color: #5ad3f0;
    color: white;
    /*text-align: center;*/
    margin-top: 20px;
    padding-left: 30px;
    padding-left: 0px;
    margin-left: 15px;
    margin-left: 58px;
    width: 220px;
    height: 45px;
    font-size: 16px;
    vertical-align: middle;
    border: none;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

    .selectColor > span {
        width: 220px;
        display: block;
        text-align: left;
        padding-left: 30px;
        line-height: 45px;
        -webkit-user-select: none; /* webkit (safari, chrome) browsers */
        -moz-user-select: none; /* mozilla browsers */
        -khtml-user-select: none; /* webkit (konqueror) browsers */
        -ms-user-select: none; /* IE10+ */
    }
        .selectColor > span > span {
            width: 15px!Important;
            height: 15px!Important;
            display: inline-block;
            margin-right: 10px;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }
            .selectColor > span > span.empty {
                display: none!Important;
            }

    .selectColor ul {
        /*padding-top: 25px;*/
        position:absolute;
        width: 220px;
        display: none;
        border: 1px solid #a1a1a1;
        border-left: 2px solid #000000;
    }
        .selectColor ul li {
            z-index: 50000000;
            list-style: none;
            width: 100%;
            text-align: left;
            padding: 0;
            margin: 0;
            
            border: 0;
            background-color: #2392c0;
            line-height: 20px;
            cursor: pointer;
            white-space: pre;
            min-height: 1.2em;
        }
        .selectColor ul li.selected{
            background-color: #1e90ff!Important;
        }
            .selectColor ul li:hover {
                background-color: #1e90ff;
            }
            .selectColor ul li span {
                margin-left: 20px!Important;
                width: 15px!Important;
                height: 15px!Important;
                display: inline-block;
                margin-right: 10px;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
            }

.dropdown dd, .dropdown dt, .dropdown ul {
    margin: 0px;
    padding: 0px;
}
.dropdown dd {
    position: relative;
}
.dropdown a, .dropdown a:visited {
    color: #816c5b;
    text-decoration: none;
    outline: none;
}
    .dropdown a:hover {
        color: #5d4617;
    }

.dropdown dt a:hover {
    color: #5d4617;
    border: 1px solid #d0c9af;
}
.dropdown dt a {
    background: #e4dfcb url(arrow.png) no-repeat scroll right center;
    display: block;
    padding-right: 20px;
    border: 1px solid #d4ca9a;
    width: 150px;
}
    .dropdown dt a span {
        cursor: pointer;
        display: block;
        padding: 5px;
    }
.dropdown dd ul {
    background: #e4dfcb none repeat scroll 0 0;
    border: 1px solid #d4ca9a;
    color: #C5C0B0;
    display: none;
    left: 0px;
    padding: 5px 0px;
    position: absolute;
    top: 2px;
    width: auto;
    min-width: 170px;
    list-style: none;
}
.dropdown span.value {
    display: none;
}
.dropdown dd ul li a {
    padding: 5px;
    display: block;
}
    .dropdown dd ul li a:hover {
        background-color: #d0c9af;
    }
.dropdown img.flag {
    border: none;
    vertical-align: middle;
    margin-left: 10px;
}
