CSS fixes, centering for all screen sizes

hourglass/client/login/login.css

@@ -57,20 +57,26 @@
 	width: 100%;
 	height: 84vh;
 	
-	background-color: #E5E5E5;
-	background-image: url("banner100.jpg");
-	background-size: 100vw 84vh;
-
 	display: table-row;
 	position: absolute;
 	top: 11vh;
 }
 
+#bannerBg {
+	margin-top: 1%;
+	height: 86vh;
+
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	z-index: -1;
+
+	transform:translate(-50%, -50%);
+}
+
 #circle {
-	width: 95vh;
+	width: 98vh;
-	height: 95vh;
+	height: 98vh;
-	margin: auto;
-	margin-top: -8vh;
 	
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
@@ -78,10 +84,14 @@
 
 	background-color: rgba(0,0,0,0.2);
 	position: relative;
+	top: 50%;
+	left: 50%;
 	z-index: 0;
 
 	-webkit-filter: drop-shadow(2px 2px 5px #333);
 	filter: drop-shadow(2px 2px 5px #333);
+
+	transform: translate(-50%, -50%);
 }
 
 #loginContent {

hourglass/client/login/login.html

@@ -1,4 +1,5 @@
 <template name="login">
+	<div class="noScroll">
 		<div id="loginCont">
 			<header id="loginHeader">
 				<img id="logo" src="logo.png">
@@ -6,6 +7,7 @@
 				<div id="bottomBar"></div>
 			</header>
 			<div id="loginMain">
+				<img id="bannerBg" src="banner100.jpg">
 				<div id="circle">
 					<div id="loginContent">
 						<h2 class="text">Hourglass</h2>
@@ -19,5 +21,6 @@
 				<p id="version">Version 0.1.2</p>
 			</footer>
 		</div>
+	</div>
 	{{> loginButtons}}
 </template>

hourglass/client/main/main.css

@@ -31,9 +31,6 @@ html {
 
 	pointer-events: all;
 
-	/*background-image: url("Hourglass.png");
-	background-size: 1920px 1080px;*/
-
 	-webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -896,7 +893,6 @@ textarea.clickModify {
 	top: 0;
 	left: 0;
 	z-index: -1;
-
 }
 
 #mainBody {