/* GENERAL *************************************************************/

body {
	background: #eef2fb;
	font-size: 10px;
	color: #333;
}

a {color: #102060;} 
a:hover, a:focus {color: #6a65a7;}

.clear {clear: both;}

.weihnachten {
	padding:0.8em; margin-bottom:1em; border:2px solid red;
	color:red; border-color:red; font-size: 14px;
	background-image: url(images/stern.gif); background-position: right; background-repeat: no-repeat;
}

/* upper_page PAGE *****************************************************************/

#upper_page {
background: white
}

.container h1.logo{
	width:400px;
 	height:60px;
  	margin-top:20px;
 	display:block;
     	float: right;
	text-indent:-9999px;
	background:transparent url(images/logo.png) no-repeat top right;
}


.container h1.logo a {
  	width:265px;
 	height:100%;
  	display:block;
   	outline:none;
}



.container img.fahne { 	width:30px;  height: 20px; margin-top:30px; margin-right:20px; float: left;
			border-width:1px;	border-color: #666; border-style:solid;}

/* upper_page PAGE NAVI ************************************************************/


#upper_page #navi {
    margin-top: 80px;
    margin: 0 0 0 0px;
    text-align: left;
}


#upper_page #navi li {
 display: inline;
    list-style: none;
    margin-left: -15px;	margin-right: 50px;
}


#upper_page #navi li a {
 text-decoration: none;
    color:#102060;
    font-size: 1.4em;
}


#upper_page #navi li a:hover  {color: #6a65a7;
}
#upper_page #navi li a.active {font-weight:bold; 
color: #102060;
}



/* upper_page PAGE CONTENT *********************************************************/


#upper_page #content  {
	font-size: 1.1em;
    margin-top: 30px;
    text-align: left;
}


#upper_page #content .index_img {
 margin-left: 50px;
}


#upper_page #content h1 {
    color: #102060;
    font-size: 3em;
    font-weight: normal;
    padding-bottom: 10px;
    display: inline-block;
}


#upper_page #content .dick {
    font-family:Times New Roman;  color: #102060;
    font-size: 1.4em; text-transform: uppercase
}





/*relative Variante anfang */

#content_wrapper{
  padding: 0;
  text-align: right;
}

#content_wrapper div.content_img {
  position: relative;
  margin: auto 0 0 auto;
	display: block;
	width: 250px;
	height: 374px;
}

div.content_img img{
  margin-top: -344px;
  z-index: 10;
}

/* rel Variante Ende */



#upper_page #content p,
#upper_page #content dt,
#upper_page #content li, 
#upper_page #content dd {
    font-size: 1.3em;
    color: #333;
}


#upper_page #content li {
	color: #102060;
}


#upper_page #content p.special {
color: #680148;
}


#upper_page #content span {
    	color: #102060;
}


#upper_page #content td {
background-color: white;padding:0px; margin:0px
}


#upper_page #content span.roemisch {
	font: 15px Verdana;
color: #666;
}



.container_content_text {
width: 520px;
	margin-bottom: 40px;
}



/* upper_page PAGE CONTENT IMAGE ************************************/


#upper_page #content img.index      {
	float: right;
	width:  110px;  
	margin-left: 20px;
}


#upper_page #content img.ueber_mich {
	float: right;
	width:  150px;  
	margin-left: 20px;
}


#upper_page #content img.leistungen {
	float: right;
	height: 304px;
	width: 403px;
}

#upper_page #content img.preise     {
	float: right;
	width:  266px;	
}


#upper_page #content img.referenzen {
	float: right;
	height: 267px;
	width: 388px;
}


#upper_page #content img.kontakt    {
	float: right;
	height: 267px;
	width: 400px;
	margin-bottom: 50px;
}





/* upper_page PAGE CONTENT HEADER SPRITE ************************************/

