/******************************************************************************
 * Author:  Doug Johnson
 * Email:   doug@sizing.com
 * Website: http://www.infosizing.com/ aka http://www.sizing.com
 *
 * Description: CSS Level 2.1 compliant styling rules for entire site.
 *
 *****************************************************************************/


/* SITE-WIDE CLASS:
 * All pages have a body-level class based on this sites name. This provides
 * the end user with a "handle" so they can apply thier own style preferences
 * to this site. The empty class is included here so that CSS validators 
 * don't warn about the pages using an undefined class.
 */
.www-sizing-com
{
}


/******************************************************************************
 *  GENERAL:
 *
 *  Very general styling items.
 *
 */

/*
 *  Zero out all margin and padding settings. We'll put them back as needed on
 *  a section-by-section basis.
 */
*
{
    margin: 0;
    padding: 0;
}

img
{
    border: none;
}

/*
 *  BODY:
 *  Typical default font-size is 16px. Based on that, setting it to 62.5% will
 *  make 1em = 10px. This allows for easy translation between the two units.
 */
body
{
    background-color: #cccccc;
    color: #000;
    font-family: arial,helvetica,tahoma,verdana,sans-serif;
    font-size: 62.5%;
}

/*
 *  overallWrap:
 *  This wrap contains "everything". It:
 *  - sets the overall width we'll use
 *  - centers our overall width in the browser window
 */
#overallWrap
{
    margin: 0em auto;
    width: 90em;
}

/* 
 *  siteWrap:
 *  This wrap contains all site content (i.e. all "page" content plus the site footer).
 */
#siteWrap
{
    float: left;
}

/* 
 *  pageWrap:
 *  This wrap contains all "page" content (i.e. everything except the site footer).
 */
#pageWrap
{
    float: left;
    background-color: White;
    border-color: #e3e2e0;
    border-style: outset;
    border-top-style: none;
    border-left-style: none;
}

/*
 * contentWrap:
 * This wrap contains the content unique to each page (i.e. between the header/navBar and page footer).
 */
#contentWrap
{
    min-height: 60em; /* use this to control the minimum page height. */
}


/******************************************************************************
 *  LINKS:
 *
 *  Styling for all links throughout the site.
 *
 */

/*
 *  First, set overall style for links.
 */
a:link, a:visited
{
    color: #c63;
    text-decoration: none;
}

a:hover, a:active
{
    color: #900;
    text-decoration: underline;
}

/*
 *  Second, specially mark external links. This is done by first styling all
 *  absolute URLs and then removing the styling from any absolute URLs that 
 *  are for this site rather than an external site.
 */
a[href^="http"]
{
    background: url(../Images/ExternalLink.png) no-repeat top right;
    padding-right: 0.6em;
}

a[href^="http://www.sizing.com"],
a[href^="http://www.infosizing.com"]
{
    background-image: none;
    padding-right: 0;
}

/*
 *  Third, specially mark email links.
 */
a[href^="mailto:"]
{
    background: url(../Images/EmailLink.png) no-repeat center right;
    padding-right: 1em;
}


/******************************************************************************
 *  HEADER:
 *
 *  The following rules apply to the header and its content.
 *
 */
#publicSiteHeader
{
    float: left;
    width: 100%;
}

#companyBranding
{
    float: left;
    margin: 2em 1em;
}

#companyName
{
    font-size: 4em;
    font-style: italic;
    margin-bottom: 0em;
    margin-top: 0em;
}

#companyName a
{
    background: url(../Images/S-Logo.png) no-repeat center left;
    padding-left: 1.5em; /* nudge text past logo image */
}

/* override site-wide default <a> styling */
#companyName a:link, #companyName a:visited
{
    color: #000;
}
#companyName a:hover, #companyName a:active
{
    color: #000;
    text-decoration: none;
}

#companyNickName
{
    color: #335733;
    font-weight: bold;
}

#companyNameSloganSeperator
{
    margin-top: 1em;
}

#companySlogan
{
    font-family: Tahoma, sans-serif;
    font-size: 1.4em;
    font-style: italic;
    margin-top: .5em;
    text-align: center;
}

#companyContact
{
    float: right;
    font-size: 1.5em;
    margin: 2.5em 1em;
}


/******************************************************************************
 *  NAV:
 *
 *  The following rules apply to the navigation area and its content.
 *
 */
#publicPageNavWrap
{
    float: left;
    width: 100%;
}

/* div around whole menu control */
.navMenuWrap
{
    font-size: 1.5em;
    font-weight: bold;
    padding-left: .5em; /* nudge whole menu over a bit */
}

/* main menu bar */
.navMenuBar
{
}

/* main menu bar items */
.navMenuBar > li
{
    border-color: White;
    border-style: solid;
    border-width: thin;
    border-bottom: none;
    color: #527b52;
    padding-bottom: .2em;
    padding-top: .5em;
    text-align: center;
    width: 11em;
}

/* main menu bar item hover */
.navMenuBar > li:hover
{
    background-color: #527b52;
    border-color: #000000;
    color: White;
}

/* override site-wide link styling */
.level1 a:hover, .level1 a:active
{
    color: White;
    text-decoration: none;
}

.level2 a:hover, .level2 a:active
{
    color: #c63;
}

/* pop up nav menus */
.level2 > li
{
    font-size: .8em;
    text-align: left;
}

.navPopMenu
{
    background-color: White;
    border-color: #000000;
    border-style: solid;
    border-top: none;
    border-width: thin;
}

.level3
{
    border-color: #000000;
    border-top-style: solid;
    border-width: thin;
}

/* pop up nav menu items */
.navPopMenu > li
{
    background-color: White;
    padding-bottom: .3em;
    padding-left: 1em;
    padding-top: .3em;
    width: 12.75em;
}
.navPopMenuItem
{
    color: #527b52;
}

/* pop up nav menu item hover */
.navPopMenu > li:hover
{
    background-color: #e5e5e5;
}


/******************************************************************************
 *  ABBREVIATIONS:
 *
 *  Styling for all abbreviations throughout the site.
 *
 */
abbr[title]
{
    border-bottom: 1px dotted #666;
}

abbr[title]:hover
{
    cursor: help;
}


/******************************************************************************
 *  PAGE FOOTER:
 *
 *  The following rules apply to the page footer.
 *
 */
#publicPageFooter
{
    clear: both;
    float: left;
    background-color: #f9f9f9;
    border-top-style: solid;
    border-top-color: #f3f3f3;
    font-size: 1.5em;
    margin-top: 1em;
    padding-bottom: 1em;
    padding-top: 1em;
    width: 100%;
}

#pageFooter_lblPageFooterNav
{
    float: left;
    text-align: center;
    width: 100%;
}

#pageFooter_lblPageFooterNav a
{
    padding-left: 1em;
    padding-right: 1em;
}

#publicPageFooterNav a:hover, #publicPageFooterNav a:active
{
    color: #900;
    text-decoration: underline;
}


/******************************************************************************
 *  SITE FOOTER:
 *
 *  The following rules apply to the site footer.
 *
 */
#publicSiteFooter
{
    clear: both;
    float: left;
    font-size: 1em;
    margin-top: 1em;
    text-align: center;
    width: 100%;
}

.validationTags
{
    float: right;
    margin-top: -1.75em;
}
.validationTags p
{
    float: left;
    padding-left: .5em;
    padding-right: .5em;
}

/* undo the external link indicator */
.validationTags a
{
    background-image: none;
    padding-right: 0;
}