735 lines
10 KiB
CSS
735 lines
10 KiB
CSS
/* site.css
|
|
*
|
|
* This code is Copyright 1998--2013 The GnuPG Project and licensed
|
|
* under a Creative Commons Attribution-ShareAlike 3.0 Unported
|
|
* License. See the file copying.org for details.
|
|
*/
|
|
|
|
/* Color names as used by lolo's old site design:
|
|
* gray #5c6064
|
|
* lightblue #d0dce8
|
|
* darkpurple #784c6c
|
|
* lightpurple #f0f0fc
|
|
* grayedlightpurple #ebebf4
|
|
*/
|
|
|
|
body {
|
|
background: #f0f0fc;
|
|
font-family: "Proxima Nova Regular","Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
|
|
font-weight: 400;
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
div#wrapper {
|
|
background: transparent url(/share/email-envelope.png) top right no-repeat;
|
|
}
|
|
*/
|
|
|
|
div#wrapper,
|
|
div#footer {
|
|
max-width: 850px;
|
|
margin: auto;
|
|
}
|
|
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: #000;
|
|
font-family: "Helvetica Neue",Arial,sans-serif;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-size: x-large;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
|
|
/*
|
|
Links
|
|
*/
|
|
|
|
|
|
a:link {
|
|
/* color: #784c6c;*/
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
background-color: #d0dce8;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
/* color: #5c6064; */
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.img:hover {
|
|
background-color: #f0f0fc;
|
|
}
|
|
|
|
|
|
/*
|
|
Raise attention
|
|
*/
|
|
|
|
li.important,
|
|
span.important {
|
|
color: red;
|
|
}
|
|
|
|
div.urgent {
|
|
width: 85%;
|
|
text-align: center;
|
|
border: solid red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ii {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/*
|
|
Other elements as commonly used by org-mode
|
|
*/
|
|
p {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
|
|
img {
|
|
border-width: 0;
|
|
}
|
|
|
|
img.lfloat {
|
|
float: left;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
img.rfloat {
|
|
float: right;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
|
|
/* The figure class is used by the blog entries. We use display
|
|
to suppress the figure number inserted by org-mode. */
|
|
.figure {
|
|
border: 1px solid #808080;
|
|
margin: 0 1em 0.5em 0.5em;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
div.figure {
|
|
float: right;
|
|
margin-right:0 !important;
|
|
}
|
|
|
|
.figure p {
|
|
margin: 0;
|
|
padding: 0.5em 0 0.2em 0;
|
|
}
|
|
|
|
.figure-number {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.example {
|
|
overflow: auto;
|
|
}
|
|
|
|
.correction {
|
|
color: #ff0000;
|
|
}
|
|
|
|
|
|
.postdate {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
div.entry-qotd p {
|
|
padding-left: 20%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.entry-qotd {
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
|
|
#kicker {
|
|
padding-top: 5%;
|
|
font-size: 125%;
|
|
border-bottom: 3px #FFb580 solid;
|
|
font-family: verdana,helvetica;
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
|
|
|
|
#header {
|
|
background: transparent;
|
|
height: 150px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#header a.logo img {
|
|
height: 120px;
|
|
}
|
|
#header a.logo:hover img {
|
|
background: transparent;
|
|
opacity: 0.4;
|
|
filter: alpha(opacity=40); /* For IE8 and earlier */
|
|
}
|
|
#header a,
|
|
#header a:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
#cornerImage {
|
|
width: 128px;
|
|
height: 130px;
|
|
margin-top: -7.5em;
|
|
margin-left: 82%;
|
|
padding: 0;
|
|
padding-right: 2%;
|
|
}
|
|
|
|
|
|
/*
|
|
Navigation
|
|
*/
|
|
|
|
/* Reset the link attributes for nav except for hover */
|
|
nav a:visited,
|
|
a:link {
|
|
color: #757575;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav ul,
|
|
ul ul.sub-menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
nav ul {
|
|
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
|
|
padding: 0 20px;
|
|
border-radius: 10px;
|
|
background: #efefef;
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
nav ul li,
|
|
ul ul.sub-menu li {
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/*Link Appearance*/
|
|
nav ul li a,
|
|
ul li ul.sub-menu li a {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
padding: 10px;
|
|
display:inline-block;
|
|
}
|
|
|
|
/*Make the parent of sub-menu relative*/
|
|
nav ul li {
|
|
position: relative;
|
|
}
|
|
|
|
/*sub menu*/
|
|
nav ul li ul.sub-menu {
|
|
display:none;
|
|
}
|
|
nav ul li:hover ul.sub-menu {
|
|
display:block;
|
|
background: #5f6975;
|
|
color: #fff;
|
|
z-index: 99;
|
|
border-radius: 0px;
|
|
position: absolute;
|
|
top: 39px;
|
|
left: 0;
|
|
}
|
|
nav ul ul li {
|
|
border-bottom: 1px solid #575f6a;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
nav ul ul li a {
|
|
display:block !important;
|
|
}
|
|
|
|
nav ul ul li a:hover {
|
|
background: #4b545f;
|
|
}
|
|
|
|
|
|
/* The second menu line for stop menu with sub-menus.
|
|
This is a non-nested list. */
|
|
nav.subnav {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
nav.subnav ul {
|
|
display: inline-table;
|
|
list-style: none;
|
|
color: #757575;
|
|
position: relative;
|
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
|
|
border-radius: 6px;
|
|
background-color: #efefef;
|
|
}
|
|
|
|
nav.subnav ul li a {
|
|
display: block;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
padding: 0 30px 0 10px;
|
|
}
|
|
|
|
nav * li a.selected {
|
|
color: #0093DD;
|
|
}
|
|
|
|
|
|
/*
|
|
The bottom menu
|
|
*/
|
|
|
|
#nav_bottom ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
float: left;
|
|
}
|
|
|
|
#nav_bottom li {
|
|
float: left;
|
|
padding-right: 3em;
|
|
}
|
|
|
|
#nav_bottom p {
|
|
clear: left;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
#nav_bottom a {
|
|
clear: left;
|
|
font-variant: normal;
|
|
}
|
|
|
|
|
|
/*
|
|
Other stuff
|
|
*/
|
|
|
|
main {
|
|
}
|
|
|
|
main ul {
|
|
list-style: square;
|
|
padding-left: 0;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
div#content {
|
|
background-color: #fff;
|
|
margin-top: 1em;
|
|
padding: 1em;
|
|
box-shadow: 0 1px 1px rgba(154,170,207,0.1);
|
|
}
|
|
|
|
div#content a,
|
|
div#footer a {
|
|
color: #0093DD !important;
|
|
}
|
|
|
|
div.outline-text-2 {
|
|
margin: 0;
|
|
padding: 0.5em 0.5em 0 0;
|
|
border-top: 2px solid #DEECF9;
|
|
border-right: 2px solid #DEECF9;
|
|
}
|
|
|
|
div.outline-text-3 {
|
|
padding-top: 3px;
|
|
padding-right: 3px;
|
|
border-top: 1px solid #E2EEFA;
|
|
border-right: 1px solid #E2EEFA;
|
|
}
|
|
|
|
div.outline-text-2,
|
|
div.outline-text-3 {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
div.outline-text-3,
|
|
div > h3 {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* Not anymore used:
|
|
#rightColumn {
|
|
float: right;
|
|
width: 18%;
|
|
margin-left: 5%;
|
|
margin-right: 2%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
#rightColumn ul {
|
|
list-style: square;
|
|
padding-left: 0;
|
|
margin-left: 1em;
|
|
}
|
|
*/
|
|
|
|
.morelink {
|
|
font-size: smaller;
|
|
font-variant: normal;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.morelink:after {
|
|
content: "{more}";
|
|
}
|
|
|
|
|
|
/* Note that the .footerbox takes care of the padding. */
|
|
#cpyright {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
#smallnote {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.smallnote {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#footer {
|
|
border-top: 2px solid #5c6064;
|
|
margin-top: 5em;
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
clear: both;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
|
|
#checkoutSummary {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
|
|
.articleRight {
|
|
float: right;
|
|
padding: 2%;
|
|
}
|
|
|
|
pre {
|
|
border: thin black solid;
|
|
background-color: #efefef;
|
|
padding: 0.5em;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Classes used by makeinfo (manuals). */
|
|
|
|
pre.display {
|
|
font-family:inherit;
|
|
}
|
|
pre.format {
|
|
font-family:inherit;
|
|
}
|
|
pre.smalldisplay {
|
|
font-family:inherit;
|
|
font-size:smaller;
|
|
}
|
|
pre.smallformat {
|
|
font-family:inherit;
|
|
font-size:smaller;
|
|
}
|
|
pre.smallexample {
|
|
font-size:smaller;
|
|
}
|
|
pre.smalllisp {
|
|
font-size:smaller;
|
|
}
|
|
|
|
span.sc {
|
|
font-variant:small-caps;
|
|
}
|
|
span.roman {
|
|
font-family:serif;
|
|
font-weight:normal;
|
|
}
|
|
span.sansserif {
|
|
font-family:sans-serif;
|
|
font-weight:normal;
|
|
}
|
|
|
|
|
|
/* Table related rules as used by org-mode. */
|
|
|
|
table {
|
|
margin-left: 5%;
|
|
}
|
|
|
|
|
|
.left {
|
|
margin-left: 0px;
|
|
margin-right: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
margin-right: 0px;
|
|
text-align: right;
|
|
}
|
|
|
|
th.left {
|
|
text-align:center;
|
|
}
|
|
|
|
th.center {
|
|
text-align:center;
|
|
}
|
|
|
|
th.right {
|
|
text-align:center;
|
|
}
|
|
|
|
th.wideright {
|
|
text-align:center;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
td.left {
|
|
text-align:left;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
td.center {
|
|
text-align:center;
|
|
}
|
|
|
|
td.right {
|
|
text-align:right;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
td.wideright {
|
|
text-align: right;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
|
|
/* Tag cloudlist. */
|
|
|
|
#tagcloudlist ul {
|
|
list-style: none;
|
|
float: left;
|
|
}
|
|
|
|
#tagcloudlist li {
|
|
float: left;
|
|
line-height: 130%;
|
|
font-variant: small-caps;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
#tagcloudlist li:before {
|
|
content: "\00bb\00a0";
|
|
}
|
|
|
|
#tagcloudlist p {
|
|
clear: left;
|
|
padding-top: 1em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#tagcloudlist p.doclear {
|
|
clear: left;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#tagcloudlist a {
|
|
font-variant: normal;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
|
|
/* A box of logos. */
|
|
|
|
.logobox p {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.logobox img {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
/* A box used for small graphics at the page bottom.
|
|
The images are right aligned, a single P is used
|
|
to clear the alignment. */
|
|
.footerbox {
|
|
margin-top: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.footerbox img {
|
|
float: right;
|
|
}
|
|
|
|
.footerbox p {
|
|
margin-top: 0px;
|
|
margin-bottom 0px;
|
|
clear: both;
|
|
}
|
|
|
|
|
|
/* Used by the list of people. */
|
|
.people {
|
|
float: left;
|
|
margin-top: 1em;
|
|
margin-right: 1em;
|
|
margin-bottom: 1em;
|
|
min-width: 120px;
|
|
}
|
|
|
|
|
|
/* Forms */
|
|
.inputpanel {
|
|
background-color: #FAEBD7;
|
|
}
|
|
|
|
/* Donation stuff. */
|
|
|
|
.buttonbox {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
float: none;
|
|
}
|
|
|
|
.donate-button {
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
background-image: linear-gradient(#28A0E5, #015E94);
|
|
border: 0px none;
|
|
padding: 1px;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
float: left;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.donate-button-low {
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
background-image: linear-gradient(#28A0E5, #015E94);
|
|
border: 0px none;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
float: left;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
.donation-progress {
|
|
border: solid 1px;
|
|
width: 100%;
|
|
height: 18px;
|
|
background-color: #ff0;
|
|
}
|
|
|
|
.donation-progress p {
|
|
position: relative;
|
|
font-size: 14px;
|
|
top: -18px;
|
|
left: 0;
|
|
margin-top: 0;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
margin-bottom: 0;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.donation-progress-bar {
|
|
background-color: #0a0;
|
|
}
|
|
|
|
|
|
|
|
/* EOF */
|