@charset "utf-8";

/* link to font awesome to be able to use icon */
@import url('../wright/fontawesome/css/font-awesome.min.css');

/* first for Internet Explorer < 9 */
@font-face {
  font-family: DINWeb;
  src: url("../../../fonts/DIN/DINWeb.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: DINWeb;
  src: url("../../../fonts/DIN/DINWeb.woff") format("woff");
}



@font-face {
  font-family: DINWebMedium;
  src: url("../../../fonts/DIN/DINWeb-Medium.eot");
  font-weight: bold;
}

@font-face {
  font-family: DINWebMedium;
  src: url("../../../fonts/DIN/DINWeb-Medium.woff") format("woff");
  font-weight: bold;
}


@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}


html { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body { 
  color: #000000;
  line-height: 1.5; 
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  background-color: #dedede;
}


/* ----------------   format heading, sub-heading, classes --------------------- */


h1,h2,h3 {
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}

h4 {
	font-family: "open_sansregular", sans-serif;
}

h5, h6 {
  	font-family: Helvetica, Arial, Sans-serif;
}

h5, h6 {
  	line-height: 1.250em;
  	font-weight: bold;
}

h5 {
  	font-size: 0.875em;
}

h6 {
  	font-size: 0.744em;
}

/* Large desktop */
@media (min-width: 1200px) {
  .navbar .nav > li {
    padding: 0 7px 0 7px;
	}

  h1 {
    font-size: 3em;
    line-height: 1.05em;
    font-weight: bold;
	}

  h2 {
    font-size: 2.25em;
    line-height: 1.25em;
    margin-top: 40px;
	}

  h3 {
    font-size: 1.75em;
    line-height: 1.25em;
	}

  h4 {
    font-size: 1.125em;
    line-height: 1.22222222em;
    font-weight: bold;
    margin-top: 0px;
  }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 2em;
    margin-top: 30px;
  }

  h3 {
    font-size: 1.5em;
    margin-top: 20px;
  }

  h4 {
    font-size: 1.125em;
    margin-top: 0px;
  }

  h1, h2, h3, h4 {
    line-height: 1.4;
	}

  p {
   margin: 0 0 1.25em;
	}
  
  li {
   padding: 5px 0 8px 0;
	}

}
 
/* Portrait and Landscape phone to portrait tablet */
@media (max-width: 767px) { 

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.625em;
    margin-top: 30px;
  }

  h3 {
    font-size: 1.375em;
    margin-top: 20px;
  }

  h4 {
    font-size: 1.125em;
    margin-top: 0px;
  }
 
  h1, h2, h3, h4 {
    line-height: 1.4;
  }
 

  p {
   margin: 0 0 1.25em;
  }
  
  li {
   padding: 5px 0 8px 0;
  }

  
}


/* -------- for footer section - if this code goes to bottom, it won't work --------*/

/* bg for footer - go all the way across the page */
.wrapper-footer {
  	background-color: #373737;
  	padding-bottom: 10px;
}

/* bg for grid bottom2 */
@media (max-width: 767px) {
	.wrapper-bottommenu,
	.wrapper-footer {
  		margin-right: -20px;
  		margin-left: -20px;
  		padding-left: 20px;
  		padding-right: 20px;
	}
}

.wrapper-bottommenu {
  	height: 99px;
  	background:url(/images/layout/mainmaglab/bg_footer.png) repeat #4C4184;
}

.wrapper-bottommenu .container {
  	background-color: transparent;
}

/* make social media on footer are align right */
.socialmediabottom {
		text-align: right;
}


/* make social media on footer are align left on Landscape phones and down */
@media (max-width: 640px) { 
.socialmediabottom {
		text-align: left;
   }
.socialmediabottom ul{
		margin-left: 0px;
   }


}


#footer-menu {
  background-color: transparent;
  /*padding-top: 10px;*/
}

/* violet pattern */

/* make Back to Top text align right on violet pattern */
 .rightaligntext {
   text-align: right;
   margin-right:  5px;
   margin-top: 60px;

 }
 
 
#footer-menu ul {
  font-family: DINWeb, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  list-style: none;
  margin-left: 0px;
  margin-top: 60px;
  text-shadow: 2px 2px #000000;
  
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=120, strength=2);
}



/* Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 979px) { */
@media (min-width: 768px) and (max-width: 1024px) { 

#footer-menu ul {
  margin-top: 20px;
}

 .rightaligntext {
   margin-top: 20px;
 }
 
 
}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
#footer-menu ul {
  margin-top: 20px;
}

 .rightaligntext {
   margin-top: 20px;
 }
 
}


/* Landscape phones and down */
@media (max-width: 480px) { 
#footer-menu ul {
  margin-top: 5px;
}

 .rightaligntext {
   margin-top: 5px;
   font-size: .75em;
 }
 
}

#footer-menu ul li {
  display: inline;
  padding-right: 20px;
  line-height: 34px;
}

#footer-menu ul li a{
  color: #ffffff;
}

#footer ul {
  list-style-type: none;
}

#footer ul li {
  display: inline;
  padding-right: 5px;
}

#footer .container {
  background-color: #373737;
  padding-top: 20px;
}

#footer p{
  color: #999999;
  font-size: .75em;
}


/* ------------ CONTAINER --------------- */

/* ------------ bring a container to touch the edge on the top --------------- */
.moduletable, .module {
  margin-bottom: 0px;
}


.wrapper-menu > .container,
.wrapper-submenu > .container { /*add .wrapper-submenu for submenu on mobile*/
  width: 100%;
  padding: 0;
}

/* Smartphones (portrait ) ----------- */
@media only screen 
and (min-device-width : 320px) {
  .img-polaroid {
    padding: 2px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
}


/* iPads (portrait and landscape) ----------- @media (min-width: 768px) and (max-width: 979px){ */
@media (min-width: 768px) and (max-width: 979px) {
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 724px;
    padding-left: 10px;
    padding-right: 10px;

  }  

 .row-fluid .span4{
    width:31%;
    *width:31%
 }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  .row-fluid .span4 {
    width:31.2%;
    *width:31.2%
  }
}

@media (min-width: 1200px) {
  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
    padding:0px;
  }
  
  .row-fluid .span4{
    width:31%;
    *width:31%
  }
}
/* ---------------- end CONTAINER ---------------- */

/* ------- Personnel, Publications, and Mag Schedule (@author Casey McLaughlin) ------ */

.maglab-publications-summary-title {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
}

.maglab-publications-summary-authors {
  display: block;
}

.maglab-publications-summary-journal-name {
  font-style: italic;
}

/* Significant publication titles should be highlighted */
.maglab-publications-summary-journal-name.maglab-publications-significant-journal {
  color: #990000;
}

.personnel-header {
  margin-bottom: 1em;
}

.personnel-header h2 {
  margin-top: 0;
  margin-bottom: 1px;
  line-height: 1em;
}

.personnel-header p { 
  margin: 1px;
}

.personnel-profile {
  clear: both;
  font-size: 0.9em;
	padding-bottom: 10px;
}

.personnel-profile .personnel-headshot {
  width: 200px;
  height: 200px;
  float: left;
}

.personnel-profile .personnel-contactinfo {
  margin: 0 20px 0 220px;
  padding: 10px 20px;
  background-color: #F9F9F9;
  height: 190px;
  border: 1px solid #DFDFDF;
}

.personnel-profile .personnel-contactinfo h3 {
  margin: 0;
}

.personnel-profile .personnel-contactinfo tbody th,
.personnel-profile .personnel-contactinfo tbody td {
  vertical-align: top;
}

.personnel-profile .personnel-contactinfo tbody th {
  font-weight: normal;
  text-align: left;
  color: #787878;
  width: 100px;
}

.personnel-summary-list h2:first-child {
  margin-top: 0;
}

.personnel-summary .personnel-summary-img {
  float: right;
  width: 200px;
  height: 200px;
}

.personnel-summary p {
  margin: 0.25em 0;
}

.personnel-summary address {
  margin: 1em 0;
}

@media only screen and (max-width: 767px) {
  .personnel-summary .personnel-summary-img {
    display: none;
  }
}

@media only screen and (max-width: 979px) {
  .personnel-profile .personnel-headshot {
    float: none;
    margin: 10px auto;
    display: block;
  }

  .personnel-profile .personnel-contactinfo {
    margin: 10px;
  }
}


.table_header td {
  background-color: #EEE;
  font-size: 1.1em;
  text-align: center;
}

.striped-list li:nth-child(2n+1) {
  background-color: #F9f9f9;
}

