/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Modified by Aubyn Freybe-Smith for the Andrew Warfield website
 */


/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* END RESET CSS */


/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { font-size: 62.5%; /* 10px */ background-color: rgb(1, 1, 1); }/*54, 63, 69);  }*//*250,250,250); }*/

body, button, input, select, textarea { font-family: sans-serif; color: #F1F1E7; }


/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================

   Links
   ========================================================================== */

a { 
        color: #5E7C88;
        text-decoration: none;
        border-bottom: dotted 1px #999;
}
/* a:visited { color: #551a8b; } */
a:hover { text-decoration: none; color: #ff8888; border-color: #fff; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1.4286em 0; /* 20px */ padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

nav ul, nav ol { list-style: none; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img { border: 0; -ms-interpolation-mode: bicubic; }

/*
 * Correct overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }

/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { font-size: 14px; font-family: font-family: 'Open Sans', sans-serif;}
tr { padding-bottom: 30px; }

/* =============================================================================
   Grid Framework
   ========================================================================== */

/* from Tiny Fluid Grid
 & Columns : 12 
 & Gutter %: 50%
 note: ratios of: 960px total width; 920px content width; 40px col; 40px gutter; with half-gutter on either side for margins
 */
.grid_1 { width: 4.1666666666667%; }
.grid_2 { width: 12.5%; }
.grid_3 { width: 20.833333333333%; }
.grid_4 { width: 29.166666666667%; }
.grid_5 { width: 37.5%; }
.grid_6 { width: 45.833333333333%; }
.grid_7 { width: 54.166666666667%; }
.grid_8 { width: 62.5%; }
.grid_9 { width: 70.833333333333%; }
.grid_10 { width: 79.166666666667%; }
.grid_11 { width: 87.5%; }
.grid_12 { width: 95.833333333333%; }

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 {
        margin-left: 2.0833333333333%;
        margin-right: 2.0833333333333%;
        float: left;
        display: block;
}

/* unneeded because have both margin right and left */
.alpha { margin-left:0; }
.omega { margin-right:0; }


/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 { padding-left:8.333%; }
.container_12 .prefix_2 { padding-left:16.667%; }
.container_12 .prefix_3 { padding-left:25.0%; }
.container_12 .prefix_4 { padding-left:33.333%; }
.container_12 .prefix_5 { padding-left:41.667%; }
.container_12 .prefix_6 { padding-left:50.0%; }
.container_12 .prefix_7 { padding-left:58.333%; }
.container_12 .prefix_8 { padding-left:66.667%; }
.container_12 .prefix_9 { padding-left:75.0%; }
.container_12 .prefix_10 { padding-left:83.333%; }
.container_12 .prefix_11 { padding-left:91.667%; }

/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 { padding-right:8.333%; }
.container_12 .suffix_2 { padding-right:16.667%; }
.container_12 .suffix_3 { padding-right:25.0%; }
.container_12 .suffix_4 { padding-right:33.333%; }
.container_12 .suffix_5 { padding-right:41.667%; }
.container_12 .suffix_6 { padding-right:50.0%; }
.container_12 .suffix_7 { padding-right:58.333%; }
.container_12 .suffix_8 { padding-right:66.667%; }
.container_12 .suffix_9 { padding-right:75.0%; }
.container_12 .suffix_10 { padding-right:83.333%; }
.container_12 .suffix_11 { padding-right:91.667%; }

/* Sub-column Adjustments ------------------------*/
.container_12 .grid_6 .grid_4.alpha{width:63.6364%; margin-right: 9.091%;}
.container_12 .grid_6 .grid_4.omega{width:63.6364%; margin-left: 9.091%;}


/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}




/* =============================================================================
   Primary styles
   Author: Aubyn Freybe-Smith
   ========================================================================== */

.test_showborder {
        border: solid 1px red;  
}

.container_12 {
        /* background: url(../graphics/test_grid_20blx40cx40g.png) 2.3% 0; */
        width: 960px; /* */
        margin: 0 auto;
}

/* header */
header {
        width: 960px; /* */
        //position: fixed;
        top: 0;
        background-color: rgb(64,56,52);/*166,181,161);*/ /* for ie 6-8 */
        background-color: rgba(64, 56, 52, .095); /*166,181,161,0.95);*/
        padding-top: 2em; /* 60px */
        padding-bottom: 3px; /* 60px */
        border-bottom: 1px dotted #F1F1E7;
}
.ie7 header {/* fixes bg being transparent in ie7 */
        background: #403834; /*#A6B5A1;*/
}
header a {
        color: #333;
        text-decoration: none;
        display: block;
        border: none;
}
header a sup { /* small numbers in each button ie "1c" */
        color: #666;
        font-weight: normal;
        font-size: 75%;
}
.ieAll header a sup { /* targets IE 6-9 */
        font-size: 80%; 
}
header a:hover {
        color: #000;
}
header a:hover sup {
        color: #000;
}
header h1 {
        //width: 12.5%; /* grid_2 */
        //margin-left: 2.0833333333333%;
        //margin-right: 2.0833333333333%;
        margin-top: 0;
        float: left;
        //line-height: 0.8em; /* 20px from 25px text */
        color: #F1F1E7;
        font-size: 48px;
        font-family: 'Helvetica', sans-serif;
        //font-family: 'Special Elite', cursive;
        //font-family: 'Coustard', serif;
}
header h2 {
        //width: 12.5%; /* grid_2 */
        margin-left: 2.0833333333333%;
        //margin-right: 2.0833333333333%;
        margin-top: 0;
        float: right;
        //line-height: 0.8em; /* 20px from 25px text */
        color: #686A6C;
        font-size: 12px;
        //font-family: 'Special Elite', cursive;
        //font-family: 'Coustard', serif;
}
header nav {
        width: 81.23%; /* grid_10 + margin-right added */
        margin-left: 2.0833333333333%;
        float: left;
}
header nav ul {
        margin: 0;
}
header nav ul li {
        float: left;
        margin: 0;
}
header nav ul li a {
        padding: 0 16px;
        border: dotted 1px #ccc;
        border-right: none;
        background-color: #fff;
        font-family: Arial, Helvetica, sans-serif; /* so that the width of the text is fairly consistent cross-browser */
        font-size: 12px; /* use px here so that user can't change */ /* 0.8571em = 12px from 14px */
        font-weight: bold;
        line-height: 3.1667em; /* 38px from 12px text = compensate for 1px borders on top and bottom of LIs */
}
header nav ul li.page a { /* for links to new pages (not anchors in the same page */
        border: solid 1px #ddd;
}
header nav ul li a:hover {
        border-color: #333;
        border-style: solid;
        border-width: 1px; /* added this to see if stops ipad issue of rendering 5px default right border on hover */
}
/* the current page's button */
header nav ul li.active a {
        background-color: #777;
        color: #fff;
        border-color: #555;
}
header nav ul li.active a sup {
        color: #eee;
}
/* next 2 classes are applied by jQuery */
li.headernav_hover a {
        border-right: solid 1px #333;
}
li.headernavnext_hover a {
        border-left: none !important;   
}
/* INCOMPLETE / UNUSED, FINISH IF NEEDED. subnav, at least on publications page */
header nav ul#sub {
        margin-top: 4em;        
}
header nav ul#sub li a {
        border: none;
        background: none;
        line-height: 3.3333em; /* 40px from 12px text */
}


