/*---------------------------------------------------------------*/
/*----------------------MEADOWBROOK STUDIO----------------------*/
/*---------------------------------------------------------------*/
/*----------------------CSS by Debbie Valeri---------------------*/
/*---------------------------Feb 2009----------------------------*/

* {margin:0; padding:0;}
body {
	font-family: verdana, arial, sans-serif; 
	font-size:100%; 
	behavior: url(csshover.htc);
	background-color: #958E7C;                 /*DK GRAY*/
	background-image: url(images/BgDkGray.jpg);
	text-align:center; /*for IE*/

	scrollbar-face-color: #97907A; 
	scrollbar-base-color: #97907E;
	scrollbar-arrow-color: #42393A; 
	scrollbar-highlight-color: #B8B49B;
	scrollbar-darkshadow-color: #42393A; 
	scrollbar-shadow-color: #76705F;  
	}

	/*----------------------------------*/
	/*TYPOGRAPHY & LINKS CSS STARTS HERE*/
	/*----------------------------------*/
p {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px; color:#404039; 	/*dark gray*/ 
	}
h1 {font-family: Times, "New Century Schoolbook", serif; font-size: 28px; 
	font-weight: bold; 
	color: #837c6b;	/*--faded gray--*/
	text-transform: uppercase; letter-spacing: 3px;
	margin:9px 0 0 15px; 
 	}
h2 {font-size:18px; color:#3c516d;  /*--should be cream--*/
	}
h3 {font-family: Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #6f6857; /*--charcoal gray--*/
	letter-spacing: 2px;  
	vertical-align: top; word-spacing: 2px; 
	margin: 0 0 0 35px; text-transform: uppercase;
	}
h4 {font-family: Arial, Helvetica, sans-serif; 
	font-size: 17px; letter-spacing: 2px;   
	line-height: 17px; font-weight: bold; 
	color: #D3BB7C; 	/*ochre*/	 
	}
letter-spacing: 2px; 
	text-align: right; vertical-align: top; 
	word-spacing: 2px; margin: 0 35px 0 0; 
	text-transform: uppercase;
	}
h5 {font-size:12px; color:#3c516d; 
	}
.centertext {text-align:center;} 
.allcaps {text-transform:uppercase;}
.caption {font-size:10px;}
.left {float:left;}
.right: {float:right;}

	/*-----------------------------*/
	/*OUTER WRAPPER STARTS HERE*/
	/*-----------------------------*/
div#outerwrapper {
	width:760px; 		/*Change back to 740ish later*/
	background-image: url(images/BgLtGray.jpg);
	margin:  25px auto 0px auto;	/*25px auto 0px auto Space Above & Below */
	text-align:left; 		/*for IE*/
	}

	/*-----------------------*/
	/*HEADER LINKS START HERE*/
	/*-----------------------*/
div#header {	
	position:relative;  /*f I need to position:absolute the type in div within*/
	}

	/*---------------------------*/	
	/*CONTENTWRAP CSS STARTS HERE*/
	/*---------------------------*/
div#contentwrap {
	background-color:#978f7d;  /*978f7d*/
	background-image:url(images/BgLtGray.jpg);
	width:756px; /*760px minus the 2 borders*/
 	float:left;  	
	margin: 0 0 0 0;
	border-left: 2px solid;
	border-right: 2px solid;
	border-color: #716b5e;
	}

	/*-----------------------*/	
	/*CONTENT CSS STARTS HERE*/
	/*-----------------------*/		
div#content {
	background-image:url(images/swirl_lowerpart.jpg);  
	background-repeat: no-repeat;
	background-position: top left;	
	float:left;
	}
div#title_bar {
	width: 756px;
	height: 60px;	
	}

	/*-------------------------------*/	
	/*PORTFOLIO PAGES CSS STARTS HERE*/
	/*-------------------------------*/

	/*------------------------*/	
	/*Portfolio Page-Left Side*/
	/*------------------------*/

