spiffyui.1.7.source-code.spiffyui.css Maven / Gradle / Ivy

Go to download
/*
   These are basic styles for our entire page and all of our controls.  They keep all of the 
   control spaced properly in our grid which has 14 pixel rows and 155 pixel columns with a 
   20 pixels spacer between columns.
 */
body {
    background-color: white;
}

body, .gwt-TextBox, .gwt-ListBox, .gwt-PasswordTextBox, .gwt-TextArea, .gwt-SuggestBox, body, table td, select {
    font-size: 12px;
    line-height: 14px;
    font-family: Verdana,Arial,Sans-serif;
}

.gwt-TextBox, .gwt-ListBox, .gwt-PasswordTextBox, .gwt-TextArea, .gwt-SuggestBox {
    font-size: 11px;
}

.gwt-TextBox, .gwt-TextArea {
    padding: 2px;
}

.gwt-TextArea {
    height: 42px;
    margin-top: -4px;
}

.gwt-TextBox, .gwt-PasswordTextBox, .gwt-SuggestBox {
    margin-top: -6px;
    height: 24px;
    padding-top: 4px;
    line-height: 14px;
}

.gwt-ListBox {
    margin-top: -4px;	
    line-height: 14px;
}

.gwt-ListBox.multivalue {
    height: 42px;
}

.gwt-CheckBox label {
    margin-left: 0.5em;
    position: relative;
    top: -1px;
}

.gwt-RadioButton label {
    margin-left: 0.5em;
}

fieldset {
    margin-bottom: 6px;
}

.textBlock {
    font-family:Georgia,"Times New Roman","Bitstream Charter",Times,serif;
}

a {
    text-decoration: none;
}

#mainWrap a:hover {
    color: #D54E21;
}

#mainWrap a.disabled {
    color: lightgray;
}

#mainWrap a.disabled:hover {
    text-decoration: none;
}

h1 {
    font-size:18px;
    line-height: 28px;
    height: 28px;
}

#main {
    padding-bottom: 50px;
}

#mainBody {
    clear:both;
    margin-left:175px;
}

.clear {
    clear: both;
}

#mainContent {
    float:left;
    width:100%;
    overflow:hidden;
}

#mainContent > div {
    margin-bottom: 2em;
    margin-top: 20px;
}

/*
 * These styles are for the footer
 */

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #mainWrap {
    height: 100%;
}

body > #mainWrap {
    height: auto; 
    min-height: 100%;
}

#main {
    padding-bottom: 28px;   /* must be same height as the footer */
}

#mainFooter {
    position: relative;
	margin-top: -36px; /* negative value of footer height */
	height: 28px;
	clear:both;
    z-index: 101;
    border-top: thin solid lightgray;
    width: 100%;
    left: 0px;
    background: #F9F9F9;
    padding-top: 7px;
    color: gray;
    bottom: 0em;
}

#mainFooterContainer {
    padding-left: 20px;
}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*
   Main header styles
 */
#mainHeader {
    height: 55px;
    background: black;
    color: white;
}

#mainHeader a {
    color:#CFCDC6;
    font-size:0.85em;
}

#mainHeader a:hover {
    color: #969E47;
}

#mainHeaderContainer, #loginHeaderContainer {
    position: relative;
}

#headerstring {
    color: white;
    font-size: 14px;
    margin-right: 1em;
}

#headerleft, #loginHeaderleft {
    position: absolute;
    left: 0px;
    top: 0px;
}

#headerright {
    position: absolute;
    right: 15px;
    top: 0px;
}

#header_actionsBlock {
    position: absolute;
    right: 10px;
    top: 14px;
    width: 35em;
    text-align: right;
}

#headerlogo, #loginheaderlogo {
    width: 54px;
    height: 55px;
    margin-left: 15px;
}

.headertitle {
    color: white;
    display: block;
    font-family: Arial,Sans-serif;
    font-size: 18px;
    left: 60px;
    position: relative;
    top: -37px;
}

#loginHeaderleft .headertitle {
    top: 15px;
}

#mainHeaderContainer .headertitle {
    left: 75px;
}

/*
   Navigation menu styles
 */
#mainNavigation {
    clear: left;
    float: left;
    margin: 19px 5px 15px -175px;
    padding-left: 5px;
    position: relative;
    width: 150px;
    overflow: hidden;
}

