﻿/* ************************************************************************** */
/* NCFDEM
/* Written by: Daniel Pennell
/* ************************************************************************** */
/* General Styles */
html {
	/*overflow-x: hidden;
	overflow-y: auto;*/
}
html, body {
	height: 100%;
	width: 100%;
}
body {
	margin: 0px; padding: 0px;
	color: #312e25;
	font-family: Segoe UI, Arial, Sans-Serif;
	font-size: 1em;
	overflow: visible;
}
form {
	padding: 0px; margin: 0px;
}
p {
    margin-top: 6px;
    margin-bottom: 6px;
}
#externalContent {
	position: absolute;
	top: 72px;
	width: 100%;
}
#content {
	position: absolute;
	top: 94px;
	width: 100%;
}
.key {
	font-weight: bold;
	text-align: right;
	margin-right: 3px;
	vertical-align: top;
}
.keySpaced {
	font-weight: bold;
	text-align: right;
	margin-right: 3px;
	padding-left: 1em;
	vertical-align: top;
}
.value {
	text-align: left;
	margin-right: 3px;
	vertical-align: top;
}
.invisible {
	visibility: hidden;
	display: none;  /* work-around for IE */
}
.spaced {
	margin-left: 1em;
}
.spacedRight {
    margin-right: 1em;
}
.padded {
    padding-left: 1em;
}
.paddedRight {
    padding-right: 1em;
}
.block {
    display: block;
}
.inline-block {
	display: inline-block;
    zoom: 1; /* IE7 */
    *display: inline; /* IE7 */
}
.table-display {
	display: table;
}
.link-style {
    border-collapse: collapse;
}
.link-style input {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}
.underlineEffect:hover {
    text-decoration: underline !important;
}
.fill {
    width: 100%;
}
.ui-state-active-alt, .ui-widget-content .ui-state-active-alt, .ui-widget-header .ui-state-active-alt { border: 1px solid #d4ccb0; background: #eaeae4 url(images/ui-bg_highlight-hard_100_eaeae4_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #051087; }
.ui-state-active-alt a, .ui-state-active-alt a:link, .ui-state-active-alt a:visited { color: #051087; text-decoration: none; }


/* ************************************************************************** */
/* Font Styles */
.heading {
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	padding-top: 0.5em;
}
.nowrap { white-space: nowrap; }
.leftAlign { text-align: left; }
.rightAlign { text-align: right; }
.centered { text-align: center; }
.italics { font-style: italic; }
.bold { font-weight: bold; }
.fontNormal { font-size: 1em; }
.fontLarge { font-size: 1.1em; }
.fontLarger { font-size: 1.2em; }
.fontSmall { font-size: 0.9em; }
.fontSmaller { font-size: 0.75em; }
.fontTiny { font-size: 0.6em; }

/* ************************************************************************** */
/* Navigation Styles */
@media screen {
    .navHeader {
	    position: absolute;
	    width: 100%; height: 70px;
	    font-size: 18px; font-weight: bold; color: White;
	    border-top: none;
	    border-left: none;
	    border-right: none;
	    background: #5E83C2 url(Images/ncfdem-end.png) repeat-x scroll 0 0;
    }
    #navHeaderBase {
        position: absolute;
        width: 484px; height: 70px;
	    background: #5E83C2 url(Images/ncfdem-banner.png) no-repeat scroll 0 0;
    }
    #navHeaderBase2 {
        position: absolute;
        width: 574px; height: 70px;
	    background: #5E83C2 url(Images/ifarm-banner.png) no-repeat scroll 0 0;
    }
    .navTitle {
        position: absolute;
        top: 20px;
        left: 75px;
        color: #ffffff;
        font-weight: bold;
        font-size: 1.1em;
        max-width: 540px;
        overflow: hidden;
        white-space: nowrap;
    }
    #navMenu {
	    position: absolute; top: 70px;
	    width: 100%;
	    height: 23px;
	    border-left: none;
	    border-right: none;
	    text-align: center;
    }
    #navMenu a {
        display: inline-block;
    }
    #navMenu span {
        white-space: nowrap;
    }
    span.navItem {
	    font-size: 11px; font-weight: bold;
	    height: 18px;
	    width: 75px; color: White;
	    padding: 2px 5px 2px 5px;
	    cursor: pointer; cursor: hand;
	    text-decoration: none;
    }
    span.navDiv {
	    height: 18px;
	    border-right: groove 3px white;
    }
    div#navUsername {
	    position: absolute;
	    top: 0.5em; right: 1em;
	    font-size: 14px;
	    color: White;
    }
    div#navLogout {
	    position: absolute;
	    top: 52px; right: 1.5em;
	    font-size: 11px;
	    font-weight: bold;
    }
    div#navLogout a {
	    color: #fff;
	    text-decoration: none;
    }
    div.submenu {
	    width: 100%;
	    padding: 0px 5px 2px 10px;
	    border-style: none;
    }
    span.submenuItem {
	    font-family: Arial; font-size: 12px;
	    padding: 2px 10px 2px 10px;
	    cursor: pointer; cursor: hand;
	    text-decoration: underline;
    }
    #navSidebar {
        vertical-align: top;
        width: 10em;
        min-height: 20em;
        font-size: 11px;
        border-top: none;
        border-left: none;
    }
    #navSidebar td {
        padding: 1px 1px 0 3px;
    }
    div.sidebarHeading {
        font-weight: bold;
        font-size: 14px;
    }
    #navSubmenu {
        width: 100%;
        border-left: none;
        border-right: none;
    }
    #navSubmenu a {
        margin-right: 15px;
    }
}
@media print {
    #navHeader, #navTitle, #navUsername, #navLogout, #navMenu, #navSidebar, #navSubmenu {
        display: none;
    }
}
#navSidebarLayout {
    width: 100%;
    border-collapse: collapse;
    vertical-align: top;
}
#navSidebarLayout > tbody > tr > td {
    padding: 0px;
}
#loginSplash {
    background: url(images/IFARM-Log-in.png) no-repeat center top;
    width: 100%;
    height: 550px;
    padding-top: 310px;
}
#loginSplash > div {
    position: relative;
    width: 260px;
    margin: 10px auto 32px auto;
    padding-bottom: 10px;
}
#loginSplash > div > #loginShadow {
    position: absolute;
    width: 260px;
    height: 150px;
    border: solid 2px #222222;
    border-radius: 8px;
}
#loginSplash > div > #loginShadow > div {
    width: 260px;
    height: 150px;
    border: none;
    border-radius: 6px;
    background-color: #282211;
    opacity: 0.7;
}
#loginSplash > div > #loginPanel {
    position: relative;
    color: #000000;
}
#loginFooter {
    width: 920px;
    height: 45px;
    margin: 0 auto;
    /*background-color: #030842;*/
    background: url(images/ui-bg_inset-soft_80_5a81c1_1x100.png) repeat-x 50% 50% #5a81c1;
    padding-top: 4px;
    font-size: 12px;
    text-align: center;
}
#loginFooter a, #loginFooter a:visited {
    color: #333333;
    text-decoration: none;
}

/* ************************************************************************** */
/* Data Entry Styles */
.dataCommentsBox {
	width: 30em;
	height: 5em;
}
.dataNarrowCommentsBox {
	width: 20em;
	height: 5em;
}
.dataJumboCommentsBox {
    width: 48em;
    height: 12em;
}
.dataTinyField { width: 2em; }
.dataExtraNarrowField { width: 3em; }
.dataNarrowField { width: 7em; }
.dataField { width: 10em; }
.dataWideField { width: 15em; }
.dataDoubleWideField { width: 30em; }
.dataExtraWideField { width: 40em; }

/* ************************************************************************** */
/* Panel Styles */
.formPanel {
	padding: 4px;
}
.panelHeader {
	padding-left: 3px;
	padding-right: 3px;
	height: 1.5em;
}
.panelHeader .link-style {
    color: #ffffff;
}
.panelHeader .link-style:hover {
    background: #5e83c2 url(images/ui-bg_highlight-soft_25_5e83c2_1x100.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #ffffff;
    border-radius: 6px;
}
.panelHeader .link-style input {
    color: #ffffff;
}
.contentPanel {
    margin: 15px;
}
.contentPanelSpaced {
    margin: 22px 15px 15px 15px;
}

/* ************************************************************************** */
/* Table Styles */
.searchResultsTable {
	display: inline-block;
	font-family: Arial, Sans-Serif;
	font-size: 0.9em;
	text-align: left;
	margin: 2px 1em 2px 1em;
	padding: 3px;
	border-collapse: collapse;
}
.searchResultsTable th {
	text-align: center;
}
.searchResultsTable td {
	padding-left: 3px;
	padding-right: 3px;
}
.searchResultsTable a {
	text-decoration: none;
}
.requiresReview {
    color: #999999;
}
.surveyTable {
    border-collapse: collapse;
    width: 100%;
}
.surveyTable tr td:first-child {
    width: 22em;
}
.spacerRow {
    height: 5px;
}
.editCell {
    border: none;
    height: 100%;
}
.alignTable th {
    vertical-align: bottom;
}
.alignTable td {
    vertical-align: top;
}
table.summaryTable {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.75em;
}
table.summaryTable > tbody > tr > th, table.summaryTable > tbody > tr > td {
    padding-left: 3px;
    padding-right: 3px;
}
table.summaryTable > tbody > tr > th:nth-child(even), table.summaryTable > tbody > tr > td:nth-child(even) {
    background-color: #eeebdd;
}
table.keyValueTable > tbody > tr > th {
	font-weight: bold;
	text-align: right;
	padding-right: 3px;
	vertical-align: top;
}
table.keyValueTable > tbody > tr > td {
	text-align: left;
	padding-right: 3px;
	vertical-align: top;
}
table.keyValueTable > tbody > tr > th.leftAlign {
    text-align: left;
}
table.keyValueTable > tbody > tr > td.rightAlign {
    text-align: right;
}

