#logo {
	/* tweak the logo for better alignment in the top-bar */
	position: relative;
	top: -3px;
}

#bodycopy ul.in,
#bodycopy ol.in,
#sidebar ul,
#sidebar ol {
	/* Foundation doesn't indent lists at all, so we fix that here... */
	margin-left: 1.25em;
}


.breadcrumbs {
	/* change default appearance of Foundation breadcrumbs */
	padding: 0;
	background: none;
	border: none;
}
	#bodycopy .breadcrumbs {
		/* make the breadcrumbs appear in the spot between masthead and bodycopy */
		margin: 0 0 -1em 0;
		position: relative;
		top: -1.75em;
		left: -6px;
	}
	#bodycopy .breadcrumbs li {
		background: #fff;
	}
	#bodycopy .breadcrumbs li:first-child {
		padding-left: 8px;
	}
	#bodycopy .breadcrumbs li:last-child {
		padding-right: 8px;
	}

#bodycopy ul.side-nav,
#sidebar ul.side-nav {
	/* we don't want navigation lists indented */
	margin-left: 0;
}
	#bodycopy .side-nav li {
		/* when side-nav in bodycopy, make it a little more prominent than Foundation default */
		font-size: 1em;
	}
		#bodycopy .side-nav a {
			font-weight: bold;
		}
		#bodycopy .side-nav ul ul a {
			font-weight: normal;
		}

ul.side-nav ul {
	/* nested sub-navigation (tree=true) */
	margin-top: 0.5em;
	margin-left: 2em;
}


#search-form {
	/* this better aligns the search form with the headline */
	margin: 0.75em 0 0 0;
}

#masthead h1 {
	/* no need for margin here since h1 is the only thing in masthead */
	margin: 0;
}

#sidebar h3 + ul.side-nav {
	/* get the nav headline closer to the nav */
	margin-top: -1em;
}



body.template-sitemap .breadcrumbs {
	/* breadcrumbs are redundant on a sitemap page */
	display: none;
}


/*
 * TinyMCE alignment styles, for images placed in bodycopy
 *
 */
.align_left,
.align_right {
	display: block;
	margin: 1em 0;
}

.align-center {
	display: block;
	margin: 1em auto;
}

@media only screen and (min-width: 500px) {

	/*
 	 * Alignment classes active only when screen is big enough to make them practical.
 	 * In our case we've set 500px as our cutoff under which images no longer align,
 	 * but you may need to tweak that specific to your case.
 	 *
 	 */

	.align_left {
		float: left;
		margin: 0 1em 0.5em 0;
		position: relative;
		top: 5px;
	}

	.align_right {
		float: right;
		margin: 0 0 1em 1em;
		position: relative;
		top: 5px;
	}
}

.image_caption small {
	display: block;
	color: #666;
}

/* -------------------------------------------
 * luk styles
 * -------------------------------------------
 */

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td  {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-size : 100%;
vertical-align : baseline;
background : transparent;
}
body {
line-height : 1;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
}
:focus {
outline : 0;
}
ins {
text-decoration : none;
}
del {
text-decoration : line-through;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
body {
background-color : #666;
background-image : url(https://www.lukaskargl.com/images/darkwood_tile.jpg);
background-repeat : repeat;
background-position : 0 0;
}
body, p, h1, h2, h3, h4, ol, ul, li, form, input, table, td, th, fieldset, pre {
font-family : Helvetica, Arial, sans-serif;
font-size : 14px;
line-height : 18px;
font-weight : normal;
color : #000000;
text-align : left;
}
a {
text-decoration : none;
color : blue;
}
a:hover {
text-decoration : underline;
}
h1, h2, h3, h4 {
font-weight : bold;

}
h1 {
font-size : 36px;
line-height : 36px;
}
h2 {
font-size : 18px;
line-height : 36px;
}
h3 {
font-size : 18px;
line-height : 18px;
font-weight : 400;
}
h4 {
font-size : 16px;
line-height : 16px;
font-weight : 600;
}
em {
font-style : italic;
}
strong {
font-weight : bold;
}
.termine {
	margin: 127px 0 0 10px;
}
.termine h3{
	margin: 0 0 20px 0;
	text-transform: uppercase;
}
.termin p {
	margin-bottom: 5px;
}
.termin {
	margin-bottom: 20px;
}
.sprite {
width : 18px;
height : 14px;
background : url(https://www.lukaskargl.com/images/sprites.png) no-repeat top left;
border : 1px solid #ccc;
margin-top: -2px;
}
.sprite:hover {
border : 1px solid #fff;
}
.sprite .tooltip {
width : 16px;
height : 12px;
}

.sprite-de_at {
background-position : -1px -1px;
}
.sprite-uk {
background-position : -1px -15px ;
}

.icon {
width : 16px;
height : 16px;
display : inline;
float : left;
padding : 3px 9px 9px 0;
}

#language li {
float : right;

}
#audiocontainer{
	width: 420px;
	display: block;
	margin: 18px auto;
	background-color: #efefef;
}
#container{
	width: 920px;
	display: block;
	margin: 18px auto;
	background-color: #efefef;
	border: 2px solid #1b1b1b;
}


#headline_menu {
	padding-right: 0px;
}
#content {
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom: 10%;
	min-height: 400px;
}


