@import url("reset.css");

/* ----- INFO ----------------------------------------------------------------
  Strateg Interactive
  www.strateg.se
  
  Last updated: 2008-03-04
  Last updated by: Jimmy Hansson
--------------------------------------------------------------------------- */

/* ----- CONTENTS ------------------------------------------------------------

1: BODY AND UNIVERSAL RESET
2: TOP
	a) Header
	b) Main navigation
3: MAIN CONTENT
	a) Containers
	b) Typography
	c) Navigation elements
	d) Lists
	e) Forms
	f) Comments
4: BOTTOM
	d) Bottom navigation
	e) Footer
5: IMAGES
6: TABLES
7: GENERAL SELECTORS
	a) Links
	b) Typography
6: MISC
	
---------------------------------------------------------------------------- */

/* 1: BODY AND UNIVERSAL RESET
============================================================================ */

body {
    padding:0;
    color:#000;
    font-family: Times, "Times New Roman", serif;
    font-size: 11pt;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.floatLeft { display: inline; float: left; }
.floatRight  { display: inline; float: right; }

p { margin-bottom: 1.8em; line-height: 1.8em; }

small { color: #000; font-size: 1.2em;}
h1 { font-size: 24pt; font-weight: normal; margin: 5px 0; color: #000;}
h2 { font-size: 14pt; font-weight: bold; color: #000; margin: 5px 0;}
h3 { font-size: 14pt; font-weight: bold; color: #444; margin: 3px 0;}
h4 { font-size: 24pt; font-weight: normal; color: #000; margin: 3px 0; }

h4.blackBorder { border-bottom: solid 1px #5a5a5a; }

/*h1, h2, h3, h4 { font-family:Arial, Verdana, Helvetica, sans-serif; }*/



/* 2: TOP
============================================================================ 
    a) Header								  
--------------------------------------------------------------------------*/

#header {
    height: 100px;
    padding: 0 6px;
}

#headTop img.floatRight { display: none; }

/*--------------------------------------------------------------------------
    b) Main Navigation								  
--------------------------------------------------------------------------*/

#navbar {display:none;}


/* 3: MAIN CONTENT
============================================================================ 
    a) Containers								  
--------------------------------------------------------------------------*/

#container {
    text-align: left;
    margin: 0;
    width: 949px;
}

#content {
    padding: 0;
}

#flashContainer { width: 919px; height: 256px; }

.infoBox {
    float: left;
    width: 306px;
    min-height: 220px;
    padding-bottom: 20px;
}
.borders { border-left: dashed 1px #d5d5d5; border-right: dashed 1px #d5d5d5; }

#mainContent {
    width: 100%;
}

#productContainer { padding: 0 20px 0;}

#productInfo {
    float: left;
    display: inline;
    width: 49%;/*350px;*/
    height: auto !important; /* for modern browsers */
    height: 200px; /* for IE5.x and IE6 */
    min-height: 200px; /* for modern browsers */
    padding-bottom:10px;
}

#productInfo img { display: none; }

#productImageContainer { float: right; display: inline; width: 49%; text-align: center; padding-bottom: 10px;}

#productDetailsLeft,
#productDetailsRight {
    font-size: 11pt;
    margin-top: 18px;
    padding-left: 8px;
    float: left;
    width: 48%;/*344px;*/
    min-height: 300px; /* development only */
    display: inline;
}
#productDetailsLeft { float: right; border-left: solid 1px #777; display: inline; }

*html #productDetailsLeft { padding-left: 4px;}

#productsGeneral {
    padding: 20px 10px;
    width: 680px;
}
#productsGeneralLeft,
#subpageLeftColumn {
    width: 402px;
    margin: 18px 0 0 0;
    padding: 0 8px;
    float: left;
}
#subpageLeftColumn { margin: 0; padding: 0 0 0 20px; width: 422px; }

#productsGeneralRight,
#subpageRightColumn {
    width: 285px;
    margin: 18px 0 0 0;
    padding-left: 8px;
    float: right;
    border-left: solid 1px #ccd5de;
}
#productsGeneralRight { border: none; }
#subpageRightColumn { width: 210px; border: none; text-align: right; padding-right: 30px; }

#infomessage { margin: 10px; padding: 20px; text-align: center; border: solid 1px #eee; font-size: 1.2em; }

