From 2330bb06ececee220d854883a2870a3adf17c277 Mon Sep 17 00:00:00 2001
From: root
Date: Sun, 19 Oct 2014 03:54:53 +0200
Subject: Version 4.1. Support for photo galleries and advanced caching.

---
 static/footer.php               | 31 +++++++++++++++++++++++--------
 static/gallery.min.css          |  2 ++
 static/header.php               | 17 +++++++++++------
 static/modal-delete-gallery.php | 24 ++++++++++++++++++++++++
 static/modal-edit-gallery.php   | 40 ++++++++++++++++++++++++++++++++++++++++
 static/modal-new-gallery.html   | 40 ++++++++++++++++++++++++++++++++++++++++
 static/style.css                | 24 +++++++++++++++++++++++-
 static/style.min.css            |  2 +-
 8 files changed, 164 insertions(+), 16 deletions(-)
 create mode 100644 static/gallery.min.css
 create mode 100644 static/modal-delete-gallery.php
 create mode 100644 static/modal-edit-gallery.php
 create mode 100644 static/modal-new-gallery.html

(limited to 'static')

diff --git a/static/footer.php b/static/footer.php
index 82e3dd6..06d4295 100755
--- a/static/footer.php
+++ b/static/footer.php
@@ -1,14 +1,20 @@
 		</div>
-		<div class="footer text-right random-bg">
+		<div class="footer random-bg">
 			<div class="container">
-				<p class="effect">  Copyright 2014 <a id="copyright-text" href="//www.moehm.org/" target="_blank">Maximilian M&ouml;hring</a></p>
+				<div class="row">
+					<div class="col-md-6">
+						<p class="effect">v4.1 Built with <a href="http://getbootstrap.com" title="Twitter Bootstrap" class="footer-a">Bootstrap</a>, 
+						<a href="http://redis.io" title="Redis.io" class="footer-a">Redis</a> and <a href="http://mariadb.org" title="MariaDB.org" class="footer-a">MariaDB</a>.</p> 
+					</div>
+					<div class="col-md-6">
+						<p class="effect"><span class="pull-right"><span class="fa fa-copyright"></span> Copyright 2014 <a class="footer-a" href="//www.moehm.org/" target="_blank">Maximilian M&ouml;hring</a></span></p>
+					</div>
+				</div>
 			</div>
 		</div>
-		<script src="//code.jquery.com/jquery-1.10.1.min.js" defer></script>
-		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" defer></script>
+		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 		<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js" defer></script>
-		<!--script src="/static/eyecancer.js" defer></script-->
-		<?php //<script src='/boring.js' defer></script> ?>
+		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" defer></script>
 		<?php include("static/piwik.html"); ?>
 		<script>function loadFancy(){
 			document.getElementById("loader").style.visibility="visible";
@@ -21,6 +27,15 @@
 
 			return false;
 		}</script>
-	</body>
-</html>
+<script>
+  $('#btn-send').click(function () {
+    var btn = $(this)
+    btn.button('loading')
+    $.ajax().always(function () {
+    });
+  });
+  $('.close').click(function () {
+  	$('#btn-send').button('reset');
+  });
+</script>
 
diff --git a/static/gallery.min.css b/static/gallery.min.css
new file mode 100644
index 0000000..fac687d
--- /dev/null
+++ b/static/gallery.min.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";.fileinput-button{position:relative;overflow:hidden}.fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:200px;direction:ltr;cursor:pointer}@media screen\9{.fileinput-button input{filter:alpha(opacity=0);font-size:100%;height:100%}}.fileupload-buttonbar .btn,.fileupload-buttonbar .toggle{margin-bottom:5px}.progress-animated .bar,.progress-animated .progress-bar{background:url(../img/progressbar.gif)!important;filter:none}.fileupload-process{float:right;display:none}.files .processing .preview,.fileupload-processing .fileupload-process{display:block;width:32px;height:32px;background:url(../img/loading.gif) center no-repeat;background-size:contain}.files audio,.files video{max-width:300px}@media (max-width:767px){.files .btn span,.files .toggle,.fileupload-buttonbar .toggle{display:none}.files .name{width:80px;word-wrap:break-word}.files audio,.files video{max-width:80px}.files canvas,.files img{max-width:100%}}
+@charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:relative;float:left;height:100%;text-align:center;-webkit-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-moz-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-ms-transition-timing-function:cubic-bezier(0.645,.045,.355,1);-o-transition-timing-function:cubic-bezier(0.645,.045,.355,1);transition-timing-function:cubic-bezier(0.645,.045,.355,1)}.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{-webkit-transition:opacity .5s linear;-moz-transition:opacity .5s linear;-ms-transition:opacity .5s linear;-o-transition:opacity .5s linear;transition:opacity .5s linear}.blueimp-gallery>.slides>.slide-loading{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery>.slides>.slide-loading>.slide-content{opacity:0}.blueimp-gallery>.slides>.slide-error{background:url(../img/error.png) center no-repeat}.blueimp-gallery>.slides>.slide-error>.slide-content{display:none}.blueimp-gallery>.prev,.blueimp-gallery>.next{position:absolute;top:50%;left:15px;width:40px;height:40px;margin-top:-23px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-decoration:none;text-shadow:0 0 2px #000;text-align:center;background:#222;background:rgba(0,0,0,.5);-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5;cursor:pointer;display:none}.blueimp-gallery>.next{left:auto;right:15px}.blueimp-gallery>.close,.blueimp-gallery>.title{position:absolute;top:15px;left:15px;margin:0 40px 0 0;font-size:20px;line-height:30px;color:#fff;text-shadow:0 0 2px #000;opacity:.8;display:none}.blueimp-gallery>.close{padding:15px;right:15px;left:auto;margin:-15px;font-size:30px;text-decoration:none;cursor:pointer}.blueimp-gallery>.play-pause{position:absolute;right:15px;bottom:15px;width:15px;height:15px;background:url(../img/play-pause.png) 0 0 no-repeat;cursor:pointer;opacity:.5;display:none}.blueimp-gallery-playing>.play-pause{background-position:-15px 0}.blueimp-gallery>.prev:hover,.blueimp-gallery>.next:hover,.blueimp-gallery>.close:hover,.blueimp-gallery>.title:hover,.blueimp-gallery>.play-pause:hover{color:#fff;opacity:1}.blueimp-gallery-controls>.prev,.blueimp-gallery-controls>.next,.blueimp-gallery-controls>.close,.blueimp-gallery-controls>.title,.blueimp-gallery-controls>.play-pause{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.prev,.blueimp-gallery-left>.prev,.blueimp-gallery-single>.next,.blueimp-gallery-right>.next,.blueimp-gallery-single>.play-pause{display:none}.blueimp-gallery>.slides>.slide>.slide-content,.blueimp-gallery>.prev,.blueimp-gallery>.next,.blueimp-gallery>.close,.blueimp-gallery>.play-pause{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:last-child .blueimp-gallery>.slides>.slide-error{background-image:url(../img/error.svg)}body:last-child .blueimp-gallery>.play-pause{width:20px;height:20px;background-size:40px 20px;background-image:url(../img/play-pause.svg)}body:last-child .blueimp-gallery-playing>.play-pause{background-position:-20px 0}*+html .blueimp-gallery>.slides>.slide{min-height:300px}*+html .blueimp-gallery>.slides>.slide>.slide-content{position:relative}@charset "UTF-8";.blueimp-gallery>.indicator{position:absolute;top:auto;right:15px;bottom:15px;left:15px;margin:0 40px;padding:0;list-style:none;text-align:center;line-height:10px;display:none}.blueimp-gallery>.indicator>li{display:inline-block;width:9px;height:9px;margin:6px 3px 0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border:1px solid transparent;background:#ccc;background:rgba(255,255,255,.25)center no-repeat;border-radius:5px;box-shadow:0 0 2px #000;opacity:.5;cursor:pointer}.blueimp-gallery>.indicator>li:hover,.blueimp-gallery>.indicator>.active{background-color:#fff;border-color:#fff;opacity:1}.blueimp-gallery-controls>.indicator{display:block;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.blueimp-gallery-single>.indicator{display:none}.blueimp-gallery>.indicator{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*+html .blueimp-gallery>.indicator>li{display:inline}@charset "UTF-8";.blueimp-gallery>.slides>.slide>.video-content>img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.video-content>video{position:absolute;top:0;left:0;width:100%;height:100%}.blueimp-gallery>.slides>.slide>.video-content>iframe{position:absolute;top:100%;left:0;width:100%;height:100%;border:none}.blueimp-gallery>.slides>.slide>.video-playing>iframe{top:0}.blueimp-gallery>.slides>.slide>.video-content>a{position:absolute;top:50%;right:0;left:0;margin:-64px auto 0;width:128px;height:128px;background:url(../img/video-play.png) center no-repeat;opacity:.8;cursor:pointer}.blueimp-gallery>.slides>.slide>.video-content>a:hover{opacity:1}.blueimp-gallery>.slides>.slide>.video-playing>a,.blueimp-gallery>.slides>.slide>.video-playing>img{display:none}.blueimp-gallery>.slides>.slide>.video-content>video{display:none}.blueimp-gallery>.slides>.slide>.video-playing>video{display:block}.blueimp-gallery>.slides>.slide>.video-loading>a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}body:last-child .blueimp-gallery>.slides>.slide>.video-content:not(.video-loading)>a{background-image:url(../img/video-play.svg)}*+html .blueimp-gallery>.slides>.slide>.video-content{height:100%}*+html .blueimp-gallery>.slides>.slide>.video-content>a{left:50%;margin-left:-64px}
\ No newline at end of file
diff --git a/static/header.php b/static/header.php
index f6ecfd9..1fabb3f 100644
--- a/static/header.php
+++ b/static/header.php
@@ -8,20 +8,23 @@
                                         <span class="icon-bar"></span>
                                 </button>
                                 <a class="navbar-brand effect" href="/?page=index" title="Startseite"><span class="glyphicon glyphicon-home"></span> Home</a>
-                                <!--a class="navbar-brand" href="/?page=index" title="Startseite">Home</a-->
                         </div>
 <div class="collapse navbar-collapse" id="navbarCollapse">
                                 <ul class="nav navbar-nav navbar-left effect">
+					<li>
+						<!--a href="/?page=foto" title="Übersicht über alle Fotogalerien"><span class="fa fa-camera"></span> Bilder</a-->
+						<a href="/?page=foto" title="Übersicht über alle Fotogalerien"><span class="glyphicon glyphicon-picture"></span> Bilder</a>
+					</li>
                                         <li class="dropdown">
-                                                <a href="/?page=liste" title="Liste aller JG-Mitglieder"><span class="glyphicon glyphicon-th-list"></span> Adressliste <span class="caret"></span></a>
+                                                <a href="/?page=liste" title="Liste aller JG-Mitglieder"><span class="glyphicon glyphicon-th-list"></span> Adressen <span class="caret"></span></a>
 						<ul class="dropdown-menu" role="menu">
 							<li><a href="/?page=download&task=download&type=plain" title="Download: text/plain"><span class="glyphicon glyphicon-download"></span> Download als Text</a></li>
 							<li><a href="/?page=download&task=download&type=csv" title="Download: text/csv"><span class="glyphicon glyphicon-arrow-down"></span> Download als CSV</a></li>
 						</ul>
                                         </li>
-						<li>
-                                                	<a href="https://lists.iamfabulous.de/mailman/listinfo/jungegemeinde" target="_blank" title="JG E-Mail Verteiler"><span class="glyphicon glyphicon-envelope"></span> E-Mail Verteiler</a>
-						</li>
+					<li>
+                                               	<a href="https://lists.iamfabulous.de/mailman/listinfo/jungegemeinde" target="_blank" title="JG E-Mail Verteiler"><span class="glyphicon glyphicon-envelope"></span> E-Mail Verteiler</a>
+					</li>
                                         <li>
                                                 <a href="https://lists.iamfabulous.de/mailman/private/jungegemeinde/" target="_blank" title="Archiv der Mailing Liste "><span class="glyphicon glyphicon-send"></span> Mail Archiv</a>
                                         </li>
@@ -48,6 +51,7 @@
 						?>
                                                 	<a href="/?page=account" title="Ändere dein Passwort"><span class="glyphicon glyphicon-user"></span> Profil</a>
 							</li>
+							<li class="divider"></li>
 							<li>
 							<a href="/?page=logout" title="Beende die Session"><span class="glyphicon glyphicon-off"></span> Logout</a>
 						<?php
@@ -55,8 +59,9 @@
 						?>
                                                		<a href="/?page=register&goto=index" title="Registriere dich für unbeschränkten Zugang"><span class="glyphicon glyphicon-share-alt"></span> Register</a>
 							</li>
+							<li class="divider"></li>
 							<li>
-							<a href="/?page=login&goto=index" title="Login"><span class="glyphicon glyphicon-off"></span> Login</a>
+							<a href="/?page=login&goto=index" title="Login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
 						<?php
 						}
 						?>
diff --git a/static/modal-delete-gallery.php b/static/modal-delete-gallery.php
new file mode 100644
index 0000000..74471ac
--- /dev/null
+++ b/static/modal-delete-gallery.php
@@ -0,0 +1,24 @@
+<!-- Modal -->
+<form class="form-horizontal" method="POST" action="/?page=action&task=deleteGallery&gallery=<?php echo htmlentities($_SESSION['gallery']); ?>">
+<div class="modal fade" id="modal-delete-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="myModalLabel">Löschen</h4>
+      </div>
+      <div class="modal-body">
+<fieldset>
+	<h4>Bist du dir ganz sicher '<?php echo htmlentities($row["name"]); ?>' komplett zu löschen?</h4>
+	<p>Nachdem die Bilder gelöscht sind können sie nicht wieder hergestellt werden!</p>
+
+</fieldset>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Nee, dann doch nicht...</button>
+        <button id="btn-send" type="submit" class="btn btn-danger" data-loading-text="Lade..."><span class="glyphicon glyphicon-trash"></span> Ja, ganz sicher!</button>
+      </div>
+    </div>
+  </div>
+</div>
+</form>
diff --git a/static/modal-edit-gallery.php b/static/modal-edit-gallery.php
new file mode 100644
index 0000000..e5a2c48
--- /dev/null
+++ b/static/modal-edit-gallery.php
@@ -0,0 +1,40 @@
+<!-- Modal -->
+<form class="form-horizontal" method="POST" action="/?page=action&amp;task=editGallery&amp;gallery=<?php echo htmlentities($_SESSION['gallery']); ?>">
+<div class="modal fade" id="modal-edit-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="myModalLabel">Ändern</h4>
+      </div>
+      <div class="modal-body">
+<fieldset>
+
+<!-- Text input-->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="name">Galerie Name</label>  
+  <div class="col-md-6">
+  <input id="name" name="name" value="<?php echo htmlentities($row["name"]); ?>" placeholder="Wie heißt die neue Foto Galerie? (Pflicht)" class="form-control input-md" required="" type="text">
+    
+  </div>
+</div>
+
+<!-- Text input-->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="desc">Beschreibung</label>  
+  <div class="col-md-6">
+  <input id="desc" name="desc" value="<?php echo htmlentities($row["description"]); ?>" placeholder="Kurze Zusammenfassung. (Pflicht)" class="form-control input-md" required="" type="text">
+    
+  </div>
+</div>
+
+</fieldset>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+        <button id="btn-send" type="submit" class="btn btn-primary" data-loading-text="Lade...">Änderung speichern</button>
+      </div>
+    </div>
+  </div>
+</div>
+</form>
diff --git a/static/modal-new-gallery.html b/static/modal-new-gallery.html
new file mode 100644
index 0000000..88e0f18
--- /dev/null
+++ b/static/modal-new-gallery.html
@@ -0,0 +1,40 @@
+<!-- Modal -->
+<form class="form-horizontal" method="POST" action="/?page=action&task=gallery">
+<div class="modal fade" id="modal-new-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="myModalLabel">Erstelle eine neue Galerie</h4>
+      </div>
+      <div class="modal-body">
+<fieldset>
+
+<!-- Text input-->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="name">Galerie Name</label>  
+  <div class="col-md-6">
+  <input id="name" name="name" placeholder="Wie heißt die neue Foto Galerie? (Pflicht)" class="form-control input-md" required="" type="text">
+    
+  </div>
+</div>
+
+<!-- Text input-->
+<div class="form-group">
+  <label class="col-md-4 control-label" for="desc">Beschreibung</label>  
+  <div class="col-md-6">
+  <input id="desc" name="desc" placeholder="Kurze Zusammenfassung. (Pflicht)" class="form-control input-md" required="" type="text">
+    
+  </div>
+</div>
+
+</fieldset>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+        <button id="btn-send" type="submit" class="btn btn-primary" data-loading-text="Lade...">Erstellen</button>
+      </div>
+    </div>
+  </div>
+</div>
+</form>
diff --git a/static/style.css b/static/style.css
index 8d19477..62f0c50 100644
--- a/static/style.css
+++ b/static/style.css
@@ -44,9 +44,13 @@ a {
     width: 100%;
 }
 
-#copyright-text {
+.footer-a {
     color: white;
 }
+.footer-a:hover {
+    color: white;
+    text-decoration: underline;
+}
 
 /* noscript */
 
@@ -103,3 +107,21 @@ a {
 	margin: -20px 0 0 -20px;
 	visibility: hidden;
 }
+.fa-external-link {
+	font-size: .5em;
+}
+.a-black{
+	color: black;
+}
+.a-restore:hover{
+	text-decoration: none;
+}
+.desc{
+	color: #666666;
+}
+.font-small{
+	font-size: .8em;
+}
+.nav-tabs{
+	margin: 20px;
+}
diff --git a/static/style.min.css b/static/style.min.css
index f593c04..9fca366 100644
--- a/static/style.min.css
+++ b/static/style.min.css
@@ -1 +1 @@
-html{position:relative;min-height:100%}body{margin-bottom:60px}a{color:#3083D6}.navbar-default{border-color:#3083D6;background:#3083D6}.navbar-default .navbar-brand{color:#fff}.navbar-default .navbar-nav>li>a{color:#fff}.footer{border-color:#3083D6;background:#3083D6;color:#fff;position:absolute;bottom:0;width:100%}#copyright-text{color:#fff}.noscript{background-color:#dd5148;color:#fff}.table-center{margin:0 auto!important;float:none!important}.disabled{color:#5E5E5E;text-decoration:line-through}.random-bg,.random-font{transition:all 1500ms}.wrapper{overflow:hidden}#loader-bg{position:fixed;background-color:#fefefe;z-index:99999;height:100%;width:100%;overflow:hidden!important;visibility:hidden}#loader{width:40px;height:40px;position:absolute;left:50%;top:50%;background-image:url(/static/img/loading.gif);background-repeat:no-repeat;background-position:center;-webkit-background-size:cover;background-size:cover;margin:-20px 0 0 -20px;visibility:hidden}
+html{position:relative;min-height:100%}body{margin-bottom:60px}a{color:#3083D6}.navbar-default{border-color:#3083D6;background:#3083D6}.navbar-default .navbar-brand{color:#fff}.navbar-default .navbar-nav>li>a{color:#fff}.footer{border-color:#3083D6;background:#3083D6;color:#fff;position:absolute;bottom:0;width:100%}.footer-a{color:#fff}.footer-a:hover{color:#fff;text-decoration:underline}.noscript{background-color:#dd5148;color:#fff}.table-center{margin:0 auto!important;float:none!important}.disabled{color:#5E5E5E;text-decoration:line-through}.random-bg,.random-font{transition:all 1500ms}.wrapper{overflow:hidden}#loader-bg{position:fixed;background-color:#fefefe;z-index:99999;height:100%;width:100%;overflow:hidden!important;visibility:hidden}#loader{width:40px;height:40px;position:absolute;left:50%;top:50%;background-image:url(/static/img/loading.gif);background-repeat:no-repeat;background-position:center;-webkit-background-size:cover;background-size:cover;margin:-20px 0 0 -20px;visibility:hidden}.fa-external-link{font-size:.5em}.a-black{color:#000}.a-restore:hover{text-decoration:none}.desc{color:#666}.font-small{font-size:.8em}.nav-tabs{margin:20px}
-- 
cgit v1.2.3