/*
Theme: Theme Machine
Author: Orchard Team – http://www.orchardproject.net
Copyright: 2010, Orchard. All Rights Reserved
*/


/*  Color Palette
**************************************************************

Background: #e5dbd1
Borders: #dbdbdb
Text: #000000
Secondary Text: #cc3300
Main Accent: #999
Links: #cc3300
*/



/* Reset
***************************************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
	-webkit-margin-before:0em;
	-webkit-margin-after:0em;
}

html
{
	overflow-y: scroll;
}

li
{
	margin-top: 4px;
}


/* Remember focus styles! */
:focus {
	outline: 0;
}

body {
	line-height: 1;
	color: #635161;
	font-size: 100%;
	background-color: transparent;
	font-family: 'Tahoma', 'Trebuchet MS', sans-serif;
}

ol, ul {
	list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
	color: #635161;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/* HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

/* Clearing Floats
***************************************************************/

.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.zone:after /* Self clears every zone container */ {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* General
***************************************************************/

/* Default font settings. 
The font-size 81.3% sets the base font to 13px 

Pixels 	EMs 	    Percent Points
6px 	0.462em 	46.2% 	5pt
7px 	0.538em 	53.8% 	5pt
8px 	0.615em 	61.5% 	6pt
9px 	0.692em 	69.2% 	7pt
10px 	0.769em 	76.9% 	8pt
11px 	0.846em 	84.6% 	8pt
12px 	0.923em 	92.3% 	9pt
13px 	1em 	    100% 	10pt
14px 	1.077em 	107.7% 	11pt
15px 	1.154em 	115.4% 	11pt
16px 	1.231em 	123.1% 	12pt
17px 	1.308em 	130.8% 	13pt
18px 	1.385em 	138.5% 	14pt
19px 	1.462em 	146.2% 	14pt
20px 	1.538em 	153.8% 	15pt
21px 	1.615em 	161.5% 	16pt
22px 	1.692em 	169.2% 	17pt
23px 	1.769em 	176.9% 	17pt
24px 	1.846em 	184.6% 	18pt
*/

#layout-main-header {
	display: block;
	height: 33px;
	margin-left: 2px;
}

#layout-header {
	display: block;
	height: 33px;
	margin-left: 2px;
	position: relative;
}

#header {
	z-index: 4;
}

#layour-header-small {
	display: none;
	background: url('menu_background.png');
	position: fixed;
	top: 0px;
	width: 1280px;
	height: 131px;
}

#layout-navigation-cards {
	height: 0;
	position: relative;
	overflow: visible;
	opacity: 0;
}

#layout-card-holder {
	position: absolute;
	top: -5000px;
}

#firstCard {
	display: block;
	height: 20px;
	background: black;
}

#layout-footer {
	color: #333;
}

	#layout-footer a {
		color: #333;
	}

#laytout-footer-wrapper {
	background: #98BBC9;
	height: 100px;
	width: 1280px;
	margin: 0 auto;
}

#layout-footer-bottom {
	/*background: url(Bottom.png) bottom no-repeat;*/
	height: 100px;
	width: 1280px;
}


#footer-mdcs-link { /*background:url(footerlogo.png);*/
	margin-top: 6px;
	display: inline-block;
	width: 173px;
	height: 48px;
}

#footer {
	overflow: visible;
	position: relative;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 5px;
    margin: .6em 0;
}

h1 {
	font-size: 28px;
}

h2 {
	font-size: 25px;
}

h3 {
	font-size: 22px;
}

h4 {
	font-size: 19px;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 16px;
}

	h1 img, h2 img, h3 img,
	h4 img, h5 img, h6 img {
		margin: 0;
	}

/* Aside Headings */
aside h1 {
	font-size: 1.154em;
}

aside h2 {
	font-size: 1.077em;
}

aside h3 {
	font-size: 1em;
}

aside h4 {
	font-size: 1em;
}

aside h5 {
	font-size: 1em;
}

aside h6 {
	font-size: 1em;
}

aside article.widget > header {
	background: #2c5105;
	color: #fff;
	padding: 0px 12px;
	line-height: 24px;
}

	aside article.widget > header h1 {
		color: #fff;
	}

/* Lists */
li ul,
li ol {
	margin: 0 1.5em;
}

ul, ol {
	margin: 0 1.5em 1.5em 1.5em;
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

dl {
	margin: 0 0 1.5em 0;
}

	dl dt {
		font-weight: bold;
	}

dd {
	margin-left: 1.5em;
}

/* Text elements */
p {
	margin-bottom: 1em;
	line-height: 1.6;
}

	p img.left {
		float: left;
		margin: 0.923em 0.923em 0.923em 0;
		padding: 0;
	}

	p img.right {
		float: right;
		margin: 0.923em 0 0.923em 0.923em;
	}

a:focus,
a:hover {
	text-decoration: underline;
}

@keyframes linkHover {
	0% {filter: brightness(100%);}
	30% {filter: brightness(150%);}
	50% {filter: brightness(135%);}
	70% {filter: brightness(150%);}
	100% {filter: brightness(100%);}
}

a {
	color: #1a6b6f;
	font-weight: bold;
	text-decoration: underline;
}

a:hover {
	color: #248a8e;
}

blockquote {
	margin: 0.923em;
	color: #666;
	font-style: italic;
}

strong {
	font-weight: bold;
}

em, dfn {
	font-style: italic;
}

dfn {
	font-weight: bold;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
}

address {
	margin: 0 0 0.923em;
	font-style: italic;
}

del {
	color: #666;
}

pre {
	margin: 0.923em 0;
	white-space: pre;
}

pre, code {
	font: 0.9em 'andale mono', 'lucida console', monospace;
	line-height: 1.462em;
}

/* Forms
***************************************************************/

form {
	margin: 0;
	padding: 0;
}

.form-control
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

legend {
	font-size: 1.231em;
	font-weight: normal;
	margin: 0 0 1.2em 0;
	border: none;
}

fieldset {
	padding: 0em;
	margin: 0 0 0em 0;
	border: 0px solid #dbdbdb;
}

label {
	font-weight: bold;
	display: inline-block;
	padding: 0 0 0.3em 0;
	color: #635161;
}

	label.forcheckbox {
		display: inline;
	}

input[type="text"], input[type="password"] {
	display: block;
	padding: 0.3em;
}

input[type="checkbox"] {
	margin: .2em 0 1.2em 0;
}

fieldset ol {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

	fieldset ol li {
		margin: 0 0 6px 0;
	}

/* Structure
***************************************************************/
#layout-wrapper {
	display: block;
	margin: 0 auto;
	width: 1280px;
	background-attachment: scroll;
	background-position: center;
	min-height: 987px;
	box-shadow: 0px 0px 17px 3px rgba(0,0,0,0.75);
}

#layout-header, #layout-featured, #layout-before-main, #layout-footer, #layout-after-main, #layout-tripel {
	width: 1000px;
	margin: 0 auto;
}

#layout-header {
	margin: 0px;
	width: 100%;
}

#header {
	margin: 0px auto;
	width: 1280px;
}

#layout-header, #header {
	height: 315px;
	background-size: 1280px 315px;
	background-repeat: no-repeat;
}

#footer {
	margin: 0px auto;
	width: 1280px;
}

#layout-footer {
	width: 1280px;
	margin: 6px 5px 0 2px;
}

#layout-footer, #footer {
	min-height: 28px;
}

.layout-navigation-free {
	width: 1280px;
	height: 95px;
	display: block;
	position: absolute;
	z-index: 0;
	top: 299px;
}

.layout-navigation-fixed {
	width: 1280px;
	height: 95px;
	min-height: 95px;
	display: block;
	position: fixed;
	top: -25px;
	z-index:1000;
	height: 0px;
}

.zone-navigation {
	width: 100%;
}

