ce469b6ede
Separated code to have a lib and an example. Improved design, fixed a few issues related to folder location. This is still experimental and require more work to be really friendly to use.
183 lines
3.5 KiB
CSS
183 lines
3.5 KiB
CSS
body { margin: 0; background-color: #eeeeff;}
|
|
div#header { background-color: #003; color: #fff; border: solid 1px #003; padding: 0px; margin: 0px;}
|
|
div#header img#logo { float: left; margin: 5px 15px 5px 10px; }
|
|
div#header div#title {font-size: 180%; font-weight: bold; margin-top: 10px; }
|
|
ul.horizontal {
|
|
list-style-type: none;
|
|
}
|
|
ul.horizontal li {
|
|
display: inline;
|
|
padding: 0 5px 0 5px;
|
|
}
|
|
|
|
div#menu-bar li.active {
|
|
border: solid 1px #ff0;
|
|
color: #ff0;
|
|
}
|
|
div#menu-bar li:hover {
|
|
background-color: #fff;
|
|
color: #00f;
|
|
}
|
|
div#menu-bar li a {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
div#menu-bar li:hover a {
|
|
color: #00f;
|
|
font-style: bold;
|
|
}
|
|
|
|
|
|
div#primary-tabs li {
|
|
color: #00f;
|
|
padding: 2px 5px 2px 5px;
|
|
background-color: #eee;
|
|
border: solid 1px #ccf;
|
|
}
|
|
div#primary-tabs li.active {
|
|
padding: 2px 7px 1px 7px;
|
|
border-top: solid 2px #99f;
|
|
border-left: solid 1px #99f;
|
|
border-right: solid 1px #99f;
|
|
border-bottom: 0;
|
|
background-color: #fff;
|
|
color: #00f;
|
|
}
|
|
div#primary-tabs li:hover {
|
|
background-color: #fff;
|
|
color: #00f;
|
|
}
|
|
div#primary-tabs li a {
|
|
text-decoration: none;
|
|
color: #00f;
|
|
}
|
|
div#primary-tabs li:hover a {
|
|
color: #00f;
|
|
font-style: bold;
|
|
}
|
|
|
|
|
|
|
|
div#menu-first { margin-left: 20%; color: #ccf; background-color: #003; }
|
|
div#menu-first a { color: #ccf; }
|
|
div#menu-second { color: #99f; background-color: #333; }
|
|
div#menu-second a { color: #99f; }
|
|
|
|
div#main-wrapper {
|
|
clear: both;
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
div#main { margin: 0; padding: 0; clear: both; height:0; display: block; }
|
|
|
|
div#first_sidebar {
|
|
width: 20%;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
display: inline;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
div#second_sidebar {
|
|
width: 20%;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
display: inline;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
div.sidebar div.block {
|
|
margin-bottom: 5px;
|
|
padding: 0;
|
|
border: dotted 1px #999;
|
|
background-color: #fff;
|
|
}
|
|
div.sidebar div.block div.title {
|
|
padding: 3px 3px 3px 3px;
|
|
font-weight: bold;
|
|
background-color: #dedede;
|
|
border-bottom: dotted 1px #999;
|
|
}
|
|
div.sidebar div.block div.inside {
|
|
margin: 3px;
|
|
}
|
|
|
|
div#content { padding: 5px 3px 5px 20px;
|
|
margin-top: 10px;
|
|
width: 50%;
|
|
display: inline;
|
|
float: left;
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
padding-bottom: 30px;
|
|
}
|
|
div#footer { margin: 10px 0 10px 0; clear: both; display: block; text-align: center; padding: 10px; border-top: solid 1px #00f; color: #fff; background-color: #333;}
|
|
div#footer a { color: #ff0; }
|
|
|
|
form div.error {
|
|
border-top: dotted 1px #f00;
|
|
border-bottom: dotted 1px #f00;
|
|
border-left: solid 3px #f00;
|
|
}
|
|
div.node div.title {
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
border-bottom: dotted 1 px #009;
|
|
}
|
|
div.description {
|
|
font-style: italic;
|
|
font-color: #999;
|
|
}
|
|
|
|
div.node-wrapper {
|
|
margin: 5px 2px 5px 2px;
|
|
border: dotted 1px #dddddd;
|
|
padding: 5px 3px 5px 3px;
|
|
}
|
|
div.node div.title {
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
border-bottom: dotted 1 px #009;
|
|
float: left;
|
|
}
|
|
div.node div.description {
|
|
text-align: right;
|
|
}
|
|
div.node div.inner {
|
|
padding: 5px 5px 5px 10px;
|
|
border-top: dotted 1px #dddddd;
|
|
}
|
|
|
|
form#login-form {
|
|
border: dotted 1px #099;
|
|
display: inline-block;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
}
|
|
|
|
div#message {
|
|
border: solid 1px #fc0;
|
|
background-color: #fed;
|
|
color: #000;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
div#message li {
|
|
padding-left: 5px;
|
|
margin-left: 3px;
|
|
}
|
|
div#message li.success {
|
|
color: #003300;
|
|
background-color: #ccffcc;
|
|
}
|
|
|
|
div#message li.error {
|
|
color: #330000;
|
|
background-color: #ff9494;
|
|
}
|
|
div#message li.warning {
|
|
color: #aa2200;
|
|
background-color: #ffcc99;
|
|
}
|