/* inga marginaler eller utfyllnader för att divarna ska gå över hela sidan. typsnitt, stil och storlek som gäller generellt på innehållet i sidan */
body {
	margin: 0;
	padding: 0;
	font: normal 0.8em Verdana,Helvetica,Sans-serif;
}
/* påverkar alla elementet med id logo. ingen kantlinje, sträcker sej över hela fönstrets bredd, bakgrundsfärg och bild som repeteras. fast höjd efter bildens mått. detta är huvudrutan med logon på sidan. */
#logo {
	border: none;
	width: 100%;
	color: inherit;
	background: #009016 url(img/bg.gif) repeat;
	height: 160px;
}
/* påverkar alla elementet med id menu. ingen kantlinje, 8em bred, flyter till vänster, detta är menyspalten till vänster på sidan */
#menu {
	border: none;
	width: 8em;
	float: left;
}
/* påverkar alla elementet med id content och widecontent. kantlinjer till höger och vänster, 35em bred, flyter till vänster. 15px utfyllnad och en minimumhöjd på 500px. för att detta ska fungera i Internet Explorer måste man även ange height: auto;. detta är rutan med all text i mitten på sidan */
#content, #widecontent {
	border: none;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 35em;
	float: left;
	padding: 15px;
	min-height: 470px;
	height: auto;
}
/* påverkar alla elementet med id widecontent. anger ny bredd; 45em. detta är mittenrutan med innehållet på de sidor som inte har en kolumn till höger.*/
#widecontent {
	width: 45em;
}
/* påverkar alla elementet med id right. ingen kantlinje, 200px bred, flyter till vänster och har en 10px utfyllnad. detta är kolumnen till höger, finns på de flesta sidor. */
#right {
	border: none;
	width: 200px;
	float: left;
	padding: 10px;
}
/* påverkar alla elementet med id footer. ingen kantlinje, sträcker sej över hela fönstrets bredd, clear: both gör att den hamnar under de flytande elementen ovanför. bakgrundsfärg och höjd angivet. detta är rutan längst ner på sidan (fot-delen). */
#footer {
	border: none;
	width: 100%;
	clear: both;
	color: inherit;
	background: #009016;
	height: 27px;
}
/*---------------------------- text -----------------------------*/
/* påverkar alla p-element inom ett element med id footer. påverkar alla typsnitt, stil och storlek, textplacering och utfyllnad mot toppen. */
#footer p {
	font: normal 0.7em verdana,sans-serif;
	text-align: center;
	padding-top: 7px;
}
/* påverkar alla p-element inom ett element med id right. påverkar alla typsnitt, stil och storlek samt en 10px marginal ovanför elementet, marginaler på de andra sidorna är 0. */
#right p {
	font: normal 0.9em verdana,sans-serif;
	margin: 10px 0 0 0;
}
/* påverkar alla p-element inom ett element med id content och widecontent. avståndet mellan bokstäverna ökas samt radavståndet. inga marginaler och utfyllnad mot botten på 15px */
#content p, #widecontent p{
	letter-spacing: 0.02em;
	line-height: 1.5em;
	margin: 0;
	padding-bottom: 15px;
}
/* påverkar alla element med klassen counter. flyter till höger, ingen kantlinje och påverkar alla typsnitt, storlek och stil. 8px marginal ovanför elementet. */
.counter {
	float: right;
	border: 0;
	font: normal 0.8em verdana,sans-serif;
	margin-top: 8px;
}
/* påverkar alla element med klassen date. ändrar texten till fet stil. används på startsidan till högerkolumnen. */
.date {
	font-weight: bold;
}
/* påverkar p-element med klassen center. centrerar texten. */
p.center {
	text-align: center;
}
/* påverkar p-element med klassen left. texten justeras mot vänsterkanten, ingen utfyllnad eller marginaler */
p.left {
	text-align: left;
	padding: 0;
	margin: 0;
}
/* påverkar p-element med klassen right. texten justeras till höger, ingen utfyllnad eller marginaler */
p.right {
	text-align: right;
	padding: 0;
	margin: 0;
}
/* påverkar element med klassen varn. textfärgen är svart, bakgrundsfärgen ändras och en kantlinje visas. utfyllnad på 5px */
.varn{
	color: #000;
	background-color: #ffc0c0;
	border: 1px solid #000;
	padding: 5px;
}
/*---------------------------- rubriker -----------------------------*/
/* påverkar alla h1-element. ny färg, ärvd bakgrundsfärg. kantlinje på nederkanten. inga marginaler på andra sidor än nedre där är den 3px. ingen utfyllnad. typsnitt, storlek och stil anges. */
h1 {
	color: #060;
	background-color: inherit;
	border-bottom: 2px solid #008000;
	margin: 0;
	margin-bottom: 3px;
	padding: 0;
	font: normal 2em verdana,sans-serif;
}
/* påverkar alla h1-element med klassen start. ingen kantlinje alls och texten justeras i mitten. */
h1.start {
	border: none;
	text-align: center;
}
/* påverkar alla h2-element. typsnitt, stil och storlek anges. */
h2 {
	font: normal 1.6em verdana,sans-serif;
}
/* påverkar alla h2-element med klassen kotteism. texten justeras i mitten. */
h2.kotteism {
	text-align: center;
}
/* påverkar alla h3-element. stil, storlek och typsnitt anges. inga marginaler eller utfyllnader. kantlinje på nederkanten. */
h3 {
	font: normal 1.4em verdana,sans-serif;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #000;
}
/* påverkar alla h3-element inom ett element med id content eller widecontent. inga kantlinjer. */
#content h3, #widecontent h3 {
	border: none;
}
/*---------------------------- meny -----------------------------*/
/* påverkar alla ul-element inom ett element med id menu. inga marginaler men en utfyllnad på 5px*/
#menu ul {
	margin: 0;
	padding: 5px;
}
/* påverkar alla li-element inom ett element med id menu. ingen markering på raderna i listan, 5px utfyllnad */
#menu li {
	list-style-type: none;
	padding: 5px;
}
/* påverkar alla li-element med klassen upp inom ett element med id menu. ingen utfyllnad förutom på vänsterkanten, 5px.*/
#menu li.upp {
	padding: 0 0 0 5px;
}
/*---------------------------- listor -----------------------------*/
/* påverkar alla ul- och li-element inom ett element med id content. markeringen på raderna i listan är en cirkel. */
#content ul, #content li {
	list-style-type: circle;
}
/* påverkar alla li-element med klassen upp inom ett element med id content. ingen markering på raderna i listan */
#content li.upp {
	list-style-type: none;
}
/* påverkar li-element inom ett element med klassen pyssel. cirkel som markering på raderna i listan. marginalen till vänster är 10px. */
.pyssel li {
	list-style-type: circle;
	margin-left: 10px;
}
/* påverkar ul-element inom ett element med klassen pyssel. inga marginaler eller utfyllnader */
.pyssel ul {
	margin: 0;
	padding: 0;
}
/*---------------------------- länkar -----------------------------*/
/* påverkar alla a-element. färg och en transparent bakgrund. ingen dekoration på texten */
a {
	color: #060;
	background-color: transparent;
	text-decoration: none;
}
/* påverkar alla a-element när man pekar på dem. texten blir understruken */
a:hover {
	text-decoration: underline;
}
/*---------------------------- bilder -----------------------------*/
/* påverkar alla img- och a-element inom ett element med id logo. ingen kantlinje på dessa element. */
#logo img, #logo a {
	border: none;
}
/* påverkar alla img-element inom ett p-element som finns inom ett element med id right ingen kantlinje eller maginal förutom på ovansidan.. */
#right p img {
	border: none;
	margin: 0;
	margin-top: 5px;
}
/* påverkar alla img-element inom ett element med id right. inga marginaler förutom på undersidan. */
#right img {
	margin: 0;
	margin-bottom: 5px;
}
/* påverkar alla img-element inom ett p-element som finns inom ett element med id content eller widecontent. marginalen på ovansidan ska vara 7px. */
#content p img, #widecontent p img {
	margin-top: 7px;
}
/* påverkar img-element med klassen fleft. elementet flyter till vänster och har en marginal på höger sida. */
img.fleft {
	float: left;
	margin-right: 5px;
}
/* påverkar img-element med klassen fright. elementet flyter till höger och har en marginal på vänster sida.*/
img.fright {
	float: right;
	margin-left: 5px;
}
/* påverkar alla img-element med klassen center. elementen visas som block-element och har automatiska marginaler (centrerad). */
img.center {
	display: block;
	margin: auto;
}
/* påverkar alla img-element. de får en kantlinje. */
img {
	border: 1px solid #000;
}
/*---------------------------- tabeller -----------------------------*/
/* påverkar alla celler inom ett element med klassen pyssel. innehållets vertikala placering är mot den övre kanten, fast bredd och 5px utfyllnad på höger och vänster sida. */
.pyssel td {
	vertical-align: top;
	width: 254px;
	padding: 0 5px 0 5px;
}
/* påverkar alla ementet med id spelet. automatiska marginaler, resulterar i ett centrerat objekt (i detta fall är det en tabell, och då fungerar det) */
#spelet {
	margin: auto;
}
/* påverkar alla tabel-element med klassen pyssel. utfyllnad mot botten på 20px */
table.pyssel {
	padding-bottom: 20px;
}