/** \file html\css\framework.css
 *  \brief ZKL webinterface framework stylesheet
 *  \author Rob Schalken, Core|Vision
 *  \version $Revision: 26458 $
 *  \date $Date: 2016-03-21 14:36:35 +0100 (Mon, 21 Mar 2016) $
 *
 * This file contains the framework stylesheet definitions.
 */

/*
 * Add webfonts
 */
@font-face {font-family:'ITCOfficinaSansStdBold'; src:url("../fonts/officinasansstd-bold-webfont.eot");
                                                  src:url("../fonts/officinasansstd-bold-webfont.eot?#iefix") format('embedded-opentype'),
                                                      url("../fonts/officinasansstd-bold-webfont.woff") format('woff'),
                                                      url("../fonts/officinasansstd-bold-webfont.ttf") format('truetype');
                                                font-weight: normal; font-style:normal; }
@font-face { font-family:'ITCOfficinaSerifStdBook'; src:url("../fonts/officinaserifstd-book-webfont.eot");
                                                    src:url("../fonts/officinaserifstd-book-webfont.eot?#iefix") format('embedded-opentype'),
                                                        url("../fonts/officinaserifstd-book-webfont.woff") format('woff'),
                                                        url("../fonts/officinaserifstd-book-webfont.ttf") format('truetype');
                                                font-weight:normal; font-style:normal;}

* {
  font-family       : Arial, Helvetica, sans-serif;
  font-size         : 12px;
  color             : #000000;
}

img {
  border            : 0;
  border-style      : none;
}

html, body, div, p, form, input, button, ul, ol, dl, dt, dd, li, h1, h2, h3, h4, h5, h6 {
  margin            : 0;
  padding           : 0;
}

body {
}

table  {
  padding           : 0;
  margin            : 0px 0px 0px -3px;
}

h1, p, input, ul, ol {
  margin-bottom     : 1em;
}

h2, h3, h4, h5, h6 {
  margin-bottom     : 0.7em;
}

input[type=text], input[type=password] {
  width             : 250px;
  border-radius     : 2px 2px 2px 2px;
}

select {
  width             : 252px;
  margin-bottom     : 10px;
  border-radius     : 2px 2px 2px 2px;
}

input[type=text]:focus, input[type=password]:focus,textarea:focus,select:focus {
  background-color   : #f3dfd3;
}

input[type=text]:disabled,input[type=password]:disabled,textarea:disabled,select:disabled {
  background-color   : #CCC8C0;
}

input[type=button] {
  border-style      : solid;
  border-color      : #ccc #666 #666 #ccc;
  border-width      : 1px 2px 2px 1px;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 2px 0 rgba(0, 0, 0, 0.4);
  padding           : 1px 1px;
  margin            : 1px 0px;
  text-align        : center;
  text-decoration   : none;
  background        : -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
}

input[type=button]:not([disabled]):hover {
  color             : #F28424;
  cursor            : pointer;
  background        : -webkit-linear-gradient(bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
}

input[type=button]:active {
  color             : #F28424;
  border-color      : #888 #ccc #ccc #888;
  border-width      : 2px 1px 1px 2px;
  cursor            : pointer;
}

input[type=button]:disabled {
	color             : gray;
}

textarea {
  border-radius     : 2px 2px 2px 2px;
}

h1 {
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-size         : 27px;
  padding-top       : 15px;
  margin-bottom     : 20px;
  font-weight       : normal;
  line-height       : normal;
}

h2 {
  font-size         : 18px;
  padding           : 4px 4px;
  color             : #F28424;
}

h3 {
  font-size         : 14px;
  padding           : 2px 0px 0px 0px;
  color             : #F28424;
}

ul, ol {
  margin-left       : 2em;
}

body {
  background: none repeat scroll 0 0 #EC6C0F;
}

a.href {
  cursor            : pointer;
}

.single_line {
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
}

.capitalize_first:first-letter {
	text-transform    : capitalize;
}

#di_header_image_background {
  background-color  : #d0d5d2;
  height            : 240px;  
}

#header_image {
  display           : block;
  height            : 240px;
  width             : 100%;
  border-bottom     : 2px solid #F28424;
  min-width         : 1000px;
}


#header_content {
  background        : white;
  min-width         : 1000px;
  overflow          : hidden;
}

#di_header_logo {
  padding-top       : 22px;
  padding-bottom    : 34px;
  height            : 39px;
  width             : 980px;
  margin-left       : auto;
  margin-right      : auto;
  position          : relative;
}

#heartbeat {
  display           : inline-block;
  padding-left      : 10px;
}

#version_info {
  display           : inline-block;
  padding-right     : 10px;
  padding-left      : 10px;
  font-size         : 14px;
  color             : #000000;
  border-right      : 1px solid #000000;
}

#project_name {
  position          : absolute;
  font-size         : 28px;
  font-weight       : bold;
  color             : #009ef0;
  width             : 100%;
  top               : 185px;
  text-align        : center;
  z-index           : 10;
}

#print_page,
#screen_mode {
  position          : absolute;
  right             : 64px;
  top               : 45px;
}

#refresh_page {
  position          : absolute;
  right             : 30px;
  top               : 44px;
}

#header_shortcuts {
  position          : absolute;
  right             : 0px;
  top               : 10px;
}

#header_shortcuts_rc {
  position          : absolute;
  right             : 0px;
  top               : 10px; 
}

#header_shortcuts_rc a,
#header_shortcuts a {
  text-decoration   : none;
  padding-right     : 10px;
  padding-left      : 10px;
  font-size         : 14px;
  color             : #000000;
  border-right      : 1px solid #000000;
}

#header_shortcuts a:hover {
  color             : #F28424;
}

#di_header_menu {
  position          : relative;
  top               : 0px;
  height            : 55px;
  width             : 100%;
  min-width         : 1000px;
  background        : url("../images/di_menu.gif") repeat-x #fff;
}

#menu_items_login,
#menu_items {
  position          : relative;
  width             : 980px;
  height            : 55px;
  margin-left       : auto;
  margin-right      : auto;
}

.menu_item_login,
.menu_item {
  position          : absolute;
  top               : 0px;
  width             : 196px;
  height            : 55px;
  margin-left       : auto;
  margin-right      : auto;
}

.menu_item_login a,
.menu_item a {
  position          : absolute;
  font-family       : 'ITCOfficinaSansStdBold', Arial, Helvetica, sans-serif;
  top               : 0px;
  left              : 3px;    /* .menu_seperator width */
  text-decoration   : none;
  line-height       : 55px;
  text-align        : center;
  width             : 191px!important;  /* .menu_item width - .menu_seperator width - 1 */
  font-size         : 24px;
  color             : #57585A;
}

.menu_item_login a:hover,
.menu_item a:hover {
  color             : #F28424;
}

.menu_item_nolink_login,
.menu_item_nolink {
  position          : absolute;
  font-family       : 'ITCOfficinaSansStdBold', Arial, Helvetica, sans-serif;
  top               : 0px;
  left              : 3px;    /* .menu_seperator width */
  text-decoration   : none;
  line-height       : 55px;
  text-align        : center;
  width             : 196px;  /* .menu_item width - .menu_seperator width - 1 */
  font-size         : 24px;
  color             : #D1D1D1;
}

/*
 * Login header exception
 */
.menu_item_login {
  margin-left      : 645px!important;    /* overrule left defined in DefineButton function! */
}

.menu_item_nolink_login {
  width             : 335px!important;
  color             : #57585A!important;
}

.menu_seperator {
  height            : 18px;
  width             : 3px;
  padding           : 20px 0 17px 0;
}

#content {
  padding           : 25px 20px;
  line-height       : 17px;
}

#content_table {
  margin-left       : auto;
  margin-right      : auto;
  width             : 980px;
}

/* main window */
#content_table_col0 {
  width             : 734px;
  vertical-align    : top;
}

div #content_table_col0 {
  display           : block;
}

/* menu structure etc */
#content_table_col1 {
  width             : 216px;
  vertical-align    : top;
}

div #content_table_col1 {
  display           : block;
  float             : right;
  margin-right      : 20px;
}

#content_table_col2 {
  width             : 0px;
  vertical-align    : top;
}

#motd {
  width             : 100%;
  height            : 18px;
  background        : #F28424;
  border-top        : 1px solid #F28424;
  font-weight       : bold;
}

#motd_no_msg {
  width             : 100%;
  height            : 18px;
  border-top        : 1px solid #F28424;
  line-height       : 15px;
  font-weight       : bold;
}

#motd_col0, #motd_col0 a {
  color             : white;
  width             : 100%;
}

#footer_container * {
  font-size         : 14px;
}

#footer_container {
  position          : relative;
  min-height        : 40px;
  width             : 100%;
  min-width         : 1000px;
  overflow          : hidden;
  background        : url("../images/di_general_bg.gif") repeat-x scroll left top transparent;
}

#footer {
  margin            : 0 auto;
  position          : relative;
  width             : 980px;
}

#footer * {
  color             : #FFFFFF;
  text-decoration   : none;
}

#footer .block {
  float             : left;
  height            : 170px;
  padding-right     : 15px;
  padding-top       : 25px;
  width             : 230px;
  line-height       : 23px;
}


#footer .block h3,
#footer .block h3 a {
  background        : url("../images/di_footer_h3_bg.png") repeat-x left bottom transparent;
  font-size         : 20px;
  margin-bottom     : 10px;
  padding-bottom    : 10px;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-weight       : normal;
  margin-top        : 0;
  text-decoration   : none;
  line-height       : normal;
}

.header_button,
.footer_button,
#header_button,
#footer_button  {
  background        : #00A1FD;
  background        : -webkit-linear-gradient(center top , #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(center top , #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  border            : 0 none;
  border-radius     : 3px 3px 3px 3px;
  box-shadow        : 0 0 4px 0 rgba(0, 0, 0, 0.4);
  color             : #FFFFFF;
  display           : inline-block;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-size         : 20px;
  padding           : 7px 12px;
  line-height       : 23px;
  text-decoration   : none;
  cursor            : pointer;
}

.footer_button,
#footer_button  {
  margin-top        : 12px;
}

input.footer_button[type=button]:hover,
.form_table button.footer_button:hover,
#footer_button:hover {
  background        : #007AC1;
  background        : -webkit-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  text-decoration   : none;
}

.footer_container #foot_button a.href {
  border: 1px solid red;
}

#footer_email_input  {
  background        : none repeat scroll 0 0 #ED630F;
  border            : 0 none;
  border-radius     : 3px 3px 3px 3px;
  box-shadow        : 0 0 4px 0 rgba(0, 0, 0, 0.4);
  color             : #FAD8C3;
  display           : inline-block;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-size         : 20px;
  padding           : 7px 12px;
  margin            : 0 3px 5px;
  max-width         : 100%;
  outline           : medium none;
  vertical-align    : baseline;
  width             : 150px;
}

#twit-bird {
  position          : absolute;
  top               : 25px;
  right             : 14px;
}

.social_media_icons {
  margin-right      : 3px;
  margin-top        : 17px;
}

.container-tweet {
  background        : url("../images/twitter-block.png") no-repeat scroll left top transparent;
  height            : 46px;
  margin-bottom     : 6px;
  padding           : 15px 10px 10px;
  width             : 227px;
  font-family       : Arial, Helvetica, sans-serif;
  font-size         : 14px;
  line-height       : 23px;
}

.tweet {
  height            : 46px;
  overflow          : hidden;
  width             : 227px;
  margin-top        : -63px;
  margin-left       : 8px;
}

.tweet ul {
  list-style        : none outside none;
  margin            : 0;
  padding           : 0;
}

.tweet ul, ol {
  margin            : 1em 0;
}

.tweet ul li a {
  font-size         : 11px!important;
}

.tweet ul li {
  color             : #FFFFFF;
  font-size         : 11px!important;
  height            : 46px;
  line-height       : 15px;
  overflow          : hidden;
}

.tweet ul li a:hover {
  text-decoration   : underline!important;
}

.menu {
  padding           : 0px 0px 1px 0px;
  background        : url("../images/pattern.png") repeat scroll 0 0 transparent;
}

#menu_struct li *,
#login_info li *,
#menu_shortcut li * {
  font-size         : 14px;
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
}

#login_info h1,
#menu_struct h1,
#menu_shortcut h1 {
  text-align        : left;
  padding-left      : 20px;
  font-size         : 25px;
}

#menu_struct h1,
#menu_shortcut h1,
#login_info h1 {
  color             : #F28424;
}

#menu_border {
  background        : none repeat scroll 0 0 #FFFFFF;
  border            : 2px solid #EEEEEE;
  margin-bottom     : 20px;
  padding           : 8px;
}

.menu a, .menu span {
  display           : block;
  padding           : 0px;
  text-decoration   : none;
}

.menu a {
  color             : #000000;
}

.menu span {
  color             : #000000;
}

