/*-------------------------------------------------
    FONTS
  ------------------------------------------------- */

/*-------------------------------------------------

Copyright 2011 Ascender Fonts

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

  ------------------------------------------------- */
	
@font-face {
	font-family: 'Open Sans Regular';
	src: url('../webfonts/OpenSans-Regular/OpenSans-Regular-webfont.eot'); /* IE9 Compat Modes */
	src: url('../webfonts/OpenSans-Regular/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../webfonts/OpenSans-Regular/OpenSans-Regular-webfont.woff') format('woff'), /* Modern Browsers */
		 url('../webfonts/OpenSans-Regular/OpenSans-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../webfonts/OpenSans-Regular/OpenSans-Regular-webfont.svg#OpenSans-Regular-webfont') format('svg'); /* Legacy iOS */
}

@font-face {	
	font-family: 'Open Sans Light';
	src: url('../webfonts/OpenSans-Light/OpenSans-Light-webfont.eot'); /* IE9 Compat Modes */
	src: url('../webfonts/OpenSans-Light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../webfonts/OpenSans-Light/OpenSans-Light-webfont.svg#OpenSans-Light-webfont') format('svg'), /* Legacy iOS */
		 url('../webfonts/OpenSans-Light/OpenSans-Light-webfont.woff') format('woff'), /* Modern Browsers */
		 url('../webfonts/OpenSans-Light/OpenSans-Light-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
}
	
	
/*-------------------------------------------------
    STANDARD-HTML-TAGS
  ------------------------------------------------- */

::-moz-selection {
	background-color: #1496c8;
	color: #fff;
	text-shadow: none;
}

a {
	color: #1496c8;
	font-weight: 600;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

body {
	background-color: #efefef;
	color: #222;
	counter-reset: Bildnummer Fussnotennummer Interaktionsnummer Tabellennummer Videonummer;
	font-family: "Open Sans Light", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
	font-size: 16px;
	height: 100%;
	margin: 10px auto;
}

blockquote {
	font-size: 1.0em;
	font-style: italic;
	margin-left: 15px;
	min-width: 200px; 
	width: 88%;
}

code {
	background-color: transparent;
	color: #222;
	font-size: 1.0em;
}

figure {
	background-color: #eee;
	border-radius: 3px;
	display: inline-block;
	margin: 10px auto 20px;
	padding: 5px;
	text-align: left;
	width: auto !important;
}

figure figcaption {
	font-size: 0.93em;
	line-height: 1.6em;
	padding: 5px 3px 2px 3px;
}

figure figcaption:before {
	content: "Abbildung " counter(Bildnummer) ": ";
	counter-increment: Bildnummer;
}

h1,
h2,
h3 {
	border-bottom: 1px solid #ddd;
	clear: both;
	font-weight: normal;
	line-height: 1.3em;
}

h1 {	
	font-size: 2.2em;
	margin: 15px 0 20px;;
}

h2 {
	display: table;
	font-size: 1.5em;
	margin: 30px 0 15px;
}

h3 {
	display: table;
	font-size: 1.2em;
	margin-bottom: 15px;
}

iframe {
	border: 0;
}

img {
	display: block;
	max-width: 100%;
}

img.prog-icon {
	float: left;
	padding: 7px 15px 0px 0px;
	width: 67px;
}

input[type=button] {
	background: linear-gradient(to bottom, #f7f7f7, #efefef);
	background-color: #ddd;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 0.84em;
	margin: 8px 0;
	padding: 6px 10px;
}

input[type=button]:active{
	background: linear-gradient(to bottom, transparent, transparent);
}

noscript {
	background-color: #f9f2f4;
	border: 2px solid #c7254e;
	border-radius: 5px;
	color: #c7254e;
	display: blocK;
	font-family: "Open Sans Regular", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
	margin: 10px auto;
	padding: 15px 20px;
	width: 700px;
}

ol > li {
	line-height: 2.0em;
	list-style-image: none;
	padding-left: 4px;
}

p {
	letter-spacing: 0.023em;
	line-height: 2.0em;
	margin: 5px 20px 15px 0;
}

ul > li {
	line-height: 2.0em;
	padding-left: 4px;
}



/*-------------------------------------------------
    IDs
  ------------------------------------------------- */

div#breadcrumb {
	background-color: #444;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-shadow: 1px 1px 1px 1px #ddd;
	clear: both;
	color: #ddd;
	font-size: 0.93em;
	font-weight: 400;
	margin: 0 auto;
	max-width: 960px;
	padding: 10px 30px 15px;
}

div#breadcrumb a {
	color: #96d0ff;
	font-weight: 400;
}

div#breadcrumb a:visited {
	color: #96d0ff;
}

div#breadcrumb a:hover {
	color: #ddd;
	font-weight: 400;
	text-decoration: underline;
}

div#colorpad {
	display: inline-block;
	max-width: 750px;
}

div#colorpad + * {
	clear: both;
}

div#colorpad > div {
	border: 1px solid;
	border-color: #ccc;
	border-radius: 3px;
	float: left;
	font-family: "Courier New";
	font-size: 0.8em;
	font-weight: 600;
	margin: 2px;
	padding: 15px;
	vertical-align: bottom;
	width: 120px;
}

