2289 lines
58 KiB
CSS
2289 lines
58 KiB
CSS
/** \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; }
|