/***********************************************/
	/*                                             */
	/*  this CSS was created by a hamster on weed  */
	/*                                             */
	/***********************************************/


/*** first up comes the over-arching CSS for everything on the whole website ***/

		 
	body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 10px; padding: 0; margin: 0; background: #090a0c url('bodybg.jpg') top center no-repeat; color: #d2d8d7; }
	p { font-size: 13px; text-align: center; color: #bdc7c8; margin: 0; padding: 5px 0 5px 0; }
	img { padding: 0 0 10px 0;}
	a { font-size: 15px; text-align: center; text-decoration: none; font-weight: 700; color: #bdc7c8; margin: 0; padding: 0;}
	a:hover { text-decoration: underline;}
	a img { border: 0;}
	h2 { text-align: center;}

	iframe#facebookmobile { display: none; visibility: hidden; }
	
	#webheader { margin:0 ; padding: 0;}
	#header { height: 400px; margin: 0; padding: 0;}
	#left { width: 49%; float: left; padding: 1em 0.5%;}
	#right { width: 49%; float: left; padding: 1em 0.5%;}
	#wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0;}
	#maincontent { padding: 0; margin: 0; text-align: center;}
	#darkmatter { margin: 0 0 5px 0;}
	#gilgamesh { margin: 5px 0 5px 0;}
	#aphelion { margin: 5px 0 5px 0;}
	#unearthing { margin: 5px 0 5px 0;}
	#shifter { margin: 5px 0 5px 0;}
	#links { clear: left; margin: auto; height: 20px; color: #bdc7c8;}
	#caverns { padding: 0 0 10px 0;}
	#copyright { margin: 10px;}
	#setadrift { margin: 5px 0 10px 0;}

	.toptabs, .bottomtabs { color: #a6b4b2; margin: 0 0 10px 0; padding: 0; }
	.toptabs>a, .bottomtabs>a { border-style: solid; border-width: 1px 1px 1px 1px; padding: 0px 10px 0px 10px; font-weight: 400; margin: 0 4 0 4; color: #a6b4b2; }
	.toptabs>a:hover, .bottomtabs>a:hover { background-color: #001c27; color: #fff; text-decoration: none; }
	.bottomtabs { display: none; visibility: hidden; }
	.d { border-style: solid; border-width: 2px 2px 2px 2px; color: #b9b9b9; background: #ced0cd; margin: 0; padding: 0; }


/*** Then we add the CSS for displaying content differently on screen-width < 1000px, and
     because CSS is hierarchical this CSS will take precendence over the properties above ***/


	@media screen and (max-width: 1000px) {

		body { background-image: none; }
		#header { height: auto; width: 100%; overflow: hidden; }
		#maincontent { max-width: 100%; }
		#maincontent img { max-width: 100%; }
		#header img { width: 100% !important; height: auto; } 
		/* I just changed the header img width from 200% to 100%, was pretty weird going twice the screen size when the window is reduced. - The GanjaGenie */
		#left, #right { width: 100%; max-width: 100%; padding: 1em 0; clear: both; }

		/* Okay here I'm hiding your Facebook embed on mobile, or the user will get stuck scrolling it.
		   I have embedded the facebook feed twice (with and without the status feed), and then hidden
		   one of them respective of screen width. Eg; to not show the timeline on screens <1000px,
		   and to show the timeline on screens >1000px. I hope that's understandable. */
		iframe#facebook { display: none; visibility: hidden; }
		iframe#facebookmobile { display: inherit; visibility: visible; height: 220px; width: 100%;}

		.bottomtabs { display: inherit; visibility: visible; }

		}


	/*********************************/
	/*                               */
	/*  the hamster ran out of weed  */
	/*                               */
	/*********************************/