body {
/*   This chops off any overhanging divs */
  overflow:hidden;
}

.button {
	display: table;
}

/*#landscape {*/
  /*position:relative;*/
  /*width: 1024px;*/
  /*max-height: 768px;*/
  /*background-color: #808;*/
  /*border: 10px solid #ff0;*/
  /*margin: 0px auto;*/
/*}*/


#verticalShapes {
  position:absolute;
  right: -56px;
  bottom: 15px;
  /*background-color: #fff;*/
}

.verticalshape {
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 0px 5px 5px 0px;
  margin-top: 4px;
  /*background-color: #f0f;*/
  cursor: pointer;
}

.straight {
  background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
  background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
  background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
  background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}


/* Portrait */
@media screen and (orientation:portrait) {
  body {
/*    background-color: #08F;*/
  }

  #landscape {
  	display: none;
  }
  #portrait {
  	display: block;
  }
}
  /* Landscape */
@media screen and (orientation:landscape) {
  body {
/*    background-color: #8F0;*/
  }

  #landscape {
  	display: block;
  }
  #portrait {
  	display: none;
  }
}

.uiButtonsContainer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1024px;
  min-height: 500px;
  max-height: 768px;
  height: 100%;
  /*  height: 768px;*/
}
.uiButtonsContainer:before {
  content:' ';
  display:block;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border: 2px solid #333;
}

#d3dlogo {
	position: absolute;
	top:  15px;
	left: 31%;
  width: 399px;
  height: 139px;
  background-image: url('../img/logo_full.png');
  cursor: pointer;
}

#drawAreaContainer {
  position: absolute;
  top: 193px;
  left: 193px;
  width: 650px;
  height: 450px;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 15px;
}

#preview_tmp {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 500;
  border: 1px solid #f80;
  display: none;
}

#mycanvas, #preview {
  /*border: 1px solid #08c;*/
  float: left;
}

#mycanvas {
  width: 500px;
  height: 450px;
  border: 0px solid #333;
  border-right: 2px solid #333;
}

#preview {
  /*border: 1px solid #f8c;*/
  position: absolute;
  right: 0px;
  top: 0px;
  width: 150px;
  height: 450px;
}

.vertImage {
	margin:  0px;
	padding: 0px;
  /*border: 2px solid #f0f;*/
  max-width: 100%;
  height: auto;
  width: auto; /* for ie9 */
}


.bgTop {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -5;
}
.bgMiddle {
	display: block;
	position: absolute;
	top: 30%;
	left: 0px;
	z-index: -5;
}
.bgBottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: -5;
}

/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
  position: absolute;
  right: 30px;
  top: 370px;
  width: 110px;
  margin: 5px 0px;
  font-weight: bold;
  display:none;
}
#progressbarContainer {
  margin: 3px 0px;
  width: inherit;
  height: 20px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.progressAmount {
  margin: 0px 5px;
}
#progressbar {
  position: relative;
  /*margin-bottom: -20px;*/
  width: 0%;
  height: 100%;
  background-color: #4c4;
  border: 0px solid #f0f;
  border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

/* THERMOMETER */
#thermometerContainer {
  position: absolute;
  right: 5px;
  top: 360px;
}
#thermometerCanvas {
  /*background: #59b2b8;*/
  /*zoom: 2;*/
}


/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */

@media screen and (max-height: 675px) {
	.bgMiddle {
		display: none;
	}

	#d3dlogo {
    width: 399px;
    height: 74px;
    background-image: url('../img/logo_small.png');
    margin-top:  9px;
  }

  #btnsUpDown, #btnsTurnLeftRight {
  	zoom: 0.94;
    -moz-transform: translate(0px,-5px) scale(.94);
  }

	#btnNew {
    zoom: 0.94;
    -moz-transform: translate(-5px,-5px) scale(.94);
    /*-moz-transform: translate(-3px,-3px);*/
	}
	#btnOops {
    zoom: 0.94;
    -moz-transform: translate(-5px,-10px) scale(0.94);
	}

	#btnPrint {
		right: 10px;
		top:  10px;
    -moz-transform: translate(5px,-5px);
	}


	.btn {
		zoom: 0.94;
    -moz-transform: scale(.94);
	}

	#drawAreaContainer {
	  top: 128px;
	  height: 350px;
	}
}

@media screen and (max-height: 560px) {
	#d3dlogo {
    width: 399px;
    height: 57px;
    background-image: url('../img/logo_smaller_wide.png');
    margin-top:  14px;
		/*zoom: 0.8;*/
    /*-moz-transform: translate(-20px,-15px) scale(.8);*/
    /*-moz-transform: ;*/
    /*left: 34%;*/
  }

  #btnsUpDown, #btnsTurnLeftRight {
  	zoom: 0.86;
    -moz-transform: translate(0px,-7px) scale(0.86);
  }

	#btnPrint {
		right: 6px;
    -moz-transform: translate(10px,-10px);
	}

	#btnNew {
    zoom: 0.86;
    -moz-transform: translate(-10px,-10px) scale(.86);
	}

	.btn {
		zoom: 0.86;
    -moz-transform: scale(.86);
	}

  #btnOops {
    top: 350px;
    zoom: 0.86;
    -moz-transform: translate(-10px,-25px) scale(.86);
  }
  #btnSave {
    -moz-transform: translate(-5px,-13px);
  }

  #btnPrevious, #btnNext {
    /*top: 200px;*/
    -moz-transform: translate(-5px,-10px);
  }

  #drawAreaContainer {
	  top: 110px;
	  height: 350px;
	}
}