Style input fields

2 files changed, 69 insertions, 19 deletions

diff --git a/index.html b/index.html
index 9fc1d49..92c7572 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <div id="wrapper" class="step1">
       <div class="collapsable block-step1">
         <div onclick="step0_done()" class="block-header">
-          <h1 id="head1"><div class="circle_num">&#9730;</div> Abmahnbeantworter</h1>
+          <h1 id="head1"><div class="circle_num">☂</div> Abmahnbeantworter</h1>
         </div>
         <div class="juice">
           <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
@@ -56,12 +56,12 @@
 
           <p>Andernfalls tragen Sie bitte die Anschrift der Kanzlei ein, von der Sie die Abmahnung erhielten.</p>
           <ul>
-            <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="Kanzlei"/></li>
-            <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="Bearbeiter (optional)"/></li>
-            <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li>
-            <li><input id="abmahnender_plz" type="text" name="plz" placeholder="Postleitzahl"/></li>
-            <li><input id="abmahnender_ort" type="text" name="ort" placeholder="Ort"/></li>
-            <li><input id="abmahnender_fax" type="text" name="fax" placeholder="Fax"/></li>
+            <li><input id="abmahnender_kanzlei" type="text" name="kanzlei" placeholder="kanzlei"/></li>
+            <li><input id="abmahnender_bearbeiter" type="text" name="bearbeiter" placeholder="bearbeiter (optional)"/></li>
+            <li><input id="abmahnender_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
+            <li><input id="abmahnender_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
+            <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li>
+            <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
           </ul>
           <div class="one-button">
             <div class="button button-green" onclick="step2_done()">Weiter</div>
@@ -76,7 +76,7 @@
           <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
           <ul>
             <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(Akten)-Zeichen"/></li>
-            <li><input id="vorgang_detail" type="text" name="detail" placeholder="Beschreibung (optional)"/></li>
+            <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li>
           </ul>
 
           <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p>
@@ -199,13 +199,13 @@
         <div class="juice">
           <p>Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.</p>
           <ul>
-            <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="Vorname"/></li>
-            <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="Nachname"/></li>
-            <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="Zusatz (optional)"/></li>
-            <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="Straße und Hausnummer"/></li>
-            <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="Postleitzahl"/></li>
-            <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="Wohnort"/></li>
-            <li><input id="abgemahnter_land" type="text" name="land" placeholder="Land (optional)"/></li>
+            <li><input id="abgemahnter_vorname" type="text" name="vorname" placeholder="vorname"/></li>
+            <li><input id="abgemahnter_nachname" type="text" name="nachname" placeholder="nachname"/></li>
+            <li><input id="abgemahnter_zusatz" type="text" name="zusatz" placeholder="zusatz (optional)"/></li>
+            <li><input id="abgemahnter_strasse" type="text" name="strasse" placeholder="strasse und Hausnummer"/></li>
+            <li><input id="abgemahnter_plz" type="text" name="plz" placeholder="postleitzahl"/></li>
+            <li><input id="abgemahnter_ort" type="text" name="ort" placeholder="wohnort"/></li>
+            <li><input id="abgemahnter_land" type="text" name="land" placeholder="land (optional)"/></li>
           </ul>
           <div class="hint">
             <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p>
diff --git a/style.css b/style.css
index da2a215..8dcc8ea 100644
--- a/style.css
+++ b/style.css
@@ -116,7 +116,7 @@ h2 {
 }
 
 .block-step1 .circle_num {
-  background-color: #403040;
+  background-color: black;
   color: #F1F2E3;
   margin: 4px 28px 0 0;
   line-height: 1.3em;
@@ -326,15 +326,65 @@ p a:visited {
 
 input[type="text"] {
   width: 95%;
-  border: solid 1px silver;
-  border-radius: 4px;
+  background-color : rgba(255, 255, 255, 0.30);
+  border: 0px solid rgba(255, 255, 255, 0.30);
+  border-radius: 6px;
   font-family: 'SourceSansPro', sans-serif;
   font-size: 13pt;
   font-weight: normal;
+  color: white;
   padding: 0.4em 0.6em 0.4em 0.6em;
   margin-bottom: 0.7em;
 }
 
+input:focus {
+  outline: none !important;
+}
+
+input:focus::placeholder {
+  opacity: 0;
+}
+
+::placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+
+:focus::-moz-placeholder {
+  opacity: 0
+}
+
+::-moz-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+::-ms-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
+:focus::-webkit-input-placeholder {
+  opacity: 0;
+}
+::-webkit-input-placeholder {
+  color: white;
+  opacity: 0.5;
+  font-variant: small-caps;
+  font-weight: normal;
+  letter-spacing: 0.15em;
+}
+
 select.tag {
   width: 15%;
   margin-right: 3%;
@@ -384,7 +434,7 @@ input[type=checkbox]:not(old) + label > span {
   background-color : rgba(255, 255, 255, 0.30);
   margin           : 2px 36px 8px 2px;
   border           : 0px solid rgba(255, 255, 255, 0.30);
-  border-radius    : 25%;
+  border-radius    : 6px;
   vertical-align   : top;
   transition       : font-size 0.4s;
   font-size        : 1pt;