/* * homepage.css, 1.0 2015-Sep-14 * * (c) 2014 Computer History Museum http://www.computerhistory.org * * Edit according to styleguide * */ #page { background-image: none !important; overflow: visible; } #header-bottom { border-bottom-color: #e5e5e5; } a, a:hover { text-decoration: none; outline: none; } /* SLIDESHOW BLOCK -------------------------------------------------------------- */ #homepage-slideshow { display: block; background-color: #ffffff; z-index: 100; width: 958px; overflow: hidden; } #splash { position: relative; display: block; float: left; height: 445px; width: 960px; background-color: #ffffff; } #splash-main, #splash-main-galeria { position: relative; display: block; float: left; width: 635px; height: 445px; overflow: hidden; } #splash-main-galeria div.info { display: block; position: absolute; left: 40px; bottom: 40px; min-height: 40px; min-width: 320px; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/misc/transparent-bg.png); overflow: hidden; text-align: left; padding: 10px 20px; color: #f2f2f2; z-index: 1000; } #splash-main-galeria div.info a { color: #f2f2f2; } #splash-main-galeria div.info .title { display: block; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 18px; line-height: 21px; letter-spacing: 1px; color: #f2f2f2; } #splash-main-galeria div.info .hours { display: block; position: relative; } #splash-main-galeria div.info .hours .days { display: block; width: 60%; float: left; font-weight: 600; } #splash-main-galeria div.info .hours .hours { display: block; width: 40%; float: right; text-align: right; } #splash-main-galeria div.info .hours .hours i.fa { color: #f2f2f2; } #splash-main-galeria div.info .hours .note { display: block; font-size: 0.85em; } #splash-right-top { display: block; float: right; position: relative; width: 325px; height: 220px; overflow: hidden; margin-bottom: 5px; } #splash-right-bottom { display: block; float: right; position: relative; width: 325px; height: 220px; overflow: hidden; } #splash-main, #splash-main-galeria, #splash-right-top, #splash-right-bottom { -webkit-transform: translate3d(0, 0, 0); -transform: translate3d(0, 0, 0); } #splash-right-top div.title, #splash-right-bottom div.title { display: block; position: absolute; left: 0px; right: 0px; bottom: 0px; min-height: 40px; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/misc/transparent-bg.png); overflow: hidden; text-align: right; padding: 10px 20px 10px 10px; color: #f2f2f2; z-index: 1000; } #splash-right-top div.title span.title, #splash-right-bottom div.title span.title { display: block; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 18px; line-height: 21px; letter-spacing: 1px; } #splash-right-top div.title span.subtitle, #splash-right-bottom div.title span.subtitle { display: block; } #splash-right-top div.title a, #splash-right-bottom div.title a { color: #f2f2f2; text-decoration: none; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } #splash-right-top div.title a:hover, #splash-right-bottom div.title a:hover { /*-webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important;*/ } .splashviewonline { box-sizing: content-box; position: relative; float: left; width: 125px; height: 71px; top: 340px; left: 188px; cursor: pointer; z-index: 1000; } .splashviewonline span { display: none; } .ft-next, .ft-prev { display: none;} .ft-title { display: none; } .ft-button-splash-main { box-sizing: content-box; display: inline-block; width: 12px; height: 12px; background: url("/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/icon-bullets-close.png") 0 0 no-repeat; font-size: 0px; } .ft-button-splash-main-active { background: url("/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/icon-bullets-open.png") 0 0 no-repeat;} #ft-buttons-splash-main { box-sizing: content-box; position: absolute; display: block; bottom: 35px; right: 30px; } #ft-buttons-splash-main a { text-decoration: none; } /* EVENTS BLOCK -------------------------------------------------------------- */ #homepage-events { display: block; z-index: 1; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/homepage/events-outer.jpg) repeat-x left top; width: 958px; overflow: visible; border-bottom: 1px solid #e5e5e5; } #events-body { position: relative; display: block; width: 975px; margin-left: -15px; height: 100%; height: 175px; padding: 24px 0 20px 24px; overflow: hidden; text-align: left; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/homepage/events-inner.jpg) no-repeat;} #events-body h2 { color: #666666; /*letter-spacing: 2px;*/ } #events-body #viewcalendar { position: absolute; bottom: 0px; right: 0; display: block; width: 180px; height: 20px; z-index: 1000; } #events-body #viewcalendar a { display: block; width: 180px; height: 20px; line-height: 20px; text-align: center; color: #222222; background-color: #d0ccb5; } #events-body #viewcalendar a:hover { color: #000000; } #events-body #viewcalendar a img { vertical-align: middle; margin-right: 10px; } #events-body div.buttons { display: block; float: left; width: 180px; overflow: hidden; } #events-body div.buttons a#donate { display: block; width: 160px; height: 85px; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/homev2/donate-btn.jpg) 0 0 no-repeat; outline: none; margin: 12px 0; float: right; } #events-body div.buttons a#donate:hover { background-position: 0px -85px; } #events-body div.events { display: block; float: right; width: 768px; overflow: hidden; border-left: 1px solid #f1d9c3; } #events-body div.event { position: relative; display: block; width: 765px; padding: 8px 0px 10px 0px; } #events-body div.event:hover { background-color: #f6ffe9;} #events-body div.event a.event { position: relative; display: block; float: left; width: 100%; /*height: 100%;*/ outline: none; } #events-body div.event div.date { display:block; float:left; width: 177px; padding: 0 10px 0 0; overflow: hidden; text-align:right; } #events-body div.event div.date span.date { display: block; color: #222222; font-size: .9em; line-height: .9em; margin-top: 5px; } #events-body div.event div.date span.category { display: block; color: #999999; font-size: .9em; } #events-body div.event div.date span.ical { display: block; } #events-body div.event div.info { display: block; float: right; width: 587px; padding: 0 10px; border-left: 2px dashed #cccccc; overflow: hidden; } #events-body div.event div.info span.title { display: block; color: #0099AA; font-size: 1.15em; line-height: 1.25em; } #events-body div.event div.info span.summary { display: block; color: #5f5f5f; font-size: 0.9em; line-height: 1.1; } #events-body div.event div.info span.subtitle { display: block; color: #777777; font-size: .9em; line-height: .9em; } .info .summary { color: #444;} /* HIGHLIGHTS BLOCK -------------------------------------------------------------- */ #homepage-highlights { display: block; background-color: #f5f5f5; z-index: 100; width: 958px; overflow: hidden; } #homepage-highlights a:hover { text-decoration: none !important; } #homepage-highlights p { line-height: 1.4em; } #homepage-highlights h2, #homepage-highlights h3 { color: #6f6949; font-weight: 400 !important; } #homepage-highlights a:hover h2, #homepage-highlights a:hover h3 { text-decoration: none !important; color: #6f6949 !important; } #homepage-highlights div.featured { display: block; margin: 30px 0px 30px 40px; background-color: #e3e4e4; padding: 20px 15px; overflow: hidden; } #homepage-highlights div.featured h3.title { margin: 0px 15px 0px 0px; } #homepage-highlights div.featured h5.subtitle { margin: 0px 15px 18px 0px; } #homepage-highlights a.featured { display: block; overflow: hidden; } #homepage-highlights a.featured:hover { text-decoration: none !important; } #homepage-highlights a.featured p { color: #555555; } #homepage-highlights div.highlights { margin: 30px 0px 30px 0px; overflow: hidden; } #homepage-highlights div.highlights h2.title { margin: -4px 24px 18px 40px; color: #111111; font-family: "Lato",sans-serif; font-weight: 300 !important; font-size: 24px; line-height: 28px; } #homepage-highlights div.highlights div.highlight { display: block; padding: 24px 24px 12px 40px; cursor: default; /*-webkit-transform: translate3d(0, 0, 0);-transform: translate3d(0, 0, 0);*/ } #homepage-highlights div.highlights div.highlight h3.title { margin: -5px 24px 12px 0px; letter-spacing: 1px; font-size: 18px; line-height: 22px; } #homepage-highlights div.highlights div.highlight div.highlight-content { padding-left: 40px; } #homepage-highlights div.highlights div.hover { background-color: #F6FFE9; cursor: default; } #homepage-highlights div.highlights a.highlight { display: block; float: right; overflow: hidden; clear: both; text-decoration: none !important; color: #555555; } #homepage-highlights div.highlights div.info { display: block; float: right; /*height: 110px;*/ color: #555555; overflow: hidden; } #homepage-highlights div.highlights .bg { background-image: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_common/img/homev2/highlight-bg.png); background-position: bottom center; background-repeat: no-repeat; } #homepage-highlights div.highlights div.info h3, div#content div.main div.featured h3 { color: #6f6949; display: block; cursor: pointer; letter-spacing: 1px; font-size: 1.3em; font-weight: normal; } /* SOCIAL NUMBERS & INFO BLOCK -------------------------------------------------------------- */ #homepage-info-and-social { display: block; z-index: 1; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/homepage/footer-outer.jpg) top repeat-x; width: 958px; height: /*176px*/ 194px; overflow: visible; border-bottom: 4px solid #5e5e5; } #homepage-info-and-social #info-and-social-body { position: relative; display: block; width: 975px; margin-left: -15px; height: 100%; height: /*176px*/ 194px; padding: /*40px 0 30px 0*/ 28px 0; overflow: hidden; text-align: left; background: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/homepage/footer-inner.jpg) top left no-repeat;} #homepage-info-and-social #info-and-social-body div.address { display: block; float: left; /*height: 100px;*/ width: /*180px*/ 196px;margin-left: 50px; color: #333333; line-height: 1.25em; } #homepage-info-and-social #info-and-social-body div.join { display: block; float: left; /*height: 100px;*/ width: 240px; margin-left: 25px; } #homepage-info-and-social #info-and-social-body div.join a.join { display: block; float: left; height: /*32px*/ 28px; line-height: /*32px*/ 28px; font-size: /*1.15em*/ 1.1em; color: #333333; font-weight: 500; width: /*180px*/ 196px; border-bottom: 1px dashed #7c7c7c; padding-left: 20px; background-position: 1px /*13px*/ 11px; background-repeat: no-repeat; } #homepage-info-and-social #info-and-social-body div.join a.member { background-image: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/icons/icon-person_9x9.gif) } #homepage-info-and-social #info-and-social-body div.join a.twitter, #homepage-info-and-social #info-and-social-body div.join a.facebook, #homepage-info-and-social #info-and-social-body div.join a.youtube, #homepage-info-and-social #info-and-social-body div.join a.instagram { background-image: url(/National_Library/20160517234414oe_/http://www.computerhistory.org/_chm/img/icons/icon-dot_9x9.gif) } #homepage-info-and-social #info-and-social-body div.join a.join:hover { color: #000000; } #homepage-info-and-social #info-and-social-body div.info { display: block; float: left; /*height: 100px;*/ width: 240px; margin-left: 5px; } #homepage-info-and-social #info-and-social-body div.info div.entry { display: block; float: left; height: /*32px*/ 28px; width: /*240px*/ 266px; border-bottom: 1px dashed #7c7c7c; } #homepage-info-and-social #info-and-social-body div.info div.entry span.info { display: block; float: left; height: /*32px*/ 28px; line-height: /*32px*/ 28px; width: /*180px*/ 206px; font-size: /*1.15em*/ 1.1em; color: #900; font-weight: 500; } #homepage-info-and-social #info-and-social-body div.info div.entry span.number { display: block; width: 60px; height: 32px; line-height: 32px; font-size: 1.05em; float: right; text-align: right; color: #2c2c2c; } .t-red { color: #900 !important; } #footer { border-top: 1px solid #e5e5e5; }