some GUI and handbook updatesMOA-ID-3.4.0

15 files changed, 472 insertions, 785 deletions

diff --git a/id/server/auth-final/pom.xml b/id/server/auth-final/pom.xml
index 09fb70a19..504adb486 100644
--- a/id/server/auth-final/pom.xml
+++ b/id/server/auth-final/pom.xml
@@ -166,9 +166,14 @@
 		</dependency>
 
 		<dependency>
+			<groupId>MOA.id.server.modules</groupId>				
+		 	<artifactId>moa-id-module-sl20_authentication</artifactId>
+		 </dependency>		
+
+		<dependency>
 			<groupId>MOA.id.server.modules</groupId>
 			<artifactId>moa-id-module-AT_eIDAS_connector</artifactId>
-		</dependency>
+		</dependency> 
 
 			<!--dependency>
 				<groupId>MOA.id.server.modules</groupId>
diff --git a/id/server/data/deploy/conf/moa-id-configuration/htmlTemplates/loginFormFull.html b/id/server/data/deploy/conf/moa-id-configuration/htmlTemplates/loginFormFull.html
index 62f954ada..4e548e58c 100644
--- a/id/server/data/deploy/conf/moa-id-configuration/htmlTemplates/loginFormFull.html
+++ b/id/server/data/deploy/conf/moa-id-configuration/htmlTemplates/loginFormFull.html
@@ -48,7 +48,7 @@
 								    <input type="hidden" name="SSO" id="useSSO" /> 
 								    <input type="hidden" name="ccc" id="ccc" /> 
 								    <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                    <input type="submit" value=" Karte " tabindex="5" role="button" onclick="setMandateSelection();" />
+                    <input type="submit" value=" Karte " tabindex="5" role="button" />
                   </form>
                 
                   <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
@@ -64,15 +64,14 @@
                 
             
 				        <div id="bkueulogin" class="$eIDASVisible">
-				            <img class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
-                    <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+				            <img id="eIDASImage" class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
+                    <form method="get" id="moaideIDASform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
 								      <input type="hidden" name="useeIDAS" value="true" />
 								      <input type="hidden" name="useMandate" id="useMandate" />  
 								      <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                      <input name="bkuButtonEULogin" onclick="setMandateSelection();" type="submit" role="button" value="EULogin" />
+                      <input id="buttonEULogin" name="bkuButtonEULogin" type="submit" role="button" value="EULogin" />
                     </form>
 				        </div>
-                
 						<!--div id="localBKU">
 							<form method="get" id="moaidform" action="$contextPath$submitEndpoint"
 								class="verticalcenter" target="_parent">
@@ -91,7 +90,10 @@
               <!--div id="ssoSessionTransferBlock">
                 <a href="$contextPath$submitEndpoint?pendingid=$pendingReqID&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
               </div-->
-                                  
+            
+                  
+                        
+            
             <!-- 
               <div id="stork" align="center" class="$STORKVISIBLE">
                 <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
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 fab541751..40e8eae7a 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
@@ -30,11 +30,25 @@
         width: 100%;
         text-align: center;
     }
+       
+    h2#tabheader{
+        font-size: 1.0em; 
+        padding-left: 2%;
+        padding-right: 2%;
+        position: relative;
+    }
+
     #bkulogin {	
         min-width: 200px;
         min-height: 155px;
         margin-bottom: 5%;
     }
+    #mandateLogin {
+        padding-bottom: 1%;
+        padding-top: 2%;
+        position: relative;
+        text-align: left;
+			}
 
    .unvisible {
        visibility: hidden;
@@ -118,11 +132,13 @@
     }
 
     .bkuimage {
-        width: 60%;
+        width: 55%;
     }
 
     input {
+        width:auto;
         cursor: pointer;
+        
     }
 
   #localBKU input {
@@ -149,12 +165,7 @@
         clear: both;
     }
       			
-    #mandateLogin {
-        padding-bottom: 2%;
-        padding-top: 2%;
-        position: relative;
-        text-align: left;
-			}
+
       
     .verticalcenter {
         vertical-align: middle;
@@ -182,7 +193,6 @@
     }
     
     #selectArea {
-        float:left;
         width:90%;
         padding-left: 4%
     }
@@ -210,12 +220,6 @@
         background-color: $HEADER_BACKGROUNDCOLOR;
         color: $HEADER_COLOR;
     }
-    h2#tabheader{
-        font-size: 2.0em; 
-        padding-left: 2%;
-        padding-right: 2%;
-        position: relative;
-    }
 
 
 @media screen and (min-width: 650px) {
@@ -236,16 +240,13 @@
 
     #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
         font-size: 0.85em;
+        width:65%
     }
 
     #mandateLogin {
         font-size: 0.85em;
     }    
 
-    #bku_header h2 {
-        font-size: 0.8em;
-    } 
-
     #alert_area {
         width: 500px;
         padding-left: 80px;
@@ -255,20 +256,7 @@
          font-size: 15px;
          padding-bottom: 65px;
       }
-			
-    #bku_header {
-        height: 5%;
-        padding-bottom: 2%;
-        padding-top: 2%;
-    }
-              
-    h2#tabheader{
-        font-size: 1.1em; 
-        padding-left: 2%;
-        padding-right: 2%;
-        position: relative;
-    }
-      	
+			      	
     #stork h2 {
         font-size: 1.0em;
         margin-bottom: 2%;
@@ -281,12 +269,7 @@
         width: 100px;
         height: 30px
     }
-        
-        button {
-          height: 25px;
-          width: 75px;
-          margin-bottom: 4%;
-        }      
+             
         
     #validation {
         position: absolute;
@@ -338,7 +321,12 @@
         display: none;
         visibility: hidden;
     }
-    
+
+        
+    h2#tabheader{
+        font-size: 1.5em;
+        position: relative;
+    }
     .mandate{
         font-size: 1.0em;
     }