.publications-list ol {
  list-style-position: outside;
  margin-left: 0;
  padding-left: 30px;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.publications-list ol li {
  font-size: 0.9em;
  padding: 0;
  font-weight: bold;
}

.publications-list ol li .maglab-publications-item {
  border-top: 1px solid #CCC;  
  font-weight: normal;
  padding: 0.5em;
  margin-left: -30px;
  padding-left: 30px;
}

.publications-list .striped-list li:nth-child(2n+1) .maglab-publications-item {
  background-color: #F9f9f9;
}


.publications-list ol li .maglab-publications-summary-title {
  font-weight: normal;
}


.publications-list ol li .maglab-publications-summary-authors,
.publications-list ol li .maglab-publications-summary-info {
  /*margin-left: 25px;*/
}

/* This trick makes 'position: inside' emulate 'position: outside' for publications lists */
/*.publications-list ol li .maglab-publications-item {
  display: inline-block;
  padding-left: 25px;
  text-indent: -25px;
}
.publications-list ol li.sd .maglab-publications-item {
  text-indent: -17px;
}*/

/* styling pub tabs on personnel page */
.maglab-publication-tabs.nav-tabs{

   border-bottom: 1px solid #ddd;

}

.tab-pane.active.maglab-publications-tab h4 {
padding-top: 20px;
}

/* regular tabs */
ul.nav.nav-tabs.maglab-publication-tabs li a {
	border-right: 1px solid #E7E7E7;
	border-left: 1px solid #E7E7E7;
	border-top: 1px solid #E7E7E7;
	border-radius: 5px 5px 0px 0px;
	background: url("../../../images/layout/mainmaglab/tab_bg2_wb.png") repeat-x scroll 0px bottom #FCFCFC;
}

/* regular tabs */
ul.nav.nav-tabs.maglab-publication-tabs li a  {
	/*font-weight: bold;*/
	color: #000000;	
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}


/* active tab */
ul.nav.nav-tabs.maglab-publication-tabs li.active a.maglab-publication-tab-toggle  {
	color: #0088cc;	
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}

/* change text on tab not work
ul.nav.nav-tabs.maglab-publication-tabs li:nth-of-type(6):before { content: "Patents & Products "; } */


img.missing {
  background: url('images/avatar.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;  
  background-size: cover;
}

.magschedule-filter-form select {
  margin-bottom: 0;
}

/* Make sure date column is wide enough */

.magschedule-table {
width: 100%; 
  border-collapse: collapse; 
}
  
.magschedule-table .magschedule-col-dates {
  min-width: 85px;
}

.magschedule-table .magschedule-col-experiment {
  max-width: 325px;
}

.magschedule-item .magschedule-date {
  display: block;
}

.magschedule-item .magschedule-member {
  color: #3C3174;
  font-size: 0.9em;
}

.magschedule-item .magschedule-title,
.magschedule-item .magschedule-member.member-pi {
  display: block;
}

.magschedule-item .magschedule-participants-title {
  text-transform: uppercase;
  font-size: 1em;
  color: #3C3174;
}

.magschedule-item .popover-toggle {
  cursor: pointer;
}

.magschedule-participants-list {
  font-weight: normal;
}

/* make data table responsive */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  
table.magschedule-table, 
.magschedule-table thead, 
.magschedule-table tbody,
.magschedule-table tr, 
.magschedule-table th, 
.magschedule-table td{
    display: block;
}
  
/* Hide table headers (but not display: none;, for accessibility) */
.magschedule-table thead tr{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
  
.magschedule-table tr { 
   border: 1px solid #ccc; 
}
	
.magschedule-table td { 
	/* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee; 
   position: relative;
   padding-left: 50%; 
}
	
.magschedule-table td:before { 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 10px; 
	white-space: nowrap;
}
	
/* Label the data */
.magschedule-table	td:nth-of-type(1):before { content: "Dates"; }
.magschedule-table	td:nth-of-type(2):before { content: "Facility"; }
.magschedule-table	td:nth-of-type(3):before { content: "Instruments"; }
.magschedule-table	td:nth-of-type(4):before { content: "Experiment"; }

 
  
}

/* add white background to magnet schedule on position below-content */
.maglabModuleBox {
 background-color: white;
 padding: 1em;
 margin-bottom: 2em;
}

/* ---------------- responsive youtube video on regular page ---------------- */
.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

/* ---------------- responsive youtube video on homepage ---------------- */
.flex-video-home {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 0px;
  overflow: hidden;
}
 
.flex-video-home.widescreen { padding-bottom: 57.25%; }
.flex-video-home.vimeo { padding-top: 0; }
 
.flex-video-home iframe,
.flex-video-home object,
.flex-video-home embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video-home { padding-top: 0; }
}

/* ---------------- end responsive youtube video ---------------- */

/* ---------------- responsive issuu - Annual Report - on regular page ---------------- */

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*  ---------------- For k2 Extra fields  ----------- */

#extraFieldsContainer {
  min-height: 300px;
}

#mefg-groups .content {
  background-color: #F4F5F5;
  min-height: 300px;
}

/* ------------------  for Search Result page ------------------  */

.modulesearchBG{
  background-color: #ffffff;
	padding: 0px 20px;
}

form#searchForm {
  background: #E5F1FD;
  padding: 10px;
}

#searchForm #search_searchword {
  border: 2px #0C3A6D solid;
  color: #0C3A6D
}

#searchForm table td {
  padding: 5px
}

dl.search-results dt.result-title {
  margin: 15px 0 5px 0;
  padding: 5px 0;
  border-top: 1px #ddd solid;
}
 
dl.search-results dd.result-created {
  font-size: 11px;
}


/* ------------------  for Smart Slider 2 ------------------  */

/* ------------------  for DP Calenar ------------------  */

/* to make hover behavior on mini-calendar display in full, not cut off */
.dp-container {
	background-color: #ffffff;
	padding: 15px;
	position:relative;
    /*overflow:hidden;*/
    margin-bottom: 20px;
}

/* to make white background down below image */
#dpcal-event-container {
	overflow:hidden;
}


#dpcalendar_view_list {
  padding-bottom: 20px;
}

/* hide color of event */
#jform_color-lbl {
	display: none;
}

#jform_color {
	display: none;
}

.dp-upcoming-text-month {
    margin-top: -14px !important;
    margin-bottom: -6px !important;    
}

/* for counter module */

div.dpcalendar_counter {

/*background-color: #e31837;*/
background: url("../../../images/news_events/events/open_house/2016_count_down_bg.png");
color: #e31837;
margin-bottom: 20px;
padding-top: 20px;
width: 100%;
}

div#dpcountdown-607.countdown.is-countdown div.countdown-row {
    text-align: center !important;
    padding: 0 !important;
}
.countdown-section {
    display: inline-block !important;
    float: none !important;
    font-size: 75%;
    /*margin-right: 8px;*/
    background-color: #ffffff;
    width: 50px;
    padding: 10px;
    margin: 10px;
    box-shadow: 3px 3px 3px #000000;
}

.countdownBackground {
  margin: -20px auto 10px auto;
  background-color: #ffffff;
  width: 93%;
  display: table;
  box-shadow: 3px 3px 3px #000000;

}

.countdownText {
  display: table-cell;
   vertical-align: middle;
   padding: 10px 0px;
}
/* ------------------  for ChronoForms ------------------  */

.submit_btn {
  padding: 4px 20px;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #0088cc;
  margin-top: 20px;
}

.submit_btn:hover {
  background-color: #5e5e5e;
  color: #ffffff;
}

.small-message, .error-message {
  /*line-height: 18px;
  margin: 4px 0 0 150px;
  font-size: 11px;
  display: block;
  clear: both;*/
}

.b_jdefault .wrapper-footer {
	/*display: none;*/
}

/* Added by Casey McLaughlin -- Give the labels some breathing space */
form.Chronoform .ccms_form_element > label {
   margin-right: 20px;
}




.ccms_form_element {
  margin-bottom: 0px;
  position: relative;
  padding: 5px 0px 5px 5px;
  clear: both;
}


.progress-info .bar, .progress .bar-info {
  background-color: #0b4a79;
  background-image: -moz-linear-gradient(top,#0b4a79,#0b4a79);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0b4a79),to(#0b4a79));
  background-image: -webkit-linear-gradient(top,#0b4a79,#0b4a79);
  background-image: -o-linear-gradient(top,#0b4a79,#0b4a79);
  background-image: linear-gradient(to bottom,#0b4a79,#0b4a79);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0b4a79',endColorstr='#ff0b4a79',GradientType=0);
}

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f7f7f7;
  background-image: -moz-linear-gradient(top,#efefef,#e9e9e9);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#efefef),to(#e9e9e9));
  background-image: -webkit-linear-gradient(top,#efefef,#e9e9e9);
  background-image: -o-linear-gradient(top,#efefef,#e9e9e9);
  background-image: linear-gradient(to bottom,#efefef,#e9e9e9);
  background-repeat: repeat-x;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefefef',endColorstr='#ffe9e9e9',GradientType=0);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* make New and Remove button for school-lookup admin form align horizontally */
.btn-wrapper {
  width: 8%;
  float: left;
}


/* for chronoforms to display thank you message on the side bar */
.messagecontainer {
background: #ffffff;
margin: 20px 0px;
padding: 20px;
}


/* hide power by chronoengine temporary before validate */
.chronoform {
  display: none;
}





/* ------------------ for Noo Timeline ----------------- */

/* make font that displays year, next to minus and plus sign bigger */
.noo-tl-item .noo-tl-time {
	font-size: 16px;
}

/* make padding between text and gray background smaller */
.noo-tl-info {

	padding: 15px 30px;

}

/* make title smaller */
h2.noo-tl-title {
	margin-top: 10px;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: normal;

}

/* make title font color to white */ 
.noo-tl-item h2 a {
	color: #ffffff;
}

/* make content text to black with white background and round border */
.noo-tl-item .noo-tl-desc {
	display: none;
	overflow: hidden;
	color: #000000;
	background-color: #ffffff;
	padding: 15px;
	border-radius: 8px 8px 8px 8px;
}


/* ------------------ for K2 filter and search module ----------------- */


/* make drop dow menu fit in a narrow area */
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

.k2filter-table select{
width: 95%;

}


}

/* M added this after update to 1.5.4 version */
/* change font size from 16 to 21 px */
.K2FilterBlock h3 {
    font-size: 21px !important;
}

.K2FilterBlock {
    background-color: #ffffff;
    padding: 10px;
    
}


/* ------------------ for My Socialmedia Timeline ----------------- */


/* styling tabs on sidebar module */
#cbmysocialtlineTab.nav-tabs{

   border-bottom: 1px solid #ddd;

}

.tab-pane.active.maglab-publications-tab h4 {
padding-top: 20px;
}

/* regular tabs */
ul.nav.nav-tabs#cbmysocialtlineTab li a {
	border-right: 1px solid #E7E7E7;
	border-left: 1px solid #E7E7E7;
	border-top: 1px solid #E7E7E7;
	border-radius: 5px 5px 0px 0px;
	background: url("../../../images/layout/mainmaglab/tab_bg2_wb.png") repeat-x scroll 0px bottom #FCFCFC;
}

/* regular tabs */
ul.nav.nav-tabs#cbmysocialtlineTab li a  {
	/*font-weight: bold;*/
	color: #0000;	
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}


/* active tab */
ul.nav.nav-tabs#cbmysocialtlineTab li.active a.maglab-publication-tab-toggle  {
	color: #0088cc;	
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}



/* ------------------ for Joomla Quiz Deluxe ----------------- */

/* hide message how many people answer this question */
.review_statistic {
display: none;
}


/* ------------------ for JuTabs in iframe peer-review publications ----------------- */
.ju-tabs-wrap div .wrapper-bottommenu,  .ju-tabs-wrap div .wrapper-footer{
	display: none;
}


/* ------------------ for Simple Image Gallery Pro ----------------- */

a.sigProFlickrSetLink {
    display: block;
    clear: left;
    padding: 10px;
    font-size: .85em;
    text-align: center;
    background-color: #1d88ca;
    color: white;
    width: 30%;
    text-decoration: none;
}

a.sigProFlickrSetLink:hover {
    background-color: #58585a;
    color: white;
    text-decoration: none;
}


a.sigProFlickrSetLink:visited , a.sigProFlickrSetLink:active {
    text-decoration: none;
}


.copyright_gallery {
	padding: 10px;
	font-size: 11px;
  border:1px solid #dddddd;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px; 
  margin-top: 20px;
}


/* ------------------ for No Number Tooltip ----------------- */

.nn_tooltips-link {
   border-bottom: none !important;
     /*border-top: none;*/
   background-color: #ececec; 
   padding: 1px 5px;
}

.nn_tooltips.popover .popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;

}


/* ------------------ for Breadcrumb ----------------- */
/* reduce the height of breadcrumb */
.breadcrumb {
padding: 2px 15px;

}

/* make font size of breadcrumb smaller */
.breadcrumb li{
font-size: .85em;

}

/* ------------------ class for hr ----------------- */

.borderbottom3 {
  border-bottom: 3px solid #000;
  font-size: 1.969em;
}

.thinhr {
  border-bottom: 1px solid #aaaaaa;
  font-size: 1.969em;
}


@media (max-width: 767px)  {

.nohr {
  display: none;
}

}

.space {
  height: 15px;
  clear: both;
}

.spacetopbottom {
  padding-top: 15px;
  padding-bottom: 10px;
  clear: both;
}

.clear {
  clear: both;
}

.footnotedevided {
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  font-size: .85em; 
  color: #aaaaaa;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
}


/* ------------------ class for links ----------------- */

/* ----------- */
a.bluelink {
  text-decoration: none;
}
  
a.bluelink:link,  a.bluelink:active {
  text-decoration: none;
  color: #0088cc;
}

a.bluelink:visited {
  text-decoration: none;
  color: #0b4a79;
}
  
a.bluelink:hover {
  text-decoration: underline;
  color: #4C4184; /* purple */
}



/* links for sticky top menu */
a.whitelink {
  text-decoration: none;
}
  
a.whitelink:link,  a.whitelink:active {
  text-decoration: none;
  color: #ffffff;
}

a.whitelink:visited {
  text-decoration: none;
  color: #ffffff;
}
  
a.whitelink:hover {
  text-decoration: none;
  color: #0088cc;
}

/* links for Back to top, next to bottom menu */
a.whitelinkback {
  text-decoration: none;
  text-shadow: 2px 2px #000000;
}
  
a.whitelinkback:link,  a.whitelinkback:active {
  text-decoration: none;
  color: #ffffff;
}

a.whitelinkback:visited {
  text-decoration: none;
  color: #ffffff;
}
  
a.whitelinkback:hover {
  text-decoration: underline;
  color: #ffffff;
}

/* ----------------- classes for style -------------------------  */


/* Lead - introduction  */
.lead {
  font-size: 1.313em; 
  line-height: 30px;
 }

.intro {
  font-size: 1.313em; 
  line-height: 30px;
 }
 
/* Lead - on article but feed to category blog  */
.leadcatblog {
  font-size: 1.313em; 
  line-height: 30px;
  margin-bottom: 0px;
  font-weight: 200;
 } 
 
 /* no space because it is together in one div - make error on search result displays in red color */
.search.modulesearchBG .error {
	color: red;
}
 
 .greytextpersonnel {
  color: #686868;
}


.greytext {
  color: #999999;
}

.small-nobottom {
  font-size: 11px;
  margin-bottom: 0px;
}

/* for description Simple Image Gallery Pro*/
p.sigProGalleriaTargetTitle {
  display: block;
  font-size: 14px;
  line-height: 120%;
  padding: 4px;
  font-family: "open_sansregular", sans-serif;
  color: #eee;
}

/* for description Pop up when click image Simple Image Gallery Pro*/
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "open_sansregular", sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050;
}

/* hide image 1 0f 1 on the fancy box*/
.fancyboxCounter {
	display: none;
}

 /* center the text */
 .centertext {
   text-align: center;
 }
 

 
 /* hide  open folder  icon in front of sub category title */
 li .icon-folder-open {
  display:none;
 }
  

 
 /* hide  page nav counter - Page 1 of 4 */
 
.pagenavcounter {
  display:none;
 }
 
 /* category style - small and gray text */
 dd.category-name {
   color: #aaaaaa;
 }
 
 /* category text on the top of title */
dd{
  margin-left:0px
}
 
 /* remove icon in front of category text  */
dd i.icon-folder-close{
  display:none;
}



/* style for page-header title */
.page-header {
  border-bottom: none;
}

.page-header h2{
  margin-bottom: 0px;
}

.purpleheading {
color: #4c4184;

}






/* --------------- sub heading for divider ---------------- */


.subheadingcontainer1 {
    display: table;
    width: 100%;
    margin-bottom: 20px; /*also looks nice if you remove this*/
}
 
.subheadingnumber1,
.subheadingtext1 {
    display: table-cell;
    margin: 0; /*if no margin by default, this is not necessary*/
    vertical-align: middle;
    font-size: 1.5em;
}
 
.subheadingnumber1 {
    background-color: #4c4184;
    width: 10%; /*use media queries to update this for desktop vs mobile*/
    text-align: center;
    color: #ffffff;
}
 
.subheadingtext1 {
    width: 90%; /*use media queries to update this for desktop vs mobile*/
    text-transform: uppercase;
    background-color: #99c;
    padding: 10px 20px;
}



@media (max-width: 979px) { 


.subheadingnumber1,
.subheadingtext1 {
    font-size: 1.2em;
}
 
.subheadingnumber1 {
    width: 20%;
}
 
.subheadingtext1 {
    width: 80%;
}

}

/* this section is for Best of 2015 */
.subheadingnumberred,
.subheadingtextred {
    display: table-cell;
    margin: 0; /*if no margin by default, this is not necessary*/
    vertical-align: middle;
    font-size: 1.75em;
    font-family: DINWebMedium, Helvetica, Arial, sans-serif;
}


.subheadingcontainerred {
    display: table;
    width: 100%;
    margin-bottom: 20px; /*also looks nice if you remove this*/
}


.subheadingtextred {
    width: 90%; /*use media queries to update this for desktop vs mobile*/
    /*text-transform: uppercase;*/
    background-color: #ea0e18;
    padding: 10px 20px;
    color: white;
}


@media (max-width: 979px) { 


.subheadingnumberred,
.subheadingtextred {
    font-size: 1.2em;
}
 
.subheadingnumberred {
    width: 20%;
}
 
.subheadingtextred {
    width: 80%;
}

}



/* ------------------ Custom Module Class Suffix ----------------- */


/* hide and show answer on content area - using css */
a.answerlink
	{
	text-decoration: none;
	font-weight: bold;
	}

a.answerlink:link, a.answerlink:visited, a.answerlink:active
	{
	position: absolute;
	width: 55px;
	height:	16px;
	text-decoration: none;	
	color: #0c4481;
	overflow: hidden;
	}

a.answerlink:hover
	{
	position: absolute;
	width: 535px;
	height:	16px;
	text-decoration: none;
	color: #990000;
	background-color: #ffffff;
	overflow: visible;
	}

/* hide and show answer on sidebar module area - using css */
a.answerlinkmodule
	{
	text-decoration: none;
	}

a.answerlinkmodule:link, a.answerlinkmodule:visited, a.answerlinkmodule:active
	{
	position: absolute;
	width: 100px;
	height:	20px;
	text-decoration: none;	
	color: #0c4481;
	overflow: hidden;
	}

a.answerlinkmodule:hover
	{
	position: absolute;
	width: 75px;
	height:	20px;
	text-decoration: none;
	color: #990000;
	/*background-color: #ffffff;*/
	overflow: visible;
	}
		
/* for well looking, but have bg color to be #eeeeee */
.wellMagLab {
  min-height:5px;
  padding:3px;
  margin-bottom:0px;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px dotted #dddddd;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 0px 0px rgba(0,0,0,0);
  -moz-box-shadow:inset 0 0px 0px rgba(0,0,0,0);
  box-shadow:inset 0 0px 0px rgba(0,0,0,0)
}

.well-left {
  min-height: 20px;
  padding: 19px;
  margin: 0px 20px 20px 0px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.well-right {
  min-height: 20px;
  padding: 19px;
  margin: 0px 0px 20px 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
  float: right;
}

.thumbnailMagLab {  
  display:block;
  padding:4px;
  line-height:20px;
  background-color: #eeeeee;
  border:1px solid #cccccc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;  
}

.thumbnailMagLabHome {  
  display:block;
  padding:10px;
  line-height:20px;
  background-color: #eeeeee;
  border:1px solid #cccccc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;  
  text-align: center;
}

.thumbnailsMagLab {
  text-align:center;
  margin-left: -30px;
}

.thumbnailsMagLab > li {
  display: inline-block;
  float: none; /* this is the part that makes it work */
}

.thumbnailEducatorsClubForm{
  display:block;
  padding: 10px;
  line-height:20px;
  background-color: #eeeeee;
  border:1px solid #cccccc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align: left;
}

.infoboxright {  
  display:block;
  padding:10px;
  margin:20px;
  line-height:20px;
  background-color: #f9f9f9;
  border:1px solid #dddddd;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;  
  float: right;
  width: 275px;
}

.infoboxleft {  
  display:block;
  padding:10px;
  margin:5px 20px 20px 0px;
  line-height:20px;
  background-color: #f4f2ed;
  border:0px solid #f4f2ed;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;  
  float: left;
}

.infoboxcenter {  
  display:block;
  padding:10px;
  margin:20px;
  line-height:20px;
  background-color: #f9f9f9;
  border:1px solid #dddddd;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;  
}




.pullquote {
  float: right;
  margin: 15px 5px 15px 15px;
  width: 30%;
}


.pullquote h5{
  font-size: 1.55em;
  font-family: DINWebMedium, Helvetica, Arial, sans-serif;
  line-height: 120%;
  color: #4c4184;
}


.subsection {  
  display:block;
  padding:5px;
  margin-left:30px;
}


dt .result-title {
  padding: 15px;
}

/* need to move up in order to get effect */
.btn-small a {
  color: #ffffff;
}

.btn {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0px 0px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #0088cc;
  background-image: none;
  /*
  background-color: #0077d8;
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0077d8),to(#0077d8));
  background-image: -webkit-linear-gradient(top,#0077d8,#0077d8);
  background-image: -o-linear-gradient(top,#0077d8,#0077d8);
  background-image: linear-gradient(to bottom,#0077d8,#0077d8);
  background-image: -moz-linear-gradient(top,#0077d8,#0077d8);*/
  background-repeat: repeat-x;
  border: 0px solid #bbb;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
  border-color: none;
  border-bottom-color: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0077d8',endColorstr='#ff0077d8',GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}


.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {
  color:#ffffff;
  background-color:#5e5e5e;
  *background-color:#5e5e5e
}


.gbtn {
  /*display: inline-block;*/
  padding: 4px 14px;
  /*margin-bottom: 0px;*/
  font-size: 13px;
  /*line-height: 20px;*/
  color: #cccccc;
  text-align: center;
  text-shadow: 0 0px 0px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #515151;
  background-image: none;
  /*
  background-color: #0077d8;
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0077d8),to(#0077d8));
  background-image: -webkit-linear-gradient(top,#0077d8,#0077d8);
  background-image: -o-linear-gradient(top,#0077d8,#0077d8);
  background-image: linear-gradient(to bottom,#0077d8,#0077d8);
  background-image: -moz-linear-gradient(top,#0077d8,#0077d8);*/
  background-repeat: repeat-x;
  border: 0px solid #bbb;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
  border-color: none;
  border-bottom-color: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff515151',endColorstr='#ff515151',GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}


.gbtn:hover,.gbtn:active,.gbtn.active,.gbtn.disabled,.gbtn[disabled] {
  color:#ffffff;
  background-color:#5e5e5e;
  *background-color:#5e5e5e
}

/* search button for k2 filter and search module, class is purple, but it is blue and gray when hover.  */
.purplebtn {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0px 0px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #0088cc;
  background-image: none;
  /*
  background-color: #0077d8;
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0077d8),to(#0077d8));
  background-image: -webkit-linear-gradient(top,#0077d8,#0077d8);
  background-image: -o-linear-gradient(top,#0077d8,#0077d8);
  background-image: linear-gradient(to bottom,#0077d8,#0077d8);
  background-image: -moz-linear-gradient(top,#0077d8,#0077d8);*/
  background-repeat: repeat-x;
  border: 0px solid #bbb;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
  border-color: none;
  border-bottom-color: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0088cc',GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

.purplebtn:hover,.purplebtn:active,.purplebtn.active,.purplebtn.disabled,.purplebtn[disabled]{
  color:#ffffff;
  background-color:#5e5e5e;
  *background-color:#5e5e5e;
}


/* this .button is for submit button on K2 Multiple Extra Fields Group */
.button {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0px 0px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #0088cc;
  background-image: none;
  /*
  background-color: #0077d8;
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0077d8),to(#0077d8));
  background-image: -webkit-linear-gradient(top,#0077d8,#0077d8);
  background-image: -o-linear-gradient(top,#0077d8,#0077d8);
  background-image: linear-gradient(to bottom,#0077d8,#0077d8);
  background-image: -moz-linear-gradient(top,#0077d8,#0077d8);*/
  background-repeat: repeat-x;
  border: 0px solid #bbb;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
  border-color: none;
  border-bottom-color: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0077d8',endColorstr='#ff0077d8',GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

.button:hover,.button:active,.button.active,.button.disabled,.button[disabled]{
  color:#ffffff;
  background-color:#5e5e5e;
  *background-color:#5e5e5e
}





select:disabled {
  color: #ccc !important;
}

/* make space below read more button */
p.readmore {
  margin-bottom: 40px;
  padding: 0;
  clear: both;
}

.pagination  {
  display: table;
  text-align: center;
  font-size: 12px;
  margin: 10px auto 20px auto;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

.userquote {
	border-top: dotted 1px #878787;
	padding-top: 15px;
	margin-top: 20px;
	font-style: italic;
	font-weight: bold;
}

.viewmorewithline {
	border-top: dotted 1px #878787;
	padding-top: 15px;
	margin-top: 20px;
	font-weight: bold;
}

.dottlinebottom {
	border-bottom: dotted 1px #878787;
	padding-bottom: 15px;
}




/* --------------- toolbar (search box and top nav menu) and container -------------- */

/* almost black for top menu */
.navbar-inverse .navbar-inner {
  background-color: #252525;

}

.navbar-fixed-top .container {
  background:#252525;
}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
	margin-left: 18px;

}

.nav-pills > li > a {
  color: #cf264c;
  font-family: DINWebMedium, Helvetica, Arial, sans-serif;
  font-size: 1em;  
}

.nav-pills > li > a:hover {
  color: #901a34;
}

/*.nav-pills > li > a:visited {
  color: #901a34;
}*/

/* -----------  add new module position for top bar (search box and top nav) -----------  */

/* ---------------------- for table  ---------------------- */

/* Large desktop */
@media (min-width: 1200px) {
  thead {
    background: #ccc;
  }

  .table th{
    font-weight: 400;
    font-size: 1.4em !important;
    text-align: center !important;
  }  
}

/* general for 2 column table, no border */
table.nobordertable {
	width: 100%;
}

table.nobordertable th {
	padding: 6px;
}

table.nobordertable td {
  vertical-align: top;
	padding: 6px;
}

table.nobordertable td:first-child {
	width: 20%;
}

/* Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 979px) { */
@media (min-width: 768px) and (max-width: 1024px) { 
  thead {
    background: #ccc;
  }

  .table th {
    font-weight: 400;
    font-size: 1.4em !important;
    text-align: center !important;
  }  
  
 
  
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  thead {
    background: #ccc;
  }

  .table th{
    font-weight: 400;
    font-size: 1.2em !important;
    text-align: center !important;
  }  
}


/* Landscape phones and down */
@media (max-width: 480px) { 
  thead {
    background: #ccc;
  }

  .table th {
    font-weight: 300;
    font-size: 1em !important;
    text-align: center !important;
  }  
}

/* ---------------------- toolbar top position  ---------------------  */
 .toolbar-top {
	padding-left: 15px;
}

 .toolbar-top ul {
  list-style-type: none;
  padding-top: 15px;
  margin-bottom: 0px;
}

.toolbar-top ul li {
  display: inline;
  color: #d7d7d7;
  padding-right: 15px;
}

/* make search box go up to the same line with text */
.toolbar-top form {
  margin-top: -39px;
}

/* effect to both top menu and pri nav bar */
.navbar {
  margin-bottom: 0px;
}

/* reduce white space between search box and logo */
#toolbar-top ul {
  margin-bottom: 0px;
}

#header {
  position: inherit;
  margin-bottom: 0px;
  background: #dedede;
  padding-top: 5px;
  margin-top: 0px; /*make logo stay under request magnet time before is -20 */
}

/* make the tag line stick on the bottom of the logo */
#topdescription {
  color: #aaaaaa;
  font-style:italic;
  font-size: 18px;
  font-family: DINWeb, Helvetica, Arial, sans-serif;
  width: 280px;
}

#top-middle {
  background-color: #ffffff;
  width: 22%;
  margin-right: 20px;
  float: left;
}

/* ------------- classes for header and module headers and sidebar box  ------------- */

/* For magLab homepage */

/* header with gradient background and white text */
.homeheader_dark h4 {
background: #4c4184; /* Old browsers */
background: -moz-linear-gradient(left, #4c4184 0%, #2f2466 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4184), color-stop(100%,#2f2466)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* IE10+ */
background: linear-gradient(to right, #4c4184 0%,#2f2466 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4184', endColorstr='#2f2466',GradientType=1 ); /* IE6-9 */
	font-size: 20px; 
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}


.homeheader_light h4 {
background: #106ea4; /* Old browsers */
background: -moz-linear-gradient(left,  #106ea4 0%, #7db9e8 0%, #207cca 0%, #0b4a79 100%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#106ea4), color-stop(0%,#7db9e8), color-stop(0%,#207cca), color-stop(100%,#0b4a79), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #106ea4 0%,#7db9e8 0%,#207cca 0%,#0b4a79 100%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #106ea4 0%,#7db9e8 0%,#207cca 0%,#0b4a79 100%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #106ea4 0%,#7db9e8 0%,#207cca 0%,#0b4a79 100%,#1e5799 100%); /* IE10+ */
background: linear-gradient(to right,  #106ea4 0%,#7db9e8 0%,#207cca 0%,#0b4a79 100%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#106ea4', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 */
	font-size: 20px; 
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}


/* ---------- violet gradient heading for left menu -----------*/
.homeheaderleftmenu_dark h4 {
background: #4c4184; /* Old browsers */
background: -moz-linear-gradient(left, #4c4184 0%, #2f2466 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4184), color-stop(100%,#2f2466)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4c4184 0%,#2f2466 100%); /* IE10+ */
background: linear-gradient(to right, #4c4184 0%,#2f2466 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4184', endColorstr='#2f2466',GradientType=1 ); /* IE6-9 */
	font-size: 20px; 
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}

/* ---------- gray gradient, bellow heading for module below left menu -----------*/
.homeheaderleftbelowmenu_dark h4 {
	background: #373737; /* Old browsers */
background: -moz-linear-gradient(left,  #373737 0%, #878787 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#373737), color-stop(100%,#878787)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #373737 0%,#878787 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #373737 0%,#878787 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #373737 0%,#878787 100%); /* IE10+ */
background: linear-gradient(to right,  #373737 0%,#878787 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#878787',GradientType=1 ); /* IE6-9 */

	font-size: 20px; 
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0px;
	margin-top: 20px;
}


.homeheaderleftbelowmenu_dark_notop h4 {
	background: #373737; /* Old browsers */
background: -moz-linear-gradient(left,  #373737 0%, #878787 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#373737), color-stop(100%,#878787)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #373737 0%,#878787 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #373737 0%,#878787 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #373737 0%,#878787 100%); /* IE10+ */
background: linear-gradient(to right,  #373737 0%,#878787 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#878787',GradientType=1 ); /* IE6-9 */

	font-size: 20px; 
	font-family: DINWebMedium, Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #ffffff;
	padding: 10px;
	margin-bottom: 0px;
	margin-top: 0px;
}



.sideboxwrapper {
	background-color: #ffffff;
	padding: 20px ;
	margin-bottom: 20px;
}

.sideboxsubheader {
	background-color: #ffffff;
	border-bottom: dotted 1px #878787;
	text-align: center;
	clear: both;
}

/* to make bullet indent start to the dot line add inside after square */
.sideboxwrapper ul {
	list-style: square ;
	margin-top: 0px;
	margin-left: 20px;
	color: #0088cc;
}

.sideboxwrapper ul li {
	border-bottom: dotted 1px #878787;
	padding: 6px;
}

.sideboxwrapper ul li:hover {
	color: #0b4a79;
}

/* this box is for safety and Resources section on home page - JuTabs */
.sideboxwrapper-no-ul {
	background-color: #ffffff;
	padding: 20px ;
	margin-bottom: 20px;
}

.sideboxwrapper-no-ul ul li {
	list-style: square;
	color: #0088cc;
}


@media (max-width: 1024px) { 

.sideboxwrapper-no-ul ul li {
    padding: 5px 0 8px 0;

}

}

.sideboxwrapper-no-ul ul li:hover {
	color: #0b4a79;
}


/* this box is for 404 error page */
.errorboxwrapper{
	background-color: #ffffff;
	padding: 20px ;
	margin-bottom: 20px;
}

.errorboxwrapper ul li {
	list-style: square;
	color: #000000;
		border-bottom: dotted 1px #878787;
	padding: 5px;
}

.errorboxwrapper ul li:hover {
	color: #0b4a79;
}


/* white background for module - no space on the top for below content position  */
.modulecontent {
  min-height:5px;  
  margin-top: -20px;
  margin-bottom:20px;
  background-color: #ffffff;
  padding: 10px;

}

/* white background for module  */
.modulesidebar{
  min-height:5px;  
  margin-top: 0px;
  margin-bottom:20px;
  background-color: #ffffff;
  padding: 10px;
	/*overflow: auto;*/
}


.modulesidebar li{
  line-height: 1.5;
}



/* white background for module  with image display inside module */
.modulesidebarwithimage{
  min-height:5px;  
  margin-top: 0px;
  margin-bottom:20px;
  background-color: #ffffff;
  padding: 10px;
   overflow: auto;
}



/* for search magnet module */
.moduleBackground {
  min-height:5px;  
  margin-top: 0px;
  margin-bottom:20px;
  background-color: #ffffff;
  padding: 10px;
}

.moduleBackgroundnobottom {
  min-height:5px;  
  margin-top: 20px;
  margin-bottom:0px;
  background-color: #ffffff;
  padding: 10px;
}

/* make title on module be a page title */
.moduleBackgroundnobottom h3{
      font-size: 3em;
    line-height: 1.05em;
    font-weight: bold;
}

/* for white background, no padding, module */
.modulewhiteBackground {
  min-height:5px;  
  margin: 0px;
  background-color: #ffffff;
  padding: 10px;
}



/* ---------- for MagLab Educators Club form  -----------*/

.sideboxwrappertop {
	background-color: #ffffff;
	padding: 20px ;
	margin-top: 10px;
}



.blueheading {
	color: #0088cc;
}

.research_title {
	font-size: 20px; 
	font-family: Georgia, serif;
	font-weight: bold;
}


.forindent {
	margin-left: 20px;
}


/* ----------------  for 3 columns - use this instead of span 3 -----------------  */
.leftcol {
	width: 29%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	border-right: dotted 1px #878787;
}


.middlecol {
	width: 29%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;	
	border-right: dotted 1px #878787;
}

.rightcol {
	width: 29%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .leftcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  }

  .middlecol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	border-right: none;
  	float: left;
  }

  .rightcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	float: left;
  }
}

/* ----------  FOR K2 ITEM -for 3 columns - use this instead of span 3 -------------  */
.leftcolk2 {
	width: 30.5%;
	float: left;
	padding-right: 2%;
	border-right: dotted 1px #878787;
}
.middlecolk2 {
	width: 30.5%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;	
	border-right: dotted 1px #878787;
}

.rightcolk2 {
	width: 30.5%;
	float: left;
	padding-left: 2%;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .leftcolk2 {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  }

  .middlecolk2 {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	border-right: none;
  	float: left;
  }

  .rightcolk2 {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	float: left;
  }
}

/* -------------  for 2 columns even - use this instead of span 4 --------------  */
.twoleftcol {
	width: 45%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	border-right: dotted 1px #878787;
	background-color: #ffffff;
}

.tworightcol {
	width: 45%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	background-color: #ffffff;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .twoleftcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  	background-color: #ffffff;
  }

  .tworightcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	padding-top: 5%;	
  	margin-top: 5%;	
  	float: left;
  	background-color: #ffffff;
  	border-top: dotted 1px #878787;
  }
}

/* --------  FOR K2 ITEM - for 2 columns even - use this instead of span 4 ---------  */
.twoleftcolk2 {
	width: 48%;
	float: left;
	padding-right: 2%;
	border-right: dotted 1px #878787;
	background-color: #ffffff;
}

.tworightcolk2 {
	width: 45%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	background-color: #ffffff;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .twoleftcolk2 {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  	background-color: #ffffff;
  }

  .tworightcolk2 {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	padding-top: 5%;
  	float: left;
  	background-color: #ffffff;
  	border-top: dotted 1px #878787;
  }
}

/* -----  for 2 columns big left and small small - use this instead of span 4 -------  */
.twobigleftcol {
	width: 60%;
	float: left;
	padding-right: 2%;
	border-right: dotted 1px #878787;
	background-color: #ffffff;
}

.twosmallrightcol {
	width: 33%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	background-color: #ffffff;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .twobigleftcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  	background-color: #ffffff;
  }

  .twosmallrightcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	float: left;
  	background-color: #ffffff;
  	border-top: dotted 1px #878787;
  	margin-top: 15px;
  }
}




/* -----  for 2 columns small left and big right  - use this instead of span 4 -----  */
.twosmallleftcol {
	width: 33%;
	float: left;
	padding-right: 2%;
	border-right: dotted 1px #878787;
	background-color: #ffffff;
}

.twobigrightcol {
	width: 60%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	background-color: #ffffff;
}

/* for less than 1200px  */
@media (max-width: 767px)  {
  .twosmallleftcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	border-right: none;
  	float: left;
  	background-color: #ffffff;
  }

  .twobigrightcol {
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;	
  	float: left;
  	background-color: #ffffff;
  	border-top: dotted 1px #878787;
  }
}




/* ---------- DIV box for staff key contact ---------- */
/* for 1200px and up */
.keycontactwrapper {
	background-color: #ffffff;
	padding: 20px;
	
	margin-bottom: 20px;
}

.keycontactwrapper h2{

	
	margin-top: 10px;
}

/* for less than 1200px  */
@media (max-width: 1024px) {
	.keycontactwrapper {
		background-color: #ffffff;
		padding: 10px;
	}
}



/* ---------- DIV box for multiple columns 0n homepage and other main page ---------- */
/* for 1200px and up */
.contentwrapper {
	background-color: #ffffff;
	/*padding: 15px 0px;*/
	padding-top: 15px;
	margin-bottom: 20px;
	overflow: auto;
}


/* for less than 1200px  */
@media (max-width: 1024px) {
	.contentwrapper {
		background-color: #ffffff;
		padding-top: 10px;
	}
}

/* Safety and video on  magLab homepage */

.splitwrapper .thumbnails ul li {
	margin-right: 50px;
}


/* ---------- for main facility page - how to apply section -----------*/

.contentwrapper ol {
	list-style-position:inside;
	margin-left: 0px;
}
.contentwrapper ol li {
	border-top: dotted 1px #878787;
	padding-bottom: 15px;
}

.contentwrapper ol li:first-child {
	border-top: none;
}

/* for less than 1200px  */
@media (max-width: 1024px)  {
	.contentwrapper {
		background-color: #ffffff;
		padding-top: 10px;
	}

	.contentwrapper .thumbnails>li {
		padding-right: 6px;
		margin-left: 6px;
		border-right: dotted 1px #878787;
	}

	.contentwrapper .thumbnails>li:first-child {
		margin-left: 10px;
		padding-right: 6px;
		border-right: dotted 1px #878787;
	}

	.contentwrapper .thumbnails>li:last-child {
		border-right: none;
	}
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.contentwrapper {
		background-color: #ffffff;
		padding-top: 10px;
	}

	.contentwrapper .thumbnails>li {
		padding-right: 6px;
		margin-left: 6px;
		border-right: dotted 1px #878787;
	}

	.contentwrapper .thumbnails>li:first-child {
		margin-left: 0px;
		padding-right: 6px;
		border-right: dotted 1px #878787;
	}

	.contentwrapper .thumbnails>li:last-child {
		border-right: none;
	}
}

/* DC Field How to apply */
/* for 1200px and up */
.orderwithdottedline ol {
	margin-left: 0px;
}

.orderwithdottedline>li {
	padding-right: 15px;
	margin-left: 15px;
	border-top: dotted 1px #878787;
}

.orderwithdottedline>li:first-child {
	border-top: none;
}

/* for less than 1200px  */
@media (max-width: 1024px)  {
	.orderwithdottedline {
		background-color: #ffffff;
		padding-top: 10px;
	}

	.orderwithdottedline .thumbnails>li {
		padding-right: 6px;
		margin-left: 6px;
		border-right: dotted 1px #878787;
	}

	.orderwithdottedline .thumbnails>li:first-child {
		margin-left: 27px;
		padding-right: 6px;
		border-right: dotted 1px #878787;
	}
}

/* ----------- for science highlight on facilities main page -----------*/

/* white background for module - no space on the top for below content position  */
.sciencehighlight {
  min-height:5px;  
  margin-top: -20px;
  /*margin-bottom:20px;*/
  background-color: #ffffff;
  padding: 0px;

}

/* white background for module - no space on the top for below content position  */
.sciencehighlightsidebar {
  min-height:5px;  
  margin-top: 0px;
  margin-bottom:20px;
  background-color: #ffffff;
  padding: 10px;

}

.nobullet li{
	list-style-type: none;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
	line-height: 1.4;
}

@media (max-width: 1024px) {
.nobullet li{

	line-height: 1.5;
}

}


.sciencehighlightIMG {
	clear: both;
}



/* ---------- for measurement technique page -----------*/
.rightforinfonoborder {
  width: 70%;
  float: left;
  padding: 10px;
}

.label a{
  cursor: pointer;
  color: #ffffff;
  padding: 10px;
}

/* ---------- Education section main page ---------- */
/* for 1200px and up */
.educationwrapper {
	background-color: #ffffff;
	padding-top: 15px;
}

.educationwrapper .thumbnails>li {

	padding-right: 4px;
	margin-left: 4px;
	border-right: dotted 1px #878787;
}

.educationwrapper .thumbnails>li:first-child {
	margin-left: 28px;
	padding-right: 4px;
	border-right: dotted 1px #878787;
}

.educationwrapper .thumbnails>li:last-child {
	border-right: none;
}

/* for less than 1200px  */
@media (max-width: 1024px)  {
	.educationwrapper {
		background-color: #ffffff;
		padding-top: 10px;
	}

	.educationwrapper .thumbnails>li {
		padding-right: 2px;
		margin-left: 2px;
		border-right: dotted 1px #878787;
	}

	.educationwrapper .thumbnails>li:first-child {
		margin-left: 8px;
		padding-right: 2px;
		border-right: dotted 1px #878787;
	}

	.educationwrapper .thumbnails>li:last-child {
		border-right: none;
	}
}

/* For columns that no dotted line */
/* for 1200px and up */
.wrappernodotteline {
	background-color: #ffffff;
	padding: 20px;
}

/* for less than 1200px  */
@media (max-width: 1024px)  {
	.wrappernodotteline {
		background-color: #ffffff;
		padding: 15px;
	}
}

/* ----------- for News and Events category -----------*/

.newscontainer {
	background: url('/images/news_events/grayBG_news.jpg') repeat;
	position: relative;
	margin: 30px 0px;
}

.imgcontainer {
	width: 100%;
	height: 100%;
	background-color: #2c3238;
	text-align: left;
}

/* put caption on right bottom on image */
.captiononwideIMG {
	background-color: rgba(40, 50, 56, 0.5);
	padding: 10px;
  right: 0px;
	bottom: 0px;
	position: absolute;
	color: #ffffff;
	/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC2c3238, endColorstr=#CC2c3238);  for IE 6/7 */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC2c3238, endColorstr=#CC2c3238)";  for IE8 */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

  .captiononwideIMG {
  	display:none;
  }
}

/* Samsung portrait  ----------- */
@media only screen 
and (max-device-width : 360px) {
  .captiononwideIMG {
  	display:none;
  }
}


/* ---------- for MagLab Dictionary audio -----------*/

.audioDiv {
background-color: #424242;
display: inline-block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; /* future proofing */
-khtml-border-radius: 4px; /* for old Konqueror browsers */
width: 100%;
margin: 20px 0px;
}

.audioDiv > audio {
display: inline-block;
width: 100%;
}

.audioDiv > label {
display: inline-block;
float: none;
margin-top: 0px;
color: white;
padding-top: 1%;
padding-bottom: 2px;
padding-right: 6px;
padding-left: 5px;
height: auto;
}

.part {
  clear: right;
  margin-top: -10px;
}

@media (max-width: 480px) {
  .part {
    clear: both;
  }
}

@media (max-width: 478px) {
  .audioDiv > label {
    display: none;
  }

 .audioDiv {
    width: 275px !important;
 }

 .audioDiv > audio {
    width: 275px !important;
 }
}



/* ---------- for primary nav bar -----------*/

/* for regular size  min 1200 px */

/* dark gray bar */
.navbar-inner {
  background-color: #373737;
  background-image: none !important;
  background-repeat: repeat-x;
  border: 0px solid #D4D4D4;
  border-radius: 0px 0px 0px 0px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.067);
  min-height: 40px;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 20px;

}

/* solid white line on the right */
.navbar .nav li {
	padding-top: 4px !important;
	line-height: inherit;
	border-right: solid 3px #dedede;
}

/* NO solid white line for last link */
.navbar .nav li:last-child {
	border-right: none;
}

.navbar .nav > li > a {
  color: #ffffff;
  float: none;
  padding: 10px;
  text-decoration: none;
  text-shadow: 0 0px 0 #FFFFFF;
  font-family: DINWeb, Helvetica, Arial, serif; 
  font-size: 15px;  
  text-transform: uppercase;  
}

.navbar .nav > li > a:hover {
	color: #aaaaaa;
	cursor:pointer;
}

/* base for drop down menu */
.dropdown-menu .sub-menu {
	left: 100%;
	position: absolute;
	top: 0;
	visibility: hidden;
	margin-top: -1px;
}

/* make the caret on the nav bar to be white */
.navbar .nav li.dropdown .dropdown-toggle .caret,
.navbar .nav li.dropdown.open .caret {
  border-top-color: white;
  border-bottom-color: white;
}

/* make the caret on the nav bar to be white on active page*/
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: white;
  border-bottom-color: white;
}

/* make the caret on the nav bar to be white when mouse hover - default is dark color */
.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret {
  border-top-color: white;
  border-bottom-color: white;
}

/* keep same background color when on active page but change color to light grey - this is for menu that has sub menu */
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:#aaaaaa;
  background-color:#373737; 
}

