Correct alignment of power confirm button box

2 files changed, 14 insertions, 10 deletions

diff --git a/index.html b/index.html
index 689641b..67d8d7d 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
 			<span id="message-label"></span>
 		</div>
 		<a id="mask" href="#" onclick="hide_element('power-confirm');hide_element('mask');"></a>
-		<div id="power-confirm">
+		<div id="power-confirm" onclick="document.getElementById('mask').click();">
 			<ul>
 				<li>
 					<a class="button" href="#" onclick="lightdm.shutdown();">
diff --git a/petrichor.css b/petrichor.css
index 2e1d078..8954763 100644
--- a/petrichor.css
+++ b/petrichor.css
@@ -20,36 +20,40 @@ body,html
 
 #mask
 {
+	text-align: center;
 	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	right: 0px;
 	bottom: 0px;
-	background-color: rgba(0,0,0,0.6);
+	background-color: rgba(0,0,0,0.7);
 	visibility: hidden;
 	opacity: 0;
 }
 
 #power-confirm
 {
-	transition: visibility 0s linear 0.15s, opacity 0.15s linear;
-	text-align: center;
-	height: 150px;
-	margin-top: -75px;
-	width: 100%;
 	position: absolute;
-	left: 0;
-	top: 50%;
+	left: 50%;
+	bottom: 50px;
 	visibility: hidden;
 	opacity: 0;
 }
 
+#power-confirm > ul
+{
+	display: inline-block;
+	margin: 0px 0px 0px -50%;
+}
+
 #power-confirm li
 {
+	text-align: center;
 	list-style: none;
 	display: inline-block;
-	margin: 2em;
+	margin-left: 2em;
+	margin-right: 2em;
 }
 
 #power-confirm li a