@import url('https://fonts.googleapis.com/css?family=Great Vibes');
@import url('https://fonts.googleapis.com/css?family=Nova Flat');
@import url('https://fonts.googleapis.com/css?family=Cousine');
@font-face{font-family:"C64 Pro Mono";src:url("/fonts/C64_Pro_Mono-STYLE.woff2") format('woff2');src:url("/fonts/C64_Pro_Mono-STYLE.woff") format('woff');font-weight:normal;font-style:normal}
@font-face{font-family:"Topaz-8";src:url("/fonts/topaz-8.ttf")}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
body{margin:0;padding:0;border:0;line-height:133%;background-color:#181844;color:white;font-family:"Nova Flat","Verdana","Helvetica",sans-serif}
blink{animation:blink .64s steps(1) infinite}
th{text-align:left}
h1{font-size:125%;line-height:120%;text-indent:0;margin:1.5ex 0;padding:0}
h2{font-size:115%;line-height:100%;text-indent:0;margin:1ex 0;padding:0}
h3{font-size:105%;line-height:100%;}
pre{line-height:130%;font-family:"C64 Pro Mono"}
li{margin:.6ex 0}
form{margin:0 0 2ex 0;padding:1ex 1em;max-width:42em;background-color:#338;box-shadow:black 8px 8px 12px;text-align:left}
input{font-size:105%;line-height:110%;font-family:"Nova Flat","Verdana","Helvetica",sans-serif;vertical-align:top}
input[type=submit]{margin-left:1ex;padding:.25ex}
input[type=submit]:hover{color:red}
button{display:inline-block;padding:.5ex 1ex;background-color:#e8e8e8;border:none;border-radius:1ex;font-size:90%;box-shadow:#0008 .5ex .5ex 1ex}
.clear{float:none !important;clear:both}
a.selected{background-color:#bef;color:black !important}
a:link, a:visited{text-decoration:none;color:#bef}
a:hover, a:active{text-decoration:none;color:#f00}
@keyframes guru{50%{border-color:black}}
.guru{width:42em;margin-bottom:3ex;padding:1ex 1em;color:white;background-color:black;white-space:normal;font-size:100%;font-family:"Topaz-8";line-height:1.3;border:.5ex solid red;animation:guru 2s steps(1) infinite}
@keyframes shadow-pulse{0%{box-shadow:0px rgba(0, 0, 0, 0.2)}70%{box-shadow:0 0 0 4px #31c419}}
.pulse{height:2.5ex;border-radius:50%;animation:shadow-pulse .7s 3}
#burger{display:none}
#nav{position:fixed;top:0;width:200px;background-color:black;height:100%;border-right:1px solid #888;z-index:100}
#nav .logo{width:192px;height:92px;margin-top:8px}
#nav ul{margin:0;padding:0;list-style-type:none}
#nav li{height:42px;margin:2ex 0;padding:.5ex .5em;color:#bef;background-color:#338;border-top:1px solid #55b;border-bottom:1px solid #44a;text-align:left}
#nav li:hover{background-color:#118;border-top:1px solid #44f;color:#f00}
.navact{background-color:#00c;border-top:1px solid #44f;color:#f00;font-weight:bold}
#item_c64{background:url(/images/menuitem-c64.png) no-repeat right bottom}
#item_amiga{background:url(/images/menuitem-amiga.png) no-repeat right bottom}
#item_contact div{background-color:#bef;margin:1ex 0;width:160px;height:16px}
#item_contact:hover{background-color:#005;border-top:1px solid #00a;color:#bef}
#main{position:relative;margin:0 2ex 4ex 220px}
#footer{position:fixed;bottom:0;font-size:70%;line-height:120%;font-style:italic;padding:.8ex .8em;color:#888}
#disqus_thread{max-width:50em}
.icon-play{display:inline-block;margin:0;width:1em;height:11pt;background:url(/images/icon-play.svg) no-repeat center}
.icon-view{display:inline-block;margin:0;width:1em;height:11pt;background:url(/images/icon-view.svg) no-repeat center}
.icon-view:hover, .icon-play:hover{background-color:red}
form.c64-source{vertical-align:bottom}
form.c64-source a{float:right;margin-top:.3ex;padding-left:.6em;width:auto;height:16pt;font-size:14pt;line-height:16pt;background-position:left}
div.c64-source{display:inline-block;color:#98f;background-color:#43c;padding:1ex 1em;min-width:40em;min-height:25ex}
.c64-source select{margin-right:1em}
.c64-source pre{display:inline-block;margin-right:1ex !important;font-size:13pt !important;margin:0}
.c64-source.font div, .c64-source.sprites div{display:inline-block;margin-right:.5ex;min-width:1.5em;vertical-align:top;line-height:56px}
.c64-source.font table, .c64-source.sprites table{display:inline-block;margin:0 8px 8px 0;border-collapse:collapse;box-shadow:#104 2px 4px 6px}
.c64-source.font td, .c64-source.sprites td{margin:0;padding:0;width:7px;height:7px;background-color:#208;border:1px solid #40f}
.c64-source.font td.on, .c64-source.sprites td.on{background-color:#aaf}
.c64-source.koala img,.c64-source.paintmagic img{width:640px;height:400px;margin-bottom:1ex}
ul.item{margin:1ex 1em;padding:0;list-style-type:none}
.item li{display:inline-block;width:320px;margin:0 2ex 2ex 0;padding:10px;border:2px solid transparent;vertical-align:top}
.item li:hover{border:2px solid #fc0}
.item img{display:block;width:320px;margin-bottom:1ex;box-shadow:#606 4px 4px 12px}
.item img:hover{box-shadow:#929 2px 2px 14px}
.item h2{font-weight:normal;text-align:center}
.player{position:relative;display:inline-block;margin-right:2ex;vertical-align:top}
.infobox{padding:1ex 1em;max-width:42em;background-color:#338;box-shadow:black 8px 8px 12px;text-align:left}
.infobox table{margin-bottom:1ex}
.infobox td{padding:.5ex .5em .5ex 0;max-width:42em;vertical-align:top}
.infobox pre{margin:0;padding:2ex;background-color:#000;width:25em;font-family:"Cousine"}
.infobox img{max-width:400px;margin:2ex;box-shadow:#888 4px 4px 12px}
.content > h1{font-size:22pt;margin:0 0 2ex 0;padding:1ex 0;border-bottom:1px solid white}
.content > h2{font-size:18pt;margin:1ex 0;color:cyan;text-transform:uppercase}
.content_about{height:100%}
.content_amiga{}
.content_amiga .infobox{display:inline-block;vertical-align:top}
.content_c64{}
.content_c64 .diskinfo{display:inline-block;vertical-align:top}
.content_c64_all{text-align:center;padding-left:1em;background-color:black}
.content_c64_test{text-align:center;width:100%}
.content_c64_software{}
.content_c64_software form{margin-bottom:2ex;line-height:22pt}
.content_c64_software form input{font-family:inherit}
.content_c64_software .diskinfo{display:inline-block;vertical-align:top;max-width:400px}
.content_c64_software .c64-floppy{display:inline-block;vertical-align:top}
.dirbrowser{display:inline-block;vertical-align:top;margin-right:2em}
.dirbrowser th{vertical-align:top;padding:.5ex 1em;background-color:black;font-size:130%;line-height:130%}
.dirbrowser td{padding:1ex 1em;vertical-align:top;line-height:140%}
.dirbrowser th img{float:right}
.dirbrowser pre{margin:0 0 .5ex 0;padding:0;font-size:11pt;line-height:12pt}
.dirbrowser .dir{background-color:black;border:2px solid inherit;min-width:9em;white-space:nowrap}
.dirbrowser .files{background-color:black;border:2px solid inherit;min-width:19.6em;white-space:nowrap}
.dirbrowser .dir a{display:inline-block;vertical-align:top;padding:0 .4ex;width:100%}
.c64-floppy{display:block;position:relative;width:auto}
.c64-floppy:hover{background-color:#449;box-shadow:#929 2px 2px 14px}
.c64-floppy div{position:absolute;top:10px;left:200px;max-width:15em;font-size:150%;line-height:120%}
.c64-floppy span{display:block;margin:.5ex 0 0 1em}
.c64-floppy img{margin:0;box-shadow:none}
.c64-floppy img:first-child{width:128px;height:128px}
.c64-floppy img:nth-child(2){position:absolute;left:22px;top:14px;width:72px}
.c64-floppy img:nth-child(3){position:absolute;left:102px;top:94px;width:36px;opacity:.75}
.c64-floppy img:nth-child(3):hover{opacity:inherit}
.content_greetings{padding-bottom:10ex}
.content_greetings ul{margin:0;padding:0 2ex}
.content_greetings li{margin:1ex 0}
.content_greetings marquee{margin-top:-3ex;width:100%;transform:rotate(-10deg)}
.content_index article{font-size:90%;margin:3ex 0;max-width:34em}
.content_info{background-color:#444;overflow:auto;height:100%}
.content_info td{padding:.5ex .5em;vertical-align:top}
.content_info img{position:absolute;top:1ex;right:2em}
.content_quiz{}
.content_quiz form{max-width:48em;font-size:110%}
.content_quiz div{clear:both;min-height:3ex;vertical-align:middle;margin:1ex 0;border-bottom:1px solid black}
.content_quiz label{float:left;margin-right:2ex}
.content_quiz input{float:right;min-width:20em;font-size:90%;line-height:90%}
.content_quiz select{float:right;font-size:90%}
.content_quiz textarea{width:100%;height:10ex}
.content_quiz img{vertical-align:top;width:2em;padding:0 .2em}
.content_quizscores{}
.content_quizscores table{border-collapse:collapse}
.content_quizscores th, .content_quizscores td{margin:0;padding:1ex;border:1px solid #aaa}
.content_quizscores th{background-color:#225}
.content_sitemap{}
.content_sitemap div{margin-left:1em}
.content_xmas{max-width:960px;font-family:"Great Vibes"}
.content_xmas h1{text-align:center;font-size:42pt;font-weight:300;margin:0}
.content_xmas h2{text-align:center;text-transform:inherit;color:white;font-size:36pt;font-weight:200;margin:1ex}
.c1702-big{position:relative;margin-bottom:2ex}
.c1702-big > div{background:url(/images/1702-960x910.png) no-repeat top center;width:960px;height:910px;pointer-events:none;z-index:1;opacity:.9999}
#vicescreen{position:absolute;left:88px;top:105px;width:768px;height:544px;z-index:0}
.amiga{position:relative;margin-bottom:2ex}
.amiga > div:nth-child(2){background:url(/images/a1000-monitor-940x880.png) no-repeat top center;width:940px;height:880px;pointer-events:none;z-index:1;opacity:.9999}
#amigascreen{position:absolute;left:106px;top:102px;width:720px;height:568px;background-color:black}
#amiga_led_power{position:absolute;left:845px;top:781px;width:41px;height:8px;border-radius:2px;transform:rotate(-2.5deg);background-color:gray}
#amiga_led_power.on{background-color:#d44 !important}
#amiga_led_floppy_0{position:absolute;left:172px;top:58px;width:9px;height:3px;border-radius:2px;background-color:#444}
#amiga_led_floppy_0.on{background-color:#c22 !important}
#amiga_button_power{position:absolute;left:806px;top:800px;width:78px;height:36px;cursor:pointer;z-index:2}
.controls{display:flex;justify-content:space-between;margin-bottom:2ex;padding:1ex 1em;background-color:#444;border-radius:10px;box-shadow:#000 4px 4px 12px}
.button{position:relative;width:4em;height:6ex;margin:2ex 1em;background:#998f7f;border-radius:50% / 10%;color:#FFFFFF;box-shadow:#222 4px 4px 8px;transition:all 150ms ease-out}
.button:before{background:inherit;border-radius:5% / 50%;bottom:9%;content:"";left:-5%;position:absolute;right:-5%;top:9%}
.button:hover{background:#bbb0a2;box-shadow:#222 1px 1px 8px;margin:2.2ex .8em 1.8ex 1.2em}
.button_pause{position:absolute;left:1em;top:.7em;width:2em;height:2em;background:url(/images/button_pause.svg) no-repeat}
.button_play{position:absolute;left:1.1em;top:.7em;width:2em;height:2em;background:url(/images/button_play.svg) no-repeat center}
.button_sound_on{position:absolute;left:.5em;top:.5em;width:3em;height:2em;background:url(/images/button_speaker.svg) no-repeat center}
.button_sound_off{position:absolute;left:.5em;top:.5em;width:3em;height:2em;background:url(/images/button_speaker_disabled.svg) no-repeat center}
.joystick{width:200px;min-height:88px;padding:1em 0 0 80px;background:url(/images/joystick-64x88.png) no-repeat center left}
#amiga_button_pause{}
#amiga_button_sound{}
#a1010{position:relative;margin-top:1ex;width:200px;height:80px;background:url(/images/a1010-floppy-200x80.png) no-repeat;border-radius:10px;box-shadow:#222 4px 4px 12px;opacity:.8}
section[class=news]{float:left;margin-bottom:3ex;padding:1ex 1em;background-color:#338;box-shadow:black 8px 8px 12px;text-align:left}
article{position:relative;margin:2ex 0 5ex 0;border-bottom:1px solid #778;max-width:50em}
article h3{padding-right:6em;line-height:133%}
article h3 time{position:absolute;top:0;right:0;color:#999;font-size:small}
.c1702{display:inline-block;float:left;background:url(/images/1702-small.jpg) no-repeat top center;width:486px;height:434px;margin:0 2em 3ex 0;padding-top:46px;position:relative}
.c1702 .logo{padding:30px 0;width:304px;height:146px}
#c64screen{position:absolute;left:51px;top:40px;width:384px;height:284px;text-align:center}
#scrollcontainer{position:absolute;left:0px;top:194px;width:100%;height:64px;overflow:hidden}
#scrollcontainer div{position:absolute;overflow:hidden;background-image:url(/images/bg.png)}
#scrollcontainer img{position:absolute;margin:0;padding:0;background-image:url(/images/bg.png)}
.button_speaker{margin:1ex auto;width:3em;height:2.5em;background:url(/images/button_speaker.svg) no-repeat center;background-size:2em;background-color:#338;border-radius:.5em}
.button_speaker_off{margin:1ex auto;width:3em;height:2.5em;background:url(/images/button_speaker_disabled.svg) no-repeat center;background-size:2em;background-color:#338;border-radius:.5em}
@media screen and (max-width:1200px){
#burger{position:fixed;display:block;top:0;width:100%;line-height:36px;padding:1ex 1em;background-color:black;box-shadow:black 0 .5ex 1ex;z-index:101}
#burger:before{font-size:180%;content:"☰ "}
#burger:after{font-size:90%;position:absolute;top:2ex;right:5ex;color:#ccc;content:"reaching out to you ..."}
#burger .logo{position:absolute;top:0;width:99%;height:100%;background:url(/images/sca-logo-200.png) no-repeat 2.5em center;background-size:auto 36px}
#nav{display:none;top:52px}
#nav .logo{display:none}
#main{margin:56px 1ex 1ex 1ex}
.content > h1{font-size:16pt}
.content > h2{font-size:14pt}
.content_quiz div{padding-bottom:1ex}
.content_quiz label{display:block;float:none;margin-right:0}
.content_quiz input{display:block;float:none;width:95%;font-size:80%}
.content_quiz select{display:block;float:none;font-size:80%;max-width:95%}
.content_xmas h1{font-size:24pt}
.content_xmas h2{font-size:20pt}
.c1702-big > div{display:none}
#vicescreen{position:relative;left:0;top:0;width:100%;height:auto;margin-bottom:2ex;box-shadow:black 1ex 1ex 1ex}
.amiga > div:nth-child(2), .amiga > div:nth-child(3){display:none}
#amigascreen{position:relative;left:0;top:0;margin-bottom:2ex;box-shadow:black 1ex 1ex 1ex}
.controls{position:relative;left:0;top:0}
#disqus_thread{max-width:100%}
}
@media screen and (max-width:720px){
#amigascreen{position:relative;left:6px;top:-32px;transform:scale(.5);transform-origin:top left;margin-bottom:2ex;box-shadow:black 1ex 1ex 1ex}
.c1702{transform:scale(.75);transform-origin:top left}
.controls{position:relative;left:0;top:-310px;margin-bottom:-320px;transform:scale(.5);transform-origin:top left}
.dirbrowser th{display:block}
.dirbrowser td{display:block;line-height:170%}
.dirbrowser pre{margin-bottom:1.5ex}
}
.content_amiga_textconverter form, .content_amiga_textconverter .infobox{max-width:48em}
.content_amiga_textconverter form div{display:flex;justify-content:space-between;align-content:flex-start}
.content_amiga_textconverter select{margin:1ex 0}
.content_amiga_textconverter button{position:relative;min-height:4.5ex;margin:2ex 0;padding-left:3em;color:white;background-color:#5a4}
.content_amiga_textconverter button img{position:absolute;left:.8em;top:.8ex;width:3ex;height:3ex}
.FTXT{margin:0 1ex 5ex 0}
.FTXT b{letter-spacing:-.75pt}
#mmm_container{border:1px solid green}
#mmm_nav{float:left;width:auto;margin-right:3em}
#mmm_editor{float:left;width:auto;max-height:700px;overflow-y:scroll}
