/*------------------------------------------------------
Boutros AbiChedid - boutrosa@princeton.edu
START DATE: September 2013
@file theme.css
PURPOSE: 	CSS Stylesheet for PNI Drupal Website/Theme.
--------------------------------------------------------*/
html,
body {
	height: 99%; /* BAC. 12/22/2014. Not 100% so thatthe browser's vertical scrollbar does not show all the time regrdless of content height */
}

body {
	background-color: #FFF;
	color: #666;
	font-family: "ITCFranklinGothicW01-Bk 812656", sans-serif !important;
	font-size: 16px; /* Use 14px with *FontOPtion1* */
	line-height: 20px; /* Use 20px with *FontOPtion1* */ /* BAC. !Imp. Also affects the Search box icon's height. */
	margin: 0;
}

/* Logo */
header div.logo {
	float: left;
	margin: -5px 0 0 -65px !important; /* BAC. keep as -5px as a Common ground between the Wide and Boxed layout */
	padding: 0 !important;
	position: relative;
}

header h3.show-at-small-dims {
	display: none;
	float: left !important; /* BAC. Important When Site Slogan is checked in Admin */ 
}
/* This is for the maintenance pages only. */
header div.show-at-small-dims {
	display: none;
}


/* Header */
header {
	clear: both;
	border-top: 5px solid #EDEDED;
	background: #f6f6f6;
	background: -moz-linear-gradient(top,  #f6f6f6 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top,  #f6f6f6 0%,#ffffff 100%);
	background: -o-linear-gradient(top,  #f6f6f6 0%,#ffffff 100%);
	background: -ms-linear-gradient(top,  #f6f6f6 0%,#ffffff 100%);
	background: linear-gradient(to bottom,  #f6f6f6 0%,#ffffff 100%);
}

header div.header-top {
	min-height: 50px;
}

header div.header-top form {
	margin: 0;
}

body.boxed header div.header-top {
	margin-top: -5px;
}

header div.header-top p {
	float: left;
	font-size: 0.9em;
	line-height: 50px;
	margin: 0;
}

header div.header-top i {
    margin-right: 6px;
    margin-left: 6px;
    position: relative;
    top: 1px;
}

header div.header-top nav {
    float: left;
}
.nav-top {
	float: right;
}

header div.header-top ul.nav-top {
	margin: 7px 0 0 -15px;
	min-height: 5px;
}

header div.header-top ul.nav-top li a {
	padding-left: 4px;
}

/* Side Menus:
	 	Directory Page Left Side Menu
		Education Page Left Side Menu
		Research Page Left Side Menu
		Archives Page Left Side Menu
		Opportunities Page Left Side Menu
		Facilities Page left Side menu
*/
/* 
BAC. 10/30/14. No Bullets for ANY OF THE SIDE MENUS 
#block-menu-block-6 li a:before , 
#block-menu-block-7 li a:before, 
#block-menu-block-8 li a:before,
#block-menu-block-9 li a:before,
#block-menu-block-10 li a:before,
#block-menu-block-11 li a:before,
#block-menu-block-12 li a:before,
#block-menu-block-16 li a:before,  
#block-menu-block-17 li a:before {
		content: "\2023";
		padding-right: 3px;
		font-size: 1.25em;
		clear:both;
} */

#block-menu-block-6 li a, 
#block-menu-block-7 li a, 
#block-menu-block-8 li a,
#block-menu-block-9 li a,
#block-menu-block-10 li a,
#block-menu-block-11 li a,
#block-menu-block-12 li a,
#block-menu-block-14 li a,
#block-menu-block-16 li a,
#block-menu-block-17 li a {
		text-transform:none !important;		
}		

#block-menu-block-6 li, 
#block-menu-block-7 li, 
#block-menu-block-8 li,
#block-menu-block-9 li,
#block-menu-block-10 li,
#block-menu-block-11 li,
#block-menu-block-12 li,
#block-menu-block-14 li,
#block-menu-block-16 li,
#block-menu-block-17 li {
		clear:both !important;
		
}	

#block-menu-block-6 div, 
#block-menu-block-7 div, 
#block-menu-block-8 div,
#block-menu-block-9 div,
#block-menu-block-10 div,
#block-menu-block-11 div,
#block-menu-block-12 div,
#block-menu-block-14 div,
#block-menu-block-16 div,
#block-menu-block-17 div {
		margin-top: -10px !important;
}

/**
8/21/14. BAC. I did this on purpose. So that I don't have to add a 'tagged/formatted' title to the Block since a formatted title will cause validation errors. Keep the Block title as a plain text or <none>. No HTML tags in a block's title. 
8/22/14. The next is not used anymore since I added the block template to PNI. Keep anyway.

#block-menu-block-6 h2, 
#block-menu-block-7 h2, 
#block-menu-block-8 h2,
#block-menu-block-9 h2,
#block-menu-block-10 h2,
#block-menu-block-11 h2,
#block-menu-block-12 h2,
#block-menu-block-13 h2{
	font-size: 1.35em;
	letter-spacing: normal;
	line-height: 27px;
	margin: 0 0 14px 0;
}

#block-views-calendar-block-2 h2,
#block-views-news-events-archive-block h2{
	font-size: 1.3em;
	letter-spacing: normal;
	line-height: 20px;
	margin: 10px 0 10px 0;
}
**/

/* BAC. 8/21/14. Student Spotlight Block. The reason for this to solve validation error of 
formatted title in Block. Now, I add just plain text in the Block's title and I do the styling here. */
#block-views-testimonials-block h4 {
	color: #bbb; /* this is done dynamically by less. Just a fallback Color */
	font-size: 1.5em;
	font-weight: 300;
	letter-spacing: normal;
	line-height: 30px;
	margin: 25px 0 20px 0;
	text-transform: uppercase;
}

/* People Directory - ALL - Concise - Table Format  AND
Faculty details - Quick Links Page  */

#block-system-main div.content div.table-bordered {
	border: 0 !important;
}
#block-system-main div.content div.table-bordered table{
	width: 100%;
}
.view-people-directory-all div.views-widget .form-item select {
		height: 155px !important;
}

#block-system-main div.content div.table-bordered table.views-table tr td{
	padding: 4px 5px 4px 0 !important;
	background-color: #fff;
	border-left: 0 !important;
}
#block-system-main div.content div.table-bordered table.views-table th {
	background-color: inherit;
	border-left: 0 !important;
}

/* BAC. 12/24/2014 People Directory - ALL - Concise - Table Format */

.view-people-directory-all table{
	font-size: 0.88em; /* BAC. 12/24/14. Applies to all the 'tabular view' table */
}
.view-people-directory-all table th.views-field-field-phone {
	min-width: 90px;
}
.view-people-directory-all table th.views-field-field-lab {
	min-width: 150px;
}
/* BAC. 3/24/2015 */
.view-people-directory-all tr td a img {
  border: 1px solid #ccc;
  padding: 1px;
  border-radius: 9%;
  margin-left: -6px;
  max-width: 40px; /* BAC. Better to resize here for Retina displays. Original Image is rescaled by Drupal to 100by100px */
}

.view-people-directory-all tr td a img:hover {
	border: 1px solid #999;
}

/* BAC. 10/16/14. Faculty Directory Tabular Display */

.faculty-directory-tabular-display{
	font-size: 0.88em;
}

.faculty-directory-tabular-display tr td.views-field-field-name-second-format {
	margin-left: 10px;
}
.faculty-directory-tabular-display table tr th {	
}
#block-system-main div.content div.table-bordered table.views-table tr  {
  border-bottom: 1px solid #ddd !important;
}

.faculty-directory-tabular-display tr td a img {
	border: 1px solid #ccc;
  padding: 1px;
  border-radius: 9%; /* BAC. 10/30/14. Changed from 50% */
	margin-left: -6px;
	max-width: 50px; /* BAC. 10/16/14. Extremely important to fix the image width for consistent behavior among browsers. */
}

.faculty-directory-tabular-display tr td {
	padding: 4px 5px 4px 5px !important;
}
.faculty-directory-tabular-display tr td a img:hover {
	border: 1px solid #999;
}
    /* BAC. 10/30/2014 . Display the names and phone numbers on ONE line instead of wrapped. 
		This needs to be adjusted at responsive and let the text wrap. */
.faculty-directory-tabular-display tr th.views-field-field-phone {
	min-width:90px;
}
.faculty-directory-tabular-display th.views-field-field-name-second-format {
	min-width: 90px;
}
.faculty-directory-tabular-display th.views-field-field-office{
	min-width: 40px;
}
.faculty-directory-tabular-display th.views-field-field-email-link{
	/*min-width: 150px; */
}
.faculty-directory-tabular-display th.views-field-field-repeat-faculty-directory-c {
	min-width: 120px;
}
.faculty-directory-tabular-display td.views-field-field-repeat-faculty-directory-c ul li{
	list-style:none;
}

/* BAC. 3/25/2015. Sorting by research Area */
.view-faculty-directory-tabular-sort-by-research-area, .view-researchers-directory-tabular-display {
	font-size: 0.87em; /* BAC. 12/24/14. Applies to all the 'tabular view' table */
}
.view-faculty-directory-tabular-sort-by-research-area ul li, .view-researchers-directory-tabular-display ul li {
	list-style: none;
}
.view-faculty-directory-tabular-sort-by-research-area table.views-table caption {
	font-variant:small-caps;
	font-weight:600;
	font-size: 1.15em;
	padding-top: 15px;
}
.view-faculty-directory-tabular-sort-by-research-area table.views-table caption div.item-list ul li  {
	font-variant:small-caps;
	color: #888;
	font-weight:500;
	font-size: 1.4em;
}
.view-researchers-directory-tabular-display table.views-table caption {
	font-variant:small-caps;
	color: #888;
	font-weight:500;
	font-size: 2.0em;
	margin: 30px auto 5px auto;
}
/* BAC. 3/25/2015. Overwritting the .faculty-directory-tabular-display */
.view-researchers-directory-tabular-display tr td a img, 
.view-students-directory-tabular-display tr td a img {
	max-width: 40px;
}
/* BAC. 11/03/14. Events Only Archive. Display the 'Event Date & Time' on Two lines and 'Category' on ONE line 
instead of wrapped. This needs to be adjusted at responsive and let the text wrap. */
		
.view-events-only-archive table.views-table th.views-field-field-event-date-time{
	min-width: 140px;
}
.view-events-only-archive table.views-table th.views-field-field-event-categoty{
	min-width: 190px;
}

/* For People Directory: All categories except Admins. */
.directory-custom-margin{
	margin:0 0 20px -20px; 
}
.directory-custom-margin a {
	font-size:0.86em;
}
	
/* For Administrative Satff Directory.  */
.admin-staff-custom-margin{
	margin:0 0 -10px -20px; 
}
.admin-staff-custom-margin a{
	font-size:0.86em;
}


/* Social Icons */
header div.social-icons {
	clear: right;
	float: right;
	margin-top: 10px; /* BAC -2px */
}

body.sticky-menu-active header div.social-icons {
	margin-top: 2px;
}

header div.container {
	position: relative;
}

/* About us */
.pull-left p.lead {
	padding-right: 40px;
}

/* Search. BAC. Search Box at the Top */
header div.search {
	float: right;
	margin: 4px 0 0 0; /* BAC 6px 0 0 */
	min-width: 130px; /* 206px */
}

/* Navigation Menu*/
header nav {
	float: right;
}

nav select.selectnav {
	display: none;
}

nav ul.nav-main {
	margin: 5px 8px 0 0; /* BAC.  -5px 10px 10px 0; */
}

nav ul.nav-main li.dropdown.open a.dropdown-toggle {
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

nav ul.nav-main ul.dropdown-menu,
nav ul.nav-main li.dropdown.open a.dropdown-toggle,
nav ul.nav-main li.active a {
	background-color: #919191;
	text-decoration:none; /* BAC. This is for Opera */
}

nav ul.nav-main ul.dropdown-menu  {
	-moz-border-radius: 0 6px 6px 6px;
	-moz-box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 0 6px 6px 6px;
	-webkit-box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.3);
	border: 0;
	border-radius: 0 6px 6px 6px;
	box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.3);
	margin: 1px 0 0 3px;
	padding: 4px;
	text-decoration:none; /* BAC. For Opera */
}

nav ul.nav-main ul.dropdown-menu ul.dropdown-menu {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin-left: 0;
	margin-top: -5px;
	text-decoration:none; /* BAC. This is for Opera */
}

nav ul.nav-main ul.dropdown-menu li:hover > a {
	filter: none;
	background: #999;
	text-decoration:none; /* BAC. For Opera */
}

nav ul.nav-main ul.dropdown-menu li > a {
	color: #FFF;
	font-weight: 400;
	text-transform: none;
	position: relative;
	padding: 8px 5px 8px 5px;
	font-size: 1.0em;
	border-radius: 6px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	text-decoration:none; /* BAC. For Opera */
}
#block-menu-block-3 ul.nav-main ul.dropdown-menu, #block-menu-block-18 ul.nav-main ul.dropdown-menu {
	margin-left: 30px;
	margin-top: 0;
}

nav ul.nav-main ul.dropdown-menu li:last-child > a {
	border-bottom: 0;
	text-decoration:none; /* BAC. For Opera */
}

nav ul.nav-main li a {
	font-size: 14px;  /* Use 12px with *FontOPtion1* */
	font-style: normal;
	font-weight: 500;
	line-height: 14px;
	margin-left: 3px;
	margin-right: 3px;
	text-transform: uppercase;
}

nav ul.nav-main li a:hover {
	background-color: #F4F4F4;
}

nav ul.nav-main li.dropdown:hover > a {
	padding-bottom: 11px;
	margin-bottom: -1px;
}

nav ul.nav-main li.dropdown:hover a.dropdown-toggle {
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

nav ul.nav-main li.dropdown:hover > ul {
	display: block;
}

/* The 3Centers Page*/

.centers {
	min-height:112px; /* to keep the image confined in its place. Logo with text, use 157px*/
}
.centers img {
	border: 3px solid #e9e9e9;
	padding: 0;
	border-radius: 12px;
}


/* People Directory (applies for ALL: Students/Faculty/Admins/Researchers) Page*/

/* Add Diamond bullets before every div in the Area(s) of the team Member */
/* http://css-tricks.com/snippets/html/glyphs/ 
http://www.artishock.net/coding/css-list-styling-using-ascii-special-characters/
*/
div.field-name-field-area-s- div.field-items  div.field-item:before {
  content: '\2666'; /* Diamond shape. Special Characters in ISO */
  padding-right:6px;
}
div.field-name-field-department-program-s- div.field-items  div.field-item:before {
  /* content: '\2023'; /* 11/3/14. BAC. REMOVED right arrow. Special Characters in ISO */
  font-size:1.3em;
  padding-right:6px;
}

/* Individual People (Team) Page. */
div.team-share-this {
	border-top: 0px;
	margin: 15px 0 0 0;
	padding: 10px 0 10px 0;
	clear:both;
}

div.team-share-this h3 {
	font-size: 1.6em;
	font-weight: 200;
	margin: 0 0 10px;
	text-transform: none;
}

div.team-share-this h3 i {
	margin-right: 7px;
}

/* Faculty Directory Page */

/* Add Diamend bullets before every div in the Area(s) of the Faculty Member */
/* http://css-tricks.com/snippets/html/glyphs/ */
div.field-name-field-area-s- div.field-items  div.field-item:before {
  content: '\2666'; /* Diamond shape. Special Characters in Octal form */
  padding-right:6px;
}

.field-name-field-faculty-directory-bio {
	height: 10px !important;
}

/* Faculty Directory Page - Horizontal Display*/
.table-not-bordered {
  border: 0px;
}

/* BAC. Isotope Filtering. This is important to keep the layout of Faculty/team compartments aligned.
This will be used for the Faculty Directory Vertical Display.  */
/*****REMOVED THE FIXED HEIGHT FOR THE VERTICAL DISPLAY. I THINK IT LOOKS NICER.
.isotope-item div.faculty-directory-item {
	height: 740px;
	overflow: auto;
}

.isotope-item div.team-item {
	height: 590px;
	overflow: auto;
}
******/

/* BAC. 4/2/14.
THIS IS BECOMING A STYLING NIGHTMARE, SINCE I HAVE TO DEAL with multiple devices and screen sizes. Also I have to deal with
2-column or 3 column Layout for the Horizontal display, and members can have different content. And I need to find a common ground based on the worst case scenario, which leaves a lot of empty space between rows. Therefore for now I am going to disable it. KEEP IT just in case I revert back in the future NOW IT IS horizontal masonary display instead of Perfectly 
aligned Tables.
Converted the Perfectly aligned Horizontal Display into Masonary Horizontal Display. This is much better for Responsive
screens, multiple browsers, multiple devices, mimimizing voids (blank spaces), No maintenance nightmareb and also by 
not showing the vertical (and sometimes the horizontal) scrollbars. Also at small screens (<767px) the Tables will 
display one after the other in a one column. This is much cleaner alternative for styling.*/
/*BAC. Isotope Filtering. Important to keep the layout of Admin Staff Directory and Researchers Directory Horizontal Display aligned. That's why I am activating the vertical scrollbar. Since I am using 2 Items in a row at span6 each.

10/24/2014. BAC. reverted back to the Perfectly aligned Horizontal Display from the Masonary display becay they want it this way */ 
/***(method*1)- Perfectly aligned Horizontal Display***
.isotope-item div.admin-directory-horizontal {
	height: 295px;   height and Scrollbar work together 
	overflow: auto;
}
Used for both researchers and Students Categories 
.isotope-item div.team-horizontal {
	height: 365px;   height and Scrollbar work together 
	overflow: auto;
}
BAC. Isotope Filtering. Important to keep the layout of Faculty Directory Horizontal Display aligned.
Since I am using 2 faculties in a row at span6 each.

.isotope-item div.faculty-directory-horizontal {
	height: 450px; 
	overflow: auto;
}
*****/

/*BAC. 4/2/14. I specified the min-height to keep the tables aligned w/o having to worry about the scroll-bar and this 
is better than (method*1) since I only have to modify it twice at responsive (<1180px and <767px), also no-scrollbar is invoked and also it is less of a maintenance nightmare than (method*1). Depending how much I set the min-height for, the table elements don't have to be perfectly aligned. One setting for the 2 and 3 Column layout. This is also better than letting the 
browser do the alignment for me with unpredictable behavior.*/
.isotope-item div.admin-directory-horizontal {
	min-height: 285px; 
}
.isotope-item div.faculty-directory-horizontal {
	min-height: 300px; /* 415px */
}
/* for Students */
#block-views-students-horizontal-block .isotope-item div.team-horizontal {
	min-height: 200px; /* 410px */
}
/* for Researchers */
#block-views-team-horizontal-block .isotope-item div.team-horizontal {
	min-height: 200px; /* 410px */
}