/* change background color to blue when on active page - this is for menu that does not has sub menu */
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
  color: #aaaaaa;
  text-decoration: none;
  background-color: #373737;
 /* background-color: #0077d8;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.125) inset;*/
}

.dropdown-menu li > span:hover, .dropdown-menu .active > span {
	/*background-color: #0077d8;
	background-image: -moz-linear-gradient(center top , #0077d8, #0077d8);*/
	background-repeat: repeat-x;
	color: #FFFFFF;
	outline: 0 none;
	text-decoration: none;
}

.dropdown-menu a, .dropdown-menu span.separator {
	clear: both;
	display: block;
	font-weight: normal;
	line-height: 18px;
	padding: 3px 15px;
	white-space: nowrap;
}

/* make drop down display */
.dropdown-menu li:hover > .sub-menu {
	visibility: visible;
	z-index: 99;
}

/* base for sub menu */
.dropdown:hover > .dropdown-menu {
	display: block;
  background-color: #dcdcdc;
  /*border-top: 8px solid rgb(0, 119, 216);*/
  border-top: 8px solid rgb(76, 65, 132);
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  border-radius: 0px 0px 0px 0px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);	
}

/* NO white border on the right for sub menu */
.dropdown .dropdown-menu li {
	border-right: none;
	font-family: DINWebMedium, Helvetica, Arial, serif;
	font-size: 16px; 	
}

