Bootstrap centering and Responsive navBar

3 files changed, 74 insertions, 552 deletions

diff --git a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
index f62b9611..607ae01f 100644
--- a/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
+++ b/pdf-as-web/src/main/webapp/assets/bootstrap/css/bootstrap-nav2/dist/bootstrap-nav-wizard.css
@@ -32,16 +32,17 @@ ul.nav-wizard:after {
   z-index: 11;
   content: " ";
 }
-ul.nav-wizard li { /* PADDING IN OWN STYLE.CSS */
+ul.nav-wizard li {
   position: relative;
   float: left;
   height: 46px;
   display: inline-block;
   text-align: middle;
-   /* CHANGE: 0 20px 0 30px */
+  padding: 0 18.5% 0 6.4%;
   margin: 0;
   font-size: 16px;
   line-height: 46px;
+  width: 1%; /* New*/
 }
 ul.nav-wizard li a {
   color: #468847;
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 facb268a..a04540e9 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -20,21 +20,6 @@ footer {
   and (max-device-width: 480px)
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: portrait) {
-  
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 46%;
-	 }
-	 
-  #FormBox {
-	width: 100%;
-	}
-	
-	ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
     
 }
 
@@ -45,25 +30,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: landscape) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 73%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 3.7em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 32%;
-	}
-
 } 
 
 /* ----------- iPhone 5 and 5S ----------- */
@@ -75,21 +41,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: portrait) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 46%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-
 } 
 
 /* Landscape */ 
@@ -99,25 +50,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: landscape) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 88%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 5.07em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 35%;
-	}
-
 } 
 
 /* ----------- iPhone 6 ----------- */
@@ -129,20 +61,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: portrait) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 55%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 2em 0 30px;
-    }
 } 
 
 /* Landscape */ 
@@ -152,25 +70,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: landscape) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 105%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 6.6em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 37%;
-	}
-
 } 
 
 /* ----------- iPhone 6+ ----------- */
@@ -182,21 +81,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 3)
   and (orientation: portrait) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 62%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 2.6em 0 30px;
-    }
-
 } 
 
 /* Landscape */ 
@@ -206,25 +90,6 @@ footer {
   and (-webkit-min-device-pixel-ratio: 3)
   and (orientation: landscape) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 112%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 7.7em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 37%;
-	}
-
 } 
 
 /* ----------- Google Nexus 6 ----------- */
@@ -236,24 +101,6 @@ footer {
   and (-webkit-device-pixel-ratio: 3.5)
   and (orientation: portrait) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 55%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 2.6em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 30%;
-	}
 } 
 
 /* Landscape */ 
@@ -263,24 +110,6 @@ footer {
   and (orientation: landscape)
   and (-webkit-device-pixel-ratio: 3.5) { 
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 55%;
-	 }
-	 
-	   #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 7.6em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 38%;
-	}
 } 
 
 
@@ -294,21 +123,6 @@ footer {
   and (orientation: portrait) 
   and (-webkit-min-device-pixel-ratio: 1) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 90%;
-	 }
-	 
-	   #FormBox {
-	width: 20em;
-	margin-left:29.5%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 7.4em 0 30px;
-    }
 }
 
 /* Landscape */
@@ -318,22 +132,6 @@ footer {
   and (orientation: landscape) 
   and (-webkit-min-device-pixel-ratio: 1) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 46%;
-	 }
-	 
-	   #FormBox {
-	width: 20em;
-	margin-left: 35%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-
 }
 
 /* G Nexus 7 */
@@ -345,24 +143,6 @@ footer {
   and (orientation: portrait) 
   and (-webkit-device-pixel-ratio: 2) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 5.5em 0 30px;
-    } 	 
-    
-    #ViewerExternToolbar {
-		margin-left: 35%;
-	}
 }
 
 /* Landscape */
@@ -372,25 +152,6 @@ footer {
   and (orientation: landscape) 
   and (-webkit-device-pixel-ratio: 2) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 20em;
-	margin-left: 30%
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 7.4em 0 30px;
-    } 	 
-    
-    #ViewerExternToolbar {
-		margin-left: 38%;
-	}
 }
 
 /* Blackberry Playbook */
