/* Navigation - menus, breadcrumbs, etc */

ul.menu,
ul.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.menu li {
	margin-bottom: 0;
	list-style: none;
}

.menu-item {
	padding: 0; /* override Classy's default padding on top of menu items */
}

#header a:link,
#header a:visited {
	text-decoration: none;
}

a.menu-toggle {
	cursor: pointer;
}

/* Tabs */

nav.tabs {
	margin-bottom: 1.25rem;
}

/* Previous / Next links - these were going to be used on the book details page but have been
taken out. However I'm leaving the CSS in case they need to be used for something else */

ul.previous-next.links-list {
	margin-bottom: 1rem;
	align-items: stretch;
}

.previous-next.links-list li {
	flex: 1 1 auto;
	width: calc(50% - 5px);
	padding: 1.33rem 1rem;
	border: 2px solid;
	border-top: 6px solid;
}

.previous-next.links-list li:not(:last-child) {
	margin-right: 10px;
}

@media all and (min-width: 561px) {
	.previous-next.links-list li {
		width: calc(50% - 12px);
		padding: 1.33rem 1.22rem;
	}

	.previous-next.links-list li:not(:last-child) {
		margin-right: 24px;
	}
}

.previous-next a:link,
.previous-next a:visited {
	text-decoration: none;
}

.previous-next .previous {
	text-align: right;
}

.previous-next .text-arrow {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}

/* this bit needs to go into default.css, but just putting it here so everything's together */
.previous-next.links-list li {
	border: none;
	border-top: 6px solid #900000;
	box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.2);
}

/* Sample HTML for previous/next, since they aren't currently in use 

<ul class="previous-next links-list">
<li class="previous"><a href="#"><span class="text-colour">Previous</span> <span class="text-arrow"><i class="icon-arrow-left"></i>Next Steps</span></a></li>
<li class="next"><a href="#"><span class="text-colour">Next</span> <span class="text-arrow">Endurance: New Year, New You<i class="icon-arrow-right"></i></span></a></li>
</ul>
*/