/* BAC. The faculty directory image did not respond, whatever I did. Weird! Left as Is. 
It has to do with the URL and icon that Links the image. Remove the URL and it responds like the others. */
.isotope-item div.admin-directory-horizontal img, 
.isotope-item div.team-horizontal img{
	border-radius: 6px;
	margin-left:-20px; /* BAC. This is changed at <767px */
}

/* Team & Faculty Directory - Reset Filter Button - NOT USED FOR NOW.*/
#faculty-directory button, #team button {
	margin: -20px 0 0 0; 
}
#faculty-directory button a, #team button a {
	color:#fff;
}

/* Top Navigation, Near Search Field. */
header nav ul.nav-top {
	margin: 0 10px 0 0;
	min-height: 52px;
}

header nav ul.nav-top li {
	display: block;
	line-height: 14px;
	margin-bottom: 2px;
	margin-right: 2px;
	margin-top: 2px;
	padding: 5px 0 5px 0;
}

header nav ul.nav-top li a,
header nav ul.nav-top li span {
	color: #666;
	font-size: 0.96em;
}

header nav ul.nav-top li i {
	margin-right: 2px;
	position: relative;
	top: 1px;
}

header.flat-menu div.social-icons {
	margin: 10px 10px 0;
}

header.flat-menu div.search {
	margin-top: 8px;
}

header.flat-menu div.search form {
	margin: 0;
}

header.flat-menu div.search input.search-query {
	padding-bottom: 5px;
	padding-top: 5px;
}

body.sticky-menu-active header {
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
	border-bottom: 1px solid #E9E9E9;
	border-top: 0;
	position: fixed;
	top: -50px;
	width: 100%;
	z-index: 1001;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.10);
	filter: none;
}

body.sticky-menu-active header div.logo {
	position: absolute;
	bottom: 0;
}

body.sticky-menu-active header nav ul.nav-main {
    margin-top: 0;
}

/* Clean Top */
header.clean-top div.header-top {
	border-bottom: 1px solid #EDEDED;
	background-color: #F4F4F4;
}


header.center div.logo {
    float: none;
    text-align: center;
    position: static;
}

header.center nav {
	float: none;
	text-align: center;
}

header.center nav ul.nav-main > li {
	display: inline-block;
	float: none;
	text-align: left;
}

body.sticky-menu-active header.center nav {
	float: right;
	margin-top: 9px;
}

/* BAC. Section Featured News. DO NOT CHANGE THE CLASS NAMES. IT IS USED in the User News Background choice.  */
section.featured {
	/*border-bottom: 4px solid #bbb !important; */
	margin: 10px 0;
	padding: 17px 0;
}

section.featured.footer {
	margin: 30px 0 -33px;
}

section.featured.news {
	margin-top: -10px; /* Do not change this, it will affect Option2 of the Front page layout */
	border-top: 0;
	margin-left: -24px; /* BAC. 10/13/14. This is important. Otherwise the News slider breaks */
	border-right: dashed 1px #ddd;
}
section.featured.news h3 {
	line-height: 24px;
	margin-top:0;
	padding-top: 0;
}

section.featured.news h3 a:hover {
	border-top: 1px solid #dedede;
}

section.featured.news h3 a, section.featured.news a:link {
	opacity: 1.0;
  filter: alpha(opacity=100);
}
section.featured.news h3 a:hover, section.featured.news a:active {
		border-top: 1px solid #dedede;
}

/* 10/13/2014. BAC. Events Section at the front page */

div.events-front-page {
}
div.events-front-page h3 {
	margin-top: 5px;
}
div.events-front-page h3 a, div.events-front-page h3 a:link {
	opacity: 1.0;
  filter: alpha(opacity=100);
}
div.events-front-page h3 a:hover, div.events-front-page h3 a:active {
	border-top: 1px solid #dedede;
}

/* BAC. 10/24/14. This also applies to the Upcoming Events at the Left sidebar */
div.events-front-page div.views-field-field-event-date-time span, div.view-display-id-block_2 span.date-display-single {
	color: #999; /* #f93; */
	font-size: 0.85em;
}

div.events-front-page div.views-field-title {
	line-height: 1.1em
}

/* BAC. 10/1/14. Added this for the Front Page 'Latest News' Slider */

section.featured.news h4 {
	line-height: 1.25em;
	font-size: 1.08em;
	padding-right: 8px;
}

section.featured.news h4 a:link, section.featured.news h2 a:link, div.events-front-page a:link { 
	opacity: 1.0;  
 	filter: alpha(opacity=100); 
}
section.featured.news h4 a {
	/* color: #fff; BAC. 10/14. Use with dark backgrounds.*/
}
section.featured.news h4 a:hover, 
section.featured.news h4 a:active, 
section.featured.news h2 a:hover, 
section.featured.news h2 a:active,
div.events-front-page a:hover,
div.events-front-page a:hover, { 
	opacity: 0.9;  
 	filter: alpha(opacity=90);  
}
section.featured.news p {
	/*color: #cfcfcf; BAC. 10/14. Use with dark backgrounds.*/
	font-size: 0.98em;
	text-align: left;
	padding-right: 8px;
}

.row .flex-control-nav ol li {
	color: #fff;
}

/* BAC. 9/12/14. Text under Navigation buttons for Faculty Carousel at front Page */
	p.faculty-slider-nav-buttons-text {
		text-align: center; 
		margin-top:-8px; 
		padding-top:0; 
		line-height: 1.0em;
	}


/* 7/29/14. BAC. News and Events  Slider ate the Front page. Use this only for very dark Backgrounds. 
Comment out for other cases */

/**** 10/13/14. BAC
.recent-news .flex-control-paging li a { 
background: #aaa; 
background: rgba(255,255,255,0.5); 
box-shadow: inset 0 0 3px rgba(255,255,255,0.3);
}
.recent-news .flex-control-paging li a:hover { 
background: #fff; 
background: rgba(255,255,255,0.7); 
}
.recent-news .flex-control-paging li a.flex-active { 
background: #000; 
background: rgba(255,255,255,0.9); 
cursor: default; 
}
****/
/* Section Highlight */
section.highlight {
	background: #CCC;
	border-left: 0;
	border-right: 0;
	border: 3px solid #CCC;
	margin: 35px 0 45px;
	padding: 40px 0;
}

section.highlight div.thumbnail {
	background-color: #FFF;
}

section.highlight,
section.highlight > p,
section.highlight > a,
section.highlight h1,
section.highlight h2,
section.highlight h3,
section.highlight h4,
section.highlight h5 {
	color: #FFF;
}

section.highlight.footer {
	margin: 45px 0 -70px;
}

section.highlight.top {
	margin-top: 0;
}

/* Sidebar */
aside ul.nav-list > li > a {
	color: #666;
	font-size: 0.9em;
}

/* BAC. Centers Intro at the Front Page - under the MD Slider.  NOT USED ANYMORE. BUT KEEP. 
div.centers-intro {
	background-color: #171717;
	margin-bottom: 15px;
	overflow: hidden;
	padding: 10px 0 10px 0;  BAC If I want to enable the Button then use: 15px 0 10px 0; 
	position: relative;
	text-align:right !important;
	font-size: 1.2em;
}

div.centers-intro a.btn {
	position: relative;
	z-index: 1;
	margin-left: 20px;
}

div.centers-intro a.btn i {
	font-size: 1.1em;
	font-weight: normal;
	margin-left: 5px;
}

div.centers-intro a {
	color: #FFF;
}

div.centers-intro em {
	font-family: "MontiIta", cursive;
	font-size: 1.5em;
}
*/

/* PNI Centers Page. fc slideshow */
div.home-concept {
	/* background: transparent url(../img/dashed-path.png) no-repeat center -110px;  10/15/14. BAC. dashed path. 0px */ 
	width: 100%;
	overflow: auto; /* BAC. hidden */
	padding-bottom: 20px;  /* BAC. 10/15/14 dashed path. 30px */ 
	margin-top: -20px; /* BAC. 10/15/14 - not set. */ 
}

