/* -------------------------------------------------------------
 *
 * Define the appearance of general body elements.
 *
 * ------------------------------------------------------------- */
    
    body
    {
        font-family: Sans-Serif;
        font-size: small;
        color: #444444;
    }
    
    
/* -------------------------------------------------------------
 *
 * Class for defining the appearance of list items in
 * ordered and unordered lists.
 *
 * ------------------------------------------------------------- */

    ul li
    {
        list-style-type: square;
        padding-top: 5px;
        margin-left: -15px;
    }
    
    
/* -------------------------------------------------------------
 *
 * Define the appearance of confirmation messages when
 * forms are submitted.
 *
 * ------------------------------------------------------------- */

    .confirmationMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #008800;
        padding: 8px;
        background-color: #fefeee;
        color: #008800;
        font-weight: bold;
    }
    
    
 /* -------------------------------------------------------------
 *
 * Define the appearance of validation error messages when
 * forms are submitted.
 *
 * ------------------------------------------------------------- */

    /* Class to be used for general error messages at the top of the page. */
    .errorMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #cc0000;
        padding: 8px;
        background-color: #fefeee;
        color: #cc0000;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    /* Class to be used for error messages that appear next to individual form elements. */
    .inlineErrorMessage
    {
        color: #cc0000;
        font-weight: bold;
    }
    

/* -------------------------------------------------------------
 *
 * Class to use on a div tag to have contents stand out on the page.
 *
 * ------------------------------------------------------------- */

    .noteBox
    {
        color: #392D1C;
        background-color: #ECE9DC;
        border: solid 1px #AAA092;
        padding: 5px;
    }
    
    
