/*
Date: 8/26/08;  VT Web-Ink Design Studio [802] 897-2483 robin@vtwebink.com
for: Friends of the Platt, Inc  

Page-map:
			1 body
			2 wrapper
				I content
					a nav
					b banner
					c center
					  c2 centerD  
					d rightcol
				II. footer
Style-map:
			global resets
			new base styles
			structure
			typography/styles
colors:
		 text: #6F5105  tan
		 headlines color:660000    pidgeon's blood
		 banner/center/footer: #ddddb3   yellow gray
		 rules: # 808099    gray blue
		 nav: #cbc38;
		 html/body/wrapper: bckgrnd: #ddddb3   yellowish
		 
			

===============================================================================================*/

   /*------- RESETS -------*/
*, html, body, ul,li, li ul li{
 margin: 0; padding: 0; border: 0; }

a img, :link img, :visited img {border:0;}



/*============== NEW BASES ========================================================================*/
html, body {height:100%; background-color:#ddddb3;}
body {/*width:100%;*/ font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%; line-height:1; text-align:center;  }


	/*------------------ STRUCTURE ---------------------------------------------------------------*/

#wrapper{/*position:relative;margin-left:0; holds all*/
	font-size:62.5%;
	background-color: #ddddb3;
	border-top: 20px solid #cbc380;
	border-bottom: 60px solid #cbc380;
	
	width:100%;
	}

	#content{position:relative; margin:3px /*auto*/;
		width:90%;; height:auto;
		background-color:#ddddb3; 
		text-align: left;
		border:0; 
		}

		#nav {height:13px;
			text-align:right;
			position:absolute; width:auto;
			top:/*-14*/5px; right:20%;
			background-color:#cbc380;
			z-index:900;
			}
			#nav a, #nav a:visited {
			  text-decoration: none;
			  color:#006600;
			  font-weight:bold;
			  background:transparent;
			}
			#nav a:hover{
			  color:#0000FF;
			  font-style: oblique; text-transform:uppercase
			} 

				#banner{
			width:auto; 
			height:200px;
			background:#ddddb3 url(/graphics/platt-header2.gif) no-repeat left;
			padding-left:1px;
			}

		#center {position:relative;
			width:65%; 
			height:auto; 
			background-color:#ddddb3;
			padding-left:15px;
			}

			.centerD {width:100%;height:auto; 
				padding-left:0px;
				padding-right:5px; 
				background-color:#ddddb3;
				position:relative 
				}

		#rightcol {
	position:absolute;
	display:inline;
	width:229px;
	padding-left:2px;
	height:auto;
	right:35px/*774px*/;
	background-color:#ddddb3;
	top: 160px;
}

	#footer { position:relative;
			width:400px;
			left:60px;
		background-color:#cbc380;
			bottom:-35px;
			}

#up {	
		position:absolute; z-index:1000;
		right:20px;
		bottom:5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		text-decoration: none;
		font-size: 9px; line-height:1.1;
		font-weight: normal;
		text-transform:uppercase;
		background-color:transparent;
		}
body > div#up {position: fixed;}

		#up a, #up a:visited {color:#666 /*0033CC*/;text-decoration: none;}
		#up a:hover {font-style: oblique;text-decoration: underline; color:#00f;font-weight: bold;} 

	
	.col1 {
		width:60%;
		background-color:transparent;
		position:relative;
		
		display:inline;
		border-right:1px dotted #999;
		margin-left: 15px;
		}

	.col2 {
		width: 40%;
		background-color:transparent;
		position:absolute;
		top:26px;
		float:right;
		display:inline;
		right: 76px;
		}

	

