@charset "UTF-8";

/* CSS Document */
/* Christchurch Cleaning Supplies - Concilio 2014 */

hr{
border:none;
border-bottom:1px dashed #eeeeee;
margin:15px 0 15px 0}

h1{
font-size:2.3em;
font-weight:600;
color:#16407d;
line-height:1.2em;
margin:0 0 20px 0}

h2{
font-size:2em;
font-weight:400;
line-height:1.2em;
margin:10px 0 15px 0}

h3{
font-size:1.3em;
line-height:1.3em;
font-weight:400;
margin:10px 0 10px 0}

h4{
font-size:1.1em;
font-weight:400;
margin:10px 0 10px 0}

a{
color:#16407D;
text-decoration:none}

a:hover{
color:#16407D;
text-decoration:none}

p{
margin-bottom:10px}

ul{
padding:10px 0 10px 15px}

li{
padding:0}

ol{
padding:10px 0 10px 15px}

strong{
font-weight:600}

body{
font-size:0.9em;
font-weight:200;
line-height:1.5em;
color:#000000;
font-family:Helvetica, Verdana, Arial, sans-serif;
background:#f2f2f2}

*{
margin:0;
padding:0}

img{
border:0}

/* Main Container */
#wrapper{
width:990px;
height:100%;
padding:0;
margin:0 auto} 

#main_container{
width:990px;
height:100%;
float:left;
padding:0;
margin:0} 

#masthead{
width:990px;
height:156px;
margin:0;
padding:0;
float:left;
text-align:right}

.masthead_right{
float:right;
width:500px;
margin:30px 0 0 0;
padding:0;
text-align:right}

.masthead_right img{
float:right;
margin:10px 0 0 4px}

.masthead_right h2{
color:#16407d;
display:block;
float:right;
clear:right}

.logo{
float:left;
width:376px;
height:85px;
margin:35px 0 0 0;
padding:0}

/* Navigation Toggle */
#toggle{
display:none}

/* Navigation */
.navigation{
width:100%;
background:url(assets/nav-fade.gif) repeat-x bottom left;
height:74px;
padding:0;
margin:0;
float:left;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px; 
border-bottom:4px solid #1B4180}

.navigation ul{
width:990px;
margin:0;
padding:0;
float:left}

.navigation li{
float:left;
margin:0!important;
list-style:none;
position:relative}

.navigation li a{
display:block;
font-size:1.2em;
font-weight:200;
color:#000000;
text-decoration:none;
padding:30px 10px 24px 10px}

.navigation li a:hover{
text-decoration:underline;
color:#000000}

.navigation .selected a{
color:#ffffff;
font-weight:800;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px; 
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.navigation .selected a:hover{
color:#ffffff;
font-weight:800;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px; 
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

/* Mainarea */
#mainarea{
width:990px;
margin:0;
padding:0;
float:left;
background-color:#ffffff;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 5px 5px 5px 0px #cccccc;
-moz-box-shadow: 5px 5px 5px 0px #cccccc;
box-shadow: 5px 5px 5px 0px #cccccc}

/* Adarea */
#slideshow{
width:990px;
height:370px;
float:left;
margin:0;
padding:0}

/* Left Column's */
#left_column{
width:230px;
padding:30px;
margin:0;
float:left}

#left_column_2{
width:630px;
padding:30px;
margin:0;
float:left}

#left_column img, 
#right_column_2 img{
border:15px solid #f2f2f2}

/* Right Column's */
#right_column{
width:660px;
padding:30px 30px 30px 0;
margin:0;
float:right}

#right_column_2{
width:230px;
padding:30px;
margin:0;
float:right}

/* Full Column */
#full_column{
width:930px;
padding:30px;
margin:0;
float:left}

#footer{
width:990px;
margin:0;
float:left;
padding:0;
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px}

#footer img{
float:right;
margin:30px 30px 30px 0}

.footer_address{
width:260px;
margin:25px 0 0 40px;
padding:0;
color:#ffffff;
float:left}

.footer_address h3, .footer_navigation h3{
margin:0 0 5px 0}

/* Footer Navigation */
.footer_navigation{
width:150px;
margin:25px 0 0 0;
padding:0;
color:#ffffff;
float:left}

.footer_navigation ul{
width:150px;
margin:0;
padding:0}

.footer_navigation li{
list-style:none;
display:block;
margin:0;
padding:0}

.footer_navigation a{
text-decoration:none;
color:#ffffff;
margin:0;
padding:0}

.footer_navigation a:hover{
color:#ffffff;
text-decoration:underline}

.footer_navigation .selected a{
color:#ffffff;
font-weight:600;
text-decoration:none}

.footer_navigation .selected a:hover{
color:#ffffff;
font-weight:600;
text-decoration:none}

.copyright{
width:450px;
height:50px;
color:#000000;
font-size:0.85em;
margin:20px 0 0 0;
padding:0;
text-align:left;
float:left}

