/*
 * Base
 */

.mavatarsupload-progress{
    
    width:100%;
    height:24px;
    margin:0 auto 10px auto;
    padding:0px;
    
    background:#f4f4f4;
    border: 1px solid #d4d4d4;    
    box-shadow:inset 0px 2px 3px #bbb; 
	border-radius:2px;    
}

.mavatarsupload-bar{
	
	border-radius:2px; 
    height:100%;
    background:#999;
    
    background-size:18px 18px;
   	background-color:#7ce;   
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    
    box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
}
.mavatarsupload-bar span {padding: 5px 6px 3px; display: block; text-align: right;}

.mavatarsupload-alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid #eed3d7;
  border-radius: 2px;
}
.mavatarsupload-alert .close{
    margin-top: 2px;
}

/*----------------------------
    The file upload form
-----------------------------*/


#upload{
    background-color:#373a3d;

    background-image:-webkit-linear-gradient(top, #373a3d, #313437);
    background-image:-moz-linear-gradient(top, #373a3d, #313437);
    background-image:linear-gradient(top, #373a3d, #313437);

    padding:30px;
    border-radius:3px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#drop{
    background-color: #2E3134;
    padding: 20px 0px;
    margin-bottom: 30px;
    border: 20px solid rgba(0, 0, 0, 0);
    border-radius: 3px;
    border-image: url('../img/border-image.png') 25 repeat;
    text-align: center;
    text-transform: uppercase;

    font-size:16px;
    font-weight:bold;
    color:#7f858a;
}

#drop.dnd_hover{
    border-image: none;
}

#drop span{
  opacity: 1;
}

#drop.dnd_hover span{
  opacity: 0.1;
}

#drop span a{
    background-color:#007a96;
    text-decoration: none;
    padding:12px 26px;
    color:#fff;
    font-size:14px;
    border-radius:2px;
    cursor:pointer;
    display:inline-block;
    margin-top:12px;
    line-height:1;
}

#drop span a:hover{
    background-color:#0986a3;
}

#drop input{
    display:none;
}

#upload ul{
    padding-left: 0px;
    list-style:none;
    margin: 0px -30px 0px;
    border-top:1px solid #2b2e31;
    border-bottom:1px solid #3d4043;
}

#upload ul li{

    background-color:#333639;

    background-image:-webkit-linear-gradient(top, #333639, #303335);
    background-image:-moz-linear-gradient(top, #333639, #303335);
    background-image:linear-gradient(top, #333639, #303335);

    border-top:1px solid #3d4043;
    border-bottom:1px solid #2b2e31;
    padding: 15px 30px;

    position: relative;
}

#upload ul li input{
    display: none;
}

#upload ul li p{
    color: #EEE;
}

#upload ul li i{
    font-weight: normal;
    font-style:normal;
    color:#7f7f7f;
    display:block;
}

#upload ul li span{
     width: 15px;
     height: 12px;
     background: transparent url("../img/icons.png") no-repeat scroll 0% 0%;
     position: absolute;
     top: 5px;
     right: 5px;
     cursor: pointer;
     background-position: 0px 0px;
}

#upload ul li span:hover{
     background-position: 0px -13px;
}

#upload ul li span.active{
     background-position: 0px -13px;
}

#upload ul li span.active:hover{
     background-position: 0px 0px;
}

#upload ul li.error p{
    color:red;
}