doodle3d-client/css/styles.css

/*

GLOBAL CONTAINER

 */
body {
	background-color: #fcfcfc;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; /* disable cut copy paste */
/* disable cut copy paste */
overflow: hidden; /* This chops off any overhanging divs */
}

img {
	z-index: 5; /*pointer-events: none;
	*/
/*-webkit-touch-callout:  none;
	               */
/*disable callout, image save panel */
/*-webkit-tap-highlight-color:  transparent;
	 */
/* "turn off" link highlight */
}

/*  http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari  */
.btn {
	background-repeat: no-repeat; /*	-webkit-user-select:  none;
	*/
cursor: pointer;
}

#landscape {
	position: absolute;
	background-color: #fff;
	width: 100%;
	max-width: 1024px;
	max-height: 768px;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 5;
	overflow: hidden;
	margin: 0px auto;
	outline: 2px solid #5e8c71;

	-webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
	box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
}

#portrait {
	display: none;
}

.bgContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bgTop,.bgMiddle,.bgBottom {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1.0;

	-webkit-transition: opacity .35s linear;
	-moz-transition: opacity .35s linear;
	-o-transition: opacity .35s linear;
	-ms-transition: opacity .35s linear;
	transition: opacity .35s linear;
	position: absolute;
	left: 0px;
	z-index: -5;
}

.bgTop {
	top: 0px;
}

.bgMiddle {
	top: 30%;
}

.bgBottom {
	bottom: 0px;
}

/*

CENTER PANEL

 */
.centerpanel {
	position: absolute;
	left: 50%;
	margin-left: -33%;
	width: 66%;
	height: 100%;
	z-index: 5;
}

.logopanel {
	height: 25%;
}

.d3dlogo {
	position: relative;
	top: 15%;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	max-width: 399px;
	height: 139px;
	background: url('../img/logo/logo_full.png') no-repeat center center;
	cursor: pointer;
}

#verticalShapes {
	position: absolute;
	right: 0;
	bottom: 15px;
	margin-right: -8.5%;
	width: 8%;
}

#verticalShapes > div {
	border: 2px solid #333;
	border-radius: 0px 5px 5px 0px;
	margin-top: 4px;
	background-color: #fff;
	cursor: pointer;
}

#verticalShapes > div img.verticalshape {
	width: 100%;
	max-width: 50px;
	height: auto;
	vertical-align: bottom;
}

.drawareacontainer {
	position: relative;
	width: 100%;
	height: 65%;
	background-color: #fff;
	border: 4px solid #000;
	border-radius: 15px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 15;
}

#canvasContainers {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

#mycanvasContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 78%;
	height: 100%;
}

#mycanvas {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-right: 2px solid #333;
}

#previewContainer {
	position: absolute;
	top: 0;
	right: 0;
	width: 22%;
	height: 100%;
}

#preview {
	min-width: 50px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

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

.bottompanel {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 10%;
}

/*
DOODLE UP/DOWN/LEFT/RIGHT buttons
 */
.manipulationBtns {
	margin: 2px 5px;
	position: absolute;
	right: 0;
	top: 0;
	max-width: 340px;
	max-height: 70px;
	width: 45%;
}

.manipulationBtn {
	width: 45%;
	height: auto;
	cursor: pointer;
}

#btnsUpDown {
	float: left;
	width: 45%;
}

#btnsUpDown > div {
	float: left;
	padding-right: 8px;
	background-repeat: no-repeat;
}

#btnsTurnLeftRight {
	float: right;
	width: 45%;
}

#btnsTurnLeftRight > div {
	float: left;
	padding-right: 8px;
	background-repeat: no-repeat;
}

#btnMoveUp {
	max-width: 65px;
}

#btnMoveDown {
	max-width: 64px;
}

#btnTwistLeft {
	max-width: 59px;
}

#btnTwistRight {
	max-width: 64px;
}

/*
HEIGHT-related RESPONSIVE STUFF
 */