.newsHolder {
    background: url('/images/aktuellt_prick.gif') no-repeat 14px 5px;
    padding: 3px 0 0 35px;
}

#newsContainer { padding: 0 20px; }

#newsArchiveContainer { padding: 0 20px 10px 20px; margin-bottom: 20px; }

#newsItemText {
    float: left;
    width: 450px;
    display: inline;
    /*margin-bottom: 20px;*/
}

.newsArchiveItem { padding: 15px 0; border-top: solid 1px #acacac; height: 18px; }

#contactContent {
    background: url('/images/productinfo_top.gif') repeat-x top left;
    float: right;
    /*width: 713px;*/
    border-top: solid 5px #6b87a3;
    padding-top: 40px;
    display: inline;
}

#contactContainer {
    width: 100%;
    /*margin: 18px 0 0 0;*/
    padding: 0 0 0 14px;
    float: left;
}

.employeeBox, .employeeBoxLeft { background: url('/images/contactinfo_bottom.gif') no-repeat bottom left; float: left; display: inline; width: 180px; padding-bottom: 15px; margin: 0 0px 10px 45px; }

*html .employeeBox {margin-left: 40px;}
/** html .employeeBox { margin-left: 40px; };*/

.employeeBoxLeft { float: left; margin-left: 0; clear: left; }

.employeeInfo { padding: 8px; font-size: 10pt; }

