/*!
 * Brangeta Design Group CSS for SMU Lyle
 *
 * Copyright 2013 
 *
 */

@import "https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";
@import "https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css";
/*-----------------------------------------------------
     The above imports the FONT AWESOME ICONS
----------------------------------------------------- */

/*-----------------------------------------------------
     The code below references our custom Peruna icon
----------------------------------------------------- */


@font-face {
	font-family: 'Peruna';
	src:url('/bootstrap/fonts/Peruna.eot');
	src:url('/bootstrap/fonts/Peruna.eot?#iefix') format('embedded-opentype'),
		url('/bootstrap/fonts/Peruna.woff') format('woff'),
		url('/bootstrap/fonts/Peruna.ttf') format('truetype'),
		url('/bootstrap/fonts/Peruna.svg#Peruna') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-peruna  {
	font-family: 'Peruna';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-peruna:before {
	content: "\e000";
}


/*-----------------------------------------------------
     The code below references our custom TEDxSMU icon
----------------------------------------------------- */


@font-face {
	font-family: 'TEDxSMU';
	src:url('/bootstrap/fonts/TEDxSMU.eot');
	src:url('/bootstrap/fonts/TEDxSMU.eot?#iefix') format('embedded-opentype'),
		url('/bootstrap/fonts/TEDxSMU.woff') format('woff'),
		url('/bootstrap/fonts/TEDxSMU.ttf') format('truetype'),
		url('/bootstrap/fonts/TEDxSMU.svg#TEDxSMU') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-tedxsmu  {
	font-family: 'TEDxSMU';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
.icon-tedxsmu:before {
	content: "\e600";
}





div.smuFixedTop + div.navbar-fixed-top{
/* HIDES THE EXTRANEOUS NAVBAR PLACED IN PAGES BY THE RENDERINGS*/
/* ADDED BY KATY JAN 2014*/
display: none;	
}

/* Changed tags
-------------------------------------------------- */

*{ /*extra CSS reset*/
	margin:0;
	paddding:0
}


body {
	background: #fff;
	font-family: "Roboto", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:10pt;
	line-height:16pt;
	font-weight:300;
	color:#6e6e70; /*darker to increase readability of skinny letters*/
	/*padding-top:80px;*/
	padding-top:70px;
	padding-bottom:32px;
}
a {
  color: #818285;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #58585a;
  text-decoration: none;
}
h1 { /*stage headers*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:30pt;
	line-height:28pt;
	color:#d1d2d4;
	letter-spacing:-2px;
	font-weight:800;
	text-transform:uppercase;
    margin: 10px 0;
	text-rendering: optimizelegibility;
}
img { 
	-ms-interpolation-mode: bicubic; 
}


/*this is for making the second word have a large first letter as well; the reason to use h1:first-letter AND this is because h1:first-letter will adjust the placement of the text w/o having to add margin no matter what browser (AFAIK)*/
/*.biggerletter{
	font-size:34pt;
}*/

h2 { /*main body headers and boilerplate headings*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", Helvetica, "Helvetica Neue", Verdana, sans-serif;
	font-size:13pt;
	font-style:normal;
	font-weight:300;
	line-height:19pt;
	color:#58585A;
	text-align:center;
    margin: 10px 0;
	text-rendering: optimizelegibility;
}
h3 { /*the headers for academic department pics and such*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:9pt;
	line-height:10pt;
	font-weight:400;
	color:#939598;
	letter-spacing:0.5px;
	text-align:center;
    margin: 10px 0;
	text-rendering: optimizelegibility;
	text-transform:uppercase;
}
h4 { /*right hand nav headers*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:10pt;
	line-height:11pt;
	font-weight:400;
	color:#414142;
	letter-spacing:-0.5px;
	text-align:left;
    text-rendering: optimizelegibility;
	margin-bottom:0;
	border-bottom: 1px solid #ebeced;
	padding-bottom: 10px;
	display:inline-block;
}
h5 { /*right hand nav subheaders*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:10pt;
	line-height:11pt;
	font-weight:300;
	color:#6d6f71;
	letter-spacing:0px;
	text-align:left;
    /*margin: 10px 0;*/
	text-rendering: optimizelegibility;
}
h6 { /*news headers*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:11pt;
	line-height:10pt;
	color:#58585a;
	letter-spacing:1px;
	font-weight:800;
	text-transform:uppercase;
    margin: 0px;	
	text-rendering: optimizelegibility;
}
p {
	margin: 0 0 20px;
}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 0 none;
  border-bottom: 1px solid #d7d7d7;
}

.sidesocial a {
color: #cc0035;
font-size: 20px;
padding-bottom: 2px;
}

.sidesocial a:hover {
    color: #58585a;
}

.container {
        margin: 0 auto;
        max-width: 1000px;
}
.container > hr {
	margin: 20px 0;
}
/* Styles that work on just about anything
-------------------------------------------------- */

a.white { /*developed to just turn links white*/
	color:#ffffff;
}
a.white:hover,
a.white:focus {
	color:#d7d7d7;
}
.white { /*developed to just turn links white*/
	color:#ffffff;
}

/*make sure to also apply one of the colors below, otherwise this style will be incomplete! This style does NOT 'work on anything', it is one that needs one of the below styles to color it!*/
.rectangularlabels {
  border: 0px none;
  width:100%;
  font-family:"Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  color:#fff;
  font-size: 9pt;
  font-weight: 800;
  letter-spacing:1px;
  line-height: 10pt;
  text-align:center;
  display: block;
  margin-bottom: 11pt;  
  padding: 2px 0px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: none;
}
.rectangularlabels-smaller {
  border: 0px none;
  width:100%;
  font-family:"Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  color:#fff;
  font-size: 8pt;
  font-weight: 800;
  letter-spacing:0.5px;
  line-height: 10pt;
  text-align:center;
  display: block;
  margin-bottom: 10pt;  
  padding: 2px 0px;
  white-space: nowrap;
  vertical-align: middle;
  background-color: none;
}
a.whitelabellinks {
  color:#fff;
  vertical-align: top;
  text-transform:uppercase;
}
a:hover.whitelabellinks,
a:focus.whitelabellinks {
  color:#d7d7d7;
}
a.whitelabellinks-longwords {
  color:#fff;
  vertical-align: top;
  text-transform:uppercase;
  font-size:8pt;
  letter-spacing:0;
  font-weight:700;
}
a:hover.whitelabellinks-longwords,
a:focus.whitelabellinks-longwords {
  color:#d7d7d7;
}
a.graylabellinks {
	color:#939598;
}
a:hover.graylabellinks,
a:focus.graylabellinks {
  color:#d7d7d7;
}
.cee-green {
  background-color: #4e905b;
  color:#fff;
}
.cse-redgrape {
  background-color: #84384c;
  color:#fff;
}
.ee-teal {
  background-color: #07708e;
  color:#fff;
}
.emis-blue {
  background-color: #5e77a4;
  color:#fff;
}
.me-red {
  background-color: #b24302;
  color:#fff;
}

.me-multi {
  background-color: #A4011F;;
  color:#fff;
}

/* Also styles that can go anywhere, but these are mostly ones for removing formatting on things
-------------------------------------------------- */
.centerthistext {
	text-align:center;
}
.rightalign {
	text-align:right;
}
.leftalign {
	text-align:left;
}

.nomargin {
	margin: 0;
}
.nopadding {
	padding: 0;
}
.hidebydefault {
	visibility:hidden;
}
.phoneonly { /*I don't think bootstrap's hide feature works right so I am writing my own*/
	display:none;
}
.everythingbutsmallscreens { /*I don't think bootstrap's hide feature works right so I am writing my own*/
	display:block;
}

/* Fixed Position (top) Navbar
-------------------------------------------------- */

/*this is the line below the navbar*/
.navbar {
	/*background-color:#404041;*/
	padding-bottom: 4px;
	border-bottom:thin solid #d7d7d7;
}

/*this controls a lot of things about the placement of the SMU Lyle Home logo on the navbar and has to have all of these properties to overwrite the default bootstrap code*/
.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
  padding-bottom: 0;
}

/*this affects the height of the fixed nav quite a lot, the default was 5px all sides*/
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
    padding: 0 5px;
}

.navbar-inner {
  /*background-color: #404041;
  background-image: none; 
  background-repeat: no-repeat;*/
  border: none;
  filter: none;
  min-height: 49px;
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
  -webkit-box-shadow: 0;
     -moz-box-shadow: 0;
          box-shadow: 0;
}
.navbar .nav > li > a {
  float: none;
  padding: 5px 15px 5px; /*this padding is what I can use to increase the height of the nav bar in conjunction with the second settings in this category (see above)*/
  color: #777777;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}
.lyletoplogo {
	padding-top:2px;
	height: 41px;
}

/*also is the drop down INACTIVE color if no background color specified*/
.navbar-brangeta .navbar-inner {
  /*background-color: #404041;
  background-image: none;
  background-repeat: no-repeat;*/
  background-color: #163B8C;
background-image: url("/bootstrap/images/MastheadGradientBG.jpg"); 
   background-repeat: repeat-x;
background-position: bottom;
  border: none;
  filter: none;
}

.navbar-brangeta .brand,
.navbar-brangeta .nav > li > a {
  color: #fff;
  text-shadow: none;
  outline:none;
  /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}

.navbar-brangeta .brand:hover,
.navbar-brangeta .nav > li > a:hover,
.navbar-brangeta .brand:focus,
.navbar-brangeta .nav > li > a:focus {
  color: #fcfcfc;
}

.navbar-brangeta .brand {
  color: #fff;
}

.navbar-brangeta .navbar-text {
  color: #fff;
}

/*drop down HOVER text AND background color. This is also what remains when you click.*/
.navbar-brangeta .nav > li > a:focus,
.navbar-brangeta .nav > li > a:hover {
  color: #fcfcfc;
  background-color: none;

}

/*not sure what this affects specifically yet, may want to change the background color to none*/
.navbar-brangeta .nav .active > a,
.navbar-brangeta .nav .active > a:hover,
.navbar-brangeta .nav .active > a:focus {
  color: #fcfcfc;
  background-color: #404041;
}

.navbar-brangeta .navbar-link {
  color: #fff;
}

.navbar-brangeta .navbar-link:hover,
.navbar-brangeta .navbar-link:focus {
  color: #fcfcfc;
}

.navbar-brangeta .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

/*drop down ACTIVE color, though it isn't the background that remains when you click, so it is a little useless to me*/
.navbar-brangeta .nav li.dropdown.open > .dropdown-toggle,
.navbar-brangeta .nav li.dropdown.active > .dropdown-toggle,
.navbar-brangeta .nav li.dropdown.open.active > .dropdown-toggle {
  color: #fcfcfc;
  background-color: none;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

.navbar .nav .dropdown a {
	font-size:8pt;	
	font-weight:400;
	letter-spacing:1px;
}

/*this is going to have to be put into some sort of selector type of programming of some sort if Rie likes the navigation like this...*/
ul {
	margin:0;
	padding-bottom:4px;
}


/*the div containing the social media buttons and search field*/
.social-search2 {
	float:right;
	/*padding-top:29px;*/
		padding-top:12px;
padding-bottom: 10px;
	/*margin: 28px 0 0 0;*/
}

/*the div that simply contains the social media unordered list*/

.socialbuttons {
	display:inline-block;

}

.socialbuttons a {
    color: #ACC9F1;
    font-size: 16px;
}

.socialbuttons a:hover {
    color: #CC0035;
}

/*getting rid of the padding bottom that ul has*/

.socialbuttons ul.inline {
	padding-bottom:0;
}

/*the div that simply contains the search bar unordered list and puts it next to the social media buttons*/

.searchbar {
	display:inline-block;
}

/*the search field*/

.navbar-search {
  position: relative;
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  top:-2px;
}

/*this controls mostly the amount of space between the social buttons and the search bar, the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 2px;
    padding-right: 0;
}

.social-search2 .navbar-form,
.social-search2 .navbar-search {
    float: none;
    padding: 0;
    margin: 0;
}

.navbar-brangeta .navbar-search .search-query {
  color: #ffffff;
  background-color: #404041;
  border-color: #a5a5a5;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
		  height:12px;
		  width: 200px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:10px;
	text-transform:uppercase;
	line-height:13px;
	font-family: "Roboto","Kozuka Gothic Pro","Kozuka Gothic Pr6N","Kozuka Gothic Std",sans-serif;
	font-weight:400;
	letter-spacing:.5px;
	text-rendering: optimizelegibility;
	padding: 2px 7px 2px 20px;
}
/*controls search field's height, see line 1076 of bootstrap.css ONLY USE THIS AS REFERENCE, NO NEED TO RESTYLE IT AS THE ABOVE CODE DOES THAT*/
/*input[type="text"] {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  vertical-align: middle;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}*/
/*the magnifying glass search icon*/
.navbar-search .magnifyingglass {
    position: absolute;
    top: 7px;
    left: 7px;
    background: url(../images/magnifyingglass.png) no-repeat;
	height:9px;
	width:8px;
}
.search-query:focus + .magnifyingglass {
    /*background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png");*/
	background: url(../images/magnifyingglass-gray.png) no-repeat;
	height:9px;
	width:8px;
	position: absolute;
    top: 7px;
    left: 7px;
}
/*these are the placeholder words inside the search field, I most likely need to use these to tweak the location in at least IE*/
.navbar-brangeta .navbar-search .search-query:-moz-placeholder {
  color: #fff;
}
.navbar-brangeta .navbar-search .search-query:-ms-input-placeholder {
  color: transparent;
}
.navbar-brangeta .navbar-search .search-query::-webkit-input-placeholder {
  color: #fff;
}

/*when the search field is clicked*/
.navbar-brangeta .navbar-search .search-query:focus,
.navbar-brangeta .navbar-search .search-query.focused {
  padding: 2px 7px 2px 20px;
  color: #ffffff;
  text-shadow: 0 1px 0 #000;
  text-shadow: none;
  background-color: #515151;
  /*border: 0;*/
  outline: 0;
  border-color: #d7d7d7;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}
input.search-query {
  padding-right: 7px;
  padding-right: 4px \9;
  padding-left: 7px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

/*the collapse button text styling... I included all of this in ".navbar .btn-navbar" below instead*/
.menubutton {
 /*padding:1px 7px 2px 7px;
 display:inline-block;
 border:thin solid;
 background-color: #404041;
 border-color:#a5a5a5;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 font-size:8pt;
  font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  line-height:10pt;
  font-weight:400;
  letter-spacing:1px;
  text-align:center;
  margin: 0;
  color:#fcfcfc;*/
}

/*this all relates to the collapse button*/

.navbar .btn-navbar {
  border:thin solid;
  background-color: #404041;
  border-color:#a5a5a5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size:7pt;
  font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  /*line-height:10pt;*/
  line-height:16pt;
  font-weight:400;
  letter-spacing:0;
  text-align:center;
  margin: 0;
  color:#fcfcfc;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}

.navbar .btn {
	margin-top:14px;
}

.navbar-brangeta .btn-navbar {
  color: none;
  text-shadow: none;
  background-color: none;
  *background-color: none;
  background-image: none;
  background-repeat: no-repeat;
  border-color: none;
  filter: none;
  float: right;
  padding: 3px 10px;
  margin-right: 5px;
  margin-left: 5px;
}

.navbar-brangeta .btn-navbar:hover,
.navbar-brangeta .btn-navbar:focus,
.navbar-brangeta .btn-navbar:active,
.navbar-brangeta .btn-navbar.active,
.navbar-brangeta .btn-navbar.disabled,
.navbar-brangeta .btn-navbar[disabled] {
  color: #ffffff;
  background-color: #040404;
  *background-color: #000000;
}

.navbar-brangeta .btn-navbar:active,
.navbar-brangeta .btn-navbar.active {
  background-color: none;
}
/*for the image*/
.smubutton {
	width: 21px; 
	height: 7px;
	vertical-align:0;
}
/*for the image*/
.tedxsociallogo {
	width: 44px; 
	height: 7px;
	vertical-align:0;
}


/*the amount of space between each button*/
.social-search2 > .socialbuttons > ul.inline > li {
	padding-left:3px;
	padding-right:3px;
}

.socialbutton {
	padding:0 4px 1px;
	display:inline-block;
	border:thin solid;
	background-color: #404041;
	border-color:#a5a5a5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:7pt; /*in this font, 6pt has capital letters 6px tall*/
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	line-height:7pt;
	font-weight:600;
	letter-spacing:0.5px;
	text-align:center;
	margin: 0;
	color:#fcfcfc;
}

.socialbutton:hover,
.socialbutton:focus {
	background-color: #9c3a28;
}


/* Regular Navbar - most of the really, really important code is in navigationstyle.css, this is mostly bootstrap related code
-------------------------------------------------- */

/*This code makes it so the dropdowns will dropdown on hover rather than click*/
/*ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;    
}*/

/* Code below here is specific to centering the nav */
.navbar2 .nav,
.navbar2 .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  /*vertical-align: top;*/ /*not necessary and messes up the layout*/
}

/*for getting more space around the nav bar... may have to declare it within a parent div, but let's leave it like this for now*/
.nav {
/*  margin-left: 0;*/
  margin-bottom: 30px;
/*  list-style: none;*/
}

.navbar-inner2 {
  text-align:center;
}
/* Code above here is specific to centering the nav */

/*this may not be necessary now, but could potentially be needed later on*/
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: white;
  text-shadow: none;
}

/*I'm going to leave some of this dropdown reprogramming in case there is ever a day when there is a need for a dropdown within the body of a page*/
/*this controls the effects when you hover and click the dropdown list*/
a.dropdown-toggle:hover,
a.dropdown-toggle:focus {
	border-top:#812f21 5px solid;
	padding-top:3px;
  	outline: none;
	background-color:white;
	text-decoration: none;
	text-shadow: none;
}
a.dropdown-toggle:active {
	color:939598;
}

/*this stuff is all code concerning the dropdown menus that appear when the link is clicked*/
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  text-align:left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #fff;
  opacity:0.9;
  border: 0px solid white;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  -webkit-box-shadow: 0 0 0 white;
     -moz-box-shadow: 0 0 0 white;
          box-shadow: 0 0 0 white;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: 0;
}

/*width100% messes up the divider for some reason, so don't use dividers unless you figure out what the deal is*/
.dropdown-menu > li {
  display:inline-block;
  border-bottom:thin #FFF;
  margin-bottom:1px;
  padding-bottom:0px;
/*  background-color: #812f21;*/
  background-color: rgba(129, 47, 33, .9);
  width:100%;
  opacity:1.0;
}


.dropdown-menu > li > a {
  display: block;
  padding: 2px 10px;
  clear: both;
  font-family: "Roboto", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  font-weight: 400;
  font-size:9pt;
  line-height: 19.5pt;
  color: #fff;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(129, 47, 33, 1);
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(129, 47, 33, 1);
  background-image: none;
  background-repeat: no-repeat;
  outline: 0;
  filter: none;
}


/* Stage
-------------------------------------------------- */

.stage {
        /*text-align: center;*/
		/*min-height:456px;*/
		/*min-height:380px;*/
		/*width:950px;*/
		/*min-height:394px;*/
		/*height:auto;*/
		padding: 0;
		margin:0;
        background-color:#fcfcfc;
		border-top:1px solid #d7d7d7;
		border-bottom:1px solid #d7d7d7;
		min-height:100%; /*by doing it this way, the background and borders will stretch to conform to the content inside the stage div*/
		width:100%;
}

/*this stuff below is so the items on the home stage remain next to each other and don't collapse, named spain b/c span would be affected by other code*/
.row-fluid .spain10nocollapse {
	width: 65.29284164859001%;
	*width: 65.23861171366593%;
	float: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 30px;
	margin-left: 0px
}
.row-fluid .spain5nocollapse {
	width: 30.585683297180044%;
	*width: 30.531453362255967%;
	float: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 30px;
	margin-left: 0px
}

/*this is for spans which will use 2% gutters and not collapse on small screen sizes*/
.row-fluid [class*="spaon"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
/*  margin-left: 4.121475054229935%;
  *margin-left: 4.067245119305857%;*/
  margin-left: 2%;
  *margin-left: 2%;
}
.row-fluid [class*="spaon"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="spaon"] + [class*="spaon"] {
  margin-left: 4.121475054229935%;
}
.row-fluid .spaon15percent {
	width: 15%;
	*width: 15%;
}

/*this is for spans which will use the default gutters and not collapse on small screen sizes*/
.row-fluid [class*="spaun"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 4.121475054229935%;
  *margin-left: 4.067245119305857%;
}
.row-fluid [class*="spaun"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="spaun"] + [class*="spaun"] {
  margin-left: 4.121475054229935%;
}
.row-fluid .spaun3 { /*this is a span3 which will not collapse on small screen sizes*/
  width: 16.702819956616054%;
  *width: 16.648590021691977%;
}
.row-fluid .spaun5 { /*this is a span5 which will not collapse on small screen sizes*/
	width: 30.585683297180044%;
	*width: 30.531453362255967%;
}
.row-fluid .spauun5 { /*this is a spaun5 which can be used with offset classes (the first child rule messes up with offsets on spaun5)*/
	width: 30.585683297180044%;
	*width: 30.531453362255967%;
}
.tempvisibility {
	background-color:#f00;
}
.tempvisibility2 {
	background-color:#0f0;
}

/* Content Area
-------------------------------------------------- */

.topboilerplateheadings {
	color:#939598;
	padding-top:14px;
	padding-bottom:10px;
	margin-bottom:20px;
	margin-top:15px;
}
.bottomboilerplateheadings {
	color:#939598;
	padding-top:14px;
	padding-bottom:20px;
	border-bottom:1px solid #d7d7d7;
	margin-bottom:40px;
}
.lineabove {
	border-top:1px solid #d7d7d7;
}
.lineabove2 {
	border-top:0 none; /*this style is only used with a media query, so I want it basically blank by default*/
}
.givingboiler {
	margin-top:60px;
}
.tagline {
	border-top:1px solid #d7d7d7;
	padding-top:25px;
	padding-bottom:25px;
	border-bottom:1px solid #d7d7d7;
	margin: 0;
}
.imagepadding {
	padding-bottom:30px;
}
.margin20topbottom-smallscreen { /*just leave it blank for the default styling, make it active on small screens in media query*/
}

[class^="smallbuttonphotos"] {
	margin: 0 -5px 4px;
	padding:4px;
	border: 1.5px solid #fff;
}
.smallbuttonphotos-cee:hover,
.smallbuttonphotos-cee:focus {
	border: 1.5px solid #4e9058;
	box-shadow: 0 0 2px #4e9058;
}
.smallbuttonphotos-cse:hover,
.smallbuttonphotos-cse:focus {
	border: 1.5px solid #84384c;
	box-shadow: 0 0 2px #84384c;
}
.smallbuttonphotos-ee:hover,
.smallbuttonphotos-ee:focus {
	border: 1.5px solid #07708e;
	box-shadow: 0 0 2px #07708e;
}
.smallbuttonphotos-emis:hover,
.smallbuttonphotos-emis:focus {
	border: 1.5px solid #5e77a4;
	box-shadow: 0 0 2px #5e77a4;
}
.smallbuttonphotos-me:hover,
.smallbuttonphotos-me:focus {
	border: 1.5px solid #b24302;
	box-shadow: 0 0 2px #b24302;
}
.smallbuttonphotos-multi:hover, 
.smallbuttonphotos-multi:focus {
    border: 1.5px solid #A4011F;
    box-shadow: 0 0 2px #A4011F;
}

.pad3 {
	padding: 0 20px;
	margin-top:40px;
	margin-bottom:40px;
}
.pad3v2 {
	padding: 0 20px;
	margin-top:70px;
	margin-bottom:70px;
}
.pad3v3 {
	padding: 0 20px;
	margin-top:40px;
	margin-bottom:40px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 20px;
	margin-top:50px;
	margin-bottom:40px;
}
.pad5 {
	padding: 0;
	margin-top:60px;
	margin-bottom:30px;
}
/*these pad styles below are all for layouts utilizing the right hand nav*/
.contentheading { /*similar to the tagline class, and is only used immediately after the ticker because there's already a line above*/
	padding-bottom:25px;
	border-bottom:1px solid #d7d7d7;
	margin: 0;
}
.contentheading2 { /*similar to the tagline class, can be used anywhere because media query turns it into a tagline*/
	padding-bottom:25px;
	border-bottom:1px solid #d7d7d7;
	margin: 0;
}
.fivebuttons { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.sixbuttons { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.textbox { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.textbox-relative { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
}
.textbox-relative-p { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
}
.smallimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.mediumimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.mediumimages2 { /*using media queries I squish this div for smaller screen sizes, and it gains 20px top and bottom margin on small screens*/
	margin:0 0 40px;
	padding:0;
}
.margin40topbottom { /*using media queries it drops to 20px top and bottom*/
	margin: 40px 0;
}
.largeimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
}
.facultymargincontrol {
	margin: 30px 0;
}
.h2justaboveparagraph{
	margin: -10px 0 10px 0;
}
.h2justaboveparagraphvisiblealways{
	margin: -10px 0 10px 0;
}
.smallscreentaglineonly { /*apply this to a row-fluid to hide a header styled as tagline from large screen sizes*/
	display:none;
}
.pad2asymmetricalleft {
	padding: 0 40px 0 0;
	margin-top:30px;
	margin-bottom:40px;
	border-right:1px solid #d7d7d7;
}
.pad2asymmetricalright {
	/*padding: 0 0 0 50px;*/
	margin-top:30px;
	margin-bottom:40px;
}
.imageinthirdcolumn { /*based on asymmetricalright for holding an image about the same width as it, but I don't want it getting restyled with media queries like it does*/
	margin-top:40px;
	margin-bottom:40px;
	margin-left: 11.3%; /*this aligns it approximately with the vertical rule on a page with a right column. I just eyeballed this number, not calculated*/
}
.firstassymetricalrowmargin {
	margin-top:-30px;
}
.pad5v2 { /*used on the row of 5 pics that uses jquery to make text appear*/
	padding: 4px;
	margin-top:31px;
	margin-bottom:20px;
}
.pad5v3 {
/*	padding:0 6px;
	margin-top:30px;
	margin-bottom:30px;*/
	padding:0 14px;
	margin-top:10px;
	margin-bottom:14px;
}
/*works, but I need to make this a class style to apply to invididual images instead of a blanket change*/
/*[class*="columnof"] > img {
	margin-top:30px;
}*/
.dropimage30px { /*used within columnof____content divs to drop an image, but disappears on phones*/
	margin-top:30px;
}
/*a container for text or images on the RIGHT side you need to force down 40px and away from the LEFT content 20px*/
/*.columnofrightcontent {
	margin:40px 0 40px 20px;
}*/
/*a container for text or images you need to force down 40px*/
/*.columnofleftcontent {
	margin:40px 0;
}*/
/*a container for text or images in the center you need to force down 40px and also have 40px at the bottom*/
/*.columnofcentercontent {
	margin:40px 0;
}*/
/*a revised version that makes the left and right columns equal in size and consistent in the way pics and text are contained*/
.columnofrightcontent {
	margin:40px 0 40px 10px;
}
.columnofleftcontent {
	margin:40px 10px 40px 0;
}
.columnofcentercontent {
	margin:40px 10px;
}
.columnoffullcontent2 {
	margin:40px 0;
}

.columnoffullcontent {/*a container for text or images taking up a span15 you need to force down 40px, but not force other content below down 40px*/
	margin:40px 0 0 0;
}
.columnofrightcontent > hr,
.columnofcentercontent > hr,
.columnoffullcontent > hr,
.columnofleftcontent > hr {
	margin:15px 0;
}
.container > hr.hr-0margin {
	margin: 0;
}
.hr-0margin { /*for the occasion I want an hr without any margin... this hr will disappear on small screens with media query*/
	margin:0;
}
.h4block { /*used for stacked navigation items in the body area like research institutes, centers, labs, etc*/
	display:block;
	text-align:center;
	margin:30px 0;
}
.lastrowaboveboiler {
	margin-bottom: 0;
}
.marginabove40 { /*this margin disappears on small screens and is used for pushing content down the page, usually away from the ticker*/
	margin: 40px 0 0;
}
.textblurb{ /*the text blurb is inside span 7 which is width: 44.46854663774403%; *width: 44.41431670281995%; it's what javascript changes out on mouseover*/
	position:absolute;
	top:-7px;
	z-index:20;
	width:100%;
}
/* Content Area - Table related
-------------------------------------------------- */

td.rightalign {
	text-align:right;
}
td.leftalign {
	text-align:left;
}

/* Content Area - Right Hand Nav
-------------------------------------------------- */

.majorspaceabove {
	margin-top:30px;
}
.h4 { /*for coloring the links*/
	color:#414142;
}
.h5 { /*for coloring the links*/
	color:#6d6f71;
}


/* Media Queries for different screen sizes
-------------------------------------------------- */

/*note, for whatever reason, my media queries don't happen at these exact pixel sizes (it's probably related to how uniquely custom a 15 column bootstrap is). They happen at 18 pixels larger. Example, 979 happens at 997*/

/*actually 1218 pixels*/
@media (min-width: 1200px) {

/*this is the text that makes up the main nav buttons on the white background*/
a.dropdown-toggle {
  font-size:7.5pt;
}
.small-bottomlinks {
	font-size:8pt;
	line-height:9pt;
	letter-spacing:0.5px;
}
h4 {
	font-size:11pt;
	line-height:12pt;
}
.pad2asymmetricalleft {
	padding: 0 50px 0 0;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 20px;
	margin-top:70px;
	margin-bottom:40px;
}
.pad5v2 {
	padding: 4px;
	margin-top:31px;
	margin-bottom:20px;
}
.phoneonly {
	display:none;
}
}


/*the standard size (not listed here because it doesn't require media query) is actually min 979 (998) to max (1199) 1217 pixels*/


/*this is actually min 786 pixels*/
@media (min-width: 768px) {
/*this is the trigger that the MENU button looks for, but I am programming it so at desktop sizes it will always be visible and not collapse if somebody started out with a small screen and they maximized it*/
.makethiscollapse {
	height:auto !important;
	overflow:visible !important;
}
}
/*this is actually min 786 to max 997 pixels*/
@media (min-width: 768px) and (max-width: 979px) { /*large tablets and smaller computer screens*/
body {
	padding-top:0;
}
h1 {
	font-size:22pt;
	line-height:20pt;
	letter-spacing:-2px;
}

/*h1:first-letter {
	font-size:24pt;
}*/

/*.biggerletter {
	font-size:24pt;
}*/

h2 { /*main body headers and boilerplate headings*/
	font-size:12pt;
	letter-spacing:-1px;
}
h6 { /*news headers*/
	font-size:9pt;
	line-height:9pt;
	letter-spacing:0;
}
a.whitelabellinks-longwords {
  font-size:7pt;
  font-weight:700;
}
.pad3 {
	padding: 0 10px;
	margin-top:40px;
	margin-bottom:40px;
}
.pad3v2 {
	padding: 0 10px;
	margin-top:70px;
	margin-bottom:70px;
}
.pad3v3 {
	padding: 0 12px;
	margin-top:40px;
	margin-bottom:40px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 12px;
	margin-top:50px;
	margin-bottom:40px;
}
.pad5v2 {
	padding: 4px;
	margin-top:31px;
	margin-bottom:20px;
}
.pad5v3 {
	padding:0 6px;
	margin-top:10px;
	margin-bottom:14px;
}
.pad2asymmetricalleft {
	padding: 0 30px 0 0;
}
/*this is for the MENU button that makes the nav hide and such, I am having to program over the bootstrap CSS so it doesn't show up at this size*/
.navbar .btn-navbar {
    display: none;
}
.social-search2 {
	float:right;
	/*clear:both;*/
	padding-top:0;
}
.small-bottomlinks {
	font-size:7pt;
	line-height:9pt;
	letter-spacing:0px;
}
.social-search2 .socialbuttons {
    float: right;
	display:inline-block;
    padding: 1px 0;
    margin: 0;
    border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.social-search2 .navbar-form,
.social-search2 .navbar-search {
    float: none;
	display:inline-block;
    padding: 1px 0;
    margin: 0;
    border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
/*This will control the magnifying glass location when viewed on a phone or other small device*/
.social-search2 .navbar-search .magnifyingglass {
	left:8px;
	top:8px;
}
/*the div that simply contains the search bar unordered list and puts it next to the social media buttons, I'm going to float it left starting at 767 wide*/
.searchbar {
	display:inline-block;
	float:right;
	clear:both;
	margin-top:5px;
}
/*making the search field wider to align with the social media buttons*/
.navbar-brangeta .navbar-search .search-query {
/*  color: #ffffff;*/
/*  background-color: #404041;*/
/*  border-color: #a5a5a5;*/
/*  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;*/
/*		  height:12px;*/
		  width: 216px;
/*	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:10px;
	text-transform:uppercase;
	line-height:14px;
	font-family: "Roboto","Kozuka Gothic Pro","Kozuka Gothic Pr6N","Kozuka Gothic Std",sans-serif;
	font-weight:400;
	letter-spacing:.5px;
	text-rendering: optimizelegibility;
	padding: 2px 7px 2px 20px;*/
	margin: 0 -2px 0 0;
}
/*this controls mostly the amount of space between the social buttons and the search bar (768 through 979px size), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 2px;
    padding-right: 5px;
}
.phoneonly {
	display:none;
}
}
/*this is actually max 785 pixels*/
@media (max-width: 767px) { /*really large phones and tablets, also everything SMALLER than 767 wide, so place elements here you want on all smaller versions*/
body {
	padding-top:0;
}
.phoneonly {
	display:block;
}
.contentheading2 {
	border-top:1px solid #d7d7d7;
	padding-top:25px;
	padding-bottom:25px;
	border-bottom:1px solid #d7d7d7;
	margin: 0;
}
.everythingbutsmallscreens {
	display:none;
}
/*for making the MENU button show up*/
.navbar .btn-navbar {
	display:block;
}
/*this stuff below is so the items on the home stage remain next to each other and don't collapse, named spain b/c span would be affected by other code*/
.row-fluid .spain10nocollapse {
	width: 50%;
	*width: 50%;
	float: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 30px;
	margin-left: 0px
}
.row-fluid .spain5nocollapse {
	width: 50%;
	*width: 50%;
	float: left;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 30px;
	margin-left: 0px
}
/*this stuff above is so the items on the home stage remain next to each other and don't collapse, named spain b/c span would be affected by other code*/

.row-fluid [class^="offset5"]:first-child.spauun5 { /*this code prevents offsets from collapsing when associated with spauun5*/
  margin-left: 38.82863340563991%;
  *margin-left: 38.72017353579176%;
}

.row-fluid .offset5 {
  margin-left: 38.82863340563991%;
  *margin-left: 38.72017353579176%;
}

.row-fluid .offset10 {
  margin-left: 73.53579175704988%;
  *margin-left: 73.42733188720172%;
}
h2 { /*main body headers and boilerplate headings*/
	letter-spacing:-0.5px;
}
h1 {
	font-size:20pt;
	line-height:18pt;
	letter-spacing:-2px;
}

/*h1:first-letter {
font-size:23pt;
}*/


/*.biggerletter {
	font-size:23pt;
}*/

a.whitelabellinks-longwords {
  font-size:8pt;
  font-weight:700;
}
.pad3 {
	padding: 0 100px;
	margin-bottom: 80px;
}
.pad3v2 {
	padding: 0 100px;
	margin-bottom: 80px;
}
.pad3v3 {
	padding: 0 0 0 50px;
	margin-bottom: 80px;
	width:100%;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 0 0 50px;
	margin-bottom: 80px;
	width:100%;
}
.pad5 {
	padding: 0 150px;
	margin-bottom:60px;
}
.pad5v2 {
	padding: 6px;
	margin-top:30px;
	margin-bottom:0;
}
.pad5v3 {
	padding:0 6px;
	margin-top:30px;
	margin-bottom:30px;
}
.pad2asymmetricalleft {
	padding: 0;
	border-right:0 none;
}
.margin20topbottom-smallscreen {
	margin: 20px 0;
}
.imageinthirdcolumn { /*based on asymmetricalright for holding an image about the same width as it, but I don't want it getting restyled with media queries like it does*/
	margin-top:40px;
	margin-bottom:40px;
	margin-left: 0; 
}
.firstassymetricalrowmargin {
	margin-top:0;
}
.textbox-relative-p { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
	min-height:90px;
}
.textblurb {
	top: 13px;
}
.hr-0margin { /*for the occasion I want an hr without any margin... this hr will disappear on small screens with media query*/
	display:none;
}
.fivebuttons { /*using media queries I squish this div for smaller screen sizes NOTE shouldn't have to adjust this one on smaller sizes because of percent*/
	margin:0;
	padding:0 10%;
}
.textbox { /*using media queries I squish this div for smaller screen sizes*/
	margin: 20px 0;
	padding:0 100px;
}
.smallimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 150px;
}
.mediumimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 100px;
}
.mediumimages2 { /*using media queries I squish this div for smaller screen sizes*/
	margin:20px 0;
	padding:0 100px;
}
.margin40topbottom { /*using media queries it drops to 20px top and bottom*/
	margin: 20px 0;
}
.largeimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 50px;
}
.h2justaboveparagraph{ /*this will hide the headline above a paragraph on small screen sizes*/
	margin: 0;
	display:none;
}
.smallscreentaglineonly {
	display:block;
}
.pad2asymmetricalright {
	padding: 20px 50px;
	background-color: #fcfcfc;
	border-right: 1px solid #d7d7d7;
	border-left: 1px solid #d7d7d7;
}
.columnofrightcontent {/*a container for text or images on the RIGHT side you need to force down 40px and away from the LEFT content 20px*/
	margin:40px 0;
}
.dropimage30px { /*used within columnof____content divs to drop an image, but disappears on phones*/
	margin-top:auto;
}
h4 {
	display:block;
	text-align:center;
	font-size:11pt;
	line-height:12pt;
}
h5 {
	line-height:20pt;
}
.lineabove {
	border-top: none 0;
}
.lineabove2 {
	border-top:1px solid #d7d7d7; /*using this to add a line below the stage*/
}
.stage {
        padding: 0;
        background-color: #fff;
		border-top:1px solid #d7d7d7;
		border-bottom:1px solid #d7d7d7;
}
.bottomboilerplateheadings {
	color:#939598;
	padding-top:14px;
	padding-bottom:20px;
	border-bottom:1px solid #d7d7d7;
	margin-bottom:40px;
	border-top:1px solid #d7d7d7;
	margin-top:40px
}
/*this is the container for the social media buttons and search field, I'm going to color it a darker charcoal*/
.social-search2 {
display: none; /* CHANGE MADE BY KATY TO HIDE SOCIAL AND SEARCH BELOW 768PX WIDE*/
	float:left;
	/*padding-top:10px;*/
	padding-top:4px;
	width: 100%;
	margin-top: 10px;
	background-color:#323233;
	outline: 5px solid #323233;
}
/*this controls mostly the amount of space between the social buttons and the search bar (767 px max size), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 10px;
    padding-right: 0;
	/*padding-top:2px;*/
}
/*for moving the Lyle logo at the top over to the left some to match the alignment of the social media buttons*/
.nav > li > a > img {
    max-width: none;
    margin-left: -10px;
}
/*I'm going to float these left starting at this 767 size*/
.social-search2 .socialbuttons {
    /*float: none;*/
	float: left;
	display:inline-block;
    padding: 1px 0;
    margin: 0;
    /*border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;*/
	border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
	vertical-align:top;
}
.social-search2 .navbar-form,
.social-search2 .navbar-search {
    float: none;
	display:inline-block;
    padding: 1px 0;
    margin: 0;
    border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
	vertical-align:top;
}
.social-search2 .navbar-search .magnifyingglass {
	left:8px;
	top:8px;
}
/*This is the space between each social media button*/
.social-search2 > .socialbuttons > ul.inline > li {
    padding-right: 6px;
    padding-left: 6px;
}
/*the div that simply contains the search bar unordered list and puts it next to the social media buttons, I'm going to float it left starting at 767 wide*/
.searchbar {
	display:inline-block;
	float:left;
}
/*going to go ahead and make the social media buttons larger on smaller displays so they are easier to click or tap*/
.socialbutton {
	/*padding:0 7px;*/
	padding:0 7px 2px;
/*	display:inline-block;*/
/*	border:thin solid;*/
/*	background-color: #404041;*/
/*	border-color:#a5a5a5;*/
/*	-webkit-border-radius: 4px;*/
/*	-moz-border-radius: 4px;*/
/*	border-radius: 4px;*/
	font-size:9pt;
/*	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;*/
	/*line-height:12pt;*/
	line-height:11pt;
	font-weight:300;
	letter-spacing:0;
	text-align:center;
/*	margin: 0;*/
/*	color:#fcfcfc;*/
	vertical-align:text-top;
}
.marginabove40 { /*this margin disappears on small screens and is used for pushing content down the page, usually away from the ticker*/
	margin: 0;
}
}

@media (max-width: 622px) { /*large phones and smaller tablets*/
a.whitelabellinks-longwords {
  font-size:7pt;
  font-weight:600;
}
.pad3v3 {
	padding: 0 0 0 30px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 0 0 30px;
}
.pad5v2 {
	padding:0;
}
.pad5v3 {
	padding:0;
}
/*to align the search bar with the other stuff on the left when it floats to the left at this size*/
.social-search2 .navbar-form,
.social-search2 .navbar-search {
/*    float: none;*/
/*	display:inline-block;*/
/*    padding: 1px 0;*/
    margin: 10px 0 0 3px;
/*    border-top: 0 none;*/
/*    border-bottom: 0 none;*/
/*    -webkit-box-shadow: none;*/
/*       -moz-box-shadow: none;*/
/*            box-shadow: none;*/
/*	vertical-align:top;*/
}
/*This is the space between each social media button, I made this bigger to force the search bar off the line immediately upon media query at this 622 size*/
.social-search2 > .socialbuttons > ul.inline > li {
    padding-right: 8px;
    padding-left: 8px;
}
/*this controls mostly the amount of space between the social buttons and the search bar (622 px and smaller), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 0;
}
.socialbutton {
	/*padding:0 7px;*/
	padding:0 7px 2px;
/*	display:inline-block;*/
/*	border:thin solid;*/
/*	background-color: #404041;*/
/*	border-color:#a5a5a5;*/
/*	-webkit-border-radius: 4px;*/
/*	-moz-border-radius: 4px;*/
/*	border-radius: 4px;*/
	font-size:9pt;
/*	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;*/
	/*line-height:12pt;*/
	line-height:11pt;
	font-weight:300;
	letter-spacing:0;
	text-align:center;
/*	margin: 0;*/
/*	color:#fcfcfc;*/
	vertical-align:text-top;
}
}

/*this is actually max 498 pixels*/
@media (max-width: 480px) { /*phones*/

/*I want the spaons to collapse from 6 thumbnails to 3 at this size these next few items accomplish that*/
.row-fluid [class*="spaon"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 5%;
  *margin-left: 5%;
}
.row-fluid [class*="spaon"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="spaon"] + [class*="spaon"] {
  margin-left: 4.121475054229935%;
}
.row-fluid .spaon15percent { /*gets transformed into a default span5*/
	width: 30%;
    *width: 30%;
}
.row-fluid .newrowat480 { /*this is what I apply to every 4th item in a row in order to make it start a new row*/
  margin-left: 0;
}
h2 { /*main body headers and boilerplate headings*/
	font-size:12pt;
	letter-spacing:-0.5px;
}
a.whitelabellinks-longwords {
  font-size:8pt;
  font-weight:700;
}
.social-search2 .socialbuttons {
    float: none;
    padding: 1px 0;
    margin: 0;
    /*border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;*/
	border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.social-search2 .navbar-form,
.social-search2 .navbar-search {
    float: none;
    padding: 1px 0;
    margin: 0;
    border-top: 0 none;
    border-bottom: 0 none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.social-search2 .navbar-search .magnifyingglass {
	left:8px;
	top:8px;
}
/*This is the space between each social media button*/
.social-search2 > .socialbuttons > ul.inline > li {
    padding-right: 6px;
    padding-left: 6px;
}
/*to align the search bar with the other stuff on the left when it floats to the left at this size*/
.social-search2 .navbar-form,
.social-search2 .navbar-search {
/*    float: none;*/
/*	display:inline-block;*/
/*    padding: 1px 0;*/
    margin: 10px 0 0 1px;
/*    border-top: 0 none;*/
/*    border-bottom: 0 none;*/
/*    -webkit-box-shadow: none;*/
/*       -moz-box-shadow: none;*/
/*            box-shadow: none;*/
/*	vertical-align:top;*/
}
.socialbutton {
	/*padding:0 7px;*/
	padding:0 7px 2px;
/*	display:inline-block;*/
/*	border:thin solid;*/
/*	background-color: #404041;*/
/*	border-color:#a5a5a5;*/
/*	-webkit-border-radius: 4px;*/
/*	-moz-border-radius: 4px;*/
/*	border-radius: 4px;*/
	font-size:9pt;
/*	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;*/
	/*line-height:12pt;*/
	line-height:11pt;
	font-weight:300;
	letter-spacing:0;
	text-align:center;
/*	margin: 0;*/
/*	color:#fcfcfc;*/
	vertical-align:text-top;
}
/*this controls mostly the amount of space between the social buttons and the search bar (480 and smaller), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 0;
}
.pad3 {
	padding: 0 50px;
}
.pad3v2 {
	padding: 0 50px;
}
.pad3v3 {
	padding: 0 0 0 40px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 0 0 40px;
}
.pad5 {
	padding: 0 120px;
}
.pad5v2 {
	padding: 0;
}
.pad5v3 {
	padding:0 12px;
}
.fivebuttons { /*using media queries I squish this div for smaller screen sizes NOTE shouldn't have to adjust this one on smaller sizes because of percent*/
	margin:0;
	padding:0 0%;
}
.textbox { /*using media queries I squish this div for smaller screen sizes*/
	margin: 20px 0;
	padding:0 50px;
}
.smallimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 120px;
}
.mediumimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 50px;
}
.mediumimages2 { /*using media queries I squish this div for smaller screen sizes*/
	margin:20px 0;
	padding:0 50px;
}
.largeimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 20px;
}
a.whitelabellinks {
  font-size: 8pt;
  line-spacing: 12pt;
}
.textbox-relative-p { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
	min-height:110px;
}
}
/*this is actually max 418 pixels*/
@media (max-width: 400px) { /*smaller phones where the size of the logo starts messing things up*/

.lyletoplogo {
	padding-top:9px;
	width: 193px; 
	height: 32px;
}
a.whitelabellinks-longwords {
  font-size:7pt;
  font-weight:600;
}
.pad3 {
	padding: 0 30px;
}
.pad3v2 {
	padding: 0 30px;
}
.pad3v3 {
	padding: 0 0 0 30px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 0 0 30px;
}
.pad5 {
	padding: 0 80px;
}
.pad5v3 {
	padding:0 10px;
}
.textbox { /*using media queries I squish this div for smaller screen sizes*/
	margin: 20px 0;
	padding:0 30px;
}
.smallimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 80px;
}
.mediumimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 30px;
}
.mediumimages2 { /*using media queries I squish this div for smaller screen sizes*/
	margin:20px 0;
	padding:0 30px;
}
.largeimages { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0 10px;
}
h1 {
	font-size:14pt;
	line-height:13pt;
	letter-spacing:-2px;
}


/*h1:first-letter
{
	font-size:17pt;
}*/
/*.biggerletter {
	font-size:17pt;
}*/


.textbox-relative-p { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
	min-height:120px;
}
/*This is the space between each social media button*/
.social-search2 > .socialbuttons > ul.inline > li {
    padding-right: 4px;
    padding-left: 4px;
}
.social-search2 .navbar-form,
.social-search2 .navbar-search {
/*    float: none;*/
/*	display:inline-block;*/
/*    padding: 1px 0;*/
    margin: 10px 0 0 -1px;
/*    border-top: 0 none;*/
/*    border-bottom: 0 none;*/
/*    -webkit-box-shadow: none;*/
/*       -moz-box-shadow: none;*/
/*            box-shadow: none;*/
/*	vertical-align:top;*/
}
.socialbutton {
	/*padding:0 7px;*/
	padding:0 7px 2px;
/*	display:inline-block;*/
/*	border:thin solid;*/
/*	background-color: #404041;*/
/*	border-color:#a5a5a5;*/
/*	-webkit-border-radius: 4px;*/
/*	-moz-border-radius: 4px;*/
/*	border-radius: 4px;*/
	font-size:9pt;
/*	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;*/
	/*line-height:12pt;*/
	line-height:11pt;
	font-weight:300;
	letter-spacing:0;
	text-align:center;
/*	margin: 0;*/
/*	color:#fcfcfc;*/
	vertical-align:text-top;
}
/*this controls mostly the amount of space between the social buttons and the search bar (400 and smaller), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 0;
}
}
/*this is actually max 358 pixels*/
@media (max-width: 340px) { /*really small phones*/
body {
    padding-left: 15px;
    padding-right: 15px;
}
h1 {
	font-size:11pt;
	line-height:11pt;
	letter-spacing:-1px;
}

/*
h1:first-letter
{
	font-size:14pt;
}*/

/*.biggerletter {
	font-size:14pt;
}*/

a.whitelabellinks-longwords {
  font-size:7pt;
}
.pad5v3 {
	padding:0;
}
.pad3v3 {
	padding: 0 0 0 20px;
}
.pad3v3deptstage { /*this gets the text boxes further away from the department label on the stage (currently) exclusively for the department pages*/
	padding: 0 0 0 20px;
}
.textbox-relative-p { /*using media queries I squish this div for smaller screen sizes*/
	margin:0;
	padding:0;
	position:relative;
	min-height:140px;
}
/*This is the space between each social media button*/
.social-search2 > .socialbuttons > ul.inline > li {
    padding-right: 4px;
    padding-left: 4px;
}
.social-search2 .navbar-form,
.social-search2 .navbar-search {
/*    float: none;*/
/*	display:inline-block;*/
/*    padding: 1px 0;*/
    margin: 10px 0 0 -1px;
/*    border-top: 0 none;*/
/*    border-bottom: 0 none;*/
/*    -webkit-box-shadow: none;*/
/*       -moz-box-shadow: none;*/
/*            box-shadow: none;*/
/*	vertical-align:top;*/
}
.socialbutton {
	/*padding:0 7px;*/
	padding:0 5px 2px;
/*	display:inline-block;*/
/*	border:thin solid;*/
/*	background-color: #404041;*/
/*	border-color:#a5a5a5;*/
/*	-webkit-border-radius: 4px;*/
/*	-moz-border-radius: 4px;*/
/*	border-radius: 4px;*/
	font-size:9pt;
/*	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;*/
	/*line-height:12pt;*/
	line-height:11pt;
	font-weight:300;
	letter-spacing:0;
	text-align:center;
/*	margin: 0;*/
/*	color:#fcfcfc;*/
	vertical-align:text-top;
}
/*this controls mostly the amount of space between the social buttons and the search bar (340 and smaller), the default padding was 5 on left and right*/
.searchbar ul.inline > li, .searchbar ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 0;
}
}

/* Boiler Plate Styles
-------------------------------------------------- */

/* h6 is for news items and calendar events*/

.news-subhead {
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:7pt;
	line-height:8pt;
	color:#58585a;
	letter-spacing:0px;
	font-weight:400;
	text-transform:uppercase;
    margin: 2px 0 6px 0;
	padding:0;
	text-rendering: optimizelegibility;
}

.news-image {
	display:block;
	/*vertical-align:middle;*/
	/*width:20%;*/
	/*position:relative;*/
	/*float:left;*/
	width:64px;
	height:64px;
}
.event-months {
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:11px; /*same as 9pt*/
	color:#58585a;
	letter-spacing:0.5px;
	font-weight:800;
	text-transform:uppercase;
    margin: 0px;	
	/*text-rendering: optimizelegibility;*/
	text-align:center;
}
a.event-months {
	position: relative;
    z-index: 50; 
    display:block;
}
a.event-months:before {
    border-top: 1px solid #d7d7d7;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 10px; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}
a.event-months:after {
  clear: both;
}
a.event-months span { 
	background-color: #fff; 
	padding: 0 10px;
}

a.event-months span.ted-x {
	color:#ee3124;
	padding:0;
}
a.event-months span.ted-x-superscript {
  position: relative;
  font-size: 6pt;
  line-height: 0;
  vertical-align:2.5pt;
  padding:0;
}
.tedxcalendarlogo {
	/*padding-top:9px;*/
	width: 50px; 
	height: 8px;
	vertical-align:0;
}

/* Regular Navbar at bottom
-------------------------------------------------- */

.small-bottomlinks {
	font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
	font-size:8pt;
	line-height:9pt;
	font-weight:400;
	color:#818285;
	letter-spacing:0;
	text-align:center;
    margin: 10px 0;
	text-rendering: optimizelegibility;
	text-transform:uppercase;
}
.littlenavlogo {
	padding: 0 0 2.5px 0;
	width: 25px; 
	height: 25px;
	vertical-align:middle;
}
.lineabovebelow {
	padding:40px 0;
	margin:30px 0;
	border-top:1px solid #d7d7d7;
	border-bottom:1px solid #d7d7d7;
}
	

/* Fixed position Bobby B Lyle at the bottom
-------------------------------------------------- */

.foot {
  *position: relative;
  *z-index: 2;
  margin-bottom: 0px;
  overflow: visible;
  padding: 4px 0 0 0;
  border-top:thin solid #d7d7d7;
  min-height: 19px;
}

/*.foot .navbar-fixed-bottom {
    padding: 6px 0 0 0;
}*/

.bottom-bar {
 /* background-color: #404041;*/
  background-color: #12347e;
  height: 19px;
  text-align:center;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin: 0;
  bottom: 0;
  line-height:19px;
  font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", sans-serif;
  font-size:10pt;
  color: #fff;
  font-weight:400;
  letter-spacing:.5px;
  min-height: 19px;
  padding-right: 20px;
  padding-left: 20px;
}
.bottom-bar:before,
.bottom-bar:after {
  display: table;
  line-height: 0;
  content: "";
}

.bottom-bar:after {
  clear: both;
}
.centerfooterlogo {
  position:absolute;/*important for the centering process*/
  left:50%;/*important for the centering process*/
  	display:block;
	top:-2px;
/*	padding-bottom:2px*/;
}
.centerfooterlogo2 {/*important for the centering process*/
  position:relative;
  left:-50%;
  display:inline;
}
.bobbyfooterlogo {
	height: 9px;
	max-width: 243px; /*to prevent weird appearance in chrome and android browsers*/
}

@media print {
.navbar2 {
     display:none;
}
a:link:after, a:visited:after {
    content: "";
}
}