/*
Theme Name: Brock University Faculty & Staff Directory Theme
Author: Sebastien Marchal / BrockU
Theme URI: 
Description: This child theme provides a way to connect to, search & browse the directory webservice.
Version: 1.0
Template: brocku-mu-base
Tags: none
*/

/* ----------------------------------------------
   ----------------------------------------------
   Large Screen desktops (Default)
   ----------------------------------------------
   ---------------------------------------------- */

#results { padding-top: 1em; position: relative; }
#loader { display: none; position: absolute; left: 0; top: 1em; }
#loader span { margin-right: 6px; }


/* Form */
#directoryform {
	padding: 1em 0 0 0; margin-bottom: 1em;
	background: #fff;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	}
#directoryform ul,
#directoryform ul li {
	padding: 0; margin: 0;
	list-style-type: none;
	}
#directoryform ul li {
	float: left;
	padding-right: 2em;
	}
	#directoryform ul li.firstname { width: 20%; }
	#directoryform ul li.lastname { width: 20%; }
	#directoryform ul li.extension { width: 15%; }
	#directoryform ul li.departments { width: 25%; padding-right: 0; }
	#directoryform ul li.control { width: 20%; padding: 2em 0 0 0; text-align: right; }

#directoryform label {
	margin-bottom: .5em;
	display: block;
	}
#directoryform input {
	width: 100%;
	}
#directoryform select {
	margin-top: .5em;
	width: 100%;
	}
#directoryform button { margin-left: 1em; }

#directoryform p {
	padding: 1em 0 0 0;
	display: block;
	clear: both;
	}


/* General table styles */
#content table {
	margin: 1em 0 3em 0;
	width: 100%;
	border-collapse: collapse;
	-webkit-transition: opacity .1s ease-out;
	   -moz-transition: opacity .1s ease-out;
		-ms-transition: opacity .1s ease-out;
	     -o-transition: opacity .1s ease-out;
		 	transition: opacity .1s ease-out;
	opacity: 1;
	}

/* Sorting */
#content table th[data-sort] {
	cursor: pointer;
	}
#content table th[data-sort]:after {
    content: "\f107" !important;
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	font-size: 90%;
	margin-left: 7px;
    color: #000;
    }	    
#content table th.sorting-desc:after {
	content: "\f107" !important;
	color: #fff;
    }
#content table th.sorting-asc:after {
    content: "\f106" !important;
	color: #fff;
    }

/* Zebra striping */
#content table tr td {
	background: #f8f8f8;
	}
#content table tr:nth-of-type(odd) td { 
	background: #fcfcfc;
	}
#content table th {
	padding: 10px 15px;
	font-size: .9em;
	background: #000; 
	color: #fff;
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
	}
#content table td {
	padding: 12px 30px 12px 15px;
	border-bottom: 1px solid #e8e8e8;
	text-align: left;
	color: #585858;
	font-size: .8em;
	vertical-align: top;
	line-height: 130%;
	-webkit-transition: background-color .1s ease-out;
	   -moz-transition: background-color .1s ease-out;
		-ms-transition: background-color .1s ease-out;
	     -o-transition: background-color .1s ease-out;
		 	transition: background-color .1s ease-out;
	}
	#content table tr:hover td {
		background-color: #f0f0f0;
		}
		
#content table td.location { min-width: 120px; }

/* Extension */
.ext-desktop { display: inline; }
.ext-mobile { display: none; }


table .code { width: 17%; }
table .number { width: 20%; }
table .description { width: auto; }

/* Adjust VC tables for consistent first column width */
#content tr.vc-th > td:first-child { width: 30%; }


/* ----------------------------------------------
   ----------------------------------------------
   Small Screen desktops
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 1115px) and (max-width: 1700px) { 
	

		
}



/* ----------------------------------------------
   ----------------------------------------------
   Tablets
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 841px) and (max-width: 1114px) {
	


}



/* ----------------------------------------------
   ----------------------------------------------
   Mobile
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (max-width: 840px) {
	
	/* Form */
	#directoryform ul li {
		padding-bottom: 1em;
		float: none;
		width: 100% !important;
		padding-right: 0;
		}
	#directoryform ul li.control {
		padding-top: 1em !important;
		text-align: left;
		}
	#directoryform button {
		margin: 0 1em 0 0;
		}
	#directoryform select {
		border: none;
		}
	
	/* Force table to not be like tables anymore */
	#content table, #content thead, #content tbody, #content th, #content td, #content tr {
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#content thead tr,
	#content tr.vc-th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	/* Cancel Zebra striping */
	#content table tr td {
		background: #fcfcfc;
		}
	#content table tr:nth-of-type(odd) td { 
		background: #fcfcfc;
		}
	
	#content table td {
		/* Behave  like a "row" */
		padding: 12px 30px 12px 40%;
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		min-height: 40px;
		font-size: 1em;
		}
	
	#content table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 12px;
		left: 15px;
		width: 33%;
		padding: 0 10px 12px 0;
		white-space: nowrap;
		font-family: "Bliss Bold", "Trebuchet MS", sans-serif;
		font-weight: bold;
		color: #282828;
		}
	#content table td:first-child { border-top: 1px solid #c0c0c0; }
	#content table td:last-child { border-bottom: 1px solid #c0c0c0; margin-bottom: 2em; }
	
	#content table tr:hover td {
		background-color: #fcfcfc;
		}
		
	#content table td.location { width: auto; }
	
	/* Label the data */
	/* Labels: Directory */
	#content td:nth-of-type(1):before { content: "Department"; }
	#content td:nth-of-type(2):before { content: "First Name"; }
	#content td:nth-of-type(3):before { content: "Last Name"; }
	#content td:nth-of-type(4):before { content: "Email"; }
	#content td:nth-of-type(5):before { content: "Title"; }
	#content td:nth-of-type(6):before { content: "Extension"; }
	#content td:nth-of-type(7):before { content: "Location"; }
	
	/* Labels: fax lines & building codes */
	#content td.code:before { content: "Code"; }
	#content td.number:before { content: "Number"; }
	#content td.description:before { content: "Description"; }
	
	/* Labels: VC Tables */
	#content td.vc_table_cell:nth-of-type(1):before { content: "Number"; }
	#content td.vc_table_cell:nth-of-type(2):before { content: "Description"; }
	
	/* Extension */
	.ext-desktop { display: none; }
	.ext-mobile { display: inline; }
	
	/* */
	table .code { width: auto; }
	table .number { width: auto; }
	table .description { width: auto; }


}