body {
	text-align: center;
	margin: 0;
	min-height: 100vh;
}

* {
	text-align: left;
}

button[type=button].navbar-toggler {
	border: 0;
	background-color: transparent;
	box-shadow: 0 0 transparent;
}

#layoutOuter {
	max-width: 1102px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

#wrapper {
	max-width: 1064px;
	margin-top: -21px;
	margin-left: 1px;
	position: relative;
}

.navbar::before {
	content: " ";
    position: absolute;
    top: -218px;
    right: -51px;
    display: block;
    width: 450px;
    height: 259px;
    background-repeat: no-repeat;
    background-position: -6px 2px;
}

#header {
	width: 1102px;
	position: relative;
	height: 227px;
	overflow: hidden;
	max-width: 100%;
}

#header img {
	position: relative;
	left: -2px;
}

.navbar {
	border-left: 2px solid #00330d;
	border-right: 2px solid #00330d;
	border-bottom: 2px solid #00330d;
	/*background:
		url(../images/layouts/foggy_header.png) -6px -213px no-repeat,
		url(../images/layouts/foggy_tile_dark.png) right top repeat
		;*/
	padding: 0 2px 2px 2px;
	margin-top: -12px;
}

.navbar .container-fluid {
	border-left: 2px solid #00330d;
	border-right: 2px solid #00330d;
	border-bottom: 2px solid #00330d;
	background:
		url(../images/layouts/foggy_header.png) -8px -220px no-repeat,
		url(../images/layouts/foggy_top_menu_tile_2.png) right top repeat
		;
}

.navbar a:link.nav-link, .navbar a:visited.nav-link,
	.navbar a:active.nav-link, .navbar a:focus.nav-link {
	color: #e2ffd1;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	text-shadow:
		-2px -2px 3px #314832, 2px -2px 3px #314832, -2px 2px 3px #314832, 2px 2px 3px #314832;
}

.navbar a:hover.nav-link {
	color: #c7fea3
}

.navbar .container-fluid .navbar-toggler {
	z-index: 20;
}

.nav-item {
	position: relative;
	text-align: center;
}

.nav-item::after {
	content: " ";
	background: url(../images/layouts/foggy_top_menu_tile_1.png) left top repeat;
	width: 7px;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	border-right: 2px solid #00330d;
	border-left: 2px solid #00330d;
	display: none;
}

.nav-item:last-child::after, .dropdown-toggle::after {
	display: none;
}

.navbar-nav {
	width: 100%;
}

.navbar-toggler .navbar-toggler-icon {
	width: 94px;
	height: 22px;
	background-image: url(../images/layouts/foggy_menu_expand.png);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	background-image: url(../images/layouts/foggy_menu_collapse.png);
}

.nav-link {
	padding: 5px 0;
}

.navbar .dropdown-menu {
	background-color: rgba(222, 255, 217, 0.9);
}

.navbar .dropdown-item:hover {
	background-color: rgba(255, 255, 0, 0.5);
}

.gryffTable img, .gryffTable input, .gryffTable {
	max-width: 100%;
}

.gryffTable textarea, .full, .gryffTable {
	width: 100%;
}

.gryffTable td h1 {
	background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    padding-bottom: 10px;
    margin-top: 10px;
}

.areaLinks, .tagArea, .calign, .gryffTable.calign td, .gryffTable.calign p, h1.page-title, .calign form,
h1, #gryff1info, #gryff2info {
	text-align: center;
}

#leftSidebar .container, #rightSidebar .container, #content .container-fluid {
	border-left: 2px solid #00330d;
	border-right: 2px solid #00330d;
	border-bottom: 2px solid #00330d;
	background: url(../images/layouts/foggy_top_menu_tile_1.png) repeat  left top;
	height: 100%;
	padding: 0px 2px 2px 2px;
	border-radius: 0 0 10px 10px;
}

#leftSidebar .container, #rightSidebar .container {
	padding-top: 2px;
	border-top: 2px solid #00330d;
	border-radius: 10px;
}

#leftSidebar, #rightSidebar {
	margin-top: 10px;
}

#leftSidebar .container > .col, #rightSidebar .container > .col, #content .container-fluid > .col {
	border: 2px solid #00330d;
	border-radius: 0 0 10px 10px;
	background: url(../images/layouts/foggy_tile_light.png) left top repeat;
	height: 100%;
}

#leftSidebar .container > .col, #rightSidebar .container > .col {
	border-radius: 10px;
}

#leftSidebar .container > .col .tagArea {
	border-radius: 10px 10px 0 0;
}

