/****************************************************
* © Copyright 2010 Space Production AB
*
* Written by Tobias Åhlin
*
* Please contact Space Production AB in case
* you want to use this style sheet or has
* any questions about it.
*
* http://www.spaceproduction.se
*
*****************************************************/

/****************************************************
* Layout
*****************************************************/
html
{
    overflow: scroll;
}

body
{
    background-color:White;
    font-family:Interstate, Verdana, Arial, Helvetica, Sans-Serif;
    font-size:0.8em; 
    font-style:normal;
    letter-spacing:0px;
    color:#666666;  
}

.background   /* defines the total size of the page (960px) */
{
    
    position:relative; 
    clear:both;
    width:960px;
    height:99%;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden; 
}

.main  /* box containing the actual 'active' page = menu + content */
{
    width:960px;
    top:1em;
    position:relative;
    clear:both;
    overflow:hidden;
    float:left;
    background-image:url('images/Background.jpg');
    background-repeat:no-repeat;
    background-position:left top;
    margin-right:auto;
    margin-bottom:auto;
    height:100%;    
}


.menu_pane   /* left column holding menu and _bgpanes */
{
    width:283px;
    min-height:500px;
    float:left;
    position:absolute;
    top:140px;  /* total of .content top and .header top */
    height:90%;
}

.read_more_holder /*container for logo banner*/
{
	width:510px;
	height:53px;
	float:left;
	position:relative;
	overflow:hidden;
}

.partner_list_holder /*container for partner logos with external links*/
{
	width:510px;
	height:210px;
	float:left;
	position:relative;
	overflow:hidden;
}

.read_more_content
{
	width:510px;
	min-height:100px;
	float:left;
	height:auto;
	position:relative;
	overflow:hidden;
}

.about_bgpane   /* just a div to hold the background image  */
{
    width:100%;
    height:60%;
    overflow:hidden;
    position:relative;
    float:left;
	background:url('images/about-us_dekor_grey.jpg'); 
    background-position:left 50%;
    background-repeat:no-repeat; 
}

.news_bgpane   /* just a div to hold the background image */
{
    width:100%;
    height:60%;
    overflow:hidden;
    position:relative;
    float:left;
	background:url('images/news_dekor_grey.gif'); 
    background-position:left 95%;
    background-repeat:no-repeat; 
}

.content   /* right column holding all text and information */
{
    width:510px;  
    top:120px;         /*you need to change marginal-bottom accordingly to display all text*/
    float:right;
	right:167px;
    position:relative;
    min-height:560px;
    height:100%;
    margin-bottom:120px;
    overflow:hidden;
}

.header  /* page header box */
{
    width:510px;
    position:absolute;
    float:left;
    left:283px;  /* Same width as MENU_PANE*/
    vertical-align:top;
    height:30px;
    top:85px;
    overflow:hidden;
}



.bottom  /* page footer box */
{
    width:510px;  
    position:relative;
    float:right;
	right:167px;
    height:auto;
    vertical-align:bottom;
    padding-bottom:40px;
    overflow:hidden;
}

/***********************************************
*
* MENU: No script required. Only using one
* background image with all menu states, 
* display:block and different coordinates.
*
* By shifting focus in the image you can limit
* the number of files downloaded by the browser
* and display the page quicker.
*
************************************************/

/***************
* menu
****************/

#menu_list{position:relative;}
#menu_list li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#menu_list li, #menu_list a{width:250px;height:68px;display:block;}

#home{top:0px;width:250px;}
#home{background:url('images/meny_black_grey.gif') 0 0;}
#home a:hover{background:url('images/meny_black_grey.gif') -250px 0;}

#about{top:68px;width:250px;}
#about{background:url('images/meny_black_grey.gif') 0 -68px;}
#about a:hover{background: url('images/meny_black_grey.gif') -250px -68px;}

#products{top:136px;width:250px;}
#products{background:url('images/meny_black_grey.gif') 0 -136px;}
#products a:hover{background: url('images/meny_black_grey.gif') -250px -136px;}

#media{top:204px;width:250px;}
#media{background:url('images/meny_black_grey.gif') 0 -204px;}
#media a:hover{background: url('images/meny_black_grey.gif') -250px -204px;}

#contact{top:272px;width:250px;}
#contact{background:url('images/meny_black_grey.gif') 0 -272px;}
#contact a:hover{background: url('images/meny_black_grey.gif') -250px -272px;}


/***************
* read more menu
****************/

#read_more_list{position:relative;}
#read_more_list li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#read_more_list li, #read_more_list a{height:53px;display:block;}

#meyer{left:0px;width:55px;}
#meyer{background:url('images/Products_logobanner_alt5.jpg') 0 0;}
#meyer a:hover{background:url('images/Products_logobanner_alt5.jpg') 0 -49px;}

