/*-----------------------||-------------------------*\
	JIS OFFICE MANAGEMENT SYSTEM 
	Developed by Damion Chambers, Software Developer 
	2015
\*-----------------------||-------------------------*/


/*------------------||------------------*\
  	RESET
\*------------------||------------------*/
  	a, abbr, acronym, address, applet, article, aside, audio,
  	b, blockquote, big, body,
  	center, canvas, caption, cite, code, command,
  	datalist, dd, del, details, dfn, dl, div, dt, 
  	em, embed,
  	fieldset, figcaption, figure, font, footer, form, 
  	h1, h2, h3, h4, h5, h6, header, hgroup, html,
  	i, iframe, img, ins,
  	kbd, 
  	keygen,
  	label, legend, li, 
  	meter,
  	nav,
  	object, ol, output,
  	p, pre, progress,
  	q, 
  	s, samp, section, small, span, source, strike, strong, sub, sup,
  	table, tbody, tfoot, thead, th, tr, tdvideo, tt,
  	u, ul, 
  	var { 
  		background: transparent; 
  		border: 0 none; 
  		font-size: 100%; 
  		margin: 0; padding: 0; 
  		vertical-align: baseline; 
  	}

  	::-moz-selection { 
  		background-color: #91D8f7; color: #fff; 
  	}

  	::selection { 
  		background-color: #91D8f7; color: #fff; 
  	}

  	.clearfix { 
  		clear: both; 
  	}

  	hr {
  		margin-top: 10px!important;
  		margin-bottom: 10px!important;
  	}

  	strong{
  		vertical-align: inherit;
  	}

  	.table-responsive {
  		overflow-x: visible!important;
  	}

  	.SumoSelect > .CaptionCont > label{
  		margin-bottom: 0!important;
  		background-color: #E2E2E2!important;
  	}

  	#wrapper .container {
  		box-shadow: 0px 3px 6px rgba(123, 123, 123, 0.25)!important;
  	}

  	#wrapper .container.top {
  		box-shadow: none!important;
  	}

/*------------------||------------------*\
	MAIN CSS
\*------------------||------------------*/


	body { 	
		-webkit-transition-property: font-size;
		-moz-transition-property: font-size;
		transition-property: font-size;
		-webkit-transition-duration: 0.5s, 0.5s;
		-moz-transition-duration: 0.5s, 0.5s;
		transition-duration: 0.5s, 0.5s; 
		-webkit-transition-timing function: linear, ease-in;
		-moz-transition-timing function: linear, ease-in; 
		transition-timing function: linear, ease-in; 
		background: #F9F9F9; 
		color: #222; 	
		font-size: 16px; 
		background: url(../images/bg/omsBG.jpg) 0 0 repeat scroll;
		background-size: inherit;
		font-family: 'Roboto', sans-serif;
		overflow-x: hidden;	
	}

	#wrapper {
		padding: 0 20px 0 20px !important;
		margin: 0 auto!important;	
		overflow: hidden;
	}

/*------------------||------------------*\
	HEADER
\*------------------||------------------*/

	.linkNoShowOnPrint:link:after{
		content:"";
		}s

		#wrapper .headerContainer {
			position: relative;	
			height: auto;
		}

		#logo{
			padding-top: 3%;
			padding-bottom: 3%;
		}

		#logo:hover{
			opacity: 0.6;  
			cursor: pointer;  
		}

		.loggedIn{
			position:relative;
			top:-20px;
			background: #000;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			color: #fff;
			padding: 15px 10px 6px 10px;
			opacity: 0.6;
			z-index: 1;
			font-size: 1.15em;	
		}

		.signIn{
			float: right;
		}


		.loggedIn a {
			text-decoration: none;
			margin-left: 5px;
			color:#FFF000;
			font-weight: bold;
		}

		.loggedIn a:visited {
			color: #FFF000;		
		}

		.loggedIn a:hover {
			color: #FF9C00;		
		}

		.loggedIn a:active {
			color: #FFF000;		
		}


/*------------------||------------------*\
	FOOTER
\*------------------||------------------*/

	#copyright {
		display: block;
		clear: both;
		text-align: center;
		padding-top: 15px;
		padding-bottom: 10px;
		border-top: 1px solid #ddd;
		background-color: #ddd;
	}

/*------------------||------------------*\
	BODY
\*------------------||------------------*/

	.bodyContainer{
		position: relative;
		width: auto;
		background-color: #FFF;
		overflow: hidden;

	}

