@charset "utf-8";

	*{margin:0; padding:0}
	
	html, body{
		font-family: 'Open Sans', sans-serif;
		font-size:14px;
		line-height:18px;
		color:#333;
		height:100%;
	}

	@font-face {
		font-family: 'Open Sans';
		src: url('OpenSans-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
		font-family: 'TitilliumText22LThin';
		src: url('TitilliumText22L001-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

/* --------------- Layout Section ---------------*/
	.wrapper {
	  display: flex;  
	  flex-flow: column nowrap;
	  height:100%;
	}
	
	.header {
	  padding:7px;
	  background:#f4f7f4;
	  border-bottom:1px solid #e2e2e2;
	}
	
	.main {
	  position:relative;
	  flex:1 0;
	}

	.footer {
		font-size:12px;
		background:#f1fcf9;
	}
	
	.box-full{
		position:relative;
		display:block;
		/*border:1px solid #063;*/
	}


/* --------------- General Section ---------------*/
	a{text-decoration:none; color:#008a00}
	em{font-style:italic;}
	strong{font-weight:bold;}
	sup {vertical-align: super;	font-size: smaller;}
	img {display:block}
	p{line-height:1.6em}
	
	button i{margin-right:5px}
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
	textarea{
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		outline: none;
		padding: 8px 5px;
		border: 1px solid rgba(1, 104, 6, .3);
		background: #fefefe;
		min-width:200px;
		-webkit-border-radius:2px;
		-khtml-border-radius:2px;
		border-radius:2px;
	}
	
	select{
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-ms-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		outline: none;
		padding: 6px 5px 5px;
		border: 1px solid rgba(1, 104, 6, .3);
		min-width:55px;
		background:#fff;
		display:inline-block;
		-webkit-border-radius:2px;
		-khtml-border-radius:2px;
		border-radius:2px;
	}

	option{
		height:28px;
		line-height:28px;
	}     
	
	@-moz-document url-prefix(){
		select{
			padding-right:7px;
		}
		option{
			height:15px;
			padding:1px 2px 3px;
		}
	}
	
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
	textarea:focus, select:focus{
		box-shadow: 0 0 5px rgba(1, 104, 6, 1);
		border: 1px solid rgba(1, 104, 6, .5);
		background-color: #fff;
		outline: 0 none;
	}

	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):disabled,
	textarea:disabled, select:disabled{
		background:#fdfdd3;
		border: 1px solid #f2f2f2;
	}

	input[type=number]::-webkit-inner-spin-button, 
	input[type=number]::-webkit-outer-spin-button { 
	  -webkit-appearance: none; 
	  margin: 0; 
	}

	input[type=number] {-moz-appearance:textfield;}
	
	input.small:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:50px;
		width:50px;
	}

	input.medium:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:90px;
		width:90px;
	}

	input.mlarge:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:350px;
		width:350px;
	}

	input.large:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:300px;
		width:300px;
	}

	input.xlarge:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:400px;
		width:400px;
	}
	
	h1{font-size:30px;font-weight:lighter}
	h2{font-size:24px;font-weight:lighter}
	h3{font-size:18px;font-weight: 400; }
	h4{font-size:16px;font-weight: 400; }
	h5{font-size:12px;font-weight:lighter}
	h6{font-size:11px;}
	
    h1, h2, h3, h4, h5, h6 {line-height: 1.6em;}

/* --------------- Header ---------------*/

	.logo {margin-bottom:10px;}
	.logo img{height:55px;}

/* --------------- Chat Window ---------------*/

	.content{display:table; width:100%; height:100%; overflow:hidden}
	.content > li{display:table-cell; position:relative;}
	.content > li:last-child{width:16%; border-left:10px solid #c2c2c2;}

	#msgs-box{position:absolute;left:0; right:0; top:0;bottom:51px;overflow:auto; padding:10px;}
	#msgs-box p{margin-bottom:5px; padding:4px;}
	#msgs-box span {margin-right:10px;}

	#msgs-box p.error{color:red;font-style:italic;}
	#msgs-box p.info{color:blue; font-style:italic;}
	#msgs-box p.success{color:green; font-style:italic;}
	
	#msgs-box p.error span.username{color:red;}
	#msgs-box p.info span.username{color:blue;}
	#msgs-box p.success span.username{color:green;}
	
	#msgs-box span.username{color:#0262c6;}
	#msgs-box span.me, #msgs-box span.username.me {color:#028914;}
	
	#members_box {
		display:block;
	}
	#members_box li{
		display:block;
		margin:5px;
		width:auto;	
	}
	
	#members_box li img{
		display: inline-block;
		margin-right:5px;
		vertical-align:middle;
		width:14px;	
	}

/* --------------- Data Grid ---------------*/

	.table-cols{display:table; table-layout:fixed; width:100%}
	.table-cols li{display:table-cell;}

	.oddRow {background-color: rgba(241,241,241,.3); /*#f1f1f1;*/}
	.evenRow {background-color: rgba(234,239,247,.3); /*#eaeff7;*/}
	.oddRow:hover,
	.evenRow:hover{background-color:rgba(235,246,224,.3); /*#EBF6E0;*/}
	

/* --------------- Footer ---------------*/

	.footer-bottom {
		display:block;
		position:relative;
		border-top:1px solid #0b395c;
		padding:10px 5px;
		background:#1A5C8E;
		color:#f2f2f2;
	}
	
	.copy{display:inline-block; position:relative}
	.bottom-links{display:inline-block; position:relative; float:right}
	.bottom-links a{margin:0 5px; color:#f2f2f2;}
	.bottom-links a:hover{text-decoration:underline}
	
/* --------------- Common Section ---------------*/

	.right{text-align:right}
	.vtop{vertical-align:top;}
	.vbottom{vertical-align:bottom;}
	
	.bg-green{background:#016806}

	.btn{
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px;
		/*background:linear-gradient(#f67d7d, #DE6262);	*/
		background:#008a00;
		font:14px Tahoma, Geneva, sans-serif;
		font-weight:bold;
		color:#fff;
		border:1px solid #015305;
		text-shadow:0px 0px 1px #000;
		padding:7px 10px;
		transition:all .3s ease-in-out;
	}

	.btn:hover{
		cursor:pointer;
		background:#015305;
	}
	
	.btn:disabled{
		cursor:not-allowed;
		background:grey;
	}
	

/*
.container {
	display:flex;
	flex-flow: row wrap;
	height:100%;
}

.container > *{border:1px solid gold;flex: 1 100%}
.content{flex:0 0;overflow:hidden;}

@media all and (min-width: 600px) {
  .side-bar { flex: 1 0 0; }

}

@media all and (min-width: 800px) {
  .content    { flex:4 0; }
  .content    { order: 1; }
  .side-bar { order: 2; }
}
/*
@media all and (max-width: 599px) {
  .content    { order: 2; }
  .side-bar { order: 1; }
}
*/