/* Global layout */


@media only screen and (min-width: 420px) {
	div#designer_canvas{
		width: 55%;
		min-width: 400px;
	}
	
	div#designer_form_div{
		width: 300px;
	}
}

@media only screen and (max-width: 420px) {
	div#designer_canvas{
		width: 100%;
	}
	
	div#designer_form_div{
		width: 100%;
	}
	
}


div#designer_canvas{
	position: relative;
	display: inline-block;
    vertical-align:top;
	
	height: auto;
	margin-bottom: 20px;
}

div#designer_form_div{
	position: relative;
	display: inline-block;
    vertical-align:top;
	
	height: auto;
	padding: 0px 15px;
}


/* Images */

div#dummy{
	margin-top: 100%;
}

div.canvas_image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;	
}

div#background{
	background-image: url("https://www.hyperstrum.com/guitar_designer/images/Background light.png");
}

div#neck{
	mask-image: url("https://www.hyperstrum.com/guitar_designer/images/Neck.png");
}

div#frets{
	mask-image: url("https://www.hyperstrum.com/guitar_designer/images/Frets.png");
}

div#designer_canvas div{
	mask-size: 100%;
	mask-repeat: no-repeat;
}


/* Form */

.custom_option{
	display: inline-block;
	width: 120px;
}

.custom_option select{
	padding: 3px;
	line-height: 1;
}

label{
	display: block;
}

select{
	margin-bottom: 15px;
}

a.color_selector{
  display: inline-block;
  width: 110px;

  color: #404040;
  background-color: #E9E9ED;
  
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0px;

  line-height: 1;
  cursor: pointer;
}

.color_circles_container{
	position: fixed;
	display: none;
	width: 168px;
	
	background-color: white;
	padding: 5px;
	border: 1px solid gray;
	border-radius: 5px;
	line-height: 1;
	
	z-index: 999;
}

.color_circle{
  height: 20px;
  width: 20px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  margin: 3px;
  border: 1px solid gray;
}


p.footnote_comment{
	width: 250px;
	font-size: 12px;
	margin: 0px;
}


/* Order buttons */

.woocommerce div#designer_form_div div.summary{
	float: left;
	width: 100%;
	margin-top: 20px;
}

/* Description and examples */

img.example_image {
    float: left;
    width:  350px;
    height: 350px;
    object-fit: cover;
	
	margin: 5px;
}