@charset "UTF-8";
/************************************

Verein: 1.JC Samurai Offenbach 1953 e.V. 
Name: Markus Horn
Datum: 26.04.2013

Letzte Änderungen: 11.08.2013

+++ Allgemeine Farben:
Weiß: #FFFFFF
Rot: #CC0000
Gelb: #FFCD00
Grau: #ACACAC
Überschrift: CC0000
Links: CC0000 

+++ Neue Farben 2013
Rot: #B00600
Hell Grau: #BEBEBE
Grauer Text: 5A5A5A

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

body {
	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	background-color:#ACACAC;
	font-size:12px;
	color:#5A5A5A;
}

/************************** LINKS **************************/
a:link { color:#B00600;}
a:hover { color:#B00600;}
a:active {
	color:#B00600;
}

a:visited {color:#B00600;}

a.footer:link{
	color:#FFFFFF;
}

a.footer:visited{
	color:#FFFFFF;
}

a.footer:active {
	color:#FFFFFF;
}

/************************** Downloads **********************/

a.download:link{
	color:#B00600;
}

a.download:visited{
	color:#B00600;
}

a.download:active {
	color:#B00600;
}

/************************** Überschriften ******************/

h1 {
	font-size: 18px;
	color:#B00600;
	padding-top: 10px;
	border-bottom:2px solid #B00600;
	width:500px;
}

h2 {
	font-size: 14px;
	color:#B00600;
	border-bottom:1px solid #B00600;
	width:500px;
}

h3 {
	font-size: 12px;
	color:#B00600;
}


h4 {
	font-size: 12px;
	color:#5A5A5A;
}

h5 {
	font-size: 10px;
}

h6 {
	font-size: 8px;
}

li
{
	list-style: none;
}

/***************** Menü **********************/
.menuButton  
{
	background-color:none; 
	color:#B00600; 
	cursor:pointer; 
	cursor:hand; 
	text-align:left;
	padding-left:60px;
	padding-top:5px;
	font-size:18px;  
}

.menutabel
{
	padding-top:65px;
}

.menuButton:hover {
	text-shadow: 5px 5px 5px #000;
	-webkit-shadow: 5px 5px 5px #000;	 
}

.menuButton:active {
	text-shadow: 5px 5px 5px #000;
	-webkit-shadow: 5px 5px 5px #000;	 
}

.footerButton  
{
	background-color:none;
	color:#FFFFFF; 
	cursor:pointer; 
	cursor:hand; 
	text-align:left;
	padding-left:60px;
	padding-top:5px;
	font-size:10px;  
}	

.footerButton:hover
{
	text-decoration:underline;
}

.footertable
{
	padding-top:10px;
}

/************* Page Title **************/

.pagetitle {
	font-size:28px;
	font-weight:bold;
	text-align:left;
	color:#B00600;
	position:relative;
	left:-200px;
	top:-1390px;
	width:500px;
	height:200px;	
	z-index:9;
	opacity:1;
}

/************* Table Banner ************/

.bannerbild1 {
	position:relative;
	left:0px;
	top:0px;
	width:700px;
	height:200px;
	background-image: url(bilder/banner/banner_samurai3.png);
	z-index:1;
	opacity:1;		
}

.bannerbild2 {
	position:relative;
	left:0px;
	top:0px;
	width:700px;
	height:200px;
	background-image: url(bilder/banner/banner_samurai2.png);
	z-index:2;
	opacity:0;
	-webkit-animation:banner2 30s infinite;
	animation:banner3 30s infinite;
	/*-ms-animation:banner3 30s infinite; */		
}

.bannerbild3 {
	position:relative;
	left:0px;
	top:-200px;
	width:700px;
	height:200px;
	background-image: url(bilder/banner/banner_samurai1.png);		
	z-index:3;
	opacity:0;
	-webkit-animation:banner1 30s infinite;
	animation:banner3 30s infinite;
	/*-ms-animation:banner3 30s infinite; */
}

.bannerbild4 {
	position:relative;
	left:0px;
	top:-400px;
	width:700px;
	height:200px;
	background-image: url(bilder/banner/banner_samurai4.png);		
	z-index:4;
	opacity:0;
	-webkit-animation:banner3 30s infinite;
	animation:banner3 30s infinite;
	/*-ms-animation:banner3 30s infinite; */
}

.bannerbild5 {
	position:relative;
	left:0px;
	top:-600px;
	width:700px;
	height:200px;
	background-image: url(bilder/banner/banner_samurai5.png);		
	z-index:5;
	opacity:0;
	-webkit-animation:banner4 30s infinite;
	animation:banner3 30s infinite;
	/*-ms-animation:banner3 30s infinite; */
}

@-webkit-keyframes banner4
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 1;	}
	90%   { opacity: 1;	}
	100%  { opacity: 0;	}	
}

@-webkit-keyframes banner3
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 1;	}
	70%   { opacity: 1;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@-webkit-keyframes banner1
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 1;	}
	50%   { opacity: 1;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@-webkit-keyframes banner2
{
	0%    { opacity: 0;	}
	10%   { opacity: 0;	}
	20%   { opacity: 1;	}
	30%   { opacity: 1;	}
	40%   { opacity: 0; }
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

/**************** IE 9 ***********************/

@-ms-keyframes banner4
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 1;	}
	90%   { opacity: 1;	}
	100%  { opacity: 0;	}	
}

