Update of CSS from Máirín Duffy including some per-object images

22 files changed, 376 insertions, 171 deletions

diff --git a/ipa-server/configure.ac b/ipa-server/configure.ac
index dbcfeacc0..b57a59aa8 100644
--- a/ipa-server/configure.ac
+++ b/ipa-server/configure.ac
@@ -223,6 +223,7 @@ AC_CONFIG_FILES([
     ipa-gui/ipagui/static/images/Makefile
     ipa-gui/ipagui/static/images/template/Makefile
     ipa-gui/ipagui/static/images/branding/Makefile
+    ipa-gui/ipagui/static/images/objects/Makefile
     ipa-gui/ipagui/static/javascript/Makefile
     ipa-gui/ipagui/subcontrollers/Makefile
     ipa-gui/ipagui/templates/Makefile
diff --git a/ipa-server/ipa-gui/ipagui/static/css/Makefile.am b/ipa-server/ipa-gui/ipagui/static/css/Makefile.am
index fe8a39791..eb5502ab0 100644
--- a/ipa-server/ipa-gui/ipagui/static/css/Makefile.am
+++ b/ipa-server/ipa-gui/ipagui/static/css/Makefile.am
@@ -2,7 +2,9 @@ NULL =
 
 appdir = $(IPA_DATA_DIR)/ipagui/static/css
 app_DATA = 			\
-	style.css		\
+	style_freeipa.css	\
+	style_platform.css	\
+	style_platform-objects.css	\
 	$(NULL)
 
 EXTRA_DIST =			\
diff --git a/ipa-server/ipa-gui/ipagui/static/css/style_freeipa.css b/ipa-server/ipa-gui/ipagui/static/css/style_freeipa.css
new file mode 100644
index 000000000..1aa42622c
--- /dev/null
+++ b/ipa-server/ipa-gui/ipagui/static/css/style_freeipa.css
@@ -0,0 +1,64 @@
+/* freeipa-specific styles */
+
+body { background-color: red !important !important; }
+
+#login {
+  float:			right;
+  padding-top:			15px;
+  padding-right:		10px;
+}
+
+#details {
+  border-top:			1px solid #bbdc5f;
+}
+
+#details h1 {
+ background-repeat:		no-repeat;
+ margin-bottom:			18px;
+}
+
+
+#alertbox {
+  background-color:		#6995d5;
+}
+
+#footer {
+  padding-top:			0px;
+  border-top:			none;
+  text-align:			center;
+  margin-left:			auto;
+  margin-right:			auto;
+  width:			30%;
+  padding:			20px 20px;
+}
+
+/*** TableKit CSS - see http://www.millstream.com.au/view/code/tablekit/ **/
+
+.sortcol {
+  cursor: pointer;
+  padding-left: 10px !important;
+  background-repeat: no-repeat !important;
+  background-position: left center !important;
+  text-decoration: underline;
+}
+.sortasc {
+  background-image: url(/static/images/up.gif) !important;
+}
+.sortdesc {
+  background-image: url(/static/images/down.gif) !important;
+}
+
+.warning_message {
+  font-size: 120%;
+  font-weight: bolder;
+}
+
+.fielderror {
+  color: red !important;
+  font-weight: bold;
+}
+
+.requiredfield {
+  background-color: #eebbbb !important;
+}
+
diff --git a/ipa-server/ipa-gui/ipagui/static/css/style_platform-objects.css b/ipa-server/ipa-gui/ipagui/static/css/style_platform-objects.css
new file mode 100644
index 000000000..0f4068896
--- /dev/null
+++ b/ipa-server/ipa-gui/ipagui/static/css/style_platform-objects.css
@@ -0,0 +1,18 @@
+r/* object h1 styles */
+
+#details h1.overview { background-image: url('/static/images/objects/object-overview.png'); }
+
+#details h1.accesscontrol { background-image: url('/static/images/objects/object-accesscontrol.png'); }
+
+#details h1.user { background-image: url('/static/images/objects/object-user.png'); }
+#details h1.usergroup { background-image: url('/static/images/objects/object-usergroup.png'); }
+
+#details h1.content-overview { background-image: url('/static/images/objects/object-content.png'); }
+#details h1.channel { background-image: url('/static/images/objects/object-channel.png'); }
+#details h1.channel-new { background-image: url('/static/images/objects/object-channel.png'); }
+#details h1.channels { background-image: url('/static/images/objects/object-channels.png'); }
+#details h1.media { background-image: url('/static/images/objects/object-media.png'); }
+
+#details h1.system { background-image: url('/static/images/objects/object-system.png'); }
+#details h1.virtualsystem { background-image: url('/static/images/objects/object-virtualsystem.png'); }
+
diff --git a/ipa-server/ipa-gui/ipagui/static/css/style.css b/ipa-server/ipa-gui/ipagui/static/css/style_platform.css
index 8017e7427..37f030a84 100644
--- a/ipa-server/ipa-gui/ipagui/static/css/style.css
+++ b/ipa-server/ipa-gui/ipagui/static/css/style_platform.css
@@ -1,7 +1,10 @@
+/** BASIC PAGE STYLES */
+
 * 
 {
   margin: 			0;
   padding:			0;
+  font-size:			small;
 }
 
 html, body {
@@ -14,42 +17,81 @@ body {
   background-color:		#f9f9f9;
   margin:			0px;
   padding:			0px;
-  padding-top:			8px;
+  padding-top:			16px;
   min-width:			750px;
 }
 
-body, h1, h2, h3, h4, h5, p, ul, li, div, span {
+body, h1, h2, h3, h4, h5, p, ul, li, div, span, td {
   font-family:			"Luxi Sans", "Gill Sans", "Verdana", "Helvetica", sans-serif;
   font-size:			small;
   color:			#444;
 }
 
+td, th {
+  text-align:			left;
+}
+
 #head {
   margin:			0px;
-  padding:			0px;
-  padding-left:			12px;
+  padding:			0px 1.5ex;
 } 
 
 #head h1 a {
   display:			block;
   text-indent:			-9999px;
-  height:			54px;
+  height:			60px;
   width:			350px;
   overflow:			hidden;
   float:			left;
+  margin-top:			-10px;
 
   background:			url('/static/images/branding/logo.png') no-repeat;
 }
 
