/*

Theme Name: Twenty Seventeen

Description: Used to style the TinyMCE editor.

*/





/**

 * Table of Contents:

 *

 * 1.0 - Body

 * 2.0 - Typography

 * 3.0 - Elements

 * 4.0 - Alignment

 * 5.0 - Caption

 * 6.0 - Galleries

 * 7.0 - Media Elements

 * 8.0 - RTL

 */



/**

 * 1.0 - Body

 */



body {

	background-color: #fff;

	color: #333;

	margin: 20px 40px;

	max-width: 580px;

}



/**

 * 2.0 - Typography

 */



body,

button,

input,

select,

textarea {

	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;

	font-size: 16px;

	font-size: 1rem;

	font-weight: 400;

	line-height: 1.66;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	clear: both;

	line-height: 1.4;

	margin: 0 0 0.75em;

	padding: 1.5em 0 0;

}



h1:first-child,

h2:first-child,

h3:first-child,

h4:first-child,

h5:first-child,

h6:first-child {

	padding-top: 0;

}



h1 {

	font-size: 24px;

	font-size: 1.5rem;

	font-weight: 300;

}



h2 {

	color: #666;

	font-size: 20px;

	font-size: 1.25rem;

	font-weight: 300;

}



h3 {

	color: #333;

	font-size: 18px;

	font-size: 1.125rem;

	font-weight: 300;

}



h4 {

	color: #333;

	font-size: 16px;

	font-size: 1rem;

	font-weight: 800;

}



h5 {

	color: #767676;

	font-size: 13px;

	font-size: 0.8125rem;

	font-weight: 800;

	letter-spacing: 0.15em;

	text-transform: uppercase;

}



h6 {

	color: #333;

	font-size: 15px;

	font-size: 0.9375rem;

	font-weight: 800;

}



p {

	margin: 0 0 1.5em;

	padding: 0;

}



dfn,

cite,

em,

i {

	font-style: italic;

}



blockquote {

	color: #666;

	font-size: 18px;

	font-size: 1.125rem;

	font-style: italic;

	line-height: 1.7;

	margin: 0;

	overflow: hidden;

	padding: 0;

}



blockquote.alignleft,

blockquote.alignright {

	font-size: 14px;

	font-size: 0.875rem;

	width: 34%;

}



address {

	margin: 0 0 1.5em;

}



pre {

	background: #eee;

	font-family: "Courier 10 Pitch", Courier, monospace;

	font-size: 15px;

	font-size: 0.9375rem;

	line-height: 1.6;

	margin-bottom: 1.6em;

	max-width: 100%;

	overflow: auto;

	padding: 1.6em;

}



code,

kbd,

tt,

var {

	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

	font-size: 15px;

	font-size: 0.9375rem;

}



abbr,

acronym {

	border-bottom: 1px dotted #666;

	cursor: help;

}



mark,

ins {

	background: #eee;

	text-decoration: none;

}



big {

	font-size: 125%;

}



blockquote,

q {

	quotes: "" "";

}



blockquote:before,

blockquote:after,

q:before,

q:after {

	content: "";

}



/* Typography for Thai Font */



html[lang="th"] h1,

html[lang="th"] h2,

html[lang="th"] h3,

html[lang="th"] h4,

html[lang="th"] h5,

html[lang="th"] h6 {

	letter-spacing: 0;

	line-height: 1.65;

}



html[lang="th"] body,

html[lang="th"] button,

html[lang="th"] input,

html[lang="th"] select,

html[lang="th"] textarea {

	line-height: 1.8;

}



/**

 * 3.0 - Elements

 */



hr {

	background-color: #bbb;

	border: 0;

	height: 1px;

	margin-bottom: 1.5em;

}



ul,

ol {

	margin: 0 0 1.5em;

	padding: 0;

}



ul {

	list-style: disc;

}



ol > li {

	position: relative;

}



li > ul,

li > ol {

	margin-bottom: 0;

	margin-left: 1.5em;

}



dt {

	font-weight: 700;

}



dd {

	margin: 0 1.5em 1.5em;

}



table {

	border-collapse: collapse;

	margin: 0 0 1.5em;

	width: 100%;

}



thead th {

	border-bottom: 2px solid #bbb;

	padding-bottom: 0.5em;

}



th {

	padding: 0.4em;

	text-align: left;

}



tr {

	border-bottom: 1px solid #eee;

}



td {

	padding: 0.4em;

}



th:first-child,

td:first-child {

	padding-left: 0;

}



th:last-child,

td:last-child {

	padding-right: 0;

}



a {

	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

	color: #222;

	text-decoration: none;

	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}



a:focus {

	outline: thin dotted;

}



a:hover,

a:focus {

	color: #000;

	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

}



/* Fixes linked images */



a img {

	background: #fff;

	-webkit-box-shadow: 0 0 0 6px #fff;

	box-shadow: 0 0 0 6px #fff;

}



/**

 * 4.0 - Alignment

 */



img {

	height: auto; /* Make sure images are scaled correctly. */

	max-width: 100%; /* Adhere to container width. */

}



embed,

iframe,

object {

