h1, h2, a, label	{ font-family: 'Slabo 27px', serif; }
h3, h4, p, li	{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }


h1			{ font-size: 3.0em; margin-top: 0px; }
h2			{ font-size: 1.8em; margin-top: 18px; }
h3		 	{ font-size: 1.3em; margin-top: 18px; }
label		{ font-size: 1.3em; }
h4			{ font-size: 1.2em; margin-top: 16px; }
p			{ font-size: 0.9em; font-weight: normal; margin-top: 10px; line-height: 1.3; }
ul, ol		{ margin-top: 16px; }
li			{ font-size: 1.0em; font-weight: normal; line-height: 1.1; }

html, body, #navBox, #bodyArea	{ height: 100%; overflow-y: hidden; }
body		{ }

#navBox		{ float: left; display: inline-block; background: rgba(255, 255, 255, 0.75); width: 20%; background-attachment: fixed; margin-bottom: 8%; overflow-y: auto; outline: 2px solid #b5b5b5; }
#navBox p	{ text-align: justify; }
#navBox ul	{ margin-top: 0px; }
#navContent	{ padding: 5%; }
.selectedMenu { font-weight: bold; color: white; cursor: default; }

nav ul li a	{ margin: 0px; background: #6c6c6c; padding-top: 2px; padding-bottom: 2px; padding-left: 20px; padding-right: 6px; color: #e5e5e5; font-size: 1.4em; text-decoration: none; line-height: 1.8; }
nav ul li a:hover { color: white; }

#bodyArea		{ width: 80%; display: inline-block; vertical-align: top; background-attachment: fixed; }
#bodyArea h1, #bodyArea p { color: white; }

#backgroundViewer	{ position: absolute; right: 20px; display: inline-block; background: black; padding: 4px; padding-left: 8px; padding-right: 8px; }
#backgroundViewer p { margin: 0px; }
#backgroundViewer a { color: white; }

#contentBody { margin: 3%; background: rgba(255, 255, 255, 0.75) url(img/TransparentLadies.png) no-repeat; background-position: 97% 100%; max-width: 940px; padding: 3%; border-bottom: 2px solid white; border-right: 2px solid white; -webkit-border-radius: 0.7em; -moz-border-radius: 0.7em; border-radius: 0.7em; }
#contentBody h1	{ color: #6c6c6c; }
#contentBody p	{ width: 80%; color: black; }

#galleryBody	{ background: rgba(0, 0, 0, 0.30); padding: 10px; height: 100%; overflow-y: auto; }

.mediaBox	{ display: inline-block; background: #ccc; vertical-align: top; margin: 3%; margin-top: 35px; width: 24%; outline: 3px #a5a5a5 solid; }
.mediaBoxContent { padding: 10px; }
.mediaBox img { width: 100%; }
.mediaBox:hover { outline: 3px #c5c5c5 solid; }

#transLadies	{ margin: auto; text-align: center; margin-top: 18px; }

p.contactDetail	{ position: relative; font-size: 0.8em; font-style: italic; margin-top: 20px; }
p.contactDetail span { position: absolute; left: 60px; font-size: 1.3em; font-style: normal; }

form			{ width: 80%; max-width: 940px; }
label			{ float: left; width: 40%; }
input			{ float: right; width: 52%; }
fieldset		{ clear: both; vertical-align: top; margin-top: 40px; }
textarea		{ width: 100%; max-width: 940px; max-height: 200px; min-width: 300px; }
input[type="submit"] { width: 120px; }

@media screen and (min-width: 1300px) {
	.mediaBox { width: 18%; }
}
@media screen and (max-width: 1000px) {
	#navBox	 { width: 30%; }
	#bodyArea { width: 70%; }
	.mediaBox { width: 40%; }
}
@media screen and (max-width: 700px) {
	form	  { width: 100%; }
	.mediaBox { width: 90%; }
}
@media screen and (max-width: 500px) {
	#transLadies	{ display: none; }
	body 	{ overflow: auto; }
	#navBox	{ width: 100%; float: none; height: auto; }
	#navBox li	{ text-align: center; }
	#bodyArea { width: 100%; float: none; height: auto; }
	.mediaBox { width: 95%; }
	footer, #backgroundViewer { display: none; }
}

footer		{ width: 100%; background: rgba(0, 0, 0, 0.80); position: fixed; bottom: 0px; }
footer p	{ color: white; font-size: 0.8em; }
footer a	{ color: white; font-weight: bold; text-decoration: underline; font-size: 1.0em; }
footer a:hover { color: #e5e5e5; }
footer img	{ max-height: 48px; float: left; margin: 6px; margin-right: 12px; }