@charset ”utf-8”;
/* CSS Document*/

html,body,div,h1,h2,h3,h4,h5,td {
margin:0;
padding:0;
}/*reset for page structure*/

body { background:#efefef url(graphics/background.png) repeat top center;
}

p {
margin: 0;
padding: 0;
}/*reset for p in contactform*/

ul {
margin: 0;
padding: 0;
list-style:none;
}/*reset for main menu list*/

#container {
width:960px;
background-color:#fff;
margin:0 auto;
-webkit-box-shadow: 0 4px 4px 4px #ccc;
-moz-box-shadow: 0 4px 4px 4px #ccc;
box-shadow: 0 4px 4px 4px #ccc;
}/*shadow around the container webkit and moz makes it visible also in other browsers*/

#header {
width:960px;
height:150px;
background-color:#000;
background:url(../graphics/header.gif)no-repeat;
}

#main_menu {
width: 948px;
background-color:#000;
height:42px;
padding-top:15px;
padding-left:12px;
text-align:left;
background:url(../graphics/tonadsvart.jpg) no-repeat;
}/*the main menu is aligned to the left*/

#main_menu ul {
margin-left:10px;
}

#main_menu ul li {
display: inline;
margin-left:10px;
text-align:center;
list-style:none;
}/*list style none removes the bullets and the text is centered*/

#main_menu ul li a {
text-decoration:none;
color:#e18800;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:16px;
padding-top:5px;
}/* text decoration removes the line under the link*/

#main_menu ul li a:hover {
color:#fff;
}/*gives a white hover effect only the text and not the background*/

#main_menu ul li.current_page a {
color:#f1db00;
}

#main_menu ul li.current_page a:hover {
color:#f1db00;
}

#sidebar {
background:#efefef url(graphics/background.png);
width:180px;
height:320px;
float:left;
margin-top:30px;
margin-left:30px;
padding-top:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-webkit-box-shadow: 0 1px 3px 2px #ccc;
-moz-box-shadow: 0 1px 3px 2px #ccc;
box-shadow: 0 1px 3px 2px #ccc;
}/*the sidebar is positioned to the left by float and the rounded corners are adjusted by a css3 feature*/

#sidebar_menu ul li {
text-align:left;
list-style:none;
}

#sidebar_menu ul li a {
color:#e18800;;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:14px;
display:block;
text-decoration:none;
line-height:30px;
padding: 4px 0px 0px 10px
}

#sidebar_menu ul li a:hover {
color:#000;
}

#main {
width:960px;
background-color:#fff;
margin:0 auto;
}/*main for index*/

.section {
width:900px;
background:#efefef url(graphics/background.png);
margin:0 auto;
margin-top:30px;
margin-left:30px;
}/*section for index*/

#imageslider {
width:760px;
margin:0 auto;
position:relative;
z-index:0;
} /*the z-index decides the stacking order of the pictures, the highest number is shown on top of the other*/

.section_info {
width: 410px;
float:left;
margin:30px;
height:250px;
background:#efefef url(graphics/background.png);
padding:50px 50px 10px 50px;
}

#main_product {
width:750px;
float:left;
margin:0 auto;
margin-top:15px;
}/*the main on the product page is positioned to the left in order to fit next to the sidebar*/

.section_product {
width:670px;
background-color:#FFF;
margin:0 auto;
}

#main_contact {
width:960px;
background-color:#fff;
margin:0 auto;
}
.section_contactinfo {
width: 860px;
height: 160px;
background: #efefef url(graphics/background.png);
margin: 30px 0px 30px 30px;
padding: 40px 0px 30px 40px;
}

.section_contact {
width:450px;
height:360px;
background:#efefef url(graphics/background.png);
float:right;
margin:0px 30px 30px 0px;
}

.section_map {
width:420px;
float:left;
background-color:#fff;
margin-left:30px;
}

#main_about {
width:960px;
background-color:#fff;
margin:0 auto;
}

.section_about {
width:600px;
background:#efefef url(graphics/background.png);
float:left;
margin:0 auto;
margin:30px 0px 30px 30px;
padding:50px;
}