section {
        margin-top: 3em; /* 80px */
}
section.first {
        margin-top: 3em; /* 160px */
}

/* "back to top" links */
div.backtotop {
        display: none;
}

/* for each section's numbered circle */
        /* font-size is default = 10px */
        border-radius:50%;
        -moz-border-radius:50%;
        -webkit-border-radius:13px;     /* fix to be expandable */
        background-color: #fff;
        height: 2.6em;
        width: 2.6em;
        line-height: 2.7em; /* should be 2.6 = slight adjustment down */
        margin-top: 2.5em;
        text-align: center;
        font-weight: bold;
        color: #333;
        border: solid 1px #ddd;
        float: right;
        /* font-family: Georgia, "Times New Roman", Times, serif; */
}

/* h1,h2,h3,h4,h5,h6 { font-family: sans-serif; } */
h1, h2, h3 { letter-spacing: -0.04em; } /* .04*25 = 1, which means H1 + H2s will have tighter kerning for Google, Safari, IE6-7 */
h1 { font-size: 2.5em; /* 25px */ line-height: 1.6empx; /* 40px */ margin-top: 0.8em; margin-bottom: 0em; color:#FEB41C; font-family: 'Rokkitt', serif;} /* used for logo/name */
h2 { font-size: 3em; /* 30px */ line-height: 1.3333em; /* 40px */ margin-top: 0.6667em; margin-bottom: 0em; color: #5E7C88; font-family: font-family: 'Open Sans', sans-serif; font-weight: 600;}
h3 { font-size: 2.2em; /* 22px */ line-height: 1.8182em; /* 40px */ margin-top: 0.9091em; margin-bottom: 0em; color: #5E7C88; font-family: font-family: 'Open Sans', sans-serif; font-weight: 600;}
body#publications h3 {
        margin-top: 1.8182em; /* 40px, for more separation on publications page */      
}
h4 { font-size: 1.4em; /* 18px */ line-height: 1.1111em; /* 20px */ margin-top: 1.1111em; margin-bottom: 0em; }

/* styles for most regular body copy */
p, ol, ul, dl, pre, code { 
        font-size: 1.4em; /* 14px */ line-height: 1.4286em; /* 20px */ margin-top: 1.4286em; margin-bottom: 0em; font-family: 'Open Sans', sans-serif;
}

p img, ul img, ol img, dl img, pre img, code img {
        margin-top: 1.4286em; /* 20px */
}
img {
        margin-top: 2em; /* 20px from 10px font */
        vertical-align: top;
        max-width: 100%; /* images display at their native size, but never more than 100% of their container's width */ /* ie6 won't recognize this */
}
ul li, ol li {
        margin-top: 0.7143em; /* 10px (1/2 a line height) from 14px text */
}
/* add hyphenation for skinny columns */
.grid_2 p, .grid_3 p, .grid_4 p {
        /* still a working draft in CSS3, supported by FF6 and Safari5.1 */
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
}

/* largest-size text */
p.large_text, ul.large_text, ol.large_text, dl.large_text {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 2.2em; /* 22px */ line-height: 1.3636em; /* 30px */ margin-top: 0.9091em; /* 20px */ margin-bottom: 0em;
}
p.large_text img, ul.large_text img, ol.large_text img, dl.large_text img {
        margin-top: 9.9091em; /* 20px */
}
ul.large_text li, ol.large_text li {
        margin-top: 0.3846em; /* 10px (1/2 a line height) from 26px text */
}
/* medium-size text */
p.medium_text, ul.medium_text, ol.medium_text, dl.medium_text {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1.8em; /* 18px */ line-height: 1.1111em; /* 20px */ margin-top: 1.1111em; /* 20px */ margin-bottom: 0em;
}
p.medium_text img, ul.medium_text img, ol.medium_text img, dl.medium_text img {
        margin-top: 1.1111em; /* 20px */
}
ul.medium_text li, ol.medium_text li {
        margin-top: 0.5em; /* 10px (1/2 a line height) from 20px text */
}
/* small-size text */
p.small_text, ul.small_text, ol.small_text, dl.small_text {
        font-size: 1.2em; /* 12px */ line-height: 1.6667em; /* 20px */ margin-top: 1.6667em; margin-bottom: 0em;
}
p.small_text img, ul.small_text img, ol.small_text img, dl.small_text img {
        margin-top: 1.6667em; /* 20px */
}
ul.small_text li, ol.small_text li {
        margin-top: 0.8333em; /* 10px (1/2 a line height) from 12px text */
}

/* contact section */
section#contact dl {
        font-size: 1em; line-height: 2em; /* reset fonts back to base size, and this size will apply to DTs */
        float: left;
        border: solid 1px #bbb;
        border-right: none;
        margin: 2em 0 0 0;
        height: 17.9em; /* to compensate for 1px border-bottom */
        padding-top: 1.9em; /* to compensate for 1px border-top */
        text-align: center;
        background-color: #fff;
}
section#contact dl#email { width: 31.4%; }
section#contact dl#phone { width: 29.4%; }
section#contact dl#mail {
        width: 38.6%;
        border-right: solid 1px #bbb;   
}
section#contact dl dt {
        font-weight: bold;
        color: #888;
    text-transform: uppercase;
}
section#contact dl#email dd, section#contact dl#phone dd {
        font-size: 2.2em;
        letter-spacing: -0.039em;
        line-height: 0.9091em;
        margin-top: 2.2727em; /* 50px from 22px text */ 
}
section#contact dl#mail dd {
        font-size: 1.4em; /* 14px */ line-height: 1.4286em; /* 20px */ margin-top: 1.4286em; margin-bottom: 0em;
}