.copyright_right{
width:450px;
height:50px;
color:#000000;
font-size:0.85em;
margin:20px 0 0 0;
padding:0;
text-align:right;
float:right}

.copyright a, .copyright_right a{
color:#000000}

.copyright_right img{
float:right;
margin:1px 0 0 8px}

/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative}

.nivoSlider img {
position:absolute;
top:0px;
left:0px}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none}

/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%}

.nivo-box {
display:block;
position:absolute;
z-index:5}

/* Caption styles */
.nivo-caption {
position:absolute;
background:#cbdb2a;
color:#333333;
opacity:0.9; /* Overridden by captionOpacity setting */
width:200px;
height:85px;
top:0;
right:0;
margin:336px 125px 0 0;
z-index:89;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px}

.nivo-caption.right {
right: 0}

.nivo-caption h4{
color: #fff;
font-size: 1.6em;
letter-spacing: 2px}

.nivo-caption p {
padding:15px 15px;
line-height:1.3em;
margin:0;
font-size:22px}

.nivo-caption a.button{
text-shadow: -1px 0 1px #000}

.nivo-caption a {
display:inline !important}

.nivo-html-caption {
display:block}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:35%;
z-index:9;
cursor:pointer}

.nivo-prevNav {
left:0px}

.nivo-nextNav {
right:0px}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer}

.nivo-controlNav a.active {
font-weight:bold}

.nivo-controlNav {
position:absolute;
right:50px;
top:295px}

.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(assets/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left}

.nivo-controlNav a.active {
background-position:0 -22px}

.nivo-directionNav a {
display:block;
width:40px;
height:68px;
background:url(assets/arrows.png) no-repeat;
text-indent:-9999px;
border:0}

a.nivo-nextNav {
background-position:-40px 0;
right:-6px}

a.nivo-prevNav {
left:-6px}

.nivo-caption {
text-shadow:none}

.nivo-caption a { 
color:#ffffff;
text-decoration:underline}

/* Search Box */
input,select{
vertical-align: middle}

.search-form{
float:right;
width:240px;
height:20px;
margin:5px 30px 0 0;
position:relative;
padding:8px;
background:#ffffff;
-webkit-border-radius: 8px;
border-radius: 8px; 
border:1px solid #dde1e4}

.search-box{
overflow:hidden;
padding:0;
margin:-5px 0 0 0}

.search-form .submit {
float:right;
width:30px;
height:25px;
background:url(assets/mag-glass.png) no-repeat;
border:none;
text-indent:-9999px;
line-height:0;
padding:0;
margin:2px 0 0 15px;
cursor:pointer}

.search-form .text {
float:right;
border:0;
font-size:1.3em;
width:180px;
height:30px;
color:#000000;
outline:none;
padding:0;
margin:0}

/* ReCapture Box Fix */
#recaptcha_widget_div{
height:127px!important;
overflow:hidden}

.faq-question{
margin:0 0 15px 0;
background:#eeeeee;
padding:8px;
-webkit-border-radius:3px;
border-radius:3px}

/*-------------------     ADAPTIVE    -------------------*/

/* Screen 240px to 768px - Mobile Styles */
@media screen and (min-width:240px) and (max-width:768px){

body{
-webkit-text-size-adjust:100%;
background-image:none!important;
overflow-x:hidden}

img{
width:auto!important;
height:auto!important}

td img{
min-width:50%!important;
width:100%!important;
height:auto!important}

td {
font-size:70%!important;
line-height:auto!important}

/* Main Container */
#wrapper{
width:100%!important;
height:100%;
padding:0;
margin:0 auto} 

#main_container{
width:100%!important;
height:100%;
float:none!important;
padding:0;
margin:0} 

#masthead{
width:100%!important;
height:auto!important;
margin:0;
padding:20px 0 0 0!important;
float:none!important;
text-align:center!important}

.masthead_right{
float:none!important;
width:100%!important;
margin:0!important;
padding:0;
text-align:center!important}

.masthead_right img{
float:none!important;
margin:0!important}

.masthead_right h2{
color:#16407d;
display:block;
font-size:1.5em!important;
float:none!important;
clear:none!important}

.logo{
float:none!important;
width:100%!important;
height:80px!important;
margin:0 auto!important;
padding:0;
text-align:center!important}

.logo img{
max-width:280px!important}

/* Navigation Toggle */
#toggle{
display:inherit!important}

#toggle a{
width:95%!important;
padding:25px;
font-size:1.4em;
text-align:center;
color:#000000;
margin:0;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px; 
display:block}

#cat_680044_divs{
display:none}

/* Navigation */
.navigation{
width:100%!important;
background:url(assets/nav-fade.gif) repeat-x bottom left;
height:auto!important;
padding:0;
margin:0;
float:none!important;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px; 
border-bottom:4px solid #1B4180;
text-align:center!important}

.navigation ul{
width:100%!important;
margin:0;
padding:0;
float:none!important;
text-align:center!important}

