/*
	* Gridless version 2.0

	* Credit is left inline and big thanks to Nicolas Gallagher and Jonathan Neal

	* Across this document we use safe CSS hacks: http://mathiasbynens.be/notes/safe-css-hacks
	* Selectors beggining with an underscore (_selector: property) target only IE6
	* Selectors beggining with an asterisk (*selector: property) target only IE6 and IE7
*/

/* HTML5 display definitions
---------------------------------------- */

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

/* Corrects inline-block not defined in IE6/7/8 and FF3 */
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls]) {
	display: none;
}

/* Ensures content is hidden from all presentations, including screenreaders */
[hidden] {
	display: none;
	visibility: hidden;
}

/* Base structure
---------------------------------------- */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/
html {
	height: 100%;
	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
    background: #FFFEFC;
}

body {
	margin: 0 auto;
	min-height: 100%;
    background: #FFFEFC;
}

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
	font: 1em/1.625 'Arvo', serif;
    font-weight: 400;
	color: #222; /* Full black on white is too much contrast, #222 is a better default */
}

/* Add and/or remove tags as your baseline grid needs */
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img, figure, figcaption, button, hr {
	margin: 0 0 1.625em;
}

/* Headings/small
---------------------------------------- */

/*
	* Font sizes are based on the golden ratio of 16
	* See this for the modular scale: ow.ly/5jGl6
	* Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across elements 
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lobster', cursive;
	font-size: 1em;
	font-weight: 400;
}

h1 {
	font-size: 3.75em; /* 68px */
	line-height: 1.1471em;
	margin: 0 0 0.3824em;
}

h2 {
	font-size: 2.625em; /* 42px */
	line-height: 1.2381em;
	margin: 0 0 0.619em;
}

h3 {
	font-size: 1.625em; /* 26px */
	line-height: 1em;
	margin: 0 0 1em;
}

small {
	font-size: 0.625em; /* 10px */
	margin: 0 0 2.6em;
}

/* Preformatted text and code
---------------------------------------- */

/* Allows line wrapping of 'pre' */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font: 1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
}

/* Tables
---------------------------------------- */

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

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	border: 0;
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input {
	*overflow: auto;
}

/* Quotes
---------------------------------------- */

blockquote, q {
	quotes: none;
}

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

blockquote, q, cite {
	font-style: italic;
}

blockquote {
	padding-left: 1.625em;
	border-left: 1px solid #ddd;
}

blockquote > p {
	padding: 0;
}

/* Lists
---------------------------------------- */

ul, ol {
	list-style-position: inside;
	padding: 0;
}

li ul, li ol {
	margin: 0 1.625em;
}

dl dd {
	margin-left: 1.625em;
}

/* Links
---------------------------------------- */

a, a:visited {
	text-decoration: none;
	color: #06c;
}

a:hover {
	border-bottom: 1px solid;
}

a:focus {
	outline: thin dotted;
}

/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

/* Figures
---------------------------------------- */