.section_about2 {
width:170px;
height:460px;
background-color:transparent;
float:left;
margin:30px 0px 0px 30px;
}

#main_purchasing {
width:960px;
background-color:#fff;
margin:0 auto;
}

.section_purchasing {
width:780px;
background:#efefef url(graphics/background.png);
margin:0 auto;
margin:30px 0px 30px 30px;
padding:50px;
padding-right:70px;
}/*section for index*/

#footer {
width:960px;
height:90px;
background-color:#000;
background:url(../graphics/footer.jpg) no-repeat;}

.section_footer {
height:40px;
width:840px;
background-color:transparent;
float:left;
margin:0 auto;
margin:30px 0px 0px 100px;
color:#FFF;
font-family:Helvetica, ”Arial Black”, sans-serif;
font-size:20px;
}

/*form*/

#form {
height:340px;
padding:0px;
margin-top:30px;
overflow:hidden;
}

input.textinput {
width:240px;
height:15px;
margin-top:10px;
}

input.textarea {
width:40px;
height:10px;
}

label{
display:block;
float:left;
width:130px;
text-align:right;
margin:10px 15px 0px 10px;
}/*the text is shown in a invisible box so that the position can be adjusted with margins and paddings*/

input[type=”submit”], input[type=”reset”] {
display:block;
width:50px;
height:25px;
float:left;
margin-top:10px;
}/*positions the submit and reset buttons*/

input[type=”submit”] {
margin-left:155px;
margin-right:10px;
}/*the left margin positions the button in line with the comment box and the right margin gives space between the buttons*/

select {
margin-top:10px;
}

/*text related css*/
h1 {
color:#000;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:24px;
}

h2 {
color:#fff;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:18px;
display:inline;
}

h3 {
color:#000;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:16px;
font-weight:bold;
}/*headings purchasing*/

h4 {
color:#000;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:16px;
padding-left:10px;
font-weight:bold;
}

p {
font-family: Georgia, ”Times New Roman”, serif;
font-size:16px;
}

p.price {
color:#000;
font-family: Georgia, ”Times New Roman”, serif;
font-size:18px;
font-weight:bold;
display:inline;
} /*price text*/

p.index {
margin-top:15px;
color:#000;
font-family: Georgia, ”Times New Roman”, serif;
font-size:18px;
}

p.footer {
word-spacing:5px;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:12px;
display:inline;
margin-left:150px;
text-align:center;
}/*this is for the phone number in the footer*/

p.footer2 {
word-spacing:5px;
font-family: Helvetica, ”Arial Black”, sans-serif;
font-size:12px;
margin:0 auto;
text-align:center;
} /*this decides the size, typography and the space between the word in the footer*/

ul {
font-family: Georgia, ”Times New Roman”, serif;
font-size:16px;
}

ol {
font-family: Georgia, ”Times New Roman”, serif;
font-size:16px;
list-style:none;
}

a:link {
color:#e18800;
}

a:visited {
color:#e18800;
}

a:hover {
color:#f1db00;
}

/*image related css*/

img.product {
float:left;
margin-left:40px;
margin-right:40px;
}/*puts the product images to the left of the text*/

img.right {
float:right;
margin-top:30px;
}/*the pictures are positioned to the right side by float*/

img.blocket {
float:right;
display:inline;
}/*the image is displayed inline so that it is placed next to the text on the page*/

/*image slider*/

#slider {
width:600px;
height:350px;
position:relative;
margin:0 auto;
}

#frame {
position: absolute;
z-index: 0;
width: 739px;
height: 341px;
top: -4px;
left: -79px;
}/*positions the frame around the slider and makes it on top of the rest of the slider images*/

#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}/*the position absolute puts the slides in a fixed position*/

.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}

.slides_container a {
width:570px;
height:270px;
display:block;
}

.slides_container a img {
display:block;
}

#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
} /*adjusts the position of the button images (forwards and backwards)*/

#slides .next {
left:586px;
}

.pagination {
margin:26px auto 0;
width:100px;
}

.pagination li {
float:left;
margin:0 1px;
list-style:none;
}

.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-position:0 0;
float:left;
overflow:hidden;
}

.pagination li.current a {
background-position:0 -12px;
}