@font-face {
		font-family: "Helvetica Neue";
		src: url(https: //www.ottocarlingbarry.com/fonts/HelveticaNeue.ttf), url(https: //www.ottocarlingbarry.com/fonts/HelveticaNeue.ttf)
	}

	* {
		box-sizing: border-box !important
	}

	html {
		margin: 0;
		overflow-x: hidden;
		width: 100%;
	}

	body {
		font-family: "Helvetica Neue", Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
		font-size: 16px;
		letter-spacing: .03em;
		line-height: 1.3em;
		margin: 0;
		margin-top: 1em
	}

	body, #title {
		font-family: arial,  verdana,  open sans
	}

	body, #maincont, #cont, textarea, select, input[type=text], input[type=password] {
		background-color: white
	}

	#output, #box, #error {
		background-color: #550091;
		border: solid 2px #ed91f2 !important;
		border-style: solid none solid none !important
	}

	a {
		color: white;
		text-decoration: none
	}
	#ok a, #error a {
		color: #550091;
		text-decoration: underline;
	}

	a img {
		border: none !important
	}

	input, select, textarea {
		outline: none !important
	}

	#title {
		line-height: 14px;
		margin-top: 4px
	}

	#title a {
		color: black;
		float: left;
		font-size: 10px;
		margin-left: 10px;
		line-height: 15px;
		text-decoration: none
	}

	#maincont {
		margin: 0 auto;
		overflow: hidden
	}

	#logo_right {
		float: right;
		margin-right: 1em;
		max-height: 50px
	}

	#left, #right {
		margin-top: 1em;
		width: 49.5%
	}

	.disabled {
		filter: saturate(0);
		opacity: .4
	}

	#menubar {
		margin: 0 auto;
		padding: 1em 0 1.5em 0;
		width: 90%;
		max-width: 1500px;
		position: sticky;
	  top: 0;
	}

	icons {
		float: right
	}

	#menubar img {
		margin: 0 .3em
	}

	#menubar a img {
		max-height: 60px
	}

	menu_block {
		background-color: white;
		border: solid 1px #ed91f2;
		border-style: solid none none none;
		display: inline-block;
		padding: .1em .3em;
		text-align: center;
		width: 100%
	}

	menu_block a {
		color: #1e0a46;
		margin: .5em
	}

	menu_block a: hover {
		color: #ed91f2
	}

	menu_block a: : selection {
		background-color: #ed91f2;
		color: white
	}

	page_menu {
		display: block;
		margin: 1.25em
	}

	page_menu a {
		margin: 0 .7em
	}

	select, input[type=submit] {
		background-color: white;
		border: none;
		border-radius: 2em;
		color: #1e0a46;
		font-size: 1em;
		font-weight: bold;
		margin: 4px;
		padding: .5em
	}

	input[type=submit] {
		background-color: #74a8fe;
		color: #001559;
		margin: 0 auto;
		padding: .5em 1em
	}

	input[type=submit]: hover {
		background-color: #b9d1fd
	}

	#cont, #cp, #debug {
		border: solid 1px darkgray;
		overflow: hidden
	}

	#cont {
		border: none;
		vertical-align: top
	}

	#intcont {
		margin: 0 auto;
		max-width: 900px;
		padding: 1em
	}

	select, textarea, input[type=text], input[type=password] {
		display: inline-block;
		border: solid 2px #550091;
		border-radius: .3em;
		font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
		font-size: .9rem;
		padding: .4em;
		width: 100%
	}

	solid-row, flexible-row {
		vertical-align: top
	}

	solid-row {
		display: inline-block;
		width: 24%
	}

	flexible-row {
		display: inline-block;
		width: 75%
	}

	textarea: focus, select: focus, input[type=text]: focus, input[type=password]: focus {
		border-color: #ed91f2 !important
	}

	textarea {
		min-height: 6em;
		overflow-y: auto;
		padding: .4em !important
	}

	#output {
		border: solid 1px #ddf;
		box-shadow: 0 0 1em -.2em #eda2f2;
		color: white;
		padding: 2.5em 0;
		min-height: 5em !important;
		width: 100%
	}

	photo_cont {
		float: left;
		width: 45%
	}

	#photo {
		width: 18%
	}

	#photo img {
		border: solid 2px #ed91f2;
		border-radius: 100%;
		box-shadow: 0 0 1em -.5em #ed91f2;
		margin: 2.2em;
		max-width: 30vw;
		vertical-align: top
	}

	#photo_thumb {
		width: 100px
	}

	#photo_thumb img {
		border: solid 1px #ed91f2;
		border-radius: 100%;
		width: 100%
	}

	a #photo_thumb {
		margin: 0 auto
	}

	.user_item {
		padding: 0 !important
	}

	.user_item flexible-row {
		margin-top: 1em
	}

	#textcont {
		display: inline-block;
		margin-left: 1em;
		text-align: justify-all;
		vertical-align: top;
		width: 50%;
		max-width: 80%
	}

	table-section {
		display: none
	}

	table-item img, solid-row img, flexible-row img {
		vertical-align: text-bottom !important
	}

	table-cont {
		border-radius: .3em;
		display: block
	}

	table-group {
		border-radius: .2em;
		display: block;
		margin-bottom: 1em;
		overflow: hidden;
		width: 100%
	}

	table-head, compact-head, extended-head {
		display: block;
		padding-left: .3em !important;
		width: 100%
	}

	table-head, compact-head {
		color: white;
		line-height: 1.5em !important;
		padding-top: .2em;
		text-align: center
	}

	table-group table-head {
		line-height: 1.8em !important
	}

	extended-head flexible-row {
		display: none
	}

	table-item {
		display: block;
		line-height: 1.3rem;
		padding: .5em !important;
		padding-top: 0
	}

	table-item: nth-child(odd) {
		background-color: #600595
	}

	.list table-item: nth-child(odd) {
		background-color: #550091
	}

	table-item input {
		width: 100%
	}

	table-item input[type=radio], [type=checkbox] {
		transition: background-color .75s;
		width: auto !important
	}

	#boxes {
		display: block;
		margin: 0 auto;
		margin-bottom: 5em;
		text-align: center;
		max-width: 900px
	}

	#boxes a #box: hover {
		background-color: #a5006e
	}

	#boxes a #box_title {
		font-size: 1.25em;
		font-weight: bold;
		font-style: normal !important;
		line-height: 1.3em
	}

	#box {
		border-radius: .5em;
		display: inline-block;
		height: 5em;
		margin: .6%;
		height: 7.5em !important;
		overflow-y: visible;
		padding: 1em .5em !important;
		vertical-align: top;
		width: 27%
	}

	a #box {
		color: white;
		font-size: 1em;
		font-style: italic;
		padding: 1em;
		text-decoration: none
	}

	#subtitle {
		color: white;
		padding: 1em
	}

	#footer {
		background-color: #1e0a46;
		border: solid 2px #ed91f2;
		border-style: solid none none none;
		clear: both;
		color: white;
		bottom: 0;
		font-size: .7em;
		padding: 1em 0;
		position: fixed;
		text-align: center;
		width: 100%
	}

	#footer a {
		color: white;
		text-decoration: none
	}

	#footer_logo {
		background: url(images/footer_fill.jpg) repeat;
		display: block;
		height: 65px;
		margin: 6em 0 0 0;
		text-align: right
	}

	#footer_logo img {
		float: right;
		max-height: 65px
	}

	h2 {
		color: white;
		font-size: 2.3em;
		font-weight: bold;
		line-height: 1.2em;
		margin-top: .4em
	}

	#error, #ok, #warning, #info {
		border-radius: .3em;
		color: black;
		display: block;
		min-height: 4em;
		padding: 2em 8em;
		width: 100%;
	}

	#error {
		background: url("images/error.png") no-repeat 10px center #fff
	}

	#ok {
		background: url("images/tick.png") no-repeat 10px center #fff
	}

	#warning {
		background: url("images/warning.png") no-repeat 10px center #fff
	}

	#info {
		background: url("images/info.png") no-repeat 10px center #fff
	}

