Style format, fixed bug where switching the main menu tab caused Opera to flicker.

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 0bf636dee04fc3292dcc3a663084f66760ffbb56..f752dc75419364878e17c73dc545fa27609a252d 100644 (file)
--- 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;
 }