/*

    CSS Document


    Site: Kvarnstrands Verktyg
    URL: http://www.kvarnstrands.se
    Author: PS Kommunikation
    Version: 1.2
    Date: 2008.06.15


*/


/*
 *      DEFAULT
 *
 */

body {
	text-align:center;
	background:#f5f9f1 url(../images/bgBody.jpg) left top repeat-x;
}
body#start div#slideshow {

    margin:0 0 20px 0;

}
div#wrapper {
	margin:0 auto; 
	width:960px;
    text-align:left;
}
div#top {
    width:100%;
    height:100px;
    padding-left:2px;
}
div#logo {
    float:left; 
    height:61px;
    width:145px;
    margin:10px 10px 0 0;
}
div#globalNav {
    float:right; 
    height:4em;
    margin:15px 0 0 0;
}
div#navigation {
    margin-bottom:20px;
    width:100%;
    padding-left:1px;
    float:left;      
}
div#placeholder {
    width:960px;
}
  
/*
 *      CLASSES
 *
 */

/*  Paging */
 div#primaryContent .arrowLeft {
   display:block;
   float:left;
   line-height:20px;
   background:url(../images/arrowLeft.gif) center left no-repeat;
   padding:0 50px 0 15px;
   text-decoration:none;
   color:#666;
   font-weight:bold;
   font-size:1.2em;
}
 div#primaryContent .arrowRight {
   display:block;
   float:left;
   line-height:20px;
   background: url(../images/arrowRight.gif) center right no-repeat;
   padding:0 15px 0 50px;
   text-decoration:none;
   color:#666;
   font-weight:bold;
   font-size:1.2em;              
}
 div#primaryContent .number {
   display:block;
   float:left;
   line-height:20px;   
   text-decoration:none;
   color:#666;
   font-weight:bold;
   margin-right:10px;
   font-size:1.2em;        
}
 div#primaryContent .numberActive,  div#primaryContent div#searchResults .numberActive,  div#primaryContent div#newsList .numberActive  {
   display:block;
   float:left;
   text-align:center;
   line-height:20px;   
   background:#999 url(../images/bgNumberActive.gif) no-repeat;
   width:1em;
   padding:0 5px 0 5px;
   text-decoration:none;
   color:#fff;
   font-weight:bold;
   margin-right:10px;
   font-size:1.2em;                        
}
div#primaryContent a.numberActive:hover {
    text-decoration:none;
}

/*  Clear */

.hide {
    position: absolute;
	left: -9999px;
	z-index: 100;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block; clear:both;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*  Misc */

.iconArrow {
    padding-left:10px;
    background: url(../images/iconArrow.gif) center left no-repeat;
}

/*
 *      CONTENT
 *
 */

/*      INDEX        */

body#start div#content {
    float: left;
    display:inline;
    width: 769px;
}
body#start div#masthead {
    width: 769px;
    margin-bottom:20px;
    background:#333 url(../images/mastheadStart.jpg) no-repeat;
    padding-top:420px;  
}
body#start div#masthead div {
    width:480px;
    position:relative;
}
body#start div#masthead div div {
    position:absolute; 
    left:0;
    bottom:0;
    display:inline;
    border:none;
    padding:10px;
}
body#start div#masthead div h1 {
    font-size: 1.8em;
    margin:0;
    background:url(../images/bgGreyTransparency.png) repeat;
    color:#990000;
    border-left:solid 25px #990000;
    padding:3px;
}
body#start div#masthead div h1, body#start div#masthead div p {
    font-weight:bold;
 }
body#start div#masthead div p {
    margin:5px 0; 
    line-height:1.3em;
    color:#fff; 
    padding:0 3px 3px 25px;
}
body#start div#primaryContent {
    padding: 0 20px 0 20px;
    margin: 20px 0 20px 0;
}
body#start div#secondaryContent {
    background: url(../images/bgSecondaryContent.gif) no-repeat;
    margin-left:10px;
}
body#start div#puffOne {
    position: relative;
    display: inline;
    float: left;
    width: 230px;
    height: 156px; 
}
body#start div#puffTwo {
    position: relative;    
    display:inline;
    float: left;
    height: 156px;
    margin-left:20px;
    width: 230px;
}
body#start div#puffThree {
    position: relative; 
    display:inline; 
    float: left;
    margin-left:25px;
    width: 232px;
    height: 156px; 
}

/*      SUBPAGE        */

body#subpage div#container {
    width: 769px;
    float:left;
}
body#subpage div#content {
    
    float: left;
    width:525px;
    margin-left:23px;
}
body#subpage div#masthead img {
    width: 525px;
    height: 321px;
    border: solid 1px #ecf0e9;
}
body#subpage div#primaryContent {
    padding: 0 0 0 0;
    margin: 20px 0 20px 0;  
}

/*      EMPLOYEES        */

.employee {
    width: 370px;
    height: 100px;
    background: #ecf0e9;
    border:solid 1px #e7eae6;
    position: relative;
    margin-bottom:10px;
}
.employee h2 {
    margin:10px 0 0 102px;    
}
.employee p {
    margin:0 0 0 102px;    
}
.employee img {
    position: absolute;
    bottom: 0;
    left: 10px;
}

/* IMG ROLLOVER */

