html {
	background-color: #000;
	color: #402f1f;
	font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
	font-family: 'PT Serif', 'Lora', serif;
	font-size: 14pt;
	line-height: 1.6;
	background-image:url(backdrop.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: center top;
}

body {

	background-color: #000;
	padding: 2em;
	width: 800px;
	margin: auto;
	border-left: 10px solid #402f1f;
	border-right: 10px solid #402f1f;
	border-bottom: 10px solid #402f1f;
	border-top: 10px solid #402f1f;
	margin-top: 1em;
	padding-top: 0em;
	padding-bottom: 0em;
	color: #ccbbaa;
	background-image: url(hotmk.png);
	background-position: top right;
	background-repeat: no-repeat;
}

/*	FOOTER	*/
footer {
	border-top: 1px solid #402f1f;
	margin-top: 2em;
	padding-top: 0em;
	padding-bottom: 0em;
	color: #666;
	display: table;
	width: 100%;
	font-size: .7em;
}

footer .footer-columns {
	display: table-row;
}

footer p {
	display: table-cell;
	vertical-align: middle;
	padding: 1em;
	text-align:right;
}

footer p:first-child {
	padding-left: 0em;
}

footer p:last-child {
	padding-right: 0em;
}

footer a[href] {
	color: #402f1f;
}

footer img {
	opacity: .3;
	border-radius: .5em;
}

footer img:hover {
	opacity: 1.0;
	background-color: #402f1f;
}

h1 {
	color: #ccbbaa;
}

header h1 {
	margin-top: 0px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	color: #ccbbaa;
}

h2 {
	border-bottom: 1px solid #402f1f;
}

textarea {
	background-color: #201810;
	color: #ccbbaa;
	font-size: 1.1em;
	font-family: 'PT Serif', 'Lora', serif;
}

input[type=text], input[type=password], input[type=email] {
	font-size: 1.05em;
	padding: 0em 1em;
	background-color: #201810;
	color: #ccbbaa;
	font-family: 'PT Serif', 'Lora', serif;
}

input[type=submit] {
	font-size: 1em;
	padding: 0em 1em;
	color: #201810;
	background-color: #ccbbaa;
	font-family: 'PT Serif', 'Lora', serif;
}

a[href] {
	text-decoration: none;
	font-weight: bold;
}

nav {
	text-align: right;
	background-color: rgba( 0, 0, 0, .75 );
	border-radius: 1em;
	border: 1px solid #402f1f;
}

nav a[href] {
	color: #734b25;
	font-weight: bold;
	text-decoration: none;
}

nav ul {
	display: inline;
}

nav li {
	display: inline;
	font-size: .8em;
	margin-right: 1em;
}

/*	=======================================================
	DUAL BOX LOGIN FORM
	======================================================= */

.dual-box {
	display: table;
}

.dual-box .dual-row {
	display: table-row;
}

.dual-box .dual-row .dual-cell {
	display: table-cell;
	width: 50%;
	vertical-align: top;
}
.dual-box form {
	color: #000;
	background-color: #cdae8e;
	border: 1px solid #402f1f;
	border-radius: 1em;
	margin: 1em;
	padding: 1em;
}

.form-field {

	zmargin-top: 1em;
	margin-bottom: .3em;
	line-height: 1.0;
	
	display: inline-block;
	width: 45%;
	
}

.form-field label {
	font-weight: bold;
	font-size: .8em;
	margin: 0px;
}

.form-field input {
	width: 60%;
}

/*	=======================================================
	NOTICES AND ERROR MESSAGES
	======================================================= */


.error {
	
	border: 1px solid #f00;
	background-color: #300;
	color: #fff;
	padding: 0em 1em;
	border-radius: .5em;
	margin-top: 1em;
	margin-bottom: 1em;
	
}

.notice {
	
	border: 1px solid #0f0;
	background-color: #030;
	color: #fff;
	padding: 0em 1em;
	border-radius: .5em;
	margin-top: 1em;
	margin-bottom: 1em;
	
}

.debug {
	font-size: .5em;
}

.selfie-selfie {
	padding: 0px;
	margin:0px;
	line-height: 0;
}

.selfie-selfie canvas {
	padding: 0px;
	margin: 0px;
}

.selfie-container {
	zborder: 4px solid #402f1f;
	display: inline-block;
	background-color: #000;
	margin-right: .5em;
	margin-top: .5em;
	position:relative;
	vertical-align: top;
}

.selfie-spelunker-name {
	text-align: center;
	font-weight: bold;
}

.selfie-caption {
	font-style: italic;
	text-align: center;
	font-size: .9em;
}

			.cave-info {
				display: table;
			}
			.cave-info-content {
				display: table-row;
			}
			.cave-info .cave-info-description {
				table-cell;
				padding-left: 2em;
			}
			.cave-info-stats {
				display: table-cell;
			}
			.cave-info-stats a[href] {
				display: block;
				border: 5px solid #402f1f;
				border-radius: .5em;
				text-align: center;
				background-color: #734b25;
				color: #fff;
				font-weight: bold;
				text-decoration: none;
				margin-top: 0px;
				box-shadow: 0px 5px 3px rgba(0,0,0,.5);
			}
			.cave-info a[href]:active {
				-webkit-transform: translateY(3px);
				transform: translateY(3px);
				box-shadow: none;
			}
			#enter-cave-button {
				margin-bottom: 1em;
			}

