/*General*/
body, textarea, select, button {	
	font-family: Verdana;
	font-size: 12px;
	color: #444;
	margin: 0;
	padding: 0;
	background-color: #bbedd4;
	background-image: linear-gradient(#dff16d 1%, #cfef72 5%, #68e597 100%);
	-webkit-transform: translate3d(0,0,0);
}

h1, h2, h3, h4, h5 {
	margin: 1.5em 0 1em 0;
	line-height: 1.5em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

/* LINKS */
a:link, a:visited {
	color: #366074;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus, a:active {
	color: #6ba1ba;
	text-decoration: underline;
	outline: none;
}

/* Buttons and inputs and button-looking links */

/* reset button padding for FF */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner 
{border:0;padding:0;margin:0;}

.button, .button:visited, .button:link, #cse .gsc-search-button > input.gsc-search-button {
	border-radius: 10px;
	border: 1px solid #aaa;
	padding: 5px;
	background: linear-gradient(to bottom, #ffffff, #b4b4b4) repeat scroll 0 0 #eeeeee;
	outline: none;
}

.button:hover, .button:focus, #cse .gsc-search-button > input.gsc-search-button:focus {
	background: linear-gradient(to bottom, white, #c6c6c6) repeat scroll 0 0 white;
	outline: none;
	text-decoration: none;
}

.button:active, #cse .gsc-search-button > input.gsc-search-button:active {
	background: linear-gradient(to top, #ffffff, #b4b4b4) repeat scroll 0 0 #eeeeee;
	outline: none;
	text-decoration: none;
}

.button img, .button span, a.button {
	vertical-align: middle;
	color: #444;
}


table, td {
	font-size: 12px;
	text-align: justify;
}

.pn-logo, .pn-title, .pn-pagetitle {
	font-weight: bold;
	font-size: 12px;
}

input.pn-button {
	color: #FFFFFF;
	background-color: #1d1dc1;
	font-weight: bold;
}

img {
	border: none;
}

code {
	background-color: #CCCCCC;
	font-family: monospace;
}

d {
	margin: 5px;
	padding: 5px;
	border-spacing: 5px;
	vertical-align: top;
	border: 1px solid #aaa;
}

/* === AREAS === */

/* MENU */

/*Extra styling preparation for smaller devices */
/*Style 'show menu' label button and hide it*/
.showmenu {
		text-decoration: none;
		color: #fff;
		background: #666;
		text-align: center;
		padding: 10px 0;
		display: none;
		text-align: right;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
		position: relative;
}

.showmenu .changeicon.menu {
		display: inline-block;
		height: 25px;
		width: 35px;
		margin-right: 10px;
}

/*Hide checkbox*/
input[type=checkbox]#showmenu {
	display: none;
}

/*Show menu when invisible checkbox is not checked*/
input#showmenu[type=checkbox]:not(:checked) ~ #menu{
	display: block;
}

.changeicon.menu {
	background-image: url("gfx/menu.svg");
}

/*General Styling */
#menu {
	color: #fff;
	position: fixed;
	font-size: 1.4em;
	text-align: left;
	width: 100%;
	background-color: #444;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
	z-index: 500;
}

#menu, #menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	
}

#menu li {
	display:inline-block;
	float: left;
	width: auto;
	position: relative;
}

#menu li a, #menu li span {
	display: block;
	padding: 0 20px 0 15px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background-color: #444;
	text-decoration: none;
}

/*Hover state for dropdown links*/
#menu li:hover ul a:hover, #menu li:hover ul span:hover {
	background-color: #666;
}

#menu li:hover .hidden span, #menu li:hover .hidden a {
	background-color: #555;
}

#menu li .hidden {
	display: none;
	position: absolute;
	white-space: nowrap;
	z-index: 100;
}

#menu li .hidden li {
	display: block;
	float: none;
}

#menu li ul li a {
	width: auto;
	min-width: 100%;
	padding: 0 15px;
}

#menu li span:hover + .hidden, #menu li .hidden:hover {
	display: block;
}

#menu li.menuitem:hover > span {
	background-image: url("gfx/downarrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	cursor: pointer;
	background-color: #555;
}

