/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
	display: block;
}

body
{
	line-height: 1;
}

ol, ul
{
	list-style: none;
}

blockquote, q
{
	quotes: none;
}

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

table
{
	border-collapse: collapse;
	border-spacing: 0;
}




/* SELF-CLEARING FLOATS */
.wrapper:after,
.cf:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.wrapper
,.cf
{
	zoom: 1;
}
.clfl { clear: both; }



/* General */

.no-display
{
	display: none;
}

.invisibleBlock
{
	position: absolute;
	visibility: hidden;
	width: 100%;
}

html
{
	background-color: rgb(112,4,4);
}

body
{
	background: #2b0000 url("../../Gfx/Frontpage/HeaderBg.png") center;
	font-family: "Open Sans", Verdana;
	color: white;

	position: relative; /* this rule is for child element with position:absolute to be able to set their width relative to body width and not viewport (window) width. */

	/*	min-width: 320px;
		This is minimal (adequate) width that we support.
		Setting this property helps avoid ugly downsizes during development */
	min-width: 320px;
}

a
{
	color: white;
}

.wrapper
{
	margin: 0 auto;
	width: 978px;
	max-width: 96%;
	padding: 0 1.6359918200409%; /* 16px / 978px */
	position: relative;
}

div.h1
{
	text-transform: uppercase;
	font-size: 2em;
}

h2
{
	font-size: 1.2em;
}

