360 lines
5.8 KiB
CSS
360 lines
5.8 KiB
CSS
|
body {
|
||
|
background: #000 url('img/algo-logo.png') center fixed;
|
||
|
}
|
||
|
|
||
|
.navbar {
|
||
|
position: absolute;
|
||
|
z-index: 100;
|
||
|
}
|
||
|
|
||
|
.navi0 {
|
||
|
background: #bbb;
|
||
|
height: 25px;
|
||
|
border-color: #fff;
|
||
|
border-style: solid;
|
||
|
border-width: 0 0 2px 0;
|
||
|
}
|
||
|
|
||
|
.navi1 {
|
||
|
background: #ccc;
|
||
|
height: 25px;
|
||
|
border-color: #fff;
|
||
|
border-style: solid;
|
||
|
border-width: 2px 0 0 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.dropdown {
|
||
|
margin: 2px 5px 0 5px;
|
||
|
border-width: 0;
|
||
|
border-color: #fff;
|
||
|
border-style: solid;
|
||
|
width: 125px;
|
||
|
}
|
||
|
|
||
|
.dropdown * {
|
||
|
font-size: 14px;
|
||
|
background: #444;
|
||
|
color: #fff;
|
||
|
padding: 3px;
|
||
|
display: none;
|
||
|
border-color: #bbb;
|
||
|
border-style: solid;
|
||
|
border-width: 0;
|
||
|
cursor: default;
|
||
|
}
|
||
|
|
||
|
.dropdown .top {
|
||
|
font-size: 14px;
|
||
|
font-weight: bold;
|
||
|
color: #333;
|
||
|
height: 20px;
|
||
|
padding: 3px 0 0 0;
|
||
|
width: 125px;
|
||
|
text-align: center;
|
||
|
cursor: pointer;
|
||
|
border: 0;
|
||
|
}
|
||
|
|
||
|
.dropdown .group {
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.dropdown .entries {
|
||
|
top: -1px;
|
||
|
left: 133px;
|
||
|
width: 125px;
|
||
|
padding: 0;
|
||
|
border-width: 1px 1px 0 1px;
|
||
|
}
|
||
|
|
||
|
.dropdown .entry, .dropdown .header {
|
||
|
border-width: 0 0 1px 0;
|
||
|
width: auto;
|
||
|
}
|
||
|
|
||
|
.dropdown .entry {
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
.dropdown .header {
|
||
|
background: #444 url('img/next.png') no-repeat right 4px;
|
||
|
padding-right: 15px;
|
||
|
width: 107px;
|
||
|
}
|
||
|
|
||
|
.dropdown .side {
|
||
|
top: -1px;
|
||
|
left: -9px;
|
||
|
width: 7px;
|
||
|
height: 100%;
|
||
|
background: #ddd;
|
||
|
padding: 1px 0 0 0;
|
||
|
border-width: 0 0 0 1px;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover {
|
||
|
border-color: #bbb;
|
||
|
margin: 2px 3px 0 5px;
|
||
|
border-width: 0 1px;
|
||
|
left: -1px;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover .top {
|
||
|
height: 26px;
|
||
|
color: #222;
|
||
|
border: 0;
|
||
|
}
|
||
|
|
||
|
.dropdown .group:hover > .header {
|
||
|
background: #222 url('img/nexth.png') no-repeat right 4px;
|
||
|
}
|
||
|
|
||
|
.dropdown .entry:hover {
|
||
|
background: #777;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop0 {
|
||
|
background: url('img/tab3.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop0 {
|
||
|
background: url('img/tab3.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop1 {
|
||
|
background: url('img/tab4.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop1 {
|
||
|
background: url('img/tab4.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop2 {
|
||
|
background: url('img/tab5.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop2 {
|
||
|
background: url('img/tab5.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop3 {
|
||
|
background: url('img/tab2.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop3 {
|
||
|
background: url('img/tab2.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop4 {
|
||
|
background: url('img/tab1.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop4 {
|
||
|
background: url('img/tab1.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
.dropdown > .drop5 {
|
||
|
background: url('img/tab6.png') no-repeat ;
|
||
|
}
|
||
|
|
||
|
.dropdown:hover > .drop5 {
|
||
|
background: url('img/tab6.png') no-repeat 0 -30px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.abs {
|
||
|
width: 10px;
|
||
|
}
|
||
|
|
||
|
.scrollup {
|
||
|
background: url('img/scrollup.png') no-repeat;
|
||
|
}
|
||
|
|
||
|
.scrolldown {
|
||
|
background: url('img/scrolldown.png') no-repeat;
|
||
|
}
|
||
|
|
||
|
.scrollup:hover {
|
||
|
background: url('img/scrolluph.png') no-repeat;
|
||
|
}
|
||
|
|
||
|
.scrolldown:hover {
|
||
|
background: url('img/scrolldownh.png') no-repeat;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/* The following piece of css, namely the "screen" stuff,
|
||
|
is not correctly formatted css, as it is only used by a PHP script
|
||
|
that is requested by the JavaScript environment of Algohol.
|
||
|
That is the reason why it is commented out.
|
||
|
It is kept in the css file for ease of use.
|
||
|
All numbers are in the "px" unit and must be written without a unit.
|
||
|
screen {
|
||
|
hheight: 25; the height of a window header
|
||
|
margin_g: 5; the general margin of a window
|
||
|
margin_t: 2; the margin at the top of a window
|
||
|
bw: 16; box width; includes the window icon and the minimize/maximize/close buttons.
|
||
|
bh: 16; box height; includes the window icon and the minimize/maximize/close buttons.
|
||
|
}
|
||
|
*/
|
||
|
|
||
|
.window {
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.window > .tl {
|
||
|
background: url('img/corners.png') no-repeat -20px 0;
|
||
|
}
|
||
|
|
||
|
.window > .t {
|
||
|
background: #999;
|
||
|
}
|
||
|
|
||
|
.window > .tr {
|
||
|
background: url('img/corners.png') no-repeat -25px 0;
|
||
|
}
|
||
|
|
||
|
.window > .r {
|
||
|
background: #999;
|
||
|
}
|
||
|
|
||
|
.window > .br {
|
||
|
background: url('img/corners.png') no-repeat -30px 0;
|
||
|
}
|
||
|
|
||
|
.window > .b {
|
||
|
background: #999;
|
||
|
}
|
||
|
|
||
|
.window > .bl {
|
||
|
background: url('img/corners.png') no-repeat -35px 0;
|
||
|
}
|
||
|
|
||
|
.window > .l {
|
||
|
background: #999;
|
||
|
}
|
||
|
|
||
|
.window#active > .tl {
|
||
|
background: url('img/corners.png') no-repeat 0 0;
|
||
|
}
|
||
|
|
||
|
.window#active > .t {
|
||
|
background: #444;
|
||
|
}
|
||
|
|
||
|
.window#active > .tr {
|
||
|
background: url('img/corners.png') no-repeat -5px 0;
|
||
|
}
|
||
|
|
||
|
.window#active > .r {
|
||
|
background: #444;
|
||
|
}
|
||
|
|
||
|
.window#active > .br {
|
||
|
background: url('img/corners.png') no-repeat -10px 0;
|
||
|
}
|
||
|
|
||
|
.window#active > .b {
|
||
|
background: #444;
|
||
|
}
|
||
|
|
||
|
.window#active > .bl {
|
||
|
background: url('img/corners.png') no-repeat -15px 0;
|
||
|
}
|
||
|
|
||
|
.window#active > .l {
|
||
|
background: #444;
|
||
|
}
|
||
|
|
||
|
.window > .title {
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
.window > .data {
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.window > .icon {
|
||
|
background-repeat: no-repeat;
|
||
|
background-image: url('../icons/img/default.png');
|
||
|
}
|
||
|
|
||
|
.window > .title {
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
|
||
|
.window > .options > * {
|
||
|
background-image: url('img/action_icons.png');
|
||
|
}
|
||
|
|
||
|
.window > .options > .minimize {
|
||
|
background-position: 0 0;
|
||
|
}
|
||
|
|
||
|
.window > .options > .minimize:hover {
|
||
|
background-position: -16px 0;
|
||
|
}
|
||
|
|
||
|
.window > .options > .maximize {
|
||
|
background-position: -32px 0;
|
||
|
}
|
||
|
|
||
|
.window > .options > .maximize:hover {
|
||
|
background-position: -48px 0;
|
||
|
}
|
||
|
|
||
|
.window_max > .options > .maximize {
|
||
|
background-position: -64px 0;
|
||
|
}
|
||
|
|
||
|
.window_max > .options > .maximize:hover {
|
||
|
background-position: -80px 0;
|
||
|
}
|
||
|
|
||
|
.window > .options > .close {
|
||
|
background-position: -96px 0;
|
||
|
}
|
||
|
|
||
|
.window > .options > .close:hover {
|
||
|
background-position: -112px 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.appboxes * {
|
||
|
width: 100px;
|
||
|
margin: 2px;
|
||
|
padding: 2px;
|
||
|
border-color: #fff;
|
||
|
border-style: outset;
|
||
|
border-width: 1px;
|
||
|
float: left;
|
||
|
cursor: default;
|
||
|
}
|
||
|
|
||
|
.appboxes .current {
|
||
|
border-style: inset;
|
||
|
}
|
||
|
|
||
|
.appboxes *:hover {
|
||
|
background: #e2fbff;
|
||
|
}
|
||
|
|
||
|
.appboxes .current:hover {
|
||
|
background: #d1ffea;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.clock {
|
||
|
margin: 3px 2px 0 0;
|
||
|
padding: 2px;
|
||
|
border-left: 1px solid #aaa;
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
}
|