html
{
   height               : 100%;
}

body
{
   margin               : 0px;
   padding              : 0px;
   font-family          : verdana,arial; 
   font-face            : verdana,arial; 
   height               : 100%;
}

.icon
{
   background-color:#808080; 
   text-align:center; 
}


@media screen and (max-width: 600px)
{
   .icon
   {
      height:70px; 
      width:70px; 
      font-size:150%;
   }

}

@media screen and (min-width: 600px) and (max-width: 900px)
{
   .icon
   {
      height:110px; 
      width:110px; 
      font-size:170%;
   }

}


@media screen and (min-width: 900px)
{
   .icon
   {
      height:150px; 
      width:250px; 
      font-size:200%;
      color: rgba(0, 0, 0, 0.0);
   }
   
   #id_0
   {
      background-image:url(icon_2010.jpg);
   }
   #id_9
   {
      background-image:url(icon_2009.jpg);
   }
   #id_8
   {
      background-image:url(icon_2008.jpg);
   }
   #id_7
   {
      background-image:url(icon_2007.jpg);
   }
   #id_6
   {
      background-image:url(icon_2006.jpg);
   }
   #id_5
   {
      background-image:url(icon_2005.jpg);
   }
   #id_4
   {
      background-image:url(icon_2004.jpg);
   }
   #id_3
   {
      background-image:url(icon_2013.jpg);
   }
   #id_2
   {
      background-image:url(icon_2012.jpg);
   }
   #id_1
   {
      background-image:url(icon_2011.jpg);
   }
   #id_submit
   {
      background-image:url(icon_solert_off.jpg);
   }   
   #id_reset
   {
      background-image:url(icon_reset_on.jpg);
   }   
}