/* WolframScript styles.

   developer:   yhechler
   requires:    /common/framework/css/framework.en.css
   ========================================================================== */

section {
	border-bottom: 1px solid #b7b7b7;
	color: #656565;
	font-size: 1rem;
}
.inner {
	max-width: 872px;
	margin: 0 auto;
	padding: 3.125rem 2rem;
}
.inner a {
	text-decoration: none;
}
.inner h2 {
	color: #1d96bd;
	font-size: 2.1875rem;
	font-weight: 300;
	line-height: 1;
	margin: 0 0 1.5625rem;
}
.inner h3 {
	color: #f77700;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 0.3125rem;
	text-transform: uppercase;
}
.inner h3+.caption {
	margin: 0 0 0.9375rem;
}
.inner p {
	line-height: 1.5;
	margin: 0 0 1.875rem;
}
.inner a {
	color: #dd1100;
}
.inner a:hover {
	color: #f77700;
}
.inner .green {
	color: #42821f;
	font-size: 0.875rem;
}
.inner h3.green {
	margin: 2.5rem 0 1.25rem 0;
	text-transform: none;
}
.inner code .green {
	font-style: italic;
}
.inner p {
	font-size: 0.875rem;
}
/* Header
-------------------------------------*/

main header *,
section * {
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}
main header {
	background: linear-gradient(#ffffff 0%, #ececec 100%);
}
main header .inner {
	padding: 0 2rem 3.125rem;
}
main a.badge {
	background: #1d96bd;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.4375rem 1.25rem;
	text-transform: uppercase;
}
main a.badge:after {
	content: '\203A';
	display: inline-block;
	margin: 0 0 0 0.1875rem;
}
main a.badge:hover {
	background: #1284a9;
}
main header h1 {
	color: #000;
	font-size: 2.75rem;
	font-weight: 400;
	margin: 3.125rem 0 0;
}
main header h1 span {
	color: #656565;
	font-size: 2.0625rem;
}
main header .subheading {
	color: #656565;
	font-size: 1.25rem;
	font-weight: 300;
	margin: 0;
}
main header+section .inner {
	padding: 2.8125rem 2rem;
}
/* Intro */

#intro p:first-child {
	color: #1d96bd;
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.4;
	margin: 0 0 1.3125rem;
}
#intro p:nth-child(2n) {
	font-size: 1rem;
}
#script-buttons {
	margin-top:2.5rem;
}
#script-buttons .button:first-child {
	margin-right: 0.9375rem;
}
#intro a.button {
	background: #dd1100 url('https://www.wolfram.com/wolframscript/img/book.png') no-repeat 0.625rem center;
	background-size: 1.5rem;
	border-radius: 4px;
	border: 1px solid #b00f00;
	color: #fff;
	padding: 0.4375rem 0.8125rem 0.4375rem 2.5rem;
}
#intro a.button:hover {
	color: #fff;
	background-color: #fe0000;
}
#intro a.button:active {
	background-color: #b00f00;
}
#intro a.button.secondary {
	background: #dd1100;
	border: 1px solid #dd1100;
	color: #fff;
	padding: 0.4375rem 2.8125rem;
}
#intro a.button.secondary:hover {
	background: #fe0000;
	border: 1px solid #b00f00;
	color: #fff;
}
#intro a.button.secondary:active {
	background-color: #b00f00;
}
/* Features 
-------------------------------------*/
#features h2+p {
	font-size: 1rem;
}
#features h3,
#features h3+p {
	font-size: 0.9375rem;
}
#features .grid h3+p {
	max-width: 85%;
}
#features p:last-child {
	margin: 0;
}

/* Technical-information 
-------------------------------------*/

#technical-information {
	background: #f2f2f2;
	border: 0;
}
#technical-information ul {
	display: inline-block;
	list-style: none;
	margin: 0 8% 0 0.5rem;
	padding: 0;
}
#technical-information ul+ul {
	margin: 0;
}
#technical-information li {
	line-height: 1.5;
	margin: 0 0 1.875rem;
	text-indent: -8px;
}
#technical-information li:before {
	background: #dd1100;
	content: '';
	display: inline-block;
	height: 3px;
	margin: 0.6875rem 0.3125rem 0 0;
	vertical-align: top;
	width: 3px;
}
/* Examples
-------------------------------------*/

#examples p.caption {
	color: #808080;
	font-size: 0.875rem;
	margin: 2.5rem 0 0.9375rem 0;
}
#examples .grid p.caption {
	margin: 0 0 0.9375rem 0;
	white-space: nowrap;
}
#examples code,
#examples code * {
	color: #1d1d1d;
	font-family: 'Source Code Pro', Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: pre-line;
}
#examples pre {
	background: #f2f2f2;
	border: 1px solid #d5d5d5;
	padding: 10px;
}
#examples .grid div:first-child pre {
	margin: 0 2.5rem 0 0;
}
.examples-list {
	margin: 3.125rem 0 0 0;
}
.examples-list a {
	display: inline-block;
	margin: 0 9% 1.5625rem 0;
}
.examples-list a:nth-child(2n) {
	margin: 0 0 1.5625rem 0;
}
.examples-list a:hover span {
	color: #f77700;
}
.examples-list img {
	display: inline-block;
	margin: 0 0.625rem 0 0;
	vertical-align: top;
}
.examples-list span {
	color: #535353;
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 300;
	max-width: 200px;
	vertical-align: top;
	width: 100%;
}
#examples .with-file {
	border: 1px solid #d5d5d5;
	margin: 10px 0 13px;
	position: relative;
}
#examples .with-file pre {
	background: #fff;
	border: 0;
	margin: 0;
	padding: 10px;
}
.file-name {
	background: #fff url('https://www.wolfram.com/wolframscript/img/file-folder-icon-small.png') no-repeat left center;
	color: #5893cf;
	display: inline-block;
	font-size: 0.8125rem;
	margin: 0 0 0 0.625rem;
	padding: 0 0 0 0.9375rem;
	position: absolute;
	top: -9px;
}
.chevron-after:after {
    color: #dd1100;
}

/* styles for minimum supported screen width (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}
/* styles for minimum supported screen width (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
	.examples-list span {
		max-width: 147px;
	}
	
	#examples .grid p.caption {
		white-space: normal;
	}
}
/* styles for minimum supported screen width (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
	#examples .grid div:first-child pre {
		margin: 0;
	}
	#examples .grid p.caption {
    	margin: 0.9375rem 0;
	}
	#features .grid h3+p {
		max-width: 100%;
	}
	#features .grid div:first-child p:last-child {
		margin: 0 0 1.875rem;
	}
	#technical-information ul+ul {
		margin: 0 0 0 0.5rem;
	}
	.examples-list span {
		max-width: 144px;
	}
	
}
/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {
	.examples-list img {
		max-width: 80px;
		width:100%;
	}
}