/*
	Test1
*/


/*
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, section {
	display: block;
}
/* This elements selector propertygenerates a block element box, generating line breaks both before and after the element when in the normal flow. */


HTML {
	background: url('images/bg.gif') #dadada repeat-y center top; /* play with it +++   */
	background-position-x: center;
	vertical-align: baseline;
	/* max-width: 1038px; /* sets the maximum width of an element /* Content */ /* Primary Content */
	margin-left: 0em; /* margin of main content changed from 7 to 4 */
	margin-right: 0em; /* margin of main content of 4 added */
}

body {
	line-height: 1; /**/
	-webkit-text-size-adjust: none; /**/
	font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
	font-size: 9.4pt;
	color: #000;
}

a {
	color: #3562b8; 
	text-decoration: underline;
	}

	a:hover {
		text-decoration: none;
		color: #F0341A; /*green 669933*/
	}

	a.nav:link {
		color: #3562b8; /* -- 046DB3blue 0066DE      red F0341A */
		text-decoration: underline;
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav:visited {
		color: #3562b8; /* -- 046DB3 blue 0066DE      red F0341A */
		text-decoration: underline;
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav:hover {
		text-decoration: none;
		color: #F0341A; /*green 669933*/
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav2:link {
		color: #3562b8; /* -- 046DB3 blue 0066DE      red F0341A */
		text-decoration: underline;
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav2:visited {
		color: #3562b8; /* -- 046DB3  blue 0066DE      red F0341A */
		text-decoration: underline;
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav2:hover {
		text-decoration: none;
		color: #F0341A; /*green 669933*/
		font-size: 11pt;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

	a.nav3:link {
		background-color: #0059b3;
		border-radius: 5px;
		color: #fff; /* !important;*/
		text-decoration: none;
		height: 23px;
		line-height: 20px;
		margin-left: 0.5em;
		padding: 0.3em 0.6em 0.3em 0.6em;
		font-size: 100%;
		font-weight: bold;
	}

	a.nav3:visited {
		background-color: #0059b3;
		border-radius: 5px;
		color: #fff; /* !important;*/
		text-decoration: none;
		height: 23px;
		line-height: 20px;
		margin-left: 0.5em;
		padding: 0.3em 0.6em 0.3em 0.6em;
		font-size: 100%;
		font-weight: bold;
	}

	a.nav3:hover {
		background-color: #0059b3;
		border-radius: 5px;
		color: #fff; /* !important;*/
		text-decoration: underline;
		height: 23px;
		line-height: 20px;
		margin-left: 0.5em;
		padding: 0.3em 0.6em 0.3em 0.6em;
		font-size: 100%;
		font-weight: bold;
	}


hr {
	border: dashed #dfdfdf;
	border-width: 1px 0 0 0;
	height: 0;
	line-height: 0px;
	font-size: 0;
	margin: 0;
	padding: 0;
	margin-top: -10px;
	margin-bottom: 10px;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background-color: transparent;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}


/* Section/Article */ 

header {
	margin: inherit;
}

		header > p {
			font-family: 'Open Sans Condensed', sans-serif;
			font-weight: 300;
			display: block;
			margin-top: 1em;
			color: #999;
		}

section, article {
	margin-bottom: 3em;
	}

		section > :last-child,
		section > .inner > :last-child, section:last-child, article > :last-child,
		article > .inner > :last-child, article:last-child{
			margin-bottom: 0;
		}

#search {
	display: inline-block;
	position: relative;
	top: 0.1em;
	line-height: normal;
	border: none;
}

/* Image */ /* This is to scail images then screen size changes*/

.image {
	border-radius: 0.375em;
	border: 0;
	display: inline-block;
	position: relative;
}

.image img {
	border-radius: 0.375em;
	display: block;
}

.image.left, .image.right {
	max-width: 100%; /* immage of future girl on front page */
}

	.image.left img, .image.right img {
		width: 100%;
	}

.image.left {
	float: left;
	padding: 0 1.5em 1em 0;
	top: 0.25em;
}

.image.right {
	float: right;
	padding: 0 0 1em 1.5em;
	top: 0.25em;
}

.image.fit {
	display: block;
	margin: 0 0 2em 0;
	width: 100%;
}

	.image.fit img {
		width: 100%;
	}

.image.main {
	display: block;
	margin: 0 0 3em 0;
	width: 100%;
}

	.image.main img {
		width: 100%;
	}

a.image {
	overflow: hidden;
}

	a.image img {
		-moz-transition: -moz-transform 0.2s ease;
		-webkit-transition: -webkit-transform 0.2s ease;
		-ms-transition: -ms-transform 0.2s ease;
		transition: transform 0.2s ease;
	}

	a.image:hover img {
		-moz-transform: scale(1.075);
		-webkit-transform: scale(1.075);
		-ms-transform: scale(1.075);
		transform: scale(1.075);
	}



/* Button */ /* Used for "Next Page" button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		cursor: pointer;
		background-color: #c94663;
		background-image: url("images/bg1.png");
		border-radius: 0.4em;
		text-align: center;
		box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15);
		color: #fff;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-decoration: none;
		-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
		transition: background-color .25s ease-in-out, color .25s ease-in-out;
		text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
	}

		input[type="button"]:disabled, input[type="button"].disabled,
		input[type="submit"]:disabled,
		input[type="submit"].disabled,
		input[type="reset"]:disabled,
		input[type="reset"].disabled,
		button:disabled,
		button.disabled,
		.button:disabled,
		.button.disabled {
			opacity: 0.35;
			cursor: default;
		}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #d95673;
			color: #fff
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #b93653;
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background-color: #364050;
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #465060;
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #263040;
			} 

/* List */ /*

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Pagination */

	.pagination .pages {
		display: inline-block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
	}

		.pagination .pages span {
			display: inline-block;
			width: 1.5em;
			text-align: center;
			margin: 0 0.4em 0 0;
		}

		.pagination .pages a {
			cursor: pointer;
			display: inline-block;
			text-align: center;
			text-decoration: none;
			color: inherit;
			background-color: #e8e8e8;
			background-image: url("images/bg2.png");
			color: #565656;
			margin: 0 0.4em 0 0;
			border-radius: 0.4em;
			-moz-transition: background-color .25s ease-in-out;
			-webkit-transition: background-color .25s ease-in-out;
			-ms-transition: background-color .25s ease-in-out;
			transition: background-color .25s ease-in-out;
			box-shadow: inset 0 0.075em 0.25em 0 rgba(0, 0, 0, 0.1);
		}

			.pagination .pages a:hover {
				background-color: #dadada;
			}

			.pagination .pages a.active {
				background-color: #364050;
				color: #fff;
				box-shadow: none;
				text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
			}


/* Box */ /* LEFT COLUMN */
.box {
	border-radius: 0.375em;
	border: solid 1px rgba(210, 215, 217, 0.75);
	margin-bottom: 2em;
	padding: 1.5em;
}

	.box > :last-child,
	.box > :last-child > :last-child,
	.box > :last-child > :last-child > :last-child {
		margin-bottom: 0;
	}

	.box.alt {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	.box.search {/* Search button */
		border: 1px;
		border-radius: 0.3em;
		padding: 0.3em;
		color: black;
		background-color: white;
	}

.box.nav ul {
		list-style: none;
		padding-left: 0;
		}

		.box.nav li {
			border-top: solid 1px rgba(0, 0, 0, 0.25);
			box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
			padding: 0.5em 0 0.5em 0;
		}

		.box.nav li:first-child {
			border-top: 0;
			box-shadow: none;
			padding-top: 0;
		}

		.box.nav li:last-child {
			padding-bottom: 0;
		}

	.box a.nav:link {
		text-decoration: none;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
	}

		.box a.nav:hover {
		text-decoration: underline;
		font-weight: bold;
		font-family: Arial, "Trebuchet MS", sans-serif;
		}

.testimonials .inner {
	position: relative;
	font-size: 0.91em;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
	padding: 1.25em;
	border: 1px solid #BDE2BE;
	line-height: 1.3em;
	width: 93%;
	border-radius: 0.4em;
	background-color: rgba(0, 0, 0, 0.15); /* #EEFFEF; if whant light green, same as it is on original page */
	/*box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);*/
}

/* Icons */

/* Nav */


/* Titlebar */

#titleBar {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.5s ease;
	-webkit-transition: -webkit-transform 0.5s ease;
	transition: transform 0.5s ease;
	display: none;
	height: 44px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10001;
	/* background: #364050; background covered by image url(images/a11.gif) */
}

	#titleBar .title {
		display: block;
		color: #fff;
		line-height: 44px;
		font-size: 1.25em;
		font-family: Arial, "Trebuchet MS", sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
		text-align: center;
		background: left top repeat url(images/a11.gif); /* Will set elements color and image if use url(images/a11.gif), in TitelBar line. Can use trancperent color */
		background-size: 10%; /* Will set image size of inserted image url(images/a11.gif), in TitelBar line */
	}


		#titleBar .toggle {
			text-decoration: none;
			width: 80px;
			height: 60px;
			position: absolute;
			top: 0;
			left: 0;
		}

			#titleBar .toggle:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			#titleBar .toggle:before {
				text-decoration: none;
				content: ''; /* Will show element if use url(/icon-burger-white.svg), or text if use 'box', in TitelBar button */
				display: block;
				position: absolute;
				top: 7px;
				font-size: 14px;
				width: 50px;
				height: 30px;
				line-height: 30px;
				background: #c94663 url(images/icon-burger-white.svg) center no-repeat; /* Will set elements color and image if use url(/icon-burger-white.svg), in TitelBar button. Can use trancperent color */
				background-size: 40%; /* Will set image size of inserted image url(/icon-burger-white.svg), in TitelBar button */
				border-radius: 5px;
				color: #fff;
				text-align: center;
				box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0 0.025em 0.15em 0em rgba(0, 0, 0, 0.25);
				text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
				left: 7px;
			}
			

			#titleBar .toggle:active:before {
				background-color: #d95673;
			}

/* Sidebar */  /* Secondary Content */

#sidebar {
	position: relative;
	float: left;
	color: rgba(255, 255, 255, 0.55); /* #000; if whant text to be black, same as it is on original page */
	text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
	width: 14em;
	font-weight: 900;
	padding: 3em 1.35em 1em 1.15em;
	background: #364050; /* #FFF; if whant white, same as it is on original page */
	overflow-y: auto; /* Sets what shows when content overflows a Sidebar (Secondary Content) box and allowed to scroll when passed bottom edges. */
	overflow-x: hidden; /* Sets what shows when content overflows a Sidebar (Secondary Content) box and can't be scrolled when content pased side edges. */
	left: 0; /* Position of Sidebar (Secondary Content) left: 20.8%;, so it is aline with HTML background image */
	box-shadow: inset -0.1em 0em 0.35em 0em rgba(0, 0, 0, 0.15); /* gray on left side to match original page use this: inset 0em 0em 0em 0em rgb(255,255,255), -4em 0em 4em 1.5em rgba(0,0,0,0.4);*/ /* box-shadow: inset -0.1em 0em 0.35em 0em rgba(0, 0, 0, 0.15);*/
	-moz-order: -1;
	-webkit-order: -1;
	-ms-order: -1;
	order: -1;
	-moz-flex-grow: 0;
	-webkit-flex-grow: 0;
	-ms-flex-grow: 0;
	flex-grow: 0;
	-moz-flex-shrink: 0;
	-webkit-flex-shrink: 0;
	-ms-flex-shrink: 0;
	flex-shrink: 0;
}

		#sidebar form input, #sidebar form select, #sidebar form textarea {
			border: 0;
		}

		#sidebar section {
			position: relative;
			margin: 2em 0 0 0;
			font-size: 0.9em;
		}

			#sidebar section:before {
				content: '';
				border-top: solid 1px;
				border-bottom: solid 1px;
				border-color: rgba(0, 0, 0, 0.25);
				box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
				display: block;
				height: 0.5em;
				margin: 0 0 2em 0;
			}

	#sidebar strong, #sidebar b {
		color: #fff; /* #FFF; if whant black, same as it is on original page */
	}

	#sidebar a {
		color: #d4dde0; /* #3562b8; if whant blue, same as it is on original page */
	}

	#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 {
		color: #fff; /* #3562b8; if whant blue, same as it is on original page */
	}

		#sidebar header {
			margin: 0 0 1.25em 0;
		}

