/***************************
*
* Container
*
****************************/

#calculator {
	width:920px;
	height:600px;
	margin:20px auto;
	position:relative;
}

/***************************
*
* Progress View
*
****************************/

#calculator .progress-view {
	background-color:#58595b;
	width:920px;
	height:35px;
	margin-bottom:5px;
}

#calculator .progress-view ul {
  margin:0;
  padding:0;
  list-style-type:none;
  float:left;
  overflow:hidden;
}

#calculator .progress-view li {
	margin:0;
	padding:0;
	float:left;
	color:#fff;
	font-size:16px;
	border-right:1px solid #484749;
  height:35px;
  text-align: center;
  line-height:35px;
}
#calculator .progress-view li.selected b {
	color:#69be28;
}
#calculator .progress-view li.introduction  { width:128px; }
#calculator .progress-view li.layout        { width:90px; }
#calculator .progress-view li.surface       { width:108px; }
#calculator .progress-view li.edging        { width:109px; }
#calculator .progress-view li.cutouts       { width:107px; }
#calculator .progress-view li.options       { width:109px; }
#calculator .progress-view li.estimate      { width:109px; }
#calculator .progress-view li.quote         { width:152px; border-right:none; }

/***************************
*
* Global
*
****************************/

#calculator button.btn {
  width:90px;
  height:40px;
  background:transparent url(img/buttons.png) no-repeat 0 0;
  background-position: 0px 0px;
  border:0;
}

#calculator button.btn-start { background-position:0px 0px; }
#calculator button.btn-start[disabled].btn { background-position:-90px 0px; }

#calculator button.btn-next { background-position:0px -40px; }
#calculator button.btn-next[disabled].btn { background-position:-90px -40px; }

#calculator button.btn-back { background-position:0px -80px; }
#calculator button.btn-back[disabled].btn { background-position:-90px -80px; }

#calculator button.btn-submit { background-position:0px -120px; }
#calculator button.btn-submit[disabled].btn { background-position:-90px -120px; }

#calculator button.btn-print { background-position:0px -160px; }
#calculator button.btn-print[disabled].btn { background-position:-90px -160px; }

/***************************
*
* Page View
*
****************************/

#calculator .page-view {
  width:920px;
  height:620px;
  overflow:hidden;
}

#calculator .page {
  border:13px solid #69be28;
	height:590px;
	position: relative;
}

#calculator .page .content {
  padding:20px;
  font-size:14px;
}

#calculator .page h1 {
  color:#69be28;
  margin:0;
  padding:0;
  font-size:18px;
  font-weight:normal;
}

#calculator .page a {
  color:#69be28;
}

/***************************
*
* Page View Sidebar Off
*
****************************/

#calculator .page-view-sidebar-off .page {
  width:894px;
}

/***************************
*
* Page View Sidebar On
*
****************************/

#calculator .page-view-sidebar-on .page {
  width:684px;
  float:left;
}


/***************************
*
* Page View Full
*
****************************/

#calculator .page-view-full {
  width:894px;
  left:0px;
  top:40px;
}

#calculator .page-view-full .page {
  width:894px;
}

/***************************
*
* Sidebar View
*
****************************/

#calculator .sidebar-view {
  background-color:#fff;
  width:195px;
  min-height:455px;
  font-size:13px;
  float:left;
  margin-right:5px;
  padding:5px;
  height: calc(100% - 14px);
}

#calculator .sidebar-view h1 {
  font-size:16px;
  color: #69be28;
  padding:0;
  margin:0;
}

#calculator .sidebar-view h2 {
  font-size:16px;
  font-weight:normal;
  color: #69be28;
  padding:0;
  margin:0;
  margin-top:5px;
  cursor:pointer;
}

#calculator .sidebar-view h2:hover {
	text-decoration:underline;
}

#calculator .sidebar-view .divider {
  background-color: #69be28;
  height:4px;
  margin-top:5px;
}

