/* ********************************************************************
 * SubGlobal stylesheet for Xenon frame layout tool
 *
 */


/* ***** Outer box properties ************************************** */
#mainlayout {
  width:850px;
  height:600px;
}


/* ***** Frame Area ************************************************ */
#frame {
  float:right;
  width:512px;
  padding:10px 10px 10px 5px;
  border:1px solid #999999;
  background:#f9f9f9 url(../img/Bulk/frames.bkg.jpg) repeat-x scroll left top;
  text-align:center;
  position:relative;
  height:545px;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:0px 2px 7px #666666;
  -moz-box-shadow:0px 2px 7px #666666;
  box-shadow:0px 2px 7px #666666;
}
#frame img {
  float:left;
  margin-top:15px;
}

#frame #frameupper,
#frame #framelower {
  height:260px;
}
#frame #framelower {
  margin-top:26px;
  display:none;
}

#frame div .fin {
  float:right;
  width:492px;
  height:65px;
  position:relative;
}
#frame div .fin img {
  position:absolute;
  top:0px;
  left:0px;
  float:none;
  margin:0px;
  width:492px;
}
#frame div .fin div {
  position:absolute;
  top:0px;
  left:0px;
  width:492px;
  height:65px;
}
#frame div .fin div strong {
  display:block;
  text-align:left;
  height:17px;
  margin:3px 0px 0px 20px;
}
#frame div .fin div var {
  position:absolute;
  top:3px;
  right:25px;
}
#frame div .fin div select {
  vertical-align:middle;
  width:320px;
  background-color:#eeeeee;
  border:1px inset #bbbbbb;
  margin:2px;
}
#frame div .fin div button {
  vertical-align:middle;
  border:2px solid #ffffff;
  height:23px;
  width:74px;
}

#frame #framebuttons {
  position:absolute;
  top:269px;
  left:20px;
  text-align:center;
  padding:3px 0px;
  width:482px;
  white-space:nowrap;
}


/* ***** Information Column **************************************** */
#column {
  margin-right:540px;
  font-size:12px;
}

#column fieldset {
  background:#e7e7e7 url(../img/Bulk/controls.bkg.jpg) repeat-x scroll left top;
}

#column h1 {
  background-color:#cccccc;
  padding:3px;
  margin:0px 0px 10px 0px;
  font-size:16px;
  text-align:center;

  border:1px solid #999999;
  -webkit-border-radius:7px 7px 0px 0px;
  -moz-border-radius:7px 7px 0px 0px;
  border-radius:7px 7px 0px 0px;
  -webkit-box-shadow:0px 2px 7px #666666;
  -moz-box-shadow:0px 2px 7px #666666;
  box-shadow:0px 2px 7px #666666;
}

#column input,
#column select {
  margin-left:3px;
  background-color:#ffffff;
  border:1px inset #bbbbbb;
}

#column div {
  text-align:right;  
}
#column div h2 {
  border-bottom:1px solid #000000;
  margin:5px 0px;
  font-size:14px;
  text-align:left;
}
#column div p {
  margin:4px 0px;
  text-align:left;
}

#column #config label {
  display:block;
  margin:5px 0px 10px 0px;
  text-align:center;
}
#column #config table {
  font-size:11px;
  width:100%;
  margin:5px 0px;
  border-bottom:1px solid #aaaaaa;
}
#column #config table thead tr th {
  text-align:center;
  font-size:12px;
}
#column #config table tbody tr.dark {
  background-color:#cccccc;
}
#column #config table tbody tr td {
  text-align:center;
  width:50%;
}
#column #config h3 {
  font-size:12px;
  margin:0px 4px;
  float:left;
}
#column #config ul {
  margin:5px 0px 0px 0px;
  list-style-type:none;
  padding:0px;
  font-size:11px;
}
#column #config ul li {
  margin:0px;
}
#column #config ul label {
  display:inline;
  text-align:right;
}
#column #config ul input,
#column #config ul select {
  font-size:inherit;
}
#column #config ul select {
  width:36px;
  text-align:right;
}

