update CSS and default templates

4 files changed, 174 insertions, 220 deletions

diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
index 40e8eae7a..3fc7f934c 100644
--- a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
+++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
@@ -6,6 +6,7 @@
         background-color : #fff;
         text-align: left;
         background-color: #E6E6E6;
+        font-family: Arial, Helvetica, sans-serif;
     }
 
     .browserInfoButton{
@@ -14,19 +15,18 @@
     
     #page {
         display: block;
-        margin: 0 auto;
+        margin: auto;
         margin-top: 5%;
         position: relative;
         background: rgb(255,255,255);
     }
 			  
     #page1 {
-        padding-top: 1%;
         text-align: center;
     }
 			  
     #main {
-        float:left;
+        padding-top: 2%;
         width: 100%;
         text-align: center;
     }
@@ -43,20 +43,24 @@
         min-height: 155px;
         margin-bottom: 5%;
     }
+    
     #mandateLogin {
+        display:flex;
+        flex-direction: row;
         padding-bottom: 1%;
         padding-top: 2%;
+        margin-left: 1%;
         position: relative;
-        text-align: left;
-			}
+        font-size: 0.75em;
+    }
 
    .unvisible {
-       visibility: hidden;
+       display:none;
       }
 
     .OA_header {
-			/*	  background-color: white;*/
         font-size: 2.1em;
+        padding-top:1%;
         margin-bottom: 1%;
         margin-top: 1%;
     }
@@ -73,31 +77,35 @@
     }
 
     #processSelectionArea {
-        width: 550px;
-        margin-left: 25px;
-        margin-top: 35px;
+        float:left;
+        width: 100%;
     }
 
     .processSelectionButtonArea {
-        float: none;
-        margin-bottom: 5%;
-        height: 35px;
+        width:100%;
     }
 
     .processSelectionButton {
         background: #ababab;
         cursor: pointer;
-        height: 40px;
-        width: 200px;
+        height: 40%;
+        width: 25%;
         float: right;
+        padding-top: 1%;
+        padding-bottom: 1%
+    }
+
+    #bkuselectionarea {
+        display:flex; 
+        flex-direction: row;
+        margin-top: 2%;
+        text-align:center;
     }
 
     .buttonDescription {
-        float: left;
-        margin-left: 10px;
-        padding-bottom: 0.4em;
+        width: 62%;
+        margin-left: 1%;
         text-align: left;
-        width: 60%;
     }
     
     #processContent {
@@ -109,46 +117,29 @@
         margin-right: 5px;        
       }
 
-     #bkukarte {
-        float:left;
-        width:33%;
-        text-align:center;
-        margin-top: 2%;
+    .bkuimage {
+        width: 50%;
     }
 
-    #bkuhandy {
-        float:left;
-        width:33%;
-        text-align:center;
-        margin-top: 2%;
+    input {
+        cursor: pointer;  
     }
 
-    #bkueulogin {
-        display:block;
-        float:left;
-        text-align:center;
-        width:33%;
-        margin-top: 2%;
+    #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
+        font-size: 0.85em;
+        width:65%;
+        border:none;
+        background-color: transparent;
     }
 
-    .bkuimage {
-        width: 55%;
-    }
+    #localBKU input {
+        display: inline-block;
 
-    input {
-        width:auto;
-        cursor: pointer;
-        
     }
-
-  #localBKU input {
-    display: inline-block;
-
-  }
 			
-  #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
-    /*text-decoration: underline;*/
-  }
+    #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
+        /*text-decoration: underline;*/
+    }
 
     #installJava, #BrowserNOK {
         clear:both;
@@ -159,40 +150,26 @@
 			
     #ssoSessionTransferBlock {
         clear: both;
-  }
+    }
 
     #stork {
         clear: both;
-    }
-      			
-
+    }    			
       
-    .verticalcenter {
-        vertical-align: middle;
-      }
-
     .mandate{
-        float: left;
-        margin-left: 2%;
         font-size: 1.3em;
     }
       
-    #mandateLogin div {
-        clear: both;
-        margin-top: -1%;
-        position: relative;
-        top: 50%;
-    }
          
     #localBKU {
         padding-bottom: 4%;
