From 3227b05f8814df264a40db9d984eadbefbd6e6a5 Mon Sep 17 00:00:00 2001
From: RubaXa <ibnRubaXa@gmail.com>
Date: Tue, 1 Jul 2014 23:49:47 +0400
Subject: [PATCH] * html/css

---
 index.html | 23 ++++++++++++++---------
 ply.css    | 12 +++++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 013aed6..acbe666 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,10 @@
 
 			<div class="col-left">
 				<div class="ply-layer alert example">
-					<div class="ply-content">Hello %username%!</div>
-					<div class="ply-footer"><button class="ply-ok">OK</button></div>
+					<div class="ply-inside">
+						<div class="ply-content">Hello %username%!</div>
+						<div class="ply-footer"><button class="ply-ok">OK</button></div>
+					</div>
 				</div>
 			</div>
 
@@ -44,8 +46,10 @@
 
 			<div class="col-left">
 				<div class="ply-layer confirm example">
-					<div class="ply-content">Continue?</div>
-					<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
+					<div class="ply-inside">
+						<div class="ply-content">Continue?</div>
+						<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
+					</div>
 				</div>
 			</div>
 
@@ -65,11 +69,13 @@
 
 			<div class="col-left">
 				<div class="ply-layer prompt example">
-					<div class="ply-header">Spam subscribe</div>
-					<div class="ply-content">
-						<input class="ply-input" placeholder="E-mail"/>
+					<div class="ply-inside">
+						<div class="ply-header">Spam subscribe</div>
+						<div class="ply-content">
+							<input class="ply-input" placeholder="E-mail"/>
+						</div>
+						<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
 					</div>
-					<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div>
 				</div>
 			</div>
 
@@ -104,7 +110,6 @@
 		jQuery(function ($) {
 			hljs.configure({ classPrefix: '' });
 
-
 			$('.example')
 				.each(function () {
 					var $el = $(this);
diff --git a/ply.css b/ply.css
index 93d57ad..3912fd3 100644
--- a/ply.css
+++ b/ply.css
@@ -58,24 +58,28 @@
 	box-shadow: 0 0 3px rgba(0,0,0,.3);
 	background-color: #fff;
 	border-radius: 2px;
-	font-family: "Arial", Helvetica;
 	font-size: 16px;
+	font-family: "Arial", Helvetica;
 }
 	.ply-layer.alert .ply-content,
 	.ply-layer.confirm .ply-content {
-		padding: 40px 30px;
+		padding: 20px 0 15px;
 		text-align: center;
 	}
 
 	.ply-layer.alert .ply-footer,
 	.ply-layer.confirm .ply-footer,
 	.ply-layer.prompt .ply-footer {
+		margin-top: 20px;
 		text-align: center;
-		padding-bottom: 20px;
 	}
 
+.ply-inside {
+	padding: 20px;
+}
 
 .ply-header {
+	margin: -20px -20px 20px;
 	padding: 10px 20px;
 	font-size: 18px;
 	background-color: #f1f1f1;
@@ -83,11 +87,9 @@
 }
 
 .ply-content {
-	padding: 20px;
 }
 
 .ply-footer {
-	padding: 0 20px 15px;
 }
 	.ply-footer button {
 		margin-left: 20px;