/************************ Generic ****************************/
* { margin: 0; padding: 0; }  /* reset - these can be good or bad.  in a tightly controlled layout though, unavoidable */
body
{
    /* remove 10px margin - width constraints are too tight with IE width calc bug */
    margin: 0;
    font: 11px Verdana, sans-serif;
    line-height: 15px;
    color: #333;
    background-color: white;
}
/* a very general style to indicate new window. to be overridden as needed */
.new_window
{
    border: 1px solid #333;
}
#container
{
    margin: auto;
    width: 998px;  /* fixed width layout :-/ at Chi's insistence - disable to scale smoothly - note that IE width calculation bugs require width to be at least 998px*/
}
.down { list-style-image: url(../images/arrow_blue_down_sm.png) !important; } /* used by FAQ only ATM */
a { color: #1C78C4; }
a:visited { color: #1C78C4; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none }
li { margin-bottom: .5em; vertical-align: 50% }
em { font-style: normal; color: #f60; }
/* a bunch of convenience classes */
.center { text-align: center; }
.blockcenter { margin-left: auto !important; margin-right: auto !important; }
.hide { display: none !important; }
.hide508 /* this is an attempt to use a style rule that will hide this element from visual rendering
			while still displaying it in screen readers.  Screen readers can be surprisingly varied 
			in how they honour screen media types.  Obviously anyone disabling screen stylesheets
			will not have an issue.  http://www.access-matters.com/screen-reader-test-results/ */
{
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}
.highlight
{
	background-color: #ffa !important;
	color: black !important;
	font-weight: bold !important;
}
.disabled
{
    background-color: #ddd;
    color: black;
}
.clear {clear: both;}
.float { float: left; } /* default float is left */
.click { cursor: pointer; }  /* indicate an element as clickable */
.errors { color: red !important; }
.skip {position: absolute; top: -1000px; left: -1000px; height: 1px; width: 1px; line-height: 0px; }
/************************ Banner ****************************/
a img { border: none; }
#banner
{
    height: 70px;
    overflow: auto;
    width: 100%;
    font-size: 0;
    background: white url(../images/banner_middle.png) repeat-x scroll top left;
}
#banner img
{
    display: block;
    float: right;
}
#banner img.float { float: left; }
/************************ End Banner ****************************/
/************************ Navigation List ****************************/
#navlist
{
    background-color: #c5def3;
    float: right;
}
#navlist li
{
    text-align: center;
    float: left;
    margin: 0;
    border-right: 1px solid #6daade;
    position: relative;
}
#navlist li:last-child { border: none; }

/* Not as flexible as border-radius, and inconvenient to maintain - but does give the impression more browsers support something that they do not. */
#navlist li:first-child a { background: transparent url(../images/menu_corner_left.png) no-repeat scroll bottom left; }
#navlist li:last-child a { background: transparent url(../images/menu_corner_right.png) no-repeat scroll bottom right; }

#navlist li a:hover { text-decoration: none; }
#navlist li#active, #navlist li#active a, body ul#navlist li:hover a, #navlist li a:hover 
{ 
    background-color: #1c78c4; 
    color: white; 
}
#navlist li a:hover.sub
{
    background-image: none;
}

#navlist li a
{
    display: block;
    padding: 5px 12px 5px 12px;
}
#navlist li ul 
{ 
    background-color: #1c78c4;
    float: left;
    display: none;
    position: absolute; /* required by IE6 bug. Can't use relative. */
    top: 25px;
    z-index: 100;
}
#navlist li ul li a
{
    padding-left: 10px;
    background-image: none !important; /* sometimes this is just easier */
    white-space: nowrap;
    color: #9ddaff;
}
#navlist li ul li
{
    text-align: left;
    float: none;
    display: block;
    border-right: none;
    padding: 0; margin: 0;
    border-bottom: 1px solid #6daade;
}
#navlist li ul li:last-child { border: none; }
#navlist li:hover ul { display: block; }
#navlist li#active ul li:hover a, #navlist li#active ul li a:hover,
#navlist li ul li:hover a, #navlist li ul li a:hover 
{ 
    background-color: #c5def3; 
    color: #036; 
}

/******************** End Navigation List ****************************/
#main
{
    padding-left: 30px;
    padding-top: 0;
    margin-top: 50px;
}
h1
{
    font-size: 30px;
    color: #005782;
    margin-bottom: -4px;
}
h2
{
    font-size: 15px;
    margin: 20px 0 10px 0;
}
h3
{
	color: #005782; 
    font-weight: bold;
    font-size: 18px;
    margin: -3px 0 -8px 0;
}
#main ul.links
{
    margin-top: 10px;
    margin-left: 0;
    list-style: none;
}
#main ul.links li
{
    display: inline;
    border-right: 1px solid #CCC;
	color:#CCC;
}
#main ul.links li:last-child { border: none }
#main ul.links li a
{
    padding-right: 3px;
    padding-left: 8px;
    color: #2aa202; 
}
#main ul.links li:first-child a { padding-left: 0; }
#main ul.links li a:hover { color: #1c78c4; }
#main p
{
    margin-top: 10px;
    line-height: 15px;
}
body ul#features
{
    float: right; 
    list-style: none;
}
dl.titled dt { list-style-image: none; }
dl.titled
{ 
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* IE8.js' PNG fix overwhelmed its simple brain, I had to add a more specific rule to the li */
#features li.single, #features li.multiple 
{ 
    background: white url(../images/front_feature-trans.png) no-repeat scroll 0 0; 
    margin-left: 14px;
    margin-bottom: 14px;
}
#features li.multiple_large
{ 
    background: white url(../images/front_feature-trans_lg2.png) no-repeat scroll 0 0; 
    margin-left: 14px;
    margin-bottom: 14px;
}
#features li.multiple_large1
{ 
    background: white url(../images/front_feature-trans_lg2.png) no-repeat scroll 0 0; 
    margin-left: 14px;
    margin-bottom: 14px;
}
/* Additionally, the overrides were not working reliably in IE - broke the list of features into two classes, single/multiple based upon whether there were sub-links */
#features li.single
{
    height: 126px;
    width: 232px;
}
#features li.multiple_large1
{
    height: 213px;
    width: 232px;
}
#features li.single a
{
    display: block;
    width: 204px;
    height: 97px;
    text-decoration: none;
    background: no-repeat scroll right bottom;
    color: inherit;
    padding: 14px;
}
#features li.multiple_large1 a
{
    display: block;
    width: 204px;
    height: 184px;
    text-decoration: none;
    background: no-repeat scroll right bottom;
    color: inherit;
    padding: 14px;
}
#features li.single a span, #features li.multiple_large1 a span
{
    display: block;
    padding-right: 90px;
    line-height: 14px;
}
#features li .title
{
    color: #333;
    font-weight: bold;
    padding-right: 0px;
    font-size: 14px;
    padding-bottom: 5px;
}
#features span.title img { padding-right: 5px; }
#features li.single,  #features li.multiple_large1  a:hover { text-decoration: none; }
#features li.single:hover { background-color: #eef; }
#features li.multiple_large1:hover { background-color: #eef; }

/* disabling is just too hard for IE8.js - made "multiple" the default */

#features li.multiple h3 { margin: 0 0 5px 0; }
#features li.multiple a:hover, #features li.multiple_large a:hover a:hover { text-decoration: underline; }
#features li.multiple
{     
    width: 202px;
    height: 96px;
    padding: 12px 15px 18px; 
}
#features li.multiple_large
{     
    width: 202px;
    height: 185px;
    padding: 12px 15px 18px; 
}
#features li.multiple a, #features li.multiple_large a
{
    display: inline; 
    padding: 0; 
} 
#features li.multiple ul
{
    padding: 0;
    margin: 0;
}

#features li.multiple_large ul
{
    padding: 5px 0 0;
    margin: 0;
}

#features li.multiple li, #features li.multiple_large li
{ 
    display: block;
    width: 100%;
    height: auto;
    background: none;
    padding: 0;
    margin: 0;
}


/* These are repeated in various places over the site, so they have been moved to main.css */
#features #web { background-image: url(../images/web.png); }
#features #email, ul#features li a.email { background-image: url(../images/email.png); }
#features #ahrquspstf { background-image: url(../images/ahrquspstf.png); }
#features #myhealthwidget { background-image: url(../images/myhealthfinder.png); }
/* the e-mail and AHRQ/USPSTF blocks need to be given more room */
#features #email span, ul#features li a.email span, #features #ahrquspstf span { padding-right: 85px; }
#features #email span.title, ul#features li a.email span.title, #features #ahrquspstf span.title, #features #myhealthwidget span.title { padding-right: 0px; }
#features #ahrquspstf span { margin-top: -5px;margin-bottom: 0; }
#features #ahrquspstf span.title { margin-top: -8px; }

#footer
{
    margin-top: 30px;
    display: block;    
    background-color: white;
    color: #08518e;
    padding: 1px;
}
#footer a, #footer a:visited, #footer a:hover { color: #08518e; padding-right:5px;}
#footer li ul li { display: inline; }
#footer li ul li 
{
    padding: 0 3px 1px 7px;
    display: inline; 
    border-right: 1px solid #ccc;
}
#footer li ul li:last-child { border: none; }