/*
Theme Name: Damsgaard Plumbing
Theme URI: http://www.usablewebdesigns.com/
Description: This custom theme was created from scratch for Damsgaard PLumbing.
Author: Eddy Trampus, Usable Web Designs 
Version: 1.0
Tags: damsgaard plumbing, sechelt, gibsons, sunshine coast, british columbia
*/

/* NEW CSS below */

/*----pallette---------
logo red -- e41f26
h1 red ---- d11c29
*/

/* base rules */
body
{
  font-size: 100%;
  font-family: Tahoma, sans-serif;
  line-height: 1.4;
  color: #686653;
  margin: 0; /* gets rid of white space around background image */
}

.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}

.aligncenter {
  margin: 15px auto;
  text-align: center;
}

#secondary-content ul li.widget_sp_image {
  text-align: center;
}
#secondary-content ul li.widget_sp_image img.aligncenter {
  margin-top: 40px;
}


h1, div#secondary-content h2
{
  font-weight: 200; 
  letter-spacing: -1pt;
  font-size: 18pt;
  color: #d11c29;
  margin-top: 25px;
  margin-bottom: 25px;
}
div#secondary-content h2 {
  margin-top: 10px;
}

h2
{
  font-weight: 300; 
  letter-spacing: 1pt;
  font-size: 14pt;
  color: #807b69;
  margin-top: 40px;
  margin-bottom: 15px;
}
h2 a {
  color: #807b69;
  text-decoration: none;
}
h3, h4 {
  clear: both;
  font-size: 100%;
  color: #686653;
  margin-top: 20px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: normal;
  display: block;
  width: 100%;
  border-bottom: solid 1px #686653;
}

div#secondary-content h2
{
  margin-top: 25px;
  text-align: center;
}
div#secondary-content ul 
{
  list-style: none;
  margin: 0;
  padding: 0;
}

a img {
  border-width: 0;
}

img, a img{
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
}


a {
  text-decoration: underline;
  color: #634b33;
}

/***************************************************
 ****************** Styling of menu *******************/

#menu {
   clear: both;
   float: left;
   margin: 0;
   margin-bottom: 0px;
   padding: 0;
   height: 43px;
   width: 100%;
   z-index: 1000; /* This makes the dropdown menus appear above the page content below */
   position: relative;
   background-color: #ffffff;
}
#menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
   float: right;
   position: relative;
   right: 50%;
}
#menu ul li {
   margin: 0 0 0 1px;
   padding: 0;
   float: left;
   position: relative;
   left: 50%;
   line-height:  43px;
}
#menu ul li a {
   display: block;
   margin: 0;
   padding: 0 30px;
   font-size: 12pt;
   color: #d11c29;
   text-decoration: none;
}
#menu ul li.active a {
}
#menu ul li.current_page_item a, 
#menu ul li.current-menu-item a {
   color: #666666;
}
#menu ul li a:hover,
#menu ul li:hover a,
#menu ul li.hover a { /* This line is required for IE 6 and below */
   color: #666666;
}
/* Submenu items */
#menu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:32px;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width: 19em; /* width of the drop-down menus */
   background-color: #ffffff;
   border:1px solid #aaaaaa; /* sub menu item horizontal lines */
   z-index: 1001; /* This makes the dropdown menus appear above the page content below */
   margin: 0;
   padding: 0;
}
#menu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#menu ul ul li a,
#menu ul li.active li a,
#menu ul li:hover ul li a,
#menu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size: 13pt;
   color: #ffffff;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid #aaa; /* sub menu item horizontal lines */
   padding: 3px 15px;
}
#menu ul ul li a:hover,
#menu ul li.active ul li a:hover,
#menu ul li:hover ul li a:hover,
#menu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background: #ffffff; /* Sub menu items background colour */
   font-weight: normal;
   color: #e41f26;
}
/* Flip the last submenu so it stays within the page */
#menu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}
/* Make the sub menus appear on hover */
#menu ul li:hover ul,
#menu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}




