Ply/st/app.css

html {
	background-color: #ac0;
}

html, body {
	height: 100%;
}

.container {
	margin: 0 auto;
	width: 80%;
	min-width: 600px;
	max-width: 1200px;
}

body, h1, h2 {
	margin: 0;
	padding: 0;
}

h1, h2 {
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
}


h1 {
	text-shadow: 0 1px 3px rgba(0,0,0,.2);
	font-size: 200px;
	text-align: center;
	margin-bottom: 50px;
}
	h1 u {
		cursor: pointer;
		border-bottom: 8px dotted #fff;
		text-decoration: none;
	}


h2 {
	position: relative;
	font-size: 30px;
	margin-left: -40px;
	margin-bottom: 10px;
}
	/* anchors */
	h2 a {
		color: #fff;
		outline: 0;
		text-decoration: none;
	}
		h2 a:before {
			right: 100%;
			content: '→';
			display: inline-block;
			visibility: hidden;
			line-height: 30px;
			padding-right: 10px;
		}

		h2 a:hover:before,
		h2 a.selected:before {
			visibility: visible;
		}


.row {
	margin-bottom: 30px;
	clear: both;
}
	.row:after {
		clear: both;
		content: '';
		display: block;
	}

	.col-left {
		float: left;
		width: 35%;
		padding: 0 20px;
		box-sizing: content-box;
	}

	.col-right {
		float: left;
		width: 55%;
		margin-left: 5%;
	}

	.example {
		top: 0;
		cursor: pointer;
		position: relative;
		transition: all 0.3s;
	}
		.example:after {
			top: 50%;
			left: 50%;
			line-height: 0;
			margin: -5px 0 0 -50px;
			color: #333;
			content: '►';
			font-size: 100px;
			position: absolute;
			display: block;
			opacity: 0;
			transition: opacity 0.2s;
		}

		.example:hover {
			top: -5px;
			box-shadow: 0 2px 8px rgba(0,0,0,.2);
		}
			.example:hover:after {
				opacity: 0.7;
			}

pre code {
	background-color: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0,.3);
}




/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
  color: #8e908c;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #c82829;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #f5871f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #eab700;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #718c00;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #3e999f;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #4271ae;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #8959a8;
}

pre {
	border: 0;
	margin: 0;
	padding: 0;
}

pre code {
  display: block;
  color: #4d4d4c;
  font-size: 15px;
  font-family: Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
  padding: 30px;
  overflow: scroll;
  max-height: 220px;
}



#rubaxa-repos a,
#rubaxa-repos li {
	color: #fff;
	font-size: 16px;
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
	font-family: Arial, Geneva, sans-serif;
	font-weight: normal;
}

#rubaxa-repos a {
	font-size: 20px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.3);
	transition: all .3s;
}
	#rubaxa-repos a:hover {
		border-bottom: 1px solid rgba(255,255,255,1);
	}