/***********version 1.2 ***************/

/*********set global properties and values ***********/

body{
margin:auto;
padding:0;
background-color:#f1eace;
background-image:url(../image-files/body-background.jpg);
background-repeat: repeat-x;
font-family: Verdana, Geneva, sans-serif;
font-size: 90%;
color:#000000;
}



/********this is the clearing div, which should be used after each module to ensure following ones break to a new line.
Theer are various heights, so you can choose how much space you add between modules*********/
div.clear{clear:both;background-color:transparent;}div.clear10{clear:both;height:10px;background-color:transparent;}div.clear20{clear:both;height:20px;background-color:transparent;}div.clear30{clear:both;height:30px;background-color:transparent;}div.clear40{clear:both;height:40px;background-color:transparent;}div.clear50{clear:both;height:50px;background-color:transparent;}div.clear60{clear:both;height:60px;background-color:transparent;}div.clear70{clear:both;height:70px;background-color:transparent;}div.clear80{clear:both;height:80px;background-color:transparent;}div.clear90{clear:both;height:90px;background-color:transparent;}div.clear100{clear:both;height:100px;background-color:transparent;}
/*********set global headline properties and values Setting these means we override the browser default settings. 
That stops IE giving different margins and paddings than Firefox***********/
h1, h2, h3, h4 {
font-family:  Verdana, Geneva, sans-serif;
color:#306754;
margin:10px auto;
padding:0;
background:transparent;
}
/********set individual headings*************/
h1{font-size:180%; color: #800000; text-align:center;}
h2{font-size:140%; text-align:center;}
h3{font-size:120%; text-align:center;}
h4{font-size:110%; text-align:center;}
h4.title{font-size:110%;text-align:left;}

/**********by setting the line height and margins of paragraphs, we remove the variations across different browsers. IE6 in particular,
which will collapse the bottom margin.*******/
p{line-height:1.2em;
margin:20px auto !important;
}

p.caption{
font-size:90%;
color:#000000;
text-align:center;
}

p.caption img{
margin: 20px auto 10px auto;
border:1px solid #cccccc;
padding:4px;
}

p.intro{
  font-weight:bold;
  font-style:italic;
  text-align:center;
}


ul{
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}
 
li.custom{
background: url(http://www.natural-dog-health-remedies.com/image-files/pp.png) left top no-repeat; 
padding-left: 20px;
margin-bottom: 10px;

 }

/***********set global link properties and values ***********/


.outlink{
background-image: url(../image-files/linkout.png);
background-position:right;
background-repeat: no-repeat;
padding: 0 13px 0 0;
}

a:link {
color: #003399; 
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

a:hover {
color: #333333;
text-decoration: underline;
}

a img { /*this gets rid of the blue border around any image that is used as a link*/
border: 0;
}

/*footer and footer links */
.copyright{
font-size: 11px;
color:#666666;
}
.footer{
width:960px;
background-image: url(../image-files/footer-background.jpg);
background-position: bottom center;
background-repeat: no-repeat;
text-align:center;
font-size:90%;
height:90px;
}

.footerlinks{
text-align:center;
padding-top:8px;
padding-bottom:8px;
}

.footerlinks a:link  {
color: #0066cc; 
text-decoration: underline;
}

.footerlinks a:visited {
color:#0066cc;  
text-decoration: underline;
}

.footerlinks a:hover {
color: #333333;
text-decoration: underline;
}

.right{/*for adding some padding to a floated image */
float:right;
border:1px solid #306754;
padding:2px 2px 2px 2px;
margin:0 0 0 10px;
}

.left{/*for adding some padding to a floated image */
float:left;
border:1px solid #306754;
padding:2px 2px 2px 2px;
margin:0 10px 0 0;
}


/*** Breadcrumb ***/

.Breadcrumb{
font: 11px "Arial";
color: #9e9898;
}

.Breadcrumb a{
text-decoration: none;
padding-right: 1px;
color: #9e9898;
}

.Breadcrumb a:visited, .breadcrumb a:active{
color: #9e9898;
}

.Breadcrumb a:hover{
color: #306754;	
}


.blogItItem{
margin:18px 0;
padding:0 12px;
border: 1px solid rgb(235,228,232);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 2px 2px 1px rgb(181,176,178);
}

.blogItItem h6{
font-size:12px;
margin-top:5px;
}

.blogItItem h3{
border:0;
font-weight:bold;
color:#306754;
}

.blogItThumbnail img{
float:left;
margin-right:10px;
margin-bottom:5px;
background-color:transparent;
max-width:120px;
height: auto !important;
ms-interpolation-mode: bicubic;
border:1px solid #cccccc;
padding:3px;
background-color:#ffffff;
}


.blogItReadMore a:link:first-letter  { 
font-size: 100%; 
clear:both;
}

.blogItReadMore a:link  { 
font-size: 80%; 
clear:both;
}





/*Small box on right nav*/

.small-box-right{
  width: 170px;
  float:right;
  background-color:white;
  margin: 2px 2px 2px 2px;
  border: 1px solid rgb(235,228,232);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 2px 2px 2px 1px rgb(181,176,178);
  padding:3px;
} 

.box-left{
  width: 330px;
  float:left;
  background-color:white;
  margin: 5px 10px 1px 1px;
  border: 1px solid rgb(235,228,232);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 2px 2px 2px 1px rgb(181,176,178);
  padding:4px;
} 


/*Center Box*/

.center-box{
  width:60%;
  background-color:white;
  margin: 0 auto;
  border: 1px solid rgb(235,228,232);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 2px 2px 2px 1px rgb(181,176,178);
  padding:5px 5px 2px 10px;
 } 

/*Bottom of Page Box*/

.bottom-box{
  width:80%;
  background-color:white;
  margin: 0 auto;
  border: 1px solid rgb(235,228,232);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 2px 2px 2px 1px rgb(181,176,178);
  padding:5px 10px 10px 10px;
 } 
 
 
 
/*Smaller Center Box*/

.small-box{
  width:40%;
  background-color:white;
  margin: 0 auto;
  border: 1px solid rgb(235,228,232);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 2px 2px 2px 1px rgb(181,176,178);
  padding:5px 10px 10px 10px;
 } 
  
/*Table*/

.Table {
	margin:0px;padding:0px;
	width:100%;
	border:1px solid #e5e5e5;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.Table table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.Table tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.Table table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.Table table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.Table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.Table tr:hover td{
	
}
.Table tr:nth-child(odd){ background-color:#f4eee8; }
.Table tr:nth-child(even)    { background-color:#ffffff; }.Table td{
	vertical-align:middle;
	
	
	border:1px solid #e5e5e5;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:5px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.Table tr:last-child td{
	border-width:0px 1px 0px 0px;
}.Table tr td:last-child{
	border-width:0px 0px 1px 0px;
}.Table tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.Table tr:first-child td{
		background:-o-linear-gradient(bottom, #306754 5%, #ffffff 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #306754), color-stop(1, #ffffff) );
	background:-moz-linear-gradient( center top, #306754 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#306754", endColorstr="#ffffff");	background: -o-linear-gradient(top,#306754,ffffff);

	background-color:#306754;
	border:0px solid #e5e5e5;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.Table tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #306754 5%, #ffffff 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #306754), color-stop(1, #ffffff) );
	background:-moz-linear-gradient( center top, #306754 5%, #ffffff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#306754", endColorstr="#ffffff");	background: -o-linear-gradient(top,#306754,ffffff);

	background-color:#306754;
}
.Table tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.Table tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
} 
 
 
 
/*this is for the area above the header, if you want to add sitewide or an image */
.pagetop-text{
width: 960px;
margin:0;
position:absolute;
top:-10px;
text-align:left;
}
.pagetop-text h1{
font-size:90%;
font-weight:bold;
color:#cccccc;
text-decoration:none;
text-align:left;
margin-bottom:-20px;
float:left;
padding-right:10px;
}

.pagetop-text p{
font-size:90%;
font-weight:normal;
color:#cccccc;
text-decoration:none;
text-align:left;
float:left;
position:relative;
top: -10px;
}


.more {
  display: none;
   background:none;
   
   padding-bottom:0px; }
 a.showLink, a.hideLink {
  text-decoration: none;
  color: #36f;
  padding-left: 8px;
  
  background: transparent url(../image-files/down.gif) no-repeat left; }
 a.hideLink {
  background: transparent url(../image-files/up.gif) no-repeat left; }
 a.showLink:hover, a.hideLink:hover {
  border-bottom: 1px dotted #3366ff;
  
  }
 

/*****************the main container to hold everything**********/
.container{
width:960px;
margin:0 auto 0 auto; /*sets the gap at the top and bottom, and centers the page */
background-color: white;
background-image:url();
background-position:top center;
background-repeat:repeat-y;
}



/***********the fullwidth, used for header and footer and any other area that you want the full 960px width *************/
div.fullwidth-head{ 
width:960px;
height:281px; /*this should be set to the height of your header */
border:transparent;
background-color: transparent;
background-image:url(../image-files/header.jpg);
background-position:top center;
background-repeat: no-repeat;
margin:0;
padding:0;
}


.pagebottom{
width:960px;
background-image:url(../image-files/footerbg.png);
background-position:center bottom;
background-repeat:no-repeat;
background-color:transparent;
height:72px;
margin-top:-20px;
}


.shell960{
width:960px;
margin:0;
padding:0;
background-color:white;
margin-bottom:-20px;

}




div.fullwidth-head img{
text-decoration:none; /*gets rid of any border around the hyperlinked header image */
}

 
 

.topnav-position{ /*this is to move the topnav from the bottom of the page, to below the header */
padding-left:5px;
width:960px; 
height:30px; 
position:absolute; 
top:211px; 
background-image:url();
background-repeat:repeat-x;

}




.slideshow-position{ /*this is to move the google search from the bottom of the page, to within the header */
width:500px;
height:250px; 
background-color:transparent;
position:relative;
top:-30px;
left:450px;
}




div.topadsense1{
width: 250px;
float:left; 
margin-left:25px;
}

div.topadsense2{
width: 250px;
float:right; 
margin-right:25px;
}


/**********TWO COLUMN UNEQUAL MODULES ************************/

.shell300{
width:300px;
float:right;
}
.inner270{
width:270px;
margin: 0 auto;
}

.shell760{
width:760px;
float:left;

}

.inner720{
width: 720px;
margin:auto 0;
}






.shell660{
width:660px;
float:left;

}
.inner630{
width:630px;
margin:0 auto;
}
/**********this is for equal width 2 column module*************/

.shell480a{
width:480px;
float:left;
margin:0;
background-color: white;
border:transparent; /****remember that a border is added in addition to the width of the div. So with a 1px border, narrow the div by 2px to allow the combined width to add up correctly */
}

.shell480b{
width:480px;
float:right;
margin:0;
background-color: white;
border:transparent;
}


/************************************************/

.shell280a{
width:280px;
float:left;
}

.shell280b{
width:280px;
float:right;
}


.shell210a{
width:210px;
float:left;
background-color:#f0df9d;
}
.shell210b{
width:210px;
float:right;
background-color:#dbdbf1;
}




/************this is the 200px wide left nav column***********************/
.shell200-left{
width:200px;
margin:0 auto;
float:left;
background-color:transparent;
position:relative;
left:-760px;
background-color:white;
}

.shell200-right{
width:200px;
margin:0 auto;
float:right;
background-color:transparent;
position:relative;
background-color:white;
}


/***************this is the 760px wide right container*******************/
.container760{
width:760px;
margin:0 auto;
float:left;
background-color:white;
position:relative;
left:200px;
}



/**********this is for the double blocks *******************/
.shell380a{
width:380px;
padding:0;
float:left;
margin:0;
background-color:#ccccff;
}

.shell380b{
width:380px;
padding:0;
float:right;
margin:0;
background-color:#cfb7c1;
}


/***********this is for the triple blocks ************/





.shell320{/*these site die by side, in a fullwidth shell960 */
width:320px;
float:left;
font-family: 'comic sans ms', san-serif;
color:#666600;
background-color:#ffdccc;
}


.shell240{
width:240px;
float:left;
background-color:transparent;
background-image: url();
background-position:top center;
background-repeat:no-repeat;
}


.shell250{/*this needs 3 of these side by side, and are used inside of the  */
position:relative;
width:250px;
float: left;
background-color:transparent;
background-image: url(../image-files/240-background.png);
background-position:top center;
background-repeat:no-repeat;
}


.shell250b{
position:relative;
width:250px;
float:left;
background-color:transparent;
}

.shell250c{
position:relative;
width:250px;
float:left;
background-color:transparent;
}


/**********these 225px sub modules are designed to go side by side into the half-fullwidth div *********/
.shell225a{
width:225px;
float:left;
}

.shell225b{
width:225px;
float:right;
}



/*********these 150px blocks are designed to sit side by side in a row of six within the fullwidth module *********/

.sub-150a{
width:160px;
float:left;
margin:0;
}
.sub-150{
width:160px;
float:left;
margin:0;
}
.sub-150-inner img{
padding:5px;
border:1px solid #cccccc;
}


/***********this is for the 3 column modules **************/

.shell200-left3col{
width:200px;
margin:0 auto;
float:left;
background-color:white;
position:relative;
left:-560px;
}


/***************this is the 560px wide center container*******************/
.center3col{
width:560px;
margin:0 auto;
float:left;
background-color:#c0dddd;
position:relative;
left:200px;
}

.center3col-inner{
width:540px;
margin:0 auto;
}

.shell200-right3col{
width:200px;
margin:0 auto;
float:right;
background-color:#ccff99;
}


/***********THESE ARE ALL THE INNERS *******************************************/
.inner900{
width:900px;
margin:0 auto;
background-image:url(../image-files/900bg.jpg);
background-position:top center;
background-repeat:no-repeat;
}
.inner940{
width:940px;
margin:0 auto;
background-color:transparent;
}

.inner740{
width:740px;
margin: 0 auto;
text-align:left;
color:#333333;
}

.inner720{
width:720px;
margin: 0 auto;
text-align:left;
color:#333333;
background-color:transparent;
}


.inner650{
width:650px;
margin:0 auto;
}

.inner500{
width:500px;
margin:0 auto;
}



.inner360{
width:360px;
margin:0 auto;
}

.inner300{
width:300px;
margin:0 auto;
}

.inner270{
width:270px;
}


.inner260{
width:260px;
margin:0 auto;
}

.inner250{
width:250px;
margin:0 auto;
}

.inner240{
width:240px;
margin:0 auto;
background-color:transparent;
}

.inner220{
width:220px;
margin:0 auto;
background-color:white;
border: 1px solid rgb(235,228,232);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 2px 2px 1px rgb(181,176,178);
padding:2px;
}

.inner200a{
width: 200px;
margin:0 auto;
background-color:white;
border: 1px solid rgb(235,228,232);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 2px 2px 1px rgb(181,176,178);
padding:2px;
}

.left-3col-inner{
width:190px;
margin:5px auto;
}

.inner180{
width:180px;
margin:5px auto;
}

.inner150{
width:150px;
margin:0 auto;
font-size: 11px;
color:#003333;
}

.inner130{
width:130px;
margin:0 auto;
font-size: 11px;
color:#003333;
}



.mobile-only {
display: none;
}
/*************************THIS IS THE MOBILE SECTION***************/


@media screen and (max-width: 768px)
{

	html, body {
		font-size: 90%;
		background: #ffffff;
		padding: 2px;
		color: #000000;
		margin: 0;
		}
		
		h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}
		
	
		
		.desktop-only{
		display:none;
		}
		
		.footer{
	  display:none;
		}				
		
		.fullwidth-footer img{
		max-width:50px;
		}
		
	.header-mobile{
	display:block;
	width:100%;
	height:140px;	
	margin:0;
	background-image: url(../image-files/header-tablet.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	}	
	
	.mobile-links{
	display:inline;
	}
	.mobile-footer-links{
	display:inline;
	}
	
	#pmenu li {
  display:inline;
  } 
	
	.mobile-only{
	display:block;
	width:100%;
	}
	
	.mobilebreak{
clear:both;
}


	
	/**********the floated columns are placed back into an inline position *********/
.shell-right760{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell600-center3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}
.shell560-center3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell200-left3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.sub-shell280{
width:280px;
border:1px solid #cccccc;
margin:5px auto;
float:none;
background-color:#ffffff;
}

.shell180-right3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell200-right3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell320, .shell320a{
width:320px;
margin:5px auto;
float:none;
background-color:#ffffff;
}

	
	.container, .shell960, .shell960c, .shell760, .shell670, .shell660, .shell600-center3col, .shell560-center3col, .shell560-left3col, .shell505a, .shell505b, .shell480, 
	.shell465, .shell425a, .shell425b,  .shell315, .shell240a,  .shell290, .shell240, .shell200-right3col, .shell200-center3col, 
	.shell200-right3col, .shell200-right, .shell192a, .shell180-right3col, .shell180-left3col, .shell160, .print-area  {
	
	float:none;
	display:block;	
	width:100%;
	margin:5px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.inner740, .inner720, .inner650, .inner630, .inner580, .inner540, .inner495a, .inner495b, .inner460, .inner450, .inner405a, .inner405b, 
	.inner300, .inner310a, .inner280, .inner270, .inner260, .inner265, .inner250, .inner240, .inner200,
	.inner220a, .inner190, .inner180, .inner180a, .inner170, .inner150{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	} 
	
	.sub-shell380,  .sub-shell325, .sub-shell300, .sub-shell280, .sub-shell250, .sub-shell245, .sub-shell215, .sub-shell215{
	display:block;
	width:80%;
	margin:5px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.sub-150{
	float:none;
	margin:10px auto;
	}
	
	.sub-inner360, .sub-inner300, sub-inner240, .sub-inner235, .sub-inner205{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	}
	
	.sub-inner300 h4, .sub-inner205 h4{ /*as these classes had a black background on the fullsized version, the headings were white. We need to change that here to black, so that the headings show */
	color:#000000;
	}
	
	.footerbox1, .footerbox4{
	width:22%;
	}
	.footerbox1 img, .footerbox4 img{
	height:40px;
	width:40px;
	}
	
	.theme-default #slider {
    margin:20px auto 0 auto;
    width:380px; /* Make sure your images are the same size */
    height:180px; /* Make sure your images are the same size */
  }


	 img{
	 max-width:300px;
	 max-height:200px;
	 }
	
	
	
	 	

	a:link, a:visited {
		text-decoration: underline;
		color: #0000CC;
		}
	a:hover, a:active {
		text-decoration: underline;
		color: #660066;
		}

}