@import url(luna_core.css);

/*
This file inherits from luna_core.css, so styles in this file will override
styles defined in it.  Changes to this file will NOT be overwritten during
upgrades.

Here's a quick tutorial on overriding styles.  Say you want to change the
background colour of the body.  Looking at luna_core.css, the colour is
defined in the rule:

    body {
      margin: 0px;
      padding: 0px;
      color: #33332e;
      background: #ffffff;
      font: normal 11px tahoma, geneva, verdana, sans-serif;
      text-align: center;
    }

To change the background colour of white (#ffffff) to gray (#dddddd), you would
add the following to this file:

    body {
      background: #dddddd;
    }

If you also wanted to change the font as well as the background, then you could
use:

    body {
      background: #dddddd;
      font: normal 12px times new roman;
    }
*/

body { 
	margin: 0; 
	padding: 0; 
	background: #E6E6E6 url(images/bg.gif) top left repeat-x; 
	color: #333333; 
	min-width: 800;
}

/*
Also note that every template's body id is assigned the template name (without
the .html extension).  So if you want to change the h2 heading in the
category.html template, you can do this by:

    #category h2 { 
      color: red; 
      font-weight: bold; 
    }

To start you off, some sample overriding styles have been provided below.  Note
that you will have to uncomment the rules for them to work.
*/



/* logo size and image source */
/*
#logo {
  width: 250px;
  height: 80px;
  background-image: url(images/logo.gif);
}
*/


/* change width of document */
/*
#wrapper {
  width: 95%;
}
*/

#wrapper {
  margin: 0px auto;
  width: 800px;
  text-align: left;
}



/* don't want the shadows? */
/*
.shadowtop, .shadowbottom, .shadowleft, .shadowright {
  background: none;
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
  width: auto;
  height: auto;
  float: none;
  background: none;
}
*/

/*-----------------*\
|* global elements *|
\*-----------------*/
.shadowtop, .shadowbottom {
  height: 10px;
  font-size: 1px;
  display: inline-block;
/* ie/mac fix \*/
  display: block;
/* end fix */
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
  width: 15px;
  height: 10px;
  font-size: 1px;
  
}
.shadowtop {
  background: white;  
}
.shadowbottom {
  background: white;  
}
.shadowleft {
  background: white;  
}
.shadowright {
  background: white;  
}
.shadowtopleft {
  float: left;
  background: white;  
}
.shadowtopright {
  float: right;
  background: white;  
}
.shadowbottomleft {
  float: left;
  background: white;  
}
.shadowbottomright {
  float: right;
  background: white;  
}



/*--------*\
|* header *|
\*--------*/

/* adds white area around top navigation and search */
#headerwrapper {
 background: white; 
 padding: 0px 8px 0px 8px;
}

#header {
  width: 100%;
  background: transparent url(images/swirls.gif) bottom right no-repeat;
}

#loginbar {
  float: right;
  text-align: right;
}
#loginbar a {
  margin-top: 20px;
  width: auto;
  padding: 10px 30px 10px 0px;
  color: #212126;
  font-weight: bold;
  display: block;
}
#headertopoptions {
	float: right;
	margin-right: 20px;
	padding-top: 30px;
	vertical-align: middle;
	display: block;
}

#logo {
  width: 0px;
  height: 0px;
  text-indent: -9999px;
/*  background: transparent url(../../images/logohealthdigest.gif) top left no-repeat; */
	background: white;
	display: none;
}
#logo h1, #logo a {
  margin: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
#logo a {
  text-decoration: none;
  display: none;
}

#topadvert {
	height: 60px; 
	width: 234px; 
	background: white; 
	float: left;
	padding: 0px;
	margin: 0px;
	/* must set hd_logo padding-top: 10px if you set this to block */
	display: block;
	display: none;
}
#hd_logo {
	float: left; 
	padding-top: 5px;
}