#menu #logoarea {
	float: left;
	color: white;
	padding-right: 10px;
}

#logoarea #logo {
	padding: 0;
}

#logoarea #logo img {
	float: left;
	margin: 10px;
	display: inline;
}

/*#logoarea #slogan {
	line-height: 30px;
	font-size: 14px;
	display: inline;
	padding: 0;
}*/

/* FEEDS and LANGUAGE SELECTOR */

#menu #feedarea, #menu #langarea {
	float: right;
}

#menu #feeds {
	vertical-align: middle;
	padding: 0 5px;
}

.changeicon.twitter {
	background-image: url("gfx/twitter.svg");
}

#menu .changeicon.rss {
	background-image: url("gfx/rss.svg");
}

#menu .changeicon.devrss {
	background-image: url("gfx/devrss.svg");
}

#menu .changeicon.newsletter {
	background-image: url("gfx/newsletter.svg");
}

#menu .changeicon.en {
	background-image: url("gfx/en.svg");
}

#menu .changeicon.de {
	background-image: url("gfx/de.svg");
}

#menu .changeicon.fr {
	background-image: url("gfx/fr.svg");
}

#menu .changeicon, .articlecont .changeicon {
	display: inline-block;
	padding: 0;
	background-repeat: no-repeat;
	border: 0;
	vertical-align: middle;
	height: 25px;
	width: 35px;
	background-position: 0px 0px;
	background-color: inherit;
	
}

#menu .changeicon:hover, .articlecont .changeicon:hover, span.changeicon.menu:hover {
	background-position: 0px -35px;
}

#menu #langarea span, #menu li#langarea:hover .hidden span  {
	padding: 0 5px;
}

#menu #langarea:hover .hidden a {
	background-color: inherit;
}

/* Picture area at top of page */
#header {
	background-image: url("gfx/bg_pattern_circuit.png");
	background-repeat: repeat-x;
	height: 371px;
	width: 100%;
	background-color: #eeeeee;
	border-bottom: 5px solid #444;
	z-index: 0;
	overflow: hidden;
	position: relative;
}

#header #picturebar {

}

#picturebar #titleimage {
	max-width: 30%;
	position: absolute;
	top: 20%;
	right: 15%;
	max-height: 280px;
}

#picturebar #slogan {
	position: absolute;
	bottom: 0.5em;
	left: 1em;
	font-size: 3em;
	font-weight: bold;
	color: #366074;
	text-align: left;
}

#header #esel {
	top:0px; 
	right: 0px; 
	z-index: 2342; 
	background-image: url("gfx/esel-zu.png");
	background-repeat: no-repeat;
	background-position: right top;
	border:none;
	padding:0;
	margin:0;
	display: none; /*TODO animieren*/
}

#esel ul {
	list-style-type: none;
}

#esel .esellang {
	width: 40%;
	float: left;
	margin: 2%;
}

#esel .eselorgs a {
	display: inline-block;
}

/* MIDDLE AREA */
/* needed to center the sheet while keeping a margin */
#container {
	clear: both;
	padding: 0 50px 20px 50px;
	border-bottom: 5px solid #444;
	z-index: 200;
}

/* the sheet */
#container #middle {
	max-width: 1200px;
	margin: 0 auto;
}

#middle:before,
#middle:after {
	content: '';
	display: table;
}

#middle:after {
	clear: both;
}

#middle #sidebar {
	width: 28%;
	min-width: 200px;
	float: left;
	margin-top: 5em;
}

#sidebar > div {
	margin-bottom: 40px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	overflow: auto;
}

#sidebar > div .sbcontent {
	margin: 1em;
}

#sidebar h3 {
	margin: 0.5em 0 1em 0;
	border-bottom: 4px solid #366074;
	word-wrap: initial;
	clear: both;
	line-height: 1.5em;
	padding-left: 0.5em;
	color: #366074;
}

#sidebar h3 > a:hover {
	text-decoration: none;
}

/* SEARCH AREA, styles for overriding google's css, not loading it does not work */
#sidebar #search {
}

#search form {
	background-color: inherit;
	border: 0;
	text-align: center;
}

