/*  ###########################################################################
    Author:     Lunatech Labs
    date:       February 2011
    ########################################################################### */
@media screen {
  /*  ###########################################################################
      Author:     Lunatech Research
      ########################################################################### */
  /* float value: left, right, none */
  .box {
    margin: 0 0 1.4000000000000001em;
    padding: 1.4000000000000001em 19.2px;
  }
  .box-inset {
    margin: -1.4000000000000001em -19.2px;
    padding: 0.7000000000000001em 19.2px;
  }
  /*  ###########################################################################
      Author:     Dutchcelt Design
      ########################################################################### */
  /*  Font elements ------------------------------------------------------------- */
  @font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-It-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'SourceSansPro';
    src: url('../fonts/SourceSansPro-BoldIt-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
  }
  @font-face {
    font-family: 'SourceSansProLight';
    src: url('../fonts/SourceSansPro-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'SourceSansProLight';
    src: url('../fonts/SourceSansPro-LightIt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
  }
  /*  TYPOGRAPHIC FONT SCALE ---------------------------------------------------- */
  /*  ###########################################################################
      Author:     Lunatech Research
      ########################################################################### */
  /*  ###########################################################################
      Author:     Lunatech Research
      ########################################################################### */
  .background-clip {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .clear-fix {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  /*  ###########################################################################
      Author:    DutchCelt Design
      ########################################################################### */
  /*  HTML5 display-role reset for older browsers ------------------------------- */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  audio,
  canvas,
  video {
    display: inline-block;
  }
  /*  Basic front-end patterns  ------------------------------------------------- */
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    font-style: normal;
    font-weight: normal;
    font-size: 100%;
    line-height: 1.5;
    font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
  }
  ul,
  ol {
    margin-left: 0;
    padding: 0;
  }
  li ul,
  li ol {
    margin-left: 1.4000000000000001em;
  }
  ol ol {
    margin-left: 1.4000000000000001em;
    list-style-type: lower-alpha;
  }
  ol ol ol {
    margin-left: 1.4000000000000001em;
    list-style-type: lower-roman;
  }
  dl {
    margin-left: 0;
    padding: 0;
  }
  dt {
    margin-left: 0;
    font-weight: bold;
  }
  dd {
    margin-left: 0;
    display: list-item;
    list-style-type: disc;
    font-style: italic;
  }
  img {
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
  code {
    white-space: pre;
  }
  hgroup {
    padding: 0 0 1.4000000000000001em 0;
    line-height: 1;
  }
  blockquote {
    text-align: right;
    font-style: italic;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
  }
  blockquote,
  q {
    quotes: "" "";
  }
  [hidden] {
    display: none;
  }
  /*  Headings ------------------------------------------------------------------     
                  
      1.  Added OO CSS classes to enable consistant and interchangable headings
          These can be used internally via LESS to extend more cleanly 
      2.  Setting margin to zero seems to be more usefull across typograhpic patterns
      
      */
  .h0 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 3.6em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
  }
  h1,
  .h1 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.4em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
  }
  h2,
  .h2 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 2.1em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
  }
  h3,
  .h3 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
  }
  h4,
  .h4 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.4em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
    font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
  }
  h5,
  .h5 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.2em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
    font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
  }
  h6,
  .h6 {
    margin: 1.4000000000000001em 0 0 0;
    font-style: normal;
    font-weight: normal;
    font-size: 1.1em;
    line-height: 1;
    font-family: "SourceSansProLight", Helvetica, Arial, sans-serif;
    font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
  }
  /*  tables still need 'cellspacing="0"' in the markup ------------------------- */
  table {
    border-collapse: separate;
    border-spacing: 0;
  }
  caption,
  th,
  td {
    padding: 0.2em 9.6px;
    text-align: left;
    vertical-align: top;
    line-height: 1.2;
    background: inherit;
  }
  th {
    font-weight: bold;
  }
  /*  links --------------------------------------------------------------------- */
  a {
    text-decoration: none;
    color: #6093c8;
    background-repeat: no-repeat;
  }
  a:visited {
    color: #6093c8;
  }
  a:hover {
    text-decoration: none;
    color: #222222;
    outline: 0;
  }
  a:active {
    text-decoration: none;
    color: #222222;
    outline: 0;
  }
  a:focus {
    outline: thin dotted;
  }
  /*  ###########################################################################
      Author:     DutchCelt Design
      ########################################################################### */
  /*  FORMS [WARNING! low specificity!]------------------------------------------ */
  form {
    margin: 0;
    padding: 0 0 0.7000000000000001em 0;
    max-width: 100%;
  }
  fieldset {
    border: 0 none;
    padding: 0 0 0.7000000000000001em 0;
  }
  label {
    clear: left;
    float: none;
    display: block;
    padding-right: 9.6px;
    width: 100%;
    text-align: left;
  }
  input {
    vertical-align: baseline;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    /* content-box */
  
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  input[type=search],
  input[type=url],
  input[type=email],
  input[type=url],
  input[type=email],
  input[type=password],
  input[type=text] {
    float: none;
    width: 100%;
  }
  input[type=number],
  input[type^=date],
  input[type=time] {
    float: none;
    width: 32.5%;
  }
  input[type=checkbox],
  input[type=radio] {
    width: auto;
  }
  input[type=checkbox] + label {
    float: none;
    display: inline;
  }
  input[type="radio"] + label {
    display: inline;
    float: none;
  }
  select {
    float: none;
    width: auto;
    min-width: 65.5%;
    vertical-align: baseline;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    /* content-box */
  
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  textarea {
    float: none;
    width: 100%;
    vertical-align: baseline;
    overflow: auto;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    /* content-box */
  
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  input[type=checkbox] {
    float: left;
  }
  div > div > input[type=radio],
  div > div > input[type=checkbox] {
    float: none;
    display: inline;
  }
  fieldset > div {
    padding-bottom: 0.9333333333333335em;
    float: none;
    width: 100%;
  }
  fieldset > div > div {
    float: none;
    width: 100%;
  }
  div > div > label {
    float: none;
    display: inline;
  }
  input[type=reset],
  input[type=button],
  input[type=submit] {
    -webkit-appearance: button;
    width: auto;
    overflow: visible;
    cursor: pointer;
  }
  input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  select[multiple] {
    width: 65.5%;
  }
  :invalid {
    color: #cd0a0a;
  }
  :valid {
    color: #4d6071;
  }
  :read-only {
    border: 0;
    padding: 0;
  }
  ::-webkit-validation-bubble-arrow {
    margin-bottom: -1.4000000000000001em;
    border: 0;
    box-shadow: 0 0 0 0;
    background: #cd0a0a;
  }
  ::-webkit-validation-bubble-message {
    padding: 0.35000000000000003em 9.6px;
    border-radius: 9.6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0;
    box-shadow: 0 0 0 0;
    color: #ffffff;
    background: #cd0a0a;
  }
  /*  ###########################################################################
      company:    Dutch Celt Design
      date:       April 2009 - 2012
      author:     C. Egor Kloos
      ########################################################################### */
  /*  LAYOUT -------------------------------------------------------------------- */
  body {
    color: #4d6071;
    background-color: #ffffff;
  }
  header {
    position: relative;
    display: block;
    background: #ff9a00;
    color: #ffffff;
  }
  /*  HEADER ------------------------------------------------------------------- */
  header h2 {
    margin: 0;
    padding: 1.2em 0 0 0;
    text-align: right;
    font-size: 1em;
  }
  #pull-view {
    position: absolute;
    left: 20px;
    bottom: 0;
    z-index: 42;
    width: 12px;
    height: 12px;
    text-align: center;
    font-size: 0.6em;
    background: #4782bc;
    color: #c4d0de;
    text-shadow: none;
    cursor: pointer;
  }
  /*  HEADERS ------------------------------------------------------------------- */
  h1 {
    margin: 0;
    padding: 0.2em 20px 0.5em 0;
    text-align: right;
    font-size: 1em;
  }
  h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
  }
  #tagline {
    text-align: left;
    line-height: 2;
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    /* content-box */
  
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #tagline span {
    display: inline-block;
    margin-left: 40%;
    padding: 0 .5em;
  }
  /*  CONTENT ------------------------------------------------------------------- */
  #content {
    margin: 1em auto;
    padding: 1.4000000000000001em 0 3em;
    overflow: hidden;
    max-width: 960px;
  }
  #content article {
    position: relative;
    display: block;
    margin: 0 0 2em 0;
    padding: 0 0 0 40%;
    width: 60%;
    color: #4d6071;
  }
  #content article ~ article {
    margin: 2em 0;
  }
  #content article h1 {
    position: absolute;
    left: 0;
    float: left;
    padding: 0;
    width: 38%;
    text-align: right;
    font-size: 3em;
    color: #4d6071;
  }
  article h2 {
    position: absolute;
    left: 0;
    float: left;
    padding: 0;
    width: 38%;
    text-align: right;
    font-size: 2em;
    line-height: 1;
    color: #4d6071;
  }
  #content article code {
    color: #57c26c;
  }
  #content article p img {
    float: right;
    margin: 0 0 0.5em 15px;
    max-width: 550px;
  }
  #content article .byline {
    text-transform: uppercase;
    font-size: 0.7em;
  }
  #content article .comments {
    border-bottom: 1px solid #414a4e;
  }
  /*  HOMEPAGE ------------------------------------------------------------------ */
  #home header {
    position: static;
    display: block;
    background-size: cover;
  }
  /*  OTHER --------------------------------------------------------------------- */
  .trackback {
    margin: 2em 0 -0.5em 0;
    border-top: 1px dotted DarkGrey;
    padding: 0.5em 0 0 15px;
    font-size: 0.8em;
    background: transparent url(/images/site/bullit-arrow-link-ie.gif) no-repeat 0 50%;
  }
  .todo {
    color: Silver;
  }
  .done {
    color: LightGreen;
  }
  .footnote {
    margin-top: 2em;
    border-top: 1px dotted DarkGrey;
    font-size: 0.8em;
    color: DarkGrey;
  }
  .logo {
    position: absolute;
    top: 0.7em;
    left: 1em;
    z-index: 4242;
    text-transform: lowercase;
    font-size: 1.6em;
  }
  .logo:before {
    display: inline-block;
    content: "\2605";
    font-family: Arial, sans-serif;
    color: #ff9a00;
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  .mirror {
    display: inline-block;
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
  }
  /*  FOOTER -------------------------------------------------------------------- */footer {
    position: absolute;
    z-index: 42;
    top: 120px;
    left: 0;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 25px;
    text-align: left;
  }
  h6#copyright {
    margin: 0;
    padding: 0;
    font-size: 0.6em;
    line-height: 3;
  }
  /*  FORMS --------------------------------------------------------------------- */form {
    float: left;
    padding: 1.4000000000000001em 0;
  }
  #content .formbutton {
    clear: both;
    float: none;
    color: #222222;
  }
  #content textarea,
  #content input {
    color: #222222;
  }
  label.error,
  input[type=radio] + label.error,
  input[type=checkbox] + label.error {
    clear: both;
    float: none;
    font-size: 0.9em;
    color: #c62106;
  }
  /*  NAV --------------------------------------------------------------------- */li a {
    text-decoration: none;
    font-weight: bold;
    color: black;
  }
  .page-walker {
    padding: 1em 0;
  }
  .page-walker a {
    color: #369649;
  }
  .page-walker a:hover {
    color: #4782bc;
  }
  #content .hover {
    background-color: rgba(77, 96, 113, 0.1);
    cursor: pointer;
  }
  nav {
    margin: 1em auto;
    max-width: 960px;
    font-size: 0.8em;
    line-height: 1.5;
    text-transform: uppercase;
  }
  nav ul {
    display: block;
    margin: 1.6em 0 0 39.5%;
  }
  nav li {
    display: inline-block;
    margin: 0 2px 0 0;
    padding: 0 0 0 5px;
  }
  nav li a {
    display: inline-block;
    padding: 2px 6px 1px 0;
    letter-spacing: 1px;
    font-weight: normal;
    color: #4d6071;
  }
  nav li a:link {
    color: #c4d0de;
  }
  nav li a:visited {
    color: #c4d0de;
  }
  nav li a:hover {
    color: #6093c8;
  }
  nav li.active {
    color: #4782bc;
  }
  nav li.active a {
    color: #4782bc;
  }
  /*  ###########################################################################
      Author:     Dutchcelt Design
      ########################################################################### */
}
@media screen and (max-width: 42em) {
  body {
    padding: 0;
  }
  nav {
    margin: 0;
  }
  nav ul {
    margin: 4em 0 0.5em 1em;
  }
  nav li {
    margin: 0;
  }
  #content article {
    padding: 0.5em 4% 0.5em 4%;
    width: 92%;
    font-size: 1.2em;
  }
  article h2,
  #content article h1 {
    position: static;
    float: none;
    width: 100%;
    text-align: left;
  }
  article h2,
  article h3 {
    font-size: 1.6em;
  }
  #content article h1 {
    font-size: 2.4em;
  }
  #tagline {
    line-height: 1;
  }
  #tagline span {
    margin-left: 0;
    padding: 0 1em;
  }
}
@media screen and (min-width: 42em) and (max-width: 1024) {
  body {
    padding: 0 4% 0 4%;
  }
  nav {
    margin-left: 4%;
    margin-right: 4%;
  }
}
@media screen and (min-width: 1024) {
  
}
@media print {
  
}