/*******************************************************
PAGE STRUCTURE
********************************************************/
/*-- Global --*/

html
{
height: 100%;
overflow: hidden;
width: 100%;
}

body
{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
font-size: 12px;
color: #039;
font-family: arial, helvetica, sans serif; 
}

body * {font-size: 1em;}


#stageEnv {
    color: #33FF00;
    font-size: 11px;
    padding: 3px 0px 0px 0px;
    vertical-align: top;
    display: inline-block;
}

#devEnv {
    color: #FF9900;
    font-size: 11px;
    padding: 3px 0px 0px 0px;
    vertical-align: top;
    display: inline-block;
}

#prodEnv {
    font-size: 11px;
    padding: 3px 0px 0px 0px;
    vertical-align: top;
    display: inline-block;
}


#global
{
/*width: 100%;*/
/*height: 100%;*/
}

* html #global
{
/* this is for IE6 only */
height: 800px;
}

#browserCompatibilityWarning {
    color: red;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 3px 0px 0px;
    vertical-align: top;
    display: inline-block;
}

/*
--- BANNER
*/

#banner {
/*_position: absolute;*/
position: relative;
top: 0px;
left: 0px;
z-index: 10;
/*height: 44px;*/ 
/*border-bottom: solid 1px #039;*/
background: #FFF;
width: 100%;
}

.iSpekLogo {
/*position: absolute;*/
z-index: 10;
top: 0px;
left: 0px;
width: 150px;
height: 43px;
background: transparent url(../images/ispek_lite/ispeklogo3.gif) no-repeat;
color: #FFF;
display: block;
text-decoration: none;
}

.bannerTabs {
/*position: absolute;*/
/*top:8px; left: 202px;*/
margin-bottom: -1px;
z-index: 8;
white-space: nowrap;
}

* html #tabBar
{
/*this is for IE6 only in the reesource management area*/
top: 13px !important;
}

.bannerTab, .bannerTabActive, .bannerTabDisabled {
/*width: 103px;*/
min-width: 35px;
max-width: 150px;
height: 22.5px; /* extra .5 */
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #039 !important;
background: #FFF;
text-align: right;
vertical-align: middle;
line-height: 8pt;
margin: 0;
padding: 3px 8px 1px 18px;
display: inline-block; 
border: solid 1px #039;
}

td a.bannerTab {
/*white-space: normal;*/
}

/* required for IE7 / IE8 compatibility view */
*+html .bannerTab, *+html .bannerTabActive, *+html .bannerTabDisabled {
width: 103px;
line-height: 10pt;
}

.bannerTabSpacer {
width: 3px;
height: 22px;
background: #FFF;
display: inline-block;
vertical-align: bottom;
padding-top: 4px;
margin: 0px;
border-bottom: solid 1px #039;
}

.bannerTab:hover {
font-weight: bold;
background: #D7E6F1;
}

.bannerTabActive {
background: #D7E6F1;
/*border: solid 1px #039;*/ 
border-bottom: solid 1px #D7E6F1;
}

.bannerTabDisabled {
color: #666666 !important;
}

.bannerTab:visited, .bannerTabActive:visited { color: #039; }




/*default page
--------------------------------------*/

.navbody {
background: #D7E6F1;
margin: 0;
padding-top: 0px;
}


/*
--- MENU
*/
.menu {
position: absolute;
left: 0;
top: 52px;
bottom: 0px;
z-index: 5;
width: 195px;
background-color: #FFF;
overflow: auto;
padding: 8px 0 0 5px;
border: solid 1px #039;
border-width: 0 1px 1px 0;
}

* html .menu {
  height:expression(document.body.clientHeight-52); 
}

.welcomeBody .menu {border: none;}




.defaultBckgrnd {
background: #D7E6F1;
}


/*
--- PAGE CONTENT
*/

.readOnly
{
/*background-color: #CCFF99;*/
background-color: #F0F0F0;
 
}

.editable
{
background-color: #FFFFFF;
}

.mainFrame {
position: absolute;
left: 210px;
top: 52px;
bottom: 0;
right: 0;
/*background: #FFF;*/
overflow: auto;
margin-left: 0px;
border-left: solid 1px #039;
/*border-top: solid 1px #039;*/
border-bottom: solid 1px #039;
}
* html div.mainFrame {
  height:expression(document.body.clientHeight-52); 
  width:expression(document.body.clientWidth-210); 
}

div.main {
/*background: #FFF; */
padding: 10px 20px 0 20px;
}




div.pageContent {
width: 100%;
}

* html div.pageContent { width: 96%; }

/*
--- FOOTER
*/

#footerLinks {
/*position: absolute;*/
z-index: 55;
/*width: 60%;*/
top: 0px; right: 0px;
margin: 0px;
float: right;
}

/*
#footerLinks a {
display: block; float: right; 
padding: 3px 5px 2px 5px;
margin: 0;
text-decoration: none;
border: solid 1px #CCC;
background: #F0F0F0;
font-size: 10px;
color: #444;
position: relative;
z-index: 8;
}*/

#footerLinks a, #footerLinks img {
display: inline-block;
/*float: right;*/ 
width: 21px;
height: 17px;
overflow: hidden;
padding: 0;
margin: 0px 2px 0 0;
border: none;
text-indent: -20000px; /* hack to hide underlined links */
}

#footerLinks a:hover {
background: #CCC;
border: solid 1px #999;
color: #222 !important;
border: none; 
}
#footerLinks a:visited {
color: #444;
}

#footerLinks #welcomePageLink {
background: transparent url(../images/sprites/sprites1.png) 1px -72px no-repeat;
}
#footerLinks #welcomePageLink:hover {background-position: -29px -72px; }

#footerLinks #iSpekLogoutLink {
background: transparent url(../images/sprites/sprites1.png) 0px -179px no-repeat;
width: 50px !important;
z-index: 10;
position: relative;
}
#footerLinks #iSpekLogoutLink:hover {background-position: 0px -201px; }

#footerLinks #flexProfilesLink {
background: transparent url(../images/sprites/sprites1.png) 0px -153px no-repeat;
}
#footerLinks #flexProfilesLink:hover {background-position: -29px -153px; }

#footerLinks #toolsLink {
background: transparent url(../images/sprites/sprites1.png) 0px -124px no-repeat;
}
#footerLinks #toolsLink:hover {background-position: -29px -124px; }

#footerLinks #schedulerClientLink {
background: transparent url(../images/sprites/sprites2.png) 0px -262px no-repeat;
}
#footerLinks #schedulerClientLink:hover {background-position: -29px -262px; }

#footerLinks #artCreatorLink {
background: transparent url(../images/sprites/sprites1.png) 0px -241px no-repeat;
}
#footerLinks #artCreatorLink:hover {background-position: -29px -241px; }

#footerLinks #helpLink {
background: transparent url(../images/sprites/sprites1.png) 0px -98px no-repeat;
}
#footerLinks #helpLink:hover {background-position: -29px -98px; }

#bannerDateTime {
font-size: 11px;
padding: 3px 5px 0px 0px;
vertical-align: top;
display: inline-block;
/*float: right;*/
}

#bannerCustomerDescription {
font-size: 11px;
padding: 3px 5px 0px 0px;
vertical-align: top;
display: inline-block;
/*float: right;*/
}
#bannerUserDescription {
font-size: 11px;
padding: 3px 5px 0px 0px;
vertical-align: top;
display: inline-block;
/*float: right;*/
}

div.footerButtons {
float: right; 
margin: -4px 0 4px 0;
padding-right: 6px; 
height: 25px;
}
/* tp. This fixes the problem of footerButtons appearing in a container that has a border.
   Apply this to the block (e.g. div) containing footerButtons.
   For a discussion of various options, refer to: http://css-discuss.incutio.com/wiki/Clearing_Space
   Only it doesn't work without introducing a bogus scroll bar in IE8 -- sigh!
*/
/*
.clearfix:after {
    content: "."; 
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
*/

.footerButtons a, .footerButtons img, .footerButtons input, .footerButtons span {float: left;}


.footerButtonsFlex {
	display: flex;
	justify-content: flex-end;
    margin: 4px 0 4px 0;
}


/* Welcome Screen
-------------------------*/