div.home-concept div.row {
	position: relative;
}
/* BAC. PNI Centers Page */
div.home-concept div.process-image {
	-moz-transition: all 0.3s ease-out 0.3s;
	-o-transition: all 0.3s ease-out 0.3s;
	-webkit-transition: all 0.3s ease-out 0.3s;
	transition: all 0.3s ease-out 0.3s;
	background: transparent url(../img/home-concept-item.png) no-repeat 0 0;
	width: 160px; 
	height: 175px; 
	margin: 0px 0 0 0; /* 100px 0 0 0; */
	padding-bottom: 15px; /* 50px */
	position: relative;
	z-index: 1;
}

/*BAC. Overwrite the default */
div.home-concept div.process-image a, div.home-concept div.process-image a:link {
	opacity: 1.0;  
 	filter: alpha(opacity=100); /* required for IE 8 & 9 */
}
div.home-concept div.process-image a:hover, div.home-concept div.process-image a:active { 
	opacity: 0.93;  
 	filter: alpha(opacity=93);  /* required for IE 8 & 9 */
}

div.home-concept div.process-image img {
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
	border-radius: 150px;
	margin: 7px 2px;
}

div.home-concept strong {
	display: block;
	font-family: "ITCFranklinGothicW01-Bk 812656", sans-serif;
	font-size: 1.1em; /* BAC. 1.3 em */
	font-weight: normal;
	position: relative;
	margin-top: 25px;
}
/* BAC. For the large Image in the fc slidshow */
div.home-concept strong.pni-visible {
		display: block;
		margin-top: 45px !important;
}

/* BAC. large Image in centers [page */
div.home-concept div.project-image {
	background: transparent url(../img/home-concept-item.png) no-repeat 100% 0;
	width: 350px;  
	height: 376px; 
	/* margin: 15px 0 0 -30px; For Wide Theme Layout */
	/* margin: 15px 0 0 -80px;  BAC. For boxed Theme layout with 4 centers for Boxed layout. */
	margin: 15px 0 0 0px; /* BAC. For boxed Theme layout with 3 centers for Boxed layout. */
	padding-bottom: 45px;
	position: relative;
	z-index: 1;
}

/* Page Top. Breadcrumbs. */
section.page-top {
	background-color: #171717;
	border-bottom: 5px solid #CCC;
	border-top: 5px solid #384045;
	margin-bottom: 20px; /* 35px */
	min-height: 50px;
	padding: 0;
	padding: 20px;
	position: relative;
	text-align: left;
}

section.page-top ul.breadcrumb {
	background: none;
	margin: -3px 0 0;
	padding: 0;
}

section.page-top ul.breadcrumb > li {
	text-shadow: none;
}

/* BAC. I had to set the breadcrumb color here, since I am using opacity for links */
section.page-top ul.breadcrumb li a {
	color: #ddd;
}

/* BAC. This is if Breadcrumb is set to true */
section.page-top h1 {
	border-bottom: 5px solid #f93;
	color: #FFF;
	display: inline-block;
	font-weight: 200;
	margin: 0 0 -25px;
	min-height: 37px;
	padding: 0 0 18px;
	position: relative;
}

/* BAC. This is if Breadcrumb is set to False (No breadcrumb) */
section.page-top h1.no-breadcrumb {
	border-bottom: 5px solid #f93;
	color: #FFF;
	display: inline-block;
	font-weight: 200;
	margin: 0 0 -25px;
	min-height: 37px;
	padding: 0 0 26px;
	position: relative;
}

/* Page Top Custom Centers - Could be used for other custom fields */
section.page-top.custom-field {
	background: #888; /* BAC. 10/15/14 #999 */
	border-top: 5px solid #777; /* BAC. 10/15/14 #888 */
}

section.page-top.custom-field div.row {
	position: relative;
}

section.page-top.custom-field p.lead {
	color: #eee;
}

section.page-top.custom-field img {
	bottom: -20px;
	position: absolute;
	right: 0;
}

section.page-top.custom-field h1 {
	color: #FFF;
	margin-bottom: 10px;
	margin-top: 30px;
}

/* Page 404 */
section.page-not-found {
	margin: 50px 0;
}

section.page-not-found h2 {
	font-size: 140px;
	font-weight: 600;
	letter-spacing: -10px;
	line-height: 140px;
}

section.page-not-found h4 {
	color: #777;
}

section.page-not-found p {
	font-size: 1.4em;
	line-height: 36px;
}

div.page-not-found-main {
	margin-top: 25px;
	text-align: center;
}

/* Footer.  I don't need many of those, BUT KEEP in case I enabled the footer blocks.*/
footer {
	background: #fff; /*121214; BAC. 11/14/14 White back. is important here in case the footer image does not load in time.*/
	border-top: 3px solid #bbb !important; 
	font-size: 0.9em;
	margin-top: 25px; /* This applies to all other pages, except front page */
	margin-bottom:0;
	padding: 0; /* 4px 0 0 */
	position: relative;
}

body.front footer {
	margin-top: 0px; /* This applies to front page only. */
}	

/***** BAC. Footer Ribbon. If the Footer Regions are activated then the margin-top needs to change.  ****/
footer div.footer-ribon {
	background: #999;
	position: absolute;
	margin: -16px 0 0 20px; 
	padding: 2px 4px 2px 4px;
	border-radius: 2px;
}

/*Ribbon Shadow */
footer div.footer-ribon::before {
	border-right: 10px solid #646464;
	border-top: 16px solid transparent;
	content: "";
	display: block;
	height: 0;
	left: -17px;
	position: absolute;
	top: 0;
	width: 8px;
}

/* 7/29/14. BAC. For Whitish/Light Background. Comment out for Black/Dark backgrounds.  */
footer ul.dark-it li a, footer p.dark-it a {
	color: #555 !important;
}

/* BAC. "Shadows Into Light" font does NOT look good in IE. Changed Font to MontiIta . */
footer div.footer-ribon span {
	color: #FFF;
	/*font-family: "MontiIta", cursive !important;*/
	font-size: 0.95em;
}
/*********/

footer div.container div.row > div {
	margin-bottom: 13px; /* 25px */
}

