@import url(color.css);

* {
   font-family: Arial, Helvetica, sans-serif;
}

html, body {
   margin: 0; padding: 0;
   
   color: black;
//   overflow: auto; /** makes scrollbar invisible if not needed (ie hack) */
   
   background-color: white;
}

#Loading {
    position: absolute;

    z-index: 100;

    top: 40%;
    left: 0; right: 0;

    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
    padding: 2px;

    text-align: center;
    font-size: 10pt;
    font-family: monospace;
    font-weight: bold;
    color: black;

    background: #F2F2F2 url(img/layout/loading.gif) repeat;

    filter: alpha(opacity=70, style=0);
   -moz-opacity: 0.7;
}

#Logo {
   position: absolute;

   top: 0; 
   left: 0; right: 0;

   background-color: #333333;
   height: 88px;

   background-image: url(img/layout/logo.gif);
   background-position: 20px 5px;
   background-repeat: no-repeat;
}


#TopMenu {
   position: absolute;
   left: 0; top: 50px;

   line-height: 15px;
   padding-top: 5px;
   height: 25px;
   width: 666px;

   margin: 0;
   padding-left: 23px;
   vertical-align: bottom;
//   background-color: #333333;

}

#TopMenu a {
   float: left;
   
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;

   margin-right: 2px;
   padding-right: 10px;
   padding-left: 3px;
   padding-top: 2px;
   padding-bottom: 2px;
   
}

#TopMenu a:hover {
   float: left;
   
   border-top: 1px solid #F2F2F2;
   border-right: 1px solid #F2F2F2;   
}


#LangMenu {
	position: absolute;
	
	left: 680px;
	top: 1px;
		
	z-index: 10;
}

#LangMenu a {
	display: block;
	
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;		
}

#LangMenu a:hover {
   border-top-color: #F2F2F2;
   border-bottom-color: #F2F2F2;   
}

.topLinks a:link,
.topLinks a:hover,
.topLinks a:visited {
   font-size: 10pt;
   font-weight: bold;
   color: white;
}

.topLinks a:hover,
.topLinks a.active {
   background-position: bottom right;
   background-repeat: no-repeat;
}

.topLinks a:hover,
.topLinks a:hover.active
{
   text-decoration: none;
   background-color: #999999;
}

.topLinks a.active,
.topLinks a:hover.active {
   background-color: #F2F2F2;
   color: #333333;
}

#TopMenu #Logout {
	float: right !important;
}

#TopBar {
   position: absolute;

   top: 75px;
   left: 0; right: 0;

   height: 20px;

   border-left: 23px solid #333333;
   border-bottom: 2px solid #333333;

   background-color: #F2F2F2;
/*   background: #F2F2F2 url(img/layout/slogan.gif) no-repeat right; */

   text-align: right;
   color: #333333;
   letter-spacing: 3px;
}

#TopSpacer {
	
   position: absolute;

   top: 97px;
   left: 0; right: 18px;

   z-index: 20;
   
   height: 15px;

   background-image: url(img/layout/top.png);
   background-repeat: repeat-x;

}

#MenuContainer
{
	z-index: 50;
	
	position: absolute;
	left: 0; top: 95px;
	bottom: 0; width: 208px;
	
   background-color: #F2F2F2;
	border-left: 23px solid #333333;	
	border-right: 2px solid #333333;

	overflow: visible;
}

#Menu {
   width: 205px;

   vertical-align: top;

   padding-top: 2px;
   padding-left: 5px;
   padding-bottom: 10px;
   padding-right: 0;

   font-size: 10pt;
}

#LeftSpacer {
   position: absolute;

   top: 97px;
   left: 233px;
   bottom: 18px;
   
   z-index: 20;
   
   width: 15px;

   background-image: url(img/layout/left.png);
   background-repeat: repeat-y;
}

#Content {

	position: absolute;
	
   top: 97px;
   left: 233px;
   right: 0px;
   bottom: 0px;
	
	overflow: auto;
	
	z-index: 10;
	
   vertical-align: top;

   /*
   padding-left: 248px;
   */

   padding-left: 15px;
   padding-top: 15px;
   padding-right: 15px;
   padding-bottom: 15px;
}

/** used for static-texts not to be to long */
#Text {
 width: 550px;
 padding: 0;
}

#Error {
   position: absolute;

   top: 97px;
   left: 233px;

   background-color: white;

   padding-top: 20px;
   padding-left: 20px;
   padding-bottom: 20px;
}

#Title {
   font-size: 12pt;
   font-weight: bold;

	padding: 0;
	margin: 0;

   border-bottom-width: 2px;
   border-bottom-style: solid;

   padding-bottom: 2px;
   margin-bottom: 14px;
}

#Footer {
	z-index: 10;
	
	position: fixed;
	left: 0; bottom: 0;
	
   line-height: 1px;
   height: 14px;

   width: 208px;

   background-color: #F2F2F2;
   background-position: bottom right;
   background-repeat: no-repeat;

   border-left: 23px solid #333333;
   border-right: 2px solid #333333;
   border-bottom: 2px solid #333333;
}


/** menu control */

.menu .menu,
.menu .active_menu {
   margin-left: 10px;
   margin-top: 4px;
   margin-bottom: 7px;
}

.menu a,
.active_menu a {
   display: block;

   padding-left: 8px;
   margin-right: 3px;
   margin-bottom: 1px;

   background-image: url(img/layout/bullet.gif);
   background-position: left center;
   background-repeat: no-repeat;

   color: black !important;
   border: 1px solid #F2F2F2;
}

.menu a.active,
.active_menu a.active {
   background-image: url(img/layout/bullet_down.gif);
   background-color: white;
}

.menu a.active:hover {
  background-color: white;
}

.active_menu a.selected,
.menu a:hover {
   background-image: url(img/layout/bullet_active.gif);
}

.menu a:hover,
.active_menu a:hover {
   text-decoration: none;
   margin-right: 0;

   background-color: #F2F2F2;

   border: 1px solid #333333;
   border-right: none;
}

.active_menu a.selected {
   background-image: url(img/layout/bullet_active.gif);

   margin-right: 0;
   background-color: white;

   border: 1px solid #333333;
   border-right: none;
}

.active_menu .spacer {
   line-height: 4px;
   height: 4px;
}