/* this should be the most basic style, given to browsers we didn't specifically test for, it is based off netscapeFour.css but with mouse overs, just incase they'll work.  It also contains the majority of documentation detailing the usage of the CSS rules. */

/* All comments assume the user-agent understands at least the basics of CSS1 and maybe a little of CSS2.  CSS Positioning is not used in GVC.SiteMaker currently.  */

/* Font size switched to emphasis (ems) rather then keywords for greater granularity.  */

body {
/* The styling on the body tag should provide the default font-family, the default font-size.  The default foreground and background color are also specified this is all to provide a high degree of readability. */
   font-size: 1em; 
   background-color: white;
   color: black;
   font-family: Arial, Verdana, Helvetica, sans-serif;
}

.layout, .header {
/*  This class is used by the DynamicBody and the HeaderSub WOComponents to specify how much of the screen is filled with GVC.SiteMaker.  There are also HTML hacks with spacer images so this number does not solely control screen width, but eventually may.  */
  width: 745px;
}

.coloredBackground, table.header {
/*  The background color of the header and left column.  */
/* table.header rule helped Netscape 6.2 but that browser could also use a more advanced style perhaps.  */
  background-color: #000080;
}

.lightColoredBackground {
/* All purpose light colored background rule */
  background-color: #CAE1FF;
}

/*  All curves rely on spacer images to give them shape, but the actuall curve image is provided by the stylesheet so it can be changed without altering the .html and .wod files, curve size would have to be maintained though. */

.outerCurve {
/* This controls the width and height and background of the table cells used to make the darker outer curve */
  background: #000080 url(/GVCSiteMaker/Images/outerCurve.gif) bottom right no-repeat;
  width: 24px;
  height: 24px;
}

td#inverseCurve {
/* This controls the width and height and background of the table cell used to make the inverse curve */
  background: #000080 url(/GVCSiteMaker/Images/inverseCurve.gif) bottom right no-repeat;
  width: 24px;
  height: 24px;
}

#reverseLighterCurve {
/* This controls the width and height and background of the table cell used to make the inner (reversed) lighter curve */
  background: #000080 url(/GVCSiteMaker/Images/reverseLighterCurve.gif) top left no-repeat;
  width: 24px;
  height: 24px;
}

#lighterCurve {
/* This controls the width and height and background of the table cell used to make the lighter curve */
/* changed background color... */
  background: #CAE1FF url(/GVCSiteMaker/Images/lighterCurve.gif) bottom right no-repeat;
  width: 24px;
  height: 24px;
}

#innerCurve {
  /* This controls the width and height and background of the table cell used to make the darker inner curve.  */
  background: white url(/GVCSiteMaker/Images/innerCurve.gif) top left no-repeat;
  width: 24px;
  height: 24px;
}

td#inverseLighterCurve {
  /* This controls the width and height and background of the table cell used to make the inverse lighter curve.  */
  background: white url(/GVCSiteMaker/Images/inverseLighterCurve.gif) top left no-repeat;
  width: 24px;
  /* height is not forced here... */
}

#infoBox {
  /*  The width of the lighter colored header stuff.  */
  width: 697px;
}

.content, hr, table.coloredTable, .primaryTextArea {
/*  This number tries to constrain the width of the content, ie any thing that isn't in the header.  It is not always sucessful as extremely large content can force itself outside the contrains of this width.  Some browsers are lax in enforcing this so there
are numerous HTML tricks used as well.  */
   width: 690px;  /* trying to preserve correct column widths and overall table size. */
}

hr {
/*  All Horizontal Rules are left aligned now because it looks better when things break down, when things work they appear centered anyway. */
  /* width defined above for all hrs... */
  text-align: left;
}

.content {
/* content will start at top of the container */
  vertical-align: top;
}

/* GVC.SiteMaker is primarily a two column content layout, for the majority of columns
a fixed width is being imposed.  The next two styles supply the width.  It should be noted that in HTML hacks are still needed to help out lesser browsers, so that
the columns can not all be dynamically resized.  Not all pages makes use of these
column rules.  The two columns should sum to the width of content.  Note padding/spacing
is supplied by the HTML table tag and we are naively completely ignoring it in our width
calculations.  Because the left column often already has a class on it (such as boldText) it is common to only make use of the rightContentColumn rule.  */

.leftContentColumn {
  width: 245px;
}

.rightContentColumn {
  width: 445px;
}

hr.primaryBarStyle {
  /* Currently all hr's look the same... */
}

hr.alternateBarStyle {
  /* Currently all hr's look the same... */
}

/* no styling is currently done on input, select, or option  */

/* Deprecated.  Prefer one of the specific sizes below.  */
.defaultEntryBox {
  width: 300px;   /* Browsers that use this style sheet should size this correctly.  */
}

.tinyEntryBox {
  width: 75px;   /* Browsers that use this style sheet should size this correctly.  */
}

.smallEntryBox {
  width: 175px;   /* Browsers that use this style sheet should size this correctly.  */
}

.mediumEntryBox {
  width: 250px;   /* Browsers that use this style sheet should size this correctly.  */
}

.largeEntryBox {
  width: 500px;   /* Browsers that use this style sheet should size this correctly.  */
}

