/*-------------------------
	Simple reset
--------------------------*/


*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/


html{
	background:#2c3e50 no-repeat center center fixed;
	min-height:100%;
	background-size:cover;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	color: #fff;
	min-height:100%;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside{
	display: block;
}


/*-------------------------
	The Login Form
--------------------------*/


#login-register{
	background-color:#242424;
	box-shadow:0 2px 5px rgba(0,0,0,0.5);
	padding: 20px;
	position: relative;
	width: 500px;
}

@media screen and (min-width: 980px ){
	#login-register{
		width:500px;
		position:absolute;
		top:50%;
		left:50%;
		margin:-235px 0 0 -325px;
		height:320px;
		padding: 65px 75px;
	}
}

#login-register h1{
	font-size:36px;
}

#login-register input{
	font: inherit;
	font-size: 18px;
	line-height: 30px;
	background-color: #363636;
	color: #fff;
	padding: 10px 20px;
	border: none;
	display: block;
	width: 90%;
	margin: 45px 0 15px;
	outline: none;
}

#login-register p{
	line-height:1.4;
}

#login-register button{
	display:inline-block;
	margin-top:50px;
	
	font:inherit;
	font-weight:bold;
	font-size:20px;

	cursor:pointer;

	background-color:#5ca1cd;
	color:#fff;
	padding:20px 45px;

	border:none;
	border-bottom:3px solid #3f84b0;
	border-radius:3px;
}

#login-register button:hover{
	background-color:#61a8d5;
}

#login-register.loggedIn button{
	cursor: default;
	background-color: #555 !important;
	border-bottom-color: #444 !important;
	color: #aaa !important;
}

#login-register span.result {
	line-height:1.4;
	font-size: 12px;
	position: absolute;
	bottom: 45px;
	width: 225px;
	height: 20px;
	margin-left: 10px;
	color: #85bb2f;
	background:url('../img/preloader.gif') 0 -1000px no-repeat;
}

@media screen and (min-width: 980px ){
	#login-register span.result {
		bottom: 85px;
	}
}

#login-register.error span.result {
	color: #ee5ea5;	
}

#login-register.loading span.result {
	color: transparent;
	background-position: 0 100%;
}


/*-------------------------
	The modern page
--------------------------*/

.modern-page {
	width:500px;
	margin:100px auto 50px;
	background-color:#fff;
	border-radius:3px;
	box-shadow:0 2px 5px rgba(0,0,0,0.2);
	padding:85px 0;
	color:#2d2d2d;;
	font-size:20px;
}

@media screen and (min-width: 980px ){
	.modern-page {
		width:980px;
	}
}

.modern-page .center {
	text-align: center;
}

.modern-page blockquote {
	margin:10px 20px;
}


.modern-page h1{
	font-size:40px;
	margin:20px 0 50px;
	text-align:center;
}

.modern-page h2 {
	font-size:30px;
	margin-top:50px;
	margin-bottom:20px;
	text-align:center;
}

.modern-page h3 {
	margin-top:30px;
	margin-bottom:10px;
}

.modern-page p{
	line-height: 1.5;
	margin-bottom: 10px;
}

.modern-page ul, ol {
	padding: 0 30px;
	margin-bottom: 10px;
}

.modern-page .content-panel {
	padding: 20px;
}

.modern-page .user-panel{
	text-align:center;
	background-color: #ecf0f1;
	padding:20px 0;
	color:#2d2d2d;;
	font-size:20px;

	border-top: 1px solid #bdc3c7;
	border-bottom: 1px solid #bdc3c7;

	margin: 20px 0;
}

.modern-page .form-panel{
	position: relative;

	background-color: #ecf0f1;
	padding:20px;
	color:#2d2d2d;;
	font-size:20px;

	border-top: 1px solid #bdc3c7;

	margin: 20px 0;
}

.modern-page .info-panel{
	position: relative;

	background-color: #e9cf5b;
	padding:20px;
	color:#2d2d2d;;
	font-size:30px;

	border-top: 1px solid #cea904;

	margin: 20px 0;
}

