/*
font-family: 'Permanent Marker', cursive;
font-family: 'Rock Salt', cursive;
font-family: 'Open Sans', sans-serif;
*/

/*Colors:
#373D3C gray
#00D4C0 teal
#CFBA7D brown*/


html, body {
  height: 100%;
}

.header_bar{
  width: 100%;
  background-color: #ffe3e0;
  height: 220px;
  vertical-align: baseline;
/*  display: inline-block;*/
  position: relative;
}

    h1 {
      display: inline-block;
      width: 15%;
      margin-left: 6%;
      font-family: 'Rock Salt', cursive;
      font-size: 5em;
      line-height: .75em;
      font-weight: bold;
      color: white;
    }

    .header_links {
      display: inline-block;
      vertical-align: bottom;
      float: right;
      text-align: right;
      margin-right: 5%;
      margin-top: 110px;
      font-family: 'Permanent Marker', cursive;
      font-style: italic, #373D3C;
      font-size: 25px;
    }

.side_panel{
  width: 20%;
  float: left;
  display: inline-block;
}

    .me_pic{
      text-align: right;
      margin-top: 80px;
    }

    .write {
      text-align: right;
      font-family: 'Permanent Marker', cursive;
      font-size: 25px;
      font-style: #00D4C0;
      vertical-align: top;
      margin-bottom: 5%;
    }

    .twitterfeed {
      float: right;
      margin-top: 30px;
    }

.main_body{
  width: 80%;
  display: inline-block;
}

    /*The use of overflow:hidden allows us to apply floats to the tiles within.*/
    .wrap {
      overflow: hidden;
      margin-top: 80px;
      margin-right: 5%;
      width: 90%;
      float: right;
      display: inline-block;
    }

    .box {
      float: right;
      position: relative;
      margin-right: 2%;
      width: 28%;
      padding-bottom: 20%;
      border-top: #ccf6f2 solid 9px;
    }

    /*This is the actual content area for each tile.  It is positioned with 10 pixels around each edge.*/
    .boxInner {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      bottom: 10px;
      overflow: hidden;
    /*  background-color: #FFFCE6;*/
    }

    /*We want our images (which are square) to fill the full tile width, so we use width:100%*/
    .boxInner img {
      height: 100%;
      text-align: center;
      vertical-align: top;
    }

    .blogtitle {
      font-size: 1.1em;
      line-height: 1.4em;
      font-family: 'Open Sans', sans-serif, bold;
      font-weight: bold;
      display: block;
      font-style: #373D3C;
    }

    .blogsubtitle {
      font-size: .9em;
      line-height: 1.4em;
      font-family: 'Open Sans', sans-serif, bold;
      line-height: 1.4em;
      font-style: #373D3C;
    }

    .blogdate {
      font-size: .9em;
      line-height: 1.4em;
      font-family: 'Open Sans', sans-serif, bold;
      font-style: italic;
      line-height: 1.4em;
      font-style: #373D3C;
    }

    .blogblurb{
      font-family: 'Open Sans', sans-serif;
      font-size: .8em;
      line-height: 1.4em;
      font-style: #373D3C;
    }

    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {margin-bottom: 0;
    }

.footer{
  width: 100%;
  background-color: #ffe3e0;
  display: inline-block;
  height: 100px;
  vertical-align: baseline;
  margin-top: 20px;
}


/* unvisited link */
a:link {
    color: #373D3C;
}

/* visited link */
a:visited {
    color: #373D3C;
}

/* mouse over link */
a:hover {
    color: #00D4C0;
}



/*Responsive CSS*/

    @media only screen and (max-width : 480px) {
       /* Smartphone view: 1 tile */
       .box {
          width: 100%;
          padding-bottom: 100%;
       }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
       /* Tablet view: 2 tiles */
       .box {
          width: 50%;
          padding-bottom: 50%;
       }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
       /* Small desktop / ipad view: 3 tiles */
       .box {
          width: 33.3%;
          padding-bottom: 33.3%;
       }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
       /* Medium desktop: 4 tiles */
       .box {
          width: 25%;
          padding-bottom: 25%;
       }
    }

<!-- Enable media queries for old IE -->
<!--[if lt IE 9]>
   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->