Moved the style-parts to a css-file.

Kieker.WebGUI/src/main/webapp/main.css

+@charset "UTF-8";
+
+/*
+ * The following style modifications make sure that the menu bar is visible. 
+*/
+.ui-layout-north {
+    z-index:20 !important;
+    overflow:visible !important;;
+}
+
+
+.ui-layout-north .ui-layout-unit-content {
+    overflow:visible !important;
+}
+
+.ui-layout-center {
+    font-size: 15px;
+}
+
+.ui-layout-east {
+    font-size: 15px;
+}
+
+.ui-layout-south {
+    font-size: 15px;
+}
+
+.ui-layout-west {
+    font-size: 15px;
+}
+
+.ui-menubar .ui-menuitem {
+    font-size: 15px;
+}
+
+.ui-contextmenu {
+    font-size: 15px;
+}
+
+.ui-dialog {
+    font-size: 15px;
+    width: auto;
+}
\ No newline at end of file

Kieker.WebGUI/src/main/webapp/main.xhtml

@@ -8,20 +8,7 @@
     <f:view contentType="text/html">
         <h:head>
             <title>Kieker.WebGUI</title>
-
-            <!-- The following style modifications make sure that the menu bar is visible. -->
-            <style type="text/css">
-                .ui-layout-north {
-                    z-index:20 !important;
-                    overflow:visible !important;;
-                }
-
-
-                .ui-layout-north .ui-layout-unit-content {
-                    overflow:visible !important;
-                }
-
-            </style>
+            <link rel="stylesheet" title="Standard-Stylesheet" type="text/css" href="main.css" />
         </h:head>
 
         <h:body>
@@ -31,7 +18,7 @@
                 <!-- This is the top unit within the layout and is used for the menu bar. -->
                 <p:layoutUnit position="north" size="60" collapsible="false"> 
                     <h:form>
-                        <p:menubar style="font-size: 15px">  
+                        <p:menubar>  
                             <p:submenu label="File">
                                 <p:menuitem value="New Project" onclick="NewProjectDialog.show();" ajax="true" update="ProjectsList"/>
                             </p:submenu>
@@ -46,7 +33,7 @@
                 </p:layoutUnit> 
 
                 <!-- The following layout is at the left side of the page and shows the available projects. -->
-                <p:layoutUnit style="font-size:15px" header="Projects" collapsible="true" position="west" size="200" resizable="true"  minSize="100">  
+                <p:layoutUnit  header="Projects" collapsible="true" position="west" size="200" resizable="true"  minSize="100">  
                     <h:form id="ProjectsList">
                         <p:tree selection="#{selectedProjectBean.selectedNode}" id="ProjectsListTree" selectionMode="single" style="width: auto" value="#{availableProjectsBean.projectsRoot}" var="node" >   
                             <p:treeNode type="project">  
@@ -62,7 +49,7 @@
                             </p:treeNode>  
                         </p:tree>
 
-                        <p:contextMenu style="font-size:15px" for="ProjectsListTree">  
+                        <p:contextMenu for="ProjectsListTree">  
                             <p:menuitem value="Set as Main Project" action="#{selectedProjectBean.setMainProject(selectedProjectBean.getSelectedProject())}" update="ProjectsListTree"/>  
                             <p:menuitem value="Save Project" update="ProjectsList"/>  
                             <p:separator/>
@@ -74,12 +61,12 @@
                 </p:layoutUnit>  
 
                 <!-- The following layout unit is within the center and used for the graph. -->
-                <p:layoutUnit style="font-size:15px"  position="center">  
+                <p:layoutUnit  position="center">  
 
                 </p:layoutUnit>  
 
                 <!-- The following layout unit is located at the bottom and will be used for properties. -->
-                <p:layoutUnit style="font-size:15px" position="south" size="150" header="Properties" resizable="true"  collapsible="true">  
+                <p:layoutUnit  position="south" size="150" header="Properties" resizable="true"  collapsible="true">  
                     <p:dataTable id="carList">  
 
 
@@ -113,7 +100,7 @@
                 </p:layoutUnit>  
 
                 <!-- The following layout unit is located at the right side of the page and is used as a tool palette. It shows the available plugins etc. -->
-                <p:layoutUnit style="font-size:15px" position="east" size="200"  header="Tool Palette" resizable="true" collapsible="true">  
+                <p:layoutUnit position="east" size="200"  header="Tool Palette" resizable="true" collapsible="true">  
                     <p:tree style="width: auto" value="#{availablePluginsBean.availablePluginsRoot}" var="node" >  
                         <p:treeNode >  
                             <h:outputText value="#{node}"/>  
@@ -125,14 +112,14 @@
         </h:body>
 
         <!-- This is the about-dialog. -->
-        <p:dialog header="About..." resizable="false" modal="true" style="font-size: 15px;width: auto" widgetVar="AboutDialog">
+        <p:dialog header="About..." resizable="false" modal="true" widgetVar="AboutDialog">
             <h:outputText value="Kieker.WebGUI"/><br/><br/>
             <h:outputText value="Version: 1.0-SNAPSHOT"/><br/>
             <h:outputText value="Copyright (c) 2011 Kieker Project"/> <br/><br/>
             <a href="https://se.informatik.uni-kiel.de/kieker/">https://se.informatik.uni-kiel.de/kieker/</a>
         </p:dialog>
 
-        <p:dialog id="NewProjectDialog" header="New Project" resizable="false" modal="true" style="font-size: 15px;width: auto" widgetVar="NewProjectDialog" >
+        <p:dialog id="NewProjectDialog" header="New Project" resizable="false" modal="true" widgetVar="NewProjectDialog" >
             <p:ajax event="close" update="NewProjectDialog" listener="#{stringBean.clear()}" />  
 
             <h:form>