/*
     FILE ARCHIVED ON 23:44:08 Mar 14, 2015 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 8:41:45 Aug 11, 2015.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/

* {
    margin: 0;
    padding: 0;
}
a img {
    border: 0 none;
}
h2, p, input {
	line-height: 1.25;
}
html, body {
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    font-size: 20px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
body {
    background-color: #70C5CE;
	text-align: center;
}
#background {
	display: block;
	height: 100%;
	margin: 0 auto;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: -2;
}
#overlay {
	background: #000;
	display: none;
	height: 100%;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 100;
}
#overlayContent {
	background: transparent;
	display: none;
	height: 100%;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 100;
}
#overlayContent .table {
	margin: 0 auto;
	width: 80%;
}
#overlayContent .column {
	float: left;
	width: 33%;
}
#overlayContent .column:hover {
	opacity: 0.8;
	filter:alpha(opacity=80);
}
#overlayContent .column img {
	width: 80%;
}
#overlayContent .browserlink {
	color: #fff;
	font-size: 180%;
	text-decoration: none;
}
#gameWrapper {
}
#gameCreator {
    height: 79.8%;
    margin: 0 auto;
	opacity: 0;
}
#leftColumn {
    float: left;
	position: relative;
}
#logo {
    display: block;
    margin: 0 auto;
}
#logo img {
    height: 100%;
}
#optionPanel {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    position: relative;
}
#optionPanel:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #000000;
    border-image: none;
    border-radius: 10px;
    border-style: solid;
    border-width: inherit;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
#optionPanel h2 {
    border-bottom: 3px dashed;
    color: #FFFFFF;
    font-size: 300%;
    font-weight: 700;
    margin: 3% auto;
    position: relative;
    text-align: center;
    width: 90%;
}
#optionPanel p {
    color: #FFFFFF;
    text-align: center;
}
#optionPanel .bx-wrapper p a, #optionPanel .bx-wrapper .error a, .createblock a, .shareblock a, .bx-wrapper a span {
    border-bottom: 1px solid #FFFF00;
    color: #FFFFFF;
    font-weight: 700;
    transition: padding-bottom 0.5s ease 0s;
}
.bx-wrapper a {
	text-decoration: none;
}
#buttons {
    height: 50px;
    margin: 0 auto;
    width: 96%;
}
a.flappyButton {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #E76100;
    border-color: #503102;
    border-image: none;
    border-style: solid;
    border-width: 2px 2px 4px;
    color: #FFFFFF;
    display: block;
    float: left;
    margin: 0 10px;
    padding: 5px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color 1s ease 0s, border-color 0.3s ease 0s;
    width: 150px;
}
a.flappyButton:before {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #FFFFFF;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
a.flappyButton.active {
    background-color: #41CC4F;
}
a.flappyButton.publish {
    background-color: #00D5FF;
    bottom: -10.5%;
    font-size: 200%;
    left: 28.5%;
    padding: 1% 0;
    position: absolute;
    width: 40%;
}
a.flappyButton:hover {
	border-color: #999;
}
a.flappyButton.inactive {
    opacity: 0.5;
}
a.flappyButton.inactive:hover {
	border-color: #503102;
}
#bx-prev, #bx-next {
    background-color: #CA1212;
    transition: opacity 1s ease 0s, border-color 0.3s ease 0s;
}
#publishTip {
	background-color: #00D5FF;
	border: 3px solid #001D54;
	border-radius: 10px;
	bottom: -22.5%;
	color: #FFFFFF;
	left: 55%;
	padding: 1% 0;
	position: absolute;
	text-align: center;
	width: 80%;
	z-index: 1000;
}
#publishTip img {
    left: -10%;
    position: absolute;
    top: -30%;
    width: 10%;
}
#publishBlock {
	display: none;
}
.drop, .drop-small {
    position: relative;
    transition: opacity 0.3s ease-in-out 0s;
}
.drop .message, .drop-small .message {
    background-color: #FFFFFF;
    border-radius: 10px;
    color: #000000;
    font-size: 400%;
    height: 100%;
    left: 0;
    line-height: 650%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 100;
}
.drop-small .message {
    line-height: 170%;
}
.drop.dz-drag-hover .message, .drop-small.dz-drag-hover .message {
    opacity: 0.6;
}
.step2, .error {
    display: none;
}
.step2 {
    height: 100%;
}
.positioner {
    position: relative;
}
.error {
    background: none repeat scroll 0 0 #FB8686;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #FFFFFF;
    font-size: 80%;
    font-weight: bold;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#sound .error {
    border-top-right-radius: 0;
    margin: 0.4% 0 0 0.3%;
    padding: 0.1% 0 0.6%;
    text-align: center;
    width: 101%;
}
.jcrop-holder {
    border: 1px solid #000000;
    margin: 0 auto;
}
.infobar {
    border-top: 1px dashed #FFFFFF;
    color: #FFFFFF;
    font-size: 80%;
    margin-top: 1%;
    padding-top: 1%;
    text-align: center;
    width: 100%;
}
.infobar input.checkbox {
    width: 20px;
}
#gameCreator input {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 3px dashed #FFFFFF;
    border-radius: 10px;
    color: #FFE8F4;
    font-size: 100%;
    letter-spacing: 2px;
    padding: 1%;
    text-align: center;
}
#gameCreator input.uploadBtn {
    background: none repeat scroll 0 0 #0096FF;
    border: 1px solid #000000;
    color: #FFFFFF;
    cursor: pointer;
    display: inline;
    font-family: "Trebuchet MS";
    font-size: 100%;
    letter-spacing: 0;
    margin-left: 0.5%;
    padding: 0 0.5%;
    text-align: center;
}
#gameCreator input.uploadBtn:hover {
    border-color: #FFFFFF;
}
#title, #author {
	font-size: 100%;
    width: 70%;
}
#generatedGameWrapper {
	opacity: 0;
}
#gamePreview {
	background: #000;
    border: 3px solid #CCCCCC;
    border-radius: 20px;
    float: right;
    position: relative;
    z-index: 1;
}
#gamePreview .background {
	left: 0;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}
#gamePreview.created {
    float: none;
    margin: 3% auto 0;
}
#gameRight {
    color: #FFFFFF;
    left: 105%;
    position: absolute;
	text-align: left;
    top: 5%;
}
#gameLeft {
    color: #FFFFFF;
    position: absolute;
    right: 105%;
    top: 0;
}
#bootloader {
    background: none repeat scroll 0 0 #332C33;
    position: absolute;
    z-index: 2;
}
#loading {
    margin-top: 40%;
    text-align: center;
}
#loading img {
    margin-bottom: 5%;
    width: 50%;
}
#FlappyGenerator {
    position: relative;
    z-index: 3;
}
#updated {
    background-color: #5EEB7A;
    border-radius: 10px;
    color: #FFFFFF;
    display: none;
    left: 25%;
    padding: 1% 3%;
    position: absolute;
    top: -7%;
}
#generatedGameWrapper #didYouKnow {
    background-color: #ef027d;
    border-radius: 10px;
    color: #FFFFFF;
    padding: 3% 1%;
    font-size: 100%;
    margin-top: 3%;
    text-align: center;
    width: 80%;
}
#generatedGameWrapper #didYouKnow a {
	color: white;
	font-size: 150%;
	text-decoration: none;
}
.sliderVal {
    color: #FFFFFF;
    float: right;
    font-size: 200%;
    margin-right: 5%;
}
.slider {
    float: left;
    margin-left: 4%;
    margin-top: 1.7%;
    width: 75%;
}
.ui-slider-handle {
    border-bottom: 1px solid #AED0EA;
}
#params > div {
    height: 10%;
}
.fb-like span {
    float: left;
}
.fb-like iframe {
	visibility: inherit !important;
}
#___plusone_0, #___plusone_1 {
    margin-left: 15px !important;
    width: 70px !important;
}
#___plusone_0 iframe, #___plusone_1 iframe {
	visibility: inherit !important;
}
.shareblock {
    /* visibility: hidden; */
    text-align: center;
}
.createblock {
    display: none;
	margin-top: 10%;
	margin-left: -13%;
    text-align: center;
}
.generatedblock {
	text-align: center;
}
.spy {
	-moz-box-shadow:inset 0px 0px 0px 1px #fbafe3;
	-webkit-box-shadow:inset 0px 0px 0px 1px #fbafe3;
	box-shadow:inset 0px 0px 0px 1px #fbafe3;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
	background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
	background-color:#ff5bb0;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid #ee1eb5;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size: 125%;
	font-weight:bold;
	font-style:normal;
	line-height: 130%;
	width: 60%;
	margin-top: 5%;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #c70067;
	padding: 8% 5%;
}
.spy:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(1, #ef027d), color-stop(0.2, #ff5bb0) );
	background:-moz-linear-gradient( center top, #ff5bb0 20%, #ef027d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
	background-color:#ef027d;
}
#gameRight .spy {
	display: none;
}
#twitter-widget-0 {
    margin-left: 5px;
}
#contact {
	bottom: 0;
	color: #000;
	font-size: 70%;
	padding: 1.5% 0 1.2%;
	position: absolute;
	right: 2%;
	text-align: right; 
	opacity: 0.5;
}
#contact a {
	color: #0096ff;
	text-decoration: none;
}
#contact:hover {
	opacity: 1;
}
#reddit {
	bottom: 0;
	color: #000;
	font-size: 70%;
	padding: 0 0.25%;
	position: absolute;
	left: 2%;
	text-align: left;
}
#reddit div {
	position: relative;
	z-index: -1;
}
#reddit .overlay {
	background: transparent;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10000;
}
#social {
	bottom: 1.7%;
	color: #000;
	font-size: 70%;
	position: absolute;
	left: 2%;
	text-align: left;
}

