body { margin: 0px; font-family: sans-serif; overflow-y:scroll; overflow-x: hidden; }
#menubar { position: fixed; width: 100%; background-color: #3A7495; height: 25px; line-height: 25px; padding-left: 20px; font-size: 80%; border-bottom: solid 1px white; z-index: 3;
 } 
#breadcrumbs { float: left; color: #aaa; }
#menu { float: right; padding-right: 40px; }
#title { color: white; width: 100%; position: fixed; top: 26px; background-color: #3A7495; 
text-align: center; height: 50px; line-height: 50px; letter-spacing: 3px; font-size: 150%; font-family: sans-serif; text-transform: uppercase; z-index: 2;
}
#announcement { color: white; font-size: 80%; display: block; text-align: center; width: 70%; margin-left: auto; margin-right: auto; }
#content { padding: 10px; padding-top: 80px; }
td.date { padding-right: 20px; }

td { text-align: center; padding: 2px; }

th { text-align: center; padding: 2px; padding-top: 20px;}

td.data { padding: 5px; text-align: right;  padding-left: 30px; padding-right: 20px;}
table { margin-left: auto; margin-right: auto; margin-bottom: 20px; }

td.job { padding: 2px; text-align: center; }
th.job { padding: 2px; text-align: center; padding-top: 20px;}

div.house { 
	height: 130px; 
}
div.residents {
	padding-top: 10px;
	display: inline-block;
}
div.resident { 
	padding-top: 10px;
	margin-left: 10px; 
}
div.dependent { 
	margin-left: 10px; 
	padding-top: 10px;
	font-size: 70%; 
	font-weight: bold;
}

h4.house { font-size: 120%; width: 260px; text-align: center; }
h4.loading { font-size: 100%; width: 260px; text-align: center; font-weight: normal; }
table.residents { width: 260px; }
td.resident { text-align: left; }
td.age { text-align: right; }

img.house {
	margin-top: 0px;
	float: left;
}

#tabmenu {
	margin-top: 10px; 
	margin-left: auto;
	margin-right: auto;
	clear: both;
    height: 50px;
	cursor: pointer;
}
#ul_tabs {
    padding: 0px;
    margin: 0px;
}
button.lh {
    width: 120px;
    height: 30px;
    line-height: 30px;
    float: left;
	text-align:center;
	color: white;
	margin: 5px;
	padding: 0px;
	font-size: 100%; 
	background-color: #3A7495;
}
button.lhselected {
    width: 120px;
    height: 30px;
    line-height: 30px;
    float: left;
	text-align:center;
	color: white;
	margin: 5px;
	padding: 0px;
	font-size: 100%; 
	background-color: #54a7d7;
	outline: none;
}
button.lh:hover {
	background-color: #468db5;
}
button.lhselected:hover {
	background-color: #468db5;
}

div.content_tab {
    display: none;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    width: 600px;
    min-height: 100%;
    margin-top: 20px;
    text-align: left; 
}
div.content_tab_wide { 
	display: none;
    width: 95%; margin-left: auto; margin-right: auto; 
	text-align: center;
}

button {
	background-color: #3A7495;
	color: white;
	cursor: pointer;
	border: none;
	font-size: 100%; 
	padding: 5px 10px;
}
button:hover {
	background-color: #54a7d7;
}

div.groupbutton { 
	width: 300px;
	height: 50px;
	background-color: #3A7495;
	color: white;
	margin-bottom: 10px;
	cursor: pointer;
}
div.groupbutton:hover { background-color: #54a7d7; }

div.groupname { 
	width: 300px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

a {text-decoration: none }
a:link {color: #55c; }
a:visited {color: #55c;  }

a {text-decoration: none }
a:link.menu {color: white; }
a:visited.menu {color: white;  }
a:hover.menu {color: #54a7d7; }

span.longdate { display: inline; }
span.shortdate { display: none; }

table.records { display: inline-block; text-align: center; width: 170px; margin: 10px 20px; vertical-align: top;}
div.recordrow { width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 8px}
div.date { width: 80px; display: inline-block; text-align: left; }
div.cola { width: 160px; display: inline-block; text-align: left; }
div.colb { width: 160px; display: inline-block; text-align: left; }

.embed-container { 
	position: relative; padding-bottom: 56.25%; height: 0; 
	overflow: hidden; max-width: 90%; margin-left: auto; margin-right: auto; } 
.embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

div.team { width: 400px; padding: 10px; margin-top: 10px; background-color: #eee; border: solid 1px #fff; margin-left: auto; margin-right: auto; }

/* new map interactions */
div.map {width: 1000px; height: 1476px; cursor: default; display: block; margin-left: auto; margin-right: auto; border: none; position: relative; }
img.map { position:absolute; top:0px; left:0px;}
div.cloud { position:absolute; pointer-events: none; width: 151px; height: 100px; background-image: url('images/clouds/7.png'); opacity: 0.9; }
div.cloudbig { position:absolute; pointer-events: none;width: 300px; height: 215px; background-image: url('images/clouds/8.png'); opacity: 0.9; }
div.special { position:absolute; cursor: pointer; color: #123255; font-weight: bold; font-size: 14px; text-shadow: 0px 0px 6px white;}
div.town { position: absolute; cursor: pointer; text-transform: uppercase; font-weight: bold; font-size: 18px; text-shadow: 0px 0px 6px white; }
div.town--north { color: #123255; }
div.town--east { color: #4F180B; }
div.town--south { color: #146018; }
div.towndot { position: absolute; border-radius: 16px; border: solid #eee 2px; }
div.towndot--north { background-color: #123255; }
div.towndot--east { background-color: #4F180B; }
div.towndot--south { background-color: #146018; }
div.feature { position: absolute; font-weight: bold; font-size: 14px; text-shadow: 0px 0px 6px white;}
div.feature--north { color: #123255; }
div.feature--east { color: #4F180B; }
div.feature--south { color: #146018; }
div.service { position: absolute; font-weight: bold; font-size: 14px; text-shadow: 0px 0px 6px white;}
div.service--north { color: #123255; }
div.service--east { color: #4F180B; }
div.service--south { color: #146018; }
div.servicedot { position: absolute; width: 8px; height: 8px; border: solid #eee 1px; }
div.servicedot--north { background-color: #123255; }
div.servicedot--east { background-color: #4F180B; }
div.servicedot--south { background-color: #146018; }

.map a:focus-within div.town,
.map a:focus-within div.service,
.map a:focus-within div.special { color: #fff; text-shadow: 0px 0px 6px black; }
.map a:focus-within div.servicedot { background-color: #fff; border: solid #000 1px; }
.map a:focus-within div.towndot { background-color: #fff; border: solid #000 2px; }

.map a:hover div.town,
.map a:hover div.service,
.map a:hover div.special { color: #fff; text-shadow: 0px 0px 6px black;}
.map a:hover div.servicedot  { background-color: #fff; border: solid #000 1px; }
.map a:hover div.towndot { background-color: #fff; border: solid #000 2px; }

@media only screen and (max-width: 600px) {
	#title { font-size: 120%; overflow: hidden; }
	span.crumb { display: none; }
	span.longdate { display: none; }
	span.shortdate { display: inline; }
	table.records { display: table; margin-left: auto; margin-right: auto;}
	div.content_tab { width: 90%; text-align: left; margin-top: 0px; }
	div.recordrow { width: 80%; }
	div.colb { margin-left: 80px; }
	div.team { width: 90%; }
}