*:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

#my_iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
}

#panel_toggle {
	z-index: 1;
	position: absolute;
	width: 200px;
	background-color: white;
	color: black;
	text-align: center;
	cursor: pointer;
	margin: auto;
	opacity: ;
	bottom: 5%;
	left: 50%;
	font-size: 2em;
	display: none;
	left: 50%;
    transform: translateX(-50%)
}

#controls-container {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
}
    /*.top-line {
        height: 30px;
        background: url("./assets/interface/8.png") repeat-x;
        background-size: 100% 100%;
    }*/
    .lower-line {
	    height: 92px;
	    background-color: #fff;
	    padding-top: 12px;
}

	.button-container a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px;
        text-decoration: none;
}
	.bottom-line {
        height: 92px;
        background-color: #fff;
		padding-bottom: 8px;
    }
	
        .button-container {
            display: table;
            margin: 0 auto;
            height: 123px;
			overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }
            .button {
                float: left;
                height: 100%;
                cursor: pointer;
                background-repeat: no-repeat;
                pointer-events: auto;
            }
                .data-button {
                    width: 88px;
                    height: 88px;
                    /*background-image: url("./assets/interface/1_1.png");*/
                    background-size: cover;

                }
                    .data-button:not(.delete-container):before {
                        content: "";
                        position: absolute;
                        width: 87px;
                        height: 87px;
                        margin: -7px 0 1 0px;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
						.data-button#tools:before {
							background-image: url("./assets/interface/scene_tools_and_settings.png");
						}						
						.data-button#lock_obj:before {
							background-image: url("./assets/interface/locked.png");
						}
						.data-button#unlock_obj:before {
							background-image: url("./assets/interface/unlocked.png");
						}						
	                    .data-button#zoomin:before {
							background-image: url("./assets/interface/zoomin.png");
						}	
						.data-button#zoomout:before {
							background-image: url("./assets/interface/zoomout.png");
						}
						.data-button#object_info:before {
							background-image: url("./assets/interface/object_info.png");
						}						
						.data-button#gazebo {
                        	background-image: url("./assets/interface/add_gazebo.png");
	                        margin-top: 1px;							
						}
						.data-button#gazebo-settings {
                        	background-image: url("./assets/interface/gazebo_settings.png");
	                        margin-top: 1px;							
						}						
						.data-button#pergola-settings {
                        	background-image: url("./assets/interface/pergola_settings.png");
	                        margin-top: 1px;							
						}
						.data-button#light_globe {
                        	background-image: url("./assets/interface/show_hide_light.png");
	                        margin-top: 1px;							
						}
						.data-button#table {
                        	background-image: url("./assets/interface/add_table.png");
	                        margin-top: 1px;							
						}
						.data-button#armchair {
                        	background-image: url("./assets/interface/add_armchair.png");
	                        margin-top: 1px;							
						}
						.data-button#sofa {
                        	background-image: url("./assets/interface/add_sofa.png");
	                        margin-top: 1px;							
						}
						.data-button#grill {
                        	background-image: url("./assets/interface/add_grill.png");
	                        margin-top: 1px;							
						}
						.data-button#mini_fridge {
                        	background-image: url("./assets/interface/add_minifridge.png");
	                        margin-top: 1px;							
						}
						.data-button#bug_screen {
                        	background-image: url("./assets/interface/add_bug_screen.png");
	                        margin-top: 1px;							
						}
						.data-button#kozyard_bug_screen {
                        	background-image: url("./assets/interface/add_bug_screen.png");
	                        margin-top: 1px;							
						}
						.data-button#chimney:before {
                        	background-image: url("./assets/interface/add_chimney.png");
	                        margin-top: 1px;							
						}
						.data-button#west-cap {
                        	background-image: url("./assets/interface/west_cap.png");
	                        margin-top: 1px;							
						}
						.data-button#goth-cap {
                        	background-image: url("./assets/interface/goth_cap.png");
	                        margin-top: 1px;							
						}
						
						.data-button#pool {	
						    background-image: url("./assets/interface/add_pool.png");
	                        margin-top: 1px;
						}
						
						#pool:hover .dropdown-content, #grill:hover .dropdown-content, #tools:hover .dropdown-content, #gazebo-settings:hover .dropdown-content, #pergola-settings:hover .dropdown-content, #gazebo:hover .dropdown-content {
							 display: block;
						}
						
						.pool-list, .grill-list, .tools-list, .gazebo-list, .woodframe-list, .kozyard-list .pergola-list {
							margin: 16px 0 16px 0;
						}
						
						.pool-list:hover, .grill-list:hover, .tools-list:hover, .gazebo-list:hover, .woodframe-list:hover, .kozyard-list:hover .pergola-list:hover {
							background-color: gray;
						}
						
    					.dropdown-content {
							display: none;
							position: fixed;
							bottom: 16px;
							background-color: #fff;
							box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
							padding: 12px 16px;
							font-weight: bold;
							z-index: 1;
						}

                .delete-container {
                    cursor: default;
                    background-image: url("./assets/interface/7_1.png");
					display: inline;
                }
                    .delete-container.active {
                        background-image: url("./assets/interface/7_2.png");
                    }
                    #delete {
                        margin: 25% auto 0;
                        cursor: pointer;
                        width: 60%;
                        height: 55%;
                    }

                .rot-button-container {
                    float: left;
                    width: 184px;
                    height: 82px;
					margin: 6px 0 0 0;
                    background: url("./assets/interface/2_1.png") no-repeat;
                    background-size: cover;
                    pointer-events: auto;\
					display: inline;
                }
                    .rotation-button {
                        width: 50%;
                        background-size: cover;
                    }
                        .rotation-button-left.active {
                            background-image: url("./assets/interface/2_2.png");

                        }
                        .rotation-button-right.active {
                            background-image: url("./assets/interface/2_3.png");
                            background-position: right;
							left: 10px;
							bottom: 15px;

                        }
                        .rotation-button>div {
                            width: 60%;
                            height: 50%;
                            margin: 20% 0 0 35%;;
                        }
                        #rot-cw {
                            margin-left: 5%;
                        }
