html, body { font-family: "Helvetica Neue", "DejaVu Sans", "Noto Sans", Helvetica, Arial, sans-serif; background: #404040; color: white; } h1 { text-align: center; } .MainGallery { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .BreadThumb { margin: 10px; cursor: pointer; } .BreadThumb img { max-height: 300px; box-shadow: 0 0 5px black; border-radius: 5px; } .BreadThumb header { padding-bottom: 5px; font-weight: bold; padding-left: 3px; } a { text-decoration: none; color: white; } .BreadDetail { } .BreadDetail .note { display: block; margin: 0 auto 10px; max-width: 800px; padding: 10px; border-left: 6px solid #676767; background: rgba(29, 29, 29, 0.25); } .BreadDetail .note a { color: #9bd6fc; text-decoration: underline; } .BreadDetail .note p:first-child { margin-top: 0; } .BreadDetail .note p:last-child { margin-bottom: 0; } .BreadDetail .images { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .BreadDetail .images img { margin: 10px; max-height: 500px; box-shadow: 0 0 5px black; border-radius: 5px; } #crumb { text-align: center; color: #999; } #crumb a { text-decoration: underline; color: #999; } #crumb a:hover { color: #ccc; } .prev, .next { font-size: 90%; padding: 0 1em; } #YearPager { font-size: 120%; list-style: none; display: block; text-align: center; padding: 0; } #YearPager li { display: inline-block; margin: 0; padding: 0; background: #333; border: 1px solid #999; border-right-width: 0; } #YearPager a { display: inline-block; padding: .5rem .8rem; } #YearPager li:hover { background: #444; } #YearPager li.active { font-weight: bold; } #YearPager li:last-child { border-right-width: 1px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; } #YearPager li:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }