/*     U.S. Dept of Homeland Security      */
/*       U.S Coast Guard Auxiliary         */
/*           Standard Layout CSS           */
/*    This CSS file updated on 8/10/10     */

/************************************************************************************************************************
   
   Use: This file is the basic build file for all USCG template sites. 
   Item for the national site can be found on cgaux.org
   
   Changes must be approved by Alex Belleque (IU) & Steve Johnson (IE)
   
   Author: Alex C Belleque
   Date: March 17 2011

*******************************************************
AUDIT TRAIL (MUST BE COMPLETED FOR ALL EDITS)

Uploaded new basic CSS file national content moved to cgaux.org.css.  ACB 17 MAR 2011

Removed min height per request from Steve Johnson to get rid of white page on pages. ACB 21 MAR 2011

Removed "block" on Ul & OL statements to bring back bullets on some UL lists ACB 21 MAR 2011

Updated "border-right: 1px solid #666; " to be set to 1px and removed important to allow for easy override when needed for new left menu ACB 1 APR 11

Updated left menu width to 180px. This will allow for the bases for a two level left menu using PHP.  ACB 3 APR 11

Update per request of Steve J. on left menu format,then reset back to old system per requestor Steve J, as other items failed under new code.  ACB 19 APR 11

Added Hover Command in Mainbody to stop random oh hover failure in IE 9. ACB 20 APR 11

Comment Section Updated ACB 29 AUG 2011

Update to National/Template CSS to support PE Calendar Webkit TICKET ID: CHC-718-29537 alg, 26 Nov 11
   
*************************************************************************************************************************/
/* This defines the gray background around the wrapper content area for the website itself. */
html {
    background-color: #E5E5E5;
}
/* This defines the basic layout of the page for the website. Some content in this section will be moved to the wrapper 
once it is fully online */
body {
    width: 800px;
    position: relative;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
    border-top: 0px;
    border-bottom: 1px solid #666;
    /* This item will be moved to the wrapper */ border-left: 1px solid #666;
    /* This item will be moved to the wrapper */ border-right: 1px solid #666; /* This item will be moved to the wrapper */
}
/* here we have the "wrapper" this will build the boarders around the webpage,this will also set the background of the webpage
 to white and keep the left menu from causing unneeded space at the bottom of the page */
#wrapper {
    width: 800px;
    background-color: #FFFFFF;
    color: #000000;
    position: absolute;
    padding: 0;
    margin-left: -1px;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}
/* we set the image border to 0px, as it keeps the colored border around all images from appearing. This command is critical to 
website appearance */
img {
    border: 0px;
}
/* this sets the standard link format of  */
a:link {
    color: #003366;
    background-color: inherit;
    text-decoration: none;
    cursor: pointer;
}
/* template standard link hover styles */
a:hover {
    color: #AA0022;
    background-color: inherit;
    cursor: pointer;
    text-decoration: none;
}
/* template standard link focus styles */
a:focus {
    color: #AA0022;
    background-color: inherit;
}
/* template standard link visited styles */
a:visited {
    color: #003366;
    background-color: inherit;
    text-decoration: none;
    cursor: pointer;
}
/* template standard link active styles */
a:active {
    color: #AA0022;
    background-color: inherit;
    cursor: pointer;
}
/* define the basic format for the main body area of all sites  */
#mainbody {
    border-left: 1px solid #666;
    text-align: left;
    margin-left: 180px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
    /* template standard link hover styles */
    #mainbody a:hover {
        color: #AA0022;
        background-color: inherit;
        cursor: pointer;
        text-decoration: underline;
    }
    /* unit sites depend on this list style */
    #mainbody li {
        display: list-item;
    }
/*  to start the formatting of the left menu for national, unit, and department websites. We set the floating
to keep the content of pages with images at the top from being pushed below the menu */
#sectnav {
    width: 180px;
    margin: 0px;
    padding: 0;
    float: left;
    text-align: left;
    border-right: 1px solid #666;
    clear: both;
    height: auto;
    background: transparent;
}
    /* This code formats the date stamp on HTML, PHP and all non JavaScript/XML menu */
    #sectnav .date_line {
        font-size: 11px;
        color: #003366;
        padding-top: 8px;
        padding-bottom: 10px;
        text-align: center;
        font-weight: bold;
    }
