Files
roll20-character-sheets-tester/Mortally Bankrupt/mortallybankrupt.css
T
2018-09-05 21:09:47 -04:00

2071 lines
49 KiB
CSS

.charsheet * {
box-sizing: border-box;
background-size: 100%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 13px;
line-height: 16px;
color: #f3f3f3;
text-shadow: 0 0 8px #734f96;
margin: 0pt;
padding: 0pt;
overflow: hidden;
}
.charsheet {
}
.sheet-hometab {
margin: 0 auto;
background-color: #1e1824;
padding:0px;
overflow: hidden;
}
[class*="col-"] {
float:left;
padding: 15px;
}
.sheet-col-1 {width: 8.33%;}
.sheet-col-2 {width: 16.66%;}
.sheet-col-3 {width: 25%;}
.sheet-col-4 {width: 33.33%;}
.sheet-col-5 {width: 41.66%;}
.sheet-col-6 {width: 50%;}
.sheet-col-7 {width: 58.33%;}
.sheet-col-8 {width: 66.66%;}
.sheet-col-9 {width: 75%;}
.sheet-col-10 {width: 83.33%;}
.sheet-col-11 {width: 91.66%;}
.sheet-col-12 {width: 100%;}
.sheet-row::after {
content: "";
clear: both;
display: table;
}
.sheet-push {
margin-left: 5%;
}
.sheet-pushmore {
margin-left: 7.5%;
}
.sheet-advance-text {
display:none;
}
.sheet-advance:checked + .sheet-advance-text {
display:block;
}
.sheet-genre,
.sheet-establishment,
.sheet-houses {
display:none;
}
.sheet-genre-button:checked ~ .sheet-genre,
.sheet-establishment-button:checked ~ .sheet-establishment,
.sheet-houses-button:checked ~ .sheet-houses {
display:block;
}
div {
cursor: default;
}
option {
background:#f3f3f3;
}
textarea {
height: 52px;
width: 100%;
background:transparent;
}
input[type=text] {
background:transparent;
border-width: 0px 0px 1px 0px;
padding: 0px;
}
.sheet-longer-text {
width:100%;
}
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance:none;
border: 3px solid #f3f3f3;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 6px;
margin: 2px;
border-radius: 50%;
display: inline-block;
position: relative;
}
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 3px solid #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 6px;
margin: 2px;
display: inline-block;
position: relative;
}
input[type=checkbox]:checked {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
input[type=number] {
background:transparent;
}
input:focus {
outline:none;
}
input[type=radio]:checked {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
::-webkit-input-placeholder {
color: #f3f3f3;
opacity: .5;
}
::-moz-placeholder {
color: #f3f3f3;
opacity: .5;
}
:-ms-input-placeholder {
color: #f3f3f3;
opacity: .5;
}
:-moz-placeholder {
color: #f3f3f3;
opacity: .5;
}
.sheet-clockpicture {
width: 50px;
height: 50px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity:0;
transition: .25s ease;
}
.sheet-progress-0:checked ~ .sheet-4-clock.sheet-clockpicture {
background:url(https://i.imgur.com/XI5rkO2.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-1:checked ~ .sheet-4-clock.sheet-clockpicture {
background:url(https://i.imgur.com/VU5NT6Y.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-2:checked ~ .sheet-4-clock.sheet-clockpicture {
background:url(https://i.imgur.com/lmu4a6M.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-3:checked ~ .sheet-4-clock.sheet-clockpicture {
background:url(https://i.imgur.com/dvEDw0H.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-4:checked ~ .sheet-4-clock.sheet-clockpicture {
background:url(https://i.imgur.com/8ddE54w.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-0:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/Sgpd0Dz.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-1:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/jNcnYDt.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-2:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/JUzJn7J.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-3:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/d8nFEwG.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-4:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/LGKX90O.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-5:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/P4bwCHE.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-6:checked ~ .sheet-6-clock.sheet-clockpicture {
background:url(https://i.imgur.com/pQAyfgc.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-0:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/HJxEzdC.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-1:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/d8bgCfL.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-2:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/QjWMbxh.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-3:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/HVr1bLT.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-4:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/eRLpfMK.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-5:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/zDmNPWA.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-6:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/qDSOFGU.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-7:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/haloeW4.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-progress-8:checked ~ .sheet-8-clock.sheet-clockpicture {
background:url(https://i.imgur.com/ZHx0qwQ.png) center no-repeat;
background-size:100%;
opacity:1;
transition: .25s ease;
}
.sheet-number {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
input[type="checkbox"].sheet-lock-screen {
content: url(https://i.imgur.com/KTYpGHJ.gif);
display: block;
width: 102%;
top: 0%;
left: 0%;
overflow: hidden;
position: absolute;
z-index: 3;
opacity: 1;
}
input[type="checkbox"].sheet-lock-screen:checked {
top:-350vh;
transition: .25s ease;
opacity:0;
}
.sheet-native-hidden {
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
}
option {
color: #0e0e0e;
}
.sheet-lockscreen {
}
.sheet-logo {
background-color: #1e1824;
width:100%;
}
/* Tooltip container */
.sheet-tooltip,
.sheet-rolltemplate-tooltip {
font-family: "Pictos";
font-size:24px;
}
/*
.sheet-tooltip,
.sheet-rolltemplate-tooltip,
.sheet-keyword,
.sheet-rolltemplate-keyword {
-webkit-animation: mymove .6818s infinite ease;
animation: mymove .6818s infinite ease;
}
Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
0% {text-shadow: 0px 0px 10px #8A0C0D;}
50% {text-shadow: 0px 0px 20px #8A0C0D;}
100% {text-shadow: 0px 0px 10px #8A0C0D;}
}
/* Standard syntax */
@keyframes mymove {
0% {text-shadow: 0px 0px 10px #8A0C0D;}
50% {text-shadow: 0px 0px 20px #8A0C0D;}
100% {text-shadow: 0px 0px 10px #8A0C0D;}
}
.sheet-advance {
border-radius:50%;
transform: rotate(45deg);
transition: 1s ease;
}
.sheet-specialty {
transition: 1s ease;
}
.sheet-specialty:checked {
transform: rotate(45deg);
transition: 1s ease;
-webkit-animation: stressout 2s infinite ease;
animation: stressout 2s infinite ease;
}
.sheet-advance:checked {
border-radius:0px;
transition: 1s ease;
-webkit-animation: advance 2s infinite ease;
animation: advance 2s infinite ease;
}
.sheet-stressed-out:checked {
border-radius:0px;
transition: 1s ease;
-webkit-animation: stressout 2s infinite ease;
animation: stressout 2s infinite ease;
}
@-webkit-keyframes advance {
0% {box-shadow: 0 0 20px 8px #734f96;}
50% {box-shadow: 0 0 20px 8px #734f96;}
100% {box-shadow: 0 0 20px 8px #734f96;}
}
@keyframes advance {
0% {box-shadow: 0 0 20px 8px #734f96;}
50% {box-shadow: 0 0 20px 8px #734f96;}
100% {box-shadow: 0 0 20px 8px #734f96;}
}
@-webkit-keyframes stressout {
0% {box-shadow: 0 0 20px 8px #8A0C0D;}
50% {box-shadow: 0 0 20px 8px #8A0C0D;}
100% {box-shadow: 0 0 20px 8px #8A0C0D;}
}
@keyframes stressout {
0% {box-shadow: 0 0 20px 8px #8A0C0D;}
50% {box-shadow: 0 0 20px 8px #8A0C0D;}
100% {box-shadow: 0 0 20px 8px #8A0C0D;}
}
/* Tooltip text */
.sheet-tooltip > .sheet-tooltip-text,
.sheet-rolltemplate-tooltip > .sheet-rolltemplate-tooltip-text {
visibility: hidden;
height: auto;
width: auto;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
background: url(https://i.imgur.com/rS1jR67.png) center;
color: #fff;
padding: 5px;
opacity: 1;
position: absolute;
z-index: 2;
float:below;
font-size: 13px;
line-height: 16px;
color: #f3f3f3;
transition-delay: .50s;
}
.sheet-right-side {
margin-left: -50%;
padding-left: -50%;
width:100%;
}
/*
.sheet-fieldset-tooltip-text {
margin-left: -25% !important;
position:absolute !important;
}
*/
.sheet-keyword {
font-weight:300;
}
.sheet-keyword-text {
display: none;
}
.sheet-tooltip:hover > .sheet-tooltip-text {
visibility: visible;
transition: 1s ease;
transition-delay: .50s;
padding: 5px 75px;
}
.sheet-keyword:hover > .sheet-keyword-text {
display:block;
transition: 1s ease;
transition-delay: .50s;
padding: 5px 75px;
}
.sheet-rolltemplate-tooltip:hover > .sheet-rolltemplate-tooltip-text,
.sheet-rolltemplate-keyword:hover > .sheet-rolltemplate-keyword-text {
visibility: visible;
transition: 1s ease;
transition-delay: .88s;
padding: 5px 20px;
}
.sheet-creation-glow:checked ~ .sheet-star-creation-button,
.sheet-show-glow:checked ~ .sheet-show-creation-button,
.sheet-neighborhood-glow:checked ~ .sheet-neighborhood-creation-button {
-webkit-animation: tutorial 2s infinite ease; /* Safari 4.0 - 8.0 */
animation: tutorial 2s infinite ease;
}
.sheet-facet-glow:checked ~ .sheet-action-rolls-button {
-webkit-animation: tutorial 2s infinite ease; /* Safari 4.0 - 8.0 */
animation: tutorial 2s infinite ease;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes tutorial {
0% {box-shadow: 0 0 20px 8px #734f96;}
50% {box-shadow: 0 0 20px 8px #734f96;}
100% {box-shadow: 0 0 20px 8px #734f96;}
}
/* Standard syntax */
@keyframes tutorial {
0% {box-shadow: 0 0 20px 8px #734f96;}
50% {box-shadow: 0 0 20px 8px #734f96;}
100% {box-shadow: 0 0 20px 8px #734f96;}
}
/* TEXT STYLING */
.sheet-quote {
text-align: center;
font-family: Georgia, serif;
font-style: italic;
font-size: 30px;
line-height: 45px;
left: 50%;
}
.sheet-text {
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 14px;
}
.sheet-header {
font-size: 32px;
font-family:/* "Franklin Gothic Medium",*/ Georgia, serif;
font-style: italic;
line-height: 45px;
}
.sheet-subheader {
font-family: "Franklin Gothic Medium", Georgia, serif;
font-style: normal;
font-size: 30px;
line-height: 45px;
font-weight: 300;
}
.sheet-chaos {
display: none;
}
/*
input[type=radio].sheet-neighborhood:checked ~ div.sheet-neighborhoodtab,
input[type=radio].sheet-star:checked ~ div.sheet-startab,
input[type=radio].sheet-show:checked ~ div.sheet-showtab,
input[type=checkbox].sheet-dig-deeper:checked ~ div.sheet-chaos {
display: block;
}*/
.sheet-neighborhoodtab,
.sheet-startab,
.sheet-showtab,
.sheet-hometab,
.sheet-getting-started,
.sheet-glossary,
.sheet-intro,
.sheet-outro,
.sheet-clocks,
.sheet-random-tables,
.sheet-neighborhood-creation,
.sheet-traits,
.sheet-npcs,
.sheet-tendril,
.sheet-star-creation,
.sheet-stress,
.sheet-trust,
.sheet-action-rolls,
.sheet-rolls,
.sheet-flaunt,
.sheet-drama,
.sheet-consequences,
.sheet-cash,
.sheet-activities,
.sheet-vacation,
.sheet-together,
.sheet-reckless,
.sheet-episode,
.sheet-advancement,
.sheet-show-creation,
.sheet-whispers,
.sheet-debt,
.sheet-show-advancement,
.sheet-recap,
.sheet-location,
.sheet-player-tab,
.sheet-gm-tab,
.sheet-show-sheet-tab,
.sheet-opening-page,
.sheet-how-to-play,
.sheet-how-to-gm,
.sheet-overview,
.sheet-acknowledgments,
.sheet-neighborhood-creation,
.sheet-traits,
.sheet-npcs,
.sheet-tendril,
.sheet-star-creation,
.sheet-stress,
.sheet-trust,
.sheet-action-rolls,
.sheet-rolls,
.sheet-consequences,
.sheet-flaunt,
.sheet-drama,
.sheet-episode,
.sheet-cash,
.sheet-activities,
.sheet-vacation,
.sheet-together,
.sheet-reckless,
.sheet-advancement,
.sheet-show-creation,
.sheet-whispers,
.sheet-debt,
.sheet-show-advancement,
.sheet-recap,
.sheet-location,
.sheet-player-tab,
.sheet-gm-tab,
.sheet-show-sheet-tab,
.sheet-neighborhood-creation,
.sheet-downtime,
.sheet-random-tables,
.sheet-payoff,
.sheet-location,
.sheet-clocks,
.sheet-show-creation,
.sheet-intro,
.sheet-episode,
.sheet-gaze,
.sheet-gm-scenes,
.sheet-player-scenes,
.sheet-locations,
.sheet-tendrils,
.sheet-fortune,
.sheet-clocks,
.sheet-show-advancement,
.sheet-star-creation,
.sheet-intro,
.sheet-episode,
.sheet-downtime,
.sheet-rolls,
.sheet-consequences,
.sheet-flaunt,
.sheet-clocks,
.sheet-cash,
.sheet-activities,
.sheet-vacation,
.sheet-together,
.sheet-reckless {
position:absolute;
top:57px;
margin:5px;
background-color: #1e1824;
z-index:1;
width: 100%;
min-height: 500%;
}
.sheet-opening-page {
margin-left:-2%;
}
.sheet-neighborhoodtab,
.sheet-startab,
.sheet-showtab,
.sheet-hometab {
top:0px;
}
.sheet-curtain {
position:absolute;
top:0px;
right:99.5%;
width: 100%;
height: 1000%;
background-color: #f3f3f3;
z-index:6;
}
div.sheet-neighborhoodtab,
div.sheet-startab,
div.sheet-showtab,
div.sheet-hometab,
div.sheet-getting-started,
div.sheet-glossary,
.sheet-how-to-gm,
.sheet-overview,
.sheet-how-to-play,
.sheet-conversations,
.sheet-acknowledgments,
div.sheet-intro,
div.sheet-clocks,
.sheet-random-tables,
.sheet-neighborhood-creation,
.sheet-traits,
.sheet-npcs,
.sheet-tendril,
.sheet-star-creation,
.sheet-stress,
.sheet-trust,
.sheet-action-rolls,
.sheet-rolls,
.sheet-consequences,
.sheet-flaunt,
.sheet-drama,
.sheet-episode,
.sheet-cash,
.sheet-activities,
.sheet-vacation,
.sheet-together,
.sheet-reckless,
.sheet-advancement,
.sheet-show-creation,
.sheet-whispers,
.sheet-debt,
.sheet-show-advancement,
.sheet-recap,
.sheet-location,
.sheet-player-tab,
.sheet-gm-tab,
.sheet-show-sheet-tab,
.sheet-neighborhood-creation,
.sheet-downtime,
.sheet-random-tables,
.sheet-payoff,
.sheet-location,
.sheet-clocks,
.sheet-show-creation,
.sheet-intro,
.sheet-episode,
.sheet-outro,
.sheet-gaze,
.sheet-gm-scenes,
.sheet-player-scenes,
.sheet-locations,
.sheet-tendrils,
.sheet-fortune,
.sheet-clocks,
.sheet-show-advancement,
.sheet-star-creation,
.sheet-intro,
.sheet-episode,
.sheet-downtime,
.sheet-rolls,
.sheet-consequences,
.sheet-flaunt,
.sheet-clocks,
.sheet-cash,
.sheet-activities,
.sheet-vacation,
.sheet-together,
.sheet-reckless,
.sheet-drama,
.sheet-action-rolls-button,
.sheet-trust-button,
.sheet-npcs-button,
.sheet-tendril-button,
.sheet-whispers-button,
.sheet-recap-button {
right:200%;
transition:.5s ease;
transition-delay:.1s;
}
.sheet-gm-button,
.sheet-gm-span,
.sheet-player-button,
.sheet-player-span {
position:relative;
float:none;
}
input[type=radio].sheet-neighborhood-button {
border: 3px solid #0C8A2F;
}
input[type=radio].sheet-star-button {
border: 3px solid #8A0C0D;
}
input[type=radio].sheet-show-button {
border: 3px solid blue;
}
input[type=radio].sheet-home-button {
border: 3px solid gray;
}
.sheet-neighborhood-button,
.sheet-star-button,
.sheet-show-button,
.sheet-home-button {
z-index: 9;
}
.sheet-competition-title,
.sheet-party-title,
.sheet-renovation-title,
.sheet-performance-title,
.sheet-behindthescenes-title,
.sheet-finale-title {
display: none;
}
.sheet-competition-button:checked ~ .sheet-competition-title,
.sheet-party-button:checked ~ .sheet-party-title,
.sheet-renovation-button:checked ~ .sheet-renovation-title,
.sheet-performance-button:checked ~ .sheet-performance-title,
.sheet-behindthescenes-button:checked ~ .sheet-behindthescenes-title,
.sheet-finale-button:checked ~ .sheet-finale-title {
display: block;
}
.sheet-neighborhood-button:checked ~ .sheet-neighborhoodtab,
.sheet-star-button:checked ~ .sheet-startab,
.sheet-show-button:checked ~ .sheet-showtab,
.sheet-home-button:checked ~ .sheet-hometab,
.sheet-getting-started-button:checked ~ .sheet-getting-started,
.sheet-glossary-button:checked ~ .sheet-glossary,
.sheet-how-to-gm-button:checked ~ .sheet-how-to-gm,
.sheet-overview-button:checked ~ .sheet-overview,
.sheet-how-to-play-button:checked ~ .sheet-how-to-play,
.sheet-intro-button:checked ~ .sheet-intro,
.sheet-acknowledgments-button:checked ~ .sheet-acknowledgments,
.sheet-clocks-button:checked ~ .sheet-clocks,
.sheet-random-tables-button:checked ~ .sheet-random-tables,
.sheet-neighborhood-creation-button:checked ~ .sheet-neighborhood-creation,
.sheet-traits-button:checked ~ .sheet-traits,
.sheet-npcs-button:checked ~ .sheet-npcs,
.sheet-tendril-button:checked ~ .sheet-tendril,
.sheet-star-creation-button:checked ~ .sheet-star-creation,
.sheet-stress-button:checked ~ .sheet-stress,
.sheet-trust-button:checked ~ .sheet-trust,
.sheet-action-rolls-button:checked ~ .sheet-action-rolls,
.sheet-rolls-button:checked ~ .sheet-rolls,
.sheet-drama-button:checked ~ .sheet-drama,
.sheet-flaunt-button:checked ~ .sheet-flaunt,
.sheet-consequences-button:checked ~ .sheet-consequences,
.sheet-episode-button:checked ~ .sheet-episode,
.sheet-cash-button:checked ~ .sheet-cash,
.sheet-activities-button:checked ~ .sheet-activities,
.sheet-vacation-button:checked ~ .sheet-vacation,
.sheet-together-button:checked ~ .sheet-together,
.sheet-reckless-button:checked ~ .sheet-reckless,
.sheet-advancement-button:checked ~ .sheet-advancement,
.sheet-show-creation-button:checked ~ .sheet-show-creation,
.sheet-whispers-button:checked ~ .sheet-whispers,
.sheet-debt-button:checked ~ .sheet-debt,
.sheet-show-advancement-button:checked ~ .sheet-show-advancement,
.sheet-recap-button:checked ~ .sheet-recap,
.sheet-location-button:checked ~ .sheet-location,
.sheet-gm-button:checked ~ .sheet-gm-tab,
.sheet-show-sheet-button:checked ~ .sheet-show-sheet-tab,
.sheet-player-button:checked ~ .sheet-player-tab,
.sheet-neighborhood-creation-button:checked ~ .sheet-neighborhood-creation,
.sheet-downtime-button:checked ~ .sheet-downtime,
.sheet-random-tables-button:checked ~ .sheet-random-tables,
.sheet-payoff-button:checked ~ .sheet-payoff,
.sheet-location-button:checked ~ .sheet-location,
.sheet-clocks-button:checked ~ .sheet-clocks,
.sheet-show-creation-button:checked ~ .sheet-show-creation,
.sheet-intro-button:checked ~ .sheet-intro,
.sheet-episode-button:checked ~ .sheet-episode,
.sheet-gaze-button:checked ~ .sheet-gaze,
.sheet-gm-scenes-button:checked ~ .sheet-gm-scenes,
.sheet-player-scenes-button:checked ~ .sheet-player-scenes,
.sheet-locations-button:checked ~ .sheet-locations,
.sheet-tendrils-button:checked ~ .sheet-tendrils,
.sheet-fortune-button:checked ~ .sheet-fortune,
.sheet-clocks-button:checked ~ .sheet-clocks,
.sheet-show-advancement-button:checked ~ .sheet-show-advancement,
.sheet-star-creation-button:checked ~ .sheet-star-creation,
.sheet-intro-button:checked ~ .sheet-intro,
.sheet-episode-button:checked ~ .sheet-episode,
.sheet-outro-button:checked ~ .sheet-outro,
.sheet-downtime-button:checked ~ .sheet-downtime,
.sheet-rolls-button:checked ~ .sheet-rolls,
.sheet-consequences-button:checked ~ .sheet-consequences,
.sheet-flaunt-button:checked ~ .sheet-flaunt,
.sheet-clocks-button:checked ~ .sheet-clocks,
.sheet-cash-button:checked ~ .sheet-cash,
.sheet-activities-button:checked ~ .sheet-activities,
.sheet-vacation-button:checked ~ .sheet-vacation,
.sheet-together-button:checked ~ .sheet-together {
right:0%;
transition:.5s ease;
transition-delay:.4s;
}
.sheet-neighborhood-bookmark {
position:static;
background-color: #0C8A2F;
width:10px;
height:100vh;
float:right;
}
.sheet-star-bookmark {
background-color: #8A0C0D;
width:10px;
height:100vh;
float:right;
}
.sheet-show-bookmark {
background-color: blue;
width:10px;
height:100vh;
float:right;
}
.sheet-hidden-button {
opacity: 0;
}
.sheet-hidden-button:hover {
opacity: 1;
}
.sheet-eye {
font-style: normal;
}
[class*="sheet-rolltemplate-col-"] {
float:left;
padding: 15px;
border: 1px solid #8A0C0D;
}
.sheet-rolltemplate-col-1 {width: 8.33%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-2 {width: 16.66%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-3 {width: 25%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-4 {width: 33.33%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-5 {width: 41.66%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-6 {width: 50%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-7 {width: 58.33%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-8 {width: 66.66%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-9 {width: 75%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-10 {width: 83.33%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-11 {width: 91.66%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
}
.sheet-rolltemplate-col-12 {width: 100%; float:left;
padding: 15px;
border: 1px solid #8A0C0D;
background: #1e1824;
margin-left: -45px;
}
.sheet-rolltemplate-action,
.sheet-rolltemplate-drama,
.sheet-rolltemplate-flashback,
.sheet-rolltemplate-downtime,
.sheet-rolltemplate-fortune,
.sheet-rolltemplate-resistance,
.sheet-rolltemplate-tables-and-lists,
.sheet-rolltemplate-intro-sequence,
.sheet-rolltemplate-twist,
.sheet-rolltemplate-transition,
.sheet-rolltemplate-photo {
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 13px;
line-height: 16px;
color:#f3f3f3;
cursor: default;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
display: inline-block;
width: 100%;
height: 100%;
text-shadow: 0 0 8px #734f96;
}
.sheet-rolltemplate-header {
font-size: 24px;
font-family: "Franklin Gothic Medium", Georgia, serif;
line-height: 24px;
font-weight: 700;
}
.sheet-rolltemplate-quote {
text-align: right;
font-family: Georgia, serif;
font-style: italic;
font-size: 30px;
line-height: 30px;
}
.sheet-rolltemplate-action .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-drama .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-flashback .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-downtime .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-fortune .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-resistance .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-tables-and-lists .sheet-rolltemplate-roll-holder,
.sheet-rolltemplate-photo .sheet-rolltemplate-roll-holder{
width:100%;
height:auto;
background: #1e1824;
}
.sheet-rolltemplate-Zero:after {
content: "What completely halts your efforts?";
}
.sheet-rolltemplate-Limited:after {
content: "How is your impact diminished? What effort remains to achieve your goal?";
}
.sheet-rolltemplate-Standard:after {
content: "Is that enough? Is there more left to do?";
}
.sheet-rolltemplate-Great:after {
content: "How does the extra effort manifest? What extra benefit do you enjoy?";
}
.sheet-rolltemplate-Extreme:after {
content: "How does your overwhelming success manifest?";
}
.sheet-rolltemplate-Critical ~ .sheet-rolltemplate-Zero:after {
content: "How is your impact diminished? What effort remains to achieve your goal?";
}
.sheet-rolltemplate-Critical ~ .sheet-rolltemplate-Limited:after {
content: "Is that enough? Is there more left to do?";
}
.sheet-rolltemplate-Critical ~ .sheet-rolltemplate-Standard:after {
content: "How does the extra effort manifest? What extra benefit do you enjoy?";
}
.sheet-rolltemplate-Critical ~ .sheet-rolltemplate-Great:after {
content: "How does your overwhelming success manifest?";
}
.sheet-rolltemplate-Controlled .sheet-rolltemplate-Critical-Success:after {
content: "You do it beautifully!";
}
.sheet-rolltemplate-Controlled .sheet-rolltemplate-Partial-Success:after {
content: "You hesitate. Withdraw and try a different approach, or else do it with a minor consequence: a minor complication occurs, you have #8A0C0Duced effect, you suffer lesser harm, you end up in a risky position";
}
.sheet-rolltemplate-Controlled .sheet-rolltemplate-Bad-Outcome:after {
content: "You falter. Press on by seizing a risky opportunity, or withdraw and try a different approach";
}
.sheet-rolltemplate-Risky .sheet-rolltemplate-Critical-Success:after {
content: "You do it beautifully!";
}
.sheet-rolltemplate-Risky .sheet-rolltemplate-Partial-Success:after {
content: "You do it, but theres a consequence: you suffer harm, a complication occurs, you have #8A0C0Duced effect, you end up in a desperate position.";
}
.sheet-rolltemplate-Risky .sheet-rolltemplate-Bad-Outcome:after {
content: "Things go badly. You suffer harm, a complication occurs, you end up in a desperate position, you lose the opportunity for action.";
}
.sheet-rolltemplate-Desperate .sheet-rolltemplate-Critical-Success:after {
content: "You do it beautifully!";
}
.sheet-rolltemplate-Desperate .sheet-rolltemplate-Partial-Success:after {
content: "You do it, but theres a consequence: you suffer severe harm, a serious complication occurs, you have #8A0C0Duced effect";
}
.sheet-rolltemplate-Desperate .sheet-rolltemplate-Bad-Outcome:after {
content: "Its the worst outcome. You suffer severe harm, a serious complication occurs, you lose the opportunity for action.";
}
.sheet-rolltemplate-Controlled-XP {
display: none;
}
.sheet-rolltemplate-Risky-XP {
display: none;
}
.sheet-rolltemplate-Desperate-XP {
display: block;
}
.sheet-rolltemplate-Other {
display: none;
}
.sheet-rolltemplate-Engagement {
display: block;
}
.sheet-rolltemplate-Drive-rolls,
.sheet-rolltemplate-Break-rolls,
.sheet-rolltemplate-Rush-rolls,
.sheet-rolltemplate-Work-rolls,
.sheet-rolltemplate-Crib-rolls,
.sheet-rolltemplate-Fake-rolls,
.sheet-rolltemplate-Hack-rolls,
.sheet-rolltemplate-Judge-rolls,
.sheet-rolltemplate-Tweak-rolls,
.sheet-rolltemplate-Camp-rolls,
.sheet-rolltemplate-Creep-rolls,
.sheet-rolltemplate-Snap-rolls,
.sheet-rolltemplate-Bouge-rolls,
.sheet-rolltemplate-Tempt-rolls,
.sheet-rolltemplate-Dissonant-rolls,
.sheet-rolltemplate-Crushing-rolls,
.sheet-rolltemplate-Generic-rolls,
.sheet-rolltemplate-Artifacted-rolls,
.sheet-rolltemplate-Choppy-rolls,
.sheet-rolltemplate-Stylish-rolls,
.sheet-rolltemplate-Visual,
.sheet-rolltemplate-Answer,
.sheet-rolltemplate-Show,
.sheet-rolltemplate-Neighborhood,
.sheet-rolltemplate-Star,
.sheet-rolltemplate-Visual,
.sheet-rolltemplate-Music,
.sheet-rolltemplate-Lighting,
.sheet-rolltemplate-Confess,
.sheet-rolltemplate-Ask,
.sheet-rolltemplate-Glitch,
.sheet-rolltemplate-Clock,
.sheet-rolltemplate-Flashy-rolls,
.sheet-rolltemplate-Dark-rolls,
.sheet-rolltemplate-Corrupted-rolls,
.sheet-rolltemplate-display-asset,
.sheet-rolltemplate-display-loan,
.sheet-rolltemplate-display-reflect,
.sheet-rolltemplate-display-project,
.sheet-rolltemplate-display-recover,
.sheet-rolltemplate-display-rent,
.sheet-rolltemplate-display-train,
.sheet-rolltemplate-display-job {
display:none;
}
.sheet-rolltemplate-action-Drive .sheet-rolltemplate-Drive-rolls,
.sheet-rolltemplate-action-Break .sheet-rolltemplate-Break-rolls,
.sheet-rolltemplate-action-Rush .sheet-rolltemplate-Rush-rolls,
.sheet-rolltemplate-action-Work .sheet-rolltemplate-Work-rolls,
.sheet-rolltemplate-action-Crib .sheet-rolltemplate-Crib-rolls,
.sheet-rolltemplate-action-Fake .sheet-rolltemplate-Fake-rolls,
.sheet-rolltemplate-action-Hack .sheet-rolltemplate-Hack-rolls,
.sheet-rolltemplate-action-Judge .sheet-rolltemplate-Judge-rolls,
.sheet-rolltemplate-action-Tweak .sheet-rolltemplate-Tweak-rolls,
.sheet-rolltemplate-action-Camp .sheet-rolltemplate-Camp-rolls,
.sheet-rolltemplate-action-Creep .sheet-rolltemplate-Creep-rolls,
.sheet-rolltemplate-action-Snap .sheet-rolltemplate-Snap-rolls,
.sheet-rolltemplate-action-Bouge .sheet-rolltemplate-Bouge-rolls,
.sheet-rolltemplate-action-Tempt .sheet-rolltemplate-Tempt-rolls,
.sheet-rolltemplate-action-Dissonant .sheet-rolltemplate-Dissonant-rolls,
.sheet-rolltemplate-action-Crushing .sheet-rolltemplate-Crushing-rolls,
.sheet-rolltemplate-action-Generic .sheet-rolltemplate-Generic-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Artifacted-rolls,
.sheet-rolltemplate-action-Choppy .sheet-rolltemplate-Choppy-rolls,
.sheet-rolltemplate-action-Stylish .sheet-rolltemplate-Stylish-rolls,
.sheet-rolltemplate-Answer-display .sheet-rolltemplate-Answer,
.sheet-rolltemplate-Show-display .sheet-rolltemplate-Show,
.sheet-rolltemplate-Neighborhood-display .sheet-rolltemplate-Neighborhood,
.sheet-rolltemplate-Star-display .sheet-rolltemplate-Star,
.sheet-rolltemplate-Visual-display .sheet-rolltemplate-Visual,
.sheet-rolltemplate-Music-display .sheet-rolltemplate-Music,
.sheet-rolltemplate-Lighting-display .sheet-rolltemplate-Lighting,
.sheet-rolltemplate-Confess-display .sheet-rolltemplate-Confess,
.sheet-rolltemplate-Ask-display .sheet-rolltemplate-Ask,
.sheet-rolltemplate-Glitch-display .sheet-rolltemplate-Glitch,
.sheet-rolltemplate-Clock-display .sheet-rolltemplate-Clock,
.sheet-rolltemplate-action-Flashy .sheet-rolltemplate-Flashy-rolls,
.sheet-rolltemplate-action-Dark .sheet-rolltemplate-Dark-rolls,
.sheet-rolltemplate-action-Corrupted .sheet-rolltemplate-Corrupted-rolls,
.sheet-rolltemplate-asset .sheet-rolltemplate-display-asset,
.sheet-rolltemplate-loan .sheet-rolltemplate-display-loan,
.sheet-rolltemplate-vice .sheet-rolltemplate-display-vice,
.sheet-rolltemplate-project .sheet-rolltemplate-display-project,
.sheet-rolltemplate-reflect .sheet-rolltemplate-display-reflect,
.sheet-rolltemplate-recover .sheet-rolltemplate-display-recover,
.sheet-rolltemplate-rent .sheet-rolltemplate-display-rent,
.sheet-rolltemplate-train .sheet-rolltemplate-display-train,
.sheet-rolltemplate-job .sheet-rolltemplate-display-job {
display:block;
}
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Drive-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Break-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Rush-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Work-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Crib-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Fake-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Hack-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Judge-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Tweak-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Camp-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Creep-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Snap-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Bouge-rolls,
.sheet-rolltemplate-action-Artifacted .sheet-rolltemplate-Tempt-rolls {
display:none;
}
/* CLOCKS */
.sheet-clock input.sheet-label {
font-size: 106%;
letter-spacing: 1px;
font-weight: 600;
line-height: 119%;
}
.sheet-4clock, .sheet-6clock, .sheet-8clock, .sheet-12clock {
display: none;
}
input[value="4"]:checked ~ .sheet-4clock,
input[value="6"]:checked ~ .sheet-6clock,
input[value="8"]:checked ~ .sheet-8clock,
input[value="12"]:checked ~ .sheet-12clock {
display: block;
}
.sheet-clock {
width: 100%;
}
.sheet-clocks {
z-index:0;
}
.sheet-button-labels {
position:relative;
z-index:12;
}
.sheet-trait-select {
display:block;
}
.sheet-trait-text {
display:none;
}
.sheet-trait-swap:checked ~ .sheet-trait-select {
display:none;
}
.sheet-trait-swap:checked ~ .sheet-trait-text {
display:block;
}
.sheet-trait-swap {
display:none;
}
.sheet-create-show,
.sheet-create-neighborhood {
display:block;
}
.sheet-neighborhood-start-intro,
.sheet-show-start-intro {
display:none;
}
.sheet-hide-create-neighborhood:checked ~ .sheet-create-neighborhood,
.sheet-hide-create-show:checked ~ .sheet-create-show {
display:none;
}
.sheet-hide-create-neighborhood:checked ~ .sheet-show-start-intro,
.sheet-hide-create-show:checked ~ .sheet-neighborhood-start-intro {
display:block;
}
select {
background:#1e1824;
border-width:0px 0px 1px 0px;
outline:none;
padding: 0px !important;
float: none;
color:#f3f3f3;
width: 100%;
}
button[type=roll]:before {
content: "" !important;
margin: default;
}
.sheet-tutorial {
display:none !important;
}
button {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:100%;
overflow: visible;
padding: 5px;
margin: 5px;
font-size: 16px !important;
color:#f3f3f3;
}
button[type=roll]:hover {
background:url(https://i.imgur.com/rhg0ZTk.gif) center;
color:#f3f3f3;
-webkit-animation: stressout 2s infinite ease;
animation: stressout 2s infinite ease;
}
.sheet-reveal-check2,
.sheet-check2 {
display: none !important;
}
.sheet-reveal-check2:checked ~ .sheet-check2 {
display: block !important;
}
.sheet-hidden-gaze {
display:none !important;
}
.sheet-hidden-track-8:checked ~ .sheet-track-8,
.sheet-hidden-track-8:checked ~ .sheet-track-7,
.sheet-hidden-track-8:checked ~ .sheet-track-6,
.sheet-hidden-track-8:checked ~ .sheet-track-5,
.sheet-hidden-track-8:checked ~ .sheet-track-4,
.sheet-hidden-track-8:checked ~ .sheet-track-3,
.sheet-hidden-track-8:checked ~ .sheet-track-2,
.sheet-hidden-track-8:checked ~ .sheet-track-1,
.sheet-hidden-track-8:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-7:checked ~ .sheet-track-7,
.sheet-hidden-track-7:checked ~ .sheet-track-6,
.sheet-hidden-track-7:checked ~ .sheet-track-5,
.sheet-hidden-track-7:checked ~ .sheet-track-4,
.sheet-hidden-track-7:checked ~ .sheet-track-3,
.sheet-hidden-track-7:checked ~ .sheet-track-2,
.sheet-hidden-track-7:checked ~ .sheet-track-1,
.sheet-hidden-track-7:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-6:checked ~ .sheet-track-6,
.sheet-hidden-track-6:checked ~ .sheet-track-5,
.sheet-hidden-track-6:checked ~ .sheet-track-4,
.sheet-hidden-track-6:checked ~ .sheet-track-3,
.sheet-hidden-track-6:checked ~ .sheet-track-2,
.sheet-hidden-track-6:checked ~ .sheet-track-1,
.sheet-hidden-track-6:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-5:checked ~ .sheet-track-5,
.sheet-hidden-track-5:checked ~ .sheet-track-4,
.sheet-hidden-track-5:checked ~ .sheet-track-3,
.sheet-hidden-track-5:checked ~ .sheet-track-2,
.sheet-hidden-track-5:checked ~ .sheet-track-1,
.sheet-hidden-track-5:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-4:checked ~ .sheet-track-4,
.sheet-hidden-track-4:checked ~ .sheet-track-3,
.sheet-hidden-track-4:checked ~ .sheet-track-2,
.sheet-hidden-track-4:checked ~ .sheet-track-1,
.sheet-hidden-track-4:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-3:checked ~ .sheet-track-3,
.sheet-hidden-track-3:checked ~ .sheet-track-2,
.sheet-hidden-track-3:checked ~ .sheet-track-1,
.sheet-hidden-track-3:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-2:checked ~ .sheet-track-2,
.sheet-hidden-track-2:checked ~ .sheet-track-1,
.sheet-hidden-track-2:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-1:checked ~ .sheet-track-1,
.sheet-hidden-track-1:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
.sheet-hidden-track-0:checked ~ .sheet-track-0 {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
}
input.sheet-pages {
opacity: 0;
width: 20%;
cursor: pointer;
}
span.sheet-pagelabel {
margin-left: -20%;
}
input.sheet-pages + span.sheet-pagelabel {
border-radius: 4px;
padding-left: 2px;
padding-right: 2px;
}
.sheet-pages:checked + span.sheet-pagelabel {
color: white;
-webkit-animation: advance 2s infinite ease;
animation: advance 2s infinite ease;
}
.sheet-indieability1-description,
.sheet-indieability2-description {
display:none !important;
}
.sheet-indieability1:checked ~ .sheet-indieability1-description,
.sheet-indieability2:checked ~ .sheet-indieability2-description {
display:block !important;
}
.sheet-harm-clock {
width: 50px;
height: 50px;
background: #eee;
border-radius: 50%;
position: relative;
display: inline-block;
border: 4px solid transparent;
transform: rotate(45deg);
transition: .25s ease;
}
.sheet-harm-clock-text {
text-align: center;
vertical-align: middle;
line-height: 50px;
transform: rotate(-0deg);
font-family: "Franklin Gothic Medium", Georgia, serif;
font-style: normal;
font-size: 20px;
line-height: 45px;
font-weight: 300;
position:absolute;
left:6px;
top:1px;
padding: 2px;
}
.sheet-4clock-4:checked ~ .sheet-harm-circle {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
transition: .25s ease;
}
.sheet-6clock-6:checked ~ .sheet-harm-circle {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
transition: .25s ease;
}
.sheet-8clock-8:checked ~ .sheet-harm-circle {
background:url(https://i.imgur.com/rS1jR67.png) center;
background-size:120%;
transition: .25s ease;
}
.sheet-4clock-0:checked ~ .sheet-harm-clock-text:after {
content: "0/4";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-4clock-1:checked ~ .sheet-harm-clock-text:after {
content: "1/4";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-4clock-2:checked ~ .sheet-harm-clock-text:after {
content: "2/4";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-4clock-3:checked ~ .sheet-harm-clock-text:after {
content: "3/4";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-4clock-4:checked ~ .sheet-harm-clock-text:after {
content: "4/4";
transform: rotate(0deg);
color: #f3f3f3;
}
.sheet-6clock-0:checked ~ .sheet-harm-clock-text:after {
content: "0/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-1:checked ~ .sheet-harm-clock-text:after {
content: "1/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-2:checked ~ .sheet-harm-clock-text:after {
content: "2/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-3:checked ~ .sheet-harm-clock-text:after {
content: "3/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-4:checked ~ .sheet-harm-clock-text:after {
content: "4/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-5:checked ~ .sheet-harm-clock-text:after {
content: "5/6";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-6clock-6:checked ~ .sheet-harm-clock-text:after {
content: "6/6";
transform: rotate(0deg);
color: #f3f3f3;
}
.sheet-8clock-0:checked ~ .sheet-harm-clock-text:after {
content: "0/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-1:checked ~ .sheet-harm-clock-text:after {
content: "1/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-2:checked ~ .sheet-harm-clock-text:after {
content: "2/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-3:checked ~ .sheet-harm-clock-text:after {
content: "3/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-4:checked ~ .sheet-harm-clock-text:after {
content: "4/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-5:checked ~ .sheet-harm-clock-text:after {
content: "5/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-6:checked ~ .sheet-harm-clock-text:after {
content: "6/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-7:checked ~ .sheet-harm-clock-text:after {
content: "7/8";
transform: rotate(0deg);
color: #0e0e0e;
}
.sheet-8clock-8:checked ~ .sheet-harm-clock-text:after {
content: "8/8";
transform: rotate(0deg);
color: #f3f3f3;
}
.sheet-harm-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #f3f3f3;
position: relative;
display: inline-block;
transition: .25s ease;
overflow:hidden;
-webkit-animation: advance 1s infinite ease;
animation: advance 1s infinite ease;
}
.sheet-harm-box1 {
width: 50px;
height: 50px;
position: relative;
display: inline-block;
bottom: 25px;
transform: rotate(90deg);
transform-origin: bottom;
transition: .25s ease;
overflow:hidden;
}
.sheet-harm-inside1 {
width: 50px;
height: 50px;
position: relative;
display: inline-block;
bottom: 0px;
transform: rotate(-180deg);
transform-origin: bottom;
transition: .25s ease;
overflow:hidden;
}
.sheet-harm-4clock-0:checked ~ .sheet-harm-inside1 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-4clock-1:checked ~ .sheet-harm-inside1 {
transform: rotate(-90deg);
transition: .25s ease;
}
.sheet-harm-4clock-2:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-4clock-3:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-4clock-4:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-6clock-0:checked ~ .sheet-harm-inside1 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-6clock-1:checked ~ .sheet-harm-inside1 {
transform: rotate(-120deg);
transition: .25s ease;
}
.sheet-harm-6clock-2:checked ~ .sheet-harm-inside1 {
transform: rotate(-60deg);
transition: .25s ease;
}
.sheet-harm-6clock-3:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-6clock-4:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-6clock-5:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-6clock-6:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-0:checked ~ .sheet-harm-inside1 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-1:checked ~ .sheet-harm-inside1 {
transform: rotate(-135deg);
transition: .25s ease;
}
.sheet-harm-8clock-2:checked ~ .sheet-harm-inside1 {
transform: rotate(-90deg);
transition: .25s ease;
}
.sheet-harm-8clock-3:checked ~ .sheet-harm-inside1 {
transform: rotate(-45deg);
transition: .25s ease;
}
.sheet-harm-8clock-4:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-5:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-6:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-7:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-8:checked ~ .sheet-harm-inside1 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-ring1 {
width: 50px;
height: 50px;
border-radius: 50%;
bottom:-25px;
position: relative;
display: inline-block;
border: 4px solid #8A0C0D;
transition: .25s ease;
visibility:visible;
}
.sheet-harm-box2 {
width: 50px;
height: 50px;
position: relative;
display: inline-block;
bottom: 79px;
transform: rotate(270deg);
transform-origin: bottom;
transition: .25s ease;
overflow:hidden;
}
.sheet-harm-inside2 {
width: 50px;
height: 50px;
position: relative;
display: inline-block;
bottom: 0px;
transform: rotate(-180deg);
transform-origin: bottom;
transition: .25s ease;
overflow:hidden;
}
.sheet-harm-4clock-0:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-4clock-1:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-4clock-2:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-4clock-3:checked ~ .sheet-harm-inside2 {
transform: rotate(-90deg);
transition: .25s ease;
}
.sheet-harm-4clock-4:checked ~ .sheet-harm-inside2 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-6clock-0:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-6clock-1:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-6clock-2:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-6clock-3:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-6clock-4:checked ~ .sheet-harm-inside2 {
transform: rotate(-120deg);
transition: .25s ease;
}
.sheet-harm-6clock-5:checked ~ .sheet-harm-inside2 {
transform: rotate(-60deg);
transition: .25s ease;
}
.sheet-harm-6clock-6:checked ~ .sheet-harm-inside2 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-8clock-0:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-1:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-2:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-3:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-4:checked ~ .sheet-harm-inside2 {
transform: rotate(-180deg);
transition: .25s ease;
}
.sheet-harm-8clock-5:checked ~ .sheet-harm-inside2 {
transform: rotate(-135deg);
transition: .25s ease;
}
.sheet-harm-8clock-6:checked ~ .sheet-harm-inside2 {
transform: rotate(-90deg);
transition: .25s ease;
}
.sheet-harm-8clock-7:checked ~ .sheet-harm-inside2 {
transform: rotate(-45deg);
transition: .25s ease;
}
.sheet-harm-8clock-8:checked ~ .sheet-harm-inside2 {
transform: rotate(-0deg);
transition: .25s ease;
}
.sheet-harm-ring2 {
width: 50px;
height: 50px;
border-radius: 50%;
bottom:-25px;
position: relative;
display: inline-block;
border: 4px solid #8A0C0D;
transition: .25s ease;
visibility:visible;
}