div#portfolio_left {
	/*position: relative; */
	float:left;
	width: 190px;	/ *212px*/
	height: 384px;
	margin 40px 0 0 0;
	}
div#submenu2_head h4{
	margin: 18px 25px 0 10px;
	text-align:right;
	}
div#portfolio_left ul {
	margin: 32px 25px 0 0;
	}
div#portfolio_left ul li {
	text-align:right;
	list-style-type:none;
	}
div#portfolio_left ul li a{
	text-align:right;	
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	font-weight: bold; 
	color: #FFF4C8; 
	line-height: 22px; 
	font-weight: bold;
	text-transform: uppercase; 	
	text-decoration: none; 
	letter-spacing: 1px; 
	word-spacing: 1px;
	}
div#portfolio_left ul li a:hover {
	font-size: 14px; 
	line-height: 22px; 
	color: #FFF4C8; 
	text-decoration: none; 
	border-color: #968F7D #968F7D #D3BB7C; 
	border-style: dotted; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 2px; 
	border-left-width: 1px
	}
div#portfolio_left ul li.currentpage a{
	font-size: 12px;
	color: #D3BB7C; 	/*ochre*/
	border:none;
	font-weight: bold;
	}
div#portfolio_left ul li.currentpage a:hover{
	font-size: 12px;
	color: #D3BB7C; 	/*ochre*/ 
	border:none;
	font-weight: bold;
	}
div#art_info{
	/*position:absolute; */
	/*bottom: -90px; */
	/*right: 35px; */
	margin: 0 25px 0 0;		
	}
div#art_info img{
	float:right;
	border: none;
	margin: 4px 0 0 0;
	}
div#art_info p{ 
	color: #5C5746;
	text-align:right; 
	font-size: 9px;
	}
div#art_info p#ptgTitle { 	
	font-style: italic;
	margin: 25px 0 0 0;
	font-size: 10px;
	}
p#ptgAvailability { 
	clear:right;
	border-top: 1px dotted #5C5746;
	padding: 1px 0 0 0;
	margin: 6px 0 0 36px; 
	}
.ptgAvailabilitylinks { 
	}
.ptgAvailabilitylinks a {
	text-decoration:none;
	color: #5C5746;
	}
.ptgAvailabilitylinks a:hover{ 
	color: #FFF4C8; 
	}

	/*----------------------------------*/	
	/*Portfolio Page-Middle-Artwork Area*/
	/*----------------------------------*/

div#portfolio_mid {
	float: left;
	width: 419px;  /*428px-9px padding ea side, then I added 6 from left*/
	/*padding: 0 9px 0 9px;*/
align: center;/*shouldn't this be text-align: center?*/
	height: 384px;

	}
.FeaturePic {  
	border: 3px #C4B484 solid;
	}

/*.............Aligns Horiz Pics higher up-not centered..................... */
.horizPicSpacing {  
	vertical-align: top; /*Try top:50%; left: 50%;*/
	padding-top: 20px;
	}
.vertPicSpacing {
	/*padding:50px;*/
	}

	/*------------------------------------*/	
	/*Portfolio Page-Right-Thumbnail Panel*/
	/*------------------------------------*/

div#portfolio_thumbs {
	width: 127px;   /*122px*/
	height: 384px;
	overflow: auto;
	}

div#portfolio_thumbs img.horiz {
	width: 75px;
	}

div#portfolio_thumbs img.vert {
	height: 75px;
	}

	/*-----------------------------*/
	/*PANEL PAGES STYLES START HERE*/
	/*-----------------------------*/
#panel_page_title h4{	/* */
	margin: 0 85px;
	font-weight: bold;
	font-size:15px;
	text-transform: uppercase; 	 
	letter-spacing: 2px; 
	word-spacing: 1px;
	}

	
/*----------------------------------------*/
/*--------------PANEL PAGES---------------*/
/*----------------------------------------*/
div.panel_wrap {		/*just adds panel mid-backgr*/
	width:587px; /*587px;*/
	margin: 0px 84px 0 85px;

	}