/* Content */ /* Primary Content */

#content {
	position: relative;
	left: auto; /* Position of Cntent (Primary Content) left: 20.8%;, so it is aline with HTML background image */
	background-color: #fff;
	/* background-image: url("images/bg2.png"); */
	width: 100%; /* Width of Content (Primary Content)  */
	-moz-flex-grow: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1;
	-moz-flex-shrink: 1;
	-webkit-flex-shrink: 1;
	-ms-flex-shrink: 1;
	flex-shrink: 1;
}

/* Content */

#content {
	padding: 0 2%;
	margin-left: -7.5em;
	margin-right: 22em;
}

		#content > .inner {
			position: inherit;
			z-index: 1; /* Sets the z-order of a positioned element (boxes) and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. for example 2 will cover 1*/
		}

/* Copyright */


		#copyright {
			list-style: none;
			padding-bottom: 2em;
			padding-left: 0;
			margin: 2em 0 0 0;
			text-align: center;
		}

		#copyright li {
			padding-left: 0;
		}

			#copyright p { /* see through level, 0 disapear - 1 prominant */
				opacity: 0.75;
				font-size: 0.71em;
				line-height: 2em;
			}

			#copyright a {
				color: inherit !important;
				font-weight: 400;
			}

			#copyright:before {
				content: '';
				border-top: solid 1px;
				border-bottom: solid 1px;
				border-color: rgba(0, 0, 0, 0.25);
				box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
				display: block;
				height: 0.5em;
				margin: 0 0 2em 0;
			}

		/* PayPal Donate */

			#donate {
				font-family: 'Open Sans Condensed', sans-serif;
				font-weight: 700;
				font-size: 2em;
				letter-spacing: 0.1em;
			}

				#donate a {
					display: block;
					background-color: #c94663;
					background-image: url("images/bg1.png");
					padding: 0.875em 0.25em;
					border-radius: 0.2em;
					text-align: center;
					box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0 0.025em 0.15em 0em rgba(0, 0, 0, 0.25);
					text-decoration: none;
					color: #fff;
				}


