body {
	font-family: 'Fira Sans', Verdana, sans-serif;
	font-size:16px;
	line-height:1.7em;
}

img {
	max-width:100%;
}

p {
	margin:0.7em 0;
}

h2 {
	font-size:20px;
	margin:0.7em 0;
}
	h2 a {
		color:#000 !important;
	}

h3 {
	font-size:17px;
	margin:0.7em 0;
}
h4 {
	font-size:15px;
	margin:0.7em 0;
}

a {
	text-decoration:none;
	color:blue;
}
	a:hover {
		text-decoration:underline;
		color:red;
	}


#flag  {
	display:none;
	background:#FFC513;
	padding:10px;
	text-align:center;
}

header {
	background:#145D9E;
	padding:30px 10px;
	margin-bottom:10px;
}

nav {
	padding:0 10px 10px 10px;
}
	nav a {
		padding:5px 10px;
		background:#145D9E;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
		float:left;
		margin-right:10px;
	}

	nav a:nth-child(3),
	nav a:nth-child(4) {
		margin-top:10px;
	}

	nav a:hover {
		background:#FFC513;
		text-decoration:none;
		color:#145D9E;
	}

	nav a.on, nav a.impersonating {
		background:#fb144b;
	}

.alert {
	background:red;
	color:#fff;
	font-weight:bold;
	padding:1px 7px;
	-webkit-border-radius:50%;
	border-radius:50%;
	box-shadow:0 0 0 2px #fff,0 0 4px 2px rgba(0,0,0,.5);
	margin-left:10px;
	display:inline-block;
	line-height:1;
}
	.alert::before {
		content:'!';
	}

#msg {
	background:#FFC513;
	padding:10px;
	margin:0 10px 10px 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

main {
	background:#FFF;
	padding:0 10px 10px 10px;
}



	section {
		background:#ccdeec;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin-bottom:10px;
		padding:10px 5px;
	}

footer {
	border-top:6px solid #005c9f;
	padding:30px 10px;
	text-align:center;
}

.data {
	width:100%;
}
	.data td, .data th {
		padding:3px 5px;
		text-align:left;
	}
	.data td:first-child, .data th:first-child {
		padding-left:10px;
	}
	.data td:last-child, .data th:last-child {
		padding-right:10px;
	}
	.data th {
		background:silver;
	}
	.data th a {
		font-weight:normal;
	}
	.data tr:nth-child(odd) {
		background:#eee;
	}
	.data tr:nth-child(even) {
		background:#ddd;
	}
	.data tr:nth-child(odd):hover {
		background:#eed;
	}
	.data tr:nth-child(even):hover {
		background:#ddc;
	}
	.data .tac {
		text-align:center;
	}
	.data .tar {
		text-align:right;
	}
	.data tr.active td:first-child {
		background:green;
		color:#fff;
	}
	.data tr.deleted td:first-child {
		background:#f11;
	}
	.data .suspended {
		background:#fdd;
		color:#777;
	}
	.data tr:nth-child(odd) td.suspended {
		background:#fee;
	}
	.data td.green {
		background:#dfd;
	}
	.data tr:nth-child(odd) td.green {
		background:#efe;
	}
	.data .arrows {
		font-weight:bold;
		font-size:20px;
		color:green;
	}

td.userstatus0 {
	border-left:5px solid cyan;
}
td.userstatus1 {
	border-left:5px solid orange;
}
td.userstatus2 {
	border-left:5px solid purple;
}
td.userstatus3 {
	border-left:5px solid yellow;
}
td.nouserstatus {
	border-left:5px solid #444;
}
td.userstatus4 {
	border-left:5px solid #dd1100;
}

span.post_details {
	display:block;
	padding-bottom:10px;
	font-style:italic;
}

article {
	margin-top:10px;
	margin-bottom:10px;
	padding:10px 20px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
}
article.unread {
	border:3px solid #FFC513;
}
article.me {
	margin-right:5%;
	background:#ffe;
}
article.you {
	margin-left:5%;
	background:#eff;
}
article h5 {
	padding:5px 0;
	border-bottom:1px dashed #888;
	margin-bottom:15px;
}
article span {
	float:right;
}

.you.unread .body {
	display:none;
}