#content .container-fluid > .col {
	background: url(../images/layouts/foggy_foliage_center.png) repeat-x left bottom,
		url(../images/layouts/foggy_content_tile.png) left top repeat;
	padding-bottom: 80px;
	border-top: 0 !important;
}

#leftSidebar .container > .col {
	background: url(../images/layouts/foggy_foliage_left.png) repeat-x left bottom,
		url(../images/layouts/foggy_content_tile.png) left top repeat;
	padding-bottom: 80px;
}

#rightSidebar .container > .col {
	background: url(../images/layouts/foggy_foliage_right.png) repeat-x left bottom,
		url(../images/layouts/foggy_content_tile.png) left top repeat;
	padding-bottom: 80px;
}

#leftSidebar {
	padding-left: 0;
	padding-right: 0;
}

#rightSidebar {
	padding-left: 0;
	padding-right: 0;
}

#leftSidebar .tagArea {
	background:
		url(../images/layouts/foggy_tile_medium.png) left top repeat;
	padding: 17px;
	box-shadow:  inset 0px -50px 50px -11px rgba(255,255,255,0.4)
}

#leftSidebar .tagArea img {
	border: 1px solid #000;
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.8);
}

#leftSidebar .profileArea, #leftSidebar .timeArea, #leftSidebar .latestAds {
	background: url(../images/layouts/foggy_top_menu_tile_1.png) left top repeat;
	border-top: 2px solid #00330d;
	border-bottom: 2px solid #00330d;
	padding: 2px 0;
}

#leftSidebar .profileArea .inner, #leftSidebar .timeArea .inner, #leftSidebar .latestAds .inner {
	background: url(../images/layouts/foggy_top_menu_tile_2.png) left top repeat;
	background-color: #4f8c62;
	border-top: 2px solid #00330d;
	border-bottom: 2px solid #00330d;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
	text-align: left;
	padding-left: 5px;
	color: #dff9d6;
	text-decoration: none;
	font-weight: bold;
	font-family: Segoe UI;
	font-size: 0.95rem;
	color: #dff9d6;
	text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

#leftSidebar .profileArea a:link, #leftSidebar .profileArea a:visited {
	color: #dff9d6;
	text-decoration: none;
}

#minichat div {
	max-height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 5px;
}

#minichat {
	font-size: 0.85rem;
}

.commentsTable {
	margin: 0 10px;
	width: auto;
}

.commentsTable .date {
	text-align: right;
	padding-top: 10px;
	font-style: italic;
}

#minichat span, .commentsTable tr {
	padding: 10px;
	border-bottom: 1px solid rgba(38, 91, 45, 0.5)
}

#minichat span {
	display: block;
}

#minichat span:last-child, .commentsTable tr:last-child, .spacingLines div.row:last-child {
	border-bottom: 0;
}

#minichat span a:last-child {
	display: block;
	text-align: right;
}

.statsArea {
	display: block;
	text-align: left;
	font-weight: bold;
	padding: 3px 10px;
	font-size: 0.9rem;
}

.statsArea span {
	font-weight: normal;
}

#leftSidebar .logout {
	display: block;
	text-align: center;
	margin: 5px;
	font-size: 0.85rem;
}

#sideBillboards {
	text-align: left;
	padding: 10px;
}

#sideBillboards .billboardItem {
	padding: 3px 0px;
	display: block;
}

#sideBillboards .billboardItem small {
	display: block;
	text-align: right;
	font-weight: normal;
	display: none;
}

#sideBillboards .billboardItem a:link, #sideBillboards .billboardItem a:visited,
	#sideBillboards .billboardItem a:hover, #sideBillboards .billboardItem a:active {
	text-decoration: none;
	color: #0c5130;
	font-size: 0.8rem;
	font-weight: bold;
}

#lastLevelled div, #lastLevelled div a {
	font-size: 0.8rem;
}

.gryffTable {
	margin-bottom: 20px;
}

.gryffTable, .gryffTable td, .gryffTable th, .gryffTable textarea, .full, .gryffTable input {
	max-width: 100%;
}
/*
.gryffTable td {
	background-color: rgba(158, 199, 162, 0.2);
}*/

.gryffTable td, .gryffTable th {
    word-break: break-word;
    font-size: 0.9rem;
}

.gryffTable textarea, .gryffTable input {
	width: 100%;
}

.gryffTable input[type=checkbox] {
	width: auto;
}

.itemInfo {
	background-color: rgba(222, 255, 217, 0.9);
	border: 1px solid rgba(0,0,0,0.15);
}

