﻿/*********************************
Monochrome theme color information
Black: #000000;
VeryDark: #414151;
Dark: #575766;
Medium: #76768C;
Light: AAAAB4;
White: #FFFFFF;
TableRow1: #E0E0E0
TableRow2: #F4F4F4
*********************************/

/********************
Global HTML elements
********************/
*
{
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

body
{
    margin: 0 auto 0 auto;
    background-color: #414151;
    width: 904px;
}

form
{
    margin: 0;
}

/***********************
Page Layout Divs and
locally applied classes
and HTML element styles
***********************/

/* The pagewrapper div defines the overall page boundary...it works with the body element to 
center the page on screen. Note that the background image is critical to maintain the illusion 
of the menuwrapper div aligning with the contentwrapper div which will usually be longer*/
#pagewrapper
{
    border: 1px solid #000000;
    background-color: #FFFFFF;
    color: #000000;
    background-image: url('Images/menuSpacer.gif');
    background-repeat: repeat-y;
}

/* Title block with left & right sub-elements */
#titlewrapper
{
    background-color: #AAAAB4;
    padding: 0;
    margin: 0;
    width: 902px;
    height: 60px;
}

#title-left
{
    width: 300px;
    height: 60px;
    background-image: url('Images/title-left.gif');
    background-repeat: no-repeat;
    float: left;
}

#title-right
{
    width: 500px;
    height: 60px;
    background-image: url('Images/title-right.gif');
    background-repeat: no-repeat;
    background-position: right;
    float: right;
}

/* Photobar contains several sub elements to 
   support 4 images in the bar centered in the
   page with border decorations */
#photobarwrapper
{
    background-position: left;
    width: 902px;
    height: 152px;
    background-color: #575766;
    clear: both;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #FFFFFF; /*  #575766 originally */
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #FFFFFF;  /*  #575766 originally */
}

#photobar
{
    margin: 0 auto 0 auto;
    padding-left: 0px;
    height: 150px;
}

/* margin pushes images a little right and provides
   the border decoration at the left edge of the
   first image...used to be a graphic, now a blank div */
#photobarmargin
{
    height: 150px;
    width: 47px;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFFFFF;
    float: left;
}

/* Class applied to all 4 images in the photobar */
.photobarimage
{
    width: 201px;
    height: 150px;
    float: left;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #FFFFFF;
    margin-top: 1px;
}

/* Menu sidebar on the LHS of the main page */
#menuwrapper
{
    width: 152px;
    padding-left: 10px;
    padding-top: 5px;
    background-color: #AAAAB4;
    float: left;
    font-size: 120%;
    line-height: 150%;
}


/* Main content wrapper - all page content is inside here */
#contentwrapper
{
    padding: 5px 10px 5px 10px;
    width: 720px; 
    min-height: 250px;
    /* height: auto; */
    background-color: #FFFFFF;
    float: left;
    overflow: auto;
}

#content
{
    /* padding: 10px;
    width: 720px;
    height: 250px; */
    background-color: #FFFFFF;
    float: left;
    overflow: auto;
}

/* Sidebar in the main content area if one is needed - not on the masterpage */
#sidebarwrapper
{
    width: 150px;
    float: right;
    text-align: center;
    padding-top: 30px;
}

/* Navbar with sub-elements */
#navbarwrapper
{
    width: 740px;
    height: 20px;
    float: left;
    background-color: #7E7E8C;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    padding-top: 2px;
}

#navbarwrapper a
{
    color: #FFFFFF;
}

#navbarwrapper a:hover
{
    color: #FF0000;
}

/* For breadcrumbs */
#navbar-left
{
    width: 350px;
    height: 20px;
    float: left;
    padding-left: 10px;
}

#navbar-right
{
    width: 100px;
    height: 20px;
    float: right;
    text-align: center;
    padding-right: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #AAAAB4;
}

#navbar-middle
{
    width: 100px;
    height: 20px;
    float: right;
    text-align: center;
    padding-right: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #AAAAB4;
}

#navbar-printer
{
    width: 100px;
    height: 20px;
    float: right;
    text-align: center;
    padding-right: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #AAAAB4;
}

/* Tab bar with tabs...used on profiles etc */
#tabwrapper
{
    width: 720px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #575766;
}

.tabs
{
    float: left;
}

/* Quick links for switching sections in the Rules area */
#subnavbar
{
    text-align: center;
    width: 720px;
}

/* Footer and left / middle / right sub-elements */
#footerwrapper
{
    clear: both;
    width: 902px;
    height: 20px;
    background-color: #7E7E8C;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    padding-top: 2px;
}

#footerwrapper a
{
    color: #FFFFFF;
}

#footerwrapper a:hover
{
    color: #FF0000;
}

#footer-left
{
    width: 500px;
    height: 20px;
    float: left;
    padding-left: 10px;
}

#footer-right
{
    width: 100px;
    height: 20px;
    float: right;
    text-align: center;
    padding-right: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #AAAAB4;
}

#footer-middle
{
    width: 100px;
    height: 20px;
    float: right;
    text-align: center;
    padding-right: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #AAAAB4;
}

/*******************************
Note that the menu look and feel
is defined in the theme as a skin
*******************************/

/**********************************
Generally useful formatting classes
***********************************/

.profileheader
{
    font-family: Calibri, Arial, Helvetica, sans-serif;
}

.emphasis-light
{
    color: #009900;
}

.emphasis-std
{
    font-weight: bold;
    font-style: italic;
}

.emphasis-extra
{
    font-weight: bold;
    color: #800000;
}

.site-design
{
    color: #E0E0E0;
}

.tab-off
{
    float: left;
    background-color: #F4F4F4;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    border-color: #7E7E7E;
    border-width: 1px;
    border-bottom-style: solid;
}
        
.tab-on
{
    float:left;
    background-color: #FFFFFF;
    height: 30px;
    vertical-align: middle;
    line-height: 30px;
    text-align: center;
    border-color: #7E7E7E;
    border-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-left-style: solid;
}

.PleaseWait
{
    width: 500px;
    height: 32px;
    background-image: url('Images/PleaseWait.gif');
    background-repeat: no-repeat;
    padding-left: 40px;
    line-height: 32px;
}


/******************
TABLE STYLES
******************/

.table
{
    border: 1px solid #575766;
    background-color: #575766;
}

.table td
{
    padding: 8px;
    border-left: 1px solid #575766;
    border-right: 1px solid #575766;
}

thead th, tfoot th
{
    background: #575766;
    padding: 8px;
    color: #FFFFFF;
    border-left: 1px solid #575766;
    border-right: 1px solid #575766;
    border-top: 1px solid #575766;
    border-bottom: 1px solid #575766;
}

.table-row-1 td, .table-row-1 th
{
    background: #E0E0E0;
    border: 1px solid #575766;
}

.table-row-2 td, .table-row-2 th, thead
{
    background: #F4F4F4;
    border: 1px solid #575766;
}

.table-row-highlight td, .table-row-highlight th, thead
{
    background: #FFFFCC;
    border: 1px solid #575766;
}

/******************
GRID STYLES
******************/
.grid
{
    border: 2px solid #575766;
    background-color: #575766;
}

.gridheader
{
    background-color: #575766;
    color: #FFFFFF;
}

.gridrow
{
    background-color: #F4F4F4;
}

.gridalternaterow
{
    background-color: #E0E0E0;
}


.gridselectedrow
{
    background-color: #FFFFCC;
}

