body {
      margin:0;
      padding:0;
      font-family: "Lucida Sans Unicode",
      "Lucida Grande", sans-serif;
  }

#container {
      width:1000px;
      margin:auto;
  }

#logo img {
    padding:4px;
  }

nav {
      background-color:#325EB2;
      text-align:center;
  }

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

nav li {
      margin:0;
      padding:0;
      list-style:none;
      display:inline;
  }

nav a {
      color:#fff;
      text-decoration:none;
      display:inline-block;
      margin:0;
      padding:4px 8px;
      font-weight:bold;
  }

nav a:hover,nav a:focus,
      nav a:active {
      background-color:#213091;
  }

img.floatleft {
      float:left;
      margin:0 5px 5px 0;
  }

main {
      padding:10px 30px;
      float:left;
      width:500px;
      padding:0 10px 10px 0;
      box-sizing:border-box;
  }

#mainC1 {
      padding:10px 30px;
      float:left;
      width:1000px;
      padding:0 10px 10px 0;
      box-sizing:border-box;
}

#topics-list {
      float:right;
      width:500px;
      box-sizing:border-box;
      padding:0 0 10px;
  }

footer {
      clear:both;
      margin:20px 0 50px 0;
      text-align:center;
      background-color:#eee;
      padding:3px;
  }

nav li.tablet,nav li.phone {
    display:none;
  }

@media (max-width: 1000px) {
  nav li.desktop,nav li.phone {
   display:none;
  }
  nav li.tablet {
    display:inline;
  }
  #container {
    width:100%;
  }
  img.floatleft {
      display:block;
      padding:5px;
  }

  main,#topics-list,#mainC1 {
      float:none;
      width:auto;
      padding:0 10px;
  }
  img {
      max-width:100%;
      height:auto;
  }
}

@media (max-width: 700px) {
  nav li.desktop, nav li.tablet {
    display:none;
  }
  nav li.phone {
    display:block;
  }
  nav li {
    text-align:left;
  }
  nav a {
      width:100%;
      display:block;
      font-size:18px;
  }
  img.floatleft {
      margin:auto;
      float:none;
  }

}