#nav ul {
	padding: 0px;
	margin: 0px;
}

#nav ul li {
	border: 0px;
	background: inherit;
	display: block;
	float: left;
	margin: 0 -2px 0 0;
	font-weight: normal;
	font-size: 0;
	height: 37px;
}

#branding {
	font-variant: small-caps;
	font-size: 2.9em;
	padding: 0;
	margin: 0;
	display: none;
}

	#branding a {
		text-decoration: none;
		color: #fff;
	}

#layout-main, #problems-layout-main {
	width: 1280px;
	margin-left: 0px;
	padding-top: 11px;
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-fill-mode: both;
}

#layout-main-container, #problems-layout-main-container {
	width: 1280px;
	/*background: url(background.png);*/
	background-attachment: fixed;
	background-position: center;
	z-index: 1;
}

#layout-content, problems-layout-content {
	margin: 0px auto;
	width: 1000px;
}

#messages {
	padding: 0 30px;
}

#content, #problems-content {
	margin-top: 12px;
	text-align: left;
	font-size: 21px;
	color: #635161;
	position: relative;
}


#problems-content {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 50px;
}

#aside-second {
	padding: 100px 0px;
	height:2px;
	position: fixed;
	right:0px;
	bottom:220px;
}

@media (max-width: 1650px) {
	#aside-second {
		display: none;
	}
}

#layout-tripel {
	padding: 0 20px 0 20px;
}

#footer-sig {
	padding: 0px;
	padding-bottom: 0;
}

/* Zones */
.zone {
	padding: 0px 0px;
	/*  Enable this to see zone visualizations
	background-color: yellow;
	box-shadow:inset 0 0 1px purple;
	-moz-box-shadow:inset 0 0 1px purple;
	-webkit-box-shadow:inset 0 0 1px purple;
	*/
}

.zone-header {
	padding: 30px 30px 30px 18px;
	position: relative;
	height: 230px;
	z-index: 5;
}

.zone-navigation {
	padding: 0;
}

.zone-footer {
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 28px;
}

/* Main
***************************************************************/

/* Blogs */
.blog-description {
	font-size: 1.231em;
}

.blog-post .tags {
	margin-top: 12px;
}

	.blog-post .tags a {
		background-color: #dbdbdb;
		padding: 3px;
		color: #434343;
	}

		.blog-post .tags a:hover {
			background-color: #434343;
			padding: 3px;
			color: #fff;
		}

.blog-posts {
	padding: 0;
	margin: 0;
	list-style: none;
	max-width: 987px;
}

	.blog-posts li {
		padding: 0;
		margin: 0;
	}

	.blog-posts .blog-post {
		padding: 0px 0px 0px 0px;
	}

		.blog-posts .blog-post header {
			display: block !important;
		}

			.blog-posts .blog-post header h1 {
				font-size: 26px;
				color: #1d4e57;
				font-weight: 600;
				letter-spacing: 0.2px;
				margin: 0.4em 0 0.5em 0;
			}

				.blog-posts .blog-post header h1 a {
					text-align: left;
				}

		.blog-posts .blog-post .tags {
			margin-top: 12px;
		}

			.blog-posts .blog-post .tags a {
				background-color: #dbdbdb;
				padding: 3px;
				color: #434343;
			}

				.blog-posts .blog-post .tags a:hover {
					background-color: #434343;
					padding: 3px;
					color: #fff;
					text-decoration: none;
				}

		.blog-posts .blog-post .metadata {
			margin: 0 0 0 0;
			color: #6a6790;
			font-size: 0.846em;
		}

			.blog-posts .blog-post .metadata .published {
				margin-top: 4px;
				margin-bottom: 9px;
				display: block;
				width: 1160px;
				color: #6a6790;
				font-size: 15px;
				letter-spacing: 0.4px;
				text-transform: uppercase;
			}

			.blog-posts .blog-post .metadata .commentcount {
				display: inline;
			}

.blog-post .metadata {
	margin: 0 0 12px 0;
	color: #999;
	font-size: 0.846em;
}

	.blog-post .metadata .published {
		display: inline;
		margin: 0 6px 0 0;
	}

.blog-post header {
	display: block !important;
}

.blog-pagination {
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
}

	.blog-pagination li {
		float: left;
		padding: 0 12px 0 0;
		margin: 0;
	}

	.blog-pagination a {
		font-size: 1.077em;
		display: block;
		background-color: #dbdbdb;
		padding: 6px 6px;
		color: #434343;
	}

		.blog-pagination a:hover {
			background-color: #434343;
			color: #fff;
		}

/* Comments */
#comments {
	margin: 24px 0 0 0;
	padding: 0;
}

.comment-form {
	margin: 24px 0 0 0;
	padding: 0;
}

.comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

	.comments li {
		margin: 12px 0 0 0;
		padding: 12px;
		border: 1px solid #dbdbdb;
	}

.comment {
	margin: 0;
	padding: 0;
}

	.comment header {
		display: block !important;
	}

	.comment h4 {
		font-size: 1.077em;
	}

.comment-form #comment-by {
	font-size: 1.231em;
	font-weight: normal;
	margin: 0 0 1.2em 0;
	border: none;
}

.comment-form #comment-text {
	width: 33.2em;
}

.comment-form input[type="text"] {
	width: 32em;
}

.comment-count {
	font-size: 1.231em;
}

.tagged-posts {
	padding: 0;
	margin: 0;
	list-style: none;
}

	.tagged-posts li {
		padding: 0;
		margin: 0;
	}

	.tagged-posts .blog-post {
		border-top: 1px solid #dbdbdb;
		padding: 6px 0 6px 0;
	}

			.tagged-posts .blog-post header h1 {
				font-size: 1.308em;
			}

				.tagged-posts .blog-post header h1 a {
					color: #434343;
				}

		.tagged-posts .blog-post .tags {
			margin-top: 12px;
		}

			.tagged-posts .blog-post .tags a {
				background-color: #dbdbdb;
				padding: 3px;
				color: #434343;
			}

				.tagged-posts .blog-post .tags a:hover {
					background-color: #434343;
					padding: 3px;
					color: #fff;
					text-decoration: none;
				}

		.tagged-posts .blog-post .metadata {
			margin: 0 0 12px 0;
			color: #999;
			font-size: 1.1em;
		}

			.tagged-posts .blog-post .metadata .published {
				display: inline;
				margin: 0 6px 0 0;
			}

			.tagged-posts .blog-post .metadata .commentcount {
				display: inline;
			}

/* Search Results */
.search-results {
	padding: 0;
	margin: 0;
	list-style: none;
}

	.search-results li {
		padding: 0;
		margin: 0;
	}

	.search-results .blog-post {
		border-top: 1px solid #dbdbdb;
		padding: 6px 0 6px 0;
	}

			.search-results .blog-post header h1 {
				font-size: 1.308em;
			}

				.search-results .blog-post header h1 a {
					color: #434343;
				}

		.search-results .blog-post .tags {
			margin-top: 12px;
		}

			.search-results .blog-post .tags a {
				background-color: #dbdbdb;
				padding: 3px;
				color: #434343;
			}

				.search-results .blog-post .tags a:hover {
					background-color: #434343;
					padding: 3px;
					color: #fff;
					text-decoration: none;
				}

		.search-results .blog-post .metadata {
			margin: 0 0 12px 0;
			color: #999;
			font-size: 0.846em;
		}

			.search-results .blog-post .metadata .published {
				display: inline;
			}

			.search-results .blog-post .metadata .commentcount {
				display: inline;
			}



/* Secondary
***************************************************************/

/* Aside Zones */
/* If zone 1 is on */
.aside-1 #layout-content {
	float: right;
	width: 600px;
}

.aside-1 .aside-first {
	float: left;
	width: 360px;
}

/* If zone 2 is on */
.aside-2 #layout-content {
	width: 1160px;
	margin-left: 40px;
	margin-right: 40px;
	display: inline-block;
}

.aside-2 .aside-second {
	float: right;
	width: 220px;
}

/* If zones 1, 2 are on */
.aside-12 #layout-content {
	width: 842px;
}

.aside-12 .aside-first, .aside-12 .aside-second {
	width: 180px;
}

.aside-12 .aside-first, .aside-12 .aside-second, .aside-12 #layout-content {
	float: left;
}

/* Tripel Zones*/
#layout-tripel > div {
	float: left;
	width: 960px;
}

/*2 zones on */
.tripel-12 #layout-tripel > div {
	width: 480px;
}
/* If zones 1, 2 are on */
.tripel-23 #layout-tripel > div {
	width: 480px;
}
/* If zones 2, 3 are on */
.tripel-13 #layout-tripel > div {
	width: 480px;
}
/* If zones 1, 3 are on */

/*3 zones on */
.tripel-123 #layout-tripel > div {
	width: 310px;
}
/* If zones 1, 2, 3 are on */

/* Quad Footer Zones */
#footer-quad > div {
	float: left;
	width: 240px;
}

/*1 zone on */
.split-1 #footer-quad-first {
	width: 960px;
}
/* If zone 1 is on */
.split-2 #footer-quad-second {
	width: 960px;
}
/* If zone 2 is on */
.split-3 #footer-quad-third {
	width: 960px;
}
/* If zone 3 is on */
.split-4 #footer-quad-fourth {
	width: 960px;
}
/* If zone 4 is on */

/*2 zones on */
.split-12 #footer-quad-first, .split-12 #footer-quad-second {
	width: 480px;
}
/* If zones 1, 2 are on */
.split-13 #footer-quad-first, .split-13 #footer-quad-third {
	width: 480px;
}
/* If zones 1, 3 are on */
.split-14 #footer-quad-first, .split-14 #footer-quad-fourth {
	width: 480px;
}
/* If zones 1, 4 are on */
.split-23 #footer-quad-second, .split-23 #footer-quad-third {
	width: 480px;
}
/* If zones 2, 3 are on */
.split-24 #footer-quad-second, .split-24 #footer-quad-fourth {
	width: 480px;
}
/* If zones 2, 4 are on */
.split-34 #footer-quad-third, .split-34 #footer-quad-fourth {
	width: 480px;
}
/* If zones 3, 4 are on */

/*3 zones on */
.split-234 #footer-quad-second {
	width: 480px;
}
/* If zones 2, 3, 4 are on */
.split-134 #footer-quad-first {
	width: 480px;
}
/* If zones 1, 3, 4 are on */
.split-124 #footer-quad-fourth {
	width: 480px;
}
/* If zones 1, 2, 4 are on */
.split-123 #footer-quad-third {
	width: 480px;
}
/* If zones 1, 2, 3 are on */



/* Widgets
***************************************************************/

/* Search */
/* Search widget shuld go into the sidebar for proper styling */
/* TODO: (mibach) Generic any zone compatible search widget */
.widget-search-form {
	position: absolute;
	top: 30px;
	right: 0px;
}

	.widget-search-form fieldset {
		border: 1px solid #fff;
	}


	.widget-search-form h1 {
		font-size: 1.077em;
	}

	.search-form input[type="text"] {
		float: left;
		margin-right: 0px;
		border: 0px;
		border-right: 1px solid #635161;
		color: #635161;
		background-color: transparent;
		padding: 4px;
	}

	.search-form button[type="submit"] {
		color: #635161;
		float: left;
		margin: 0;
		border: 0px solid #635161;
		background-color: transparent;
		border-left: 0px;
		padding: 4px 10px;
	}

/* Edit Mode Widgets */
/* These are the edit controls that appear when you're logged-in */
.widget-control {
	position: relative;
	border: 1px dotted #5f97af;
}

	.widget-control .manage-actions {
		position: absolute;
		top: 0px;
		right: 0px;
	}

		.widget-control .manage-actions a {
			display: block;
			background-color: #dbdbdb;
			color: #434343;
			padding: 3px 6px;
		}

			.widget-control .manage-actions a:hover {
				background-color: #434343;
				color: #fff;
				text-decoration: none;
			}

	.widget-control .widget-search-form /* TODO: (mibach) Remove special case for Search Widget */ {
		position: absolute;
		top: 30px;
		right: 0px;
	}

/* Content Mode */
.content-control {
	position: relative;
	border: 1px dotted #5f97af;
}

	.content-control .manage-actions {
		position: absolute;
		top: 0px;
		right: 0px;
	}

		.content-control .manage-actions a {
			display: block;
			background-color: #dbdbdb;
			color: #434343;
			padding: 3px 6px;
		}

			.content-control .manage-actions a:hover {
				background-color: #434343;
				color: #fff;
				text-decoration: none;
			}



/* Misc
***************************************************************/

.small {
	font-size: 0.615em;
	margin-bottom: 1.875em;
	line-height: 1.875em;
}

.large {
	font-size: 1.231em;
	line-height: 2.231em;
	margin-bottom: 1.25em;
}

.hide {
	display: none;
}

.quiet {
	color: #666;
}

.loud {
	color: #000;
}

.highlight {
	background: #ff0;
}

.added {
	background: #060;
	color: #fff;
}

.removed {
	background: #900;
	color: #fff;
}

.first {
	margin-left: 0;
	padding-left: 0;
}

.last {
	margin-right: 0;
	padding-right: 0;
}

.top {
	margin-top: 0;
	padding-top: 0;
}

.bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

.credits {
	float: right;
	line-height: 12px;
	right: 84px;
}

	.credits div {
		display: inline-block;
		font-size: 15px;
		color: #635161;
	}

.user-display {
	z-index: 10000;
	width: 212px;
	height: 65px;
}

	.user-display a {
		display: block;
		background-image: url(signin.png);
		background-size: contain;
		background-repeat: no-repeat;
		width: 212px;
		height: 65px;
	}

		.user-display a:hover {
			background-image: url(signin_hover.png);
			animation-name: neon_hover;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}

	.user-display .user-actions {
		font-size:medium;
		padding: 2px 5px 2px 5px
	}

/* Authenticated state: sign-out button + circular profile icon stacked.
   Base .user-display has fixed height 65px; allow it to grow so the
   profile-link sits below the sign-out without clipping. */
.user-display-authenticated {
	height: auto !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Profile icon — colors picked from the signout.png artwork (lavender/purple
   on transparent background) so the icon visually pairs with the sign-out
   button above it.
   The `.user-display a` rule defaults every anchor in this container to
   the signin.png background + 212x65 dimensions, so we have to be explicit
   here (and chain `.user-display` for specificity) to override it. */
.user-display a.profile-link,
.profile-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 10px 0 0 0;
	background-color: transparent;
	background-image: none !important;
	color: #a78ec0 !important;
	text-decoration: none !important;
	transition: color 0.18s ease, transform 0.18s ease;
}

.user-display a.profile-link:hover,
.user-display a.profile-link:focus,
.profile-link:hover,
.profile-link:focus {
	color: #c0a8d4 !important;
	background-image: none !important;
	text-decoration: none !important;
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.profile-link svg {
	width: 44px;
	height: 44px;
	fill: currentColor;
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7));
}

.login-form {
	margin: auto;
	text-align: center;
}

.login-form-horizontal {
	display: inline-block;
	margin: auto;
	text-align: left;
}

	.login-form-horizontal input[type=text], input[type=password] {
		width: 100%;
	}

.form-group {
	width: 200px;
}

.profile-form {
	display: inline-block;
	text-align: left;
}

.profile-info-group {
	display: inline-block;
	margin-bottom: 15px;
}

.profile-info-value {
	font-weight: bold;
}