.menu span.inactive {
  color             : #aaaaaa;
}

.menu span.current {
  color             : gray;
}

.menu a:hover {
  color             : #F28424;
}

.menu li {
  color             : #cccccc;
  padding-top       : 2px;
  padding-bottom    : 4px;
  margin            : 1px;
  margin-top        : -1px;
  height            : 15px;
}

.menu li.seperator {
  height            : 2px;
  background        : url("../images/di_history_menu_seperator.gif") repeat-x;
}

.menu ul {
  list-style        : none;
}

/*
 * Login page
 */
#table_login_errormsg {
  width             : 100%;
}

#login_errormsg {
  width             : 375px;
  margin-left       : 38%;
  margin-right      : auto;
  margin-bottom     : 10px;
  height            : 50px;
  text-align        : center;
  background        : #dcdcdc;
}

#table_login_text input {
  width             : 200px;
}

#table_login_text,
#table_login_agree,
#table_login_button {
  width             : 100%;
}

#login_button {
  width             : 100px;
  height            : 35px;
}

#row_login_button {
  width             : 57%;
}

#row_login_agree {
  width             : 50%;
}

#row_login_agree_checkbox {
  width             : 2%;
}

#row_login_text {
  width             : 50%;
}

/*
 * Menu customer/user/project info/new/change/delete page
 */
table.form_table {
  width             : 100%;
  table-layout      : auto;
  border-spacing    : 0;
  border-collapse   : collapse;
}

.form_table p {
  margin-bottom     : 1em;
}

.form_table input, .form_table ul, .form_table ol {
  margin-bottom     : 0px;
}

.form_table tr select {
  vertical-align    : top;
}

.form_table select {
  width             : 304px;
}

.form_table #col0 {
	/* fixed filler */
  width             : 30px;
  min-width         : 30px;
  max-width         : 30px;
}

.form_table #col1 {
	/* titles and captions */
  width             : 172px;
  min-width         : 172px;
  max-width         : 172px;
  text-align        : left;
}

.form_table #col2 {
  /* user entry fields */
  width             : 532px;
  max-width         : 532px;
  min-width         : 450px;
  text-align        : left;
  padding-bottom    : 1em;
}

.form_table #col3 {
	/* filler column */
	width             : auto;
}

.form_table input[type=text], .form_table input[type=password] {
  width             : 300px;
}

.form_table a {
  text-decoration   : none;
}

.form_table a:hover {
  color             : #F28424;
  text-decoration   : none;
}

.form_table #col2 .checkbox_element {  
  margin-bottom     : 0.5em;
  margin-top        : 0.5em;
}

.form_table label {
  cursor            : pointer;
  max-width         : 300px;
  white-space       : nowrap;
  text-overflow     : ellipsis;
  overflow          : hidden;
}

.form_table input[type=checkbox], .form_table input[type=radio] {
  margin-bottom     : 0px;
  vertical-align    : middle;
  width             : 15px;
}

.form_table input[type=checkbox]:first-letter, .form_table input[type=radio]:first-letter {
  text-transform    : capitalize;
}

.form_table h2 {
  font-size         : 12px;
  padding           : 4px 0px;
  margin-top        : 0.7em;
}

.form_table #col2 h1 {
  /* already getting a margin from the 'tr' style */
  margin-bottom     : 0.3em;
  white-space       : nowrap;
  text-overflow     : ellipsis;
  overflow          : hidden;
}

.form_table #col2 h2, .form_table #col2 h3 {
  /* already getting a margin from the 'tr' style */
  margin-bottom     : 0em;
  width             : 100%;
  white-space       : nowrap;
  text-overflow     : ellipsis;
  overflow          : hidden;
}

.form_table #col2 h2 {
  /* already getting a margin from the 'tr' style */
  background        : white;
  background        : -webkit-linear-gradient(bottom right, white 0%, #f0f8ff 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(bottom right, white 0%, #f0f8ff 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom left, white 0%, #f0f8ff 100%) repeat scroll 0 0 transparent;
}

.form_table #col2 img.icon_left {
  padding-right     : 4px;
  vertical-align    : middle;
}

.form_table h3 {
  font-weight       : normal;
  padding           : 0px;
  font-size         : 12px;
}

.form_table td#col2.save_buttons {
  width             : 100%;
  text-align        : center;
  padding           : 2em 0px 1em 0px;
}

.form_table td#col2.save_buttons input[type=button] {
  margin-right      : 4px;
}

.form_table table.checkbox_table {
  width             : 97%;
  table-layout      : fixed;
  border-style      : solid;
  border-width      : 1px;
  margin-left       : 0px;
  padding           : 4px 4px 0.5em 4px;
}

.form_table .checkbox_table tr {
  border-style      : none;
}

.form_table .checkbox_table p {
  margin-bottom     : 0px;
  text-align        : left;
}

.form_table #col2 .checkbox_table h2, .form_table #col2 .checkbox_table h3 {
  background        : white;
}

.form_table .checkbox_table label {
  font-size         : 12px;
  padding           : 4px 0px;
  margin-top        : 0.7em;
}

.form_table td {
  vertical-align    : top;
}

.form_table textarea {  
  width             : 300px;  
}

.form_table #table_select {
  width             : 304px;  
}

.form_table #table_input {
  width             : 303px;
}  

.form_table select.column {
  width             : 128px;
}

.form_table div.column {
  width             : 39px;
  margin-left       : 4px;
  margin-right      : 4px;
  display           : inline-block;
  text-align        : center;
}

div.dropdown {
  display: inline;
}
 
.form_table .dropdown input[type=text]#value_display {
  /* expand/collapse button is 20px wide */
  width             : 280px;
  margin-right      : 0px;
  cursor            : pointer;
  /* the next two lines are a hack to hide the caret */
  /* NB: the caret has the same colour as the text, to if you make the
     text transparent, the caret will be transparent too; the shadow
     makes the text itself visible again, but not the caret */
  color             : transparent;
  text-shadow       : 0px 0px 0px black;
}
 
.form_table .dropdown input[type=text]#value_edit {
  /* expand/collapse button is 20px wide */
  width             : 272px;
  margin-right      : 8px;
}
 
.form_table .dropdown input[type=text].column#value_display,
.form_table table.range_select td .dropdown input[type=text]#value_display {
  /* expand/collapse button is 20px wide */
  width             : 100px;
}
 
.form_table table.truth_table td:nth-child(2).output .dropdown input[type=text]#value_display {
  /* truth table, 2 options */
  /* expand/collapse button is 20px wide */
  width             : 200px;
}
 
