@font-face {
    font-family: LocalArialNarrow;
    /*src: url("fonts/ARIALN.ttf");*/
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html {
    overflow-y:scroll; /* Required here for IE: forces browser to show vertical scroll bar. prevents "jumping" of content when navigating from short to long pages.  */
    font-family: Arial, sans-serif; 
    color: #424242;
    font-size:12px;
}

body {
    background-color: #4b4b4b;
    padding:0;
    overflow-y:scroll; /* forces browser to show vertical scroll bar. prevents "jumping" of content when navigating from short to long pages  */
    min-width: 960px; /* fixes resize bug, that makes nested min-width elements stick out. */
    display:table;
    width:100%;
}

/* HTML Elements */
h1, h2, h3, h4, h5, h6 {
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0;
}

h1 {
    font-size: 22px;
    margin-bottom: 12px;
    color: magenta;
}

h2 {
    font-size: 18px;
    margin-bottom: 6px;
    color: magenta;
}

h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: magenta;
}

h4 {
    font-size: 14px;
    margin-bottom: 6px;
}

h5 {
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
}

hr {
    width:100%;
}

a, a.default {
    text-decoration: none;
    transition: all .2s linear 0s;
    color: magenta;
}

a:hover, a.over {
    color: magenta;
}

a:active, a.down {
    transition: none;
    color: magenta;
}

p {
    line-height: 20px;
    margin-top:5px;
    margin-bottom:16px;
}

q {
    display: block;
    padding: 12px;
    border: 1px dashed;
    line-height: 20px;
    /* font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed; */
    font-style: italic;
    background-color: #FAFAFA;
    border-color: #D1D1D1;
    color: magenta;
}

dl {
    display: block;
    padding: 12px;
    line-height: 20px;
    background-color: #FAFAFA;  
}

dt {
    display: inline;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px dashed;
    border-color:#424242;
}

dd {
    display: inline;
}

    dd:before {
        content: ": ";
    }

dfn {
    font-style: normal;
    font-weight: normal;
    border-bottom: 1px dotted;
    cursor: pointer;
    border-color: magenta;
    color: magenta;
}

ol, ul, li {
    margin: 0px;
    padding: 0px;
}

ol, ul {
    list-style-position: outside;
    padding-left: 18px;
}

ul {
    list-style: square;
}

li {
    margin-bottom: 8px;
}

fieldset > legend {
    padding:0px 6px 0px 6px;
    font-weight:bold;
}


/* Forms */
/*   Buttons  */
.button,
input[type="button"],
input[type="submit"] {
    position: relative;
    height: 32px;
    padding: 6px 18px 6px 18px;
    border: 1px solid;
    outline: none;
    cursor: pointer;
    font-size: 12px;
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    text-transform: uppercase;
    font-weight: normal;
    transition: all 0.2s linear 0s;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
    color: magenta;
    border-color: magenta;
    background-color: magenta;
}
input[type="image"] {
    outline: none;
}