#menu {
	display: none;
	list-style-type: none;
	margin: 0 auto 0;
	width: 527px;
}

.sidetext {
	font-size: 250%;
	top: 45%;
	position: absolute;
	color: #fff;
	border-bottom: 1px solid #fff;
	left: -34%;
	width: 65%;
	text-align: right;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
}

#grid {
	display: none;
	margin: 0 auto;
	position: relative;
	width: 965px;
}
 
	#grid .grid-element {
		box-shadow: 0 0 2px 2px #000;
		border-radius: 10px;
		float: left;
		height: 280px;
		margin: 10px;
		overflow: hidden;
		position: relative;
		width: 300px;
		
		transition: 0.2s all;
	}
	
	#grid .grid-element:hover {
		box-shadow: 0 0 4px 4px orange;
		
		transition: 0.2s all;
	}

	#grid .grid-bg {
		height: 100%;
		width: 100%;
	}

	#grid .grid-bird {
		position: absolute;
		left: 50px;
		top: 120px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg); 
		-moz-transform: rotate(-45deg); 
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
	}

	#grid .grid-pipe {
		position: absolute;
		left: 150px;
		top: 180px;	
	}

	#grid .grid-pipe-inverted {
		position: absolute;
		left: 150px;
		bottom: 220px;	
		-moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
	}
	
	#grid .grid-caption {	
		position: absolute;
		left: 0;
		bottom: 0;
		
		background-color: rgba(0, 0, 0, 0.4);		
		color: #fff;
		padding: 1% 3% 1%;		
		width: 100%;
		
		text-align: left;
	}
	
	#grid .grid-title {
		display: block;
		font-size: 100%;
	}
	
	#grid .grid-author {
		display: block;
		font-size: 80%;
	}
	
	#grid .grid-likes {
		position: absolute;
		left: 3%;
		top: 0;
		
		color: #fff;
		font-size: 140%;
		line-height: 150%;
		
		text-align: left;
		
		width: 100%;
	}
	
	#grid .grid-likes img {
		width: 8%;
	}
	
	#grid .grid-space {
		clear: left;
		height: 100px;
		width: 100%;
	}
	
	#pagination {
		clear: both;
		padding-top: 2%;
		text-align: center;
	}
	
	#pagination a {
		background-color: #E76100;
		border: 2px solid #000;
		border-radius: 10px;
		color: #fff;
		padding: 0 1%;
		text-decoration: none;
		
		transition: 0.2s all;
	}
	
	#pagination a:hover, #pagination a.current {
		background-color: orange;
		
		transition: 0.2s all;
	}
	
	#g_dialog a {
		transition: 0.5s all;
	}
	
	#g_dialog a:hover {
		opacity: 0.6;
		transition: 0.5s all;
	}
	
#privacyWrapper {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	display: none;
	height: 68%;
	margin: 3% auto 0;
	padding: 1%;
	width: 80%;
}

#privacy {
	height: 100%;
	overflow-y: scroll;
	text-align: left;
	width: 100%;
}
	
	#privacy h1, #privacy h2, #privacy h3, #privacy h4, #privacy h5 {
		margin: 1% 0;
	}
	
	#privacy a {
		color: #666;
		font-weight: bold;
		text-decoration: none;
	}
	

/* Literally Canvas */

#literallyBird, #literallyPipe {
	height: 100%;
}

#literallyDialogBird, #literallyDialogPipe {
	padding: .5em .25em .25em;
}

a.literallyFinish {
	background-color: #00D5FF;
	bottom: 75px;
	font-size: 100%;
	color: #fff !important;
	right: 0px;
	padding: 1% 0;
	position: absolute;
	z-index: 102;
}