From ca98af1611d4b5707efcbbb6c3a3b30c34bbf516 Mon Sep 17 00:00:00 2001
From: Paul Schneider <paul@pschneider.fr>
Date: Mon, 23 Nov 2015 14:06:23 +0100
Subject: [PATCH] =?UTF-8?q?Refactorisation=20des=20th=C3=A8mes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La disposition des elements de la page est maintenant commune à tous les thèmes.
On pourra la spécialiser, mais le depart se fait sur une base agréable,
en couleurs non spécifiées (les couleurs par défaut du navigateur),
sauf pour les messages d'erreur qui sont définis en rouge,
et ala responsive design.

* style.css:
* style.css: Ne contient plus que ce qui concerne les couleurs et
  images

* font-awesome.css: Il parait plus sage de spécifier des Url absolues
  vers les polices de caractère.

* style.css: Réccupère du thème sombre tout ce qui ne concerne pas la
  couleur, pour en faire profiter tous les thèmes.

* Web.csproj: Ajoute le style du thème clair au projet.

* style.tablesorter.css: ce fichier est obsolete et va disparaitre.
---
 .../blue/{style.css => style.tablesorter.css} |   0
 web/App_Themes/clear/style.css                | 309 ++----------------
 web/App_Themes/dark/style.css                 | 140 +-------
 web/App_Themes/font-awesome.css               |   4 +-
 web/App_Themes/style.css                      | 224 +++++++++++--
 web/ChangeLog                                 |  17 +
 web/Web.csproj                                |   3 +-
 7 files changed, 243 insertions(+), 454 deletions(-)
 rename web/App_Themes/blue/{style.css => style.tablesorter.css} (100%)

diff --git a/web/App_Themes/blue/style.css b/web/App_Themes/blue/style.tablesorter.css
similarity index 100%
rename from web/App_Themes/blue/style.css
rename to web/App_Themes/blue/style.tablesorter.css
diff --git a/web/App_Themes/clear/style.css b/web/App_Themes/clear/style.css
index 35a599ff..8878a367 100644
--- a/web/App_Themes/clear/style.css
+++ b/web/App_Themes/clear/style.css
@@ -2,13 +2,9 @@
 body {
 	background-color: grey;
 	color: #303030;
-	font-family: 'Arial', cursive;
-	padding: 0;
-	margin: 0;
 }
 .tagname {  color: #D0FFD0; }
-.tagname+.tagname:before { content: ', '; } 
-.tagname:hover { background-color: red; cursor:pointer; }
+.tagname:hover { background-color: red; }
 
 /* Start by setting display:none to make this hidden.
    Then we position it in relation to the viewport window
@@ -16,116 +12,46 @@ body {
    for themselves. Background we set to 80% white with
    our animation centered, and no-repeating */
 .modal {
-    display:    none;
-    position:   fixed;
-    z-index:    1000;
-    top:        0;
-    left:       0;
-    height:     100%;
-    width:      100%;
     background: rgba( 255, 255, 255, .8 ) 
                 url('/App_Themes/images/FhHRx.gif') 
                 50% 50% 
                 no-repeat;
-    overflow:   auto; 
 }
-.dispmodal {
-    position:   fixed;
-    z-index:    1000;
-    top:        0;
-    left:       0;
-    right: 0;
-    width:      100%;
-    overflow-y:   auto; 
-    overflow-x:   hidden; 
-}
-
-body.loading {
-    overflow: hidden;   
-}
-
-body.loading .modal {
-    display: block;
-}
-.iconsmall { max-height: 1.3em; max-width: 1.3em; } 
 
 input, textarea, checkbox { 
     color: #FFA0A0;
 	background-color: black;
    }
 
-.post .photo { max-width: 100%; }
-
-.blogbanner { float: left; top:0; }
-.subtitle { font-size:small; font-style: italic; }
 header {
-transition: margin 2s, padding 2s;
-	padding: 0;
-	margin: 0;
-	display: block;
 	background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 0 repeat fixed;
 	}
 
 #logo { 
-	padding: 0;
-	margin: 0;
-	min-height: 12em;
    background: url("/App_Themes/images/logo.s.png") 1em 1em no-repeat fixed;
 }
 
