﻿/* css reset */

html, /*body{ margin:0; padding:0; border:0;background:#FFFFFF;font-size:12px } */
 body {
       margin: 0;
       width: 900px  
       padding: 0;
       overflow-x: hidden;
	

  	 @media (max-width: 768px) {   width: 768px;  }  
	 @media (max-width: 480px) {width:480px;}       
	

 }
/*  Standardmäßig Bild er klein und nur eine Spalte */
.responsive-image {       display: none;  }
.responsive-text {    display:  block; }


/*  Bild anzeigen, wenn Bildschirmbreite größer als 769px ist */
@media (min-width: 900px) {
    .responsive-image {   display: block;    }
    .responsive-text  {   display: none;     }

}

div, span, article,aside,footer,header,hgroup, nav, section, h1,h2,h3,h4,h5,h6,blockquote, a,ol,li,table,tr,th,td,tbody,tfoot,thead{
margin:0; padding:0; border:0;background:transparent;vertical-align:baseline;}

img{margin:0; padding:0; border:0;}

table, tr,th,td,tbody,tfoot,thead{margin:0; padding:0; border:0;background:#FFFFFF;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}

input, select, textarea,form,fieldset{margin:0; padding:0; border:0;}

article, aside, dialog, figure, footer, header,hgroup,nav,section{display:block}

h1,h2,h3,h4,h5,h6,p,blockquote, td,th,a,caption,em.strong,strike,li 
{	font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:100%; 
	color:#000000;
	line-height:100%;
	text-indent:0;
	text-decoration:none;
	text-align:left;
	
}
ol,ul{list-style:none;}
/* end css reset*/
/* global*/
html{}
body{background-color:#FFFFFF;}
/* Headings */
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#000000;}
h1{	font-size:24px;}
h2{	font-size:20px;}
h3{	font-size:16px;}
h4{	font-size:14px;font-style:normal;font-weight:normal;}
h5{	font-size:14px;}
h6{	font-size:12px;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}


/* Text Elements */
p		{color:#000000;font-size:12px;line-height:150%;}
p .left {magin: 1.5em 1.5em 1.5em 0; padding: 0;}
p .right{magin: 1.5em 0 1.5em 1.5em; padding: 0;}

a			{ }
a:link		{color:#000000;}
a:visited	{color:#000000;}
a:active	{color:#0000F0;}
a:focus		{color:#0000FF;}
a:hover		{color:#0000FF;}

blockquote	{color:#000000;font-size:12px;}
strong 		{font-weight:bold;}
em 			{font-style: italic;}
 
/* images */

/* lists */
ul			{	}
ol			{list-style-type:decimal;}

ul li		{color:#000000;font-size:12px;}
ol li		{color:#000000;font-size:12px;}

dl			{	}
dt			{	}
dd			{	}

/* tables */
table		{width:100%}
tr			{margin:0 0 0 10 px;padding:0px 0px;}
td			{font-size:14px;text-align:left;line-height:160% }

.odd		{background-color:#eee;}
.even		{background-color:#fff;}

th			{font-weight: bold;}
thead, th	{background: #ccc;}

tbody		{}
th,td,caption{	}
caption		{}

tfooter		{	}
.tfooter	{ background-color:#ccc;text-align:center;font-style:italic;}
caption		{background::#efefef;}


/*containers */

#wrapper{	 @media (min-width: 900px) { width:900px;}    
             	 @media (max-width: 768px) {width:768px;}      
		 @media (max-width: 480px) {width:480px;}    
		margin:0px auto;
		background:#FFFFFF;
	
		}

#top			{background-color:#FFFFFF; width:100%; padding:10px 0px;overflow:hidden;	
					border-bottom:1px #cccccc solid;}
#logo			{margin:20px 0 0 10px;	float:left;}
#social-media	{float:right; margin:0px 30px 0 0;	}
#social-media p	{color:#000000; font-size:12px; margin:4px 10px 4px 0px;}

#social-media img	{width:24px; height:24px;}
#social-media ul li {display:inline;}

#topnav			{background-color:#AFAFAF;clear:both;	}
#topnav	ul 		{width:860px; float:left; margin:0px; background-color:#CFCFCF;
					border-bottom:3px  #0000FF solid;}
#topnav	ul li	{display:inline;font-size:14px;	font-weight:bold;}
#topnav	ul li a	{float:left; padding:10px 20px;}
#topnav a:link		{color:#000000;font-weight:bold;}
#topnav a:visited	{color:#000000;}
#topnav a:active	{color:#00002f;}
#topnav a:hover		{color:#0000ff; background-color:#fffffff;}
#topnav a:focus		{color:#0000f0;}

banner			{clear:both;width:100%;
					padding:0px 0px;
					border-bottom:3px #0000FF solid; 
					background-color:#FFFFFF;
				}
#banner img 	{width:100%;}


#subbanner		{width:100%;background-color:#CFCFFF;padding: 5px 0px;overflow:hidden;	}
#subbanner h3	{color:#000000;font-size:24px; font-weight:bold;text-align:center;line-height:180%}


#content		{ width:600px; float:left;
					padding:20px;
					margin-left:0px;
					background-color:#FFFFFF;
				}
#content h1		{margin:0 0 20px 0;font-size:32px;border-bottom:1px #777777 solid;padding:20px 0px;}
#content h2		{margin:0 0 6px 0;padding:0px 0px;}
#content h3		{margin:15px 0 6px 0;padding:0px 0px;}



#content p		{margin:0px 0px;line-height:160% ;font-size:14px;text-align:justify}
#content ul 	{list-style:disc;margin:6px 0 12px 0;padding:0 15px;}
#content ul li	{line-height:160% ;font-size:14px;}
#content img	{width:80%; height:auto;}
#content img.special-img { width:40%;  height:auto; }



				
#rightside		{
					margin-left:660px;
					background-color:#FFFFFF;
				}
#rightside img		{margin:20px 0 20px 0px;}

#rightside h2		{margin:20px 0 20px 0;font-size:24px;}
	
#rightside p		{margin:0px 0px;line-height:160% ;font-size:14px;text-align:left}
#rightside ul 		{list-style:disc;margin:20px 0 0px 0;}
#rightside ul li	{line-height:160% ;font-size:14px;}



			

#footer {width: 100%;padding: 10px 0px;; clear:both;background-color:#CFCFFF;}
#footer p{text-align:center;color:#000000}

#box1	{	}
#box2	{	}
#box3	{	}
#box4	{	}


/*Forms */

form	{text-align:left; margin:=20px;}
label, submit, input, textarea {
	border:0; padding:0; margin:0; background:none;
	}

label	{
		float:left; width:150px;text-align:right; display:block
		}
input, textarea	{
		border:1px #333 solid;margin-left:10px;
		}
		
input	{ width:280px; margin-bottom:16px;
		}

textarea{ width:280px; height:150px;margin-bottom:16px;
		}

select	{	}

.copyright-text	{font-size:80%; font-style:italic; color:#000000;}
.footer-text	{font-size:80%; font-style:normal; color:#000000;}
.title			{font-size:18px; font-weight:bold; color:#000000;}
.subtitle		{font-size:14px; font-style:italic; color:#000000;}

.artist			{font-size:16px; font-weight:bold; color:#000000;}
.author			{font-size:14px; font-weight:bold; color:#000000;}
.editor			{font-size:14px;  font-style:italic; color:#000000;}

.pub-date		{font-size:10px;  font-style:italic; color:#000000;}
.articl-date	{font-size:10px;  font-style:italic; color:#555;}
.location		{font-size:10px;  font-style:italic; color:#000000;}

.float-right	{float:right;}
.float-left		{float:left;}
.clear			{clear:both;}

.hide			{display:none;}
.block			{display:block;}
.inline			{display:inline;}

.first			{font-weight:bold;}
.last			{font-weight:bold;}
.left			{font-weight:bold;text-align:left;}
.right			{font-weight:bold;text-align:right;}

.added			{background:#D7D7FF;}
.removed		{background:#FFCECE;color:#FF0000;}
.changed		{background:#FFFF00;}

.error, .allert, .notice, .success, .info	{
	padding:0.8em; margin-bottom:1em; border:2px solid #ddd; }
	
.error, .allert	{background:#fbe3e4; color:#8a1f11;border-color:#fbc2c4;}
.notice			{background:#fff6bf; color:#514721;border-color:#ffd324;}
.success		{background:#e6efc2; color:#264409;border-color:#c6d880;}
.info			{background:#d5edf8; color:#205791;border-color:#92cae4;}

.error a		{color:#8a1f11 ;} 
.alert a		{color:#8a1f11 ;} 
.notice a		{color:#514721 ;} 
.success a		{color:#264409 ;} 
.info a			{color:#205791 ;} 



