/*  ecadia Learning Manager Copyright (C) 2017 - 2021, ecadia GmbH
    	
    This code is confidential. Any redistribution or use in any means
    without the authors written agreement is not permitted.
    
    Nutzung und Änderungen aller Art sind nur nach Rücksprache mit dem Autor zulässig.
*/



@CHARSET "UTF-8";

@media ( min-width: 63.75em ) {
    .tileLayout .ui-content {
        padding: .625em; /* 10px */
    }
    /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
    By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
    .tileLayout .ui-listview {
        max-width: 62.5em; /* 1000px */
        margin: 0 auto;
    }
    /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
    but we stick to percentage values for demo purposes. */
    .tileLayout .ui-listview li {
        float: left;
		width: 23%;
        height: 230px;
        margin: .625em 1%;
    }

    .tileLayout .ui-listview li > .ui-btn {
        -webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
    }
    .tileLayout .ui-listview li.ui-li-has-thumb .ui-li-thumb {
        height: auto; /* To keep aspect ratio. */
        max-width: 100%;
        max-height: none;
    }
    /* Make all list items and anchors inherit the border-radius from the UL. */
    .tileLayout .ui-listview li,
    .tileLayout .ui-listview li .ui-btn,
    .tileLayout .ui-listview .ui-li-thumb {
        -webkit-border-radius: inherit;
        border-radius: inherit;
    }
    /* Hide the icon */
    .tileLayout .ui-listview .ui-btn-icon-right:after {
        display: none;
    }
    /* Make text wrap. */
    .tileLayout .ui-listview h2,
    .tileLayout .ui-listview p {
        white-space: normal;
        overflow: visible;
        position: absolute;
        left: 0;
        right: 0;
    }
    /* Text position */
    .tileLayout .ui-listview h2 {
        font-size: 1.0em;
        margin: 0;
        padding: .125em 0.8em;
        bottom: 60%;
        top: 2.4em; /* RS, 17.12.2016: zusammen mit dem Icon etwas nach open angehoben, vormals 20% */
    }
    .tileLayout .ui-listview p {
        font-size: 1em;
        margin: 0;
        padding: 0 0.8em;
        /* min-height: 50% !important; so wird der text ab der Mitte des Feldes angezeigt. Problem: überlappung mit langen Titeln */
        top: 7.3em; /* die 3 Teile unter dem Header */
        height: 100%;
    }

    .tileLayout .ui-listview h2,
    .tileLayout .ui-listview p {
	-ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .ui-listview .ui-li-has-thumb h2 {
        bottom: 35%;
    }
    .ui-listview .ui-li-has-thumb p {
        min-height: 35%;
    }
    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    .tileLayout .ui-listview .ui-li-aside {
        padding: .125em .625em;
        width: auto;
        min-height: 0;
        top: 0;
        left: auto;
        bottom: auto;
        /* Custom styling. */
        background: #990099;
        background: rgba(153,0,153,.85);
        -webkit-border-top-right-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
    .tileLayout .ui-listview li > .ui-btn:hover {
        -moz-box-shadow: 0px 0px 12px #999999;
        -webkit-box-shadow: 0px 0px 12px #999999;
        box-shadow: 0px 0px 12px #999999;
    }
    /* Animate focus and hover style, and resizing. */
    .tileLayout .ui-listview li,
    .tileLayout .ui-listview .ui-btn {
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .tileLayout .ui-listview  .ui-li-count {
    	right: 10px;
    	top: 24px;
    }

    /* sachtes Ausblenden bei abgeschnittenen Inhalten, aber nicht bei der aktiven Kachel, weil die einen farbigen Hintergrund hat */
	.tileLayout .ui-listview a:not(.ui-btn-active):before  {
	    width: 100%;
	    height: 70px;   /* ab der Hälfte soll das Ausblenden anfangen: Problem dabei: Links mit <a ...> sind nicht erreicbar weil der transparente Teil drüber liegt */
	    position:absolute;
	    left:0;
	    bottom:0;
	    z-index: 999;

	    background:linear-gradient(to bottom, rgba(246, 246, 246, 0), rgba(246, 246, 246, 1));
	}


	.tileLayout .ui-btn,
	.tileLayout .ui-btn:visited
	 {
	    background-color: #e6e6e6 /*{a-bup-background-color}*/;
	    border-color: #e6e6e6
	    color: #333;
	    text-shadow: 0px 1px 0px #f3f3f3;
	}

	.tileLayout .ui-btn:hover {
		background-color: 		#f1f1f1 /*{a-bhover-background-color}*/;
		border-color:	 		#ddd /*{a-bhover-border}*/;
		color: 					#333 /*{a-bhover-color}*/;
		text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #f3f3f3 /*{a-bhover-shadow-color}*/;
		border-radius: 0;
	}

}

.listview-icon32 {
	padding-right: 6px !important;
	margin-bottom: -2px !important;
}

.listview-icon24 {
	padding-right: 6px !important;
	margin-bottom: -2px !important;
}

.listview-icon16 {
	padding-right: 6px !important;
	padding-top: 6px !important;
	padding-left: 6px !important;
}

.ui-listview > .ui-li-has-icon > img:first-child,
.ui-listview > .ui-li-has-icon > .ui-btn > img:first-child {
    left: 0.625em;
    top: 0.6em;
    max-height: 2em;
    max-width: 2em;
    position: absolute;
}

.ui-listview > li h1, .ui-listview > li h2,
.ui-listview > li h3, .ui-listview > li h4,
.ui-listview > li h5, .ui-listview > li h6 {
    margin: 0.2em 10px;
}

.ui-listview > li p {
    margin: 0.1em 12px;
}

/* der linke Abstand damit das Icon gut hinpasst */
.ui-listview > .ui-li-has-icon > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-icon {
	min-height: 2.25em;
	padding-left: 3em;
	padding-top: .25em;
}