/************************** MAP ******************************/
.mapimgleft {
float: left;
padding-right: 10px;
}
.fallname {
font-size: 1.2em;
margin-bottom: 1em;
color: #fff;
text-transform: uppercase;

}
.span-1 {width: 18px;}


.water {
width: 300px;
font-style: italic;
}

.printversion {
float:right;margin-right: 80px;
}
.printicon {padding-right: 10px;}

.box {padding:1.1em;margin-bottom:1.1em;background:#E5ECF9;}

.box1 {padding:.8em;margin-bottom:.8em;background:#814329;border: 1px solid #000;}
.box2 {padding:.8em;margin-bottom:.8em;background:#286047;border: 1px solid #000;}
.box3 {padding:.8em;margin-bottom:.8em;background:#2a2b30;border: 1px solid #000;}
.box4 {padding:.8em;margin-bottom:.8em;background: #5a823c;border: 1px solid #000;}
.box5 {padding:.8em;margin-bottom:.8em;background: #75313f;border: 1px solid #000;}
.box6 {padding:.8em;margin-bottom:.8em;background: #483723;border: 1px solid #000;}
.box7 {padding:.8em;margin-bottom:.8em;background: #340a42;border: 1px solid #000;}
/**
 * styling for tip content
 * mostly for example
 * note: canvas (the tip itself) cannot be styled here. use javascript options for that.
 */
.bt-content {
  font-size: small;
  color: #000;
  line-height: normal;
}

/* styling for active target elements - usually for background hilighting */
.bt-active {
  /* example:
  background-color: yellow !important;
  */
}
#map {
	margin:0;
	padding:0;
	width:590px;
	height:522px;
	background:url(http://olympicpeninsulawaterfalltrail.com/wp-content/themes/falls/style/images/mapoverview-4.jpg) no-repeat transparent ;
	background-position: 13px 12px;
	font-family:arial, helvetica, sans-serif;
	font-size:8pt;
margin-left: 45px;
margin-top: -10px;
}
#map li {
	margin:0;
	padding:0;
	list-style:none;
}
#map li a {
position:relative;
display:block;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 1em;
padding: 4px;
border: 1px solid #000;
}

#one_content {
display: none;
}
#two_content {
display: none;
}
/**********Sol Duc ************/
/******************************** (1) **********/
a.hi {
top: 23px;
left: 54px;
width: 10px;
height: 10px;
background: #814329;
display: block;
border: 1px solid #814329;
}
a.hi:hover {
border: 1px solid #000;
background: #6b3a25;
display: block;
}

a.hi:selected {
border: 1px solid #fff;
background: #6b3a25;
display: block;
}


/******************************** (2) **********/
a.ho {
top: 76px;
left: 116px;
width: 10px;
height: 10px;
background: #814329;
display: block;
border: 1px solid #814329;
}
a.ho:hover {
border: 1px solid #fff;
background: #6b3a25;
display: block;
}
/******************************** (3) **********/
a.be {
top: 68px;
left: 162px;
width: 10px;
height: 10px;
background: #814329;
display: block;

}
a.be:hover {

background: #6b3a25;
display: block;
}
/******************************** (4) **********/
#map a.so {
top: 104px;
left: 212px;
width: 10px;
height: 10px;
background: #814329;
display: block;

}
#map a.so:hover {
border: 1px solid #fff;
background: #6b3a25;
display: block;

}

/************* Pacific Coast ******/
/******************************** (5) **********/
#map a.st {
top: 94px;
left: 88px;
width: 10px;
height: 10px;
background: #286047 ;
display: block;
border: 1px solid #000;
}
#map a.st:hover {
border: 1px solid #1a3f2f;
background: #1a3f2f;
display: block;
}
/******************************** (6) **********/
#map a.fa {
top: 90px;
left: 99px;
width: 10px;
height: 10px;
background: #286047 ;
display: block;
border: 1px solid #000;
}
#map a.fa:hover {
border: 1px solid #fff;
background: #1a3f2f;
display: block;
}

/******* Hoh Rainforest *************/
/******************************** (7) **********/
#map a.mi {
top: 69px;
left: 232px;
width: 10px;
height: 10px;
background: #00133f ;
display: block;
border: 1px solid #000;
}
#map a.mi:hover {
border: 1px solid #fff;
background: #131416;
display: block;
}
/******************************** (8) **********/
#map a.ma {
top: 40px;
left: 260px;
width: 10px;
height: 10px;
background: #00133f;
display: block;
border: 1px solid #000;
}
#map a.ma:hover {
border: 1px solid #fff;
background: #131416;
display: block;
}

