/* DOM Elements ****************************************************************************************************/

* { margin: 0; padding: 0; border: 0; outline: 0; z-index: 1; }
body { font-family: "Roboto"; font-style: normal; font-weight: normal; text-align: left; clear: both; }

table { border-collapse: separate; border-spacing: 0; width: 100%; }

h1 { font-size: 18px; line-height: 25px; height: 25px; text-align: center; vertical-align: middle; padding: 0px 26px 0px 13px; text-transform: uppercase; }
h2 { font-size: 35px; line-height: 40px; font-weight: bold; vertical-align: top; }

/*Removes border radius from mobile devices*/
input, textarea, select, option { font-family: "Roboto";  -webkit-border-radius: 0px;  }

input[type="button"], input[type="submit"] { cursor: pointer; }

.check-area input[type="checkbox"] { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; -webkit-appearance: checkbox; box-sizing: border-box; }
.check-area input[type="checkbox"] ~ label:nth-child(n) { padding-left: 20px; height: 15px; display: inline-block; line-height: 15px; background-repeat: no-repeat; background-position: 0 0; font-size: 15px; vertical-align: middle; cursor: pointer; background-image: url('/Content/images/UI/checkbox_off_black.png'); }
.check-area input[type="checkbox"]:checked ~ label:nth-child(n) { background-image: url('/Content/images/UI/checkbox_on_black.png'); }

img { -ms-interpolation-mode: bicubic; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
	 select { height: 1px; font-family: Arial;} 
     
}

/* Active Elements ****************************************************************************************************/

