/* Flexible Buttons
----------------------------------------------- */ 
	
/* DEFAULT link styles */
	
  .flxbtn a, .flushbtn a, .arrow a {
    text-decoration:none;color:#fff !important;
  }
  .flushbtn a:hover,
  .flxbtn a:hover, 
  .arrow a:hover, 
  .flxbtn:hover a, 
  .arrow:hover a  
    {
      text-decoration:underline !important;
    }
  .flxbtn, .arrow {cursor:pointer;cursor:hand;}
  
  
/* DEFAULT. Light blue box, no larger than 1580 */
  .flxbtn {
    padding:0 8px 0 0px;
    background:url(/img/btns/borders6.gif) 100% 0 repeat-y;
    width:170px;
  }
  .flxbtn .i {
    padding:0 0 0 8px;
    background:url(/img/btns/borders5.gif) 0px 0 repeat-y;
    _line-height:0;
  }
  .flxbtn .i div {
    font-size:0;
  }
  .flxbtn .t {
    height:11px;
    margin:0 -10px;
    background:url(/img/btns/box_blue3.png) 100% 0 no-repeat;
  }
  .flxbtn .t div {
    width:18px;
    height:11px;
    background:url(/img/btns/box_blue3.png) 0 0 no-repeat;
  }
  .flxbtn .b {
    height:11px;
    margin:0 -10px;
    background:url(/img/btns/box_blue3.png) 100% 100% no-repeat;
    margin-top:-1px !important;
  }
  .flxbtn .b div {
    width:18px;
    height:11px;
    background:url(/img/btns/box_blue3.png) 0 100% no-repeat;
    /*
    IE gives a default height even on "empty" elements which is
    equivalent to the default line-height required to accommodate
    the default font-size, this is typically around 18-20px.

    Explicitly overriding the line-height to the required value or
    by setting font-size: 0px; on the required element should
    work around IE's defaults.
    */
    font-size:0px; line-height:0px;
  }
  .flxbtn p {
    text-align:center;
    background:#6699FF;
    color:#fff;
    font:normal 100%/90% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    _font-size:85% !important;
    text-transform:uppercase !important;

    padding:0 0 2px 0 !important;
    _padding-bottom:3px !important;

    margin:-2px 0 0 -1px;
  }

  /* ORANGE box on white bkg, no larger than 380 */
  .flxorange {
    background:url(/img/btns/borders_orange2.gif) 100% 0 repeat-y;
    width:380px;
  }
  .flxorange .i {
    background:url(/img/btns/borders_orange.gif) -1px 0 repeat-y;
  }
  .flxorange .t {
    margin:-1px -17px 0 -12px;
    background:url(/img/btns/box_orange.png) 100% 0 no-repeat;
  }
  .flxorange .t div {
    background:url(/img/btns/box_orange.png) 0 0 no-repeat;
  }
  .flxorange .b {
    margin:-1px -17px 0 -12px;
    background:url(/img/btns/box_orange.png) 100% 100% no-repeat;
  }
  .flxorange .b div {
    background:url(/img/btns/box_orange.png) 0 100% no-repeat;
  }
  .flxorange p {
    background:#ff6600 !important;
  }


/* ORANGE ARROW on white bkg, no larger than 380 */
  .arrow {
    width:204px;
    background:url(/img/btns/box_orange.png) 0px -1px no-repeat;
    height:44px;
    margin-top:.5em;
		font:bold 12px/17px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  }
  .arrow .i {
    background:url(/img/btns/arrow_head.png) 100% 0% no-repeat;
    height:44px;
  }
  .arrow .i div {
    margin:0;
    text-align:left;
    padding-top:13px; _padding-top:12px;
    padding-left:13px;
    color:#fff;
    text-transform:uppercase;
    overflow:hidden;
    border:0px solid red;
    height:16px;
  }


