/* The Wyke-Switch - av Charlie Wyke-Smith - låt den vänstra spalten och mittenspalten byta plats i layouten så att 
mittenspalten kommer först i koden!
OBSERVERA ATT DEN HÄR VERSIONEN HAR REVIDERATS I FÖRHÅLLANDE TILL BOKENS PÅ FYRA VIKTIGA SÄTT:
1) Asletts metod för friläggning (clearing) har inkluderats för att se till att sidfoten friläggs på rätt sätt.
2) Layouten centreras i webbläsaren om webbläsarfönstret blir bredare än layouten - observera höljet mainwrapper som 
lagts till runt hela layouten/koden.
3) Falska spalter har lagts till (observera: ge bakgrunden i mainwrapper samma färg som bakgrunden i mittenspalten).
4) float:left har lagts till för sidfoten - av någon underlig anledning visas sidfotens bakgrundsfärg under rubriken utan 
detta tillägg, även om texten visas på rätt ställe.   

Genom att placera innehållet först i koden kan du avsevärt förbättra rankingen i sökmotorerna. Det här exemplet visar 
den CSS-kod som behövs för att låta den vänstra spalten och mittenspalten byta plats - mittenspalten 
(content - div "column2") kommer först i koden men visas efter den vänstra spalten (navigering - div "column1") 
i layouten. Utan egenskapen margin-left för spalterna 1 och 2, visas de i webbläsaren i den ordning de förekommer 
i koden - 2, 1, 3. Det här arrangemangent uppnås genom att vi använder en negativ vänstermarginal för spalt 1 för att 
flytta den åt vänster och en positiv vänstermarginal för spalt 2 för att flytta den åt höger, vilket får de två spalterna 
att byta plats. Observera att vänstermarginaler på float:left-element fördubblas i IE om du inte tillämpar Steve Caslons 
hack som innebär att du lägger till display:inline till elementet, i vårt fall spalt 2. Mer om den här buggen finns att 
läsa på http://www.positioniseverything.net/explorer/doubled-margin.html. Det här exemplet använder också ett 
flytande hölje (wrapper) runt de tre spalterna - detta tvingar höljet att omge de tre spalterna så att sidfoten 
alltid hamnar under den spalt som är längst. */

body
{
    font: 1em arial, verdana, sans-serif;
    background-color: #d2c8a8;
    color: #333333; /*color:#695e3e;*/
}

a
{
    /*	color: #695e3e; */
    color: #4b4227;
}

a:hover
{
    color: #0000ff;
}

.border
{
    border: solid 1px #7b7b7b !important;
    padding: 1px;
}

div#mainwrapper /*hela ytan*/
{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffffe;
    border: solid 2px #695e3e; /* background-color:#CFC; /* den här bakgrundsfärgen visas under mittenspaltens innehålls-div */
}

div#header
{
    width: 800px;
    margin-top: 0px; /*background-color: #dbcbaa;*/ /*huvudet*/
    background-color: #fffffe;
}

div#contentarea
{
    float: left;
    width: 800px;
    background-color: #fffffe; /*background:url(../images/header.jpg) repeat-y top left; */ /* bilden för den falska vänstra spalten */
}

div#columnLeftAds /*menycolumnen*/
{
    float: left;
    width: 150px;
    margin-left: -800px; /* -800px; /* -650px; */ /* background-color:#FCC; */
    padding: 0px;
}

div#columnRightAds /*menycolumnen*/
{
    float: left;
    width: 300px;
    margin-left: 800px;
    margin-top: -1000px;
    padding: 0px 5px 10px 10px;
}

div#ads /*annonskolumn till höger*/
{
}

div#column1 /*menycolumnen*/
{
    float: left;
    width: 150px;
    margin-left: -650px; /* -800px; /* -650px; */ /* background-color:#FCC; */
    padding: 0px;
}

div#column2 /*innehållskolumnen*/
{
    float: left;
    width: 490px; /* 640px; /* 470px; */
    margin-left: 150px;
    display: inline; /* background-color:#CFC; */
    padding: 10px 0px 10px 10px;
}


div#footer
{
    width: 800px;
    float: left;
    text-align: center;
    padding: 10px 0 0 0; /* float:left ser till att sidfotens bakgrundsfärg visas korrekt - nedanför div-elementen, inte rubriken */ /* det här är en ändring jämfört med exemplet i boken */
}

div#column3 /*annonskolumn till höger*/
{
    float: left;
    width: 140px;
    padding: 0px 0px 10px 0px;
    margin-left: 10px; /* border-left: solid 1px #e8e3e0; */ /* background-color:Lime; */
}


div#column3cat /*annonskolumn till höger*/
{
    width: 140px; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */ /* margin-left: 7px; */
    font-size: 1.0em;
}

.column3catlink
{
    background-color: #f0ebdb;
    margin-bottom: 0px;
    border-bottom: solid 1px #8e835f;
    border-left: solid 1px #8e835f;
}

div#column3cat h2
{
    font-size: 1.0em;
    color: #555555;
    margin-left: 1px;
    margin-bottom: -7px;
}

div#column3cat li
{
    list-style-type: none; /* tar bort punkterna för varje listpost */ /*background-color:#c5e6fe;*/ /* #8ed0ff; /* #CCF; /* anger bakgrunden för menyalternativen */ /* border-right:1px solid #069; /* skapar linjer som separerar listposterna */ /*width:145px;  10em;*/
}

div#column3cat a
{
    font-size: 0.7em;
    margin: 0 5 0 0; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */
    position: relative; /* positioneringskontext för den absolut positionerade listmenyn */
    padding: 1px 1px 1px 1px;
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
    margin-left: 7px;
    padding-bottom: 4px;
}

div#column3cat a:hover
{
    /*background-color: #e8e3e0;  anger bakgrunden för menyalternativen */
    text-decoration: underline;
}

div#column3cattext /*annonskolumn till höger*/
{
    width: 140px; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    font-size: 1.0em; /* border-left: solid 1px #e8e3e0; */
}

div#column3cattext h2
{
    font-size: 1.1em;
    color: #555555;
    margin-left: 1px;
    margin-bottom: -7px;
}

div#column3cattext li
{
    list-style-type: none; /* tar bort punkterna för varje listpost */ /*background-color:#c5e6fe;*/ /* #8ed0ff; /* #CCF; /* anger bakgrunden för menyalternativen */ /* border-right:1px solid #069; /* skapar linjer som separerar listposterna */ /*width:145px;  10em;*/
}

div#column3cattext a
{
    font-size: 0.7em;
    margin: 0 5 0 0; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */
    position: relative; /* positioneringskontext för den absolut positionerade listmenyn */
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
    margin-left: 7px;
    padding-bottom: 4px;
}

div#column3cattext a:hover
{
    /* 	background-color: #e8e3e0; anger bakgrunden för menyalternativen */
    text-decoration: underline;
}

.column3cattexta
{
}

/******************************  START LISTMENU _ BEÖVS ALLT ************************/
/*lodrät meny1?????*/
div#listmenutips
{
    width: 88%; /* ger div-elementet full bredd */
    float: left; /* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */
    background-color: #d2c8a8; /* #CCF; 3173FD			/* ger div-elementet färg */ /*margin-top: 30px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */ /*margin-bottom: 20px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    border-bottom: solid 1px #000000;
    border-top: solid 1px #000000;
    margin-left: 0px;
    border-right: solid 1px #e8e3e0;
    font-size: 1.2em;
    font-weight: bold;
}

div#listmenutips h5
{
    margin-left: 10px;
}

div#listmenutips a
{
    color: #000000;
}