/* This formats the date stamp on JavaScript and XML left menus. Note the use of of the ID "sidenav" vs. "sectnav" as seen above */
#sidenav .date_line {
    font-size: 11px;
    color: #003366;
    padding-top: 8px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: bold;
}
/* This formats the title used in the left menu for the parent component name. */
#sectnav .section_title {
    color: #003366;
    font-size: 12px;
    font-weight: 500;
    text-align: center !important;
    padding-top: 10px !important;
}
/* This formats the title used in the left menu for the child component name. */
#sectnav .dept_name_title {
    color: #003366;
    font-size: 12px;
    font-weight: 700;
    text-align: center !important;
    padding-top: 3px !important;
}
/* This formats the left menu unordered list that we will add the list (menu) links (li) statements into. */
#sectnav ul {
    margin: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 180px;
    position: relative;
}
/*  we define the list statements that we will enter into the unordered list built above. These items will then 
become each line in the left menu. Not this is done via the uncommented items below.*/
#sectnav li {
    position: relative;
    list-style: none;
}
/* Define the format of the left menu list items. */
#sectnav ul li {
    margin: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 0px;
    border-bottom: 1px solid #666; /* force unit sites who have hack code */
}
    /* Define the link format insite the left menu list */
    #sectnav ul li a {
        font-size: 13px;
        margin: 0;
        padding: 0;
        color: #003366;
        text-decoration: none;
    }
        /* Define the way the above links in the left menu list will act on hover */
        #sectnav ul li a:hover {
            color: #AA0022;
        }
/* End the left menu classes  */
/* This defines the search content box for the left menu on all platforms. */
#searchnav {
    width: 180px;
    margin-top: -0px;
    padding: 0;
    text-align: center;
    margin-bottom: -1px;
    padding-bottom: 7px;
    clear: both;
    color: #AA0022;
}
/*  Define format the text size for the "Enter Terms" section of the search content box*/
span.search_term {
    font-size: 11px;
}
/* Define the padding to the submit button in the search this keeps the button from running into the input field. */
.field_padding {
    margin-top: 5px;
}
/*  Define the header of the search box. We set the text to white and the blue background */
.sidenav_divider_search {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    background-color: #3183ab;
    width: 180px;
    text-align: center;
    margin-bottom: 5px;
    text-transform: uppercase;
}
/*  Define the header of the security box. We set the text to white and the blue background */
.sidenav_divider_security {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    background-color: #3183ab;
    width: 180px;
    text-align: center !important;
    margin-bottom: 5px;
    text-transform: uppercase;
}
/* Define the layout for the two security badges in the left menu. */
#sectnav .security_contents {
    text-align: center;
}
    /* Define the way the list statements for the security badges will layout */
    #sectnav .security_contents ul li {
        border-bottom: 0px solid #666666;
        margin: 0;
        padding: 5px 0 5px 0;
    }
/* This bolds the text of the link for left menu items. Sites can use this to inform uses this is a page they are on 
via the bolding statement */
#sectnav .header {
    font-size: 12px;
    font-weight: bold;
    color: #003366;
    text-align: left;
}
/* This builds the icon for links that leave the CGAUX network. Pages can call this class to add the image to the right hand
side of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#sectnav a.external {
    background: url(external-links.gif) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for PDF icon for use when linking to a PDF. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#sectnav a.pdf {
    background: url(pdf.gif) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for links the go to a PPC page. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#sectnav a.lock {
    background: url(locked.png) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for links the go to a Word document. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#sectnav a.word {
    background: url(word-icon.png) no-repeat center right;
    padding-right: 20px;
}
/* This builds the icon for links the go to a Flash Screen. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#sectnav a.flash {
    background: url(flash_class_icon.png) no-repeat center right;
    padding-right: 20px;
}
/* This builds the footer on the bottom of all websites. We set all the of basic parameters of the footer in this section. */
#footer {
    width: 800px;
    min-height: 30px;
    color: #666;
    background-color: #fff;
    text-align: center;
    float: left;
    padding: 0 0 0 0;
    border: 1px solid #666;
    margin-left: -1px;
    clear: both;
    font-size: 11px;
    line-height: 20px;
}
    /*  Define the way all links in the footer will look like we override the national link format to change the link to gray. */
    #footer a {
        color: #666 !important;
        background-color: inherit;
        text-decoration: none;
        cursor: pointer;
    }
