/*
 * css for iamproheart.com
 * TODO: clean up unneeded foo
 */

/*
yellow header: #FFD745
red pro heart logo: 
body background grey: #EBE3D7
lime green: #BBC674
red links: #e95f30
dark olive "tell a friend": #9D8A2E
grey body text: #776d67
yellow that matches yellow-header-fade-north.jpg: #FDDB46

grey dotted lines: #776d67
bottom:
grey background (matches 'email signup') : FAF7F2

footer:
grey that matches grey-bottom-fade-south.jpg #F5EEE4
 */
 
 * {
	font-family:  "Lucida Grande", "Lucida Sans Unicode", "MS Sans Serif", sans-serif;
	color: #776d67;	
}
body {
	background-color: #F5EFE5; /* grey */
	background-image:url('../img/body-yellow.jpg');
	background-repeat:repeat-x;
	font-family:  "Lucida Grande", "Lucida Sans Unicode", "MS Sans Serif", sans-serif;
	color: #776d67;
	
}
clearboth {
	clear:both;
}
a {
	text-decoration:none;
}
a:link, 
a:visited {
	color: #223322;
	color: #776d67;
}

.alignLeft {
	float: left;
	text-align: left;
}
.alignRight {
	float: right;
	text-align: right;
}
/* use bodyId to make our css override blueprint's form css */
#bodyId .form .input {
	font-size: 1.0em;
	color: #776d67;
	border: 2px solid #eee;
	border-left: 2px solid #999;
	border-top: 2px solid #999;
	display: block;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
}
#quizPrintable {
	text-align: left;
}
#quizPrintable h3,
#quizPrintable p,
#quizPrintable a,
#quizPrintable li {
	color: #000000;
	background-color: #FFFFFF;
	text-align: left;
}
#quizPrintable h3 {
	font-size: 150%;
}
#quizPrintable p {
	font-size: 110%;
}
#quizPrintable a {
	font-size: 150%;
	font-family: courier;
}
/* 
	background: url('../img/shadow-left.jpg');
	background: url('../img/grey-fade-left.jpg') repeat-y;
*/
#shadowLeft {
	background: url('../img/grey-fade-left.jpg') repeat-y;
}
#shadowRight {
	background-color:#c9efbe;
	background: url('../img/grey-fade-right.jpg') repeat-y;
}

#header {
	background-color: #FEDC47;
	padding: 20px 0 0 0;
}
#header .alignLeft img {
	margin-left: 10px;
}
#header .alignRight img {
	margin: 10px 20px 0 0;
}
#header .alignRight #bayerLinks {
	margin: 0 20px 0 0;
}
a#ContactUs:link,
a#ContactUs:visited {
	font-weight: bold;
}
a#ContactUs:hover,
a#ContactUs:active {
	text-decoration:none;
	border-bottom:1px dotted #776d67;
}

#navBarNorthShadow {
	background-color: #FEDC47;
	background: url('../img/yellow-header-fade-north.jpg') bottom repeat-x;
	padding: 20px 0 0 0;
}

#navBar {
	background-color: #FFFFFF;
}
#navBar ul {
     list-style-type: none;
     list-style-position:outside;
     position: relative;
     margin: 0;
     padding: 0;
}
#navBar li {
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    height: 70px;
    margin-right: 10px;
	text-align: left;
	font-size: 1.4em;

    /*
    width: 125px;
    background-image:url(kwicks_sprite.jpg);
    background-repeat:no-repeat;
    */
}
#navBar a {
	display:block;
	height:70px;
	outline:none;
	padding: 25px 20px 0 20px;
	color: #9c892f;
/*  if we use images instead of text, we set the following:
	text-indent:-9999px;
*/
}
#navBar li {
	height: 50px;
    margin: 10px 0px 10px 10px;
}
#navBar a {
	height: 50px;
   	padding: 15px 20px 0 20px;
}
#navBar a:active, 
#navBar a:hover {
	color: #776d67;	
}
#navBar a.selected:link, 
#navBar a.selected:visited {
	color: #e95f30;
}


a.redlink:link, 
a.redlink:visited {
	color: #e95f30;
	font-weight: bold;
}
a.redlink:hover, 
a.redlink:active {
	text-decoration: underline;
	text-decoration:none;
	border-bottom:1px dotted #e95f30; 
}

#main {
	background-color: #FFFFFF;
	zoom:1;
}
#mainContent {
	/*
	margin-bottom: 20px;
	*/
}

.mainTellFriend,
.mainAtRisk,
.mainLiveProHeart {
	margin-bottom: 30px;
}

#mainContent, #mainBanner {
	zoom:1;
	background-color: #FFFFFF;
}
#mainContent .indentLeft {
	padding: 20px 40px 20px 100px;
}
#mainContent .last {
	width: 220px;
}
#mainContent .big {
	margin: -40px 0 0 0;
	width: 240px;
}
.mainClass p + p {
	margin-top:0;
	text-indent:0;
}
.mainClass p {
	line-height: 1.7;
}

.mainClass h3 {
	color: #9D8A2E;
	line-height: 1.5;
}

.mainClass .callout {
	background-color: #FAF7F2;
	border: 8px solid #FFD30E; 
	padding: 15px;
	margin: -40px 0 0 0;
	position: relative;
	z-index: 100;
	text-align: left;
}
.mainClass .callout a {
	font-size: 90%;
}

.mainClass .callout .empty {
	border-color: #FFFFFF;
	margin: 0;
}
.mainClass .callout ul {
	padding-left: 1.5em;
}
.mainClass .callout h3 {
	font-size: 2.0em;
	line-height: 1.2;
	/*
	font-family: Archer; // kyle wishes
	*/
}

.mainLiveProHeart .callout img {
	margin-bottom: -2px;
}
.mainAtRisk {
	text-align: center;
}
.mainAtRisk h3 {
	color: #FF0000;
	color: #e95f30;
}
.mainAtRisk .callout ul {
	padding-left: 10px;
	margin-right: 0;	
}
.quizButton {
	/*
	padding-bottom: 20px;
	*/
}
#bodyId .quizBMI {
	width: 200px;
	margin-left: 120px;
}
#bodyId .quizBMI #bmiError {
	color: #FF0000;
}
#bodyId .quizBMI label {
	display:block;
	font-weight:bold;
	text-align:left;
	width:100px;
	float:left;
	padding-left:10px;
}
#bodyId .quizBMI input{
	float:left;
	font-size:12px;
	padding:1px 2px;
	width:80px;
	margin:2px 0 2px 2px;
}
#bodyId .quizBMI .submitdiv {
	float:left;
	font-size:12px;
	padding:4px 0;
	width:40px;
	margin:2px 0 2px 2px;
}


.mainTellFriend .input {
	width: 220px;
}
.mainAtRisk .callout h3,
.mainAboutAspirin .callout h3 {
	text-align: left;
	color: #9D8A2E;
}
.mainAtRisk .callout .h3sub,
.mainAboutAspirin .callout .h3sub {
	margin-top: -21px;
	color: #9D8A2E;
	font-weight: bold;
}
.mainAboutAspirin .callout h4 {
		color: #50B4CF;
	text-align: center;
	font-size: 1.5em;
	padding: 0 10px;
}
.mainAboutAspirin .callout .input {
	width: 170px;
}
.mainAboutAspirin .callout p {
	margin-top: -10px;
}

.mainAboutAspirin .callout {
    min-height: 186px;
    height: 186px;
}
#aspirinCallout3 p {
    line-height: 1.4;
}
.mainClass .black {
	color: #222222;
}
.mainStoriesForm .submitButton {
	margin-right: 10px;
	display: block;
}
.mainStories .callout h3 {
	text-align: left;
}
.mainStories h3 + h3 {
	margin-top: -17px;
}

.mainStories hr {
	height: 0; 
	border-style: dotted; 
	border-width: 1px 0 0 0; 
	border-color: #bcbcb9;
	margin-top: -5px;
}
.mainStories .nextStory,
.mainStories .prevStory {
	margin: 20px 0 20px 0;
	display: block;
}	
.mainStories .nextStory {
	clear: both;
	float: right;
}

.mainAtRisk-shareQuiz #atRiskIcons {
	margin-bottom: 30px;
}
.mainAtRisk .quizResults {
	text-align: left;
}

/* vertical spacing for 'coming soon'
.mainFaq h3 {
	margin-bottom: 100px;
}
*/

.mainFaq li {
	color: #CC0000;
	color: #e95f30;
}
.mainFaq ol {
	font-weight: bold;
}

.mainFaq ol,
.mainAtRisk .quizResults ul,
.mainFacts ul {
	padding-left: 1.5em;
}
.mainStories,
#mainStoriesThanks {
	padding-bottom: 80px;
}



#bottom {
	background-color: #FAF7F2;
	text-align: left;
	font-size: 90%;
}
#bottom .leftSide,
#bottom .rightSide {
	margin: 10px 20px 20px 20px;
}
#bottom .middle {
	margin: 10px 0 20px 0;
	padding-right: 10px;
}
#bottom .leftSide img, 
#bottom .middle   img,  {
	margin-right: 5px;
}

.mainContactUs .leftSide {
	padding: 40px 20px 20px 100px;
}
.mainContactUs .middle {
	padding: 40px 0 240px 0;
}
.mainContactUs .rightSide {
	padding: 40px 20px 20px 20px;
}

.mainContactUs p,
#bottom h3,
#bottom p {
	margin-top: 5px;
	border-top: 1px dotted #776d67; 
	padding-top: 7px;
}
#bottom h3 + p {
	border-top: 0 dotted #776d67;
	text-indent: 0;
	padding-top: 1px;
}
#bottom h3 {
	color: #9D8A2E;
}
/*
#bottom .leftSide h3 {
	color: #2244FF;
}
#bottom .middle h3 {
	color: #CC0000;
}
#bottom .rightSide h3 {
	color: #223322;
}
#bottom .leftSide a:link, 
#bottom .leftSide a:visited,
#bottom .middle a:link, 
#bottom .middle a:visited {
	color: #CC0000;
}
*/

#formEmailSubmit .input {
	width: 216px;
}
#formEmailSubmit .submit {
	margin: 5px 0 20px 0;
}
/*
#formEmailSubmit .submitButton {
	color: #FFFFFF;
	background-color: #CC0000;
	padding: 3px 10px;
}
*/
#formEmailSubmit .submitButton:hover {
	background-color: #AA0000;
}
#bodyId .checkbox {
	margin-left: 0;
}
.quizOptionSpacer {
	padding-top: 15px;
}

#shadowFooter {
	background-color: #F5EEE4;
	background: url('../img/grey-bottom-fade-south.jpg') top repeat-x;
	padding: 15px 0 0 0;
}

#footer a,
#footer {
	color: #776d67;
}
#footer {
	text-align: center;
	font-size: 0.8em;
	padding: 0px 0 20px 0;
}
#footer a:hover,
#footer a:active {
	text-decoration: none;
	border-bottom: 1px dotted #776d67;
}

/* todo: remove unnecessary once layout is finalized 
#footer .span-25, #footer .span-24, #footer .span-23, #footer .span-22, #footer .span-21, #footer .span-20, #footer .span-19, #footer .span-18, #footer .span-17, #footer .span-16 {
	font-size: 0.8em;
}
.modal {
	border: 10px;
	border-style: solid;
	border-color: green;
	padding: 20px;
	background-color: #FFFFFF;
	color: #000000;
}
*/

.jqmWindow {
    display: block;
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -230px;
    width: 420px;
    background-color: #FCFBF7;
    border: 8px solid #F5EEE4;
    padding: 15px;
}
.jqmWindow p {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.jqmWindow label {
	display:block;
	font-weight:bold;
	text-align:left;
	width:120px;
	float:left;
	padding-left:1px;
	clear:both;
}
.jqmWindow span {
	float:left;
}

#bodyId .jqmWindow select,
#bodyId .jqmWindow .input{
	float:left;
	font-size:12px;
	padding:1px 2px;
	width:280px;
	margin:2px 0 2px 2px;
	display:block;
	color: #000000;
}
#bodyId .jqmWindow select {
	width:60px;
}
.jqmWindow textarea {
 	height: 90px;
}
.jqmWindow .submitdiv {
	float:left;
	font-size:12px;
	padding:4px 0;
	width:200px;
	margin:2px 0 2px 2px;
}
.jqmWindow .submitButton {
	margin-right: 20px;
}
.jqmWindow .thankyou {
	padding-bottom: 200px;
}
.jqmO.modalBackground {
	background-color:Black;
	filter:alpha(opacity=70);
	opacity:0.7;	
}

.modalWindow
{
    background-color:#fcfbf7;
    border: solid 8px #f5eee4 none;
    width:540px;
}verlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}




/* from http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html 
 */
.spacer22{clear:both; height:1px;}


verlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}




/* from http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html 
 */
.spacer22{clear:both; height:1px;}


nstead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}




/* from http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html 
 */
.spacer22{clear:both; height:1px;}




#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#666;
  display:none;
  filter:alpha(opacity=70);
  opacity:0.7;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
    background-color:#fcfbf7;
    border: solid 8px #f5eee4;
    width:450px;
    padding:10px 10px 20px 20px;
    height:545px;
}
#closeBtn
{
    position:relative;
    left:400px;
    font-size:12px;
}
.modalFields
{
    width:120px;
    float:left;
    font-size:11px;
    font-weight:normal;
}

h3
{
    color: #9D8A2E;
	line-height: 1.5;
}


        sup, sub
        {
            height: 0;
            line-height: 1;
            vertical-align: baseline;
            _vertical-align: bottom;
            position: relative;
        }
        sup
        {
            bottom: 1ex;
        }
        sub
        {
            top: .5ex;
        }