* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 62.5%; }
html, body { width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0; }
body { font-family: Ubuntu, Arial, Helvetica, sans-serif; background: gainsboro; }


.menuItem { width: 5rem; height: 5rem; padding: 1rem; }
.menuItem img.icon { max-height: 100%; max-height: 100%; width: auto: height: auto; }

.button, button, select { display: inline-block; border-radius: 0;
	background: none; border: none; 
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.button:hover, button:hover, select:hover, .button:active, button:active, select:active { opacity: 0.6; }
.menuItem[disabled] { opacity: 0.5; }
.button span.label, button span.label { display: none; }


.page { display: flex; flex-direction: column; width: 100%; height: 100%; }
	.page header { 
		height: 5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch;
		background: linear-gradient(#CD6723, #BB482D); color: white; 
	}
		header .mainMenu { display: flex; flex-direction: row; align-items: center; }
		
			.mainMenu .menuItem { color: white; }
			.mainMenu .menuItem svg.icon { height: 3rem; width: auto; }
			.mainMenu #buttonOpen.menuItem {
				-moz-appearance: none; text-indent: 5rem; background-size: 3rem; background-position: 1rem 1rem; background-repeat: no-repeat;
				background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'><path fill='white' d='M416,480l96-256H96L0,480H416z M64,192L0,480V64h144l64,64h208v64H64z'/></svg>");
			}
			.mainMenu #buttonOpen.menuItem:hover, .mainMenu #buttonOpen.menuItem:active { opacity: 0.5; }
			
	.page #main { display: flex; flex-direction: column; height: 100%; }
		
		#main .subheader { background: #EAEAE7; overflow-y: scroll; min-height: 4rem; }
			.subheader .elementBrowser { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
				
				.elementBrowser img.track { width: auto; height: auto; max-width: 100%; max-height: 100%; display: inline-block; }			
				.elementBrowser > button { width: 4rem; height: 4rem; padding: 0.1rem; }
				.elementBrowser > button:hover { background: rgb(150,150,150); opacity: 1; }
				.elementBrowser > button:active { background: rgb(100,100,100); opacity: 1; }
		
		#main .content { display: flex; flex-direction: row; width: 100%; flex-shrink: 1000; }
		
			.content .toolbox { display: flex; flex-direction: column; width: auto; background: rgb(200,200,200); color: black; width: 5rem; min-width: 5rem; }
			.toolbox .menuItem, .toolbox select { border-bottom: 1px solid silver; color: black; }
			.toolbox select.menuItem select { border: none; }
			.toolbox select.menuItem option { display: flex; flex-direction: row; background: white; border: none; }
			.toolbox select.menuItem .icon { height: 3.5rem; width: auto; display: inline-block; }
			
			.toolbox select.menuItem span.label { display: inline-block; padding: 1rem; }
			.toolbox .menuItem:active { background: gray; }
			
				#variantTypes { 
					/*background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='27.709px' height='27.555px' viewBox='0 0 27.709 27.555' enable-background='new 0 0 27.709 27.555' xml:space='preserve'><path d='M9.84,0h7.655v7.652H9.84V0z M9.84,9.84h7.655v7.652H9.84V9.84z M0,9.84h7.652v7.652H0V9.84z M0,0h7.652v7.652H0V0zM0.003,19.9h7.649v7.654H0.003V19.9z M9.843,19.9h7.652v7.654H9.843V19.9z M20.054,0h7.655v7.652h-7.655V0z M20.054,9.84h7.655v7.652h-7.655V9.84z M20.054,19.9h7.655v7.654h-7.655V19.9z'/></svg>"); */
					background-image: url("../Img/icon-variantTypeChooser.png");
					background-size: 3rem 3rem;
					background-position: 1rem 1rem;
					background-repeat: no-repeat;
					text-indent: 5rem;
				}
			
			
			.content .workbench { width: 100%; overflow: scroll; background: white; }
			
				.workbench canvas {}
		
	.page footer {}

h1 { font-size: 2.5rem; padding: 1rem; }


@media (min-width: 40rem) {
	.page header { justify-content: flex-start; }
	h1 { width: 24rem; min-width: 24rem; max-width: 24rem; }
	header .mainMenu { border-left: 1px dotted darkorange; }
	
	.page #main { flex-direction: row; }
	#main .subheader { width: 24rem; min-width: 24rem; max-width: 24rem; }
	.elementBrowser > button { width: 8rem; height: 8rem; padding: 1rem; }
	#variantTypes { width: 6.5rem; }
}
@media (min-width: 60rem) {
	h1 { width: 40rem; min-width: 40rem; max-width: 40rem; }
	#main .subheader { width: 40rem; min-width: 40rem; max-width: 40rem; }
}