/********************************************************************************************* 

x. Area

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.hidden-area .inside {
		margin: 0;
	}
}


/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width:800px) {
	footer .inside {
		padding: 20px;
	}
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width:800px) {
	header {
		width: 100%;
		position: relative;
	}
	header .navigation .image {
		max-width: 55px;
	}
	header .navigation {
		text-align: center;
	}
	header .navigation li {
		margin: 0 20px;
		display: inline-block;
		zoom: 1; 
		*display: inline;
		vertical-align: middle;
	}
	header .times {
		text-align: center;
		position: relative;
	}
	header .times li {
		border-bottom: none;
		margin: 0 20px !important;
		padding: 0;
		display: inline-block !important;
		zoom: 1 !important;
		*display: inline !important;
	}
	header .times span.time-non-billable {
		display: none;
	}
}

@media only screen and (max-height:750px) {
	header .navigation svg {
		width: 15px; height: 15px;
	}
}
@media only screen and (max-height:700px) {
	header .navigation svg {
		display: none;
	}
}
@media only screen and (max-height:600px) {
	header .times li {
		border-bottom: none;
		margin: 0;
	}
	header .times li:last-of-type {
		display: none;
	}
}

/********************************************************************************************* 

x. Main: Full-Width

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.full-width main .inside {
		padding: 0;
	}
}

/********************************************************************************************* 

x. Main: Two Column

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.two-column main {
		width: 50%;
	}
}
@media only screen and (max-width:800px) {
	.two-column main {
		width: 100% !important;
	}
	.two-column main .inside {
		padding: 0;
	}
}

/********************************************************************************************* 

x. Aside: Two Column

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.two-column aside {
		width: 50%;
	}
}
@media only screen and (max-width:800px) {
	.two-column aside {
		display: none;
	}
}

/********************************************************************************************* 

x. Report

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#report table tr td:nth-child(1) {
		display: none;
	}
	#report table tr[data-id] td:before {
		font-weight: 700;
		display: block;
	}
	#report table tr[data-id] td:nth-child(1) {
		display: block;
	}
	#report table tr[data-id] td:nth-child(1):before {
		content: 'Company';
	}
	#report table tr[data-id] td:nth-child(2):before {
		content: 'Project';
	}
	#report table tr[data-id] td:nth-child(3):before {
		content: 'Date';
	}
	#report table tr[data-id] td:nth-child(4):before {
		content: 'Billing Type';
	}
	#report table tr[data-id] td:nth-child(5):before {
		content: 'Quoted Amount';
	}
	#report table tr[data-id] td:nth-child(6):before {
		content: 'Owner';
	}
	#report table tr[data-id] td:nth-child(7):before {
		content: 'Users';
	}
	#report table tr[data-id] td:nth-child(8):before {
		content: 'Commission';
	}
	#report table tr[data-id] td:nth-child(9):before {
		content: 'Hours';
	}
	#report table tr[data-id] td:nth-child(10):before {
		content: 'Project Status';
	}
	#report table tr[data-id] td:nth-child(11):before {
		content: 'Invoice Status';
	}
}

/********************************************************************************************* 

x. Times

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#times table td:before {
		font-weight: 700;
		display: block;
	}
	#times table td:nth-child(1):before {
		content: 'Date';
	}
	#times table td:nth-child(2):before {
		content: 'User';
	}
	#times table td:nth-child(3):before {
		content: 'Hours';
	}
	#times table td:nth-child(4):before {
		content: 'Company';
	}
	#times table td:nth-child(5):before {
		content: 'Project';
	}
	#times table td:nth-child(6):before {
		content: 'Description';
	}
	#times table td:nth-child(7):before {
		content: 'Billing Type';
	}
	#times table td:nth-child(8):before {
		content: 'Status';
	}
}


/********************************************************************************************* 

x. Report + Times

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#report .extra, 
	#times .extra {
		margin: 0 0 -20px 0;
	}
	#report .extra li, 
	#times .extra li {
		margin: 0 0 20px 0;
		float: none;
	}
}



/********************************************************************************************* 

x. Table

*********************************************************************************************/
@media only screen and (max-width:800px) {
	table {
		max-width: 100%;
	}
	table td,
	table td.tight {
		width: calc(100% - 30px); height: auto;
		padding: 15px;
		display: block;
	}
	table th {
		display: none;
	}
}

/********************************************************************************************* 

x. Select Or Die

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.big .sod_select .sod_label {
		font-size: 16px;
	}
}


/********************************************************************************************* 

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	input,
	textarea {
	    border-radius: 0;
	    -webkit-appearance: none;
	}
}