.welcomeBody  .mainFrame  
{ 
/*padding: 0 0 0 220px;*/
margin: 0;
border: none;
}

.welcomeBody  .iSpekLogo {
width: 330px;
background: url(../images/ispek_lite/welcomeBannerLogo.gif) 7px 4px no-repeat;
}

.welcomeBody .pageContent, .welcomePage .pageContent  {
border: none; 
padding-left: 0px;
padding-top: 0px;
}
html>body.welcomePage .pageContent {
padding-right: 0px;
width: 99%;
}

* html .welcomeBody .rollup {width: 99%;} /* tweak for IE6 in welcome page */

.pcSpacer {

}
td>.pcSpacer {
display: none; 
}

#quickLinks {
margin: 0 0 3px 15px;
padding: 0;
list-style: none;
}

#quickLinks li {
margin-top: 2px;
}

div.systemMessages ul {
margin: 0 0 3px 15px;
padding: 0;
list-style: none;
}

div.systemMessages ul li {
margin-top: 2px;
/*margin-top: 2px 0 8px 0;*/
}

div.systemMessages ul li a{
white-space: nowrap;
}



.welcomeBody .groupBox h3, .welcomePage  .groupBox h3 { margin: 5px 0 0 4px;}
/* welcome page = contentframe in frameset */
body.welcomePage div span em { padding-left: 7px; }
body.welcomePage div.groupBox { margin: -5px 0 20px 0; }



/*Styles for system messages screen*/

div.systemMessages h3 {margin-top: 10px; margin-bottom: 3px;}
div.systemMessages h3 em {color: #039;}
div.systemMessages p {margin-left: 0;}
div.systemMessages table {margin-left: 15px;}
div.systemMessages ul {list-style: none; margin: -8px 0 5px 17px;}
div.systemMessages ul li {margin-bottom: 3px;}
div.systemMessages hr {margin-bottom: 3px;}

/* Modal popup windows
---------------------------------------------------------------------*/

body.popupBody
{
/*[5380] prevent margin outside scrollbar
margin: 0 10px 0 10px;*/ 
margin: 0;
padding: 0 0 0 0; 
background-color: #FFF;
background-repeat:repeat-x;
width: auto;
}

body.popupBody #banner {
background-color: transparent;
}

body.popupBody .iSpekLogo {
/*position: absolute;*/
z-index: 20;
top: 0;
left: 0;
width: 110px;
height: 57px;
color: #FFF;
display: block;
text-decoration: none;
}

body.popupBody h1
{
font-size: 133%;
padding-top: 18px;
padding-left: 110px;
padding-bottom: 10px;
font-weight: normal;
}
/* override for FireFox (and accidentally IE 7) */
html>body.popupBody h1{padding-top: 7px;}
/* override for IE 7 */
*+html body.popupBody h1{padding-top: 18px;}

body.popupBody h1 span { font-weight: bold; }

/*******************************************************
TEXT LAYOUT + TABLES
********************************************************/


.pageContent h1, .pageContent h2 {
margin: 10px 0 15px 0;
font-size: 133%;
font-weight: normal;
color : #039;
position: relative;
}
.pageContent h1 span, .pageContent h2 span {font-weight: bold;}

p { margin: 6px 0 8px 0;}
td>p { margin-top: 5px; }
.groupBox p { margin-left: 4px; }

p.devCode {
position: absolute;
right: 30px;
/* top: 12px; */
top: 0px;
margin: 0;
font-size: 9px;
color: #DDD;
}
body.welcomePage p.devCode {top: 0; }

h3, .pageContent h3 {
font-size: 100%;
color: #039;  
margin: 17px 0 8px 4px;
}
.pageContent td>h3 { margin-top: 5px; }

/*------    This style is for dynamic output   which is delivered as static text--- */
.staticOutput {
color: rgb(65,83,93);
margin: 0 0 0 4px;
}
/* for emphasised outputs -eg in resource management folder management */
.em_staticOutput {
color: #333;
margin: 0 0 0 4px;
font-weight: bold;
}

.darkrow .staticOutput, .lightrow .staticOutput { margin: 0; }

a { color: #039;}
a:visited { color: #CC3300; color: #0099CC;}

em { font-weight: bold; font-style: normal; }

/* tables and table formatting
--------------------------------------------------------------*/

table {
margin-top: 3px;
margin-bottom: 0;
}

table table {
margin-top: 0;
}


td, th {
vertical-align: top;
color: #039;
font-size: 12px;
}

td.lightrow
{
background-color: #FFF;
padding-left: 2px; padding-top: 2px; padding-bottom: 2px;
/* word-wrap: break-word; */
}
td.darkrow
{
background-color: #F0F0F0;
padding-left: 2px; padding-top: 2px; padding-bottom: 2px;
/* word-wrap: break-word; */
}
tr.darkrow { background-color: #F0F0F0; }

/* to match labels in fieldsets */
td.darkrowlabel
{
background-color: #F0F0F0;
width: 152px;
padding-left: 2px; padding-top: 2px; padding-bottom: 2px;
}



.ColumnHeader, .columnHeader
{
color: #FFF;
background: #039;
text-align: left;
vertical-align : middle;
padding-left: 2px;
border-right: solid 2px #FFF;
}

.ColumnHeader a, .ColumnHeader a:visited, .columnHeader a, .columnHeader a:visited  {
color: #FFF; 
width: auto;
text-decoration: none;
cursor: text;
padding-right: 15px;
background-repeat: no-repeat; 
/*background-position: 100% -290px;*/
/*background-image: url(../images/sprites/sprites1.png);*/
background-position: 100% 0px;
background-image: url(../images/sprites/column-sorting.gif);
cursor: pointer;
display: block;
}

.ColumnHeader a.sortDown, .columnHeader a.sortDown  {
font-weight: bold !important;
background-position: 100% -170px !important;
}
.ColumnHeader a.sortUp, .columnHeader a.sortUp  {
font-weight: bold !important;
background-position: 100% -320px !important;
}

/* 
STANDARDISED ISPEK TABLES
*/

table.ispekstandard {
	width: 100%;
	margin: 0;
	}
	
table.ispekstandard th,
table.ispekstandard td
{
	padding: 2px 4px;
	margin: 2px;
}

table.ispekstandard th {
	font-weight: normal;
	text-align: left;
	background: #F0F0F0;
	width: 150px;
}

table.ispekstandard thead th {
	font-weight: bold;
	text-align: left;
	background: #039;
	width: auto;
	color: #FFF;
}

table.ispekstandard td {
color: rgb(65,83,93); 
}

table.twocolumnlayout {width: 100%;}
table.twocolumnlayout td {
width: 25%;
}

table.ispekstandard td h3 {margin: 0;}

table.dataDisplay 
{
	border: solid 1px #039;
	border-spacing: 0;
	border-collapse: collapse;
}

table.dataDisplay td
{
	border-bottom: solid 1px #999;
	
}

table.dataDisplay thead th
{
	border: solid 1px #039;
	/*border: solid 2px #FFF;*/
	background: #039;
	color: #FFF;
}

table.dataDisplay thead th + th
{
	border-left: solid 2px #FFF;
}

table.dataDisplay thead tr + tr th
{
	border: solid 2px #FFF;
}


.systemOutput {color: rgb(65,83,93); }

/* forms and form elements
--------------------------------------------------------------*/

form {margin: 0;}

select, input, textarea {
font-family: arial, helvetica, sans serif;
font-size: 12px;
}

/* input error highlight classes */
input.inputError {
	background-color: #FF8080;
}

.compactLists select {
font-size: 11px !important;
}


/*
--- UI Features
*/

/* Sections*/



/*Group boxes
----------------------------------------------------------------------*/

/*-- Section headings in the content box --*/


div.groupBox, div.blueBorderBox {
margin: 0 0 10px 0;
padding: 10px 5px 10px 5px;
color: #039;  
/*background-color: #FFF;*/
border: solid 1px #039;
width: 100%;
min-width: 60%;
/*display:inline-block;*/
/*position: relative;*/
}

div.groupBox div.groupBox, div.groupBox div.blueBorderBox {
width: auto;
}
	
div.groupBox div.sectionHeader 
{
 font-weight: bold;
 padding: 0;
 margin: 5px 0 5px 0px;
 font-size: 12px;
 color: #039;
}

div.groupBox:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

td .groupBox {
/*This pads out group boxes in tables*/
margin-right: 5px; margin-left: 5px;
}
td>div.groupBox { width: auto; }

.topRightRoundedCorner, .absoluteTopRightRoundedCorner, .topRightRoundedCorner2 {
display: none;
}



.bottomLeftRoundedCorner {
display: none;
}

/*-- Section headings in the content box --*/
.groupBoxHeading {
font-size: 110%;
font-weight: bold;
text-transform: capitalize;
white-space: nowrap;
margin: -10px 0 5px -5px;
padding: 0px 0 7px 0;
}

hr + div.groupBoxHeading {
margin: -10px 0 10px -5px !important;
}

.groupBoxHeading span  {
background: #039;
color: #FFF;
padding: 1px 9px 1px 10px;
}

/*-- Groupbox Horizontal rule--*/

.groupBox hr, .groupBox2Column hr, div.blueBorderBox hr, .groupSubHead hr {
color: #039;
padding: 0;
height: 1px;
margin: 15px -5px 10px -5px;
border: none;
border-top: solid 1px #039;
clear: both;
text-align: left;
/* IE hacks */
/* margin-bottom: 4px;
 width: 101.4%; */
}




/* A replacement for horizontal rule - use it in difficult cases when the normal hr tag fails */
div.horizontalRule
{
margin: 0 0 12px -10px; 
height: 20px;
position: relative;
width: 100%;
border-bottom: solid 1px #039;
}
div.horizontalRule span {
display: block;
width: 50px;
height: 20px;
position: absolute;
top: 0;
border-bottom: solid 1px #039;
right: -21px;
}

/* fixing <h3>s in the mac following this div */
div.horizontalRule + h3 {
clear: both;
margin-top: 16px;
margin-left: 0;
}


/*Styles for groupBox split into two equal columns */

.groupBox2Column {
margin: 0 0 10px 0;
padding: 0;
color: #039;  
border-style: solid;
border-width: 1px; 
width: 100%;
}

table.groupBoxTwoColumnTable {
width: 100%;
padding: 0;
margin: -10px 0 -10px -5px;
}

td.groupBoxLeft {
padding: 0 5px 20px 0;
margin: 0;
}

td.groupBoxLeft p, td.groupBoxLeft h3,  td.groupBoxLeft table {margin-left: 7px; }

td.groupBoxLeft div.groupBoxHeading {
margin: 0;
padding: 0 0 10px 0;
}
td.groupBoxLeft>div.groupBoxHeading {
margin: 0;
padding: 0 0 10px 0;
}
 
.groupBoxLeft hr {
color: #039;
width: 103%;
margin: 5px -10px 5px -8px;

}

td.groupBoxRight {
padding: 15px 0 20px 9px;
margin: 0; 
border-style: solid;
border-color: #039;
border-width: 0 0 0 1px; 
}

.groupBoxRight .groupBoxHeading {
position: relative;
top: 0;
padding: 0 0 10px 0;
margin: -13px 0 0 0;
left: -10px;
}

.groupBoxRight .groupBoxHeading span {
padding: 2px 9px 3px 8px;
}


/*
--- FORMS
*/


form {margin: 0;}

/*
select, input, textarea {
font-family: arial, helvetica, sans serif;
font-size: 12px;
}
*/

.compactLists select {
font-size: 11px !important;
}

/*Code for buttons
******************************************/
/*Code for buttons
******************************************/
/* new test code for use with <button> */
/*
.button-sec-new, .button-sec-long-new, .button-pri-new, .button-pri-long-new {
cursor: pointer;
white-space: no-wrap;
font-size: 11px;
font-weight: bold;
color: #FFF;
height: 22px;
margin-top: 2px;
border-bottom: solid 2px #BBBBBB;
border-right: solid 2px #BBBBBB;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
}

.button-sec-new, .button-sec-long-new {
background-color: #039;
border-top: solid 1px #CCC;
border-left: solid 1px #CCC;
}

.button-pri-new, .button-pri-long-new {
background-color: #C6244A;
border-top: solid 1px #CCC;
border-left: solid 1px #CCC;
}

.button-sec-new {
width: 78px;
}
	
.button-sec-long-new {
width: 114px;
}

.button-sec-new[disabled], .button-sec-long-new[disabled], .button-pri-new[disabled], .button-pri-long-new[disabled] {
cursor: default;
color: #666666;
background-color: #CCC;
border-top: solid 1px #CCC;
border-left: solid 1px #CCC;
border-bottom: solid 2px grey;
border-right: solid 2px grey;
}
*/

.button-pri, .button-pri:visited,  
.button-sec, .button-sec:visited,
.button-pri-long, .button-pri-long:visited,
.button-sec-long, .button-sec-long:visited,
.button-grey-long, .button-grey-long:visited,
.button-grey, .button-grey:visited,
.button-up, .button-down
{
color: #039;
color: #FFF;
padding: 1px 3px; 
text-align: right;
text-decoration: none;
font-size: 11px;
font-weight: bold;
background-color: #C6244A;
display: inline-block;
border: solid 1px #C6244A;
/* margin: 2px 4px 5px 4px; */
margin: 2px 4px 2px 4px;
width: 78px;
/*height: auto !important;*/
}

html body .button-pri:hover  { 
background-color: #FFF;
color: #C6244A;
}


.button-sec, .button-sec:visited  {
color: #FFF;
background-color: #039;
border: solid 1px #039;
}
html body .button-sec:hover { 
background-color: #FFF;
color: #039; 
}


.button-pri-long, .button-pri-long:visited  {
color: #039;
color: #FFF;
background-color: #C6244A;
border: solid 1px #C6244A;
width: 114px;
}
.button-pri-long:hover  { 
background-color: #FFF;
color: #039;
}

.button-sec-long, .button-sec-long:visited  {
color: #FFF;
background-color: #039;
border: solid 1px #039;
width: 114px;
}
html body .button-sec-long:hover { 
background-color: #FFF;
color: #039;
}


.button-grey, .button-grey:visited  {
color: #666666;
background-color: #CCC;
border: solid 1px #999;
}

.button-grey-long, .button-grey-long:visited  {
color: #666666;
background-color: #CCC;
border: solid 1px #999;
width: 114px;
}

.button-small, .button-small:visited  {
color: #039;
color: #FFF;
padding: 1px 3px; 
text-align: right;
text-decoration: none;
font-size: 11px;
font-weight: bold;
background-color: #FC6;
background-color: #039;
display: block;
border: solid 1px #999;
border: solid 1px #039;
margin: 0px 4px 5px 4px;
width: 58px;
/*height: auto !important;*/
}
.button-small:hover { 
background-color: #FFBA42;
background-color: #FFF;
color: #155874; 
color: #039; 
}
html>body .button-small {
width: 50px;
/*height: auto !important;*/
}

.button-up, .button-down  {
padding: 1px 3px;
border: solid 1px #039;
border-width: 0px 1px;
background: #039 url(../images/sprites/sprites1.png) -7px -3px no-repeat;
display: block;
margin: 2px 4px 5px 4px;
width: 15px;
line-height: 21px;
text-indent: -500000px;
text-align: left;
border: none !important;
}


.button-down {
background: #039 url(../images/sprites/sprites1.png) -7px -30px no-repeat;
}

.button-up:hover {
background-color: #FFF;
background-position: -29px -3px;
}

.button-down:hover  {
background-color: #FFF;
background-position: -29px -30px;
}


/* firefox tweak */
.button-sec,
.button-sec-long,
.button-pri,
.button-pri-long,
.button-grey,
.button-grey-long,
.button-up,
.button-down
{
-moz-border-radius: 4px;    /* older FF */
/* CSS3 IE9 ready */
border-radius: 4px;
border-width: 1px;
}


/* IE tweak */
.button-sec,
.button-pri,
.button-sec-long,
.button-pri-long,
.button-grey,
.button-grey-long,
.button-up,
.button-down
{
#border-width: 0 1px !important;
}


html body .footerButtons .button-sec-long, 
html body .footerButtons .button-sec-long:visited,  
html body .footerButtons .button-sec, 
html body .footerButtons .button-sec:visited,
html body .footerButtons .button-pri, 
html body .footerButtons .button-pri:visited,
html body .footerButtons .button-pri-long, 
html body .footerButtons .button-pri-long:visited,
html body .footerButtons .button-grey-long, 
html body .footerButtons .button-grey-long:visited, 
html body .footerButtons .button-grey,
html body .footerButtons .button-grey:visited,
html body .footerButtons .button-up,
html body .footerButtons .button-up:visited,
html body .footerButtons .button-down,
html body .footerButtons .button-down:visited
{
/*padding: 3px;*/
  /*height: 13px;*/
}

/*Select tables
-------------------------------------------------------------------------------------*/

table.selectTable {
background-color: #FFF;
border: solid 1px #039;
background-position: 100% 0%; background-repeat: no-repeat;
margin-top: 0;
border-collapse: collapse;
border-spacing: 0;
}

table.selectTable .columnHeader { 
padding: 2px 4px 2px 2px;
/* word-wrap: break-word; */
vertical-align: top;
border-left: solid 2px #039;
border-right: solid 2px white;
}

html>body table.selectTable { border-collapse: separate; }
html>body table.selectTable .columnHeader {  
border-left: solid 2px white;
border-right: none;
border-collapse: collapse;
padding: 2px 4px 1px 2px;
}
html>body table.selectTable .columnHeader:first-child { border-left: none; }
table.selectTable tr+tr .columnHeader:first-child { border-left: solid 2px #FFF; }
table.selectTable tr+tr .columnHeader[rowspan]:first-child { border-left: none; }
table.selectTable .columnHeader  table {
margin: 0 -3px 0 -2px;
width: auto;
}

table.selectTable .columnHeader  table th {
border: solid 2px #FFF;
border-width: 0 0 0 0;
}

td.selectTable {
padding: 3px 2px 3px 2px;
border-top: solid 1px rgb(198,198,198);
/* word-wrap: break-word; */
}

td.selectTable .staticOutput {margin-left: 0; /* word-wrap: break-word; */ }
td.selectTable a {/* word-wrap: break-word; */ }
td.selectTable input {vertical-align: top;}

div.selectTable  {
border: solid 1px #039; 
overflow: auto;
height: 262px; 
}

div.selectTable  table.selectTable{
margin-top: 0; 
background-image: none;
border: none;
border-bottom: solid 1px rgb(198,198,198);
width: 100%;
}

tr.active {background: #D7E6F1;}

/*Roll-Ups
-------------------------------------------------------------------*/
div.lightrow, div.rollup {
  padding: 0 0 15px 22px;
  margin: 0;
  width: auto; 
  /*display: none;     comment out this line */
  clear: both;
  position: relative;
  /* following removed (is applied via js):
  position: absolute;
  left: -2000px;
  top: -2000px;
  */
}

.welcomeBody div.lightrow, div.rollup {
padding: 0 0 15px 5px;
}

div.darkrow, h3.rollup
{
   padding: 2px 3px 1px 2px;
   margin: 1px 0 2px 0;
   background-color: #D7E6F1;
   clear: both;
}
hr+div.darkrow, h3+div.darkrow, hr+h3.rollup, h3+h3.rollup { margin-top: 12px; }

* html div.darkrow, * html h3.rollup {position: relative;}


div.darkrow a, h3.rollup a{
text-decoration: none;
color: #039;
padding: 0 0 0 20px;
background-image: url(../images/sprites/rollups_lite.gif);
background-position: 1px 0; background-repeat: no-repeat;
height: 18px;
}
div.darkrow a:visited , h3.rollup a:visited{color: #039;}  
div.darkrow a.open, h3.rollup a.open, div.darkrow a.open:visited, h3.rollup a.open:visited  {background-position: 1px -64px; color: #FFF; }
div.darkrow a.activeMenu  {background-position: 1px -32px; font-weight: bold; color: #FFF;}

div.darkrow a.default  {background-image: none; text-decoration:underline;}
div.darkrow span.default  {background-image: none; }

div.darkrow span, h3.rollup span  {
text-decoration: none;
background-image: url(../images/sprites/rollups_lite.gif);
background-position: 1px -95px; background-repeat: no-repeat;
height: 18px;
padding: 1px 0 0 20px;
}

div.darkrow span.alarm, h3.rollup span.alarm   {
background-position: 1px -212px;
}

div.open,  div.activeMenu, h3.open{
font-weight: bold;
background-color: #003399;
color: #FFF;
}

div.nestedRollup div.open, div.nestedRollup h3.active{
font-weight: bold;
background-color: #003399;
color: #FFF;
}

span.darkrow
{
background-color: #F0F0F0;
padding: 2px 4px 4px 2px;
}


/* rollups as modal submenus  */

td.groupBoxLeft div.darkrow.open{background:  #003399;}
td.groupBoxLeft div.darkrow a.open {background-position: 1px -32px !important; font-weight: bold; color: #FFF;}

div.lightrow td.groupBoxLeft div.open{background: #FFF;}
div.lightrow td.groupBoxLeft div.darkrow a.open {background-position: 3px -156px !important; font-weight: bold; color: #039;}

/* nested rollups */
div.lightrow div.darkrow, div.rollup h3.rollup
{
    padding: 14px 1px 1px 2px;
   background-color: #FFF !important;
   padding: 4px 1px 1px 2px;
}
div.nestedRollup div.darkrow, div.nestedRollup h3.rollup
{
    padding: 3px 1px 1px 2px;
   background-color: #F0F0F0;
}
div.nestedRollup div.lightrow, div.nestedRollup div.rollup  {margin: 0; padding: 0 0 15px 0; }

div.lightrow div.darkrow a, div.rollup h3.rollup a {background-position: 3px -127px; }
div.lightrow div.darkrow a.open, div.rollup h3.rollup a.open
{background-position: 3px -182px !important; color: #039 !important; background-color: #FFF;}
div.lightrow div.darkrow a.activeMenu {color: #039; }
div.lightrow div.darkrow a.activeMenu {background-position: 3px -155px;}
div.lightrow div.nestedRollup div.darkrow , div.rollup div.nestedRollup h3.rollup {
background-color: #F0F0F0;
padding-left: 10px;
}
div.lightrow div.nestedRollup div.darkrow a, div.rollup div.nestedRollup h3.rollup a {background-position: 1px 0; }
div.lightrow div.nestedRollup div.darkrow a.open, div.rollup div.nestedRollup h3.rollup a.open {background-position: 1px -282px; color: #039;}
/*nested rollup inside LH groupbox column */
td.groupBoxLeft div.lightrow div.darkrow a.open, td.groupBoxLeft  div.rollup h3.rollup a.open
{background-position: 3px -156px !important;}

/* grey rollups in my Tasks */
div.grey {
background-color: #F0F0F0 !important;
color: #039;
}
div.grey a.open {background-position: 1px -282px !important; color: #039 !important; }
div.grey a.activeMenu  {background-position: 1px -251px !important; color: #039 !important;}

/*rollups with +/- bullets */
h3.plusminus a { background-position: -1px -332px !important;}
h3.plusminus a.open,
div.rollup h3.plusminus a.open
{background-position: -1px -311px !important;}
div.rollup h3.plusminus a.open{color: #039 !important;}

/*Online Help - popup dialogue
---------------------------------------------------------------------*/

.onlineHelp {
text-decoration: none;
font-weight: normal;
vertical-align: middle;
}
.onlineHelp img{border: none;} /* this is a new addition to remove border from image in link*/



/*
--- TOOLTIPS & DEFAULT VALUES
code for the new tooltips which will replace online help above
*/

.tooltip {
		position: relative;
		background: url(../images/icons/animated_loader_shadow.png);
		display:none;
		z-index: 100;
		white-space: normal;
		vertical-align: top;
	}

	.tooltip_right {
/* 		margin: -6px 0 0 22px; */
	}
	
	.tooltip_bottom {
/*		margin: 40px 0 0 -70px; */
    }
	
	.tooltip_bottomright {
		/*margin: 18px 0 0 -202px;*/
/* 		margin-top: 18px; */
/*     vertical-align: bottom; */
}

  .tooltip_bottomleft {
    /*margin: 18px 0 0 -202px;*/
/*     margin-top: 18px; */
/*     vertical-align: bottom; */
}

    .tooltip h1 {
		height: auto;
		margin-top: 0;
		margin-left: 0;
		background-color: rgb(106,106,106);
		color: white;
		font-size: 14px;
		font-weight: bold;
		margin: 0;
	}

	.tooltip p {
		padding: 2px;
		margin-top: 0.5em;
		line-height: 1.2em;
	}

	
	.tooltip .tooltipSleeve {
		position: absolute;
		display: block;
		left: 15px;
		top: -9px;
		min-width: 210px;
		max-width: 610px;
        max-height: 250px; /*500px;*/
        overflow-y: auto;
    /*#width: 224px; different box model for IE */
		background-color: rgb(255, 255, 234);
		border: 1px solid black;
		padding: 7px;
		font-size: 11px;
		font-weight: 100;
		margin: 0;
		color: #000;
	}
	
.tooltip_bottomright .tooltipSleeve {
    left: 0px;
    top: 15px;
}

  .tooltip_bottomleft .tooltipSleeve {
    left: auto;
    right: -30px;
    top: 15px;
  }
  

	.tooltip_right .tooltipPointer {
		position: absolute;
		left: -2px;
		top: 2px;
		width: 19px;
		height: 16px;
		background: url(../images/ispek_lite/tooltippointer.gif) 0 0 no-repeat;
	}
	
	.tooltip_bottom .tooltipPointer {
		position: absolute;
		left: 20px;
		top: -24px;
		height: 19px;
		width: 16px;
		background: url(../images/ispek_lite/tooltippointer.gif) 0 -21px no-repeat;
	}
	
	.tooltip_bottomright .tooltipPointer {
		position: absolute;
		/*left: 204px;*/
		right: 0px;
		top: -16px;
		height: 19px;
		width: 16px;
		background: url(../images/ispek_lite/tooltippointer.gif) 0 -21px no-repeat;
	}

  .tooltip_bottomleft .tooltipPointer {
    position: absolute;
    right: -16px;
    top: 0px;
    height: 19px;
    width: 16px;
    background: url(../images/ispek_lite/tooltippointer.gif) 0 -21px no-repeat;
  }

.tooltip  ul  {
		padding-left: 20px;
		margin-left: 0;
		margin-bottom: 0;
	}


.defaultValue {
		position: absolute;
		border: solid 1px #A5ACB2;
		background: #FFF;
		color: #999;
		overflow: hidden;
		z-index: 90;
		padding: 2px 1px 0 1px;
		display: none;
	}
	
.defaultValueColorOnly {
		color: #999;
	}


.defaultValueOption
{
	color: #999 !important;
}

/* -- DETAIL MESSAGES --*/

#detailMessages
{
	position: absolute;
	right: 0px; /*19px;*/
	top: 21px;
}
#detailMessagesLinkAnchor
{
	display: block;
	width: 21px;
	height: 21px;
	overflow: hidden;
	text-indent: -2500px;
	background: url(../images/icons/detail_messages_icon.gif) 0 0 no-repeat;
	margin-left: 8px;
	margin-right: 8px;
}




/* --- pre-loading screen UI ---*/


div.loaderScreen {
width: 100%; height: 100%;
border: solid 2px #4C848A; 
border: none; 
background: transparent url(../images/blank.gif) 0 0;
cursor:wait; 
position: absolute;
top: 0; left: 0; z-index: 9;
}
/* Firefox only */
@-moz-document url-prefix() {
  div.loaderScreen {
  background:gray;
  -moz-opacity: 0.10;
  opacity: 0.10;
  }
}
* html div.loaderScreen {
/* ie only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/transparent_map2.png',sizingMethod='scale');
}
/* debug page loading
html body  div.loaderScreen {
background: red !important;
-moz-opacity: 0.90 !important;
opacity: 0.90 !important;
}
*/

div.popupOpenDiv, div.pageLoadingDiv {
position: absolute;
left: 0; top: 0; 
margin-left: -200px;
left: 50% !important;
top: 25% !important;
margin-left: -150px !important;
z-index: 1100;
text-align: center;
cursor:wait; 
width: 300px;
height: 90px;
border: solid 1px #039;
border-color: #036 #036 #036 #036;
background: #FFF;
}

div.popupOpenDiv {
width: 350px;
}

div.popupOpenDiv h3, div.pageLoadingDiv h3 {
text-align: center;
font-size: 100%;
margin: 5px 0px;
}

div.popupOpenDiv img, div.pageLoadingDiv img {
display: block;  
margin: 0 auto 0 auto;
}

div.popupOpenShadowDiv, div.pageLoadingShadowDiv {
position: absolute;
left: 0; top: 0; width: auto; 
margin-left: -200px;
left: 50% !important;
top: 25% !important;
margin-left: -144px !important;
margin-top: 6px;
z-index: 1099;
width: 300px;
height: 90px;
background: #000;
filter:alpha (opacity=20); /* Only for IE8 and earlier */
opacity: 0.2;
}

div.popupOpenShadowDiv {
width: 350px;
}

/*
html>body div.loaderDialogue, html>body div.pageLoadingShadowDiv {
  position: fixed;
}*/

/*********************************
 *
 * Styles for myTasks and workflow
 * includes the info popup used in the myTasks area
 *
 ********************************/

/** default styles for in situ nested tables in user history **/
div.lightrow table table table th {  font-weight: normal; text-align: left; }

div.collapseContent { margin: 0; width: 180px; overflow: hidden; }

.infoPopupWrapper {
position: absolute; top: 200px; /*left: 20px;*/
z-index:6;
/*width: 320px;*/ /*220px; */
max-width: 98%;
left: auto;
right: 20px;
width: auto;
background: #CCCCCC;
padding: 0 2px 2px 0;
}
html>body .infoPopupWrapper { 
/*MISSING RESOURCE: background: url(../images/icons/shadow.png) !important;*/ 
padding: 0 4px 4px 0;
}

/*.infoPopupWrapper h3 {
color: #FFF;
font-size: 100%;
padding: 0 1px 2px 4px;
position: absolute; top: 2px; left: 0; width: 280px; /*180px; NOTE: must be 40px less than infoPopupWrapper width *//*
margin: 0;
}*/


.infoPopupDisplay {
border: solid 2px #039;
border-width: 18px 2px 2px 2px;
background: white;
padding: 6px;
}

.infoPopupWrapperTitle {
margin: 0px 5px;
color: #FFF;
font-size: 100%;
padding: 0 1px 2px 4px;
position: absolute; top: 2px; left: 10px; width: auto; /*width: 280px; /*180px; NOTE: must be 40px less than infoPopupWrapper width */
}
  
a.infoPopupWrapperCloseIcon {
width: 13px; height: 13px;
border: solid 1px #FFF;
padding: 0 4px 2px 2px; margin: 0;
position: absolute; top: 2px; left: 2px; /*right: 4px;*/ 
z-index: 7;
color: #FFF !important;
text-decoration: none;
font-size: 10px;
font-weight: bold;
display: block;
}
html>body a.infoPopupWrapperCloseIcon {
top: 1px; left: 1px; /*left: 304px; 204px; NOTE: must be 16px less than infoPopupWrapper width */
padding: 0 4px 1px 2px;
width: 6px; height: 12px;
-moz-border-radius: 3;    /* older FF */
/* CSS3 IE9 ready */
border-radius: 3;
}
td.selectTable .processDataDiv, .processDataDiv {
  font-size: 9pt; /*smaller;*/
  margin-top: -2px;
}
td.selectTable .processDataSectionDiv, .processDataSectionDiv {
  font-size: 9pt; /*smaller;*/
  margin-top: -2px;
  padding-top:5px;
}
.processDataDisplayPopup {
  font-size: 8pt; /*smaller;*/
}

td.selectTable table table, td.selectTable table table td, td.selectTable table table th { border: solid 1px #fff; } 
/*The element in question (the table) needs a border attribute in html to display properly in IE (??!) 
within the popup, but this border needs to be invisible when viewed within the selectTable itself.
This style achieves that.
*/

.infoPopupDisplay .staticoutput { color: #039; }
/* white-space: nowrap; */
.infoPopupDisplay table table, .infoPopupDisplay table table td { border: solid 1px #C6C6C6; border-collapse: collapse; }
.infoPopupDisplay table table th { border: solid 1px #C6C6C6; border-collapse: collapse; background: #F0F0F0; font-weight: normal; text-align: left;}


/*
--- AJAX UI
*/

.ajaxwaiting
{
	background: #fff url(../images/ispek_lite/ajax-loadericon.gif) 50% 50% no-repeat !important;
	color: #FFF;
}

.ajaxwaiting *
{
	visibility: hidden !important;
}
 
.ajaxwaitingsmall
{
	background: #fff url(../images/ispek_lite/ajax-loadericon_small.gif) 50% 50% no-repeat !important;
	color: #FFF;
}

.ajaxwaitingsmall *
{
	visibility: hidden !important;
}

/*******************************************************
MENU TREE
********************************************************/
/* Styles for new improved navigation tree
****************************************************/

.menu h1 {
color: #039;
font-size: 12px;
margin: 0;
padding: 0 2px 5px 4px;
font-weight: bold;
}

ul.navList {
margin: 10px 0 10px 16px;
padding: 0;
color: #039;
list-style-type: none;
list-style-type: none;
}

ul.navList li {
 margin: 3px 0;
 font-weight: bold;
 font-size: 11px;
 padding: 0;
}

ul.navList  a{
color: #039;
}
ul.navList a:visited {
color: #039;
}

ul.navList li span {
color: #039;
padding: 0 2px;
}

ul.navList li a span {

}

ul.navList li a span.menuNodeBold {
font-weight: bold;
}

ul.navList li div.menuNodeBubble {

cursor: help;
background: url(../images/icons/speechballoon.gif) -2px 0 no-repeat;
display: inline;
}

ul.navList li div.menuNodePmCustomerSide {
cursor: help;
background: url(../images/icons/out_indicator.gif) -2px 0 no-repeat;
display: inline;
}

ul.navList li div.menuNodePmProductionSide {

cursor: help;
background: url(../images/icons/in_indicator.gif) -2px 0 no-repeat;
display: inline;
}

ul.navList li div.menuNodeAlert {

cursor: help;
background: url(../images/icons/miniSystemAlert14.gif) no-repeat;
display: inline;
}

ul.navList li div.menuNodeInfo {

cursor: help;
background: url(../images/icons/miniSystemInfo14.gif) no-repeat;
display: inline;
}

/* todo: move to an iSpek app specific css */
ul.navList li div.menuNodeCostingWarning {
cursor: help;
background: url(../images/icons/miniCostingWarning14.gif) no-repeat;
display: inline;
}



ul.navList li .folder {
font-weight: bold;
}

ul.navList li div {
position: relative;
}

/* tp. iPad support */ 
@media screen and (max-device-width: 1024px)
{
    ul.navList li div {
    margin: 12px 0px;
    }
}

ul.navList li a:hover{ background-color: transparent;}
ul.navList li a:hover span{ background-color: #D7E6F1;}

ul.navList li ul {
padding: 0;
margin: 0 0 10px 0;
border-left: dashed 1px #003399;
list-style-type: none;
}

ul.navList li ul ul {
padding: 0;
margin: 0 0 10px 0;
border-left: dashed 1px #003399;
}

ul.navList li ul  li {
 font-size: 11px;
 margin-left: 17px;
}

ul.navList li ul  li a span, ul.navList li ul  li a:visited span{
font-weight: normal;
}

ul.navList a.nodeExpander, ul.navList a.nx {
padding: 0 !important; 
background: url(../images/sprites/sprites1.png) -7px -222px no-repeat;
display: block;
border: none;
width: 10px !important; 
height: 14px !important;
position: absolute;
text-decoration: none;
margin: 0 0 0 0 !important; 
left: -12px;
top: -1px;
z-index: 8;
overflow: hidden;
}

ul.navList a.nx, ul.navList a.collapsed {
/* styles for node expander in resource management - nx is closed by default*/
background-position: -22px -222px;
}
/* styles for node expander in resource management - expanded version of node*/
ul.navList a.expanded {
background-position: -7px -222px
}
ul.navList ul a.nodeExpander, ul.navList ul a.nx {left: -12px; }
ul.navList a.nodeExpander span, ul.navList a.nx span {
visibility: hidden;
}

ul.navList li a span.activeLink, ul.navList li a span.activeLink:hover{
background-color: #039  !important;
color: #FFF  !important;
}
ul.navList ul li a span.activeLink, ul.navList ul li a span.activeLink:hover{
background-color: #039  !important;
color: #FFF  !important;
}
ul.navList li a span.default {
background-color: transparent !important;
color: #039  !important;
}
ul.navList li a:hover span.default {
background-color: #039 !important;
color: #FFF  !important;
}


ul.folders li ul {display: none; }

/*******************************************************
ICONS
*******************************************************/

/* styles for solution gen nodes  */

td.packNode {
background-image:url(../images/icons/packNode2.gif);
background-position: 50% 0;
background-repeat: no-repeat;
height: 24px; width: 90px;
}

/* icon styles  */

.icon-lock
{
width: 12px; height: 12px;
display: block;
background-image:url(../images/icons/Lock4.gif);
margin: 0 1px 0 5px;
}

.icon-lock span {display: none; }

/*
   REGULAR SIZED SYSTEM MESSAGE ICONS - BEGIN
div.alertInfo,
div.alertWarning,
div.alertError
{ 
margin: 10px 0 10px 0;
border: solid 1px #039;
padding: 5px 8px 8px 60px;
background-color: #D7E6F1;
background-image: url(../images/icons/systemInfo.gif);
background-repeat:no-repeat; background-position: 11px 5px;
text-align: left;
position: relative;
}

div.alertWarning { 
background-image: url(../images/icons/systemAlert1.gif);
}

div.alertError { 
background-image: url(../images/icons/systemAlert2a.gif);
}
div.alertInfo p, div.alertError p, div.alertWarning p  { margin: 4px 0;}
   REGULAR SIZED SYSTEM MESSAGE ICONS - END
*/

/* MINI SYSTEM MESSAGE ICONS - BEGIN */
div.alertInfo,
div.alertWarning,
div.alertError
{ 
margin: 8px 0 8px 0;
border: solid 1px #039;
padding: 5px 10px 5px 28px;
background-color: #D7E6F1;
background-image: url(../images/icons/miniSystemInfo.gif);
background-repeat:no-repeat;
background-position: 5px 4px;
text-align: left;
position: relative;
}

div.alertLineBreak {
  height: 5px;
}

div.alertWarning { 
background-image: url(../images/icons/miniSystemAlert14.gif);
background-position: 8px 5px;
}

div.alertError { 
background-image: url(../images/icons/miniSystemError.gif);
background-position: 6px 4px;
}
/* MINI SYSTEM MESSAGE ICONS - END */

div.alertInfo h3, div.alertError h3, div.alertWarning h3 { margin: 5px 0 -2px 0 !important; padding: 0 0 3px; font-size: 125%; }
div.alertError h3 { color: #990000;  color: #039;}
/*html>body div.alertInfo h3, html>body div.alertError h3, html>body div.alertWarning h3 {margin-top: 10px  }*/
/*.pageContent div.alertInfo h3, .pageContent div.alertError h3, .pageContent div.alertWarning h3 {margin-top: 5px; }*/

.icon_taskOverdue {
background: transparent url(../images/icons/myTasks_bullets.gif) 0 4px no-repeat;
width: 10px;
}

.icon_taskDueToday {
background: transparent url(../images/icons/myTasks_bullets.gif) 0 -64px no-repeat;
width: 10px;
}

.icon_taskOnTime {
background: transparent url(../images/icons/myTasks_bullets.gif) 0 -133px no-repeat;
width: 10px;
}
td.icon_taskOverdue, td.icon_taskDueToday, td.icon_taskOnTime {
padding-left: 10px;
width: 70px;
}


/*-- Art Template specifics ---*/

.colourSwatch {
 width: 20px;
 height: 20px;
margin: 0 0 0 195px;
 font-size: 4px; 
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
display: none;
}

/* This styles the larger squares used on the packagingchain/box/artwork screen 
This system may be deemed suitable, or replaced bythe image based system used in the current Box model
*/
.colourSwatch2 {
 width: 42px;
 height: 22px;
margin-left: 5px;
/* margin-left: 0 0 0 5px;*/
 font-size: 4px; 
border: solid 1px #CCCCCC;
display: none;
}

div.colourSwatch3
{
  border-top: solid 1px #CCCCCC;
  border-right: solid 1px #666666;
  border-bottom: solid 1px #666666;
  border-left: solid 1px #CCCCCC;
  width: 60px;
  height: 20px;
  background-color: #FF0000;
  display: none;
  margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
}

/*This styles the space where larger thumbnail images appear*/
.displayImage {
 background-color: #FFF;
color: #FFF;
 width: 200px;
 height: 140px;
 font-size: 4px; 
border: solid 1px #CCCCCC;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
display: none;
background-position: 50% 50%; background-repeat: no-repeat;
}

/*******************************************************
ISO-USA Messages
********************************************************/
div.usa-iso {
 font-size: 10px; background:
 #FAFAFA; 
 margin: 2px 2px 2px 0px; 
 padding: 0 2px 2px 2px; 
 border: solid 1px #DDD; 
 color: #999;
}

div.usa-iso h4 {
 margin:  0 -2px 3px -2px; 
 padding-left: 3px; 
 font-size: 11px; 
 background: #BBB; 
 color: #FFF;
}


/* -- frameset pages --*/
body.yellowBody {
background-color: #FFF;
border: solid 8px #D7E6F1;
border-width: 0 0 0 8px;
margin: 0 ;
padding: 0;
width: auto;
border-right: solid 1px #039;
height: auto;
/*overflow: auto;*/
}



body.yellowBody .pageContent {
border: solid 1px #039;
border-width: 1px 0px 1px 1px;
margin: 0px !important;
/*height: 100%;*/
padding-left: 20px;
padding-right: 20px;
}

* html body.yellowBody .pageContent {width: auto;}

/* removing any margins or width properties from the first child div in firefox etc */
/*Because of W3C box model */
body.yellowBody>div {
/*
margin-left: 0 !important; margin-right: 0 !important;
width: auto;
*/
}

html>body.yellowBody .pageContent {
/*height: 100%;*/
min-height: 98%;
width: auto;
}


/*******************************************************
PRINT STYLE SHEET
********************************************************/

.printOnly, .disclaimer {display: none; }

@media print 
{
/* NOTE: The *padding property is an IE only fix for multipage printing - logic for action unknown!! */
	.navbody, .welcomeBody, .welcomePage {margin-top: 0 !important; color: #000 !important; overflow: visible !important; height: auto !important; *padding: 5px !important; position: static !important; top: 0 !important; left: 0 !important;}
	.menu, #banner, #footerLinks, .footerButtons, p.devCode {display: none;}
	
	.mainFrame, .main, #Main {margin-left: 0 !important; margin-top: 5px !important; margin-right: 10px; width: 100% !important; overflow: visible !important; border: none !important;position: static !important; top: 0 !important; left: 0 !important;}
	
	.button-pri, .button-sec, .button-pri-long, .button-sec-long {font-weight: bold; background-image: none; text-align: center; padding: 1px;  border: solid 1px black;}
	
	.groupBox {border: none !important; overflow: visible !important;}
	.pageContent {border: none !important; margin: 0 !important; padding: 10px !important; width: auto !important; overflow: visible !important; color: #000 !important;position: static !important; top: 0 !important; left: 0 !important;}
	hr { height: 1px; color: #000000; margin-bottom: 10px !important;}
	.topRightRoundedCorner, .bottomLeftRoundedCorner {display: none !important;}
	
	.groupBoxHeading .blueBanner, .groupBox h3 { color: #000000 !important; background-color: #FFF; margin-bottom: 5px !important; margin-top: 5px !important;}
	.groupBoxHeading {margin-top: 0 !important;}
	td,p { color: #000 !important; }
	td.darkrow {font-weight: bold; background-color: #FFF; color: #000000 !important;}
	
    th {font-weight: bold; background-color: #FFF; color: #000000 !important;}
    
    h1, h2 {font-size: 14pt !important; color: #000000 !important; position: relative;}
	
	.printOnly {display: block !important;}
	
	.screenOnly {display: none;}
	
	h3.disclaimer {display: block; color: #000000; font-size: 9pt; }
	p.disclaimer {display: block; color: #000000; font-size: 7pt; }
	div.lightrow, div.rollup, div.rollupcontent { display: block !important;}
	div.selectTable { overflow: visible !important; }
	
	/* my tasks - formatted task history table */
	td.selectTable div {
		overflow: visible !important;
		height: auto !important;
	}
	td.selectTable a.displayPopup
	{ 
	 display: none;
	}


  
}
/* end of print only block */

/*******************************************************
browser page instance id
********************************************************/
#browserPageId { display: none; }




/*
New additions for updated stylesheet - changes to buttons and to banner colours as per Fiona's last request
***************************************************************************************************************
[FIXME] - properly integrate this code into the relevant areas above where relevant
*/

.groupBoxHeading span,
.columnHeader,
div.open,
h3.open
 {background-color: #003399; }





/* replacement for nifty corners solution - ROUNDED CORNERS FOR BUTTONS IN IE

using nested spans and images now - spans are inserted dynamically by Nifty javascript object in domutils.js

*/

.button-sec, .button-sec-long, .button-pri, .button-pri-long, .button-grey, .button-grey-long
{
	#border: none !important; /* IE only */
}


/* blue buttons */
	
	
.button-sec .tlborder, .button-sec-long .tlborder,
.button-down .tlborder, .button-up .tlborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_blue.gif) 0 0 no-repeat;
}

.button-sec .brborder, .button-sec-long .brborder,
.button-down .brborder, .button-up .brborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_blue.gif) 100% 100% no-repeat;
}

.button-sec .ltcorner, .button-sec-long .ltcorner,
.button-down .ltcorner, .button-up .ltcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 0 no-repeat;
}

.button-sec .rtcorner, .button-sec-long .rtcorner,
.button-down .rtcorner, .button-up .rtcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 0 no-repeat;
}

.button-sec .rbcorner, .button-sec-long .rbcorner,
.button-down .rbcorner, .button-up .rbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 100% no-repeat;
}

.button-sec .lbcorner, .button-sec-long .lbcorner,
.button-down .lbcorner, .button-up .lbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 100% no-repeat;
	padding: 2px 3px; 
}

/* red buttons */

.button-pri .tlborder, .button-pri-long .tlborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_red.gif) 0 0 no-repeat;
}

.button-pri .brborder, .button-pri-long .brborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_red.gif) 100% 100% no-repeat;
}

.button-pri .ltcorner, .button-pri-long .ltcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 0 no-repeat;
}

.button-pri .rtcorner, .button-pri-long .rtcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 0 no-repeat;
}

.button-pri .rbcorner, .button-pri-long .rbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 100% no-repeat;
}

.button-pri .lbcorner, .button-pri-long .lbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 100% no-repeat;
	padding: 2px 3px; 
}

/* grey buttons */

.button-grey .tlborder, .button-grey-long .tlborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_grey.gif) 0 0 no-repeat;
}

.button-grey .brborder, .button-grey-long .brborder
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_grey.gif) 100% 100% no-repeat;
}

.button-grey .ltcorner, .button-grey-long .ltcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 0 no-repeat;
}

.button-grey .rtcorner, .button-grey-long .rtcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 0 no-repeat;
}

.button-grey .rbcorner, .button-grey-long .rbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 100% 100% no-repeat;
}

.button-grey .lbcorner, .button-grey-long .lbcorner
{
	display:block; float: none !important;
	background: url(../images/icons/IE_buttons/button_border_corners.gif) 0 100% no-repeat;
	padding: 2px 3px; 
}

/* footer buttons */

html body .footerButtons .button-sec-long .lbcorner, 
html body .footerButtons .button-sec-long:visited .lbcorner,  
html body .footerButtons .button-sec .lbcorner, 
html body .footerButtons .button-sec:visited .lbcorner,
html body .footerButtons .button-pri .lbcorner, 
html body .footerButtons .button-pri:visited .lbcorner,
html body .footerButtons .button-pri-long .lbcorner, 
html body .footerButtons .button-pri-long:visited .lbcorner,
html body .footerButtons .button-grey-long .lbcorner, 
html body .footerButtons .button-grey-long:visited .lbcorner, 
html body .footerButtons .button-grey .lbcorner,
html body .footerButtons .button-grey:visited .lbcorner
{
padding: 2px 3px;
}
/*
* html table {border: dotted 1px red;}
*/
/*
STANDARDISED ISPEK TABLES
*/

table.standardtable {
        width: 100%;
        margin: 0;
        }
       
table.standardtable th,
table.standardtable td
{
        padding: 2px 4px;
        margin: 2px;
}

table.standardtable th {
        font-weight: normal;
        text-align: left;
        background: #F0F0F0;
        width: 150px;
}

table.standardtable thead th {
        font-weight: bold;
        text-align: left;
        background: #039;
        width: auto;
        color: #FFF;
}

table.standardtable td {
color: rgb(65,83,93);
}

table.twocolumnlayout {}
table.twocolumnlayout td {
width: 200px;
}

table.standardtable td h3 {margin: 0;}

table.standardtable td a {margin-bottom: 0 !important;}

table.dataDisplay
{
        border: solid 1px #039;
        border-spacing: 0;
        border-collapse: collapse;
}

table.dataDisplay td
{
        border-bottom: solid 1px #999;
       
}

table.dataDisplay thead th
{
        border: solid 1px #039;
        *border: solid 2px #FFF;
        background: #039;
        color: #FFF;
}

table.dataDisplay thead th + th
{
        border-left: solid 2px #FFF;
}

table.dataDisplay thead tr + tr th
{
        border: solid 2px #FFF;
}


.systemOutput {color: rgb(65,83,93); }

table.greybanner thead th
{
        background: #F0F0F0;
        color: #039;   
        border-right: solid 1px #039;
}
table.greybanner tbody th
{
        background: #FFF;
        color: #039;   
        font-weight: bold;
}
table.liquidlayout td,
table.liquidlayout th
{
        width: auto;
}
table.tableborder
{
        border: solid 1px #039;
        border-collapse: collapse;
}

table.tableborder td,
table.tableborder th
{
        border-top: solid 1px #039;
        border-bottom: solid 1px #039;
}

table.columnborder td,
table.columnborder th
{
        border: solid 1px #039;
        border-right: solid 1px #039;
}


.center{text-align: center !important;}
.right{text-align: right !important;}

table.noborders,
table.noborders td,
table.noborders th
{
        border: none !important;
}      

/* Browser diagnostics on the browser settings page */

#cssTypeStandard
{
    display: block;
}
#cssTypeTablet      /* iPads and smaller tablet devices */
{
    display: none;
}
#cssTypeMobile      /* iPhones android phones */
{
    display: none;
}

@media screen and (max-device-width: 1024px)    /* Width is kluge targeting iPad */
{
	#cssTypeStandard
	{
	    display: none;
	}
    #cssTypeTablet
    {
        display: block;
    }
}

/* Calendar pop-up button */
.calendar-launcher 
{
	cursor:pointer;
}

.nowrap 
{
  white-space: nowrap;
}

.MsgConsole-console
{
  border: solid lightgrey 1px; 
  width: 97%; 
  margin: 10px 15px;
}
.MsgConsole-header
{
  position: relative;
  height: 14px;
  border-bottom: solid lightgrey 1px;
}
.MsgConsole-header-title
{
  margin: 2px 5px;
  color: grey;
  font-size: smaller;
}
.MsgConsole-header-buttonbar
{
  position: absolute;
  right: 0px;
  top: 0px;
}
.MsgConsole-header-buttonbar-pause
{
  width: 14px;
  height: 14px;
  display: inline-block;
  cursor: pointer;
  background-image: url(../images/icons/pause.png);
}
.MsgConsole-header-buttonbar-clear
{
  width: 14px;
  height: 14px;
  display: inline-block;
  cursor: pointer;
  background-image: url(../images/icons/clear.png);
}
.MsgConsole-header-buttonbar-close
{
  width: 14px;
  height: 14px;
  display: inline-block;
  cursor: pointer;
  background-image: url(../images/icons/miniCross14.gif);
}
.MsgConsole-content
{
/*   top: 12px; */
  min-height: 30px;
  max-height: 140px;
  padding: 5px 5px 5px 5px; 
  position: relative;
  overflow-y: auto;
}
.MsgConsole-content-DEBUG, .MsgConsole-content-TRACE, .MsgConsole-content-INFO, .MsgConsole-content-WARN, .MsgConsole-content-ERROR
{
  line-height: 1.1;
}
.MsgConsole-content-DEBUG, .MsgConsole-content-TRACE
{
  color: green;
}
.MsgConsole-content-INFO
{
  color: blue;
}
.MsgConsole-content-WARN
{
  color: red;
}
.MsgConsole-content-ERROR
{
  color: red;
  font-weight: bold;
}

.unitOfInputField
{
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  margin: 0 3px;
}
	
/*
MF 200909
Example of simple tabs as a table. See commented out section in
BoxDeliverySubComponent.jspf for example use.
The 'tabspace' is a td representing the gap between the tabs. Note 
css control of cell-spacing with border-spacing:0px; does not work pre-IE8

table.tabSet
{
	border-spacing:0px;
}

table.tabSet td
{

}

table.tabSet td.tab
{
	border-top: solid 1px;
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
}

table.tabSet td.tabspace
{
	border-bottom: solid 1px;
}

table.tabSet td.selected
{
	background: #d7e6f1;
	border-bottom: none;
}

table.tabSet a
{
	text-decoration: none;
}
*/

.wf-create-activity-td-heading {
  width: 120px;  
}

.finishedGoodArt
{
  background: rgba(0, 0, 0, 0) url("/iSpek/images/sprites/sprites1.png") no-repeat scroll 0 -241px;	
  display: inline-block;
  cursor: pointer; 
  width: 21px;
  height: 17px;
}

.dieDxfPreview
{
  background: rgba(0, 0, 0, 0) url("/iSpek/images/sprites/sprites1.png") no-repeat scroll 0 -241px;	
  display: inline-block;
  cursor: pointer; 
  width: 21px;
  height: 17px;
  margin-left: 2px;
}

.designDxfPreview
{
  background: rgba(0, 0, 0, 0) url("/iSpek/images/sprites/sprites1.png") no-repeat scroll 0 -241px;	
  display: inline-block;
  cursor: pointer; 
  width: 21px;
  height: 17px;
  margin-left: 2px;
}

.infoText
{
	color : #999;
	font-style: italic;
}

/* styles for: LpvToolingLinkTag */
span.pending-obsoletion {
	color: orange;
}
a.specification-only {
	color: green;
}
a.being-manufactured {
	color: green;
}
a.in-production {
	/*color: black;*/
}
a.being-repaired {
	color: brown;
}
a.obsolete {
	color: red;
}
/* specific to lpv art status */
a.revised-no-plates {
	color: brown;
} 
a.obsolete-tooling-changed {
	color: red;
}

a.preprint, a.preprint:visited {
	background-color: lightsteelblue;
}

div.toolTagWcCompList {
	margin-left: 3px;
	font-size: 0.833em;
}

/* complex range tags */
div.rangeControlBackground {
width: 100%;
background-color: white;
}

table.rangeControlTable {
border-collapse: separate;
border-spacing: 0px;
/*width: 100%;*/
}

th.rangeControlHeader
{
color: #FFF;
background: #039;
text-align: center;
vertical-align : middle;
padding: 2px;
}

table.rangeControlTable .rangeControlSharedCells {
background-color: #F0F0F0;
vertical-align : middle;
}

table.rangeControlTable .rangeControlSharedCells input {
/*width: 100%;*/
}

table.rangeControlTable .range2DHardConstraintTd {
background-color: #D7E6F1;
white-space: nowrap;
}

table.rangeControlTable .range2DHardConstraintTd input {
/*width: 100%;*/
display: inline-block;
}

table.rangeControlTable .range2DSoftConstraintTd {
background-color: #CCFF99;
white-space: nowrap;
}

table.rangeControlTable .range2DSoftConstraintTd input {
/*width: 100%;*/
display: inline-block;
}

table.rangeControlTable  td.rangeControlReadOnly {
background-color: lightgrey;
}
table.rangeControlTable  td.rangeControlReadOnly input {
background-color: lightgrey;
}

.rankingDetails li {
    list-style-type: none;
}

.rankingDetailsQty {
    font-weight: bold;
}