@@ -351,8 +339,7 @@
         margin-bottom: 2%;
     }
     .bkuimage {
-      
-        
+        width: 40%;
     }
     
     #bkukarte {
@@ -366,20 +353,7 @@
     #bkueulogin {
         box-sizing: border-box;
     }
-			  
-    #bku_header {
-        height: 10%;
-        min-height: 1.2em;
-        margin-top: 1%;
-    }
-        
-    h2#tabheader{
-        padding-left: 2%;
-        padding-right: 2%;
-        font-size: 1.5em;
-        position: relative;
-    }
-        
+		        
     .setAssertionButton_full {
         background: #efefef;
         cursor: pointer;
@@ -389,6 +363,6 @@
     }
        
     input[type=button],input[type=submit] {
-        width: 70%;
+        width:65%;
     }
 }      
\ No newline at end of file
diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js b/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js
index 313f14b4a..15b82614c 100644
--- a/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js
+++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/javascript_tempalte.js
@@ -84,9 +84,9 @@ function isIE() {
 /* 			setSSOSelection(); */
 			
 			var ccc = "AT";
-			var countrySelection = document.getElementById("eIDASSelection");
+			var countrySelection = document.getElementById("cccSelection");
 			if (countrySelection !=  null) {
-				ccc = document.getElementById("eIDASSelection").value;
+				ccc = document.getElementById("cccSelection").value;
 			}
 			var iFrameURL = "$contextPath$submitEndpoint" + "?";			
 			iFrameURL += "&pendingid=" + "$pendingReqID";
@@ -238,7 +238,22 @@ function isIE() {
     }
     function setUseMandateFlag(e) {
       /*document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);*/
-      e.setAttribute("aria-checked", e.checked);
+      e.target.setAttribute("aria-checked", e.target.checked);
+      if (e.target.checked) {
+        var image = document.getElementById("eIDASImage");
+        var srcatt = image.getAttribute("src");
+        var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+        srcatt = srcatt.replace(last,'eIDAS_small_deactivated.png');    
+        image.setAttribute("src",srcatt);
+        document.getElementById("buttonEULogin").disabled=true;
+      } else {
+          var image = document.getElementById("eIDASImage");
+          var srcatt = image.getAttribute("src");
+          var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+          srcatt = srcatt.replace(last,'eIDAS_small.png');    
+          image.setAttribute("src",srcatt);
+          document.getElementById("buttonEULogin").disabled=false      
+      }            
     }
     
     document.addEventListener('resize', onChangeChecks);
@@ -246,7 +261,7 @@ function isIE() {
       document.querySelector('#mandateCheckBox').addEventListener('click', setUseMandateFlag);
       document.querySelector('#moaidform>input[type=submit]').addEventListener('click', setMandateSelection);
       document.querySelector('#bkuhandy>input[type=button]').addEventListener('click', bkuHandyClicked);
-      document.querySelector('#stork button[type=button]').addEventListener('click', storkClicked);
+      document.querySelector('#moaideIDASform>input[type=submit]').addEventListener('click', setMandateSelection);
       onChangeChecks(); 
     });
     
diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html b/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html
index 62f954ada..4e548e58c 100644
--- a/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html
+++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/loginFormFull.html
@@ -48,7 +48,7 @@
 								    <input type="hidden" name="SSO" id="useSSO" /> 
 								    <input type="hidden" name="ccc" id="ccc" /> 
 								    <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                    <input type="submit" value=" Karte " tabindex="5" role="button" onclick="setMandateSelection();" />
+                    <input type="submit" value=" Karte " tabindex="5" role="button" />
                   </form>
                 
                   <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
@@ -64,15 +64,14 @@
                 
             
 				        <div id="bkueulogin" class="$eIDASVisible">
-				            <img class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
-                    <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+				            <img id="eIDASImage" class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
+                    <form method="get" id="moaideIDASform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
 								      <input type="hidden" name="useeIDAS" value="true" />
 								      <input type="hidden" name="useMandate" id="useMandate" />  
 								      <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                      <input name="bkuButtonEULogin" onclick="setMandateSelection();" type="submit" role="button" value="EULogin" />
+                      <input id="buttonEULogin" name="bkuButtonEULogin" type="submit" role="button" value="EULogin" />
                     </form>
 				        </div>
-                
 						<!--div id="localBKU">
 							<form method="get" id="moaidform" action="$contextPath$submitEndpoint"
 								class="verticalcenter" target="_parent">
@@ -91,7 +90,10 @@
               <!--div id="ssoSessionTransferBlock">
                 <a href="$contextPath$submitEndpoint?pendingid=$pendingReqID&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
               </div-->
-                                  
+            
+                  
+                        
+            
             <!-- 
               <div id="stork" align="center" class="$STORKVISIBLE">
                 <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
diff --git a/id/server/data/deploy/conf/moa-spss/SampleMOASPSSConfiguration.xml b/id/server/data/deploy/conf/moa-spss/SampleMOASPSSConfiguration.xml
index 85d801245..9dede486d 100644
--- a/id/server/data/deploy/conf/moa-spss/SampleMOASPSSConfiguration.xml
+++ b/id/server/data/deploy/conf/moa-spss/SampleMOASPSSConfiguration.xml
@@ -64,7 +64,8 @@
 				<cfg:Id>PVP_metadata</cfg:Id>
 					<cfg:TrustAnchorsLocation>trustProfiles/PVP_metadata</cfg:TrustAnchorsLocation>
 				</cfg:TrustProfile>
-        <cfg:Id>centralnode_metadata</cfg:Id>
+        <cfg:TrustProfile>
+          <cfg:Id>centralnode_metadata</cfg:Id>
 					<cfg:TrustAnchorsLocation>trustProfiles/centralnode_metadata</cfg:TrustAnchorsLocation>
 				</cfg:TrustProfile>
 			</cfg:PathValidation>
diff --git a/id/server/doc/handbook/index.html b/id/server/doc/handbook/index.html
index e72105816..73ece89e3 100644
--- a/id/server/doc/handbook/index.html
+++ b/id/server/doc/handbook/index.html
@@ -29,7 +29,7 @@
   </div>
 
 <div class="container">