/*------------------||------------------*\
	LOGIN
\*------------------||------------------*/


	.loginContainer{
		position: relative;
		height: 380px;
		width: 500px;
		background: url(../images/bg/loginBG.png);
		margin: 0 auto; 
		overflow: hidden;
		padding: 1% 5%;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px; 
	}

	.loginMargin{
		position: relative;
		height: 480px;	
		background-color: #FFF;
		margin: 0 auto; 
		padding-top: 50px;
	}

	.loginHeader{
		color:#FFF;
		text-align: left;
	}

	.loginHeadSub, .forgetHeadSub{
		color:#FFF000;
		text-align: left;
		font-size: 100%;
		font-style: italic;
		border:0 solid #BFEFFF; 
		border-bottom-width:1px;
		padding-bottom:5px;
	}

	.loginAnchorText{
		color:#FFF;
		font-size: 85%;	
		text-decoration: underline;
	}

	.labelSep{
		color:#FFF;
		font-size: 100%;	
	}

	.labelText{
		color:#FFF;
		font-size: 85%;		
		text-decoration: none;
		text-align: right;
	}

	.loginAnchorText:link, .loginAnchorText:visited{
		color:#FFF000;
	}

	.loginAnchorText:hover{
		color:#FFF;
	}

	.loginAnchorText:active{
		color:#FFF000;
	}

	.loginBTN {
		-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
		-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
		box-shadow: 0px 0px 0px 2px #9fb4f2;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4377d1), color-stop(1, #2560a8));
		background:-moz-linear-gradient(top, #4377d1 5%, #2560a8 100%);
		background:-webkit-linear-gradient(top, #4377d1 5%, #2560a8 100%);
		background:-o-linear-gradient(top, #4377d1 5%, #2560a8 100%);
		background:-ms-linear-gradient(top, #4377d1 5%, #2560a8 100%);
		background:linear-gradient(to bottom, #4377d1 5%, #2560a8 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4377d1', endColorstr='#2560a8',GradientType=0);
		background-color:#4377d1;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		border:1px solid #4e6096;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:19px;
		padding:12px 37px;
		text-decoration:none;
		text-shadow:0px 1px 0px #283966;
	}

	.loginBTN:hover {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2560a8), color-stop(1, #4377d1));
		background:-moz-linear-gradient(top, #2560a8 5%, #4377d1 100%);
		background:-webkit-linear-gradient(top, #2560a8 5%, #4377d1 100%);
		background:-o-linear-gradient(top, #2560a8 5%, #4377d1 100%);
		background:-ms-linear-gradient(top, #2560a8 5%, #4377d1 100%);
		background:linear-gradient(to bottom, #2560a8 5%, #4377d1 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2560a8', endColorstr='#4377d1',GradientType=0);
		background-color:#2560a8;
	}

	.loginBTN:active {
		position:relative;
		top:1px;
	}

	#recaptcha{
		background-color: #FFF;		
		height:100px;
		width: 100%;
		padding-top:3%;	
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		position: relative; 
		overflow: hidden;			
		padding-left:10%;	
	}

	.resetBackBTN{
		font-size: 15px;
		margin-right: 10px;
	}

	.resetBackBTN:link, .resetBackBTN:visited{
		color:#FFF000;
	}

	.resetBackBTN:hover{
		color:#FFF;
	}

	.resetBackBTN:active{
		color:#FFF000;
	}

/*----------------------------------------------------------------------*/
/*Remove this class if you are going to work with the Remember Me Check Box*/
	.checkbox #loginLinks{	
		float: right;
		display:block;
	}
/*-----------------------------------------------------------------------*/


/*------------------||------------------*\
	Errors and Messages
\*------------------||------------------*/

	#loginError, #messageError {
		width: 100%;
		background:#FFB600;
		height: auto;
		padding: 7px 10px;
		margin-bottom: 5px;
		font-size: 18px;
		font-weight: bold;
		color: red;
		text-align: center;	
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}

	.error{	
		color: #8F04A8;
		font-style: italic;
		font-weight: normal;	
	}

	#message {
		width: 100%;
		background: #C0FFBF;
		padding: 7px 10px;
		height: auto;	
		font-size: 18px;
		font-weight: bold;
		color: #008282;
		text-align: center;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.subMessage{	
		font-size: 14px;
		color: #454243;
		font-style: italic;
		font-weight: normal;
	}

	#title {
		width: 100%;
		background: #FFD100;
		padding: 5px 10px;
		height: auto;
		margin-top: 5px;
		font-size: 18px;
		font-weight: normal;
		color: #003366;	
		text-align: center;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		text-transform: uppercase;
	}


/*------------------||------------------*\
	SIDEBAR - LEFT
\*------------------||------------------*/

	.sideBar{
		height:auto;
		width:20%;	
		float:left;
		margin: 2% 3% 0 2%;
		overflow:hidden;
		display: block;
		padding-bottom: 20px;
		position: relative;
	}

	.tabs, .tabStandOut{
		position: relative;
		width: 100%;
		height: 50px;
		background-color: #003366;	
		color: #FFF;		
		margin-bottom: 3px;
		padding:15px 0 0 25px ;   
		font-size: 16px;
		cursor:pointer;
	}

	.tabStandOut{
		background-color: #FFD100;	
		color: #003366;	
		font-size: 17px;
		font-weight: bold;	
	}

	.tabs:hover{	
		background-color: #000;	
		color: #FFF000;	
	}

	.tabStandOut:hover{	
		background-color: #000;	
		color: #FFF000;	
	}

	#anchorTab{
		color:#FFF; 
		text-decoration: none;
		outline : none;
	}

	#tabActive{
		color:#FFF000;
	}

	.tabs:hover #anchorTab{	
		background-color: #000;	
		color: #FFF000;		
	}

	.sideBar, .dropdown, .tabs a:link{
		font-size: 16px;	
	}

	.ddlMenu {
		width: 90%;	
		margin-left: 2px;
	}

	.ddlMenuHeader{
		cursor:auto; 
		background-color:#000;	
	}

	.anchorDDLMenu a{
		color:#FFF;
	}

/*------------------||------------------*\
	Main Content Area
\*------------------||------------------*/

	.mainCont{
		float: left;
		height: auto;
		width: 73%;	
		overflow:hidden;
		margin: 1% 0 2% 0;
	}


	.reportMainCont{
		float: left;
		height: auto;
		width: 100%;	
		margin: 2% 0 2% 0;
		padding-left: 2%;
		padding-right: 2%;
	}


/*------------------||------------------*\
	Main Navigation
\*------------------||------------------*/

	.mainNav{
		margin: 2% 2% 0 0;
		height: 50px;
		width: 73%;
		background-color: #003366;
		margin-bottom: 1px;
		padding-left: 1%;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		float: right;
	}

/*---------------------||---------------------*\
	Main Navigation & Navigation FOR FULL PAGE
\*---------------------||---------------------*/

	.fullPageNav{
		height: 50px;
		width: 100%;
		background-color: #003366;
		margin-bottom: 10px;
		padding-left: 2%;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.navHeaderFullPage nav ul, .navHeader nav ul{
		list-style:none;
		margin: 0 auto;	
	}

	.navHeaderFullPage nav ul li, .navHeader nav ul li{
		float:left;
		display:inline;
		font-size: 20px;
		padding: 10px 5px;
		color:#80ADD9;
	}


	.navHeaderFullPage nav ul li a, .navHeader nav ul li a{
		color:#80ADD9;
		text-decoration: none;
	}

	.navHeaderFullPage nav ul li a:visited, .navHeader nav ul li a:visited{
		color:#80ADD9;	
		text-decoration: none;
	}

	.navHeaderFullPage nav ul li a:hover, .navHeaderFullPage nav ul li a:active, 
	.navHeaderFullPage nav ul li #active, .navHeader nav ul li a:hover, 
	.navHeader nav ul li a:active,.navHeader nav ul li #active{
		color:#FFF000;	
		text-decoration: none;
	}

	#fullPageNavTools{
		float:right;
		padding-right: 2%;
	}



/*------------------||------------------*\
	Table Area
\*------------------||------------------*/

	.tableContainer{
		position: relative;
		width: 100%;	
		height: auto;
	}

	#tableData tr td a{
		color:#333;
		text-decoration: none;
		cursor:pointer;
	}

	tr td a{
		color:#333;
		text-decoration: none;
		cursor:pointer;
	}

	#tableData tr th #thIcon{
		display:none;
	}

