@charset "UTF-8";
*{margin:0;padding:0;line-height:1;font-weight:inherit;font-style:inherit}
#spinner{background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0ibGRzLWR1YWwtcmluZyI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgbmctYXR0ci1yPSJ7e2NvbmZpZy5yYWRpdXN9fSIgbmctYXR0ci1zdHJva2Utd2lkdGg9Int7Y29uZmlnLndpZHRofX0iIG5nLWF0dHItc3Ryb2tlPSJ7e2NvbmZpZy5zdHJva2V9fSIgbmctYXR0ci1zdHJva2UtZGFzaGFycmF5PSJ7e2NvbmZpZy5kYXNoYXJyYXl9fSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiByPSIyMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiNmZmI2YmIiIHN0cm9rZS1kYXNoYXJyYXk9IjMxLjQxNTkyNjUzNTg5NzkzIDMxLjQxNTkyNjUzNTg5NzkzIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgY2FsY01vZGU9ImxpbmVhciIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwvc3ZnPg==') no-repeat center}
img{border:none}
a{text-decoration:none;transition:-webkit-filter .3s}
ul li{list-style:none}
body{font:16px 'Helvetica Neue',sans-serif;color:hsl(0,0%,30%);text-align:center;background:#fff;padding-left:0;padding-right:0;padding-bottom:0}
main{margin:0;min-height:calc(100vh - 220px)}
main p{margin:1em 0}
main > section{margin:2em auto}
main > section > h2{font-weight:500;font-size:120%;margin:10px}
strong{font-weight:600}
a:link,a:visited{color:hsl(198,70%,60%)}
a:link:hover{background:#C1EAFF}
a:not([href]){color:inherit}
a.pille{display:inline-block;color:hsl(198,70%,60%);border:2px solid hsl(198,70%,60%);border-radius:4px;letter-spacing:1px;padding:5px 10px}
a.pille:hover{color:hsl(0,0%,33%);background:transparent;border-color:hsl(0,0%,33%)}
section{margin:2em 0 3em}
section > section{margin:1em 0}
section > footer > ol,article > footer > ol,main > footer > ol{font-size:85%;margin-left:20px}
main ul li{list-style-type:circle;margin-left:1.5em}
main p,main li{line-height:1.6}
main h1,main h2,main h3,main h4{line-height:1.4}
body > header{background:linear-gradient(135deg,rgba(255,235,252,1) 0%,rgba(253,233,213,1) 100%);background:-moz-linear-gradient(-45deg,rgba(255,235,252,1) 0%,rgba(2253,233,213,1) 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(255,235,252,1)),color-stop(100%,rgba(253,233,213,1)));background:-webkit-linear-gradient(-45deg,rgba(255,235,252,1) 0%,rgba(253,233,213,1) 100%);background:-ms-linear-gradient(-45deg,rgba(255,235,252,1) 0%,rgba(253,233,213,1) 100%);border-bottom:lightgray 1px solid;padding-top:.5em;padding-bottom:.5em;font:26px/1 'Helvetica Neue',sans-serif;font-weight:200;color:hsl(0,0%,33%)}
body > header span{font:100 98% 'Helvetica Neue',sans-serif;color:hsl(0,0%,60%)}
body > header a{color:inherit!important}
body > header a:hover{background:inherit!important}
body > header::before{display:inline-block;content:'';width:48px;height:48px;background:url(appicon/48.png);background-size:48px;vertical-align:-14px}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
body > header::before{background:url(appicon/48@2x.png) no-repeat top left;background-size:48px 48px}
}
#top{max-width:680px;min-height:256px;margin:45px auto 50px;text-align:left;padding:24px 0 0 264px;box-sizing:border-box;position:relative}
#top > img:first-child{position:absolute;top:0;left:0}
#top h1{margin-top:8px;font-family:'Helvetica Neue',sans-serif;font-size:48px;font-weight:400;line-height:1}
h1 span{font:100 98% 'Helvetica Neue',sans-serif;color:hsl(0,0%,60%)}
#top p{font-size:16px;font-weight:300;letter-spacing:1px;margin:0 4px}
#dl{position:relative;margin-top:28px}
#dl .handwriting{font:18px/1 'HanziPen SC',Noteworthy,sans-serif;color:hsl(198,10%,60%);display:block;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);margin:.5em 1em 1em}
a.download{font-size:26px;padding:.3em 1em;line-height:1.2;letter-spacing:1px;color:#fff;text-indent:0;white-space:nowrap;text-shadow:0 1px 2px hsla(0,0%,0%,.2);display:inline-block;border-radius:4px;border:none!important;background:linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,0%,.05));background-color:hsl(198,70%,60%);box-shadow:0 0 0 1px hsla(0,0%,0%,.1) inset,0 1px 0 1px hsla(0,0%,100%,.1) inset,0 1px 2px hsla(0,0%,0%,.25);-webkit-transition:background .3s;transition:background .3s}
a.download:hover{background-color:hsl(198,75%,50%)}
a.downloadimg:hover{background-color:transparent}
#dl p{font-size:62%;color:hsl(198,4%,40%);margin-bottom:.4em}
#screenshots{clear:both;background-position-x:center;background-repeat:no-repeat;background-size:100% 630px;border-top:1px solid lightgray;border-bottom:1px solid lightgray;padding:20px 0 0;text-align:center;position:relative;overflow:auto}
#screenshots{background-image: -moz-linear-gradient(-45deg, #ffebfc 0%, #fde9d5 100%);background-image: -webkit-linear-gradient(-45deg, #ffebfc 0%,#fde9d5 100%);background-image: linear-gradient(135deg, #ffebfc 0%,#fde9d5 100%)}
.darkgradient:before{content: "";position: absolute;top: 0; right: 0; left: 0; bottom: 0;transition: 0.3s;opacity: 0;background-image: -moz-linear-gradient(-45deg, #342442 0%, #2c373f 99%);background-image: -webkit-linear-gradient(-45deg, #342442 0%,#2c373f 99%);background-image: linear-gradient(135deg, #342442 0%,#2c373f 100%)}
.darkgradientactive:before {opacity: 1}
#screenshots ul li{float:left;min-height:610px;list-style:none;margin-left:0}
#screenshots .dots{position:absolute;bottom:20px;left:0;right:0}
#screenshots .dots li{border:2px solid #fff;opacity:.9;cursor:pointer;color:transparent;-webkit-transition:all .5s;transition:all .5s;display:inline-block;width:10px;height:10px;border-radius:7px;margin:0 5px}
#screenshots .dots li.active{background:#fff}
#screenshots .arrow{opacity:.6;background:url(css/pfeil.svg);width:48px;height:48px;position:absolute;top:300px;z-index:2}
#screenshots .arrow:hover{opacity:1}
#screenshots .arrow.prev{left:48px}
#screenshots .arrow.next{right:48px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#highlights{max-width:800px;background:url(css/klammer.svg) no-repeat center bottom;padding-bottom:130px;margin-bottom:-1em}
#highlights section{display:inline-block;vertical-align:top;width:30%;position:relative;padding-top:100px}
#highlights section+section{margin-left:2%}
#highlights section img{width:96px;margin-left:-48px;text-align:center;position:absolute;top:0;left:50%}
#highlights section h3{font-size:120%;font-weight:500;margin:0 0 .2em}
#highlights section p{font-size:96%;line-height:1.4;margin:0}
#features{max-width:760px}
#features h2{font-size:32px;font-weight:200;letter-spacing:2px}
#features h3{margin-bottom:2em}
#features div{text-align:left;-webkit-columns:2;-moz-columns:2;columns:2;-webkit-column-gap:2em;-moz-column-gap:2em;column-gap:2em;overflow:hidden}
#features section{-webkit-column-break-inside:avoid;-moz-break-inside:avoid;break-inside:avoid;margin:0;padding-top:1px;padding-bottom:1.8em}
#features section img{width:48px;float:left;padding-top:4px}
#features section h3{font-size:110%;margin:0 0 4px}
#features section p{font-size:90%;line-height:1.6;margin:0 0 0 60px}
#features section strong{font-weight:400;color:#316D8D}
#features p > span{font-family:'Helvetica Neue',sans-serif;font-weight:500}
#features section a{color:#316D8D}
#features .handwriting{position:relative;lexft:290px;txop:-270px;font:20px/1 'HanziPen SC',Noteworthy,sans-serif;color:hsl(198,10%,60%);display:block;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);margin:.5em 1em 1em}
#details::before{content:'';display:block;max-width:680px;margin:40px auto 25px;border-bottom:1px solid hsla(0,0%,0%,.1)}
#details section{display:block;padding:30px;margin:40px auto 25px;width:70%;color:hsl(198,20%,40%);background:hsl(198,20%,96%);border:lightgray 1px solid}
#details section p{font-size:90%;text-align:left;margin:0}
#details > h2{font-size:32px;font-weight:200;letter-spacing:2px}
#details section h2{margin-bottom:15px}
#details section h3{margin-bottom:10px}
#details section div{text-align:left;vertical-align:top;-webkit-columns:2;-moz-columns:2;columns:2;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em;overflow:hidden}
#details section p{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;column-break-inside:avoid;-moz-break-inside:avoid;break-inside:avoid}
#details section ul li{margin-top:0;font-size:80%;list-style-type:disc;margin-left:1.5em}
#info{max-width:760px;text-align:left}
#info h1{font-size:32px}
#info h3::before{content:'';display:block;max-width:600px;margin:25px 0;border-bottom:1px solid hsla(0,0%,0%,.1)}
#info h4{margin-top:25px}
#info .klartext{font-weight:500}
#info p{-webkit-hyphens:auto;font-size:90%;font-weight:300;text-align:left;width:80%}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
#details section h2,#details section h3,#features section h3{font-weight:500}
#features section p,#details section p{font-size:100%}
}
@media only screen and (orientation:portrait) and (min-device-width : 320px) and (max-device-width : 568px) {
a.download,a.pille{font-size:48px}
#features section{margin-bottom:30px}
#features div{text-align:left;-webkit-columns:1;-moz-columns:1;columns:1;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em}
#features h2,#features h3{font-size:260%}
#features section h3{font-size:250%}
#features section p{font-size:230%}
#details section{font-size:220%}
#details section h3{margin-top:50px}
#details section div{-webkit-columns:1}
#highlights img{transform:scale(1.8);-webkit-transform:scale(1.8);padding-bottom:60px}
#highlights section{padding-bottom:60px;font-size:260%;width:60%}
#top{box-sizing:inherit;max-width:inherit;text-align:center;margin:0;padding:24px 0 0}
#top > img:first-child{position:relative}
#top p{font-size:240%}
#top .handwriting{font-size:160%}
#dl .handwriting{font-size:240%}
#info{font-size:240%}
#info #submit{font-size:38px}
#info h6{display:none}
}
body > footer{font-size:13px;color:hsl(198,20%,40%);background:hsl(198,20%,96%);border-top:lightgray 1px solid;padding-bottom:1em;xposition:absolute;xbottom:0;xwidth:100%}
twitter{margin:2em}
body > footer p{margin:1em;margin-bottom:4em}
dl.form label{font-size:13px}
dl.form{width:505px}
dl.form dt{width:140px;height:36px;color:#333;font-size:16px;padding:4px 0 0;font-weight:700}
dl.form dd .field{width:270px;padding:5px 10px 10px;line-height:0;font-size:14px;background-color:#eee;border:1px solid lightgray;margin-bottom:20px;margin-top:-15px}
dl.form dd .textarea{width:330px;height:110px;padding:5px 10px 10px;font-size:14px;background-color:#eee;border:1px solid lightgray}
#submit{font-size:18px;padding:.3em 1em;line-height:1.2;letter-spacing:1px;color:#fff;text-indent:0;white-space:nowrap;text-shadow:0 1px 2px hsla(0,0%,0%,.2);display:inline-block;border-radius:4px;border:none!important;background:linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,0%,.05));background-color:hsl(198,70%,60%);box-shadow:0 0 0 1px hsla(0,0%,0%,.1) inset,0 1px 0 1px hsla(0,0%,100%,.1) inset,0 1px 2px hsla(0,0%,0%,.25)}
#submit:hover{background-color:hsl(198,75%,50%);-webkit-transition:background .3s;transition:background .3s}
.error_message,.ok_message{margin:20px;width:250px;padding:15px 20px;color:#444;border:1px solid lightgray}
.error_message p,.ok_message p{font:100 98% 'Helvetica Neue',sans-serif;font-weight:500;margin:0;padding:0 0 0 30px}
.ok_message{background-color:#efffef}
.error_message{background-color:#ffefef}
.error_message p{background:url(css/icon_error.png) no-repeat 0 1px}
.ok_message p{background:url(css/icon_ok.png) no-repeat 0 1px}