/* A bit custom styling */
.itinerary-page .ui-listview li .ui-btn p {
	color: #c0c0c0;
}
.itinerary-page .ui-listview li .ui-btn .ui-li-aside {
	color: #eee;
}
.ui-content.map-content {
	display:none;
}


/* Breakpoint is 53.75em (860px). Show the map. */
/* Breakpoint 33.75em (540px) to test with my Nexus5. */
@media ( min-width: 33.75em ) {
	.itinerary-page .ui-content {
		padding: .625em; /* 10px */
	}
	.map-content {
		display: block;
		float: left;
		margin: 1em 0;
		height: 100%;
	}
	/* move sidebar to left */
	.activity-content {
		float: left;
		max-width: 30%; 
		margin: 0 auto;
	}
	#map {
                height: 100%;
                width:100%;
        }
        #map-container {
                padding: 0;
        }

	/* 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. */
}

/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */