#795: New style for messages and menu

To begin, this commit changes the style of the messages (error, message,
tick and cross).
- Use of gradient, box-shadow
- Better look if there is more then 1 line in a message box
- No icons (20 kB smaller! :D)

Other changes are:
- The menu is now 3px removed from the header to keep it on the same
hight as the content
- The menu items now use 2 lines of pixels more (top and bottom)
I know that most of the users won't use the dashboard on a touch device,
but it is possible, this makes it easier
- Fix for reset-buttons, which where blue in browser that doesn't
support CSS3 gradients
- Less border-radius, to keep the design a little bit one big thing
- Sidebar is now displayed on screens whit a small width

public/css/style.css

@@ -85,14 +85,15 @@ ul.nav {
 	list-style: none;
 	border-top: 2px solid #4475ab;
 	margin-bottom: 15px;
+	margin-top: 3px;
 }
 
 ul.nav li {
 	border-bottom: 1px solid #999;
 }
 
 ul.nav a, ul.nav a:visited {
-	padding: 4px 5px 5px 5px;
+	padding: 4px 6px 5px 6px;
 	display: block;
 	font-weight: 900;
 	width: 200px;
@@ -114,34 +115,6 @@ h6 {
 	margin-bottom: 3px;
 }
 
-/* List nav */
-ul.pnav {
-	list-style: none;
-	border-top: 1px solid #999;
-}
-
-ul.pnav li {
-	width: 670px;
-	margin-left: -40px;
-	border-bottom: 1px solid #999;
-}
-
-ul.pnav a, ul.pnav a:visited {
-	padding: 5px 5px 6px 5px;
-	display: block;
-	font-weight: 900;
-	width: 660px;
-	text-decoration: none;
-	text-transform: uppercase;
-	font-size: 12px;
-	color: #42413C;
-}
-
-ul.pnav a:hover, ul.pnav a:active, ul.pnav a:focus {
-	background-color: #f3f3f3;
-	color: #222222;
-}
-
 /* Forms */
 select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
 	display: inline-block;
@@ -151,7 +124,6 @@ select, textarea, input[type="text"], input[type="password"], input[type="dateti
 	font-size: 14px;
 	line-height: 20px;
 	color: #555;
-	border-radius: 4px;
 	vertical-align: middle;
 }
 
@@ -170,7 +142,6 @@ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[ty
 
 input[type="file"] {
 	box-shadow: none;
-	border-radius: 4px;
 }
 
 input[type="radio"], input[type="checkbox"] {
@@ -251,7 +222,6 @@ input[type="button"] {
 	border: 1px solid #1b5da6;
 	*border: 0;
 	border-bottom-color: #15457b;
-	border-radius: 4px;
 	*margin-left: .3em;
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
@@ -268,15 +238,14 @@ input[type="reset"] {
 	cursor: pointer;
 	color: #fff;
 	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
-	background-color: #4475ab;
+	background-color: #e45023;
 	background-image: linear-gradient(to bottom,#e45023,#c62f00);
 	background-repeat: repeat-x;
 	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
 	*background-color: #04c;
 	border: 1px solid #e73600;
 	*border: 0;
 	border-bottom-color: #932300;
-	border-radius: 4px;
 	*margin-left: .3em;
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
@@ -303,37 +272,39 @@ input[type="reset"] {
 /* Alerts and messages */
 .message {
 	margin-top: 3px;
-	padding: 6px 10px 2px 10px;
-	font-size: 13px;
-	line-height: 1.6;
+	padding: 6px 7px 2px 0;
+	font-size: 14px;
+	line-height: 1.2;
+	color: #fff;
+	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
 }
 
 .m-message {
-	background: #cbf2ff url("../img/icons/information.png") no-repeat;
-	background-position: 8px 50%;
-	border-top: #00baff 3px solid;
-	color: #00baff;
+	background: #00a0db;
+	background: linear-gradient(to bottom, #00a0db 0%,#0085b6 100%);
+	border: #006d95 1px solid;
+	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
 
 .m-error {
-	background: #ffefad url("../img/icons/error.png") no-repeat;
-	background-position: 8px 50%;
-	border-top: #ffb400 3px solid;
-	color: #e3a000;
+	background: #e6a200;
+	background: linear-gradient(to bottom, #e6a200 0%,#c88d00 100%);
+	border: #986b00 1px solid;
+	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
 
 .m-tick {
-	background: #daff89 url("../img/icons/tick.png") no-repeat;
-	background-position: 8px 50%;
-	border-top: #7ab200 3px solid;
-	color: #7ab200;
+	background: #81bc00;
+	background: linear-gradient(to bottom, #81bc00 0%,#689800 100%);
+	border: #4d7100 1px solid;
+	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
 
 .m-cross {
-	background: #ffa891 url("../img/icons/cross.png") no-repeat;
-	background-position: 8px 50%;
-	border-top: #ff3600 3px solid;
-	color: #ff3600;
+	background: #e63100;
+	background: linear-gradient(to bottom, #e63100 0%,#c42a00 100%);
+	border: #9c2100 1px solid;
+	box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
 }
 
 .m-content {
@@ -396,7 +367,6 @@ a:hover, a:active, a:focus {
 	padding: 0 15px 15px 40px;
 }
 
-
 .fltrt {
 	float: right;
 	margin-left: 8px;
@@ -410,18 +380,4 @@ a:hover, a:active, a:focus {
 	height:0;
 	font-size: 1px;
 	line-height: 0px;
-}
-
-@media (max-width: 910px) {
-	.container, .header, .content2, .footer, .menu {
-		width: 670px;
-	}
-
-	.pageheader {
-		display: none;
-	}
-
-	.sidebar {
-		display: none;
-	}
 }