div.panel_content2 {		/*panel interior*/
	width:587px; /*587px;*/
	float:left;
	padding:5px 0 10px 0;	/*clears way for border graphics*/
/*border-top: 1px solid;   */
	}
.panel_content2 h5{	/* */
	color: #ece2bb;
	}
.panel_text p{	/* */

	}
.panel_content2 p a {	/*reg dark gray text color*/
	text-decoration:none;
	border-bottom: 1px dotted #404039;
font-weight: bold;
	color: #404039; 	/*dark gray text color*/
	}

.panel_content2 p span {	/*used for Art Gallery names without links and names of Awards*/
	color: #D3BB7C; 	/*ochre*/
	}
.panel_content2 p span a{	/*used for Art Gallery names with links*/
	color: #D3BB7C; 	/*ochre*/
	border-bottom: none; /* was 1px dotted #D3BB7C;*/
	}	
.panel_content2 p a:hover {	
	color: #FFF4C8;
	border-bottom: 1px dotted #FFF4C8;  	/*cream*/
	}
.panel_content2 div.caption_text{	/* */
	float: left;
	border-top: 2px dotted #404039; /*dark gray text color*/
	margin: 10px 0 0 0;
	padding-top: 3px;
	width: 100%;
	}
.panel_content2 div.panel_text ul {
	list-style:square;
	}
.panel_content2 div.panel_text ul li {
	color: #404039;		/*dark gray text color*/
	font-size:11px;
	}	
.panel_content2 div.panel_text ul li a {
	text-decoration:none;
	font-weight: bold;
	color: #404039;		/*dark gray text color*/
	}	
.panel_content2 div.panel_text ul li a:hover {
	text-decoration:none;
	font-weight: bold;
	color: #FFF4C8;			/*cream*/
	}
div.caption_text p {
	margin:0 0 5px 0;/*	adds space btwn content+bottom edge*/*/
	}
	
	/*--------------------------*/	
	/*FULL PANEL: GENERAL STYLES*/
	/*--------------------------*/
.full {	/*sets bkgr img for faux column full width panel*/
	/*width:587px; */
	float:left;
	margin: 0;
	background-image: url(images/panel_full_bkgr.jpg);
	background-position: top left;
	background-repeat: repeat-y; 
	}
