diff --git a/web/about-de.htm4 b/web/about-de.htm4
index e6123ea7..a740c2ee 100644
--- a/web/about-de.htm4
+++ b/web/about-de.htm4
@@ -1,159 +1,159 @@
m4_dnl -*-html-*-
m4_include(`template.m4')
m4_dnl $Id$
m4_define(`DE')
m4_define(`EN_FILE', `about.html')
m4_define(`about-de.html', `0')
m4_define(`TITLE', `Über Gpg4win')
m4_define(`MAIN', `about')
PAGE_START
Was ist Gpg4win?
Mit Gpg4win kann jeder E-Mails, Dateien und Datei-Ordner einfach und
kostenlos ver- und entschlüsseln, sowie ihre Integrität
(Unverändertheit) und Herkunft (Authentizität) mittels digitaler
Signaturen absichern und überprüfen.
Gpg4win unterstützt die beiden relevanten kryptografischen Standards
OpenPGP und S/MIME (X.509). Gpg4win ist die offizielle
GnuPG-Distribution für Windows und wird von den Entwicklern von GnuPG
gepflegt. Gpg4win und die darin enthaltenen Komponenten sind Freie
Software (OSS). Alle Dialoge sind vollständig in deutscher Sprache
verfügbar.
Gpg4win wurde beauftragt vom
Bundesamt für Sicherheit in der Informationstechnik (BSI).
Die Gpg4win-Kompenenten
Gpg4win ist ein Installationspaket für Windows und besteht aus
verschiedenen Freien Software Komponenten, die wahlweise
installiert werden können:
-
+
Systemvoraussetzungen
Die Systemvoraussetzungen werden hier
separat gepflegt.
Version 3 in 2017
Ein großer Schritt wurde September 2017
mit Version 3 getan.
Das Ziel der Gpg4win-Initiative
Die Gpg4win-Initiative hat das Ziel das
Gpg4win-Windows-Installationspaket für die Verschlüsselungssoftware
GnuPG sowie zugehörige Anwendungen kontinuierlich zu aktualisieren.
Insbesondere wird die Dokumentation (das
"Gpg4win-Kompendium") direkt von den Gpg4win-Machern gepflegt.
Ein weiteres zentrales Ziel ist die vereinigte Unterstützung
für die beiden relevanten kryptografischen Standards OpenPGP
und S/MIME.
Gpg4win ist ein internationales Projekt, aufgrund der Herkunft
des Projektes und vieler Beteiligter liegt eine
vollständige deutsche Übersetzung vor.
Der Hauptunterschied zu den bisherigen Ansätzen
(vor allem GnuPP, GnuPT, Windows Privacy Tools und GnuPG-Basics)
ist, dass zunächst der Gpg4win-Builder entwickelt wurde.
Dieser erlaubt es, sehr leicht neue gpg4win.exe-Installer
mit aktualisierten Komponenten herzustellen,
und zwar auf einem GNU/Linux System. Fast alle Produkte
werden dabei sogar automatisch per Cross-Compilation erstellt.
Damit verbindet sich die Hoffnung, der schnellen Alterung von Installer-Paketen
entgegenzuwirken, denn eine Aktualisierung wird deutlich einfacher
und hängt eben nicht von einer Einzelperson ab.
-Kurzstudie: Nachhaltige Freie Software
Kurzstudie: Nachhaltige Freie Software
Im Vorfeld der Beauftragung und Entwicklung von Gpg4win2 wurde
eine Kurzstudie zum Thema "Nachhaltige
Freie Software: Vom Projekt zur Dauertätigkeit am Beispiel
Gpg4win" verfasst.
Funktionen & Screenshots
Lesen Sie weiter und erfahren Sie mehr über die umfangreichen Funktionen
von Gpg4win. Einen ersten Eindruck bekommen Sie von den Screenshots.
diff --git a/web/about.htm4 b/web/about.htm4
index 58176dda..9c4cff9a 100644
--- a/web/about.htm4
+++ b/web/about.htm4
@@ -1,149 +1,149 @@
m4_dnl -*-html-*-
m4_include(`template.m4')
m4_dnl $Id$
m4_define(`EN')
m4_define(`DE_FILE', `about-de.html')
m4_define(`TITLE', `About Gpg4win')
m4_define(`MAIN', `about')
PAGE_START
What is Gpg4win?
Gpg4win enables users to securely transport emails and files
with the help of encryption and digital signatures. Encryption protects
the contents against an unwanted party reading it. Digital signatures
make sure that it was not modified and comes from a specific sender.
Gpg4win supports both relevant cryptography standards,
OpenPGP and S/MIME (X.509), and is the official GnuPG
distribution for Windows. It is maintained by the developers of GnuPG.
Gpg4win and the software included with Gpg4win
are Free
Software (Open Source; among other things free of charge for
all commercial and non-commercial purposes).
Creation of Gpg4win was supported by the German
Federal Office for Information Security (BSI).
Gpg4win Components
Gpg4win is an installer for Windows and contains several
Free Software components:
-
+
System Requirements
The system requirements are listed
seperately.
Major Version 3 came 2017
In September 2017, the major
Version 3 was released.
Aim of Gpg4win Initiative
The Gpg4win initiative aims to provide a current Gpg4win Windows installation
package including the GnuPG encryption tool and associated applications.
The documentation ("Gpg4win
Compendium") is maintained as part of the effort.
Another goal is to support OpenPGP and S/MIME in a unified way.
Gpg4win is an international effort. Due to the origins of the initiative
there is a full German translation.
Additional translators are
welcome!
A main achievement of Gpg4win is to focus on the builder,
which allows to easily create updated installers.
The builder runs best on a GNU/Linux system. Almost all software components
are automatically cross-compiled for integration into
the installer. Thus Gpg4win does not depend on a single
person to manually create the installer.
Short Study: Sustainable Free Software
Before Gpg4win2 was developed,
Jan-Oliver Wagner and Bernhard Reiter wrote a short study
about "Sustainable
Free Software: From project to permanent activity, using the example
Gpg4win".
Features & Screenshots
Read more about the features of Gpg4win.
Get a first impression of Gpg4win from the screenshots.
diff --git a/web/gpg4win.css b/web/gpg4win.css
index 9db1a3d2..c63816bf 100644
--- a/web/gpg4win.css
+++ b/web/gpg4win.css
@@ -1,1502 +1,1534 @@
/* Styles for the Gpg4win Website */
body {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
background: #FFFFFF url('img/page_bg.png') repeat-x;
color: #333333;
margin: 0px;
padding:0px;
}
a {
color: #b51a22;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: 0px;
}
.imageframe {
border-color: #DEDEDE #AAAAAA #888888 #CECECE;
border-style: double;
border-width: 1px;
padding: 5px;
}
.imgfloatleft {
float: left;
margin: 0px 20px 30px 0px;
+ max-width: 112px;
}
td {
vertical-align: top;
}
.odd td {
background: #E6E6E6;
}
.wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}
.language_select {
float:right;
height: 100%;
}
#menu-button, #menu-button-label{
display: none;
}
#header-logo{
display: none;
}
.logo {
margin-top: 20px;
margin-left: 15px;
}
.header {
padding: 6px 0 6px 0;
margin-bottom: 0px;
height: 1em;
}
.fancy_intro {
margin: 0 20px 25px 14px;
border-bottom:1px solid gray;
overflow: hidden;
width:870px;
padding-bottom: 15px;
display: flex;
}
#fancy_bg{
max-width: 450px;
height: auto;
}
#intro{
width: 600px;
}
.mini_intro {
clear: both;
font-size: 12px;
line-height: 38px;
margin-top: 8px;
}
#download-button-container{
margin-right: 20pt;
}
#download_button {
position: relative;
top: 45px;
width: 250px;
z-index: 0;
}
#download_button a {
background: url('img/download_button.png');
background-repeat: no-repeat;
display: block;
height: 116px;
width: 260px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 19px;
}
#download_button a:hover {
background-position: 0px -116px;
}
#download_button .text {
position: relative;
top: 23px;
left: 25px;
}
#breadcrum {
float:left;
}
#download_button_mini {
position: relative;
top: 45px;
left: 35px;
width: 250px;
z-index: 0;
}
#download_button_mini .links {
position: relative;
font-size: 10px;
text-align: right;
}
#download_button_mini .dmini_button {
background: url('img/download_button_mini.png');
background-repeat: no-repeat;
display: block;
height: 50px;
width: 189px;
text-align:left;
left: 20px;
font-size: 14px;
line-height:50px;
color: #FFFFFF;
font-weight:bold;
text-decoration:none;
}
#download_button_mini .dmini_button:hover {
background-position: 0px -50px;
}
#download_button_mini .text {
position: relative;
left: 12px;
}
.download_button_links {
font-size:11px;
position: relative;
display: flex;
left: 25px;
top: 43px;
width: 250px;
}
.donate_box {
border-radius: 4px;
background: #FDF1CD;
border: 1px solid #CCCCCC;
padding: 20px 20px 15px;
min-height: 365px;
}
.donate_box h3 {
margin: 0;
}
.donate_box #download_div {
margin-top: 15px;
}
#currencyfield {
font-size: 14px;
height: 30px;
}
.donateButton {
background: url('img/download-arrow.png') no-repeat 9px 9px;
background-size: 20px 20px;
padding-left: 36px;
padding-right: 10px;
font-size: 14px;
height: 40px;
border: 2px white;
border-radius: 4px;
text-align: center;
font-weight: bold;
text-decoration: none;
}
a>.donateButton{
margin-top: 40px;
}
.donate_box blockquote {
line-height: 150%;
}
.donate_box .pay-logo {
width: 100px;
}
.donate_box .qrcode {
width: 130px;
}
/* donation slider */
input[type='range'] {
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
background-color: #FFF;
height: 8px;
vertical-align: middle;
width: 200px;
cursor: pointer;
margin: 10px 0;
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
border-radius: 5px;
box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
background-color: #FFF;
height: 10px;
vertical-align: middle;
border: solid 1px rgba(0,0,0,0.25);
cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 10px;
background-color: #FFC35C;
box-shadow: inset 0px 1px 0px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
border-radius: 15px;
vertical-align:middle;
margin-top: -6px;
cursor: pointer;
}
input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
background-color: #FFF;
height: 8px;
border:solid 1px rgba(0,0,0,0.25);
vertical-align: middle;
margin: 0;
padding: 0;
cursor: pointer;
}
input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 10px;
background-color: #FFC35C;
box-shadow:inset 0px 1px 0px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
border-radius: 15px;
cursor: pointer;
}
/* With beta this needs other offsets. Maybe someone with
* more CSS skills could make this more relative / robust. ;-) */
.h_text_beta {
position: relative;
top: -190px;
left: 669px;
width: 180px;
font-size: 11px;
border-left: 1px solid #CCCCCC;
padding-left: 10px;
margin-top: 12px;
height: 220px;
}
.h_text_beta .heading {
font-size: 23px;
font-family: georgia, times, serif;
padding-bottom: 9px;
}
.h_text_beta .serif_word {
font-size: 13px;
font-weight: bold;
}
.h_text_beta .limiter {
border-bottom: 3px dotted #CCCCCC;
width: 190px;
height: 10px;
margin-bottom: 3px;
}
.h_text {
font-size: 11px;
border-left: 1px solid #CCCCCC;
padding-left: 10px;
margin-top: 12px;
height: 220px;
}
.h_text .heading {
font-size: 23px;
font-family: georgia, times, serif;
padding-bottom: 9px;
}
.h_text .serif_word {
font-size: 13px;
font-weight: bold;
}
.h_text .limiter {
border-bottom: 3px dotted #CCCCCC;
width: 190px;
height: 10px;
margin-bottom: 3px;
}
.center {
text-align: center;
}
.content {
width: 100%;
}
#intro {
padding: 0px 250px 20px 20px;
}
/*#intro span {
background: url('img/logo.png') no-repeat scroll 50px 0px transparent;
height: 56px;
margin: 0px;
width: 250px;
float: right;
margin: 0px;
line-height: 24px;
margin: 10px 200px 0 0;
}*/
#intro h2 {
font-family: georgia, times, serif;
font-size: 30px;
font-weight: normal;
color: #333333;
margin: 0px;
}
#intro p {
color: #555555;
font-size: 14px;
font-weight: normal;
line-height: 26px;
margin: 10px 0 0;
padding: 0;
}
.column1, .column2, .column3 {
display: inline;
float: left;
margin-right: 25px;
position: relative;
width: 270px;
}
.column3 {
margin-right: 0px;
}
.column1 img, .column2 img, .column3 img {
width: 270px;
}
#main {
padding: 0px 0px 0px 20px;
width: 600px;
}
#full {
float: left;
padding: 0px 20px 0px 20px;
width: 860px;
}
#main h2, #full h2 {
font-size: 22px;
font-weight: normal;
color: #333333;
margin: 30px 0px 10px 0px;
padding: 0px;
clear: both;
}
#main h4, #full h4 {
font-size: 18px;
color: #333333;
font-family: georgia, serif;
font-style: italic;
font-weight: normal;
}
#main p, #full p, #main li, #full li{
color: #444444;
line-height: 20px;
margin: 0px 0px 10px;
}
.lineheight {
line-height: 20px;
}
.cleanlist li {
font-size: 13px;
list-style: none;
padding: 0px;
clear: both;
}
.screenshots img {
width: 250px;
}
#sidebar {
-moz-border-radius: 10px 10px 10px 10px;
background: #FDF1CD;
border: 1px solid #CCCCCC;
float: right;
margin-top: 34px;
padding: 20px 20px 15px;
width: 220px;
}
#sidebar h3 {
color: #333333;
margin: 1px 0px 10px 0px;
}
#sidebarsimple {
float: right;
margin-top: 34px;
}
.newslist {
margin: 0px;
padding: 0px;
}
.newslist li {
font-size: 13px;
list-style: none;
padding: 0;
border-bottom: 1px solid #EFEFEF;
}
.newslist > li > a {
/*color: #555555;*/
display: block;
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0px;
padding: 10px 0px 10px 0px;
text-decoration: none;
}
.newslist li p {
color: #777777;
font-size: 10px;
font-weight: normal;
margin: 4px 0px 0px;
padding: 0px;
}
#menu {
height:45px;
z-index: 1;
}
#menu .active a {
background-position: 0px -180px;
}
#menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#menu li {
float: left;
margin-right: 0px;
margin-left:0px;
padding: 0px;
text-align: center;
}
#menu .mlogo {
border:0px;
}
#menu .mlogo a {
display:block;
/* With what's new shield */
width: 161;
/* Without shield
width: 307px
*/
height: 58px;
position: relative;
top: -13px;
background: url('img/inmenulogo.png');
background-position: 0px -116px;
}
#menu .mlogo a:hover {
background: url('img/inmenulogo.png');
/* With what's new shield */
background-position: 0px -58px;
/* Without shield
background-position: 0px -174px */;
}
#menu .mwhatsnew {
border:0px;
line-height: 2em;
}
#menu .mwhatsnew a {
display:block;
width: 110px;
height: 77px;
position: relative;
top: -9px;
background: url('img/whatsnew.png');
line-height: 34px;
}
#menu .mwhatsnew a:hover {
background: url('img/whatsnew.png');
background-position: 0px -77px;
}
#menu .mwhatsnew div {
padding-top: 10px;
line-height: 24px;
}
#menu .mbetween {
border:0px;
}
#menu .mbetween a {
display:block;
width: 36px;
height: 58px;
position: relative;
top: -13px;
background: url('img/inmenulogo.png');
background-position: -100px 0px;
}
#menu .mbetween a:hover {
background: url('img/inmenulogo.png');
background-position: -100px -58px;
}
#menu .last {
width:40px;
height: 45px;
background: url('img/last.png');
}
#menu .mdonate a {
display: block;
width: 148px;
height: 45px;
float:right;
background: url('img/inmenudownload.png');
color: #FFFFFF;
text-indent: -10px;
}
#menu .mdonate a:hover {
background: url('img/inmenudownload.png');
background-position: 0px -45px;
}
#menu li a {
background: #CCCCCC url('img/menubar.png') 0px -90px;
color: #2A2A2A;
line-height: 45px;
width: 148px;
display: block;
text-decoration: none;
font-weight: bold;
font-size: 11px;
height: 45px;
overflow: hidden;
}
#menu li a:hover {
background: #FFFFFF url('img/menubar.png') 0px -135px;
color:#FFFFFF;
}
#menu ul li ul {
width: 201px;
list-style: none;
position: absolute;
display: none;
}
#menu ul li ul li,
#menu .active ul li ul li {
width: 148px;
}
#menu ul li .subcap {
background: url('img/sub_tail.png');
display: block;
width: 149px;
height: 5px;
}
#menu ul li ul li a,
#menu .active ul li ul li a {
background: url('img/sub_bg.png');
line-height: 25px;
width: 142px;
height: 22px;
font-weight: normal;
color: #2A2A2A;
text-align: left;
display: block;
padding-left: 5px;
border-left: 1px solid #8B7E57;
border-right: 1px solid #8B7E57;
}
#menu ul li ul li a:hover,
#menu .active ul li a:hover {
background: #FBCA4C;
color: #2A2A2A;
text-decoration: none;
font-weight: bold;
}
#menu li:hover ul ul,
#menu li:hover ul ul ul {
display: none;
}
#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul {
display: block;
z-index:3;
}
.donate_header {
display: block;
position: relative;
top: -80px;
height: 180px;
background: url('img/heart.png') no-repeat;
background-position: 550px 10px;
font-size: 26px;
border-bottom: 1px solid #CCCCCC;
margin-bottom: -70px;
z-index: -100;
}
.donate_header .text {
position:relative;
left: 180px;
top: 40px;
text-align:center;
}
.donate_header b {
color: #D50D35;
}
.download_header {
height:160px;
background: url('img/download_bg.png') no-repeat;
background-position: 690px 10px;
font-size:26px;
border-bottom: 1px solid #CCCCCC;
margin-bottom:8px;
}
.download_header .text {
position:relative;
left: 120px;
top: 40px;
text-align:center;
}
.download_header b {
color: #D50D35;
}
.dlbutton2 a {
background-color: #6AC221;
border-radius: 10px 10px 10px 10px;
display: block;
font-size: 150%;
font-weight: bold;
margin: 10px 20px 0 0;
padding: 10px;
text-align: center;
color: #FFFFFF;
}
.dlbutton2 a:hover {
background: #81C72B;
text-decoration: none;
}
.dlbutton2 img {
float:right;
position: relative;
right: 45px;
top: 8px;
}
.version {
color: #FFFFFF;
font-size: 75%;
font-weight: normal;
}
#footer {
background: #EBEBEB url('img/page_bg.png') repeat-x;
font-size: 11px;
padding-bottom: 20px;
color: #333333;
text-align: center;
margin-top: 30px;
height: 22em;
width: 100%;
}
#sitemap {
margin: auto;
width: 900px;
text-align: left;
}
#sitemap ul {
list-style:none;
float: left;
width: 130px;
margin-left: 20px;
padding: 0px;
}
#sitemap li {
font-size: 12px;
line-height: 19px;
padding: 0px;
}
#sitemap li {
font-size: 12px;
line-height: 19px;
padding: 0px;
}
#sitemap ul li a {
color: #555555;
text-decoration: none;
}
#sitemap ul li a:hover {
text-decoration: underline;
}
.social-icon {
margin-top: 10px;
width: 32px;
padding-right: 5px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/* donation form */
.tabs{
position: relative;
width: 100%;
display: grid;
grid-template-columns: 20pt auto 2fr;
grid-template-rows: 20pt 20pt 20pt 20pt auto;
align-items: start;
padding-left: 0;
}
.tabs > p, #tab1, #tab2, #tab3{
grid-column-start: 1;
}
.tabs > p{
grid-column-end: 3;
}
#tab1, #tab2, #tab3{
justify-self: start;
}
.tabs label[for="tab1"], .tabs label[for="tab2"], .tabs label[for="tab3"]{
grid-column-start: 2;
}
#tab1, .tabs label[for="tab1"]{
grid-row-start: 2;
}
#tab2, .tabs label[for="tab2"]{
grid-row-start: 3;
}
#tab3, .tabs label[for="tab3"]{
grid-row-start: 4;
}
.tabs label[for^=tab]{
margin-right: 10px !important;
background-color: transparent;
border: none;
border-radius: 4px;
width: 120px;
}
.tabs .tab-content{
display: none;
overflow: hidden;
border-left: 1px dotted #ccc;
padding-left: 20px;
grid-column: 3;
grid-row-start: 1;
grid-row-end: 6;
}
.tabs #tab1:checked ~ #paypal_tab,
.tabs #tab2:checked ~ #bitcoin_tab,
.tabs #tab3:checked ~ #transfer_tab{
display: block;
}
/*.tabs [id^="tab"]:checked ~ [id$="_tab"]{
display: block;
}*/
.tabs input{
max-height: 20pt;
}
.download_div{
display:none;
}
textarea, select, input[type=text]{
box-sizing: border-box;
box-shadow: inset 0 1px 2px #ddd;
border: 1px solid #bbb;
border-radius: 4px;
padding: 5px;
width: 100%;
}
input[type=text]{
height: 31px;
}
input[type=text]:focus{
border: 1px solid #888;
}
select{
background-color: #fff;
}
/* donation list */
.two-column {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
list-style: none;
padding-left: 15px;
}
.three-column {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
list-style: none;
padding-left: 15px;
}
.two-column > li, .three-column > li{
margin: 0 5px 10px !important;
float: none;
}
#sponsors > h3 {
margin: 20px 0px 5px;
padding-bottom: 5px;
}
.sponsornames {
padding: 10px;
background-color: #eee;
}
.sponsornames > h4 {
font-size: 17px;
margin: 10px 15px;
border-bottom: 1px dotted #555;
padding-bottom: 5px;
}
.pay_div{
width: 100%;
}
.amountlabel {
margin: 15px 0 20px 0;
width: 100%;
margin: 15px 0 15px 0;
width: 100%;
display: flex;
flex-wrap: wrap;
row-gap: 10pt;
}
.amountlabel > input[type="radio"]{
display:none;
}
.amountlabel > label{
border-radius: 4px;
font-size: 16px;
padding: 10px 15px;
text-align: center;
margin: 0 7px 1px 3px;
font-weight: bold;
min-width: 22pt;
}
/*** donate button colors ***/
/* inactive */
.amountlabel > input + label,
.switch-field input + label,
.donateButton {
color: white;
}
.amountlabel > label,
.switch-field label {
background-color: rgba(180,180,180,0.75);
}
/* hover */
.amountlabel > label:hover,
.amountlabel > input[type="radio"]:hover + label:hover,
.switch-field label:hover,
.donateButton:hover {
background-color: #8fc8d2;
cursor: pointer;
}
/* active */
.amountlabel > input[type="radio"]:checked + label,
.amountlabel > label > input[type="number"]:focus + label,
.switch-field input:checked + label,
.donateButton {
background-color: #179bd7;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
.amountlabel > label > input[type="number"]{
background-color: transparent;
color: white;
border: none;
border-bottom: 1px solid;
border-radius: 0px;
box-shadow: none;
height: 20px;
font-size: 18px;
font-family: arial, helvetica, sans-serif;
text-align: center;
width: 45px;
font-weight: normal;
}
#freeamountLabel{
padding: 0;
}
.switch-field {
padding: 10px 0 15px 0;
margin: 5px 0 5px 0;
display: flex;
height: 16pt;
}
#donation_frq{
clear: right;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field input {
display: none;
}
.switch-field label {
display: flex;
width: 60px;
height: 100%;
font-size: 12px;
font-weight: bold;
text-align: center;
text-shadow: none;
padding: 3px 14px;
border: none;
justify-content: center;
align-items: center;
}
.switch-field input:checked + label {
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
margin: 0 0 0 3px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
margin: 0 11px 10px -1px;
}
.switches{
display: flex;
flex-wrap: wrap;
width: max-content;
}
@media screen and (max-width: 800px){
:root{
--gpg4win-gradient: linear-gradient(to bottom, #ffd987, #ffc853 4%, #f4b836, #ffc343 99%, #ffdf99);
}
*{
max-width: 100%;
font-size: 1rem;
}
html, body{
position: relative;
overflow-x: hidden;
max-width: 100vw;
}
body{
padding: 6pt 10pt;
}
.wrapper{
width: 100%;
margin: 0px;
}
.language_select{
width: 100%;
display: flex;
justify-content: end;
column-gap: 4pt;
margin-bottom: 12pt;
padding-right: 4pt;
}
.language_select *{
font-size: 1rem;
width: auto;
}
.language_select img{
min-height: 100%;
width: 20pt;
}
.header{
height: initial;
display: flex;
flex-direction: column;
}
#logo-container{
position: relative;
left: -10pt;
max-width: initial;
width: 110%;
background: linear-gradient(to bottom, #ffd987, #ffc853 4%, #f4b836, #ffc343 99%, #ffdf99);
border-top: solid black 1px;
border-bottom: solid black 1px;
padding-top: 8pt;
}
#header-logo{
display: block;
min-height: 30pt;
max-height: 50pt;
width: auto;
}
.header a{
display: block;
width: max-content;
}
#menu-container{
height: auto;
width: calc(100% - 34pt);
height: 100vh;
background-color: white;
z-index: 2;
position: absolute;
top: 0;
right: calc(-100% + 34pt);
overflow-y: auto;
animation-name: slide-menu-out;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
#menu-button:checked ~ #menu-container{
right: 0pt;
animation-name: slide-menu-in;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
@keyframes slide-menu-in {
0%{right: calc(-100% + 34pt)}
100%{right: 0pt}
}
@keyframes slide-menu-out {
0%{right: 0pt}
100%{right: calc(-100% + 34pt)}
}
#menu{
padding: 8pt;
padding-bottom: 20pt;
}
#menu-button{
display: none;
opacity: 0;
}
#menu-button-label{
display: block;
z-index: 2;
order: 1;
height: 34pt;
width: 34pt;
background: none;
position: absolute;
top: 54pt;
right: 0pt;
animation-name: slide-menu-button-out;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
#menu-button-image-container{
background-color: rgba(255, 255, 255, 0);
position: relative;
z-index: 3;
padding: 4pt;
}
#menu-button:checked ~ #menu-button-label{
right: calc(100% - 34pt);
background: none;
animation-name: slide-menu-button-in;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
@keyframes slide-menu-button-in {
0%{right: 0pt;}
100%{right: calc(100% - 34pt);}
}
@keyframes slide-menu-button-out {
0%{right: calc(100% - 34pt);}
100%{right: 0pt;}
}
#menu-shadow{
position: absolute;
left: -100vw;
top: -50vh;
width: 200vw;
height: 0pt;
max-width: 200vw;
max-height: 200vh;
z-index: -1;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
animation-name: fade-out;
animation-duration: 0.3s;
}
#menu-button:checked ~ #menu-button-label #menu-shadow{
animation-name: fade-in;
animation-duration: 0.4s;
opacity: 1;
height: 200vh;
}
@keyframes fade-in {
0%{opacity: 0; height: 200vh;}
100%{opacity: 1; height: 200vh;}
}
@keyframes fade-out {
0%{opacity: 1; height: 200vh;}
100%{opacity: 0; height: 200vh;}
}
#menu ul{
display: flex;
flex-direction: column;
}
#menu li{
text-align: left;
}
#menu ul a, #menu ul a:hover,
#menu .mwhatsnew a, #menu .mwhatsnew a:hover,
#menu .mwhatsnew a, #menu .mwhatsnew a:hover,
#menu ul a, #menu ul a:hover,
#menu .mdonate a, #menu .mdonate a:hover,
#menu ul li ul li a{
width: 95%;
margin-bottom: 6px;
padding-left: 6pt;
border-radius: 2pt;
font-size: 1rem;
}
#menu ul a, #menu ul a:hover, #menu .mwhatsnew a, #menu .mwhatsnew a:hover, #menu .mwhatsnew a, #menu .mwhatsnew a:hover, #menu ul a, #menu ul a:hover{
background: linear-gradient(to bottom, #fdedbb, #efce6c, #fde085);
background: var(--gpg4win-gradient);
}
#menu .mlogo{
margin-bottom: 10px;
}
#menu .mlogo a{
background: none;
background-image: url('img/src/gpg4win_logo.png');
background-repeat: no-repeat;
background-size: contain;
top: unset;
}
#menu .mlogo a:hover{
background: none;
background-image: url('img/src/gpg4win_logo.png');
background-size: contain;
background-repeat: no-repeat;
}
#menu .mwhatsnew div {
font-size: 1rem;
}
#menu ul li ul{
display: flex;
flex-direction: column;
position: inherit;
width: 80%;
}
#menu ul li ul li{
width: 100%;
min-height: 30pt;
background-color: #fde085;
margin-bottom: 4pt;
display: flex;
align-items: center;
}
#menu ul li ul li a{
width: 100%;
background: none;
border: none;
line-height: -50%;
}
.mbetween{
display: none;
}
#menu ul li .subcap{
display: none;
}
#menu .mdonate a, #menu .mdonate a:hover{
float: initial;
text-indent: 0pt;
background: none;
background-image: linear-gradient(to bottom, #a3d97f, #54c010, #63c322);
}
.fancy_intro{
flex-direction: column;
border: none;
margin-left: 0pt;
}
#fancy_bg{
max-width: 90%;
}
#download-button-container{
order: 1;
}
#download_button{
position: initial;
width: 150pt;
max-height: 70pt;
border: solid #707070 1px;
border-radius: 4pt;
background: linear-gradient(to bottom, #94d36b 1%, #b8e29d 2%, #92d267 3%, #54c010 40%, #63c322);
margin-bottom: 6pt;
}
#download_button a{
background: none;
height: 50pt;
display: flex;
justify-content: center;
align-items: center;
}
#download_button .text{
position: inherit;
}
.download_button_links{
position: initial;
font-size: 1rem;
width: initial;
column-gap: 3pt;
margin-bottom: 10pt;
}
small{
font-size: 0.9rem;
}
h4{
margin-top: 24pt;
margin-bottom: 14pt;
}
#main h4, #full h4{
font-size: 1.2rem;
}
#main p, #full p{
line-height: 24px;
}
.h_text{
font-size: 0.8rem;
border: none;
padding-left: 0pt;
order: 2;
}
.h_text .serif_word{
font-size: 1rem;
}
.content{
margin: 0pt;
}
#intro{
max-width: 100%;
width: fit-content;
padding-left: 0pt;
}
#main{
padding-left: 0pt;
}
#footer{
height: initial;
width: 100vw;
max-width: 100vw;
position: relative;
left: -10pt;
bottom: -6pt;
}
#sitemap ul{
float: none;
margin-left: 10pt;
width: initial;
}
#sitemap li{
line-height: 18pt;
}
#full{
padding-left: 0pt;
}
.tabs{
height: initial;
grid-template-columns: 20pt auto auto;
grid-template-rows: 20pt 20pt 20pt 40pt auto;
padding-left: 0;
}
.tabs .tab-content{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
margin-top: 12pt;
padding-left: 0pt;
}
.amountlabel{
margin-bottom: 20pt;
}
.switches{
margin-bottom: 20pt;
}
.switch-field{
margin-bottom: 10pt;
}
.amountlabel > label, .switch-field label{
display: flex;
justify-content: center;
align-items: center;
height: 32pt;
width: 60pt;
padding: 0pt;
}
#paypal_tab textarea{
min-height: 80pt;
}
+
+ .cleanlist{
+ padding-left: 0pt;
+ }
+
+ #component-list{
+ margin-top: 22pt;
+ }
+
+ #component-list li{
+ margin-bottom: 16pt;
+ display: flex;
+ flex-direction: column;
+ }
+
+ #component-list .imgfloatleft{
+ max-width: initial;
+ width: 140pt;
+ float: none;
+ margin-bottom: 0pt;
+ }
+
+ #component-list li:last-child .imgfloatleft{
+ width: 70pt;
+ }
+
+ #component-list a{
+ display: block;
+ order: 2;
+ }
+
}
\ No newline at end of file