-
-
 h1, h2, h3 { background-color: rgba(256,256,256,.5);  }
 
 nav {
-transition: margin 2s, padding 2s;
-	margin: 2em;
-	padding: 2em;
-	display: block;
-	border-radius:1em;
 	background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 10em repeat fixed ;
-	justify-content: space-around;
 }
 nav li { display: inline-block; }
 main {
-transition: margin 2s, padding 2s;
-	margin: 2em;
-	padding: 2em;
-	display: block;
-	border-radius:1em;
 	background: url("/App_Themes/images/musician-923526_1.nbbi.jpg") 50% 20em repeat fixed ;
 	}
 
 footer {
-	transition: margin 2s, padding 2s;
 	background: url("/App_Themes/images/live-concert-388160_1280.jpg") 50% 30em repeat fixed ;
-	margin: 0;
-	margin-top: 2em;
-	padding: 2em;
-	display: block;
-	clear: both;
-	font-size: smaller;
-	justify-content: space-around;
 }
-footer {
-	border-radius:1em;
-	padding:1em;
-  }
+
 legend {
-	border-radius:5px;
-	padding:.5em;
 	background-color: rgba(240,240,240,.5);
   }
-#copyr { text-align: center; display: block; background-color: rgba(250,250,250,.8); }
-footer p { display:inline-block; } 
-
-footer img { max-height: 3em; vertical-align: middle; }
-a img, h1 img, .menuitem img  { vertical-align: middle; }
+#copyr {  background-color: rgba(250,250,250,.8); }
 
 #gspacer { 
