/*
I've put in tons of comments... why? If you are already great at CSS,
then nothing here will be of any interest... but if you are just starting
out, then all of this is super-confusing. So I'm commenting even obvious stuff
so that you know exactly why I chose to do each thing. First up is the universal selector.
If you've done any learn CSS at codeacademy, then you've seen this before. It's a trick to
draw a dashed line around every box in your CSS. Just change the px value to 1px.
Use this to de-bug and figure out why things aren't placed where you think they should be.
Combine this approach with in-browsers dev tools, and you've got a good head start in
problem solving your CSS for layout.

https://www.codecademy.com/
https://developer.chrome.com/devtools
*/

* {
    border: 0px dashed #0000ff;
}

/* general setup for x-device requirements and a few bits about links.
The viewport settings are to make the resizing work on mobile,
The link stuff is just basic no-blue-underline styling
the generic p just sets a global text color. Nothing much here,
unless you forget the viewport stuff and can't figure out why
your responsive site isn't working on mobile.

There's a whole debate on how to do this properly. Honestly, what I've
done here may or may not be the best thing for you.

More on the discussion here:
http://stackoverflow.com/questions/11006812/html5-boilerplate-meta-viewport-and-width-device-width

*/

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

a:link {
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: none;
    font-weight: bold;
}

a:active {
    text-decoration: none;
    font-weight: bold;
}
/* unvisited link */
a:link {
    color: #333;
}

/* visited link */
a:visited {
    color: #333;
}

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

/* selected link */
a:active {
    color: #333;
}
body {
  font-size:100%;
  line-height: 1.25em;
}
p {
  color: #333;
}

/* Here is the styling for the main index list of collaborations.
This is done is a table (right?! Tables FTW, so very 1996. I love it!)
with three different styles, one for the partner org, one for the X
and one for me. Notice the X is actually a graphic.
If you want to change the X back to text, you'd need to adjust the top to a
different em value to nudge it back down. Oh-speaking of ems... I tried to keep
all font-size values in ems for all the reasons outlined here.

http://alistapart.com/article/howtosizetextincss

Notice the line-height is re-adjusted for the collaborations index.

*/


#collab {
  width: = 100%;
  height: 120px;
  align: center;
  line-height: 2em;
}

#name {
  font-family: 'Montserrat', 'sans-serif';
  font-size: 3em;
  letter-spacing: .6px;
  text-align: center;
  color: #999999
}

#partner {
  font-family: 'Montserrat', 'sans-serif';
  font-size: 1em;
  letter-spacing: .6px;
  text-align: right;
  color: #999999
}

#X {
  position : relative;
  top : .3em;
}
#buckhouse {
  font-family: 'Montserrat', 'sans-serif';
  font-size: 1em;
  letter-spacing: .6px;
  padding-right: 10vmin;
  color: #999999
}

h1 {
  text-align: center;
  font-family: 'Montserrat', 'sans-serif';
  font-size: 3.8em;
  color: #999999;
  letter-spacing: .2em;
  line-height: 2em;
}
#photo-credit {
  text-align: center;
  font-family: 'Montserrat', 'sans-serif';
  font-size: .3em;
  color: #999999;
  letter-spacing: .1em;
}

/* *********************** Article Pages ************************
For the article pages, I wanted a drop cap (with the option to
create an animated dropcap for some articles). I also wanted clear
body text with an /almost/ printed page feel to it's vibe, but
nothing too old-timey. And I wanted a unified way to deal with
illustrations and photos.
 */

/***************** how to center the image ******************************
You'd be forgiven to think that all it takes is saying like align: center or align:
middle — as that's pretty reasonable sounding... but centering things is a little trickier.
Read all about it here.
http://www.w3.org/Style/Examples/007/center.en.html
I chose the "centering in the viewport" approach.
*/

 IMG.article {
   width: 140%;
   position: relative;
   padding-top: 2em;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%,0%);
   -webkit-transform: translate(-50%,0%);
   }

   #copy-holder {
     padding-top: 2.5em;
     font-family: Georgia, serif;
     font-size: 1em;
     line-height: 1.6em;
   }
   #bio-holder {
     width: 100%;
     padding-top: 2.5em;
     padding-left: 0%;
     font-family: Georgia, serif;
     font-size: 1em;
     line-height: 1.6em;
     text-align: center;
   }

