body { font: normal 11px/14px arial; margin: 0; padding: 0; color: #333; background-color: #eee; }

#gui { font: normal 11px/14px Arial; }

#gui a { color: SteelBlue ; }
#gui strong { font-weight: bold; }
#gui a:hover { color: #000 ; }
#gui .hidden { display: none; }
#gui div.hr { border-top: 1px solid #bbb; border-bottom: 1px solid #fff; margin: 10px 0; }
#gui div.clearfix { clear: both; }

#gui .window_title { padding: 6px 15px; background: #e1ebeb url(images/gui/title.gif) repeat-x left top; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; }
#gui .window_title h1 { font: bold 12px/17px Arial;  background-position: left center; background-repeat: no-repeat; padding: 0 0 0 22px; }

#gui .panel { background: #eee; border: 1px solid #fff; border-bottom-color: #bbb; border-right-color: #bbb; padding: 10px 15px; }
#gui .panel_blank { background: #fff; border: 1px solid #fff; border-bottom-color: #bbb; border-right-color: #bbb; padding: 10px 15px; }

#gui .window { position: fixed; display: none; top: 20px; left: 20px; width: 300px; }
#gui .window_inner { background: #eee; border: 1px solid #fff; border-bottom-color: #bbb; border-right-color: #bbb; overflow: hidden; }
#gui .window .title { padding: 6px 5px 6px 15px; background: #cdcdcd url(images/gui/gradient_dark.gif) repeat-x top left; border-bottom: 1px solid #bbb; font-weight: bold; cursor: move; }
#gui .window .active { background: #e1ebeb url(images/gui/gradient_highlight.gif); }
#gui .window .content { position: relative; padding: 10px 15px; }
#gui .window .resizer_container { position: absolute; bottom: 2px; right: 2px; cursor: se-resize; }
#gui .window .resizer { height: 16px; width: 16px; background: url(images/gui/window_resizer.gif) no-repeat; }
#gui .window .title_buttons { float: right; }
#gui .window .title_buttons a { float: left; display: block; width: 16px; height: 16px; background-position: center center; background-repeat: no-repeat; border: 1px solid transparent; }
#gui .window .title_buttons a:hover { border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; }
#gui .window .title_buttons a.rollin { background-image: url(images/gui/window_rollin.gif); }
#gui .window .title_buttons a.rollout { background-image: url(images/gui/window_rollout.gif); }
#gui .window .title_buttons a.transparent { background-image: url(images/gui/window_transparent.gif); }
#gui .window .title_buttons a.opaque { background-image: url(images/gui/window_opaque.gif); }
#gui .window .title_buttons a.close { background-image: url(images/gui/window_close.gif); }
#gui .window h1,h2,h3,h4,h5,h6 { font-weight: bold; margin: 15px 0 5px 0; }
#gui .window ul { margin: 15px 0; list-style-type: square; }
#gui .window ul li { margin: 0 0 0 15px; }

#gui .menu { background: #eee; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; }
#gui .menu li { float: left; }
#gui .menu li div.hr { margin: 0; }
#gui .menu li a { display: block; padding: 4px 15px; color: #333; text-decoration: none; background-position: 6px center; background-repeat: no-repeat; }
#gui .menu li ul li a { padding-left: 25px; }
#gui .menu li:hover > a { background-color: #D4DFDF; }
#gui .menu li ul { background: #eee url(images/gui/menu/ul_bg.gif) repeat-y top left; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; }
#gui .menu li > ul { display: none; } /* with this style we prevent flickering at page loading */
#gui .menu li ul li { float: none; padding-left: 21px; }
#gui .menu li:hover div.outerpair1 { left: auto; }
#gui .menu li div.outerpair1 { position: absolute; left: -999em; z-index: 970; }
#gui .menu li ul li a.disabled { color: #999; }
#gui .menu li ul li a.disabled:hover { color: #999; background-color: #eee; cursor: default; }
#gui .menu li ul li.check { background: url(images/gui/menu/check.gif) no-repeat 7px center; }

#gui label { display: block; margin: 0 0 2px 0; }
#gui input[type=text],
#gui textarea { border: 1px solid #fff; border-top: 1px solid #999; border-left: 1px solid #999; padding: 2px 5px; font: normal 11px/14px Arial; color: #333; width: 200px; }
#gui form ul.buttons { list-style-type: none; padding: 0; margin: 0; float: right; }
#gui form ul.buttons li { float: left; margin: 0 0 0 5px; }
#gui form ul.buttons a { display: block; padding: 6px 15px; background: #e1ebeb url(images/gui/gradient_dark.gif) repeat-x left top; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; color: #333; text-decoration: none; }
#gui form ul.buttons a:hover { background: #e1ebeb url(images/gui/gradient_highlight.gif); }

#gui_message { position: fixed; width: 200px; right: 10px; top: -999em; z-index: 970; }
#gui_message .message_inner { padding: 10px 30px; background: url(images/gui/message/bg.png) repeat-y top left; border: 1px solid #D4DFDF; }
#gui_message .spinner { margin: 0 10px 5px 0; text-align: right; }

#gui table {  }
#gui th,td { background: #eee; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; padding: 6px 15px; }
#gui th { background: #cdcdcd url(images/gui/gradient_dark.gif) repeat-x top left; }
#gui td { padding: 2px 5px; vertical-align: top; border: 0; border-bottom: 1px solid #eee; background-color: #fff; border-right: 1px solid #bbb; }
#gui td.static { background: #eee; border: 1px solid #fff; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; text-align: right; }


/* Abweichungen */
#gui td { padding-top: 0; padding-bottom: 0; }
#gui td.left,
#gui td.right { background-color: #eee; font: normal 12px/18px "Courier New"; padding: 0; border: 0; }
#gui td.hover { background-color: #D4DFDF; }
#gui canvas { margin: 0; padding: 0; }

#gui .window_title h1 { background-image: url(images/favicon.png); }

#gui .menu li a.text_columns_right { background-image: url(images/icons/text_padding_left.png); }
#gui .menu li a.text_columns_left { background-image: url(images/icons/text_padding_right.png); }
#gui .menu li a.font { background-image: url(images/icons/font.png); }
#gui .menu li a.pilcrow { background-image: url(images/icons/pilcrow.png); }
#gui .menu li a.exclamation { background-image: url(images/icons/exclamation.png); }
#gui .menu li a.help { background-image: url(images/icons/help.png); }
#gui .menu li a.arrow_refresh { background-image: url(images/icons/arrow_refresh.png); }
#gui .menu li a.comments { background-image: url(images/icons/comments.png); }
#gui .menu li a.spellcheck { background-image: url(images/icons/spellcheck.png); }
#gui .menu li a.world { background-image: url(images/icons/world.png); }
#gui .menu li a.vcard { background-image: url(images/icons/vcard.png); }
#gui .menu li a.shield { background-image: url(images/icons/shield.png); }
#gui .menu li a.lightning { background-image: url(images/icons/lightning.png); }
#gui .menu li a.flag_de { background-image: url(images/flags/de.png); }
#gui .menu li a.flag_gb { background-image: url(images/flags/gb.png); }
#gui .menu li a.doublespace { background-image: url(images/icons/text_doublespace.gif); }

a.imagelink { background-position: left center; background-repeat: no-repeat; padding: 0 0 0 20px; }
a.arrow_refresh { background-image: url(images/icons/arrow_refresh.png); }

#gui .window { width: 400px; }
#gui #navigator { width: 110px; position: fixed; }
#gui #navigator canvas { border: 1px solid #bbb; margin: 0 10px 0 10px; }
#gui #navigator .content { text-align: center; position: relative; }
#gui #navigator_slider { position: absolute; top: 0; left: 0; margin: 10px; width: 80px; border: 1px solid black; background-color: grey; cursor: move; }
#gui #datenschutz .content { height: 400px; overflow: scroll; }

#gui input[type=text],
#gui textarea { width: 340px; }
#gui textarea { height: 60px;  }

#content { font-size: 12px; }
#content h1 { font-size: 20px; line-height: 20px; color: #ccc; font-weight: bold; margin: 30px 0 20px 0; }
#content h2 { font-size: 14px; line-height: 14px; color: #666; font-weight: bold; margin: 30px 0 5px 0; }
#content ul.browsers li { padding: 4px 0 5px 23px; margin: 0 10px 0 0; float: left; }
#content ul.browsers li.firefox { background: url(images/icons/icon_browser_firefox.gif) no-repeat left center; }
#content ul.browsers li.opera { background: url(images/icons/icon_browser_opera.gif) no-repeat left center; }
#content ul.browsers li.safari { background: url(images/icons/icon_browser_safari.gif) no-repeat left center; }
#content ul.browsers li.explorer { background: url(images/icons/icon_browser_explorer.gif) no-repeat left center; }

#ad { width: 728px; margin: 10px auto; padding: 10px; text-align: left; }
#ad img { border: 1px solid #ccc; float: left; margin: 0 10px 0 0; }
#ad h1 { margin: 0 0 7px 0; color: #999; }

.left, .right { width: 50%; }
td.td_border { border-bottom: 1px solid #999 !important; }

.left em,
.right em { background-color: gold; color: #000; padding: 2px 0; }

.left div { background-color: #fff; color: #999; }
.right div { background-color: #fff; }

del { display: block; text-decoration: none; }
.left del { background-color: lightpink; }
.right del { background-color: #eee; }

ins { display: block; text-decoration: none; }
.left ins { background-color: #eee; }
.right ins { background-color: palegreen; }

.left div.change { background-color: #ff9; }
.right div.change { background-color: #ff9; }

.br { font-family: Arial; display: none; color: #99BBE8; font-weight: bold; }

h2 { margin: 0px 0px 10px 0px; }
hr { margin: 20px 0px; border: 0; border-top: 5px solid #999; }

code { display: inline; background-color: transparent; color: #999; visibility: hidden; font-size: 14px; }
strong code { visibility: hidden; }
code.visible { visibility: visible; }
strong.visible code { background-color: Aquamarine; visibility: visible !important; }

.Text_Diff_Op_add .left code { visibility: hidden !important; }
.Text_Diff_Op_delete .right code { visibility: hidden !important; }


/*XXXXXXXXXXXXXXXXXX Dropshadow elements XXXXXXXXXXXXXXX*/
/*http://www.positioniseverything.net/articles/dropshadows.html*/

html>body .outerpair1 { background: url(images/gui/shadows/upperrightfade.png) right top no-repeat; }
/* .outerpair1 must be given a width contraint, via either a width, or by floating or absolute positioning. These are applied from the second class name on the .outerpair1 DIV's. This box also has one of the corner .png's. */

html>body .outerpair2 { background: url(images/gui/shadows/lowerleftfade.png) left bottom no-repeat; padding-top: 8px; padding-left: 8px; }
/* .outerpair2 has padding equal to the shadow thickness, and also has one of the corner .png's */


html>body .shadowbox { background: url(images/gui/shadows/shadow.png) bottom right; }
/* .shadowbox holds the main shadow .png */

html>body .innerbox { position: relative; left: -8px; top: -8px; }
/* .innerbox is made "relative" and is "pulled" up and to the left, by a distance equal to the thickness of the shadow. Because this is a relative-based shift, the box retains its exact dimensions without change. */