[v-cloak] {
  /* Hide un-compiled mustache bindings until the Vue instance is ready */
  display: none;
}

/*
* {
  box-sizing: border-box;
}

a,
a:visited,
a:hover {
color: #389dc1;
display: block;
outline: none;
text-decoration: none;
}

a:hover {
text-decoration: none;
}*/

.grid-list {
background-color: #fff;
color: #5e5b64;
/*font: 17px/1.3 "Open Sans", sans-serif;*/
margin: 0 auto;
min-width: 300px;
padding: 30px;
text-align:center;
}

/* The tool bar */
.tool-bar {
background-position: top left;
background-repeat: no-repeat;
background-size: contain;
line-height: 1;
margin: 0 auto;
padding: 10px;
position: relative;
text-align: right;
width: 100%;
}

.tool-bar a {
background: rgba( 95,145,255 ) center center no-repeat;
border: 1px solid #e4e4e4;
border-right: 1px solid #908f8f;
border-bottom: 1px solid #908f8f;
cursor: pointer;
display: inline-block;
height: 32px;
margin-right: 5px;
text-decoration: none;
width: 32px;
}

.tool-bar a:hover {
border: 1px solid #e4e4e4;
}

.tool-bar a.active {
background-color: rgba( 71,145,255,0.5 );
border: 1px solid #908d8d;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;

}

.tool-bar a.active:hover {
cursor: default;
}

.tool-bar a.list-icon {
background-image: url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8////BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=" );
}

.tool-bar a.grid-icon  {
background-image: url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4////h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==" );
}

img.circle {
  width: 250px;
  border-radius: 50%;
}

/* Grid layout */
.grid {
background-color: #ddedfb;
list-style: none;
margin: 0 auto;
padding: 20px;
text-align: left;
width: 100%;
}

.grid li {
display: inline-block;
position: relative;
width: 25%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.grid li:after {
content: "";
display: block;
padding-bottom: 52%;
}

.grid li a {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 2px solid #fff;
height: 99%;
position: absolute;
width: 98%;
}

.grid li a:hover {
border: 2px solid #000;
box-shadow:         inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
-moz-box-shadow:    inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
-webkit-box-shadow: inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
}

/* List layout */
.list2 {
background-color: #ddedfb;
list-style: none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 100%;
}

.list2 li {
border-bottom: 1px solid #fff;
overflow: hidden;
padding: 20px;
transition: background 0.2s linear;
}

.list2 li:hover {
background-color: #fff;
}

.list2 li a {
display: table;
width: 100%;
}


.list2 li img {
border: none;
display: table-cell;
height: 120px;
vertical-align: middle;
width: 120px;
}

.list2 li:hover p {
color: #0096d4;
}

.list2 li p {
color: #000;
display: table-cell;
font-weight: 700;
padding: 0 0 0 15px;
vertical-align: middle;
width: 100%;
}

<!-- additional -->

.prebox {
  display: block;
  /*font-family: sans-serif;*/
  margin: 0;
white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;  
} 
.content_faculty{
/*color: #e6e6e6;*/
/*font-family: sans-serif;*/
    font-size:0.8rem;
    padding-bottom:10px;
}

.more{
position:relative;
clear:both;
/*font-family: sans-serif;*/
  text-transform: uppercase;
  font-size: 11px;
  padding: 5px 0px 10px;
  width: 540px;
  margin: 0 auto;
}
.more ul{
display:block;
text-align:center;
  height: 30px;
}
.more ul li{
display: block;
  padding: 4px 2px;
  float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#b2891b;
color:#fff;
text-shadow:none;
}
.more ul li a{
color:#555;
  float:left;
background:#fff;
  width:40px;
padding: 2px 5px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}


.bbox{
width: 255px;
height: 520px;
margin: 5px 5px 5px 5px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 1px 2px #e6e6e6;
box-shadow: 2px 2px 2px 2px #e6e6e6;
overflow:auto;
}

.deptname{ 
  float: inline-start;
  width: 100%;
  padding-bottom:20px;
  text-align:left;
}
.deptname:not(:first-child) {
    margin-top:30px;
}
.deptname:empty{
    margin:0;
    padding:0;
}

.view {
 width: 212px;
 height: auto;
 margin: 0px;
 float: left;
 border: 10px solid #fff;
 overflow: hidden;
 position: relative;
 text-align: center;
 cursor: default;
 background: #fff;
left:-18px;
top: -5px;
}
.view .mask,.view .content {
 width: 212px;
 height: 320px;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0;
}

.view1 .mask2,.view1 .content {
 width: 212px;
 height: 320px;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0;
}

.view1 {
 width: 230px;
 height: 320px;
 float: left;
 overflow: hidden;
 position: relative;
 text-align: center;
 cursor: default;
 background: #fff;
}
.view1 h2 {
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 font-size: 17px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.8);
 margin: 20px 0 0 0;
}
.view1 a.info1 {
 display: inline-block;
 text-decoration: none;
 padding: 7px 14px;
 background: #000;
 color: #fff;
 text-transform: uppercase;
 -webkit-box-shadow: 0 0 1px #000;
 -moz-box-shadow: 0 0 1px #000;
 box-shadow: 0 0 1px #000;
}
.view1 a.info1: hover {
 -webkit-box-shadow: 0 0 5px #000;
 -moz-box-shadow: 0 0 5px #000;
 box-shadow: 0 0 5px #000;
}

