/****************
*** DEFAULTS
*****************/
* { margin: 0px; padding: 0px; }

html
    {
    height: 100%;
    box-sizing: border-box;
    }

body
    {
    position: relative;
    margin: 0;
    padding-bottom: 6 rem;
    min-height: 100%;
    }
    
/* HEADINGS DEFAULT */
h1, h2, h3, h4, h5, h6 
    {
    color: #444;
    }
    
a
    {
    text-decoration: none;
    }

ul, ol
    {
    margin-left: 40px;
    }
    
hr  {
    margin: 10px 0px;
    opacity: .25;
    }

/* FORM DEFAULTS */
form h2
    {
    margin: 25px auto;
    text-align: center;
    }
    
form input:focus
    {
    outline: none;
    }

/* Media selection */
@media screen and (min-width: 701px)
    {
    .navbar
        {
        color: black;
        background-color: white;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        }
    .hamburger
        {
        display: none;
        }
    }

@media screen and (max-width: 700px)
    {
    .navbar
        {
        display: none;;
        }
    .hamburger
        {
        display: grid;
        font-family: Arial, Helvetica, sans-serif;
        grid-template-columns: 20% auto;
        }
    }

/* Navbar styles */
.navbar a
    {
    float: left;
    font-size: 16px;
    text-align: center;
    color: black;
    background-color: white;
    padding: 14px 16px;
    text-decoration: none;
    }

.navbar .login
    {
    float: right;
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 16px;
    }

.navbar .logout
    {
    float: right;
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 16px;
    }

.dropdown
    {
    float: left;
    overflow: hidden;
    }

.dropdown .dropbtn
    {
    cursor: pointer;
    font-size: 16px;  
    border: none;
    background-color: white;
    outline: none;
    padding: 14px 16px;
    font-family: inherit;
    margin: 0;
    }

.dropdown .dropsubbtn
    {
    cursor: pointer;
    font-size: 16px;  
    border: none;
    background-color: white;
    outline: none;
    padding: 14px 16px;
    font-family: inherit;
    margin: 0;
    }

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus .dropsubbtn, .dropsubbtn:focus
    {
    color: black;
    background-color: white;
    }

.dropdown-content
    {
    display: none;
    position: absolute;
    min-width: 160px;
    max-height: 300px;
    color: black;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow-y: auto;
    grid-template-rows: auto;
    }

.dropdown-content a
    {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    color: black;
    background-color: white;
    display: block;
    text-align: left;
    }

.dropdown-content a:hover
    {
    color: black;
    background-color: white;;
    }
 
.dropdown-subcontent
    {
    display: none;
    position: absolute;
    min-width: 160px;
    max-height: 300px;
    color: black;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    overflow-y: auto;
    float: right;
    grid-template-rows: auto;
    }

.dropdown-subcontent a
    {
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    color: black;
    background-color: white;
    display: block;
    text-align: left;
    }

.dropdown-subcontent a:hover
    {
    color: black;
    background-color: white;;
    }

.showsubmenu
    {
    float: right;
    padding-top: 14px;
    padding-bottom: 16px;
    }

/* Han#mburger Menu */
.hamburger .hbicon
    {
    float: left;
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 16px;
    }
.hamburger .hblogin
    {
    float: right;
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 16px;
    }
.hamburger .hblogout
    {
    float: right;
    display: inline-block;
    padding-top: 14px;
    padding-bottom: 16px;
    }
.hbmenucontainer                                                                                
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    background-color: white;
    width: 200px;
    position: absolute;
    z-index: 100;
    max-height: 350px; 
    overflow: auto;
    display: none;
    }
.hbitemnomenu
    {
    margin-bottom: 10px;
    }
.hbitemnomenu a
    {
    color: black;
    background-color: white;
    text-decoration: none;
    }

.hbitemnomenu a:hover
    {
    color: black;
    background-color: white;
    text-decoration: none;
    cursor: pointer;
    }

.hbtopmenucontainer
    {
    display: none;
    margin-top: 10px;
    }

.hbtopmenuitem
    {
    cursor: pointer;
    margin-bottom: 10px;
    }

.hbtopmenuicon
    {
    float: right;
    }

.hbtopmenulink
    {
    margin-left: 10px;
    margin-bottom: 10px;
    }

.hbtopmenulink a
    {
    color: black;
    background-color: white;
    text-decoration: none;
    }

.hbtopmenulink a:hover
    {
    color: black;
    background-color: white;
    text-decoration: none;
    cursor: pointer;
    }

.hbsubmenucontainer
    {
    display: none;
    margin-top: 10px;
    }

.hbsubmenuitem
    {
    cursor: pointer;
    margin-left: 10px;
    margin-bottom: 10px;
    }

.hbsubmenuicon
    {
    float: right;
    }

.hbsubmenulink
    {
    margin-left: 20px;
    margin-bottom: 10px;
    }

.hbsubmenulink a
    {
    color: black;
    background-color: white;
    text-decoration: none;
    }

.hbsubmenulink a:hover
    {
    color: black;
    background-color: white;
    text-decoration: none;
    cursor: pointer;
    }

.hblogon
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    margin-top: 10px;
    }

.loginname
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    float: right;
    margin-right: 5px;
    }

.login
    {
    float: right;
    padding-top: 14px;
    padding-bottom: 16px;
    }

 .closeicon
    {
    float: right;
    cursor: pointer;
    }

.hiddendiv
    {
    background-color: #FEE2BC;
    display: none;
    position: relative;
    border-style: solid;
    border-width: thin;
    }

