body {
    padding: 0;
    margin: 20px 10px;
    width: auto;
    font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    background-color: #ffffff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
p {
    margin: 0 0 3px;
}
h3 {
    margin: 0px;
}
ul, ol {
    padding: 0px;
}
img {
    /* Responsive images (ensure images don't scale beyond their parents) */

    max-width: 100%;
    /* Part 1: Set a maxium relative to the parent */

    width: auto\9;
    /* IE7-8 need help adjusting responsive images */

    height: auto;
    /* Part 2: Scale the height according to the width, otherwise you get stretching */

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

/* image on pop-up */
.product_details img {
    width: 95%;
}
.no_image {
    max-width: 75px;
}
a {
    color: #0088cc;
    text-decoration: none;
}
a:hover {
    color: #00334d;
    text-decoration: none;
}



.wrapper {
    position: relative;
}
.wrapperfooter {
    padding: 15px;
    position: relative;
}
.container {
    width: 940px;
    color: #ffffff;
    margin-right: auto;
    margin-left: auto;
    *zoom: 1;
}
.logo {
    display: block;
    margin-bottom: 15px;
}
.logo .logo-text {
    font-size: 35px;
    color: #6E6E6E;
    padding: 15px 0px 10px 0px;
    text-decoration: none;
}
.logo-text:first-letter {
    text-transform: uppercase;
}
.logo .logo-img {
    display: block;
    margin-bottom: 5px;
    font-size: 35px;
    padding: 15px 0px 5px 0px;
    color: #6E6E6E;
}
.clear {
    clear: both;
}
.spacer {
    height: 50px;
}
.pull-center {
    text-align: center !important;
}
.btn {
    background-image: none;
}
.footer {
    margin-top: 10px;
    margin-bottom: 20px;
}
.footer .wrapperfooter {
    background-color: transparent;
}
.footer .heading {
    color: #eeeeee;
}
.footer a {
    color: #ff7d23;
}
.footer a:hover {
    color: #f4b300;
}
.footer .footer-navigate {
    list-style: none;
    margin-left: 0;
}
.footer .footer-navigate li a {
    display: block;
    padding: 5px 0;
}
.footer-menu .wrapperfooter {
    background-color: transparent;
}
.footer-menu ul {
    list-style-type: none;
    margin: 0;
}
.footer-menu li {
    float: left;
    margin-left: 10px;
}
.footer-menu a {
    color: #ff7d23;
}
.footer-menu a:hover {
    color: #f4b300;
}
.footer-menu .copyright {
    font-size: 12px;
    margin-bottom: 0;
}
.footer-menu .row-fluid [class*="span"] {
    min-height: 20px;
}
.tags a {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 3px 5px 0;
    color: #ffffff;
    background-color: #e56c19;
}
.tags a:hover {
    background-color: #ae113d;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.tags a i {
    width: 16px;
    text-align: center;
    margin-right: 5px;
}
.hero-unit {
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.5;
    color:#5C5C5C;
}
.hero-unit h1 {
    font-size: 22px;
}
.mini {
    font-size:11px;
}
.linkorder {
    clear: both;
    white-space: nowrap;
    font-weight: 400;
    padding-top: 10px;
}
.linkorder a {
    clear: both;
    font-size: 11px;
    background: #a8a8a8;
    background-image: -webkit-linear-gradient(top, #a8a8a8, #666566);
    background-image: -moz-linear-gradient(top, #a8a8a8, #666566);
    background-image: -ms-linear-gradient(top, #a8a8a8, #666566);
    background-image: -o-linear-gradient(top, #a8a8a8, #666566);
    background-image: linear-gradient(to bottom, #a8a8a8, #666566);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 5px #ada8ad;
    -moz-box-shadow: 2px 2px 5px #ada8ad;
    box-shadow: 2px 2px 5px #ada8ad;
    font-family: Arial;
    color: #ffffff;
    padding: 7px 10px;
    border: solid #757575 1px;
    text-decoration: none;
    line-height: 35px;
}
.row-fluid {
    font-size:12px;
}
.pricetext {
    white-space:nowrap;
    text-align: right;
}
.pull-right {
    text-align: right;
}
.addline {
    padding-top:3px;
}
.page-nav {
    text-align: right;
    padding:5px;
    clear: both;
}
.media {
    color: #717171;
    margin:0px 0px 10px 0px;
}

.content_style, .content_style td {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #717171;
    font-size: 11px;
}
.more_style {
    color: #03039C;
    margin: 10px;
}
.more_style p {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: underline;
}
.more_style span {
    font-size: 12px;
    white-space: nowrap;
    padding-left: 25px;
    line-height: 35px;
}
.more_style a {
    background: #a8a8a8;
    background-image: -webkit-linear-gradient(top, #a8a8a8, #666566);
    background-image: -moz-linear-gradient(top, #a8a8a8, #666566);
    background-image: -ms-linear-gradient(top, #a8a8a8, #666566);
    background-image: -o-linear-gradient(top, #a8a8a8, #666566);
    background-image: linear-gradient(to bottom, #a8a8a8, #666566);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 5px #ada8ad;
    -moz-box-shadow: 2px 2px 5px #ada8ad;
    box-shadow: 2px 2px 5px #ada8ad;
    font-family: Arial;
    color: #FFFFFF;
    padding: 6px 8px;
    border: solid #757575 1px;
    text-decoration: none;
}

.subselected a {
    color: #ffffff;
    padding: 5px;
    background: #717171;
}
.product_area {
    margin:0px;
    padding:0px;
}
.product_image {
    margin:10px 0px 0px 2px;
    background-color:#ffffff;
}


.span12 {
    width: 940px;
}
.span11 {
    width: 860px;
}
.span10 {
    width: 780px;
}
.span9 {
    width: 700px;
}
.span8 {
    width: 620px;
}
.span7 {
    width: 540px;
}
.span6 {
    width: 460px;
}
.span5 {
    width: 380px;
}
.span4 {
    width: 300px;
}
.span3 {
    width: 220px;
}
.span2 {
    width: 140px;
}
.span1 {
    width: 60px;
}

/*
Back to top button
*/
#back-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
}
#back-top a {
    width: 80px;
    display: block;
    text-align: center;
    font: 9px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    text-align: left;
}
#back-top a:hover {
    color: #000;
}
/* arrow icon (span tag) */
#back-top span {
    width: 60px;
    height: 60px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(../images/up-arrow.png) no-repeat center center;
    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
    text-decoration: none;
}






.page-header {
    padding-bottom: 9px;
    margin: 20px 0 30px;
    border-bottom: 1px solid #eeeeee;
}
.thumbnails .inner-text {
    padding: 0 10px;
}
.thumbnails {
    margin-left: 0px;
    list-style: none;
}
.thumbnails:before,
.thumbnails:after {
    display: table;
    content: "";
    line-height: 0;
}
.thumbnails:after {
    clear: both;
}
.thumbnails li {
    margin-left: 0px;
    position: relative;
    overflow: hidden;
}
.thumbnails li:hover .sliding {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    filter: alpha(opacity = 70);
    opacity: 0.7;
}
.thumbnails li .sliding {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter: alpha(opacity = 0);
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.row-fluid .thumbnails {
    margin-left: 0;
}
.thumbnails > li {
    float: left;
    margin-bottom: 5px;
    margin-left: 5px;
    padding: 0px;
}
.thumbnail {
    position: relative;
    display: block;
    padding: 4px;
    line-height: 20px;
}
a.thumbnail:hover {
    border-color: #0088cc;
    -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
    -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
    box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.thumbnail .caption {
    padding: 9px;
    color: #555555;
}






.span12 {
    width: 940px;
}
.span11 {
    width: 860px;
}
.span10 {
    width: 780px;
}
.span9 {
    width: 700px;
}
.span8 {
    width: 620px;
}
.span7 {
    width: 540px;
}
.span6 {
    width: 460px;
}
.span5 {
    width: 380px;
}
.span4 {
    width: 300px;
}
.span3 {
    width: 220px;
}
.span2 {
    width: 140px;
}
.span1 {
    width: 60px;
}
.row-fluid {
    width: 100%;
    *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
    display: table;
    content: "";
    line-height: 0;
}
.row-fluid:after {
    clear: both;
}
.row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 2%;
    *margin-left: 2%;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
    margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
}
.row-fluid .span11 {
    width: 91.48936170212765%;
    *width: 91.43617021276594%;
}
.row-fluid .span10 {
    width: 82.97872340425532%;
    *width: 82.92553191489361%;
}
.row-fluid .span9 {
    width: 74.46808510638297%;
    *width: 74.41489361702126%;
}
.row-fluid .span8 {
    width: 65.95744680851064%;
    *width: 65.90425531914893%;
}
.row-fluid .span7 {
    width: 57.44680851063829%;
    *width: 57.39361702127659%;
}
.row-fluid .span6 {
    width: 48.93617021276595%;
    *width: 48.88297872340425%;
}
.row-fluid .span5 {
    width: 40.42553191489362%;
    *width: 40.37234042553192%;
}
.row-fluid .span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%;
}
.row-fluid .span3 {
    width: 23.404255319148934%;
    *width: 23.351063829787233%;
}
.row-fluid .span2 {
    width: 14.893617021276595%;
    *width: 14.840425531914894%;
}
.row-fluid .span1 {
    width: 6.382978723404255%;
    *width: 6.329787234042553%;
}

.product_details ul {
    padding: 0px;
    margin: 0px;
}
.product_details li {
    padding: 10px;
    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.overlay {
    display: none;
    position: fixed;
    left: 25%;
    top: 10%;
    border: 2px solid black;
    background-color: #ffffff;
    width: 50%;
    max-width: 550px;
    max-height: 600px;
    overflow: auto;
    z-index: 9999;
    padding: 10px 5px 10px 10px;
    border: 1px solid #717171;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.fade {
    display: none;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: black;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 8888;
}
#details_frame {
    overflow: auto;
}

#nav {
    width: 940px;
    font-weight: 400;
    position: relative;
    z-index: 100;
}
#nav > a {
    display: none;
}
#nav li {
    position: relative;
}
#nav li a {
    color: #fff;
    display: block;
}
#nav span:after {
    width: 0;
    height: 0;
    border: 5 solid transparent;
    border-bottom: none;
    border-top-color: #f00;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em;
}

/* first level */
#nav > ul {
    height: 40px;
    background: #717171;
    list-style-type: none;
    padding: 0px;
}
#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}
#nav > ul > li > a {
    height: 100%;
    font-size: 13px;
    line-height: 40px;
    text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
    border-right: 1px solid #888;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
    background: #113E49;
}


/* second level */
#nav li ul {
    display: none;
    background: #717171;
    position: absolute;
    top: 100%;
    list-style-type: none;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0px;
    padding: 0px;
}
#nav li:hover ul {
    display: block;
}
#nav li:not( :first-child ):hover ul {
    left: -1px;
}
#nav li ul a {
    border-bottom: 1px solid #BABABA;
    font-size: 13px;
    padding: 5px;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
    background: #154E5C;
}
.current-menu-item {
  background: #113E49;
}