/* make text color on drop down sub menu to #5e5e5e */
.dropdown .dropdown-menu li a {
	color: #5e5e5e;
}

/* when mouse over, change text color on drop down sub menu to #0077d8 */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
  color: #0077d8;
  text-decoration: none;
  background-color: transparent;
  /* make no background color when mouse hover on IE 9*/
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
  background-image: none;
  background-repeat: no-repeat;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
	margin-top: 0;
}

.navbar .sub-menu:before {
	border-bottom: 7px solid transparent;
	border-left: none;
	border-right: 7px solid rgba(0, 0, 0, 0.2);
	border-top: 7px solid transparent;
	left: -7px;
	top: 10px;
}

.navbar .sub-menu:after {
	border-top: 6px solid transparent;
	border-left: none;
	border-right: 6px solid #fff;
	border-bottom: 6px solid transparent;
	left: 10px;
	top: 11px;
	left: -6px;
}

.navbar a.dropdown-toggle i {
	height: 100%;
	line-height: 100%;
	vertical-align: baseline;
}

.nav > li > span.separator {
	display: block;
	cursor: default;
}

.navbar .nav > li > span.separator {
	color: #555555;
	float: none;
	padding: 10px 15px;
	text-decoration: none;
	text-shadow: 0 1px 0 #FFFFFF;
}


