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

root { 
    display: block;
}

.sidemenu {
    position: absolute;
    width: 382px;
    height: 515px;
    margin-left: -41px;
    margin-top: -1px;
    background: url(../img/sidemenu/farm.png) no-repeat;
}

.content img {
    margin: 10px 0 15px 0;
    display: inline-block;
    vertical-align: middle;
}

#farm1, #farm2, #farm3 {height: 136px;}
#farm1 {margin-left: 55px;}
#farm2, #farm3 {margin-left: 4px;}

.subtopic {
    font-size: 16px;
    color: #28af36;
    display: block;
    margin-left: 55px;
    margin-bottom: 8px;
}

.subtopic span {font-size: 24px;}

.content a {margin-left: 55px;}

.content a span {
    margin-left: 8px;
    padding-left: 10px;
    color: #231f20;
    text-decoration: underline;
    background: url(../img/layout/direction_right_dark.png) left center no-repeat;
    vertical-align: -5%;
}

@media only screen and (max-width : 768px) {
    #farm1, #farm2, #farm3 {height: auto;}
    #farm1 {margin-bottom: -5px;}
    #farm2 {margin-left: 55px;}
    #farm3 {margin-left: 5px;}
}

@media only screen and (max-width : 568px) {
    #farm1 {margin-left: 10px; vertical-align: top;}
    #farm2, #farm3 {margin-left: 4px;}
    #farm1 {height: 125px;}
    #farm2, #farm3 {height: 125px;}
    .subtopic {margin-left: 10px;}
    .content a {margin-left: 10px;}
}

@media only screen and (max-width : 480px) {
    #farm1 {margin-left: 10px; vertical-align: top;}
    #farm2, #farm3 {margin-left: 4px;}
    #farm1 {height: 104px; width: auto;}
    #farm2, #farm3 {height: 105px;}
}

@media only screen and (max-width : 320px) {
    #farm1, #farm2 {margin-left: 10px;}
    #farm1 {width: 301px;}
    #farm2, #farm3 {height: 130px;}
    #farm3 {width: 99px;}
}