@font-face{font-family:BlackwoodCastle;src:url(BlackwoodCastleShadow.ttf)}
@font-face{font-family:Aladin-Regular;src:url(Aladin-Regular.ttf)}
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}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
a.button{display:inline-block;text-decoration:none;background:#188518;color:#FFF !important;font-size:1.1em;line-height:1.4em;padding:2px 20px;border-radius:10px;margin:40px 5px 50px;font-weight:bold}
a.button:hover{background:#d35454}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
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}
strong{font-weight:bold}
img{max-width:100%}
body{padding:0;font-family:arial;font-size:40px;line-height:50px;background:#FFF}
a,a:link,a:visited{color:#2727fd}
a:hover{color:#fe76e0}
.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
article{font-family:Aladin-Regular;width:80%;max-width:1055px;font-size:20px;padding:100px 0;line-height:30px;text-align:center;margin:auto;padding:0}
#card9{box-shadow:2px 2px 30px #777;padding:20px 0 50px;background:url(paperback.jpg) repeat transparent}
footer{text-align:left;padding:10px 30px 40px;font-size:17px;background:#FFF;line-height:29px}
article h1,article h2,article h3,article h4{font-family:BlackwoodCastle;letter-spacing:0.2em;margin:20px 0 15px;font-size:1.7em;clear:both;line-height:1em;padding-top:20px}
article h2{font-size:3em;margin:35px 0 40px}
article p{letter-spacing:0.1em;margin-bottom:20px}
.floatRight{float:right;margin:0 0 5px 30px;max-width:40%}
.alignCenter{text-align:center}
#mobileHeader{text-align:center;padding:5px;display:none}
#mobileHeader a.textLogo{display:inline-block;float:none;vertical-align:middle;font-weight:bold;font-size:40px;line-height:37px}
#mobileLogo{display:inline-block;vertical-align:middle}
#mobileLogo img{width:150px}
.bigger{font-size:1.7em;color:#333}
input#colorPicker{width:90px;border:none;height:40px;outline:none;border-radius:10px}
.inline{display:inline-block}
header{display:block;background:white}
#menutrigger{cursor:pointer;margin:0px;font-family:arial;font-size:40px;position:fixed;top:0;color:#567;left:10px;z-index:10;line-height:40px}
#menuTrigger:hover{background:red}
#headHeight{min-height:180px}
.textLogo{display:none}
.stick a.textLogo{display:inline-block}
a.textLogo{float:right;font-size:20px;line-height:16px;text-decoration:none}
ul#menu{text-align:center}
ul#menu li{display:inline-block;padding-top:20px}
ul#menu li a{display:inline-block;color:#567;text-decoration:none;font-size:24px;border-radius:10px;padding:20px 12px;transition:transform 0.2s}
ul#menu li a:hover{color:#FFF;background:#567;transform:rotate(-15deg)}
#navigation{padding:10px 10px 10px 130px;position:relative;text-align:left;font-weight:bold;font-family:"Arial Black",Gadget,sans-serif}
#logo{margin:10px 20px;float:right}
#logo img{width:150px;transition:transform 1.2s}
.stick a#logo{display:none}
.stick #navigation{padding-top:5px;position:fixed;top:0;left:0;background:#FFF;right:0;box-shadow:2px 2px 10px #999;z-index:9}
.stick{line-height:20px}
.stick ul#menu li a{font-size:16px;padding-top:2px;padding-bottom:2px}
.stick ul#menu li.active span{background:#556677}
#menu li span{display:block;width:100%;height:5px}
.stick ul#menu li{padding:0}
a.backTop{position:absolute;text-decoration:none;background:#9d9d9d;color:#FFF;padding-top:10px;border-radius:5px;min-width:42px;right:0px;bottom:0;text-align:center}
a.backTop i{padding:9px;border-color:#FFF !important}
.wrapBackTop{clear:both;position:relative;font-size:30px;line-height:40px;min-height:50px}
a.backTop:hover{background:#188518}
.navigation{display:none}
h1{font-size:1.6em;line-height:1em}
article h1{margin:0 0 20px 0}
h2{margin:20px 0 10px;font-size:1.8em}
h3{margin:20px 0 5px;font-size:1.5em}
.clearboth{clear:both}
.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
.textarea{font-family:monospace}
#tiles{text-align:center;font-family:"Arial Black",Gadget,sans-serif;font-weight:bold;background:#FFF;padding:10px 30px 20px;perspective:100px}
.wrap{display:block;padding:20px;vertical-align:middle;perspective:100px}
.card{text-align:left;position:relative;display:inline-block;min-height:300px;margin:40px;background:#FFF}
.code,.rendered,.tale{position:relative;transition:transform 0.24s;border-radius:20px;transform-style:preserve-3d;background:#FFF;border:2px solid #CCC;box-shadow:5px 5px 50px #999}
.flip .code,.flip .rendered,.flip .tale{transform:rotateY(90deg)}
.flip .bottomButtons span,.flip .bottomButtons a,.flip .prev,.next{display:none}
.invflip .code,.invflip .rendered,.invflip .tale{transform:rotateY(-90deg)}
#card0{font-size:1.5em;line-height:1em}
.tale,.rendered{font-size:27px;line-height:35px}
.card > div{padding:50px 100px}
.bottomButtons{position:absolute;font-family:Arial;top:-25px;left:12px;font-size:16px;line-height:19px;padding:0 !important}
.bottomButtons span,.bottomButtons a{background:#FFF;color:#777;display:inline-block;padding:2px 10px;text-decoration:none;border-radius:8px 8px 0 0;position:relative;margin:0;cursor:pointer;border:2px solid #CCC;box-shadow:-1px -1px 2px #ccc inset;font-weight:bold}
.bottomButtons span.active{background:#FFF;color:#333;top:2px;box-shadow:-1px -5px 4px #ccc;border-bottom:none}
.bottomButtons span,.bottomButtons a,.prev,.next{opacity:0}
.prev,.next{transition:all 0.3s ease-out}
.bottomButtons span:nth-child(1),.bottomButtons a:nth-child(1){transition:all 0.9s ease}
.bottomButtons span:nth-child(2),.bottomButtons a:nth-child(2){transition:all 0.7s ease}
.bottomButtons span:nth-child(3),.bottomButtons a:nth-child(3){transition:all 0.4s ease}
.bottomButtons span:nth-child(4),.bottomButtons a:nth-child(4){transition:all 0.1s ease}
.card:hover .bottomButtons span,.card:hover .prev,.card:hover .next,.card:hover .bottomButtons a{opacity:1}
a.prev,a.next{position:absolute;font-size:60px;padding:5px;display:inline-block;cursor:pointer;color:#5891cb;right:-45px;text-decoration:none}
a.prev:hover,a.next:hover{opacity:1 !important;color:#333}
.bottomButtons span:hover,.bottomButtons a:hover{opacity:1 !important;color:#333;box-shadow:-1px -5px 4px #ccc}
.prev{top:10px}
.next{bottom:10px}
#card0 .prev,#card8 .next{display:none}
.demoTable td:nth-child(1){padding-right:50px}
.code{display:inline-block}
.storyShow .tale,.renderShow .rendered{display:inline-block}
.rendered,.tale{display:none}
.renderShow .code,.storyShow .code{display:none}
.blue{color:#4545f5}
.pink{color:#ff76e1}
.green{color:#188518}
.orange{color:#dd9d28}
.grey{color:#9d9d9d}
.red{color:#d35454}
.tale > span{color:#FFF;display:inline-block;padding:0 5px;border-radius:5px}
.tale .blue{background:#4545f5}
.tale .pink{background:#ff76e1}
.tale .green{background:#188518}
.tale .orange{background:#dd9d28}
.tale .grey{background:#9d9d9d}
.tale .red{background:#d35454}
#menu li:nth-child(4n) a:hover{background:#4545f5}
#menu li:nth-child(4n+1) a:hover{background:#188518}
#menu li:nth-child(4n+2) a:hover{background:#dd9d28}
#menu li:nth-child(4n+3) a:hover{background:#d35454}
.rendered h1{font-size:50px;padding-top:40px;line-height:55px}
#card1 .rendered,#card2 .rendered{text-align:center}
.rendered ol{display:inline-block;margin:30px auto 10px;text-align:left}
.arrowdown,.arrowup{display:inline-block;padding:12px;border-right:5px solid #777;border-bottom:5px solid #777}
a:hover .arrowdown,a:hover .arrowup{border-color:#188518}
.arrowup{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.arrowdown{transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.rendered img{margin-top:20px}
.rendered table{margin:100px auto 10px;border:2px dashed #888}
.rendered table td{padding:5px 10px;border:2px dashed #888}
.rendered p{padding-top:100px;text-align:center}
#card5 .showRendered,#card5 .edit,#card8 .showRendered,#card8 .edit{display:none}
#card6 .rendered div{font-size:1em;text-align:center;padding-top:100px}
.rendered input{border:2px solid #443;font-size:1em;border-radius:5px}
@media screen and (max-width:1300px){ul#menu li a{font-size:20px;border-radius:10px;padding:10px 10px}
#logo img{display:none}
#mobileHeader{display:block}
ul#menu li{padding-top:20px}
#headHeight{min-height:107px}
}
@media screen and (max-width:1080px){ul#menu li a{font-size:17px;border-radius:7px;padding:1px 10px}
ul#menu li{padding-top:0}
#logo{display:none}
.textLogo{display:inline-block}
#navigation{line-height:20px;padding-left:50px}
#headHeight{min-height:54px}
}
@media screen and (max-width:900px){ul#menu li a{font-size:16px;border-radius:5px;padding:1px 6px}
}
@media screen and (max-width:780px){#navigation{padding-top:5px;position:fixed;top:0;left:0;background:#FFF;right:0;box-shadow:2px 2px 10px #999;z-index:9}
article h2{font-size:2em;margin:20px 0 35px}
a.textLogo{display:none !important}
#mobileHeader a.textLogo{display:inline-block !important}
}
@media screen and (max-width:650px){#navigation{display:none}
ul#menu{text-align:right}
#navigation{line-height:17px;padding-left:40px}
}
@media screen and (min-width:1300px){body{font-size:45px;line-height:55px}
.tale,.rendered{font-size:35px;line-height:45px}
.wrap{padding:40px 20px}
.rendered h1{font-size:65px;line-height:75px}
.code{line-height:1.2em}
}
@media screen and (min-width:1400px){body{font-size:50px;line-height:60px}
}
@media screen and (max-width:1200px){body{font-size:35px;line-height:45px}
.tale{font-size:25px;line-height:30px}
.card > div{padding:50px 60px}
.card{margin:20px}
}
@media screen and (max-width:999px){body{font-size:30px;line-height:40px}
.tale{font-size:20px;line-height:28px}
.rendered img{margin-top:0}
.rendered table{margin:70px auto 0px}
.rendered p,#card6 .rendered div{padding-top:50px}
.card{min-height:50px}
}
@media screen and (max-width:900px){body{font-size:25px;line-height:35px}
.card > div{padding:40px 50px}
.wrap{padding:5px}
.rendered h1{font-size:36px;padding-top:5px;line-height:45px}
.bottomButtons{font-size:16px;line-height:17px;top:-23px}
.bottomButtons span,.bottomButtons a{padding:2px 6px}
.tale{font-size:17px;line-height:24px}
}
@media screen and (max-width:750px){body{font-size:20px;line-height:28px}
.tale{font-size:16px;line-height:19px}
.rendered ol{margin:14px auto 5px}
.code{line-height:1.4em}
.rendered table{margin:30px auto 0px}
.rendered p,#card6 .rendered div{padding-top:25px}
article{width:92%}
.demoTable td:nth-child(1){padding-right:20px}
.arrowdown,.arrowup{padding:8px}
a.prev,a.next{right:-33px}
}
@media screen and (max-width:630px){.card{margin:20px 10px}
.card > div{padding:30px 25px}
.bottomButtons span,.bottomButtons a{padding:2px 4px}
}
@media screen and (max-width:550px){.rendered,.tale{display:inline-block}
#mobileHeader a.textLogo{font-size:30px;line-height:30px}
#mobileLogo img{width:100px}
.card{margin:30px 3px;text-align:center}
.card > div{padding:30px 25px;display:inline-block;text-align:left;min-height:10px !important}
.bottomButtons,a.prev,a.next{display:none !important}
.rendered table{margin:0}
.rendered p,#card6 .rendered div{padding-top:0}
#card8 .rendered,#card5 .rendered{display:none!important}
#tiles{padding:10px 10px 20px}
.rendered ol{margin:0}
article h1,article h2,article h3,article h4{font-size:1.3em}
}
@media screen and (max-width:380px){body{font-size:18px;line-height:25px}
.card > div{padding:8px}
}