@font-face {
    font-family: 'FranklinGothicURWCon-Boo';
    src: url('webfontskit/webfonts/24AAF3_11_0.eot');
    src: url('webfontskit/webfonts/24AAF3_11_0.eot?#iefix') format('embedded-opentype'),
         url('webfontskit/webfonts/24AAF3_11_0.woff') format('woff'),
         url('webfontskit/webfonts/24AAF3_11_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;      
}


@font-face {
    font-family: 'FranklinGothicURWExtComD-Dem';
    src: url('webfontskit/webfonts/24AAF3_13_0.eot');
    src: url('webfontskit/webfonts/24AAF3_13_0.eot?#iefix') format('embedded-opentype'),
         url('webfontskit/webfonts/24AAF3_13_0.woff') format('woff'),
         url('webfontskit/webfonts/24AAF3_13_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Franklin Gothic Demi Ext Cmp";
    src: url("../webfontskit/webfonts/24AAF3_13_0.eot?#iefix") format("embedded-opentype"), url("../webfontskit/webfonts/24AAF3_13_0.woff") format("woff"), url("../webfontskit/webfonts/24AAF3_13_0.ttf") format("truetype");
}
@font-face {
    font-family: "Franklin Gothic Extra Cond";
    src: url("../webfontskit/webfonts/24AAF3_13_0.eot?#iefix") format("embedded-opentype"), url("../webfontskit/webfonts/24AAF3_13_0.woff") format("woff"), url("../webfontskit/webfonts/24AAF3_13_0.ttf") format("truetype");
}
@font-face {
    font-family: "ITC Franklin Gothic Std Bk CD";
    src: url("../webfontskit/webfonts/24AAF3_11_0.eot?#iefix") format("embedded-opentype"), url("../webfontskit/webfonts/24AAF3_11_0.woff") format("woff"), url("../webfontskit/webfonts/24AAF3_11_0.ttf") format("truetype");
}
@font-face {
    font-family: "ITC Franklin Gothic Std MD CD";
    src: url("../webfontskit/webfonts/24AAF3_7_0.eot?#iefix") format("embedded-opentype"), url("../webfontskit/webfonts/24AAF3_7_0.woff") format("woff"), url("../webfontskit/webfonts/24AAF3_7_0.ttf") format("truetype");
}


body {
    background-color:#3D3D3C;
    font-size:12px;
    color:#464646;
}

.ribbon{
    width:100%;
    float:left;
    clear:both;
    overflow:hidden;
}

.wrap{
    width:1024px;
    margin:0 auto;
    background-color:#f9f7ef;
}

.lightgrey{
    background-color:#464646;
}

.darkgrey{
    background-color:#3d3d3c;
}


h2 {
    color:#fc7301;
}

a {
    color:#FD7202;
}

a:hover {
    color:#FFFFFF;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}


#introcontainer {
    margin:0px auto 0px auto;
    padding:0px;
    padding-bottom:20px;
    height:240px;
    font:18px 'FranklinGothicURWCon-Boo', Arial, Helvetica, sans-serif;
    
}

#introcontainer h2 {
    display:block;
    margin:0px 0px 5px 30px;
    padding:3px;
    padding-top:20px;
    text-transform:uppercase;
    font:normal 48px impact, Arial, Helvetica, sans-serif;
    color:#FD7202;
    margin-left:50px;
    
}

#introcontainer a:hover {
    color:#999999;
}

#introcontainer .span9{
    margin-left: 50px;
    width:674px;
}

#banner {
    position:relative;
    overflow:hidden;
    margin:0px auto 0px auto;
    padding:0px;
    background:#eeeeee;
}

#banner img {
    z-index:50;
}

#banner h2 {
    display:block;
    position:absolute;
    left:50px;
    top:80px;
    color:#FFFFFF;
    font:40px 'FranklinGothicURWExtComD-Dem',helvetica,arial,sans-serif;
    letter-spacing:5px;
    text-transform:uppercase;
    z-index:60;
    text-shadow:1px 1px 3px #999999;
}

#banner h1 {
    display:block;
    position:absolute;
    left:50px;
    top:168px;
    text-transform:uppercase;
    font-size:84px;
    color:#fd7202;
    font-family:impact, helvetica, arial, sans-serif;
    letter-spacing:-2px;
    line-height:72px;
    margin:0px;
    padding:0px;
    z-index:60;
    text-shadow:1px 1px 3px #999999;
}

