body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  color: black;
  background-color: #FFF;
  line-height: 1.5em;
}
header {
  min-height: 170px;
  background-color: #000;
}
header img {
  float: left;
  padding: 10px 20px 10px 0;
}
header h1 {
  margin-top: 0;
  font-size: 42px;
  padding-top: 55px;
  line-height: 1.15em;
  color: #FFF;
}
header div {
  width: 1000px;
  margin: 0 auto;
}
div#content {
  max-width: 1000px;
  margin: 0 auto;
}
main {
  /* this is necessary for main to grow with height of floated content */
  overflow: hidden;
}
div#block2 {
	clear: left;
	padding-top: 1em;
}
aside {
  display: block;
  overflow: auto;
}
section#overview ul li {
  padding-bottom: 1em;
}
aside {
  float: right;
  width: 40%;
  margin-top: 0.75em;
}
aside h2 {
  font-size: 1.2em;
  color: #666;
}
section {
  margin: 2em 0 0;
}
section#tips {
	margin-top: 0;
}
section#tips h2 {
	margin-top: 0;
}
h2, h3 {
  font-weight: bold;
  color: #000;
}
h2 {
  font-size: 1.6em;
}
h3 {
  font-size: 1.3em;
  color: #C00;
}
ul#social li {
  list-style-type: none;
  float: left;
  padding: 2px;
}
ul#social li a img {
	border: none;
}
footer {
  clear: left;
  border-top: 3px solid #340449;
  padding: 1em 0;
  margin-bottom: 20px;
}
footer img.doit-logo {
  float: left;
  padding-right: 15px;
}
footer a.cc-logo {
  float: right;
  padding-left: 12px;
}
footer p {
  margin-top: 0;
  padding-right: 100px;
}
a {
  color: #202056;
  text-decoration: underline;
}
a:hover, a:focus, a:active {
  color: #FFF;
  background-color: #202056;
  text-decoration: none;
}

/* Responsive Structure

  Source for media queries:
  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

@media (max-width: 1000px) {
	/* 1000px is the default width for content */
  header div, div#content {
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 1000px) {
}
@media (max-width: 900px) {
  /* the point below which a floating sidebar creates crowding */
  main {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  aside {
    float: none;
    width: 100%;
  }
  aside iframe {
    min-width: 95% !important;
  }
}
@media (max-width: 650px) {
  /* the point below which the H1 wraps onto 3 lines */
  header {
    text-align: center;
  }
  header img {
    float: none;
    padding: 10px 0;
  }
  header h1 {
    padding-top: 0;
    padding-bottom: 0.5em;
  }
}
@media (max-width: 500px) {
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}

/* iPhone 4 and higher ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  header div, div#content {
    width: 100%;
    margin: 0 auto;
  }
  header {
    text-align: center;
  }
  header img {
    float: none;
    padding: 10px 0;
  }
  header h1 {
    padding-top: 0;
    padding-bottom: 0.5em;
  }
  main, footer {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  aside {
    float: none;
    width: 98%;
  }
  aside iframe {
    /* Default height is 2000px; IMHO, too much content for small screens */
    /* height: 1000px; */
    min-width: 100% !important;
  }
}

/* =Print
----------------------------------------------- */

@media print {
  /* Why are you printing? */

}