footer div.container input:focus {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

footer div.twitter a.time {
	color: #999;
	display: block;
	font-size: 0.9em;
	padding-top: 3px;
}

footer div.twitter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer ul.contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer ul.contact i {
	float: left;
	margin: 4px 5px 10px 0;
}

footer ul.contact p {
	margin-bottom: 10px;
}

footer a.logo {
	display: block;
}

footer a.logo.pull-bottom {
	margin-bottom: 12px;
}

footer form {
	filter: alpha(opacity=85);
	opacity: 0.85;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer a {
	color: #FFF !important;
}

footer h5 {
	color: #CCC !important;	
}

footer a:hover {
	color: #CCC;
}

footer h4 {
	font-size: 1.8em;
	font-weight: 300;
	text-shadow: 1px 1px 1px #000;
}

div.footer-copyright {
	/*background: #CCC; */
	background-image: url('../img/news-patterns/footer-bg.png');
	/* border-top: 4px solid #111; */
	margin-top: 0; /* 40px */
	padding: 20px 0 0 0;  /* 30px 0 10px; */
}

div.footer-copyright nav {
	float: right;
}

div.footer-copyright nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

div.footer-copyright nav ul li {
	border-left: 1px solid #505050;
	display: inline-block;
	line-height: 12px;
	margin: 0;
	padding: 0 6px;
}

div.footer-copyright nav ul li:first-child {
	border: medium none;
	padding-left: 0;
}

div.footer-copyright p {
	color: #666;
	margin: 0;
	padding: 0;
	line-height: 1.6em;
}

footer div.alert a {
	color: #222 !important;
}

footer div.alert a:hover {
	color: #666 !important;
}

footer span.phone {
	color: #FFF;
	font-size: 26px;
	font-weight: bold;
	display: block;
	padding-bottom: 15px;
	margin-top: -5px;
}

footer.short {
	padding-top: 50px;
}

footer.short div.footer-copyright {
	background: transparent;
	border: 0;
	padding-top: 0;
	margin-top: 0;
}

footer ul.nav-list.primary > li a {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	line-height: 20px;
	padding-bottom: 11px;
}

footer ul.nav-list.primary > li:last-child a {
	border-bottom: 0;
}

footer ul.nav-list.primary > li a:hover {
	background-color: rgba(255,255,255,0.05);
}

footer ul.list.icons li {
	margin-bottom: 5px;
}

/* Boxed Layout */
body.boxed {
	background-color: transparent;
	background-position: 0 0;
	background-repeat: repeat;
}

body.boxed div.body {
	-moz-border-radius: 3px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
	background-color: #FFFFFF;
	border-bottom: 4px solid #ccc;  /* The actual color here is dynamically set in the Admin through LESS preprocessor */
	border-radius: 3px;
	border-top: 4px solid #CCC;  /* The actual color here is dynamically set in the Admin through LESS preprocessor */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.40);
	margin: 4px auto; 
	max-width: 100%;
	width: 1060px; 
}

body.boxed header {
	padding: 15px 0;
}


body.boxed header.flat-menu {
	padding: 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

body.boxed header.clean-top {
	padding: 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}


body.boxed header.darken-top-border {
	border-top: 0;
}

/* Scroll to Top*/
a.scroll-to-top {
	-moz-border-radius: 7px 7px 0 0;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-border-radius: 7px 7px 0 0;
	-webkit-transition: all 0.3s;
	background: #404040;
	border-radius: 7px 7px 0 0;
	bottom: 0;
	color: #f93;
	display: block;
	height: 9px;
	padding: 13px 0 20px;
	position: fixed;
	right: 17px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	width: 49px;
	z-index: 1040;
}

a.scroll-to-top:hover {
	color: #fff;
}
a.scroll-to-top.visible {
	filter: alpha(opacity=75);
	opacity: 0.75;
}	


/* Javascript disabled */
.js-disabled {
	font-size: 1.05em;
	margin-top: 2px;
	margin-bottom: 10px;
	margin-right: 15px;
	position: relative;
	border:0;
}
.js-disabled p {
	margin: 0;
	padding: 4px 5px 5px 0 !important;
	color: #b00000 !important;
}
.js-disabled span {
	font-weight: 800;
}

/* Site Map */

.title {
	margin-top: 0;
	margin-bottom:0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Faculty Carousel /Faculty Research Summary */

.faculty-carousel img {
	border: 2px solid #ccc;
	padding: 0; /* BAC. Keep it at 0px to bypass Safari bug. This is true if I make the images as circles. */
	border-radius: 10%; /*50% for a circle */
}
.faculty-carousel img:hover {
	-moz-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	transform: scale(1.0,1.0);
	
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#block-views-carousel-block h2 {
	margin-top: -12px !important;
}

/* Faculty Carousel - Flexslider - Front Page*/
div.faculty-carousel div.flexslider li{
	font-size: 0.95em;
	text-align: left;
	line-height: 1.0em;
}
div.faculty-carousel div.flexslider div.image-field-caption {
	/*text-align:justify !important;*/
	margin: 5px 0 0 0;
	padding: 0;
	font-size: 0.92em;
	height: 100px !important; /* BAC. To keep all elements aligned at the Front Page */
  overflow:auto;
}

/* 7/30/14. BAC. This is used for option1 (side--by-side layout) in Front page. */

h3.short-1 {
	margin: 0 0 5px 0;
}


/* Image Caption for Faculty Research Summary for the Basic Page (Faculty Research Summary Page). */
div.faculty-carousel div.image-field-caption {
	text-align:left !important;
	margin: 5px 0;
	padding: 0;
	font-size: 0.90em;
	height: 150px !important; /* BAC. To keep all elements aligned. 180px*/
  overflow:auto;
}

div.image-field-caption ul li {
	margin: 0 0 0 -20px !important;
	padding: 3px 0 0 0;
	line-height:16px;
	list-style:none !important;
}

div.image-field-caption ul li a {
	color: #f93;
	font-size: 0.92em;
}
/* BAC. 10/6/14. For the Faculty Front Slider only */
.higher-contrast-anchor a, .higher-contrast-anchor a:link {
	opacity: 1.0;
  filter: alpha(opacity=100);
}
.higher-contrast-anchor a:hover, .higher-contrast-anchor a:active {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}

/* Left Sidebar Menus */

	/* A Menu that shows up in the Graduate Pages and I am not sure from where. Hide for now */
#block-menu-block-1 {
	display: none;
}
	/* Graduate Side Menu */
#block-menu-block-2, #block-menu-block-14 {
	margin-top:-0;
	margin-bottom: 45px; /* When the page content is less than the Menu height */
}
#block-menu-block-2 li a {
	text-transform:none !important;
}	
#block-menu-block-2 ul li {
	clear:both !important;
}	
/* Target the first element in the ul list only */
#block-menu-block-2 ul li:first-child a {
	/* font-size: 1.15em; BAC. 11/17/14. Disable for Now until this whole section is updated */
}	

	/* Undergraduate Side Menu */
#block-menu-block-3 {
	margin-top:0;
	margin-bottom: 25px; /* there are 2 menus on this page. */
}
#block-menu-block-18 {
	margin-top:0;
	margin-bottom: 20px; /* When the page content is less than the Menu height */
}
#block-menu-block-3 ul li a, #block-menu-block-18 ul li a {
	text-transform:none !important;
}	
#block-menu-block-3 ul li, #block-menu-block-18 ul li {
	clear:both !important;
}	

/* Glossary */

.glossary {
	margin-top: 18px;
}

.glossary .glossary-items  {
	padding-left: 11px;
	list-style:none;
}

.glossary .glossary-items li {
	margin-top: 12px !important;
}
.glossary .glossary-items .views-label  {
	font-size:0.81em;
	font-weight:600;
}	

/* Internals Page */
.form-wrapper {
	padding: 0;
	background:none;
	border-top: 0;
}

/* Blockquote - Overwrite Bootstarp */

blockquote p {
  font-size: 0.95em !important;
  line-height:1.4em !important;
}

/*CKEditor - Styles Button - Overwrite Bootstrap */
/* BAC. In the 'Rich View' he CKEditor always add the p tag, unless you delete the <p> tag in the 'source view'.
   Just in case the <p> tag is removed from inside the blockquote. */
blockquote { 
	font-size: 0.92em !important; /* Be careful with this, it affects all other blockquote instances */
    line-height:1.35em !important;
}

cite {
	font-size:0.96em;
	font-style:oblique;
	color: #bebebe;
}

/* lead font - Overwrite Bootstrap */
.lead {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400 !important;
}

/* Attached Files - field */

img.file-icon {
	border-bottom: 0 !important;
	padding: 0 5px 5px 10px !important;
}

/* General Classes. */

.padding-left {
	padding-left:10px;
}
.padding-right {
	padding-right:10px;
}
.padding-right-1 {
	padding-right:7px;
}
.padding-bottom {
	padding-bottom:11px;
}
.padding-top {
	padding-top:8px;
}
.padding-top-less {
	padding-top:6px;
}
.padding-top-more {
	padding-top:10px;
}
.margin-left {
	margin-left:20px !important;
}
.margin-left-1 {
	margin-left:23px !important;
}
.margin-left-0 {
	margin-left:5px !important;
}
.margin-right {
	margin-right:20px !important;
}
.margin-right-more {
	margin-right:70px !important;
}
.padding-right-more {
	padding-right:25px !important;
}
.boldit {
	font-weight:600;
}
.boldit-more {
	font-weight:800;
}
.boldit-less {
	font-weight:500;
}
.negative-margin-top {
	margin-top: -30px !important;
}
.margin-padding-top {
	margin-top: 25px !important;
	padding-top: 25px !important;
}
.margin-bottom {
	margin-bottom: 15px !important;
}
.margin-top {
	margin-top: 15px !important;
}
.margin-top-bottom {
	margin-top: 20px !important;
	margin-bottom: 35px !important;
}
.margin-top-bottom-1{
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}
.margin-padding-left{
	margin-left: 20px !important;
	padding-left: 20px !important;
}
.margin-top-bottom-2{
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}
.no-padding-margin {
	margin: -15px 20px 0 0 !important;
	padding:0 !important;
}
.no-padding-margin-1 {
	margin: -15px 20px 20px 0 !important;
	padding:0 !important;
}
.no-padding-margin-2 {
	margin: -5px 0 0 0 !important;
	padding:0 !important;
}
.no-padding-margin-3 {
	margin: -10px 0 0 0 !important;
	padding:0 !important;
}
.no-padding-no-margin{
	margin: 0 !important;
	padding:0 !important;
}
.minus-margin-left{
	margin-left: -23px !important;
}

