/* ====== Document ====== */

body::before {
    background-size: cover;
    background-attachment: fixed;
    content: '';
    will-change: transform;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
}

/* Default-Hintergrundbild um Darstellungsfehler im Fireforx zu vermeiden */
body::before {
    background-image: url('images/background1024.jpg');
}
@media (max-width: 512px)  and (min-resolution: 1.5dppx),
       (max-width: 1024px) and (max-resolution: 1.5dppx) {
  	body::before {
    	background-image: url('images/background1024.jpg');
  	}
}
@media (min-width: 513px)  and (max-width: 1024px) and (min-resolution: 1.5dppx),
       (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx)  {
  	body::before {
    	background-image: url('images/background2048.jpg');
  	}
}
@media (min-width: 1025px) and (min-resolution: 1.5dppx),
       (min-width: 2049px) and (max-resolution: 1.5dppx) {
  	body::before {
    	background-image: url('images/background3072.jpg');
  	}
}
body .pixelwork {
  	font-family: 'Roboto', 'Helvetica', sans-serif;
}


/* ====== Menu ====== */

.pixelwork .mdl-layout__header,
.pixelwork .mdl-navigation__link,
.pixelwork .mdl-layout__drawer-button {
  	/* dark background --> 'color: white', light background --> 'color: DimGray' */
  	color: DimGray;
  	font-size: medium;
}

.mdl_navigation__icon {
	/* Abstand zwischen Icons und Text im Drawer setzen */
	padding-right: 20px;
}

.mdl_navigation__icon-inactive {
	/* Abstand zwischen Icons und Text im Drawer setzen und noch nicht verwendete Navigationslinks farblich markieren*/
	color: LightGray;
	padding-right: 20px;
}

