/*
 * LAYOUT.CSS (Design and layout goes here)
 *
 * version: 0.1
 * media: screen
 *
 * * */

* { margin: 0; padding: 0; }

body { 	background: #EBEBEB url(../img/bg.png);
		font-size: 100.01% 
	}
		
		
/* * * * * *  html 5 fix  * * * * *
section,
article,
header,
footer,
nav,
logo,
aside,
hgroup             { display: block;} */


/* for debugging
div { border-style: solid; border-color: #f800ff; border-width: 1px;  } */



/* * * * * *  layout  * * * * *
#background        { padding: 25px 0 0; background: #c7c7c7 url(../img/bg.png) 50% 0 repeat-x; }  */






#feedback { margin:0; padding:0; height: 109px; position: fixed; top:123px; right: 0; 
		 	border-top: solid 2px #fff; border-left: solid 2px #fff; border-bottom: solid 2px #fff;
		 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}


#feedback a img{	border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}

#feedback a img:hover { border-right: solid 5px #CC0000;}



#expo { 	height: 31px; margin:0; padding:0; position: fixed; top:243px; right: 0; 
		 	border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
		 			 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}


#expo a img{			 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}



#expo a img:hover { border-right: solid 5px #fff;}

#demo { 	height: 31px; margin:0; padding:0; position: fixed; top:363px; right: 0; 
		 	border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
		 			 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}


#demo a img{			 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}



#demo a img:hover { border-right: solid 5px #fff;}





#twitter { 	height: 31px; margin:0; padding:0; position: fixed; top:284px; right: 0; 
		 	border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
		 			 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}


#twitter a img{			 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}



#twitter a img:hover { border-right: solid 5px #00CCFF;}


#facebook { margin:0; padding:0; height: 31px; position: fixed; top:324px; right: 0; 
			border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
					 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}

#facebook a img{		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}



#facebook a img:hover { border-right: solid 5px #233F74;}


#youtube { margin:0; padding:0; height: 32px; position: fixed; top: 364px; right: 0; 
			border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
					 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}

#youtube a img{		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}
            


#youtube a img:hover { border-right: solid 5px white;}
            

#flashIcon { margin:0; padding:0; height: 185px; position: fixed; bottom: 0; right: 0; 
			border-top: solid 2px #fff;border-left: solid 2px #fff;border-bottom: solid 2px #fff; 
					 	
		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}

#flashIcon a img{		 			border-top-left-radius: 5px;
				    border-bottom-left-radius: 5px;
				    -moz-border-radius-topleft: 5px; 
				    -moz-border-radius-bottomleft: 5px; 
				    -webkit-border-top-left-radius: 5px; 
				    -webkit-border-bottom-left-radius: 5px;
 			}



#flashIcon a img:hover { border-right: solid 5px white;}



#background 	{margin:0;}

#head          	{ width: 800px; margin: 0 auto; margin-top: 26px;}

#subheadline {
	position: realtive; 
	margin-left: 10em;
	padding-top: 10em; 
	width: 20em;}


/***** LANGUAGE MENU ***************/



ul#lang {margin-left: 40px;}

ul#lang li      { 	position: relative; top:15px; right:0px; 
					display: inline; float: left; width: 55px;
				  	font-size: 1em; text-align: center;
				 }
				 
				  
ul#lang li a    { position: relative; display: block; width: 100%; overflow: hidden;
				  padding: 0 3px 0 3px; text-shadow: 0px 1px 0px #fff;
    			  /* text-shadow: 0px -1px 0px #000, 0px 1px 0px #fff; Versatz links - Versatz oben - UnschŠrfe (Blur) - Farbe */
				 }


a.selected    	{ 	font-weight: bold; background-color: #DDDDDD;
				  	border-radius : 5px
				  	-moz-border-radius: 5px; 
				  	-webkit-border-radius: 5px;
					border-top-color:#EEE; border-left-color:#EEE; border-right-color:#AAA; border-bottom-color:#AAA; 
					border-spacing:0px;
					

					box-shadow: 0px -1px 0px #555, 0px 1px 0px #fff;
					-moz-box-shadow: 0px -1px 0px #555, 0px 1px 0px #fff;
					-webkit-box-shadow: 0px -1px 0px #555, 0px 1px 0px #fff;
					
					}

