body { margin:0; padding:0; font-family:'Open Sans', sans-serif, Arial, Helvetica; color:#565d5d; }

img { border:none; }

.hide, .responsive, .mobile { display:none; }

.align-left { float:left; }
.align-right { float:right; }

input[type=submit], button { -webkit-appearance:none; }
input[type=button], button { -webkit-appearance:none; }
input { font-family:'Open Sans', sans-serif, Arial, Helvetica; color:#565d5d; }

h1, h2, h3, h4, h5 { padding:0; margin:0; font-weight:normal; line-height:normal; color:#565d5d; }

h1 { font-size:28px; border-bottom:1px solid #565d5d; padding:0 0 15px 0; margin:0 0 20px 0; text-transform:uppercase; }
h2 { font-size:28px; border-bottom:1px solid #565d5d; padding:0 0 15px 0; margin:0 0 20px 0; text-transform:uppercase; }
h3 { font-size:22px; margin:0 0 20px 0; }
h4 { font-size:22px; margin:0 0 20px 0; }
h5 { font-size:20px; margin:0 0 20px 0; }

    @media screen and (max-width:800px) {
        h1 { font-size:20px; padding:0 0 10px 0; margin:0 0 14px 0; }
        h2 { font-size:20px; padding:0 0 10px 0; margin:0 0 14px 0; }
        h3 { font-size:18px; margin:0 0 14px 0; }
        h4 { font-size:16px; margin:0 0 14px 0; }
        h5 { font-size:16px; margin:0 0 14px 0; }
    }

ul, ol, li { padding:0; margin:0; list-style:none; }

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

/* TEXT AREA is for system editable area wrapper */
.text-area ol, .text-area ul { padding:0 0 0 50px; color:#333; margin:0 0 20px 0; color:#333; font-size:18px; line-height:28px; }
.text-area ul li { list-style:disc; margin:0 0 5px 0; }
.text-area ol li { list-style-type: decimal; margin:0 0 5px 0; }
	
p, td { color:#565d5d; font-size:14px; line-height:24px; padding:0px; margin:0 0 20px 0; }

a { text-decoration:none; color:#565d5d; }
a:hover { text-decoration:underline; color:#877c8f; }

blockquote { margin:40px 0 40px 30px; padding:0 0 0 30px; border-left:5px solid #ccc; }
blockquote p { font-style:italic; }
blockquote p:last-child { padding:0; margin:0; }

/*System Styles
form[action$="edit"] .OTPS_Panel {min-height:10px;margin:0 0 5px 0;	} */

.wrapper { max-width:1400px; margin:0 auto; padding:0 20px; }
.wrapper-inner { max-width:1166px; margin:0 auto; padding:0 20px; }
.wrapper .wrapper-inner {  padding:0; }

    @media screen and (max-width:550px) {
        .wrapper { padding:0 10px; }
        .wrapper-inner { padding:0 10px; }
        .wrapper .wrapper-inner { padding:0; }
    }

#header { background:#839692; }
#header #logo { padding:56px 0; display:block; float:left; }
#header #header-nav ul { float:right; padding:15px 0 27px 0; }
#header #header-nav ul li { float:left; font-weight:bold; font-size:14px; line-height:11px; }
#header #header-nav ul li:nth-child(1n+2) { border-left: 2px solid #fff; padding-left: 15px; margin-left: 15px;}
#header #header-nav ul li a { color:#fff; }
#header #header-search { float:right; clear:right; }
#header #header-search #search-term { float:left; width:212px; height:35px; padding:0 0 0 11px; background:#fff; border:1px solid #dbdbd9; border-right:0; border-radius:3px 0 0 3px; display:block; color:#565d5d; }
#header #header-search #search-btn { float:left; width:37px; text-indent:-9999px; background:url(../images/icon-search.png) no-repeat center #6c777a; height:37px; border:none; border-radius:0 3px 3px 0; }
#header #header-account { height:48px; text-transform:uppercase; font-size:13px; line-height:48px; border-top:2px solid #fff; border-bottom:2px solid #fff; clear:both; color:#fff; }
#header #header-account a { color:#fff; font-weight:bold; margin:0 0 0 30px; }
#header #header-account #header-view-order { float:right; height:48px; line-height:48px; position:relative; }
#header #header-account #header-view-order a { position:absolute; top:-9px; bottom:-9px; right:0; background:#877c8f; border:2px solid #fff; line-height:46px; padding:9px 20px; display:block; width:200px; text-align:center; }
#header #menu { display:none; }

    @media screen and (max-width:1100px) {
        #header #header-account { height:auto; border-bottom:none; padding:0 0 10px 0; }
        #header #header-account #header-account-details { display:block; }
        #header #header-account #header-view-order { float:none; clear:both; display:block; height:auto; }
        #header #header-account #header-view-order a { position:static; margin:0; height:auto; padding:10px; width:auto; line-height:normal; }
    }
    @media screen and (max-width:800px) {
        #header #logo { padding:10px 0; }
        #header #logo img { height:18px; }
        #header #header-nav ul { padding:10px 0; }
        #header #header-nav ul li { height:18px; line-height:18px; font-size:13px; }
        #header #header-nav ul li:nth-child(1n+2) { border-left: 1px solid #fff; padding-left: 10px; margin-left: 10px;}
        #header #header-search { float:none; clear:both; }
        #header #header-search #search-term { width:68%; height:30px; padding:0 0 0 2%; background:#fff; border:none; }
        #header #header-search #search-btn { width:30%; height:30px; }
        #header #header-account { border:none; }
        #welcome-back { display:none; }
        #header #header-account #header-account-details a:first-child { clear:both; }
        #header #header-account #header-account-details a:last-child { margin:0 0 10px 0; }
        #header #header-account #header-account-details a { height:auto; line-height:normal; position:relative; display:block; margin:0 0 4px 0; padding:10px; background:rgba(0,0,0,0.1); }
        #header #menu { display:block; cursor:pointer; float:right; width:30px; height:30px; line-height:30px; margin:9px 0 0 0; background:url(../images/icon-menu.png) no-repeat center right; padding:0 40px 0 0; color:#fff; }
        #header #header-links { display:none; }
    }


#footer { background:#6c777a; padding:20px; color:#fff; text-align:center; }
#footer p { color:#fff; font-size:12px; margin:0 0 14px 0; }
#footer a { color:#fff; text-decoration:underline; }
#footer li { display:inline; padding:3px 6px; font-size:13px; }

#body { background:url(../images/pattern.png); }

.generic-page #body { background:#fff; }
.generic-page #body #page-aside { padding:50px 0; }
.generic-page #body #page-content { padding:50px 0; }

    @media screen and (max-width:800px) {
        .generic-page #body #page-aside { padding:10px 0; }
        .generic-page #body #page-content { padding:10px 0; }
    }
    @media screen and (max-width:1000px) {
        .generic-page #body #page-aside { padding:15px; margin:20px 0; border:1px solid #ccc; }
    }


#breadcrumb { background:url(../images/pattern.png) #faf8f3; padding:10px 0; }
#breadcrumb li {display: inline; font-size: 13px; margin:0 4px 0 0; }
#breadcrumb li a { text-decoration:underline; }
#breadcrumb li:before { content: "> "; }
#breadcrumb li:first-child:before { content: ""; }
#breadcrumb li:first-child { background:url(../images/breadcrumb-home.png) no-repeat left center; }
#breadcrumb li:first-child a { margin:0 0 0 24px; }

#header-description { width:600px; margin:0 auto; text-align:center; padding:50px 0; }
#header-description h1 { font-size:38px; color:#565d5d; text-transform:uppercase; border-bottom:5px solid #565d5d; display:inline-block; }
#header-description h1 strong { display:block; }
#header-description p { font-size:14px; line-height:26px; }
#header-description p:last-child { margin:0; }

    @media screen and (max-width:800px) {
        #header-description { width:auto; padding:20px 0; }
        #header-description h1 { font-size:20px; }
        #header-description p { font-size:14px; line-height:26px; }
    }

.button-grid { margin:0 0 30px 0; }
.button-grid ul li { width:25%; float:left; padding-bottom:25%; position:relative; }
.button-grid ul li a { display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:2px solid #fff; }
.button-grid ul li a img { width:100%; }
.button-grid ul li a .caption { font-size:16px; line-height:20px; text-transform:uppercase; position:absolute; bottom:20px; right:20px; width:130px; height:130px; border:2px solid #fff; border-radius:3px; background:rgba(0,0,0,0.3); color:#fff; display:inline-block; vertical-align:middle; }
.button-grid ul li a .caption strong { display:block; }
.button-grid ul li a:hover .caption { width:auto; height:auto; top:20px; left:20px; font-size:36px; line-height:40px; border:6px solid #fff; border-radius:0; }

    @media screen and (max-width:1000px) {
        .button-grid ul li { width:50%; float:left; padding-bottom:50%; position:relative; }
    }
    @media screen and (max-width:800px) {
        .button-grid ul li a .caption, .button-grid ul li a:hover .caption { font-size:14px; line-height:18px; }
    }
    @media screen and (max-width:550px) {
        .button-grid ul li a .caption, .button-grid ul li a:hover .caption { font-size:14px; line-height:18px; left:5px; top:5px; right:5px; bottom:5px; width:auto; height:auto; }
    }

.button-grid-sub { margin:0 0 30px 0; }
.button-grid-sub ul li { width:25%; float:left; padding-bottom:25%; position:relative; }
.button-grid-sub ul li a { display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:2px solid #fff; }
.button-grid-sub ul li a img { width:100%; }
.button-grid-sub ul li a .caption { font-size:14px; line-height:20px; text-transform:uppercase; position:absolute; bottom:20px; right:20px; width:100px; height:100px; border:2px solid #fff; border-radius:3px; background:rgba(0,0,0,0.3); color:#fff; display:inline-block; vertical-align:middle; }
.button-grid-sub ul li a .caption strong { display:block; }
.button-grid-sub ul li a:hover .caption { width:auto; height:auto; top:20px; left:20px; font-size:20px; line-height:40px; border:6px solid #fff; border-radius:0; }

    @media screen and (max-width:1000px) {
        .button-grid-sub ul li { width:50%; float:left; padding-bottom:50%; position:relative; }
    }
    @media screen and (max-width:800px) {
        .button-grid-sub ul li a .caption, .button-grid ul li a:hover .caption { font-size:14px; line-height:18px; }
    }
    @media screen and (max-width:550px) {
        .button-grid-sub ul li a .caption, .button-grid ul li a:hover .caption { font-size:14px; line-height:18px; left:5px; top:5px; right:5px; bottom:5px; width:auto; height:auto; }
    }

#header-description-photo { margin:0 auto; text-align:center; padding:0; position:relative; margin:0 0 50px 0; overflow:hidden; }
#header-description-photo .description { position:absolute; top:0; right:0; left:0; height:380px; display:inline-block; vertical-align:middle; }
#header-description-photo h1 { font-size:38px; color:#fff; text-transform:uppercase; border-bottom:5px solid #fff; display:inline-block; }
#header-description-photo h1 strong { display:block; }

    @media screen and (max-width:1000px) {
        #header-description-photo { margin:0 0 20px 0; }
    }
    @media screen and (max-width:800px) {
        #header-description-photo { height:160px; overflow:hidden; }
        #header-description-photo .description { height:180px; }
        #header-description-photo h1 { font-size:20px; }
        #header-description-photo img { width:200%; }
    }

.tbl-wrapper { display: table; height: 100%; width: 100%; }
.tbl-content { display:table-cell; text-align:center; vertical-align:middle; }

#page-aside { width:25%; float:left; }
#page-aside #aside-nav .active { font-weight:bold; }
#page-aside #aside-nav ul li { text-transform:uppercase; font-size:14px; }
#page-aside #aside-nav ul li a { padding:12px 0; display:inline-block; }
#page-aside #aside-nav ul li a:hover { text-decoration:none; }
#page-aside #aside-nav ul ul { margin:0 0 25px 30px; }
#page-aside #aside-nav ul ul li { text-transform:none; }
#page-aside #aside-nav ul ul ul { margin:0 0 0 30px; }
#page-aside #aside-nav ul ul ul li { font-weight:normal; }

    @media screen and (max-width:1000px) {
        #page-aside { width:auto; float:none; padding:15px; margin:20px 0; border:1px solid #ccc; }
    }

#page-content { float:right; width:70%; }

    @media screen and (max-width:1000px) {
        #page-content { float:none; width:auto; }
    }

.product { padding:20px; border:1px solid #e9e9e5; background:#fff; border-radius:3px; margin:0 0 10px 0; }
.product h4 { margin:0 0 20px 0; }
.product .photo { float:left; width:30%; margin:0 20px 0 0; padding:0 20px 0 0; border-right:1px solid #e9e9e5; height:180px; }
.product .photo img { margin:0 auto; display:block; max-height:140px; max-width:100%;}
.product .item-ref { font-size:12px; display:block; padding:10px 0 5px 0; }
.product .price { float:left; }
.product .price strong { font-size:30px; display:block; margin:25px 0 10px 0; }
.product .price small { font-size:16px; }
.product .qty { float:right; margin:20px 0 15px 0; }
.product .qty input { padding:5px 10px; border-radius:3px; background:#fff; border:1px solid #e9e9e5; width:50px; font-size:14px; }
.product .add-to-order { float:right; clear:right; }
.product .add-to-order input { padding:10px 20px; border-radius:3px; background:#877c8f; text-transform:uppercase; border:none; color:#fff; font-size:12px; cursor:pointer; }

    @media screen and (max-width:800px) {
        .product .price strong { font-size:18px; margin:15px 0 10px 0; }
        .product .item-ref { padding:0; }
        .product .price { float:none; }
        .product .qty { float:none; margin:0; }
        .product .add-to-order { float:none; margin:10px 0 0 0;}
    }

/* order checkout */

.order-next-prev { padding:20px; margin:0 0 30px 0; border:1px solid #e9e9e5; background:#fff; border-radius:3px;  }

#order .product-order { padding:20px 160px 20px 200px; border:1px solid #e9e9e5; background:#fff; border-radius:3px; margin:0 0 10px 0; position:relative; clear:both; }
#order .product-order .order-description { border-left:1px solid #e9e9e5; border-right:1px solid #e9e9e5; padding:0 30px; }
#order .product-order .thumbnail { float:left; margin:0 0 0 -180px; display:block; width:160px; }
#order .product-order .thumbnail img { width:160px; }
#order .product-order h4 { margin:0 0 0 0; text-transform:uppercase; }
#order .product-order .item-ref { font-size:12px; display:block; padding:10px 0 5px 0; }
#order .product-order .qty { margin:10px 0 0 0; }
#order .product-order .qty input[type="text"] { padding:5px 10px; margin:0 20px 0 0; border-radius:3px; background:#fff; border:1px solid #e9e9e5; width:50px; font-size:14px; }
#order .product-order .qty input[type="submit"] { padding:5px 5px; border-radius:3px; background:#877c8f; text-transform:uppercase; border:none; color:#fff; font-size:12px; cursor:pointer; }


#order .product-order .qty .remove-item { color:#6B0608; cursor:pointer; }
#order .product-order .price { position:absolute; top:20px; right:20px; font-size:26px; font-weight:bold; text-align:right; }
#order .product-order .price small { font-size:12px; display:block; text-align:right; }
#order .product-order .new-price { color:#801214; }
#order .order-price { font-size:18px; margin:20px 0; text-align:right; padding:0 20px 0 0; }
#order .order-price-total { font-size:24px; margin:20px 0; text-align:right; padding:0 20px 0 0; font-weight:bold; }

    @media screen and (max-width:800px) {
        #order .product-order { padding:15px; }
        #order .product-order .thumbnail { display:none; }
        #order .product-order .order-description { border:none; border-bottom:1px solid #e9e9e5; padding:0 0 10px 0; margin:0 0 10px 0; }
        #order .product-order .price { position:static; font-size:18px; float:none; text-align:left; }
        #order .order-price { font-size:16px; margin:10px 0; text-align:left; padding:0 0 0 0; }
        #order .order-price-total { font-size:20px; margin:10px 0; text-align:left; padding:0 0 0 0; }
    }

#order li.not-available { border:1px solid #801214; }
#order .not-available * { color:#ccc !important; }
#order .not-available .not-available { margin:0 0 10px 0; color:#801214 !important; font-weight:bold; }

#checkout .form { border:1px solid #e9e9e5; background:#fff; border-radius:3px; margin:0 0 30px 0; padding:20px; }
#checkout .align-left { float:left; width:48%; }
#checkout .align-right { float:right; width:48%; }

/* generic form */

.form label { display: block; font-size:15px; color:#565d5d; margin:0 0 15px 0; }
.form select { display: block; width: 100%; color: #565d5d; background: #fff; height:50px; border: 1px solid #dbdbd9; border-radius: 3px; font-size:14px; padding: 16px 12px; margin:0 0 15px 0; }
.form input[type=text] { display: block; width: 100%; color: #565d5d; background: #fff; border: 1px solid #dbdbd9; border-radius: 3px; font-size:14px; padding: 16px 12px; margin:0 0 15px 0; height:50px; box-sizing: border-box; }
.form input[type=password] { display: block; width: 100%; color: #565d5d; background: #fff; border: 1px solid #dbdbd9; border-radius: 3px; font-size:14px; padding: 16px 12px; margin:0 0 15px 0; height:50px; box-sizing: border-box; }

.form textarea { display: block; width: 100%; color: #565d5d; background: #fff; border: 1px solid #dbdbd9; border-radius: 3px; font-size:14px; padding: 16px 12px; margin:0 0 15px 0; min-height:150px; box-sizing: border-box; }
.form input[type=submit] { padding:20px 40px; border-radius:3px; background:#877c8f; text-transform:uppercase; border:none; color:#fff; font-size:12px; cursor:pointer; }
.form input[type=button] { padding:20px 40px; border-radius:3px; background:#877c8f; text-transform:uppercase; border:none; color:#fff; font-size:12px; cursor:pointer; }

.form-small label { display:inline; }
.form-small input[type=text] { display:inline; width:200px; height:40px; padding:0 10px; }
.form-small input[type=password] { display:inline; width:200px; height:40px; padding:0 10px; }
.form-small input[type=submit] { display:inline;  height:40px; line-height:40px; padding:0 20px; border:none; vertical-align: top; }
.form-small select { display:inline; width:120px; height:40px; padding:0 10px; }

.form-search input[type=text] { border-radius: 3px 0 0 3px; border-right:none; }
.form-search input[type=password] { border-radius: 3px 0 0 3px; border-right:none; }
.form-search input[type=submit] { width: 40px; text-indent: -9999px; margin-left:-5px; background: url(../images/icon-search.png) no-repeat center #6c777a; height: 40px; border: none; border-radius: 0 3px 3px 0; }
.form-search input[type=button] { width: 40px; text-indent: -9999px; margin-left:-5px; background: url(../images/icon-search.png) no-repeat center #6c777a; height: 40px; border: none; border-radius: 0 3px 3px 0; }

    @media screen and (max-width:800px) {
        .order-next-prev .align-left, .order-next-prev .align-right { width:100%; display:block; margin:5px 0; padding:10px 0 !important; clear:both; float:none;}
    }

/* login */

#login { background:#839692; }
#login #login-wrapper { width:400px; margin:100px auto; }
#login #login-wrapper img { margin:0 0 30px 0; }
#login #login-wrapper label { color:#fff; }

/* table */

table { width:100%; border:0; border-collapse:collapse; }
table th { padding:10px; text-align:left; background:#839692; color:#fff; border-right:1px solid #fff; font-size:12px; text-transform:uppercase; font-weight:normal; }
table td { padding:10px; border-bottom:1px solid #839692; border-right:1px solid #efefef; }
table td:last-child, table th:last-child { border-right:none; }

/* pager */

.pager{ font-size:14px; margin:0; padding:20px 0; border-top:1px solid #dbdbd9; }
.pager-footer { border-bottom:1px solid #dbdbd9; border-top:0; }
.pager .pager-number{ float:left; display:block; font-weight:normal}
.pager ul{ float:right; } .pager ul li {float:left; }
.pager ul li a{ color:#565d5d; display:block; padding:0 10px; }
.pager ul li a:not([href]) { font-weight:bold; }

/* flag drop down */

.dropdown-menu {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   padding: 5px;
   -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.03);
   -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.03);
   box-shadow: 3px 3px 0 rgba(12,12,12,0.03);
   margin-top: -1px;
}

.dropdown-menu li a {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   -moz-transition: all 0.2s ease-out 0s;
   -webkit-transition: all 0.2s ease-out 0s;
   transition: all 0.2s ease-out 0s;
}

.dropdown-menu > li > a {
   padding: 7px 10px;
   color: #666;
}

.dropdown-menu > li > a:hover {
    background-color: #e7e7e7;
    color: #333;
}