/* *** Default's *** */
*{
    margin: 0; /* css reset, consider Eric Meyer’s CSS Reset */
    padding: 0; /* css reset, consider Eric Meyer’s CSS Reset */
}
html
{   
    width: 100%; /* make the document 100% */
    height: 100%; /* make the document 100% */
    font-size: 10%; /**/
}
body
{  
    width: 100%; /* make the body 100% of the document */
    height: 100%; /* make the body 100% of the document */
    /*font: 10em; /**/
}
td
{
    text-align: center; /**/
    vertical-align: middle; /**/
    /*border: 1px solid black; /* for test purpose only */
}
h1
{
    font-size: 40em; /**/
}
h2
{
    font-size: 30em; /**/
}
br
{
    font-size: 4em;
    border: 1px solid black; /* for test purpose only */
}
a:link img, a:visited img
{
    border: none; /**/
}
a:hover img
{
    border: none; /**/
}
/* ### ID's ### */
#form1
{
    height: 100%; /**/
    width: 100%; /**/
    /*font: 10em; /**/
}
#top            /* make top div 100% wide and 30% high*/
{
    width: 100%; /**/
    height: 30%; /**/
    max-height: 30%; /**/
}
#top div        /* all divs in top div */
{
    position: relative; /* position elements to make z-index work */
    float: left; /**/
    height: 100%; /**/
}
#top div table tr td *      /* all elements ... in all divs in top div */
{
    /*margin-top: -10%; /**/
}
#topLeft        /**/
{
    width: 38%; /**/
    z-index: 10; /**/
}
#topCenter
{
    width: 24%; /**/
    z-index: 50; /**/
}
#topRight
{
    width: 38%; /**/
    z-index: 10; /**/
}
#middle
{
    /*clear: both; /**/
    width: 100%; /**/
    height: 40%; /**/
    max-height: 40%; /**/
}
#middle div        /* all divs in middle div */
{
    position: relative; /* position elements to make z-index work */
    float: left; /**/
    height: 100%; /**/
}
#middleLeft
{
    width: 27%; /**/
    z-index: 20; /**/
}
#middleCenter
{
    width: 46%; /**/
    z-index: 30; /**/
}
#middleRight
{
    width: 27%; /**/
    z-index: 20; /**/
}
#middleLeft table tr td img, #middleRight table tr td img /* all img elements ... in left, right divs in middle div */
{
    /*margin-top: -6%; /**/
}
#bottom
{
    width: 100%; /**/
    height: 30%; /**/
    max-height: 30%; /**/
}
#bottom div        /* all divs in bottom div */
{
    position: relative; /* position elements to make z-index work */
    float: left; /**/
    height: 100%; /**/
    /*overflow: hidden; /**/
}
#bottomLeft
{
    width: 35%; /**/
    z-index: 10; /**/
}
#bottomCenter
{
    width: 30%; /**/
    z-index: 50; /**/
}
#bottomRight
{
    width: 35%; /**/
    z-index: 10; /**/
}
/* ... Class's ... */
.tableFullSize
{
    width: 100%; /**/
    height: 100%; /**/
    /*vertical-align: middle; /**/
    /*border: 2px solid Black;  /* for test purpose only */
}
.imgAlignLeft
{
    text-align: left; /**/
}
.imgAlignRight
{
    text-align: Right; /**/
}
.imgAlignBottom
{
    vertical-align: bottom; /**/
}
.imgAlignTop
{
    vertical-align: top; /**/
}


/* Localization */
.english
{
    /*display: list-item; /* */
}
.swedish
{
    display: none; /* */
}



/* ***** css for the menu system ***** */

#menuWrapper-div /* make wrapper that covers the viewport */
{
    position: absolute; /**/
    left: 0px; /**/
    top: 0%; /**/
    width: 99.6%; /**/
    height: 99.6%; /**/
    /* border: 1px solid Black; /* for test purpose only */
    z-index: 2000; /**/
}
/**** menu 1 ****/
#menu1HotArea
{
    position: absolute; /**/
    left: 30%; /**/
    top: 50%; /**/
    width: 30%; /**/
    height: 50%; /**/
    margin-left: -15%; /* minus half the width */
    margin-top: -25%; /* -Half height, has bad effect, look for corresponding "fixCssMarginTop" function in javascript */
    z-index: 3000; /**/
    background-image: url(/Images/menu_system/transparent50x50.gif); /* this is for IE */
    background-repeat: repeat;  /* this is for IE */
    /*border: 1px solid Green; /* for test purpose only */
}
#menu1HotSpot
{
    position: relative; /**/
    width: auto; /**/
    height: auto; /**/
    margin: auto; /**/
    /*border: 1px solid Black; /* for test purpose only */
}
#menu1HotSpotImg
{
    /*width: 30px; /**/
    /*height: 30px; /**/
    display: none; /**/
}
#menu1-div
{
    position: absolute; /**/
    left: 10%; /**/
    top: 10%; /**/
    width: 220px; /**/
    height: auto; /**/
    font-size: 10em; /**/
    background-color: #221100; /* offblack */
    background-color: rgba(0,0,0,0.6); /* black 40% transparent */
    display: none; /**/
    z-index: 8020; /**/
    
    /*background: transparent; /**/
	/*-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)'; /* IE8 */
    /*xfxixlxtxexr: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";   /* IE6 & 7 */
    /*zoom: 1; /* IE6 */
    
}
#X{}

