/*	base_global.css contains styles that are used throughout the entire site
	things like the document's BODY and SPONSOR LOGOS
	
	MODULE-SPECIFIC things such as TITLE and subnavigation are kept in other files:
	- base_balance.css (for balance)
	- base_achieve.css (for goal-setting)
	
*/

/*	comments on the base stylesheet
 *	it's okay to use all of the css2 and css3 stuff
 *	most common stuff:
 *	font-size: always use %ages with font size so that users can resize the text as they see fit
 *	border-width: you can use the border-bottom-width, border-top-width, etc. to only have borders on certain sides
 *		of containers. always use px units here.
 *	color: is for font color; MUST be a web-safe color
 *	background-color is for container background; SHOULD be a web-safe color
 *	float: left makes the container stick to the left side of the page; right makes it stick to the right
 *		side. if there are a lot of containers in a row that float, they will be in the same vertical position
 *		until there is no  more horizontal space left. then they will wrap.
 *	margin: is specified top right bottom left; it's the amount of space AROUND the container
 *	padding: is specified as a single value in px; it's the amount of space INSIDE a container, bewtween the container
 *		boundaries and where any text or images start.
 *	text-transform: will make all text be uppercase or lowercase, as specified
 */
 
/*	change the cursor for form field labels */
label {
	cursor:pointer
}

/*	define basic font family and sizes 
 *	change this to affect the base style of all text on the web site
 *	other styles, such as error text, applies itself ON TOP OF this. so no need to repeat font-family etc later.
 *	A is for the basic link style
 */
body {
	background-color:#fff;
	color: #000;
	font-family: times new roman,serif; 
}


a, a:VISITED, a:ACTIVE, a:HOVER {
	text-decoration: underline;
}


h2 {
	font-size:115%;
}


/*	ccen is a container used to center stuff */
div.ccen {
	clear:both; 
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

/*	l b r are for the 3 columns (left body right) 
 *	there are different versions of body for when left and right get dropped

 */
 
#all {
}

/*	h is for the big top header */
#h { 
}

/*	tn is for "top navigation"
 *	a.tn are link styles
 *	div.tn are for box styles. 'on' is for when the tab is selected. 'off' is for when it isn't.
 *  div.tn_c is the container for the top navigation
 */

#tn_c {
	display: none;
}

div.tn_off a, div.tn_off a:VISITED, div.tn_off a:ACTIVE, div.tn_off a:HOVER,
div.tn_roll a, div.tn_roll a:VISITED, div.tn_roll a:ACTIVE, div.tn_roll a:HOVER {
}
div.tn_roll a:HOVER {
}
div.tn_on {
}
div.tn_off, div.tn_roll {
}
div.tn_bet {
}
div.tn_l {
}
div.tn_r {
}

.wrapper_top_nav, .wrapper_top_bar, .wrapper_top_logo {
	display: none;
}

/*	sn is for "sub navigation" (the second level, like for lmp nav)
 *	a.sn are link styles
 *	div.sn are for box styles. 'on' is for when the tab is selected. 'off' is for when it isn't.
 *  div.sn_c is the container for the top navigation
 */

#sn_c {
	display:none;
}
a.sn,a.sn:VISITED,a.sn:ACTIVE {
}
a.sn:HOVER {
}
div.sn_on {
}
div.sn_off {
}
div.sn_bet {
}
div.sn_l {
}
div.sn_r {
}

/*	bc are styles for the breadcrumb trail
 *	div is for the container that holds it (and all un-linked text)
 *	a.bc is the link style
 */
#bc, #bc_sub {
	position:absolute;
	left:8px;
	top:100px;
	font-size:12px;
	font-weight:normal;
	display:none;
}

#bc a, #bc a:ACTIVE, #bc a:VISITED, #bc_sub a, #bc_sub a:ACTIVE, #bc_sub a:VISITED {  
	text-transform: lowercase;
}
#bc a:HOVER {
}



#footl, #footb, #footr {
	display: none;
}

/*	these 3 divs are for the basic page containers
 *	'l' is for the left column
 *	'b' is for the body 
 *	'r' is for the right column
 *	'capl' 'capb' 'capr' are for the three caps that go atop these columns
 *	'conl' 'conb' 'conr' are for the content
 */

#capl, #capb, #capr, #l, #r {
	display: none;
}

#bpad,
.body_pad {
	height:112px;
}

#b_both, #b_ronly, #b_lonly, #b_none {
	padding:0px; 
	width: 100%;
	position: relative;
}

/*	p is for progress
 *	p_cur is for when it's the current page/thing
 *	p_no is for when it's undone
 *	p_yes is for when it's done
 */
 
#p, div.p_cur, div.p_yes, div.p_no {
}

/*	m is for the menu (which can appear on the left OR the right, depending on the page)
 *	div.m are for box styles (on when it's selected; off when it's not)
 *	a.m_off is for the link style when it's off
 *	
 */
#m_top, #m_bot {
	display: none;
}

div.m_on, div.m_roll, div.m_off, div.m_off_check {
	display: none;
}


div.m_off a, div.m_off a:VISITED, div.m_off a:ACTIVE, div.m_off a:HOVER, 
div.m_roll a, div.m_roll a:VISITED, div.m_roll a:ACTIVE, div.m_roll a:HOVER,
div.m_off_check a {
}

#secname {
	display:none;
}

/*	various styles of text used throughout
 *	.error is for error messages
 *	.title is for all page titles
 *	lin is for 'you are logged in as'
 */

.error {
	display: none;
}

#lin {
	font-size:12px;
	position:absolute;
	right:10px;
	top:100px;
	width:250px;
	text-align:right;
}

#lin a {
}

