fsfe-website/look/generic.css

2227 lines
37 KiB
CSS

/*
New design for fsfe.org.
Colours to use:
TODO
Editing rules:
- Colours should be given in RGB.
- Properties should be split with a colon and a space.
- Selectors should be on separate lines, where the last item will
carry the block opener.
- Indentation should be two spaces, and no tabs should be used.
- Any images or other resources' URLs must be given in absolute
paths.
- Font sizes (apart from the first font size definition in body) and
line heights must be set in percent.
- Generally strive not to repeat yourself (DRY).
*/
@import url("grid.css");
@import url("input.css");
@import url("sections.css");
* {
margin: 0;
padding: 0;
}
/* Notes on fonts:
The website occasionnally refers to Arial or Helvetica fonts. There are Free
Software fonts for these typefaces too, like Nimbus Sans L. Microsoft Core
Fonts are proprietary software and should not be used. See:
https://en.wikipedia.org/wiki/Core_fonts_for_the_Web#Program_termination_and_software_licence_agreement_issues
*/
body {
font-family: "Arial", sans-serif;
font-size: 12px;
line-height: 180%;
color: rgb(50,50,50);
background-color: rgb(240,240,240);
background-image: url("/graphics/ribbon-gray.png");
background-repeat: no-repeat;
background-position: 19px 61px;
}
/* This is a suboptimal solution, should seek something more generic */
/*
.text,
p,
li {
font-size :110%;
}
*/
a:link,
a:visited {
text-decoration: none;
}
a:link {
color: rgb(51,148,206);
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(116,140,156);
}
a img {
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
#content p#category {
font-family: "Helvetica", "Arial", sans-serif;
}
h1,
h2,
h3 {
font-weight: normal;
line-height: normal;
}
h2 {
color: rgb(32,45,121);
font-size: 200%;
line-height: 120%;
margin: .4em -.3em .5em;
padding: 0 .3em .2em;
}
h3 {
color: rgb(32,45,121);
line-height: 110%;
margin: 1.5em 0 .8em 0;
font-size: 190%;
}
p, dl dt {
margin: .8em 0;
}
pre {
font-family: monospace;
font-size: 90%;
line-height: 140%;
background-color: rgb(240,240,240);
border-top: 1px dotted rgb(210,210,210);
border-bottom: 1px dotted rgb(210,210,210);
padding: 1.2em 0 1.2em 1em;
max-height: 14em;
overflow: auto;
margin: 1em 0;
box-shadow: 10px 0 0 rgb(240,240,240);
}
ul,
ol {
padding-left: 2em;
}
ul {
list-style: circle;
}
dt {
color: #202D79;
font-weight: bold;
}
dd {
padding: 0 0 0.5em 2em;
}
blockquote {
background-color: rgb(245,245,245);
border-left: .8em solid rgb(190,190,190);
color: rgb(90,90,90);
margin-bottom: .8em;
padding: .1em .5em .2em .9em;
}
aside {
display: block;
float: right;
background-color: rgb(214,234,245);
padding: 1em;
color: rgb(110,110,110);
line-height: 180%;
font-size: 95%;
}
aside h2 {
color: white;
background-color: rgb(129,136,179);
margin: -.5em -.5em 0 -.5em;
}
/* generic classes */
.clear {
clear: both!important;
}
.center {
text-align: center;
float: none!important;
}
.left {
float: left;
margin-left: 0;
}
.right {
float: right;
margin-right: 0;
}
p.left {
padding: 0 2% 0 0;
}
p.right {
padding: 0 0 0 2%;
}
.right {
float: right;
}
.grid-40 {
width: 38%;
}
.grid-40.left {
padding-right:1%
}
.grid-50 {
width: 48%;
}
.grid-40.left {
padding-right:1%
}
.grid-60 {
width: 56%;
}
.grid-70 {
width: 66%;
}
.grid-30 {
width: 28%;
}
.grid-60.right {
padding-left: 1%;
border-left: 1px solid rgb(204,204,204);
}
.even {
background-color: rgb(222,238,255);
}
.compare .clear .left:first-child {
padding-left: 0;
}
.compare .clear .left {
padding-left: 1em;
}
.compare hr {
clear: both;
margin: 0 0 2.5em;
}
.even {
background-color: #DEEEFF;
}
#wrapper {
margin: 0 5% 0 1%;
padding-bottom: 0;
max-width: 980px;
min-width: 500px;
border-left: 1px solid rgb(240,240,240);
}
#wrapper-inner {
float: left;
background-color: white;
padding-bottom: 3em;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 3px;
box-shadow: 3px 3px 4px rgba(0,0,0,.1);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.1);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.1);
width: 100%;
}
.n {
display: none;
}
.read_more {
text-align: right;
}
.break {
clear: both;
}
/* header */
#header {
background: url("/graphics/ribbon.png") no-repeat scroll left bottom transparent;
min-height: 200px;
padding: 0 1em;
width: 100%
padding: 0;
}
#logo {
float: left;
padding-right: 1em;
width: 200px;
}
#logo a img {
max-width: 100%;
}
#statement {
color: rgb(140,140,140);
font-size: 120%;
width: 100%;
padding-top: 1.8em;
}
/* sidebar */
#menu,
#search,
#translations {
margin-bottom: 1em;
clear: left;
float: left;
max-width: 100%;
}
#search,
#translations {
padding-left: .8em;
}
#search input[type="image"] {
background-color: transparent;
border: 0;
margin-top: 10px;
vertical-align: middle;
}
#search input[type="text"] {
width: 70%;
padding: 5px 8px 5px 30px;
}
#search p {
margin: 0;
}
#translations ul {
font-size: 90%;
padding-left: 0;
}
#translations ul li {
list-style: none;
line-height: 120%;
}
/* fundraising box */
#fundraising {
min-height: 75px;
margin: 0 0 2em;
padding: 0 0 0 1em;
font-family: "Helvetica", "Verdana", sans-serif;
background: url("/graphics/xmas-fr-bg.png") no-repeat top right;
border: 1px solid rgb(128,0,0);
padding: .6em 1em .6em 1em;
overflow: hidden;
}
#fundraising h2 {
color: rgb(157,0,0);
font-weight: bold;
margin: 0.3em 1em 0.3em 0;
float: left;
}
#fundraising .button {
float: left;
margin: 0.5em 0.5em 0 0;
}
#fundraising .button a {
padding: 0.2em 0.4em;
font-size: 1.5em;
color: white;
font-weight:bold;
float:left;
display:block;
background: url('/graphics/xmas-fr-button-bg.png') repeat-x bottom left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
#fundraising .button a:hover {
box-shadow: 0 0 15px rgb(157,0,0) inset;
-moz-box-shadow: 0 0 15px rgb(157,0,0) inset;
-webkit-box-shadow: 0 0 15px rgb(157,0,0) inset;
}
#fundraising img {
margin: 0;
}
#fundraising p {
clear: left;
float: left;
font-size: 1.6em;
margin: 0 0 0.3em 0;
}
#fundraising div.percentbox {
margin: 1em 0 .5em 0;
border: 1px solid rgb(32,45,121);
background-color: rgb(74,210,240);
}
#fundraising div.percentbar {
height: 1em;
background-color: rgb(51,148,206);
}
#fundraising p.current {
float: left;
margin: 0;
text-align: left;
}
#fundraising p.target {
margin: 0;
text-align: right;
}
/* ------------------------------------------------------------------------- */
/* Content */
/* ------------------------------------------------------------------------- */
/* content specific */
#content {
clear: right;
float: left;
min-height: 400px;
width: 78%;
font-size: 120%;
overflow: hidden;
}
#content #frontpage {
font-size: 90%;
}
#content p#category {
font-size: 170%;
font-weight: bold;
line-height: 120%;
margin: 0 0 .3em;
}
#content .highlight {
/* Used in: order/promopack.*.xhtml*/
border-width: 2px;
border-style: dotted;
border-color: rgb(107,200,0);
background-color: rgb(194,255,128);
padding: .5em;
}
h1,
h2,
h3 {
color: rgb(32,45,121);
line-height: normal;
}
h1 {
border-bottom: 1px solid rgb(210,210,210);
font-size: 250%;
margin: 0;
padding: 0 0 0.5em;
}
h2 {
margin-top: 1.5em;
}
h3 {
font-size: 140%;
margin: 1.5em 0 .2em 0;
}
.margin-vertical {
margin: 1em 0;
}
.image {
float: left;
}
.image.right {
float: right;
padding: 0 0 2em 2em;
}
.image > img + * {
border-bottom: 1px solid rgb(210,210,210);
border-left: 1px solid rgb(210,210,210);
border-right: 1px solid rgb(210,210,210);
font-size: 90%;
margin-top: -6px;
padding: .5em;
}
.image .photographer {
font-size: 80%;
display: block;
font-style: italic;
text-align: right;
}
.imgright { /* compatibility */
float: right;
margin: 0 0 1em 1em;
}
.captioned {
padding: .5em;
border: 1px solid rgb(210,210,210);
margin: 1em;
text-align: center;
}
.captioned p {
padding: 0.5em 0.5em 0 0.5em;
margin: 0;
border-top: 1px solid rgb(220,220,220);
color: #666;
}
.postit { /* compatibility */
float: left;
margin: 0 1em 1em 0;
border: 1px black solid;
padding: .3em;
width: 14em;
background: rgb(255,236,191);
text-align: center;
}
t.fineprint { /* compatibility */
color: rgb(120,120,120);
font-size: 90%;
border-top: 1px solid rgb(220,220,220);
padding: 1em .5em;
margin: 3em -.5em 1em;
}
.toolbox { /* compatibility */
background-color: rgb(244,248,250);
float: right;
font-size: 85%;
margin: .5em 0 0 1em;
padding: 1em;
width: 12em;
}
.related {
border: 1px solid rgb(74,160,240);
padding: 0.3em;
margin: 2em 0 0 0;
border-radius: 5px 5px 5px 5px;
}
.related h2 {
background-color: rgb(75,160,240);
color: white;
font-size: 1.3em;
margin: 0 0 0.5em 0;
padding: 0 0.5em;
text-align: center;
border-radius: 5px 5px 5px 5px;
}
p.terminal,
pre.terminal,
p.file,
pre.file {
font-family: monospace;
padding: .5em 1em;
}
p.terminal,
pre.terminal {
background-color: rgb(50,50,50);
border-left: 10px solid rgb(97,97,97);
color: white;
}
p.file,
pre.file {
background-color: rgb(244,248,250);
border-left: 10px solid rgb(141,172,190);
color: rgb(50,50,50);
}
#introduction {
border-bottom: 1px solid rgb(210,210,210);
float: left;
font-size: 120%;
margin: 0 -.5em 2em -.5em;
min-height: 60px;
padding: 1em .5em;
width: 100%;
}
#introduction img {
margin: 0;
padding: 0 1em 0 0;
}
#introduction p,
p#introduction {
line-height: 190%;
}
#introduction + * {
clear: left;
}
/*
* This expands #introduction until all content has been printed, so it
* doesn't flow outside of the element.
*/
#introduction p::after {
content: "";
clear: both;
height: 1px;
overflow: hidden;
}
#introduction .image {
margin: .5em;
padding-bottom: 0;
}
#introduction .read_more {
margin: 0 -1em;
padding: 0 1em 1em 0;
text-align: right;
}
/* ------------------------------------------------------------------------- */
/* Form Label
/* ------------------------------------------------------------------------- */
/* Used in: orders/promopack.*.xhtml
activities/nordic-free-software-award/...
*/
.labeledform .formlabel {
font-weight: bold;
display: inline-block;
text-align: right;
vertical-align: top;
width: 30%;
}
.labeledform textarea,
.labeledform select {
display: inline-block;
}
/* ------------------------------------------------------------------------- */
/* Subpages menu */
/* ------------------------------------------------------------------------- */
h2#subpages,
h3#subpages,
h4#subpages {
display: none;
}
h2#subpages.show-heading,
h3#subpages.show-heading,
h4#subpages.show-heading {
display: block;
}
ul#subpages,
h2#subpages + ul,
h3#subpages + ul,
h4#subpages + ul {
margin: 2em 0 2em 0;
list-style-type: none;
padding: 0 1em;
}
ul#subpages li,
h2#subpages + ul li,
h3#subpages + ul li,
h4#subpages + ul li {
float: left;
margin-bottom: .1em;
min-width: 8em;
padding-right: 3%;
width: 47%;
}
ul#subpages li:nth-child(odd),
h2#subpages + ul li:nth-child(odd),
h3#subpages + ul li:nth-child(odd),
h4#subpages + ul li:nth-child(odd) {
clear: left;
}
/* navigation sidebar */
#navigation {
background-color: rgb(74,210,240);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 28px;
font-size: 105%;
font-weight: bold;
}
#navigation,
#navigation a,
#navigation #search {
color: rgb(244,254,255);
text-decoration: none;
}
#navigation ul#menu {
float: left;
list-style: none;
}
#navigation ul#menu li {
float: left;
}
#navigation ul#menu li a {
display: block;
padding: 5px 18px;
}
#navigation ul#languages {
background-color: rgb(74,210,240);
float: left;
width: 120px;
text-align: center;
padding: 5px 10px 3px 10px;
}
#navigation ul#languages li {
display: none;
}
#navigation ul#languages li a {
display: block;
border-bottom: 1px dotted white;
}
#navigation ul#languages li:first-child a,
#navigation ul#languages li:last-child a {
border-bottom: 1px solid transparent;
}
#navigation ul#languages:hover li:first-child {
border-bottom: 1px dotted white;
}
#navigation ul#languages:hover li:first-child a {
font-weight: bold;
}
#navigation ul#languages li a:hover {
color: white;
font-weight: normal !important;
}
#navigation ul#languages li.selected {
display: block;
}
#navigation ul#languages li.selected a {
font-weight: normal;
}
#navigation ul#languages:hover li {
display: block;
}
#navigation #search {
float: right;
margin: 4px 3px 0 0;
}
#navigation #search input {
font-size: 95%;
padding: 2px;
}
#navigation #search input:focus {
border-color: inherit;
}
#navigation #search input[type=submit] {
margin-left: -20px;
position: absolute;
border: 0;
padding: 0;
border-left: 1px dotted rgb(130,130,130);
width: 20px;
height: 20px;
}
/* sidebar */
#sidebar {
clear: left;
float: left;
line-height: 100%;
width: 19%;
min-width: 125px;
word-wrap: break-word;
padding: 0 1em 0 0;
}
/* menu */
#menu {
/* margin: 220px 0 0 -15px;*/
margin-left: -15px;
}
#menu a {
color: rgb(110,110,110);
text-decoration: none;
display: block;
padding: 0.8em 0 0.8em 0.8em;
line-height: 120%;
font-size: 15.5px;
}
#menu a:hover {
color: rgb(80,80,80);
}
#menu ul {
list-style: none;
/* margin: -220px 0 0 0;
padding: 220px 0 0 0;*/
padding: 0;
border-left: 15px solid rgb(240,240,240);
}
#menu ul li {
margin-lefT: -15px;
}
#menu ul li a {
font-weight: bold;
white-space: nowrap;
}
#menu ul + ul {
border: 0;
}
#menu ul li ul li {
margin: 0;
}
#menu ul li ul li a {
font-weight: normal;
padding: .3em 0 .4em 1.6em;
}
#menu ul li.fsfe ul li a,
#menu ul li.fellowship ul li a,
#menu ul li.support ul li a,
#menu ul li.planet ul li a,
#menu ul li.wiki ul li a {
font-weight: normal;
}
#menu ul li.fsfe ul li a:hover,
#menu ul li.fellowship ul li a:hover,
#menu ul li.support ul li a:hover,
#menu ul li.planet ul li a:hover,
#menu ul li.wiki ul li a:hover {
background-color: white;
}
#menu ul li ul { /* submenu */
border-left: none;
font-size: 120%;
}
#menu ul li.fsfe a {
border-left: 15px solid rgb(74,210,240);
}
#menu ul li.fsfe ul li a {
border-left: 15px solid rgb(214,234,245);
}
#menu ul li.fsfe ul li a:hover {
border-left: 15px solid rgb(178,241,255);
}
#menu ul li.planet a {
border-left: 15px solid rgb(112,208,85);
}
#menu ul li.planet ul {
display: none;
}
#menu ul li.planet ul li a {
border-left: 15px solid rgb(220,220,220);
}
#menu ul li.planet ul li a:hover {
border-left: 15px solid rgb(74,160,240);
}
#menu ul li.wiki a {
border-left: 15px solid rgb(173,255,84);
}
#menu ul li.support a {
border-left: 15px solid rgb(74,160,240);
}
#menu ul li.support ul {
display: none;
}
#menu ul li.fellowship a {
border-left: 15px solid rgb(107,200,0);
}
#menu ul li.fellowship ul li a {
border-left: 15px solid rgb(220,220,220);
}
#menu ul li.fellowship ul {
display: none;
}
#menu ul li.fellowship ul li a:hover {
border-left: 15px solid rgb(171,255,74);
}
#menu ul li ul li #selected,
#menu ul li ul li #selected:hover {
border-left: 15px solid rgb(193,193,193);
color: rgb(51,51,51);
display: block;
font-size: 15.5px;
font-weight: normal;
line-height: 50%;
padding: .6em 0 .8em 1.6em
}
.section {
width: 47.9%;
float: left;
padding: 0 .8%;
}
.section .entry h3 {
margin: 1.5em 0 .2em;
}
.section .entry p.date {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: bold;
color: rgb(110,110,110);
}
.section h2 {
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border: 0 none;
color: black;
float: right;
font-size: 130%;
font-weight: normal;
letter-spacing: normal;
line-height: normal;
margin: 1.5em -1.7% 1em;
padding: 0 .3em .1em .2em;
min-height: 1.6em;
text-align: right;
width: 100%;
color: white;
}
.section.grid-100 h2 {
margin: 1.5em 0 1em;
padding: 0 0 .1em 0;
}
.section h2 a, .section h2 span {
color: white;
float: right;
padding: .2em .6em .2em 0;
}
.section .entry form {
float: left;
}
.section.grid-100 {
width: 100%;
padding: 0;
}
#news.section,
#identica.section {
margin-right: .5em;
}
#news.section h2,
#donate-once.section h2 {
background-color: rgb(74,210,240);
}
#newsletter.section h2,
#donate-regular.section h2 {
background-color: rgb(127,223,85);
}
.section ul {
clear: left;
}
#events.section h2 {
background-color: rgb(74,160,240);
}
#team.section h2, #identica.section h2 {
background-color: rgb(127,223,85);
}
#contact.section h2 {
background-color: rgb(189,228,85);
}
#identica.section .entry div {
float: left;
}
#identica.section h3, #identica.section h4 {
display: none;
}
#newsletter #language {
min-width: 7em;
width: 30%;
margin: 0 2% 0 0;
}
#newsletter #email {
width: 38%;
margin: 0 2% 0 0;
}
#newsletter #submit {
min-width: 6em;
}
.section a.rss-feed,
.section a.ical {
display: block;
float: left;
height: 20px;
margin: 0.3em 0 0 0.2em;
padding: 0;
width: 20px;
}
/* footer */
#footer {
font-size: 90%;
line-height: 140%;
padding: 1em 0;
clear: both;
margin: 0 4em 2em 15px;
max-width: 980px;
min-width: 500px;
min-height: 8em;
color: rgb(140,140,140);
}
#footer a {
color: rgb(100,100,100);
}
#footer #notice {
float: left;
margin-right: 10%;
width: 50%;
}
#footer #notice > p {
margin-top: 0;
}
#footer #notice ul {
list-style: none;
padding: 0;
}
#footer #notice ul li {
display: inline;
margin-right: .8em;
}
#footer #sister_organizations {
float: right;
width: 40%;
}
#footer #sister_organizations h2 {
font-size: 100%;
margin-top: 0;
color: rgb(120,120,120);
border: 0;
padding: 0;
}
#footer #sister_organizations ul {
list-style: circle;
}
/* news and events */
#events .date .day {
font-size: 220%;
display: block;
padding-bottom: .3em;
}
#events .date.multiple p {
margin: 0;
color: rgb(190,190,190);
}
#events .date.multiple .day {
font-size: 150%;
}
#events .date.multiple .month {
font-size: 90%;
}
#events .date .month {
font-size: 140%;
}
#events .details {
}
#events .details > p {
margin-top: 0;
}
/*#frontpage .entry {*/
/* margin-bottom: 3em;*/
/*}*/
/* announcement */
#announcement {
min-height: 8em;
text-align: center;
margin-bottom: 2em;
}
#announcement img {
float: none;
margin: 0;
}
/* advocacy pages */
.copyable-code {
clear: both;
margin: 1.5em 0;
}
/* item-grid (used for shop/orders) */
.item-grid h2 {
border-bottom: 1px solid rgb(204,204,204);
margin-bottom: 0;
}
#content .item-grid .image {
padding: 2em;
}
/* Footnotes */
h2#fn {
display: none;
}
h2#fn + ol {
border-top: 1px solid rgb(204,204,204);
font-size: 90%;
margin-top: 3em;
padding-top: .5em;
width: 30%;
}
h2#fn + ol li {
width: 300%;
}
a.fn {
bottom: .5em;
font-size: 70%;
position: relative;
}
/* Front page */
#campaigns-boxes {
overflow: hidden;
}
#campaign-box-1 {
/* border: 2px solid #AFAFAF; */
border-radius: 7px;
float: left;
height: 200px;
overflow: hidden;
/* padding: 5px; */
width: 67%;
position: relative;
}
#campaign-box-1 img {
float: left;
margin-right: 10px;
}
#campaign-box-1 p {
margin: 0px;
overflow: hidden;
line-height: 19px;
font-size: 15px;
color: rgb(50,50,50);
}
#campaign-box-1 #our-work {
position: absolute;
bottom: 0;
right: 5px;
}
#campaign-box-1 h3 {
font-size: 2.2em;
margin: 0;
}
#campaign-box-1 h3 a {
color: black;
display: block;
font-family: "Lucida Sans", sans-serif;
font-weight: normal;
padding: 1em 0 0 1em;
text-shadow: 0 0 .2em white, 0 0 .2em white, 0 0 .2em white;
width: 50%;
}
#campaign-box-1 h3 a:hover {
text-decoration: underline;
}
#campaign-box-2 {
width: 31%;
float: right;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#campaign-box-2 p {
margin: 0;
padding: 0;
}
#campaign-box-3 {
-moz-border-radius: 7px 7px 7px 7px;
background-color: silver;
float: left;
min-height: 45px;
margin: 1.5em 0 0 0;
width: 100%;
display: none;
}
#campaign-box-4 {
float: left;
margin: 1.5em 0 0;
width: 98.7%;
text-align: center;
}
#campaign-box-4 p {
margin: .5em 0;
font-size: 110%;
}
#campaign-box-4 p a {
color: rgb(82,97,0);
}
#campaign-box-5 {
width: 92%;
margin: 0 auto;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
#front-page-introduction {
font-size: 135%;
}
#front-page-introduction p {
margin-bottom: 0;
}
.banner-border {
border: 4px solid rgb(224,248,89);
border-radius: 7px;
}
.donate-box, .fellowship-box, .support-box {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
display: block;
font-size: 1.8em;
height: 94px;
line-height: 400%;
text-align: center;
}
#campaign-box-2 .donate-box {
color: rgb(51,148,206);
-moz-box-shadow: inset 0 0 2px rgb(0,34,43);
-webkit-box-shadow: inset 0 0 2px rgb(0,34,43);
box-shadow: inset 0 0 2px rgb(0,34,43);
margin: 0 0 12px;
background: url("/graphics/donate-button-bg.png") no-repeat top left;
}
#campaign-box-2 .donate-box:hover, #campaign-box-2 .fellowship-box:hover, #campaign-box-2 .support-box:hover {
text-decoration: none;
}
#campaign-box-2 .donate-box:hover {
color: rgb(42,123,173);
-moz-box-shadow: inset 0 0 6px rgb(0,34,43);
-webkit-box-shadow: inset 0 0 6px rgb(0,34,43);
box-shadow: inset 0 0 6px rgb(0,34,43);
}
#campaign-box-2 .fellowship-box, #campaign-box-2 .support-box {
color: rgb(112,208,85);
-moz-box-shadow: inset 0 0 2px rgb(23,40,11);
-webkit-box-shadow: inset 0 0 2px rgb(23,40,11);
box-shadow: inset 0 0 2px rgb(23,40,11);
background: url("/graphics/join-button-bg.png") no-repeat top left;
}
#campaign-box-2 .fellowship-box:hover, #campaign-box-2 .support-box:hover {
color: rgb(93,172,70);
-moz-box-shadow: inset 0 0 6px rgb(23,40,11);
-webkit-box-shadow: inset 0 0 6px rgb(23,40,11);
box-shadow: inset 0 0 6px rgb(23,40,11);
}
/* Boxe for aside paragraph or information see /campaigns/generalpurposecomputing/secure-boot-analysis.en.html for example */
.aside-box {
width:34%;
padding:0.5em 1.5em;
margin: 1.5em;
z-index:3;
/*font-size:90%;*/
line-height:120%;
/*background-color: rgba(214,234,245,0.8);*/
background-color:#F7FFCC;
color: #202D79;
border:1px solid #FFF;
border-radius:.5em;
box-shadow:3px 2px .5em rgba(0,0,0,0.1);
}
.aside-box.right {
margin-right:1em;
}
.aside-box h2 {
margin: 0;
padding:0;
}
.box h2 {
font-size:140%;
margin-top:0.75em
}
.box h3 {
font-size:120%;
margin-top:0.5em
}
/* Nice buttons */
.button {
padding: 5px 20px 6px;
font-size: 120%;
font-weight: bold;
margin-right: 1em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
cursor: pointer;
}
.button .icon {
margin-bottom: -5px;
margin-left: 8px;
display: inline-block;
background-repeat: no-repeat;
background-image: url("");
width: 18px;
height: 19px;
}
.button.green {
color: white;
background: rgb(78,166,27);
background: -webkit-gradient(linear, left top, left bottom, from(rgb(112,206,49)), to(rgb(43,106,10)));
background: -moz-linear-gradient(top, rgb(112,206,49), rgb(43,106,10));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70CE31", endColorstr="#2B6A0A");
}
.action {
margin: 1.5em 0 1em 0;
}
.action a:link, .action a:visited {
padding: .8em 1em;
height: 2em;
white-space: nowrap;
color: #444;
font-size:.9em;
font-weight: 700;
background: rgba(245,245,245,1);
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
box-shadow: 0 3px 3px -2px rgba(0,0,0,0.15);
}
.action a:hover {
border-color: rgb(74,160,240);
box-shadow: 0 3px 3px -2px rgba(0,0,0,0.3);
text-decoration:none;
}
.action a:active {
border-color: rgba(0,0,0,0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
/* Overview pages */
ul.overview {
list-style-type: none;
margin: 0;
margin-bottom: 1em;
padding: 0;
padding-right: 1.5%;
float: left;
width: 44%;
}
ul.overview-horizontal {
float: left;
list-style-type: none;
margin: 0 0 1em 0;
padding: 0;
}
ul.overview-horizontal li {
float: left;
width: 44%;
padding: 0 1.5% 0 0;
}
ul.overview-horizontal h3 {
margin: 0 0 0.2em 0;
}
ul.overview-horizontal li img.inline {
float: left;
margin: 0 1.2em 0 0;
padding: 0;
max-width: 40%;
}
/* Article pages */
#article-metadata {
color: rgb(150,150,150);
margin: 0.5em 0;
}
#article-metadata p {
margin: 0;
}
#article-metadata a {
/* color: rgb(50,50,50);*/
}
/*#article-metadata span.label {*/
/* padding: 0 .5em 0 0;*/
/* margin-left: 1em;*/
/*}*/
/*#article-metadata span.label:first-child {*/
/* margin-left: 0;*/
/*}*/
.social-link { /*Flattr and Supporter*/
float: right;
margin-top: 7px;
margin-right: 4px;
}
#article-metadata img {
height:24px;
margin:.2em;
margin-bottom: -0.2em;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
#article-metadata a.author {
padding-right:.7em;
}
#article-metadata a.author:last-child {
padding-right:0;
}
#article-attachmt {
float: right;
margin-top: -3em;
}
/* creative commons license info footer */
#legal, #cc-licenses {
float:left;
padding:10px;
background-color: #cdcdcd;
width: 96%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 25px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
}
#legal img, #cc-licenses img {
float: left;
margin: 0 15px 0 0;
}
#legal p, #cc-licenses p {
color: #5D5D5D;
float: left;
line-height: 1.3em;
margin: 0;
padding: 0;
}
#legal a {
color: #5D5D5D;
}
/*for consistency, it looks like .people img */
img.author-avatar {
margin: 0px 0.5em 0px 0px;
}
/* identica feed */
#identica-feed {
float: right;
width: 29%;
font-size: 90%;
line-height: 110%;
overflow: auto;
height: 150px;
}
#identica-feed .name,
#identica-feed .date {
display: block;
}
#identica-feed .name {
float: left;
font-weight: bold;
}
#identica-feed .date {
text-align: right;
}
#identica-feed p {
clear: left;
}
#identica-feed img {
height: 16px;
width: 16px;
vertical-align: middle;
}
#identica-feed li {
list-style: none;
margin-bottom: .5em;
border-bottom: 1px solid rgb(210,210,210);
padding-bottom: .5em;
}
/* tables */
table {
border-collapse: collapse;
margin-bottom: 1em;
font-size: 100%;
table-layout: fixed;
width: 100%;
}
table th,
table td {
padding: .2em .5em;
}
table th + th,
table td + td {
border-left: 1px solid rgb(204,204,204);
}
table th {
border-bottom: 1px solid rgb(32,45,121);
border-top: 1px solid rgb(32,45,121);
color: rgb(32,45,121);
background-color: rgb(244,248,250);
}
table td {
border-bottom: 1px solid rgb(204,204,204);
word-wrap: break-word;
}
table.restricted-width {
max-width: 200px; /* to fix pdfreaders buglist page problems */
}
table td.positive {
background-color: rgb(208,255,208);
}
table td.negative {
background-color: rgb(255,208,208);
}
table.noborders td,
table.noborders th {
border: 0;
}
tr.highlighted {
background-color: rgb(208,244,0);
}
/* notices */
.warning {
border-width: 1px;
border-style: solid;
padding: .5em;
margin: 0 0 1.5em 0;
}
.red {
background-color: rgb(255,220,220);
border-color: rgb(253,59,59);
color: rgb(132,78,78);
}
.yellow {
background-color: rgb(255,245,220);
border-color: rgb(253,195,59);
color: rgb(132,78,78);
}
.green {
background-color: #F7FFC8;
border-color: green;
color: #0A3100;
}
/* service notice, can i.e. be used for website downtime */
#service-notice {
position: fixed;
background-color: rgb(51,148,206);
border-bottom: 1px solid rgb(41,138,196);
font-size: 90%;
color: white;
line-height: 120%;
opacity: .8;
width: 100%;
}
#service-notice h1 {
font-size: 130%;
margin: 0 0 .5em 0;
font-weight: bold;
}
#service-notice p {
margin: .4em 0;
}
#service-notice a:link,
#service-notice a:visited {
color: rgb(214,234,245);
}
#service-notice .text {
padding: .6em 2em;
}
#service-notice .close {
margin: 1em 2em 0 0;
float: right;
}
#service-notice .close a {
background-color: rgb(137,226,245);
border: 2px solid rgb(51,148,206);
padding: .2em .4em;
font-size: 180%;
font-weight: normal;
cursor: pointer;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
#service-notice .close a:link,
#service-notice .close a:visited {
color: rgb(51,148,206);
}
#service-notice .close a:hover,
#service-notice .clsoe a:active {
color: rgb(32,45,121);
}
table#patrons td {
padding: 1em!important;
}
table#patrons td:first-child {
text-align: center;
}
table#patrons td img {
max-height: 90px;
}
/* People pages */
#show-people h2 {
clear: both;
}
.people img, img.author-avatar {
float: left;
margin: 5px 10px 10px 0px;
width: 48px;
height: 48px;
border: 1px solid rgb(50,50,50);
box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
ul.people {
list-style-type:none;
}
ul.people li {
display: block;
float: left;
width: 48%;
min-width: 20em;
padding-right: .5em;
}
ul.people li:nth-child(odd) {
clear: left;
}
ul.people li:last-child {
margin-bottom: 1.5em;
}
.people .name, .people .email {
display: block;
}
.people .name {
font-weight: bold;
}
.people .email {
font-style: italic;
}
.employee {
line-height: 0.8em;
margin-left: 0.5em;
padding: 0.3em 0.4em;
border-radius: 5%;
display: inline-block;
}
.employee.full, .employee.intern {
background-color: rgb(190, 245, 190);
}
.employee.part {
background-color: rgb(228, 247, 228);
}
.employee.freelancer {
background-color: rgb(239, 242, 251);
}
/* Testimonials divs */
.testimonial {
overflow: auto;
clear: both;
}
.testimonial img {
float: left;
margin-right: 10px;
}
/* address div */
address {
margin: .8em 0; /* should be the same as for <p> */
}
/* fieldsets - remove that ugly border */
fieldset {
border: medium none;
}
/* AskYourCandidates - parties colors for their answers */
.question {
margin-bottom: 15px;
margin-top: 60px;
}
.answer,
.question2,
.answer2 {
padding: 0.5em 1em;
text-align: justify;
}
.question2 {
margin-left: 1em;
}
.answer2 {
margin-left: 2em;
}
.colorless {
background-color: rgb(238,238,238);
border-left: 10px solid rgb(170,170,170);
}
/* Germany */
.diegrüne {
background-color: rgb(200,255,200);
border-left: 10px solid rgb(0,139,0);
}
.cdu {
background-color: rgb(180,230,255);
border-left: 10px solid rgb(0,79,122);
}
.spd {
background-color: rgb(255,200,200);
border-left: 10px solid rgb(255,0,0);
}
.dielinke {
background-color: rgb(255,198,255);
border-left: 10px solid rgb(139,28,98);
}
.piraten {
background-color: rgb(255,233,146);
border-left: 10px solid rgb(243,125,32);
}
.fdp {
background-color: rgb(255,255,200);
border-left: 10px solid rgb(255,255,0);
}
.oedp {
background-color: rgb(255,233,187);
border-left: 10px solid rgb(242,134,43);
}
.bayernpartei {
background-color: rgb(85,144,202);
border-left: 10px solid rgb(28,38,236);
}
.violetten {
background-color: rgb(124,62,139);
border-left: 10px solid rgb(210,0,255);
}
/* France */
.partisocialiste {
background-color: rgb(255,220,220);
border-left: 10px solid rgb(255,128,128);
}
.ump {
background-color: rgb(160,200,255);
border-left: 10px solid rgb(0,102,204);
}
.pcf {
background-color: rgb(255,200,200);
border-left: 10px solid rgb(221,0,0);
}
.prg, .mrc {
background-color: rgb(255,240,250);
border-left: 10px solid rgb(255,209,220);
}
.eelv {
background-color: rgb(200,255,200);
border-left: 10px solid rgb(0,255,0);
}
.nouveaucentre {
background-color: rgb(220,255,255);
border-left: 10px solid rgb(128,255,255);
}
.modem {
background-color: rgb(255,230,150);
border-left: 10px solid rgb(255,153,0);
}
.alliancecentriste {
background-color: rgb(255,235,200);
border-left: 10px solid rgb(245,222,179);
}
/* -------------------------------------------------------------------- */
/* Interviews */
/* -------------------------------------------------------------------- */
.interview-question {
font-style:italic;
font-weight:bold;
}
/* -------------------------------------------------------------------- */
/* Tags lists */
/* -------------------------------------------------------------------- */
ul.taglist {
text-align: center;
}
ul.taglist li {
display: inline;
margin: 5px;
white-space: nowrap;
}
.tag16 { font-size: 16; }
.tag17 { font-size: 17; }
.tag18 { font-size: 18; }
.tag19 { font-size: 19; }
.tag20 { font-size: 20; }
.tag21 { font-size: 21; }
.tag22 { font-size: 22; }
.tag23 { font-size: 23; }
.tag24 { font-size: 24; }
.tag25 { font-size: 25; }
.tag26 { font-size: 26; }
.tag27 { font-size: 27; }
.tag28 { font-size: 28; }
.tag29 { font-size: 29; }
.tag30 { font-size: 30; }
.tag31 { font-size: 31; }
.tag32 { font-size: 32; }
.tag33 { font-size: 33; }
.tag34 { font-size: 34; }
.tag35 { font-size: 35; }
.tag36 { font-size: 36; }
.tag37 { font-size: 37; }
.tag38 { font-size: 38; }
.tag39 { font-size: 39; }
.tag40 { font-size: 40; }
/* -------------------------------------------------------------------- */
/* events map */
/* -------------------------------------------------------------------- */
div.map {
width: 30%;
height: 150px;
float: right;
margin: 3px;
}
/* ------------------------------------------------------------------------- */
/* Support form */
/* ------------------------------------------------------------------------- */
#introduction.support_page > .image > img {
margin-bottom: 100px;
}
#support_form {
margin-left: 150px;
}
#support_form p {
clear: both;
}
.support input[type=email], .support input[type=text], .support select {
float: right;
width: 385px;
margin-right: 32px;
}
.support select {
width: 405px;
}
.support input[type=submit] {
float: right;
width: 215px;
margin: 12px 220px 64px 150px;
}
/* hack thing to make Firefox work */
.support input[type=button] {
float: right;
width: 245px;
margin: 12px 192px 64px 150px;
font-size: 100%;
padding: 0.5em;
}
.support label>label {
margin-left: 180px;
width: 385px;
display: block;
color: red;
}
#support_robotfield {
display: none;
}
#support_form_sent {
margin: 18px 18px 18px 150px;
padding: 18px;
border: 2px solid #7FDF55;
}
#support_portal {
display: none;
margin-left: 150px;
}
/* ------------------------------------------------------------------------- */
/* Created with Free Software buttons */
/* ------------------------------------------------------------------------- */
img.cwfs-button {
border:none;
padding:2px;
background-color:#c0c0c0;
}
img.cwfs-button:hover {
background-color:#a0a0a0;
}
.cwfs textarea {
width: 94%;
}
/* ------------------------------------------------------------------------- */
/* Fellowship Quotebox */
/* ------------------------------------------------------------------------- */
div.quote {min-height: 170px;}
div.quote .img {width: 18%;}
div.quote .cont {width: 78%;}
div.quote .txt:before {content: open-quote;}
div.quote .txt:after {content: close-quote;}
div.quote .author {font-weight: bold}
div.quote .author:before {content: "— "}
div.quote .license {font-style: italic}
div.quote .license:before {content: " "}
#quote-box {
border: 1px solid #23350A;
clear: left;
float: left;
margin: 1em 0 0;
overflow: hidden;
padding: 0;
width: 99%;
height: 13em;
overflow: hidden;
}
#quote-box img {
max-height: 165px;
}
#quote-box p {
margin: 0;
padding: 0;
}
a.quote-box {
font-style: none;
color: rgb(50,50,50);
}
div.logo-list {
width: 100%;
float: left;
clear: left;
min-height: 90px;
padding: 5px;
}
div.logo-list .img {
float: left;
width: 28%;
padding-right: 1%;
}
div.logo-list .cont {
float: left;
width: 68%;
/* valign */
margin: auto 0;
}
div.logo-list img {
max-width: 100%;
max-height: 100%;
}