@@ -402,26 +163,6 @@ footer {
   and (orientation: portrait) 
   and (-webkit-device-pixel-ratio: 1) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 5.5em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 36%;
-	}
-	 
-	 
 }
 
 /* Google Nexus 4 */
@@ -433,20 +174,6 @@ footer {
   and (orientation: portrait) 
   and (-webkit-device-pixel-ratio: 2) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 90%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 2.2em 0 30px;
-    }
 }
 
 /* Landscape */
@@ -456,24 +183,6 @@ footer {
   and (orientation: landscape) 
   and (-webkit-device-pixel-ratio: 2) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 90%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 6.2em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 36%;
-	}
 }
 
 
@@ -486,21 +195,6 @@ footer {
   and (device-height: 640px) 
   and (orientation: portrait) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 50%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 1.82em 0 30px;
-    }
-
 }
 
 /* Landscape */
@@ -509,25 +203,6 @@ footer {
   and (device-width: 640px) 
   and (orientation: landscape) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 6.2em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 36%;
-	}
-
 }
 
 /* Nokia Lumia */
@@ -538,21 +213,6 @@ footer {
   and (device-height: 533px) 
   and (orientation: portrait) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 45%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-
 }
 
 /* Landscape */
@@ -561,25 +221,6 @@ footer {
   and (device-height: 320px)
   and (orientation: landscape) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 4.5em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 34%;
-	}
-
 }
 
 /* LG Optimus L70*/
@@ -591,25 +232,6 @@ footer {
   and (orientation: portrait)
   and (-webkit-device-pixel-ratio: 1.25) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 45%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 2.2em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 27%;
-	}
-
 }
 
 /* Landscape */
@@ -619,100 +241,14 @@ footer {
   and (orientation: landscape)
   and (-webkit-device-pixel-ratio: 1.25) {
   
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 100%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 6.2em 0 30px;
-    }
-    
-    #ViewerExternToolbar {
-		margin-left: 38%;
-	}
 
 }
 
-
-
-/* ----------- Non-Retina Screens ----------- */
-@media screen 
-  and (min-width: 961px) 
-  and (max-width: 1600px)
-  and (orientation: landscape)  { 
-  
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 20em;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-}
-
-/* ----------- Retina Screens ----------- */
-@media screen 
-  and (min-width: 961px) 
-  and (min-resolution: 192dpi)
-  and (orientation: landscape)
-  and (-webkit-max-device-pixel-ratio: 2) { 
-  
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 80%;
-	 }
-	 
-	 #FormBox {
-	width: 20em;
-	margin-left: 35%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-}
-
-/* Big Landscape Monitors */
-
- @media screen 
-  and (min-width: 1600px)  { 
-  
-  iframe {
-	 	border: none;
-		min-width:5em;
-		width: 100%;
-		height: 100%;
-	 }
-	 
-	 #FormBox {
-	width: 20em;
-	margin-left: 38.5%;
-	}
-	
-		ul.nav-wizard li {
-	padding: 0 20px 0 30px;
-    }
-    
-    #navBar {
-	    margin-left: 37.5%;
-	    
-    }
+iframe {
+ 	border: none;
+/*	min-width:5em; */
+	height: 70%;
+	width:100%
 }
 
 body.wait, body.wait *{
@@ -722,6 +258,12 @@ body.wait, body.wait *{
 
 #DropContainer {
 	
+	width: 100%;
+	
+}
+
+#ViewContainer {
+	width:100%
 }
 
 #SignContainer, #DownloadContainer {
@@ -730,7 +272,7 @@ body.wait, body.wait *{
 
 
 .methodChooseContainer {
-	width: 80px;
+	width: 125px;
 	height: 130px;
 
 }
@@ -743,6 +285,10 @@ body.wait, body.wait *{
 	margin-top:1em;
 }
 
+#DownloadResultContainer {
+	margin-top: 10%;
+}
+
 .ImageBox {
 	width: 100px;
 	height: 125px;
@@ -760,7 +306,8 @@ body.wait, body.wait *{
 }
 
 #navBar {
-	min-width: 22.94em;
+	/*min-width: 20em; */
+	width:100%
 }
 
 #InnerBackBox {
@@ -769,8 +316,7 @@ body.wait, body.wait *{
 }
 
 #BackBox {
-	margin-left: 1.7em;
-	width: 2.4em;
+	height: 46px;
 }
 
 #BackBox:hover {