a.black, a.black:link, a.black:visited, a.black:active { color: black; cursor: pointer; text-decoration: none; }
a.black:focus, :focus { outline: none; }
a.black:hover { color: #666; text-decoration: none; }

a.red, a.red:link, a.red:visited, a.red:active { color: red; cursor: pointer; text-decoration: underline; }
a.red:focus, :focus { outline: none; }
a.red:hover { color: red; text-decoration: underline; }

a.marked::before { content: "\203A"; padding-right: 4px; font-size: 18px; line-height: 1em; margin-left:-10px; }

/* Class ****************************************************************************************************/

.pb8 { padding-bottom: 8px; }
.pb16 { padding-bottom: 16px; }
.pb18 { padding-bottom: 18px; }

.mb8 { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; }
.mb18 { margin-bottom: 18px; }

.bold { font-weight: bold; }
.left { float: left; }
.right { float: right; }
.center { margin: 0px auto; }

.highlight { background-color: #ddd; padding: 0px 3px; }
.selected { background-color: #ddd; }
.error { font-size:18px; color:red; width:100%; text-align:center; }
.message { font-size:18px; color:red; width:100%; text-align:center;  }
.login-error { width:640px; height:28px; line-height:28px; margin:0px auto; border-width:0px 1px 1px 1px; border-color:red; border-style:solid; }
.login-error li { text-decoration:none; list-style-type: none; }

.profile-error { width: 1028px; height:28px; line-height:28px; margin:0px auto; border-width:0px 1px 1px 1px; border-color:red; border-style:solid; }
.profile-error li { text-decoration:none; list-style-type: none; }

/* Box Model **************************************************************************************************/

.outer { position: relative; height: 100%; width: 100%; }
.inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.inner-head { position: absolute; top: 0; left: 0; right: 0; width: auto; }
.inner-offset { position: absolute; left: 0; right: 0; width: auto; }
.inner-body { position: absolute; left: 0; right: 0; bottom: 0; height: auto; width: auto; }

.box-head { height: 20px; margin: 16px; overflow: hidden; vertical-align: top; }
.box-title { font-size: 20px; font-weight: normal; height: 20px; line-height: 20px; text-transform: uppercase; vertical-align: top; }
.box-body { top: 52px; margin: 0px 16px 16px; overflow-y: auto; }
.box-body-offset { top: 88px; margin: 0px 16px 16px; overflow-y: auto; }

.box-head-span { font-size: 11px; line-height: 16px; padding: 1px 6px; margin-left: 16px; text-transform: uppercase; border: 1px solid black; }
.box-head-button { font-size: 11px; padding-left: 16px; }
.box-head-button input[type="button"] { height:20px; overflow:visible; line-height: 14px; padding: 1px 6px; text-transform: uppercase; border: 1px solid black; background-color: white; }
.box-head-button input[type="text"] { height: 18px; line-height: 18px; border: 1px solid black; padding: 0 6px; }
.box-head-button select { height: 20px; vertical-align: middle; text-transform: uppercase; border: 1px solid black; background-color:white;} 

#ClearButton { width: 20px; height: 20px; border-width: 1px 1px 1px 0; font-size: 11px; text-align: center; background-color: white; border-color: black; border-style: solid; }

/* Shared ****************************************************************************************************/

.container { position: relative; width: 100%; height: 100%; }
.container-header { height: 74px; overflow: hidden; z-index: 100; border-bottom: 1px solid black; }
.container-content { top: 75px; bottom: 0px; padding-bottom: 76px; }
.container-header, .container-content { position: absolute; width: 100%; min-width: 1070px; }
.container-static { width: 1030px; height: 645px; margin: 20px auto 0; position: relative; border: 1px solid black; }

.container-notifications { width: 450px; }
.notifications { margin: 20px 20px 0 0; border: 1px solid black; }
.notification-item { padding: 16px; border-bottom: 1px dashed black; cursor: pointer; }

header { vertical-align: middle; position: relative; width: 100%; height: 74px; }
header table { vertical-align: middle; position: relative; height: 74px; }

header .header-mid {  text-align: right; line-height: 74px; vertical-align:middle; }
header .header-mid h1 { width:140px; height:34px; line-height:34px; font-weight: bold; font-size: 30px;  text-transform: none; display:inline-block; }
header .header-mid h1 a:hover { color: black; }
header .header-right { width: 200px; text-align: center; border-left: 1px solid black; }
header .header-user { font-size: 16px; }
header .header-user-label { font-size: 10px; color: #666; }
header .dfi-logo img { height: 74px; }
header .dfi-logo { display: inline-block; width: auto; height: 74px; }
header .dfi-logo:hover { cursor: pointer; }

header nav ul { width: 100%; height: 74px; }
header nav li:first-of-type { margin: 0px; }
header nav li { list-style-type: none; display: inline-block; vertical-align: top; margin-top: 20px; }
header nav li { background-image: url('/Content/images/UI/nav_slash_BLACK.png'); background-position: right center; background-repeat: no-repeat; }
header nav li:nth-of-type(2) h1 { padding-left: 0px !important; }
header nav li:first-of-type, header nav li:last-of-type { background-image: none; }

.box-button { font-size: 14px; }
.box-button input[type="button"],
.box-button input[type="submit"] { line-height: 18px; padding: 1px 6px; text-transform: uppercase; border: 1px solid black; background-color: white; }
.box-button input[type="text"] { height: 22px; line-height: 22px; padding: 0 6px; border-color: black; border-style: solid; border-width: 0px 0px 1px 0px; }
.box-button select { height: 24px; line-height: 24px; vertical-align: middle; text-transform: uppercase; border: 1px solid black; }

.box-link { font-size: 14px; line-height: 18px; padding: 1px 6px; text-transform: uppercase; border: 1px solid black; background-color: white; margin-top : 5px;}
.box-link a { text-decoration : none; text-decoration-color: black ; }

#SearchBox { width: 130px; }
#SearchButton { width: 72px; }

/* Layout ****************************************************************************************************/

#LoginView { width: 640px; height: 390px; border: 1px solid black; margin: 25px auto 0px; }
#LoginView .container-title { height: 50px; margin: 63px 50px 28px; vertical-align: middle; }
#LoginView .title { font-size: 45px; font-weight: bold; line-height: 50px; vertical-align: middle; }
#LoginView .container-title img { float: right; }
#LoginView input[type="text"], #LoginView input[type="password"] { width: 540px; height: 50px; line-height:50px; border: 1px solid black; margin: 0px 50px 25px; color: #969696; font-size: 22px; text-indent: 16px; }
#LoginView input[type="submit"] { width: 160px; height: 48px; border: 1px solid black; font-size: 22px; background-color: transparent; float: right; }
#LoginView label { font-size: 14px; }
#LoginView .options { width: 540px; height: 50px; margin: 0px 50px; }

#ChangePasswordView { width: 640px; height: 440px; border: 1px solid black; margin: 25px auto 0px; }
#ChangePasswordView .container-title { height: 50px; margin: 63px 50px 28px; vertical-align: middle; }
#ChangePasswordView .title { font-size: 45px; font-weight: bold; line-height: 50px; vertical-align: middle; }
#ChangePasswordView .container-title img { float: right; }
#ChangePasswordView input[type="text"], #ChangePasswordView input[type="password"] { width: 540px; height: 50px; line-height:50px; border: 1px solid black; margin: 0px 50px 25px; color: #969696; font-size: 22px; text-indent: 16px; }
#ChangePasswordView input[type="submit"] { width: 160px; height: 48px; border: 1px solid black; font-size: 22px; background-color: transparent; float: right; }
#ChangePasswordView label { font-size: 14px; }
#ChangePasswordView .options { width: 540px; height: 50px; margin: 0px 50px; }


#StandardView { width: 640px; height: 390px; border: 2px solid black; margin: 15px auto 0px; }
#StandardView .container-title { height: 50px; margin: 30px 30px 30px; vertical-align: middle; }
#StandardView .title { font-size: 45px; font-weight: bold; line-height: 50px; vertical-align: middle; }
#StandardView .container-title img { float: right; }
#StandardView label { font-size: 14px; }
#StandardView a{color:black; text-decoration : none; text-decoration-color: black; font-size: 30px; font-weight: bold; line-height: 30px; padding: 7px 20px; text-transform: uppercase; border: 1px solid black; background-color: white; }
#StandardView a:visited {color: black;}
#StandardView .stdbuttondiv {margin-top: 45px; text-align:center; }

.blackbackground 
{
    background-color: black;
}

.field-validation-error 
{
    color: red;
}


#MainView { width: 100%; height: 100%; min-width: 1020px; min-height: 693px; }
#MainView td { height: 100%; }
#MainView .feed { margin: 20px 20px 0; border: 1px solid black; overflow: hidden !important; }
#MainView .header-feed { height: 20px; margin: 16px; overflow: hidden; vertical-align: top; }
#MainView #ContainerAspect { bottom: 0; left: 0; right: 0; margin: 0 16px 16px; position: absolute; text-align: center; top: 52px; }
#MainView #Aspect { border: 1px solid black; overflow: hidden !important; margin: 0px auto; }
#MainView .inner-body { border: 1px solid black; }

#LibraryView { width: 100%; height: 100%; min-width: 1070px; min-height: 693px; }
#LibraryView .container-library, #LibraryView .container-notifications { height: 100%; }
#LibraryView .library { margin: 20px 20px 0; border: 1px solid black; overflow: hidden !important; }
#LibraryView select { padding-left: 6px; width: 150px; }
#LibraryView option { padding-left: 6px; }
#LibraryView .inner-body { border: 1px solid black; }

#DocumentListView { width: 100%; }
#DocumentListView th { font-size: 12px; font-weight: normal; text-align: left; border-bottom: 1px solid black; }
#DocumentListView tr:first-of-type { height: 20px; text-align: left; }
#DocumentListView td, #DocumentListView th { padding: 0px 16px; }
#DocumentListView td { border-bottom: 1px dashed black; height: 35px; line-height: 28px; vertical-align: middle; cursor: pointer; }

#ProfileView .info { width: 728px; height: 575px; margin-right: 16px; overflow: auto; position: absolute; top: 0; bottom: 0; left: 0; border: 1px solid black; }
#ProfileView .list { right: 0; top: 0; bottom: 0; left: 746px; overflow-y: auto; overflow-x: hidden; position: absolute; border: 1px solid black; }
#ProfileView .list tr { width: 100%; }
#ProfileView .list td { min-height: 40px; height: 40px; font-size: 14px; vertical-align: middle; padding: 0px 8px; border-bottom: 1px dashed black; cursor: pointer; }

#ContactsView .info { width: 728px; height: 575px; margin-right: 16px; overflow: auto; position: absolute; top: 0; bottom: 0; left: 0; border: 1px solid black; }
#ContactsView .list { right: 0; top: 0; bottom: 0; left: 746px; overflow-y: auto; overflow-x: hidden; position: absolute; border: 1px solid black; }
#ContactsView .contact-item { width: 100%; min-height: 70px; cursor: pointer; }
#ContactsView .contact-item td:first-of-type { width: 70px; }
#ContactsView .contact-item td { border-bottom: 1px dashed black; }
#ContactsView .contact-thumb { width: 46px; height: 46px; border: 1px solid black; vertical-align: middle; margin: 11px; }
#ContactsView .contact-text { font-size: 14px; white-space: nowrap; }
#ContactsView .subtext { font-size: 10px; }

#ContactItemView,
#LocationItemView { width: 582px; height: 479px; margin: 48px 98px 48px 48px; }
#EmployeeInfoView,
#EditEmployeeView { width: 656px; height: 551px; margin: 24px 48px 0px 24px; }

#ContactItemView table { width: auto !important; }
#ContactItemView table td { vertical-align: top; }
#ContactItemView .picture, #ContactItemView .details { height: 100%; vertical-align: top; }
#ContactItemView .picture { width: 202px; border-right: 1px solid black; padding-right: 24px; }
#ContactItemView .picture img { width: 200px; height: 200px; }
#ContactItemView .details { padding-left: 24px; }
#ContactItemView .phone td { padding-bottom: 8px; }
#ContactItemView .details table td:first-of-type { color: #666; text-align: right; padding-right: 8px; }
#ContactItemView .name { padding-bottom: 18px; }
#ContactItemView .title td { padding-bottom: 8px; }
#ContactItemView .email td { padding-bottom: 16px; }

#LocationItemView .picture { height: 202px; padding-bottom: 24px; }
#LocationItemView .picture img { width: 580px; height: 200px; border: 1px solid black; }
#LocationItemView .space { width: 226px; border-right: 1px solid black; }
#LocationItemView .details { padding-left: 24px; vertical-align: top; }
#LocationItemView .details div:first-of-type { margin-bottom: 16px; font-size: 40px; }
#LocationItemView .details div { margin-bottom: 8px; }

#EmployeeInfoView .info-label { width: 75px; }
#EmployeeInfoView .info-label, #EditEmployeeView .info-label { color: #666; text-align: right; padding-left: 16px; }
#EmployeeInfoView th, #EditEmployeeView th { text-align: left; }
#EmployeeInfoView td, #EditEmployeeView td { vertical-align: top; }
#EmployeeInfoView tr td:first-of-type, #EditEmployeeView tr td:first-of-type { padding-right: 8px; }
#EmployeeInfoView .address, #EditEmployeeView .address { padding-left: 16px; }

#EditEmployeeView .info-label { width: 90px; }
#EditEmployeeView .contacts { border-collapse: collapse; }
#EditEmployeeView .contacts td { border: 1px solid black; }
#EditEmployeeView .box-button input[type="text"] { width: 300px; }

#SafetyInfoView th { font-size: 12px; font-weight: normal; text-align: left; border-bottom: 1px solid black; padding: 0px 16px; }
#SafetyInfoView tr:first-of-type { height: 20px; text-align: left; }
#SafetyInfoView td { padding:4px 16px; border-bottom: 1px dashed black; height: 35px; line-height: 28px; vertical-align: middle; }