/* Desktop */

@media screen and (min-width: 938px) and (max-width: 1200px) {

	/* Basic */

	body {
		min-width: 938px;
		}

	input { /* Separated to Control size of Serch bar */
		font-size: 0.77em;
	}

	textarea, select {
		line-height: 1.75em;
	}

	h2 {
		font-size: 1.2em;
	}

	h3, h4, h5, h6 {
		font-size: 1em;
	}

	/* Button */

	input[type="button"], /* This control "Next page" button */
	input[type="submit"],
	input[type="reset"],
	.button,
	button {
		display: inline-block;
		padding: 0.5em 2em 0.5em 2em;
	}

		input[type="button"].small,
		input[type="submit"].small,
		input[type="reset"].small,
		.button.small,
		button.small {
			font-size: 0.85em;
			padding: 0.35em 1.5em 0.35em 1.5em;
		}

		input[type="button"].big,
		input[type="submit"].big,
		input[type="reset"].big,
		.button.big,
		button.big {
			font-size: 1.25em;
			padding: 0.75em 2em 0.75em 2em;
		}

		input[type="button"].huge,
		input[type="submit"].huge,
		input[type="reset"].huge,
		.button.huge,
		button.huge {
			font-size: 1.5em;
			padding: 0.75em 2em 0.75em 2em;
		}

	/* Pagination */

	.pagination {
		padding: 3em 0 0 0;
	}

		.pagination .previous {
			margin-right: 0.6em;
		}

		.pagination .next {
			margin-left: 0.2em;
		}

		.pagination .pages a {
			width: 2.75em;
			height: 2.75em;
			line-height: 2.75em;
		}

		.pagination .button {
			height: 2.75em;
			padding-top: 0;
			padding-bottom: 0;
			line-height: 2.75em;
		}

	/* Content */

	#content {
		
		width: auto;
		margin-right: 5%;
		margin-left: -25%;
	}

	#sidebar {
		display: block;
		visibility: hidden;
	}

}