/*------------------||------------------*\
	Fancy Box
\*------------------||------------------*/

	.fancybox-skin {    
		background: #FFF;             
	}  

/*------------------||------------------*\
	Reponsive
\*------------------||------------------*/


/*------------------||------------------*\
	Media Sizes between 601 and 990
\*------------------||------------------*/

	@media only screen and (min-width: 541px) and (max-width: 990px){

		.loggedIn{		
			font-size: 95%;
			display: inline;
			top: 2px;
		}

		#recaptcha{					
			padding-left:14%;	
		}

		.signIn{
			margin: 0 auto;
			width: 100%;    
			text-align: center;
		}

		.sideBar{	
			width: 96%;		
			height: auto;
			overflow: visible;			
			padding-bottom: 0;	
			margin: 0 2% 1% 2%;	
		} 

		.tabs{	
			width: 19%;
			padding:13px 0 0 7%; 	
			margin-bottom: 0;	 
			font-size: 20px;
			display: inline-block;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;	
		}

		.sideBarText{
			display:none;		
		}

		.sideBar, .dropdown, .tabs a:link{
			font-size: 20px;	
		}

		.mainNav{
			margin: 2% 2% 1% 2%;	
			width: 96%;	
			padding-left: 2%;	
			float: left;
		}

		#ddlSpace{
			display: none;
		}

		.mainCont{		
			width: 100%;	
			padding-left: 2%;
			padding-right: 2%;	
		}

		#tableData tr td a{
			font-size: 11px;
		}

		#tableData tr th{
			font-size: 11px;
		}

		#tableData tr th #thIcon{
			display:inline;
		}

		#tableData tr th #thText{
			display:none;
		}

		.fullPageNav{	
			height:46px;	
		}

		.navHeaderFullPage nav ul li{
			font-size: 18px;
		}

		#loginError, #messageError, #message {	
			padding: 4px;	
			font-size: 16px;
			font-weight: normal;
			height: auto;
		}

		.error, .subMessage {	
			font-size: 10px;	
		}

		.sideBarTextStandOut{
			font-size: 20px;
		}

		.tabStandOut{
			text-align: center;
			vertical-align: middle;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;	
			width: 100%;
			padding: none;
			margin: none;
		}
		.exclude{
			display: none;
		}

		}/*END Media Sizes between 601 and 990*/


