/*
                                DEFAULT.CSS

=============================================================================
  OVERVIEW:
=============================================================================
  This stylesheet defines all styles for the default CredStar web site.  It
  overrides and extends the Yahoo! User Interface (YUI) core stylesheets:
   - reset.css: resets all css styles for cross-browser compatibility
   - fonts.css: sets default font sizes
   - grids.css: defines common column layouts
  Please see http://developer.yahoo.com/yui for complete documentation.
  The following YUI css file combines and minifies the three stylesheets
  mentioned above, and is referenced in the credstar.master page:
   - ~/App_Themes/reset-fonts-grids.css
  The reset-fonts-grids.css file should never be edited.  Any of its settings
  can be overwritten in this file.

=============================================================================
  ORGANIZATION:
=============================================================================
  This file is organized into logical sections, each with a name in capital
  letters beginning with an underscore (e.g. _EXAMPLE).  To quickly locate a
  section, search for the section name with the initial underscore to avoid
  finding tags/classes/selectors with the same name.

  The sections (with initial underscore removed) are:
   - OVERRIDES
   - GLOBAL_TAGS
   - HEADER
   - FOOTER
   - SPRITES
   - TEXT_HEADERS
   - LISTS
   - ANCHORS
   - INDEX_PAGE
   - TABLES
   - SECTION_TABS_LOGIN

  To jump quickly from section to section, search for _SECTION.

=============================================================================
  FONTS:
=============================================================================
  Per Yahoo! recommendations, specify all font sizes in percentages, which
  render more consistently across browsers, and scale properly when users
  resize text.  Use the chart below to determine the correct percentage to
  use, and only use values from the chart if possible.  Do not use
  pixels (px), points (pt), ems (em), or any other unit.  Ems can be used
  for margins and line heights.

  Pixel  =  Percentage
  --------------------
  10px   =  77%
  11px   =  85%
  12px   =  93%
  13px   =  100%
  14px   =  108%
  15px   =  116%
  16px   =  123.1%
  17px   =  131%
  18px   =  138.5%
  19px   =  146.5%
  20px   =  153.9%
  21px   =  161.6%
  22px   =  167%
  23px   =  174%
  24px   =  182%
  25px   =  189%
  26px   =  197%

=============================================================================
  NAMING:
=============================================================================
  CSS selector/class names are intentionally kept short to minimize file
  size.  To keep the system as generic as possible, commonly used classes and
  their variations are given sequential numeric identifiers.  For example,
  .grid1 and .grid2 define different layouts for a GridView control, but they
  are named generically because they may look completely different in another
  Theme.  A cheat sheet with screenshots of all common layouts is available
  at: TODO: Create cheat sheet and reference here

=============================================================================
  SKINS:
=============================================================================
  Many of the styles in this file are referenced and organized by Skins.  The
  default skin file is: ~/App_Themes/Default/Default.skin.  Where applicable,
  the style defined in this file (default.css) references its parent SkinID
  in Default.skin.

=============================================================================
  PERFORMANCE:
=============================================================================
  The YUI CSS file is minified for performance reasons.  All other
  styles are defined in this css file, so clients do not have to download
  multiple stylesheets.  An additional stylesheet, ie.css, is loaded
  conditionally for IE browsers (see ie.css for more information).
*/

/*===========================================================================*\
    _SECTION_OVERRIDES: Overrides styles defined in YUI reset-fonts-grids.css
\*===========================================================================*/
html, body, form, #wrap
{
    background-color: #000;
    height: 100%;
}

#wrap 
{
    height: auto; 
    font-family: arial; /* Override the default font here.  Only specify one
                           font-family; the YUI fonts.css file handles font
                           degrading. */
    min-height: 100%;
}

#hd
{
    height: 175px;
    margin: 0 auto;
    width: 870px;  
}

#bd 
{
    margin: 0 auto;
    padding-bottom: 300px; /* must be same height as the footer */
    width: 870px;
}  

#ft 
{
    background-image: url(../img/bg/crowd_bkgd.gif);
    background-repeat: repeat-x;
    background-color: #fff;
    position: relative;
	margin-top: -300px; /* negative value of footer height */
	height: 300px;
	clear:both;
} 

