/* Victory NH style sheet */


/* Short tutorial: Sizes can be defined in a variety of ways--pixels, points, and ems. Points are not that good for Web 
   pages (more useful for pages designed for printing) because different browsers/platforms render them in dramatically 
   different ways. Pixels provide absolute size--good for control, but eliminates the ability to set the broswer text 
   size larger (an issue especially for older audiences). Pixels (px) are used here for margins and borders, and for some
   text styles where we wanted to avoid text resizing. Em is the preferred approach to size text. It renders more 
   consistently across environments and resizes well. The em size is specified as a relative size, where .8em would be
   80% of an em, and 1.4em would be 140% of an em. */

/* Color scheme: The following colors are used within this Web site...
       Black          #000000
       White          #FFFFFF
       Bright red     #E20A16 (the red in the logo, the top/bottom red bars, and box borders)
       Red            #CC0812 (used for link text and background color on the front page box headers)
       Blue           #002C72
       Purple         #5F516A
       Blue-gray      #AAB3BF
       Various grays  #555555, #999999, #CCCCCC    */


  /* These styles define characteristics of standard HTML tags. This means that by default these tags will always be
     displayed according to these styles. Changing them will have global affect on the site. Since everything exists
     within tables, the TD tag is the global definition. */
body         { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000 }
td           { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; color: #000000; line-height: 1.5em }
ul           { margin-top: 0px; margin-bottom: 8px; list-style-type:disc }
ol           { margin-top: 0px; margin-bottom: 8px; list-style-type:decimal }
li           { margin-top: 0px; margin-bottom: 4px; line-height: 1.2em; margin-left: -4px }
p            { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; 
               margin-top: 0px; margin-bottom: 8px }
h1           { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.6em; color: #000000;
               margin-top: 5px; margin-bottom: 9px }
h2           { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.3em; color: #000000; font-weight: bold; 
               line-height: 1.4em; margin-top: 11px; margin-bottom: 2px }
h3           { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1em; color: #000000; font-weight: bold; 
               line-height: 1.2em; margin-top: 7px; margin-bottom: 2px }


/* The styles that begin with a period are custom styles that can be applied to most HTML objects using the CLASS 
   option (e.g. <p class="boxsub">) to replace or augment the tag styles (above) in a specific place. */


  /* This group of styles are used for text in the home page boxes. It is specified with px to precisely control how large 
     the text gets so avoid the boxes breaking apart if the text gets too large. It's not the ideal approach (dynamic box
     resizing would be better, but I couldn't get it to work), but it works. */
.boxhead-r   { font-family: Arial, Helvetica, sans-serif; color: #CC0812; font-weight: bolder; font-size: 16px; 
               margin-top: 2px; margin-bottom: 2px; margin-left: 3px; margin-right: 3px }
.boxhead-w   { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bolder; font-size: 16px; 
               margin-top: 2px; margin-bottom: 2px; margin-left: 3px; margin-right: 3px }
.boxsub      { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-weight: bold; font-size: 13px; 
               line-height: 19px; margin-top: 3px; margin-bottom: 3px; margin-left: 3px; margin-right: 3px }
.boxbody     { font-size: 12px; line-height: 15px; margin-top: 1px; margin-bottom: 4px; margin-left: 3px; margin-right: 3px }
.boxquote    { font-size: 12px; line-height: 16px; margin-top: 3px; margin-bottom: 4px; margin-left: 9px; margin-right: 9px; 
               text-align: center; font-weight: bold }
.iconlabels  { font-size: 10px; margin: 0px 0px 0px 0px; line-height: 10px }

  /* Only currently used for the header above the e-mail sign-up on the home page. */              
.emailhead   { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bold; font-size: 14px; 
               line-height: 20px; margin-top: 6px; margin-bottom: 2px }

  /* Used to format pull-quotes on the interview page. */
.pullquote   { font-size: 1.3em; line-height: 1.3em; font-weight: bold; color: #5F516A; text-align: center; 
               margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px }

  /* Format for standard tables that have red 3D border and blue-gray background. */
.table-std   { border: 6px ridge #E20A16; background-color: #AAB3BF }

  /* Border used mostly for images to create some space around them so text doesn't run up too close. */
.whiteborder { border: 5px solid #FFFFFF }

  /* Should be obvious based on its name. */
.photocredit   { font-size: .7em; line-height: 1.1em; text-align: right; color: #555555; margin-right: 8px }

  /* This series tends to affect only the size or color */
.small         { font-size: .85em }
.bigred        { font-size: 1.4em; line-height: 1.4em; font-weight: bold; margin-top: 1.3em; color: #CC0812 }
.gray          { color: #555555 }
.quote         { margin-left: 12px; margin-right: 12px; text-align: center; font-weight: bold }


  /* The span styles are used with the HTML <span> tag. It's used for character-level formatting rather than paragraph-level
     that the above all are. The names make most self-explanatory. */
span.smchar    { font-size: .85em }
span.red       { color: #CC0812 }
span.blue      { color: #002C72 }
span.purple    { color: #5F516A }
span.intlabel  { font-size: .85em; font-weight: bold }  /* Used in interview to label the speaker (VNH, interviewee) */


/* These 'a' styles are used for link text. You put them in the hyperlink code to define the characteristics of link text,
   links that have been visited, and the hover (mouseover) action. We've opted to not distinguish between visited and 
   unvisited, and they are therefore the same. */

  /* Home page, box links-small text (i.e. the "Click here" links that are smaller than the body copy). */
a.boxlink-s           { color: #CC0812; text-decoration: underline; font-size: 10px; margin-top: 3px; margin-bottom: 3px;
                        line-height: 13px }
a:visited.boxlink-s   { color: #CC0812; text-decoration: underline }
a:hover.boxlink-s     { color: #5F516A; text-decoration: none }

  /* This is the primary style for linking text. It takes on the other characteristics of the text it's linking, so will work
     regardless of the style of the text, just changing it to red and adding the underline. */
a.textlink            { color: #CC0812; text-decoration: underline }
a:visited.textlink    { color: #CC0812; text-decoration: underline }
a:hover.textlink      { color: #5F516A; text-decoration: none }


  /* This group of styles is used in the page footer. It's a mix of paragraph and link styles, but not used anywhere 
     outside the page footers. */
.foot                 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; color: #999999; 
                        margin-top: 3px; margin-bottom: 3px; text-align: center }
a.footlink            { color: #CCCCCC; text-decoration: none }
a:visited.footlink    { color: #CCCCCC; text-decoration: none }
a:hover.footlink      { color: #CC0812; text-decoration: none }
a.footlink2           { color: #999999; text-decoration: none }
a:visited.footlink2   { color: #999999; text-decoration: none }
a:hover.footlink2     { color: #CC0812; text-decoration: none }

  /* This group of styles is used for the Video Player object */

#vidplayer 			  {
	width: 400px;
	height: 300px;
	background: #000;
	text-align: center;
}

#vidspeed {
	width: 175px;
	height: 100px;
	text-align: center;
}