#upper_page #content h2.content_header_index,
#upper_page #content h2.content_header_ueber_mich,
#upper_page #content h2.content_header_leistungen,
#upper_page #content h2.content_header_preise,
#upper_page #content h2.content_header_referenzen,
#upper_page #content h2.content_header_kontakt,
#upper_page #content h2.content_header_datenschutz, 
#upper_page #content h2.content_header_haftungsausschluss 
{
background: url(images/content_header_sprite.png) no-repeat;
	height: 46px;
	width: 750px;
	display:block;
	margin-bottom: 30px; margin-top:20px;
}


#upper_page #content h2.content_header_index 	  {
background-position: 0 0;
}

#upper_page #content h2.content_header_ueber_mich {
background-position: 0 -45px;
}

#upper_page #content h2.content_header_leistungen {
background-position: 0 -90px;
}

#upper_page #content h2.content_header_preise     {
background-position: 0 -135px;
}

#upper_page #content h2.content_header_referenzen {
background-position: 0 -180px;
}


#upper_page #content h2.content_header_kontakt 	  {
background-position: 0 -225px;
}

#upper_page #content h2.content_header_haftungsausschluss {
background-position: 0 -270px;
}

#upper_page #content h2.content_header_datenschutz{
background-position: 0 -315px;
}


/***/


#upper_page #content h2.content_header_index span,
#upper_page #content h2.content_header_ueber_mich span,
#upper_page #content h2.content_header_leistungen span,
#upper_page #content h2.content_header_preise span,
#upper_page #content h2.content_header_referenzen span,
#upper_page #content h2.content_header_kontakt span,
#upper_page #content h2.content_header_datenschutz,
#upper_page #content h2.content_header_haftungsausschluss span
{
	display: none;
}

#upper_page h3 {
  font-family:Times New Roman;    color: #102060;
  font-size: 2em;
}


/* LOWER PAGE *****************************************************************/

#lower_page {
    background: url('images/bg_lower_page.png');
    height: 200px;
}

#lower_page h3 {
    font-family:Times New Roman;  color: #102060;
    font-size: 2em;
}

#lower_page p,
#lower_page th,
#lower_page td,
#lower_page li, #lower_page dl 
{
	font-size: 1.3em;
}

#lower_page dt {
    color: #102060;
}

#lower_page #footer p {
    font-size: 1.1em;
}

#lower_page #footer .haftung{
    text-align: left;
    font-size: 1.1em;
    float: left;
    margin: 0;
    padding: 0;
}



/* ---------------------------------------------- Tablet ------------------------------------*/

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

.container {width:90%; margin:10px;}
.container h1.logo{
  	margin-top:10px;
	width:100%;
 	display:block;
     	float: left;
	text-indent:-9999px;
	background:transparent url(images/logo.png) no-repeat top left;}

.span-24 {width:90%: margin:10px;}
.span-20 {width:90%: margin:10px;}
.span-9 {width:90%;margin:10px;}
.span-6 {width:90%;margin:10px;}
.span-4 {width:90%;margin:10px;}

#upper_page #navi {
    	margin: 0 0 0 0;
	margin-top:30px;
    	text-align: left;
width:100%}

#upper_page #navi li {
    display: inline;
    list-style: none;
    margin-left: -15px;	margin-right: 30px;}

#upper_page #content img.index {
	float: right;
	width:  110px;  margin: 20px;}

.container_content_text {
	width: 90%;
	margin-bottom: 40px;}

.container_header_index {
	width: 100%;}
}

/* ---------------------------------------------- Handy ------------------------------------*/


@media only screen and ( max-width: 440px ) 
{
#upper_page #navi {
    	margin: 0 0 0 0;
	margin-top:30px;
    	text-align: left;}

#upper_page #navi li {
    display: inline;
    list-style: none;
    margin-left: -15px;	margin-right: 25px;
    font-size: 10px;}

.container h1.logo{
  	background:transparent url(images/logosm.png) no-repeat top left;}
}