central-style.css

/*
============ Website Style 2.2 MOBILE FIRST =======================================
Created by: Caryl Wyatt, Librarian, Ivy Tech Community College, Lawrence Library, Indianapolis
Last updated: 02.13.2018  version with mobile fixes before I added FAQ stuff
===============================================================================================

  First things first
  ====================================================
  This version of the site was designed mobile-first. This means that the "base styles" fit a mobile screen, not a desktop. All media queries are then scaled up to fit larger screens (instead of the other way around). See this article for more: https://codemyviews.com/blog/mobilefirst
  I also generally tend to agree with this sentiment and lots of design choices are impacted by it: http://libux.co/libraries-need-to-redesign-web-services/

  Notes on frameworks
  ====================================================
  LibGuides use Bootstrap 3: http://getbootstrap.com/components/
  I use flexbox to "fix" lots of mobile stuff: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  General notes on style
  ====================================================
  Fonts: 'Open Sans' for body font
  Colors:
      Ivy Tech Green: #086c54
      Medium Green: #41ad49
      Lime: #8dc63f
      Link green: #5Fa300
      Link hover: #487c00
*/

/* ---- Base Styles ---- */

html {
  font-size:18px;
}

body {
    font-family: 'Open Sans', 'Arial', sans-serif;
    background-color:#fff;
    font-size:1em !important;
    padding-left:0;
    padding-right:0;
    line-height:1.5;
}
h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a, h5 {
  font-family:'Open Sans', 'Arial', sans-serif;
  color:#086c54;
  font-weight:700;
}

.alert-danger h2, .alert-danger h3, .alert-danger h4 {
  color:#d2322d;
  margin-top:0;
}

.alert a {
color: #d2322d;
}

h1 {
  margin: 0;
  font-size: 1.602em;
}

h2 {font-size: 1.424em;
}

h3 {font-size: 1.777em; line-height:1.5;}

h4 {
  font-size: 1.333em;
  line-height:1.5;
  padding-top:20px;
  padding-bottom:10px;
}

h1 a, h2 a, h3 a, h4 a {
  font-size:inherit;
  color: #2B8815;
}

a, li>a {
  color:#5Fa300;
  font-weight:600;
}

a:hover, a:focus, li>a:hover, li>a:focus {
  color:#487c00;
  font-weight:600;
}

hr {
    margin-top: 15px;
    margin-bottom: 10px;
     border: 0;
    height: 1px;
    background: #c8c8c8;
    background-image: linear-gradient(to right, #ccc, #999, #ccc);
}

ul.main-nav {
   margin: 0;
  padding: 0;
  list-style:none;
}

li a, a, a:focus {
  text-decoration:none;
  outline:none;
}

#s-lg-guide-description {
  display:none;
}

.btn-default {
   color: #fff;
    background-color: #5Fa300;
    border-color: #5Fa300;
    margin: 5px;
}

.btn {
  font-size: 1em;
}

.btn-default:hover, .btn-default:active:hover, .btn-default:active:focus {
color: #fff;
  background-color: #487c00;
  border-color: #487c00;
  outline:none;
}

.btn-default.active, .btn-default:active {
  -webkit-box-shadow:  none;
  box-shadow:none;
}

img {
	max-width: 100%;
}

/* ---- Navigation ---- */

h1#s-lg-guide-name {
  display:none;
}

#header-wrap {
  background-color:#086c54;
  border-bottom: 4px solid #8dc63f;
}

.main-header {
  display:flex;
  justify-content:space-between;
}

.name {
	margin: 0;
}

a.logo,
.name a,
.main-nav a {
	text-align: center;
	display: block;
	padding: 10px 10px;
}

.name a {
  padding: 0;
  font-size:.7em;
}
a.logo img {
  margin: 0;
  border: 2.75px solid white;
  height: 2.75em;
}

h1.name a {
 padding: 0;
  text-transform:none;
  font-weight:400;
  color:#fff;
  letter-spacing:0;
}

.logo-region {
  display:flex;
  align-items:center;
  margin-right:auto;
}

ul.main-nav li a {
  color:#fff;
  font-size:1.175em;
  text-transform:none;
  font-weight:400;
  letter-spacing:0;
}

/* removes HOME heading/link from nav menu */
ul#no-home > li:first-of-type {
display:none;
}

.mobile-buttons {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  text-align:center;
}

.mobile-buttons a {
  font-size:1.2em;
  padding:.5em 2.5em;
}

.nav>li {
  padding-left:10px;
}

.nav-pills>li>a {
  border-radius:0;
}
.nav>li>a {
  padding: 10px 0;
  font-family:'Open Sans', 'Arial', sans-serif;
  color:#086c54;
}