/*------------------------End of Menu------------------------------*/





/* -----------------------------------
General Layout for all size devices
----------------------------------- */


#container { width: 100%; min-width: 320px; max-width: 960px; margin: 0 auto;}
#container-background {background-color: #ffffff;}
#logo-area { width: 100%; height: 187px; background-color: #ffffff;}
.tagline  { 
  font-size: 26pt; 
  color: #a39d86; 
  margin-bottom: 0px; 
  margin-top:10px; 
  padding-right: 30px;}   /* added padding right to prevent horizontal scrollbar*/

#banner-image
{
	max-width: 100%;
	vertical-align: middle;
	border: 0;
        padding-bottom: 40px;
	background-size: cover;
	background-position: center;
	position: relative;
}
#banner-image img {	max-width: 100%; height: 100%}

.transparent-bar {width: 100%; color: #ffffff; line-height: 110%; text-align: center; background-image: url(images/transparent-bar.png); position:absolute; bottom:0;}
#slider-nav-buttons {width: 100%; text-align: center; margin: 10px 0;}

#main-content {padding-right: 24px; padding-left: 32px; margin-bottom: 40px;}

#secondary-content {margin-bottom: 40px;}
#secondary-content .widget_media_image img {padding: 2em 0; }
.sidebar_image { margin-top: 40px; margin-bottom: 20px;}
div.testimonial {font-size: 18pt;}
#testimonials {clear: both; display: block; }

/*cross browser solution to img as list item marker - to look same on all browsers*/
      #service-area-A-sub ul, #service-area-B-sub ul
      {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }
      #service-area-A-sub ul li, #service-area-B-sub ul li
      {
      background-image: url(images/red-check-1.png);
      background-repeat: no-repeat;
      background-position: 0px 0px; 
      padding-left: 28px; 
      }
/*-------------------------*/


#footer-image
{
	width: 100%;
	border: 0;	
	padding-bottom: 26.49%;
	background-image: url(images/footer-image.jpg);
	background-size: cover;
	background-position: center;
	clear: both;
}

#footer-area { width 100%;  background-image: url('images/footer-background-color.png'); background-repeat: repeat; margin-top: 0px; padding: 30px  0px 10px 32px; overflow: hidden; color: #939389; font-size: 11pt; } 
#footer-area h2 {
font-family: "Arial Black", sans-serif; font-size: 11pt; line-height: 11pt; margin-top: 0; margin-bottom: 20px; color: #939389; letter-spacing: 5pt; 
}


 #footer-box-a { width: 100%;} 
    #footer-box-a img { max-width: 100%; -ms-interpolation-mode: bicubic; image-rendering: optimizeQuality; margin-bottom: 40px;}
  #footer-box-b { width: 100%;} 
  #footer-box-c { width: 100%;} 

