div.roundy
{
background-image: url(bluestripe.jpg);
background-position: top;
background-repeat: repeat-x; 
background-color: #3D5F85;
}
#mainx {padding-bottom: 30px; padding-top: 10px;}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 820px) {
    div.roundy {width:90%;}
    #un {top: 125px; left: 225px; font-size: 18px; color: Black; font-weight: normal;}
    #gr {top: 80px; left: 145px; font-size: 100px;}
    #under {position: absolute; left: 135px; top: 300px; color: #CCCCCC;}
}


/* for 700px or less */
@media screen and (max-width: 600px){
    #un {top: 75px; left: 145px; font-size: 18px; color: Green; font-weight: normal;}
    #gr {top: 80px; left: 125px; font-size: 70px; text-shadow: none;}
    #under {position: absolute; left: 115px; top: 205px; color: #333333; text-align: left;}
}

/* for 480px or less */
@media screen and (max-width: 480px) 
{
    #un {top: 0px; left: 60px; position: relative; font-size: 18px; color: White; font-weight: normal;}
    #gr {top: -20px; left: 20px; position: relative; font-size: 80px; text-shadow: none;}
    .leftbar {float: none; width: 90%; position: relative;}
    #main {width: 90%; position: relative;}
    #under {position: relative; width: 90%; left: 5px; top: 0px; padding-bottom: 30px; color: #CCCCCC;}
}