/* 
 * Tuningarea 
 */

.tuningarea {
  width: 793px;
  height: 156px; /* 139px with footer */
  padding-top: 10px;
  background: url('../images/tuningarea/background.png') no-repeat 0 0;
  position: absolute;
  top: 383px;
  left: 1px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.tuningarea, .tuningarea .tuningmodes, .tuningarea .tuningindex {
  height: 156px; /* 139px with footer */
}

.tuningarea .h2, .tuningarea .h3, .tuningarea .text {
  color: #202325;
  text-align: center;
}

.tuningarea .h2 img.info-icon {
  margin-left: 3px;
}

.tuningarea .h2 {
  font-size: 13px;
  font-weight: bold;
}

.tuningarea .tuningmodes .h2 {
  padding-bottom: 24px;
}

.tuningarea .tuningindex .h2 {
  height: 26px;
}

.tuningarea .info-icon {
  margin-top: 2px;
  margin-bottom: -2px;
}

.tuningarea .h3,
.tuningarea .h3 * {
  font-size: 12px;
  font-weight: bold;
}
.tuningarea .activities .h3 {
  width: 150px ;/*will change with number of pagers*/
  height: 27px;
  position: relative;
}
.tuningarea .activities .h3 .h3-content{
  position: absolute;
  bottom: 0;
  text-align: left;
}

.tuningarea .potentials .h3 {
  width: 150px ;/*will change will number of pagers*/
  height: 27px;
  position: relative;
}
.tuningarea .potentials .h3 .h3-content{
  position: absolute;
  bottom: 0;
  text-align: left;
}

.tuningarea  .pager {
padding-top: 10px;
}


.tuningarea .indexbar {
  height: 6px; /* each index progress bar has to be a height of 6px */
  border: 1px black solid;
  box-shadow: 0px 2px 3px #adaaad;
}

.tuningarea .indexbar .index-piece {
  height: 4px; /* 1px border top, 1px border bottom */
  min-height: 4px; /* 1px border top, 1px border bottom */
  border-right: 1px black solid;
}

.tuningarea .indexbar, 
.tuningarea .indexbar > .index-piece:first-child, 
.tuningarea .indexbar > .index-piece.first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.tuningarea .indexbar, 
.tuningarea .indexbar > .index-piece:last-child, 
.tuningarea .indexbar > .index-piece.last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.tuningarea .indexbar > .index-piece:last-child, 
.tuningarea .indexbar > .index-piece.last-child {
  border-right: none;
}

/* 
 * Tuningmodes
 */
.tuningarea .tuningmodes {
  width: 235px;
}

.tuningarea .tuningmodes .eco-index .indexbar {
  width: 60px;
  height: 8px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838383), color-stop(66%,#d5d5d5), color-stop(100%,#cfcfcf));
  border: 1px solid #151515; 
}

.tuningarea .tuningmodes .turbo-index .indexbar {
  width: 60px;
  height: 8px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838383), color-stop(66%,#d5d5d5), color-stop(100%,#cfcfcf));
  border: 1px solid #151515; 
}

.tuningarea .tuningmodes .indexbar > .index-piece {
  max-width: 60px;
  width: 30px;
  height:100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  float:left;
  border-right: none ;
}

.tuningarea .tuningmodes .index-divider-line {
  width:1px;
  height:100%;
  float:left;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#191919));
  margin-left: -1px;
}

.tuningarea .tuningmodes .indexbar.bar-full > .index-piece:first-child, 
.tuningarea .tuningmodes .indexbar.bar-full > .index-piece.first-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.tuningarea .tuningmodes .indexbar.bar-full .index-divider-line,
.tuningarea .tuningmodes .indexbar.bar-empty .index-divider-line {
  display: none ;
}

.tuningarea .tuningmodes .eco-index .indexbar > .index-piece {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86a974), color-stop(30%,#dce9c9), color-stop(50%,#dce9c9), color-stop(100%,#4f6f3b));

}
.tuningarea .tuningmodes .eco-index .indexbar.bar-empty > .index-piece {
  background: none;
}

.tuningarea .tuningmodes .turbo-index .indexbar > .index-piece {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6293c2), color-stop(27%,#c8ddf2), color-stop(64%,#77ade0), color-stop(100%,#32618d));
}
.tuningarea .tuningmodes .turbo-index .indexbar.bar-empty > .index-piece {
  background: none;
}

/*button container*/

.tuningarea .button-area .economy {
  width: 67px;
}

.tuningarea .button-area .standard {
  margin-left: -3px; /*hack to make buttons close together*/
  width: 58px;
} 

.tuningarea .button-area .turbo {
  margin-left: -3px; /*hack to make buttons close together*/
  width: 67px;
} 

/*text container*/

.tuningarea .text-container {
  height: 34px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px ;
}

.tuningarea .text-container .economy {
  width: 67px;
  direction: rtl ;  
}

.tuningarea .text-container .standard {
  width: 55px;
} 

.tuningarea  .text-container .turbo {
  width: 67px;
} 

/*graph container*/

.tuningarea .turbo-eco-index {
  padding-left: 5px;
  width: 270px;
}



.tuningarea .turbo-eco-index .economy {
  width: 122px;
}

.tuningarea .turbo-eco-index .turbo {

}

.tuningarea .index-info {
 padding-top: 5px;
}

.tuningarea .index-info a {
  cursor: pointer ;
}

.tuningarea .index-info a,
.tuningarea .index-info a  * {
  font-size: 11px;
  color: #4d4d4d;
}

.tuningarea .tuningmodes-inner {
  margin-left:21px;
}

.tuningarea .turbo-eco-index .index-piece .connector-plug-container {
  position: relative ;
  margin: 0 auto;
  width:1px;
}

.tuningarea .turbo-eco-index .index-piece .connector-plug-image {
  position: absolute;
  bottom: -3px;
  height: 22px;
  width: 5px ;
  margin-left: -1px;
  background-image: url('../images/tuningarea/tuning_connector_plug1.png');
  background-position: 0px -188px;
}

/*progress bar balloons that pop up when a mode is clicked*/
.progress-bar-balloon-container  .progress-bar-balloon {
  position: absolute ;
  top: -49px ;
  width: 194px;
  height: 98px;
  background-position: 0 0 ;
  background-repeat: no-repeat ;
}

.progress-bar-balloon-container  .tuning-eco {
  left: 21px ;
  background-image: url('../images/tuningarea/progress_balloon_economy.png');
}

.progress-bar-balloon-container  .tuning-standard {
  left: 21px ;
  background-image: url('../images/tuningarea/progress_balloon_standard.png');
}

.progress-bar-balloon-container  .tuning-turbo {
  left: 21px ;
  background-image: url('../images/tuningarea/progress_balloon_turbo.png');
}

.progress-bar-balloon-container .progress-bar-balloon .progress-bar-balloon-inner {
  position: relative;
  margin: 0;
}

.progress-bar-balloon-container .progress-bar-balloon .progress-bar-balloon-text {
  position: absolute;
  top: 18px;
  left: 25px;
  max-width: 142px ;
}

.progress-bar-balloon-container  .tuning-eco .progress-bar-balloon-text {
  color: #d9e9c3;
}

.progress-bar-balloon-container  .tuning-standard .progress-bar-balloon-text {
  color: #f2f3f4;
}

.progress-bar-balloon-container  .tuning-turbo .progress-bar-balloon-text {
  color: #e1ecf4;
}

.progress-bar-balloon-container .progress-bar-balloon-index {
  position: absolute ;
  left: 27px ;
  top: 53px ;
  width: 139px;
  height: 12px;
  background-position: -1px 0 ;
  background-repeat: no-repeat ;
}

.progress-bar-balloon-container  .tuning-eco .progress-bar-balloon-index {
  background-image: url('../images/tuningarea/progress_bar_economy.png');
}

.progress-bar-balloon-container  .tuning-standard .progress-bar-balloon-index {
  background-image: url('../images/tuningarea/progress_bar_standard.png');
}

.progress-bar-balloon-container  .tuning-turbo .progress-bar-balloon-index {
  background-image: url('../images/tuningarea/progress_bar_turbo.png');
}

/* 
 * Tuningindex 
 */
 
.tuningarea .indexarea {
  margin-left: 87px;
}
 
.tuningarea .tuningindex, .tuningarea .tuningindex .tuninginfo {
  width: 540px;
  height:88px;
}

/* Indexbar (Graph) */
.tuningarea .tuningindex .indexbar {
  height: 8px;
  border: none ;
  box-shadow: 0px 4px 3px #adaaad;
}

.tuningarea .tuningindex .indexbar .index-piece.activities {
  margin-top: 0;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6293c2), color-stop(35%,#6ea4d7), color-stop(100%,#045492));
  border: 1px solid #151515;
  border-left: none;
  border-right: 1px solid #151515;
}

.tuningarea .tuningindex .indexbar .index-piece.potentials {
  margin-top: 0;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838383), color-stop(66%,#d5d5d5), color-stop(100%,#cfcfcf));
  border: 1px solid #151515;
  border-left: none;
  border-right: 1px solid #151515;
}

.tuningarea .tuningindex .indexbar .index-piece.activities .index-divider-line {
  width:1px;
  height:100%;
  float:right;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#191919));
  margin-right: -1px; /*covers up the right border of the divider*/
}

.tuningarea .tuningindex .indexbar .index-piece.potentials .index-divider-line {
  width:1px;
  height:100%;
  float:right;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(33%,#5f5f5f), color-stop(100%,#777));
  margin-right: -1px; /*covers up the right border of the divider*/
}

.tuningarea .tuningindex .indexbar > .index-piece:first-child, 
.tuningarea .tuningindex .indexbar > .index-piece.first-child {
  border-left: 1px solid #151515;
}
.tuningarea .tuningindex .indexbar > .index-piece:last-child, 
.tuningarea .tuningindex .indexbar > .index-piece.last-child {
  border-right: 1px solid #151515;
}
.tuningarea .tuningindex .indexbar > .index-piece:last-child > .index-divider-line, 
.tuningarea .tuningindex .indexbar > .index-piece.last-child > .index-divider-line {
  display: none ;
}

.tuningarea .tuningindex .indexbar .index-0 {

}

.tuningarea .tuningindex .indexbar .index-1 {

}

.tuningarea .tuningindex .indexbar .index-2 {

}

.tuningarea .tuningindex .indexbar .index-3 {

}

.tuningarea .tuningindex .indexbar .index-4 {

}

.tuningarea .tuningindex .indexbar .index-5 {

}

.tuningarea .tuningindex .indexbar .index-6 {

}

.tuningarea .tuningindex .indexbar .index-7 {

}
.tuningarea .tuningindex .indexbar .index-8 {

}

.tuningarea .tuningindex .tuninginfo .activities,
.tuningarea .tuningindex .tuninginfo .potentials{
  width: 255px;
  min-height: 60px;
}

.tuningarea .tuningindex .tuninginfo .activities {
  margin-right: 13px;
  margin-left: 15px;
}


.tuninginfo .activities .content .index-piece, 
.tuninginfo .potentials .content .index-piece {
  display: none;
}

.tuninginfo .activities .content .index-piece a, 
.tuninginfo .potentials .content .index-piece a {
  text-decoration: underline;
  color: #194E83;
  cursor: pointer;
}


.tuningarea .tuningindex .pages,
.tuningstatus .pages {
  cursor: pointer ;
  height: 12px ;
  width: 12px ;
  text-align: center ;
  margin-left: 1px;
  margin-right: 1px;
  border-radius: 1px;
  background: no-repeat #fff;
  border: 1px solid #cdcdcd;
  color: #194e83;
  font-size: 11px;
  line-height: 11px;
}

.tuningarea .tuningindex .pages:not(.activated):not(.arrow-right):hover {
  background: no-repeat #e6e6e6;
  border: 1px solid #b8b8b8;
  color: #194e83;
}

.tuningarea .tuningindex .pages.activated {
  background: no-repeat #3388c9 ;
  border: 1px solid #00518e;
  color: #fff;
}

.tuningarea .tuningindex .pages.arrow-right {
  background: url('../images/tuningarea/icon_message_window.png') no-repeat 50% 50%;
}

.tuning-status-pointers {
  position: relative;
}

.tuning-status-pointers .straight-pointer {
  height: 70px;
  width: 5px;
  /*border: 1px solid black;*/
  position: absolute;
  left: 0 ;
  bottom: -3px;
  background-image: url('../images/tuningarea/tuning_connector_plug1.png');
  background-position: 0px 0px;
  background-repeat: no-repeat ;
}

.tuning-status-pointers .bendy-pointer-vertical-upper {
  height: 70px;
  width: 5px;
  /*border: 1px solid black;*/
  position: absolute;
  left: 0;
  bottom: 10px;
  background-image: url('../images/tuningarea/tuning_connector_plug1.png');
  background-position: 0 0;
  background-repeat: no-repeat;
}

.tuning-status-pointers .bendy-pointer-horizontal {
  height: 1px;
  width: 300px;
  /*border: 1px solid black;*/
  position: absolute;
  left: 0px;
  bottom: 10px;
  background-image: url('../images/tuningarea/tuning_connector_plug2.png');
  background-position: 0 0;
  background-repeat: no-repeat;
}

.tuning-status-pointers .bendy-pointer-vertical-lower {
  height: 13px;
  width: 5px;
  /*border: 1px solid black;*/
  position: absolute;
  left: 0px ;
  bottom: -3px;
  background-image: url('../images/tuningarea/tuning_connector_plug1.png');
  background-position: 0 -57px;
  background-repeat: no-repeat;
}

/*
 * Tuning Status popup window
 */

.tuningstatus h2,
.tuningstatus h2 *
{
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 12px;
  padding-left: 16px;
  text-align: left;
}

.tuningstatus .activities,
.tuningstatus .potentials {
  float: left ;
  width: 48% ;

}

.tuningstatus .tuningstatus-item {
  position: relative ;
  padding-bottom: 9px;
}

.tuningstatus .pages {
  position: absolute;
  left: 0;
  top: 0;
  cursor: default ;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 3px;
}

.tuningstatus .item-content {
  padding-left: 32px;
  padding-right: 15px;
}

.tuningstatus .indexbar {
  height: 8px;
  border: none ;
}

.tuningstatus .indexbar .index-piece.activities {
  margin-top: 0;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6293c2), color-stop(35%,#6ea4d7), color-stop(100%,#045492));
  border: 1px solid #151515;
  border-left: none ;
  border-right: none ;
}

.tuningstatus .indexbar .index-piece.potentials {
  margin-top: 0;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838383), color-stop(66%,#d5d5d5), color-stop(100%,#cfcfcf));
  border: 1px solid #151515;
  border-left: none ;
  border-right: none ;
}

.tuningstatus .indexbar .index-piece {
  position: relative;
}

.tuningstatus .indexbar .index-piece.activities .index-divider-line {
  position: absolute;
  width:1px;
  height:100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#191919));
}

.tuningstatus .indexbar .index-piece.potentials .index-divider-line {
  position: absolute;
  width:1px;
  height:100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(33%,#5f5f5f), color-stop(100%,#777));
}

.tuningstatus .indexbar .index-piece .index-divider-line-left {
  left: 0px;
}

.tuningstatus .indexbar .index-piece .index-divider-line-right {
  right: 0px;
}


.tuningstatus .indexbar .index-piece.first-piece {
  border-left: 1px solid black ;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.tuningstatus .indexbar .index-piece.first-piece .index-divider-line-left {
  display: none;
}

.tuningstatus .indexbar .index-piece.last-piece {
  border-right: 1px solid black ;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.tuningstatus .indexbar .index-piece.last-piece .index-divider-line-right {
  display: none;
}

.tuningstatus .text {
  font-size: 12px;
  padding-bottom: 8px;
}

.tuningstatus .divider {
width: 4%;
background: url('../images/layout/divider.png') no-repeat 0 70%;
margin: 0;
padding: 0;
height: 289px;
padding-top: 0;
text-align: center;
float: left;
}
