html {
    width:100%;
}
		
main {
	text-align:left !important;	
	padding-bottom:40px !important;
}	

#topblack {
	display:none;
	width:100%;
	height:100px;
	background-color: #111;
	position:absolute;
	top:-32px;
}

#updatesLink {
	color:#acd241;
}

body {
	width:100%;
    margin:0px;
    padding:0px;
    margin-bottom: 0px;	
}
#titlebar {
	text-align:center !important;
}
section a {
	color:#d1a170;                
}    

.foil {
	background-color: #111;
	margin-bottom:-20px;
}

nav {
	width:90% !important;
	max-width:1000px !important;
}

.selected {
    background-color:#ddd;
    color:#111;
}
.selected:hover {
    background-color:#ddd;
    color:#111;
}
#search {
	padding:5px 5px 5px 6px;
	margin:0px;
	position:fixed;
	right:0px;
	top:16px;
	background-color: #181818;
	opacity:1;
	font-size:18px;
	font-family: verdana;
	color:#999;
	z-index:100;
}
#search input {
	font-size:16px;
	font-family: verdana;
	color:#DDD;
	background-color: #666;
	border:thin solid #444;
	padding:6px;	
	margin:4px;
	width:120px;
}
#search button {
	font-size:16px;
	height:auto !important;
	font-family: verdana;
	border:thin solid #444;
	background-color:#ebcb35;
	padding:4px;
	margin:4px 0px;
	cursor:pointer;
}
#search button:nth-child(2) {
	background-color:violet;
}
#search button:nth-child(5) {	
	margin-right:4px;
}
#search button:nth-child(6) {
	display:none;
	background-color:violet;
}
#search button:hover {
	background-color:#acd241;
}
#search span {font-size:12px;}
#contrast {
	width:27px; 
	position:relative; 
	cursor:pointer; 
	top:7px; 
	margin-right:6px;
}
#list {
	margin-top:30px;	
	padding:20px;
	border-radius:10px;
	border:thin dashed #666;
	white-space:pre-wrap;
	display:none;	
	background-color:rgb(25, 52, 80);
}

#slinfo {
	background-color:#ccc;
	color:#333;
}	
#slinfo:hover {
	background-color:#eee;
	color:#333;
}	

/* bits link */
.b {position: absolute; top:2px;}
.d {position: absolute; top:2px;}
.v {position: absolute; top:2.5px; opacity:.6;}
.view.bits {position:relative; padding-right:17px;}
.view.demo {position:relative; padding-right:4px;}
.view.demo span {display:inline-block; position:relative; top:.5px; margin-left:3px; opacity:.9}
.view.vids {position:relative; padding-right:27px;}

