"Untitled"
Bootstrap 3.3.0 Snippet by pchilders

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://www.lib.montana.edu/_resources/msu/2/styles/styles.css?d=20190823" rel="stylesheet" media="screen" /> <link href="https://www.lib.montana.edu/_resources/msu/2/slick/slick.css" rel="stylesheet" type="text/css"> <link href="https://www.lib.montana.edu/_resources/msu/2/slick/slick-theme.css" rel="stylesheet" type="text/css"> <link href="https://www.lib.montana.edu/_resources/msu/2/styles/slickslider.css" rel="stylesheet" type="text/css"> <div class="container-fluid " id="full-banner"> <div class="row"> <div id="catsearch"> <form class="form-inline" action="https://msu-primo.hosted.exlibrisgroup.com/primo-explore/search" enctype="application/x-www-form-urlencoded; charset=utf-8" method="get" name="searchForm" target="_self" onsubmit="searchPrimo()"><input id="primoQuery" name="query" type="hidden"><input name="vid" type="hidden" value="01TRAILS_MSU"><input name="search_scope" type="hidden" value="01TRAILS_MSU"><input name="sortby" type="hidden" value="rank"><input name="lang" type="hidden" value="en_US"><div class="form-group"><label class="sr-only" for="searchBox">CatSearch for articles, journals, books and more</label><div class="input-group"> <input id="searchBox" class="form-control primosearchbox" type="text" value="" placeholder="CatSearch for books, articles, and more"> <div class="input-group-btn"> <button id="submit-button" class="btn btn-primary"> <span class="fa fa-search" aria-hidden="true">  </span> </button> </div> </div> </div> </form> <div class="homepage-search-box"><a href="/resources" role="button">Articles and Research Databases</a><a href="https://msu-primo.hosted.exlibrisgroup.com/primo-explore/jsearch?vid=01TRAILS_MSU" role="button">Journals by Title</a><a title="CatSearch is the MSU Library's discovery platform that provides a single access point to most of the Library's collections. It is a place to start your research for scholarly journal and newspaper articles, books, videos, maps, manuscript collections, music scores and more. From your search results, you can get the full text of articles or see if a book is on the shelf." href="http://guides.lib.montana.edu/catsearch-help" data-toggle="tooltip" data-placement="bottom" data-delay="{"show":"100", "hide":"100"}" role="button"><span style="font-size: 140%; position: relative; left: 12.5%;" aria-hidden="true" class="fa fa-info-circle"> </span></a><a class="advanced-search" href="/advanced-search/" rel="noindex,nofollow">Advanced Search</a></div> </div> <div><span><img src="https://www.lib.montana.edu/homepage-images/map.jpg" alt="map"></span></div> </div> </div>
.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px){ .container { width: 100%; } } .page-header h1 { text-align: center; margin: 20px 0 0 0; } .main-banner { margin-bottom: 0 !important; } #breadcrumb { display: none; } #content { float:left; position:absolute } .marketing-news-events h2 { font-weight: lighter; } @media only screen and (min-width : 768px) { #mission-part-1 { width: 40%; } #mission-part-2 { width: 60%; padding-left: 40px; } } #footer-contact { background-color: #e0e0e0; } #footer-contact > * { text-align: center; } address#contact { font-size: inherit; } address#contact h2 { font-size: 16px; } .slider-social li a .fa-instagram { color: #fff; } .slider-social li a:hover .fa-instagram { background: #ffcb05; color: #f7941e;} .main-banner {margin-top:16em} .page-header h1 { text-align: center; margin: 20px 0 0 0; } .main-banner { margin-bottom: 0 !important; } #breadcrumb { display: none; } #content { float:left; position:absolute } .marketing-news-events h2 { font-size: 40px; font-weight: lighter; } @media only screen and (min-width : 768px) { #mission-part-1 { width: 40%; } #mission-part-2 { width: 60%; padding-left: 40px; } } #footer-contact { background-color: #e0e0e0; } #footer-contact > * { text-align: center; } address#contact { font-size: inherit; } address#contact h2 { font-size: 16px; } .slider-social li a .fa-instagram { color: #fff; } .slider-social li a:hover .fa-instagram { background: #ffcb05; color: #f7941e;} html, body { overflow-x: hidden; } .homepage-content-full-width { margin: 0 -9999rem; /* add back negative margin value */ padding: 0.25rem 9999rem; background: #1a80c9; } #bluebar { font-size:110%; } #action .thumbnail .caption h4 {display:none} .navbar-nav {font-size:125%; font-weight:bold} .row.cf {font-size:150%} .btn.btn-default {color:#444} /* Library Homepage Styling started May 2017 by JS and JWA */ .slider-social .fa-youtube-square, .slider-social .fa-pinterest-square { color: #ffffff; } .news-maincontent-headlines { background:#ffffff; } .main-banner { z-index: 1; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /*justify-content: center;*/ /*breaks the banner edit button*/ align-items: center; } .main-banner * { max-width: 100%; /* fix for single item carousel rendering within a flex container, see https://github.com/kenwheeler/slick/issues/1195 */ } .image-carousel { width: 100%; } #catsearch { /*z-index: 1000;*/ text-align:center; position: absolute; max-width: 690px; width: 100%; padding: 40px 0 20px 0; background-color: rgba(0,0,0,0.75); border-radius: 4px; left: 50%; top: 42%; -webkit-transform: translate(-50%, -42%); -moz-transform: translate(-50%, -42%); transform: translate(-50%, -42%); } #catsearch input, #catsearch .btn { height: 52px; font-size: 20px !important; font-family: 'Lato', sans-serif !important; } #searchBox { outline: none; display: inline-block; border: none; max-width: 600px; } #catsearch #advanced-search { margin-top:1em; } #catsearch #advanced-search a { color: #ffffff; } #bluebar .col-sm-4 { margin-top: 30px; } .container-fluid .main-banner { padding-left: 0; padding-right: 0; } @media (min-width: 768px) { #searchBox { width: 500px; } #catsearch { padding: 40px 0 20px 0; } #bluebar .col-sm-4 { margin-top: 0; } .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } } /* Format Hours, News and Ask the Library (second bar) */ li.postTitle { line-height: 1.25em; list-style-type: none; font-weight: normal; padding-bottom: 1.5em; } li.postTitle a { text-decoration:none; } li.postTitle a:hover { text-decoration:underline; } .inverse a { color: #ffffff; } #bluebar p#library { line-height: 2.375em; font-weight: bold; } #bluebar ul { padding-left: 0px; } .homepage-search-box a[role="button"] { display: inline-block; margin: 2% 1% 0 1%; padding: 0.5rem 1rem; border: 0; background-color: rgba(255,255,255,0.25); color: #ffffff; -webkit-text-decoration: none; text-decoration: none; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .homepage-search-box a[role="button"]:hover { background-color: rgba(255,255,255,0.5); } .fa-search { position: relative; top: 8px; } a.advanced-search {color: #bbbbbb; margin: 0 0 0 5%;} @media (max-width: 740px) { #catsearch {padding: 10px 5px;top:52%;} .slider-social {visibility:hidden;}} @media (min-width: 768px) { .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle } .form-inline .form-control-static { display: inline-block } .form-inline .input-group { display: inline-table; vertical-align: middle } .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control { width: auto } .form-inline .input-group>.form-control { width: 100% } .form-inline .control-label { margin-bottom: 0; vertical-align: middle } .form-inline .radio, .form-inline .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle } .form-inline .radio label, .form-inline .checkbox label { padding-left: 0 } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { position: relative; margin-left: 0 } .form-inline .has-feedback .form-control-feedback { top: 0 } } .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { margin-top: 0; margin-bottom: 0; padding-top: 7px } .form-horizontal .radio, .form-horizontal .checkbox { min-height: 27px } .form-horizontal .form-group { margin-left: -15px; margin-right: -15px } .form-horizontal .form-group:before, .form-horizontal .form-group:after { content: " "; display: table } .form-horizontal .form-group:after { clear: both } @media (min-width: 768px) { .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-top: 7px } } .form-horizontal .has-feedback .form-control-feedback { right: 15px } @media (min-width: 768px) { .form-horizontal .form-group-lg .control-label { padding-top: 14.33333px } } @media (min-width: 768px) { .form-horizontal .form-group-sm .control-label { padding-top: 6px } }

Related: See More


Questions / Comments: