/* 
	TOC
	==LESS mixins/constants
	==RESET  // minimal
	==GENERAL
	==HEADER
	
	
*/
/* ==LESS mixins/constants */
.box_shadow {
  -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
}
/* ==RESET */
* {
  margin: 0;
  padding: 0;
}
/* ==GENERAL */
html {
  background: #F9FFE9;
}
body {
  background: #F9FFE9;
  color: #333;
  font-family: "adobe-jenson-pro-1", "adobe-jenson-pro-2", "Times New Roman", Times, Cambria, serif;
}
/* ==TYPOGRAPHY */
h1 {
  color: #333;
  font-size: 34px;
  font-weight: 400;
  line-height: 48px;
  margin: 0 0 24px 0;
}
h2 {
  color: #333;
  font-size: 21px;
  font-weight: normal;
  line-height: 24px;
  margin: 0 0 24px 0;
}
h2 i {
  font-style: italic;
}
h3 {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}
p {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 24px;
}
ul {
  list-style: none;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 24px 0;
}
img {
  display: block;
}
a {
  border-bottom: 1px dotted #666;
  color: #666;
  line-height: 1;
  text-decoration: none;
}
sup {
  font-size: 10px;
  text-transform: uppercase;
}
abbr {
  border: none;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
i, .italic {
  font-style: italic;
  line-height: 1;
}
.small-caps {
  -moz-font-feature-settings: "smcp=1, c2sc=1";
}
.fontfeaturesettings.wf-active #header li {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  -moz-font-feature-settings: "smcp=1, c2sc=1";
  text-transform: none;
}
.fontfeaturesettings.wf-active #header li strong {
  font-weight: 500;
}
.fontfeaturesettings.wf-active #header li .tel {
  font-size: 18px;
}
.fontfeaturesettings.wf-active abbr, .fontfeaturesettings.wf-active #favourite-projects .url a {
  -moz-font-feature-settings: "smcp=1, c2sc=1";
  font-size: 18px;
  font-weight: 500;
  text-transform: none;
}
.fontfeaturesettings.wf-active #availability span, .fontfeaturesettings.wf-active sup {
  -moz-font-feature-settings: "smcp=1, c2sc=1";
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  line-height: 1;
}
/* ==GRID */
#main {
  width: 659px;
  margin-left: 81px;
}
#header,
#footer,
#introduction,
#favourite-projects,
#now-what {
  width: 389px;
  display: inline;
  float: right;
}
#client-list, #availability {
  width: 254px;
}
section {
  margin-bottom: 24px;
}
/* ==HEADER */
#header {
  display: inline;
  float: left;
  margin: 72px 0 24px 351px;
}
#header ul {
  list-style: none;
}
#header li {
  color: #000;
  display: block;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  /*	
	&:before { 
  	  content: "\2022\0020";
  	  line-height: 1;
	}
	
	&.first:before { 
	  content: "";
	}
	
	strong {
	  font-size: 13px;
      font-weight: normal;
      line-height: 1;
      text-transform: uppercase;
    }
*/
}
#header li .tel {
  font-size: 14px;
}
#header li strong {
  font-weight: bold;
}
#header li a {
  border: none;
  color: #000;
}
/* ==FOOTER */
#footer {
  clear: both;
  display: inline;
  float: left;
  font-size: 16px;
  margin: 0 0 0 351px;
  padding: 0 0 48px 0;
  /*
  background: url(../images/footer.png) no-repeat 0 bottom;
  border-top: 1px solid #CDCDCD;
  color: #666666;
  clear: both;
  font-style: italic;
  margin: 0 0 -20px 47px; /* 81px - 34px 
  padding: 47px 23px 48px+20px 34px;
*/
}
#footer p {
  color: #333;
  display: inline;
  float: left;
  font-size: 16px;
}
#footer a {
  border: none;
  color: #333;
  display: inline;
  float: right;
  font-weight: 500;
  line-height: 24px;
}
/* ==MAIN */
#page {
  display: inline;
  float: left;
  width: 100%;
  height: 100%;
  background: #F9FFE9;
}
#main {
  clear: left;
  display: inline;
  position: relative;
  float: left;
}
/*
section { 
  h2:before { /* Add the ยง symbol to all section h2's 
  	content: "\00a7";
  	font-style: italic;
  	vertical-align: top;
  	line-height: 1;
  }

  &#introduction h2:before,
  &#now-what h2:before { /* Remove the ยง symbol from introduction h2
    content: "";
  }  
}
*/
#availability {
  display: inline;
  float: left;
  margin-bottom: 72px;
  margin-top: 48px;
  /*   
  li { 
    margin-bottom: 24px;
  }
  
  a { 
    display: block;
    font-size: 16px;
    font-style: italic;
    padding: 12px 5px;
    text-align: center;
    text-decoration: none;
    width: @col - 10;
  }
 
  .linked-in { 
    .linear_gradient(#e8e6de, #d9d6c8);
    .border_radius(5px);
    .box_shadow;
    border: 1px solid #DAD7C9;
  }
  
  .cv {     
    .linear_gradient(#e9e8e9, #cdcacc);
    .border_radius(5px);    
    border: 1px solid #CFCDCE;
  }
*/

}
#availability ul {
  font-size: 16px;
}
#availability li {
  position: relative;
}
#availability li:before {
  content: "\2022\0020";
  line-height: 1;
  position: absolute;
  left: -10px;
  top: 1px;
}
#availability a {
  border: none;
  color: #333333;
  font-weight: 500;
  text-decoration: none;
}
#availability span {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}
#favourite-projects {
  margin-bottom: -24px;
  /* ul + p margin not collapsed */

}
#favourite-projects h2 i {
  vertical-align: top;
  line-height: 1;
}
#favourite-projects li {
  position: relative;
  margin-bottom: 48px;
}
#favourite-projects li h3 {
  margin-bottom: 12px;
}
#favourite-projects li ul {
  display: inline;
  float: left;
  margin-bottom: 12px;
  margin-left: -16px;
  position: relative;
  width: 405px;
}
#favourite-projects li li {
  display: inline;
  float: left;
  margin-bottom: 0;
  margin-left: 16px;
}
#favourite-projects li .url a {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}
#favourite-projects li img {
  display: block;
}
#favourite-projects li.feature {
  padding-top: 264px;
  position: relative;
}
#favourite-projects li.feature img {
  position: absolute;
  top: 0;
  left: 0;
}
#favourite-projects li.feature h3 {
  font-size: 21px;
  margin-bottom: 24px;
}
#favourite-projects li .full-description {
  display: inline;
  float: left;
  width: 100%;
}
#favourite-projects li .toggle-excerpt {
  position: relative;
  margin-top: -12px;
  margin-bottom: 12px;
}
#favourite-projects li .toggle-excerpt a {
  border-color: #990000;
  color: #990000;
  font-size: 16px;
}
#client-list {
  color: #666;
  clear: left;
  display: block;
  font-size: 16px;
  margin-bottom: 24px;
}
#client-list p {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 16px;
  line-height: 21px;
}
#client-list ul {
  font-size: 16px;
  margin-bottom: 24px;
}
#client-list h2 {
  color: #666;
  margin-bottom: 24px;
}
#client-list h2 i {
  vertical-align: top;
  line-height: 1;
}
#client-list h3 {
  color: #666;
  font-size: 18px;
  margin: 36px 0 12px 0;
}
#now-what {
  margin-top: 48px;
}
#now-what h2 {
  font-style: italic;
}
#now-what a {
  border-color: #990000;
  color: #990000;
}
/* Non-Typekit typography */
.wf-inactive {
  /* Down from 18px  */

  /* Down from 16px */

}
.wf-inactive h2 i {
  font-style: normal;
}
.wf-inactive p, .wf-inactive #client-list h3 {
  font-size: 15px;
}
.wf-inactive #client-list p,
.wf-inactive #client-list ul,
.wf-inactive #client-list li,
.wf-inactive #availability ul,
.wf-inactive #footer,
.wf-inactive #footer p {
  font-size: 13px;
}
.wf-inactive #availability li:before {
  top: 5px;
}
.ie6 .feature {
  margin-bottom: 24px;
  /* margin collapse fix */

}
.ie7 #availability ul {
  padding-left: 20px;
  margin-left: -20px;
}
#grid {
  /* Dimensions - same width as your grid with gutters */

  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid .horiz {
  /* 24px line height */

  height: 23px;
  border-bottom: 1px dotted #aaa;
  margin: 0;
  padding: 0;
  line-height: 24px;
}
#grid .horiz .one-col {
  margin-right: 0;
  background: url(../images/gutter-bg.gif) repeat-y right 0;
}
#grid .horiz .gutter {
  float: left;
  background: url(../images/gutter-bg.gif) repeat-y right 0;
}
#grid .horiz .last-col {
  background: none;
}
#grid .grid-inner {
  margin: 0;
  border-left: 82px solid #aaa;
  border-right: 22px solid #aaa;
  width: 659px;
}
#grid .one-col {
  display: inline;
  float: left;
  width: 119px;
}
#grid .gutter {
  display: inline;
  float: left;
  width: 16px;
}