@-ms-keyframes banner3
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 1;	}
	70%   { opacity: 1;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@-ms-keyframes banner1
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 1;	}
	50%   { opacity: 1;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@-ms-keyframes banner2
{
	0%    { opacity: 0;	}
	10%   { opacity: 0;	}
	20%   { opacity: 1;	}
	30%   { opacity: 1;	}
	40%   { opacity: 0; }
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

/**************** Firefox ********************/
@keyframes banner4
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 1;	}
	90%   { opacity: 1;	}
	100%  { opacity: 0;	}	
}

@keyframes banner3
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 0;	}
	50%   { opacity: 0;	}
	60%   { opacity: 1;	}
	70%   { opacity: 1;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@keyframes banner1
{
	0%    { opacity: 0;	}
	10%	  { opacity: 0;	}
	20%   { opacity: 0;	}
	30%   { opacity: 0;	}
	40%   { opacity: 1;	}
	50%   { opacity: 1;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

@keyframes banner2
{
	0%    { opacity: 0;	}
	10%   { opacity: 0;	}
	20%   { opacity: 1;	}
	30%   { opacity: 1;	}
	40%   { opacity: 0; }
	50%   { opacity: 0;	}
	60%   { opacity: 0;	}
	70%   { opacity: 0;	}
	80%   { opacity: 0;	}
	90%   { opacity: 0;	}
	100%  { opacity: 0;	}	
}

/************** Banner Events *************/

.eventtext1 {
	font-size:14px;
	text-align:left;
	position:relative;
	left:-350px;
	top:-740px;
	width:300px;
	height:200px;	
	z-index:6;
	opacity:1;
	-webkit-animation:textaufloesen1 10s infinite;
	animation:textaufloesen1 10s infinite;
	/*-ms-animation:textaufloesen1 10s infinite;*/
}

.eventtext2 {
	font-size:14px;
	text-align:left;
	position:relative;
	left:-350px;
	top:-940px;
	width:300px;
	height:200px;	
	z-index:7;
	opacity:1;
	-webkit-animation:textaufloesen2 10s infinite;
	animation:textaufloesen2 10s infinite;
	/*-ms-animation:textaufloesen1 10s infinite;*/
}

.eventtext3 {
	font-size:14px;
	text-align:left;
	position:relative;
	left:-350px;
	top:-1140px;
	width:300px;
	height:200px;	
	z-index:8;
	opacity:1;
	-webkit-animation:textaufloesen3 10s infinite;
	animation:textaufloesen3 10s infinite;
	/*-ms-animation:textaufloesen1 10s infinite;*/
}

@-webkit-keyframes textaufloesen1
{
	0%   { opacity: 1;	}
	16%   { opacity: 1;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 1;	}	
}
@-webkit-keyframes textaufloesen2
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 1;	}
	48%   { opacity: 1;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 0;	}	
}
@-webkit-keyframes textaufloesen3
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 1;	}
	80%   { opacity: 1;	}
	100% { opacity: 0;	}	
}

/***  IE 9 ******/

@-ms-keyframes textaufloesen1
{
	0%   { opacity: 1;	}
	16%   { opacity: 1;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 1;	}	
}
@-ms-keyframes textaufloesen2
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 1;	}
	48%   { opacity: 1;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 0;	}	
}
@-ms-keyframes textaufloesen3
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 1;	}
	80%   { opacity: 1;	}
	100% { opacity: 0;	}	
}


/*** Firefox ***/