/* GRAY ARROW on white bkg, no larger than 380 */
  .gray-arrow {
    background:url(/img/btns/box_gray.png) 100% 0% no-repeat;
  }
  .gray-arrow .i {
    background:url(/img/btns/arrow_gray_head.gif) 0px 1px no-repeat;
    height:45px;
  }
  .gray-arrow .i div {
    padding-left:18px;
    padding-top:14px;
  }




   /* BLUE box on dark blue bkg, no larger than 380 */
  .flxbtn.dkblue {
    background:#023467 url(/img/btns/borders_blue.gif) 100% 0 repeat-y;
    width:240px;
  }
  .flxbtn.dkblue .i {
    background:url(/img/btns/borders_blue2.gif) -1px 0 repeat-y;
  }
  .flxbtn.dkblue .t {
    margin:-1px -8px 0 -9px;
    background:url(/img/btns/box_blue2.png) 100% 0 no-repeat;
    height:18px;
  }
  .flxbtn.dkblue .t div {
    background:url(/img/btns/box_blue2.png) 0 0 no-repeat;
    height:18px;
  }
  .flxbtn.dkblue .b {
    margin:-1px -8px 0 -9px;
    background:url(/img/btns/box_blue2.png) 100% 100% no-repeat;
    height:15px;
  }
  .flxbtn.dkblue .b div {
    background:url(/img/btns/box_blue2.png) 0 100% no-repeat;
    height:15px;
  }
  .flxbtn.dkblue p {
    background:#36c;
    font:bold 76%/135% "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  }
  html>body .flxbtn.dkblue p {
    margin-top:-2px;
  }


   /* Dark BLUE box on light blue bkg, no larger than 380 */
  .flxbtn.ltblue {
    background:#36c url(/img/btns/borders_ltblue.gif) 100% 0 repeat-y;
    width:240px;
  }
  .flxbtn.ltblue .i {
    background:#36c url(/img/btns/borders_ltblue2.png) -1px 0 repeat-y;
  }
  .flxbtn.ltblue .t {
    margin:-1px -8px 0 -9px;
    background:url(/img/btns/box_ltblue2.png) 100% 0 no-repeat;
    height:15px;
  }
  .flxbtn.ltblue .t div {
    background:url(/img/btns/box_ltblue2.png) 0 0 no-repeat;
    height:15px;
  }
  .flxbtn.ltblue .b {
    margin:-1px -8px 0 -9px;
    background:url(/img/btns/box_ltblue2.png) 100% 100% no-repeat;
    height:15px;
  }
  .flxbtn.ltblue .b div {
    background:url(/img/btns/box_ltblue2.png) 0 100% no-repeat;
    height:15px;
  }
  .flxbtn.ltblue p {
    background:#36c;
    font:bold 76%/135% "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  }
  html>body .flxbtn.ltblue p {
    margin-top:-2px;
  }

/*
  A flush button is made from a single image, a 400-square picture of a button,
  with its borders flush with the edge of the image.

  Standard buttons are made in Photoshop using the rounded rectangle tool and
  a corner radius of 6 pixels. The border is made by stroking this rectangle
  along the outside with a thickness of 3 pixels.
*/

.flushbtn {
  background-position:right;
  padding: 0 3px 0 0;
}

.flushbtn .i {
  position:relative;
  background-position:left;
  padding: 0 0 0 3px;
}

.flushbtn .i div {
  background-repeat: no-repeat;
  line-height:10px;
  font-size:10px;
}

.flushbtn .t {
  position:relative;
  background-position: top right;
  margin:0 -3px;
}

.flushbtn .t div {
  background-position: top left;
  width:10px;
}

.flushbtn .b {
  background-position: bottom right;
  margin:0 -3px;
}

.flushbtn .b div {
  background-position: bottom left;
  width:10px;
}

.flushbtn p {
  margin:-7px 10px;
  padding:4px 0;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
  line-height: 1em;
  text-align:center;
  text-transform:uppercase !important;
  position:relative;
  color:white;
}

.flushbtn.tanblue, .flushbtn.tanblue div {
  background-image:url(/img/btns/flush_tanblue.png);
  background-color:#36c;
}

.flushbtn.tanbluethin, .flushbtn.tanbluethin div {
  background-image:url(/img/btns/flush_tanblue_thin.png);
  background-color:#69f;
}


.disabled-button .flushbtn.tanbluethin,
.disabled-button .flushbtn.tanbluethin div {
  background-image:url(/img/btns/flush_tanblue_thin_disabled.png);
  background-color: #f5ede3;
}


.flushbtn.tanbluethin p {
  margin:-10px 4px !important;
}

.flushbtn.tanbluethin a {
  color:#fff !important;
}

.flushbtn.tanorangethin, .flushbtn.tanorangethin div {
  background-image:url(/img/btns/flush_tanorange_thin.png);
  background-color:#f67c2a;
}


.disabled-button .flushbtn.tanorangethin,
.disabled-button .flushbtn.tanorangethin div {
  background-image:url(/img/btns/flush_tanorange_thin_disabled.png);
  background-color: #f5ede3;
}

.disabled-button .flushbtn a,
.disabled-button .flushbtn a:hover { 
  cursor: default;
  text-decoration: none !important;
}

.flushbtn.tanorangethin p {
  margin:-10px 4px !important;
}

.flushbtn.tanorangethin a {
  color:#fff !important;
}

.flushbtn.thinblue, .flushbtn.thinblue div {
  background-image:url(/img/btns/flush_thinblue.png);
  background-color:#69f;
}

.flushbtn.thinblue .i div {
  line-height:4px;
  font-size:4px;
}

.flushbtn.thinblue p {
  margin:-2px 10px;
  font-size:90%;
  line-height:.8em;
}
  
/* TABLE buttons that appear with a gradient image beneath them */
  .table {
    background-image:url(/img/btns/borders4.gif);
  }
  .table .t, .table .t div, .table .b, .table .b div {
    background-image:url(/img/btns/box3.gif);
  }