/* CSS crunched with Crunch - http://crunchapp.net/ */ @import "css/bootstrap.min.css"; @import "css/font-awesome.min.css"; @import "css/animate.min.css"; @import "css/font.min.css"; /* Scroll ========================================== */ ::-webkit-scrollbar { width: 8px; height: 6px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background-color: #fff; } ::-webkit-scrollbar-thumb { background-color: #ccc; width: 8px; height: 4px; } /* Placeholder / Help text inside input ========================================== */ ::-webkit-input-placeholder { color: #333; transition: opacity 2s 2s ease; -webkit-transition: opacity 2s 2s ease; opacity: 1; } :-moz-placeholder { color: #333; transition: opacity 2s 2s ease; -webkit-transition: opacity 2s 2s ease; opacity: 1; } ::-moz-placeholder { color: #333; transition: opacity 2s 2s ease; -webkit-transition: opacity 2s 2s ease; opacity: 1; } :-ms-input-placeholder { color: #333; transition: opacity 2s 2s ease; -webkit-transition: opacity 2s 2s ease; opacity: 1; } /* General ========================================== */ html, body { margin: 0px; overflow: auto; } body { overflow: hidden; height: 100%; direction: ltr; font-family: 'Open Sans', sans-serif; font-weight: lighter; -webkit-text-size-adjust: none; font-size: 16px; } a, a:hover { text-decoration: none !important; } .btn-default { background-color: #282828; } /* Header ========================================== */ .s-header { width: 100%; padding: 0 50px 20px 50px; margin: 0; top: 25px; color: #fff; border-bottom: solid 1px rgba(255, 255, 255, 0.05); } @media only screen and (min-width: 768px) { .s-header { position: absolute; } } /* Brand ========================================== */ .s-brand { color: #fff; width: 100%; text-align: center; } @media only screen and (min-width: 768px) { .s-brand { text-align: left; } } .s-brand:visited, .s-brand:active, .s-brand:hover { color: #fff; } .s-brand h1 { text-transform: uppercase; font-size: 20pt; margin: 0; font-weight: lighter; } .s-brand-tagline { font-size: 10pt; } .s-logo { display: block; padding: 0; margin: 10px auto; } @media only screen and (min-width: 768px) { .s-logo { float: left; padding: 0 20px 0 0; margin: -7px 0 0 0; } } /* Menu ================================ */ .s-pmenu { position: relative; margin: 0 auto; } @media (max-width: 468px) { .s-pmenu { position: absolute; margin: 0 auto; left: 44%; top: 130px; } } @media (min-width: 768px) and (max-width: 1200px) { .s-pmenu { top: -50px; } } .s-menu { position: relative; margin: 0 auto; } .s-menu a { display: block; color: #fff; background-color: #fff; width: 30px; border-radius: 50px; padding: 15px 0 0 8px; height: 30px; margin: 20px auto 0 auto; } @media only screen and (min-width: 768px) { .s-menu { z-index: 2099; position: absolute; left: auto; right: 15px; top: 10px; margin: 0; } .s-menu a { margin: 0; width: 30px; height: 30px; } } @media only screen and (max-width: 480px) { .s-menu-toggle { width: 19px; height: 20px; display: block; vertical-align: top; padding-top: 3px; margin-left: 15px; } } .s-menu-toggle span, .s-menu-toggle span:before, .s-menu-toggle span:after { cursor: pointer; border-radius: 1px; height: 1px; width: 15px; background: #282828; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; } .s-menu-toggle span:before { top: -3px; } .s-menu-toggle span:after { bottom: -3px; } .s-menu-toggle:hover span:before { top: -6px; } .s-menu-toggle:hover span:after { bottom: -6px; } .s-menu-toggle.active span { background-color: transparent; } .s-menu-toggle.active span:before, .s-menu-toggle.active span:after { top: 0; } .s-menu-toggle.active span:before { transform: rotate(45deg); } .s-menu-toggle.active span:after { transform: rotate(-45deg); } .s-menu-content { background-color: #eee; width: 100%; right: -100%; position: fixed; top: 0; height: 100%; text-align: center; transition: all 500ms ease-in-out; z-index: 4099; overflow-y: auto; overflow-x: hidden; } @media only screen and (min-width: 768px) { .s-menu-content { padding: 10px 30px; width: 300px; right: -300px; } } .s-menu-content.active { right: 0; } .s-menu-content ul { list-style: none; margin: 0; padding: 0 0 75px 0; } .s-menu-content li { line-height: 30pt; } .s-menu-content a { font-size: 8pt; text-transform: uppercase; letter-spacing: 2px; color: #000; } .s-menu-content h1 { font-weight: lighter !important; font-size: 20pt; text-transform: uppercase; border-bottom: double 3px #d5d5d5; padding-bottom: 30px; padding-top: 0; } .s-menu-content .s-menu-toggle { position: absolute; top: 45px; right: 45px; width: 30px; height: 30px; } .s-menu-content .s-menu-toggle span, .s-menu-content .s-menu-toggle span:before, .s-menu-content .s-menu-toggle span:after { background-color: #333; } .s-menu-content .s-menu-toggle:hover span, .s-menu-content .s-menu-toggle:hover span:before, .s-menu-content .s-menu-toggle:hover span:after { background-color: #000; } .s-menu-content .s-menu-toggle span { transform: rotate(-45deg); top: 0; } .s-menu-content .s-menu-toggle span:before { opacity: 0; } .s-menu-content .s-menu-toggle span:after { transform: rotate(-90deg); top: 0; } .s-menu-info { text-transform: uppercase; letter-spacing: 4px; border-top: double 3px #d5d5d5; padding-top: 25px; color: #000; } .s-menu-info label { font-size: 8pt; text-transform: uppercase; letter-spacing: 2px; color: #bbb; padding: 0 0 12px 0; margin: 0; } /* Custom Select Dropdown ================================ */ .custom-dropdown--large { font-size: 1.5em; } .custom-dropdown--small { font-size: 1em; } .custom-dropdown__select { font-size: inherit; /* inherit size from .custom-dropdown */ padding: .5em; /* add some space*/ margin: 0; /* remove default margins */ } .custom-dropdown__select--white { background-color: #fff; color: #444; } .custom-dropdown__select--emerald { background-color: #20b390; color: #fff; } .custom-dropdown__select--red { background-color: #d53a22; color: #fff; } @supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; } .custom-dropdown__select { padding-right: 5em; /* accommodate with the pseudo elements for the dropdown arrow */ border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -0.5em; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2.6em; right: 0; top: 0; bottom: 0; border-radius: 0 0 0 0; } .custom-dropdown__select[disabled] { color: rgba(0, 0, 0, 0.3); } .custom-dropdown.custom-dropdown--disabled::after { color: rgba(0, 0, 0, 0.1); } /* White dropdown style */ .custom-dropdown--white::before { background-color: #fff; border-left: 1px solid rgba(0, 0, 0, 0.1); } .custom-dropdown--white::after { color: rgba(0, 0, 0, 0.9); } /* Emerald dropdown style */ .custom-dropdown--emerald::before { background-color: #1aa181; } .custom-dropdown--emerald::after { color: rgba(0, 0, 0, 0.4); } /* Red dropdown style */ .custom-dropdown--red::before { background-color: #d53a22; } .custom-dropdown--red::after { color: rgba(0, 0, 0, 0.4); } /* FF only temporary & ugly fixes */ /* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */ @-moz-document url-prefix() { .custom-dropdown__select { padding-right: 0.9em; } .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em; } .custom-dropdown--small .custom-dropdown__select { padding-right: 0.5em; } } } /* Background ================================ */ .s-background { z-index: -1; position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .s-background > video { position: absolute; top: 0; left: 0; width: 100%; height: auto; background-size: cover; } .s-background .slider { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: 100%; height: 100%; background-size: cover; } .gradients { background-position: center center; background-repeat: no-repeat; height: 100%; position: absolute; width: 100%; z-index: 1099; opacity: 0.75; } .gradients div { height: 100%; position: absolute; width: 100%; } .red { background: #054365; background: -webkit-gradient(left bottom, right top, color-stop(0%, #054365), color-stop(100%, #ff0000)); background: -webkit-linear-gradient(45deg, #054365 0%, #ff0000 100%); background: -moz-linear-gradient(45deg, #054365 0%, #ff0000 100%); background: -o-linear-gradient(45deg, #054365 0%, #ff0000 100%); background: -ms-linear-gradient(45deg, #054365 0%, #ff0000 100%); background: linear-gradient(45deg, #054365 0%, #ff0000 100%); } .pink { background: #fc963f; background: -webkit-gradient(left bottom, right top, color-stop(0%, #e02d6f), color-stop(100%, #fc963f)); background: -webkit-linear-gradient(45deg, #e02d6f 0%, #fc963f 100%); background: -moz-linear-gradient(45deg, #e02d6f 0%, #fc963f 100%); background: -o-linear-gradient(45deg, #e02d6f 0%, #fc963f 100%); background: -ms-linear-gradient(45deg, #e02d6f 0%, #fc963f 100%); background: linear-gradient(45deg, #e02d6f 0%, #fc963f 100%); } .purple { background: #edaa9c; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #8217b7), color-stop(100%, #edaa9c)); background: -webkit-linear-gradient(45deg, #8217b7 0%, #edaa9c 100%); background: -moz-linear-gradient(45deg, #8217b7 0%, #edaa9c 100%); background: -o-linear-gradient(45deg, #8217b7 0%, #edaa9c 100%); background: -ms-linear-gradient(45deg, #8217b7 0%, #edaa9c 100%); background: linear-gradient(45deg, #8217b7 0%, #edaa9c 100%); } .default, .blue { background: #05c6d1; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #194fb8), color-stop(100%, #05c6d1)); background: -webkit-linear-gradient(45deg, #194fb8 0%, #05c6d1 100%); background: -moz-linear-gradient(45deg, #194fb8 0%, #05c6d1 100%); background: -o-linear-gradient(45deg, #194fb8 0%, #05c6d1 100%); background: -ms-linear-gradient(45deg, #194fb8 0%, #05c6d1 100%); background: linear-gradient(45deg, #194fb8 0%, #05c6d1 100%); } .green { background: #e7dd4b; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #44cd9e), color-stop(100%, #e7dd4b)); background: -webkit-linear-gradient(45deg, #44cd9e 0%, #e7dd4b 100%); background: -moz-linear-gradient(45deg, #44cd9e 0%, #e7dd4b 100%); background: -o-linear-gradient(45deg, #44cd9e 0%, #e7dd4b 100%); background: -ms-linear-gradient(45deg, #44cd9e 0%, #e7dd4b 100%); background: linear-gradient(45deg, #44cd9e 0%, #e7dd4b 100%); } .mint { background: #dfcee5; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #0fa9a8), color-stop(100%, #dfcee5)); background: -webkit-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -moz-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -o-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -ms-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); } .beach { background: #e5d8b9; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #2cbedf), color-stop(100%, #e5d8b9)); background: -webkit-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -moz-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -o-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -ms-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); } .current { opacity: 0; } .slider { position: fixed; top: 0; left: 0; width: 100%; height: auto; background-size: cover; -webkit-animation: slideImg 16s infinite; animation: slideImg 16s infinite; opacity: 0; -webkit-filter: grayscale(100%); filter: grayscale(100%); } @-webkit-keyframes slideImg { 25% { opacity: 1; } 40% { opacity: 0; } } @keyframes slideImg { 25% { opacity: 1; } 40% { opacity: 0; } } .slider:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .slider:nth-child(2) { -webkit-animation-delay: 4s; animation-delay: 4s; } .slider:nth-child(3) { -webkit-animation-delay: 8s; animation-delay: 8s; } .slider:nth-child(4) { -webkit-animation-delay: 12s; animation-delay: 12s; } /* Footer ================================ */ .s-footer { width: 100%; position: relative; bottom: -1px; left: 0; right: 0; zoom: 1; display: block; } .s-footer-content { background-color: #000; width: 100%; padding: 20px 50px; margin: 0 auto; font-size: 8pt; color: #ccc; text-transform: uppercase; z-index: 3001; animation-name: slide; animation-duration: 1s; -webkit-animation-name: slide; -webkit-animation-duration: 1s; line-height: 20px; position: relative; text-align: center; } @media only screen and (min-width: 768px) { .s-footer { position: fixed; line-height: normal; text-align: left; } } @-webkit-keyframes slide { 0% { bottom: -300px; } 100% { bottom: 0px; } } @keyframes slide { 0% { bottom: -300px; } 100% { bottom: 0px; } } .s-footer a { color: #ccc; } .s-footer a:hover { color: #fff; } .s-footer-menu { float: right; margin: 0; padding: 0; } .s-footer-menu { list-style: none; margin: 0; padding: 0; } .s-footer-menu li { display: inline-block; float: none; margin: 0; padding: 0; text-align: center; position: relative; -webkit-transition: bottom 2s ease-in-out; transition: bottom 2s ease-in-out; } @media only screen and (min-width: 768px) { .s-footer-menu li { padding-right: 20px; float: left; text-align: left; } } .s-footer-menu li:hover { bottom: 2px; } .s-footer-tagline a { position: relative; } .s-footer-tagline a:hover { bottom: 2px; } .s-footer-menu li:last-child { padding-right: 0px; } .rss { color: #fc0 !important; } /* Feature ================================ */ .s-feature-list { width: 100%; padding: 0; margin: 0 auto !important; text-align: center; position: relative; bottom: -35px; background: transparent url(img/shelf.png) 0 100px no-repeat; z-index: 2002; } @media only screen and (min-width: 768px) { .s-feature-list { width: 100%; top: 49px; } } @media only screen and (min-width: 1024px) { .s-feature-list { top: 35px; } } .s-feature-list:after { bottom: -30px; content: ''; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0.2)), color-stop(50%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); width: 100%; height: 75px; display: inline-block; z-index: 2001; } .s-feature-list ul { list-style: none; margin: 0 auto; } .s-feature-list li { display: inline; padding-right: 25px; overflow: hidden; position: relative; } .s-feature-list li:last-child { padding-right: 0; } .s-feature-list img { overflow: hidden; vertical-align: bottom; border-radius: 4px; border: none; width: 90px; height: 125px; background: transparent url(img/book.png) top left no-repeat; background-size: cover; background-color: #FFF; } .s-feature-list li:hover { -webkit-transition: left 500ms ease-in-out; transition: left 500ms ease-in-out; -webkit-animation-name: coverShake; animation-name: coverShake; -webkit-animation-duration: 500ms; animation-duration: 500ms; } @-webkit-keyframes coverShake { 0% { left: 0px; } 50% { left: 10px; } 100% { left: 0px; } } keyframes coverShake 0% { left: 0px; } keyframes coverShake 50% { left: 10px; } keyframes coverShake 100% { left: 0px; } .s-feature { top: 150px; color: #ccc; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -o-transition: color 1s ease; -ms-transition: color 1s ease; transition: color 1s ease; } .s-feature:visited, .s-feature:active, .s-feature:hover { color: #fff; } .s-feature-content { margin: 0 auto; text-align: center; z-index: 2002; } .s-feature-title { background-color: #19A181; color: #fff; width: 100%; font-size: 10px; position: absolute; text-transform: uppercase; text-align: center; bottom: 8px; left: 0; z-index: 3099; padding: 5px; white-space: pre-line; overflow: hidden; } @media screen and (min-width: 768px) { .s-footer-tagline { text-align: left; } } .jcarousel-skin-tango .jcarousel-container { margin: 0 auto; } .jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 100%; padding: 0 40px; } @media only screen and (min-width: 768px) { .jcarousel-skin-tango .jcarousel-container-horizontal { width: 89%; padding: 0px 85px; } } .jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 100%; height: 125px; top: 35px; } .jcarousel-skin-tango .jcarousel-item { border-radius: 4px; width: 90px; height: 125px; box-shadow: 0 0 10px #000; position: relative; } .jcarousel-skin-tango .jcarousel-item:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; left: -3px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0px; margin-right: 18px; } @media only screen and (min-width: 768px) { .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 20px; margin-right: 20px; } } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 110px; right: 5px; width: 32px; height: 32px; } .jcarousel-skin-tango .jcarousel-next-horizontal:before { content: '\f054'; font-family: FontAwesome; font-size: 24pt; color: #333; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .jcarousel-skin-tango .jcarousel-prev-horizontal:before { content: '\f053'; font-family: FontAwesome; font-size: 24pt; color: #333; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover:before { color: #fff; cursor: pointer; margin-left: 10px; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover:before { color: #fff; cursor: pointer; margin-right: 10px; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 110px; left: 5px; width: 32px; height: 32px; cursor: pointer; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /* Main ================================ */ .s-main { width: 100%; text-align: center; margin: 0 auto; color: #fff; font-size: 12pt; font-weight: light; } .s-main h1 { font-family: Raleway, serif; font-weight: bold; font-size: 26pt; } @media only screen and (min-width: 768px) { .s-main-search { margin-bottom: 0; margin-top: 25%; } } @media only screen and (min-width: 1025px) { .s-main-search { margin-top: 15%; } } .s-search-info { padding: 10px 15px; } @media only screen and (min-width: 768px) { .s-search-info { padding: 10px 0 0px 0; } } .s-search { border-radius: 50px; border: none; width: 100%; margin: 0 auto; background-color: rgba(255, 255, 255, 0.15); padding: 10px; font-size: 12pt; text-align: center; -webkit-transition: background-color 1s ease; -moz-transition: background-color 1s ease; -o-transition: background-color 1s ease; -ms-transition: background-color 1s ease; transition: background-color 1s ease; } @media only screen and (min-width: 768px) { .s-search { font-size: 15pt; text-align: left; width: 100px; border-radius: 50px 0 0 50px; padding: 14px 14px 14px 28px; } } @media only screen and (min-width: 768px) { .s-search { width: 500px; } } #loginform input[type="text"], .s-search:focus, .s-btn:focus { outline: none !important; box-shadow: none !important; } .s-search:focus, .s-search:not(:empty) { background-color: rgba(255, 255, 255, 0.5); } .s-btn { display: list-item; border: none; border-radius: 50px; background-color: #fff; padding: 10px; color: #666; width: 100%; margin: 10px auto; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } @media only screen and (min-width: 768px) { .s-btn { margin-right: 32px; width: 125px; border-radius: 0 50px 50px 0; display: inline-block; margin-left: -5px; padding: 20px 18px 16px 18px; } } .s-btn:hover { background-color: #000; color: #fff; } /* Biblio ================================ */ .label { border-radius: 0; font-weight: 300; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; } .label-important { background-color: #f00; } .detailLink { background-color: #f2f2f2; color: #000; margin-right: -5px; padding: 10px 10px; } .xmlDetailLink { background-color: #282828; color: #fff; padding: 10px; } .s-xml-detail { padding: 10px 49px !important; } .citationLink { background-color: #777; color: #fff; margin-right: -5px; padding: 10px 10px; } .biblioRecord { position: relative; float: left; width: 45%; padding: 10px 20px; min-height: 440px; text-align: center; margin-right: 15px; border: solid 1px #f2f2f2; margin-bottom: 15px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @media only screen and (max-width: 768px) { .biblioRecord { float: none; width: 100%; } } .biblioRecord:hover { border-color: #ccc; } .biblioRecord:last-child { margin-right: 0; } .biblioRecord .cover-list { border-radius: 4px; background: transparent url(img/book.png) top left no-repeat; background-size: cover; background-color: #FFF; margin: 0 auto; -webkit-box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.1), 0 12px 26px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.1), 0 12px 26px 0 rgba(0, 0, 0, 0.1); position: relative; width: 120px; height: 165px; margin: 50px auto 15px auto; overflow: hidden; } .biblioRecord:hover .cover-list { -webkit-transition: bottom 1s ease-in-out; transition: bottom 1s ease-in-out; -webkit-animation-name: coverUp; animation-name: coverUp; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes coverUp { 0% { bottom: 0px; } 50% { bottom: 10px; } 100% { bottom: 0px; } } keyframes coverUp 0% { bottom: 0px; } keyframes coverUp 50% { bottom: 10px; } keyframes coverUp 100% { bottom: 0px; } .biblioRecord .cover-list .img-thumbnail { padding: 0; border-radius: 0; height: 166px; width: 121px; border: none; vertical-align: top; font-size: 0; top: -1px; left: -1px; bottom: -1px; right: -1px; position: absolute; z-index: 1; } .biblioRecord .cover-list:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; left: -2px; } .biblioRecord .cover-list:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; -webkit-box-shadow: inset 4px 0px 10px -4px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 0 rgba(255, 255, 255, 0.2); box-shadow: inset 4px 0px 10px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 0 rgba(255, 255, 255, 0.2); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); } .biblioRecord .detail-list h4 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.8em; line-height: 1.4em; } .biblioRecord .author { font-family: Georgia, serif; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 1em; line-height: 1em; margin-bottom: 10px; } .biblioRecord .author-name { font-size: 10pt; padding: 0; margin-top: 0; } @media only screen and (min-width: 1024px) { .biblioRecord .subItem { bottom: 10px; margin-left: 18px; position: absolute; } } .biblioRecord .detailLink, .biblioRecord .xmlDetailLink, .biblioRecord .citationLink { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; -webkit-transition: background-color 500ms; transition: background-color 500ms; color: #fff; padding: 10px 10px; } .biblioRecord .detailLink { background-color: #f2f2f2; color: #000; } .biblioRecord .xmlDetailLink { background-color: #777; } .biblioRecord .citationLink { background-color: #282828; } .biblioRecord .detailLink:hover, .biblioRecord .xmlDetailLink:hover, .biblioRecord .citationLink:hover { background-color: #852836; color: #fff; } .customField { font-size: 8pt; line-height: 14pt; text-align: center; border: solid 1px #f2f2f2; margin-bottom: -1px; background-color: #fff; padding: 0; } /* Biblio Detail ================================ */ .s-detail .cover { height: 250px; max-width: 185px; border-radius: 4px; background: transparent url(img/book.png) top left no-repeat; background-size: cover; background-color: #FFF; margin: 0 auto; -webkit-box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.1), 0 12px 26px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.1), 0 12px 26px 0 rgba(0, 0, 0, 0.1); position: relative; } .s-detail .cover:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; } @media only screen and (min-width: 768px) { .s-detail .cover { float: right; overflow: hidden; margin: 50px 0 0 50px; } } .s-detail-type { padding: 20px 0 0 0; margin: 0 auto; width: 100%; text-align: center; } @media only screen and (min-width: 768px) { .s-detail-type { padding: 0; margin: 0; width: auto; text-align: left; } } .s-detail .share-buttons { float: right; padding-top: 0; } .s-detail .s-detail-abstract p { display: block; text-align: justify !important; } .s-detail .s-detail-abstract { width: 100%; font-style: italic; font-family: Raleway, serif; line-height: 1.6em; font-size: 11pt; } .s-detail .s-detail-abstract:empty { display: none; } .s-detail .s-detail-abstract br:not(:first-child) { /*display: none;*/ } .s-detail .cover img { background-size: 100%; height: 250px; } .s-detail .s-detail-title { font-family: Arial, serif; font-weight: 900 !important; font-size: 18pt; line-height: 24pt; padding-top: 5px; padding-bottom: 20px; margin-bottom: 20px; text-transform: capitalize; } .s-detail .form-horizontal { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .s-detail .form-horizontal .control-group { margin: 0; -webkit-column-break-inside: avoid; /* Chrome, Safari */ page-break-inside: avoid; /* Theoretically FF 20+ */ break-inside: avoid-column; /* IE 11 */ display: table; } .control-label { font-size: 8px; text-transform: uppercase; letter-spacing: 4px; width: 100%; display: inline-block; width: 500px; padding-top: 10px; padding-bottom: 10px; } .s-detail-author { display: inline; font-family: Raleway, serif; } .s-detail-author a:first-child:before { content: ''; } .s-detail-author a:before { content: ' | '; } .s-detail-author br { display: none; } .labels { width: 48px; display: inline-block; position: absolute; top: -5px; right: -5px; z-index: 1099; } /* Collection Mark ================================ */ .biblioRecord .biblioCheck { position: fixed; top: 10px; right: 10px; z-index: -1; } .biblioRecord .biblioCheck + label { cursor: pointer; background: #282828; width: 100%; position: fixed; top: 0px; right: 0px; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #fff ; padding: 4px 0; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .biblioRecord .biblioCheck:checked + label:before { font-family: FontAwesome; content: "\f00c"; color: #fff; padding-right: 10px; } .biblioRecord .biblioCheck:checked + label, .biblioRecord .biblioCheck + label:hover { background: #060; color: #ffffff; } .biblioMarkFormAction { padding: 10px 0; } .biblioMarkFormAction:first-child { margin-bottom: 10px; } .biblioMarkFormAction:last-child { margin-bottom: -15px; } .biblioMarkFormAction input { border: none; background: #282828; color: #fff; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; padding: 5px 26px; margin-left: -10px; } /* Download ================================ */ .attachList { position: relative; padding: 0; } .attachment-pdf, .attachment-audio-video, .attachment-audio-audio, .attachment-url-list, .attachment-image { list-style: none; list-style-image: none !important; margin: 0; border: solid 1px #f2f2f2; padding: 20px 28px; font-size: 14px; line-height: 18pt; vertical-align: middle; } .attachment-pdf:before, .attachment-audio-video:before, .attachment-audio-audio:before, .attachment-url-list:before, .attachment-image:before { position: absolute; right: 10px; top: 30%; font-family: 'FontAwesome'; display: block; color: #20b390; font-size: 28px; } .attachment-pdf:before { content: "\f1c1"; } .attachment-image:before { content: "\f1c5"; } .attachment-audio-audio:before { content: "\f1c7"; } .attachment-audio-video:before { content: "\f1c8"; } .attachment-url-list:before { content: "\f1c9"; } /* Librarian ================================ */ .librarian { position: relative; float: left; width: 45%; padding: 10px 20px; min-height: 423px; text-align: center; margin-right: 15px; border: solid 1px #f2f2f2; margin-bottom: 15px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .librarian .span2 div, .librarian-image { width: 125px; height: 125px; overflow: hidden; border-radius: 50%; margin: 20px auto; border: solid 1px #f2f2f2; } .librarian img { width: 125px; } .librarian .key { font-size: 12px; margin-bottom: -15px; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #000; } .librarian .key + div { border-bottom: solid 1px #f2f2f2; padding-bottom: 15px; } .librarian div:empty:before { content: '-'; } .librarian-social { list-style: none; margin: 0; padding: 0; } /* Comments ================================ */ .comments { padding-top: 10px; padding-bottom: 14px; } .comment-found { font-size: 10px; } .comment-member { text-transform: uppercase; font-size: 10pt; font-weight: 300px; } .comment-content { background: #f2f2f2; padding: 15px; } .comment-form textarea { width: 100%; padding: 15px; border-color: #f2f2f2; } .comment-form .button { border: none; background: #282828; color: #fff; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; padding: 5px 15px; width: 100%; } /* Member ================================ */ .tagline { font-size: 30px; border-bottom: solid 1px #f2f2f2; padding-top: 53px; padding-bottom: 20px; margin-bottom: 20px; } .loginInfo { padding-bottom: 50px; } .loginInfo .login_input input { border: none; padding: 5px 10px; background: #f2f2f2; color: #333; width: 300px; } .memberButton { padding: 2px 20px !important; margin-top: 20px; } .loginInfo .fieldLabel { font-size: 10pt; padding: 10px 0; } /* Member Detail ================================ */ .memberBasketList, .memberDetail { border: none; } .memberDetail .alterCell { background-color: #f2f2f2; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; padding: 0px 15px; width: auto !important; text-align: right; border-color: #E1E1E1; } .memberDetail .alterCell2 { border-color: #eee; padding: 0px 15px; } .memberLoanList { border: none; } .memberBasketList .alterCell td, .memberLoanList .alterCell td { background: #ddd; } .memberBasketList .alterCell2 td, .memberLoanList .alterCell2 td { background: #f2f2f2; } .memberBasketList .alterCell td, .memberBasketList .alterCell2 td, .memberLoanList .alterCell td, .memberLoanList .alterCell2 td { border: none; padding: 10px; font-size: 10pt; } .dataListHeader { background: #282828; color: #fff; letter-spacing: 4px; font-size: 8px; font-weight: 900; text-transform: uppercase; } .dataListHeader a { color: #fff; display: block; padding: 5px 10px; } .dataListHeader a:hover { color: #fff; background: #852836; } #loginButton { padding: 5px 35px !important; margin: 10px 0 10px -15px; } .memberDetail input { width: 100%; border: solid 1px #f2f2f2; margin: 5px -10px; } .memberBasketInfo { font-size: 12pt; } .memberBasketAction a { background-color: #282828; color: #fff; padding: 10px 15px; letter-spacing: 4px; font-size: 8px; text-transform: uppercase; -webkit-transition: all 500ms; transition: all 500ms; } .memberBasketAction a:hover { background: #852836; } #memberChangePassword .alterCell2 { border-color: #f2f2f2; } /* Member Logged ================================ */ .alert-member-login { background: transparent; text-align: left !important; border: none !important; box-shadow: none; } #memberLogout { clear: both; color: #fff !important; background-color: #282828; } #memberLogout { clear: both; color: #fff !important; background-color: #852836; } /* Page ================================ */ .s-main-page { background-color: #fff; margin-top: 200px; position: relative; } @media only screen and (min-width: 768px) { .s-main-page { margin-top: 217px; min-height: 100%; width: 100%; } } .s-main-page .s-main-search { top: -175px; left: 0; margin: 0 auto; text-align: center; position: relative; } @media only screen and (min-width: 768px) { .s-main-page .s-main-search { top: -95px; text-align: right; right: 0; position: absolute; } } .s-main-page .s-main-title { color: #fff; text-align: center; position: absolute; left: 0; top: 120px; padding-bottom: 25px; font-size: 20pt; width: 100%; display: inline-block; margin: 0; } @media only screen and (min-width: 768px) { .s-main-page .s-main-title { top: 20px; text-align: left; padding-left: 50px; } } .s-main-page form h1, .s-main-page form .s-search-info { display: none; } .s-main-page .s-main-content { line-height: 24pt; } @media only screen and (max-width: 480px) { .s-main-page .s-main-content { margin-top: -90px; } } .s-main-page .s-main-search .s-search { width: 100%; } @media only screen and (min-width: 768px) { .s-main-page .s-main-content { line-height: 24pt; padding: 50px 50px 100px 35px; } .s-main-page .s-main-search .s-search { width: 300px; } } /*Cluster*/ .cluster-list { list-style: none; margin: 0; padding: 0; } .cluster-title { font-weight: bold; font-size: 12pt; letter-spacing: 4px; text-transform: uppercase; border-bottom: solid 1px #f2f2f2; padding-bottom: 20px; } .cluster-list .cluster-item a { padding: 0; margin: 0; color: #000; font-size: 9pt; letter-spacing: normal; text-transform: none; border-bottom: solid 1px #f2f2f2; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; position: relative; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .cluster-list .cluster-item a:hover { color: blue; background-color: #f2f2f2; padding-left: 10px; } .cluster-item-count { position: absolute; right: 0; background-color: #282828; color: #fff; min-width: 30px; text-align: center; padding: 2px 5px !important; line-height: normal; margin-top: 5px; } /* Table ================================ */ .s-table { border-width: 0; border-collapse: collapse; margin: 1.5em 0; padding: 5px 10px; line-height: 2; max-width: 100%; width: 100%; border-spacing: 0; } .s-table tr { border-bottom: 1px dotted #f2f2f2; } .s-table td, .s-table th { vertical-align: top; padding-top: 8px; border-width: 0; padding-bottom: 0; } .s-table td { border-collapse: collapse; margin: 1.5em 0; padding: 5px 10px; } .s-table th { font-weight: 300; font-size: 10px; letter-spacing: 2px; text-align: right; text-transform: uppercase; vertical-align: middle; background-color: #f2f2f2; color: #000; padding: 0px 10px; width: 150px; } .s-subject a { -webkit-transition: background-color 500ms ease; transition: background-color 500ms ease; } /* Paging ================================ */ .biblioPaging { width: 100%; padding: 20px 0; margin-left: 2px; } @media screen and (min-width: 768px) { .biblioPaging { float: left; } } .biblioPaging b, .biblioPaging a { display: inline; margin: 0 -7px; padding: 10px 11px; font-size: 7pt; letter-spacing: 4px; text-transform: uppercase; background-color: #fff; border: solid 1px #f2f2f2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webikit-transition: all 500ms; transition: all 500ms; } .biblioPaging a:hover, .biblioPaging b { background: #282828; color: #fff; } /* Login ================================ */ #loginForm { padding: 75px 20px 50px 20px; position: relative; margin: 0 auto 26px auto; background-color: #fff; min-height: 100%; } @media only screen and (min-width: 768px) { #loginForm { border-radius: 4px; width: 300px; } } .s-login-content { position: relative; } #loginForm .heading1 { letter-spacing: 4px; font-size: 8pt; text-transform: uppercase; color: #000; } #loginForm input[type="password"], #loginForm #userName { padding: 8px 20px 8px; font-size: 15pt; width: 100%; color: #000 !important; margin: 10px auto; text-align: center; border: solid 1px #f2f2f2; } #loginForm input[type=text].login_input, #loginForm input[type=password].login_input { color: #333; border-radius: 50px; } #loginForm input[type=text].login_input { background: transparent url(img/username.png) 7px 6px no-repeat; background-size: 32px; } #loginForm input[type=password].login_input { background: transparent url(img/password.png) 7px 6px no-repeat; background-size: 32px; } #loginForm input[type=text]:focus, #loginForm input[type=password]:focus { outline: 0; } #loginForm input[type=text]:focus:-webkit-autofill, #loginForm input[type=password]:-webkit-autofill { -webkit-box-shadow: 0 0 0 500px #fff inset; } .login_input { position: relative; } .loginButton { border-radius: 50px; color: #ccc; background-color: #282828; border: none; width: 100%; -webkit-transition: background-color 500ms ease; transition: background-color 500ms ease; letter-spacing: 4px; text-transform: uppercase; font-size: 10px; } .homeButton:hover, .loginButton:hover { background-color: #ff0; color: #000; } .loginButton { margin-top: 10px; padding: 15px 0; } .homeButton { position: absolute; padding: 15px 0; background: #ccc; border: none; color: #000; letter-spacing: 4px; text-transform: uppercase; font-size: 10px; width: 100%; margin: 0 auto; bottom: -28px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; left: 0; } @media only screen and (min-width: 768px) { .s-login { margin-top: 75px; } } #loginButton, .memberButton, .s-main-content .col-lg-4 a, .s-detail .btn, .xmlResultLink { border-radius: 0; border: none; background-color: #282828; font-size: 8px; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; color: #fff; padding: 10px 29px; -webkit-transition: background-color 500ms ease; transition: background-color 500ms ease; } #loginButton:hover, .memberButton a:hover, .s-subject a:hover, .xmlResultLink:hover { background-color: #f00; color: #000; } /*Recaptch*/ #loginForm #recaptcha_area { padding: 20px 0; position: relative; } #loginForm #recaptcha_area table { border: none !important; } #loginForm .recaptchatable .recaptcha_image_cell { background-color: white; height: 55px !important; padding: 0px 7px !important; width: 220px; } #loginForm .recaptchatable .recaptcha_image_cell center img { height: 55px !important; width: 213px; } #loginForm .recaptchatable #recaptcha_image { border: medium none !important; float: left; margin: auto; width: 215px !important; } #loginForm .recaptchatable #recaptcha_response_field { left: -8px; text-align: center; position: absolute; top: -20px; width: 255px !important; padding: 10px; border-color: #f2f2f2 !important; border-radius: 50px; } #loginForm #recaptcha_logo, #recaptcha_tagline { display: none; } #loginForm #recaptcha_area td { border: 0 none !important; border-collapse: collapse !important; float: left; margin: 0 !important; vertical-align: middle !important; } #loginForm .recaptchatable .recaptcha_only_if_privacy a { position: absolute; top: 0px; float: none !important; text-align: center !important; width: 255px !important; letter-spacing: 4px; text-transform: uppercase; font-size: 8pt !important; color: #000; } .s-visitor { padding-bottom: 30px; } @media only screen and (min-width: 768px) { .s-visitor { width: 640px; margin-top: 100px; padding-bottom: 0; } } .s-visitor header span { font-size: 8; font-weight: light; } .s-visitor input { border-radius: 50px; border: none; text-align: center; } .s-visitor input[type=submit] { padding: 0; background-color: #282828; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #fff; } .s-visitor label { font-size: 8px; letter-spacing: 4px; text-transform: uppercase; } .s-visitor header h1 { text-transform: uppercase; } .s-visitor-photo { border-radius: 100px; width: 100px; height: 100px; margin: 50px auto; overflow: hidden; } .s-visitor-photo img { vertical-align: bottom; } #visitorCounterPhoto { margin: 0; } /* Social Icon ================================ */ .share-buttons { clear: both; list-style: none; margin: 3px auto; text-align: center; font-size: 8px; text-transform: uppercase; letter-spacing: 2px; position: relative; left: -20px; padding-bottom: 35px; } .share-buttons li:not(:first-child) { display: inline; padding-right: 5px; } .share-buttons li:first-child { padding-top: 10px; margin-bottom: 5px; line-height: 5px; } .share-buttons li:last-child { padding-right: 0; } .share-buttons li:not(:first-child) img { width: 18px; height: 18px; border-radius: 10px; } /* Colorbox for PDF Preview ================================ */ #cboxOverlay { background: #282828; opacity: 0.7; } #cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight { display: none; } #cboxTitle { bottom: 0px; position: absolute; padding: 20px 10px; background-color: #282828; color: #fff; overflow: hidden; letter-spacing: 2px; text-transform: uppercase; font-weight: lighter; font-size: 10px; white-space: nowrap; } #cboxClose { position: absolute; bottom: 15px; right: 15px; background: none; width: 25px; height: 25px; text-indent: 0px; } #cboxClose:before { font-family: 'FontAwesome'; content: '\f00d'; font-size: 20px; padding-right: 20px; padding-left: 8px; color: #fff; } #cboxClose:hover { background-position: 0; } /* Higlight search result ================================ */ .highlight { background: #930; color: #fff; } /* Alert ================================ */ .s-alert { background-color: #f2f2f2; color: red; padding: 10px; text-align: center; } /* Error ================================ */ .errorBox { border: none; background-color: #900; padding: 10px; color: #fff; position: relative; left: 0; width: 100%; text-align: center; margin: 0; display: inline-block; } /* For support browser ================================ */ .chromeframe { position: fixed !important; z-index: 9099; width: 100%; height: 100%; text-align: center; background-color: #fff; } #cboxContent { min-height: 375px; } /* Chat ================================ */ .s-pchat { position: relative; left: -25px; z-index: 1999; } @media only screen and (min-width: 768px) { .s-pchat { position: absolute; left: auto; right: 55px; margin: 0; top: -10px; } } .s-pchat a { display: block; color: #000; background-color: #fff; width: 30px; border-radius: 50px; padding: 3px 0 0 8px; height: 30px; margin: 20px auto 0 auto; } .s-pchat-toggle { cursor: pointer; width: 50px; height: 50px; position: absolute; left: -51px; bottom: 0; padding: 20px; color: #000; display: block; background: #fff; font-size: 8pt; border-width: 1px; border-style: solid; border-color: #f2f2f2; } @media only screen and (min-width: 768px) { #show-pchat { right: 0px; } } .s-chat { z-index: 3099; position: fixed; bottom: 0; right: -275px; -webkit-transition: all 150ms ease 0s; transition: all 150ms ease 0s; text-align: left; width: 275px; background: #fff; padding: 0; border-left: solid 1px #f2f2f2; border-right: solid 1px #f2f2f2; } @media only screen and (min-width: 768px) { .s-chat { bottom: 59px; } } .s-chat-header { text-align: center; border-top: solid 1px #f8f8f8; border-bottom: solid 1px #f8f8f8; display: block; background-color: #282828; width: 275px; padding: 21px 0; position: relative; font-size: 7pt; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .s-chat-content { padding: 18px 20px; } .s-chat-content label { padding: 10px 0; font-size: 8px; text-transform: uppercase; letter-spacing: 4px; } .s-chat-content #log { overflow-x: hidden; overflow-y: auto; max-height: 200px; padding: 10px; width: 100%; border: solid 1px #f8f8f8; font-size: 12px; } .s-chat-content #log p { line-height: 1; padding-bottom: 5px; margin: 0; } /* Chat theme */ .c1, .c6, .c11, .c16 { color: #3E966E !important; } .c2, .c7, .c12, .c17 { color: #F36C32 !important; } .c3, .c8, .c13, .c18 { color: #2A7BCC !important; } .c4, .c9, .c14, .c19 { color: #7C378A !important; } .c5, .c10, .c15, .c20 { color: #333333 !important; } .s-chat-content textarea, #message { width: 100%; border: solid 1px #f8f8f8; font-size: 12px; padding: 10px; } .s-chat-content #log, .s-chat-content textarea { min-height: 200px; line-height: 24px; } .s-chat footer { border-top: solid 1px #f8f8f8; font-size: 10px; padding: 8pt !important; } .s-maximize { right: 0; bottom: 0; -webkit-transition: all 150ms ease 0s; transition: all 150ms ease 0s; } @media only screen and (min-width: 768px) { .s-maximize { bottom: 59px; } } .s-chat .btn { border-radius: 0; margin-top: 5px; } .s-chat hr { margin: 16px 0; }