#mainNavContainer {
    margin-left: 10px;
    text-indent: 5px;
    margin-top: 3px;
}

#mainNavContainer.disabled a {
    background: lightgray;
    cursor: default;
}

#mainNavContainer.disabled a:hover {
    background: lightgray;
    text-decoration: none;
}

#mainNavContainer a {
    width: 99%;
    display: block;
}

#mainNavigation div {
    line-height: 28px;
    font-size: 12px;
}

.main-menuSeparator {
    width: 100%;
    height: 2px;
    background: lightgray;
    margin-top: 5px;
    margin-bottom: 8px;
}

.main-menuSectItem {
    text-indent: 20px;
    background: lightgray;
    display: block;
    background-color: #F1F1F1;
    width: 100%;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border-bottom: thin solid lightgray;
    margin-bottom: -1px;
    font-weight: bold;
}

.main-menuSeparator {
    height: 15px;
    background: transparent url('images/arrows.png') no-repeat scroll 0 -236px;
}

.main-menuSectItem {
    text-indent: 20px;
    background: #F1F1F1 url('images/arrows.png') no-repeat scroll 0 -128px;
}

.main-menuSectItemExpanded {
    background: #F1F1F1 url('images/arrows.png') no-repeat scroll 0 8px;
}

.main-menuItem {
    font-weight: normal;
}

.main-menuItem a {
    text-indent: 20px;
    background-position: 1px 16px;
    background-attachment: fixed;
}

.navItemSelected {
    background-color: #EDEEEC;
    width: 100%;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

/*
   Styles for the humanized message dialogs
 */
.humanMsg {
    padding: 1em;
    line-height: 28px;
    border: thin solid lightgray; 
    -webkit-border-radius:0.5em;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    display: none;
}

.humanMsg .round {
    border-left: none;
    border-right: none;
}

.humanMsgLog {
    display: none;
}

.humanMsgWarn {
    background-color: #F7F96A;
    color: black;
    opacity: 0.9;
}

.humanMsgInfo {
    background-color: black;
    color: white;
    opacity: 1;
}

.humanMsgErr {
    background-color: #E00000;
    color: white;
    opacity: 0;
}


/*
   Styles for the long message panel widget
 */
.spiffy-longmessage-panel {
    background: #FFFFE0;
    border-style: solid;
    border-width: 1px;
    border-color:  #E6DB55;
    font-size: 12px;
    line-height: 28px;
    color: #333333;
    position: relative;
    padding: 1em;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    margin-right: 2em;
    cursor: pointer;
    width: 680px;
}

.spiffy-longmessage-panel > div {
    padding-right: 15px;
}

.spiffy-longmessage-panel-hide {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -5px;
    width: 22px;
    height: 22px;    
}

.spiffy-longmessage-panel p.error {
	color: #E00000;
}

/*
   These styles are used for the form feedback labels
 */
div.spiffy-formfeedback.error {
    width: 16px;
    height: 17px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -85px;
}

div.spiffy-formfeedback.warning {
    width: 16px;
    height: 17px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -266px;
}

div.spiffy-formfeedback.loading {
    width: 16px;
    height: 17px;
    background: transparent url('images/loading_small.gif') no-repeat scroll;
}

div.spiffy-formfeedback.valid {
    width: 16px;
    height: 17px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -174px;
}

.spiffy-formfeedback-inform {
    position: absolute;
    top: -2px;
    left: 525px;
    width: 20px;
}

/*
   Styles for the fancy UI buttons and general buttons
 */
.spiffy-fancy-button {
    color: #5A79AD;
    border: thin solid lightgray;
    padding: 0 1em 0 1em;
    white-space: no-wrap;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    margin-top: -2px;
    font-size: 18px;
    margin-right: 0.5em;
    text-indent: 20px;
}

.spiffy-fancy-button:hover {
    background-color: #E6EFC2;
    border: 1px solid #C6D880;
    color: #529214;
}

button.spiffy-fancy-button.disabled {
    color: lightgray;
}

button.spiffy-save-button {
    background: #EDEEEC url('images/spiffy_ui_images.png') no-repeat scroll 10px -435px;
}

button.spiffy-save-button.disabled {
    background: #EDEEEC url('images/spiffy_ui_images.png') no-repeat scroll 10px -345px;
}

button.spiffy-fancy-button.inprogress {
    background: #EDEEEC url('images/loading_small.gif') no-repeat scroll 10px 5px;
}

button {
    background: url('images/btn-back.gif') repeat-x left;
    border: thin solid lightgray;
    padding: 0 1em 0 1em;
    white-space: no-wrap;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    margin-top: -3px;
}

button.spiffy-inprogress {
    background: url("images/loading.gif") no-repeat scroll center center transparent;
    text-indent: -9999px;
    width: 75px;
}

/*
   Form section styles
 */

.dialogformsection {
    list-style: none;
}

.dialogformrow {
    position: relative;
    height: 28px;
}

.tworowdialogformrow {
    position: relative;
    height: 70px;
}

.threerowdialogformrow {
    position: relative;
    height: 98px;
}

.textarearow {
    position: relative;
    height: 56px;
}

.tallformrow {
    position: relative;
    height: 42px;
}

.formcontrolslabel {
    position: absolute;
    top: 56px;
    left: 0px;
    width: 505px;
}

.extratallformrow {
    position: relative;
    height: 56px;
}

.supertallformrow {
    position: relative;
    height: 70px;
}

.dialogformlabel {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 155px;
    text-align: right;
}

.tworowformlabel {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: left;
}

.formcontrolssection {
    position: absolute;
    top: 0px;
    left: 175px;
    width: 30em;
}

.formbuttons {
    padding-top: 3px;
}

.tworowcontrolssection {
    position: absolute;
    top: 28px;
    left: 0px;
    width: 50em;
}

.buttoncontrolssection {
    position: absolute;
    top: 14px;
    left: 0px;
    width: 50em;
}

.wideTextField {
    width: 330px;     /* 155 + 20 + 155 */
}

.slimTextField {
    width: 155px;
}

/*
   Form section titles
 */
.sectionTitle {
    background-color: #EDEEEC;
    color: black;
    font-size: 16px;
    margin-top: 14px;
    margin-bottom: 22px;
    height: 28px;
    text-align: left;
    text-indent: 0.2em;
    width: 680px;
    line-height: 28px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 2px 2px #C8C8C8;
    white-space: nowrap;
    overflow: hidden;
}

.subSectionTitle {
    color: black;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 21px;
    margin-top: 0px;
    text-align: left;
    text-indent: 0.2em;
    width: 660px;
    margin-left: 20px;
    border-bottom: thin solid lightgray;
}

.spiffy-loading-small {
    width: 16px;
    height: 16px;
    background: transparent url('images/loading_small.gif') no-repeat scroll;
}

/*
 For RefreshAnchor
*/
.spiffy-refresh-icon {
	background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -677px;
	width: 16px;
	height: 16px;
}

.spiffy-refresh-icon-loading {
    background: transparent url('images/loading_small.gif') no-repeat scroll;
    width: 16px;
    height: 16px;
}

.spiffy-refresh-icon-disabled {
	background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -586px;
	width: 16px;
	height: 16px;
	cursor: default;
}

/*
 For StatusIndicator
*/
.spiffy-status-succeeded {
    width: 16px;
    height: 16px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -175px;
}

.spiffy-status-inprogress {
    width: 16px;
    height: 16px;
    background: transparent url('images/loading_small.gif') no-repeat scroll;
}

.spiffy-status-failed {
    width: 16px;
    height: 16px;
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -85px;
}

/*
 For SlideDownPrefsPanel
*/
.pulldownprefspanel {
    position: relative;
    top: -20px;
    margin-bottom: 6px;
    width: 100%;
}

.prefspulltab {
    float: right;
}

.prefspulltab div {
    height: 30px;
}

.prefspulltab a {
    text-decoration: none;
    color: #606060;
    padding: 2px 25px 5px 5px;
    background-position:right bottom;
    background-repeat:no-repeat;
    background-color: #dedede;
    white-space: nowrap;
    background-image: url("images/screen-options-right.gif");
    line-height: 22px;
}

.prefspulltabexpanded a {
    background-image: url("images/screen-options-right-up.gif");
}
    
.prefspaneltab {
    background-color:#F9F9F9;
    border-color:#DEDEDE;
    -moz-border-radius:0 0 0 6px;
    border-radius:0 0 0 6px;
    -webkit-border-radius:0 0 0 6px;
    border-style:none solid solid;
    border-top:0 none;
    border-width:0 1px 1px;
    padding:8px 12px 12px;
}

.prefspaneltab h3 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 28px;
    margin-top: 7px;
}

.prefspaneltab button {
    position: relative;
    left: 1.5em;
}

/* For Dialog Boxes */
.spiffy-dialog-caption {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    text-indent: 20px;
}

.spiffy-dialog-confirm-caption {
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -266px;
    color: black;
}

.spiffy-dialog-caption-close {
    position: absolute;
    top: 2px;
    right: 2px;
}

.spiffy-dialog-caption-close-icon {
    background: transparent url('images/spiffy_ui_images.png') no-repeat scroll 0 -10px;
    width: 22px;
    height: 22px;    
    margin-top: 3px;
    margin-right: 5px;
}

.spiffy-dialog-caption-close-icon a {
    text-decoration: none;
}
.spiffy-dialog-button-bar {
	text-align: right;
}

.spiffy-dialog-confirm-text {
	font-size: 12px;
	line-height: 14px;
	padding: 4px 5px 15px 5px; 	
	width: 400px;
}

.gwt-DialogBox .Caption {
  background: #F1F1F1;
  padding: 4px 4px 4px 8px;
  cursor: default;
  border-bottom: none;
  border-top: none;
}
.gwt-DialogBox .dialogContent {
}
.gwt-DialogBox .dialogMiddleCenter {
  padding: 3px;
  background: white;
}
.gwt-DialogBox .dialogBottomCenter {
    background: white;
    border-bottom: thin solid #464646;
}
.gwt-DialogBox .dialogMiddleLeft {
    background: white;
    border-left: thin solid #464646;
}
.gwt-DialogBox .dialogMiddleRight {
    background: white;
    border-right: thin solid #464646;
}
.gwt-DialogBox .dialogTopLeftInner {
  width: 5px;
  zoom: 1;
}
.gwt-DialogBox .dialogTopRightInner {
  width: 8px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomLeftInner {
  width: 5px;
  height: 8px;
  zoom: 1;
}
.gwt-DialogBox .dialogBottomRightInner {
  width: 5px;
  height: 8px;
  zoom: 1;
}

.gwt-DialogBox .dialogTopCenterInner {
    margin-top: -1px;
    cursor: move;
    border-top: thin solid #464646;
}

.gwt-DialogBox .dialogTopCenterInner .Caption {
    cursor: move;
}
    

.gwt-DialogBox .dialogTopLeft {
    background: #F1F1F1;
    border-left: thin solid #464646;
    border-top: thin solid #464646;
}
.gwt-DialogBox .dialogTopRight {
    background: #F1F1F1;
    border-right: thin solid #464646;
    border-top: thin solid #464646;
}
.gwt-DialogBox .dialogBottomLeft {
    background: white;
    border-left: thin solid #464646;
    border-bottom: thin solid #464646;
    -moz-border-radius-bottomleft: 0.5em;
    border-radius-bottomleft: 0.5em;
    -webkit-border-radius-bottomleft: 0.5em;
}
.gwt-DialogBox .dialogBottomRight {
    background: white;
    border-right: thin solid #464646;
    border-bottom: thin solid #464646;
    -moz-border-radius-bottomright: 0.5em;
    border-radius-bottomright: 0.5em;
    -webkit-border-radius-bottomleft: 0.5em;
}
* html .gwt-DialogBox .dialogTopLeftInner {
  width: 5px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogTopRightInner {
  width: 8px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomLeftInner {
  width: 5px;
  height: 8px;
  overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomRightInner {
  width: 8px;
  height: 8px;
  overflow: hidden;
}

/* MultivalueSuggestBox */

.suggestPopupContent table {
    width: 327px;
}

.gwt-SuggestBoxPopup {
    margin-left: 0px;
    margin-top: -7px;
}

.gwt-SuggestBoxPopup .item {
    background: white;
    color: black;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 0px 8px;
    font-size: 12px;
    line-height: 14px;
}

.gwt-SuggestBoxPopup .item-selected {
    background-color: #7ca1c2;
    color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.gwt-SuggestBoxPopup .suggestPopupContent {
    border: thin solid #464646;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 2px #C8C8C8;
}

.gwt-SuggestBoxPopup .suggestPopupTop, .gwt-SuggestBoxPopup .suggestPopupBottom, 
.gwt-SuggestBoxPopup suggestPopupTopLeft, .gwt-SuggestBoxPopup .suggestPopupTopCenter, .gwt-SuggestBoxPopup .suggestPopupTopRight, 
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft, .gwt-SuggestBoxPopup .suggestPopupMiddleRight, 
.gwt-SuggestBoxPopup .suggestPopupBottomLeft, .gwt-SuggestBoxPopup .suggestPopupBottomCenter, .gwt-SuggestBoxPopup .suggestPopupBottomRight,
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner, .gwt-SuggestBoxPopup .suggestPopupTopLeft {
    display: none;
}

.autocompleterNext, .autocompleterPrev {
    height: 14px;
    margin-left: 85%;
}

.gwt-SuggestBoxPopup .autocompleterNext {
    background: transparent url('images/arrows.png') no-repeat scroll 0 -557px;
}

.gwt-SuggestBoxPopup .autocompleterPrev {
    background: transparent url('images/arrows.png') no-repeat scroll 0 -591px;
}

.gwt-SuggestBoxPopup .item-selected .autocompleterNext {
    background: transparent url('images/arrows.png') no-repeat scroll -18px -557px;
}

.gwt-SuggestBoxPopup .item-selected .autocompleterPrev {
    background: transparent url('images/arrows.png') no-repeat scroll -18px -591px;
}

.spiffy-mvsb {
    position: relative;
}

.spiffy-mvsb.multivalue {
    border: thin solid darkgray;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.spiffy-mvsb-selected-items {
    
}

.spiffy-mvsb-item {
    background-color: #F9F9F9;
    border: thin solid lightgray;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 2px;
    padding: 2px 18px 2px 2px;
    font-size: smaller;
    position: relative;
    display: inline-block;
}

.spiffy-mvsb-remove {
    background: url("images/spiffy_ui_images.png") no-repeat scroll right -8px transparent;
    height: 22px;
    right: 0px;
    top: 3px;
    position: absolute;
    width: 22px;    
}

.spiffy-mvsb .spiffy-formfeedback {
    top: 0px;
    margin-left: 5px;    
}

.spiffy-mvsb.multivalue .spiffy-formfeedback {
    top: 5px; 
}

.multivalue .gwt-SuggestBox {
    border: none;
    margin: 1px;
    border: 0 none;
    box-shadow: none;
    outline: 0 none;
}

/*the jquery DatePicker has to be on top of a gwt-DialogBox*/
.ui-datepicker {
    z-index: 5050;
    display: none;
}

/*
   Expadable section titles
 */
h2.sectionTitle.expandable, h3.subSectionTitle.expandable {
    cursor: pointer;
    color: #0000AA;
    text-indent: 20px;
}

h2.sectionTitle.expandable {
    background: #EDEEEC url('images/arrows.png') no-repeat scroll 0 -128px;
}

h2.sectionTitle.expandable.expanded {
    background: #EDEEEC url('images/arrows.png') no-repeat scroll 0 8px;
}

h3.subSectionTitle.expandable {
    background: transparent url('images/arrows.png') no-repeat scroll 0 -128px;
}

h3.subSectionTitle.expandable.expanded {
    background: transparent url('images/arrows.png') no-repeat scroll 0 8px;
}

/*
   Weak text is often used for explainations or other text that isn't the focus of the page
 */
.weak {
    color:gray;
    font-size:0.85em;
}

/*
   The styles for the fatal error message panel
 */
#errorpanel {
    background: #E6E6E6;
    border: thin solid darkgray;
    font-size: 18px;
    line-height: 28px;
    color: #E00000;
    position: relative;
    padding: 1em;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    margin-right: 2em;
    display: none;
}

#errorpanel_hide {
    position: absolute;
    top: 5px;
    right: 5px;
    text-indent: -999999px;
    background: url("images/spiffy_ui_images.png") no-repeat scroll 0 -5px transparent;
    width: 22px;
    height: 22px;
}

#errorpanel_hide a {
    text-decoration: none;
}

#errorpanel_hide a {
    text-decoration: none;
}

#pagewarningpanel {
    background: #E6E6E6;
    border: thin solid darkgray;
    font-size: 18px;
    line-height: 28px;
    position: relative;
    padding: 1.5em;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    margin-right: 2em;
    top: 50px;
    display: none;
}


/*
  For Login -Begin
*/
#login_form {
    z-index: 7101;
    border: none;
    width: 275px;
    margin: 15% auto;
    -moz-border-radius: 1em;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-box-shadow:0 4px 18px lightgray;
    background-color:white;
    border:1px solid #E5E5E5;
}

#loginHeaderContainer {
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -webkit-border-radius-topleft: 0.5em;
    -webkit-border-radius-topright: 0.5em;
    border-radius-topleft: 0.5em;
    border-radius-topright: 0.5em;
    height: 55px;
    background:url("images/spiffy_headerslice.png") repeat-x scroll left top transparent;
    /*background: none repeat scroll 0 0 black;*/
}


#login_username, #login_password {
    height: 32px;
    width: 97%;
}

#login_username_row label, #login_password_row label {
    margin-right: 1em;
    margin-top: 1em;
    display: block;
    white-space: nowrap;
}

#login_username_txt, #login_password_txt {
    background:none repeat scroll 0 0 #FBFBFB;
    border:1px solid #E5E5E5;
    font-size:16px;
    margin-bottom:16px;
    margin-right:6px;
    margin-top:2px;
    padding:3px;
    width: 97%;
    height: 28px;
}

#login_titlespan {
  padding-right: 40px;
  font-size: 18px;
  line-height: 24px;
}

#login_glass_pane {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F9F9F9;
  width: 100%;
  height: 100%;
  z-index: 7100; /* has to be greater than gwt-DialogBox in case of token expiration */
  display: none;
}

#login_glass_pane.loginRepeatGlass {
    background: black;
    opacity: 0.1;
}

