/* Flexible images and videos */

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

/* This class should be assigned as an attribute to a div enclosing the video embed, iframe or object */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Viewport 980px or more */
@media screen {

  #mainpage
  {
    width: 960px;
  }

  #menu
  {
    width: 100%;
  }

  #header
  {
    width: 100%;
    height: 125px;
    margin: 0px;
    padding: 0px;
  }

  #content
  {
    width: 71.3541667%; /* 685px ÷ 960px */
    margin: 0px;
    padding: 10px 1.458333% 10px 2.083333%; /* 10px 14px 10px 20px */
  }

  .entry {
    width: 100%; /* = 685px */
    margin: 0px;
    padding: 10px 0;
  }

  .navigation
  {
    width: 100%; /* = 685px */
    margin: 0px;
    padding: 0px;
  }

  .comments {
    width: 100%; /* = 685px */
    margin: 0px;
  }

  #sidebar
  {
    width: 25%; /* 240px ÷ 960px */
    padding: 0px;
    margin: 0px;
    margin-left: -1px; /* for equal length border, see http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/ */
    border-left: 1px solid #666;
  }

  .info {
    width: 87.5%; /* 210px ÷ 240px */;
    padding: 10px 6.25%; /* 10px 15px */
  }

  .rsidebar {
    width: 87.5%; /* 210px ÷ 240px */;
    padding: 10px 6.25%; /* 10px 15px */
  }

}

/* Viewport smaller than 980px */
@media (max-width: 980px) {

  #mainpage {
    width: 100%;
    /*
    margin: 0;
    */
    border: none;
  }

  #menu, #header {
  }

  #content {
    width: 71.3541667%; /* 685px ÷ 960px */
    margin: 0px;
    padding: 10px 1.458333% 10px 2.083333%; /* 10px 14px 10px 20px */
  }

  .entry {
    width: 100%; /* = 685px */
    margin: 0px;
    padding: 1.449% 0;
  }

  .navigation, .comments {
    width: 100%; /* = 685px */
    margin: 0px;
    padding: 0px;
  }

  #sidebar {
    width: 25%; /* 240px ÷ 960px */
    padding: 0px;
    margin: 0px;
    margin-left: -1px; /* for equal length border, see http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/ */
    border-left: 1px solid #666;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  }

  .info, .rsidebar {
    width: 87.5%; /* 210px ÷ 240px */;
    padding: 10px 6.25%; /* 10px 15px */
  }

}

/* Viewport smaller than 480px */
@media (max-width: 480px) {

  html {
    -webkit-text-size-adjust: none;
  }

  #mainpage {
    width: 100%;
    margin: 0;
    border: none;
  }

  #menu {
    background: #393939;
  }

  #header {
    height: 110px;
  }

  #content {
    width: 97.2%;
    border: none;
  }

  .entry, .navigation, .comments {
    width: 100%;
  }

  #sidebar {
    width: 100%;
    border: none;
  }

  .info, .rsidebar {
    width: 90%;
    padding: 10px 2%;
  }

  #menu-top-menu a {
    font-size: 11px;
    padding-left: 10px;
    padding-right: 10px;
  }

  #footerbox {
    background: #393939;
  }

  #footerbox p {
    font-size: 11px;
    line-height: 1.2;
  }

  #header h1 {
    font-size: 40px;
  }

  #header h2 {
    font-size: 16px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 16px;
  }

  h4 {
    font-size: 14px;
  }

}