pre {	
	font-size:20px; 
	text-align:left;
	margin-left:0px !important;
	margin-bottom:-32px !important;
	padding-left:20px !important;
	padding-bottom:20px !important;
	margin-top:0px !important;
}
.info {display:none;}
#logo, #logoB {margin-left:26px; margin-top:24px; margin-bottom:-8px;}
#logoB {margin-bottom:30px;}
.t {color:#DDD; font-size:12px;}
a {outline:none;}
.frameTitle  	{background-color:#e472c4;}
.displayTitle, .buildTitle {background-color:#50c4b7;}
.methodsTitle, .createTitle	{background-color:#acd241;}
.controlsTitle, .pagesTitle {background-color:#caae2c;}
.codeTitle   	{background-color:#f58e25;}
.wrapTitle   	{background-color:#d1a170;}
.metaTitle  	{background-color:#555555;}
.gameTitle, .threeTitle, .socketTitle, .pizzazzTitle, .camTitle	{background-color:#993399;}
.distillTitle   {background-color:#caae2c;}

.sub {color:#ccc; font-size:14px; padding:2px 4px;}
.frameSubtitle {font-size:15px; color:#e472c4; padding:0px 5px;}
.displaySubtitle {font-size:15px; color:#50c4b7; padding:0px 5px;}
.methodsSubtitle {font-size:15px; color:#acd241; padding:0px 5px;}
.controlsSubtitle {font-size:15px; color:#caae2c; padding:0px 5px;}
.codeSubtitle {font-size:15px; color:#f58e25; padding:0px 5px;}
.wrapSubtitle {font-size:15px; color:#d1a170; padding:0px 5px;}
.metaSubtitle {font-size:15px; color:#555555; padding:0px 5px;}
.gameSubtitle, .threeSubtitle, .socketSubtitle, .pizzazzSubtitle, .camSubtitle  {font-size:15px; color:#993399; padding:0px 5px;}

.info div {
    color:white; padding:10px; -moz-border-radius:6px; border-radius:6px; opacity: 0.9; filter: alpha(opacity=90);
}
.info {
    padding:20px; background-color:#222; margin:10px 0px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.titleT div {padding:2px;}
.titleT {white-space:nowrap;}
.titleA {margin-right:10px; margin-left:-8px; margin-bottom:5px; vertical-align:top; display:inline-block;}
.titleD {display:inline-block; width:95%; white-space:pre-wrap;} /* thanks Hye Won Han! */

#ln {
    font-size:16px;
    float:right;
    margin-right:10px;
    padding:5px;
    background-color: #444;
}

.extends {
    /*font-size:16px;
    color:#777;
    margin-bottom:-20px;
    margin-left:0px;*/
    display:inline-block;
    margin-bottom:-20px;
    margin-left:0px;
}
.functionTitle {
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:-20px;
    margin-left:0px;
}
.heading {
    display:inline-block;
    margin-bottom:-20px;
    margin-left:0px;
}
.subheading {
    /*text-transform:uppercase;*/
    display:inline-block;
    font-style:oblique;
	font-size: 14px;
	text-decoration: underline;
    margin-bottom:-20px;
    margin-left:0px;
}
a.close, a.close2 {color:#FFF; background-color:#999; padding:3px 6px; margin:0px 8px;}
a.close2 {margin-left:18px;}
a.view {
    margin-left:18px;
    color:#ccc;
    background-color:#555;
    padding:3px 7px;
    margin:0px 8px;
    border:solid #777 thin;
}


/*a.view {margin-left:18px; color:#FFF; background-color:#cda2cd; padding:3px 7px; margin:0px 8px;}*/
pre a {color:#FFF; background-color:#FCF; font-size:14px; text-decoration:none; padding:2px 4px;}
a.frame  	{background-color:#e472c4;}
a.display, a.build {background-color:#50c4b7;}
a.methods, a.create {background-color:#acd241;}
a.controls, a.pages {background-color:#caae2c;}
a.code   	{background-color:#f58e25;}
a.wrap   	{background-color:#d1a170;}
a.meta  	{background-color:#555555;}
a.game, .three, .socket, .pizzazz, .cam  	{background-color:#993399;}
a.distill   {background-color:#caae2c;}


pre a:hover {background-color:yellow; color:#555555;}
/* .plain {background-color:transparent; font-size:18px;} */
.image {background-color:transparent; color:#eee; font-size:18px; text-decoration:underline;}
.image:hover {background-color:transparent;}
#contrast, #contrast:hover {
	background-color:transparent !important;
}


#note {padding:0px 4px;}

@media all and (max-width: 640px){
	/* these styles show if screen width is less than or equal to 640 */
	body {
		padding-top:60px !important;
	}          
	#topblack {
		display:block;
	}
	nav {
		width:98% !important;
	}
	nav a {
		font-size: 2vw !important;
	}    
	#search {
		/* position:absolute;
		right:0px; */
	}         
	#select select {
		font-size:12px !important;
	}              
}	

@media all and (min-width: 640px) and (max-width: 800px) {
	/* these styles show if screen width is between 640 and 800 */        
	body {
		padding-top:60px !important;
	}          
	#topblack {
		display:block;
	}
	nav {
		width:98% !important;
	}  
	nav a {
		font-size: 2vw !important;
	}   
	#select select {
		font-size:14px !important;
	}
}	

@media all and (min-width: 640px) and (max-width: 1100px) {
	/* these styles show if screen width is between 640 and 1100 */        
	nav {
		width:98% !important;
	}                      
}	

#select {	
	display:inline-block;
	position:relative;
	float:right;
	top:-4px;
}
#select select {
	font-size:20px;
	background-color:#ccc;
}