.markasread {
	display:inline-block;
	cursor:pointer;
	background:#145D9E;
	color:#fff;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	padding:5px 10px;
}
	.markasread:hover {
		background:#FFC513;
		color:#145D9E;
	}
	.markasread:active,
	.markasread:focus {
		background:#fb144b;
		color:#fff;
	}

body.login main {
	padding:30px 10px;
	display:block !important;
}
body.login form {
	margin:0;
	padding:0 !important;
	width:100% !important;
	max-width:430px;
}
body.login form fieldset {
	border:0;
}
body.login label,
body.login input {
	width:45%;
}

.pform fieldset {
	border:0;
	background:#fff;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.pform legend {
	background:#FFC513;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding:5px 20px;
}
.pform label {
	text-align:left;
}


.data_note {
	font-style:italic;
	opacity:.4;
	cursor:help;
}
	.data_note:hover {
		opacity:1;
	}
.nostatus {
	border-left:5px solid silver;
}
.current {
	border-left:5px solid cyan !important;
}
.pform fieldset.training_review {
	background:#ddd;
}
.training-status-0 {
	border-left:5px solid yellow;
	background:yellow;
}
.training-status-1 {
	border-left:5px solid orange;
	background:orange;
}
.training-status-2 {
	border-left:5px solid blue;
	background:blue;
}
.training-status-3 {
	border-left:5px solid green;
	background:green;
}

ul.responses {
	padding:0;
	border-left:8px solid #ffc513;
	background:#fff2cc;
	color:#000;
}
ul.responses li {
	margin-left:1.5rem;
	padding:.2rem 0;
}
ul.responses li:last-child {
	margin-bottom:1rem;
}
ul.responses li.response_question {
	background:#ffc513;
	list-style-type:none !important;
	margin-left:0;
	padding-left:1rem;
}
ul.responses li.response_title {
	background:#ffe077;
	list-style-type:none !important;
	margin-left:0;
	padding-left:1rem;
}


.training .pform ol > li input[type=text],
.training .pform ol > li textarea,
.training .pform ol > li select {
	border:3px solid;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:5px;
}
.training .pform ol > li input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px #000;
	box-shadow: 0 0 0 2px #000;
}

/*rainbow*/

.training .pform .rainbow ol > li:nth-child(7n) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n) textarea,
.training .pform .rainbow ol > li:nth-child(7n) select {
	border-color:red;
}
.training .pform .rainbow ol > li:nth-child(7n+1) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+1) textarea,
.training .pform .rainbow ol > li:nth-child(7n+1) select {
	border-color:orange;
}
.training .pform .rainbow ol > li:nth-child(7n+2) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+2) textarea,
.training .pform .rainbow ol > li:nth-child(7n+2) select {
	border-color:#FFC513;
}
.training .pform .rainbow ol > li:nth-child(7n+3) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+3) textarea,
.training .pform .rainbow ol > li:nth-child(7n+3) select {
	border-color:green;
}
.training .pform .rainbow ol > li:nth-child(7n+4) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+4) textarea,
.training .pform .rainbow ol > li:nth-child(7n+4) select {
	border-color:blue;
}
.training .pform .rainbow ol > li:nth-child(7n+5) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+5) textarea,
.training .pform .rainbow ol > li:nth-child(7n+5) select {
	border-color:purple;
}
.training .pform .rainbow ol > li:nth-child(7n+6) input[type=text],
.training .pform .rainbow ol > li:nth-child(7n+6) textarea,
.training .pform .rainbow ol > li:nth-child(7n+6) select {
	border-color:violet;
}
.training .pform .rainbow ol > li:nth-child(7n) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px red;
	box-shadow: 0 0 0 2px red;
}
.training .pform .rainbow ol > li:nth-child(7n+1) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px orange;
	box-shadow: 0 0 0 2px orange;
}
.training .pform .rainbow ol > li:nth-child(7n+2) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px #FFC513;
	box-shadow: 0 0 0 2px #FFC513;
}
.training .pform .rainbow ol > li:nth-child(7n+3) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px green;
	box-shadow: 0 0 0 2px green;
}
.training .pform .rainbow ol > li:nth-child(7n+4) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px blue;
	box-shadow: 0 0 0 2px blue;
}
.training .pform .rainbow ol > li:nth-child(7n+5) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px purple;
	box-shadow: 0 0 0 2px purple;
}
.training .pform .rainbow ol > li:nth-child(7n+6) input[type=checkbox] {
	-webkit-box-shadow: 0 0 0 2px violet;
	box-shadow: 0 0 0 2px violet;
}