@@ -779,27 +325,18 @@ body.wait, body.wait *{
 }
 
 #ViewerExternToolbar {
-	margin-bottom: 1em;
-	min-width: 25em;
+	margin: 0.5em;
+
 }
 
+/*
 #ViewerExternToolbar div {
 	margin-left:0.5em;
 	margin-right:0.5em;
 	text-align:center;
 	width:5em;
 	height:5em;	
-}
-
-#ViewerExternToolbar div:hover {
-	cursor:hand;
-	cursor:pointer;
-	margin:0.5em;
-	margin-top:0em;
-	margin-bottom:0em;
-	
-	border: 0.1em dashed;
-}
+} */
 
 #ViewerExternToolbar img {
 	width: 3em;
@@ -840,6 +377,10 @@ body.wait, body.wait *{
 	text-align:center;
 }
 
+#FormBox {
+	width: 20em;
+}
+
 #content {
 	clear: both;
 	height: 40em;
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index 5e8ea875..fe615de9 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -37,8 +37,8 @@
 	
 <div class="container col-lg-8 col-lg-offset-2">
 	<!-- Header -->
-<div class="row">
-	  <div class="col-sm-12 col-md-1 col-md-offset-4 col-lg-1 col-lg-offset-4 col-xs-12" id="navBar">
+<div class="row center">
+	  <div class="" 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-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place&nbsp;&nbsp;</span></a></li>
@@ -46,83 +46,69 @@
 	    <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;"> Finish&nbsp;</span></a></li>
 	  </ul>
 	  </div>
+	   <button id="BackBox" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span></button>
  </div>
- <div class="row" id="OuterBackBox">
+ <div id="OuterBackBox" style="display:none;">
  <div id="InnerBackBox" class="col-sm-1 col-md-1 col-md-offset-4 col-lg-1 col-lg-offset-4">
- <p id="BackBox">Back</p>
+ <p >Back</p>
  </div>
  </div>
 
 	
 <!-- Main Switch Frame -->
-<div class="row">
-
-	<div class="col-md-12">
+<div class="row center">
 	
 		<div id="DropContainer">
-			<h3>Upload your Document</h3>
-			<div class="col-sm-12 col-md-12 col-lg-12">
-				<div id="borderBox">
-					<div class="row mainBox">
-						<div id="FormBox" class="col-lg-12 col-lg-offset-4 col-md-12 col-md-offset-4 col-sm-12 col-sm-offset-4 col-xs-12">
-							<h5 class="visible-lg-block"> Drop or select your file here</h5>
-							<h5 class="hidden-lg">Upload your File</h5>
-								<div id="FormDefine" class="form-group has-feedback">
-						            <div class="input-group">
-						                <span class="input-group-btn">
-						                    <span class="btn btn-primary btn-file">
-						                     Browse... <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
-						                    </span>
-						                </span>
-						                <input id= "FileNamePreview" type="text" class="form-control" readonly>
-						                <span id="BadFeedback" class="glyphicon glyphicon-remove form-control-feedback" style="display: none;" aria-hidden="true"></span>
-						                <span id="GoodFeedback" class="glyphicon glyphicon-ok form-control-feedback" style="display: none;" aria-hidden="true"></span>
-						            </div>
-						            <div id="fileTypeErrorMessage" class="pull-right">
-						            <p id="noPdfMessage" style="display:none;"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
-						            </div>
-	
-					            </div>	
-					            
-					            <div id="ContinueButtonBox" class="col-md-12 center">
-					            <button id="uploadContinue" class="btn btn-primary btn-lg btn-block" disabled="disabled" >Continue</button>
-					            </div>				        
-						</div>
+			<div id="borderBox">
+				<div class="row mainBox center">
+					<div id="FormBox" class="">
+						<h5 class="visible-lg-block"> Drop or select your file here</h5>
+						<h5 class="hidden-lg">Upload your File</h5>
+							<div id="FormDefine" class="form-group has-feedback">
+					            <div class="input-group">
+					                <span class="input-group-btn">
+					                    <span class="btn btn-primary btn-file">
+					                     Browse... <input type="file" name="pdf-file" id="pdf-file" accept="application/pdf">
+					                    </span>
+					                </span>
+					                <input id= "FileNamePreview" type="text" class="form-control" readonly>
+					                <span id="BadFeedback" class="glyphicon glyphicon-remove form-control-feedback" style="display: none;" aria-hidden="true"></span>
+					                <span id="GoodFeedback" class="glyphicon glyphicon-ok form-control-feedback" style="display: none;" aria-hidden="true"></span>
+					            </div>
+					            <div id="fileTypeErrorMessage" class="pull-right">
+					            <p id="noPdfMessage" style="display:none;"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> The file type must be PDF!</p>
+					            </div>
+
+				            </div>	
+				            
+				            <div id="ContinueButtonBox" class="col-md-12 center">
+				            <button id="uploadContinue" class="btn btn-primary btn-lg btn-block" disabled="disabled" >Continue</button>
+				            </div>				        
 					</div>
