/***********************************************/
/* CSS styles for petbadbreath.com             */
/***********************************************/ 

/* Here is an IE hack for font sizes

body {
font-size: 11px !important;
font-size: 9px; }

so firefox and all standards compliant browsers will read the first one as being "important" and
takes preference over the other one. IE on the other hand completely ignores the first one and
displays using the second.
*/


/* Top Navigation Section */
#topnavigation {
	width: 786px;
	padding: 8px 0 0 0px;
}

#topnavigation ul li { 
	display: inline; 
}

#topnavigation ul {
	margin: 0;
	padding: 0 0 0 10px;
	font-family: arial, helvetica, sans-serif;
}

#topnavigation .rightalign {
	text-align: right;
	padding: 0 5px 0 0;
}

/* I'm sure there's an easier way but use this class for links in list
   except for the last link, keeps a border from showing up at end. */
#topnavigation ul li a.sideline {
	border-right: 2px solid #94B473;
}

#topnavigation ul li a {
	font-weight: normal;
	padding: 0 5px 0 5px;
	text-decoration: none;
	float: left;
	color: #FFFFFF;
	margin: 0 0 0 0;
}


#topnavigation ul li a:hover {
	background-color: #2ABC33;
	color: #FFFF00;
}

/* End Top Navigation */


/* After the holiday comment out the background URL line for normal background */
body{
	font-family: Arial,sans-serif;
	font-size: 13px;
	background-color: #fffbeb;
	/* background: url(/images/background-snow.gif) ;  */
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
}

/* Use this for setting the making the shadow box sides around content */
#content {
background: url(images/box.gif) repeat-y center;
}

/* Sets the style for tags within the main body, including centering!! */
#content p {text-align: left;}
#content .c {text-align: center;}
#content .green {color: #006600;}
#content .greenbold {color: #006600; font-weight: bold;}
#content .greencenter {text-align: center; color: #006600; font-weight: bold;}
#content .blue {color: #0000FF; font-weight: bold;}
#content .bluecenter {text-align: center; color: #0000FF; font-weight: bold;}
#content .strong {text-align: center; font-weight: bold;}
#content .medium {font-size: 13px}
#content .mediumgreen {font-size: 13px; color: #006600;}
#content .small {font-size: 11px}
#content .gold { color: #996600; }
#content .goldcenter {text-align: center; color: #996600; }
#content .red { color: #FF0000; }
#content .redbold { color: #FF0000; font-weight: bold;}
#content .redcenter {text-align: center; color: #FF0000;}
#content .rightalign {text-align: right;}
#content .white { color: #FFFFFF; }

/* Use this section inside the #content DIV for the content inside the main box */
#insidebox {
	width: 780px;
}


a:link, a:visited {
	color: #006699;
	text-decoration: underline;
}

a:hover {
	color: #0000CC;
	text-decoration: none;
}


/* use this class to put space before and after link text (used on homepage boxes) */
a.spacer {
	margin: 0 0 0 0;
	padding: 0 7px 0 7px;
}


h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	padding: 0px;
}


h1 {
	 font-size: 130%;
	 color: #006699;
	 margin: 0 0 10px 0;
}

h2 {
	 font-size: 110%;
	 color: #334d55;
	 margin: 0 0 0 0;
}

h2.highlight { background-color: #F1FFF0; }

h3 {
	 font-size: 100%;
	 color: #334d55;
	 margin: 0 0 2px 0;
}

h4 {
	 font-size: 90%;
	 color: #333333;
}

h5 {
	 font-size: 80%;
	 color: #334d55;
}


/* Style to remove space below heading */
p.after-header { margin-top: -1px;}
p.after-header-indent { margin-top: -1px; padding: 0 0 0 20px; }


ul {
	 /* list-style-image:  url("/images/bullet_plus.gif"); */
	 vertical-align: middle;
	 text-align: left;
}

ul li.listimage{
	list-style-image:  url("/images/bullet_plus.gif");
	list-style-type: none;
}

/* For homepage news bullets */
ul li.newsitems{
list-style-image:  url("/images/bullet_plus.gif");
padding: 0 0 15px 0;
}

ul ul{
 list-style-type: disc;
 text-align: left;
}

ul ul ul{
 list-style-type: none;
 text-align: left;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}


.imageborder{
	border-style:outset;
	border-color: black;
	border-width:1px;
      }


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

/* Keep the height attribute for normal, non-holiday header graphics and 
   make sure to change back to (rename) the header_spacer.gif file after holiday
   For holiday the height may need to be 22px */
#head_and_content_spacer {
	background: url(/images/header_spacer.gif) no-repeat bottom center; 
	height: 24px;
}