/* Wide */

	@media screen and (min-width: 979px) {

		/* Basic */

			body {
				min-width: 979px;
				font-size: 12pt;
			}

			input { /* Separated to Control size of Serch bar */
			font-size: 0.77em;
			}

			textarea, select {
			font-size: 12pt;
			}

			/* Content */ /* min-width: 1201px ALL GOOD FOR NOW */
			#content {
			padding: 0 2%; /* padding: 3em 1em 8em 5em; changed to be equaly plased on left an right whithing specified max-width & HTML back ground picture*/
			margin-left: -7em; /* margin-left: -5em of main content changed to fit in to the center of HTML back ground picture */
			margin-right: 7em; /* margin-right: 9em of main content changed to fit in to the center center of HTML back ground picture*/
			max-width: 920px;
		}

		/* Pagination */

		.pagination {
			padding: 3em 0 0 0;
		}

			.pagination .previous {
				margin-right: 0.6em;
			}

			.pagination .next {
				margin-left: 0.2em;
			}

			.pagination .pages a {
				width: 2.75em;
				height: 2.75em;
				line-height: 2.75em;
			}

			.pagination .button {
				height: 2.75em;
				padding-top: 0;
				padding-bottom: 0;
				line-height: 2.75em;
			}

		/* Button */

		input[type="button"], /* This control "Next page" button */
		input[type="submit"],
		input[type="reset"],
		.button,
		button {
			display: inline-block;
			padding: 0.5em 2em 0.5em 2em;
		}

			input[type="button"].small,
			input[type="submit"].small,
			input[type="reset"].small,
			.button.small,
			button.small {
				font-size: 0.85em;
				padding: 0.35em 1.5em 0.35em 1.5em;
			}

			input[type="button"].big,
			input[type="submit"].big,
			input[type="reset"].big,
			.button.big,
			button.big {
				font-size: 1.25em;
				padding: 0.75em 2em 0.75em 2em;
			}

			input[type="button"].huge,
			input[type="submit"].huge,
			input[type="reset"].huge,
			.button.huge,
			button.huge {
				font-size: 1.5em;
				padding: 0.75em 2em 0.75em 2em;
			}

		/* Sidebar */ /* I add it to hide TiteleBar & SideBar on screen with min-width:1201px */ /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

		#titleBar {
			display: block;
			visibility: hidden;
		}

		#sidebar {
			display: block;
			visibility: hidden;
		}

}

