ToBeChanged

8 files changed, 296 insertions, 182 deletions

diff --git a/pdf-as-web/src/main/webapp/assets/css/style.css b/pdf-as-web/src/main/webapp/assets/css/style.css
index 751396fe..4b49b238 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -12,14 +12,75 @@ footer {
 
 iframe {
 	border: none;
+	min-width:10em;
+}
+
+.methodChooseContainer {
+	width: 80px;
+	height: 130px;
+	text-align: center;
+}
+
+.methodChooseContainer div button {
+	margin-top:1em;
+}
+
+#methodContainer {
+	margin: 2em;
+}
+
+#ImageBox {
+	width: 80px;
+	height: 85px;
+}
+
+.BKUImage {
+	margin-top: 12px;
 }
 
 #navBar {
 	margin: 2em;
+	min-width: 25em;
+}
+
+#ViewerExternToolbar {
+	margin-bottom: 2em !important;
+	min-width: 25em;
+}
+
+#ViewerExternToolbar button {
+	margin-left:0.5em;
+	margin-right:0.5em;
+	width: 3em;
+	height:	3em;
 }
 
-#placeContinue {
-	margin: 1em;
+#ViewerExternToolbar div {
+	margin-left:0.5em;
+	margin-right:0.5em;
+	width: 3em;
+	height:	3em;
+	text-align: center;
+	font-size: 1em;
+}
+
+#ViewerExternToolbar img {
+	width: 3em;
+	height: 3em;
+}
+
+#ViewerExternToolbar img:hover {
+	cursor: hand;
+	cursor: pointer;
+}
+
+#ViewerExternToolbar span {
+	font-size: 2em;
+}
+
+#ViewerExternToolbar span:hover {
+	cursor: hand;
+	cursor: pointer;
 }
 
 #fileSelector {
@@ -60,6 +121,10 @@ iframe {
 	margin-bottom: 5em;
 }
 
+#noSignatureWarning {
+	text-align:center;
+}
+
 #btnSign {
 	border-top-left-radius: 15px;
 	border-top-right-radius: 15px;
@@ -88,26 +153,22 @@ iframe {
 }
 
 .container {
-	border-top-left-radius: 1em;
-	border-top-right-radius: 1em;
 	border: 0.125em solid;
 	border-color: #66A3FF;
 	background: #E8F4FF;
 	box-shadow: 0em 0em 1em #333333;
-	margin-bottom: 1em;
+	margin-bottom: 0em;
 	margin-left: 5em;
 	margin-right: 5em;
 	width: 100%;
 }
 
 .container h3 {
-	border-top-left-radius: 0.5em;
-	border-top-right-radius: 0.5em;
-	background: #66A3FF;
-	color: #FFFFFF;
+	font-style: bold;
+	color: #204a87;
 	text-align: center;
 	margin: -0.125em;
-	margin-left: -0.7em;
+	margin-left: -0.6em;
 	margin-right: -0.7em;
 	height: 2em;	
 }
