@CHARSET "UTF-8";

* {
  padding: 0;
  margin: 0;
  border: none;
  text-decoration: none;
  font: normal 12px/14px 'Segoe UI', Tahoma, sans-serif;
}

*:focus {outline: 1px solid transparent}
.outlineVisible {outline: 1px dotted orange}

body
{
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
}

h2, h3, h4, h2 > span, h3 > span, h4 > span {
  font-weight: bold;
}

h2 {
  font-size: 13px;
  line-height: 16px;
  color: #333;
}

h3 {
  line-height: 14px;
}

button {
  line-height: 13px;
  letter-spacing: 0;
}

#tuningarea.hidden, #footer.hidden
{
  visibility: hidden;
}

#tuningarea.hidden *, #footer.hidden *
{
  visibility: hidden !important;
}

.left-float {
  float: left;
}

.right-float {
  float: right;
}

.auto-float {
  float: auto;
}

.clear-float {
  clear:both;
}

.clear-left-float {
  clear: left;
}

.clear-right-float {
  clear: right;
}

.no-display {
  display: none;	
}

.no-visibility {
  visibility: hidden;
}

/*
 * Header
 */

#MoveAreaMap1
{
  position: absolute;
  width: 795px;
  height: 100px;
}

#header
{
  width: 100%;
  height: 55px;
}

#logo
{
  position: absolute;
  background: url('../images/Logo.png') no-repeat 15px 16px;
  width: 220px;
  height: 49px;

}

#beta
{
  position: absolute;
  left: 220px;
  top: 14px;
  width: 54px;
  height: 30px;
  background: url('../beta.png') no-repeat;
  pointer-events: none;
  display: none;
  /*<<
  <if "#IsBetaVersion# = 1 || #IsConfidentialVersion# = 1">
    display: block;
  </if>
  */
  /*>>*/
}

/*
 * Toolbar
 */

#toolbar
{
  position: absolute;
  width: 150px;
  text-align: right;
  top: 2px;
  left: 460px;
  z-index: 999;
  white-space: nowrap;
  cursor: default;  
}

#settings
{
  z-index: 999;
  display: block;
  padding: 5px 14px;
  color: #e6ecf2;
}

#help
{
  z-index: 999;
  display: block;
  color: #e6ecf2;
}

#help td
{
  padding: 5px 28px 5px 14px;
}

/*
 * Content
 */
#content
{
  width: 795px;
  height: 550px;
  overflow: hidden;
  position: absolute;
}

#content.launching
{
  cursor: progress !important;
}

/*
 * Panels
 */

#tab-panels
{
  position: absolute;
  width: 793px;
  top: 94px;
  height: 289px;
  left: 1px;
}

#tab-panels.background {
  background: url('../images/layout/panel-background.png') no-repeat 0 0;
}

#tab-panels .panel
{
  position: absolute;
}

#tab-panels .pillarcontent
{
  font-size: 12px;
}

.tab-panels > .panel {
  padding: 0 21px;
  width: 753px; /* real size is 793 cause of the box-model */
}

.panel a {
  cursor: pointer;
}

.panel > div, .panel div.pillar  {
  height: 289px;
  float: left;
  padding-top: 26px;
  text-align: center;
}

.panel div.pillar {
  height: auto;
}

.panel > div.divider {
  width: 19px !important;
  background: url('../images/layout/divider.png') no-repeat 0 70%;
  margin: 0 9px;
  padding: 0;
}

.panel div.pillar.pillar .status {
  margin-top: 11px;
}

.panel div.pillar .status .icon {
  height: 37px;
  width: 32px;
  display: inline-block;
  background-position: 50% 0;
  background: url('../images/panel1/status-warning.png') no-repeat 0 0;
}

.panel div.pillar .status .text {
  height: 14px;
}

.panel div.pillar .status .text span {
  cursor: pointer;
}

.panel div.pillar .status .icon {
  /* default icon is warning */
  background: url('../images/panel1/status-warning.png') no-repeat 0 0;
}

.panel div.pillar.good .status .icon {
  background: url('../images/panel1/status-good.png') no-repeat 0 0;
}

.panel div.pillar.warning .status .icon {
  background: url('../images/panel1/status-warning.png') no-repeat 0 0;
}

.panel div.pillar.critical .status .icon {
  background: url('../images/panel1/status-critical.png') no-repeat 0 0;
}

.panel div.pillar.rescue .status .icon {
  background: url('../images/panel1/status-rescue.png') no-repeat 0 0;
}

.panel div.pillar.good a, .panel div.pillar.good .status .text {
  color: green;
}

.panel div.pillar.warning a, .panel div.pillar.warning .status .text {
  color: #ff9900;
}

.panel div.pillar.critical a, .panel div.pillar.critical .status .text {
  color: #a90000;
}

.panel div.pillar.rescue.warning a, .panel div.pillar.rescue.warning .status .text {
  color: green;
}

.panel > div.pillar .status .icon:hover  {
  background-position: 50% -37px;
}

.panel > div.pillar .button-area {
  margin-top: 22px;
}

.panel div.pillar .button-area .pillar-button button {
  height: 30px;
}

.panel div.pillar > .text {
  margin-top: 20px;
  margin-left: 2px;
  margin-right: 2px;
  text-align: left;
}

.panel div.pillar a {
  text-decoration: underline;
  color: #194e83;
}