@keyframes textaufloesen1 
{
	0%   { opacity: 1;	}
	16%   { opacity: 1;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 1;	}	
}
@keyframes textaufloesen2
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 1;	}
	48%   { opacity: 1;	}
	64%   { opacity: 0;	}
	80%   { opacity: 0;	}
	100% { opacity: 0;	}	
}
@keyframes textaufloesen3
{
	0%   { opacity: 0;	}
	16%   { opacity: 0;	}
	32%   { opacity: 0;	}
	48%   { opacity: 0;	}
	64%   { opacity: 1;	}
	80%   { opacity: 1;	}
	100% { opacity: 0;	}	
}
/************* Animationen *************/

@keyframes bildaufloesen
{
	0%   { opacity: 0;	}
	100% { opacity: 1;	}	
}

/************* Table *******************/

.tbl_hintergrund
{
	background-image: url(sam_hintergund.jpg);
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:1000px;
	background-repeat:no-repeat;
	box-shadow: 5px 5px 8px #666666;	
}

.menu
{
	text-align:center;
	vertical-align:top;
	padding-top:50px;
	color:#F00;
	font-size:28px;
}

.maintable
{
	padding-left:75px;
	padding-top:35px;
	max-width:700px;
	max-height:639px;
}

.bulitable {
	padding-left:75px;
	padding-top:35px;
	max-width:700px;
	max-height:639px;
}

.bulipic {
	opacity:1;
	animation:bildaufloesen 5s;
	-webkit-animation:bildaufloesen 5s;
	width:133;
	height:200;
}

.bulipic2 {
	opacity:1;
	animation:bildaufloesen2 5s;
	-webkit-animation:bildaufloesen2 5s;
	width:133;
	height:200;
}

.bulipic3 {
	opacity:1;
	animation:bildaufloesen3 5s;
	-webkit-animation:bildaufloesen3 5s;
	width:133;
	height:200;
}
@keyframes bildaufloesen
{
	0%   { opacity: 0;	}
	100% { opacity: 1;	}	
}

@keyframes bildaufloesen2 
{
	0%   { opacity: 0;	}
	10%  { opacity: 0;	}
	110% { opacity: 1;	}		
}

@keyframes bildaufloesen3 
{
	0%   { opacity: 0;	}
	20%  { opacity: 0;	}
	120% { opacity: 1;	}		
}

@-webkit-keyframes bildaufloesen /* Safari and Chrome */
{
	0%   { opacity: 0;	}
	100% { opacity: 1;	}		
}

@-webkit-keyframes bildaufloesen2 /* Safari and Chrome */
{
	0%   { opacity: 0;	}
	10%  { opacity: 0;	}
	110% { opacity: 1;	}		
}

@-webkit-keyframes bildaufloesen3 /* Safari and Chrome */
{
	0%   { opacity: 0;	}
	20%  { opacity: 0;	}
	120% { opacity: 1;	}		
}

.evo {
	padding-left: 40px;
	padding-top: 20px;
}

.likebutton {
	padding-left:60px;
	padding-top:5px;
}

.vereinlist {
	display:block;
	padding-left:30px;
}

/***************** LOGO Animation **************************/


.banner {
	opacity:1;
	animation:bildaufloesen 5s;
	-webkit-animation:bildaufloesen 5s;
}

.logo {
	position:relative;
	opacity: 1;
	animation:logoin 5s;
	-webkit-animation:logoin 5s;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

@keyframes logoin
{
	0%   {
	opacity: 0;
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	-o-transform: scale(3);
	-ms-transform: scale(3);
	transform: scale(3);
	}
	100% {
	opacity: 1; 
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}	
}

@-webkit-keyframes logoin /* Safari and Chrome */
{
	0%   {
	opacity: 0;
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	-o-transform: scale(3);
	-ms-transform: scale(3);
	transform: scale(3);
	}
	100% {
	opacity: 1; 
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}		
}

/***************** Social Media *****************/
.tt-wrapper{
	padding-left: 60px;
	padding-top: 190px;
	width: 135px;
	height: 35px;
}
.tt-wrapper li{
	float: left;
}
.tt-wrapper li a{
	display: block;
	width: 40px;
	height: 35px;
	margin: 0 2px;
	outline: none;
	background: transparent url(/bilder/sociallogo.png) no-repeat top left;
	text-indent: -9000px;
	position: relative;
}

.tt-wrapper li .tt-facebook{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -45px 0px;
}
.tt-wrapper li .tt-youtube{
    background-position: -90px 0px;
}

.tt-wrapper li .tt-vimeo{
    background-position: -135px 0px;
}