﻿/* HTML Elements */

html, body {
    background-color:#f2f2f2;
    color: #333;
    font-size: .90em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a {
    color: #029dd1;
}

a:hover {
    text-decoration-thickness: 0.2em;
}

/* Containers */

#topLineContainer {
    background-color: #029dd1;
    width:100%;
}
#topLine {
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    padding-top:5px;
    padding-bottom:5px;
    line-height: 1.5em;
    position: relative;
}

    #topLine a {
        color: white;
    }

#header {
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    padding: 1em 0px;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

#divHeaderRightContainer {
    text-align:right;
}

@media only screen and (max-width: 700px) {
    #divHeaderRightContainer {
        text-align:center;
    }
}

.divOpeningBlock {
}

@media only screen and (max-width: 840px) {
    .divOpeningBlock {
        text-align:center;
    }
}

.divContactsBlock {
    text-align:right;
}

@media only screen and (max-width: 840px) {
    .divContactsBlock {
        text-align:center;
    }
}

#navigationContainer {
    background-color: #029dd1;
    width:100%;
}

#PageContainer {
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    padding: 1em 0px;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

#navigationBar {
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

#footerContainer {
    border-top: solid 8px #029dd1;
    background: #C0C0C0; /*  #f3f2f1  */
}

#footer {
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    padding: 1em 0px;
    color: #333;
    line-height: 1.5em;
    position: relative;
}

@media only screen and (max-width: 950px) {
    #header {
        width:96%;
    }
    #PageContainer {
        width:96%;
    }
    #navigationBar {
        width:96%;
    }
    #footer {
        width:96%;
    }
}

.basketContainer {
    float:right;
    margin-top:11px;
    height:60px;
    width:93px;
    background-image: url("../Assets/basket.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding-top:13px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
}

/* Page Containers */

#mainTitle {
    text-align:center;
}

#topSearchHolder {
    margin-top:20px;
    border: solid 2px #029dd1;
    background-color:white;
}

#imageHolder {
    border: solid 2px #029dd1;
    background-color:white;
    width:100%;
    height:350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Page Elements */
.topSearchBox {
    width:67%;
    padding:10px 10px 10px 10px;
    font-size:16px;
    border: none;
    border-color: transparent;
    outline:none;
}
.topSearchBox:focus {
    border: none;
    border-color: transparent;
}

@media only screen and (max-width: 1100px) {
    .topSearchBox {
        width: 65%;
    }
}

@media only screen and (max-width: 900px) {
    .topSearchBox {
        width: 55%;
    }
}