+#content {
+  width:			100%;
+  min-height:			100%;
+
+  background-color:		#f9f9f9;
+  background-image:		url('/static/images/template/background-content.png');
+  background-repeat:		repeat-x;
+}
+
+#main_content table {
+  clear:		left;
+}
+
+#main_content {
+  height: auto;
+  margin-bottom: 4ex;
+}
+
+#footer {
+  font-size: x-small;
+  color: #ccc;
+  clear: both;
+  text-align: center;
+  padding-top: 4ex;
+  border-top: 1px solid #efefef;
+  width: 100%;
+}
+
+/* freeipa only?  */
+div#search {
+  padding-top:			16px;
+  padding-bottom:		24px;
+}
+
 #searchbar {
   float: 			right;
-  margin-right: 		24px;
   margin-top: 			18px;
 }
 
+/** MAIN NAVBAR SECTION **/
+
 #navbar {
   width: 			100%;
-  height: 			64px;
+  height: 			70px;
   margin: 			0px;
   clear:			both;
 
@@ -86,42 +128,28 @@ body, h1, h2, h3, h4, h5, p, ul, li, div, span {
   text-align:			center;
 }
 
-#login {
-  float:			right;
-  padding-top:			15px;
-  padding-right:		10px;
+#navbar-secondary li {
+  font-size:			medium;
 }
 
