/*
 * Colors on this CSS -------------------------------------------------------------------
 *
 * CSS does not allow to define custom, "named" colors, 
 * so do a search and replace of this colors in case you want to change them.
 * 
 * Heading Fonts: #07313F;
 * Light, e.g. body background: #F3F8FF;
 * Medium, e.g. info message area, table header: #DCE4EE;
 * Dark, e.g. header/navbar: #87A4C7;
 * Between dark and medium, e.g. seperator within dark header: #BCD0D4;
 * Read only, "grayed out" fields: #DDE8EB;
 * Link Color: #595046;
 * Link Hover Color: #DCE4EE;
 * Link in dark header/navvar: #EDF2F3;
 * Gray out overlay: #444444;
 * Text color, headings and normal text: #2B3848;
 * Data table alternate row: #EDF3FA;(Normal table row has no color => Inherits the light bg)
 *
 */
/*
 * General ------------------------------------------------------------------------------
 */

h1{
  font-size: 160%;
  border-top-style: solid;
  border-top-color: #87A4C7;
  background-color: #DCE4EE;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

h2{
  font-size: 140%;
  border-top-style: solid;
  border-top-color: #87A4C7;
  background-color: #DCE4EE;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

h3{
  font-size: 120%;
  color: #2B3848;
  padding-left: 10px;
  padding-right: 10px;
}

/*
  * Basic page layout/color/font
  */
 body {
  color:#2B3848;
  background:#F3F8FF;
  font-family: Arial; 
  font-size: small;
  line-height: 150%;
  padding-left: 0px;
}  

p {
  padding-left: 10px;
  padding-right: 10px;
}

a {
  color: #595046;
}	

/*
 * Read only form input fields
 */
input.readonly {
  background-color:#DDE8EB;
}

/*
 * Header/Nav Bar -----------------------------------------------------------------------
 */

/*
 * The header/nav bar on top of the pages
 */
div.mvcHeader {
  background-color:#87A4C7;
  border-width: 1px;
  border-bottom-color: #DCE4EE;
  border-bottom-style: solid;
  border-top-color: #DCE4EE;
  border-top-style: solid;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 3px;
}

/*
 * Links in divs with class "mvcHeader". The first part selects the class of the div, 
 * the second the element in side the div to which it should be applied. 
 */
div.mvcHeader a {
  color:#EDF2F3;
}

/*
 * Note: The default hover for links is defined after the "action links" below.
 */

/*
 * Hint and error texts -----------------------------------------------------------------
 */

/*
 * The are for displaying user messages like hints, warnings and errors
 */
div.mvcUserMessages {
  background-color:#DCE4EE;
  border-width: 1px;
  border-bottom-color: #87A4C7;
  border-bottom-style: solid;
  border-top-color: #87A4C7;
  border-top-style: solid;
  padding: 5px;
  padding-left: 10px;
  padding-left: 10px;
  margin-bottom: 3px;
}

/*
 * The basic format for each message inside "mvcUserMessages"
 */
p.mvcUM {
  vertical-align:middle;
  line-height:140%;
  margin:8px;
  height: 24px;
  padding-left: 40px;
  border: none;
}

/*
 * Additional format for warnings inside "mvcUserMessages"
 * (Simply combine both, e.g. class="mvcUM mvcWarning")
 */
p.mvcWarning {
  background: url(img/warning.png) no-repeat top left;
}

/*
 * Additional format for infos inside "mvcUserMessages"
 * (Simply combine both, e.g. class="mvcUM mvcInfo")
 */
p.mvcInfo {
  background: url(img/info.png) no-repeat top left;
}

/*
 * Additional format for errors inside "mvcUserMessages"
 * (Simply combine both, e.g. class="mvcUM mvcError")
 */
p.mvcError {
  background: url(img/error.png) no-repeat top left;
}

/*
 * Hints for users like "Did you know?"
 */
p.hintText{
  color: #5a5447;
  vertical-align:middle;
  height: 24px;
  line-height:110%;
  padding-left: 20px;
  border: none;
  background: url(img/lightbulb16x16.png) no-repeat top left;
}

/*
 * Hints for users like "Did you know?"
 */
span.hintText{
  color: #dbdbee;
  vertical-align:middle;
  height: 24px;
  line-height:120%;
  padding-left: 20px;
  background: url(img/lightbulb16x16.png) no-repeat top left;
}

/*
 * Info text with small info icon.
 */
span.mvcInfo {
  background: url(img/info16x16.png) no-repeat top left;
}

/*
 * Info text with small error icon.
 */
span.mvcError {
  background: url(img/error16x16.png) no-repeat top left;
}

/*
 * Page main area (excluding nav bars and menus) ----------------------------------------
 */
div.pageMainArea {
  z-index: 9000;
  position:relative; top:95px; left:110px; width:100%; height:100%; text-align:left; 
  vertical-align:middle; 
}

div.pageMainAreax {
  position:fixed; right:1px;
  top:94px;
  left:116px;
  bottom:54px;
  margin:0px;
  overflow: auto;
}

/*
 * Action Links -------------------------------------------------------------------------
 */

/*
 * Link for adding new objects, e.g. new customers.
 */
a.addObject{
  padding-left: 20px;
  background: url(img/add16x16.png) no-repeat top left;
}

/*
 * Link for adding new objects, e.g. new customers.
 */
a.help{
  padding-left: 40px;
  line-height: 50px;
  text-decoration: none;
}

/*
 * Link for creating data, e.g. sample data in the data base.
 */
a.addData{
  padding-left: 20px;
  background: url(img/databaseAdd16x16.png) no-repeat center left;
}

/*
 * Link for searching/looking up data.
 */
a.search{
  padding-left: 20px;
  background: url(img/search16x16.png) no-repeat center left;
}

/*
 * "Right" or "Next" link
 */ 
a.right{
  padding-right: 25px;
  background: url(img/ArrowRight.png) no-repeat center right;
}

/*
 * "Left" or "Previous" link
 */ 
a.left{
  padding-left: 25px;
  background: url(img/ArrowLeft.png) no-repeat center left;
}

/*
 * Must come after the other link defs.
 */
a:hover {
  background-color: #DCE4EE;
}
a:hover.help{
  background-color: #87A4C7;
}

/*
 * Overlays for "modal" dialogs and menus ---------------------------------------
 */

/*
 * Dynamic drop down menus
 */
div.mvcDropDownMenu {
  z-index: 11200;
  position:fixed; top:0px; left:0px; width:100px; height:50px; text-align:left; 
  vertical-align:left; 
  background-color: #87A4C7;
  padding: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: #DCE4EE;
  border-top-style: none;
}

/*
 * Links within drop down menus
 */
div.mvcDropDownMenu a {
  color:#EDF2F3;
  text-decoration: none;
}

/*
 * Overlays which should stay visible all the time, e.g. navigation header
 */
div.mvcOverlayForStickyHeader {
  z-index: 10000;
  position:fixed; top:0px; left:0px; width:100%; height:25px; text-align:left; 
  vertical-align:middle; 
  margin: 0px;
  white-space: nowrap;
  padding: 5px;
  // Light: background-color: #DCE4EE;
  // Dark: background-color: #87A4C7;
  background-color: #87A4C7;
  border-bottom-style: solid;  
  border-bottom-width: 1px; 
  border-bottom-color: #DCE4EE;
  padding-left: 10px;
}

div.mvcOverlayForStickyHeader a {
  color:#EDF2F3;
  text-decoration: none;
}

div.mvcOverlayForStickyHeader p {
  text-align: left;
  margin: 0px;
  padding: 0px;
}

div.mvcOverlayForStickyHeader td {
  margin: 0px;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
  border-right: solid;
  border-right-width: 0px;
  border-right-color: #BCD0D4;
  text-align: left;
  font-weight: bold;
}

/*
 * Overlays which should stay visible all the time, e.g. navigation header
 */
div.mvcOverlayForStickyFooter {
  z-index: 11000;
  position:fixed; bottom:0px; left:0px; width:100%; height:38px; text-align:left; 
  vertical-align:middle; 
  margin: 0px;
  white-space: nowrap;
  padding: 0px;
  background-color: #87A4C7;
  border-bottom-style: solid;  
  border-bottom-width: 1px; 
  border-bottom-color: #DCE4EE;
  padding-left: 10px;
}

/*
 * Menu-like overlays which should stay visible all the time
 */
div.mvcOverlayForMenus {
  background-color: #DCE4EE;
  z-index: 10000;
  position:fixed; top:101px; left:0px; width:95px; height:100%; text-align:left; 
  vertical-align:left; 
  margin: 1px;
  white-space: nowrap;
  padding-left: 10px;
}

/*
 * "Modal" overlay for graying out a whole page
 */
div.mvcOverlay {
  z-index: 11000;
  filter: alpha(opacity=50); /*older IE*/
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
  -moz-opacity: .50; /*older Mozilla*/
  -khtml-opacity: 0.5;   /*older Safari*/
  opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
  background-color:#444444;
  position:fixed; top:0px; left:0px; width:100%; height:100%; text-align:center; 
  vertical-align:middle; 
  padding-top: 0px;
}

/*
 * Links within the overlay
 */
div.mvcOverlay a {
  color:#595046;
}

/*
 * Message to be put over "modal" overlay, e.g. "Loading..."
 */
div.mvcOverlayMessage {
  background-color:#ffffff;
  z-index: 11300;
  position:fixed; width:200px; height:40px; text-align:center; top:10px; left:10px;
  border-color: #87A4C7; border-style: groove;
}

/*
 * Area to be put over "modal" overlay, e.g. for displaying an HTML page as an overlay
 */
div.mvcOverlayDialog1 {
  background-color:#ffffff;
  z-index: 21000;
  position:fixed; width:1195px; height:605px; text-align:center; top:30px; left:10px;
  border-color: #87A4C7; border-style: groove;
}

/*
 * Area around the "modal" dialog, contains the "Close" link, e.g.
 */
div.mvcOverlayDialogOuter1 {
  background-color:#87A4C7;
  color:white;
  z-index: 20000;
  position:fixed; width:1200px; height:630px; text-align:right; top:10px; left:10px;
  border-color: #87A4C7; border-style: groove;
}

div.mvcOverlayDialog2 {
  background-color:#ffffff;
  z-index: 21000;
  position:fixed; width:1100px; height:555px; text-align:center; top:30px; left:10px;
  border-color: #87A4C7; border-style: groove;
}

/*
 * Area around the "modal" dialog, contains the "Close" link, e.g.
 */
div.mvcOverlayDialogOuter2 {
  background-color:#87A4C7;
  color:white;
  z-index: 20000;
  position:fixed; width:1105px; height:580px; text-align:right; top:10px; left:10px;
  border-color: #87A4C7; border-style: groove;
}

/*
 * Links in "modal" dialog
 */
div.mvcOverlayDialogOuter1 a{
  color:white;
  text-decoration:none;
}

/*
 * Links in "modal" dialog
 */
div.mvcOverlayDialogOuter2 a{
  color:white;
  text-decoration:none;
}

/*
 * Various text types -------------------------------------------------------------------
 */
 
*.sourceCode {
  font-family: Courier New;
}

*.sourceCodeBold {
  font-family: Courier New;
  font-weight: bold;
}

*.refName {
  font-style: italic;
}

*.refNameBold {
  font-weight: bold;
  font-style: italic;
}

/*
 * Data Tables --------------------------------------------------------------------------
 */

/* 
 * Data Table
 */
table.data {
  border-spacing: 1px;
  border-bottom: solid; 
  border-bottom-width: 1px; 
  border-bottom-color: #87A4C7;
  margin-top: 7px;
  padding-left: 10px;
  font-size: small;
}	

table.data th a {
  color: #2B3848;
  text-decoration: underline;
  background: url(img/ArrowUpDown.png) no-repeat center right;
  padding-right: 14px;
  padding-left: 1px;
}

/* 
 * Cell Padding
 */
table.data td {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px
}
table.data th {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px
}

/* 
 * Table header in data table
 */
table.data th {
 background-color: #DCE4EE;
}	

/*
 * Alternate colors for table rows.
 */
tr.d0 td {
  background-color: #F3F8FF;
}
tr.d1 td {
  background-color: #EDF3FA;
}

/*
 * Row hover
 */
table.data tr:hover td {
  background-color: #DCE4EE;
}

/*
 * Tree -----------------------------------------------------------------------
 */
 div.tree {
  background-color:#DCE4EE;
  border-width: 1px;
  border-bottom-color: #DCE4EE;
  border-bottom-style: solid;
  border-top-color: #DCE4EE;
  border-top-style: solid;
  padding: 5px;
  padding-left: 10px;
  margin-bottom: 3px;
}

div.tree a {
  border-style:solid;
  border-color:transparent;
  padding-left: 25px;
}

*.treeExpand{
  background: url(img/plus.png) no-repeat center left;
}

*.tree1{
  border-left-width: 10px;
  background: url(img/folder16x16.png) no-repeat center left;
}

*.tree2{
  border-left-width: 40px;
  background: url(img/folder16x16.png) no-repeat center left;
}

*.tree3{
  border-left-width: 60px;
  background: url(img/folder16x16.png) no-repeat center left;
}

div.tree2 {
  padding-left: 75px;
}