/* andreas00 - an open source xhtml/css website layout by Andreas Viklund  - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given to the original author.
Version: 1.1 (Apr 20, 2006) */

/***** Body and main container *****/

body {
margin:0 auto;
padding:0;
font:87% Verdana,Tahoma,Arial,sans-serif;

background:#131 url('img/bg_kids_em2024_green_invert.jpg') repeat top left fixed;
ssbackground:#E0E0E0 url('img/em2021-bg1-white-1600.jpg') repeat-y top left fixed;
ssbackground:#FFF url('img/bg_russia2018.jpg') repeat-x top center fixed;
ssbackground:#FFF url('img/bg_seamless_footballs.jpg') fixed;
ssbackground:#18A500 url('img/grass-texture-1.jpg');
sbackground: #007cba url("img/em2016_bg_pattern.png") repeat-x fixed center top / 100% auto;
sopacity: 0.3;	
sz-index: -5;


color:#111;
}

.bgblock {
background: #007cba url("img/wm2018_bg_pattern.jpg") repeat scroll center top / 100% auto;
opacity: 0.3;	
}

#wrap {
background-color:#ffffff;
color:#111;
margin:0px auto;
padding:10px 15px;
width:960px;

sborder: 2px solid #999;
sborder-radius: 10px;
}


.mobilehide {
	display: block;
}

/***** Header *****/

#header {
color:#505050;
sbackground:#18A500 url('img/grass-texture-1.jpg');
background: #DDD url('img/bg_em2024_header_fahnen-low.jpg') no-repeat top left;



margin:5px 0 20px 0;
padding:0;
position:relative; top:1px; left:0px;
overflow:hidden;
height: 300px;
opacity: 1.0;

border-radius: 10px;

}




#headertop {
	height: 65px;
}

#headerbottom {
	height: 215px;
	padding: 0 10px;
	overflow:hidden;
}


#header h1 {
font-size:2.5em;
line-height: 30px;
font-weight:normal;
letter-spacing:-2px;
margin:0 0 4px 15px;
padding:15px 0 0 0;
color: #FFF;
}

#header h2, #header h3 {
color: #FFF;
}


#header h1 a,#header h1 a:hover {
color: #FFF;
padding:0;
}

#header p {
font-size:1.1em;
letter-spacing:-1px;
margin:0 0 20px 15px;
padding:0 0 0 3px;
color: #FFF;
}

#header img {
	display: block;
}

.mobileonly {
	display: none;
}

/***** Left sidebar *****/





#avmenu {
clear:left;
float:left;
width:250px;
margin:0 0 10px 0;
padding:0;
}

#avmenu ul {
list-style:none;
width:250px;
margin:0 0 20px 0;
padding:0;
}

#avmenu li {
margin-bottom:5px;
}

#avmenu li a {
font-weight:bold;
text-decoration:none;
color:#505050;
display:block;
padding:6px 10px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #6666FF;

border-radius:5px;


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */

}


/* prograss bar */
#progressbox {
	border: 1px solid #333;
	padding: 1px; 
	position:relative;
	width:220px;
	border-radius: 3px;
	margin: 10px 0;
	display:none;
	text-align:left;
}
#progressbar {
	height:20px;
	border-radius: 3px;
	background-color: #11FF11;
	width:1%;
}
#statustxt {
	top:3px;
	left:50%;
	position:absolute;
	display:inline-block;
	color: #111;
}



#avmenu li a:hover, #avmenu li a.current {
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#EFEFEF;
border-top:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;
border-left:4px solid #0000DD;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

}

#avmenu ul ul {
margin:5px 0 5px 15px;
font-size:0.9em;
width:235px;
}

#avmenu ul ul a {
sheight:16px;
margin:0;
padding:4px 8px;
}

#avmenu h2 {
font-size:1.5em;
font-weight:normal;
}

/***** Right sidebar *****/

#extras {
float:right;
width:230px;
margin:0 0 10px 0;
padding:0;
font-size:0.9em;
}

#extras p, #extras ul {
margin:0 0 1.5em 0;
line-height:1.3em;
padding:0;
}

#extras a {
font-weight:bold;
}

#extras li {
list-style:none;
margin:0 0 6px 0;
padding:0;
}

#extras h2 {
font-size:1.6em;
font-weight:normal;
margin:0 0 6px 0;
;
letter-spacing:-1px;
}

/***** Main content *****/

#content {
margin:10px 140px 10px 260px;
padding:0;
line-height:1.5em;
text-align:left;
}

#contentwide {
margin:10px 0 10px 280px;
padding:0 10px 20px 0;
line-height:1.5em;
text-align:left;
}

#contentfull {
margin:10px 10px 10px 10px;
padding:2px 0 10px 0;
line-height:1.5em;
text-align:left;
}