/**** menu 2 ****/
#menu2HotArea
{
    position: absolute; /**/
    left: 70%; /**/
    top: 50%; /**/
    width: 30%; /**/
    height: 50%; /**/
    margin-left: -15%; /* minus half the width */
    margin-top: -25%; /* -Half the height, has bad effect, look for corresponding "fixCssMarginTop" function in javascript */
    z-index: 3000; /**/
    background-image: url(/Images/menu_system/transparent50x50.gif); /* this is for IE */
    background-repeat: repeat;  /* this is for IE */
    /*display: none; /**/
}
#menu2HotSpot
{
    position: relative; /**/
    width: auto; /**/
    height: auto; /**/
    margin: auto; /**/
    /*border: 1px solid Black; /* for test purpose only */
}
#menu2HotSpotImg
{
    /*width: 30px; /**/
    /*height: 30px; /**/
    display: none; /**/
}
#menu2TextDiv
{
    position: absolute; /**/
    left: 70%; /**/
    top: 10%; /**/
    width: 220px; /**/
    height: auto; /**/
    font-size: 10em; /**/
    background-color: #221100; /* offblack */
    background-color: rgba(0,0,0,0.6); /* black, 40% transparent */
    
    /*background: transparent; /**/
	/*ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"; /* IE8 */
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);   /* IE6 & 7 */
    /*zoom: 1; /* IE6 */
    /*background-color: rgba(0,0,0,0.6); /* black, 40% transparent */
    display: none; /**/
    z-index: 3020; /**/
}
#menu2LinkList
{
    list-style-type: disc; /**/
    font-size: inherit; /**/
    padding-left: 20px; /**/
    color: White; /**/
}
#menuLanguageHotArea
{
    position: absolute; /**/
    left: 50%; /**/
    top: 0%; /**/
    width: 30%; /**/
    height: 15%; /**/
    margin-left: -15%; /* minus half the width */
    /*margin-top: -25%; /* -Half height, has bad effect, look for corresponding "fixCssMarginTop" function in javascript */
    background-image: url(/Images/menu_system/transparent50x50.gif); /* this is for IE */
    background-repeat: repeat;  /* this is for IE */
    z-index: 3000; /**/
    /*border: 1px solid black; /* for test purpose only */
}
#menuLanguageImgDiv
{
    position: relative; /**/
    top: 0px; /**/
    margin-top: 6px; /* -36px hidden, 6px visible */
    /*display: none; /**/
    text-align: center;
    font-size: 10em; /**/
    /*border: 1px solid black; /* for test purpose only */
}
#menuLanguageDiv
{
    position: absolute; /**/
    left: 0%; /**/
    top: 0%; /**/
    width: 30%; /**/
    height: 50%; /**/ 
}
#menuLanguageDiv a
{
    font-size: 14em; /**/
}
/* ... Class's ... */
.center
{
    text-align: center;
}
.flagsImg
{
    width: 32px; /**/
    height: 31px; /**/
    
}
.transPng
{
    background: transparent; /**/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
	zoom: 1; /* IE6 */
	/* need these errors to get transparent png's in IE, sorry! */
}
.menuBorderDiv
{
    font-size: inherit; /**/
    height: auto; /**/
    margin: 5px; /**/
    padding: 7px 10px 7px 10px; /**/
    border: 1px solid White; /**/
}
.menuParagraph
{
    font-size: inherit; /**/
    color: White; /**/
    line-height: 1.1;
}
.menu-divider
{
    width: 80%; /**/
    height: 0px; /**/
    margin: 18px 10% 16px 10%; /**/
    background-color: White; /**/
    border-style: solid; /**/
    border-color: White; /**/
    border-width: 1px 0px 0px 0px; /**/
}
.menuLinkList
{
    list-style-type: disc; /**/
    font-size: inherit; /**/
    /*padding-left: 20px; /**/
    margin-left: 15px; /**/
    color: White; /**/
}

.menuLinkList li a, .menuParagraph a
{
    color: Silver;
}
.menuLinkList li ul
{
    list-style-type: circle; /**/
    font-size: inherit; /**/
    /*padding-left: 20px; /**/
    margin-left: 20px; /**/
    color: White; /**/
}