.nav>li>a:hover, .nav>li>a:focus {
   outline:none;
   background-color:#fff;
}

.s-lg-tabs-side .nav {
    margin-bottom: 10px;
    font-size:.95em;
}

ul.s-lg-subtab-ul.nav.nav-pills>li>a {
  text-transform:none;
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size:1em;
  color: #333;
  border:none;
  font-weight:400;
}

ul.s-lg-subtab-ul.nav.nav-pills>li>a:hover {
  text-decoration:underline;
}

ul.s-lg-subtab-ul.nav.nav-pills {
  margin-left:0;
}

ul.s-lg-subtab-ul.nav.nav-pills li {
  width:100%;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, ul.s-lg-subtab-ul.nav.nav-pills>li.active>a, ul.s-lg-subtab-ul.nav.nav-pills>li.active>a:hover {
  background-color:#fff;
  color: #2B8815;
}

/* ---- Page Styles ---- */

/* removes "external link" button */
.fa-external-link {
display:none;
}

.lcs_slide_out.lcs_slide_out-r {
  display:none;
}

.s-lib-box {
  border:none;
  box-shadow:none;
}

.s-lib-box .s-lib-box-title {
  display:none;
}

.s-lib-box-conent {
  padding:0;
}

/* --- HOMEPAGE --- */

.search-box-header h3 {
  margin-top:0;
}

.flex-search {
  display:flex;
  flex-flow:row wrap;
  margin-bottom: .5em;
}

input#ebscohostsearchtext {
  padding-left:10px;
  border: 2.5px solid #006648;
  height:2.5em;
  width:100%;
  border-radius:4px;
  flex:1 0 8em;
}

#onlysearchbutton.btn {
  margin-top:10px;
  width:99.9%;
  flex:0 0 auto;
  background-color: #006648;
  color: white;
}

.glyphicon.glyphicon-search {
    font-size:22px;
  }
  
.search-box-links, .search-box-links a {
   font-size:16px;
}

.research-tools-links {
  display:flex;
  justify-content: space-between;
  margin-top:5px;
}
  
/* general home styles */

.more-link {
  font-style:italic;
  float:right;
}

.section-head {
    border-top:1px solid;
}
.section-title{
    display: inline-block;
    margin-top: 10px;
}
.section-icon {
    display:none;
}

#s-lg-box-15215510 {
    margin:0;
}


/* featured databases and common questions */

.home-list-group {
    padding-left: 0;
}

.home-list-group li:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: 1px solid #e1e1e1;
}

.home-list-group li {
    position: relative;
    display: block;
    padding: 10px 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #e1e1e1;
}

.home-list-group li>a {
  font-size:1.05em;
}


/* calendar widget */

#todays-date {
    font-style:italic;
}
#hours-list ul  {
    list-style: none;
    padding-left: 0;
    padding: 5px 0;
}

#hours-grid td {
    border-top: none;
}

#hours-grid .library-location {
    font-size: 18px;
    font-weight: 700;
    padding-left:0;
}

.table-responsive {
  border:none;
}

/* Call-to-action tiles */

#home-tiles {
    display:flex;
    flex-flow:column;
}

#home-tiles a {
    display:flex;
    flex-flow:column;
    border-radius: 3px;
    flex: 1 1 100%;
    margin: 20px 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    color: initial;
    font-weight:400;
    letter-spacing: initial;
}
 #home-tiles a:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  text-decoration:none;
}
        
.tile-head {
    text-align: center;
    background: #086c54;
    color: white;
    font-size: 1.5em;
    border-radius: 3px 3px 0 0;
}

.tile-cta  {
    margin:20px 0;
    text-align:center;
    color:#5fa300;
    font-weight:600;
    font-size: 1.333em;
}

.tile-question {
    padding-top: 20px;
    text-align: center;
}


/* ------ SUB PAGES -------- */

/* === AZ LIST === */

/*styles single letters that divide A-Z list*/
.alpha_group {
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: .5em;
    border-bottom: 1px solid;
    text-transform: uppercase;
    color: #086c54;
    font-weight: 700;
    letter-spacing: .05em;
    margin-left: -30px;
    padding-left: 10px;
}

/* === GUIDES PAGE === */

/* guide list widget */

.s-lib-box-content .ui-tabs-nav li>a {
    color: #086c54;
}

