@CHARSET "UTF-8";

button {
  line-height: 13px;
  color: black;
  text-align: left;
  padding: 0;
  margin: 0;
}

#buttons
{
  position: absolute;
  margin-left: 714px;
  z-index: 10;
}

#minimize, #minimize-hover, #minimize-pressed
{
  position: absolute;
  display: none;
  width: 25px;
  height: 19px;
  font-size: 1px;
  line-height: 1px;
}

#minimize {
  display: block;
  background-image: url('../images/minimize_normal.png');
}

#minimize-hover {
  background-image: url('../images/minimize_hover.png');
}

#minimize-pressed {
  background-image: url('../images/minimize_pressed.png');
}

#close, #close-hover, #close-pressed
{
  position: absolute;
  display: none;
  width: 42px;
  height: 19px;
  font-size: 1px;
  line-height: 1px;
}

#close {
  display: block;
 /*NAB 15.06.2011: changed from 24px to 25px to distinguish control elements on mouseover*/
  margin-left: 25px;
  background-image: url('../images/close_normal.png');
}

#close-hover {
  background-image: url('../images/close_hover.png');
}

#close-pressed {
  background-image: url('../images/close_pressed.png');
}


/*
 * Panel Buttons
 */

.button-area {
  background-color: #fefefe;
  border: 1px #bababa solid;
  margin: 0;
  border-radius: 5px;
  box-shadow: 0px 0px 4px 2px #ffffff;
}

.button-area > .inner-glow {
  border: 1px #e4e4e4 solid;
  border-radius: 4px;
}

.button-area .pillar-button {
  margin-bottom: 1px;
}

.button-area .pillar-button:last-child {
  margin-bottom: 0;
}

.pillar-button {
  padding:1px;
  border-radius: 4px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #b2b2b2),
    color-stop(0.4, #2e2e2e),
    color-stop(0, #828282)
  );
  cursor: default;
  position:relative;
}

.pillar-button > .inner-glow {
  border-radius: 3px;
  padding: 1px;
  background-color: white;
}

.pillar-button .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #ffffff),
    color-stop(0.75, #ffffff),
    color-stop(0, #d5d5d5)
  );
  border-radius: 2px;
  text-align: left;
  min-height: 26px;
}

.pillar-button button:not(.config) {
  border-radius: 2px;
  background: none;
  height: 26px;
  padding-left: 31px;
  padding-right: 5px;
  background-position: 3px 50% !important;
  background-repeat: no-repeat;
  width: 100%;
}

.pillar-button map area {
  pointer-events: none;
}

.pillar .detail {
  color: #767676;
}

.pillar-button button.config {
  background: url('../images/buttons/button-config.png') no-repeat 0 0;
  height: 21px !important;
  width: 21px !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  border-bottom-right-radius: 2px;
}

.pillar-button .config:hover, .pillar-button .config.hover {
  background-position: 0 -22px;
}
.pillar-button .config.active {
  background-position: 0 -44px;
}

.pillar-button:hover .background, .pillar-button.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #f4f8fb),
    color-stop(0.75, #f4f8fb),
    color-stop(0, #b9d3e4)
  );
}

.pillar-button.active .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #98beda ),
    color-stop(0.44, #e1ecf4 ),
    color-stop(0, #e1ecf4 )
  );
}

.pillar-button.active .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#005da4, #ffffff);
}

/*
 * Tuning Area buttons
 */

.tuningarea .button-area .pillar-button button:not(.config) {
  height: 30px;
}
 
.tuningarea .button-area .economy,
.tuningarea .button-area .economy .pillar-button{
  border-radius: 4px 0px 0px 4px;
} 

.tuningarea .button-area .economy .pillar-button .background,
.tuningarea .button-area .economy .pillar-button button:not(.config) {
  border-radius: 2px 0px 0px 2px;
}

.tuningarea .button-area .economy .pillar-button  .inner-glow {
  border-radius: 3px 0px 0px 3px;
}

.tuningarea .button-area .standard,
.tuningarea .button-area .standard .pillar-button,
.tuningarea .button-area .standard .pillar-button .background,
.tuningarea .button-area .standard .pillar-button button:not(.config),
.tuningarea .button-area .standard .pillar-button  .inner-glow {
  border-radius: 0px 0px 0px 0px;
} 

.tuningarea .button-area .turbo,
.tuningarea .button-area .turbo .pillar-button {
  border-radius: 0px 4px 4px 0px ;
} 

