html{ height: 100%; }

body {
    height: 100%;
    margin: 0 0 0 0;
    background-color: #cccccc;
    background-image: url(../img/gray_fade_slice_page.gif);
    background-repeat: repeat-y;
}

.relative{ position: relative; }
.absolute{ position: absolute; }
.clear{ clear: both; }
.right{ float: right; }
.left{ float: left; }
.outline{ border: 1px solid red; }/* for debugging */
table.collapse{ border-collapse: collapse; }
table tr.middle td{ vertical-align: middle; }
td{ 
    vertical-align: top;
    padding:        0;
}

body.content {
    background-color:   #ffffff;
    background-image:   none;
    margin:             0 0 0 0;
}

body.header {
    background-color: #ffffff;
    background-image: none;
    margin: 0 0 0 0;
}

table.page {}

td.navcol{
    width:  180px;
    padding-bottom: 35px;
}

td.content {
    width: 540px;       /* 16 * 45 */
}

td.sidebar {
    width: 180px;       /* 4 * 45 */
}

div.header{
    height: 135px;
}

div.logobox {
    height: 135px;
}

div.headerbox {
    height:         95px; 
    width:          445px; 
    margin-bottom:  5px;
    margin-left:    82px;
    padding-top:    20px;
}

iframe.headerbox {
    height: 95px;
    width:  445px;  
}

div.navbox{ width: 180px; }

div.contentbox{ width: 540px; }

iframe.contentframe {
    width: 540px;
}

div.hidden{ display: none; }

div.copyright{
    position:       absolute;
    top:            -30px;
    padding-left:   46px;
    font-size:      9px;
    color:          #333333;
    font-family:    verdana,arial,sans-serif;
}

iframe.nav2frame {
    width: 173px;
    height: 175px;
}

#contentscrollupborder {
    height: 0px;
    border-top: 1px solid #cccccc; 
    margin-left: 90px; 
    width: 450px;
    font-size: 2pt;
    margin-bottom: 1px;
    display: none;
}


#contentscrollup {
    padding-bottom: 2px;
    width: 450px;
    text-align: right;
    font-size: 3pt;
    display: none;
    margin-left:    90px;
}

#contentscrolldownborder {
    padding-top: 2px;
    width: 450px;
    text-align: right;
    border-top: 1px solid #cccccc;
    margin-left: 90px;
    font-size: 3pt;
    display: none;
}

#contentscrolldown {
    display: none;
}


div.sidebarbox {
    margin-top:     135px;
    margin-left:    45px;
    width:          135px;
}

iframe.sidebarframe {
    width: 135px;
    background-color: #cccccc;
    margin-bottom:  10px;
}

div.newslayer{
    position:           absolute;
    top:                -20px;
    left:               0px;
    width:              540px;
    height:             500px;
    z-index:            500;
    background-color:   #ffffff;
    font-family:        verdana, sans-serif;
    font-size:          16px;
}

div.newslayer div.newscontent{      
    margin-left:        90px;
    font-size:          .75em;
    line-height:        1.5em; 
    color:              #454545;
}

div.newslayer div.newscontent .green{ color: #99cc33; }
div.newslayer div.newscontent .gray{ color: #909090; }

div.newslayer div.newscontent h1{
    font-size:      1em;
    margin-bottom:  0;
    margin-top:     20px;
}

div.newslayer div.newscontent h4{
    font-size:      1em;
    margin-bottom:  0;
}

div.newslayer div.newscontent a {
    color:  #454545;
}

div.newslayer div.newscontent img {
    float:          left;
    margin-right:   10px;
    margin-top:     4px;
}

div.newslayer div.newscontent .caption {
    font-style: italic;
}

div.newslayer div.newscontent div.controls{
    height:             18px;
    padding-top:        3px;
    border-top:         1px solid #cccccc;
    border-bottom:      1px solid #cccccc;
}

div.newslayer div.newscontent div.controls div.print {
    float:                  right;
    height:                 14px;
    font-size:              10px;
    font-weight:            bold;
    line-height:            12px;
    padding-right:          16px;
    color:                  #333333;
    background-image:       url("../img/print.gif");
    background-repeat:      no-repeat;
    background-position:    right center;
    cursor:                 pointer;
}

div.newslayer div.newscontent div.controls div.close {
    float:                  left;
    height:                 14px;
    font-size:              10px;
    font-weight:            bold;
    line-height:            12px;
    padding-left:           18px;
    color:                  #333333;
    background-image:       url("../img/close.gif");
    background-repeat:      no-repeat;
    background-position:    left center;
    cursor:                 pointer;
}

div.newslayer div.newscontent ul{
    list-style-type:        bullet;
    list-style-position:    outside;
    margin-top:             0;
}

div.newslayer div.newscontent ol{
    list-style-type:        decimal;
    list-style-position:    outside;
    margin-top:             0;
}

div.newslayer div.newscontent li{ margin-bottom: .5em; }
    
/* ul.custom is for including your own symbol inside <li> rather than using the standard markers */
div.newslayer div.newscontent ul.custom{ list-style-type: none; }
div.newslayer div.newscontent ul.custom-align{ list-style-type: none; margin-left: 0; padding-left: 0; }
div.newslayer div.newscontent ul.custom li, div.newslayer div.newscontent ul.custom-align li{ margin-left: 0px; padding-left: 1em; text-indent: -1em; }

/* these get you close but will have to be tweaked for various font sizes*/
div.newslayer div.newscontent ul.align{ margin-left: -2em; }
div.newslayer div.newscontent ol.align{ margin-left: -1.3em; }

div.newslayer div.newscontent ul.nomarker{ list-style-type: none; }
div.newslayer div.newscontent ul.nomarker-align{ list-style-type: none; margin-left: 0; padding-left: 0; }