/* ************************************************************************** */
/* Event Display Styles */
.eventList {
	display: block;
	margin: 1em;
	vertical-align: bottom;
}
.eventSection {
    display: table;
    margin-left: 8px;
    padding: 2px 3px 1px 3px;
	border-bottom-width: 0 !important;
    height: 21px;
}
.eventSpacer {
    height: 23px;
}
.eventItem {
	display:inline-block;
	border: solid 1px #444444;
	margin: 0px 8px 8px 8px;
}
.eventHeader {
	font-weight: bold;
	padding: 4px 5px 2px 5px;
	display: block;
    cursor: default;
    text-decoration: none;
}
.eventBody {
	padding: 3px;
}
.event-national, a.event-national:hover, .event-state, a.event-state:hover, .event-agency, a.event-agency:hover {
	color: #000;
}
.event-national {
	background-color: #ddddff;
}
a.event-national:hover {
	background-color: #eeeeff;
}
.event-state {
	background-color: #c18a53;
}
a.event-state:hover {
	background-color: #d19a63;
}
.event-agency {
	background-color: #4fc675;
}
a.event-agency:hover {
	background-color: #5fd685;
}

/* ************************************************************************** */
/* Time & Mileage Display Styles */
table.summaryTable > tbody > tr.weekTotal > td, .weekTotal {
    font-weight: bold;
    background-color: #999999;
    color: #f0f0f0;
}
.personalVehicle {
    font-weight: bold;
    font-size: 0.75em;
}

