<?xml version="1.0" encoding="UTF-8"?>

<ui namespace="VankeWeatherCell_iPhone">
    <linear class="wrapper" orientation="v">
        <image class="bg"/>
        <button id="btnMask" class="mask" />
        
         <linear class="root" orientation="v">
            
            <linear class="first-row" orientation="h">
                <linear class="inner" orientation="h">
                    <image id="imgWeatherIcon" />
                    <label id="lblCityName">上海</label>
                    <image id="imgPosIcon" src="location_icon.png" />
                </linear>
            </linear>
            
            <linear class="sec-row" orientation="h">
                <label id="lblWeatherDesc"></label>
            </linear>
        </linear>

    </linear>

   <style type="text/css">
       .wrapper {
            width: 100%;
            height: 100%;
        }
        
        .bg {
           width: 100%;
           height: 100%;
           position: absolute;
           left: 0;
           top: 0;
           image-src: url(home_bg.png);
           image-mode: fill;
        }
        
        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url(blue_bg.png);
        }
        
        .root {
            padding-right: 20px;
        }
        
        .first-row {
            width: 100%;
            height: 50%;
            align: right;
            padding-top: 15px;
        }
        
        .first-row .inner {
            width: auto;
            height: 100%;
        }
        
        #imgWeatherIcon {
            width: 42px;
            height: 100%;
            image-loading: white;
        }
        
        #lblCityName {
            width: auto;
            height: 100%;
            color: white;
            font-size: 13px;
            font-weight: lighter;
            margin-left: 5px;
            opacity: 0.9;
        }
        
        #imgPosIcon {
            width: auto;
            margin-left: 5px;
        }
        
        .sec-row {
            width: 100%;
            height: 50%;
            align: right;
            padding-bottom: 20px;
        }
        
        #lblWeatherDesc {
            width: 100%;
            text-align: right;
            color: white;
            font-size: 13px;
            font-weight: lighter;
            opacity: 0.9;
        }
   </style>
</ui>
