src.dualinventive.com/mtinfo/dist/webroot/main/html/css/framework.css

1202 lines
26 KiB
CSS

/** \file html\css\framework.css
* \brief ZKL webinterface framework stylesheet
* \author Rob Schalken, Core|Vision
* \version 1.0
* \date 17-10-2008
*
* 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, ul, ol, dl, dt, dd, li, h1, h2, h3, h4, h5, h6 {
margin : 0;
padding : 0;
}
table {
padding : 0;
}
h1, p, input, ul, ol {
margin-bottom : 1em;
}
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;
}
textarea {
margin-bottom : 5px;
border-radius : 2px 2px 2px 2px;
}
h1 {
font-family : 'ITCOfficinaSerifStdBook', Arial, Helvetica, sans-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;
}
#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;
}
#di_header_logo > svg {
height: 100%;
width: 25%;
}
#heartbeat {
position : absolute;
top : 10px;
right : 0px;
width : 13px;
height : 13px;
}
#version_info {
position : absolute;
right : 28px;
top : 10px;
text-align : right;
font-size : 14px;
}
#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 : 75px;
top : 10px;
}
#header_shortcuts_rc {
position : absolute;
right : 125px;
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;
}
#content_table_col0 {
width : 77%;
vertical-align : top;
}
div #content_table_col0 {
display: block;
}
#content_table_col1 {
width : 23%;
vertical-align : top;
}
div #content_table_col1 {
display: block;
float: right;
}
#content_table_col2 {
width : 1%;
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', Arial, Helvetica, sans-serif;
font-weight : normal;
margin-top : 0;
text-decoration : none;
line-height : normal;
}
#header_button,
#footer_button {
background : #00A1FD;
background : -moz-linear-gradient(center top , #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',Arial,Helvetica,sans-serif;
font-size : 20px;
padding : 7px 12px;
line-height : 23px;
text-decoration : none;
cursor : pointer;
}
#footer_button {
margin-top : 12px;
}
#footer_button:hover {
background : #007AC1;
background : -moz-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
text-decoration : none;
}
#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',Arial, Helvetica, sans-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;
}
#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 {
display : block;
padding : 0px;
text-decoration : none;
color : #000000;
margin : 1px;
margin-top : -1px;
}
.menu a:hover {
color : #F28424;
}
.menu li {
color : #d1d1d1;
padding-top : 2px;
padding-bottom : 4px;
width : 180px;
height : 15px;
word-wrap : break-word;
overflow : hidden;
}
.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
*/
.form_table {
width : 100%
}
.form_table tr select {
vertical-align : top;
}
.form_table input[type=text], input[type=password] {
width : 300px;
}
.form_table select {
width : 304px;
}
.form_table #col0 {
width : 4%;
}
.form_table #col1 {
width : 23%;
text-align : left;
}
.form_table #col2 {
text-align : left;
}
.form_table #col2 .checkbox_element {
margin-bottom : 0.5em;
margin-top : 0.5em;
}
.form_table input[type=checkbox], .form_table input[type=radio] {
margin-bottom : 0px;
vertical-align : middle;
width : 15px;
text-transform : capitalize;
}
.form_table .checkbox_table label, h2 {
text-transform : capitalize;
font-size : 12px;
padding : 4px 0px;
}
.form_table h3 {
text-transform : capitalize;
font-weight : normal;
padding : 2px 0px 0px 0px;
font-size : 12px;
}
.form_table .checkbox_table p {
margin-bottom : 0px;
text-align : left;
text-transform : capitalize;
}
.form_table .checkbox_table {
table-layout : fixed;
margin-left : 0px;
}
.form_table .checkbox_table tr {
border-style : none;
}
.form_table td {
vertical-align : top;
}
.form_table .checkbox_table {
width : 97%;
border-style : solid;
border-width : 1px;
}
.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;
}
.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: 3px;
text-align: center;
text-decoration: none;
width: 294px!important;
background: url(../images/di_sub_menu_button.gif) top left repeat-y #fff;
}
.form_table div.file_open_button:hover {
cursor: pointer;
}
.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;
/* the actual width is less when there are buttons */
width: 294px;
}
.form_table div td.button_text div {
max-width: 260px;
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 {
padding: 0px 0px 3px 0px;
}
.form_table div td.action_button div.action_button:hover {
padding: 3px 0px 0px 0px;
cursor: pointer;
}
.form_table #col2 div.tiny_button {
width: 300px;
text-align: right;
border: 0px;
margin: 0px;
padding: 0px;
}
.form_table #footer_button {
/* document upload button, based on the buttons in the footer */
width: 300px;
margin-top: 0px;
margin-bottom: 1px;
padding: 4px;
}
.form_table #col2 div.button_div {
width: 304px;
}
.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;
}
.scrollable_div {
max-height : 32em;
width : 350px;
overflow-y : auto;
}
.scrollable_div table {
margin-left :0px;
}
.scrollable_div #col0 {
display: none;
}
.scrollable_div #col1 {
display: none;
}
.scrollable_div p {
padding: 0px;
width: 300px;
}
.user_control {
width : 92%;
}
.user_control select {
width : 200px;
}
.user_control input textarea {
width : 35px;
font-weight : bold;
font-size : 10pt;
}
.user_control #left_right_select {
width : 200px;
margin-bottom : 3px;
}
.user_control #filter_input {
width : 140px;
}
.user_control #filter_button {
width : 50px;
}
.user_control #buttons {
width : 40px;
}
/*
* General definitions
*/
.sub_menu_matrix,
.sub_menu {
width : 200px;
min-height : 30px;
}
.sub_menu_matrix a,
.sub_menu a,
.sub_menu_matrix .nolink,
.sub_menu .nolink {
overflow : hidden;
height : 45px;
background : url(../images/di_sub_menu_button.gif) top left repeat-y #fff;
display : block;
line-height : 45px;
text-align : center;
margin : 1px; /* Needed for the selection box */
margin-bottom : 5px;
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', Arial, Helvetica, sans-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;
color : #F28424;
}
input.button {
width : 152px;
height : 40px;
font-weight : bold;
vertical-align : middle;
text-align : center;
overflow : hidden;
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);
text-decoration : none;
cursor : pointer;
}
input.button:hover {
background : url(../images/di_sub_menu_button_inv.gif) top left repeat-y #fff;
color : #F28424;
}
input.tiny_button {
background : #00A1FD;
background : -moz-linear-gradient(center top , #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',Arial,Helvetica,sans-serif;
font-size : 12px;
text-decoration : none;
cursor : pointer;
}
input.tiny_button:hover {
background : #007AC1;
background : -moz-linear-gradient(center top , #007AC1 0%, #00A0FC 100%) repeat scroll 0 0 transparent;
text-decoration : none;
}
#resetbutton,
#searchbutton {
width : 50px;
height : 18px;
}
#filebutton {
margin-left : 3px;
width : 60px;
height : 20px;
}
#leftright_button {
width : 40px;
height : 25px;
margin-right : 5px;
}
.date input[type=text] {
width : 281px;
}
.datetime input[type=text] {
width : 177px;
height : 15px;
}
.datetime select {
width : 100px;
}
.daytime #time {
width : 100px;
}
.daytime #day{
width : 200px;
}
.date img, .datetime img {
cursor : pointer;
vertical-align : top;
}
#input_info {
width : 160px;
background-color : #FFFFFF;
border-width : 0px;
border-radius : 0px 0px 0px 0px;
}
#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;
}
/*
* Colors
*/
select #service {
color : blue;
}
select #d_assigned_project {
color : #F28424;
}
select #rented {
color : #007f00;
}
select #inactive {
color : #05fff7;
}
select #ok {
color : green;
}
select #nok {
color : red;
}
select #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',Arial,Helvetica,sans-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;
position : absolute;
}
#svg_logo {
height : 64px;
left : 0px;
position : absolute;
top : 22px;
border : 0 none;
vertical-align : middle;
}
.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;
}
.bg0 {}
.bg1 { background-color: #EEE; }