html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li, input, fieldset {
	margin: 0;
	 padding: 0;
	 border: 0;
	 outline: 0;
}


/*                   Global
/*==================================================================*/
html, body {
	background-color: #fff;
	color: #000;
	height: 100%;
	font-size: 14px; 
	font-weight: 400;
	font-family: Roboto, sans-serif;
}

.clearfix:after {
	content: " "; 
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}
/*_____________________fonts____________________________________*/
@font-face { font-family: Roboto_black; src: url('../fonts/Roboto-Black.ttf');}
@font-face { font-family: Roboto_black; font-style: italic; src: url('../fonts/Roboto-BlackItalic.ttf');}
@font-face { font-family: Roboto_bold; font-weight: bold; src: url('../fonts/Roboto-Bold.ttf');}
@font-face { font-family: Roboto_boldItalic; font-style: italic; font-weight: bold; src: url('../fonts/Roboto-BoldItalic.ttf');}
@font-face { font-family: Roboto_italic; font-style: italic; src: url('../fonts/Roboto-Italic.ttf');}
@font-face { font-family: Roboto_light; src: url('../fonts/Roboto-Light.ttf');}
@font-face { font-family: Roboto_lightItalic; font-style: italic; src: url('../fonts/Roboto-LightItalic.ttf');}
@font-face { font-family: Roboto_medium; src: url('../fonts/Roboto-Medium.ttf');}
@font-face { font-family: Roboto_mediumItalic; font-style: italic; src: url('../fonts/Roboto-MediumItalic.ttf');}
@font-face { font-family: Roboto; src: url('../fonts/Roboto-Regular.ttf');}
@font-face { font-family: Roboto_thin; src: url('../fonts/Roboto-Thin.ttf');}
@font-face { font-family: Roboto_thin; font-style: italic; src: url('../fonts/Roboto-ThinItalic.ttf');}


/*                                                                   */
/*               BPB /geschichte_im_fluss_rhein                      */
/*                                                                   */
/*___________________________________________________________________*/

.content-wrapper {
	width: 1120px;
	margin: 0 auto;
}


/*____________time-line________________*/

.time-line {
	height: 90px;
	margin: 0 0 10px 0; 
}
.time-line .label {
	visibility: hidden;
}

.ui-widget-content {
	position: relative;
	display: block;
	height: 5px;
	background-color: #eee;
}

.ui-slider .ui-slider-handle {
	top: -19px;
	margin-left: -20px;
	position: absolute;
	z-index: 2;
	display: block;
	width: 41px;
	height: 41px;
	border-radius: 50%;
	background-color: #000;
}

.ui-slider {
	width: 97%;
	margin: 0 auto;
}
.ui-slider-labels {
	position: relative;
	margin-top: 60px; 
} 
.ui-slider-label-ticks {
	position: absolute;
	top: -50px;
	text-align: center;
}
.ui-slider-label-ticks a {
	font-family: Roboto_light;
	font-size: 21px;
	cursor: pointer;
}
/*--------------------maps-------------------------*/
.map-wrapper {
	float: left;
	display: block;
	width: 59.3%;
	margin: 10px;
	position: relative;
}

.map-heading {
	display: none;
}

.map-body {
	position: relative;
	margin: 0;
	margin-top: 17px;
}
.map-wrapper .maplabel {
	font-family: Roboto_light;
	font-size: 41px;
}
.map-body img {
	position: absolute;
	left: 0;
	opacity: 0;
	width: 100%;
}
/*base gives size to the parent element*/
.map-body .mapbase {
	position: relative;
	width: 673px;
	height: 673px;
	z-index: -1;
}
.map-body .active {
	opacity: 1;

}


/*------------------article-----------------------*/
.article-wrapper {
	position: relative;
	display: block;
	float: right;
	vertical-align: top;    
	width: 36.4%;
	margin: 0 0 0 20px;
}
/* .article-wrapper span {
	position: relative;
	display: block;
	opacity: 0;
	height: 600px;
} */
.article {
	display: none;
	white-space: pre-line;
}
.article h3 {
	font-family: Roboto;
	font-size: 21px;
	font-weight: 400;
}
.article .content {
	font-family: sans-serif;
	line-height: 25px;
	padding-right: 15px;
	overflow: auto;
}
.article.active {
	display: block;
}

.article a {
	color: #000;
}

/*----------------content height------------------*/

/* .article-rhein843 .content {
	height: 420px;
}

.article-rhein1648 .content {
	height: 260px;
}

.article-rhein1789 .content {
	height: 288px;
}

.article-rhein1808 .content {
	height: 330px;
}

.article-rhein1815-1866 .content {
	height: 335px;
}

.article-rhein1871-1918 .content {
	height: 350px;
}

.article-rhein1918-1933 .content {
	height: 390px;
}

.article-rhein1945 .content {
	height: 395px;
} */


/*------------------legend------------------------*/
.legend {
	display: block;
	width: 100%;
	height: 350px;
	border-top: 2px solid #e8e8e8;
	margin: 15px auto;
	padding: 10px 0 0 10px;
	box-sizing: border-box;
	font-family: Roboto_italic;
	font-style: italic;
	white-space: initial;
}
.legend div {
	position: relative;
	z-index: 999;
	margin-bottom: 11px;
}
.legend div div {
	margin-right: 10px;
}
.legend .land, .border {
	display: inline-block;
	vertical-align: middle;
	height: 20px;
	width: 36px;
	margin-top: 5px;
	margin-bottom: 5px; 
}

