/**************
COMMON

Commonly used styles throughout the site

 * NOTICE notice
 * ALERT alert
 * SIDE VERTICAL MENU side_vmenu
 * TOPIC TAGS topictag
 * IMG BOX img_box

***************/


/****************** 
NOTICE

  DIV class=notice
  - dull gold background
  - black border

  STRONG/SPAN class notice, id=leadin
  - red, uppercase (use for lead-in text)

  <div class="notice">
  <strong id="leadin">Important:</strong>
  Notice text here
  </div>
******************/

div.notice {
  padding: 10px !important ; 
  background-color: #FBEF6F  !important ;
  border: 2px solid black !important ;
}

div.notice #leadin, span.notice, strong.notice {
  color: #F00  !important ;
  text-transform: uppercase  !important ;
}

/****************** 
ALERT

  DIV class=alert
  - bright gold background
  - black border
  - small text

  STRONG/SPAN id=leadin
  - red, uppercase (use for lead-in text)

  <div class="notice">
  <strong id="leadin">Important:</strong>
  Notice text here
  </div>
******************/

div.alert {
  padding: 10px !important ; 
  background-color: gold  !important ;
  border: 2px solid black !important ;
  font-size: 80%  !important ;
}

div.alert #leadin {
  color: #F00  !important ;
  text-transform: uppercase  !important ;
}



/****************** 
SIDE_VMENU

- right-floating vertical menu designed for subtopics 
- used on Fossil Creek pages
- use DIV wrapper, with P for box header and UL for menu items

  <div class="side_vmenu">
  <p>HEADER</p>

  <ul>
	<li><a href="URL">ITEM</a></li>
	<li><a href="URL">ITEM</a></li>
	<li><a href="URL">ITEM</a></li>
  </ul>
  </div>
******************/

div.side_vmenu {
  border: 1px solid #563  !important ; 
  width: 200px  !important ; 
  font-size: 80%  !important ; 
  margin-left: 10px  !important ; 
  float: right  !important ;
}

div.side_vmenu p {
  margin: 0px 0px 0.5em 0px !important ; 
  padding: 3px  !important ; 
  background-color: #DEC  !important ;
  font-weight: bold  !important ;
}



/****************** 

TOPIC_TAG

- tag-style topic highlighting 
- uppercase, colored background/border
- use with STRONG or SPAN
- keep topic text simple, put detailed title after tag with link to relevant content

  <strong class="topic_tag rec_tt">Recreation</strong> 
  <a href="URL">Link to recreation guide</a>

******************/

.topic_tag {
	border: 1px solid black !important ; 
	text-transform: uppercase  !important ; 
	background-color: silver  !important ;
	font-weight: bold  !important ; 
}
	
.alert_tt { /* gold/red: closures, alerts, notices, and other really important stuff */
	border-color: red  !important ; 
	background-color: gold  !important ;
}

.fire_tt { /* red/gold: fires - wild and managed */
	border-color: gold !important ; 
	background-color: #C00 !important ; 
	color: gold !important ; 
}

.rec_tt { /* brown/yellow: general recreation (do white on dark violet for winter rec) */
	border-color: #641e1c !important ;
	background-color: #641e1c !important ;
	color: gold !important ; 
}

.permits_tt { /* pale green/green: permit sales, timber sales, and related announcements */
	border-color: #393  !important ;
	background-color: #BDB  !important ;
}

.nepa_tt { /* light blue/dark blue: public comment periods or other NEPA announcements */
	border-color: #06C  !important ;
	background-color: #9CF  !important ;
}

.business_tt { /* white on dark green: important Forest business, e.g., Forest Plan Revision */
	color: white  !important ; 
	border-color: #030  !important ;
	background-color: #363  !important ;
}




/****************** 

IMG_BOX_RIGHT/LEFT

- DIV container for displaying image and caption in a bordered box
- small font, centered caption
- override default width of 200px with style
  
IMG_BOX_WHITE_RIGHT/LEFT

- same box, white background  


******************/

div.img_box_right, div.img_box_left, div.img_box_white_right, div.img_box_white_left {
	padding: 5px !important ; 
	border: 1px solid black !important ; 
	width: 200px !important ; 
	font-size: 80% !important ;
    text-align: center !important ;	
}

div.img_box_right, div.img_box_white_right {
	margin-left: 10px !important ; 
	float: right !important ; 
}

div.img_box_left, div.img_box_white_left {
	margin-right: 10px !important ; 
	float: left !important ; 
}

div.img_box_white_right, div.img_box_white_left {
	background-color: white  !important ;
}

div.img_box_right p, 
div.img_box_left p, 
div.img_box_white_right p, 
div.img_box_white_left p {
    text-align: center !important ;
}