/* LOGO */
#logo 			{  	position: relative; top: 0; left: 566px;
					width: 177px; height: 42px; background-image: url(../img/logo.png);
				}
					
#logo a:focus   { background-color: transparent; }


#head:after  { display: block; clear: both; content: " "; }
/* head end */


#appstore {margin:-39px auto -5px auto; width:155px; z-index: 13;  
			/* border: solid 1px aqua;*/
			}




#wrapperTop    	{	z-index: 33;
					width: 800px; height:323px; margin: 12px auto;
				  	background: white; 
				  
				  	background-image: url(../img/webheader3.png);
				  
				  	border-radius : 25px;
				  	-moz-border-radius: 25px;
				  	-webkit-border-radius: 25px;
					box-shadow: 0px 2px 8px #999;
					-moz-box-shadow: 0px 2px 8px #999;
					-webkit-box-shadow: 0px 2px 8px #999;
				  }


#left     		{ display: inline; float: left; 
				  width: 326px; height: 323px;
				  margin: 0;
				}


#left p			{ margin: 0; padding: 0 6px 0 23px; }
					
#left p.h1      { font-size: 1.6em; margin: 44px 0 13px 0;}
#left p.h2      { font-size: 1.2em; line-height: 1.4em }
#left p.img 	{text-align: center;}


#left p.flag 	{margin-top:-10px; margin-left: -68px;}

#left .icon     {margin: 17px 44px 7px 0;
				border: solid 1px white;
				border-radius : 21px;
				-moz-border-radius: 21px; 
				-webkit-border-radius:21px;}					
					
					
					
#right        	{ 	
					width: 470px; height: 323px; margin: 0;
					 
					display: table-cell;
					text-align: right;
    				vertical-align: middle;
				
					}

#right img {		border: solid 1px white;
					
					border-radius: 27px;
				  	-moz-border-radius: 27px;
				  	-webkit-border-radius: 27px;
}


#wrapperBot    	{ width: 800px; margin: 0 auto; margin-top: 23px; color: gray; background: white; 
								  
					vertical-align: middle;
								  
					border-radius : 25px;			  
				  	-moz-border-radius: 25px;
					-webkit-border-radius: 25px;
					box-shadow: 0px 2px 8px #999;
					-moz-box-shadow: 0px 2px 8px #999;
					-webkit-box-shadow: 0px 2px 8px #999;
				}

#wrapperIcon    { width: 600px; margin: 0 auto; margin-top: 23px; color: gray; background: white; 
								  
					vertical-align: middle;
					
					border-radius : 25px;			  
				  	-moz-border-radius: 25px;
					-webkit-border-radius: 25px;
					border: 2px solid #000;
					box-shadow: 0px 2px 8px #999;
					-moz-box-shadow: 0px 2px 8px #999;
					-webkit-box-shadow: 0px 2px 8px #999;
				}

				
#wrapper:after  { display: block; clear: both; content: " "; }


/* NAVIGATION  * * * * * */


					
					
div.navMenu        { width: 144px; height: 288px;position: relative; top: 0; left:0; /*display: table-cell; vertical-align: middle;*/
				  	margin-top: 23px;
				  /*width: 166px; 
				  border: solid 1px green;*/
				}
				
.navMenu ul      { margin: 0; padding-left: 18px; padding-right: 0;  width: 94%; /*border: dashed 1px green;*/}
.navMenu ul li   { padding: 0; background: none;  }

.navMenu ul li a { display: block; height:18px; padding: 10px 8px 3px 6px; border-bottom: solid 1px #ddd;
				   text-decoration: none;  
				   font-weight: normal; font-size:1.2em;
                 }


.navMenu ul li a.selNav {	color:#808080;  padding: 10px 8px 3px 6px; margin-right: -14px; background-color: none; font-weight: bold;
							/*text-shadow: 0px 2px 3px #bbb; text-decoration: underline;*/ border-bottom: solid 1px #999999;
						}



