/*<meta />*/

html.HomePage
{
	mc-master-page: url('../TemplatePages/SideNav-Home-custom-header.flmsp');
	padding: 0;
	box-sizing: border-box;
}

h3
{
	margin-top: 20px;
}

a.heading
{
	color: var(--brand);
	font-size: 1.1em;
	font-weight: 600;
}

a.heading:link
{
	color: var(--font-color);
	text-decoration: none;
}

a.heading:visited
{
	color: var(--font-color);
}

a.heading:hover
{
	color: var(--brand);
}

p.booktitle
{
	margin: 15px;
	font-size: 1.5em;
	text-align: center;
}

p.booksubtitle
{
	margin: 15px;
	font-size: 1.5em;
	text-align: center;
}

a.heading > .content > p
{
	font-weight: 300 !important;
}

/* Styles for container */

.cards
{
	display: flex;
	flex-flow: row wrap;
	padding: 0 4px;
	align-content: flex-start;
}

/* Styles for various card variants */

.card	/*basic card style*/
{
	width: 250px;
	padding: 15px 30px 15px 30px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	top: 0;
	border: 0px;
	border-radius: 10px;
	margin: 15px 20px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	background-color: #f1f1f1;
}

.table-card	/*used for the tables in icons Home page design - less padding for a nicer look*/
{
	width: 250px;
	padding: 15px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	top: 0;
	border: 0px;
	border-radius: 10px;
	margin: 15px 20px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}

.card-flat	/*no rounded corners and shadows below the cards*/
{
	width: 250px;
	padding: 15px;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	top: 0;
	border: 0px;
	margin: 15px 20px;
	background-color: #f9f9f9;
}

.card:hover,
.table-card:hover
{
	box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2);
	background-color: #f9f9f9;
}

.card-flat:hover
{
	background-color: #f1f1f1;
}

.card p,
.card-flat p,
.table-card p
{
	font-size: 0.9em;
}

.card-flat:hover h2,
.table-card:hover h2,
.card:hover h2
{
	color: var(--font-color);
	box-shadow: 5px grey;
}

.card-flat .content,
.table-card .content,
.card .content
{
	flex-grow: 1;
}

.card-flat a footer,
.card a footer,
.table-card a footer
{
	display: block;
	margin-top: 15px;
	padding: 5px 10px;
	background: var(--brand);
	color: white;
	text-decoration: none;
	border: solid 1px white;
}

.card a footer:hover,
.card-flat a footer:hover,
.table-card a footer:hover
{
	background: white;
	color: black;
	border: solid 1px var(--brand);
}

/*styles for the icons in the card heading line*/

div.cardicon	/*A container for the icon, must be placed in the h3 tags. Float keeps the icon aligned. If an icon is irregular, margins*/
{
	float: left;
	margin-right: 7px;
}

div.cardicon > img	/*the icon height must be set to 1em, or a multiple of 1em, to make the h3 title wrap nicely against the icon*/
{
	width: auto;
	height: 1em;
}

/*end of the styles for the icons in the card heading line*/
/*used in the table-based home page tiles*/

h3.hometileicon
{
	margin-top: 0px;
	margin-bottom: 15px;
}

/*Responsive layout - adjusts width of card */

@media only screen and (max-width: 1279px)
{
	.card
	{
		width: 200px;
	}
}

/* Responsive layout - makes single column */

@media only screen and (max-width: 767px)
{
	.card
	{
		width: 100%;
	}
}

@media (min-width: 320px)
{
	div#mc-main-content
	{
		width: 98%;
	}
}

/* smartphones, iPhone, portrait 480x320 phones */

@media (min-width: 641px)
{
	div#mc-main-content
	{
		width: 95%;
	}
}

/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

@media (min-width: 961px)
{
	div#mc-main-content
	{
		width: 90%;
	}
}

/* tablet, landscape iPad, lo-res laptops ands desktops */

@media (min-width: 1025px)
{
	div#mc-main-content
	{
		width: 90%;
	}
}

/* big landscape tablets, laptops, and desktops */

@media (min-width: 1281px)
{
	div#mc-main-content
	{
		width: 85%;
	}
}

/*styles for the Home page menu*/

ul.summary
{
	/*	padding-inline-start: 59px;
	margin-top: -14px;
	margin-bottom: 2.5em; */
}

ul.summary li
{
	display: inline;
	list-style-type: none;
	line-height: 1.3em;
}

ul.summary li a,
ul.summary li a:link,
ul.summary li a:visited
{
	color: var(--font-color);
}

ul.summary li a:active,
ul.summary li a:hover
{
	color: var(--light);
}

span.separator
{
	display: inline-block;
	font-weight: bold;
	color: var(--light);
	padding-right: 10px;
	padding-left: 10px;
}

img.iconsummary
{
	display: inline-block;
	padding-right: 20px;
	border: none;
	width: 70px;
	height: auto;
	vertical-align: middle;
	padding-left: 0;
}

div#mc-main-content
{
	margin-top: 3em;
	margin-left: auto;
	margin-right: auto;
	max-width: 1365px;
	width: 100%;
}

/*styles for small mobiles*/

@media only screen and (max-width: 400px)
{
	img.iconsummary
	{
		float: left;
		width: 55px;
		padding-right: 15px;
	}

	ul.summary
	{
		margin-top: 0;
		padding-inline-start: 45px;
	}
}

@media only screen and (max-width: 650px)
{
	.cards
	{
		grid-template-columns: auto;
	}
}