updated styles for top bar

k4ever/media/css/style.css

@@ -1,7 +1,8 @@
-/* THOSE ARE JUST TEMPORARY, I CHANGE THEM LATER INTO LOCAL RESOURCES */
+/* THOSE ARE JUST TEMPORARYLY, I CHANGE THEM LATER INTO LOCAL RESOURCES */
+/* OR DOES SHE?! */
 
-@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic&subset=latin);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700);
-@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);
+@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700);
 
 /* jQuery Theme */
 /* @import url(jquery-ui-1.8.10.custom.css); */
@@ -25,11 +26,9 @@ table, caption, tbody, tfoot, thead, tr, th, td {
 	vertical-align: baseline;
 }
 
-/* added by seba because nobody else did this. */
 .content {
 	margin: 5px;
 }
-/* end of addition */
 
 body {
 	line-height: 1;
@@ -37,7 +36,8 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
-    font-weight: normal;
+	font-weight: bold;
+	font-family: "Istok Web", inherit;
 }
 
 ol, ul, li {
@@ -70,11 +70,7 @@ a img {
 /* GENERAL SETTINGS */
 
 body {
-  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
+	font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Droid Serif', Garamond, serif;
 }
 
 p { margin-bottom: 7px; }
@@ -93,6 +89,14 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
 
 #header {
 	margin-bottom: 20px;
+	background: #333; 
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#111111));
+	background-image: -webkit-linear-gradient(top, #666666, #111111);
+	background-image:    -moz-linear-gradient(top, #666666, #111111);
+	background-image:     -ms-linear-gradient(top, #666666, #111111);
+	background-image:      -o-linear-gradient(top, #666666, #111111);
+	background-image:         linear-gradient(top, #666666, #111111);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#111111');
 }
 
 #header > div {
@@ -100,7 +104,7 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
 }
 
 #header .search {
-  background: url("img/logo.png") 10px center no-repeat #323232;
+	background: url("img/logo.png") 10px center no-repeat transparent;
 	height: 40px;
 }
 
@@ -115,45 +119,71 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
 }
 
 #header .base_nav {
-  background: url("img/base_nav_bg.gif") repeat-x #339DD1;
+	background: #3398cc; 
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#32bbef), to(#3398cc));
+	background-image: -webkit-linear-gradient(top, #32bbef, #3398cc);
+	background-image:    -moz-linear-gradient(top, #32bbef, #3398cc);
+	background-image:     -ms-linear-gradient(top, #32bbef, #3398cc);
+	background-image:      -o-linear-gradient(top, #32bbef, #3398cc);
+	background-image:         linear-gradient(top, #32bbef, #3398cc);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#32bbef', EndColorStr='#3398cc');
 	text-transform: uppercase;
-  height: 50px;
 	color: white;
+	border-bottom: 2px solid black;
+	padding-top: 10px;
+	/*border-top: 2px solid black;*/
+	-webkit-box-shadow: 0 3px 8px 0 black inset;
 }
 
 #header .base_nav h1 {
 	color: white;
-  float: left;
+	display: inline-block;
-  margin-right: 20px;
+	margin: 0 20px 0 0;
-  line-height: 50px;
+	padding: 5px 0 0 0;
+	vertical-align: middle;
+	line-height: 1;
+	text-shadow: 0 -1px #777;
 }
 
 #header .base_nav ul {
-  float: left;
+	display: inline-block;
+	vertical-align: middle;
 }
 
 #header .base_nav ul li {
 	display: inline-block;
-  text-transform: uppercase;
+	font-weight: bold;
-  line-height: 36px;
+	margin-right: 10px;
 }
 
 #header .base_nav a {
+	text-align: center;
+	//background: #3398cc;
 	display: block;
- margin-top: 7px;
+	vertical-align: middle;
- padding: 0 10px;
 	text-decoration: none;
- color: white;
+	color: inherit;
+	padding: 10px 15px;
+	margin: 3px 0;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	border-radius: 20px;
+	-webkit-transition: background .2s;
 }
 
 #header .base_nav a:hover {
+	-webkit-transition: background .2s;
 	background: white;
 	color: #339DD1;
+	-webkit-box-shadow: 0 1px 0 0 #777 inset;
+	-moz-box-shadow: 0 1px 0 0 #777 inset;
+	box-shadow: 0 1px 0 0 #777 inset;
 }
 
 span.balance {
-  float: right;
+	float:right;
-  line-height: 50px;
+	padding: 10px 0;
+	margin: 3px 0;
 }
 
 /* LOGIN FORM */
@@ -161,8 +191,8 @@ span.balance {
 form.login {
 	width: 300px;
 	margin: 60px auto;
-  /*-moz-box-shadow: 3px 3px 6px #333;
+	-moz-box-shadow: 1px 1px 2px #eaeaea;
-  -webkit-box-shadow: 3px 3px 6px #333;*/
+	-webkit-box-shadow: 1px 1px 2px #eaeaea;
 	box-shadow: 1px 1px 2px #eaeaea;
 	border: 1px solid #E5E5E5;
 	padding: 20px;
@@ -232,6 +262,7 @@ div.error {
 	color: #8A1F11;
 	border-color: #FBC2C4;
 }
+
 div.error a { color:#8A1F11; }
 
 div.notice {
@@ -239,6 +270,7 @@ div.notice {
 	color: #514721;
 	border-color: #FFD324;
 }
+
 div.notice a { color:#514721; }
 
 div.success{
@@ -389,6 +421,6 @@ table.details td {
 }
 
 .content h1 {
-	font: 20px "lucida grande", tahoma, verdana, arial, sans-serif;
+	font-size: 20px;
 	text-align: center;
 }