/*------------------||------------------*\
	Media Sizes between 220 and 600
\*------------------||------------------*/

	@media only screen and (min-width: 100px) and (max-width: 540px){

		.bodyContainer{
			font-size:95%;	
		}

		.loggedIn{		
			font-size: 66%;
			display: inline;
			top: -3px;	
			padding: 15px 5px 6px 5px;
		}

		.signIn{
			margin: 0 auto;
			width: 100%;    
			text-align: center;
		}


		#logo{
			padding-top: 2%;
		}

		#copyright {	
			padding: 7px 0;	
			font-size: 85%;
		}


		.loginContainer{	
			width: 100%;	
			background-repeat: no-repeat;
			margin: 0 auto; 
		}

		.loginHeadSub{	
			font-size: 75%;	
		}

		.forgetHeadSub{	
			font-size: 67%;	
		}

		.loginHeader{	
			text-align: center;
		}

		.loginMargin{	
			height: 380px;		
			padding-top: 0;
		}

		.checkbox #lblSep {
			display: none;
		}

		.checkbox #loginLinks{
			display: block;
			text-align: center;
		}

		#loginBTN{
			margin: 0 auto;
			display:block;
		}

		#loginError {	
			padding: 5px;	
			font-size: 85%;
		}

		#recaptcha{					
			padding-top:5%;	
			padding-left:1%;	
		}

		.loginBTN {	
			font-size:16px;
			padding:5px 12px;	
		}

		.mainNav{
			margin: 2% 1% 1% 1%;	
			width: 98%;	
			padding: 2% 1%;
			height:auto;
			text-align: center;
		}

		.navHeader nav ul li{	
			font-size: 12px;
			float: none;	
			padding: 10px 0;		
		}

		.sideBar{	
			width: 96%;		
			height: auto;
			overflow: visible;			
			padding-bottom: 0;
			padding-left: 1.5%;	
			margin: 0 1% 1% 1%;	
		}

		.tabs{	
			width: 18.5%;
			height: 32px;
			padding:8px 0 8px 6.5%; 	
			margin-bottom: 0;	 
			font-size: 12px;
			display: inline-block;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;	
		}

		.sideBar, .dropdown, .tabs a:link{
			font-size: 12px;
			padding-left:3%; 	
		}

		.sideBarText{
			display:none;		
		}

		#ddlSpace{
			display: none;
		}

		.mainCont{		
			width: 100%;	
			padding-left: 2%;
			padding-right: 2%;	
		}

		#tableData tr td a{
			font-size: 10px;
		}

		#tableData tr th{
			font-size: 10px;
		}

		#tableData tr th #thIcon{
			display:inline;
		}

		#tableData tr th #thText{
			display:none;
		}

		#wrapper {
			padding: 0 6px 0 6px !important;	
		}

		#loginError, #messageError, #message {	
			padding: 4px;	
			font-size: 12px;
			font-weight: normal;
			height: auto;
		}

		.error, .subMessage {	
			font-size: 8px;	
		}

		td{
			padding:5px;	
		}
		.navHeaderFullPage{	
			height:auto;	
		}

		.navHeaderFullPage nav ul li{
			font-size: 10px;
			padding-bottom: 0;
		}

		#fullPageNavTools{
			padding-top: 0;	
		}

		.mainNavTool{
			display: none;
		}

		.sideBarTextStandOut{
			font-size: 16px;
		}

		.tabStandOut{
			text-align: center;
			vertical-align: middle;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;	
			width: 100%;
			padding-left: 1%;
			margin: none;
		}

		.exclude{
			display: none;
		}

}/*END Media Sizes between 150 and 600*/