From fb4aa69beaadff09e1807503832a49821d500bff Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Thu, 1 Sep 2011 14:58:49 +0200
Subject: [PATCH] Style format, fixed bug where switching the main menu tab
 caused Opera to flicker.

---
 wcfsetup/install/files/acp/style/testing.css | 280 +++++++++----------
 1 file changed, 140 insertions(+), 140 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 0bf636dee0..f752dc7541 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -81,14 +81,14 @@ header.pageHeader {
 /* Top Menu */
 
 header.pageHeader nav.topMenu {
+	background-color: rgba(0, 0, 0, .4);
 	position: absolute;
 	top: 0;
 	right: 0;
 	left: 0;
 	min-height: 25px;
-	z-index: 10;
 	min-width: 800px;
-	background-color: rgba(0, 0, 0, .4);
+	z-index: 10;
 	
 	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
 	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
@@ -115,15 +115,15 @@ header.pageHeader nav.topMenu ul li a:hover {
 /* Logo */
 
 header.pageHeader div#logo {
+	margin: 0 23px 0;
 	position: relative;
 	z-index: 1;
-	margin: 0 23px 0;
 }
 
 header.pageHeader div#logo h1 {
 	color: #d8e7f5;
-	text-shadow: 0 -1px 0 #000;
 	font-size: 150%;
+	text-shadow: 0 -1px 0 #000;
 	position: relative;
 	top: 70px;
 }
@@ -135,14 +135,14 @@ header.pageHeader div#logo a:hover {
 
 header.pageHeader div#logo img {
 	position: absolute;
-	left: 0;
 	bottom: 10px;
+	left: 0;
 }
 
 header.pageHeader div#logo a {
+	text-align: right;
 	display: block;
 	height: 110px;
-	text-align: right;
 }
 
 /* Main Menu  */
