Files
freeipa/install/ui/ipa.css
Petr Vobornik a1c9e3618c Better displaying of long names in tables and facet headers
Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable.

Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem.

Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution.

In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information.

Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway.

Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions:
cell-spacing: 2px
cell-padding: 6px th:right, left; td: left
cell-border: th:1px; td:0px

It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation.

Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem).

Also added padding to headers in association adder dialog.

https://fedorahosted.org/freeipa/ticket/1890
2011-12-09 14:22:25 +01:00

1426 lines
24 KiB
CSS

/* Authors:
* Pavel Zuna <pzuna@redhat.com>
* Adam Young <ayoung@redhat.com>
* Endi Sukma Dewata <edewata@redhat.com>
* Kyle Baker <kybaker@redhat.com>
*
* Copyright (C) 2010 Red Hat
*/
@font-face {
font-family: 'Overpass';
src: url('overpass_regular-web.eot');
src: url('overpass_regular-web.eot?#iefix') format('eot'),
url('overpass_regular-web.woff') format('woff'),
url('overpass_regular-web.ttf') format('truetype'),
url('overpass_regular-web.svg#webfontLTZe4IYH') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Overpass Bold';
src: url('overpass_bold-web.eot');
src: url('overpass_bold-web.eot?#iefix') format('eot'),
url('overpass_bold-web.woff') format('woff'),
url('overpass_bold-web.ttf') format('truetype'),
url('overpass_bold-web.svg#webfontzAU82Ltw') format('svg');
font-weight: bold;
font-style: normal;
}
html {
height: 100%;
}
body {
overflow: auto;
background: url(images/outer-background.png);
background-repeat: repeat-x;
background-position: left top;
background-color: #FFFFFF;
border-width: 0;
font-family: "Liberation Sans",Arial,Sans;
font-size: 11px;
margin: 0;
padding: 0;
height: 100%;
}
.network-activity-indicator {
visibility: hidden;
width: 16px;
height: 16px;
line-height: 16px;
margin: 5px 3px;
display: inline-block;
}
/* ---- Container ---- */
#container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 960px;
margin: 0 auto 0;
}
/* ---- Background ---- */
#background-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 34px;
background: url(images/top-background.png) #0C3B00;
}
#background-navigation {
position: absolute;
top: 34px;
left: 0;
right: 0;
height: 72px;
background: url(images/mainnav-background.png);
}
#background-left {
position: absolute;
top: 106px;
left: 0;
width: 10px;
bottom: 0;
background: url(images/background-left.png);
background-repeat: no-repeat;
}
#background-center {
position: absolute;
top: 106px;
left: 10px;
right: 10px;
bottom: 0;
background: url(images/background-center.png);
background-repeat: repeat-x;
}
#background-right {
position: absolute;
top: 106px;
right: 0;
width: 10px;
bottom: 0;
background: url(images/background-right.png);
background-repeat: no-repeat;
}
.ui-widget {
font-size: 11px;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
vertical-align: middle;
}
.combobox-icon {
background: url(images/combobox-open.png);
}
.expanded-icon {
background: url(images/arrow-expanded.png);
}
.collapsed-icon {
background: url(images/arrow-collapsed.png);
}
.search-icon {
background: url(images/search-icon.png) no-repeat;
}
.add-icon {
background: url(images/add-icon.png);
margin: -4px 0 0 1px;
}
.remove-icon {
background: url(images/remove-icon.png);
margin: -4px 0 0 1px;
}
.update-icon {
background: url(images/update-icon.png);
margin: -4px 0 0 1px;
}
.reset-icon {
background: url(images/reset-icon.png);
margin: -4px 0 0 1px;
}
.register-icon {
background: url(images/entitle-register.png);
margin: -4px 0 0 1px;
}
.import-icon {
background: url(images/entitle-import.png);
margin: -4px 0 0 1px;
}
.consume-icon {
background: url(images/entitle-consume.png);
margin: -4px 0 0 1px;
}
.ipa-icon {
font-size: 0.7em;
padding-right: 0.3em;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
font-weight: bold;
padding: 0.2em;
}
/* ---- Header ---- */
#header {
position: absolute;
top: 0;
left: 6px;
right: 6px;
height: 34px;
background: transparent;
}
#header a {
text-decoration: none;
}
#header a:link {
text-decoration: none;
color: white;
}
#header a:visited {
text-decoration: none;
color: white;
}
#header span.header-logo {
padding-left: 2em;
}
#header span.header-logo a img {
border: 0;
}
/* ---- Logged-in As ---- */
.header-right {
float: right;
}
.header-loggedinas {
line-height: 34px;
color: #fff;
}
/* ---- Navigation ---- */
#navigation {
position: absolute;
top: 34px;
left: 6px;
right: 6px;
height: 102px;
}
#navigation.tabs-3 {
height: 150px;
}
div.tabs {
width: 100%;
min-height: 4em;
background: transparent;
}
/* ---- Tabs level 1 ---- */
.tabs1 > .ui-tabs-nav {
background: transparent;
}
.tabs1 > .ui-tabs-nav > .ui-state-hover {
background: url(images/hover-tab.png);
}
.tabs1 > .ui-tabs-nav {
padding: 33px 0 0;
margin: 0;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.tabs1 > .ui-tabs-nav li {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
background-image: url(images/mainnav-tab-off.png);
margin: 0 0.4em 0 0;
border-width: 0;
text-align: center;
vertical-align:baseline;
border: 1px solid #A0A0A0;
}
.tabs1 > .ui-tabs-nav > li.ui-tabs-selected {
padding: 0 0;
background-image: url(images/mainnav-tab-on.png);
text-align: center;
}
.tabs1 > .ui-tabs-nav > li > a {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
min-width: 5em;
height: 20px;
color: #858585;
margin: 0 auto;
text-align:center;
font-size:1.5em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.tabs1 > .ui-tabs-nav > li > a:link,
span.main-nav-off > a:visited{
color: #858585;
}
.tabs1 > .ui-tabs-nav > li.ui-tabs-selected > a {
color: #1e5e05;
}
.tabs1 .ui-tabs-panel {
display: block;
border-width: 0;
padding: 0 0 0 0;
background-color: transparent;
}
/* ---- Tabs level 2 ---- */
.tabs2 {
}
.tabs2 > .ui-tabs-nav {
padding: 5px 24px 1px;
margin: 0;
height: 25px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: transparent;
}
.tabs2 > .ui-tabs-nav > li {
width: auto;
margin: 0;
background: none repeat scroll 0 0 transparent !important;
color: white;
border: none;
}
.tabs2 > .ui-tabs-nav > li.ui-tabs-selected {
background: url(images/nav-arrow.png) no-repeat scroll center 2.1em transparent !important;
height: 3.1em;
border: none;
margin: 0;
}
.tabs2 > .ui-tabs-nav > li > a {
width:auto;
padding: 0.3em 0.8em ;
-moz-border-radius: 2em !important;
-webkit-border-radius: 2em !important;
border-radius: 2em !important;
color: #333333;
font-size: 1em;
font-family: "Liberation Sans", Arial, Sans;
margin: 0 0.3em;
}
.tabs2 > .ui-tabs-nav li > a:link,
span.main-nav-off > a:visited {
color: #333333;
}
.tabs2 > .ui-tabs-nav > li.ui-tabs-selected > a,
.tabs2 > .ui-tabs-nav > li > a:hover {
background-color:#EEEEEE;
color: #164304;
text-shadow: 1px 1px 0 #FFFFFF;
}
/* ---- Tabs level 3 ---- */
.tabs3 {
height: 28px;
}
.tabs3 > .ui-tabs-nav {
padding: 1em 22px 0.1em;
border: none;
background: transparent;
}
.tabs3 > .ui-tabs-nav > li {
background: transparent;
border: 0;
margin: 0 2.4em 1px 0;
}
.tabs3 > .ui-tabs-nav > li > a {
width: auto;
margin: 0;
padding: 0.3em 0 0.3em 0;
font-family: "Overpass", "Liberation Sans", Arial, sans-serif;
font-size: 1.2em;
text-transform: uppercase;
color: #858585;
}
.tabs3 > .ui-tabs-nav > li.ui-tabs-selected > a {
font-family: "Overpass Bold", "Liberation Sans", Arial, sans-serif;
color: #1e5e05;
}
/* ---- Content ---- */
#content {
position: absolute;
top: 151px;
left: 6px;
right: 6px;
bottom: 10px;
}
#content.tabs-3 {
top: 175px;
}
/* ---- Entity ---- */
.entity {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.entity h1 {
margin: 0 0 10px;
}
.entity-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 10px;
margin: 0 0 0;
}
.entity-content div.content-buttons {
float: right;
margin-right: 1.5em;
}
.entity-content div.content-buttons img {
border: 0;
}
/* ---- Facet ---- */
.facet {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
bottom: 0;
}
.facet-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 130px;
margin: 0 12px 0;
}
.facet-title {
position: absolute;
top: 15px;
left: 0;
color: gray;
display: block;
}
.facet-title h3 {
margin: 0;
}
.facet-title span {
display: inline;
}
.facet-pkey {
color:black;
text-transform: none;
}
.breadcrumb {
position: absolute;
top: 0;
left: 0;
}
.breadcrumb a {
cursor: pointer;
}
/* ---- Facet Tabs ---- */
.facet-tabs {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
z-index: 1; /* need to be above facet header */
border-bottom: 1px solid #C9C3BA;
}
.facet-group {
float: left;
margin-right: 1em;
position: relative;
height: 100%;
}
.facet-group-label {
height: 20px;
}
.facet-tab {
height: 31px;
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.facet-tab li {
display: inline-block;
position: relative;
padding-right: 1px;
}
.facet-tab li a {
background-color: #dedbde;
border-left: 1px solid #c9c3ba;
border-right: 1px solid #c9c3ba;
margin: 0 0 0;
padding: 6px 16px;
text-decoration: none;
display: inline-block;
line-height: 19px;
background-image: url(images/facet-tab-off.png);
color: #666666;
}
.facet-tab li a:hover {
background-color: #f1f0ee;
}
.facet-tab li a.selected {
color: #6C6F73;
background-color: #f1f0ee;
font-weight: bold;
background-image: url(images/facet-tab-on.png);
height: 20px;
}
.facet-tab li.settings {
margin-left:1em; margin-right:1em;
}
/* ---- Facet Controls ---- */
.facet-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
line-height: 30px;
padding: 0 6px 0 6px;
}
.right-aligned-facet-controls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.facet-controls a {
font-size: 1.3em !important;
margin: 0 6px 0 0;
}
/* ---- Facet Content ---- */
.facet-content {
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
margin: 0 12px;
padding: 0;
}
/* ---- Facet Customization ---- */
.no-facet-tabs .facet-header {
height: 70px;
}
.no-facet-tabs .facet-content {
top: 70px;
}
/* ---- Search Facet ---- */
.content-table {
position: relative;
width: 100%;
height: 100%;
}
.content-table tbody {
position: absolute;
top: 31px;
left: 3px;
right: 4px;
bottom: 35px;
}
.search-filter {
width: 215px;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
border-radius: 15px !important;
border: 1px solid #9f9e9e;
background: url(images/search-background.png);
height: 20px;
line-height: 20px;
padding: 0 8px 0;
margin: 5px;
display: inline-block;
}
.search-filter input {
width: 193px;
border: none;
background: transparent;
height: 18px;
}
.search-filter a {
float: right;
margin: 0;
}
.search-controls {
-moz-border-radius: .7em .7em 0 0;
-webkit-border-radius: .7em .7em 0 0;
height:2.5em;
background: -moz-linear-gradient(top, #eeeeee, #dfdfdf);
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
position: relative;
padding: 1em 1.5em;
margin-top: .8em;
}
.search-table {
padding: 0;
width: 100%;
border: none;
}
.search-table > a:link, a:visted {
color:black;
}
.search-table thead tr th {
padding: 0 6px;
background-color:#f6f6f6;
color:#333333;
text-align: left;
border: 1px solid #dfdfdf;
height: 25px;
}
.search-table thead tr th .action-button {
margin: 0 0 0 6px;
}
.search-table tbody td {
padding: 0 0 0 7px;
}
.search-table thead th div,
.search-table tbody td div
{
word-wrap: break-word;
}
.search-table tfoot td {
padding: 0.5em 0 0 1em;
border-top: 1px solid #dfdfdf;
height: 25px;
line-height: 25px;
margin-top: 1em;
}
.search-table span[name=summary] {
float: left;
margin-right: 4em;
}
.search-table .pagination-control {
float: right;
}
.search-table .pagination-control a {
cursor:pointer;
}
.search-table .pagination-control input[name=current_page] {
width: 22px;
}
ul#viewtype {
padding-left: 2em;
}
ul#viewtype li {
color: #656565;
display: inline;
font-weight: bold;
list-style-type: none;
padding-right: 2em;
}
ul#viewtype li img {
vertical-align: middle;
}
ul#viewtype li a {
font-weight: normal;
}
h1 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.5em;
font-weight: normal;
color: #555555;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
}
h2 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.5em;
font-weight: normal;
color: #333333;
text-transform: uppercase;
margin-left: 1em;
margin-bottom: 0;
text-align: left;
}
h3 {
font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
font-size: 1.8em;
color: #3c3c3c;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
}
.section-expand{
}
hr {
background-color: #EEEEEE;
clear: both;
color: #FFFFFF;
height: 0.1em;
margin-left: 1.5em;
margin-right: 1.5em;
margin-top: 1em;
}
/* ---- Details Facet ---- */
.details-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 32px;
overflow: auto;
border: none;
border-top: 1px solid #DFDFDF;
}
.details-summary {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 29px;
border-top: 1px solid #DFDFDF;
padding-left: 0.5em;
line-height: 25px;
}
.dialog-section {
margin-bottom: 10px;
}
.section-table {
width: 100%;
}
.section-cell-label {
vertical-align: top;
width: 120px;
max-width: 120px;
}
.section-cell-field {
max-width: 650px;
}
.details-section {
margin-top: 1em;
margin-left: 4.5em;
margin-right: 3.3em;
margin-bottom: 1em;
}
.details-section .section-table {
width: 100%;
border-spacing: 12px;
}
.details-section .section-cell-label {
text-align: right;
vertical-align: top;
width: 120px;
word-wrap: break-word;
}
.details-section .section-cell-field {
font-weight: bold;
word-wrap: break-word;
}
.undo {
cursor:pointer;
padding: 0.2em;
}
span.attrhint {
font-size: 8pt;
left: 5em;
margin-left: 12.5em;
position: absolute;
overflow-x: hidden;
}
.ui-tabs {
padding:0;
}
.ui-widget-content {
}
a, .ui-widget-content a {
text-decoration: none;
color: #1d85d5;
font-weight: normal;
text-transform: none;
}
.ui-widget-header {
background: -moz-linear-gradient(center top , #225314, #1c400a) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#225314), to(#1c400a));
border: 1px solid #319016;
font-weight: bold;
}
/* ---- Dialog ---- */
.ui-dialog .ui-dialog-titlebar-close span {
background-color: transparent !important;
}
.ui-dialog .ui-dialog-content {
/* this should go away once we can fix table scrolling */
overflow:auto;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.5em 1em;
position: relative;
}
.ui-dialog .ui-dialog-buttonpane button {
cursor: pointer;
margin: 0.5em 0.4em 0.5em 0;
padding: 0.1em 0.2em;
}
.ui-dialog .ui-dialog-buttonpane {
background-image: none;
border-width: 1px 0 0;
padding: 0.3em 1em 0.5em 0.4em;
text-align: left;
}
/*
.ui-dialog .ui-dialog-content {
min-height: 26em !important;
}
*/
.dialog-message {
margin: 5px 5px 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button {
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 11px;
margin-right: .1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, #content .ui-state-default {
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
background: -moz-linear-gradient(top, #959595, #5e5e5e);
background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
border: 1px solid #777777;
color: #fff;
font-weight: normal;
padding: 0.4em 1em;
}
span.sub-nav-off > a:link, span.sub-nav-off > a:visited{
color:white;
}
span.main-nav-off > a:link, span.main-nav-off > a:visited{
color:white;
}
span.main-separator{
background: #333339;
padding:0.1em;
}
.button {
text-decoration: none;
cursor: pointer;
display: inline-block;
height: 18px;
}
.button-label {
padding: 0 0.2em;
display: inline-block;
height: 16px;
line-height: 16px;
}
.action-button {
background: none;
background-image: none;
font-family: "Liberation Sans", Arial, sans-serif;
font-size: 0.9em;
}
.action-button-disabled {
color: gray;
cursor: default;
}
.aci-attribute-table tbody {
border-bottom: 1px solid #8a8a8a;
height:10em;
}
.aci-attribute-table .aci-attribute-column {
width: 200em; /* it will fit actual width */
}
.entity-views{
list-style-type:none;
}
.entity-views li {
display:inline;
cursor: pointer;
padding: 0.4em;
}
.strikethrough { text-decoration: line-through; }
table.certificate-status {
line-height: 2;
}
table.kerberos-key-status {
line-height: 2;
}
.status-icon {
vertical-align: bottom;
}
.status-valid {
background-image: url(images/check-icon.png);
border: 0.2em solid #008000;
}
.status-valid-active {
background-color: #008000;
}
.status-revoked {
border: 0.2em solid #ff0000;
}
.status-revoked-active {
background-color: #ff0000;
}
.status-missing {
border: 0.2em solid #daa520;
}
.status-missing-active {
background-color: #daa520;
}
.ui-widget-content {
border:0;
}
/* ---- Table ---- */
table.scrollable thead {
display: block;
}
table.scrollable tbody {
display: block;
overflow: auto;
}
.adder-dialog {
position: relative;
width: 100%;
height: 100%;
}
.adder-dialog-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
line-height: 18px;
}
.adder-dialog-top input[name=filter] {
width: 244px;
}
.adder-dialog-left {
position: absolute;
top: 3.5em;
left: 0;
right: 50%;
bottom: 0;
}
.adder-dialog-right {
position: absolute;
top: 3.5em;
left: 50%;
right: 0;
bottom: 0;
}
.adder-dialog .search-table {
width: 100%;
height: 100%;
}
.adder-dialog tbody {
position: absolute;
bottom: 32px;
left: 3px;
right: 4px;
top: 31px;
}
.adder-dialog-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1.5em;
line-height: 1.5em;
padding: 0.2em 1em;
}
.adder-dialog-content {
position: absolute;
top: 1.9em;
left: 0;
right: 0;
bottom: 0;
}
.adder-dialog-available {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 3em;
}
.adder-dialog-with-external .adder-dialog-available {
bottom: 4em;
}
.adder-dialog-selected {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3em;
}
.adder-dialog-buttons {
padding-top: 10em;
width: 100%;
text-align: center;
}
.adder-dialog-buttons .button {
position: relative;
}
.adder-dialog-internal {
background-color: #ffffff;
border: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 23em;
padding-top: 1em;
}
.adder-dialog-external {
border: none;
position: absolute;
left: 0;
bottom: 0;
right: 3em;
height: 4em;
}
.adder-dialog-external .adder-dialog-content {
top: 2.1em;
}
.adder-dialog-external input {
width: 98%;
}
/* ---- Widgets ---- */
.text-widget input {
width: 250px;
}
.multivalued-text-widget [name=value] {
margin-bottom: 1em;
}
.multivalued-text-widget input {
width: 250px;
}
.combobox-widget-input {
display: inline-block;
position: relative;
}
.combobox-widget-input input {
width: 250px;
}
.combobox-widget-input .combobox-icon {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin-top: -2px;
margin-right: 4px;
}
.combobox-widget-list {
visibility: hidden;
border: 1px solid #A0A0A0;
background: #EEEEEE;
padding: 5px;
position: absolute;
left: 0;
right: 0;
z-index: 1010; /* need to be above dialog box */
}
.combobox-widget-list input {
width: 238px;
}
.combobox-widget-list .search-icon {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin-top: -2px;
margin-right: 3px;
}
.host-adder-dialog table.fqdn {
width: 100%;
}
.host-adder-dialog th.hostname {
width: 200px;
}
.host-adder-dialog td.hostname {
vertical-align: top;
}
.host-adder-dialog td.dnszone {
vertical-align: top;
}
.host-adder-dialog input[name=hostname] {
width: 100%;
}
.dnszone-adder-dialog .section-cell-label {
width: 180px;
}
/* Info and simple pages (not main app) */
body.info-page {
background: url(images/static-background.png) repeat-x scroll left top #EDEDED;
}
.info-page h1 {
color: #333333;
margin-bottom: 1.5em;
}
.info-page .container_1 {
margin-left: auto;
margin-right: auto;
width: 960px;
background: url(images/centered-background.png) no-repeat scroll 0 7em transparent;
min-height: 40em;
}
.info-page .textblock {
text-align: center;
margin-top: 6em;
font-size: 1.1em;
}
.info-page .textblockkrb {
text-align: left;
margin-top: 5em;
font-size: 1.1em;
padding-left: 3em;
padding-right: 3em;
}
.info-page .textblockkrb ul li {
list-style-type: none;
padding: .15em;
}
.required-indicator {
color: red;
font-weight: bold;
font-size: 120%;
}
.section-cell-label .required-indicator {
float: right;
margin-right: -10px;
}
.dialog-section .section-cell-label .required-indicator {
margin-right: 0px;
}
/* ---- HBAC Test ---- */
.hbac-test-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
}
.hbac-test-content {
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 30px;
}
.hbac-test-footer {
position: absolute;
height: 25px;
left: 0;
right: 0;
bottom: 0;
}
.hbac-test-title {
font-family: 'Overpass Bold', 'Liberation Sans', Arial, Sans-Serif;
font-size: 1.8em;
color: #3c3c3c;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
margin: 0;
}
div.entity[name=hbactest] .content-table tbody {
bottom: 68px;
}
div.entity[name=hbactest] .content-table tfoot td[name=external] {
background-color: #F6F6F6;
border: 1px solid #DFDFDF;
color: #333333;
height: 30px;
padding: 0 0.5em;
text-align: left;
}
div.entity[name=hbactest] div.facet[name=run_test] .hbac-test-header {
height: 100px;
}
div.entity[name=hbactest] div.facet[name=run_test] .hbac-test-content {
top: 100px;
}
.hbac-test-top-panel {
position: relative;
width: 100%;
height: 50px;
margin-bottom: 20px;
}
.hbac-test-button-panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 130px;
padding: 10px;
border: 1px solid #C9C3BA;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #F6F6F6;
}
.hbac-test-result-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 151px;
padding: 10px;
border: 1px solid #C9C3BA;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #F6F6F6;
}
.hbac-test-navigation-buttons {
float: right;
}