/*
B-Lex IT 2009
*/

/**********************************

Buttons

**********************************/

/* colors:
     darkblue
     blue
     lightblue

     red
     deepred
     yellow

     ashgrey
     black
*/

/* button and color combined so IE6 can cope */
/* pink isn't used anymore */
.vwbutton,
.vwbutton_lightblue,
.vwbutton_yellow,
.vwbutton_purple,
.vwbutton_black,
.vwbutton_red,
.vwbutton_deepred,
.vwbutton_ashgrey
{
  position:         relative;

  height:           23px;
  line-height:      21px;

  /* fixes cases in which line-height is used in the
     line in which we use the button */
  /*
  display:          inline-block;
  vertical-align:   baseline;
  */


  /* behaviour */
  white-space:      nowrap;  /* buttonparts may not be moved to next line */
  cursor:           pointer;
  -moz-user-select: none;


  /* styling of text on button */
  font-size:        10px !important;
  font-family:      'VWHeadline Blk', Futura, Tahoma;
  font-weight:      bold;
  text-transform:   uppercase;
  color:            #fff !important; /* no matter where used, the color depends on button color */
  text-decoration:  none;            /* remove underline (when <a> used for button) */
}

 .btnleft
,.btnmid
,.btnright
{
  display:        -moz-inline-box;
  display:        inline-block;
  vertical-align: top;
  height:         23px;

  white-space:    nowrap;

  padding:        0;
}

.vwbtnarrowright .btnmid
{
  padding-right:  20px; /* 15+8 */
}
.vwbutton .arrowright
{
  display:        inline-block;
  vertical-align: top;

  height:         23px;
  width:          3px;

  position:       relative;
  margin-left:    -3px;
  left:           -6px;

  background:     transparent url('../images/buttons/arrow_right.png') no-repeat scroll left center;

  padding:        0;
}

.vwbtnarrowleft .btnmid
{
  padding-left:   21px;
}
.vwbutton .arrowleft
{
  display:        inline-block;
  vertical-align: top;

  height:         23px;
  width:          3px;

  position:       relative;
  margin-left:    -3px;     /* eat away own width */
  left:           6px;

/*
Can't use this. If inline top:0 starts just below baseline, if (inline-)block top:0 is top of button
  position:       absolute;
  top:            0;
  left:           10px;
*/

  background:     transparent url('../images/buttons/arrow_left.png') no-repeat scroll left center;
}


/* DARKBLUE */

.btnleft
{
  width:      4px;
  background: transparent url('../images/buttons/deepblue.l.png') no-repeat scroll top left;
}

.btnmid
{
  padding:    0 5px 0 7px;
  background: transparent url('../images/buttons/deepblue.m.png') repeat-x scroll top left;
}

.btnright
{
  width:      5px;
  background: transparent url('../images/buttons/deepblue.r.png') no-repeat scroll top left;
}

/* LIGHTBLUE */

.vwbutton_lightblue .btnleft
{
  background: transparent url('../images/buttons/lightblue.l.png') no-repeat scroll top left;
}

.vwbutton_lightblue .btnmid
{
  background: transparent url('../images/buttons/lightblue.m.png') repeat-x scroll top left;
}

.vwbutton_lightblue .btnright
{
  background: transparent url('../images/buttons/lightblue.r.png') no-repeat scroll top left;
}

/* SMOKEYBLUE */

.vwbutton_smokeyblue .btnleft
{
  background: transparent url('../images/buttons/bluesmokey.l.png') no-repeat scroll top left;
}

.vwbutton_smokeyblue .btnmid
{
  background: transparent url('../images/buttons/bluesmokey.m.png') repeat-x scroll top left;
}

.vwbutton_smokeyblue .btnright
{
  background: transparent url('../images/buttons/bluesmokey.r.png') no-repeat scroll top left;
}

/* YELLOW */

.vwbutton_yellow .btnleft
{
  background: transparent url('../images/buttons/yellow.l.png') no-repeat scroll top left;
}

.vwbutton_yellow .btnmid
{
  background: transparent url('../images/buttons/yellow.m.png') repeat-x scroll top left;
}

.vwbutton_yellow .btnright
{
  background: transparent url('../images/buttons/yellow.r.png') no-repeat scroll top left;
}

/* PURPLE */

.vwbutton_purple .btnleft
{
  background: transparent url('../images/buttons/purple.l.png') no-repeat scroll top left;
}

.vwbutton_purple .btnmid
{
  background: transparent url('../images/buttons/purple.m.png') repeat-x scroll top left;
}

.vwbutton_purple .btnright
{
  background: transparent url('../images/buttons/purple.r.png') no-repeat scroll top left;
}

/* RED */

.vwbutton_red .btnleft
{
  background: transparent url('../images/buttons/red.l.png') no-repeat scroll top left;
}

.vwbutton_red .btnmid
{
  background: transparent url('../images/buttons/red.m.png') repeat-x scroll top left;
}

.vwbutton_red .btnright
{
  background: transparent url('../images/buttons/red.r.png') no-repeat scroll top left;
}

/* DEEP RED */

.vwbutton_deepred
{
  height:      27px;
  line-height: 24px;
  top:         -1px;
}
.vwbutton_deepred .btnleft
{
  width: 5px;
  height: 27px;
  background: transparent url('../images/buttons/deepred.l.png') no-repeat scroll top left;
}

.vwbutton_deepred .btnmid
{
  height: 27px;
  background: transparent url('../images/buttons/deepred.m.png') repeat-x scroll top left;
}

.vwbutton_deepred .btnright
{
  width: 11px;
  height: 27px;
  background: transparent url('../images/buttons/deepred.r.png') no-repeat scroll top left;
}

.vwbutton_deepred .arrowright,
.vwbutton_deepred .arrowleft
{
  height: 26px;
}

/* BLACK */

.vwbutton_black .btnleft
{
  background: transparent url('../images/buttons/black.l.png') no-repeat scroll top left;
}

.vwbutton_black .btnmid
{
  background: transparent url('../images/buttons/black.m.png') repeat-x scroll top left;
}

.vwbutton_black .btnright
{
  background: transparent url('../images/buttons/black.r.png') no-repeat scroll top left;
}

/* ASH GREY */

.vwbutton_ashgrey .btnleft
{
  background: transparent url('../images/buttons/ashgrey.l.png') no-repeat scroll top left;
}

.vwbutton_ashgrey .btnmid
{
  background: transparent url('../images/buttons/ashgrey.m.png') repeat-x scroll top left;
}

.vwbutton_ashgrey .btnright
{
  background: transparent url('../images/buttons/ashgrey.r.png') no-repeat scroll top left;
}