* {
	font-family: sans-serif;
}

a {
  color: #990000;
}

body {
  background-color: #666666;
}

h1 {
  font-size: 16pt;
  margin: 15px 0;
  padding: 0;
  float: right;
  color: #ffffff;
}

h2 {
  margin: 0;
  padding: 0;
}

.utilities {
  font-size: 10pt;
  position: absolute;
  top: 5px;
  left: 810px;
  width: 200px;
  text-align: right;
}

.utilities a {
  color: white;
}

b {
  color: #000000;
  font-size: 1em;
}




form {
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 10px;
  border: 0;
}


form.simple label {
  width: 175px;
  height: 1.2em;
  line-height: 1.2em;
  display: block;
  float: left;
  text-align: right;
  padding-right: 5px;
  margin: 5px 0;
  font-size: 10pt;
  color: #333333;
}

form.simple input {
  width: 400px;
}

form.simple #submitquote_submit {
  width: 200px;
  margin-left: 100px;
  height: 2em;
  vertical-align: middle;
}


form.simple br {
  clear: left;
}



#logo {
  float: left;
  height: 55px;
  margin: 5px;
}

#navigation {
  height: 75px;
  width: 700px;
}

#navigation div {
  height: 25px;
  width: 120px;
  text-align: left;
  padding: 15px;
  margin: 5px;
  float: left;
  background-color: #999999;
  color: #990000;
  font-size: 10pt;
}

#navigation div a {
  font-size: 10pt;
  text-decoration: none;
}

#navigation div.active {
  background-color: #cccccc;
}

#navigation div.current {
  background-color: #cccccc;
  font-weight: bold;
}








div#content {
  width: 1000px;
}

div#configurator {
  background-color: #999999;
  padding: 10px 0;
}




div.step {

}

div.installed img {
	padding: 0px 3px;
}

div#workarea {
  padding: 10px 0;
  margin: 10px;
  background-color: #ffffff;
}

div#workbench {
}


div#step2Image img {
	padding: 0 10px;
	display: block;
}






div#slotOverlay {
    position: relative;
    top: 37px;
    left: 242px;
}

div#slotOverlay div.droppable {
    position: absolute;
    width: 72px;
    height: 172px;
}
/*
div#droppable8 {
    left: 72px;
}

div#droppable7 {
    left: 144px;
}

div#droppable6 {
    left: 216px;
}

div#droppable5 {
    left: 288px;
}

div#droppable4 {
    left: 360px;
}

div#droppable3 {
    left: 432px;
}

div#droppable2 {
    left: 504px;
}

div#droppable1 {
    left: 576px;
}

div#droppable0 {
    left: 648px;
}



div#slotOverlay div.stacktab, div.removestacktab {
    position: absolute;
    width: 20px;
    height: 25px;
    font-size: 8pt;
    line-height: 20px;
    text-align: center;
    border: 1px solid #999999;
    border-bottom: none;
    background-color: #ffffff;
    top: -20px;
}

div.removestacktab {
    background-color: #CCCCCC;
}

div#removetab9 {
    left: 5px;
}

div#removetab8 {
    left: 77px;
}

div#removetab7 {
    left: 149px;
}

div#removetab6 {
    left: 221px;
}

div#removetab5 {
    left: 293px;
}

div#removetab4 {
    left: 365px;
}

div#removetab3 {
    left: 437px;
}

div#removetab2 {
    left: 509px;
}

div#removetab1 {
    left: 581px;
}

div#removetab0 {
    left: 653px;
}

div.removetab:hover{
    cursor: pointer;
}

div#slotOverlay div.removetab {
    position: absolute;
    width: 20px;
    height: 25px;
    font-size: 8pt;
    line-height: 20px;
    text-align: center;
    border: 1px solid #999999;
    border-bottom: none;
    background-color: #ffffff;
    top: -20px;
}

div#stacktab9 {
    left: 45px;
}

div#stacktab8 {
    left: 117px;
}

div#stacktab7 {
    left: 189px;
}

div#stacktab6 {
    left: 261px;
}

div#stacktab5 {
    left: 333px;
}

div#stacktab4 {
    left: 405px;
}

div#stacktab3 {
    left: 477px;
}

div#stacktab2 {
    left: 549px;
}

div#stacktab1 {
    left: 621px;
}

div#stacktab0 {
    left: 693px;
}

div.stacktab:hover {
    cursor: pointer;
}

div#removestacktab9 {
    left: 45px;
}

div#removestacktab8 {
    left: 117px;
}

div#removestacktab7 {
    left: 189px;
}

div#removestacktab6 {
    left: 261px;
}

div#removestacktab5 {
    left: 333px;
}

div#removestacktab4 {
    left: 405px;
}

div#removestacktab3 {
    left: 477px;
}

div#removestacktab2 {
    left: 549px;
}

div#removestacktab1 {
    left: 621px;
}

div#removestacktab0 {
    left: 693px;
}

div.removestacktab:hover {
    cursor: pointer;
}
*/