.navbar .nav > .active > span.separator, .navbar .nav > .active > span.separator:hover, .navbar .nav > .active > span.separator:focus {
	background-color: #E5E5E5;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
	color: #555555;
	text-decoration: none;
}
.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
	color: white;
}

@media (max-width: 980px)  {

/* no white right border when me nu collapse */
.navbar .nav > li {
  border-right: 0px solid #ffffff;

}

/* when collapse, display only parent of menu item, no drop down menu display*/
.navbar .nav-collapse .dropdown-menu li {
  display: none;
}

/* base for sub menu - no blue thick border on the top */
.dropdown:hover > .dropdown-menu {
	display: none;
    
}

}


/* ---------- end primary nav bar -----------*/




/* ---------- for IMG and caption ----------- */

img { 
  outline: 0; 
  max-width: 100%; 
  height: auto; 
  /*padding-bottom: 20px;*/
}

img.floatright { 
    float: right; 
    margin-left: 15px;   
}

img.floatleft { 
    float: left; 
    margin-left: 0px; 
    margin-right: 10px;   
}

img.waystolearn { 
    padding: 8px;  
}

/* to center image */
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

img.galleryborder
  {
  /*margin-top: 10px;*/
  border: 1px solid #cccccc;
  padding: 2px;
  }

img.ascthumbnails { 
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');  
}

