doodle3d-client/css/fixedPosInterface.css

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


  /* 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;
  }
}

/*

  Containers and content blocks

*/
#landscape {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 1024px;
  max-height: 768px;
  margin: 0px auto;
}
/* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */
#landscape:before {
  content:' ';
  display:block;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border: 2px solid #333;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /*margin: 0px auto;*/

  /*position: fixed;*/
  /*top: 0px;*/
  /*left: 0px;*/
  /*width: 1024px;*/
	/*min-height: 500px;*/
	/*max-height: 768px;*/
	/*height: 100%;*/
/*  height: 768px;*/
}

#drawAreaContainer {
  /*position: absolute;*/
  /*top: 193px;*/
  /*left: 193px;*/
  /*width: 650px;*/
  /*height: 450px;*/
  /*background-color: #fff;*/
  /*border: 4px solid #000;*/
  /*border-radius: 15px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  /*margin: -225px 0 0 -325px;*/
  background-color: #fff;
  width: 65%;
  min-width: 150px;
  max-width: 650px;
  height: 60%;
  min-height: 150px;
  max-height: 450px;
  border: 4px solid #000;
  border-radius: 15px;
}

#canvasContainers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /*height: 100%;*/
  background-color: #0e0;
}

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

#mycanvasContainer {
  display: table-cell;
  float:left;
}

#previewContainer {
  display: table-cell;
}

#mycanvas {
  /*width: 500px;*/
  /*height: 450px;*/
  /*border: 0px solid #333;*/
  border-right: 2px solid #333;
  /*background-color: #f0f;*/

  /*position: absolute;*/
  /*top: 0;*/
  /*bottom: 0;*/
  /*left: 0;*/
  /*right: 0;*/
  /*width: 80%;*/
  /*float:left;*/
  /*width: 100%;*/
  /*height: 100%;*/
  background: #808;
}

#preview {
  /*border: 1px solid #f8c;*/
  /*position: absolute;*/
  /*right: 0px;*/
  /*top: 0px;*/

  float:right;
  width: 150px;
  height: 100%;
  background: #f44;

  /*width: 150px;*/
  /*height: 450px;*/
}

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


/*

  Buttons and logo's

*/
.button {
  display: table;
}

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

.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: 25px;
  top: 370px;
}
#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);
	}
	#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;
  }

  #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 {
    -moz-transform: translate(-5px,-10px);
  }

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