CSS
html, body{
height: 100%;
}
body {
height: calc(100% - 300px);
background-color: #F4F8F9;
}
.drag-drop{
width: 190px;
height: 230px;
margin: 10% auto;
position:relative;
border: 2px dashed #cfd7da;
}
.drag-drop-text{
text-align: center;
color: #a3afb5;
font-family: 'arial';
line-height: 25px;
position:absolute;
top: 25%;
left:0;
right:0;
margin: 0 auto;
}
.drag-drop-text i{
font-size: 35px;
}
.btn:active,.btn:hover, .btn:focus, .btn:before, .btn:after{
outline: none;
}
.btn{
display: block;
width: 152px;
height: 32px;
position: absolute;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
border-radius: 2px;
border: 1px solid #b2bdc2;
bottom: 15px;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(232,236,238,1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(232,236,238,1);
box-shadow: inset 0px 1px 0px 0px rgba(232,236,238,1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e3e5+1,d3d9dd+100 */
background: #e0e3e5; /* Old browsers */
background: -moz-linear-gradient(top, #e0e3e5 1%, #d3d9dd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0e3e5 1%,#d3d9dd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e0e3e5 1%,#d3d9dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e3e5', endColorstr='#d3d9dd',GradientType=0 ); /* IE6-9 */
font-weight: bold;
color:#6d757b;
text-shadow: 0 1px 1px #ecf0f1;
}
.btn:hover{
cursor: pointer;
color: #FFF;
border-color: #65879e;
text-shadow: 0 1px 1px #378bc6;
-webkit-box-shadow: inset 0px 1px 0px 0px #9ccdef;
-moz-box-shadow: inset 0px 1px 0px 0px #9ccdef;
box-shadow: inset 0px 1px 0px 0px #9ccdef;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#80beea+0,489ad3+100 */
background: #80beea; /* Old browsers */
background: -moz-linear-gradient(top, #80beea 0%, #489ad3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #80beea 0%,#489ad3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #80beea 0%,#489ad3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80beea', endColorstr='#489ad3',GradientType=0 ); /* IE6-9 */
}
.progress-bar{
width: 190px;
height: 4px;
margin: 20px auto;
position:relative;
left:0;
right:0;
-webkit-box-shadow: 0px 0px 0px 1px #d1d8db;
-moz-box-shadow: 0px 0px 0px 1px #d1d8db;
box-shadow: 0px 0px 0px 1px #d1d8db;
border-radius: 3px;
background: #e0e5e8;
background: -moz-linear-gradient(top, #e0e5e8 0%, #e8ecee 50%, #e0e5e8 100%);
background: -webkit-linear-gradient(top, #e0e5e8 0%,#e8ecee 50%,#e0e5e8 100%);
background: linear-gradient(to bottom, #e0e5e8 0%,#e8ecee 50%,#e0e5e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e5e8', endColorstr='#e0e5e8',GradientType=0 );
}
.progress-bar-porcent{
float:left;
width: 80%;
height: 4px;
border-radius: 3px;
background-color:#50a6e2;
-webkit-box-shadow: 0px 0px 0px 1px #5babe3;
-moz-box-shadow: 0px 0px 0px 1px #5babe3;
box-shadow: 0px 0px 0px 1px #5babe3;
}
