





body {
   background-color:#ffffff;
   margin:0px;
   padding:0px;
}

body,td,p {
   color:#000000;
}
h1,h2,h3,h4{   
   margin:5px 0px 10px 0px;
   color:#000000;
   vertical-align:middle;
}


hr {
   border:0px;
   height:1px;
   overflow:hidden;
   color:#cccccc;
   background-color:#cccccc;
   margin: 0 5px 5px 5px;
}


* html hr {
   margin-top:-5px;
   position:relative;
   top:5px;
}


.hv {
   float:right;
   direction:ltr;
   margin: 0 4px 8px 8px;
   height: 16px;
   width: 4px;
   background-image:url(divider.gif);
   cursor: default;
}

.visible {
    visibility: visible
}

.hidden {
    visibility: hidden
}

form {
   display:inline;
}

input.tiny {
   width:25px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.tinyError {
   width:25px;
   border: 2px solid red;
   padding-left: 2px;
}


input.mini {
   width:50px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.miniError {
   width:50px;
   border: 2px solid red;
   padding-left: 2px;
}

select.miniError {
   border: 2px solid red;
}

input.small {
   width:100px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.smallError {
   width:100px;
   border: 2px solid red;
   padding-left: 2px;
}

select.medium {
   width:145px;
}

select.mediumError {
   width:145px;
   border: 2px solid red ;
}

input.medium {
   width:145px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.redBorder
{
    border: 2px solid red;
}

td.redText
{
    color:red;
}

input.mediumError {
   width:145px;
   border: 2px solid red;
   padding-left: 2px;
}

input[type=checkbox].checkBoxError {
   outline: 2px solid red;
}

input.large {
   width:200px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.largeError {
   width:200px;
   border: 2px solid red;
   padding-left: 2px;
}

input.xlarge {
   width:300px;
   border: 1px solid #6699cc;
   padding-left: 2px;
}

input.xlargeError {
   width:300px;
   border: 2px solid red;
   padding-left: 2px;
}

input.xxlarge {
   width:400px;
   border: 1px solid #6699cc;
   padding-left: 2px;
   padding-right: 10px;
}

input.xxlargeError {
   width:400px;
   border: 2px solid red;
   padding-left: 2px;
   padding-right: 10px;
}

option {
   overflow: visible;
   clip: auto;
}

div.clearFloats {
   clear:both;
   height:1px;
   overflow:hidden;
   margin-bottom:-1px;
}


/* Framework */

.applicationPalette {
   margin: 7px;
}

.leftContentPane {
   border:7px solid #ccc; 
   vertical-align: top;
}

.rightContentPane {
   border-width: 7px 7px 7px 0; 
   border-style: solid; 
   border-color: #cccccc; 
   vertical-align: top; 
   width:100%;
}
.mainRegion {
   padding-top: 5px;
   background-color: #cccccc;
}
.paletteBg {
   padding-top: 11px;
   background-color: #cccccc;
}

.paletteTop h1 {
   margin: 0px !important;
   font-family: "HP Simplified","Arial",sans-serif;
   font-size:20px;
   
}
.paletteTopButtons {
   margin: 0;
   padding: 6px 8px 0 0;
}
.mainNav {

}
#navigationControl {
   padding: 2px;
}
.mainContentArea {
   width: 95%;
}


/* ------------------------- Scrolling data tables ------------------ */
table.scrollingTable {
   width:100%;
}

.dataTable td, .scrollingTable td, .treeTable td, .propertyViewTable td {
   background-color:#eeeeee;
   border-top:1px solid #ccc;
   vertical-align:top;
}

.scrollingTableDiv {
   clear:both;
   overflow:scroll; 
   width:100%;
   border:1px solid #968F89;
   border-top-width:0px;
   margin-bottom:10px;
}

* html table.tableHasCheckboxes td.iconCell {
   padding-top:3px;
   padding-bottom:2px;
}

/* table padding */
.dataTable td.iconCell,.scrollingTable td.iconCell, .treeTable td.iconCell, .propertyViewTable td.iconCell,
.dataTable th.iconCell,.scrollingTable th.iconCell, .treeTable th.iconCell, .propertyViewTable th.iconCell {
   padding:1px 5px;
}
* html table.tableHasCheckboxes td.iconCell {
   padding-top:3px;
   padding-bottom:2px;
}
.dataTable th.checkboxCell,.scrollingTable th.checkboxCell, .treeTable th.checkboxCell, .propertyViewTable th.checkboxCell,
.dataTable td.checkboxCell,.scrollingTable td.checkboxCell, .treeTable td.checkboxCell, .propertyViewTable td.checkboxCell{
   padding:0px 5px;
}
.dataTable td.editableFieldCell,.scrollingTable td.editableFieldCell, .treeTable td.editableFieldCell, .propertyViewTable th.editableFieldCell,
.dataTable th.editableFieldCell,.scrollingTable th.editableFieldCell, .treeTable th.editableFieldCell, .propertyViewTable th.editableFieldCell {
   padding:2px 4px;
}
.dataTable td, .scrollingTable td, .treeTable td, .propertyViewTable td {
   padding:2px 5px 1px 5px;
}


/* ------------------------ Scrolling data tables end ---------------- */


/* user identification */
div.userId {
   margin:6px 0 8px 96px;
}
td.userId {
   padding: 5px 0 0 15px;
}
td.status {
   text-align: right;
   padding: 5px 23px 0 0;
   color: #999999
}


/* Application Masthead */

.applicationMastheadSmall {
   width: 100%;
   border-top:5px solid #0096D6;
}

.applicationMastheadSmall,
.applicationMastheadSmall div,
.applicationMastheadLarge,
.applicationMastheadLarge div{
   background-color:#ffffff;
   color:#000000;
   vertical-align:top;
}
.mastheadIcon{
   display:inline-block;
   float:left;
   padding-top:20px;
   padding-left:20px;
   width:60px;
}
.mastheadTitle {
   display:inline-block;
   width:55%;
   padding:16px 0 0 16px;
}
td.medium {
   width:145px;
}

td.large {
   width:30%;
}

.applicationMastheadLarge .mastheadIcon {
   padding-top:15px;
   padding-left:17px;
}
.applicationMastheadLarge .mastheadTitle {
   padding-top:16px;
   padding-left:16px;
}

.mastheadTitle h1{
   -webkit-margin-before:0.67em;
   -webkit-margin-after:0.67em;
   -webkit-margin-start:0px;
   -webkit-margin-end:0px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   color:#000000;
   font-weight: bold;
}
div.mastheadPhoto {
   background:#fff;
   border-left:7px solid #fff;
   border-right:7px solid #fff;
   width:306px;
   height:57px;
}
.mastheadLinks {
   float:right;
   display:inline-block;
   padding-top:26px;
   padding-right:26px;
   color:#ffffff;
   text-align:right;
}
.applicationMastheadSmall a:link,
.applicationMastheadSmall a:visited,
.applicationMastheadSmall a:active,
.applicationMastheadSmall a:hover,
.applicationMastheadLarge a:link,
.applicationMastheadLarge a:visited,
.applicationMastheadLarge a:active,
.applicationMastheadLarge a:hover{
   color:#3366cc;
   text-decoration:underline;
   font-family: "HP Simplified","Arial",sans-serif;   
}


/* Navigation Control */
#navigationControl {
   margin-top: 2px;
}
div.navigationControlOn,div.navigationControlOff,div.navigationControlHeader {
   background-color:#ffffff;
   padding: 3px 7px 4px 8px;
}

div.navigationControlOn {
   background-color:#99ccff;
   font-size:14px;
   font-family: "HP Simplified","Arial",sans-serif;
}
div.navigationControlOff {
   background-color:#ffffff;
}

div.navigationControlOn a:link,div.navigationControlOn a:visited,div.navigationControlOn a:active {
   text-decoration:none;
   color:#000000;
   font-size:14px;
}
div.navigationControlOff a:link,div.navigationControlOff a:visited,div.navigationControlOff a:active {
   text-decoration:none;
   color:#003399;
   font-size:14px;
}
div.navigationControlOn a:hover {
   text-decoration:underline;
   color:#000000;
}
div.navigationControlOff a:hover {
   text-decoration:underline;
   color:#003399;
   font-size:14px;
   font-family: "HP Simplified","Arial",sans-serif;

}
div.navigationControlSpacer {
   height:5px;
   overflow:hidden;
}
div.navigationControlIcon {
   float:left;
   clear:both;
   margin-top:2px;
   padding-left:2px;
}

/* links */
a:link, a:visited, a:active, a:hover {
   color:#003399;
   text-decoration:none;
}
a:hover {
   text-decoration:underline;
}


/* Tabs */
div.tabSet, div.secondaryTabSet {
   
}
div.tabSet {
   background-image:url(tab_set_bg.gif);
}
* html div.tabSet, * html {

}
div.tabOff {
/* background color and background image are a part of the theme css */
   background-color:#5a5a5a;
   background-position:top right;
   background-repeat:no-repeat;
   color:#ffffff;
   padding:2px 13px 4px 10px;
   border-bottom:2px solid #fff;
   cursor:pointer;
   font-family: "HP Simplified","Arial",sans-serif;
   font-size:18px;
   height:24px;
}
div.tabOn {
   background-color:#0096d6;
   color:#ffffff;
   padding:2px 13px 6px 10px;
   font-family: "HP Simplified","Arial",sans-serif;
   font-size:18px;
   height:24px;
}
div.tabOff a:link,
div.tabOff a:visited,
div.tabOff a:active,
div.tabOff a:hover{
   color:#ffffff;
   text-decoration:none;
}
div.tabOn a:link,
div.tabOn a:active,
div.tabOn a:visited,
div.tabOn a:hover{
   color:#ffffff;
   text-decoration:none;
}
div.secondaryTabSet div.tabOn{
   background-color:#ffffff;
   border-right:3px solid #cccccc;
}
div.tabBottomLine {  
   clear:both;
   height:3px;
   overflow:hidden;
   background-color:#cccccc;
}
div.tabOff {
   min-width:88px;
}
div.tabOn {
   min-width:89px;
}
div.secondaryTabSet div.tabOn{
   min-width:59px;
   padding:1px 13px 5px 10px;
}


/* Command Button */
div.buttonSet {
   float:right;
   margin-bottom:10px;
}

div.bWrapperUp,
div.bWrapperOver,
div.bWrapperDown,
div.bWrapperDisabled {
   float:right;
   direction:ltr;
   margin-left:8px;
   margin-bottom:4px;
}

/* buttonsAreLeftAligned is a modifier class, modifying buttonSet */
div.buttonsAreLeftAligned, 
div.buttonsAreLeftAligned div.bWrapperUp,
div.buttonsAreLeftAligned div.bWrapperOver,
div.buttonsAreLeftAligned div.bWrapperDown,
div.buttonsAreLeftAligned div.bWrapperDisabled {
   text-align:center;
   float:left;
   margin-left:0px;
   margin-right:8px;
}

/* buttonsAreRightAligned is a modifier class, modifying buttonSet */
div.buttonsAreRightAligned, 
div.buttonsAreRightAligned div.bWrapperUp,
div.buttonsAreRightAligned div.bWrapperOver,
div.buttonsAreRightAligned div.bWrapperDown,
div.buttonsAreRightAligned div.bWrapperDisabled {
   float:right;
   margin-left:8px;
   margin-right:0px;
   width:100%;
}


div.verticalButtonSet {
   padding-right:10px;
}
div.verticalButtonSet div.bWrapperUp,
div.verticalButtonSet div.bWrapperOver,
div.verticalButtonSet div.bWrapperDown,
div.verticalButtonSet div.bWrapperDisabled {
   float:none;
   margin-left:0px;
}

/* this position relative css is what turns the three divs into the 3px slant effect */
div.bWrapperUp div,
div.bWrapperOver div,
div.bWrapperDown div,
div.bWrapperDisabled div{
   position:relative;
   left:-1px;
   top:-1px;
}

button.hpButtonSmall,input.hpButtonSmall {
   padding:0px 4px;
   height:19px;
   min-width:19px;
   color: #ffffff; 
}

button.helpButton,input.helpButton {
   padding:0px 3px 0px 2px;
   color: #ffffff; 
}

div.bEmphasized button,
div.bEmphasized input,
div.bEmphasized submit{
   background-color:#336633;
   color:#ffffff;
}

div.bDivider {
   float:right;
   direction:ltr;
   margin: 0 4px 8px 8px;
   height: 16px;
   width: 4px;
   height:19px;
   background-image:url(divider.gif);
   cursor: default;
}
div.bDividerBlank {
   float:right;
   direction:ltr;
   margin: 0 2px 8px 8px;
   height: 16px;
   width: 4px;
}

 
input.hpButton {
   height:19px;
   min-width:95px; 
}

input.hpStdButton {
   height:19px;
   color: #ffffff; 
   min-width:89px;
}

input.hpStdButtonLarge {
   height:19px;
   color: #ffffff; 
   text-align:center;
   min-width:110px;
}

button.hpButton {
   height:19px;
   color: #ffffff; 
   min-width:95px;
}

button.hpStdButton {
   height:19px;
   color: #ffffff; 
   min-width:89px;
}

button.hpStdButtonLarge {
   height:19px;
   color: #ffffff;  
   text-align:center;
   min-width:110px;
}


/* works to eliminate the pushed-in button movement on mozilla, 
at the expense of an extra pixel of button jutting out on the 
left side during the pushed-in state.   
button.hpButton:active,input.hpButton:active {
   margin-left:-1px;
   margin-right:1px;
} */


div.verticalButtonSet {
   padding-left:13px;
}

/* LABEL, TEXT,  NOTES  */
.pad10 {
   padding:10px;
}
.pad6x10 {
   padding:6px 10px;
}
.margin2 {
   margin:2px;
}

/* table cell padding */
table.tablePad3 td {
   vertical-align: top;
   padding-bottom: 3px;
}

td.aln {
  text-indent:-4px;
}

td.tableCellNote {
   padding: 7px 0 9px 0 !important;
}

/* LIST STYLES  */
ul,ol {padding-top:5px;margin-top:0px;padding-bottom:10px;margin-bottom:0px;}
ul ul, ol ol, ul ol, ol ul {padding-top:0px;padding-bottom:10px;margin-top:0px;margin-bottom:0px;}
ul {margin-left: 22px; padding-left: 0px;}
ol {margin-left: 22px; padding-left: 0px;}

          ul li,
      ol ul li,
 ol ul ul li,
 ol ol ul li,
 ul ol ul li
 {
   list-style-image:url(bullet.gif);
   margin-bottom:2px;
}
          ol li,
      ul ol li,
 ul ol ol li,
 ul ul ol li,
 ol ul ol li
{
   list-style-image:none;
}
ol li ol li {
   list-style:lower-alpha;
}
ol li ol li ol li{
   list-style:lower-roman;
}

/*titles and subtitles*/
h1.pageTitle {
   margin-top:11px;
   margin-bottom:8px;
   margin-left:8px;
}
div.pageTitleRightArea {

}
div.subTitleBottomEdge {
   height:3px;
   overflow:hidden;
   background:#484848;
}
div.subTitleIcon {
   float:right;
   margin-top:2px;
}




/* PLS specific styles */


/* supplies */
td.supplyInfo {
  width:350px;
}  

.hpGasGaugeBorder {
  border: 1px solid #000000;
  height:11px;
  padding:0px;
  width:100%;
}

.hpMobileGasGaugeBorder {
  border: 1px solid #FFFFFF;
  height:11px;
  padding:0px;
  width:100%;
}

.SupplyTonerGif { 
   width:10%;
}

a.SupplyLinks { 
   text-decoration:underline;
   color:#003399;
}

.alertbox_div {
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:10px;
   border:7px solid #cccccc; 
   vertical-align:top; 
   padding:1px 10px 0px 1px;
   width:411px;
   height:auto;
   text-align:center;
}

.alertboxText_div {
   font-size:14px;
   width:310px;
   height:auto;
   padding-left:50px;
   vertical-align:top; 
   text-align:center;
   white-space:pre-wrap;
   word-wrap:break-word;
}

.alertboxButtons_div {
   padding:0px 8px 10px 8px;
   float:none;
   margin-left:auto;
   margin-right:auto;
}

div.note_div {
    padding:10px 0px 10px 0px;
}

div.item_div {
    padding:1px 1px 0px 1px;
    display: inline;
}

div.value_div {
    padding:1px 1px 0px 25px;
    display: inline;
}

div.buttons_div {
    float:right;
    padding:10px 1px 10px 1px;
}

div.apply_button {
    padding:0 .5em;
    display: inline;
}

div.cancel_button {
    padding:0 .5em;
    display: inline;
}

/* alert & error box styles */
.alertbox {
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:10px;
   border:7px solid #cccccc;
   vertical-align:top; 
   padding:15px 10px 0px 15px;
   width:311px;
   height:auto;
   text-align:center;
}

.errorbox {
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:10px;
   border:7px solid #cccccc; 
   vertical-align:top; 
   padding:15px 10px 0px 15px;
   width:311px;
   height:100px;
   text-align:center;
}
.errorboxWide {
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:10px;
   border:7px solid #cccccc; 
   vertical-align:top; 
   padding:15px 10px 0px 15px;
   width:500px;
   height:auto;
   text-align:center;
}
.alertboxImage {
   background-image:url(info.gif);
   background-repeat:no-repeat;
   padding:0px 15px 0px 15px;
   width:26px;
   vertical-align:top; 
}

.connectingboxImage {
   background-image:url(loading.gif);
   background-repeat:no-repeat;
   padding:0px 15px 15px 15px;
   width:26px;
   vertical-align:top; 
}

.connectedboxImage {
   background-image:url(CheckMark_20x20.gif);
   background-repeat:no-repeat;
   padding:0px 15px 15px 15px;
   width:26px;
   height:20px;
   vertical-align:top; 
}

.errorboxImage {
   background-image:url(status_critical_15.gif);
   background-repeat:no-repeat;
   padding:0px 15px 0px 15px;
   width:26px;
   vertical-align:top; 
}

.enabledImage {
   background-image:url(status_normal_15.gif);
   background-repeat:no-repeat;
   padding:0px 15px 0px 15px;
   vertical-align:top; 
}

.disabledImage {
   background-image:url(status_critical_15.gif);
   background-repeat:no-repeat;
   padding:0px 15px 0px 15px;
   vertical-align:top; 
}

.en_disabledImageText {
   height:30px;
   padding-left:30px;
   vertical-align:top;
   text-align:left;
}

.alertboxText {
   width:240px;
   height:auto;
   padding-left:30px;
   vertical-align:top; 
   text-align:left;
   white-space:pre-wrap;
   word-wrap:break-word;
}

.errorboxText {
   width:240px;
   height:62px;
   padding-left:30px;
   vertical-align:top; 
   text-align:left;
   color:rgb(204,0,0);
}
.errorboxTextWide {
   width:auto;
   height:auto;
   vertical-align:top; 
   text-align:left;
   word-wrap:break-word;
}
.alertboxButtons {
   padding:20px 0px 7px 8px;
   float:none;
   margin-left:auto;
   margin-right:auto;
}
.alertboxButtonsICC {
   padding:0px 10px 20px 8px;
   float:none;
   margin-left:auto;
   margin-right:auto;
}

img {
   border: none;
}

/* scrolling frame box */

.scrollbox {
   margin-left:auto;
   margin-right:700px;
   margin-top:10px;
   margin-bottom:10px;
   vertical-align:top; 
   height:auto;
   /*text-align:center;*/
}

/* url link styles */
.linkHover a:hover {
   text-decoration:underline;
   color:#003399;
}


/* common widths and heights */
.height100 {
   height:100%;
}
.height462px {
   height:462px;
}
.height135px {
   height:135px;
}
.height250px {
   height:250px;
}
.height117px {
   height:117px;
}
.height100px {
   height:100px;
}
.height30px {
   height:30px;
}
.height60px {
   height:60px;
}
.height50px {
   height:50px;
}
.height2px {
   height:2px;
}
.width600px {
   width:600px;
}
.width560px {
   width:560px;
}
.width350px {
   width:350px;
}
.width325px {
   width:325px;
}
.width235px {
   width:235px;
}
.width170px {
   width:170px;
}
.width150px {
   width:150px;
}
.width100px {
   width:100px;
}
.width90px {
   width:90px;
}
.width50px {
   width:50px;
}
.width50pc {
   width:50%;
}
.width40px {
   width:40px;
}
.width20px {
   width:20px;
}
.width10px {
   width:10px;
}
.width100 {
   width:100%;
}
.width80 {
   width:80%;
}
.width75 {
   width:75%;
}
.width65{
   width:65%;
}
.width60 {
   width:60%;
}
.width40 {
   width:40%;
}
.width35 {
   width:35%;
}
.width30 {
   width:30%;
}
.width25 {
   width:25%;
}
.width20 {
   width:20%;
}
.width15 {
   width:15%;
}
.width10 {
   width:10%;
}


/* common aligns */
.valignTop{
  vertical-align:top;
}

.valignMiddle{
  vertical-align:middle;
}

.valignBottom{
  vertical-align:bottom;
}

.alignLeft{
  text-align:left;
}

.alignRight{
  text-align:right;
}

.alignCenter{
  text-align:center;
}

.floatRightePrint{
  float:right;
}

.floatLeftePrint{
  float:left;
}

.marginRight20px{
  margin-right:20px;
}

.marginLeft20px{
  margin-left:20px;
}

.clearBoth{
  clear:both;
}

/* common border styles */
.borderRidge {
  border-style:ridge;
}

/* common colors */
.bgcolorEEEEEE {
   background-color:#EEEEEE;
}
.bgcolor003366 {
   background-color:#003366;
}
.bgcolor3366CC{
   background-color:#3366CC;
}
.bgcolor968F89{
   background-color:#968F89;
}
.bordercolor003366{
   border-color:#003366;
}

/* support and supplies common styles */
body.supportAndsupplies
{
  background-color:#FFFFFF;
  color:#000000;
  margin-top:0;
  margin-left:0; 
}

td.suppliesSupportFont a:link,
td.suppliesSupportFont a:active,
td.suppliesSupportCopyrightFont a:link,
td.suppliesSupportCopyrightFont a:active{
  color:#003399;
}

td.suppliesSupportFont a:visited,
td.suppliesSupportCopyrightFont a:visited{
  color:#660066;
}

td.suppliesSupportWhiteFont a:link,
td.suppliesSupportWhiteFont a:active,
td.suppliesSupportWhiteFont a:visited{
  color:#FFFFFF;
}

td.ColorLokFont a:link,
td.ColorLokFont a:active,
td.ColorLokFont a:visited{
  color:#003399;
}

.checkboxIndent {
   margin-left:25px;
}

.modal {
		background-color:#fff;
		display:none;
		width:350px;
		padding:15px;
		text-align:left;
		border:2px solid #333;
		opacity:0.8;
}
	
.modal h2 {
		background:url(/img/global/info.png) 0 50% no-repeat;
		margin:0px;
		padding:10px 0 10px 45px;
		border-bottom:1px solid #333;
		font-size:20px;
}

.cellAlignedToTheRight
{
position:absolute;
right:20px;
}

div.floatRight
{
    float:right;
    position:absolute;
    right:20px;
}

.lock
{
padding:10px 0 10px 45px;
background:url(lock.png) 0 0 no-repeat;
height:50px;
-ms-high-contrast-adjust:none;
width:50px;
}




/*  avoid styling the span tag wrt any font settings.  */
body, th, td, div, p, button, select, input {
   font-family: "HP Simplified","Arial",sans-serif;
}

body,td,input,button,th,caption {
   font-size:75%;
}
* html body,* html td,* html input,* html button,* html th {
   font-size:72%;
}
select {
   font-size:100%;
}


/*  percentage fonts must be used carefully */
/* for ie we dont want to set body td, body th, back to 100%, as these dont properly inherit from the body in the first place.  */
/*  oddly enough though, td does inherit from div in IE, although not from anything else.*/
div td,body input, body button,
td input, td button, th input, th button, 
body div,body table, body td, body th, body caption{
   font-size:103%;
}

h1 {font-size:180%;font-weight:normal; }
h2 {font-size:170%;font-weight:normal;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {
   margin: 0 0 7px 0;
   font-size:100%;
}

table.applicationMastheadLarge td.mastheadTitle h1 {
   font-size:200%;
}

div.navigationControlHeader {
   font-weight: normal;
}

div.tabOff,div.tabOn {
   float:left;
   text-align:center;
   height:24px;
   font-size:18px;
   font-weight:bold;
   white-space:nowrap;
   padding:2px 13px 6px 10px;
}

button.hpButtonVerySmall,input.hpButtonVerySmall{
   padding:0px 2px;
   height:11px;
   font-size:9px;
   color: #ffffff; 
}

button.hpButton,
button.hpStdButton,
button.hpStdButtonLarge,
button.hpButtonSmall,
button.hpButtonVerySmall,
input.hpStdButton,
input.hpStdButtonLarge,
input.hpButton,input.hpButtonSmall,
input.hpButtonVerySmall {
   background-color: #0096d6;
   position:relative;
   left:-1px;
   top:-1px;   
/* background color a part of the theme css */
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   cursor:hand;
   height:27px;
   padding-bottom:3px;
}

h3.subTitle {
   background-color:#666;
   font-weight:normal;
   color:#fff;
   padding:3px 5px 3px 9px;
   margin:0px;
   font-size:130%;
}

div.inline_ {
    display: inline;
}
div.collapsedDivHeader {
   font-weight:bold;
   margin-bottom:2px;
   font-size:larger;
   display: inline;
   margin: 2px;
}

div.expandImage {
    background: url("expand_arrow.gif") no-repeat scroll 0 0.3em transparent;
    min-height: 1em;
    min-width: 1em;
    padding-left: 1em;
    margin-right: 1px;
    display: inline;
}

div.collapseImage {
    background: url("collapse_arrow.gif") no-repeat scroll 0 0.3em transparent;
    min-height: 1em;
    min-width: 1em;
    padding-left: 1em;
    margin-right: 1px;
    display: inline;
}

.buttonA {  
   margin-left: 5px;
   background-color:#0096d6; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   cursor:hand;
   width:86px;
   height:23px;
}

.buttonHelp { 
   margin-left:5px;
   background-color:#0096d6; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   cursor:hand;
   width:18px;
   height:23px;
}

.buttonB { 
   margin-right:5px;
   margin-left:5px;
   background-color:#0096d6; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   height:1.85em;
   border:0;
   overflow:hidden;
   white-space:nowrap;
   padding:0 .5em;
   width:auto;
   border-radius: 0 .5em 0 0;
}



/* PLS specific styles */

/*buttons*/
.buttonTxtSize { 
   margin-right:5px;
   margin-left:5px;
   background-color:#0096d6; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   height:1.85em;
   border:0;
   overflow:hidden;
   white-space:nowrap;
   padding:0 .5em;
   width:auto;
   border-radius: 0 .5em 0 0;
}

.disabledButtonTxtSize { 
   margin-right:5px;
   margin-left:5px;
   background-color:#cccccc; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   height:1.85em;
   border:0;
   overflow:hidden;
   white-space:nowrap;
   padding:0 .5em;
   width:auto;
   border-radius: 0 .5em 0 0;
}

.CancelButtonTxtSize { 
   margin-right:5px;
   margin-left:5px;
   background-color:#767676; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   height:1.85em;
   border:0;
   overflow:hidden;
   white-space:nowrap;
   padding:0 .5em;
   width:auto;
   border-radius: 0 .5em 0 0;
}


.button4TallTxt {
   margin-right:5px;
   margin-left:5px;
   margin-top: 3px;
   margin-bottom: 3px;
   background-color:#0096d6; 
   color: #ffffff; 
   font-weight:normal;
   text-decoration: none;   
   font-family: "HP Simplified","Arial",sans-serif;
   text-align:center;
   cursor:pointer;
   cursor:hand;
   height:28px;
   padding-bottom:3px;
}

/*tables*/
td.tableColumnHeader {
   background-color:#968F89;
   font-weight:normal;
   color:#FFFFFF;
   padding:3px 5px 3px 9px;
   margin:0px;
   font-size:100%;
}
td.tableDataCellStand {
   background-color:#EEEEEE;
   font-weight:normal;
   color:#000000;
   padding:3px 5px 3px 9px;
   margin:0px;
   font-size:100%;
}
td.tableDataCellAlt {
   background-color:#F5F5F5;
   font-weight:normal;
   color:#000000;
   padding:3px 5px 3px 9px;
   margin:0px;
   font-size:100%;
}
td.tableDataLabelStand {
   background-color:#EEEEEE;
   color:#000000;
   margin:0px;
   padding:3px 5px 3px 9px;
   font-size:larger;
   font-weight:normal; 
   width:35%;
}

td.tableDataLabelAlt  {
   background-color:#F5F5F5;
   font-weight:normal; 
   color:#000000; 
   padding:3px 5px 3px 9px;
   margin:0px;
   font-size:larger;
   width:35%;
}


/*fonts*/
.boldFont {
  font-weight:normal; 
}

.itemFont {
  font-size:normal;
  width:65%;
}

.labelFont { 
  font-size:normal;
  font-weight:bold; 
  width:35%;
}

.labelFontNoWrap {
  white-space:nowrap;
  font-size:normal;
  font-weight:bold; 
  width:35%;
}

.menuFont {
  font-size:larger;
  font-weight:bold;
}

table.collapsedBorder {
  border-collapse: collapse;
}

.border1pxGray{ 
  border: 1px solid gray;
}

.itemFontLonger {
  font-size:larger;
  width:55%;
}

.labelFontLonger { 
  font-size:larger;
  font-weight:normal; 
  width:45%;
}

.labelFontError { 
  font-size:larger;
  font-weight:normal; 
  width:35%;
  color:rgb(204,0,0);
}

.itemLargeFont {
  font-size:18px;
}

.labelLargeFont { 
  font-weight:normal; 
  font-size:18px;
}

/* supplies */
.hpDocVaryText {
  font-size:7pt;
  width:100%; 
}

.itemSpsFont {
  font-size:larger;
  width:10%;
  white-space:nowrap; 
}

.labelSpsFont { 
  font-size:larger;
  font-weight:normal; 
  width:90%;
  white-space:nowrap; 
}

.SupplyName { 
   background-color:#003366;
   font-weight:normal;
   color:#FFFFFF;
}

/* support and supplies common styles */
.suppliesSupportHeaderFont {
  font-size:18pt;
}

.suppliesSupportFont {
   font-size:12pt;
}

.suppliesSupportFontButton {
   font-size:12pt;
   vertical-align:top;
}

td.suppliesSupportWhiteFont {
   font-size:12pt;
   font-weight:normal;
   color:#FFFFFF;
}

.suppliesSupportCopyrightFont {
   font-weight:normal;
   font-family: "HP Simplified","Arial",sans-serif;
   font-size:9pt;
}


@media (min-width: 768px){
    .hide-lg{
        display: none;
    }
    .language-list a{
        padding-right: 10px;
    }
    .mainNav{
        min-width: 200px;
    }
    b.menuFont{
        display: block;
    }
    b.menuHeaderFont{
        display: block;
    }
    #language-list{
        padding: 5px;
        text-align: right;
    }
    #language-list a{
        padding-right: 20px;
    }
    .floatLeftePrint img{
        width: 253px;
        height: 160px;
    }
    .floatLeftePrintICC img{
        width: 25px;
        height: 25px;
        float: left;
        margin-right: 20px;
    }.floatLeftePrintICC+table{
        width: auto;
    }
    .floatLeftePrint+table{
        width: auto;
    }
    .subLabelFont{
        width: 35%;
    }
}
@media (max-width: 767px){
    .applicationMastheadSmall{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        z-index: 100;
        background-color: #ffffff;
        box-shadow: rgba(0,0,0,0.4) 0 0 8px;
    }
    .applicationMastheadSmall div{
        top: 0;
        height: 100%;
        line-height: 48px;
        position: absolute;
        display: inline-block;
    }
    .applicationMastheadSmall div.mastheadLinks{
        display: none;
    }
    .applicationMastheadSmall div *{
        vertical-align: middle;
    }
    .applicationMastheadSmall .mastheadIcon{
        left: 0;
        width: 40px;
        padding: 0;
        text-align: center;
    }
    .applicationMastheadSmall .mastheadIcon img{
        width: 30px;
        height: 30px;
    }
    .applicationMastheadSmall .mastheadTitle{
        left: 40px;
        right: 40px;
        width: auto;
        margin: 0;
        padding: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .applicationMastheadSmall .mastheadTitle h1{
        margin: 0;
        padding: 0;
    }
    .mastheadBtn {
        right: 0;
        width: 40px;
    }
    .rightContentPane {
        border-width: 0;
    }
    .leftContentPane {
        display: none;
    }
    .applicationPalette {
        margin: 53px 0 0 0;
    }
    .applicationPalette>table:first-of-type{
        width: 100%;
    }
    .show-md{
        display: block;
    }
    .hide-md{
        display: none;
    }
    .fix{
        position: fixed;
    }
    body.fix{
        width: 100%;
    }
    .float-right{
        float: right;
    }
    #menu-btn{
        width: 30px;
        height: 100%;
        padding-right: 10px;
    }
    #menu-area{
        top: 53px;
        z-index: 99;
        width: 100%;
        position: fixed;
        bottom: 0px;
    }
    #menu-container{
        display: none;
        width: 100%;
        max-height: 100%;
        overflow-y: scroll;
        background-color: rgba(255,255,255,1);
        box-shadow: rgba(0,0,0,0.8) 0em 0.2em 0.5em;
    }
    #menu-mask{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
    }
    h1.menuFont{
        font-size: 16px;
        cursor: pointer;
        padding: 15px 10px 15px;
        border-bottom: 1px solid #b3b3b3;
        margin: 0px;
    }
    h1.menuFont:before{
        width: 15px;
        content: "+";
        display: inline-block;
    }
    h1.menuFont.menu-active{
        background-color: #0096D6;
        color: white;
    }
    h1.menuFont.menu-active:before{
        content: "-";
    }
    .sub-menu-container{
        display: none;
    }
    .sub-menu-container div a{
        display: block;
        color: #666;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        padding: 12px 10px 12px 35px;
        border-bottom: 1px solid #b3b3b3;
        background: url(arrow-right-gray.png) 95% center no-repeat;
    }
    .sub-menu-container div a:active{
        background-color: #ccc;
        color: #fff;
    }
    b.menuFont{
        display: block;
        margin: 0px;
        color: #444;
        font-size: 16px;
        cursor: pointer;
        padding: 15px 10px 15px 20px;
        border-bottom: 1px solid #b3b3b3;
    }
    b.menuFont:before{
        width: 15px;
        content: "+";
        display: inline-block;
    }
    b.menuFont.menu-active{
        color: #0096D6;
    }
    b.menuFont.menu-active:before{
        content: "-";
    }
    b.menuHeaderFont {
        display: block;
        margin: 0px;
        color: #444;
        font-size: 16px;
        cursor: pointer;
        padding: 15px 10px 15px 20px;
        border-bottom: 1px solid #b3b3b3;
    }
    .sub-menu-container .sub-menu-container div a{
        padding-left: 40px;
    }
    div.userId{
        width: auto;
        text-align: left;
        margin: 10px 5px 0;
        padding: 0;
        color: #ccc;
        font-weight: bold;
        font-size: 14px;
        word-break: break-word;
    }
    div.userId span{
        margin: 0 0 0 0;
    }
    #language-select{
        min-width: 80px;
        position: relative;
        font-size: 14px;
        padding: 5px;
        cursor: pointer;
        text-align: center;
        color:#3366cc;
    }
    #language-select:active{
        background: none;
    }
    .arrow{
        width: 12px;
        height: 12px;
        margin: 5px 3px;
        transform: rotate(90deg);
        transition: linear .3s;
        -webkit-transform: rotate(90deg);
        -webkit-transition: linear .2s;
        background: url(arrow-right-gray.png) center center no-repeat;
    }
    #language-selector-container{
        float: right;
        position: relative;
    }
    #language-select .arrow{
        float: right;
    }
    .arrow.arrow-up{
        transform: rotate(-90deg);
        transition: linear .3s;
        -webkit-transform: rotate(-90deg);
        -webkit-transition: linear .2s;
    }
    #language-list-mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 97;
    }
    #language-list{
        float: right;
        z-index: 98;
        min-width: 80px;
        right: 1px;
        top: 100%;
        position: absolute;
        background-color: #eee;
        border: 1px solid #aaa;
        border-radius: 0 0 4px 4px;
    }
    #language-list a{
        min-width: 80px;
        display: block;
        font-size: 14px;
        padding: 10px;
        text-align: start;
    }
    #language-list a:hover{
        background-color: #ddd;
        text-decoration: none;
    }
    #language-list a:active{
        background-color: #888;
        color: white;
        text-decoration: none;
    }
    input[type=submit], input[type=reset], input[type=button]{
        -webkit-appearance: none;
    }
    .rightContentPane .paletteTop td{
        font-size: 80%;
        display: inline-block;
    }
    .rightContentPane .paletteTop td.paletteTopButtons{
        float: right;
    }
    .rightContentPane table{
        word-break: break-word;
    }
    .rightContentPane table.mainContentArea{
        width: 100%;
    }
    .rightContentPane td.labelLargeFont,
    .rightContentPane td.labelLargeFont~td,
    .rightContentPane td.labelSpsFont,
    .rightContentPane td.labelSpsFont~td,
    .rightContentPane td.labelFontNoWrap,
    .rightContentPane td.labelFontNoWrap~td,
    .rightContentPane td.labelFont,
    .rightContentPane td.subLabelFont,
    .rightContentPane td.labelFont~td,
    .rightContentPane td.itemLargeFont,
    .rightContentPane td.itemSpsFont,
    .rightContentPane td.itemFont{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        white-space: normal;
        display: inline-block;
    }
    .rightContentPane td.labelFont~td{
        width: auto;
        padding-right: 10px;
    }
    .rightContentPane #ipv4StatusDiv td.boldFont{
        display: block;
        width: 100%;
    }
    .rightContentPane table.mainContentArea td.labelLargeFont,
    .rightContentPane table.mainContentArea td.labelFontNoWrap,
    .rightContentPane table.mainContentArea td.labelFont,
    .rightContentPane table.mainContentArea td.subLabelFont,
    .rightContentPane td.labelSpsFont{
        width: 50%;
        vertical-align: top;
    }
    .rightContentPane table.mainContentArea td.itemLargeFont,
    .rightContentPane table.mainContentArea td.itemSpsFont,
    .rightContentPane table.mainContentArea td.itemFont,
    .rightContentPane td.itemSpsFont{
        width: 49%;
    }
    .rightContentPane td.labelLargeFont:only-of-type,
    .rightContentPane td.labelFontNoWrap:only-of-type,
    .rightContentPane td.labelFont:only-of-type,
    .rightContentPane td.labelSpsFont:only-of-type,
    .rightContentPane td.itemLargeFont:only-of-type,
    .rightContentPane td.itemSpsFont:only-of-type,
    .rightContentPane td.itemFont:only-of-type,
    .rightContentPane table.mainContentArea td.labelLargeFont:only-of-type,
    .rightContentPane table.mainContentArea td.labelFontNoWrap:only-of-type,
    .rightContentPane table.mainContentArea td.labelFont:only-of-type,
    .rightContentPane table.mainContentArea td.labelSpsFont:only-of-type,
    .rightContentPane table.mainContentArea td.itemLargeFont:only-of-type,
    .rightContentPane table.mainContentArea td.itemSpsFont:only-of-type,
    .rightContentPane table.mainContentArea td.itemFont:only-of-type{
        width: 100%;
    }
    .rightContentPane table.mainContentArea td.itemLargeFont input[type=text],
    .rightContentPane table.mainContentArea td.itemLargeFont input[type=password],
    .rightContentPane table.mainContentArea td.itemLargeFont select,
    .rightContentPane table.mainContentArea td.itemSpsFont input[type=text],
    .rightContentPane table.mainContentArea td.itemSpsFont input[type=password],
    .rightContentPane table.mainContentArea td.itemSpsFont select,
    .rightContentPane table.mainContentArea td.itemFont input[type=text],
    .rightContentPane table.mainContentArea td.itemFont input[type=password],
    .rightContentPane table.mainContentArea td.itemFont select{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .rightContentPane td.itemFont .labelFontError{
        width: 100%;
    }
    .rightContentPane .width325px{
        display: inline-block;
        width: 100%;
    }
    .rightContentPane p,
    .rightContentPane pre,
    .rightContentPane p.labelFont,
    .rightContentPane p.itemFont{
        word-break: break-word;
        white-space: normal;
        width: auto;
    }
    .rightContentPane h1{
        padding: 0px 0px 3px 8px;
        word-break: break-word;
        white-space: normal;
        width: auto;
    }
    .floatLeftePrint img{
        width: 100%;
        height: 100%;
    }
    .floatLeftePrint+table{
        width: 100%;
    }
    .subLabelFont{
        display: inline-block;
    }
    div.item_div{
        width: 50%;
        display: inline-block;
    }
    div.value_div{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 48%;
        display: inline-block;
        padding: 0;
    }
    .alertbox{
        width: auto;
        max-width: 320px;
    }
    .alertboxText{
        width: auto;
        max-width: 240px;
    }
    input.large,
    input.xlarge,
    table#newCertData,
    .rightContentPane table.mainContentArea td.tableDataCellStand.show-md,
    .rightContentPane table.mainContentArea td.tableDataCellAlt.show-md{
        width: 95%;
    }
}
@media (max-width: 320px){
    .show-sm{
        display: block;
    }
    .rightContentPane table.mainContentArea td.labelLargeFont,
    .rightContentPane table.mainContentArea td.labelFontNoWrap,
    .rightContentPane table.mainContentArea td.labelFont,
    .rightContentPane table.mainContentArea td.subLabelFont,
    .rightContentPane td.labelSpsFont{
        display: block;
        width: 100%;
    }
    .rightContentPane table.mainContentArea td.itemLargeFont,
    .rightContentPane table.mainContentArea td.itemSpsFont,
    .rightContentPane table.mainContentArea td.itemFont,
    .rightContentPane td.itemSpsFont{
        display: block;
        width: 100%;
    }
    div.item_div,
    div.value_div{
        width: 100%;
        display: block;
    }
}