#column #info ul {
  margin:5px 0px 0px 0px;
  list-style-type:none;
  padding:0px;
}
#column #info ul li {
  margin:3px 0px 0px 0px;
  font-size:11px;
}
#column #info ul li input,
#column #info ul li select {
  width:200px;
  font-size:inherit;
}


/* ***** Popup Options ********************************************* */
#options {
  right:160px;
}


/* ***** Popup Instructions **************************************** */
#manual {
  background:#ffffd9 url(../img/Xenon.instructions.bkg.jpg) no-repeat scroll bottom left;
  top:-512px;
  right:10px;
  width:474px;
  height:524px;
}


/* ***** Completed frame view ************************************** */
#completed {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  display:none;
  padding:10px 0px;
  font:normal 12px Arial,sans-serif;
  opacity:0.90;
  filter:alpha(opacity=90);
  background-color:#ffffff;
}

#completed h1 {
  margin:0px auto;
  width:696px;
}

#completed #frameimage {
  margin:5px 0px;
}

#completed #slotView {
  width:696px;
  margin:0px auto;
}
#completed #slotView thead tr th {
  font-size:16px;
}
#completed #slotView tfoot tr td {
  border-top:1px solid #888888;
  text-align:left;
  font-size:12px;
}
#completed #slotView tfoot tr td p {
  margin:5px 0px 0px 0px;
}
#completed #slotView tfoot tr td div {
  margin:5px 0px 0px 0px;
  text-align:center;
}
#completed #slotView tfoot tr td div button {
  margin:0px 10px;
}
#completed #slotView tfoot tr td #interface h2 {
  font-size:18px;
  margin:4px 0px;
}
#completed #slotView tbody tr.dark {
  background-color:#eeeeee;
}
#completed #slotView tbody tr th {
  text-align:left;
  padding:3px;
}
#completed #slotView tbody tr td {
  text-align:left;
  padding:5px 3px 5px 2em;
  white-space:nowrap;
  width:49%;
}
#completed #slotView tbody tr td strong {
  display:block;
}

#completed #infoView {
  width:696px;
  margin:5px auto;
  padding:5px 0px;
  border-top:1px solid #888888;
}
#completed #infoView #customer {
  float:left;
  width:49%;
}
#completed #infoView #customer dl {
  margin:0px 5px;
}
#completed #infoView #customer dl dt {
  font-weight:bold;
  float:left;
}
#completed #infoView #customer dl dd {
  text-align:right;
  margin:0px 0px 4px 0px;
  border-bottom:1px solid #bbbbbb;
}
#completed #infoView #customer div img {
  vertical-align:middle;
}

#completed #infoView #ordering {
  float:right;
  width:49%;
}
#completed #infoView #ordering table {
  margin:0px auto;
}
#completed #infoView #ordering table tbody tr th {
  padding-right:7px;
}
#completed #infoView #ordering table tbody tr td {
  text-align:right;
  padding:0px;
}

#completed #infoView #ordering h2 {
  margin:0px 0px 5px 0px;
  font-size:16px;
  border-bottom:1px solid #888888;
}
#completed #infoView #ordering p {
  margin-top:0px;
  text-align:left;
}
#completed #infoView #ordering button {
  font-size:12px;
  margin:2px;
}

#completed #infoView p {
  clear:both;
  margin:5px 0px;
  padding:3px;
}


/* ***** Print Styles ********************************************** */
@media print {
  #completed {
    margin:0px;
  }
  #completed #showcase {
    width:696px;
  }
  #completed #slotView tbody tr th,
  #completed #slotView tbody tr td {
    border-bottom:1px solid #bbbbbb;
  }
  #completed #infoView {
    border-top:0px none;
  }

  #mainlayout,
  #completed #infoView p,
  #completed #slotView tfoot tr td #interface,
  #completed #slotView tfoot tr td #buttons {
    display:none;
  }
}