diff --git a/pdf-as-web/src/main/webapp/assets/img/federohne.svg b/pdf-as-web/src/main/webapp/assets/img/federohne.svg
new file mode 100644
index 00000000..1d050a7c
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/img/federohne.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145pt" height="145pt" viewBox="0 0 145 145" version="1.1">
+<defs>
+<clipPath id="clip1">
+  <path d="M 74 28 L 115 28 L 115 122 L 74 122 Z M 74 28 "/>
+</clipPath>
+<clipPath id="clip2">
+  <path d="M 73.972656 121.53125 L 111.453125 122.707031 L 114.414062 28.527344 L 76.929688 27.347656 Z M 73.972656 121.53125 "/>
+</clipPath>
+<clipPath id="clip3">
+  <path d="M 89 30 L 112 30 L 112 66 L 89 66 Z M 89 30 "/>
+</clipPath>
+<clipPath id="clip4">
+  <path d="M 73.972656 121.53125 L 111.453125 122.707031 L 114.414062 28.527344 L 76.929688 27.347656 Z M 73.972656 121.53125 "/>
+</clipPath>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 37.535156 85.148438 C 37.40625 91.328125 37.429688 97.476562 36.8125 103.632812 C 36.234375 109.375 36.253906 117.410156 33.601562 122.550781 C 34.300781 122.363281 35 122.175781 35.699219 121.992188 C 28.667969 114.699219 46.378906 106.246094 48.644531 115.476562 C 49.132812 117.476562 49.570312 119.027344 51.023438 120.511719 C 51.375 120.875 52.753906 120.367188 53.03125 120.058594 C 54.832031 118.042969 55.421875 115.289062 57.777344 113.746094 C 57.136719 113.835938 56.496094 113.921875 55.859375 114.011719 C 56.644531 115.292969 57.691406 119.519531 59.90625 119.28125 C 63.667969 118.875 64.910156 116.777344 68.234375 120.617188 C 68.585938 121.023438 70.609375 120.257812 70.285156 119.882812 C 68.855469 118.234375 67.300781 116.464844 64.875 116.902344 C 59.835938 117.8125 61.121094 118.457031 58.03125 113.429688 C 57.742188 112.960938 56.4375 113.480469 56.117188 113.695312 C 53.207031 115.597656 52.082031 120.527344 50.816406 114.894531 C 50.035156 111.425781 48.324219 110.425781 44.890625 110.4375 C 38.964844 110.457031 27.242188 116.078125 33.648438 122.726562 C 34.007812 123.097656 35.535156 122.566406 35.746094 122.164062 C 37.875 118.035156 37.800781 112.523438 38.40625 107.992188 C 39.453125 100.183594 39.542969 92.421875 39.707031 84.566406 C 39.714844 84.238281 37.546875 84.523438 37.535156 85.148438 "/>
+<g clip-path="url(#clip1)" clip-rule="nonzero">
+<g clip-path="url(#clip2)" clip-rule="nonzero">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 87.488281 91.382812 C 86.628906 90.953125 85.796875 90.332031 84.691406 90.929688 C 83.625 92.703125 82.304688 95.023438 80.804688 97.390625 C 79.773438 98.996094 77.558594 101.054688 77.023438 103.191406 C 76.691406 104.390625 76.875 106.03125 76.90625 107.128906 C 76.90625 107.128906 76.472656 114.117188 77.050781 115.496094 C 77.710938 113.933594 78.875 108.464844 79.769531 107.035156 C 76.859375 101.03125 85.867188 100.644531 83.671875 106.21875 C 81.363281 107.960938 79.457031 112.851562 79.5 115.105469 C 80.972656 112.957031 84.394531 109.191406 85.5 107.304688 C 86.027344 106.375 86.140625 104.722656 86.320312 103.382812 C 86.859375 99.363281 87.46875 95.039062 87.488281 91.382812 M 100.15625 72.550781 C 100.753906 70.890625 102.378906 67.378906 101.84375 66.128906 C 101.386719 65.03125 98.671875 63.386719 96.5 62.558594 C 94.128906 61.648438 91.597656 61.429688 90.003906 61.957031 C 87.84375 68.277344 85.386719 74.769531 83.589844 80.964844 C 83.015625 83 82.109375 85.207031 82.414062 87.375 C 85.917969 87.65625 89.136719 89.320312 92.316406 91.09375 C 94.976562 86 97.921875 78.667969 100.15625 72.550781 M 111.300781 42.328125 C 111.6875 39.671875 112.492188 36.453125 111.011719 34.085938 C 109.527344 31.722656 105.527344 30.265625 102.96875 31.101562 C 99.695312 32.1875 98.539062 35.773438 97.164062 38.5 C 93.859375 45.101562 90.363281 53.363281 89.160156 59.375 C 94.789062 58.609375 99.777344 60.640625 104.265625 65.125 C 105.640625 62.796875 106.527344 60.242188 107.351562 57.824219 C 109.113281 52.65625 110.503906 47.910156 111.300781 42.328125 M 113.304688 32.90625 C 114.707031 35.257812 114.011719 39.726562 113.570312 42.847656 C 112.300781 52.148438 108.453125 62.28125 105.25 70.132812 C 104.429688 70.851562 103.773438 70.777344 102.957031 71.308594 C 101.023438 76.203125 98.785156 83.152344 96.175781 88.886719 C 94.863281 91.875 93.945312 95.671875 89.933594 95.1875 C 88.835938 99.25 89.511719 103.757812 88.96875 107.96875 C 85.222656 111.261719 81.609375 114.785156 79.039062 118.46875 C 78.265625 119.589844 77.558594 120.996094 76.34375 121.605469 C 74.316406 121.082031 74.921875 118.855469 75.03125 117.390625 C 75.40625 112.910156 75.578125 107.675781 74.558594 102.828125 C 76.542969 99.164062 79.246094 95.675781 81.230469 92.039062 C 77.9375 90.011719 79.375 86.28125 80.167969 83.441406 C 81.859375 77.476562 84.371094 70.546875 86.378906 65.398438 C 86.261719 64.5 85.285156 64.40625 85.40625 63.480469 C 85.515625 60.507812 86.882812 57.703125 87.917969 54.855469 C 89.996094 49.191406 91.667969 44.140625 94.699219 38.140625 C 96.652344 34.265625 97.601562 31.136719 102.363281 28.410156 C 104.507812 27.734375 110.773438 28.609375 113.304688 32.90625 "/>
+</g>
+</g>
+<g clip-path="url(#clip3)" clip-rule="nonzero">
+<g clip-path="url(#clip4)" clip-rule="nonzero">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 111.011719 34.089844 C 112.492188 36.453125 111.6875 39.671875 111.300781 42.328125 C 110.503906 47.914062 109.113281 52.65625 107.351562 57.824219 C 106.527344 60.242188 105.640625 62.800781 104.265625 65.121094 C 99.777344 60.640625 94.789062 58.609375 89.160156 59.375 C 90.363281 53.363281 93.859375 45.101562 97.160156 38.5 C 98.539062 35.773438 99.695312 32.1875 102.972656 31.101562 C 105.527344 30.265625 109.527344 31.722656 111.011719 34.089844 "/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
index edfc1e2e..dc420ecf 100644
--- a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
+++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
@@ -86,11 +86,22 @@ function registerEventListeners() {
 		$("#PlaceStepButton").click();
 	});
 	