/* Drop Caps!
Wrap it in a span, style it up! Read more here;
https://css-tricks.com/snippets/css/drop-caps/
Also, I'm calculating the size of the drop-cap to a
percentage of the viewport so that it's always responsive.
Do it with vmin. Learn more here.
https://medium.com/@ryanallen_com/responsive-type-with-only-css-82b846370cc9
*/
  .firstcharacter {
  float: left;
  color: #888;
  font-size: 15vmin;
  line-height: 10vmin;
  padding-top: 2vmin;
  padding-right: 3vmin;
  padding-left: 0px;
  font-family: Georgia;
  }
  .title-line {
    text-align: center;
    color: #888;
    font-size: 8vmin;
    letter-spacing: .2em;
    font-family: 'Montserrat', 'sans-serif';
  }

  #article-intro{
    width: 80%;
    padding-left: 10%;
  }
  IMG.logo {
    width: 5vmin;
    padding-top: 2em;
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    #products {
      font-family: 'Montserrat', 'sans-serif';
      font-size: .8em;
      color: #555;
      letter-spacing: .3px;
      text-align: center;
    }
    #product-header {
      font-family: 'Montserrat', 'sans-serif';
      font-size: .8em;
      color: #333;
      letter-spacing: .3px;
      padding-top: 2vmin;
      text-align: center;
    }
    #embedded-tweet {
    width: 100%;
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
  }

  @media screen and (min-width: 300px){
    .firstcharacter {
    float: left;
    color: #888;
    font-size: 11.6vmin;
    line-height: 8.6vmin;
    padding-right: 2vmin;
    padding-left: 0px;
    padding-top: 1.5vmin;
    font-family: Georgia;
    }
    .title-line {
      text-align: center;
      color: #888;
      font-size: 8vmin;
      letter-spacing: .2em;
      font-family: 'Montserrat', 'sans-serif';
    }
    h1 {
      text-align: center;
      font-family: 'Montserrat', 'sans-serif';
      font-size: 6vmin;
      color: #999999;
      letter-spacing: .2em;
      line-height: 1.2em;
    }
    #article-intro{
      width: 80%;
      padding-left: 10%;
    }

    IMG.article {
      width: 120%;
      position: relative;
      padding-top: 2em;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,0%);
      -webkit-transform: translate(-50%,0%);
      }
      IMG.article2up {
        width: 50%;
        position: relative;
        float: left;
        }

    IMG.logo {
      width: 4vmin;
      padding-top: 2em;
      position: relative;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,0%);
      -webkit-transform: translate(-50%,0%);
      }
      #buckhouse {
        font-family: 'Montserrat', 'sans-serif';
        font-size: 1em;
        color: #999999;
        letter-spacing: .6px;
        padding-right: 18vmin;
      }
  }

@media screen and (min-width: 480px){
  .firstcharacter {
  float: left;
  color: #888;
  font-size: 11.6vmin;
  line-height: 8.6vmin;
  padding-right: 2vmin;
  padding-left: 0px;
  padding-top: 1.5vmin;
  font-family: Georgia;
  }
  .title-line {
    text-align: center;
    color: #888;
    font-size: 8vmin;
    letter-spacing: .2em;
    font-family: 'Montserrat', 'sans-serif';
  }
  h1 {
    text-align: center;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 6vmin;
    color: #999999;
    letter-spacing: .2em;
    line-height: 1.2em;
  }
  #article-intro{
    width: 80%;
    padding-left: 10%;
  }

  IMG.article {
    width: 120%;
    position: relative;
    padding-top: 2em;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    IMG.article2up {
      width: 50%;
      position: relative;
      float: left;
      }

  IMG.logo {
    width: 4vmin;
    padding-top: 2em;
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    #buckhouse {
      font-family: 'Montserrat', 'sans-serif';
      font-size: 1em;
      color: #999999;
      letter-spacing: .6px;
      padding-right: 18vmin;
    }
}
@media screen and (min-width: 600px){
  .firstcharacter {
  float: left;
  color: #888;
  font-size: 11.2vmin;
  line-height: 9.5vmin;
  padding-right: 1.8vmin;
  padding-left: 0px;
  padding-top: .6vmin;
  font-family: Georgia;
  }
  .title-line {
    text-align: center;
    color: #888;
    font-size: 11.2vmin;
    letter-spacing: .2em;
    font-family: 'Montserrat', 'sans-serif';
  }
  h1 {
    text-align: center;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 8vmin;
    color: #999999;
    letter-spacing: .2em;
    line-height: 1.4em;
  }
  #article-intro{
    width: 70%;
    padding-left: 15%;
  }
  IMG.logo {
    width: 2vmin;
    padding-top: 2em;
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    #buckhouse {
      font-family: 'Montserrat', 'sans-serif';
      font-size: 1em;
      color: #999999;
      letter-spacing: .6px;
      padding-right: 14vmin;
    }
    IMG.article {
      width: 120%;
      position: relative;
      padding-top: 2em;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,0%);
      -webkit-transform: translate(-50%,0%);
      }
}