-	background-color: rgba(209,209,209,.8); 
-	border-radius:1em;
-	margin:1em; padding:1em; display: inline-block }
+	background-color: rgba(209,209,209,.8);  }
 
 form { 
 	background-color: rgba(150,150,256,0.8);
@@ -133,128 +59,47 @@ form {
 
 fieldset {
 	background-color: rgba(216,216,256,0.8);
-	border-radius:5px; border: solid 1px #000060;
 } 
 
-.post video, .post img {
-	max-width:100%;
-	max-height:75%;
-	padding: 1em;
-	}
 
-aside { 
-	display: inline-block;
-	float: right;
-	max-width: 40em;
-}
 
 .postpreview {
-	display: inline-block;
-	padding: 1em;
 	background-color: rgba(233,233,233,0.8);
-	border-radius:1em;
-	max-width: 100%;
 }
 
-img.postpreviewphoto, .postpreview video, .postpreview img {
-	padding: 1em; 
-	width: 100%;
-	}
-
 .post { 
-	display:block;
-	padding: 1em;
 	background-color: rgba(256,256,256,0.8);
-	border-radius:1em;
 	}
 .hiddenpost { background-color: rgba(160,160,160,0.5); }
-.fullwidth { width: 100%;  }
 
-textarea.fullwidth { min-height:10em; }
 a { color: rgb(0,56,0); } 
-a:hover {
-background-color: rgba(160,160,160,.7);
-  }
+
+a:hover { background-color: rgba(160,160,160,.7);   }
 
 footer a  { 
-    transition: margin 2s, padding 2s;
-	border-radius:1em;
-	margin:1em;
-	padding:1em;
-   text-decoration: none;
-   display:inline-block;
 	color: black;
-	font-weight: bold;
-	border: solid black 1px;
    background-color: rgba(220,220,220,.8); 
-   cursor: pointer;
-   font-family: 'Arial', cursive;
 }
-.panel { max-width: 24em; display:inline-block; padding: 1em; }
 .panel,.bshpanel, aside {
 	background-color: rgba(200,200,200,.8); 
-	border-radius: 1em; 
-	padding: 1em;
-}
-.spanel {
-  max-width: 18em;
-    display: inline-block;
-  padding: .3em;
-}
-.xspanel {
-  max-width:13em;
-  display: inline-block;
-  padding:.2em;
-}
-.xxspanel {
-  max-width:7em;
-  display: inline-block;
-  padding:.1em;
 }
-.hint {
-	display: inline;
-	font-style: italic;
-	font-size: smaller;
-}
-.hint::before { 
-content: "(";
-}
-.hint::after { 
-content: ")";
-}
-
 
 .usertitleref {
-	border-radius: 1em;
    background-color:rgba(256,256,212,0.6);
-   font-family: 'Arial', cursive;
-	padding: 1em;
-}
-label {
-	font-size: medium;
 }
 .editable {
-	margin: .5em; 
-	min-height:1em; 
-	border-radius: 1em; 
 	border: dashed rgb(200,200,256) 2px; 
 }
 
 .notification {
-	font-size: large;
 	background-color: rgba(264,264,128,0.5);
 	border: solid green 1px;
-	padding: 1em;
-	border-radius:1em;
-	margin:1em;
-	padding:1em;
 	}
 .dirty { 
 	background-color: rgba(256,228,128,0.5);
 }
 .error, #error {
 	color: #f88;
-	font-size: large;
 	background-color: rgba(256,.5);
 }
 .validation-summary-errors{
@@ -262,12 +107,6 @@ label {
 	background-color: rgba(256,256,139,0.5);
 }
 
-.hidden { display:none; }
-
-ul.preview li:nth-child(-n+10) {
-   display:inline;
-	font-size:xx-small;
-}
 
 ul.preview li:nth-child(n) {
 	display:none;
@@ -278,37 +117,21 @@ ul.preview li:nth-child(n) {
 }
 
 a.menuitem {
-   display:inline-block;
 	color: black;
-	font-weight: bold;
-	border-radius:1em;
 	border: solid black 1px;
    background-color: rgba(220,220,220,.8); 
-   cursor: pointer;
-   font-family: 'Arial', cursive;
-	padding: 1em;
 }
 
-
- .actionlink {
-   text-decoration: none;
-   display:inline-block;
+.actionlink {
 	color: black;
-	font-weight: bold;
-	border-radius:1em;
 	border: solid black 1px;
    background-color: rgba(220,220,220,.8); 
-   cursor: pointer;
-   font-family: 'Arial', cursive;
-	padding: 1em;
 }
 
 input, select, textarea { 
 	color: black;
 	background-color:rgba(256,256,256,0.8);
 	border: solid 1px rgb(128,128,128);
-	border-radius:1em;
-    font-family: 'Arial', cursive;
 }
 
 a:active { 
@@ -320,146 +143,52 @@ a:active {
 	background-color:rgba(164,164,164,0.8);
 }
 .code {
-	font-family: "monospace";
 	background-color: rgba(230,230,230,0.5);
-	border-radius:25px;
-	white-space: pre-wrap;
-}
-#avatar { 
- float: left;
- margin:1em;
- }
-
-.comment {
-	border-radius:25px;
-	font-size: smaller;
-	}
-
-.onhover {
-	display:none; 
-	position: absolute;
 }
 
 .ohafter:hover + .onhover, .ohinside:hover > .onhover {
-   display:block; 
-   z-index:2; 
-	 padding:5px; margin:5px;
    background-color: rgba(240,240,250,.8); 
 }
 
 .input-validation-error { border: solid 1px red; }
 .field-validation-error { color: red; }
 
-.c2 { font-size: small; font-style: italic; }
-.c3 { font-size: x-small; font-style: italic; }
-
-header h1, .actionlink, .menuitem {transition: padding 2s; padding:1em;}
-
-@media print {
-		body {background-color:white;color:black;}
-		.control, .actionlink,  .menuitem, nav { display:none;} 
-	}
-
-	.bshpanel { display:block; }
-  .bsh { display: none; }
-  .c3 { display:initial; }
-  .c3-alt { display:none; }
 
 @media all and (max-width: 640px) {
-#logo { 
-	min-height: 6em;
-   background: url("/App_Themes/images/logo.xs.png") 0 0 no-repeat fixed;
-}
-
-header {
-   background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 0 repeat fixed;
-		}
-
-#avatar { 
- 	margin:.5em;
- }
-
-header h1, .actionlink, .menuitem { padding:.5em;}
+	#logo { 
+	   background: url("/App_Themes/images/logo.xs.png") 0 0 no-repeat fixed;
+	}
 
+	header {
+	   background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 0 repeat fixed;
+	}
 	nav {
-	margin: 1em;
-		padding: 1em;
 		background:    url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 10% repeat fixed ; 
 	}
 	main { 
-	margin: 1em;
-	padding: 1em;
 		background:   url("/App_Themes/images/musician-923526_1.nbbi.xs.jpg")  50% 20em repeat fixed ; 
 	} 
 	footer { 
 		background: url("/App_Themes/images/live-concert-388160_1280.s.jpg") 50% 90% repeat fixed ; 
 	} 
-	footer a {
-	border-radius:.5em;
-	margin:.5em;
-	padding:.5em;
-  }
-
-  .notification { 
-	padding: .5em;
-	border-radius:.5em;
-	margin:.5em;
-	padding:.5em;
- }
-	.menuitem {
-		display: block; 
-	}
-	.post { 
-	margin:.3em;
-	padding:.3em;
-	}
-	.usertitleref{ 
-	padding:.3em;
-	}
-  .bshpanel { cursor:zoom-in; }
-
-	.c2 { display:initial; }
-	.c2-alt { display:none; }
-	.c3 { display:none; }
-	.c3-alt { display:initial; }
-	#gspacer { 
-	border-radius:.5em;
-	margin:.5em; padding:.5em; }
 }
 
 @media all and (max-width: 350px) {
-#logo { 
-	min-height: 3em;
-   background: url("/App_Themes/images/logo.xxs.png") 0 0 no-repeat fixed;
-}
-header {
-	background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") -1em -1em repeat fixed;
- }
-
-header h1, .actionlink, .menuitem { padding:.2em;}
+	#logo { 
+	   background: url("/App_Themes/images/logo.xxs.png") 0 0 no-repeat fixed;
+	}
+	header {
+		background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") -1em -1em repeat fixed;
+	}
 
 	nav {
-	margin: .5em;
-		padding: .5em;
 		background:    url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") 50% 10% repeat fixed ; 
 	}
 	main { 
-	margin: .5em;
-	    padding: .5em;
 		background:   url("/App_Themes/images/musician-923526_1.nbbi.xxs.jpg")  50% 20em repeat fixed ; 
 	} 
 	footer { 
 		background: url("/App_Themes/images/live-concert-388160_1280.xxs.jpg") 50% 90% repeat fixed ; 
 	} 
