body {
	margin: 5px;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 12pt;
	background: white;
	behavior: url("/csshover.htc");
	}
* {margin:0; padding:0;}
/* Layout Structure */

#wrapHead {
	margin-right: 5px;
	width:768px;
	background: #b7c5c1 url(/images/corner-br.gif) no-repeat bottom right;
}	
#wrapRest {margin-right: 5px;
	width:768px;
	background:   url(/images/menuBarHome128b.gif) repeat-y top left;

}	

#content {
	float: right;
	width: 700px;
	line-height: 1.5em;	
	float: none !important;
}

#divider{
	background-image: url(/images/whiteLine.gif);
	background-color: white;
	padding-top: 0px;
	font-size: .5em;
}
#navContain{

}
#sidebar {
	float: left;
	width: 128px;
	display: none;
	}
#bottomWrap{
	padding-top: 0px;
	font-size: .5em;
	width: 640px;
	margin-left: 128px;
	background: url(/images/cornerGray-lr.gif) no-repeat bottom right;
	
		clear: both;
}
#footer {
	clear: both;
	padding-top: 2px; /* top r/l bottom*/
	padding-right: 1em;
	background: #fff;
	height: 1%;
	}

/* gutters  */
#content .gutter{
	margin: 0 2em 2em 1.5em;
	margin-top: 1em;
/*	padding-left: 5px;
	padding-bottom: 15px;*/
}
#sidebar .gutter{
	/*padding: 15px 0;*/
}

/* HEADER */	
#headerRight {
	float: right;
	width: 552px; /*538px;*/
	display: none;
	}
#headerLeft {
	float: left;
	width: 216px;/*230px;*/
	background: #b7c5c1;
	}	

#headerLeft h1 {
	margin: 0;
	margin: 5px 0 0 0px;	
	padding: 0;
	background: url(/images/logo2.gif) no-repeat top left;
	height: 80px;
	}	
	
form.search{
	text-align: right;
	margin: 10px 10px 0 0;	
}
	

/* from http://24ways.org/advent/centered-tabs-with-css */
#headNav{
	
}
#headNav ul, #headNav ul li {
   list-style: none;
	margin-top: 40px;
 }

 #headNav ul {
   text-align: right;
 }

 #headNav ul li {
   display: inline;
   margin-right: .75em;
	font-size: 10px;
}

 #headNav ul li.last {
     margin-right: 8px;
 }	
#headNav li a {
/*     padding: 5px .5em;*/
	padding: 5px 8px;/*5px 2px;*/
	text-decoration: none;
	color: #4d4c4c;
	font-weight: bold;
 } 
#headNav li a:hover {color: black;

 } 
/*orig lola - before pseudo sliding doors technique
 a#lola img{
 	border: 0;
	width: 88px;
	background: url(/images/askLolaNavBarNew2.gif) no-repeat top left ;
}
 a#lola:hover img{
 	border: 0;
	background: url(/images/askLolaNavBarOver.gif) no-repeat top left;
}
 */
 a#lola img{
 	 border: 0;
	width: 88px;
 	background: url(/images/askLolaTogether.gif) no-repeat 0 0 ; 
 }

 a#lola:hover img{
 	border: 0;
	background-position: 0 -30px; 
}

/*end of headNav inside header*/
	

/*main nav menu starts here */
/*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/

.nav {
	border: 1px solid #FFF; /* borders the top and bottom of the top nav */
	border-width: 0 0 1px 0;
	/*	width: 100%;*/
	width: 640px;
	margin-left: 128px;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 1.1em; works at medium or smaller*/
	font-size: 13px;
	background:  #8ba7bb url(/images/cornerGray-tr.gif) no-repeat top right;
	display: none;
}

.nav li {list-style: none;} /* removes list bullets */

.mainnav {
	width: 128px;
	float: left;
	text-align: center;
}

.floatfix {margin-right: -3px;}

.parent {position: relative;} /* needed for absolute positioned drop downed*/
										/* it is this that is hovered */
/*XXXXXXXXXXXX Primary dropdown rules XXXXXXXXXXX*/

/*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/
/* there's speical stuff in the ie css */

.brclear { /* Use a break with this class to clear float containers */
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}
/* removed some drop down window stuff */

	
/*end of main nav */		
/* 
-
-
-
*/
/* content */
#content h2{
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 1.5em;
	color: black;
}

.bold{
	font-weight: bold;
}
.italics{
	font-style: italic;
}
#content .redText{
	color: #ff0000;
}

/* be aware of the font size with the floated picture being shoved up */
.super {
vertical-align: super;
font-size: 0.5em;
} 
p .super {
vertical-align: super;
font-size: 0.75em;
} 
.subscript {
vertical-align: sub;
font-size: 0.5em;
}
	

/*xxxxxxxxxxxx           sidebar menu          xxxxxxxxxxxxxxxx */
#sidebar h2{
	font-size: 1.2em;
/*	padding: 5px 0;*/
	padding: 5px 1px 5px 5px;
	border-top: 2px solid #fff;
	background-color: #68867c;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
/* set margin-left for ie/opera, padding-left for others */
/* about lists and csacading: embedded class objects don't work for FF; ie .subnav li a
	However, embedded ID objects work, ie #submenu li li a
	*/	
.box{
	border-top: 2px solid #fff;
	font-size: 11px;/*.90em;*/
}
.boxFollows{
	border-top: 2px solid #fff;
	font-size: 11px;
}

#sidebar ul{
	margin-left: 0px; 
	padding-left: 5px;
	padding-bottom: 5px;
	list-style-type: none;
}
#sidebar li{
	padding: .15em 0;
}
#sidebar .box a{
	display: block;
	width: 100%;
	text-decoration: none;
	color: #4d4c4c;
	font-weight: bold;
	line-height: 1.5em;	
}
#sidebar .box a:hover{
	color: #000
}
#sidebar .boxFollows a{
	display: block; 
	width: 100%;
	color: #4d4c4c;
	font-weight: bold;
	line-height: 1.5em;
}
#sidebar .boxFollows a:hover{
	color: #000;
}

.box h3, .boxFollows h3 {
	font-size: 11px;
	color: #000;
	font-weight: bold;
}
/*xxxxxxxxxxxx         end  sidebar menu          xxxxxxxxxxxxxxxx */



/* xxxxxxxxxxxx          trailer stuff            xxxxxxxxxx*/
#footNav ul, #headNav ul li {
     list-style: none;
	  margin-top: 0px;
	  color: #007041;
 }

 #footNav ul {
    text-align: right;
	 line-height: 2;
 }

 #footNav ul li {
    display: inline;
	 font-size: .8em;
 }

 #footNav ul li.last {
    margin-right: 0;
	 padding-right: 0;
 }	
#footNav li a {
	padding: 5px 0px 10px 10px;
	text-decoration: none;
	color: #007041;
 } 

#footNav li a:hover {
	color: black; 
} 

.footerCopyText{
	 text-align: right;
	 font-size: .85em;
	 color: #A7A7A7;
}

/* xxxxxxxxxx          end trailer stuff          xxxxxxxxxx */





/*xxxxxxxxxx           misc other items           xxxxxxxxxx */
.clearfloats{
	clear: both;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* xxxxxxxxxx          end misc stuff         xxxxxxxxxx */



/* xxxxxxxxxx          content area          xxxxxxxxxx */
#contentLists{
/*	float: right;*/
/*	float: left;
	width: 300px;*/
	z-index: 50;
	padding: 0;	
	padding-left: 15px;
/*	border-left: solid 2px red; for testing only
*/
}

#contentMain{
/*	float: left;
	width: 410px;*//*	this also works width: 70%;*/
	margin: 0 5px 10px 0;
}

