/* Eric Meyer's CSS Reset  */

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: ''; content: none; 
}

:focus { 
    outline: 0; 
}

ins { 
    text-decoration: none; 
}

del { 
    text-decoration: line-through; 
}

table { 
    border-collapse: collapse; border-spacing: 0; 
} 

/* end of reset */


/* BODY & Main Stuff */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
	background-color: #5B282F;
	background-image: url(../Grafika/bg-bordo-gradient.jpg);
	background-repeat:repeat-x;
}

h1 { font-size: 12pt; color:  #063dd1; }
h2 { font-size: 10pt; font-weight:100; color: #FFFFFF; line-height: 12pt;}


/* DIV Structure
   Vertikale Anordnung (top / Höhe):
   Lang-menu                 0    /  35
   Header-menu              35    / 106
   julia-vikman-stage      141    / 445   -> endet bei 586
   Termine (NEU)           586    / 440   -> endet bei 1026
   TVP-Polonia            1026    / 430   -> endet bei 1456
   slideshow-ramp         1456    / 530   -> endet bei 1986
   Content-middle         1986    / 460   -> endet bei 2446
   copyright              2445    /  30
*/

#Site-content{
background:black;
width:764px;
position: relative;
margin: 0 auto;
top: 0px;
}

#Lang-menu{
background:black;
width:764px;
height:35px;
position: absolute;
margin: 0 auto;
top: 0px;
}

#Header-menu{
background:black;
width:764px;
height:106px;
position: absolute;
margin: 0 auto;
top: 35px;
}

#julia-vikman-stage{
background:black;
width:764px;
height:445px;
position: absolute;
margin: 0 auto;
top: 141px;
}

/* NEU: Konzertliste */
#Termine{
background:black;
width:764px;
height:440px;
position: absolute;
margin: 0 auto;
top: 586px;
overflow:hidden;
font-family: Arial, Helvetica, sans-serif;
}

#Termine .in{ padding:12px 24px; }

#Termine h2{
margin:0 0 10px;
font-size:22px;
line-height:28px;
font-weight:bold;
color:#fff;
text-align:center;
}

#Termine .ev{
display:flex;
gap:16px;
align-items:flex-start;
background:#faf6ef;
border-radius:8px;
padding:10px 14px;
margin-bottom:8px;
color:#222;
}

#Termine .date{
flex:0 0 60px;
text-align:center;
line-height:1.1;
background:#7a1f2b;
color:#fff;
border-radius:6px;
padding:8px 4px;
}

#Termine .date b{ display:block; font-size:26px; font-weight:bold; }
#Termine .date span{ font-size:13px; text-transform:uppercase; letter-spacing:1px; }

#Termine .info{ flex:1; min-width:0; }
#Termine .info h3{ margin:0 0 4px; font-size:18px; line-height:1.2; font-weight:bold; color:#222; }
#Termine .info p{ margin:2px 0; font-size:15px; line-height:1.4; color:#222; }

#Termine .btns{ margin-top:8px; }
#Termine .btns a{
display:inline-block;
margin:0 8px 0 0;
padding:7px 14px;
border-radius:5px;
font-size:14px;
border:1px solid #7a1f2b;
}

#Termine a.main:link, #Termine a.main:visited{ background:#7a1f2b; color:#fff; }
#Termine a.main:hover{ background:#a02a3a; color:#fff; }
#Termine a.sec:link, #Termine a.sec:visited{ background:#fff; color:#7a1f2b; }
#Termine a.sec:hover{ background:#f3e6e8; color:#7a1f2b; }

#Termine .note{ font-size:13px; text-align:center; margin-top:6px; color:#ddd; }
#Termine .note a:link, #Termine .note a:visited{ color:#f0c987; text-decoration:underline; }

#ballady-i-romanse-plyta {
background:black;
width:764px;
height:250px;
position: absolute;
margin: 0 auto;
top: 1026px;
line-height: 12pt;
}

#ballady-i-romanse-left-column{
background:black;
width:440px;
position: absolute;
margin: 0 auto;
top: 10px;
left: 40px;
}

#ballady-i-romanse-left-column h1{
text-align:left;
font-size: 12pt;
font-weight:bold;
}

#ballady-i-romanse-left-column h2{
text-align:left;
font-size: 12pt;
font-weight: bold;
line-height: 16pt;
padding-left:70px;
}

#ballady-i-romanse-right-column{
background:black;
width:240px;
position: absolute;
margin: 0 auto;
top: 10px;
left: 480px;
}

#TVP-Polonia{
background:black;
width:764px;
height: 430px;
position: absolute;
margin: 0 auto;
top: 1026px;
}

#slideshow-ramp{
background:black;
width:764px;
height:530px;
position: absolute;
margin: 0 auto;
top:1456px;
}

#Content-middle{
background:black;
width:764px;
height: 460px;
position: absolute;
margin: 0 auto;
top: 1986px;
}

#left-column{
background:black;
width:400px;
position: absolute;
margin: 0 auto;
top: 20px;
left: 10px;
}

#right-column{
background:black;
width:344px;
position: absolute;
margin: 0 auto;
top: 20px;
left: 410px;
}

#copyright{
background:black;
width:764px;
height: 30px;
position: absolute;
margin-top:10px;
top: 2435px;
}

/* Facebook flag */
#fb{
	position: absolute;
	left: 720px;
	top: 0px;
    }
#fb img{
	border: 0;
	}


/**********************************************************
	-	CAPTION SETTINGS FOR THE PARADIGM SLIDER	-
**********************************************************/	
.caption_black{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	color:#fff;
	background-color:#000;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_blue{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	color:#fff;
	background-color:#00b4ff;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_green{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	color:#fff;
	background-color:#445626;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_orange{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:65px;
	color:#fff;
	background-color:#c54a00;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_red{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	color:#fff;
	background-color:#c4302b;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_red_transparent{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:55px;
	font-weight:bolder;
	color:red;
	background:none;
	padding:5px;
	position:absolute;	
	padding-left: 10px;
	padding-right: 10px;
}

.caption_red_small_transparent{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	font-weight:bolder;
	color:red;
	background:none;
	padding:5px;
	position:absolute;	
	padding-left: 10px;
	padding-right: 10px;
}

.caption_white_small_transparent{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	font-weight:bolder;
	color:white;
	background:none;
	padding:5px;
	position:absolute;	
	padding-left: 10px;
	padding-right: 10px;
}

.caption_white_small_transparent a:link, .caption_white_small_transparent a:visited {
	text-decoration: none;
	color:white;
}

.caption_white{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:65px;
	color:#000;
	background-color:#fff;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.white_small{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:25px;
	color:#000;
	background-color:#fff;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

.caption_grey{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size:65px;
	color:#fff;
	background-color:#333;
	padding:5px;
	position:absolute;
	-moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
	padding-left: 10px;
	padding-right: 10px;
}

a:link, a:visited {
	text-decoration: none;
	color:  #063dd1;
}

a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #ea3556;
}

.caption_white a:link, .caption_white a:visited {
	text-decoration: none;
	color: #000;
}

.caption_white a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #555;
}

.white_small a:link, .white_small a:visited {
	text-decoration: none;
	color: #000;
}

.white_small a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #555;
}

a:focus { 
    outline: none; 
}

.smallcap{
	font-size:18px;
}

.largecap{
	font-size:32px;
}

.imagecap{
	position:absolute;
}

.nobg{
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: #000 5px 5px 5px;
}

/****************************
	-	BASIC DIVIDERS 	-
*****************************/
#small_divider {
	margin-top:8px;
}

#big_divider {
	margin-top:150px;
}