@charset "UTF-8";
/* CSS Document
Author  : We Sort / Ben Edmonds
URL     : wesort.co.uk
Twitter : @we_sort
------------------------------*/

/*     This stylesheet builds on top of reset-n-grid.css */

/*  Containers
---------------------------*/
#page {
  display:block;
  position: relative;
  padding: 1em;
}
header, nav, #content, #featured, footer {
    display:block;
    position: relative;
    height: 100%;
}

/*  Typography
---------------------------*/
body {
  max-width: 68.750em;
  margin: 0 auto;
  text-align: left;
  color: #1C1C1C;
  background-color: #F2F2F2;
  line-height: 1.5em;
  font-style:normal;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:normal;
}
.wf-loading body {
    visibility: hidden;
}

/* Type sizes */
h1, h2, #logo, nav li a, .project-msg {
  font-size: 1.3em;
  font-weight:500;
}
p, h2.thumbnail-title, .caption p, footer p, ul.project-nav li, #content .paragraph li {
  font-size: 0.84em;
}
p {
  max-width: 38em;
}
h1, h2.thumbnail-title, #logo, nav {
  text-transform: uppercase;
}
p, h1, #logo, .caption p {
  padding-bottom: 1.5em;
}
p:last-child {
  padding-bottom: 0;
}
.padding-bottom {
  padding-bottom: 1.5em;
}
h2 {
  padding-bottom: 0.75em;
}
h2.thumbnail-title {
  padding: 0.5em 0 0 0;
  font-weight:normal;
  line-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  cursor: pointer;
  color: #1C1C1C;
  text-decoration: none;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

p a, .project-nav li a, .paragraph li a {
  text-decoration: underline;
}
a:hover {
  color: #999999;
}
a img:hover {
  opacity:0.8;
}
a:focus {
  color: #999999;
}
#logo a, nav a, a .thumbnail-title {
  text-decoration: none;
}
img {
  margin-bottom: 0.25em;
}
img {
  width: 100%;
}
.featured-text {
  padding: 1em 0;
}
.caption, footer.home {
  width: 100%;
}
footer p {
  padding-bottom: 0;
}
h1.archive {
  margin-top: 2em;
  padding-top: 0.25em;
  width: 100%;
  border-top: 1px solid #1C1C1C;
}
.item-block {
  padding-bottom: 2em;
}
li.news-item {
  margin-bottom: 2em;
}
.news-item h1 {
  padding: 0 0 0.25em 0;
  margin: 0 0 0.25em 0;
  border-top: 1px solid #1C1C1C;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.post-meta.date {
  margin: -2em 0 1em 0;
}
.pagination-separator {
  display: block;
  margin: 0.5em 0;
  width: 100%;
  border-top: 1px solid #1C1C1C;
}
#featured p {
  padding-bottom: 0;
}
.featured-color {
  width: 100%;
  height: 1px;
  margin-bottom: 1em;
}


/*  Site Navigation
---------------------------*/
nav {
  margin-bottom: 1.5em;
}
nav li {
  display: inline-block;
  margin-bottom: 1em;
}
nav li a {
  padding: 0.5em 1em 0.5em 0;
}
nav li:last-child a {
  padding-right: 0;
}
nav .current {
  color: #999999;
}

/*  Work Navigation
---------------------------*/
ul.work-thumbs h2 {
  min-height: 5em;
}
ul.work-thumbs li h2 {
  padding: 0.25em 0 1.5em 0;
}
ul.work-thumbs .grid-col {
  overflow: hidden;
}

/*  Project Navigation
---------------------------*/
ul.project-nav {
  display: block;
  padding-bottom: 1.5em;
}
ul.project-nav li {
  display: inline-block;
  padding-right: 1em;
}
ul.project-nav li.previous {
  color: #999999;
}
ul.project-nav li:last-child {
  padding-right: 0;
}
ul.project-nav li a {
  text-decoration: none;
}

/* Galleriffic thumbs
---------------------------*/
.project-thumbs .grid-col:nth-child(3n+1) {
  clear: left;
}


