/* #content: Sets the width of the site. Make changes here to convert to a fixed width site */

/* Colors - african sunset scheme:
Black:				#000
Dark blue: 		#336
Gray-blue: 		#669
Purple: 			#96C
Light purple:	#CCF
Dark pink:		#C69
Skin:					#FCC
Dark skin:		#F99
Peach:				#F66
Orange:				#F96

Pastel purple #B4A1C6
*/

#content {
	position: relative;
	min-height: 100%;
	height: auto;
	height: 100%;
	text-align: left;
	z-index: 2;
	background-color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}

#content,
#width {
	width: 1000px;
	z-index: 2;
}

/* #leftColumn: Contains the logo and the side menu */
#leftColumn {
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	border-right: 1px solid #EEE;
	margin: 0px 0px 0px 10px;
	padding: 0px 0px 0px 0px;
	background-color: #FFF;
}

#leftColumn,
#width {
	width: 225px;
}

#logo {
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#tagline a {
	float: left;
	margin: 0px 0px 10px 0px;
	padding: 0;
	font: 400 1.4em "trebuchet ms", serif;
	color: #777;
}

#tagline a:hover {
	text-decoration: none;
}

/* .leftMenuTitle: The titles of the left menu */
.leftMenuTitle {
	float: right;
	height: 40px;
	width: 220px;
}

.leftMenuTitle a {
	font: 400 2em "trebuchet ms", serif;
	color: #336;
	text-decoration: none;
	padding-left: 7px;
	vertical-align: -16px; /* !!! 22px looks best on IE, but too low on Firefox - fix */
/*	line-height: 2.35em;*/ /* !!! works well on Firefox when removing vertical-align, but then IE breaks - fix */
} 

.leftMenuTitle a:hover {
	color: #C69;
	cursor: auto; /* !!! doesn't work on Firefox - fix */
	text-decoration: none;
}

/* Active menu item */
.leftMenuTitle a.here {
	color: #600;
	background: none;
	cursor: default;
	border: none;
}

.leftMenuTitle a.here:hover {
	color: #600;
	cursor: default;
}

#leftMenuTitleWomen {
	height: 40px;
	background: url(../images/womenBG_01.gif) no-repeat 0px 0px;
}

#leftMenuTitleWomen.here {
	background: url(../images/womenBGhere_01.gif) no-repeat 0px 0px;
	border: none;
}

#leftMenuTitleMen {
	height: 40px;
  background: url(../images/menBG_01.gif) no-repeat 0px 0px;
}

#leftMenuTitleMen.here {
  background: url(../images/menBGhere_01.gif) no-repeat 0px 0px;
	border: none;
}

#leftMenuTitleCouples {
	height: 40px;
  background: url(../images/couplesBG_01.gif) no-repeat 0px 0px;
}

#leftMenuTitleCouples.here {
  background: url(../images/couplesBGhere_01.gif) no-repeat 0px 0px;
	border: none;
}

#leftMenuTitleProfessionals {
	height: 40px;
	background: url(../images/ProfessionalsBG_01.gif) no-repeat 0px 0px;
}

#leftMenuTitleProfessionals.here {
	background: url(../images/professionalsBGhere_01.gif) no-repeat 0px 0px;
	border: none;
}


/* .leftMenu: The left menu items */
.leftMenu {
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul.leftMenu {
	width: 220px;
	background: url(../images/menBG_02.gif) repeat-x 0px 0px;
}

.leftMenu li {
	margin-left: 0px;
	display: inline;
	list-style-type: decimal;
}

.leftMenu li a {
	margin-top: 5px;
	display: block;
	font: 400 1.1em "trebuchet ms", serif;
	line-height: 1.3em;
	color: #C69;
	text-decoration: none;
	text-align: left;
	padding-left: 7px;
} 

.leftMenu li a:hover {
	color: #C69;
	text-decoration: underline;
}


/* #mainColumn: Contains the main menu and center pane */
#mainColumn {
	position: relative;
	float: right;
	top: 0;
	left: 0;
	z-index: 3;
	background-color: #FFF;
}

#mainColumn,
#width {
	width: 743px;
}

/* #topMenu: The top level site menu */
#topMenu { 
	position: relative;
	float: left;
  clear: both;
	margin: 0px 0px 0px 1px;
	padding: 0px 0px 8px 0px;
	background-color: #FFF;
	border-bottom: 1px solid #EEE;
}

#topMenu ul {
  margin: 0;
  padding: 0;
}

#topMenu li {
	display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#topMenu li a {
	display: inline;
	float: left;
	margin: 0 1px;
	padding: 4px 0.49em;
	font: 400 1.5em "trebuchet ms", serif;
	text-decoration: none;
	text-transform: lowercase;
	color: #336;
	border-top: 5px solid #FFF;
	background: #FFF url(../images/topMenuBG.gif) repeat-x top left;
}

#topMenu li a:hover {
  color: #600;
  border-top: 5px solid #F66;
}

#topMenu li a.here {
  color: #600;
	border: none;
  border-top: 5px solid #FC9;
	cursor: default;
}

#topMenu li a.here:hover {
  border-top: 5px solid #FC9;
	cursor: default;
}

/* Holds the lower part of the main column, contains mainPane and rightColumn */
#lowerMainColumn {
  margin-left: 0;
}