-  <h2>&Uuml;bersicht zur Dokumentation der Version 3.3.x </h2>
+  <h2>&Uuml;bersicht zur Dokumentation der Version 3.4.x </h2>
   
   <dl>
     <dt><a href="./intro/intro.html">Einf&uuml;hrung</a></dt>
diff --git a/id/server/doc/handbook/protocol/protocol.html b/id/server/doc/handbook/protocol/protocol.html
index 8f6ed735c..5e38dddf5 100644
--- a/id/server/doc/handbook/protocol/protocol.html
+++ b/id/server/doc/handbook/protocol/protocol.html
@@ -1045,9 +1045,9 @@ https://&lt;host&gt;:&lt;port&gt;/moa-id-auth/LogOut
       <td><strong>Optional:</strong> Gibt an ob eine Anmeldung im Online-Vollmachten-Modus durchgef&uuml;hrt werden soll (=true) oder nicht (=false);</td>
     </tr>
     <tr>
-      <td>CCC=&lt;ccc&gt;</td>
-      <td>BE, SI, </td>
-      <td><strong>Optional:</strong> Gibt an ob die Anmeldung mittels   STORK im angegebenen Land erfolgen soll. Die Angabe erfolgt mit dem   L&auml;ndercode (z.B.: PT, LU, ES, ...) des jeweiligen Landes.</td>
+      <td>useeIDAS=&lt;true/false&gt;</td>
+      <td>true /false</td>
+      <td>Optional: Gibt an ob eine Anmeldung mittels eIDAS erfolgen soll. Wird der Parameter (=true) &uuml;bergeben, startet der Anmeldeprozess mit einer Weiterleitung an den zentralen nationalen eIDAS Connector.</td>
     </tr>
   </tbody>
 </table>
diff --git a/id/server/doc/htmlTemplates/BKU-selection.html b/id/server/doc/htmlTemplates/BKU-selection.html
index 62f954ada..4e548e58c 100644
--- a/id/server/doc/htmlTemplates/BKU-selection.html
+++ b/id/server/doc/htmlTemplates/BKU-selection.html
@@ -48,7 +48,7 @@
 								    <input type="hidden" name="SSO" id="useSSO" /> 
 								    <input type="hidden" name="ccc" id="ccc" /> 
 								    <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                    <input type="submit" value=" Karte " tabindex="5" role="button" onclick="setMandateSelection();" />
+                    <input type="submit" value=" Karte " tabindex="5" role="button" />
                   </form>
                 
                   <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
@@ -64,15 +64,14 @@
                 
             
 				        <div id="bkueulogin" class="$eIDASVisible">
-				            <img class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
-                    <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+				            <img id="eIDASImage" class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
+                    <form method="get" id="moaideIDASform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
 								      <input type="hidden" name="useeIDAS" value="true" />
 								      <input type="hidden" name="useMandate" id="useMandate" />  
 								      <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                      <input name="bkuButtonEULogin" onclick="setMandateSelection();" type="submit" role="button" value="EULogin" />
+                      <input id="buttonEULogin" name="bkuButtonEULogin" type="submit" role="button" value="EULogin" />
                     </form>
 				        </div>
-                
 						<!--div id="localBKU">
 							<form method="get" id="moaidform" action="$contextPath$submitEndpoint"
 								class="verticalcenter" target="_parent">
@@ -91,7 +90,10 @@
               <!--div id="ssoSessionTransferBlock">
                 <a href="$contextPath$submitEndpoint?pendingid=$pendingReqID&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
               </div-->
-                                  
+            
+                  
+                        
+            
             <!-- 
               <div id="stork" align="center" class="$STORKVISIBLE">
                 <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
diff --git a/id/server/idserverlib/pom.xml b/id/server/idserverlib/pom.xml
index 0e8b996ba..67885c409 100644
--- a/id/server/idserverlib/pom.xml
+++ b/id/server/idserverlib/pom.xml
@@ -548,7 +548,15 @@
 						<plugin>

 				<groupId>org.apache.maven.plugins</groupId>

 				<artifactId>maven-javadoc-plugin</artifactId>

-				<version>2.9.1</version>

+				<version>3.0.1</version>

+				<dependencies>

+					<dependency>

+    					<groupId>javax.annotation</groupId>

+    					<artifactId>javax.annotation-api</artifactId>

+					    <version>1.3.1</version>

+					    <scope>compile</scope>

+					</dependency>

+				</dependencies>

 				<configuration>

 					<charset>UTF-8</charset>

 					<docencoding>UTF-8</docencoding>

@@ -584,8 +592,9 @@
 							<goal>jar</goal>

 						</goals>

 						<configuration>

-                <additionalparam>-Xdoclint:none</additionalparam>

-            </configuration>

+                			<additionalparam>-Xdoclint:none</additionalparam>

+                			<additionalOptions>--add-modules ALL-MODULE-PATH</additionalOptions>

+            			</configuration>	

 					</execution>

 				</executions>

 			</plugin>

diff --git a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small_deactivated.png b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small_deactivated.png
new file mode 100644
index 000000000..21050502f
--- /dev/null
+++ b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/img/eIDAS_small_deactivated.png
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/index.html b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/index.html
index 7fc2b0298..13fe891b7 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/index.html
+++ b/id/server/moa-id-frontend-resources/src/main/resources/mainGUI/index.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf8" >
-        <title>MOA-ID 3.3.x</title>
+        <title>MOA-ID 3.4.x</title>
         <link rel="stylesheet" href="./common/main.css" type="text/css">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         <link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
@@ -72,20 +72,20 @@
                 <ul>
                     <!--li><a href="_index.html">Allgemein</a></li-->
                     <!--li><a href="http://joinup.ec.europa.eu/site/moa-idspss/">Dokumentation</a></li-->