/* ************************************************************************** */
/* Task Display Styles */
.taskList {
    margin: 4px;
    border-collapse: collapse;
}
.taskList td {
    border: solid 1px #000000;
    word-wrap: break-word;
}
.task-overdue { background-color: #ff9999; }
.task-open { background-color: #ffffff; }
.task-closed { background-color: #dcdcdc; }
.taskList .no-border {
    border: none;
}

/* ************************************************************************** */
/* Recall Display Styles */
.recallList {
    margin: 4px;
    border-collapse: collapse;
    text-align: center;
    font-size: 75%;
}
.recallList td {
    border: solid 1px #000000;
}
.recallList th {
    padding-left: 3px;
    padding-right: 3px;
}
.recallList .ui-state-highlight, .recallList table td {
    border: none;
}
.distributionCell {
    height: 42px;
}
.completed, .completed input, .completed select {
    color: #888;
}
.verticaltext {
    font:bold 10px Tahoma;
    color: #0000FF;    
    writing-mode: tb-rl;
    filter: fliph flipv;
}
.css-vertical-text {
    font:bold 10px Tahoma;
    font-weight:bold;
	-webkit-transform:rotate(270deg);
	transform:rotate(270deg);
	white-space:nowrap;
	display:block;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-lr;
	bottom:0;
	left:0;
	vertical-align:top;
	width:20px;
	height:20px;	
    filter: flipv fliph;	
}

/* ************************************************************************** */
/* Damage Assessment Display Styles */
.attachment {
    position: relative;
    margin: 3px;
    padding: 4px;
    background-color: #d0d0d0;
    min-height: 100px;
}
.attachment div.file {
    padding: 0 30px 0 110px;
    white-space: nowrap;
    overflow: hidden;
}
.attachment div.description {
    padding: 4px 0 0 110px;
    width: 450px;
    min-height: 60px;
    word-wrap: break-word;
}
.attachment div.description a {
    text-decoration: none;
}
.attachment div.description a:hover {
    border-bottom: 1px dashed #0088cc;
}
.attachment div.description textarea {
    width: 100%;
}
.attachment div.contributor {
    padding: 0 0 0 110px;
    font-size: 12px;
    font-style: italic;
}
.attachment div.thumbnail {
    position: absolute;
    top: 4px;
    left: 4px;
}
.attachment div.controls {
    position: absolute;
    top: 5px;
    right: 5px;
}
.attachmentCollection {
    background-color: #444;
    border-top: solid 1px #dfd9c3;
}
.attachmentCollection div.thumbnail {
    display: inline-block;
    margin: 2px;
    height: 100px;
    width: 100px;
}

/* ************************************************************************** */
/* Call Log Display Styles */
div#requestWindow {
    position: relative;
}
div.requestList {
    font: normal normal normal 12px Segoe UI, Arial, Sans-Serif;
    cursor: default;
}
div.requestList hr { margin: 2px 0; }
div.requestList .requestItem:hover, div#divAddRequest:hover { background-color: #cccccc; }
div.requestList .requestItemHighlight { background-color: #fffa90; }
div.requestList .requester, div.requestList .referredTo, div.requestList .date, div.requestList .user, div.requestList .reviewedBy, div.requestList .status, div.requestEdit .label, div.requestEdit .value {
	display: inline-block;
    zoom: 1;
    *display: inline;
    overflow: hidden;
}
div.requestList .requester {
    width: 220px;
    font-weight: bold;
}
div.requestList .status { width: 100px; }
div.requestList .referredTo { width: 200px; }
div.requestList .date { width: 112px; }
div.requestList .user { width: 150px; }
div.requestList .reviewedBy { width: 150px; }
div#requestListContent {
    overflow: auto;
}
div.requestEdit {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
div.requestEdit > div.ui-state-active {
    height: 235px;
    overflow-x: hidden;
    overflow-y: auto;
}
div.requestEdit .label {
    width: 150px;
    padding-left: 6px;
}
div#divAddRequest {
    width: 100%;
    margin: 3px 0 6px 0;
    font-size: 14pt;
}

/* ************************************************************************** */
/* Check-In / Check-Out Display Styles */
div.checkInList {
    font: normal normal normal 12px Segoe UI, Arial, Sans-Serif;
    cursor: default;
}
div.checkInItem > div, #checkInListHeader .fill > div {
	display: inline-block;
    zoom: 1;
    *display: inline;
    overflow: hidden;
}
div#requestListContent .checkInItem:nth-child(even) { background-color: #eeeeee; }
div.checkInList div { vertical-align: top; }
div.checkInList .check-in {
    width: 124px;
    padding-left: 3px;
}
div.checkInList .check-out { width: 124px; }
div.checkInList .task { width: 28px; }
div.checkInList .personnel { width: 60px; }
div.checkInList .resource { width: 200px; }
div.checkInList .phone { width: 100px; }
div.checkInList .email { width: 200px; }
div.checkInList .radio { width: 40px; }
div.checkInList .equipment { width: 200px; }
div#divAddCheckIn {
    width: 100%;
    margin: 3px 0 6px 0;
    font-size: 14pt;
}
div#divAddCheckIn:hover { background-color: #aaaaaa; }
div.requestEdit .sectionHeader {
    padding-top: 5px;
    font-size: 14pt;
    color: #666666;
}