/*
 * @author Jan Odvarko
 */

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

html, body { margin: 0; padding: 0; height: 100%; }
body { background: #F1F7E0; color: #333; font: 16pt Arial,Helvetica,sans-serif; text-align: center; }

/* embedded fonts */
body { font-family: "Open Sans"; }
h1, h2, #navigation { font-family: "Open Sans Condensed"; }

h2 { font-size: 160%; }
h3 { font-size: 120%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; color: #8E204C; }

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

#wrap {
	position: relative;
	min-width: 980px;
	min-height: 100%;
}

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

#navigation {
	position: relative;
	white-space: nowrap;
	font-size: 130%;
	z-index: 10;
}

#navigation ul,
#navigation li { margin: 0; padding: 0; }
#navigation ul { display: block; }
#navigation li {
	list-style-type: none;
	display: inline-block;
}

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

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

#navigation .section a {
	opacity: 0.9;
	filter: alpha(opacity=90); /* IE */
}

#navigation .section a:hover,
#navigation .section.active a {
	opacity: 1;
	filter: alpha(opacity=100); /* IE */
}

#navigation .section a:hover {
	background-color: #95A171;
}

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

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

#footer {
	padding: 40px 0;
	font-size: 80%;
	background: #262626;
}

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

#footer-content { margin: 0 50px; }
#footer-related { margin: 20px 0; font-size: 90%; color: #999; font-size: 60%; }
#footer-related strong { font-size: 140%; font-weight: normal; color: #CCC; }
#footer-related h2 { display: inline; font-size: 140%; font-family: inherit; color: #CCC; }
#footer-copyright { margin: 20px 0; }

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

.code-html .tag,
.code-html .tag * { color: #909; }
.code-html .val,
.code-html .val * { color: #339; }
.code-html .com,
.code-html .com * { color: #090; }
.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: #339; }
.code-js .kw, /* keyword */
.code-js .kw * { color: #909; }
.code-js .com,
.code-js .com * { color: #090; }
.code-js .ph, /* placeholder */
.code-js .ph * { color: #808080; background-color: #FFF; font-style: italic; }


/* License button */

.license-btn a {
	display: block;
	text-decoration: none;
	background: #FFF;
	overflow: hidden;
	width: 230px;
	border: 2px solid #8E204C;
	text-align: center;
	color: #B22763;
}
.license-btn .sep { display: none; }
.license-btn .lic-pre,
.license-btn .lic-post { display: block; margin: 5px 0; text-decoration: none; font-size: 80%; }
.license-btn .lic-pre { margin-top: 30px; }
.license-btn .lic-name { display: block; font-size: 120%; }
.license-btn .lic-descr { display: block; margin: 10px 0 20px 0; color: #333; font-size: 80%; font-style: italic; }
.license-btn .price { display: block; padding: 8px 0; background: #AB2567; color: #FFF; font-weight: bold; }
.license-btn a:hover { transform: scale(1.05); border-color: #B22763; }
.license-btn a:hover .price { background: #B22763; }


/* Latest release download button */

.latest-release-btn a {
	display: block;
	text-decoration: none;
	background: #FFF;
	overflow: hidden;
	width: 230px;
	border: 2px solid #8E204C;
	text-align: center;
	color: #B22763;
}
.latest-release-btn .sep { display: none; }
.latest-release-btn .release-label,
.latest-release-btn .release-name,
.latest-release-btn .release-info { display: block; margin: 10px 0; }
.latest-release-btn .release-label { margin-top: 20px; color: #333; font-size: 100%; }
.latest-release-btn .release-name { text-decoration: underline; }
.latest-release-btn .release-info { margin-bottom: 20px; color: #333; font-size: 80%; font-style: italic; }
.latest-release-btn .download-text { display: block; padding: 8px 0; background: #AB2567; color: #FFF; font-weight: bold; }
.latest-release-btn a:hover { transform: scale(1.05); border-color: #B22763; }
.latest-release-btn a:hover .download-text { background: #B22763; }


/********** ROUNDED CORNERS **********/

.latest-release-btn a,
.license-btn a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}


/********** SHADOWS **********/

.latest-release-btn a,
.license-btn a {
-webkit-box-shadow: 0px 0px 20px 0px rgba(143,65,99,0.30) inset;
-moz-box-shadow: 0px 0px 20px 0px rgba(143,65,99,0.30) inset;
box-shadow: 0px 0px 20px 0px rgba(143,65,99,0.30) inset;
}

#footer {
-webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.15) inset;
-moz-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.15) inset;
box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.15) inset;
}


/********** GRADIENTS **********/

/*
 * In IE 8 and 9, elements with gradient will have their contents cropped.
 * That's why here we rather create the gradient on navigation's child <ul>
 */
#navigation ul {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3d1c29+0,5e2b41+100 */
background: #3d1c29; /* Old browsers */
background: -moz-linear-gradient(top, #3d1c29 0%, #5e2b41 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d1c29), color-stop(100%,#5e2b41)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3d1c29 0%,#5e2b41 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3d1c29 0%,#5e2b41 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3d1c29 0%,#5e2b41 100%); /* IE10+ */
background: linear-gradient(to bottom, #3d1c29 0%,#5e2b41 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d1c29', endColorstr='#5e2b41',GradientType=0 ); /* IE6-9 */
}

#navigation .section.active a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b22763+0,8e204c+100 */
background: #b22763; /* Old browsers */
background: -moz-linear-gradient(top, #b22763 0%, #8e204c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b22763), color-stop(100%,#8e204c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b22763 0%,#8e204c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b22763 0%,#8e204c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b22763 0%,#8e204c 100%); /* IE10+ */
background: linear-gradient(to bottom, #b22763 0%,#8e204c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b22763', endColorstr='#8e204c',GradientType=0 ); /* IE6-9 */
}


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

#navigation a,
.license-btn a,
.license-btn a .price,
.latest-release-btn a,
.latest-release-btn .download-text {
transition: .25s;
-o-transition: .25s;
-ms-transition: .25s;
-moz-transition: .25s;
-webkit-transition: .25s;
}


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

/* https://fonts.googleapis.com/css?family=Open+Sans:300 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  /*src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');*/
  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/opensans_v13_DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  /*src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');*/
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(fonts/opensanscondensed_v10_gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}