/*
 * Copyright 2012 soundarapandian
 * Licensed under the Apache License, Version 2.0
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

html {
	min-height: 100%;
	position: relative;
}

body {
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	padding-bottom: 9rem;
	font-family: opensans, arial, Sans-Serif;
	font-size: 12pt;
}

/* header */

header {
	z-index: 80;
}

div.logo {
	background-color: #ffffff;
	position: relative;
	z-index: 100;
	width: 100%;
	padding: 1rem 0px;
}

header h1 {
	display: block;
	width: 30rem;
	max-width: 95%;
	margin: 0px auto;
	font-family: baskerville, Serif;
}

header h1 img {
	width: 100%;
}

.toggle-holder {
	display: none;
}

.navbar-toggler {
	margin: 0px auto;
	padding: 3rem;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.navbar-toggler div {
	background-color: #ffffff;
	width: 5rem;
	height: 8px;
	margin: 0px 0px 5px 0px;
	padding: 0px;
}

ul.navbar-nav {
	list-style: none;
	margin: 0px 0px 1rem 0px;
	padding: 0px;
	text-align: center;
}

ul.navbar-nav li {
	display: inline-block;
	padding: 0px 0.5rem;
}

ul.navbar-nav a {
	display: block;
	padding: 0.2rem 0.8rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 600;
}

ul.navbar-nav a.nav-signin {
	color: #b893c9;
}

ul.navbar-nav a:link, ul.navbar-nav a:visited {
	color: #6497bc;
}

ul.navbar-nav a.current:link, ul.navbar-nav a.current:visited {
	color: #086e9b;
}

ul.navbar-nav li.nav-pink a:link, ul.navbar-nav li.nav-pink a:visited {
	color: #b893c9;
}

ul.navbar-nav li.nav-pink a.current:link, ul.navbar-nav li.nav-pink a.current:visited {
	color: #6e0f99;
}

ul.navbar-nav li.nav-signin a {
	border: 1px solid #b893c9;
}

ul.navbar-nav li.nav-signin a.current {
	border: 1px solid #6e0f99;
}

li.dropdown {
	position: relative;
}

ul.dropdown-menu {
	box-sizing: border-box;
	display: none;
	overflow: hidden;
	position: absolute;
	top: 100%;
	left: 0px;
	background-color: #ffffff;
	min-width: 12rem;
	padding: 1rem 0px;
}

/* banner */
div.banner {
	box-sizing: border-box;
	width: 100%;
	min-height: 16rem;
	margin: 0px;
	padding: 0px;
	background-color: #63767e;
	background-image: url('images/banner.jpg');
	background-size: auto 100%;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	text-align: center;
	line-height: 16rem;
}

div.banner div {
	line-height: normal;
	display: inline-block;
	vertical-align: middle;
	margin: 3rem 0px;
	width: 30rem;
	max-width: 95%;
	text-align: left;
}

div.banner h2 {
	font-weight: normal;
	font-size: 250%;
	font-family: baskerville, Serif;
	margin: 0px;
}

div.banner a.outline {
	margin-top: 2rem;
	margin-right: 2rem;
	border: 1px solid #ffffff;
}

div.banner a:link, div.banner a:visited {
	color: #ffffff;
}

/* content */

section {
	padding: 2rem 1rem;
}

section.alert {
	padding-bottom: 0px;
}

section.last {
	margin-bottom: 5rem;
}

div.container {
	max-width: 66rem;
	margin: 0px auto;
}

/* login / register */

#loginForm div.panel {
	max-width: 33rem;
	margin: 1rem auto;
	text-align: left;
}

#registerForm div.panel, div.p44 {
	max-width: 44rem;
	margin: 1rem auto;
	text-align: left;
}

.register, .login, .contact {
	display: grid;
	grid-template-columns: 3fr 2fr 1fr;
	align-items: top;
	gap: 1rem 5%;
}

.login {
	grid-template-columns: 3fr 0fr 1fr;
}

.contact {
	grid-template-columns: 2fr 2fr 1fr;
	gap: 0px 5%;
}

.col1 {
	grid-column-start: 1;
}

.col2 {
	grid-column-start: 2;
}