@media screen and (max-height: 700px) {
	.logopanel {
	height: 22%;
}

.doodlecontainer {
	height: 68%;
}

.d3dlogo {
	top: 25%;
	max-width: 399px;
	height: 74px;
	background-image: url('../img/logo/logo_small.png');
}

}

@media screen and (max-height: 655px) {
	.bgMiddle {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

}

@media screen and (max-height: 525px) {
	.d3dlogo {
	top: 20%;
	height: 57px;
	max-width: 307px;
	background-image: url('../img/logo/logo_smaller.png');
}

}

@media screen and (max-height: 375px) {
	.d3dlogo {
	height: 40px;
	max-width: 216px;
	background-image: url('../img/logo/logo_smallest.png');
}

}

/*

LEFT PANEL

 */
.leftpanel {
	position: absolute;
	width: 17%; /*  background-color:  rgba(67, 204, 67, 0.4);
	*/
top: 0px;
	left: 0px;
	bottom: 0px;
}

.btnNew {
	margin: 5% 0% 1% 5%;
	width: 100%;
	max-width: 180px;
	height: auto;
}

.btnsPrevNext {
	margin: 1% 7%;
	max-width: 160px;
}

.btnPrevious {
	width: 40%;
	max-width: 56px;
	height: auto;
}

.btnNext {
	width: 40%;
	max-width: 56px;
	height: auto;
	float: right;
}

.btnSave {
	margin: 5% 5% 1% 5%;
	width: 90%;
	max-width: 144px;
	height: auto;
}

.btnOops {
	margin: 5% 5% 1% 5%;
	width: 90%;
	max-width: 144px;
	height: auto;
}

/*

RIGHT PANEL

 */
.rightpanel {
	position: absolute;
	width: 17%; /*  background-color:  rgba(255, 0, 254, 0.4);
	*/
top: 0px;
	right: 0px;
	bottom: 0px;
}

.btnPrint {
	margin: 1% 5% 5% 0%;
	width: 100%;
	max-width: 163px;
	height: auto;
	float: right;
}

.btnStop {
	margin: 5% 10% 1% 5%;
	float: right;
	width: 90%;
	max-width: 98px;
	height: auto;
}

.btnsSettingsInfo {
	position: absolute;
	bottom: 25px;
	right: 5px;
	width: 80%;
	margin: 1% 5%;
	max-width: 160px;
}

.btnInfo {
	width: 40%;
	max-width: 53px;
	height: auto;
}

.btnSettings {
	width: 40%;
	max-width: 53px;
	height: auto;
	float: right;
}

/*

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

.progressAmount {
	margin: 0px 5px;
}

#progressbar {
	position: relative; /*margin-bottom:  -20px;
	*/
width: 0%;
	height: 100%;
	background-color: #4c4;
	border: 0px solid #f0f;
	border-radius: 3px;
}

/*

THERMOMETER

 */
#thermometerContainer {
	position: absolute;
	right: 25px;
	top: 370px;
}

#thermometerCanvas {
	/*background:  #59b2b8;
	*/
/*zoom:  2;
	*/
}

/*
under all the above styles w.r.t. the cascading effect
 */
.disabled {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
	cursor: default;
}

#btnStop.disabled {
	display: none;
}

/*

REST

 */
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after {
	content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/* For IE 6/7 only*/
.clearfix {
	*zoom: 1;
}

/*

SETTINGS POPUP

 */
#contentOverlay {
	background-color: rgba(255, 255, 255, 0.65);
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: none;
}

#contentOverlay #settings {
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	max-width: 775px;
	max-height: 540px;
	width: 80%;
	height: 75%;
	margin: 7% 8%;

	-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
	box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
	border: 2px solid #222;
	border-radius: 15px;
	padding: 2%;
}

#contentOverlay #settings .toppanel {
	height: 10%;
}

#contentOverlay #settings .toppanel .settingsLabelContainer {
	width: 100%;
	height: auto;
	margin-bottom: 1%;
}

#contentOverlay #settings .toppanel .settingsLabelContainer .settingsLabelImg {
	width: 45%;
	max-width: 373px;
	height: auto;
}