.itemInfo a:link, .itemInfo a:visited {
	color: #0d5031;
}

.itemInfo a:hover, .itemInfo a:active {
	color: #0d5031;
}

.gryffTable th, .pageSeparator {
	text-align: center;
	background-color: rgba(38, 91, 45, 0.5);
	border-bottom: 2px solid #00270a;
	border-top: 2px solid #00270a;
	color: #f9fee1;
	text-shadow: 0 0 5px #001e08;
	font-size: 1rem;
}

.pageSeparator {
	padding: 10px;
	font-weight: bold;
}

.item {
	display: inline-block;
	text-align: center;
}

.item img {
	width: 100px;
	height: 100px;
}

.areaImage {
	width: 100%;
	border: 1px solid #000;
}

.areaLinks, h1.page-title {
	padding: 5px;
	background-color: rgba(0, 51, 9, 0.7);
	margin: 0;
}

h1.page-title, h1 {
	font-size: 1.2rem;
	color: #d2ecb3;
	text-shadow: 0 0 4px #001e08;
	padding: 8px 0 7px 0;
}

h2 {
	padding: 10px;
}

.areaLinks a:link, .areaLinks a:visited {
	text-decoration: none;
	color: #004f30;
	font-size: 0.9rem;
	display: inline-block;
	padding: 3px;
	margin: 2px;
	background-color: #6faf78;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.areaLinks a:hover, .areaLinks a:active, .areaLinks a:focus {
	background-color: rgba(184, 233, 192, 0.75);
}

button[type=submit], input[type=submit], input[type=button], button[type=button] {
	background-color: #7ec889;#6faf78;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 3px rgba(13, 126, 82, 0.4);
	text-align: center;
	width: auto;
	color: #123718;
}

button, input, select {
	padding: 4px;
	margin: 2px;
	border-radius: 3px;
}

button[type=submit]:hover, input[type=submit]:hover, input[type=button]:hover, button[type=button]:hover {
	background-color: rgba(184, 233, 192, 0.75);
}

#footer {
	text-align: center;
	margin-top: 10px;
}

h2 {
	font-size: 1rem;
}

h1.page-title + p {
	text-align: center;
	padding: 10px;
}

/* sm break */
@media (min-width: 576px) {	
	.nav-item::after {
		display: block;
	}
	
	.nav-item {
		box-shadow: inset 0px -12px 18px -11px rgba(255,255,255,0.62);
	}
	#leftSidebar {
		padding-right: 5px;
	}
	#rightSidebar {
		padding-left: 5px;
	}
}

/* md break */
@media (min-width: 768px) {
	#leftSidebar .container, #rightSidebar .container {
		border-radius: 0 0 10px 10px;
	}
	
	#leftSidebar div.container, #rightSidebar div.container {
		padding-top: 0;
		border-top: 0px;
		border-radius: 0 0 10px 10px;
	}
	
	#leftSidebar .container > .col, #rightSidebar .container > .col {
		border-radius: 0 0 10px 10px;
	}
	
	#leftSidebar, #rightSidebar {
		margin-top: 0;
	}
	
	#leftSidebar .container > .col .tagArea {
		border-radius: 0;
	}
	
	#leftSidebar .container > .col, #rightSidebar .container > .col, #content .container-fluid > .col {
		border-top: 0 !important;
	}
	
	.col-md-25 {
		width: 25% !important;
	}
}

.miniIcon {
	max-width: 50px;
	max-height: 50px;
}


.error, .alert {
	margin: 0;
	padding: 5px;
	display: block;
	color: #0a0b09;
	text-align: center;
}

.error a:link, .error a:visited, .alert a:link, .alert a:visited {
	color: #0a0b09;
}

.error a:hover, .error a:active, .alert a:hover, .alert a:active {
	color: #ffffff
}

.error {
	background-color: rgba(233, 86, 65, 0.3);
}

.alert {
	background-color: rgba(124, 233, 65, 0.3);
}


/*** extra styles ***/

.ui-dialog {
    font-family: Segoe UI, Verdana;
    font-size: 0.85rem;
    padding: 20px;
}
.ui-widget-overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-image: url(../images/30grey.png);
}

.ui-dialog-titlebar {
	text-align: center;
}

.ui-tabs-hide {
    display: none;
}
.ui-tabs-nav li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.ui-tabs-nav {
    display: block;
    text-align: center;
    padding: 0;
}

.centerblock {
    margin: 0 auto;
}

blockquote {
    padding: 0;
    margin: 0;
    -webkit-margin: 0;
    text-indent: 2em;
}

.flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.text-right {
	text-align: right;
}

