root { 
    display: block;
}
.alert{
    color: red;
}
.warn{
    color: blue;
    font-size: 18px;
}
.notice{
    font-size: 18px;
    color: red;
    font-weight: bold;
}

body { 
    /*
    This body item is added to tell Internet Explorer that we want to use
    the whoe screen.  It just sets a known size of the body area.
    */
    width: 100%; 
    height: 100%;
    margin: 0px; 
    padding: 0px; 
}
p {
    margin:0;

}
img {
    /*
    We are sick of the little blue box that Internet Explore puts around
    images that are links.  Sure it is for accessibility but it looks
    bad.  So this removes any chance of that.
    */
    border-style : none;
}
div.center {
    /*
    This is the core look of the page.  A centered "div" with a nice border
    around it.  The pading and margins are simple and this is used in give
    the nice border and centered items on the screen.
    */
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    /*margin-right: 50px;
    margin-left: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
    */
    margin:0 auto;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 75%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px; 
    overflow: hidden
}
div.footer-main, div.header-main{
    /*
    This holds the footer on the bottom of the page area.  It is really a 
    copy of the "center" style, but having this seperate allows us some 
    flexibility in changing that up if we want.
    */
    /*
    Also holds the header division and since it is the same as the footer
    container we list it here to save some work.
    */
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 75%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px; 
    overflow: hidden;
}
a.footer-left {
    /*
    We had all sorts of fits with the footer and getting things to align.  So
    this is pretty much hand crafted for the current footer.  This is an "a"
    item and we just put some padding to the right to move things to the left 
    enought that it looks nice.
    */
    padding-right: 75px;
    border-style:none;
}
a.footer-right {
    /*
    Same idea as above.  The item on the right side is an "a" element and
    we just put an equal amount of padding as above in order to balance
    out the page.
    */
    vertical-align: top;
    padding-left:75px;
    border-style: none;
}
.table {
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
    margin-left: auto;
}
.table-element {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
}
.logo {
    border: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.pass-table {
    /*
    These sytles are used to layout the table that contains the form for 
    asking for the password and email address.  They are pretty simple but
    you can have some freedom to position and format the cells and rows.
    */
    font-size: 18px;
    font-weight: bold;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
}
.pass-row {
    /*
        This lays out the row for the password form.
    */
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
.pass-cell{
    /* 
    This the cell that contains the field to enter.
    */
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.pass-cell-caption{
    /*
    This is the cell that holds the caption for this row.
    */
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: right;
}
.center {
    text-align: center;
}
#Display-Product{
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;

    text-align: left;
    margin-left: auto;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-weight: bold;
}
td.Product-Headings{
    font-weight: bold;
    font-style: italic;
    padding-right: 25px;
}
.page-top-image{
    width:100%; 
    max-width: 448px
}
div.center-noborder {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 75%;
}
div.center-hidden{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 25%;
    overflow: hidden;
}
/*
  These are used to format the message area on the screen and the 
      different types of errors that can be logged.
*/

#Messages {
    text-align: left;
    font-size: 20px;
}
p.Info {

}
p.Error {
    font-weight: bold;
    color:red;
}
p.Warning {
    color: crimson;
}
div.Records-Display {
    /*
    This is the core look of the page.  A centered "div" with a nice border
    around it.  The pading and margins are simple and this is used in give
    the nice border and centered items on the screen.
    */
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
    width: 75%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px; 
    overflow: hidden

}
/*
    Copyright text at bottom of pages.
*/
.copyright-notice {
    font-size : 10px;
}
/* 
    Holds management selections.
*/
.management-selection{
    /*
This is the core look of the page.  A centered "div" with a nice border
around it.  The pading and margins are simple and this is used in give
the nice border and centered items on the screen.
    */
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 80%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20px; 
    overflow: hidden;
}
.column-left{
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 45%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px; 
    overflow: hidden;
    float:left;
}
.column-right{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 45%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px; 
    overflow: hidden;
    float:right;
}