#calculator .sidebar-view .surface-image {
  float:right;
  width:37px;
  height:37px;
  margin-top:10px;
}

#calculator .sidebar-view-empty {
  background-color:#69be28;
}

/***************************
*
* Page Location View
*
****************************/

#calculator .page-location-view .disclaimer {
	font-size:12px;
}

#calculator .page-location-view .map {
	background:transparent url(img/australia-map.png) no-repeat 0 0;
	width:373px;
	height:354px;
	position:relative;
	margin-left:230px;margin-top: 90px;
}

#calculator .page-location-view .map .state {
	background:transparent url(img/australia-map.png) no-repeat 0 0;
	display:none;
	position:absolute;
}

#calculator .page-location-view .map .wa {
	width:148px;
	height:235px;
	background-position:-375px 0px;
  left:0px;
	top:31px;
}

#calculator .page-location-view .map .nt {
  width:94px;
  height:160px;
  background-position:-524px 0px;
  left:142px;
  top:0px;
}

#calculator .page-location-view .map .sa {
  width:112px;
  height:132px;
  background-position:-524px -161px;
  left:145px;
  top:158px;
}

#calculator .page-location-view .map .qld {
  width:144px;
  height:205px;
  background-position:-637px -0px;
  left:230px;
  top:0px;
}

#calculator .page-location-view .map .nsw {
  width:120px;
  height:95px;
  background-position:-637px -206px;
  left:253px;
  top:193px;
}

#calculator .page-location-view .map .act {
  width:30px;
  height:27px;
  background-position:-637px -302px;
  left:297px;
  top:242px;
}

#calculator .page-location-view .map .vic {
  width:82px;
  height:67px;
  background-position:-375px -236px;
  left:250px;
  top:245px;
}

#calculator .page-location-view .map .tas {
  width:68px;
  height:36px;
  background-position:-689px -302px;
  left:275px;
  top:316px;
}

/***************************
*
* Page Introduction View
*
****************************/

#calculator .page-introduction-view h1 {
  font-size: 22px;
}

#calculator .page-introduction-view {
	background: transparent url(img/intro-feature.jpg) no-repeat 440px 0px;
}

#calculator .page-introduction-view .content {
	width:400px;
	font-size:14px;
}

#calculator .page-introduction-view .btn-start {
	position:absolute;
  top:390px;
	left:20px;
}

/***************************
*
* Page Layout View
*
****************************/

#calculator .page-layout-view {
	position:relative;
}

#calculator .page-layout-view .layouts {
}

#calculator .page-layout-view .layouts .layout {
	display:block;
  width:180px;
  height:180px;
  position:absolute;
  top:80px;
  left:0;
  cursor: pointer;
}

#calculator .page-layout-view .layouts .galley { left:30px; }
#calculator .page-layout-view .layouts .lshape { left:250px; }
#calculator .page-layout-view .layouts .ushape { left:470px; }

#calculator .page-layout-view .layouts .thumb {
  text-decoration:none;
	width:180px;
  height:150px;
  background: transparent url(img/layouts.png) no-repeat 0 0;
}

#calculator .page-layout-view .layouts .galley .thumb           { background-position:0px -150px; }
#calculator .page-layout-view .layouts .galley.hover .thumb     { background-position:0px 0px; }
#calculator .page-layout-view .layouts .galley.selected .thumb  { background-position:0px 0px; }

#calculator .page-layout-view .layouts .lshape .thumb           { background-position:-180px -150px; }
#calculator .page-layout-view .layouts .lshape.hover .thumb     { background-position:-180px 0px; }
#calculator .page-layout-view .layouts .lshape.selected .thumb  { background-position:-180px 0px; }

#calculator .page-layout-view .layouts .ushape .thumb           { background-position:-360px -150px; }
#calculator .page-layout-view .layouts .ushape.hover .thumb     { background-position:-360px 0px; }
#calculator .page-layout-view .layouts .ushape.selected .thumb  { background-position:-360px 0px; }

