generate CSS und JS for GUI dynamically.

Now all html templates must not include it's on CSS and JS as inline code

7 files changed, 898 insertions, 2139 deletions

diff --git a/id/server/idserverlib/src/main/resources/resources/templates/css_template.css b/id/server/idserverlib/src/main/resources/resources/templates/css_template.css
new file mode 100644
index 000000000..4a771fcac
--- /dev/null
+++ b/id/server/idserverlib/src/main/resources/resources/templates/css_template.css
@@ -0,0 +1,623 @@
+@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] {
+          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;
+			  }
+			  
+			  #main {
+			    /*	clear:both; */
+				  position:relative;
+			    margin: 0 auto;
+			    width: 250px;
+			    text-align: center;
+			  }
+			  
+			  .OA_header {
+			/*	  background-color: white;*/
+			    font-size: 20pt;
+			    margin-bottom: 25px;
+			    margin-top: 25px;
+			  }
+			
+			  #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: 300px;
+				 margin-top: 30px;
+			  }
+			
+        #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;
+			  }
+			
+			  #rightbutton {
+				 width: 30%; 
+				 float:right; 
+				 margin-right: 45px; 
+				 text-align: right;
+			  }
+        
+        button {
+          height: 25px;
+          width: 75px;
+          margin-bottom: 10px;
+        }
+        
+        
+        
+       #validation {
+        position: absolute;
+        bottom: 0px;
+        margin-left: 270px;
+        padding-bottom: 10px;
+      }
+			
+			}
+
+      @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] {
+          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;
+        } 
+      }
+
+      @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] {
+          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;
+        }  
+      }
+
+      @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] {
+          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;
+        } 
+      }
+
+      @media screen and (max-width: 399px) and (min-width: 300px) {
+        #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] {
+          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;
+        } 
+      }
+      
+      @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] {
+          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;
+        } 
+      }
+
+
+			
+			@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;
+			  }
+			
+			  #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;	
+			 }
+        
+			 .setAssertionButton_full {
+			     	background: #efefef;
+				    cursor: pointer;
+				    margin-top: 15px;
+			      width: 70px;
+			      height: 25px;
+			 }
+       
+        input[type=button] {
+/*          height: 11%;  */
+          width: 70%;
+        }
+			}
+			      
+			* {
+				margin: 0;
+				padding: 0;
+        font-family: #FONTTYPE#;
+			}
+							      			
+			#selectArea {
+				padding-top: 10px;
+				padding-bottom: 55px;
+				padding-left: 10px;
+			}
+			
+			.setAssertionButton {
+				background: #efefef;
+				cursor: pointer;
+				margin-top: 15px;
+			  width: 70px;
+			  height: 25px;
+			}
+			
+			#leftbutton  {
+				width: 35%; 
+				float:left; 
+				margin-left: 15px;
+			}
+			
+			#rightbutton {
+				width: 35%; 
+				float:right; 
+				margin-right: 25px; 
+				text-align: right;
+			}
+			
+			#stork {
+			    /*margin-bottom: 10px;*/
+			   /* margin-top: 5px; */
+			}
+      			
+      #mandateLogin {
+        padding-bottom: 4%;
+        padding-top: 4%;
+        height: 10%;
+        position: relative;
+        text-align: center;
+			}
+      
+      .verticalcenter {
+        vertical-align: middle;
+      }
+      
+      #mandateLogin div {
+        clear: both;
+        margin-top: -1%;
+        position: relative;
+        top: 50%;
+      }
+      
+      #bkuselectionarea {
+          position: relative;
+          display: block;
+      }
+      
+      #localBKU {
+        padding-bottom: 4%;
+        /*padding-top: 4%;*/
+        position: relative;
+        clear: both;     
+        text-align: center;
+			}
+          			
+			#bkukarte {
+				float:left;
+				text-align:center;
+				width:40%;
+        min-height: 70px;
+        padding-left: 5%;
+        padding-top: 2%;
+			}
+			
+			#bkuhandy {
+				float:right;
+				text-align:center;
+				width:40%;
+        min-height: 90px;
+        padding-right: 5%;
+        padding-top: 2%;
+			}
+			
+      .bkuimage {
+        width: 90%;
+        height: auto;
+      }
+      
+			#mandate{
+				text-align:center;
+				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{
+			
+			}
+			
+			.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#;
+        color: #MAIN_COLOR#;	
+			}
+			
+			.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;
+      }
+      
+      #alert_area {
+        width: 500px;
+        padding-left: 80px;
+      }
\ No newline at end of file
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/error_message.html b/id/server/idserverlib/src/main/resources/resources/templates/error_message.html
index 8e6751656..6cc8b99e2 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/error_message.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/error_message.html
@@ -1,380 +1,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <link rel="stylesheet" href="#CONTEXTPATH#/css/buildCSS" />
   