@media only screen and (min-width:  701px) and (max-width:  800px) {
	#box {
		width: 30%
	}
}

@media only screen and (max-width:  720px) {
	html {
		margin-top: 0
	}

	#menubar {
		display: block;
		height: 10em;
		margin: 0 auto;
		text-align: center;
		width: 100%
	}

	h2 {
		text-align: center
	}

	site_logo, icons {
		clear: both;
		display: block;
		padding: 0
	}

	site_logo * {
		display: inline-block;
		margin: 0 auto !important
	}

	icons {
		display: block;
		float: none;
		margin: 1.1em auto !important
	}

	icons img {
		max-height: 2.5em
	}

	table-cont {
		width: 100%
	}

	table-group {
		background: none;
		border: none;
		display: block;
		margin-bottom: 0
	}

	compact-head, extended-head {
		padding: .3em !important;
		width: 100% !important
	}

	compact-head {
		display: none
	}

	extended-head {
		color: white;
		padding: .5em 0
	}

	extended-head flexible-row {
		display: inline-block;
		margin: 0 -2px
	}

	extended-head: first-child {
		padding-left: .5em !important;
		padding-right: -.5em !important
	}

	table-head * {
		padding: 0
	}

	table-item {
		align-content: flex-start;
		background: none;
		border: none;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between safe;
		margin: 0;
		padding: .35em !important;
		text-align: left;
		vertical-align: top;
		width: 100%
	}

	solid-row, flexible-row {
		display: block;
		width: 100%;
		padding: .2em
	}

	#box {
		clear: both;
		display: block;
		margin: .5em auto;
		width: 90%
	}

	.center_if_wide {
		text-align: center
	}

	.avatar_cont {
		display: block;
		width: 100%
	}

	#photo {
		clear: both;
		display: block;
		text-align: center;
		margin-bottom: 2em;
		width: 100%
	}

	#photo img {
		float: none;
		max-width: 50%;
		margin: 0 auto !important
	}

	.user_item {
		margin: 2em 0
	}

	.user_item {
		padding: 0 !important
	}

	.user_item flexible-row {
		margin-top: 0;
		padding-bottom: 2em
	}

	photo_cont {
		float: none;
		width: 100%
	}

	#photo_thumb, .user_item {
		display: block;
		text-align: center;
		width: 100%
	}

	#photo_thumb img {
		max-width: 30%
	}

	#textcont {
		clear: both;
		display: block;
		width: 100%;
		max-width: 95%
	}
}