html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Verdana, Arial, Sans-serif;
	font-size: 12pt;
	line-height: 1.2em;
}
body {
	background-color: #cc0000;
	color: #333;
	padding-bottom: 60px;
	padding-top: 60px;
}

a {
	color: #999;
	text-decoration: unset;
}
a:hover {
	color: #C00;
	text-decoration: underline;
}

header {
	position: fixed;
	top: 0;
	z-index: 10;
	text-align: center;
	background-color: #fff;
}
	header.row > .row-c > .col > .col-c {
		padding: 0;
	}
	header h1 {
		font-size: 1.8em;
		font-weight: normal;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
	}
	header .logo {
		width: 100px;
		height: auto;
		display: inline-block;
		margin-right: 4em;
		vertical-align: middle;
		padding: 15px 0;
	}
	header span {
		display: inline-block;
		vertical-align: middle;
		padding: 10px 0;
	}
	
@media screen and (max-width: 980px) {
	header h1 {
		font-size: 1em;
	}
	header .logo {
		margin-right: 2em;
	}
}

footer {
	/*margin-top: 60px;*/
	text-align: center;
}

.slm {
	font-size: 2em;
	line-height: 1em;
	vertical-align: middle;
}

.button {
	display: inline-block;
	padding: 1em 3em;
	border: 0;
	border-radius: 8px;
	background-color: #000;
	font-size: 1rem;
	color: #fff;
	cursor: pointer;
}
.button:hover {
	color: #c00;
}

.t-left {
	text-align: left;
}
.t-center {
	text-align: center;
}
.t-right {
	text-align:right;
}

.btn-over {
	margin: -1.5em 0 0 0;
}

.circle-icon,
.circle-icon:hover {
	display: inline-block;
	margin-right: 1.5em;
	background-color: #c00;
	color: #fff;
	border-radius: 3em;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.25em;
	vertical-align: top;
	text-align: center;
}

.bg-black {
	background-color: #000;
	color: #fff;
}

.bg-white {
	background-color: #fff;
	color: #000;
}



/*** Forms ***/

form {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
	form .container {
		display: block;
		border: solid 1px #c00;
		margin: 0;
		padding: .5em;
		border-radius: 8px;
		background-color: #fff;
	}
	form .container.with-bpad {
		padding-bottom: 2em;
	}
	form .container input,
	form .container textarea {
		display: block;
		width: 100%;
		margin: 0;
		padding: .5rem 0;
		border: 0;
		background-color: #fff;
		font-family: Verdana, Arial, Sans-serif;
		font-size: 1rem;
	}
	form .container textarea {
		min-height: 5em;
		height: auto;
		resize: none;
	}


/*** Columns ***/

.row {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
.row.full-w {
	max-width: none;
}
	.row > .row-c {
		display: block;
		padding: 0 15px;
	}
	.row:after {
		content:'';
		display: block;
		width: 0;
		height:0;
		line-height:0;
		font-size: 0px;
		clear: both;
	}
.row > .row-c > .col {
	float: left;
	width: 100%;
}
.row.col-invert > .row-c > .col {
	float: right;
}
	.row > .row-c > .col > .col-c {
		display: block;
		padding: 15px;
	}
	.row > .row-c > .col.no-vmargin > .col-c {
		padding-top: 0;
		padding-bottom: 0;
	}
	.row > .row-c > .col.no-tmargin > .col-c {
		padding-top: 0;
	}
	.row > .row-c > .col.no-bmargin > .col-c {
		padding-bottom: 0;
	}

.row > .row-c > .col.col-100 { width: 100%; }
.row > .row-c > .col.col-80 { width: 80%; }
.row > .row-c > .col.col-75 { width: 75%; }
.row > .row-c > .col.col-66 { width: 66.66%; }
.row > .row-c > .col.col-60 { width: 60%; }
.row > .row-c > .col.col-50 { width: 50%; }
.row > .row-c > .col.col-40 { width: 40%; }
.row > .row-c > .col.col-33 { width: 33.33%; }
.row > .row-c > .col.col-25 { width: 25%; }
.row > .row-c > .col.col-20 { width: 20%; }

.row > .row-c > .col.col-1,
.row > .row-c > .col.col-2:nth-child(2n+1),
.row > .row-c > .col.col-3:nth-child(3n+1),
.row > .row-c > .col.col-4:nth-child(4n+1),
.row > .row-c > .col.col-5:nth-child(5n+1) { clear: both; }

@media screen and (max-width: 980px) {
	.row > .row-c > .col.col-1,
	.row > .row-c > .col.col-2,
	.row > .row-c > .col.col-3 { width: 100%; clear: both; }
	
	.row > .row-c > .col.col-4:nth-child(2n+1),
	.row > .row-c > .col.col-5:nth-child(2n+1) { width: 50%; clear: both; }
	
	.row > .row-c > .col.mob-no-vmargin > .col-c {
		padding-top: 0;
		padding-bottom: 0;
	}
	.row > .row-c > .col.mob-no-tmargin > .col-c {
		padding-top: 0;
	}
	.row > .row-c > .col.mob-no-bmargin > .col-c {
		padding-bottom: 0;
	}
}

@media screen and (max-width: 640px) {
	.row > .row-c > .col.col-4,
	.row > .row-c > .col.col-5 { width: 100%; clear: both; }
}

/*** End Columns ***/




#form-auth {
	display: block;
	width: 100%;
	padding-top: 60px;
}

	#form-auth .row {
		max-width: 512px;
	}

