body {
    //background-color: #eee; 
    background-color:  #F0F8FF;
    }

/** main page box - page width, color and font **/
#page {
    max-width: 60em;
    min-width: 50em;
    margin: 10px auto;
    padding: 0;
    background-color: white;
    color: #222;
    //border: 1px solid gray;
    border: 1px solid #778899;
    font-family: verdana, arial, sans-serif;
    }

/** page header - hsci and crm logos, facility name**/
#header {
    //border-bottom: 1px solid gray;
    width: 100%;
    border-bottom: 1px solid #778899;
    }

    #header h1 {
        margin: 10px;
        font-size: 1em;
        line-height: 1.4;
        text-align: center;
        min-height: 90px;        
        }
    
    #headerimg1 {
        float: left;
        height: 90px;
        border: none;
        }
        
    #headerimg2 {
        float: right;
        height: 90px;
        border: none;
        }
        
/** clears floated elements in page header **/
.clearboth {
        clear: both; 
        visibility: hidden;
        }

/** navigation side bar - p for links, list elements for popups **/
#nav {
    position: relative;
    float: left;
    width: 180px;
    padding: 1.0em 0;
    }

    #nav p { 
        margin: 0;
        padding: 0.1em 1.0em; 
        font-size: 0.8em;
        line-height: 1.5;
        }

    #nav ul { 
        visibility: hidden; 
        position: absolute;
        top: 15em;
        width: 180px;
        //height: 7em;
        margin: 0;
        padding: 0;
        //border-top: 1px solid gray;
        border-top: 1px solid #778899;
        //border-bottom: 1px solid gray;
        border-bottom: 1px solid #778899;
        list-style-type: none; 
        font-size: 0.8em;
        }
        
    #nav li {
        margin: 1em;
        padding: 0;
        }
        
    #nav a {
        text-decoration: none;
        }
    
    #nav a:link {
        color: #222;
        }
    
        #nav a:visited {
            color: #222;
            }
        #nav a:hover {          /** added for Win/IE **/
            background-color: #cde;
            color: black;
            }
        #nav a:hover p {
            background-color: #cde;
            color: black;
            }
        #nav a:hover ul {
            visibility: visible;
            color: black;
            background-color: #cde;
            }

/** text - this is the element on each page that changes **/
#text {
    margin-left: 180px;
    padding: 1em;
    min-height: 470px;
    max-width: 640px;
    //border-left: 1px solid gray;
    border-left: 1px solid #778899;
    }

    /** biggest header - page title **/
    #text h2 { 
        margin: 0 0 1.5em 0; 
        font-size: 1.3em;
        font-style: italic;
        font-weight: bold;
        color: #336;
        }
    
    /** sub header - topic titles **/
    #text h3 {
        margin: 1.5em 0 0.5em 0; 
        font-size: 1em;
        font-style: italic;
        font-weight: bold;
        color: #336;
        }
        
    /** sub sub header **/
    #text h4 {
        margin: 2.0em 0 1.0em 0;
        font-size: 0.8em;
        font-weight: bold;
        color: #336;
        }
    
    #text p {
        margin: 0 0 1.0em 0;
        font-size: 0.8em;
        }
    
    #text em {
            font-weight: bold;
            font-style: italic;
            }

    #text strong {
            font-weight: bold;
            font-style: italic;
            }

    #text ul { 
        list-style-type: circle; 
        font-size: 0.8em;
        }
        
    #text #twitter_div ul li {
        margin: 0 0 1.0em 0;
        }

    #text ol {  
        font-size: 0.8em;
        }

    #text dl { 
        margin: 0; 
        padding: 0 0 0 2.0em;
        font-size: 0.8em;
        }
        #text dt {
            font-style: italic;
            }
        #text dd {
            margin: 0 0 1.0em 0;
            }

    #text table {
        border-collapse: collapse;
        //border: 1px solid gray;
        border: 1px solid #778899;
        }
        
        #text table td {
            padding: 0.2em 1.0em;
            font-size: 0.8em;
            }
            

    #text .formtable td {
        //border-bottom: 1px solid gray;
        border-bottom: 1px solid #778899;
        }   
    #text .formtable .formfield {
        //border-right: 1px solid gray;
        border-right: 1px solid #778899;
        text-align: right;
        }       
    #text .formtable .formfooter {
        border-bottom: 0;
        text-align: center;
        padding: 0.3em 0;
        }
    
        
    
    #text a {
        text-decoration: underline;
        }
        
        #text a:link {
            color: #0066cc;
            }
        #text a:visited {
            color: purple;
            }
        #text a:hover {
            color: orange;
            }

    #text .screenshot {
        text-align: center;
        }
        
    #text .screenshot img {
        border: 5px solid #ddd;
        }
        
        
    #text #home {        
        //background-image: url(images/perky.jpg);
        //background-repeat: no-repeat;
        min-height: 470px;
        max-width: 640px;
        padding: 5px;
        }



#footer {
    clear: both;
    margin: 0;
    padding: .1em;
    //border-top: 1px solid gray;
    border-top: 1px solid #778899;
    //background: #ddd;
    background: #B0C4DE;
    text-align: center;
    font-size: 0.7em;
    }