-   <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-    <style type="text/css">
-			@media screen and (min-width: 650px) {
-			
-				body {
-					margin:0;
-					padding:0;
-					color : #000;
-					background-color : #fff;
-			  	text-align: center;
-			  	background-color: #6B7B8B;
-				}
-  
-			  #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;
-			  }
-			  
-			  #main {
-			    /*	clear:both; */
-				  position:relative;
-			    margin: 0 auto;
-			    width: 250px;
-			    text-align: center;
-			  }
-			  
-			  .OA_header {
-			/*	  background-color: white;*/
-			    font-size: 20pt;
-			    margin-bottom: 25px;
-			    margin-top: 25px;
-			  }
-			
-			  #leftcontent {
-			    /*float:left; */
-				  width:250px;
-				  margin-bottom: 25px;
-			    text-align: left;
-			    /*border: 1px solid rgb(0,0,0);*/
-			  }
-			
-			  #leftcontent {
-				 width: 300px;
-				 margin-top: 30px;
-			  }
-      
-        h2#tabheader{
-				  font-size: 1.1em; 
-          padding-left: 2%;
-          padding-right: 2%;
-          position: relative;
-			  }
-        		  
-			  .setAssertionButton_full {
-			  	background: #efefef;
-				  cursor: pointer;
-				  margin-top: 15px;
-			    width: 100px;
-			    height: 30px
-			  }
-			
-			  #leftbutton  {
-				 width: 30%; 
-				 float:left; 
-				 margin-left: 40px;
-			  }
-			
-			  #rightbutton {
-				 width: 30%; 
-				 float:right; 
-				 margin-right: 45px; 
-				 text-align: right;
-			  }
-        
-        button {
-          height: 25px;
-          width: 75px;
-          margin-bottom: 10px;
-        }
-        
-       #validation {
-        position: absolute;
-        bottom: 0px;
-        margin-left: 270px;
-        padding-bottom: 10px;
-      }
-			
-			}
-
-      @media screen and (max-width: 205px) {
-        #localBKU p {
-          font-size: 0.6em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.6em;
-          min-width: 60px;
-         /* max-width: 65px; */
-          min-height: 1.0em;
-         /* border-radius: 5px; */
-        }
-        
-      }
-
-      @media screen and (max-width: 249px) and (min-width: 206px) {
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.7em;
-          min-width: 70px;
-       /*    max-width: 75px;    */
-          min-height: 0.95em;
-        /*  border-radius: 6px;    */
-        }
-         
-      }
-
-      @media screen and (max-width: 299px) and (min-width: 250px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-       /*    max-width: 75px;      */
-      /*    border-radius: 6px;  */
-        }
-
-      }
-
-      @media screen and (max-width: 399px) and (min-width: 300px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 75px;     */
-      /*    border-radius: 6px;       */
-        }
-
-      }
-      
-      @media screen and (max-width: 649px) and (min-width: 400px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 80px;       */
-     /*     border-radius: 6px;          */
-        }
-
-      }
-
-
-			
-			@media screen and (max-width: 649px) {
-				
-        body {
-					margin:0;
-					padding:0;
-					color : #000;
-			  	text-align: center;
-          font-size: 100%;
-			  	background-color: #MAIN_BACKGOUNDCOLOR#;
-				}
-        				
-			  #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;
-			  }
-			
-			  #leftcontent {
-			    visibility: visible;
-			    margin-bottom: 0px;
-			    text-align: left;
-			    border:none;
-          vertical-align: middle;
-          min-height: 173px;
-          min-width: 204px;
-          
-			  }
-        
-        input[type=button] {
-/*          height: 11%;  */
-          width: 70%;
-        }
-			}
-			      
-			* {
-				margin: 0;
-				padding: 0;
-        font-family: #FONTTYPE#;
-			}
-							      			
-			#selectArea {
-				padding-top: 10px;
-				padding-bottom: 55px;
-				padding-left: 10px;
-			}
-			
-			.setAssertionButton {
-				background: #efefef;
-				cursor: pointer;
-				margin-top: 15px;
-			  width: 70px;
-			  height: 25px;
-			}
-			
-			#leftbutton  {
-				width: 35%; 
-				float:left; 
-				margin-left: 15px;
-			}
-			
-			#rightbutton {
-				width: 35%; 
-				float:right; 
-				margin-right: 25px; 
-				text-align: right;
-			}
-
-/*		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{
-			
-			}
-			
-			.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#;
-        color: #MAIN_COLOR#;	
-			}
-			
-			.dunkel {
-				background-color: #HEADER_BACKGROUNDCOLOR#;
-        color: #HEADER_COLOR#;
-			}
-			      
-			.main_header {
-			   color: black;
-			    font-size: 32pt;
-			    position: absolute;
-			    right: 10%;
-			    top: 40px;
-				
-			}
-      
-     	#alert {
-		    margin: 100px 250px;
-		    font-family: Verdana, Arial, Helvetica, sans-serif;
-		    font-size: 14px;
-		    font-weight: normal;
-		    color: red;
-	    }
-	
-	    .reqframe {
-		    /*display: none;*/
-        visibility: hidden;
-		  
-	    }
-      			                        
-    </style> 
-
   <title>An error arise ...  </title>
 </head>
 
@@ -382,12 +10,14 @@
   <div id="page">
 		<div id="page1" class="case selected-case" role="main">
 			<h2 class="OA_header" role="heading">Authentication error arise</h2>
-			<div id="main">
-				<div id="leftcontent" class="hell" role="application">
+			<!--div id="main"-->
+				<!--div id="leftcontent" class="hell" role="application"-->
+          
           
-          <p>The authentication stops on account of a process error:</p>
           
-	        <div class="alert">
+	        <div id="alert_area" class="hell" role="application" >
+            <p>The authentication stops on account of a process error:</p>
+            <br/>
 		        <p><b>Error    Code:</b> $errorCode</p> 
 		        <p><b>Error Message:</b >$errorMsg</p>
 	        </div>	
@@ -399,8 +29,8 @@
 	         </div>	
 	        #end
           