.mdl-navigation__text-inactive {
	/* Noch nicht verwendete Navigationslinks ausgrauen */
	color: LightGray;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link{
	/* Überschreiben von 'display' und hinzufügen von 'align-items' notwendig wegen Alignment-Bug in MDL 1.0.6 (soll in MDL 1.1 korrigiert werden) */
	display: flex;
	align-items: center;
}
	

/* ====== Grid ====== */

.pixelwork.mdl-layout .mdl-layout__content {
  	padding-top: 60px;
  	position: relative;
  	-webkit-overflow-scrolling: touch;
}

.pixelwork .pixelwork__cards {
  	max-width: 1080px /*900px*/;
  	padding: 0;
  	display: flex;
  	width: 100%;
  	margin: 0 auto;
  	flex-shrink: 0;
}

.pixelwork .mdl-card {
  	display: flex;
  	flex-direction: column;
  	align-items: stretch;
  	min-height: 360px;
}

.pixelwork .mdl-card__title {
  	padding: 16px;
  	flex-grow: 1;
}

.pixelwork .mdl-card__media {
  	box-sizing: border-box;
  	background-size: cover;
  	padding: 24px;
  	display: flex;
/*  flex-grow: 1;   	Flex (flex-grow,flex-direction,align-items) nicht für Logo-Kachel geeignet, daher nur bei spezifischen Elementen setzen */
/*  flex-direction: row; */
/*  align-items: flex-end; */
/*  cursor: pointer;  	Cursor nur über Bildern mit Links zum Pointer machen, daher nur bei spezifischen Elementen setzen */
}

.pixelwork .mdl-card__media a,
.pixelwork .mdl-card__title a {
  	color: inherit;
}

.pixelwork .mdl-card__supporting-text {
  	width: 100%;
  	padding: 16px;
  	min-height: 64px;
  	display: block; 			/* flex geht nicht gut */
  	align-items: center;
}

.pixelwork .mdl-card__supporting-text p {
/* 	max-width: 512px;  
  	margin: 16px auto;
  	font-size: 16px;
  	line-height: 28px;  */
   	margin-left: 16px;
   	margin-right: 32px;  /* rechter Rand muss groesser sein ald der linke, da sonst text abgeschnitten wird. Bug in MDL? */
}

.pixelwork .mdl-card__actions {
  	padding-left: 8px;
	padding-right: 8px;
  	flex-grow: 1;
}

/* Fixes for IE 10 */
.mdl-grid {
  	display: flex !important;
}


/* ====== Footer ====== */

.footer-btn {
  	background-position: center;
  	background-size: contain;
  	background-repeat: no-repeat;
  	background-color: transparent;
  	margin: 4px 4%;			/* Margin oben/unten = (Hoehe Footer - Hoehe Button) / 2, Margin rechts/links prozentual um vernünftige Darstellung auf Handys zu erreichen */
  	width: 24px;
  	height: 24px;
  	cursor: pointer;
  	opacity: 0.46;
  	border-radius: 2px;
}

.mdl-mini-footer--left-section {
	width: 45%;				/* Explizite Breite angeben, damit der prozentuale Abstand der Buttons funktioniert */
	text-align: left;		/* Alignment angeben, da es offensichtlich irgendwo in der Vererbung verloren geht (?) */
}

.mdl-mini-footer--right-section {
	width: 45%;				/* Explizite Breite angeben, damit der prozentuale Abstand der Buttons funktioniert */
	text-align: right;		/* Alignment angeben, da es offensichtlich irgendwo in der Vererbung verloren geht (?) */
}

.footer-btn__twitter {
  	background-image: url('./images/post_twitter_black_24dp.png');
}

.footer-btn__facebook {
  	background-image: url('./images/post_facebook_black_24dp.png');
}

.footer-btn__gplus {
  	background-image: url('./images/post_gplus_black_24dp.png');
}

.pixelwork .mdl-mini-footer {
  	margin-top: 60px;
  	margin-bottom: 32px;		/* TODO: Aendern auf 24px (oder 16px) wenn Tooltips oben verfügbar (MDL 1.1) */ 
  	height: 32px;
  	padding: 4px;
  	align-items: center;
  	background: rgba(255,255,255,0.5);	/* 50% semi-transparent */
  	box-sizing: border-box;
}


/* ====== Specific Cards ====== */

.pixelwork .card-logo .mdl-card__media {
/*	background-size: contain;  */
	background-repeat: no-repeat;
	background-image: url('./images/logo_img.jpg');
}


.pixelwork .card-logo .mdl-card__title {
  	padding-top: 0px;		/* Rand auf Null, um mittige Darstellung auf dem PC zu erreichen (8px sieht aber auf dem Handy besser aus) */
  	padding-bottom: 8px;
/*  Variante mit Logotext als Grafik (verkleinert sich automatisch)  */
/* 	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('./images/logo_text.png');  */
}

/* Variante mit Logotext als Text (verkleinert sich nicht) */
.pixelwork .card-logo > .mdl-card__title > h3 {
	width: 100%;
	margin: 0px;
	color: DimGray;
	text-align: center;
}

.pixelwork .card-info .mdl-card {
  	flex-grow: 1;
  	flex-direction: row;
  	align-items: flex-end;
}

.pixelwork .card-info .mdl-card__media {
/*	background-size: cover;  */
	background-repeat: no-repeat;
	background-image: url('./images/logo_banner.jpg');
}

.pixelwork .card-photo1 .mdl-card__media {
	background-repeat: no-repeat;
	background-image: url('./images/card_portrait_event.jpg');
}

.pixelwork .card-photo2 .mdl-card__media {
	background-repeat: no-repeat;
	background-image: url('./images/card_cosplay_fantasy.jpg');
}

.pixelwork .card-photo3 .mdl-card__media {
	background-repeat: no-repeat;
	background-image: url('./images/card_kunst_architektur.jpg');
}

.pixelwork .card-photo1 > .mdl-card__title > h3,
.pixelwork .card-photo2 > .mdl-card__title > h3,
.pixelwork .card-photo3 > .mdl-card__title > h3 {
	width: 100%;
	margin: 0px;
	color: DimGray;
	text-align: center;
}

.pixelwork .card-impressum .mdl-card__title {
	display: block;
	padding: 16px;
	background-color: Blue;
	align-items: center;
}

.pixelwork .card-impressum > .mdl-card__title > h2 {
	color: White;
	text-align: center;
	margin: 0px;
}

.pixelwork .card-impressum .mdl-card__supporting-text {
 	padding: 16px; 
	max-width: 800px;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.pixelwork .card-impressum .mdl-card__supporting-text p {
   	margin-left: 16px;
   	margin-right: 32px;  /* rechter Rand muss groesser sein ald der linke, da sonst text abgeschnitten wird. Bug in MDL? */
}

.pixelwork .card-impressum .mdl-card__media {
	height: 90px;	/* Grafik ist in doppelter Hoehe angegelgt und wird hier verkleinert, um Darstellungsqualität zu verbessern */
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('./images/name.png');
	background-color: White;
}


/* ====== End ====== */