.refresh,
#downloader,
#uploader,
#messager {
	display: block;
	width: 100%;
}


#messager {
	max-width: 624px;
}



#messages {
	padding-top: 30px;
}
#messages .container {
	display: block;
	border: solid 1px #c00;
	margin: 0;
	padding: 1em;
	border-radius: 8px;
	background-color: #fff;
}
	#messages .avatar {
		position: relative;
		overflow: visible;
	}
	#messages .avatar > img {
		position: relative;
		z-index: 2;
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 90%;
		max-width: 200px;
		height: auto;
		border-radius: 100px;
		border: solid 1px #000;
	}
	#messages .avatar:before {
		content: '';
		position: absolute;
		z-index: 1;
		top: 1.5em;
		left: 50%;
		display: block;
		padding-right: 30px;
		width: 50%;
		height: auto;
		border-top: solid 1px #000;
	}
	#messages .current .avatar:before {
		left: -30px;
	}
	#messages .metadata {
		font-style: italic;
		font-size: .8em;
	}

@media screen and (max-width: 980px) {
	#messages .avatar > img {
		max-width: 100px;
	}
	
	#messages .avatar:before {
		display: none;
	}
}


#sharefiles {
	margin-top: 60px;
	background-color: #e00;
}

	#sharefiles a {
		color: #fff;
	}

#uploader .drag { border: 1px dashed #000; height: 300px; text-align: center; word-space: -.5em; border-collapse: collapse; }
#uploader .drag:before { content:''; display: inline-block; width: 0; height: 100%; line-height: 0; font-size: 0; vertical-align: middle; }
#uploader .drag.hover { border: 4px dashed #c00; }
#uploader .drag > p { display: inline-block; vertical-align: middle; word-space: normal; }
#uploader .drag > p.default { color: #000; font-size: 1em; }

#uploader p { margin: 30px 30px 0 30px; font-size: 1.5em; line-height: 1.2em; width: 80%; margin: 30px auto 0 auto; }
#uploader progress { position: relative; margin-top: -1.2em; height: 1.2em; width: 100%; color: #fff; background: #c00; border: 0; vertical-align: top; }
#uploader progress:-moz-progress-bar,
#uploader progress:-webkit-progress-value,
#uploader progress { color: #99f; }
#uploader progress:after { position: absolute; color: #fff; right: 0; bottom: 0; display: block; content: attr(data-complete); }

.refresh, .refresh:hover,
#uploader .upload_err {
	display: block;
	padding: .5em 0;
	background-color: #c00;
	color: #fff;
	text-align: center;
}

#downloader:after {
	content: '';
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	line-height: 0;
}

#downloader h2 {
	font-weight: normal;
	font-size: 1.2em;
	color: #000;
}

#downloader .files {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
#downloader .files > li {
	display: block;
	margin: .5em 0;
	padding: 0;
	list-style: none;
}