div.full div.mid_wrap {		/*just adds bottom panel border*/
	margin: 0; 
	width:587px;
	float:left;
	background-image: url(images/panel_full_bottom.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
/*border-top: 1px solid;*/
	}
div.full div.inner_wrap { 	/*just adds top panel border*/
	margin: 0; 
	width:587px;
	float:left;	
	background-image: url(images/panel_full_top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
/*border-bottom: 1px solid;*/
	}
div.full div.panel_content2 .full_panel {	/*panel interior*/
	float: left;
	width: 567px;	/*587-20*/
	margin:5px 10px 5px 10px;  /*acts like padding for content*/
	/**/
	}	
		
	/*------------------------------*/	
	/*   FULL PANEL Layout Options  */
	/*------------------------------*/
/*------Layout1: Pic on left, heading with text on right---*/

div.full div.layout1 div.image { /*pic needs 121px=115px +6px border)*/
	float:left;
		width: 144px;	/*max width of pic=138px+ 3pxborder ea side*/      
	margin:10px 0 0 0;
	}
div.full div.layout1 div.image img { /*pic needs 121px=115px +6px border)*/
	float:right;
	overflow:hidden;	 /*Incase pic is too wide for box*/
	margin:0 0 15px 0;	/*Adds 15 px spacing below ea pic*/
	}		
div.full div.layout1 div.panel_text {
	float: right;
	width:416px; /*Necessary to be fixed if I want it as a column*/
	}
div.full div.layout1 h5 {
	margin:8px 0 4px 7px;
	}
div.full div.layout1 div.panel_text p {
	margin:0 0 0 20px;
	}

	
/*------Layout2: Pic on right, heading with text on left---*/
div.full div.layout2 div.panel_text {
	float: left;
	width:416px; /*Necessary to be fixed if I want it as a column*/
	}
div.full div.layout2 div.image { /*pic needs 121px=115px +6px border)*/
	float:right;
	width: 144px;	/*max width of pic=134px+ 3pxborder*/      
	margin:10px 0 0 0;
	overflow:hidden;	 /*Incase pic is too wide for box*/
	}
div.full div.layout2 div.image img { /*pic needs 121px=115px +6px border)*/
	float:left;
	margin:0 0 15px 0;
	}		

div.full div.layout2 h5 {
	margin:8px 0 4px 12px;
	}
div.full div.layout2 div.panel_text p {
	margin:0 0 0 12px;
	}
		
	/*--------------------------*/	
	/*HALF PANEL: GENERAL STYLES*/
	/*--------------------------*/	
.half {	/*sets bkgr img for faux column half width panel*/
	/*width:587px; */
	float:left;
	margin: 0;
	background-image: url(images/panel_half_bkgr.jpg);
	background-position: top left;
	background-repeat: repeat-y;
/*position: relative;*/  
	}	
div.half div.mid_wrap {		/*just adds bottom panel border*/
	margin: 0; width:587px;
	float:left;
	background-image: url(images/panel_half_bottom.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
/*border-top: 1px solid; */
	}
div.half div.inner_wrap { 	/*just adds top panel border*/
	margin: 0; 
	width:587px;
	float:left;	
	background-image: url(images/panel_half_top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
/*border-bottom: 1px solid; */
	}						
div.half div.panel_content2 .l_panel {	/*panel interior*/
	float: left;
	width: 269px;	/*289-20*/
	margin:5px 10px 5px 10px;  /*acts like padding for conten*/
/*border: 1px solid; */	
	}
div.half div.panel_content2 .r_panel {	/*panel interior*/
	float: right;
	width: 269px;	/*289-20*/
	margin:5px 10px 5px 10px;  /*acts like padding for content*/
	}
div.half img.connector {	/*img used to split columns vertically*/
 	margin: 6px 0 6px -10px;
	}
		
	/*------------------------------*/	
	/*   HALF PANEL Layout Options  */
	/*------------------------------*/
/*------Layout1: Pic on left, heading with text on right---*/
	
div.half div.layout1 img { /*pic needs 121px=115px +6px border)*/
	float:left;
	margin:6px 0 0 0;
	}
div.half div.layout1 div.panel_text {
	float: left;
	width:141px; /*Necessary to be fixed if I want it as a column*/
	}	
div.half div.layout1 h5 {
	margin:12px 0 4px 8px;
	}
div.half div.layout1 div.panel_text p {
	margin:0 0 0 12px;
	}
div.half .layout1 p.caption {
	}
		
/*------Layout2: Pic centered,caption/heading centered below,text below flush left*/		

div.half div.layout2 img {
	}
div.half .layout2 h5 {
	margin:6px 0 6px 0;
	}
div.half .layout2 p {
	}
div.half .layout2 p.caption {
	}

/*------Layout3: Heading on TOP,Pic left,text right*/		

div.half div.layout3 div.image { /*pic needs 121px=115px +6px border)*/
	float:left;
	width:130px;
	margin:3px 8px 0 0;
	}
div.half div.layout3 div.image img { /*pic needs 121px=115px +6px border)*/
	float:right;
	margin:0 0 0 0;
	}	
div.half div.layout3 div.panel_text {
	/*float: left;  Float it to keep it in a column*/
	/*width:141px; Must be fixed if I want it as a column*/
	}	
div.half div.layout3 h5 {
	margin:5px 0px 4px 0px;
	}
div.half div.layout3 div.panel_text p {
	margin:0 0 0 0;
	}
div.half div.layout3 div.panel_text ul {
	margin:30px 0 6px 0;
	list-style:none;
	}
div.half div.layout3 div.panel_text ul li{	
	margin:0 0 0 0;
	}
/*------Layout4: Two Panels in OneColumn: Heading on TOP,Pic left,text right*/		



	/*------------------------------*/	
	/* THIRDS PANEL: GENERAL STYLES */
	/*------------------------------*/
.thirds {	/*sets bkgr img for faux column thirds width panel*/
	/*width:587px; */
	float:left;
	margin: 0;
	background-image: url(images/panel_thirds_bkgr.jpg);
	background-position: top left;
	background-repeat: repeat-y;  
	}	
div.thirds div.mid_wrap {		/*just adds bottom panel border*/
	margin: 0; 
	width:587px;
	float:left;
	background-image: url(images/panel_thirds_bottom.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
/*border-top: 1px solid; */
	}
div.thirds div.inner_wrap { 	/*just adds top panel border*/
	margin: 0; 
	width:587px;
	float:left;	
	background-image: url(images/panel_thirds_top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
/*border-bottom: 1px solid; */
	}
							
div.thirds div.panel_content2 .l_panel {/*wrap for thirds columns*/
	float: left;		/*wrap needed incase of subdividing column into 2 or more*/
	width:189px; /*189-20*/	/*20 acts like padding for content too*/
	margin:0px;  
/*border: 1px solid; */
/*background-color: #fff; */	
	}
	div.thirds div.panel_content2 .c_panel {	/*wrap for thirds columns*/
	float: left;		/*wrap needed incase of subdividing column into 2 or more*/
	width:189px; /*189-20*/	/*20 acts like padding for content too*/
	margin:0 0 0 10px; 
/*border: 1px solid; */
/*background-color: #fff;  */
	}
div.thirds div.panel_content2 .r_panel {	/*wrap for thirds columns*/
	float: right;		/*wrap needed incase of subdividing column into 2 or more*/
	width:189px; /*189-20*/	/*20 acts like padding for content too*/
	margin:0 0 0 10px;  
/*border: 1px solid; */
/*background-color: #fff; */
	}
div.thirds div.panel_content2 .inner_thirds { /*panel contents w/margins*/
	float: left;
	width: 169px;	/*189-20: 20px acts like padding for content*/
	margin:5px 10px 10px 10px;
	}

div.thirds div.panel_text h5 {
	margin:6px 10px 6px 10px;
	}
div.thirds div.panel_text ul {
	margin: 0 10px 0 10px;
	list-style:none;
	text-align:center;
	}
div.thirds div.panel_text ul li{
	margin: 3px 0 3px 0;
	}
		
div.thirds img.connector {
 	margin: 6px 0 6px -10px;
	}
	 		
	/*------------------------------*/	
	/*   THIRDS PANEL Layout Options  */
	/*------------------------------*/
/*------Layout1: Pic on TOP, heading(both centered) with text below---*/
	/*Not needed-just applied centertext class to the elemenets*/

/*------Layout2: Pic on TOP, heading(both centered) with list below---*/

/*------Layout3: Multiple panels in column:Pic on TOP, caption(both centered)some below---*/


	/*--------------------------------------*/	
	/* TWOTHIRDS_LEFT PANEL: GENERAL STYLES */
	/*--------------------------------------*/
.twothirds_left {	/*sets bkgr img for faux column 2/3 1/3 width panel*/
	/*width:587px; */
	margin: 0;
	float:left;
	background-image: url(images/panel_6633_bkgr.jpg);
	background-position: top left;
	background-repeat: repeat-y;  
	}	
div.twothirds_left div.mid_wrap {		/*just adds bottom panel border*/
	margin: 0; 
	width:587px;
	float:left;
	background-image: url(images/panel_6633_bottom.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;

	}	
div.twothirds_left div.inner_wrap { 	/*just adds top panel border*/
	margin: 0; 
	width:587px;
	float:left;	
	background-image: url(images/panel_6633_top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
/*border-bottom: 1px solid; */
	}								
div.twothirds_left div.panel_content2 .l_panel {/*wrap for thirds columns*/
	float: left;		/*wrap needed incase of subdividing column into 2 or more*/
	width:388px; 		/*full column width*/
	margin:0px;  
/*border: 1px solid; */
/*background-color: #fff; */	
	}

div.twothirds_left div.panel_content2 .r_panel {	/*wrap for thirds columns*/
	float: right;		/*wrap needed incase of subdividing column into 2 or more*/
	width:189px; 		/*full column width*/
/*border: 1px solid; */
/*background-color: #fff; */
	}

div.twothirds_left div.panel_content2 .inner_twothirds { /*panel contents w/margins*/
	float: left;
	width: 368px;	/*388-20: 20px acts like padding for content*/
	margin:5px 10px 10px 10px;
	}	
div.twothirds_left div.panel_content2 .inner_thirds { /*panel contents w/margins*/
	float: right;
	width: 169px;	/*189-20: 20px acts like padding for content*/
	margin:5px 10px 10px 10px;
	}


	/*--------------------------------------*/	
	/* TWOTHIRDS_RIGHT PANEL: GENERAL STYLES */
	/*--------------------------------------*/
.twothirds_right {	/*sets bkgr img for faux column 2/3 1/3 width panel*/
	/*width:587px; */
	margin: 0;
	float:left;
	background-image: url(images/panel_3366_bkgr.jpg);
	background-position: top left;
	background-repeat: repeat-y;  
	}	
div.twothirds_right div.mid_wrap {		/*just adds bottom panel border*/
	margin: 0; 
	width:587px;
	float:left;
	background-image: url(images/panel_3366_bottom.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
/*border-top: 1px solid; */
	}	
div.twothirds_right div.inner_wrap { 	/*just adds top panel border*/
	margin: 0; 
	width:587px;
	float:left;	
	background-image: url(images/panel_3366_top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
/*border-bottom: 1px solid; */
	}								
div.twothirds_right div.panel_content2 .l_panel {/*wrap for thirds columns*/
	float: left;		/*wrap needed incase of subdividing column into 2 or more*/
	width:189px; 		/*full column width*/
	margin:0px;  
/*border: 1px solid; */
/*background-color: #fff; */	
	}

div.twothirds_right div.panel_content2 .r_panel {	/*wrap for thirds columns*/
	float: right;		/*wrap needed incase of subdividing column into 2 or more*/
	width:388px; 		/*full column width*/
/*border: 1px solid; */
/*background-color: #fff; */
	}

div.twothirds_right div.panel_content2 .inner_twothirds { /*panel contents w/margins*/
	float: right;
	width: 368px;	/*388-20: 20px acts like padding for content*/
	margin:5px 10px 10px 10px;
	}	
div.twothirds_right div.panel_content2 .inner_thirds { /*panel contents w/margins*/
	float: left;
	width: 169px;	/*189-20: 20px acts like padding for content*/
	margin:5px 10px 10px 10px;
	}

	/*-------------------------------------------------*/	
	/* TWOTHIRDS WIDTH PANELS: LEFT OR RIGHT -GENERAL STYLES */
	/*-------------------------------------------------*/	
div.twothirds img.connector {
 	margin: 6px 0 6px -10px;
	}
div.inner_twothirds div.panel_text h5 {
	margin:6px 10px 6px 10px;
	}
div.inner_twothirds div.panel_text ul {
	margin: 0 10px 0 10px;
	list-style:none;
	text-align:center;
	}
div.inner_twothirds div.panel_text ul li{
	margin: 3px 0 3px 0;
	}				

	/*------------------------------------------------*/	
	/* TWOTHIRDS PANEL (for both LR) Specific Layouts*/
	/*------------------------------------------------*/
/*------Layout1: Pic on LEFT, heading with text ON RIGHT---*/

/*------Layout2: Pic on LEFT, heading with text ON RIGHT---*/
div.layout2 .inner_twothirds div.imagewrap {
	float:left;
	width:368px;
	text-align:center;
	/*margin: 10px 0 5px 0;*/	
/*background-color: #fff;*/
	}	
div.layout2 .inner_twothirds div.imagewrap div.image {
	float:left;
	margin: 0px 5px 4px 5px;
/*background-color: #333;*/
	}
div.layout2 .inner_twothirds div.image p.caption{
	text-align:center;
	margin: 0px 0px 4px 0px;
	}
	

	/*------------------------*/
	/*FOOTER STYLES START HERE*/
	/*------------------------*/

#footer {
	background-image: url(images/bottom_border.jpg);
	background-position: top center;
	background-repeat: no-repeat; 
	text-align:center;
	margin: -2px 0 0px 0;  /* -2px prevents a 2px gap/drop that just started appearing*/
	padding: 12px 0 14px 0;
	}
	
#footer p {
	font-size: 9px; 
	color: #504D41;
	}



/*------------------------------------------------------------------------------*/
	/* HORIZONTAL MENU CSS STARTS HERE */
div#listmenu {
	width:756px;	/*100% makes the div full width */
	float:left; /*makes the div enclose the list */
	border-top:1px solid #605a4f; /*originally was #069;---draws line on top edge of div */
	border-bottom:1px solid #4f4745; /*originally was #069;---draws line on bottom edge of div */
	border-right:2px solid #716b5e; 
	border-left:2px solid #716b5e; 
	/* font-size:.8em;	SET FONT-SIZE HERE */
	font-family: arial, sans-serif; 
	text-transform: uppercase;  
	font-size: 11px; letter-spacing: .3em; 
	font-weight: bold; 	
	color: #fff4c8; 
	background-color:#767061;     /*dark gray---------orig was: #CCF; colors the div strip*/
margin-top:-3px;  /*My fix- dropped 3 px too low-why?--  TEMPORARY-pushes the div away from the top of the browser for clarity in this example*/
 	}
div#listmenu ul {
	margin: 0 0 0 5px; /*indents ul from edge of container */

	/*display:inline; I added this to try to prevent L margin doubling?*/
	/*I can't get this right: to make a menu margin without it being inherited down to both dropdowns*/
	}
div#listmenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	background-color:#767061;   /*f0efb3-originally was yellow:#FFA; /*sets the background of the menu items */
	border-right:1px solid #605a4f; /*originally was #069;---creates dividing lines between the li elements */
	
	}
div#listmenu li:first-child {
	/*border-left:1px solid #605a4f; (removed vert line before HOME---the first vertical line on the menu */
	}
div#listmenu li:hover { 
	background-color:#767061; /*sets the background of the menu items */
	}
div#listmenu a {
	display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
	padding:2px 8px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#fff4c8; /*cream -originally was #069;---sets the type color */
	}
div#listmenu a:hover {
	color:#d3bb7c;       /*mustard--was originally red: #F33;*/
	}
	/* HORIZONTAL MENU ENDS HERE */


	/* DROP DOWN MENU STARTS HERE */
div#listmenu ul li ul {
	 margin:0; /*prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	left:-1px; /*aligns the drop exactly under the menu */
}
div#listmenu ul li ul li {
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid #605a4f; /*originally was #069;---three sides of each drop-down item */
	border-bottom:1px solid #605a4f; /*originally was #069;---*/
	border-right:1px solid #605a4f; /*originally was #069;---*/
	color: #d3bb7c;	/*d3bb7c E3D5AE*/
  	background-color: #8b8372; /*lighter gray background*/
	padding:0 0 1px;

