@charset "utf-8";
/*  CSS Reset  */
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, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
html {
	width: 100%;
	height: 100%;
}
:focus {
	outline: 0;
}
.clear {
	clear: both;
}
.skip {
	display: none;
}
.hide {
	display: none;
}
.visible {
	visibility: visible;
}
.left {
	float: left;
}
.right {
	float: right;
}
em{
	font-style:italic;
}

/*--BODY--*/
body {
	background:#000000;
	color: #000000;
	font-size: 16px;
	font-family: "Courier New", Courier, monospace;
}
p {
	margin: 0;
	padding: 5px 0;
}
img {

}
#header {
	height:auto;
}
/*- Community links (Twitter, Facebook, etc) -*/
.comlinks {
	padding-top: 3px;
	width:560px;
	text-align:right;
	float:left;
}
/*------ LINKS ------*/
a:link {
	color: #000000;
}
a:active {
	color: #000000;
}
a:hover {
	color: #ffffff;
}
a:visited {
	color: #000000;
}
/*-- MAIN CONTENT--*/
/*- Background for index -*/
#landscape-characters {
	background:url(images/backgroundcharacters.jpg);
	height: 500px;
	width: 950px;
	margin: 0 auto;
}
#landscape-home {
	background:url(images/background.jpg) top no-repeat;
	height: 560px;
	width: 950px;
	margin: 0 auto;
}
#landscape-construction {
	background:url(images/background-construction.jpg) top no-repeat;
	height: 575px;
	width: 950px;
	margin: 0 auto;
}
/*- Other background -*/
#landscape-other {
	background:url(images/background-other.jpg);
	height: 575px;
	width: 1150px;
	margin: 0 auto;
}
/*- Content box -*/
#content {
	min-height:500px;
	max-height:500px;
}
#vidcontent {
	padding-top:10px;
	height:385px;
	width: 700px;
	margin: 0 auto;
}
/*- Index image box -*/
.image-index {
	width:512px;
	margin:auto auto;
	position:relative;
	top:0px;
}

/*- Main character page, Goodwill images -*/
.left {
	padding-top: 75px;
	position: absolute;
	padding-left: 200px;
	width: 388px;
}
/*- Main character page, Haplocks images -*/
.right {
	float: right;
	margin-right: 200px;
	padding-top: 75px;
	z-index: 3;
}

/*------MAIN EPISODES PAGE/S------*/
/*- Background for episodes -*/
#landscape-episodes {
	background:url(images/background-episodes.jpg) top center no-repeat;
	height: 560px;
	width: 950px;
	margin: 0 auto;
}
/*- Episode page left, for characters button -*/
.episodeleft {
	position: absolute;
	padding-left: 0px;
}
/*- Episode page right, for video -*/
.episoderight {
	margin-left: 0px;
	font-size: 16px;

}
.gamesright{
	margin-left:100px;
}
#flVideo{
	width:512px;
	height:288px;
	border: solid 8px #000;
	margin-left: 250px;
}
/*- Text box for individual pages -*/
.text-games{
	padding:10px;
	margin: 0 150px;
	height: 360px;
	background-color: #0CF;
	border: solid 2px #006277;
}
.play-games{
	padding:10px;
	height: 384px;
	background-color: #000;
	margin-left: 225px;
	width: 576px;
}
.play-spatchat{
	padding:10px;
	margin: 0 150px;
	height: 360px;
	background: #FFCC00;
	border: solid 2px #ffeeaa;
}
.text-episodes-red{
	height: 360px;
	border: solid 8px #000;
	background-color:#FF5E5E;
	width: 512px;
	margin-left: 250px;
	font-size: 16px;
}
.text-episodes-blue{
	height: 360px;
	border: solid 8px #000;
	background-color:#0CF;
	width: 512px;
	margin-left: 250px;
	font-size: 16px;
}
.text-episodes-yellow{
	border: solid 8px #000;
	background-color:#FFCC00;
	width: 512px;
	margin-left: 250px;
	font-size: 16px;
}
.text-episodes-black{
	padding:10px;
	margin: 0 300px;
	height: 340px;
	background-color: #000;
}
/*- Scroll box for individual episode text pages -*/
.ep-textscroll {
	overflow:auto;
	height:360px;
}
#episodeInfo{
	color:#000;
	text-align:center;
	padding:3px;
	font-size:16px;
}
	#episodeInfo a{
		color:#000;
		text-decoration:underline;
	}
	#episodeInfo a:hover{
		color:#fff;
		text-decoration:none;
	}