input[type="button"].button-loud,
input[type="submit"].button-loud {
    background-color: magenta;
    border-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

.button-alternate {
    background-color: magenta;
    border-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

.button-cancel {
    border-color: magenta;
    background-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

.button-delete {
    border-color: magenta;
    background-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}
.button-approve {
    border-color: magenta;
    background-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}
.button:hover, 
.cancel-button:hover {
    border-color: magenta;
    background-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

input.button:active,
button.button:active,
input.button-down,
button.button-down,
input.cancel-button:active,
input.cancel-button-down {
    transition: none;
    border-color: magenta;
    background-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

input.button-disabled,
button.button-disabled,
input.cancel-button-disabled {
    text-shadow:none;
    border-color:magenta;
    background-color: magenta;
    color: magenta;
}

button > img {
    position: absolute;
    box-shadow: 0px 0px 1px magenta;
}
/*button > img.icon24 { left:6px; top:3px; }*/
button > img.icon18 { left: 10px; top: 6px; }

button.button-disabled > img {
    opacity: 0.5;
}

/* Accordion */

 a.accordionTab {
    height:32px;
    display:block;
    background-color:#bbbbbb;
    color:#F4F4F4;
    text-transform:uppercase;
    padding:10px 6px 6px 8px;
    margin-bottom:1px;
}
a.accordionTab:hover {
    background-color:#2180f5;
    color:#ffffff;
}
a.accordionTab > img {
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* Input - Text  */
textarea {
    width: 100%;
    min-height: 100%;
    outline:none;
    vertical-align:middle;
    resize:vertical;
    padding: 8px 6px 3px 6px;
    border-color: #424242;
    font-style: italic;
    line-height: 16px;
    border:1px solid;
}
textarea:focus{
    border-color: #009797;
    background-color: #FFFFFF;
    color: #009797;
}

input[type=text],
input[type=password],
select {
    height: 32px;
    border: 1px solid;
    padding-left: 6px;
    outline: none;
    font-style: italic;
    outline: 0 !important;
    color: magenta;
    border-color: magenta;
    background-color: magenta;

    padding-top: 8px\9; /* the backslash nine (\9) is a hack for IE8 only style. */
    font-style: normal\9;
}

input[type=checkbox],
input[type=radio] {
    margin-right:4px;
    vertical-align:middle;
}

select {
    height: 32px\9;
    padding:6px\9;
}

input[required], 
input.required, 
select.required {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

input.valid, 
select.valid {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

input[type="text"]:not([type="submit"]):not([type="button"]):not([readonly]):focus, 
input[type="password"]:focus,
input.focused, select.focused {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

span.focused-note {
    color: magenta;
}

input:disabled, 
input.disabled, 
select.disabled,
select[disabled],
button:disabled {
	border-color: #a8a8a8 !important;
	background-color: #E6E6E6 !important;
	color: #a8a8a8 !important;
    text-shadow: initial !important;
}

input[readonly], 
input.readonly, 
select.readonly {
	border-color: #a8a8a8;
	background-color: #FFFFFF;
	color: #a8a8a8;
}

input.missing {
    border: 1px dashed;
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

label.missing {
    color: magenta;
}

input.error, select.error {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

label.error {
    color: #970000;
}

/* This is the Image that goes over the date input field, to clear datefield which should be read only. */
img.cleardate {
    z-index: 10;
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

input.date[readonly] {
    background-image: url(/portal_home/images/icon_calendar.png);
    /*background-size: 18px 18px;*/
    background-repeat: no-repeat;
    background-position: 6px 7px;
    padding-left: 26px;
    width: 130px;
    color: #424242;
    border-color: #424242;
    background-color: #FAFAFA;
}
input.date[readonly][required] {
    border-color: #979700;
    background-color: #e8e8d0;
    color: #979700;
    background-image: url(/portal_home/images/icon_calendar_required.png);
}

input.date[readonly]:focus {
    border-color: #009797;
    background-color: #FFFFFF;
    color: #009797;
}
input.date[required]:focus {
    background-image: url(/portal_home/images/icon_calendar_required.png);
} 
input.date.planned {
    background-image: url(/portal_home/images/icon_calendar_planned.png);
    border-color: #005397;
    background-color: #dbe6f4;
    color: #005397;

} 
input.date.actual {
    background-image: url(/portal_home/images/icon_calendar_actual.png);
    border-color: #970097;
    background-color: #f5dcf5;
    color: #970097;
}

input:focus.date,
input:focus.date.planned,
input:focus.date.actual {
    background-image: url(/portal_home/images/icon_calendar_focused.png);
}

input.planned {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

input.actual {
    border-color: magenta;
    background-color: magenta;
    color: magenta;
}

input.code {
    font-family: "Consolas";
    font-style: normal;
    font-size: 16px;
    letter-spacing: 1px;
    border: 0px;
    padding: 0px;
    width:108px;
}

.input-note {
    text-align: left;
    font-size: 11px;
    color: #949494;
    line-height: 12px;
    padding: 15px 3px 0px 0px;
}

.error-note {
    color: #970000;
    font-size: 10px;
}

.error-note:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 9px;
    margin-right: 3px;
    margin-top: 3px;
    vertical-align: top;
    background-image: url(/images/note-error-arrow.png);
    background-repeat: no-repeat;
}

.missing-note {
    color: magenta;
}

.missing-note:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: top;
    margin-right: 3px;
    margin-top: 1px;
    background-image: url(images/note-missing-arrow.png);
    background-repeat: no-repeat;
}

/* speadsheet */
table.spreadsheet {
    width: 100%;
    margin-bottom:18px;
}

table.spreadsheet > thead > tr > th {
    /*height: 32px;
    padding: 0px 12px 0px 12px;*/

    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    font-weight: normal;
    text-transform: uppercase;
    border-color: #005397;
    background-color: #005397;
    color: magenta;
    text-align:left;
    vertical-align: middle;
}

table.spreadsheet > thead > tr > th:hover, table.spreadsheet > thead > tr > th:hover.filter {
    cursor: pointer;
    background-color: magenta;
    border-color: magenta;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;
}

table.spreadsheet > tbody > tr > td {
    height: 36px;
    vertical-align: top;
    padding: 0px 12px 0px 12px;
    line-height: 18px;
    border-top: 1px solid;
    vertical-align: middle;
    border-color:#FFF;
}

table.spreadsheet > tbody > tr:nth-child(odd) {
    /*background-color: #E6E6E6;*/
}

table.spreadsheet > tbody > tr:nth-child(even) {
    background-color: magenta;
}

table.spreadsheet > thead > tr > th.filter {
    background: url(images/filter_indication.png), magenta;
}

table.spreadsheet > thead > tr > th:hover.filter {
    background: url(images/filter_indication.png), magenta;
}

table.spreadsheet > thead > tr > th.asc:after,
table.spreadsheet > thead > tr > th.desc:after {
    content: "";
    display: block;
    width: 12px;
    height: 6px;
    background-image: url(images/arrow_sort_asc.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    right: 12px;
}

table.spreadsheet > thead > tr > th.desc:after {
    background-image: url(images/arrow_sort_desc.png);
}
	table.spreadsheet_gridview td {
		font-size:11px !important;
	}
    /* For using spreadsheet styles in an ASP Gridview Control */
    .spreadsheet_gridview th {
        cursor:pointer;
        background-color:#005397;
        /*height: 32px;
        padding: 0px 12px 0px 12px;*/
        font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif;
        font-stretch: condensed;
        font-weight: normal;
        text-transform: uppercase;
        border-color: #005397;
        background-color: #005397;
  
        text-align: left;

        text-shadow: -1px -1px 0 #005397, 
                      1px -1px 0 #005397, 
                     -1px  1px 0 #005397, 
                      1px  1px 0 #005397;
        color: #FFF;

    }
    .spreadsheet_gridview th:hover {
        background-color:#2180f5;
    }
    .th-relative-container {
        position:relative;
    }
    .spreadsheet_gridview .grid_row {}
    .spreadsheet_gridview .grid_row_alt {
        background-color: #FAFAFA;
    }
    
    .spreadsheet_gridview .grid_row > td,
    .spreadsheet_gridview .grid_row_alt > td {
        height: 36px;
		/*vertical-align: top;*/
        padding: 0px 12px 0px 12px;
        line-height: 18px;
        border-bottom:1px solid #808080;
    }
    .pagination-wrapper {
        margin-bottom:1px;        
        padding:6px 12px 6px 12px; 

        background-color: #f4f4f4; 
        text-align: center;
    }
    .changepage-wrapper { float:left; margin-top: 6px; }
    .pagedetails-wrapper { float:right; margin-top: 6px; }
    .pageindex-wrapper { word-spacing:0px;}
    .pageindex-wrapper span {
    /* for pagination details, highlights the current page number*/
        color: #f58021;
        font-weight: bold;
        display: inline-block;
        padding: 4px 6px 4px 6px;
        background-color: #FFFFFF;
        border: 1px dotted #f58021;
    }
    .pageindex-wrapper a {
        display: inline-block;
        padding: 4px 6px 4px 6px;
        border: 1px solid #F4F4F4;
        transition: none;
    }
    .pageindex-wrapper a:hover {
        background-color:#2180f5;
        color:#FFFFFF;
        border: 1px solid #005397;
    }

    /*
     * divFilterOptions is the drop down menu associated with spreadsheeet views 
     * it allows Users to Sort, and Filter their columns.
     */
    .column-header {
        height: 30px;
        padding: 9px 0px 0px 8px;
    }
    .divFilterOptions {
        z-index:1;
        display:none; 
        position:absolute; 
        top: 30px;
        left: -1px;
        width: 100%;
        min-width:168px;
        border:1px solid #005397;
        background-color:#F4F4f4;
        font-family:Arial;
        text-transform: none;
        text-shadow: none;
        font-stretch: normal;
        color:#005397;
    }
    .divFilterOptions > label {
        display:block; 
        line-height: 24px;
    }
    .divFilterOptions > label:hover { cursor:pointer; background-color:#FFFFFF; }
    .divFilterOptions > label > input[type=checkbox] {
        margin: 8px 6px 8px 8px;
    }

    .divFilterOptions > label > input {
        vertical-align: middle;
        padding: 6px;
    }
    .divFilterOptions table.cblFilter input { 
        float:left;
        clear:right;
        margin: 4px 8px 4px 0px;
    }
    .divFilterOptions table.cblFilter label {
        float:left;
        max-width:83%;
        min-width:106px;
        padding-top:3px;
        cursor:pointer;
        white-space:pre-wrap;
    }

    .divFilterOptions .filterboxCheckboxContainer {
        padding: 0px 6px 0px 2px;
        max-height: 156px;
        overflow-y: auto;
        border-top: 1px dashed #424242;
        border-bottom: 1px dashed #808080;
        margin: 0px 6px 6px 5px;
    }

    .divFilterOptions .filterboxButtons {
        padding:6px;
    }



/* Dataview */
.formview-wrapper,
.dataview-wrapper {
    margin-bottom: 12px; 
    padding: 8px; 
    background-color: #f4f4f4;
}
table.dataview,
table.dataview_gridview {
    border-collapse: separate;
    border-spacing: 0px;
    font-size: 11px; /* Todd requested smaller font on gridviews */
    margin-bottom:12px;
}

table.dataview > thead > tr > th, 
table.dataview_gridview > tbody > tr > th {
    height: 32px;
    padding: 0px 6px 0px 6px;
    border-bottom: 2px solid;
    font-weight:normal;
/*
    text-transform: uppercase;
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
*/
    vertical-align: middle;
    text-align:left;
    color: magenta;
    border-color: magenta;
    background-color: magenta;
}

table.dataview tr.secondary > th,
table.dataview tr.secondary > td {
    background-color: #e6e6e6;
}


table.dataview > tbody > tr > td,
table.dataview_gridview > tbody > tr > td {
    border-bottom: 1px solid;
    height: 33px;
    padding: 2px 6px 2px 6px;
    line-height: 18px;
    vertical-align: middle;
    border-color: #a8a8a8;
}

table.dataview_gridview:first-child{
    padding:0;
}

/*table.dataview > tbody:hover td {
    color: #CCC;
}

table.dataview > tbody:hover > tr:hover td {
    cursor: default;
    color: #FAFAFA;
    background-color: magenta;
}*/

/*table.dataview2 {
    border-collapse: separate;border-spacing: 0px;width: 100%;
}

table.dataview2 > thead > tr > th {
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    font-weight:normal;
    text-transform: uppercase;
    border-bottom: 2px solid #005397;
    color: #005397;
    height: 48px;
    padding: 0px 12px 0px 12px;
    vertical-align: middle;
    text-align:left;
}


table.dataview2 > tbody > tr > td {
    border-bottom: 1px solid #a8a8a8;
    height: 36px;
    padding: 0px 12px 0px 12px;
    vertical-align: middle;
    line-height: 18px;
}*/

/*table.dataview_gridview {
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
}

table.dataview_gridview > tbody > tr > th {
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    font-weight:normal;
    text-transform: uppercase;
    height: 48px;
    padding: 0px 12px 0px 12px;
    vertical-align: middle;
    text-align:left;
}

table.dataview_gridview > tbody > tr > td {
    height: 36px;
    vertical-align: middle;
    line-height: 18px;
}*/

table.pagination > tbody > tr {
    height: 42px;
}

table.pagination > tbody > tr:last-child {
    background-color:#f4f4f4;
    text-align:center; 
}

table.pagination > tbody > td {
    vertical-align: middle;
}

tr.pagerRow > td { padding-left:0px !important; padding-right:0px !important; }
    /*
table.pagination_full {
position:absolute;
    z-index:1;
    background-color:#ffffff;
    top:125px;
    border-bottom:6px solid #ffffff;
}
*/
table.pagination_full > tbody > tr {
    /*height: 42px;*/
}

table.pagination_full > tbody > tr:last-child {
    background-color:#f4f4f4;
    /*text-align:center;*/ 
}

table.pagination_full > tbody > td {
    vertical-align: middle;
}

/* *********** */
/* Table Form  */
/* *********** */
table.form, 
table.formview { border-top:1px solid #e6e6e6; margin-bottom:24px; width:100%; font-size:12px; }

table.form > thead > tr > th {
    height: 32px;
    text-align: left;
    padding: 0px 0px 0px 6px;
    background-color: #d1d1d1;
    border-bottom: 1px solid #949494;
}

table.form     > tbody > tr > td { vertical-align:middle; border-bottom:1px dashed #e6e6e6; padding:4px 6px 4px 6px;  height:41px; margin-bottom:24px; }
table.formview > tbody > tr > td { vertical-align:middle; border-bottom:1px dashed #e6e6e6; padding:6px;              height:auto; }
table.compact > tbody > tr > td { padding:2px 0px 2px 6px !important; }

/*table.form     > tbody > tr:first-child > td:first-child { width:33%; }
table.formview > tbody > tr:first-child > td:first-child { width:auto; }*/

table.form     > tbody > tr:nth-child(odd),
table.formview > tbody > tr:nth-child(odd) { background-color:#F9F9F9; }

.formview-wrapper {
    margin-bottom: 12px; padding: 8px; background-color: #f4f4f4;
}
.formview-wrapper table.formview {
    margin-bottom:0px;
}





/* Header  */
#universalNavigation-wrapper { background-color: #ffffff; }
#universalNavigation {
    margin: auto auto;
    width: 960px;
    height: 48px;
}

#universalNavigation_portalLogo {
    float: left;
    width: 200px;
    height: 32px;
    margin: 8px 0px 0px 0px;
}

#universalNavigation_portalLogo:hover {
    /*cursor: pointer;*/
    opacity: .75;
}


/*
	* Menu Structure
	*/
/* Any Unordered List with class="menu-root" AND any nested Unordered list, will be a "menu" */
ul.menu-root,
ul.menu-root ul,
ul.menu-root li { list-style:none; padding:0px; margin:0px; }

/* Any unordered list directly nested in a list item from within the menu-root is hidden (the root level is not) */
ul.menu-root li > ul { display:none; position:absolute; } /* sub Menu */
	
/* Any unordered list directly nested in a list item is shown, when the parent list item is hovered over. */
ul.menu-root li:hover > ul { display:block; } /* for raw CSS testing */
/*ul.menu-root li.hover > ul { display:block; } /* for JavaScript solution (slows down hide) */

ul.menu-root li { float:left; position:relative;  }

/* for first level menu's that pop out to the right, they should be 100% to match the longest element. */
ul.menu-root > li li { width:100%; }

ul.menu-root a { 
	display:block; 
	white-space:nowrap; /* forces the list item to stretch as needed. as names grow. */
	width:100%; /* 100% here will make it match the parent list item */
    transition: none; /* no fancy transitions in the menu. */
}

/* makes the sub-menu's of ALL non-root list items come out to the right side */
ul.menu-root > li li > ul { 
	top: 0px;
	left: 100%;
}
/* makes the listitems sub-menu align right */
li.submenu-align-right > ul {
    right: 0px !important; /* the !important fixes the left -1px from the submenues outline */
    left: auto !important;
}
ul.menu-root > li:hover {
    background-color:#f4f4f4;
}
ul.menu-root > li a {
    display: block;
    padding: 6px 9px 6px 9px;
}

/* All second level Unorder Lists have a grey background color and are set to 100%  */
ul.menu-root > li ul {
    background-color: #f4f4f4;
    min-width:100%;

    left:-1px; /* accounts for added border so edge aligns */
    border: 1px solid #a8a8a8;
    border-top: 0px;
    box-shadow: 0px 2px 2px #a8a8a8;
}

/* All second level list Items have a white-ish 1 pixel border on top*/
ul.menu-root > li ul > li {
    border-top: 1px solid #a8a8a8;
}

/* All second level list Items (but not top level) highlight blue when hovered. */
ul.menu-root > li ul > li:hover > a {
    background-color:#2180f5;
    color:#FFFFFF;
}

ul.menu-root li.parent {
    color: #424242;
    border-bottom: 1px dotted #949494;
    background-color: #e6e6e6;
}

ul.menu-root li.parent > a,
ul.menu-root li:hover.parent > a {
  background-color: transparent;
  color: #575757;
}

/* if a sub list item needs to be "Nested" */
ul.menu-root li.nested {
    border-top: 0px !important;
    /*background-color: #B6B6B6;
    border-left: 12px solid #808080;*/
}

ul.menu-root li.nested > a { 
    padding-left: 24px;
}

/*ul.menu-root li:hover.nested {
    border-color: #005397;
}*/

/* "Badge Menu */
ul.badge li {
    z-index:3;
}
ul.badge > li {
    font-size:11px;
    margin-top: 6px;
    margin-left: 3px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border: 1px solid #FFFFFF;
}
ul.badge > li:hover { 
    border: 1px solid #a8a8a8;
}

#badge {
    float: right;
    margin: 6px 0px 0px 0px;
    height: 48px;
    color: magenta;
}
/*
#badge > a {
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    font-size: 11px;
    padding: 3px 6px 3px 6px;
    text-transform: uppercase;
    transition: background,color .2s linear 0s;
    margin-top: 0px;
    color: magenta;
}*/

/*#badge > div > a:hover {
    border-radius: 3px;
    color: magenta;
}
#badge > div {    
    float:left; 
    display: inline-block; 
    padding-left:6px; 
    padding-right:6px; 
    margin-top:20px;
}
#badge > div:hover {
    margin-top: 17px;
    display: inline-block;
    text-decoration: none;
    font-size: 11px;
    padding: 3px 6px 3px 6px;
    transition: background,color .2s linear 0s;
    border-radius: 3px;
    background-color: magenta;
}*/

/*#universalNavigation_badgeAPNHome {
    vertical-align: middle;
    margin-top: 8px;
}

#universalNavigation_badgeAPNHome > img {
    width: 48px;
    height: 32px;
    background-image: url(/images/apn-icon-colored.png);
    background-repeat: no-repeat;
}*/

/* BEGIN GLOBAL NAVIGATION */
#globalNavigation-wrapper {
    border-bottom: 3px solid;
    background-color: magenta;
    border-color: magenta;
}

#globalNavigation {
    width: 960px;
    height: 31px; /* +3px from wrapper = 34px */
    margin: auto auto;
}

#globalNavigation > ul.tabs > li > a.selected {
    background-color: magenta;
    color: #F4F4F4;
}

/* Global Navigation Menu */
.globalNavigation li {
    z-index:2;
}

ul.globalNavigation > li {
    margin-top: 3px;
}

.globalNavigation > li > a {
    color:#ffffff;
    transition: none;
    text-transform: uppercase;
    line-height: 16px;
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    font-weight: normal;
}

ul.globalNavigation > li:hover > a {
    color:#005397; /* Make color blue hover*/
}

.globalNavigation li.selected {
    background-color: magenta;
}
.globalNavigation li.selected > a {
    color: #F4F4F4;
}

/* SUB NAV TABS */
#subNavigation_wrapper {
    background-color: magenta;
}

#subNavigation {
    margin: auto;
    width: 960px;
}

ul.subNavigation {
    height: 26px;
}
ul.subNavigation li {
    z-index:1;
}

ul.subNavigation > li:hover > a {
    color:#005397; /* Make color blue hover*/
}

ul.subNavigation > li > a {
    color:#ffffff;
}

ul.subNavigation li.selected {
    background-color: #f4f4f4;
}
ul.subNavigation li.selected > a {
    color:#424242;
}

/*#subNavigation li {
    margin: 0;
    padding: 0;
    float: left;
}*/


/* BEGIN: Content Structure */

#content-wrapper {
    background-color: #FFFFFF;
    background-image: url(/images/content-wrapper_bg.png);
    background-repeat: repeat-x;
    background-position: bottom;
    padding: 0px 12px;
}

.content {
    /*position:relative;
    z-index: 1;*/
    width: 960px;
    margin: auto;
    padding: 12px;
    background-color: #f4f4f4;
}

.content_full {
    margin: auto;
    background-color: #f4f4f4;
    padding: 12px;
}

.content_full .section,
.content .section {
    padding: 12px;
    background-color: #ffffff;
    overflow:visible;
}


/* BEGIN: Footer */
#footer-wrapper {
    /*background-color: #4b4b4b;*/
}

#footer {
    width: 960px;
    margin: auto;
    height: 168px;
    margin-top: 18px;
}

#footer > div {
    float: left;
    width: 176px;
    height: 100%;
    margin: 0px 0px 0px 24px;
    padding: 10px 0px 12px 12px;
    color: #f4f4f4;
}

#footer > img.apn-logo-white {
    float: left;
    margin-top: 28px;
    margin-left: 28px;
    margin-right: 12px;
    width: 96px;
}
#footer > div a {
    font-size: 12px;
    font-weight: normal;
    line-height: 14px;
    color: #d1d1d1;
}

#footer > div a:hover {
    color: magenta;
}

#copyright {
    margin: auto;
    width: 960px;
    padding: 12px;
    font-size: 11px;
    text-align: center;
    color: #d1d1d1;
    border-top: 1px dashed #5C5C5C;
}