-        /*padding-top: 4%;*/
         position: relative;
         clear: both;     
         text-align: center;
     }
     
     #selectArea {
+        float:left;
         width:90%;
         padding-left: 4%
     }
@@ -204,6 +181,7 @@
         width: 70px;
         height: 25px;
     }
+
     #leftcontent {
         width: 70%;
         margin-bottom: 4%;
@@ -211,6 +189,7 @@
         border: 1px solid rgb(0,0,0);
         margin:auto;
     }
+
     .hell {
         background-color : $MAIN_BACKGOUNDCOLOR;
         color: $MAIN_COLOR;	
@@ -221,12 +200,11 @@
         color: $HEADER_COLOR;
     }
 
-
 @media screen and (min-width: 650px) {
 			        
     #page {
-         width: 650px;
-         height: 460px;		    
+        width: 660px;
+        height: 460px;
     }
         
     #localBKU p {
@@ -235,27 +213,12 @@
         
     #localBKU input{
         font-size: 0.85em;
-        /*border-radius: 5px;*/
-    }
-
-    #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
-        font-size: 0.85em;
-        width:65%
-    }
-
-    #mandateLogin {
-        font-size: 0.85em;
-    }    
-
-    #alert_area {
-        width: 500px;
-        padding-left: 80px;
-    }
+    }  
 
-      #selectArea {
+    #selectArea {
          font-size: 15px;
          padding-bottom: 65px;
-      }
+    }
 			      	
     #stork h2 {
         font-size: 1.0em;
@@ -269,8 +232,7 @@
         width: 100px;
         height: 30px
     }
-             
-        
+                    
     #validation {
         position: absolute;
         bottom: 0px;
@@ -280,7 +242,6 @@
 }
 
 
-
 @media screen and (max-width: 649px) {
 				
     body {
@@ -321,39 +282,27 @@
         display: none;
         visibility: hidden;
     }
-
-        
+      
     h2#tabheader{
         font-size: 1.5em;
         position: relative;
     }
+    
     .mandate{
-        font-size: 1.0em;
+        font-size: 1.2em;
     }
         
     #leftcontent {
-        float: left;
         width:auto;
         border:none;
         visibility:visible;
         margin-bottom: 2%;
     }
+    
     .bkuimage {
         width: 40%;
     }
-    
-    #bkukarte {
-        box-sizing: border-box;
-    }
-
-    #bkuhandy {
-        box-sizing: border-box;
-    }
-
-    #bkueulogin {
-        box-sizing: border-box;
-    }
-		        
+    		        
     .setAssertionButton_full {
         background: #efefef;
         cursor: pointer;
@@ -365,4 +314,32 @@
     input[type=button],input[type=submit] {
         width:65%;
     }
-}      
\ No newline at end of file
+      
+    #processInfoArea {
+        margin-bottom: 4%;
+        margin-top: 4%;
+    }
+
+    #processSelectionArea {
+        flaot:left;
+        width: 100%;
+    }
+
+    .processSelectionButton {
+        flaot:left;
+        height: 10%;
+        width: 2%;
+    }
+
+    .buttonDescription {
+        float: left;
+        width: 70%;
+        text-align: left;
+    }
+    
+    #processContent {
+        margin-top: 10%;
+      }
+    
+}  
+
diff --git a/id/server/moa-id-frontend-resources/src/main/java/at/gv/egovernment/moa/id/auth/frontend/utils/FormBuildUtils.java b/id/server/moa-id-frontend-resources/src/main/java/at/gv/egovernment/moa/id/auth/frontend/utils/FormBuildUtils.java
index 248bde700..8e4e7e5b3 100644
--- a/id/server/moa-id-frontend-resources/src/main/java/at/gv/egovernment/moa/id/auth/frontend/utils/FormBuildUtils.java
+++ b/id/server/moa-id-frontend-resources/src/main/java/at/gv/egovernment/moa/id/auth/frontend/utils/FormBuildUtils.java
@@ -62,7 +62,7 @@ public class FormBuildUtils {
 				defaultmap.put(PARAM_MAIN_BACKGROUNDCOLOR, "#F7F8F7");
 				defaultmap.put(PARAM_MAIN_COLOR, "#000000");
 			
-				defaultmap.put(PARAM_HEADER_BACKGROUNDCOLOR, "#C3D2E2");
+				defaultmap.put(PARAM_HEADER_BACKGROUNDCOLOR, "#F7F8F7");
 				defaultmap.put(PARAM_HEADER_COLOR, "#000000");
 				defaultmap.put(PARAM_HEADER_TEXT, "Login");
 			
@@ -70,7 +70,7 @@ public class FormBuildUtils {
 				defaultmap.put(PARAM_BUTTON_BACKGROUNDCOLOR_FOCUS, "#EBEBEB");
 				defaultmap.put(PARAM_BUTTON_COLOR, "#000000");
 			
-				defaultmap.put(PARAM_FONTFAMILY, "Verdana,Geneva,Arial,sans-serif");
+				defaultmap.put(PARAM_FONTFAMILY, "Arial,Helvetica,sans-serif");
 				
 				defaultmap.put(PARAM_REDIRECTTARGET, "_top");
 			}
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png
index 6c785bf06..7d8b10c37 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png
+++ b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small.png
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css b/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
index 40e8eae7a..3fc7f934c 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/css_template.css
@@ -6,6 +6,7 @@
         background-color : #fff;
         text-align: left;
         background-color: #E6E6E6;
+        font-family: Arial, Helvetica, sans-serif;
     }
 
     .browserInfoButton{
@@ -14,19 +15,18 @@
     
     #page {
         display: block;
-        margin: 0 auto;
+        margin: auto;
         margin-top: 5%;
         position: relative;
         background: rgb(255,255,255);
     }
 			  
     #page1 {
