/* A bit custom styling */
.ul-pages .ui-listview li .ui-btn p, .ul-pages .ui-listview li .ui-btn h2 {
	color: #000;
}
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
/* A bit custom styling */
.ul-pages .ui-listview li .ui-btn p, .ul-pages .ui-listview li .ui-btn h2 {
	color: #fff;
}

.ul-pages .ui-listview li .ui-btn {
	color: #fff;
	background:none;
	text-shadow: 0 1px 0 #0A0A0A;
}
.ul-pages .ui-li-aside{color: #000;}
.ul-pages .ui-content {
padding: .5625em; /* 9px */
}
.ul-pages .ui-listview li {
float: left;
width: 47.60%; /* 50% incl. 2 x 1.2% margin */ /* 476 px*/
height: 13.639em; /* 218.218 px */
margin: .5625em 1.2%;
}
.ul-pages .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%;
}
.ul-pages .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. */
.ul-pages .ui-listview li,
.ul-pages .ui-listview li .ui-btn,
.ul-pages .ui-listview .ui-li-thumb {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* Hide the icon */
.ul-pages .ui-listview .ui-btn-icon-right:after {
display: none;
}
/* Make text wrap. */
.ul-pages .ui-listview h2,
.ul-pages .ui-listview p {
white-space: normal;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
/* Text position */
.ul-pages .ui-listview h2 {
font-size: 1em;
margin: 0;
padding: .125em 1em;
bottom: 40%;
}
.ul-pages .ui-listview p {
font-size: 0.8em;
margin: 0;
padding: 0 1.25em;
min-height: 40%;
bottom: 0;
}
/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
.ul-pages .ui-listview .ui-li-has-thumb h2,
.ul-pages .ui-listview .ui-li-has-thumb p {
background: #111;
background: rgba(0,0,0,.5);
}
.ul-pages .ui-listview .ui-li-has-thumb h2 {
	bottom: 15%;
	text-decoration: underline;
}
.ul-pages .ui-listview .ui-li-has-thumb p {
	min-height: 15%;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.ul-pages .ui-li-aside{min-height:1% !important;}

.ul-pages .ui-listview{min-height:inherit;}
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
.ul-pages .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;
}
/* If you want to add shadow, don't kill the focus style. */
.ul-pages .ui-listview li {
-moz-box-shadow: 0px 0px 9px #111;
-webkit-box-shadow: 0px 0px 9px #111;
box-shadow: 0px 0px 9px #111;
}
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
.ul-pages .ui-listview li > .ui-btn:hover {
-moz-box-shadow: 0px 0px 12px #33ccff;
-webkit-box-shadow: 0px 0px 12px #33ccff;
box-shadow: 0px 0px 12px #33ccff;
}
/* Animate focus and hover style, and resizing. */
.ul-pages .ui-listview li,
.ul-pages .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;
}

.ul-pages .ui-li-aside{font-size:1.2em !important;text-shadow:none !important;background:rgba(255,255,255,0.5) !important;padding:15px !important;color:#000000 !important}

}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
/* A bit custom styling */
.ul-pages .ui-listview li .ui-btn p, .ul-pages .ui-listview li .ui-btn h2 {
	color: #fff;
}
.ul-pages .ui-listview li .ui-btn .ui-li-aside {
	color: #fff;
	background:none;
	text-shadow: 0 1px 0 #0A0A0A;
}
.ul-li-aside{color:#000 !important;}
.ul-pages .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. */
.ul-pages .ui-listview {
max-width: 62.5em; /* 56.250 - 900px, 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. */
.ul-pages .ui-listview li {
width: 47.60%;
/*height: 234px;*/
margin: .625em 1%;
}
.ul-pages .ui-li-aside{font-size:1.2em !important;text-shadow:none !important;background:rgba(255,255,255,0.5) !important;padding:15px !important;color:#000000 !important}
}
/* For this demo we used images with a size of 310x pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 47.60% = ~238px */

.ul-pages .ui-listview li .ui-btn .ui-li-aside {
	color: #000;
	text-shadow: 0 1px 0 #0A0A0A;
}