.col12 {
	grid-column-start: 1;
	grid-column-end: 3;
}

.col23 {
	grid-column-start: 2;
	grid-column-end: 4;
}

.fmnform div.control-group {
	margin-bottom: 1rem;
}

.fmnform input, .fmnform textarea {
	border: 1px solid #007088;
	border-radius: 0.5rem;
	padding: 0.5rem;
	display: block;
	width: 100%;
	margin: 0.2rem 0px 0.5rem 0px;
}

.fmnform textarea {
	height: 12rem;
	resize: vertical;
}

.fmnform .btn {
	width: auto;
	padding: 0.5rem 4rem;
}

div.flower {
	grid-column-start: 3;
	position: relative;
}

div.flower img {
	position: absolute;
	top: 0px;
	right: 1px;
	width: 100%;
}

p.link-register {
	margin: 1rem 0px 0px 0px;
}

/* forms */

input, select, textarea, .btn {
	box-sizing: border-box;
	font-size: 100%;
	padding: 0.2rem;
	height: auto;
	font-family: inherit;
}

.btn, a:link.btn, a:visited.btn {
	display: inline-block;
	border: 1px solid #007088;
	border-radius: 0.5rem;
	background-color: #007088;
	color: #ffffff;
	text-transform: uppercase;
	width: auto;
	padding: 0.5rem 4rem;
	font-weight: 600;
	display: inline-block;
	margin: 0.2rem;
	text-align: center;
	cursor: pointer;
}

.btn-small, a:link.btn-small, a:visited.btn-small, .fmnform .btn-small {
	font-size: 90%;
	padding: 0.2rem 1rem;
	width: auto;
}

.btn-danger, a:link.btn-danger, a:visited.btn-danger {
	border: 1px solid #cc0000 !important;
	background-color: #cc0000;
	color: #ffffff;
}

.btn:disabled, a:link.btn:disabled, a:visited.btn:disabled {
	background-color: #999999 !important;
	border-color: #999999 !important;
	cursor: default;
}

.listnote {
	font-style: italic;
	font-weight: normal;
	font-size: 90%;
}

.btn-add-new {
	float: right;
	margin: 0px 0px 1rem 1rem;
}

.control-group label {
	font-weight: 600;
}

.btn-disabled, .fmnform .btn-disabled {
	background-color: #888888;
	border: #888888;
	cursor: default;
}

/* tables */

table {
	width: 100%;
	border: none;
	border-collapse: collapse;
}

th {
	font-weight: 900;
}

th, td {
	text-align: left;
	margin: 0px;
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid #000000;
}

/* misc */
a:link, a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: 600;
}

a.outline {
	display: inline-block;
	border: 1px solid #808080;
	border-radius: 1.5em;
	padding: 0.6em 2em;
	text-transform: uppercase;
	font-weight: 900;
	text-decoration: none;
	font-size: 90%;
}

.fr {
	float: right;
}

.tac {
	text-align: center;
}

.tar {
	text-align: right;
}

.dib {
	display: inline-block;
}

.hidden {
	visibility: hidden;
	height: 0px;
}

div.intro {
	max-width: 32rem;
	margin: 0px auto 2rem auto;
	text-align: center;
}

h2.pink {
	color: #b893c9;
	text-transform: uppercase;
	font-weight: normal;
}

hr {
	margin-top: 2.5rem;
	border: 1px solid #b893c4;
	grid-column: span 2;
	width: 100%;
}

div.panel {
	background-color: #ffffff;
	box-shadow: rgba(0,0,0,0.3) 0px 0px 15px;
	padding: 2rem 2rem 1rem 2rem;
	position: relative;
}

.validation-summary-errors ul {
	xmargin: -1rem 0px 1rem 0px;
	margin: 0px 0px 1rem 0px;
	list-style-type: none;
	padding: 0px;
	color: #cc0000;
	font-weight: 600;
}

.field-validation-error {
	color: #cc0000;
	font-weight: 600;
	font-size: 90%;
}

.alert {
	margin-bottom: 0.5rem;
}