.Rscroll { /*scrollboxes */
/*width:set on page */
	text-align: left;
	font-family:Ariel, Verdana,Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	line-height: 135%;
	border:1px solid #776; border-right:2px; border-bottom:4px;
	margin-left:35px;; margin-top:8px;
	padding-left:1px;
	height:85px; 
	position:absolute; 
	overflow:auto; 
	}

	.Rscroll a { text-decoration: underline; color: #6F5105; font-style:normal; }

	.Rscroll a:visited  { color: #BAAD81; text-decoration: underline; }

	.Rscroll a:hover { color: #ccc;background-color:#BAAD81; text-decoration: none; font-weight: normal; }

	.Rscroll ul { margin-left:15px;font-size:1.1em, line-height:135%;}
	.Rscroll ul li ul { margin-top:-1px; margin-left:-5px;} 

/* ========================  Typography/Styles =========================================================*/

h1, h2, h3, h4 {font-family:Georgia, "times new roman", serif; text-align:left;
	margin-top: 20px;
	background-color:transparent;
	line-height: 1.1;
	padding-left:20px;}

	h1{font-size: 1.7em; /* 18px */
		color: #6F5105;
	 font-weight:400;
		text-align:center;
		 }
	h2{font-size: 1.5em;   /* 13px */  font-weight:bold; color:660000; margin-bottom:-4px;}
	h3{font-size: 1.3em;    /* 12px */  font-weight:bold; color: #660000; margin-bottom:-3px;}
	h4{font-size: 1.1em;    /* 12px */  font-weight:bold; color: #660000; margin-bottom:-3px;}
	.subhd {margin-top: 5px;
			color: #006000;
			font-family:Georgia, "Times New Roman", Times, serif;
			font-style: italic;}


#center p,.centerD p, #rightcol p{line-height: 150%;    
	color: #6F5105;  
	font-size:1.1em;        /*1em 10px */
	font-weight: normal;
	margin-top: 6px;
	margin-bottom:1px;
	letter-spacing: .02em; 
	background-color:transparent;}

#center a,.centerD a {  
		color: #6F5105; 
		background-color:transparent;
		text-decoration: underline;
		} 
		
	#center a:visited,.centerD a:visited {color:#6f5105;} 

	#center a:hover,.centerD a:hover {color: #ccc;  /* light gray */ text-decoration: none; background-color:#BAAD81;}  

.foot p {
	color:#55554d;
	font-size: 1em;     /* of body size (ie: 10px/1em/100%)   */
	text-align: center;
	margin-top: 2px;
	line-height:1.1; 
	}
		.foot a {text-decoration:underline; color:#55554d; background-color:transparent;}

		.foot a:visited{color:#55554d; text-decoration:none; background-color:transparent; }

		.foot a:hover { color:#333333; background-color:transparent; font-weight:bold;}


.ttip a, .ttip a:visited, .ttip a:hover,  {text-decoration:none; border-bottom:1px dotted #999; color:#000; background-color:#ffffcc; cursor:help;}  


 /*change space before & after p */
	.p0-10 {margin-top:1px; margin-bottom:10px; background-color:transparent;}
	.p0-0 {margin-top:1; margin-bottom:0; background-color:transparent;}
	.p0-5 {margin-top:1; margin-bottom:5px; background-color:transparent;}


.eight {font-size:80%; letter-spacing: .01em; background-color:transparent;  }
.nine { font-size:90%;  letter-spacing: .01em; background-color:transparent; }
.ten {font-size: 1em; background-color:transparent; }
.twelve {font-size: 1.2em; background-color:transparent; }



.italic {   /* for visual style only, eg titles */
	font-family:Georgia, Times, "Times New Roman", serif;
	font-style:italic;
	font-size: 1.1em;
	background-color:transparent;
	color:#6F5105;
	}  

i, em {/*to add emphasis */
	font-style:italic;
	font-weight:bold;
	background-color:transparent;
	color:#6F5105;
	} 

strong, b { color: inherit; background: transparent; }


sub, sup {font-size: ; font-variant: smallcap; }
	sub {vertical-align:-.5em;}
	sup {vertical-align:+.5em ;}

.alignL{text-align:left;}
.alignR{text-align:right;}
.alignC{text-align:center;}


	/*-- RULES --- default sets to 100% and centered; use:   <div class="rule" style=" ?? ">  change width, margin, etc <hr> </div>       */
.rule {
		width:96%; margin: 16px auto; height: 3px;  background-color:#cbc380; border-top:1px solid #33CCFF;
	}
		.rule hr {
			display:none;
		}


#txtmenu {    
	
	text-transform: uppercase;
	text-align:center; margin-top: 12px;}

	#txtmenu a {font-size: 80%; line-height: 120%;
	color: #666; text-decoration:underline; }
	#txtmenu a:hover{font-weight: bolder; background-color:transparent; color: #333; }


/*------------ LIST STYLES --------------------------------------------------------------*/

	.col1 p, .col1 a, .col2 p, .col2 a, .col3 p, .col3 a {
		color:#6F5105; text-decoration:underlined;
		}
	.col1 a:visited, .col2 a:visited, .col3 a:visited {
		color:#BAAD81;text-decoration:underlined;
		}
	.col1 a:hover, .col2 a:hover, .col3 a:hover {
		color: #ccc;  /* light gray */ text-decoration: none; background-color:#BAAD81;
		}

#center ul, #center dl {width:80%;
		font-size:1.2em;
		line-height: 150%;
		padding-right:25px;
		margin-left: 55px;
		color: #6F5105;
		margin-top:10px;
		margin-bottom:10px;
		background-color:inherit;
		}

#center li, #center  dl     {
		background-color:inherit;
		}
.centerD ul, .centerD dl {width:80%;
		font-size:1em;
		line-height: 105%;
		padding-right:3px;
		margin-left: 35px;
		color: #6F5105;
		margin-top:10px;
		margin-bottom:10px;
		background-color:inherit;
		}

.centerD li, .centerD dl     {
		background-color:inherit; font-size:1em; 
		}
.centerD ul li ul  {
		padding-left:15px; background-color:inherit; list-style:square; 
		}



.imgR {float:right; padding:3px 2px 6px 10px;}  
.imgL {float:left; padding:3px 10px 6px 2px ;}

.imgbrdr {border:1px solid #000 ;}
.imgnobrdr {border:0;}

.clearR {clear: right;}
.clearL {clear:left;}
.clrBoth {clear:both;}


 


/*-------------- inline tooltips -----------------------
to use it (for any link, use #nogo for non-linking tooltip): 
	<a class="tooltip3" href="______" onclick="return pop_off(this);" title="Opens new window">Item for link or tip <b>  description of where link goes (size auto-adjusts to the amount of text to be displayed). </b></a>
to include a grphic in the tooltip:
	<a class="tooltip3" href="______">Item Name <b><img src="/graphics/__.jpg" alt=" " class="imgnobrdr imgR" > description of what link is about (size auto-adjusts to the amount of text to be displayed). </b></a>-*/
	
a.tooltip3   {/*color:#c00;*/}

a.tooltip3 b  {display:none;}

a.tooltip3:hover  {border:0; position:relative; z-index:800; text-decoration:none;}

a.tooltip3:hover b  {display:block; position:absolute; top:16px; left: -30px; padding:3px; font-weight:normal; font-size: .9em; color:#333; border:1px dotted #999; background:#ddddb3; width:165px;text-align:left; text-transform:none; }   /*180pxtooltip text */
/*a.tooltip3:hover b {position:absolute; top:10px; left: 65px; }   tooltip text */

/*a.tooltip3:hover b em  {position:absolute; left:20px; top:-2px; width:11px; height:6px; background:transparent url(/graphics/tooltip3.gif) 0 0; display:block; font-size:1px;}    tooltip box & pointer 
a.tooltip3:hover b em {left:20px;}*/