#copyright-box { width 100%; padding: 10px 20px 30px 20px; color: #333029; background-image: url('images/copyright-background-color.png');background-repeat: repeat;}
.copyright-text { width: 100%; font-size: 11pt;} 
.websiteby-text { width: 100%; font-size: 11pt;}
.websiteby-text a { text-decoration: none; color: #686653;}




/* -----------------------------------
layout 1: simple up to 629px 
----------------------------------- */

@media (min-width: 1px) and (max-width: 629px)
{
img.alignleft, img.alignright, img.aligncenter {float: center;}

#logo-area { width: 100%; background-color: #ffffff;}
.logo {display: none;}
.logo-small {padding: 30px 0 0 30px;}
.tagline {font-size: 22.5pt; text-align: right;}
#menu {display: none;}
.transparent-bar {display: none;}
.transparent-bar-below {width: 100%; font-size: 80%; margin-top: -22px;  color: #ffffff; background-color: #333029;  }
.transparent-bar-below p {padding: 10px;}
#secondary-content { width 100%; padding-right: 32px; padding-left: 32px; clear: both;}

#service-area { margin: 0 auto; width: 300px;}
#service-area-A-sub { float: left; padding-right: 30px; }
#service-area-B-sub { float: left; }

#secondary-content h1 {padding-top: 50px;}

.nivo-caption {display: none !important;}  /* override Nivo Slider style*/
}


/* -----------------------------------
layout 2: 630 to 800px 
----------------------------------- */

@media (min-width: 630px) and (max-width: 800px)
{
.logo-small {display: none;}
.logo {padding: 30px 0 0 30px;}
p.tagline {max-width: 540px; text-align: right;}
#menu ul li a { font-size: 12pt; padding: 0 17px;}
.transparent-bar {font-size: 75%;}
.transparent-bar-below {display: none;}

#secondary-content {width 100%; padding-right: 32px; padding-left: 32px; clear: both;}

#service-area { margin: 0 auto; width: 300px;}  /*   element must have a declared width for margin: 0 auto; to center the element  */
#service-area-A-sub {float: left; padding-right: 30px;}
#service-area-B-sub {float: left;}

#secondary-content h1 {padding-top: 50px;}
}

/* -----------------------------------
layout 3: 801 to 959px
----------------------------------- */
@media (min-width: 801px) and (max-width: 959px)

{
.logo-small {display: none;}
.logo {padding: 30px 0 0 30px;}
.transparent-bar-below {display: none;}
p.tagline {width: 540px; text-align: right;}
#menu ul li a { font-size: 13pt;}
#main-content { width: 55%; float: left;  }
#secondary-content { float: left; width: 30%;  border-left:2px dotted #686653; padding-left: 24px; margin-right: 24px;}

#service-area { margin: 0 auto;}
#service-area-A-sub {float: left; padding-right: 30px;}
#service-area-B-sub {float: left;}

#footer-box-a { width: 40%; float: left;} 
#footer-box-b { width: 31.7%;  float: left; padding-left: 3%;} 
#footer-box-c { width: 100%; float: left;} 
.copyright-text { width: 53%; float: left;} 
.websiteby-text { width: 47%; text-align: right; float: left;}
}

/* -----------------------------------
layout 4: 960+
----------------------------------- */

@media (min-width: 960px)
{

#background {width: 100%; padding-bottom: 5%; padding-top: 10px; background-image: url(images/background-sink-image.jpg); background-size: cover; background-position: center; background-attachment: fixed;}
#container { max-width: 960px; }
#logo-area { background-image: url(images/twisted-pipe-background.jpg);}
.logo-small {display: none;}
.logo {padding: 30px 0 0 30px;}
p.tagline {width: 540px; text-align: right;}
.transparent-bar-below {display: none;}
#main-content { width: 55%; float: left;  }
#secondary-content {float: left; width: 34%; margin-right: 20px; border-left:2px dotted #686653; padding-left: 24px;}
#service-area-A {padding-right: 16px; width: 50%;float: left;}
#service-area-A-sub {float: right;}
#service-area-B {padding-left: 16px; width: 50%;float: left;}
#service-area-B-sub {float: left;}

#footer-box-a { width: 37.5%; float: left;} 
#footer-box-b { width: 31.7%; float: left;  } 
#footer-box-c { width: 27.8%; float: left; padding-left: 3%;} 
.copyright-text { width: 53%; float: left;} 
.websiteby-text { width: 47%; text-align: right; float: left;}

}

/*-----------------------Nivo Slider CSS changes --------------------------------------------*/




.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
        line-height: 140% !important; text-align: center; 
        /*font-family: 'Tahoma', sans-serif !important;*/
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.5 !important;  /*change from 0.8 to 1, and below*/
	overflow: hidden;
/*	display: none;*/
	-moz-opacity: 0.5 !important;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.theme-default .nivoSlider {
    -webkit-box-shadow: 0px 0px 0px 0px #4a4a4a !important;
    -moz-box-shadow: 0px 0px 0px 0px #4a4a4a !important;
    box-shadow: 0px 0px 0px 0px #4a4a4a !important;
}