html {xheight: 100.5%; }
* {margin: 0px; padding: 0px; border: 0px;}

/* font:
    italic [font-style]     small-caps [font-variant]     bold [font-weight]     12px / 120% [font-size / line-height]     Verdana, sans-serif [font-family] ; */

body       {background: #181818 url(../xdesign/bg_dark.png) fixed repeat-x; color:#ddd; font: normal 83% "Lucida Sans Unicode","Lucida Grande", Verdana, Geneva, sans-serif; color:#ddd; 
                     text-align: center;}
h1, h2, h3, h4, h5, h6, 	{  font-weight: normal;}
h1{		font-size: 2.4em;	}
h1{		font-size: 2.0em;	}
h2{		font-size: 1.8em;	}
h3{		font-size: 1.6em;	}
h4{		font-size: 1.4em;	}
h5{		font-size: 1.2em;	}
h6{		font-size: 1.0em;	} 

a:link    {	color: #dddddd; padding:1px 4px; text-decoration:none; 
            -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;}
a:visited {	color: #cccccc;} 
a:hover   { background-color:#556; color:#eeeeee;  }
a:active  {	color: #FFFFFF; }

a.imagelink:link,  a.imagelink:visited, a.imagelink:hover, a.imagelink:active   
                 {background:none; opacity:1.0;}
a.imagelink:hover{background:none; opacity:0.8;        -webkit-transition: all 0.4s ease-in-out; 
	  			-moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;
                -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}			
a.image:hover    {background:none;} 			
img, img a:link, img a:hover { padding:2px; border:1px solid #555; background-color:transparent;}


a.prevnext { color:#999; font-size:11px;padding:1px 2px 1px; margin:0px 3px;}
a.prevnext:hover { color:#ccc;}
/* --- new divs * ---*/ 


#wrapper    {width: 100%; margin:0px auto;margin-top:0px; 
                  background-color:#131313; padding:0px 10px;  } 


#head       {font-size: 2.4em ;	font-weight: bold;  height:auto; padding-top: 10px; background: none; }

#head h1 a:hover { background:none; color: #999; }
#head p { font-size:16px; padding-bottom:10px;}

#content { font-size: 1.0em;    padding:10px 0; border-top: 1px solid #555; 
						xborder-bottom: 1px solid #555;}
#content p { padding:5px 0; font-size:1.1em; line-height:1.6em;}
#content p.info { font-size:0.9em; text-align:left; color:#777;}

#foot        { clear:both; padding:10px; border-bottom: 1px solid #555;}
#foot a { margin:5px 20px;}

/* "grid" */
 p.trio { width:33%; float:left; }

/* classes */
.textleft { text-align:left} 
.center { text-align:center;}
.textright { text-align:right;}
.small { font-size:9px;}
.copy { font-size:9px; text-align:left; color: #777;}
.big { font-size:12px;}
.clear { clear:both;}
.hide { visibility: hidden;}
.hide2, .mobileinfo {   display:none;}
.noborder { border:0;}
.portrait    { padding:5px 50px;}

/* Relativer Tooltip */
a.info, a.info:link, a.info:visited, a.info:active  { 
 position: relative;  text-decoration: none; opacity: 0.8; }

a.info:hover {  color: #999;   background: transparent; opacity: 0.5; }
a.info span {  display: none;  text-decoration: none; line-height:1.7em; padding:3px;}
a.info:hover span {  display: block;  position: absolute;    left: -50px; top:30px; height:auto; width: 200px;  z-index: 100;  color: #333;   
   border:1px solid #000000; background: #eee;  text-align: left;}

@media only screen and (max-width : 1200px){
#wrapper {width:auto; min-width:481px; margin:0; padding:20px;xbackground:#334;}
.row img {width:100%; height:auto; }
.col {margin:0;}
 h1 {font-size:24px;}
.mobileinfo { display:block; font-size:16px; padding:10px; margin: 5px 30px; border:1px solid #999;}

}




@media only screen and (max-width : 480px){
#wrapper {width:auto; min-width:360px; margin:0; padding:5px; xbackground:#433;}
.row img {width:100%; height:auto; }
.col {margin:0;}
 h1 {font-size:18px;}
.mobileinfo { display:block; font-size:12px; padding:10px; margin:  5px 30px; border:1px solid #999;}
#content p { font-size:11px;}

}