/* Body attribute, incl. Calibri font,sofern vorhanden ansonsten die gelistete alternativen */
body                {   width:                80%;
                        margin:               10px auto;
                        background-color:     white;
                      /*  background: url(../img/processview.png);
                        opacity: 0.8;*/
                       /* padding:              5px;*/
                        font-family:  Copperplate, Calibri, Microsoft Tai Le, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
                    }


header              {   width:                100%;
                       /* margin:               10px auto;
                        padding:              5px;*/
                    }



footer              {   width:                100%;
                        text-align:           right;                
                        font-weight:          lighter;     
                        color:         		  grey; 
                        width:                80;
                        margin:               10px auto;
                        background-color:     rgba(29,133,132, 0.1);
                        padding:              5px;      
                    }
				                     
aside               {
                        width:                30%; 
                        float:                left; 
                        margin:               10px auto;
                        background-color:     white;  
                        padding:              5px;      
                    }

h1                  {   color:                rgb(29,133,132);     }
h2                  {   color:                rgb(29,133,132);    }
h3                  {   color:                rgb(60,128,60);     }
h4                  {   color:                rgb(60,128,60);     }
hx                  {   color:                grey;                 
						font-weight:          bold;}
px                  {   color:                rgb(60,128,60);                 
						font-size:            smaller;}
td					{ 	color:				  grey;}
td.wrap				{ 	white-space: normal;}


/* color definitions */

.color_red				{color: rgb(218,63,50);}
.color_petrol			{color: rgb(29,133,132);}
.color_blue			{color: rgb(2,47,80);}
.color_petrol_opace		{color: rgba(29,133,132, 0.2);}
.color_orange		{color: rgb(228,120,40);}

/* List classes for dropdon menu */
li.dropdown 		{ 	margin-left: 		0;
						padding-left: 		0;
    					display: 			inline;
						list-style-type: 	none;}
						
li.dropdown:not(:first-child)::before { 	content: "-";
								margin: 0.6em;
								color: grey;}
li.dropdown-gruen  {     	margin-left: 		0;
						padding-left: 		0;
    					display: 			inline;
						list-style-type: 	none;}
						
						
li.dropdown-gruen:not(:first-child)::before { 	content: "-";
								margin: 0.6em;
								color: grey;}		
								
/* list classes for floated vertical list */	
li.va_r				{ 	margin-left: 	60px;
						color:			grey; 
						display: block;
						list-style-type: 	none;
						margin:	2em;}	
li.va_r::before		{ 	content: "-";
						margin: 1em;
						color: grey; }
						
					/* list classes for horizontal list */	
li.ha_r				{ 	margin-left: 	0;
						padding-left: 	0;
						color:			grey; 
						display: 		inline;
						list-style-type: 	none;
						margin: 			0.6em;
						}	
li.ha_r:not(:first-child)::before		{ 	content: "-";
						margin: 0.6em;
						color: grey; }
	
												

