/*
Date: 5/06/07;  VT Web-Ink Design Studio [802] 897-2483 info@vtwebink.com
for: Vermont ARES  

Page-map:
			1 body
			2 wrapper
				3 content
					4 banner
					5 nav
					6 center
						7 centerA (top, narrow)
						7 centerD (bottom, full width/flush left/flush right)]
					8 leftcol
					[9 rightcol]
					3 footer
Style-map:
			global resets
			new base styles
			structure
			typography/styles
colors:
		 text: #6F5105  tan
		 banner/footer: #ddddb3   yellow gray
		 rules: # 808099    gray blue
		 nav: #d5d599;
		 html/body/wrapper: bckgrnd: #000   black
		 contents/centers: bckgrnd: #fcffe0   off-white
			

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

   /*------- 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:#000;}
body {width:100%; font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:100%; line-height:1; text-align:center;  }


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

#wrapper{position:relative; /*holds all*/
	font-size:62.5%;
	background-color: #000;  
	border-top: 3px solid #000099;
	border-right: 2px solid #000099;
	border-bottom: 4px solid #f00;
	width:80%;
	margin: 60px auto;}

	#content{
		width:100%; height:auto;
		background-color:#fcffe0; 
		text-align: left;
		border:0; 
		}


		#banner{
			width:100%; 
			height:160px;
			background-color:#000;
			padding-left:1px;
			}

		#nav {height:17px;width:100%;
			border-top:4px solid #776;
			background:#c1b066 url(/graphics/buttup.gif) repeat-x;
			border-bottom:1px solid #776; 
			z-index:900;
			}

		#center {
			width:100%; 
			height:auto; 
			background-color:#fcffe0;
			}

		#footer{ height:4em; 
			width:100%;
			position:relative;
			border-bottom: 4px solid #f00;

			border-top:1px dotted #808099;
			background-color:#d5d599;
			padding: 4px 0 1px 0;
			}

#up {	
		position:absolute;
		right:30px;
		bottom:15px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		text-decoration: none;
		font-size: 9px;
		font-weight: bold;
		text-transform:uppercase;
		background-color:transparent;
		}
body > div#up {position: fixed;}

		#up a, #up a:visited {color:#1A7AE8 /*0033CC*/;text-decoration: none;}
		#up a:hover {font-style: oblique;text-decoration: underline; color:#00CCFF;font-weight: normal;} 



/* ----- "content" sections ----------------- */


#leftcol{
	width:125px;
	float:left;
	display:inline;
	position:absolute;
	/*border-top:6px solid #776; */
	background-color:#ddddb3; 
	border-right:1px dotted #777766;
	border-bottom:3px solid #777766;
	left: 0;
	top: 164px;
	padding-left:6px;
	z-index:1000;}
		#leftcol .title {color:#006600;}

		#leftcol p, #leftcol h2, #leftcol h3 {	
			text-align: left; 
			line-height:1;
			back-ground:transparent;}

		#leftcol p {color:#666666;	  font-size:1em /*.95em*/;margin-bottom:6px; }

		#leftcol h2 {color:#000099; font-size:1.1em /*1em*/;}

		#leftcol h3 {color:#000099; font-size: 1em /*.9em*/;}

		#leftcol a, #leftcol a:visited {background-color:transparent; color: #666; text-decoration: underline; }

		#leftcol a:hover{
			color: #333;  background-color:#ccc; font-weight:bold; }/* */


	/*-- nav menu list-----*/

#nav ul{ 
	position:absolute;left:125px; top:164px;
	padding: 0;
	list-style: none;
	height:17px;
	}

	#nav li {
		float: left; 
		display:inline;
		/*width:100px;  see the include */
		height:17px;
		font-size:1.2em; line-height:1.5em;
		text-transform:uppercase;
		text-align:center;
		border-right:1px dotted #776; 
		}

		#nav li a, #nav li a:visited {
			display:block;
			text-decoration: none;
			color:#006600;
			font-weight:bold;
			background:transparent;
			}

		#nav li a:hover{
			color:#0000FF;
			display:block;
			background:#c1b066 url(/graphics/buttdwn.gif) ; z-index:1000;
			}

	/*---selected page indicators---------*/

