@font-face {  font-family:'Perfect'; src:url('../fonts/Perfect.eot'); src:local('?'), url('../fonts/Perfect.woff') format('woff'), url('../fonts/Perfect.ttf') format('truetype'), url('../images/Perfect.svg') format('svg'); font-weight:normal; font-style:normal}
*{margin:0;padding:0}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
img{max-width:100%}
pre {font-family:Consolas,monospace;font-size:0.6em}
html,body{padding:0}
#ppp a {color:#FFF;text-decoration:underline}
h1{font-size:1.5em}
h1, p{margin-bottom:10px}
h2 {font-size:1.3em;text-align:center;margin:12px 0 10px}
.limitedHeight h2 {text-align:left;margin:10px 0 4px}
h3{font-size:1.1em}
h4{font-size:1.1em}
.br{background:#FFF;color:#000}
#downCounter{font-size:2em;text-align:center;padding:5px;animation:fadeOpacity2 1s infinite}
@keyframes fadeOpacity2{
0%{ opacity:1}
59%{opacity:1}
70%{opacity:0.8}
95%{opacity:0.8}
100%{   opacity:1}
}
.b0,.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9,.ba,.bb,.bc,.bd{animation:fadeOpacity 2.5s infinite}
@keyframes fadeOpacity{
0%{ opacity:0.3}
59%{opacity:0.3}
70%{opacity:1}
95%{opacity:1}
100%{   opacity:0.3}
}
.b0{animation-delay:0.1s}
.b1{animation-delay:0.2s}
.b2{animation-delay:0.3s}
.b3{animation-delay:0.4s}
.b4{animation-delay:0.5s}
.b5{animation-delay:0.6s}
.b6{animation-delay:0.7s}
.b7{animation-delay:0.8s}
.b8{animation-delay:0.9s}
.b9{animation-delay:1s}
.ba{animation-delay:1.1s}
.bb{animation-delay:1.2s}
.bc{animation-delay:1.3s}
.bd{animation-delay:1.4s}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a,a:visited,a:link{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#FFF}
ins{text-decoration:none}
mark{font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
.centered {text-align:center}
.inlineblock {display:inline-block}
 .lefttext {text-align:left}
.arial{font-family:Arial, Helvetica, sans-serif}
.cr{font-family:"Courier New", Courier, monospace}
.strong {font-weight:bold}
body {font-family:'Perfect';line-height:1;background:#000;color:#FFF;user-select:none;font-size:20px}
.gridecske.sizeSmall { width:280px}
.gridecske { width:500px}
.gridecske.sizeBig { width:1000px}
.gridecske {padding-top:5px;font-weight:bold}
.grid {opacity:0.01;padding:10px 20px;margin:0 auto}
/* width */::-webkit-scrollbar {  width:10px}
/* Track */::-webkit-scrollbar-track {  background:#555}
 /* Handle */::-webkit-scrollbar-thumb {  background:#DDD}
/* Handle on hover */::-webkit-scrollbar-thumb:hover {  background:#FFF}
#window0, #task0 {display:none !important}
#screen {height:100vh;position:relative;overflow:hidden}
.grid div {border-radius:3px}
.ablak {border:1px solid #FFF;position:relative;margin:8px;padding:3px 4px;background:#222}
.ablakinner {border:1px solid #FFF;padding:5px;position:relative;overflow:hidden;background:#000}
.windowHeader {position:relative;min-height:25px;padding-left:10px}
.windowHeader > div {position:absolute;cursor:pointer;width:24px;font-size:0.8em;top:0px;font-family:Arial, Helvetica, sans-serif;padding:5px 5px 0px;text-align:center;line-height:18px}
.windowHeader > div:hover {background:#000}
.windowHeader > div.close {right:10px;padding-top:2px;font-size:1em}
.increase {right:43px}
.up {right:80px}
.gridecske:nth-child(2) .up {display:none}
.active .ablak {background:#DDD}
.active .windowHeader {color:#000}
.active .windowHeader > div:hover {background:#FFF}
#startmenu {height:35px;background:#222;position:absolute;z-index:777;bottom:0;left:0;padding:10px 5px 5px 20px;right:0;font-size:1.1em;border-top:1px solid #FFF}
#start {display:inline-block;padding:0px 5px;cursor:pointer;vertical-align:top;position:relative}
#startToggle {padding:4px 15px;border-radius:5px}
#startPanel {border:2px solid #FFF;position:absolute;bottom:35px;border-bottom:none;width:430px;background:#aaa;color:#000;border-radius:5px 5px 0 0;padding:15px 10px 5px;font-size:18px;box-shadow:0px -10px 0px 10px #000}
#compilerke {width:100%;height:300px}
span.setting, .button, a.button {cursor:pointer;color:#FFF;text-decoration:none;display:inline-block;margin-right:2px;background:rgba(0,0,0,0.5);padding:0 7px;border-radius:3px;margin:0px 2px 10px 0}
a.button.green{background:#006d00}
a.button.green:hover{background:green}
span.setting.active {box-shadow:0px 0px 0px 2px #FFF}
span.setting:hover, .button:hover {background:rgb(0,0,0)}
#startToggle span {display:inline-block;margin-right:10px;background:#000}
#startToggle:hover span {background:#FFF;color:#000}
#taskbar {display:inline-block;max-height:45px;overflow-x:auto;vertical-align:top;position:absolute;overflow-y:hidden;right:5px;left:170px}
#taskbar > div {display:inline-block;font-size:0.8em;padding:0 5px;border:1px solid #fff;background:#000;margin-right:8px;margin-bottom:20px;cursor:pointer;border-radius:3px;line-height:26px}
#taskbar > div.minimized {background:#555}
#taskbar > div:hover {border-color:#000}
#closeStart {position:absolute;top:0px;right:0px;display:inline-block;cursor:pointer;font-size:1.5em;padding:3px 8px;opacity:0.8}
#closeStart:hover {opacity:1}
#startPanel a, span#fullScreen {padding:5px 20px;margin:10px 5px;display:inline-block}
.transparent {opacity:0}
.wraptextfancy {overflow:hidden;display:block;margin-bottom:5px;position:relative;text-align:center;white-space:nowrap}
.textfancy {margin-left:-100%;margin-right:-100%;text-align:center;font-size:0.8em}
.sizeSmall .textfancy {font-size:0.6em}
.sizeBig .textfancys {font-size:1em}
.csontSor {position:relative}
ol { list-style:disc;margin:0 0 0 25px}
li {margin-bottom:10px}
.limitedHeight strong{text-decoration:underline}
.randomProgressbar {display:inline-block;width:60px;overflow:hidden;border:2px solid #FFF}
.randomProgressbar > span {display:block;width:30%;overflow:hidden}
table.bordered {width:100%}
.bordered td {border:2px solid #FFF;text-align:center;padding:1px 5px}
.bordered td:nth-child(1), .bordered tr:nth-child(1) {background:rgba(255, 255, 255, 0.2)}
.wrapScripts {border:2px solid #FFF;text-align:center;padding:2px;overflow:hidden}
.textOnGraph {position:absolute;top:2px;right:2px;background:rgba(255,255,255,0.7);color:#000;min-width:95px;padding:2px 0px;text-align:center}
#graphClock {top:auto;bottom:2px;min-width:104px}
#graphDir {top:auto;bottom:2px;right:auto;left:2px;text-align:right;min-width:85px}
.progressBar {border:2px solid #FFF;margin:2px auto 10px;background:#222;max-width:500px;width:90%;overflow:hidden}
.progress {display:block;position:relative;width:5%;font-size:1.2em;overflow:hidden}
.progressnr {position:absolute;right:3px;top:0;color:#000000}
.progressfill {display:inline-block}
/* ############### Typer Begin ################ */#typeHere {max-width:100%}
#typer {height:350px;overflow-x:hidden;width:100%;overflow-y:auto;padding-bottom:20px}
.limitedHeight {height:350px;overflow-y:auto;padding:10px}
.tabocska {display:inline-block;width:25px}
.active #cursor {animation:blinkBackgr 1.2s infinite;display:inline-block;min-width:10px;min-height:5px}
@keyframes blinkBackgr{0%{ background:#FFF}
49%{background:#FFF}
60%{background:transparent}
99%{background:transparent}
100%{   background:#FFF}
}
.blinking {animation:blinkOpacity 1.2s infinite}
@keyframes blinkOpacity{0%{ opacity:1}
59%{opacity:1}
70%{opacity:0}
95%{opacity:0}
100%{   opacity:1}
}

/* Popup box BEGIN */
#ppp{
    background:transparent;	display:none;
    cursor:pointer;
    position:fixed;
    text-align:center;
    top:0;
    bottom:0;
	left:0;
	right:0;
    z-index:10000;
}
#ppp .close, #ppp .up, #ppp .increase {display:none;}
#ppp .ablak {margin:0;}
#ppp > div {
    background-color:#000;
    border:1px solid #FFF;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
    position:relative;
    padding:0;
    top:200px;
    box-shadow:0px 0px 35px 40px #000;	max-width:500px;
	width:80%;
}
#pppContent {

}
#pppClose {
    cursor:pointer;
    display:inline-block;
    font-family:arial;
    font-weight:bold;
    position:absolute;
    top:0px;
    right:0;
    font-size:1.6em;
    width:39px;
    text-align:center;
}
#pppClose:hover {
    background-color:#000;
	color:#FFF;
}
/* Popup box BEGIN */
#mtrxRain {/*height:400px;*/width:100%;overflow:hidden;line-height:0.85em;letter-spacing:9px}
.opacity0{opacity:0}
.opacity1{opacity:0.1}
.opacity2{opacity:0.2}
.opacity3{opacity:0.3}
.opacity4{opacity:0.4}
.opacity5{opacity:0.5}
.opacity6{opacity:0.6}
.opacity7{opacity:0.75}
.opacity8{opacity:0.9}
.opacity9{opacity:1}
/* ############### Typer End ################ */.cssProgressBar {display:inline-block;border:2px solid #FFF;width:100px;position:relative;margin-left:20px;vertical-align:middle}
.cssProgressBar > div{background:#FFF;height:16px;border-radius:0}
.cssProgressBar > span {color:#000;position:absolute;left:0;right:0;text-align:center;top:-2px}
.fill300 > div {animation:fillProgressbar 0.3s infinite}
.fill600 > div {animation:fillProgressbar 0.6s infinite}
.fill900 > div {animation:fillProgressbar 0.9s infinite}
.fill1200 > div {animation:fillProgressbar 1.2s infinite}
.fill1500 > div {animation:fillProgressbar 1.5s infinite}
.fill1800 > div {animation:fillProgressbar 1.8s infinite}
.fill2100 > div {animation:fillProgressbar 2.1s infinite}
.fill2400 > div {animation:fillProgressbar 2.4s infinite}
.fill2700 > div {animation:fillProgressbar 2.7s infinite}
.fill3000 > div {animation:fillProgressbar 3s infinite}
.fill3300 > div {animation:fillProgressbar 3s infinite}
@keyframes fillProgressbar{0%{ width:1%}
100%{   width:100%}
}
#wrapRunningCode, #wrapRunningDirectory {width:100%;overflow:hidden}
#runningCode, #runningDirectory {width:1000px}
.codecolor1 {color:#fff}
.codecolor2 {color:#cecece}
.codecolor3 {color:#cecece}
.codecolor4 {color:#cecece}
.codecolor5 {color:#cecece}
.codecolor6 {color:#cecece}
.codecolor7 {color:#777}

body.dos {background:#00f}
.dos .codecolor1 {color:#ff0}
.dos .codecolor2 {color:#cecece}
.dos .codecolor3 {color:#07b3b3}
.dos .codecolor4 {color:#25f}
.dos .codecolor5 {color:#ff3}
.dos .codecolor6 {color:#459}
.dos .codecolor7 {color:#92a}
.dos .br {background:#FF0000}
.dos .cr {color:#FF0000}
.dos .cg {color:#00CC00}
.dos .cw {color:#FFFFFF}
.dos .cy {color:yellow}
.dos .textOnGraph, .dos .bordered td:nth-child(1), .dos .bordered tr:nth-child(1) {background:rgba(0, 128, 128, 0.5);color:#ff0}
.dos .randomProgressbar > span {color:yellow}
.dos .randomProgressbar {border-color:#004040;background:#004040}
.dos .ablak {background:#C0C0C0}
.dos .windowHeader > div {color:#000}
.dos .windowHeader > div:hover {background:#FFF}
.dos .windowHeader > div.close {color:#800000}
.dos #startPanel {background:#008080;color:#fff}
.dos span.setting, .dos .button, .dos a.button {background:rgba(255,255,255,0.5);color:#000}
.dos span.setting:hover, .dos .button:hover, .dos a.button:hover {background:rgba(255,255,255,0.9)}
.dos span.setting.active {box-shadow:0px 0px 0px 2px #008000;background:#008000;color:#FFF}
.dos a, .dos a:visited, .dos a:link {color:#800000}
.dos .active .ablak {background:#008080}
.dos .active .windowHeader, .dos .active .windowHeader > div {color:#FFFF00}
.dos .active .windowHeader > div:hover {background:#000}
.dos #closeStart {background:#800000;color:#FFF;border-radius:3px;opacity:1}
.dos #startmenu {background:#C0C0C0}
.dos #startToggle {color:#ff0;background:#008080}
.dos #startToggle span {background:#800000}
.dos #startToggle:hover span {color:#00f;background:#ff0}
.dos #taskbar > div {background:#008080;border-color:#008080}
.dos #taskbar > div.minimized {background:#555;border-color:#555}
.dos .progressBar, .dos .cssProgressBar {background:#004040;color:yellow}
.dos .cssProgressBar span {color:#004040}
.dos .cssProgressBar > div {background:yellow}
.dos .progressnr {color:#000}
body.pascal {background:#008080}
.pascal #ppp > div {box-shadow:0px 0px 0px 20px #0000ff;}
.pascal .br {background:#ecf900;color:blue}
.pascal .cr {color:#ecf900}
.pascal .cg {color:#ecf900}
.pascal .cw {color:#FFF}
.pascal .cy {color:#ecf900}
.pascal .progressBar, .pascal .cssProgressBar {background:#008000;color:yellow}
.pascal .cssProgressBar span {color:#008000}
.pascal .cssProgressBar > div {background:yellow}
.pascal .progressnr {color:#00f}
.pascal .textOnGraph, .pascal .bordered td:nth-child(1), .pascal .bordered tr:nth-child(1) {color:yellow;background:rgba(0, 0, 255, 0.5)}
.pascal .randomProgressbar > span {color:yellow}
.pascal .randomProgressbar {border-color:green;background:green}
.pascal .ablak {background:#C0C0C0;color:#555}
.pascal .windowHeader > div {color:#000}
.pascal .ablakinner {background:#00f;color:#FFF}
.pascal .windowHeader > div:hover {background:#FFF}
.pascal .windowHeader > div.close {color:#800000}
.pascal #startPanel {background:#c0c0c0;color:#000}
.pascal span.setting, .pascal .button, .pascal a.button {background:rgba(255,255,255,0.5);color:#000}
.pascal span.setting:hover, .pascal .button:hover, .pascal a.button:hover {background:rgba(255,255,255,0.9)}
.pascal span.setting.active {box-shadow:0px 0px 0px 2px #008000;background:#008000;color:#FFF}
.pascal a, .pascal a:visited, .pascal a:link {color:#800000}
.pascal .active .ablak {background:#ffffff}
.pascal .active .windowHeader, .pascal .active .windowHeader > div {color:#000000}
.pascal .active .windowHeader > div:hover {background:#008080;color:#FFF}
.pascal #closeStart {background:#800000;color:#FFF;border-radius:3px;opacity:1}
.pascal #startToggle {color:#ff0;background:#0000ff}
.pascal #startToggle {color:#ff0;background:#008080}
.pascal #startToggle span {background:#800000}
.pascal #startToggle:hover span {color:#00f;background:#ff0}
.pascal #taskbar > div {background:#008080;border-color:#008080}
.pascal #taskbar > div.minimized {background:#555;border-color:#555}

body.green, .green a, .green a:visited, .green a:link, .green #startPanel, .green span.setting, .green .button, .green a.button, .green .textOnGraph, .green .codecolor1, .green .codecolor2, .green .codecolor3, .green .codecolor4, .green .codecolor5, .green .codecolor6, .green .codecolor7, .green #pppClose:hover, .green #ppp a {color:#0f0}
/* Track */.green ::-webkit-scrollbar-track {  background:#173120}
 /* Handle */.green ::-webkit-scrollbar-thumb {  background:#0c0}
/* Handle on hover */.green ::-webkit-scrollbar-thumb:hover {  background:#0f0}
.green .ablak, .green .ablakinner, .green #startPanel, .green #taskbar > div, .green #startmenu, .green .bordered td, .green .bordered, .green .randomProgressbar, .green .wrapScripts, .green .progressBar, .green .cssProgressBar, .green #ppp > div {border-color:#0f0}
.green .cssProgressBar > div, .green .br {background:#0f0}
.green .progressBar {background:#000}
.green .ablak, .green #startPanel, .green #startmenu, .green #taskbar > div.minimized {background:#173120}
.green .textOnGraph {background:rgba(0,0,0,0.5)}
.green .bordered td:nth-child(1), .green .bordered tr:nth-child(1) {color:#0f0;background:#173120}
.green .active .ablak {background:#0f0}
.green span.setting.active {box-shadow:0px 0px 0px 2px #0f0}
.green .active #cursor {animation:blinkGreenBackgr 1.2s infinite;display:inline-block;min-width:10px;min-height:5px}
@keyframes blinkGreenBackgr{0%{ background:#0F0}
49%{background:#0F0}
60%{background:transparent}
99%{background:transparent}
100%{   background:#0F0}
}


@media screen and (max-width:1050px) {body {font-size:18px}
#startPanel{width:250px}
.mobileHidden {display:none !important}
span.setting, .button, a.button {padding:0 4px;margin:0px 2px 5px 0}
.row{margin-bottom:10px;text-align:center}
.row strong {float:left}
#closeStart {right:auto;left:0}
}
@media screen and (max-width:850px) {body {font-size:17px}
}
@media screen and (max-height:900px) {#typer, .limitedHeight {height:300px}
}
@media screen and (max-height:750px) {#typer, .limitedHeight {height:250px}
}
@media screen and (max-height:500px) {#typer, .limitedHeight {height:200px}
}