/*
 * @author Jan Odvarko
 */

/* DEBUG only
* { border: 1px solid red; }
*/

*, *:before, *:after { box-sizing: border-box; }

html { font-size: 15pt; }

html, body { margin: 0; padding: 0; height: 100%; }

body { background: #F9FEED; color: #342; font: 1rem Arial,Helvetica,sans-serif; text-align: center; line-height: 1.4; }

body:not(.animate),
body:not(.animate) * {
	transition: none !important;
}

/* embedded fonts */
body { font-family: 'Roboto',Arial,Helvetica,sans-serif; font-weight: 300; }
h1, h2, h3, #navigation { font-family: 'Roboto Condensed','Arial Narrow',Helvetica,sans-serif; }

h1 { font-size: 1.75rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; color: #8E204C; }

strong { font-weight: 500; }
h1 strong,
h2 strong,
h3 strong
	{ font-weight: bold; }

a { color: #A30047; }
a:hover { color: #D6005D; }

/* add an invisible offset to anchors (to compensate for height of the fixed header) */
.anchor:before,
h1[id]:before,
h2[id]:before,
h3[id]:before,
h4[id]:before,
h5[id]:before,
h6[id]:before
	{
		content: '';
		display: block;
		width: 1px;
		position: relative;
		visibility: hidden;

		height: 45px;
		margin-top: -45px;
	}

.note { font-style: italic; }

#wrap {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 1080px;
	min-height: 100%;
	padding-top: 35px; /* navigation height */
}
body.section-overview #wrap {
	padding-top: 80px; /* navigation height */
}

#navigation,
#navigation a {
	color: #FFF;
}

#navigation {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 35px; /* do not animate/transition navigation's size if the animation is based on scroll offset, otherwise there is a circular dependency, as the offset changes during animation too */
	white-space: nowrap;
	font-size: 1rem;
	z-index: 9999;
	border-bottom: 1px solid rgba(255,255,255,.25)
}

#navigation ul,
#navigation li { margin: 0; padding: 0; }

#navigation ul {
	display: block;
	list-style-type: none;
	background: linear-gradient(to bottom, #3d1c29 0%, #5e2b41 100%);
}
#navigation li {
	display: inline-block;
}

#navigation li,
#navigation a {
	line-height: 35px;
}

#navigation a {
	display: block;
	text-decoration: none;
	padding: 0 12px;
}

#navigation .section a {
	opacity: 0.9;
}

#navigation .section.active a {
	opacity: 1;
	background: linear-gradient(to bottom, #b22763 0%,#8e204c 100%);
}

#navigation .section:not(.active) a:hover {
	background: linear-gradient(to bottom, rgba(152,176,90,1) 0%, rgba(110,128,65,1) 100%);
}

#navigation .logo {
	padding-left: 100px;
	position: relative;
}

#navigation .logo .img {
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	bottom: -32px;
	background: url('jscolor-logo.png') center center no-repeat;

	transform: scale(0.5);
	transform-origin: 100% 50%;
}

body.section-overview:not(.scroll-y) #navigation {
}

body.section-overview:not(.scroll-y) #navigation li,
body.section-overview:not(.scroll-y) #navigation a {
	line-height: 60px;
}

body.section-overview:not(.scroll-y) #navigation .logo .img {
	transform: scale(0.8);
	bottom: -20px;
}

#content
	{
	flex: 1;
	}

#footer {
	padding: 20px;
	font-size: 0.9rem;
	background: #262626;
	box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.15) inset;
}

#footer,
#footer a {
	color: #CCC;
}

#footer .related { margin: 30px 0; color: #999; }
#footer .related h2 { display: inline; font-size: inherit; font-weight: inherit; color: #CCC; }
#footer .related span { margin: 0 .2em; }
#footer .related strong { font-weight: 400; color: #CCC; }
#footer .author { margin: 30px 0; }

#footer.compact { padding: 5px; }
#footer.compact .related { margin: 0; }
#footer.compact .author { margin: 0; }

