@charset "utf-8";
body  {
	font: 100% Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* det är bra att nollställa marginalen och utfyllnaden av body-elementet för att ta hänsyn till olika webbläsarstandarder */
	padding: 0;
	text-align: center; /* centrerar containern i Internet Explorer 5*-webbläsare. Texten ställs sedan in efter den vänsterjusterade standarden i #container-väljaren */
	color: #000000;
}
.twoColHybLtHdr #container {
	width: 770px;  
	background: #FFFFFF;
	margin: 0 auto; /* automarginalerna (i samband med en bredd) centrerar sidan */
	border: 1px solid #000000;
	text-align: left; /* detta åsidosätter textjusteringen: mitten på body-elementet. */
} 
.twoColHybLtHdr #header {
	background: #cccccc;
	height: 250px;
	background-image: url(images/topbanner.jpg);
	padding-top: 0px;
} 
.twoColHybLtHdr #header h1 {
	margin: 0; /* genom att nollställa marginalen i det sista elementet i #header-diven undviker du komprimering av marginaler, d.v.s. ett utrymme mellan divar som inte kan förklaras. Om diven har en kant runt sig behöver du inte göra detta eftersom den också förhindrar att marginaler komprimeras */
	padding: 0 0; /* om du använder utfyllnad istället för marginaler kan du hålla elementet borta från kanterna på diven */
}

/* Tips för sidebar1:
1. Eftersom vi arbetar i relativa enheter är det bäst att inte använda utfyllnad på sidofältet. Den kommer att läggas till i den totala bredden för standardwebbläsare som skapar en okänd faktisk bredd. 
2. Eftersom måttenheter används för värdet för sidofältet ska du vara medveten om att dess vidd kommer att variera med olika standardtextstorlekar.
3. Du kan skapa ett utrymme mellan sidan på diven och elementen inom den genom att placera en vänster- och högermarginal på dessa element så som visas i regeln ".twoColHybLtHdr #sidebar1 p".
*/
.twoColHybLtHdr #sidebar1 {
	float: left;
	width: 180px; /* eftersom detta element är flytande måste en bredd anges */
	background: #ffffff; /* bakgrundsfärgen kommer att visas för längden på innehållet i kolumnen, men inte längre */
	padding: 15px 0;
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
	margin-left: 10px; /* vänster- och högermarginalen ska anges för varje element som kommer att placeras i sidokolumnerna */
	margin-right: 10px;
}

/* Tips för mainContent:
1. Utrymmet mellan mainContent och sidebar1 skapas med vänstermarginalen på mainContent div. Oavsett hur mycket innehåll sidebar1 div innehåller kommer kolumnutrymmet att finnas kvar. Du kan ta bort denna vänstermarginal om du vill att texten i #mainContent div ska fylla #sidebar1-utrymmet när innehållet i #sidebar1 tar slut.
2. Tänk på att detta kan orsaka att flyttalet sjunker (minskning av det icke-flytande mainContent-området nedanför sidofältet) om ett element som är bredare än vad det kan innehålla placeras inom mainContent div. Med en hybridlayout (procentbaserad total bredd med måttbaserat sidofält) går det inte att beräkna den exakta bredden som finns tillgänglig. Om användarens textstorlek är större än genomsnittet kommer du att få en bredare div för sidofältet och därmed mindre utrymme i mainContent div. Tänk på denna begränsning, i synnerhet om kunden lägger till innehåll med Contribute.
3. I villkorskommentaren i Internet Explorer nedan används zoomningsegenskapen för att ge mainContent "hasLayout". På så sätt kan du undvika flera fel som gäller särskilt för Internet Explorer.
*/
.twoColHybLtHdr #mainContent {
	margin: 0 20px 0 13em; /* högermarginalen kan anges i procenttal eller pixlar. Den skapar utrymme till höger på sidan. */
} 
.twoColHybLtHdr #footer { 
	padding: 0 10px; /* denna utfyllnad matchar vänsterjusteringen av elementen i de divar som visas ovanför den. */
	background:#DDDDDD;
} 
.twoColHybLtHdr #footer p {
	margin: 0; /* genom att nollställa marginalerna i det första elementet i sidfoten undviker du att marginaler komprimeras, d.v.s. att det blir ett utrymme mellan divar */
	padding: 10px 0; /* utfyllnad på detta element skapar utrymme precis som marginalen skulle göra, utan problemet med att marginaler komprimeras */
}

/* Övriga klasser för återanvändning */
.fltrt { /* denna klass kan användas för att flytta ett element till höger på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* denna klass kan användas för att flytta ett element till vänster på sidan */
	float: left;
	margin-right: 8px;
}
#mainContent .stil2 img {
	padding-right: 10px;
	float: left;
}

.clearfloat { /* denna klass ska placeras på en div eller break-element och ska vara det sista elementet innan en container som helt ska innehålla ett flyttal stängs */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}