/* 
	Stylesheet for Nutridog Site
	Written by Evan Heisler of Thorn Creative
	eheisler@thorncreative.com
*/



/* Style Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* End Reset */



/* Structure */

body {
	background: #b7b6b6;
	font-family: arial, helvetica, sans-serif;
	font-size: 62.5%;
	width: 100%;
	}
	
#page {
	background: url(../images/bg.gif) center top repeat-y;
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	}

#mainContent {
	background: #fff;
	border-top: 11px solid #fff;
	border-bottom: 11px solid #fff;
	border-left: 15px solid #fff;
	border-right: 15px solid #fff;
	margin: 0 auto;
	width: 862px;
	}
	
#header {
	background: #180b00 url(../images/header.gif) center top no-repeat;
	height: 78px;
	position: relative;
	}
	
#flashContent {
	background: url(../images/bgAltContent.jpg) center top no-repeat;
	height: 378px;
	width: 862px;
	display: block;
	}
	object {display: block;}
	
#flashless {
	background: url(../images/bgMainBottom.gif) center bottom no-repeat;
	padding: 0 0 61px;
	}
	
#graph {
	background: url(../images/bgGraph.gif) center center no-repeat;
	height: 279px;
	padding: 30px 0 0 30px;
	width: 832px;
	}
	
.columnl {
	float: left;
	padding: 0 30px;
	width: 493px;
	}
	
.columnr {
	margin: 0 0 0 553px;
	}
	
#secondaryContent {
	display: block;
	float: left;
	margin: 0 7px 0 0;
	width: 588px;
	}
	.block1 {background: #e6bb84; height: 153px; margin: 0 0 7px; padding: 0 20px;}
	#block1Copy {display: block; float: left; width: 280px; margin: 0 4px 0 0;}
	.block2 {background: #603109 url(../images/bgBlock2b.jpg) left bottom no-repeat; height: 109px; margin: 0 0 7px; padding: 0 0 0 170px;}
	
#tertiaryContent {
	background: #f68a37 url(../images/bgTertiary2.jpg) right bottom no-repeat;
	height: 269px;
	margin: 0 0 0 595px;
	padding: 0 0px 0 15px;
	}
	
#footer {
	background: #180b00;
	clear: both;
	height: 46px;
	padding: 0 20px;
	}

/* End Structure */



/* Typography */

/* main Nav */
ul#mainNav {
	float: right;
	margin: 49px 0 0;
	}
	
ul#mainNav li {
	background: url(../images/bgTabLeft.gif) left top no-repeat;
	display: block;
	float: left;
	font-size: 1.1em;
	letter-spacing: 1px;
	line-height: 29px;
	}
	ul#mainNav li.active {background: url(../images/bgTabLeft.gif) left bottom no-repeat; color: #2f70ab; font-weight: bold;}
	
ul#mainNav li a {
	background: url(../images/bgTabRight.gif) right top no-repeat;
	color: #fff;
	display: block;
	line-height: 29px;
	margin: 0 0 0 14px;
	padding: 0 12px 0 0;
	text-decoration: none;
	}
	ul#mainNav li a:hover {color: #2f70ab;}
	ul#mainNav li.active a {background: url(../images/bgTabRight.gif) right bottom no-repeat; color: #2f70ab;}
/* End Main Nav */

/* Footer Nav */
	
ul#microNav {
	text-align: right;
	}
	
ul#microNav li {
	color: #87807a;
	display: block;
	float: right;
	line-height: 46px;
	}
	
ul#microNav li a {
	color: #87807a;
	display: block;
	line-height: 46px;
	padding: 0 12px;
	text-decoration: none;
	}
	ul#microNav li a:hover {color: #fff;}
	
/* Footer Nav */

h1, h2, h3, h4 {
	font-family: "Trebuchet MS", arial, sans-serif;
	font-weight: bold;
	}

h1 {
	color: #5b2a01;
	font-size: 2.4em;
	}
	
h2#theDifference {
	background: url(../images/bgDifferenceHeader.gif) center center no-repeat;
	display: block;
	height: 101px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 862px;
	}
	
h1#whereToBuy {
	margin: 50px 0 0;
	}
	
#flashContent h1 {
	color: #000;
	font-size: 2.6em;
	font-weight: bold;
	margin: 40px 0 0 340px;
	text-align: center;
	}
	#flashContent h1 span {
	font-size: .8em;
	}
	
h2 {
	color: #fff;
	font-size: 2.1em;
	margin: 0px 0 8px 0px;
	padding: 10px 0 0;
	}
	
h2.save {
	color: #fff;
	font-size: 3.3em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0 15px 0 0;
	text-align: right;
	}
	
#tertiaryContent sup {
	font-size: .6em;
	vertical-align: top;
	}
	
#tertiaryContent h2 {
	padding: 0;
	}
	
