/*            _       _ _                _
 _ __ ___  __| |_ __ (_) | __  _ __  ___| |_ 
| '__/ _ \/ _` | '_ \| | |/ / | '_ \/ _ \  _|
| | |  __( (_) | (_) | |   ( _| | |(  __/ (_ 
|_|  \___)\__,_|  __/|_|_|\_(_)_| |_\___)\__)
               |_|            Benjamin PONGY
*/

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { font-family: 'Open Sans', arial, sans-serif; color: #555; font-size: 12px; font-weight: 400; }

h1,
h2,
h3 { font-weight: 400; text-transform: uppercase; }

a { color: #118a8a; }
a:hover { color: #222; }

#top {
	background-color: #282d37;
	height: 51px;
}

#logo {
	text-decoration: none;
	display: block;
	float: left;
	color: #fff;
	background-color: #00d6d7;
	width: 122px;
	height: 51px;
	line-height: 51px;
	text-align: center;
	font-weight: 300;
	font-size: 28px;
}
.hello #logo { transition: background-color 0.2s linear; }
#logo:hover { background-color: #14bcbd; }


#baseline {
	color: #fff;
	font-size: 14px;
	height: 51px;
	line-height: 51px;
	margin-left: 140px;
}


#bt-about {
	display: block;
	float: right;
	background-color: #f07746;
	width: 51px;
	height: 51px;
	line-height: 51px;
	text-align: center;
	color: #fff;
	font-weight: 400;
	font-size: 24px;
	cursor: pointer;
}
#bt-about:hover { background-color: #f05d3a; }


#about {
	background-color: #eee;
	padding: 2em 3em;
	color: #888;
	display: none;
	line-height: 1.5em;
}


#main { padding-top: 30px; }


#up_zone {  }

#upload {
	max-width: 610px;
	height: 140px;
	margin: 0 auto;
	line-height: 1em;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	background: #99CD39 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIFNWRy1lZGl0IC0gaHR0cDovL3N2Zy1lZGl0Lmdvb2dsZWNvZGUuY29tLyAtLT4KIDxkZWZzPgogIDxzdmcgdmlld0JveD0iMCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiB5PSIwIiB4PSIwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaWQ9InN2Z18xIj4KICAgPHBhdGggZD0ibTE3LDljLTAuMTEwMDAxLDAgLTAuMjMsMC4wMSAtMC4zNSwwLjAyYy0wLjgzLC0yLjM4MDAwMSAtMy4wNTk5OTksLTQuMDIgLTUuNjUsLTQuMDJjLTMuMzEsMCAtNiwyLjY5IC02LDZjMCwwLjA0IDAsMC4wOCAwLDAuMTNjLTEuNzIsMC40NCAtMywyLjAxIC0zLDMuODdjMCwyLjIwOTk5OSAxLjc5LDQgNCw0aDV2LTQuNTlsLTEuMjksMS4yOWMtMC4yLDAuMiAtMC40NSwwLjMgLTAuNzEsMC4zcy0wLjUxLC0wLjEgLTAuNzEsLTAuMjljLTAuMzksLTAuMzkgLTAuMzksLTEuMDIgMCwtMS40MWwzLC0zYzAuMDksLTAuMDkgMC4yLC0wLjE3IDAuMzMsLTAuMjJjMC4yNCwtMC4xIDAuNTIsLTAuMSAwLjc2LDBjMC4xMiwwLjA1IDAuMjMsMC4xMiAwLjMzLDAuMjJsMywzYzAuMzksMC4zODk5OTkgMC4zOSwxLjAyIDAsMS40MWMtMC4yLDAuMTkgLTAuNDUsMC4yOSAtMC43MSwwLjI5cy0wLjUxLC0wLjEgLTAuNzEsLTAuMjlsLTEuMjksLTEuM3Y0LjU5aDRjMi43NiwwIDUsLTIuMjQgNSwtNXMtMi4yNCwtNSAtNSwtNXoiLz4KICA8L3N2Zz4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU+CiAgPHVzZSBmaWxsPSIjZmZmZmZmIiBpZD0ic3ZnXzIiIHhsaW5rOmhyZWY9IiNzdmdfMSIvPgogPC9nPgo8L3N2Zz4=) no-repeat 50% 80%;
	background-size: 90px 90px;
}
.hello #upload { transition: all 0.1s linear; }
#upload:hover { background-size: 100px 100px; background-position: 50% 90%; background-color: #89b339; }
.mf_upload_ins { padding-top: 1.5em; }
#mf_file_upload { cursor: pointer; }



#uploaded { clear: both; padding-top: 30px; }
.files { max-width: 610px; margin: 0 auto; padding-bottom: 20px; }
.files pre {
	border: 1px solid #eee;
	background-color: #f5f5f5;
	overflow-x: scroll;
	display: block;
	width: 100%;
	height: 110px;
	padding: 12px;
	line-height: 1.4em;
}
.files code { color: #777; }
.files code .comment { color: #a0a0a0; }
.files code .classname { color: #581; }
.files code .prop { color: #a30; }
.files code .urldata { color: #333; }
.files a { display: block; text-align: right; padding-top: 0.3em; color: #282D37; }



* { transition: none; }





/* pub */
.zone-g { max-width: 610px; margin: 0 auto; text-align: center; padding-bottom: 30px; }
.b64io-haut { width: 100%; height: 50px; }






.progress {
	display: inline-block;
	height: 20px;
	width: 20px;
	position: relative;
	-webkit-animation: rotation .4s infinite linear;
	animation: rotation .4s infinite linear;
	border-left: 3px solid rgba(0,0,0,.15);
	border-right: 3px solid rgba(0,0,0,.15);
	border-bottom: 3px solid rgba(0,0,0,.15);
	border-top: 3px solid rgba(0,0,0,.6);
	border-radius: 100%;
}
@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0); }
	to { -webkit-transform: rotate(359deg); }
}
@keyframes rotation {
	from { transform: rotate(0); }
	to { transform: rotate(359deg); }
}





#colophon { clear: both; text-align: center; max-width: 610px; padding-top: 40px; margin: 0 auto; }
#colophon .bt {
	display: inline-block;
	height: 50px;
	width: 198px;
}