.legend .location {
	display: inline-block;
	vertical-align: middle;
	height: 10px;
	width: 10px;
	margin: 0 18px 0 15px;
	border-radius: 50%;
}

.legend p {
	display: inline-block;
	margin-right: 20px;
	height: 20px;
	width: 36px;
}

/*Der Rhein 843*/
.legend843 .landtype1 {
	background-color: #ffe1b6;
}
.legend843 .landtype2 {
	background-color: #d1e39b;
}
.legend843 .landtype3 {
	background-color: #ebf797;
}
.legend843 .location {
	background-color: #231f20;
}
.legend843 .bordertype1 {
	height: 5px;
	border-top: 2px dotted #636466;
}

/*Der Rhein 1648*/

.legend1648 .landtype1 {
	background-color: #ea7f98;
}
.legend1648 .landtype2 {
	background-color: #ccc9e5;
}
.legend1648 .landtype3 {
	background-color: #ccecfc;
}
.legend1648 .landtype4 {
	background-color: #c1f291;
}
.legend1648 .landtype5 {
	background-color: #9bd3ae;
}
.legend1648 .landtype6 {
	background-color: #d7b4af;
}
.legend1648 .landtype7 {
	background-color: #e8e872;
}
.legend1648 .location {
	background-color: #231f20;
}
.legend1648 .bordertype1 {
	height: 5px;
	border-top: 2px dashed #dddddd;
}

/*Der Rhein 1789*/

.legend1789 .landtype1 {
	background-color: #efdfc9;
}
.legend1789 .landtype2 {
	background-color: #ea7e97;
}
.legend1789 .landtype3 {
	background-color: #ccc8e4;
}
.legend1789 .landtype4 {
	background-color: #ccecfc;
}
.legend1789 .landtype5 {
	background-color: #9bd3ae;
}
.legend1789 .landtype6 {
	background-color: #d7b4af;
}
.legend1789 .landtype7 {
	background-color: #e9ed9a;
}
.legend1789 .bordertype1 {
	height: 5px;
	border-top: 2px dashed #d1d1d1;
}

/*Der Rhein 1808*/
.legend1808 .bordertype1 {
	height: 5px;
	border-top: 2px dashed #d1d1d1;
}
.legend1808 .landtype1 {
	background-color: #f0e0ca;
}
.legend1808 .landtype2 {
	background-color: #edbbb7;
}
.legend1808 .landtype3 {
	background-color: #c1f291;
}
.legend1808 .landtype4 {
	background-color: #b79e92;
}
.legend1808 .landtype5 {
	background-color: #9bd3ae;
}
.legend1808 .landtype6 {
	background-color: #ebf797;
}

/*Der Rhein 1815–1866*/
.legend1815-66 .bordertype1 {
	height: 5px;
	border-top: 2px dashed #d1d1d1;
}
.legend1815-66 .bordertype2 {
	height: 5px;
	border-top: 2px solid #d1d1d1;
}
.legend1815-66 .landtype1 {
	background-color: #bbe7f9;
}
.legend1815-66 .landtype2 {
	background-color: #c1f291;
}

.legend1815-66 .landtype3 {
	background-color: #d7b4af;
}

.legend1815-66 .landtype4 {
	background-color: #ebf797;
}

.legend1815-66 .landtype5 {
	background-color: #9bd3ae;
}

/*Der Rhein 1871–1918*/
.legend1871-18 .landtype1 {
	background-color: #ccecfc;
}
.legend1871-18 .landtype2 {
	background-color: #b79e92;
}
.legend1871-18 .landtype3 {
	background-color: #ebf797;
}
.legend1871-18 .landtype4 {
	background-color: #f9c0c7;
}
.legend1871-18 .landtype5 {
	background-color: #9bd3ae;
}
.legend1871-18 .bordertype1 {
	height: 5px;
	border-top: 2px dashed #d1d1d1;
}
/* Der Rhein 1918–1933*/
.legend1918-33 .landtype1 {
	background-color: #c6c6c6;
}
.legend1918-33 .landtype2 {
	background: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 8px,
		#ffdbb0 5px,
		#ffdbb0 13px
	 );
	background-image: url('/media/image/stripes_blue.png');
}
.legend1918-33 .landtype3 {
	 background: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 4px,
		#000 1px,
		#000 5px
	 );
	 background-image: url('/media/image/stripes_black.jpg');
}
.legend1918-33 .landtype4 {
	background-color: #77d6e0;
}
.legend1918-33 .bordertype1 {
	height: 5px;
	border-top: 2px dotted #ed1c24;
}
/*Der Rhein  ab 1945*/

.legend1945 .bordertype1 {
	height: 5px;
	border-top: 2px dotted #ed1c24;
}
.legend1945 .amer {
	background-color: #f8f288;
}
.legend1945 .brit {
	background-color: #dff86a;
}
.legend1945 .franz {
	background-color: #b0f477;
}
.legend1945 .landtype2 {
	background-color: #8c8c8c;
}
.legend1945 .landtype3 {
	background-color: #e6ea94;
}
/*-------------scrollbar-------------------------*/

/*see the global.js file for the scrollbar call styling */

/*------------------copyright--------------------*/

.copyright {
	color: #7f7f7f;
	font-size: 12px;
	padding: 10px;
	position: absolute;
	top: 71%;
}

.copyright a {
	color: #7f7f7f;
}

.copyright img {
	display: block;
	margin-top: 10px;
}