#aviom{left:55px;width:55px;}
#aviom{background:url('images/Products_logobanner_alt5.jpg') -55px 0;}
#aviom a:hover{background: url('images/Products_logobanner_alt5.jpg') -55px -49px;}

#xta{left:110px;width:55px;}
#xta{background:url('images/Products_logobanner_alt5.jpg') -110px 0;}
#xta a:hover{background: url('images/Products_logobanner_alt5.jpg') -110px -49px;}

#apb{left:166px;width:55px;}
#apb{background:url('images/Products_logobanner_alt5.jpg') -166px 0;}
#apb a:hover{background: url('images/Products_logobanner_alt5.jpg') -166px -49px;}

#proco{left:222px;width:67px;}
#proco{background:url('images/Products_logobanner_alt5.jpg') -222px 0;}
#proco a:hover{background: url('images/Products_logobanner_alt5.jpg') -222px -49px;}

#momentum{left:282px;width:55px;}
#momentum{background:url('images/Products_logobanner_alt5.jpg') -282px 0;}
#momentum a:hover{background: url('images/Products_logobanner_alt5.jpg') -282px -49px;}

#milab{left:337px;width:60px;}
#milab{background:url('images/Products_logobanner_alt5.jpg') -337px 0;}
#milab a:hover{background: url('images/Products_logobanner_alt5.jpg') -337px -49px;}

#surgex{left:398px;width:55px;}
#surgex{background:url('images/Products_logobanner_alt5.jpg') -398px 0;}
#surgex a:hover{background: url('images/Products_logobanner_alt5.jpg') -398px -50px;}

#timax{left:455px;width:63px;}
#timax{background:url('images/Products_logobanner_alt5.jpg') -455px 0;}
#timax a:hover{background: url('images/Products_logobanner_alt5.jpg') -455px -49px;}

/***************
* Partner links
****************/

#partner_list{position:relative;}
#partner_list li{display:block;margin:0;padding:0;list-style:none;position:absolute;}
#partnerlist li, #partner_list a{height:68px;display:block;}

#pmeyer{left:0px;width:170px;}
#pmeyer{background:url('images/Welcome_dekor_100623.jpg') 0 0;}

#paviom{left:170px;width:170px;}
#paviom{background:url('images/Welcome_dekor_100623.jpg') -170px 0;}

#pxta{left:340px;width:170px;}
#pxta{background:url('images/Welcome_dekor_100623.jpg') -340px 0;}

#papb{top:68px;left:0px;width:170px;}
#papb{background:url('images/Welcome_dekor_100623.jpg') 0 -68px;}

#pproco{top:68px;left:170px;width:170px;}
#pproco{background:url('images/Welcome_dekor_100623.jpg') -170px -68px;}

#pmomentum{top:68px;left:340px;width:170px;}
#pmomentum{background:url('images/Welcome_dekor_100623.jpg') -340px -68px;}

#pmilab{top:134px;left:0px;width:170px;}
#pmilab{background:url('images/Welcome_dekor_100623.jpg') 0 -134px;}

#psurgex{top:134px;left:170px;width:170px;}
#psurgex{background:url('images/Welcome_dekor_100623.jpg') -170px -134px;}

#ptimax{top:134px;left:340px;width:170px;}
#ptimax{background:url('images/Welcome_dekor_100623.jpg') -340px -134px;}


/***********************************************
*
* Text, tables, fonts and shite
*
************************************************/
.hr {
	height:15px;
	width:510px;
	float:left;
	position:relative;
	overflow:hidden;
}

hr       /* need to set both background-color and color to display correctly in all browsers */
{
    background-color:#CC0033;
    color:#CC0033;
    width:100%;
    height:1px;
    border:0px;
}

img
{
    border:0px;
}

h1
{
    font-size:0.98em;
    margin-top:0em;
}

h2
{
    font-size:0.98em;
    margin-bottom:3px;
}

h3
{
    font-size:0.98em;
    margin-bottom:2px;    
}

ul
{
    list-style-position:inside;
    padding:0px;
    margin:0px;
}

li
{
    list-style-type:disc;
}

p
{
    line-height:1.7;
}

p.right
{
    text-align:right;
}

p.footer
{
    font-size:0.8em;
    line-height:1.5;
	color:black;
}

p.copyright
{
    text-align:right;
    vertical-align:top;
}

table.contact
{
    width:100%;
}

table.contact th
{
    width:230px;
    text-align:left;
}

table.contact td
{
	width:126px;
}

table.contact td.right
{
	text-align:right;
	padding-right:1em;
}

table.contact td.email
{
	width:18px;
}

a 
{
    color:gray;
    text-decoration:none;
}

a:hover 
{
    color:black;
    text-decoration:underline;
}