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

root { 
    display: block;
}

.sidemenu ul {
    margin-left: 138px;
    margin-top: 230px;
}

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

.imgholder {margin-left: -300px; margin-top: -55px;}
.imgholder img {vertical-align: top; position: relative; cursor: pointer;}
#img1 {z-index: 2;}
#img2 {margin-top: 39px; margin-left: -45px; z-index: 3;}
#img3 {margin-top: 12px; margin-left: -167px; z-index: 2;}
#img4 {margin-top: -114px; margin-left: 32px; z-index: 1;}
#img5 {margin-top: -94px; margin-left: -55px; z-index: 0;}

.popup {
    background: url(../img/layout/lightbox.png) repeat;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 9999;
    display: none;
}

.popup img {
    height: 100%;
    max-height: 634px;
    max-width: 969px;
    width: auto;
}

.popup .wrap {
    position: relative;
    text-align: right;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: -60px;
}

.popup .wrap #close {
    padding: 7px 10px;
    background: #28af36;
    display: inline-block;
    margin: 20px 10px;
    cursor: pointer;
}

.popup .wrap #close img {
    max-height: 9px;
    min-height: 9px;
    height: 9px;
    width: 53px;
    min-width: 53px;
    max-width: 53px;
    margin-top: 0;
    display: block !important;
}

@media only screen and (max-width : 768px) {
    .sidemenu ul {margin-left: 42px;}
    .imgholder {margin-top: -40px;}
    #img1 {z-index: 2;}
    #img2 {margin-left: -61px; z-index: 2;}
    #img3 {float: right; margin-top: -70px; margin-left: -300px; margin-right: 5px; z-index: 1;}
    #img4 {margin-top: -120px; margin-left: 61px; z-index: 1;}
    #img5 {margin-top: -82px; margin-left: 105px;}
    .popup img {width: 100%; height: auto;}
}

@media only screen and (max-width : 568px) {
    .imgholder {margin-left: 10px; margin-right: 0px; margin-top: 0}
    .imgholder img {margin: 0 !important; margin-left: 30px !important;}
    #img1 {width: auto;}
    #img2 {width: auto; margin-top: -22px !important;}
    #img3 {width: auto; float: none; margin-top: -60px !important;}
    #img4 {width: auto; margin-top: -22px !important;}
    #img5 {width: auto; margin-top: -22px !important;}
}

@media only screen and (max-width : 320px) {
    .imgholder {margin-left: 10px; margin-right: 0px; margin-top: 0}
    .imgholder img {margin: 0 !important;}
    #img1 {width: 95%;}
    #img2 {width: 70%; margin-top: -22px !important;}
    #img3 {width: 98%; float: none; margin-top: -60px !important;}
    #img4 {width: 100%; margin-top: -22px !important;}
    #img5 {width: 94%; margin-top: -22px !important;}
}