-	footer {
-	border-radius:.2em;
-	margin:.2em;
-	padding:.2em;
-  }
-  .c2 { display:none; }
-  .c2-alt { display:initial; }
-	#gspacer { 
-	border-radius:.2em;
-	margin:.2em; padding:.2em; }
 }
 
diff --git a/web/App_Themes/dark/style.css b/web/App_Themes/dark/style.css
index 1f383d27..9e88163e 100644
--- a/web/App_Themes/dark/style.css
+++ b/web/App_Themes/dark/style.css
@@ -1,15 +1,18 @@
 
+
+.skillname { 
+	background-color: rgba(16,16,64,0.8);
+	 border-color: #aaf;
+}
+
 body {
 	font-family: 'Arial', cursive;
-	padding: 0;
-	margin: 0;
 	background-color: black;
 	color: #D0FFD0;
 }
 
 
 .rate {
-	border-radius:1em;
 	border: solid  rgb(128,128,0) 1px;
    background-color: rgba(20,20,20,.8); 
 	color: yellow;
@@ -23,60 +26,30 @@ input, textarea, checkbox {
    }
 
 header {
-	transition: margin 2s, padding 2s;
-	padding: 0;
-	margin: 0;
-	padding-top: 2em;
-	padding-bottom:2em;
-	display: block;
 	background: url("/App_Themes/images/star-939235_1280.jpg") -3em -3em no-repeat fixed;
 	}
 
 header h1, header a {
-transition:padding 2s;
 background-color: rgba(0,0,0,.5); 
-margin:0; padding:1em;
 }
 
 nav {
-transition: margin 2s, padding 2s;
-	margin: 2em;
-	padding: 2em;
-	display: block;
-	border-radius:1em;
 	background: url("/App_Themes/images/helix-nebula-1400x1400.s.jpg") 50% 10% repeat fixed ;
-	justify-content: space-around;
 }
 
 main {
-transition: margin 2s, padding 2s;
-	margin: 2em;
-	padding: 2em;
-	display: block;
-	border-radius:1em;
 	background: url("/App_Themes/images/p8-av4.png") 50% 20em no-repeat fixed ;
 	}
 
 footer {
-transition: margin 2s, padding 2s;
 	background: url("/App_Themes/images/helix-nebula-1400x1400.s.jpg") 50% 90% repeat fixed ;
-	margin: 0;
-	margin-top: 2em;
-	padding: 2em;
-	display: block;
-	clear: both;
-	font-size: smaller;
-	justify-content: space-around;
 }
 
-#copyr { text-align: center; display: block; background-color: rgba(20,20,20,.8); }
-footer p { display:inline-block; } 
+#copyr {  background-color: rgba(20,20,20,.8); }
 
-footer img { max-height: 3em; vertical-align: middle; }
-a img, h1 img, .menuitem img  { vertical-align: middle; }
 fieldset {
 	background-color: rgba(16,16,64,0.8);
-	border-radius:5px; border: solid 1px #000060;
+	border-color: #000060;
 } 
 
 legend {
@@ -85,118 +58,38 @@ legend {
 
 #gspacer { 
 	background-color: rgba(20,20,20,.8); 
-	border-radius:1em;
-	margin:1em; padding:1em; display: inline-block }
-
-
-main video, main img {
-	max-width:100%;
-	max-height:75%;
-	padding: 1em;
-	}
-
-aside { 
-	display: inline-block;
-}
+	 }
 
 .postpreview {
-	display: inline-block;
-	max-width: 40em;
-	padding: 1em;
 	background-color: rgba(0,0,32,0.8);
-	border-radius:1em;
 }
-.postpreview video, .postpreview img {
-	max-width: 100%;
-	padding: 1em;
-	}
 .post { 
-	display:block;
-	padding: 1em;
 	background-color: rgba(0,0,32,0.8);
 	color: #eee;
-	border-radius:1em;
 	}
 .hiddenpost { background-color: rgba(16,16,16,0.5); }
-.fullwidth { width: 100%;  }
-
-textarea.fullwidth { min-height:10em; }
 
-.thanks  { 
-	max-width: 10%;
-	text-align: center;
-	font-size:smaller;
-	display:inline;
-	bottom:0;
-}
-.panel { 
-display:inline-block;
-  }
 
 .panel,.bshpanel, aside {
 	background-color: rgba(20,20,20,.8); 
-	border-radius: 1em; 
-	padding: 1em;
-}
-.spanel {
-  max-width: 18em;
-    display: inline-block;
-  padding: .3em;
-}
-.xspanel {
-  max-width:13em;
-  display: inline-block;
-  padding:.2em;
-}
-.xxspanel {
-  max-width:7em;
-  display: inline-block;
-  padding:.1em;
 }
-.hint {
-	display: inline;
-	font-style: italic;
-	font-size: smaller;
-}
-.hint::before { 
-content: "(";
-}
-.hint::after { 
-content: ")";
-}
-
 
 .usertitleref {
-	border-radius: 1em;
    background-color:rgba(0,0,32,0.6);
-   font-family: 'Arial', cursive;
-	padding: 1em;
-}
-label {
-	font-size: medium;
 }
 .editable {
-	margin: .5em; 
-	min-height:1em; 
-	border-radius: 1em; 
-	border: dashed rgb(020,20,256) 2px; 
+	border-color: rgb(020,20,256); 
 }
 
 .notification {
-	font-size: large;
 	background-color: rgba(64,64,0,0.5);
-	border: solid green 1px;
-	padding: 1em;
-	border-radius:1em;
-	margin:1em;
-	padding:1em;
+	border-color:  green ;
 	}
 .dirty { 
 	background-color: rgba(128,128,0,0.5);
 }
 .error, #error {
 	color: #f88;
-	font-size: large;
 	background-color: rgba(256,0,0,0.5);
 }
 .validation-summary-errors{
@@ -204,17 +97,6 @@ label {
 	background-color: rgba(256,0,0,0.5);
 }
 
-.hidden { display:none; }
-
-ul.preview li:nth-child(-n+10) {
-   display:inline;
-	font-size:xx-small;
-}
-
-ul.preview li:nth-child(n) {
-	display:none;
-}
-
 .validation-summary-errors{
 	color: #f88;
 }
diff --git a/web/App_Themes/font-awesome.css b/web/App_Themes/font-awesome.css
index 880eb825..d44dd632 100644
--- a/web/App_Themes/font-awesome.css
+++ b/web/App_Themes/font-awesome.css
@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
+  src: url('/fonts/fontawesome-webfont.eot?v=4.4.0');
+  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/web/App_Themes/style.css b/web/App_Themes/style.css
index 7b308238..e7217093 100644
--- a/web/App_Themes/style.css
+++ b/web/App_Themes/style.css
@@ -4,13 +4,88 @@ body {
 	padding: 0;
 	margin: 0;
 }
- 
+body.loading {
+    overflow: hidden;   
+}
+
+body.loading .modal {
+    display: block;
+}
+.rate {
+	border-radius:1em;
+	border-style: solid;
+	border-width: 1px;
+}
+
+header {
+	transition: margin 2s, padding 2s;
+	padding: 0;
+	margin: 0;
+	padding-top: 2em;
+	padding-bottom:2em;
+	display: block;
+	}
+
+header h1, header a {
+	transition:padding 2s;
+	margin:0; padding:1em;
+}
+
+nav {
+transition: margin 2s, padding 2s;
+	margin: 2em;
+	padding: 2em;
+	display: block;
+	border-radius:1em;
+	justify-content: space-around;
+}
+
+main {
+	transition: margin 2s, padding 2s;
+	margin: 2em;
+	padding: 2em;
+	display: block;
+	border-radius:1em;
+}
+main video, main img {
+	max-width:100%;
+	max-height:75%;
+	padding: 1em;
+	}
+
+footer {
+	transition: margin 2s, padding 2s;
+	margin: 0;
+	margin-top: 2em;
+	padding: 2em;
+	display: block;
+	clear: both;
+	font-size: smaller;
+	justify-content: space-around;
+}
+
+footer p { display:inline-block; } 
+
+footer img { max-height: 3em; vertical-align: middle; }
+
+a img, h1 img, .menuitem img  { vertical-align: middle; }
+
+fieldset {
+	border-radius:5px; border-style: solid; 
+	border-width: 1px;
+} 
+aside { 
+	display: inline-block;
+}
+
+ul.preview li:nth-child(-n+10) {
+   display:inline;
+	font-size:xx-small;
+}
 
-/* Start by setting display:none to make this hidden.
-   Then we position it in relation to the viewport window
-   with position:fixed. Width, height, top and left speak
-   for themselves. Background we set to 80% white with
-   our animation centered, and no-repeating */
+ul.preview li:nth-child(n) {
+	display:none;
+}
 .modal {
     display:    none;
     position:   fixed;
@@ -38,20 +113,102 @@ body {
     overflow-x:   hidden; 
 }
 
-body.loading {
-    overflow: hidden;   
+.postpreview {
+	display: inline-block;
+	max-width: 40em;
+	padding: 1em;
+	border-radius:1em;
 }
+.postpreview video, .postpreview img {
+	max-width: 100%;
+	padding: 1em;
+	}
+.post { 
+	display:block;
+	padding: 1em;
+	border-radius:1em;
+	}
 
-body.loading .modal {
-    display: block;
+.fullwidth { width: 100%;  }
+textarea.fullwidth { min-height:10em; }
+
+.thanks  { 
+	max-width: 10%;
+	text-align: center;
+	font-size:smaller;
+	display:inline;
+	bottom:0;
 }
+.panel { 
+display:inline-block;
+  }
+.panel,.bshpanel, aside {
+	border-radius: 1em; 
+	padding: 1em;
+}
+.spanel {
+  max-width: 18em;
+    display: inline-block;
+  padding: .3em;
+}
+.xspanel {
+  max-width:13em;
+  display: inline-block;
+  padding:.2em;
+}
+.xxspanel {
+  max-width:7em;
+  display: inline-block;
+  padding:.1em;
+}
+
+.hint {
+	display: inline;
+	font-style: italic;
+	font-size: smaller;
+}
+.hint::before { 
+content: "(";
+}
+.hint::after { 
+content: ")";
+}
+
+.usertitleref {
+	border-radius: 1em;
+   font-family: 'Arial', cursive;
+	padding: 1em;
+}
+.editable {
+	margin: .5em; 
+	min-height:1em; 
+	border-radius: 1em; 
+	border-style: dashed;
+	border-width: 2px; 
+}
+
+.notification {
+	font-size: large;
+	border-style: solid;
+	border-width: 1px;
+	padding: 1em;
+	border-radius:1em;
+	margin:1em;
+	padding:1em;
+	}
+.error, #error {
+	font-size: large;
+}
+.hidden { display:none; }
+
+
+
 .iconsmall { max-height: 1.3em; max-width: 1.3em; } 
 
 .photo { width: 100%; }
 .blogbanner { float: left; top:0; }
 .subtitle { font-size:small; font-style: italic; }
 
-
 nav li { display: inline-block; }
 
 footer a {
@@ -59,24 +216,23 @@ footer a {
 	padding:1em;
   }
 
+footer p { display:inline-block; } 
+
+footer img { max-height: 3em; vertical-align: middle; }
+a img, h1 img, .menuitem img  { vertical-align: middle; }
+
+
 legend {
 	border-radius:5px;
 	padding:.5em;
   }
-#copyr { text-align: center; display: block; background-color: rgba(20,20,20,.8); }
-footer p { display:inline-block; } 
 
-footer img { max-height: 3em; vertical-align: middle; }
-a img, h1 img, .menuitem img  { vertical-align: middle; }
+#copyr { text-align: center; display: block;  }
 
 #gspacer { 
-	background-color: rgba(20,20,20,.8); 
 	border-radius:1em;
-	margin:1em; padding:1em; display: inline-block }
-fieldset {
-	background-color: rgba(16,16,64,0.8);
-	border-radius:5px; border: solid 1px #000060;
-} 
+	margin:1em; padding:1em; 
+	display: inline-block }
 
 .actionlink, .menuitem, a {
    display:inline-block;
@@ -92,7 +248,6 @@ input, select, textarea {
 	border-radius:1em;
 	border-style: solid;
 	border-width:1px;
-
     font-family: 'Arial', cursive;
 }
 
@@ -124,19 +279,22 @@ input, select, textarea {
    background-color: rgba(0,0,40,.8); 
 }
 .skillname { 
-padding:.5em;
-margin:.25em;
- max-width: 24em; 
- text-align: center;
-display: inline-block; 
-	background-color: rgba(16,16,64,0.8);
+	padding:.5em;
+	margin:.25em;
+	max-width: 24em; 
+	text-align: center;
+	display: inline-block; 
 	border-radius:1em;
-	 border: solid 1px #aaf;
-	 } 
+	border-style: solid;
+	border-width: 1px;
+} 
+
 .input-validation-error { border: solid 1px red; background-color: rgba(180,256,256,.5); }
+
 .field-validation-error { color: red; background-color: rgba(180,256,256,.5); }
 
 .c2 { font-size: small; font-style: italic; }
+
 .c3 { font-size: x-small; font-style: italic; }
 
 .rate { 
@@ -154,10 +312,12 @@ ul.editablelist>li {
 	border: solid grey 1px;
 	border-radius: 1em;
 }
+
 ul.editablelist>li:before { 
   font-family: 'FontAwesome';
   content: "\f007";
-  }
+}
+
 ul.editablelist>li:hover { 
 	background-color: rgba(128,0,0,0.5);
 	cursor:pointer;
@@ -166,7 +326,7 @@ ul.editablelist>li:hover {
 ul.editablelist>li:hover:before { 
   font-family: 'FontAwesome';
   content: "\f00d";
-  }
+}
 
 @media print {
 		body {background-color:white;color:black;}
diff --git a/web/ChangeLog b/web/ChangeLog
index 3ba09d81..99cc6555 100644
--- a/web/ChangeLog
+++ b/web/ChangeLog
@@ -1,3 +1,20 @@
+2015-11-23  Paul Schneider  <paul@pschneider.fr>
+
+	* style.css:
+	* style.css: Ne contient plus que ce qui concerne les couleurs
+	et images
+
+	* font-awesome.css: Il parait plus sage de spécifier des Url
+	absolues vers les polices de caractère.
+
+	* style.css: Réccupère du thème sombre tout ce qui ne concerne
+	pas la couleur, pour en faire profiter tous les thèmes.
+
+	* Web.csproj: Ajoute le style du thème clair au projet.
+
+	* style.tablesorter.css: ce fichier est obsolete et va
+	disparaitre.
+
 2015-11-23  Paul Schneider  <paul@pschneider.fr>
 
 	* ErrorHtmlFormatter.cs: Pour note: conception à revoir
diff --git a/web/Web.csproj b/web/Web.csproj
index 79063451..25d03f5f 100644
--- a/web/Web.csproj
+++ b/web/Web.csproj
@@ -294,7 +294,6 @@
     <Content Include="App_Themes\blue\asc.gif" />
     <Content Include="App_Themes\blue\bg.gif" />
     <Content Include="App_Themes\blue\desc.gif" />
-    <Content Include="App_Themes\blue\style.css" />
     <Content Include="App_Themes\dark\asc.gif" />
     <Content Include="App_Themes\dark\bg.gif" />
     <Content Include="App_Themes\dark\desc.gif" />
@@ -509,6 +508,8 @@
     <Content Include="Web.TotemPre.config" />
     <Content Include="Views\FrontOffice\Booking.aspx" />
     <Content Include="Views\FrontOffice\EavyBooking.aspx" />
+    <Content Include="App_Themes\blue\style.tablesorter.css" />
+    <Content Include="App_Themes\clear\style.css" />
   </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />