/* f28_screen.css */
@charset "utf-8";

/*
--- SITE DEFAULTS 
*/
* { margin:0; padding:0; }
body { background: url(../images/bkgd_body.jpg) repeat-x left top #858585; }
p, ul, ol, h1, h2, h3, h4, h5 { padding:0; margin:0;}  /* for benefit of Safari Win 3.1.1 ignoring universal selector above */

/*
--- SITE LAYOUT 
*/
#page { width:900px; border: 1px solid #888; margin:10px auto; position:relative; background: url(../images/bkgd_page.jpg) no-repeat left top #F2F2F2; } 
/* note 1 */

#companylogo { position:relative; float:left;  /* note 3 */ }
#companylogo img { border:none; margin:15px; }

#sitenav { width:400px; height:55px; margin-top:12px; margin-bottom:0; margin-left:19px; float:left; position:relative; }
#sitenav li { display:inline; list-style-type: none; margin:0 15px 0 0; }

#pageheading { width:400px; clear:both; margin-left:250px; padding-top:2em; margin-bottom:1em; padding-bottom:1.3em; background-image: url(../images/bkgd_pgheadinggraphic.gif); background-repeat: no-repeat; background-position: left bottom; }

#main { width:400px; margin-right:250px; margin-top:15px; position:relative; float:right; display:inline; color:#222222; }

#pagenav { position:absolute; left:-225px; width:200px; }

.sidenote { position:absolute; text-align:left; width:170px; left:435px; }

div.sidebox {position:absolute; width:170px; left:435px; border:solid 1px blue;}

#footer { clear:both; width:250px; padding:35px 0; margin:auto; text-align: center; color:#333333; }
                 /*background-image: url(images/compass.gif); background-repeat: no-repeat;*/
					  
.copyright { font: 1.1em/1.5em Arial, Helvetica, sans-serif; color:#666666; padding:5px 0; border-top:1px solid #CC0000; }

/*
--- PAGE SPECIFIC LAYOUT
*/
#index #pageheading { padding-bottom:1.8em; margin-bottom:0; text-align:center; background: url(../images/bkgd_hmpgheadinggraphic.gif) no-repeat center bottom; }
#index #main { text-align:center; }
#contact form { margin:1em 0 .5em 0; }
#contact input,
#contact textarea { width:350px; }
#contact label#submit {text-align:center; }
#contact #submit input {width:100px; margin:0.5em 0;}
#contact fieldset { padding:10px; }
#contact fieldset div { margin-top:1em; }

/*
--- SITE HTML STYLING
*/
body { font-size:63%; font-family: Arial, Helvetica, sans-serif; }
h1,h2,h3,h4,h5 { font-family: Arial, Helvetica, sans-serif; line-height:1.2em; font-weight:normal; margin-top:1em; letter-spacing:0.15em; }
h1 {font-size: 1.6em; color:#666; }
h2 {font-size: 1.6em; color:#666; margin-top:0; } /* page titles */
h3 {font-size: 1.3em; color:#777;}
h4 {font-size: 1.2em; font-weight:bold; letter-spacing:0;}
h5 {font-size: 1.1em;}
p, li, dt, dd, label 	{font-size: 1.2em; line-height:1.5em; margin:.5em 0 1em 0; color:#333333; padding:0 1px; }
legend {font-size: 1.1em; color:#333333;}

ul {margin:.5em 0 1em 0;}
ul li { list-style-position: inside; list-style-type: square; line-height:1.5em;   }
ol {margin:.5em 0 1em 0;}
ol li { list-style-position: inside; list-style-type: decimal; line-height:1.5em; }
dl {margin:.5em 0 1em 0;}
dt {font-family: Arial, Helvetica, sans-serif; font-weight:bold; line-height:1.35em; }
dd {line-height:1.35em; margin:.25em 0 1em 0; padding-left:1em;}

#sitenav li { font: 1.1em/1.5em Arial, Helvetica, sans-serif; }
#sitenav a:link { color:#2255CC; text-decoration: none; }
#sitenav a:visited { color:#2255CC; text-decoration: none; }
#sitenav a:hover { color:#2255CC; text-decoration: underline; }

#pagenav {margin-top:0.8em;}
#pagenav li {font:1.1em/1.25em Arial, Helvetica, sans-serif; margin:.2em 0 .5em 0; list-style-position:outside; list-style-image:none; list-style-type:none;}
#pagenav a:link { color:#2255CC; text-decoration: none; }
#pagenav a:visited { color:#2255CC; text-decoration: none; }
#pagenav a:hover { color:#2255CC; text-decoration: underline; }

/* in-paragraph links */
p a:link { color:#2244BB; text-decoration: none; }
p a:visited { color:#2244BB; text-decoration: none; }
p a:hover { color:#2244BB; text-decoration: underline; }

/*
--- PAGE SPECIFIC HTML STYLES
*/


/* 
--- SITE STYLING CLASSES
*/
ol.steplist li { list-style-position: outside; list-style-type: none; }
.notopmargin {margin-top:0;}
.minitopmargin {margin-top:.5em;}
.anchorheadroom {padding-top:.1em;}
.minibotmargin {margin-bottom:.5em;}
.smalltext { font-size: 1em; line-height:1.25em; }
.sidenote { color:#777777; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.5em; }
.top { font-size:1.1em; margin:.5em 0 1em 0; }
.top a:link, .top a:visited, .top a:hover {color:#4466EE;}
.needsreview {color:red;}





/* --- CSS NOTES
1. This CSS workaround is needed to center the HTML page in the browser window. Explanation:
Internet Explorer browsers pre-v6 don't support "margin:auto" (the correct way) for centering content; 
they do however (incorrectly) support text-align:center for centering content, and this can be used to cover both bases. 
Solution: include both:
  - For modern browers: margin:10px auto; horizontally centers content (with 10px vert margins in this case).
  - For IE pre-v6 browsers: text-align:center centers all content, then text-align:left is spec'd in a div below
  to restore the default left justification for its content.
2. This div is needed to keep the column floats working; and it needs to be spec'd as position:relative to give 
position:absolute, spec'd for a text block within it, its point of reference; otherwise, position:absolute would use 
the side of the browser window as its reference rather than the page margin. 
3. IE will sometimes put unwanted space around an image unless it's enclosed in a div. 
4. Adding a small margin-left prevents the left side of the first character from being chopped-off.
 --- */