-				</div>
-			</div>
+				<!--/div--->
+			<!--/div-->
 		</div>
 	</div>
 </body>
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/javascript_tempalte.js b/id/server/idserverlib/src/main/resources/resources/templates/javascript_tempalte.js
new file mode 100644
index 000000000..ae621f0cb
--- /dev/null
+++ b/id/server/idserverlib/src/main/resources/resources/templates/javascript_tempalte.js
@@ -0,0 +1,196 @@
+function isIE() {
+			return (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
+		}
+		function isFullscreen() {
+			try {
+				return ((top.innerWidth == screen.width) && (top.innerHeight == screen.height));
+			} catch (e) {
+				return false;
+			}
+		}
+		function isActivexEnabled() {
+			var supported = null;
+			try {
+				supported = !!new ActiveXObject("htmlfile");
+			} catch (e) {
+				supported = false;
+			}
+			return supported;
+		}
+		function isMetro() {
+			if (!isIE())
+				return false;
+			return !isActivexEnabled() && isFullscreen();
+		}
+		window.onload=function() {
+			document.getElementById("localBKU").style.display="block";
+			return;
+		}
+    function bkuLocalClicked() {
+       setMandateSelection();
+    }
+    
+		function bkuOnlineClicked() {
+			if (isMetro())
+				document.getElementById("metroDetected").style.display="block";
+			document.getElementById("localBKU").style.display="block";
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+						
+			var iFrameURL = "#AUTH_URL#" + "?";
+			iFrameURL += "bkuURI=" + "#ONLINE#";
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
+			iFrameURL += "&pendingid=" + "#SESSIONID#";
+			generateIFrame(iFrameURL);
+		}
+		function bkuHandyClicked() {
+			document.getElementById("localBKU").style.display="none";
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+			
+			var iFrameURL = "#AUTH_URL#" + "?";
+			iFrameURL += "bkuURI=" + "#HANDY#";
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
+			iFrameURL += "&pendingid=" + "#SESSIONID#";
+			generateIFrame(iFrameURL);
+		}
+		function storkClicked() {
+			document.getElementById("localBKU").style.display="none"; 
+/* 			if (checkMandateSSO())
+				return; */
+			
+			setMandateSelection();
+/* 			setSSOSelection(); */
+			
+			var ccc = "AT";
+			var countrySelection = document.getElementById("cccSelection");
+			if (countrySelection !=  null) {
+				ccc = document.getElementById("cccSelection").value;
+			}
+			var iFrameURL = "#AUTH_URL#" + "?";
+			iFrameURL += "bkuURI=" + "#ONLINE#";
+			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
+			iFrameURL += "&CCC=" + ccc;
+/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
+			iFrameURL += "&MODUL=" + "#MODUL#";
+			iFrameURL += "&ACTION=" + "#ACTION#";
+			iFrameURL += "&pendingid=" + "#SESSIONID#";
+			generateIFrame(iFrameURL);
+		}
+		function generateIFrame(iFrameURL) {
+			var el = document.getElementById("bkulogin");
+      var width = el.clientWidth;
+      var heigth = el.clientHeight - 20;
+			var parent = el.parentNode;
+            
+      iFrameURL += "&heigth=" + heigth;
+      iFrameURL += "&width=" + width;
+      
+			var iframe = document.createElement("iframe");
+			iframe.setAttribute("src", iFrameURL);
+			iframe.setAttribute("width", el.clientWidth - 1);
+			iframe.setAttribute("height", el.clientHeight - 1);
+			iframe.setAttribute("frameborder", "0");
+			iframe.setAttribute("scrolling", "no");
+			iframe.setAttribute("title", "Login");
+			parent.replaceChild(iframe, el);
+		}
+		function setMandateSelection() {
+			document.getElementById("useMandate").value = "false";
+			var checkbox = document.getElementById("mandateCheckBox");
+			if (checkbox !=  null) {
+				if (document.getElementById("mandateCheckBox").checked) {
+					document.getElementById("useMandate").value = "true";
+				}
+			}
+		}
+		function onChangeChecks() {
+      if (self.innerWidth < 650) {
+         document.getElementById("moaidform").setAttribute("target","_parent");
+      } else {
+         document.getElementById("moaidform").removeAttribute("target");
+      }
+      
+    }
+    
+     function checkIfBrowserSupportsJava(){
+        console.log("Browser is Chrome: "+checkIfBrowserIsChrome());
+        console.log("Browser is Safari: "+checkIfBrowserIsSafari());
+        console.log("Browser is Edge: "+checkIfBrowserIsEdge());
+        
+        var cnt = 0;
+        
+        if(checkIfBrowserIsChrome())cnt++;
+        if(checkIfBrowserIsEdge())cnt++;
+        if(checkIfBrowserIsSafari())cnt++;
+           
+        if(cnt==0 || cnt>1)//cnt>1 means perhaps wrong detection
+            return true;
+        
+        var image = document.getElementById("bkuimage");
+        var srcatt = image.getAttribute("src");
+        var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
+        srcatt = srcatt.replace(last,'online-bku-deactivated.png');    
+        image.setAttribute("src",srcatt);
+         
+         
+        var button = document.getElementsByName("bkuButtonOnline")[0];               
+        button.setAttribute("class","browserInfoButton");
+        button.setAttribute("title","Java wird nicht unterstützt, klicken für mehr Informationen.");
+        button.setAttribute("onClick","alert('Java wird von Ihrem Browser nicht unterstützt, ist jedoch für den Betrieb der Online Bürgerkartenumgebung notwendig.\\nWollen Sie dennoch die Online Bürgerkartenumgebung verwenden, wird zur Zeit Java noch von Firefox und MS Internet Explorer unterstützt. \\nAlternativ koennen Sie auch eine lokale Bürgerkartenumgebung verwenden, verfügbar unter www.buergerkarte.at.');");
+         
+        return false;
+   
+    }
+    function checkIfBrowserIsChrome(){
+        var chrome_defined = !!window.chrome;//chrome object defined
+        var webstore_defined = false;
+        if(window.chrome){
+            webstore_defined = !!window.chrome.webstore;
+           }
+        return chrome_defined && webstore_defined;
+    }
+    function checkIfBrowserIsEdge(){//edge also defines the chrome object, but not the webapp
+        var chrome_defined = !!window.chrome;//chrome object defined
+        var webstore_defined = true;
+        if(window.chrome){
+            webstore_defined = !!window.chrome.webstore;
+           }
+        return chrome_defined && !webstore_defined;
+    }
+    function checkIfBrowserIsSafari(){
+        var cond1 = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
+        return cond1;
+    }
+/* 		function setSSOSelection() {
+			document.getElementById("useSSO").value = "false";
+			var checkbox = document.getElementById("SSOCheckBox");
+			if (checkbox !=  null) {
+				if (document.getElementById("SSOCheckBox").checked) {
+					document.getElementById("useSSO").value = "true";
+				}
+			}
+		} */
+		
+/* 		function checkMandateSSO() {
+			var sso = document.getElementById("SSOCheckBox");
+			var mandate = document.getElementById("mandateCheckBox");
+			
+			
+			if (sso.checked && mandate.checked) {
+				alert("Anmeldung in Vertretung in kombination mit Single Sign-On wird aktuell noch nicht unterstützt!")
+				mandate.checked = false;
+				sso.checked = false;
+				return true;
+			} else {
+				return false;
+			}
+		} */
\ No newline at end of file
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html b/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
index af133525e..53d04c282 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/loginFormFull.html
@@ -4,830 +4,12 @@
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 
    <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-    <style type="text/css">
-			@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] {
-          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;
-			  }
-			  
-			  #main {
-			    /*	clear:both; */
-				  position:relative;
-			    margin: 0 auto;
-			    width: 250px;
-			    text-align: center;
-			  }
-			  
-			  .OA_header {
-			/*	  background-color: white;*/
-			    font-size: 20pt;
-			    margin-bottom: 25px;
-			    margin-top: 25px;
-			  }
-			
-			  #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: 300px;
-				 margin-top: 30px;
-			  }
-			
-        #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;
-			  }
-			
-			  #rightbutton {
-				 width: 30%; 
-				 float:right; 
-				 margin-right: 45px; 
-				 text-align: right;
-			  }
-        
-        button {
-          height: 25px;
-          width: 75px;
-          margin-bottom: 10px;
-        }
-        
-        
-        
-       #validation {
-        position: absolute;
-        bottom: 0px;
-        margin-left: 270px;
-        padding-bottom: 10px;
-      }
-			
-			}
-
-      @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] {
-          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;
-        } 
-      }
-
-      @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] {
-          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;
-        }  
-      }
-
-      @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] {
-          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;
-        } 
-      }
-
-      @media screen and (max-width: 399px) and (min-width: 300px) {
-        #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] {
-          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;
-        } 
-      }
-      
-      @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] {
-          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;
-        } 
-      }
-
-
-			
-			@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;
-			  }
-			
-			  #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: 170px;	
-			 }
-        
-			 .setAssertionButton_full {
-			     	background: #efefef;
-				    cursor: pointer;
-				    margin-top: 15px;
-			      width: 70px;
-			      height: 25px;
-			 }
-       
-        input[type=button] {
-/*          height: 11%;  */
-          width: 70%;
-        }
-			}
-			      
-			* {
-				margin: 0;
-				padding: 0;
-        font-family: #FONTTYPE#;
-			}
-							      			
-			#selectArea {
-				padding-top: 10px;
-				padding-bottom: 55px;
-				padding-left: 10px;
-			}
-			
-			.setAssertionButton {
-				background: #efefef;
-				cursor: pointer;
-				margin-top: 15px;
-			  width: 70px;
-			  height: 25px;
-			}
-			
-			#leftbutton  {
-				width: 35%; 
-				float:left; 
-				margin-left: 15px;
-			}
-			
-			#rightbutton {
-				width: 35%; 
-				float:right; 
-				margin-right: 25px; 
-				text-align: right;
-			}
-			
-			#stork {
-			    /*margin-bottom: 10px;*/
-			   /* margin-top: 5px; */
-			}
-      			
-      #mandateLogin {
-        padding-bottom: 4%;
-        padding-top: 4%;
-        height: 10%;
-        position: relative;
-        text-align: center;
-			}
-      
-      .verticalcenter {
-        vertical-align: middle;
-      }
-      
-      #mandateLogin div {
-        clear: both;
-        margin-top: -1%;
-        position: relative;
-        top: 50%;
-      }
-      
-      #bkuselectionarea {
-          position: relative;
-          display: block;
-      }
-      
-      #localBKU {
-        padding-bottom: 4%;
-        /*padding-top: 4%;*/
-        position: relative;
-        clear: both;     
-        text-align: center;
-			}
-          			
-			#bkukarte {
-				float:left;
-				text-align:center;
-				width:40%;
-        min-height: 70px;
-        padding-left: 5%;
-        padding-top: 2%;
-			}
-			
-			#bkuhandy {
-				float:right;
-				text-align:center;
-				width:40%;
-        min-height: 90px;
-        padding-right: 5%;
-        padding-top: 2%;
-			}
-			
-      .bkuimage {
-        width: 90%;
-        height: auto;
-      }
-      
-			#mandate{
-				text-align:center;
-				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{
-			
-			}
-			
-			.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#;
-        color: #MAIN_COLOR#;	
-			}
-			
-			.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;
-      }
-      			                        
-    </style>       
-<!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
-<script type="text/javascript">
-		function isIE() {
-			return (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
-		}
-		function isFullscreen() {
-			try {
-				return ((top.innerWidth == screen.width) && (top.innerHeight == screen.height));
-			} catch (e) {
-				return false;
-			}
-		}
-		function isActivexEnabled() {
-			var supported = null;
-			try {
-				supported = !!new ActiveXObject("htmlfile");
-			} catch (e) {
-				supported = false;
-			}
-			return supported;
-		}
-		function isMetro() {
-			if (!isIE())
-				return false;
-			return !isActivexEnabled() && isFullscreen();
-		}
-		window.onload=function() {
-			document.getElementById("localBKU").style.display="block";
-			return;
-		}
-    function bkuLocalClicked() {
-       setMandateSelection();
-    }
-    
-		function bkuOnlineClicked() {
-			if (isMetro())
-				document.getElementById("metroDetected").style.display="block";
-			document.getElementById("localBKU").style.display="block";
-/* 			if (checkMandateSSO())
-				return; */
-			
-			setMandateSelection();
-/* 			setSSOSelection(); */
-						
-			var iFrameURL = "#AUTH_URL#" + "?";
-			iFrameURL += "bkuURI=" + "#ONLINE#";
-			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
-/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
-			iFrameURL += "&MODUL=" + "#MODUL#";
-			iFrameURL += "&ACTION=" + "#ACTION#";
-			iFrameURL += "&pendingid=" + "#SESSIONID#";
-			generateIFrame(iFrameURL);
-		}
-		function bkuHandyClicked() {
-			document.getElementById("localBKU").style.display="none";
-/* 			if (checkMandateSSO())
-				return; */
-			
-			setMandateSelection();
-/* 			setSSOSelection(); */
-			
-			var iFrameURL = "#AUTH_URL#" + "?";
-			iFrameURL += "bkuURI=" + "#HANDY#";
-			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
-/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
-			iFrameURL += "&MODUL=" + "#MODUL#";
-			iFrameURL += "&ACTION=" + "#ACTION#";
-			iFrameURL += "&pendingid=" + "#SESSIONID#";
-			generateIFrame(iFrameURL);
-		}
-		function storkClicked() {
-			document.getElementById("localBKU").style.display="none"; 
-/* 			if (checkMandateSSO())
-				return; */
-			
-			setMandateSelection();
-/* 			setSSOSelection(); */
-			
-			var ccc = "AT";
-			var countrySelection = document.getElementById("cccSelection");
-			if (countrySelection !=  null) {
-				ccc = document.getElementById("cccSelection").value;
-			}
-			var iFrameURL = "#AUTH_URL#" + "?";
-			iFrameURL += "bkuURI=" + "#ONLINE#";
-			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
-			iFrameURL += "&CCC=" + ccc;
-/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
-			iFrameURL += "&MODUL=" + "#MODUL#";
-			iFrameURL += "&ACTION=" + "#ACTION#";
-			iFrameURL += "&pendingid=" + "#SESSIONID#";
-			generateIFrame(iFrameURL);
-		}
-		function generateIFrame(iFrameURL) {
-			var el = document.getElementById("bkulogin");
-      var width = el.clientWidth;
-      var heigth = el.clientHeight - 20;
-			var parent = el.parentNode;
-            
-      iFrameURL += "&heigth=" + heigth;
-      iFrameURL += "&width=" + width;
-      
-			var iframe = document.createElement("iframe");
-			iframe.setAttribute("src", iFrameURL);
-			iframe.setAttribute("width", el.clientWidth - 1);
-			iframe.setAttribute("height", el.clientHeight - 1);
-			iframe.setAttribute("frameborder", "0");
-			iframe.setAttribute("scrolling", "no");
-			iframe.setAttribute("title", "Login");
-			parent.replaceChild(iframe, el);
-		}
-		function setMandateSelection() {
-			document.getElementById("moaidform").action = "#AUTH_URL#";
-			document.getElementById("useMandate").value = "false";
-			var checkbox = document.getElementById("mandateCheckBox");
-			if (checkbox !=  null) {
-				if (document.getElementById("mandateCheckBox").checked) {
-					document.getElementById("useMandate").value = "true";
-				}
-			}
-		}
-		function onChangeChecks() {
-      if (self.innerWidth < 650) {
-         document.getElementById("moaidform").setAttribute("target","_parent");
-      } else {
-         document.getElementById("moaidform").removeAttribute("target");
-      }
-      
-    }
-    
-     function checkIfBrowserSupportsJava(){
-        console.log("Browser is Chrome: "+checkIfBrowserIsChrome());
-        console.log("Browser is Safari: "+checkIfBrowserIsSafari());
-        console.log("Browser is Edge: "+checkIfBrowserIsEdge());
-        
-        var cnt = 0;
-        
-        if(checkIfBrowserIsChrome())cnt++;
-        if(checkIfBrowserIsEdge())cnt++;
-        if(checkIfBrowserIsSafari())cnt++;
-           
-        if(cnt==0 || cnt>1)//cnt>1 means perhaps wrong detection
-            return true;
-        
-        var image = document.getElementById("bkuimage");
-        var srcatt = image.getAttribute("src");
-        var last = srcatt.substring(srcatt.lastIndexOf('/')+1);
-        srcatt = srcatt.replace(last,'online-bku-deactivated.png');    
-        image.setAttribute("src",srcatt);
-         
-         
-        var button = document.getElementsByName("bkuButtonOnline")[0];               
-        button.setAttribute("class","browserInfoButton");
-        button.setAttribute("title","Java wird nicht unterstützt, klicken für mehr Informationen.");
-        button.setAttribute("onClick","alert('Java wird von Ihrem Browser nicht unterstützt, ist jedoch für den Betrieb der Online Bürgerkartenumgebung notwendig.\\nWollen Sie dennoch die Online Bürgerkartenumgebung verwenden, wird zur Zeit Java noch von Firefox und MS Internet Explorer unterstützt. \\nAlternativ koennen Sie auch eine lokale Bürgerkartenumgebung verwenden, verfügbar unter www.buergerkarte.at.');");
-         
-        return false;
+   <link rel="stylesheet" href="#CONTEXTPATH#/css/buildCSS?pendingid=#SESSIONID#" />
    
-    }
-    function checkIfBrowserIsChrome(){
-        var chrome_defined = !!window.chrome;//chrome object defined
-        var webstore_defined = false;
-        if(window.chrome){
-            webstore_defined = !!window.chrome.webstore;
-           }
-        return chrome_defined && webstore_defined;
-    }
-    function checkIfBrowserIsEdge(){//edge also defines the chrome object, but not the webapp
-        var chrome_defined = !!window.chrome;//chrome object defined
-        var webstore_defined = true;
-        if(window.chrome){
-            webstore_defined = !!window.chrome.webstore;
-           }
-        return chrome_defined && !webstore_defined;
-    }
-    function checkIfBrowserIsSafari(){
-        var cond1 = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
-        return cond1;
-    }
-/* 		function setSSOSelection() {
-			document.getElementById("useSSO").value = "false";
-			var checkbox = document.getElementById("SSOCheckBox");
-			if (checkbox !=  null) {
-				if (document.getElementById("SSOCheckBox").checked) {
-					document.getElementById("useSSO").value = "true";
-				}
-			}
-		} */
-		
-/* 		function checkMandateSSO() {
-			var sso = document.getElementById("SSOCheckBox");
-			var mandate = document.getElementById("mandateCheckBox");
-			
-			
-			if (sso.checked && mandate.checked) {
-				alert("Anmeldung in Vertretung in kombination mit Single Sign-On wird aktuell noch nicht unterstützt!")
-				mandate.checked = false;
-				sso.checked = false;
-				return true;
-			} else {
-				return false;
-			}
-		} */
-	</script>
+   <!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
+   <script src="#CONTEXTPATH#/js/buildJS?pendingid=#SESSIONID#"></script>
+   
+
 <title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title>
 </head>
 <body onload="onChangeChecks();checkIfBrowserSupportsJava();" onresize="onChangeChecks();">
@@ -840,7 +22,7 @@
 						<h2 id="tabheader" class="dunkel" role="heading">#HEADER_TEXT#</h2>
 					</div>
 					<div id="bkulogin" class="hell" role="form">
-						<div id="mandateLogin" style="#MANDATEVISIBLE#">
+						<div id="mandateLogin" style="">
 							<div>
 								<input tabindex="1" type="checkbox" name="Mandate"
 									id="mandateCheckBox" class="verticalcenter" role="checkbox"
@@ -874,8 +56,6 @@
 									type="hidden" name="useMandate" id="useMandate"> <input
 									type="hidden" name="SSO" id="useSSO"> <input
 									type="hidden" name="ccc" id="ccc"> <input type="hidden"
-									name="MODUL" value="#MODUL#"> <input type="hidden"
-									name="ACTION" value="#ACTION#"> <input type="hidden"
 									name="pendingid" value="#SESSIONID#"> 
                   <input type="submit" value=" Lokale Bürgerkartenumgebung " tabindex="4"
 									role="button" onclick="setMandateSelection();">
@@ -884,7 +64,7 @@
               
               <!-- Single Sign-On Session transfer functionality -->
               <!--div id="ssoSessionTransferBlock">
-                <a href="#AUTH_URL#?MOASessionID=#SESSIONID#&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
+                <a href="#AUTH_URL#?pendingid=#SESSIONID#&restoreSSOSession=true">>Restore SSO Session from Smartphone</a>
               </div-->
               
               <div id="stork" align="center" style="#STORKVISIBLE#">
@@ -907,16 +87,6 @@
 				</div>
 			</div>
 		</div>
-		<!--div id="validation">
-			<a href="http://validator.w3.org/check?uri="> <img
-				style="border: 0; width: 88px; height: 31px"
-				src="#CONTEXTPATH#/img/valid-html5-blue.png" alt="HTML5 ist valide!" />
-			</a> <a href="http://jigsaw.w3.org/css-validator/"> <img
-				style="border: 0; width: 88px; height: 31px"
-				src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
-				alt="CSS ist valide!" />
-			</a>
-		</div-->
 	</div>
 </body>
 </html>
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html b/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
index 07d018a94..dd5d3e539 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/sendAssertionFormFull.html
@@ -3,556 +3,7 @@
 <head>
 	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-    <style type="text/css">
-			@media screen and (min-width: 650px) {
-			
-				body {
-					margin:0;
-					padding:0;
-					color : #000;
-					background-color : #fff;
-			  	text-align: center;
-			  	background-color: #6B7B8B;
-				}
-				
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        
-        #localBKU input{
-          font-size: 0.7em;
-          border-radius: 5px;
-        }
-        
-         #bkuselectionarea button {
-          font-size: 0.85em;
-          border-radius: 7px;
-          margin-bottom: 25px;
-         }
-        
-        #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: 440px;
-			    margin: 0 auto;
-			    margin-top: 5%;
-			    position: relative;
-			    border-radius: 25px;
-			    background: rgb(255,255,255);
-			  }
-			  
-			  #page1 {
-			    text-align: center;
-			  }
-			  
-			  #main {
-			    /*	clear:both; */
-				  position:relative;
-			    margin: 0 auto;
-			    width: 250px;
-			    text-align: center;
-			  }
-			  
-			  .OA_header {
-			/*	  background-color: white;*/
-			    font-size: 20pt;
-			    margin-bottom: 25px;
-			    margin-top: 25px;
-			  }
-			
-			  #leftcontent {
-        	width: 300px;
-				  margin-top: 30px;
-          padding-bottom: 15px;
-				  margin-bottom: 25px;
-			    text-align: left;
-			    border: 1px solid rgb(0,0,0);
-			  }
-			  			  
-			  #selectArea {
-				 font-size: 15px;
-				 padding-bottom: 65px;
-			  }
-			 
-        #selectArea h3 {
-          margin-bottom: 25px;
-        }
-      
-        #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;
-			  }
-      			  
-			  .setAssertionButton_full {
-				  margin-top: 15px;
-			    width: 100px;
-			    height: 30px;
-          font-size: 1.3em;
-          min-height: 1.3em;
-/*          border-radius: 10px;*/
-			  }
-			
-			  #leftbutton  {
-				 width: 30%; 
-				 float:left; 
-				 margin-left: 40px;
-			  }
-			
-			  #rightbutton {
-				 width: 30%; 
-				 float:right; 
-				 margin-right: 45px; 
-				 text-align: right;
-			  }
-        
-        button {
-          height: 25px;
-          width: 90px;
-          margin-bottom: 10px;
-        }
-        
-       #validation {
-        position: absolute;
-        bottom: 0px;
-        margin-left: 270px;
-        padding-bottom: 10px;
-      }
-			
-			}
-
-      @media screen and (max-width: 205px) {
-        #localBKU p {
-          font-size: 0.6em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.7em;
-          min-width: 70px;
-          min-height: 1.2em;
-          border-radius: 5px;
-        }
-        
-        #bkuselectionarea button, .setAssertionButton_full {
-          font-size: 0.8em;
-          min-width: 65px;
-          min-height: 1.3em;
-  /*        border-radius: 5px;         */
-          margin-bottom: 2%
-        }
-        
-        #mandateLogin {
-          font-size: 0.65em;
-        }
-        
-        #bku_header h2, #selectArea h3 {
-          font-size: 0.8em;
-          margin-top: -0.4em;
-        } 
-      }
-
-      @media screen and (max-width: 249px) and (min-width: 206px) {
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.85em;
-          min-width: 80px;
-          min-height: 0.95em;
-          border-radius: 6px;
-        }
-        
-        #bkuselectionarea button, .setAssertionButton_full {
-          font-size: 0.85em;
-          min-width: 70px;
-          min-height: 0.95em;
-  /*        border-radius: 6px;        */
-          margin-bottom: 2%
-        }
-        
-        #mandateLogin {
-          font-size: 0.75em;
-        }
-        
-        #bku_header h2, #selectArea h3 {
-          font-size: 0.9em;
-          margin-top: -0.45em;
-        } 
-      }
-
-      @media screen and (max-width: 299px) and (min-width: 250px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.9em;
-          min-width: 100px;
-          border-radius: 6px;
-        }
-        
-        #bkuselectionarea button, .setAssertionButton_full {
-          font-size: 1.0em;
-          min-height: 1.05em;
- /*         border-radius: 7px;          */
-          margin-bottom: 5%;
-        }
-        
-        #mandateLogin {
-          font-size: 1em;
-        }
-        
-        #bku_header h2, #selectArea h3 {
-          font-size: 1.0em;
-          margin-top: -0.50em;
-        } 
-      }
-
-      @media screen and (max-width: 399px) and (min-width: 300px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.9em;
-          min-width: 100px;
-          border-radius: 6px;
-        }
-        
-        #bkuselectionarea button, .setAssertionButton_full {
-          font-size: 1.1em;
-          min-height: 1.2em;
-  /*        border-radius: 8px;     */
-          margin-bottom: 5%;
-        }
-        
-        #mandateLogin {
-          font-size: 1em;
-        }
-        
-        #bku_header h2, #selectArea h3 {
-          font-size: 1.1em;
-          margin-top: -0.55em;
-        } 
-      }
-      
-      @media screen and (max-width: 649px) and (min-width: 400px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.9em;
-          min-width: 100px;
-          border-radius: 6px;
-        }
-        
-        #bkuselectionarea button, .setAssertionButton_full {
-          font-size: 1.3em;
-          min-height: 1.3em;
-/*          border-radius: 10px;  */
-          margin-bottom: 5%;
-        }
-        
-        #mandateLogin {
-          font-size: 1.2em;
-        }
-        
-        #bku_header h2, #selectArea h3 {
-          font-size: 1.3em;
-          margin-top: -0.65em;
-        } 
-      }
-
-
-			
-			@media screen and (max-width: 649px) {
-				
-        body {
-					margin:0;
-					padding:0;
-					color : #000;
-			  	text-align: center;
-          font-size: 100%;
-			  	background-color: #MAIN_BACKGOUNDCOLOR#;
-				}
-        				
-			  #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;
-			  }
-			
-			  #leftcontent {
-			    visibility: visible;
-			    margin-bottom: 0px;
-			    text-align: left;
-			    border:none;
-          min-width: 190px;
-/*          min-height: 190px;  */
-          vertical-align: middle;
-          
-			  }
-			  
-        #bku_header {
-          height: 10%;
-          min-height: 1.2em;
-          margin-top: 1%;
-        }
-        
-        h2#tabheader{
-          padding-left: 2%;
-          padding-right: 2%;
-          padding-top: 1%;
-          position: relative;
-          top: 50%;
-			  }
-        
-       	#bkulogin {	
-          min-width: 190px;
-          min-height: 150px;	
-			 }
-        
-			 .setAssertionButton_full {
-				    margin-top: 15px;
-			      width: 70%;
-			      height: 11%;
-            min-width: 60px;
-            min-height: 25px;
-			 }
-       
-       #selectArea h3 {
-          margin-top: 2%;
-       }
-       
-        button {
-          height: 11%;
-          width: 70%;
-        }
-			}
-			      
-			* {
-				margin: 0;
-				padding: 0;
-/*				border: 0;  */
-        font-family: #FONTTYPE#;
-			}
-							      			
-			#selectArea {
-				padding-top: 10px;
-				padding-bottom: 55px;
-				padding-left: 10px;
-			}
-			
-			.setAssertionButton {
-				background: #efefef;
-				cursor: pointer;
-				margin-top: 15px;
-			  width: 70px;
-			  height: 25px;
-			}
-			
-			#leftbutton  {
-				width: 35%; 
-				float:left; 
-				margin-left: 15px;
-			}
-			
-			#rightbutton {
-				width: 35%; 
-				float:right; 
-				margin-right: 25px; 
-				text-align: right;
-			}
-			
-			#stork {
-			    margin-bottom: 10px;
-			    margin-top: 5px;
-			}
-			
-      #mandateLogin {
-        padding-bottom: 2%;
-        padding-top: 2%;
-        height: 10%;
-        position: relative;
-        text-align: center;
-			}
-      
-      .verticalcenter {
-        vertical-align: middle;
-      }
-      
-      #mandateLogin > div {
-        clear: both;
-        margin-top: -1%;
-        position: relative;
-        top: 50%;
-      }
-      
-      #bkuselectionarea {
-          position: relative;
-          display: block;
-      }
-      
-      #localBKU {
-        padding-left: 5%;
-        padding-right: 2%;
-        padding-bottom: 2%;
-        position: relative;
-        clear: both;        
-			}
-          			
-			#bkukarte {
-				float:left;
-				text-align:center;
-				width:40%;
-        min-height: 70px;
-        padding-left: 5%;
-        padding-top: 2%;
-			}
-			
-			#bkuhandy {
-				float:right;
-				text-align:center;
-				width:40%;
-        min-height: 90px;
-        padding-right: 5%;
-        padding-top: 2%;
-			}
-			
-      .bkuimage {
-        width: 90%;
-        height: auto;
-      }
-      
-			#mandate{
-				text-align:center;
-				padding : 5px 5px 5px 5px;
-			}
-			
-			button, .sendButton {
-/*				background: #BUTTON_BACKGROUNDCOLOR#;
-        color: #BUTTON_COLOR#;  */
-        cursor: pointer;
-        
-/*				border:1px solid #000;
-        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#;  */        
-        cursor: pointer;
-        
-/*				border:1px solid #000;
-        box-shadow: -1px -1px 3px #222222;  */
-			}
-      			
-			#installJava, #BrowserNOK {
-				clear:both;
-				font-size:0.8em;
-				padding:4px;
-			}
-						
-			.selectText{
-			
-			}
-			
-			.selectTextHeader{
-			
-			}
-						
-			#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#;
-        color: #MAIN_COLOR#;	
-			}
-			
-			.dunkel {
-				background-color: #HEADER_BACKGROUNDCOLOR#;
-        color: #HEADER_COLOR#;
-			}
-			      
-			.main_header {
-			   color: black;
-			    font-size: 32pt;
-			    position: absolute;
-			    right: 10%;
-			    top: 40px;
-				
-			}
-      			                        
-    </style>
-    
+    <link rel="stylesheet" href="#CONTEXTPATH#/css/buildCSS?pendingid=#ID#" />
     
     <title>Anmeldung an Online-Applikation</title>   
 </head>