@media screen and (min-width: 900px){
  .firstcharacter {
  float: left;
  color: #888;
  font-size: 11.2vmin;
  line-height: 9.5vmin;
  padding-right: 1.8vmin;
  padding-left: 0px;
  padding-top: .2vmin;
  font-family: Georgia;
  }
  .title-line {
    text-align: center;
    color: #888;
    font-size: 11.2vmin;
    letter-spacing: .2em;
    font-family: 'Montserrat', 'sans-serif';
  }
  h1 {
    text-align: center;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 9vmin;
    color: #999999;
    letter-spacing: .2em;
    line-height: 1.5em;
  }
  #article-intro{
    width: 50%;
    padding-left: 25%;
  }
  IMG.logo {
    width: 2vmin;
    padding-top: 2em;
    position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    #buckhouse {
      font-family: 'Montserrat', 'sans-serif';
      font-size: 1em;
      color: #999999;
      letter-spacing: .6px;
      padding-right: 10vmin;
    }
    IMG.article {
      width: 140%;
      position: relative;
      padding-top: 2em;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,0%);
      -webkit-transform: translate(-50%,0%);
    }
}


@media screen and (min-width: 1200px){
  .firstcharacter {
  float: left;
  color: #888;
  font-size: 11.2vmin;
  line-height: 9.5vmin;
  padding-right: 1.8vmin;
  padding-left: 0px;
  padding-top: .2vmin;
  font-family: Georgia;
  }
  .title-line {
    text-align: center;
    color: #888;
    font-size: 11.2vmin;
    letter-spacing: .2em;
    font-family: 'Montserrat', 'sans-serif';
  }
  h1 {
    text-align: center;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 10vmin;
    color: #999999;
    letter-spacing: .2em;
    line-height: 1.5em;
  }
  #article-intro{
    width: 50%;
    padding-left: 25%;
  }
  IMG.logo {
    width: 2vmin;
    padding-top: 2em;
    position: relative;
    left: 50%;
    margin-right: -50%;
    ttransform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    }
    #buckhouse {
      font-family: 'Montserrat', 'sans-serif';
      font-size: 1em;
      color: #999999;
      letter-spacing: .6px;
      padding-right: 10vmin;
    }
    IMG.article {
      width: 140%;
      position: relative;
      padding-top: 2em;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%,0%);
      -webkit-transform: translate(-50%,0%);
    }
    #copy-holder {
      width: 100%;
      padding-top: 2.5em;
      padding-left: 0%;
      font-family: Georgia, serif;
      font-size: 1em;
      line-height: 1.6em;
    }
    #bio-holder {
      width: 100%;
      padding-top: 2.5em;
      padding-left: 0%;
      font-family: Georgia, serif;
      font-size: 1em;
      line-height: 1.6em;
      text-align: center;
    }
    #embedded-tweet {
    width: 100%;
    position: relative;
    left: 10%;
    margin-right: -10%;
    transform: translate(-80%,0%);
    -webkit-transform: translate(-80%,0%);
  }
}