.login-text {
	padding:0px 5px 0px 20px;
	font-size: 16px;
}


/* CSS 3 Enhancements 
***************************************************************/

/* Legacy default-button look — kept ONLY for elements with the explicit
   `.button` class. Removed from `input[type=submit]`, `input[type=button]`,
   and bare `<button>` so our custom button classes (.login-button,
   .bbc-action-button, .bbc-secondary-button, .bbc-danger-button,
   .petlja-signup-button) actually win the cascade when applied to those
   elements. */
.button, .button:link, .button:visited {
	color: #333;
	background: #F5F5F5;
	background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#cbcbcb));
	background: -moz-linear-gradient(top, #F5F5F5, #cbcbcb);
	border: 1px solid #999;
	cursor: pointer;
	margin: .2em 0 4em 0;
	padding: .3em 1.8em;
	text-align: center;
}

	.button:hover,
	.button:active,
	.button:focus {
		text-decoration: none;
		background: #ebebeb;
		background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ebebeb));
		background: -moz-linear-gradient(top, #e1e1e1, #ebebeb);
	}

/* Things added
***************************************************************/
ul.pager {
	display: none;
}

p.tags {
	display: none;
}

.content-item header {
	display: none;
}

.content-item .blog-posts header {
	display: block;
}

.fb-like {
	float: right;
	margin-top: -28px;
}

#fb-wrapper {
	position: relative;
	width: 220px;
	top: -57px;
}

	#fb-wrapper.fixed {
		position: fixed;
		top: 195px;
		width: 220px;
	}

#fb-frame {
	position: absolute;
	/*background: url(FacebookFrame.png) no-repeat;*/
	width: 320px;
	height: 450px;
	top: -22px;
	left: -48px;
	pointer-events: none;
	/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='FacebookFrame.png', sizingMethod='scale');*/
}

.field-validation-error {
	font-size: 12px;
	color: #a8324a;
	font-weight: 600;
}

.successful {
	color: #3d8a72;
	font-weight: 600;
}

.current span.menu-item-end {
	display: inline-block;
	height: 40px;
	width: 4px;
	background: transparent url(nav-current-close.png) no-repeat bottom right;
}

ul.teams {
	width: 900px;
	margin: 0;
}

	ul.teams li {
		display: inline-block;
		min-width: 260px;
		min-height: 100px;
		margin: 5px;
	}

.mailto { /*background: url(bubble.png) no-repeat;*/
	margin-top: 5px;
	width: 147px;
	height: 16px;
	display: inline-block;
	margin: 15px;
}

.quarter-part {
	display: inline-block;
	width: 200px;
}

.half-part {
	display: inline-block;
	width: 400px;
}

.source-code {
	width: 880px;
	height: 400px;
}

.team-member-link {
	display: inline-block;
	width: 250px;
}

.kick-link {
	color: #a8324a;
}

.table-jointeam {
	margin-bottom: 20px;
	margin-bottom: 20px;
}

.table-jointeam tr th {
		font-weight: bolder;
		padding: 8px;
}

.table-jointeam tr td {
	padding: 4px 2px 4px 8px;
}


.table-results {
	margin-bottom: 20px;
	margin-bottom: 20px;
	width: 100%;
}

	.table-results tr th {
		font-weight: bolder;
		padding: 8px;
	}

	.table-results tr td {
		padding: 4px 2px 4px 8px;
	}

.results-navigation p {
	padding: 0;
	margin: 0px;
}

.rank-cell {
	width: 50px;
}

.EditFinalist {
	display: none;
}

@keyframes neon {
	0% {filter: brightness(100%);}
	30% {filter: brightness(150%);}
	50% {filter: brightness(135%);}
	70% {filter: brightness(150%);}
	100% {filter: brightness(100%);}
}

@keyframes neon_hover {
	0% {filter: brightness(100%) drop-shadow(0px 0px 0px #fff);}
	30% {filter: brightness(200%) drop-shadow(0px 0px 5px #fff);}
	50% {filter: brightness(175%) drop-shadow(0px 0px 3px #fff);}
	70% {filter: brightness(200%) drop-shadow(0px 0px 5px #fff);}
	100% {filter: brightness(100%) drop-shadow(0px 0px 0px #fff);}
}

/* HOME */
#menuHome {
	margin-left: 10px;
	display: block;
	background: url('menu_news.png') no-repeat;
	background-size: contain;
	width: 137px;
	height: 65px;
	z-index: 5;
	top: -28px;
	position: absolute;
}

	#menuHome:hover {
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/* RULES */
#menuRules {
	display: block;
	background: url('menu_rules.png') no-repeat;
	background-size: contain;
	width: 147px;
	height: 65px;
	z-index: 5;
	top: -28px;
	left: 147px;
	position: absolute;
}

	#menuRules:hover {
		background: url('menu_rules_hover.png') no-repeat;
		background-size: contain;
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/* COMPETITORS CORNER */
#menuCompetitorsCorner {
	display: block;
	background: url('menu_competitors.png') no-repeat;
	background-size: contain;
	width: 381px;
	height: 65px;
	z-index: 5;
	top: -28px;
	left: 294px;
	position: absolute;
}

	#menuCompetitorsCorner:hover {
		background: url('menu_competitors_hover.png') no-repeat;
		background-size: contain;
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/* GALLERY */
#menuGallery {
	display: block;
	background: url('menu_gallery.png') no-repeat;
	background-size: contain;
	width: 184px;
	height: 65px;
	z-index: 5;
	top: -28px;
	left: 675px;
	position: absolute;
}

	#menuGallery:hover {
		background: url('menu_gallery_hover.png') no-repeat;
		background-size: contain;
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/* ARCHIVE */
#menuArchive {
	display: block;
	background: url('menu_archive.png') no-repeat;
	background-size: contain;
	width: 189px;
	height: 65px;
	z-index: 5;
	top: -28px;
	left: 859px;
	position: absolute;
}

	#menuArchive:hover {
		background: url('menu_archive_hover.png') no-repeat;
		background-size: contain;
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/* ABOUT */
#menuAbout {
	display: block;
	background: url('menu_about.png') no-repeat;
	background-size: contain;
	width: 212px;
	height: 65px;
	z-index: 5;
	top: -28px;
	left: 1048px;
	position: absolute;
}

	#menuAbout:hover {
		background: url('menu_about_hover.png') no-repeat;
		background-size: contain;
		animation-name: neon_hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

/********************************
 *           SUBMENU            *
 ********************************/

/* CORNER PROBLEMS */
#submenuCornerProblems {
	display: inline-block;
	width: 142px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuCornerProblemsSelected {
	display: inline-block;
	width: 142px;
	z-index: 5;
	animation-name: neon;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#submenuCornerProblems:hover {
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* CORNER RESULTS */
#submenuCornerResults {
	display: inline-block;
	width: 107px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuCornerResultsSelected {
	display: inline-block;
	width: 107px;
	font-size: 15pt;
	z-index: 5;
	animation-name: neon;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#submenuCornerResults:hover {
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* CORNER PROFILE */
#submenuCornerProfile {
	display: inline-block;
	width: 111px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuCornerProfileSelected {
	display: inline-block;
	width: 111px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: underline;
	animation-name: neon;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#submenuCornerProfile:hover {
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* ARCHIVE BOOKLETS */
#submenuArchiveBooklets {
	display: inline-block;
	width: 111px;
	height: 55px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuArchiveBookletsSelected {
	display: inline-block;
	width: 111px;
	height: 55px;
	z-index: 5;
	font-size: 15pt;
	font-weight: 500;
}

#submenuArchiveBooklets:hover {
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* ARCHIVE PROBLEMS */
#submenuArchiveProblems {
	display: inline-block;
	width: 142px;
	height: 55px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuArchiveProblemsSelected {
	display: inline-block;
	width: 142px;
	height: 55px;
	z-index: 5;
	font-size: 15pt;
	font-weight: 500;
}

#submenuArchiveProblemsResults:hover {
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* ARCHIVE RESULTS */
#submenuArchiveResults {
	display: inline-block;
	width: 107px;
	height: 55px;
	z-index: 5;
	color: #635161;
	font-size: 15pt;
	font-weight: 500;
	text-decoration: none;
}

#submenuArchiveResultsSelected {
	display: inline-block;
	width: 107px;
	height: 55px;
	z-index: 5;
	font-size: 15pt;
	font-weight: 500;
}


#submenuArchiveResults:hover {
	background: url('submenu_archive_results_hover.png') no-repeat;
	animation-name: neon_hover;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#CardmenuHome {
	position: absolute;
}

#CardmenuRules {
	position: absolute;
}

#CardmenuProblems {
	position: absolute;
}

#CardmenuResults {
	position: absolute;
}

#CardmenuCompetitors {
	position: absolute;
}