figure {
	margin: 0;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	max-width: 100%; /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
	/* _width: 100%; /* IE6 doesn't support max-width, so we just use width. If the image is larger than the container, just uncomment this. If it is smaller than the container, uncomment and change the 100% value to an absolute one */
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* Abbreviations
---------------------------------------- */

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* Marked/inserted/deleted text
---------------------------------------- */

mark {
	background: #ff0;
}

ins {
	text-decoration: none;
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* Others
---------------------------------------- */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #ddd;
}

strong, b, dt {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

var, address {
	font-style: normal;
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* Helper classes
---------------------------------------- */

/*
	* Micro clearfix hack, more semantically titled with 'group'
	* Source: nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}

/* Primary styles
---------------------------------------- */









/* Media queries
---------------------------------------- */

/* The media queries included in here are only placeholder. Modify them as your content requires */

@media only screen and (min-width: 480px) {
	/* Wide mobile (480px+) styles go here */
}

@media only screen and (min-width: 768px) { 
	/* Tablets/netbooks (768px+) styles go here */
}

@media only screen and (min-width: 1024px) { 
	/* Desktops (1024px+) styles go here */
}

/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}

header {
    width: 100%;
    padding: 25px 0 25px 0;
    color: #FFFEFC;
    text-shadow: 2px 2px 2px #241E12;
    border-bottom: 5px solid #672D6E;
background: #a55eb2;
background: -moz-linear-gradient(top, #672d6e 0%, #a55eb2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#672d6e), color-stop(100%,#a55eb2));
background: -webkit-linear-gradient(top, #672d6e 0%,#a55eb2 100%);
background: -o-linear-gradient(top, #672d6e 0%,#a55eb2 100%);
background: -ms-linear-gradient(top, #672d6e 0%,#a55eb2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#672d6e', endColorstr='#a55eb2',GradientType=0 );
background: linear-gradient(top, #672d6e 0%,#a55eb2 100%);
}

#logo {
    margin: 0;
    display: inline;
    padding-left: 25px;
}

#location {
    display: inline;
    font-size: 3.75em;
    line-height: 1.1471em;
    text-decoration: none;
}

#card {
    behavior: url(/assets/PIE.htc);
    position: relative;
    height: 400px;
    width: 700px;
    box-shadow: 0px 0px 15px #A0A0A0;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    float:left;
}

.card-1 {
    background-image: url('/assets/img/texture/bees.png');
}

.card-2 {
    background-image: url('/assets/img/texture/bwswoosh.png');
}

.card-3 {
    background-image: url('/assets/img/texture/dots.png');
}

.card-4 {
    background-image: url('/assets/img/texture/dragonfly.png');
}

.card-5 {
    background-image: url('/assets/img/texture/flowerdots.png');
}

.card-6 {
    background-image: url('/assets/img/texture/flowerstripe.png');
}

.card-7 {
    background-image: url('/assets/img/texture/damaskgreen.png');
}

.card-8 {
    background-image: url('/assets/img/texture/scallopyell.png');
}

.card-9 {
    background-image: url('/assets/img/texture/redquadlogo.png');
}

.card-1 a, .card-3 a, .card-4 a, .card-5 a, .card-6 a, .card-8 a {
    color: #222;
}

.card-2, .card-2 a {
    color: #fff;
}

.card-9, .card-9 a, .card-7, .card-7 a {
    color: #000;
}

.card-1-a {
    position: absolute;
    left: 50px;
    top: 50px;
    font-size: 24pt;
}

.card-1-b {
    position: absolute;
    left: 50px;
    top: 115px;
    font-weight: 700;
    font-size: 16pt;
}

.card-1-c {
    position: absolute;
    left: 50px;
    top: 145px;
    font-size: 14pt;
}

.card-1-d {
    position: absolute;
    left: 50px;
    top: 200px;
    font-size: 16pt;    
}

.card-1-e {
    position: absolute;
    left: 50px;
    top: 225px;
    font-size: 16pt;
}

.card-1-f {
    position: absolute;
    left: 50px;
    top: 270px;
    font-size: 16pt;
}

.card-1-g {
    position: absolute;
    left: 50px;
    top: 315px;
    font-size: 16pt;
}

.card-2-a {
    position: absolute;
    width: 700px;
    text-align: center;
    left: 0;
    top: 70px;
    font-size: 24pt;
}

.card-2-b {
    position: absolute;
    width: 700px;
    text-align: center;
    left: 0;
    top: 125px;
    font-weight: 700;
    font-size: 26pt;
}

.card-2-c {
    position: absolute;
    width: 700px;
    text-align: center;
    left: 0;
    top: 175px;
    font-size: 14pt;
}

.card-2-d {
    position: absolute;
    width: 680px;
    padding-left: 20px;
    left: 0;
    top: 245px;
    font-size: 16pt;
}

.card-2-e {
    position: absolute;
    width: 680px;
    padding-left: 20px;
    left: 0;
    top: 275px;
    font-size: 16pt;
}

.card-2-f {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 245px;
    font-size: 16pt;
}

.card-2-g {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 275px;
    font-size: 16pt;
}

.card-3-a {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 20px;
    font-size: 26pt;
}

.card-3-b {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 95px;
    font-weight: 700;
    font-size: 16pt;
}

.card-3-c {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 120px;
    font-size: 14pt;
}

.card-3-d {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 200px;
    font-size: 16pt;
}

.card-3-e {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 225px;
    font-size: 16pt;
}

.card-3-f {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 270px;
    font-size: 16pt;
}

.card-3-g {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 315px;
    font-size: 16pt;
}

.card-4-a {
    position: absolute;
    left: 90px;
    top: 50px;
    font-size: 24pt;
}

.card-4-b {
    position: absolute;
    left: 90px;
    top: 115px;
    font-weight: 700;
    font-size: 16pt;
}

.card-4-c {
    position: absolute;
    left: 90px;
    top: 145px;
    font-size: 14pt;
}

.card-4-d {
    position: absolute;
    left: 90px;
    top: 200px;
    font-size: 16pt;
}

.card-4-e {
    position: absolute;
    left: 90px;
    top: 225px;
    font-size: 16pt;
}

.card-4-f {
    position: absolute;
    left: 90px;
    top: 270px;
    font-size: 16pt;
}

.card-4-g {
    position: absolute;
    left: 90px;
    top: 315px;
    font-size: 16pt;
}

.card-5-a {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 30px;
    font-size: 26pt;
}

.card-5-b {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 120px;
    font-weight: 700;
    font-size: 16pt;
}

.card-5-c {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 145px;
    font-size: 14pt;
}

.card-5-d {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 200px;
    font-size: 16pt;
}

.card-5-e {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 225px;
    font-size: 16pt;
}

.card-5-f {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 270px;
    font-size: 16pt;
}

.card-5-g {
    position: absolute;
    width: 680px;
    text-align: right;
    left: 0;
    top: 315px;
    font-size: 16pt;
}

.card-6-a {
    position: absolute;
    left: 50px;
    top: 50px;
    font-size: 24pt;
}

.card-6-b {
    position: absolute;
    left: 50px;
    top: 145px;
    font-weight: 700;
    font-size: 16pt;
}

.card-6-c {
    position: absolute;
    left: 50px;
    top: 175px;
    font-size: 14pt;
}

.card-6-d {
    position: absolute;
    left: 50px;
    top: 300px;
    font-size: 16pt;
}

.card-6-e {
    position: absolute;
    left: 50px;
    top: 330px;
    font-size: 16pt;
}

.card-6-f {
    position: absolute;
    width: 650px;
    text-align: right;
    left: 0;
    top: 300px;
    font-size: 16pt;
}

.card-6-g {
    position: absolute;
    width: 650px;
    text-align: right;
    left: 0;
    top: 330px;
    font-size: 16pt;
}

.card-7-a {
    position: absolute;
    left: 70px;
    top: 50px;
    font-size: 24pt;
}   

.card-7-b {
    position: absolute;
    left: 70px;
    top: 115px;
    font-weight: 700;
    font-size: 16pt;
}   
    
.card-7-c {
    position: absolute;
    left: 70px;
    top: 145px;
    font-size: 14pt;
}   
    
.card-7-d {
    position: absolute;
    left: 70px;
    top: 200px;
    font-size: 16pt;
}   
    
.card-7-e {
    position: absolute;
    left: 70px;
    top: 225px;
    font-size: 16pt;
}   
    
.card-7-f {
    position: absolute;
    left: 70px;
    top: 270px;
    font-size: 16pt;
}   
    
.card-7-g {
    position: absolute;
    left: 70px;
    top: 315px; 
    font-size: 16pt;
}   

.card-8-a {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 50px;
    font-size: 24pt;
}   

.card-8-b {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 115px;
    font-weight: 700;
    font-size: 16pt;
}   
    
.card-8-c {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 145px;
    font-size: 14pt;
}   
    
.card-8-d {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 200px;
    font-size: 16pt;
}   
    
.card-8-e {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 225px;
    font-size: 16pt;
}   
    
.card-8-f {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 270px;
    font-size: 16pt;
}   
    
.card-8-g {
    position: absolute;
    text-align: right;
    width: 615px;
    left: 0px;
    top: 315px; 
    font-size: 16pt;
}   

.card-9-a {
    position: absolute;
    left: 220px;
    top: 50px;
    font-size: 24pt;
}

.card-9-b {
    position: absolute;
    left: 220px;
    top: 115px;
    font-weight: 700;
    font-size: 16pt;
}

.card-9-c {
    position: absolute;
    left: 220px;
    top: 145px;
    font-size: 14pt;
}

.card-9-d {
    position: absolute;
    left: 220px;
    top: 200px;
    font-size: 16pt;
}

.card-9-e {
    position: absolute;
    left: 220px;
    top: 225px;
    font-size: 16pt;
}

.card-9-f {
    position: absolute;
    left: 220px;
    top: 270px;
    font-size: 16pt;
}

.card-9-g {
    position: absolute;
    left: 220px;
    top: 315px;
    font-size: 16pt;
}

html, body {
    width: 100%;
}

#wrapper {
    width: 900px;
    margin: 45px auto;
    margin-bottom: 0;
}

#state-wrapper {
    background-color: #672D6E;
    padding-left: 465.1px;
    padding-right:465.1px;
}

#states, #konami {
    margin: 0;
    padding: 15px 0 15px 0;
    width: 100%; 
    color: #FFFEFC;
    display: none;
}

#states a, #states a:visited, #location-link, #konami a, #konami a:visited {
    color: #FFFEFC;
}