/***** Quinault Rainforest ************/
/******************************** (9) **********/
#map a.wi {
top: 158px;
left: 230px;
width: 10px;
height: 10px;
background: #5a823c ;
display: block;
border: 1px solid #000;
}
#map a.wi:hover {
border: 1px solid #fff;
background: #425f2c;
display: block;
}
/******************************** (10) **********/
#map a.ga {
top: 120px;
left: 248px;
width: 10px;
height: 10px;
background: #5a823c ;
display: block;
border: 1px solid #000;
}
#map a.ga:hover {
border: 1px solid #fff;
background: #425f2c;
display: block;
}
/******************************** (11) **********/
#map a.me {
top: 86px;
left: 266px;
width: 10px;
height: 10px;
background: #5a823c ;
display: block;
border: 1px solid #000;
}
#map a.me:hover {
border: 1px solid #fff;
background: #425f2c;
display: block;
}
/******************************** (12) **********/
#map a.bu {
top: 54px;
left: 286px;
width: 10px;
height: 10px;
background: #5a823c ;
display: block;
border: 1px solid #000;
}
#map a.bu:hover {
border: 1px solid #fff;
background: #425f2c;
display: block;
}
/******************************** (13) **********/
#map a.en {
top: 11px;
left: 312px;
width: 10px;
height: 10px;
background: #5a823c ;
display: block;
border: 1px solid #000;
}
#map a.en:hover {
border: 1px solid #fff;
background: #425f2c;
display: block;
}

/********* The Southern Loop *******/
/******************************** (14) **********/
#map a.perf{
top: 62px;
left: 259px;
width: 10px;
height: 10px;
background: #75313f ;
display: block;
border: 1px solid #000;
}
#map a.perf:hover {
border: 1px solid #fff;
background: #52232c;
display: block;
}
/******************************** (15) **********/
#map a.wy{
top: 21px;
left: 290px;
width: 10px;
height: 10px;
background: #75313f ;
display: block;
border: 1px solid #000;
}
#map a.wy:hover {
border: 1px solid #fff;
background: #52232c;
display: block;
}
/******************************** (16) **********/
#map a.sp{
top: 48px;
left: 292px;
width: 10px;
height: 10px;
background: #75313f ;
display: block;
border: 1px solid #000;
}
#map a.sp:hover {
border: 1px solid #fff;
background: #52232c;
display: block;
}

/********* Hood Canal ***********/
/******************************** (17) **********/
#map a.vi{
top: 12px;
left: 336px;
width: 10px;
height: 10px;
background: #483723 ;
display: block;
border: 1px solid #000;
}
#map a.vi:hover {
border: 1px solid #fff;
background: #2f2519;
display: block;
}
/******************************** (18) **********/
#map a.ha{
top: -56px;
left: 354px;
width: 10px;
height: 10px;
background: #483723 ;
display: block;
border: 1px solid #000;
}
#map a.ha:hover {
border: 1px solid #fff;
background: #2f2519;
display: block;
}
/******************************** (19) **********/
#map a.fal{
top: -152px;
left: 390px;
width: 10px;
height: 10px;
background: #483723 ;
display: block;
border: 1px solid #000;
}
#map a.fal:hover {
border: 1px solid #fff;
background: #2f2519;
display: block;
}
/******************************** (20) **********/
#map a.lu{
top: -196px;
left: 444px;
width: 10px;
height: 10px;
background: #483723 ;
display: block;
border: 1px solid #000;
}
#map a.lu:hover {
border: 1px solid #fff;
background: #2f2519;
display: block;
}

/* Elwha and Lake Crescent *********/
/******************************** (21) **********/
#map a.mad{
top: -259px;
left: 284px;
width: 10px;
height: 10px;
background: #480e5c;
display: block;
border: 1px solid #000;
}
#map a.mad:hover {
border: 1px solid #fff;
background: #340a42;
display: block;
}
/******************************** (22) **********/
#map a.wo{
top: -252px;
left: 284px;
width: 10px;
height: 10px;
background: #480e5c ;
display: block;
border: 1px solid #000;
}
#map a.wo:hover {
border: 1px solid #fff;
background: #340a42;
display: block;
}
/******************************** (23) **********/
#map a.stf{
top: -350px;
left: 252px;
width: 10px;
height: 10px;
background: #480e5c ;
display: block;
border: 1px solid #000;
}
#map a.stf:hover {
border: 1px solid #fff;
background: #340a42;
display: block;
}
/******************************** (24) **********/
#map a.mar{
top: -318px;
left: 236px;
width: 10px;
height: 10px;
background: #480e5c ;
display: block;
border: 1px solid #000;
}
#map a.mar:hover {
border: 1px solid #fff;
background: #340a42;
display: block;
}

.target {
	width: 80px;
	text-align: center;
	border: 2px solid #666666;
	padding: 5px;
	background-color: #00FFFF;
	height: 45px;
	display: block;
	float: left;
}

.rightsidenav {
position: abolute;
right: 0px;
top: 100px;
float:right;
}

.mapcontainer { width: 1200px;
margin: 0 auto;}