html
{
	min-width: 320px;
}

#introduction
{
	max-width: 480px;
	margin: 36px auto;
	padding: 0 24px;
}

#introduction h2
{
	margin: 24px 0;
	text-align: center;
}

#source code, #server code, #data code {
	font-size: 14px;
	line-height: 16px;
}

#template, #source
{
	margin: 0;
}

#template
{
    float:left;
    border: 1px dotted #E0D7D1;
    width:32%;
    margin-right: 12px;
}

#template > div
{
	padding: 20px;
}

#template h1 {
	font-size: 28px;
	line-height: 36px;
	margin-top: 0;
	text-align: left;
}

#source
{
	min-width:300px;
	float: left;
	width: 32%;
	margin: 0;
	margin-left:0;
	margin-right: 12px;
}

#source h2, #server h2
{
	display:block;
	margin-top: 0;
	margin-bottom: -6px;
	padding-left: 24px;
	color: #4C3D33;
	background-color: #E0D7D1;
	z-index: 9999;
	font-size: 16px;
	font-weight: 500;
}

#server
{
	min-width:300px;
	float: left;
	width: 32%;
}

#data
{
	margin-bottom: 24px;
}

img
{
	width: 300px;
	margin: 0 auto;
}

section
{
	margin-bottom: 48px;
}

pre[class*="language-"]
{
	padding: 12px 24px;
	font-size: 12px;

    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, post millennium */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

code[class*='coffeescript'] span[class~='token'][class~='string']
{
	color: #07a;
}

@media all and (max-width:1200px)
{
	#template, #source, #server
	{
		float: none;
		width: inherit;
		margin: inherit;
		margin-bottom: 24px;
		margin-top: 24px;
	}

	#template { margin-bottom: 0; margin-top: 0;}

	#source, #server
	{
		border: none;
	}

	#source h2, #server h2
	{
		display:block;
	}
}

@media all and (max-width: 400px)
{
	tabs
	{
		margin-bottom: 0;
	}

	#template, #source, #server
	{
		margin-bottom: 12px;
		margin-top: 12px;
		font-size: 12px;
	}

	#data { margin-bottom: 12px;}
	html {padding: 12px;}
	body { margin: 0; padding: 0; margin-bottom: 48px;}

	#source h2, #server h2 { padding-left: 12px;}

	pre[class*="language-"]
	{
		padding: 12px;
	}

	pre[class*="language-"] code {
		font-size: 9px;
		line-height: 12px;
	}

}