/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30-Oct-2018, 11:23:09
    Author     : ARTHUR G. NDOSSI
*/



/* special for allocation table does not need to expand */
/*.trigger table{
	width: unset;
}*/

/* Zebra striping */
/*table#row tr:nth-of-type(odd) { 
	background: #eee; 
}*/


#sidebar div.box2 {
	display: inline-block;
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
*/

@media only screen and
(min-device-width: 768px) and (max-device-width: 1010px) {

	div.col-a1, div.col-a2 {
		clear: both;
		width: 100%;
	}

	/* Navigation menu bar */
	.icon-container {
	    display: inline-block;
	    cursor: pointer;
	    padding: 5px;
	}

	.bar1, .bar2, .bar3 {
	    width: 35px;
	    height: 5px;
	    background-color: #fff;
	    margin: 6px 0;
	    transition: 0.4s;
	}

	.change .bar1 {
	    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
	    transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .bar2 {
		opacity: 0;
	}

	.change .bar3 {
	    -webkit-transform: rotate(45deg) translate(-8px, -8px);
	    transform: rotate(45deg) translate(-8px, -8px);
	}
	/* ------------------- */
	
	#header .icon {
    	float: right;
    	display: block;
  	}
  	.responsive {
  		position: relative;
  	}
	.responsive .icon {
	    position: absolute;
	    z-index: 3;
	    right: 0;
	    top: 0;
	}
	.responsive ul #menu li {
	    float: none;
	    display: block;
	    text-align: left;
	}
	#menu {
		display: none;
		background-color: #fff;
		position: absolute;
		z-index: 12;
		width: 100%;
		padding: 0 10px;
		box-shadow: 2px 2px 5px 1px grey;
	}
	/*Make dropdown links appear inline*/
	#menu ul li ul {
		left: 0;
		top: 0;
	}
	#menu ul li ul li {
		background: #fff !important;
	}
	#menu ul li ul li a {
		background: #fff !important;
		color: #d00 !important;
	}
	#sidebar {
		width: 100%;
		font-size: unset;
	}
	div.changeLanguage {
		width: 100%;
		float: unset;
		padding: 5px 0;
		margin-left: 15px;
		color: #d00;
	}
	div.changeLanguage a {
		border: none;
		display: block;
		padding: 5px;
	}
	#sidebar div.box1, .spacer {
		display:none;
	}
	#sidebar div.box2 h4 {
		display:none;
	}
	#sidebar div.box2 {
		padding: unset;
		display: block;
	}
	table.userInfo {
		display:none;
	}
	/* for IE */
	#container{
		max-width: 100%;
	}
	/* resize table content to fit screen */
	#content {
		width: 100%;
		padding: 0px;
	}
	#search table .label {
	    padding: 6px 0 0 10px;
	    margin: 8px 0 0 0;
	}
	/* cssfy column inputs */
	#search table .field input[type=text], #search table .field input[type=date]
, table.details  th, table.details  td, #edit .trigger .field input[type=text], #edit .trigger .field textarea{
	    width: 100%;
	    padding: 6px 10px;
	    /*margin: 8px 0;*/
	    /*display: inline-block;*/
	    border: 1px solid #ccc;
	    /*border-radius: 4px;*/
	    box-sizing: border-box;
	}
	
	select {
	    width: 100%;
	    padding: 6px 10px;
	    /*margin: 8px 0;*/
	    /*display: inline-block;*/
	    border: 1px solid #ccc;
	    /*border-radius: 4px;*/
	    box-sizing: border-box;
	}
	/*#search table .field img.calendar {
	    padding: 3px;
	    margin-left: unset;
	}*/
	/* remove table column and row border bottom */
	#search table td, #search table tr {
		border: none;
	}
	#pageHelp {
		margin-left: unset;
	}

	/* Force table to not be like tables anymore */
	/*table, thead, tbody, th, td, tr { 
		display: block; 
	}*/

	table:not(.calendar table), 
	thead:not(.calendar thead), 
	tbody:not(.calendar tbody), 
	th:not(.calendar th), 
	td:not(.calendar td), 
	tr:not(.calendar tr) { 
		table-layout: fixed; 
	}

	#search table,
	#search thead,
	#search tbody,
	#search th,
	#search td,
	#search tr { 
		display: block;
	}

	#row table,
	#row thead,
	#row tbody,
	#row th,
	#row td,
	#row tr /*, table.details, table.details tbody, table.details thead, table.details tr, table.details td*/ { 
		display: block; 
	}

	.data-table table,
	.data-table thead,
	.data-table tbody,
	.data-table th,
	.data-table td,
	.data-table tr {
		display: block;
	}

	#edit .trigger table,
	#edit .trigger thead,
	#edit .trigger tbody,
	#edit .trigger th,
	#edit .trigger td,
	#edit .trigger tr {
		display: block;
	}

	.details table,
	.details thead,
	.details tbody,
	.details th,
	.details td,
	.details tr {
		display: block;
	}
	.details th, .details td {
		width: 45%;
	}

	.details th {
		float1: left;
		text-align:left !important;
	}
/*

	.details td {
		float: right;
	}*/

	#search.action #form_submit {
	    margin-top: 10px;
	    font-size: unset;
	}

	.data-table td {
		border-bottom: 2px solid #fff; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	/* Don't hide calendar table headers*/
	.calendar thead tr { 
		position: unset;
		top: unset;
		left: unset;
	}
	
	tr:not(.calendar tr) { border: 1px solid #fff; }
	
	td:not(.calendar td) { 
		/* Behave  like a "row" */
		font-size: 14px;
		min-height: 14.546px;
		clear: both;
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;
		/*padding-left: 50%; */
	}
	
	td:before { 
		/* Now like a table header */
		/*position: absolute;*/
		/* Top/left values mimic padding */
		/*top: 6px;*/
		text-align: right;
		float: left;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		/*white-space: nowrap;*/
	}
	
	/*
	Label the data
	*/
	.data-table td:before { content: attr(title) ": "; }

	#row td {
		overflow: auto;
	}

	#row td:last-child { 
		text-align: center;
		border: none;
	}

	#row td:last-child:before { content: ""; }



	#content {
	  width: 100%;
	}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

	h1 {
		font-size: 120%;
	}

	#container {
	    max-width: 100%;
	}

	div.col-a1, div.col-a2 {
		clear: both;
		width: 100%;
	}

	.trigger table,
	.trigger thead,
	.trigger tbody,
	.trigger th,
	.trigger td,
	.trigger tr {
		display: block;
	}

	td { 
		/* Behave  like a "row" */
		font-size: 14px !important;
		min-height: 14.546px;
		clear: both;
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;
		/*padding-left: 50%; */
	}

	#content {
	  width: 100%;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body { 
		/*width: 495px; */
	}
}

@media only screen and (min-width: 992px) {
	#content {
	  width: calc(100vw - 230px);
	}
}