html { height: 100%; font-size: 62.5%; overflow-x: hidden; overflow-y: hidden; }
body { height: 100%; margin: 0; padding: 0; font-size: 1.5em; font: normal 1.5em/1.25em Helvetica, Arial, 'Droid Sans', sans-serif; }
ul { margin: 0; padding: 0; list-style-type: none; }

/* header */
header { position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: #333; background: rgba(0, 0, 0, .65);
		 box-shadow: 0px 2px 3px #000; }
header .settings-toggle { display: block; width: 48px; height: 48px; margin: 6px 0 0 1%;
						  background: url(img/gear-96.png) no-repeat; background-size: 48px 48px; }


/* iguana movement */
#page { position: relative; width: 100%; height: 90%; }
#iguana { width: 100%; height: 100%; background: url(img/iguana.png) 30% center no-repeat; }  
#iguana.open { background-image: url(img/iguana-red-mouth.png); }
#iguana.open2 { background-image: url(img/iguana-red-mouth-tight.png); }

#fb_dialog_ipad_overlay {
    width: 600px !important;
}

/* insult sharing */
#insult-sharing { position: absolute; right: 0; top: 50%; margin-top: -120px; padding: 0 12px; /* margin-top should be minus #insult-sharing height / 2 */
				  border: 8px solid #000; border-right: 0; border-radius: 8px 0 0 8px; background-color: #97b435; background-size: 50px 50px;
				  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); 
				  box-sizing: content-box; -webkit-box-sizing: border-box; } 
#insult-sharing a { display: block; width: 64px; height: 48px; margin: 12px 0; background-size: 64px 48px; cursor: pointer; } /* insult sharing icons are 128 x 96 at full size */
#is-email { background: url(img/email-128x96.png) no-repeat; }
#is-facebook { background: url(img/facebook-128x96.png) no-repeat; }
#is-facebook-friend { background: url(img/facebook-friend-128x96.png) no-repeat; }
#is-twitter { background: url(img/twitter-128x96.png) no-repeat; }


/* settings */
.form-controls { margin: 2em 0; text-align: center; }
.form-controls a { display: block; width: 20%; margin: 0 auto; padding: 0 1em; line-height: 2em; color: #000;
					border: 1px solid #888; border-radius: 4px; background: #ffffff; cursor: pointer;
					filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#eeeeee');
					background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
					background: -moz-linear-gradient(top, #ffffff, #eeeeee); }
#settings { display: none; position: absolute; top: 60px; left: 0; width: 90%; max-width: 500px; height: 80%; max-height: 380px; color: #fff;
			background: rgba(50,50,50,.97); box-shadow: 0px 2px 3px #000; z-index: 100; }
#settings .field { margin: 1.5em 2em; margin: 1.5rem 2rem; }
#settings .field label { display: block; }
/*#settings .field-radio label { display: inline-block; }
#settings .field-radio label:first-child { display: block; margin-bottom: 5px; } */
#settings .field .help { margin-left: 1em; margin-left: 1rem; font-size: .75em; font-size: 1rem; font-style: italic; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
	input[type='range'] { width: 100%; background: #0c0; height:10px; }
}
input[type='range']::-webkit-slider-thumb{ height:30px; width:30px; border-radius: 30px; background: #97b435; }

#bottom-wrapper { position: absolute; bottom: 0; width: 100%; }
#caption { position: relative; padding: .5em 1em .5em 3em; min-height: 4.25em; z-index: 50; 
		   font-weight: bold; font-size: 1.5rem; color: #fff; background: rgba(0,0,0,.9); text-align: center;
		   box-sizing:border-box; -ms-box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#insult-now { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: 6px 0 0 .5em; z-index: 51; cursor: pointer;
			  background: url(img/speak-bubble.png) center center no-repeat; background-size: 20px 20px; }


#note-container { position: absolute; top: 12%; left: 3%; width: 15%; padding: 8px 5px; border: 4px solid #000; background-color: #97b435; background-size: 50px 50px; z-index: 10; opacity: 0.9;
				  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); }
#note-container h3 { margin: 0; }
#note-container h3 a { color: #000; }
#note-container p { clear: both; margin: 8px -5px -8px -5px; padding: .5rem; color: #a00; background: rgba(200,200,200, .4); }
#note-container a { font-weight: bold; color: #a00; text-decoration: none; }

.note-type-ad img { float: left; margin: 0 .5rem .5rem 0; border: 1px solid #97b435; }

#ad { position: relative; margin: 0 auto; z-index: 20; text-align: center; }


@media only screen and (max-width: 1154px), (max-height: 767px) {
	/* smaller tablet portrait */
	#iguana { background-size: 512px 384px; }	
	#insult-sharing { margin-top: -90px; padding: 0 8px; border-width: 4px; border-radius: 4px 0 0 4px; } 
	#insult-sharing a { width: 48px; height: 36px; margin: 8px 0; background-size: 48px 36px; }

	#note-container { top: 15%; width: 18%; font-size: 1.25rem; line-height: 1.5rem; }
}
	
@media only screen and (max-width: 1154px) and (orientation: landscape) {
	/* smaller tablet landscape */
}

@media only screen and (max-width: 600px) {
	/* mobile */
	#page { height: 87%; }

	header { height: 36px; }
	header .settings-toggle { width: 24px; height: 24px; background-size: 24px 24px; }
	#iguana { background-size: 256px 192px; background-position: 20% 70%; }
	#insult-sharing { right: auto; top: 0; right: 0; width: 75%; margin: 3px 0 0 -37.5%; padding: 0 4px; 
					  border: 0; background: none; } 
	#insult-sharing a { float: left; width: 32px; height: 24px; margin: 4px 5.5%; background-size: 32px 24px; }
	#settings { top: 36px; }
	
	#caption { min-height: 2.25em; }

	#note-container { top: 12%; width: 90%; font-size: 1.15rem; line-height: 1.4rem; border-width: 2px; }
	#note-container img { max-height: 48px; max-width: 48px; }
	#note-container p { clear: none; margin-top: 2px; padding: .25rem .5rem; font-size: 1.1rem; }
}

@media only screen and (max-width: 600px) and (orientation: landscape) {
	/* mobile landscape */
	#page { height: 75%; }

	#iguana { background-position: 80% 50%; }

	#note-container { top: 22%; max-width: 30%; max-height: 50%; font-size: 1.15rem; line-height: 1.4rem; border-width: 2px; }
}