#CardmenuMedia {
	position: absolute;
}

#CardmenuArchive {
	position: absolute;
}

#CardmenuAbout {
	position: absolute;
	position: absolute;
}

.fb_iframe_widget {
	background-color: #4166b1;
}

.relative-element {
	position: relative;
}

#signin-button {
	position: relative;
	left: 1070px;
}

#signin-button-in-navigation {
	position: absolute;
	top: 20px;
	left: 1070px;
	display: none;
}

.sign-in-user-info
{
    position: initial !important;
    float: right;
    margin-right: 60px;
    margin-top: 36px;
}

#header-scanline-background {
	background: url('header_disorted.jpg') no-repeat;
	width: 1280px;
	height: 50px;
	position: absolute;
}

.problemStatementWrapper {
	width: 1000px;
	margin-left: 100px;
}

.problemInputOutput {
	font-family: "Consolas", "Courier New", "monospace";
}

.emphasizedText {
	font-size: 25px;
	color: black;
}

.problemTitle, .problemName {
	margin-bottom: 20px;
	text-align: center;
}

#problems-layout-main-container {
	margin-top: 0px;
}

.problemTimeAndMemoryLimit {
	text-align: center;
	font-size: 13px;
	margin-bottom: 30px;
}

.problemSubmitButton {
	width:246px;
	height:56px;
	margin-top:50px;
	background: url('submit_solution.png') no-repeat;
	border: none;
}

.problemSubmitButton:focus {
	width:246px;
	height:56px;
	margin-top:50px;
	background: url('submit_solution.png') no-repeat;
	border: none;
}

.problemSubmitButton:hover {
	background: url('submit_solution_hover.png') no-repeat;
}

.problemSubmitButton:active {
	background: url('submit_solution_hover.png') no-repeat;
}

.problemSubmitButtonWrapper {
	text-align: center;
}

#problems-layout-header {
	background: url('header.png') no-repeat;
	background-size: 1280px 315px;
	/* color: #fff; */
	height: 219px;
	margin-top:24px;
}

.submitDialog
{
	background-color: black;
	color: white;
	border: 2px solid white;
}

.ui-dialog-titlebar
{
	display: none;
}

.submitDialogButton
{
	display: block;
	margin-top: 50px;
	left: 221px;
	top: 180px;
	position: absolute;
}

#cancelDialogButton
{
	position:absolute;
	top:180px;
	left: 315px;
	margin-left: 10px;
}

.submitDialogWrapper
{
	margin-top: 30px;
	margin-left: 30px;
}

.selectSourceCodeButton
{
	display: inline;
	margin-left: 52px;
}

.selectSourceCodeMessage
{
	display:inline;
}

.programmingLanguageDropdown
{
	margin-top: 5px;
	margin-left: 10px;
	display: inline;
}

.submitDialogTitle
{
	margin-top: 10px;
	text-align: center;
}

.programmingLanguageMessage
{
	display: inline;
}

.programmingLanguageWrapper
{
	display: block;
	margin-top: 10px;
}

#submitFilename
{
	display: inline;
	margin-left: 10px;
}

.table-row {
	font-size: 21px;
	color: #635161;
}

.submitCancelButtonWrapper
{
	display: block;
	margin-top: 50px;
	text-align: center;
}
	
.submissionResultWrapper
{
	position: relative;
	left: 480px;
	margin-top: 50px;
}
	
#submitStatusMessage
{
	display: inline;
}

#submissionStatusInfo
{
	display: inline;
}

.validation-errors{
	color: #635161;
}

.action-info{
	color: #635161;
	font-size:larger;
}

.note-text{
	color: #635161;
	font-size:small;
}

.table-header{
	font-size:21px;
	font-weight:bold;
	color: #635161;
}

.blogPostParagraph
{
	line-height: 1.65;
	margin-bottom: 0.9em;
}

.confirmDialogTitle
{
	text-align: center;
}

.confirmDialogWrapper
{
	margin-left: 20px;
}

#confirmDialogYesButton
{
	position: absolute;
	top: 120px;
	left: 200px;
	width: 100px;
}

#confirmDialogNoButton
{
	position: absolute;
	top: 120px;
	left: 320px;
	width: 100px;
}

.resultsTitle
{
	text-align: center;
	margin-top: 30px;
}

.problemTextWrapper
{
	line-height: 24px;
}

#countDown {
	background-color: #1d4e57;
	color: #f0e9d6;
	text-align: center;
	padding: 5px 12px;
	min-height: 24px;
	box-sizing: border-box;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0.3px;
}

.MJX_Assistive_MathML
{
	display: none;
}

.inline-math
{
	font-style: italic;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% {opacity: 1; }
}

.mdcsLogo {
	margin-bottom: 40px;
}

.medal
{
	margin-left: 3px;
}
img.separator,
img.separator2,
img.separatorDate,
img.separatorBottom {
	content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 9' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23635161' stop-opacity='0'/><stop offset='0.5' stop-color='%23635161' stop-opacity='0.55'/><stop offset='1' stop-color='%23635161' stop-opacity='0'/></linearGradient></defs><rect x='0' y='4' width='1280' height='1' fill='url(%23g)'/></svg>");
	display: block;
	width: 100%;
	height: 9px;
	margin-left: 0;
	opacity: 1;
}

.separator2 {
	margin-top: 0;
}

.blogContent
{
	margin-left: 13px;
	padding-top: 7px;
}

.headerImage
{
	background:url(header.jpg);
}

#footer
{
	height: 76px;
}

.editProfileWrapper
{
	font-size: 17px;
	text-align: center;
}

#schoolSelect
{
	padding: 3px 3px 3px 3px;
}