@@ -167,30 +167,42 @@ nav.mainMenu ul {
 	border-top-right-radius: 5px;
 	background-color: rgba(0, 0, 0, .4);
 	display: inline-block;
-	
 }
 
 nav.mainMenu ul li {
+	color: #69c;
 	font-size: 123%;
 	font-weight: normal;
-	color: #69c;
 	text-shadow: 0 -1px 0 #000;
 	cursor: pointer;
-	display: inline-block;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
 	margin: 5px -5px 0;
-	padding: 13px 20px 7px;
+	padding: 10px 20px 7px;
+	display: inline-block;
 	position: relative;
 	top: -7px;
 	z-index: 1;
 	
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
+	-webkit-transition-property: border, background-color, background-image, color;
+	-webkit-transition-duration: .3s;
+	-webkit-transition-timing-function: ease;
 	
-	-webkit-transition: all .2s linear;
-	-moz-transition: all .2s linear;
-	-ms-transition: all .2s linear;
-	-o-transition: all .2s linear;
-	transition: all .2s linear;
+	-moz-transition-property: border, background-color, background-image, color;
+	-moz-transition-duration: .3s;
+	-moz-transition-timing-function: ease;
+	
+	-ms-transition-property: border, background-color, background-image, color;
+	-ms-transition-duration: .3s;
+	-ms-transition-timing-function: ease;
+	
+	-o-transition-property: border, background-color, background-image, color;
+	-o-transition-duration: .3s;
+	-o-transition-timing-function: ease;
+	
+	transition-property: border, background-color, background-image, color;
+	transition-duration: .3s;
+	transition-timing-function: ease;
 }
 
 nav.mainMenu ul li:only-child {
@@ -202,10 +214,10 @@ nav.mainMenu ul li:hover {
 }
 
 nav.mainMenu ul li.activeMenuItem {
-	font-weight: bold;
 	color: #369;
 	text-shadow: 0 1px 0 #fff;
-	z-index: 10;
+	font-size: 150%;
+	font-weight: bold;
 	
 	background-color: #e7f2fd;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7f2fd));
@@ -213,6 +225,8 @@ nav.mainMenu ul li.activeMenuItem {
 	background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e7f2fd));
 	background-image: -o-linear-gradient(#fff, #e7f2fd);
 	background-image: linear-gradient(#fff, #e7f2fd);
+	
+	z-index: 10;
 }
 
 nav.mainMenu ul li.activeMenuItem:first-child {
@@ -226,12 +240,12 @@ nav.mainMenu ul li.activeMenuItem:last-child {
 /* Header Navigation  */
 
 nav.headerNavigation {
-	display: block;
 	background-color: #e7f2fd;
 	border-bottom: 1px solid #bcd;
 	border-top-left-radius: 3px;
 	border-top-right-radius: 3px;
 	margin: 0 23px;
+	display: block;
 	position: relative;
 	min-width: 800px;
 }
@@ -282,11 +296,11 @@ div.main {
 section.content {
 	background-color: #fff;
 	display: table-cell;
-	vertical-align: top;
 	padding: 25px 35px;
 	position: relative;
 	width: 100%;
 	z-index: 100;
+	vertical-align: top;
 }
 
 section.content .content {
@@ -303,13 +317,13 @@ div.main > div section:only-child {
 /* -- -- -- -- -- Sidebar -- -- -- -- -- */
 
 aside.sidebar {
-	display: table-cell;
-	vertical-align: top;
 	border-right: 1px solid #bcd;
+	background-color: #d8e7f5;
 	margin: 0 !important;
 	padding: 0 !important;
+	display: table-cell;
 	position: relative;
-	background-color: #d8e7f5;
+	vertical-align: top;
 	
 	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
@@ -326,9 +340,9 @@ nav.sidebarMenu {
 }
 
 nav.sidebarMenu > div {
-	position: relative;
 	color: #69c;
 	text-shadow: 0 1px 0 #fff;
+	position: relative;
 }
 
 nav.sidebarMenu > div a:hover {
@@ -337,14 +351,14 @@ nav.sidebarMenu > div a:hover {
 }
 
 nav.sidebarMenu > div h1 {
-	background-image: url("../../icon/closed.svg");
-	background-position: 15px center;
-	background-size: 16px;
-	background-repeat: no-repeat;
 	color: #369;
 	cursor: pointer;
 	font-size: 130%;
 	font-weight: bold;
+	background-image: url("../../icon/closed.svg");
+	background-position: 15px center;
+	background-size: 16px;
+	background-repeat: no-repeat;
 	margin-top: 5px;
 	padding: 7px 25px 7px 35px;
 	position: relative;
@@ -361,14 +375,14 @@ nav.sidebarMenu > div ul li {
 nav.sidebarMenu > div ul li a {
 	color: #69c;
 	text-shadow: 0 1px 0 #fff;
-	display: block;
 	padding: 5px 25px 7px 35px;
+	display: block;
 }
 
 nav.sidebarMenu > div ul li.activeMenuItem {
 	background-color: #fff;
-	overflow: hidden;
 	margin-right: -1px;
+	overflow: hidden;
 	
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
@@ -387,10 +401,9 @@ nav.sidebarMenu > div ul li.activeMenuItem a {
 /* -- -- -- -- -- Page Footer -- -- -- -- --  */
 
 footer.pageFooter {
-	clear: both;
-	padding: 0 23px;
-	position: relative;
 	text-align: center;
+	padding: 0 23px;
+	clear: both;
 	position: relative;
 	min-width: 800px;
 }
@@ -402,12 +415,12 @@ footer.pageFooter:after {
 }
 
 footer.pageFooter > div {
-	background-color: #e7f2fd;
 	border-top: 1px solid #bcd;
 	border-bottom-left-radius: 3px;
 	border-bottom-right-radius: 3px;
-	clear: both;
+	background-color: #e7f2fd;
 	padding: 3px 7px;
+	clear: both;
 }
 
 footer.pageFooter > div:after {
@@ -418,8 +431,8 @@ footer.pageFooter > div:after {
 
 footer.pageFooter .copyright {
 	padding-top: 20px;
-	min-height: 40px;
 	display: inline-block;
+	min-height: 40px;
 }
 
 footer.pageFooter .copyright a {
@@ -466,17 +479,17 @@ footer.pageFooter nav.footerNavigation ul li {
 }
 
 .mainHeading > hgroup {
-	min-height: 48px;
-	padding-left: 60px;
 	margin-bottom: 30px;
+	padding-left: 60px;
+	min-height: 48px;
 }
 
 .mainHeading > hgroup h1 {
-	border-bottom: 1px solid #999;
 	color: #666;
-	text-shadow: 0 1px 0 #fff;
 	font-size: 175%;
 	font-weight: bold;
+	text-shadow: 0 1px 0 #fff;
+	border-bottom: 1px solid #999;
 	padding-bottom: 10px;
 }
 
@@ -495,9 +508,9 @@ footer.pageFooter nav.footerNavigation ul li {
 
 .subHeading h1 {
 	color: #999;
-	border-bottom: 1px solid #ccc;
 	font-size: 150%;
 	text-shadow: 0 1px 0 #fff;
+	border-bottom: 1px solid #ccc;
 	margin: 10px 0;
 	padding: 10px 0;
 }
@@ -509,27 +522,22 @@ footer.pageFooter nav.footerNavigation ul li {
 fieldset {
 	border: 1px solid #ccc;
 	border-radius: 7px;
+	background-color: rgba(0, 0, 0, .015);
 	margin: 15px 0;
 	padding: 15px;
-	
-	background-color: rgba(0, 0, 0, .015);
-	/* experimental 
+}
+
+/* experimental 
+fieldset.topLink {
 	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
 	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
 	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
 	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
 	background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
-	*/
-}
-/*
-fieldset:first-child {
-	margin-top: 0;
-}
-
-fieldset:last-child {
-	margin-bottom: 0;
+	
 }
 */
+
 fieldset legend {
 	color: #999;
 	padding: 0 7px 0;
@@ -559,17 +567,17 @@ fieldset > ul li {
 /* Simple */
 
 dl {
-	clear: both;
 	margin-bottom: 7px;
+	clear: both;
 	position: relative;
 }
 
 dl > dt {
 	color: #69c;
-	float: left;
 	text-align: right;
-	width: 230px;
 	margin-top: 5px; /* not so nice */
+	float: left;
+	width: 230px;
 }
 
 dl > dt > label {
@@ -605,8 +613,8 @@ dl > dd > fieldset > legend {
 }
 
 dl > dd > fieldset > dl > dt {
-	width: 150px;
 	margin-right: 20px;
+	width: 150px;
 }
 
 dl > dd > fieldset > dl > dd {
@@ -620,8 +628,8 @@ dl > dd > fieldset > dl > dd > label {
 /* Reversed */
 
 dt.reversed {
-	margin-top: 2px;
 	text-align: left;
+	margin-top: 2px;
 	position: absolute;
 	left: 270px;
 	width: auto;
@@ -708,8 +716,8 @@ input[type="search"]:hover,
 input[type="email"]:hover,
 input[type='password']:hover,
 textarea:hover {
-	background-color: #fffff6;
 	border: 1px solid #69c;
+	background-color: #fffff6;
 }
 
 /* inputs active */
@@ -723,8 +731,8 @@ input[type="search"]:focus,
 input[type="email"]:focus,
 input[type='password']:focus,
 textarea:focus {
-	background-color: #fffff6;
 	border: 1px solid #69c;
+	background-color: #fffff6;
 	
 	-webkit-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
 	-moz-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
@@ -739,12 +747,6 @@ textarea {
 	width: 95%;
 }
 
-/* that's not nice! 
-select {
-	width: 95%;
-}
-*/
-
 .tiny {
 	width: 100px;
 }
@@ -785,14 +787,12 @@ select {
 input[type='reset'],
 input[type='submit'],
 .largeButtons ul li a {
-	font-size: 100%;
-	border: 1px solid #999;
-	border-radius: 30px;
 	color: #999;
+	font-size: 100%;
 	font-weight: bold;
-	display: inline-block;
-	padding: 5px 13px;
 	text-shadow: 0 1px 0 #fff;
+	border: 1px solid #999;
+	border-radius: 30px;
 	
 	background-color: #fefefe;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
@@ -801,6 +801,9 @@ input[type='submit'],
 	background-image: -o-linear-gradient(#fefefe, #eee);
 	background-image: linear-gradient(#fefefe, #eee);
 	
+	padding: 5px 13px;
+	display: inline-block;
+	
 	-webkit-transition: all .2s linear;
 	-moz-transition: all .2s linear;
 	-ms-transition: all .2s linear;
@@ -812,9 +815,9 @@ input[type='submit'],
 input[type='reset']:hover,
 input[type='submit']:hover,
 .largeButtons ul li a:hover {
-	border: 1px solid #666;
 	color: #666;
 	text-decoration: none;
+	border: 1px solid #666;
 }
 
 /* buttons active */
@@ -856,8 +859,8 @@ input[type='submit']:active,
 /* default buttons normal */
 input[type='submit'],
 .largeButtons ul li.default a {
-	border: 1px solid #69c;
 	color: #69c;
+	border: 1px solid #69c;
 	
 	background-color: #e7f2fd;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d8e7f5));
@@ -906,8 +909,8 @@ input[type='submit'],
 /* default buttons hover */
 input[type='submit']:hover,
 .largeButtons ul li.default a:hover {
-	border: 1px solid #369;
 	color: #369;
+	border: 1px solid #369;
 }
 
 /* default buttons active */
@@ -928,10 +931,10 @@ input[type='submit']:active,
 
 /* ToDo: depracated? */
 .largeButtons ul li a img {
-	vertical-align: middle;
 	margin: 0;
 	height: 24px;
 	width: 24px;
+	vertical-align: middle;
 }
 
 
@@ -947,14 +950,13 @@ input[type='submit']:active,
 /* -- -- -- -- -- Box Title -- -- -- -- -- */
 
 .boxTitle {
+	border-radius: 7px;
 	background-color: #369;
 	/* Disabled, because the WoltLab header-image is not LGPL 
 	Activate it if you want to test your own header image */
 	/* background-image: url("../images/header.png"); */
 	background-position: left top;
-	background-repeat: repeat-x;
-
-	border-radius: 7px;
+	background-repeat: repeat-x;	
 	
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
@@ -979,11 +981,11 @@ input[type='submit']:active,
 }
 
 .boxTitle img.handle {
+	cursor: pointer;
+	margin-top: -1px;
 	float: right !important;
 	height: 16px;
 	width: 16px;
-	cursor: pointer;
-	margin-top: -1px;
 }
 
 
@@ -995,12 +997,12 @@ input[type='submit']:active,
 
 .tabMenu {
 	text-shadow: 0 1px 0 #fff;
-	background-color: none;
 	/* This is the general toggle switch for tab menu orientation (options: left|center|right) */
 	text-align: center;
+	white-space: nowrap;
+	background-color: none;
 	padding: 0 5px;
 	display: block;
-	white-space: nowrap;
 	position: relative;
 }
 
@@ -1010,23 +1012,25 @@ input[type='submit']:active,
 	clear: both;
 }
 
+/*
 .tabMenu ul {
 	
 }
+*/
 
 .tabMenu li {
+	white-space: nowrap;
 	list-style: none;
 	display: inline-block;
-	white-space: nowrap;
 	z-index: 90; /* Prevents border overlay during transition */
 }
 
 .tabMenu li a {
 	color: #999;
 	font-size: 110%;
+	text-decoration: none;
 	cursor: pointer;
 	padding: 10px 15px 7px;
-	text-decoration: none;
 	border-width: 1px 1px 0 1px;
 	border-style: solid;
 	border-color: #ddd;
@@ -1043,8 +1047,8 @@ input[type='submit']:active,
 
 .tabMenu li.ui-state-active a {
 	color: #333 !important;
-	font-weight: bold;
 	font-size: 130%;
+	font-weight: bold;
 	border-width: 1px;
 	border-style: solid;
 	border-color: #ccc;
@@ -1063,10 +1067,10 @@ input[type='submit']:active,
 .tabMenuContent {
 	border: 1px solid #ccc;
 	background-color: rgba(255, 255, 255, 1);
-	z-index: 89; /* Prevents border overlay during transition */
-	display: block;
 	margin-top: -1px;
 	padding: 15px 23px;
+	display: block;
+	z-index: 89; /* Prevents border overlay during transition */
 }
 
 /* ToDo: 2x hidden? */
@@ -1091,9 +1095,9 @@ input[type='submit']:active,
 
 .menu {
 	color: #666;
+	border-bottom: 1px solid #ccc;
 	margin: -15px -23px 0;
 	padding: 0 7px 10px;
-	border-bottom: 1px solid #ccc;
 }
 
 .tabMenuContent > .menu {
@@ -1110,20 +1114,20 @@ input[type='submit']:active,
 }
 
 .menu ul li {
-	display: inline-block;
-	margin-top: 10px;
 	white-space: nowrap;
+	margin-top: 10px;
+	display: inline-block;
 }
 
 .menu ul li a {
 	color: #666;
 	font-size: 85%;
-	text-decoration: none;
 	text-shadow: 0 1px 0 #fff;
+	text-decoration: none;
 	border: 1px solid rgba(0, 0, 0, .2);
+	border-radius: 13px;
 	background-color: rgba(255, 255, 255, .5);
 	padding: 2px 10px;
-	border-radius: 13px;
 	
 	-webkit-transition: color .1s linear;
 	-moz-transition: color .1s linear;
@@ -1146,9 +1150,9 @@ input[type='submit']:active,
 
 .menu ul li.ui-state-active a {
 	color: #fff;
-	cursor: default;
 	font-weight: bold;
 	text-shadow: 0 1px 0 #000;
+	cursor: default;
 	border: 1px solid rgba(0, 0, 0, .2);
 	background-color: rgba(0, 0, 0, .5);
 }
@@ -1157,9 +1161,9 @@ input[type='submit']:active,
 
 .boxTitle > .menu {
 	color: #fff;
+	border: none;
 	margin: 0 !important;
 	padding: 6px 7px !important;
-	border: none;
 }
 
 .boxTitle > .menu ul li {
@@ -1172,9 +1176,9 @@ input[type='submit']:active,
 	text-decoration: none;
 	text-shadow: 0 -1px 0 #000;
 	border: 1px solid rgba(0, 0, 0, .3);
+	border-radius: 13px;
 	background-color: rgba(0, 0, 0, .1);
 	padding: 2px 10px;
-	border-radius: 13px;
 	
 	-webkit-transition: color .1s linear;
 	-moz-transition: color .1s linear;
@@ -1234,16 +1238,17 @@ thead th p a,
 thead th p.emptyHead {
 	color: #69c !important;
 	text-shadow: 0 -1px 0 #000;
-	display: block;
 	text-decoration: none !important;
-	padding: 7px;
-	background-color: rgba(0, 0, 0, .3);
 	
+	background-color: rgba(0, 0, 0, .3);
 	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
 	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
 	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
 	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
 	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+	
+	padding: 7px;
+	display: block;
 }
 
 thead th p a {
@@ -1260,9 +1265,9 @@ thead th:hover p a {
 }
 
 thead th.active p a {
-	background-color: rgba(0, 0, 0, .4);
-	font-weight: bold;
 	color: #fff !important;
+	font-weight: bold;
+	background-color: rgba(0, 0, 0, .4);
 	
 	-webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
 	-moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .5);
@@ -1295,7 +1300,7 @@ tbody tr {
 }
 
 tbody tr:first-child {
-	/* prevents icon-column from wrapping */
+	/* prevents line-breaks in icon-column */
 	white-space: nowrap;
 }
 
@@ -1374,21 +1379,22 @@ tbody tr .columnIcon img {
 /* This is only experimental for the moment */
 
 .pageNavigation ul li:not(.children) {
+	border: 1px solid rgba(0, 0, 0, .2);
+	border-radius: 3px;
+	
 	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 	
-	border: 1px solid rgba(0, 0, 0, .2);
-	border-radius: 3px;
 	display: inline-block;
 	position: relative;
 }
 
 .pageNavigation ul li.disabled {
-	background-image: none;
 	border: 1px solid rgba(0, 0, 0, .1);
+	background-image: none;
 }
 
 .pageNavigation ul li:after {
@@ -1398,8 +1404,8 @@ tbody tr .columnIcon img {
 }
 
 .pageNavigation ul li img {
-	width: 16px;
 	height: 16px;
+	width: 16px;
 }
 
 .pageNavigation ul li:not(.disabled):hover {
@@ -1410,8 +1416,8 @@ tbody tr .columnIcon img {
 }
 
 .pageNavigation ul li.skip {	
-	top: -1px;
 	padding: 2px 2px 1px 3px;
+	top: -1px;
 }
 
 .pageNavigation ul li a {
@@ -1436,8 +1442,8 @@ tbody tr .columnIcon img {
 	color: #fff;
 	text-shadow: 0 1px 0 #000;
 	border: 1px solid rgba(0, 0, 0, .3);
-	background-color: rgba(0, 0, 0, .5);
 	
+	background-color: rgba(0, 0, 0, .5);
 	background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
 	background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
 	background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
@@ -1461,31 +1467,23 @@ tbody tr .columnIcon img {
 }
 
 .pageNavigation ul li.children img {
-	width: 7px;
 	height: 9px;
+	width: 7px;
 }
 
 
 
-
-
-
-
-
-
-
-
 /* -- -- -- -- -- System Notifications -- -- -- -- -- */
 
 p.info,
 p.error,
 p.success,
 p.warning {
+	text-shadow: 0 1px 0 #fff;
+	line-height: 1.5;
 	border-radius: 7px;
 	margin-bottom: 14px;
 	padding: 7px 14px 7px 50px;
-	line-height: 1.5;
-	text-shadow: 0 1px 0 #fff;
 	
 	-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
 	-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .1);
@@ -1556,15 +1554,15 @@ div#packageInstallationDialogContainer {
 	background-image: -o-linear-gradient(#fefefe, #eee);
 	background-image: linear-gradient(#fefefe, #eee);
 	
+	padding: 21px;
 	height: 100%;
 	max-width: 600px;
-	padding: 21px;
 }
 
 div#ajaxExceptionStacktrace {
+	white-space: nowrap;
 	overflow: scroll;
 	overflow-y: hidden;
-	white-space: nowrap;
 }
 
 div#packageInstallationInnerContentContainer {
@@ -1575,18 +1573,18 @@ div#packageInstallationInnerContentContainer {
 }
 
 div#packageInstallationInnerContent p.error {
-	background-color: #fdd;
 	border: 3px solid #ed1c24;
 	border-radius: 5px;
+	background-color: #fdd;
 	margin-bottom: 14px;
 	padding: 7px;
 }
 
 div#ajaxExceptionStacktrace {
-	border: 1px solid #ccc;
 	font-family: monospace;
 	font-size: 90%;
 	line-height: 1.2em;
+	border: 1px solid #ccc;
 	padding: 3px;
 }
 
@@ -1597,10 +1595,10 @@ div#ajaxExceptionStacktrace {
 /* ToDo */
 
 #actionProxyLoading {
-	background-color: #faebd7;
 	border: 1px solid #f80;
 	border-top-width: 0;
 	border-radius: 0 0 5px 5px;
+	background-color: #faebd7;
 	padding: 7px 21px 7px;
 	position: fixed;
 	top: 0;
@@ -1632,8 +1630,8 @@ div.ui-dialog-content p {
 }
 
 div.ui-dialog-titlebar {
-	background-color: #ccc;
 	border-bottom: 5px solid rgba(0, 0, 0, .6);
+	background-color: #ccc;
 	padding: 7px;
 	position: relative;
 }
@@ -1686,12 +1684,12 @@ div.ui-widget-overlay {
 
 /* end clearfix */
 .ui-helper-zfix {
+	opacity: 0;
+	position: absolute;
 	width: 100%;
 	height: 100%;
 	top: 0;
 	left: 0;
-	position: absolute;
-	opacity: 0;
 }
 
 
@@ -1745,24 +1743,25 @@ div.ui-widget-overlay {
 .badgeButton {
 	color: #999;
 	text-shadow: 0 1px 0 #fff;
+	text-decoration: none !important;
 	border: 1px solid #999;
+	
 	background-color: #fff;
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+	
 	margin-right: 0;
 	margin-left: 0;
 	padding: 3px 10px 5px;
-	text-decoration: none !important;
 	
 	-webkit-transition: all .2s linear;
 	-moz-transition: all .2s linear;
 	-ms-transition: all .2s linear;
 	-o-transition: all .2s linear;
 	transition: all .2s linear;
-	
-	background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-	background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-	background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
-	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
 }
 
 .badgeButton:hover {
@@ -1786,15 +1785,16 @@ div.ui-widget-overlay {
 /* Balloon Tooltips */
 
 #balloonTooltip {
+	color: #fff;
 	font-size: .85em;
-	padding: 5px 10px 7px;
 	border: 1px solid rgba(255, 255, 255, .7) !important;
-	background-color: rgba(0, 0, 0, .7);
-	color: #fff;
 	border-radius: 5px;
-	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+	background-color: rgba(0, 0, 0, .7);
+	padding: 5px 10px 7px;
 	max-width: 300px;
 	z-index: 900;
+	
+	box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
 }
 
 
@@ -1806,13 +1806,13 @@ div.ui-widget-overlay {
 /* Collapsible */
 
 .collapsible {
-	float: left;
 	margin: 5px 5px 0 5px;
+	float: left;
 }
 
 .collapsible img {
-	width: 16px;
 	height: 16px;
+	width: 16px;
 }
 
 
-- 
2.20.1