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

<ui namespace="VankeStatementDetailListCell_iPhone">
    <linear orientation="v" class="wrapper">
        <image class="bg"/>
        
        <linear orientation="h" class="inner-wrapper">
            <image class="inner-bg"/>
            
            <linear orientation="v" class="col photo-col">
                <image id="imgPhoto" class="photo"/>
            </linear>
            
            <linear orientation="v" class="col name-col">
                <linear orientation="v" class="name-wrapper">
                    <linear orientation="h" class="name-remark-wrapper">
                        <label id="lblName" class="name"/>
                        <button id="btnRemark" class="remark" />
                    </linear>
                    <label id="lblDateRange" class="date-range"/>
                </linear>
            </linear>
            
            <linear orientation="h" class="col amount-col">
                <linear orientation="h" class="amount-wrapper">
                    <label id="lblAmount" class="amount" />
                    <label class="unit">元</label>
                </linear>
            </linear>
        </linear>
    </linear>
    
    <style type="text/css">
        
        .wrapper {
            width: 100%;
            height: 100%;
        }
        
        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #c5c4ca;
        }
        
        .inner-wrapper {
            width: 100%;
            height: 100%;
            padding-bottom: 1px;
        }
        
        .inner-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: white;
        }
        
        .col {
            height: 100%;
        }
        
        .photo-col {
            width: 50px;
            v-align: center;
            align: center;
        }
        
        .photo-col .photo {
            width: auto;
            height: auto;
        }
        
        .name-col {
            width: 50%;
            margin-right: 5px;
            height: 100%;
            v-align: center;
        }
        
        .name-col .name-wrapper,
        .name-col .name-wrapper .name-remark-wrapper {
            height: auto;
            width: 100%;
        }
  
        .name-remark-wrapper .name {
            font-size: 18px;
            font-style: bold;
            width: auto;
            height: auto;
        }
        
        .name-remark-wrapper .remark {
            width: auto;
            height: auto;
            padding: 3px 0px 0px 5px;
            background-image: url(bill_remark.png);
        }
        
        .name-col .date-range {
            width: 100%;
            font-size: 12px;
            color: #aaaaaa;
            height: auto;
            padding-top: 5px;
        }
        
        .amount-col {
            width: 25%;
            align: right;
            position: absolute;
            right: 10px;
        }
        
        .amount-col .amount-wrapper {
            width: auto;
            height: 100%;
        }
        
        .amount-col .amount {
            font-size: 18px;
            width: auto;
        }
        
        .amount-col .unit {
            font-size: 12px;
            width: auto;
            color: #aaaaaa;
        }
  </style>
</ui>