/*------------*\
|* navigation *|
\*------------*/
.navbar {
  margin-bottom: 1px;
}
ul.primarynav, ul.secondarynav {
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #ffffff;
  float: left;
  list-style: none;
}
ul.primarynav {
  width: 100%;
  background: #006699;
}
ul.secondarynav {
  width: 100%;
  background: #777c8d;
}
ul.primarynav li, ul.secondarynav li {
  float: left;
  list-style: none;
}
ul.primarynav li {
  background: transparent url(images/betweennav.gif) bottom right no-repeat;
}
ul.primarynav a {
  margin-right: 1px;
  padding: 7px 9px 7px 10px;
  float: left;
  color: #ffffff;
  font-size: 11px;
  text-decoration: none;
}
ul.primarynav a:visited {
  color: #ffffff;
}
ul.primarynav a:hover {
  color: #ffffff;
  background: #1D83B6;
}
ul.primarynav li.home {
  border-right: 1px solid #ffffff;
  background: #383741;
}
ul.primarynav li.home a {
  margin-right: 0px;
}
ul.secondarynav li.first {
  padding-left: 5px;
}
ul.secondarynav a {
  margin-right: 1px;
  padding: 4px 5px;
  float: left;
  color: #ffffff;
  font-size: 10px;
  text-decoration: none;
}
ul.secondarynav a:visited {
  color: #ffffff;
}
ul.secondarynav a:hover {
  color: #212126;
}

/*-----------*\
|* searchbar *|
\*-----------*/
.searchbar {
  margin-bottom: 0px;
  padding: 10px 10px;
  vertical-align: middle;
#  border-bottom: 1px solid #57594b;
#  background: white;
  background: #ebebeb url(../../images/gr_backgd.gif) repeat-x; 
  height: 18px;
  border: 1px solid #CACACA;
}
#searchbarbox {
	width: auto;
	display: block;
	float: left;
}
#searchbarbox input.text, #searchbarbox input.submit {
  margin-right: 5px;
}
/* setting this in mozilla causes rendering issues */
* html #searchbarbox input.submit {
  height: 21px;
}
/* these colours are the same as defined by 'a', but we unset a:visited */
#searchbarbox a {
  color: #212126;
  font-size: 10px;
}
#searchbarbox a:hover {
  color: #5c5b66;
}

#search_input_image {
	display: inline;
	vertical-align: middle;
	padding: 0px 15px 0px 0px;
}

#total_bar {
	display: block;
	width: 250px;
	float: right;
	font-size: 8pt;
	text-align: right;
}



/*--------*\
|* footer *|
\*--------*/
#footer {
  margin-top: 0px;
  padding: 5px;
  background: #E6E6E6;
}
#footer p {
  margin: 0px;
  padding: 10px 0px;
  color: #8a8d77;
  font-size: 10px;
}




/*

In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document: 

<a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a> 

*/

/* To prevent the text from showing up when the page loads,		*\
\* I have the following style:									*/
																	
ul.primarynav a span {
	display: none;
}

/* So they're gone, removed entirely from the document flow. 
   Bringing them back, then, is a simple matter of switching 
   the display to block and positioning the element whenever 
   the associated link is hovered over with the mouse pointer.
   Thus we get the first two lines of this rule:				*/

ul.primarynav a:hover span {
	display: none;
	position: absolute; 
	top: 2px; 
/*	left: 330px;  */ /* moves the block with window size */
/*	width: 240px; */
	width: auto;
	padding: 8px;   /* padding: 10px + margin: 10px + top: 2px sets it right on top of the nav bar */
					 /* padding: 8px + margin: 10px + top: 2px gives some room */
	margin: 10px;   /* not using top: 10px */
	border: 5px double #383741;
	color: #fff; 
	background: #006699;
	font: 10px Verdana, sans-serif; 
	font-weight: bold;
	text-align: center;
}

