Bien meilleure gestion des formulaires

app/views/configure/categorize.phtml

@@ -1,18 +1,31 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div class="table">
-	<form method="post" action="">
-		<h1>Gérer les catégories</h1>
-	
+<div class="post">
+	<form method="post" action="<?php echo _url ('configure', 'categorize'); ?>">
+		<legend>Gestion des catégories</legend>
+
 		<?php $i = 0; foreach ($this->categories as $cat) { $i++; ?>
-		<label for="cat_<?php echo $cat->id (); ?>">Catégorie n°<?php echo $i; ?></label>
-		<input type="text" id="cat_<?php echo $cat->id (); ?>" name="categories[]" value="<?php echo $cat->name (); ?>" />
-		<input type="hidden" name="ids[]" value="<?php echo $cat->id (); ?>" />
+		<div class="form-group">
+			<label class="group-name" for="cat_<?php echo $cat->id (); ?>">Catégorie n°<?php echo $i; ?></label>
+			<div class="group-controls">
+				<input type="text" id="cat_<?php echo $cat->id (); ?>" name="categories[]" value="<?php echo $cat->name (); ?>" />
+				<input type="hidden" name="ids[]" value="<?php echo $cat->id (); ?>" />
+			</div>
+		</div>
 		<?php } ?>
-	
-		<label for="new_category">Ajouter une catégorie</label>
-		<input type="text" id="new_category" name="new_category" placeholder="Nouvelle catégorie" />
-	
-		<button class="btn btn-important">Sauvegarder</button>
+
+		<div class="form-group">
+			<label class="group-name" for="new_category">Ajouter une catégorie</label>
+			<div class="group-controls">
+				<input type="text" id="new_category" name="new_category" placeholder="Nouvelle catégorie" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Sauvegarder</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
+		</div>
 	</form>
 </div>

app/views/configure/display.phtml

@@ -1,53 +1,77 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div class="table">
-	<form method="post" action="">
-		<h1>Configuration générale</h1>
-	
-		<label for="old_entries">Supprimer les articles au bout de (mois)</label>
-		<input type="number" id="old_entries" name="old_entries" value="<?php echo $this->conf->oldEntries (); ?>" />
-	
-		<label for="mail_login">Adresse mail de connexion (utilise <a href="https://persona.org/">Persona</a>)</label>
-		<p><noscript>nécessite que javascript soit activé</noscript></p>
+<div class="post">
+	<form method="post" action="<?php echo _url ('configure', 'display'); ?>">
+		<legend>Configuration générale</legend>
+
+		<div class="form-group">
+			<label class="group-name" for="old_entries">Supprimer les articles tous les</label>
+			<div class="group-controls">
+				<input type="number" id="old_entries" name="old_entries" value="<?php echo $this->conf->oldEntries (); ?>" /> mois
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="mail_login">Adresse mail de connexion (utilise <a href="https://persona.org/">Persona</a>)</label>
 		<?php $mail = $this->conf->mailLogin (); ?>
-		<input type="email" id="mail_login" name="mail_login" value="<?php echo $mail ? $mail : ''; ?>" placeholder="Laissez vide pour désactiver" />
-		<br />
-	
-		<h1>Configuration de l'affichage</h1>
-	
-		<label for="posts_per_page">Nombre d'articles par page</label>
-		<input type="number" id="posts_per_page" name="posts_per_page" value="<?php echo $this->conf->postsPerPage (); ?>" />
-	
-		<label>Vue par défaut</label>
-		<div class="radio_group">
-			<label for="radio_all">
-				<input type="radio" name="default_view" id="radio_all" value="all"<?php echo $this->conf->defaultView () == 'all' ? ' checked="checked"' : ''; ?> />
-				Tout afficher
-			</label>
-			<label for="radio_not_read">
-				<input type="radio" name="default_view" id="radio_not_read" value="not_read"<?php echo $this->conf->defaultView () == 'not_read' ? ' checked="checked"' : ''; ?> />
-				Afficher les non lus
-			</label>
+			<div class="group-controls">
+				<input type="email" id="mail_login" name="mail_login" value="<?php echo $mail ? $mail : ''; ?>" placeholder="Laissez vide pour désactiver" />
+				<noscript><b>nécessite que javascript soit activé</b></noscript>
+			</div>
 		</div>
 	
