/*
	Wormsmart v3.2 in CSS 
	===============
	Wormsmart was created by Mr Flump in 1999,
	for the Fiddler program by Fudge Boy.
	
	The original design is by AGi (Adam McNicol),
	and the new CSS and HTML are by Edward Webb
*/

/* Images */

h1, h2, #content, #footer, #menu, #menu h3 {
	background: url(images/wormsmart_32.png) no-repeat;
	}
#content, #menu { background-color: Black; }

/* Start with the basics */

* {
	margin: 0;
	padding: 0;
	}
a {
	color: #ccc;
	text-decoration: none;
	}
a:hover {
	color: #eee;
	text-decoration: underline;
	}
a:visited { color: White }
body {
	background: Black;
	color: White;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8125em; /* 13px */
	
	text-align: center; /* For IE 5 */
	}
h1 { background-position: -177px 8px; }
h1 a {
	display: block;
	height: 89px;
	}
h1, h2, #menu h3 {
	font-size: 1px; /* For IE 5.0 */
	text-indent/**/: -5000px;
	}
h3, h4, h5, h6 { font-size: 1em; }
h4 { font-style: italic; }
h4, h5, h6 { font-weight: normal; margin: 1em 0; }
	.latestnews h4 { font-style: normal; margin: 0; }
ul li { list-style: none; }
p { padding: 1em 0 0; }
table {	width: 100%; }
	.fiddler table, .wwp table { margin-bottom: 1em; }

/* Page structure */

#container {
	background: url(images/background.png) repeat-y; /* Lighter BG to scroll */
	margin: 0 auto;
	min-height: 600px; /* As menu is position:fixed, keep footer below menu */
	position: relative;
	text-align: left;
	width: 600px;
	}
#content {
	background-position: -933px bottom;
	border-left: 6px solid rgb(98, 102, 131);
	float: right;
	margin-bottom: 40px;
	padding: 0 0 16px 15px; /* Was 0 0 12px 15px */
	width: 427px; /* For IE 5 */
	width/**/:/**/ 406px; /* 408px + 13px + 6px */
	}
#content a { text-decoration: underline; }
#content h2 {
	height: 18px;
	margin: -8px 0 8px -15px;
	width: 156px;
	}
	.latestnews #content h2 { background-position: -777px 0; }
	.regulars #content h2 { background-position: -777px -18px; }
	.wwp #content h2 { background-position: -777px -36px; }
	.fiddler #content h2 { background-position: -777px -54px; }
	.features #content h2 { background-position: -777px -72px; }
#content ol, #content ul { padding: 1em 0 0; }
#footer {
	background-position: -177px -79px;
	bottom: 0;
	clear: both;
	display: block;
	height: 28px;
	position: absolute;
	width: 600px;
	}
#footer span { display: none; }
#menu {
	background-position: 155px bottom;
	border-right: 7px solid rgb(147, 146, 142);
	color: rgb(96, 96, 96);
	float: left;
	margin: -41px 0 0;
	padding-bottom: 13px;
	width: 166px; /* Total of 173px */
	}
#menu h2 {
	background-position: -11px 0;
	height: 20px;
	margin-bottom: 10px;
	}
#menu h3 {
	height: 16px;
	margin: 5px 0 2px;
	width: 154px;
	}
	#menu #regulars-menu { background-position: -11px -20px; }
	#menu #wwp-menu { background-position: -11px -36px; }
	#menu #fiddler-menu { background-position: -11px -52px; }
	#menu #features-menu { background-position: -11px -68px; }
#menu ul {
	list-style: none;
	text-align: right;
	text-transform: lowercase;
	width: 151px;
	}

	
/* Page specific */

.credits1 {
	float: left;
	text-align: left;
	width: auto;
	}
.credits2 {
	float: right;
	width: auto;
	/* text-align: right; */
	}
.credits1, .credits2 {
	margin: 1em 0;
	width: 100%;
	}
.credits1 img {
	float: right;
	margin-left: 20px;
	}
.credits2 img {
	float: left;
	margin-right: 20px;
	}
#container .credits1 ul, #container .credits2 ul {
	padding: 0;
	}

.gamename {
	vertical-align: top;
	width: 38%;
	}
.gamedesc {
	vertical-align: top;
	width: 62%;
	}
.map_preview {
	position: absolute;
	left: 12em;
	}

.fid_qna #content ol, .fid_qna #content ul { margin-left: 2em; }
.fid_qna #content ul li { list-style: disc; }
.qna_answer { font-weight: bold; }
#spritedownload { text-align: center; }
#spritedownload a {
	display: block;
	font-weight: bold;
	}
.wwp_maps h4 {
	font-style: normal;
	font-weight: bold;
	margin: 1em 0 0;
}
.wwp_maps li { position: relative; }
.wwp_maps #content ul {	padding: 0; }


/* Hacks for IE6 */

#container:after, #footer:after { /* For Gecko */
	clear: both; 
	content: ""; 
	display: block; 
	height: 0; 
	visibility: hidden;
	}

* html #content { margin: 0; }
* html #footer { position: relative; }

/* Partial workaround for fixed menu with mobile devices */

@media only screen and (min-device-width: 600px) and (min-device-height: 600px) and (-moz-touch-enabled: 0),
only screen and (min-device-width: 600px) and (min-device-height: 600px) and (touch: none) {
	#menu {
	 position: fixed;  /* To scroll with page, problems with low content pages */
	}
}

/* For small displays */

@media only screen and (min-device-width: 1px) and (max-device-width: 599px) {

h1 {
	background-position: -120px 0px;
	background-size: 583px;
	}
h1 a { height: 91px; }

#container, #menu { background: none; }

#container { width: 360px; }

#content {
	background-position: -933px bottom;
	border-color: rgb(98, 102, 131);
	border-style: solid;
	border-width: 10px 0 6px 6px;
	float: none;
	margin-bottom: 0;
	padding: 0 15px 1em 15px;
	width: 324px;
}

#footer {
	background-position: -120px -39px;
	background-size: 583px;
	height: 27px;
	position: relative;
	width: 360px;
}

#menu {
	background-color: Black;
	border-top: 10px solid rgb(147, 146, 152);
	border-right: none;
	float: none;
	width: 360px;
	
	display: grid;
	grid-template-columns: 43% 7% 50%;
	grid-template-rows: min-content min-content min-content;
	grid-template-areas:
	"menu x x"
	"reg reg fid"
	"wwp wwp fid"
	"arc arc fid";
	}
#menu h2 {
	grid-area: menu;
	margin-bottom: 0px;
	margin-top: -10px;
	}
	#menu #regulars-menu, #regulars-menu + ul { grid-area: reg; }
	#menu #wwp-menu, #wwp-menu + ul { grid-area: wwp; }
	#menu #fiddler-menu, #fiddler-menu + ul { grid-area: fid; }
	#menu #features-menu, #features-menu + ul { grid-area: arc;}
#menu h3 {
	margin: 8px 10px 0 10px;
	}
#menu ul { padding-right: 6px; }

#menu ul {
	margin-top: 2em;
	margin: 2em 10px 0;
	width: auto;
	}

.credits1, .credits2 { float: none; }
}