/* Styles specific to the Quicksilver Blog */

.unselectable {
	user-select: none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
}

/* -------- Montage Styles -------- */
.basic-montage {
	max-width: 100%;	/* Keep from overflowing to the right */
}

/* -------- Left-right Image Styles -------- */

/* Smartphones (portrait) */
@media only screen 
and (max-width : 799px) {
	  .blog-left-image-base {
		display: block;
		max-width: 100%;
	  }
	  .blog-left-image-thin {
		width: 100%;
		margin-bottom: 0.5em;
	  }
	  .blog-left-image-thin-text {
		width: 100%;
	  }
	  .blog-left-image-square {
		width: 38%;
		margin-right: 5%;
		margin-bottom: 0.5em;
	  }
	  .blog-left-image-square-text {
		width: 100%;
	  }
	  .blog-left-image-wide {
		width: 60%;
		margin-right: 5%;
		margin-bottom: 0.5em;
	  }
	  .blog-left-image-wide-text {
		width: 100%;
	  }
	  .blog-left-image-even {
		width: 50%;
		margin-right: 5%;
		margin-bottom: 0.5em;
	  }
	  .blog-left-image-even-text {
		width: 100%;
	  }
	  .blog-right-image-base {
		display: block;
		max-width: 100%;
	  }
	  .blog-right-image-square {
		width: 38%;
		margin-top: 0.5em;
	  }
	  .blog-right-image-square-text {
		width: 100%;
	  }
	  .blog-right-image-wide {
		width: 60%;
		margin-top: 0.5em;
	  }
	  .blog-right-image-wide-text {
		width: 100%;
	  }
	  .blog-right-image-even {
		width: 50%;
		margin-top: 0.5em;
	  }
	  .blog-right-image-even-text {
		width: 100%;
	  }
	  .blog-image-max-width-adjust {
		max-width: 90vw;
	  }
}
@media only screen 
and (min-width : 800px) {
	.blog-left-image-base {
		display: flex;
		width: 100%;
	  }
	  .blog-left-image-thin {
		width: 25%;
		margin-right: 5%;
	  }
	  .blog-left-image-thin-text {
		width: 65%;
	  }
	  .blog-left-image-square {
		width: 38%;
		margin-right: 5%;
	  }
	  .blog-left-image-square-text {
		width: 60%;
	  }
	  .blog-left-image-wide {
		width: 60%;
		margin-right: 5%;
	  }
	  .blog-left-image-wide-text {
		width: 35%;
	  }
	  .blog-left-image-even {
		width: 50%;
		margin-right: 5%;
	  }
	  .blog-left-image-even-text {
		width: 45%;
	  }
	  .blog-right-image-base {
		display: flex;
		width: 100%;
	  }
	  .blog-right-image-square {
		width: 38%;
		margin-left: 3%;
	  }
	  .blog-right-image-square-text {
		width: 50%;
	  }
	  .blog-right-image-wide {
		width: 60%;
		margin-left: 5%;
	  }
	  .blog-right-image-wide-text {
		width: 35%;
	  }
	  .blog-right-image-even {
		width: 50%;
		margin-left: 5%;
	  }
	  .blog-right-image-even-text {
		width: 45%;
	  }
	  .blog-image-max-width-adjust {
		max-width: 100%;
	  }
}

/* -------- Review Styles -------- */
.reviews-and-awards {
	padding: 0.1em;
	background-color:#F2EBFB;
	color: #69337A;
	font-weight: 600;
	padding-right: 2%;
}

.reviews-and-awards-header {
	margin-top: 1em;
	text-align: center;
	font-size: x-large;
	color: #d9b041;
	font-weight: 700;
}

.reviews-and-awards-atribution {
	color: #d9b041;
	margin-left: 30px;
	font-weight: 400;
	font-style: italic;
}

/* -------- TechNote Styles -------- */
.technote {
	padding: 0.1em;
	background-color: rgb(240, 242, 210);
	color: #451055;
	font-weight: 400;
}

.technote-header {
	margin-top: 1em;
	margin-bottom: 0;
	text-align: left;
	font-size: x-large;
	color: #451055;
	font-weight: 700;
	margin-left: 1%;
}

.technote-subheader {
	margin-top: 0;
	font-size: small;
	font-style: italic;
	color: #82698a;
	font-weight: 400;
	margin-left: 1%;
}

.technote-body {
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: 400;
	margin-left: 1%;
	margin-right: 2%;
}

.technote-atribution {
	color: #67531e;
	margin-left: 30px;
	font-weight: 400;
	font-style: italic;
}

.technote-paragraph-break {
	margin-bottom: 0.3em;
}

/* -------- DesignNote Styles -------- */
.designnote {
	padding: 0.1em;
	background-color: #d2eef2;
	color: #08515b;
	font-weight: 400;
}

.designnote-header {
	margin-top: 1em;
	margin-bottom: 0;
	text-align: left;
	font-size: x-large;
	color: #08515b;
	font-weight: 700;
	margin-left: 1%;
}

.designnote-subheader {
	margin-top: 0;
	font-size: small;
	font-style: italic;
	color: #477f87;
	font-weight: 400;
	margin-left: 1%;
}

.designnote-category {
	margin-top: 0.2em;
	margin-bottom: 0.1em;
	text-align: left;
	font-size: large;
	color: #08515b;
	font-weight: 500;
	margin-left: 1%;
	text-decoration: underline;
}

.designnote-body {
	margin-top: 0.2em;
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: 400;
	margin-left: 1%;
	margin-right: 2%;
}

.designnote-lesson {
	margin-top: -1em;
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: 400;
	margin-left: 1%;
	margin-right: 2%;
	background-color: #b9ecf3;
}

.designnote-paragraph-break {
	margin-bottom: 0.3em;
}


/* -------- TrueStory Styles -------- */
.truestory {
	padding: 0.1em;
	background-color: #d2f2e0;
	color: #0a5028;
	font-weight: 400;
}

.truestory-header {
	margin-top: 0.4em;
	margin-bottom: 0;
	text-align: left;
	font-size: large;
	color: #0a5028;
	font-weight: 700;
	margin-left: 1%;
}

.truestory-subheader {
	margin-top: 0;
	font-size: small;
	font-style: italic;
	color: #3f815c;
	font-weight: 400;
	margin-left: 1%;
}

.truestory-category {
	margin-top: 0.1em;
	margin-bottom: 0.1em;
	text-align: left;
	font-size: large;
	color: #0a5028;
	font-weight: 500;
	margin-left: 1%;
	text-decoration: underline;
}

.truestory-body {
	margin-top: 0.1em;
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: 400;
	margin-left: 1%;
	margin-right: 2%;
	margin-bottom: 0.5em;
}

.truestory-lesson {
	margin-top: -0.3em;
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: 400;
	margin-left: 1%;
	margin-right: 2%;
	background-color: #b2ebcb;
}

.truestory-paragraph-break {
	margin-bottom: 0.3em;
}

/* -------- Specialized image styles: Design Notes -------- */
.designnote-image {
	width: 90%;
	margin-left: 1em;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	margin-top: 0.3em;
	margin-bottom: 0.1em;
	box-shadow: 2px 2px 5px RGB(200,200,200,200);
}

/* -------- Specialized image styles: DMCTI -------- */
.bullet-list-image {
	width: 90%;
	margin-left: 0em;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	margin-top: 0.3em;
	margin-bottom: 0.1em;
	box-shadow: 2px 2px 5px RGB(200,200,200,200);
}