div#content {
	background-color: #fcfcfc !important;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 1px #ddd;
	margin: -5px auto 30px;
	max-width: 960px;
	overflow: auto;
	padding: 15px 30px 20px;
}

div#info {
	background-color: #fcfcfc !important;
	border: 1px solid #ddd;
	display: none;
	margin-top: 2px;
	padding: 5px;
	position: absolute;
}

	
/*-------------------------------------------------
    CLASSES
  ------------------------------------------------- */

.center {
	text-align: center;
}

.indent {
	margin-left: 35px !important;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

div.applet {
	display: block;
	max-width: 100%;
}
	
div.box {
	background-color: #f7f7f7;
	border: 2px dashed #ccc;
	border-radius: 3px;
	border-spacing: 30px;
	cursor: default;
	font-size: 1.2em;
	height: 75px;
	line-height: 75px;
	margin-bottom: 10px;
	max-width: 250px;
	text-align: center;
	vertical-align: middle;
}

div.box:hover {
	background-color: #337ab7;
	color: #fcfcfc;
}

div.coloredBox > div.coloredBoxContent {
	background-color: #d9edf7;
	border: 1px solid #7aa9d0;
	border-radius: 4px;
	display: inline-block;
	min-width: 200px;
	padding: 10px 40px 0;
	text-align: left;
}

div.definition {
	background-color: #dff0d8;
	border-bottom: 1px solid #3ea561;
	border-bottom-left-radius: 3px;
	border-left: 1px solid #3ea561;
	border-top: 1px solid #3ea561;
	border-top-left-radius: 3px;
	float: right;
	margin: 20px -30px 30px 0;
	min-width: 230px;
	padding: 15px 30px 15px 25px;
	width: calc(92% + 46px);
}

div.definition + * {
	clear: both;
}

div.definition > p {
	margin-bottom: 15px;
}

div.definition > p:first-child {
	color: #2e7846;
	font-family: "Open Sans Regular", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
	font-size: 1.2em;
	line-height: 1.7em;
	margin-bottom: 13px;
	margin-top: 5px;
}

div.definition > *:last-child {
	margin-bottom: 10px;
}

div.definition > div > ul {
	margin-bottom: 0;
	padding-left: 15px;
}

div.definition > div > ul > li {
	line-height: 1.6em;
	list-style-type: none;
}

div.definition > div > ul > li > code {
	padding-right: 5px;
}

div.example {
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	border-bottom-left-radius: 3px;
	border-left: 5px solid #337ab7;
	border-top: 1px solid #ddd;
	border-top-left-radius: 3px;
	float: right;
	margin: 20px -30px 30px 0;
	min-width: 230px;
	padding: 15px 30px 15px 25px;
	width: calc(92% + 46px);
}

div.example + * {
	clear: both;
}

div.example > p {
	margin-bottom: 0;
	margin-top: 5px;
}

div.example > p:first-child {
	color: #337ab7;
	font-family: "Open Sans Regular", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
	font-size: 1.2em;
	line-height: 1.7em;
	margin-bottom: 13px;
	margin-top: 5px;
}

div.example > *:last-child {
	margin-bottom: 10px;
}

div.footnotes {
	border-top: 1px solid #ccc;
	font-size: 0.8em;
	margin: 30px 0 0;
	padding: 5px 3px;
}

div.footnotes > p {
	margin: 0 3px;
}

div.footnotes > p:before {	
	content: "[" counter(Fussnotennummer) "] ";
	counter-increment: Fussnotennummer;
}

div.footnotes > p > a {
	font-weight: 400;
}

div.hint {
	background-color: #d9edf7;	
	border-bottom: 1px solid #7aa9d0;
	border-bottom-left-radius: 3px;
	border-left: 1px solid #7aa9d0;
	border-top: 1px solid #7aa9d0;
	border-top-left-radius: 3px;
	float: right;
	margin: 20px -30px 30px 0;
	min-width: 230px;
	padding: 15px 30px 15px 25px;
	width: calc(92% + 46px);
}

div.hint + * {
	clear: both;
}

div.hint > p {
	margin-bottom: 15px;
}

div.hint > p:first-child {
	color: #2E6CA3;
	font-family: "Open Sans Regular", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
	font-size: 1.2em;
	line-height: 1.7em;
	margin-bottom: 13px;
	margin-top: 5px;
}

div.hint > *:last-child {
	margin-bottom: 10px;
}

div.hint > div > ul {
	margin-bottom: 0;
	padding-left: 15px;
}

div.hint > div > ul > li {
	line-height: 1.6em;
	list-style-type: none;
}

div.hint > div > ul > li > code {
	padding-right: 5px;
}

div.scaleFrame {
	text-align: center;
}

div.wideLeft {
	margin: 15px -30px 25px 0;
	overflow: auto;
}

p.center {
	margin-right: 0px;
}

p.majorLineHeight {
	line-height: 3.7em;
}

span.bold {
	font-weight: bold;
}

span.fa-external-link-alt {
	padding-right: 3px;
}

span.highlightGreen {
	color: #3ea561;
}

span.underline {
	text-decoration: underline;
}