/**
 * Projekt Vorlagenkatalog 
 *
 * Basisstylesheet Techfak 2013
 *
 * @mod_name        mediaqueries
 * @mod_desc        Zusatzdesign für kleinere Bildschirmgrößen
 *
 * @copyright       Copyright 2005-2012, RRZE
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/)
 * @link            http://www.vorlagen.uni-erlangen.de
 * @package         css
 * @version         1.0
 * @lastmodified    02/2013
 */



/*  ------------------------------------------------------------------------------------------------------------
						BREAKPOINT  1000px
--------------------------------------------------------------------------------------------------------------*/
	
@media screen and (max-width: 1000px) {
	
	/*div#kopf {
		background-image: none;
	}*/
	
}

/*  ------------------------------------------------------------------------------------------------------------
						BREAKPOINT  960px
--------------------------------------------------------------------------------------------------------------*/
	

@media screen and (max-width: 960px) {
    /* Definitionen nur für maximale Fenster- bzw. Bildschirmbreite von 768px - Standard für Tablets */
	
	/*  ------------------------------------------------------
	GENERAL
	--------------------------------------------------------*/
	
	body {
		max-width: 960px;	
		overflow: auto;	
    	-webkit-text-size-adjust: none;
	}
 
 	div#seite {
		background: #fff url(/grafiken/techfak-2013/balken-bunt.gif) no-repeat top left;
		padding-left: 0;	
 	}
 	
 	#main {
 		position: relative;
 		padding-top: 0;
 		padding-left: 10px;
 	}
 	
 	
 	/*  ------------------------------------------------------
	HEADER
	--------------------------------------------------------*/
	
	div#kopf {
 		margin-left: 27px;
 	}
 	
 	div#kopf div#logo {
		height: 135px;
		padding-left: 0px;		
		/* background-size: 40%;			nur wichtig bei basemod_lehrstuhllogo */	
	}
	
	div#kopf div#logo img {
		max-width: 50%;
		height: auto;
	}
	
	div#kopf div#logo p {
		background: transparent;
		max-width: 40%;
		padding-right: 10px;
		right: auto;
		line-height: 110%;
	}
	
	div#kopf div#logo p .description {
		padding-top: 5px;
	}
	
	div#kopf div#titel {
		padding-right: 0;
		left: 12.9em;
 	}
 	
 	div#kopf div#hauptmenu {
 	}
 	
 	div#kopf div#suche {
 		width: 10.6em;
 		left: 10px;
 	}
 	
 	div#kopf div#suche input#suchbegriff {
 		width: 9.4em;
 		text-overflow: ellipsis;
 	}
 	
 	div#kopf div#breadcrumb {
 		left: 12.9em;
 	}
 	
 	/*  ------------------------------------------------------
	MENU
	--------------------------------------------------------*/
	
	div#menu {
		width: 10.6em;
		margin-left: 10px;
	}
	
	div#menu div#bereichsmenu li a,
	div#menu div#bereichsmenu li span,
	div#menu div#bereichsmenu li li a,
	div#menu div#bereichsmenu li li span,
	div#menu div#bereichsmenu li li li a,
	div#menu div#bereichsmenu li li li span,
	div#menu div#bereichsmenu li li li li a,
	div#menu div#bereichsmenu li li li li span {
		padding: 8px 10px;
	}
	
	div#menu div#kurzinfo img {
		max-width: 100%;
	}
	
	/*  ------------------------------------------------------
	SIDEBAR
	--------------------------------------------------------*/
	
	div#main div#sidebar {
		float:none;
		margin: 10.9em 20px 0 16.9em;
		width: 300px;
		min-height: 0;
		width: auto;
 	}
 	
 	   
    /*  ------------------------------------------------------
	CONTENT
	--------------------------------------------------------*/
    
    div#content {
		float: none;
		min-height: 0;
	}
    
    /*  ------------------------------------------------------
	FOOTER
	--------------------------------------------------------*/
    
    div#footer div#footerinfos div#zusatzinfo {
    	padding-right: 10px;
    }
    
    div#footer div#footerinfos div#flaggen, 
    div#footer div#footerinfos div.flaggen, 
    div#footer div#footerinfos div#languagebar {
    	top: 170px;
    }
}