a#videolink {
    display:block;
    position:absolute;
    right:80px;
    bottom:50px;
    color:#FFFFFF;
    font:normal 25px impact, helvetica, arial, sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    background:#FD7202;
    border-radius:20px;
    margin:0px;
    padding:5px 20px 5px 20px;
    z-index:60;
}

a#videolink:hover{
    text-decoration: none;
    background:#464646;
}

#container {
    width:1300px;
    height:auto;
    margin:0px auto 0px auto;
    padding:0px;
    background-color:#464646;
}

.item {
    height:144px;
    width:256px;
    margin:0px;
    padding:0px;
}

.infobox {
    display:none;
    position:absolute;
    left:0px;
    top:0px;
    height:144px;
    width:256px;
    background:#fe7203;
    opacity:.9;
    color:#ffffff;
}

.infoboxcontent {
    margin:10px 10px 10px 20px;
    
    line-height:16px;
    color:#F9F7EF;
    font:14px 'FranklinGothicURWCon-Boo', Arial, Helvetica, sans-serif;
}

.infoboxcontent h3 {
    font:22px impact, arial, helvetica, sans-serif;
    
    
}

.infoboxcontent a {
    font-weight:bold;
    color:#FFFFFF;
}

a.featurelink {
    font:12px impact, arial, helvetica, sans-serif;
    color:#F9F7EF;
    text-transform:uppercase;
}
#responseMessage{
    font-style:normal;
    font-family:"ITC Franklin Gothic Std Bk CD";
    font-size:16px;
    line-height: 20px;
    overflow:hidden;
}

.img-title-box{
    position:relative;
    overflow:hidden;
}

.screen-move{
    position:absolute;
    bottom:0px;
    color: #FD7202;
    font-size:26px;
    font-family: Impact, "ITC Franklin Gothic Std Bk CD",sans serif;

}

.screen_next{
    right:26px;
    padding-left:100px;
}

.screen_next:before{
content:">";
}

.screen_prev{
    left:0px;
    padding-right:100px;
}

.screen_prev:before{
content:"<";
}

#responseMessage .img-title-box h2{
    font-family: Impact, "ITC Franklin Gothic Std Bk CD", sans serif;
    font-size: 52px;
    margin:0;
    position:absolute;
    bottom:0px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    width:100%;
    padding-left: 24px;
    font-size:36px;
    color: #f9f7ef;
    
}

.item:hover .infobox {
    display:block;
}

.modal {
left: 0%;
margin-top:0;
  
}

.modal.fade.in {
    top:40px;
  
}

.modal-header {
    background:none;
    border:none;
    padding: 0px;
    position: absolute;
    top: 0;
    right: 0;
}


.modal-header .close {
    margin-right: 3px;
    margin-top: -3px;
    position:relative;
    z-index:99;
}

#videoembed {
    width:690px;
    background:none;
    box-shadow: none;
    border:none;
    left:50%;
    margin-left: -345px;
    top:40px;
}

#videoembed .modal-header {
    border:none;
}

#featurepop {
    left: 50%;
    margin-left: -300px;
    top: 40px;
    overflow:hidden;
}

#featureimage {
    width:800px;
    height:425px;
    margin:0px;
    padding:0px;
    overflow:hidden;
}

#responseMessage {
    padding:0px;
    margin:0px;
}


.pagecontent {
    margin:15px;
    padding:5px;
    height:230px;
    overflow:auto;
    
}

.pagecontent a:hover {
    color:#999999;
}


.fullcontent {
    display:none;
}

.closercolumn {
    width:400px;
}


footer {

    margin:0px 0px 0px 0px;
    padding:0px;    
    clear:both;
}


#footercontent {
    width:100%;
    margin:10px auto 0px auto;
    padding:0px;
    
}

.footercolumn {
    float:left;
    width:200px;
    margin:10px 5px 10px 5px;
    padding:0px 10px 5px 15px;
    color:#999999;
    font:10px helvetica, arial, sans-serif;
    background:url(../img/footer_bar.png) left 10px no-repeat;
}

.footercolumn:first-child {
      background:none;
      padding:0px 10px 5px 0px;
}