/* Mobile */

	@media screen and (max-width: 937px) {

		/* Basic */

			body, input, textarea, select {
				line-height: 1.75em;
				font-size: 11pt;
				letter-spacing: 0;
			}

			h2, h3, h4, h5, h6 {
				font-size: 1.5em;
			}

		/* Section/Article */

			section, article {
				clear: both;
			}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				display: block;
				width: 100%;
				font-size: 1.25em;
				padding: 0.75em 0 0.75em 0;
				margin: 0.5em 0 0.5em 0;
			}

		/* Pagination */

			.pagination .pages {
				display: none;
			}

		/* Content */

			#content {
				margin-top: 44px;
				padding: 3em 20px 2em 20px;
			}

		/* Sidebar */

			#sidebar {
				padding: 20px 12px 20px 10px;
				box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.15), inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.25);
			}

		/* Copyright */

			#copyright {
				margin: 2em 0 0 0;
				text-align: center;
			}

				#copyright p {
					font-size: 0.71em;
					line-height: 2em;
				}

				#copyright:before {
					height: 0.5em;
					margin: 0 0 2em 0;
				}

		/* Search */ /* Blocks Search , header, menue - all what is visible in header.php*/

		#search, #header, #menu {
			display: block;
			visibility: hidden;
		}

	}