/* xxxxx     right side content stuff     xxxxx */
#contentLists h3, h5{
	color: #475B54;
	padding-top: 5px;
}
.contentListBox{
/*	margin: 0 0 15px 0;*/
	padding-left: 5px;
	background: url(/images/home/long160_02.gif) no-repeat bottom left;
	width: 160px;
	width: 200px;
	margin-bottom: 15px;
}

#contentLists ul{
/*	margin: 5px 1.25em 5px 1.25em; */
	margin: 5px 1.25em 5px .25em;
	padding-left: 10px;
	list-style: none;
	list-style-image: url(/images/bullet2.gif);
	background:transparent;
}
#contentLists li{
	padding: .3em 0;
/*	text-indent: .5em;*/
}
#contentLists a, #contentLists a:visited{
	COLOR: #446175;
}
#contentLists a:hover, #contentLists li:hover{
	color: #000;
	list-style-image: url(/images/bullet3.gif);
}

#content .listNoBullet{
list-style-type: none;
	
}

.topofList{
	background: url(/images/home/long160_01.gif) no-repeat top left;
	margin-left: -5px;
	padding: 0 8px;
}

#contentLists table td { 
font-size: 12px;
line-height: 1;
margin: 0;


}
#contentLists table th{ 
font-size: 12px;
text-align: left; 
line-height: 1;
margin: 0;
}
.extraHeight{
	padding: 0 0 4px 0;
}

.green{
	color: #475B54;
}
.reverseTH{
	background: #000;
	color: white;
	text-align: center;
}

/* xxxxx     end right side content stuff     xxxxx */

/* xxxxx     left side content stuff     xxxxx */
.toLeft100{
		float: left;
		width: 100px;
	}
.toLeft300{
	/*	float: left;*/
		width: 300px;
	}
.toRight100{
	float: right;
	width: 100px;
}
/* the next two go together
	having margin-left will push over a paragraph past an image left aligned
	also used to .toLeft100 on a img for the width of the image
	Notice that it also cascades the .toLeft300 above, which has the width
		*/
		
p.toLeft300{
	margin-bottom: 5px;
}
p.toLeft300alignImage{
	margin-bottom: 5px;
	margin-left: 100px;  
}

/*end of these two */


p.toLeft400{
	width: 400px;
	margin-bottom: 5px;
}

#contentMain a:link {
text-decoration: none;
color:  #475B54;
font-weight: bold;
}

#contentMain  a:visited {
text-decoration: none;
color:  #475B54;
font-weight: bold;
}
#contentMain a:hover{
	color: black;
}
#contentMain h3 a:hover, #contentMain dt a:hover{
	text-decoration: none;
	background: #AEAEAE;
	border-top: solid 2px white;
	border-bottom: solid 2px white;
}


div#content .boxbp ul{

 	margin-left: 1.5em;
	list-style: disc;
	margin-bottom: 1.2em;
	padding-bottom: 0;
	margin-top: -1.2em;
 }

/* xxxxx     bullet proof box    xxxxx */ 
.boxbp {
 	width: 420px;
 	margin-bottom: 10px;
 	background: url(/images/home/rounded520_02.gif) no-repeat bottom left; 
 page-break-inside: avoid;
 
  }
  
 /* same markup as #contentMain dt */
.boxbp h3 {
  margin: 0;
  padding: 6px 12px 4px 10px;
  font-size: 1.5em;
  border-bottom: 1px solid #9093a8;
	background: url(/images/home/rounded520_01.gif) no-repeat top left;  
	color: #475B54;/* color: #68867c; */
  }
  
.boxbp ul, .boxbp p {
  padding: 5px 15px 14px 15px;
  list-style: none;
}
  
.boxbp li {
  margin: 0 0 6px; 
} 
.boxbp .moveOverForImage100{
	padding-left: 108px;

}

.boxbp img{
	margin-left: 2px;
	margin-right: 8px;

}
.alt img{
 	margin-right: 2px;
 	margin-left: 5px;
	
 }