.navigation li{
float:none!important;
margin:0!important;
list-style:none;
position:relative;
text-align:center!important}

.navigation li a{
display:block;
font-size:1.2em;
font-weight:200;
color:#000000;
text-decoration:none;
padding:10px!important}

.navigation li a:hover{
text-decoration:underline;
color:#000000}

.navigation .selected a{
color:#ffffff;
font-weight:800;
-webkit-border-radius: 8px;
border-radius: 8px; 
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.navigation .selected a:hover{
color:#ffffff;
font-weight:800;
-webkit-border-radius: 8px;
border-radius: 8px; 
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

/* Mainarea */
#mainarea{
width:95%!important;
margin:0 auto!important;
padding:0;
float:none!important;
background-color:#ffffff;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 5px 5px 5px 0px #cccccc;
-moz-box-shadow: 5px 5px 5px 0px #cccccc;
box-shadow: 5px 5px 5px 0px #cccccc}

/* Adarea */
#slideshow{
display:none!important}

/* Left Column's */
#left_column{
width:95%!important;
padding:20px 0 0 0!important;
margin:0 auto!important;
float:none!important;
text-align:center!important}

#left_column_2{
width:95%!important;
padding:20px 0 0 0!important;
margin:0 auto!important;
float:none!important}

#left_column img, 
#right_column_2 img{
border:15px solid #f2f2f2;
margin:0 auto!important}

/* Right Column's */
#right_column{
width:95%!important;
padding:20px 0 0 0!important;
margin:0 auto!important;
float:none!important}

#right_column_2{
width:95%!important;
padding:20px 0 0 0!important;
margin:0 auto!important;
float:none!important;
text-align:center!important}

/* Full Column */
#full_column{
width:97%!important;
padding:20px 0 0 0!important;
margin:0 auto!important;
float:none!important}

#footer{
width:100%!important;
margin:0;
float:none!important;
padding:20px 0 20px 0!important;
background: rgb(26,65,127); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(26,65,127,1) 0%, rgba(40,112,200,1) 50%, rgba(26,65,127,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(26,65,127,1)), color-stop(50%,rgba(40,112,200,1)), color-stop(100%,rgba(26,65,127,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(26,65,127,1) 0%,rgba(40,112,200,1) 50%,rgba(26,65,127,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a417f', endColorstr='#1a417f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
text-align:center!important}

#footer img{
float:none!important;
margin:20px 0 0 0!important}

.footer_address{
width:100%!important;
margin:0!important;
padding:0;
color:#ffffff;
float:none!important;
text-align:center!important}

.footer_address h3, .footer_navigation h3{
margin:0 0 5px 0}

/* Footer Navigation */
.footer_navigation{
width:100%!important;
margin:25px 0 0 0;
padding:0;
color:#ffffff;
float:none!important;
text-align:center!important}

.footer_navigation ul{
width:100%!important;
margin:0;
padding:0}

.footer_navigation li{
list-style:none;
display:block;
margin:0;
padding:0}

.footer_navigation a{
text-decoration:none;
color:#ffffff;
margin:0;
padding:0}

.footer_navigation a:hover{
color:#ffffff;
text-decoration:underline}

.footer_navigation .selected a{
color:#ffffff;
font-weight:600;
text-decoration:none}

.footer_navigation .selected a:hover{
color:#ffffff;
font-weight:600;
text-decoration:none}

.copyright{
width:100%!important;
height:50px;
color:#000000;
font-size:0.85em;
margin:20px 0 0 0;
padding:0;
text-align:center!important;
float:none!important}

.copyright_right{
width:100%!important;
height:50px;
color:#000000;
font-size:0.85em;
margin:20px 0 0 0;
padding:0;
text-align:center!important;
float:none!important}

.copyright a, .copyright_right a{
color:#000000}

.copyright_right img{
float:none!important;
margin:1px 0 0 8px}

/* The Nivo Slider styles */
.nivoSlider {
display:none!important}

/* Search Box */
.search-form{
display:none!important}

/* Lightbox Gallery */
#overlay, #lightbox{
width:100%;
height:100%}

#outerImageContainer, #ImageContainer{
width:300px!important;
height:300px!important}

#imageDataContainer, #imageDetails{
width:300px!important}

#bottomNav{
width:250px!important}

#lightbox img{
max-width:280px;
height:auto}

.contactform{
width:100%!important;
float:none!important}

.cat_listbox, .cat_textbox, .cat_dropdown{
width:270px!important}

/* ReCapture Box Fix */
#recaptcha_image img{
width:80%!important}

#recaptcha_widget_div{
width:280px!important;
overflow:hidden;
border-right:1px solid #A0A0A0}

.captchaimg img{
width:130px!important}

.faq-question{
margin:0 0 15px 0;
background:#eeeeee;
padding:8px;
-webkit-border-radius:3px;
border-radius:3px}

#map{
width:100%!important}

}