.pageTitle, h1 {
/*  This text is found just below the header.  */
  font-size: 1.9em;
  font-weight: bold;
  /* attempts to limit white space above and below text */
  padding-top: 0.5em;  /* Jon wants more padding */
  margin-top: 0px;
  vertical-align: top;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.subTitle, h2 {
/*  This is a size of text inbetween h1 and h3 */
  font-size: 1.6em;
  font-weight: bold;
}

.sectionTitle, h3 {
/* This rule is used on the majority of pages as the secondary title text */
  font-weight: bold;
  font-size: 1.45em;
}

th.sectionTitle {
/*  Section titles in table are left aligned.  */
  text-align: left;
}

.boldText, .coloredBoldText {
/*  These classes are used in conjunction with the bold tag.  */
  font-weight: bold;
}

.inProgressTask {
  /* display for tasks that are in progress */
  color: red;
  font-weight: bold;
}

.waitingTask {
  /* display for tasks that are waiting */
  font-weight: bold;
}

.activeTask {
  /* display for tasks that are not in progress */
}


.coloredBoldText, .coloredText {
/* this controls the alternate color text */
  color: #000080; 
}

.warningText {
/*  This class is used for error messages exclusively.  */
  color: red;
}

.successText {
/*  This class is used for success messages exclusively.  */
  color: green;
}

.requiredText {
/* catch all class to highlight required text, it provides a color and italizes the text.  It should be used in conjunction with the <i> tag. */
  color: #B22222;  /* red/brown */
  font-style: italic;
  font-size: 1em;
  font-weight: normal;
}

.optionalText {
/*  This is used for colored optional text.  It is also smaller and italized.  It works in conjunction with the <i> tag. */
  color: #000080; 
  font-style: italic;
  font-size: 1em;
  font-weight: normal;
}

.descriptiveText {
/* Used for "descriptive text" Alann thought this was needed.  I think it is suppose to be a bit bigger then microText but a bit smaller then the default size.*/
  font-style: normal;
  font-weight: normal;
  font-size: 0.85em;
}

.microText {
/* tiny text, smaller then default font-size text */
  font-size: 0.75em;
}

.emphasis {
/*  This rule is currently used on only one page, it is slightly bigger more prominant text then boldText or just the <b> tag.  */
  font-weight: bold;
  font-size: 1.25em;
}

.emphasis:first-letter {
/*  Makes the first letter of the class above even bigger.  */
  font-weight: bolder;
  font-size: large;
}

/* generic link rules more specific ones can make use of classes */
a:link, a:visited {
  color: #009ACD;
}

a:hover {
  color: white;
  background-color: #009ACD;
}

a:active {
  color: #008B45;
}

.header a:hover {
  /* prevents hover effect on image buttons in header */
  background-color: #000088;  
}

a.stealthLink:link, .stealthLink {
/*  This link style is only used on the default main page currently.  Designed to make link invisiable to
humans but findable by bots.  */
  color: white;
  text-decoration: none;
}

a.stealthLink:hover {
/*  This link style is only used on the default main page currently.  Designed to make link invisiable to
humans but findable by bots.  */
  color: white;
  background-color: white;
  text-decoration: none;
}

table.coloredTable, #infoBox {
/*  Controls the font-size of the colored table text and the infoBox in the header.  */
   font-size: 0.95em;
}

table.coloredTable th, .coloredTableHeading {
/* Netscape 4 needed the second rule declaration and corresponding class. */
  color: white;
}


table.coloredTable th a:link, table.coloredTable th a:visited {
/* Alternative colored link for coloredTable */
/* Another class coloredTableLink is in use by Netscape 4 browsers too */
  color: white;
}

table.coloredTable th {
/* The heading styles background color.  All colored table headings are centered, usually by browser default.  Infobox only makes use of the background color of a table heading. */
  background-color: #000080;
  text-align: center;
}


table.coloredTable td, #infoBox td {
/* The normal cells foreground and background colors. */
  background-color: #CAE1FF;
  color: black;
}

#infoBox td#infoCell {
  /* The actual contents of the info box */
  padding-bottom: 0.4em;	
}

.coloredTable a:link, .coloredTable a:visited {
/* Alternative colored link for coloredTable */
/* Another class coloredTableLink is in use by Netscape 4 browsers too */
  color: #000088;
}

table.coloredTable a:hover, div.coloredTable a:hover {
/* Alternative mouse over for coloredTable */
  background-color: #000088;
  color: white;
}

#infoBox a.previewURL, .headerAlternateText 
{
/* makes text bold and dark blue */
  color: #000088;  
  font-weight: bold;
}

#infoBox a.previewURL:hover {
/* A custom mouse over for the preview URL. */
  color: #FFA500;
  background-color: #CAE1FF;  /* possibly redundant */
}

.deleteButton {
/*  This rule puts a red border around delete buttons, it needs to be used with a table (or possibly a div).  This isn't too sophisticated but worked in N4.  */
  text-align: center;
  padding: 4px;
  background-color: red;
}

.pageFlipper {
  /* it didn't have it's own style but could prove useful */
}

.websiteDescription {
  /* it didn't have it's own style but could prove useful */
}