#content h1, #contentwide h1, #contentfull h1 {
font-size:1.8em;
letter-spacing:-1px;
font-weight:normal;
line-height: 1.2em;
margin:10px 0 10px 0;
padding:0;
}

#content h2, #contentwide h2, #contentfull h2 {
font-size:1.2em;
letter-spacing:-1px;
font-weight:normal;
margin:8px 0 10px 0;
padding:0;
}

#content h3, #contentwide h3, #contentfull h3 {
font-size:1.1em;
font-weight:normal;
margin:6px 0 6px 0;
padding:0;
}

#content img, #contentwide img, #contentfull img {
padding:1px;
display:inline;
sbackground:#cccccc;
scolor:#303030;
sborder:4px solid #f0f0f0;
}

#content a, #contentwide a, #contentfull a {
font-weight:bold;
}

#content ul, #content ol,
#contentwide ul, #contentwide ol,
#contentfull ul, #contentfull ol {
margin:0 0 16px 20px;
padding:0;
}

#content ul ul, #content ol ol,
#contentwide ul ul, #contentwide ol ol,
#contentfull ul ul, #contentfull ol ol {
margin:2px 0 2px 20px;
}

#content li, #contentwide li, #contentfull li {
margin:0 0 2px 10px;
padding:0 0 0 4px;
}

/***** Footer *****/

#footer {
clear:both;
margin:30px auto;
padding:8px 0;
border-top:2px solid #dadada;
width:960px;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}

#footer p {
padding:0;
margin:0;
}

#footer a {
color:#808080;
background-color:inherit;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

/***** Various tags *****/

a {
text-decoration:underline;
color:#505050;
sbackground-color:inherit;
}

a:hover {
text-decoration:underline;
color:#33AA33;
sbackground-color:inherit;
}

a img {
border:0;
}

p {
margin:0 0 16px 0;
}

blockquote {
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
margin:16px;
padding:7px 7px 7px 11px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#505050;
}

blockquote p {
font-size:1.1em;
line-height:1.3em;
margin:0;
}

/***** Table styles *****/

table {
margin:0 0 16px 0;
padding:0;
line-height:1.3em;
border-collapse:collapse;
border:1px solid #d8d8d8;
}

caption {
text-align:left;
font-size:1.5em;
font-weight:normal;
margin:0;
padding:6px 0 8px 0;
}

th {
padding:5px;
text-align:left;
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#111;
border: solid 1px #CAD0D5; 
border-collapse: collapse;
}

td {
padding:5px;
font-size:0.9em;
text-align:left;
background: #f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#111;
border: solid 1px #CAD0D5; 
border-collapse: collapse;
}

/***** Form styles *****/

.button {
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
margin:0 0 15px 0;
padding:7px 7px 7px 11px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#505050;
font-weight:bold;
width:120px;
}

input, textarea {
border:1px solid #cccccc;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:1em;
margin:0;
padding:2px;
}

label {
margin:2px;
}

input {
width:195px;
}

textarea {
width:200px;
}


/***** Search box *****/

#searchbox {
padding:0;
margin:6px 0 16px 0;
}

#searchform {
background:#ffffff;
border:1px solid #cccccc;
color:#505050;
font-size:0.9em;
padding:4px;
width:116px;
}

#searchbox label {
display:none;
}

/***** Various classes *****/

.left {
margin:10px 10px 5px 0;
float:left;
}

.right {
margin:10px 0 5px 10px;
float:right;
}

.announce {
margin:10px 0 20px 0;
padding:10px 10px 5px 10px;
width:220px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #0000DD;
line-height:1.3em;
border-radius: 5px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f9ff+0,cbebff+47,a1dbff+100;Blue+3D+%2313 */
background: #f0f9ff; /* Old browsers */
background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

}


.announce.whats {
	padding: 0px 0 ;
	background: #f4f4f4 url(img/menubg.gif) bottom left repeat-x;
	border: 1px solid #999;
	width: 250px;
	
	background: #f04444; /* Old browsers */
	background: #CCC url('img/bg_whats_announce-light.jpg') repeat top left;
	
	
}




.announce a {
font-weight:bold;
color: black;

}


.announce p {
font-size:0.9em;
margin: 15px 0;
color: black;
}


.announce p.blog {
	margin: 5px 0;
	padding: 10px 0;
border-top: 1px dotted #000;
}

.announce p.loadmore {
	text-align: center;
	font-size: 1.1em;
}


.announce p.blogtitle {
	margin: 5px 0;
	padding: 5px 0 0;
	border-top: 1px solid #FFF;
	font-weight: normal;
}

.announce p.blogcontent {
	margin: 0px 0;
	padding: 0px 5px;
}


.announce p.msgusername {
	margin: 0;
	padding: 2px 5px;
	color: #559;
	font-weight: bold;
}