+	
 	$("#placeContinue").bind("click", function(evt) {
-		
+
 		$("#SignStepButton").click();
 	});
 	
+	$("#placeSignatureExtern").bind("click", function(evt) {
+		
+		$("#iFrame").contents().find("#placeSignature").click();
+	});
+	
+	$("#delSignatureExtern").bind("click", function(evt) {
+		
+		$("#iFrame").contents().find("#delSignature").click();
+	})
+	
 	function toggleView(input)
 	{
 		console.log("toggleView : " + input);
@@ -153,25 +164,6 @@ function registerEventListeners() {
 		}
 	}
 	
-/*	$("#main").bind("drop", function(evt) {
-		evt.preventDefault();
-		evt.stopPropagation();
-		var files = evt.originalEvent.dataTransfer.files;
-		if(files == null || files.length === 0) {
-			return;
-		}
-		else if(files[0].name.indexOf(".pdf") < 0)
-		{
-			window.alert("The file type must be PDF");
-			return;
-		} 
-		
-		file = files[0];
-		previewFile();
-	}); */
-	
-	
-	
 	$("#pdf-file").bind("change", function(evt) {
 		file_event = evt;
 		var files = evt.target.files;
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
index da71e83d..47720d42 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
@@ -121,6 +121,12 @@ function displayPdf() {
 	fileReader.readAsArrayBuffer(file);
 }
 
+/*$("#placeSignatureExtern").bind("click", function(evt) {
+	console.log("PLACE SIGNATURE EXTERN");
+	$("#placeSignature").click();
+	
+}); */
+
 //
 //Attaches event handlers to the signature placement icons
 //
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
index 84e0f073..2eff3912 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
@@ -36,8 +36,8 @@
 }
 
 .textLayer .highlight {
-  margin: -1px;
-  padding: 1px;
+  margin: -0.063em;
+  padding: -0.063em;
 
   background-color: rgb(180, 0, 170);
   border-radius: 4px;
@@ -68,9 +68,9 @@
 
 .pdfViewer .page {
   direction: ltr;
-  width: 816px;
-  height: 1056px;
-  margin: 1px auto -8px auto;
+  width: 51em;
+  height: 66em;
+  margin: 0.063em auto -0.5em auto;
   position: relative;
   overflow: visible;
   border: 9px solid transparent;
@@ -80,7 +80,7 @@
 }
 
 .pdfViewer.removePageBorders .page {
-  margin: 0px auto 10px auto;
+  margin: 0px auto 0.625em auto;
   border: none;
 }
 
@@ -102,7 +102,7 @@
 .pdfViewer .page .annotLink > a:hover {
   opacity: 0.2;
   background: #ff0;
-  box-shadow: 0px 2px 10px #ff0;
+  box-shadow: 0px 0.125em 0.625em #ff0;
 }
 
 :-webkit-full-screen .pdfViewer .page {
@@ -140,8 +140,8 @@
   float: left;
   max-width: 20em;
   background-color: #FFFF99;
-  box-shadow: 0px 2px 5px #333;
-  border-radius: 2px;
+  box-shadow: 0px 0.125em 0.313em #333;
+  border-radius: 0.125em;
   padding: 0.6em;
   cursor: pointer;
 }
@@ -178,7 +178,7 @@
 html {
   height: 100%;
   /* Font size is needed to make the activity bar the correct size. */
-  font-size: 10px;
+  font-size: 0.625em;
 }
 
 body {
@@ -320,7 +320,7 @@ html[dir='rtl'] .innerCenter {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 200px;
+  width: 12.5em;
   visibility: hidden;
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease;
@@ -331,12 +331,12 @@ html[dir='rtl'] .innerCenter {
 html[dir='ltr'] #sidebarContainer {
   -webkit-transition-property: left;
   transition-property: left;
-  left: -200px;
+  left: -12.5em;
 }
 html[dir='rtl'] #sidebarContainer {
   -webkit-transition-property: right;
   transition-property: right;
-  right: -200px;
+  right: -12.5em;
 }
 
 #outerContainer.sidebarMoving > #sidebarContainer,
@@ -356,7 +356,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
   right: 0;
   bottom: 0;
   left: 0;
-  min-width: 320px;
+  min-width: 10em;
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease;
   transition-duration: 200ms;
@@ -365,47 +365,47 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
 html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
   -webkit-transition-property: left;
   transition-property: left;
-  left: 200px;
+  left: 12.5em;
 }
 html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
   -webkit-transition-property: right;
   transition-property: right;
-  right: 200px;
+  right: 12.5em;
 }
 
 #sidebarContent {
-  top: 32px;
+  top: 2em;
   bottom: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: absolute;
-  width: 200px;
+  width: 12.5em;
   background-color: hsla(0,0%,0%,.1);
 }
 html[dir='ltr'] #sidebarContent {
   left: 0;