-#content {
-  width:			100%;
-  min-height:			50%;
-
-  background-color:		#f9f9f9;
-  background-image:		url('/static/images/template/background-content.png');
-  background-repeat:		repeat-x;
+#navbar-secondary .active a:link,
+#navbar-secondary .active a:visited,
+#navbar-secondary .active a:active,
+#navbar-secondary .active a,
+#navbar-secondary li
+{
+  color:			#555 !important;
+  text-decoration:		none; 
+  font-weight:			bold;
 }
 
-#details {
-  height: 			100%;
-  margin:			0px 24px;
-  margin-right:			300px;
-  padding:			18px 18px;
-  padding-bottom: 		12%;
-  border-top:			1px solid #bbdc5f;
-  background-color:		white;
-  text-align:			left;
-}
-
-#details p {
-  margin-top:			1ex;
-  margin-bottom:		1ex;
-}
+/** SIDEBAR SECTION **/
 
 #sidebar {
   width:			250px;
   text-align:			left;
   
-  padding:			18px 13px;
+  padding:			18px 12px;
   margin-right:			24px;
   float:			right;
   height:			100%;
@@ -160,35 +188,49 @@ body, h1, h2, h3, h4, h5, p, ul, li, div, span {
   margin-bottom:		20px !important;
 }
 
-input.text {
-  border:			1px solid #8e8e8e;
-  background-color:		#e5f1f4;
-  color:			#444444;
+.context-tools {
+  float: right;
+  margin-top: -1.2em;
+  font-size: small;
+}
+
+.context-tools a:link, .context-tools a:active, .context-tools a:visited {
+  text-decoration: none;
 }
 
-input.button {
+/** DETAILS SECTION **/
 
+#details {
+  height: 			100%;
+  margin:			0px 24px;
+  margin-right:			298px;
+
+  padding:			18px 18px;
+  padding-bottom: 		12%;
+  border-top:			1px solid #aaa;
+  background-color:		white;
+  text-align:			left;
+  color:			#444;
 }
 
-#navbar-secondary li {
-  font-size:			medium;
+#details p {
+  margin-top:			1ex;
+  margin-bottom:		1ex;
 }
 
-#navbar-secondary .active a:link,
-#navbar-secondary .active a:visited,
-#navbar-secondary .active a:active,
-#navbar-secondary .active a,
-#navbar-secondary li
-{
-  color:			#555 !important;
-  text-decoration:		none; 
-  font-weight:			bold;
+#details h3 {
+  font-size: medium;
+  text-transform: uppercase;
+  margin-bottom: 1ex;
+  margin-top: 1.5ex;
 }
 
-#details * {
-  color:			#444;
+#details h4 {
+  font-size: 	medium;
+  color: 	#8aa445;
 }
 
+
 #details p,
 #details td,
 #details li {
@@ -199,21 +241,16 @@ input.button {
 #details h1 {
   color:			#7d7d5b;
   font-size:			x-large;
+  margin-bottom:		18px;
   height:			40px;
-/*
- * padding-left:			48px;
-*/
+  padding-left:			48px;
   padding-top:			6px;
   vertical-align:		middle;
-}
-
-#details h1.user {
-  background-image:		url('/static/images/objects/object-user.png');
   background-repeat:		no-repeat;
-  margin-bottom:		18px;
 }
 
-#details h2, #details table caption, h2.formsection {
+
+#details h2, #details table caption {
   color:			#999;
   font-size:			large;
   font-weight:			normal;
@@ -225,13 +262,8 @@ input.button {
   width:			100%;
 }
 
-h2.formsection {
-  margin-top:			12px;
-}
-
-#details h3, table.formtable th {
-  font-size: 			small;
-  color:			black;
+#details h2 img {
+  margin-right:			1.4ex;
 }
 
 table.details {
@@ -239,6 +271,11 @@ table.details {
   width:			100%;
 }
 
+#details h3, table.formtable th {
+  font-size: 			small;
+  color:			black;
+}
+
 #details table.details th {
   font-size:			small;
   width:			150px;