.h3watch{
	color:#000;
	text-decoration:underline;
}
	.h3watch:hover{
		color:#fff;
		text-decoration:none;
	}
/*------EPISODE VIDEO PAGE------*/
/*- Box for episode videos -*/
.vid-episodes {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 300px;
	margin-left: 300px;
}
/*- Box for "Share This Video" -*/
.video-share {
	position: absolute;
	margin-right: 0px;
	left: 1073px;
	top: 190px;
}
/*- Line for "Share This Video" -*/
.line {
	padding-top: 10px;
	border-bottom: #FFF dashed thin;
}
/*- Padding -*/
.share {
	padding-top: 10px;
}

/*------CHARACTER PAGE/S------*/
/*- Background for Goodwills -*/
#landscape-guru {
	background:url(images/background-guru.jpg);
	height: 500px;
	width: 950px;
	margin: 0 auto;
}
/*- Background for Haplocks -*/
#landscape-grogan {
	background:url(images/background-grogan.jpg);
	height: 500px;
	width: 950px;
	margin: 0 auto;
}
/*- Container for character-text and character-image -*/
.container {
	position: relative;
}
/*- Character text box -*/
.character-text {
	position: absolute;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-right: 530px;
	margin-left: 220px;
	background:url(images/back-green_sml.jpg) repeat-y;
	left: 50px;
	height: 340px;
}
/*- Character image box -*/
.character-image {
	position: absolute;
	margin-right: 60px;
	left: 630px;
}
#char_guru{
	width:213px;
	background:transparent url(images/gurufull.png) top no-repeat;
	height:317px;
	float:left;
	margin:50px 0 0 100px;
}
#char_freda{
	width:80px;
	background:transparent url(images/fredafull.png) top no-repeat;
	height:112px;
	float:left;
	margin:230px 0 0 50px;
}
#char_grogan{
	width:130px;
	background:transparent url(images/groganfull.png) top no-repeat;
	height:317px;
	float:left;
	margin:40px 0 0 50px;
}
#char_jasper{
	width:96px;
	background:transparent url(images/jasperfull.png) top no-repeat;
	height:287px;
	float:left;
	margin:90px 0 0 50px;
}
	#char_guru:hover{
		background:transparent url(images/gurufull.png) bottom no-repeat;
		cursor:pointer;
		cursor:hand;
	}
	#char_freda:hover{
		background:transparent url(images/fredafull.png) bottom no-repeat;
		cursor:pointer;
		cursor:hand;
	}
	#char_grogan:hover{
		background:transparent url(images/groganfull.png) bottom no-repeat;
		cursor:pointer;
		cursor:hand;
	}
	#char_jasper:hover{
		background:transparent url(images/jasperfull.png) bottom no-repeat;
		cursor:pointer;
		cursor:hand;
	}
.text-characters {
	padding:10px;
	margin: 0 225px;
	background-color: #009933;
	height: 350px;
	border: solid 2px #22ee22;
}
.text-characters-guru {
	margin: 0 0 0 250px;
	background-color: #66CC33;
	border: solid 8px #000;
	width: 512px;
	height: auto;
}
	.greenRoundTop{
	min-height:10px;
	background:url(images/rounded_green.jpg) top no-repeat;
	overflow:hidden;
	}
	.greenRoundBottom{
	min-height:10px;
	background:url(images/rounded_green.jpg) bottom no-repeat;
	overflow:hidden;
	}
	.pinkRoundTop{
	min-height:10px;
	background:url(images/rounded_pink.jpg) top no-repeat;
	overflow:hidden;
	}
	.pinkRoundBottom{
	min-height:10px;
	background:url(images/rounded_pink.jpg) bottom no-repeat;
	overflow:hidden;
	}
	.blueRoundTop{
	min-height:10px;
	background:url(images/rounded_blue.jpg) top no-repeat;
	overflow:hidden;
	}
	.blueRoundBottom{
	min-height:10px;
	background:url(images/rounded_blue.jpg) bottom no-repeat;
	overflow:hidden;
	}
	.yellowRoundTop{
	min-height:10px;
	background:url(images/rounded_yellow.jpg) top no-repeat;
	overflow:hidden;
	}
	.yellowRoundBottom{
	min-height:10px;
	background:url(images/rounded_yellow.jpg) bottom no-repeat;
	overflow:hidden;
	}