-  box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset -0.063em 0 0 hsla(0,0%,0%,.25);
 }
 html[dir='rtl'] #sidebarContent {
   right: 0;
-  box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset 0.063em 0 0 hsla(0,0%,0%,.25);
 }
 
 #viewerContainer {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: absolute;
-  top: 32px;
+  top: 2em;
   right: 0;
   bottom: 0;
   left: 0;
   outline: none;
 }
 html[dir='ltr'] #viewerContainer {
-  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+  box-shadow: inset 0.063em 0 0 hsla(0,0%,100%,.05);
 }
 html[dir='rtl'] #viewerContainer {
-  box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
+  box-shadow: inset -0.063em 0 0 hsla(0,0%,100%,.05);
 }
 
 .toolbar {
@@ -421,57 +421,58 @@ html[dir='rtl'] #viewerContainer {
 }
 
 #toolbarSidebar {
-  width: 200px;
-  height: 32px;
+  width: 12.5em;
+  height: 2em;
   background-color: #424242; /* fallback */
   background-image: url(images/texture.png),
                     linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
 }
 html[dir='ltr'] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 0 1px hsla(0,0%,0%,.1);
+  box-shadow: inset -0.063em 0 0 rgba(0, 0, 0, 0.25),
+              inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+              0 0.063em 0 hsla(0,0%,0%,.15),
+              0 0 0.063em hsla(0,0%,0%,.1);
 }
 html[dir='rtl'] #toolbarSidebar {
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 0 1px hsla(0,0%,0%,.1);
+  box-shadow: inset 0.063em 0 0 rgba(0, 0, 0, 0.25),
+              inset 0 0.063em 0 hsla(0,0%,100%,.05),
+              0 0.063em 0 hsla(0,0%,0%,.15),
+              0 0 0.063em hsla(0,0%,0%,.1);
 }
 
 #toolbarContainer, .findbar, .secondaryToolbar {
   position: relative;