#calculator .page-layout-view .layouts .name {
	text-decoration:none;
  width:180px;
  height:30px;
  text-align:center;
  color:#69be28;
  line-height:30px;
}

#calculator .page-layout-view .size-panel {
  position:absolute;
  width:450px;
  top:280px;
  left:30px;
  /*
  background:transparent url(img/layout-measure-feature.jpg) no-repeat top right;
  */
}

#calculator .page-layout-view .size-panel input {
  width:50px;
  border:1px solid #58585a;
  padding:5px;
}

#calculator .page-layout-view .render {
  position:absolute;
  width:200px;
top: 280px;
left: 440px;
}

#calculator .page-layout-view .nav {
  position:absolute;
  top:400px;
  left:470px;
}

/***************************
*
* Page Surface View
*
****************************/

#calculator .page-surface-view .surfaces .surface {
	width:150px;
	height:200px;
	position:absolute;
	top:70px;
  cursor: pointer;
  border:4px solid #fff;
  color:#fff;
  background-color:#eee;
  text-align:center;
  line-height:50px;
  background-position:0 50px;
  background-repeat:no-repeat;
}

#calculator .page-surface-view .surfaces .timber  {
	background-color:#60351d;
	background-image:url(img/surface/surface-timber.jpg);
	left:20px;
}

#calculator .page-surface-view .surfaces .quartz  {
  background-color:#00b092;
  background-image:url(img/surface/surface-quartz.jpg);
  left:180px;
  display: none;
}

#calculator .page-surface-view .surfaces .granite {
  background-color:#6f2c3e;
  background-image:url(img/surface/surface-granite.jpg);
  left:340px;
   display: none;
}

#calculator .page-surface-view .surfaces .solid {
  background-color:#e17000;
  background-image:url(img/surface/surface-solid.jpg);
  left:180px;
  /* Luca hide quartz
  left:500px;
   */
}

#calculator .page-surface-view .surfaces .hover {
    border:4px solid #ddd;
}

#calculator .page-surface-view .surfaces .selected {
  border:4px solid #69be28;
}

#calculator .page-surface-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}

/***************************
*
* Page Swatch View
*
****************************/

#calculator .page-swatch-view .header {
	padding:20px;
	color:#fff;
	margin-bottom:6px;
	white-space: nowrap;
	overflow: hidden;
	width:604px;
	height:20px;
}

#calculator .page-swatch-view .header .surface-name { float:left; }
#calculator .page-swatch-view .header .swatch-name { float:right; }

#calculator .page-swatch-view .header-timber  { background-color:#60351d; }
#calculator .page-swatch-view .header-quartz  { background-color:#00b092; }
#calculator .page-swatch-view .header-granite { background-color:#6f2c3e; }
#calculator .page-swatch-view .header-solid   { background-color:#e17000; }

#calculator .page-swatch-view .swatch-panel {
	clear: left;
}

#calculator .page-swatch-view .feature {
  clear:left;
  width:435px;
  height:216px;
  /*
  background:transparent url(img/surface/positional.jpg) no-repeat 0 0;
  */
}

#calculator .page-swatch-view .swatches .swatch {
	width:52px;
	height:52px;
	background-repeat:no-repeat;
	float:left;
	margin-right:2px;
  margin-bottom:6px;
  border:4px solid #fff;
}

#calculator .page-swatch-view .swatches .hover {
  border:4px solid #ddd;
}

#calculator .page-swatch-view .swatches .selected {
  border:4px solid #69be28;
}

#calculator .page-swatch-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}

/***************************
*
* Page Edging View
*
****************************/

#calculator .page-edging-view .edges {
  position:absolute;	
  top:70px;
  left:20px;
	width:200px;
	height:350px;
	overflow:hidden;
}

#calculator .page-edging-view .edge {
	width:178px;
	height:151px;
	background-position:0 0;
	margin-bottom:20px;
}

#calculator .page-edging-view .hover,
#calculator .page-edging-view .selected {
  background-position:0 -151px;
}

#calculator .page-edging-view .preview {
  position:absolute;  
  top:70px;
  left:280px;
  width:300px;
  height:225px;
}

#calculator .page-edging-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}


/***************************
*
* Page Cutouts View
*
****************************/

#calculator .page-cutouts-view .cutouts {
  position:absolute;
  top:80px;
  left:20px;
}

#calculator .page-cutouts-view .cutout {
  float:left;
}

#calculator .page-cutouts-view .cutout img {
  margin-bottom:10px;
}

#calculator .page-cutouts-view .cutout .name {
  margin-bottom:10px;
}

#calculator .page-cutouts-view .cutout input {
  border:1px solid #828283;
  width:60px;
  padding:5px;
}

#calculator .page-cutouts-view .disclaimer {
  position:absolute;
  top:510px;
  left:20px;
}
#calculator .page-options-view .disclaimer {
      position:absolute;
  top:540px;
  left:20px;
  width: 420px;
}
#calculator .page-cutouts-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}

#calculator .page-cutouts-view .cutouts .cutout { width:215px; }
#calculator .page-cutouts-view .cutouts img { width:115px; }

/* Mixa Sink removed 17 May 2013
#calculator .page-cutouts-view .cutouts .mixa-sink { display:none; }
#calculator .page-cutouts-view .cutouts-solid .cutout { width:165px; }
#calculator .page-cutouts-view .cutouts-solid img { width:150px; }
#calculator .page-cutouts-view .cutouts-solid .name { height:55px; }
#calculator .page-cutouts-view .cutouts-solid .mixa-sink { display:block; }
*/

#calculator .page-edging-view .content.alpine .edge-20mm { display:none; }
#calculator .page-edging-view .content.paloma .edge-20mm { display:none; }
#calculator .page-edging-view .content.sienna .edge-20mm { display:none; }
#calculator .page-edging-view .content.meringue .edge-20mm { display:none; }
#calculator .page-edging-view .content.bilberry .edge-20mm { display:none; }
#calculator .page-edging-view .content.autumn .edge-20mm { display:none; }
#calculator .page-edging-view .content.riverbed .edge-20mm { display:none; }
#calculator .page-edging-view .content.venaluna .edge-20mm { display:none; }
#calculator .page-edging-view .content.venastorm .edge-20mm { display:none; }
#calculator .page-edging-view .content.venacreme .edge-20mm { display:none; }
#calculator .page-edging-view .content.venaluna .edge-20mm { display:none; }

#calculator .page-edging-view .content.moondrift .edge-38mm { display:none; }
#calculator .page-edging-view .content.summitmist .edge-38mm { display:none; }
#calculator .page-edging-view .content.elementgrey .edge-38mm { display:none; }
#calculator .page-edging-view .content.calacatta .edge-38mm { display:none; }

#calculator .page-cutouts-view .content.timber .demi-sink{ display:none; }

#calculator .page-cutouts-view .content.timber .grand-sink{ display:none; }

#calculator .page-cutouts-view .content.solid .cutouts .cutout, #calculator .page-cutouts-view .content.timber .cutouts .cutout {width: 130px;margin-bottom: 20px;}
#calculator .page-cutouts-view .content.solid .cutouts img {width: 115px;}
/***************************
*
* Page Options View
*
****************************/

#calculator .page-options-view .options {
  position:absolute;
  top:60px;
  left:20px;
}

#calculator .page-options-view .option {
  margin-bottom:5px;
  position:relative;
  width:650px;
}

#calculator .page-options-view .option-button {
	color:#fff;
	padding:20px 0px 20px 20px;
  background-color:#d1d2d4;
  width:360px;
  background-position:center right;
  background-repeat:no-repeat;
  /*
  display: inline-block;
  *display: inline;
  zoom:1;
  */
}