span#add_span {
	margin-left: 98px;
}
span#mod_span {

}
span#new_span {
	margin-left: -65px;
}
span#pop_span {
	margin-left: -134px;
} 
span#rated_span {
	margin-left: -203px;
}
span#forum_span {
	margin-left: -292px;
}
span#news_span {
	margin-left: -391px;
}
span#newsletter_span {
	margin-left: -464px;
}
span#editor_span {
	margin-left: -500px;
}

/*
  The last three lines relate to how the element will be 
  styled when it appears, but the first two cause it to be 
  made visible (display: block;) and position it appropriately. */

/*	Want to have even more fun? How about icons that appear on rollover? */

/*	A Minor Side Note	*/

/* Notice how the hyperlinks appear to overlay the main-content 
   border, and how that overlap really lights up when you're 
   hovering over a link but still has a gray stripe down the 
   middle of the overlap. That's done with nothing more complicated
   than a border on the hyperlinks themselves, the color and style 
   of which change during the hover:							*/

.navbar a:hover {
	color: #411; 
	background: #AAA;
}

/*  This effect works because I set up everything so the borders on 
    the hyperlinks actually overlaps the border of the main content 
	area. Because I'm positioning these elements using pixel measures, 
	I can get things to line up appropriately and then style them however 
	I like. it's a bit of a trick, of course-- by sticking to shades of 
	gray, it's easier for me to create translucency effects. Someone with
	a sufficiently keen color sense could probably come up with better 
	stuff than I did. (Like not putting light text on a dark background,
	for starters.) 
*/




/* show the left sidebar */
/*
#ocwrapper {
  border-left-width: 180px;
}

#leftsidebar {
  margin-left: -165px;
  padding: 10px 5px 10px 0px;
  width: 160px;
  float: left;
  position: relative;
  display: block;
}
/*

/*
#leftsidebar {
  float: left;
  padding-left: 30px;
  width: 160px;
  display: block;
}
*/


/*---------------*\
|* contentheader *|
\*---------------*/
#contentheader {
  padding: 10px 10px 0px 10px;
  background: white;
}
#contentheader .error, #contentheader .message {
  margin: 0px 180px 0px 180px;
  padding: 2px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
#contentheader .error {
  background: #8c3030;
}
#contentheader .message {
  background: #3a5841;
}
#contentheader .error *, #contentheader .message * {
  margin: 0px;
  padding: 0px;
}

/*---------------*\
|* contentfooter *|
\*---------------*/
#contentfooter {
  background: #e2e1eb;
}


/* bug if subcats are too long, no wrap maybe -- right side bar issue with health dat and empty categories (no links)*/
#contentwrapper {
  width: 100%;
  float: left;
  position: relative;
  background: white;
}
#content {
  margin: 0px 10px;
  padding: 10px;
  background: #ffffff;
}
/* hack for ie/win's guillotine bug */
/* start non ie/mac css \*/
* html #content {
  height: 1%;
}
/* end non ie/mac css */




/* hide the right sidebar */
/*
#ocwrapper {
  border-right-width: 0px;
}
#rightsidebar {
  display: none;
}
#contentheader .error, #contentheader .message {
  margin: 0px;
}
*/



/* change the right sidebar width */
/* note that the sidebars have a 10px padding, hence the 150px - 10px = 140px width */
#ocwrapper {
/* background colour of left sidebar */
  border-left: 0px solid #fff;
/* background colour of right sidebar */
  border-right: 200px solid #fff;
}

#ocwrapper {
  background: white;
  border-right-width: 175px;
  background: white url(../../images/bgcolor_fix_white_200x5.gif) top left repeat;
}

#leftsidebar {
  margin-left: -200px;
  padding: 10px 0px 10px 10px;
  width: 190px;
  float: left;
  position: relative;
/* hide the left sidebar by default */
  display: none;
}

#rightsidebar {  
  margin-right: -200px;
  padding: 10px 10px 5px 0px;
  width: 190px;
  float: left;
  position: relative;
}