/* Off-Canvas Sidebar */

	@media screen and (max-width: 937px) {

		/* Basic */

		html, body {
			background-position-x: center;
			vertical-align: baseline;
			overflow-x: hidden;
		}

		/* Content */

			#content {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				margin-top: 44px;
				margin-left: 0;
				margin-right: 0;
				min-height: 0 !important;
			}

		/* Sidebar */

			#titleBar {
				display: block;
			}

			#sidebar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100% !important;
				min-height: 0 !important;
				overflow-y: auto;
				position: fixed;
				top: 0;
				z-index: 10002;
				-moz-transform: translateX(-14em);
				-webkit-transform: translateX(-14em);
				-ms-transform: translateX(-14em);
				transform: translateX(-14em);
			}

			body.sidebar-visible #content, body.sidebar-visible #titleBar {
				-moz-transform: translateX(14em);
				-webkit-transform: translateX(14em);
				-ms-transform: translateX(14em);
				transform: translateX(14em);
			}

			body.sidebar-visible #sidebar {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

	}

/* categories and menu +++ */

#q_info {
	margin-top: -18px;
	margin-bottom: 10px;
	font-size: 12px;
	font-style: italic;
	color: #000;
}

#answer_count {
	margin-bottom: 10px;
}


#testimonials {
	font-size: 0.91em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
	padding: 8px;
	background-color: #EEFFEF;
	border: 1px solid #BDE2BE;
	line-height: 1.3em;
	width: 93%;
}


#notice_green {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #EEFFEF;
	border-top: 2px solid #BDE2BE;
	border-bottom: 2px solid #BDE2BE;
	line-height: 1.3em;
	width: 90%;
}

#notice_grey {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #F5F5F5;
	border-top: 2px solid #EAEAEA;
	border-bottom: 2px solid #EAEAEA;
	line-height: 1.3em;
	width: 325px;
}

#notice_blue {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #DFEDF6;
	border-top: 2px solid #98C4E0;
	border-bottom: 2px solid #98C4E0;
	line-height: 1.3em;
	width: 90%;
}

#notice_yellow {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #FFF6BF;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	line-height: 1.3em;
	width: 90%;
}

#notice_red {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #FBE3E4;
	border-top: 2px solid #FBC2C4;
	border-bottom: 2px solid #FBC2C4;
	line-height: 1.3em;
	/*color: #8A1F11;*/
	width: 90%;
}

#search_results {
	margin: 0.5em 0.5em 0em 0.5em;
	padding: 1.5em 3em 1.5em 1.5em;
	width: 930px;
}


/* Outer +++ */

#outer {
	min-height: 5em;
	margin: 2em auto; /* top and bottom: 2em margin, Box is horizontally centered */
	width: auto;
	position: relative;
	height: 100%;
	text-align: left;
}


/* Header +++ */

#header {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	position: relative;
	font-family: Arial, "Trebuchet MS", sans-serif;
	height: 7em;
	background: left top repeat-x url(images/a11.gif); /* Will set elements color and image if use url(images/a11.gif), in TitelBar line. Can use trancperent color */
	background-size: 14.3%; /* Will set image size of inserted image url(images/a11.gif), in TitelBar line */
	margin-top: -2em;
	margin-left: -1.9em;
	margin-right: -1.9em;
	min-height: 0 !important;
}

	#header > * {
		-moz-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		margin-bottom: 0;
	}


	#header h1 {
		position: absolute;
		top: 0.1em;
		letter-spacing: -0.05em;
		left: 1em;
	}

		#header h1 a {
			color: #fff;
			text-decoration: none;
			font-size: 0.8em;
		}

			#header h1 a:hover {
				color: #fff;
				text-decoration: underline;
			}


	#header h2 {
		position: absolute;
		top: 1.05em;
		left: 1.4em;
	}

		#header h2 b {
			color: #fff;
			text-decoration: none;
			font-size: 0.4em;
		}