.listmenutipsright
{
    width: 138px; /* ger div-elementet full bredd */
    float: left; /* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */
    background-color: #d2c8a8; /* #CCF; 3173FD			/* ger div-elementet färg */ /*margin-top: 30px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */ /*margin-bottom: 20px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */ /* margin-left: 0px; */ /* border-right: solid 1px #e8e3e0; */
    border-bottom: solid 2px #8e835f;
    border-top: solid 1px #8e835f;
    border-left: solid 1px #8e835f;
    border-right: solid 1px #8e835f;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.listmenutipsright a
{
    color: #000000;
    font-weight: 600;
}

div#listmenu
{
    width: 85%; /* ger div-elementet full bredd */
    float: left; /* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */ /*margin-top: 30px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */ /*margin-bottom: 20px;  TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-left: 5px;
    border-right: solid 1px #e8e3e0;
    font-size: 0.9em;
}

div#listmenu ul
{
    margin: 0 0 0 0; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */
}

div#listmenu li
{
    position: relative; /* positioneringskontext för den absolut positionerade listmenyn */
    list-style-type: none; /* tar bort punkterna för varje listpost */ /*background-color:#c5e6fe;*/ /* #8ed0ff; /* #CCF; /* anger bakgrunden för menyalternativen */ /* border-right:1px solid #069; /* skapar linjer som separerar listposterna */ /*width:145px;  10em;*/
    padding: 0px 0px 5px 5px;
    margin: 10px 10px 10px 0px; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */ /*	border-top:1px solid #000;  	border-left:1px solid #000; 	 	border-right:1px solid #000;  */
    font-weight: bold;
    border-bottom: solid 1px #e8e3e0;
}

div#listmenu li:hover
{
    background-color: #e8e3e0; /* anger bakgrunden för menyalternativen */
}

div#listmenu a
{
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
}

/******************************  SLUT LISTMENU _ BEÖVS ALLT ************************/

/* listmenyn börjar här */
div#listmenu ul li ul
{
    margin: 0; /* förhindrar att det tillfälliga värdet från den vågräta menyn ärvs här - OK att ta bort, om du också  			tar bort det tillfälliga värdet ovan */
    position: absolute; /* positionerar ul-listmenyn i förhållande till dess relativt positionerade li-förälder */
    width: 10em; /* anger menyns bredd - i kombination med bredden 100% för li-elementet, gör detta att menyn  	justeras lodrätt */
    top: 0px; /* justerar listmenyn exakt under den vågräta menyn */
    left: 117px; /* justerar listmenyn exakt under den vågräta menyn */ /* border-top:1px solid #e8e3e0; */
    border-top: 1px solid #555555;
    font-size: 1.3em;
    background-color: #f8f3f0; /* anger bakgrunden för menyalternativen */
}
div#listmenu ul li ul li
{
    margin-top: 0px; /* förhindrar att det tillfälliga värdet från den vågräta menyn ärvs här - OK att ta bort, om du också  			tar bort det tillfälliga värdet ovan */
    height: 100%; /* får listposterna att fylla ut listbehållaren (ul) */
    width: 96%; /* får listposterna att fylla ut listbehållaren (ul) */
    border-top: 0px solid #555555; /* tre sidor på varje listpost på varje listmeny #069 */
    border-left: 1px solid #555555; /* tre sidor på varje listpost på varje listmeny #069 */
    border-bottom: 1px solid #555555; /* background-color:#EEE; /* anger bakgrunden för menyalternativen #FFA; */
    border-right: 1px solid #555555;
    padding: 0 0 2 0px;
    margin: 0px 0px 0px 0px;
}
/* gör att listmenyn visas när användaren pekar på menyn */
div#listmenu ul li ul
{
    display: none; /* döljer listmenyn när användaren inte pekar på menyn */
}
div#listmenu ul li:hover ul
{
    display: block; /* visar listmenyn när användaren pekar på menyn */
}

/* popoutmenyer börjar här */
body div#listmenu ul li ul li ul
{
    visibility: hidden; /* samma effekt som display:none i det här fallet */
    top: -1px;
    left: 10em;
}
div#listmenu ul li ul li:hover ul
{
    visibility: visible; /* samma effekt som display:block i det här fallet */
}

/* listmenyn slutar här */

/*********************GOOGLE********************************/

/*
div#google_center
{
	width: 100%;
	margin: 10px 0 0 0;
	text-align: center;
}

div#google_left
{
	margin: 20px 0 0 0;
	text-align: left;
}

div#google_blueframe
{
	margin: 20px 0 0 0;
	text-align: left;
	border: 1px solid black; 
	background-color: #c5e6fe;
	padding: 5px;
}

div#google_greenframe
{
	margin: 20px 0 0 0;
	text-align: left;
	border: 1px solid black; 
	background-color: #ccffcc;
	padding: 5px;
}
*/
/*********************GOOGLE********************************/

/************ bara i daniels tmp???????  ************************/

ul
{
    margin: 0.4em 20px;
    padding: 0px;
}

li
{
    font-size: 0.8em;
    font-weight: 400;
    color: #333333;
    margin: 0px;
    padding: 0px;
}

/*******************************************************************************/


p
{
    font-size: 0.8em;
    margin: 0.6em 0 0 0;
    padding: 0px;
    margin-bottom: 5px;
}

h1
{
    font-size: 1em;
    margin: 1.2em 0 0.6em 0;
    padding: 0px;
}

/*h1.menutop
{
	margin: 0.2em 0 0.6em 0;
	padding: 0px;
}*/


h2
{
    font-size: 0.8em;
    font-weight: bold;
    margin: 1.2em 0 0.6em 0;
    padding: 0px;
}

.h2
{
    font-size: 0.8em;
    font-weight: bold; /*margin: 1.2em 0 0.6em 0;*/
    padding: 0px 0px 3px 0px;
}

h3
{
    font-size: 0.7em;
    font-weight: bold;
    margin: 1.2em 0 0.6em 0;
    padding: 0px;
}

.h3
{
    font-size: 0.7em; /*	font-weight: bold; */
    padding: 0px 0px 3px 0px;
}

h4
{
    font-size: 0.7em;
    font-weight: 400;
    color: #333333;
    margin: 0px;
    padding: 0px;
    font-style: italic;
    margin: 0.6em 0 0em 0;
}

h4.footer
{
    font-size: 0.7em;
    font-weight: 100;
    color: #888888;
    margin: 5px;
    padding: 0px;
}

h4.footer a
{
    color: #888888;
}

h5
{
    font-size: 0.7em;
    font-weight: 100;
    margin: 0px;
    padding: 0px;
}

h5.oversikt
{
    float: right;
    margin: 2px 5px 5px 0px;
}

.breadCrumb
{
    font-size: 0.7em;
    font-weight: 100;
    color: #666666;
    margin: 0px;
    padding: 0px;
}

.breadCrumb a:visited
{
    /*font-size: 100%; 	font-weight: 100; 	color: #666666;*/
    margin: 0px;
    padding: 0px;
}

.breadCrumb a:link
{
    /*font-size: 100%; 	font-weight: 100; 	color: #666666;*/
    margin: 0px;
    padding: 0px;
}





/******************* vad gör denna ***********************/
*
{
    margin: 0px;
    padding: 0px;
}
/******************* vad gör slut ***********************/


form
{
    margin: 0px;
}

/*    ???????????????????????????          */
.content
{
    padding: 10px;
}

input, select, textarea
{
    background-color: #F4F4F4;
}

.inputarea
{
    padding: 3px 0 0 3px;
    border: 1px solid #7b7b7b;
    height: 19px;
    background-color: #F4F4F4;
}

/* här följer den briljanta "ingen-extra-kod"-metoden för friläggning (clearing) som 
uppfunnits av Tony Aslett - www.csscreator.com */
/* lägg helt enkelt till klassen clearfix till den behållare som måste omge flytande element */
/* läs mer om hur och varför detta fungerar på http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
    content: "."; /* punkten placeras på sidan som sista objekt innan div-elementet avslutas */
    display: block; /* inline-element reagerar inte på egenskapen clear */
    height: 0; /* ser till att punkten inte är synlig */
    clear: both; /* får behållaren att frilägga punkten */
    visibility: hidden; /* försäkrar ytterligare att punkten inte är synlig */
}

