/* FONTS */
	@font-face { font-family: Lobster; src: url(../fonts/lobster.otf); }
	@font-face { font-family: Dinas Handwriting; src: url(../fonts/dinas_handwriting.ttf); }
	@font-face { font-family: PrintBold; src: url(../fonts/printbold.otf); }
	@font-face { font-family: PrintClearly; src: url(../fonts/printclearly.otf); }
	@font-face { font-family: PrintDashed; src: url(../fonts/printdashed.otf); }

	/* CSS RESET (http://meyerweb.com/eric/tools/css/reset/) v2.0 */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, img, ins, kbd, q, s, samp,
	small, strike, tt, var, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		vertical-align: baseline;
		}

	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
		}

	body {
		line-height: 1;
		}

	ol, ul {
		list-style: none;
		}

	blockquote, q {
		quotes: none;
		}

	blockquote:before, blockquote:after, 
	q:before, q:after {
		content: '';
		content: none;
		}

	table {
		border-collapse: collapse;
		border-spacing: 0;
		}

	/*--- GENERAL ---*/
	html { height: 100%; overflow-y: scroll; }

	body { background-color: #eeeeee; background-image: url('../images/bg-body-pattern.png'); background-repeat: repeat; }

	h1 { color: #333333; font-size: 18px; font-weight: 700; line-height: 21px; margin: 0; padding: 0; clear: both; }
	h2 { color: #333333; font-size: 16px; font-weight: 700; line-height: 21px; margin: 0px 0px 12px 0px; padding: 0; clear: both; }
	h3 { color: #333333; font-size: 15px; font-weight: 600; line-height: 21px; margin: 0px 0px 12px 0px; padding: 0; clear: both; }
	h4 { color: #333333; font-size: 15px; font-weight: 600; line-height: 21px; margin: 0px 0px -12px 0px; padding: 0; clear: both; }
	h5 { color: #333333; font-size: 15px; font-weight: 600; line-height: 21px; margin: 0; padding: 0; clear: both; }
	h6 { color: #333333; font-size: 14px; font-weight: 600; line-height: 21px; margin: 0; padding: 0; clear: both; }

	ul { color: #333333; font-size: 14px; font-weight: 400; line-height: 24px; margin: 0; padding: 0; }
	li { color: #333333; font-size: 14px; font-weight: 400; line-height: 24px; margin: 0; padding: 0; }

	dl { color: #333333; font-size: 14px; font-weight: 400; line-height: 24px; margin: 12px 0px 12px 0px; padding: 0; }
	dt { color: #333333; font-size: 14px; font-weight: 600; line-height: 24px; margin: 0; padding: 0; }
	dd { color: #333333; font-size: 14px; font-weight: 400; line-height: 24px; margin: 0; padding: 0; }

	p { color: #333333; font-size: 14px; font-weight: 400; line-height: 24px; margin: 12px 0px 12px 0px; padding: 0; text-align: justify; }

	a { color: #4972b8; text-decoration: none; }
	a:visited { color: #4972b8; text-decoration: none; }
	a:active { color: #4972b8;	text-decoration: none; }
	a:hover { color: #4972b8; text-decoration: underline; }

	.alignleft { text-align: left; }
	.aligncenter { text-align: center; }
	.alignright { text-align: right; }

	strong { font-weight: 600; }

	.light { font-weight: 300; }
	.normal { font-weight: 400; }
	.semi-bold { font-weight: 600; }
	.bold { font-weight: 700; }

	.tiny { font-size: 10px; }
	.small { font-size: 12px; }
	.large { font-size: 16px; line-height: 26px; }
	.huge { font-size: 18px; line-height: 28px; }

	.hidden { display: none; }
	.screen-reader { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

	/*--- CONTAINER ---*/
	#container {
		float: left;
		position: relative;
		width: 100%;
		}

	/*--- HEADER ---*/
	#header {
		width: 960px;
		height: 120px;
		background-color: #ffffff;
		background-image: url('../images/header-bg.png');
		background-repeat: repeat;
		margin: 24px auto 0 auto;
		}

	#header #logo {
		float: left;
		width: 368px;
		height: 80px;
		margin: 20px 0px 0px 24px;
		}

	#header #logo .choice-texas {
		float: left;
		position: relative;
		width: 368px;
		height: 80px;
		background-color: transparent;
		background-image: url('../images/logo-choice-texas.png');
		background-repeat: no-repeat;
		}

	#header #awards {
		float: right;
		height: 80px;
		margin: 20px 24px 0px 0px;
		}

	/*--- NAVIGATION ---*/
	#navigation-container {
		float: left;
		position: relative;
		width: 100%;
		height: 60px;
		background-color: transparent;	
		background-image: url('../images/nav-bg-container.png');
		background-repeat: repeat;
		}

	#navigation {
		width: 960px;
		height: 60px;
		background: #4972b8;
		margin: 0 auto 0 auto;
		}

	#navigation ul {
		float: left;
		position: relative;
		width: 960px;
		background: transparent;
		}

	#navigation ul li {
		float: left;
		position: relative;
		height: 60px;
		font-size: 14px;
		font-weight: 400;
		text-align: center;
		background: transparent;
		padding: 0;
		}

	#navigation ul li a {
		float: left;
		position: relative;
		height: 44px;
		color: #ffffff;
		font-family: Lobster;
		font-size: 21px;
		text-decoration: none;
		padding: 16px 24px 0px 24px;
		}

	#navigation ul li a:hover {
		background: #4569a8;
		}

	#navigation ul li a.selected {
		background: #295299;
		}

	/*--- CONTENT ---*/
	#content-container {
		float: left;
		position: relative;
		width: 100%;
		min-height: 240px;
		background-color: transparent;
		background-image: url('../images/content-bg-container.png');
		background-repeat: repeat;
		}

	#content-center {
		width: 960px;
		background: #ffffff;
		margin: 0 auto 0 auto;
		}

	#content {
		float: left;
		width: 912px;
		min-height: 582px;
		background: #ffffff;
		padding: 24px 24px 24px 24px;
		}

	#content ul.credits {
		margin: 12px 0px 12px 0px;
		}

	#content .select-a-character {
		float: left;
		position: relative;
		width: 912px;
		height: 28px;
		background-color: transparent;
		background-image: url('../images/home-select-a-character.png');
		background-repeat: no-repeat;
		margin: 12px 0px 12px 0px;
		}

	#content ul.play li {
		float: left;
		position: relative;
		width: 160px;
		height: 240px;
		margin: 0px 25px 0px 0px;
		}

	#content ul.play li .latrice {
		float: left;
		position: relative;
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-latrice.jpg');
		background-repeat: no-repeat;
		background-position: 0 0; z-index: 1;
		}

	#content ul.play li .latrice:hover {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-latrice.jpg');
		background-repeat: no-repeat;
		background-position: -160px 0px;
		}

	#content ul.play li .leah {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-leah.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .leah:hover {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-leah.jpg');
		background-repeat: no-repeat;
		background-position: -160px 0px;
		}

	#content ul.play li .alex {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-alex.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .alex:hover {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-alex.jpg');
		background-repeat: no-repeat;
		background-position: -160px 0px;
		}

	#content ul.play li .jess {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-jess.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .jess:hover {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-jess.jpg');
		background-repeat: no-repeat;
		background-position: -160px 0px;
		}

	#content ul.play li .maria {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-maria.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .maria:hover {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-play-as-maria.jpg');
		background-repeat: no-repeat;
		background-position: -160px 0px;
		}

	/* #content ul.play li .alex {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-coming-soon-alex.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .jess {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-coming-soon-jess.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		}

	#content ul.play li .maria {
		width: 160px;
		height: 240px;
		background-image: url('../images/home-coming-soon-maria.jpg');
		background-repeat: no-repeat;
		background-position: 0 0;
		} */

	#content ul.play li.last {
		margin: 0px 0px 0px 0px;
		}

	#content #play-col-one {
		float: left;
		position: relative;
		width: 228px;
		}

	#content #play-col-two {
		float: right;
		position: relative;
		width: 614px;
		}

	#content #credits-col-one {
		float: left;
		position: relative;
		width: 456px;
		}

	#content #credits-col-two {
		float: right;
		position: relative;
		width: 456px;
		}

	/*--- FOOTER ---*/
	#footer-container {
		float: left;
		position: relative;
		width: 100%;
		height: 64px;
		background-color: transparent;
		background-image: url('../images/footer-bg-container.png');
		background-repeat: repeat-x;
		}

	#footer {
		width: 960px;
		height: 64px;
		background-color: transparent;
		background-image: url('../images/footer-bg.png');
		background-repeat: no-repeat;
		margin: 0 auto 0 auto;
		padding: 0px 0px 24px 0px;
		}

	#footer-navigation {
		float: left;
		position: relative;
		margin: 6px 0px 0px 24px;
		}

	#footer-navigation ul {
		float: left;
		background: transparent;
		}

	#footer-navigation ul li {
		float: left;
		position: relative;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		background: transparent;
		padding: 0px 20px 0px 20px;
		margin: 0;
		}

	#footer-navigation ul li.first {
		padding: 0px 20px 0px 0px;
		}

	#footer-navigation ul li a {
		color: #ffffff;
		text-decoration: none;
		}

	#footer-indiegogo {
		float: left;
		position: relative;
		margin: 6px 0px 0px 24px;
		}

	#footer-indiegogo p {
		font-size: 12px;
		color: #ffffff;
		margin: 0;
		}

	#footer-indiegogo a {
		color: #91d4aa;
		text-decoration: none;
		}

	#footer-indiegogo a:hover {
		color: #91d4aa;
		text-decoration: underline;
		}

	#footer-copyright {
		float: right;
		position: relative;
		margin: 6px 24px 0px 0px;
		}

	#footer-copyright p {
		font-size: 12px;
		color: #ffffff;
		margin: 0;
		}

	/*--- TWINE ---*/
	#character-portrait {
		width: 224px;
		height: 286px;
		background: #ffffff;
		text-align: center;
		margin: 0;
		}

	#character-name {
		width: 224px;
		color: #454545;
		font-family: Lobster;
		font-size: 28px;
		text-align: center;
		margin: 0px 0px 18px 0px;
		}

	#restart {
		width: 224px;
		height: 24px;
		background: #c3e1ce;
		text-align: center;
		border: 1px solid #91d4aa;
		margin: 0px 0px 14px 0px;
		}

	#restart:hover {
		background: #91d4aa;
		}

	#bookmark {
		color: #333333;
		text-decoration: none;
		}

	.bookmark {
		width: 224px;
		height: 24px;
		background: #c3e1ce;
		text-align: center;
		border: 1px solid #91d4aa;
		margin: 0px 0px 14px 0px;
		}

	.bookmark:hover {
		background: #91d4aa;
		}

	.passage {
		color: #333333;
		font-size: 14px;
		line-height: 24px;
		text-align: justify;
		}

	.passage .internalLink {
		display: block;
		position: relative;
		width: 600px;
		height: 24px;
		color: #3d5145;
		background: #c3e1ce;
		font-weight: 400;
		text-align: left;
		text-decoration: none;
		border: 1px solid #91d4aa;
		margin: 0px 0px 0px 0px;
		padding: 4px 0px 4px 14px;
		}

	.passage .internalLink:hover {
		background: #91d4aa;
		}

	#storeArea {
		display: none;
		}

	#noscript {
		color: #ff0000;
		}

	.transition-in {
		opacity:0;
		position:absolute;
		}

	.passage:not(.transition-out) {
		transition: 1s;
		-webkit-transition: 1s;
		}

	.transition-out {
		opacity:0 !important;
		position:absolute;
		}