.align-right {
	text-align:right !important;
}
.float-right {
	float:right !important;
}
.float-right-padright {
	float:right !important;
	padding-right: 10px !important;
}	
.center-it {
	text-align:center;
	margin: 0 auto;
}
/* Center divs (including images) */
.center-block {
    float: none;
    margin: 0 auto;
}
.larger {
	font-size: 1.10em; /* Use 1.10em with *FontOPtion1* */
}
.barely-smaller {
	font-size: 0.96em; /* Use 0.95em with *FontOPtion1* */
}
.tiny-smaller {
	font-size: 0.93em; /* Use 0.89em with *FontOPtion1* */
}
.smaller {
	font-size: 0.85em; /* Use 0.8em with *FontOPtion1* */
}
.smallest {
	font-size: 0.80em; /* Use 0.7em with *FontOPtion1* */
}
.super-smallest {
	font-size: 0.75em; /* Use 0.65em with *FontOPtion1* */
}
.extra-super-smallest {
	font-size: 0.6em; /* Use 0.5em with *FontOPtion1* */
}
.super-large {
	font-size: 2.0em !important; /* Use 2.0em with *FontOPtion1* */
}
.super-large-1 {
	font-size: 1.21em !important; /* Use 1.22em with *FontOPtion1* */
}
.super-large-2 {
	font-size: 1.9em !important; 
}
.tiny-larger {
	font-size: 1.09em; /* Use 1.05em with *FontOPtion1* */
}
.normal {
	text-align:left !important;
	line-height: 1.15em;
}
.narrower-line-height p{
	line-height: 19px;
}
text-right {
	text-align:right;
}
.min-margin {
	margin:6px 15px;
	padding:0 !important;
}
.min-margin-1 {
	margin:10px 30px;
	padding:0 !important;
}
.min-margin-2 {
	margin:6px 25px;
	padding:0 !important;
}
.clearall {
	clear:both !important;
}
.red {
	color: #b00000 !important;
}
.orange {
	color: #f93 !important;
}
.black {
	color: #000;
}
.white {
	color: #fff !important;
}
.dark-grey {
	color: #888 !important;
}
div h3.normal-font  {  /* normal-font. I am limited with size in the block's description */
	text-transform: none;
} 
div h3.normal-font a:hover  {  /* normal-font. I am limited with size in the block's description */
	opacity: 0.75;  
 	filter: alpha(opacity=75);  
}
.uppercase {
	text-transform:uppercase;
}
.no-text-transform {
	text-transform: none !important;
}
/* Variable tag */
var {
	font-size: 0.9em;
}
.no-border {
	border-style:solid;
	border-width: 0;
	padding-right: 5px;
}
.do-not-display {
	display: none;
}

/* Flexslider */
.flexslider.optionset-default {
	border: 0; /* reset */
	border-bottom: 3px solid #bbbbbb;
	border-top: 3px solid #ff9933;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

.flexslider.optionset-default .slide__overlay {
	color: #ffffff;
	font-size: 2em;
	position: absolute;
	text-align: center;
	text-shadow: 1px 1px 4px #000000;
	text-transform: uppercase;
	top: 45%;
	width: 100%;
}

@media all and (min-width:768px) {
	.flexslider.optionset-default .slide__overlay {
		font-size: 3.5em;
	}
}

.flexslider.optionset-default .flex-control-nav {
	bottom: 0;
	z-index: 2;
}

.flexslider.optionset-default .flex-control-paging li a {
	background: #cccccc;
	box-shadow: none;
	height: 12px;
	opacity: 1;
	text-shadow: 1px 1px 2px #000000;
	width: 12px;
}

.flexslider.optionset-default .flex-control-paging li a.flex-active {
	background: #ffffff;
	box-shadow: 1px 1px 2px #000000;
}

.flexslider.optionset-default .flex-direction-nav a {
	overflow: hidden;
}

.flexslider.optionset-default:hover .flex-direction-nav .flex-prev {
	left: 1.5em;
}

.flexslider.optionset-default .flex-direction-nav a.flex-prev:before {
	content: '\f104';
	display: block;
	font-family: 'fontawesome';
}

.flexslider.optionset-default:hover .flex-direction-nav .flex-next {
	right: 1.5em;
}

.flexslider.optionset-default .flex-direction-nav a.flex-next:before {
	content: '\f105';
	display: block;
	font-family: 'fontawesome';
}

.flexslider.optionset-default .flex-pauseplay a,
.flexslider.optionset-default .flex-direction-nav a:before {
	color: #ffffff;
	line-height: 1.2em;
	padding: 0 2px;
	text-shadow: 1px 1px 2px #000000;
}

/* MD Slider - BOUTROS ABICHEDID. */
/* 
UPDATE: 3/4/14: THE MAJOR CULPRIT HERE IS THE MD SLIDER JavaScript CODE that inject the CSS properties and it is hard to overwrite
without some delay. So, what I am doing here is a hack. It is not 100% effective, it is not pretty but it works.
Also Notice that the image background in the second slide, scales better at small screen size due to the precense of the Center 
images that forces somewhat proper scaling.
There is a bug in the CSS code that zooms-in (makes it larger) the background image to display larger than the actual image size. Therefore I have 2 choices: either have the exact image size (1060pxby325px) and Photoshop the image in a way that the most important elements of the image are located on the center, i.e. there is at least 60-70px at the top that are not relevant or better there is a 60-70px of padding all around that are not relevant. Or probably, if it works, add a background image that is much larger and let the slider shrink it. The classes below are the ones that controls the background-images, but it is hard to control 
since the Slider's Javascript code has a bug in it, that injects background styling (e.g top,...) as inline; that would be impossible to overwrite. The background images are still un-reliable in resizing, not-smooth and eratic in behavior (sometimes they display fine, some other time they display as zoomed-in(larger than the actual size, and other times the background images shrink while refreshing the page and it is noticeable.
See example:
<div class="md-mainimg">
<img src="http://localhost/pni/sites/default/files/md-slider-background_3.png" alt="" style="width: 1060px; height: auto; top: -25.44326241134752px; left: 0px;">
</div>
The solution is to have the image dimension exactly as the Slider dimension (325px height by 1060px wide) in addition to the code below and this code below (especially image sizes) has to change for Responsive
The drawback is that for a wide layout I have to resize the background images. FINALLY IT LOOKS MUCH BETTER.
The solution is to have the image dimension exactly as the Slider dimension (325px height by 1060px wide) in addition to the CSS code that I added in 'theme.css' file, that would solve it 95% of the time on all browsers. The drawback is that I can't use the slider for the wide layout anymore without having to re- size the background images and also modify the code in 'theme.css' accordingly.  
OR ANOTHER SOLUTION: I have to choose background images that won't matter if you rescale up or down, example would be solid color background. THE WAY IT IS NOW IT LOOKS MUCH BETTER. FINALLY!!!
*/
.md-mainimg {}
.md-mainimg img {
	top:0 !important; 
	left: 0 !important; 
	height: 325px !important; 
	width:1060px !important;
	position: absolute;
}

.md-slide-wrap {
  margin-bottom: 0 !important;
  border-top: 3px solid #f93; 
  border-bottom: 3px solid #bbb;
}

.md-object .main-button {
	padding: 18px;
}
.md-objects p {
	color: inherit;
}

/*BAC. Overwrite the default for links */
div.md-objects a, div.md-objects a:link {
	opacity: 1.0 !important;  
 	filter: alpha(opacity=100) !important; 
}
div.md-objects a:hover, div.md-objects a:active {
	opacity: 0.90 !important;  
 	filter: alpha(opacity=90) !important; 
}

/* 7/28/14. BAC left and Right Arrows. I had to make my own arrows with a transparent background */
.md-arrow-left, .md-arrow-right {
background: url(../img/md-arrow-transparent.png) no-repeat 0 0 !important;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
cursor: pointer;
z-index: 3;
}

.md-arrow-right {
right: 10px;
background-position: -40px 0 !important;
}

.md-arrow-left {
left: 10px;
}

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

/* Nivo Slider is not used. But keep anyway */
.theme-default .nivoSlider {
	box-shadow: none !important;
}
.theme-default .nivo-controlNav {
	margin-top: -57px;
	padding: 20px 0;
	z-index: 5;
	position: absolute;
}
.theme-default .nivoSlider img {
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
}

.tabbed-title {
  font-size: 13px;
}

.site-map-menus .title {
	display: none;
}


/* BAC. Name and Slogan */
#name-and-slogan {
	float: left;
	margin: -5px 0 0 10px; /* 22px . BAC.-40px to get the Name outside the .content container set by bootstrap. 
						  /* But with the Logo enabled that won't be needed.  */
}

#name-and-slogan div span {
	color: #f93;
	font-size:1.0em;
}

#name-and-slogan div a:hover {
	text-decoration:none;
	text-shadow:3px 3px 20px #dedede;
}

#name-and-slogan div span:hover {
	color: #e28528;
}

#site-slogan {
  font-size: 11px;
  margin-top:-15px !important;
  padding-top: 0;
  padding-left: 4px;
}
#site-name { 
	font-family: "ITCFranklinGothicW01-Bk 812656", sans-serif;
	padding-left: 0;  
	margin: 12px 0 0 0 !important; /* This needs to be adjusted if you add a logo to the left */
	font-size: 28px;
	font-weight:500; 
	letter-spacing: -1px;	
}
#site-name a {
	color: #444 !important; /* This override the default color set in the admin */	
}
.slogan-no-name { 
	margin-top: 15px;
}

header div.search input:focus {
	width: auto !important;
}

/* BAC. be very careful with the sticky-menu. If the margin is not set right, then the browser will not let you scroll all the way down for certain pages, depending on the page height */
/* The sticky-header menu only works for the Wide layout and not the boxed layout */
body.sticky-menu-active header #site-name {
  position: absolute; /* BAC new */
  top:50px;
  font-size: 22px;   
  /*padding-left: 60px; BAC this is a must only when the logo is activated.
   						O/W the logo will overlap the title when sticky-menu is in use. 
  						Reason: one word is only used as a name in the Admin. */
}
.mobile-menu {
	display: none;
	margin-top: 55px;
    width: 100%;
}
.nav-pills > li:hover > a {
	border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
}
#header-top { 
	overflow: hidden; 
}

/* People Directory (Team) Page */

