html, body { margin: 0;width: 100%; height: 100%; font-family: arial; font-size: 11pt;
	overflow: hidden; }

.body2 { xborder: solid 2px #3F3F3F; border-top: 0; border-bottom: 0; xbox-shadow: 1px 0 10px #777, -1px 0 10px #777;
	background: white; width: 100%; height: 100%; max-width: 1200px; margin: auto; overflow: hidden; }
	
header, nav, section, article, aside, footer, hgroup { 
	display: block;
}

button { background: #6B6C6E; color: white; border: 0; text-transform: uppercase; border: 0;
	padding: 0.4em 1.1em; font-size: 0.8em; cursor: pointer; font-weight: bold; }

h2:first-child { margin-top: 0; }
	
a { color: rgb(232,111,21); text-decoration: none; transition: color 0.4s; }
a:hover { color: rgb(238,49,36); transition: color 0.4s; }

p { margin: 1em 0; }
p:first-child { margin-top: 0; }

.breadcrumbs a { color: black; }

.screen { width: 100%; height: 100%; overflow: hidden; }

.innerBody { padding: 0 2em; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

footer { background: rgb(82,83,85); color: #777; padding: 0px 0 2px 0; text-align: center;
	position: absolute; width: 100%; bottom: 0px; left: 0px; }
footer a { color: white; font-size: 11px; }

.fullScreenOption { display: none; }

.breadcrumbs { height: 80px; position: relative; width: 100%; padding-top: 20px; }
.breadcrumbs .trail { border-top: solid 2px #999; width: 26.66%; margin: 0; margin-top: 10px;
	position: absolute; z-index: 1; }

.breadcrumbs .trail1 {  margin-left: 10%;  }
.breadcrumbs .trail2 { margin-left: 36.66%; }
.breadcrumbs .trail3 { margin-left: 63.33%; }
/** The dynamic one
.breadcrumbs .trail4 { margin-left: 100%; }
*/

.breadcrumbs .trail.disabled { border-top: solid 2px #eee; }
.breadcrumb.disabled .description { color: #ccc; }
.breadcrumb.disabled .box { background: url(/_/images/breadcrumb_circle_disabled.png); }

.breadcrumb { display: inline-block; width: 20px; position: absolute; text-align: center; }
.breadcrumb > * { display: block; margin: auto; }
.breadcrumb .box { width: 20px; height: 20px; border: solid 0px #888;
	 xbackground: #999; background: url(/_/images/breadcrumb_circle.png); xbackground: -moz-radial-gradient(#999, #777); position: relative; z-index: 2; margin-left: -10px; border-radius: 100px; }
.breadcrumb .description { font-size: 10pt; white-space: pre; position: relative; display: inline-block;
	margin-top: 4px; }

.breadcrumb.active .box { xborder: solid 2px blue; xbackground: blue;  background: url(/_/images/breadcrumb_circle_red.png); }
.breadcrumb.active .description { color: #ee3124;  }
.xbreadcrumb.tick .box { background: url(/_/images/tick.svg) white; }
.xbreadcrumb.cross .box { background: url(/_/images/cross.png) white; background-size: 15px 15px;
	background-repeat: no-repeat; background-position: 50% 50%; }

.breadcrumb.na .description { color: #eee; }
.breadcrumb.na .box { background: url(/_/images/breadcrumb_circle_na.png); }

.content { height: 400px; font-size: 0; }
/* IE8 prefers explicitly named, rather than .content > * */
.questions, .meters, .graphics { font-size: 12pt; padding: 0; display: inline-block; vertical-align: top; }
.questions { width: 55%; border: solid 2px #999; height: 100%; padding: 0; overflow: hidden; }
.questions { position: relative; overflow: hidden; }
.graphics { width:40%; border: solid 2px #999;  height: 100%;
	position: relative; padding: 0; overflow: hidden; border-left: 0; z-index: 5; }
.meters { display: none; width: 0px; overflow: hidden; height: 100%; font-size: 10pt; }
.meters > .inner { width: 100%; height: 100%; border: solid 1px black; border-left: 0; }

.graphics .message .caption { margin-top: 6px; }


.questions { border-radius: 15px 0 0 15px; }
.graphics { border-radius: 0 15px 15px 0; }

.meters .meter { padding: 5px; text-align: center; border-top: solid 1px black; overflow: hidden; }
.meters .meter:first-child { border: 0; }
.meters .meter .description { width: 85px; font-size: 10pt; line-height: 12pt; }

.meters .meter.active { xbackground: rgb(196,196,255); }

/** Tabbed meters **/
.meters > .inner { border-right: 0; padding-right: 5px; text-align: center; }
.meters .meter { border: solid 1px black; border-left: 0;
	border-radius: 0px 10px 10px 0; cursor: pointer;
 	margin-top: -1px; opacity: 0.3; }
.meters .meter:first-child { margin-top: -1px; }
.meters .meter:hover { opacity: 1; -moz-transition: opacity 0.3s; }
.meters .meter.active { opacity: 1; }
/** End tabbed meters **/

.tabMeter { width: 81px; height: 54px; margin: auto; }
.bushfireDangerMeter { width: 125px; height: 80px; margin: auto; }
.finalAssessmentMeter { width: 80%; margin: auto; }

.graphics .message { position: absolute; z-index: 20; top: 30px; right: 10px; opacity: 0.9;
	border: solid 1px #999; padding: 7px; background: white; text-align: center; box-shadow: 1px 1px 2px #999;
	margin-left: 10px; }
.graphics .message .controls { margin-top: 0.5em; }
/** Hide the message to begin with **/
.graphics .message { display: none; }

/** Tabs on top **/
.visualFeedback { width: 45%; display: inline-block; height: 100%; position: relative; }
.meters { height: 100px; border: 0; width: 100%; }
.meters .inner { border: 0; }
.meters .meter { width: 100px; display: inline-block; border-radius: 10px 10px 0 0; }
.graphics { width: 100%; height: 100%; }

.stack { width: 100%; height: 100%; }
.stack .card { display: none; position: absolute; height: 100%; -webkit-transform-origin: 0 0; transform-origin: 0 0; }

.stack div.visible { display: block; }
.stack table.visible { display: table; }

.scene { position: relative; }
.scene > * { position: absolute; top: 0; left: 0; z-index: 5; }

/** Ticks in the personalCapacity scene **/
.pcTick { top: 143px; left: 121px; font-size: 6pt; color: #C54; z-index: 10; }

/** Question sets and fields **/
.set { visibility: hidden; position: absolute; }
.set1 { visibility: visible; }
.questions .set {  height: 100%; overflow-y: auto; overflow-x: hidden; width: 100%; padding: 1em; }
.questions .set h2 { margin-top: 0; }

.questions { overflow-x: hidden; overflow-y: hidden; padding: 0; }

.innerBody > .controls { padding-right: 15px; padding-top: 13px; position: relative;
	height: 56px; }
.innerBody > .controls > * { position: absolute; right: 0; }
.innerBody > .controls button { height: 30px; font-weight: bold; font-size: 0.8em; }

.innerBody > .controls .set1 button { }

.fields { display: block; width: 100%; }
.fields .field { display: block; padding-bottom: 20px; }
.fields .field > * { display: block; vertical-align: top; }
.fields .field > label { padding-right: 1em; }
.fields .field input[type=text], .fields .field input[type=email] { width: 20em; }
.fields .field input[type=range] { width: 280px; border: 0; background: none;}
::-ms-tooltip { display: none; }
.field.na {display:none}
.fieldGroup.na { display: none; }

.beside .fields {  }
.beside .fields .field { padding-bottom: 10px; }
.beside .fields .field > * { display: inline-block; padding: 5px; vertical-align: top; }
.beside .fields .field > label { padding-right: 1em; width: 45%; }
.beside .fields .field > span { padding-right: 1em; width: 55%; }
.beside .fields .field input[type=text], .beside .fields .field input[type=email] { width: 16em; }

.beside .fields .field.na { display: none; }

.under .fields .field span { padding-top: 8px; padding-left: 10px; }

.beside .field > label {  width: 9em; }


.fields .field .helpIcon { width: 16px; height: 16px; background: url(/_/images/help.png); opacity: 0.7;
	float: right; margin: 2px 0 0 10px; }
.fields .field .helpIcon:hover { opacity: 1; }
.fields .field.helpActive { background: xorange; }
.fields .field.helpActive .helpIcon { background: url(/_/images/helpActive.png); opacity: 1;  }


/** Formatting for specific fields **/

.beside.set1 .fields .field > label { padding-right: 1em; width: 30%; }
.beside.set1 .fields .field > span { padding-right: 1em; width: 70%; }

.beside.set2 .fields .field > label { padding-right: 1em; width: 55%; }
.beside.set2 .fields .field > span { padding-right: 1em; width: 45%; }

/*.set2 .field > * { padding-bottom: 15px; }*/

.questions .set3 .fields .field > label { padding-right: 1em;  }

.gisRetrievalPara { border: solid 1px #ccc; border-radius: 5px;
	padding: 10px; text-align: center; margin: 8px 0; }
.bushfireResultsPara { display: none;  }
.bushfireDangerForm { opacity: 0.3;  }
.gisRetrievalMessage { font-size: 8pt; }
.skipSlowGis { display: none; margin-top: 1em; }
.notInNswMsg { display: none; }

/*.slopeType span label { display: block; }*/

.rangeDisplayPar { display: inline-block; padding-left: 1em; }
input[type=range] { vertical-align: middle; }
.slider { width: 280px; }

/** Dialogs **/
.dialog { display: none; position: absolute; z-index: 10000; background: rgb(255,255,255); background: rgba(255,255,255,0.95);
	border: solid 1px black; box-shadow: 2px 2px 2px #888; padding: 1.2em; text-align: center; }
.dialog.page { width: 80%; height: 70%; }
.veil { position: absolute; z-index: 1000; background: white; opacity: 0; top: 0; left: 0; }

.reportDialog { overflow-y: scroll; padding: 20px; }
.reportDialog .generatedSection { text-align: left; display: table; }
.reportDialog div.row { display: table-row; padding-top: 20px; }
/** FIX: Remove this text-align statement **/
.reportDialog .row h2 { display: table-cell; padding-top: 25px; }
.reportDialog .field { margin-bottom: 1em; display: table-row; }
.reportDialog .field > * { display: table-cell; padding: 5px 0; }
.reportDialog span.response { font-weight: bold; }
.reportDialog .header { margin: -20px; }
.reportDialog .header img { width: 100%; }
.reportDialog > h2 { text-transform: uppercase; color: red; text-align: left; margin-top: 30px; font-size: 26px; }
.reportDialog .controls { text-align: left; margin: 1em 0; }

.dialog.todoDialog { text-align: left; }
.todoDialog { overflow-y: scroll; padding: 20px; }
.todoDialog input[type=checkbox] { vertical-align: bottom; margin-right: 10px; }
.todoDialog .generatedSection { text-align: left; display: table; }
.todoDialog div.row { display: table-row; padding-top: 20px; }
/** FIX: Remove this text-align statement **/
.todoDialog .row h2 { display: table-cell; padding-top: 25px; }
.todoDialog .field { margin-bottom: 1em; display: table-row; }
.todoDialog .field > * { display: table-cell; padding: 5px 0; }
.todoDialog span.response { font-weight: bold; }
.todoDialog .header { margin: -20px; }
.todoDialog .header img { width: 100%; }
.todoDialog > h2 { text-transform: uppercase; color: red; text-align: left; margin-top: 30px; font-size: 26px; }
.todoDialog .controls { text-align: left; margin: 1em 0; }


.dialog.page.termsCondsDialog { width: 60%; }
.termsCondsDialog .termsCondsText { text-align: left; height: 80%; width: 95%; overflow-y: scroll; border: solid 1px #ccc;
	padding: 1em; margin: 1em auto; }
.termsCondsDialog .okControls { display: none; }
.termsCondsDialog.footer .okControls { display: block; }
.termsCondsDialog.footer .acceptControls { display: none; }

.returningUserDialog.dialog { width: 50%; height: auto; }
.returningUserDialog.dialog p { text-align: left; }

.hasUnansweredDialog.dialog { width: 50%; height: auto; }
.hasUnansweredDialog.dialog p { text-align: left; }

/** Ignore .helpText, it's just a data container. .sideHelp is the real UI container. **/
.helpText { display: none; }

.help { position: absolute; z-index: 1000; background: white; padding: 5px; border: solid 1px black; max-width: 70%; }
.bottomHelp { position: absolute; bottom: 0; border-top: solid 1px #ccc; width: 100%;
	left: 0; padding: 1em; height: 4em; text-align: center; display: none; background: rgb(255,240,230); background: rgba(255,240,230,0.8); }

.sideHelp { width: 100%; height: 100%; z-index: 20; position: absolute; top: 0; display: none;
	background: rgb(255,255,255); background: rgba(255,255,255,0.9); overflow-y: auto; overflow-x: hidden; }
.sideHelp table { width: 100%; height: 100%; }
.sideHelp .helpContent { vertical-align: middle; text-align: center; padding: 0.8em; }

.sideHelp .controls { position: absolute; right: 30px; top: 5px; z-index: 10; }
.sideHelp .longText { display: inline-block; width: 80%; max-height: 80%; text-align: left; }
.sideHelp .veryLongText { display: inline-block; width: 100%; max-height: 100%; text-align: left; }
.vegetation img { width: 100%; }

.address button { vertical-align: top; }
.addressInputPar { display: inline-block; vertical-align: top; }
.useMyLocation { display: none; font-size: 0.7em; padding-top: 3px; padding-left: 5px; }

.helpIcon { cursor: pointer; }


.tAndC { text-align: center; margin-top: 1.5em; }

.slider { margin-right: 0.5em; }

.landscapeMessage { display: none; }

.loadingVeil { display: none; }

.mobile { display: none; }

@media (min-width: 640px) {
	.desktop     { display: block; }
	span.desktop { display: inline; }
	.mobile { display: none !important; }
}

@media (max-width: 640px) {
	.mobile     { display: block; }
	span.mobile { display: inline; }
	.desktop { display: none; }
	.notInNswMsg { display: none; }
	.divChangeTest { display: none; }
	.loadingVeil { display: block; opacity: 0.8; background: white;
		position: absolute; height: 100%; width: 100%; top: 0; left: 0;
		z-index: 100000; padding: 10%; }
	 header { display: none; }
	 footer a { font-size: 10px; }
	 footer { font-size: 11px; height: 15px; }
	 /* I don't know what the min-height is here for */
	 body { min-height: 320px; }
	 /* I don't want to disable user selections, but it causes serious problems
	    with layout on mobile if I don't */
	 body { -moz-user-select: none; user-select: none; }
	 .body2 { border: none; min-height: 320px; }
	 .screen { min-height: 320px; }
	 .set h2 { font-size: 14pt; }
	 .set .introText p { display: none; }
	 /*.set .introText { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(255,255,255,0.9); z-index: 100;
		}*/
	 .breadcrumbs { text-align: center; padding-top: 0px; height: 40px; vertical-align: top; }
	 .breadcrumbs .trail { display: none; }
	 .breadcrumb .box { display: none; }
	 .breadcrumb { position: static; width: 25%; border: none; border-right: solid 1px #666; border-bottom: solid 1px #666; overflow:hidden;
	 margin: 0; background: #777; color: #aaa; height: 40px;
		line-height: 1em;
	 display:inline-table;
	 vertical-align: top;
	 }
	 .breadcrumb .description { display: table-cell; vertical-align: middle; }
	 .breadcrumb.active .description { color: white; }
	 .breadcrumb.disabled .description { color: #aaa; }
	 .breadcrumb .description {
		white-space: normal; text-align: center; width: 100%;
		/** The margins are dynamically generated for desktop to do centering. This will
			  override them for mobile **/
		margin-left: 0;
	 }
	 .screen {
		display: -webkit-box; -webkit-box-orient: vertical;
		display: -webkit-flex; -webkit-flex-direction: column;
		display: flex; flex-direction: column;
	 }
	 .innerBody { padding: 0;
		display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: vertical;
		display: -webkit-flex; -webkit-flex: 1; -webkit-flex-direction: column;
		display: flex; flex: 1; flex-direction: column;
	 }
	 .innerBody > .controls { margin-right: 10px; padding-top: 5px; height: 40px; }
	 .innerBody > .controls button { font-weight: normal; }
	 .content {
		display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: reverse;
		display: -webkit-flex; -webkit-flex: 1; -webkit-flex-direction: column-reverse;
		display: flex; flex: 1; flex-direction: column-reverse;
	 }
	 .content .visualFeedback { width: 100%;
		display: -webkit-box; -webkit-box-orient: vertical;
		display: -webkit-flex; -webkit-flex-direction: column;
		display: flex; flex-direction: column;
	 }
	 .content .meters {  }
	 .content .graphics {
		border-radius: 0; border: none; border-bottom: solid 1px #ccc;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	 }
	 .content .questions { width: 100%; margin-top: -1px;
		-webkit-box-flex: 2;
		 -webkit-flex: 2;
		 flex: 2;
		 border: none;
		 border-top: solid 1px #ccc !important;
		 border-bottom: solid 1px #ccc;
		 border-radius: 0 !important;
		 border-top-right-radius: 0 !important;
	 }

	 /* Handle the height of the visual feedback differently for different
		 question sets
		 Default is 100px high */
	 .content .visualFeedback { height: 100px !important; }
	 body[data-set=personalDetails] .content .visualFeedback { height: 35% !important; }
	 body[data-set=houseConstruction] .content .visualFeedback,
	 body[data-set=personalCapacity] .content .visualFeedback,
	 body[data-set=availableEquipment] .content .visualFeedback,
	 body[data-set=groundCondition] .content .visualFeedback
	 { height: 85px !important; }
	 body[data-set=report] .content .visualFeedback
	 { height: 170px !important; }
	 body[data-set=houseConstruction] .content .visualFeedback .graphics,
	 body[data-set=personalCapacity] .content .visualFeedback .graphics,
	 body[data-set=availableEquipment] .content .visualFeedback .graphics,
	 body[data-set=groundCondition] .content .visualFeedback .graphics
	 { display: none !important; }

	 body[data-set=report] .set p { display: block; }

	 .tabMeter { width: 70px; height: 45px; }
	 .meters .meter .description { width: 70px; font-size: 9pt; line-height: 11pt; }
	 .meters .meter { width: 75px; }
	 .meters > .inner { padding: 0; }

	 .card.meter { width: 90% !important; height: 90% !important; margin-left: 5%; margin-top: 5%; }

	 .questions .set { padding: 10px; }

	 .under .fields .field span { padding-left: 0; }

	 .dialog { box-shadow: none; border: none; border-bottom: solid 1px #ccc;
		top: 40px !important; text-align: left;
		box-sizing: border-box;
		width: 100%;
		height: 90%;
		height: -webkit-calc(100% - 55px);
		height: calc(100% - 55px);
		overflow: auto;
	 }
	 .veil { opacity: 0.01 !important; }
	 .dialog.page { width:100%;
		height: 90%;
		height: -webkit-calc(100% - 55px);
		height: calc(100% - 55px);
	 }
	 .dialog.page.termsCondsDialog { width:100%;
		height: 90%;
		height: -webkit-calc(100% - 55px);
		height: calc(100% - 55px);
	 }
	 .dialog h2 { font-size: 13pt; }
	 
	 .dialog .vegetation table { display: none; }
	 
	 .dialog .controls, .dialog .acceptControls, .dialog .okControls { position: absolute; right: 15px; bottom: 15px; z-index: 100; }
	 .dialog .controls button { height: 30px;  }
	 .todoDialog .controls, .reportDialog .controls { position: static; }

	 .termsCondsDialog .termsCondsText { margin: auto; }
	 /* Special handling for front page text, which is too long */
	 .dialog.set1 .controls { position: static; text-align: right; margin: 10px; }

	 .stack .card.bushfireDanger { display: none; }
	 .stack .card.houseConstruction { display: none; }
	 .stack .card.personalCapacity { display: none; }
	 .stack .card.availableEquipment { display: none; }
	 .stack .card.groundCondition { display: none; }

	 .graphics .message { position: static; border: none; box-shadow: none; }
	 .graphics .message .caption { display: none; }

	 footer { height: 15px; position: relative; z-index: 100000; }

	.fullScreenOption { display: block; }

	/** Field tweaks, etc. **/
	.rangeDisplayPar { display: block; text-align: center; }
	input[type=range] { display: none; }
	.rangeDisplayPar input[type=text] { width: 6em !important; }
	div.addressInputPar { padding: 0; margin: 0; }
	.fields .field.address input { width: 200px; margin: 0; }
	
	div[data-name=report] > *:last-child { margin-bottom: 6em; }
}

@media (min-width: 400px) and (max-device-width: 640px) and (orientation: landscape) {
	body > * { display: none !important; }
	.landscapeMessage { display: block !important; text-align: center; margin-top: 25%; }
	.breadcrumbs, .breadcrumb { height: 25px; }
	footer { height: 25px; }
	.dialog { top: 25px !important; height: calc(100% - 50px); }
	.breadcrumb .description .extra { display: none; }
	body { min-height: 0; }
	.body2 { min-height: 0; }
	.screen { min-height: 0; }
	.content {
		display: -webkit-box-flex; -webkit-box-orient: horizontal;
		display: -webkit-flex; -webkit-flex-direction: row;
		display: flex; flex-direction: row;
	}
	body[data-set="personalDetails"] .content .visualFeedback { width: 40%; height: 100% !important; }
	.content .visualFeedback { width: 40%; height: 100% !important; }
}

/*img { filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    ); }*/