#home li.home, #home li.home a:hover, #services li.services, #services li.services a:hover, 
#join li.join, #join li.join a:hover, #members li.members, #members li.members a:hover, 
#resources li.resources, #resources li.resources a:hover {
	background-color: #fcffe0;
	background-image:none;
	border-left:1px solid #776;
	border-right:1px  solid #776; border-bottom:0;
	height:19px;
	}


.centerA {  
	background-color:#fcffe0; 
	padding-left:150px; /*width of left column plus 12px*/
	padding-right:65px;  
	padding-top:30px;
	}


.centerD { 
	padding-left:65px;
	padding-right:65px; 
	background-color:#fcffe0; 
	}


	.col1 {
	/*width: set on page */
		background-color:#fcffe0;
		font-size:1.1em /*1em*/; color:#6F5105;
		margin-top:25px;
		position:relative;
		float:left;
		display:inline;
		margin-left:0;
		left: 6px;
		}

	.col2 {
	/*width: set on page*/ 
		background-color:#fcffe0;
		font-size:1.1em /*1em*/; color:#6F5105;
		margin-top:6px; margin-left:55px;
		float:left;display:inline; 
		border-left:1px dotted #999; border-right: 1px dotted #999; padding-left:8px;
		}

	.col3 {
	/*width: set on page */
		background-color:#fcffe0;
		font-size:1.1em /*1em*/; color:#6F5105;
		margin-top:6px;
		float:right;display:inline; 
		}



.Rscroll { /*scrollboxes */
/*width:set on page */
	text-align: left;
	font-family:Ariel, Verdana,Helvetica, sans-serif;
	font-size: 1.2em /*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;/*added jun 21   required by the overflow attribute--? */
	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.2em /*1.1em*/, line-height:135%;}
	.Rscroll ul li ul { margin-top:-1px; margin-left:-5px;} 

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

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

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


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

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

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

.foot p {
	color:#55554d;
	font-size: 1.1em /*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; }
.plus1 {font-size: 120%; background-color:transparent; }



.italic {/* for visial 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, #txtmenu2 {    /* horiz text links at bottom*/
	
	text-transform: uppercase;
	text-align:center; margin-top: 12px;}

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


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

.col1 ul, .col2 ul, .col3 ul {
		color:#6F5105;
		margin-left: 0px;
		margin-right:0px;
		padding-top:4px; 
		 }

.col1 li, .col2 li, .col3 li {
		font-size: 1.2em /*1.1em*/; color:##6F5105;
		padding-bottom:4px;
		line-height: 135%;
		background-color:inherit;
		list-style:disc; 
		}

.col1 ul li ul, .col2 ul li ul, .col3 ul li ul {
		margin-left: 15px;
		font-size: 95%;
		background-color:inherit; 
		list-style:square;
		color:#6F5105;
		}

	.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;
		}

.centerA ul, .centerB ul, .centerC ul, .centerD ul {
		font-size:1.1em /*1em*/;
		line-height: 120%;
		padding-right:3px;
		margin-left: 35px;
		color: #6F5105;
		margin-top:10px;
		margin-bottom:10px;
		background-color:inherit;
		}

.centerA li, .centerB li, .centerC li, .centerD li    {
		background-color:inherit; 
		}
.centerA ul li ul, .centerB ul li ul, .centerC ul li ul, .centerD ul li ul  {
		padding-left:15px; background-color:inherit; list-style:square; 
		}



.imgR {float:right; padding:3px 2px 6px 10px;}  /* margin ?? */
.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;}


#alert{
	background-color:#ff0000; 
	text-align: center;
	font-family: "Trebuchet MS", Trebuchet, Arial, Verdana, Helvetica, sans-serif;
	font-size:90%;
	color: #fff; 
	float: right;
	position: absolute;
	width: 100px; height:120px;
	top: 11px;
	right: 3%;
	z-index:1500;}
	
	#alert a { background-color:#ff0000; color: #000; }
	#alert a:hover { background-color:#ff0000; color: #666; }
	#alert a:visited { background-color:#ff0000; color: #000;}
	

.imagebrdr { border:1px solid #000; }
.imagenobrdr { border:0; }
.leftimage{ float: left; margin-right: 10px; }
.rightimage{ margin-bottom: 20px; float: right; margin-left: 15px; }

/*-------------- 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:10px; left: 45px; padding:3px; font-weight:normal; font-size: .9em; color:#333; border:1px dotted #999; background:#fff; width:auto; }   /*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;}*/