.announce p.msgcontent {
	margin: 0;
	padding: 2px 5px;
	text-align: right;
	font-size: 0.8em;
}


.announce p.msgdate {
	margin: 0;
	padding: 0px 5px 2px;
	text-align: right;
	font-size: 0.7em;
}


.announce p.blogcontent.emoji {
	padding: 5px 0 0;
	font-size: 4em;
	line-height: 1em;
	
}

.msgsendformwrap {
	background-color: #CCC;
	padding: 4px 4px 0;
	
	display: grid;
	grid-template-columns: 5fr 50px;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
}

.msgsendformwrap .photo, .msgsendformwrap .send {
	text-align: center;
	padding-top: 8px;
}

#infoblocks_contentwrap {
	padding: 0px 4px;
}

textarea#blogmsg {
	width: 100%;
	height: 90px;
	font-size: 1.2em;
}

div.formwrap {
	grid-row: 1 / 3;
	grid-column: 1;
}

a.reloadlink {
	text-decoration: none;
	font-size: 3em;
}



.clearer {
	clear: both;
}


.announce div.whatsmsg {
	float: left;
	clear: both;
	margin: 2px 0;
	padding: 1px;
	border: 1px solid #669;
	border-radius: 5px;
	background-color: #FFF;
	width: 90%;
}

.announce div.whatsmsg.mycomment {
	border: 1px solid #669;
	background-color: #DDD;
	float: right;
}





.announce div.whatsmsg img {
	width: 100%;
	height: auto;
}



.announce p.thelabel {
	margin: 0px 0;
	padding: 0;
}


.announce h2 {
margin:0 0 10px 0;
padding:0;
text-align: center;
text-transform: uppercase;
}

.announce.whats h2 {
	margin:0;
	padding:10px 0;
	
	background: rgba(128, 128, 80, 0.3);
	
}


.textright {
text-align:right;
margin:-10px 0 4px 0;
}

.center {
text-align:center;
}

.small {
font-size:0.8em;
}

.large {
font-size:1.3em;
}

.bold {
font-weight:bold;
}

.boldred {
font-weight:bold;
color:#FF3030;
}

.highlighted {
padding:3px;
background-color:#f0f0f0;
color:#303030;
border:1px solid #b0b0b0;
}

.hide {
display:none;
}


input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


/*************************************/

/* Fußball Tabellen
----------------------------------------------- */
.tabelle {
	width: 99%; 
}

.camou td {
	border: none;
	background: none;
}

table.camou {
	width: 95%;
	border: none;
}

td.eingabe {
	width: 80px;
	vertical-align: middle;
}


table.camou td.wert {
	text-align: right;
}

.camou tr.whiteline {
	background: none;
}

.ergebnistabelle {
	width: 290px;
	margin-left: 30px;
}

th.thTag {
	width: 200px; 
}

th.thOrt {
	width: 100px; 
}

th.thUser {
	width: 200px; 
	font-weight: bold;
	text-transform: uppercase;
}

th.thMatch {
	width: 200px; 
}

td.summe {
	font-weight: bold;
	text-transform: uppercase;
}

.finaltip {
	text-align:center;
}

.result {
	letter-spacing: 1px;
	text-align:center;
}

.inputRadio {
	margin: 0 0 0 ;
	padding: 0;
	width:20px;
	height: 30px;
	vertical-align: middle;
}

.inputButton {
	padding: 4px 10px;
	font-size: 1.2em;
	width: auto;
	border: 1px solid #000;
	color: #FFF;
	font-weight: bold;
	background: #33AA33;
	border-radius: 5px;
}

.inputResult {
	width:16px;
	-moz-appearance:textfield;
}


.tdRight {
text-align:right;
}


span.bigemoji {
	font-size: 4em;
}


#spacer {
	height: 170px;
}

.list_carousel {
	background: transparent;
	margin: 10px 0 10px 0px;
	width: auto;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 40px;
	color: #999;
	text-align: center;
	background-color: #eee;
	border: none;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
}
.list_carousel li img {
	display: block;
}

.list_carousel.responsive {
	width: auto;
	margin-left: 0;
}
.clearfix {
	float: none;
	clear: both;
}
.prev {
	float: left;
	margin-left: 10px;
	font-size: 0.8em;
	text-decoration: none;
	
}
.next {
	float: right;
	margin-right: 10px;
	font-size: 0.8em;
	text-decoration: none;
	
	
}
.pager {
	float: left;
	width: 300px;
	text-align: center;
}
.pager a {
	margin: 0 5px;
	text-decoration: none;
}
.pager a.selected {
	text-decoration: underline;
}
.timer {
	background-color: #999;
	height: 6px;
	width: 0px;
}





