.wrapper{
}

@media only screen and (orientation: landscape){
  .wrapper{
    margin: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
           ". header"
           "nav main"
           "footer main"
           ". main";
    }
    nav{
      border-radius: 20px;
      font-size:2em;
    }
    footer{
      border-radius: 20px;
    }
    article{
      display: grid;
      grid-gap: 0 10px;
      grid-template-columns: 3fr 1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas:
             "aheader adate"
             "article_content aimg"
             "article_content .";
    }
}

header{
  grid-area: header;
  margin-right: 0;
}

nav{
  grid-area: nav;
}

main{
  grid-area: main;
}

footer{
  grid-area: footer;
}

body{
  margin: 0;
  background-image: url("img/tumblr_static_tumblr-barn.jpg");
  background-attachment: fixed;
  color: rgb(200,200,200);
}

nav {
  background-color: rgb(51,51,51);
  margin: 0 0 10px 0;
  font-family: Arial, sans-serif;
}

nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li{
  margin: 0;
}

nav li a{
  transition: background-color 1s;
  padding-left:10px;
  padding-right:10px;
}

nav li a:hover{
  background-color: rgb(80,80,80);
}

nav a{
  text-decoration: none;
  color: rgb(200,200,200);
}

nav img{
  height: inherit;
  height: 40px;
}

header{
  background-color: rgb(51,51,51);
  margin: 0 0 0 0;
  font-family: Arial, sans-serif;
}

header h1{
  margin:0;
  padding:0;
}

main{
}

article{
  background-color: rgba(20,20,20,0.8);
  color: rgb(220,220,220);
  font-family: Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0 5px 0 5px;
}

article h1{
  grid-area: aheader;
  margin:0;
}

article p.date{
  grid-area: adate;
}

article p{
  grid-area: acontent;
  margin-top: 0.5em;
}

article div.images{
  grid-area: aimg;
}

article div.images img{
  width:100%;
}

article div.content{
    grid-area: article_content;
}

article a{
  color: rgb(255,150,0);
}

footer{
  background-color: rgb(51,51,51);
  margin: 0 0 0 0;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 10px;
}

footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li{
  color: rgb(200,200,200);
}

footer a{
  color: rgb(255,150,0);
}

table{
	width: 100%;
}

table, tr, td, th {
	border-style: solid;
	border-width: 2px;
	border-color:rgb(200,200,200);
	border-collapse: collapse;
}

table caption{
	font-weight: bold;

}