body{
  font-family: arial, helvetica, sans serif;
  font-size:   8.5pt;
  margin:      20px;
  padding:     0px;
  background:  white;
  line-height: 1.3;
  width: 820px;  /* this is needed to keep ie from shifting the div's 800(banner) + 20 (margin) */
}

/* used to contain ESMF logo. note usually height must equal size exactly*/
/* table for the banner is 800px */
div.logo {
margin-bottom:  0px;
width:          300px;
overflow:       hidden;   /* IE */
}

/* search box up by main logo */
div.search{
font-size:    8.5pt;
text-align:   right;
}

/* used in breadcrumb trail deep in many places */
div.bread{
text-align:    left;
margin-bottom: 20px;
padding:       0px;
font-size:     8.5pt;
}

/* used on home page */
div.yellowbox{
background:     #faffcc;
padding-left:   8px;
padding-right:  5px;
padding-top:    0px;
border-style:   solid;     /* adding border of same color as box to level out things */
border-width:   2px;
border-color:   #faffcc;
}

/* used on home page */
div.greenlinebox{
border-style:   solid;
border-width:   2px;
border-color:   #94d639;
padding-left:   8px;
padding-right:  3px;
padding-top:    0px;
}

/* this box is used to level out the headings on the home page since both the
left and right columns had them */
div.fake_box{
border-style:   solid;
border-width:   2px;
border-color:   white;
padding-left:   0px;
padding-right:  0px;
padding-top:    0px;
}

/* main box used on almost all pages */
div.main{
margin-left:      170px;
margin-top:       25px;  /* this value must equal same in div.sidebar */
margin-right:     20px;
width:		  620px;
min-height:       500px;
}

/* not sure where this one is used */
div.main_w_links{
margin-left:      120px;
margin-top:       25px;  /* this value must equal same in div.sidebar */
width:		  530px;
min-height:       450px;
}

/* this main div is used on pages that do not include a left nav bar */
div.main_leftjust{
margin-left:      0px;
margin-top:       5px;  /* this value must equal same in div.sidebar */
margin-right:     20px;
width:		  800px;
min-height:       450px;
}

/* remove float left; clear right; to fix ie shift issue */

div.sidebar{
background-color: white;
height:           auto;
width:            145px;
padding:          0px;
margin-top:       25px;  /* this value must equal same in div.main */
margin-left:      0px;
}

div.sidebar{
background-color: white;
height:           auto;
width:            145px;
padding:          0px;
float:            left;
clear:            right;
margin-top:       25px;  /* this value must equal same in div.main */
margin-left:      0px;
}

/* used on pages that have a slightly modified left nav bar, one that only contains links */
div.sidelinks{
background-color: white;
height:           auto;
width:            95px;
padding:          0px;
float:            left;
clear:            right;
margin-top:       15px;  /* this value must equal same in div.main */
margin-left:      0px;
}

/* horizontal nav bar */
div.horz_nav{
width:            798px;
background-image: url(/images/nav_bkgrnd.png); 
height:           23px;    /* 23px is height of image, these need to be the same */
/* overflow:      hidden;  /* required for IE */ 
}

div.highlight{
font-weight: bold;
}

/* this is used on photo pages to contain groups of thumbnails */
div.thumbnail{
text-align:    center;
margin-left:   auto;
margin-right:  auto;
margin-bottom: 25px; /* adds space between groups of photos */
}

/**************************** TABLES *************************************/
/* margin:  is equivalent to cellspacing */
/* padding: is equivalent to cellpadding */
/* border-collapse: stops double borders appearing where you only want one */

td{
vertical-align:    top;
}
td.color{
vertical-align:      top;
background:          #F7FFCE;
font-weight:         600; 
}

/* this is used on the partners page for the meatballs */
table.partners{
border-collapse:   collapse;
border-width:      1px;
padding:           20px;
}

table.partners tr td{
border-width:      1px;
padding:           5px;
vertical-align:    middle;
}


/* this is the default table style used all over */
table.special{
border-collapse:   collapse;
border-style:      solid;
border-width:      1px;
margin-bottom:     20px;
margin-left:       10px;
padding:           20px;
width:             95%;
}
table.special tr td{
border-style:      dotted;
border-width:      1px;
padding:           5px;
margin-right:      auto;
vertical-align:    top;
}
table.special th{
padding:           3px;
text-align:        left;
vertical-align:    top;
background:        #F7FFCE;
font-weight:       bold; 
}

/* used in PHASE1 supported platforms pages.  Keep until PHASE5 is live */
table.noinborder{
border-collapse:   collapse;
border-width:      0px;
border-style:      solid;
background-color:  white;
margin-top:        0px;
width:             618px;  /* should be same as div.main */
}
table.noinborder tr td{
padding:           2px;
}


/* this is used in the release schedule: /releases/index.shtml  DO NOT DELETE*/
table.schedule{
border-collapse:   collapse;
border-width:      0px;
border-style:      solid;
padding:           5px;
width:             90%;
margin-bottom:     20px;
}


/* this is used in the horizontal navigation bar */
table.horz_nav{
border-collapse: collapse; /* required as part of cellspacing = "0" */
padding: 0px;
margin:  0px;
height:  auto;
}

table.horz_nav td {
margin:               0px;
padding:              0px;
} /* this is all the equiv of cellspacing="0" cellspacing="0"*/

/**************************** Lists *************************************/

ul{
list-style-position:      inside;
padding-left:               10px;
margin-left:                -3px;          /* IE specific */
}
html > body ul {margin-left: 0px;}   /* correct for all other browsers */

ul.sub{
list-style-position: inside;    /* for nested bullets */
padding-left:        20px;
list-style-type:     square;
}

ol{
list-style-position: inside;
padding:             5px;
}

/**************************** headers *************************************/

h1{
color:       #006699;
font-size:   16pt;
text-align:  left;
margin-left: 0px;
/* text-shadow: #666666 5px 5px 5px; only works in safari */
}

h1.center{
color:       #006699;
font-size:   16pt;
text-align:  center;
margin-left: 0px;
/* text-shadow: #666666 5px 5px 5px; only works in safari */
}

h2{
font-size:     12pt;
color:         black;
margin-bottom: 3px;
margin-top:    25px;
padding:       0px;
}

h2.home{
font-size:     11pt;
color:         black;
margin-top:    10px;
}

h3{
font-size:     11pt;
color:         black;
margin-bottom: 3px;
margin-top:    15px;
padding:       0px;
font-style:    italic;
}

h3.highlight{
background:    black;
font-size:     1.0em;
margin:        4px;
padding:       4px;
text-align:    center;
color:         white;
border-style:  outset;
word-spacing:  2pt;
}

h4{
/* text-align:center; */
font-size: 10pt;
text-decoration: underline;
}
/************************************************  paragraphs */

p.just{
text-align: justify;
}

p.indent{
text-align:    justify;
margin-left:   30px;
margin-right:  45px;
margin-top:    10px;
margin-bottom: 20px;
}

p.caption{
text-align:      justify;
width:           300px;
margin-top:        0px;
}

p.caption_small{
text-align:      justify;
width:             200px;
margin-top:          0px;
margin-right:       auto;
margin-left:        auto;
}

p.center{
text-align: center;
}

p.news{
margin-top: 10px;
}

/************************************************  pre */
pre{
font-family: courier,monospace;
font-size:   0.95em;
margin-left: 2%;
}

pre.noshrink{
font-family: courier,monospace;
margin-left: 2%;
font-size:   1em;
}

/********************************** images ********************/
img{
border:          0px;
display:         block;
padding:         5px;
margin:          0px;
}

img.nopadding{
border:          0px;
display:         block;
padding:         0px;
margin:          0px;
}

img.center{
margin-left:    auto;
margin-right:   auto;
}

img.left_float{
float:          left;
clear:          right;
margin-right:   10px;
}

img.right_float{
float:          right;
clear:          left;
margin-left:    10px;
}

img.thumbnail{
display: inline;
}

/********************** links *********************************/
a img{
text-decoration: none;
border:          none;
}

a:link{
color:           #993300;
}

a:visited{
}

/********************** horizontal nav links *********************************/

/* we need to add px of padding to the top b/c you can not vertically align block elements. We
must be block b/c IE can not put a top border on inline elements. the total size must add
up to 22px ( < 1px from image), the size of the background image */
a.button {
font-size:      9pt;
padding:        6px; /* left/right */
padding-top:    2px;
padding-bottom: 0px; 
height:         19px;
border-top:     1px solid #80c9ff;
border-right:   1px solid white; 
text-align:     center;
width:          75px;
display:        block;
}