.footercolumn p {
    line-height:1.2em;
    margin:0px 0px 10px 0px !important;
}

footer b, footer strong {
    color:#F58527;
    font-weight:bold;
}

footer h2 {
    color:#F58527;
}

footer a, footer a:visited {
    color:#999999;
    text-decoration:none;
}

footer h2 a {
    color:#f58527 !important;
}

footer a:hover {
    color:#f58527;
}

.footercolumn h2 {
    margin:0px 0px 5px 0px !important;
    text-transform:uppercase;
}

#footercolumncontainer {
    margin:45px 0px 20px 0px;
}

#footerseal {
    position:relative;
    width:100%;
    height:180px;
    background:url(../img/suseal_150.gif) left bottom no-repeat;
    
}

#footercontent h2 a {
    font: 32px 'Franklin Gothic Demi Ext Cmp',helvetica,sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}


#syrcopy {
    bottom: 10px;
    position: absolute;
    right: 0;
    text-align: right;
    color: #5F5F5F;
    font-size:10px;
}

footer{
    padding:20px;
    padding-bottom:0px;
}
#footercontent{
    width: 100%;
}


#container{
   padding-bottom:40px;
}


@media only screen and (max-width:1023px){
    .wrap{
    width:100%;
    float:left;
    }
    
    #introcontainer{
        height:auto;
    }
}



@media  (max-width: 450px) {
    
    #introcontainer {
        
    }
    
    #banner {
       
    }
    
    
    #container {
        
    }
    
        
    .modal {
        width:420px;
    }
    
    .modal.fade.in {
        top:5px;
        left:10px;
    }
    
    #featureimage {
        width:420px;
        height:200px;
    }
    
    #responseMessage {

        padding:0px;
    }
    
    .closercolumn {
        width:200px;
    }

    .pagecontent {
        height:200px;
        overflow:auto;
    }

}

/* Large desktop */
@media (min-width: 1200px) { 
   
    
    #videoembed {
        left:50%;
        margin-left: -330px;
        top:40px;
            
    }
    
    .pagecontent {
        height:200px;
        overflow:auto;
    }

    
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
    #banner {
        overflow:hidden;
    }
    
    #banner h2 {
        left:25px;
        top:10px;
        font-size:30px;
    }
    
    #banner h1 {
        left:20px;
        top:70px;
        font-size:64px;
        line-height:.9em;
    }
    
    
    #introcontainer {
         
    }
    
    #introcontainer h2 {
        margin:0px 0px 0px 22px;
    }
    
    #introcontainer .span9{
        margin-left:22px;
        width:552px;
    }
    
    #container {
          
    }

    #featurepop {
        width:600px;
        height:90%;
        top:5px;
        left:50%;
        margin:0px 0px 0px -300px;
    }
    
    .modal.fade.in {
    top:5px;
    }
    
    #videoembed {
        width:600px;
        left:50%;
        margin:0px 0px 0px -300px;
    }
    
    .pagecontent {
        height:250px;
        overflow:auto;
    }
    
    a#videolink {
    right:140px;
    }

}
 
 
 @media only screen and (max-width:701px){
     a#videolink{
         bottom:10px;
         right:10px;
         
     }
 }
 
 
 
 
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {  
    
    #banner {
        
        overflow:hidden;
        
    }
    
    #banner h2 {
        left:25px;
        top:10px;
        font-size:30px;
    }
    
    #banner h1 {
        left:20px;
        top:70px;
        font-size:64px;
        line-height:.9em;
    }
    
    #introcontainer {
       
        margin-bottom:90px;
    }
    
    #introcontainer h2 {
        margin:0px;
        margin-left:22px;
    }
    
    #introcontainer .span9{
        margin-left:22px;
        width: 454px;
        
    }
    
    #introcontainer .span3{
    margin-left:22px;
    width:298px;
    }

    #container {
        width:760px;    
    }
    
    #featurepop, #videoembed {
        width:500px;
        height:90%;
        top:5px;
        left:50%;
        margin:0px 0px 0px -250px;
        overflow:auto;
    }
    


    .pagecontent {
        height:240px;
        overflow:auto;
    }

#responseMessage .img-title-box h2{
      font-size:26px;
    
}

}
 