.team-item span.thumb-info-caption p { 
  /* height: 65px !important; */ /*BAC. 10/28/14 Only important for Vertical Display and Not horizontal Display. Vertical Display is No longer being used, except for the single pages.  The original goal for this was to align the vertical Display of items.*/
  overflow:auto;
}

/* Faculty Directory Page */
.faculty-directory-item span.thumb-info-caption p {
 /* height: 75px !important;*/ /*BAC. 10/28/14 Only important for Vertical Display and Not horizontal Display. Vertical Display is No longer being used, except for the single pages.  The original goal for this was to align the vertical Display of items. */
  overflow:auto;
}

/* BAC. Member Profile that applies to Admin Staff, Students and Researchers Individualized Page */

div.member-profile {
	padding: 0 20px 0 10px;
	margin-left: 15px;
}
div.member-profile h2{
	margin-top: 0; /* This is will change at <767px  */
}

/* Create a Custom Scrollbar instead of the Default.
Ref: http://css-tricks.com/custom-scrollbars-in-webkit/ 
-- Code will not work in Opera (Latest versions of Opera use the Blink layout engine. Earlier versions used Presto layout engine.) 
-- Code will not work in Internet Explorer (Trident Engine) and Mozilla Firefox (Gecko engine) browsers.
-- Code works on Google Chrome (use Webkit and Blink layout Engines) and Safari (use the Webkit Engine)
*/

::-webkit-scrollbar {
    width: 9px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: rgba(181,86,31,0.5); 
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(181,86,31, 0.5); 
}

/* Faculty Details menu */
#block-menu-block-4 h6 {
	margin-left: 15px;
	margin-top:-10px
}
div.menu-block-4 {
	padding-left: 0; /* 142px; In case I want to use it in 'Faculty Directory' */
	margin-top: 0; /* -35px; In case I want to use it in 'Faculty Directory' */
}

div.menu-block-4 ul li a:hover {
	font-weight: 500 !important;
}

/* BAC. News|Events Archive side Menu and (7/24/2014) the Views for the NEWS|Events Side Menu.
NOTE: THE 'block-menu-block-5' is Not being used anymore since I switched the standard menu Block 
to a View Block so that I have better sorting control over it and also no need for Content editor 
to select the Menu when adding articles. But keep anyway.  */
#block-menu-block-5 div.content,  #block-views-news-events-archive-block div.content{
	max-height: 500px; /* Don't use 'height', it won't work */
	overflow: auto !important;
}	

#block-views-news-events-archive-block div.content div.nav{
	line-height: 0.9em;
	font-size: 0.88em;
	margin-bottom: 10px;
}	

#block-views-news-events-archive-block div.content div.view-header p{
	line-height: 1.0em;
	margin: 0 0 10px 0 !important;
	padding:0 5px 0 0 !important;
}

/* Events Calendar */
.date-next {
	padding: 2px 0 !important;
}
.date-prev {
	padding: 2px 15px 2px 0 !important;
}


/* Faculty Details Page - Image Caption.*/
.fac-details-image-caption img.file-icon {
	display: none;
}
.faculty-wrap img {
	/*border-bottom: 5px solid #f93;*/
	padding: 0;
}
.faculty-wrap .image-field-caption h4, .faculty-wrap .image-field-caption h6 {
	text-transform:uppercase;
}

.faculty-wrap .image-field-caption p {
	text-transform:uppercase;
}

/* Thumb Info For faculty Details Page*/

.faculty-wrap a.thumb-info {
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	opacity: 1.0;
    filter: alpha(opacity=100);
}

.faculty-wrap a.thumb-info img {
	transform:none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
	-webkit-transform: none !important;
	padding-bottom: 30px; /* 1 */
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	
}

.faculty-wrap a.thumb-info span.thumb-info-title {
	background-color: #a8a8a8;
	display: inline-block;
	float: left;
	font-size: 0.70em; /* 2 */ /* Use 0.65em with *FontOPtion1* */
	font-weight: 400;
	letter-spacing: 0;
	margin: 0 0 -9px 0; /* 3 (bottom) */
	padding: 2px; /* 4 (padding top/bottom) */ /* BAC: 1, 2, 3, 4 and 5 are direclty correlated */
	text-transform: none;
	border-bottom: 3px solid #f93; /* 5 (thickness) */
	line-height: 12px; /* BAC. Just in case there are multiple Categories */
}

/* Benefits Block */

.benefits p {
	font-size: 13px;
	color: #999;
	padding: 0 4px;
	line-height: 14px !important;
}
.benefits ul{
	padding-top: 0 !important;
	padding-bottom:0 !important;
}
.benefits ul li {
	padding-top: 0 !important;
	padding-bottom:0 !important;
	line-height:13px !important;
	font-size: 12px;
	color: #999;
}

/* BAC. Search Box at the Top */
.form-item-search-block-form input[type="text"] {
   -webkit-border-radius: 6px 0 0 6px;
   -moz-border-radius: 6px 0 0 6px;
   border-radius: 6px 0 0 6px;
   width: 120px; 
   margin-right:0;
   font-family: "ITCFranklinGothicW01-Bk 812656", sans-serif !important;
	 font-size: 12px;
}

/* Advanced Search */
#block-system-main .search-form {
	margin-bottom: 40px;
}

/* Search Results Meta */
.search-results .search-info {
  font-size: 0.88em !important;
}

/*search icon*/
#search-block-form .form-actions{
	background-color: #f93; 
	padding: 4px 5px 4px 5px !important;
	display: inline-block;
	-webkit-border-radius: 0 6px 6px 0;
	-moz-border-radius: 0 6px 6px 0;
	border-radius: 0 6px 6px 0;
	position: relative;
	top: 1px;
	margin-left: -4px;
}

#user-login .form-actions {
	padding: 0px;
	background-color: transparent;
	border: none;
}

.block ul.primary li a {
	background: transparent;
	border: 0px;
}

.block ul.primary {
	border-bottom: 0px;
}

#block-search-form form {
	margin-bottom: -10px;
}

.footer-logo {
	float: left;
	margin-right: 10px;
}

.footer-logo img {
	height: 35px;
}

.contact-form .form-actions {
	padding: 20px 0px;
	background: transparent;
	border-top: none;
}


.toggle label {
	font-weight: normal;
}

label {
	clear: both;
}

.indented {
  margin-left: 115px !important;
}

ul.links.inline li {
	padding-left: 10px;
}
.profile .user-picture { 
	margin-top: 60px !important;
}
#branding {
	display: inline-block;
	float: left;
}
.dropdown i {
	margin-left: 5px;
}
.dropdown-menu i {
	display: none;
}
.dropdown-menu {
	margin-top: -3px;
}
footer h2 {
	font-size: 1.8em;
	margin-bottom: 14px;
	line-height: 27px;
}
hr {
	border: none !important;
}

/* Contact Form */
.contact-form .form-item-name, .contact-form .form-item-subject {
	margin-left: 0px;
}

.contact-form .form-item-name input[type="text"] {
	width: 95%;
}

.contact-form .form-item-mail input[type="text"] {
	width: 93%;
}
.contact-form .form-item-subject input[type="text"] {
	width: 97%;
}
.contact-form .form-textarea-wrapper textarea {
  height: 200px;
}
.span6 .faculty-item img {
	width: 560px;
}
.item-list ul li {
  margin: 0px !important;
}

/* Related faculty Block, that shows at the end of the Faculty Details pages. */
#block-views-related-faculty-block {
	/*display: none;*/
}

/****
THIS IS DISABLED, since I am Showing All Team Members at the start per Category.
BAC. Hide Toggle Elements at startup for the Isotop Filter for 
People and Faculty directory. I have to hardcode all taxonomies here. 
If the taxonomies change then I need to change them here.
This is in addition of what's being done in 'pni.js' and the php template files.*/

/*.Collaborators,
.CV-Starr-Fellows,
.Graduate-Students,
.Lewis-Sigler-Fellows,
.Research-Specialist,
.Facility-Manager,
.Visitors,
.Joint-Graduate-Students,
.Other-Graduates,
.Postdoctoral-Research-Associates,
.Human-Neuroscience,
.Systems-and-Circuits,
.Theory-and-Computation
{
	opacity: 0; *//* BAC. don't put !important here you will hide them forever. */
/*}
*****/

/* Faculty publications AND TECHNICAL REPORTS Page */
#biblio-header ul.tabs {
	margin-top: 25px !important;
}
#biblio-header div.biblio-export {
	margin-top: -10px !important;
}
div.biblio-current-filters {
	background-color: #d1d1d1;
	border: 1px solid #aaa;
	margin: 15px 0 20px 0;
	padding: 5px 0;
}
div.biblio-current-filters b {
	padding-left: 7px;
}

/* BAC. 10/24/14. Don't display the user picture for each publication */
div.node-biblio .user-picture img {
	/*-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	padding: 4px;
	border: 1px solid #ddd;
	position: relative; */
	display: none;
}
div.node-biblio .submitted {
	margin-bottom: 20px;
	font-size: 0.86em;
	font-weight:600;
}
.biblio-title {
font-weight: 300 !important;
font-size: 1.05em;
text-decoration: none;
font-family: "ITCFranklinGothicW01-Bk 812656", sans-serif !important;
}

