/*

This file belongs to a set of files that allow the user to resize the text via a visible button on the Web page (as opposed to using the resize options built
into the browser):

1)      styleswitcher.js:  This file contains the functions used to switch to alternate stylesheets with different text sizes.
                           This file also contains functions to store the user's preferred stylesheet information.						   
						   
2)		includes files:  These are used to build the visible resize bar. The *med version will be used for those portions of the site that default to the "medium" default text size (e.g., AAS)			
			resize_bar_med_visible.asp or resize_bar_small_visible.asp:   these files build the visible resize bars. 
			resize_bar_med_underlying.asp or resize_bar_small_underlying.asp:   these files contain the alternate stylesheets and call styleswitcher.js.			

3)      CSS files:  Depending on whether a given section of the site wishes to have the default font size set to the smaller (80%/roughly 10 point font) or larger (100%/roughly 12 point font) that section will use the following CSS files:

Sections with smaller font:
·         Std_page_percent:  this is the full CSS file
·         Page_percent_100:  used when user selects the medium font option
·         Page_percent_120:  used when user selects the large font option
·         Page_percent_140:  used when user selects the x-large font option
·         Page_percent_80:   allows the user to go back to the small (default) font size after having selected one of the other font sizes 

Sections with larger font: 
·         Med_page_percent:  this is the full CSS file
·         Page_percent_80:   used when user selects the small font option
·         Page_percent_120:  used when user selects the large font option
·         Page_percent_140:  used when user selects the x-large font option
·         Page_percent_100:  allows the user to go back to the medium (default) font size after having selected one of the other font sizes 

Unrelated note: A copy of this file is also located in f:\docs\boardoftrade\css directory;  copy is needed because of virtual domain */

*        {font-family:verdana, arial, helvetica, sans-serif;font-size:100%;}
BODY     {font-size:80%;}

