@charset "utf-8";
/* CSS Document */


	*{margin:0; padding:0}


/* --------------- General Section -----------*/
	html, body {
		font-family: 'Open Sans', sans-serif;
		font-size:14px;
		line-height:18px;
		color:#623736;
		height:100%;
		background:rgba(3,78,162,.7); /*#034da1;*/
		background-size:cover;
		background-attachment:fixed;
	}

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

	@font-face {
		font-family: 'OpenSans-Light';
		src: url('OpenSans-Light.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}
	
	@font-face {
		font-family: 'OpenSans-LightItalic';
		src: url('OpenSans-LightItalic.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}
	
	@font-face {
		font-family: 'OpenSans-Semibold';
		src: url('OpenSans-Semibold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}
	
	@font-face {
		font-family: 'OpenSans-SemiboldItalic';
		src: url('OpenSans-SemiboldItalic.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}
	
	@font-face {
		font-family: 'OpenSans-Bold';
		src: url('OpenSans-Bold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	
	}

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

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

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

/* ---------------  Wrapper -----------*/
	

	.container{
		position:relative;
		min-height:100%;
	}
	
	.box{
		position:relative;
		padding:15px;
		/*background:rgba(15,45,27,.5);*/
	}

	.wrapper{
		/*border:1px solid #093;*/
		/*-webkit-border-radius: 2px;*/
		/*-khtml-border-radius: 2px;*/
		/*border-radius:2px;*/
		position:relative;
		display:table;
		padding:15px;
		margin:20px auto;
		max-width:100%;
	}
	
	
	header {
		/*border:1px solid #F36;*/
		position:fixed;
		display:block;
		left:0;
		width:250px;
		min-height:250px;
		background:rgba(50,18,9,.7); /*#321209;*/
		color:#fff;
		/*background:url(../images/bg_header_01.jpg) repeat;*/;
		/*border-bottom:1px solid #a7a9a9;*/
		z-index:11111;
	}
	
	main{
		/*border:1px solid #09F;*/
		position:relative;
		display:block;
		min-height:100%;
		background:rgba(255,255,255,.8);
		margin-left:250px;
	}

	footer {
		position:fixed;
		display:block;
		left:0;
		bottom:0;
		background:#000;
		opacity:.65;
		min-height:30px;   /* Height of the footer */
		font-size:12px;
		line-height: 25px;
		vertical-align:middle;
		color:#F5F7F7;
		width:250px;

		/*
		border-top:1px solid #094e3d;
		box-shadow:0 -1px 2px #3a3a3a;
		*/
	}


/* --------------- General Setting -----------*/
	
	a{text-decoration:none; color:#c40c02}
	em{font-style:italic;}
	strong{font-weight:bold;}
	sup {vertical-align: super;	font-size: smaller;}
	img {display:block} 	
	
	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: 10px 5px;
		border:1px solid rgba(3,78,162, .2);
		background: #fff;
		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(3,78,162, .2);
		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(3,78,162, .7);
		border: 1px solid rgba(3,78,162, .7);
		background-color: #f6f6f6;
		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 rgba(3,78,162, .2);
	}

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

	input.medium:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:auto;
		width:90px;
	}
	
	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.25;        
    }

/* --------------- Header -----------*/
	.title{
		color:#fff;
		padding:10px;
		background:rgba(0,0,0,.5);
		border-bottom:1px solid #b6b6b7;
	}
	
	.nav-title{margin:15px;}
	
/* --------------- Navigation -----------*/
	.mainNav {
		/*border:1px solid #F00;*/
		margin:10px 0 0;
		display:block;
		position:relative;
		min-height:50px;
		border-top:1px solid #381c1a;
	}
	
	.mainNav ul{
		/*border:1px solid #099;*/
		display:block;
		position:relative;
		/*background:rgba(237,28,36,.7); /*#ED1C24;*/
	}
	
	.mainNav li{
		/*border:1px solid #3F0;*/
		display:block;
		position:relative;
		border-left:5px solid #ED1C24;
		border-top:1px solid #81605f;
		border-bottom:1px solid #381c1a;
		border-right:1px solid #381c1a;
	   -moz-transition: all 0.3s ease-in-out;
	   -o-transition: all 0.3s ease-in-out;
	   -webkit-transition: all 0.3s ease-in-out;
	   transition: all 0.3s ease-in-out;
	}
	
	.mainNav ul li > a{
		padding:15px 10px;
		display:block;
		/*border:1px solid #d56a65;*/
		font-weight:bold;
		color:#fff;
	   -moz-transition: all 0.3s ease;
	   -o-transition: all 0.3s ease;
	   -webkit-transition: all 0.3s ease;
	   transition: all 0.3s ease;
		background:url(../images/sub_arrow.png) no-repeat;
		background-position:225px 18px;
		z-index:99999;
	}
	
	.mainNav ul li > a.nosub{background:none}

	.mainNav ul li.active{
		background:rgba(3,78,162,.7); /*#ED1C24;*/
		border-left:5px solid #034EA2;
	}

	.mainNav ul li:hover{
		background:rgba(3,78,162,.7); /*#ED1C24;*/
		border-left:5px solid #034EA2;
		border-top:1px solid #D1DAE6;
		border-bottom:1px solid #D1DAE6;
	}

	.mainNav ul li.active > a{
	
		color:#b4080e;
		text-shadow:0 1px 1px #fff;
		background:rgba(255,255,255,.8) url(../images/sub_arrow.png) no-repeat;
		background-position:225px 18px;
	}

	.mainNav ul li:hover > a{
		color:#034EA2;
		text-shadow:0 1px 1px #fff;
		background:rgba(255,255,255,.8) url(../images/sub_arrow.png) no-repeat;
		background-position:225px 18px;
	}
	.mainNav ul li.active > a.nosub{
		background:rgba(255,255,255,.8);
		color:#b4080e;
		text-shadow:0 1px 1px #fff;
		
	}
	.mainNav ul li:hover > a.nosub{
		background:rgba(255,255,255,.8);
		color:#034EA2;
		text-shadow:0 1px 1px #fff;
	}

	
	.mainNav ul li:hover ul{
		left:244px;
		visibility:visible;
		opacity:1;
	}
	.mainNav ul li:hover ul li{
		background:rgba(3,78,162,.7);
		height:35px;
		width:180px;
	}
	.mainNav ul li:hover ul li a{
		background:rgba(255,255,255,.8);
		color:#b4080e;
		padding:5px 10px;
	}

	.mainNav ul ul{
		visibility:collapse;
		opacity:0;
		top:3px; 
		left:220px; 
		position:absolute;
		-webkit-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}

	.mainNav ul ul li{
		position:relative;
		background:rgba(255,255,255,.8);
		width:0;
		height:0;
		border-top:1px solid #e9eef4;
		border-bottom:1px solid #c0cbd9;
		border-right:1px solid #c0cbd9;
	}
	
	.mainNav ul ul a{
		position:relative;
		display:block;
		font-weight:normal;
		border-right:1px solid #dfe5ed;
		padding:0;
		line-height: 25px;
		font-size: 14px;
		background:none;
	}
	
	.mainNav ul ul li:hover{
		border-top:1px solid #e9eef4;
		border-bottom:1px solid #c0cbd9;
	}
	
	.mainNav ul li ul li a:hover{
		color:#034EA2;
		background:rgba(255,255,255,.8);
	}
	
/* --------------- Main -----------*/
	.page-top{
		/*border:1px solid #096;*/
		display:block;
		position:relative;
		min-height:50px;
		background:linear-gradient(rgba(255,255,255,.8),rgba(197,207,216,.8));
		/*background:linear-gradient(rgba(235,240,245,.8),rgba(255,255,255,.8); /*#ebf0f5;*/
		box-shadow:0 0 10px #034EA2;
	}
	.qlinks{
		display:inline-block;
		margin-top:10px;
		margin-left:5px;
	}
	
	.qlinks a img{display:inline-block; margin:0;padding:0;}
	
	.qlinks a cite{
		display:inline-block;
		font-size:10px;
		min-width:16px;
		padding-right:1px;
		text-align:center; 
		background:#EB0706; 
		border-radius:50%; 
		margin-left:-8px;
		vertical-align:top;
		text-shadow:0px 1px 1px #000;
		color:#fff;
		border:1px solid #a1602c;
	}

	.top-links{text-align:right;
		display:inline-block;
		float:right;
		margin:7px 5px 0;
	}
	
	.top-links img,
	.top-links a{display:inline-block; vertical-align:middle; color:#c40c02}

	.page-title{margin:15px; margin-bottom:0;}
	
	.sub-title{
		margin-top:30px;
		margin-bottom:10px;
		font-weight:bold;
	}
	
/*---------------  input box -------------*/
	.input-box{
		display:table;
		padding:40px;
		background:rgba(255,255,255,.8); /*#fff;*/
		border:1px solid rgba(3,78,162, .2);
		margin:10px auto;
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		border-radius:2px;
	}
	
	.input-box li{
		display:block;
		position:relative;
		margin:20px 0;	
	}

	.input-box li:first-child{margin-top:0}
	.input-box li:last-child{margin-bottom:0}
	
	.input-box input,
	.input-box select{margin-right:5px}

	.input-box li label{
		display:inline-block;
		width:160px;
		margin-right:5px;
	}
	
	.input-box li aside{
		display:inline-block;
	}
	.input-box li.right aside input{margin-left:5px; margin-right:0;}
	
	.input-box li .captcha{display:inline-block; border:1px solid #600000; border-radius:2px;}
	.input-box li .captcha,
	.input-box li img{display:inline-block; vertical-align:middle;}

	.input-box li a.captcha{margin-left:10px; border:none}

/* --------------- Captach Image -----------*/
	.captcha img{
		margin-right:10px;
		border:1px solid rgba(3,78,162, .7);
		-webkit-border-radius: 2px;
		-khtml-border-radius: 2px;
		border-radius:2px;
	}
/* --------------- Listing Section -----------*/
	.grid-wraper {
		display:block; 
		position:relative;
		margin:0 auto;
		
	}

	.grid-options-wraper{
		display:block;
		position:relative;
		margin:0 auto 20px;
		border:1px solid rgba(3,78,162, .2);
	}
	
	.notopmargin{margin-top:0;}
	
	.grid-options-wraper > li{display:block; position:relative; border-top:1px solid rgba(3,78,162, .2);}
	.grid-options-wraper > li:first-child{border-top:none}
	
	.grid-options{
		display:table;width:100%;
		background:rgba(255,255,255,.5);
	}
	.grid-options li{
		display:table-cell;
		vertical-align:middle;
		padding:0; 
	}
	.grid-options li div{display:inline-block;}	
	
	.grid-options li label,
	.grid-options li select,
	.grid-options li input{margin:5px; vertical-align:middle}

	.grid-options li img{display:inline-block; vertical-align:middle; margin-top:10px;margin-left:5px;}

	.grid-options .btn{
		padding:5px 8px;
		border:1px solid #1f4576;
	}
	.grid-options .btn:hover{
		border:1px solid #25518a;
	}
	
	.grid-options input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
	textarea{
		padding: 8px 5px;
		min-width:150px;
	}

	.grid-options input.small:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		min-width:auto;
		width:50px;
	}
	
	.grid-options select{
		padding: 6px 5px 5px;
		min-width:50px;
		max-width:95px;
	}
	

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

	
	.data-grid{padding: 1px 2px;border-radius:2px;	border:1px solid rgba(3,78,162, .2);}
	.data-list{display:table;table-layout: fixed; width:100%;border-top:1px solid #FBFBFB;border-bottom:1px solid #FBFBFB;}
	.data-list > li.checkbox{width:10px;padding:15px 5px;}
	.data-list > li.action{width:100px;padding:10px;}
	.data-list > li.action img{display:inline-block; vertical-align:middle; margin-right:5px;}
	.data-list > li.one{width:100px;}
	.data-list > li.two{width:200px;}
	.data-list > li.three{width:300px;}

	.data-grid input.small:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]){
		padding:5px;
	}

	.data-list > li{
		display:table-cell;
		vertical-align:top;
		padding:10px;
		margin-bottom:2px;
	}
	.oddRow {background-color: rgba(241,241,241,.9); /*#f1f1f1;*/}
	.evenRow {background-color: rgba(234,239,247,.9); /*#eaeff7;*/}
	.oddRow:hover,
	.evenRow:hover{background-color:rgba(235,246,224,.9); /*#EBF6E0;*/}

	.data-list > li  ul li{display:block;padding:3px 0;}
	.data-list > li  ul li strong{margin-right:5px;}

	.data-list a.detail{
		background:url(../images/detail-show.png) no-repeat;
		padding:1px 10px;	
	}
	.data-list a.detail.hide{
		background:url(../images/detail-hide.png) no-repeat;
		padding:1px 10px;	
	}
	
	
	.grid-bottom{margin:10px auto 0; height:20px;}

	.animation_image img{margin:0 auto}

/* --------------- Roster Hover Nav -----------*/
	
	.data-list li.roster ul{
		visibility:collapse;
		position:absolute;
		border:1px solid #e1e1e1;
		border-top:none;
		border-bottom:none;
		/*margin-left:8px;*/
 		background:rgba(3,78,162,.7);
 	}
	.data-list li.roster ul li{
		position:relative;
		background:rgba(255,255,255,.8); 
		border-top:1px solid #f3f2f2; 
		border-bottom:1px solid #e0d9d7;
	   -moz-transition: background 0.3s ease-in-out;
	   -o-transition: background 0.3s ease-in-out;
	   -webkit-transition: background 0.3s ease-in-out;
	   transition: background 0.3s ease-in-out;
	}
	.data-list li.roster ul li a{
		font-size:13px;
 		padding:7px 10px;
 		line-height:24px;
	}
	.data-list li.roster:hover ul{visibility:visible}
	.data-list li.roster:hover > a{color:#034EA2;}
	.data-list li.roster ul li:hover {background:#ecd7d2;}
	.data-list li.roster ul li:hover a{color:#034EA2;}

/*---------------  Item Detail -------------*/

	.item-detail {display:none; position:relative;}
	.line-item {display:table; table-layout:fixed; width:100%; border-top:1px solid #e2e2e2;}
	.line-item.notopborder{border-top:none;}
	.line-item li{display:table-cell; padding:5px;}
	.line-item li.thirty{width:30px}
	.line-item li.one{width:80px}
	.line-item.bg-white{background:rgba(255,255,255,.8);}
	
	.assign{
		/*border:1px solid #000;*/
		padding:7px;
		display:inline-block;
		vertical-align:bottom;
		background:url(../images/add24.png) no-repeat;
		background-size:14px;
	}
	.assign.alert{
		background:url(../images/add24_red.png) no-repeat;
		background-size:14px;
	}

	.assign.unassign,
	.alternate.unalternate{
		/*border:1px solid #000;*/
		padding:7px;
		display:inline-block;
		vertical-align:bottom;
		background:url(../images/minus24.png) no-repeat;
		background-size:14px;
	}

	.alternate{
		/*border:1px solid #000;*/
		padding:7px;
		display:inline-block;
		vertical-align:bottom;
		background:url(../images/icon_replace.png) no-repeat;
		background-size:14px;
		margin-left:10px;
	}
	.alert{
		background:url(../images/icon_replace_red.png) no-repeat;
		background-size:14px;
	}
 /* --------------- User IM -----------*/
	.contact-user,
	.im-user {
		border:1px solid rgba(3,78,162, .2);
		display:inline-block;
		position:relative;
		height:600px;
		vertical-align:top;
		float:left;
		margin-top:10px;
		background:rgba(255,255,255,.8); /*#fff;*/
	}
	
	.contact-user{min-width:250px; max-width:250px; margin-right:10px;}
	.contact-user h4{color:#fff; padding:10px; background:#335b91;}
	.im-user {width:460px;}
	
	#contact-list{
		overflow:auto;
		max-height:560px;
		line-height:16px;
	}
	#contact-list li{
		padding:5px;
		border-bottom:1px solid #F2F2F2 ;
	   -webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	   -o-transition: all 0.4s ease-in-out;
	   -ms-transition: all 0.4s ease-in-out;
	   transition: all 0.4s ease-in-out;
	}
	#contact-list li.current {background:#e6eef8;}
	#contact-list li:hover.current,
	#contact-list li:hover {background:#F2F2F2;}

	#contact-list li a{display:block; font-size:13px;}	
	#contact-list li a figure,
	#contact-list li a aside{display:inline-block; vertical-align:middle}
	#contact-list li a > figure{margin-right:5px}
	#contact-list li a aside figure,
	#contact-list li a aside strong{display:inline-block; vertical-align:middle;margin:0;}
	#contact-list li a aside figure{margin-right:5px;}
	#contact-list li a aside p{display:block; margin-left:3px; max-width:185px; word-wrap:break-word;}
	
	#im-message-list{overflow:auto; max-height:489px;}
	#im-message-list li.load-more{
		display:block;
		min-height:18px; 
		padding:10px; 
		text-align:center; 
		background:#f1f1f1; 
		border-bottom:1px solid #F2F2F2;
	}
	
	#im-message-list li{display:block; position:relative; padding:5px;}
	#im-message-list li figure,
	#im-message-list li aside{display:inline-block; vertical-align:top}
	#im-message-list li aside strong,
	#im-message-list li figure{margin-right:5px}
	#im-message-list li aside strong,
	#im-message-list li aside date{color:#28538e}
	#im-message-list li aside p{display:block; position:relative; max-width:365px; word-wrap:break-word}
	
	.sendbox {position:absolute; background:#F2F2F2;display:block; padding:5px; bottom:0;}
	.sendbox li{display:block;}
	.sendbox textarea{display:block;resize:none; width:438px; margin-bottom:5px;}
	.sendbox li input{margin-left:5px; padding:5px 10px;}

/* --------------- footer -----------*/
	
	.social-links {margin:10px 0;}
	.social-links a{margin-left:10px; display:inline-block;}
	
	.copy {}
	.copy a{ color:#3EBEEE}

/* --------------- Common -----------*/

	#loading {
	background:url(../images/info.png) no-repeat 10px 4px #e7f6ff;
	height: 30px;
	width: 238px;
	position:fixed;
	top:50%;
	left:50%;
	z-index: 1000;
	margin:-80px 0 0 -150px;
	padding:8px 10px 0px 50px; border: 1px solid #3060ac;
	font-size: 15px; line-height:19px; color:#3060ac; }
	
	.ajax-loading{
		/*border:1px solid #093;*/
		top:50%;
		left:50%;
		display:none;
		position:absolute;
		text-align:center;
		margin:5px 0;	
		margin:-28px 0 0 -14px;
	}

	.center{text-align:center; vertical-align:middle}
	.right{text-align:right;}
	
	
	.btn{
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px;
		background:#335b91;	
		/*background:url(../images/btn_bg.jpg) repeat-x;*/
		font:14px Tahoma, Geneva, sans-serif;
		font-weight:bold;
		color:#fff;
		border:1px solid #1f4576;
		border-bottom:2px solid #0f2e57;
		text-shadow:0px 0px 1px #000;
		padding:7px 20px;
		transition:all .3s ease-in-out;
	}
	
	.btn:hover{
		cursor:pointer;
		background:#4775b1;
		border:1px solid #25518a;
		border-bottom:2px solid #25518a;
	}
	
	.btn:disabled{
		background:#990901;
		border:1px solid #6c0701;

	}
	
	
	.btn:disabled:hover{
		background:#990901;
		border:1px solid #6c0701;
	}

	.clearFix{clear:both}

/* --------------- Ajax Loaders -----------*/

	.upload-status{
	  -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;
	  visibility:hidden;
	  opacity:0;
	}
	.upload-status-is-visible{visibility:visible;opacity:1}

/* --------------- Ajax Loaders -----------*/
	
.marked_off {
	background-color:#FF4949;
}

.declined {
	background-color:#FDFDD3;
}

.ask_off {
	background-color:#EF8FEF;
}

.approved {
	background-color:#96DB92;
}

.additional{
 background:#2aace9;
}