#contentOverlay #settings .bottompanel {
	width: 100%;
	height: 90%;
}

#contentOverlay #settings .bottompanel > .settingsContainer {
	float: left;
	width: 83%;
	height: 98%;
	margin: .5%;

	-ms-overflow-y: scroll;
	overflow-y: scroll;
	border: 1px solid #bbbbbb;
	border-radius: 5px;
}

#contentOverlay #settings .bottompanel > .btnContainer {
	width: 15%;
	height: 100%;
	float: right;
	position: relative;
	right: 0;
}

#contentOverlay #settings .bottompanel > .btnContainer > .btnOK {
	position: absolute;
	bottom: 3%;
	right: 7%;
	max-width: 85px;
	min-width: 42px;
	width: 88%;
	height: auto;
	margin: 0 2% 2% 0;
	cursor: pointer;
}

@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {
	/*
	TOP LOGO
	 */
.centerpanel {
	left: 0;
	margin-left: 0;
	width: 100%; /*  background-color:  rgba(0, 135, 255, 0.4);
	*/
}

.logopanel {
	height: 40px;
}

.d3dlogo {
	top: 0;
	height: 40px;
	max-width: 216px;
	background-image: url('../img/logo/logo_smallest.png');
}

.doodlecontainer {
	/*	position:  absolute;
	*/
height: 85%;
}

/*.bottompanel  {
	
	display:  none;
	
}

*/
/*
	LEFT
	 */
.leftpanel {
	width: 100px;
	background-color: #fff;
	z-index: 50;

	-webkit-transition: left 0.3s ease-out;
	-moz-transition: left 0.3s ease-out;
	-o-transition: left 0.3s ease-out;
	-ms-transition: left 0.3s ease-out;
	transition: left 0.3s ease-out;
}

.hideleft {
	left: -101px;
}

.shadowright {
	-webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
	box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
}

.btnNew {
	margin: 5% 5% 1% 5%;
	width: 90%;
}

.btnSave {
	margin-left: 9%;
	width: 75%;
}

.btnOops {
	margin-left: 6%;
	width: 71%;
}

/*
	RIGHT
	 */
.rightpanel {
	width: 100px;
	background-color: #fff;
	z-index: 50;

	-webkit-transition: right 0.3s ease-out;
	-moz-transition: right 0.3s ease-out;
	-o-transition: right 0.3s ease-out;
	-ms-transition: right 0.3s ease-out;
	transition: right 0.3s ease-out;
}

.hideright {
	right: -101px;
}

.shadowleft {
	-webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
	box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
}

.btnPrint {
	margin: 1% 5% 5% 5%;
	width: 90%;
}

.btnStop {
	margin: 5% 6% 1% 5%;
	width: 70%;
}

/*
	REST
	 */
.sidebutton {
	display: block;
	position: absolute; /*  top:  50%;
	*/
/*  margin-top:  -20px;
	*/
top: 0px; /*float: right;
	*/
width: 25px;
	height: 38px;
	border: 1px solid #808;
	background: url('../img/arrows.png') no-repeat;
	background-color: #eee;
	cursor: pointer;
}

.sidebutton:active {
	background-color: #aaa;
}

.leftpanel .sidebutton {
	right: -27px;
	background-position: 0px 0px;
}

.rightpanel .sidebutton {
	left: -27px;
	background-position: -25px 0px;
}

.sidebuttonin:active {
	background-color: #888;
}

.leftpanel .sidebuttonin {
	background-color: #ccc;
	background-position: -25px 0px;
}

.rightpanel .sidebuttonin {
	background-color: #ccc;
	background-position: 0px 0px;
}

/*
	
	SETTINGS POPUP -MOBILE
	
	 */
#contentOverlay {
	z-index: 200;
}

#contentOverlay #settings {
	width: 87%;
	height: 82%;
	margin: 6% 4%;
}

#contentOverlay #settings > .right {
	width: 14%;
}

}

@media only screen and (orientation: portrait) {
	#landscape {
	display: none;
}

#portrait {
	display: block;
}

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

}