/* http://www.google.com/fonts/specimen/Open+Sans */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

*
{
	/* font-family: Segoe UI, Arial, Helvetica, sans-serif; */
	font-family: 'Open Sans', sans-serif;
}

body
{
  background-color: #6783A4;
  background:url('clouds3.jpg') top left;
  background-attachment:fixed;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-top: env(safe-area-inset-top);
}

/* A bit more control over the underline */
a {
    border-bottom: 0.1em solid currentColor;
    padding-bottom: 0;
    text-decoration: none;
}

div.column
{
  display: grid;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "menu"
                        "content";

   /* background-color: #c5e1f7; */
   background:url('clouds3light.jpg') top left;
   background-attachment:fixed;
   max-width: 60em;
   margin: 0.5em;
   /*display: block;*/

	margin-left: auto;
	margin-right: auto;

}

div.content
{
    padding: 1em;
    margin-top: 0;
    grid-area: content;
}

ul.nav {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
  background-color: #284d7b;
  color: gray;
  grid-area: menu;

}

ul.nav li
{
  float: left;
  color: gray;
  text-align: center;
}

ul.nav li a
{
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: none;
    color: white;
}

ul.nav li a.disabled
{
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: none;
    color: grey;
}

ul.nav li a.disabled:hover
{
    color: grey;
}

ul.nav li a:hover
{
  background-color: #a1bedf;
  color: white;
}

.hamburger{
    background-color: #284d7b;
    width: auto;
    color: white;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    /* The collapsible menu is controlled by Javascript,
        so don't show it normally. */
    display: none;
      grid-area: menu;
}

/* A bit of space between the icon and the menu. */
.hamburger img{
	padding-right: 0.5em;
}

.hamburger a{
    color: white;
    text-decoration: none;
    border-bottom: none;
    font-size: 28px;
    text-align: center;
    vertical-align: baseline;
    display: block;
    margin: auto;
    padding: 0.5em;
}

.hamburger a:link {
    color: white;
    text-decoration: none;
    border-bottom: none;
}

.hamburger a:visited {
    color: white;
    text-decoration: none;
    border-bottom: none;
}

.float_right{
    float: right;
		margin-left: 0.5em;
}

.clear
{
    clear: both;
}