.gsc-tabsAreaInvisible,
.gsc-resultsHeader,
.gsc-branding,
.gcsc-branding,
.gsc-url-top,
.gs-watermark,
.gsc-thumbnail-inside,
.gsc-url-bottom {
	display: none;
}

td.gsc-search-button {
	text-align: center;
}

.cse input.gsc-search-button, input.gsc-search-button {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: normal !important;
	height: auto !important;
	min-width: auto !important;
}

.cse .gsc-control-cse::after, .gsc-control-cse::after {
	content: " " !important;
}

.gsc-input > .gsc-input {
	width: 100%;
}

table.gsc-search-box td.gsc-input {
	margin: 0;
}

table.gsc-search-box {
	width: 100%;
}

.gsc-control-cse {
	width: 100%;
	padding: 0 !important;
	border: 0;  
	margin: 10px;
}

img.gs-image {
	max-height: 50px;
	max-width: 50px;
}

.gsc-cursor {
	width: 100%;
	height: 20px;
	text-align: center;
}


.gsc-cursor-page {
	display: inline-block;
	width: 20px;
	height: 20px;
	cursor: pointer;
	text-align: center;
}

.gsc-cursor-current-page { font-weight: bold;}

/* DOWNLOAD */

#sidebar #download > div {
	text-align: center;
}

/* DEVLOG */	
#sidebar #devlog {
	
}

#devlog div {
	font-size: 14px;
	margin-bottom: 1em;
}

#devlog div.scrolltext {
	border-radius: 8px;
	box-shadow: inset 0 0 5px #000000;
	background-color: #333;
	color: white;
	padding: 3%;
	font-size: 12px;
	font-family: monospace;
	word-wrap: break-word;
}

#devlog div.scrolltext a {
	color: white;
	font-weight: bold;
	font-family: Verdana;
}

/* REFERENCE AREA */
#sidebar #reference {
  
}

#sidebar #reference .sbcontent a {
	font-weight: bold;
	line-height: 2em;
}

#sidebar #reference img {
	float: right;
	margin: 0 0 10px 0;
}

/* Contact form */
#sidebar #sendmessage label {
	display: block;
	font-style: italic;
	margin-top: 0.5em;
}

#sidebar #sendmessage textarea {
	background-color: white;
	width: 100%;
	border-radius: 10px;
	border: none;
	box-shadow: inset 0 0 5px #000000;
	background-image: none;
	padding: 5px;
	box-sizing: border-box;
}

#sidebar #sendmessage #captcha input[type="submit"] {
	display: block;
	float: right;
}
/* ARTICLES AREA */

#contents {
	width: 65%;
	min-width: 300px; /*320px - padding for middle container */
	max-width: 900px;
	float: right;
	margin: 0 0 0 20px;
}

#contents .article {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	margin-top: 5em;
}

#contents .articleheader {
	border-bottom: 4px solid #366074;
	border-radius: 10px 10px 0 0;
	background-color: #fff;
	clear: both;
	width: 100%;
	display: table;
}

#contents .articleheader div {
	display: table-cell;
	width: 70px; /* image width + image margin */
	text-align: center;
	vertical-align: middle;
}

#contents .articleheader h3 {
	display: table-cell;
	padding: 10px;
}

.articleheader .articletitlepic {
	display: inline-block;
	max-height: 50px;
	max-width: 50px;
	margin: 10px;
}

.articleheader .articletitle  {
	vertical-align: middle;
	text-decoration: none;
	margin-bottom: 1em;
}

.articleheader .articletitle a:hover {
	text-decoration: none;
} 

.articlecont .pubdate  {
	display: block;
	text-align: right;
	margin: 0 0 1em 0;

}

#contents .articlecont {
	border-radius: 0 0 10px 10px;
	padding: 1% 2% 2% 2%;
	background-color: white;
	overflow: hidden;

	/* Non standard for webkit */
	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#contents #prevnext {
	text-align: center;
	font-weight: bold;
	margin: 1em;
}

/* SPECIAL STYLES FOR ARTICLE CONTENTS */

/*distro lists*/
.picturelinks {
	text-align: center;
}