.showinfo{
display: block;
color: #000;
 text-align: left;
 padding: 0px;
 top: -20px;
 margin: 10px;
 line-height:16px;
}

.view img {
 display: block;
 position: relative;
width: 220px;
}
.view h2 {
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 position: relative;
 font-size: 17px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.8);
 margin: 20px 0 0 0;
}
.view p {
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 12px;
 position: relative;
 color: #fff;
 padding: 10px 20px 20px;
 text-align: center;
}
.view a.info {
 display: inline-block;
 text-decoration: none;
 padding: 7px 14px;
 background: #000;
 color: #fff;
 text-transform: uppercase;
 -webkit-box-shadow: 0 0 1px #000;
 -moz-box-shadow: 0 0 1px #000;
 box-shadow: 0 0 1px #000;
}
.view a.info: hover {
 -webkit-box-shadow: 0 0 5px #000;
 -moz-box-shadow: 0 0 5px #000;
 box-shadow: 0 0 5px #000;
}
  
.view-fifth img {
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
 background-color: rgba(146,96,91,0.3);
 -webkit-transform: translateX(-212px);
 -moz-transform: translateX(-212px);
 -o-transform: translateX(-212px);
 -ms-transform: translateX(-212px);
 transform: translateX(-212px);
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
 background: rgba(255, 255, 255, 0.5);
 color: #000;
 -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 color: #333;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 -ms-transition: all 0.2s linear;
 transition: all 0.2s linear;
}
.view-fifth:hover .mask {
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 -o-transform: translateX(0px);
 -ms-transform: translateX(0px);
 transform: translateX(0px);
}
.view-fifth:hover .imgs {
 -webkit-transform: translateX(212px);
 -moz-transform: translateX(212px);
 -o-transform: translateX(212px);
 -ms-transform: translateX(212px);
 transform: translateX(212px);
 filter: alpha(opacity=100);
 opacity: 1;
}
.view-fifth:hover p {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}
.research_area {
    color: #aaa;
    line-height:14px;
}
.research_area a {
 color: #aaa;
  font-weight: 400;
  font-size:0.8em;
}
.research_area a .bold{
 color: #000;
  font-weight: bold;
  font-size: 11px;
}
.nav_search{
float: left;
margin: 5px;
position: relative;
}
.fix {
  position: absolute;
  z-index: 0;
}
.selectOpen {
  z-index:9;
}

.list table {
  border-collapse: collapse;
  border: none;
}
.list tr {
  border-top: 1px solid black;
}
.list tr:first-child {
  border-top: none;
}
.list td {
  border: none !important;
}
.list tr:nth-child(even) {
    background-color: #EDF3FF;
}

.stf_name {
    padding-top:10px;    
}
.stf_name a {
    text-decoration:none;
    font-size:1.1em;
    font-weight:700;
}
.stf_room {
    padding-top:10px;
}
.stf_email {
    padding-bottom:10px;
}
table.list {
    margin-bottom:30px;
}
table.list td {
    text-align:left;
    font-size:0.9em;
}

.deptname h2{
    font-size:1.3em;
}