/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 0px 0px auto 0px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: #1DA19F;
	/* 50 px height of the footer */
	height: 100px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: table-row;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 100px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	/* position: static; */
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	margin-left: 40%;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 70px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	/* float: right;   */
	margin: 5px 5px 5px 5px;
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	/* position: static; */
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	/* float: right;  */
	/* float: right; */
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 50px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 95%;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	font-size: 70px;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	font-size: 70px;
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: yellow;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 0px 0px auto 0px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: #1DA19F;
	/* 50 px height of the footer */
	height: 100px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: table-row;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 100px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	/* position: static; */
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	margin-left: 40%;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 70px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	/* float: right;   */
	margin: 5px 5px 5px 5px;
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	/* position: static; */
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	/* float: right;  */
	/* float: right; */
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 50px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 95%;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	font-size: 70px;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	font-size: 70px;
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: blue;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: white;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: green;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
	/* Styles */
	 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: brown;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 20px 20px auto 20px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: silver;
	/* 50 px height of the footer */
	height: 50px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: block;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 50px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	position: static;
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 22px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	float: right; 
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	position: static;
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	content: ".";
	visibility: hidden;
	clear: both;
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	float: left; 
	
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 200px;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}

/* iPhone 4 / sony xperia ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
 /* ************************************* */
  /* **** base properties ***** */
  /* ************************************* */
  html
  {
	/* start at 0 - as different browsers have different defaults */
	padding: 0;
	margin: 0;
	
	/* we want to have 100% height and width */
	height: 100%;
	width: 100%;
  }
  
  body
  {
	/* 
		we want to have a 20px space around our page wrapper 
		therefore also no width setting here!!
	*/
	margin: 0px 0px auto 0px;
	
	/* we want to have 100% height */
	min-height: 100%;
	height: 100%;
	
	/* background color */
	background-color: silver;
  }
  
  /* ************************************* 
	 page wrapper which contains the complete
	 page. It presents a table with two rows
		* INETGW_PAGE_CL
		* INETGW_FOOTER
     ************************************* */
  .INETGW_PAGE_WRAPPER_CL
  {
	/* default */
 	position: static; 
 	
 	/* display as table */
 	display: table;

	/* table to fill complete page */
	height: 100%;
	min-height: 100%;			 
	width: 100%;
	
	
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	min-width: 400px; 

	/* background color */
	background-color: transparent;
  }
  
 
  
  /* 
		the actual page - everything except footer 
		is contained in here 
  */
  .INETGW_PAGE_CL
  {
	/* default */
	position: static;
	
	/* the first row of our table */
	display: table-row;
	
	/* 
		the height is automatically calculated
		based on the size of the footer
	*/
	/* the color of our page */	
	background-color: white;
  }
  
  /* 
		the footer of the page
		we set the height to 50 px
  */
  .INETGW_FOOTER
  {
	/* the second and last row of our table */
	display: table-row;
	
	background-color: #1DA19F;
	/* 50 px height of the footer */
	height: 100px;
  }
  
  

  /* ************************************* */
  /* the page header section */
  /* ************************************* */
  
  /* 
		the wrapper of the header 
  */
  .INETGW_HEADER_WRAPPER_CL
  {
	/* default */
	position: static;
	display: table-row;
	
	
	/* the header to have 10px surrounding */
	margin: 10px 10px 10px 10px; 
	
	/* the height of the header is 50 px */
	height: 100px;
	
	background-color: rgb(238, 238, 238); 
	
	/* the shadow of the header */
	-moz-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	
	/* gradient colour going from left to right starting with green going to very light-green */
    background-image: -moz-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), 	 #DCDCDC);
	background-image: -ms-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: -o-linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	background-image: linear-gradient(left, rgb(238, 238, 238), #DCDCDC);
	
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC);
	zoom: 1;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(238, 238, 238), endColorstr=#DCDCDC)";
  }
  
  /* the class for the site header */
  .INETGW_HEADER_CL 
  {
	/* default */
	/* position: static; */
	/* margin dont work here */	
	margin: 0;
	/* middle the header items */
	padding: 12px 12px 12px 12px; 
  }
 
  
  /* the site text displayed in the header */
  .INETGW_HEADER_CL a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	margin-left: 40%;
  }
  
  /* the image displayed in the header */
  .INETGW_HEADER_CL img
  {
	/* switch off the border in ie */
	border: 0;
	/* align image and text */
	vertical-align: middle;
  }
  
  /* the text displayed in the header */
  .INETGW_HEADER_CL span
  {
	/* the font to use */
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 70px;
	font-style: normal;
	font-weight: bolder;
	
	/* we do not want to have a underlining of the link */
	text-decoration: none;
	
	/* align image and text */
	vertical-align: middle;
  }
  
  
  /*	****************
		the header contains a side map on right hand side 
  */
  
  
  /*	
		we display the sitemap
		on the right hand side of the header
  */
  .INETGW_HEADER_SITEMAP_CL
  {
	/* float: right;   */
	margin: 5px 5px 5px 5px;
  }

  /* 
	clearing float right
  */
  .INETGW_HEADER_SITEMAP_CL:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  
  /* 
		the list of sites 
		horizontal ul menu 
  */
  .INETGW_HEADER_SITEMAP_CL ul
  {
	/* relative positioning */
	/* position: static; */
	/* no margin no padding */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* switch off list style */
	list-style: none;
  }
  
  /* 
	clearing float left 
  */
  .INETGW_HEADER_SITEMAP_CL ul:after
  {
	/* content: ".";
	visibility: hidden;
	clear: both; */
  }
  
  /* the horizontal site map list  */
  .INETGW_HEADER_SITEMAP_CL li
  {
	/* display horizontal */
	/* float: right;  */
	/* float: right; */
	/* padding between the list items - taking left unit otherwise 
       we also have a padding on the right hand side of the last item 
	*/
	padding: 0px 0px 0px 10px;
	
  }
  
  /* the sitemap texts */
  .INETGW_HEADER_SITEMAP_CL li a
  {
	/* we do not want to have a underlining of the link */
	text-decoration: underline;
  }
  
  /*	
		each list element has a text 
		displayed with the site name
   */
  .INETGW_SITEMAP_TEXT_CL
  {
	font-family: Arial, Verdana, Helvetica, Trebuchet, Tahoma, sans-serif;
	color: #000000;
	font-size: 50px;
	font-style: normal;
	font-weight: bold;
  }
  
  /* 
    each site being displayed has a little 
    div which shows the sites color code above
	the text. Display above is done via
	order within the html. in quirk mode
	only a small rectangle is drawn - we live with it 
 */
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMSOFT
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: #5FB404;
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_GROUPWARE
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(46, 70, 79);
  }
  
  /* INETGW color code */
  #INETGW_SITEMAP_COLOR_FMNET
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: rgb(52,139,203);
  }
  
  /* home color code */
  #INETGW_SITEMAP_COLOR_FMCLUB
  {
	/* the size of the div is done by padding */
	padding: 5px 5px 5px 5px;
	/* the color code of the site */
	background-color: White;
  }
  
  
  
  /* ************************************* */
  /* view contains the body, the navbar
     and the closing clear view */
  .INETGW_VIEW_CL
  {
	/* default */
	position: static;

	/* introduce table display for 
	   the navbar the body and the closing view
	*/
	display: block;	
	
	/*	
	margin-left: 10px;
	margin-right: 10px;
	*/
	/* table to fill complete remaining page */
	
	

	background-color: transparent;
  }
  
  /* ************************************* 
     INETGW_BODY_WRAPPER_CL contains the 
     bread crumb and the actuall data 
     being displayed
     ************************************* */
  .INETGW_BODY_WRAPPER_CL
  {
	/* float left together with the nav bar */
	float:left;
	
	/* 100% width - the space for the navbar is reserved in the 
	   INETGW_BODY_CL container
	*/
	width: 100%;
	
	height: 100%;
	/* debugging blue */
	background-color:transparent;
  }
  
  /*
	the navigation bar
  */
   .INETGW_NAVBAR_CL
  {
	/* float left together with the body wrapper */
	float: left;
	
	/* 
		we bring the navbar right to INETGW_BODY_WRAPPER_CL
		INETGW_BODY_WRAPPER_CL has 100% width, thus
		we have minus to brin it beside it.
	*/
	margin-left: -15px;
	/* the width of the nav bar */
	width: 10px;              
	
	background-color:transparent;
  }
  
  /*
	clear the floats of INETGW_BODY_WRAPPER_CL
	and INETGW_NAVBAR_CL
  */
  .INETGW_CLEAR_VIEW
  {
	clear: both;
  }
  
  
  
  /* 
	the body containing all data part 
	we have the navigation bar on right hand side
  */
  .INETGW_BODY_CL
  {
	/* default */
	position: static;
	/* default */
	display: block;
	
	min-height: 100%;
	height: 100%;
	
	/* leave space for the navigation bar on the right hand side */
	margin-left: 10px;
	margin-right: 15px;
	
	/* padding-bottom: 20px; */
	height: 100%;
	
	background-color: transparent;
	/*		
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	*/
  }
  
 
  /* **********************
	the body part has a bread crumb at top
  */
  
  /* shadow of the bread crumb */
  .INETGW_BREADCRUMB_SHADOW_CL
  {
	position: static;
	
	/* minimum space to next item */
	margin-bottom: 20px;
	/* draw shadow around the breadcrumb */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the bread crumb */
  .INETGW_BREADCRUMB_CL
  {
	/* padding for text display */
	padding: 5px 0px 5px 15px;
	
	/* the background color */
	background-color: #99ccff;
  }

  /* the text of the bread crumb */  
  .INETGW_BREADCRUMB_CL p
  {
	/* no margin and padding for the text */
	margin: 0;
	padding: 0;
	/* bold text */
	font-weight:bold;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  
  /*
	the entry 
  */
  #INETGW_ENTRY
  {
	position: static;
	
	
	margin: 10px 0px;
  }
  
  /*
		the class for the INETGW entries
  */
  .INETGW_ENTRY_SHADOW_CL
  {
	position: static;
	/* we leave 20 px to the breadcrumb */
	margin: 0px 0px 0px 0px; 
	
	/* the color of the border surrounding the entry*/
	border: solid 5px #99ccff;
	
	min-height: 80px;
	/* rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	/* display a shadow around the entry */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  .INETGW_ENTRY_CL
  {
	
  }
  
  .INETGW_ENTRY_CAPTION_CL
  {
	/* the caption is drawn with border color as background */
	background-color: #99ccff;
	/* font is bold */
	font-weight: bold; 
	/* padding for the text */
	padding: 5px 5px;
  }
  
  .INETGW_ENTRY_TEXT_CL
  {
	font-weight: lighter;
	/* padding for the text */
	padding: 5px 5px;
  }
  
  /* **********************
	the breadcrumb follows the news part
  */
  /* the shadow for the news table */
  .INETGW_NEWS_SHADOW_CL
  {
	position: static;
	
	/* we leave 20 px to the breadcrumb */
	margin: 10px 0px 5px 0px; 

	
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
  }
  
  /* the news table */
  .INETGW_NEWS_CL
  {
	border-collapse:collapse;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 5px #99ccff;
	width:100%;
  }
  
  /* the caption caption */
  .INETGW_NEWS_CL caption
  {
	padding: 5px 0 0px 0;
	background-color: #99ccff;
	font-weight: bold;
  } 
  
  /* the header row of the table */
  .INETGW_NEWS_CL th
  {
	border-bottom: solid 5px #99ccff;
	background-color:Transparent;
  }
  
  /* the date column of the table */
  .INETGW_NEWS_COL_DATE_CL
  {
	border-right: solid 5px #99ccff;
	border-top: solid 5px #99ccff;
	text-align: center;
	background-color:Transparent;
  }
  
  /* the descriptoin color of the table */
  .INETGW_NEWS_COL_DESCR_CL
  {
	/* text-align: justify; */
	border-top: solid 1px #99ccff;
	border-top: solid 5px #99ccff;
	background-color:Transparent;
  }
  
 
 /* ************************************************************* */
  /* ************** the navigation bar on right hand side ******* */	  
  /* ************************************************************ */
 
  
  /* the project navigation lists */
  #INETGW_PROJECTS
  {
	
	margin: 0px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  /* the documentation navigation list */
  #INETGW_DOCU
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  }
  
  #INETGW_VSERVER
  {
	margin: 20px 5px 5px 15px; 
	
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
		
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 }
  
  /* ************************************************************* */
  /* ************** classes for navigation list ****************** */	  
  /* ************************************************************* */
  /*
	 <!-- navigation is introduced by an div with the respective id
		with this the position of the navigation list can be 
		set
	 -->
	 <div id="INETGW_PROJECTS">
		<!-- 
			the navigation list comprises
			- header
			- list items
		-->
        <div class="INETGW_NAVLIST_CL">
			<!-- 
				- header of navigation list
			-->
            <div >
                <p>Projects</p>
            </div>
			<!-- 
				- the list items
			-->
            <ul >
                <li>
                    <a href="projects/kmee/index.html">KMEE</a>
                </li>
                <li >
                    <a href="projects/hbk/index.html">HBK</a>
                </li>
                <li >
                    <a href="projects/yasi/index.html">YASI</a>
                </li>
            </ul>
        </div>
    </div>
   */
  /* the div class comprising the navigation list items width: 100% */
  .INETGW_NAVLIST_CL
  {
	margin: 10px 20px 10px 20px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 95%;
	/* we draw a shadow around the page */
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-ms-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-o-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); 
		
  }
  
  /* first div represents the header of the navigation list */
  .INETGW_NAVLIST_CL div
  {
	/* center the texts in the navigation list */
	text-align: center;
	font-size: 70px;
	/* the background color */
	background-color: #EEEEEE;
	/* the padding */ 
	padding: 5px 5px 5px 5px;
  }
  
  /* text of the navigation list header */
  .INETGW_NAVLIST_CL div p
  {
	/* header text is to be bold */
	font-weight:bold;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* the background color */
	background-color: #EEEEEE; 
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul
  {
	/* display as block */
	display: block;
	font-size: 70px;
	margin: 0 0 0 0;
	padding: 0px 0 0 0;
	/* no bullets to be displayed */
	list-style-type: none;
	border-collapse: collapse;
  }
  
  /* 
		the standard item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	background-color: white; /* Needed for IEs */
	
	
	/* inset mode not supported for IE Für Internet Explorer 5.5 - 7 
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);*/
	/* Für Internet Explorer 8 
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;*/
  }
  
  /* 
		the hovered item display 
		also apply to a as explorer only works hover property on a
  */
  .INETGW_NAVLIST_CL ul li a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 5px 5px 5px;
	
	text-align: center;
	list-style-type:none;
	
	
	border-bottom: solid 3px #EEEEEE;  
	border-right: solid 3px #EEEEEE; 
	border-left: solid 3px #EEEEEE;  
	
	
	
	/* background-color: #CEEEEE;  #E6F8E0; */
	background-color: #EEEEEE;  
	
	-moz-box-shadow: 0 0px 0px 0px #CEEEEE;
	-webkit-box-shadow: 0 0px 0px 0px #CEEEEE;
	-ms-box-shadow: 0 0px 0px 0px #CEEEEE;
	-o-box-shadow: 0 0px 0px 0px #CEEEEE;
	box-shadow:         0 0 0 0px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a ,
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL a:hover
  {
	margin: 0 0 0 0;
	display: block;
	padding: 5px 0 5px 0; 
	
	text-align: center;
	list-style-type:none;
	
	border-bottom: solid 3px #99ccff;  
	
	border-right: solid 3px #99ccff; 
	border-left: solid 3px #99ccff;  
	
	
	background-color: white;  
	
	-moz-box-shadow: inset 0px 0px 10px #CEEEEE;
	-webkit-box-shadow: inset 0px 0px 10px #CEEEEE;
	-ms-box-shadow: inset 0px 0px 10px #CEEEEE;
	-o-box-shadow: inset 0px 0px 10px #CEEEEE;
	box-shadow:         inset 0 0 10px #CEEEEE; 
  }
  
  .INETGW_NAVLIST_CL ul li.INETGW_NAVLIST_SELECTED_CL:after
  {
	
	float: left; 
	content: "\00a0"; 
	width: 0;  
	height: 0;  
	display: block;
	margin: 0 0 0 0;
	
	margin-left: -30px;
    margin-top:  -32px;

    
	border: 15px solid;  
	border-color: transparent #99ccff transparent transparent;   
  }
  
  /* the actual navigation list */
  .INETGW_NAVLIST_CL ul li
  {
	clear: both; 
  }
}