/* news section */
section#news ul {
        font-size: 1em; line-height: 2em; margin-top: 2em; /* reset fonts back to base size */
}
section#news ul li {
        list-style: none;
        margin-top: 2em; /* 20px */
}
section#news ul li time {
        display: block;
        width: 20%;
        padding-right: 2%;
        float: left;
        font-family: /* 'Crimson Text', */ Georgia, "Times New Roman", Times, serif;
        font-size: 2.2em; /* 22px */ line-height: 0.9091em; /* 20px */
        letter-spacing: -0.039em;
}
section#news ul li p {
        font-size: 1.2em; /* 12px */ line-height: 1.6667em; /* 20px */ margin:0;
        margin-left: 22%;
}


footer {
        margin-top: 16em;
        padding-bottom: 30em;   
}
footer ul {
        border-top: solid 1px #999;
        padding-top: 3.3333em; /* 40px, the ul has class "small_text" */
}
footer ul li {
        list-style-type: none;
        float: left;
        padding-right: 5%;
        margin-top: 0 !important;
}
footer ul li:first-child {
        padding: 0;
        width: 17.3913%; /* 2 cols */
}
footer ul li:last-child {
        float: right;
        padding: 0;
        /* margin-top: 0; */
}




/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* =============================================================================
   Media Queries for Responsive Design.
   ========================================================================== */