@@ -582,7 +33,7 @@
 										<input type="hidden" name="value" value="true">
 										<input type="hidden" name="mod" value="#MODUL#">
 								    <input type="hidden" name="action" value="#ACTION#">
-                    <input type="hidden" name="identifier" value="#ID#">
+                    <input type="hidden" name="pendingid" value="#ID#">
 										<input type="submit" value="Ja" class="setAssertionButton_full sendButton" role="button">
 									</form>
 							</div>
@@ -591,7 +42,7 @@
 										<input type="hidden" name="value" value="false">
 										<input type="hidden" name="mod" value="#MODUL#">
 								    <input type="hidden" name="action" value="#ACTION#">
-                    <input type="hidden" name="identifier" value="#ID#">
+                    <input type="hidden" name="pendingid" value="#ID#">
 										<input type="submit" value="Nein" class="setAssertionButton_full sendButton" role="button">
 									</form>
 							</div>
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/slo_template.html b/id/server/idserverlib/src/main/resources/resources/templates/slo_template.html
index a9d73e0d3..220dd980a 100644
--- a/id/server/idserverlib/src/main/resources/resources/templates/slo_template.html
+++ b/id/server/idserverlib/src/main/resources/resources/templates/slo_template.html
@@ -3,377 +3,7 @@
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   
    <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
-    <style type="text/css">
-			@media screen and (min-width: 650px) {
-			
-				body {
-					margin:0;
-					padding:0;
-					color : #000;
-					background-color : #fff;
-			  	text-align: center;
-			  	background-color: #6B7B8B;
-				}
-  
-			  #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;
-			  }
-			  
-			  #main {
-			    /*	clear:both; */
-				  position:relative;
-			    margin: 0 auto;
-			    width: 250px;
-			    text-align: center;
-			  }
-			  
-			  .OA_header {
-			/*	  background-color: white;*/
-			    font-size: 20pt;
-			    margin-bottom: 25px;
-			    margin-top: 25px;
-			  }
-			
-			  #leftcontent {
-			    /*float:left; */
-				  width:250px;
-				  margin-bottom: 25px;
-			    text-align: left;
-			    /*border: 1px solid rgb(0,0,0);*/
-			  }
-			
-			  #leftcontent {
-				 width: 300px;
-				 margin-top: 30px;
-			  }
-      
-        h2#tabheader{
-				  font-size: 1.1em; 
-          padding-left: 2%;
-          padding-right: 2%;
-          position: relative;
-			  }
-        		  
-			  .setAssertionButton_full {
-			  	background: #efefef;
-				  cursor: pointer;
-				  margin-top: 15px;
-			    width: 100px;
-			    height: 30px
-			  }
-			
-			  #leftbutton  {
-				 width: 30%; 
-				 float:left; 
-				 margin-left: 40px;
-			  }
-			
-			  #rightbutton {
-				 width: 30%; 
-				 float:right; 
-				 margin-right: 45px; 
-				 text-align: right;
-			  }
-        
-        button {
-          height: 25px;
-          width: 75px;
-          margin-bottom: 10px;
-        }
-        
-       #validation {
-        position: absolute;
-        bottom: 0px;
-        margin-left: 270px;
-        padding-bottom: 10px;
-      }
-			
-			}
-
-      @media screen and (max-width: 205px) {
-        #localBKU p {
-          font-size: 0.6em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.6em;
-          min-width: 60px;
-         /* max-width: 65px; */
-          min-height: 1.0em;
-         /* border-radius: 5px; */
-        }
-        
-      }
-
-      @media screen and (max-width: 249px) and (min-width: 206px) {
-        #localBKU p {
-          font-size: 0.7em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.7em;
-          min-width: 70px;
-       /*    max-width: 75px;    */
-          min-height: 0.95em;
-        /*  border-radius: 6px;    */
-        }
-         
-      }
-
-      @media screen and (max-width: 299px) and (min-width: 250px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-       /*    max-width: 75px;      */
-      /*    border-radius: 6px;  */
-        }
-
-      }
-
-      @media screen and (max-width: 399px) and (min-width: 300px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 75px;     */
-      /*    border-radius: 6px;       */
-        }
-
-      }
-      
-      @media screen and (max-width: 649px) and (min-width: 400px) {
-        #localBKU p {
-          font-size: 0.9em;
-        } 
-        
-        #localBKU input {
-          font-size: 0.8em;
-          min-width: 70px;
-      /*     max-width: 80px;       */
-     /*     border-radius: 6px;          */
-        }
-
-      }
-
-
-			
-			@media screen and (max-width: 649px) {
-				
-        body {
-					margin:0;
-					padding:0;
-					color : #000;
-			  	text-align: center;
-          font-size: 100%;
-			  	background-color: #MAIN_BACKGOUNDCOLOR#;
-				}
-        				
-			  #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;
-			  }
-			
-			  #leftcontent {
-			    visibility: visible;
-			    margin-bottom: 0px;
-			    text-align: left;
-			    border:none;
-          vertical-align: middle;
-          min-height: 173px;
-          min-width: 204px;
-          
-			  }
-        
-        input[type=button] {
-/*          height: 11%;  */
-          width: 70%;
-        }
-			}
-			      
-			* {
-				margin: 0;
-				padding: 0;
-        font-family: #FONTTYPE#;
-			}
-							      			
-			#selectArea {
-				padding-top: 10px;
-				padding-bottom: 55px;
-				padding-left: 10px;
-			}
-			
-			.setAssertionButton {
-				background: #efefef;
-				cursor: pointer;
-				margin-top: 15px;
-			  width: 70px;
-			  height: 25px;
-			}
-			
-			#leftbutton  {
-				width: 35%; 
-				float:left; 
-				margin-left: 15px;
-			}
-			
-			#rightbutton {
-				width: 35%; 
-				float:right; 
-				margin-right: 25px; 
-				text-align: right;
-			}
-
-/*		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{
-			
-			}
-			
-			.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#;
-        color: #MAIN_COLOR#;	
-			}
-			
-			.dunkel {
-				background-color: #HEADER_BACKGROUNDCOLOR#;
-        color: #HEADER_COLOR#;
-			}
-			      
-			.main_header {
-			   color: black;
-			    font-size: 32pt;
-			    position: absolute;
-			    right: 10%;
-			    top: 40px;
-				
-			}
-      
-     	#alert {
-		    margin: 100px 250px;
-		    font-family: Verdana, Arial, Helvetica, sans-serif;
-		    font-size: 14px;
-		    font-weight: normal;
-		    color: red;
-	    }
-	
-	    .reqframe {
-		    /*display: none;*/
-        visibility: hidden;
-		  
-	    }
-      			                        
-    </style> 
+  <link rel="stylesheet" href="#CONTEXTPATH#/css/buildCSS" />
 
 	#if($timeoutURL)
 		<script type="text/javascript">
diff --git a/id/server/idserverlib/src/main/resources/resources/templates/sso_transfer_template.html b/id/server/idserverlib/src/main/resources/resources/templates/sso_transfer_template.html
new file mode 100644
index 000000000..e9c2fae76
--- /dev/null
+++ b/id/server/idserverlib/src/main/resources/resources/templates/sso_transfer_template.html
@@ -0,0 +1,59 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  
+   <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
+  <link rel="stylesheet" href="#CONTEXTPATH#/css/buildCSS" />
+
+  <title>Single Sign-On Session Transfer</title>
+</head>
+
+	<body>
+  <noscript>
+		<p>
+			<strong>Note:</strong> Since your browser does not support
+			JavaScript, you must press the Continue button once to proceed.
+		</p>
+	</noscript>
+
+  <div id="page">
+		<div id="page1" class="case selected-case" role="main">
+			<h2 class="OA_header" role="heading">MOA-ID Single Sign-On Session Transfer Service</h2>
+			<div id="main">
+				<div id="leftcontent" class="hell" role="application">
+          
+          #if($errorMsg)
+	         <div class="alert">
+		        <p>$errorMsg</p> 
+	         </div>	
+	        #end
+
+	        #if($successMsg)
+	         <div>
+		        <p>$successMsg</p> 
+	         </div>	
+	        #end
+          
+          #if($QRImage)
+	         <div>
+	         	<img id="qrCode" src="data:image/gif;base64,$QRImage">
+	         </div>	
+	        #end
+          
+				</div>
+			</div>
+		</div>
+		<!--div id="validation">
+			<a href="http://validator.w3.org/check?uri="> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="$contextpath/img/valid-html5-blue.png" alt="HTML5 ist valide!" />
+			</a> <a href="http://jigsaw.w3.org/css-validator/"> <img
+				style="border: 0; width: 88px; height: 31px"
+				src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
+				alt="CSS ist valide!" />
+			</a>
+		</div-->
+	</div>
+
+</body>
+</html>
\ No newline at end of file