From: Luzifr <szekely@woltlab.com>
Date: Wed, 21 Sep 2011 20:21:43 +0000 (+0200)
Subject: One more time dropdowns; CSS clean-up: button-colors
X-Git-Tag: 2.0.0_Beta_1~1780^2~4
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b52e12ec28dc2f85f56c9c07f0505b7737836d35;p=GitHub%2FWoltLab%2FWCF.git

One more time dropdowns; CSS clean-up: button-colors

More dropdown-changes; All buttons now get their colors by the same
style block! Only special/individual styles are declared separately.
This should make the file  a lot smaller. Maybe there are some bugs to
fix after this update.
---

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index 9e8c85cbd6..87719059f9 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -169,7 +169,7 @@ header.pageHeader nav.topMenu li ul li:hover a {
 
 
 
-/*  */
+/* ToDo */
 
 
 /* Todo: Top Menu Dropdowns */
@@ -1063,70 +1063,11 @@ textarea {
 
 /* normal */
 .preInput .dropdownCaption {
-	font-size: 100%;
-	font-weight: bold;
-	text-decoration: none;
-	text-shadow: 0 1px 0 #fff;
-	color: #999;
 	cursor: pointer;
 	
-	border-width: 1px;
 	border-radius: 3px 0 0 3px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
-	
-	background-color: #fefefe;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	
 	padding: 5px 10px;
 	display: inline-block;
-	
-	-webkit-transition: all .1s linear;
-	-moz-transition: all .1s linear;
-	-ms-transition: all .1s linear;
-	-o-transition: all .1s linear;
-	transition: all .1s linear;
-}
-
-/* hover */
-.preInput:hover .dropdownCaption {
-	color: #666;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ffc053 #fa2 #fc9e07;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
-/* active */
-.preInput .dropdownCaption:focus,
-.preInput .dropdownCaption:active {
-	color: #333;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fc9e07 #fa2 #ffc053;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
 
@@ -1280,6 +1221,8 @@ textarea {
 
 /* -- -- -- -- -- Large Buttons -- -- -- -- -- */
 
+/* Colors are being taken from the global color styles */
+
 .largeButtons {
 	text-align: right;
 }
@@ -1302,74 +1245,141 @@ input[type='button'],
 .largeButtons ul li a {
 	font-size: 100%;
 	font-weight: bold;
-	text-decoration: none;
-	text-shadow: 0 1px 0 #fff;
-	color: #999;
 	
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
 	border-radius: 30px;
 	
-	background-color: #fefefe;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	
 	margin: 3px 2px;
 	padding: 5px 13px;
 	display: inline-block;
+}
+
+
+
+/* -- -- -- -- -- Border -- -- -- -- -- */
+
+.border {
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	margin-top: 15px;
+}
+
+.border.overlay {
+	margin-top: 0 !important;
+}
+
+/* -- -- -- -- -- 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;	
 	
-	-webkit-transition: all .1s linear;
-	-moz-transition: all .1s linear;
-	-ms-transition: all .1s linear;
-	-o-transition: all .1s linear;
-	transition: all .1s linear;
+	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 }
 
-/* buttons hover */
-input[type='reset']:hover,
-input[type='submit']:hover,
-input[type='button']:hover,
-input[type='button'].default:hover,
-.largeButtons ul li a:hover {
+.boxTitle > hgroup {
+	text-shadow: 0 -1px 0 #000;
+	color: #fff;
+	padding: 7px;
+	display: inline-block;
+}
+
+.boxTitle > hgroup a, .boxTitle > a {
+	text-decoration: none;
+	color: #fff;
+}
+
+.boxTitle > hgroup h1 {
+	display: inline-block;
+}
+
+.boxTitle > hgroup h2 {
+	font-size: 85%;
+	color: rgba(255, 255, 255, .9);
+	margin-top: 5px;
+}
+
+.boxTitle img.handle {
+	cursor: pointer;
+	margin-top: -1px;
+	float: right !important;
+	height: 16px;
+	width: 16px;
+}
+
+
+
+/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
+
+/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
+
+/* Tab Menu */
+
+.tabMenu {
+	text-shadow: 0 1px 0 #fff;
+	/* This is the general toggle switch for tab menu orientation (options: left|center|right) */
+	text-align: center;
+	white-space: nowrap;
+	background-color: none;
+	margin-top: 15px;
+	padding: 0 5px;
+	display: block;
+	position: relative;
+}
+
+.tabMenu:after {
+	content: '';
+	display: block;
+	clear: both;
+}
+
+.tabMenu li {
+	white-space: nowrap;
+	list-style: none;
+	display: inline-block;
+}
+
+.tabMenu li a {
+	font-size: 110%;
+	text-decoration: none;
+	color: #999;
+	cursor: pointer;
+	padding: 10px 15px 7px;
+	border-width: 1px 1px 0 1px;
+	border-style: solid;
+	border-color: #ddd;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background-color: rgba(0, 0, 0, .05);
+	display: inline-block;
+	position: relative;
+	bottom: -1px;
+	z-index: 10;
+	max-width: 200px;
+	overflow: hidden;
+}
+
+.tabMenu li:not(.ui-state-active) a:hover {
 	color: #666;
 	border-width: 1px;
 	border-style: solid;
-	border-color: #ffc053 #fa2 #fc9e07;
-	
+	border-color: #fa2 #fa2 #ccc;
 	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 }
 
-/* buttons active */
-input[type='reset']:focus,
-input[type='submit']:focus,
-input[type='button']:focus,
-input[type='button'].default:focus,
-.largeButtons ul li a:focus,
-input[type='reset']:active,
-input[type='submit']:active,
-input[type='button']:active,
-input[type='button'].default:active,
-.largeButtons ul li a:active{
-	color: #333;
+.tabMenu li:not(.ui-state-active) a:active,
+.tabMenu li:not(.ui-state-active) a:focus {
 	border-width: 1px;
 	border-style: solid;
-	border-color: #fc9e07 #fa2 #ffc053;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	border-color: #fa2 #fa2 #ccc;
 	
 	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
@@ -1378,433 +1388,23 @@ input[type='button'].default:active,
 	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
-/* default buttons glow */
-@-webkit-keyframes glowLargeButtons {
-    0% {
-        -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
-    }
+.tabMenu li.ui-state-active a {
+	font-size: 130%;
+	font-weight: bold;
+	color: #333 !important;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ccc;
+	border-bottom-color: #fff;
+	background-color: rgba(255, 255, 255, 1);
+	bottom: 0;
+	z-index: 30;
 }
-@-moz-keyframes glowLargeButtons {
-    0% {
-        -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
-    }
-    100% {
-        -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
-    }
-}
-@-ms-keyframes glowLargeButtons {
-    0% {
-        -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
-    }
-    100% {
-        -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
-    }
-}
-@-o-keyframes glowLargeButtons {
-    0% {
-        -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
-    }
-    100% {
-        -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
-    }
-}
-@keyframes glowLargeButtons {
-    0% {
-        box-shadow: 0 0 13px rgba(102, 153, 204, .3);
-    }
-    100% {
-        box-shadow: 0 0 13px rgba(102, 153, 204, .1);
-    }
-}
-
-/* default buttons normal */
-input[type='submit'],
-input[type='button'].default,
-.largeButtons ul li.default a {
-	color: #69c;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #7aade0 #69c #5285b8;
-	
-	background-color: #e7f2fd;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-	
-	-webkit-box-shadow: 0 0 10px #369;
-	-moz-box-shadow: 0 0 10px #369;
-	-ms-box-shadow: 0 0 10px #369;
-	-o-box-shadow: 0 0 10px #369;
-	box-shadow: 0 0 10px #369;
-	
-	-webkit-animation-name: glowLargeButtons;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowLargeButtons;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowLargeButtons;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	
-	-o-animation-name: glowLargeButtons;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	
-	animation-name: glowLargeButtons;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-/* default buttons hover glow */
-@-webkit-keyframes glowLargeButtonsHover {
-    0% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@-moz-keyframes glowLargeButtonsHover {
-    0% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@-ms-keyframes glowLargeButtonsHover {
-    0% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@-o-keyframes glowLargeButtonsHover {
-    0% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-@keyframes glowLargeButtonsHover {
-    0% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .3);
-    }
-    100% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .1);
-    }
-}
-
-/* default buttons hover */
-input[type='submit']:hover,
-input[type='button'].default:hover,
-.largeButtons ul li.default a:hover {	
-	-webkit-box-shadow: 0 0 10px #fa2;
-	-moz-box-shadow: 0 0 10px #fa2;
-	-ms-box-shadow: 0 0 10px #fa2;
-	-o-box-shadow: 0 0 10px #fa2;
-	box-shadow: 0 0 10px #fa2;
-	
-	-webkit-animation-name: glowLargeButtonsHover;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowLargeButtonsHover;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowLargeButtonsHover;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	
-	-o-animation-name: glowLargeButtonsHover;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	
-	animation-name: glowLargeButtonsHover;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-/* default buttons active glow */
-@-webkit-keyframes glowDefaultLargeButtonsActive {
-    0% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@-moz-keyframes glowDefaultLargeButtonsActive {
-    0% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@-ms-keyframes glowDefaultLargeButtonsActive {
-    0% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@-o-keyframes glowDefaultLargeButtonsActive {
-    0% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-@keyframes glowDefaultLargeButtonsActive {
-    0% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-    100% {
-        box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
-    }
-}
-
-/* default buttons active */
-input[type='submit']:focus,
-input[type='button'].default:focus,
-.largeButtons ul li.default a:focus,
-input[type='submit']:active,
-input[type='button'].default:active,
-.largeButtons ul li.default a:active {
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	
-	-webkit-animation-name: glowDefaultLargeButtonsActive;
-	-webkit-animation-duration: 1s;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-timing-function: ease-in-out; 
-	
-	-moz-animation-name: glowDefaultLargeButtonsActive;
-	-moz-animation-duration: 1s;
-	-moz-animation-iteration-count: infinite;
-	-moz-animation-direction: alternate;
-	-moz-animation-timing-function: ease-in-out;
-	
-	-ms-animation-name: glowDefaultLargeButtonsActive;
-	-ms-animation-duration: 1s;
-	-ms-animation-iteration-count: infinite;
-	-ms-animation-direction: alternate;
-	-ms-animation-timing-function: ease-in-out; 
-	
-	-o-animation-name: glowDefaultLargeButtonsActive;
-	-o-animation-duration: 1s;
-	-o-animation-iteration-count: infinite;
-	-o-animation-direction: alternate;
-	-o-animation-timing-function: ease-in-out;
-	
-	animation-name: glowDefaultLargeButtonsActive;
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-}
-
-/* disabled buttons */
-input[disabled='disabled'],
-input[type='button'][disabled='disabled'],
-.largeButtons ul li.disabled a {
-	color: #999;
-	cursor: default;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
-}
-
-
-
-/* -- -- -- -- -- Border -- -- -- -- -- */
-
-.border {
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	margin-top: 15px;
-}
-
-.border.overlay {
-	margin-top: 0 !important;
-}
-
-/* -- -- -- -- -- 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;	
-	
-	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	-o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
-}
-
-.boxTitle > hgroup {
-	text-shadow: 0 -1px 0 #000;
-	color: #fff;
-	padding: 7px;
-	display: inline-block;
-}
-
-.boxTitle > hgroup a, .boxTitle > a {
-	text-decoration: none;
-	color: #fff;
-}
-
-.boxTitle > hgroup h1 {
-	display: inline-block;
-}
-
-.boxTitle > hgroup h2 {
-	font-size: 85%;
-	color: rgba(255, 255, 255, .9);
-	margin-top: 5px;
-}
-
-.boxTitle img.handle {
-	cursor: pointer;
-	margin-top: -1px;
-	float: right !important;
-	height: 16px;
-	width: 16px;
-}
-
-
-
-/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
-
-/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
-
-/* Tab Menu */
-
-.tabMenu {
-	text-shadow: 0 1px 0 #fff;
-	/* This is the general toggle switch for tab menu orientation (options: left|center|right) */
-	text-align: center;
-	white-space: nowrap;
-	background-color: none;
-	margin-top: 15px;
-	padding: 0 5px;
-	display: block;
-	position: relative;
-}
-
-.tabMenu:after {
-	content: '';
-	display: block;
-	clear: both;
-}
-
-.tabMenu li {
-	white-space: nowrap;
-	list-style: none;
-	display: inline-block;
-}
-
-.tabMenu li a {
-	font-size: 110%;
-	text-decoration: none;
-	color: #999;
-	cursor: pointer;
-	padding: 10px 15px 7px;
-	border-width: 1px 1px 0 1px;
-	border-style: solid;
-	border-color: #ddd;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	background-color: rgba(0, 0, 0, .05);
-	display: inline-block;
-	position: relative;
-	bottom: -1px;
-	z-index: 10;
-	max-width: 200px;
-	overflow: hidden;
-}
-
-.tabMenu li:not(.ui-state-active) a:hover {
-	color: #666;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fa2 #fa2 #ccc;
-	background-color: #fff9f4;
-}
-
-.tabMenu li:not(.ui-state-active) a:active,
-.tabMenu li:not(.ui-state-active) a:focus {
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fa2 #fa2 #ccc;
-	
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.tabMenu li.ui-state-active a {
-	font-size: 130%;
-	font-weight: bold;
-	color: #333 !important;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc;
-	border-bottom-color: #fff;
-	background-color: rgba(255, 255, 255, 1);
-	bottom: 0;
-	z-index: 30;
-}
-
-.tabMenu li.ui-state-active a,
-.tabMenu li.ui-state-disabled a,
-.tabMenu li.ui-state-processing a {
-	cursor: default;
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+	cursor: default;
 }
 
 /* Tab Menu Content */
@@ -2188,28 +1788,16 @@ table input[type='checkbox'] {
 /* Page-Navigation Popups are still missing */
 
 .pageNavigation ul li:not(.children) {
-	color: #999;
-	
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ccc #bbb #aaa;
 	border-radius: 3px;
 	
-	background-color: #fefefe;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	
 	display: inline-block;
 	position: relative;
 }
 
 .pageNavigation ul li.disabled {
 	cursor: not-allowed;
-	border: 1px solid rgba(0, 0, 0, .1);
-	background-image: none;
+	border: 1px solid rgba(0, 0, 0, .1) !important;
+	background-image: none !important;
 }
 
 .pageNavigation ul li:after {
@@ -2223,59 +1811,24 @@ table input[type='checkbox'] {
 	width: 16px;
 }
 
-.pageNavigation ul li:not(.disabled):hover {
-	color: #666;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #ffc053 #fa2 #fc9e07;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-}
-
 .pageNavigation ul li.skip {	
-	padding: 2px 2px 1px 3px;
-	top: -1px;
-}
-
-.pageNavigation ul li a {
-	text-shadow: 0 1px 0 #fff;
-	text-decoration: none;
-	color: #999;
-	display: inline-block;
-}
-
-.pageNavigation ul li:not(.disabled):hover a {
-	color: #666;
-}
-
-.pageNavigation ul li:not(.skip) a {
-	padding: 3px 5px;
-}
-
-.pageNavigation ul li:not(.disabled):active,
-.pageNavigation ul li:not(.disabled):focus {
-	color: #333;
-	border-width: 1px;
-	border-style: solid;
-	border-color: #fc9e07 #fa2 #ffc053;
-	
-	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-	
-	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	padding: 2px 2px 1px 3px;
+	top: -1px;
+}
+
+.pageNavigation ul li a {
+	text-shadow: 0 1px 0 #fff;
+	text-decoration: none;
+	color: #999;
+	display: inline-block;
+}
+
+.pageNavigation ul li:not(.disabled):hover a {
+	color: #666;
+}
+
+.pageNavigation ul li:not(.skip) a {
+	padding: 3px 5px;
 }
 
 .pageNavigation ul li:active a,
@@ -2285,20 +1838,22 @@ table input[type='checkbox'] {
 
 .pageNavigation ul li.active,
 .pageNavigation ul li.active:hover {
-	text-shadow: 0 1px 0 #000;
-	color: #fff;
-	border: 1px solid rgba(0, 0, 0, .3);
+	text-shadow: 0 1px 0 #000 !important;
+	color: #fff !important;
+	border: 1px solid rgba(0, 0, 0, .3) !important;
 	
-	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);
-	background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
-	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px);
+	background-color: rgba(0, 0, 0, .5) !important;
+	background-image: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -moz-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -o-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: -ms-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
+	background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 3px) !important;
 	
 	padding: 3px 5px;
 }
 
+/* ToDo: Children */
+
 .pageNavigation ul li.children,
 .pageNavigation ul li.children:hover,
 .pageNavigation ul li.children:active,
@@ -2489,104 +2044,293 @@ a.ui-dialog-titlebar-close span {
 	visibility: hidden;
 }
 
-div.ui-widget-overlay {
-	background-color: #000;
-	opacity: .6;
-	position: fixed;
-	top: 0;
-	left: 0;
+div.ui-widget-overlay {
+	background-color: #000;
+	opacity: .6;
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+
+
+/* ToDo: Is all that really necessary? We wanted to support good browsers only */
+
+.ui-helper-clearfix {
+	display: inline-block;
+}
+
+/* Required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix {
+	height: 1%;
+}
+
+.ui-helper-clearfix {
+	display: block;
+}
+
+/* end clearfix */
+.ui-helper-zfix {
+	opacity: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+}
+
+.ui-dialog {
+	background-color: rgba(255, 255, 255, .9);
+}
+
+
+/* -- -- -- -- -- Badges -- -- -- -- -- */
+
+/* Globals */
+
+.badge {
+	font-size: 85%;
+	text-shadow: none;
+	color: #666;
+	border-radius: 13px;
+	background-color: #fff;
+	margin-right: -3px;
+	margin-left: 3px;
+	padding: 1px 5px 2px;
+	display: inline-block;
+	position: relative;
+	top: -1px;
+}
+
+/* Types */
+
+.badgeNote {
+	border: 1px solid #ccc;
+}
+
+.badgeInfo {
+	color: #68b;
+	border: 1px solid #9be;
+	background-color: #def;
+}
+
+.badgeSuccess {
+	color: #090;
+	border: 1px solid #0c0;
+	background-color: #efe;
+}
+
+.badgeWarning {
+	color: #990;
+	border: 1px solid #cc0;
+	background-color: #ffd;
+}
+
+.badgeError {
+	color: #c00;
+	border: 1px solid #f99;
+	background-color: #fee;
+}
+
+/* Buttons */
+
+.badgeButton,
+.clipboardEditor > ul > li {
+	cursor: pointer;
+	
+	border-radius: 30px;
+	
+	margin-right: 0;
+	margin-left: 0;
+	padding: 3px 10px 5px;
+	display: inline-block;
+}
+
+li.badgeButton,
+li > .badgeButton {
+	margin-top: 7px;
+	margin-right: 3px;
+	margin-left: 3px;
+	float: left;
+}
+
+.badgeButton,
+.badgeButton a,
+.clipboardEditor > ul > li > span {
+	text-decoration: none !important;
+}
+
+
+
+/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */
+
+/* Balloon Tooltips */
+
+#balloonTooltip {
+	font-size: .85em;
+	color: #fff;
+	border: 1px solid rgba(255, 255, 255, .7);
+	border-radius: 5px;
+	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);
+}
+
+.balloonTooltip {
+	/* Not reliable, sometimes not wanted! */
+	cursor: pointer;
+}
+
+/* Collapsible */
+
+.collapsible {
+	margin: 5px 0 0 10px;
+	float: left;
+}
+
+.collapsible img {
+	height: 16px;
+	width: 16px;
+}
+
+
+
+/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* -- -- -- -- -- ToDo: Clipboard Editor -- -- -- -- -- */
+
+.clipboardEditor {
+	
+}
+
+.clipboardEditor > ul {
+	font-size: .85em;
+	margin: 6px 3px 0;
+	display: block;
+	position: relative;
+	float: left;
+}
+
+.clipboardEditor > ul > li > span {
+	background-image: url('../../icon/dropdown1.svg');
+	background-position: right center;
+	background-repeat: no-repeat;
+	padding-right: 12px;
+	display: inline-block;
+}
+
+/* Dropdown */
+
+.clipboardEditor ul > li > ol {
+	border: 1px solid rgba(255, 255, 255, .7);
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, .7);
+	margin-top: 23px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	
+	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+}
+
+.clipboardEditor ul > li > ol > li {
+	text-shadow: none;
+	color: #ccc;
+	cursor: pointer; 
+	padding: 5px 7px;
+	
+	-webkit-transition: all .2s linear;
+	-moz-transition: all .2s linear;
+	-ms-transition: all .2s linear;
+	-o-transition: all .2s linear;
+	transition: all .2s linear;
+}
+
+.clipboardEditor ul > li > ol > li:first-child {
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+}
+
+.clipboardEditor ul > li > ol > li:last-child {
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+.clipboardEditor ul > li > ol > li:hover {
+	color: #fff;
+	background-color: rgba(0, 0, 0, .5);
+}
+
+.clipboardEditor ul > li > ol > li:first-child {
+	border-top-width: 0;
 }
 
 
 
-/* ToDo: Is all that really necessary? We wanted to support good browsers only */
 
-.ui-helper-clearfix {
-	display: inline-block;
-}
 
-/* Required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix {
-	height: 1%;
-}
+/* ToDo: Proxy Loading */
 
-.ui-helper-clearfix {
-	display: block;
+.actionProxyLoading {
+	
 }
 
-/* end clearfix */
-.ui-helper-zfix {
-	opacity: 0;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-}
 
-.ui-dialog {
-	background-color: rgba(255, 255, 255, .9);
-}
 
 
-/* -- -- -- -- -- Badges -- -- -- -- -- */
 
-/* Globals */
 
-.badge {
-	font-size: 85%;
-	text-shadow: none;
-	color: #666;
-	border-radius: 13px;
-	background-color: #fff;
-	margin-right: -3px;
-	margin-left: 3px;
-	padding: 1px 5px 2px;
-	display: inline-block;
-	position: relative;
-	top: -1px;
-}
 
-/* Types */
 
-.badgeNote {
-	border: 1px solid #ccc;
-}
 
-.badgeInfo {
-	color: #68b;
-	border: 1px solid #9be;
-	background-color: #def;
-}
 
-.badgeSuccess {
-	color: #090;
-	border: 1px solid #0c0;
-	background-color: #efe;
-}
 
-.badgeWarning {
-	color: #990;
-	border: 1px solid #cc0;
-	background-color: #ffd;
-}
 
-.badgeError {
-	color: #c00;
-	border: 1px solid #f99;
-	background-color: #fee;
-}
 
-/* Buttons */
 
+
+
+
+
+/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */
+
+/* Put individual settings to their respective declarations */
+
+/* normal state */
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.largeButtons ul li a,
 .badgeButton,
-.clipboardEditor > ul > li {
-	cursor: pointer;
+.pageNavigation ul li:not(.children),
+.clipboardEditor > ul > li,
+.preInput .dropdownCaption {
+	text-decoration: none;
+	text-shadow: 0 1px 0 #fff;
+	color: #999;
 	
 	border-width: 1px;
 	border-style: solid;
 	border-color: #ccc #bbb #aaa;
-	border-radius: 30px;
 	
 	background-color: #fefefe;
 	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
@@ -2594,55 +2338,67 @@ div.ui-widget-overlay {
 	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
 	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
 	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(245, 245, 245, 1) 2px, rgba(235, 235, 235, 1));
-	
-	margin-right: 0;
-	margin-left: 0;
-	padding: 3px 10px 5px;
-	display: inline-block;
-	
-	-webkit-transition: all .2s linear;
-	-moz-transition: all .2s linear;
-	-ms-transition: all .2s linear;
-	-o-transition: all .2s linear;
-	transition: all .2s linear;
-}
 
-li.badgeButton,
-li > .badgeButton {
-	margin-top: 7px;
-	margin-right: 3px;
-	margin-left: 3px;
-	float: left;
+	-webkit-transition: all .1s linear;
+	-moz-transition: all .1s linear;
+	-ms-transition: all .1s linear;
+	-o-transition: all .1s linear;
+	transition: all .1s linear;
 }
 
+/* hover state */
+input[type='reset']:hover,
+input[type='submit']:hover,
+input[type='button']:hover,
+input[type='button'].default:hover,
+.largeButtons ul li a:hover,
 .badgeButton:hover,
-.clipboardEditor > ul > li:hover {
+.pageNavigation ul li:not(.disabled):hover,
+.clipboardEditor > ul > li:hover,
+.preInput:hover .dropdownCaption {
+	color: #666;
 	border-width: 1px;
 	border-style: solid;
 	border-color: #ffc053 #fa2 #fc9e07;
 	
 	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -moz-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -ms-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -o-linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 }
 
+/* active state */
+input[type='reset']:focus,
+input[type='submit']:focus,
+input[type='button']:focus,
+input[type='button'].default:focus,
+.largeButtons ul li a:focus,
 .badgeButton:active,
 .badgeButton:focus,
+.pageNavigation ul li:not(.disabled):active,
+.preInput .dropdownCaption:focus,
+input[type='reset']:active,
+input[type='submit']:active,
+input[type='button']:active,
+input[type='button'].default:active,
+.largeButtons ul li a:active,
 .clipboardEditor > ul > li:active,
-.clipboardEditor > ul > li:focus {	
+.clipboardEditor > ul > li:focus,
+.pageNavigation ul li:not(.disabled):focus,
+.preInput .dropdownCaption:active {
+	color: #333;
 	border-width: 1px;
 	border-style: solid;
 	border-color: #fc9e07 #fa2 #ffc053;
 	
 	background-color: #fff9f4;
-	background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -moz-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -ms-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: -o-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
-	background-image: linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 237, 217) 2px, rgb(255, 229, 200));
+	background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+	background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
 	
 	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
@@ -2651,163 +2407,283 @@ li > .badgeButton {
 	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
 }
 
-.badgeButton,
-.badgeButton a,
-.clipboardEditor > ul > li > span {
-	text-decoration: none !important;
-	text-shadow: 0 1px 0 #fff;
-	color: #999;
+/* default glow */
+@-webkit-keyframes glowLargeButtons {
+    0% {
+        -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+    }
+    100% {
+        -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+    }
 }
-
-.badgeButton:hover,
-.badgeButton a:hover,
-.clipboardEditor > ul > li:hover > span {
-	text-decoration: none !important;
-	color: #666;
+@-moz-keyframes glowLargeButtons {
+    0% {
+        -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+    }
+    100% {
+        -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+    }
 }
-
-.badgeButton:active,
-.badgeButton:focus,
-.badgeButton a:active,
-.badgeButton a:focus,
-.clipboardEditor > ul > li:active > span,
-.clipboardEditor > ul > li:focus > span {
-	color: #333;
+@-ms-keyframes glowLargeButtons {
+    0% {
+        -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+    }
+    100% {
+        -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+    }
 }
-
-
-
-/* -- -- -- -- -- GUI Widgets -- -- -- -- -- */
-
-/* Balloon Tooltips */
-
-#balloonTooltip {
-	font-size: .85em;
-	color: #fff;
-	border: 1px solid rgba(255, 255, 255, .7);
-	border-radius: 5px;
-	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);
+@-o-keyframes glowLargeButtons {
+    0% {
+        -o-box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+    }
+    100% {
+        -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+    }
+}
+@keyframes glowLargeButtons {
+    0% {
+        box-shadow: 0 0 13px rgba(102, 153, 204, .3);
+    }
+    100% {
+        box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+    }
 }
 
-.balloonTooltip {
-	/* Not reliable, sometimes not wanted! */
-	cursor: pointer;
+/* default normal state */
+input[type='submit'],
+input[type='button'].default,
+.largeButtons ul li.default a {
+	color: #69c;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #7aade0 #69c #5285b8;
+	
+	background-color: #e7f2fd;
+	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+	
+	-webkit-box-shadow: 0 0 10px #369;
+	-moz-box-shadow: 0 0 10px #369;
+	-ms-box-shadow: 0 0 10px #369;
+	-o-box-shadow: 0 0 10px #369;
+	box-shadow: 0 0 10px #369;
+	
+	-webkit-animation-name: glowLargeButtons;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
+	
+	-moz-animation-name: glowLargeButtons;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowLargeButtons;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	
+	-o-animation-name: glowLargeButtons;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	
+	animation-name: glowLargeButtons;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
 }
 
-/* Collapsible */
-
-.collapsible {
-	margin: 5px 0 0 10px;
-	float: left;
+/* default hover glow */
+@-webkit-keyframes glowLargeButtonsHover {
+    0% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+    }
 }
-
-.collapsible img {
-	height: 16px;
-	width: 16px;
+@-moz-keyframes glowLargeButtonsHover {
+    0% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+    }
 }
-
-
-
-/* -- -- -- -- -- CSS Experiments (active) -- -- -- -- -- */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* Clipboard API - TESTING ONLY / TODO */
-
-.clipboardEditor {
-	
+@-ms-keyframes glowLargeButtonsHover {
+    0% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+    }
 }
-
-.clipboardEditor > ul {
-	font-size: .85em;
-	margin: 6px 3px 0;
-	display: block;
-	position: relative;
-	float: left;
+@-o-keyframes glowLargeButtonsHover {
+    0% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+    }
 }
-
-.clipboardEditor > ul > li > span {
-	background-image: url('../../icon/dropdown1.svg');
-	background-position: right center;
-	background-repeat: no-repeat;
-	padding-right: 12px;
-	display: inline-block;
+@keyframes glowLargeButtonsHover {
+    0% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+    }
+    100% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+    }
 }
 
-.clipboardEditor ul > li > ol {
-	border: 1px solid rgba(255, 255, 255, .7);
-	border-radius: 5px;
-	background-color: rgba(0, 0, 0, .7);
-	margin-top: 23px;
-	position: absolute;
-	top: 0;
-	left: 0;
+/* default hover state */
+input[type='submit']:hover,
+input[type='button'].default:hover,
+.largeButtons ul li.default a:hover {	
+	-webkit-box-shadow: 0 0 10px #fa2;
+	-moz-box-shadow: 0 0 10px #fa2;
+	-ms-box-shadow: 0 0 10px #fa2;
+	-o-box-shadow: 0 0 10px #fa2;
+	box-shadow: 0 0 10px #fa2;
 	
-	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	-o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-	box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.clipboardEditor ul > li > ol > li {
-	text-shadow: none;
-	color: #ccc;
-	cursor: pointer; 
-	padding: 5px 7px;
+	-webkit-animation-name: glowLargeButtonsHover;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
 	
-	-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-animation-name: glowLargeButtonsHover;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowLargeButtonsHover;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	
+	-o-animation-name: glowLargeButtonsHover;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	
+	animation-name: glowLargeButtonsHover;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
 }
 
-.clipboardEditor ul > li > ol > li:first-child {
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
+/* default active glow */
+@-webkit-keyframes glowDefaultLargeButtonsActive {
+    0% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
 }
-
-.clipboardEditor ul > li > ol > li:last-child {
-	border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
+@-moz-keyframes glowDefaultLargeButtonsActive {
+    0% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
 }
-
-.clipboardEditor ul > li > ol > li:hover {
-	color: #fff;
-	background-color: rgba(0, 0, 0, .5);
+@-ms-keyframes glowDefaultLargeButtonsActive {
+    0% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
 }
-
-.clipboardEditor ul > li > ol > li:first-child {
-	border-top-width: 0;
+@-o-keyframes glowDefaultLargeButtonsActive {
+    0% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+}
+@keyframes glowDefaultLargeButtonsActive {
+    0% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .3), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
+    100% {
+        box-shadow: 0 0 13px rgba(255, 153, 51, .1), inset 0 1px 3px rgba(0, 0, 0, .1);
+    }
 }
 
+/* default active state */
+input[type='submit']:focus,
+input[type='button'].default:focus,
+.largeButtons ul li.default a:focus,
+input[type='submit']:active,
+input[type='button'].default:active,
+.largeButtons ul li.default a:active {
+	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+	
+	-webkit-animation-name: glowDefaultLargeButtonsActive;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-in-out; 
+	
+	-moz-animation-name: glowDefaultLargeButtonsActive;
+	-moz-animation-duration: 1s;
+	-moz-animation-iteration-count: infinite;
+	-moz-animation-direction: alternate;
+	-moz-animation-timing-function: ease-in-out;
+	
+	-ms-animation-name: glowDefaultLargeButtonsActive;
+	-ms-animation-duration: 1s;
+	-ms-animation-iteration-count: infinite;
+	-ms-animation-direction: alternate;
+	-ms-animation-timing-function: ease-in-out; 
+	
+	-o-animation-name: glowDefaultLargeButtonsActive;
+	-o-animation-duration: 1s;
+	-o-animation-iteration-count: infinite;
+	-o-animation-direction: alternate;
+	-o-animation-timing-function: ease-in-out;
+	
+	animation-name: glowDefaultLargeButtonsActive;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
+}
 
+/* disabled state */
+input[disabled='disabled'],
+input[type='button'][disabled='disabled'],
+.largeButtons ul li.disabled a {
+	color: #999;
+	cursor: default;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #ccc #bbb #aaa;
+}
 
 
 
-/* ToDo: Proxy Loading */
-
-.actionProxyLoading {
-	
-}
 
 
 
@@ -2817,7 +2693,6 @@ li > .badgeButton {
 
 
 
-/* -- -- -- -- -- Global Button Color & Effect Library -- -- -- -- -- */