#copyright b {
    color: #FFFFFF;
}



/* END: Footer */


/* BEGIN: Section Tabs */
.section .tabs {
    list-style-type: none;
    height: 32px;
    border-bottom: 1px solid;
    border-color:#d1d1d1;
    padding-left: 0px;
    overflow: visible;
    margin-bottom:12px;
}

.section .tabs > li,
.section .tabs > a {
    float: left;
    padding: 7px 12px 0px 12px;
    border: 1px solid;
    height: 32px;
    margin-left: 3px;
    margin-bottom: 0px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: LocalArialNarrow, 'Arial Narrow', Arial, sans-serif; 
    font-stretch: condensed;
    cursor: pointer;
    transition: all ease-in .25s 0s;
    border-color: #d1d1d1;
    background-color: #e5e5e5;
}

.section .tabs > li > a,
.section .tabs > a {
    transition: all .2s linear 0s;
    color: #424242;
    text-shadow: none;
}


.section .tabs li.selected,
.section .tabs li.selected:hover,
.section .tabs a.selected,
.section .tabs a.selected:hover {
    border: 1px solid;
    border-color: #d1d1d1;
    border-bottom-color: #FFFFFF;
    background-color: #FFFFFF;
    text-shadow: none;
    color: #424242;
}

.section .tabs li:hover,
.section .tabs a:hover {
    /*border: 1px solid;*/
    /*border-color: magenta;
    background-color: magenta;
    color: #FFF;
    text-shadow: -1px -1px 0 magenta, 
                  1px -1px 0 magenta, 
                 -1px  1px 0 magenta, 
                  1px  1px 0 magenta;*/
    border-color: #005397;
    background-color: #2180f5;
    color: #FFF;
    text-shadow: -1px -1px 0 #005397, 
                  1px -1px 0 #005397, 
                 -1px 1px 0 #005397, 
                  1px 1px 0 #005397;
}

