@font-face { font-family: "Segoe UI Semibold"; font-weight: bold; src: local("Segoe UI Semibold"); } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } html { font-size: 16px; font-family: Segoe UI, Avenir, Helvetica Neue, Tahoma, sans-serif; } html, body { margin:0px; padding: 0px; line-height: 1.4; } p { line-height: 1.7; } @font-face { font-family: 'icons'; src:url('../fonts/icons.eot'); src:url('../fonts/icons.eot') format('embedded-opentype'), url('../fonts/icons.woff') format('woff'), url('../fonts/icons.ttf') format('truetype'), url('../fonts/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal; } .icon:before { font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .i-gear:before { content: "\f013"; } .i-home:before { content: "\f015"; } .i-download:before { content: "\f019"; } .i-flag:before { content: "\f024"; } .i-book:before { content: "\f02d"; } .i-comment:before { content: "\f075"; } .i-shopping-cart:before { content: "\f07a"; } .i-folder-open:before { content: "\f07c"; } .i-gears:before { content: "\f085"; } .i-thumbs-o-up:before { content: "\f087"; } .i-github:before { content: "\f09b"; } .i-file-text-o:before { content: "\f0f6"; } .i-github-alt:before { content: "\f113"; } .i-folder-open-o:before { content: "\f115"; } .i-flag-o:before { content: "\f11d"; } .i-jsfiddle:before { content: "\f1cc"; } .i-git-square:before { content: "\f1d2"; } .i-git:before { content: "\f1d3"; } /* Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org> */ .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #f0f0f0; -webkit-text-size-adjust: none; } .hljs, .h-subst, .h-tag .h-title, .nginx .h-title { color: black; } .h-string, .h-title, .h-constant, .h-parent, .h-tag .h-value, .h-rules .h-value, .h-preprocessor, .h-pragma, .haml .h-symbol, .ruby .h-symbol, .ruby .h-symbol .h-string, .h-template_tag, .django .h-variable, .smalltalk .h-class, .h-addition, .h-flow, .h-stream, .bash .h-variable, .apache .h-tag, .apache .h-cbracket, .tex .h-command, .tex .h-special, .erlang_repl .h-function_or_atom, .asciidoc .h-header, .markdown .h-header, .coffeescript .h-attribute { color: #07b; } .smartquote, .h-comment, .h-annotation, .h-template_comment, .diff .h-header, .h-chunk, .asciidoc .h-blockquote, .markdown .h-blockquote { color: #090; } .h-number, .h-date, .h-regexp, .h-literal, .h-hexcolor, .smalltalk .h-symbol, .smalltalk .h-char, .go .h-constant, .h-change, .lasso .h-variable, .makefile .h-variable, .asciidoc .h-bullet, .markdown .h-bullet, .asciidoc .h-link_url, .markdown .h-link_url { color: #c00; } .h-label, .h-javadoc, .ruby .h-string, .h-decorator, .h-filter .h-argument, .h-localvars, .h-array, .h-attr_selector, .h-important, .h-pseudo, .h-pi, .haml .h-bullet, .h-doctype, .h-deletion, .h-envvar, .h-shebang, .apache .h-sqbracket, .nginx .h-built_in, .tex .h-formula, .erlang_repl .h-reserved, .h-prompt, .asciidoc .h-link_label, .markdown .h-link_label, .vhdl .h-attribute, .clojure .h-attribute, .asciidoc .h-attribute, .lasso .h-attribute, .coffeescript .h-property, .h-phony { color: #88f; } .h-keyword, .h-id, .h-title, .h-built_in, .css .h-tag, .h-javadoctag, .h-phpdoc, .h-dartdoc, .h-yardoctag, .smalltalk .h-class, .h-winutils, .bash .h-variable, .apache .h-tag, .h-type, .h-typename, .tex .h-command, .asciidoc .h-strong, .markdown .h-strong, .h-request, .h-status { font-weight: bold; } .asciidoc .h-emphasis, .markdown .h-emphasis { font-style: italic; } .nginx .h-built_in { font-weight: normal; } .coffeescript .javascript, .javascript .xml, .lasso .markup, .tex .h-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .h-cdata { opacity: 0.5; } .center { text-align: center; } .center>* { max-width: 100%; text-align: left; margin-left: auto; margin-right: auto; } .cols { display: flex; } .cols>* { flex: 1; } .cols>*+* { margin-left: 2rem; } .layout>* { padding: 0 2rem; } /* small */ @media (max-width: 559px) { .layout2r>*, .layout>* { padding: 0 calc(50% - 9rem); } .sm\:hide, .lg\:show { display: none; } } /* medium */ @media (min-width: 560px) and (max-width:899px) { .layout2r>*, .layout>* { padding: 0 calc(50% - 19rem); } .md\:hide, .sm\:show, .lg\:show { display: none; } .ml\:cols { display: flex; } .ml\:cols>* { flex: 1; } .ml\:cols>*+* { margin-left: 2rem; } } /* large */ @media (min-width: 900px) { .layout2r { position: relative; min-height: 50rem; } .layout2r .footer { position: absolute; left: 0; right: 0; top: 100%; } .layout2r>* { padding: 0 calc(100% - 50vw - 14rem) 0 calc(50vw - 29rem); } .wide { padding: 0 calc(100% - 50vw - 29rem) 0 calc(50vw - 29rem); } .sidebar { position: absolute; top: 100px; bottom: 0; left: calc(50vw + 16rem); width: 16rem; padding: 0; font-size: 88.9%; } .messages .sidebar .sticky { position: sticky; top: -130px; } .layout>* { padding: 0 calc(100% - 50vw - 29rem) 0 calc(50vw - 29rem); } .sm\:show { display: none; } .ml\:cols, .lg\:cols { display: flex; } .ml\:cols>*, .lg\:cols>* { flex: 1; } .ml\:cols>*+*, .lg\:cols>*+* { margin-left: 2rem; } } @media (max-width:349px) {html {font-size: 14px}} @media (min-width:350px) and (max-width:369px) {html {font-size: 15px}} @media (min-width:370px) and (max-width:399px) {html {font-size: 16px}} @media (min-width:400px) and (max-width:429px) {html {font-size: 17px}} @media (min-width:430px) and (max-width:469px) {html {font-size: 18px}} @media (min-width:470px) and (max-width:559px) {html {font-size: 19px}} @media (min-width:560px) and (max-width:629px) {html {font-size: 13px}} @media (min-width:630px) and (max-width:699px) {html {font-size: 14px}} @media (min-width:700px) and (max-width:749px) {html {font-size: 15px}} @media (min-width:750px) and (max-width:799px) {html {font-size: 16px}} @media (min-width:800px) and (max-width:849px) {html {font-size: 17px}} @media (min-width:850px) and (max-width:899px) {html {font-size: 18px}} @media (min-width:900px) and (max-width:1019px) {html {font-size: 14px}} @media (min-width:1020px) and (max-width:1179px) {html {font-size: 15px}} @media (min-width:1180px) and (max-width:1359px) {html {font-size: 16px}} @media (min-width:1360px) and (max-width:1599px) {html {font-size: 17px}} @media (min-width:1600px) {html {font-size: 18px}} .content h1 { font-family: "Microsoft Sans Serif", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2.6em; font-weight: normal; line-height: 1.5em; padding-left: 0.1em; color: #08e; } .content h2 { font-family: "Segoe UI Semibold", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.5em; color: #444; border-bottom: 4px solid #0a0; margin-top: 1.5em; } .content h3 { font-family: "Segoe UI", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.3em; color: #07c; margin-top: 1.5em; margin-bottom: 0.5em; } .content h3>em { font-weight: normal; font-style: normal } .content h4 { color: #666; margin-bottom: 1em; } .content li, .content p { line-height: 1.7em; } .content a { color: #08E; text-decoration: none; } .content a:visited { color: #999; } .content a:hover { text-decoration: underline; } .content code { padding: 1px 3px; background: #ffe6e0; border: 1px solid #ffafa0; border-radius: 2px; } .content pre>code { display: block; overflow: hidden; padding: 20px; background: #fffefc; border: 1px solid #fd9; border-radius: 2px; font-size: 13px; font-family: Consolas, monospace; } .content blockquote { border-left: 10px solid #ccc; margin: 25px 0px; padding-left: 40px; color: #444; } @keyframes pulse { 0% {opacity: 1;} 90% {opacity: 0.9;} 100% {opacity: 1;} } .sidebar { padding-top: 25px; } .sidebar ul { list-style-type: none; padding: 0; margin: 0; line-height: 1.6em; } .sidebar>ul>li>ul { margin-left: 15px; } .sidebar>ul>li>p { text-transform: uppercase; color: #999; margin: 1.2em 0 0.2em; font-size: 110%; } .sidebar a { color: #000; text-decoration: none; } .sidebar a:visited { color: #999; } .sidebar a:hover { text-decoration: underline; } /* ----- */ .small-grid-img { display: inline-block; width: 100%; height: 8rem; background: url(/include/images/data-grid-small.png) 0 0 no-repeat; } .small-fw-img { display: inline-block; height: 2rem; width: 2rem; margin: 0.5rem; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } .fw-img-angular { background-image: url(/include/frameworks/angular.svg); } .fw-img-react { background-image: url(/include/frameworks/react.svg); } .fw-img-vue { background-image: url(/include/frameworks/vue.svg); } .fw-img-svelte { background-image: url(/include/frameworks/svelte.svg); } .navigation .menu { text-align: right; margin-right: -1rem; } .navigation .menu a { display: inline-block; padding: 3px 13px 0; border-bottom: 3px solid transparent; color: #ddd; line-height: 1.5em; font-size: 17px; font-weight: bold; font-family: "Segoe UI Semibold", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); cursor: pointer; } .navigation .menu a:visited { color: #ddd; } .navigation .menu a:hover { color: #fff; border-bottom-color: #f90; } .page .menu .icon:before { content: none; } /* home/entry page */ .entry .navigation, .home .navigation { background: #444; background: linear-gradient(#ffffff11, #ffffff11), #373737 url(../patterns/denim.png); border-bottom: 1px solid #303030; } .entry .navigation .logo, .home .navigation .logo { height: 60px; margin: 16px -3px; background: url(../logo/aw-logo.svg) 0 0 no-repeat; background-size: contain; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); } .entry .menu a:visited, .entry .menu a, .home .menu a:visited, .home .menu a { color: #888; } .entry .menu a, .home .menu a { text-shadow: 1px 1px 2px rgba(0,0,0,0.5); vertical-align: middle; text-align: center; } .entry .menu a:before, .home .menu a:before { display: block; font-size: 1.5em; text-shadow: inherit; margin: auto; } .entry .menu a:hover, .home .menu a:hover { border-bottom-color: transparent; color: #aaa; } @media (max-width:559px) { .entry .navigation, .home .navigation { background: #444; } } .topline { color: #bdf; border-bottom: 1px solid #06c; background-color: #09f; align-items: center; font: 11px/26px Tahoma; } .topline a, .topline a:visited { color: #bdf; text-decoration: none; padding: 0 4px; } .navigation { background: #4d4d4d; background: linear-gradient(#ffffff1a, #ffffff1a), #373737 url(../patterns/denim.png); border-top: 1px solid #666; border-bottom: 1px solid #000; align-items: center; z-index: 1; } .navigation .logo { height: 38px; color: transparent; background: url(../logo/aw-logo.svg) 0 0 no-repeat; background-size: contain; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); margin: 7px -2px; } .navigation .logo a { display: block; height: 100%; color: transparent!important; } @media (max-width:559px) { .navigation { background: #4d4d4d; } } .footer { margin-top: 100px; border-top: 2px solid #555; border-bottom: 1px solid #777; color: #fff; background: #666; } .footer .inverted-logo { height: 32px; margin: 30px 0; background: url(../logo/aw-logo.svg) no-repeat; background-size: contain; filter: hue-rotate(90deg) sepia(1) grayscale(1) drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); } .footer .h-line { margin: 20px 0; border-bottom: 1px solid #999; } .footer .summary { font-size: 0.82rem; color: #ddd; margin-bottom: 2rem; margin-right: calc(50% - 15rem); flex: 2; max-width: 100%; } .footer p { line-height: 1.4; } .footer .links { vertical-align: top; margin-top: 2.5rem; margin-bottom: 3rem; font-size: 0.95rem; line-height: 1.6em; } .footer .links a { display: block; color: #fff; text-decoration: none; } .footer .links a:hover { color: #f90; } .front { height: auto; align-items: center; border-bottom: 1px solid #eee; background: #373737 url(../patterns/denim.png); padding-top: 3rem; padding-bottom: 3rem; } .front .left { height: 390px; background: url(../images/front.jpg) 0 center no-repeat; } .front .left .code { margin: 30px 50px; padding: 40px; background: #444; background: rgba(66,66,66,0.9); } .home .front .right { position: relative; font-family: "Segoe UI", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif; flex: none; padding: 1rem 3rem; } .front .right:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 5px; background: #3c3c3c; background: rgba(66,66,66, 0.5); border: 1px solid; border-color: #222 #444 #444 #222; } .front .right .top { position: relative; margin: 2em 0; font-size: 1.5em; font-weight: bold; text-align: center; color: #bbb; } .front .right .top>span { display: block; font-size: 2em; line-height: 1em; margin-bottom: 0.1em; color: #ccc; } .front .right .top>span>b { color: #888; } .front .right .bottom { position: relative; margin-top: 4em; text-align: center; color: #999; font-size: 0.9em; margin-bottom: 1em; } .front .right .button { display: block; margin: 0.3em 0.5em; padding-bottom: 0.15em; border: 1px solid #c70; border-color: #d80 #840 #840 #d80; border-radius: 7px; box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(255, 255, 255, 0.3), 0px -1px 1px rgba(0, 0, 0, 0.7); line-height: 2.1em; font-family: inherit; font-size: 1.5em; font-weight: bold; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); color: #333; background-color: #f90; background-image: radial-gradient(120% 120% at center top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 51%), linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.2) 100%); cursor: pointer; animation: pulse 1.2s infinite; } .front .right .button:hover { background-image: radial-gradient(120% 120% at center top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.1) 51%), linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.2) 100%); } .front .right .button:active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 0%); } .front .right .button:before { position: relative; top: 1px; font-size: 1.2em; margin-right: 0.1em; } .front pre>code { font-size: 16px; font-weight: bold; color: #fd0; } .front .h-keyword { color: #6f6; } .front .h-function .h-keyword { color: #f60; } .front .h-string { color: #6cf; } .front .h-comment { color: #aaa; } .midline { background: #eee; padding-bottom: 10px; } .home iframe { border: none; width: calc(100% + 110px); height:550px; margin:-60px; } @media (max-width:899px) { .home .navigation .logo { height: 40px; background: url(../logo/aw-logo.svg) 0 0 no-repeat; background-size: contain; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); } .home .demo img { max-width: 100%; } } @media (max-width:559px) { .front { background: #333; } } .entry h2 { font-size: 2.5rem; line-height: 1.15; color: #09f; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .entry .front { height: auto; align-items: center; padding-top: 4rem; padding-bottom: 3rem; } .entry .title { padding-bottom: 4rem; } .entry h1 { font-size: 3.3rem; color: #eca; text-shadow: 3px 3px 5px rgba(0,0,0,0.3); } .entry h1 strong { font-size: 120%; color: #f70; } .entry h1 span { display: block; margin-left: 3rem; line-height: 1em; font-size: 90%; } .title .subhead { margin: 1rem 0 1rem 3rem; color: #ccc; } .title .cta { margin-left: 3rem; font-size: 1.4rem; font-weight: bold; line-height: 1.9em; } .cta a { display: inline-block; margin: 0.5rem 1rem 0.5rem 0; padding: 0 2em; border-radius: 2px; color: #444; background: #fff; text-decoration: none; } .cta a:first-child { background: #4d2; } .entry .front .right { position: relative; flex: none; margin: 0; } .entry .bullets { position: relative; margin: 1rem 0; padding: 1.5rem; } .entry .bullets a { display: block; color: #ccc; font-size: 0.95rem; font-weight: bold; text-decoration: none; line-height: 2em; } .entry .bullets a:hover { color: #09f; } .entry .bullets a:before { content: "\2714"; display: inline-block; width: 1.25em; line-height: 1.25em; margin: 0 1rem 0 0.5rem; text-align: center; font-weight: normal; font-size: 85%; border-radius: 2em; color: #444; background: #0a0; text-shadow: 1px 1px 1px #ccc; } .entry .quote { margin-bottom: 2rem; padding-top: 3rem; padding-bottom: 3rem; font-size: 1.25rem; font-style: italic; color: #444; background: #ccc; } .quote p { width: 40rem; max-width: 100%; margin: 0 auto; text-indent: -1.5rem; color: #666; } .quote p i { font-size: 250%; color: #9a9a9a; vertical-align: -20%; margin: -1em 0; padding-right: 0.5rem; display: inline-block; font-family: arial; text-indent: 0; } .quote p span { display: inline-block; width: 100%; margin-top: 0.5em; text-align: right; font-size: 90%; } .entry .demo .caption { position: relative; margin: 3rem 0 -30px; text-align: center; color: #09f; z-index: 1; } .entry iframe { border: none; width: 100%; height:550px; } .entry .btn { display: inline-block; min-width: 10rem; padding: 0.5em 1.5em; margin: 0.5rem 1rem; color: #444; background: #fff; border: 1px solid #444; border-radius: 2px; font-size: 1.2em; font-weight: bold; text-align: center; text-decoration: none; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .entry .green { color: #fff; background: #0a0; border-color: #090; } @media (max-width:899px) { .entry .navigation .logo { height: 40px; background: url(../logo/aw-logo.svg) 0 0 no-repeat; background-size: contain; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); } .entry h1 { font-size: 3rem; line-height: 1.2em; margin-right: -0.2rem; } } @media (max-width:559px) { .entry .footer { margin-top: 5rem; } .entry .footer .links { display: none; } } .page .main, .messages .main { margin-top: 30px; } .messages h1 { font-size: 2em; } .f-m { margin: 10px 0px; line-height: 1.5em; word-break: break-word; } .f-m pre { line-height: 1.2em; } .f-a, .f-d { padding: 0px 30px; text-align: right; line-height: 1.5em; font-style: italic; } .f-s { margin: 15px 0; border-bottom: 1px dotted #ddd; } .msglink { margin: 5px 0; } .msglink a { color: #06b; } .msglink a:visited { color: #444; } .msglink>span { color: #999; } .msgdate { float:right; clear:right; padding-left:20px; font-size:85%; color:#999; } .f-p { position: relative; margin-top: 30px; } .f-l { display: block; position: relative; height: 30px; margin-bottom: -30px; } .f-p input, .f-p textarea { position: relative; margin: 0 0 15px 70px; width: 630px; font-family: Verdana, Arial; line-height: 1.5em; } .f-p textarea { height: 300px; } .f-p .f-u { width: 100px; height: 40px; } .aw-code-panel { display: block; position: absolute; bottom: 180px; } .aw-code-panel button { display: block; width: 30px; height: 30px; margin: 10px 0; } .f-p select { position: absolute; width: 150px; right: 5px; font-family: Verdana, Arial; line-height: 1.5em; } .f-g { margin: 30px 0; text-align: right; font-size:85%; clear:both; } .f-g a { display: inline-block; padding: 3px; font-style: italic; } .f-g a:hover { background: #eee; } /*------*/ .aw-section { margin-bottom: 20px; border: 1px solid #eee; border-radius: 3px; padding: 30px 20px; line-height: 1.5em; } .aw-section h2 { margin: 0 0 1em 0; border-bottom: 1px solid #ddd; font-size: 1.3em; color: #999; } .aw-section .aw-textbox { width: 155px; line-height: 1.5em; font-family: Verdana, Arial; border: 1px solid #ccc; border-radius: 2px; } .aw-section-small-font p { font-size: 11px; } .y03:after {content: '2003'} .y04:after {content: '2004'} .y05:after {content: '2005'} .y06:after {content: '2006'} .y07:after {content: '2007'} .y08:after {content: '2008'} .y09:after {content: '2009'} .y10:after {content: '2010'} .y11:after {content: '2011'} .y12:after {content: '2012'} .y13:after {content: '2013'} .y14:after {content: '2014'} .y15:after {content: '2015'} .y16:after {content: '2016'} .y17:after {content: '2017'} .y18:after {content: '2018'} .y19:after {content: '2019'} .y20:after {content: '2020'} .y21:after {content: '2021'} .y22:after {content: '2022'} #loading+.footer { display: none; } #loading:before { content: 'Loading...'; line-height: 6rem; } #examples-frame { border: 1px solid #ddd; width: 100%; margin: 0; } .examples>div { display: none; } #welcome1 { margin-top: 60px; margin-bottom: -100px; min-height: 40px; } .action-bottom { background: #777; padding: 20px 0; } .action-bottom .action-small-print { font-size: 11px; color: #aaa; text-align: center; } /* button */ .button.b-action-big { display: block; margin: 0.3em 1.5em; padding-bottom: 0.15em; border: 1px solid #c70; border-color: #d80 #840 #840 #d80; border-radius: 7px; box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(255, 255, 255, 0.3), 0px -1px 1px rgba(0, 0, 0, 0.7); line-height: 2.1em; font-family: inherit; font-size: 1.5em; font-weight: bold; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5); color: #333; background-color: #f90; background-image: radial-gradient(120% 120% at center top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 49%, rgba(255,255,255,0) 51%), linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.2) 100%); cursor: pointer; animation: pulse 1.2s infinite; } .button.b-action-big:hover { background-image: radial-gradient(120% 120% at center top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.1) 51%), linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.2) 100%); } .button.b-action-big:active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 0%); } .button.b-action-big:before { position: relative; top: 1px; font-size: 1.2em; margin-right: 0.1em; } .action-bottom .b-action-big { color: #333!important; text-decoration: none!important; } #exit1 { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; text-align: center; white-space: nowrap; z-index: 100; } .popup-background { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); } .popup-ruler { display: inline-block; height: 100%; width: 1px; vertical-align: middle; } .popup-box { display: inline-block; position: relative; width: 1000px; max-width: 100%; vertical-align: middle; text-align: left; white-space: normal; border: 3px solid #777; background: #ddd; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); } .popup-box h1 { background: none; font-size: 36px; } .popup-close { position: absolute; right: 50px; top: 40px; z-index: 200; } .popup-close a { color: #777!important; } .popup-menu { float: right; margin: 0 20px; padding: 0px 25px; border: 1px solid #bcd; border-radius: 6px; font-size: 13px; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); } .popup-menu a { text-decoration: none!important; color: #37c; } .popup-menu a:hover { color: #0a0; } .popup-menu .icon:before { margin-right: 5px; } .popup-menu-separator { display: inline-block; border-left: 1px solid #bcd; height: 25px; vertical-align: middle; margin: 15px; } .popup-title { animation: down 0.5s ease-out; } .popup-delay { animation: delay 0.8s ease-out; } .popup-dot { position: absolute; left: 0; top: 80px; width: 5px; height: 5px; margin-left: 30px; background: #0e0; opacity: 0; animation: fly 5s ease-out; } @keyframes fly { 0% {opacity: 1; transform: translateX(0);} 100% {opacity: 0; transform: translateX(300px);} } @keyframes down { 0% {transform: translateY(-30px);} 100% {transform: translateY(0);} } @keyframes delay { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} }