.tuningarea .button-area .turbo .pillar-button .background,
.tuningarea .button-area .turbo .pillar-button button:not(.config) {
  border-radius: 0px 2px 2px 0px ;
} 

.tuningarea .button-area .turbo .pillar-button  .inner-glow {
  border-radius: 0px 3px 3px 0px ;
} 

.tuningarea .button-area .left-flip button.config {
  rotateY(180deg);    
  -webkit-transform: rotateY(180deg); 
  -moz-transform: rotateY(180deg);
  left: 0 !important;  
}

 
/*
 * Tuning Area economy button
 */
 
.tuningarea .economy .pillar-button:not(.activated):not(.disabled) button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_economy_default_icon.png') !important;
  background-position: 20px 50% !important;
}

.tuningarea .economy .pillar-button:not(.activated):not(.progress):not(.disabled) button:not(.config):active {
  background-image: url('../images/tuningarea/mode_economy_active_icon.png') !important;
}

.tuningarea .economy .pillar-button.activated button:not(.config),
.tuningarea .economy .pillar-button.disabled button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_economy_active_icon.png') !important;
  background-position: 19px 4px !important;
}

.tuningarea .economy .pillar-button:hover .background,
.tuningarea .economy .pillar-button.hover .background  {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #f9fbf4 ),
    color-stop(0.75, #f9fbf4 ),
    color-stop(0, #ccdfb2 )
  );
}


.tuningarea .economy .pillar-button:active .background,
.tuningarea .economy .pillar-button.active .background,
.tuningarea .economy .pillar-button.disabled .background,
.tuningarea .economy .pillar-button.disabled:hover .background,
.tuningarea .economy .pillar-button.disabled.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #7c7c7c ),
    color-stop(0.43, #cbcbcb ),
    color-stop(0, #cbcbcb )
  );
}

.tuningarea .economy .pillar-button:active .inner-glow,
.tuningarea .economy .pillar-button.active .inner-glow,
.tuningarea .economy .pillar-button.disabled .inner-glow,
.tuningarea .economy .pillar-button.disabled:hover .inner-glow,
.tuningarea .economy .pillar-button.disabled.hover .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#343434, #fff);
}


.tuningarea .economy .pillar-button.activated .background,
.tuningarea .economy .pillar-button.activated:active .background,
.tuningarea .economy .pillar-button.activated.active .background,
.tuningarea .economy .pillar-button.activated:hover .background,
.tuningarea .economy .pillar-button.activated.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #8ca677 ),
    color-stop(0.43, #d9e9c3 ),
    color-stop(0, #d9e9c3 )
  );
}

.tuningarea .economy .pillar-button.activated .inner-glow,
.tuningarea .economy .pillar-button.activated:active .inner-glow,
.tuningarea .economy .pillar-button.activated.active .inner-glow,
.tuningarea .economy .pillar-button.activated:hover .inner-glow,
.tuningarea .economy .pillar-button.activated.hover .inner-glow   {
  background-color: red;
  background: -webkit-linear-gradient(#306b00, #fff);
}

/*
 * Tuning Area standard button
 */
 
.tuningarea .standard .pillar-button:not(.activated):not(.disabled) button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_standard_default_icon.png') !important;
  background-position: 15px !important ;
}

.tuningarea .standard .pillar-button:not(.activated):not(.progress):not(.disabled) button:not(.config):active {
  background-image: url('../images/tuningarea/mode_standard_active_icon.png') !important;
}

.tuningarea .standard .pillar-button.activated button:not(.config),
.tuningarea .standard .pillar-button.disabled button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_standard_active_icon.png') !important;
  background-position: 15px !important;
}

.tuningarea .standard .pillar-button:hover .background,
.tuningarea .standard .pillar-button.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #fff ),
    color-stop(0.75, #fff ),
    color-stop(0, #b4b4b4 )
  );
}

.tuningarea .standard .pillar-button:active .background ,
.tuningarea .standard .pillar-button.active .background ,
.tuningarea .standard .pillar-button.disabled .background,
.tuningarea .standard .pillar-button.disabled:hover .background,
.tuningarea .standard .pillar-button.disabled.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #7c7c7c ),
    color-stop(0.43, #cbcbcb ),
    color-stop(0, #cbcbcb )
  );
}

