/* ---------------------------------------------------------- 01 - HTML5 Boilerplate 02 - COMMON STYLES 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - SIDEBAR 07 - FRAMEWORK 08 - UTILITY 09 - PRINT COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =HTML5 Boilerplate ------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select {vertical-align:middle;} /* end HTML5 Boilerplate reset */ /* HTML5 boilerplate base styles */ html { overflow-y: scroll; } body { font:13px/1.231 sans-serif; *font-size:small; } select, input, textarea, button { font:99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } ul, ol { list-style-type: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } i, em { font-style: italic; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } .ie7 img { -ms-interpolation-mode: bicubic; } label, input[type=button], input[type=submit], button { cursor: pointer; } button, input, select, textarea { margin: 0; } button { width: auto; overflow: visible; } /* end HTML5 boilerplate base styles */ /* BSD base styles */ caption, th { text-align: left; } /* 02 =COMMON STYLES ------------------------- */ body { background-image:url(//www.ushmm.org/online/world-memory-project/page/-/wmp/images/wmp_background.jpg);background-color:#bbbbbb; background-repeat: repeat-x } select, input, textarea { color: #444; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } .base h1 { color:#000; font-size:30px; margin:0 0 10px; } .base h2 {font-size:16px;} .base h3 { font-size:16px; font-weight:normal; } .base h4 {font-weight:10px;} .base p { margin:0 0 10px; } a:hover, a:active { outline: none; } a, a:active, a:visited { color: #3973bb; text-decoration:none; } a:link { -webkit-tap-highlight-color: #3973bb; } blockquote { margin:20px; font-style:italic; } .base ul, .base ol { margin:0px 0 15px 1.8em; } .base ul li { list-style: disc; } .base ol li {list-style:decimal;} .button { display:block; background:#f37021; color:#fff; text-transform:uppercase; text-align:center; padding:5px 0 3px; text-decoration:none; } .readmore { color:#3973bb; font-weight: bold; text-decoration: none; } /* 03 =LAYOUT ------------------------- */ #container { width:960px; margin: 0 auto; background:#fff; } #global-header { background: url(//www.ushmm.org/online/world-memory-project/page/-/wmp/images/header_banner.png); height: 144px; width:959px; position:relative; } #global-header a { position:absolute; text-indent:-999em; } #home-logo { height:144px; width:325px; } #ushmm-logo { left:805px; height:90px; width:140px; } #ancestry-logo { left:570px; height:50px; width:220px; } #quicksignup { position:absolute; top:100px; left:544px; width:330px; } #global-header iframe { position:absolute; left:873px; top:105px; } .ie6 #quicksignup, .ie7 #quicksignup, .ie8 #quicksignup { width:325px; } #quicksignup #legend { color:#f37021; font-size: 16px; text-transform: uppercase; float:left; margin:0 5px 0 0; padding:3px 0 0 0; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:normal;} #persist-email { border:1px solid #000; color:#999999; padding:5px 5px 4px 5px; font-size:13px; width:160px; } #global-footer { background:#85878a; text-align:center; padding:10px 0; margin:0 0 20px; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:100; letter-spacing:.5px;} #global-footer li { display:inline; border-right:1px solid #fff; padding:0 10px; } #global-footer li.lastitem { border:none; padding-right:0px; } #global-footer a { color:#fff; text-decoration:none; font-size:16px; } /* 04 =HOMEPAGE ------------------------- */ #hero {background:#000; height:420px; } #hero-description { float:left; width:320px; padding:40px; color:#fff; } #hero-description h1 { background:url(//www.ushmm.org/online/world-memory-project/page/-/wmp/images/wmp_lp_textgraphic.gif) no-repeat; text-indent:-999em; height:92px; margin:0 0 10px; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:normal;} #hero-description p {font-size:15px;} #hero-description a { color:#fff; text-decoration:underline; } #hero-description .button { margin:20px auto 0; width:250px; font-size:24px; text-decoration:none; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif;} #hero-image {float:left;} #hero-image img {display:block;} #home-content { padding:15px; color:#545454; } .home-column { width:235px; float:left; margin:0 20px 0 0; padding:0 10px; } .ie6 .home-column { width:184px; } .ie7 .home-column, .ie8 .home-column { width:229px; } .home-column h1 { color:#f37021; text-transform:uppercase; font-size:18px; margin:0 0 10px; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:normal;} .home-column:first-child { width:372px; padding:0px; } .home-column:first-child h1 { font-size:14px; color:#545454; text-transform:none; margin:5px 0; } .home-column:last-child {margin:0px;} .article-summary { margin:0 0 15px; } .article-date { font-weight:bold; font-style:italic; } #contrib-container { background:#c8c8c9; padding:10px; margin:0 0 10px; } #contributors { width:105px; } #records { float:left; width:95px; } #contrib-container p { color:#545454; font-size:22px; } #contrib-container p.num-title { color:#fffefe; font-size:14px; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:normal;} /* 05 =SUBPAGES ------------------------- */ .interior #main, #framework { background:url(//www.ushmm.org/online/world-memory-project/page/-/wmp/images/fuzzrule.jpg) no-repeat; padding:40px; } .entry { background:#f5f5f5; padding:15px 20px; border:1px solid #d7d7d7; margin:0 10px 10px 0; } .entry h2 {font-size:16px;} .entry { font-size:15px; color:#545454; } .main-video { background:#000; text-align:center; padding:20px; margin:0 0 15px; } .video-info { margin:0px 0 15px; } #video-top-bar p { margin:0; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif;font-weight:normal; } #video-top-bar a { color:#545454; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif;font-weight:normal;} #video-top-bar h1 { font-size:30px; color:#f37021; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif;font-weight:normal;} .video-info { /* float:left; width:600px; */ color:#545454; } .video-info h2 { font-size:18px; } #video .button { float:right; font-size:24px; width:250px;} #video-list-counter { float:right; margin:0 0 10px; } .video-entry { float:left; width:210px; height:375px; margin:0 10px 0 0; color:#545454; } .video-entry.active-vid { position:relative; } .video-entry.active-vid a:after { position:absolute; width:100%; height:5px; background:#f37021; content:''; top:152px; left:0px; } .video-entry .video-title { font-weight:bold; font-size:14px; margin:0 0 3px; } .video-entry:last-child {margin:0px;} /* 06 =SIDEBAR ------------------------- */ /* 07 =FRAMEWORK ------------------------- */ #framework #invitationpage #submit_button { background:#f37021; border:none; padding:5px 15px; text-transform:uppercase; } /* ----- Quick Donate Adjustments ----- */ #constituent_content .logintitle, #constituent_content .signuptitle, .managetitle { color: #000; } #bsd-quick-donate-update, #bsd-quick-donate-back, #BSD-qd_optin-facebookOauth, #BSD-qd_optin-skip { display: block; } #NewAccountOptIn #BSDForm-mobile_optin { margin: 9px 0; } /* 08 =UTILITY ------------------------- */ .cufon-loading * { visibility: hidden !important; } .floatl { float: left; margin: 0; padding: 0 10px 10px 0; } .floatr { float: right; margin: 0; padding: 0 0 10px 10px; } .required { color: red; } .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } ::-moz-selection{ background: #1fb9e7; color:#fff; text-shadow: none; } ::selection { background:#1fb9e7; color:#fff; text-shadow: none; } /* 09 =PRINT ------------------------- */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; } /* hide disqus since it is extraneous content that just increases page size */ #disqus_thread {display:none;} a.dsq-brlink {display:none;} /* float blog entry images to decrease page length */ #main {overflow:hidden;} #main img { float:left; clear:both; /*keeps images from piling up next to each other*/ margin:0 10px 10px 0; } } @media only screen and (max-width: 480px) { html { width:100%; overflow-x:hidden; } body { min-width:initial !important; } .mobile {overflow-x:hidden; } .mobile #framework { padding:3%; } .mobile #container { width:100%; } .mobile label { font-size:16px; display:block; margin:10px 0 0;} .mobile input, .mobile select { display:block; width:98%; font-size:16px; padding:5px 0; } .mobile #signup input[type="submit"] { background:url(//www.ushmm.org/online/world-memory-project/page/-/wrapper/_files/btn_mobile_submit_.png) no-repeat #f37021 55% 9px; height:35px; padding:0 20px; text-indent:-999em; border:none; } .mobile #global-footer li { display:block; border:none; margin:0 0 5px; font-weight:normal; font-family:'Knockout 50 A', 'Knockout 50 B', 'Arial Narrow', 'Trebuchet MS', Helvetica, sans-serif; font-weight:normal; } }