/* ARDES <http://www.ardes.com/> */

/* =====GENERAL===== */
/* =ZERO margins & padding, which we define elsewhere, courtesy Eric Meyer (HTML5 edition, 01/11) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%; font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table { border-collapse: collapse; border-spacing: 0; }


/* =====HTML REDEFINITIONS===== */
body { font-family: 'Raleway', 'Helvetica', Arial, sans-serif; font-weight: 400; color: #4C4C4C; background-color: #FAF8F4; }

a:link { color: #1A3C77; }
  a:visited { color: #052E77; text-decoration: none; }
  a:focus, a:hover { color: #6A7D2A; }
  a:active { color: #6A7D2A; }

  a.note { text-decoration: none; }

cite { font-style: normal; color: #414141; }
  cite.book, cite.magazine, cite.movie, cite.tv { font-style: italic; color: inherit; }

dfn { border-bottom: 1pt dotted #D8D8D8; cursor: help; }

em { font-style: italic; }

h1, h2, h3, h4, h5, h6 { color: #1A3C77; font-weight: 900; padding: 1em; clear: both; }

h1 { font-size: 2em; display: block; 
  background: #F5F2EB url(../images/h1bg.jpg) repeat;
  border-top: 1pt solid #DADBCD; 
  border-bottom: 1pt solid #BEBFB3; 
}
h2 { font-size: 1.25em; }
  #news h2, #sidebar h2, aside h2 { padding: 1em 1em 0 1em; }
h3 { font-size: 1.15em; margin-left: 0.25em; }

#content p, .context li { line-height: 150%; padding: 0 1em 1em 1.25em; }
  .context li { margin-left: 1.5em; padding-left: 0; padding-bottom: 0.5em; }
  .context.toc li { padding-bottom: 0.25em; }
  .context ul li { list-style: disc inside; }
  .context ol li { list-style: decimal inside; }

p.call_to_action { clear: both; } 

div.context.intro p { font-size: 1.5em; }
  div.context.intro p.call_to_action { font-size: 1em; }

pre { 
  font-family: "Inconsolata", monospace; font-size: 1em; 
  padding: 0.5em; margin: 1.5em;
  color: #FFF; background-color: #323332;
}

strong { font-weight: 700; }

div.context div.vcard span { font-weight: 700; }


/* =====MAJOR ELEMENTS===== */
#container { width: 100%; background-color: #FAF8F4; }
#masthead, header { 
  background: #000 url(../images/backgrounds/spring.jpg) no-repeat;
  border-bottom: 1pt solid #7F7F7F;
}

#footer, footer { clear: both; display: block; }

#nav { margin-bottom: 2em; }

.last { border: 0pt!important; } /* relevant for .news, .context */

.logo span { position: absolute; left: -9000000px; }

#splash { 
  font-weight: 900; padding: 0;
}
  #splash img { width: 100%; }
  #splash p { color: #FFF; font-size: 3em; padding-top: 1.15em; margin-bottom: 1.15em; line-height: 115%;  }

/* =====HOME- AND =BLOG-SPECIFIC ELEMENTS=====*/
#intro, #news, #sidebar, aside { z-index: 3!important; }
#intro { 
  background-color: #F8F9EA;
  border: 1pt solid #E5E5D7;
  border-radius: 0.75em; 
  -moz-border-radius: 0.75em; 
  -webkit-border-radius: 0.75em;
  -moz-box-shadow: 1.25em 1.25em 1.5em #BFBFBF;
  -webkit-box-shadow: 1.25em 1.25em 1.5em #BFBFBF;
  box-shadow: 1.25em 1.25em 1.5em #BFBFBF;
}
  #intro a:hover, #intro a:active { color: #086897; }

  #intro dfn { border-bottom: 1pt dotted #777A5B; cursor: help; }

  #intro a:link, #intro a:visited { color: #144766; }


#teaser { margin-top: 0.5em; overflow: hidden; }
  #teaser p { 
    background: rgb(248, 249, 234); opacity: 0.9; margin-top: -2em;
    padding-top: 0.75em;  
    border-top: 4pt solid #122D40;
    border-left: 1pt solid #122D40; border-right: 1pt solid #122D40; 
    border-bottom: 8pt solid #122D40;    
    border-radius: 0.75em;
    -moz-border-radius: 0.75em; 
    -webkit-border-radius: 0.75em;
  }
  #teaser img { width: 100%; height: auto; margin-top: 1em;
    -webkit-transform:rotate(-2deg); /* Not sure about this, looks a bit assy */
    -moz-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    transform:rotate(-2deg); 
  }

#news, #sidebar, aside { border-left: 1pt solid #D8DBC0; background-color: #F8F9EA; }
  #news p, #sidebar p, aside p { padding: 1em 2em; }
  #news .news { border-bottom: 1pt solid #D8DBC0; }

#sidebar, aside { width: 29%; float: left; }

/* =====SPLASH VISUAL INTRO===== */
#splash { display: block;  }
#splash a { display: none; }
  #splash a.show { display: block; }
    #folio #splash img {
      -webkit-filter: grayscale(50%); 
      filter: grayscale(50%);
    }


/* =====MAIN CONTENT TEXT COLUMNS===== */
div.context { 
  display: block; clear: both; margin-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; border-bottom: 1pt solid #D8DBC0; 
}
  div.context img, div.context iframe { margin: 1em; }
  div.context.last { border-bottom: 0; }


/* =====NAVIGATION BAR===== */
#nav a { display: block; 
  background-color: #58683A; 
  opacity: 0.9;
  border: 1pt solid #363F23;
  -moz-border-radius: 1.25em; 
  -webkit-border-radius: 1.25em;
  border-radius: 1.25em;
  width: auto; margin: 0.25em; padding: 0.75em; }

  #nav a:link, #nav a:visited {
    color: #FFF; text-decoration: none; 
  }
  #nav li a:hover { 
    color: #052E77; background-color: #FFF; 
  }


