/****************************************************************************
m.eckert information design
*****************************************************************************/
#button {
	float: right;
	padding: 0px; 
	margin: 0; 
	text-align: center;
	} 
    
#button ul {
	margin : 0px; 
	padding : 0px; 
	} 
	
#button li {
	margin : 0px; 
	padding: 0px;
	list-style : none; 
	display: inline;
	float: left;
  	position: relative;
	} 
	
#button li a {
	color : #fff;
	font-size: 10px;
	padding: 2px 00px 0px 20px;
	text-decoration: none;
	font-family : sans-serif ; 
	width: 100%; /* MSIE */
	margin: 0px;
	} 
	
#button li a:visited  {	} 

#button li a:hover.hello {
	color: #f0f;
	background: none;
	} 
	#button li a:hover.info {
	color: #6f0;
	background: none;
	} 
	#button li a:hover.porto  {
	color: #f90;
	background: none;
	} 
	#button li a:hover.kontakt  {
	color: #0ff;
	background: none;
	} 
				
#button li a:active  { } 

/* 01,02,03,04 STYLES */
   span.hello {
		font-size : xx-large;
		margin:0;
		padding:0;
		font-weight: bold; 
		color: #f0f;
	}	
	span.info {
		font-size : xx-large;
		margin:0;
		padding:0;
		font-weight: bold; 
		color: #6f0;
	}	
    span.porto {
		font-size : xx-large;
		margin:0;
		padding:0;
		font-weight: bold; 
		color: #f90;
	}	
	span.kontakt {
		font-size : xx-large;
		margin:0;
		padding:0;
		font-weight: bold; 
		color: #0ff;
	}	

#button li a:hover span.hello {
		font-size : xx-large;
		text-decoration: none;
		font-family : sans-serif ; 
		width: 100%; /* MSIE */
		margin: 0px;
		color: #f0f;
	}
#button li a:hover span.info {
		font-size : xx-large;
		text-decoration: none;
		font-family : sans-serif ; 
		width: 100%; /* MSIE */
		margin: 0px;
		color: #6f0;
	}
#button li a:hover span.porto {
		font-size : xx-large;
		text-decoration: none;
		font-family : sans-serif ; 
		width: 100%; /* MSIE */
		margin: 0px;
		color: #f90;
	}
#button li a:hover span.kontakt  {
		font-size : xx-large;
		text-decoration: none;
		font-family : sans-serif ; 
		width: 100%; /* MSIE */
		margin: 0px;
		color: #0ff;
	}

/* PORTFOLIO NAVIGATION TEXT-ELEMENTS*/

	.porto_logo_left a:link, .porto_logo_right a:link, .porto_logo_center a:link, .porto_logo_end a:link {
		font-weight : normal; 
		text-decoration : none; 
		color: #fff;
		} 	
	.porto_logo_left a:visited, .porto_logo_right a:visited, .porto_logo_center a:visited, .porto_logo_end a:visited {
		font-weight : normal; 
		text-decoration : none; 
		color: #fff;
		} 	

/* PORTFOLIO NAVIGATION HOVER EFFEcT */

	.porto_logo_left a span, .porto_logo_right a span, .porto_logo_center a span, .porto_logo_end a span {
		display: none;	
	}
	.porto_logo_left a:hover span, .porto_logo_right a:hover span, .porto_logo_center a:hover span, .porto_logo_end a:hover span {
		display: block;	
	}
	.porto_logo_left a.out:hover .outimg, .porto_logo_right a.out:hover .outimg, .porto_logo_center a.out:hover .outimg, .porto_logo_end a.out:hover .outimg {
		display: none;	
	}
	 
	 /* INFORMATION NAVIGATION HOVER EFFEcT */

	.block_left a span {
		display: none;	
	}
	.block_left a:hover span {
		display: inline;	
	}
	.block_left a.out:hover img.outimg {
		display: none;	
	}
	 
	/* LOGO TV EFFEKT */

	#logo a span {
		display: none;	
	}
	#logo a:hover span {
		display: inline;	
	}
	#logo a.out:hover img.outimg {
		display: none;	
	}