/* special sections by id */

#canvas {
	background-repeat: no-repeat;
	top: 0;
	width: 768px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: none;
	font-family: "Helvetica", sans-serif;
	z-index: 9;
}

#headerouterbg {
	top: 0;
	left: 0;
	height: 88pt;
	padding-top: 2px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;

	background: -webkit-gradient(linear, left top, left bottom, from(rgb(200, 200, 200)), to(white));
	background: -moz-linear-gradient(top, rgb(200, 200, 200), white);
	/*
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 113, 37)), to(white));
	background: -moz-linear-gradient(top, rgb(60, 113, 37), white);
	*/
}

#headerbg {
	height: 87pt;
	padding: 0;
	border-top: 1px solid rgb(150, 150, 150);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(120, 120, 120)),color-stop(15%, rgb(80, 80, 80)),  color-stop(40%, rgb(80, 80, 80)), color-stop(80%, rgb(220, 220, 220)), to(white));
	background: -moz-linear-gradient(top, rgb(120, 120, 120), rgb(80, 80, 80) 15%, rgb(80, 80, 80) 40%, rgb(220, 220, 220) 80%, white);
}

#header {
	top: 0;
	left: 0;
	height: 60pt;
	padding: 0;
	margin: 0;
	background: none;
	z-index: 3;
}

#header .homelink div {
	float: left;
	width: 324px;
	height: 34px;
	margin: 25px 20px;
	background-image: url(graphics/harmless-cocoa.png);
	background-repeat: no-repeat;
}

#header img {
	float: right;
	margin-right: 20px;
	margin-top: 5px;
}

#top-menu {
	margin: 0;
	height: 20pt;
	width: 100%;
	/* background-color: rgba(255, 255, 255, 0.7); */
	background-image: url(graphics/white-40.png);
	padding-top: 7pt;
	padding-left: 20pt;
	padding-right: 20pt;
	/* border: 1px solid blue; */
	/* border-right: 1px solid gray; */
	border: none;
}

span.menuitem {
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 2px;
	border: 1px solid rgb(150, 150, 150);
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(150, 150, 150)), color-stop(15%, rgb(120, 120, 120)),  color-stop(60%, rgb(90, 90, 90)), color-stop(95%, rgb(220, 220, 220)), to(rgb(230, 230, 230)));
	background: -moz-linear-gradient(top, rgb(150, 150, 150), rgb(120, 120, 120) 15%, rgb(90, 90, 90) 60%, rgb(220, 220, 220) 90%, rgb(230, 230, 230));
	font-weight: bold;
	text-shadow: 0 1px rgb(100, 100, 100);
	color: white;
}

a.menuitem {
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 2px;
	color: black;
	text-decoration: none;
	border: none;
}

a.menuitem:link {
	color: black;
	text-decoration: none;
	border: none;
}

a.menuitem:visited {
	color: black;
	text-decoration: none;
	border: none;
}

a.menuitem:hover {
	/* background-color: rgba(50, 255, 0, 0.2); */
	/*border: 1px solid rgb(180, 180, 180); */
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	/* background-color: rgba(50, 255, 0, 0.2); */
	/* background-image: url(graphics/50-255-0-20.png); */
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 160, 160)),color-stop(15%, rgb(180, 180, 180)),  color-stop(80%, rgb(200, 200, 200)), to(rgb(220, 220, 220)));
	background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(180, 180, 180) 15%, rgb(200, 200, 200) 80%, rgb(220, 220, 220));
}

a.menuitem:active {
	color: white;
	background-color: rgb(50, 50, 50);
}


#footer {
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 12.5em;
	margin: 0;
	padding: 3em 2em 1em 1em;
	font-family: "Lucida Grande", sans-serif;
	font-size: 0.9em;
	background-image: url(images/verlauf-unten2.png);
	/* border: 1px solid red; */
	z-index: 2;
}

#footer a {
	border: none;
	margin: 0;
}

#footer p {
	margin-top: 0.5em;
	margin-bottom: 0.3em;
}

.comment-news {
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}

.comment-classes {
	float: right;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	padding-right: 2em;
}

.content {
	line-height: 1.4em;
	margin-top: 0;
	/* background-color: rgba(255, 255, 255, 0.4); */
	background-image: url(graphics/white-40.png);
	/* border: 1px solid rgba(0, 0, 0, 0); */
	border: 1px solid transparent;
	/* border: 1px solid red; */
	z-index: 9;
}

.content div.section {
	margin-left: 20pt;
	margin-right: 20pt;
	margin-top: 15pt;
	margin-bottom: 2em;
}

.content h1 {
	font-size: 1em;
	font-weight: bold;
	vertical-align: middle;
	color: rgb(40, 40, 40);
	text-decoration: none;
	margin: 1em 0 0 0;
}

.content p {
	margin: 0.5em 0 0.5em 0;
}