#branding a:link, #branding a:visited, #branding a:active{
	color: #1A1A1A;
	text-decoration: none;
}
#branding a:hover{

	color:  #FF0000;
}
#branding h3 a:link, #branding h3 a:visited, #branding h3 a:active{
	color: #000;
	text-decoration: none;
}
#branding h3 a:hover{
	background-color: transparent;
	color:  #FF0000;
}
#branding h1 {
		z-index: 2;
padding: 27px 0 0 8px;
color: #000;
font-size: 64px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: -1px;
line-height: 0.7em;
}
#branding h3 {
		z-index: 4;
font-size: 18px;
font-weight: bold;

line-height: 16px;
color: #000;
padding: 0 0 0 12px;
margin-bottom: 38px;
letter-spacing: 0.05em;
}
.menus {
	min-height: 102px;
	width: 330px;
}
#menu {
margin: 18px 0px 18px 9px;


}
#menu li
{
display: block;
float: left;
list-style-type: none;
padding: 0 2px 0 0;
color: #000;
text-transform: uppercase;
white-space: nowrap;
}
#menu li a:link,#menu li a:active, #menu li a:visited
{
padding: 1px;
font-size: 18px;
line-height: 26px;
color: #fff;
background-color: #1A1A1A;
text-transform: uppercase;
text-decoration: none;
}
#menu li a:hover
{
padding: 1px;
color:  #efefef;
background-color: #000;
text-transform: uppercase;
text-decoration: none;
}
#menu li a.active
{
padding: 1px;
color: #efefef;
background-color: #FF0000;
text-transform: uppercase;
text-decoration: none;
}

/* submenu */

#submenu {
margin: 18px 0 57px 9px;
display: block;
width: 330px;

}
#submenu li
{
display: block;
float: left;
list-style-type: none;
padding: 0 2px 0 0;
color: #000;
text-transform: uppercase;
white-space: nowrap;
}
#submenu li a:link,#submenu li a:active, #submenu li a:visited
{
padding: 1px;
font-size: 18px;
line-height: 17px;
color: #fff;
background-color: #FFB6C1;
text-transform: uppercase;
text-decoration: none;
}
#submenu li a:hover
{
padding: 1px;
color: #FF0000;
background-color: #FFB6C1;
text-transform: uppercase;
text-decoration: none;
}
#submenu li a.active
{
padding: 1px;
color: #efefef;
background-color: #FF0000;
text-transform: uppercase;
text-decoration: none;
}

.inlineblock {
	width: 49%;
	float: left;
	height: 320px;
	background-color: yellow;
	border: 1px solid red;
}
.inlinedblblock {
	width: 99%;
	float: left;
	height: 320px;
	background-color: #eee;
	border: 0px solid red;
}


/* accordion styles */
.accordionWrapper {
margin: 1px 1px -9px 18px;
/* set height/width to minimize safari flicker: https://www.marghoobsuleman.com/jQuery-common-accordion#comment-39513137 */
overflow:hidden;
width: 442px;
height: 260px;
}
.set{border-bottom:1px solid #000}
.set1{background-color:#C77B3F;}
.set2{background-color:#FFC732;}
.set3{background-color:#007C90;}
.set4{background-color:#AD6F08;}
.set5{background-color:#387855;}
.set6{background-color:#8C4B2D;}
.set7{background-color:#82A668;}

.entry {
	padding-top: 18px;
}
.entry h2 {
	margin: 0 0 13px 0;
}
.entry h2.first {
	margin: 29px 0 19px 0;
}
.entry h3 {
	width: 410px;
	display: block;
	margin: 27px 0 18px 0;
}
.entry h3.date {
	color: #eee;
	margin: 0;
}
.entry p {

	padding: 0 0 9px 0;
	line-height: 20px;
}
.entry table {

	margin: 0 0 18px 0;
}
.entry table td {
		width: 120px;
}
.entry table th {
		font-weight: 600;
}
.paginate{
	padding: 9px 0 0 16px;
	color: #ccc;
}

#player_play,
#player_pause {
	display: block;
	float: left;
	width:40px;
	height:40px;
	cursor: pointer;
}
#player_play {
	background: url("https://www.lukaskargl.com/images/spirites.jpg") 0 0 no-repeat;
}
.listen {
	width: 200px;
font-size: 18px;
margin-left: 9px;
}
.listen h3 {
	width: 200px;
	padding: 7px 0 0 43px;
}
.listen a:link, .listen a:active, .listen a:visited
{
padding: 0;
font-size: 18px;
line-height: 26px;
color: #fff;
background-color: #1A1A1A;
text-transform: uppercase;
text-decoration: none;
}
.listen a:hover
{
padding: 0;
color:  #ffffff;
background-color: #B0E2FF;
text-transform: uppercase;
text-decoration: none;
}
.listen a.active
{
padding: 0;
color: #efefef;
background-color: #FF0000;
text-transform: uppercase;
text-decoration: none;
}
#blog .entry .filescontainer {
	width: 430px;
	display: block;
	margin: 9px 0 0 0;
}
.clearing-thumbs li, .downloads li{
	width: 40%;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
.downloads li p a {

}
#blog .entry ul {
	width: 333px;
	list-style-type: disc;
	padding: 9px;
	margin-left: 7px;
}