/* @override http://www.savewater.com.au/interface/home-audit.css */

h3 {
	margin: 0; 
	margin-bottom: .6em;
	padding: 0;
	color: #d0855a;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
}

#view-calc td {
	padding: 5px 0;
}
#view-calc .calc td {
	border-top: 1px solid #ccc;
}
#audit-heading {
	background: url(images/Home-water-use-calculator.png) no-repeat 0 0;
	height: 48px;
}
#audit-heading span {
	display: none;
}
.panel .image {
	width: 308px;
	height: 287px;
	float: right;
	margin-left: 30px;
	background: url(images/calc-image-background.png) no-repeat 0 0;
}
.panel .image img {
	padding-left: 9px;
	padding-top: 9px;
}
#audit-footer {
	width: 715px;
	margin: auto;
	background: url(images/water-calculator-footer.png) no-repeat 0 0;
	min-height: 50px;
}
#audit-footer a, #audit-footer a:visited, .links-and-more a, .links-and-more a:visited {
	color: #d0855a;
	text-decoration: none;
	border-bottom: 1px dotted #d0855a;
}
#audit-footer a:hover, .links-and-more a:hover {
	color: #d0855a;
	text-decoration: none;
	border-bottom: 1px solid #d0855a;
}
#audit-footer a:active, .links-and-more a:active {
	color: #d0855a;
	text-decoration: none;
	border-bottom: 1px dotted #d0855a;
}
.links-and-more ul, .links-and-more li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.links-and-more li {
	padding-left: 20px;
	margin-bottom: 5px;
	margin-top: 5px;
}
.links-and-more li.pdf {
	background: url(icons/pdf-icon.gif) no-repeat 0 center;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 25px;
	margin-left: 10px;
}

.row {
	margin-bottom: 8px;
	padding-bottom: 8px;
	background: url(images/horiz-line.png) no-repeat left bottom;
}
.row p {
	margin-bottom: 0;
	padding-bottom: 0;
}

.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}
.slider-wrap {
	margin: 0;
	position: relative;
	width: 100%;
}
/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 327px; background: #fff; overflow: scroll}
.csw .loading {margin: 160px 0 200px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border: none; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 715px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	background: #fff;
	clear: both;
}
.panelContainer, .stripViewer {
	height: 327px;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	-moz-user-select: none;
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 715px; /* Also specified in  .stripViewer  above */
}

.wrapper {
	padding: 10px 15px;
	position: relative;
	height: 287px;
}
/* hide the default slider nav */
.stripNav, .stripNavL, .stripNavR {
	display:none;
}

.results {
	position: relative;
	padding: 10px 15px;
}
.figures {
	border: 1px solid #f1dacd;
	color: #d0855a;
	background-color: #fcf8f5;
	padding: 10px;
	font-size: 14px;
	margin-bottom: 15px;
}
.in-litres, .in-buckets {
	margin-bottom: 10px;
}
#usage-figure-litres, #usage-figure-buckets {
	font-size: 18px;
	padding: 0 3px;
	font-weight: bold;
}
.clear {
	float: none;
	clear: both;
}
.promote {
	margin-bottom: 20px;
}
#promote-tank {
	border: 1px solid #ddd;
	color: #333;
	background-color: #f0f0f0;
	padding: 10px 10px 0;
}
#promote-tank p:first-child {
	font-weight: bold;
}
.q {
	display: block;
	color: #d0855a;
	margin-top: 3px;
	font-size: 13px;
}
.q input {
	margin: 0;
	padding: 1px 2px;
	border: 1px solid #f1dacd;
	color: #d0855a;
	font-size: 12px;
	background-color: #fcf8f5;
	font-weight: bold;
}
input#occupants {
	width: 20px;
}
input#postcode {
	width: 60px;
}
span.other {
	display: block;
}
.other {
	color: #777;
	margin-top: 5px;
}
ul.tips, ul.tips li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.tips {
	background: url(images/horiz-line.png) no-repeat 0 top;
	margin-bottom: 15px;
}
ul.tips li {
	padding: 10px 0;
	background: url(images/horiz-line.png) no-repeat 0 bottom;
}

.btns {
	width: 360px;
	height: 26px;
	position: absolute;
	bottom: 0px;
	margin-bottom: 17px;
	/*display: table;*/
	display: block;
}
.next, .back, .btn-spacer {
	/*display: table-cell;*/
	display: inline-block;
	height: 26px;
	line-height: 26px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	
	width: auto;
	float: left;
}
.btn-spacer {
	width: 5px;
}
.next {
	background: url(images/next-background.png) no-repeat 0 bottom;
}
.back {
	background: url(images/back-background.png) no-repeat right bottom;
}
.next a, .back a {
	font-size: 12px;
	color: #d0855a;
	text-decoration: none;
	font-weight: normal;
	height: 26px;
	display: inline-block;
	width: auto;
	line-height: 26px;
}
.next a {
	background: url(images/next-arrow.png) no-repeat right center;
	padding-left: 10px;
	padding-right: 30px;
}
.back a {
	background: url(images/back-arrow.png) no-repeat left center;
	padding-left: 30px;
	padding-right: 10px;
}
.next a:hover, .back a:hover {
	text-decoration: none;
}
.row ul, .row li {
	margin: 5px 0 0;
	padding: 0;
}

.disclaimer {
	padding: 10px;
	font-size: 10px;
	color: #d5855a;
}
.question .note, .graph .note {
	display: block;
	font-size: 9px;
	line-height: 12px;
	color: #555;
}

#percent-usage, #average-usage {
	margin-top: 20px;
	height: 220px;
}
#litres-usage {
	position: relative;
	height: 220px;
}
.graph-heading {
	color: #d0855a;
	font-size: 13px;
	margin-bottom: 10px;
}
.usage-pie {
	float: left;
}
.pie-legend {
	float: left;
	padding-left: 20px;
}
.pie-legend-item {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	color: #333;
}
.pie-legend-key {
	margin-right: 5px;
}
.pie-legend-key img {
	width: 13px;
	height: 13px;
}
.bar-labels {
	position: relative;
	display: block;
	border-top: 1px solid #ccc;
	color: #333;
	font-size: 10px;
	padding-top: 5px;
}
.bar-label-item {
	float: left;
	display: block;
	text-align: center;
}

.the-graph, .bar-labels {
	margin-left: 40px;
}
.y-axis {
	position: absolute;
}
.axis-val {
	display: block;
	width: 35px;
	text-align: right;
	height: 49px;
	color: #333;
	font-size: 10px;
	border-top: 1px solid #ccc;
	margin: 0;
	padding: 0;
}

#progress-ind {
	width: 715px;
	height: 27px;
	margin: auto auto 20px;
}
#progress-ind ul, #progress-ind li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#progress-ind li {
	float: left;
}
#progress-ind li a, #progress-ind li a:visited, #progress-ind li a:hover, #progress-ind li a:active {
	display: block;
	cursor: default;
}
.progress-ind li.last {
	float: none;
	clear: both;
}
#progress-ind li a.done {
	cursor: pointer;
}
#progress-ind li a span {
	display: none;
}
#progress-ind li a {
	width: 102px;
	height: 27px;
	background: url(images/water-calculator-steps.png) no-repeat 0 0;
}
#progress-ind li a#step-bathroom {
	background-position: 0 0;
}
#progress-ind li a#step-bathroom.done {
	background-position: 0 -27px;
}
#progress-ind li a#step-bathroom.done:hover, #progress-ind li a#step-bathroom.active {
	background-position: 0 -54px;
}
#progress-ind li a#step-laundry {
	background-position: -102px 0;
}
#progress-ind li a#step-laundry.done {
	background-position: -102px -27px;
}
#progress-ind li a#step-laundry.done:hover, #progress-ind li a#step-laundry.active {
	background-position: -102px -54px;
}
#progress-ind li a#step-kitchen {
	background-position: -204px 0;
}
#progress-ind li a#step-kitchen.done {
	background-position: -204px -27px;
}
#progress-ind li a#step-kitchen.done:hover, #progress-ind li a#step-kitchen.active {
	background-position: -204px -54px;
}
#progress-ind li a#step-other-indoor {
	background-position: -306px 0;
}
#progress-ind li a#step-other-indoor.done {
	background-position: -306px -27px;
}
#progress-ind li a#step-other-indoor.done:hover, #progress-ind li a#step-other-indoor.active {
	background-position: -306px -54px;
}
#progress-ind li a#step-garden {
	background-position: -408px 0;
}
#progress-ind li a#step-garden.done {
	background-position: -408px -27px;
}
#progress-ind li a#step-garden.done:hover, #progress-ind li a#step-garden.active {
	background-position: -408px -54px;
}
#progress-ind li a#step-other-outdoor {
	background-position: -510px 0;
}
#progress-ind li a#step-other-outdoor.done {
	background-position: -510px -27px;
}
#progress-ind li a#step-other-outdoor.done:hover, #progress-ind li a#step-other-outdoor.active {
	background-position: -510px -54px;
}
#progress-ind li a#step-leaks {
	width: 103px;
	background-position: -612px 0;
}
#progress-ind li a#step-leaks.done {
	background-position: -612px -27px;
}
#progress-ind li a#step-leaks.done:hover, #progress-ind li a#step-leaks.active {
	background-position: -612px -54px;
}