#states p, #konami p {
    margin: 0;
    padding: 5px;
}

.state:hover {
    background-color: #a55eb2;
}

#help-wrapper {
    background-color: #E5E5E3;
    border-top: 5px solid #7F7F7E;
}

#help {
    margin: 0 auto;
    padding: 15px 0 15px 0;
    width: 980px;
    color: #40403F;
}

#help1, #help2, #help3 {
    width: 306px;
    float: left;
    padding: 10px;
}

.border {
    background-color: #CBCBCA;
    width: 1px;
    height: 306px;
    float: left;
}

.clear {
    clear: left;
}

footer {
    background-color: #40403F;
    color: #E5E5E3;
    font-size: .8em;
    padding: 5px;
    text-align: center;
}

footer a, footer a:visited {
    color: #E5E5E3;
}

#location-arrow {
    margin-left: 15px;
    position: absolute;
    top: 57px;
}

#prev-wrapper, #next-wrapper {
    position: relative;
    float: left;
    width: 100px;
    top: 160px;
}

#previous {
    font-size: 0;
    height: 0;
    line-height: 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: #E5E5E3;
    border-width: 34px 23px 34px 0;
    float: left;
    margin: 10px;
}

#next {
    font-size: 0;
    height: 0;
    line-height: 0;
    border-style: solid;
    border-color: transparent;
    border-left-color: #E5E5E3;
    border-width: 34px 0 34px 23px;
    float: right;
    margin: 10px;
}

