/* Step #1 - Eric Meyer's Reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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; }

/* Step #2: */
@font-face {
    font-family: 'District Pro';
    src: url('fonts/distproth-webfont.eot');
    src: url('fonts/distproth-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/distproth-webfont.woff') format('woff'),
         url('fonts/distproth-webfont.ttf') format('truetype'),
         url('fonts/distproth-webfont.svg#district_prothin') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Step #2: Global Styles */

html { position: relative; overflow-x: hidden; background: url(images/bg.png) repeat top left; }

body 
{
    position: relative;
    font-family: 'Droid Sans', Sans-Serif; font-size: 16px; line-height: 140%; color: #333333; 
    max-width: 960px; width: 95%;
    margin: 0 auto;
}

h1 { font-family: 'District Pro', 'Droid Sans', Helvetica, sans-serif; font-size: 2.5em; line-height: 1.2em; margin: 10px 0 15px; }
h2 { font-family: 'District Pro', 'Droid Sans', Helvetica, sans-serif; font-size: 1.8em; line-height: 1.2em; margin: 0 0 5px 0; }
h3 { font-size: 1.3em; line-height: 1.2em; margin-bottom: 5px; }
h4 { font-size: 1.0em; line-height: 1.2em; margin-bottom: 5px; }
h5 { font-size: .95em; line-height: 1.2em;  margin-bottom: 2px; }
h6 {}
p { margin-bottom: 1em; line-height: 160%; /*-moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;*/ }
ul {}
ol {}
li {}
strong { font-weight: bold; }
em { font-style: italic; }
u {}
a { text-decoration: none; color: #4495c0; -webkit-transition: ease .5s; -moz-transition: ease .5s; -o-transition: ease .5s; transition: ease .5s; }
a:active { outline: none; }
a:visited { color: #4495c0; }
a:hover { outline: none; text-decoration: none; color: #ffffff; }
table { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
tr {}
th {}
td {}
img {}

/* Step #3: Specific Styles */

#content, #primary, #secondary, #tertiary, header, footer, .info, #banner, #announcement, #meeting, .listing li
{ -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.button, a.button { background: #ffcc00; color: #ffffff; text-align: center; padding: .3em 1em;}
.button:hover, a.button:hover { background: #996699; }
.vcard, .org, .street-address, .adr, .tel { display: block; }

.TextPage #primary, .Project #primary, .Article #primary, .ArticleListing article, .listing li, .MeetingsAndMinutes #primary, .Gallery #primary { 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yNiIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yNiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.26) 60%, rgba(255,255,255,0.26) 61%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(255,255,255,0.26)), color-stop(61%,rgba(255,255,255,0.26)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.26) 60%,rgba(255,255,255,0.26) 61%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.26) 60%,rgba(255,255,255,0.26) 61%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.26) 60%,rgba(255,255,255,0.26) 61%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.26) 60%,rgba(255,255,255,0.26) 61%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
}

#recent-articles .listing li, .ArticleListing article { padding: 2em 2.25% }
.pager span, .pager a { padding: .25em .5em; }

/*___ DIV _________________________________________________________________*/

#container { position: relative; background: url(images/bgTop.png) no-repeat center 40px; padding-top: 4em; } 
header { position: relative; display: block; background: #f4f4f4; }


#content
{
    /*position: relative;*/
    display: block;
    padding: 0;
    margin: 0 auto 2em;
    clear: both;
    /*padding-bottom: (footer height);*/
}

.twoColumn { word-spacing: -1em; }

#primary { position: relative; display: inline-block; width: 100%; margin: 0 auto; padding: 2%; word-spacing: normal; vertical-align: top; }
.oneColumn #primary { width: 100%; }
.ProjectCategory #primary { padding: 0; }  
.ArticleListing article { margin: 0 0 1em; }                                                                                                                      

#banner { width: 100%; display: block; margin: -1em 0 4.5em; padding: 2.25em 4% .1em; position: relative; background: #616b50; color: #ffffff; clear: right; word-spacing: normal; }
.HomePage #banner { padding: 0; margin-bottom: 0; }
#banner:after { content: url(images/bgHomePrimary.png); position: absolute; bottom: -63px; right: 0; left: 0; overflow: hidden; z-index: 1; }
.HomePage #announcement, .HomePage #meeting { padding: 3.5em 3% 1em; }
.HomePage #announcement { overflow: hidden; }
.HomePage #meeting { 
   background: #505842; /* Old browsers */
background: -moz-linear-gradient(top,  #505842 60%, #616b50 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#505842), color-stop(100%,#616b50)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #505842 60%,#616b50 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #505842 60%,#616b50 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #505842 60%,#616b50 100%); /* IE10+ */
background: linear-gradient(to bottom,  #505842 60%,#616b50 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505842', endColorstr='#616b50',GradientType=0 ); /* IE6-9 */
 
    }

#featured { overflow: hidden; position: relative; margin-bottom: 2em; }
#featured .info { position: absolute; bottom: 5px; right: 0px; background: #000; background: rgba(0,0,0,.4); color: #ffffff; width: 100%; padding: 1% 2%; -webkit-transition: ease .5s; -moz-transition: ease .5s; -o-transition: ease .5s; transition: ease .5s; }
#featured .info:hover { background: rgba(0,0,0,.5); }

#secondary
{ position: relative; width: 100%; display: inline-block; word-spacing: normal; vertical-align: top; float: right; }

footer
{
    position: relative;
    display: block;
    background: #a3a3a3;
    background: rgba(0,0,0,.16);
    padding: 2em 2.25%;
    overflow: hidden;
    /*height: set height for footer push;*/
    /*margin-top: negative height of footer;*/
}

.vcard { border-bottom: 1px solid #888888; text-align: center; padding-bottom: 1.5em; margin-bottom: 1.5em; }

footer + .info { margin: 1em 0; font-size: .875em; text-align: center; }
.clear { clear: both; }


/*___ SPAN _________________________________________________________________*/

h1 span { font-size: .5em; }
.date { display: block;  font-size: .875em; padding-bottom: .5em;  }
a .date { color: #333; border-bottom: 1px solid #888888; margin-bottom: 1.5em; }
.pager span { border: 1px solid #888888; }
.vcard .type { display: none; }
.vcard .adr { margin-bottom: 1em; }

/*___ H1 _________________________________________________________________*/
header h1 { margin: 0; padding: .5em 0; }
.HomePage #banner h1, #featured h1 { font-size: 2.25em; }

#featured h1 { text-shadow: 1px 1px 3px #000; line-height: 1em; }

/*___ H2 _________________________________________________________________*/
.HomePage #content h2 { font-size: 1.625em}

#recent-articles .listing h2 { margin-bottom: .5em; }
.listing a:hover h2 { color: #ffffff; }
footer h2 { font-size: 2.25em; margin-bottom: .2em; }

/*___ H3 _________________________________________________________________*/

/*___ H4 _________________________________________________________________*/

/*___ H5 _________________________________________________________________*/

/*___ H6 _________________________________________________________________*/

/*___ P _________________________________________________________________*/

.listing a p { color: #333; }
.copyright { margin-bottom: 0; }

/*___ UL/OL _________________________________________________________________*/

#top { display: block; position: absolute; right: 0; top: -45px; z-index: 1; }

.TextPage #primary ul { margin: 15px 0 15px 30px; list-style-type: disc; }
.TextPage #primary ul ul { list-style-type: circle;     line-height: 17px; }
.TextPage #primary  ul ul ul { list-style-type: square; }

.TextPage #primary ol { margin: 15px 0 15px 30px; list-style-type: decimal; }
.TextPage #primary ol ol { list-style-type: lower-alpha; line-height: 17px; }
.TextPage #primary ol ol ol { list-style-type: lower-roman; }

.TextPage .breadcrumb, .breadcrumb { font-size: .8rem; list-style-type: none; margin: 0 0 20px 0; }
.TextPage header ul, .TextPage #secondary ul { margin: 0; list-style-type: none; }

.listing { display: block; overflow: hidden; }
.MeetingsAndMinutes #primary ul { margin: .5em 0 1em; }

#secondary > ul { position: relative; font-family: 'District Pro', sans-serif; font-size: 1.375em; }
#secondary > ul ul { font-size: .7333333em; font-family: 'Droid Sans', sans-serif;  text-align: left; margin-top: .5em;}


/*___ LI _________________________________________________________________*/

#top li { display: inline-block; color: #ffffff; }
#top li:before { content: "| "}
#top li:first-child:before { content: none; }

#main li { position: relative; z-index: 7; }
.ie7 .menu li { display: inline; }
.menu li:first-child { margin-left: 0; }

#secondary > ul > li { display: block; width: 100%; margin: 0; line-height: 140%; }
#secondary ul ul li { padding: 0 5% .75em 6%; line-height: 130%; position: relative; font-size: .875em; }
#secondary ul ul li:before { content: url(images/arrow.png); position: absolute; left: 0; top: -2px; }
#secondary ul ul .active:before, #secondary ul ul li:hover:before { content: url(images/arrowActive.png) }

/*#secondary > .menu > li:first-child:before { content: url(images/menuLeft.png); position: absolute; left: 15px;}*/

.TextPage #primary li { padding-bottom: .3em; line-height: 130%; }
.TextPage #primary ul ul li, .TextPage #content ol ol li { padding-bottom: 0; padding-top: 10px; }

.breadcrumb li { display: inline-block; padding: 0 5px; height: 1em; line-height: 1em; }
.ie7 .breadcrumb li { display: inline; }
.breadcrumb li:first-child { border: none; padding: 0 5px 0 0; }

.listing li { cursor: pointer; -webkit-transition: ease .5s; -moz-transition: ease .5s; -o-transition: ease .5s; transition: ease .5s; }

.pager li { display: inline-block; vertical-align: middle; }

.listing li:hover { 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiM2ZDZkNmQiIHN0b3Atb3BhY2l0eT0iMC4yNiIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MSUiIHN0b3AtY29sb3I9IiM2ZDZkNmQiIHN0b3Atb3BhY2l0eT0iMC4yNiIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNmQ2ZDZkIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(109,109,109,0.26) 60%, rgba(109,109,109,0.26) 61%, rgba(109,109,109,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(109,109,109,0.26)), color-stop(61%,rgba(109,109,109,0.26)), color-stop(100%,rgba(109,109,109,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(109,109,109,0.26) 60%,rgba(109,109,109,0.26) 61%,rgba(109,109,109,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(109,109,109,0.26) 60%,rgba(109,109,109,0.26) 61%,rgba(109,109,109,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(109,109,109,0.26) 60%,rgba(109,109,109,0.26) 61%,rgba(109,109,109,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(109,109,109,0.26) 60%,rgba(109,109,109,0.26) 61%,rgba(109,109,109,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#426d6d6d', endColorstr='#006d6d6d',GradientType=0 ); /* IE6-8 */
}

.col2 li { padding: 2.25%; margin-bottom: .5em; }
.col3 li { padding: 2.6%; min-height: 310px; font-family: 'District Pro', sans-serif; font-size: 1.1125em; }

.pdf li { background: url(images/iconPdf.png) no-repeat left top; padding-left: 30px; margin-bottom: .5em; }


/*___ STRONG/B _________________________________________________________________*/

ol li strong { display: block; font-size: 1.1em; }

/*___ EM/I _________________________________________________________________*/

/*___ U _________________________________________________________________*/

/*___ A _________________________________________________________________*/
#top a { color: #ffffff; } #top a:hover { color: #4495c7; }
#main a { position: relative; display: block; padding: 0 7px; color: #ffffff; font-family: 'District Pro', sans-serif; text-transform: uppercase; text-shadow: 1px 1px 2px #888888; }
#main a:hover, #main .active > a { background: #4495c7; background: #8cc8e8; }
.menu li:first-child a:before, #secondary .menu a:before { content: none; }

.logo
{
    display: block;
    width: 198px;
    height: 226px;
    background: transparent url(images/logo.png) no-repeat top left;
    text-indent: -9999em;
}

#featured a { color: #ffffff; }
#featured .more { display: block; float: right; border-top: 1px solid #fff; padding: .5em 0 .35em 4em; }

.listing .more { display: block; text-align: right; margin-top: 1.5em; }
.col2 a, .col3 a { color: #333; }

.pager a { background: #4495c7; color: #ffffff; }
.pager a:hover { background: #8cc8e8; color: #ffffff; }

#secondary ul a { display: block; }
#secondary ul > .active > a, #secondary ul a, #secondary ul a:hover, #secondary ul ul a { color: #333333; }
#secondary ul a, #secondary ul ul a:hover, #secondary ul ul .active a { color: #4495c7; }

#secondary h2 a { display: block; text-align: center; color: #333; border-top: 1px solid #888; border-bottom: 1px solid #888; padding: .2em 0 .25em; }
#secondary h2 a:hover { color: #4495c0; }

footer a, footer a:visited { color: #ffffff; }
footer a:hover { color: #dddddd; }


/*___ TABLE _________________________________________________________________*/

#content table { width: 100%; margin-bottom: 1em; }

/*___ TR _________________________________________________________________*/

#content tr:nth-child(even) { background: #ffffff; background: rgba(255,255,255,.2) }

/*___ TH/TD _________________________________________________________________*/
#content th, #content td { padding: 7px; }
#content th { padding: 10px; border-top: solid 1px #888888; border-bottom: solid 1px #888888; font-family: 'District Pro', sans-serif; font-size: 1.5em; }
#content td { width: 50%; }

/*___ IMG _________________________________________________________________*/

.about img { float: right; margin: -1.5em 0 1em 1em; }
.col2 img, .col3 img { max-width: 100%; height: auto; }

.Project #primary img { max-width: 320px; display: block; }

img[style*="left"] { margin: 0 10px 10px 0; }
img[style*="right"] { margin: 0 0 10px 10px; }

/*___ FORM _________________________________________________________________*/

/*___ INPUT/TEXTAREA/SELECT __________________________________________*/
input[type="text"], input[type="password"] { display: inline-block; padding: 5px; width: 196px; }
.ie7 input[type="text"], .ie7 input[type="password"] { display: inline; }
textarea { display: block; padding: 5px; width: 400px; min-height: 200px; }

/*___ LABEL _________________________________________________________________*/
label { display: block; margin-bottom: 10px; }

/*___ BLOCKQUOTE _________________________________________________________________*/

/*___ CITE _________________________________________________________________*/

.mindfly { display: block; }

/*___ IFRAME _________________________________________________________________*/

object { margin: 0 auto; display: block; }

/*___Media Queries_________________________________________________________________*/

@media only screen and (max-width: 66em) {
    header:after { content: url(images/headerCollageMed.png); position: absolute; top: -2px; right: -13px; }    
}

@media only screen and (max-width: 61em) {
    header:after { content: url(images/headerCollageSm.png); position: absolute; top: -2px; right: -13px; } 
    .col2 li { max-width: 435px; margin: 0 auto; }
    .col3 li { max-width: 320px; margin: 0 auto; }
}

@media only screen and (max-width: 52em) {
    header:after { content: url(images/headerCollageXSm.png); position: absolute; top: -5px; right: -10px; }
    #main ul { text-align: right; }
}

@media only screen and (max-width: 45em) {
    header:after { content: none; }
    header h1 { display: inline-block; vertical-align: top; width: 49%; margin: 0 auto; }
    .logo { margin: -1.35em 0 .1em 15%; }
    #main { display: inline-block; width: 45%; margin: 0 0 1em 5%; text-align: right; }
    #main ul { text-align: right; }
    #main a { color: #4495c7; border-bottom: 2px solid #f4f4f4; text-shadow: none; font-weight: bold; }
    #main a:hover, #main .active a { background: none; border-bottom: 2px solid #4495c7; }       
}

@media only screen and (max-width: 38em) {
    header h1 { padding-bottom: 0; }
    .logo { background-size: 88%; margin-bottom: 0; height: 216px; }
    #main { width: 100%; margin-left: 0; text-align: center; background: #4495c7; }
    #main ul { text-align: center; }
    #main a { color: #ffffff; border-bottom: none; }
    #main a:hover, #main .active a { border-bottom: none; background: #8CC8E8; }
    #announcement img { width: 40%; }
    .Project #primary img { width: 50%; }
}

@media only screen and (max-width: 27em) {
    .logo {  }
    #main a { padding: .5em 1em; }
    #announcement img { width: 100%; }
    .Project #primary img { width: 100%; margin: 0 auto 1em; }
}

@media only screen and (min-width: 27em) {
    #main a { padding: .5em 1em; }
    #announcement img { float: right; margin: 0em 0 0 2em; max-width: 245px; }
    .Project #primary img { float: right; margin: 0  0 1em  1em; }
    
    .half { width: 49%; display: inline-block; vertical-align: top; }
}

@media only screen and (min-width: 38em) {    
    p, table { hyphens: none; }
    #main ul { display: block; width: 100%; margin: 0; position: relative; }
    
    #announcement img { margin: -2em 0 0 2em; }

    #featured .info { width: 60%; bottom: 30px; right: 20px; } 

    .listing li { float: left; margin-left: .83333%; }    
    .col2 li { width: 49.55%; } .col3 li { width: 32.6123%; }
    .col2 li:nth-child(2n+1), .col3 li:nth-child(3n+1) { margin-left: 0; }              
}

@media only screen and (min-width: 45em) {
    .logo { margin: 0 0 0 7.08333%; }
    #main ul { display: block; width: 100%; margin: 0; position: relative; background: #4495c7; box-shadow: 0 5px 10px rgba(0,0,0,.2); z-index: 1; text-align: center; }
    #main li { display: inline-block; vertical-align: top; }
    #main a { padding: 1em; }

    .HomePage #announcement { width: 63%; display: inline-block; vertical-align: top; padding-right: 0; }
    .HomePage #meeting { width: 34.5%; display: inline-block; vertical-align: top; float: right; }
   
    #featured .info { width: 40.625%; } 

    #recent-articles ul { overflow: hidden; }
    #recent-articles .listing li { width: 32.75%; padding: 2em 2.25% }
    #recent-articles .listing li:first-child { margin-left: 0; }
    #recent-articles .listing h2 { height: 120px; }

    #primary { width: 73.95833%; }
    #secondary { width: 23.95833%; }
    #secondary .menu ul { text-align: left; }

    footer section { display: inline-block; vertical-align: top; }
    .vcard { width: 30%; display: inline-block; border-right: 1px solid #888888; border-bottom: none; text-align: left; }
    .about { width: 66%; float: right; }    
}

@media only screen and (min-width: 52em) {     
    #main a { font-size: 1.2em; }
    .vcard { width: 25%; }
    .about { width: 72%; }
}

@media only screen and (min-width: 61em) {
    header:after { content: url(images/headerCollage.png); position: absolute; top: -50px; right: -20px; }
    #main a { font-size: 1.4em; }
    #recent-articles .listing h2 { height: 100px; }
    
    .vcard { width: 22.39583%; }
    .about { width: 73.91666%; }
}

@media only screen and (min-width: 64em) {    
    #main a { font-size: 1.45em; }
}

@media only screen and (min-width: 66em) {
   .menu { cursor: default; }
    #main  { width: 980px; margin-left: -10px; position: relative; }
    #main ul:before { content: url(images/menuBefore.png); position: absolute; left: 0; top: -17px; }
    #main ul:after { content: url(images/menuAfter.png); position: absolute; right: 0; top: -17px; }
    #main a { padding: 1em 1.085em; font-size: 1.5em; }
}

@media only screen and (min-width: 72em) {
}

@media only screen and (min-width: 85em) {
}

.ie9 .col3 li, .ie8 .col3 li { height: 310px; }

.ie8 header:before { content: url(images/headerCollage.png); position: absolute; right: -15px; top: -30px; }
.ie8 .logo { margin-left: 6.08333%; }
.ie8 #main { width: 980px; margin-left: -10px; position: relative; }
.ie8 #main ul { display: block; position: relative; width: 100%; margin: 0; text-align: center; background: #4495c7; z-index: 1; }
.ie8 #main li { display: inline-block; vertical-align: middle; }
.ie8 #main a { color: #ffffff; padding: 1em 1.085em; font-size: 1.45em; }
.ie8 #main a:hover, .ie8 #main .active a { background: #8CC8E8; }
.ie8 .HomePage #announcement { width: 63%; display: inline-block; vertical-align: top; padding-right: 0; }
.ie8 .HomePage #announcement img { float: right; max-width: 245px; margin: -2em 0 0 2em; }
.ie8 .HomePage #meeting { width: 34%; display: inline-block; vertical-align: top; float: right; }
.ie8 #featured .info { position: absolute; bottom: 20px; right: 15px; width: 40.625%; }
.ie8 .listing { overflow: hidden; }
.ie8 .listing li { float: left; margin-left: .833333%; }
.ie8 #recent-articles ul { overflow: hidden; }
.ie8 #recent-articles .listing li { width: 32.75%; }
.ie8 #recent-articles .listing li:first-child { margin-left: 0; }
.ie8 .vcard, .ie8 .about { display: inline-block; vertical-align: top; }
.ie8 .vcard { text-align: left; border-bottom: none; border-right: 1px solid #888; width: 22.39583%; }
.ie8 .about { width: 73.91666%; float: right; }
.ie8 .col2 li { width: 49%; }
.ie8 #primary { width: 73.958333%; }
.ie8 #secondary { width: 23.95833%; } 
.ie8 .col3 li { width: 32%; }
.ie8 .Project #primary img { float: right; margin: 0 0 1em 1em; }
.ie8 .half { width: 49%; display: inline-block; vertical-align: top; }