-                    <li><a href="http://joinup.ec.europa.eu/site/moa-idspss/moa-id-3.x/doc/handbook">Dokumentation</a></li>
+                    <li><a href="https://apps.egiz.gv.at/handbooks/moa-id/handbook/index.html">Dokumentation</a></li>
                     <!--Link zu den Demo-Clients-->
-                    <li><a href=#>Demo Clients</a></li>
+                    <!--li><a href=#>Demo Clients</a></li-->
                     <!--Link zum Konfigtool-->
-                    <li><a href="https://localhost:8443/moa-id-configuration">Konfiguration GUI</a></li>
-                    <li><a href="./TransferSSOSession">Transfer Single Sign-On Session to Smartphone App</a></li>
+                    <!--li><a href="https://localhost:8443/moa-id-configuration">Konfiguration GUI</a></li-->
+                    <!--li><a href="./TransferSSOSession">Transfer Single Sign-On Session to Smartphone App</a></li-->
                 	
                 </ul>
             </nav>
-        <div id="demologin" class="container">
+        <!--div id="demologin" class="container">
             <br/>
             <a href="#" id="loginButton" class="button" onClick="PVP2LoginIframe('https://menja.iaik.tugraz.at:8443/moa-id-oa/servlet/pvp2login')">Login</a>
             <p id="loginText">Über den Login-Button können Sie sich anschließend bei Ihrer Online-Applikation mit der Bürgerkarte oder der Handysignatur anmelden. Dazu müssen Sie allerdings zuvor die Applikation gemäß <a href="http://joinup.ec.europa.eu/site/moa-idspss/moa-id-3.x/doc/handbook/application/application.html#DemoApp_pvp21">Beschreibung</a> konfigurieren.</p>
-        </div>
+        </div-->
         </div>
 
     </body>
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 f95106c5a..40e8eae7a 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
@@ -1,705 +1,368 @@
 @charset "utf-8";
-	@media screen and (min-width: 650px) {
-			
-				body {
-					margin:0;
-					padding:0;
-					color : #000;
-					background-color : #fff;
-			  	text-align: center;
-			  	background-color: #6B7B8B;
-				}
-                
-                .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        }
-				
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        
-        #localBKU input{
-          font-size: 0.85em;
-          /*border-radius: 5px;*/
-        }
-        
-         #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
-          font-size: 0.85em;
-          /*border-radius: 7px;*/
-          margin-bottom: 25px;
-          min-width: 80px;
-         }
-        
-        #mandateLogin {
-          font-size: 0.85em;
-        }
-        
-        #bku_header h2 {
-          font-size: 0.8em;
-        } 
-        
-        
-			  #page {
-			    display: block;
-			    border: 2px solid rgb(0,0,0);
-			    width: 650px;
-			    height: 460px;
-			    margin: 0 auto;
-			    margin-top: 5%;
-			    position: relative;
-			    border-radius: 25px;
-			    background: rgb(255,255,255);
-			  }
-			  
-			  #page1 {
-			    text-align: center;
-			  }
+    body {
+        margin:0;
+        padding:0;
+        color : #000;
+        background-color : #fff;
+        text-align: left;
+        background-color: #E6E6E6;
+    }
+
+    .browserInfoButton{
+        color: rgb(128, 128, 128); 
+    }	
+    
+    #page {
+        display: block;
+        margin: 0 auto;
+        margin-top: 5%;
+        position: relative;
+        background: rgb(255,255,255);
+    }
 			  
-			  #main {
-			    /*	clear:both; */
-				  position:relative;
-			    margin: 0 auto;
-			    /*width: 250px;*/
-			    text-align: center;
-			  }
+    #page1 {
+        padding-top: 1%;
+        text-align: center;
+    }
 			  
-			  .OA_header {
-			/*	  background-color: white;*/
-			    font-size: 20pt;
-			    margin-bottom: 25px;
-			    margin-top: 25px;
-			  }
-			 #alert_area {
-        width: 500px;
-        padding-left: 80px;
-        }
-			  #leftcontent {
-			    /*float:left; */
-				  width:250px;
-				  margin-bottom: 25px;
-			    text-align: left;
-			    border: 1px solid rgb(0,0,0);
-			  }
-			  			  
-			  #selectArea {
-				 font-size: 15px;
-				 padding-bottom: 65px;
-			  }
-			
-			  #leftcontent {
-				 width: 400px;
-				 /*margin-top: 30px;*/
-         margin: auto;
-			  }
-			
-        #bku_header {
-          height: 5%;
-          padding-bottom: 3px;
-          padding-top: 3px;
-        }
-      
-        #bkulogin {
-            overflow:hidden;	
-            min-width: 190px;
-            min-height: 180px;
-          /*height: 260px;*/	
-			  }
-      
-        h2#tabheader{
-				  font-size: 1.1em; 
-          padding-left: 2%;
-          padding-right: 2%;
-          position: relative;
-			  }
-      	
-        #stork h2 {
-          font-size: 1.0em;
-          margin-bottom: 2%;
-        }
-        		  
-			  .setAssertionButton_full {
-			  	background: #efefef;
-				  cursor: pointer;
-				  margin-top: 15px;
-			    width: 100px;
-			    height: 30px
-			  }
-			
-			  #leftbutton  {
-				 width: 30%; 
-				 float:left; 
-				 margin-left: 40px;
-			  }
-            #centerbutton {
-                width: 30%
-                float: middle; 
-            }
-			
-			
-			  #rightbutton {
-				 width: 30%; 
-				 float:right; 
-				 margin-right: 40px; 
-				 text-align: right;
-			  }
-        
-        button {
-          height: 25px;
-          width: 75px;
-          margin-bottom: 10px;
-        }
-        
-        
-        
-       #validation {
-        position: absolute;
-        bottom: 0px;
-        margin-left: 270px;
-        padding-bottom: 10px;
-      }
-			
+    #main {
+        float:left;
+        width: 100%;
+        text-align: center;
+    }
+       
+    h2#tabheader{
+        font-size: 1.0em; 
+        padding-left: 2%;
+        padding-right: 2%;
+        position: relative;
+    }
+
+    #bkulogin {	
+        min-width: 200px;
+        min-height: 155px;
+        margin-bottom: 5%;
+    }
+    #mandateLogin {
+        padding-bottom: 1%;
+        padding-top: 2%;
+        position: relative;
+        text-align: left;
 			}
 
