html, textarea {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12.8px;
}

body.landing {
    background-image: url("../assets/photography/horse6-1281.jpg");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} 

#ausminreg{
  display: inline-block;
  position: absolute;
  top: 16px;
  z-index: 100;
  font-size: 10px;
  height: 30px;
  left: 74px;
  width: 160px;
  text-align: center;
  font-family: verdana;
  font-weight: bold;
  color: saddlebrown;
}

#maintenance{
  width: 600px;
  margin: 0 auto;
}

.centre {
  text-align: center;
}

h2 {
  padding-bottom: 20px;
}

h3 {
  padding-bottom: 10px;
}

.titchy{
  font-size: small;
  color: dimgray;
}

.x-titchy{
  font-size: x-small;
  color: silver;
}

a{
  color: steelblue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.active {
  color: #333300;
}

.content {
    padding: 10px;
    margin: 60px auto;
    width: 900px;
    border: 1px solid gainsboro;
    min-height: 78vh;
}

.noMinHeight{
  min-height: 0px;
}

.site-admin{
  min-height: auto;
  padding-bottom: 20px;
  width: 600px;
}

.autoWidth{
  width: auto;
}

.gauzy{
  opacity: 0.7;
  background-color: ghostwhite;
}

.shadow {
    -moz-box-shadow:    3px 3px 3px 2px #778;
    -webkit-box-shadow: 3px 3px 3px 2px #778;
    box-shadow:         3px 3px 3px 2px #778;
}

.header {
    position: fixed;
    z-index: 99;
    height: 55px;
    width: 100%;
    background-color: #f1f1f1;
    margin: -60px -8px 8px -8px;
}

.header a
{
  float: left; 
  text-decoration: none;
  display: flex;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 12px; 
  line-height: 18px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: #ffcc66;
  color:#333300;
}

.header a.logo:hover {
  background-color: rgba(255,255,255,0.0);
}

.header-right {
  display: block;
  float: right;
  padding-right: 30px;
}

#image-main{
  float: left;
}

/* Mobile Menu */
#menuToggle
{
  display: none;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: blcok;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}


#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #778;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #778;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

.red{
  color: #CC0A0A;
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -120px 0 0 -270px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 18px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

input[type="submit"]:not(.reset), input[type="button"]:not(.reset) {
	background:#ffcc66;
	height:30px;
	line-height:30px;
  /* width:100%;*/
  width: 48%;
	border:none;
	outline:none;
	cursor:pointer;
	color:#fff;
	font-size:1.2em;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
}

input[type="submit"]:not(.reset).siteContent, input[type="button"]:not(.reset).siteContent{
  width: 25%;
  margin-top:18px;
}

input[type="submit"]:not(.reset).fees, input[type="button"]:not(.reset).fees{
  width: 100%;
}

div #contentForm{
  margin-bottom: 15px;
}


#contentForm .Rtable-cell{
  padding-bottom:10px;
}

#results {
  border: 1px solid gainsboro;
  padding: 20px;
  margin: 0 auto;
  width: 1024px; 
}

#results.W400 {
  width:400px;
}

.parent {
  display: flex;
  align-items: center;
}

table.logs{
  border-collapse: collapse;
}

.logs tr.logs{
  border-top: 2px solid lightblue;
}

.logs th, td{
  padding: 6px 13px;
}

.logs tr.odd {
  background-color: lightyellow;
}

#brand {
  width:150px; 
}

html {
  visibility: visible;
  opacity: 1;
}

/* Mobile Menus */

@media screen and (max-width: 900px) {

  body{
    font-size: 10.8px;
  }

  .optionalBorder{
    border: none;
  }
  
  .content {
    min-height: 0vh;
  }

  #results{
    width: auto;
    border: none;
  }

  body.landing{
    background-image: none;
  }

  h2 {
    font-size: 120%;
    text-align: center;
  }

  .index-wide {
    padding: 10px;
    margin: 60px 0px;
    width: 100%;
    opacity: 0.7;
    border: 1px solid gainsboro;
    background-color: ghostwhite;
    min-height: 78vh;
  }
  .header {
    height: 55px;
  }

  .header a {
    float: none;
    position: relative;
    text-align: left;
    padding: 6px;
    line-height: 8px;
  }

  #menu li{
    font-size:10px;
    padding: 2px;
  }

  .header-right {
    margin-top: -50px;
  }

  #small-image {
    background-image:  url("../assets/photography/horse6-1281.jpg");
    width: 290px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 185px;
    margin: 0 auto;
  }

  #maintenance{
    width: 300px;
    margin: 0 auto;
  }

  a.logo {
    width: 50px;
  }

  a.logo img{
    padding-top: 4px;
  }


  #menu{
    margin: 5px 0 0 -270px;
    padding-top: 25px;
    padding-bottom: 25px;
  }

  #menuToggle {
    margin-top: 10px;
    display: block;
  }

  a.desktop-menu {
      display: none;
  }

  .content{
    background-blend-mode: lighten;
    padding: 15px 10px;
    margin: 55px -8px -8px -8px;
    opacity: 1;
    width: 98%; 
  }

  #paging{
    line-height: 30px;
  }
  
  .footer {
    overflow: hidden;
    background-color: #f1f1f1;
    text-align: center;
    margin: 8px -8px -8px -8px;
  }
  .W400 {
    width: auto;
  }

  .titchy{
    font-size: x-small;
  }
}
/* Has everything max-width: 900px has and... */
@media screen and (max-width: 566px) {

    #results.W400{
      width: 260px;  
    }

    .index-wide {
        margin: 0px;
        opacity: 0.7;
        min-height: 95vh;
    }
    /* Edit forms. */
    .wide {
        border: none;
    }

    #menu li{
      font-size:12px;
      padding: 6px;
    }

    column{
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
    }

    input[type="text"]:not(.reset){
      width: 70%;
    }
    
    input[type="submit"]:not(.reset){
        width: 100%;
        margin-bottom: 10px;
    }

    input[type="submit"]:not(.reset).memberEdit{
      width: 48%;
  }
}