/*////////////////////////////////////////
	=MEDIA QUERIES (RESPONSIVE DESIGN)
////////////////////////////////////////*/ 

/* display for 900 to 1000px resolutions */
@media only screen and (max-width: 1100px) {
.h80, .h100, .h170, .h200, .h250 , .h300, .h350, .h370, .h440{ height:auto; }

.bottom-links {position: static ;}
.inner{margin-top:10px !important;}
#page_margins {width: 100%;}
.textbox { width:99.9%;}
.infobox-wide, .infobox-small { border: none; margin: 10px 40px 20px 0; padding: 0 0 30px 0; border-bottom: 1px dashed #ddd; width:99.9%; }
.infobox-wide h3, .infobox-small h3 { display: inline-block; margin: 0 0 20px 0px; padding: 0; position: relative; }
 .infobox-smallsub { border: none; margin: 0px 10px 20px 0px; padding: 0 0 0px 0; width:99.9%; }
.textboxsub,.infobox-smallsub-link {border:none; border-bottom: 1px dashed #ddd; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; width:99.9%; }

.buttonbox-wide {
float: right;
margin: 0px -10px 10px 0px;
}

#topnav, #topnavMobile {
    right: 33px;
}

}

/* display for 650 to 950px resolutions */
@media only screen and (max-width:950px) {




#1header {height:120px; }
#1header img {width: 70%; }



#nav ul li a {font-size: 14px; padding: 0 9px 0 19px; }

#main { padding: 30px 18px 30px 68px;}

#col1 #loginKasten form { padding: 10px;}
#col1 #loginKasten h3 { padding: 10px 0 10px 10px; font-size: 16px; }
#submenu a, #submenu span { padding: 12px 10px 12px 10px;}

#col1 {width: 220px; }	
#col1 #loginKasten input[type="text"], #col1 #loginKasten input[type="password"] {width: 180px;}

#footer #kasten-rechts  { float: left;}
#footer #kasten-rechts .kasten_content { border-left: none; border-right: none; padding: 0; min-height: inherit;}

		
}



/* display for resolutions smaller that 750px */
@media only screen and (max-width: 750px) {
#submenu{display:none;visibility:hidden;}
#submenusmall{display:block;visibility:visible;}
body { font-size: 0.8em; line-height: 22px; }
.buttonbox-wide {
    float: right;
    margin: 0px -10px 10px 0px;
}


#header {height:40px; margin-bottom: 0px; }
#header a#logo { left: 20px; top: 20px;}
#nav, navMobile { right:58px; }
#nav ul {display: none;}
#header_rechts{display: none;}
#logopng {height:50px;margin-top: -10px;    padding-top: 15px;}
#nav, navMobile {margin: 110px 0 0 0; width: 100%; bottom:inherit; right:inherit; }

#nav select {margin-left: 20px; display: block; min-width: 173px; }

#brotkrumen ul {display: none;}
#topnav .selnav { display: block; }
#nav .selnav { display: block; }

#main {  padding: 20px;}
	
#col1 {width: 100%; }
#col1_content { padding: 0 0 30px;}
#col1 #loginKasten input[type="text"], #col1 #loginKasten input[type="password"] { width: 80%;}

#col3 {float: left; margin: 0; width: 100%; }	
#col3_content { padding: 0;}

.infobox-wide, .infobox-small { width:100%; }
.infobox-formular input { width: 50%;}

#footer_content { padding: 20px;}
#footer .kasten { width: 100%;}

a.btn {white-space: normal;display:inline-table; 	line-height: 20px;height: 20px;padding: 10px 40px 10px 10px !important;	}	
}


/* display for resolutions smaller that 550px */
@media only screen and (max-width: 550px) {
#topnav, topnavMobile { margin-top:83px; right:inherit; left:15px; }
table.history,table.history thead,table.history tbody,table.history th,table.history td,table.history tr,
table.newmpcount,table.newmpcount thead,table.newmpcount tbody,table.newmpcount th,table.newmpcount td,table.newmpcount tr,
table.showAccountsCurrent,table.showAccountsCurrent thead,table.showAccountsCurrent tbody,table.showAccountsCurrent th,table.showAccountsCurrent td,table.showAccountsCurrent tr,
table.showDocuments,table.showDocuments thead,table.showDocuments tbody,table.showDocuments th,table.showDocuments td,table.showDocuments tr
 { 
		display: block; 
	}
	table.newmpcount{
	
	width:auto;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	table.history thead tr, table.newmpcount thead tr , table.showAccountsCurrent thead tr, table.showDocuments thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.history tr { border: 1px solid #ccc; }
	table.newmpcount tr { border: 1px solid #ccc; }
	table.showAccountsCurrent tr { border: 1px solid #ccc; }
	table.showDocuments tr { border: 1px solid #ccc; }
	
	table.history td , table.newmpcount td, table.showAccountsCurrent td , table.showDocuments td{ 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	table.history td:before,table.newmpcount td:before ,table.showAccountsCurrent td:before,table.showDocuments td:before{ 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: wrap;
	}
	
	/*
	Label the data
	*/
	table.history td:nth-of-type(1):before { content: "Zeitraum"; }
	table.history td:nth-of-type(2):before { content: "Ermittelt durch*"; }
	table.history td:nth-of-type(3):before { content: "Zählerstand"; }
	table.history td:nth-of-type(4):before { content: "Verbrauch"; }
	table.history tfoot td:before { content: "" !important; }
	
	table.newmpcount td:nth-of-type(1):before { content: "Zähler-Ident-Nr."; }
	table.newmpcount td:nth-of-type(2):before { content: "Ablesedatum"; }
	table.newmpcount td:nth-of-type(3):before { content: "Zählerstand"; }
	table.newmpcount td:nth-of-type(4):before { content: "HT Sparte"; }
	
	
	table.showAccountsCurrent td:nth-of-type(1):before { content: "Belegdatum"; }
	table.showAccountsCurrent td:nth-of-type(2):before { content: "Vertragsnummer"; }
	table.showAccountsCurrent td:nth-of-type(3):before { content: "Belegnummer Belegart"; }
	table.showAccountsCurrent td:nth-of-type(4):before { content: "Beschreibung"; }
	table.showAccountsCurrent td:nth-of-type(5):before { content: "Betrag"; }
	
	table.showDocuments td:nth-of-type(1):before { content: "Belegdatum"; }
	table.showDocuments td:nth-of-type(2):before { content: "Vertrag"; }
	table.showDocuments td:nth-of-type(3):before { content: "Rechnungsnummer"; }
	table.showDocuments td:nth-of-type(4):before { content: "Zeitraum"; }
	table.showDocuments td:nth-of-type(5):before { content: ""; }
	
	table.showAccountsCurrent td.right,table.showDocuments td.right{
text-align:left;
}
	
 table.newmpcount td,table.newmpcount  th,table.showAccountsCurrent  th,table.showDocuments  th { 
  padding: 2px; 
  border: 1px solid #ccc; 
  text-align: right; 
  width:280px;
}

/* Zebra striping */
table.history tr:nth-of-type(odd) , 
table.newmpcount tr:nth-of-type(odd),
table.showAccountsCurrent tr:nth-of-type(odd),
table.showDocuments tr:nth-of-type(odd){ 
  background: #eee; 
}
table.history td,table.history th { 
  padding: 2px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

.infobox-smallsub { border: none; margin: 0px 0px 20px 0px; padding: 0 0 0px 0; width:100%; }
.textboxsub, .infobox-smallsub-link { border:none;border-bottom: 1px dashed #ddd; margin: 0px 0px 10px 0px; padding: 0 10px 0px 0; width:99.9%; background:  url("layout/pfeil-weiss-orange.png") no-repeat scroll right 10px center !important; }
.infobox-small { width: 99.9%;}
.infobox-wide { width:auto;}
.textboxsub .infobox-smallsub
{
    width: 90%;
}
.textboxsub.click
{
    background: transparent url("layout/pfeil-weiss-orange.png") no-repeat scroll right 10px center !important;
}



a.btn {white-space: normal;display:inline-table; 	line-height: 20px;height: 20px;padding: 10px 40px 10px 10px !important;	}
}