.productContainer {
    width:95%;
}
.productContainerImage {
    height:210px;
    background-color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.productImage {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}
.productWatermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

.productContainerTitle {
    padding-top:15px;
    padding-bottom:15px;
    padding-left:15px;
    padding-right:15px;
    background-color:#029dd1;
    text-align:center;
    min-height:39px;
}
.productContainerTitle a {
    color:white;
    text-decoration:none;
}

.productContainerPrice {
    text-align:center;
    font-weight:bold;
    background-color:white;
    padding-bottom:10px;
}

.productContainerOrder {
    text-align:center;
    font-weight:bold;
    background-color:white;
    margin-bottom:10px;
}
.productContainerOrderTexBox {
    width:12%;
    padding:6px;
    font-size:13px;
    text-align:center;
}

.productContainerListView {
    width:95%;
}

.productContainerListViewrOrderTexBox {
    width:20%;
    padding:6px;
    font-size:13px;
    text-align:center;
}

.categoryContainerImage {
    height:210px;
    background-color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:15px;
}


.pricingButtonContainer {
}

@media only screen and (max-width: 900px) {
    .pricingButtonContainer {
        text-align:center;
    }
}

.productAddToBasketContainer {
    background-color:white;
    border-color:#029dd1;
    border-style:solid;
    border-width:1px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding:20px 15px 20px 15px;
    margin-top:0px;
    margin-bottom:15px;
}

.productAddToBasketContainer input[type=text] {
        padding:6px;
        font-size:13px;
        margin-right:15px;
        width: 10%;
        text-align:center;
    }
    .productAddToBasketContainer span {
        font-weight:bold;
        font-size:1.2em;
        margin-right:20px;
    }

.addrLineHeader {
    font-weight:bold;
    font-size:13px;
}
.addrTextBox {
    width:95%;
    padding:5px 10px 5px 10px;
    font-size:13px;
    margin-bottom:5px;
}
.addrDropDown {
    width:98%;
    padding:5px 10px 5px 10px;
    font-size:13px;
    margin-bottom:5px;
}

/* Generic Styles */
h1 {
    line-height:28px;
}

.blockMargin {
    margin-top:0px !important;
    margin-bottom:0px !important;
}

.bold {
    font-weight:bold;
}

.italics {
    font-style:italic;
}

.alignCenter {
    text-align:center;
}

.alignRight {
    text-align:right;
}

.noMarginTop {
    margin-top: 0px !important;
}

.marginLeft {
    margin-left:15px;
}

.paddingLeft {
    padding-left:15px;
}

.smallPaddingTop {
    padding-top:1px;
}

.largePaddingTop {
    padding-top:15px;
}

.favouritesBlockContainer {
    padding-top:15px;
    text-align:center;
}

.marginTopTen {
    margin-top:10px;
}

.marginTopThirty {
    margin-top:30px;
}

.marginTopFifty {
    margin-top:50px;
}

.marginTopHundred {
    margin-top:100px;
}

.marginBottomTen {
    margin-bottom:10px;
}

.marginBottomThirty {
    margin-bottom:30px;
}

.marginBottomFifty {
    margin-top:50px;
}

.marginThirty {
    margin-top:30px;
    margin-bottom:30px;
}

.widthThreeFifty {
    width:350px;
}

.blackText {
    color:black;
}

.blackText a {
    color:black;
}

.whiteText {
    color:white;
}

.redText {
    color:red;
}

.pinkText {
    color:#ff0077;
}

.cyanText {
    color: #3fb0d9;
}

.greenText {
    color:#a7c949;
}
.zyxelGreenText {
    color:#3B9F00;
}
.sonicWallOrangeText {
    color:#F46B25 ;
}

.tealText {
    color:#2699c7;
}

.extraLineHeight {
    line-height: 30px;
}

p.subHeading {
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    margin-top: 23px;
    margin-bottom: 23px;
}

.greenBackground {
    background: #1BB71B;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1BB71B', endColorstr='#048604');
    background: -webkit-gradient(linear,left top,left bottom,from(#1BB71B),to(#048604));
    background: -moz-linear-gradient(top,#1BB71B,#048604);
}

.noWrapText {
    white-space: nowrap;
}

.h1subtitle {
    color:darkgray;
    font-weight:bold;
}

.imgAutoSize {
    max-width: 100%;
    max-height: 100%;
    /*display: block;
    margin-left: auto;
    margin-right: auto;*/
    pointer-events: none;
}

.mapIframe {
    width:100%;
    height:250px;
}

.pageTitleContainer {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:98.5%;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
    .pageTitleContainer h1 {
        margin:0px;
        padding:0px;
        font-weight:normal;
    }
    .pageTitleContainer h2 {
        margin:0px;
        padding:0px;
        font-weight:normal;
        padding-top:7px;
        font-size: 1.3em;
    }

@media only screen and (max-width: 950px) {
    .pageTitleContainer {
        width: 96%;
    }
}

.pageTitleContainerGreen {
    /*background-color:#029dd1;*/ 
    background: #a7c949;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a7c949', endColorstr='#5BB00D');
    background: -webkit-gradient(linear,left top,left bottom,from(#a7c949),to(#5BB00D));
    background: -moz-linear-gradient(top,#a7c949,#5BB00D);
    color:white;
    width:98.5%;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
    .pageTitleContainerGreen h1 {
        margin:0px;
        padding:0px;
        font-weight:normal;
    }
    .pageTitleContainerGreen h2 {
        margin:0px;
        padding:0px;
        font-weight:normal;
        padding-top:7px;
        font-size: 1.3em;
    }
    .pageTitleContainerGreen h3 {
        margin:0px;
        padding:0px;
        font-weight:normal;
        padding-top:7px;
        font-size: 1.3em;
        text-align:center;
    }

@media only screen and (max-width: 950px) {
    .pageTitleContainerGreen {
        width: 96%;
    }
}

.pageTitleSubContainer {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:98.5%;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top:40px
}
    .pageTitleSubContainer h2 {
        margin:0px;
        padding:0px;
        font-weight:normal;
    }

.orderTrackingSubContainer {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:95%;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top:15px
}
    .orderTrackingSubContainer h2 {
        margin:0px;
        padding:0px;
        font-weight:normal;
    }

.orderTrackingTextBox {
    width:92%;
    padding:5px 10px 5px 10px;
    font-size:13px;
    margin-bottom:5px;
}

.partnerUsContainer {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:96%;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
    .partnerUsContainer h2 {
        margin-top: 6px;
        margin-bottom: 4px;
        font-weight: unset;
        text-align: center;
    }

.partnerUsContentBlock {
    margin-bottom:25px;
}
    .partnerUsContentBlock p, ul, li {
        line-height: 25px;
    }
    .partnerUsContentBlock li {
        margin-bottom:3px;
    }

.partnerUsTextBox {
    width:95%;
    padding:5px 10px 5px 10px;
    font-size:13px;
    margin-bottom:5px;
}

.pageTitleContainerProduct {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:97.5%;
    margin-top:10px;
    padding:15px 0px 15px 15px;
    text-transform:capitalize;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
    .pageTitleContainerProduct h1 {
        margin:0px;
        padding:0px;
        font-weight:normal;
    }

@media only screen and (max-width: 950px) {
    .pageTitleContainerProduct {
        width: 96%;
    }
}

.cto_part{
	zoom:1;
	padding:1.3em;
	position:relative;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;
	background:#FCFCFC;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,0.1);
	box-shadow:0 1px 2px rgba(0,0,0,0.1);
	border:1px solid #D0D0D0;
    margin-top: 25px;
    margin-bottom: 35px;
}

.cto_part:before{
	content:'';
	display:block;
}

.cto_part:after{
	content:'';
	display:table;
	clear:both;
}

.cto_part .title{
	line-height:1.6em;
	margin:0;
	color:#333333;
	font-weight:auto;
	font-size:24px;
}

.cto_part .subtitle{
	line-height:1.25em;
	margin:0;
	color:#555555;
	font-weight:auto;
	font-size:15px;
}

.cto_part .cto_button{
	position:absolute;
	display:block;
	top:50%;
	right:2em;
	margin-top:-22px;
	font-size: 20px;
	letter-spacing:1px;
}

.cto_button-green a{display:inline-block;padding:10px 45px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#52740A;font-size:0.875em;font-family:inherit;font-weight:500;text-decoration:none;text-shadow:0 1px 0 #F0FFA6;text-align:center;-webkit-box-shadow:inset 0 1px 0 #D3F58B,0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #D3F58B,0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #D3F58B,0 1px 2px rgba(0,0,0,0.1);background:#b7d870;background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ADCE67),color-stop(1,#C1E279));background:-ms-linear-gradient(bottom,#ADCE67,#C1E279);background:-moz-linear-gradient(center bottom,#ADCE67 0%,#C1E279 100%);background:-o-linear-gradient(#C1E279,#ADCE67);border-top:solid 1px #90B14B;border-left:solid 1px #85A641;border-right:solid 1px #85A641;border-bottom:solid 1px #7A9B37}

.cto_button-green a:hover{background:#BCDD75;background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#B2D36C),color-stop(1,#C6E77E));background:-ms-linear-gradient(bottom,#B2D36C,#C6E77E);background:-moz-linear-gradient(center bottom,#B2D36C 0%,#C6E77E 100%);background:-o-linear-gradient(#C6E77E,#B2D36C);border-top:solid 1px #95B650;border-left:solid 1px #8AAB46;border-right:solid 1px #8AAB46;border-bottom:solid 1px #7FA03C}

.cto_button-green a:active{background:#B2D36B;background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#B8D970),color-stop(1,#ACCD66));background:-ms-linear-gradient(bottom,#B8D970,#ACCD66);background:-moz-linear-gradient(center bottom,#B8D970 0%,#ACCD66 100%);background:-o-linear-gradient(#ACCD66,#B8D970);border-top:solid 1px #8CAD47;border-left:solid 1px #81A23D;border-right:solid 1px #81A23D;border-bottom:solid 1px #769733;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding-top:11px;padding-bottom:9px}


.manufacturersSidePanelContainer {
    /*background-color:#029dd1;*/
    background: #029dd1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029dd1', endColorstr='#0071C5');
    background: -webkit-gradient(linear,left top,left bottom,from(#029dd1),to(#0071C5));
    background: -moz-linear-gradient(top,#029dd1,#0071C5);
    color:white;
    width:100%;
    padding:15px 0px 15px 0px;
    text-align:center;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
    .manufacturersSidePanelContainer h4 {
        display: block;
        font-size: 21px;
        margin:0px;
        padding:0px;
        font-weight:normal;
    }

.statContainerList {
    width:100%;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.statContainerList li {
    width:260px;
    height:150px;
    display:inline;
    float:left;
    margin-left:15px;
    margin-right:15px;
    margin-top:10px;
    margin-bottom:10px;
    border-style:solid;
    border-width:3px;
    border-color:#029dd1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.statContainerList li:hover {
    border-color:#408231;
    background-color:#f3f2f1;
}

.statContainerList li .statQty {
    margin-top:15px;
    width:100%;
    font-size:25px;
    text-align:center;
    font-weight:bold;
    height:30px;
}

.statContainerList li .statQty:hover {
    margin-top:15px;
    width:100%;
    font-size:27px;
    text-align:center;
    font-weight:bold;
}

.statContainerList li .statQty a {
    text-decoration:none;
    color:black;
}

.statContainerList li .statQty a:hover {
    text-decoration:underline;
}

.statContainerList li .statMeasure {
    margin-top:12px;
    width:100%;
    font-size:19px;
    text-align:center;
}

.statContainerList li .statMeasure:hover {
    font-size:20px;
}

.statContainerList li .statMeasure a {
    color:black;
    text-decoration:none;
}
.statContainerList li .statMeasure a:hover {
    text-decoration:underline;
}


/* breadcrumb */

.breadcrumb { 
	list-style: none; 
	overflow: hidden; 
	padding-left:0px;
    margin-top:15px !important;
    clear: both;
    width: 85%;
    max-width: 92.3em;
    margin: 0 auto;
    position: relative;
}

@media only screen and (max-width: 950px) {
    .breadcrumb {
        width: 96%;
    }
}

@media only screen and (max-width: 550px) {
    .breadcrumb {
        display:none;
    }
}

.breadcrumb li { 
	float: left; 
}
.breadcrumb li a {
	color: white;
	text-decoration: none; 
	padding: 5px 0 6px 50px;
	background: brown;                   /* fallback color */
	background: #029dd1;
	position: relative; 
	display: block;
	float: left;
}

.breadcrumb li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 30px solid #029dd1;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}

.breadcrumb li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;       
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 1px;
	left: 100%;
	z-index: 1; 
}

.breadcrumb li:first-child a {
	padding-left: 14px;
}
.breadcrumb li:nth-child(2) a       { background:        	#5DADE2; }
.breadcrumb li:nth-child(2) a:after { border-left-color:	#5DADE2; }
.breadcrumb li:nth-child(3) a       { background:        	#85C1E9; }
.breadcrumb li:nth-child(3) a:after { border-left-color: 	#85C1E9; }
.breadcrumb li:nth-child(4) a       { background:           	#5DADE2; }
.breadcrumb li:nth-child(4) a:after { border-left-color: 	#5DADE2; }
.breadcrumb li:nth-child(5) a       { background:       	   	#85C1E9; }
.breadcrumb li:nth-child(5) a:after { border-left-color: 	#85C1E9; }
.breadcrumb li:last-child a {
	background: transparent !important;
	color: black;
	pointer-events: none;
	cursor: default;
	font-weight:bold;
}

.breadcrumb li:last-child a:after { 
	border-left-color:#f2f2f2;	
}

.breadcrumb li a:hover { background: #3298c8; text-decoration:underline; }
.breadcrumb li a:hover:after { border-left-color: #3298c8 !important; }

/* Products Page */
#divQuickFinderContainer {
    background-color:white;
    border-color:#029dd1;
    border-style:solid;
    border-width:1px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding:20px 15px 20px 15px;
    margin-top:0px;
    margin-bottom:15px;
}
    #divQuickFinderContainer h3 {
        margin-top:0px;
        padding-top:0px;
    }

/* Categories */
#divCategoryContainer {
    background-color:white;
    border-color:#029dd1;
    border-style:solid;
    border-width:1px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding:20px 15px 20px 15px;
    margin-bottom:15px;
    width:96%;
}
    #divCategoryContainer h3 {
        margin-top:0px;
        padding-top:0px;
    }

@media only screen and (max-width: 950px) {
    #divCategoryContainer {
        width: unset;
    }
    #divCategoryContainer h3 {
        text-align:center;
    }
}

/* buttons */
.blueButton {
  background: #029dd1;
  background-image: -webkit-linear-gradient(top, #029dd1, #2980b9);
  background-image: -moz-linear-gradient(top, #029dd1, #2980b9);
  background-image: -ms-linear-gradient(top, #029dd1, #2980b9);
  background-image: -o-linear-gradient(top, #029dd1, #2980b9);
  background-image: linear-gradient(to bottom, #029dd1, #2980b9);
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  color: #ffffff;
  padding: 7px 20px 7px 20px;
  text-decoration: none;
}

.blueButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.blueBasketButton {
  background: #029dd1;
  background-image: -webkit-linear-gradient(top, #029dd1, #2980b9);
  background-image: -moz-linear-gradient(top, #029dd1, #2980b9);
  background-image: -ms-linear-gradient(top, #029dd1, #2980b9);
  background-image: -o-linear-gradient(top, #029dd1, #2980b9);
  background-image: linear-gradient(to bottom, #029dd1, #2980b9);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  color: #ffffff;
  padding: 7px 12px 7px 12px;
  text-decoration: none;
  margin-left:10px;
}

.blueBasketButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.SmallBlueButton {
  background: #029dd1;
  background-image: -webkit-linear-gradient(top, #029dd1, #2980b9);
  background-image: -moz-linear-gradient(top, #029dd1, #2980b9);
  background-image: -ms-linear-gradient(top, #029dd1, #2980b9);
  background-image: -o-linear-gradient(top, #029dd1, #2980b9);
  background-image: linear-gradient(to bottom, #029dd1, #2980b9);
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  color: #ffffff;
  padding: 3px 12px 3px 12px;
  text-decoration: none;
}

.SmallBlueButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.orangeButton {
  background: #f3930d;
  background-image: -webkit-linear-gradient(top, #f3930d, #f3930d);
  background-image: -moz-linear-gradient(top, #f3930d, #f3930d);
  background-image: -ms-linear-gradient(top, #f3930d, #f3930d);
  background-image: -o-linear-gradient(top, #f3930d, #f3930d);
  background-image: linear-gradient(to bottom, #f3930d, #f3930d);
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  color: #ffffff;
  padding: 7px 20px 7px 20px;
  text-decoration: none;
}

.orangeButton:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #f3930d, #f3930d);
  background-image: -moz-linear-gradient(top, #f3930d, #f3930d);
  background-image: -ms-linear-gradient(top, #f3930d, #f3930d);
  background-image: -o-linear-gradient(top, #f3930d, #f3930d);
  background-image: linear-gradient(to bottom, #f3930d, #f3930d);
  text-decoration: none;
}

.greenButton {
  background: #a7c949;
  background-image: -webkit-linear-gradient(top, #a7c949, #a7c949);
  background-image: -moz-linear-gradient(top, #a7c949, #a7c949);
  background-image: -ms-linear-gradient(top, #a7c949, #a7c949);
  background-image: -o-linear-gradient(top, #a7c949, #a7c949);
  background-image: linear-gradient(to bottom, #a7c949, #a7c949);
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  color: #ffffff;
  padding: 7px 20px 7px 20px;
  text-decoration: none;
}

.greenButton:hover {
  background: #a7c949;
  background-image: -webkit-linear-gradient(top, #a7c949, #a7c949);
  background-image: -moz-linear-gradient(top, #a7c949, #a7c949);
  background-image: -ms-linear-gradient(top, #a7c949, #a7c949);
  background-image: -o-linear-gradient(top, #a7c949, #a7c949);
  background-image: linear-gradient(to bottom, #a7c949, #a7c949);
  text-decoration: none;
}

.largeGreenButton {
  background: #a7c949;
  background-image: -webkit-linear-gradient(top, #a7c949, #a7c949);
  background-image: -moz-linear-gradient(top, #a7c949, #a7c949);
  background-image: -ms-linear-gradient(top, #a7c949, #a7c949);
  background-image: -o-linear-gradient(top, #a7c949, #a7c949);
  background-image: linear-gradient(to bottom, #a7c949, #a7c949);
  -webkit-border-radius: 18;
  -moz-border-radius: 18;
  border-radius: 18px;
  color: #ffffff;
  padding: 10px 25px 10px 25px;
  text-decoration: none;
  font-size:20px;
  font-weight:bold;
  margin-top:10px;
}

.largeGreenButton:hover {
  background: #a7c949;
  background-image: -webkit-linear-gradient(top, #a7c949, #a7c949);
  background-image: -moz-linear-gradient(top, #a7c949, #a7c949);
  background-image: -ms-linear-gradient(top, #a7c949, #a7c949);
  background-image: -o-linear-gradient(top, #a7c949, #a7c949);
  background-image: linear-gradient(to bottom, #a7c949, #a7c949);
  text-decoration: none;
}

.checkoutTable {
    margin-top:15px;
    margin-bottom:15px;
}
    
    .checkoutTable tr:hover {
        background-color:#5DADE2;
        color:white;
    }
    .checkoutTable a {
        color:black;
    }
    .checkoutTable tr a:hover {
        color:white;
    }
    .NoHover:hover {
        background-color:transparent !important;
        color:black !important;
    }
    .marginTopSeven {
        margin-top:7px;
    }


ul.orderHistory {
    padding-left:20px;
}
ul.orderHistory li {
    background: url(../Assets/green-arrow.png) left 6px no-repeat;
    padding: 2px 0;
    padding-left: 23px;
    list-style-type:none;
}

/* Address Book List */

ul.addressBookList {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
}
ul.addressBookList li {
    list-style-type: none;
    margin-left:0px;
    margin-bottom:15px;
    padding:15px 10px 10px 10px;
    background-color:#85C1E9;
}
ul.addressBookList li:hover {
    background-color:#5DADE2;
}

span.addressBookListCompany {
    font-weight:bold;
    font-size:14px;
    padding-bottom:5px;
    display:block;
}
span.addressBookAddress {
    width:87%;
    display:inline-block;
}
span.addressBookEdit {
    width:10%;
    text-align:center;
    display:inline-block;
    padding-bottom:8px;
}

/* Sales Orders Table */
table.ordersTable {
    margin-top:10px;
}

    table.ordersTable tr:hover {
        background-color:#5DADE2;
    }

    table.ordersTable tr:hover a {
        color:white;
    }

.centralSearchBoxContainer {
    margin-top:15px;
    margin-bottom:15px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

    .centralSearchBoxContainer input[type=text] {
        padding:6px;
        font-size:13px;
        margin-right:10px;
    }

.categoryManufacturerSelect {
    margin-left:0px;
    margin-right:5px;
    padding:6px;
    width:230px;
}

@media only screen and (max-width: 1150px) {
    .categoryManufacturerSelect {
        width: 200px;
    }
}

@media only screen and (max-width: 900px) {
    .categoryManufacturerSelect {
        width: 98%;
        margin-bottom: 13px;
        margin-left:5px;
    }
}

.homeAccreditionsTitle {
    text-align:center;
    font-weight:bold;
    font-size:2em;
}

/* Quick Finder */

.homeQuickFinderContainer {
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    width:73%;
    border-color: #029dd1;
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 10px 12px 12px 12px;
}
    .homeQuickFinderContainer h3 {
        font-size: 1.5em;
        padding-top: 5px;
    }

.quickFinderSelect {
    margin-left:5px;
    margin-right:5px;
    padding:6px;
    width:250px;
}

@media only screen and (max-width: 1150px) {
    .quickFinderSelect {
        width: 200px;
    }
}

.quickFindButtonHolder {
        float: right;
        margin-right: 7px;
        padding-top:2px;
    }

@media only screen and (max-width: 900px) {
    .homeQuickFinderContainer {
        width:85% !important;
    }

    .quickFinderSelect {
        width:98%;
        margin-bottom:13px;
    }

    .quickFindButtonHolder {
        width:100%;
        text-align:center;
    }
}

.homePageVideoIframe {
    width:100%;
    height:430px;
}

.newHomePageVideoIframe {
    width:75%;
    height:300px;
}

/* Manufacturer Side Bar */

ul.manufacturerSideBar {
    list-style:none;
    list-style-type:none;
    margin-left:0px;
    padding-left:0px;
    
}
    ul.manufacturerSideBar li {
        text-align:center;
        padding-top:2px;
        padding-bottom:4px;
    }
        ul.manufacturerSideBar li a:hover {
            background-color:#029dd1;
            color:white;
        }
        ul.manufacturerSideBar li:hover {
            background-color:#029dd1;
            color:white;
        }
        ul.manufacturerSideBar li:hover a {
            color:white;
        }

/*  Pages Counter  */

.pagesContainer {
    width:100%;
    text-align:center;
}

.pages ul {
    float: left;
    padding-left:0px !important;
    margin-bottom: 7px;
    margin-left: auto;
    margin-right: auto;
}

.pages ul li {
    border: 1px solid #DDD!important;
    float: left!important;
    list-style: none!important;
    margin: 0 2px!important;
    padding: 2px 4px 2px 4px !important;
    width: 15px;
    text-align: center;
    margin-top: 0!important;
}
    .pages ul li:first-child {
        width:50px !important;
        font-weight:bold;
        text-align:center;
    }
.currentPageCounter {
    font-weight:bold;
    text-decoration:none;
    color:#029dd1;
}
.currentPageCounter a {
    font-weight:bold;
    text-decoration:none;
    color:#029dd1;
}

/*   Login Container   */

.loginContainer {
    background-color:white;
    border-color:#029dd1;
    border-style:solid;
    border-width:1px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin-top:0px;
    margin-bottom:15px;
    padding: 20px 10px 10px 10px;
}
    .loginContainer h1 {
        text-align:center;
        margin-top:0px;
        margin-bottom: 10px;
    }
    .loginContainer h3 {
        text-align:center;
        margin-top:15px;
        margin-bottom: 10px;
    }
    .loginContainer p {
        font-weight:bold;
        margin-top:0px;
        text-align:center;
    }
    .loginContainer input[type=text] {
        width:80%;
        padding:6px;
        font-size:13px;
    }
    .loginContainer input[type=password] {
        width:80%;
        padding:6px;
        font-size:13px;
    }

/*  Green Ticks  */
ul.greenticks {
    height: auto;
    margin-bottom: 10px;
    padding-left:25px;
}
ul.greenticks li {
    list-style-type:none;
    height: auto;
    background: url(../Images/green-tick.png) left 2px no-repeat;
    margin: 12px 0 15px 0px;
    padding-left: 25px;
    font-family: arial;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    line-height: 21px;
}

/*  Red Crosses*/
ul.redcrosses {
    height: auto;
    margin-bottom: 35px;
    padding-left:25px;
}
ul.redcrosses li {
    list-style-type:none;
    height: auto;
    background: url(../Images/red-cross.png) left 5px no-repeat;
    margin: 15px 0 15px 0px;
    padding-left: 25px;
    font-family: arial;
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

.greenDot {
  height: 15px;
  width: 15px;
  background-color: #35F427;
  border-radius: 50%;
  display: inline-block;
}

.yellowDot {
  height: 15px;
  width: 15px;
  background-color: #FFFF00;
  border-radius: 50%;
  display: inline-block;
}

.redDot {
  height: 15px;
  width: 15px;
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
}

.greyDot {
  height: 15px;
  width: 15px;
  background-color: #B4B4B4;
  border-radius: 50%;
  display: inline-block;
}

.greenDotSmall {
  height: 11px;
  width: 11px;
  background-color: #35F427;
  border-radius: 50%;
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}

.yellowDotSmall {
  height: 11px;
  width: 11px;
  background-color: #FFFF00;
  border-radius: 50%;
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}

.orangeDotSmall {
  height: 11px;
  width: 11px;
  background-color: #FFA500;
  border-radius: 50%;
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}

.redDotSmall {
  height: 11px;
  width: 11px;
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}

.greyDotSmall {
  height: 11px;
  width: 11px;
  background-color: #B4B4B4;
  border-radius: 50%;
  display: inline-block;
  margin-left:5px;
  margin-right:5px;
}

.greenStockText {
    color: #35F427;
}
.yellowStockText {
    color: #FFA500;
}
.redStockText {
    color: #FF0000;
}

/*   Image Background */

.suziPerryGreenerSideBoxBackground {
    background-image: url("../Images/suzi_greener_side_box.png");
    height:700px;
    background-repeat: no-repeat;
    background-position:right 0px top;
}




/*    Lines    */
hr.hrGreenLine {
    border-color:#a7c949;
}