div#biblio-node table td.biblio-row-title {
	font-weight: 600;
	font-size: 0.92em;
}
div#biblio-node table td {
	background-color: #fff;
	border: 1px solid #eee;
	padding: 2px 10px;
}
div.node-biblio div.submitted{
	padding-left: 3px;
	font-weight: normal;
}
div.node-biblio div.submitted span.username{
	font-weight: 600;
	font-size:0.96em;
}
div.node-biblio div.submitted::before{
	content: open-quote;
	font-weight: normal;
	font-size: 1.2em;
}
div.node-biblio div.submitted::after{
	content: close-quote;
	font-weight: normal;
	font-size: 1.2em;
}

/* BAC. Entity Forms - This only Applies to the Intranet/Internal Website */

.entityform  #edit-change {
	margin-right: 10px;
}

/* 10/11/2014. BAC. Boutros AbiChedid. Centers - Front Page - Top Right section */

div.centers-front-page {
/*background: url(/sites/all/modules/md_slider/images/border/border-8.png) repeat 0 0;*/
}

.centers-front-page img {
border: 1px solid #aaa;
padding: 2px;
border-radius: 10%;
margin-left: 20px;
}

.centers-front-page a:link, centers-front-page a:link { 
	opacity: 1.0;  
 	filter: alpha(opacity=100); 
}

.centers-front-page a:hover, 
.centers-front-page a:active { 
	opacity: 0.95;  
 	filter: alpha(opacity=95);  
}
div.centers-front-page p {
	color: #888;
  margin-left: 30px;
  text-align: left;
  font-size: 0.9em;
  line-height: 1em;
  padding-top: 5px;
}


/*********************** NEWS|Events section {Article Content type} *******************************/

/* Posts */
div.news-posts article {
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
	padding-bottom: 10px;
}

div.news-posts div.pagination {
	margin: -10px 0 20px;
}

div.single-post article {
	border-bottom: 0;
	margin-bottom: 0;
}

.single-news-image li{
	list-style: none;
	margin-left: -60px;
	margin-bottom: 30px;
}

/* News|Events Archive Grouped by Month Page */

#block-views-archive-block div.content div.pagination {
	margin-bottom: 0;
}

/* BAC. This is for image caption for the Single News Article and for the Archive. */ 
	div.single-news-image div.image-field-caption {
	font-size: 0.83em !important;
	line-height: 1.3em;
	color: #b6b6b6 !important;
	}
	/* This seems redundant here. But necessary in case the text in the Caption field is formatted (not just a plain text) */
	
	div.single-news-image  div.image-field-caption p {
	line-height: 1.3em;
	color: #b6b6b6 !important;
	}

/* post */
article.post h2 a {
	text-decoration: none;
}

article.post div.post-meta {
	font-size: 0.92em;
	margin-bottom: 8px;
}

article.post div.post-meta > span {
	display: inline-block;
	padding-right: 8px;
}

article.post div.post-meta i {
	margin-right: 3px;
}

/* BAC. Hide the field Label for the News/Events Pages. I did it in the Admin area, but it did not hide it. Weird! */
div.post-meta .field-label {
	display: none !important;
}

/* post Date . I made the post-date hidden in PHP code but Not in CSS. */
article.post div.post-date {
	-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	float: left;
	margin-right: 10px;
	text-align: center;
}

article.post div.post-date span.year {
	-moz-border-radius: 0 0 2px 2px;
	-moz-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
	-webkit-border-radius: 0 0 2px 2px;
	-webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
	background: #CCC;
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
	color: #FFF;
	font-size: 0.89em;
	padding: 1px 4px;
}

article.post div.post-date span.month {
	background: #CCC;
	color: #FFF;
	font-size: 0.88em;
	padding: 1px 4px;
}

article.post div.post-date span.day {
	-moz-border-radius: 2px 2px 0 0;
	-webkit-border-radius: 2px 2px 0 0;
	background: #F4F4F4;
	border-radius: 0  0 0 0;
	color: #CCC;
	display: block;
	font-size: 0.85em;
	font-weight: 500;
	font-weight: bold;
	padding: 1px 4px;
}

/* News Large Image */
/* Articles all displayed in Archive pages as teasers. */
article.post-large-image {
	margin-left: 60px;
  margin-bottom: 25px;
}
/*BAC. So that the bottom border does not show for single posts, but only for archive page. */
article.node-teaser {
	border-bottom: 3px solid #ddd;
}

article.post-large-image div.news-image,
article.post-large-image div.post-date {
	margin-left: -60px;
}

article.post-large-image div.news-image {
	margin-bottom: -30px;
}

article.post-large-image h2 {
	margin-bottom: 5px;
}

/* Single post */
article.news-single-post div.post-meta {
	margin-bottom: 20px;
}

/* Events Single Post - Hide the Post date for Events but keep for News */
div.Events {
	display: none;
}

/* Upcoming Events Top of the Page (with the Events Calendar) */
#block-views-calendar-block-3 table tr.upcoming-2-events td {
	padding: 3px 5px 3px 2px;
	font-size: 0.85em;
	line-height: 1.1em;
	background-color: #fff !important;
}
#block-views-calendar-block-3 {
	margin-bottom: 20px; 
}

/* Block */
div.post-block {
	border-top: 1px solid #DDD;
	margin: 15px 0 0 0;
	padding: 20px 0 15px 0;
}

div.post-block h3 {
	font-size: 1.8em;
	font-weight: 200;
	margin: 0 0 20px;
	text-transform: none;
}

div.post-block h3 i {
	margin-right: 7px;
}

/* Author */
div.post-author {
	margin: 15px 0 0 0;
}

div.post-author div.thumbnail {
	display: inline-block;
	float: left;
	margin-right: 20px;
}

div.post-author img {
	max-height: 80px;
	max-width: 80px;
}

div.post-author p {
	font-size: 0.9em;
	line-height: 22px;
	margin: 0;
	padding: 0;
}

div.post-author p strong.name {
	font-size: 1.1em;
}

/* Share */
div.post-share {
	margin: 20px 0 0 0; /* 55px 0 0 0 */
	padding-bottom: 0;
}

/* 1/15/2015. BAC. Faculty Publications that are added ONE at a time in the Faculty Details page.
Counter Offseting the space that the <p> tag generates. The <p> tag is added in the WYSIWYG editor which
I have NO control of. */

ul.single-faculty-pubs li:nth-child(n + 2) p{
	margin-top: -17px;
	line-height: 1.08em;
}

/* FlexSlider for the News Pages (Singles and Archives) */

.news-image ul.flex-direction-nav a.flex-next {
}
.news-image ul.flex-direction-nav a.flex-prev {
}

/* BAC. so that images slide all the way to the end of the container */
.news-image div.flexslider ul.slides li {
	padding: 0 !important;
	margin: 0 !important;
}

/* Simple news List */
ul.simple-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.simple-news-list div.news-image {
	float: left;
	margin-right: 12px;
}

ul.simple-news-list div.news-meta {
	color: #888;
	font-size: 0.8em;
}

ul.simple-news-list li {
	border-bottom: 1px dotted #E2E2E2;
	min-height: 62px;
	padding: 15px 0;
}

ul.simple-news-list li:last-child {
	border-bottom: 0;
}

/* Tooltip */
.tooltip {
  font-size: 12px;
}
.tooltip-inner {
  max-width: 170px;
  padding: 2px;
  color: #666; /*#b5561f;*/
  text-align: center;
  text-decoration: none;
  background-color: #fefefe;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
	border: 1px groove #fefefe;
	-moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
}

/* BAC. 11/11/2014. CV Starr Fellow Opportunities. Hide the job Label */

.view-cv-starr-fellow-jobs section.toggle.active > label {
	display: none;
}

/* BAC. 11/11/2014. Lightbox Feature for images that I don't display the icon */
    /* Without Caption */
p img.lightbox-no-icon  {
	border:1px solid #ddd !important;
}
	
p img.lightbox-no-icon:hover {
	border:1px solid #888 !important;
}
   /* With Caption */
 p.thumbnail img.lightbox-no-icon  {
	border:0 !important;
}
p.thumbnail:hover {
	border:1px solid #888 !important;
}

/******************************************************************/
/* Videos Archive */
video {
		border: 3px solid #EDEDED;
		padding: 1px;
}

/* 3/28/2015. BAC. Make the Videos responsive, so that the video resize at small screens.
   Ref: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 
	 Make sure to wrap the video in a <div class="video-wrapper> in the HTML body. */
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* maintain the 16:9 ration of the video.*/
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* BAC. 3/17/15. Force the text in source view of the CKEditor to wrap. This is a Firefox 36 only issue.
The source for this is at "editor_gecko.css" of the CKEditor module at "\sites\all\libraries\ckeditor\skins\moono\editor_gecko.css"
*/
.cke_source {
    white-space: pre-wrap !important;
}