body { font-family: arial, dejavu sans, freesans; font-size: 16px; background-color: #e6e6e6; margin-top: 0; } a, acronym { color: #5c7684; text-decoration: none; border: none; } a:hover { text-decoration: underline; border-bottom: none; } img, video { vertical-align: middle; border: none; } h3 { font-size: 14px; margin-top: 25px; margin-left: 15px; margin-bottom: -8px; } hr { border-style: dashed; border-width: thin 0 0 0; border-color: lightgray; } .top { text-align: center; margin: 0px auto; } .top small { font-size: 11px; line-height: 15px; padding: 2px 5px; background: white; border-radius: 0 0 7px 7px; box-shadow: 0px 2px 5px #a2a2a2; } .navigation { font: 11px Verdana, Arial, Helvetica, sans-serif; position: absolute; width: 80px; right: 0px; top: 20px; opacity: 0.8; } .navigation ul { list-style-type: none; } .navigation a { color:#3366FF; text-decoration:none; } .navigation a:hover, .navigation a:focus { color:#FF6600; } .navigation ul { padding:0px; margin:0px; } .navigation a { display:block; font-weight:normal; letter-spacing:0.1em; text-decoration:none; padding: 7px 5px; background-image:url(nav-a-bg.png); background-repeat:no-repeat; background-position: left 90%; } .navigation a:hover, .navigation a:focus { background-image:url(nav-a-bg-h.png); } .section h2.reference { padding-top: 25px; } table.reference { border-collapse: collapse; } table.reference > * > * > th, table.reference > * > * > td { padding: 5px 20px; white-space: nowrap; } table.reference > * > * > td { border-top: thin dotted lavender; } table.reference.cli > * > * > td:first-child { color: #225577; font-family: Andale Mono, monospace; font-size: 10.5pt; font-weight: bold; } span.cmd { color: #5C7684; font-family: Andale Mono, monospace; font-weight: bold; } span.option { color: #225577; font-family: Andale Mono, monospace; font-weight: bold; } .page { position: relative; margin: 20px auto; width: 760px; min-height: 800px; padding: 20px; background: white; background-repeat: no-repeat; border: thin solid #a2a2a2; border-radius: 7px; box-shadow: 0px 2px 5px #a2a2a2; overflow: visible; } .header { margin-left: 25px; margin-right: 80px; margin-bottom: 50px; } .header img { float: left; margin-top: 2px; } img.logo { float: left; margin-top: -6px; margin-left: -8px; } h1 { font-size: 24px; font-weight: bold; margin-left: 65px; letter-spacing: 0.03em; } h1 .description { display: block; color: #888888; font-size: 70%; font-weight: normal; font-style: italic; letter-spacing: normal; } .screenshot { float: right; background-color: #E6E6E6; box-shadow: 0px 2px 5px #a2a2a2; } .main-section-screenshot { float: right; margin-top: 30px; margin-left: 20px; margin-right: 5px; } .main-section-screenshot img { box-shadow: 0px 2px 5px #a2a2a2; } .screenshot a { display: block; border: none; outline: none; } .screencast { position: relative; } div.screencast .play { position: absolute; top: 2px; right: 4px; opacity: 0.2; } div.screencast:hover .play { opacity: 1.0; } .content>.screenshot { margin-top: 37px; margin-left: 20px; } .comment, a.source { font-size: xx-small; font-weight: normal; color: lightgray; margin-left: 2px; } .install.button { margin: 15px 350px 15px 0px; text-align: center; } .section.tutorial ol, .section.tutorial ul { background-color: #EFEFEF; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 13px; margin: 12px 25px 15px 25px; padding: 8px 30px 9px 30px; border-radius: 7px; } .section.tutorial li img { vertical-align: bottom; height: 17px; } .section.first { clear: both; margin-top: 20px; } .section.features, .section.download, .section.purchase, .section.contact { clear: both; margin-top: 45px; } .section .icon { float: left; margin-right: 10px; } .section h2 { font-size: 20px; padding-top: 12px; margin-bottom: 20px; } .section p, .section .description { margin: 16px 0 0 10px; } .section .quote { float: right; margin-top: 12px; color: #888; font-size: 11px; } .quote:before { content: open-quote; } .quote:after { content: close-quote; } .section>ul.list>li { margin-top: 10px; margin-bottom: 10px; } .section>ul.list>li li { margin-top: 2px; } .note { font-size: 80%; font-style: italic; } .note.java { color: #E76F00; } .note.java:before { content: url("images/java.png"); position: relative; top: 2px; margin-left: 2px; margin-right: 2px; } .note.mediainfo { color: #3E8D39; } .note.mediainfo:before { content: url("images/plugin.png"); position: relative; top: 2px; margin-right: 2px; } .note.anime { color: #D76F04; } .note.anime:before { content: url("images/asterisk.png"); position: relative; top: 3px; margin-left: 2px; margin-right: 2px; } .section.features>ul.next { clear: both; padding-top: 5px; border-top: thin dashed lightgray; } .section.features .screenshot { position: relative; margin-bottom: 10px; } .section.features .screenshot.dialog { position: absolute; } .filesize { font-weight: bold; } .suggestion { border: thin lightgray dotted; background: GhostWhite; padding: 8px; margin: 25px 10px 45px 10px; } .metrics { margin: 25px; min-height: 25px; text-align: center; } .metrics a { margin: 2px; } .footer p { font-size: xx-small; text-align: center; margin: 0em; padding 0em; position: relative; top: 0.6em; left: 2em; } .message.box { background-color: #F5F5F5; border-radius: 4px; box-shadow: 0 2px 5px #A2A2A2; background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } .review { margin: 30px 25px; display: block; text-decoration: none !important; padding: 10px; min-height: 44px; max-width: 380px; } .review p { font-size: 11px; line-height: 18px; color: #555555; margin:0px 0px 0px 48px } .review .text { font-family: 'Dawning of a New Day', cursive; font-size: 24px; } .review .user { font-size: 12px; font-weight: bold; color: #0077AA; vertical-align: baseline; } .thumbs { float:left; border-radius: 4px 4px 4px 4px; background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); background-color: #0088BB; border: thin solid #006699; text-align: center; height: 42px; width: 42px; } .thumbs img { position:relative; top: 8px; } .video { margin: 20px 0px; } .video iframe { display: block; margin: 0 auto; width: 750px; height: 465px; background-color: black; border: 4px black solid; box-shadow: 2px 2px 5px #a2a2a2; border-radius: 4px; } #download li.macosx, #download li.windows, #purchase li.year { list-style: none; margin: 0.5em 1em 1em 1em; padding: 1.5em 1em 1.5em 3.6em; border-radius: 4px 4px 4px 4px; display: inline-block; background-color: #fcfbfa; box-shadow: 0px 0px 5px #2574ce; background-repeat: no-repeat; background-position: 0.8em center; background-size: 32px 32px; } #download li.macosx { background-image: url('images/apple.logo.svg'); } #download li.windows { background-image: url('images/microsoft.logo.svg'); } #purchase li.year { background-image: url('images/purchase.license.png'); } #purchase li.note { list-style: none; background: url('images/accept.png') left center no-repeat; padding: 0.1em 1.7em; margin-left: 1.5em; } #download li.macappstore.note { list-style: none; font-size: 8pt; text-align: right; margin: -0.5em 60px 2em 0.5em; } #download li.macappstore.note span:before { content: "* "; } #purchase { margin-bottom: 55px; } #purchase > ul > li.purchase { position: relative; } #purchase > ul > li.purchase div.tag { position: absolute; right: 2em; bottom: -1em; padding: 0.3em; border: 0.1em solid rgba(255,255,255,0); border-radius: 0.4em; text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35); text-align: center; font-size: 13px; color: white; background-color:#F14E4E; } #purchase div.tag > span:after { content: " (incl. tax)"; font-size: xx-small; position: relative; bottom: 0.12em; left: 0.1em; } #purchase > a.paddle_button { position: relative; display: block; margin: 30px 260px 50px 80px; padding: 15px; font-size: larger; vertical-align: middle; text-align: center; } #purchase > a.paddle_button div.tag { position: absolute; right: 5em; bottom: -1.6em; padding: 4px; border: 0.1em solid rgba(255,255,255,0); border-radius: 0.4em; text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35); text-align: center; font-size: 13px; color: white; background-color:#F14E4E; } /** #download li.ubuntu { list-style: none; background: url('images/ubuntu.logo.svg') no-repeat 0.4em center; background-size: 22px 22px; margin: 0.5em 1em 1em 4em; padding: 0.5em 0.6em 0.5em 2.0em; border-radius: 4px 4px 4px 4px; display: inline-block; background-color: linen; box-shadow: 0px 0px 5px orangered; } #download li.ubuntu a { color: rgb(221, 72, 20); } **/