@keyframes neon001 {
	0% {filter: brightness(100%);}
	5% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon002 {
	0% {filter: brightness(100%);}
	5% {filter: brightness(100%);}
	10% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon003 {
	0% {filter: brightness(100%);}
	10% {filter: brightness(100%);}
	15% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon004 {
	0% {filter: brightness(100%);}
	15% {filter: brightness(100%);}
	20% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon005 {
	0% {filter: brightness(100%);}
	20% {filter: brightness(100%);}
	25% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon006 {
	0% {filter: brightness(100%);}
	25% {filter: brightness(100%);}
	30% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon007 {
	0% {filter: brightness(100%);}
	30% {filter: brightness(100%);}
	35% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon008 {
	0% {filter: brightness(100%);}
	35% {filter: brightness(100%);}
	40% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon009 {
	0% {filter: brightness(100%);}
	40% {filter: brightness(100%);}
	45% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}
@keyframes neon010 {
	0% {filter: brightness(100%);}
	45% {filter: brightness(100%);}
	50% {filter: brightness(200%);}
	60% {filter: brightness(200%);}
	65% {filter: brightness(100%);}
	70% {filter: brightness(200%);}
	75% {filter: brightness(100%);}
	80% {filter: brightness(200%);}
	85% {filter: brightness(100%);}
	90% {filter: brightness(200%);}
	100% {filter: brightness(100%);}
}

.logo001 {
	left: 450px;
	top: 59px;
	position:absolute;
	animation-name: neon001;
	animation-duration: 3s;
	animation-iteration-count: 43;
	z-index: 2;
}
.logo002 {
	left: 494px;
	top: 75px;
	position:absolute;
	animation-name: neon002;
	animation-duration: 3s;
	animation-iteration-count: 17;
	z-index: 2;
}
.logo003 {
	left: 531px;
	top: 59px;
	position:absolute;
	animation-name: neon003;
	animation-duration: 3s;
	animation-iteration-count: 29;
	z-index: 2;
}
.logo004 {
	left: 568px;
	top: 59px;
	position:absolute;
	animation-name: neon004;
	animation-duration: 3s;
	animation-iteration-count: 53;
	z-index: 2;
}
.logo005 {
	left: 606px;
	top: 59px;
	position:absolute;
	animation-name: neon005;
	animation-duration: 3s;
	animation-iteration-count: 47;
	z-index: 2;
}
.logo006 {
	left: 622px;
	top: 75px;
	position:absolute;
	animation-name: neon006;
	animation-duration: 3s;
	animation-iteration-count: 19;
	z-index: 2;
}
.logo007 {
	left: 567px;
	top: 118px;
	position:absolute;
	animation-name: neon007;
	animation-duration: 3s;
	animation-iteration-count: 31;
	z-index: 2;
}
.logo008 {
	left: 608px;
	top: 118px;
	position:absolute;
	animation-name: neon008;
	animation-duration: 3s;
	animation-iteration-count: 41;
	z-index: 2;
}
.logo009 {
	left: 645px;
	top: 117px;
	position:absolute;
	animation-name: neon009;
	animation-duration: 3s;
	animation-iteration-count: 23;
	z-index: 1002;
}
.logo010 {
	left: 627px;
	top: 3px;
	position:absolute;
	animation-name: neon010;
	animation-duration: 3s;
	animation-iteration-count: 37;
	z-index: 1;
}

.smallLogoPart {
	left: 649px;
	top: 49px;
	position: absolute;
}

.problemStatementWrapper h4
{
    margin-top: 25px;
    font-size: 25px;
    color: black;
}

.problemStatementWrapper p
{
    margin-bottom: 0.5em;
    line-height: initial;
}

.problemStatementWrapper ul, ol
{
    margin: 0 1.5em 0.5em 1.5em;
}

.problemStatementWrapper sup, sub
{
    font-size: 15px;
}

.problemStatementWrapper .attribution
{
    margin-top: 50px;
}

.problemStatementWrapper .imageWrapper
{
    text-align: center;
}

.problemStatementWrapper table
{
    border: 1px solid white;
    margin: 20px 0px;
    width: 100%;
}

.problemStatementWrapper table td {
    border: 1px solid white;
    padding: 5px 15px;
}

.policy
{
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 5px;
}

.profile-data-notice {
	font-size: 14px;
	color: #635161;
}

.edit-account-title {
	margin-top: 50px;
}

.submission-error {
	display: inline;
	color: #a8324a;
	font-weight: 600;
}

.petlja-signup {
	margin: 28px 0 140px;
	text-align: center;
}

.petlja-signup-text {
	font-size: 17px;
	color: #635161;
	margin: 0 0 10px;
	font-weight: 500;
}

.bbc-action-button {
	display: inline-block;
	padding: 10px 22px;
	background-color: #1d4e57;
	color: #f0e9d6 !important;
	border: none;
	border-radius: 8px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	box-shadow: 0 3px 10px rgba(28, 28, 60, 0.16);
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
	font-family: inherit;
}

.bbc-action-button:hover,
.bbc-action-button:focus {
	background-color: #246672;
	color: #ffffff !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* "Forgot your password?" link sits between the form fields and the Log in
   button. Wrapped in the same col-md-offset-2 col-md-10 grid as "Remember me"
   so it inherits that horizontal position; we just style the link itself. */
.forgot-password-link {
	margin: 4px 0 0 0;
	font-size: 14px;
}

.forgot-password-link a {
	color: #635161;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px dashed rgba(99, 81, 97, 0.5);
}

.forgot-password-link a:hover,
.forgot-password-link a:focus {
	color: #1d4e57;
	border-bottom-color: #1d4e57;
}

/* Login submit button — full-width primary action.
   Matches the visual width of the form input fields, with a richer gradient
   surface and stronger shadow than the regular page buttons. */
.login-submit-row {
	margin: 26px 0 8px 0;
	display: flex;
	justify-content: center;
}

.login-button {
	display: inline-block;
	padding: 10px 28px;
	min-width: 160px;
	background-color: #2c8e72;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.4;
	cursor: pointer;
	font-family: inherit;
	box-shadow: 0 4px 12px rgba(44, 142, 114, 0.25);
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.login-button:hover,
.login-button:focus {
	background-color: #38a586;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(44, 142, 114, 0.35);
	outline: none;
}

.login-button:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(44, 142, 114, 0.25);
}

/* Petlja signup link - secondary action, visually distinct from the
   primary Log in button (outlined instead of filled). */
.petlja-signup-button {
	display: inline-block;
	padding: 10px 22px;
	background-color: rgba(255, 255, 255, 0.55);
	color: #1d4e57 !important;
	border: 2px dashed #1d4e57;
	border-radius: 8px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-style 0.18s ease;
}

.petlja-signup-button:hover,
.petlja-signup-button:focus {
	background-color: #1d4e57;
	color: #f0e9d6 !important;
	border-style: solid;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* Stacked action button + helper text on the Profile / Edit page */
.team-actions {
	margin: 16px 0 24px 0;
}

.team-actions .note-text {
	margin: 8px 0 0 0;
}

/* Team info block on the Edit Account page (when user has a team) */
.team-info-block {
	margin: 16px 0 28px 0;
	text-align: center;
}

.team-name-display {
	font-size: 26px;
	margin: 8px 0 22px 0;
	color: #1d4e57;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.team-name-display strong {
	font-weight: 700;
	color: #635161;
	font-size: 18px;
	display: block;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.team-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.bbc-danger-button {
	display: inline-block;
	padding: 10px 22px;
	background-color: #a8324a;
	color: #ffffff !important;
	border: none;
	border-radius: 8px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	box-shadow: 0 3px 10px rgba(168, 50, 74, 0.22);
	transition: background-color 0.18s ease, transform 0.18s ease;
	cursor: pointer;
	font-family: inherit;
}

.bbc-danger-button:hover,
.bbc-danger-button:focus {
	background-color: #c04161;
	color: #ffffff !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* Secondary (outlined) button - used for "Back" / cancel-style links
   alongside a primary action. */
.bbc-secondary-button {
	display: inline-block;
	padding: 9px 20px;
	background-color: transparent;
	color: #1d4e57 !important;
	border: 2px solid #1d4e57;
	border-radius: 8px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bbc-secondary-button:hover,
.bbc-secondary-button:focus {
	background-color: #1d4e57;
	color: #f0e9d6 !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* Form action row - centers the submit/back actions on Create/Edit Team forms. */
.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin: 28px 0 12px 0;
}

/* Explicit-height spacer for page bottoms — robust against the
   `<br />`-collapsing behaviour of Bootstrap form-horizontal contexts. */
.page-bottom-spacer {
	min-height: 160px;
}

/* Pending join requests */
.join-requests-heading {
	text-align: center;
	margin-top: 32px;
	margin-bottom: 16px;
	color: #a8324a;
}

.join-requests-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: 32px;
}

.join-request-card {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(168, 50, 74, 0.25);
	border-radius: 12px;
	padding: 16px 24px;
	min-width: 360px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.join-request-name {
	font-size: 18px;
	font-weight: 600;
	color: #1d4e57;
	letter-spacing: 0.2px;
}

.join-request-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 480px) {
	.join-request-card {
		min-width: 0;
		width: 100%;
		padding: 14px 16px;
	}

	.join-request-actions .bbc-action-button,
	.join-request-actions .bbc-danger-button {
		flex: 1 1 calc(50% - 6px);
		min-width: 110px;
		text-align: center;
	}
}

/* Team members list */
.team-members-heading {
	text-align: center;
	margin-top: 32px;
	margin-bottom: 16px;
	color: #635161;
}

.team-members-table {
	margin: 0 auto 24px auto;
	border-collapse: separate;
	border-spacing: 0 10px;
	min-width: 360px;
}

.team-members-table tr {
	background: rgba(255, 255, 255, 0.4);
}

.team-members-table .team-member-name {
	font-size: 18px;
	font-weight: 600;
	color: #1d4e57;
	padding: 12px 24px;
	text-align: center;
	letter-spacing: 0.2px;
}

.team-members-table .team-member-action {
	padding: 8px 16px;
	text-align: center;
}

/* Join Team table - separators between team rows + cell padding */
.table-jointeam {
	border-collapse: collapse;
	width: 100%;
	margin: 12px 0;
}

.table-jointeam tr th,
.table-jointeam tr td {
	padding: 16px 16px;
	vertical-align: middle;
}

.table-jointeam tr th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #635161;
	padding-bottom: 12px;
}

/* Soft gradient separator line between each team row,
   matching the same fade-in/out aesthetic as the news separators. */
.table-jointeam tr:not(:last-child) td,
.table-jointeam tr th {
	background-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(99, 81, 97, 0.45) 50%,
		transparent 100%
	);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: bottom;
}

.table-jointeam tr td:first-child {
	padding-right: 28px;
	font-size: 17px;
	font-weight: 500;
	color: #1d4e57;
}

/* Rules page - improved typography hierarchy for long-form content. */
#content article.page > h1 {
	font-size: 34px;
	color: #1d4e57;
	font-weight: 700;
	letter-spacing: 0.2px;
	margin: 8px 0 24px 0;
	padding-bottom: 12px;
	background-image: linear-gradient(
		to right,
		rgba(29, 78, 87, 0.55) 0%,
		rgba(29, 78, 87, 0.55) 80px,
		transparent 100%
	);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: bottom;
}

#content article.page h2 {
	font-size: 24px;
	color: #1d4e57;
	font-weight: 600;
	letter-spacing: 0.15px;
	margin: 36px 0 14px 0;
	padding-bottom: 8px;
	background-image: linear-gradient(
		to right,
		rgba(99, 81, 97, 0.40) 0%,
		rgba(99, 81, 97, 0.40) 50%,
		transparent 100%
	);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: bottom;
}

#content article.page h3 {
	font-size: 17px;
	color: #635161;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin: 26px 0 8px 22px;
	padding-left: 12px;
	border-left: 3px solid #1d4e57;
	line-height: 1.3;
}

#content article.page p {
	margin: 0 0 12px 0;
	line-height: 1.7;
}

#content article.page ul,
#content article.page ol {
	margin: 0 0 18px 22px;
	padding: 0;
}

#content article.page li {
	margin-bottom: 10px;
	line-height: 1.65;
}

/* Wrapper for tables that don't fit on narrow viewports - allows horizontal
   scrolling on mobile while keeping the table layout intact. */
.responsive-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0;
}

.rules-schedule {
	width: 90%;
	margin-left: 5%;
	border-collapse: collapse;
}

.rules-schedule th,
.rules-schedule td {
	padding: 14px 14px;
	vertical-align: top;
}

.rules-schedule tr th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #635161;
	padding-bottom: 12px;
}

/* Soft gradient separator line between each row, matching the
   news / join-team separator aesthetic. */
.rules-schedule tr:not(:last-child) td,
.rules-schedule tr th {
	background-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(99, 81, 97, 0.45) 50%,
		transparent 100%
	);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: bottom;
}

.rules-schedule tr td:first-child {
	font-weight: 600;
	color: #1d4e57;
}

/* CompetitorsCorner section picker (PROBLEMS/RESULTS/PROFILE).
   Flows in normal layout (not absolute) so the page content below it
   doesn't overlap. Provides its own breathing room via margin. */
.competitors-section-picker {
	display: block;
	text-align: center;
	margin: 0 0 18px 0;
	padding: 8px 0;
}

/* When the section picker is a sibling of #content (Problems/Results pages),
   the picker's own bottom margin already provides the gap. The 12px margin-top
   on #content would add visible empty space above the page heading. */
.competitors-section-picker + #content {
	margin-top: 0;
}

