/****** Standard html tags ******/
p { padding: 2px; }

label {
 font-weight: bold;
 width: 30%;
 float: left;
}

acronym {
 border-bottom: 1px dashed #000;
 cursor: help;
}

select, .input {
 padding: 0;
 display: inline;
 margin: 2px;
}

option, select { overflow: auto; }

select:hover, .input:hover {
 display: inline;
 background: #FFFFE1;
 margin: 2px;
}

fieldset {
 border: 1px solid #CDCDCD;
 padding: 4px;
}

legend { font-weight: bold; padding: 4px;}

/****** Teile der Seite ******/

#mainbody {
 padding: 8px;
 text-align: left;
 width: 98%;
}

#content {
 width: auto;
 margin-left: 200px;
 margin-right: 0;
}

#content_entry { width: 100%; }

#leftside {
 width: 20%;
 max-width: 200px;
 vertical-align: top;
 height: 100%;
 float: left;
}

#tutorial_footer {
 padding-top: 15px;
 clear: both;
}

/****** Kopfteil im Detail ******/

.info2 {
 font-weight: bold;
 padding: 12px;
 width: 700px;
 text-align: left;
 border: 1px solid #CCC;
 color: #636363;
 vertical-align: middle;
 margin-bottom: 10px;
}

.left {
 float: left;
}

.right {
 float: right;
}

/****** Hauptteil im Detail ******/

#incontent {
 float: right;
 width: 98%;
}

.message {
 padding: 4px;
 border: 1px solid #CDCDCD;
}

.message h3 {
 font-size: 14px;
 font-weight: bold ;
 margin: 8px;
 text-align: center;
}

.message h4 {
 font-size: 11px;
 margin: 0;
}

.message img { border: 1px solid #000; }

.hidebox { display: none; }

.menu_upperleft {
 width: 40%;
 max-width: 350px;
 float: left;
 padding-right: 20px;
}

.menu_upperleft ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.menu_uppermiddle {
 width: auto !important;
 width: 40%;
 max-width: 350px;
 float: left;
 padding-right: 20px;
}

.menu_uppermiddle ul {
 list-style: url(../images/todo.png) inside;
 margin: 0;
 padding: 0;
}

.menu_upperright {
 width: auto !important;
 width: 29%;
 max-width: 200px;
 float: right;
}

.menu_upperright ul {
 list-style: inside circle;
 margin: 0;
 padding: 0;
}

/* Boxen mit Rundungen */

div.box h4 {
 font-weight: bold;
 margin: -2px -8px 0 -8px;
 padding-left: 10px;
 padding-bottom: 2px;
 padding-top: 2px;
}

div.box a:link, div.box a:active, div.box a:visited {
 font-weight: bold;
 text-decoration: none;
 padding: 2px;
 background: transparent;
}

div.box {
 background: url(../images/box_tl2.png) 0 0 no-repeat;
 margin: 0;
 padding: 0;
}

div.box div { background: url(../images/box_tr.png) 100% 0 no-repeat; }

div.box div div { background: url(../images/box_bl.png) 0 100% no-repeat; }

div.box div div div {
 background: url(../images/box_br.png) 100% 100% no-repeat;
 padding: 8px;
 width: auto !important;
 width: 100%;
}

div.box div div div div {
 background: inherit;
 padding: 1px;
 margin: 0;
}
*/

/* Boxen ohne Rundungen */
div.box h4 {
 font-weight: bold;
 margin: -2px -8px 0 -8px;
 padding-left: 10px;
 padding-bottom: 2px;
 padding-top: 2px;
}

div.box a:link, div.box a:active, div.box a:visited {
 font-weight: bold;
 text-decoration: none;
 padding: 2px;
 background: transparent;
}

div.box {
 margin-bottom: 10px;
 padding: 0;
}

#box_cats {
 float: left;
 width: 99%;
 min-height: 50px;
}

#box_cats ul { margin: 0; padding: 0;  list-style: disc inside }

#box_cats ul ul { margin: 0 0 0 10px;  padding: 0; list-style: circle inside }

div.box div div div {
 padding: 8px;
 width: auto !important;
 width: 100%;
}

div.box div div div div {
 background: inherit;
 padding: 1px;
 margin: 0;
}

.userright ul {
 padding-left: 6px;
 margin: 3px;
}

.userright li {
 list-style: outside disc;
 text-decoration: none;
}

.userright li:hover {
 list-style: outside circle;
 text-decoration: none;
}

