filebot/website/base.css

520 lines
7.5 KiB
CSS

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;
}
a img {
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: 36px;
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;
}
.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;
}
.social {
float: right;
position: relative;
right: -10px;
top: -15px;
}
.social * {
float: right;
}
.social .twitter {
position: relative;
top: 3px;
right: 5px;
width: 75px;
}
.social .facebook {
position: relative;
left: -6px;
top: 3px;
width: 90px;
}
.social .plusone {
position: relative;
top: 1px;
width: 86px;
}
.screenshot {
float: right;
background-color: #E6E6E6;
border: thin solid lightgray;
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.contact {
clear: both;
margin-top: 40px;
}
.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;
}
#bitcoinate {
float: right;
height: 0px;
position: relative;
right: 4px;
bottom: 14px;
}
#bitcoinate a img {
width: 16px;
height: 16px;
}
#donate {
float: left;
height: 0px;
position: relative;
bottom: 15px;
left: 6px;
}
.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 {
list-style: none;
background: url('images/apple.logo.svg') no-repeat 0.3em 0.3em;
background-size: 24px 24px;
margin: 0.5em 1em 1em 1em;
padding: 0.5em 0.6em 0.5em 2.0em;
border-radius: 4px 4px 4px 4px;
display: inline-block;
background-color: ghostwhite;
box-shadow: 0px 0px 5px royalblue;
}
#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);
}