@@ -267,56 +304,85 @@ table.details {
   border-style:			none none dashed;
 }
 
-input.submitbutton {
-  float:			right;
+.details-block {
+  border-top: 1px solid #eeeeee;
 }
 
-#alertbox {
-  width:			100%;
-  padding:			6px 0px;
-  margin-top:			12px;
-  margin-bottom:		18px;
-  vertical-align:		middle;
+#details ul.context-nav {
+  float:		left;
+  width: 		100%;
+  padding:		0;
+  margin:		0;
+  list-style-type:	none;
+  border-bottom:	6px solid #eee;
+  margin-bottom:	2ex;
+}
 
-  -moz-border-radius:		6px;
-  background-color:		#6995d5;
-  color:			white;
+#details ul.context-nav li a {
+  float: 		left;
+  text-decoration:	none;
+  background-color:	#d6d6d6;
+  padding:		1ex 2ex;
+  text-align:		center;
+  margin-right:		3px;
+
+  -moz-border-radius-topleft:	12px;
+  -moz-border-radius-topright:	12px;
 }
 
-#alertbox h2 {
-  width:			auto;
-  padding:			0px 16px;
-  float:			left;
-  font-size:			medium;
-  text-transform:		uppercase;
-  color:			white;
-  font-weight:			bold;
-  border:			none;
+#details ul.context-nav li#active a {
+  color: 		#444;
+  background-color:	#eee;
+  font-weight:		bold;
 }
 
-#alertbox p {
-  padding:			0px 0px;
-  text-align:			center;
-  color:			white;
-  width:			auto;
+/** FORMS SECTION **/
+
+input.text {
+  border:			1px solid #8e8e8e;
+  background-color:		#e5f1f4;
+  color:			#444444;
 }
 
-td, th {
-  text-align:			left;
+input.submitbutton {
+  float:			right;
 }
 
-#footer {
-  text-align:			center;
-  margin-left:			auto;
-  margin-right:			auto;
-  width:			30%;
-  padding:			20px 20px;
+form.tableform table th {
+  padding-right:	2ex;
+  text-align:		right;
+}
+
+h2.formsection {
+  color:			#999;
+  font-size:			large;
+  font-weight:			normal;
+
+  border-bottom:		1px solid #999;
+  margin-bottom:		10px;
+  margin-top:			12px;
+
+  text-align:			left;
+  width:			100%;
 }
 
 table.formtable {
   width: 			100%;
 }
 
+/**** freeipa only below? ****/
+ul.checkboxlist li {
+  list-style: none;
+  margin: 8px 0px;
+}
+
+ul.checkboxlist li input {
+  background-color: 		yellow;
+  height:			1.1em;
+  width:			1.2em;
+  border:			1px solid red;
+}
+
 table.formtable th, table.formtable td {
   vertical-align:		top;
   padding-bottom:		10px;
@@ -326,9 +392,6 @@ table.formtable th {
   width:			28%;
 }
 
-table.formtable td {
-}
-
 input.submitbutton, input.searchbutton, #source_searcharea input.searchbutton {
   border:			1px outset #aaa;
   padding: 			2px 1px;
@@ -339,20 +402,52 @@ table.formtable td input[type="text"], input#criteria {
   border:			1px inset #dcdcdc;
   font-size:			medium;
   padding:			2px 1px;
-/*
-  background-color:		#f5faff;
-*/
 }
 
 table.formtable td select {
   border:			1px inset #dcdcdc;
   font-size:			small;
   padding:			2px 1px;
-/*
-  background-color:		#f5faff;
-*/
 }
 
+#inactive {
+  background-color:            silver;
+}
+
+/** ALERTS / MESSAGING SECTION **/
+
+#alertbox {
+  width:			100%;
+  padding:			10px 0px;
+  margin-top:			12px;
+  margin-bottom:		18px;
+  vertical-align:		middle;
+
+  -moz-border-radius:		6px;
+  background-color:		#7d7d5b;
+  color:			white;
+}
+
+#alertbox h2 {
+  width:			auto;
+  padding:			0px 16px;
+  float:			left;
+  font-size:			medium;
+  text-transform:		uppercase;
+  color:			white;
+  font-weight:			bold;
+  border:			none;
+}
+
+#alertbox p {
+  padding:			0px 16px;
+  text-align:			center;
+  color:			white;
+  width:			auto;
+}
+
+/**** freeipa only alerts/messaging below ****/
+
 p.empty-message {
   font-size:			large;
   font-style:			italic;
@@ -367,59 +462,57 @@ div.instructions {
   background-color:		#eef4fd;
 }
 
-div#search {
-  padding-top:			16px;
-  padding-bottom:		24px;
-}
 