.btn
    {
    color: white;
    background: #4E6166;
    text-align: center;
    border: none;
    border-radius: 5px;
    display: block;
    letter-spacing: .1em;
    margin: 10px 0px;
    padding: 13px 20px;
    text-decoration: none;
    }

/* Field types */
.fielderror
    {
    color: red;
    }

.fieldwarning
    {
    color: orange;
    vertical-align: text-top;
    }

.mandatoryfield
    {
    background-color: bisque
    }

.optionalfield
    {
    background-color: white
    }
    
.errormessage
    {
    color: #FF0000;
    font-size: x-large;
    font-weight: bold;
    }

/* Pub types */
.normalpub
    {
    color: #000000;
    font-size: small;
    font-weight: normal;
    }

.localepub
    {
    color: #16A543;
    font-size: small;
    font-weight: normal;
    }

.closedpub
    {
    color: #B66923;
    font-size: small;
    font-weight: normal;
    }

.kegpub
    {
    color: #FF0000;
    font-size: small;
    font-weight: normal;
    }

.unknownpub
    {
    color: #006699;
    font-size: small;
    font-weight: normal;
    }

.lostpub
    {
    color: #FF0000;
    font-size: small;
    font-weight: normal;
    }

/* Help */
.help
    {
    border: 1px solid black;
    font-size: small;
    background-color: #FEE2BC;
    margin-left: 10px;;
    display: none;
    }
    
.closeicon
    {
    margin: 0px auto;
    float: right;
    }

/* text styles */
.centredtext
    {
    text-align: center;
    }

.centredtextspaced
    {
    margin-top: 5px;
    text-align: center;
    }

.largecentredtext
    {
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
    }

.smallcentredtext
    {
    text-align: center;
    font-size: small;
    }

.smalltext
    {
    font-size: small;
    }

.smallnormaltext
    {
    font-size: small;
    font-weight: normal;        
    }

.autoscroll
    {width:100%; 
    height:600px; 
    overflow:auto;
    }

.largeboldtext
    {
    font-size: large;
    font-weight: bold;
    }

.largeboldtextspaced
    {
    font-size: large;
    font-weight: bold;
    margin-bottom: 10px;
    }

.largetext
    {
    font-size: large;
    }

.boldtext
    {
    font-weight: bold;
    }

.boldcentredtext
    {
    text-align: center;
    font-weight: bold;
    }

.boldalignedtext
    {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    }

/* BANNER: Welcome message; */
.bannercontainer
    {
    display: grid;
    max-width: 2000px;
    grid-template-columns: 85% 15%;
    }

.bannercontainer .caption
    {
    text-align: center;
    grid-row: 1;
    grid-column: 1;    
    }

.bannercontainer .caption h1
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3em;
    color: blue;
    text-align: center;
    }

.bannercontainer .logo
    {
    grid-row: 1;
    grid-column: 2;
    }

.bannercontainer .logo .camralogo
    {
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

.bannercontainer .banner
    {
    margin-left: 5px;;
    margin-right: 5px;;
    grid-row: 2;
    grid-column: 1 / span 2;
    }

.bannercontainer .banner .image
    {
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

/* Page content */
.container
    {
    width: 100%;
    margin: 0px auto;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    }
    
.content
    {
    position: relative;
    margin: 5px auto;
    border-radius: 5px;
    height:600px; 
    overflow:auto;
    }

.content p
    {
    margin-left: 10px;;
    }

.pagecontent
    {
    position: absolute;
    }

.fixedcontent
    {
    position: relative;
    margin: 5px auto;
    border-radius: 5px;
    }

.fixedcontent .buttons
    {
    margin-top: 20px;
    text-align: center;
    font-size: larger;
    }

.fixedcontent .empty
    {
    margin-top: 20px;
    text-align: center;
    font-size: larger;
    }

.mincontent
    {
    margin: 5px auto;
    border-radius: 5px;
    overflow:auto;
    }

.content:after
    {
    content: "";
    display: block;
    clear: both;
    }
.content .content-title
    {
    margin: 10px 0px;
    color: #374447;
    text-align: center;
    }
.fixedcontent .content-title
    {
    margin: 10px 0px;
    color: #374447;
    text-align: center;
    }
.content .home
    {
    font-size: 1.1em;    
    margin: 9px;
    min-height: 50px;
    border: 1px solid #b3b3b3;
    position: relative;
    }

.content .home-no-border
    {
    font-size: 1.1em;    
    margin: 9px;
    min-height: 50px;
    position: relative;
    }

.content .home p
    {
    margin-bottom: 10px;;
    }

.content .home .help
    {
    border: 1px solid black;
    font-size: small;
    background-color: #FEE2BC;
    display: none;
    }
    
.content .home .help .closeicon
    {
    margin: 0px auto;
    float: right;
    }

.content .map
    {
    float:right;
    margin-left: 5px;
    vertical-align: top;
    width: 400px;
    height: 390px;
    }

.content .header .caption
    {
    font-size: small;
    font-weight: normal;
    }

.content .header .icon
    {
    vertical-align: middle;
    }

/* FOOTER */
.footer
    {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    color: white;
    background-color: #73707D;
    text-align: center;
    width: 80%;
    margin: 20px auto 0px;
    padding: 20px 0px;
    }

.footer .icon
    {
    float:right;
    margin-left:10px;
    vertical-align: top;
    }

.footer .privacy
    {
    text-align: left;
    vertical-align: middle;
    }