.navMenu ul li a:hover { 	/*background-color: #DDDDDD;
							border-radius : 10px
				  			-moz-border-radius: 13px;-webkit-border-radius: 11px;
				  			-moz-box-shadow: 0px -1px 0px #555, 0px 1px 0px #fff;
				  			-webkit-box-shadow: 0px -1px 0px #555, 0px 1px 0px #fff;				  			
				  			*/
							font-weight: bold;


				  			color: white;
				  			background-color: #999999;				  			 
				  			}	
				  			
				  			
.navMenu ul li a.selNav:hover { color:#808080; text-shadow: 0px 0px 0px #fff; background-color: white; border-right: solid 1px #999999;
								}





/*
.navMenu ul img { position: absolute; margin-top: -29px; margin-left: 121px; z-index: 666;}
.arr { display: block; padding:0; z-index: 666;}
*/	





/* CONTENT  * * * * * */
					
#content        { display: block; float: left;  
					font-size: 1.1em; line-height: 1.3em;
				  width: 100%; /*height:286px;*/ 
				  margin: 0; padding:0; /*border: solid 1px green;*/ }

#content h1.top { font-size: 1.1em; font-weight: bold; margin-bottom: 5px; margin-top: 5px;}

#content h1 { font-size: 1.1em; font-weight: bold; margin-bottom: 5px; margin-top:10px;}


#cf { 	width: 98%; /*height:250px;*/ 
				    
					border-top-right-radius: 23px;
				    border-bottom-right-radius: 23px;
				    -moz-border-radius-topright: 23px; 
				    -moz-border-radius-bottomright: 23px; 
				    -webkit-border-top-right-radius: 23px; 
				    -webkit-border-bottom-right-radius: 23px;
				   margin-left:0; margin-top:13px; margin-bottom:13px; padding: 0;
				   
				   border: solid 1px #999999;}



.mytable { 	width: 100%; /*height: 94%;*/
		  	
		  	border-collapse: separate;
    		border-spacing: 7px;

			font-size: 1em;
			line-height: 1.3em;
			
			color: gray;
			margin: 0;
			padding: 0;
			}
			
.mytable td { padding-left:10px; padding-top:1px; padding-right: 10px;  vertical-align: text-top; vertical-align: top; /*border: dashed 1px lime;*/}

.features li { list-style: disc; padding-left:0; margin-left: 16px;}


/* partner logos */
.pl { float: left; padding-right: 8px;}




/* MACHEN !!! */
.faq {border-bottom: solid 1px #313131; padding: 16px 0 3px 0;font-size: 14px;font-weight: bold; color:#067DA5;}


/* * * * * *  footer  * * * * * */
#footer		{ display:block; width: 100%; text-align: center; font-size: 1em; color: #7d7d7d; margin: 18px auto;}


.expo { list-style: disc outside; padding-left: 2em; }
.expo li {padding-left: 0.5em;}


//tab navigation in dem.html
.tabnav {
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 0;
  display: inline; float: left;
  border-bottom: 1px solid #778; 
  height: 21px;
  font: bold 12px Verdana, sans-serif; 
  
}
.tabnav ul {

}
.tabnav li {
  -moz-border-radius-topright: 1em; 
  list-style: none;
  margin: 0;
  
}

.tabnav li a
{
  display: inline; float: left;
  padding: 3px 4.4em;
  margin-left: 3px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid; 
  border-bottom: 1px solid;
  text-decoration: none;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
}
.tabnavhighlight li a {
  display: inline; float: left;
  padding: 3px 4.4em;
  margin-left: 3px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid; 
  border-bottom: 1px solid;
  background-color: #DDD;
  text-decoration: none;
  -moz-border-radius-topright: 0.5em;
  -moz-border-radius-topleft: 0.5em;
  -webkit-border-top-right-radius: 0.5em;
  -webkit-border-top-left-radius: 0.5em;
}


.tabnav li a:hover
{
	color: white;
	background-color: #999999;				  			 		  			
}

.tabnav li a#current
{
background: white;
border-bottom: 1px solid white;
}

//items in dem.html
.demoitem {
  float: left;
  padding-left: 107px;
}
.galery{
  cursor: pointer;
}