-        padding-top: 1%;
         text-align: center;
     }
 			  
     #main {
-        float:left;
+        padding-top: 2%;
         width: 100%;
         text-align: center;
     }
@@ -43,20 +43,24 @@
         min-height: 155px;
         margin-bottom: 5%;
     }
+    
     #mandateLogin {
+        display:flex;
+        flex-direction: row;
         padding-bottom: 1%;
         padding-top: 2%;
+        margin-left: 1%;
         position: relative;
-        text-align: left;
-			}
+        font-size: 0.75em;
+    }
 
    .unvisible {
-       visibility: hidden;
+       display:none;
       }
 
     .OA_header {
-			/*	  background-color: white;*/
         font-size: 2.1em;
+        padding-top:1%;
         margin-bottom: 1%;
         margin-top: 1%;
     }
@@ -73,31 +77,35 @@
     }
 
     #processSelectionArea {
-        width: 550px;
-        margin-left: 25px;
-        margin-top: 35px;
+        float:left;
+        width: 100%;
     }
 
     .processSelectionButtonArea {
-        float: none;
-        margin-bottom: 5%;
-        height: 35px;
+        width:100%;
     }
 
     .processSelectionButton {
         background: #ababab;
         cursor: pointer;
-        height: 40px;
-        width: 200px;
+        height: 40%;
+        width: 25%;
         float: right;
+        padding-top: 1%;
+        padding-bottom: 1%
+    }
+
+    #bkuselectionarea {
+        display:flex; 
+        flex-direction: row;
+        margin-top: 2%;
+        text-align:center;
     }
 
     .buttonDescription {
-        float: left;
-        margin-left: 10px;
-        padding-bottom: 0.4em;
+        width: 62%;
+        margin-left: 1%;
         text-align: left;
-        width: 60%;
     }
     
     #processContent {
@@ -109,46 +117,29 @@
         margin-right: 5px;        
       }
 
-     #bkukarte {
-        float:left;
-        width:33%;
-        text-align:center;
-        margin-top: 2%;
+    .bkuimage {
+        width: 50%;
     }
 
-    #bkuhandy {
-        float:left;
-        width:33%;
-        text-align:center;
-        margin-top: 2%;
+    input {
+        cursor: pointer;  
     }
 
-    #bkueulogin {
-        display:block;
-        float:left;
-        text-align:center;
-        width:33%;
-        margin-top: 2%;
+    #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
+        font-size: 0.85em;
+        width:65%;
+        border:none;
+        background-color: transparent;
     }
 
-    .bkuimage {
-        width: 55%;
-    }
+    #localBKU input {
+        display: inline-block;
 