.button
{
	border-radius: 4px;
	background-color: rgb(193, 30, 47);
	color: white;
	text-transform: uppercase;
	font-size: 1.1em;
	width: 10.2em; /* Relative to parent:  10.2*1.1=11.22 */
	height: 1em; /* Relative to parent:  1*1.1=1.1 */
	padding: 0.58em 0; /* Relative to parent:  0.58*1.1=0.638  0*1.1=0 */
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

	.button:hover
	{
		background-color: rgb(202, 93, 95);
	}

.button-block
{
	background-repeat: no-repeat;
	background-position: 0.7em 50%;
	border-radius: 2px;
	padding: 0.6em 0.6em 0.6em 3.2em;
	text-align: left;
	font-size: 0.8em;
	text-transform: inherit;
	color: black;
}

	.button-block span
	{
		display: block;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 1.4em;
		margin-bottom: 0.2em;
	}

.button-sand
{
	background-color: rgb(224, 202, 177);
	color: rgb(0, 0, 0);
}

	.button-sand:hover
	{
		background-color: rgb(230, 212, 193);
	}

.button-close
{
	width: 23px;
	height: 19px;
	border: 0 none;
	padding: 0;
	background: url("../../Gfx/Frontpage/CloseButton.png") no-repeat center center;
	cursor: pointer;
	outline: 0 none;
}

.button-login
{
	background: url("../../Gfx/Frontpage/LoginButton.png") no-repeat center center;
	width: 29px;
	height: 2.25em; /* 36px/16px */
	position: absolute;
	font-size: 1em;
	right: 0.2em;
	top: 1.1em;
	cursor: pointer;
	padding: 0;
	border: none;
}

.textbox
{
	border-radius: 4px;
	background-color: white;
	color: black;
	font-size: 1em;
	width: 9.62em; /* Relative to parent:  9.62*1=9.62 */
	height: 1.25em; /* 20px/16px */
	padding: 0.57em 0.8em; /* 9.12px (Opera rounds 0.5625em to 0.56em and then 8.96px to 8px) /16px Relative to parent:  0.8*1=0.8 */
	text-decoration: none;
	display: inline-block;
	border: 0;
	vertical-align: middle; /* IE8-IE10 fix that aligns input-text and input-password (that share inline container) to same vertical level. The problem is that those elements have different baselines. */
}

.spcr
{
	margin-right: 1em;
}

.textbox.spcr
{
	margin-right: 1.1em;
}




/* Header */

section.header
{
	background-image: url("../../Gfx/Frontpage/HeaderShadow.png");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	position: relative; /* This is required for "overflow: hidden; " to work properly in IE7. */
}

	section.header .wrapper
	{
		text-align: right;
		background: transparent url("../../Gfx/Frontpage/HeaderCoupleNice.png") no-repeat;
		background-size: 330px;
		position: relative;
		height: auto !important;
	}

	section.header .nice
	{
		background: url("../../Gfx/Frontpage/HeaderCoupleNice.png") no-repeat;
	}

	section.header .nice2
	{
		background: url("../../Gfx/Frontpage/HeaderCoupleNice2.png") no-repeat;
	}

	section.header .logo a img
	{
		max-width: 100%;
		margin-top: 1.4em;
	}

	section.header div.h1
	{
		font-weight: normal; /* Fixes "font-weight: bold;" render in element h1 in IE7 even if inherited value is "normal". */
		margin-top: 0.7em;
	}

	section.header .titles
	{
		margin-bottom: 1em;
	}

	section.header h2
	{
		font-weight: normal; /* Fixes "font-weight: bold;" render in element h2 in IE7 even if inherited value is "normal". */
		margin: 0.25em 1em 0.25em 0;
		display: inline-block;
		*display: inline; /* IE7 hack for "display: inline-block;" */
		zoom: 1; /* IE7 hack for "display: inline-block;" */
	}

		section.header h2:last-child
		{
			margin-right: 0;
		}

	section.header .top.landing {
		margin-bottom: 125px;
	}

	.login-buttons
	{
		position: relative;
		height: 5.4em;
	}

	section.login-buttons > section
	{
		padding: 1em 0 2em;
	}

	.login-buttons .login
	{
		position: relative;
		display: none;
	}

		.login-buttons .login input[type=password]
		{
			padding-right: 2.125em; /* 34px/16px */
			width: 8.295em; /* .textbox width reduced by current padding-right */
		}

	.login-buttons label.placeholder
	{
		position: absolute;
		left: 0.8em;
		top: 1.65em;
		color :#969696;
		text-transform: uppercase;
	}

	.login-buttons input[type=password] + label.placeholder
	{
		left: 55.5%;
	}

	.login-buttons .button-close
	{
		position: absolute;
		right: 0;
		top: 1em;
		margin-top: -23px;
	}

	.login-buttons .info-bubble
	{
		width: 70%;
		z-index: 110;
		position: absolute;
	}

		.login-buttons .info-bubble .message-text
		{
			background: #c11d2f;
			padding: 1em;
			border-radius: 2px;
			font-size: 0.75em; /* 12px / 16px */
			font-weight: bold;
			text-transform: uppercase;
			overflow: hidden;
			text-align: center;

			-webkit-box-shadow: 2px 2px 5px black;
			box-shadow:         2px 2px 5px black;
		}

		.login-buttons .info-bubble .arrow
		{
			width: 12px;
			height: 12px;
			background-color: #c11d2f;
			border: none;
			position: absolute;
			float: right;
			bottom: -5px;
			right: 25%;

			/* IE8+ - must be on one line, unfortunately */
			-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
			margin-left: -5px;
			margin-top: -5px;

			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
			box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
		}

	.login .forgot-login-link
	{
		position: absolute;
		left: 0;
		bottom: 1em;
		font-size: 0.75em;
		text-decoration: none;
		text-transform: uppercase;
		color: #ff8a00;
	}

	.login .button-close
	{
		display: none;
	}

	.forgot-login
	{
		display: none;
		position: relative;
	}

		.forgot-login > .button
		{
			vertical-align: middle;
			height: 1.13636em; /*20px / 17.6px*/
			padding: 0.517993em 0; /*9.11667px / 17.6px*/
		}

	.login-buttons .loader
	{
		position: absolute;
		top: 0;
		right: 0;
		height: 1em;
		display: none;
	}

	.login-buttons .loader .loader-box
	{
		width: 21.4em;
		opacity: 0.6;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* IE 5.5+*/
		background-image: url("../../Gfx/Frontpage/Loader_128x015.gif");
		background-position: center;
		background-repeat: no-repeat;
	}


/* Main sections */

.main-sections
{
	position: relative; /* Make anchor for descendants with "position: absolute; ". */
	z-index: 1; /* This is required for "position: relative; " not to lose gained stack level value in IE7. */
}




/* Mosaic */

section.mosaic
{
	position: relative; /* For descendant with "position: absolute; ". */
}

	section.mosaic .pictures
	{
		height: 17.5em; /* (272+4*2)/16=17.5em */
		overflow: hidden;
		position: relative; /* For IE7. This is required for "overflow: hidden; " to work properly in IE7. */
		background: rgb(220, 202, 181) center center repeat-x;
	}
	section.mosaic .pictures.precise-grid
	{
		background-image: url("../../Gfx/Frontpage/MosaicInitial_Normal.jpg");
	}

		section.mosaic .pictures .centered
		{
			position: relative;
			left: 50%;
			width: 0;
			z-index: 1;
		}

			section.mosaic .pictures .centered .image-box
			{
				position: absolute;
				padding: 0.25em; /* 4/16=0.25 */
				background: rgb(220, 202, 181);
			}

			section.mosaic .pictures .centered .row0
			{
				top: 0;
			}

			section.mosaic .pictures .centered .row1
			{
				top: 5.75em;
			}

			section.mosaic .pictures .centered .row2
			{
				top: 11.5em;
			}

			section.mosaic .pictures .centered .size0
			,section.mosaic .pictures .centered .size0 .image
			{
				width: 3.9375em; /* 63/16=3.9375 */
				height: 5.5em; /* 88/16=5.5 */
			}

			section.mosaic .pictures .centered .size1
			,section.mosaic .pictures .centered .size1 .image
			{
				width: 8.125em; /* 130/16=8.125 */
				height: 11.25em; /* 180/16=11.25 */
			}

			section.mosaic .pictures .centered .size2
			,section.mosaic .pictures .centered .size2 .image
			{
				width: 12.3125em; /* 197/16=12.3125 */
				height: 17em; /* 272/16=17 */
			}

	section.mosaic .textoutertable
	{
		position: absolute;
		top: 0;
		height: 17.5em;
		display: table;
		width: 100%;
		z-index: 2;
	}

	section.mosaic .textouter
	{
		display: table-cell;
		vertical-align: middle;
		*position: absolute; /* For IE7 to implement vertical centering. */
		*top: 50%; /* For IE7 to implement vertical centering. */
	}

	section.mosaic .text
	{
		*position: relative; /* For IE7 to implement vertical centering. */
		*top: -50%; /* For IE7 to implement vertical centering. */
		margin: 0 auto;
		width: 45em;
		height: 6.8em;
		background: rgba(35, 3, 4, 0.76);
		-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C1230304,endColorstr=#C1230304);
		    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C1230304,endColorstr=#C1230304);
		zoom: 1;
		border-radius: 4px;
		text-align: center;
	}

		section.mosaic .text div.h1
		{
			font-weight: normal; /* Fixes "font-weight: bold;" render in element h1 in IE7 even if inherited value is "normal". */
			font-size: 2.3em;
			padding-top: 0.4em;
		}

		section.mosaic .text h2
		{
			font-weight: normal; /* Fixes "font-weight: bold;" render in element h2 in IE7 even if inherited value is "normal". */
			font-size: 1.5em;
			text-transform: uppercase;
			padding-top: 0.54em;
		}

	section.mosaic .left-shadow,
	section.mosaic .right-shadow {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 14%;
		z-index: 2;
	}

	section.mosaic .left-shadow {
		left: 0;
		background-image: -moz-linear-gradient(right, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -webkit-gradient(linear, right top, left top, color-stop(1%,rgba(0,0,0,1)), color-stop(47%,rgba(0,0,0,0.5)), color-stop(97%,rgba(0,0,0,0)));
		background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -o-linear-gradient(right, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -ms-linear-gradient(right, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: linear-gradient(to right, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1d0000', endColorstr='#00350000', GradientType=1 );
	}

	section.mosaic .right-shadow {
		right: 0;
		background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,1)), color-stop(47%,rgba(0,0,0,0.5)), color-stop(97%,rgba(0,0,0,0)));
		background-image: -webkit-linear-gradient(right, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -o-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: -ms-linear-gradient(left, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		background-image: linear-gradient(to left, rgba(0,0,0,1) 1%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 97%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001d0000', endColorstr='#ff350000', GradientType=1 );
	}




/* Info */

section.info
{
	background: rgb(53,0,0);
	background: -moz-linear-gradient(top, rgb(29,0,0) 0%, rgb(53,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(29,0,0)), color-stop(100%,rgb(53,0,0)));
	background: -webkit-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: -o-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: -ms-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: linear-gradient(to bottom, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d0000', endColorstr='#350000', GradientType=0 );
	padding: 2.5em 0 1em;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

	section.info .profile-create-button
	{
		position: absolute;
		left: 0;
		top: 13.4em;
	}

	section.info .info-mobile-button
	{
		width: 20%;
		height: 3.8em;
		float: right;
	}

	section.info ul.newsnav
	{
		width: 70%;
		position: relative;
		float: left;
	}

		section.info .newsnav article
		{
			position: absolute;
			top: 0;
			float: left;
			width: 55%;
			display: none;
			height: 13.7em;
			overflow: hidden;
		}

		section.info .newsnav li.active article
		{
			display: inline-block;
		}

			section.info .newsnav article header
			{
				font-size: 1.5em;
				text-transform: uppercase;
				margin-bottom: 1em;
			}

				section.info .newsnav article section
				{
					font-size: 0.9em;
				}

		section.info ul.newsnav li
		{
			display: block;
		}

			section.info ul.newsnav li .nav-item
			,.footer ul.newsnav li .nav-item
			{
				background: rgb(137, 33, 33);
				border-radius: 2px;
				font-size: 0.8em;
				padding: 0.8em 1.2em;
				margin-bottom: 0.5em;
				min-height: 3.4em;
				cursor: pointer;
				position: relative;
				margin-left: 3%;
				width: 37%;
				float: right;
				clear: right;
			}

				section.info ul.newsnav li .nav-item div.h1
				{
					font-size: 1.3em;
					margin-bottom: 0.2em;
				}

				section.info ul.newsnav li.active .nav-item, section.info ul.newsnav li:hover .nav-item
				,.footer ul.newsnav li.active .nav-item, .footer ul.newsnav li:hover .nav-item
				{
					background: rgb(223, 201, 177);
					color: black;
				}

				section.info ul.newsnav span
				,.footer ul.newsnav span
				{
					position: absolute;
					width: 9px;
					height: 18px;
					background: url("../../Gfx/Frontpage/BoxArrow.png") no-repeat;
					left: -0.7em;
					top: 1.4em;
					display: block;
				}

				section.info ul.newsnav li.active span, section.info ul.newsnav li:hover span
				{
					background: url("../../Gfx/Frontpage/BoxArrowSand.png") no-repeat;
				}


	section.info .statistics
	{
		width: 25%;
		float: right;
	}

		section.info .statistics div.h1
		{
			font-size: 1.4em;
			margin-bottom: 0.6em;
		}

		section.info .statistics ul
		{
			height: 10.9em;
		}

		section.info .statistics li
		{
			padding-bottom: 0.7em;
		}

			section.info .statistics li a
			{
				text-decoration: none;
			}

			section.info .statistics li strong
			{
				font-weight: bold;
			}

	.infoshadow
	{
		content: "";
		position: absolute;
		bottom: 3px;
		width: 98%;
		height: 4em;
		background: rgb(53,0,0);
		border-radius: 40em / 20px;
		box-shadow: 0 0 2em 0.4em black;
	}

	section.info .wrapper
	{
		padding-left: 0;
	}


/* Landing Info*/

.landing-info .left-shadow,
.landing-info .right-shadow
{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 14%;
}
.landing-info .left-shadow
{
	left: 0;
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0)));
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000', GradientType=1 );
}
.landing-info .right-shadow
{
	right: 0;
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5)));
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000', GradientType=1 );
}


.landing-login
{
	position: absolute;
	right: 8.9em;
	top: -7.8em;
	width: 40em;
	height: 9em;
	z-index: 2;
}

.landing-login .landing-login-content-box
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.landing-login .landing-login-background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 9em;
	background: rgb(53,0,0);
	background: -moz-linear-gradient(top, rgb(90,0,0) 0%, rgb(40,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(90,0,0)), color-stop(100%,rgb(40,0,0)));
	background: -webkit-linear-gradient(top, rgb(90,0,0) 0%,rgb(40,0,0) 100%);
	background: -o-linear-gradient(top, rgb(90,0,0) 0%,rgb(40,0,0) 100%);
	background: -ms-linear-gradient(top, rgb(90,0,0) 0%,rgb(40,0,0) 100%);
	background: linear-gradient(to bottom, rgb(90,0,0) 0%,rgb(43,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5A0000', endColorstr='#280000', GradientType=0 );
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

	.landing-login .ui-dropdownchecklist, .landing-login .dk_container
	{
		width: 100%;
	}

	.landing-login .ui-dropdownchecklist-item input[type="checkbox"]:not(#foo) + .ui-dropdownchecklist-text:not(#foo)
	{
		background: url("../../Gfx/Frontpage/Checkbox.png") no-repeat scroll 92% center;
	}

	.landing-login .landing-login-content
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 95%;
		height: 100%;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.landing-login div.h1
	{
		font-size: 1.9em;
		width: 100%;
		text-align: left;
		margin-top: 0.6em;
		margin-bottom: 0.2em;
	}

	.landing-login .input-block
	{
		position: relative;
		text-align: left;
		float: left;
		width: 25%;
		margin-right: 1.25%;
	}

		.landing-login .input-block .label-box
		{
			padding-top: 0.2em;
			padding-bottom: 0.2em;
			white-space: nowrap;
			overflow: hidden;
		}

		.landing-login .input-block .input-box select
		{
			visibility: hidden;
			top: 0;
			position: relative;
			height: 2.8em;
		}

		.landing-login .input-block .input-box .dk_container
		{
			margin-top: 1px;
		}

	.landing-login .button-container
	{
		position: relative;
		float: left;
		width: 20%;
		padding-top: 1.5em;
	}

		.landing-login .button-container .landing-next-button
		{
			font-size: 1.125em;
			width: 100%;
			height: 2.36em;
			border: 0 none;
			cursor: pointer;
			color: #fff;
			border-radius: 5px;
			background-color: #c11e2f;
			background-repeat: no-repeat;
			outline: 0 none;
			background-image: url("../../Gfx/Frontpage/NavigationButtonNext.png");
			background-position: right center;
			padding-right: 2em;
		}

.landing-info
{
	z-index: 1;
}

section.landing-info1
{
	background: rgb(53,0,0);
	background: -moz-linear-gradient(top, rgb(40,0,0) 0%, rgb(53,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(40,0,0)), color-stop(100%,rgb(53,0,0)));
	background: -webkit-linear-gradient(top, rgb(40,0,0) 0%,rgb(53,0,0) 100%);
	background: -o-linear-gradient(top, rgb(40,0,0) 0%,rgb(53,0,0) 100%);
	background: -ms-linear-gradient(top, rgb(40,0,0) 0%,rgb(53,0,0) 100%);
	background: linear-gradient(to bottom, rgb(40,0,0) 0%,rgb(53,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#280000', endColorstr='#350000', GradientType=0 );
	padding: 2.5em 0 1em;
	position: relative;
	overflow: hidden;
}

	section.landing-info1 h1.splash-title
	{
		font-size: 1.5em;
		text-transform: uppercase;
		margin-bottom: 0.2em;
	}

	section.landing-info1 h2.splash-subtitle
	{
		font-size: 1.2em;
		margin-bottom: 0.5em;
	}

	section.landing-info1 .splash-content
	{
		font-size: 1em;
	}


section.landing-info2
{
	background: rgb(53,0,0);
	background: -moz-linear-gradient(top, rgb(29,0,0) 0%, rgb(53,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(29,0,0)), color-stop(100%,rgb(53,0,0)));
	background: -webkit-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: -o-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: -ms-linear-gradient(top, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	background: linear-gradient(to bottom, rgb(29,0,0) 0%,rgb(53,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d0000', endColorstr='#350000', GradientType=0 );
	padding: 2.5em 0 1em;
	position: relative;
	overflow: hidden;
}

	.landing-info2 div.h1
	{
		font-size: 1.5em;
	}

	section.landing-info2 ul.newsnav
	{
		width: 100%;
	}

		section.landing-info2 .newsnav article
		{
			position: absolute;
			top: 0;
			float: left;
			width: 55%;
			display: none;
			height: 13.7em;
			overflow: hidden;
		}

		section.landing-info2 .newsnav li.active article
		{
			display: inline-block;
		}

			section.landing-info2 .newsnav article header
			{
				font-size: 1.5em;
				text-transform: uppercase;
				margin-bottom: 1em;
			}

				section.landing-info2 .newsnav article section
				{
					font-size: 0.9em;
				}

		section.landing-info2 ul.newsnav li
		{
			display: block;
		}

			section.landing-info2 ul.newsnav li .nav-item
			{
				background: rgb(137, 33, 33);
				border-radius: 2px;
				font-size: 0.8em;
				position: relative;
				width: 67%;
				float: right;
				clear: right;
			}

			section.landing-info2 ul.newsnav li .nav-content
			{
				margin: 1.5%;
				text-align: justify;
			}

				section.landing-info2 ul.newsnav li div.h1
				{
					font-size: 1.3em;
					margin-bottom: 0.2em;
					width: 30%;
					float: left;
				}

				section.landing-info2 ul.newsnav li.active .nav-item, 
				section.landing-info2 ul.newsnav li:hover .nav-item
				{
					background: rgb(137, 33, 33);
					color: white;
				}

				section.landing-info2 ul.newsnav span
				{
					position: absolute;
					width: 9px;
					height: 18px;
					background: url("../../Gfx/Frontpage/BoxArrow.png") no-repeat;
					left: -0.7em;
					top: 1.4em;
					display: block;
				}

				section.landing-info2 ul.newsnav li.active span,
				section.landing-info2 ul.newsnav li:hover span
				{
					background: url("../../Gfx/Frontpage/BoxArrow.png") no-repeat;
				}

	.landing-info2 .default-start-buttons
	{
	}

		.landing-info2 .default-start-buttons .box-title
		{
			float: left;
			font-size: 1.5em;
			padding: 1em 0;
			text-transform: uppercase;
		}

		.landing-info2 .default-start-buttons .buttons-box
		{
			float: right;
		}


section.landing-footer
{
	height: 2em;
	background: rgb(53,0,0);
	background: -moz-linear-gradient(top, rgb(70,0,0) 0%, rgb(85,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(70,0,0)), color-stop(100%,rgb(85,0,0)));
	background: -webkit-linear-gradient(top, rgb(70,0,0) 0%,rgb(85,0,0) 100%);
	background: -o-linear-gradient(top, rgb(70,0,0) 0%,rgb(85,0,0) 100%);
	background: -ms-linear-gradient(top, rgb(70,0,0) 0%,rgb(85,0,0) 100%);
	background: linear-gradient(to bottom, rgb(70,0,0) 0%,rgb(85,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#460000', endColorstr='#550000', GradientType=0 );
	padding: 2.5em 0 1em;
	position: relative;
	overflow: hidden;
}


/* Footer */

.footer
{
	min-height: 16.125em;
	background: rgb(85,4,4);
	background: -moz-linear-gradient(top, rgb(85,4,4) 0%, rgb(112,4,4) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(85,4,4)), color-stop(100%,rgb(112,4,4)));
	background: -webkit-linear-gradient(top, rgb(85,4,4) 0%,rgb(112,4,4) 100%);
	background: -o-linear-gradient(top, rgb(85,4,4) 0%,rgb(112,4,4) 100%);
	background: -ms-linear-gradient(top, rgb(85,4,4) 0%,rgb(112,4,4) 100%);
	background: linear-gradient(to bottom, rgb(85,4,4) 0%,rgb(112,4,4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#550404', endColorstr='#700404', GradientType=0 );
	padding-top: 3em;
	overflow: hidden;
}

	.footer article
	{
		display: block;
		float: left;
		margin-bottom: 30px;
	}

		.footer article header
		{
			text-transform: uppercase;
			font-size: 1.5em; /* 24px / 16px */
			margin-bottom: 0.6em;
		}

		.footer article section
		{
			font-size: 0.75em; /* 12px / 16px */
			line-height: 1.3em;
		}

	.footer .exp-block
	{
		width: 17%;
		text-align: center;
		padding-right: 3%;
	}

		.footer .exp-block section.dating-logo
		{
			margin: 0 auto;
		}

	.footer .dating-block
	{
		width: 20%;
	}

	.footer .contacs-block
	{
		width: 30%;
		margin-left: 3%;
		text-transform: uppercase;
	}

		.footer .contacs-block header,
		.footer .contacs-block section
		{
			margin-left: 5%;
		}

		.footer .contacs-block section a,
		.footer .contacs-block section span
		{
			font-weight: bold;
		}

		.footer .contacs-block section span
		{
			font-size: 1.7em;
		}

	.footer .support-block
	{
		float: right;
		width: 25%; /* 244.5px / 978px */
		border-radius: 2px;
		background-color: rgb(224, 202, 177);
		color: #000;
	}

		.footer .support-block span
		{
			background: url("../../Gfx/Frontpage/BoxArrowSand.png") no-repeat;
			width: 9px;
			height: 18px;
			float: left;
			margin-left: -9px;
			margin-top: 8px;
		}

		.footer .support-block header,
		.footer .support-block section
		{
			margin-left: 5.73770491803279%; /* 14px / 244px*/
			margin-right: 5.73770491803279%; /* 14px / 244px*/
		}

		.footer .support-block header
		{
			margin-top: 5.73770491803279%; /* 14px / 244px*/
			font-size: 0.875em; /* 14px / 16px */
			font-weight: bold;
		}

		.footer .support-block section
		{
			margin-bottom: 5.73770491803279%; /* 14px / 244px*/
			font-size: 0.75em; /* 12px / 16px */
		}

	.footer .profile-create-button
	,.footer ul.newsnav
	{
		display: none;
	}

/* Dating logo */

section.dating-logo
{
	text-align: center;
	font-size: 16px !important;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	max-width: 200px;
}

	section.dating-logo .years-logo
	{
		width: 99px;
		height: 91px;
		background: url("../../Gfx/Frontpage/years-logo.png") no-repeat center center;
		margin: 0 auto;
	}

	section.dating-logo .years-logo .year
	{
		font-size: 30px;
		line-height: 30px;
		padding: 13px 0 2px;
	}

	section.dating-logo .dating
	{
		padding-top: 7px;
		margin: 0 auto;
		text-transform: none;
	}


@media screen and (max-width: 978px)
{
	section.header .wrapper
	{
		background-position: -12em 0;
		max-width: none;
		width: auto;
	}

	section.info .info-mobile-button
	{
		overflow: hidden;
		font-size: 0.7em;
		height: 4.5em;
	}

	section.info .info-mobile-button span
	{
		font-size: 1.6em;
	}


		.landing-info2 .default-start-buttons .box-title
		{
			float: none;
			font-size: 1.5em;
			z_font-size: 1.3em;
			padding: 0;
		}

		.landing-info2 .default-start-buttons .buttons-box
		{
			float: none;
			text-align: right;
		}
}




@media screen and (max-width: 800px)
{
	.wrapper
	{
		max-width: 94%;
	}


	section.header .wrapper
	{
		background-position: -18em 0;
	}

	section.mosaic .text
	{
		width: 36em;
		height: 6em;
	}

		section.mosaic .text div.h1
		{
			font-size: 2em;
			padding-top: 0.4em;
		}

		section.mosaic .text h2
		{
			font-size: 1.2em;
			padding-top: 0.54em;
		}

	section.info .info-mobile-button
	{
		width: 25%;
		overflow: hidden;
		font-size: 0.7em;
		height: 3.6em;
		float: left;
	}

	section.info .info-mobile-button span
	{
		font-size: 1.2em;
	}

	section.info .statistics
	{
		width: 100%;
		clear: both;
		float: none;
		display: block;
	}

		section.info .statistics div.h1
		{
			margin-top: 2em;
		}

		section.info .statistics ul
		{
			height: auto;
			margin-bottom: 1em;
		}

		section.info .statistics ul li
		{
			display: inline;
			margin-right: 1em;
			white-space: nowrap;
		}


	section.info .news article
	{
		width: 60%;
		height: 13.7em;
	}

	section.info ul.newsnav
	{
		width: 100%;
	}

		section.info ul.newsnav li
		{
			width: auto;
		}


		.landing-info1 .splash-title
		{
			font-size: 1.7em;
		}

		.landing-info2 div.h1
		{
			font-size: 1.7em;
		}


.landing-login
{
	width: 84%;
}

	.landing-login div.h1
	{
		font-size: 1.8em;
	}


	.infoshadow
	{
		width: 97%;
		height: 4em;
	}

	.footer .exp-block
	,.footer .contacs-block
	{
		width: 61%;
		text-align: center;
		float: left;
		clear: left;
	}

	.footer .contacs-block
	,.footer .contacs-block header
	,.footer .contacs-block section
	{
		margin-left: 0;
	}

	.footer .dating-block
	,.footer .support-block
	{
		width: 34%;
		float: right;
		clear: right;
	}
}




@media screen and (max-width: 740px)
{
	section.landing-info1
	{
		padding-top: 5em;
	}

	.landing-login
	{
		width: 85%;
	}

		.landing-login div.h1
		{
			font-size: 1.5em;
			margin-left: 1%;
			margin-right: 1%;
		}

		.landing-login .input-block,
		.landing-login .button-container
		{
			width: 48%;
			margin-left: 1%;
			margin-right: 1%;
		}

		.landing-login .landing-login-background
		{
			height: 11.5em;
		}

			section.landing-info2 ul.newsnav li div.h1
			{
				font-size: 1.3em;
				width: 100%;
				float: left;
			}

			section.landing-info2 ul.newsnav li .nav-item
			{
				width: 100%;
			}

	.footer article
	{
		width: 48.4%;
	}
}




/* reset cols to 2-column */
@media screen and (max-width: 600px)
{
	.wrapper
	{
		max-width: 93%;
	}


	section.header .wrapper
	{
		background: none;
		min-height: 0;
		height: auto;
	}

	section.header .logo a img
	{
		width: 40%;
	}

	section.header div.h1
	{
		font-size: 1.6em;
	}

	section.header h2
	{
		font-size: 1em;
	}

	section.header .buttons
	,section.header .login
	{
		height: 2.376em; /* This value should be set exactly to height of content. */
			/* This is required to aviod slightly different rounded content height values that is used for rendering in some browsers. */
			/* The issue can be reproduced in IE7. There is also minor issue in IE8-IE10. */
	}

	section.mosaic .text
	{
		width: 29em;
		height: 5em;
	}

		section.mosaic .text div.h1
		{
			font-size: 1.7em;
			padding-top: 0.4em;
		}

		section.mosaic .text h2
		{
			font-size: 0.9375em;
			padding-top: 0.54em;
		}

	section.info ul.newsnav li div.h1
	{
		font-size: 1em;
		font-weight: bold;
		margin-bottom: 0.2em;
	}

	section.info .newsnav article
	{
		width: 50%;
	}

	section.info .statistics div.h1
	{
		margin-top: 3em;
	}

	section.info .info-mobile-button
	{
		width: 30%;
	}


	section.landing-info1
	{
		padding-top: 5em;
	}

		section.landing-info1 .splash-title
		{
			font-size: 1.7em;
		}

		section.landing-info2 div.h1
		{
			font-size: 1.7em;
		}


	.landing-login
	{
		width: 90%;
	}

		.landing-login div.h1
		{
			font-size: 1.3em;
		}

		.landing-login .landing-login-content
		{
			padding-left: 1%;
			padding-right: 1%;
			width: 98%;
		}
}




/* reset cols to fullwidth */
@media screen and (max-width: 480px)
{
	.wrapper
	{
		max-width: 90%;
	}


	section.header .wrapper
	{
		min-height: 0;
		height: auto;
		max-width: 90%;
		text-align: left;
	}

	section.header .logo a img
	{
		width: 62.5%; /* 200px / 320px [in mobile design] */
	}

	section.header .logo div.h1
	,section.header .logo span
	{
		max-width: 90%;
		text-align: left;
	}

	section.header div.h1
	{
		font-size: 1em;
		font-weight: bold;
	}

	section.header h2
	{
		font-size: 0.7em;
	}

	.login-buttons
	{
		height: 5em;
	}

	.spcr
	{
		margin-right: 0;
	}

	.textbox.spcr
	{
		margin-right: 0;
	}

	.login-buttons .buttons
	,.login-buttons .login
	,.login-buttons .forgot-login
	{
		height: 1.8em; /* This value should be set exactly to height of content. */
			/* This is required to aviod slightly different rounded content height values that is used for rendering in some browsers. */
			/* The issue can be reproduced in IE7. There is also minor issue in IE8-IE10. */
		width: 100%;
	}

		.login-buttons .button
		,.login-buttons .textbox
		{
			font-size: 0.9em;
			height: 1.2em;
			padding: 0.5em 0.2em;
		}

		.login-buttons label.placeholder
		{
			font-size: 0.9em;
			left: 0.2em;
			top: 1.7em;
		}

		.login-buttons input[type=password] + label.placeholder
		{
			left: 47%;
		}

		.login-buttons .button-login
		{
			position: relative;
			height: 1.7em;
			top: 0;
			float: right;
			margin-top: -1.8em;
		}

		.login-buttons .button-sand
		,section .login .textbox[type="text"]
		,section .forgot-login .textbox[type="text"]
		{
			width: 43%;
			float: left;
			margin-right: 0;
		}

		.login-buttons .button-red
		,.login-buttons .login .textbox[type="password"]
		,section .forgot-login .reset-password-button
		{
			float: right;
			width: 52%;
		}

		.login-buttons .login .textbox[type="password"]
		{
			width: 41%;
			padding-right: 12%;
		}

	.login-buttons .loader
	{
		left: 0;
	}

		.login-buttons .loader .loader-box
		{
			width: 100%;
			padding-left: 0;
			padding-right: 0;
		}


	section.mosaic
	{
	}

		section.mosaic .pictures
		{
			height: 6em; /* (88+4*2)/16=6em */
		}
		section.mosaic .pictures.precise-grid
		{
			background-image: url("../../Gfx/Frontpage/MosaicInitial_Small.jpg");
		}
			section.mosaic .pictures .centered
			{
			}

				section.mosaic .pictures .centered .row0
				{
					top: 0;
				}

				section.mosaic .pictures .centered .row1
				{
					top: 0;
				}

				section.mosaic .pictures .centered .row2
				{
					top: 0;
				}

				section.mosaic .pictures .centered .size0
				{
				}

					section.mosaic .pictures .centered .size0 .image
					{
					}

				section.mosaic .pictures .centered .size1
				{
					background: none;
				}

					section.mosaic .pictures .centered .size1 .image
					{
						display: none;
					}

				section.mosaic .pictures .centered .size2
				{
					background: none;
				}

					section.mosaic .pictures .centered .size2 .image
					{
						display: none;
					}

		section.mosaic .textoutertable
		{
			position: static;
			height: auto;
			display: block;
			width: auto;
			padding: 0.75em 0; /* 12/16=0.75em */
			background: rgb(29,0,0);
		}

		section.mosaic .textouter
		{
			display: block;
			*position: static; /* For IE7 to reset vertical centering. */
		}

		section.mosaic .text
		{
			*position: static; /* For IE7 to reset vertical centering. */
			background: none;
			width: 20em;
			height: 3em;
		}

			section.mosaic .text div.h1
			{
				font-size: 1.1em;
				padding-top: 0.4em;
			}

			section.mosaic .text h2
			{
				font-size: 0.6em;
				padding-top: 0.3em;
			}

	section.info
	{
		min-height: 0;
		background: rgb(36, 5, 5);
	}

	section.info .news
	,section.info ul.newsnav
	{
		display: none;
	}

	section.info .info-mobile-button
	{
		width: 86%;
		margin-top: 1em;
		padding-left: 12%;
		padding-right: 2%;
	}

	section.info .profile-create-button
	{
		display: none;
		position: inherit;
		left: auto;
		top:auto;
		height: auto;
		width: 90%;
	}

	section.info .statistics
	{
		margin-top: 1em;
	}

		section.info .statistics div.h1
		{
			display: none;
		}

		section.info .statistics ul li
		{
			margin-right: 0.8em;
			font-size: 1.1em;
		}


	section.landing-info1
	{
		padding-top: 14em;
	}

		section.landing-info1 .splash-title
		{
			font-size: 1.4em;
		}

		section.landing-info2 div.h1
		{
			font-size: 1.4em;
		}


	.landing-login
	{
		width: 90%;
	}

		.landing-login div.h1
		{
			font-size: 1.25em;
			margin-left: 1%;
			margin-right: 1%;
		}

		.landing-login .input-block,
		.landing-login .button-container
		{
			width: 98%;
			margin-left: 1%;
			margin-right: 1%;
		}

		.landing-login .landing-login-background
		{
			height: 21.5em;
		}


	.infoshadow
	{
		display: none;
	}

	.footer
	{
		padding-top: 1em;
		background: rgb(36, 5, 5);
		filter: none;
	}

	.footer article
	{
		margin-bottom: 0;
	}

	.footer .articles
	{
		margin-bottom: 30px;
		position: relative;
	}

	.footer .dating-block
	,.footer .support-block
	{
		display: none;
	}

	.footer .exp-block
	{
		width: 40%;
	}

		.footer .exp-block img
		{
			max-width: 100%;
		}

	.footer .contacs-block
	{
		width: 55%;
		float: right;
		clear: right;
		font-size: 1em;
		text-transform: uppercase;
		white-space: nowrap;
		font-weight: bold;
		line-height: 1.5em;
		text-align: left;
	}

		.footer .contacs-block header
		{
			margin-bottom: 0;
			font-size: 1em;
		}

	.footer .profile-create-button
	{
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 55%;
	}

	.footer ul.newsnav
	{
		display: block;
		float: none;
		clear: left;
		width: auto;
		margin-left: 0;
	}

		.footer ul.newsnav li
		{
			margin-bottom: 0.5em;
			width: auto;
		}

			.footer ul.newsnav li .nav-item
			{
				width: auto;
				float: none;
				margin-left: 0;
			}

			.footer ul.newsnav li article
			{
				display: none;
				width: auto;
				float: none;
			}

			.footer ul.newsnav li.active article
			{
				display: block;
			}

		.footer ul.newsnav li div.h1
		{
			font-size: 1em;
			font-weight: bold;
			margin-bottom: 0.2em;
		}

		.footer ul.newsnav span
		{
			left: auto;
			right: -0.7em;
			background: url("../../Gfx/Frontpage/BoxArrowR.png") no-repeat;
		}

		.footer ul.newsnav li.active span, .footer ul.newsnav li:hover span
		{
			background: url("../../Gfx/Frontpage/BoxArrowSandR.png") no-repeat;
		}

	.footer .clfl
	{
		display: none;
	}
}

@media screen and (max-width: 320px)
{
	.footer .contacs-block
	,.footer .contacs-block header
	{
		font-size: 1em;
	}

	section.header .wrapper
	{
		min-height: 0;
		height: auto;
	}

	section.landing-info1 .splash-title
	{
		font-size: 1.3em;
	}

	section.landing-info2 div.h1
	{
		font-size: 1.3em;
	}

	.landing-login
	{
		height: 21em;
	}
}




/* Create profile section */

.create-profile
{
	overflow: hidden;
	position: absolute; /* This is required for "overflow: hidden; " to work properly in IE7. */
	top: 0;
	width: 100%;
	z-index: 2;
}
.create-profile.opened
{
	position: relative;
}

.create-profile, .create-profile .background
{
	background: #200403;
}

	.create-profile .step-number
	{
		border-top: 1px solid #720000;
		margin-top: 2.7143em;
		margin-bottom: 0.5em;
	}

		.create-profile .step-number .step-title
		{
			font-size: 1.25em;
			line-height: 1em;
			display: inline-block;
			padding: 0 0.2em;
			position: relative;
			top: -0.625em;
		}

		.create-profile .step-number .lock
		{
			display: inline-block;
			height: 1.25em;
			padding: 0 0.3em;
			position: relative;
			top: -0.625em;
		}

		.create-profile .step-number .span-close
		{
			font-size: 0.875em;
			line-height: 19px;
			position: absolute;
			right: 2%;
			top: -10px;
			padding-left: 0.3em;
		}

		.create-profile .step-number .span-close span
		{
			float: left;
		}

		.create-profile .step-number .close-dialog
		{
			background-image: url("../../Gfx/Frontpage/CloseButton.png");
			background-position: center center;
			background-repeat: no-repeat;
			width: 19px;
			margin: 0 0.3em;
			float: left;
		}

	.create-profile .steps
	{
		font-size: 0.875em;
		position: relative;
		z-index: 10;
	}

		.create-profile .steps .step
		{
			width: 100%;
		}

	.create-profile .input-group
	{
		width: 72%;
		float: left;
	}

	.create-profile .input-block
	{
		float: left;
		width: 49.5%;
		height: 5.3571em;
	}

	.create-profile .input-block.relative
	{
		position: relative;
	}

	.create-profile .label-box
	{
		line-height: 2em;
		white-space: nowrap;
		padding-left: 0.5em;
	}

	.create-profile .input-box
	{
		position: relative;
	}

		.create-profile .input-box.required:before
		{
			content: "*";
			line-height: 2.7143em;
			position: absolute;
			left: -1em;
		}

		.create-profile label.placeholder
		{
			line-height: 2.7143em;
			position: absolute;
			top: 0;
			left: 0;
			color: gray;
		}

	.create-profile .input
	{
		height: 2.7143em;
		font-size: 1em;
		line-height: 2.7143em;
		background: #630708;
		border: 0 none;
		padding: 0 3%;
		border-radius: 2px;
		color: #ffffff;
		width: 80%;
		outline: 0 none;
		white-space: nowrap;
		font-family: "Open Sans", Verdana;
	}

	.create-profile span.input
	{
		display: inline-block;
	}

		.create-profile .input.text
		{
			border-bottom: 1px solid #b40001;
			margin-bottom: -1px;
			text-align: left;
		}

			.create-profile .wrong
			{
				border: solid 3px #b40001 !important;
				margin: -3px !important;
				border-radius: 2px;
			}

	.create-profile .birthday
	{
		width: 86%;
		display: inline-block;
		white-space: nowrap;
	}

		.create-profile .birthday > span
		{
			display: inline-block;
			vertical-align: top;
			position: relative;
			width: 32%;
			margin-left: 2%;
		}

			.create-profile .birthday > span:first-child
			{
				margin-left: 0;
			}

		.create-profile .birthday .dk_container
		{
			width: 100%;
		}

			.create-profile .birthday .dk_container .dk_icon
			{
				display: none;
			}

			.create-profile .birthday .dk_options a
			{
				text-indent: 0.5em;
			}

			.create-profile .birthday .dk_container .jspVerticalBar
			{
				width: 1.5em;
			}

	.create-profile .radio input:first-child + label
	{
		margin-right: 1.5em;
	}

	.create-profile .radio input:not(#foo)
	{
		display: none;
	}

	.create-profile .radio input:not(#foo) + label
	{
		padding:0 0 0 25px;
		cursor:pointer;
		background: url("../../Gfx/Frontpage/Radio.png") left center no-repeat;
	}

	.create-profile .radio input:not(#foo):checked + label
	{
		background-image:url("../../Gfx/Frontpage/RadioChecked.png")
	}

	.create-profile select
	{
		display: none;
	}

	.create-profile .ui-dropdownchecklist, .create-profile .dk_container
	{
		width: 86%;
	}

	.create-profile .input-birhday-country /* ie7 fix */
	{
		position: relative;
		z-index: 105;
	}

	.create-profile .input-gender-area /* ie7 fix */
	{
		position: relative;
		z-index: 104;
	}

	.create-profile .input-gender-area .input-area
	{
		display: none;
	}

	.create-profile .input-gender-area .input-zipcode .zipcode-box
	{
		width: 40px;
	}

	.create-profile .input-gender-area .input-zipcode .zipcode-city
	{
		padding-left: 10px;
	}

	.create-profile .terms-box
	{
		clear: both;
		padding-top: 2em;
	}

	.create-profile .terms
	{
		display: inline-block;
		width: 92.07%; /* 93% * 99% = 92.07% */
		background: url("../../Gfx/Frontpage/NettingBg.png") repeat;
	}

		.create-profile .terms .inner
		{
			display: block;
			padding: 0.75em;
		}

		.create-profile .terms input
		{
			float: left;
		}

		.create-profile .terms label
		{
			font-size: 12px;
			line-height: 14px;
			padding-left: 25px;
			display: block;
		}

			.create-profile .terms label a
			{
				color: #ffbd54;
				text-decoration: none;
			}

		.create-profile .terms input:not(#foo)
		{
			display: none;
		}

			.create-profile .terms input:not(#foo) + label
			{
				background:url("../../Gfx/Frontpage/Checkbox.png") 0 0 no-repeat;
			}

			.create-profile .terms input:not(#foo):checked + label
			{
				background-image:url("../../Gfx/Frontpage/CheckboxChecked.png")
			}

	.create-profile .profile-text-block
	{
		float: left;
		width: 92.07%; /* 93% * 99% = 92.07% */
		margin-top: 2em;
	}

	.create-profile .profile-text-box
	{
		background: #630708;
		border-radius: 2px;
	}

		.create-profile .profile-text-box .inner
		{
			padding: 0 1em 1em;
			position: relative;
		}

		.create-profile .profile-text-box .wrap:first-child .inner
		{
			padding-top: 0.5em;
		}

			.create-profile .profile-text-box .inner .validation
			{
				position: absolute;
				top: 0;
				right: -1.5em;
			}

		.create-profile .profile-text-box .profile-text
		{
			width: 100%;
			padding: 0;
			border-radius: 0;
			resize: none;
			overflow: auto;
		}

		.create-profile .profile-text-box .profile-text-headline
		{
			overflow: hidden
		}

		.create-profile .profile-text-box textarea.profile-text
		{
			line-height: 1.5em;
			height: 7.5em;
			margin-top: 0;
			padding-bottom: 0.5em;
			white-space: pre;
			overflow: auto;
			resize: none;
			scrollbar-face-color: #500607;
			scrollbar-base-color: #500607;
			scrollbar-3dlight-color: #500607;
			scrollbar-highlight-color: #500607;
			scrollbar-track-color: #590505;
			scrollbar-arrow-color: #450607;
			scrollbar-shadow-color: #500607;
			scrollbar-darkshadow-color: #490607;
		}

		/* custom scrollbar */
		.create-profile textarea::-webkit-scrollbar
		{
			background: #590505;
		}

		.create-profile textarea::-webkit-scrollbar-thumb
		{
			background: #500607;
		}

		.create-profile .profile-text-box label.placeholder
		{
			top: 0.5em;
			left: 1em;
		}

	.create-profile .profile-internationaltext-box
	{
		display: none;
	}

	.create-profile .profile-text-tip
	{
		float: right;
		font-size: 12px;
		line-height: 14px;
		padding-top: 0.5em;
	}

	.create-profile .profile-tex-tip-title
	{
		font-weight: bold;
	}

	.create-profile .info-box
	{
		margin-top: 2em;
		font-size: 1.143em;
		text-align: center;
		text-transform: uppercase;
	}

	.create-profile .step1 .info-box
	{
		float: right;
		width :27.5%;
		margin-top: 4em;
	}

		.create-profile .info-box header
		{
			font-size: 1.5em; /* 24px / 14px */
			margin-bottom: 0.4em;
		}

		.create-profile .info-box section
		{
			font-size: 1.125em; /* 18px / 16px */
		}

		.create-profile .info-box .phone
		{
			font-size: 1.667em; /* 30px / 18px */
		}

		.create-profile .info-box .dating-logo
		{
			margin: 4em auto 0;
		}

	.create-profile .logo-column
	{
		float: right;
		width :27.5%;
		margin-top: 2em;
	}

		.create-profile .logo-column .person-title
		{
			font-size: 1.42857em;
			margin-bottom: 0.5em;
			text-transform: uppercase;
			display: none;
		}

		.create-profile .logo-column .inner
		{
			width: 249px;
			float: right;
		}

	.create-profile .logo-column input[type="file"]
	{
		background-color: #ffffff;
		height: 100%;
		font-size: 25em;
		opacity: 0;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE 5.5+*/
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		z-index: 10;
	}

	.create-profile .logo-box
	{
		background: #d1b995;
		padding: 5px;
	}

	.create-profile .logo-picture-box
	{
		width: 237px;
		height: 332px;
		border: 1px solid #a1a1a1;
	}

		.create-profile .logo-picture-box > div
		{
			position: relative;
			overflow: hidden;
			height: 100%;
		}

		.create-profile .logo-picture
		{
			border: 0 none;
			width: 100%;
			display: none;
		}

		.create-profile .remove-logo
		{
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			width: 31px;
			height: 31px;
			border: 0 none;
			padding: 0;
			background: url("../../Gfx/Frontpage/RemoveButton.png") center center no-repeat;
			cursor: pointer;
			z-index: 20;
		}
		@media screen and (max-width: 800px)
		{
			.create-profile .remove-logo
			{
				width: 25px;
				height: 25px;
			}
		}
		@media screen and (max-width: 480px)
		{
			.create-profile .remove-logo
			{
				width: 21px;
				height: 21px;
			}
		}

	.create-profile .logo-tip-box
	{
		font-size: 12px;
		padding: 0.5em 0 1em;
	}

	.create-profile .logo-tip-title
	{
		font-weight: bold;
	}

	.create-profile .upload-logo-btn
	{
		background: #c11e2f url("../../Gfx/Frontpage/UploadIcon.png") no-repeat scroll 10% center;
		color: #ffffff;
		font-size: 1.2857em;
		line-height: 2.2222em;
		height: 2.2222em;
		border-radius: 5px;
		position: relative;
		overflow: hidden;
		text-align: center;
	}

		.create-profile .upload-logo-btn:hover
		{
			background-color: #ca5d5f;
		}

		.create-profile .upload-logo-btn label
		{
			text-indent: 10%;
		}

	.create-profile .picture-crop-step
	{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
	}

		.create-profile .picture-crop-step .wrapper
		{
			height: 100%;
		}

	.create-profile .crop-picture-box
	{
		border: 6px solid #ccb795;
		margin: auto;
		position: relative;
	}

	.create-profile .navigation
	{
		padding: 2em 0;
	}

		.create-profile .navigation a.previous
		{
			float: left;
			line-height: 2.3333em;
			text-decoration: none;
		}

		.create-profile .navigation input[type="button"]
		{
			font-size: 1.125em;
			width: 12.5em;
			line-height: 2.3333em;
			height: 2.3333em;
			border: 0 none;
			cursor: pointer;
			color: #fff;
			border-radius: 5px;
			float: right;
			background-color: #c11e2f;
			background-repeat: no-repeat;
			margin-left: 5px;
			margin-bottom: 5px;
			outline: 0 none;
		}

			.create-profile .navigation input[type="button"]:hover
			{
				background-color: #ca5d5f;
			}

			.create-profile .navigation input[type="button"].next
			{
				background-image: url("../../Gfx/Frontpage/NavigationButtonNext.png");
				background-position: right center;
				padding-right: 30px;
			}

			.create-profile .navigation input[type="button"].previous
			{
				background-image: url("../../Gfx/Frontpage/NavigationButtonPrev.png");
				background-position: left center;
				padding-left: 30px;
			}

		.create-profile .navigation .wait-hint
		{
			float: right;
			width: 15px;
			height: 2.3333em;
			padding: 0 0.5em;
			background: url("../../Gfx/Frontpage/AjaxLoaderRedWhite_15x15.gif") no-repeat center center;
		}

	.create-profile .crop-picture-buttons
	{
		display: none;
	}

	.create-profile .validation
	{
		font-size: 1em;
		line-height: 2.7143em;
		display: inline-block;
		vertical-align: top;
		width: 15px;
		margin-left: 0.4em;
		background: center center no-repeat;
	}
	.create-profile .validation.validating
	{
		background-image: url("../../Gfx/Frontpage/AjaxLoaderRedWhite_15x15.gif");
	}
	.create-profile .validation.correct
	{
		background-image: url("../../Gfx/Frontpage/ValidationOk.png");
	}
	.create-profile .validation.error
	{
		background-image: url("../../Gfx/Frontpage/ValidationError.png");
	}

	.create-profile .info-bubble
	{
		width: 30.96%;
		z-index: 110;
		position: absolute;
	}

		.create-profile .info-bubble .arrow
		{
			float: left;
			width: 0;
			height: 0;
			border-right: 8px solid #c11d2f;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			position: relative;
			top: 10px;
		}

		.create-profile .info-bubble ul
		{
			background: #c11d2f;
			margin-left: 8px;
			padding: 1em;
			border-radius: 2px;
			font-size: 12px;
			box-shadow: 3px 3px 9px -2px black;
		}

			.create-profile .info-bubble ul li
			{
				padding-top: 0.5em;
			}

				.create-profile .info-bubble ul li:first-child
				{
					padding-top: 0;
				}

				.create-profile .info-bubble ul li.password
				{
					font-weight: bold;
				}

		.create-profile .info-bubble .password-progress
		{
			height: 1em;
			width: 0;
			background: #ff7407;
			margin-top: 0.5em;
		}

			.create-profile .info-bubble .password-progress.secure
			{
				background: yellow;
			}

			.create-profile .info-bubble .password-progress.very-secure
			{
				background: green;
			}

	.create-profile .suggestion
	{
		position: absolute;
		z-index: 100;
		background: #04ee6b;
		left: -4px;
		top: 62px;
		padding: 0.25em 0.5em;
		width: auto;
		max-height: none;
		overflow: visible;
		cursor: pointer;
	}

		.create-profile .suggestion:before
		{
			content: "";
			position: absolute;
			border-bottom: 8px solid #04ee6b;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			left: 1.5em;
			top: -8px;
		}

		.create-profile .suggestion span
		{
			font-style: italic;
		}

			.create-profile .suggestion span span
			{
				font-weight: bold;
			}

/* Create profile section (popup dialog) */
.PopupBox
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

	.PopupBox .Opacity
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.6;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=60);
	}

	.PopupBox .OuterScroll
	{
		position: relative;
		height: 100%;
		*overflow-x: hidden; /* For IE7 */
		overflow-y: auto;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
	}

	.PopupBox .OuterTable
	{
		display: table;
		table-layout: fixed;
		width: 100%;
		height: 100%;
	}

	.PopupBox .Outer
	{
		width: 100%;
		display: table-cell;
		vertical-align: middle;
	}

.create-profile.popup, .create-profile.popup .background
{
	background-color: #8b0000;
}

.create-profile.popup
{
	max-width: 943px;
	min-width: 200px;
	margin: 0 auto;
	position: relative;
	top: auto;
	*top: 100px; /* For IE7 */
}

	.create-profile.popup .wrapper
	{
		padding: 0;
	}

	.create-profile.popup header
	{
		border-bottom: 0 none;
	}

	.create-profile.popup header .wrapper
	{
		border-bottom: 1px solid #670800;
	}

		.create-profile.popup header span
		{
			background: url("../../Gfx/Frontpage/LockWhite.png") right center no-repeat;
		}

	.create-profile.popup .step-number
	{
		border-top: 0 none;
	}

		.create-profile.popup .step-number .step-title
		{
			margin-left: 2%;
		}

	.create-profile.popup .step-number .wrapper
	{
		border-top: 1px solid #a00000;
	}

	.create-profile.popup .navigation input[type="button"], .create-profile.popup .upload-logo-btn
	{
		background-color: #ca2326;
	}

		.create-profile.popup .navigation input[type="button"]:hover, .create-profile.popup .upload-logo-btn:hover
		{
			background-color: #ca4043;
		}

		.create-profile.popup .navigation input[type="button"].next
		{
			background-image: url("../../Gfx/Frontpage/NavigationButtonDarkNext.png");
		}

		.create-profile.popup .navigation input[type="button"].previous
		{
			background-image: url("../../Gfx/Frontpage/NavigationButtonDarkPrev.png");
		}

	.create-profile.popup .info-bubble ul
	{
		background-color: #ca2226;
	}

@media screen and (max-width: 978px)
{
	.create-profile .logo-column .inner
	{
		float: none;
	}

	.create-profile .logo-column input[type="file"]
	{
		height: auto;
	}

	.create-profile .logo-box
	{
		padding: 2%;
	}

	.create-profile .logo-picture-box
	{
		width: auto;
		height: auto;
	}

		.create-profile .logo-picture-box > div
		{
			height: 0;
			padding-bottom: 140.08%;
		}

	.create-profile .crop-picture-box
	{
		border-width: 4px;
	}
}

@media screen and (max-width: 800px)
{
	.create-profile
	{
		font-size: 0.8571em;
	}

	.create-profile .info-box
	{
		display: none;
	}

	.create-profile .input-group
	{
		width: 100%;
		float: none;
	}

	.create-profile .logo-column
	{
		float: left;
	}

	.create-profile .info-bubble
	{
		width: 41.5%;
	}

		.create-profile .info-bubble .arrow
		{
			float: right;
			top: 0;
			right: 20%;
			border-top: 8px solid #c11d2f;
			border-right: 8px solid transparent;
			border-left: 8px solid transparent;
			border-bottom: 0 none;
		}

		.create-profile .info-bubble ul
		{
			margin-left: 0;
			padding: 0.5em;
		}
}

@media screen and (max-width: 480px)
{
	.create-profile .input-block
	{
		width: 100%;
	}

	.create-profile .profile-text-block
	{
		width: 86%;
	}

	.create-profile .terms
	{
		width: 86%;
	}

	.create-profile .info-bubble
	{
		width: 83%;
	}
}




/* Dlgs */

.dlg-box
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

	.dlg-box .background
	{
		height: 100%;
		background-color: black;
		opacity: 0.60;
		filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=60);
	}

	.dlg-box .dlg-anchor
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

		.dlg-box .dlg-anchor .dlg
		{
			width: 75%;
			max-width: 42.25em;
			padding: 1.875%;
			margin: 17.5% auto 0;
			background: #8b0000;
			border-radius: 3px;
		}
		@media screen and (max-width: 800px)
		{
			.dlg-box .dlg-anchor .dlg
			{
				font-size: 0.8em;
				width: 90%;
			}
		}
		@media screen and (max-width: 480px)
		{
			.dlg-box .dlg-anchor .dlg
			{
				padding: 2.25%;
			}
		}




/* Dlg RegistrationWait */

#RegistrationWaitPopup .dlg .title-box
{
	border-bottom: 0.0625em solid #670800;
	padding-bottom: 2%;
}

	#RegistrationWaitPopup .dlg .title-box .title
	{
		font-size: 2em;
	}

#RegistrationWaitPopup .dlg .main
{
	border-top: 0.0625em solid #a00000;
	padding-top: 2%;
}

	#RegistrationWaitPopup .dlg .main .loading
	{
		background: #630707 no-repeat;
		border-radius: 3px;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	#RegistrationWaitPopup .dlg .main .annimation
	{
		width: 100%;
		height: 42px;
		position: relative;
	}

			#RegistrationWaitPopup .dlg .main .annimation .arrow
			{
				width: 33px;
				height: 42px;
				position: absolute;
				top: 0;
				right: 10%;
			}

		#RegistrationWaitPopup .dlg .main .annimation.right
		{
			padding-left: 33px;
			margin-left: -33px;
		}

			#RegistrationWaitPopup .dlg .main .annimation.right .arrow
			{
				background: url("../../Gfx/Frontpage/WaitArrowRight.png") no-repeat 0 0;
			}

		#RegistrationWaitPopup .dlg .main .annimation.left
		{
			padding-right: 33px;
			margin-right: -33px;
		}

			#RegistrationWaitPopup .dlg .main .annimation.left .arrow
			{
				background: url("../../Gfx/Frontpage/WaitArrowLeft.png") no-repeat 0 0;
			}