Checking if this is okay. I know Red/Green c/b is a thing, but I’m hoping here there’s enough contrast and there’s no red or green touching so as to get confused. There is no point in the story where discerning red from green is important.
Firefox has embedded color accessibility simulator in beta. Your text is green-ish, so without green, text and links are harder to notice. Same tab has contrast checker.
1 Like
Some resources you might find useful for things like this:
- WebAIM: Contrast Checker (good for checking to see if text and background color choices are readable by most people; a 7:1 or higher contrast ratio is recommended)
- Coblis - Color Blindness Simulator (you can check screenshots to see how they’d look to different kinds of color blindnesses)
- How to Design for Color Blindness (a list of suggestions to increase accessibility for people with various visual impairments)
- PowerMapper’s SortSite - Accessibility Checker and Validator (online website accessibility checker)
Your dark green text on the blue background has a color contrast ratio of about 5:1, so you might want to change the text color to #76A77E to fix the contrast.
2 Likes
This is very helpful! I used one of @HiEv’s links and the hex code he suggested. Below is the new sample. To me it does not look that different at all, but I guess the main body text is a bit more toward pale blue than green. In the linked checker I can notice the difference with all types of c/b it lets you simulate EXCEPT monochrome.
I wish there was a toggle in AXMA to have optional link underlining, but it’s not even a main option to have them on all the time. I’m sure I could do it with CSS. Isn’t there a “hover” link text options? I probably shouldn’t make anyone screen hunt for the links. Sorry I’m clueless about this. The theme I have doesn’t display much difference between bolded text. I’m wondering if I ought to try an amber link font maybe.
This is HiEv's suggested change
It’s so subtle to as to barely register with me, but I am not colorblind.
Here it is simulating “green-blind”
I’m partially (not completely) red-green colorblind, and the second one looks good to me! (You’d still want to check with someone who’s completely r/g blind, ofc.)
1 Like
Sorry, I’m not familiar with AXMA. If it uses CSS, then “text-decoration: underline;” should give you the effect you’re looking for. If you want that to only appear upon hovering the mouse over a link or tabbing to it, then you’d do:
a:hover, a:focus {
text-decoration: underline;
}
(Note: Having some indicator when a link has focus is a good idea for additional accessibility to help people who need to use keyboard navigation.)
Hope that helps! 
1 Like
AXMA does use CSS, and there is a “storystyle” passage where it goes. That thing is so extensive and arcane, and my knowledge of CSS lacking. It may be fruitless for this project (IFComp deadline) but I can think about this earlier in future projects.
I had to resist figuring out how to implement your “dumb terminal” style glowing text - t’would be perfect in this project, but nooo timeeeee… 
All you’d need to do is copy the CSS to your project and change “passage” to the name of the class that affects the text you display. You should be able to figure out what class that is by right-clicking on the HTML, choosing “inspect element” (or your browser’s equivalent) on the text, and seeing what classes are used there.
1 Like
Yeah, that sounds simple. I’d try it if I didn’t fear blowing the thing up three days from the deadline, and having time to make sure everything in the story works. I totally have a future project I can use dumb terminal in though!
(The editor says I have 1288 passages currently!)
Here's what my StoryStyle passage currently looks like for ref
*, #body {
-webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-focus-ring-color:rgba(0,0,0,0); outline:none; -webkit-touch-callout:none; -moz-user-select:none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; -webkit-user-drag:none; user-drag:none;
}
p {margin-top:0; margin-bottom:0.6em;}
html, #body {margin:0; height:100%; overflow:hidden;}
#body, input {font-size:95%;}
#body, .input_text, .input_butt {font-family:'Trebuchet MS', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;}
.input_text, .input_butt, #printCont, #printAdd, #printImage, .wind, .button, .buttonno, .buttonback, .dialogButton, #shadowlayer {background-color:#04062c; color:#76a77e;}
#body {
background-image:url();
background-repeat:repeat;
background-color:#01010d;
word-wrap:break-word;
}
#toolbar, #toolbar * {background-color:transparent; color:#FFFFFF;}
#menu, #menu * {background-color:#051145; color:#cfe0ff;}
#toolbar {height:36px; position:absolute; top:0; left:0; width:100%; padding:6px 0; overflow:hidden; z-index:1; font-size:0.9em;}
#toolbar, #menu {opacity:0.85;}
#page, #printCont, #printImage, #printAddCont, #printAdd, #printAddText, #console, #toolbar, .wind, #menu, .button, .buttonno, .buttonback, .input_text {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#page {display:none; height:100%; max-height:100%; width:100%; max-width:600px; text-align:left; padding:0; margin:0 auto;}
#printTitle {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#printCont, #printImage, #menu, #toolbar {box-shadow:0 0 3px #000;}
#printCont {position:absolute; top:36px; bottom:36px; left:0; right:0; padding:0 10px; overflow:auto; -webkit-overflow-scrolling:touch;}
#printImage {display:none; overflow:hidden; position:absolute; top:36px; bottom:36px; left:0; right:0;}
#clickImage {width:100%; height:100%; object-fit:cover; max-width:none;}
#print, #printAdd, #menu {line-height:1.4em;}
#print {margin:0 auto; max-width:600px;}
#menu {height:36px; max-height:36px; margin:0; padding:3px 3px 3px 20px; font-size:13px; overflow:auto; -webkit-overflow-scrolling:touch; position:absolute; left:0; right:0; bottom:0; text-align:center; z-index:98; line-height:1.1em;}
#menuTable {height:100%;}
#menu span {background-color:inherit; border:none; border-radius:0; padding:0; display:inline-block; margin:0 4px 0 0; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#menu img {display:inline; max-height:20px; vertical-align:middle;}
#printAddCont {display:none; padding:56px 20px; position:absolute; left:0; bottom:0; top:0; right:0; z-index:100; overflow:hidden;}
#printAdd {width:100%; max-width:668px; margin:0 auto; padding:0 10px; max-height:100%; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 0 3px #000;}
#printAddText {text-align:left;position:relative;}
.wind {display:none; position:absolute; width:240px; margin-top:-110px; margin-left:-120px; height:auto; max-height:220px; left:50%; top:50%; z-index:101; padding:12px; text-align:center; overflow:auto; -webkit-overflow-scrolling:touch; font-size:15px; box-shadow:0 0 3px #000; line-height:1.6em;}
.plink, .plinkno, a, .button, .buttonno, .buttonback, .dialogButton, #storytitle {color:#04ff0e; text-decoration:none; -webkit-tap-highlight-color:rgba(128,128,128,0.2);}
.wind .plink, .wind .plinkno {color:inherit;}
.button, .buttonno, .buttonback, .dialogButton {display:table; font-size:0.95em; border-width:2px; border-style:solid; border-color:#76a77e; padding:3px 8px; margin:0 4px 2px 0; max-width:90%; -webkit-hyphens: auto; hyphens: auto; border-radius:5px; -webkit-tap-highlight-color:rgba(128,128,128,0.2);}
.dialogButton {display:inline-block; padding:2px 0px; margin:0; min-width:30px; width:44%;}
.plinkno, .buttonno {opacity:0.6;}
#storyauthor {font-size:1.3em; letter-spacing:0.12em; line-height:1;}
#storytitle {font-size:1.8em; margin:1em 0; line-height:1;}
#storyauthor p, #storytitle p {margin:0;}
#storysubtitle {font-size:0.8em; text-align:center; max-height:8em; overflow:auto; -webkit-overflow-scrolling:touch;}
tt, #console {font-family:Menlo, Monaco, 'Droid Sans Mono', 'Courier New', Courier, 'Lucida Console', monospace;}
.input_text {-webkit-appearance:none; margin:0; padding:4px; width:90%; border-width:0;}
.input_text, #console, #console *, tt {-moz-user-select:text; -o-user-select:text; -khtml-user-select:text; -webkit-user-select:text; -ms-user-select:text; user-select:text;}
.input_butt {-webkit-appearance:none; margin:0; text-align:right; width:10%; padding:4px; border:none;}
.myinput, .trow {border-width:2px; border-style:solid; border-color:#76a77e;}
.myinput {padding:2px; width:100%; margin:0 auto; clear:both;}
.trow, .trow_nb {word-wrap:break-word; table-layout:fixed; margin-bottom:4px;}
.trow_nb {border:none;}
.rcol {border-left-width:2px; border-left-style:solid; border-left-color:#76a77e;}
.hr {color:#76a77e; background-color:#76a77e; width:100%; border:none; height:2px;}
.asterisk {font-size:1.2em; text-align:center; margin:0;}
.header {color:#ff1d01;}
.header {font-size:1.3em; text-align:center; padding:0.5em 0; display:block;}
img {max-width:100%; border:none; margin:0; padding:0;}
.file {max-width:100%; display:block; margin:0.2em auto;}
.avatar {visibility:hidden; max-width:90%;}
.video {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video iframe, .video object, .video embed {position:absolute; top:0; left:0; width:100%; height:100%;}
li {margin-left:0px; list-style-type:circle;}
.choice {margin-left:1.75em; position:relative;}
.choice .plink {margin:0.5em 0;}
.choice .plink:before {content:'✓'; position:absolute; left:-1.5em; visibility:hidden; color:#76a77e; -webkit-transition:opacity 0.5s ease; transition:opacity 0.5s ease; opacity:0;}
.choice .selected:before {visibility:visible; opacity:1;}
#console {position:absolute; top:0; right:0; left:0; z-index:99; margin-top:36px; padding:0 5px; color:#000000; height:0; overflow:hidden; -webkit-overflow-scrolling:touch; font-size:12px; -webkit-transition:height 0.5s ease; transition:height 0.5s ease;}
body {scrollbar-face-color:#FFFFFF; scrollbar-track-color:rgba(0,0,0,0.5);}
{}::-webkit-scrollbar
{
width:6px;
height:6px;
}
{}::-webkit-scrollbar-corner
{
background:transparent;
}
{}::-webkit-scrollbar-track
{
background:transparent;
}
{}::-webkit-scrollbar-thumb, .scrollbar
{
background-color:#76a77e; border-radius:6px; opacity:0.7;
}
{}::-webkit-scrollbar-thumb:hover
{
opacity:0.6;
}
.imgbutton {display:inline-block; width:24px; height:24px; background-size:24px;}
.imgbutton:hover {opacity:0.8;}
#showImageButton {position:absolute; background:#FF0000; bottom:0; left:0; width:20px; height:36px; font-size:20px; overflow:hidden; text-align:center; z-index:100; background:no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAAMFBMVEUAAAD////F5P9/wkbW7P9nvEgSiUa02//95ASr1/+Zy/mHvvB1seg9tEz90QTf8f96IAwnAAAAAXRSTlMAQObYZgAAAF1JREFUCNdjwAoEwUAAyJLoeHPmzBkI6/Xu3bshrFerVq0CseTeWc6cORPEEi9XKi8vB7GElEAAxBJxAQEQSyzt/7e0/yCW7N203LtpIJZoKAiAWMLGICCAZC9+AAD1sR3QeboaSAAAAABJRU5ErkJggg==);}
#audioButton {display:none; opacity:0.5; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAdVBMVEUAAAAAAAAcFhwBAQAAAAABAwMAAQEAAAEAAAEBAAEBAQEBAQABBAMCAgIEAQEHAQgXChAAAAD////v8O8FBQXd3N0REhH49/dKSksiIiK8vLx1dHRiYmIzMjLl5uXPzs6MjIyop6afoKA5ODiIiIctLS1TU1P4ylzxAAAAEXRSTlMA9QfmxWju27KqjXhbSTQYEOwosOkAAAGNSURBVEjHlVbpmoIwDGw5lkvQBKkI4r2+/yNuytpyo5kfBf1mvnaGNK2YwEnjyAukDLwoTh3xATs/lNCDDP3dCt1JfmCCn8RZovsuzML1ZyVbDxbhbaf8zIUVuNmYv5GwCrkZ8eEjBopMfhbIrOfXhS/gWufOQj77cVYmXX9CLWsabljcXwOR/57AnfAPSOMBCedTf1H/UyRj/oOo9Li2CqwUWCRtvY3r5zcnWuvh8TzTa3Hs6mo34+CoSaj5CkBdtUINXIRDvirwLaiwqPfaD1ZgEJJlOeRfUMOYLhoo6WGdS0ekw+grtIJae8kbuJLOppuK2K79fsYOrfqUa66isTSsWESGn2MfXWA1PBHvRhAJUxY3nBHACfECD5rHlocI3m/5rGBPfytFv42JQJiQcFYAFFoDWmViYgvYS2Kb5sfafbhb/s2HY5cGu/i45b26gY4zG2h9izbTLcptAkttxprG4jVoM0uN7GUaWQl9+OxWyW3G3HbPPVD4Rxb/UOQfu/yDnX914F9O2NefP39lfM3WWZekAAAAAElFTkSuQmCC);}
#BackButton {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAVFBMVEUAAAAAAAABAQAAAAEBAwMaBw4AAAEBAAAAAQABAQEBAQABBAMBAQEEAQEHAQgAAAD////19fXs6+xDQ0M9Pj0sKywwMDCysrOlpaUfHx/l5uW8vLzhDUXHAAAAD3RSTlMA9OauaA3bx8KNeFtJNBjKe016AAABO0lEQVRIx5VW25aDIAw04r3aAIvabv//P9fD0lIhkpN58WXmQCZmQpVjHtXQAXSDGueKQ9sowC+AatoSfQLMANOlpKmRRN2Q9HuPl+jvOX+psYB6Sfk3wCLglvCRxUmxAC+A5ave0/23l9avjagjVn7y58foA2YlvPr4n/A9dszRhP7WBF8bytz/nk8UX1skMPkDgOLrB+lUGytI+PaJeFGFIvkrklCHAAR8hGO+GH6CuRpFfBwrFfkFmMfzXcTgv1uZH20bqs5/9zI7NqYLJlle8BtskgrEVwpFr4Y9IBT9ttWVFTbaOmKmsFupcTOKFEc8g0QB/vcWKNR5gBw/QMmIOnZE0xBwTAjkMeOYmMmDzDFB5tHnCktGJR3G627MvlJhLI176UKRryz5UpSvXflilz8d5I8T8fPnD0myayNfQ66jAAAAAElFTkSuQmCC);}
#ConsoleButton {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAdVBMVEUAAAAAAAAAAAABAwMaBw4AAQEBAQABAQAAAAEAAAEBAAEAAQEBAQABBAMBAQEEAQEHAQgAAAD///8REhK7urmAf4AZGBnw8PAwMDBsbGw3ODji4uLPz88qKiqJiIhdXl1TU1PDxMOtrK2WlpZAQECgoKEGBwdlGHtXAAAAEXRSTlMA9cVoDe7n5Nuyqo14W0k0GKX4OrsAAAGKSURBVEjHpdbbcqswDAVQ24SWW0i3CDEEcmmS9v8/8XROO5ZEcJhM1rM9shCWbO7VZeEyazNXlLVZskpyC8HmyerR8irFnbSKbkneMOstMXM+HKLch7mzeccD7xszsbZ4yK4n67FI7dhYSM3u0HWHXaNjbES+6vxd/zV6Ij9+nTqVB2fu5PLjQMHQHsBc+P5gp5GU8QSW/NVX1Kv3NOF7UcHfmldiPc0QMar/AVI+v6cZnvNIVzqDLc266CxyDkARHCI3xnDNjhTRcvWMqRGMFPGJoDYlAk8RA4LSFAgoxiMojHsugjPZczlkxiK4UsQRgZUb9hTRyQ0Z2CfN2kIeyWEphO/UnSggtDSjh1Bw4WJ/RwupNDWUfiBl6KHUfz8fu11JuO6h2PB7s28SvqHlfIEYCZhI+IqynQAtXXETYI0AreI2s3wkbjPTLLYClES1ymUu0ozPbXDWzTjS7s8UnFW7jw6U28XTD3+5QVg/GFnNYf+ja9TIem0oLo/dlwb78tPhpcfJ08+ff4UFe7qTeKPjAAAAAElFTkSuQmCC);}
#PrefsButton {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAgVBMVEUAAAAAAAAcFhwBAQABAwMAAQEAAAEBAAAAAQAAAAEBAAEBAQEBAQABBAMBAQEEAQEHAQgXChAAAAD///8TExP19PSjo6IEBATV1dXu7u3i4uFERUasrKwgIB+WlpaNjoxXWFm8vLxMTExgX18/Pz8wMTGzs7OCgYJ8fXxtbW0qKip12iDsAAAAEnRSTlMA9QfmaO7bx8Kyqo14W0k0GBAY7GJBAAACGklEQVRIx6VW6XKDIBBWa9OYpKYREA8Uj9oc7/+AdWA5AmEymXx/1GUX9tsLIw9Jvt9tN3G82e72eRI9wSnN4sJCnKWnKIzk8Fl4+DwkIfX0o3iIj/Shyc9XEcTXj69/hO0Dhxxd/W/gGkL87eg767jrsCO6szg6+3cjQmPnnHG0+Lr+92hF7/LQzBM3PrRGK2rqxkpFN1WS3xYLAhwJcPnV/qr1FA5QDvGmGa9Lex4RYDy3y3VsGk7BKXnEAfSvQqlqkIWmEo8rqBxEvan6KVEQpaqr0x2DsMEdi6xQ+Avp/2mVbKVscjZojbpaUevP2WQvifJCg8M6KSe8hnMqCQisFObR3tRPDdvrDWeQEFNX+2in9XskMRSek7222EVb+dKeFWVWWGCK9rmVgm20Ec+LSReswD4mhRch2EQySARpYNsAGzmRYQID9NwASQNwqSdOVr3sk166BKTpXFa6bqjuC11fVTlTIG3CyhRrnzMzYbUS1xGIx6QkUwPudCZxVmno82veYkpxy4n2UiN/XHzNyNhoUjNYxQflHegg74TMbqAFBbHoBrJbtA8b9LpF7SFwkYyJrUlkgV/0ELDHDGY1qfg0iBRCuoaJV6Rm2B4zhgUd5k4kpASu8mseqGIQGpWYQJ8FRiUMY7dvmDeMw+N+qVYCiz/uwxfKbZpu7oXyzpXlX4p0hXMpvnXtPr/YX/x1eOvn5OXfn3/w+Ibw3Z3WrwAAAABJRU5ErkJggg==);}
#body, .choice .plink:before {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABYlBMVEUAAAA/Pz82Njb///8vLy////8tLS03NzeJiYklJSX39/ciIiJBQUEzMzMzMzOZmZn///8mJiY3Nzc0NDTg4OA2NjZMTEwsLCxubm5GRkZWVlYzMzM0NDQzMzM0NDQzMzMyMjIxMTEzMzMyMjIyMjIpKSk0NDTn5+f9/f09PT3Jycns7Oza2tpycnKrq6tDQ0OysrJcXFwzMzMzMzMyMjIxMTEzMzMxMTEzMzMxMTFAQECioqLZ2dkdHR03Nzfv7+/r6+vS0tJCQkIzMzOYmJi8vLy4uLhRUVEwMDDp6emioqJpaWmLi4uGhoZlZWXGxsaQkJB6enpZWVk0NDSFhYU2NjaXl5c2NjYzMzMyMjI1NTUyMjIyMjIyMjIyMjI1NTUzMzMrKys5OTn////7+/s6OjokJCQ3Nzc0NDSampomJiYxMTEtLS39/f04ODg5OTkvLy8qKir4+PgsLCwjIyMeHh7+hwJIAAAAY3RSTlMAA/H7Bfr47eL79/r201T+9/b19fT08/Px8fDvz7u1X0o7KhYR/vn29PTz8vDw7+/u7evdkXNoYkMmCPj39/b19fT09PPy8vHx8PDw7+/v7ezs6ebk5OPgyMbBrJ2AeiIZDAnUBOCsAAABsElEQVQ4y33SZ1vqMBQH8JTYXluGcEH2Bvce13X33su91yEk0lrA8f2N9YmPJOJpkhc5v+f/ojnoODeYr6Ae1LVyzVZz7egJ8dFOJVim3F28uXo57aeDpa7ieb0PJiOMLXHRFeDPBqMhIRRwBhfwN2G7i0h7DPRzUKvB+6jTfCGECvg37nPIAdJU4vMAX0Mf2mQeiRAF8D2WapN9IVTAD+urSfaEUAE/h2dMkuNCAn0e8AT+4yc7PULICQDnEJ4wSbCKtA7wj4N7gf+/pnOVjoRGL66JNi/9k+FuK4A3eRfrujX0anzVYcsPwLNGr/cnAayJdHyk3zAZzZzIoAZv3wFOXrdsSimbLSIJXIAV+A0QM9xsIVQqryCtE2AYm2oELMA/2xvendaZsA6xQJvUJwFGI+QQrYi2AFeb3785NHqZ1kFPO1vKWM06M4FLUlggkVGALyYpyI+VdQ2bLqKqbyCJIRxvZeWEUoZGQ+gUzbuJGMAPPynKEdWlyu2klWn9F0A4ZecloHmbrzwbGdanp+wgkku7O4rUSMb9NhGzrVawOdAicwtqQ+QsB9luSLm/ARNReAP/nQ5NAAAAAElFTkSuQmCC),default;}
a, .plink, .button, .buttonback, .dialogButton, .input_butt, .imgbutton, #showImageButton, .sprite[active], #backVideoSkip, #shadowlayer, .updateButton {cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABZVBMVEUAAABDQ0M0NDQ2NjI1NDI3NjIzMzP/1gAlKDb3xgI0NDM2NjKKdB3/1AD/0AAiJjdsXiQzMzMzMzIyMjL/zQAmKTZCPi/gtAfouwUsLjRMRixZUClEPy6wkRM0MzM0NDIzNDMyMjMzMzMyMjItLjQ0NDMtLjX/0QD9ygA3NjLJpA5HQi1TSyu6mBHsvgRyYiPasAmOdhwzMzNZTyo2NTKHcR4zMzMyMzMyMjMxMTIzMzMxMjQzMzMzMzMzMzMyMjIxMTH/3AAvMDQrLTSihxcdIzlBPS/ZsAk+PDDrvQXvwQRBPjDSqguYfxk8OjAxMjOihhdlWSaGcR4zMzOqjBbGoA56aSE0MzOXfhoyMjIyMjQyMjQyMjIwMDU1NTUrKyv/////1gAkKDc6OTaagBkmKTc2NjYwMTU3NjQ4ODYtLzX/0wArLTU6OTT/2AD/0AAyMzYpLDY2NTP/4wD/zQAeJDn/2QAjmktHAAAAYHRSTlMAAwb18O3+/fv39fLj/Pv68dO9Fvn29vT08/Py7+/PtV9KKhH5+ff39PPz8vLy8vDw7uvp4uLdx5FzaGJVU0M8Jvr5+Pj39/f19fX09PPy8fDv7+3t7ezm46ydgHo6Igwu7hV9AAABs0lEQVQ4y33SZ1PbQBAG4JPiqIF7740WeocQWnpC772sfFhdxqb9ftBgcYNuzI6kD7eP3pubWxSN9BajiEUdK4JV/fjqAyGpQ2nFV+ksPtV+5YNK7yURFLi5P4gr3DIRFJD5kZ+ctkgEBeDpMK1q3xDTEYC8IRn6VyIoAI3xLsM+RwxNvrwCkFPrFp5HiOkEQB7NWfiMFl0uAFMcFvApERQAcyAr4AgRFIDbwG4Qz7FtQUAD3kT/mGCHq++Erz5BADz4j34rs1FHEDDDAynz++YPfQ69S+jm3b8DMTH1d3zK4FYRy7QLfa53y87uAOJYNvNP6hM4Zf+aBLSBvPYf+NCjqiqKxk2WEeMBppjYa0CyTyuUFlcq7XMSwJujuXpCBH+oNe0suX0XzNwn/1h2LS/DYBxfINZtu6B2kto2NMkaDkAga0xTYzVpTCUsXFrA8UETRgRc8l5WQe9pvkxb1dcK+SGWUQvehBWfJi0hFs3r6eQt7ATtsjeiuhx1Jq1yV5uQoX+oWfQAxnmdp6hsDcTyuWaY9AhxPmWtJ5QJqtidbbrCeku1ZxfohpuzGr6LLFHrzy8SdsLD0lZqAAAAAElFTkSuQmCC),pointer;}
#printCont, #printAdd, #printImage, #menu, .wind {border-width:0px; border-style:solid; border-color:inherit; border-image:url(#) 0 round;}
#shadowlayer {position:absolute; left:0; top:0; right:0; bottom:0; text-align:center; z-index:1; padding:2em; font-size:1.2em;}
#shadowlayer div {margin-left:auto; margin-right:auto; max-width:50em;}
.sprite {position:absolute; max-width:none; max-height:none; opacity:0; webkit-transition:all 500ms ease; transition:all 500ms ease;}
.sprite[active]:hover {-webkit-transform:scale(1.05); transform:scale(1.05);}
#backVideo {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%);}
#backVideoSkip {position:absolute; left:50%; width:1em; height:1em; line-height:1em; padding:0.2em; margin-left:-0.6em; top:50%; margin-top:-0.6em; font-size:2em; color:#fff; background-color:rgba(128,128,128,0.5); border-radius:50%; z-index:1; text-shadow:none; -webkit-transition:all 300ms ease; transition:all 300ms ease;}
#backVideoSkip:hover {-webkit-transform:scale(1.1); transform:scale(1.1);}
@media only screen and (max-width:599px), only screen and (max-height:599px) {
#printCont, #printImage, #menu {border-width:0; border-image:none;}
#shadowlayer {padding:1em;}
}
@media only screen and (min-width:600px) and (min-height:600px) {
#body, input {font-size:100%;}
#page {max-width:1024px; padding:56px 20px 20px 20px; margin:0 auto;}
#printCont {float:left; width:68%; height:100%; min-height:100%; max-height:100%; margin:0; padding:12px; position:static;}
#print {max-width:none;}
#printAddCont {padding:80px 50px 44px 50px;}
#printAdd {padding:12px;}
#printImage, #menu {float:right; width:30%; position:relative; top:0; margin:0;}
#printImage {display:block; min-height:300px; height:300px; max-height:300px;}
#menu {height:auto; max-height:39%; font-size:1.15em; line-height:1.6em; opacity:1; padding:3px;}
#menuTable {height:auto;}
#menu span {display:block; float:none; margin:0 auto; white-space:normal; word-break:break-all; max-width:none;}
#menu img {float:none; display:block; margin:0 auto; max-height:36px;}
#spacer {float:right; width:30%; height:3%;}
#showImageButton {display:none;}
}
@media only screen and (min-width:600px) and (min-height:600px) and (orientation:portrait) {
#printCont {float:none; width:100%; min-height:65%; height:65%; max-height:65%; margin-bottom:3%;}
#printImage, #menu {width:49%; margin:0; min-height:32%; height:32%; max-height:32%;}
#printImage {float:left;}
#menu {float:right;}
#menuTable {height:100%;}
#spacer {display:none;}
}
(Psst: use code tags!)
Whoops had them at the end.