.clearfix
{
    display: inline-block; /* en fix för IE Mac */
}

/* härnäst en fix för den fruktade Guillotine-buggen i IE6 */
/* Gömmer för IE-mac \*/
* html .clearfix
{
    height: 1%;
}

.clearfix
{
    display: block;
}
/* Slut på gömning för IE-mac */
/* slut på "ingen-extra-kod"-metoden för friläggning (clearing) */


/* Patrik */

.bold
{
    font-weight: bold;
}

.alignleft
{
    float: left;
    overflow: hidden;
    display: inline;
    margin-right: 10px;
    margin-bottom: 4px;
}

.center
{
    margin-left: 239px;
    margin-top: 10px;
}

.error
{
    color: Red;
}

.new
{
    color: Red;
}

.fontsmall
{
    font-size: 0.8em;
}

.Categories
{
    clear: left;
    margin-bottom: 7px;
    font-size: 1.0em;
}

.Categories ul
{
    /*width i ie-additional*/
    list-style: none;
    overflow: hidden;
    height: 100%;
    margin: 5px 0 8px 1px;
}

.Categories li
{
    margin: 0px 9px 0px 9px;
    padding: 0px 0px 7px 0px;
    list-style: none;
    float: left;
    width: 100px;
    height: 10px;
}

.footer
{
    font-family: arial;
    font-size: 80%;
    font-weight: 100;
    color: #888888;
    margin: 0px;
    padding: 0px;
}

h1.menutop
{
    font-family: arial;
    font-size: 130%;
    color: #333333;
    margin: 0.2em 0 0.6em 0;
    padding: 0px;
}


/* tabell  category.aspx */

div#mytable
{
    width: 80%; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    font-size: 0.9em;
}

div#mytable td
{
    margin: 0 0 0 0; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */
    position: relative; /* positioneringskontext för den absolut positionerade listmenyn */
    list-style-type: square; /* tar bort punkterna för varje listpost */ /*background-color:#c5e6fe;*/ /* #8ed0ff; /* #CCF; /* anger bakgrunden för menyalternativen */ /* border-right:1px solid #069; /* skapar linjer som separerar listposterna */ /*width:145px;  10em;*/
    padding: 0px 0px 2px 2px;
    margin-left: 3px; /*font-weight:bold;*/
}

div#mytable td:hover
{
    background-color: #e8e3e0; /* anger bakgrunden för menyalternativen */
}

div#mytable a
{
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */
}

/* tabell  category.aspx */

div#mytableSmall
{
    width: 80%; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    font-size: 0.7em;
}