/*Drop-Down Menu Transparency*/
/*Problems:*/
/*Not working in my IE*/
/*effect is compounded with each subsequent dropdown*/
	/*opacity:0.9;  Transparency for CSS3-values 0 to 1*/
	/*-moz-opacity:0.9;  Transparency for firefox-values 0 to 1*/
	/*filter:alpha(opacity=90); Transparency for IE-values 0 to 100*/
	}

div#listmenu ul li ul li a {
	font-size: 10px; 
	letter-spacing: .1em; 
	font-weight: bold;
	text-transform: none;
	color: #d3bb7c;	/*d3bb7c mustrd:D3BB7C*/
  		}
div#listmenu ul li ul li a:hover {
	color: #fff4c8;	/*cream    old:e3d5ae*/
	background-color: #767061;  /*dark gray*/
	}
div#listmenu ul li ul li:hover {	/*also works without this*/
	color: #fff4c8;	/*cream    old:e3d5ae*/
	background-color: #767061;  /*dark gray*/
	}

div#listmenu ul li ul li:first-child {
	border-top:1px solid #605A4F; /*originally was #069;---the top edge of the dropdown */
	}
	/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

	/* POP-OUT STARTS HERE */
body div#listmenu ul li ul li ul  {
	visibility:hidden; /* same effect as display:none in this situation */
	top:-1px;
	left:10em;
	}
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

	/* second level popouts start here*/