.tuningarea .standard .pillar-button:active .inner-glow,
.tuningarea .standard .pillar-button.active .inner-glow,
.tuningarea .standard .pillar-button.disabled .inner-glow,
.tuningarea .standard .pillar-button.disabled:hover .inner-glow,
.tuningarea .standard .pillar-button.disabled.hover .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#343434, #fff);
}

.tuningarea .standard .pillar-button.activated .background,
.tuningarea .standard .pillar-button.activated:active .background,
.tuningarea .standard .pillar-button.activated.active .background,
.tuningarea .standard .pillar-button.activated:hover .background,
.tuningarea .standard .pillar-button.activated.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #a8a8a8 ),
    color-stop(0.43, #f2f3f4 ),
    color-stop(0, #f2f3f4 )
  );
}

.tuningarea .standard .pillar-button.activated .inner-glow,
.tuningarea .standard .pillar-button.activated:active .inner-glow,
.tuningarea .standard .pillar-button.activated.active .inner-glow,
.tuningarea .standard .pillar-button.activated:hover .inner-glow,
.tuningarea .standard .pillar-button.activated.hover .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#363636, #fff);
}

/*
 * Tuning Area turbo button
 */
 
.tuningarea .turbo .pillar-button:not(.activated):not(.disabled) button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_turbo_default_icon.png') !important;
  background-position: 20px !important ;
}

.tuningarea .turbo .pillar-button:not(.activated):not(.progress):not(.disabled) button:not(.config):active {
  background-image: url('../images/tuningarea/mode_turbo_active_icon.png') !important;
}

.tuningarea .turbo .pillar-button.activated button:not(.config),
.tuningarea .turbo .pillar-button.disabled button:not(.config) {
  width: 100%;
  background-image: url('../images/tuningarea/mode_turbo_active_icon.png') !important;
  background-position: 21px !important;
}
 
.tuningarea .turbo .pillar-button:hover .background,
.tuningarea .turbo .pillar-button.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #f4f8fb ),
    color-stop(0.75, #f4f8fb ),
    color-stop(0, #b9d3e4 )
  );
}

.tuningarea .turbo .pillar-button:active .background,
.tuningarea .turbo .pillar-button.active .background,
.tuningarea .turbo .pillar-button.disabled .background,
.tuningarea .turbo .pillar-button.disabled:hover .background,
.tuningarea .turbo .pillar-button.disabled.hover .background  {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #7c7c7c ),
    color-stop(0.43, #cbcbcb ),
    color-stop(0, #cbcbcb )
  );
}

.tuningarea .turbo .pillar-button:active .inner-glow,
.tuningarea .turbo .pillar-button.active .inner-glow,
.tuningarea .turbo .pillar-button.disabled .inner-glow,
.tuningarea .turbo .pillar-button.disabled:hover .inner-glow,
.tuningarea .turbo .pillar-button.disabled.hover .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#343434, #fff);
}

.tuningarea .turbo .pillar-button.activated .background,
.tuningarea .turbo .pillar-button.activated:active .background,
.tuningarea .turbo .pillar-button.activated.active .background,
.tuningarea .turbo .pillar-button.activated:hover .background,
.tuningarea .turbo .pillar-button.activated.hover .background {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #98beda ),
    color-stop(0.43, #e1ecf4 ),
    color-stop(0, #e1ecf4 )
  );
}

.tuningarea .turbo .pillar-button.activated .inner-glow,
.tuningarea .turbo .pillar-button.activated:active .inner-glow,
.tuningarea .turbo .pillar-button.activated.active .inner-glow,
.tuningarea .turbo .pillar-button.activated:hover .inner-glow,
.tuningarea .turbo .pillar-button.activated.hover .inner-glow {
  background-color: red;
  background: -webkit-linear-gradient(#005da4, #fff);
}

/*
 * "Progress" style for button: make the hover and active styles the same as for default
 */

.tuningarea .pillar-button.progress:hover .background,
.tuningarea .pillar-button.progress.hover .background,
.tuningarea .pillar-button.progress:active .background,
.tuningarea .pillar-button.progress.active .background  {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, #ffffff),
    color-stop(0.75, #ffffff),
    color-stop(0, #d5d5d5)
  );
}

.tuningarea .pillar-button.progress:active .inner-glow,
.tuningarea .pillar-button.progress.active .inner-glow {
  background: -webkit-linear-gradient(#fff, #fff);
}