#next:hover {
    border-left-color: #7F7F7E;
}

#previous:hover {
    border-right-color: #7F7F7E;
}

#next-wrapper {
    text-align: right;
}

#toolbar {
    position: absolute;
    left: 547px;
    width: 108px;
    -moz-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 0 10px 0 10px;
    border: 1px solid #E5E5E3;
    background-color: #FFFEFC;
    color: #40403F;
    display: none;
}

#toolbar img {
    margin: 0;
}

#toolbar a, #toolbar a:hover, #toolbar a:active,
.simplemodal-close a, .simplemodal-close a:hover, .simplemodal-close a:active {
    border: none;
}

.font-1 {
    font-family: 'Pacifico', cursive;
}

.font-2 {
    font-family: 'Miltonian Tattoo', cursive;
}

.font-3 {
    font-family: 'Redressed', cursive;
}

.ga {
    margin: 35px auto;
    width: 728px;
}

/*
 * SimpleModal OSX Style Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: osx.css 254 2010-07-23 05:14:44Z emartin24 $
 */

#osx-modal-content, #osx-modal-data {display:none;}

/* Overlay */
#osx-overlay {background-color:#000; cursor:wait;}

/* Container */
#osx-container {background-color:#eee; color:#000; font: 16px/24px "Lucida Grande",Arial,sans-serif; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; border-radius:0 0 6px 6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000; box-shadow:0 0 64px #000;}
#osx-container a {color:#ddd;}
#osx-container #osx-modal-title {color:#000; background-color:#ddd; border-bottom:1px solid #ccc; font-weight:bold; padding:6px 8px; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close {display:none; position:absolute; right:0; top:0;}
#osx-container .close a {display:block; color:#777; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close a:hover {color:#000;}
#osx-container #osx-modal-data {font-size:12px; padding:6px 12px;}
#osx-container h2 {margin:10px 0 6px;}
#osx-container p {margin-bottom:10px;}
#osx-container span {color:#777;}

#tools {
    list-style: none;
    margin: 0;
    padding: 0;
}

#tools li {
    display: block;
    float: left;
    padding: 1px;
}

ul#tools {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#tools li a {
    display: block;
    float: left;
    height: 16px;
    width: 16px;
    background-image: url(/assets/img/toolbar.png);
    text-indent: -9999px;
}

#refresh {
    background-position: -32px 0;
}

.osx {
    background-position: -48px 0;
}

#facebook {
    background-position: -80px 0;
}

#twitter {
    background-position: -16px 0;
}