div#listmenu ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

	/* third level popouts start here*/
div#listmenu ul li ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

	/*******************/
	/* THE HACK ZONE - */
	/*******************/
	/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #605a4f; /* adds the rightmost menu vertical line to the ul */
	margin-left:0px;  /*make margin what it's supposed to be--IE doubles the given value above - why? */
margin-top:-3px;
	}

	/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
	border-top:1px solid #605a4f; /*originally was #069;---*/
	border-left:0px; /* stops the drop inheriting the ul border */

	}
	/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu ul li ul li ul { 
  	left:9.85em; 
  	voice-family: "\"}\""; 
  	voice-family:inherit;
  	left:10em;
  	}
	/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
  	left:10em;
  	}

	/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
	/* the first-level drop stays open for 100px below the bottom but at least it works */
	/* this can be reduced to as little as 22px if you don't have pop-outs */
	/* the pop-out menu stays open for 22px below the bottom but at least it works */
@media all and (min-width: 0px){
body div#listmenu ul li ul {padding-bottom:200px;}
body div#listmenu ul li ul li ul {padding-bottom:22px;}
body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
   }
	/*end Opera hack */
	/* end of hack zone */
	/* END OF LIST-BASED MENU */

	/* finally after feeding values to all others, we deal with MAc5 IE */
	/* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
	/* we present the drop down choices in a row and never show any second-level drops */
 	/* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("   */
