body { text-align: center; margin: 0; padding: 0; font-family: verdana, lucida, arial, helvetica, sans-serif; } a, a:hover, a:link, a:visited { text-decoration: none; color: #515151; } img { border:none; } div#main { text-align: left; background: none; padding: 20px; margin-left: 140px; } #main h1, h2, h3, legend { 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, legend { font-size: 1.2em; } div#head table { width: 100%; } div#head div.logo { text-align: right; margin: 0 0 20px 0; } #words { min-height: 260px; padding: 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; 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; } /* -------=-=-=- 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 { /* without this width, the link will start immeadiately after * the message - this would be quite ugly * of course: IE breaks is a bit, as 100% are relative to the whole * screen again - but the problem is just a missing right border of * the environment warning box - hard to notice */ 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: #87ae3c; font-weight: 600; 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: 0 2px 8px 2px; padding: 0 5px 0 0; border: 1px solid #bbb; color: #5e5e5e; font-size: 0.9em; background-color: #eea; } #EnvironmentWarning div.message table { /* without this width, the link will start immeadiately after * the message - this would be quite ugly * of course: IE breaks is a bit, as 100% are relative to the whole * screen again - but the problem is just a missing right border of * the environment warning box - hard to notice */ 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 -=-=-=-------------- */ div#main_menu { position: absolute; float: left; right: 5px; left: 5px; width: 130px; } /* ------------=-=-=- 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 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_orange_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; } div.help_link a { color: #555; font-size: 0.9em; } div.help_link img { width: 24px; height: 24px; vertical-align: middle; border: none; } div.help_text { font-family: sans-serif, helvetica, sans-serif; background-color: #b8f0ff; border-color: #2EB8BC; border-width: 1px; border-style: solid; padding: 4px; margin: 3px 0 3px 0; } /* --------------=-=-=- new volume pane -=-=-=----------- */ div#volume_content { padding: 20px; border: 1px solid #ccc; background-image: url(volume_property_frame.png); background-repeat: no-repeat; background-position: top left; } fieldset { margin: 10px 0 10px 0; padding: 3%; } 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 { height: 40px; text-align: left; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4px 10px 0 10px; background-repeat: no-repeat; background-position: top left; } table#volume_area td.volume_plugin_active { background-image: url(register_active3.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; } a.disk_symbol img { margin-left: 20px; width: 64px; height: 64px; } table#pane { border: none; border-collapse: collapse; /* mozilla interpretes this relatively to the content part of the page * the internet explorer uses it as absolute within the whole page * 80% should be a good compromise to avoid scrollbars for 1024x768 in ie * and to get a constant page width - otherwise it would dynamically change */ width: 80%; } td#pane_left_top { width: 6px; height: 6px; background-image: url(backpane_left_top.gif); background-position: left top; background-repeat: no-repeat; } td#pane_top { height: 6px; background-image: url(backpane_top.png); background-position: top; background-repeat: repeat-x; } td#pane_right_top { width: 6px; height: 6px; background-image: url(backpane_right_top.gif); background-position: right top; background-repeat: no-repeat; } td#pane_left { width: 6px; background-image: url(backpane_left.png); background-position: left top; background-repeat: no-repeat; } td#pane_content { padding: 0 1% 1% 1%; } td#pane_right { width: 6px; background-image: url(backpane_right.png); background-position: right top; background-repeat: no-repeat; }