.panel > div.pillar .status .icon, .panel > div.pillar a {
  cursor: pointer;
}

.pillar .text .used-settings > div {
  padding-left: 25px;
  background-position: 2px 50%;
  background-repeat: no-repeat;
}

.pillar .text > .used-settings > div {
  margin-top: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* 
 * Panel 1 specific
 */
#panel1 div.pillar {
  width: 160px;
}

/*
 * Panel 2 specific
 */
#panel2 > div:first-child, 
#panel3 > div:first-child, 
#panel4 > div:first-child {
  height: auto;
  padding-left: 19px;
  padding-right: 10px;
}

#panel2 > div:first-child .pillar, #panel2 > .pillar, 
#panel3 > div:first-child .pillar, #panel3 > .pillar, 
#panel4 > div:first-child .pillar, #panel4 > .pillar {
  width: 212px;
  display: inline-block;
}

#panel2 > div:first-child .pillar {
  padding-top: 0;
  margin-top: 31px;
}


#panel2 > div.pillar > div {
  margin-top: 15px;
}

#panel2 > div:first-child > :last-child, 
#panel3 > div:first-child > :last-child, 
#panel4 > div:first-child > :last-child {
  margin-left: 20px;
}

#panel2 > div.pillar, 
#panel3 > div.pillar, 
#panel4 > div.pillar {
  margin-left: 10px;
}

.panel div.pillar > .text.tuningmode-config {
  margin-top: 45px;
}
.panel div.pillar > .text .eco, .panel div.pillar > .text .turbo {
  padding: 3px 0;
  padding-left: 22px;
  background-position: 3px 50%;
  background-repeat: no-repeat;
}
.panel div.pillar > .text .eco {
  background-image: url('../images/panel2/eco-link.png');
}
.panel div.pillar > .text .turbo {
  background-image: url('../images/panel2/turbo-link.png');
}

/* 
 * Panel 3 specific
 */

#panel3 > div:first-child .pillar  {
  width: 272px;
  padding-top: 0;
  margin-top: 24px;
}
#panel3 div:first-child div.pillar:last-child {
  width: 140px;
  margin-left: 32px;
}
#panel3 div:first-child div.pillar:last-child > .text {
  margin-top: 10px;
}


#panel3 div:first-child div.pillar .button-area {
  width: 272px; 
}

#panel3 > .pillar:last-child .button-area {
  margin-top: 83px
}


/* 
 * Panel 4 specific
 */
#panel4 > div.pillar > div {
  margin-top: 25px;
}
#panel4 > div:first-child .pillar {
  padding-top: 0;
  margin-top: 41px;
}

/* 
 * Panel 5 specific
 */
 
#panel5 > div.pillar > h2 {
  min-height: 32px;
}

#panel5 > div.pillar {
  margin-left: 12px;
  text-align: center;
}

#panel5 > div.pillar .button-area {
  width: 210px;
  margin: 25px auto 0 auto;
}

#panel5 > div.pillar > .text-container {
  margin-top: 21px;
}

#panel5 > div.pillar:first-child {
  margin-left: 60px;
  margin-right: 50px;
}

#panel5 > div.pillar:nth-child(3) .text {
  text-align: left;
  width: 170px;
}

/* 
 * Panel 6 specific
 */



/*
 * Footer
 */
.footer
{
  pointer-events: none;
  position: absolute;
  /*height: 10px;*/
  display: inline-block;
  width: 795px;
  bottom: 0;
}

.footer.panel6
{
  color: white;
}

.footer .trial .text {
  text-shadow : 1px 1px 1px #FFFFFF
}
.footer.panel6 .trial .text {
  text-shadow : 1px 1px 1px #000000
}

.footer > .trial {
  position: relative;
  display: none;
  float: right;
  text-align: right;
  height: 88px;
  width: 500px;
}

body.trial .footer > .trial {
  display: block;
}

body.trial .tuningarea {
  background: url('../images/trial/bg_tuning_trial.png') no-repeat 0 0 !important;
}

.footer > .trial .container {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 4px 5px;
}

.footer > .trial button.trial {
  pointer-events: auto;
  color: #084164;
  border-radius: 3px;
  cursor: pointer;
}
.footer > .trial button.trial > div {
  float: left;
  height: 22px;
}
.footer > .trial div.text {
  display: inline-block;
  margin-right: 6px;
  position: relative;
  top: -3px;
}

.footer > .trial button.trial > .left-side {
  background: url('../images/trial/button-side-sprite.png') no-repeat 0 0;
  width: 27px;
}
.footer > .trial button.trial > .middle {
  background: url('../images/trial/button-center-sprite.png') repeat-x 0 0;
  height: 18px;
  padding-top:4px;
}
.footer > .trial button.trial > .right-side {
  background: url('../images/trial/button-side-sprite.png') no-repeat -27px 0;
  width: 11px;
}

.footer > .trial button.trial:hover > .left-side {
  background-position: 0 -22px;
}
.footer > .trial button.trial:hover > .middle {
  background-position: 0 -22px;
}
.footer > .trial button.trial:hover > .right-side {
  background-position: -27px -22px;
}

.footer .trial .button
{
  display: block;
  height: 18px;
  padding-left: 35px;
  padding-right: 10px;
  padding-top: 4px;
  margin-left: 10px;
  color: #084164; 
}