A:hover  {color:#FF0000;}
A:active {color:#FF0000;}

/* Navigation Classes */
A.navbar:link  {color:#FFFFFF; font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}
A.navbar:visited {color:#FFFFFF;font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}
A.navbar:active {color:#FFFF00;font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}
A.navbar:hover   {color:#FFFF00;font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}
A.noline:link  {text-decoration:none;}
A.noline:visited {text-decoration:none;}
A.noline:active {text-decoration:none;}
A.noline:hover {text-decoration:none;}

/* Print Classes */
/* dontprint class is used for items that display on the screen but that we don't wish to print - e.g., header images, nav bars */
@media print{.dontprint{display:NONE;}}
/* printall class is used to prevent print from truncating in IE when page width is 100% */
@media print{.printall{width:95%;}}
/* printonly class is used for items such as special print headers that should not be displayed on the screen*/
@media screen{.printonly{display:NONE;}}
/* print_borders class is used for visible tables where we want border to print (for readability) but not be visible on displayed page */
/* the print_borders has to be put in every TD for this to work */
@media print{.print_borders{border: #000000 1px solid;}}
.pagebreak {page-break-before:always;}

/* Header Classes */
.header_main {font-size:125%;font-weight:bold;}
.header_2nd  {font-size:110%;font-weight:bold;}
.header_3rd  {font-size:100%;font-weight:bold;}
.header_print_small {font-size:120%;font-weight:bold;}
.header_print_large {font-size:180%;font-weight:bold;}
.header_table {font-size:100%;font-weight:bold;}

/* Other Named Classes */
.backtotop {font-size:85%;}
.breadcrumbs {font-size:85%;text-align:center;}
.smallnarrow {font-size:85%;font-family:Arial Narrow, verdana, arial, helvetica, sans-serif;}
.disclaim {background-color:#dbe1ee;font-weight:bold;}
.privacy {background-color:#c4cde1;font-weight:bold;}
.sidenavsectionheader  {font-family: narrow, verdana, arial, helvetica, sans-serif;font-size:95%;font-weight:bold;background-color:#bac0d0;color:#000000;}
/* info class is used for items that are primarily informational. */  
/* examples of info class:  PDF size/date, short descriptions of links, the Acrobat blurb */
.info {color:#000066;font-style:italic;font-size:90%;}
/* td & li elements of an element that uses the info class will also be italic and blue */
.info td {color:#000066;font-style:italic;}
.info li {color:#000066;font-style:italic;}
/*subtlenote class is used for the following:  1) "characters remaining" text  2) the PDF designation next to PDF links (e.g., XXXK PDF, updated MM/DD/YY) which may also include the file size and an "opens new window" notation (e.g., 207K PDF - opens new window).  3) any other situation where we want a note but don't want it to stand out too much. The goal in choosing a different color for these links was to differentiate this class from the regular "note" class that is used for link descriptions and in other places - on the County home page in particular, using the same class for both was confusing.  */ 
.subtlenote {color:#8294B1;font-style:italic;font-size:90%;}
/* note class is used for more important notes to user (i.e., an item we want user to read before continuing).*/
/* examples of note class:  instructions on app pages */ 
.note  {color:#000066;font-style:italic;font-size:90%; font-weight:bold;}
/* announce class is used for less-critical error messages and notifications. (e.g., situations where user needs to correct data or criteria entered).*/ 
/* examples of announce class:  EOF message, some edit errors */
.announce {color:#000066;font-size:105%;font-weight:bold;}
/* warning class is used for critical error messages and notifications (e.g., situations where the user really can't proceed.) */
/* examples of warning class: database error, incorrect browser/JavaScript off/cookies off messages */
.warning {color:#FF0000;font-size:115%;font-weight:bold;}

/* used for detail entries on boardsummary pages */
.boarddtl {color:#000066; font-size:86%; font-style:italic;}

/* use no_bottom_margin to remove padding from html tags that automatically have it, like list items <li> */
.no_bottom_margin {margin-bottom:0px;}
.no_top_margin {margin-top:0px;}

/* use li_spaced to add extra padding to list items, as default values result in a "scrunched" look.  */
.li_spaced {margin: 5px;}
ul.li_spaced li {margin: 5px;}

/* HR Classes */
/* Format: hr_width_height */
.hr_headimage {color:#000066;width:96%;height:1px;}
.hr_45x1 {color:#000066;width:45%;height:1px;}
.hr_100x1 {color:#000066;width:100%;height:1px;}
.hr_100x2 {color:#000066;width:100%;height:2px;}

/* HTML Form Classes */
/* use button_appearlink_mouseover and button_appearlink_mouseout to make a form button look like a link using css */
.button_appearlink_mouseover {border:0px;padding:0px;width:auto;overflow:visible;background-color:transparent;color:#ff0000;text-decoration:underline;cursor:hand;}
.button_appearlink_mouseout  {border:0px;padding:0px;width:auto;overflow:visible;background-color:transparent;color:#0000ff;text-decoration:underline;cursor:pointer;}

/* Font Style Classes */
.i {font-style:italic;}
.b {font-weight:bold;font-size:90%;}
.u {text-decoration:underline;}  

/* Font Size Classes */
/* sz_80 will be used for text being entered in a text box;  sz_80 plus color_txt_30 (red) will be used for the text in the countdown box used for text boxes */
.sz_80  {font-size:80%;}
.sz_85  {font-size:85%}

/* Color Classes */
.color_bg_navbar {background-color:#000066;}
.color_bg_emphasis {background-color:#8C0723;}
.color_bg_body_blue {background-color:#eff7ff;}
.color_bg_body {background-color:#ffffff;}
/* use color_bg_10-30 for visible tables;  details are in cssgrid.xls */
.color_bg_header {background-color:#CCCCFF;}
.color_bg_10  {background-color:#DEE3FF;}
.color_bg_10 {background-color:#;}
.color_bg_20  {background-color:#D4D9F5;}
.color_bg_30  {background-color:#848EC6;}
.color_bg_40 {background-color:#6674B2}
.color_bg_yellow {background-color:#FFFF99;}
.color_bg_green {background-color:#99FF99;}
.color_bg_blue {background-color:#336699;}
/* use color_bg_100 for standalone blocks of bgcolor  */
.color_bg_100 {background-color:#cbd1d8;}
.color_txt_10 {color:#000066;}
.color_txt_20 {color:#8C0723;}
.color_txt_30 {color:#FF0000;}
.color_txt_40 {color:#FFFFFF;} 

/* Border Classes */
.color_border_10 {border-color:#000000;border-style:solid;border-width:thin;}
.color_border_20 {border-color:#000066;border-style:solid;border-width:1px;}
.border_collapse {border-collapse:collapse;}
.table_blue {border:1px solid #000066;}