now overlay works upto-spec...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

index.html

@@ -87,10 +87,10 @@ CKEDITOR.disableAutoInline = true
 
 function showInOverlay(text){
 	$('.overlay').remove()
-	var overlay = $('<div class="overlay"><div/><div/></div>')
+	var overlay = $('<div class="overlay"><div>&times;</div><div/></div>')
 		.css({display: 'none'})
 	overlay.children().first().click(function(){
-		overlay.fadeOut()
+		removeOverlay()
 	})
 
 	overlay.children().last().append(text)
@@ -100,6 +100,12 @@ function showInOverlay(text){
 		.appendTo($('.chrome'))
 		.fadeIn()
 }
+function removeOverlay(){
+	$('.overlay').fadeOut() 
+	setTimeout(function(){
+		$('.overlay').remove()
+	}, 300)
+}
 
 function showInfo(){
 	showInOverlay($(
@@ -121,7 +127,7 @@ $(document).ready(function(){
 		.keydown(makeKeyboardHandler({
 			'.overlay': {
 				Esc: function(){
-					$('.overlay').fadeOut() 
+					removeOverlay()
 					return false
 				},
 			},
@@ -213,7 +219,7 @@ $(document).ready(function(){
 	//setupNavigator()
 	setCurrentPage(0)
 
-	toggleThemes('dark-viewer')
+	toggleThemes('none')
 
 
 	setupEditor()

magazine-themes.css

@@ -6,7 +6,7 @@
 /********************************************************* Viewer ****/
 
 .splash {
-	background: gray;
+	background: #444;
 }
 .splash * {
 	color: white;
@@ -111,6 +111,7 @@
 
 .overlay > div:first-child {
 	background: #555;
+	color: silver;
 }
 .overlay > div:last-child {
 	color: white;
@@ -196,6 +197,7 @@
 
 .light-viewer .overlay > div:first-child {
 	background: white;
+	color: #ccc;
 }
 .light-viewer .overlay > div:last-child {
 	color: gray;
@@ -280,6 +282,7 @@
 
 .dark-viewer .overlay > div:first-child {
 	background: black;
+	color: gray;
 }
 .dark-viewer .overlay > div:last-child {
 	color: white;

magazine.css

@@ -286,7 +286,8 @@ body {
 /************************************************ utility elements ***/
 
 /* toolbars... */
-.top-toolbar, .bottom-toolbar {
+.top-toolbar,
+.bottom-toolbar {
 	display: block;
 	position: absolute;
 	text-align: center;
@@ -519,6 +520,12 @@ body {
 
 	cursor: hand;
 
+	color: silver;
+	font-size: 32px;
+	text-align: right;
+	padding-right: 15px;
+
+	box-sizing:border-box;
 }
 .overlay > div:last-child {
 	position: absolute;