/* 
    Document   : about_awards
    Created on : Jun 14, 2013, 5:08:38 PM
    Author     : Ping
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

.sidemenu {
    background: url(../img/sidemenu/franchise_general.png) no-repeat;
    height: 645px;
}

.sidemenu ul {
    margin-left: 159px;
    margin-top: 180px;
}

.sidemenu ul li a {
    width: 140px;
}

.imgholder {
    margin-left: 1px;
    border-top: 4px #5fc426 solid;
    border-bottom: 4px #5fc426 solid;
}

.imgholder img {
    vertical-align: top;
    margin-left: 4px;
}

#img1 {float: left; margin: 0;}
#img5 {margin-top: 4px;}
#img4 {height: 93px; width: 135px;}

@media only screen and (max-width : 768px) {
    .sidemenu ul {margin-left: 63px;}
    .imgholder {margin-left: 0;}
    #img1 {width: 227px;}
    #img5 {width: 227px; margin-left: 0; margin-top: -57px; height: 72px;}
    #img4 {height: auto; width: auto; margin-top: 4px;}
    #img4 {margin-bottom: -15px;}
}

@media only screen and (max-width : 568px) {
    .banner {background-position: 600px top !important;}
    .imgholder {margin-left: 10px; margin-right: 10px;}
    #img1 {height: 181px; width: auto;}
    #img2, #img3, #img4 {height: 78px; width: auto;}
    #img4 {margin-top: 0; width: 115px;}
    #img5 {height: 99px; width: 293px; margin-left: 4px; margin-top: 4px;}
}

@media only screen and (max-width : 480px) {
    #img1 {height: 147px; width: auto;}
    #img2, #img3, #img4 {height: 59px; width: auto;}
    #img4 {margin-top: 0; width: 116px;}
    #img5 {height: 84px; width: 253px; margin-left: 4px; margin-top: 4px;}
}

@media only screen and (max-width : 320px) {
    #img1 {width: 154px; height: auto;}
    #img2, #img3 {height: 63px;}
    #img3 {width: 42px;}
    #img5 {width: 154px; height: 50px; margin-top: -35px; margin-left: 0;}
    #img4 {height: 98px; width: auto; margin-top: 4px;}
}