/* text decoration of none, denn ansonsten haben wir die blöde underlines */
li                  {   text-align:           justify;
                        font-family:   Calibri, Microsoft Tai Le, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
a                   {   color:                grey;                 
						text-decoration:      none;} 
a.green				{   color:                rgb(60,120,60);      
						font-weight:          bold;   
						text-decoration:      none;}		

p                   {   color:                grey;                 
						text-align:           justify;}
p.text              {
                        font-family:   Calibri, Microsoft Tai Le, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

p.whitebig			{	color:			      white;			
						font-weight: 		  bold; 
						text-shadow: 		  2px 2px 2px grey;
						font-size:			  x-large;}
p.bold              {   font-weight:          bold;}
p.cal-year			{ 	color:			      grey;			
						font-weight: 		  bold; 
						text-shadow: 		  2px 2px 2px black;
						font-size:			  xx-large;}
p.cal-month			{ 	color:			      rgb(218,63,50);			
						font-weight: 		  bold; 
						text-shadow: 		  2px 2px 2px grey;
						font-size:			  x-large;}
p.cal-day			{ 	color:			      rgb(60,120,60);			
						font-weight: 		  bold; 
						text-shadow: 		  2px 2px 2px grey;
						font-size:			  x-large;}

p.btext             {   color:                  rgb(29,133,132);
                        font-size:			  large;
                        }
p.ntext          {   color:                  grey;
                        font-family:   Microsoft Tai Le, Calibri,  Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

                    }
	
ul                  {color: grey;}

/* Attribute für den link (a) text werden vererbt, und stehen also hier */

.topindex           {   text-align:           right;                 
						font-weight:          bold;        
						color:         		  grey;
                        position:             relative;}
.r-allign           {   color:                grey; 
						text-align:           right;}
	

/* Blöde klasse nur um die referenzen in der dropdownliste eine andere farbe zu geben, vererbt werden die ansonsten
wie als a definiiert, oder standard blau */
.dropdownitem       {   color:                white;   }
.sideitem       	{   color:                rgb(60,128,60);
						font-weight:          bold;     }
.dropdownitemsmall  {   color:                rgb(228,120,40);
						font-size:  		  smaller; 
						font-weight:       	  lighter;}
li.dropdown           {   position:             relative;
						display:              inline-block;
                        text-align:           left;}
.showimage          {   position:             relative;
						display:              inline-block;}
.dropdown-gruen     {   position:             relative;             
						display:              inline-block;}
.boldtext           {   font-weight:          bold;}


/* dropdown contents: initialy display none, ansonsten sind alle listen geöffnet. Die Position ist auf jedem fall nicht
   relativ, da ansonsten alles sich nach unten verschiebt beim öffnen. Ach und z-index setzen, damit die dropdowns on top
   sind, warum dann auch immer. */
.dropdown-content   {   font-weight:          lighter;              
						display:              none;        
						position:      		  absolute;
                        background-color:     rgba(29,133,132, 0.6);
                        min-width: 			  160px;   
                        box-shadow: 		  0px 8px 16px 0px rgba(0,0,0,0.2);
                        padding:              12px 16px;            
                        z-index: 			  1; }
.dropdown-content-gruen    {   font-weight:   lighter;              
						display:              none;        
						position:      		  absolute;
                        background-color:     rgba(60,128,60, 0.6); 
                        min-width: 			  160px;   
                        box-shadow: 		  0px 8px 16px 0px rgba(0,0,0,0.2);
                        padding:              12px 16px;            
                        z-index: 			  1; }
.showimage-content  {   font-weight:   		  lighter;              
						display:              none;        
						position:             absolute;
                        background-color:     rgba(60,128,60, 0.6);
                        width: 				  80%; 
                        min-width: 			  160px;   
                        box-shadow: 		  0px 8px 16px 0px rgba(0,0,0,0.2);
                        padding:              12px 16px;            
                        z-index: 			  1; }

                   
.dropdown:hover .dropdown-content 				{display: block;}
.dropdown:focus .dropdown-content 				{display: block;}
.dropdown-gruen:hover .dropdown-content-gruen 	{display: block;}

.showimage:hover .showimage-content 			{display: block;}



								
.rotate 		{ 	color: white;
					
					-webkit-transform: 			rotate(-90deg);		/* Safari */
					-moz-transform: 			rotate(-90deg);	/* Firefox */
					-ms-transform: 				rotate(-90deg); 	/* IE */
					-o-transform: 				rotate(-90deg); 	/* Opera */
					filter: 					progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	/* Internet Explorer */
					display: 					inline-block;
					height: 					"90%";}
					
div.calendarentry		{ 	background-image:					url(../img/leistungen/plakette.png);
					width:		100px;
					height:		100px;
					background-size: 100px 100px;
    				background-repeat: no-repeat;
    				position: auto;
				 }
				 
				 
.testborder {border: 1px solid red;}
p.calendarentry-month {
	 color:  rgb(60,120,60);
	 
	 font-size: 22px;
	 margin-top: 0;
	 margin-left: auto;
	 margin-right: auto;
	 padding-left: 0;
	 padding-top:0;
	text-align:center;
	position: absolute;}

p.calendarentry-day {
	 color:  rgb(218,63,50);
	 font-size: 60px;
	 margin-top: 0;
	 margin-left: 0;
	 margin-bottom: 0;
	 margin-right: 0;
	 padding-left: 0;
	 padding-top:0;
	text-align:center;
	position: absolute;
	/* stretch */
    -webkit-transform:scale(1.2,1.8); /* Safari and Chrome */
    -moz-transform:scale(1.2,1.8); /* Firefox */
    -ms-transform:scale(1.2,1.8); /* IE 9 */
    -o-transform:scale(1.2,1.8); /* Opera */
    transform:scale(1.2,1.8); /* W3C */
	
	
	}
	
p.calendarentry-year {
	 color:  grey;
	 font-size: 20px;
	 margin-top: 0;
	 margin-left: 10px;
	 margin-bottom: 0;
	 margin-right: 0;
	 padding-left: 0;
	 padding-top:0;
	text-align:center;
	position: absolute;
	
	
		/* stretch */
    -webkit-transform:scale(1.5,1); /* Safari and Chrome */
    -moz-transform:scale(1.5,1); /* Firefox */
    -ms-transform:scale(1.5,1); /* IE 9 */
    -o-transform:scale(1.5,1); /* Opera */
    transform:scale(1.5,1); /* W3C */
   }
	
div.calendarentry-month {
						width: 100px;
						height: 40px; 
						top:0;
						left:0;
						position:relative;
						text-align: justify;
						}
/* Also hier kann ich text-alignen was ich will, den der rotate macht alles wieder hin */			
div.calendarentry-year { width: 60px;
						height: 25px; 
						text-align:bottom left ; 
						color: rgba(126,126,126,0.7);
						left:-20px;
						bottom:-50px;					
						float: left;
						font-size: 20px;
											-webkit-transform: 			rotate(-90deg);		/* Safari */
					-moz-transform: 			rotate(-90deg);	/* Firefox */
					-ms-transform: 				rotate(-90deg); 	/* IE */
					-o-transform: 				rotate(-90deg); 	/* Opera */
					filter: 					progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	/* Internet Explorer */
					display: 					inline;
						position:relative;
						}

div.calendarentry-day { width:75px;
						height:75px; 
						font-size: 75px;
						text-align: center;
						right: 5;
						bottom: 20px;
						float:right;
						color: rgb(218,63,50);
						position: relative;}