/******************************************  
 CUSTOM STYLESHEET
*******************************************/

/*
* You can place your custom CSS statements in this file, after this message.
* It is better to write everything custom here
* because this file won't be replaced during updates.
* 
* Simply copy an existing style from style.css to this file, 
* and modify it to your liking.
*/

@media (max-width: 700px) {
  #container div.wrapper {
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
  }

  #header {
    margin-top: 10px;
    padding-top: 10px;
  }

  #logo {
    float: none;
    text-align: center;
  }

  #logo img {
    height: auto;
    max-width: 100%;
  }

  #menu {
    margin-top: 12px;
  }

  #nav {
    display: block;
    float: none;
    margin-top: 0;
    text-align: center;
  }

  #nav li {
    display: inline-block;
    float: none;
    font-size: 14px;
    padding: 6px 8px;
  }

  #content h1,
  #content h1 a {
    font-size: 26px;
  }

  #container .postcontent h3 {
    font-size: 21px;
    line-height: 1.3;
  }

  #content ul.posts li,
  #content ul.posts li.last {
    box-sizing: border-box;
    display: block;
    float: none;
    margin-right: 0;
    width: 100%;
  }

  #content ul.posts img,
  .postcontent img {
    height: auto;
    max-width: 100%;
  }

  .postcontent table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}