#calculator .page-options-view .hover {
  background-color:#939598;
}

#calculator .page-options-view .selected {
  background-color:#58595b;
}

#calculator .page-options-view .option-quantity, #calculator .page-options-view .option-quantity3, #calculator .page-options-view .option-quantity4, #calculator .page-options-view .option-quantity5, #calculator .page-options-view .option-quantity6 {
  color: #58595b;
  position:absolute;
  top: 0;
  left: 390px;
  /*
  display: inline-block;
  *display: inline;
	zoom:1;
	*/
}
#calculator .page-options-view .option-quantity3, #calculator .page-options-view .option-quantity4, #calculator .page-options-view .option-quantity5, #calculator .page-options-view .option-quantity6{top: 17px;}
#calculator .page-options-view .option input.quantity, #calculator .page-options-view .option input.quantity3, #calculator .page-options-view .option input.quantity4,  #calculator .page-options-view .option input.quantity5, #calculator .page-options-view .option input.quantity6 {
  width: 40px;
  padding: 5px;
  border: 1px solid #bbb;
}

#calculator .page-options-view .option-inset-support-rails .option-quantity {
  margin-top:15px;
}

#calculator .page-options-view .nav {
  position:absolute;
  top:540px;
  left:480px;
}

/***************************
*
* Page Estimate View
*
****************************/


#calculator .page-estimate-view .estimate {
	width:280px;
	height:180px;
	position:absolute;
  top:80px;
}

#calculator .page-estimate-view .estimate-diy {
  left:20px;
}

#calculator .page-estimate-view .estimate-pro {
  left:350px;
}

#calculator .page-estimate-view .estimate .title {
	color:#fff;
	background-color:#69be28;
  font-size:16px;
  padding: 5px 10px;
}

#calculator .page-estimate-view .estimate-content {
  padding:10px;
}

#calculator .page-estimate-view .estimate .price {
  font-size:24px;
}

#calculator .page-estimate-view .estimate .details {
	margin-top:10px;
	font-size: 13px;
  line-height: 16px;
}

#calculator .page-estimate-view .util {
  position:absolute;
  top:380px;
  left:20px;
}

#calculator .page-estimate-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}

/***************************
*
* Page Quote View
*
****************************/

#calculator .page-quote-view .nav {
  position:absolute;
  top:380px;
  left:480px;
}

#calculator .page-quote-view iframe {
	border:none;
  width:500px;
  height:500px;
  overflow:hidden;
}

#calculator-quote-page {
  font-size:14px;
  color:#535457;
}

#calculator-quote-page form {
	background-color:#d7eec4;
	padding:20px;
	width:400px;
	float:left;
}

#calculator-quote-page ul {
	list-style-type:none;
	padding:0;
	margin:0;
}

#calculator-quote-page li {
	float:left;
  clear:left;
  margin-bottom:5px;
}

#calculator-quote-page label {
	width:100px;
	margin-right:10px;
	text-align:right;
	float:left;
}

#calculator-quote-page input {
	width:240px;
}
#calculator-quote-page textarea {
	width:240px;
}

#calculator-quote-page input,
#calculator-quote-page select  {
	float:left;
	border:1px solid #b9da9e;
}

#calculator-quote-page li.error input,
#calculator-quote-page li.error select  {
  border:1px solid #f00;
}

#calculator-quote-page li.error label {
	color:#f00;
}

.row .col-6 {
	float: left;width: 50%;
}
.row .col-6 input {margin-right: 3px;margin-bottom: 5px;}
.row .col-6 span:not(.legend){display: block;
position: relative;
float: left;
top: 5px;
width: 15px;}
.row .col-6 .legend{font-size: 10px;
text-align: left;
display: block;}
.row .col-6 .legend.legfirst{margin-left: 15px;}
.size-result {width: 100px !important;text-align: right;}
/***************************
*
* Print Page
*
****************************/

#calculator-print-page .content {
  padding:20px;
}