.strip { position: relative; width: 100%; }
.strip-content { z-index: 100; }
.strip-content,
.strip-bg-content { width: 1050px; position: relative; margin: 0 auto; }

.codeblock { margin: .5em 0; padding: .8em 1.2em .8em; border: 1px solid #AB9; border-left-width: 10px; background: rgba(255,255,255,1); font-size: 80%; overflow-x: auto; }
.codeblock pre { margin: 0; }

.code-html .tag,
.code-html .tag * { color: #00C; }
.code-html .val,
.code-html .val * { color: #008000; }
.code-html .com,
.code-html .com * { color: #008000; }
.code-html .ph, /* placeholder */
.code-html .ph * { color: #808080; background-color: #FFF; font-style: italic; }

.code-js .var,
.code-js .var * { color: #009; }
.code-js .val,
.code-js .val * { color: #008000; }
.code-js .kw, /* keyword */
.code-js .kw * { color: #00C; }
.code-js .com,
.code-js .com * { color: #008000; }
.code-js .ph, /* placeholder */
.code-js .ph * { color: #808080; background-color: #FFF; font-style: italic; }

.code-console { background: #FFF; }
.code-console .ln:before { content: '$ '; }


/* Tabs */

.tab:not(.active):not(.keep-display) { display: none !important; }
.tab:not(.active).keep-display
	{
	visibility: hidden !important;
	position: absolute !important; left: 0; top: 0; /* so that it occupies no space */
	}

.ui-tab-nav
	{
	position: relative;
	white-space: nowrap;
	z-index: 10;
	display: block;
	list-style-type: none;
	height: 45px;
	line-height: 45px;
	}

.ui-tabs
	{
	padding: 30px;
	box-shadow: 0px 0px 40px 0px rgba(171,178,151,0.85);
	}

.ui-tabs,
.ui-tab-nav li
	{
	border: 1px solid #D8DACD;
	}

.ui-tabs,
.ui-tab-nav li.active
	{
	background: #FEFFFA !important;
	}

.ui-tab-nav,
.ui-tab-nav li
	{
	margin: 0;
	padding: 0;
	}

.ui-tab-nav li
	{
	position: relative;
	height: 100%;
	display: inline-block;
	margin: 0 5px;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	}

.ui-tab-nav li.active
	{
	height: calc(100% + 1.1px);
	margin-bottom: -1.1px;
	}

.ui-tab-nav a
	{
	display: block;
	height: 100%;
	padding: 0 25px;
	color: #505244;
	text-decoration: none;
	}

.ui-tab-nav li
	{
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,232,218,1) 100%);
	}

.ui-tab-nav li:hover
	{
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(234,237,225,1) 100%);
	}


/* License button */

.license-btn-wrap {
	position: relative;
	text-align: center;
	width: 220px;
}

.license-btn a {
	display: block;
	background: #FFF;
	overflow: hidden;
	width: 100%;
	border: 2px solid rgba(142,32,76,1);
	border-radius: 15px;
	color: rgba(171,37,103,1);
	font-weight: 400;
	font-family: 'Roboto Condensed','Arial Narrow',Helvetica,sans-serif;
	text-decoration: none;
	box-shadow: 0px 0px 20px 0px rgba(171,37,103,0.3) inset;
}
.license-btn a:not([href]) { cursor: default; }
.license-btn a[href]:hover { /*transform: scale(1.04);*/ }

.license-btn .sep { display: none; }
.license-btn .lic-pre,
.license-btn .lic-post { display: block; margin: 3px 0; text-decoration: none; font-size: 0.95rem; }
.license-btn .lic-pre { margin-top: 20px; color: #333; font-weight: 300; }
.license-btn .lic-name { display: block; font-size: 1.6rem; font-weight: bold; }
.license-btn .lic-descr { display: block; margin: 10px 0 20px 0; color: #333; font-size: 0.95rem; font-weight: 300; }
.license-btn .price { display: block; padding: 3px 0; color: #FFF; font-size: 1.35rem; font-weight: bold; background-color: rgba(171,37,103,.86); }

.license-btn-wrap .license-links { margin: 18px 0; }
.license-btn-wrap .license-links .purchase-lbl { margin-bottom: 3px; font-size: 0.95rem; font-weight: 400; }
.license-btn-wrap .license-links a { display: inline-block; padding: 2px 8px; margin: 0 3px; border-radius: 5px; font-size: 0.9rem; font-weight: 400; text-decoration: none; background-color: rgba(255,255,255,.8); color: rgba(171,37,103,.86); border: 1px solid rgba(171,37,103,.67); }
.license-btn-wrap .license-links a:hover { background-color: rgba(171,37,103,.86); color: #FFF; }
.license-btn-wrap .license-links .sep { display: none; }

.license-btn-wrap.license-opensource .license-btn a { color: rgba(121,140,72,1); border-color: rgba(121,140,72,1); box-shadow: 0px 0px 20px 0px rgba(121,140,72,.3) inset; }
.license-btn-wrap.license-opensource .license-btn .price { background-color: rgba(124,138,87,.86); }

.license-btn-wrap.license-opensource .license-links a { color: rgba(124,138,87,.86); border-color: rgba(121,140,72,1); }
.license-btn-wrap.license-opensource .license-links a:hover { background-color: rgba(124,138,87,.86); color: #FFF; }


/* Latest release download button */

.latest-release-btn a {
	display: block;
	text-decoration: none;
	background: #FFF;
	overflow: hidden;
	width: 220px;
	border: 2px solid #8E204C;
	border-radius: 15px;
	text-align: center;
	color: #B22763;
	box-shadow: 0px 0px 20px 0px rgba(143,65,99,0.30) inset;
}
.latest-release-btn .sep { display: none; }
.latest-release-btn .release-label,
.latest-release-btn .release-name,
.latest-release-btn .release-info { display: block; margin: 15px 0; }
.latest-release-btn .release-label { margin-top: 25px; color: #333; font-size: 0.9rem; }
.latest-release-btn .release-name { text-decoration: underline; font-size: 1.05rem; }
.latest-release-btn .release-info { margin-bottom: 25px; color: #333; font-size: 0.9rem; font-style: italic; }
.latest-release-btn .download-text { display: block; padding: 6px 0; background-color: rgba(171,37,103,.86); color: #FFF; font-size: 1.2rem; font-weight: bold; }
.latest-release-btn a:hover { transform: scale(1.04); border-color: #B22763; }
.latest-release-btn a:hover .download-text { background: #B22763; }

.sandbox .panel
	{
	border-color: #AB9 !important;
	}

.sandbox .tools button
	{
	border: none; background-color: rgba(149,161,113,1); color: #FFF;
	}


/* https://www.geeksforgeeks.org/how-to-target-desktop-tablet-and-mobile-using-media-query/ */
@media only screen and (max-width: 480px) {

	html:not(.wide) { font-size: 18pt; }

	html:not(.wide) #wrap { min-width: 480px; width: 480px; padding-top: 0 !important; }

	html:not(.wide) #navigation { position: relative; width: auto; height: auto; }
	html:not(.wide) #navigation li { display: block; }

	html:not(.wide) #navigation li,
	html:not(.wide) #navigation a { line-height: 50px !important; }

	html:not(.wide) #navigation .logo { padding-left: 0; }
	html:not(.wide) #navigation .logo .img { transform: scale(0.8) !important; bottom: -20px !important; }

	html:not(.wide) .strip-content,
	html:not(.wide) .strip-bg-content { width: 100%; }

}

/********** TRANSITIONS AND ANIMATIONS **********/


#navigation a,
#navigation .logo .img,
.license-btn a,
.license-btn a .price,
.latest-release-btn a,
.latest-release-btn .download-text {
	transition: .25s;
}


/********** FONTS **********/

/*
https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin
*/

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v20-latin/roboto-v20-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v20-latin/roboto-v20-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
https://google-webfonts-helper.herokuapp.com/fonts/roboto-condensed?subsets=latin
*/

/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-700italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}