
body {
	margin: 0;
	padding: 0;
	background-color:#fff;
}

.vz-disclaimer {
	margin:20px;
	margin-left:100px;
	font-size:13px;
}

.vz-header {
	padding-bottom: 16px;
}

/* add bootstrap thumbnail to theme */
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}

/* full outer wrapper for application */
#vz-wrap {
	width: 960px;
	margin:auto;
}

#vz-wrap h2 {
	color: #428bca;
}



/* color selection controls panel */
#vz-control-wrap {
	float:left;
	width: 235px;
	margin-right:0px;
	min-height:495px;
}

#vz-control-wrap h4 {
	margin-bottom: 7px;
	color: #428bca;
}

#vz-radio-group div {
  background-image: url(../assets/layout/radio-btn-off.png);
  background-repeat: no-repeat;
  padding-left:25px;
  padding-bottom:3px;
  cursor: pointer;
}

#vz-radio-group div.selected {
  background-image: url(../assets/layout/radio-btn-on.png);
}

/* target image wrap */
#vz-outer-img-wrap {
  float:right;
  width: 722px;
  height: 422px;
  margin-top:15px;
  margin-bottom:40px;
  border:5px solid transparent;
  margin-right:0px;
}

#vz-img-tabs {
  background-color:transparent;
  width: 722px;
  height: 30px;
  margin:auto;
}

#vz-target-tabs img {
	cursor: pointer;
}

#vz-img-border-wrap {
  width: 712px;
  height: 432px;
  margin: 0 auto;
  padding:0;
  background-color: transparent;
}

.vz-residential-border {
  border: 5px solid #353535;
}

.vz-commercial-border {
  border: 5px solid #b7b7b7;
}

#vz-img-wrap {
  width: 702px;
  height: 422px;
  padding: 0;
  margin: 0 auto;
  position:relative;
}

#vz-svg-overlay {
  position:absolute;
  top: 0;
  left: 0;
  width: 702px;
  height: 422px;
  z-index:999;
}

#vz-base-img { 
  position:absolute;
  top: 0;
  left: 0;
  z-index:100;
}

/* layer control selectors */

.vz-control-group {
  float:left;
  width:48%;
  margin:0;
  padding:0;
 }

 .vz-control-group img {
  margin-bottom:10px;
 }

 .vz-control-group .locked {
  background-image: url(../assets/layout/Lock.png);
  background-position: top left;
  background-repeat: no-repeat;
  font-weight: bold;
  padding-left:18px;
 }

 .vz-control-group .unlocked {
  font-weight:bold;
  cursor: pointer;
 }

 .vz-control-group img.active{
  background-color:#000;
 }

 .vz-control-group img:hover {
  background-color:#777;
  cursor: pointer;
 }

 .vz-control-group img:active {
  background-color:red;
  cursor: pointer;
}

.vz-layer-title {
	font-weight:bold;
}

.vz-layer-title .locked {
  background-image: url(../assets/layout/Lock.png);
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 12px;
}

.vz-color-name {
	font-size: 12px;
}

/* color choices bar */

#vz-colors-bar {
	padding: 15px;
	margin-top:8px;
	background-color:#e9e9e9;
}

.vz-color-swatch {
  float:left;
  width:110px;
  
  text-align:left;
}

.vz-color-swatch img {
  margin: 3px;
  float:left;
}

.vz-color-swatch img.active {
  background-color:#000;
  /*.img-thumbnail*/
}

 .vz-color-swatch img:hover {
  background-color:#777;
  cursor: pointer;
 }

 .vz-color-swatch img:active {
  background-color:red;
  cursor: pointer;
 }