div#mytableSmall td
{
    margin: 10 0 10 0; /* drar in ul från behållarens kant - OBS: annat värde för IE i hacks nedan */
    position: relative; /* positioneringskontext för den absolut positionerade listmenyn */
    list-style-type: square; /* tar bort punkterna för varje listpost */ /*background-color:#c5e6fe;*/ /* #8ed0ff; /* #CCF; /* anger bakgrunden för menyalternativen */ /* border-right:1px solid #069; /* skapar linjer som separerar listposterna */ /*width:145px;  10em;*/
    padding: 0px 0px 10px 10px;
    margin-left: 3px; /*font-weight:bold;*/
}

div#mytableSmall td:hover
{
    background-color: #e8e3e0; /* anger bakgrunden för menyalternativen */
}

div#mytableSmall a
{
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */
}

/* comments showrecepy.aspx */

div#comments
{
    font-size: 0.9em;
}

div#forumcomments
{
    font-size: 1.0em;
}

.comment_name_author
{
    text-align: right;
    font-weight: bold;
    font-size: 0.8em;
    width: 98%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.comment_name
{
    text-align: right;
    font-weight: bold;
    font-size: 0.8em;
    width: 98%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: transparent url('../images/boxdown.gif') no-repeat scroll 100% 0;
}

.comment_box
{
    background: #f7f4ec;
    padding: 5px;
    width: 445px;
    overflow: hidden;
    padding-bottom: 3px;
}

.clr
{
    clear: both;
}

.small
{
    font-size: 0.7em;
    font-weight: bold;
}

.rating
{
    clear: both;
    float: right;
    font-size: 0.7em;
    font-weight: bold;
}


/*  */
div#commenttext
{
    width: 95%; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    font-size: 0.9em;
}

div#commenttext li
{
    clear: left;
    float: none;
    list-style-type: none; /* tar bort punkterna för varje listpost */
    padding-bottom: 20px;
}

div#commenttext h3
{
    font-size: 1.1em;
    text-decoration: underline;
}

div#commenttext a
{
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */
}

div#commenttext a:hover
{
    /* background-color: #e8e3e0;  anger bakgrunden för menyalternativen */
}

/* tabell  goodfood */

div#goodfood
{
    width: 100%; /* ger div-elementet full bredd */ /* float:left; 	/* gör att div-elementet omsluter listan */ /* border-top:1px solid #069;		/* skapar en linje i div-elementets övre kant */ /* border-bottom:1px solid #069;	 	/* skapar en linje i div-elementets nedre kant */ /*font-size:.8em;		/* ANGE TECKENSTORLEKEN HÄR */ /* background-color:#CCF; /* #CCF; 3173FD			/* ger div-elementet färg */
    margin-top: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    margin-bottom: 0px; /* TILLFÄLLIGT - knuffar ner div-elementet en bit i webbläsarfönstret för att göra det här exemplet tydligare */
    font-size: 0.7em;
}

div#goodfood td
{
    margin: 0 0 0 0;
    position: relative;
    padding: 0px 0px 0px 0px;
}

div#goodfood a
{
    display: block; /* alternativen på listmenyn ändrar färg */
    text-decoration: none; /* tar bort understrykningen av länken */
}

/******************************  LÄNKLISTOR ************************/

div#linkblock
{
    padding-bottom: 1em;
    font-size: 0.8em;
    border-bottom: solid 1px #ebe7d5;
}

div#linkblock li
{
    font-size: 1.4em;
}

div#linkblock p
{
    font-size: 1.0em;
}

div#linkblock h2
{
    font-size: 1em;
    padding-top: 10px;
}

div#linkblock a
{
    color: #695e3e;
}

div#linkblock a:hover
{
    color: #0000ff;
}

.linkpicture
{
    float: left;
    overflow: hidden;
    display: inline;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 4px;
}

.linkmenu
{
    font-size: 1.1em;
    font-weight: 100; /*color: #666666;*/
    color: #695e3e;
    margin: 0px;
    padding: 0px;
    clear: both;
}

/****************************** SLUT LÄNKLISTOR ************************/

div#linkblockText
{
    padding-bottom: 1em;
    font-size: 0.8em;
}

div#linkblockText ul
{
    font-size: 0.9em;
}

div#linkblockText li
{
    font-size: 1.0em;
}

div#linkblockText p
{
    font-size: 1.0em;
}

div#linkblockText h2
{
    font-size: 1em;
    padding-top: 10px;
}

div#linkblockText a
{
    color: #695e3e;
}

div#linkblockText a:hover
{
    color: #0000ff;
}


div#thumbsPicture
{
    clear: left;
    margin-bottom: 7px;
    font-size: 0.8em;
}

div#thumbsPicture img
{
    border: solid 1px #7b7b7b !important;
    padding: 1px;
    margin-bottom: 3px;
}

div#thumbsPicture ul
{
    /*width i ie-additional*/
    list-style: none;
    overflow: hidden;
    height: 100%;
    margin: 5px 0 8px 1px;
}

div#thumbsPicture li
{
    margin: 0px 9px 20px 9px;
    list-style: none;
    float: left;
    width: 130px;
    height: 130px;
}

div#thumbsPicture h2
{
    font-size: 1em;
    padding-top: 10px;
}

div#thumbsPicture a, .horisontal-links a
{
    color: #695e3e;
    font-family: arial, FreeSans, "Nimbus Sans L" !important;
    line-height: 14px !important;
}

div#thumbsPicture a:hover
{
    color: #0000ff;
}

/* recepylist */
div#recepylist
{
    clear: left;
    margin-bottom: 7px;
    font-size: 0.8em;
}

div#recepylist img
{
    border: solid 1px #7b7b7b !important;
    padding: 1px;
    margin-bottom: 3px;
}

div#recepylist ul
{
    /*width i ie-additional*/
    list-style: none;
    overflow: hidden;
    height: 100%;
    margin: 5px 0 8px 1px;
}

div#recepylist li
{
    margin: 0px 9px 20px 9px;
    list-style: none;
    float: left;
    width: 130px;
    height: 130px;
}

div#recepylist h2
{
    font-size: 1em;
    padding-top: 10px;
}

div#recepylist a, .horisontal-links a
{
    color: #695e3e;
    font-family: arial, FreeSans, "Nimbus Sans L" !important;
    line-height: 14px !important;
}

div#recepylist a:hover
{
    color: #0000ff;
}

/* label */
.label
{
    font-size: 0.8em;
    padding: 5px 0px 0px 0px;
}

.kalla
{
    font-size: 1.0em;
    padding: 0 0 3 0;
}

/* Teaser list */
.teaser-list
{
    clear: left;
    margin-bottom: 10px;
}

/* Three pack */
.three-pack ul
{
    /*width i ie-additional*/
    list-style: none;
    overflow: hidden;
    height: 100%;
    margin: 5px 0 50px 1px;
    width: 465px;
}

.three-pack ul h3
{
    margin-bottom: 3px;
}

.three-pack li
{
    list-style: none;
    float: left;
    margin: 0px 9px 45px 9px;
    width: 130px;
    height: 180px;
    color: Blue;
}

.three-pack img
{
    border: solid 3px #7b7b7b !important;
    padding: 1px;
    margin-bottom: 23px;
}

.three-pack a, .horisontal-links a
{
    color: #695e3e;
    font-family: arial, FreeSans, "Nimbus Sans L" !important;
    line-height: 14px !important;
}

.three-pack .title
{
    padding-bottom: 5px;
}

/* Livsmedel */
.livsmedel
{
    font-size: 0.7em;
}

.livsmedel a
{
    font-size: 0.9em;
}

.livsmedel span
{
    font-size: 0.9em;
}

.livsmedel h2
{
    font-size: 1.0em;
}


/* Rating */
/*  star rating */
#rateMe_1_, #rateMe_2_
{
    /* padding: 0 0 4px 10px; */
    padding: 0 0 0px 0px;
    margin: 0;
    display: block;
    float: left;
}
#rateMe_1_ li, #rateMe_2_ li
{
    float: left;
    list-style: none;
}
#rateMe_1_ li a:hover, #rateMe_1_ .on, #rateMe_2_ li a:hover, #rateMe_2_ .on
{
    background: url(../images/star.gif) 0 100% no-repeat;
    width: 25px;
    height: 25px;
}
#rateMe_1_ a, #rateMe_2_ a
{
    float: left;
    display: block;
    background: url(../images/star.gif) 0 0 no-repeat;
    width: 25px;
    height: 25px;
}
#rateStatus_1_, #rateStatus_2_
{
    font-size: 13px;
    color: #777;
    float: left;
    padding-left: 15px;
}

.clear
{
    display: block;
    clear: both;
}

.comment_part_box
{
    display: block;
    clear: both;
    margin: 0px 0px 0 0px;
    padding: 0 0px 0 0px;
}

.comment_container textarea, .commentlist textarea
{
    padding: 5px;
    margin-bottom: 5px;
    width: 435px; /* height:75px; */
    font-size: 14px;
}

label.float
{
    font-size: 0.7em;
    font-weight: bold;
    margin: 0px 0 0px 0;
    padding: 0px;
    float: left;
}

.grade
{
    clear: both;
    float: right;
    padding: 2px 2px 0 0;
    line-height: 1.0;
    background: url(../images/star_16.gif) repeat-x;
    height: 16px;
}

.grade2
{
    clear: both;
    float: left;
    padding: 2px 2px 0 0;
    line-height: 1.0;
    background: url(../images/star_16.gif) repeat-x;
    height: 16px;
    margin-bottom: 10px;
}

.info
{
    clear: both;
    float: right;
    padding: 2px 2px 0 0;
    line-height: 1.0;
    font-size: 9px;
    color: #444;
}

.infolabel
{
    font-size: 0.7em;
    margin: 1.2em 0 0.6em 0;
    padding: 0px;
    color: #888888;
}
/* End rating */

/*****************Formulär formatering Guestbook ******************/
.row
{
    width: 500px;
    font-size: 0.8em;
    font-weight: bold; /*margin: 1.2em 0 0.6em 0;*/
}
.row .label
{
    /* width: 99%;*/
    float: left;
    padding: 5px 0 0 0;
    font-weight: lighter;
}
.row .verifyBox
{
    width: 20%;
    padding: 0px 0px 0 0;
}
.row .LabelAll
{
    width: 100%;
    float: left;
    padding: 10px 0 0px 0;
}

.row .labelLeft
{
    width: 42%;
    float: left;
    padding: 5px 0 0 0;
}
.row .labelRight
{
    width: 17%;
    float: left;
    padding: 5px 0 0 0;
}

.row .labelHeaders
{
    width: 99%;
    float: left;
    padding: 5px 0 0 0;
}
.row .text
{
    float: left;
    width: 99%;
    margin: 0 5px 0 0;
}
.row .text1
{
    float: left;
    width: 40%;
    margin: 0 5px 0 0;
}
.row .text2
{
    float: left;
    width: 57%;
}

.rowPresentation
{
    width: 500px;
    font-size: 0.9em; /*font-weight: bold;	*/
}

.rowPresentation .Separator
{
    float: left;
    padding: 0 0 0 0;
    width: 100%;
    border-top-style: solid;
    border-top-color: Black;
    border-top-width: thin;
    background-color: ActiveBorder;
}

.rowPresentation .Name
{
    width: 100%;
    float: left;
    color: Gray;
    padding: 10px 0 15px 0;
}
.rowPresentation .labelHeader
{
    width: 74%;
    float: left;
    padding: 5px 0 0 0;
    font-weight: bold;
}

.rowPresentation .labelTime
{
    width: 25%;
    float: right;
    padding: 5px 0 0 0;
    font-weight: lighter;
    font-size: 0.8em;
}
.rowPresentation .label
{
    width: 99%;
    float: left;
    padding: 5px 0 0 0;
}


/*****************SLUT Formulär formatering formatering Guestbook******************/

.minithumbs
{
}

.minithumbs img
{
    text-align: center;
    border: 0;
    cursor: pointer;
}

/* Sample PopBox CSS Classes */
/* PopBox.js, Copyright (c) 2007, C6 Software, Inc. (http://www.c6software.com/)*/

.PopBoxImageSmall
{
    border: solid 1px #7b7b7b !important;
    padding: 1px; /*	border: none 0px #ffffff; */
    cursor: url("images/magplus.cur"), pointer;
}
.PopBoxImageLarge
{
    border: solid 1px #7b7b7b !important;
    padding: 1px; /* 	border: solid 1px #999999; */
    cursor: url("images/magminus.cur"), pointer;
}
.PopBoxImageShrink
{
    cursor: url("images/magminus.cur"), pointer;
}
.PopBoxImageLink
{
    cursor: pointer;
}
.PopBoxImageMove
{
    border: none 1px #ffffff;
    cursor: pointer;
}

/* Paging */
.paging
{
    border: darkgray 1px solid;
    padding: 2px 4px 2px 2px;
    margin-right: 3px;
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
}
.pagingSelected
{
    background-color: #ceba84;
}

div#divPaging
{
    border-top: solid 1px darkgray;
    border-bottom: solid 1px darkgray;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
/*div#divPaging a
{
}*/
div#divPaging a:hover
{
    background-color: #ceba84;
}

/* RecepyHeader */
.recepyHeader
{
    border: darkgray 1px solid;
    padding: 3px 8px 3px 8px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
    background-color: #f0ebdb;
    font-size: 0.8em;
}

.recepyHeaderSelected
{
    background-color: #fffffe;
}

div#recepyHeader
{
    padding: 3px 8px 3px 8px;
    text-align: left;
    border-bottom: solid 1px darkgray;
}

div#recepyHeader a:hover
{
    background-color: #ceba84;
}


/* linkbutton */
.linkbutton
{
    border: darkgray 1px solid;
    padding: 3px 8px 3px 8px;
    margin-right: 5px;
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
    background-color: #efeade;
    font-size: 0.8em;
}

.ThankYou
{
    height: 30px;
    font-size: 1.1em;
    color: #423b27;
}

/* Default */
.defaultLabel
{
    width: 138px; /* ger div-elementet full bredd */
    float: left; /* gör att div-elementet omsluter listan */
    background-color: #d2c8a8; /* #CCF; 3173FD			/* ger div-elementet färg */
    border-bottom: solid 2px #8e835f;
    border-top: solid 1px #8e835f;
    border-left: solid 1px #8e835f;
    border-right: solid 1px #8e835f;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.defaultLabel a
{
    text-decoration: none; /* tar bort understrykningen av länken */ /*color: #000; /* anger teckenfärgen #069; */
}

.defaultLabel a:hover
{
    text-decoration: underline;
}

/* ads */
.follower
{
    position: absolute;
    top: 0;
    bottom: 0;
}

#top_ad_wrap
{
    width: 100%;
    padding: 20px 0;
    background: #fff;
}
#ad_top
{
    margin: 0 auto;
    width: 980px;
    position: relative;
}
#left_ads, #right_ads
{
    position: absolute; /*visibility: hidden;*/
    z-index: 100;
    left: 820px;
    top: 10px;
    margin: 0;
    padding: 0;
}
#left_ads
{
    left: -165px;
}

/* search */
.search
{
    float: right;
    height: 28px;
    position: relative;
    width: 163px;
    left: 20px;
}

.searchIcon
{
    position: absolute;
    right: 1.4em;
    top: 0.5em;
    float: left;
    margin: -4px 20px 0px 11px;
}

.searchbox
{
    border: 1px solid #7b7b7b;
    width: 120px;
    padding: 0px 0px 0px 0px;
    background-color: #FFFFFF;
}

.search-text
{
    border: 1px solid #7b7b7b;
    height: 19px;
    margin-right: 4px;
    padding: 3px 0 0 3px;
    width: 356px;
}

div.enclosing
{
    clear: both;
}

/* autocomplete */
.autocomplete-w1
{
    background: url(images/shadow.png) no-repeat bottom right;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 8px 0 0 6px; /* IE6 fix: */
    _background: none;
    _margin: 0;
}
.autocomplete
{
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    text-align: left;
    max-height: 350px;
    overflow: auto;
    margin: -6px 6px 6px -6px; /* IE6 specific: */
    _height: 350px;
    _margin: 0;
    _overflow-x: hidden;
}
.autocomplete .selected
{
    background: #F0F0F0;
}
.autocomplete div
{
    padding: 2px 5px;
    white-space: nowrap;
}
.autocomplete strong
{
    font-weight: normal;
    color: #3399FF;
}

/* slider */
.sliderul
{
    width: 350px;
    margin: 0 0 0 0;
}

.sliderli
{
}

.slideroutside
{
    margin-left: 50px;
}

.loading
{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -64px;
}

/* Livsmedellist */
.Livsmedellist
{
    clear: left;
    margin-bottom: 7px;
    font-size: 0.9em;
}

.Livsmedellist ul
{
    /*width i ie-additional*/
    list-style: none;
    overflow: hidden;
    height: 100%;
    margin: 5px 0 8px 1px;
}

.Livsmedellist li
{
    list-style: none;
    float: left;
}

.LivsmedellistName
{
    width: 285px;
}

.LivsmedellistKolhydrat
{
    width: 100px;
}

.LivsmedellistSource
{
    width: 50px;
}

.Livsmedellist h2
{
    font-size: 1em;
    padding-top: 10px;
}

.Livsmedellist a, .horisontal-links a
{
    color: #695e3e;
    font-family: arial, FreeSans, "Nimbus Sans L" !important;
    line-height: 14px !important;
}

.Livsmedellist a:hover
{
    color: #0000ff;
}

.livstabellleft
{
    float: left;
    width: 100px;
}

.livstabellright
{
    float: left;
    font-weight: bolder;
}

/* tables */
table.tablesorter
{
    font-family: arial;
    background-color: #CDCDCD;
    margin: 10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th
{
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header
{
    background-image: url('../images/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td
{
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td
{
    background-color: #F0F0F6;
}
table.tablesorter thead tr .headerSortUp
{
    background-image: url('../images/asc.gif');
}
table.tablesorter thead tr .headerSortDown
{
    background-image: url('../images/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp
{
    background-color: #8dbdd8;
}

div.tablesorterPager {
	padding: 10px 0 10px 0;
	background-color: #D6D2C2;
	text-align: center;
}
div.tablesorterPager span {
	padding: 0 5px 0 5px;
}
div.tablesorterPager input.prev {
	width: auto;
	margin-right: 10px;
}
div.tablesorterPager input.next {
	width: auto;
	margin-left: 10px;
}
div.tablesorterPager input {
	font-size: 8px;
	width: 50px;
	border: 1px solid #330000;
	text-align: center;
}

.review
{
    font-size: 1.2em;
    font-weight: bold;
    float: left;
    margin-bottom: 10px;
}