#colour {
	background-color: #0F6;
}
/*------BUTTONS!------*/
/*- Main Navigation Buttons -*/
#menu {
	position: relative;
	margin: 0 auto;
	width: 950px;
}
#menu a {
	width: 152px;
	height: 120px;
	margin-left: 6px;
	display: block;
	float: left;
	text-indent: -2000px;
	outline: none;
}
#menu a:hover {
	background-position: center -131px;

}
#menu .thehaplocks {
	background: url(images/thehaplocks.png) top center no-repeat;
}
#menu .dareyou {
	background: url(images/dareyou.png) top center no-repeat;
}
#menu .spatchat {
	background: url(images/spatchat.png) top center no-repeat;
}
#menu .recycler {
	background: url(images/recycler.png) top center no-repeat;
}
#menu .biosphere {
	background: url(images/biosphere.png) top center no-repeat;
}
#menu .dump {
	background: url(images/dump.png) top center no-repeat;
}
.padding-box {
	padding-top: 30px;
	padding-left: 10px;
	width: 235px;
}
/*- Characters Button -*/
#characters {
	position: relative;
	height: 150px;
	width: 189px;
	padding-left: 5px;
	padding-top: 5px;
}
#characters a {
	width: 189px;
	height: 71px;
	margin-left: 0px;
	display: block;
	text-indent: -2000px;
	outline: none;
}
#characters a:hover {
	background-position: 0 -71px;
}
#characters .characters {
	background: url(images/characters_sml.png) no-repeat;
}
#characters .playep {
	background: url(images/playepisodes_sml.png) no-repeat;
}
#characters .ecovanity {
	background: url(images/ecovanity_sml.png) no-repeat;
}
#characters .moregames {
	background: url(images/moregames_sml.png) no-repeat;
}
#characters .playspatchat {
	background: url(images/playspatchat_sml.png) no-repeat;
}
#characters .ourcomedians {
	background: url(images/ourcomedians_sml.png) no-repeat;
}
/*- Play Charg'd button -*/
#charged {
	position: relative;
	height: 40px;
	margin: 0 auto;
	width: 459px;
}
	#charged a {
		width: 459px;
		height: 40px;
		margin-left: 6px;
		display: block;
		float: left;
		text-indent: -2000px;
		outline: none;
	}
	#charged a:hover {
		background-position: 0 -40px;
	}
	#charged .charged {
		background: url(images/play_chargd.png) no-repeat;
	}
/*- Play Episode button -*/
#playEpisode {
	position: relative;
	height: 37px;
	margin: 0 auto;
	width: 442px;
}
	#playEpisode a {
		width: 442px;
		height: 37px;
		margin-left: 6px;
		display: block;
		float: left;
		text-indent: -2000px;
		outline: none;
	}
	#playEpisode a:hover {
		background-position: 0 -37px;
	}
	#playEpisode .playEpisode {
		background: url(images/play_episode.png) no-repeat;
	}
/*- Play SPATCHAT button -*/
#playSpat {
	position: relative;
	height: 37px;
	margin: 0 auto;
	width: 357px;
}
	#playSpat a {
		width: 357px;
		height: 37px;
		margin-left: 6px;
		display: block;
		float: left;
		text-indent: -2000px;
		outline: none;
	}
	#playSpat a:hover {
		background-position: 0 -37px;
	}
	#playSpat .playSpat {
		background: url(images/play_spatchat.png) no-repeat;
	}
/* --Via Facebook button --*/
#viafb {
	height: 28px;
	width: 256px;
}
#viafb a {
	width: 128px;
	height: 28px;
	margin-left: 0px;
	display: block;
	float: left;
	text-indent: -2000px;
	outline: none;
}
#viafb a:hover {
	background-position: 0 -28px;
}
#viafb .viafb {
	background: url(images/viafb2_sml.jpg) no-repeat;
}
#viafb .viafb2 {
	background: url(images/viatwitter2_sml.jpg) no-repeat;
}
/*- Send to Friend button -*/
#sendtofriend {
	position: relative;
	height: 28px;
	width: 256px;
}
#sendtofriend a {
	width: 128px;
	height: 28px;
	margin-left: 0px;
	display: block;
	text-indent: -2000px;
	outline: none;
	float: left;
}
#sendtofriend a:hover {
	background-position: 0 -28px;
}
#sendtofriend .sendtofriend {
	background: url(images/sendtofriend2_sml.jpg) no-repeat;
}
#sendtofriend .sendtofriend2 {
	background: url(images/smstofriend2_sml.jpg) no-repeat;
}
.buttonbox {
	width: 500px;
	height: 100px;
}
#footer {
	text-align: center;
	color: #FFF;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}