#title, #title_sub {
	visibility:hidden;
}

div.guide_title_print {
	font-family: myriad,verdana,arial,helvetica,sans-serif; 
	font-style: italic;
	font-size:120%;  
}

#content {
	width: 100%;
	line-height:130%;
	font-size:95%;
	position: relative;
}


/*	fbutton is for form submit buttons */
input.fbutton, div.bn_off, div.bn_on {
	cursor:pointer; 
	border: solid black 2px;
	background-color:#fff; 
	padding:2px; 
	font-size: 95%; 
	color:#000; 
	font-weight:bold;
}

/*	bn is for 'bottom navigation'
 *	(that is, the prev/next links when they are used)
 *	div.bnall is for the whole thing
 *	div.bn is for each link inside
 */

#bn_c {
}
 
div.bn_off a, div.bn_off a:VISITED, div.bn_off a:ACTIVE, div.bn_off a:HOVER {
	text-decoration: none;
}


/*	f is for the footer (copyright info etc) */
#f {
}

/*	fn is for "footer navigation"
 *	a.fn are link styles
 *	div.fn are for box styles. 'on' is for when the item is selected. 'off' is for when it isn't.
 *  div.fn_c is the container for the top navigation
 */
#fn_c {
	display: none;
}

div.fn_off a, div.fn_off a:VISITED, div.fn_off a:ACTIVE {
}

div.fn_off a:HOVER {
}

div.fn_on, div.fn_off {
}

div.fn_l {
}

div.fn_bet {
}

div.fn_r {
}

#sidecon,#sidecon2 {
	display: none;
}


/*	these are for logos */

#logo1, #logo2, #logo3 {
	position:absolute;
	padding:0px;
	background-repeat:no-repeat;
	background-position:center center;
	height:75px;
	width:170px;
}

#logo1 {
	left:0px;
	padding-left: 20px;
	top:0px;
	width:170px;
	height:77px
}

#logo2 {
	left:220px;
	top:0px;
	width:150px;
}

#logo3 {
	left:440px;
	top:0px;
	width:150px;
}

#lin, .logged_in_status {
	display: none;
}

/*	and other misc images */

#image1, #image2, #image3 {
	display: none;
}

#top {
	display: none;
}

/*
	qspace is the spacer before extraspace; used to be q
*/
div.qspace{
	clear: both; 
	margin-top: 5px; 
	position: relative; 
}

/*	layout of text questions 
 *	
 *	q is the container for a question
 *	
 *	qh is for questionnaire headings/information between sets of questions
 *
 *	ql and qf are a pair for when questions are lined up with the form
 *	label on the left with the field to its right, like this..
 *		field name: ________
 *		  [ql]          [qq]
 *	ql is for the left label part (first name: )
 *	qf is for the form field (the right part)
 *	
 *	qq is for the question being asked when it is positioned above form elements
 *	
 *	qo is for an option that comes beneath a main question (qq)
 *	like, one for each radio button, or checkbox.
 *	
 *	qi is for an indented option, like for when it's like
 *	enter your full name into the box below:
 *			_________
 */
div.q { 
	clear: both; 
	margin-top: 5px; 
	position: relative;
}
div.qh {
	clear:both;
	margin-top:20px;
	padding:4px;
}
div.ql { 
	float: left; 
	text-align: right;
	font-weight:bold;
	position: relative;
}
div.qq {
	clear: both;
}
div.qf { 
	float: left; 
	padding-left:5px;
	position: relative;
}
div.qo {
	margin-left: 30px;
	clear: both;
	text-indent: -20px;
}
div.qi {
	margin-left: 30px;
	clear: both;
}
.qShade {
	

}

.qShade td{
position:relative;
padding-top:85px;
}

.servings_table {
	width: 400px;
	font-size:85%;
}

.servings_top {
	width:400px;
	height: 10px;
	background: url('/balance/imgspanish/guide/yellow_top_sp.gif') no-repeat;
}

.servings_header {
	text-align: left;
	padding-left: 7px;
	padding-bottom: 5px;
	font-weight: bold;
	background: #F2CF5E;
}

#servings_header_1 {
	width:160px;
}

.servings_row {
	text-align:left;
	padding-left: 7px;
	border-left: solid 1px #F2CF5E;
}

#servings_row_right {
	border-right: solid 1px #F2CF5E;
}

#servings_row_a {
	background: #F9F3DA;
}

#servings_row_b {
	background: none;
}

.servings_row_bottom {
	padding:0px;
	height:16px;
}

#servings_row_bottom_1 {
	height: 20px;
	border: none;
	width: 160px;
	background: url('/balance/imgspanish/guide/yellow_btmleft_sp.gif') no-repeat bottom left;
}



#servings_row_bottom_2 {
	border-left: solid 1px #F2CF5E;
	border-bottom: solid 1px #F2CF5E;
	width: 120px;
	height: 20px;
}



#servings_row_bottom_3 {	
	height: 20px;
	border: none;
	border-left: solid 1px #F2CF5E;
	width: 120px;
	background: url('/balance/imgspanish/guide/yellow_btmright_sp.gif') no-repeat bottom right;
}

.key_parts_content {
	background: #F7F0F9;

	padding:0px;
	padding-left:15px;
	padding-right:20px;
}

.rate_box_content {

	border-left: 1px solid #D6BAE3;
	border-right: 1px solid #D6BAE3;
	padding:0px;
	padding-left:15px;
	padding-right:15px;	
	padding-bottom: 5px;
}

.imageLeft {
	padding-right: 15px;
	padding-bottom: 5px;
}

#time_out{
	display:none;
}

.powered_by{
	position:relative;
	top:50px;
	left:450px;
}