-		<label for="sort_order">Ordre de tri</label>
-		<select name="sort_order" id="sort_order">
-			<option value="low_to_high"<?php echo $this->conf->sortOrder () == 'low_to_high' ? ' selected="selected"' : ''; ?>>Du plus récent au plus ancien</option>
-			<option value="high_to_low"<?php echo $this->conf->sortOrder () == 'high_to_low' ? ' selected="selected"' : ''; ?>>Du plus ancien au plus récent</option>
-		</select>
-	
-		<label>Afficher les articles dépliés par défaut</label>
-		<div class="radio_group">
-			<label for="radio_yes">
-				<input type="radio" name="display_posts" id="radio_yes" value="yes"<?php echo $this->conf->displayPosts () == 'yes' ? ' checked="checked"' : ''; ?> />
-				Oui
-			</label>
-			<label for="radio_no">
-				<input type="radio" name="display_posts" id="radio_no" value="no"<?php echo $this->conf->displayPosts () == 'no' ? ' checked="checked"' : ''; ?> />
-				Non<noscript> - <strong>nécessite que javascript soit activé</strong></noscript>
-			</label>
+		<legend>Configuration de l'affichage</legend>
+
+		<div class="form-group">
+			<label class="group-name" for="posts_per_page">Nombre d'articles par page</label>
+			<div class="group-controls">
+				<input type="number" id="posts_per_page" name="posts_per_page" value="<?php echo $this->conf->postsPerPage (); ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name">Vue par défaut</label>
+			<div class="group-controls">
+				<label class="radio" for="radio_all">
+					<input type="radio" name="default_view" id="radio_all" value="all"<?php echo $this->conf->defaultView () == 'all' ? ' checked="checked"' : ''; ?> />
+					Tout afficher
+				</label>
+				<label class="radio" for="radio_not_read">
+					<input type="radio" name="default_view" id="radio_not_read" value="not_read"<?php echo $this->conf->defaultView () == 'not_read' ? ' checked="checked"' : ''; ?> />
+					Afficher les non lus
+				</label>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="sort_order">Ordre de tri</label>
+			<div class="group-controls">
+				<select name="sort_order" id="sort_order">
+					<option value="low_to_high"<?php echo $this->conf->sortOrder () == 'low_to_high' ? ' selected="selected"' : ''; ?>>Du plus récent au plus ancien</option>
+					<option value="high_to_low"<?php echo $this->conf->sortOrder () == 'high_to_low' ? ' selected="selected"' : ''; ?>>Du plus ancien au plus récent</option>
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name">Afficher les articles dépliés par défaut</label>
+			<div class="group-controls">
+				<label class="radio" for="radio_yes">
+					<input type="radio" name="display_posts" id="radio_yes" value="yes"<?php echo $this->conf->displayPosts () == 'yes' ? ' checked="checked"' : ''; ?> />
+					Oui
+				</label>
+				<label class="radio" for="radio_no">
+					<input type="radio" name="display_posts" id="radio_no" value="no"<?php echo $this->conf->displayPosts () == 'no' ? ' checked="checked"' : ''; ?> />
+					Non<noscript> - <b>nécessite que javascript soit activé</b></noscript>
+				</label>
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Valider</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
 		</div>
-	
-		<button class="btn btn-important">Valider</button>
 	</form>
 </div>

app/views/configure/feed.phtml