.form_table table.truth_table td:nth-child(3).output .dropdown input[type=text]#value_display {
  /* truth table, 4 options */
  /* expand/collapse button is 20px wide */
  width             : 124px;
}
 
.form_table .dropdown input[type=text].column#value_edit,
.form_table table.range_select td .dropdown input[type=text]#value_edit {
  /* expand/collapse button is 20px wide */
  width             : 96px;
  margin-right      : 4px;
}

.dropdown input[type=text].disabled#value_edit,
.dropdown input[type=text].disabled#value_display {
  background        : #CCC8C0;
  cursor            : default;
  width             : 300px;
  margin-right      : 0px;
}

.form_table table.range_select td .dropdown input[type=text].disabled#value_display,
.form_table table.range_select td .dropdown input[type=text].disabled#value_edit {
  width             : 128px;
}
 
.form_table table.truth_table td:nth-child(2).output .dropdown input[type=text].disabled#value_display,
.form_table table.truth_table td:nth-child(2).output .dropdown input[type=text].disabled#value_edit {
  width             : 220px;
}
 
.form_table table.truth_table td:nth-child(3).output .dropdown input[type=text].disabled#value_display,
.form_table table.truth_table td:nth-child(3).output .dropdown input[type=text].disabled#value_edit {
  width             : 142px;
}

.dropdown img {
  cursor            : pointer;
  vertical-align    : top;
  margin-top        : -1px;
}

.dropdown img.disabled {
  cursor            : default;
  display           : none;
}

.listbox_div {
  border-top        : 2px solid #888;
  border-left       : 2px solid #888;
  border-right      : 2px solid #EEE;
  border-bottom     : 2px solid #EEE;
  border-radius     : 2px 2px 2px 2px;
  margin            : 0px;
  padding           : 0px;
  overflow-x        : hidden;
  overflow-y        : auto;
}

.dropdown .listbox_div {
  border-top        : 2px solid #888;
  border-left       : 2px solid #888;
  border-right      : none; /* via box-shadow; 2px solid #EEE; */
  border-bottom     : none; /* via box-shadow; 2px solid #EEE; */
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
  margin            : 0px;
  padding           : 0px;
  overflow-x        : hidden;
  overflow-y        : auto;
  -ms-user-select   : none;
  -webkit-user-select: none;
  -moz-user-select  : none;
  user-select       : none;
}

.form_table .listbox_div {
  width             : 302px;
}

.form_table table.range_select td .listbox_div {
  width             : 128px;
}

.listbox_div ul {
  list-style        : none inside none;
  margin            : 0px;
  padding           : 0px;
  background-color  : white;
}

.listbox_div ul li {
  white-space       : nowrap;
  text-overflow     : ellipsis;
  overflow          : hidden;
  line-height       : 2.5ex;
  cursor            : pointer;
  display           : block;
  padding-left      : 2px;
  text-align        : left;
  -webkit-user-select: none;
  -moz-user-select  : none;
  user-select       : none;
}

.dropdown .listbox_div ul, .dropdown .listbox_div ul li,
.listbox_div ul.focus, .listbox_div ul.focus li {
  background-color   : #f3dfd3;
}

.listbox_div ul li.selected {
  color             : white !important;
  background        : #00a1fd;
  background        : -webkit-linear-gradient(left, rgba(0,161,253,1), rgba(0,124,195,1)) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(left, rgba(0,161,253,1), rgba(0,124,195,1)) repeat scroll 0 0 transparent;
  background        : linear-gradient(to right, rgba(0,161,253,1), rgba(0,124,195,1)) repeat scroll 0 0 transparent;
}

.listbox_div ul li.disabled {
  color             : black;
  background        : #ccc8c0;
  cursor            : default;
}

.listbox_div ul.disabled {
  color             : black;
  background        : #ccc8c0;
}

.listbox_div ul.disabled li {
  background        : #ccc8c0;
  cursor            : default;
}

.listbox_div ul.disabled li.selected {
  background        : #aaa8a0;
}

.listbox_div ul li:hover {
  color             : #666666;
}

.listbox_div ul.dragdrop_target {
  background        : #f0f8ff;
}

.listbox_div ul.dragdrop_target li {
  background        : #f0f8ff;
}

.listbox_div ul.dragdrop_source li.selected {
  color             : #666666 !important;
  background        : #d0ecfd;
  background        : -webkit-linear-gradient(left, rgba(0,161,253,0.1), rgba(0,124,195,0.33)) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(left, rgba(0,161,253,0.1), rgba(0,124,195,0.33)) repeat scroll 0 0 transparent;
  background        : linear-gradient(to right, rgba(0,161,253,0.1), rgba(0,124,195,0.33)) repeat scroll 0 0 transparent;
}

.form_table .date input[type=text] {
  /* calendar icon is 19px wide */
  width             : 280px;
  margin-right      : 1px;
}

.form_table .date input[type=text]:disabled {
  width             : 300px;
}

.form_table .datetime input[type=text] {
  /* date selection; icon is 19px wide, margin 4 px, time selection 100px */
  width             : 177px;
}

.form_table .datetime input[type=text]:disabled {
  /* date selection; icon is 19px wide, margin 4 px, time selection 100px */
  width             : 196px;
  margin-right      : 4px;
}

.form_table .datetime select {
  width             : 100px;
}

.form_table .datetime .dropdown input[type=text]#value_display {
  width             : 76px;
}

.form_table .datetime .dropdown input[type=text].disabled#value_display {
  width             : 96px;
}

.form_table .datetime .dropdown .listbox_div {
  width             : 96px;
  position          : relative;
  left              : 204px;
}

.form_table .daytime #time {
  width             : 100px;
}

.form_table .daytime #day{
  width             : 200px;
}

.form_table .daytime .dropdown#day input[type=text]#value_display {
  width             : 176px;
}

.form_table .daytime .dropdown#day input[type=text].disabled#value_display {
  width             : 196px;
}

.form_table .daytime .dropdown#day .listbox_div {
  width             : 196px;
}

.form_table .daytime .dropdown#time input[type=text]#value_display {
  width             : 76px;
}

.form_table .daytime .dropdown#time input[type=text].disabled#value_display {
  width             : 96px;
}

.form_table .daytime .dropdown#time .listbox_div {
  width             : 96px;
  position          : relative;
  left              : 204px;
}

.form_table .date img, .form_table .datetime img  {
  cursor            : pointer;
  vertical-align    : top;
}