@import("ie51_menu_hack.css"); 	/*unrecognized by Validator!!*/

	/* END OF DROP DOWN MENUS */



	/* -----------------------------------*/
	/* ASLETT CLEARING METHOD STARTS HERE */
	/* -----------------------------------*/
	/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
	/* simply add the clearfix class to any containter that must enclose floated elements */
	/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
	}
.clearfix {display: inline-block;}   /* a fix for IE Mac */

	/* next a fix for the dreaded Guillotine bug in IE6 */
	/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}
.clearfix {display: block;}

	/* End hide from IE-mac */
	/* end of "no-extra-markup" clearing method */
	/* ASLETT CLEARING METHOD ENDS HERE */
/*____________________________________________________________________________________________________*/
/*For some reason these styles of mine have to be below the cut/paste stuff for layout to even show up*/
/*Except now the spacing is off on the drop down menu items??? I fixed it abit--but not perfect*/


/*My styles*/

	/*OUTER WRAPPER CSS ENDS HERE*/



	/*INNER WRAPPER CSS STARTS HERE*/
/*div#innerwrapper {*/
		/*}*/
	/*INNER WRAPPER CSS ENDS HERE*/


	/*HEADER CSS STARTS HERE*/
div#header {
	position: relative;
	}
	/*HEADER CSS ENDS HERE*/




	/*HOME PAGE-CONTENT AREA CSS ENDS HERE*/