@charset "UTF-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/ 
    */
    img, object, embed, video {
        max-width: 100%;
    }
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
    }
    
    /* ===============================
            USER added CSS
    ==================================*/
    ul, menu, dir, p, h1, h2, h3, h4, h5, h6 {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    margin: 0;
    padding: 0;
    }
    
    *:link, *:visited, *:hover, *:active, *:focus {
    -webkit-transition:
    color .25s linear,
    background-color .25s linear,
    border-color .25s linear,
    height .25s  linear,
    background-image .25s  linear;
    margin .25s  linear;
    
    
    -moz-transition: 
    color .25s linear,
    background-color .25s linear,
    border-color .25s linear,
    height .25s  linear,
    background-image .25s  linear;
    margin .25s  linear;
    
    -o-transition: c
    color .25s linear,
    background-color .25s linear,
    border-color .25s linear,
    height .25s  linear,
    background-image .25s  linear;
    margin .25s  linear;
    
    transition:
    color .25s linear,
    background-color .25s linear,
    border-color .25s linear,
    height .25s  linear,
    background-image .25s  linear;
    margin .25s  linear;
    }
    body {
        background: #FFF;
        font-family: Helvetica, Arial, sans-serif;  
        color: #25292B;
        font-size: 75%; 
        margin: 0;
        padding: 0;
        overflow-x:hidden;
    }
    .hide {
        position:absolute;
        left:-10000px;
        top:auto;
        width:1px;
        height:1px;
         overflow:hidden;
    }
    h1, h2, h3, h4 {    
        font-family: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
        text-transform: uppercase;  
        color: #7D7621;
        position: relative;
        line-height: 1.2em; 
        clear: left;
    }
    
    /* do not clear h3 in PROJECTS and N+E */
    section#mainContentWrapperNoHero div.mainContentBody div.content div.parbase div.text h3 {
    clear: none;
    }
    
    h2 {
        font-size: 2.5em;
        padding: .4em 0 .5em;
        float: left;
    }
    h3 {
        font-size: 1.7em;
        padding-bottom: .4em;
        font-weight: bold;
        letter-spacing: 0.02em;
    }
    
    /* PROJECT title links account for underline border*/
    h3 a:link {
        line-height: 1.6em;
    }
    
    h4 {
        font-size: 1.25em;
        padding-bottom: .4em;
        font-weight: normal;
    }
    .newsIndexImage h3 {
        clear: none;
    }
    ::-moz-selection {
        background: #065e99;
        color: white;
    }
    ::selection {
        background: #065e99;
        color: white;
    }
    .mainContentBody p {
        padding-bottom: 1.1em;
    }
    .mainContentBody img {
        /*float: left;*/
        padding: 0 1.5em 1.5em 0;
    }
    .mainContentBody a:link, .mainContentBody a {
        text-decoration: none; 
        border-bottom: 1px dotted;
        color: #72152C;
        font-weight: bold;
    }
    div.mainContentBody div.content div.html small a {
        color: #72152C !important;
    }
    html.js body.ides div.gridContainer section#mainContentWrapperNoHero div.mainContentBody div.content div.html small a:hover {
        color: #FFF !important;
    }
    h5 a:link {
        line-height: 1.6em;
    }
    a:hover, a:focus {
    background-color: #72152C;
    color: #FFFFFF;
    }
    .mainContentBody a:hover, .mainContentBody a:focus {
        border-bottom: none;
        color:  #FFF;
    }
    .mainContentBody .caption, .peopleTitle, datetime {
        font-style: italic;
        color: #023A5F;
    }
    .mainContentBody ul, .mainContentBody ol {
        color: #023A5F;
        margin: 0 0 15px 30px;
    }
    .mainContentBody ul {
        list-style: square;
    }
    #mainContentBodyPeople {
        margin-top: -36px;
    }
    
    .mainNav {
        float: left;
        height: 20px;
    }
    .mainNav li, .slideshowNav li  {
        display: inline;
    }
    .mainNav a:link, .mainNav a:visited, .hTitle {
        font-family: 'Oswald', 'arial narrow', Arial, Helvetica, sans-serif;    
        text-transform: uppercase;
    }
    .sideNav a:link, .sideNav a:visited {
        font-family: 'Oswald', 'arial narrow', Arial, Helvetica, sans-serif;    
        text-transform: capitalize;
    }
    
    .mainNav a:link, .mainNav a:visited, .slideshowNav a:link, .slideshowNav a:visited {
        text-decoration: none;
        color: #FFF;
    }
    .mainNav a:hover, .mainNav a:focus, .mainNav a:active, .mainNav .active {
        background-color: #FFF;
        color: #72152C !important;  
    }
    .mainNav a:link #hoverMainNavAbout {
        height: auto;
        overflow: hidden;
    }
    
    /*  START rollover drop down main nav menu  */
    .hoverMainNav {
        background-color:rgba(39,36,38,0.85);
        width: 100%;
        max-width: 135px;
        text-transform: none;
        position: absolute;
        color: #FFF;
        overflow: hidden;
        display: block;
    }
    .hoverMainNav p {
        font-size: .9em;
        font-style: italic;
        padding: 10px 10px 5px;
        line-height: 1.5em;
        display: block;
    }
    #mainNav01:hover #hoverMainNavAbout,
    #mainNav02:hover #hoverMainNavTools,  #mainNav03:hover #hoverMainNavProjects, #mainNav04:hover #hoverMainNavNewsEvents, #mainNav05:hover #hoverMainNavContact, #mainNav06:hover #hoverMainNavKul,#mainNav01:focus #hoverMainNavAbout,
    #mainNav02:focus #hoverMainNavTools,  #mainNav03:focus #hoverMainNavProjects, #mainNav04:focus #hoverMainNavNewsEvents, #mainNav05:focus #hoverMainNavContact
      {
        height: auto;
    }
    /*  END rollover drop down main nav menu */
    
    .slideshowNav a:hover, .slideshowNav a:focus, .slideshowNav a:active {
        color: rgb(2, 58, 95);
        background-color: #FFF;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #headerTop {
        position: static;
        height: 36px;
        float: left;
        clear: both;
        margin-left: 0;
        z-index: 2;
        display: block;
        background-image: url(/etc/designs/bc/offices/ides/images/bg-maroon.png);
        background-repeat: repeat;
        /* Firefox v3.5+ */
        -moz-box-shadow:0px 3px 4px rgba(24,21,18,0.65);
        /* Safari v3.0+ and by Chrome v0.2+ */
        -webkit-box-shadow:0px 3px 4px rgba(24,21,18,0.65);
        /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
        box-shadow:0px 3px 4px rgba(24,21,18,0.65);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=3,Color=#a5181512,Positive=true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=3,Color=#a5181512,Positive=true);
    }
    #ieHeaderHack {
        position: fixed;
        width: 100%;
        z-index: 5;
    }
    /* START side nav menu */
    .sideNav {
        position: fixed;
        padding: 60px 0 0 100px;
        z-index: 2;
        background: rgba(30,30,30,.75);
        width: 100%;
        height: 100%;
    }
    .sideNav a:link, .sideNav a:visited {
        background-color: rgba(255,255,255,.7);
        font-size: 1.2em;
        color:rgba(114,21,44,0.8);
        padding: 0 10px;    
        line-height: 1.6em;
        font-weight: normal;
    }
    @-moz-document url-prefix() {
        .sideNav a:link, .sideNav a:visited {
        line-height: 1.8em;
    }
    }
    .sideNav a:hover, .sideNav a:focus {
        color:rgba(255,255,255,1);
        background-color: rgba(114,21,44,0.8);
        margin: 0;
    }
    .sideNav li.current a:active, .sideNav li.current a {
        color:rgba(255,255,255,.7);
        background-color: rgba(114,21,44,0.8);
        margin: 0;
    }
    .sideNav li.current a {
        color:rgba(255,255,255,1);
        background-color: rgba(114,21,44,0.8);
        margin: 0;
    }
    .child a:link, .child a:visited {
        background-color: rgba(236, 236, 236,.8);
        color: #023A5F;
        border-bottom: 1px dotted;
        border-top: 1px dotted;
        font-size: 1em;
        line-height: 2.3em;
        margin-left: 15px;
        padding: 0 10px;
    } 
    .activeChild a:link, .activeChild a:visited, .child a:hover, .child a:focus {
        background-color: #FFF  ;
        color: #023A5F;
        border-bottom: 1px dotted;
        border-top: 1px dotted;
        font-size: 1em;
        line-height: 2.3em;
        margin-left: 15px;
        padding: 0 10px;
        font-style: italic;
    }  
    #sideNavMenuDisplayed {
        display: none;
    }
    #sideNavMenuButton {
        float: left;
        position: fixed;
        margin: 61px 0 0 0;
        z-index: 3;
    }
    #sideNavMenuButton a:hover {
        background: transparent;
    }
    div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent a {
        color:rgba(255,255,255,1);
        background-color: rgba(114,21,44,0.8);
    }
    
    /* END side nav menu */
    
    /*
     * START Side Nav CQ fixes
     */
     li.current a:link, .child a:hover {
        border-top:none;
        border-bottom:none;
    }
    .leftnav ul li.current ul li a:link,.leftnav ul li.current ul li a:visited,.leftnav ul li ul li.current a:link,.leftnav ul li ul li.current a:visited,.leftnav ul li.parent ul li a:link,.leftnav ul li.parent ul li a:visited {
        margin-left:15px;
        font-size:1.0em;
    }
    .leftnav ul li.parent ul li a:link,.leftnav ul li.parent ul li a:visited, div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a:link, div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a:visited {
        border-bottom:1px dotted;
        border-top:1px dotted;
        line-height:2.3em;
    }
    .leftnav ul li ul li ul li a:link,.leftnav ul li ul li ul li a:visited {
        margin-left:25px !important;
        border-top:none !important;
        font-family: Helvetica, Arial, sans-serif;  
        font-style:normal;
    }
    .leftnav ul li ul li ul li a:hover,.leftnav ul li ul li ul li a:active, .leftnav ul li ul li ul li a:focus {
        margin-left:25px;
        border-top:none;
        font-family: Helvetica, Arial, sans-serif;
        font-style:normal;
    }
    html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current ul li a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current ul li a:visited, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent ul li a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent ul li a:visited, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a:visited, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li a:visited  {
        background-color:rgba(255, 255, 255, 0.7);        
        color:#023A5F;        
        font-style:normal;
    }
    html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current a:hover, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.current a:focus, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent ul li.current a, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent ul li a:hover, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li.parent ul li a:focus, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a:hover, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.current ul li a:focus, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li a:hover, html.js body.ides div.gridContainer div#sideNavMenuDisplayed nav.sideNav div.leftnav ul li.parent ul li a:focus {
        background-color:rgba(236, 236, 236, 1);        
        font-style:italic;
        color:#023A5F;
    }
    
    /*
     *  END Side Nav CQ fixes
     */
    
    /* START ITS added CQ Textimage styles */
    
    /*Gabriel changed float:none -to- float:left
    on 2013_01_08 */
    .image_right.textimage, .image_left.textimage {
       float: left;
    }
    .textimage img, .textimage .none img{
        margin:0px ;
        float:  left;
    }
    .textimage .text {
        margin-top:0px;
    }
    .image_right .image_right {
        float:right;
        margin-left:5px;
    }
    
    .image_right .image_right img{
        margin:0px 5px 5px 0px;
    }
    .image_left, .original {
        border:0 none !important;
        width: auto !important;
     
    }
    .original img  {
        background:transparent none repeat scroll 0 0 !important;
        border:0 none !important;
        }
    
    .image_left.textimage  .image_left, .textimage .original {
        /*margin:5px 15px 0px 0;*/
        float:left;
    }    
    
    .image_left.textimage .image_left img, .textimage .original img {
        margin-bottom:0px;
    }
    
    .original_right .textimage  .original_right .original_right , .original_right .original_right {
        float:right !important;
        margin:5px 0 0 10px !important;
    }
    
    
    .original_right .textimage .original_right img, .original_right  img{
        background:transparent none repeat scroll 0 0 !important;
        border:0 none !important;
        padding:0 !important;
      
    }
    .none {
        float:none !important;
        margin:8px 0 15px 0;
    }
    .bcimagerow .bcimage {
        margin-right:15px;
        max-width:100px;
        max-height:100px;
    }
    .parsys_column .bcimagerow .bcimage img {
        margin-right:5px;
        max-width:65px;
        max-height:65px;
    }
    
    .image_center, .original_center  {
        text-align:center !important;
            margin:0 auto;
    }
    .image_center p, .original_center p  {
    text-align:left;
    }
    .textimage .image_center img{
        margin:0 auto;
    }
    
    .textimage .original_center img, .original_center img {
        background:transparent none repeat scroll 0 0 !important;
        border:0 none !important;
        margin-bottom: 0px;
        text-align:center;
    }
    /* END ITS added CQ Textimage styles */
    
    #hero {
        clear: both;
        float: left;
        margin-left: 0;
        margin-top: 36px;
        width: 100%;
        display: block;
        background-color: #f2f2f2;
    }
    #homeSecondary {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block; 
        margin-top: 5px;
    }
    #CQ-videoPlaceholder {
        background: #000;
    }
    #video {
        cursor: pointer;
    }
    div#CQ-videoPlaceholder div#video {
        float: left;
    }
    div.mainContentBody div#video {
        float: left;
        padding: 0 15px 15px 0;
    }
    .mainContentBody {
        float: left;
        position: relative;
        width: 100%;
        height: auto;
    }
    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        margin-top: 5px;
        background-image: url(/etc/designs/bc/offices/ides/images/bg-gray.png);
        background-repeat: repeat;
        height: auto;
    }
    .small {
        line-height:1.5em;
        color: #FFF;
        font-style:normal;
        font-size: .9em;
        margin-bottom: 15px;
    }
    
    /* News listing component */
    /* News listing */
    
    body.newsevent h2 , body.newsevent h1 {
        font-size: 2.5em;
        padding: 0;    
        margin:0;
        top:-8px;
        float:clear;
    }
    
    body.newsevent .newsinfo h2, body.newsevent .newsinfo h1 { /* Override Overlaps in author mode*/
        float: none;
        top:5px;
        margin-bottom:12px
        }
    
    .newslisting h3, .newslisting h5 {
        clear:left;
        color:#7D7621;
        font-family:'Oswald','Arial Narrow',Helvetica,Arial,sans-serif;
        line-height:1.1em;
        position:relative;
        text-transform:uppercase;
        font-size: 1.7em;
        padding-bottom: .4em;
        font-weight: normal;
    }
    .parsys.newscontent {
        clear: left;
    }
    .newslisting .news-item {
        display:block;
        margin-bottom:40x;
    /*  border-bottom:1px solid #DFD4BC; */
        float:left
        
    }
    .newslisting img {
        max-width:192px;
        min-height:192px;
        float:left;
        margin: 0 10px 5px 0;
    }
    
    .newslisting .news-item .abstract {
        display:inline;
        float:left;
        width:65%
    
    }
    
    .newsdate {
        font-weight:bold
    }
     .mainContentBody .abstract p, .abstract p, .morelink {
        display:inline !important;
        margin:0px
    }
    
    a.morelink:hover, a.morelink:focus {
        color:#fff
    }
    
    /* START social icons */
    #social-wrap {
        position: relative;
        float: left;
    }
    #social {
        position: relative;
        float: left;
        clear: left;
        margin: 0 0 0 8px;
        cursor: pointer;
    }
    #facebook {
        background-image: url(/etc/designs/bc/offices/ides/images/facebook-link.png);
        position: relative;
        float: left;
        width: 21px;
        height: 24px;
    }
    #facebook:hover, #facebook:focus {
        background-image: url(/etc/designs/bc/offices/ides/images/facebook-hover.png);
    }
    #twitter {
        background-image: url(/etc/designs/bc/offices/ides/images/twitter-link.png);
        position: relative;
        float: left;
        width: 30px;
        height: 24px;
    }
    #twitter:hover, #twitter:focus {
        background-image: url(/etc/designs/bc/offices/ides/images/twitter-hover.png);
    }
    #youtube {
        background-image: url(/etc/designs/bc/offices/ides/images/youtube-link.png);
        position: relative;
        float: left;
        width: 23px;
        height: 24px;
    }
    #youtube:hover, #youtube:focus {
        background-image: url(/etc/designs/bc/offices/ides/images/youtube-hover.png);
    }
    
   /* END social icons */
    
    /* ===============================
        MOBILE css: 500px and below
         
        TABLET css follows & inherits MOBILE css
         
        TABLET css is the last section at
         the bottom of the page & 
         inherits TABLET and MOBILE css
     ==================================*/
    
    .gridContainer, #headerTop {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        padding-left: 0%;
        padding-right: 0%;
    }   
    #logoSmall {
        float: left;
        min-width: 50px;
        min-height: 36px;
        background:url(/etc/designs/bc/offices/ides/images/logoIDeS_small-link-m.png);
        display: block;
    }
    #logoSmall:hover, #logoSmall:focus {
        background:url(/etc/designs/bc/offices/ides/images/logoIDeS_small-hover-m.png);
    }
    .mainNav {
        margin: 15px 0 0 5px;
    }   
    .mainNav a:link {
        font-size: 0.8em;
        padding: 18px .2em 3px .1em;    
        font-weight: normal;
    }
    .hoverMainNav a:link {
        font-weight: bold;
        font-size: 1.1em;
        line-height: 1.7em;
        display: block;
        padding: 0 0 0 10px;
        font-family: Helvetica, Arial, sans-serif;
    }
    .hoverMainNav a:hover, .hoverMainNav a:focus {
        background-color: #FFF;
    }
    /*  START rollover drop down main nav positioning */
    #hoverMainNavAbout, #hoverMainNavTools, #hoverMainNavProjects, #hoverMainNavNewsEvents, #hoverMainNavContact, #hoverMainNavKul {
        height: 0;  
        margin-top: -3px;
        display: block;
    }
    #hoverMainNavTools {
        margin-left: 34px;  
        max-width: 225px;
    }
    #hoverMainNavProjects {
        margin-left: 66px;  
    }
    #hoverMainNavNewsEvents {
        margin-left: 63px;  
        max-width: 195px;
    }
    #hoverMainNavContact {
        margin-left: 109px; 
        text-align: right;
    }
    #hoverMainNavKul {
        margin-left: 120px; 
        text-align: right;
    }
    
    /*  END rollover drop down main nav positioning */
    
    
    .searchTool {
        float: right;
        position: relative;
    }
    .searchTool a {
        display: block;
        min-width: 25px;
        min-height: 36px;
        background-repeat: no-repeat;
        background-image: url(/etc/designs/bc/offices/ides/images/search-link.png);
        background-position: right top;
    }
    .searchTool a:hover, .searchTool a:focus, .searchTool a:active, .searchTool a.active {
        display: block;
        background-repeat: no-repeat;
        background-image: url(/etc/designs/bc/offices/ides/images/search-hover.png);
        background-position: right top;
        cursor:pointer;
    }
    
    /* font resize buttons */
    #resizeButtons {
        float: right;
        margin: 4px 20px 10px 10px;
        text-align: center;
        font-size: 0.9em;
    }
    #resizeButtons p {
        font-style: italic;
        line-height: 1.8em;
        margin: 0;
        padding: 0;
    }
    #resizeButtons a:link {
        margin-right: 5px;
    }
        
    #hero {
        height: 100%;
    }
    #hero-CQ_slideshow {
        clear: none;
        float: left;
        margin:auto;
        width: 100%;
        display: block;
        background: white;
    }
    #heroImage {
        clear: none;
        float: left;
        margin:auto;
        width: 100%;
        display: block;
        background: white;
    }
    #CQ-slideshow_controls {
        clear: none;
        float: right;
        background-color:rgba(2,58,95,0.8);
        width: 130px;
        display: block;
        position: relative;
        margin-right: 4%;
        text-align: center;
        margin-top: -36px;
        padding-top: 2px;
    }
    .slideshowNav a:link, .slideshowNav a:visited, .slideshowNav a:hover, .slideshowNav a:focus, .slideshowNav a:active {
        font-size: 1.4em;
        padding: 3px 4px;
    }
    .slideshowNav a:link img, .slideshowNav a:visited img {
        margin-top: -3px;
    }
    .homeSecondaryContent {
        clear: none;
        float: left;
        display: block; 
        background-color:#F2F2F2;
    }
    #leftSecondaryContent, #centerSecondaryContent, #rightSecondaryContent {
        width: 100%;
        margin-top: 5px;
        height: 200px;
    }
    #leftSecondaryContent {
        margin-top: 0;
    }
    #trendingContent {
        float: left;
        height: 165px;
        margin: 5px 10px;
        overflow: hidden;
        position: relative;
        width: auto;
    }
    .trendingContentBucket {
        float: left;
        position: relative;
        width:  100%;
        line-height: 1.5em;
        margin: 2px 0 0;
    }
    .trendingContentDate {
        float: left;
        position: relative;
        width: 10%;
        color: #72152C;
        border-color: #72152C;
        border-style: solid;
        border-width: 2px;
        text-align: center;
        padding: 2px 3px;
    }
    .trendingContentLink {
        float: left;
        position: relative;
        width: 75%;
        margin-left: 5%;
    }
    #teachingToolsContent {
        float: left;
        height: 165px;
        margin: 7px 10px;
        overflow: hidden;
        position: relative;
        width: 90%;
    }
    .teachingToolsContentBucket {
        float: left;
        position: relative;
        width:  90%;
        line-height: 1.5em;
        margin: 2px 0 6px 0;
    }
    .teachingToolsImage {
        float: left;
        position: relative;
        width: auto;
    }
    .teachingToolsLink {
        float: left;
        position: relative;
        width: auto;
        padding: 2px 0 0 15px;
    }
    
    #CQ-videoPlaceholder {
        overflow: hidden;
        max-height: 183px;
    }
    h3.visibleHeaderWhite {
        padding: 1px 0px 1px 10px;
        margin: 0;
        color: #FFF;    
        font-size: 1.2em;
    }
    #leftSecondaryContent h3.visibleHeaderWhite  {
        background-color: #72152C;
    }
    #centerSecondaryContent h3.visibleHeaderWhite  {
        background-color: #7D7621;
    }
    #rightSecondaryContent h3.visibleHeaderWhite  {
        background-color: #023A5F;
    }   
    #mainContentWrapper, #mainContentWrapperNoHero {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block; 
        margin-top: 5px;
        padding: 15px 5px;
    }
    #mainContentWrapper{
        margin-top: 5px;
    }
    #mainContentWrapperNoHero {
        margin-top: 36px;
    }     
    .imageText {
        float: left;
        padding: 0;
        margin: 0;
        margin-bottom: 1.1em
    }
    
    /* ==   START project feed & PEOPLE ====*/
    #desktopPeople, #tabletPeople {
        display: none;
    }
    #mobilePeople {
        display: block;
    }
    .projectIndexImage, .peopleIndexImage {
        width: 46%;
        float: left;
        position: relative;
        margin: 0 2.6% 0 0;
    }
    .peopleIndexImage {
        cursor: pointer;
        padding-top: 36px;
    }
    .projectIndexImage h3, .peopleIndexImage h3, .peopleDisplay h3 {
        font-size: 1.3em;
        white-space: nowrap;
        overflow: hidden;
        text-align: left;
    }
    .projectIndexImage {
        margin-bottom: 20px;
    }
    a:hover .projectIndexImage h3, a:focus .projectIndexImage h3, .peopleIndexImage:hover h3, .peopleIndexImage:focus h3 {
        color:white;
        background: rgb(114, 21, 44);
        background: rgba(114, 21, 44, .8);
    }   
    .peopleIndexImage h3, .peopleDisplay h3 {
        float: left;
        margin-top: 0.5em;
    }
    .peopleIndexImage h3 {
        width: 100%
    }
    .peopleDisplay, .serviceDisplay {
        display: none;
        clear: both;
        margin-bottom: 0;
        float: left;
        margin-top: 10px;
        width: 100%;
    }
    .peopleDisplay {
        cursor: pointer;
    }
    .peopleDisplay p, .serviceDisplay p {
        clear: left;
        background: #F2F2F2;
        width: auto;
        padding-left: 20px;
        padding-right: 10px;
    }
    .serviceDisplay {
        margin-bottom: 25px;
    }
    @-moz-document url-prefix() {
        .peopleDisplay p  {
    }
    }
    p.peopleTitle {
        padding-top: 5px;
    }
    .peopleName, .serviceName {
        color: #FFF;
        background: #7D7621;
        padding: 0.8% 0 .8% 1.5%;
        width: 98.5%;
        cursor: pointer;
    }
    @-moz-document url-prefix() {
        h3.peopleName {
        padding-top: 0.7%;
    }
    }
    h3.peopleName:hover, h3.peopleName:focus {
        color: #FFF;
        background: #72152C;
        display: block;
    }
    .projectIndexImage img, .peopleIndexImage img {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .peopleClear {
        width: 100%;
        height: 200px;
        position: relative;
        float: left;
        background: #F00;
        display: none;
    }
    
    /* ==   END project feed & PEOPLE =====*/
    
    /* ==== START news feed ===*/
    
    .newsIndexImage {
        float: left;
        position: relative;
        width: 100%;
        clear: left;
        padding-bottom: 10px;
    }
    
    .newsIndexImage img {
        width: 25%;
        float: left;
        position: relative;
    }
    .newsIndexImage p {
        width: 71%;
        float: left;
        position: relative;
        font-weight: normal;
        color: #25292B;
    }
    .newsIndexImage p:hover, .newsIndexImage h3:hover, .newsIndexImage p:focus, .newsIndexImage h3:focus {
        color: rgb(114, 21, 44);
        background-color: #F2F2F2;
        display: block;
    }
    .newsIndexImage .date {
        font-size: .9em;
        font-style: italic; 
        width: 60%;
        margin-top: -5px;
        padding: 0 0 0 10px;
        color: #023A5F;
    }
    
    .newsIndexImage h3 {
        font-size: 1.3em;
        
    }
    /* ==   START Footer  ==========*/
    
    #footerLeftWrapper {
        width: auto;
        position: relative;
        float: left;
    }
    #contactInfo a:link, #contactInfo a:visited, #contactInfo a:hover a:active, #contactInfo a:focus a:active  {    
        float: left;
        font-size: 1.6em;
        line-height: 1.5em;
        margin-right: 5px;
        clear: left;
        font-weight: normal;
        text-decoration: underline;
    }
    #contactInfo a:link, #contactInfo a:visited {
        color: #FFF;
        text-decoration: none; 
        border-bottom: 1px dotted;  
    }
    #contactInfo a:hover, #contactInfo a:active, #contactInfo a:focus {
        color: #657070;
        background-color: #FFF;
        border-bottom: none;
    }
    #address {
        position: relative;
        float: left;
        margin: 15px 0 0 8px;
        clear: left;
    }
    #contactInfo {
        float: left;
        position: relative;
        clear: left;
        margin: 10px 0 0 8px;
    }
    #footerRightWrapper {
        width: auto;
        position: relative;
        float: left;
        margin-left: 10px;
    }
    #logoMedium {
        float: left;
        position: relative;
        min-height: 56px;
        min-width: 91px;
        margin: 10px 0 0 0px;
        background-image: url(/etc/designs/bc/offices/ides/images/logoIDeS_medium-link.png);
        background-repeat: no-repeat;
    }
    #logoMedium:hover, #logoMedium:focus {
        background-image: url(/etc/designs/bc/offices/ides/images/logoIDeS_medium-hover.png); 
        cursor:pointer;
    }
    #BC_logo {
        float: left;
        position: relative;
        margin: 10px 10px 0 -6px;   
        background-image: url(/etc/designs/bc/offices/ides/images/BC-logo-link.png);
        background-repeat: no-repeat;
        min-width: 99px;
        min-height: 61px;
    }
    #BC_logo:hover, #BC_logo:focus {
        background-image: url(/etc/designs/bc/offices/ides/images/BC-logo-hover.png); 
        cursor:pointer;
    }
    #updateCopyright {
        margin: 15px 0 15px 0px;
        position: relative;
        text-align: left;
        float: left;
        clear: left;
    }
    
    /* START Tools + Services */
    #desktopService, #tabletService {
        display: none;
    }
    #mobileService {
        display: block;
    }
    .serviceImage, .serviceh4 {
        float: left;
        margin: 0;
        position: relative;
        width: 100%;        
        padding-right: 8px;
    }div#desktopService .serviceImage h3, div#tabletService .serviceImage h3 {
        font-size: 1.3em;
    }
     div#mobileService .serviceImage h3 {
        font-size: 1.7em;
    }
    #mainContentBodyServices {
        margin-left: 0;
        width: 96%;
    }
    .serviceh4 {
        margin-bottom: 0.5em;
    }
    .serviceh4  {
        margin-bottom: 0.5em;
    }
    .serviceh4 h4:hover, .serviceh4 h4:focus, .serviceh4 h4:active {
        color: white;
        background: rgba(114, 21, 44, 0.8);
    }
    .serviceDisplay p {
        padding-top: 10px;
    }
    /* END Tools + Services */
    
    /* MOBILE limit h2 PROJECT title length */
    section#mainContentWrapperNoHero h2.hTitle {
        max-width: 270px;
    }
     
    /* Emergency notification*/
    
    #emergency_bar {
        background:#fff;
        _text-align:center; /* IE6 fix */
    }
    #emergency_message {
        margin:0 auto;
        display:block;
        background:yellow;
        color:#000;
        padding:5px 15px 10px;
        font-size:12px;
        max-width:928px;
        width:95%;
        text-align:left;
        border:1px solid #72152C;
    }
    
    
    
    /* ===============================
        
        TABLET Layout: 500px to 768px. 
        Inherits styles from: MOBILE css.
        
     ==================================*/
     
    @media only screen and (min-width: 500px) {
    .gridContainer, #headerTop {
        width: 95%;
        padding-left: 0%;
        padding-right: 0%;
    }
    #logoSmall {
        min-width: 72px;
        min-height: 36px;
        background:url(/etc/designs/bc/offices/ides/images/logoIDeS_small-link.png);
    }
    #logoSmall:hover, #logoSmall:focus {
        background:url(/etc/designs/bc/offices/ides/images/logoIDeS_small-hover.png);
    }
    .mainNav {
        margin: 13px 0 0 18px;
    }
    .mainNav a:link {
        font-size: 1.2em;
        padding: 13px .4em 2px .4em
    }
    @-moz-document url-prefix() {
        .mainNav a:link {
        padding-bottom: 0px;
    }
    }
    .hoverMainNav a:link {
        font-size: 1.2em;
        padding: 0 0 0 10px;    
    }
    /*  START rollover drop down main positioning */
    #hoverMainNavAbout, #hoverMainNavTools, #hoverMainNavProjects, #hoverMainNavNewsEvents, #hoverMainNavContact, , #hoverMainNavKul {
        margin-top: -1px;
        padding-top: 1px
    }
    #hoverMainNavTools {
        margin-left: 53px;  
        max-width: 225px;
    }
    @-moz-document url-prefix() {
        #hoverMainNavTools {
        margin-left: 54px;  
    }
    }
    #hoverMainNavProjects {
        margin-left: 103px; 
    }
    @-moz-document url-prefix() {
        #hoverMainNavProjects {
        margin-left: 108px; 
    }
    }
    #hoverMainNavNewsEvents {
        margin-left: 172px; 
        max-width: 195px;
    }
    @-moz-document url-prefix() {
        #hoverMainNavNewsEvents {
        margin-left: 181px; 
    }
    }
    #hoverMainNavContact {
        margin-left: 266px; 
        text-align: left;
    }
    @-moz-document url-prefix() {
        #hoverMainNavContact {
        margin-left: 278px; 
    }
    }
    #hoverMainNavKul {
        margin-left: 333px; 
        text-align: left;   
        max-width: 130px;
    }
    @-moz-document url-prefix() {
        #hoverMainNavKul {
        margin-left: 345px; 
    }
    }
    /*  END rollover drop down main positioning */
    
    .sideNav {
        margin: 60px 0 0 0;
        background: transparent;
        padding: 0;
        width: auto;
    }
    #sideNavMenuButton {
        display: none;
    }
    #sideNavMenuDisplayed {
        display: block;
    }
    #hero {
        height: 100%;
    }
    #hero-CQ_slideshow {
    }
    
    #leftSecondaryContent {
        width: 49.5%;
        margin-right: 1.0%;
    }
    .trendingContentDate {
        padding: 2px 10px 2px 5px
    }
    .trendingContentBucket {
        margin: 5px 0 0;
    }
    @-moz-document url-prefix() {
        #leftSecondaryContent {
            margin-right: 1%;
        }
    }
    #centerSecondaryContent {
        width: 49.5%;
        margin-top: 0;
        float: right;
    }
    #rightSecondaryContent {
        margin: 5px 0 0;
        width: 100%;
    }
    #mainContentWrapper, #mainContentWrapperNoHero {
        width: 73%;
        margin-left: 26%;
        padding: 15px 10px 15px 0;
    }
    #resizeButtons {
        margin: 4px 10px 10px 10px;
    }
    .projectIndexImage, .peopleIndexImage {
        width: 46%;
    }
    
    /* TABLET limit h2 PROJECT title length */
    section#mainContentWrapperNoHero h2.hTitle {
        max-width: 430px;
    }


    #logoMedium {
        margin: 10px 0 0 5px;
    }
    #BC_logo {
        float: right;   
        margin: 5px 5px 0 0;
    }
    #updateCopyright {
        float: right;
        clear: right;
        margin: 10px 10px 15px 0;
        position: relative;
        text-align: right;
    }
    #contactInfo a:link, #contactInfo a:visited, #contactInfo a:hover a:active, #contactInfo a:focus a:active  {
        float: none;
        font-size: 2em;
        line-height: 1.5em;
        font-size: 1em;
        clear: none;
    }
    
    /* START social icons */
    #address-contact {
        float: left;
    }
    #social {
        margin: 0px 0 0 12px;
    }
    .social-icons {
        margin-top:  10px;
    }
    /* END social icons */
    
    #address {
        clear: none;
    }
    #contactInfo {
        margin: 10px 0 0 8px;
    }
    #footerRightWrapper {
        float: right;   
        margin-left: 0;
    }
    
    /* START PEOPLE page */
    #tabletPeople #peopleIndexImage03-tablet, #tabletPeople #peopleIndexImage06-tablet, #tabletPeople #peopleIndexImage09-tablet, #tabletPeople #peopleIndexImage12-tablet, #tabletPeople #peopleIndexImage15-tablet, #tabletPeople #peopleIndexImage18-tablet, #tabletPeople #peopleIndexImage21-tablet, #tabletPeople #peopleIndexImage24-tablet, #tabletPeople #peopleIndexImage27-tablet, #tabletPeople #peopleIndexImage30-tablet, #tabletPeople #peopleIndexImage33-tablet {
        margin-right: 0;
    }
    .peopleDisplay {
        width: 98.5%;
    }
    #tabletPeople .projectIndexImage, #tabletPeople .peopleIndexImage {
        width: 31%;
    }
    #desktopPeople #peopleIndexImage04, #desktopPeople #peopleIndexImage08, #desktopPeople #peopleIndexImage12, #desktopPeople #peopleIndexImage16, #desktopPeople #peopleIndexImage20, #desktopPeople #peopleIndexImage24, #desktopPeople #peopleIndexImage28,, #desktopPeople #peopleIndexImage32 {
        margin-right: 2.6%;
    }
    #desktopPeople, #mobilePeople {
        display: none;
    }
    #tabletPeople {
        display: block;
    }
    /* END PEOPLE page */
    
    /* START Tools + Services */ 
    #mobileService, #desktopService {
        display: none;
    }
    #tabletService {
        display: block;
    }
    .serviceImage, .serviceh4 {
        width: 31.5%;
    }
    #mainContentBodyServices {
        margin-left: -34%;
        width: 132%;
    }
    /* END Tools + Services */
    
    }
    
    /* ===============================
        
        DESKTOP Layout: 769px to a max of 960px.  
        Inherits styles from: MOBILE and TABLET css.
        
     ==================================*/
    
    @media only screen and (min-width: 769px) {
    .gridContainer, #headerTop {
        width: 96%;
        max-width: 960px;
        padding-left: 0%;
        padding-right: 0%;
        margin: auto;
    }
    .mainNav a:link {
        font-size: 1.28em;
        padding: 14px .4em 1px .4em;
    }
    @-moz-document url-prefix() {
        .mainNav a:link {
        padding: 14px 0.4em 0px;
        }
    }
    
    .searchTool a {
        min-width: 87px;
        min-height: 36px;
    }
    #hero {
        height: 100%;
    }
    #CQ-slideshow_controls {
        margin-top: -32px;
        padding: 0;
        width: 90px;
    }
    .slideshowNav a:link, .slideshowNav a:visited, .slideshowNav a:hover, .slideshowNav a:active {
        padding: 4px 2px;
        font-size: 1em;
    }
    
    .hoverMainNav a:link {
        font-size: 1.2em;
        line-height: 1.7em;
        padding: 0 0 0 10px;
        
    }
    /*  START rollover drop down main positioning */
    #hoverMainNavTools {
        margin-left: 58px;  
        max-width: 225px;
    }
    #hoverMainNavProjects {
        margin-left: 113px; 
    }
    @-moz-document url-prefix() {
        #hoverMainNavProjects {
        margin-left: 115px; 
    }
    }
    #hoverMainNavNewsEvents {
        margin-left: 191px; 
        max-width: 195px;
    }
    @-moz-document url-prefix() {
        #hoverMainNavNewsEvents {
        margin-left: 193px; 
    }
    }
    #hoverMainNavContact {
        margin-left: 292px; 
    }
    @-moz-document url-prefix() {
        #hoverMainNavContact {
        margin-left: 297px; 
    }
    }
    #hoverMainNavKul {
        margin-left: 365px; 
        text-align: left;
    }
    @-moz-document url-prefix() {
        #hoverMainNavKul {
        margin-left: 373px; 
    }
    }
    /*  END rollover drop down main positioning */
    .projectIndexImage {
        width: 30%;
    }
    .peopleIndexImage {
        width: 23%;
    }
    #resizeButtons {
        margin: 4px 0 10px 10px;
    }
    
    #leftSecondaryContent {
        width: 33%;
        margin-right: 0;
    }
    .trendingContentDate {  
        padding: 2px 7px 2px 5px;
    }
    #centerSecondaryContent {
        width: 33%;
        margin: 0 .5%;
        float: left;
    }
    @-moz-document url-prefix() {
        #centerSecondaryContent {
            margin: 0 .5%;
        }
    }
    #rightSecondaryContent {
        margin: 0;
        width: 33%;
        float: right;
    }
    div#CQ-videoPlaceholder div#video {
        float: right;
    }
    .sideNav {
        margin: 60px 0 0 90px;
    }
    #sideNavMenuDisplayed {
        display: block;
    }
    
     /*  fix long titles pushing down the font adjust tool */
    section#mainContentWrapperNoHero h2.hTitle {
        max-width: 625px;
    }

    /* START PEOPLE page */
    #peopleIndexImageRow01-04-960, #peopleIndexImageRow02-04-960 {
        margin-right: 0;
    }
    /* END PEOPLE page */
    
    /* START PEOPLE page */
    #tabletPeople, #mobilePeople {
        display: none;
    }
    #desktopPeople {
        display: block;
    }
    .peopleDisplay {
        width: 100%;
    }
    #tabletPeople #peopleIndexImage03-tablet, #tabletPeople #peopleIndexImage06-tablet, #tabletPeople #peopleIndexImage09-tablet, #tabletPeople #peopleIndexImage12-tablet, #tabletPeople #peopleIndexImage15-tablet, #tabletPeople #peopleIndexImage18-tablet, #tabletPeople #peopleIndexImage21-tablet, #tabletPeople #peopleIndexImage24-tablet, #tabletPeople #peopleIndexImage27-tablet, #tabletPeople #peopleIndexImage30-tablet, #tabletPeople #peopleIndexImage33-tablet {
        margin-right: 2.6%;
    }
    
    #desktopPeople #peopleIndexImage04, #desktopPeople #peopleIndexImage08, #desktopPeople #peopleIndexImage12, #desktopPeople #peopleIndexImage16, #desktopPeople #peopleIndexImage20, #desktopPeople #peopleIndexImage24, #desktopPeople #peopleIndexImage28, #desktopPeople #peopleIndexImage32 {
        margin-right: 0;
    }
    /* END PEOPLE page */
    
    /* START Tools + Services */ 
    #mobileService, #tabletService {
        display: none;
    }
    #desktopService {
        display: block;
    }
    #mainContentBodyServices {
        margin-left: 0;
        width: 100%;
    }
    
    /* END Tools + Services */
    
    
    
    } /* END @media only screen and (min-width: 769px) */