/* Menu +++ */

#menu {
	position: absolute;
	top: -1.6em;
	right: -1em;
	float: right;
}

	#menu ul {
		list-style: none;
	}

	#menu li {
		font-size: 0.8em;
		display: inline;
		padding-left: 1.1em;
		margin-left: 1em;
		border-left: dotted 1px #E0E8EF;
	}

	#menu .first {
		border: 0em;
		margin-left: 0em;
		padding-left: 0em;
	}

	#menu .members {
		display: inline;
		padding-left: 1.1em;
		margin-left: 1em;
		border-left: none; /*dotted 1px #E0E8EF;*/
		background: #E63143;
		border-radius: 5px;
		color: #fff; /* !important;*/
		height: 23px;
		line-height: 20px;
		padding: 0.3em 0.6em 0.3em 0.6em;
		font-size: 100%;
		font-weight: normal;
	}

	#menu li a {
		color: #fff;
		padding: 0.1em;
		text-decoration: none;
	}

	#menu li.members a {
		color: #fff;
		padding: 0.1em;
		text-decoration: underline;
	}

		#menu li.members a:hover {
			text-decoration: none;
		}

	#menu li a:hover {
		text-decoration: underline;
	}

	
/* Content +++ */

#content {
	line-height: 1.6em;
}


	#content p {
		margin-bottom: 1.5em;
	}

	#content h1 {
		padding-bottom: 0.3em;
		margin-bottom: 0.5em;
		color: #000000;
		font-size: 1.7em;
	}

	#content h2, h3, h4, h5, h6, h7 {
		margin-bottom: 1em;
		border-bottom: dashed 1px #dfdfdf;
		padding-bottom: 0.3em;
		color: #000000; /* blue 0589E0 */
		font-family: "Trebuchet MS";
	}

	#content h2 {
		font-size: 1.8em; /* WAS 1.8 */
	}


	#content h3 {
		font-size: 1.5em;
	}

	#content h4 {
		font-size: 1em;
		color: #000000;
		border-bottom: none;
	}

	#content h5 {
		font-size: 1.4em;
	}

	#content h6 {
		font-size: 1.8em;
		border-bottom: none;
		margin-bottom: 0.4em;
		padding-bottom: 0em;
	}

	#content h7 {
		color: #000; /*#333399;*/
		font-size: 1.5em;
		border-bottom: none;
		margin-bottom: 0.4em;
		font-weight: bold;
		padding-bottom: 1em;
	}


	#content ul {
		margin-bottom: 1.5em;
		padding-left: 1em;
		list-style: square;
	}

	#content ol {
		margin-bottom: 1.5em;
		padding-left: 1.5em;
	}

#navlist li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
}


#navlist2 ul {
	margin-bottom: 1.5em;
	padding-left: 0em;
	list-style: square;
}

#navlist2 li {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	/*padding-right: 5px;*/
}

#navlist3 ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navlist3 li {
	margin: 0 0 .2em 0;
}

#navlist3 a {
	display: block;
	color: #FFF;
	background-color: #777777;
	width: 9em;
	padding: .2em .8em;
	text-decoration: none;
}

	#navlist3 a:hover {
		background-color: #BBBBBB;
		/*	background: #004778 url('images/d7.jpg') bottom left repeat-x;*/
		color: #FFF;
	}



#active {
	color: #888888;
}



#content blockquote {
	margin-bottom: 1.5em;
	padding: 0.75em 0.75em 0.75em 1.5em;
	border-left: solid 0.75em #cecece;
	background: #FDFDFD url('images/a7.gif') top left repeat-x;
}

	#content blockquote p {
		margin-bottom: 1em;
	}

