/* *** ************************************************* *** *
Här definieras alla färger på layoutblocken.
I denna fil får inga storleksangivelser anges med undantag för classen button.
Textförklaringar:
	divar	=	Avser en html <div> med antingen ett id eller en klass angiven.
	border	=	Ram på en div
	brödtext=	Löpande text som ska vara lättläst. 
	hover	=	När musmarkören befinner sig ovanför ett område eller a-tagg.
 * *** ************************************************* *** */

/* ***	Stil och färg på normal border till angivna divar. 
	Här är den flesta synliga divar med eftersom de behöver en border ibland.
	Observera att detta segment BARA ska tala om hur en border ska se ut om den visas, 
	inte hur stor den ska vara. Storleken anges i motsvarande layout.css
*/
#bordercolor, #tfmenu, #tftopdecor, #tfbody, #tffooter, div.dropMenu, #tfnews h4, #tfnews h5, #tfnews h6, #tfdecor h4, #tfdecor h5, #tfdecor h6
{
	border-style: solid;
	border-color: #CCCC33;
}

/* ***	Stil och färg på en mörkare border.
*/
#darkbordercolor, .button, input.text, textarea
{
	border-width: 1px;
	border-style: solid;
	border-color: #8F8F24;
}

/* ***	Att betrakta som färg på brödtext
*/
#pagecontent, #tfbody, #tfdecor
{
	color: #666619;
	background-color: #FFFFFF;
}

/* ***	Färg på markerande, förstärkt text.
	För att validera fullt ut med en css måste bakgrundsfärg sättas tillsammans med en förgrundsfärg.
	Dock är det opraktiskt i många fall, detta är ett sådant.
*/
#emfasized, h1, h4
{
	color: #666619;
}

/* ***	Ljus bakgrundsfärg att använda på icke brödtext, t ex menu och sidopanel.
	Om denna färg ändras, ändra även efterföljande regel så att menyn visas korrekt.
*/
#backgroundcolor, .button, #tfnews, #tffooter, #tfsysmenu, #tfmenu, .menu, a.menu, a.menu:link, div.dropMenu, a.dropMenu, a.dropMenu:link
{
	color: #666619;
	background-color: #F3F3D6;
}

/* ***	Inverterad variant av ovanstående. 
	Om färgen på denna är föremål för ändring, tänk på att även ändra ovanstående.
*/
#backgroundcolorinvert, a.menu:hover, a.dropMenu:hover
{
	color: #F3F3D6;
	background-color: #666619;
}

/* ***	Matchande alternativa bakgrundsfärger.
*/
#decor_dark_back, #tfdecor div.smallimg1
{
	background-color: #8F8F24;
}
#decor_darkgreen_back, #tfdecor div.smallimg2
{
	background-color: #B4CC8F;
}
#decor_lightgreen_back, #tfdecor div.smallimg3, #prescribe, div#tfnews div.island, table.list
{
	background-color: #DCE6CF;
}

/* ***	Färg på vanlig a-tagg vid hover
*/
a:hover
{
	color: #0000FF;
}
/* ***	Utseende på en a-tagg med class="button".
	Den får ett tredimensionellt utseende när musmarkören hovrar över den.
*/
a.button
{
	display: block;
	float: right;
	padding: 0 0.5em;
	margin: -1em 0 1.5em 0;
	font-size: 90%;
	text-decoration: none;
	color: #666619;
	border: 1px solid #8F8F24;
}
a:hover.button
{
	text-decoration: none;
	color: #666619;
	border: 1px solid #F3F3D6;
	border-right: 1px solid #8F8F24;
	border-bottom: 1px solid #8F8F24;
}
a:active.button
{
	text-decoration: none;
	color: #666619;
	border: 1px solid #F3F3D6;
	border-top: 1px solid #8F8F24;
	border-left: 1px solid #8F8F24;
}
/* ***	En variant på ovanstående
*/
a.button2
{
	display: block;
	float: right;
	padding: 0 0.5em;
	margin: -1em 0 1.5em 0;
	font-size: 90%;
	text-decoration: none;
	color: #666619;
	background-color: #CCCC33;
	border: 1px solid #8F8F24;
}
a:hover.button2
{
	text-decoration: none;
	color: #666619;
	border: 1px solid #F3F3D6;
	border-right: 1px solid #8F8F24;
	border-bottom: 1px solid #8F8F24;
}
a:active.button2
{
	text-decoration: none;
	color: #666619;
	border: 1px solid #F3F3D6;
	border-left: 1px solid #8F8F24;
	border-top: 1px solid #8F8F24;
}


#locatearea
{
	background-color: palegreen;
}

.fel
{
	background-color: #FB989C;
}

.korrekt
{
	background-color: palegreen;
}