.alert-info {
	background-color: #ccffcc;
	color: #009900;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

.alert-error {
	background-color: #ffcccc;
	color: #990000;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

.close-alert {
	float: right;
	cursor: pointer;
}

/* footer */
footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #007088;
	color: #ffffff;
	text-align: center;
	padding: 1rem;
	font-weight: 600;
	font-size: 90%;
}

footer p {
	margin: 1rem 0px;
	padding: 0px;
}

footer a:link, footer a:visited {
	color: #ffffff;
}

/* modal */

div.modal-background {
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(127,127,127,0.3);
	z-index: 200;
	padding: 10% 2%;
	overflow: scroll;
}

div.modal {
	display: none;
	position: relative;
	background-color: #ffffff;
	max-width: 60rem;
	margin: 2rem auto 2rem auto;
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: rgba(0,0,0,0.3) 10px 10px 15px;
}

#loginModal .modal {
	max-width: 33rem;
}

#loginModal h3 {
	margin: 0px;
}

button.btn-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	height: 2rem;
	width: 2rem;
	border-radius: 50%;
	border: 1px solid #000000;
	font-size: 130%;
	font-weight: normal;
	cursor: pointer;
}

.grecaptcha-badge {
	visibility: hidden;
	position: absolute;
}

p.recaptcha-info {
	opacity: 0.6;
	font-size: 80%;
	margin-bottom: 2rem;
}

/* mobile */
@media (max-width: 850px) {
	body {
		font-size: 10pt;
	}

	header nav {
		position: relative;
		z-index: 90;
	}

	.toggle-holder {
		display: block;
		background-color: #63767e;
		background-image: url('images/banner.jpg');
		background-size: auto 100%;
		background-size: cover;
		background-position: center;
		color: #ffffff;
		position: relative;
		text-align: center;
		z-index: 100;
	}

	.navbar-collapse {
		display: block;
		position: absolute;
		width: 100%;
		box-shadow: rgba(0,0,0,0.3) 0px 5px 5px;
		z-index: 90;
		top: 100%;
		background-color: #ffffff;
	}

	.collapse {
		top: -10rem;
	}

	ul.navbar-nav {
		margin: 0.5rem 0px 1rem 0px;
		position: relative;
		z-index: 100;
		width: 100%;
	}

	ul.navbar-nav li {
		display: block;
	}

	ul.navbar-nav a {
		padding: 0.5rem;
	}

	ul.dropdown-menu {
		position: relative;
		top: 0px;
		min-width: 100%;
		padding: 1rem 0px;
	}


	div.banner {
		background-color: #ffffff;
		background-image: none;
		color: #007088;
		min-height: 0px;
		text-align: center;
		margin: 0px;
		padding: 0px;
		line-height: normal;
	}

	div.banner div {
		width: 40rem;
		margin: 2rem 0px 1rem 0px;
	}

	div.banner a:link, div.banner a:visited {
		color: #007088;
		border-color: #007088;
		font-size: 120%;
	}

}

@media (max-width: 600px) {
	.register, .contact {
		display: block;
	}

	.register div.flower img, .contact div.flower img {
		position: static;
		display: block;
		width: 7rem;
		float: none;
		max-width: 100%;
		margin: 0px auto 1rem auto;
	}
}

@media (max-width: 500px) {
	div.banner h2 {
		font-size: 150%;
	}

	.login {
		display: block;
	}

	.login div.flower img {
		position: static;
		display: block;
		width: 7rem;
		float: none;
		max-width: 100%;
		margin: 0px auto 1rem auto;
	}

	.register .btn, .register a:link.btn, .register a:visited.btn, .contact .btn {
		width: 100%;
		padding: 0.5rem;
	}

	div.modal, div.panel {
		padding: 1rem;
	}

}

/* fonts */
@font-face {
	font-family: 'opensans';
	src: url('fonts/OpenSans-Light.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/OpenSans-SemiBold.ttf');
	font-weight: 600;
}

@font-face {
	font-family: 'opensans';
	src: url('fonts/OpenSans-Bold.ttf');
	font-weight: 900;
}

@font-face {
	font-family: 'baskerville';
	src: url('fonts/LibreBaskerville-Italic.ttf');
	font-weight: normal;
}