/* CSS for object dimensions table and sliders*/

#info_container{
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 30%;
}

.object_dimensions{
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  border-collapse: collapse;
  width: 100%;
}

.object_dimensions tr:nth-child(even){background-color: #f2f2f2;}

.object_dimensions tr:nth-child(odd){background-color: #e2e2e2;}

.object_dimensions tr:hover {background-color: #ddd;}

.object_dimensions th {
  text-align: left;
  background-color: #4CAF50;
  color: white;
  padding-left: 8px;
}

.object_dimensions td {
	padding-left: 8px;]
}

#base_width_num:after {
  content: ' \0027';
}
#base_length_num:after {
  content: ' \0027';
}
#roofing_width_num:after {
  content: ' \0027';
}
#roofing_length_num:after {
  content: ' \0027';
}
#counter_length_num:after {
  content: ' \0027';
}

/* The following will hopefully 'wake up' the slider functionality

/*Custom Base*/
body {
  background-color: #eee;
}
#info-container {
  width: 300px;
  margin: 20vw auto;
}

input[type="range"] {
  width: 300px;
  background: transparent;
}
/*###################################*/
/*###########Responsive Range########*/
/*###################################*/
/*##############Core Style###########*/

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
/*#############Thumb##############*/

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
  margin-top: -12px;
}

input[type="range"]::-moz-range-thumb {
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
}

input[type="range"]::-ms-thumb {
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
}
/*#############Track##############*/

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #ccc;
}

input[type="range"]:active::-webkit-slider-runnable-track {
  background: #d6d6d6;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #ccc;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: #ccc;
}

input[type="range"]:focus::-ms-fill-lower {
  background: #ddd;
}

input[type="range"]::-ms-fill-upper {
  background: #ccc;
}

input[type="range"]:focus::-ms-fill-upper {
  background: #ddd;
}

/* css from B4W morphing demo - to be integrated more fully once I get my code working*/

html {
  font-family: Arial, sans-serif;
}

.main_sliders_container {
	position: relative;
	z-index: -1;
}

.slider_container {
  background-color: #fff;
  padding: 0 10px 10px 10px;

}

.slider_container:last-child {
  margin-bottom: 0;
}

.text_label {
  height: 30px;
  display: block;
  float: left;
  font-weight: normal;
  color: #000;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 28px;
  margin-bottom: 4px;
  font-size: 1.25em;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.input_slider {
  -webkit-appearance: none;
  width: 300px;
  display: block;
  float: left;
  height: 8px;
  margin-top: 16px;
  margin-left: 8px;
  margin-bottom: 16px;
  margin-right: 8px;
}

/* NOTE: hack for IE11 */
*::-ms-backdrop, .input_slider {
  padding-top: 2px;
}

.slider_container:before,
.slider_container:after {
  content: "";
  clear: both;
  display: table;
}

@media (max-width: 460px) {
  .input_slider {
    width: 220px;
  }

  .slider_container {
    height: auto;
    margin-bottom: 16px;
  }

  .text_label {
    float: none;
  }
}

.value_label {
  background-color: #323232;
  border: 2px solid rgba(98, 98, 98, .2);
  border-radius: 2px;
  width: 50px;
  height: 30px;
  display: block;
  float: left;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 28px;
  margin-bottom: 4px;
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background-color: #fff;
  border: 2px solid rgba(98, 98, 98, .2);
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background-color: #fff;
  border: 2px solid rgba(98, 98, 98, .2);
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
  color: transparent;
}

input[type=range]::-moz-range-track {
  height: 8px;
  width: 100%;
  cursor: pointer;
  background-color: #fff;
  border: 2px solid rgba(98, 98, 98, .2);
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
  height: 30px;
  width: 16px;
  border-radius: 2px;
  background-color: #323232;
  cursor: pointer;
  margin-top: -13px;
  -webkit-appearance: none;
}

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
  height: 30px;
  width: 16px;
  border-radius: 2px;
  background-color: #323232;
  cursor: pointer;
  margin-top: -13px;
  -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);
  height: 30px;
  width: 16px;
  border-radius: 2px;
  background-color: #323232;
  cursor: pointer;
  margin-top: -13px;
  border: 0;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #5276cf;
}

input[type=range]:focus::-ms-track {
  background: #5276cf;
}

input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0px 0px 6px 0px rgba(98, 98, 98, 1);
}

input[type=range]:focus::-moz-range-track {
  background: #5276cf;
  outline-color: transparent;
  border-color: transparent;
}

input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0px 0px 6px 0px rgba(98, 98, 98, 1);
}

/* code for styling annotations*/

#cap_info {
    position: absolute;
	background-color: white;
    color: blue;
    padding: 5px 12px 10px 12px;

	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	border: 2px solid blue;
	line-height: 1.25em;
	right: 0px;
    bottom: 204px;
}

#prod_head {
	text-align: center;
	color: darkgreen;
}

#close, #obj_dim_close {
	position: absolute;
	right: 0;
	top: 0;
	color: white;
	background-color: gray;
	width: 7%;
	cursor: default;
}

#close:hover, #obj_dim_close:hover {
	background-color: white;
	border: 2px solid gray;
	color: gray;
}

#obj_dim_close {
	font-weight: bold;
	font-size: 1.25em;
	text-align: center;
	line-height: 1.25em;
}