.picturelinks a {
	display: inline-block;
	min-width: 18%;
}

/*Headings*/
.articlecont h1, .articlecont h2, .articlecont h3, .articlecont h4, .articlecont h5 {
	clear: both;
}

.articlecont h1 img, .articlecont h2 img, .articlecont h3 img, .articlecont h4 img, .articlecont h5 img {
	vertical-align: middle;
	margin: 0.3em;
}

/*Images in text*/
.articlecont img {
	max-width: 80%;
	max-height: 80%;
	margin: 0 2em;
}

.articlecont img.left, .articlecont a.left, .articlecont .video.left, .articlecont figure.left {
	float: left;
	display: block;
}

.articlecont img.right, .articlecont a.right, .articlecont .video.right, .articlecont figure.right {
	float: right;
	display: block;
}

.articlecont img.shadow {
	box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.7);
}


/*Videos in text*/
.articlecont .video {
	text-align: center;
	margin: 0 2em 2em 2em;
	max-width: 100%;
}

/*lists with pictures instead of dots*/
.articlecont ul.listimg li img {
	vertical-align: middle;
	margin: 0.3em;
}

.articlecont ul.listimg {
	list-style-type: none;
	padding-left: 0;
}

/*SPECIAL STYLES FOR DOWNLOAD PAGE*/

.dlcontainer {
	width: 100%;
	overflow: hidden;
}

.cdlitem {
	float: left;
	min-width: 200px;
	max-width: 210px;
	margin: 2%;
}

.cdlitem span, .cdlitem a {
	display: block;
}

span.dldesc {
	font-style: italic;
	display: inline-block;
	padding-left: 5em;
}


/* Styles for Screenshots overview */
.screenshots {
	color: #395267;
}

figure.screenshot {
	display: inline-block;
	text-align: center;
	margin: 1.5%;
	width: 210px;
	vertical-align: top;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	margin-bottom: 20px;
}

figure.screenshot a {
	display: inline-block;
	height: 150px;
	line-height: 150px;
	width: 100%;
	background-color: #eee;
	border-radius: 10px 10px 0 0;
	padding-top: 10px;
	vertical-align: middle;
}

figure.screenshot img {
	display: inline-block;
	line-height: 150px;
}

figure figcaption {
	text-align: center;
	font-style: italic;
	padding: 10px;
}

figure.articleimg figcaption {
	padding: 1em 2em;
}
/* FOOTER */

#footer {
	background-color: #ccc;
	padding: 2%;
}

#footer .footerpart {
	display: inline-block;
	width: 28%;
	padding: 2%;
	vertical-align: top;
}

#footer .footerpart h4 {
	margin-top: 0;
}

#footer .footerpart:nth-child(2) {
	border-right: 2px solid white;
	border-left: 2px solid white;
}

.footerpart.counter {
	text-align: center;
}

#footer #contactinfo {
	display: block;
	float: left;
  
}

#footer #privacy {
	display: block;
	float: right;
	font-weight: bold;
}

#footer #contactinfo ul {
	list-style-type: none;
	padding-left: 0;
}


noscript p {
	display: none;
}

.tableMainBorderBlue {
	font-weight: bold;
	font-size: 12px;
	color: #FFFFFF;
	border: 2px solid #1156d2;
	text-align: left;
	padding:2px;
	background-image: url('gfx/blueTH.png');
	background-position: center;
	background-repeat: repeat-x;
	padding: 0px;
}

.border {
	border: 1px solid #000000;
}


.numberBorder {
	background-color: #caffa6;
	color: #2bd700;
	font-size: 35px;
	font-style: italic;
	font-weight: bolder;
	text-align: center;
	visibility: visible;
	border-style: dashed;
	border-width: 2px;
	border-color: #000000;
	width: 50px;
}

.hint {
	background-color: #ffecec;
	visibility: visible;
	border: 2px groove #FF0000;
	padding: 4px 4px 4px 4px;
}

.tableArticleHeader {
	border: 2px solid #ffa945;
	text-align: left;
	background-color: #ffeb9e;
	padding: 0px;
}

.tableArticleBorder {
	border: 2px solid #ffa945;
}