.hover {
	background-color: #900109;
    
}

.component {
    height: 100px;
    width: 50px;
    font-size: 10px;
    background-color: #FFFFFF;
    text-align: center;
}

.label {
    vertical-align: bottom;
}

.component:hover {
    cursor: move;
}

div.toolbar {
    background-color: #CCCCCC;
    width: 49px;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 0px;
}

div.toolbar:hover {
    cursor: move;
}

td#componentTitle {
    text-align: center;
}

div#trash {
    width: 150px;
    height: 25px;
    background-color: #cccccc;
    padding: 5px;
    text-align: center;
    line-height: 25px;
    margin: 5px 5px 5px auto;
}

div#trash.hover {
    background-color: red;
}




#categorySelectBox {
    float: left;
    width: 250px;
    height: 300px;
    margin-left: 10px;
}

#categorySelect {
    width: 250px;
    height: 283px;
    font-size: 10pt;
    color: #333333;
    border: 2px solid #CCCCCC;
}


#cardSelectBox {
    float: left;
    width: 150px;
    height: 300px;
    margin-left: 10px;
}

#cardSelect {
    width: 150px;
    height: 283px;
    font-size: 10pt;
    color: #333333;
    border: 2px solid #CCCCCC;
}


#cardDisplayBox {
    float: left;
    width: 355px;
    height: 300px;
    margin-left: 10px;
}

#cardDisplay {
    border: 2px solid #CCCCCC;
    background-color: #ffffff;
    width: 355px;
    height: 275px;
    overflow: hidden;
}


#cardDisplay div {
    padding: 0 10px;
}

#cardDisplay div#cardContainer {
    float: left;
}

#cardDisplay div a {
  text-decoration: none;
}

#cardDisplay div a small {
  font-size: 8pt;
}

#cardDisplay div img:hover {
    cursor: move;
}

#cardDisplay div img {
  height: 172px;
  width: 72px;
  position: relative;
  border: 0;
  display: block;
}

#cardDisplay div h4 {
  margin: 0px;
  font-size: 12pt;
  color: #990000;
}

#cardDisplay div.cardText {
    margin-left: 90px;
    padding-right: 10px;
}

#cardDisplay div p {
    font-size: 10pt;
    margin: 0;
    margin-left: 90px;
}

#cardDisplay div p.viewdiagram {
  text-align: right;
}

#cardDisplay div p.viewdiagram {
  float: none;
}

#cardDisplay div p.viewwhatsthis {
  text-align: right;
}



#accessoryDisplay {
    border: 2px solid #CCCCCC;
    background-color: #ffffff;
    width: 355px;
    height: 275px;
    padding: 5px 0;
    overflow: hidden;
}


#accessoryDisplay div {
    padding: 0 10px;
}

#accessoryDisplay div#cardContainer {
    float: left;
}

#accessoryDisplay div.cardText {
    margin-left: 90px;
    padding-right: 10px;
}

#accessoryDisplay div a {
  text-decoration: none;
}

#accessoryDisplay div a small {
  font-size: 8pt;
}

#accessoryDisplay div img:hover {
    cursor: move;
}

#accessoryDisplay div img {
  height: 172px;
  width: 72px;
  position: relative;
  border: 0;
  display: block;
}

#accessoryDisplay div h4 {
  margin: 0px;
  font-size: 12pt;
  color: #990000;
}

#accessoryDisplay div p {
    font-size: 10pt;
    margin: 0;
    margin-left: 10px;
}








#frameControlsBox {
    float: left;
    width: 160px;
    height: 300px;
    margin-left: 10px;
}

#frameControls {
    border: 2px solid #CCCCCC;
    background-color: #ffffff;
    width: 160px;
    height: 270px;
    padding: 5px 0;
}

#ipaddressForm {
    font-size: 14pt;
    margin: 15px 0 0 10px;
}

div#errorBox {
    background-color: #770000;
    border: 2px solid #AA0000;
    color: #CC0000;
    margin: 10px;
    padding: 5px;
    position: absolute;
    left: 300px;
    margin-top: -30px;
}

table.doubleSlotCard {
	border-collapse: collapse;
}

table.doubleSlotCard td {
	padding: 0;
}