#nav ul { padding: 0; margin: 0; }
  #nav li {
    position: relative; float: left; padding: 0.25em;
  }


  /* =====SUBNAV===== */
  #nav li ul { /* 1st level */
    font-size: 0.8em;
    position: absolute; left: 2em; top: 3em;
    background-color: #F2F2F2;
    z-index: 2;
    display: none;
  }
    #nav li li { padding: 0; }
    #nav li ul a {
      background-color: #F2F2F2;
      border: 0;
      -moz-border-radius: 0!important; 
      -webkit-border-radius: 0!important;
      border-radius: 0!important;
    }
    #nav li ul ul { /* 2nd level */
      position: absolute;
      left: 4em;
      font-size: 1em;
    }
  
  #nav li ul a { padding: 0.5em; }
    #nav li ul a:link, #nav li ul a:visited, #nav li ul a:hover, #nav li ul a:active { color: #052E77; }
      #nav li ul a:hover {
        border-radius: 0em; -moz-border-radius: 0em; -webkit-border-radius: 0em;
      }

  #nav ul ul {top: auto; left: auto; font-size: 0.8em; }
  #nav li li { border: 1pt solid #D8DBC0; width: 12em; }
    #nav li li:hover, #nav li li a:hover { background-color: #E5E2DC; } 
  
  #nav li:hover ul, #nav li:hover li:hover ul { display: block; } /* Subnav appears */
    #nav li:hover ul ul { display: none; /* 2nd level hidden */ }
  
  body#home #nav li.home>a, body#about #nav li.aboutus>a, body#folio #nav li.portfolio>a, body#casestudies #nav li.cases>a, 
  body#extra #nav li.extrastuff>a, body#contact #nav li.contactus>a { /* Nav location effect, top level only */
    background-color: #181918; 
    border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;  
  }
  
  body#home #nav li.home>a:hover, body#about #nav li.aboutus>a:hover, body#folio #nav li.portfolio>a:hover, 
  body#casestudies #nav li.cases>a:hover, body#extra #nav li.extrastuff>a:hover, body#contact #nav li.contactus>a:hover { /* Nav 'on' effect, top level only */
    background-color: #FFF; color: #052E77; border-radius: 0.75em; -moz-border-radius: 0.75em; -webkit-border-radius: 0.75em;
  }

/* =====SUBNAV ON CASESTUDIES===== */
p.subnav { line-height: 200%!important; text-align: center; clear: both; }
.subnav a {
  margin: 0.5em; padding: 0.25em;
  text-decoration: none;
  background-color: #EDEDED;
  border-radius: 0.3em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em;  
}
  .subnav a:hover, .subnav a:active {
    color: #FFF;
    background-color: #BFBFBF;
  }


/* =====FORM ELEMENTS===== */
form { width: 100%; }
fieldset { 
  width: 100%; 
}
  fieldset.multi { border-bottom: 1pt solid #A3AE67; padding-bottom: 0.75em; }

legend { font-weight: 900; font-size: 1.25em; padding: 1em; }

div.field { display: block; clear: both; padding-bottom: 0.5em; }
  div.field p.advice { clear: both; font-size: 0.9em; margin-left: 12em; padding-bottom: 1em; }

label { text-align: right; float: left; width: 10em!important; margin: 0 1em 0;  }
  label, input, textarea, select { height: 1.75em; }
  input, textarea, select {
    width: 60%; margin: 0 0.5em 0.5em 0.5em;
  }
  input, textarea, select { border: 1pt solid #BFBFBF; background-color: #F9F9F9; } /* Remove nasty border in Firefox */
    select, textarea { margin-bottom: 0.75em; } /* Give extra spacing for these */
      input:focus, textarea:focus { background-color: #F8FCEE; }
      textarea { height: 10em; }
 
      input.button, input#searchsubmit { float: right; width: auto; margin: 1em 2em 1em 0; }
        input.button, p.call_to_action a, input#searchsubmit {
          padding: 0 0.75em; color: #FFF;
          border: 1pt solid #859947;
          background-color: #627239; 
          background-image: url(../images/bg.gif); background-repeat: repeat-x; background-position: center left;
          -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; border-radius: 0.7em;
        }
          input.button:active, p.call_to_action a:active, input#searchsubmit:active {
            border: 1pt solid #4F5B2C;
            background-color: #3E5403; 
            background-image: url(../images/on.gif); background-repeat: repeat-x; background-position: center left;
          }
          input.button:focus, p.call_to_action:focus, input#searchsubmit:focus { background-color: inherit; }

          p.call_to_action { 
            width: auto!important; text-align: right; padding: 1em;
          }
            p.call_to_action a { font-size: 95%; }
            p.call_to_action a, p.call_to_action a:visited, p.call_to_action a:hover, p.call_to_action a:active { 
              color: #FFF!important; text-decoration: none; 
            }

div.multi { margin: 0.75em 0; } /* Tickbox & Radio buttons */
  div.multi label { float: none; display: block; text-align: left; width: 100%!important; }
  div.multi p.required { text-align: left; margin-left: 10em; width: auto!important; }
  div.multi input {
    width: auto; float: none; display: inline; margin-bottom: 0; margin-left: 18em; position: relative; top: 0.15em; 
  }

.required { font-weight: 700; }


/* =====FOOTER===== */
#footer, footer { border-top: 1pt solid #D8DBC0; padding: 0.5em; }
#footer p, footer p { text-align: center; font-size: 0.7em; padding-bottom: 1em; }

#footer p.nav, footer p.nav { font-size: 0.8em; padding: 1em; color: #D8DBC0; } 
  #footer .nav a:link, footer .nav a:link { text-decoration: none; padding: 0.25em; }
    #footer .nav a.contactus, footer .nav a.contactus { border-right: none; }
    #footer nav a:visited, footer .nav a:visited { color: #1A3C77; }


/* =====TESTIMONIALS===== */
.testimonials  blockquote {
  margin: 4em 1em 1em; padding: 0.5em; font-size: 0.9em; padding-top: 1em;
  background-color: #F6F2CD;
  border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em;
  
}


/* =====FOLIO SPREAD===== */
.folio_spread { margin: 1em; text-align: center; }
  .folio_spread div { float: left; }
    .folio_spread div p { padding: 0.5em 0.5em 0.25em!important; }
    .folio_spread div img { width: 92.78048780488%; /*  */ height: auto; margin: 0 auto 0.5em; }
    .folio_spread div img.special { width: 72%; height: auto; }
    /* There's one more before max-width 839px */


/* =====LIGHTWINDOW/COLORBOX CUSTOM===== */
a:link.cboxElement, a:visited.cboxElement, a:active.cboxElement { border: 0px solid #FFF!important; }


/* =====RESPONSIVE DESIGN===== */      
@media screen and (min-width: 650px) { /* Styles relevant beyond mobile */
  body { font-size: 0.8em; }
  #masthead, header { height: 10em; }
  .logo img { float: right; width: 30%; margin-top: 1em; margin-right: 1em; }
  #nav { padding: 2em 0 0 2em; } 

  #news p, #sidebar p, aside p { font-size: 0.8em; }
  div.context { 
    -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
    -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em;
  }
    #div.context iframe, div.context iframe, div.context iframe { min-height: 40%; } /* FAULTY */
  div.context.block, div.context.intro, body.testimonials div.context.intro, body.terms div.context { 
    -moz-column-count: 1!important; -webkit-column-count: 1!important; column-count: 1!important; 
    padding-top: 2em;
  }   
    input.button, input#searchsubmit { font-size: 1em; }
    div.context img, div.context object, div.context iframe { 
      width: 90%; 
    }
		
      body.bookcovers div.context img, body.posters div.context img, body.vr div.context img, img.bookcover, img.brochure, img.photo, img.poster, img.vr { 
        width: 70%!important; height: auto;
      } 
      body.brochures div.context img  { width: 40%; } 
      body.cid div.context img, body.illustrations div.context img, img.cid, img.illustration, img.vr { 
        width: 70%!important;  
      }
}

@media screen and (max-width: 839px) {
  body { font-size: 0.9em; }
  .logo img { float: right; width: 40%; margin-top: 0.8em; margin-right: 0.8em; }
  #masthead, header { height: 12em; }
  #nav { margin: auto; float: none; clear: both; } 
  textarea.enquiry { margin-left: 16em; }
  input.button, input#searchsubmit { margin: 0.75em 2em 0.75em 0; }

  .folio_spread div { width: 43.39599609375%; margin: 1.5625%;  }  
  .brochures .folio_spread div, .cid .folio_spread div, .posters .folio_spread div, .vr .folio_spread div { float: left; width: 48%; margin: 0.25em; }
}

@media screen and (max-width: 649px) { /* Must go after min-width, else it conflicts */
  body { font-size: 0.8em; }
  #masthead, header { height: 23em; padding-top: 2em; }
  .logo img { display: block; float: none; width: 90%; margin: 0 auto 0.5em; }
  #nav { text-align: center; font-size: 1em; margin-top: 0; padding: 0 0 0 1.5em; }
    #nav li { width: 45%; }
      #nav li li { display: none; }
      
    .main { width: 95%!important; float: none; margin: auto; }
    #intro, #teaser, #news, #sidebar, aside { width: 90%!important; clear: both; padding-bottom: 2em; margin: 1em auto 1em!important; }
      #intro { 
        padding: 0.5em; 
        -moz-box-shadow: 0 0 0 #FFF;
        -webkit-box-shadow: 0 0 0 #FFF;
        box-shadow: 0 0 0 #FFF;  
      }
    #news, #sidebar, aside { 
      border-radius: 0.75em; 
      -moz-border-radius: 0.75em; 
      -webkit-border-radius: 0.75em;
      border: 1pt solid #D8DBC0; 
    }
        #news p, #sidebar p, aside p { font-size: 1em; }
 
   div.context.intro p { font-size: 1em; }
  
  form { width: 100%; }
    label { width: 8em; text-align: left; }
    input, textarea { margin-left: 2em; width: 80%; }
      div.multi label { display: block; width: 100%; } 
			div.multi p.required { margin-left: 3em!important; }
      div.multi input { margin-left: 2em; }
      div.field p.advice { margin-left: 1em; }
    body#casestudies .context img, body#casestudies .context object, body#casestudies .contextiframe, body#featured .context img, body#featured .context object, body#featured .context iframe, body#folio .context img, body#folio .context object, body#folio .context iframe, body#extra .context img, body#extra .context object, body#extra .context iframe { 
          display: block; width: 90%; margin: 1em auto 1em; 
        }
  .brochures .folio_spread div, .cid .folio_spread div, .posters .folio_spread div, .vr .folio_spread div { 
    float: none; width: 100%; margin: 0.5em; 
    }
  .folio_spread div { width: 94.7265625%; }
}

