lars
d866794bd7
increased vertical size of background pictures for menu plugin icons increased size of background picture for volume pane
567 lines
9.4 KiB
CSS
567 lines
9.4 KiB
CSS
body {
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: verdana, lucida, arial, helvetica, sans-serif;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
div#main_menu {
|
|
width: 130px;
|
|
}
|
|
|
|
div#main {
|
|
background: none;
|
|
padding: 20px;
|
|
margin-left: 140px;
|
|
/* RFC: 'auto' is not a valid value, or? [l] */
|
|
margin-right: auto;
|
|
/* RFC: should we restrict the width? [l] */
|
|
max-width: 700px;
|
|
}
|
|
|
|
#main h1, h2, h3 {
|
|
font-family: sans-serif, arial;
|
|
font-weight: normal;
|
|
letter-spacing: 0.05em;
|
|
color: #acacac;
|
|
font-variant: small-caps;
|
|
padding: 0 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
#main h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
#main h2 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#main h3 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
div#head {
|
|
height: 130px;
|
|
}
|
|
|
|
div#head table {
|
|
width:100%;
|
|
}
|
|
|
|
div#head img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#menu {
|
|
text-align: center;
|
|
border-top: 1px solid #5e5e5e;
|
|
border-bottom: 1px solid #5e5e5e;
|
|
background-color: #ACE149;
|
|
}
|
|
|
|
#menu a:link, #menu a:visited {
|
|
color: #5e5e5e;
|
|
margin: 5px;
|
|
text-decoration: none;
|
|
border: none;
|
|
padding: 4px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#menu a:hover {
|
|
color: #8e8e8e;
|
|
}
|
|
|
|
#words {
|
|
background-image: url(background_frame_top.png);
|
|
background-position: top left;
|
|
background-repeat: no-repeat;
|
|
min-height: 300px;
|
|
padding: 1.1em 0em 1.1em 1.1em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#words h1{
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
#words h2{
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
#words ol, #words ul {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#words ol li {
|
|
padding: 0 1em;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
#words ul li {
|
|
padding: 0 1em;
|
|
line-height: 1.7em;
|
|
list-style-image: url(list.gif);
|
|
}
|
|
|
|
div#footer {
|
|
clear: both;
|
|
text-align: center;
|
|
/* border-top: 1px solid #5e5e5e;
|
|
border-bottom: 1px solid #5e5e5e;
|
|
background-color: #ACE149; */
|
|
background-image: url(footer_line.png);
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
font-size: 0.8em;
|
|
color: #5e5e5e;
|
|
}
|
|
|
|
div#footer a:link, #footer a:visited {
|
|
color: #5e5e5e;
|
|
margin: 5px;
|
|
text-decoration: none;
|
|
border: none;
|
|
padding: 4px;
|
|
}
|
|
|
|
div#footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
#volume_pane table, #volume_pane td {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#volume_pane td.pane_top_left, #volume_pane td.pane_top_right {
|
|
height: 39px;
|
|
width: 10px;
|
|
}
|
|
|
|
#volume_pane td.pane_bottom_left, #volume_pane td.pane_bottom_right {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
#volume_pane td.pane_top_left {
|
|
background-image: url(pane_top_left.png);
|
|
}
|
|
|
|
#volume_pane td.pane_top_right {
|
|
background-image: url(pane_top_right.png);
|
|
}
|
|
|
|
#volume_pane td.pane_bottom_left {
|
|
background-image: url(pane_bottom_left.png);
|
|
}
|
|
|
|
#volume_pane td.pane_bottom_right {
|
|
background-image: url(pane_bottom_right.png);
|
|
}
|
|
|
|
#volume_pane td.pane_left {
|
|
background-image: url(pane_side_left.png);
|
|
}
|
|
|
|
#volume_pane td.pane_bottom {
|
|
background-image: url(pane_side_bottom.png);
|
|
}
|
|
|
|
#volume_pane td.pane_right {
|
|
background-image: url(pane_side_right.png);
|
|
}
|
|
|
|
#volume_pane td.pane_top {
|
|
background-image: url(pane_side_top.png);
|
|
}
|
|
|
|
#volume_pane .volume_plugin_active {
|
|
background-image: url(register_active.png);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 120px;
|
|
}
|
|
|
|
#volume_pane .volume_plugin_passive {
|
|
background-image: url(register_passive.png);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 120px;
|
|
}
|
|
|
|
#words div.unavailable_action {
|
|
border: 1px dashed #808080;
|
|
text-align: center;
|
|
background-color: #f0f0f0;
|
|
padding: 10px;
|
|
margin: 20px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* -------=-=-=- operational messages -=-=-=-------- */
|
|
|
|
#words div.message {
|
|
text-align: left;
|
|
margin: 20px;
|
|
padding: 0 10px 0 0;
|
|
border: 1px solid #bbb;
|
|
color: #5e5e5e;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#words div.message table {
|
|
width: 100%;
|
|
}
|
|
|
|
#words div.message td.text h1 {
|
|
font-size: 1.5em;
|
|
padding: 0px;
|
|
margin: 2px 0 2px 0;
|
|
}
|
|
|
|
#words div.message td.message_symbol img {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 5px 20px 5px 10px;
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#words div.message td.link {
|
|
text-align: right;
|
|
}
|
|
|
|
#words div.message td.link a {
|
|
color: blue;
|
|
font-style: italic;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#words div.message td.link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* -------=-=-=- environmental messages -=-=-=-------- */
|
|
|
|
#EnvironmentWarning div.message {
|
|
text-align: left;
|
|
margin: 2px;
|
|
padding: 0 5px 0 0;
|
|
border: 1px solid #bbb;
|
|
color: #5e5e5e;
|
|
font-size: 0.9em;
|
|
background-color: #eea;
|
|
}
|
|
|
|
#EnvironmentWarning div.message table {
|
|
width: 100%;
|
|
}
|
|
|
|
#EnvironmentWarning div.message td.message_symbol img {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 2px;
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#EnvironmentWarning div.message td.link {
|
|
text-align: right;
|
|
}
|
|
|
|
#EnvironmentWarning div.message td.link a {
|
|
color: #55b;
|
|
font-style: italic;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#EnvironmentWarning div.message td.link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ----------------------=-=-=- Forms -=-=-=--------------------- */
|
|
/* pretty forms and buttons */
|
|
input {
|
|
border: 1px solid #BFBFBF;
|
|
color: #949494;
|
|
background-color: white;
|
|
padding: 2px 5px 1px 5px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
input:hover {
|
|
border: 1px solid #ACE149;
|
|
color: #7DA721;
|
|
background-color: white;
|
|
font-size: 1em;
|
|
}
|
|
|
|
textarea {
|
|
font-family: arial, verdana, helvetica, sans-serif;
|
|
font-size: 1.1em;
|
|
border: 1px solid #BFBFBF;
|
|
color: #949494;
|
|
padding: 2px 5px 1px 5px;
|
|
width: 450px;
|
|
}
|
|
|
|
textarea:hover {
|
|
color: #7DA721;
|
|
background-color: white;
|
|
border: 1px solid #ACE149;
|
|
}
|
|
|
|
button {
|
|
color: #5e5e5e;
|
|
background-color: #ACE149;
|
|
border: 1px solid #5e5e5e;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin: 2px 10px 2px 10px;
|
|
}
|
|
|
|
button:hover {
|
|
color: #5e5e5e;
|
|
background-color: #D0F0A0;
|
|
border: 1px solid #ACE149;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#words form label {
|
|
min-width: 20em;
|
|
}
|
|
|
|
#words form p {
|
|
text-align: center;
|
|
}
|
|
|
|
/* -------------=-=-=- main menu -=-=-=-------------- */
|
|
|
|
#main_menu {
|
|
position: absolute;
|
|
float: left;
|
|
right: 5px;
|
|
left: 5px;
|
|
width: 140px;
|
|
}
|
|
|
|
|
|
/* ------------=-=-=- language selection -=-=-=------------- */
|
|
|
|
div#lang {
|
|
/* position: fixed;
|
|
float: left;
|
|
left: 30px;
|
|
bottom: 10px; */
|
|
text-align: center;
|
|
padding: 5px;
|
|
margin: 10px;
|
|
}
|
|
|
|
div#lang button {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
|
|
/* ------------=-=-=- documentation -=-=-=------------- */
|
|
|
|
#doc ol,ul li {
|
|
text-align: left;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#doc dl dt {
|
|
text-align: left;
|
|
margin-left: 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
#doc h1 {
|
|
padding-top: 25px;
|
|
}
|
|
|
|
#doc h2 {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
#doc h3 {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
|
|
/* -------------=-=-=- plugin icons -=-=-=--------------- */
|
|
|
|
|
|
div.plugin_menu, div.plugin_system, div.plugin_volume, div.volume {
|
|
text-align: center;
|
|
margin: 10px 15px 10px 15px;
|
|
vertical-align: center;
|
|
padding: none;
|
|
}
|
|
|
|
div.plugin_menu a, div.plugin_system a, div.plugin_volume a, div.volume a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* remove underline decoration for '#content a:hover' */
|
|
div.plugin_menu a:hover, div.plugin_system a:hover, div.plugin_volume a:hover, div.volume a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.plugin_menu img, div.plugin_system img, div.plugin_volume img, div.volume img {
|
|
border: none;
|
|
padding: none;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
div.plugin_menu {
|
|
width: 100px;
|
|
min-height: 110px;
|
|
background-position: center;
|
|
border: 1px solid #aaa;
|
|
}
|
|
|
|
div.plugin_menu_passive {
|
|
background-image: url(icon_background_passive_100.png);
|
|
}
|
|
|
|
div.plugin_menu_active {
|
|
background-image: url(icon_background_active_100.png);
|
|
}
|
|
|
|
div.plugin_menu img {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
div.plugin_system {
|
|
float: left;
|
|
width: 64px;
|
|
/* It is necessary to define a unified height - otherwise a strange
|
|
* effect may appear, if the last element of the first line has only a
|
|
* one-lined description (and others have more than one line): the next
|
|
* element will not appear to the left of the next line, but right below
|
|
* the last element of the first line. */
|
|
height: 110px;
|
|
}
|
|
|
|
div.plugin_system img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
div.plugin_volume {
|
|
width: 48px;
|
|
}
|
|
|
|
div.plugin_volume img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
div.volume {
|
|
/* FIXME: float-left breaks the background image in firefox */
|
|
float: left;
|
|
width: 64px;
|
|
}
|
|
|
|
div.volume img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
/* -------------=-=-=- help -=-=-=------------------ */
|
|
|
|
div.help_link {
|
|
text-align: right;
|
|
margin: 20px 10px 10px 10px;
|
|
}
|
|
|
|
div.help_link a {
|
|
text-decoration: none;
|
|
color: #555;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
div.help_link img {
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
border: none;
|
|
}
|
|
|
|
|
|
/* --------------=-=-=- new volume pane -=-=-=----------- */
|
|
|
|
div#volume_area_inner {
|
|
width: 620px;
|
|
/* margin: 13px; */
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-right: 1px solid #ccc;
|
|
border-bottom: 1px solid #ccc;
|
|
background-image: url(volume_property_frame.png);
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
}
|
|
|
|
table#volume_area {
|
|
clear: both;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
table#volume_area td.volume_plugin_active, table#volume_area td.volume_plugin_passive {
|
|
width: 120px;
|
|
height: 40px;
|
|
text-align: left;
|
|
padding: 4px 0 0 10px;
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
}
|
|
|
|
table#volume_area td.volume_plugin_active {
|
|
background-image: url(register_active2.png);
|
|
}
|
|
|
|
table#volume_area td.volume_plugin_passive {
|
|
background-image: url(register_passive2.png);
|
|
}
|
|
|
|
table#volume_area td.volume_plugin_active img, table#volume_area td.volume_plugin_passive img {
|
|
width: 32px;
|
|
height: 32px;
|
|
vertical-align: middle;
|
|
border: 0;
|
|
}
|
|
|
|
div.volume_spacer {
|
|
width: 30px;
|
|
float: left;
|
|
}
|
|
|
|
div#volume_name table {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
div#volume_name td img {
|
|
width: 64px;
|
|
height: 64px;
|
|
padding-right: 30px;
|
|
}
|