/**********************************************/
/* Stilmall för WebTec
/* Matts Persson
/* webtec.iotec.com
/*
/*
/**********************************************/


/* GENERELL STYLING ***************************/

a {
outline: 0;					/* För att undvika ram runt aktiva klickbara objekt */
}

.floatleft {
float: left;					/* Skicka block åt vänster */
}

.floatright {
float: right;					/* Skicka block åt höger */
}

/* BODY ***************************************/

body {
height: 1200px;
text-align: center;
background-color: #444;				/* Yttersta bakgrunden - utanför "container" */
}

/* CONTAINER **********************************/

#container {
width: 960px;					/* Bredd= 960 + 2 (border) + 10 (padding) = 972 ryms bra på 1024-skärm */
border: 1px solid #888;
padding: 5px;
margin-right: auto;				/* Centrerat */
margin-left: auto;
background-color: #fff;				/* Vit bakgrund */
}

/* HEADER *************************************/

#header {
height: 45px;					/* Höjd måste anges här för att border-bottom ska fungera */
font: 10px verdana, arial, sans-serif;		/* Font och storlek för menyn */
border-bottom: 1px solid #f00;			/* En röd linje i underkant på headern */
}

#header ul {
margin-top: 27px;				/* Headermeny längst upp */
margin-bottom: 0px;				/* Headermeny längst upp */
}

#header ul li {
float: right;					/* För att få en inline-meny */
list-style-type: none;				/* Tar bort punkterna i listan */
padding-right: 15px;				/* Mellanrum mellan valen och till högerloggan */
}

#header ul li a {
color: #888;					/* Grå menytext */
text-decoration: none;				/* Tar bort linjen under menytext */
}

#header ul li a:hover {
color: #000;					/* Svart text vid mouse-over */
}

#header img {
border: none;					/* Ingen ram runt bildlänkarna */
}

/* MENU ***************************************/

#menu {
clear: both;					/* Nollställer efter "flytisarna" i headern */
float: left;					/* Håll till vänster */
width: 150px;					/* Bredd= 150 + 10 i marginal till content */
margin-right: 10px;
margin-top: 10px;				/* Lite snyggt en bit ner */
font: 12px verdana, arial, sans-serif;
text-align: left;
}

#menu li {
color: #f00;					/* Röda punkter */
line-height: 1.8em;				/* Lite ökat mellanrum */
margin-left: -10px;				/* Meny jämkad lite åt vänster */
}

#menu li a {
color: #888;					/* Färg på menytext */
font-weight: normal;
text-decoration: none;				/* Inga streck under texten */
}

#menu li a:hover {
color: #000;					/* Ändra till svart text när musen kommer */
}

/* CONTENT ************************************/

#content {
float: left;					/* Håll även content åt vänster mot meyn */
width: 588px;					/* Bredd= 588px + 2px border */
border: 1px solid #888;
margin-top: 10px;				/* Lite snyggt under headerlinjen */
margin-bottom: 10px;				/* Lite snygg marginal till footer-text */
padding-top: 20px;				/* Innehåll en bit ner */
padding-bottom: 30px;				/* Lite snygg yta efter innehåll */
background-color: #ebebcf;			/* Bakgrundsfärg */
font: 14px Georgia, "New Century Schoolbook", Times, serif;
color: #600;					/* Textfärg */
text-align: center;				/* Centrerat som utgångspunkt */
}

#content .column {				/* Enkel lättläst textcolumn */
width: 430px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#content .col500 {				/* Text med 500 pixels bilder */
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#content .col500 img {
border: 1px solid #aaa;				/* Diskret ram runt dessa bilder */
}

#content .info {				/* För informationsrutor mm */
margin-left: auto;
margin-right: auto;
font: 12px verdana, arial, sans-serif;
color: #600;
}

#content .code {				/* För kodexempel */
background-color: #fff;				/* Bakgrundsfärg */
padding: 10px;
font: 12px verdana, arial, sans-serif;
color: #000;
border: 1px solid #aaa;				/* Diskret ram runt */
}

#content a:link, #content a:visited {		/* Alltid samma länkfärg */
color: #00f;
}

#content table {
text-align: left;				/* Vänsterorienterad text i tabeller */
color: #600;
}

#content h1 {					/* Headings H1 till H4 */
font: 24px verdana, arial, sans-serif;
color: #600;
font-weight: normal;
}

#content h2 {
font: 20px verdana, arial, sans-serif;
color: #600;
font-weight: normal;
}

#content h3 {
font: 14px verdana, arial, sans-serif;
color: #600;
font-weight: normal;
}

#content h4 {
font: 12px verdana, arial, sans-serif;
color: #600;
font-weight: normal;
}

#content li {
padding-bottom: 10px;				/* Lite mer space i listor */
}

/* SIDEBAR ************************************/

#sidebar {
float: right;					/* Denna får hålla till höger */
width: 200px;					/* Bredd= 200px vilket automatiskt bör ge en marginal på 10px från content */
margin-top: 30px;				/* Lite snyggt en bit ner */
text-align: center;				/* Centrerar allt här */
}

#sidebar img {
border: none;					/* Inga ramar runt länkbilderna */
padding-bottom: 10px;				/* Lite extra luft till nästa bild */
}

#sidebar .info {				/* För eventuell text i sidebar */
font: 10px verdana, arial, sans-serif;
color: #888;
font-weight: normal;
}

/* FOOTER *************************************/

#footer {
clear: both;					/* Nollställer efter "flytisarna" ovanför */
text-align: center;				/* Centrerad text.... */
margin-left: -50px;				/* ....under content */
padding-bottom: 5px;				/* Lite extra luft under texten */
font: 10px verdana, arial, sans-serif;
color: #888;
}

#footer a {
color: #888;
font-weight: normal;
text-decoration: none;
}

#footer a:hover {
color: #000;
}