.gsf {
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
}

.hinweis {
	border: 2px solid #B22;
	padding: 5px;
	background:url('gfx/hinweistransparent.png') top left repeat-x;
	opacity:0.95;
}

.videobox td{
	border: 2px groove #5287BC;
	text-align: left;
	border-collapse: collapse;
	padding : 0.5em;
	background:url('gfx/videoboxtransparent.png') top left repeat-x;
}

.videobox th{
	border-bottom-color : #5287BC;
	border-bottom-style : outset;
	border-bottom-width : 2pt;
	color : #2F4E6C;
	font-variant : small-caps;
	margin-bottom : 1em;
	margin-top : 1em;
	margin-left: 10px;
	font-weight : bold;
}

.articlecont table, table.numbertable {
	clear: both;
	width: 100%;
	min-width: 290px;
	table-layout: fixed;
}

.articlecont table tbody, table.numbertable tbody {
	display: block;
	overflow-x: auto;
}
.numbertable .defaulttable th {
	font-size: 12px;
	text-align: justify;
}

.numbertable th {
	color: #2bd700;
	font-size: 35px;
	font-style: italic;
	font-weight: bolder;
	text-align: center;
	visibility: visible;
	border: 2px groove #a1e673;
	width: 50px;
	background: url('gfx/numbertabletransparent.png') top left repeat-x;
}

.numbertable td{
	background-color: #caffa6;
	border: 2px groove #a1e673;
	text-align: left;
	border-collapse: collapse;
	padding : 0.5em;
}

code {
	background-color: silver;
	font-weight: bold;
}

/*CSS for references*/

.reference {
	clear: both;
	color: #395267;
	width: 90%;
	margin: auto;
	overflow: hidden;
}

.reference .refpic {
	float: left;
	padding-top: 35px;
	width: 25%;
	height: 25%;
	margin: 0 2% 2% 0;
}

.reference .refpic img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	vertical-align: middle;
}

.refhead {
	width: 60%;
	float: left;
	padding-top: 35px;
	padding-left: 20px;
	display: block;
}

.refname {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

a.refaddress, a.refaddress:link, a.refaddress:visited {
	font-size: 14px;
	text-decoration: underline;
	color: #194d71;
	padding-bottom: 20px;
	display: block;
}

a.refaddress:hover, a.refaddress:active {
	color: #2a83c0;
}

.reference .question {
	font-weight: bold;
}
.reference .answer { 
	font-size: 14px;
	font-style: italic;
	line-height: 1.45;
	margin: 20px;
}

div.hr {
	clear: both;
	margin-top: 55px;
	margin-bottom:20px;
}

div.hr hr {
	width: 80%;
	border: 4px;
	border-style: double;
	border-left: none;
	border-right: none;
	border-bottom: none;
	border-color:#2778ae;
}

.note {
	font-size: smaller;
	font-style: italic;
}

/* SMALLER DEVICES */

/*320px minimal*/

@media screen and (max-width : 760px){
  
	/* MENU for smaller devices */
	/*Display 'show menu' link*/
	.showmenu {
		display: block;
		cursor: pointer;
	}

	/*Hide menu when invisible checkbox is checked*/
	input#showmenu[type=checkbox]:checked ~ #menu{
	display: none;
}
	
/*Make dropdown links appear inline*/
	ul#menu {
		position: static;
	}

	#menu ul.hidden {
		position: static;
		display: none;
		width: 100%;
	}
	/*Create vertical spacing*/
	#menu li, #menu li.menuitem span {
		border-bottom: 1px solid white;
	}
	/*Make all menu links full width*/
	#menu li, #menu li ul li a, #menu li#logoarea {
		width: 100%;
		text-align: center;
		padding: 0;
	}
	
	#menu li a, #menu li a#logo {
		width: 90%;
		padding: 5%;
	}
	
	/*MIDDLE for smaller devices*/
	#container {
	padding: 0 10px 20px 10px;
	border-bottom: 5px solid #444;
	}
	
	#middle #contents, #middle #sidebar {
		width: 100%;
		margin: 40px 0 0 0;
	}
}