updated styles for top bar
This commit is contained in:
Konrad Mohrfeldt
parent
9729e675ff
commit
5849239f5e
|
|
@ -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=Droid+Sans:regular,bold&subset=latin);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700);
|
||||
@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700);
|
||||
|
||||
/* jQuery Theme */
|
||||
/* @import url(jquery-ui-1.8.10.custom.css); */
|
||||
|
|
@ -18,90 +19,93 @@ b, u, i, center,
|
|||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* added by seba because nobody else did this. */
|
||||
.content {
|
||||
margin: 5px;
|
||||
}
|
||||
/* end of addition */
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
clear: both;
|
||||
font-weight: bold;
|
||||
font-family: "Istok Web", inherit;
|
||||
}
|
||||
|
||||
ol, ul, li {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after {
|
||||
content: '';
|
||||
content: none;
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* GENERAL SETTINGS */
|
||||
|
||||
body {
|
||||
font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Droid Serif', Garamond, serif;
|
||||
font: 11px "Open Sans", Tahoma, Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
p { margin-bottom: 7px; }
|
||||
|
||||
input {
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #E5E5E5;
|
||||
background: none repeat scroll 0 0 #FBFBFB;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #E5E5E5;
|
||||
background: none repeat scroll 0 0 #FBFBFB;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
|
||||
background: #FAFFBD;
|
||||
background: #FAFFBD;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
#header {
|
||||
margin-bottom: 20px;
|
||||
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 {
|
||||
padding: 5px 10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#header .search {
|
||||
background: url("img/logo.png") 10px center no-repeat #323232;
|
||||
height: 40px;
|
||||
background: url("img/logo.png") 10px center no-repeat transparent;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#header .search input[type='search'] {
|
||||
|
|
@ -110,73 +114,99 @@ input[type=text]:focus, input[type=search]:focus, input[type=password]:focus {
|
|||
}
|
||||
|
||||
#header .search form {
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
#header .base_nav {
|
||||
background: url("img/base_nav_bg.gif") repeat-x #339DD1;
|
||||
text-transform: uppercase;
|
||||
height: 50px;
|
||||
color: white;
|
||||
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;
|
||||
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;
|
||||
margin-right: 20px;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin: 0 20px 0 0;
|
||||
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;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#header .base_nav a {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
padding: 0 10px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
text-align: center;
|
||||
//background: #3398cc;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
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 {
|
||||
background: white;
|
||||
color: #339DD1;
|
||||
-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;
|
||||
line-height: 50px;
|
||||
float:right;
|
||||
padding: 10px 0;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
/* LOGIN FORM */
|
||||
|
||||
form.login {
|
||||
width: 300px;
|
||||
margin: 60px auto;
|
||||
/*-moz-box-shadow: 3px 3px 6px #333;
|
||||
-webkit-box-shadow: 3px 3px 6px #333;*/
|
||||
box-shadow: 1px 1px 2px #eaeaea;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 20px;
|
||||
width: 300px;
|
||||
margin: 60px auto;
|
||||
-moz-box-shadow: 1px 1px 2px #eaeaea;
|
||||
-webkit-box-shadow: 1px 1px 2px #eaeaea;
|
||||
box-shadow: 1px 1px 2px #eaeaea;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
form.login label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 3px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
form.login input {
|
||||
font-size: 24px;
|
||||
width: 97%;
|
||||
font-size: 24px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
form.login input[type=submit] {
|
||||
|
|
@ -214,37 +244,39 @@ form.login input[type=submit]:active {
|
|||
/* NOTIFICATIONS */
|
||||
|
||||
div.error, div.notice, div.success {
|
||||
border-top: 1px solid #DDD;
|
||||
padding: 0.6em 0.8em;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #DDD;
|
||||
padding: 0.6em 0.8em;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.error h2, div.notice h2, div.success h2 {
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
div.error {
|
||||
background: #FBE3E4;
|
||||
color: #8A1F11;
|
||||
border-color: #FBC2C4;
|
||||
background: #FBE3E4;
|
||||
color: #8A1F11;
|
||||
border-color: #FBC2C4;
|
||||
}
|
||||
|
||||
div.error a { color:#8A1F11; }
|
||||
|
||||
div.notice {
|
||||
background: #FFF6BF;
|
||||
color: #514721;
|
||||
border-color: #FFD324;
|
||||
background: #FFF6BF;
|
||||
color: #514721;
|
||||
border-color: #FFD324;
|
||||
}
|
||||
|
||||
div.notice a { color:#514721; }
|
||||
|
||||
div.success{
|
||||
background: #E6EFC2;
|
||||
color: #264409;
|
||||
border-color: #C6D880;
|
||||
background: #E6EFC2;
|
||||
color: #264409;
|
||||
border-color: #C6D880;
|
||||
}
|
||||
div.success a { color:#264409; }
|
||||
|
||||
|
|
@ -384,11 +416,11 @@ table.details td {
|
|||
}
|
||||
|
||||
.content a:hover {
|
||||
background: #3398CC;
|
||||
color: white;
|
||||
background: #3398CC;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font: 20px "lucida grande", tahoma, verdana, arial, sans-serif;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue