Stylesheet for Heart Matters CPR
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .2em;
background-color: #fff;
border-top: 5px solid red;
text-align: center;
}

#top h1
{
padding: 0;
margin: 0;
font-family: Arial;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#navcontainer1{ width: 155px; }

#navcontainer1 ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer1 a
{
display: block;
padding: 1px;
width: 150px;
background-color: #f00;
border-bottom: 5px solid #eee;
}

#navcontainer1 a:link, #navlist1 a:visited
{
color: #fff;
font-weight: bold;
font-size: .90em;
text-decoration: none;
}

#navcontainer1 a:hover
{
background-color: #369;
color: #fff;
}

/*Nav container for Resources*/
#navcontainer2{width: 155px; margin-top: 10px; text-align: center;}

#navcontainer2 ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer2 a
{
display: block;
padding: 1px;
width: 150px;
background-color: #ccc;
border-bottom: 5px solid #ccc;
}

#navcontainer2 a:link, #navlist2 a:visited
{
color: #00f;
font-size: 11px;
text-decoration: none;
}

#navcontainer2 a:hover
{
background-color: #f00;
color: #fff;
font-weight: bold;
}


#content
{
margin-left: 200px;
/*border-left: 1px solid gray;
border-right: 1px solid gray;*/
padding: 1em;
/***max-width: 45em;***/
font-family: Arial;
font-size: .90em;
}
#content a:link , a:visited /* standard page links and visited links */
{
color: #00f;
font-family: Arial;
font-size: .75em;
background-color: white;
}

#content a:hover , a:active /* appearance with mouseover and mouseclicked links */
{
color: #fff;
font-weight: bold; 
background-color: #f00; 
} 

#bottomdiv  /* bottom div for name and phone */
{
clear: both;
text-align: center;
/*height: 3em;*/
font-weight: bold;
font-size: 1em;
margin-top: 1px;
padding-bottom: 1px;
/*border: thin solid #ccc;*/
} 

#footer
{
clear: both;
margin: 0;
padding: 1px;
color: #333;
text-align: center;
background-color: #fff;
border-top: 5px solid red;
}
div#footer ul 
{
padding: 0; 
margin: 0; 
list-style-type: none;
color: #00f;
font-family: Arial;
font-size: 12px;

} 
div#footer li
{
display: inline;
margin-right: 1em;
} 

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; color: #000;font-family: Arial;}
#content h4 { margin: 0 0 .5em 0; color: #f00;font-family: Arial;}
#content h3 { margin: 0 0 .5em 0; color: #000;font-family: Arial; text-align:center;}
#content h5 { margin: 0 0 .5em 0; font-family: Arial; text-align:center;}
#bottomdiv p{ margin: 0 0 .5em 0; font-family: Arial; color: #000; text-align:center;}
#bottomdiv a:link , a:visited /* standard page links and visited links */
{
color: #00f;
font-family: Arial;
font-size: 1em;
background-color: white;
}

#bottomdiv a:hover , a:active /* appearance with mouseover and mouseclicked links */
{
color: #fff;
font-weight: bold; 
background-color: #f00; 
} 

/* Float image to left of paragraph */
img.floatLeft{   
float: left;   
margin-right: 5px;
}
/* Float image to right of paragraph */
img.floatRight{   
float: right;
}
/* Center image between margins */
div.center{   
width: 100%;   text-align: center
}
.floatbio /* rename these selectors for each page image */
{
float: left;
width: 103px;
margin: 0 10px 25px 5px;
background-color: #fff;
background-image: url(pix/head_shot.jpg);
background-repeat: no-repeat;
padding: 20px 10px 85px 10px;
/***border: 1px thin solid #ccc;***/
}

.hmintro /*Heart Matters CPR bold font sentence intros*/
{
font-size: 1.2em;
color: #f00;
font-weight: bold;
line-height: 100%;
font-family: Arial;
}
.intro /*section intros on home page */
{
color: #000;
font-weight: bold;
font-family: Arial;
font-size: 1.2em;
line-height: 105%;
}
.hearts
{
color: #f00;
font-size: 1.3em;
font-weight: medium;
}
.bighearts
{
color: #f00;
font-size: 6em;
font-weight: medium;
}

/*a:link , a:visited /* standard page links and visited links */
{
color: #00f;
}

a:hover , a:active /* appearance with mouseover and mouseclicked links */
{
color: #fff;
font-weight: bold; 
background-color: #f00; 
}