@font-face {font-family: 'gothambold'; src: url('./fonts/gotham-bold-webfont.woff2') format('woff2'), url('./fonts/gotham-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'gotham'; src: url('./fonts/gotham-light-webfont.woff2') format('woff2'), url('./fonts/gotham-light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}

html, body {padding:0;margin:0;background-color:#161719;font-family:'gotham',arial;font-size:14px;}
input, select, textarea {resize:none;-webkit-appearance:none;outline:none;border-radius:3px;font-size:1em;border:0}
input {height:3em;margin:3px 0;}
input[type=text],input[type=password], textarea {text-indent:0.5em}
input[type=checkbox] {width:3em;border-radius:50%;background-color:#fff;}
input[type=checkbox]:checked {background-color:rgba(0,0,0,0.8);background-image:URL('../graph/ico_checked.png');background-repeat:no-repeat;background-position:center center;background-size:25%}
input[type=submit] {background-color:rgba(255,255,255,0.25);color:#fff;transition:background-color .2s}
input[type=submit]:hover {background-color:rgba(255,255,255,0.75)}
h1 {font-family:'gothambold',arial;padding:0;margin:0;font-size:2.5em}
h2 {padding:0;margin:0}
b {font-family:'gothambold',arial;}


#media {position:relative;width:75%;height:500px;margin:auto;background-color:rgba(0,0,0,0.5);background-repeat:no-repeat;background-position:center center;background-size:contain}
#media_details {display:none;position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,0.33);padding:1em;box-sizing:border-box;color:#fff}
#media_details_photo {display:inline-block;width:25px;height:25px;background-repeat:no-repeat;background-position:center center;background-size:cover}
#media_signaler, #media_partager {display:none;position:absolute;top:25%;left:40%;width:20%;background-color:rgba(0,0,0,0.5);color:#fff;padding:2em;box-sizing:border-box;transition:background-color .2s)}
#media_signaler:hover, #media_partager:hover {background-color:rgba(0,0,0,0.75)}
#media_cache {width:100%;height:100%;background-color:rgba(0,0,0,0.9);color:#fff;text-align:center;padding-top:3em;cursor:pointer;background-repeat:no-repeat;background-position:center center;background-image:URL('../graph/logo_short.png')}
.media_blur {filter:blur(40px);} 

#actions {position:relative;text-align:center;background-color:#2d2e32;}
#actions_liste {display:none;position:absolute;top:25%;left:40%;width:20%;background-color:rgba(0,0,0,0.5);color:#fff}
.actions_liste_item {background-color:rgba(0,0,0,0.5);padding:1em;text-align:center;margin:2px;transition:background-color .2s}
.actions_liste_item:hover {background-color:rgba(0,0,0,1)}
#actions_liste a {color:#fff;text-decoration:none}
#actions_menu {position:relative;display:inline-block;width:75px;height:75px;background-image:URL('../graph/logo.png');background-color:rgba(0,0,0,0);color:#fff;text-align:center;margin:4px;background-repeat:no-repeat;background-position:center center;background-size:100%;}
#actions_dislike, #actions_like, #actions_partager {display:inline-block;width:75px;height:75px;background-color:rgba(0,0,0,0.33);color:#fff;text-align:center;border-radius:50%;margin:4px;background-repeat:no-repeat;background-position:center center;background-size:33%;transition:background-color .2s}
#actions_dislike:hover, #actions_like:hover, #actions_partager:hover {background-color:rgba(0,0,0,0.66)}
#actions_dislike {background-image:URL('../graph/ico_dislike.png')}	
#actions_like {background-image:URL('../graph/ico_like.png')}
#actions_partager {background-image:URL('../graph/ico_partager.png')}
#actions_signaler {position:absolute;bottom:1em;right:1em;color:#fff;cursor:pointer}
#actions_photo {width:75px;height:75px;background-repeat:no-repeat;background-position:center center;background-size:cover;border-radius:50%;margin:auto}

#profil_infos {width:100%;margin:0;color:#fff}
#profil_infos h1 {font-size:1.5em;padding:0;margin:0}
#profil_photo {position:relative;width:150px;height:150px;border-radius:50%;background-color:rgba(0,0,0,0.25);background-repeat:no-repeat;background-position:center center;background-size:cover;cursor:pointer}
#profil_galerie {width:100%;margin:auto;overflow-y:auto;}
.profil_case {position:relative;display:inline-block;width:200px;height:200px;color:#fff;background-color:rgba(0,0,0,0.25);background-repeat:no-repeat;background-position:center center;background-size:contain;margin:1em;transition:background-color .2s}
.profil_case:hover {background-color:rgba(0,0,0,0.5)}
#profil_case_add {cursor:pointer}
.profil_case_count {position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;background-color:rgba(0,0,0,0.5);color:#fff;padding:0.5em 1em} 
.profil_case_count img {width:10px}
#profil_add, #profil_modphoto, #profil_reglages, #profil_del {display:none;position:absolute;top:25%;left:35%;width:30%;background-color:rgba(0,0,0,0.5);color:#fff;padding:2em;box-sizing:border-box;transition:background-color .2s)}
#profil_add:hover, #profil_modphoto:hover, #profil_reglages:hover, #profil_del:hover {background-color:rgba(0,0,0,0.75)}
#profil_add a {color:#fff}
#profil_btn_reglages {cursor:pointer}
#profil_reglages_btn_suppr {text-align:right;cursor:pointer}
#profil_reglages_suppr {display:none}

#page {position:relative;width:100%;color:#fff;background-repeat:no-repeat;background-position:center center;background-size:cover;}
#contenu {position:absolute;top:10%;left:17%;width:66%;height:80%;color:#fff;background-color:rgba(0,0,0,0.5);overflow-y:auto;padding:3em;box-sizing:border-box;transition:background-color .2s}
#contenu:hover {background-color:rgba(0,0,0,0.75)}
#contenu a {color:#fff}

.adm_infos {position:absolute;bottom:0;left:0;width:100%;padding:0.5em;box-sizing:border-box}
.adm_appr {position:absolute;top:0;left:0;}
.adm_nu {position:absolute;top:2em;left:0;}
.adm_suppr {position:absolute;top:0;right:0;}

.message_ok {position:absolute;top:1em;right:1em;padding:1em;box-sizing:border-box;background-color:rgba(0,255,0,0.5);color:#fff;font-weight:bold;z-index:1000} 
.message_ko {position:absolute;top:1em;right:1em;padding:1em;box-sizing:border-box;background-color:rgba(255,0,0,0.5);color:#fff;font-weight:bold;z-index:1000} 
.close, .fermer {position:absolute;top:0.5em;right:0.5em;color:rgba(255,255,255,0.75);cursor:pointer}
.delete {position:absolute;top:0.5em;right:0.5em;background-color:rgba(0,0,0,0);color:rgba(255,255,255,0.75);cursor:pointer;}

.entier {width:100%}
.moitie {width:50%}
.milieu {margin:auto}
.gauche {text-align:left}
.droite {text-align:right}
.center {text-align:center}
.justify {text-align:justify}
.souligne {text-decoration:underline}
.grise {color:rgba(255,255,255,0.3)}

@media only screen and (max-width: 1000px) {
	#media_signaler, #actions_liste, #profil_add, #profil_modphoto, #profil_reglages {display:none;position:absolute;top:10%;left:10%;width:80%;background-color:rgba(0,0,0,0.9)}
	#actions_menu, #actions_dislike, #actions_like, #actions_partager {display:inline-block;width:50px;height:50px}
	#contenu {top:10%;left:10%;width:80%;height:80%;padding:1em}
	#profil_infos td {display:block}
	#profil_photo {width:100px;height:100px}
	.profil_case {width:100px;height:100px;}
	.moitie {width:100%}
}