.form_table ul.treeview {
  text-indent       : 19px;
  list-style-type   : none;             /* images ("bullets") are provided with img elements */
  margin            : 0px;
  padding           : 0px;
  max-width         : 323px;      /* 304px + 19px for the negative indent */
  margin-left       : -19px;
}

.form_table ul.treeview ul {
  list-style-type   : none;
  margin-top        : 0.3em;
  margin-bottom     : 0.3em;
  margin-left       : 19px;             /* image size plus img margin-right */
}

.form_table ul.treeview li {
  margin            : 0px;
  padding           : 0px;
  margin-bottom     : 0.3em;
}

.form_table ul.treeview li {
  white-space       : nowrap;
  text-overflow     : ellipsis;
  overflow          : hidden;
}

.form_table ul.treeview li img {
  vertical-align    : middle;
  margin-right      : 4px;
}

.form_table ul.treeview li img.button {
  cursor            : pointer;
}

ul.treeview li span.link:hover {
  color             : #F28424;
  cursor            : pointer;
}

.form_table div.file_open_button, .form_table div.inactive_button {
  display           : block;
  border-style      : solid;
  border-color      : #ccc #666 #666 #ccc;
  border-width      : 1px 2px 2px 1px;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 2px 0 rgba(0, 0, 0, 0.4);
  padding           : 4px 4px;
  margin            : 1px 0px;
  text-align        : center;
  text-decoration   : none;
  width             : 292px!important;
  background        : -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
}

.form_table div.file_open_button:hover {
  cursor            : pointer;
  background        : -webkit-linear-gradient(bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(bottom, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to top, #ffffff 0%, #dddddd 100%) repeat scroll 0 0 transparent;
}

.form_table div.file_open_button:active {
  border-color      : #888 #ccc #ccc #888;
  border-width      : 2px 1px 1px 2px;
  cursor            : pointer;
}

.form_table div td.button_text {
  vertical-align    : middle;
  text-align        : center;
  white-space       : nowrap;
  width             : 294px;            /* the actual width is less when there are buttons */
}

.form_table div td.button_text div {
  max-width         : 294px;
  overflow          : hidden;
}

.form_table a img {
  padding           : 0px;
  vertical-align    : baseline;
}

.form_table div.file_open_button a {
  text-decoration   : none;
}

.form_table div.file_open_button a div:hover {
  color             : #F28424;
  text-decoration   : none;
}

.form_table div.inactive_button div {
  color             : gray;
}

.form_table div td.action_button {
  vertical-align    : middle;
  width             : 0px;
}

.form_table div td.action_button div.action_button, img.action_button {
  padding           : 0px 0px 3px 0px;
}

.form_table div td.action_button div.action_button:hover, img.action_button:hover {
  padding           : 3px 0px 0px 0px;
  cursor            : pointer;
}

.form_table div td.action_button div.no_button {
  cursor            : default;
}

.form_table div.tiny_button, .form_table div.mobile_button {
  width             : 300px;
  display           : inline-block;
  text-align        : right;
  vertical-align    : top;
  border            : 0px;
  margin            : 0px 4px 0px 0px;
  padding           : 0px;
}

.form_table input.footer_button[type="button"],
.form_table button.footer_button {
  /* document upload button, based on the buttons in the footer */
  width             : 304px;
  margin-top        : 0px;
}

.form_table button.footer_button {
  /* extra padding needed for the button element */
  padding           : 8px 4px;
}

.form_table input.footer_button[type="button"]:disabled,
.form_table button.footer_button:disabled {
  color             : gray;
  background        : url("../images/di_sub_menu_button.gif") top left repeat-y #fff;
  cursor            : default;
}

.form_table #col2 div.button_div {
  width             : 304px;
}

.form_table #col2 div.button_div table {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

.form_table #col2 table {
  margin-top        : -3px;
}

div.button_div table {
  margin            : 0px;
  padding           : 0px;
}

div.button_div table td.button_text {
  margin            : 0px;
  padding           : 0px;
  width             : 100%;
}

div.foldable_div {
  min-height        : 20px;
  /* default background: collapsed */
  background        : url("../images/foldbutton_blue_collapsed.png") no-repeat right bottom;
}

div.foldable_div:hover {
  cursor            : pointer;
}

div#collapsed.foldable_div  {
  background        : url("../images/foldbutton_blue_collapsed.png") no-repeat right bottom;
}

div#expanded.foldable_div {
  background        : url("../images/foldbutton_blue_expanded.png") no-repeat right bottom;
}

.form_table div.foldable_div {
  width             : 304px;
}

.form_table div.foldable_div.scrollarea {
  width             : 350px;
}

.scrollable_div {
  max-height        : 32em;
  width             : 350px;
  overflow-y        : auto;
  overflow-x        : hidden;
  margin-bottom     : 0px;
  margin-top        : 4px;
}

.scrollable_div table {
  margin-left       :0px;
}

.scrollable_div #col0 {
  display           : none;
}

.scrollable_div #col1 {
  display           : none;
}

.scrollable_div #col2 {
  padding-bottom    : 0px;
}

.scrollable_div p {
  padding           : 0px;
  width             : 300px;
}

.form_table div.scrollable_div div.file_open_button {
  padding-bottom    : 0px;
}

div.embedded_table, div.simple, div.button_19px {
	overflow-y        : auto;
}

table.embedded_table, table.simple, table.range_select, table.button_19px, table.print_table {
  width             : 100%;
  table-layout      : fixed;
  border-spacing    : 0;
  border-collapse   : collapse;
  vertical-align    : baseline;
  margin-bottom     : 0px;
}

/* the "print_table" is a replacement for the previous select box */
table.print_table {
  border-top        : 2px solid #888;
  border-left       : 2px solid #888;
  border-right      : 2px solid #EEE;
  border-bottom     : 2px solid #EEE;
  border-radius     : 2px 2px 2px 2px;
  width             : 350px;
}

table.print_table td {
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
}

table.embedded_table th, table.embedded_table td {
  padding           : 2px 4px 2px 4px;
  border            : 1px solid black;
}

table.embedded_table table div.action_button {
	margin-top        : 1px;
}

table.embedded_table table td.action_button {
	border            : none;
	padding           : 0px;
}

.form_table table.embedded_table div td.action_button div.action_button, table.embedded_table img.action_button {
  padding           : 2px;
  margin-top        : 2px;
}

.form_table table.embedded_table div td.action_button div.action_button:hover, table.embedded_table img.action_button:hover {
  cursor            : pointer;
}

