doodle3d-client/css/fixedPosInterface.css

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


.button {
	display: table;
}

.big {
	background: #a6e19c;
	border: 1px solid #222;
	height: 64px;
	width: 64px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 32px;
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
}
.small {
	background: #a3d5f7;
	border: 1px solid #222;
	height: 40px;
	width: 40px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#logo {
	position: absolute;
	/*left: 50%;*/
	/*margin-left: -220px;*/
	top: 20px;
	left: 315px;
	width: 400px;
	height: 140px;
}

/*ha {*/
	/*background: #f5f5f5 url('../images/bg.jpg') 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;
  }
}

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  border: 2px solid #333;
  width: 1024px;
	min-height: 500px;
	max-height: 768px;
	height: 100%;
/*  height: 768px;*/
}

#d3dlogo {
	position: absolute;
	top:  15px;
	left: 31%;
  content:url("../img/logo_full.png");
}

#svg {
  cursor: hand;
}

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

#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;
}

/* 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 {
    content:url("../img/logo_small.png");
    margin-top:  7px;
  }

  #btnsUpDown, #btnsTurnLeftRight {
  	zoom: 0.94;
  }

	#btnPrint {
		right: 10px;
		top:  10px;
	}

	.btn {
		zoom: 0.94;
	}

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

@media screen and (max-height: 560px) {
	#d3dlogo {
		zoom: 0.8;
		left: 34%;
  }

  #btnsUpDown, #btnsTurnLeftRight {
  	zoom: 0.86;
  }

	#btnPrint {
		right: 6px;
	}

	.btn {
		zoom: 0.86;
	}

  #btnOops {
    top: 350px;
  }

  #btnSave {
    top: 200px;
  }

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