.competitors-section-picker > a {
	margin: 0 12px;
	vertical-align: middle;
}

@media (max-width: 1280px) {
	.competitors-section-picker {
		margin: 4px 0 12px;
		padding: 4px 8px;
	}

	.competitors-section-picker > a {
		display: inline-block;
		width: auto !important;
		height: auto !important;
		padding: 8px 14px;
		margin: 4px 4px;
		font-size: 14pt;
		background: rgba(255, 255, 255, 0.45);
		border-radius: 8px;
		text-decoration: none;
	}

	.responsive-table-wrapper {
		margin-left: -16px;
		margin-right: -16px;
		padding: 0 16px;
	}

	.rules-schedule {
		width: auto;
		min-width: 560px;
		margin-left: 0;
	}

	.rules-schedule th,
	.rules-schedule td {
		padding: 10px 12px;
		font-size: 14px;
	}

	/* First column (event name) stays on one line.
	   Other columns wrap naturally - dates like "September / October 2026*"
	   break at the spaces around the slash, so they take less horizontal room. */
	.rules-schedule td:first-child,
	.rules-schedule th:first-child {
		white-space: nowrap;
	}

	.rules-schedule td:not(:first-child) {
		white-space: normal;
		word-break: normal;
	}

	.rules-schedule td:last-child {
		min-width: 160px;
	}

	/* Tables on Problems / Results pages */
	.table-results,
	.table-jointeam {
		width: 100%;
		font-size: 14px;
	}

	.table-results th,
	.table-results td,
	.table-jointeam th,
	.table-jointeam td {
		padding: 6px 4px;
	}

	/* Profile form: stack labels above inputs */
	.profile-form,
	.editProfileWrapper {
		width: 100%;
	}

	.editProfileWrapper .form-group .control-label,
	.editProfileWrapper .form-group .col-md-2,
	.editProfileWrapper .form-group .col-md-10 {
		float: none;
		width: 100%;
		text-align: left;
		padding: 4px 0;
	}

	.editProfileWrapper .form-control {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Problem statements wrap to viewport */
	.problemStatementWrapper,
	.problemStatementWrapper table {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* ===== Floating sponsor footer (matches header width: 1280px max, centered) ===== */
#floating-footer {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1280px;
	aspect-ratio: 1280 / 120;
	background-image: url('footer.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	background-color: transparent;
	z-index: 1000;
	pointer-events: none;
}

/* Hide the legacy text footer (credits/policy/email) so only the image shows */
#footer,
#layout-footer {
	background: transparent !important;
	box-shadow: none;
}

#footer {
	display: none;
}

body {
	padding-bottom: 120px;
}

@media (max-width: 1280px) {
	body {
		padding-bottom: calc(100vw * 120 / 1280);
	}
}

/* ===== Mobile-only widgets (hidden on desktop) ===== */
.mobile-nav-toggle { display: none !important; }
.hamburger { display: none; }

/* ===== Mobile / narrow viewports ===== */
@media (max-width: 1280px) {
	html, body { overflow-x: hidden; }

	#layout-wrapper {
		width: 100%;
		min-width: 0;
		box-shadow: none;
	}

	/* Mobile header: 2x zoom centered on the "bubble cup 18" logo.
	   - aspect-ratio 2.5:1 + background-size 200% auto means the image
	     fills the container with no blank top/bottom; the visible window
	     is ~25-75% horizontal and ~10-91% vertical of the original.
	   - Logo bounds (x 32-69%, y 12-75%) fit inside that window with margin.
	   !important beats React's inline height: 315px on mobile. */
	#layout-header,
	#header {
		display: block !important;
		width: 100% !important;
		aspect-ratio: 2.5 / 1 !important;
		height: auto !important;
		background-image: url('header.png') !important;
		background-size: 200% auto !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Sign-in inside header - reposition for mobile */
	#signin-button {
		position: absolute;
		top: 8px;
		right: 8px;
		left: auto;
	}

	/* When the mobile hamburger menu is open, hide the header sign-in
	   button (it would otherwise float on top of the overlay because its
	   .user-display rule sets z-index: 10000 > the overlay's 1050).
	   The centered #signin-button-in-navigation inside the open menu is
	   the only sign-in shown in this state. */
	.App.mobile-nav-open #signin-button,
	.mobile-nav-toggle:checked ~ #layout-wrapper #signin-button {
		display: none !important;
	}

	/* Sign-in rendered INSIDE the navigation (#signin-button-in-navigation
	   in both React and Razor) - centered as a column item alongside the
	   menu links inside the open mobile nav overlay.
	   `order: -1` floats it to the TOP of the flex column instead of
	   trailing the menu items in DOM order. */
	.layout-navigation-free #signin-button-in-navigation,
	.layout-navigation-free .user-display {
		display: block !important;
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		width: 212px !important;
		max-width: 100% !important;
		margin: 8px auto 16px auto !important;
		float: none !important;
		order: -1;
	}

	/* When authenticated, the in-nav user-display has both the sign-out
	   button AND the profile icon stacked. Force flex column so the icon
	   sits cleanly centered below the sign-out instead of getting pushed
	   to the left edge by the block-layout fallback above. */
	.layout-navigation-free #signin-button-in-navigation.user-display-authenticated,
	.layout-navigation-free .user-display.user-display-authenticated {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		height: auto !important;
	}

	/* The MainMenu wrapper article is a single flex item; let it shrink to
	   its content width and sit centered, so the menu links column lines up
	   under the sign-in button. */
	.App.mobile-nav-open .widget-navigation,
	.mobile-nav-toggle:checked ~ #layout-wrapper .widget-navigation {
		width: 100%;
		max-width: 320px;
		text-align: center;
	}

	/* Make the zone a flex column too — guarantees centering on every browser
	   regardless of which descendant rule wins the cascade. */
	.App.mobile-nav-open .zone-navigation,
	.mobile-nav-toggle:checked ~ #layout-wrapper .zone-navigation {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	#layout-main,
	#problems-layout-main,
	#layout-main-container,
	#problems-layout-main-container,
	#layout-footer,
	#footer {
		width: 100%;
	}

	/* Hamburger button - fixed top-left corner */
	.hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 8px;
		left: 8px;
		width: 48px;
		height: 48px;
		padding: 0;
		margin: 0;
		border: none;
		outline: none;
		background-color: #1d4e57;
		background-image: none;
		color: #ffffff;
		border-radius: 10px;
		cursor: pointer;
		z-index: 1100;
		gap: 6px;
		box-shadow: 0 4px 14px rgba(28, 28, 60, 0.28);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	.hamburger:hover,
	.hamburger:focus,
	.hamburger:active {
		background-color: #246672;
		outline: none;
	}

	.hamburger span {
		display: block;
		width: 24px;
		height: 3px;
		background-color: #ffffff;
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	/* Hide navigation by default on mobile */
	.layout-navigation-free,
	.layout-navigation-fixed {
		display: none;
		position: static;
		width: 100%;
		height: auto;
		top: auto;
		min-height: 0;
	}

	/* Open nav: React sets .mobile-nav-open on .App; Razor uses #mobile-nav-toggle:checked */
	.App.mobile-nav-open .layout-navigation-free,
	.mobile-nav-toggle:checked ~ #layout-wrapper .layout-navigation-free {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(244, 240, 250, 0.97);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 1050;
		padding: 88px 24px 24px;
		overflow-y: auto;
		height: auto;
		width: 100%;
	}

	/* Hamburger transforms to X when nav is open. Bars are 3px tall with
	   6px gaps; centers sit at ~y=15 / 24 / 33 inside the 48px button.
	   Translating top/bottom bars by 9px makes them meet at the center
	   (y=24) for a clean × shape. */
	.App.mobile-nav-open .hamburger span:nth-child(1),
	.mobile-nav-toggle:checked ~ .hamburger span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.App.mobile-nav-open .hamburger span:nth-child(2),
	.mobile-nav-toggle:checked ~ .hamburger span:nth-child(2) {
		opacity: 0;
	}
	.App.mobile-nav-open .hamburger span:nth-child(3),
	.mobile-nav-toggle:checked ~ .hamburger span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}

	/* Disable the desktop neon_hover/glow animations on mobile menu items.
	   Touch devices latch :hover unpredictably on tap, which makes the
	   infinite-iteration animation appear to flash on/off (most obvious
	   on the News button, whose hover doesn't also swap the bg image). */
	#menuHome:hover,
	#menuRules:hover,
	#menuCompetitorsCorner:hover,
	#menuGallery:hover,
	#menuArchive:hover,
	#menuAbout:hover {
		animation: none !important;
	}

	#nav ul,
	.zone-navigation {
		width: 100%;
		text-align: center;
	}

	#nav ul li {
		float: none;
		display: block;
		height: auto;
		margin: 0;
	}

	#menuHome, #menuRules, #menuCompetitorsCorner,
	#menuGallery, #menuArchive, #menuAbout {
		position: static !important;
		top: auto !important;
		left: auto !important;
		display: block !important;
		/* Uniform mobile button size — overrides the per-item desktop widths
		   (137/147/381/184/189/212) so all buttons line up as a tidy
		   equal-width column instead of a jagged variable-width stack. The
		   381px "Problems" button would otherwise overflow most phone
		   viewports. */
		width: 260px !important;
		max-width: calc(100% - 24px);
		height: 58px !important;
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		margin: 8px auto !important;
		vertical-align: top;
		float: none !important;
	}

	#menuHome { margin-left: auto; }

	#layout-content,
	.aside-2 #layout-content {
		width: auto;
		max-width: 100%;
		margin: 0 16px;
		float: none;
		display: block;
	}

	#content, #problems-content {
		margin-top: 16px;
		margin-bottom: 16px;
		font-size: 17px;
	}

	#problems-content {
		margin-left: 0;
		margin-right: 0;
	}

	.problemStatementWrapper {
		width: auto;
		max-width: 100%;
		margin-left: 0;
	}

	.separator,
	.separator2,
	.separatorBottom {
		width: 100%;
		margin-left: 0;
	}

	.separatorDate {
		width: 100%;
	}

	.blog-posts {
		max-width: 100%;
	}

	.blog-posts .blog-post .metadata .published {
		width: 100%;
	}

	#aside-second {
		display: none;
	}

	#fb-wrapper,
	#fb-wrapper.fixed {
		position: static;
		width: auto;
		top: auto;
	}

	.fb-like {
		float: none;
		margin-top: 0;
	}

	.problemSubmitButton,
	.problemSubmitButton:focus {
		max-width: 100%;
	}

	#submitFilename,
	#submitStatusMessage,
	#submissionStatusInfo {
		display: block;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	#content, #problems-content {
		font-size: 16px;
	}

	#layout-content,
	.aside-2 #layout-content {
		margin: 0 10px;
	}

	#countDown {
		font-size: 13px;
	}
}