body {font-family:'Electrolize';background-image:url('images/gradientThin.png');background-repeat:repeat-x;background-color:#aeafaf;}
img {border:none;}
a {color:#000;font-weight:bold;text-decoration:none;}
a:hover {text-decoration:underline;}

/*tool box */
.toolBox {position:absolute;top:560px;left:7px; width:522px;border:1px solid #999; padding:4px; padding-left:78px;  }
.previewBox{pointer-events:none;position:absolute;top:560px;left:620px;border:1px solid #999;width:500px;height:108px;padding:4px;}
.panel {float:left;padding:0px;}
.panelTitle{font-size:12px;color:#555;text-transform:uppercase;font-weight:400;width:60px;margin-right:5px;text-align:right;}

.panel div {float:left;}
.panel div img {width:50px;}
div.button {background-color:#eee;position:relative;margin-right:4px;margin-bottom:4px;box-shadow:5px 5px 5px #666;}
div.button:hover, div.buttonSelected:hover {background-color:#EBF261;}
div.buttonSelected {background-color:#E7E514;position:relative;margin-right:4px;margin-bottom:4px;box-shadow:5px 5px 5px #666;}

.tooltip {position:relative;text-decoration:none;}
.tooltip div {margin-left:-999em;position:absolute;background-color:#000;color:#fff;font-weight:normal;font-size:12px;padding:5px;border:none;text-decoration:none;border-radius: 5px;box-shadow: 5px 5px 5px #888;}
.tooltip:hover div {position: absolute; left: 55px;   top: -10px;   z-index: 99;   margin-left: 0;text-decoration:none;}

 
canvas {outline-style:none;}

/*save and buy buttons*/
button.genericButton {position:absolute;background-color:#fff;text-transform:uppercase;font-size:15px;font-family:'Electrolize';height:30px;box-shadow:5px 5px 5px #ccc;}
button.saveButton {top:295px;left:1270px;}
button.buyButton{top:295px;left:1130px;}
button:hover {background-color:#eee;}
.panelB {padding:2px;padding-top:none;}
.printIcon {position: absolute;left:620px;top:60px;width:30px;}
.printIcon .panel div img {width:30px;}

/*rotate piece UI*/
div.rotationButtons{position:absolute;top:500px;left:760px;width:220px;display:none;}
.rotateButton{opacity:.5;}
.rotateButton:hover{opacity:1.0;}

/*material swatches*/
div.materials{position:absolute;top:591px;left:910px;width:206px;}
.material{float:left;width:100px;padding:1px;}

.material div.materialSwatchTxt{float:left;width:62px;font-size:13px;padding-left:2px;padding-top:2px;}
.material div.materialSwatchTxtDisabled {float:left;width:62px;font-size:13px;padding-left:2px;padding-top:2px;color:#666;}
.material div.materialSwatchTxtSelected {float:left;width:62px;font-size:13px;padding-left:2px;padding-top:2px;background-color:#fff;border-radius:0px 8px 8px 0px;box-shadow: 2px 2px 5px #777;}

.material img.materialSwatch{margin:2px;float:left;width:30px;}
.material img.materialSwatch:hover {border:2px solid #eee;margin:0px;}


.material img.materialSwatchSelected{border:2px solid #fff;float:left;width:30px;box-shadow: 2px 2px 5px #777;}
.material img.materialSwatchDisabled{border:0px;margin:2px;float:left;width:30px;opacity:.8;}
.material img.materialSwatchDisabled:hover {opacity:.8;}


.noSelect {-webkit-touch-callout: none;-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;}


.title {position:absolute;left:0px;top:0px;font-size:45px;background-color:#000;color:#fff;height:55px;width:100%;}

.title  img {float:left;width:220px;padding-top:3px;}
.title  div {text-transform:uppercase;font-size:16px;font-color:#ccc;font-family: 'Electrolize', sans-serif;float:left;margin-top:6px;padding-left:10px;}
.title a {color:#ccc;font-weight:400;}

/*zone titles*/
.menuTitle {font-size:12px;color:#555;padding:5px;padding-left:20px;position:absolute;text-transform:uppercase;font-weight:400;}

.zoneTitle {font-size:18px;color:#000;position:absolute;font-family: 'Electrolize', sans-serif;padding-top:10px;text-transform:uppercase;}
.zoneTools {left:11px;top:555px;}
.zoneScale{left:630px;top:555px;}
.zoneMaterial{left:910px;top:555px;}
.zoneProduct{left:760px;top:555px;}
.zoneBuy{left:1130px;top:55px;}

.description{position:absolute;top:94px;left:1130px;width:200px;font-size:15px;}

.pieceTitle{position:absolute;top:241px;left:1132px;width:194px;}
.pieceTitle input {font-size:14px;color:#000;font-family: 'Electrolize', sans-serif;border:none;width:100%;margin-bottom:1px;box-shadow: 2px 2px 2px #ccc;padding:7px;height:25px;background-color:#eee;}
.pieceTitle input:hover {background-color:#ddd;}
.pieceTitle input:focus {outline-style:none;background-color:#ddd;}

.summary{float:left;width:400px;font-size:12px;margin-top:5px;padding:5px 0px;text-transform:uppercase;margin-left:20px;}
.bottom {position:absolute;top:725px;left:130px;}

.saveMessage	{font-family:'Electrolize';padding:18px;font-size:16px;text-transform:uppercase;}
.saveMessage span {font-variant:small-caps;text-transform:none;font-size:16px;}





/*right panel stuff*/
.menuIconsRight {height:50px;position:absolute;top:645px;left:950px;} 

.menuUpperRight {left:625px;position:absolute;top:100px;}

.tab{float:left;margin-right:5px;padding:2px;text-transform:uppercase;font-size:12px;cursor:hand;}
.tabActive {background-color:#000;color:#fff;}
.tabInActive {background-color:#eee;color:#000;}

/*bottom left panel stuff*/
.relatedProducts {position:absolute;left:1125px;top:330px;padding: 10px;width:200px;height:300px;overflow:hidden;}
.relatedProducts .prod {width:92px;margin:5px 5px 0px 0px;float:left;position:relative;opacity:.8;}
.relatedProducts .prod:hover{opacity:1;}
.menuLeftLabel {position:relative;padding:3px;} /*shop related products*/
.menuLeftLabel a {font-weight:normal;}

.silverMessage {padding:30px;font-weight:400;text-transform:uppercase;font-size:20px;}
.silverMessage span {font-size:25px;font-weight:700;}
.silverMessage a {text-decoration:underline;}
.silverMessage a:hover {color:#666;}

.fb-like {position:absolute;top:620;left:20px;}
.twitterButton {position:absolute;top:658px;left:1140px;}
.alert {text-align:center;background-color:#ffff00;color:#000;position:absolute;top:0px;left:0px;width:500px;display:none;border-radius: 20px;box-shadow: 10px 10px 10px #888;}
.webGLMessage {display:none;}
.webGLalert {position:absolute;top:0px;left:0px;color:#000;text-align:center;background-color:#ffff00;padding:40px;width:100%;height:100%;font-size:20px;}
.X{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:10px;background-color:#000;color:#ff0;font-weight:bold;text-align:center;vertical-align:middle;}
.X:hover{background-color:#666;cursor:pointer;}

.messageBox {
    width: 400px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -200px;
    box-shadow: 10px 10px 10px #666;
    border-radius: 10px;
    padding: 10px;
    background-color: #091492;
    opacity: 1;
    color: #fff;
    display:block;
}