body {
	font-family: 'Press Start 2P', cursive;
}

p {
	white-space: pre;
}

a {
	color:rgb(254,113,254);
}

a:hover {
	color:#ff0000;
}

#curtain {
	/* for blackout/pop over */
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	opacity:.8;
	display: none;
}

#topright a {
	text-decoration:none;
	color:#ffffff;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 9999px)  {

	/* non-mobile */

	html { 
		background: url('../images/bg.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	/* dirty hack */
	#nothing {
		font-size:1px;
		display:none;
	}


	#title {
		position: absolute;
		background-image: url('../images/title.png');
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
		height:32%;
		width:50%;
		
		left:25%;
		top:1%;
	}

	#haiku_container {
		position:absolute;
		top:39.5%;
		min-width:30%;

		background-color:rgba(255,255,255,.5);
		border-radius: 20px;

		font-family: 'Press Start 2P', cursive;
		font-size:28px;
		color:#82ff82;
		
		-webkit-text-stroke: 1px black;
		text-shadow:
		3px 3px 0 #000,
		-1px -1px 0 #000,  
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

		cursor:pointer;
	}

	#haiku {
		margin:20px;
		text-align: center;
		line-height:150%;

		background-image: url('../images/new_haiku.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#haiku img {
		position:absolute;
		height:100%;
	}

	#social_container {
		position:absolute;
		top:69%;
		width:100%;
		height:5%;

	}

	#social_stuff {

		height:100%;
		text-align: center;
	}
	#social_stuff img {
		display:inline-block;
		height:100%;
		padding-right:.3%;
	}

	#ticker {
		position:absolute;
		overflow:hidden;
		top:78.8%;
		width:100%;
		background-color:rgba(254,113,254,.5);
		height:9.2%;
		font-family: 'Press Start 2P', cursive;
		font-size:18px;
		color:#ffffff;
		cursor:pointer;

	}
	/* Make it a marquee */

	.marquee {
		position:absolute;
		padding-top:1.5%;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
		-moz-animation-duration:400s;
		-moz-animation-name: scroll;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration:400s;
		-webkit-animation-name: scroll;
		-o-animation-iteration-count: infinite;
		-o-animation-timing-function: linear;
		-o-animation-duration:400s;
		-o-animation-name: scroll;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-duration:400s;
		animation-name: scroll;
	}

	@-moz-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@-webkit-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@-o-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	.marquee:hover {
		 -moz-animation-play-state: paused;
		 -webkit-animation-play-state: paused;
		 -o-animation-play-state: paused;
		 animation-play-state: paused;
	 }


	#generate_box {
		position:absolute;
		bottom:1%;
		right:1%;
		height:10%;
		width:20%;
		background-image: url('../images/generate_br.png');
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
		cursor:pointer;
	}

	#topright {
		position:absolute;
		top:1%;
		right:1%;
		font-size:8px;
	}

	#help_me {
		display:block;
		cursor:pointer;
		background-color:rgba(0,0,0,.2);
		border-radius: 10px;
		padding:8px;
		padding-left:11px;
		font-family: 'Press Start 2P', cursive;
		font-size:12px;
		color:#ffffff;
	}
	#click_info {
		display:block;
		cursor:pointer;
		float:right;
		
		background-color:rgba(0,0,0,.2);
		border-radius: 10px;
		padding:8px;
		padding-left:11px;
		font-family: 'Press Start 2P', cursive;
		font-size:12px;
		color:#ffffff;
	}

	.help {
		position:absolute;
		font-family: 'Trebuchet MS', arial, sans-serif;		
		font-size:12px;
		color:#ffffff;
		display:none;
	}
	#help_ticker_container {
		bottom:23%;
		left:.5%;
		width:30%;
	}
	#help_ticker_container img {
		width:11%;
		margin-left:40%;
		margin-top:2.8%;
	}
	
	#help_new_container {
		top:91%;
		right:21%;
		width:30%;
	}
	#help_new_container img {
		float:right;
		margin-left:4%;
		width:11%;
	}

	#help_info_container {
		top:4%;
		right:12%;
		width:26%;
	}
	#help_info_container img {
		float:right;
		margin-left:4%;
		width:11%;
	}

	#help_social_container {
		top:68%;
		left:63%;
		width:25%;
		height:12%;
	}
	#help_social_container img {
		float:left;
		margin-right:4%;
		width:11%;
	}

	#help_haiku_container {
		top:31%;
		left:60%;
		width:30%;
		height:12%;
	}
	#help_haiku_container img {
		float:left;
		margin-right:4%;
		width:11%;
	}
}