/* Galleriffic specific
---------------------------*/
.nav-controls {
  display: block;
  padding: 1.5em 0;
}
.nav-controls a {
  display: inline-block;
  text-decoration: none;
}
.nav-separator {
  display: inline-block;
  padding: 0 1.5em;
}
.slideshow-container {
  background: url('../img/loader_icon_v1.gif') no-repeat center center;
  min-height: 10em;
}
.slideshow:hover {
  background-color: #F2F2F2;
}
.js .project-msg {
  display: none;
}

/*  Project Thumbnails
---------------------------*/
ul.project-thumbs li {

}
ul.project-thumbs img {
  margin-bottom: 0;
  padding-bottom: 1em;
}

/* -------------------------------------------------------------
   -------------------------------------------------------------
                 BREAKPOINTS
   ---------------- Set here AND reset-n-grid.css  ------------------
   -------------------------------------------------------------
   ------------------------------------------------------------- */
/* -- Breakpoint (.bp1)
-- Same as above, but each class has ".bp1-" prefix
------------------------------------------------------------- */
@media only screen and (min-width: 28em) {
  /* Styles */
  #page {
    padding: 1em 2em;
  }
  nav li a {
    padding: 0.5em 2em 0.5em 0;
  }
  .caption .home, footer.home {
    display: inline-block;
  }
  .caption .home {
    width: 70%;
    float: left;
  }
  footer.home{
    width: auto;
    float: right;
    text-align: right;
    clear: none;
  }
  
  ul.project-nav li {
    width: 33%;
    float: left;
  }
  ul.project-nav li.previous {
    text-align: left;
  }
  ul.project-nav li.count {
    text-align: center;
  }
  ul.project-nav li.next {
    text-align: right;
  }
  .pagination-separator {
    display: inline-block;
    margin: 0 1em;
    width: 1px;
    height: 1em;
    border-top: none;
    border-left: 1px solid #1C1C1C;
  }
  /* Galleriffic thumbs
  ---------------------------*/
  .project-thumbs .grid-col:nth-child(3n+1) {
    clear: none;
  }
  .project-thumbs .grid-col:nth-child(5n+1) {
    clear: left;
  }
  ul.project-thumbs img {
    padding-bottom: 2em;
  }
}


/* -- Breakpoint 2 (.bp2)
~ iPad Portrait
------------------------------------------------------------- */
@media only screen and (min-width: 64em) {
  /* Styles */
  #page {
    padding: 1em 3em;
  }
  header {
    float: left;
    width: 20%;
  }
  .header-container {
    position: fixed;
  }
  #content {
    float: right;
    width: 80%;
  }
  footer {
    clear: both;
    text-align: left;
  }
  
  nav {
    margin-top: 2em;
  }
  nav li {
    display: block;
    margin: 1em 0;
  }
  nav li a {
    padding: 0.25em 1em 0.25em 0;
    margin: 0;
  }
  .news-thumbs, .homepagephoto {
    margin-top: 0.25em;
  }
  ul.project-nav li {
    display: inline-block;
    padding-right: 2em;
    width: auto;
  }
  ul.project-nav li:last-child {
    padding-right: 0;
  }
  ul.project-nav li.count, ul.project-nav li.next {
    text-align: left;
  }
  .description {
    margin-bottom: 1.5em;
  }
  /* Galleriffic thumbs
  ---------------------------*/
  .project-thumbs .grid-col:nth-child(5n+1) {
    clear: none;
  }
  .project-thumbs .grid-col:nth-child(8n+1) {
    clear: left;
  }
}
/* -- Breakpoint 3 (.bp3)
~ Over 1280px
------------------------------------------------------------- */
@media only screen and (min-width: 80em) and (min-height: 60em) {
  /* Styles */
  body {
    max-width: 80em;
  }
  
  #page {
    padding: 1.5em 3em;
  }
}


/* Print specific styles
------------------------------------------------------------- */
@media print {
  /* Styles */
  * {
    background: transparent !important;
    color: black !important;
  }
  a {
    color: #666666 !important;
    text-decoration: underline !important;
  }
}

/* other baseline styles
------------------------------------------------------------- */
ol {
  list-style: decimal inside;
}
ul {
  list-style: inside;
}
blockquote p {
  margin-left: 3em;
  padding-left: 0.5em;
  border-left: 0.25em solid gray;
  padding-bottom: 0;
}
pre {
  white-space: pre-wrap;
  padding: 0.5em 1em;
  background: #666;
  color: #FFF;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 3em;
  font-weight: normal;
}