/*! pomf (https://github.com/nokonoko/Pomf.git) @ 2015-12-22 */

/* Use Border Box */

*:before,
*:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Page Layout */
body {
	background-attachment:fixed,fixed;
	background-color:#F7F7F7;
	background-image:url(grill.php),url(img/bg.gif);
	background-position:85% 100%,top left;
	background-repeat:no-repeat,repeat;
#        background:url('img/bg.png') repeat-y 100% 50% fixed;
#        height:80%;
#	background-size:100%;
#        width:100%;

	color:#333;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	height:100%;
	line-height:20px;
	margin:0;
	padding-top:20px;
	padding-bottom:40px
}

.container {
	margin:0 auto;
	max-width:700px
}

/* Elements */

/* paragraphs */

p {
	margin:0 0 10px
}

/* images */

input[type=image],img {
	vertical-align:middle
}

/* links */

a {
	color:#0078B4;
	text-decoration:none;
	transition:color .25s
}

a:hover,a:focus,
a:active {color:#005580}
a:focus {outline:thin dotted #333}
	
/* JUMBOTRON */

.jumbotron {
	margin:60px 0;
	text-align:center;
	transition:width .5s,height .5s,margin .5s,padding .5s
}

.jumbotron h1 {
	color:inherit;
	font-family:inherit;
	font-size:72px;
	font-weight:700;
	line-height:1;
	margin:10px 0;
	cursor:default;
	text-rendering:optimizelegibility
}

.jumbotron .lead {
	font-size:21px;
	font-weight:200;
	line-height:30px;
	margin-bottom:20px;
	transition:font-size .5s
}

.jumbotron .btn {
	background:rgba(202,230,190,.75);
	border:1px solid #B7D1A0;
	border-radius:4px;
	color:#468847;
	cursor:pointer;
	display:inline-block;
	font-size:24px;
	padding:28px 48px;
	text-shadow:0 1px rgba(255,255,255,.5);
	transition:background-color .25s,width .5s,height .5s
}

.jumbotron .btn:hover,
.jumbotron .btn:active,
.jumbotron .btn:focus,
.jumbotron .btn.drop {
	background-color:#bce4aa;
	text-decoration:none
}

#no-file-api{display:none}

/* BOXES */

.alert {
	background-color:#FCF8E3;
	border:1px solid #FBEED5;
	border-radius:4px;
	margin-bottom:20px;
	padding:8px 14px;
	text-shadow:0 1px rgba(255,255,255,.5);
	transition:width .5s,margin .5s,padding .5s,background-color .5s
}

.alert-error {
	background-color:#F2DEDE;
	border-color:#EED3D7;
	color:#AA4342
}

.alert-info {
	background-color:#D9EDF7;
	border-color:#BCE8F1;
	color:#33799B
}

/* DONATION BUTTONS */	

span.donate-btns {
	display:block;
	text-align:center;
	margin:11px 0 3px
}

a.donate-btn {
	height:26px;
	display:inline-block;
	margin:2px 5px;
	background:#f2f2f2;
	line-height:16px;
	padding:3px 8px 3px 24px;
	border-radius:3px;
	color:#3f3f3f;
	border:1px solid #d8d8d8;
	transition:all .2s
}

a.donate-btn:hover {
	color:#000;
	border:1px solid #b2b2b2;
	background-color:#ccc
}

.icon {
	display:block;
	height:16px;
	width:16px;
	float:left;
	margin-left:-20px;
	margin-top:1px
}

.icon-paypal {background-image:url(img/paypal.png)}
.icon-bitcoin {background-image:url(img/bitcoin.png)}
.icon-flattr {background-image:url(img/flattr.png)}

/* NAVIGATION LINKS */

nav > ul,
nav a {
	color:#33799B;
	list-style:none;
	margin:0;padding:0;
	text-align:center
}

nav > ul > li {
	display:inline-block;
	margin:0;
	padding:0;
	cursor:default
}

nav > ul > li:after {
	content:"|";
	margin:0 8px;
	opacity:.3
}

nav > ul > li:last-child:after {
	content:"";
	margin:0
}

/* UPLOAD FROM */

#upload-input {
	position:absolute;
	top:0;
	left:-5000px
}

/* UPLOAD FILE LIST */

#upload-filelist {
	list-style-type:none
	;margin:20px 50px;
	padding:0;
	text-align:left
}
.error#upload-filelist {color:#891A18}
.error#upload-filelist .file-size{color:#B94A48}
.error#upload-filelist .file-progress{display:none}
#upload-filelist > li {
	margin-top:5px;
	overflow:hidden
}
	
#upload-filelist > li.total {
	border-top:1px solid rgba(0,0,0,.05);
	font-weight:700;padding-top:5px
}

.file-name {
	float:left;
	overflow:hidden;
	max-width:70%;
	text-overflow:ellipsis;
	white-space:nowrap
}

.file-size,
.file-url {
	display:inline-block;
	float:right;
	font-size:.9em;
	margin-left:8px;
	color:#5C5C5C;
	vertical-align:middle
}
.file-url a{color:#5C5C5C}
.file-url a:hover{color:#1C1C1C}

/* completed rows */

.completed .file-progress,
.completed .file-size{display:none}
.completed .file-url{display:block}

/* PROGRESS BAR */

.progress-outer {
	background-color:rgba(255,255,255,.8);
	border:1px solid #fff;
	border-radius:4px;
	box-shadow:0 0 0 1px #000;
	color:transparent;
	display:inline-block;
	font-size:0;
	float:right;
	height:8px;
	margin:6px 6px 0;
	overflow:hidden;
	vertical-align:middle;
	width:50px
}

.progress-inner {
	background-color:#000;
	height:6px;
	margin:0;width:0
}
/* footer */

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;


/* POCKY */

.pocky {
	margin:20px auto;
	text-align:center
}
.pocky img {max-width:100%}

/* PAGE SPECIFIC STUFF */

span.old {
	text-transform:uppercase;
	font-size:.8em;
	border-radius:4px;
	background-color:#722726;
	color:#fff;
	padding:2px 8px;
	margin:0 4px;
	font-weight:200
}

section.ded{opacity:.5}

/* MEDIA QUERIES */

@media only screen and (max-device-width:320px),only screen and (max-width:400px) {

	body {padding:10px 0 0}
	.jumbotron {margin:20px 0 30px}
	.jumbotron .lead {font-size:18px}

	.jumbotron .btn,.alert,#upload-filelist {
		border-radius:0;
		border-width:1px 0;
		width:100%;
		margin-left:0;
		margin-right:0;
		padding-left:20px;
		padding-right:20px
	}

	#upload-filelist {
		background-color:rgba(255,255,255,.75);
		overflow:hidden
	}

	#upload-filelist > li.file {
		margin-top:12px;
		margin-bottom:12px
	}

	.file-progress {
		float:left;
		width:70%
	}

	.file-size {
		float:left;
		max-width:30%;
		overflow:hidden
	}

	.file-name,.file-url {
		width:100%;
		max-width:100%
	}

	.file-url a {
		text-decoration:underline;
		margin-left:15px
	}

	.file-url a:before {content:"https://"}
	.alert {font-size:13px}
	.alert-error {background-color:rgba(248,223,223,.75)}

	nav {
		background-color:rgba(255,255,255,.75);
		border:#FFF;
		padding:10px 0
	}
}