div.figureright {
  float: right;
  border: thin #eeeeee solid;
  margin: 0.5em;
  padding: 0.5em;
}

div.figureright p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  background-color: #eeeeee;
}

/* to center image */
.centerdisplayed {
    width: 100%;  
   display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto; 

}

.centerdisplayed img{
    display: block;
  margin: 0 auto;
vertical-align: middle;


}

.img_caption {
padding: 15px;
}

/* Image Captions */
.graycap {
  color: gray !important;
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
}

.centercap {
  text-align: center;
  line-height: 1.5 !important;
  font-size: small !important;
}

.leftcap {
  text-align: left;
}

.rightcap {
  text-align: right;
}

.linkcap {
  color: gray !important;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  font-size: xx-small;
}


/* -------------- for all responsive tables  -------------- */
/* make ASC Terms and definitions responsive */


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  
table.ascterms-table, 
.ascterms-table thead, 
.ascterms-table tbody,
.ascterms-table tr, 
.ascterms-table th, 
.ascterms-table td{
    display: block;
}
  
/* Hide table headers (but not display: none;, for accessibility) */
.ascterms-table thead tr{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
  
.ascterms-table tr { 
   border: 1px solid #ccc; 
}
	
.ascterms-table td { 
	/* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee; 
   position: relative;
   padding-left: 50%; 
}
	
.ascterms-table td:before { 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 10px; 
	white-space: nowrap;
}
	
/* Label the data */
.ascterms-table	td:nth-of-type(1):before { content: "Symbols"; }
.ascterms-table	td:nth-of-type(2):before { content: "Terms"; }
.ascterms-table	td:nth-of-type(3):before { content: "Units"; }
.ascterms-table	td:nth-of-type(4):before { content: "Definitions"; }

 
  
}



/*----------- Steve Hill sub manu, if it is on the bottom, it won't work ---------------*/

#affiliated-nav {
	width: 100%;
	min-height: 40px;
	margin: 0px;
	padding: 0px;
	background-color: #373737; 
}