.float-right {
	float: right;
}

.curFocus td {
    background: none !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.itemInfo {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.itemInfo a, .itemInfo div {
	display: block;
	padding: 2px;
	margin: 2px;
	text-align: center;
	cursor: pointer;
}

#inventory td {
	position: relative;
}

#mtop, #mleft, #mright, #mbottom {
	width: 75px;
	height: auto;
	text-align: center;
	margin: 5px !important;
}

.meadowAlert div {
	text-align: center;
}

.meadowAlert span.close {
	display: block;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 4px 10px;
	text-align: center;
	border-radius: 5px;
}

.meadowAlert span.close:hover {
	background-color: rgba(255, 255, 210, 0.5);
	cursor: pointer;
}

.commentsTable .userInfo {
	width: 1%
}

.commentsTable .userInfo img {
	width: 100px;
	height: 100px;
}

.demoMarking .markingMoveButton {
	cursor: move;
}

.imageIcon {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.imageIcon img {
	max-width: 100px;
	max-height: 100px;
	margin: auto;
	align-self: center;
}

.colorbox {
	width: 100px;
	padding: 5px;
	text-align: center;
	margin: 5px auto;
	display: inline-block;
	border: 1px solid;
	border-radius: 2px;
}

.colorbox {
	color: #000;
}
.colorbox.lightText {
	color: #fff;
}

.hide {
	display: none;
}

.demoMarking .colorpick {
	width: 120px;
}

.maxw-100 {
	max-width: 100%;
}

.w-33 {
	width: 33.33%;
}

.minibar {
	height: 6px;
}

.title-highlight {
	position: relative;
}

.title-highlight:before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: -25px;
	width: 25px;
	height: 25px;
	background-image: url(../items/moon_gold.png);
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 25px 25px;
    padding-left: 25px;
}

.ghfGryff {
	position: relative;
}

.ghfSale .gryffName::before {
	content: url(../images/layouts/gold.png);
	top: 2px;
    position: relative;
}

.ghfSale img {
	box-shadow: 0 0 5px gold;
	background-color: rgba(255, 215, 0, 0.15);
}

.ghfGryff:hover {
	background-color: rgba(128, 128, 128, 0.3);
}

.form-control:focus, .form-select:focus, .form-check-input:focus,
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active {
	outline: 0;
}

.flex-grow-auto {
	flex: 1 1 0px;
}

#gryffsDesc img {
	max-width: 100%;
}

.activeState {
	box-shadow: inset 0px 0px 5px 0px;
}

.activeState::after {
	font-weight: bold;
	content: " *";
}

@media (min-width: 0) {
	
	.w-0-25 {
		width: 25%;
	}
	.w-0-33 {
		width: 33.33%;
	}
	.w-0-50 {
		width: 50%;
	}
	.w-0-75 {
		width: 75%;
	}
	.w-0-100 {
		width: 100%;
	}
	
}

@media (min-width: 400px) {
	
	.w-xs-25 {
		width: 25%;
	}
	.w-xs-33 {
		width: 33.33%;
	}
	.w-xs-50 {
		width: 50%;
	}
	.w-xs-75 {
		width: 75%;
	}
	.w-xs-100 {
		width: 100%;
	}
	
}

@media (min-width: 576px) {
	
	.w-sm-25 {
		width: 25%;
	}
	.w-sm-33 {
		width: 33.33%;
	}
	.w-sm-50 {
		width: 50%;
	}
	.w-sm-75 {
		width: 75%;
	}
	.w-sm-100 {
		width: 100%;
	}
	
}

@media (min-width: 768px) {
	.w-md-25 {
		width: 25%;
	}
	.w-md-33 {
		width: 33.33%;
	}
	.w-md-50 {
		width: 50%;
	}
	.w-md-75 {
		width: 75%;
	}
	.w-md-100 {
		width: 100%;
	}
	
	.pr-md-0 {
		padding-right: 0;
	}
}

@media (min-width: 992px) {
	.w-lg-25 {
		width: 25%;
	}
	.w-lg-33 {
		width: 33.33%;
	}
	.w-lg-50 {
		width: 50%;
	}
	.w-lg-75 {
		width: 75%;
	}
	.w-lg-100 {
		width: 100%;
	}
}

@media (min-width: 1200px) {
	
	.w-xl-25 {
		width: 25%;
	}
	.w-xl-33 {
		width: 33.33%;
	}
	.w-xl-50 {
		width: 50%;
	}
	.w-xl-75 {
		width: 75%;
	}
	.w-xl-100 {
		width: 100%;
	}
}