/* [ COPYRIGHT CONTEGRO - Intelligent Website Content Management ] */
/* [ http://www.contegro.com ] */
/* -----[ TEMPLATE ]-------------------------------------------------------------------------- */
/*
Change Class Selectors and ID Selectors to reflect your Design as required.
The aim of this file is create the 'Template' for your design.
Such as: backgrounds, colours, borders, margins, padding.
Alter the Property and Value to reflect your design as required.
--Layouts
The structure below is compliant with the current W3C standards.
The layout technique that is used is will allow for a liquid centre and fixed sides.
1. Layout 1 - 3 column layout
2. Layout 2 - 2 column layout (left column #cLS)
3. Layout 3 - 2 column layout (right column #cRS)
4. Layout 4 - 1 column layout */
/* -----[ Main structure CSS]--------------------------------------------------------------------- */
* { -moz-outline-style: none;
outline-syle: none;
outline-width: 0px;
outline-color: -moz-use-text-color;
margin: 0px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-font-smoothing: antialiased;
}
::selection {
background: #226688; /* WebKit/Blink Browsers */
color: #ffffff;
}
::-moz-selection {
background: #226688; /* Gecko Browsers */
color: #ffffff;
}
#mainWrapper img{
max-width: 100%;
display: block;
}
#mainWrapper .headerBannerWrapper img{
max-width:none;
display: block;
opacity:0;
}
.HeaderBanner #mainWrapper .headerBannerWrapper img{
opacity:1
}
#mainWrapper .BlogComment img{
display: initial;
}
.menuOpen{
/* overflow: hidden;*/
}
/* -----[ STRUCTURE]------------------------------------------------------------------------------ */
/* === [ Menu ] === */
.menuIconWrapper{
position: fixed;
top: 0;
left: 0;
z-index: 200;
}
.menuWrapper{
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0%;
position: fixed; /* Stay in place */
z-index: 11; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,67,90);
background-color: rgba(0,67,90, 0.9);
overflow-x: hidden; /* Disable horizontal scroll */
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.menuWrapper.isActive{
width: 100%;
padding: 0 0 0 200px;
}
.menuWrapper #Menu {
position: relative;
top: 210px; /* 25% from the top */
width: 100%; /* 100% width */
}
/* === [ wrappers to set width ] === */
#outerWrapper {
position: relative;
margin: 0px auto;
width: 100%;
overflow-x: hidden;
}
#mainWrapper:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#mainWrapper {
display: inline-block;
width: 100%;
height: auto;
}
/* Hides from IE Mac \*/
* html #mainWrapper {
height: 1%; }
#mainWrapper {
display: block;
padding: 0 0 0 110px;
}
/* End hide from IE-mac */
/* === [ header ] === */
#cHWrapper {
position: relative;
display: block;
clear: both;
z-index: 1000;
background: #ffffff; /* #00435a; */ /* Y-25686 */
height: 110px;
margin: 0 0 0 110px;
width: -moz-calc(100% - 110px);
width: -webkit-calc(100% - 110px);
width: -o-calc(100% - 110px);
width: calc(100% - 110px);
}
/* === [ header banner ] === */
#cB {
position: relative;
display: block;
clear: none;
width: 480px;
padding: 0px;
float: left;
}
/* === [ top ] === */
#cT {
position: relative;
display: block;
clear: none;
padding: 0px;
float: right;
text-align: right;
}
.memberLoggedin #cT .CustomCode{
display: none;
}
/* === [ Main Navigation ] === */
#cN {
position: fixed;
display: block;
top: 110px;
width: 110px;
background: #ffffff;
height: 100vh;
z-index: 10;
border-right: 1px solid #d9e3e6;
}
#cSearch {
position: fixed;
top: 110px;
left: -330px;
height: 110px;
width: 330px;
z-index: 4;
background: #d9e3e6;
padding: 35px 35px 0 5px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.searchOpen #cSearch {
left: 110px;
}
/* === [ Primary Container Wrapper ] === */
#cPCWrapper {
float: left;
width: 100%;
padding: 44px 0;
}
#cProductsWrapper{
background: #f2f2f2;
padding: 52px 0;
overflow-x:hidden
}
#cArticlesWrapper{
background: #80a1ac;
padding: 52px 0;
}
#filterWrapper{
background: rgba(255,255,255,0);
padding: 20px 0 20px 0;
position: absolute;
z-index: 2;
left: 110px;
width: -moz-calc(100% - 110px);
width: -webkit-calc(100% - 110px);
width: -o-calc(100% - 110px);
width: calc(100% - 110px);
-webkit-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
}
.DEV #filterWrapper{
background:none;
}
.scrolled-over-110 .DEV #filterWrapper {
position: fixed;
top: 0;
z-index: 3;
left: 110px;
width: -moz-calc(100% - 110px);
width: -webkit-calc(100% - 110px);
width: -o-calc(100% - 110px);
width: calc(100% - 110px);
box-shadow: 6px 0 60px #cacaca;
}
.memberLoggedin.scrolled-over-110.showFilter .DEV .product-list #section1Wrapper.section {
padding: 470px 0 11px 0;
}
.memberLoggedin.scrolled-over-110 .DEV .product-list #section1Wrapper.section {
padding: 230px 0 11px 0;
}
.DEV .FilterContainer .Filter{
opacity:0;
}
.filterLoaded .DEV .FilterContainer .Filter{
opacity:1;
}
.filterLoaded .DEV .FilterContainer .Filter:last-child{
margin:0
}
.DEV .FilterContainer:after{
content: url('/Templates/_images/filter_loading.gif');
width:20px;
height:20px;
position:absolute;
top:100px;
left:0;
right:0;
margin:0 auto;
opacity:1;
}
.filterLoaded .DEV .FilterContainer:after{
opacity:0;
}
.DEV #filterWrapper .Inner{
width: auto;
}
.DEV .FilterItemGroup {
width: auto;
float: none;
margin: 0;
min-height: 200px;
background: #00435a;
text-align: center;
}
.DEV .FilterContainer .Filter {
width: 148px;
/* float: left; */
padding: 0;
display: inline-block;
margin:20px 10px 0 0;
text-align: left;
}
.DEV .FilterContainer .Filter ul label {
font-size: 11px;
color: #00435a;
vertical-align: middle;
padding: 0px 0 0 12px;
cursor: pointer;
white-space: inherit;
}
.DEV .FilterContainer h4 {
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
}
.DEV #filterWrapper .Navigation {
width: 31%;
float: left;
padding: 0 15px 0 0;
margin: 0 0 0 19%;
}
.DEV #filterWrapper .Search {
width: 31%;
float: left;
padding: 0 0 0 15px;
margin: 0;
}
.DEV .FilterContainer {
position: relative;
/* background: #00435a; */
width: 650px;
margin: 0 auto;
padding: 20px 0 0 0px;
/* clear: both; */
/* max-height: 260px; */
/* min-height: 550px; */
}
.memberLoggedin #filterWrapper{
top: 145px;
}
#memberNavigationWrapper{
display: none;
background: #80a1ac;
padding: 8px 0 8px 0;
position: absolute;
z-index: 2;
left: 110px;
width: -moz-calc(100% - 110px);
width: -webkit-calc(100% - 110px);
width: -o-calc(100% - 110px);
width: calc(100% - 110px);
}
.memberLoggedin #memberNavigationWrapper{
display: block;
}
.scrolled-over-110 #filterWrapper{
position: fixed;
top: 0;
z-index: 2;
left: 110px;
background: #00435a;
box-shadow: 6px 0 60px #cacaca;
}
#filterWrapper .Navigation{
width:50%;
float: left;
padding: 0 15px 0 0;
}
#filterWrapper .Search{
width:50%;
float: left;
padding: 0 0 0 15px;
margin: 0;
}
/* === [ Primary Container ] === */
#cPC {
display: block;
}
#cPC .HTMLContent{
display: block;
padding: 0 50px;
margin: 30px 0;
}
.section.hide{
display: none;
}
.Inner{
width: 1000px;
margin:0 auto;
}
#filterWrapper .Inner{
width: 1140px;
}
.product-list #section1Wrapper .Inner{
width:1350px;
}
.home .Inner{
width:1000px;
}
#section1Wrapper.section{
padding: 42px 0 42px 0;
}
.memberLoggedin #section1Wrapper.section{
padding-top: 90px;
}
.product-list #section1Wrapper.section{
padding: 130px 0 11px 0;
}
.HeaderBanner .product-list #section1Wrapper.section{
padding: 42px 0 11px 0;
}
.ProductCategory .product-list #section1Wrapper.section{
padding: 150px 0 11px 0;
}
.memberLoggedin .product-list #section1Wrapper.section{
padding: 150px 0 11px 0;
}
.memberLoggedin.HeaderBanner .product-list #section1Wrapper.section{
padding: 42px 0 11px 0;
}
.memberLoggedin.HeaderBanner .ProductCategory .product-list #section1Wrapper.section{
padding: 200px 0 11px 0;
}
.section{
padding: 44px 0;
clear: both;
position: relative;
}
.section:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.section.lightgrey{
background: #f2f2f2
}
.section.lightblue{
background: #80a1ac;
color: #ffffff;
}
.section.greyblue{
background: #d9e3e6
}
.section.darkblue{
background: #d9e3e6
}
.Contact .section.lightgrey {
padding: 0;
}
.Contact .section.lightgrey .Inner{
width: 100%;
}
.Stockist #section1Wrapper{
background: #f2f2f2
}
.section.half .HTMLContent{
width:50%;
float: left;
}
.section.half div > div > div .HTMLContent:first-child {
padding: 0 14px 0 0;
}
.section.half div > div > div .HTMLContent:last-child {
padding: 0 0 0 14px;
}
.product-details #lHSproductHeader{
width:680px;
float: left;
}
.product-details #rHSproductHeader{
width:310px;
float: right;
}
.product-details #lHSproductDetails{
width: 690px;
float: left;
max-height: 430px;
}
.product-details #rHSproductDetails{
width:310px;
float: right;
background: #d9e3e6;
min-height: 430px;
}
.product-details #lHSproductDescription{
width:680px;
float: left;
padding: 0 30px 0 0;
}
.product-details #rHSproductDescription{
width:310px;
float: right;
}
.product-details #productHeaderWrapper{
padding: 44px 0 0 0;
}
.product-details #productDetailsWrapper{
padding: 0
}
.product-details #productDescriptionWrapper{
padding: 28px 0;
}
.LoginWrapper {
visibility: hidden; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 3; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
overflow: hidden;
}
.LoginWrapper .overlay{
background-color: rgb(0,67,90);
background-color: rgba(0,67,90, 0.9);
width: 100%;
height: 100%;
position: absolute;
z-index: 900;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.loginOpen .LoginWrapper .overlay{
opacity: 1;
}
body.loginOpen .LoginWrapper {
visibility: visible; /* Hidden by default */
}
.LoginWrapper .loginform{
margin: 120px auto; /* 15% from the top and centered */
padding: 0;
/* height: 600px; */
z-index: 1000;
position: relative;
width: 485px;
/* height: 100%; */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .25s ease;
transition: transform .25s ease;
}
.flip .LoginWrapper .loginform{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.CompPopupWrapper {
visibility: hidden; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 3; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
overflow: hidden;
}
.CompPopupWrapper .overlay{
background-color: rgb(0,67,90);
background-color: rgba(0,67,90, 0.9);
width: 100%;
height: 100%;
position: absolute;
z-index: 900;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.CompPopup .CompPopupWrapper .overlay{
opacity: 1;
}
body.CompPopup .CompPopupWrapper {
visibility: visible; /* Hidden by default */
}
.CompPopupWrapper .CompPopupInner{
margin: 120px auto; /* 15% from the top and centered */
padding: 0;
height: 600px;
z-index: 1000;
position: relative;
width: 485px;
/* height: 100%; */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .25s ease;
transition: transform .25s ease;
}
#CompPopup {
text-align:center;
}
#Login, #SignUp, #CompPopup {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 485px;
border-radius: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
padding: 40px;
}
#Login {
z-index: 2;
/* for firefox 31 */
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#SignUp {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 40px 43px;
}
.contegro_internetexplorer .LoginWrapper .loginform{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.contegro_internetexplorer #SignUp {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
display: none;
}
.flip .contegro_internetexplorer #Login {
display: none;
}
.flip .contegro_internetexplorer #SignUp {
display: block;
}
/* === [ Left Side Column ] === */
#cLS {
float: left;
margin-left: -100%;
width: 230px;
padding: 10px
}
/* === [ Right Side Column ] === */
#cRS {
float: right;
margin-left: -100%;
width: 230px;
padding: 10px
}
/* === [ footer ] === */
#cFWrapper{
background: #00435a;
color: #ffffff;
padding: 70px 0 30px 110px;
}
#cF {
position: relative;
width: 100%;
margin: 0px 0;
width: 660px;
float: left;
}
#cFContact{
float: right;
margin: 0 0 0 130px;
width: 200px;
}
/* === [ copyRight ] === */
#cC {
position: relative;
display: block;
clear: both;
padding: 70px 0 0 0;
font-size: 11px;
color: #80a1ac;
}
#cC a {
border-bottom: 1px #999999 dotted;
text-decoration: none;
}
#cC a:hover {
border-bottom: 1px #CCCCCC dotted;
}
/* -----[ ]------------------------------------------------------------------------------- */
.contegro_ie6 #cRS,
.contegro_ie7 #cRS {
margin-left: -250px;
}
/* -----[ Clearings ]-------------------------------------------------------------------------- */
.clearLeft,
.clear
{
height: 0;
font-size: 0;
line-height: 0;
}
.clearLeft {
clear: left;
}
.clear {
clear: both;
}
/* -----[ Browser Specific Classes ]----------------------------------------------------------- */
/*
Contegro will add several class names to the