.modern-page a.logout-button {
	
	/* The logout button */

	display:inline-block;
	margin:0 20px;
	padding:10px 30px;
	text-decoration: none !important;
	color:#fff !important;
	background-color:#95a5a6; 

	font-weight:bold;
	font-size:16px;

	border-radius:3px;
	border-bottom:3px solid #7f8c8d;
}

.modern-page a.logout-button:hover{
	background-color:#3daefa; 
}

.modern-page .app-logo {
	width:300px;
}

.modern-page button {
	display:inline-block;
	
	font:inherit;
	font-weight:bold;
	font-size:20px;

	cursor:pointer;

	background-color:#5ca1cd;
	color:#fff;
	padding:20px 45px;

	border:none;
	border-bottom:3px solid #3f84b0;
	border-radius:3px;
}

.modern-page button.join {
	background-color:#33aa65;
	border-bottom:3px solid #225803;
}

.modern-page button.cancel {
	background-color:#aa3333;
	border-bottom:3px solid #580303;
}

.modern-page table.simple-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
}
.modern-page table.simple-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.modern-page table.simple-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

/*-------------------------
	The Invitation Form
--------------------------*/

#invitation-register {
	margin:10px 20px;
}

#invitation-register .address-form {
	display: inline-block;
	width: 80%;
}

#invitation-register input{
	font-size: 18px;
	line-height: 30px;
	background-color: #fff;
	color: #363636;
	padding: 10px 2%;
	border: none;
	display: block;
	width: 96%;
	margin: 10px 0 10px 0px;
	outline: none;
	border:1px solid #363636;

}

#invitation-register p {
	line-height:1.4;
}

#invitation-register button{
	display:inline-block;
	
	font:inherit;
	font-weight:bold;
	font-size:20px;

	cursor:pointer;

	background-color:#5ca1cd;
	color:#fff;
	padding:20px 45px;

	border:none;
	border-bottom:3px solid #3f84b0;
	border-radius:3px;
}

#invitation-register button:hover{
	background-color:#61a8d5;
}

#invitation-register span.result {
	line-height:1.4;
	height: 14px;
	font-size: 14px;
	position: absolute;
	bottom: 45px;
	width: 200px;
	height: 20px;
	right: 5px;
	color: #85bb2f;
	background:url('../img/preloader.gif') 0 -1000px no-repeat;
	display:block;
	text-align: left;
}

#invitation-register.error span.result {
	color: #ec0752;	
}

#invitation-register.loading span.result {
	color: transparent;
	background-position: 0 100%;
}

#invitation-register .text-confirm{
	margin-top:20px;
	font-size:16px;
	font-style: italic;
}



/*-------------------------
	The Invitation Form
--------------------------*/

.user-form {
	margin:10px 20px;
}

.user-form .input-panel {
	display: inline-block;
	width: 80%;
}

.user-form input[type="text"], 
.user-form input[type="number"],
.user-form fieldset, 
.user-form select, 
.user-form textarea {
	font: inherit;
	font-size: 18px;
	line-height: 30px;
	background-color: #fff;
	color: #363636;
	padding: 10px 2%;
	border: none;
	display: block;
	width: 96%;
	margin: 10px 0 10px 0px;
	outline: none;
	border:1px solid #363636;
}

.user-form fieldset {
	text-align: left;
}

.user-form input[type="checkbox"] {
	margin: 10px;
}

.user-form p {
	line-height:1.4;
}

.user-form button{
	display:inline-block;
	
	font:inherit;
	font-weight:bold;
	font-size:20px;

	cursor:pointer;

	background-color:#5ca1cd;
	color:#fff;
	padding:20px 45px;

	border:none;
	border-bottom:3px solid #3f84b0;
	border-radius:3px;

	margin-left:20px;
}

.user-form button:hover{
	background-color:#61a8d5;
}

.user-form span.result {
	line-height:1.4;
	height: 14px;
	font-size: 14px;
	position: absolute;
	bottom: 50px;
	width: 250px;
	height: 20px;
	right: 5px;
	color: #85bb2f;
	background:url('../img/preloader.gif') 0 -1000px no-repeat;
	background-size:contain;
	display:block;
	text-align: left;
}

.user-form.error span.result {
	color: #ec0752;	
}

.user-form.loading span.result {
	color: transparent;
	background-position: 0 100%;
}