*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
}

/*make the page content fit the screen*/
.col-md-8{width:100% !important;}
.td-pb-span8.td-main-content {
    width: 100% !important;
}
/*------------------------------------*/

.staff-photo {
	border: 5px solid #aae3fb;
	margin-bottom: 10px !important;
}
.round-photo {
	border-radius: 50%;
}
.columnsContainer, footer, header {
	position: relative;
	margin: .5em;
}

.staff-leftColumn{width:70% !important;}
.staff-rightColumn{width:30% !important;}

.staff-leftColumn, .staff-rightColumn, footer, header {
	border: 0px solid #ccc;
	padding: 0.25em;
}
.staff-leftColumn {
	margin-bottom: .5em;
}
.staff-nav {
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
}
.staff-nav > li, .staff-nav > li > a {
	display: inline-block;
 *display: inline;
	zoom: 1;
}
.inline-items {
	margin-top: 0;
}
.inline-items li {
	margin-left: 0;
	border-left: 1px solid black;
	padding-left: 10px;
	padding-right: 10px;
}
.inline-items li:first-child {
	margin-left: 0;
	border: none;
	padding-left: 0;
	padding-right: 10px;
}
.inline-items li:last-child {
	padding-right: 0;
}
h1.with-subtitle {
	margin-left: 5% !important;
}
h5.toggle, h5.toggle.active, h5.toggle-accordion.active, h5.toggle-accordion {
	font-size: 16px !important;
}
h4.staffstyle {
	margin-top: 3em;
    color: #2266bd;
}
h6.staffstyle {
	font-size: small;
}
.shorter-hr {
	margin: 5px 0px !important;
}
.invisiblehr {
	background: none;
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	border: none;
	margin: -1px 0;
}

/* Styles for the Projects table*/
#ActiveProjects_DataList{
	padding:0px !important;
	font-size:small !important;
	}
.StaffProjectList tr:hover td{	
	background-color: #AAE3FB !important;
	}
/* ---------------------------- */

/* styles for showing and hiding div*/
div.flip {
	margin: 0px;
	padding: 5px;
	width: 95%;
	text-align: center;
	background: #ddd;
	border: solid 1px #999;
	cursor: pointer;
	cursor: hand; /*to make the div look clickable*/
}
div.panel {
	width: 95%;
	margin: 0px;
	padding: 5px;
	background-color: #FFF;
	display: none;
}
/* end styles for showing and hiding div*/


/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
.staff-leftColumn {
	margin-right: 19.5em;
}
.staff-rightColumn {
	position: absolute;
	top: 0;
	right: 0;
	width: 18.75em;
}
}

/********** MEDIA QUERIES ************/

/* Change styling for various screen sizes */
@media screen and (max-width: 1600px) and (min-width: 800px) {
	.staff-leftColumn{width:70% !important;}
	.staff-rightColumn{width:30% !important;}
}

@media screen and (max-width: 799px) and (min-width: 511px) {	
	.staff-leftColumn{width:100% !important;}
	.staff-rightColumn{width:100% !important;}
	h4:before {
		content:"\a";
		white-space:pre;
	}
}

@media screen and (max-width: 510px) and (min-width: 200px) {
	.staff-leftColumn{width:100% !important;}
	.staff-rightColumn{width:100% !important;}
	h4:before {
		content:"\a";
		white-space:pre;
	}
}