@@ -1,32 +1,52 @@
 <?php $this->partial ('aside_feed'); ?>
 
 <?php if ($this->flux) { ?>
-<form method="post" action="<?php echo _url ('configure', 'feed', 'id', $this->flux->id ()); ?>">
+<div class="post">
 	<h1><?php echo $this->flux->name (); ?></h1>
 	<?php echo $this->flux->description (); ?>
+
+	<form method="post" action="<?php echo _url ('configure', 'feed', 'id', $this->flux->id ()); ?>">
+		<legend>Informations</legend>
+
+		<div class="form-group">
+			<label class="group-name">URL du site</label>
+			<div class="group-controls">
+				<span class="control"><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
+			</div>
+		</div>
 	
-	<label>URL du site</label>
-	<span><a target="_blank" href="<?php echo $this->flux->website (); ?>"><?php echo $this->flux->website (); ?></a></span>
+		<div class="form-group">
+			<label class="group-name">Nombre d'articles</label>
+			<div class="group-controls">
+				<span class="control"><?php echo $this->flux->nbEntries (); ?></span>
+			</div>
+		</div>
 	
-	<label>Nombre d'articles</label>
-	<span><?php echo $this->flux->nbEntries (); ?></span>
+		<?php if (!empty ($this->categories)) { ?>
+		<div class="form-group">
+			<label class="group-name">Ranger dans une catégorie</label>
+			<div class="group-controls">
+				<?php foreach ($this->categories as $cat) { ?>
+				<label class="radio" for="cat_<?php echo $cat->id (); ?>">
+					<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
+					<?php echo $cat->name (); ?>
+				</label>
+				<?php } ?>
+			</div>
+		</div>
 	
-	<?php if (!empty ($this->categories)) { ?>
-	<label>Ranger dans une catégorie</label>
-	<div class="radio_group">
-		<?php foreach ($this->categories as $cat) { ?>
-		<label for="cat_<?php echo $cat->id (); ?>">
-			<input type="radio" name="category" id="cat_<?php echo $cat->id (); ?>" value="<?php echo $cat->id (); ?>"<?php echo $cat->id () == $this->flux->category () ? ' checked="checked"' : ''; ?> />
-			<?php echo $cat->name (); ?>
-		</label>
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button class="btn btn-important">Valider</button>
+		<?php } else { ?>
+		<div class="form-group">
+			<div class="group-controls">
 		<?php } ?>
-	</div>
-	
-	<button class="btn btn-important">Valider</button>
-	<?php } ?>
-	
-	<button class="btn" formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
-</form>
+				<button class="btn btn-attention" formaction="<?php echo Url::display (array ('c' => 'feed', 'a' => 'delete', 'params' => array ('id' => $this->flux->id ()))); ?>">Supprimer</button>
+			</div>
+		</div>
+	</form>
+</div>
 <?php } else { ?>
 <div class="alert"><span class="alert-head">Aucun flux sélectionné.</span> Pensez à en ajouter !</div>
 <?php } ?>

app/views/configure/importExport.phtml

@@ -13,15 +13,23 @@
 <?php } else { ?>
 <?php $this->partial ('aside_configure'); ?>
 
-<div>
+<div class="post">
 	<form method="post" action="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'import'))); ?>" enctype="multipart/form-data">
-		<h1>Exporter au format OPML</h1>
-		<button class="btn btn-important" formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
-	
-		<h1>Importer au format OPML</h1>
-		<label for="file">Fichier</label>
-		<input type="file" name="file" id="file" />
-		<button class="btn btn-important">Importer</button>
+		<legend>Import / export au format OPML</legend>
+		<div class="form-group">
+			<label class="group-name" for="file">Fichier à importer</label>
+			<div class="group-controls">
+				<input type="file" name="file" id="file" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Importer</button>
+				ou
+				<button type="submit" class="btn btn-important" formaction="<?php echo Url::display (array ('c' => 'configure', 'a' => 'importExport', 'params' => array ('q' => 'export'))); ?>">Exporter</button>
+			</div>
+		</div>
 	</form>
 </div>
 <?php } ?>

app/views/configure/shortcut.phtml

@@ -1,6 +1,6 @@
 <?php $this->partial ('aside_configure'); ?>
 
