/*   Font for the complete page */  margin-left: 50px;
  margin-right: 50px;

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600);
body { font-family: "Open Sans", sans-serif; }


/*---------------------- Defaults for the complete site -----------------------*/
@media screen and (max-width:454px) {
a.navbar-brand {
  width:100%;
  margin-bottom: 0px !important;
  font-size: 20px !important;
}

.parent-name {
  padding-left: 15px;
  font-size: 10px;
}

}

div.node-page { padding-left: 15px; }


/*  Footer  */
@media screen and (max-width: 1199px) {
.footer { padding-bottom: 50px !important; }
}

@media screen and (max-width: 767px) {
#contact-university {
  width:100%;
  padding-left: 0px !important;
}

#contact-local {
  width:100%;
  padding-left: 60px;
  margin: 0px !important;
}

}


/* Default Page H1s - except for front page */
h1.page-header {
  padding: 5px 15px 5px 15px;
  font-weight: 400;
  font-size: 25px;
}

@media screen and (max-width:480px) {
h1.page-header {
  padding: 5px,15px !important;
  font-size: 20px !important;
}

}

@media screen and (min-width:481px) and (max-width:767px) {
h1.page-header {
    padding: 5px,15px !important;
    font-size: 22px !important;
}

}


/* Colors used on the page  */