#head{
	background: url(/images/pet_header.jpg) no-repeat bottom center; 
	height: 120px; 
	width: 786px;
	padding: 0; 
	position: relative;
	margin: 0;
	text-align: left;
}

#topnavbox{
	background: url(/images/menu_bar_back.jpg) bottom center;
	background-repeat: repeat-x;
	height: 47px; 
	width: 786px;
}

#MenuBar{
	float: left;
	clear: left;
	width: 150px;
	margin: 0 0 0 0;
	padding: 10px 0 0 5px;
/* 	border-top: 1px solid #ccc;*/
	border-right: 1px solid #ccc;
/*	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc; */
}

/*********** #MenuBar link styles ***********/

/* #MenuBar ul a:link, #MenuBar ul a:visited {display: block;} */
#MenuBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#MenuBar li {border-bottom: 0px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #MenuBar li {border-bottom: none;}

#menubarheadline  {
	 font-size: 100%;
	 font-weight: bold;
	 text-align: left;
	 color: #334d55;
	 border-bottom: 1px solid #CCC;
}


/*********** #MenuLinks styles for menu on left side ***********/

#MenuLinks{ 
	/*background-color: #eee;*/
	position: relative;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-size: 90%;
}

#MenuLinks ul li{ 
	position: relative;
	text-align: left;
	padding: 0px 0px 10px 0px;
}

#MenuLinks P {
	font-size: 100%;
	font-weight: bold;
	text-align: left;
	color: #334d55;
	border-bottom: 1px solid #CCC;
	padding: 0px 0px 10px 0px;
	margin-bottom: 10px;
}

#MenuLinks P.normal {
	font-size: 100%;
	font-weight: normal;
	text-align: left;
	color: #334d55;
	border-bottom: 1px solid #CCC;
	padding: 0px 0px 10px 0px;
}

#MenuLinks P.heading {
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	background-repeat: repeat-x;
	background-color: #33CC00;
	color: #000000;
	padding: 2px 0px 2px 0px;
	margin-bottom: 0px;
}

#MenuLinks a {
	font-weight: normal;
	border-top: 0px solid #cccccc;
	width: 100%;
	text-decoration: none;
}

#MenuLinks a:hover{
	font-weight: normal;
	color: #006699;
	background-color: #CFFEB4;
	padding: 0px 0px 2px 0px;
	text-decoration: none;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{

	text-align: left;
	margin: 0px;
	padding: 0px 0px 10px 0px;
	font-size: 90%;
}

.relatedLinks h3{

	text-align: left;
	padding: 10px 0px 2px 0px;
}


/************** #advertisement / banner styles **************/

.advert {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}


/************** #headlines styles **************/

#headlines{
	background-color: #eee;
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}

#headlines p{
	background-color: #eee;
	padding: 5px 0px 5px 0px;
}


/* Use this for making the info boxes that float right inside the main content copy */
#resource-box{
	text-align: left;
	float: right;
	padding: 0.2em 0.2em 1em 0.2em;
	margin: 10px 10px 10px 10px;
	width: 280px;
	border: 0px solid #4470a8;
	color: #2f4f4f;
}

#QuoteBox{
	text-align: left;
	float: right;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 200px;
	border: 1px solid #4470a8;
	background-color: #FDFED8;
}

#QuoteBoxNoColor{
	text-align: left;
	float: right;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 200px;
	border: 1px solid #4470a8;
}

#QuoteBoxNoColor150{
	text-align: left;
	float: right;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 150px;
	border: 1px solid #4470a8;
}

#QuoteBoxNoColor210{
	text-align: left;
	float: right;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 210px;
	border: 1px solid #4470a8;
}

#QuoteBoxNoColor210Right{
	text-align: right;
	float: right;
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	width: 210px;
	border: 1px solid #4470a8;
}