/* the on button is the style used when a tab is selected and we are now in that area */
/* this button is one pixel larger than a.button. This allows the bottom white border to cover 
up the black line */
a.onbutton {
font-size:      9pt;
padding:        6px;
padding-top:    2px;
padding-bottom: 0px; 
height:         19px;
border-right:   1px solid black;
border-left:    1px solid black;
border-top:     1px solid black;
border-bottom:  1px solid white;
text-align:     center;
width:          75px;
display:        block;
}

a.button:link { 
background-color: #80c9ff;
color:            black;
text-decoration:  none;
}

a.button:visited {
background-color: #80c9ff;
color:            black;
text-decoration:  none;
}

a.button:active { 
text-decoration: none;
}

a.button:hover { 
background-color: #BFE4FF;   /* #44aaff;  #1e1ebb; */
border-top:       1px solid #BFE4FF;
color:            black;
text-decoration:  none;
}

a.onbutton:link { 
background-color: white; 
color:            black;
text-decoration:  none;
}

a.onbutton:visited {
background-color: white; 
color:            black;
text-decoration:  none;
}

a.onbutton:hover { 
background-color: white; 
color:            black;
text-decoration:  none;
}

/**************************** links in vertical nav bar(s)  ********/
ul.nav {
width:          140px;
text-align:      left; 
list-style:      none; 
padding:         0px;
margin:          0px;
list-style-position: outside; 
}

ul.subnav {
width:               140px;
text-align:          left; 
margin:              0px;
padding:             0px;
list-style:          none; 
list-style-position: outside; 
}

ul.nav li {
border-bottom:   1px solid black;  /* border top does not work in >IE6 */
}

ul.subnav li {
border-bottom:    1px solid white;
} 

ul.subnav li.sublast {
border-bottom:    1px solid black;
} 

                                    
/* these are order dependent */
a:link.nav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
font-size:        8.5pt;     
}
                                   
a:visited.nav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
font-size:        8.5pt;    
}

a:hover.nav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
background:       #5f7a8b;
color:            white;
font-size:        8.5pt;     
}
html > body a:hover.nav {font-size:8.5pt;}  /* fix in all other browsers */

a:link.highlightnav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
background-color: #80c9ff;  /*#74a7fc; */
font-size:        8pt;     /* for IE */
}
html > body a:link.highlightnav {font-size:8.5pt;}  /* fix in all other browsers */


a:visited.highlightnav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
background-color: #80c9ff;  /*#74a7fc; */
font-size:        8.5pt;     
}

a:hover.highlightnav{
display:          block;   /* required! */
text-decoration:  none;
padding     :     4px;
color:            black;
background:       #80c9ff; /*#74a7fc; */
font-size:        8.5pt;	
}

/* these are order dependent */
a:link.subnav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
font-size:        8.5pt;
padding-left:     15px; /* for IE */
}
html > body a:link.subnav{padding-left:22px;}  /* fix in all other browsers */

a:visited.subnav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
color:            black;
font-size:        8.5pt;
padding-left:     15px;  /* for IE */
}
html > body a:visited.subnav{padding-left:22px;}  /* fix in all other browsers */

a:hover.subnav{
display:          block;   /* required! */
text-decoration:  none;
padding:          4px;
background:       #5f7a8b;
color:            white;
font-size:        8.5pt;	
padding-left:     15px;  /* for IE */
}
html > body a:hover.subnav{padding-left:22px;}  /* fix in all other browsers */

/************************************************  FOOTER */

div.footer{
  width:            800px;
  text-align:       center;
  font-size:        8.5pt;
}

hr.footer{
  background-color: black; /* NN */
  color:            black; /* IE */
  margin-bottom:    0px;
}

/************************************************  special hr's */

hr.news{
height: 6px;
background-color: #80c9ff;
border-style: none;

}

/* KNOWN IE ISSUES <HISS> */

/* IE 6 doesn't support the 'dotted' keyword for 1px borders. Fixed in IE 7 */
 
/* top-border does not work for links unless display=block */

/* this can only be used in the HTML
<!--[if IE 6]>
   Special instructions for IE 6 here
<![endif]--> */

/* the underscore hack is no longer recognized by IE7, even though it needs it.
it will recognize the # hack though and IE6 does too, so all _hacks were changed to # hacks */