/* 51ÉçÇøºÚÁÏDEPARTMENT OF CHEMISTRY STYLE SHEET */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */


/* BASIC CHARACTER STYLES */
/* ------------------------------------------- */

h1{
  color: #333;
}

h1 i, h1 em{
  font-family: "DINWebItalic", sans-serif;
}

.title h1{
  text-transform: uppercase;
}

h2{
  font-size: 1.625em;
  color: #333;
}

.section-heading-red h3{
  font-family: "DINWebMedium", sans-serif;
  background: #A6192E;
  color: white;
  margin-bottom: 0;
  padding: 0.4em 1em 0.2em 1em;
}

h4{
  line-height: 1.75em;
}


/* NEW CLASSES */
/* -----------------------  */

/* --- view-more: centers + italicizes text between a dotted grey line ---  */

.view-more p{
    position: relative;
    text-align: center;
}

.view-more p:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dotted #888;
    margin-top: 0.8em;
}

.view-more a{
    font-style: italic;
    position: relative;
    z-index: 2;
    padding: 0 1em; 
    background-color: #FFF;
}

/* --- mini-profile: for stand-alone contact info (text & image component) --- */

.mini-profile .image{
  width: 35%;
  margin-bottom: 2%;
}

.mini-profile .text h3{
  padding-top: 2%;
  margin-bottom: 0;
  font-family: "DINWebMedium", sans-serif;
  font-size: 1.3125em;
  line-height: 1.125em;
  text-transform: uppercase;
  color: #333;
}

.mini-profile .text h4{
  padding-bottom: 0.5em;
  margin-top: 0.5em;
}

/* --- center-image: centers images --- */

img.center-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- dottedTable: separates lines in a table using dotted lines --- */

.dottedTable{
  border-collapse: collapse;
}

.dottedTable th{
  border-bottom: 1px solid #333;
  padding: 0 1em;
}

.dottedTable td{
  border-bottom: 1px dashed #888;
  padding: 1em;
}

/* --- red-line-above: puts a solid red line above or below a text/image box --- */

.red-line-above{
  border-top: 8px solid #A6192E;
}

/* --- DIN-list: list style using DIN font and solid ruled lines --- */

.DIN-list ul{
  font-family: "DINWeb", sans-serif;
  margin: 0;
  padding: 0;
  border-left: none;
  list-style-type: none;
  margin-bottom: 2%;
}

.DIN-list ul li{
  padding: 10px 6px 10px 0;
  border-bottom: 1px solid #DDD;
  background-image: none;
}

/* --- shaded-list: list style with light grey background and solid ruled lines ---  */ 

.shaded-list ul li{
  background: #F7F7F7;
  border-bottom: 1px solid #CCC;
  padding: 0.5em;
}


/* OVERLAY STYLES */
/* --------------------------- */

div.overlay, div.overlay-bg { 
  margin-bottom: 2%; 
}

div.overlay .text, div.overlay-bg .text{
  bottom: 0;
  padding: 1.25em 1.5em;
  position: absolute;
  color: #FFF;
  text-shadow: 1px 1px 3px #000000;
}

/* different padding for overlay-bg */
div .overlay-bg .text{
  padding: 2% 0;
}

/* set properties h1 and p */
div.overlay .text h1, div.overlay-bg .text h1,  
div.overlay .text p, div.overlay-bg .text p {
  font-family: "DINWebBold";
  font-size: 2em;
  line-height: 1.1em;
  margin-bottom: 0;
  color: #FFF;
} 

div.overlay .text h1 i, div.overlay-bg .text h1 i,
div.overlay-bg p a, div.overlay-bg h1 a{
  color: #FFF;
}

/* add a background and modify margin / padding */
div.overlay-bg h1, div.overlay-bg p{
  padding: 0.5em 0.5em 0.3em 1.25em;
  background: rgba(0,0,0,0.6);
}

/* set column overlay padding */
div.cq-colctrl-lt0 .overlay .text, 
div.cq-colctrl-lt4 .overlay .text, 
div.cq-colctrl-lt5 .overlay .text, 
div.cq-colctrl-lt2 .overlay .text, 
div.cq-colctrl-lt8 .overlay .text { 
  padding: 0 1em; }

/* 2 column overlay */
div.cq-colctrl-lt0 .overlay .text h1, div.cq-colctrl-lt0 .overlay-bg .text h1,
div.cq-colctrl-lt0 .overlay .text p, div.cq-colctrl-lt0 .overlay-bg .text p  {
  font-family: "DINWebMedium";
  font-size: 1.75em;
  line-height: 1em;
  margin-bottom: 15px;
}

div.cq-colctrl-lt0 .overlay-bg .text h1, 
div.cq-colctrl-lt0 .overlay-bg .text p {
  font-size: 1.375em;
  margin-bottom: 0;
}

