html {
 height: 100%; /* Required for Google Maps to work */
}

body {
 font-family: roboto, sans-serif;
 font-size: 9pt;
 color: black;
 margin: 0px;
 padding: 0px;
 text-align: left;
 height: 100%; /* Required for Google Maps to work */
}

div, ul, li, h1, h2, h3, h4, h5, h6, form, p, table, tr, th, td, iframe {
 margin: 0px;
 padding: 0px;
 vertical-align: top;
 font-size: 9pt;
}

img {
 border: none;
}

input, input.submit, select {
 font-size: 9pt;
}

a {
 text-decoration: none;
}

.alternate, div.eventinfo a:hover, table.trips td.tools {
 background-color: #efefef;
}

.center, div.logo, table.spotmarkers td.spotselect {
 text-align: center;
}

.left, div.convoytext h1 {
 text-align: left;
}

.right {
 text-align: right;
}

.italic, span.visitor, span.tentative, table.trips td.tools div.title {
 font-style: italic;
}

h1 {
 font-size: 140%;
 text-align: center;
 margin-top: 10px;
 margin-bottom: 5px;
}

table {
 margin-left: auto;
 margin-right: auto;
 border-collapse: collapse;
}

table th {
 padding: 5px 10px 5px 10px;
}

table tr {
 vertical-align: top;
}

div.logo {
 margin-bottom: 5px;
}

table td.title, span.title, table.trips td.monthlabel, span.tripname, table.trips td.tools div.title {
 font-weight: bold;
 white-space: nowrap;
}

.error, div.dberror, div.spoterror {
 color: red;
}

.ok {
 color: green;
}

div.dberror, div.spoterror {
 text-align: center;
 margin-top: 15px;
}

div.dberror {
 font-size: 150%;
}

div.menubackground {
 width: 100%;
 background-color: #efefef;
}

div.menu { /* Variable width - set inline using code */
 margin-left: auto;
 margin-right: auto;
}

ul.menu, ul.menu ul {
 list-style: none;
 text-align: left;
}

ul.menu {
 margin-left: auto;
 margin-right: auto;
 border: 0px solid black; /* border-color for outside top nav */
 background-color: #efefef; /* bg colour for top nav  */
 font-size: 10pt; /* txt size for top nav  */
 display: block !important;
}

ul.menu:before, ul.menu:after {
 content: "";
 display: table;
}

ul.menu:after {
 clear: both;
}

ul.menu li {
 float: left;
 position: relative;
}

ul.menu a {
 float: left;
 padding: 5px 20px;
 color: black; /* txt colour in top nav hover */
 font-weight: bold;
 text-decoration: none;
}

ul.menu a.selected {
 background-color: rgba(255, 255, 255, 0.506);
}

ul.menu li:hover > a {
 color: black; /* txt colour for hover top nav hover */
 background-color: #e3e3e3; /* bg colour for top nav hover */
}

ul.menu ul {
 margin: 20px 0px 0px 0px;
 opacity: 0;
 visibility: hidden;
 position: absolute;
 top: 24px;
 left: 0px;
 z-index: 1;
 border: 1px solid #d4d8d7; /* border-color in nav */
 background-color: #e3e3e3; /* bg colour for top nav drop */
 -moz-border-radius: 0px;
 -webkit-border-radius: 0px;
 border-radius: 0px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}

ul.menu li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0px;
}

ul.menu ul ul {
 top: 0px;
 left: 150px;
 margin: 0px 0px 0px 20px;
 -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
 -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
 box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
}

ul.menu ul li {
 float: none;
 display: block;
 border: none;
}

ul.menu ul li:last-child {
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}

ul.menu ul a {
 padding: 5px 20px;
 width: 120px;
 display: block;
 white-space: nowrap;
 float: none;
}

ul.menu ul a:hover {
 background-color: #eeeeee;
}

ul.menu ul li:last-child > a {
 -moz-border-radius: 0px 0px 3px 3px;
 -webkit-border-radius: 0px 0px 3px 3px;
 border-radius: 0px 0px 3px 3px;
}

ul.no-transition { /* for iPads etc */
 transition: none;
 opacity: 1;
 visibility: visible;
 display: none;
}

ul.menu li:hover > ul.no-transition { /* for iPads etc */
 display: block;
}

div.page {
 width: 1020px;
 margin-left: auto;
 margin-right: auto;
}

div.spotpage {
 width: 100%; /* Required for Google Maps to work */
 height: 100%; /* Required for Google Maps to work */
}

table th, table.trips td.tools, table.notices td.meetinglink {
 white-space: nowrap;
}

table.frontpagepics, div.noticestitle, div.eventinfo, div.newsitem, div.convoyproceduretitle,
div.convoytext h2, table.trips, div.about, table.memberdetails, table.vehicledetails,
table.committeedetails, table.trackmarshalls, table.honourboard {
 margin-top: 10px;
}

table.frontpagepics td, table.notices td, table.spotmarkers td {
 padding: 5px 10px 5px 10px;
}

table.trips td, table.members td, table.memberdetails td, table.vehicledetails td, table.committeedetails td,
table.trackmarshalls td, table.honourboard td {
 padding: 2px 5px 5px 2px;
}

table.exampletable th, div.noticestitle, div.convoyproceduretitle {
 text-align: center;
 font-size: 150%;
 font-weight: bold;
}

span.visitor:before {
 content: "(";
}

span.visitor:after {
 content: ")";
}

span.tentative:before {
 content: "[";
}

span.tentative:after {
 content: "]";
}

div.pasttrips, div.futuretrips {
 text-align: center;
 margin-top: 10px;
 padding: 4px 4px 4px 4px;
 background-color: #efefef;
}

div.pasttrips {
 float: left;
}

div.futuretrips {
 float: right;
}

div.pasttrips div.heading, div.futuretrips div.heading {
 font-weight: bold;
 background-color: #e3e3e3;
}

div.eventinfo a:hover {
 background-color: #e3e3e3;
}

div.news, div.frontpagepics {
 text-align: center;
 margin: 10px 10px 10px 10px;
}

div.news hr {
 height: 0px;
 width: 200px;
 margin-top: 10px;
 margin-bottom: 10px;
}

table.notices td.meetingagenda {
 padding-bottom: 15px;
}

div.convoytext, table.trips, div.about, div.ethics, div.join, div.contact, table.members {
 margin-bottom: 10px;
}

div.convoytext li, div.convoytext h2.indent1, table.honourboard td li {
 margin-left: 15px;
}

div.convoytext li.indent1 {
 margin-left: 30px;
}

div.convoytext li.indent2 {
 margin-left: 45px;
}

table.trips td.monthlabel {
 font-size: 120%;
 background-color: #efefef;
}

span.tripname {
 color: blue;
}

table.trips td.label {
 padding-left: 20px;
 white-space: nowrap;
}

div.about, div.ethics, div.join, div.contact, div.honourboard {
 margin-left: 10%;
 margin-right: 10%;
 text-align: justify;
}

div.about p, div.join p, div.contact p, table.trips td.tools div.title,
table.honourboard {
 margin-bottom: 10px;
}

div.address {
 width: 15%;
 margin-left: auto;
 margin-right: auto;
}

table.honourboard td li {
 list-style: none;
 padding-bottom: 3px;
}

table.frontpagepics td.facebooklink {
 padding-top: 15px;
}

div.spottitle {
 margin-top: 10px;
 text-align: center;
 font-weight: bold;
}

div.spotmap {
 float: right;
 margin-right: 5px;
 margin-left: auto;
 margin-top: 20px;
 width: 60%;
 height: 60%;
}

div.spotmarkers {
 float: left;
 width: 39%;
 margin-left: 0px;
 margin-right: auto;
}