html file

css

/* upload-popup */
.upload-popup-all {position: absolute;width:281px;padding: 10px;border:1px solid #959ba5;background-color: #eef0f3;}
.upload-popup-all .describe {float:left;font-size:13px;line-height:123%;color:rgb(101,101,101);text-shadow:0px 1px 0px rgba(255,255,255,0.5);}
.upload-popup-all .details {float: right; color: #3e9de3;text-decoration: underline;}
.upload-popup-all .schedule {height: 14px;width:280px;margin-top: 3px;position: relative;background:url(../images/upload-fffbg.png) no-repeat;/*overflow:hidden;*/}
.upload-popup-all .schedule-bg {height: 11px;width:100%;position: absolute;bottom:1px;border:1px solid #3e9de3;background-color: #6dbef2;}
.upload-popup-all .schedule-com-bg {height: 11px;width:100%;position: absolute;border:1px solid #70b05c;background-color: #ace17d;}
.upload-popup-all ul {max-height:131px;margin-top: 15px;margin-bottom: 10px;border: 1px solid #b2b9bd;overflow: auto;}
.upload-popup-all li:last-child {margin-bottom: 0;}
.upload-popup-list {height:25px;width:100px; text-indent: 12px; margin-bottom: 1px;position: relative;background-color:#d9f0ff;}
.upload-down {width:100%;background-color:#e8fdc9;}
.upload-popup-list .wrap {height:25px;width:260px;position: absolute; }
.upload-popup-list .wrap .icon {display: inline-block;width:10px;height: 10px;position: absolute;right: 5px;top:7px;background: url(../images/atom-popup-file-icon.png)no-repeat -5px -5px;}
.upload-down .wrap .com-icon {background: url(../images/atom-ico.png)no-repeat -25px -125px;cursor:default; }


.upload-prompt {position: absolute;left: 50%;}
.upload-prompt-com { top: 100px; background-color:rgb(231,253,201);width:96px;height:19px;padding: 5px; line-height: 19px;  color: #669650;text-align: center; border-color:rgb(112,176,92);border-width:1px;border-style:solid;border-radius: 5px;  moz-box-shadow:0px 2px 4px rgba(5,0,0,0.3);-webkit-box-shadow:0px 2px 4px rgba(5,0,0,0.3);box-shadow:0px 2px 4px rgba(5,0,0,0.3);}
.upload-prompt-fail {background-color:rgb(251,227,227);width:126px;height:19px;border-color:rgb(220,140,139);border-width:1px;border-style:solid; border-radius: 5px;text-align: center;padding: 5px;line-height: 19px; -moz-box-shadow:0px 2px 4px rgba(5,0,0,0.3);-webkit-box-shadow:0px 2px 4px rgba(5,0,0,0.3);box-shadow:0px 2px 4px rgba(5,0,0,0.3);}

gistfile1.html

<div id="file-main" class="page-file-main">
                <div class="upload-prompt upload-prompt-com">Uploaded 7 files</div>
                <div class="upload-prompt upload-prompt-fail">Unable to upload files</div>
                    <div class="upload-popup-all fn-clear">
                            <em class="describe">Uploading to 'My Files'</em>
                            <a href="" class="details">View details</a>
                            <div class="fn-clear"></div>
                            <div class="schedule">
                                <div class="schedule-bg "></div>
                            </div>
                            <!-- <ul>
                                <li class="upload-popup-list">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list upload-down">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list upload-down">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>
                                <li class="upload-popup-list">
                                    <div class="wrap">
                                        Pic 0871.png
                                        <a href="#" class="icon com-icon"></a>
                                    </div>
                                </li>

                            </ul> -->
                            <!-- <em class="describe">Uploading 3 of 7 file(s)</em> -->
                    </div>
                <!-- file content start -->

                    <!-- file title start -->
                    <div id="page-file-info" style="display: none;"></div>
	                <div id="page-file-info-comment" class="page-file-info" style="display:none;">
	                        <!-- file thumbnail end -->
	                        <div class="page-file-line"></div>
	                        <!-- file share list start -->
	                        <div class="page-file-share-list fn-clear">
	                            <div class="share-with">Share with:</div>
	                            
								<div class="share-list"></div>								
	                        </div>
	                        <div class="page-file-line"></div>
	                        <!-- file share list end -->
	                        <!-- file comment list start -->
	                        <ul class="page-file-comment-list">
	                            <!-- 文件评论输出循环 start -->
	                            <!--<li>
	                                <img src="images/temp-photo07-34.jpg" class="page-file-comment-list-photo" alt="Xu Chen" />
	                                <h6 class="atom-globals-rows"><span class="page-file-comment-list-time">1 seconds ago</span>Xu Chen</h6>
	                                <p>I'll tell you after I find my keys. Ooh, what's that shiny thing over there?</p>             
	                            </li>-->
	                            <!-- 文件评论输出循环 end -->
	                        </ul>

	                        <!-- file comment list end -->
	                        <!-- file comment post start -->
	                        <div class="post-box">
	                            <div id="post-form" >
	                                <img src="images/atom-user-default.jpg" alt="" class="page-file-post-photo self-avatar" />
	                                <input type="text" class="post-box-text" placeholder="leave a comment" />
	                            </div>
	                            <img src="images/loading.gif" width="24" height="24" id="post-form-loading" class="atom-loading">
	                        </div>
	                        <!-- file comment post end -->
	                    </div>
                    <!-- file information end -->

                <!-- file content end -->
					<img src="images/loading.gif" width="24" height="24" id="file-info-loading" class="atom-loading">
                
               
                
    
                
                
            </div>