body {
margin:0;
padding:0;
border:0;
height:100%;
background: url("images/layout/bakgrund.jpg") repeat-x top left;
}

html {
margin:0;
padding:0;
border:0;
}



img, p, a, h1, h2, h3, h4, ul, li, br,
form, table {
margin:0;
padding:0;
border:0;
}


a {
text-decoration:none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}


.wrapper {
margin: 0 auto 0 auto;
padding:0;
width:980px;
height:auto;
border:0;
}


.top {
display:inline;
float:left;
width:400px;
height:auto;
margin:40px 0 0 0;
}

.top h2 {
margin:0;
padding:0;
font:bold 20px Arial;
color:#fff;
}

.head {
display:inline;
float:left;
margin:0;
padding:0;
width:980px;
height:405px;

}


.head .left {
display:inline;
float:left;
margin:65px 0 0 0;
padding:0;
width:450px;
height:auto;
}

.head .left h1 {
margin:0;
padding:0;
font:bold 34px Calibri, Arial, Verdana;
color:#fff;
text-shadow: #000 1px 1px 1px ;
}


.head .left ul {
list-style-type:square;
margin:10px 0 0 15px;
padding:0;
color:#fff;
}

.head .left li {
margin:0 0 5px 0px;
padding:0 0 0 5px;
color:#fff;
font:normal 18px Arial;
}


.head .webbdesigner {
display:inline;
float:left;
margin:0;
padding:0;
width:172px;
height:351px;
}

.head .betala {
display:inline;
float:right;
margin:0;
padding:0;
width:319px;
height:421px;
background: url("images/layout/prisetbox.png") repeat-x top left;
}

.head .betala p {
font:bold 16px Arial;
color:#43270e;
display:inline;
float:left;
margin:100px 0 0 40px;
padding:0;
}

.head .betala ol {
float:left;
margin:20px 0 0 60px;
padding:0;
width:230px;
font:normal 14px Arial;
color:#43270e;
}



.head .betala li {
margin:0 0 10px 0;
padding:0;
width:auto;
height:auto;
}

.menu {
display:inline;
float:left;
margin:0;
padding:0;
width:0;
height:0;
border:0;
}

.menu ul {
display:inline;
float:left;
margin:0;
padding:0;
width:0;
height:0;
border:0;
} /*Använd alltid UL till menyer*/


.menu li {
display:inline;
float:left;
margin:0;
padding:0;
}/*Ingen storlek på li, låt detta styras av a (länk)*/


.menu li a {
display:block;
float:left;
margin:0;
padding:0;
font:;
color:;
border:;
width:auto;
height:0;
}
/**a-länk görs till ett block-element för enklare hantering och kompatibilitet./
/*Sätt width:auto eftersom textens längd påverkar knappens längd.*/ 
/*Kom ihåg att sätta fast värde på height för att reglera höjden. (Inte alltid nödvändigt. Går bra med height:auto; om knappen bara har en färg och ej en bakgrundsbild.*/
/*Det du ökar i padding-top ska du minska med i height (Om height har ett fast värde). padding-bottom behövs ej.*/


.menu li a:hover {
font:;
color:;
background: ;
}

.main {
display:inline;
float:left;
margin:0;
padding:0 0 50px 0;
width:980px;
height:auto;
min-height:0;
}


.left_content {
display:inline;
float:left;
margin:0;
padding:0;
width:543px;
height:auto;
}

.left_content .top {
display:block;
float:left;
margin:0;
padding:0;
width:543px;
height:14px;
background: url("images/layout/box-top.jpg") no-repeat top left ;
}

.left_content .content {
position:relative;
float:left;
margin:0;
padding:0;
width:543px;
height:auto;
min-height:350px;
background: url("images/layout/box-bakgrund.jpg") repeat-y top left ;
}

.left_content .bottom {
position:absolute;
bottom:0;
margin:0;
padding:2px 0 0 0;
width:543px;
height:21px;
background: url("images/layout/box-bottom.jpg") no-repeat top left ;
}


.left_content img, .left_content p {
margin-left:26px;
margin-right:27px;
padding:0;
}


.left_content img {
margin-bottom:10px;
margin-top:5px;
}

.left_content  p {
font:normal 12px Verdana;
color:#383833;
text-align:justify;
margin-bottom:15px;
line-height:18px;
}


.left_content h2 {
margin:0 0 20px 0;
padding:0;
font: bold 28px Calibri;
color:#383833;
}

.left_content h2 img {
margin:0 0 -13px 10px;
padding:0;
}

.right_content {
display:inline;
float:right;
margin:52px 0 0 0;
padding:0;
width:310px;
height:auto;
}

.right_content h2 {
margin:0;
padding:0;
font:bold 17px Calibri;
color:#383833;
}


.right_content h2.big {
margin:0;
padding:0;
font:bold 26px Calibri;
color:#383833;
}


.right_content .testimonials {
display:inline;
float:left;
width:310px;
height:auto;
min-height:436px;
background: url("images/layout/vadsager.jpg") no-repeat top left;
margin:10px 0 0 0;
padding:0;
}


.right_content .testimonials .first {
display:inline;
float:left;
width:240px;
height:85px;
margin:45px 0 0 37px;
}

.right_content .testimonials .second {
display:inline;
float:left;
width:240px;
height:85px;
margin:130px 0 0 37px;
}

.right_content .testimonials p {
font:bold 16px Calibri;
color:#383833;
}



.right_content .testimonials .author {
display:inline;
float:right;
width:165px;
height:auto;
margin:40px 0 0 20px;
}


.right_content .testimonials .author h3 {
margin:0;
padding:0;
font:bold 18px Calibri;
color:#fff;
text-shadow: #000 1px 1px 1px ;
}

.right_content .testimonials .author p {
margin:0;
padding:0;
color:#994e0c;
text-shadow: #fff 1px 1px 1px ;
}


.bottom {
float:left;
margin:0;
padding:0;
width:0;
height:0;
min-height:0;
background: ;
border:0;
}

input {
border:1px solid #e09d0c;
padding:3px;
width:120px;
height:auto;
margin:10px 0 0 0;
}

.skicka {
margin:10px 0 0 8px;
color:#fff;
background: url("images/layout/skicka.jpg") repeat-x top left;
border:1px solid #964702;
padding:3px 5px 5px 5px;
cursor:pointer;
height:27px;
width:60px;
text-align:center;
}

* html .bottom {
height:0;
}

span.orange {
color:#fd8b24;
}

span.fel {
display:block;
font:bold 12px Arial;
color:#e23000;
padding:5px;
border:1px solid #e23000;
text-align:center;
margin:5px 0 5px 0;
}

.download {
display:block;
font:bold 14px Arial;
color:#ffb24f;
border:1px solid #ffb24f;
text-align:center;
margin:5px 0 0 0;
}

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


.centering {
display:block;
float:left;
text-align:center;
width:980px;
padding:10px 0;
}

.centering p, .centering a {
font:normal 12px Arial;
color:#979797;
}

.centering a {
text-decoration:underline;
}

[code lang="css"]
@font-face {
font-family: "Calibri";
src: url('calibri.eot'); /* IE */
}

@font-face {
font-family: "Calibri";
src: url("calibri.otf"); /* other */
} 
[/code]