.challenge-frame {
	border: 3px solid #734b25;
	padding: 2em;
	background-color: #402f1f;
	font-weight: bold;
	
}

.challenge-frame a[href] {
	color: #734b25;
}


/*		SELFIE BROWSER		*/

.selfie-browser {
	display: table;
}

.selfie-navigation {
	display: table-row;
}

.selfie-container, .selfie-navigator-left, .selfie-navigator-right {
	display: table-cell;
	vertical-align: middle;
	font-size: .8em;
}

.selfie-container canvas, .selfie-frame canvas {
	border: 1px solid #181818;
}

.selfie-navigation-button {
	padding: 1em .5em;
	border-radius: .5em;
	font-size: 3em;
	font-weight: bold;
	margin: .2em;

   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
   cursor:pointer;
}

.selfie-navigation-button:hover {
	background-color: rgba(255,255,255,.1);
}

.selfie-header,
.selfie-footer,
.selfie-coordinates
{
	opacity: 0.0;
}

.selfie-container:hover .selfie-header,
.selfie-container:hover .selfie-footer,
.selfie-container:hover .selfie-coordinates
{
	opacity: 0.7;
}

.selfie-header {
	position: absolute;
	width: 100%;
	text-align: center;
	zleft: 0px;
	top: 0px;
	padding-left: 5px;
	padding-top: 5px;
	font-family: sans-serif;
	font-weight: bold;
	background-color: #000;
}

.selfie-header a[href] {
	color: #fff;
	text-decoration: underline;
}

.selfie-footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding-left: 5px;
	padding-bottom: 5px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: .9em;
	line-height: 1.1;
	text-align: left;
}

.selfie-coordinates {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding-right: 5px;
	padding-bottom: 5px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: .9em;
	line-height: 1.1;
	text-align: right;
}

.selfie-meta-row {
	display: table-row;
	text-align: center;
	border: 1px solid #f00;
}

.selfie-block {
	font-size: .8em;
	font-family: sans-serif;
	font-weight: bold;
	display: table-cell;
	text-align: center;
}

.selfie-deletion-control a[href] {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	border-left: 1px solid #181818;
	border-bottom: 1px solid #181818;
	background-color: #600;
	font-weight: bold;
	color: #999;
}

.comments {
	display: table;
	width: 100%;
	font-size: .9em;
}

.comment {
	position: relative;
	padding: 1em;
	display: table-row;
	border-collapse: collapse;
}

.comment .attribution {
	display: table-cell;
	width: 30%;
	text-align: right;
	font-weight: bold;
	padding-right: 1em;
	border-right: 1px solid #402f1f;
	vertical-align: top;
	padding: 1em;
}

.comment .body {
	display: table-cell;
	padding: 1em;
	vertical-align: top;
	border-bottom: 1px solid #402f1f;
}

.comment .body p:first-child {
	margin-top: 0em;
}

.comment .forum-action {
	display: table-cell;
	padding-left: 1em;
	vertical-align: middle;
	border-bottom: 1px solid #402f1f;
	background-color: #300;
	border-left: 1px solid #600;
	padding-right: 1em;
}

.comment .forum-action a[href] {
	color: #c00;
}

.comment:nth-child(even) .body {
	background-color: #100b08;
}

.comment:nth-child(odd) .body {
	background-color: #080604;
}