/*

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:#000066;}
A:active {color:#000066;}
/* We chose this slightly brighter link color to help users distinguish visited links from standard black text in non-underlined lists of links
   Original default visited link color: #800080. Revised 12/10/07*/
A:visited {color:#990099;}
A:visited:hover {color:#000066;}
A:visited:active {color:#000066;}
A.navbar:visited:hover {color:#FFFF00;font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}
A.navbar:visited:active {color:#FFFF00;font-family:arial narrow, verdana, arial, helvetica, sans-serif;font-size:95%;text-decoration:none;}

/* 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  {color:#0000ff; text-decoration:none;}
A.noline:visited {text-decoration:none;}
A.noline:active {color:#000066; text-decoration:underline;}
A.noline:hover {color:#000066; text-decoration:underline;}

/* 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:arial 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: short descriptions of links, the Acrobat blurb */
.info {color:#000066;font-style:italic;font-size:90%;}
/* In 2/2008 we decided to rename the pdfnote class to subtlenote so that it would be more universal.  Once we've switched all the pages using pdfnote, the pdfnote class will be removed. */
/* pdfnote class is used for the text that we display for PDF links, which always includes the file type and may also include the file size, the update date, and an "opens new window" notation (e.g., 207K PDF - opens new window).  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.  Initially we are implementing this on the County home page but will gradually switch other public pages that contain PDF links.  */ 
.pdfnote {color:#8294B1;font-style:italic;font-size:90%;}
/*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%;}
/* 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;}

/* 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 will be used in cases where a smaller, but not narrower, font size is needed.  examples of sz_85 class: the appendices on the ems policy.asp page */
.sz_85  {font-size:85%}

/* Color Classes - Background Colors */
.color_bg_navbar {background-color:#000066;}
.color_bg_emphasis {background-color:#8C0723;}
.color_bg_red {background-color:#FF0000;}
.color_bg_body {background-color:#ffffff;}
/* use color_bg_1-30 for visible tables;  details are in cssgrid.xls */
.color_bg_1 {background-color:#FFFFFF;}
.color_bg_10  {background-color:#dbe1ee;}
.color_bg_20  {background-color:#c4cde1;}
.color_bg_30  {background-color:#aebbd1;}
/* note that in dist 3 revamp pages and dist 5 pages (which each have their own css files) this bg color is white */
.color_bg_40  {background-color:#8294B1;}
/* use color_bg_100 for standalone blocks of bgcolor  */
.color_bg_100 {background-color:#cbd1d8;}

/* Color Classes - Text Colors */
.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;}

/* These classes are used for tables that need borders on most, but not all the records.  It allows for a visual break in a table.  This is used on some of the jobs pages that display job lists. */
   table.tableborder {border-top:1px solid #000066;}
   table.tableborder td {border-left:1px solid #000066;border-bottom:1px solid #000066;}
   table.tableborder td.rightborder {border-right:1px solid #000066;}
   table.tableborder td.noborder {border-right:0px;border-left:0px;}

   
/* These classes create the blue background behind the search box in the page headers */
td#search{vertical-align:bottom; text-align:center; padding:10px 10px 10px 5px; width:300px; height:48px; background-color:transparent;}
table#topsearch{float:right; padding: 0px; width:265px; height:45px; background-color:transparent; white-space: nowrap;font-family:arial narrow, arial, helvetica, verdana, sans-serif; font-size:9pt; color:#000000;}
.searchbg {background-image: url(/images/searchbg.jpg); background-repeat: no-repeat;}