.mainBody { margin: 15px; }
.instructions { width: 800px; margin-bottom: 15px; }
#addProductInstructions { width: 450px; }
.typeaheadLabel { font-size: 12px; font-weight: bold; }
.productViewer { background: #eee; border: 1px solid #aaa; width: 800px; height: 200px; padding: 20px; }
.productViewerLeft { width: 400px; background: blue; height: 100%; float: left; }
.thick { border: 1px solid #aaa; height: 25px; }
.productViewerRight { width: 400px; background: #dfdfdf; border: 1px solid #bbb; padding: 10px; height: 170px; text-align: center; float: right; }

#noProductsMessage { font-weight: bold; }

.existingProducts { margin-top: 30px; margin-bottom: 30px; width: 1000px; background: #eee; border: 1px solid #aaa; padding: 40xp; text-align: center; }
.existingProduct { width: 130px; padding: 5px; margin-right: 20px; text-align: center; height: 200px; }
.existingProductName { display: none; position: absolute; z-index: 100; background: #fff; border: 1px solid #bbb; padding: 8px; font-weight: bold; font-size: 11px; }

.floatLeft { float: left; }
.floatRight { float: right; }

.productDetails { float: right; text-align: right; width: 265px; }
.productImage { padding: 2px; border: 1px solid #bbb; }
.productName { font-size: 14px; font-weight: bold; margin-left: 10px; margin-top: 10px; display: block; }
.productButton { padding: 2px 10px; background: #d9d9d9; border: 2px outset #aaa; color: #555; font-size: 10px; font-weight: normal; letter-spacing: 1px; }

#productViewerImage { margin-left: 15px; }
#addProductButton { margin-top: 20px; }

.addedProductButton { border: 2px inset #060; color: #06aa06; }
.addProductButton:hover { border: 2px inset #060; color: #393; }
.removeProductButton:hover { border: 2px inset #600; color: #933; }