-<div>
+<div class="post">
 	<datalist id="keys">
 		<?php foreach ($this->list_keys as $key) { ?>
 		<option value="<?php echo $key; ?>">
@@ -9,37 +9,68 @@
 
 	<?php $s = $this->conf->shortcuts (); ?>
 
-	<form method="post" action="">
-		<h1>Gérer les raccourcis</h1>
-	
-		<noscript>Le javascript doit être activé pour pouvoir utiliser les raccourcis</noscript>
-	
-		<label for="mark_read">Marquer l'article comme lu / non lu</label>
-		<input type="text" id="mark_read" name="shortcuts[mark_read]" list="keys" value="<?php echo $s['mark_read']; ?>" />
-		<p>+ <code>shift</code> pour marquer tous les articles comme non lus</p>
-	
-		<label for="mark_favorite">Mettre l'article  en favori</label>
-		<input type="text" id="mark_favorite" name="shortcuts[mark_favorite]" list="keys" value="<?php echo $s['mark_favorite']; ?>" />
-	
-		<label for="go_website">Afficher l'article sur le site d'origine</label>
-		<input type="text" id="go_website" name="shortcuts[go_website]" list="keys" value="<?php echo $s['go_website']; ?>" />
-	
-		<label for="next_entry">Passer à l'article suivant</label>
-		<input type="text" id="next_entry" name="shortcuts[next_entry]" list="keys" value="<?php echo $s['next_entry']; ?>" />
-		<p>+ <code>shift</code> pour passer au dernier article de la page</p>
-	
-		<label for="prev_entry">Passer à l'article précédent</label>
-		<input type="text" id="prev_entry" name="shortcuts[prev_entry]" list="keys" value="<?php echo $s['prev_entry']; ?>" />
-		<p>+ <code>shift</code> pour passer au premier article de la page</p>
-	
-		<label for="next_page">Passer à la page suivant</label>
-		<input type="text" id="next_page" name="shortcuts[next_page]" list="keys" value="<?php echo $s['next_page']; ?>" />
-		<p>+ <code>shift</code> pour passer à la dernière page</p>
-	
-		<label for="prev_page">Passer à la page précédente</label>
-		<input type="text" id="prev_page" name="shortcuts[prev_page]" list="keys" value="<?php echo $s['prev_page']; ?>" />
-		<p>+ <code>shift</code> pour passer à la première page</p>
-	
-		<button class="btn btn-important">Sauvegarder</button>
+	<form method="post" action="<?php echo _url ('configure', 'shortcut'); ?>">
+		<legend>Gestion des raccourcis</legend>
+
+		<noscript><b>Le javascript doit être activé pour pouvoir profiter des raccourcis</b></noscript>
+
+		<div class="form-group">
+			<label class="group-name" for="mark_read">Marquer l'article comme lu</label>
+			<div class="group-controls">
+				<input type="text" id="mark_read" name="shortcuts[mark_read]" list="keys" value="<?php echo $s['mark_read']; ?>" />
+				+ <code>shift</code> pour marquer tous les articles comme non lus
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="mark_favorite">Mettre l'article  en favori</label>
+			<div class="group-controls">
+				<input type="text" id="mark_favorite" name="shortcuts[mark_favorite]" list="keys" value="<?php echo $s['mark_favorite']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="go_website">Voir l'article sur le site d'origine</label>
+			<div class="group-controls">
+				<input type="text" id="go_website" name="shortcuts[go_website]" list="keys" value="<?php echo $s['go_website']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="next_entry">Passer à l'article suivant</label>
+			<div class="group-controls">
+				<input type="text" id="next_entry" name="shortcuts[next_entry]" list="keys" value="<?php echo $s['next_entry']; ?>" />
+				+ <code>shift</code> pour passer au dernier article de la page
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="prev_entry">Passer à l'article précédent</label>
+			<div class="group-controls">
+				<input type="text" id="prev_entry" name="shortcuts[prev_entry]" list="keys" value="<?php echo $s['prev_entry']; ?>" />
+				+ <code>shift</code> pour passer au premier article de la page
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="next_page">Passer à la page suivante</label>
+			<div class="group-controls">
+				<input type="text" id="next_page" name="shortcuts[next_page]" list="keys" value="<?php echo $s['next_page']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label class="group-name" for="prev_page">Passer à la page précédente</label>
+			<div class="group-controls">
+				<input type="text" id="prev_page" name="shortcuts[prev_page]" list="keys" value="<?php echo $s['prev_page']; ?>" />
+			</div>
+		</div>
+
+		<div class="form-group form-actions">
+			<div class="group-controls">
+				<button type="submit" class="btn btn-important">Sauvegarder</button>
+				<button type="reset" class="btn">Annuler</button>
+			</div>
+		</div>
 	</form>
 </div>

app/views/index/index.phtml

@@ -17,7 +17,7 @@
 
 <div id="stream">
 	<?php foreach ($items as $item) { ?>
-	<div class="post flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
+	<div class="flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
 		<ul class="flux_header">
 			<li class="item manage">
 				<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>

app/views/javascript/main.phtml

@@ -104,7 +104,7 @@ function mark_favorite (active) {
 }
 
 function init_img () {
-	$(".post.flux .content img").each (function () {
+	$(".flux .content img").each (function () {
 		if ($(this).width () > ($("#stream").width()) / 2) {
 			$(this).addClass("big");
 		}
@@ -115,11 +115,11 @@ function init_posts () {
 	init_img ();
 
 	if (hide_posts) {
-		$(".post.flux:not(.active) .content").slideUp ();
+		$(".flux:not(.active) .content").slideUp ();
 	}
 
-	$(".post.flux").click (function () {
-		old_active = $(".post.flux.active");
+	$(".flux").click (function () {
+		old_active = $(".flux.active");
 		new_active = $(this);
 		
 		if (old_active[0] != new_active[0]) {
@@ -127,21 +127,21 @@ function init_posts () {
 		}
 	});
 
-	$(".post.flux a.read").click (function () {
-		active = $(this).parents (".post.flux");
+	$(".flux a.read").click (function () {
+		active = $(this).parents (".flux");
 		mark_read (active);
 	
 		return false;
 	});
 
-	$(".post.flux a.bookmark").click (function () {
-		active = $(this).parents (".post.flux");
+	$(".flux a.bookmark").click (function () {
+		active = $(this).parents (".flux");
 		mark_favorite (active);
 	
 		return false;
 	});
 
-	$(".post.flux .content a").click (function () {
+	$(".flux .content a").click (function () {
 		$(this).attr ('target', '_blank');
 	});
 }
@@ -152,7 +152,7 @@ $(document).ready (function () {
 	// Touches de manipulation
 	shortcut.add("<?php echo $s['mark_read']; ?>", function () {
 		// on marque comme lu ou non lu
-		active = $(".post.flux.active");
+		active = $(".flux.active");
 		mark_read (active);
 	});
 	shortcut.add("shift+<?php echo $s['mark_read']; ?>", function () {
@@ -162,14 +162,14 @@ $(document).ready (function () {
 	});
 	shortcut.add("<?php echo $s['mark_favorite']; ?>", function () {
 		// on marque comme favori ou non favori
-		active = $(".post.flux.active");
+		active = $(".flux.active");
 		mark_favorite (active);
 	});
 	
 	// Touches de navigation
 	shortcut.add("<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		last_active = $(".post.flux:last");
+		old_active = $(".flux.active");
+		last_active = $(".flux:last");
 		new_active = old_active.prev ();
 		
 		if (new_active[0] instanceof HTMLDivElement) {
@@ -179,16 +179,16 @@ $(document).ready (function () {
 		}
 	});
 	shortcut.add("shift+<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		first = $(".post.flux:first");
+		old_active = $(".flux.active");
+		first = $(".flux:first");
 		
 		if (first[0] instanceof HTMLDivElement) {
 			slide (first, old_active);
 		}
 	});
 	shortcut.add("<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		first_active = $(".post.flux:first");
+		old_active = $(".flux.active");
+		first_active = $(".flux:first");
 		new_active = old_active.next ();
 		
 		if (new_active[0] instanceof HTMLDivElement) {
@@ -198,8 +198,8 @@ $(document).ready (function () {
 		}
 	});
 	shortcut.add("shift+<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".post.flux.active");
-		last = $(".post.flux:last");
+		old_active = $(".flux.active");
+		last = $(".flux:last");
 		
 		if (last[0] instanceof HTMLDivElement) {
 			slide (last, old_active);
@@ -222,7 +222,7 @@ $(document).ready (function () {
 		redirect (url, false);
 	});
 	shortcut.add("<?php echo $s['go_website']; ?>", function () {
-		url = $(".post.flux.active .link a").attr ("href");
+		url = $(".flux.active .link a").attr ("href");
 		
 		redirect (url, true);
 	});

public/data/Configuration.array.php

@@ -6,4 +6,13 @@ return array (
 	'sort_order' => 'low_to_high',
 	'old_entries' => 3,
 	'mail_login' => '',
+	'shortcuts' => array (
+		'mark_read' => 'r',
+		'mark_favorite' => 'f',
+		'go_website' => 'space',
+		'next_entry' => 'page_down',
+		'prev_entry' => 'page_up',
+		'next_page' => 'right',
+		'prev_page' => 'left',
+	),
 );

public/theme/base.css

@@ -26,7 +26,7 @@ ul, ol {
 /* TITRES */
 h1, h2, h3 {
 	min-height: 40px;
-	padding: 10px 0 0;
+	margin: 15px 0 5px;
 	line-height: 40px;
 }
 
@@ -40,19 +40,30 @@ img {
 	}
 
 /* FORMULAIRES */
+legend {
+	display: block;
+	margin: 20px 0 5px;
+	padding: 5px 0;
+	border-bottom: 1px solid #ddd;
+	font-size: 150%;
+	clear: both;
+}
 label {
 	display: block;
-	margin: 5px 0;
+	min-height: 25px;
+	padding: 5px 0;
+	font-size: 14px;
+	line-height: 25px;
 }
 input {
 	display: inline-block;
 	min-height: 25px;
 	padding: 5px 5px;
-	background: #fff;
+	background: #fdfdfd;
 	border: 1px solid #bbb;
 	border-radius: 3px;
-	color: #aaa;
-	line-height: 25px;
+	color: #666;
+	line-height: 30px;
 	vertical-align: middle;
 	box-shadow: 0 2px 2px #eee inset;
 }
@@ -62,6 +73,41 @@ input {
 		box-shadow: 0 2px 2px #DDDDFF inset;
 	}
 
+.form-group {
+	margin: 0;
+	clear: both;
+}
+	.form-group.form-actions {
+		min-width: 250px;
+		padding: 5px 0;
+		background: #f4f4f4;
+		border-top: 1px solid #ddd;
+	}
+		.form-group.form-actions .btn {
+			margin: 0 10px;
+		}
+	.form-group .group-name {
+		display: block;
+		float: left;
+		width: 200px;
+		padding: 10px 0;
+		text-align: right;
+	}
+	.form-group .group-controls {
+		min-width: 250px;
+		min-height: 25px;
+		margin: 0 0 0 220px;
+		padding: 5px 0;
+		line-heigt: 25px;
+	}
+		.form-group .group-controls .control {
+			display: block;
+			min-height: 30px;
+			padding: 5px 0;
+			line-height: 25px;
+			font-size: 14px;
+		}
+
 .btn {
 	display: inline-block;
 	min-height: 25px;
@@ -74,14 +120,14 @@ input {
 	border-bottom: 1px solid #aaa;
 	border-right: 1px solid #aaa;
 	color: #666;
-	text-shadow: 0px 1px 1px #ddd;
+	text-shadow: 0px -1px 0 #ddd;
 	line-height: 25px;
 	vertical-align: middle;
 	cursor: pointer;
 }
 	.btn:hover {
-		background: #f4f4f4;
-		background: linear-gradient(#fafafa, #f0f0f0);
+		background: #f0f0f0;
+		background: linear-gradient(#f8f8f8, #f0f0f0);
 		text-decoration: none;
 	}
 	.btn.active,
@@ -95,7 +141,7 @@ input {
 		background: linear-gradient(#0084CC, #0045CC);
 		color: #fff;
 		border: 1px solid #0062B7;
-		text-shadow: 0px 1px 1px #aaa;
+		text-shadow: 0px -1px 0 #aaa;
 	}
 		.btn.btn-important:hover {
 			background: linear-gradient(#0066CC, #0045CC);
@@ -105,6 +151,21 @@ input {
 			box-shadow: none;
 		}
 
+	.btn.btn-attention {
+		background: #E95B57;
+		background: linear-gradient(#E95B57, #BD362F);
+		color: #fff;
+		border: 1px solid #C44742;
+		text-shadow: 0px -1px 0px #666;
+	}
+		.btn.btn-attention:hover {
+			background: linear-gradient(#D14641, #BD362F);
+		}
+		.btn.btn-attention:active {
+			background: #BD362F;
+			box-shadow: none;
+		}
+
 /* NAVIGATION */
 .nav.nav-list .nav-header,
 .nav.nav-list .item {
@@ -239,7 +300,7 @@ input {
 			width: 250px;
 		}
 			.header .item.title h1 {
-				padding: 0;
+				margin: 0;
 			}
 			.header .item.title a:hover {
 				text-decoration: none;
@@ -319,10 +380,17 @@ input {
 		border-right: 1px solid #999;
 		border-bottom: 1px solid #999;
 		border-radius: 5px;
-		box-shadow: 0 3px 3px #999 inset;
+		box-shadow: 1px 3px 3px #999 inset;
 		text-shadow: 0 0 1px #aaa;
 	}
 
+.post {
+	padding: 10px 50px;
+}
+	.post form {
+		margin: 10px 0;
+	}
+
 .flux {
 	font-family: Palatino, "Times New Roman", serif;
 	border-left: 10px solid #aaa;
@@ -436,7 +504,7 @@ input {
 			}
 				.flux_header .item.title h1 {
 					font-size: 12px;
-					padding: 0;
+					margin: 0;
 					font-weight: normal;
 				}
 					.flux.not_read .flux_header .item.title h1 {
@@ -547,7 +615,8 @@ input {
 	}
 }
 @media(max-width: 450px) {
-	.nav_menu {
-		display: none;
+	.nav_menu .btn {
+		display: block;
+		margin: 5px 0;
 	}
 }