/* Holds the main pane (the picture on the homepage) */
#mainPane {
	position: relative;
	top: 0;
	margin: 0px 0px 0px 8px;
	padding: 0px 20px 0px 0px;
	width: 540px;
	z-index: 3;
	background-color: #FFF;
	border-right: 1px solid #EEE;
}

/* #rightColumn: Holds the content of the right column */
#rightColumn {
	position: relative;
	left: 0px;
	top: 0px;
	float: right;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 3;
}

/* #rightMenuItem: The menu on the right side of the screen */
.rightMenuItem {
	width: 145px;
	height: 35px;
	font: 400 1.2em "trebuchet ms", serif;
	line-height: 2;
	display: block;
	margin: 0px 15px 0px 0px;
	padding: 5px 0px 0px 4px;
	text-align: left;
	border-top:    1px solid #FFF;
	border-right:  1px solid #FFF;
	border-bottom: 1px solid #FFF;
	border-left:   1px solid #FFF;
}

.rightMenuItem.associates {
  background: url(../images/rightMenuAssocBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.calendar {
  background: url(../images/rightMenuCalendarBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.blog {
  background: url(../images/rightMenuBlogBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.facebook {
  background: url(../images/rightMenuFacebookBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.twitter {
  background: url(../images/rightMenuTwitterBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.promotions {
  background: url(../images/rightMenuShoppingBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.shopping {
  background: url(../images/rightMenuPromotionsBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.podcasts {
  background: url(../images/rightMenuPodcastsBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.newsletter {
  background: url(../images/rightMenuNewsletterBG.gif) no-repeat 0px 0px;
}

.rightMenuItem.here {
  color: #336;
}

.rightMenuItema a:hover {
  text-decoration: underline;   
}

.ads {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  height: 120px;
  width: 145px;
  background: #FFF;
}

/* contactText: Text in contact page */
.contactText {
  text-align: center;
  background: url(../images/feather2.gif) no-repeat;
}

/* not in use */
.trasparent {
  filter: alpha (opacity=50); 
}

.quote {
  margin-left: 20px;
  font-style: italic;
  color: #936;
}

.source {
  font-size: .8em;
  float: right;
}

.homepageQuote
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
	width: 145px;
	color: #bf8b5e;
}

.homepageQuoteSource {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
	width: 145px;
	font-size: .8em;
	line-height: normal;
	float: right;
	line-height: 1.4em;
}

.moreTestimonials {
	font-weight: bold;
	float: right;
}
	
/* Width classes used by the site columns */
.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}

.width20 {
  width: 19.5%;
}

.width15 {
  width: 14.5%;
}


/* Alignment classes */
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clearBoth {
  clear: both;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}


/* Generic display classes */
.small {
  font-size: 0.8em;
}

.grey {
  color: #888;
}

.grey a {
  color: #933;
}

.grey a:hover {
  color: #933;
}

.gradient {
  margin-bottom: 2em;
/*  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; */
}

.coupon {
	width: 400px;
	padding: 0px 10px 10px 10px;
	background-color: #FCC;
  border: 1px dashed #222;
}

#push {
	height: 6em; /* push must be the same height as footer */
}

/* #footer: The page footer */
#footer {
	height: 6em; /* .push must be the same height as .footer */
 	position: relative;
	width: 100%;
	left: 0px;
	bottom: 0px;
	float: left;
	clear: both;
	margin-top: 0;
	font-size: 0.85em;
	background-color: #FFF;
	background: url(../images/footerBG.gif) repeat-x top left;
	z-index: 99;
}

/* Sets the width of the footer content */
#footer #width {
	width: 100%;
}

/* rightFooter: the fotter on the right column */
#legalNotice {
	color: #AAA;
	font-size: 0.8em;
	margin: 10px 5px 0px 5px;
	line-height: 1.2em;
}

#textBox {
  margin: 5px 0px 10px 15px;
	padding: 5px 8px 0px 10px;
  border: 2px solid #DDD; 
	background: url(../images/diagonalStripes1.gif) repeat top left;
}

.textBoxLeft {
  margin: 5px 0px 5px 0px;
	padding: 0px 8px 5px 5px;
  border: 2px solid #DDD; 
	background: url(../images/diagonalStripes1.gif) repeat top left;
	float: left;
}

.textBoxLeft li {
	list-style: inside square;
  list-style-image: none;
}

.qsource {
	float: right;
	color: gray;
}

.faqQuestion {
  background: url(../images/questionMarkSmall.gif) no-repeat 440px 40px;
}

.quizResults {
	overflow: auto;
	border-width: 0px;
	background-color: #EEF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	padding: 5px 5px 5px 5px;
}

.bookName {
	float: left;
	clear: both;
	vertical-align: top;
	font: 400 1em verdana, arial, sans-serif;
  	line-height: 160%;
	color: #222;
}

.bookName a {
	float: left;
	clear: both;
	font: 400 1.3em verdana, arial, sans-serif;
	color: #222;
	text-decoration: underline;
}

.bookImage {
	padding: 5px 10px 20px 0;
	width: 110px;
}
	
.bookByline {
	font: 400 1em verdana, arial, sans-serif;
	color: #999;
}