/* -------------------------------------------------------------
 *
 * Class for defining has fieldsets appear.
 *
 * ------------------------------------------------------------- */
    
    fieldset legend
    {
        color: #392D1C;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of anchor tags.
 *
 * ------------------------------------------------------------- */

    /* Define the appearance of anchor tags generally. */
    a
    {
        color: #262626;
    }

    /* Define the appearance of anchor tags when the mouse hovers over. */
    a:hover
    {
	    color: #0033CC;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of headers.
 *
 * ------------------------------------------------------------- */

    /* Standard page header */
    h1
    {
        font-size: 13pt;
        font-family: Arial;
        font-style:normal;
        font-weight:bold;    
	    color: Black;
	    margin-top: 0px;
    }

    /* Standard page sub-header */
    h2
    {
	    font-size: 11pt;
	    font-family: Arial;
	    font-style: normal;
	    font-weight: bold;
	    color: Black;
	    margin-bottom: 0px;
	    padding-bottom: 5px;
    }

    /* Standard page sub-sub-header */
    h3
    {
	    font-size: 10pt;
	    font-family: Arial;
	    font-style: normal;
	    font-weight: bold;
	    color: Black;
	    margin-bottom: 0px;
	    padding-bottom: 5px;
    }


/* -------------------------------------------------------------
 *
 * Class for defining the appearance of watermark text.
 * See the search box for an example of watermark text.
 *
 * ------------------------------------------------------------- */

    .waterMarkText
    {
        color: #888888;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of help links and
 * help link content.
 *
 * ------------------------------------------------------------- */

    /* Define the appearance of the panel that appears when a help link is clicked. */
    .helpPanel
    {
        background-color: #fefeee;
        border: 1px solid black;
    }

    /* Define how the title of the help text appears within the help panel. */
    .helpTitle
    {
        font-size: 11pt;
        color: #8C3F00;
        font-weight: bold;
    }

    /* Define how the content of the help text appears within the help panel. */
    .helpContent
    {
        font-size: 8pt;
        color: Black;
    }

    /* Define how the close link appears within the help panel. */
    .helpClose
    {
        font-size: 8pt;
    }

    /* Define how the help link appears. */
    .helpLink
    {
        font-size: 8pt;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of sub-menus and widgets.
 *
 * ------------------------------------------------------------- */
    
    /* Define the appearance of sub-menu headers. */
    .subMenuHeader
    {
        background-image:url(/Assets/Images/GradientWidgetTitle.gif);
        background-repeat: repeat-x;
        font-size: 10pt;
        color: #ffffff;
        font-weight: bold;
        height: 20px;
        padding-top: 2px;
        padding-left: 3px;
        padding-bottom: 0px;
        padding-right: 3px;
    }
    
    /* Define the appearance of sub-menu panels. 
       This is the outside box of the sub-menu. */
    .subMenuPanel
    {
	    border: 1px solid #999999;
	    background-color: #f4f4f4;
	    padding: 0px;
	    font-size: 9pt;
	    margin-top: 5px;
    }

    /* Define the appearance of sub-menu links. */
    .subMenuPanel a
    {
        font-size: 9pt;
        text-decoration: none;
    }

    /* Define the appearance of sub-menu bullets. */
    .subMenuPanel li
    {
        list-style-type: square;
        padding-top: 5px;
        margin-left: -10px;
    }
    
    /* Define the appearance of accordian headers with sub-menus.
       This is the header of each section under a sub-menu. */
    .accordianHeader
    {
	    height: 25px;
	    cursor: pointer;
	    vertical-align: top;
	    border: solid 1px #D3D3D3;
	    margin: 2px;
    	background-image:url(/Assets/Images/AccordionGradientUp.jpg);
    	background-repeat: no-repeat;
    }
    
    /* This is the second part under the accordian header that shows
       the gradient all the way across the header */
    .accordianHeader div
    {
    	background-image:url(/Assets/Images/AccordionGradient.jpg);
    	height: 20px;
    	margin-left: 20px;
    	padding-top: 5px;
    	padding-right: 10px;
    }

    /* Define how the content appears of each accordian pane. 
       This is the content within each section under a sub-menu. */
    .accordianContent
    {
	    padding: 5px;
	    margin-right: 2px;
	    margin-left: 2px;
	    border: solid 2px #D3D3D3;
    }

    /* Define the appearance of a selected accordian pane under a sub-menu. */
    .accordianSelected
    {
	    height: 25px;
	    cursor: pointer;
	    vertical-align: top;
	    border: solid 1px #D3D3D3;
	    margin: 2px;
    	background-image:url(/Assets/Images/AccordionGradientDown.jpg);
    	background-repeat: no-repeat;
    }
    
    /* This is the second part under the selected accordian header that shows
       the gradient all the way across the header */
	.accordianSelected div
    {
    	background-image:url(/Assets/Images/AccordionGradient.jpg);
    	height: 20px;
    	margin-left: 20px;
    	padding-top: 5px;
    	padding-right: 10px;
    }

    /* Define the spacing between sub-menus and widgets. */
    .lineBreak
    {
	    height: 20px;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of the navigation tabs.
 *
 * ------------------------------------------------------------- */
    
    /* Define the way the text appears within each tab. */
    .mainMenu a
    {
        color: #666666;
        font-weight: bold;
    }

    /* Define the appearance of the tab strip. */
    .mainMenu
    {
    }

    /* Define the appearance of non-selected tabs. */
    
    .mainMenuItem td   /* The TD tag for the menu item */
    {
        background-image: url(/Assets/Images/GradientMenuItem.gif);
	    background-repeat: repeat-x;
    }
    
    .mainMenuItem   /* The anchor tag for the menu item */
    {
        padding: 15px;
	    border-left: 1px solid #999999;
	    border-right: 1px solid #999999;
	    border-bottom: 1px solid #999999;
	    height: 27px;
	    font-family: Arial, Helvetica, sans-serif;
	    font-size: 10pt;
	    color: #666666;
	    font-weight: normal;
	    outline: none; 
    }

    /* Define the way the text appears within each tab when the mouse hovers over. */
    .mainMenuHover a
    {
	    color: #000000;
    }

    /* Define the appearance of tabs when the mouse hovers over. */
    
    .mainMenuItem td:hover   /* The TD tag for the menu item */
    {
        background-image: url(/Assets/Images/GradientMenuItemHover.gif);
	    background-repeat: repeat-x;
    }
    
    .mainMenuHover   /* The anchor tag for the menu item */
    {
	    border-left: 1px solid #000000;
	    border-right: 1px solid #000000;	
	    border-bottom: 1px solid #000000;
	    color: #000000;
	    outline: none; 
    }

    /* Define the way the text appears on a selected tab. */
    .mainMenuSelected a
    {
	    color: #000000;
	    font-weight: bold;
	    font-family: Arial, Helvetica, sans-serif;
	    font-size: 10pt;
    }

    /* Define the appearance of selected tabs. */
    table[class~=mainMenuSelected] td
    {
        background-image: url(/Assets/Images/GradientMenuItemSelected.gif);
	    background-repeat: repeat-x;
    }
    
    table[class~=mainMenuSelected] td:hover   /* Keep the selected style when the menu item is hovered over. */
    {
        background-image: url(/Assets/Images/GradientMenuItemSelected.gif);
	    background-repeat: repeat-x;
    }
    
    .mainMenuSelected
    {
	    border-left: 1px solid #000000;
	    border-right: 1px solid #000000;
	    border-bottom: 1px solid #000000;
	    height: 27px;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of the mailbox control.
 *
 * ------------------------------------------------------------- */

    /* Define the appearance of the mail box. */
    .mailboxPanel
    {
        border: 1px solid #AAA092;
        background-color: #fefeee;
        padding: 0px;
        font-size: 9pt;
    }

    /* Define the appearance of a message when the mouse hovers over. */
    .mailboxRow:hover
    {
        color: #0000FF;
        cursor: pointer;
    }
    
    /* Define the appearance the area of the mailbox containing the
       Send Message and Delete Messages links. */
    .mailboxCommandPanel
    {
        background-color: #ECE9DC;
        padding: 5px;
        font-weight: bold;
        border-top: 1px solid #AAA092;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of the page footer.
 *
 * ------------------------------------------------------------- */

    /* Define the appearance of the footer. */
    .footer
    {
	    padding: 10px;
	    margin-top: 20px;
	    border-top: solid 1.5px black;
	    font-family: Sans-Serif;
	    font-size:x-small; 
	    text-align: center;
    }

    /* Define the appearance of links within the footer. */
    .footer a
    {
	    text-decoration: underline;
	    color: blue;
    }


/* -------------------------------------------------------------
 *
 * Classes for tables and gridviews .
 *
 * ------------------------------------------------------------- */

    /* Class to be used on all table tags and gridviews. */
    .tbl
    {
        border-collapse: collapse; 
    }

    /* Table header style.  The default text alignment is left.  The the following classes to change text alignment. */
    .tbl th
    {
        color: #392D1C;
        border-top: 1px solid #CFCAC2;
        border-bottom: 1px solid #AAA092;
        background-color: #ECE9DC;
        padding: 5px;
        text-align: left;
    }
    
    /* Apply this class if you want the text in a table header cell to be right aligned. */
    .tbl th.rightHeader
    {
        text-align: right;
    }
    
    /* Apply this class if you want the text in a table header cell to be centered. */
    .tbl th.centerHeader
    {
        text-align: center;
    }

    /* Create the horizontal separator line between each row of a GridVew. */
    .tbl td
    {
        border-bottom: 1px solid #CFCAC2;
        padding: 5px;
    }
    /* Sets Calendar padding to zero */
    .tbl td table td
    {
        border-bottom: 1px solid #CFCAC2;
        padding: 0px;
    }


    /* Alligns the caption to the left of the GridView. */
    .tbl caption
    {
        text-align: left;
        padding-bottom: 5px;
    }
    
    /* For table and grid cells where all borders should be displayed. */
    .cellWithBorders
    {
        border: 1px solid #CFCAC2;
    }
    
    /* Use this class to prevent radiobutton or checkbox lists that are contained within a table from having a border. */
    .listNoBorders > tbody > tr > td
    {
	    border-width: 0px;
    }
    
    .pager
    {
        color: #392D1C;
        border-top: 1px solid #CFCAC2;
        border-bottom: 1px solid #AAA092;
        background-color: #ECE9DC;
        padding: 5px;
        text-align: left;
    }
    
    .pager a
    {
        padding-left: 5px;
    }
    
    .pager span
    {
        padding-left: 5px;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of the security wizard.
 *
 * ------------------------------------------------------------- */

    /* Class for the main wizard panel. */
    .wizard
    {
        padding-left: 3px;
        padding-right: 3px;
    }

    /* Class for the top banner of the wizard (indicating the step number). */
    .wizardHeader
    {
        border-top: 1px solid #CFCAC2;
        border-bottom: 1px solid #AAA092;
        background-color: #ECE9DC;
        font-weight: bold;
        font-size: 12pt;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        height: 50px;
        padding-left: 8px;
    }

    /* Class for the footer of the wizard (containg the Next and Previous buttons). */
    .wizardNavigation 
    {
        background-color: #ffffff;
    }

/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of the plan comparisons
 *
 * ------------------------------------------------------------- */    
    .ComparisonList
    {
    	margin-top: 0px;
    }


/* -------------------------------------------------------------
 *
 * Classes for defining the appearance of tables using tablesorter
 *
 * ------------------------------------------------------------- */    
table.tablesorter {
	border-collapse: collapse; 
	border-width: 0px;
	margin:10px 0pt 15px;
	font-size: 9pt;
	
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th
{
    background-color: #ECE9DC;
    border-top: 1px solid #CFCAC2;
    border-bottom: 1px solid #AAA092;
    border-right: 1px solid #CFCAC2;
    font-size: 9pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(/masterpages/legacy/images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	
}
table.tablesorter tbody td {
	
	padding: 4px;
	vertical-align: top;
	border-width: 0px;
	border-bottom: 1px solid #CFCAC2;
	
	
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
	
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/masterpages/legacy/images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/masterpages/legacy/images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp
{
    background-color: #A0A58B;
}