.section .tabs li:hover > a,
.section .tabs a:hover {
    color: #FFF;
    text-shadow: -1px -1px 0 #005397, 
                  1px -1px 0 #005397, 
                 -1px  1px 0 #005397, 
                  1px  1px 0 #005397;
}

.section .tabs li.selected:hover > a,
.section .tabs a.selected:hover  {
    color: #424242;
    text-shadow:none;
}

/* END section tabs*/

.input-wrapper {
    margin-bottom: 12px;
}



/* START Dashboard */
    .dashboard-heading {
        overflow:auto;
        padding-bottom:2px;
        border-bottom:1px solid #d1d1d1;
        margin-bottom:12px;
    }
    .dashboard-heading h1,
    .dashboard-heading h4 {
        margin-bottom:0px;
    }
    .dashboard-icon {
        float:left;
        margin: 2px 6px 0px 0px;
    }
    .summary-wrapper {
        float:right;
        margin-top: 6px;
        margin-left:18px;
        text-align:right;
    }
    .sub-title {
        color:#808080;
    }
/* END Dashboard */


/* Common Helper Classes */
.right {     float: right;}
.hidden {    display: none; }
.note { font-size: 10px; color: #949494; }

.text-green  { color: #51b948; }
.text-teal   { color: #48b9b9; }
.text-red    { color: #f52121; }
.text-yellow { color: #f5f521; }
.text-blue   { color: #005397; }
.text-legal { font-family:Georgia; font-style:italic; }
.description {
    padding: 12px;
    border: 1px dashed;
    line-height: 1.5em;
    background-color: #FAFAFA;
    border-color: #D1D1D1;
    margin-bottom: 24px;
}
.no-records {
    font-family:Georgia; 
    font-style:italic; 
    border:1px dotted #808080; 
    padding:24px; 
    text-align:center; 
    background-color:#e6e6e6;
    color:#808080;
    font-size:12px;
}
.no-records-turnarounds {
    font-family:Georgia; 
    font-style:italic; 
    border:1px dotted #808080; 
    padding:24px; 
    text-align:center; 
    background-color:#e6e6e6;
    color:#808080;
    height:300px;
    font-size:12px;
}
.message-warning,
.message-success {
    padding: 12px 12px 12px 12px;
    background-color: #e6e6e6;
    border-top: 6px solid;
    overflow: auto;
    margin-bottom: 12px;
}
.message-warning { border-top-color:#979700; }
.message-success { border-top-color:#51b948; }

.message-warning h4,
.message-success h4 {
    font-family:arial;
    font-weight:bold;
    font-size:12px;
}
.message-warning h4 { color: #979700; }
.message-success h4 { color: #51b948; } 

.message-warning p,
.message-success p {
  font-family: Georgia;
  font-style: italic;
}




.download-jobaid  {
    float: left;
    display: block;
    margin: 6px;
    padding: 12px;
    border: 1px dashed #424242;
    width: 188px; /* this will vary page to page */
    min-height:58px; /* this might vary page to page */
    font-family: georgia;
    font-style: italic;
    background-color: #F4F4F4;
}
.download-jobaid:hover {
    background-color:#FFFFFF;
}

/* Error and Access Denied pages */
    .access_denied {
        padding:32px;             
        overflow:auto; 
        background-color:#005397; 
        color:#FFFFFF;
    }
    .access_denied a {
        color:#FFFFFF;
    }
    .access_denied a:hover {
        color:#f58021;
    }

    #contact_help {
        float: right;
        padding:12px 12px 12px 32px;
        margin-left:32px;
        border-left:1px dashed #F4F4F4;
    }
    #contact_help h3 {
        color:#FFFFFF;
    }

    .access_denied .note {
        color:#d1d1d1 !important;
    }


/* Pyramid Legend, used in Pyramid, NaviTrack Pyramid, and NaviTrack */

    .pyramid_legend {
        font-size:11px;
        margin-bottom:6px;
    }

    .pyramid_legend td {
        background-color: #F4F4F4;
        padding: 4px 8px 4px 4px;
        border-left: 4px solid #FFFFFF;
    }

    .pyramid_legend img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
        margin-left: 4px;
        vertical-align: sub;
    }
    /* Use for Legends in NaviTrack, since pyramid legend resizes icons */
    .legend img {
        margin-left: 4px;
        vertical-align: sub;
    }


/*  TAB AND HOVER-OVER MENU  */
.icon-down:before {
    content: "\25BE";
}

li.liArchived {
    background-color: #e4e4e4;
    width: 350px;
    padding: 10px;
    text-shadow: none;
    color: #000;
    border: 1px solid #ccc;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin: 9px 0px 0px -10px !important;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* TEMPORARY */
DIV.pyramidWrapper img.pyramidBackground { z-index:auto !important; }
DIV.pyramidWrapper img { z-index:auto !important; }

/* Used in Pyramid comment lightbox */
.td-fullname {
    white-space: nowrap;
    vertical-align: top;
    text-align: right;
    padding-right: 12px;
    padding-top: 8px;
}

@media print {
    .metricValue,
    .status_high, 
    .status_medium,
    .status_low,
    .status_none,
    .compliance_status_red,
    .compliance_status_yellow,
    .compliance_status_green,
    .compliance_status_grey,
    .compliance_status_red,
    .compliance_status_yellow,
    .compliance_status_green,
    .compliance_status_grey { color:#000000 !important; }

    input { text-shadow:none !important; }
}
@media print {
    #footer, #footer-wrapper, #footer > div, #footer > img.apn-logo-white {
        display:none !important;
    }
    #copyright b {
        color: #000000;
    }
    body {
        background-color: #ffffff;
    }
}