-  height: 32px;
+  height: 2em;
   background-color: #474747; /* fallback */
   background-image: url(images/texture.png),
                     linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
 }
 html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
-              inset 0 1px 1px hsla(0,0%,0%,.15),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 1px 1px hsla(0,0%,0%,.1);
+  box-shadow: inset 0.063em 0 0 hsla(0,0%,100%,.08),
+              inset 0 0.063em 0.063em hsla(0,0%,0%,.15),
+              inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+              0 0.063em 0 hsla(0,0%,0%,.15),
+              0 0.063em 0.063em hsla(0,0%,0%,.1);
 }
 html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset -1px 0 0 hsla(0,0%,100%,.08),
-              inset 0 1px 1px hsla(0,0%,0%,.15),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 1px 1px hsla(0,0%,0%,.1);
+  box-shadow: inset -0.063em 0 0 hsla(0,0%,100%,.08),
+              inset 0 0.063em 0.063em hsla(0,0%,0%,.15),
+              inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+              0 0.063em 0 hsla(0,0%,0%,.15),
+              0 0.063em 0.063em hsla(0,0%,0%,.1);
 }
 
 #toolbarViewer {
-  height: 32px;
+  height: 2em;
+  min-width: 5em;
 }
 
 #loadingBar {
   position: relative;
   width: 100%;
-  height: 4px;
+  height: 0.25em;
   background-color: #333;
-  border-bottom: 1px solid #333;
+  border-bottom: 0.063em solid #333;
 }
 
 #loadingBar .progress {
@@ -509,7 +510,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   top: 0;
   left: 0;
   height: 100%;
-  width: 50px;
+  width: 3.125em;
 
   background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
   background-size: 100% 100%;
@@ -520,27 +521,27 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 }
 
 .findbar, .secondaryToolbar {
-  top: 32px;
+  top: 2em;
   position: absolute;
   z-index: 10000;
-  height: 32px;
+  height: 2em;
 
-  min-width: 16px;
-  padding: 0px 6px 0px 6px;
-  margin: 4px 2px 4px 2px;
+  min-width: 1em;
+  padding: 0px 0.375em 0px 0.375em;
+  margin: 0.25em 0.125em 0.25em 0.125em;
   color: hsl(0,0%,85%);
-  font-size: 12px;
-  line-height: 14px;
+  font-size: 0.75em;
+  line-height: 0.875em;
   text-align: left;
   cursor: default;
 }
 
 html[dir='ltr'] .findbar {
-  left: 68px;
+  left: 4.25em;
 }
 
 html[dir='rtl'] .findbar {
-  right: 68px;
+  right: 4.25em;
 }
 
 .findbar label {
@@ -558,23 +559,23 @@ html[dir='rtl'] #findInput[data-status="pending"] {
 }
 
 .secondaryToolbar {
-  padding: 6px;
+  padding: 0.375em;
   height: auto;
   z-index: 30000;
 }
 html[dir='ltr'] .secondaryToolbar {
-  right: 4px;
+  right: 0.25em;
 }
 html[dir='rtl'] .secondaryToolbar {
-  left: 4px;
+  left: 0.25em;
 }
 
 #secondaryToolbarButtonContainer {
-  max-width: 200px;
-  max-height: 400px;
+  max-width: 12.5em;
+  max-height: 25em;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  margin-bottom: -4px;
+  margin-bottom: -0.25em;
 }
 
 .doorHanger,