	margin-bottom: 1.5em;

	max-width: 100%;

}



/**

 * 5.0 - Caption

 */



.wp-caption {

	color: #666;

	font-size: 13px;

	font-size: 0.8125rem;

	font-style: italic;

	margin-bottom: 1.5em;

	max-width: 100%;

}



.wp-caption img[class*="wp-image-"] {

	display: block;

	margin-left: auto;

	margin-right: auto;

}



.wp-caption .wp-caption-text {

	margin: 0.8075em 0;

}



/**

 * 6.0 - Galleries

 */



.gallery {

	margin-bottom: 1.5em;

}



.gallery-item {

	display: inline-block;

	text-align: center;

	vertical-align: top;

	width: 100%;

}



.gallery-item a,

.gallery-item a:hover,

.gallery-item a:focus {

	-webkit-box-shadow: none;

	box-shadow: none;

	background: none;

	display: inline-block;

}



.gallery-columns-2 .gallery-item {

	max-width: 50%;

}



.gallery-columns-3 .gallery-item {

	max-width: 33.33%;

}



.gallery-columns-4 .gallery-item {

	max-width: 25%;

}



.gallery-columns-5 .gallery-item {

	max-width: 20%;

}



.gallery-columns-6 .gallery-item {

	max-width: 16.66%;

}



.gallery-columns-7 .gallery-item {

	max-width: 14.28%;

}



.gallery-columns-8 .gallery-item {

	max-width: 12.5%;

}



.gallery-columns-9 .gallery-item {

	max-width: 11.11%;

}



.gallery-caption {

	display: block;

}



/**

 * 7.0 - Media Elements

 */



.mejs-container {

	margin-bottom: 1.5em;

}



/* Audio Player */



.mejs-controls a.mejs-horizontal-volume-slider,

.mejs-controls a.mejs-horizontal-volume-slider:focus,

.mejs-controls a.mejs-horizontal-volume-slider:hover {

	background: transparent;

	border: 0;

}



/* Playlist Color Overrides: Light */



.wp-playlist-light {

	border-color: #eee;

	color: #222;

}



.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {

	color: #333;

}



.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {

	color: #767676;

}



.wp-playlist-light .wp-playlist-item {

	border-bottom: 1px dotted #eee;

	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;

	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;

}



.wp-playlist-light .wp-playlist-item:hover,

.wp-playlist-light .wp-playlist-item:focus {

	border-bottom-color: rgba(0, 0, 0, 0);

	background-color: #767676;

	color: #fff;

}



.wp-playlist-light a.wp-playlist-caption:hover,

.wp-playlist-light .wp-playlist-item:hover a,

.wp-playlist-light .wp-playlist-item:focus a {

	color: #fff;

}



/* Playlist Color Overrides: Dark */



.wp-playlist-dark {

	background: #222;

	border-color: #333;

}



.wp-playlist-dark .mejs-container .mejs-controls {

	background-color: #333;

}



.wp-playlist-dark .wp-playlist-caption {

	color: #fff;

}



.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {

	color: #eee;

}



.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {

	color: #aaa;

}



.wp-playlist-dark .wp-playlist-playing {

	background-color: #333;

}



.wp-playlist-dark .wp-playlist-item {

	border-bottom: 1px dotted #555;

	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;

	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;

}



.wp-playlist-dark .wp-playlist-item:hover,

.wp-playlist-dark .wp-playlist-item:focus {

	border-bottom-color: rgba(0, 0, 0, 0);

	background-color: #aaa;

	color: #222;

}



.wp-playlist-dark a.wp-playlist-caption:hover,

.wp-playlist-dark .wp-playlist-item:hover a,

.wp-playlist-dark .wp-playlist-item:focus a {

	color: #222;

}



/* Playlist Style Overrides */



.wp-playlist {

	padding: 0.625em 0.625em 0.3125em;

}



.wp-playlist-current-item .wp-playlist-item-title {

	font-weight: 700;

}



.wp-playlist-current-item .wp-playlist-item-album {

	font-style: normal;

}



.wp-playlist-current-item .wp-playlist-item-artist {

	font-size: 10px;

	font-size: 0.625rem;

	font-weight: 800;

	letter-spacing: 0.1818em;

	text-transform: uppercase;

}



.wp-playlist-item {

	padding: 0 0.3125em;

	cursor: pointer;

}



.wp-playlist-item:last-of-type {

	border-bottom: none;

}



.wp-playlist-item a {

	padding: 0.3125em 0;

	border-bottom: none;

}



.wp-playlist-item a,

.wp-playlist-item a:focus,

.wp-playlist-item a:hover {

	-webkit-box-shadow: none;

	box-shadow: none;

	background: transparent;

}



.wp-playlist-item-length {

	top: 5px;

}



/**

 * 8.0 - RTL

 */



.rtl th {

	text-align: right;

}



.rtl ol > li:before {

	left: auto;

	right: -1.5em;

}



.rtl li > ul,

.rtl li > ol {

	margin-left: 0;

	margin-right: 1.5em;

}



.rtl .mejs-offscreen {

	right: -10000px;

}