#stumbleupon {
    background-position: 0 0;
}

#digg {
    background-position: -64px 0;
}
.state {
    display: block;
    float: left;
    width: 155px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    margin-right: 52px;
}
@media (max-width: 1820px) {
    #state-wrapper {
        padding-left: 200px;
        padding-right:200px;
    }
}

@media (max-width: 1100px) {
    #state-wrapper {
        padding: 0;
    }
}

@media (max-width: 900px) {
    #state-wrapper {
        padding: 0;
    }
    #states, #konami {
        width: 100%;
    }
    html, body {
        width: 100%;
    }
    #help, #help1, #help2, #help3 {
        width: 100%;
        padding: 0;
        height: auto;
    }
    #help1, #help2, #help3 {
        width: 96%;
        padding:2%;
    }
    .border {
        display: none;
    }
    h1 {
        font-size: 15px;
    }
    #location {
        font-size: 15px;
    }
    #wrapper {
        width: 100%;
    }
    #prev-wrapper {
        display: none;
    }
    #next-wrapper {
        display: none;
    }
    #nprev-wrapper {
        display:block;
        float: left;
        padding-left: 20%;
    }
    #nnext-wrapper {
        display:block;
        float: right;
        padding-right:20%;
    }
    #nprev {
        margin-top: 5px;
        float: left;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 34px 23px 34px 0;
        border-color: transparent #e5e5e3 transparent transparent;
    }
    #nnext {
        margin-top: 5px;
        float: right;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 34px 0 34px 23px;
        border-color: transparent transparent transparent #e5e5e3;
    }
    #container{
        width: 90%;
        margin-left: 5%;
    }
    #container #inner {
        width:100%;
        padding-top: 57.142857142%; /*4:7 aspect ratio*/
        position: relative;
    }
    #container #inner #card {
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
    #card {
        background-size: 100% 100%;
        background-position: absolute;
        clear:both;
    }

    .card-1-a {
        left: 7.14%;
        top: 1.25%;
        font-size: 5vw;
    }

    .card-1-b {
        left: 7.14%;
        top: 28.75%;
        font-size: 3vw;
    }

    .card-1-c {
        left: 7.14%;
        top: 36.25%;
        font-size: 3vw;
    }

    .card-1-d {
        left: 7.14%;
        top: 50%;
        font-size: 3vw;    
    }

    .card-1-e {
        left: 7.14%;
        top: 56.25%;
        font-size: 3vw;
    }

    .card-1-f {
        left: 7.14%;
        top: 67.5%;
        font-size: 3vw;
    }

    .card-1-g {
        left: 7.14%;
        top: 78.75%;
        font-size: 3vw;
    }

    .card-2-a {
        width: 100%;
        top: 17.5%;
        font-size: 4.8vw;
    }

    .card-2-b {
        width: 100%;
        top: 31.25%;
        font-weight: 700;
        font-size: 5vw;
    }

    .card-2-c {
        width: 100%;
        top: 43.75%;
        font-size: 3vw;
    }

    .card-2-d {
        width: 97.14%;
        padding-left: 5%;
        top: 61.25%;
        font-size: 3vw;
    }

    .card-2-e {
        width: 97.14%;
        padding-left: 5%;
        top: 68.75%;
        font-size: 3vw;
    }

    .card-2-f {
        width: 97.14%;
        top: 61.25%;
        font-size: 3vw;
    }

    .card-2-g {
        width: 97.14%;
        top: 68.75%;
        font-size: 3vw;
    }

    .card-3-a {
        width: 97.14%;
        top: 5%;
        font-size: 6vw;
    }

    .card-3-b {
        width: 97.14%;
        top: 23.75%;
        font-size: 3vw;
    }

    .card-3-c {
        width: 97.14%;
        top: 30%;
        font-size: 3vw;
    }

    .card-3-d {
        width: 97.14%;
        top: 50%;
        font-size: 3vw;
    }

    .card-3-e {
        width: 97.14%;
        top: 56.25%;
        font-size: 3vw;
    }

    .card-3-f {
        width: 97.14%;
        top: 67.5%;
        font-size: 3vw;
    }

    .card-3-g {
        width: 97.14%;
        top: 78.75%;
        font-size: 3vw;
    }

    .card-4-a {
        left: 12.85%;
        top: 12.5%;
        font-size: 5vw;
    }

    .card-4-b {
        left: 12.85%;
        top: 28.75%;
        font-weight: 700;
        font-size: 3vw;
    }

    .card-4-c {
        left: 12.85%;
        top: 36.25%;
        font-size: 3vw;
    }

    .card-4-d {
        left: 12.85%;
        top: 50%;
        font-size: 3vw;
    }

    .card-4-e {
        left: 12.85%;
        top: 56.25%;
        font-size: 3vw;
    }

    .card-4-f {
        left: 12.85%;
        top: 67.5%;
        font-size: 3vw;
    }

    .card-4-g {
        left: 12.85%;
        top: 78.75%;
        font-size: 3vw;
    }

    .card-5-a {
        width: 97.14%;
        top: 7.5%;
        font-size: 5vw;
    }

    .card-5-b {
        width: 97.14%;
        top: 30%;
        font-weight: 700;
        font-size: 3vw;
    }

    .card-5-c {
        width: 97.14%;
        top: 36.25%;
        font-size: 3vw;
    }

    .card-5-d {
        width: 97.14%;
        top: 50%;
        font-size: 3vw;
    }

    .card-5-e {
        width: 97.14%;
        top: 56.25%;
        font-size: 3vw;
    }

    .card-5-f {
        width: 97.14%;
        top: 67.25%;
        font-size: 3vw;
    }

    .card-5-g {
        width: 97.14%;
        top: 78.75%;
        font-size: 3vw;
    }

    .card-6-a {
        left: 7.14%;
        top: 12.5%;
        font-size: 5vw;
    }

    .card-6-b {
        left: 7.14%;
        top: 36.25%;
        font-size: 3vw;
    }

    .card-6-c {
        left: 7.14%;
        top: 43.75%;
        font-size: 2.8vw;
    }

    .card-6-d {
        left: 7.14%;
        top: 75%;
        font-size: 3vw;
    }

    .card-6-e {
        left: 7.14%;
        top: 82.5%;
        font-size: 3vw;
    }

    .card-6-f {
        width: 92.85%;
        top: 75%;
        font-size: 3vw;
    }

    .card-6-g {
        width: 92.85%;
        top: 82.5%;
        font-size: 3vw;
    }

    .card-7-a {
        left: 10%;
        top: 12.5%;
        font-size: 5vw;
    }   

    .card-7-b {
        left: 10%;
        top: 28.75%;
        font-size: 3vw;
    }   
        
    .card-7-c {
        left: 10%;
        top: 36.25%;
        font-size: 2.8vw;
    }   
        
    .card-7-d {
        left: 10%;
        top: 50%;
        font-size: 3vw;
    }   
        
    .card-7-e {
        left: 10%;
        top: 56.25%;
        font-size: 3vw;
    }   
        
    .card-7-f {
        left: 10%;
        top: 68.5%;
        font-size: 3vw;
    }   
        
    .card-7-g {
        left: 10%;
        top: 78.75%; 
        font-size: 3vw;
    }   

    .card-8-a {
        width: 87%;
        height: 100%;
        top: 12.5%;
        font-size: 5vw;
    }   

    .card-8-b {
        width: 87%;
        top: 28.75%;
        font-size: 3vw;
    }   
        
    .card-8-c {
        width: 87%;
        top: 36.75%;
        font-size: 3vw;
    }   
        
    .card-8-d {
        width: 87%;
        top: 50%;
        font-size: 3vw;
    }   
        
    .card-8-e {
        width: 87%;
        top: 56.75%;
        font-size: 3vw;
    }   
        
    .card-8-f {
        width: 87%;
        top: 67.5%;
        font-size: 3vw;
    }   
        
    .card-8-g {
        width: 87%;
        top: 78.75%; 
        font-size: 3vw;
    }   

    .card-9-a {
        left: 31.42%;
        top: 1.25%;
        font-size: 5vw;
    }

    .card-9-b {
        left: 31.42%;
        top: 28.75%;
        font-size: 3vw;
    }

    .card-9-c {
        left: 31.42%;
        top: 36.25%;
        font-size: 3vw;
    }

    .card-9-d {
        left: 31.42%;
        top: 50%;
        font-size: 3vw;
    }

    .card-9-e {
        left: 31.42%;
        top: 56.25%;
        font-size: 3vw;
    }

    .card-9-f {
        left: 31.42%;
        top: 67.5%;
        font-size: 3vw;
    }

    .card-9-g {
        left: 31.42%;
        top: 78.75%;
        font-size: 3vw;
    }
}
