body { 
    background: #d7dada url('/theme/img/tile.png') repeat-x center top; 
    text-align: center; 
    }



/* Site Header
------------------------------------ */

header {
    width: 960px;  
    height: 103px;
    position: relative;
    margin: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    z-index: 10;
    } 
           
    @media (min-width : 1200px) { header { width: 1200px; height: 115px; }}  
               
#logo {
    width: 376px;
    height: 79px;
    display: block;
    position: absolute;
    top: 8px;
    left: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }
    
    #logo.biglogo { width: 454px; height: 85px; }
    #logo.bigtag  { width: 455px; height: 85px; } 
         
    @media (min-width : 1200px) { #logo { width: 518px; height: 91px; }} 
    
    @media (min-width : 1200px) { #logo.biglogo { width: 593px; height: 96px; } } 
    
    @media (min-width : 1200px) { #logo.bigtag  { width: 595px; height: 96px; } } 
         
#logo img {
    width: 366px;
    height: 49px;
    margin: 20px 5px 10px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition:    all .1s ease-in-out;
    -o-transition:      all .1s ease-in-out;
    -ms-transition:     all .1s ease-in-out;
    transition:         all .1s ease-in-out;
    }
    
    #logo.biglogo img { width: 444px; height: 55px; } 
    #logo.bigtag img  { width: 445px; height: 55px; }
    
    
    @media (min-width : 1200px) { #logo img { width: 458px; height: 61px; margin: 20px 30px 10px; }}  
    
    @media (min-width : 1200px) { #logo.biglogo img { width: 533px; height: 66px; }} 
    
    @media (min-width : 1200px) { #logo.bigtag img { width: 534px; height: 66px; }} 
  
#logo img:hover { 
    width: 376px;
    height: 50px;
    margin: 19.5px 0 9.5px;  
    } 
    
    @media (min-width : 1200px) { #logo img:hover { width: 468px; height: 62px; margin: 19.5px 25px 9.5px;  }}  
    
#logo img:active {     
    width: 356px;
    height: 47px; 
    margin: 21px 10px 11px;
    } 
    
    @media (min-width : 1200px) { #logo img:active { width: 448px; height: 60px; margin: 20.5px 35px 10.5px;}}  
  



/* Content
------------------------------------ */

#body,
#content,
#options {
    position: relative;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition:    background .3s ease-in-out;
    -o-transition:      background .3s ease-in-out;
    -ms-transition:     background .3s ease-in-out;
    transition:         background .3s ease-in-out; 
    }
    
#body {
    margin: auto auto 30px auto;
    width: 960px; 
    text-align: left;
    padding: 20px 0;
    background: white;
    }

    @media (min-width : 1200px) { #body { width: 1200px; padding: 30px 0; } }   

#content {
    float: left; 
    width: 570px;
    margin-left: 50px;
    } 
    
    @media (min-width : 1020px) { #content { width: 600px; margin-left: 20px; } }
    
    @media (min-width : 1200px) { #content { width: 730px; margin-left: 30px; } }
    

#options {
    float: right; 
    width: 300px;
    margin-right: 20px;
    } 
    
    @media (min-width : 1200px) { #options { width: 380px; margin-right: 30px; } }  

.wide #content {
    width: 890px; 
    padding: 0 20px;
    float: none;
    margin: 0 0 0 30px;
    }     
        
    @media (min-width : 1020px) { .wide #content { width: 920px; margin-left: 0; } }
    @media (min-width : 1200px) { .wide #content { width: 1140px; padding: 0 30px; } }  





/* --------------- Featured Boxes --------------- */

#home #features { width: 960px; margin: 30px auto; }

    @media (min-width : 1200px) { #home #features { width: 1200px; margin: 30px auto; } }  
    

.box,
.box a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition:    background .3s ease-in-out;
    -o-transition:      background .3s ease-in-out;
    -ms-transition:     background .3s ease-in-out;
    transition:         background .3s ease-in-out; 
    width: 300px;
    height: 180px;
    }

    @media (min-width : 1200px) { .box, .box a { width: 380px; height: 220px; } }  
    
.box {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative; 
    margin: 0 0 20px 0;
    }  
    
    #home .box {
        float: left;
        margin: 0 30px 0 0;
        } 
        
    .ie8 #home .box { margin: 0 20px 0 0; }  
        
    .ie7 #box-campaign.box,
    .ie8 #box-campaign.box,
    #home .box:last-child { margin: 0; }  
    
.box a.link { 
    position: relative;
    display: block; 
    -moz-box-shadow: inset 0 0 20px rgba(0,0,0,.1); /* inner glow */
    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.1); /* inner glow */
    box-shadow: inset 0 0 20px rgba(0,0,0,.1); /* inner glow */
    background: rgba(36,87,125,.8);
    }
    
    .box.default-image a.link { background: rgba(36,87,125,.9); }
    .box a.link:hover         { background: rgba(74,130,165,.3); }
    .box a.link:active        { background: rgba(13,49,83,1);  }    
        
    
.box .text {
    width: 90%;
    overflow: hidden;
    padding: 15px 5%;  
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition:    background .3s ease-in-out;
    -o-transition:      background .3s ease-in-out;
    -ms-transition:     background .3s ease-in-out;
    transition:         background .3s ease-in-out; 
    } 
    
    .ie7 .box .text,
    .ie8 .box .text { background: #24577d; width: 95%; padding: 10px 2.5% 0; }
    
.box a h2 {
    font: 12px/19px 'UniversLTW01-53Extended',Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #c9eaff;
    margin: 0 0 4px;  
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }
      
    @media (min-width : 1200px) { .box a h2 { font-size: 14px; line-height: 21px; } } 
    
.box a h3 {
    font-size: 24px;
    color: rgba(255,255,255,.9);
    margin: 0 0 4px;  
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }
  
   .box a:hover h3 {  text-shadow: 1px 1px 1px rgba(3,59,91,1); }
    
    @media (min-width : 1200px) { .box a h3 { font-size: 26px; } } 
    
    .ie7 .box a h3,
    .ie8 .box a h3 { color: white; font-size: 18px; margin-bottom: 0;}

.box a .button {
    display: inline-block;
    background: #417698;
    padding: 10px 15px;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'UniversLTW01-67BoldCn','Arial','Helvetica',sans-serif;
    color: white;
    line-height: 1;
    margin: 10px auto 5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out; 
    }
    
    .box a:hover .button {  
        text-shadow: 1px 1px 1px rgba(3,59,91,1); 
        padding: 15px 20px;
        margin: 5px auto 0;
        background: #489cd3;
        }

    @media (min-width : 1200px) { .box a .button { font-size: 16px; } } 

    .ie7 .box a .button ,
    .ie8 .box a .button { padding: 5px 10px; }
    
    .ie7 .box a:hover .button ,
    .ie8 .box a:hover .button { padding: 10px 15px; }
    

/* Site Footer
------------------------------------ */

footer {
    width: 100%;
    padding: 30px 0 60px 0;
    background: #c5caca;
    }
    
#footer-contents,
.credit {
    font: 11px/13px "Univers LT W01 55 Roman",Arial, Helvetica, sans-serif;
    width: 960px;
    margin: auto;
    color: #616161;
    }
    
    @media (min-width : 1200px) { #footer-contents, .credit  { width: 1200px; }}    
    
#footer-contents p { margin: 0; }
    
.contact-info {
    text-align: left;
    width: 35%;
    float: left;
    }

#footer-contents .links { text-transform: uppercase;}   

.disclaimer {
    width: 64%;
    float: right;
    }
    
#footer-contents a, .credit a { color: #4a4a4a; }  

#footer-contents a:hover, .credit a:hover { color: black; }  


.credit {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #a6adad;
    }