-ul.checkboxlist li {
-  list-style: none;
-  margin: 8px 0px;
-}
+/** OVERVIEW PAGE STYLES **/
 
-ul.checkboxlist li input {
-  background-color: 		yellow;
-  height:			1.1em;
-  width:			1.2em;
-  border:			1px solid red;
+.summary {
+  width: 40%;
+  float: left;
+  clear: none;
+  padding-top: 2ex;
 }
 
-#inactive {
-  background-color:            silver;
-}
+.tasks, .search {
+  padding: 3ex;
+  padding-top: 2ex;
+  width: 40%;
+  float: right;
+  background-image:     url('/static/images/template/background-search.png');
+  background-repeat:        repeat-y;
+  background-color: white;
+} 
 
-/*
- *  * TableKit css
- *  
- */
+.summary ul, .tasks ul, ul { margin-top: 1ex; padding-top: 1ex; list-style: square; margin-left: 2ex; }
+.summary ul + ul, .tasks ul + ul { border-top: 1px solid #eee; }
+.search ul { list-style: none; margin-left: 2ex; }
 
-.sortcol {
-  cursor: pointer;
-  padding-left: 10px !important;
-  background-repeat: no-repeat !important;
-  background-position: left center !important;
-  text-decoration: underline;
-}
-.sortasc {
-  background-image: url(/static/images/up.gif) !important;
-}
-.sortdesc {
-  background-image: url(/static/images/down.gif) !important;
+.additional-link {
+  font-size: x-small;
 }
 
-.warning_message {
-  font-size: 120%;
-/*
-  color: #ee0000;
-*/
-  font-weight: bolder;
+#perspectives h3 a {
+  font-size: x-small;
+  text-transform: none;
+  margin-left: 1ex;
+  font-weight: normal;
 }
 
-.fielderror {
-  color: red !important;
-  font-weight: bold;
-}
+/** TURBOGEARS GRID-TABLE-SPECIFIC STYLES **/
+
+.grid td, .grid th {padding:3px;border:none;} 
+.grid .action_cell {text-align:right;} 
+.grid THEAD tr th {text-align:left;background-color:#f0f0f0;color:#333;} 
+.grid .heading img {float:right;margin-left:2px;margin-right:3px;}  
+.grid .heading a {text-decoration:none;color:#333;} 
+.grid td a {text-decoration:none;color:#333;} 
+.grid tr.odd td {background-color:#edf3fe;} 
+.grid tr.even td {background-color:#fff;} 
+.grid .pointer {cursor:pointer;} 
+.grid .column_chooser_link {position:relative;background-color:#e3e3e3;} 
+.grid .column_chooser_link ul {position:absolute;display:none;top:0px;right:-20px;} 
+.grid .column_chooser_list a {width:200px;display:block;padding:3px;background-color:#e3e3e3;} 
+.grid .column_chooser_list a:hover {background-color:#cdcdcd;} 
+.grid .column_chooser_list {padding:0;margin:0;list-style:none;background-color:#e3e3e3;}
+
+
 
-.requiredfield {
-  background-color: #eebbbb !important;
-}
diff --git a/ipa-server/ipa-gui/ipagui/static/images/Makefile.am b/ipa-server/ipa-gui/ipagui/static/images/Makefile.am
index 011e24aec..bb0f3aab6 100644
--- a/ipa-server/ipa-gui/ipagui/static/images/Makefile.am
+++ b/ipa-server/ipa-gui/ipagui/static/images/Makefile.am
@@ -2,6 +2,7 @@ NULL =
 
 SUBDIRS =			\
         branding		\
+        objects			\
         template		\
         $(NULL)
 
diff --git a/ipa-server/ipa-gui/ipagui/static/images/objects/Makefile.am b/ipa-server/ipa-gui/ipagui/static/images/objects/Makefile.am
new file mode 100644
index 000000000..71e1fdf1c
--- /dev/null
+++ b/ipa-server/ipa-gui/ipagui/static/images/objects/Makefile.am
@@ -0,0 +1,24 @@
+NULL =
+
+appdir = $(IPA_DATA_DIR)/ipagui/static/images/objects
+app_DATA = 				\
+	object-accesscontrol.png	\
+	object-channel.png		\
+	object-channels.png		\
+	object-content.png		\
+	object-media.png		\
+	object-overview.png		\
+	object-system.png		\
+	object-usergroup.png		\
+	object-user.png			\
+	object-virtualsystem.png	\
+	$(NULL)
+
+EXTRA_DIST =			\
+	$(app_DATA)		\
+	$(NULL)
+
+MAINTAINERCLEANFILES =		\
+	*~			\
+	*.pyc			\
+	Makefile.in
diff --git a/ipa-server/ipa-gui/ipagui/templates/delegateedit.kid b/ipa-server/ipa-gui/ipagui/templates/delegateedit.kid
index 5cc11df97..d9f6c3c4e 100644
--- a/ipa-server/ipa-gui/ipagui/templates/delegateedit.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/delegateedit.kid
@@ -24,7 +24,7 @@
 </head>
 <body>
 
-    <h1>Edit Delegation</h1>
+    <h1 class="accesscontrol">Edit Delegation</h1>
 
     ${form.display(action=tg.url("/delegate/update"), value=delegate,
                    actionname='Update')}
diff --git a/ipa-server/ipa-gui/ipagui/templates/delegatelist.kid b/ipa-server/ipa-gui/ipagui/templates/delegatelist.kid
index 2fc54e01c..81ecfeb00 100644
--- a/ipa-server/ipa-gui/ipagui/templates/delegatelist.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/delegatelist.kid
@@ -42,7 +42,7 @@ from ipagui.helpers import ipahelper
     method="post" action="${tg.url('/delegate/edit')}">
     <input type="hidden" id="edit_acistr" name="acistr" value="" />
   </form>
-  <h1>Delegations</h1>
+  <h1 class="accesscontrol">Delegations</h1>
 
   <table id="resultstable" class="details sortable resizable">
     <thead>
diff --git a/ipa-server/ipa-gui/ipagui/templates/delegatenew.kid b/ipa-server/ipa-gui/ipagui/templates/delegatenew.kid
index f31e47a10..12ba9e362 100644
--- a/ipa-server/ipa-gui/ipagui/templates/delegatenew.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/delegatenew.kid
@@ -23,7 +23,7 @@
 <title>Add Delegation</title>
 </head>
 <body>
-    <h1>Add Delegation</h1>
+    <h1 class="accesscontrol">Add Delegation</h1>
 
     ${form.display(action=tg.url("/delegate/create"), value=delegate,
                    actionname='Add')}
diff --git a/ipa-server/ipa-gui/ipagui/templates/groupedit.kid b/ipa-server/ipa-gui/ipagui/templates/groupedit.kid
index b9efd7f56..9614770f4 100644
--- a/ipa-server/ipa-gui/ipagui/templates/groupedit.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/groupedit.kid
@@ -24,7 +24,7 @@
 </head>
 <body>
   <div id="details">
-          <h1>Edit Group</h1>
+          <h1 class="usergroup">Edit Group</h1>
 <input type="checkbox" id="toggleprotected_checkbox"
           onclick="toggleProtectedFields(this);">
         <span class="small">edit protected fields</span>
diff --git a/ipa-server/ipa-gui/ipagui/templates/grouplist.kid b/ipa-server/ipa-gui/ipagui/templates/grouplist.kid
index fdcfbb919..00fd03aa6 100644
--- a/ipa-server/ipa-gui/ipagui/templates/grouplist.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/grouplist.kid
@@ -24,7 +24,7 @@
 </head>
 <body>
 <div id="details">
-    <h1>Find Groups</h1>
+    <h1 class="usergroup">Find Groups</h1>
     <script type="text/javascript" charset="utf-8" src="${tg.url('/static/javascript/tablekit.js')}"></script>
     <div id="search">
         <form action="${tg.url('/group/list')}" method="get">
diff --git a/ipa-server/ipa-gui/ipagui/templates/groupnew.kid b/ipa-server/ipa-gui/ipagui/templates/groupnew.kid
index 0fd438c1c..f5c83caee 100644
--- a/ipa-server/ipa-gui/ipagui/templates/groupnew.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/groupnew.kid
@@ -24,7 +24,7 @@
 </head>
 <body>
 <div id="details">
-    <h1>Add Group</h1>
+    <h1 class="usergroup">Add Group</h1>
 
     ${form.display(action=tg.url('/group/create'), value=group)}
 </div>
diff --git a/ipa-server/ipa-gui/ipagui/templates/groupshow.kid b/ipa-server/ipa-gui/ipagui/templates/groupshow.kid
index cd2030a11..0ddb93851 100644
--- a/ipa-server/ipa-gui/ipagui/templates/groupshow.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/groupshow.kid
@@ -31,7 +31,7 @@ edit_url = tg.url('/group/edit', cn=cn)
 from ipagui.helpers import userhelper
 ?>
 <div id="details">
-    <h1>View Group</h1>
+    <h1 class="usergroup">View Group</h1>
 
     <input py:if="'editors' in tg.identity.groups or 'admins' in tg.identity.groups"
       class="submitbutton" type="button"
diff --git a/ipa-server/ipa-gui/ipagui/templates/master.kid b/ipa-server/ipa-gui/ipagui/templates/master.kid
index 6193ea83b..cb2814143 100644
--- a/ipa-server/ipa-gui/ipagui/templates/master.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/master.kid
@@ -24,7 +24,9 @@
     <title py:replace="''">Your title goes here</title>
     <meta py:replace="item[:]"/>
     <style type="text/css" media="all">
-    @import "${tg.url('/static/css/style.css')}";
+    @import "${tg.url('/static/css/style_platform.css')}";
+    @import "${tg.url('/static/css/style_platform-objects.css')}";
+    @import "${tg.url('/static/css/style_freeipa.css')}";
     </style>
     <script type="text/javascript" charset="utf-8" src="${tg.url('/static/javascript/prototype.js')}"></script>
     <script type="text/javascript" charset="utf-8" src="${tg.url('/static/javascript/scriptaculous.js?load=effects')}"></script>
diff --git a/ipa-server/ipa-gui/ipagui/templates/principallist.kid b/ipa-server/ipa-gui/ipagui/templates/principallist.kid
index 9978c8ac5..c5dca4f02 100644
--- a/ipa-server/ipa-gui/ipagui/templates/principallist.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/principallist.kid
@@ -23,7 +23,7 @@
 <title>Find Service Principals</title>
 </head>
 <body>
-    <h1>Find Service Principals</h1>
+    <h1 class="system">Find Service Principals</h1>
     <script type="text/javascript" charset="utf-8" src="${tg.url('/static/javascript/tablekit.js')}"></script>
     <div id="search">
         <form action="${tg.url('/principal/list')}" method="get">
diff --git a/ipa-server/ipa-gui/ipagui/templates/principalnew.kid b/ipa-server/ipa-gui/ipagui/templates/principalnew.kid
index 062fdedc2..b7e028911 100644
--- a/ipa-server/ipa-gui/ipagui/templates/principalnew.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/principalnew.kid
@@ -23,7 +23,7 @@
     <title>Add Service Principal</title>
 </head>
 <body>
-    <h1>Add Service Principal</h1>
+    <h1 class="system">Add Service Principal</h1>
 
     ${form.display(action=tg.url('/principal/create'), value=principal)}
 </body>
diff --git a/ipa-server/ipa-gui/ipagui/templates/principalshow.kid b/ipa-server/ipa-gui/ipagui/templates/principalshow.kid
index 0aee5845a..5904f0347 100644
--- a/ipa-server/ipa-gui/ipagui/templates/principalshow.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/principalshow.kid
@@ -45,7 +45,7 @@
          onclick="return confirmDelete();"
     />
 
-  <h1>View Service Principal</h1>
+  <h1 class="system">View Service Principal</h1>
 
     <h2 class="formsection">Principal</h2>
     <table class="formtable" cellpadding="2" cellspacing="0" border="0">
diff --git a/ipa-server/ipa-gui/ipagui/templates/useredit.kid b/ipa-server/ipa-gui/ipagui/templates/useredit.kid
index 92256be1b..9633b53a4 100644
--- a/ipa-server/ipa-gui/ipagui/templates/useredit.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/useredit.kid
@@ -31,7 +31,7 @@
         <span class="small">edit protected fields</span>
       </input>
     </div>
-    <h1>Edit User</h1>
+    <h1 class="user">Edit User</h1>
   </div>
 
 <?python
diff --git a/ipa-server/ipa-gui/ipagui/templates/userlist.kid b/ipa-server/ipa-gui/ipagui/templates/userlist.kid
index 42adcf9ba..9a68b7aed 100644
--- a/ipa-server/ipa-gui/ipagui/templates/userlist.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/userlist.kid
@@ -23,7 +23,7 @@
 <title>Find Users</title>
 </head>
 <body>
-    <h1>Find Users</h1>
+    <h1 class="user">Find Users</h1>
     <script type="text/javascript" charset="utf-8" src="${tg.url('/static/javascript/tablekit.js')}"></script>
     <div id="search">
         <form action="${tg.url('/user/list')}" method="get">
diff --git a/ipa-server/ipa-gui/ipagui/templates/usernew.kid b/ipa-server/ipa-gui/ipagui/templates/usernew.kid
index 7c7d1ed0e..bbb743248 100644
--- a/ipa-server/ipa-gui/ipagui/templates/usernew.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/usernew.kid
@@ -23,7 +23,7 @@
     <title>Add User</title>
 </head>
 <body>
-    <h1>Add User</h1>
+    <h1 class="user">Add User</h1>
 
     ${form.display(action=tg.url("/user/create"), value=user)}
 </body>
diff --git a/ipa-server/ipa-gui/ipagui/templates/usershow.kid b/ipa-server/ipa-gui/ipagui/templates/usershow.kid
index 103543cfb..0c2582b2e 100644
--- a/ipa-server/ipa-gui/ipagui/templates/usershow.kid
+++ b/ipa-server/ipa-gui/ipagui/templates/usershow.kid
@@ -26,7 +26,7 @@
 <?python
 edit_url = tg.url('/user/edit', uid=user.get('uid'))
 ?>
-    <h1>View User</h1>
+    <h1 class="user">View User</h1>
 
     <input py:if="'editors' in tg.identity.groups or 'admins' in tg.identity.groups or tg.identity.display_name == user.get('uid')"
       class="submitbutton" type="button"