.content span.comment {
	color: rgb(70,70,70);
}

.content strong {
	font-style: normal;
	font-weight: bold;
	color: rgb(40, 40, 40);
}

#preface {
	/* border: 1px solid green; */
	padding-left: 10pt;
	padding-right: 10pt;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	background-color: rgb(240, 240, 240);
	border: 1px solid rgb(220, 220, 220);
}

#news {
	/* border: 1px solid green; */
}

#news dl {
	margin-bottom: 10pt;
	padding: 3pt;
	padding-left: 8pt;
	word-wrap: break-word;
	background-color: rgb(97%, 97%, 97%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom: 1px solid rgb(200, 200, 200);
	-webkit-box-shadow: 0 2px 3px rgb(180, 180, 180);
	-moz-box-shadow: 0 2px 3px rgb(180, 180, 180);
}

#news dt {
	padding-top: 0.5em;
	font-weight: bold;
}

#news dd {
	margin-top: 0.5em;
	margin-left: 0.5em;
	margin-bottom: 15pt;
}

#apps {
	/* border: 1px solid green; */
}

#apps img.dt {
	float: left;
	margin: 0 8px;
	width: 32px;
	height: 32px;
}

#apps dl {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	padding: 0.3em;
	background-color: rgb(245, 245, 245);
	background-image: none;
	border-right: 1px solid rgb(170, 170, 180);
	border-bottom: 1px solid rgb(140, 140, 150);
}

#apps dt {
	font-weight: bold;
	vertical-align: middle;
	color: rgb(40, 40, 40);
}

#apps dd {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 64px;
}

#classes {
	/* border: 1px solid green; */
}

#classes img.dt {
	float: left;
	margin: 0 8px;
	width: 32px;
	height: 32px;
}

#classes dl {
	padding: 0.3em;
	padding-right: 2em;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgb(245, 245, 245)));
	background: -moz-linear-gradient(top, white, rgb(245, 245, 245));
}

#classes dt {
	font-weight: bold;
	color: rgb(40, 40, 40);
}

#classes dd {
	margin-top: 5pt;
	margin-bottom: 5pt;
	margin-left: 48px;
	padding-bottom: 5pt;
	/* border-bottom: 3pt solid rgba(70, 200, 20, 0.2); */
	border: none;
}

/*
dd div.code-divider {
	margin: 0;
	padding: 0;
	border: 0;
	height: 1pt;
	border-bottom: 1px solid lightgray;
}
*/
#knowhow dl {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	padding: 0.3em;
	background-image: none;
}

#knowhow dt {
	font-weight: bold;
	vertical-align: middle;
	color: rgb(40, 40, 40);
}

#knowhow dd {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0;
}

#links dl {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	padding: 0.3em;
	background-color: rgb(245, 245, 245);
	background-image: none;
	border-right: 1px solid rgb(170, 170, 180);
	border-bottom: 1px solid rgb(140, 140, 150);
}

#links dd {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0;
}

#badges {
	margin-top: -20pt;
	width: 100%;
	right: 0;
}

#badges a {
	float: right;
	padding-left: 8px;
	border: none;
}

#badges img {
	border: none;
}

/* common tags */

body {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	background-color: white;
	font-size: 10.5pt;
}

a:link {
	color: black;
	text-decoration: none;
	border-bottom: 1px dashed black;
}

a:visited {
	color: rgb(50, 50, 50);
	text-decoration: none;
	border-bottom: 1px dashed black;
}

a:hover {
	color: black;
	background-color: rgb(220, 220, 220);
	text-decoration: none;
	border-bottom: 1px dashed black;
}

a:active {
	color: rgb(50, 255, 0);
	background-color: rgb(50, 50, 50);
	background-image: none;
	text-decoration: none;
	border: none;
}

img.header {
}

.divider {
	display: block;
	margin: 40px auto 0 auto;
	height: 1px;
	border-top: 1px solid lightgray;
}

span.smiley {
	font-size: 1.3em;
}

pre {
	font-family: courier, monospace;
}

span.code {
	font-family: courier, monospace;
}

cite {
	display: block;
	margin: 0;
	padding: 0.2em;
	background-color: rgb(230, 230, 230);
}

.floatleft {
	float: left;
	margin: 0.5em;
}

.floatright {
	float: right;
	margin: 0.5em;
}

a.dl {
	float: right;
	margin-top: -3pt;
	margin-left: 10px;
	width: 95px;
	height: 22px;
	border: none;
	background-image: url(graphics/download-now.png);
}

a.dl:active {
	background-color: transparent;
	background-image: url(graphics/download-now-active.png);
}

p.dl {
	text-align: right;
}

p.note {
	padding: 0.5em;
	background-color: rgb(230, 240, 250);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

form.mail {
	display: inline;
}

div.inline {
	display: inline;
}

.hidden {
	display: none;
}