/*Feuille de style pour le script d'hébergement d'images
Source : http://sebsauvage.net/wiki/doku.php?id=php:imagehosting
Author: pourrito
contributions: Osvaldas Valutis 
https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
*/

html {
    font-family: Arial;
    overflow-y: scroll;
}

body {
    background-image: url("./img/fond2.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}
    
.contenu {
    text-align: center;
    background-color: #fff;
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 4em;
    padding: 1em;
    border: 3px solid #B3B3B3;
    border-radius: 5px;
    box-shadow: 2px 2px 12px 1px #443c3c;
    }
    
h1{
    margin: .3em .3em 1em;
    color: #4E4E4E;
}

label{
	display: inline-block;
	max-width: 350px;
	word-wrap: break-word;
}
li{
    background-color: #ededed;
    border-radius: 3px;
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: .5em .5em .3em .5em;
}
li:hover {
    background-color: #f5f3f3;
}
.link{
	display: inline-block;
	width: auto;
	max-width: 400px;
	word-wrap: break-word;
    color: #4E4E4E;
    text-decoration: none;
}
.link:hover {
    text-decoration: underline;
}
.unlink{
	display: inline-block;
	text-align: right;
	/*width: 45px;*/
}
span .infobulle{
    width: 300px;
	font-size: 1em;
    font-weight:normal;
	opacity: 0;
	position: absolute;
	margin-left: -400px;
	text-shadow: 0 0 0;
	color: #DCDCDC;
    background:#5F5E5E;
	background: rgba(102,104,102,.96);
	padding: 9px 15px;
	border-radius: 3px;
	transform: scale(0) rotate(5deg);
	transition: all .45s;
    box-shadow: 2px 2px 8px 1px #443c3c;
}
span:hover .infobulle, span:focus .infobulle{
	opacity: 1;
	transform: scale(1) rotate(0);
}
.infobulle img{
    max-width: 250px;
    max-height: 200px;
}
.infotext{
	display: inline-block;
    width: 17px;
    text-align: center;
    /*background-color: #878787;*/
    cursor: pointer;
    color: #fff;
    border-radius: 10px;
    font-weight: bold;
}
.entete {
    padding-bottom: .5em;
    display: inline-block;
}
input[type="submit"] {
    background-color: #5f5e5e;
    border: 0;
    color: white;
    font-size: 1.2em;
    /*font-weight: 700;*/
    /*text-transform: uppercase;*/
    padding: 9px 20px;
    border-radius:3px;
    transition: .2s ease all;cursor: pointer;
    box-shadow: 1px 1px 2px 1px #ccc;
    }
    
input[type="submit"]:hover {
    cursor: pointer;
    background: #7E7E7E;
    transition: color 0.2s ease-out 0s, background 0.2s ease-in 0s;
    }
    
.select {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
    }
.envoi + label,
.select + label {
    font-size: 1.2em;
    /*font-weight: 700;*/
    color: white;
    background-color: #5f5e5e;
    /*text-transform: uppercase;*/
    display: inline-block;
    padding: 9px 20px;
    border-radius: 3px;
    margin-bottom: 1em;
    margin-top: .5em;
    cursor: pointer;
    box-shadow: 1px 1px 2px 1px #ccc;
    }
.select + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}
.select:focus + label,
.select + label:hover {
    background-color:  #7E7E7E;
    transition: color 0.2s ease-out 0s, background 0.2s ease-in 0s;
    }
.envoi {
   margin: 1.3em 1em 1em 1em;
    }
.mdp {
    line-height: 2em;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #565656;
    text-align: center;
    border-bottom: 3px solid #dbdbdb;
    padding: 0 .5em;
    font-size: 1.2em;
    background-color:transparent;
    }
.mdp:hover {
    background-color:#eeeeee;
    transition: color 0.2s ease-out 0s, background 0.3s ease-in 0s;
    border-bottom: 3px solid #eee;
}
.credits {
    text-align: right;
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
    color: #fff;
    text-shadow: 1px 1px #4B4B4B;
    }
.credits a {
    color: #fff;
}

.liste{    
    margin: 1em;
    margin-bottom: 3em;
    padding: 0;
    }
.liste a {
    color: #4E4E4E;
    text-decoration: none;
    text-align: left;
    word-wrap: break-word;
    max-width: 80%;
}
.liste a:hover {
    text-decoration: none;
}
.envoifiles {
    margin-top:1em
}
.retour {
    margin:1em;
}
.retour a {
    color: #fff;
    text-decoration: none;
    background-color: #5f5e5e;
    font-size:1.2em;
    padding: 9px 15px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 1px 1px 2px 1px #ccc;
    margin: .5em;
    display:inline-block;
}
.trier {
    background-image: url(./img/up.svg);
    background-repeat: no-repeat;
    text-align: left;
    padding-left: 25px;
    vertical-align: top;
    margin-left: 1em;
}

.trier2 {
    background-image: url(./img/down.svg);
    background-repeat: no-repeat;
    text-align: left;
    padding-left: 25px;
    vertical-align: top;
    margin-left: 1em;
}
.trier a, .trier2 a,
.trier a:visited, .trier2:visited a {
    color: #4E4E4E;
    text-decoration:none
}
.trier a:hover, .trier2 a:hover {
    color:#4E4E4E;
    text-decoration:underline
}

.close{
    font-weight: bold;
    display: inline-block;
    width: 20px;
    text-align: center;
    /*background: #810000;*/
    border-radius: 2px;
    color: #fff;
}
.actions{
    min-width: 100px;
    display: flex;
}
.actplace {
    vertical-align: middle;
    margin: auto;
}
.bttn2{
    height: 22px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    background-image: url(./img/clippy.svg);
    background-repeat: no-repeat;
    background-position: top;
    min-width: 20px;
    min-height: 20px;
    vertical-align: top;
}
.del {
    background-image: url(./img/delete.svg);
    background-repeat: no-repeat;
    background-position: top;
    min-width: 20px;
    min-height: 20px;
    vertical-align: top;
    margin-right: .2em;
} 
.info {
    background-image: url(./img/info.svg);
    background-repeat: no-repeat;
    background-position: top;
    min-width: 20px;
    min-height: 20px;
    vertical-align: top;
    margin-left: .3em;
    }
.mkd {
    background-image: url(./img/md.svg);
    background-repeat: no-repeat;
    background-position: top;
    min-width: 20px;
    min-height: 20px;
    vertical-align: top;
    margin-right: .3em;
}
.deconx{
    background-image: url(./img/deconx.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    float: right;
    max-width: 30px;
}
.deconx a {
    text-decoration:none;
    padding:1em;
}
.nombre {
    color:#4E4E4E;
}