#rightsidebar {  
  margin-right: -175 px;
  padding-left: 0px;
  margin-left: -8px;
  width: 165px;
  background: white;
}
#contentheader .error, #contentheader .message {
  margin: 0px 176px 0px 50px;
}

\
#icwrapper {
	background: white url(../../images/bgcolor_fix_white_200x5.gif) top left repeat;
	border-right: 175px;
}


#home #ocwrapper {
/* background colour of left sidebar */
  border-left-color: #ffffff;
/* background colour of right sidebar */
  border-right-color: #ffffff;
  border-right-width: 180px;
  background: white url(../../images/bgcolor_fix_white_200x5.gif) top left repeat;
}
#home #rightsidebar {
overflow: hidden;
margin-right: -180px;
  width: 167px;
  background: white;
  background: white url(../../images/bgcolor_fix_white_200x5.gif) top left repeat;
}
#home #contentheader .error, #contentheader .message {
  margin: 0px 175px 0px 50px;
}

#home #a120_advert {
	float: right; 
	display: block; 
	margin: 0; 
	margin-top: -8px; 
	margin-right: -5px; 
	padding: 0px;
	display: none;
}

#home #adlinks_home {
	float: right; 
	display: block; 
	margin-top: -20px; 
	padding: 5px; 
	padding-right: 20px;
	display: none;
}

