/* MAIN LAYOUT */
body {
  margin: 0;
  background: #fff;
  min-width: 240px;
  -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
}
.ie7 body,
.ie8 body {
  min-width: 750px; /* media queries are not supported in ie7/8 without a polyfill */
}
.main {
  background: #fff;
  padding: 40px 0 60px;
  min-height: 300px;
}
.inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}
@media only screen and (min-width: 650px) {
  .inner {
    padding: 0 30px;
  }
}
.ie6 .inner {
  width: 750px;
}
.no-sidebar .content-container {
  float: left;
  width: 100%; /* makes content container full width when there is no sidebar */
}
.sidebar {
  /* this is the sidebar element */
  margin-top: 0;
}
.no-sidebar .sidebar {
  display: none;
}

.content-container {
  max-width: 650px;
  overflow: hidden;
}

/* BLOG */

.post-summary {
  margin-bottom: 40px;
}
p.blog-post-meta {
  margin-bottom: 41px;
}
.content-container h1 {
  margin-top: 14px;
}

/* HEADER */
.header {
  background: #fff; /* test color */
}
.header .inner {
  padding-top: 45px;
  position: relative;
  min-height: 172px;
}

/* Brand */

.header h1,
h2 {
  font-size: 20px;
  margin: 10px 0;
}
.header h1 {
  color: #999;
  font-family: November Medium, sans-serif;
}
.header h2 {
  color: #999;
}

a.test {
  color: grey;
}
a.test.hh {
  color: blue;
}

.logo {
  position: absolute;
  right: 0;
  top: 34px;
}

.footer .left {
  float: left;
  color: #000;
  display: block;
  margin-bottom: 10px;
  width: 25%;
}
.footer .left1 {
  float: left;
  color: #000;
  display: block;
  margin-bottom: 10px;
  width: 25%;
}
.footer .left2 {
  float: left;
  color: #000;
  display: block;
  margin-bottom: 10px;
  width: 25%;
}
.footer .right {
  float: right;
  color: #000;
  display: block;
  margin-bottom: 10px;
  width: 25%;
}

/* NAVIGATION */

/* Primary navigation */
.header .inner .unit {
  position: relative; /* used to position the main navigation */
}
.header .primary ul {
  position: absolute;
  top: 10px;
  left: 0; /* positions the main navigation */
}
.header .primary li {
  margin: 0;
  position: relative;
}
.header .primary li a {
  color: #000;
  font-size: 20px;
  padding: 6px 1px;
  font-weight: normal;
  display: block;
}
.header .primary li a:hover {
  color: blue;
}
.header .primary li.section a,
.header .primary li.current a {
  color: blue;
}

/* Tablet Navigation */
/* When navigation and logo overlap tablet-nav is initialized */
.tablet-nav .brand p {
  margin-bottom: 0;
}
.tablet-nav .header .inner {
  padding-top: 20px;
}

.tablet-nav .header .primary ul li a {
  /* there is no hover on touch devices so no transition on hover is necessary */
  -moz-transition: none;
  -webkit-transition: none;
  transition: none;
}
.tablet-nav .footer .right {
  float: left;
  width: 100%;
}

/* Secondary navigation */

.header ul li ul.secondary {
  float: left;
  margin: 57px 0;
  padding: 0;
  position: relative;
}

.header ul li ul.secondary li {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
}
.header ul li ul.secondary li a {
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
}

.header .secondary li a {
  color: #000 !important;
}

.header .secondary li.current a {
  color: blue !important;
}

/* Secondary navigation 2-5 levels deep */
.main .secondary ul ul {
  display: none;
}
.secondary ul li.current ul,
.secondary ul li.section ul {
  /* Only show child pages from selected parent */
  display: block;
}
.secondary li.current ul ul {
  display: none;
}
.main .secondary ul ul li a {
  padding-left: 10px;
} /* Indent all sidebar navigation levels*/
.main .secondary ul ul li a .arrow {
  left: 12px;
}
.main .secondary ul ul li a:hover .arrow {
  left: 16px;
}

.main .secondary ul ul ul li a {
  padding-left: 20px;
}
.main .secondary ul ul ul li a .arrow {
  left: 22px;
}
.main .secondary ul ul ul li a:hover .arrow {
  left: 26px;
}

.main .secondary ul ul ul ul li a {
  padding-left: 30px;
}
.main .secondary ul ul ul ul li a .arrow {
  left: 32px;
}
.main .secondary ul ul ul ul li a:hover .arrow {
  left: 36px;
}

.main .secondary ul ul ul ul ul li a {
  padding-left: 40px;
}
.main .secondary ul ul ul ul ul li a .arrow {
  left: 32px;
}
.main .secondary ul ul ul ul ul li a:hover .arrow {
  left: 36px;
}

.main .secondary li a:hover,
.main .secondary li.section a:hover,
.main .secondary li.current a:hover {
  color: blue !important;
}

/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after {
  /* clearfix */
  height: 0;
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
}
.search-bar form input.action,
.header .primary li a,
.footer a {
  /* adds color transition when links/inputs on hover */
  -moz-transition: color 0.2s;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

/* FOOTER */
.footer {
  color: #444;
  background: #fff; /* test color */
  padding: 20px 0;
  line-height: 1.5em;
  font-size: 1em;
}

.footer h2,
.footer h1 {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
.footer a {
  color: blue;
  text-decoration: underline;
}
.footer ul,
.footer li {
  color: black;
}

@media only screen and (min-width: 300px) and (max-width: 650px) {
  .logo {
    top: 0;
    right: 0;
    position: absolute;
    width: 100%;
    background: #fff;
  }

  .typography p {
    font-size: 1em;
    line-height: 1.25em;
  }

  .a {
    margin-top: 275px;
  }

  .header .primary li a {
    line-height: 1.5em;
    display: inline;
  }

  .header .secondary ul {
    width: 90%;
  }
  .header .secondary li a {
    color: #000 !important;
  }

  .header .secondary li.current a {
    color: blue !important;
  }

  .typography .captionImage p {
    max-width: 350px;
    margin: 0;
    padding: 0;
  }
  .typography .captionImage {
    margin: 0;
    padding: 0;
  }

  .footer .left {
    clear: left;
    width: 100%;
  }
  .footer .left1 {
    clear: left;
    width: 100%;
  }
  .footer .left2 {
    clear: left;
    width: 100%;
  }
  .footer .right {
    clear: left;
    width: 100%;
  }
}