-      @media screen and (max-width: 205px) {
-        #localBKU p {
-          font-size: 0.6em;
-        }
-       .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        }
-        
-        #localBKU input {
-          font-size: 0.6em;
-          min-width: 60px;
-         /* max-width: 65px; */
-          min-height: 1.0em;
-         /* border-radius: 5px; */
-        }
-        
-        #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
-          font-size: 0.7em;
-          min-width: 55px;
-          /*min-height: 1.1em;
-          border-radius: 5px;*/
-          margin-bottom: 2%
-        }
-        
-        #mandateLogin {
-          font-size: 0.65em;
-        }
-        
-        #bku_header h2 {
-          font-size: 0.8em;
-          margin-top: -0.4em;
-          padding-top: 0.4em;
-        }
-        
-        #bkulogin {
-        min-height: 150px;
-        } 
+   .unvisible {
+       visibility: hidden;
       }
 
-      @media screen and (max-width: 249px) and (min-width: 206px) {
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        }
-        
-        #localBKU input {
-          font-size: 0.7em;
-          min-width: 70px;
-       /*    max-width: 75px;    */
-          min-height: 0.95em;
-        /*  border-radius: 6px;    */
-        }
-        
-        #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit] {
-          font-size: 0.75em;
-          min-width: 60px;
-      /*    min-height: 0.95em;
-          border-radius: 6px;    */
-          margin-bottom: 5%
-        }
-        
-        #mandateLogin {
-          font-size: 0.75em;
-        }
-        
-        #bku_header h2 {
-          font-size: 0.9em;
-          margin-top: -0.45em;
-          padding-top: 0.45em;
-        }
-        
-        #bkulogin {
-          min-height: 180px;
-        }  
-      }
+    .OA_header {
+			/*	  background-color: white;*/
+        font-size: 2.1em;
+        margin-bottom: 1%;
+        margin-top: 1%;
+    }
 
-      @media screen and (max-width: 299px) and (min-width: 250px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        }
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-       /*    max-width: 75px;      */
-      /*    border-radius: 6px;  */
-        }
-        
-        #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit] {
-          font-size: 0.85em;
-     /*     min-height: 1.05em;
-          border-radius: 7px;        */
-          margin-bottom: 10%;
-        }
-        
-        #mandateLogin {
-          font-size: 1em;
-        }
-        
-        #bku_header h2 {
-          font-size: 1.0em;
-          margin-top: -0.50em;
-          padding-top: 0.50em;
-        } 
+    #ssoSessionTransferBlock {
+        font-size: 0.8em;
+        margin-left: 1%;
+        margin-bottom: 1%;
       }
 
-      @media screen and (max-width: 399px) and (min-width: 400px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        }
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 75px;     */
-      /*    border-radius: 6px;       */
-        }
-        
-        #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit] {
-          font-size: 0.9em;
-   /*       min-height: 1.2em;
-          border-radius: 8px;          */
-          margin-bottom: 10%;
-          max-width: 80px;
-        }
-        
-        #mandateLogin {
-          font-size: 1em;
-        }
-        
-        #bku_header h2 {
-          font-size: 1.1em;
-          margin-top: -0.55em;
-          padding-top: 0.55em;
-        } 
+    #processInfoArea {
+        margin-bottom: 4%;
+        margin-top: 4%;
+    }
+
+    #processSelectionArea {
+        width: 550px;
+        margin-left: 25px;
+        margin-top: 35px;
+    }
+
+    .processSelectionButtonArea {
+        float: none;
+        margin-bottom: 5%;
+        height: 35px;
+    }
+
+    .processSelectionButton {
+        background: #ababab;
+        cursor: pointer;
+        height: 40px;
+        width: 200px;
+        float: right;
+    }
+
+    .buttonDescription {
+        float: left;
+        margin-left: 10px;
+        padding-bottom: 0.4em;
+        text-align: left;
+        width: 60%;
+    }
+    
+    #processContent {
+        margin-top: 10%;
       }
-      
-      @media screen and (max-width: 649px) and (min-width: 400px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-       .browserInfoButton{
-         color: rgb(128, 128, 128); 
-        } 
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 80px;       */
-     /*     border-radius: 6px;          */
-        }
-        
-        #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit] {
-          font-size: 1.0em;
-     /*      min-height: 1.3em;
-         border-radius: 10px;         */
-          margin-bottom: 10%;
-          max-width: 85px;
-        }
-        
-        #mandateLogin {
-          font-size: 1.2em;
-        }
-        
-        #bku_header h2 {
-          font-size: 1.3em;
-          margin-top: -0.65em;
-          padding-top: 0.65em;
-        } 
+
+    #eIDASSelection {
+        width: 120px; 
+        margin-right: 5px;        
       }
 
+     #bkukarte {
+        float:left;
+        width:33%;
+        text-align:center;
+        margin-top: 2%;
+    }
 
