@font-face {
  font-family: 'Dosis';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Dosis-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Dosis-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Dosis-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Dosis-700.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Dosis-700.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Dosis-700.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Dosis';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Dosis-500.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Dosis-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Dosis-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Dosis-500.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Dosis-500.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Dosis-500.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Dosis';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Dosis-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Dosis-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Dosis-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Dosis-regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Dosis-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Dosis-regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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;
}
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;}
body {padding:0; margin: 0 auto; font-family:'futura-pt', sans-serif; font-weight: 400; line-height:18px; color:#a9c0c4; background: url(../images/header.jpg) repeat-x scroll top center  #182029;}
header {margin-bottom: 10px;}
.topbar {background: #242d36; height: 64px; border-bottom: 7px solid #2c3741; position: relative; z-index: 9999; box-shadow: 0 5px 0 rgba(0,0,0,.18);}
.washu img {margin-top: 12px;}
.arch {position: relative; bottom: 3px; right: 15px;}
.dept {text-align: right;}
.dept a {font-family: 'Dosis', sans-serif; font-size: 1.125em; margin-top: 22px; display: inline-block;}
.navwrap {background: rgba(14,24,33,.46); box-shadow: 0 0 3px rgba(0,0,0,.78);}
.navigation {padding: 0 !important; position: relative; z-index: 999;}
.branding h2, .branding h2:visited {background: url("../images/teal-pattern.png") repeat scroll 0 0 #209D9F; box-shadow: 0 0 18px rgba(0, 0, 0, 0.26) inset; color: #FFFFFF; font-family: 'futura-pt',sans-serif; font-size: 31px; font-style: normal; font-weight: 700; height: 51px; position: relative; padding-top: 16px; text-align: center; text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 -3px 20px #81FDFD; width: 98%; transition: all ease-in-out 300ms;}
.branding h2 span {text-transform: uppercase; font-size: 20px; font-weight: 300; letter-spacing: 6px; margin-left: 4px;}
.branding h2:hover, .branding h2:active { background: #39b6b8; transition: all ease-in-out 300ms;}

/*------------------------------------------------------*/

/* Home Page Styles */
.content-area {background: #242d36; top: 38px; box-shadow: 0 0 2px rgba(0,0,0,0.25); line-height: 1.4; font-size: 1.125em; font-weight: 300; padding: 10px 23px !important; height: 356px;}
.content-area p {position: relative;z-index: 9;margin-bottom: 24px;}
.content-area:after {background: none repeat scroll 0 0 #2B353E;bottom: 21px;content: "";display: block;height: 38px;left: 0;position: absolute;width: 100%;}

/*------------------------------------------------------*/

/* Interior Page Styles */
.interior .content-area {height: auto;min-height: 356px;margin-bottom: 38px;}
.interior .content-area:after {display: none;}
.sidebar {margin-top: 38px;background: #182029;}
#thePageTitle {font-size: 1.125rem;margin-bottom: 20px;padding-top: 14px;}
.bread_crumbs {font-family: 'dosis';font-size: 0.85em;font-weight: 700;margin-bottom: 33px;border-bottom: 1px solid #182029;padding-bottom: 3px;}
a.bread_crumbs {font-family: futura-pt;font-size: 1.125em;font-weight: 400;padding: 0 5px;border-bottom: 0 none;}
a.bread_crumbs:first-child {padding-left: 0;}
.portrait {background: none repeat scroll 0 0 #3e4a55;border-radius: 5px;float: left;height: 400px;margin: 0 5% 5% 0;padding: 1em;width: 45%;}
.portrait > div {background: url(../images/portrait-bg.jpg) repeat scroll 0 0 #1D262D;height: 250px;overflow: hidden;text-align: center;margin-bottom: 7px;}
.portrait img {height: 250px;width: auto;}
.content-area h2 {margin-bottom: 12px;}
/* Publications Specific Styles */
.interior.publications .content-area p {font-size: 0.875em; background: #182029; border-radius: 5px; padding: 10px; min-height: 90px;}
.interior.publications .content-area img {margin-left: 20px;}

/*------------------------------------------------------*/

/* Text Styles */
a {font-weight:normal; color:#209d9f; text-decoration:none;}                
a:hover {color:#25b1b3;}
a.commentary {color: #BED5D9;}
a.commentary:hover {color:#fff;}
a img {border: none;}
h1 {font-family:'Dosis', sans-serif;font-style:normal;font-weight:400;font-size:2em;line-height: 1;color:#209d9f;margin:10px 0 15px;}
h1 a, h1 a:visited {color:#548a44; text-decoration:none; }  
h1 a:hover, h1 a:active { color:#548a44;text-decoration:underline; }
h1.inline {display: inline-block; float: left; margin-bottom: 5px; margin-right: 10px; margin-top: 4px; position: relative; z-index: 1;}
h1.inline + hr {clear: none; border-color: #18212A; border-style: solid; border-width: 1px 0 0; height: 0; margin: 26px 0 22px;}
h2 {font-family:'futura-pt', sans-serif; font-style:normal; font-weight:400; font-size:20px; color:#eee;}
h2 a, h2 a:visited {color:#eee; text-decoration:none;}  
h2 a:hover, h2 a:active {color:#eee; text-decoration:underline;}

/*------------------------------------------------------*/

/*  Footer Styles  */
footer .row {border-top: 1px solid #12181e;padding-top: 15px;margin-top: 40px;}
footer p {color: #7b848e;line-height: 1.4;}
footer span {display: inline-block;margin:0 10px;}
footer .address p:last-child{padding-bottom: 16px;}
.social {float: right;}
.social li {margin-left: .5rem !important;}
.social a {background: url(../images/social-sprite.png) no-repeat scroll 0 0;display: block;height: 43px;text-indent: -9999px;width: 43px;}
.social .fb a {background-position: left top;}
.social .fb a:hover, .social .fb a:active {background-position: left bottom;}
.social .tw a {background-position: right top;}
.social .tw a:hover, .social .tw a:active {background-position: right bottom;}
.design {border-top: 1px solid #12181e;padding-top: 15px;margin-bottom: 20px;color: #7B848E;}
.design span {padding: 0 10px;}

/*------------------------------------------------------*/

/*  Media Queries  */
@media all and (max-width: 768px) {
    .branding h2 {width: 100%;}
    .topbar {height: auto;padding-bottom: 20px;}
    .washu, .dept, .branding {text-align: center;}
    .content-area {height: auto;top: 0;}
    .content-area:after {display: none;}
}

@media all and (max-width: 640px) {
    .sidebar {display: none;}
    .content-area {margin-top: 10px;}
    .interior .content-area {top: 0;}
    .portrait {width: 100%;}
}

@media all and (max-width: 480px) {
    .portrait {height: auto;}
    .portrait > div {height: 300px;}
    .portrait img {height: auto;width: 100%;}
    .portrait p {margin-bottom: 5px;}
}