-    input {
-        width:auto;
-        cursor: pointer;
-        
     }
-
-  #localBKU input {
-    display: inline-block;
-
-  }
 			
-  #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
-    /*text-decoration: underline;*/
-  }
+    #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
+        /*text-decoration: underline;*/
+    }
 
     #installJava, #BrowserNOK {
         clear:both;
@@ -159,40 +150,26 @@
 			
     #ssoSessionTransferBlock {
         clear: both;
-  }
+    }
 
     #stork {
         clear: both;
-    }
-      			
-
+    }    			
       
-    .verticalcenter {
-        vertical-align: middle;
-      }
-
     .mandate{
-        float: left;
-        margin-left: 2%;
         font-size: 1.3em;
     }
       
-    #mandateLogin div {
-        clear: both;
-        margin-top: -1%;
-        position: relative;
-        top: 50%;
-    }
          
     #localBKU {
         padding-bottom: 4%;
-        /*padding-top: 4%;*/
         position: relative;
         clear: both;     
         text-align: center;
     }
     
     #selectArea {
+        float:left;
         width:90%;
         padding-left: 4%
     }
@@ -204,6 +181,7 @@
         width: 70px;
         height: 25px;
     }
+
     #leftcontent {
         width: 70%;
         margin-bottom: 4%;
@@ -211,6 +189,7 @@
         border: 1px solid rgb(0,0,0);
         margin:auto;
     }
+
     .hell {
         background-color : $MAIN_BACKGOUNDCOLOR;
         color: $MAIN_COLOR;	
@@ -221,12 +200,11 @@
         color: $HEADER_COLOR;
     }
 
-
 @media screen and (min-width: 650px) {
 			        
     #page {
-         width: 650px;
-         height: 460px;		    
+        width: 660px;
+        height: 460px;
     }
         
     #localBKU p {
@@ -235,27 +213,12 @@
         
     #localBKU input{
         font-size: 0.85em;
-        /*border-radius: 5px;*/
-    }
-
-    #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
-        font-size: 0.85em;
-        width:65%
-    }
-
-    #mandateLogin {
-        font-size: 0.85em;
-    }    
-
-    #alert_area {
-        width: 500px;
-        padding-left: 80px;
-    }
+    }  
 
-      #selectArea {
+    #selectArea {
          font-size: 15px;
          padding-bottom: 65px;
-      }
+    }
 			      	
     #stork h2 {
         font-size: 1.0em;
@@ -269,8 +232,7 @@
         width: 100px;
         height: 30px
     }
-             
-        
+                    
     #validation {
         position: absolute;
         bottom: 0px;
@@ -280,7 +242,6 @@
 }
 
 
-
 @media screen and (max-width: 649px) {
 				
     body {
@@ -321,39 +282,27 @@
         display: none;
         visibility: hidden;
     }
-
-        
+      
     h2#tabheader{
         font-size: 1.5em;
         position: relative;
     }
+    
     .mandate{
-        font-size: 1.0em;
+        font-size: 1.2em;
     }
         
     #leftcontent {
-        float: left;
         width:auto;
         border:none;
         visibility:visible;
         margin-bottom: 2%;
     }
+    
     .bkuimage {
         width: 40%;
     }
-    
-    #bkukarte {
-        box-sizing: border-box;
-    }
-
-    #bkuhandy {
-        box-sizing: border-box;
-    }
-
-    #bkueulogin {
-        box-sizing: border-box;
-    }
-		        
+    		        
     .setAssertionButton_full {
         background: #efefef;
         cursor: pointer;
@@ -365,4 +314,32 @@
     input[type=button],input[type=submit] {
         width:65%;
     }
-}      
\ No newline at end of file
+      
+    #processInfoArea {
+        margin-bottom: 4%;
+        margin-top: 4%;
+    }
+
+    #processSelectionArea {
+        flaot:left;
+        width: 100%;
+    }
+
+    .processSelectionButton {
+        flaot:left;
+        height: 10%;
+        width: 2%;
+    }
+
+    .buttonDescription {
+        float: left;
+        width: 70%;
+        text-align: left;
+    }
+    
+    #processContent {
+        margin-top: 10%;
+      }
+    
+}  
+