/****************************************************
* © Copyright 2009 Space Logistics AB
*
* Written by Tobias Åhlin
*
* Please contact Space Logistics AB in case
* you want to use this style sheet or has
* any questions about it.
*
* http://www.space-logistics.com
*
*****************************************************/

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

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

.background   /* defines the total size of the page (1200px) */
{
    
    position:relative; 
    clear:both;
    width:1200px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden; 
    background-position:right 240px;
    background-repeat:no-repeat;
    vertical-align:top;
}

/* define background image depending on page. call for the appropriate class when you call for .background */

.bgHome     
{
    background-image:url('images/symbol_hem.gif');
}

.bgLogistics
{
    background-image:url('images/symbol_space.gif');
}

.bgServices
{
    background-image:url('images/symbol_logistik.gif');
}

.bgQuality
{
    background-image:url('images/symbol_kvalitet.gif');
}

.bgContact
{
    background-image:url('images/symbol_kontakt.gif');
}

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


.menu_pane   /* left column holding menu and bottom menu (flags) */
{
    width:286px;
    min-height:500px;
    float:left;
    position:absolute;
    top:160px;  /* total of .content top and .top top */
    height:100%;
    /*background-color:#d1ffff;*/
}


.bmenu_pane   /* bottom menu pane holding language flags */
{
    width:100%;
    height:60%;
    overflow:hidden;
    position:relative;
    float:left;
}

.bmenu_bg   /* Should be called at the same time as .bmenu_pane when the page is long */
{
    background:url('images/symbol_space_sv.gif');
    background-position:left 75%;
    background-repeat:no-repeat; 
}

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

.listboxWrapper 
{
    width:100%;
    float:left;
}
.listbox
{
    width:33%;
    display:list-item;
    overflow:hidden;
    float:left;
    line-height:1.7;
    font-size:0.9em;
}

.top   /* page header box */
{
    width:594px;
    position:relative;
    right:214px;*/
    float:left;
    left:271px;
    vertical-align:top;
    height:61px;
    top:100px;
    overflow:hidden;
}

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

.address, .copyright
{
    position:relative;
    vertical-align:top;
    height:auto;
}

.address
{
    width:380px;
    float:left;
}

.copyright
{
    width:250px;
    float:right;
    text-align:right;
}

/***********************************************
*
* 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.
*
************************************************/

/***************
* swedish menu
****************/

.menu #hem a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla.gif') 0 0 no-repeat;
    text-decoration: none;
}

.menu #hem a:hover, a:active
{	
    background-position: -286px 0;
}

.menu #logistics a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla.gif') 0 -80px no-repeat;
    text-decoration: none;
}

.menu #logistics a:hover, a:active  
{	
    background-position: -286px -80px;
}

.menu #logistiktj a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla.gif') 0 -160px no-repeat;
    text-decoration: none;
}

.menu #logistiktj a:hover, a:active 
{	
    background-position: -286px -160px;
}

.menu #kvalitet a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla.gif') 0 -240px no-repeat;
    text-decoration: none;
}

.menu #kvalitet a:hover, a:active 
{	
    background-position: -286px -240px;
}

.menu #kontakt a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla.gif') 0 -320px no-repeat;
    text-decoration: none;
}

.menu #kontakt a:hover, a:active  
{	
    background-position: -286px -320px;
}

/***************
* english menu
****************/

.menu #home a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla_en.gif') 0 0 no-repeat;
    text-decoration: none;
}

.menu #home a:hover, a:active
{	
    background-position: -286px 0;
}

.menu #logistics_en a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla_en.gif') 0 -80px no-repeat;
    text-decoration: none;
}

.menu #logistics_en a:hover, a:active  
{	
    background-position: -286px -80px;
}

.menu #services a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla_en.gif') 0 -160px no-repeat;
    text-decoration: none;
}

.menu #services a:hover, a:active 
{	
    background-position: -286px -160px;
}

.menu #quality a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla_en.gif') 0 -240px no-repeat;
    text-decoration: none;
}

.menu #quality a:hover, a:active 
{	
    background-position: -286px -240px;
}

.menu #contact a 
{
    display:block;
    width:286px;
    height:80px;
    background: url('images/alla_en.gif') 0 -320px no-repeat;
    text-decoration: none;
}

.menu #contact a:hover, a:active  
{	
    background-position: -286px -320px;
}

/***********************************************
*
* Bottom menu with flags for language change
*
************************************************/

.flag
{
    width:65px;  /* Change this value to change the distance between the flags */
    padding-left:0.8em;
    position:relative;
    overflow:hidden;
    height:auto;
    float:left;
}

.flag #swedish a 
{
    display:block;
    float:left;
    width:55px;
    height:34px;
    background: url('images/alla.gif') -10px -430px no-repeat;
    text-decoration: none;
}

.flag #swedish a:hover, a:active  
{	
    background-position: -296px -430px;
}

.flag #english a 
{
    display:block;
    float:left;
    width:55px;
    height:34px;
    background: url('images/alla.gif') -85px -430px no-repeat;
    text-decoration: none;
}

.flag #english a:hover, a:active  
{	
    background-position: -371px -430px;
}


/***********************************************
*
* Text, tables, fonts and shite
*
************************************************/

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

.header
{
    z-index:1;
    border:0px;
    width:auto;
    float:left;
    vertical-align:top;
    padding-left:10px;
}

img
{
    border:0px;
}

img #header
{
    z-index:1;
    vertical-align:top;
}

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

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

h3
{
    font-size:1em;
    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.75em;*/
    font-size:0.7em;
    line-height:1.5;
}

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

table.rightalign
{
     position:absolute;
     right:0em;
     width:200px;
     bottom:1em;
}

table.rightalign tr
{
    text-align:right;
    vertical-align:top;
}

table.contact
{
    width:100%;
}

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

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

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