-			
-			@media screen and (max-width: 649px) {
-				
-        body {
-					margin:0;
-					padding:0;
-					color : #000;
-			  	text-align: center;
-          font-size: 100%;
-			  	background-color: $MAIN_BACKGOUNDCOLOR;
-				}
-        		.browserInfoButton{
-                    color: rgb(128, 128, 128); 
-                }		
-			  #page {
-			     visibility: hidden;
-			     margin-top: 0%;
-			  }
-			  
-			  #page1 {
-			    visibility: hidden;
-			  }
-			  
-			  #main {
-			    visibility: hidden;
-			  }
-        
-        #validation {
-          visibility: hidden;
-          display: none;
-        }
-			  
-			  .OA_header {
-			    margin-bottom: 0px;
-			    margin-top: 0px;
-			    font-size: 0pt;
-			    visibility: hidden;
-			  }
-			  
-        #alert_area {
-          visibility: visible;
-          width: 250px;
-        }
-        #alert_area > p:first-child {
-          display: none;
-          visibility: hidden;
-        }
-        
-                #leftcontent {
-			     visibility: visible;
-			     margin-bottom: 0px;
-			     text-align: left;
-			     border:none;
-                vertical-align: middle;
-                min-height: 173px;
-                min-width: 204px;
-			  }
-			  
-        #bku_header {
-          height: 10%;
-          min-height: 1.2em;
-          margin-top: 1%;
-        }
-        
-        h2#tabheader{
-          padding-left: 2%;
-          padding-right: 2%;
-          position: relative;
-          top: 50%;
-			  }
-        
-        #stork h2 {
-          font-size: 0.9em;
-          margin-bottom: 2%;
-        }
-        
-       	#bkulogin {	
-          min-width: 190px;
-          min-height: 155px;	
-			 }
+    #bkuhandy {
+        float:left;
+        width:33%;
+        text-align:center;
+        margin-top: 2%;
+    }
+
+    #bkueulogin {
+        display:block;
+        float:left;
+        text-align:center;
+        width:33%;
+        margin-top: 2%;
+    }
+
+    .bkuimage {
+        width: 55%;
+    }
+
+    input {
+        width:auto;
+        cursor: pointer;
         
-			 .setAssertionButton_full {
-			     	background: #efefef;
-				    cursor: pointer;
-				    margin-top: 15px;
-			      width: 70px;
-			      height: 25px;
-			 }
-       
-        input[type=button],input[type=submit] {
-/*          height: 11%;  */
-          width: 70%;
-        }
-			}
-			      
-			* {
-				margin: 0;
-				padding: 0;
-				#if($FONTTYPE)
-        	font-family: $FONTTYPE;
-        #end
-			}
-							      			
-			#selectArea {
-				padding-top: 10px;
-				padding-bottom: 55px;
-				padding-left: 10px;
-			}
-			
-			.setAssertionButton {
-				background: #efefef;
-				cursor: pointer;
-				margin-top: 15px;
-			  width: 70px;
-			  height: 25px;
-			}
-			
-			#leftbutton  {
-				width: 30%; 
-				float:left; 
-				margin-left: 15px;
-			}
+    }
 
+  #localBKU input {
+    display: inline-block;
+
+  }
 			
-			#rightbutton {
-				width: 30%; 
-				float:right; 
-				margin-right: 25px; 
-				text-align: right;
-			}
+  #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
+    /*text-decoration: underline;*/
+  }
+
+    #installJava, #BrowserNOK {
+        clear:both;
+        font-size:0.8em;
+        padding:4px;
+    }
+
 			
-      #ssoSessionTransferBlock {
+    #ssoSessionTransferBlock {
         clear: both;
-      }
-      
-			#stork {
-			    /*margin-bottom: 10px;*/
-			   /* margin-top: 5px; */
-         clear: both;
-			}
+  }
+
+    #stork {
+        clear: both;
+    }
       			
-      #mandateLogin {
-        padding-bottom: 4%;
-        padding-top: 4%;
-        height: 10%;
-        position: relative;
-        text-align: left;
-			}
+
       
-      .verticalcenter {
+    .verticalcenter {
         vertical-align: middle;
       }
 
     .mandate{
         float: left;
-        margin-left: 4%;
+        margin-left: 2%;
+        font-size: 1.3em;
     }
       
-      #mandateLogin div {
+    #mandateLogin div {
         clear: both;
         margin-top: -1%;
         position: relative;
         top: 50%;
-      }
-      
-      #bkuselectionarea {
-          position: relative;
-          display: block;
-      }
-      
-      #localBKU {
+    }
+         
+    #localBKU {
         padding-bottom: 4%;
         /*padding-top: 4%;*/
         position: relative;
         clear: both;     
         text-align: center;
-			}
-          			
-			#bkukarte {
-				float:left;
-				text-align:center;
-				width:33%;
-                min-height: 90px;
-
-                padding-top: 2%;
-			}
-			
-			#bkuhandy {
-				float:left;
-				text-align:center;
-				width:33%;
-                min-height: 90px;
-
-                padding-top: 2%;
-			}
-            #bkueulogin {
-            float:left;
-            text-align:center;
-            width:33%;
-            min-height: 90px;
-            padding-top: 2%;
-         
-        }
-			
-            .bkuimage {
-            width: 55%;
-            height: auto;
-            margin-bottom: 10%;
-            }
-      
-			#mandate{
-				text-align:left;
-				padding : 5px 5px 5px 5px;
-			}
-      
-/*		input[type=button], .sendButton {
-				background: $BUTTON_BACKGROUNDCOLOR;
-        color: $BUTTON_COLOR;
-/*				border:1px solid #000;  */
-/*				cursor: pointer;
-/*        box-shadow: 3px 3px 3px #222222;  */
-/*			}
-			
-/*      button:hover, button:focus, button:active, 
-      .sendButton:hover , .sendButton:focus, .sendButton:active,
-      #mandateCheckBox:hover, #mandateCheckBox:focus, #mandateCheckBox:active {
-				background: $BUTTON_BACKGROUNDCOLOR_FOCUS;
-        color: $BUTTON_COLOR;
-/*				border:1px solid #000;                */
-/*				cursor: pointer;
-/*        box-shadow: -1px -1px 3px #222222;  */
-/*			}
-      
-*/      
-			input {
-				/*border:1px solid #000;*/
-				cursor: pointer;
-			}
-      
-      #localBKU input {
-/*        color: $BUTTON_COLOR;  */
-        /*border: 0px;*/
-        display: inline-block;
-        
-      }
-			
-      #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
-        /*text-decoration: underline;*/
-      }
-      
-			#installJava, #BrowserNOK {
-				clear:both;
-				font-size:0.8em;
-				padding:4px;
-			}
-						
-			.selectText{
-			
-			}
-			
+    }
+    
+    #selectArea {
+        width:90%;
+        padding-left: 4%
+    }
 
-			.selectTextHeader{
-			
-			}
-			
-			.sendButton {
-        width: 30%;
-        margin-bottom: 1%;	
-			}
-			
-			#leftcontent a {
-				text-decoration:none; 
-				color: #000;
-			/*	display:block;*/
-				padding:4px;	
-			}
-			
-			#leftcontent a:hover, #leftcontent a:focus, #leftcontent a:active {
-				text-decoration:underline;
-				color: #000;	
-			}
-						
-			.infobutton {
-				background-color: #005a00;
-				color: white;
-				font-family: serif;
-				text-decoration: none;
-				padding-top: 2px;
-				padding-right: 4px;
-				padding-bottom: 2px;
-				padding-left: 4px;
-				font-weight: bold;
-			}
-			
-			.hell {
-				background-color : $MAIN_BACKGOUNDCOLOR;
+    .setAssertionButton {
+        background: #efefef;
+        cursor: pointer;
+        margin-top: 15px;
+        width: 70px;
+        height: 25px;
+    }
+    #leftcontent {
+        width: 70%;
+        margin-bottom: 4%;
+        text-align: left;
+        border: 1px solid rgb(0,0,0);
+        margin:auto;
+    }
+    .hell {
+        background-color : $MAIN_BACKGOUNDCOLOR;
         color: $MAIN_COLOR;	
-			}
+    }
 			
-			.dunkel {
-				background-color: $HEADER_BACKGROUNDCOLOR;
+    .dunkel {
+        background-color: $HEADER_BACKGROUNDCOLOR;
         color: $HEADER_COLOR;
-			}
-			      
-			.main_header {
-			   color: black;
-			    font-size: 32pt;
-			    position: absolute;
-			    right: 10%;
-			    top: 40px;
-				
-			}
-      
-      #ssoSessionTransferBlock {
-        font-size: 0.8em;
-        margin-left: 5px;
-        margin-bottom: 5px;
+    }
+
+
+@media screen and (min-width: 650px) {
+			        
+    #page {
+         width: 650px;
+         height: 460px;		    
+    }
+        
+    #localBKU p {
+        font-size: 0.7em;
+    } 
+        
+    #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 {
+         font-size: 15px;
+         padding-bottom: 65px;
       }
-      #processInfoArea {
-        margin-bottom: 15px;
+			      	
+    #stork h2 {
+        font-size: 1.0em;
+        margin-bottom: 2%;
+    }
+        		  
+    .setAssertionButton_full {
+        background: #efefef;
+        cursor: pointer;
         margin-top: 15px;
-      }
-      #processSelectionArea {
-        width: 550px;
-        margin-left: 25px;
-        margin-top: 35px;
-      }
-      .processSelectionButtonArea {
-        float: none;
-        margin-bottom: 20px;
-        height: 35px;
-      }
-      .processSelectionButton {
-        background: #ababab;
-				cursor: pointer;
-        height: 30px;
-        width: 200px;
-        float: right;
-        border-style: solid;
-        border-bottom-width: 2px;
-        border-right-width: 2px;
-        border-left-width: 1px;
-        border-top-width: 1px;
-        border-color: #000000;
-      }
-      .buttonDescription {
-        float: left;
-        margin-left: 10px;
-        padding-top: 4px;
-        text-align: left;
-        width: 330px;
-      }
-      #processContent {
-        margin-top: 25px;
-      }
-      #eIDASButton {
-         /*color:#FFF;*/
-      }
-      #eIDASSelection {
-        width: 120px; 
-        margin-right: 5px;        
-      }
-      .unvisible {
+        width: 100px;
+        height: 30px
+    }
+             
+        
+    #validation {
+        position: absolute;
+        bottom: 0px;
+        margin-left: 270px;
+        padding-bottom: 10px;
+    }			
+}
+
+
+
+@media screen and (max-width: 649px) {
+				
+    body {
+        background-color:#fff;
+    }
+                	  
+    #page {
+        visibility: hidden;
+        margin-top: 0%;
+    }
+			  
+    #page1 {
+        visibility: hidden;
+    }
+			  
+    #main {
+        visibility: hidden;
+    }
+        
+    #validation {
+        visibility: hidden;
         display: none;
-      }
\ No newline at end of file
+    }
+			  
+    .OA_header {
+        margin-bottom: 0%;
+        margin-top: 0%;
+        font-size: 0pt;
+        visibility: hidden;
+    }
+			  
+    #alert_area {
+        visibility: visible;
+        width: 250px;
+    }
+    
+    #alert_area > p:first-child {
+        display: none;
+        visibility: hidden;
+    }
+
+        
+    h2#tabheader{
+        font-size: 1.5em;
+        position: relative;
+    }
+    .mandate{
+        font-size: 1.0em;
+    }
+        
+    #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;
+        margin-top: 15px;
+        width: 70px;
+        height: 25px;
+    }
+       
+    input[type=button],input[type=submit] {
+        width:65%;
+    }
+}      
\ No newline at end of file
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js b/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js
index 313f14b4a..15b82614c 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/javascript_tempalte.js
@@ -84,9 +84,9 @@ function isIE() {
 /* 			setSSOSelection(); */
 			
 			var ccc = "AT";
-			var countrySelection = document.getElementById("eIDASSelection");
+			var countrySelection = document.getElementById("cccSelection");
 			if (countrySelection !=  null) {
-				ccc = document.getElementById("eIDASSelection").value;
+				ccc = document.getElementById("cccSelection").value;
 			}
 			var iFrameURL = "$contextPath$submitEndpoint" + "?";			
 			iFrameURL += "&pendingid=" + "$pendingReqID";
@@ -238,7 +238,22 @@ function isIE() {
     }
     function setUseMandateFlag(e) {
       /*document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);*/
-      e.setAttribute("aria-checked", e.checked);
+      e.target.setAttribute("aria-checked", e.target.checked);
+      if (e.target.checked) {
+        var image = document.getElementById("eIDASImage");
+        var srcatt = image.getAttribute("src");
+        var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+        srcatt = srcatt.replace(last,'eIDAS_small_deactivated.png');    
+        image.setAttribute("src",srcatt);
+        document.getElementById("buttonEULogin").disabled=true;
+      } else {
+          var image = document.getElementById("eIDASImage");
+          var srcatt = image.getAttribute("src");
+          var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+          srcatt = srcatt.replace(last,'eIDAS_small.png');    
+          image.setAttribute("src",srcatt);
+          document.getElementById("buttonEULogin").disabled=false      
+      }            
     }
     
     document.addEventListener('resize', onChangeChecks);
@@ -246,7 +261,7 @@ function isIE() {
       document.querySelector('#mandateCheckBox').addEventListener('click', setUseMandateFlag);
       document.querySelector('#moaidform>input[type=submit]').addEventListener('click', setMandateSelection);
       document.querySelector('#bkuhandy>input[type=button]').addEventListener('click', bkuHandyClicked);
-      document.querySelector('#stork button[type=button]').addEventListener('click', storkClicked);
+      document.querySelector('#moaideIDASform>input[type=submit]').addEventListener('click', setMandateSelection);
       onChangeChecks(); 
     });
     
diff --git a/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html b/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
index 1a78ffd1a..4e548e58c 100644
--- a/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
+++ b/id/server/moa-id-frontend-resources/src/main/resources/templates/loginFormFull.html
@@ -4,10 +4,10 @@
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
    <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-   <link rel="stylesheet" href="/css_template.css"/>
+   <link rel="stylesheet" href="$contextPath/css/buildCSS?pendingid=$pendingReqID"/>
    
    <!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
-   <script src="/javascript_tempalte.js"></script>
+   <script src="$contextPath/js/buildJS?pendingid=$pendingReqID"></script>
    
 
 <title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title>
@@ -37,41 +37,40 @@
 						</div>
 						<div id="bkuselectionarea">
 							<div id="bkukarte">
-								<img id="bkuimage" class="bkuimage" src="/img/karte.png" alt="OnlineBKU"/> 
+								<img id="bkuimage" class="bkuimage" src="$contextPath/img/karte.png" alt="OnlineBKU"/> 
                 
-                <!-- Remove support for Online BKU and swith the card button to local BKU-->
-                <!--input name="bkuButtonOnline" type="button" onClick="bkuOnlineClicked();" tabindex="2" role="button" value="Karte" /-->                
+                  <!-- Remove support for Online BKU and swith the card button to local BKU-->
+                  <!--input name="bkuButtonOnline" type="button" onClick="bkuOnlineClicked();" tabindex="2" role="button" value="Karte" /-->                
                 
-                                <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
-								  <input type="hidden" name="bkuURI" value="$bkuLocal" />
-								  <input type="hidden" name="useMandate" id="useMandate" /> 
-								  <input type="hidden" name="SSO" id="useSSO" /> 
-								  <input type="hidden" name="ccc" id="ccc" /> 
-								  <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                                    <input type="submit" value=" Karte " tabindex="5" role="button">
-                                </form>
+                  <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+								    <input type="hidden" name="bkuURI" value="$bkuLocal" />
+								    <input type="hidden" name="useMandate" id="useMandate" /> 
+								    <input type="hidden" name="SSO" id="useSSO" /> 
+								    <input type="hidden" name="ccc" id="ccc" /> 
+								    <input type="hidden" name="pendingid" value="$pendingReqID" /> 
+                    <input type="submit" value=" Karte " tabindex="5" role="button" />
+                  </form>
                 
-                            <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
+                  <iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/feature/bkuDetection?pendingid=$pendingReqID"></iframe>
                 
-                                <!-- BKU detection with static template-->
-                                <!--iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/iframeLBKUdetect.html"></iframe-->
-                                                            
+                  <!-- BKU detection with static template-->
+                  <!--iframe name="bkudetect" width="0" height="0" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="$contextPath/iframeLBKUdetect.html"></iframe-->                                                            
 				        </div>
                             
 				        <div id="bkuhandy">
-				            <img class="bkuimage" src="/img/handysign.png" alt="HandyBKU" />         
+				            <img class="bkuimage" src="$contextPath/img/handysign.png" alt="HandyBKU" />         
                             <input name="bkuButtonHandy" type="button" tabindex="3" role="button" value="HANDY" />
 				        </div>
                 
             
-				        <div id="bkueulogin">
-				            <img class="bkuimage" src="/img/eIDAS_small.png" alt="EULogin" />                                                        
-                              <form method="get" id="moaidform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
-								  <input type="hidden" name="useeIDAS" value="true" />
-								  <input type="hidden" name="useMandate" id="useMandate" />  
-								  <input type="hidden" name="pendingid" value="$pendingReqID" /> 
-                                  <input name="bkuButtonEULogin" onclick="setMandateSelection();" type="button" role="button" value="EULogin" />
-                                </form>
+				        <div id="bkueulogin" class="$eIDASVisible">
+				            <img id="eIDASImage" class="bkuimage" src="$contextPath/img/eIDAS_small.png" alt="EULogin" />                                                        
+                    <form method="get" id="moaideIDASform" action="$contextPath$submitEndpoint" class="verticalcenter" target="_parent">
+								      <input type="hidden" name="useeIDAS" value="true" />
+								      <input type="hidden" name="useMandate" id="useMandate" />  
+								      <input type="hidden" name="pendingid" value="$pendingReqID" /> 
+                      <input id="buttonEULogin" name="bkuButtonEULogin" type="submit" role="button" value="EULogin" />
+                    </form>
 				        </div>
 						<!--div id="localBKU">
 							<form method="get" id="moaidform" action="$contextPath$submitEndpoint"