@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  {

	/* non-mobile */

	html { 
		background: url('../images/bg_small.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#nothing {
		font-size:2px;
		display:none;
	}

	#title {
		position: absolute;
		background-image: url('../images/title.png');
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
		height:32%;
		width:100%;
		
		left:0%;
		top:1%;
	}

	#haiku_container {
		position:absolute;
		top:40%;
		min-width:60%;
		//height:30%;

		background-color:rgba(255,255,255,.5);
		border-radius: 20px;

		font-family: 'Press Start 2P', cursive;
		font-size:28px;
		color:#82ff82;
		
		-webkit-text-stroke: 1px black;
		text-shadow:
		3px 3px 0 #000,
		-1px -1px 0 #000,  
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

		cursor:pointer;
	}

	#haiku {
		margin:20px;
		text-align: center;
		line-height:150%;

		background-image: url('../images/new_haiku.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#haiku img {
		position:absolute;
		height:100%;
	}

	#social_container {
		position:absolute;
		top:64%;
		width:100%;
		height:5%;

	}

	#social_stuff {

		height:100%;
		text-align: center;
	}
	#social_stuff img {
		display:inline-block;
		height:100%;
		padding-right:.3%;
	}

	#ticker {
		position:absolute;
		overflow:hidden;
		top:78.8%;
		width:100%;
		background-color:rgba(254,113,254,.5);
		height:9.2%;
		font-family: 'Press Start 2P', cursive;
		font-size:18px;
		color:#ffffff;
		cursor:pointer;

	}
	/* Make it a marquee */

	.marquee {
		position:absolute;
		padding-top:4.5%;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
		-moz-animation-duration:400s;
		-moz-animation-name: scroll;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration:400s;
		-webkit-animation-name: scroll;
		-o-animation-iteration-count: infinite;
		-o-animation-timing-function: linear;
		-o-animation-duration:400s;
		-o-animation-name: scroll;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-duration:400s;
		animation-name: scroll;
	}

	@-moz-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@-webkit-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@-o-keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	@keyframes scroll {
		0% {left:0;}
		100% {left:-4600%;}
	}

	.marquee:hover {
		 -moz-animation-play-state: paused;
		 -webkit-animation-play-state: paused;
		 -o-animation-play-state: paused;
		 animation-play-state: paused;
	 }


	#generate_box {
		position:absolute;
		bottom:0%;
		right:1%;
		height:12%;
		width:40%;
		background-image: url('../images/generate_br.png');
		background-repeat: no-repeat;
		background-position: right center;
		background-size: contain;
		cursor:pointer;
	}

	#pop_over {
		position:fixed;
		background-color:rgba(255,255,255,1);
		left:10%;
		top:5%;
		width:80%;
		height:90%;
		display:none;
		z-index:3;
		border-radius: 20px;
		color:rgb(254,113,254);
	}

	#about {
		margin: 40px;
		font-size: 12px;
		line-height:150%;
	}

	#mepic {
		background-image: url('../images/me.gif');
		background-repeat: no-repeat;
		background-position: center center;
		background-size:contain;
		right:4%;
		top:4%;
		width:15%;
		height:15%;
		position:absolute;
		margin-left:10%;
		display:none;
	}

	#close_pop {
		cursor:pointer;
		position:absolute;
		right:4%;
		bottom:4%;
		color:#000000;
	}

	#topright {
		position:absolute;
		top:1%;
		right:1%;
		font-size:8px;
	}

	#help_me {
		display:block;
		cursor:pointer;
		background-color:rgba(0,0,0,.2);
		border-radius: 10px;
		padding:8px;
		padding-left:11px;
		font-family: 'Press Start 2P', cursive;
		font-size:12px;
		color:#ffffff;
	}
	#click_info {
		display:block;
		cursor:pointer;
		float:right;
		
		background-color:rgba(0,0,0,.2);
		border-radius: 10px;
		padding:8px;
		padding-left:11px;
		font-family: 'Press Start 2P', cursive;
		font-size:12px;
		color:#ffffff;
	}

	.help {
		position:absolute;
		font-family: 'Trebuchet MS', arial, sans-serif;		
		font-size:12px;
		color:#ffffff;
		display:none;
	}
	.help img {
		display:none;
	}

	#help_ticker_container {
		bottom:23%;
		left:.5%;
		width:30%;
	}
	#help_ticker_container img {
		width:11%;
		margin-left:40%;
		margin-top:2.8%;
	}
	
	#help_new_container {
		top:91%;
		right:21%;
		width:30%;
	}
	#help_new_container img {
		float:right;
		margin-left:4%;
		width:11%;
	}

	#help_social_container {
		top:58%;
		left:43%;
		width:25%;
		height:12%;
	}
	#help_social_container img {
		float:left;
		margin-right:4%;
		width:11%;
	}

	#help_haiku_container {
		top:30%;
		left:40%;
		width:30%;
		height:12%;
	}
	#help_haiku_container img {
		float:left;
		margin-right:4%;
		width:11%;
	}
}