.li {
 background: url(../images/folder_tut.png) no-repeat left;
 text-decoration: none;
 padding-left: 20px;
 cursor: pointer;
 margin: 2px;
}

.li_active {
 background: url(../images/folder_tuta.png) no-repeat left;
 text-decoration: none;
 padding-left: 20px;
 cursor: pointer;
 margin: 2px;
}

.bilder {
 background: #FFF;
 border: 1px solid #CDCDCD;
 padding: 4px;
 float: right;
 margin: 4px;
}

/****** Fussteil ******/

.copyright {
 text-align: center;
 padding: 4px;
 background: #F7F7F7;
 color: #000;
 border: 1px solid #CDCDCD;
 width: 275px;
}

/****** Allgemeine Klassen ******/

.spacer {
 content: "."; 
 display: block; 
 height: 5px; 
 clear: both; 
 visibility: hidden;
}

.clear {
 content: "."; 
 display: block; 
 height: 1px; 
 clear: both; 
 visibility: hidden;
}

.feature {
 float: right;
 margin: 8px;
}

.feature img { cursor: pointer; }

.feature img, .edit_message img, .box img, .panel img, .increate img, .action_button img, .message p img { border: 0 none; }

.detail {
 float: left;
 margin: 8px;
}

.edit_message {
 margin: 8px;
 cursor: pointer;
 float: left;
}

div#del {
 border: 1px solid #000;
 background: #FAFAFA;
 padding: 2px;
 text-align: center;
 display: none;
 z-index: 10;
 width: auto !important;
 width: 220px;
 position: absolute;
 -moz-opacity: 0.8;
 opacity: 0.8;
}

div#pdf {
 border: 1px solid #000;
 background: #FAFAFA;
 padding: 2px;
 text-align: center;
 display: none;
 z-index: 10;
 width: auto !important;
 right: 20px;
 width: 220px;
 position: absolute;
 -moz-opacity: 0.8;
 opacity: 0.8;
}


/****** Anzeigen der Anleitungen und Umwandlung von Quellcode ******/