/* Befrienders */

.training .pform .befrienders {
	background-color:#005ca0;
	color:#fff;
}
.training .pform .befrienders input[type=text],
.training .pform .befrienders textarea {
	background-color:#ffc513;
	border-color:#fff;
}
.training .pform .befrienders input[type=submit] {
	background-color:#ffc513;
	color:#000;
}
.training .pform .befrienders p.note {
	color:#fff;
}






.pform fieldset.sunshine {
	background-color:#fffeb1;
	background-size:100%;
	background-position:center center;
	background-image:url(/friends/userfiles/clipart/sunshine.png);
}
.pform fieldset.waves {
	background-size:100%;
	background-position:bottom center;
	background-repeat:no-repeat;
	background-image:url(/friends/userfiles/clipart/waves.png);
}
.pform fieldset.jar {
	background-size:15vw;
	background-position:bottom right;
	background-repeat:no-repeat;
	background-image:url(/friends/userfiles/clipart/jar.png);
	position:relative;
}
.pform fieldset.logo {
	background-size:20vw;
	background-position:bottom 10px right 10px;
	background-repeat:no-repeat;
	background-image:url(/friends/userfiles/clipart/logo.png);
}
.pform fieldset.smiley {
	background-size:15vw;
	background-position:bottom 10px right 10px;
	background-repeat:no-repeat;
	background-image:url(/friends/userfiles/clipart/smiley.png);
}
.pform fieldset.tartan {
	background-color: hsl(2, 57%, 40%);
	background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
	repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
	repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
	color:#fff;
}
.pform fieldset.tartan label,
.pform fieldset.tartan p.note {
	color:#fff;
}

	.pform fieldset.jar ol,
	.pform fieldset.smiley ol {
		margin-right:16vw;
	}
	.pform fieldset.logo.befrienders ol {
		margin-bottom:100px;
	}









login form input[type=submit],
.pform input[type=submit] {
	border:0;
	background:#145D9E;
	color:#fff;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:5px 10px;
}
login form input[type=submit]:hover,
login form input[type=submit]:active,
.pform input[type=submit]:hover,
.pform input[type=submit]:active {
	background:#fb144b;
}

.numeral {
	color:#fff;
	background:#FB144B;
	padding:0 6px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.nomobile {
	display:none;
}

.li_textarea textarea {
	max-width:80vw;
	width:400px;
	height:100px;
}
.pform ol li label {
	text-align:left;
}
.li_textarea.el_bigbox label {
	display:none !important;
}
.li_textarea.el_bigbox textarea {
	width:100%;
	min-height:200px;
}
p.note {
	display:inline;
	font-style:italic;
	font-size:12px;
	color:#555;
}
.pform fieldset ul {
	margin-left:10px;
}
.pform fieldset ul li {
	list-style-type:disc;
}
.pform ol {
	padding:5px 0 0 0;
}

.clear {
	clear:both;
}

span.diagnostics,
.diagnostics p {
	color:orange;
	font-size:11px;
	line-height:13px;
}

.post img {
	display:block;
	margin-bottom:5px;
}

@media (min-width: 500px) {

	body {
		font-size:14px;
	}

	main {
		display:grid;
		grid-gap: 10px;
		grid-template-columns: 1fr 4fr;
	}

	nav a {
		margin-top:0 !important;
	}

	body.login form {
		padding:20px;
		width:460px;
		margin:0 auto;
	}

	section {
		margin-bottom:0;
		padding:10px;
	}

	.nomobile {
		display:initial;
	}

	.pform ol {
		padding:5px 5px 0 5px;
	}
	.pform ol li label {
		text-align:right;
	}

}

@media (min-width: 700px) {

	#chatform {
		width:45%;
		float:left;
	}
	#uploadform {
		width:45%;
		float:right
	}


	.post img {
		display:inline;
		float:right;
		margin:0 0 5px 10px;
		max-width:300px;
		max-height:300px;
	}

	ul.columns {
		column-count:3;
		column-gap:10px;
	}

}

@media (min-width: 1000px) {

	ul.columns {
		column-count:4;
	}

}

@media (min-width: 1600px) {

	ul.columns {
		column-count:5;
	}

}