@charset "utf-8";

	#filter {background-color: #999;  padding:0px 0px 8px 0px; margin:0px; width:600px; margin-bottom:-10px;}
	#filter h2 {
		font-weight: normal;
		font-size:24px;
		color:#ddd;
		text-transform: uppercase;
		padding:10px 0px 0px 16px;
		margin-bottom:0px;
	}
	.clear {
	    clear: both;
	}
	#modules {
		display: none;
		margin:12px 0px 10px 18px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	#filter{
		position:relative;
	}
	#registryButton {
		position:absolute;
		width:76px;
		text-align: right;
		right:17px;
		font-size:16px;
		color:#444;
		padding:3px 4px 3px 5px;
		display:inline-block;
		border:thin solid #666;
		cursor: pointer;
	}

	#registryBar {
		cursor: pointer;
	}

	#registryButton:hover {
		background-color: #bbb;
		border:thin solid #666;
	}

	#modules div {
		display:inline-block;
		padding:4px 10px;
		margin-right:3px;
		font-size:17px;
		cursor:pointer;
		-moz-border-radius: 0px;
		border-radius: 0px;
		-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		box-shadow: 2px 2px 4px rgba(0,0,0,.1);
		color:#eee;
	}
	#modwrap {background-color:#f58e25; border:thin #f58e25 solid; opacity: 0.95; filter: alpha(opacity=95);}
	#modcode {background-color:#acd241; border:thin #acd241 solid;}
	#modall {text-align:center; width:48px; background-color:#555; border:thin #555 solid;}
	#modcreate {background-color:#e472c4; border:thin #e472c4 solid;}
	#modbuild {background-color:#50c4b7; border:thin #50c4b7 solid;}
	#modpages {background-color:#d1a170; border:thin #d1a170 solid;}
	#modframe {background-color:#777; border:thin #777 solid;}

	#modules div:hover {
		color:white;
		border:thin #ccc solid;
		/*opacity: 0.9;
    	filter: alpha(opacity=90);*/
	}
	#index {
		display: none;
		text-align: center;
		/*margin:10px 0px;*/
		margin: 0px auto;
		width: 93%;
	}

	.key {
		background-color:#EEE; width:180px;
		/*display: inline-block;*/
		padding:0px; font-size:16px;
		margin:3px 3px;
		color:#666;
		text-align: left;
		cursor:pointer;
		float: left;
	}
	.keytitle {
		vertical-align: middle;
		text-align: left;
		padding:6px;
		display: inline-block;
		width:120px;
		overflow: hidden;
	}
	.key:hover {
		background-color: #666!important; color:white!important;
	}

	.keynum {
		width:16px; text-align: center; background-color:#333;
		color:#EEE;
		padding:6px; float:right;
		display: inline-block;
	}

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

	html {
		background: #CCC;
		font-family: helvetica, arial, 'sans serif';
		font-size:20px;
		color:#CCC;
	}
	body {
		max-width: 600px;
		min-width: 600px;
		min-height: 100%;
		margin: 0 auto;
		padding: 0px 0px;
		border-width: 0 1px;

	}

	header h1, nav h1, section h1 {display:none;}

	header {text-align:center; width:100%;}

	a {outline: 0;}

	main {
		padding:30px 0px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		background:#333;
	}

	#intro {
		padding:0px 20px 14px 20px;
	}

	nav {
		text-align:center;
		width:100%;
		background:#333;
		padding:20px 0px;
	}

	nav a {
		color:#999;
		text-decoration:none;
		padding:5px 10px;
		border:thin #666 dashed;
		margin:0px 5px;
	}

	nav a:hover {
		color:#333;
		border:thin #333 solid;
		background:#999;
	}

	#logo {padding-top:20px;}

	section a {
		color:#FFF;
		padding:0px 4px;
		text-decoration:none;
		background:#333;
	}

	section a:hover {
		color:#333;
		background:#999;
	}

	table {
		margin-top:10px;
		margin-bottom:50px;
	}

	td {
		width:300px;
		height:260px;
		background:#444;
		vertical-align:top;
	}

	.num {
		display:inline-block; vertical-align:top; font-size:18px; padding:3px 5px; margin-top:5px;
		background-color:rgba(0,0,0,.2);
		border-radius:10px;
	}

	.bitwrap {
		background-color:rgba(0,0,0,.4);
		padding:20px;
		width:220px;
		height:220px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		overflow:hidden;
	}

	.bitwrap a, a.alertbutton {
		text-decoration:none;
		color:rgba(256,256,256,.5);
		padding:5px 10px;
		margin:0px 5px 0px 0px;
		background-color:rgba(0,0,0,.3);
	}

	.bitwrap a:hover, a.alertbutton:hover {
		color:rgba(256,256,256,.7);
		background-color:rgba(0,0,0,.5);
	}

	.picwrap {
		position:relative;
		z-index:200;
		display:none;
		background-color:#363636;
		padding-top:30px;
		padding-left:3px;
		width:257px;
		height:230px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		overflow:hidden;
		cursor:pointer;
		-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		box-shadow: 10px 10px 10px rgba(0,0,0,.2);
	}


	#inlinecanvas .picwrap {background-color:#eee;}
	#preload .picwrap {background-color:#fff;}
    #tiles .picwrap {background-color:#222;}
    #links .picwrap {background-color:#222;}

	.wrap {background-color:#f58e25;}
	.code {background-color:#acd241;}
	.zim {background-color:#222;}
	.create {background-color:#e472c4;}
	.build {background-color:#50c4b7;}
	.pages {background-color:#d1a170;}
	.frame {background-color:#888;}

	.title {
		color:#DDD;
		font-size:30px;
		margin-bottom:5px;
	}
	.desc {
		color:#BBB;
		margin-bottom:10px;
	}


	.aNormal:hover {
		text-decoration:none;
		background-color:transparent;
	}

	footer {
		text-align:center;
		padding:1px;
		color:#555;
	}

	footer h3 {
		font-weight:normal;
	}

	footer a {
		text-decoration:none;
		padding:8px 5px;
		margin:0px 0px;
		width:100px;
		color:#666;
	}
	footer a:hover {
		color:#333;
		background-color:#fff;
	}

	/* alert boxes */

	#alerttext {
		color:#666; font-size:30px; position:relative; margin:25px 0px 20px 0px;
	}

	.alertwindow {
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		display:none;
		background-color:rgba(0,0,0,0.3);
		text-align:center;
		z-index:101;
	}

	#pop {
		width:300px; height:300px;
		position:relative;
		margin:0px auto;
		text-align:center;
		z-index:100;
		background-color:#FFF;
		-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		box-shadow: 10px 10px 10px rgba(0,0,0,.2);
	}

	#alertcontent {
		width:240px; height:240px;
		position:relative;
		margin:0px 0px 0px 20px;
		top:20px;
		background-color:#CCC;
		-moz-border-radius: 20px;
		border-radius: 20px;
		padding:10px;
	}

	.alertbutton {
		width:80px;
		display:inline-block;
		font-size:20px;
		background-color:#AAA;
		text-align:center;
		text-decoration:none;
		color:#333;
		padding-left:6px; padding-right:6px; padding-top:6px; padding-bottom:7px;
		margin-left:auto; margin-right:auto; margin-top:4px; margin-bottom:10px;

	}

	.listwindow  {
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		display:none;
		background-color:rgba(0,0,0,0.7);
		text-align:center;
		z-index:102;
	}

	#listpop {
		width:600px; height:300px;
		position:relative;
		z-index: 103;
		margin:0px auto;
		text-align:center;

		/*-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		box-shadow: 10px 10px 10px rgba(3,0,0,.2);*/
	}

	#listbox {
		/*-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.2);
		box-shadow: 10px 10px 10px rgba(3,0,0,.2);*/
	}

	.arrow {
		width:150px;
		background-color:#222;
		vertical-align: middle;
		cursor:pointer;
	}
	#listmodule {
		height:20px;
		background-color:#111;
		color:#aaa;
		text-align:center;
		vertical-align: middle;
		padding:5px;
	}

	#listmodule a {
		left:48px;
		font-size:14px;
		color:#999;
		position:absolute;
		padding:2px 6px 1px 6px;
		background-color: #333;
		text-decoration: none;
		text-transform: uppercase;
		margin:3px 0px 0px 0px;
	}

	#listmodule a:hover {
		color:#aaa;
		background-color: #555;
	}

	#listmodule span {
		right:10px;
		font-size:14px;
		color:#999;
		position:absolute;
		margin:5px 0px 0px 0px;
	}

	#listcontent {
		width:240px; height:240px;
		top:30px;
		left:30px;
		position:relative;
		background-color:#CCC;
		-moz-border-radius: 20px;
		border-radius: 20px;
		padding:0px;
	}

	#b_list {text-align: left;}

	#listtext {
		top:10px;
		color:#666; font-size:30px;
		position:relative;

	}