pre {
 border-top: 1px solid #DDD;
 border-left: 5px solid #DDD;
 border-right: 1px solid #DDD;
 border-bottom: 1px solid #DDD;
 padding: 2px;
 margin: 0;
 color: #006;
 width: 95%;
 overflow: auto;
}
.css .de1, .css .kw2 {font: normal 12px 'Courier New', Courier, monospace; color: #FF00FF; }
.css .kw1 { color: #000099; }
 .css .de2, .html4strict .de1, .html4strict .de2, .javascript .de1, .javascript .de2, .mysql .de1, .mysql .de2, .php .de1, .php .de2, .xml .de1, .xml .de2 
{ font: normal 12px 'Courier New', Courier, monospace; color: #000020; }
.css .imp, .html4strict .imp, .javascript .imp, .mysql .imp, .php .imp, .xml .imp 
{ font-weight: bold; color: #F00; }
.html4strict .kw1, .javascript .kw1, .mysql .kw1, .php .kw1, .xml .kw1 
{ color: #006600; }
.html4strict .kw2, .javascript .kw2, .mysql .kw2, .php .kw2, .xml .kw2 
{ color: #009999; font-weight: bold; }
.css .kw3, .html4strict .kw3, .javascript .kw3, .mysql .kw3, .php .kw3, .xml .kw3 
{ color: #009999; }
.css .kw4, .html4strict .kw4, .javascript .kw4, .mysql .kw4, .php .kw4, .xml .kw4 
{ color: #F63333; }
.css .co1, .css .co2, .css .coMULTI, .html4strict .co1, .html4strict .co2, .html4strict .coMULTI, .javascript .co1, .javascript .co2, .javascript .coMULTI, .mysql .co1, .mysql .co2, .mysql .coMULTI, .php .co1, .php .co2, .php .coMULTI, .xml .co1, .xml .co2, .xml .coMULTI 
{ color: #FF9900; font-style: italic; }
.css .es0, .html4strict .es0, .javascript .es0, .mysql .es0, .php .es0, .xml .es0 
{ color: #009; font-weight: bold; }
.css .br0, .html4strict .br0, .javascript .br0, .mysql .br0, .php .br0, .xml .br0 
{ color: #6C6; }
.css .st0, .html4strict .st0, .javascript .st0, .mysql .st0, .php .st0, .xml .st0 
{ color: #0000FF; }
.css .nu0, .html4strict .nu0, .javascript .nu0, .mysql .nu0, .php .nu0, .xml .nu0 
{ color: #C6C; }
.php .me1, .php .me2{ color: #060; }
.php .re0 { color: #000; }

pre ol{margin-left: 0; padding-left: 30px;}

pre .head { font: bold 13px Helvetica, Arial, sans-serif; background: #F0F0FF; border-bottom: 1px solid #D0D0D0; padding: 2px; }
pre li, pre li { font: normal 12px 'Courier New', Courier, monospace; color: #003030; }
pre li.li2 { font-weight: bold; color: #006060; }
pre .foot { display: none; }
pre a:link { color: #009999; }
pre a:hover { background: #F0F000; }

.comment { text-align: center; }

.comment .date {
 float: right;
 border-bottom: 1px solid #cdcdcd;
 border-left: 1px solid #CDCDCD;
 padding: 4px;
 color: #8A8989;
}

.comment fieldset {
 width: 500px;
 margin: auto auto;
 text-align: left;
 padding: 0;
}

.comment textarea {
 width: 75%;
 height: 150px;
}

/****** Bearbeiten und Erstellen der Anleitungen ******/

em {
 font-style: italic;
}

.create {
 float: left;
 width: 72%;
}

.increate {
 float: right;
 width: 22%;
}

.create textarea {
 border: 1px solid #CDCDCD;
 width: 100%;
}

.buttons {
 text-align: center;
 margin: auto auto;
}

input.button {
 border: 3px double #CDCDCD;
 font-weight: bold;
 padding: 2px;
 background: #FFF;
 margin: 2px;
 cursor: pointer;
 font-size: smaller;
}

input.button:hover { background: #FFFFE1; }

.picbox ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}

.picbox ul li {
 padding: 4px;
 display: block;
 background: #FFF;
 border-top: 1px solid #CDCDCD;
 border-bottom: 1px solid #CDCDCD;
}

.picbox ul li:hover {
 padding: 4px;
 background: #FFFFE1;
 border-top: 1px solid #CDCDCD;
 border-bottom: 1px solid #CDCDCD;
}

.picbox {
 border: 1px solid #CDCDCD;
 background: #FAFAFA;
 text-align: left;
 height: 260px;
 overflow: auto;
 width: 100%;
}

.picbox_preview {
 height: 135px;
 vertical-align: top;
}

.picbox_preview img {
 cursor: pointer;
 border: 1px solid #000;
}

/****** Bilderverwaltung ******/

table .panel {
 width: 100%;
 text-align: center;
 padding: 0;
 margin: 0;
 border: 0 none;
 border-collapse: collapse;
}

.panel .entrys { text-align: left; }

.panel th, th .create {
 font-weight: bold;
 text-decoration: underline;
}

/********** Zusatz ***********/

a.entry_link {
 background: url(../images/link_book.png) no-repeat left;
 padding-left: 23px;
 margin: 2px;
}

a.kat_link {
 background: url(../images/folder_tut.png) no-repeat left;
 padding-left: 18px;
 margin: 2px;
}

a.thread_link {
 background: url(../images/link_thread.png) no-repeat left;
 padding-left: 18px;
 margin: 8px;
}

a.wiki_link {
 background: url(../images/link_wikipedia.png) no-repeat left;
 padding-left: 16px;
 margin: 2px;
}

.wrong { color: #F00; font-weight: bold; text-decoration: none; }
.ok { color: #080; font-weight: bold; }

#cpanel div.icon {
 text-align: center;
 margin-right: 5px;
 float: left;
 margin-bottom: 5px;
}

.newpic { height: 74px; }

.newpic a{
 margin: 4px;
 display: block;
 float: left;
 border: 1px solid #F0F0F0;
 vertical-align: middle;
}

.newpic a:hover {
 border: 1px solid #CCC;
 background: #F9F9F9;
}

/* ### Eigenschaften der Tooltips #######################################  */
.tool-tip {
 background: #FFC;
 border: 1px solid #D4D5AA;
 padding: 5px;
 max-width: 200px;
}

/* IE Fix for correct position */
*html .tool-tip { margin: 75px 0 0 330px; }

.tool-text{
 padding: 0;
 margin: 0;
 font-size: 70%;
 margin-top: -15px;
 padding-top: 15px;
 padding-bottom: 5px;
 background: url(../images/selector-arrow.png) no-repeat;
}