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 {
 background-color: #efefef;
}

.center, td.submit, div.login, div.logo, div.vehicleform div.pictures, div.detailsform div.pictures,
div.spotinstructions, table.spotmarkers td.spotselect, div.frontpageform div.pictures, div.addnew,
div.photoform div.pictures, div.emaillink {
 text-align: center;
}

.left, table.financialslist td.left {
 text-align: left;
}

.right {
 text-align: right;
}

.italic {
 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;
}

table td.title, span.title {
 font-weight: bold;
 white-space: nowrap;
}

.error, div.dberror, div.formerror, div.actionerror, div.inputerror, div.loginerror, div.emailerror, div.noemails {
 color: red;
}

.ok, div.actionresponse {
 color: green;
}

div.dberror, div.actionerror, div.formerror, div.inputerror, div.actionresponse, div.loginerror, div.normal, div.instructions,
div.addnew, div.emailerror, div.noemails {
 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, table.invoiceitems {
 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.login {
 margin-top: 15px;
}

div.login div.instructions {
 margin-top: 15px;
 margin-bottom: 15px;
}

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

div.emptylist, div.agentstring {
 text-align: center;
 margin-top: 10px;
}

table th, table.filelist td.filename, table.filelist td.uploader, table.filelist td.uploaded, table.filelist td.category,
table.cookielist td.user, table.cookielist td.date {
 white-space: nowrap;
}

table.triplist, table.cookielist, table.showtrip, table.tripform, table.showattendance, table.detailsform,
table.vehicleform, table.vehiclelist, table.imageform, table.filelist, table.fileform, table.helpform, table.helplist,
table.spotlist, table.activityreport, table.memberreport, table.frontpagelist, table.frontpageform,
table.submitpictureform, table.financialslist, table.memberform, table.contactlist, table.photolist,
table.emailform, table.trippiclist, table.trippicform {
 margin-top: 10px;
}

table.triplist td, table.cookielist td, table.vehiclelist td, table.filelist td, table.helplist td, table.spotlist td,
table.spotmarkers td, table.frontpagelist td, table.contactlist td, table.photolist td, table.emaillist td,
table.emailview td, table.trippiclist td {
 padding: 5px 10px 5px 10px;
}

table.loginform td, table.tripform td, table.showtrip td, table.showattendance td, table.detailsform td,
table.vehicleform td, table.imageform td, table.fileform td, table.helpform td, table.spotform td,
table.emailform td, table.activityreport td, table.memberreport td, table.frontpageform td,
table.submitpictureform td, table.financialslist td, table.memberform td, table.photoform td,
table.emailform td, table.trippicform td {
 padding: 2px 5px 5px 2px;
}

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

div.quicklinks {
 margin-left: auto;
 margin-right: auto;
 display: table;
}

div.quicklinks div.title {
 margin-top: 20px;
 margin-bottom: 5px;
 font-size: 120%;
 font-weight: bold;
}

div.quicklinks div.link {
 margin-top: 5px;
 padding-left: 10px;
}

div.quicklinks div.link a {
 padding-left: 5px;
 padding-right: 5px;
}

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

table.showtrip th, table.showattendance th, table.detailsform th, table.tripform th, table.vehicleform th, table.fileform th,
table.helpform th, table.spotform th, table.activityreport th, table.memberreport th, table.frontpageform th,
table.submitpictureform th, table.memberform th, table.photoform th, table.emailform th, table.trippicform th {
 text-align: center;
 font-size: 150%;
 font-weight: bold;
}

span.visitor, span.tentative {
 font-style: italic;
}

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

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

span.mobilephone {
 font-weight: bold;
}

span.mobilephone:before {
 content: "- ";
}

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

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

table.showattendance td.attending {
 background-color: lightgreen;
}

div.vehicleform div.pictures img, div.detailsform div.pictures img, div.frontpageform div.pictures img,
div.photoform div.pictures img {
 padding-top: 5px;
 padding-bottom: 5px;
}

div.help {
 margin-left: 25px;
 margin-right: 25px;
 margin-top: 10px;
}

div.helpfooter {
 font-size: 75%;
 margin-top: 25px;
 text-align: center;
}

div.divider {
 clear: both;
 border-collapse: collapse;
 border-bottom-color: #8cacbb;
 border-bottom-style: solid;
 border-bottom-width: 1px;
}

div.spotinstructions {
 margin-top: 25px;
}

div.spotinstructions div {
 margin-top: 10px;
 margin-bottom: 10px;
}

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;
}

div.clubinfo {
 width: 70%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
}

div.clubinfo div {
 text-align: left;
}

div.clubinfo div ul {
 margin-left: 15px;
 margin-bottom: 10px;
}

div.clubinfo div p, table.submitpictureform td p, table.photoform td p {
 margin-bottom: 10px;
}

div.bankdetails, div.clubaddress {
 margin-left: 20px;
 margin-bottom: 10px;
}

table.financialslist td {
 text-align: center;
}

table.contactlist td.relation {
 font-size: 75%;
 text-align: right;
}

div.debug {
 color: purple;
}