/*MEDIA QUERY*/
@media (min-width: 768px) and (max-width: 999px) {
    #nav {
        width: 724px;
        position: static;
        margin: auto;
    }
    #nav li {
        z-index: 1000;
    }
    .overlay {
        left: 17%;
        top: 10%;
        width: 85%;
        max-width: 550px;
    }
    .product_image {
        max-width: 85%;
    }
    .container {
        width: 724px;
    }
    .span12 {
        width: 724px;
    }
    .span11 {
        width: 662px;
    }
    .span10 {
        width: 600px;
    }
    .span9 {
        width: 538px;
    }
    .span8 {
        width: 476px;
    }
    .span7 {
        width: 414px;
    }
    .span6 {
        width: 352px;
    }
    .span5 {
        width: 290px;
    }
    .span4 {
        width: 228px;
    }
    .span3 {
        width: 166px;
    }
    .span2 {
        width: 104px;
    }
    .span1 {
        width: 42px;
    }
}

@media (max-width: 767px) {
    body {
        padding: 0px 10px;
    }
    ul {
        margin: 0px;
    }
    .container {
        width: auto;
    }
    .product_image {
        max-width: 50%;
    }
    .row-fluid {
        width: 100%;
    }
    .row {
        margin-left: 0;
    }
    [class*="span"],
    .row-fluid [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .thumbnails > li {
        margin-bottom: 10px;
    }
    .container {
        width: 484px;
    }
    .overlay {
        left: 7%;
        top: 7%;
        width: 80%;
        margin: auto;
    }
    .product_details img {
        width: 15%;
    }
    #nav {
        width: 484px;
        position: static;
        margin: auto;
        margin-top: 14px;
    }
    #nav > a {
        width: 100%;
        height: 40px;
        text-align: left;
        text-indent: -9999px;
        background: #444;
        position: relative;
    }
    #nav > a:before,
    #nav > a:after {
        position: absolute;
        border: 2px solid #fff;
        top: 35%;
        left: 25%;
        right: 25%;
        content: '';
    }
    #nav > a:after {
        top: 60%;
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type {
        display: block;
    }


    /* first level */
    #nav > ul {
        height: auto;
        display: none;
        /* make it to be a layer above other section */
        /* position: absolute; */
        left: 0;
        right: 0;
        padding: 0px;
        margin: 0px;
    }
    #nav:target > ul {
        display: block;
    }
    #nav > ul > li {
        width: 100%;
        float: none;
        margin: 0px;
        padding: 0px;
        background: #8A8A8A;
    }
    #nav > ul > li > a {
        height: auto;
        text-align: left;
        padding: 0px 20px;
    }
    #nav > ul > li:not( :last-child ) > a {
        border-right: none;
        border-bottom: 1px solid #717171;
    }


    /* second level */
    #nav li ul {
        position: static;
        padding: 20;
        padding-top: 0;
    }
    #nav li ul li {
        background: #9C9A9A;
        padding: 0px 20px;
    }
    #nav li ul li a {
        padding: 5px 20px;
    }
    .more_style span {
        padding-left: 0px;
    }
}

@media (max-width: 500px) {
    #nav {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        margin: 14px 0px 0px;
    }
    .overlay {
        left: 7%;
        top: 4%;
        width: 82%;
        margin: auto;
    }
    #details_frame {
        overflow: auto;
    }
    .container {
        width: auto;
    }
    .product_image {
        max-width: 35%;
    }
}