@media screen and (min-width: 650px) {
  body { font-size: 1em; }
  #nav { font-size: 0.9em; }
  
  body#folio div.context { 
    -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
  }
    body#folio.folio div.context, body#folio.testimonials div.context { 
      -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
    }
  
  textarea.enquiry { margin-left: 18em; }
  .folio_spread div { width: 32.03125%; margin: 0.651025390625%; }
  .main { width: 70%; float: left; }
    #intro p { padding-top: 1em; }
    #intro, #teaser, #news, #sidebar, aside { float: left; clear: none!important; }
    #intro, #teaser { width: 95%; margin-left: 0.75em; clear: both; margin-top: 1em; }
  #news, #sidebar, aside { width: 29%; }
}

@media screen and (min-width: 1025px) {
  #masthead, header { height: 15em; }
  #intro, #teaser, #news { float: left; padding-bottom: 1em; } 
     #intro { width: 28%; margin: 1em 1em 1em 1.25%; }
      #intro p { margin-top: 0; }
      #intro, #teaser { width: 47%; }
      #news, #sidebar, aside { width: 29%; }
  .logo img { float: right; width: 30%; margin-top: 1em; margin-right: 1em; }
  body#folio div.context { 
    font-size: 1.15em;
  }
}
@media screen and (min-width: 1200px) { /* Big screens */
  .logo img { margin-top: 2em; margin-right: 2em; }
  input.button, p.call_to_action, input#searchsubmit { font-size: 0.9em; }
}

@media screen and (min-width: 1300px) { /* Super Large */
  body { background-color: #F0F0F0; } 
  .main { width: 910px;}
  #intro, #teaser { width: 420px; margin: 1em 16px; }
  #news, #sidebar, aside { width: 386px!important; }
  #container { width: 1300px; margin: 0 auto; border-left: 1pt solid #DADBCD; border-right: 1pt solid #DADBCD;}
   .folio_spread div { width: 23.14453125%; margin: 0.927734375%; }
}