.clearfix:after 
{
    content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix 
{
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix  
{
    height: 1%;
}

.clearfix 
{
    display: block;
}
/* End hide from IE-mac */


/*===========================================================================*\
    _SECTION_HEADER: Defines the structure and appearance of the header
\*===========================================================================*/

/* Header Structure */
#hd-logo
{
    float: left;
    height: 50px;
    margin: 30px 0 0 -30px;
    width:  259px;  
}

#hd-encore
{
    float: right;
    height: 27px;
    margin: 20px 10px 0 0;
    width: 169px;
}

#hd-flash
{
       float: right;
       height: 89px;
       margin: 0;
       width: 715px;
}

/* Header Appearance */
#hd-logo
{

}

#hd-encore
{
    background-image: url(../img/bg/encore_its_time.gif);
    background-repeat: no-repeat;
}

#hd-flash
{
    
}

/*===========================================================================*\
    _SECTION_BODY: Defines the structure and appearance of the body
\*===========================================================================*/

/* Body Structure */
#bd-lft
{
    color: #fff;
    float: left;
    width: 155px;
}

#bd-lft-top
{
    padding: 0 20px 0 0;
}

#bd-rt
{
    color: #fff;
    border: solid 1px #333;
    float: right;
    width: 713px;    
}

#bd-rt-top
{
     height: 160px;
     width: 713px;   
}

#bd-content-title
{
    float: right;
    height: 120px;
    width: 670px;
    margin: 35px 0 0 0;
}

#bd-rt-bot
{
    width: 713px;
}

#bd-content
{
    float: left;
    padding: 0 0 45px 45px;
    width: 400px;    
}

#bd-resources
{
    float: right;
    padding: 0 45px 0 0;
    width: 175px;
}

#bd-form
{
    float: right;
    padding: 0 45px 45px 0;
    width: 175px;
}

/* Header Appearance */
#bd-lft-top
{
    text-align: right;
}

#bd-rt
{
    background-image: url(../img/bg/bkgd_body.gif);
    background-repeat: repeat-x;
    background-position: bottom;
}

#bd-rt-top
{
     background-image: url(../img/bg/header_crowd.gif);
     background-repeat: no-repeat;
     text-align: left;
}

#bd-rt-bot
{
    text-align: left;
}

/*===========================================================================*\
    _SECTION_FOOTER: Defines the structure and appearance of the footer
\*===========================================================================*/

/* Footer Structure */

#ft-lft
{
    float: left;
    height: 36px;
    margin: 235px 0 0 25px;
    width: 154px;
}

#ft-mid
{
    float: left;
    height: 36px;
    margin: 235px 0 0 250px;
    width: 400px;
}

#ft-rgt
{
    float: right;
    height: 56px;
    margin: 225px 30px 0 0;
    width: 123px;
}

/* Footer Appearance */

#ft-rgt
{
    background-image: url(../img/logos/nd_merge_logo.gif);
    background-repeat: no-repeat;
}

#ft-mid a
{
    color: #666;
	text-decoration: none;
}

#ft-mid a:hover
{
    color: #666;
	text-decoration: underline;
}

/*===========================================================================*\
    _SECTION_GLOBAL_TAGS: Defines global styles after YUI reset applied
\*===========================================================================*/

h1{font-size:138.5%} /* 16px */
h2{font-size:123.1%} /* 14px */
h3{font-size:108%} /* 12px */
h4{font-size:93%} /* 11px */
h1,h2,h3,h4,h5,h6{color:#E23D28;margin:1em 0px;font-weight:bold}
p{margin-bottom:1em; color: #fff;}
h1{margin-top:0}
a:active,a:link,a:visited{color: #fff; text-decoration:underline;}
a:hover{color: #e23d28; text-decoration:underline;}

/*===========================================================================*\
    _TEXT_HEADERS: Styles for HTML headers (<h1> and <h2>...)
\*===========================================================================*/

h1.red
{
    color: #E23D28;
}

h3.white
{
    color: #fff;
	font-weight: bold;
	font-style:italic;
	margin-top: -16px;
}

h3.red
{
    color: #E23D28;
}

h4.red
{
    color: #E23D28;
	margin-bottom: 0;
}

/*===========================================================================*\
    _LISTS: Styles for UL & LI
\*===========================================================================*/

#ulmain-bullet
{
	color: #fff;
	margin-left: 8px;
	padding-top: 3px;
	padding-left: 5px;
	list-style: none;
	display: inline-block;
	margin-top: 3px;
	font-size:11px;
}

#ulmain-bullet li
{
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	font-style:italic;
	padding-left: 12px;
	padding-right: 5px;
	padding-bottom: 5px;
	background-image: url(/images/bullet_yellow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	line-height: 17px;	
}

/*===========================================================================*\
    _SECTION_TABLES: styles for HTML tables <table>
\*===========================================================================*/

.reqForm td
{
    color: #fff;
    padding-bottom: 2px;
    *padding-bottom: 0;
    _padding-botton: 0;
}

.reqForm td input
{
    color: #000;
    background-color: #999;
    border: solid 1px #999;
    font-size: 11px;
    width: 175px;
}

.reqForm td select
{
    background-color: #999;
    color: #000;
    font-size: 11px;
    width: 175px;
}

/*===========================================================================*\
    _SECTION_TEXT: Defines classes for displaying various text types
\*===========================================================================*/
.item-required
{
    color: #E23D28;   
}

.container
{
    background-color: #999;
	border: solid 1px #999;
	position: relative;
	*margin-left: 0;
	width: 171px;
	height: 14px; /* !IE */
	*height: 16px; /* IE7 */
	_height: 16px; /* IE6 */
	overflow:hidden;	
	font-size:11px;
}

.container-select
{
    background-color: #999;
	color: #fff;
	position: absolute;
	width: 175px;
	top: -2px;
	left: -2px;	
}

.small-gray-text
{
    color: #666;   
    font-family: Arial;
	font-size: 11px;
}

/*===========================================================================*\
    _SECTION_NAVIGATION_MENU: Defines the appearance of the Navigation Menu
\*===========================================================================*/

.menuNavigation ul.AspNet-Menu /* Tier 1 */
{
    width: 125px; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    _width: 75px;
}

.menuNavigation li:hover, /* list items being hovered over */
.menuNavigation li.AspNet-Menu-Hover
{
    color: #E23D28;
}

.menuNavigation a, /* all anchors and spans (nodes with no link) */
.menuNavigation span
{
    color: #666;
    padding: 0 0 25px 0;
    font-weight: bold;
    text-decoration: none;
}

.menuNavigation li.AspNet-Menu-Leaf a:hover, /* leaves */
.menuNavigation li.AspNet-Menu-Leaf span
{
    color: #E23D28;
    text-decoration: none;
}

.menuNavigation .AspNet-Menu-Selected /* this tier is selected */
{
    color: #E23D28;
    text-decoration: none;
}

/*===========================================================================*\
    _SECTION_HOME_NAVIGATION_MENU: Defines the appearance of the Navigation Menu
\*===========================================================================*/

.menuHomeNavigation ul.AspNet-Menu /* Tier 1 */
{
    width: 425px; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    _width: 425px;
}

.menuHomeNavigation li:hover, /* list items being hovered over */
.menuHomeNavigation li.AspNet-Menu-Hover
{
    color: #E23D28;
}

.menuHomeNavigation a, /* all anchors and spans (nodes with no link) */
.menuHomeNavigation span
{
    color: #666;
    padding: 0 0 10px 15px;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}

.menuHomeNavigation li.AspNet-Menu-Leaf a:hover, /* leaves */
.menuHomeNavigation li.AspNet-Menu-Leaf span
{
    color: #E23D28;
    text-decoration: none;
}

.menuHomeNavigation .AspNet-Menu-Selected /* this tier is selected */
{
    color: #E23D28;
    text-decoration: none;
}

/*===========================================================================*\
    _TABLES: Defines the appearance of the Tables
\*===========================================================================*/

#box-table-a
{
	font-size: 93%;
	margin: 20px 0 0 0;
	width: 400px;
	text-align: left;
	border-collapse: collapse;
}
#box-table-a th
{
	font-size: 93%;
	font-weight: bold;
	padding: 8px;
	background: #333;
	border-bottom: 1px solid #fff;
	color: #fff;
}
#box-table-a td
{
	border-bottom: 1px solid #ccc;
	color: #666;
	padding: 10px 8px;
	background: #e8edff; 
}
#box-table-a tr:hover td
{
	background: #ccc;
	color: #333;
}