@@ -1260,7 +1261,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
 }
 
 .toolbarLabel {
-  min-width: 16px;
+  min-width: 5em;
   padding: 3px 6px 3px 2px;
   margin: 4px 2px 4px 0;
   border: 1px solid transparent;
@@ -1564,7 +1565,7 @@ html[dir='rtl'] .attachmentsItem > button {
   text-align: left;
 }
 #documentPropertiesOverlay .row > * {
-  min-width: 100px;
+  min-width: 5em;
 }
 html[dir='ltr'] #documentPropertiesOverlay .row > * {
   text-align: left;
@@ -1948,14 +1949,14 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 
 @media all and (max-width: 770px) {
   #sidebarContainer {
-    top: 32px;
+    top: 2em;
     z-index: 100;
   }
   .loadingInProgress #sidebarContainer {
-    top: 37px;
+    top: 2.313em;
   }
   #sidebarContent {
-    top: 32px;
+    top: 2em;
     background-color: hsla(0,0%,0%,.7);
   }
 
@@ -1968,11 +1969,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 
   html[dir='ltr'] .outerCenter {
     float: left;
-    left: 205px;
+    left: 12.813em;
   }
   html[dir='rtl'] .outerCenter {
     float: right;
-    right: 205px;
+    right: 12.813em;
   }
 
   #outerContainer .hiddenLargeView,
@@ -2013,12 +2014,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
   html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter,
   html[dir='ltr'] .outerCenter {
-    left: 156px;
+    left: 9.750em;
   }
   html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
   html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter,
   html[dir='rtl'] .outerCenter {
-    right: 156px;
+    right: 9.750em;
   }
   .toolbarButtonSpacer {
     width: 0;
@@ -2030,3 +2031,9 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
     display: none;
   }
 }
+
+ @media all and (max-width: 320px) {
+ #toolbarContainer {
+ 	width: 21.5em;
+  }
+ }
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
index 1f8a6a44..6db3039e 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
@@ -24,7 +24,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
     <meta name="google" content="notranslate">
     <title>PDF.js viewer</title>
 
-    <link rel="stylesheet" href="viewer.css"/>
+   <link rel="stylesheet" href="viewer.css"/>
 	
     <script src="compatibility.js"></script>
 