div#organizationMap {
    position:relative;
}
div#organizationMap ul {
    font-size: 1.2em;
    list-style-type:square;
    margin:0 0 10px 25px;
}
div#organizationMapul li {
    margin-bottom:0.5em;
}
div#organizationMapul li a {
    background:none;
}
div#organizationMap A:HOVER .hotspot {
}
div#organizationMap .middle A:HOVER .hotspot {
    background:url(/images/map/mellan.gif) no-repeat;      
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;       
}
div#organizationMap .north A:HOVER .hotspot {
    background:url(/images/map/norra.gif) no-repeat;     
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;   
}
div#organizationMap .east A:HOVER .hotspot {
    background:url(/images/map/ost.gif) no-repeat;     
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;  
}
div#organizationMap .south A:HOVER .hotspot {
    background:url(/images/map/syd.gif) no-repeat;       
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;  
}
div#organizationMap .west A:HOVER .hotspot {
    background:url(/images/map/vast.gif) no-repeat;       
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;  
}
div#organizationMap .fin A:HOVER .hotspot {
    background:url(/images/map/finland.gif) no-repeat;       
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;  
}
div#organizationMap .nor A:HOVER .hotspot {
    background:url(/images/map/norge.gif) no-repeat;       
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px;  
}
div#organizationMap .rusdenbalt A:HOVER .hotspot {
    background:url(/images/map/danmark-ryssland-balt.gif) no-repeat;       
    height:583px;
    position:absolute;       
    top:0px;
    left:0px;
    width:525px; 
}

/*
 *      PRODUCTS
 *
 */

#productgroupsContainer {
    width:525px;
    margin-bottom:20px;
}
.productgroupsItem {
    display:inline;
    float:left;
    width:173px;
    height:173px;
    padding-top:20px;
    text-align:center;
    border:solid 1px #fff;          
}
.productgroupsItem:hover {
    border:solid 1px #ccc;          
}    
.productgroupsItem img {
    text-align:center;    
    margin-bottom:10px;
}
.productgroupsItem a {
    font-size:1.2em;
    text-decoration:none;
    color:#666;
    display:block;
}
.productgroupsItem a.hover {
    text-decoration:underline;           
}
.floatImage {
    float:right;
    margin:0 0 20px 20px;
}
#productitemContainer table {
   background:#e8e8e8;
   border:none;
   margin-bottom:1.5em;
}
#productitemContainer td {
   padding:0.1em 0.2em;
   font-size:0.9em;
   text-align:center;
}

/*
 *      PUFF
 *
 */

div#puffContainer {
    float:right;
    width:184px;
    /*height:400px;*/
    color:#fff;
    font-size:0.9em;     
}

/*
 *      PUFF SIDEBAR
 *
 */

div#puffContainer {
    float:right;
    width:184px;
    color:#fff;   
    font-size:0.9em;        
}
div.sidebarPuff {
    background:#333 url(../images/bgTopPuff.gif) 0px 0px no-repeat;
    margin-bottom:10px; 
}
div.sidebarPuff div.sidebarPuffInner {
    background:url(../images/bgBottomPuff.gif) left bottom no-repeat;
    padding-bottom:1px;
}
div.sidebarPuff h2 {
    padding:15px 10px 0 10px;
    color:#fff;
}   
div.sidebarPuff p {
    padding:0 10px 0px 10px;
    color:#fff;
}
div.sidebarPuff a {
    color:#fff;   
}

/* SEARCH */

div#search {
    background:#990000 url(../images/bgTopPuffOne.gif) 0px 0px no-repeat;
    margin-bottom:10px;
}
div#search div#searchInner { background: url(../images/bgBottomPuffOne.gif) left bottom no-repeat;
    padding-bottom:1px;
}
div#search p {
    padding: 15px 10px 0 10px;
    color:#fff;
    font-weight: bold;
}
div#search h2 {
    padding: 15px 10px 15px 10px;
    color:#fff;
}

/* CONTACT */

div#contact {
    background:#4c4c4c url(../images/bgTopPuffTwo.gif) 0px 0px no-repeat;
    margin-bottom:10px;  
}
div#contact div#contactInner {
    background: url(../images/bgBottomPuffTwo.gif) left bottom no-repeat;
    padding-bottom:1px;
}
div#contact h2 {
    padding: 15px 10px 0 10px;
    color:#fff;
}    
div#contact p {
    padding: 0 10px 0px 10px;
    color:#fff;
}

/* NEWS */

div#news {
    background:#990000 url(../images/bgTopPuffOne.gif) 0px 0px no-repeat;
    margin-bottom:10px;
}
div#news div#newsInner {
    background: url(../images/bgBottomPuffOne.gif) left bottom no-repeat;    
    padding-bottom:1px;
}
div#news h2 {
    padding: 15px 10px 0 10px;
    color:#fff;
}
div#news p {
    margin:5px 10px 5px 10px;
    padding-top:5px;
    color:#ddd;
    font-weight:bold;
    border-bottom:solid 1px #7c0d00;
}
div#news strong {
    padding-left:10px;
    background: url(../images/iconArrow.gif) center left no-repeat;
}
div#news a {
    display: block;
    color:#fff;
    margin-bottom: 10px;
    text-decoration:none;
    font-weight:normal;
    padding-left:10px;
}
div#news a:hover {
    text-decoration:underline;
}  
        
/*
 *      SIDEBAR 
 *
 */

div#sidebar {
    float: left;
    width: 200px;
    margin-right: 0px;
}
div#relate {
    margin:10px 0 0 0;
    padding: 10px;
    background: #e8e8e8;
}
div#relate h2 {
    font-size: 1.2em;      
}
div#relate p {
    margin: 0;
}
div#relate a {
    margin: 0;
}
p#pageTools {
    margin-top:10px;
}

/*
 *      FOOTER
 *
 */

div#footer {
    width: 769px;
    border-top: solid 10px #990000;
    margin-top: 20px;
    padding-top:5px;
}
div#footer strong {
    margin:0 5px 0 15px; 
    line-height:1.6em;
}
/*
 *      PRODUCTION
 *
 */

div#production {	
    text-align:right;
}

/* for understanding browsers */
.hojd {
	min-height:140px; 
	height:auto;
}
/* for Internet Explorer */

* html .hojd {
	height: 140px;
}