table.simple th, table.simple td, table.button_19px td {
  padding           : 2px 4px 2px 4px;
  border            : none;
}

/* table.simple should be kept simple and without a th */
table.embedded_table th, table.print_table th {
  background-color  : #cccccc;
  border            : 1px solid #cccccc;
  border-bottom     : 1px solid black;
  text-align        : center;
}

tr#row0 {
  background-color  : #ffffff;
}

tr#row1 {
  background-color  : #eeeeee;
}

table.embedded_table.valign_middle td {
  vertical-align    : middle;
}

table.button_19px td:nth-child(1) {
  /* first column; container for the button icon */
  text-align        : center;
  vertical-align    : top;
  width             : 19px;
  padding           : 4px 0px 0px 0px;
  margin            : 0px;
}

.form_table table.button_19px input[type=text],
.form_table table.button_19px input[type=password],
.form_table table.button_19px textarea {
  width             : 271px;
}

.form_table table.button_19px div td.button_text,
.form_table table.button_19px div td.button_text div {
  width             : 265px;
}

.form_table table.button_19px div.tiny_button,
.form_table table.button_19px div.mobile_button,
.form_table table.button_19px div.button_div {
  width             : 275px;
}

table.inbox {
	min-width         : 350px;
  border-spacing    : 0;
  border-collapse   : collapse;
  vertical-align    : baseline;
  margin-bottom     : 0px;
}

table.inbox td.date {
	padding           : 2px 0px;
  padding-top       : 0.7em;
  color             : #f28424;
}

table.inbox td.status {
  /* first column; container for the message state icon */
  padding           : 4px;
  text-align        : center;
  vertical-align    : middle;
	width             : 24px;
}

table.inbox td.subject, table.inbox td.from {
	max-width         : 326px;
	text-align        : left;
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
  width             : auto;
}

table.inbox td.subject {
	padding-top       : 4px;
	padding-bottom    : 2px;
}

table.inbox td.from {
	padding-bottom    : 4px;
	font-size         : smaller;
	line-height       : 80%;
}

table.inbox tr.new#row0, table.inbox tr.new#row1 {
  background-color  : #f3dfd3;
}

table.inbox td.new {
	font-weight       : bold;
}

.form_table table.range_select {
  /* (temperature) range select div, with mobile device compatible listboxes */
  /* some fiddling is needed with the padding and margins to get things right */
  -webkit-column-count: 4;
  -ms-column-count  : 4;
  -moz-column-count : 4;
  column-count      : 4;
  margin-left       : -2px;
}

.form_table table.range_select th, .form_table table.range_select td {
  padding           : 2px 2px 2px 2px;
  border            : none;
}

.form_table table.range_select td:nth-child(1) {
  /* needed for the correct center alignment of the middle <td> */
  padding-right     : 0px;
}

.form_table table.range_select td:nth-child(3) {
  /* needed for the correct center alignment of the middle <td> */
  padding-left      : 4px;
}

.form_table table.range_select td:nth-child(1),
.form_table table.range_select td:nth-child(3) {
  width             : 128px!important;
}

.form_table table.range_select td:nth-child(2) {
  width             : 44px!important;
  text-align        : center;
}

.form_table table.range_select td:nth-child(4) {
  /* padding; contains the "info" */
  max-width         : 100%;
}

.form_table table.truth_table {
  margin-left       : -2px;
}

.form_table table.truth_table th, .form_table table.truth_table td {
  padding           : 2px 2px 2px 2px;
  border            : none;
  text-align        : center;
}

.form_table table.truth_table th {
  font-weight       : normal!important;    /* hm... doesn't do the trick - why not? */
}

.form_table table.truth_table td.input {
  width             : 72px;
}

div.table_2d {
  display           : inline-block;
  position          : relative;
  max-width         : 920px;
  /* enable horizontal scrollbar */
  overflow-x        : auto;
  /* leave some room between the table and the scrollbar */
  padding-bottom    : 8px;
}

table.table_2d {
  width             : auto;
}

table.table_2d tr:first-child th {
  vertical-align    : bottom;
}

table.table_2d td  {
  text-align        : center;
  white-space       : nowrap;
}

table.table_2d td.row_header {
  text-align        : left;
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
  background        : #cccccc;
}

table.table_2d td.row_header.repair_list_articlenr {
}

table.table_2d td.row_header.repair_list_description {
  min-width         : 24ex;
  max-width         : 24ex;
}

.form_table table.table_2d tr td:first-child {
  text-align        : left;
}

table.table_2d th.rotated_col_header div {
  /* In fact, the transformation is set from PHP with a "style"
     attribute. The rotation is a bit weird as it doesn't adhere
     to its original box (the rotated item seems to be floating).
     However, not using a <div> (i.e. rotate the <th>) is more
     predictable, but it also rotates the background colour, which
     looks utterly weird.
     
     The translation is dependent on the length of the content, so
     we must not only rotate the <div>, but it must be translated
     back to its right place.
     Also the width of each <div> must be equal (also set with a
     "style"), so the same translation can be applied to all headers.
     
     Some examples can be found here:
     See http://jimmybonney.com/articles/column_header_rotation_css/
     and http://css-tricks.com/rotated-table-column-headers/
  */
  display           : inline-block;
  text-align        : left;
  font-weight       : normal;
  /* compensate for 'div.table_2d' above */
  overflow          : visible;
  white-space       : nowrap;
  padding           : 0;
}

table.table_2d th.rotated_col_header div.show_border {
  border-top        : 1px solid #e0e0e0;
}

table.table_2d th.rotated_col_header.caption {
}

table.table_2d th.rotated_col_header.caption div {
  font-weight       : bold;
  text-overflow     : ellipsis;
  overflow          : visible;
  white-space       : nowrap;
}

table.table_2d tr td.caption {
  vertical-align    : middle;
  text-align        : center;
  white-space       : nowrap;
  overflow          : visible;
}

table.table_2d tr td.caption div {
  display           : inline-block;
  white-space       : nowrap;
  overflow          : visible;
}

table tr td.group_header {
  text-align        : center;
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
}

table tr td.group_header:first-child {
  /* usually full line heading in the table, so give it some padding-top */
  text-align        : left;
  border-top        : none;
  border-left       : none;
  padding-top       : 0.7em;
}

/* Possible fix for MacBook */
.table_2d::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table_2d::-webkit-scrollbar:vertical {
    width: 11px;
}

.table_2d::-webkit-scrollbar:horizontal {
    height: 11px;
}

.table_2d::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.table_2d::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

/*
 *	Invisible table for alignment
 */