.subject-name.panel-title, .ui-widget-content a {
   font-family:'Open Sans', 'Arial', sans-serif;
    text-decoration: none;
    outline: none;
    color: #5Fa300;
}

  .ui-tabs .ui-tabs-nav {
    background:none;
    border:none;
    padding:0;
    display: block;
    border-bottom: 1px solid #e6e6e6;
   padding-left:10px;
  }
  
  .s-lib-jqtabs {
    padding:0;
    border:none;
  }
  .ui-tabs .ui-tabs-nav li {
    margin-bottom:-.25px;

  }
  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #E6E6E6;
    background: #fff!important;
  }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default,
  .ui-state-default:hover, .ui-widget-content .ui-state-default:hover, .ui-widget-header .ui-state-default:hover {
    border: 1px solid #E6E6E6;
    background: #e6e6e6;
  }
 #subject-accordion .panel-body ul li {
    padding: 10px 0;
  }
  
/* === STAFF PAGE === */

.indy_staff {
  padding: 5px 0;
}

/* page footer */

.s-lib-footer {
  background-color: #fff;
}


/*==========MEDIA QUERIES=========================================== */

 

/* styles for tablets */
@media (min-width: 769px) {

  
  .name a {
    font-size: inherit;
  }
  
  a.logo img {
  margin: 0;
  border: 4px solid white;
  height: 3.5em;
}


  .nav>li {
    flex:1 1 50%;
    text-align:left;
  }
  
  .nav>li>a {
    /*padding: 0 15px;*/
    font-size:1.5em;
  }
  
  #discover {
    font-size:1.85em;
    line-height: 1.5;
  }
  
  .search-box-container {
     padding: .5em 0;
  }


  input#ebscohostsearchtext {
    padding-left:10px;
    border: 2.5px solid #086c54;
    height:2.5em;
    max-width:100%;
    margin-right:5px;
  }
  
  #onlysearchbutton.btn {
    margin-top:0;
    width:5em;
  }
  
  .glyphicon.glyphicon-search {
    font-size:22px;
  }

  .search-box-links {
    display:flex;
    justify-content:flex-start;
  }
  
  .search-box-links, .research-tools-links a {
     font-size:14px;
     font-weight:400;
  }
  
  .research-tools-links {
    display:flex;
    margin-top:0;
  }
  
  .search-box-links a:hover {
    text-decoration:none;
    color: #237111;
    
  }
  
  .search-box-links a:hover span {
    text-decoration:underline;
    color:#237111;
  }
  
  .search-box-links a+a::before, .search-box-links a+a:hover::before {
    content:'|';
    padding:.5em;
    text-decoration:none;
  }
  
  #home-tiles {
    flex-flow:row;
  }
    
  #home-tiles a {
    margin: 0 10px;
  }
}


/* full-screen styles */
@media (min-width: 992px) {
  
  .main-header {
    justify-content:space-between;
    align-items: center;
    margin:auto;
  }

  .main-nav {
    display:flex;
  }
  
  header.main-header.container:before, header.main-header.container:after {
    content:none;
  }
  
  header.container {
    padding-right:0;
    padding-left:0;
  }

  .lcs_slide_out.lcs_slide_out-r {
    display:initial;
  }
  .nav {
    flex-direction:column;
    align-items:flex-start;
  }
  
  .nav>li {
  padding-left:0;
  }

  .nav>li>a {
    padding: 2.5px 0;
    font-size:1.25em;
    font-weight:700;
    border:none;
    margin:0;
  }
  
  ul.s-lg-subtab-ul.nav.nav-pills>li>a {
    font-weight:400;
    letter-spacing:normal;
  }

  nav ul li {
    text-align:left;
    width:70%;
  }
  
  input#ebscohostsearchtext {
    margin-right:.25em;
  }
  
  .search-box-links {
    display:flex;
  }
  
  .search-box-links, .research-tools-links a {
     font-size:14px;
     font-weight:400;
  }
  
  .research-tools-links {
    display:flex;
    margin-top:0;
  }
  
  .search-box-links a+a:before, .search-box-links a+a:hover:before {
    content:none;
  }
  
  .search-box-links a+a::before, .search-box-links a+a:hover::before {
    content:'|';
    padding:.5em;
    text-decoration:none;
    color: #929191;
  }
}

@media (max-width: 991px) {

    /* ===== OFF CANVAS STYLES ====== */
    
      .navbar-toggle {
        display: initial;
        float:none;
        color:#fff;
        padding:10px;
        margin-top:15px;
        margin-right:15px;
        margin-bottom:15px;
        border: 2px solid #fff;
    }
      .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
    
      .row-offcanvas-left
      .sidebar-offcanvas {
        left: -41.6%;
      }
    
      .row-offcanvas-left.active {
        left: 41.6%;
      }
      .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 41.6%;
      }
      
      #sidebar {
        padding-top:0;
      }
      
      ul.nav.navbar-nav.region li h1 {
        display:none;
      }
    
    /* END OFF-CANVAS STYLES */
}