/*------------------------------------*\

d888888b d8888b. db   db  .d88b.  d8b   db d88888b 
  `88'   88  `8D 88   88 .8P  Y8. 888o  88 88'     
   88    88oodD' 88ooo88 88    88 88V8o 88 88ooooo 
   88    88~~~   88~~~88 88    88 88 V8o88 88~~~~~ 
  .88.   88      88   88 `8b  d8' 88  V888 88.     
Y888888P 88      YP   YP  `Y88P'  VP   V8P Y88888P

\*------------------------------------*/


@media screen and (max-width: 1020px){


body{
  -webkit-text-size-adjust:none;
  font-family:Helvetica, Arial, Verdana, sans-serif;
  padding:0px;
  font-size: 1.1em;
 line-height: 150%;
background: none;
background-color: #3D3D3D;


}



#wrap {
width:auto;
padding: 5px 10px;
border-right: 1px solid #555533;
border-left: 1px solid #555533;
margin: 0 10px;
border-radius: 0;
}


.mobileonly {
	display: block;
}

tr.mobileonly {
	display: table-row;
}

tr.plainbg td {
	background-image: none;
}


.desktoponly {
	display: none;
}

#header_mobile {
	background: none;
	background: #115511 url('img/grass-texture-1.jpg') repeat top center;
	
	margin: 0 0px;
	height: auto;
	padding: 5px;
	border: 1px solid #333;
	text-align: center;
	position: relative;
	border-radius: 10px;
}

#header_mobile h2 {
	font-size: 2.0em;
}

#header_mobile h1, #header_mobile h2, #header_mobile h3  {
	color: white;
	margin: 5px;
	font-weight: normal;
}

#header_mobile .imgbox {
	position: relative;
	margin-top: 5px;
	overflow: hidden;
	text-align: left;
}


#header_mobile img {
	display: inline;
	ssborder: 1px solid #AAA;
	ssborder-right: 1px solid #CCC;
	ssborder-bottom: 1px solid #CCC;
	width: 100%;
	height: auto;
}


.whatsshare {
	float: left;
	width: 50%;
}



#headertop {
	display: none;
}

#header h1 {
	font-size: 1.1em;
	letter-spacing: 1px;
}

#header h2 {
	font-size: 2.1em;
	letter-spacing: 0px;
	margin: 0;
	color: white;
	line-height: 100%;
}


#header  p strong {
	font-size: 0.8em;
	letter-spacing: 1px;
	font-weight: normal;
}


#avmenu {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

#mymenu {
	display: none;
}

#avmenu ul, #avmenu ul ul {
list-style:none;
width:auto;
margin:0;
padding:0;
margin-left: 0px;
margin-right: 0px;
}

#avmenu ul ul {
	margin-left: 20px;
	margin-right: 20px;
}

#avmenu ul {
	margin-bottom: 20px;
}

#avmenu li {
margin: 5px 0;
padding: 0;
	display: block; 
	width:auto;
border: none;
}


#avmenu UL LI A {
	margin: 0;
	padding: 10px 20px; 
	display: block; 
	
	font-size: 22px; 
	text-decoration: none;
	text-align: center;
	background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
	border-top:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	border-bottom:1px solid #d8d8d8;
	
	border-left:4px solid #6666FF;

	background: #d8d8d8; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8d8d8 0%, #ededed 20%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(20%,#ededed), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8d8d8 0%,#ededed 20%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8d8d8 0%,#ededed 20%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8d8d8 0%,#ededed 20%,#ededed 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8d8d8 0%,#ededed 20%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	
}





#avmenu UL LI A:hover {
}

#avmenu UL LI A.active {

}


#avmenu li a:hover, #avmenu li a.current {
	
border-top:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;

border-left:4px solid #0000DD;


}





.announce {
margin:10px 0 20px 0;
padding:10px 10px 5px 10px;
width:205px;

line-height:1.3em;
}



.announce a {
font-weight:bold;
}


.announce p {
font-size:0.9em;
margin: 15px 0;
}


.announce p.blog {
	margin: 5px 0;
	padding: 10px 0 0;
}



.announce h2 {
margin:0 0 10px 0;
padding:0;
}

#avmenu .announce {
width: auto;
}


#contentwide {
margin:10px 0px;
padding:0 0px 20px 0;
line-height:1.5em;
text-align:left;
}


#footer {
clear:both;
margin:30px auto;
padding:8px 0;
border-top:2px solid #dadada;
width: auto;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}

th.thOrt {
	width: auto; 
}
th.thTag {
	width: auto; 
}

th.thUser {
	width: auto; 
}

th.thMatch {
	width: auto; 
}

table.tabelle td {
	font-size: 0.9em;
}

table.tabelle tr.plainbg td {
	font-size: 0.9em;
	padding: 1px 5px ;
}

span.dateortklein {
	font-size: 0.7em;
}

textarea {
	width: 90%;
}

input {
	width: 90%;
	font-size:1.3em;
}

.mobilehide {
	display: none;
}


}