/******************************************************************
GENERAL LAYOUT STYLES
******************************************************************/

body { color: #000; background: #fefefe; font-family:courier; line-height:normal; }



/******************************************************************
GRID STYLES
******************************************************************/

/* 960 Grid System (http://960.gs/ ) */

#container, .wrap {
  width: 950px;
  margin: 0 auto;
  padding: 22px 5px;
}

div#main { width: 625px; }
.col300 { width: 300px; }
.col650 { width: 650px; }
.padLeft { padding-left: 25px;}
/* To Use Another Grid System, simply visit:
http://themble.com/support/bones-grid/
There, you can check out how to replace this grid with other like:
960, Blueprint, and any other custom ones.
*/

/******************************************************************
COMMON & REUSABLE STYLES
******************************************************************/

/* forms */
.forms ul {
  list-style-type: none;
}
.forms label {
  float:left;
  width:107px;
  text-align:right;
  margin-right:15px;
}
.forms ul li {
  margin-bottom:10px;
}
.forms input[type=submit] {
  margin-left:122px;
}


/* floats */
.left { float: left; }
.right { float: right; }

/* text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* highlighting search term on search page */
mark, .search-term { background: #EBE16F; }

/* alerts & notices */
.help, .info, .error, .success { margin: 10px; padding: 5px 18px; border: 1px solid #cecece; }
.help { border-color: #E0C618; background: #EBE16F; }
.info { border-color: #92cae4; background: #d5edf8; }
.error { border-color: #fbc2c4; background: #fbe3e4; }
.success { border-color: #c6d880; background: #e6efc2; }


/******************************************************************
LINK STYLES
******************************************************************/

a, a:visited { color: #000; }
a:hover, a:focus { color: #000; }
a:active {} /* on click */
a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */ }

/******************************************************************
HEADLINES & TITLES
******************************************************************/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: underline; }
h1, .h1 { font-size: 22px; margin-top:0px; padding-top:0px; margin-bottom:16px;}
h2, .h2 { font-size: 16px;  font-weight:bold; margin-top:0px; margin-bottom:8px; }
h4, .h4 { font-size: 1.1em; font-weight: 700; }
h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; }


/******************************************************************
HEADER SYTLES
******************************************************************/

header[role=banner] { }
  #logo {
    float:left;
    width:82px;
    margin: 0 275px 5px 0;
    padding-top: 9px; }

  #logo.shirts {
    padding-top:0px;
  }

/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/

nav[role=header_nav] {margin-left:30px; float:right;}
nav[role=header_nav] .menu ul li {float:right; display:inline; margin-left:13px; margin-bottom:12px;}
nav[role=header_nav] .menu ul li a {text-transform:uppercase; font-size:16px; margin-left:10px;}
nav[role=footer] .menu ul li {text-transform:uppercase;}

nav[role=navigation] {width:100%; margin-bottom:25px;}

  nav[role=navigation] .menu {}
  nav[role=navigation] .menu ul {
  }
    nav[role=navigation] .menu ul li {
      float: left;
    }
      nav[role=navigation] .menu ul li a {
        text-transform:uppercase;
        font-size:16px;
        margin-right:17px;
      }

        nav[role=navigation] .menu ul li:first-child a {}

    nav[role=navigation] .menu ul li.current-menu-item a,
    nav[role=navigation] .menu ul li.current_page_item a,
    nav[role=navigation] .menu ul li.current-page-ancestor a {}

    /* sub menus */
    nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul {
      background: #4598bb;
      position: absolute;
      left: -9999em;
      z-index: 9999;
      width: 200px;
    }
      nav[role=navigation] .menu ul li ul li ul {
        margin-left: 200px;
        top: auto;
        margin-top: -30px;
      }
      nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul {
        left: auto;
      }
      nav[role=navigation] .menu ul li ul li a {
        width: 160px;
      }

      nav[role=navigation] .menu ul li ul li a {}
        nav[role=navigation] .menu ul li ul li a:hover {}
      nav[role=navigation] .menu ul li ul li:last-child a {}

        nav[role=navigation] .menu ul li ul li ul.sub-menu { }
          nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { }


/******************************************************************
POSTS & CONTENT STYLES
******************************************************************/

#content { margin-top:21px; line-height:22px; font-size:16px;}
  #main {}
    #main header {margin-bottom:12px; }
    .hentry { padding: 0 0 10px 0; }


#sidebar1 {margin-top:5px;}


div.mailing-list { line-height:10px; text-transform:uppercase; font-size:15px;}
input[type=email] { margin-top:10px; width:156px; height:26px; border: solid 1px;}
input::-webkit-input-placeholder {font-size:16px; font-family:courier; text-transform:uppercase; padding-left:7px; font-weight:normal;}
input:-moz-placeholder {font-size:16px; font-family:courier; text-transform:uppercase; padding-left:7px; font-weight:normal;}



div.ad-banner { margin-bottom:20px; width:768px; display:block; height:90px;}
div.backissues {margin-top:25px;}
.backissues div.backissue {width:300px; margin-bottom:25px;}
div.backissue.first { margin-right:24px; }
#sidebar_ads img {margin-bottom: 20px;}

.article h1 { margin-bottom:5px;}
.article span.subhed {display:block; margin-bottom:10px; font-weight:bold;}
.article div.article-credits {margin-bottom:10px;}
.article { line-height:1.4em;}

.article .caption { font-size:14px; display:block;}
div.pagination {margin-bottom:15px;}
.pagination a {font-weight:bold;}
.pagination.shirts a {text-transform: uppercase; float:left; margin-right:20px;}
div.labels {margin-bottom:20px;}
.labels h1 {margin-bottom:20px;}
.other-labels h2 {margin-bottom:5px;}

.issue-index h1 {margin-bottom:20px;}
.issue-index h2 {margin-bottom:20px;}
.label-group { font-size:18px; }
div.label-group { margin-bottom:20px;}
.issue-index h2 {margin-bottom:0px;}

h1#contributorHeading {margin-bottom:32px;}
div.contributor { margin-left: 24px; margin-bottom:22px; font-size:14px; text-transform:uppercase;
  line-height: 18px;}

.contributor a#contributorName {display:block; width:138px; line-height:17px; margin-top:1px;}
div.authorImage { margin-right:25px; margin-top:6px;}
div.authorRow {float:left; height:235px;}
div.authorRow div:first-child {margin-left:0px;}
div.profile { padding-top:13px; margin-bottom:15px;}
div.contributions {margin-bottom:25px;}

div.interviewImage {
  background-size: cover;
  background-position: center center;
  display: block;
  height: 184px;
  width: 138px;
}

.staff div.top {margin-bottom:25px;}
.staff div.left {width:300px;}
.staff div.left.first {margin-right:25px;}

span.smiley {display:inline-block; width:16px; height:16px; background-image:url('../img/favicon.ico');
  position:relative; top:2px;}
/******************************************************************
FOOTER STYLES
******************************************************************/

footer[role=contentinfo] { padding: 1.1em 0 3.3em;}

  /* footer menu */
  footer[role=contentinfo] nav { font-size:15px; float: left; margin: 1em 0; text-transform:uppercase;}
  .footer-links { float:left;}
    .footer-links ul { margin-top: 0; }
      .footer-links ul li { list-style-type: none; float: left; font-size: 0.9em; }
        .footer-links ul li a { margin-right: 15px; text-decoration: underline; }
          .footer-links ul li:last-child a { margin-right: 0; }
      .footer-links ul li a:hover, .nav ul li.current-menu-item a, .nav ul li.current_page_item a {}
      .footer-links ul li ul.sub-menu { display: none; } /* you shouldn't have that many links in the footer anyway so it's set to display none ;P */

  .attribution { margin: 1em 0; float: right; color: #999; font-size: 0.9em; }
  .copyright { margin-left:15px; display:block; float:left; font-size:14px; }

.shirt h1 {
  text-decoration:none;
  font-weight:bold;
  text-transform:uppercase;
  font-size:18px;
  margin-bottom:2px;
}

.shirt.single h1 a { text-decoration:none;}
.shirt p.meta {margin-top:0px; text-transform:uppercase; font-size:14px;}

div.shirt {margin-bottom:25px;}

div.shirtRow div:first-child {margin-left:0px;}
div.shirtRow {margin-bottom:24px; float:left; height:204px;}
.shirtRow a.name {
  text-transform: uppercase;
  font-size:14px;
  display: block;
  width: 138px;
  line-height: 17px;
  margin-top: 1px;
}
div.shirtThumbnail {width:139px; margin-left:23px; float:left; text-align: center;}

.results {
  text-transform:uppercase;
}

.results h3 {
  margin-bottom:0;
}

.results li {
  margin-left: 0;
  list-style: none;
  margin-bottom:25px;
}

input[type=search] {
  width: 156px;
  height: 26px;
  border: solid 1px;
}
/******************************************************************
MEDIA QUERIES & DEVICE STYLES
To use a responsive design, it's reccomended to use the responsive version of Bones. You can find it on github: https://github.com/eddiemachado/bones-responsive
******************************************************************/

@media only screen and (min-width: 480px) {
  /* insert styles here */
}

@media only screen and (min-width: 768px) {
/* insert styles here */
}

@media only screen and (min-width: 992px) {
/* insert styles here */
}

@media only screen and (min-width: 1382px) {
/* insert styles here */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
/* insert styles here */
}

/******************************************************************
PRINT STYLES
(Handled by default, but if you want to edit it, feel free)
******************************************************************/

@media print { }

/******************************************************************
IE SPECIFIC FIXES
******************************************************************/

/*
Thanks to the HTML5 Boilerplate there's an easier way
to target IE specific bugs. Simply use the html class
to target the specific version of IE.

To target the .post_content area in IE6, use:
html.ie6 .post_content { ... }

To target the .post_content area in IE7, use:
html.ie7 .post_content { ... }

To target the .post_content area in IE8, use:
html.ie8 .post_content { ... }

To target the .post_content area in older IE use:
html.oldie .post_content { ... }

Much easier right? This way, you don't have to call
any more stylesheets, you can leave it at the bottom
and it will overwrite depending on the html class.
*/