/*
    T O P   M E N U - R E L A T E D   S T U F F
*/
.nav_button, .nav_button_over
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 6px 11px 6px 11px;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	color: #ffffff;
	text-align: center;
}
.nav_button       { background-color: #006699 }
.nav_button_over  { background-color: #1D83B6 }
.nav_button_over:hover  { background-color: #1D83B6; color:#FFFFFF; }
.nav_button:hover { background-color: #1D83B6; color:#FFFFFF; }


.nav_cell, .nav_cell_over
{
	padding-top: 6px;
	padding-bottom: 6px;
}
.nav_cell      { background-color: #006699; }
.nav_cell_over { background-color: #1D83B6; }

.BlueSm
{
    font-weight: bold;
    font-size: 7.5pt;
    color: #006699;
    font-family: Verdana;
    text-decoration: none
}

.BlueSm:hover
{
	color: #1D83B6;
    text-decoration: underline
}

.tdTopMenuGap
{
	width: 1px !important;
	background-color: #1D83B6;
}

td#tdSearchMenu
{
	background-color: #ffffff;
	text-align: right;
}

td#tdSearchMenu td
{
	font-size: 11px;
	font-family: Arial, Tahoma, sans-serif;
}

td#tdTopMenu
{
	background-color: #006699;
}


.hr { font-family: Arial, Tahoma, sans-serif;
    font-size: 11px;
    color: #333333;
    font-weight: none;
}
.ls { font-family: Arial, Tahoma, sans-serif; font-size: 10px; color: #339900; font-weight: none; }
.footer { font-family: Arial, Tahoma, sans-serif; font-size: 10px; color: #333333; font-weight: none; }


body, td, th, input, select
{
	font-family: Arial, Tahoma, sans-serif;
	font-size: 10pt;
	color: #333333;
	font-weight: none;
}

a
{
	font-family: Arial, Tahoma, sans-serif;
	color: #003399;
	font-size: 12px;
	font-weight: none;
}

a:hover
{
	color: #BB3407;
}

a.vm
{
	font-family: Arial, Tahoma, sans-serif;
	font-size: 10pt;
}

h1
{
	color: #006699;
	font-size: 12px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	font-family: Arial, Tahoma, sans-serif;
}

#h2
#{
#	color: #000000;
#	font-size: 12px;
#	font-family: Arial, Tahoma, sans-serif;
#	margin-bottom: 0;
#	font-weight: normal;
#}

h2 { color: #333333;
 font-size: 12px;
 font-family: Arial, Tahoma, sans-serif;
 margin-bottom: 3px;
 font-weight: bold;
}

h2 a
{
	/* color: #19579E; */
	color: #181818;
	font-size: 12px;
	font-weight: bold;
	font-family: arial;
}

h2 a:hover
{
	color: #248CF0;
}

h2 a:visited
{
	color: #043D7F;
}

a.rtmenu
{
	font-size: 8pt;
	display: block;
	/* margin-top: 2px; */
	/* margin-bottom: 2px; */
	padding: 3px 0px 3px 10px;
	text-decoration: none;
	border-bottom: 1px dotted #cdcdcd;
}

a.rtmenu:hover
{
	background-color: #f4f4f4;
	color: #000000;
}

div.rtmenu
{
	margin: 0 0 0 0;
	padding: 0px 0px 0px 0px;
	border-style: none none none solid;
	border-color: #C8C8C8;
	border-width: 1px;
}

div.leftmenuheader
{
	padding-left: 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: bold;
	font-size: 8pt;
}

a.small
{
	font-size: 8pt;
}

td#tdMain
{
	padding-bottom: 4em;
}

li {
	list-style-image:url(../../images/blt_1.gif);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

  
hr.hrdashed
{
	width:100%;
	height: 1px;
	BORDER: 1px dashed #CCCCCC;
}

hr.catline
{
	width:100%;
	height: 1px;
	BORDER: 1px solid #CCCCCC;
}

td.fea {color:#333333;
	background-color:#F7F7F7;
	BORDER: #CCCCCC solid 1px; 
	font-family:Tahoma, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	margin: 2px 2px 2px 2px;}

td.tan{
	background-color: #D8C9B7;}
	
td.top {color:#333333;
	background-color:#F7F7F7;
	BORDER: #CCCCCC solid 1px;}

td.topnav {
	background-color:#E8F2E9;
	BORDER: #C1DCC4 solid 1px;
	 padding: 3px 3px 3px 3px;}

td.ads {color:#333333;
	background-color:#F7F7F7;
	BORDER: 2px dotted #cdcdcd; 
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: normal;}

td.dirnav {color:#333333;
	background-color:#F7F7F7;
	BORDER: 2px dotted #cdcdcd; 
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: normal;}

td.header{
	font-family:Verdana, Tahoma, Arial;
	font-size: 11px;
	font-weight: normal;
	color: white;
	font-variant: small-caps;
	
	padding-left: 10px;
	background-color:97A7B4;
	}

td.light_cream{
	background-color: #F2F2ED;}

.rightnav {font-family:Verdana, Tahoma, Arial;
	font-weight: normal;
	font-size: 11px;
  background: white;

}

div.sidebar { background: white; padding-top: 0px; margin-left: 5px; padding-left: 4px; width: 159px; }
div.sidebar h3 { background: #006699 url(../../images/rt-span.gif) top left no-repeat; color: #FFF; padding: 5px 0 4px 30px; height: 29px; margin: 0; font-size: 12px; line-height: 14px; }
div.didya { background: #EEEEE2; padding: 5px 10px; border: 1px solid #CACAA0; color: #33333; margin-left: 0px; margin-bottom: 15px; width: 137px; }
div.didya h4 { font-size: 100%; color: #9A881A; margin: 0 0 3px; }
div.didya p { margin: 0; }


/*--------*\
|* Category   *|
\*--------*/


#category dl, #home dl {
  margin: 10px 0px 0px 0px;
  width: 49%;
  float: left;
}
#category dt a {
  font-weight: bold;
  font-size: 12px;
}
#category dt, #category dd, #home dt, #home dd {
  display: block;
/*  text-align: middle; */
  margin: 0px 0px 0px 20px;
}
#category dd, #home dd {
  padding-bottom: 10px;
}
#category #td_subcat {
  
}
#category #td_subcat_title {
padding-top: 6px;
}



/*--------*\
|* link   *|
\*--------*/

#linkwrapper {
}

#linkimagewrapper {
  width: 120px;
  height: 90px;
/*  width: 122px;
  height: 92px;
  border: 1px solid #000000;
  background: white url(http://www.healthdigest.org/static/luna/images/logo_image_place_holder_blob_140x130.gif) top left  no-repeat; */
  float: left;
  margin: 3px;
  margin-right: 5px;
  margin-top: 0px;
  margin-left: 0px;
  padding-top: 1px;
  display: block;
  z-index: 100;
}

#linkdescriptionwrapper {
  width: 444px;
  float: right;
  display: block;
}

#linktitlewrapper {
	width: 100%;
	display: block;
}


/* links */
.linklisting {
  margin: 15px 0px 20px 10px;
  display: block;
}
.linklisting h4.linktitle, .linklisting p.linkurl, .linklisting p.linkrating {
  margin: 2px 0px;
}
.linklisting h4.linktitle a {
  padding-bottom: 0px;
}
.linklisting p.linkurl a {
  font-size: 9px;
  text-decoration: none;
}
.linklisting p.linkrating {
  font-size: 9px;
}
.linklisting p.linkrating .linkexpired {
  color: #8c3030;
  font-weight: bold;
}
.linklisting .linkdescription, .review .reviewcontent {
  margin: 0px 0px 5px 0px;
  padding: 5px;
  border: 1px solid #bbbfa1;
  background: #f8faed;
  overflow: hidden;
}
/* overflow: hidden doesn't work in ie unless the width is set */
* html .linklisting .linkdescription, * html .review .reviewcontent {
  width: 96%;
}
.linklisting p.linkactions {
  margin: 0px 0px 10px 0px;
}
.linklisting p.linkactions a, #detailed p.actions a, #jump_frame .actions a {
  padding: 1px 4px;
  border: 1px solid #bbbfa1;
  border: 2px solid #bbbfa1;
  font-size: 9px;
  text-decoration: none;
  display: inline;
}
.linklisting p.linkactions a:hover, #detailed p.actions a:hover, #jump_frame .actions a:hover {
  background: #e2e1eb;
}


/* priority links */
.priority_linklisting {
  margin: 15px 0px 20px 10px;
  display: block;
  background: #f8faed;
}
.priority_linklisting h4.linktitle, .priority_linklisting p.linkurl, .priority_linklisting p.linkrating {
  margin: 2px 0px;
}
.priority_linklisting h4.linktitle a {
  padding-bottom: 0px;
}
.priority_linklisting p.linkurl a {
  font-size: 9px;
  text-decoration: none;
}
.priority_linklisting p.linkrating {
  font-size: 9px;
}
.priority_linklisting p.linkrating .linkexpired {
  color: #8c3030;
  font-weight: bold;
}
.priority_linklisting .linkdescription, .review .reviewcontent {
  margin: 0px 0px 5px 0px;
  padding: 5px;
  border: 1px solid #bbbfa1;
  background: #f8aaff;
  overflow: hidden;
}
/* overflow: hidden doesn't work in ie unless the width is set */
* html .priority_linklisting .linkdescription, * html .review .reviewcontent {
  width: 96%;
}
.priority_linklisting p.linkactions {
  margin: 0px 0px 10px 0px;
}
.priority_linklisting p.linkactions a, #detailed p.actions a, #jump_frame .actions a {
  padding: 1px 4px;
  border: 1px solid #bbbfa1;
  border: 2px solid #bbbfa1;
  font-size: 9px;
  text-decoration: none;
  display: inline;
}
.priority_linklisting p.linkactions a:hover, #detailed p.actions a:hover, #jump_frame .actions a:hover {
  background: #e2e1eb;
}


#spacer {
	clear: both;
	padding: 30px 0px 0px 0px;
	display: block;
}

#google_ad_160_600{
	float: right; 
	text-align: right; 
	clear; 
	margin-right: -5px; 
	padding:  0px;
}