table.alignment {
	border            : 0px;
	margin            : 0px;
	padding           : 0px;
}

table.alignment td input {
	margin-bottom     : 0px;
}

/* read-only checkbox and radio buttons don't show their tooltips, so put
   a div over the box that does show it */
div.mouse_catcher {
	position          : absolute;
	z-index           : 998;
	/* hm, tja... */
	height            : 2ex;
	width             : 2ex;
}

.form_table #col2 div.mouse_catcher {
	margin-top        : 0.5em;
}

/*
 *  Drop down and combobox
 */
div.combobox_div {
  display           : none;
  position          : absolute;
  float             : left;
  z-index           : 999;
  margin            : 0px 0px 0px 0px;
  padding           : 0px;
}

.form_table div.combobox_div select {
  min-width         : 304px;
}

.form_table div.combobox_div select.column {
  min-width         : 128px;
}
 
div.combobox_div select {
  z-index           : 0;
  width             : auto;
  border-right      : 1px solid black;
  border-bottom     : 1px solid black;
  margin            : 0px;
  padding           : 0px;
}

/*
 *  Class "user_control" (left/right-box)
 */
table.user_control {
  width             : 450px;
}

table.user_control table.leftright_button {
	width             : 50px;
	max-width         : 50px;
	text-align        : center;
	border            : none;
	margin            : 0px;
	padding           : 0px;
}

table.user_control table.leftright_button input[type=button] {
  width             : 40px;
  height            : 25px;
}

table.user_control input textarea {
  width             : 35px;
  font-weight       : bold;
  font-size         : 10pt;
}

table.user_control div.listbox_div {
  width             : 200px;
}

table.user_control #filter_input {
  width             : 140px;
  margin-right      : 4px;
}

table.user_control #filter_button {
  width             : 50px;
}

/*
 * General definitions
 */
.sub_menu_matrix,
.sub_menu {
  width             : 224px;
  min-height        : 30px;
}

.sub_menu_matrix a,
.sub_menu a,
.sub_menu_matrix .nolink,
.sub_menu .nolink {
  text-overflow     : ellipsis;
  overflow          : hidden;
  white-space       : nowrap;
  height            : 45px;
  background        : url(../images/di_sub_menu_button.gif) top left repeat-y #fff;
  background        : -webkit-linear-gradient(bottom left, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(bottom left, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to top right, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  display           : block;
  line-height       : 45px;
  text-align        : center;
  margin            : 1px;                  /* Needed for the selection box */
  margin-bottom     : 5px;
  padding           : 2px 8px;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 2px 0 rgba(0, 0, 0, 0.4);
  text-decoration   : none;
  font-size         : 18px;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  color             : #009ef0;
}

.sub_menu_matrix .nolink,
.sub_menu .nolink {
  color             : #D1D1D1;
}

.sub_menu_matrix_info {
  position          : absolute;
  line-height       : 11px;
  border-right      : solid;
  border-bottom     : solid;
  font-weight       : bold;
  border-width      : 2px;
  margin-left       : 1px;                  /* Needed for the selection box */
  margin-top        : 0px;                  /* Needed for the selection box */
}

.sub_menu_matrix_icon {
  position          : absolute;
  margin-left       : 160px;
  margin-top        : 10px;
}

.sub_menu_matrix a,
.sub_menu a {
  text-decoration   : none;
}

.sub_menu_matrix a:hover,
.sub_menu a:hover {
  background        : url("../images/di_sub_menu_button_inv.gif") top left repeat-y #fff;
  background        : -webkit-linear-gradient(top right, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(top right, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom left, #EEEEEE 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
  color             : #F28424;
}

.form_table #col2 .sub_menu_matrix a,
.form_table #col2 .sub_menu a,
.form_table #col2 .sub_menu_matrix .nolink,
.form_table #col2 .sub_menu .nolink {
  /* 300px -/- 2*8px padding */
  width             : 284px;
}

input.button, button.button {
  width             : 148px;
  height            : 40px;
  font-weight       : bold;
  vertical-align    : middle;
  text-align        : center;
  overflow          : hidden;
  text-overflow     : ellipsis;
  white-space       : normal;
  background        : -webkit-linear-gradient(top left, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(top left, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom right, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  margin            : 1px 4px 1px 1px;
  border-radius     : 0px 2px 2px 0px;
  box-shadow        : 0 0 2px 0 rgba(0, 0, 0, 0.4);
  text-decoration   : none;
}

input.button.wide, button.button.wide {
  width             : 304px;
  margin-left       : 0px;
}

input:not([disabled]).button, button:not([disabled]).button {
  cursor            : pointer;
}

input:not([disabled]).button:hover, button:not([disabled]).button:hover {
  background        : -webkit-linear-gradient(bottom right, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(bottom right, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to top left, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
  color             : #F28424;
}

input[disabled].button, button[disabled].button, button[disabled].button table td {
  color             : #AAAAAA;
}

button.button table {
  border            : none;
  padding           : 0px;
  margin            : 0px;
}

button.button table td {
  vertical-align    : middle;
  white-space       : nowrap;
  padding           : 0;
}

button.button img {
  padding           : 0px 4px 0px 0px;
  vertical-align    : middle;
}

button.tiny_button, button.mobile_button {
  background        : #00A1FD;
  background        : -webkit-linear-gradient(center top , #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(center top , #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #00A1FD 0%, #007CC3 100%) repeat scroll 0 0 transparent;
  border            : 0 none;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 4px 0 rgba(0, 0, 0, 0.4);
  color             : #FFFFFF;
  display           : inline-block;
  vertical-align    : middle;
  text-align        : center;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-size         : 13px;
  text-decoration   : none;
}

button.tiny_button, button.mobile_button {
  cursor            : pointer;
}

button.tiny_button img, button.mobile_button img {
  vertical-align    : middle;
  padding           : 2px;
}

button.tiny_button:hover, button.mobile_button:hover {
  background        : #007AC1;
  background        : -webkit-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
  text-decoration   : none;
}

button[disabled].tiny_button, button[disabled].mobile_button {
  background        : #AAAAAA;
  background        : -webkit-linear-gradient(center top , #808080 0%, #AAAAAA 100%) repeat scroll 0 0 transparent;
  background        : -moz-linear-gradient(center top , #808080 0%, #AAAAAA 100%) repeat scroll 0 0 transparent;
  background        : linear-gradient(to bottom, #808080 0%, #AAAAAA 100%) repeat scroll 0 0 transparent;
  cursor            : inherit;
}

button.inline_button {
  display           : inline-block;
  border-style      : solid;
  border-color      : #ccc #666 #666 #ccc;
  border-width      : 2px 2px 2px 2px;
  border-radius     : 2px 2px 2px 2px;
  margin            : 1px 1px 1px 1px;
  padding           : 1px;
  text-align        : center;
  text-decoration   : none;
  background        : url("../images/di_sub_menu_button.gif") top left repeat-y #fff;
}

.form_table div.mobile_button {
  margin-bottom     : 4px;
  white-space       : nowrap;
  overflow          : visible;
}

div.mobile_button button.mobile_button {
  font-family       : 'ITCOfficinaSansStdBold', Arial, Helvetica, sans-serif;
  font-size         : 16px;
  padding           : 4px;
  width             : 100%;
  min-height        : 32px;
}

button:not([disabled]).inline_button {
  cursor            : pointer;
}

button[disabled].inline_button {
  color             : #AAAAAA;
  cursor            : default;
}

button[disabled].inline_button img {
  opacity           : 0.25;
}

button:not([disabled]).inline_button:hover {
  background        : url("../images/di_sub_menu_button_inv.gif") top left repeat-y #fff;
}

button:not([disabled]).inline_button:active {
  border-color      : #888 #ccc #ccc #888;
  border-width      : 2px 2px 2px 2px;
  border-radius     : 2px 2px 2px 2px;
  margin            : 1px 1px 1px 1px;
  background        : url("../images/di_sub_menu_button.gif") top left repeat-y #fff;
}

div.inline_button img {
  vertical-align    : middle;
}

input[type=file].file_element {
	width             : 304px;
}

input[type=file].file_element.upload {
	width             : 244px;
}

input[type=button].file_element {
	width             : 40px;
	margin-left       : 8px;
}

#resetbutton,
#searchbutton {
  width             : 50px;
  height            : 18px;
	margin-top        : -2px;
}

#filebutton {
  margin-left       : 3px;
  width             : 60px;
  height            : 20px;
}

#input_info {
  width             : 160px;
  background-color  : transparent;
  border-width      : 0px;
  border-radius     : 0px 0px 0px 0px;
  overflow-x        : hidden;
  text-overflow     : ellipsis;
}

#input_info_file {
  width             : 120px;
  background-color  : #FFFFFF;
  border-width      : 0px;
  border-radius     : 0px 0px 0px 0px;
}

.form_table #table_select_large,
.form_table #table_select_large #service,
.form_table #table_select_large #d_assigned_project,
.form_table #table_select_large #rented,
.form_table #table_select_large #inactive,
.form_table #table_select_large #unread {
  width             : 408px;
}

.form_table #table_input {
  margin-bottom     : 1px;
  background-color  : gray;
  color             : white;
  border-style      : none;
}

.form_table #table_input_large {
  width             : 408px;
  margin-bottom     : 1px;
  background-color  : gray;
  color             : white;
  border-style      : none;
}

/*
 * Extended menu
 */
.extended_menu h1 {
  text-align        : center;
  padding-bottom    : .3em;
}

.extended_menu .sub_menu_matrix,
.extended_menu .sub_menu {
  width             : 192px;
}

.extended_menu .sub_menu_matrix a,
.extended_menu .sub_menu a,
.extended_menu .sub_menu_matrix .nolink,
.extended_menu .sub_menu .nolink {
  height            : 40px;
  line-height       : 40px;
}

/*
 * Colors
 * JW20140508: moved to $_COLORS in definitions.php
 */
select #service, li.service {
  color             : blue;
}

select #d_assigned_project, li.d_assigned_project  {
  color             : #F28424;
}

select #rented, li.rented {
  color             : #007f00;
}

select #inactive, li.inactive {
  color             : #05fff7;
}