/* 2 column 33%/67% overlay */
/* 2 column 67%/33% overlay */
div.cq-colctrl-lt4 .overlay .text h1,
div.cq-colctrl-lt5 .overlay .text h1,
div.cq-colctrl-lt4 .overlay .text p,
div.cq-colctrl-lt5 .overlay .text p{
  font-family: "DINWebMedium";
  font-size: 1.375em;
  line-height: 1em;
  margin-bottom: 10px;
}

/* 3 column overlay */
div.cq-colctrl-lt2 .overlay .text h1, div.cq-colctrl-lt2 .overlay-bg .text h1,
div.cq-colctrl-lt2 .overlay .text p, div.cq-colctrl-lt2 .overlay-bg .text p{
  font-family: "DINWebMedium";
  font-size: 1.375em;
  line-height: 1em;
  margin-bottom: 10px;
}

/* 3 col overlay-bg margin */
div.cq-colctrl-lt2 .overlay-bg .text h1,
div.cq-colctrl-lt2 .overlay-bg .text p{
    margin-bottom: 0;
}

/* pull quote image style */
.textimage .pull-quote-image {
    background-color: #3d3935;
    height: 15em;
    overflow: hidden;
}

.textimage .pull-quote-image .text {
    font-size:1.8em;
    line-height:1.2em;
    background-color: transparent;
    padding: 0% 4% 2% 6%;
}

.textimage .pull-quote-image .text p{
  color: #FFF;
}

.textimage .pull-quote-image .image {
  width: 50%;
  padding-bottom: .9em;
  background-color: #fff;
}

.newsComments{
  display: none;
}


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

/* >>> smaller than typical 13" display */
@media (max-width: 1200px){
  .textimage .pull-quote-image {
    height: auto;
    overflow: visible;
   }

  .textimage .pull-quote-image .image {
    width: 100%;
    height: 16em;
    overflow: hidden;
    border: none;
    float: none;
    padding-bottom: 0em;
    background-color: transparent;
  }

  .textimage .pull-quote-image .text {
    padding-top: 0%;
    padding-bottom: 1%;
  }
}

/* >>> iPad landscape and smaller */
@media (max-width: 1024px){
  .col-clear2 .cq-colctrl-lt0-c0,
  .col-clear2 .cq-colctrl-lt0-c1{
    width: 100%;
  }

  .col-clear67-33 .cq-colctrl-lt5-c0, .col-clear67-33 .cq-colctrl-lt5-c1{
    width: 100%;
  }

  .SSbox h1{
    font-size: 1.25em;
  }

  div.mini-profile .image{
    float: none;
    width: 60%;
    margin-bottom: 2%;
  }

  /* 3 column overlay-bg style */
  div.cq-colctrl-lt2 .overlay-bg .text h1,
  div.cq-colctrl-lt2 .overlay-bg .text p{
    font-family: "DINWebMedium";
    font-size: 1.3125em;
    line-height: 1em;
    margin-bottom: 3px;
    letter-spacing: 0;
    padding: 0.5em 1em 0.25em 1em;
  }

  div.cq-colctrl-lt2 .overlay-bg .text{
    margin-bottom: 0;
  }
}

@media (max-width: 980px){
 .box-dashed-right{
    border-right: none;
    border-bottom: 1px dashed #FFF;
    padding-bottom: 1.5em;
  }
}


/* >>> Nexus 7 to iPad portrait*/
@media (min-width: 600px) and (max-width: 768px){
  div.cq-colctrl-lt0 .overlay-bg .text h1,
  div.cq-colctrl-lt0 .overlay-bg .text p{
      padding: 0.3em 0.5em 0.1em 0.75em;
  }

  div.cq-colctrl-lt2 .overlay-bg .text h1,
  div.cq-colctrl-lt2 .overlay-bg .text p{
      padding: 0.3em 1.4em 0.1em 1.5em;
  }

  div.cq-colctrl-lt2-c0{
    width: 33%;
  }

  div.cq-colctrl-lt2-c1{
    width: 33%;
  }

  div.cq-colctrl-lt2-c2{
    clear: none;
    width: 33%;
  }
}

/* >>> iPhone to Small tablet (nexus 7 2012) */
@media (min-width: 320px) and (max-width:601px){
  .section-heading-block h2{
    display: block;
  }

  div.overlay .text{
    padding: 0.5em 0.125em;
  }

  div.mini-profile .image{
    float: none;
    width: 100%;
    margin-bottom: 2%;
  }

  div.overlay .text h1, div.overlay-bg .text h1,
  div.overlay .text p, div.overlay-bg .text p{
    font-family: "DINWebMedium";
    font-size: 1.625em;
    letter-spacing: -0.05em;
    line-height: 1em;
    padding: 0.3em 0.5em 0.1em 0.75em;
  }

/* move banner title to the bottom of image for better legibility */
  div.overlay-bg.banner .text{
    position: inherit;
  }

  div.overlay-bg.banner .text h1{
    background: #333;
    padding: 1em 1em 0.2em 1em;
  }
 }