/* This formats the links inside <p> statements */
div#footer p a {
    margin: 0;
    padding: 0px 15px;
    display: inline;
    white-space: normal;
}
/* define what a link should do when hovered on */
#footer a:hover {
    color: #666;
    background-color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.notice {
    color: #666;
    background-color: inherit;
    font-size: 9px;
}

/* This defines the H1 style for use on all template websites. This item should only ever be called once on a page. This should 
be used only as the page header. This is a template wide format, sites need not create a local H1.  */
#mainbody h1 {
    color: #003366;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-variant: normal;
    letter-spacing: normal;
    margin-top: 15px;
    margin-left: 0px;
    margin-bottom: 2px;
    margin-right: 0px;
}
/*  This defines the sub header, this will be used under the above H1 statements to highlight the different topics in the page. */
#mainbody h2 {
    color: #AA0022;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-right: 10px;
}
/*  This defines basic text or <p> content area. Here we change the standard color of the text from black to a lighter gray, this softens 
the text to as not to look as harsh on the page. Unit websites have no need to create a custom format. */
#mainbody p {
    margin-top: 8px;
    margin-left: 10px;
    margin-bottom: 8px;
    margin-right: 10px;
}
/* This defines the way the last updated text will appear on the bottom of all websites pages. */
#mainbody div.date {
    color: #999;
    font-size: 10px !important;
    text-align: right;
    padding-top: 130px;
    padding-left: 0px;
    padding-bottom: 5px;
    padding-right: 20px;
}
/* This class is for any level site. Sites can call this class to center the item with out using any inline styles. */
.center {
    text-align: center !important;
}
/*  we create a class to float content to the left. This class is for any level site. */
.floatL {
    float: left !important;
}
/*  we create a class to float content to the right. This class is for any level site. */
.floatR {
    float: right !important;
}
/*  we create a justify class, this is added in this file as a number of units, departments and national site call and use
this class. This class is for any level site.  */
.justify {
    text-align: justify !important;
}
/* This builds the icon for links that leave the CGAUX network. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#mainbody a.external {
    background: url(external-links.gif) no-repeat center right;
    padding-right: 13px;
}

#mainbody a.ext {
    background: url(external-links.gif) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for PDF icon for use when linking to a PDF. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#mainbody a.pdf {
    background: url(pdf.gif) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for links the go to a PPC page. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#mainbody a.lock {
    background: url(locked.png) no-repeat center right;
    padding-right: 13px;
}
/* This builds the icon for links the go to a Word document. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#mainbody a.word {
    background: url(word-icon.png) no-repeat center right;
    padding-right: 20px;
}
/* This builds the icon for links the go to a Flash Screen. Pages can call this class to add the image to the right hand side 
of the link. As there is not image ref on the page no alt tag is needed when calling this class */
#mainbody a.flash {
    background: url(flash_class_icon.png) no-repeat center right;
    padding-right: 20px;
}
/* Defines the control print format when a browser asks the system to print the page, we void all display information. */
@media print {
    .NoPrint {
        display: none;
    }

    a {
        color: #000000;
        background-color: inherit;
    }
}

@media aural {
    .tabdefine_content, .tabdefine_label {
        display: block;
    }
}
/* The Following supports the PE Calendar Webkit iframe Invocation */
iframe#pecal {
    border: none;
    width: 619px;
    height: 800px;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
}
/* End of PE Calendar Webkit Support */