.login_content {
  background-color:white;
  padding:15px;
  position:relative;
  -moz-border-radius-bottomleft: 0.5em;
  -moz-border-radius-bottomright: 0.5em;
  -webkit-border-radius-bottomleft: 0.5em;
  -webkit-border-radius-bottomright: 0.5em;
  border-radius-bottomleft: 0.5em;
  border-radius-bottomright: 0.5em;
}

.logintitle {
  color: #4D6D8B;
  /*color: black;*/
  margin-bottom: 15px;
  position: relative;
}

.logintitle a {
  position: absolute;
  top: 0px;
  right: 5px;
  margin-left: 10px;
}

.loginDetail {
  left:0;
  overflow:auto;
  position:relative;
  width:100%;
}

#login_submit_button, #loging_logout_link {
    float: right;
    margin-right: 3%;
    margin-top: 1em;
}

#loging_logout_link {
    padding-top: 0px;
}

.loginDetail2 {
  background-color:#ECE0C4;
}

.headTitleConfig {
  line-height:1em;
  color:#ECE0C4;
  font-size:1em;
}

#loginmessage {
  color:gray;
  font-size:0.85em;
}

.marginleft1 {
  margin-left: 5.5em;
}

.loginDetail table {
    margin-top: 1em;
}

.copyrightsymbol {
    font-size: 9px;
    font-family: Verdana,Arial,Sans-serif;
}

/* For sliding grid */
.cell {
    background: white;
    border: 1px solid #DFDFDF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 10px;
}

/* For tooltip */
.gwt-PopupPanel {
    background-color: #FFFFE0;
    border: 1px solid gray;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    z-index: 50;
}

.tooltipContent {
    width: 155px;
}

.tooltipClose {
    float: right;
}
.tooltipCloseIcon {
    background: transparent url(images/spiffy_ui_images.png) no-repeat scroll 0 -12px;
    height: 22px;
    margin-right: -5px;
    margin-top: 3px;
    width: 22px;
}

.tooltipBody {
}

/* For expanding text area */
.expandingArea > textarea, .expandingArea > pre {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}

.expandingArea {
    border: 1px solid #888888;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;   
    position: relative;
}

.expandingArea > textarea,
.expandingArea > pre {
  padding: 5px;
  background: transparent;
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
}

.expandingArea > textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element.
   */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  /* This height is used when JS is disabled */
  height: 100px;
}

.expandingArea.active > textarea {
  /* Hide any scrollbars */
  overflow-x: hidden;
  overflow-y: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;
}

.expandingArea > pre {
  display: none;
}
.expandingArea.active > pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
  width: 100%;
}

/*
 * iFrames are transparent by default and if the page in the frame doesn't have
 * a background color we want to make sure the page underneath doesn't show through.
 */
#spiffyuoauthframe {
    background: white;
}