block-explorer/webroot/css/main.css
Akinwale Ariwodola 31d515e992
Blocked claims (#81)
* handle blocked claims
* fix chainquery endpoint
* channel-level blocking
* don't show blocked claims in the result grid
* optimisation: break out of foreach loop if match found
* add caching for api request
* rename cache key
2020-01-07 23:13:38 +01:00

320 lines
26 KiB
CSS

* { box-sizing: border-box; font-family: 'jaf-facitweb', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
*:focus { outline: none }
.home-container { display: table; width: 100%; height: 100% }
.home-container-cell { display: table-cell; vertical-align: middle; min-height: 400px }
.main { display: block; width: 1200px; margin: 0 auto }
a:link, a:visited { color: #1e88e5; text-decoration: none }
a:hover { text-decoration: underline; color: #1976d2 }
.header { width: 1200px; margin: 0 auto 24px auto; padding: 12px 0 50px 0; border-bottom: 1px solid #ddd }
.header a:link, .header a:visited { color: #333; text-decoration: none }
.header .title { font-family: 'adelle-sans', sans-serif; font-weight: bold; font-size: 140%; float: left; position: relative; top: 4px }
.header .search { float: right }
.header .search .input-group { border: 2px solid #1e88e5; position: relative; width: 525px; height: 36px; border-radius: 8px }
.header .search .input-group input { border: none; border-radius: 8px; padding: 8px 133px 8px 8px; width: 100%; height: 32px; width: 521px }
.header .search .input-group .btn-inline-search { border: none; cursor: pointer; position: absolute; right: -4px; top: 0; height: 100%; background: #1e88e5; color: #fff; width: 125px;
border-radius: 0 8px 8px 0 }
.header .search .input-group .btn-inline-search:hover { background: #1976d2 }
.home-container-cell > .main > .title { font-family: 'adelle-sans', sans-serif; font-weight: bold; font-size: 280%; margin: 24px auto 24px auto; width: 600px; text-align: center; color: #333; cursor: default }
.home-container-cell .search-input { display: block; margin: 0 auto; padding: 8px; text-align: center; border: 3px solid #ddd; border-radius: 16px; width: 720px; font-size: 115%; font-weight: 300 }
.home-container-cell .ctls { width: 720px; text-align: center; margin: 24px auto; position: relative }
.home-container-cell .ctls .btn-search { font-size: 115%; display: inline-block; padding: 12px 48px; background: #1e88e5; color: #fff; border-radius: 8px; border: none; font-weight: 300; cursor: pointer }
.home-container-cell .ctls .btn-search:hover { background: #1976d2 }
.home-container-cell .ctls .left-links { display: inline-block; font-weight: 300; position: absolute; left: 0; padding-top: 12px; }
.home-container-cell .ctls .right-links { display: inline-block; font-weight: 300; position: absolute; right: 0; padding-top: 12px; }
.home-container-cell .ctls a { font-size: 115%; display: inline-block; margin-right: 12px }
.home-container-cell .ctls a.last { margin-left: 12px; margin-right: 0 }
.home-container-cell .ctls a:hover { text-decoration: none; color: #1976d2 }
.home-container-cell .recent-blocks { width: 1000px; margin: 48px auto 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 24px 36px 24px; cursor: default; position: relative }
.home-container-cell .recent-blocks h3 { font-weight: normal; margin: 0 0 12px 0; font-weight: 300 }
.home-container-cell .recent-blocks .all-blocks-link { position: absolute; right: 32px; top: 32px; font-size: 80% }
.home-container-cell .recent-claims { width: 1000px; margin: 48px auto 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 24px 36px 24px; cursor: default; position: relative }
.home-container-cell .recent-claims .claim-explorer-link { position: absolute; right: 32px; top: 32px; font-size: 80% }
.home-container-cell .recent-claims h3 { font-weight: normal; margin: 0 0 12px 0; font-weight: 300 }
.home-container-cell .recent-claims .claim-box { width: 184px; height: 330px; margin-right: 7px; float: left; box-shadow: 0 2px 4px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); cursor: pointer; overflow: hidden; position: relative }
.home-container-cell .recent-claims .claim-box.last { margin-right: 0 }
.home-container-cell .recent-claims .claim-box:hover { background: #fbfbfb }
.home-container-cell .recent-claims .claim-box .tags { font-size: 65%; position: absolute; right: 0; top: 0; z-index: 505 }
.home-container-cell .recent-claims .claim-box .thumbnail { width: 100%; height: 120px; background: #f0f0f0; display: block; position: relative; overflow: hidden;}
.home-container-cell .recent-claims .claim-box .thumbnail img { width: 100%; position: absolute; left: 0; top: 0; border-bottom: 1px solid #eee }
.home-container-cell .recent-claims .claim-box .thumbnail.purple { background: #ab47bc }
.home-container-cell .recent-claims .claim-box .thumbnail.orange { background: #e91e63 }
.home-container-cell .recent-claims .claim-box .thumbnail.blue { background: #42a5f5 }
.home-container-cell .recent-claims .claim-box .thumbnail.teal { background: #4db6ac }
.home-container-cell .recent-claims .claim-box .thumbnail.green { background: #66bb6a }
.home-container-cell .recent-claims .claim-box .thumbnail.yellow { background: #fdd835 }
.home-container-cell .recent-claims .claim-box .thumbnail .autothumb { display: block; margin: 33px auto 0 auto; text-align: center; font-size: 240%; color: #fff; line-height: 54px }
.home-container-cell .recent-claims .claim-box .tags > div { display: inline-block; padding: 4px 12px; margin-left: 2px }
.home-container-cell .recent-claims .claim-box .tags .nsfw { background: #e53935; text-align: center; color: #fff; position: relative; left: 1px }
.home-container-cell .recent-claims .claim-box .tags .content-type { background: #880e4f; text-align: center; color: #fff; }
.home-container-cell .recent-claims .claim-box .metadata { padding: 12px; font-size: 90% }
.home-container-cell .recent-claims .claim-box .title { font-size: 120%; height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.home-container-cell .recent-claims .claim-box .desc { font-size: 80%; font-weight: 300; height: 100px; overflow: hidden; text-overflow: ellipsis; margin: 3px 0; line-height: 20px }
.home-container-cell .recent-claims .claim-box .link { font-size: 80%; font-weight: 300; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; line-height: 20px; height: 20px }
.home-container-cell .recent-claims .claim-box .tx-link { font-size: 80%; font-weight: 300; color: #fff; background: #1e88e5; position: absolute; bottom: 0; width: 100%; display: block; line-height: 20px; height: 32px; padding: 6px 0; text-align: center; cursor: pointer }
.home-container-cell .recent-claims .claim-box .tx-link:hover { text-decoration: none; background: #1976d2 }
.claims-head h2 { font-weight: 300; margin-bottom: 0; font-size: 220% }
.claims-head { width: 1200px; margin: 0 auto 24px auto; cursor: default }
.claims-head h3, h4 { font-weight: 300; margin: 0 }
.claims-head h3 { font-size: 170%; margin-bottom: 3px }
.claims-head h4 { font-size: 125% }
.claims-grid { width: 1200px; margin: 0 auto 0 auto; cursor: default }
.claims-grid .claim-grid-item { width: 360px; height: 560px; margin-right: 60px; margin-bottom: 60px; float: left; box-shadow: 0 2px 4px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); cursor: default; overflow: hidden; position: relative; cursor: pointer }
.claims-grid .claim-grid-item:hover { background: #fbfbfb }
.claims-grid .claim-grid-item.last-item { margin-right: 0 }
.claims-grid .claim-grid-item.last-row { margin-bottom: 0 }
.claims-grid .claim-grid-item .price-tag { font-size: 65%; position: absolute; left: 0; top: 0; z-index: 505; background: #155b4a; color: #fff; text-align: center; padding: 4px 12px }
.claims-grid .claim-grid-item .tags { font-size: 65%; position: absolute; right: 0; top: 0; z-index: 505 }
.claims-grid .claim-grid-item .thumbnail { width: 100%; height: 200px; background: #f0f0f0; display: block; position: relative; overflow: hidden;}
.claims-grid .claim-grid-item .thumbnail img { width: 100%; position: absolute; left: 0; top: 0; border-bottom: 1px solid #eee }
.claims-grid .claim-grid-item .thumbnail.purple { background: #ab47bc }
.claims-grid .claim-grid-item .thumbnail.orange { background: #e91e63 }
.claims-grid .claim-grid-item .thumbnail.blue { background: #42a5f5 }
.claims-grid .claim-grid-item .thumbnail.teal { background: #4db6ac }
.claims-grid .claim-grid-item .thumbnail.green { background: #66bb6a }
.claims-grid .claim-grid-item .thumbnail.yellow { background: #fdd835 }
.claims-grid .claim-grid-item .thumbnail .autothumb { display: block; margin: 73px auto 0 auto; text-align: center; font-size: 240%; color: #fff; line-height: 54px }
.claims-grid .claim-grid-item .tags > div { display: inline-block; padding: 4px 12px; margin-left: 2px }
.claims-grid .claim-grid-item .tags .nsfw { background: #e53935; text-align: center; color: #fff; position: relative; left: 1px }
.claims-grid .claim-grid-item .tags .bid-state { background: #551CA1; text-align: center; color: #fff; }
.claims-grid .claim-grid-item .tags .content-type { background: #880e4f; text-align: center; color: #fff; }
.claims-grid .claim-grid-item .blocked-info { padding: 24px; font-size: 90%; }
.claims-grid .claim-grid-item .metadata { padding: 24px; font-size: 90% }
.claims-grid .claim-grid-item .title { font-size: 120%; height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.claims-grid .claim-grid-item .desc { font-size: 90%; font-weight: 300; height: 72px; overflow: hidden; text-overflow: ellipsis; margin: 8px 0 20px 0; line-height: 24px }
.claims-grid .claim-grid-item .link { font-size: 95%; font-weight: 300; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; line-height: 20px; height: 20px; margin-top: 6px }
.claims-grid .claim-grid-item .label { font-size: 80%; color: #1e88e5 }
.claims-grid .no-results {font-style: italic; width: 100%; height: 300px; text-align: center; font-size: 90%; color: grey; }
.claims-grid .claim-grid-item .value { font-weight: 300; word-break: break-word; word-wrap: break-word; font-size: 95%; line-height: 24px; height: 24px }
.claims-grid .claim-grid-item .half-width { width: 155px; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px }
.claims-grid .claim-grid-item .spacer { height: 16px }
.claims-body { width: 1200px; margin: 0 auto 0 auto; cursor: default }
.claims-body .blocked-claim-info { border: 1px solid rgba(0,0,0,.15); cursor: default }
.claims-body .blocked-claim-info .content { padding: 48px }
.claims-body .claim-info { width: 400px; float: left; /*box-shadow: 0 2px 4px rgba(0,0,0,.175);*/ border: 1px solid rgba(0,0,0,.15); cursor: default }
.claims-body .claim-info .thumbnail { width: 100%; height: 220px; background: #f0f0f0; display: block; position: relative; overflow: hidden }
.claims-body .claim-info .thumbnail img { width: 100% }
.claims-body .claim-info .content { padding: 24px }
.claims-body .claim-info .content .label { font-size: inherit; text-decoration: underline; color: #666666 }
.claims-body .claim-info .content .value { font-weight: 300; margin-bottom: 24px; word-break: break-word; word-wrap: break-word }
.claims-body .claim-info .content .value:last-child { margin-bottom: 0 }
.claims-body .claim-info .content .half-width { width: 50%; float: left }
.claims-body .claim-info .thumbnail.purple { background: #ab47bc }
.claims-body .claim-info .thumbnail.orange { background: #e91e63 }
.claims-body .claim-info .thumbnail.blue { background: #42a5f5 }
.claims-body .claim-info .thumbnail.teal { background: #4db6ac }
.claims-body .claim-info .thumbnail.green { background: #66bb6a }
.claims-body .claim-info .thumbnail.yellow { background: #fdd835 }
.claims-body .claim-info .thumbnail .autothumb { display: block; margin: 93px auto 0 auto; text-align: center; font-size: 240%; color: #fff; line-height: 54px }
.claims-body .claim-metadata { width: 770px; margin-left: 30px; float: left; /*box-shadow: 0 2px 4px rgba(0,0,0,.175);*/ border: 1px solid rgba(0,0,0,.15); padding: 24px 36px 88px 36px; cursor: default; position: relative }
.claims-body .claim-metadata .title { font-weight: bold; font-size: 120%; margin-bottom: 16px; color: #666666; padding: 0 8px }
.claims-body .claim-metadata .desc { font-weight: 300; font-size: inherit; line-height: 1.8em; padding: 0 12px; word-break: break-word; word-wrap: break-word }
.claims-body .claim-metadata .details { margin-top: 36px; border-top: 1px solid #ddd; padding: 36px 16px 0 16px }
.claims-body .claim-metadata .details .label { font-size: inherit; color: #666666; text-decoration: underline }
.claims-body .claim-metadata .details .value { font-size: inherit; font-weight: 300; margin-bottom: 24px }
.claims-body .claim-metadata .details .half-width { width: 50%; padding-right: 36px; float: left; height: 25px; line-height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.claims-body .claim-metadata .open-lbry-link { position: absolute; right: 36px; bottom: 36px; padding: 10px 24px; color: #fff; font-weight: 300; font-size: 90%; background: #1e88e5 }
.claims-body .claim-metadata .open-lbry-link:hover { text-decoration: none; background: #1976d2 }
.claims-body .more-claims { margin-top: 64px }
.claims-body .more-claims h4 { color: #1e88e5; font-weight: 300; font-size: 160%; margin-bottom: 16px }
.table { width: 100%; cursor: default; border-collapse: collapse; font-size: 90% }
.table thead tr th { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px 4px }
.table tbody tr td { padding: 8px; border-bottom: 1px solid #eee; font-weight: 300; white-space: nowrap }
.table tbody tr td.nodata { text-align: center; font-style: italic; font-weight: 300 }
.table .topvalign { vertical-align: top }
.table .last-cell { padding-left: 48px }
.table .pad-right { padding-right: 12px }
.table .pad-left { padding-left: 48px }
.table .med-pad-left { padding-left: 24px }
.left { text-align: left }
.center { text-align: center }
.right { text-align: right }
.w50 { width: 50px }
.w80 { width: 80px }
.w100 { width: 100px }
.w125 { width: 125px }
.w150 { width: 150px }
.w225 { width: 225px }
.w200, .w200 > div { width: 200px }
.w250, .w250 > div { width: 250px }
.w275, .w275 > div { width: 275px }
.w300, .w300 > div { width: 300px }
.w350 { width: 350px }
.w200 > div, .w250 > div, .w275 > div, .w300 > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
footer { padding-top: 64px; font-size: 80%; cursor: default }
footer .content { width: 1200px; margin: 0 auto; border-top: 1px solid #ddd; padding: 24px 12px 48px 12px; line-height: 25px; font-weight: 300; position: relative }
footer .content .page-time { position: absolute; right: 12px; bottom: 0px; padding-bottom: 52px; font-size: 85%; color: #ccc }
.block-head { width: 1200px; margin: 0 auto 24px auto; cursor: default }
.block-head h3, h4 { font-weight: 300; margin: 0 }
.block-head h3 { font-size: 200%; margin-bottom: 3px }
.block-head h4 { font-size: 125% }
.block-info { width: 1200px; margin: 0 auto }
.block-info h3 { font-weight: normal; margin: 0 0 12px 0; font-weight: 300 }
.block-nav { width: 1200px; margin: 0 auto 24px auto }
.block-nav .btn { display: block; padding: 8px; width: 150px; text-align: center; border-radius: 3px; border: 1px solid #ddd; font-size: 80% }
.block-nav .btn:link, .block-nav .btn:visited { text-decoration: none; color: #333 }
.block-nav .btn:hover { background: #f1f1f1 }
.block-nav .btn-prev { float: left }
.block-nav .btn-next { float: right }
.all-blocks { width: 1200px; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; position: relative; cursor: default }
.all-blocks h3 { font-weight: 300; margin: 0 0 12px 0 }
.amcharts-export-menu { font-size: 80% }
.block-size-chart-container { width: 1200px; height: 500px; margin: 0 auto 48px auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 36px; position: relative; cursor: default; overflow: hidden }
.block-size-chart-container h3 { font-weight: 300; margin: 0 0 12px 0; line-height: 26px }
.block-size-chart-container .load-progress { position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: #1e88e5; animation: indeterminate 4s linear infinite; }
.block-size-chart-container .chart { width: 100%; height: 414px; border: 1px solid #d9d9d9 }
.block-size-chart-container .btn-chart-export { position: absolute; right: 40px; bottom: 36px }
.block-size-chart-container .block-size-data-links { position: absolute; right: 48px; top: 28px; font-size: 80% }
.block-size-chart-container .block-size-data-links a { display: inline-block; width: 40px; text-align: right }
.block-size-chart-container .block-size-data-links a.active:link,
.block-size-chart-container .block-size-data-links a.active:visited { color: #777; cursor: default }
.block-size-chart-container .block-size-data-links a.active:hover { text-decoration: none }
.block-summary { width: 460px; margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; cursor: default; float: left }
.block-summary .label { font-size: 80%; color: #1e88e5 }
.block-summary .value { font-weight: 300; word-break: break-word; word-wrap: break-word; font-size: 95% }
.block-summary .half-width { width: 50%; float: left }
.block-summary .spacer { height: 16px }
.block-transactions { width: 690px; margin: 0 0 0 50px; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; cursor: default; float: left; overflow: auto; overflow-x: hidden }
.tx-head { width: 1200px; margin: 0 auto 24px auto; cursor: default }
.tx-head h3, h4 { font-weight: 300; margin: 0 }
.tx-head h3 { font-size: 200%; margin-bottom: 3px }
.tx-head h4 { font-size: 125% }
.tx-time { width: 1200px; margin: 0 auto 32px auto; font-weight: 300 }
.tx-time h3 { font-size: 105%; margin: 0; margin-bottom: 4px; font-weight: normal; cursor: help; border-bottom: 1px dotted #999; display: inline-block }
.tx-time .created-time, .tx-time .conf-time { float: left; width: 33% }
.realtime-head { width: 1200px; margin: 0 auto 36px auto; cursor: default }
.realtime-head h3 { font-weight: 300; margin: 0; font-size: 200% }
.realtime-main { width: 1200px; margin: 0 auto 0 auto }
.realtime-main h3 { font-weight: 300; margin: 0 0 12px 0 }
.realtime-main .realtime-blocks { width: 350px; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; cursor: default; float: left }
.realtime-main .realtime-tx { width: 800px; margin-left: 50px; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; cursor: default; float: left }
.stats-head { width: 1200px; margin: 0 auto 36px auto; cursor: default }
.stats-head h3 { font-weight: 300; margin: 0; font-size: 200% }
.stats-main .richlist { width: 1200px; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; cursor: default }
.stats-main .richlist .tag { font-weight: normal; margin-top: 1px; font-size: 80%; color: #333 }
.stats-main .richlist .tag a:link, .tx-details-layout .tag a:visited { color: #333 }
.stats-main .richlist .tag a:hover { text-decoration: none }
.stats-main .richlist .top500-percent-cell { padding: 0; position: relative }
.stats-main .richlist .top500-percent { background: #e3f2fd; height: 100%; position: absolute; top: 0 }
.stats-main .richlist .top500-percent-cell .text { z-index: 100; position: relative }
.stats-main h3 { font-weight: 300; margin: 0 0 12px 0 }
.stats { width: 1000px; margin: 0 auto 48px auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; cursor: default }
.stats .box { padding: 24px 0; border-right: 1px solid #ccc; float: left; text-align: center }
.stats .box-20 { width: 20% }
.stats .box-30 { width: 30% }
.stats .box .title { color: #1e88e5; font-size: 90% }
.stats .box .value { font-size: 180%; font-weight: 300; margin-top: 8px }
.stats .box.last { border-color: transparent }
.tx-summary { width: 1200px; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 16px 0; cursor: default }
.tx-summary .box { padding: 24px 0; border-right: 1px solid #ccc; float: left; text-align: center; width: 20% }
.tx-summary .box.p15 { width: 15% }
.tx-summary .box.p25 { width: 25% }
.tx-summary .box .title { color: #1e88e5; font-size: 90% }
.tx-summary .box .value { font-size: 180%; font-weight: 300; margin-top: 8px }
.tx-summary .box.last { border-color: transparent }
.tx-details { width: 1200px; margin: 48px auto 0 auto; cursor: default }
.tx-details h3 { font-weight: 300; margin: 0 0 8px 0 }
.tx-details-layout { display: table; width: 100%; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; background: #f9f9f9 }
.tx-details-layout .divider { width: 20%; display: table-cell; text-align: center; vertical-align: top; padding-top: 40px }
.tx-details-layout .divider img { width: 72px }
.tx-details-layout .inputs, .tx-details-layout .outputs { width: 40%; display: table-cell; vertical-align: top }
.tx-details-layout .inputs .subtitle, .tx-details-layout .outputs .subtitle { margin-bottom: 16px; position: relative; line-height: 24px }
.tx-details-layout .outputs .subtitle .fee { position: absolute; display: block; right: 0; bottom: 0 }
.tx-details-layout .outputs .subtitle .fee .value { font-weight: 300; display: inline-block; margin-left: 16px }
.tx-details-layout .inputs .input, .tx-details-layout .outputs .output { border: 1px solid #ddd; padding: 16px; border-radius: 18px; font-size: 95%; font-weight: 300; margin-bottom: 16px; background: #fff; position: relative }
.tx-details-layout .tag { font-weight: normal; margin-top: 1px; font-size: 80%; color: #333 }
.tx-details-layout .tag a:link, .tx-details-layout .tag a:visited { color: #333 }
.tx-details-layout .tag a:hover { text-decoration: none }
.tx-details-layout .outputs .output .labels { position: absolute; right: 16px; top: 8px }
.tx-details-layout .outputs .output .labels > div { padding: 4px 12px; font-size: 70%; display: inline-block; margin-left: 4px }
.tx-details-layout .outputs .output .labels .support { background: #ffeb3b }
.tx-details-layout .outputs .output .labels .update { background: #ea80fc }
.tx-details-layout .outputs .output .labels .claim { background: #76ff03 }
.tx-details-layout .outputs .output .view-claim { font-size: 80%; }
.tx-details-layout .inputs .input .value, .tx-details-layout .outputs .output .value { font-weight: normal }
.tx-details-layout .inputs .input.is-source, .tx-details-layout .outputs .output.is-source { border-right-width: 18px; border-right-color: #1e88e5; background: #e3f2fd }
.tx-details-layout .inputs .input.highlighted, .tx-details-layout .outputs .output.highlighted { background: #f1f8e9 }
.tx-details-layout .outputs .output.is-source .labels { right: 8px }
.address-head { width: 1200px; margin: 0 auto 48px auto; cursor: default }
.address-head h3, h4 { font-weight: 300; margin: 0 }
.address-head h3 { font-size: 200%; margin-bottom: 3px }
.address-head h4 { font-size: 125%; display: inline-block }
.address-head .tag { display: inline-block; font-size: 80%; color: #1e88e5; margin-left: 8px }
.address-head .tag a:link, .address-head .tag a:visited { color: #1e88e5 }
.address-head .tag a:hover { text-decoration: none }
.address-head .tag-address-container { margin: 24px 0; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px; cursor: default; font-size: 80%; display: none }
.address-head .tag-address-container h4 { margin-bottom: 6px }
.address-head .tag-address-container .desc { line-height: 22px; font-weight: 300 }
.address-head .tag-address-container .form-group { margin-top: 12px }
.address-head .tag-address-container .form-group .error-message { margin-bottom: 6px; color: #ff0000; font-style: italic; font-size: 105%; height: 24px; line-height: 24px }
.address-head .tag-address-container .form-group .col { float: left; width: 300px; margin-right: 12px }
.address-head .tag-address-container .form-group .col input { display: block; border: 2px solid #ccc; padding: 6px; margin-bottom: 12px; border-radius: 4px; width: 300px; line-height: 24px }
.address-head .tag-address-container .form-group .col input:last-child { margin-bottom: 0 }
.address-head .tag-address-container .form-group .col textarea { display: block; border: 2px solid #ccc; width: 300px; padding: 6px; line-height: 24px; height: 92px; border-radius: 4px; resize: none; position: relative; top: -1px; font-size: 100% }
.address-head .tag-address-container .btn { display: inline-block; padding: 6px 36px; height: 39px; line-height: 24px; color: #fff; border-radius: 4px; font-weight: 300; cursor: pointer; border: none }
.address-head .tag-address-container .btn-tag { background: #1e88e5 }
.address-head .tag-address-container .btn-close { background: #ff0000; margin-left: 12px }
.address-subhead { width: 1200px; margin: 0 auto }
.address-qr { width: 170px; height: 170px; float: left }
.address-qr img { width: 170px; height: 170px; border: 1px solid rgba(0,0,0,.15); padding: 3px }
.address-summary { width: 982px; float: left; margin-left: 48px; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 25px 0 26px 0; cursor: default }
.address-summary .box { padding: 24px 0; border-right: 1px solid #ccc; float: left; text-align: center; width: 33% }
.address-summary .box .title { color: #1e88e5; font-size: 90% }
.address-summary .box .value { font-size: 180%; font-weight: 300; margin-top: 8px }
.address-summary .box.last { border-color: transparent }
.recent-transactions { position: relative }
.recent-transactions h3 { font-weight: 300; margin: 0; margin-bottom: 12px }
.recent-transactions { width: 1200px; margin: 48px auto 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; cursor: default }
.recent-transactions .results-meta, .all-blocks .results-meta { position: absolute; right: 36px; top: 44px; font-size: 75%; color: #aaa }
.tx-table td { vertical-align: top; line-height: 24px }
.tx-table td.credit, .tx-table td div.credit { color: #00e676 }
.tx-table td.debit, .tx-table td div.debit { color: #ff0000 }
.tx-table td.diff, .tx-table td div.diff{ color: #337ab7 }
.tx-table td div.debit { padding-top: 8px }
.pagination { width: 1200px; margin: 36px auto 0 auto; cursor: default }
.pagination .prev { float: left; width: 20%; font-size: 75% }
.pagination .next { float: left; width: 20%; text-align: right; font-size: 75% }
.pagination .pages { float: left; width: 60%; text-align: center }
.pagination .pages .page-number { display: inline-block; width: 28px; height: 28px; line-height: 24px; text-align: center; font-size: 75% }
.clear { clear: both }
@keyframes indeterminate {
from { left: -25%; }
to { left: 100% }
}