@@ -42,7 +42,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
 	<script src="app.js"></script>
 	<style>
 	.black_overlay{
-		display: block;
+		display: inline-block;
 		position: fixed;
 		top: 0%;
 		left: 0%;
@@ -62,7 +62,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
 		left: 32%;
 		width: 36%;
 		height: 30%;
-		padding: 16px;
+		padding: 1em;
 		border: 4px solid orange;
 		background-color: white;
 		z-index:1002;
@@ -219,29 +219,59 @@ http://sourceforge.net/adobe/cmap/wiki/License/
                 <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="15">
                 <span id="numPages" class="toolbarLabel"></span>
               </div>
+               
               <div id="toolbarViewerRight">
+              
+              <div class="splitToolbarButton">
+                    <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
+                      <span data-l10n-id="zoom_out_label">Zoom Out</span>
+                    </button>
+                    <div class="splitToolbarButtonSeparator"></div>
+                    <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
+                      <span data-l10n-id="zoom_in_label">Zoom In</span>
+                     </button>
+                  </div>
+                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
+                     <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
+                      <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
+                      <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
+                      <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
+                      <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
+                      <option id="customScaleOption" title="" value="custom"></option>
+                      <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
+                      <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
+                      <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
+                      <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
+                      <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
+                      <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
+                      <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
+                      <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
+                    </select>
+                  </span>
+              
                 <button id="presentationMode" style="display:none;" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="29" data-l10n-id="presentation_mode">
                   <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                 </button>
 				
-				<!-- ADDED -->
 				
-				<button id="placeSignature" class="toolbarButton placeSignature hiddenLargeView" title="Place Signature on current Page" tabindex="30" data-l10n-id="place_signature">
+			  	 <button style="display:none;" id="placeSignature" class="toolbarButton placeSignature hiddenLargeView" title="Place Signature on current Page" tabindex="30" data-l10n-id="place_signature">
                   <span data-l10n-id="place_signature_label">Place Signature</span>
-                </button>
+                </button> 
+                
 				
-				<!-- ADDED -->
-				<button id="delSignature" class="toolbarButton delSignature hiddenLargeView" title="Remove Signature (If no Signature gets placed, one will be appended at the end of the document)" tabindex="31" data-l10n-id="del_signature">
+				<button style="display:none;" id="delSignature" class="toolbarButton delSignature hiddenLargeView" title="Remove Signature (If no Signature gets placed, one will be appended at the end of the document)" tabindex="31" data-l10n-id="del_signature">
                   <span data-l10n-id="place_signature_label">Remove Signature</span>
-                </button>
+                </button>  
+				
 				
-                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
+                <button style="display:none;" id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="30" data-l10n-id="open_file">
                   <span data-l10n-id="open_file_label">Open</span>
-                </button>
+                </button> 
 
-                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
+				
+                <button style="display:none;" id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
                   <span data-l10n-id="print_label">Print</span>
-                </button>
+                </button> 
 
                 <button id="download" style="display:none;" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
                   <span data-l10n-id="download_label">Download</span>
@@ -255,35 +285,11 @@ http://sourceforge.net/adobe/cmap/wiki/License/
                 <button id="secondaryToolbarToggle" style="display: none;" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
                   <span data-l10n-id="tools_label">Tools</span>
                 </button>
-              </div>
+              </div> 
               <div class="outerCenter">
                 <div class="innerCenter" id="toolbarViewerMiddle">
-                  <div class="splitToolbarButton">
-                    <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
-                      <span data-l10n-id="zoom_out_label">Zoom Out</span>
-                    </button>
-                    <div class="splitToolbarButtonSeparator"></div>
-                    <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
-                      <span data-l10n-id="zoom_in_label">Zoom In</span>
-                     </button>
-                  </div>
-                  <span id="scaleSelectContainer" class="dropdownToolbarButton">
-                     <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
-                      <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
-                      <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
-                      <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
-                      <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
-                      <option id="customScaleOption" title="" value="custom"></option>
-                      <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
-                      <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
-                      <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
-                      <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
-                      <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
-                      <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
-                      <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
-                      <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
-                    </select>
-                  </span>
+                  
+                  
                 </div>
               </div>
             </div>
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
index af4fcd8d..7abe3a52 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
@@ -3182,8 +3182,8 @@ var PDFPageView = (function PDFPageViewClosure() {
 
     cssTransform: function PDFPageView_transform(canvas, redrawAnnotations) {
       // Scale canvas, canvas wrapper, and page container.
-      var width = this.viewport.width;
-      var height = this.viewport.height;
+      var width = this.viewport.width / 50;
+      var height = this.viewport.height / 50;
       var div = this.div;
       canvas.style.width = canvas.parentNode.style.width = div.style.width =
         Math.floor(width) + 'px';
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index 05bf379c..2272662e 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -107,12 +107,13 @@
 	</div>
 	-->
 	
-	<!-- Header -->
 <div class="container">
+	<!-- Header -->
+<div class="center">
 	  <div class="center" id="navBar">
 	  <ul class="nav nav-wizard">
 	    <li class="active" id="UploadStepButton"><a href="#"><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span><span id="uploadNavText"> Upload</span></a></li>
-	    <li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place</span></a></li>
+	    <li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place</span></a></li>
 	    <li id="SignStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><span id="signNavText" style="display:none;"> Sign</span></a></li>
 	    <li id="FinishStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span><span id="downloadNavText" style="display:none;"> Download</span></a></li>
 	  </ul>
@@ -125,7 +126,7 @@
 
 	<div class="col-md-12">
 	
-		<div id="DropContainer" class="container">
+		<div id="DropContainer">
 			<h3 class="center">Upload your Document</h3>
 			<div class="center">
 				<div id="borderBox" class="center">
@@ -157,72 +158,81 @@
 			</div>		
 		</div>
 
-		<div id="ViewContainer" class="container" style="display: none;">
-			<h3 class="center">Place your Signature<small></h3>
-			<h6 class="center">(If no Signature is placed, one will be appended at the end of the Document)</h6>
-			<div class="pull-right">
-			<button id="placeContinue" class="btn btn-lg btn-primary">Continue</button>
-			</div>
+		<div id="ViewContainer" style="display: none;">
+			<h3 class="center">Place your Signature</h3>
+			<h6 class="center" id="noSignatureWarning">(If no Signature is placed, one will be appended at the end of the Document)</h6>
+			<div class="center">
+				<div id="ViewerExternToolbar" class="center">
+				<div id="placeSignatureExtern">
+				<span class="glyphicon glyphicon-pencil"></span><!--<img src="assets/img/federohne.svg" title="Place Signature on current Page"> --><caption>Add</caption>
+				</div>
+				<div id="delSignatureExtern">
+				<span class="glyphicon glyphicon-ban-circle"></span><!-- <img src="assets/img/federohne.svg" title="Remove Signature from current Page"> --><caption>Remove</caption> 
+				</div>
+	            <div id="placeContinue">
+	            <span class="glyphicon glyphicon-ok"></span><!-- <img src="assets/img/federohne.svg" title="Continue"> --><caption>Continue</caption>
+	            </div>
+                </div>
+             </div>
 			<div id="content" class="center">
 			Loading your PDF, please wait...
 			</div>
 		</div>
 		
-		<div id="SignContainer" class="container" style="display: none;">
+		<div id="SignContainer" style="display: none;">
 			<h3 class="center">Choose your Sign Method</h3>
 				<fieldset>
-					<table>
+				<div class="center">
+					<div id="methodContainer" class="row center">
 						<%
 						if (WebConfiguration.getHandyBKUURL() != null) {
 						%>
-						<tr>
-							<td><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></td>
-							<td><label for="mobileBKU">Handy</td>
-							<td><label for="mobileBKU"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></td>
-							
-						</tr>
+						
+						<div class="methodChooseContainer">
+							<div id="ImageBox"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></div>
+							<div><button class="btn btn-primary">Mobile<br>Phone</button></div>
+							<div style="display:none;"><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></div>
+						</div>
 						<%
 							}
 						%>
 						<%
 						if (WebConfiguration.getLocalBKUURL() != null) {
 						%>
-						<tr>
-							<td><input type="radio" id="localBKU" name="connector" value="bku"></td>
-							<td><label for="localBKU">Lokale BKU</label></td>
-							<td><label for="localBKU"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></label></td>
-							
-						</tr>
+						<div class="methodChooseContainer">
+							<div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></div>
+							<div><button class="btn btn-primary">Lokale<br>BKU</button></div>
+							<div style="display:none;"><input type="radio" id="localBKU" name="connector" value="bku"></div>
+						</div>
 						<%
 							}
 						%>
 						<%
 						if (WebConfiguration.getOnlineBKUURL() != null) {
 						%>
-						<tr>
-							<td><input type="radio" id="onlineBKU" name="connector" value="onlinebku"></td>
-							<td><label for="onlineBKU">Online BKU</label></td>
-							<td><label for="onlineBKU"><img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></label></td>
-							
-						</tr>
+						<div class="methodChooseContainer">
+							<div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></div>
+							<div><button class="btn btn-primary">Online<br>BKU</button></div>
+							<div style="display:none;"><input type="radio" id="onlineBKU" name="connector" value="onlinebku"></div>
+						</div>
 						<%
 							}
 						%>
-						<%
+						<!--<%
 							if(WebConfiguration.getKeystoreDefaultEnabled()) {
 						%>
-						<tr>
-							<td><input type="radio" id="jks" name="connector" value="jks"></td>
-							<td><label for="jks">Server Keystore</label></td>
-							<td><label for="jks"><img src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></label></td>
-						</tr>
+							<div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></div>
+						    <div><button class="btn btn-primary">Server<br>Keystore</button></div>
+							<div style="display:none;"><input type="radio" id="jks" name="connector" value="jks"></div>
+						</div> -->
 						<%
 							}
-						%> 
-					</table>
+						%>  
+					</div>
+				</div>
 				</fieldset>
 		</div>
-		<div id="DownloadContainer" class="container" style="display: none;">
+		<div id="DownloadContainer" style="display: none;">
 			<h3 class="center">Download your Document</h3>
 			
 			<div id="btnSign">
@@ -233,6 +243,8 @@
 				
 	</div>
 </div>
+
+</div>