.sfsu-purple { color: #231161 !important; }

.sfsu-purple-background { background-color: #231161 !important; }

.sfsu-purple:hover, .sfsu-purple:focus { color: #231161 !important; }

.sfsu-yellow { color: #FFDC70 !important; }

.sfsu-yellow-background { background-color: #FFDC70 !important; }

.news-grey-text { color: #575757 !important; }

.news-grey-text:hover { color: #575757 !important; }

.sfsu-grey-dark { color: #1C1C1C !important; }

.sfsu-grey-dark:hover, .sfsu-grey-dark:focus { color: #1C1C1C !important; }

.news-background-grey {background-color: #CFCFCF !important; } 

.sfsu-white { color: #ffffff !important; }

.sfsu-white-background { background-color: #FFFFFF !important; }

.sfsu-white:hover, .sfsu-white:focus { color: #ffffff !important; }

.sfsu-black { color: #000000 !important; }

.sfsu-black:hover, .sfsu-black:focus { color: #000000 !important; }

.news-brown { color: #886600; } 

/* to keep social media text from overflowing the page */
div#main { overflow: hidden; }

/* for Font Awesome  */
#main .fa-inverse { color: #ffffff; }

.navbar-brand > span { color: #BDBDBD; }

/*  Settings for the whole content part. inc: image block, get social block,  */
#main section[role="main"]  {
  padding: 0px;
  border-left: none;
  border-right: none;
}

/* For captions */
p.caption { font-size: 75% !important; }

/* For captions, centered */
p.caption-centered { font-size: 75% !important;
        text-align: center;  }

/* -------------------- CSS for Top Navigation Bar ---------------------- */
/*---------------------- pull-center changed from width:280px to width:160px to remove snapchat, linkedin and pinterest icons -----------------------*/
.pull-center {
  width:160px;
  margin-right:auto;
  margin-left:auto;
}

.menubar > div > div.container { padding:0px; }

.nav { height:50px; }

.nav > li.last-leaf { height:50px; }

#nav-menu .nav > li { display:inline-block; }

#nav-menu .nav > li > a {
  color:#000;
  padding: 15px;
}

#nav-menu .nav > li > a:hover {
  color:#ffffff;
  background-color: #231161;
  height:50px;
  }

//

#header-icons { height:50px; }

#header-icons a {
  display:block;
  float:left;
  height:50px;
  color:#1C001C;
  text-align:center;
}

#header-icons .fa { line-height:50px; }

span.parent-name > a.text-muted { text-decoration: none; }

/* Media Queries */

@media all {
div.left-menu {
  padding-left: 0px;
  padding-right: 0px;
}
}

@media (max-width: 700px) {
#nav-menu .nav > li {
  display: block;
  width:100%;
  height: 25px;
  text-align:center;
}

#nav-menu .nav > li.first-leaf {
    margin-top:5px;
    height: 25px;
}

#nav-menu .nav > li > a  { padding: 4px; }

#nav-menu .nav > li > a:hover { height: 25px; }

.nav { height:auto;
}
}

@media screen and (min-width: 701px) and (max-width: 991px) {
ul.nav { text-align: center; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
.right-icons { clear:both; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
div.right-icons { padding-left: 0px; }
}


/* --------------------- CSS for Trending Blocks ------------------------ */

.trend-container {
    text-align:left;    
    height:365px;
}

h2.trend-h2 { padding: 0px 0px 10px 0px !important; } 

.trend-category {
    background-color:#4d4d4d;
    height:30px;
}

h3.category-h3 {
     color:white;
     font-size: 16px;
     text-align: center;
     padding:7px 0px 0px 0px !important;
}

.trend-img img { width: 100% !important; }

.trend-headline { padding:8px; }

.trend-headline a { 
    font-size:15px;
    color: #333333;
    font-weight:900;
}

.trend-headline a:hover { color: #333333; }

.trend-subhead {
    padding:8px;
    font-size: 12px;
}

.trend-subhead a { color: #575757; }

.trend-subhead a:hover { color: #575757; }

.trend-pull-quote {
     text-align:left;
     height:365px;
}

.pull-quote-heading {
    font-weight: bold;
    padding: 7px 15px 0px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -.2px;
}

.pull-quote-text {
    font-style: italic;
    letter-spacing: .10px;
    padding: 0px 15px;
}

.pull-quote-more {
    font-size: 12px;
    padding: 5px 15px;
}

@media screen and (max-width: 279px) {
.pull-quote-heading { font-size: 15px !important; }
}

.quicklinks-category h2 { margin-top:5px; }

.quicklinks-category { padding-left: 7px; }

.quicklinks-container { height:360px; }

.quicklinks-content a {
    font-weight: 500;
    font-size: 14px;
}



/* Media Queries */

@media screen and (min-width:400px) and (max-width:500px) {
.trend-container { height:400px; }
}

@media screen and (min-width:501px) and (max-width:600px) {
.trend-container { height:460px; }
}

@media screen and (min-width:601px) and (max-width:675px) {
.trend-container { height:530px; }
}

@media screen and (min-width:676px) and (max-width:729px) {
.trend-container { height:550px; }
}

@media screen and (min-width:730px) and (max-width:767px) {
.trend-container { height:570px; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
h2.trend-h2, h2.block-title { font-size:18px !important; }
}

@media screen and (max-width:1199px) {
  h2.trend-h2 { padding: 15px 0px 10px 0px !important; }
}

@media screen and (min-width:992px) and (max-width:1199px) {
h2.trend-h2 {
    padding: 15px 0px 10px 0px !important;
}    
}

@media screen and (min-width:310px) and (max-width:767px) {
.trend-pull-quote { height:320px; }
}




/* ------------------------------------------  SOCIAL MEDIA BLOCK ----------------------------------------------- */

.get-social h2 {
    font-weight: bold;
    font-size: 55px;
    padding-top: 20px;
}

/*Common CSS for Twitter, Instagram and Facebook*/
.twitter, .facebook, .instagram { background-size: contain; }
/* ===== Media Queries ==== */
@media screen and (min-width: 768px) and (max-width: 991px) {
.twitter, .instagram { height: 420px; }
}

@media screen and (min-width:992px) and (max-width:1199px) {
.facebook, .twitter, .instagram { height: 580px; }
}

@media screen and (min-width: 1200px) {
.facebook, .twitter, .instagram { height:450px; }
}


/* only for TWITTER*/
.twitter a { color: #1C1C1C; }

/* only for FACEBOOK */
.facebook img {
    border: 3px solid #FFFFFF;
    box-shadow: 1px 1px 5px #231F20;
    margin-bottom: 1em;
    margin-left: 0.5em;
    max-width: 125px;
}

/* only for INSTAGRAM*/
.instagram a { color: #231161; }

.instagram strong { color: #231161; }

.instagram img {
    border: 3px solid #FFFFFF;
    box-shadow: 1px 1px 5px #231F20;
    max-width: 125px;
}

.instagram-img  a img:hover {
    -webkit-transform: scale(1.25);-moz-transform: scale(1.25);-ms-transform: scale(1.25);-o-transform: scale(1.25);transform: scale(1.25);
}

.instagram  ul.instagram-img li:nth-child(1) img:hover {
    -webkit-transform: scale(1.5);-moz-transform: scale(1.5);-ms-transform: scale(1.5);-o-transform: scale

(1.5);transform: scale(1.5);
}

.instagram  ul.instagram-img li:nth-child(1) img {
    height: 90px;
    margin-left: 30px;
}
.instagram ul.instagram-img li:nth-child(4) img {
    height: 90px;
    float: left;
    margin-top: -30px;
}

.instagram  ul.instagram-img li:nth-child(7) img {
    height: 90px;
    float: left;
}

.instagram  ul.instagram-img li:nth-child(6n-4) img, .instagram ul.instagram-img li:nth-child(3n+3) img {
    height: 60px;
    float: left;
}

.instagram  ul.instagram-img li:nth-child(9n-4) img { height: 60px; }

/* MEDIA QUERYS for HORIZONTAL view on TABLETS upto 14" Laptops/Screens */
@media screen and (min-width:992px) and (max-width:1199px) {
.instagram ul.instagram-img li:nth-child(4) img {
    height: 90px;
    float: left;
    margin-top: -33px;
}
.instagram  ul.instagram-img li:nth-child(6n-4) img, .instagram ul.instagram-img li:nth-child(3n+3) img {
    height: 57px;
    float: left;
}
.instagram  ul.instagram-img li:nth-child(9n-4) img { height: 57px; }
}




/* ----- CSS for web forms and clips ----- */

div.node-webform { padding-left: 15px; }
.node-clip { padding: 5px 15px; }



/* ------- CSS for Faculty Experts Page ------- */

.view-faculty-experts { padding: 0px 0px 0px 15px; }
/* ------- div.view-faculty-experts > div.view-content > div.even { padding: 0px !important; } ------- */
#node-8009 { padding-left: 15px; }
div.node-faculty-expert { padding: 5px 15px; }

.expert-container {
	border: 1px solid #999;
    border-radius: 8px;
    padding: 0px 24px !important;
    margin: 24px 0 !important;
	}
	
.expert-container.even {
    background-color: #f5f5f5;
}

.expert-container .img-responsive {
	padding: 24px 0px;
}


/* ------- CSS for SF State in the News ------- */
div.view-clip-view { padding: 5px 15px; }

@media screen and (max-width: 767px) {
p.intro-mobile { font-size: 16px !important; }
}


/* ----- CSS for News Story Archive Page ----- */

#edit-submit-news-story-archive {
    margin-top: 0;
}

/* ----- CSS for Archived Messages and Announcements Content Type ----- */
div.announcements-lists, div.archived-messages-listings { line-height:25px !important; font-size:16px; }
div.view-announcements-listings, div.node-announcements, div.view-archived-messages-listings, .node-archived-message { padding: 5px 15px; }



/* ----- CSS for Contact page ----- */
.contact-info-main {
  background-color: #F5F5F5;
  height: 435px;
  padding: 15px;
}

.contact-img { padding-left:0px !important; }

@media screen and (min-width:992px) and (max-width:1199px) {
.contact-info-main { height: 515px; }
}

@media screen and (min-width:768px) and (max-width:991px) {
.contact-info-main { height: 430px; }
}

@media screen and (min-width:546px) and (max-width:767px) {
.contact-info-main { 
  height: 410px;
  width:90%;
}
}

@media screen and (min-width: 320px) and (max-width:545px) {
.contact-info-main { 
  height: 415px;
  width:90%;
}
}

@media screen and (min-width: 275px) and (max-width:319px) {
.contact-info-main { 
  height: 440px;
  width:90%;
}
}

@media screen and (max-width:274px) { 
  .contact-info-main { 
  height: 455px;
  width:90%;
}
}

div.contact-row { margin: 20px 0px 0px 0px; }

div.contact-container { padding:0px !important; }

h2.contact-name {
  color:#860;
  font-size:16px;
  font-weight: bold;
  margin: 0px;
}

p.contact-title {
  color:#464666;
  font-size:14px;
  font-weight: 600;
  margin: 0px;
}

p.contact-text { margin: 0px 0px 20px; }


/* --------------------- CSS for right-side column for both news release & news story pages ------------------------- */

    .side-nav-for-stories { padding: 25px; }

    div.view-news-story-archive { padding-left: 15px; }

    .side-nav-for-releases { padding: 25px 0px 0px 25px; }

    h2.news-h2 { margin-top: 6px; }

    .node-news h2, .node-press-release h2 { font-size:18px !important; }

    .node-news, .node-press-release p {
        font-size: 15px;
        word-spacing: 2px;
    }

    div.view-press-release-archive { padding: 0px 15px !important; }
    
    div.news-releases { line-height: 16px; }

    .links-sidebar { line-height: 12px !important; }

    span.caption {
        font-size: 12px !important;
        padding-bottom: 10px;
    }

    .field-name-field-pic-caption > span.caption { line-height: 18px !important; }

    .container-inline div, .container-inline label { display: inline !important; }


    div.node-press-release > div.group-left, div.node-news > div.group-left  {
        width: 75%; 
        padding-right: 15px;
        padding-left: 15px;
    }

    div.node-press-release  > div.group-right, div.node-news > div.group-right {
        width: 25%;
        padding: 0px 15px;
    }

    div.node-news > div.group-left > div.field-name-field-date {
        font-size:20px;
        padding: 0px 0px 10px 0px;
    }

    div.addthis_sharing_toolbox > span { padding-left: 2px; }

    .field-name-field-related-stories { padding-left:25px; }

    /* CSS for search box in right side column */

    .btn-default { border-color: #303 !important; }

    #google-appliance-search-form #edit-basic {
        float: left;
        padding-right: 20px;
    }

    input.form-control { width: auto; }

.webform-width { width:100% !important;}

    .search-bar-news { padding: 0px; }

    .btn { line-height: 1.45 !important; }

.hr-lte {
    border: 0; 
    height: 0; 
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}



/* Media Queries for both press release & web story, for pages & content types*/
    @media screen and (max-width:400px) {
      h2.news-h2,  .node-news h2, .node-press-release h2 { font-size: 16px !important; } 
    }
    
    @media screen and (min-width: 992px) {
      div.field-name-changed-date, div.field-name-field-updatedby { padding-left: 25px }
    }

    @media screen and (min-width: 992px) and (max-width: 1199px) {
    .links-sidebar { line-height: 16px !important; } 

    a.at-share-btn { margin:0 1px !important; }

    .search-bar-news {
        width: 134% ! important;
        padding: 15px;
    }
    }

    @media screen and (max-width:991px) {
    div.news-releases { line-height: 20px; }

    div.node-press-release > div.group-left, div.node-news > div.group-left {
        width:100% ! important;
        float:left;
        padding:15px 15px 0px 15px!important;
    }


    div.node-press-release > div.group-right, div.node-news > div.group-right {
        width:100% ! important;
        float:left;
        padding: 0px 15px 15px 15px !important;
    }

    .side-nav-for-releases, .side-nav-for-stories { padding: 0px; }
    
    }


    @media screen and (max-width: 767px) {
    .search-bar-news {
        width: 244px;
        padding: 15px;
    }
    }

/* -------- News Story pull-quotes -------- */
div.story-pull-quote {
  margin: 30px auto 30px auto;
  width: 85%;
}

p.story-pull-quote-text {
  font-size: 150%;
  font-family: serif;
  font-weight: bold;
  text-align: center;
}

p.story-pull-quote-source {
  font-size: 90%;
  font-family: sans-serif;
  text-align: right;
}

/* -------- News Story pull-quote style image -------- */
div.story-img-block {
  width: 100%;
  padding: 2% 0 3% 0;
}

div.story-img-block > img {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* -------- News Story inside images (float left and right) -------- */
div.story-image-left { 
  margin-right:15px; 
}

div.story-image-left img {
  float: left !important;
  margin: 0px !important;
}

div.story-image-right { 
  margin-left:15px; 
}

div.story-image-right img {
  float: right !important;
  margin: 0px !important;
}

/* -------- News Story videos -------- */
div.video {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  margin-bottom: 10px;
}

div.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -------- CSS for slide shows in old news stories/releases pages -------- */
.slideshow, .fish-slideshow {
   position: relative;
   max-width: 495px;
   height: 330px;
   margin: 5em auto .5em auto;
}

.slideshow figure, .fish-slideshow figure {
   opacity:0;
   margin: 0;
   position: absolute;
}

.slideshow figcaption, .fish-slideshow figcaption {
   position: absolute;
   width: 100%;
   bottom: 0;
   color: #fff;
   background: rgba(0,0,0, .625);
   font-size: .9em;
   padding: 8px 12px;
   opacity: 1;
   transition: opacity .5s;
}


/* Effect */
figure:nth-child(1) {
   animation: xfade 66s 60s infinite;
}
figure:nth-child(2) {
   animation: xfade 66s 54s infinite;
}
figure:nth-child(3) {
   animation: xfade 66s 48s infinite;
}
figure:nth-child(4) {
   animation: xfade 66s 42s infinite;
}
figure:nth-child(5) {
   animation: xfade 66s 36s infinite;
}
figure:nth-child(6) {
   animation: xfade 66s 30s infinite;
}
figure:nth-child(7) {
   animation: xfade 66s 24s infinite;
}
figure:nth-child(8) {
   animation: xfade 66s 18s infinite;
}
figure:nth-child(9) {
   animation: xfade 66s 12s infinite;
}
figure:nth-child(10) {
   animation: xfade 66s 6s infinite;
}
figure:nth-child(11) {
   animation: xfade 66s 0s infinite;
}


/* Timing */
@keyframes xfade {
   0%{
      opacity: 1;
   }
   8.1%, 12.28%  {
      opacity:1;
   }
   9.1%, 14.28%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}
 

/* Effect for shark slideshow page */
figure:nth-child(1) {
   animation: xfade 42s 36s infinite;
}
figure:nth-child(2) {
   animation: xfade 42s 30s infinite;
}
figure:nth-child(3) {
   animation: xfade 42s 24s infinite;
}
figure:nth-child(4) {
   animation: xfade 42s 18s infinite;
}
figure:nth-child(5) {
   animation: xfade 42s 12s infinite;
}
figure:nth-child(6) {
   animation: xfade 42s 6s infinite;
}
figure:nth-child(7) {
   animation: xfade 42s 0s infinite;
}



/* --------- CSS for Media page, Faculty & Staff page --------- */
div.media-page, div.faculty-staff { padding-left: 0px;}

div.media-page  ul, div.faculty-staff  ul { padding-left: 50px; }

img.media-page-img { padding-top: 15px; }

img.faculty-staff-img { padding-top: 25px; }

p.lead { padding-top: 5px; }

@media screen and (max-width: 991px) {
div.media-page, div.faculty-staff {
    padding-left: 0px;
}
}


/* CSS for SF State in the News (Clips) Navigation */

.clips-nav {
	padding:15px;
}

a.clips-year {
	font-size: 18px;
	color: #505066;
	font-style: normal;
}

a.clips-month {
	margin-top: 10px !important;
	font-size: 16px;
	color: #505066;
	font-style: normal;
}


h2.head-month {
	margin-top:10px !important;
}

h2.head-year {
	margin-top:10px !important;
}

section.contextual-links-region {
	width: 80%;
}

ul.clips-nav {
        list-style-type: none;
}

/* --------- CSS to force source code view to wrap text (from Srikanth 4/13/2016 dr) --------- */
.cke_skin_kama textarea {
    white-space: pre-wrap !important;
}