#content table {
	margin-bottom: 1.5em;
	border-collapse: collapse;
	text-align: left;
}

	#content table th {
		font-weight: bold;
		padding: 0.5em;
	}

	#content table td {
		padding: 0.5em;
		border-right: solid 1px #fff;
	}

	#content table .rowH {
		color: #fff;
		background: #006192 url('images/a8.gif') top left repeat-x;
		border-right: solid 1px #fff;
	}

	#content table tr.rowA {
		background: #F8F8F8 url('images/a6.gif') top left repeat-x;
		border-top: solid 1px #fff;
		color: inherit;
	}

	#content table .rowB {
		background: #FDFDFD url('images/a7.gif') top left repeat-x;
		border-top: solid 1px #fff;
		color: inherit;
	}

	#content table.vocabulary {
		padding: 0px 0px 0px 0px;
	}


		#content table.vocabulary td {
			padding: 0.3em;
			/* border: solid 1px #efefef; */
			vertical-align: top;
		}


	#content table.verbs {
		padding: 0px 0px 0px 0px;
	}

		#content table.verbs td {
			padding: 0.18em;
			border: solid 1px #efefef;
		}

			#content table.verbs td.title {
				font-size: 14px;
				font-family: Arial, Georgia, "Times New Roman", Times, serif;
				font-weight: bold;
				color: #000;
			}

		#content table.verbs tr.rowA {
			background: #efefef;
		}


/* Primary Content +++ */

#primaryContentContainer {
	background-color: #fff;
	float: right;
	margin: -1.5em -11.55em 10em 0em;
	/*	margin: 0em -19em 0em -19em;*/
	width: 978px;
}

#primaryContent {
	/*	margin: 1.5em 19em 0em 17.25em;
	padding: 1.5em 3em 1.5em 3em; */
	width: 700px;
	margin: 1em 12em 0em 16em;
}


/* Secondary Content +++ */

#secondaryContent {
	position: relative;
	float: left;
	width: 14em;
	padding: 2.5em 2em 1.5em 2em;
	background: #fff url('images/a1.gif') top right repeat-y;
}

	#secondaryContent .xbg {
		position: absolute;
		right: 0em;
		bottom: -64px;
		background: #fff url('images/a3.gif') top right no-repeat;
		height: 64px;
		width: 128px;
	}

	#secondaryContent ul {
		font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
		font-size: 9pt;
		color: #000;
	}

	#secondaryContent h3 {
		font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
		font-size: 10pt;
		color: #555555;
		border-bottom: none;
		padding-bottom: 0em;
	}

/* Tertiary Content +++ */

#tertiaryContent {
	position: relative;
	float: right;
	width: 25px;
	/*	padding: 3em 2em 1.5em 2em; */
	background: #fff;
}

	#tertiaryContent .xbg {
		position: absolute;
		left: 0em;
		bottom: -64px;
		background: #fff; /*url('images/a4.gif') top left no-repeat; */
		height: 64px;
		width: 25px;
	}

/* Ads +++ */

#adOnRight {
	position: relative;
	float: right;
	width: 345px;
	/*	margin-left: 10px;
	padding: 3em 2em 1.5em 2em; */
	background: #fff;
}

#adInMiddle {
	position: relative;
	float: left;
	width: 210px;
	/*	margin-righht: 10px;
	padding: 3em 2em 1.5em 2em; */
	background: #fff;
}

/* Footer +++ */

#footer {
	position: relative;
	z-index: 1;
	border-top: dashed 1px #dfdfdf;
	padding: 1em 0em 2em 0em;
	margin: 1em 2em 0em 2em;
	text-align: center;
}

.clear {
	clear: both;
}

.dashed {
	margin-bottom: 1em;
	border-bottom: dashed 1px #dfdfdf;
	padding-bottom: 0.3em;
}

.word {
	font-weight: bold;
	color: #000;
	font-size: 14px;
}

.transcription {
	font-weight: normal;
	color: #669933;
	font-size: 13px;
}

.style1 {
	color: #009900;
	font-weight: bold;
}

.style2 {
	color: #0000FF;
	font-weight: bold;
}