@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:italic&subset=latin);

@font-face { 
    font-family: Droid Sans;
    src:url(fonts/droidsans-webfont.eot);
    src: url(fonts/droidsans-webfont.svg) format('svg'), 
      url(fonts/droidsans-webfont.woff) format('woff'),  
      url(fonts/droidsans-webfont.ttf) format('truetype');
    
  }

body {
     font-family:'open_sansregular';
     background: #333333;
     margin: 0 auto;
     padding: 0;
     color: #CCC;
     width: 100%;
    height: 100%;
}

/*------------------------------------Links------------------------------------------*/
a img {border: none;}

a:link         {color:#FFF; text-decoration: none;}                        
a:visited {color:#FFF; text-decoration: none;}                         
a:hover        {color:#CCC; text-decoration: none;}                         
a:active  {color:#CCC; text-decoration: none;} 

#container {
     position:relative;
     width:92%;
     height:auto;
     margin-top:2%;
     margin:3%;
}

.wrapper {
     position: relative;
     float:left;
     width: 29%;
     height: 200px;
     overflow:hidden;
     margin-top:1%;
     margin:2%;
}

.wrapper:hover > .name {
     background: rgba(36, 51, 131, 1.0);
}

.image {
     position:absolute;
     top:0%;
     left:0%;
     width:100%;
     min-height:200px;
     
}

.image img {
     width:100%;
     height:auto;
     -webkit-filter: grayscale(100%);
}

.name {
     font-family: "Droid Serif";
     position: absolute;
     bottom:0%;
     left:0%;
     width:100%;
     height:14%;
     text-align: center;
     vertical-align: middle;
     line-height: -5%;
     font-size: 20px;
     color:#CCC;    
     background: rgba(36, 51, 131, .80);
     z-index:1001;

}

.ribbon {
     position: absolute;
     top:0%;
     left:0%;
     width:58px;
     height:58px;
     text-align: center;
     vertical-align: middle;
     line-height: 0%;
     font-size: 16px;
     z-index:1002;

}

.ribbonYear {
     position: absolute;
     top:43%;
     left:7%;
     color: rgba(36, 51, 131, 1.0);
     font-family: "droid_serifitalic", "Segoe UI", "Helvetica", sans-serif;
     font-weight: 600;
     transform:rotate(-45deg);
          -ms-transform:rotate(-45deg); /* IE 9 */
          -webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */
}

.wrapper .name: hover {
     background: rgba(36, 51, 131, 1.0);
}

#greyHeader
{
     background-image: url(header_final.jpg);
     width: 100%;
     height: 125px;
     background-color: #2a2929;
}

#daclogo
{
     position: absolute;
     top: 10px;
     left: 5.3%;
}

#daclogoshort
{
     display: none;
     position: absolute;
     top: 10px;
     left: 5.3%;
}

#siglogo
{
     position: absolute;
     right: 30px;
     top: 8px;
}

.title
{
     position: absolute;
     top: 55px;
     left: 5.5%;
     font-family: "Droid Serif", "Segoe UI", "Helvetica", sans-serif;
     text-shadow: 2px 2px black;
     font-style: italic;
     font-weight: 0;
     font-size: 39px;
     color: white;
}

.title a
{
     color: white;
}

.strip
{
     display: block;
     height: 40px;
     width: 100%;
     top: -1%;
     position: relative;
}

.strip img
{
     width: 100%;
     height: 100%;
}


h1 {
     font-family: 'droid_serifitalic';
     font-size: 40px;
     color:#FFF;
     text-shadow: 2px 2px #000;

     } 
     
.footnote {
     width:100%;
     height:auto;
     float:left;
     margin-left:1.5%;
     font-family: 'open_sansregular';
     font-weight:100;
     font-size: 9px;
     color:#CCC;
}

@media only screen and (min-width : 800px) and (max-width : 900px)
{    

.wrapper {
     position: relative;
     float:left;
     width: 29%;
     height: 180px;
     margin: 2%;
     overflow:hidden;
     margin-top:1%;
}

.dac_short {
     display:none;  
}

.name {
     position: absolute;
     bottom:0%;
     left:0%;
     width:100%;
     height:14%;
     text-align: center;
     vertical-align: middle;
     line-height: -5%;
     font-size: 17px;
     color:#CCC;    
     background: rgba(36, 51, 131, .85);
     z-index:1001;

}

}

/*-----------------------------------Tablet View---------------------------------------*/


@media only screen and (min-width : 650px) and (max-width : 800px){

#container {
     position:relative;
     width:96%;
     height:auto;
     margin-left:4%;
     margin-top:2%;
}
.wrapper {
     position: relative;
     float:left;
     width: 29%;
     height: 150px;
     margin: 1%;
     overflow:hidden;
     margin-top:1%;
}

.dac_short {
     display:none;  
}

.name {
     position: absolute;
     bottom:0%;
     left:0%;
     width:100%;
     height:15%;
     text-align: center;
     vertical-align: middle;
     line-height: -5%;
     font-size: 15px;
     color:#CCC;    
     background: rgba(36, 51, 131, 1.0);
     z-index:1001;

}



}

@media only screen and (min-width : 580px) and (max-width : 649px) {

#container {
     position:relative;
     width:92%;
     height:auto;
     margin-left:4%;
     margin-top:4%;
}

.title
     {
          font-size: 35px;
     }

#siglogo
     {
          right: 35%;
     }

#daclogoshort
{
     display: block;
}

#daclogo
{
     display: none;
}

.wrapper {
     position: relative;
     float:left;
     width: 46%;
     height: 200px;
     margin: 2%;
     overflow:hidden;
     margin-top:3%;
}

.image {
     position:absolute;
     top:0%;
     left:0%;
     width:100%;
     min-height:200px;
     
}

.name {
     position: absolute;
     bottom:0%;
     left:0%;
     width:100%;
     height:14%;
     text-align: center;
     vertical-align: middle;
     line-height: -5%;
     font-size: 20px;
     color:#CCC;    
     background: rgba(36, 51, 131, .85);
     z-index:1001;

}

}

@media only screen and (min-width : 460px) and (max-width : 579px){

#daclogoshort
{
     display: block;
}

#daclogo
{
     display: none;
}

#container {
     position:relative;
     width:92%;
     height:auto;
     margin-left:4%;
     margin-top:5%;
}

.wrapper {
     position: relative;
     float:left;
     width: 47%;
     height: 160px;
     margin: 1.5%;
     overflow:hidden;
     margin-top:1%;
}

.title
     {
          font-size: 35px;
     }

.strip
{
     display: block;
     height: 20px;
     width: 100%;
     top: -1%;
     position: relative;
}

.name {
     position: absolute;
     bottom:0%;
     left:0%;
     width:100%;
     height:14%;
     text-align: center;
     vertical-align: middle;
     line-height: -4%;
     font-size: 15px;
     color:#CCC;    
     background: rgba(36, 51, 131, .85);
     z-index:1001;

}

.dac_short {
     display:none;  
}

}

@media only screen and (min-width : 1px) and (max-width : 459px) {

#daclogoshort
{
     display: block;
}

#daclogo
{
     display: none;
}

#container {
     position:relative;
     width:90%;
     height:auto;
     margin-top:0%;
}

.dac
{
     display:none;
}

.dac_short {
     position: absolute;
     top: 15px;
     left: 55px;
     text-shadow: 2px 2px black;
     font-size: 16px;
     color: white;
}

#daclogo
{
     position: absolute;
     top: 10px;
     left: 15px;
      width: 40%;
      height:auto;
}

.title
     {
          font-size: 25px;
     }

.strip
{
     display: block;
     height: 20px;
     width: 100%;
     top: -20px;
     position: relative;
}

.image {
     position:relative;
     top:0%;
     left:0%;
     width:100%;
     margin-bottom: 10px;
     
}

.name {
     background: rgba(36, 51, 131, 1.0);     
}

.wrapper {
     position: relative;
     width: 98%;
     height: 200px;
     float:left;
     margin: 2%;
     overflow:hidden;
     margin-bottom:6%;
}

.footnote {
     width:100%;
     height:auto;
     float:left;
     margin-left:3%;
     font-family: 'open_sansregular';
     font-weight:100;
     font-size: 12px;
     color:#CCC;
     margin-bottom:5%;
}

.name {
     line-height: -6%;   
}
     
}