#GenericInfoBox200{
	text-align: center;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 200px;
	border: 1px solid #4470a8;
	background-color: #DDEBFF;
}

#GenericInfoBox300{
	text-align: center;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 300px;
	border: 1px solid #4470a8;
	background-color: #DDEBFF;
}

#GenericInfoBox400{
	text-align: center;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 400px;
	border: 1px solid #4470a8;
	background-color: #DDEBFF;
}

#GenericInfoBox600{
	text-align: center;
	padding: 5px 5px 5px 5px;
	margin: 10px 10px 10px 10px;
	width: 600px;
	border: 1px solid #4470a8;
	background-color: #C9FAC0;
}


#GenericInfoBoxClear { 
	margin-top: -1px;
	/* Display as block so you can use <br clear="all"> w/o trying to clear menu on left */
	display: block;
	font-size: 90%;
	float: left;
	width: 570px;
	border: 1px solid #4470a8;
	margin: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
	background-color: #FFFFFF;
}


.HomepageBadBreathSections { 
	margin-top: -1px;
	/* Display as block so you can use <br clear="all"> w/o trying to clear menu on left */
	display: block;
	font-size: 90%;
	float: left;
	width: 540px;
	border: 1px solid #4470a8;
	margin: 5px 5px 5px 15px;
	padding: 5px 5px 5px 5px;
	background-color: #DDEBFF;
}

.HomepageSickPetSections { 
	margin-top: -1px;
	/* Display as block so you can use <br clear="all"> w/o trying to clear menu on left */
	display: block;
	font-size: 90%;
	float: left;
	width: 540px;
	border: 1px solid #4470a8;
	margin: 5px 5px 5px 15px;
	padding: 5px 5px 5px 5px;
	background-color: #D6FFCE;
}

.HomepageHealthSections{ 
	margin-top: -1px;
	/* Display as block so you can use <br clear="all"> w/o trying to clear menu on left */
	display: block;
	font-size: 90%;
	float: left;
	width: 540px;
	border: 1px solid #4470a8;
	margin: 5px 5px 5px 15px;
	padding: 5px 5px 5px 5px;
	background-color: #FDFED8;
}

.SpecialSections{ 
	margin-top: -1px;
	border: 4px double #BBBBBB;
	margin: 10px 20px 10px 20px;
	padding: 10px 10px 10px 10px;
	background-color: #F1FFF0;
}

.SpecialSectionsSmall{ 
	margin-top: -1px;
	border: 4px double #BBBBBB;
	margin: 10px 20px 10px 20px;
	padding: 10px 10px 10px 10px;
	background-color: #F1FFF0;
	width: 250px;
}

.SpecialSectionsLarge{ 
	margin-top: -1px;
	border: 4px double #BBBBBB;
	margin: 10px 20px 10px 20px;
	padding: 10px 10px 10px 10px;
	background-color: #F1FFF0;
	width: 450px;
}

.SpecialSectionsLargeCenter{ 
	margin-top: -1px;
	border: 4px double #BBBBBB;
	margin: 10px 20px 10px 20px;
	padding: 10px 10px 10px 10px;
	background-color: #F1FFF0;
	width: 450px;
	text-align:center;
}

.PressReleaseSections{ 
	margin-top: -1px;
	margin: 2px 2px 2px 2px;
	padding: 3px 3px 3px 3px;
	background-color: #F1FFF0;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

/*************** #pageName styles **************/

#pageName{
	padding: 0px 0px 10px 10px;
}


/************* #globalNav styles **************/

#globalNav{
/*color: #cccccc;*/
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {

	padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature {
	padding: 10px 10px 2px 165px;
	text-align: left;
}

.feature h3{
	padding: 0px 0px 0px 0px;
	text-align: left;
}



/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story {
	clear: both;
	padding: 10px 0px 0px 0px;
	font-size: 80%;
}

.story p {
	padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/
/*  FOOTER **/
#siteInfo{
	background: url(images/footer_spacer.gif) no-repeat top center; 
	font-size: 75%;
	text-align: center;
	padding: 0px 0px 0px 150px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
	the bottom border of the MenuBar in cases where they "touch" */