/* Landscape phones and down */
@media (max-width: 480px) {
body{
    width: 480px;
}
  a#videolink{
    font-size:14px;
     }

    
    #videoembed {
        
        left:0px;
        top:10px;   
        width:480px;

    }
    
    #banner {
       
        
        overflow:hidden;
    }
    
    #banner h1 {
        left:20px;
        top:30px;
        font-size:36px;
        letter-spacing:2px;
    }
    
    #banner h2 {
        top:10px;
        left:20px;
        font-size:20px;
        
    }
    
    #introcontainer {
         
        margin-bottom:60px;
    }
    
    #introcontainer h2 {
        margin:0px 0px 0px 0px;
        margin-left:20px;
        font-size:36px;
    }
    
    #introcontainer .span9{
        margin-left:20px;
        width:425px;
       
    }
    
    #introcontainer .span3{
        width:282px;
        margin-left:20px;
    }
    
    #container {
        
        margin:0px;
    }
    
    #featurepop, #videoembed {
        width:440px;
        top:5px;
        left:50%;
        margin:0px 0px 0px -220px;
        height:90%;
        
    }
    
    .pagecontent {
        height:250px;        
        overflow:auto;
        margin:5px;
        padding:2px;
        height:400px;
    }
    
    .item {
        width:460px;
        margin:5px 0px 5px 0px;
    }
    
    .infobox {
        display:block;
        left:256px;
        width:200px;
    }
    
    #responseMessage .img-title-box h2{
      font-size:26px;
    
}
    
}

body{
padding:0px;
}

}


/*** OVERRIDE CODE FOR ACCESSIBILITY CJB ***/

a#videolink {font-size: 2.083em; background: #d44500;}
#introcontainer {font-size: 1.5em;background: #fff;}
#introcontainer h2 {font-size: 2.7em; color: #d44500;}
#introcontainer a:hover {color: #6f777d;}
#banner h2 {font-size: 3.333em;color: #d44500;}
#banner h1 {font-size: 6.667em;color: #d44500;}
a#videolink {font-size: 2.083em; background:#d44500;}
.infoboxcontent {font-size: 1.167em;color: #fff;background-color: #d44500;}
.infoboxcontent h3 {font-size: 1.833em;line-height: 1em;}
.infoboxcontent {font-size: 1.167em; color: #fff;}
.infobox {background: #d44500;opacity: 1;}
a.featurelink {font-size: 1em;color:#fff;}
.featurelink:hover {color: #fff;}
.screen-move {font-size: .6em; color: #fff;}
.pagecontent {background: #fff;}
.pagecontent a:hover {color: #6f777d;}
#responseMessage .img-title-box h2 {font-size: 2.2em;color: #fff;background: #3e3d3c;}
#responseMessage {font-size: 1.333em;}
.close {color: #fff;opacity: 1;font-size: 2.5em;background-color:#333 !important;}
.close:hover {color: #fff;opacity: 1;}
.modal-header .close {background-color: #333;}
footer {background-color: #3e3d3c;}
footer h2, footer h2 a {color: #fff;background-color: #3e3d3c;}
#footercontent h2 a {font-size: 1em; color: #fff !important;background-color: #3e3d3c;}
.footercolumn {font-size: 0.95em; color: #fff;background-color: #3e3d3c;}
footer a, footer a:visited, footer a:hover {color: #fff;background-color: #3e3d3c;}
footer a:hover {text-decoration: underline;}
footer b, footer strong {color: #fff;background-color: #3e3d3c;}
#syrcopy {font-size: 0.95em; color: #fff;background-color: #3e3d3c;}
@media (min-width: 768px) and (max-width: 979px) { 
    #banner h2 {font-size:2.5em;}    
    #banner h1 {font-size:5.333em;}
}
@media (min-width: 481px) and (max-width: 767px) {  
    #banner h2 {font-size:2.5em;}    
    #banner h1 {font-size:5.333em;}
    #responseMessage .img-title-box h2{font-size:1.333em;}    
}
@media (max-width: 480px) {
    a#videolink{font-size:1.167em;}
    #banner h1 {font-size:3em;}
    #banner h2 {font-size:1.667em;}
    #introcontainer h2 {font-size:3em;}
    #responseMessage .img-title-box h2 {font-size:2.167em;}    
}
a {color: #d44500;}
a:hover {color: #d44500;}