#affiliated-nav ul{
  list-style-type: none;
  overflow: hidden;
  background-color: #4c4184;
}

#affiliated-nav ul li{
  float: left;
  display: inline;
  padding: 10px;
  border-right: 1px solid #cdcdcd;

}


#affiliated-nav ul li:last-child{
  border-right: none;
}



#affiliated-nav li a {
  /*display: inline-block;*/
  color: #f2f2f2;
  text-align: center;
  /*padding: 10px;*/
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  cursor: pointer;
}



#affiliated-nav ul li:hover {
   background-color: #53565a;
}

@media screen and (max-width:640px) {

#affiliated-nav ul li{
  display: block;
  width: 100%;
   border-top: 1px solid #cdcdcd;
}

#affiliated-nav ul li:first-child{
  border-top: 1px solid #4c4184;
}

}



/* -------------- top toolbar and primary nav bar - Jonathan  -------------- */

/* Request Magnet Time button */
@media (max-width: 979px) {
  #reqBtn {
    margin-top: 6px;
  }

   #main-content {
    position: relative;
    bottom: 15px;
  }
}

@media (max-width: 980px) {

  #reqBtn.btn {
    padding: 1px 3px !important;
    margin-top: 10px !important;

  }

}

@media (min-width: 979px) {
  #reqBtn {
    margin-top: 14px;
  }
}

@media (max-width: 767px) {
   #reqBtn.btn {
	margin-left: 18px;   
   }
}



/* Search Box */
#mod-search-searchword {
  -webkit-border-radius: 15px 0px 0px 15px;
  -moz-border-radius: 15px 0px 0px 15px;
  border-radius: 15px 0px 0px 15px;
  width: 199px;
}

/*Search Icon*/
#searchButtonA {
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
}

/*Search Icon, make background to dark grey*/
.navbar-inverse .btn-navbar {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #252525;
background-image: -moz-linear-gradient(top,#252525,#252525);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#252525),to(#252525));
background-image: -webkit-linear-gradient(top,#252525,#252525);
background-image: -o-linear-gradient(top,#252525,#252525);
background-image: linear-gradient(to bottom,#252525,#252525);
background-repeat: repeat-x;
border-color: #252525 #252525 #252525;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff252525',endColorstr='#ff252525',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.navbar-inverse .btn-navbar:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #252525;
background-image: -moz-linear-gradient(top,#252525,#252525);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#252525),to(#252525));
background-image: -webkit-linear-gradient(top,#252525,#252525);
background-image: -o-linear-gradient(top,#252525,#252525);
background-image: linear-gradient(to bottom,#252525,#252525);
background-repeat: repeat-x;
border-color: #252525 #252525 #252525;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff252525',endColorstr='#ff252525',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

/*Hamburger Button- Main Nav*/
#mainNavBtn {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: transparent;
  margin-top: 3px;
}

@media (min-width: 980px) {
  #mobMenuTitle {
    display: none;
  }

   #mobMenuTitle2 {
    display: none;
  }

  #header {
    margin-top: -19px;
  }

  #submenu {
    display: none;
  }

  .navbar-inner > table {
    margin-top: -2px !important;
  }

  .navbar .nav {
    width: 1170px;
  }
 
  nav#menu .navbar-inner {
    background-color: transparent !important;
  }
}

.wrapper-submenu .navbar-inner {
  background: -webkit-linear-gradient(left, #0b4a79 , #106ea4) !important;
  background: -o-linear-gradient(right, #0b4a79, #106ea4) !important;
  background: -moz-linear-gradient(right, #0b4a79, #106ea4) !important;
  background: linear-gradient(to right, #0b4a79 , #106ea4) !important;
}

/*caret icon in main menu*/
.icon-caret-right {
	margin-left: 3px !important;
}

.caret {
  margin-left: 4px !important;
}

.wrapper-submenu {
  position: relative;
  bottom: 13px;
}

nav#menu .menu {
  background-color: #373737;
}

@media (max-width: 1200px) {
  .navbar .nav > li {
    padding: 0 6px 0 5px;
  }

  .navbar .nav > li > a {
    font-size: 11px !important;
  }

  nav#menu .menu {
    width: 940px !important;
  }
}

@media (max-width: 980px) {
  #mobMenuTitle {
    padding-left: 10px !important;
  }

  #mobMenuTitle2 {
    padding-left: 10px !important;
  }

  .navbar .nav {
    margin: 0 10px 0 0px !important;
/*     width: 1170px !important; */
  }
  .caret {
    display: none !important;
  }

  #reqBtn.btn {
    padding: 1px 3px !important;
    margin-top: 10px !important;

  }

  nav#menu > div.navbar-inner {
    background-color: #373737 !important;
  }
}


 .navbar .nav {
    margin: 0 0 0 0 !important;
 }
 
@media (min-width: 1200px){ .rocket { width: 310px !important; }}

@media (max-width: 1199px){ .rocket { width: 250px !important; }}


/* make primary nav bar stick underneath toolbar */

#menuNav.affix {
    position: fixed;
    top: 55px;
    width: 100%;
    z-index: 999;

}

/* make main menu no follow on iPda portrait and mobile try 979 , 783 work
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
#menuNav.affix {
        position: static;
    }

}
*/

@media 
only screen and (max-width: 979px),
(min-device-width: 768px) and (max-device-width: 1024px) {
#menuNav.affix {
        position: static;
    }

}



/* -------- h4 hijack - do not know where Jonathan use this code-------- */
h4 {
  font-size: 21px !important;
  font-family: DINWebMedium, Helvetica, Arial, sans-serif !important;
}

/*hide Magnet Academy rotater*/
div#nextend-smart-slider-5 {
  display: none;
}




/* --------------- Layout Fixes 3-19 - Matt -------------- */

@media (max-width: 767px) {
	div.itemToolbar {
/* 		display: none; */
	}
	
	div.itemBody {
	padding-top: 0;
	}
}

@media (max-width: 979px) and (min-width: 768px) {
#main {
/*   	width: inherit; */
}
}



/* ----------- make toolbar search table responsive -  cannot move to line 3082, it will mess up primary nav bar ---------------*/
@media 
only screen and (max-width: 360px),
(min-device-width: 320px) and (max-device-width: 360px)  {

  
table.toolbarsearch-table, 
.toolbarsearch-table thead, 
.toolbarsearch-table tbody,
.toolbarsearch-table tr, 
.toolbarsearch-table th, 
.toolbarsearch-table td{
    display: block;
    padding: 3px;
}

/*----------- make ASC image gallery table responsive ---------------*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  
table.ascgallery-table, 
.ascgallery-table thead, 
.ascgallery-table tbody,
.ascgallery-table tr, 
.ascgallery-table th, 
.ascgallery-table td{
    display: block;

}
  
/* Hide table headers (but not display: none;, for accessibility) */
.ascgallery-table thead tr{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
  
.ascgallery-table tr { 
   border: 1px solid #ccc; 
}
	
.ascgallery-table td { 
	/* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee; 
   position: relative;
/*    padding-left: 25%;  */
}
	
.ascgallery-table td:before { 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
/* 	width: 45%;  */
	padding-right: 10px; 
	white-space: nowrap;

}
	
/* Label heading of that table 
.ascgallery-table	td:nth-of-type(1):before { content: "Thumbnail View"; }
.ascgallery-table	td:nth-of-type(2):before { content: "Image Link"; }
.ascgallery-table	td:nth-of-type(3):before { content: "Description"; }
*/

}