select #ok, li.ok {
  color             : green;
}

select #nok, li.nok {
  color             : red;
}

select #unread, li.unread {
  color             : #F28424;
}

#period_title {
  margin-top        : -14px;
  width             : 80px;
  background        : white;
  margin-left       : 10px;
  height            : 14px;
}

#period {
  border-style      : inset;
  border-width      : thin;
  margin-top        : 10px;
  background        : url("../images/pattern.png") repeat scroll 0 0 transparent;
  padding-bottom    : 5px;
  height            : 100%;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 1px 0 rgba(0, 0, 0, 0.4);
}

#period_icon_add {
  border-radius     : 0px 2px 0px 0px;
}

#body_help {
  background        : url("../images/pattern.png") repeat scroll 0 0 transparent;
}

#slideshow { 
  height            : 240px;
  left              : 50%;
  list-style        : none outside none;
  margin            : 0 0 0 -800px;
  padding           : 0;
  position          : relative;
  width             : 1600px;  
}

#slideshow .slide {
  height            : 240px;
  opacity           : 0;
  position          : absolute;
  top               : 0;
  vertical-align    : middle;
  z-index           : 8;
}

#slideshow .slide.active {
  z-index           : 10;
  opacity           : 1;
}

#slideshow .slide .last-active {
  z-index           : 9;
}

#slideshow .slideshow_label {
  color             : #FFFFFF;
  font-family       : 'ITCOfficinaSerifStdBook','Times New Roman','Times Roman',Times,serif;
  font-size         : 40px;
  line-height       : normal;
  margin-bottom     : 30px;
  text-shadow       : 1px 1px 2px #000000;
}

#slideshow .slideshow_container {
  position          : absolute;
  left              : 330px;
  top               : 35px;
  z-index           : 20;
  min-width         : 500px;  
}

#greenled,
#redled {
  top               : 2px;
  left              : 0px;
}

#svg_logo object {
  height            : 64px;
  left              : 0px;
  position          : absolute;
  top               : 22px;
  vertical-align    : middle;
  overflow          : visible;
  border            : none;
}

.button_big {
  width             : 300px!important;
  height            : 25px!important;
  font-weight       : bold;
  background        : url("../images/di_sub_menu_button.gif") top left repeat-y #fff;
  border-radius     : 2px 2px 2px 2px;
  box-shadow        : 0 0 2px 0 rgba(0, 0, 0, 0.4);
  cursor            : pointer; 
  text-decoration   : none;
  margin-left       : 0px!important;
}

.project_doc_delete_image {
  cursor            : pointer; 
  padding-top       : 3px;
  position          : absolute;
}

.datetime {
	white-space       : nowrap;
}

table.jacs,
table.jacsStatic {
  padding-left      : 4px;
}

.bg0 {}
.bg1 { background-color: #eeeeee; }