.upphangningCaption { background: #dae6f1 url('/images/upphangning_type_bg.gif') repeat-x top left; padding: 5px 0 0 5px; height: 20px; font-size: 1.2em; margin: 8px 0 5px; }

.upphangningCaptionExtra span { display: block; background: #dae6f1 url('/images/upphangning_type_bg.gif') repeat-x top left; padding: 5px 0 0 5px; height: 20px; font-size: 1.2em; margin: 16px 0 8px; }

.upphangningItemInfo { padding: 3px; }

#productlistImages { margin-top: 10px; padding: 0 0 10px; }

.subProductItem { background: url('/images/subproductstop.gif') repeat-x top left; padding: 12px 0; }

.subProductInfo { float: left; display: inline; padding-left: 10px; width: 490px; }
.subProductInfo p { padding-bottom: 0; margin-bottom: 0;}



/*--------------------------------------------------------------------------
    b) Typography							  
--------------------------------------------------------------------------*/

.infoBox p { padding: 0 8px; }
.infoBox a.readmore { display: block;  text-align: right; font-weight: bold; padding-right: 10px; }

.newsdate { color: #848484; font-size: 1.2em; }
.newsHolder a { font-size: 1.2em; }

#newsContainer small { display: block; padding-bottom: 3px; }

#newsItemText a { font-size: 1.2em; }

.newsArchiveDateTitle { /*display: inline; float: left; width: 600px;*/ color: #5a5a5a; }
.newsArchiveDateTitle a { font-weight: bold; text-decoration: none; }

.newsArchiveReadMore { float: right; }

.newsArchiveItem { font-size: 12px; }
/*#productInfo p { width: 350px; }*/

label { font-size: 1.2em; font-weight: normal; color: #555; }

.employeeInfo { line-height: 1.6em; }



/*--------------------------------------------------------------------------
    c) Navigation elements							  
--------------------------------------------------------------------------*/

#sidemenu {
    display: none;
}

/* Produktnavigeringen via flikar */
#productTabs {
    display:none;
}

#newsformContainer { width: 200px; }
#newsform { margin: 0; background: none;}
#newsform .uppgift { width: 173px; }

#sidemenu2 #aktuelltMenu { background: none; }
#sidemenu2 #aktuelltMenu li { background: #ececec; float: left; width: 100px; margin: 0; padding: 0; border-top: solid 5px #ccc; border-bottom: solid 1px #e0e0e0; }
#sidemenu2 #aktuelltMenu li.active { background: none; border-top: solid 5px #f08800; border-bottom: none;}
#sidemenu2 #aktuelltMenu li a {
    background: none;
    color: #707070;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}


/*--------------------------------------------------------------------------
    d) Lists							  
--------------------------------------------------------------------------*/

#contactContainer ul { padding: 10px 0; border-bottom: solid 1px #ccd5de; border-top: solid 1px #ccd5de; margin: 10px 0 20px 0; }
#contactContainer ul li { font-size: 12pt; float: left; display: inline; display: block; width: 380px; padding: 0.2em 0; clear: right;}
#contactContainer ul li.left { width: 230px; clear: left;}

#newsContainer li { border: none; }

#subpageLeftColumn ul,
#subpageLeftColumn ul li,
#newsContainer ul,
#newsContainer ul li,
#productDetailsRight ul,
#productDetailsRight ul li,
#productDetailsLeft ul,
#productDetailsLeft ul li { list-style-type: disc; padding: 2px 5px; margin: 3px 5px; font-size: 12px; }
#subpageLeftColumn ul { margin-bottom: 1.8em; }

/*--------------------------------------------------------------------------
    e) Forms							  
--------------------------------------------------------------------------*/
#formContainer { display: none; width: 220px; float: right; display: inline; margin: 32px 22px 0 0;}
*html #formContainer {margin-right: 11px;}
form, #feedback { color: #333; background: #f8f8f8; padding: 10px; margin-top: 10px; width: 210px; }
/*#formContainer form { background: #f8f8f8 url('/images/contactform_top.gif') no-repeat top left; }*/

#feedback { background: #fff; border: solid 1px #ccd5de; }
#feedback h2 { margin-top: 0; font-size: 12px; color: #f08800; text-align: center;}
#feedback p { padding-bottom: 0;}

label {display: block; font-weight: bold; padding: 5px 0 3px 0; height: 15px;}

input, textarea { }

#formContainer #namn,
#formContainer #e-post,
#formContainer #meddelande,
#formContainer #subject {
    width: 200px;
    /*border: 1px solid #9f0a0a;*/
    /*border-bottom: 1px solid #ff5c5a;*/
    /*border-right: 1px solid #ff5c5a;*/
    background: #fff;
    padding: 4px;
}
#subject { width: 212px; }
#meddelande { width: 200px; }

#submit { margin-top:10px;}

/*.error { background-color: #fff; font-weight: bold; color: red;}*/
.error { color: #f00;}
#namn.error, #e-post.error, #meddelande.error { color: #f00; font-weight: normal; border: solid 2px red;  }

#fbwrapper { background-color: #fff; margin-top: 5px; padding: 5px; }


#contactwrapper { padding: 10px 14px 5px 14px; }
#contactwrapper h2 { margin-bottom: 0; }
#contactwrapper p { margin-top: 10px; line-height: 16px; padding: 0 0px; }
*html #contactwrapper {padding-left: 11px;}

.contactphoto { border: 7px solid #730606; margin: 0;}

#newsformContainer { }
#newsform { width: 170px; }
#newsformContainer #feedback { width: 160px; margin-left: 10px; padding-bottom: 6px; }



/* 4: BOTTOM
============================================================================ 
    a) Footer								  
--------------------------------------------------------------------------*/

#footer {
    margin-top: 20px;
    border-top: solid 1px #777;
    padding: 9px 22px 22px 22px;
    text-align: right;
}

#footer span { display: block; color: #000; font-size: 10pt; line-height: 1.7em; padding-top: 6px; float: right;}

*html #footer span { display: block; }

#subFooter { padding-right: 5px; text-align: right; }

#footer img,
#subFooter img { display: none; }

/* 5: IMAGES
==========================================================================*/
.infoBox img { margin: 3px 0 10px 5px; }

.productImage { }

#productlistImages img { margin: 10px; }

.newsImage { float: right; }

.productImage,
#productsGeneralRight img,
.employeeBox img,
.employeeBoxLeft img,
.newsImage,
#productlistImages img.productThumb,
.subProductItem img,
table.upphangningTable img,
#oneMiddleColumn img { padding: 5px; }
#oneMiddleColumn img { border: none; float: right;}

/*#productsGeneralRight img { float: right; }*/

.subProductItem img { float: left; }

#productlistImages img.productThumb { padding: 4px;}

#productlistImages img.material,
#productlistImages img.pdfImage { background: none; border: none; padding: 0; margin: 0 0 3px 0; }

#productlistImages img.material,
#productDetailsRight table table img { border: solid 1px #888; }
/*table.upphangningTable img { border: solid 1px #999; }*/

/* 6: TABLES
==========================================================================*/
table {
    
    /*
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
  */
}

table tr th {
    font-weight: bold;
    border-bottom: solid 1px #000;
}

table tr td {
    border-bottom: solid 1px #777;
    /*border-bottom: solid 1px #ddd; */
    padding: 1em 5px;    
}

/*table tr td span, table tr td p { font-size: 1.2em; }*/

table table { border-bottom: none; border-collapse: separate; border-spacing: 3px;}
table table tr td { border-bottom: none; padding: 0;}
table span, table p, table tr td { line-height: normal; margin: 0px; vertical-align: top; }

table.upphangningTable { border-collapse: separate; border-spacing: 3px;}
table.upphangningTable tr td { /*background: url('/images/upphangning_item_bg.gif') repeat-y top right;*/ border-bottom: solid 5px #fff; padding: 6px; width: 120px;}

/*
#productDetailsRight table tr td,
#productDetailsRight table tr td p { font-size: 11px;}
*/

.materialColor { width: 65px; text-align: center;}
.materialColorTop { width: 65px; text-align: center;}
.materialMaterial { padding-left: 8px; width: 143px; }
.materialMaterialTop { width: 140px;}
.materialArtNrTop { text-align: left;  }
.materialArtnr { text-align: left;  }
.materialTekData { width: 60px; text-align: center;}

.materialColor,
.materialMaterial,
.materialTekData,
.materialArtnr { vertical-align:middle; }



/* 7: GENERAL SELECTORS
============================================================================
    a) Links
--------------------------------------------------------------------------*/
a { color: #22529e; }
a:hover { color: #f08800; }

.pdflink { background: url('/images/pdf_icon.gif') no-repeat left 12px; padding: 20px 35px; }


/* Produktguiden */

#productguideWrapper {
    background: url('/images/productinfo_top.gif') repeat-x top left;
    border-top: solid 5px #6b87a3;
    padding-top: 40px;
}

#produktguideContainer { margin: 0 auto; width: 813px;}
#produktguideContent { background: url('/images/produktguide/bg.gif') repeat-y bottom left; padding-bottom: 30px;  }
#guideform { background: #fff; margin: 0 40px; width: 715px; }

.valContainer,
.valContainerRight { width: 300px; padding-bottom: 20px; float: left; }
.valContainerRight { float: right; }

.valContainer h2,
.valContainerRight h2 { color: #333; border-bottom: solid 3px #f08800; text-transform: uppercase; }

#guideVal { background: #f0f8ff; border: solid 2px #c5d6e8; padding: 10px; margin-bottom: 20px;}
#guideVal h1 { color: #333; margin-bottom: 2px; text-transform: uppercase; }
#guideVal p { margin-bottom: 5px; }
#guideVal #goback { text-align: right; font-size: 11pt; margin-top: 4px; }
#guideVal .stepSpan { font-size: 11pt; color: #f08800; font-weight: bold; padding-right: 5px; }
#guideVal .valSpan { font-size: 11pt; }
#guideVal .row { padding: 7px 0 ; border-bottom: solid 1px #c5d6e8; }

#summaryLeft { width: 350px; float: left;}
#summaryRight { width: 350px; float: right; }
#summaryLeft h1,
#summaryRight h1 { font-size: 16px; font-weight: bold; color: #333; border-bottom: solid 3px #f08800; margin-bottom: 10px; text-transform: uppercase;}
#showProd { margin-top: 20px; padding: 8px 5px; border-top: solid 3px #f08800; text-align: right;}
#showProd a { font-size: 14px; font-weight: bold; text-decoration: none; }
#showProd a:hover { color: #f08800; }

.dittValText a { border:none; font-weight: bold; color: #f08800; padding-bottom: 8px; }
.dittValAreaLeft,
.dittValAreaCenter,
.dittValAreaRight { background: #f0f8ff; border: solid 2px #c5d6e8; border-right: none; border-left: none; padding: 10px; font-weight: bold; }
.dittValAreaLeft {border-left: solid 2px #c5d6e8;}
.dittValAreaRight {border-right: solid 2px #c5d6e8;}


/* Lediga tjänster */

#jobbform { background: #fff; width: 360px; margin: 0; padding: 0; }
#jobbform fieldset { background: #f7fbff; border: solid 2px #6b87a3; padding: 0 10px 10px 10px; }
#jobbform fieldset legend { font-weight: bold; font-size: 16px; padding: 0 5px; color: #799aba; }
#jobbform fieldset input { width: 160px; }
#jobbform fieldset input#cv,
#jobbform fieldset input#brev { width: 330px; }

#jobbform label { color: #4c657f; font-weight: normal; }