/*  ------------------------------------------------------------------------------------------------------------
						BREAKPOINT  720px
--------------------------------------------------------------------------------------------------------------*/
	

@media screen and (max-width: 720px) {
	
	div#content div.feedrahmen .feedeintrag {
		float: none;
		width: 100% !important;
		clear: both;
	}
	
	div#kopf div#logo p {
		font-size: 1.3em;
	}
	
}

/*  ------------------------------------------------------------------------------------------------------------
						BREAKPOINT  570px
--------------------------------------------------------------------------------------------------------------*/
	

@media screen and (max-width: 570px) {
	/* Content-Anordnung bleibt, nur Bilder im Header fallen weg bei zu kleinen Auflösungen */
	
	div#kopf div#logo p {
		font-size: 1.2em;
	}
	
}

/*  ------------------------------------------------------------------------------------------------------------
						BREAKPOINT  480px
--------------------------------------------------------------------------------------------------------------*/
	
@media screen and (max-width: 480px) {
    /* Definitionen nur für maximale Fenster- bzw. Bildschirmbreite von 480px - Standard für Smartphones */
  
	/*  ------------------------------------------------------
	GENERAL
	--------------------------------------------------------*/
	
	body {
		max-width: 480px;	
		overflow: auto;	
    	-webkit-text-size-adjust: none; /* Wichtig für iPhone im Landscape Mode */
	}
	
	div#seite {  
		border-width: 0;
		min-width: 0;
		background: #fff url(/grafiken/techfak-2013/balken-bunt.gif) no-repeat top left;
		background-size: auto 110px;
	}
	
	img{
        max-width:100%;
        height:auto;
    }
	
	div {
		width: auto;
	}
	
	/*  ------------------------------------------------------
	HEADER
	--------------------------------------------------------*/
	
	div#kopf {
		padding-bottom: 0;
		min-width: 0;
		position: relative;
		background-image: none;
		margin-left: 21px;
	}
	
	div#kopf div#logo {
		position: relative;
		height: auto;
		padding: 0 10px 0 0;
		min-height: 109px;
		border-bottom: 1px solid #ADB4BB;
		background-size: 40%;			/* nur wichtig bei basemod_lehrstuhllogo */
	}
		
	div#kopf div#logo img {
		margin: 0;
		padding-left: 10px;
		padding-top: 10px;
		padding-bottom: 0;
		max-height: 75px;
	}
	
	div#kopf div#logo p {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		top: 0;
		padding: 15px 5px 5px 5px;
		font-size: 120%;
		line-height: 110%;
		letter-spacing: 0;
		text-align: left;
	}
	
	div#kopf div#logo p a {
		text-decoration: none;
	}
	
	div#kopf div#titel {
		position: relative;
		top: 0;
		left: 0;
		padding: 0;
		margin-left: -21px;
	}
	
	div#kopf div#titel h1 {
		font-size: 1.1em;
		font-weight: bold;
		line-height: 100%;
		margin: 15px 5px 10px 15px;
	}
	
	div#kopf div#suche {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		text-align: right;
		background-color: transparent;
		width: 95%;
		max-width: 16em;
		margin-left: auto; 
		margin-right: 10px;
	}
	
	div#kopf div#suche p {
		white-space: nowrap;
	}
	
	div#kopf div#suche input#suchbegriff {
		width: 16em;
		max-width: 70%;
		position: static;
		top: auto;
		right: auto;
		left: auto;
		text-overflow: ellipsis;
	}
	
	div#kopf div#suche input[type="submit"] {
		max-width: 20%;
		position: static;
		top: auto;
		right: auto;
		left: auto;
	}
	
	div#kopf div#breadcrumb {
		display: none;
	}
	
	div#kopf div#sprungmarken {
		display: block;
		position: relative;	
		margin-left: -21px;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
	}
	
	div#kopf div#sprungmarken li a:active,
	div#kopf div#sprungmarken li a:hover,
	div#kopf div#sprungmarken li a:focus {
		position: absolute;
		top: -60px;
		right: 5px;
		width: auto;
	}
	
	div#kopf div#sprungmarken li.first a:link, div#sprungmarken li.first a:visited  {
		display: block;
		position: relative;
		width: auto;
		height: auto;
		font-size: 0.9em;
		left: 0;
		top: 10px;
		z-index: 5;
		padding: 7px 0px 7px 30px;
		text-decoration: none;
		background: url(/img/breadcrumbarrow.gif) no-repeat 10px 13px #EEE;
		border-bottom: 1px solid #DDD;
		color: #003366;
	}
	
	div#kopf div#sprungmarken li.first a:hover  {
		text-decoration: underline;
		color: #003366;
		width: auto;
		height: auto;
		padding: 7px 0px 7px 30px;		
		background: url(/img/breadcrumbarrow.gif) no-repeat 10px 13px #DDD;	
		text-align: left;
		border: 0;		
		border-bottom: 1px solid #DDD;
	}
		
	div#kopf div#hauptmenu {
		height: auto;
		background: none;
		padding: 0;
		border: none;
	}
	
	div#kopf div#hauptmenu h2{
		/*position: relative;
		top: 0;
		left: 0;
		color: green;*/
	}
	
	div#kopf div#hauptmenu ul {
		padding: 0;
		padding-top: 10px;
		min-width: 0;
		width: auto;
		margin-top: 1px;
	}
	
	div#kopf div#hauptmenu ul li {
		display: block;
		list-style-image: none;
		padding: 0;
		
	}
	
	div#kopf div#hauptmenu ul li.last {		
	}
	
	
	div#kopf div#hauptmenu ul li a:link, 
	div#kopf div#hauptmenu ul li a:visited, 
	div#kopf div#hauptmenu ul li span {
		margin: 0;
		width: 100%;
		text-align: center;
		padding: 7px 0;
		background-color: #f7f8f9;
		color: #003366;
		display: block;
		float: left;
		border-bottom:  1px solid #003366;
	}
	
	div#kopf div#hauptmenu ul li a:hover {
		background-color: #A4ABB3;
		color: #FFF;
		text-decoration: none;
		border-bottom: 1px solid #fff;
	}
	
	/*  ------------------------------------------------------
	MAIN
	--------------------------------------------------------*/
	
	div#main {
		border: 0;
		min-height: 0;
		position: relative;
		top: 10px;
		padding-left: 0;
		background: none;
		padding: 0;
	}
	
	div#menu {
    	width: 100%;
		margin: 0;
		display: block;
		clear: both;
		padding-top: 10px;
		position: static;
	}
	
	div#menu div#bereichsmenu {
    	width: 100%;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	
	div#menu div#bereichsmenu h2 {
		/*position: relative;
		top: 0;
		left: 0;
		color: green;*/	}
	
	
	div#menu, div#menu div#bereichsmenu, div#menu li {
		float: none;
		border: 0;		
	}
	
	div#menu div#bereichsmenu li a,
	div#menu div#bereichsmenu li span {	
		padding: 8px 10px;
		line-height: 150%;
	}
	
	div#menu div#kurzinfo {
		display: none;
	}
	
	div#content {
		position: static;
		margin: 0;
		overflow: auto;
		clear: both;
		padding: 10px;
		min-height: 0;
	}
	
	div#content h2 {
	    width: 100%;
	}
	
	div#content a#contentmarke {
		display: block;
		margin-top: 10px;
	}
	
	
	/*  ------------------------------------------------------
	SIDEBAR
	--------------------------------------------------------*/
	
	div#main div#sidebar {
		margin: 0;
		padding: 10px;
	}
	
	/*  ------------------------------------------------------
	FOOTER
	--------------------------------------------------------*/
	
	div#footer {
		padding: 0;
		margin-left: 0;
	}
	
	div#footer div#footerinfos div#tecmenu {
		margin-left: 0;
		position: static;
		text-align: left;
		width: auto;
		right: 0;
		font-size: 90%;
		white-space: normal;
		line-height: 160%;
	}
	
	div#footer #footermarke {
		display: none;
	}
	
	div#footer div#footerinfos div#tecmenu a {
	}
	
	div#footer div#footerinfos div#tecmenu a:hover {
		font-weight: normal;
	}
	
	div#footer div#footerinfos div#tecmenu ul {
		margin-left: 10px;
	}
	
	div#footer div#footerinfos div#tecmenu ul li span, div#footer div#footerinfos div#tecmenu ul li a, div#footer div#footerinfos div#tecmenu ul li a:link {
		padding-left: 0;
	}
	
	div#footer p.last_modified {
		font-size: 65%;
		margin-left: 10px;
		padding: 5px;
		display: block;
		margin-bottom: 0;
	}
	
	div#footer>p {
		visibility: hidden;
	}
	
	/*  ------------------------------------------------------
	SUBTEMPLATES
	--------------------------------------------------------*/
	
	.subcolumns { display:block; width:100%; table-layout: auto; }
    .subcolumns_oldgecko { width: 100%; float:none; }

    .c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l { float:none; width: 100%; }
    .c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { float:none; margin-left:0; width: 100%; }
	
	.subc  { padding:0; }
    .subcl { padding:0; }
    .subcr { padding:0; }
	
	/*  ------------------------------------------------------
	MISC
	--------------------------------------------------------*/
	
	div#zusatzinfo {
		position: static;
		width: auto;
		padding: 10px;
	}
	
	div#map {
		max-width: 460px;
		width: auto;
	}
	
	div.box_rechts, div.box_links, div.hinweis_wichtig, div.hinweisrechts, div.hinweis_rechts, div.hinweis, div.baustelle, div.klein_box_rechts, div.klein_box_links, div.klein_box, div.vollbox {
		float: none;
		margin: 20px;
		width: auto;
	}
	
	pre {
		width: auto;
	}
	
	div#inhaltsuebersicht ul {
		margin-left: 0;
	}
	
	div#inhaltsuebersicht ul ul {
		margin-left: 1em;
	}
	
	.infotext, .infologo {
		display: none;
	}
	
	div.feedrahmen .feedeintrag p, div.feedrahmen .feedeintrag h3 {
		margin-left: 0;
	}
	.prettyGalleryContainer, .gallery {
		display: none;
	}
		
	div#footer div#footerinfos div#zusatzinfo p {
		padding: 0;
		margin: 0 0 0.5em 0;
	}
	
	div#flaggen img, div.flaggen img, div#languagebar img {
		height: 15px;
	}
		
	div#footer div#footerinfos div#flaggen, 
	div#footer div#footerinfos div.flaggen, 
	div#footer div#footerinfos div#languagebar {
		position: static;
		right: 20px;
		height: 20px;
		padding-top: 10px;
		text-align: right;
	}
	
	
	/*  ------------------------------------------------------
	AUSKLAPPBARES MENU - erfordert 'Accessibility_NoLinkCurrent' in navigation.pl auf 0
	--------------------------------------------------------*/
	
	/*
	div#bereichsmenu ul li:last-child {
		display: none;
	}
	
	div#bereichsmenu>ul>li:first-child:before {
		content: "Menü ausklappen";
		margin-top: 3px;
		margin-right: 18px;
		font-weight: bold;
		float: right;
		width: 200px;
		bacgkround-color: #FFF;
		
	}
	
	div#bereichsmenu ul ul {
		display: none;
	}
	
	div#bereichsmenu ul:hover ul, div#bereichsmenu:hover ul li:last-child {
		display: block;
	}
	div#bereichsmenu ul:hover li:before {
		content: "";
	}*/
	
}