/*
Reset base options (when the base size is 16px):
11 px = .6875
12 px = .75
13 px = .8125
14 px = .875
*/
body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 81.25%; /* Base font size set to 13px */
    line-height: 1.538;
    color: #333;
}

.secureBackground
{
   	background-image: url(../../../../images/navigation/backgroundwithnav.jpg);
	background-position: top left;
	background-repeat: repeat-x;
}  

.publicBackground    	
{
    background-image: url(../../../../images/navigation/background.jpg);
	background-position: top left;
	background-repeat: repeat-x;
}
.adminBackground 
{ 
    /* Don't think this background works as intended. Banner does not stretch all the way across. */
    /* 
        Maybe this should be done differently, where the admin divs (AdminStatusMessageBar, AdminErrorMessageBar, RibbonPageStatus, RibbonSection, Ribbon...) are separate and above all the rest of the body. Any background could be applied to the admin section, while secureBackground.jpg would be applied to the rest. This would make the site appear more the same for admin and nonadmin users.
    */
    background-image: url(../../../../images/navigation/backgroundadmin.jpg); 
    /*background-image: url(../../../../images/navigation/backgroundwithnav.jpg);*/
	background-position: top left;
	background-repeat: repeat-x; 
}

body.smallerfont {font-size: 68.75%; /* Base font size set to 11px */}
body.largerfont {font-size: 100%; /* Base font size set to 16px */}

#textchanger {padding: 5px;}
#textchanger span {cursor: pointer;}

/* Set the sizes of the letters in the text-sizer widget so they stay the same */
#textchanger .smallerfont {font-size: 84.62%}
#textchanger .largerfont {font-size: 123.077%}

body.smallerfont #textchanger {font-size: 118.182%;}
body.largerfont #textchanger {font-size: 81.25%;}

#textchanger .smallerfont{font-size: 84.616%;}
#textchanger .largerfont{font-size: 123.077%;}

/*

Starting with a 13px base size, use this table to map relative units to a specific pixel size.

For
These 
Pixels  Use These Percentages
----    ---
10px 	77%
11px 	85%
12px 	93%
13px 	100% (default, h5)
14px 	108% (h4)
15px 	115.385% (formerly 116%) (h3)
16px 	123.1% (h2, div.leftCell dt, ul#mainNavigation)
17px 	131%
18px 	138.5%
19px 	146.5%
20px 	153.9%

25px    192.5% (h1)

*/

/* For a 11px base size

For
These 
Pixels  Use These Percentages
----    ---
11px 	100% (default, h5)
12px 	109.1% (h4)
13px 	118.2% (h3)
13px 	
15px 	136.4% (h2, div.leftCell dt, ul#mainNavigation)

20px 	181.9% (h1)

*/

/* For a 16px base size


*/

h1 { font-size: 185%; color: #1A2237; margin-top: .25em; margin-bottom: .25em;}
h2 { font-size: 150%; color: #1A2237; margin-top: .7em; margin-bottom: .25em; }
h2.tt { font-size: 145%; color: #1A2237; margin-top: .7em; margin-bottom: 0;}
h2.title { font-size: 150%; color: #1A2237; margin-top: 0; margin-bottom: .25em; }
h3 { font-size: 125%; color: #1A2237; padding-top: 5px; padding-bottom: 5px; }
h3.vl { font-size: 125%; color: #1A2237; padding-top: 15px; padding-bottom: 0; }
h4 { font-size: 115%; }
h5 { font-size: 100%; }

body.smallerfont h1 { font-size: 181.82%; }
body.smallerfont h2 { font-size: 136.4%; }
body.smallerfont h3 { font-size: 118.2%; line-height: 1.2;}
body.smallerfont h4 { font-size: 109.1%; }
body.smallerfont h5 { font-size: 100%; }

table {font-size: inherit;}

#headerLoginBarLoggedOut 
{
    font-weight: bold;
}

div.leftCell dt
{
    font-size: 123.1%;
}

body.smallerfont div.leftCell dt {font-size: 136.4%;}


dl.list-menu dt 
{
    font-weight: bold;
    color: #fff;
    background-color: #999;
    /* Remove centering and add padding in order to match new graphic caps */
    /* text-align: center; */
    padding-left: 10px;
	padding-bottom: 5px;
    line-height: 2;
}

ul#mainNavigation
{
    font-size: 16px;
    /* font-size: 123.1%; */
    line-height: 1.2;
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
}

div#subNavigation
{
    font-size: 13px;
}
/* body.smallerfont ul#mainNavigation {font-size: 136.4%;} */