// Name:            上传资料
// Description:     UploadMaterial
// Author:          allen.hu(jiabao_hu@corp.netease.com)
// ========================================================================

@import "../../core/module/uploadphoto.mcss";

// Varibles:
// ========================================================================


$m-uploadphoto_height = 490px;
$m-uploadphoto_width =  992px;
$m-uploadphoto_background = #FFFFFF;
$m-uploadphoto_border_color_selected = #8fc31f;
$m-uploadphoto_border_color = #dddddd;
$m-uploadphoto_legend_background_color = #F7F7F7;
$m-uploadphoto_legend_width = 910px;
$m-uploadphoto_legend_height = 36px;
$m-uploadphoto_item_height = 200px;
$m-uploadphoto_item_label_width = 80px;
$m-uploadphoto_item_ctrl_width = 140px;
$m-uploadphoto_item_desc_width = 546px;

// Component:       `m-uploadphoto`
// ========================================================================

.m-uploadphoto {
    width: $m-uploadphoto_width;

    min-height: $m-uploadphoto_height;

    background: $m-uploadphoto_background;

	outline: #m-uploadphoto_border_color solid 1px;

	margin: 10px auto;

    padding: 20px 40px;
}

.m-uploadphoto-tip{
	font-family:MicrosoftYaHei;
	font-size:14px;
	color:#F19149;;
	line-height:14px;
	height: 52px;

	width: 100%;
    background:#FFE0B3;
    > img{
        margin-left: 10px;
    }
    > span {
        margin-left:5px;
        text-align: left;
        line-height: 30px;
    }
    margin-bottom: 10px;
}

.m-uploadphoto-legend{
	width: 100%;
	background: $m-uploadphoto_legend_background_color;
	height:$m-uploadphoto_legend_height;

	> span {
        text-align: left;
        line-height: 30px;
        margin-left: 20px;
    }
}


.m-uploadphoto-item-1{
	width: 100%;
	height: 80px;

	margin-top: 30px;
}


.m-uploadphoto-item{
	width: 100%;
	height: $m-uploadphoto_item_height;

	margin-top: 30px;
}

.m-uploadphoto-label{
	width: $m-uploadphoto_item_label_width;

	> label {
		font-family:MicrosoftYaHei;
        font-size:12px;
        color:#AAAAAA;;
        line-height:14px;
        @extend .f-fr;

	}
	margin-top: 30px;
	margin-right: 30px;
	@extend .f-fl;
}

.m-uploadphoto-ctrl{
	position: relative;
	overflow: hidden;

	.m-uploadphoto-ctrl-picture-table{
		display: table;
		width: 140px;
		height: 140px;
		table-layout: fixed;
	}

	.m-uploadphoto-ctrl-picture{
		width: 140px;
		height: 140px;
		background: #f5f5f5;
		border: 1px solid #DDD;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        > img {
			max-height: 100%;
            max-width: 100%;
        }
	}

	.m-uploadphoto-ctrl-button{
    		height: 46px;

    		 > input[type="button"]{
                background:#339BBF;
                width:140px;
                height:36px;
                margin-top:10px;
                color:white;
            }

            > input[type="file"]{
                position: absolute;
                bottom: 0;
                opacity: 0;
                font-size: 200px;
                left: 0;
            }
    	}

	@extend .f-fl;
}

.m-uploadphoto-desc{
	width: $m-uploadphoto_item_desc_width;

	margin-left: 15px;
	margin-top: 10px;

	> span {
		display: block;
		font-family:MicrosoftYaHei;
        font-size:12px;
        color:#AAAAAA;;
        line-height:14px;
        line-height: 20px;
        > a {
            font-family:MicrosoftYaHei;
            font-size:14px;
            color:#38ABD0;;
            line-height:14px;
        }
	}

	@extend .f-fl;
}

.m-recipientinfo-label{
	@extend .f-fl;
}

.m-recipientinfo-item{
	@extend .f-fl;
}