/*
We highly recommend you use SASS and write your custom styles in sass/_custom.scss.
However, this blank file is available if you prefer
*/
#container{
	background: url("../img/bg_rauschen.png");
}


.shaded{
	background: rgba(112,112,112,0.8);
	height: 240px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.2) inset !important;
}

.content{
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
}

.content-main{
	padding: 16px 26px !important;
	min-height: 300px;;
}

.submenu{
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
}

.submenu .submenu-head{
	background:-moz-radial-gradient(center, #003344, #001922); /* Firefox */
	background:-webkit-radial-gradient(center, #003344, #001922); /* Safari, Chrome */
	background:-o-radial-gradient(center, #003344, #001922); /* Opera */
	background:-ms-radial-gradient(center, #003344, #001922); /* IE */
	background:radial-gradient(center, #003344, #001922); /* W3C Standard */
	color: #fff;
}

.submenu .extra-sub-head{
	background:-moz-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Firefox */
	background:-webkit-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Safari, Chrome */
	background:-o-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Opera */
	background:-ms-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* IE */
	background:radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* W3C Standard */
}

.submenu ul li{
	border-bottom: 1px solid #e4e4e4;
}

.submenu ul li a{
	padding: 0px 8px;
}

.submenu .submenu-head h5{
	color: #fff;
	padding-left: 16px;
}

.boxi{
	background: #fff;
	border-radius: 0px 0px 4px 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	height: 280px !important;
	overflow: hidden;
}

.start-box{
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
}

.add-box{
	height: 298px;
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	background: url("../img/cc_banner.jpg") 50% -15px no-repeat #fff;
}

.add-box .space{
	height: 228px;
	width: 100%;
}

.add-box .content{
	height: 80px;
	width: 100%;
	background: #fff;
	padding: 20px;
	text-align: right;
	border-radius: 0px !important;
}

.sb-logo{
	background: #82786c;
	width:100%;
	height: 84px; 
	background:-moz-radial-gradient(center, #003344, #001922); /* Firefox */
	background:-webkit-radial-gradient(center, #003344, #001922); /* Safari, Chrome */
	background:-o-radial-gradient(center, #003344, #001922); /* Opera */
	background:-ms-radial-gradient(center, #003344, #001922); /* IE */
	background:radial-gradient(center, #003344, #001922); /* W3C Standard */
	text-align: center;
}

.extra-cat{
	background:-moz-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Firefox */
	background:-webkit-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Safari, Chrome */
	background:-o-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* Opera */
	background:-ms-radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* IE */
	background:radial-gradient(center, #e4e5e6, #c4c4c4) !important; /* W3C Standard */
}

.sb-logo img{
	margin-top: 9px;
}

.start-box .sb-logo.struktur{background-image: url("../img/icons/stilistik.png");}

.sb-arrow-down{
	width: 0; 
	height: 0; 
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	
	border-top: 16px solid #001922;
	margin-left: 16px;
	
}

.extra-arrow-down{
	width: 0; 
	height: 0; 
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	
	border-top: 16px solid #c4c4c4;
	margin-left: 16px;
	
}

.start-box .sb-content{
    line-height: 1.5em;
    padding: 0 16px 16px;
	height: 166px;
}

.start-box .sb-link{
	border-top: 1px solid #e4e4e4;
	padding: 8px 16px;
}

.start-box .sb-link a{color: #ababab;}
.start-box .sb-link a:hover{color: #005d7c;}

.main-content{
	padding: 16px;
}

.footer{
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	background: #004860;
	padding: 30px 20px 30px;
	padding: 30px 20px 30px;
	border-top: 1px solid #fff;
	color: #fff;
	margin-top: 40px;
    bottom:0px;
    width: 100%;
	font-size: 95%;
}

.footer_menu li{
	float:left;
	margin-right: 7px;
}

.footer_menu li a{
	color: #ffffff;
	font-weight: 700;
}

.footer_menu li .sub-menu{
	margin: 0 !important;
	padding: 0px 0px 0px 0px  !important;
	
	
}

.footer_menu li .sub-menu li{
	clear: both;
	line-height:1.6em;
}

.footer_menu li .sub-menu li a{
	color: #ffffff;
	font-weight: normal;
}
.tab-content{
	border-radius: 0px 0px 4px 4px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	padding: 0 !important;
}

.tab-content .explain{
	padding: 8px 16px;
	background: #f3f3f3;
	border-bottom: 1px solid #e4e5e6;
	color: #999;
}

.tab-content .explain p{
	padding: 8px 16px;
}

.tab-content .explain .head{
	font-weight: 700;
	display: block;
}

.tab-content .task-content{
	background: #fff;
}

.task-block{
	margin-bottom: 12px;
	border-bottom: 1px solid #e4e4e4;
	padding: 8px 16px 16px;
}

.task-block p {
	padding: 4px 16px !important;
}

.operations{
	list-style: none;
	background: #e4e5e6;
	display: block;
	overflow: hidden;
}

.operations li{
	list-style: none;
	float:left;
	padding: 0px 12px;
}

.operations li a{
	line-height: 2em;
	color: #999;
}


.submenu ul li a{
	color: #616161 ;
}

.start-link{ color: #ababab !important;}

.footer-menu li {float:left; line-height: 1.5em; padding: 0px 16px;}

/* Backend */

.menu{
	background: #232323;
	height: 500px;
}

.menu .nav-be li{
	color: #999999;
    padding: 6px 12px;
    border: 1px solid #212121 !important;
}

.nav-be-head{
	text-transform: uppercase;
	color: #999;
	padding-left: 20px;
	font-size: 12px;
	height: 22px;
	display: block;
}

.bg-content-breadcrumb{
	height: 22px;
	margin-left: 0 !important;
	background: none repeat scroll 0 0 #DDDDDD !important;
    border-bottom: 1px solid #CCCCCC;
    padding: 0px 20px;
}

.bg-content-logo{
	height: 68px;
	background : #fff !important;
	border-bottom: 1px solid #DDDDDD;
	padding: 20px;
	margin-left: 0 !important;
}

.foerderer{
	background: #f9f9f9;
	border-radius: 4px;
	padding: 16px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
}

.foerderer a img{
	opacity: 0.5;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	
}

.be_box{
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.with_padding{
	padding: 16px;
}

.with_padding_rlu{
	padding: 0px 16px 16px 16px;
}

.be_right_icon{
	height: 84px;
	text-align: center;
	border-bottom: 1px solid #e4e4e4;
}

.be_right_icon img{
	margin-top: 12px;
}

.sys_btn{
	border-top: 1px solid #e4e4e4;
	padding: 6px 8px;
}

.sys_btn a{
	color: #ABABAB !important;
}

.thead{
	background: radial-gradient(at center center , #A69689, #82786C) repeat scroll 0 0 rgba(0, 0, 0, 0);
	color: #fff;
}

.note_box{
	background: #f9f9f9;
	border-bottom: 1px solid #e4e4e4;
	padding: 16px;
	overflow: hidden;
}

.note_element{
	color: #ababab;
	float:left;
}

.note_element .description{width:120px;display: inline-block;}

.note_element span{
	float:left;
	display: inline-block;
}

.btn_row{
	background: #f9f9f9;
	border-top: 1px solid #e4e4e4;
}

.btn_fkt{
	padding: 12px 18px;
	background: #f9f9f9;
	border: none ;
	float:right;
	border-left: 1px solid #e4e4e4;
	color: #ababab;
	display: inline-block;
	cursor: pointer;
}

.btn_fkt:hover{
	background: #e4e5e6;
	color: #999;
}

.function-span{float:right;color:#999;}
.function-span a{color:#82786C;}

.sub-cat-index-elment{
	background: #f9f9f9;
}

.open_solution{cursor: pointer;}

.solution{display: none;}
.solution_explain{display: none;}


.absatz-solution-block .head_solution,
.solution .head_solution{color: #ABABAB !important; display: block; font-size: 1.3rem;padding: 6px 0px;}

.solution_explain .head_solution{ font-weight: 700; padding: 6px 40px !important; color: #ABABAB !important; font-size: 1.3rem;}

.solution p,
.solution_explain p{padding: 4px 16px !important; }
.solution_explain p{color: #000 !important;}
.video_row{
	padding: 0px 16px;
}

.subcat{
	padding-left: 22px !important;
	background: #f0f0f0;
}

.sidebar-menu li{
	padding-lefT: 12px;
}

.videorow{
	border-bottom: 3px solid #A69689;
    height: 290px;
    overflow: hidden;
}

.video-titel{
	background: #82786C;
	color: #fff;
	width: 65%;
	font-size: 18px; font-size: 1.3rem;
	padding: 8px 16px;
	float:left;
}

.video-menu{
	color: #fff;
	width: 35%;
}

.video-menu{position: relative; top: -42px; padding: 12px 16px; left: 65%;text-align:right;}

.video-play{
	height: 238px;
	width: 100%;
	background: url("../img/icons/play_transparent.png") 50% 50% no-repeat;
	opacity: 0.6;
	display:block;
}

.video-play:hover{
	opacity: 1;
	cursor:pointer;
}

.text-box-slider{
	background: rgba(255,255,255,0.8);
	height: 110%;
	position: relative;
	top: -290px;
	margin-left: 0px !important;
	float: right;
	padding: 16px;
}

.text-box-slider p{
	
}

.jcarousel ul{
	margin-bottom: 0px !important;
	height: 280px !important;
}

/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jslider ,
.jcarousel {
	position: relative;
    overflow: hidden;
    width: 100%;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jslider ul,
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
	height: 292px;
	width: 706px;
}
.jcarousel-pagination {text-align: right;}

.jcarousel-pagination a {
background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 22px;
    color: #414141;
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    margin-right: 8px;
    opacity: 0.3;
    text-align: center;
    text-decoration: none;
	height: 22px;
	width:22px;
}
.jcarousel-pagination a.active{
	background:#82786C;
	opacity: 0.95;
	color: #fff;
}

.jslider-pagination-wrapper{
	position: relative;
	top: -40px;
	left: 35%;
}

.jslider-pagination{
	display: inline-block;
}

.jslider-pagination a {
background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 14px;
    color: #414141;
    display: inline-block;
    font-size: 0px;
    line-height: 14px;
    margin-right: 8px;
    opacity: 0.8;
    text-align: center;
    text-decoration: none;
	height: 14px;
	width:14px;
}

.jslider-pagination a.active{
	background: #ababab;
}

.jslider li {
    /* Required only for block elements like <li>'s */
    float: left;
	height: 280px;
	width: 948px;
}

a.jcarousel-prev{float:left;background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 22px;
    color: #414141;
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    opacity: 0.3;
    text-align: center;
    text-decoration: none;
	height: 22px;
	width:22px;}
	
a.jcarousel-next{float:left;background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 22px;
    color: #414141;
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    opacity: 0.3;
    text-align: center;
    text-decoration: none;
	height: 22px;
	width:22px;}

.jcarousel-pagination{
	float: lefT;
	display: inline-block;
	padding: 0px 16px;
}

.question-icon{
	background: url("../img/icons/headline_icons/question.png") 0px 50% no-repeat;
	padding-left: 40px;
	color: #ababab !important;
}

.solution-icon{
	background: url("../img/icons/headline_icons/check.png") 0px 50% no-repeat;
	padding-left: 40px !important;
	color: #ababab;
}

.exclamation-icon{
	background: url("../img/icons/headline_icons/exclamation.png") 0px 50% no-repeat;
	padding-left: 40px !important;
	color: #ababab;
}

.your-solution-icon{
	background: url("../img/icons/headline_icons/quote.png") 0px 50% no-repeat;
	padding-left: 40px !important;
	color: #ababab;
}

.clear{
	clear:both ;
}

.download{
	padding-left: 38px !important;
	margin-left: 12px;
}
.download{line-height: 1em !important;}

.download-title{}
.download-info{display:block;line-height: 1em;padding-left: 50px !important; font-size: 0.8em;color: #ababab;}

.inhaltsverzeichis-head,
.absaetze-head{margin-left: 16px;}

.inhaltsverzeichis,
.absaetze{
 padding-top: 8px;
}

.absaetze p{
	padding: 4px 16px !important;
	text-align:justify;
	text-justify:inter-word;
}

.absatz-solution-block{
	padding-left: 16px;
}

.absatz-solution-block p{
	text-align: left !important;
}

.solution-list,
.sortable{
	margin-top: 16px;
	margin-bottom: 16px;
}

.icon-code{
	transform:rotate(90deg);
	-ms-transform:rotate(90deg); /* IE 9 */
	-webkit-transform:rotate(90deg); /* Safari and Chrome */
}

.sortable li{
	cursor: pointer;
	background: #f8f8f8;
	border-bottom: 1px solid #fff;
}

.btn{cursor: pointer;}

.solution-list{
	
}

.text_content ul{
	list-style: disc;
	margin-left: 16px;
}


.sortable li {
	background: url("../img/icons/move.png") 12px 50% no-repeat #f8f8f8;
	padding-left: 32px;
	line-height: 1.6em !important;
}

.current_cat a{
	color: #005d7c !important;
}

.text_content li{
	line-height: 1.5em !important;
}

.orange{
	background: #D04526 !important;
	float:right;
}

.badge_place{
	margin-bottom: 1em;
    margin-top: 2.4em;
}

.footer_logos a{opacity: 1;}
.footer_logos a:hover{opacity: 1;}

.downloadrow{
	padding: 12px 0px ;
	border-bottom: 1px solid #E4E4E4;
}

.download_titel{
	line-height: 1em;
}

.no-border{
	border: none !important;
}

.collapseomatic.blueballs {
background-image: url(http://home.uni-leipzig.de/methodenportal/wp-content/uploads/2017/05/kreis-plus.png);
background-position: left center;
padding: 0 0 0 35px;
color: #616161;
}
.colomat-close.blueballs {
background-image: url(http://home.uni-leipzig.de/methodenportal/wp-content/uploads/2017/05/kreis-minus.png);
}

html {overflow-y: scroll;}