-				</div>	
-			</div>		
+				</div>
+			</div>	
 		</div>
 
 		<div id="ViewContainer" style="display: none;">
-			<h3>Place your Signature</h3>
-			<h6 id="noSignatureWarning">If you Quick Sign, the Signature will be appended at the end of the Document</h6>
-			<div>
-				<div id="ViewerExternToolbar" class="col-lg-6 col-lg-offset-5 col-md-6 col-md-offset-5 col-sm-6 col-sm-offset-5 col-xs-6 col-xs-offset-3">
-				<div id="QuickSign" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
-				<img src="assets/img/federohne.svg" title="Place the Signature on a new Page"><br>Quick Sign
-				</div>
-	            <div id="placeContinue" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
-	            <img src="assets/img/federohne.svg" title="Continue"><br>Continue
-	            </div>
+			<div> <!--  class="center" -->
+				<div id="ViewerExternToolbar" class="center pull-right">
+				<button id="QuickSign" class="btn btn-primary">Quick Sign</button>
+	            <button id="placeContinue" class="btn btn-success">Continue</button>
                 </div>
              </div>
-             <div id="outerCenter">
 			<div id="content" class="">
 			Loading your PDF, please wait...
 			</div>
-			</div>
 		</div>
 		
 		<div id="SignContainer" style="display: none;">
-			<h3>Choose your Sign Method</h3>
-				<fieldset>
-				<div class="row mainBox">
-					<div id="methodContainer" class="row">
+				<div class="row mainBox center">
+					<div id="methodContainer" class="row center">
 						<%
 						if (WebConfiguration.getHandyBKUURL() != null) {
 						%>
 						
-						<div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xs-offset-3 col-md-offset-4">
+						<div class="methodChooseContainer">
 							<div class="ImageBox" id="MobilePhoneSubmit"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/>Mobile</div>
 							<div style="display:none;"><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></div>
 						</div>
@@ -132,7 +118,7 @@
 						<%
 						if (WebConfiguration.getLocalBKUURL() != null) {
 						%>
-						<div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3">
+						<div class="methodChooseContainer">
 							<div class="ImageBox" id="LocalBKUSubmit"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" />Card</div>
 							<div style="display:none;"><input type="radio" id="localBKU" name="connector" value="bku"></div>
 						</div>
@@ -153,7 +139,7 @@
 						<%
 							if(WebConfiguration.getKeystoreDefaultEnabled()) {
 						%>
-						<div class="methodChooseContainer col-xs-3 col-sm-3 col-md-3 col-lg-3">
+						<div class="methodChooseContainer">
 							<div class="ImageBox" id="KeystoreSubmit"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></div>
 							<div style="display:none;"><input type="radio" id="jks" name="connector" value="jks"></div>
 						</div>
@@ -163,24 +149,18 @@
 					</div>
 					<iframe id='mobileSignOnFrame' style="display:none;"></iframe>
 				</div>
-				</fieldset>
 		</div>
 		<div id="DownloadContainer" style="display: none;">
-			<h3 class="center">Download your Document</h3>
-			
 			<div id="btnSign" style="display:none">
 				<h3 class="center">Sign Document</h3>
 			</div>
-			<div class="center">
+			<div class="center" id="DownloadResultContainer">
 			<input id="DownloadResultButton" value="Download your PDF" class="btn btn-success btn-lg">
 			</div>
 		
-		</div>
-				
+		</div>	
 	</div>
 </div>
-
-</div>