.trailbtn:checked + fieldset.trailbox { display: block;} .trailbtn:checked + .trailbox + .trailbtn { display: block; height: 2.25em; padding: 0 3ex; font-size: 1em; font-weight: normal; color: #000; background-color: #FDD; border: 1px solid #000; border-radius: 4px; } .trailbtn:checked + .trailbox + .trailbtn[type=submit]:before {content: none;} * { box-sizing: border-box; } body { overflow: scroll; position: relative; width: 100%; margin: 0; padding: 0; padding-top: 2em; } form > button[type=submit] { position: fixed; display: block; top: 0; right: 2.5em; height: 2.25em; padding: 0 3ex; font-size: 1em; font-weight: bold; color: #000; background-color: #FDD; border-width: 1px; border-color: #000; border-style: none solid solid solid; border-radius: 0 0 4px 4px; z-index: 3; } form > button[type=submit]:hover { background-color: #FEE; } input.tab { display: none; } input.tab + label.tab { display: block; } input.tab + label.tab::before { content: '\25b8 \00a0'; float: left;} input.tab:checked + label.tab::before { content: '\25be \00a0'; } input.tab + label.tab + div.tab { display: none; } input.tab:checked + label.tab + div.tab { display: block; } input.color { display: none } input.color + label{ display: inline-block; width: 1em; height: 1em; border: 1px solid black; } input.color:checked + label{ border-width: 3px;} input.color[value="#000"] + label, input.color[value="#888"] + label { background-color: #888;} input.color[value="#00A"] + label { background-color: #00F;} input.color[value="#0A0"] + label { background-color: #0F0;} input.color[value="#0AA"] + label { background-color: #0FF;} input.color[value="#A00"] + label { background-color: #F00;} input.color[value="#A0A"] + label { background-color: #F0F;} input.color[value="#AA0"] + label { background-color: #FF0;} input.color[value="#FFF"] + label { background-color: #FFF;} h1, label.tab, div.tab, fieldset.tab, div.patient, div.prescription { display: block; width: 96%; margin: 0 2%; } div.prescription span { display: inline-block; width: 50%; margin-right: -.75ex; vertical-align: top; } div.prescription span label { font-weight: bold; margin-right: 1ex;} div.prescription span.prescno, div.prescription span.catalogue { width: 33%; font-weight: bold; margin-bottom: .5em; padding: .5ex 1ex; } div.prescription ul {margin-top: 0;} div.prescription label.checkbox, div.prescription label.radio { display: block; padding-left: 1.25em; font-size: 1em; margin: .5em 0; } div.prescription label.checkbox:before, div.prescription label.radio:before { display: inline-block; color: #000; background-color: #FFF; height: 1.375em; width: 1.125em; padding: .125em 0 0 .375em; margin: 0 .5em .25em -1.25em; border: 1px solid #000; vertical-align: middle; content: ' '; } div.prescription label.radio:before { border-radius: .5em;} div.prescription label.checkbox.checked:before, div.prescription label.radio.checked:before { content: "\2713";} div.prescription label[for=prescreviewed] { margin-left: 1ex; font-weight: bold; text-decoration: underline; background-color: #FCC; } div.prescription label[for=prescreviewed].checked { font-weight: normal; text-decoration: none; background-color: transparent; } div.prescription label.tab {width: 96%; border: none; border-bottom: 1px dotted;} div.prescription div.tab { width: 96%; background-color: #DDD;} input.stickynote { display:none; } input.stickynote + .stickynote { position: fixed; background-color: #FF8; top: 4em; bottom: 4em; left: -4.5em; width: 5em; padding: 1ex; max-height: 90%; z-index: 2; } input.stickynote + .stickynote:nth-of-type(2n) { background-color: #8FF; top: 8em; } input.stickynote + .stickynote > * { display: none; } input.stickynote + .stickynote > label { position: absolute; top: 0; bottom: 0; right: .5ex; display: block; text-align: right; font-weight: bold; } input.stickynote + .stickynote:hover { left: -1ex; } input.stickynote:checked + .stickynote { width: auto; left: 1em; right: 1em; } input.stickynote:checked + .stickynote > * { display: block; } input.stickynote:checked + .stickynote > textarea { display: block; position: absolute; left; 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; background-color: #FF8; padding: 2em 1em; } input.stickynote:checked + .stickynote > button[type="submit"] { display: block; position: absolute; right: .5ex; bottom: .5ex; z-index: 2; } input.stickynote:checked + .stickynote > label { display: block; position: static; font-size: 0; } input.stickynote:checked + .stickynote > label:before { position: absolute; font-size: initial; content: "x"; top: .5ex; right: .5ex; padding: .125ex .75ex; background-color: #000; color: #FFF; border-radius: 1ex; z-index: 2; } fieldset.penwidth, fieldset.color { position: absolute; right: 0; width: 2em; margin: .5em .5em .125em 2%; border: none; padding: 0; } fieldset.penwidth { bottom: 19em; } fieldset.penwidth > input {display: none;} fieldset.penwidth > input + label { display: none;} fieldset.penwidth > input:checked + label { display: block; width: 2em; height: 2em; background-color: #000; border: 1em solid #FFF; border-radius: 1em; } fieldset.penwidth > input[value="4"] + label { border-width: .75em; } fieldset.penwidth > input[value="12"] + label { border-width: .5em; } fieldset.penwidth > input[value="36"] + label { border-width: .25em; } fieldset.color { bottom: 0; } fieldset.color > input.color + label { width: 2em; height: 2em; } .dotmark { max-width: 90%; margin: .5em 1em .125em 2%; padding: 0; text-align: left; border: 1px solid black; } .dotmark.ov { position: absolute; left: 0; bottom: .25em; z-index: 1; } @media(min-width: 800px){ h1, label.tab, div.tab, fieldset.tab, div.patient, div.prescription { width: 38%; margin-right: 0; } input.stickynote:checked + .stickynote { right: 50%; } fieldset.penwidth, fieldset.color { position: fixed; } .dotmark { position: fixed; max-width: 52%; max-height: 98%; right: 2em; bottom: .25em; } .dotmark.ov { position: fixed; right: 2em; left: auto; } } h1 {display: none;} div.patient, div.prescription { margin-top: 1em; } div.prescription { border: 1px solid black; background-color: #EEE; padding: .125em 1.25ex .5em 1.25ex; } div > h2 { margin: 0; border-bottom: 1px solid black; } div:nth-child(n+2) > a:first-of-type { display: block; margin: .125em 0 .5em 0; text-decoration: none; } #report fieldset.tab, #report label.tab { font-size: 1.25em; font-weight: bold; padding: .125em 1ex .25em 1ex; color: #FFF; background-color: #333; margin-top: .125em; text-align: right; border: none; } #report label.heading { background-color: #FFF; margin-top: 1em; border: 2px solid black; border-bottom-width: 1px; color: black; } #report label.heading > span { text-decoration: underline; } #report fieldset.tab > *, #report label > input, #report label > span { display: inline-block; text-align: right; } #report .tab > .no { width: 10%; float: left; border: solid 1px #FFF; background-color: #555; border-radius: 2ex; padding: 0; text-align: center; } #report label.heading > span.no { background-color: inherit; border: none; } #report .tab > .date { width: 30%; } #report .tab > .therapist { width: 30%; } #report .tab > .signature { width: 20%; } #report label.tab > .signature { font-size: .75em; } #report .signature > input[type=checkbox] { display: inline; font-weight: bold; font-size: 1.25em; } #report .signature > input[type=checkbox]:before { display: block; width: 1.25em; margin: -.125em 0 0 -.5ex; background-color: #FFF; text-align: center; content: "\00a0 \00a0 \00a0"; } #report .signature > input[type=checkbox]:checked::before { content: "\2713"; } #report input.tab + label.tab > input.date, #report input.tab + label.tab > input.therapist { display: none; } #report input.tab:checked + label.tab > input.date, #report input.tab:checked + label.tab > input.therapist { display: inline; } #report input.tab:checked + label.tab > span.date, #report input.tab:checked + label.tab > span.therapist { display: none; } #report div.tab { border: 2px solid #333; border-top-width: 1px; margin-top: -1px; padding: .25em .5ex 1em .5ex; } #report div.tab > fieldset.note { border: none; margin: 0; padding: 0; } #report div.tab > fieldset.note > textarea { display: block; width: 93%; height: 8em; margin: -8em 0 .5em 2em; font: normal 1em sans-serif; } div.tab > fieldset.note > input.color + label { margin: 0; display: block; } div.tab > fieldset.note > input.color[value="#888"]:checked ~ textarea { background-color: #AAA; } div.tab > fieldset.note > input.color[value="#00A"]:checked ~ textarea { background-color: #88F; } div.tab > fieldset.note > input.color[value="#0A0"]:checked ~ textarea { background-color: #8F8; } div.tab > fieldset.note > input.color[value="#0AA"]:checked ~ textarea { background-color: #8FF; } div.tab > fieldset.note > input.color[value="#A00"]:checked ~ textarea { background-color: #F88; } div.tab > fieldset.note > input.color[value="#A0A"]:checked ~ textarea { background-color: #F8F; } div.tab > fieldset.note > input.color[value="#AA0"]:checked ~ textarea { background-color: #FF8; } div.tab > fieldset.note > input.color[value="#FFF"]:checked ~ textarea { background-color: #FFF; } div.tab > button.delete {float: right; display: inline-block; margin-top: -1em; display: none;}