html {
   
    margin: 0;
    padding: 0;
    height:100%;
}

body {
    background-color: #fff;
    font:normal 13px 'Open Sans';
    color: #333;
margin: 0;
    padding: 0;
}
header a{text-decoration: none;}
img{max-width:100%;}
header, footer, hgroup,
nav, section {
    display: block;
}
header a{color:#fff;}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
button.dropbtn { color: white; padding:0px;font:bold 14px 'Open sans'; border: none; background: none; margin: 0px; text-transform: capitalize!important; margin-top: 20px;}
button.dropbtn a{text-decoration: none;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none;position: absolute;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; background: #000;}
.dropdown-content a {color:#fff; text-decoration: none; display: block; padding:8px; font-size: 12px;}
.dropdown-content a:hover {background-color: #777}
.dropdown:hover .dropdown-content { display: block; text-align: left;}

.logo{ margin:0; padding:0px;}
.logo a{ display: inline-block; margin: 8px 0px 0 0;}
.content-wrapper { margin: 0 auto; max-width:1520px;width: 96%;}
.btn_row{ margin: 20px 0px;}
#body {clear: both;min-height: 600px; padding-bottom: 50px;}
.main-content { }
.main-content h2{color:#4d4d4d; margin: 20px 0px; padding:0px;font: 600 28px 'Open Sans'}


header{background: #000;border-top:solid 6px #de9e3c;color:#fff;}

footer {clear: both;background-color: #212121; color:#fff; text-align: center; padding: 10px 0px;}
nav{clear:both;width:100%; background: #4d4d4d;}
.home-banner{ position: relative; margin-top: 30px;}
.welcome_txt{position: absolute;top:126px;color:#fff;text-transform: uppercase;font:bold 35px 'Open Sans'; left:40px;}
.welcome_txt span{ background: #de9e3c;padding: 3px 10px;}
.sales_live{ background: url(../Images/tracking_ico.jpg) no-repeat left center; padding:10px 0px 10px 60px;font:600 25px 'Open Sans'; margin-top: 40px;}
.sales_live span{font-weight: normal;}
.map{ margin-top: 20px;}
.box{  width: 48%; float: left; margin-bottom: 12px;}
.box1{margin-left: 4%;} 
.box h2{font:600 16px 'Open Sans';text-align: left; margin:30px 0 10px 0;}
.box .float-left,.box .float-right{ width:32%; margin: 0 10px 0 0px}
.box .float-right{margin-right:0px;}
.box label{ display: inherit;font: normal 15px 'Open Sans'; float: left; margin-top: 13px; width: 70px;}
.box input[type=text]{width: 96%; height: 25px; line-height: 25px;margin: 0px;font-size: 13px; }
.box select{ width:100%; height: 37px;border: solid 1px #c5c4c4 !important; -webkit-appearance: none; -moz-appearance: none;background-image: url('../Images/select_arrow.jpg');background-position:right center; text-indent: 0.01px; text-overflow: "";background-color:#fff; background-repeat: no-repeat;color:#333;font-size: 13px; }
.box input[type=button]{width:100%; margin: 0px 0 0 10px;float: right; padding: 3px 10px!important;}
.box input[type=submit]{width:100%; margin: 0px 0 0 10px;float: right; padding: 3px 10px!important;}
.part_search{background: #efeeee ;padding: 3%;}
.price_update{ background: #efeeee;padding: 3%;}
.clear{clear:both;}
.avtar{ float:left; margin:5px 10px 0 0;}
/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}
/* Style the message*/

.message_bar{ background: #4d4d4d; padding: 10px;}
.message_bar ul{margin: 0px 10px;padding: 0px; list-style: none;}
.message_bar ul li{ display: inline-block; padding: 0px 30px;font-weight: 600;}
.message_bar ul li i{ margin-right:5px;font-size: 18px;font-weight: normal!important;}
.message_bar ul li img{ vertical-align: middle; margin:-3px 5px 0 0; }
.message_bar ul li i.plus{ font-size: 14px;}
.message_bar ul li a{ color:#d8d8d8;}

.msg_bdy{ background: #f4f4f4;padding-bottom:10px;}
.msg_left{ float: left; width: 12%; padding:10px;}
.msg_left_hd{ text-transform: uppercase; font-size: 15px;}
.msg_left ul{margin:10px 0px 10px 0px;}
.msg_left ul li{ margin: 5px 0px; font-size: 12px; display: block;}
.msg_left ul li img{ width:15px;margin:-2px 10px 0 0; vertical-align: middle;}
.msg_left ul li a{color:#4d4d4d; display: block; padding:5px 10px;}
.msg_left ul li a:hover{background:#fff;}
.msg_left ul li a span{ color:#de9e3c; margin-left: 10px;}
.msg_mid{ float: left; background: #fff;border:solid 1px #eeeeee; padding: 1px; width:30%;}
.msg_mid ul{margin: 0px; padding: 0px;list-style: none;}
.msg_mid ul li{border-bottom:solid 1px #d2d2d2; margin-bottom: 1px;border-left:solid 4px #de9e3c;padding:20px 10px; position:relative;}
.msg_mid ul li.grey{border-left:solid 4px #ababab; color:#ababab;}
.msg_mid ul li.grey .stock,.msg_mid ul li.grey h3,.msg_mid ul li.grey .date{color:#ababab;}
.msg_mid ul li:last-child{border-bottom:none;}
.msg_mid h3{ margin: 0px; padding: 0px;color:#4d4d4d; font: 600 16px 'Open Sans'; position: relative;}
.ch_bx{ float:left; width: 20px; margin:4px 10px 0 0;}
.stock{color:#de9e3c;font: 600 15px 'Open Sans'}
.list_cont{ float:left; width: 90%;}
.date{ position: absolute; right: 0px; top:0px;color:#de9e3c; font:600 12px 'Open Sans'} 
.msg_right{ float: left; width: 50%; padding:1% 2% 2% 2%;}
.msg_hd{color:#de9e3c;font:normal 24px 'Open Sans'; margin: 10px 0px;}
.msg_hd span{font-weight:700;}
.msg_cont{ background: #fff; padding: 20px; margin: 10px 0px; border:solid 1px #eeeeee; padding-bottom:40px; position: relative;}
.reply{background: #fff; padding:30px 20px; border:solid 1px #eeeeee; text-transform: uppercase;}
.mail-name{ font-size: 13px;color:#000; margin: 0 0 15px 0}
.mail-name a{color:#000; text-decoration:none;}
.mail_icons{ position: absolute;top:0px; right:0px;}
.mail_icons ul{ margin: 20px; padding: 0px; list-style: none;}
.mail_icons ul li{ display:inline-block; margin: 0px 10px;}
.mail_date{font-size: 11px;}
input[type="button"].white_btn,input[type="submit"].white_btn{background:#fff!important;border:solid 1px #de9e3c!important; color:#de9e3c!important; width:auto!important;font-size:12px; font-weight: normal;padding:3px 20px 3px 35px!important;}
input[type="button"].export{background:url(../images/export.jpg) no-repeat 10px 11px!important;}
input[type="button"].reset{background:url(../images/reset.jpg) no-repeat 10px 11px!important;}
input[type="submit"].reset{background:url(../images/reset.jpg) no-repeat 10px 11px!important;}
input[type="submit"].finalize{background:url(../images/finalize.jpg) no-repeat 10px 11px!important;}
.records{ padding: 15px 0px 0 0;}





/* login
----------------------------------------------------------*/
body.login{background-image: url(../images/login-bg.jpg); background-size: cover; background-position: center;}
img{ max-width: 100%;}
a{text-decoration: none;}
ul{list-style: none;margin: 0px; padding: 0px;}
.login_box{  position:absolute;left: 50%;top: 50%; width:26%;background: #fff;padding:20px 4%;transform: translate(-50%, -50%);  }
.login_logo{ margin:5px auto 15px auto; width:180px;}
.loginform{}
.loginform input[type=text],.loginform input[type=password]{ width: 92.8%;padding:8px 15px;font:normal 13px/28px 'Open Sans'; border:none; margin:15px 0px;}
input.user{ background: url(../images/user.png) #e4e4e4 no-repeat right center;}
input.pass{ background: url(../images/lock.png) #e4e4e4 no-repeat right center;}
.btn{ text-align: center;color:#fff; text-transform: uppercase; background: #de9e3c; width: 100%; border:none; padding: 12px;font:normal 15px/35px 'Open Sans'!important; margin: 15px 0px; cursor: pointer;}
.remember{ float: left; font-size: 15px; margin-top:5px;}
.forgot{ float: right; margin-top: 5px; }
.forgot a{color:#de9e3c; text-decoration: underline;}
.forgot a:hover{text-decoration: none;}
.forpass{ margin-right: 15px;}
.checkcontainer { display: block;position: relative;padding-left: 23px;margin-bottom: 12px;cursor: pointer;font-size: 13px;-webkit-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none;}

.checkcontainer input {position: absolute; opacity: 0;cursor: pointer;}
.checkmark {position: absolute;top: 0px; left: 0px; height:16px; width:16px;background-color: #eee;}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}


.checkcontainer input:checked ~ .checkmark {
  background-color: #a8a8a8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 5px;
  top: 1px;
  width: 4px;
  height:8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#login {display: block;margin: 10px 0 0 10px;float:right;}
#login ul{ margin-top: 10px;}
#login ul a{ text-decoration: none;font-weight:600; color:#de9e3c;}
.top-login{ width: 40%;}
#login a.username { background: none; margin: 0; padding: 0; font-weight:800; text-decoration: none;}
#logoutForm a{text-decoration: none;font-weight:800; color:#de9e3c;}
/*#login a.username:after{background:url(../Images/down_arrow.png) no-repeat right 14px;content:'.'; padding-right: 30px;}*/
 #login li { display: inline; list-style: none; padding: 0px 10px;}
#login li a{font-weight:600; color:#de9e3c;}
.login_ttl{ overflow: hidden;text-align: center; padding:10px 0px;font-size:16px; width:100%;}
.login_ttl:before,.login_ttl:after {background-color: #aeacac; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%;}
.login_ttl:before {right:2em; margin-left: -50%;}
.login_ttl:after {left: 2em; margin-right: -50%;}
.sociallogin{color:#fff; text-transform: uppercase; font:normal 16px/30px 'Open Sans'; margin: 15px 0px; padding: 8px 30px;}
.sociallogin i{ margin: 0px 50px 0px 20px; font-size: 22px;}
.fb_btn{ background:#3a579a; }
.fb_btn a,.google_btn a{ display: block;color:#fff;}
.google_btn{background: #dc4e41;}

nav ul {list-style: none;margin: 0px; padding: 0px;text-align: left; float: left;}
nav ul li {display: inline-block; padding: 0px 15px;}
nav ul li:first-child { padding-left: 0px;}
nav ul li a { display: block;  padding:12px 5px; text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #fff;
}


nav.stroke ul li a
{
  position: relative;
}
nav.stroke ul li a.active{background: url(../Images/nav_border.jpg) bottom repeat-x;}
nav.stroke ul li a:after
 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #de9e3c;
  height:4px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}

.msg_box{ float: right; margin-right: 10px; padding: 10px 0px;background: url(../Images/msg_ico.png) left center no-repeat; padding-left: 30px;position:relative;}
.msg_box span{position: absolute;

font-size: 10px;
background: #de9e3c;
border-radius: 20px;
text-align: center;
width: 20px;
height: 20px;
line-height: 20px;
left: -16px;
top: 2px;}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */

#loginForm { margin: 0 auto; max-width: 650px; width: 650px; background: #fff; position: relative;margin-top:40px; padding: 3%;border:solid 1px #f1f1f1;}
.login_logo{ margin:5px auto 8px auto; width:150px;}
#loginForm input[type=text],#loginForm input[type=password]{ width: 94.8%;padding:12px 15px;font:normal 16px/30px 'Open Sans'; border:none; margin:15px 0px; background:#e4e4e4}
#loginForm input[type="submit"]{ width: 100%; padding: 12px!important;font:normal 15px/30px 'Open Sans'; margin: 15px 0px; cursor: pointer;}
    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }



    #loginForm input[type="checkbox"],
   
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label { display: block;}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #c5c4c4;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 6px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

    input:focus, textarea:focus {
        border: 1px solid #de9e3c;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {background:#de9e3c;font:600 14px/30px 'Open Sans';color:#fff; letter-spacing: 0.5; padding: 5px 10px!important;border:none!important; text-transform: uppercase!important;cursor:pointer;
  
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}
.webgrid-header { background: #4d4d4d;color:#fff;}
.webgrid-header a{color:#fff;}
.webgrid-footer { background: #4d4d4d;color:#fff; text-align: center}
.webgrid-footer a{color:#fff; text-decoration: none; font-size: 12px; padding: 4px 10px; margin: 5px 2px; display: inline-block; background: #5d5d5d; border-radius: 2px;border:solid 1px #777;}
.btn { background-color: #4682CB;font-family: Tahoma; color: White; padding: 5px;}
.webgrid { border: 0px;border-collapse: collapse;}
.webgrid-alternating-row { height: 10px; border-bottom: 1px solid #d2d2d2;}
.webgrid-row-style {height: 10px;border-bottom: 1px solid #d2d2d2; }
.webgrid-selected-row {}
#checkableGrid{width: 100%;}
#checkableGrid td font{font-size: 13px;}
tfoot{ font-size: 12px;}
th { text-align: left;border: none 0px; padding:5px 10px; font-weight: normal;}
th a { display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #fff;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding:5px 10px;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}


/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }

        #login ul {
            margin: 5px 0;
            padding: 0;
        }

        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #login a:hover {
            color: #333;
        }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

    /* forms */
    input {
        width: 90%;
    }

    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }

        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }

    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }


    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }
}