.columnr h2 {
	color: #5a2a00;
	text-align: center;
	}
	
h3 {
	color: #fff;
	font-size: 1.5em;
	}
	
.columnr h3 {
	color: #428b3f;
	font-size: 1.8em;
	margin: 15px 0 0;
	}
	
.columnl h3 {
	color: #333;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.8em;
	margin: 15px 0 0;
	}
	
h4 {
	color: #fff;
	font-size: 1.3em;
	margin: 10px 0 5px;
	}
	
h5 {
	color: #069e7e;
	font-family: arial, helvetica, "sans-serif";
	font-size: 1.6em;
	font-weight: bold;
	margin: 15px 0 10px;
	}

p {
	color: #333;
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 5px 0 0;
	}
	
#flashContent p {
	margin: 10px 0 0 430px;
	width: 400px;
	}
	
.block2 p {
	color: #fff;
	float: left;
	width: 250px;
	}
	.block2 p strong {font-weight: bold;font-size: 1.2em;}
	
	#graph p {
	color: #7d7973;
	font-size: 1.16em;
	margin: 0 0 15px;
	width: 300px;
	}
	
	.columnl p, .columnr p {
	font-size: 1.2em;
	line-height: 1.4em;
	margin: 5px 0 10px;
	}

.block1 p {
	color: #464646;
	}
	
p.btn {
	background: url(../images/btnLeft.png) left center no-repeat !important;
	background: url(../images/btnLeft.gif) left center no-repeat;
	height: 43px;
	font-size: 1.1em;
	}
	
p.btn a {
	background: url(../images/btnRight.png) right center no-repeat !important;
	background: url(../images/btnRight.gif) right center no-repeat;
	color: #fff;
	display: block;
	font-weight: bold;
	line-height: 39px;
	height: 43px;
	margin: 0 0 0 38px !important;
	margin: 0 0 0 35px;
	padding: 0 25px 0 3px;
	text-decoration: none;
	}
	p.btn a:hover {color: #bbb;}
	
p.citation {
	color: #a4a3a3;
	font-size: 1em;
	margin: 0 0 0 30px;
	}
	
.wtbIcon p {
	color: #a4a3a3;
	text-align: center;
	}

/* End Typography */



/* Image Classes */

a#logo img {
	left: 26px;
	position: absolute;
	top: 15px;
	}
	
.wtbIcon {
	float: left;
	width: 144px;
	}

/* End Image Classes */



/* Custom Divs */

.clear {
	clear: both;
	height: 0;
	width: 100%;
	}
	
.hidden {
	display: none;
	}
	
ul#microNav li.left, .left {
	float: left;
	}
	
.right {
	float: right;
	}
	
.center {
	display: block;
	margin: 0 auto;
	}
	
a#logo img {behavior: url(images/iepngfix.htc);}

/* End Custom Divs */

/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 Ð 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
  h1.sIFR-replaced {
    font-family: "Trebuchet MS";
    visibility: hidden;
  }
}


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

	mediabox overlay

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


/* mediaboxAdvanced - black theme */

#mbOverlay {
	position: absolute;
	z-index: 9998;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#mbOverlay.mbOverlayFF {
	background: transparent url(../images/80.png) repeat;
}

#mbOverlay.mbOverlayIE {
	background: transparent url(../images/50.gif) repeat;
}

#mbCenter, #mbBottomContainer {
	position: absolute;
	z-index: 9999;
	left: 50%;
	overflow: hidden;
	background-color: #000;
}

.mbLoading {
	background: #000 url(../images/BlackLoading.gif) no-repeat center;
}

#mbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #000;
	background-repeat: no-repeat;
/*	Sets the style for inline content, if no style is given	*/
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #fff;
	text-align: left;
}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a, #mbImage a:link, #mbImage a:visited {
	color: #ddd;
}

/*	Sets the style for inline content, if no style is given	*/
#mbImage a:hover, #mbImage a:active {
	color: #fff;
}

#mbBottom {
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #999;
	text-align: left;
	border: 10px solid #000;
	border-top-style: none;
}

#mbTitle {
	display: inline;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	font-size: 12px;
}

#mbNumber {
	display: inline;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbCaption {
	display: block;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	width: 46px;
	background: transparent url(../images/BlackClose.gif) no-repeat center;
	margin: 0;
	outline: none;
}

#mbPrevLink {
	width: 69px;
	background: transparent url(../images/BlackPrevious.gif) no-repeat center;
}

#mbNextLink {
	width: 41px;
	background: transparent url(../images/BlackNext.gif) no-repeat center;
}

#mbCloseLink {
	width: 46px;
	background: transparent url(../images/BlackClose.gif) no-repeat center;
}

#mbError {
	position: relative;
	top: 30%;
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border: 10px solid #700;
	padding: 20px 10px 30px;
	margin: auto;
}