/* Common styles for coleraine.vic.au website */

/* Main background style and page layout */
body {
	background-color:#fffff0;
	}

/* Default font to use */
html {
	font-family:"Segoe UI",Arial,sans-serif; 
}	

/* Format the header and footer: use maroon background #810541 */
header {position:fixed; top:0; left:0; height:3em; width:100%; display:block; 
	background-color:#810541; z-index:2; padding:0; 
	overflow-x:scroll; scrollbar-width:none;
}
header::-webkit-scrollbar {display:none;}

header .m1 {width:65%; min-width:30em; max-width:750px; display:flex; 
	align-items:center; justify-content:space-between; height:100%; 
	margin:0 auto; padding:0 8px;}
header .m2 {display:inline-block;}

/* Header menu buttons */
header a {margin:0; color:#fffff0; font-weight:bold;} 
header a:visited {color:#fffff0;}
header a:hover {color:#dd0000;}

/* Disable button for current page */
header a.disabled, header a.disabled:visited {pointer-events:none; color:#aaa; text-decoration:none;}

/* Prevent menu captions wrapping */
header a {overflow-x:hidden; white-space:nowrap;}

/* Menu scroll buttons */
header img {position:fixed; display:none; top:0px; height:3em;}
header img.left {left:0;}
header img.right{right:0;}
header.more-left img.left, header.more-right img.right {display:block;} 

/* Footer */
footer {position:fixed; left:0; bottom:0; height:3em; width:100%; display:block; background-color:#810541;}
footer p {color:#fffff0;font-size:0.8em; font-weight:550; text-align:center; margin:0.5em;}
footer p a {color:#ffff44;}
footer p a:hover {color:#f88;}

/* Format the main page content */


section {background-color:#fffff0; max-width:820px; border-radius:1em;
	padding:1em 0; display:block;position:relative; width:80%; 
	margin:4em auto; min-height:calc(100vh - 160px);
}
	
@media screen and (orientation:portrait) {
	section {width:98%; padding:0;}
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 400;
}	

div.bg {display:none;}

@media screen and (orientation:landscape) {
	div.bg{
		display:block;
		position:fixed;
		height:100vh;
		width:100vw;
		left:0; 
		top:0;		
		background-image:url("/images/background.jpg");
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
}

div.intro {max-width:800px; margin:1em auto;}
div.intro h2 {font-size: 2em; text-align:center; margin:10px 0; color:#008; font-weight:600;}
div.intro p {text-align:justify; margin: 0 2em 0.5em; line-height:1.5;}

div.intro h3 {color:#008; font-size:1.5em;font-style:italic; font-weight:550; margin:1em 1em 0;}

@media screen and (orientation:portrait) {
	div.intro {margin:1em auto 0;}
	div.intro h2 {font-size:1.7em;}
	div.intro p {padding-left:0.5em;}
	div.intro h3 {font-size:1.2em;}
}
div.directory {max-width:800px; margin:1em auto;}
div.directory a {display:block; margin-left:4em; font-size:120%;}

p.red.italic, p.highlight {font-style:italic; color:#500;}
p.highlight {font-weight:bold;}
div.intro p.note {font-style:italic; font-size:0.8em; color:#006; margin:0.1rem 0 -0.5rem 2.4rem;}

img.logo {display:block;width:15%; max-width:15%; margin:0 auto;}

a {color:#00f; word-break:break-word;}
a:hover {color:#800;}
a:visited {color:#00f}

div.intro {margin-bottom:0;}
div.intro p.x1 {margin-bottom:0;cursor:pointer;}
p.x1 span.showmore {color:#800; margin-left:-4px;}
p.x1 span.more {display:none; pointer-events:none;}

img.globe {max-width:1em; max-height:1em; position:relative; top:0.2em;}
div.menu {max-width:800px; margin:0 auto 1em;}
div.menu2, div.menu1 {margin-left:1.5em;}
div.menu table.t1 {margin-left:0.5em;}

div.menu table th, div.menu table td {font-family:"Segoe UI",Arial,sans-serif; font-size:1.2em;}


div.menu table {display:none;}
div.menu table th {text-align:left;}

div.menu1 h3 {margin:0 0 0.25em;}

div.menu h2 {font-variant-caps:small-caps; font-size:1.8em; margin:0;}
div.menu h3 {text-decoration:underline; font-size:1.4em; cursor:pointer;}
div.menu h3:hover {color:#800;}

div.menu table.show {display:table;}
div.menu table.show tr.entity {display:table-row;}
div.menu table.show tr.entity th {text-decoration:underline; cursor:pointer; padding-left:1em; text-indent:-1em; vertical-align:top;}
div.menu table.show tr.entity th:hover {color:#800;}
/*div.menu table.show tr.detail {display:none;}
div.menu table.show tr.detail table {display:table;}
div.menu table.show tr.detail.show {display:table-row;}*/
div.menu table.show tr.entity td {vertical-align:top;}

@media screen and (orientation:portrait) {
	div.intro p {margin-left:1em;}
	div.intro p.note {margin-left:0.8rem;}
	div.menu {margin:0;}
	div.menu2 {margin-left:1em;}
	div.menu1 {margin-left:0.5em;}
	div.menu table.t1 {margin-left:0em;}
	div.menu h2 {margin:0.2em auto 0; padding-top:0;}
	div.menu h3 {margin:0 auto 0.1em;}
	div.menu table {margin-left:0;}
	div.menu div.menu2 > h2 {font-size:1.5em;}
	div.menu div.menu1 > h3 {font-size:1.2em;}
	div.menu table.show tr.entity th {padding-left:0.5em; text-indent:-1.5em;}
	div.menu table.show tr.entity td:nth-child(2) {padding-left:0.25em; text-indent:-0.5em;}
}

.menu1 .t1 {width:calc(100% - 6em);}
@media screen and (orientation:portrait) {
	.menu1 .t1 {width:calc(100% - 2em);}
}

/* Disable links, force wrapping in test form browser control (Internet Explorer work-arounds) */
body.xl {height:100%; min-height:100%;}

.menu1 table.t1.quiet {pointer-events:none;}
.menu1 table.t1.quiet * {word-break:break-all; word-wrap:break-word;}

.menu1 .t1 tr.entity th, .menu1 .t1 tr.entity td {font-weight:normal; color:#00a; font-size:1em;}
.menu1 .t1 tr.entity td {font-style:italic;}
.menu1 .t1 tr.entity.zero th {color:red; font-style:italic; font-weight:600; cursor:auto; text-decoration:none;}

.menu1 .t1 th {text-align:left;}

/* Highlight emergency information dial 000 (first entry under Emergency Services) */
div.menu table tr td.dial000 {color:red; font-style:italic; font-weight:600; font-size:0.9em }

.t1 .entity th img {width: 1em; height:1em; position:relative; left:-0.2em;top:0.2em;}
.t1 .entity th img.link {cursor:pointer;}
.t1 .entity th img.link:hover {background:#00ffff;}

table.ed {border:none; background-color: #eef; border-collapse:collapse; width:100%; margin-left:0;}
table.ed th, table.ed td {border:1px solid #810541; background-color: #eef;}
table.ed tr th {font-weight:normal; font-style:italic; font-size:80%;}
table.ed tr td {color:#810541; font-size:80%; font-weight:600; vertical-align:top; padding:0 4px 2px;}
table.ed tr:first-child th {color:white; background-color:#810541;}
table.ed tr td {padding:0.3em 0.2em 0.4em;}
@media screen and (orientation:portrait) {
	table.ed td {max-width:40vw; overflow:hidden;}
}

/* Entry detail styles */
img.smlogo {float:left; min-height:4em;width:4em;}
tr.detail h2 {font-size:1rem;color:#000088;font-style:italic;
	margin:0 0 6px;padding:0 0 2px; border-bottom:1px dotted #810541;}

tr.detail td div.cd {z-index:1;} /* prevent link icons in subsequent rows appearing within table.detail */

table.ed tr:last-child img {margin:0.5em;max-height:2em;}
tr.subhead {color:#800; font-style:italic;}

table tr td.mapref span.mapPos {display:none;}
table tr td.mapref {cursor:pointer; text-decoration:underline;}

div.intro p.newentity {font-size:0.8em; border-top: 1px dotted blue; font-style:italic; color:#500;}

/* Link formatting */
table.ed tr td p.contactform {color:#810541; text-decoration:underline; cursor:pointer;}

/* AED reference */
img.aed {display:inline-block; position:relative; top:5px; width:1em; margin-left:4px;}

/* Contact form result */
div.contactresult {width:80%; margin: 1em auto; text-align:center;}
div.contactresult p.warn {font-style:italic; color:red;}

.contactform span {display:none;}

.evdiv {max-width:800px; margin:0 auto;}
.events table {border-collapse:collapse; width:90%; margin:0 auto; border:2px solid blue;}
.events table tr.event td {border-top:1px dotted blue;}
.events table tr.event:first-child td {border-top:1px solid blue;}
.events table tr.notes td {border: none;}
.events table tr th {font-weight:normal;color:#500;font-style:italic; text-align:left;}
.events table tr td {font-size:1em; color:#008; vertical-align:top; line-height:1.2rem;}
.events table tr td:first-child {padding-right:0px; text-align:center;}
.events table tr.labels {border-bottom:1px solid #500;}
/*.events table tr.event:hover {background-color:#aaa;}*/
.events table tr.labels td {font-style:italic;}
.events table tr.event td div {font-size:0.7em; font-style:italic; color:#006600; padding-left:1em; margin-top:-0.2em;}

.events table tr th:last-child {text-align:center;}
.events table tr.event td:last-child {width:2em;max-width:fit-content; text-align:right;padding-right:8px; white-space:nowrap;}

.events img {max-width:1em; max-height:1em; position:relative; left:3px; top:0.2em;}
.events table tr.notes td {font-size:0.8em; font-style:italic; color:#006600; padding-left:1em;}


@media screen and (orientation:portrait) {
	.events table#eventlist tr td {font-size:1em;}
}	

.events td span.red {color:red; font-weight:bold;}

/* Contact form styling (padding-bottom allows for reCaptcha logo) */
.emailform {width:80%; max-width:500px; margin:0.5em auto; padding-top:0; }

.cf {padding-bottom:1em;}
.cf * {padding-bottom: 0;}
.cf label, .cf input, .cf select {display:block; width:80%;}
.cf label {margin-top:0.5em;}
.cf label.first {margin-top:-0.6em;}
.cf textarea {width:100%;}
.cf p.required {margin:0; color:red;font-size:0.75em; font-style:italic; display:block; float:left;}
.cf label span, .cf p span {color:red;}

@media screen and (orientation:portrait) {
	.cf label {margin-top:0.75em;}
}

div.grecaptcha-badge {margin-top:1.5em;}
button.g-recaptcha {width:20%; height:2em; font-weight: bold; color:#fffffe; background-color:#810541; min-height:2em;
	z-index:4; margin:-3.5em 0 0.5em auto; display:block; border-radius: 4px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
}

@media screen and (orientation:portrait) {
	button.g-recaptcha {margin:1em auto;}
}
button.g-recaptcha.disabled {background-color:#ccc; color:#888;}

body.acknowledgment {height:calc(100vh - 96px);}

/* Styles for map page */
section.maps {position:relative; width:calc(100% - 16px); margin:3em auto 1.5em;  padding-top:0;}
section.maps div.map {width:100%; max-width:820px; height:100%;border:1px solid #aaa; margin:0 auto;}
section.maps div.map img {left:2px; top:0; width:calc(100% - 2px); height:auto; max-width:100%; max-height:100%;object-fit:fill;}
section.maps div.map img#dummy {position:relative; opacity:0.01;}

section.maps div.intro {margin:0 auto 6px; padding-top:4px;}
section.maps div.intro h3 {margin:0; font-size:1.2em; font-weight:normal;display:inline-block;}

section.maps div.intro span {float:right; margin-top:4px;}

section.maps div.intro label {margin-right:1em;}
section.maps div.intro.hideoptions label {display:none;}

@media screen and (max-width: 680px) {
	section.maps div.intro span {display:block; position:absolute;bottom:0;}
}

section.maps div.intro a {margin-top:0; font-size:0.9em; font-style:italic; color:#500;}
section.maps div.intro a:hover {color:#d00;}
section.maps div.intro a:visited {color:#500;}

@media screen and (orientation:portrait) {
	section.maps div.intro h3 {font-size:1em; font-weight:550;} 	
}

@media screen and (max-width: 820px) {
	section.maps {padding-bottom:4em;}
	section.maps div.intro h3 {font-size:1em; font-weight:500;}	
}

#pinpoint {display:none; position:absolute;left:0;y:0;width:2.5%;}

div#gridmap {position:relative;border:2px solid blue;}

div#gridmap img {position:absolute;} 
div#gridmap img.aed {width:2%;}
div#gridmap.hideaed img.aed {display:none;}
div#gridmap.hideall img#amenities {display:none;}

section.maps label.showmore {font-size:0.9em; font-weight:bold;font-style:italic; color:#08a; cursor:pointer; margin-left:1em;}

section.maps div.map iframe {width:100%; height:80vh;}

p#entityname {position:relative; margin:0 auto; text-align:center; width:100%; color:#810541; font-style: italic; font-weight:550;}

dialog.notify {padding:0; border:2px solid #0ff;border-radius:5px;
	overflow-x:hidden; min-width:20em; font-size:0.8em;}
dialog.notify h2 {margin:0; text-align:left; color:#aa0000; width:100%;
	background-color:#0ff; padding:2px 0.2em;}
dialog.notify p {font-style:italic; padding:0.75em 1.5em;}
dialog.notify input {margin:0 1.5em 1em;}
dialog.notify div {display:flex; flex-direction:row; 
	justify-content:space-around; align-items:center;}
dialog.notify div:last-child {padding-bottom:1em;} 
dialog.notify button {min-width: 5em; display:inline; 
	white-space:nowrap; font-weight:bold; color:#600;}
dialog.notify::backdrop {background: rgba(128,128,140,0.8);
	backdrop-filter: blur(3px);}

dialog.notify span.aedlabel {font-size:1.1em; font-weight:bold; color:#600;}
dialog.notify span.aednote {display:inline-block; margin-top:8px; font-size:0.95em;}

/* Additional styles for news page */ 
body.news div.side {display:flex;}
body.news a {word-break:break-word;}
body.news p span {white-space:nowrap;}
body.news p select {margin-bottom:1em;}
body.news p option {color:#008; font-size:0.9rem; padding:4px; padding-right:24px;text-align:right;}

@media screen and (orientation: portrait) {
	body.news div.side {flex-direction:column;}
}

/* Styles for Excel-generated test page */
body.xl {min-height:80vh; margin-top:0;}
body.xl table.ed tr td {font-family: 'Segoe UI'; font-weight:600;}
body.xl table.ed tr:first-child th {text-align:left;}
body.xl table.t1 table.ed td.dx h2 {font-variant-caps: small-caps;}

/* Error message formatting */
p.pagefail {margin:1em auto; text-align:center; color:red; font-size:1.6em; font-style:italic;}