--- /dev/null
+/**
+ * #################################################################
+ * ### CAUTION: This stylesheet applies to WCFSetup only, please ###
+ * ### see wcf.less for the general stylesheet! ###
+ * #################################################################
+ */
+
+/**
+ * WCF Testing Styles
+ *
+ * @author Harald Szekely
+ * @copyright 2011 WoltLab GmbH
+ */
+
+/* ############## Reset ############## */
+
+/**
+ * Parts taken from
+ * http://meyerweb.com/eric/tools/css/reset/
+ * v2.0 | 20110126
+ * License: none (public domain)
+ * modifyed to meet the needs of WoltLab
+ */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+
+
+/* ############## Globals ############## */
+
+* {
+ text-overflow: ellipsis;
+}
+
+img {
+ vertical-align: middle !important;
+}
+
+a {
+ color: #369;
+ text-decoration: none;
+
+ -webkit-transition: color .1s linear;
+ -moz-transition: color .1s linear;
+ -ms-transition: color .1s linear;
+ -o-transition: color .1s linear;
+ transition: color .1s linear;
+}
+
+a:hover {
+ text-decoration: underline;
+ color: #036;
+}
+
+hr {
+ display: none;
+}
+
+::selection {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
+ color: #300;
+ background-color: rgba(255, 170, 34, .7);
+}
+
+a,
+img[src*='delete'],
+img[src*='uninstall'],
+img[src*='install'],
+img[src*='update'],
+img[src*='run'],
+img[src*='info'],
+img[src*='disable'],
+img[src*='enable'] {
+ cursor: pointer;
+}
+
+
+
+/* ############## ToDo: Global Structural Classes ############## */
+
+/* -- -- -- Misc -- -- -- */
+
+.hot {
+ color: #b00;
+}
+
+.invisible {
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+}
+
+/* Uniform background image */
+
+.wcf-headerImage {
+ background-image: url('../../../images/header.png');
+}
+
+/* -- -- -- URLs -- -- -- */
+
+.wcf-externalURL {
+ background-image: url('../../icon/externalURL1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 17px;
+}
+
+.wcf-eMailLink,
+a[href^="mailto:"] {
+ background-image: url('../../icon/email1.svg');
+ background-position: left center;
+ background-repeat: no-repeat;
+ padding-left: 17px;
+}
+
+/* -- -- -- Margins -- -- -- */
+
+.wcf-marginTop {
+ margin-top: 15px;
+}
+
+.wcf-marginBottom {
+ margin-bottom: 15px;
+}
+
+/* -- -- -- Paddings -- -- -- */
+
+/* ToDo: Columns */
+
+.wcf-columns-2 {
+ width: 45%;
+}
+
+.wcf-columns-3 {
+ width: 30%;
+}
+
+
+/* -- -- -- ToDo: Floated Elements -- -- -- */
+
+/* possibly obsolete */
+
+.floatContainer:after {
+ content: "";
+ height: 0;
+ display: block;
+ clear: both;
+}
+
+.floated {
+ margin-right: 5px;
+ margin-left: 5px;
+ float: left;
+}
+
+
+
+/* -- -- -- Shadows -- -- -- */
+
+/* Shadows for boxes - do not use on small boxes! */
+
+.wcf-shadow1 {
+ -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+ -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+ -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+ /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
+ -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);
+ box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+/* Use that shadow for tab menus - do not use on small boxes! */
+
+.wcf-shadow2 {
+ -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
+ -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
+ -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
+ /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
+ -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);
+ box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .1), 0 -8px 10px -10px rgba(0, 0, 0, .1);*/
+}
+
+
+
+/* ############## Containers ############## */
+
+/* -- -- -- Globals -- -- -- */
+
+/**
+ * This is a generic container for surrounding blocks of
+ * text with an optional leading icon. The icon-size is
+ * free. The icon-Container is optional.
+ * Note:
+ * This box does not support RTL in WebKit-browsers!
+ * Thus the box-style may change in the future.
+ */
+
+.wcf-container {
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+.wcf-containerIcon {
+ float: left;
+ margin-right: 5px;
+}
+
+.wcf-containerContent {
+ padding: 1px;
+ overflow: hidden;
+}
+
+
+
+/* ############## Badges ############## */
+
+/* Globals */
+
+.wcf-badge {
+ font-size: 85%;
+ font-weight: bold;
+ text-shadow: none;
+ text-decoration: none;
+ border-radius: 13px;
+ background-color: rgba(255, 255, 255, 1);
+ margin-right: -3px;
+ margin-left: 3px;
+ padding: 2px 5px;
+ display: inline-block;
+ position: relative;
+ top: -1px;
+}
+
+/* Badge Types */
+
+.wcf-badgeBorder {
+ border: 1px solid #ccc;
+}
+
+.wcf-badgeBlue {
+ color: #68b;
+ border: 1px solid #9be;
+ background-color: #def;
+}
+
+.wcf-badgeGreen {
+ color: #090;
+ border: 1px solid #0c0;
+ background-color: #efe;
+}
+
+.wcf-badgeYellow {
+ color: #990;
+ border: 1px solid #cc0;
+ background-color: #ffd;
+}
+
+.wcf-badgeRed {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+}
+
+/* Buttons */
+
+.wcf-badgeButton {
+ cursor: pointer;
+ border-radius: 30px;
+ margin-right: 0;
+ margin-left: 0;
+ padding: 3px 10px 5px;
+ display: inline-block;
+}
+
+li.wcf-badgeButton,
+li > .wcf-badgeButton {
+ margin-top: 7px;
+ margin-right: 3px;
+ margin-left: 3px;
+ float: left;
+}
+
+.wcf-badgeButton,
+.wcf-badgeButton a {
+ text-decoration: none !important;
+}
+
+
+
+/* ############## Labels ############## */
+
+/* -- -- -- Label List -- -- -- */
+
+.wcf-labelList {
+ margin: 0;
+ padding: 5px 0 0;
+ display: inline-block;
+}
+
+/* -- -- -- Label -- -- -- */
+
+/* Globals */
+
+.wcf-label {
+ font-size: 85%;
+ font-weight: bold;
+ color: #eee;
+ text-shadow: none;
+ text-decoration: none;
+ border-radius: 13px;
+ background-color: rgba(102, 102, 102, 1);
+ margin-right: 3px;
+ padding: 3px 8px 4px;
+ display: inline-block;
+ position: relative;
+ top: -1px;
+ cursor: pointer;
+}
+
+.wcf-label:hover {
+ color: rgba(255, 255, 255, 1);
+ background-color: rgba(51, 51, 51, 1);
+}
+
+.wcf-label a {
+ color: #eee;
+ text-decoration: none;
+}
+
+.wcf-label a:hover {
+ color: rgba(255, 255, 255, 1);
+}
+
+/* Default Colors */
+
+.wcf-label.black {
+ background-color: #333;
+}
+
+.wcf-label.black:hover {
+ background-color: #000;
+}
+
+.wcf-label.brown {
+ background-color: #c63;
+}
+
+.wcf-label.brown:hover {
+ background-color: #930;
+}
+
+.wcf-label.red {
+ background-color: #c00;
+}
+
+.wcf-label.red:hover {
+ background-color: #900;
+}
+
+.wcf-label.orange {
+ background-color: #f90;
+}
+
+.wcf-label.orange:hover {
+ background-color: #f60;
+}
+
+.wcf-label.yellow {
+ background-color: #ff0;
+}
+
+.wcf-label.yellow:hover {
+ background-color: #cc0;
+}
+
+.wcf-label.green {
+ background-color: #0c0;
+}
+
+.wcf-label.green:hover {
+ background-color: #090;
+}
+
+.wcf-label.blue {
+ background-color: #09f;
+}
+
+.wcf-label.blue:hover {
+ background-color: #06c;
+}
+
+.wcf-label.purple {
+ background-color: #c0f;
+}
+
+.wcf-label.purple:hover {
+ background-color: #90c;
+}
+
+.wcf-label.pink {
+ background-color: #f0c;
+}
+
+.wcf-label.pink:hover {
+ background-color: #c09;
+}
+
+/* Special */
+
+table .wcf-label {
+ padding: 1px 6px 2px;
+}
+
+
+
+/* ############## ToDo: Dropdown ############## */
+
+/* Dropdown Caption */
+
+.wcf-dropdownCaption,
+.wcf-dropdownCaption a {
+ text-decoration: none;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.wcf-dropdownCaption:hover,
+.wcf-dropdownCaption a:hover {
+ text-decoration: none;
+}
+
+/* Dropdown */
+
+.wcf-dropdown {
+ color: rgba(255, 255, 255, 1);
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ margin-top: 25px;
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 400;
+ overflow: hidden;
+ white-space: nowrap;
+
+ -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);
+
+ -webkit-transition: color background .1s ease;
+ -moz-transition: color background .1s ease;
+ -ms-transition: color background .1s ease;
+ -o-transition: color background .1s ease;
+ transition: color background .1s ease;
+}
+
+.wcf-dropdown.open {
+ display: block;
+}
+
+/* Dropdown Items */
+
+.wcf-dropdown > li,
+.wcf-dropdown > div {
+ text-shadow: none;
+ color: #ccc;
+ cursor: pointer;
+
+ -webkit-transition: color background .2s linear;
+ -moz-transition: color background .2s linear;
+ -ms-transition: color background .2s linear;
+ -o-transition: color background .2s linear;
+ transition: color background .2s linear;
+}
+
+.wcf-dropdown > div {
+ padding: 5px 7px;
+}
+
+.wcf-dropdown > :first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+.wcf-dropdown > :last-child {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.wcf-dropdown > :hover:not(ul):not(.pointer),
+.wcf-dropdown > .active {
+ color: rgba(255, 255, 255, 1);
+ cursor: pointer;
+ background-color: rgba(0, 0, 0, .5);
+}
+
+.wcf-dropdown > li.divider:not(:first-child) {
+ border-top: 1px solid rgba(255, 255, 255, .7);
+}
+
+.wcf-dropdown > li {
+ text-decoration: none;
+ padding: 5px 7px;
+ display: block;
+}
+
+.wcf-dropdown > li a {
+ text-decoration: none;
+ color: #ccc;
+ padding: -5px -7px; /* ToDo: what's that? ;-) */
+ display: block;
+}
+
+.wcf-dropdown > li a:hover {
+ color: rgba(255, 255, 255, 1);
+ background-color: rgba(0, 0, 0, .5);
+}
+
+
+
+/* ############## Body ############## */
+
+/* Globals */
+
+body {
+ font-family: 'Trebuchet MS', Arial, sans-serif;
+ font-size: 80%;
+ color: rgba(102, 102, 102, 1);
+ line-height: 1;
+ background-color: rgba(41, 55, 74, 1);
+}
+
+
+
+/* ############## Page Header & Page Footer ############## */
+
+/* Globals */
+
+header.wcf-pageHeader {
+ /* 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: center top;
+ background-repeat: repeat-x;
+ background-attachment: fixed;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ z-index: 100;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ header.wcf-pageHeader,
+ header.wcf-pageFooter {
+ min-width: 800px;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ header.wcf-pageHeader,
+ header.wcf-pageFooter {
+ /* none */
+ }
+}
+
+.wcf-pageHeader:after,
+.wcf-pageFooter:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.wcf-pageFooter {
+ text-align: center;
+ padding-bottom: 23px;
+ position: relative;
+ z-index: 80;
+}
+
+
+
+/* -- -- -- Copyright -- -- -- */
+
+.wcf-pageFooter .wcf-copyright {
+ padding-top: 20px;
+ display: inline-block;
+}
+
+.wcf-pageFooter .wcf-copyright a {
+ text-shadow: 0 -1px 0 #000;
+}
+
+.wcf-pageFooter .wcf-copyright a:hover {
+ text-decoration: none;
+ color: #69c;
+}
+
+
+
+/* -- -- -- Top Menu -- -- -- */
+
+/* Globals */
+
+nav.wcf-topMenu {
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ background-color: rgba(0, 0, 0, .4);
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 300;
+ box-sizing: border-box;
+
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+
+ -webkit-transition: background .2s linear;
+ -moz-transition: background .2s linear;
+ -ms-transition: background .2s linear;
+ -o-transition: background .2s linear;
+ transition: background .2s linear;
+
+ -webkit-animation-name: showTopMenu;
+ -webkit-animation-duration: .3s;
+ -webkit-animation-timing-function: linear;
+
+ -moz-animation-name: showTopMenu;
+ -moz-animation-duration: .3s;
+ -moz-animation-timing-function: linear;
+
+ -ms-animation-name: showTopMenu;
+ -ms-animation-duration: .3s;
+ -ms-animation-timing-function: linear;
+ /* disabled to ease rendering work for Opera
+ -o-animation-name: showTopMenu;
+ -o-animation-duration: .3s;
+ -o-animation-timing-function: linear;
+ */
+ animation-name: showTopMenu;
+ animation-duration: .3s;
+ animation-timing-function: linear;
+}
+
+/* Show Top Menu */
+
+@-webkit-keyframes showTopMenu {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+@-moz-keyframes showTopMenu {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+@-ms-keyframes showTopMenu {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes showTopMenu {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+*/
+@keyframes showTopMenu {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ nav.wcf-topMenu {
+ min-width: 800px;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.wcf-topMenu {
+ /* none */
+ }
+}
+
+.wcf-topMenu:hover {
+ background-color: rgba(0, 0, 0, .7);
+}
+
+.wcf-topMenu > div {
+ padding: 0 23px 0;
+}
+
+.wcf-topMenu ul li {
+ white-space: nowrap;
+}
+
+/* Menu Items (1st level) */
+
+.wcf-topMenu > div > ul > li {
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: transparent;
+ float: left;
+ position: relative;
+}
+
+.wcf-topMenu > div > ul > li,
+.wcf-topMenu > div > ul > li a {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+ color: #69c;
+}
+
+.wcf-topMenu > div > ul > li:hover,
+.wcf-topMenu > div > ul > li:hover a {
+ border-color: rgba(255, 255, 255, .5);
+}
+
+/* Removes the doubled padding if there's a link in the top menu */
+.wcf-topMenu > div > ul > li > span > a {
+ margin: -6px 0 -6px -6px;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Caption */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption {
+ background-image: url('../../icon/dropdown2.svg');
+ background-position: 97% center;
+ background-repeat: no-repeat;
+ padding-right: 15px !important;
+}
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption,
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > a {
+ padding: 6px;
+}
+
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption,
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption a {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+ color: rgba(255, 255, 255, 1);
+ background-color: rgba(0, 0, 0, .7);
+}
+
+/* Badges */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge {
+ margin: -3px 3px;
+ padding: 1px 3px;
+}
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > .wcf-badge,
+.wcf-topMenu > div > ul > li:hover > .wcf-dropdownCaption > .wcf-badge {
+ font-size: 75%;
+ color: #369 !important;
+}
+
+/* Images in front of the caption */
+
+.wcf-topMenu > div > ul > li > .wcf-dropdownCaption > img {
+ margin: -7px 0 -5px 0;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Tweaks */
+
+/* Auto-Opening Dropdowns */
+.wcf-topMenu ul li .wcf-dropdownCaption ~ .wcf-dropdown {
+ border-color: rgba(255, 255, 255, .5);
+ background-color: rgba(0, 0, 0, .7);
+ left: -1px;
+ min-width: 100%;
+}
+
+.wcf-topMenu ul li:hover .wcf-dropdownCaption ~ .wcf-dropdown {
+ display: block;
+}
+
+.wcf-topMenu ul li .wcf-dropdown {
+ border-width: 0 1px 1px 1px !important;
+ border-radius: 0 0 5px 5px;
+}
+
+.wcf-topMenu ul li .wcf-dropdown > :first-child {
+ border-top-width: 0;
+}
+
+
+
+/* -- -- -- Logo -- -- -- */
+
+.wcf-logo {
+ margin: 0 23px 0;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.wcf-logo > a,
+.wcf-logo > div {
+ text-align: right;
+ display: block;
+ height: 120px;
+}
+
+.wcf-logo > a:hover {
+ text-decoration: none !important;
+ color: #d8e7f5;
+}
+
+.wcf-logo h1 {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ color: #d8e7f5;
+ position: relative;
+ top: 70px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .logo h1,
+ .wcf-logo h1 {
+ font-size: 150%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-logo h1 {
+ font-size: 175%;
+ }
+
+}
+
+.wcf-logo > div > img,
+.wcf-logo > a > img {
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+}
+
+
+
+/* -- -- -- Search -- -- -- */
+
+.wcf-search {
+ border: 1px solid rgba(0, 0, 0, .1);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .2);
+ padding: 5px;
+ position: absolute;
+ top: 50px;
+ right: 0;
+ min-width: 240px;
+
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+
+ -webkit-transition: background .2s linear;
+ -moz-transition: background .2s linear;
+ -ms-transition: background .2s linear;
+ -o-transition: background .2s linear;
+ transition: background .2s linear;
+
+}
+
+.wcf-search:hover {
+ background-color: rgba(0, 0, 0, .5);
+}
+
+.wcf-search input[type='search'] {
+ width: 175px;
+ margin: 2px 4px;
+}
+
+.wcf-search > .wcf-searchButton {
+ width: 32px;
+ height: 32px;
+ margin-left: 5px;
+}
+
+
+
+/* -- -- -- Main Menu -- -- -- */
+
+.wcf-mainMenu {
+ /* General toggle switch for main menu orientation (options: left|center|right) */
+ text-align: left;
+ margin: 0 30px;
+ display: block;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.wcf-mainMenu:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.wcf-mainMenu > ul {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: rgba(0, 0, 0, .4);
+ display: inline-block;
+ position: relative;
+}
+
+.wcf-mainMenu > ul > li {
+ display: inline-block;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-mainMenu > ul > li {
+ font-size: 120%;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-mainMenu > ul > li {
+ font-size: 150%;
+ }
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem {
+ margin: -5px 0 0;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:first-child {
+ margin-right: -5px;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:last-child {
+ margin-left: -5px;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem:only-child {
+ margin: -5px 0 0;
+}
+
+.wcf-mainMenu > ul > li > a {
+ font-weight: normal;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ color: #69c;
+ cursor: pointer;
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+
+ -webkit-transition-property: border, background-color, background-image, color;
+ -webkit-transition-duration: .3s;
+ -webkit-transition-timing-function: ease;
+
+ -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;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-mainMenu > ul > li > a {
+ padding: 10px 20px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-mainMenu > ul > li > a {
+ padding: 10px 10px;
+ }
+
+}
+
+.wcf-mainMenu > ul > li:not(.activeMenuItem) {
+ margin-top: -3px;
+}
+
+.wcf-mainMenu > ul > li:not(.activeMenuItem):hover > a {
+ color: rgba(255, 255, 255, 1);
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem > a {
+ font-size: 110%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: #369;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+
+ background-color: #e7f2fd;
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+ background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+ background-image: linear-gradient(rgba(255, 255, 255, 1), #e7f2fd);
+
+ z-index: 10;
+}
+
+/* Rounded Bottom Corners: Active Tab */
+
+.wcf-mainMenu > ul > li.activeMenuItem > a:before {
+ border-bottom-right-radius: 6px;
+ border-width: 0 1px 1px 0;
+ position: absolute;
+ bottom: 0;
+ left: -7px;
+ width: 7px;
+ height: 7px;
+ content: "";
+
+ -webkit-box-shadow: 2px 2px 0 #e7f2fd;
+ -moz-box-shadow: 2px 2px 0 #e7f2fd;
+ -ms-box-shadow: 2px 2px 0 #e7f2fd;
+ -o-box-shadow: 2px 2px 0 #e7f2fd;
+ box-shadow: 2px 2px 0 #e7f2fd;
+}
+
+.wcf-mainMenu > ul > li.activeMenuItem > a:after {
+ border-bottom-left-radius: 6px;
+ border-width: 0 0 1px 1px;
+ position: absolute;
+ right: -7px;
+ bottom: 0;
+ width: 7px;
+ height: 7px;
+ content: "";
+
+ -webkit-box-shadow: -2px 2px 0 #e7f2fd;
+ -moz-box-shadow: -2px 2px 0 #e7f2fd;
+ -ms-box-shadow: -2px 2px 0 #e7f2fd;
+ -o-box-shadow: -2px 2px 0 #e7f2fd;
+ box-shadow: -2px 2px 0 #e7f2fd;
+}
+
+/* ToDo: Special */
+
+.wcf-mainMenu > ul > li.activeMenuItem .wcf-badge {
+ font-size: 65% !important;
+ color: rgba(255, 255, 255, 1);
+ background-color: #369;
+
+ -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+ -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+ -ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+ -o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+ box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+}
+
+
+
+/* -- -- -- Header/Footer Navigation -- -- -- */
+
+/* Menu Bars */
+
+.wcf-headerNavigation,
+.wcf-footerNavigation {
+ background-color: #e7f2fd;
+ border-style: solid;
+ border-color: #bcd;
+ margin: 0 23px;
+ display: block;
+ min-height: 7px;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.wcf-headerNavigation {
+ border-width: 0 0 1px 0;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.wcf-footerNavigation {
+ border-width: 1px 0 0 0;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-headerNavigation,
+ .wcf-footerNavigation {
+ min-width: 800px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-headerNavigation,
+ .wcf-footerNavigation {
+ /* none */
+ }
+
+}
+
+.wcf-headerNavigation:after,
+.wcf-footerNavigation:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+/* Icon Menus */
+
+.wcf-headerNavigation > ul,
+.wcf-footerNavigation > ul {
+ padding: 0 7px;
+ float: right;
+}
+
+.wcf-headerNavigation > ul > li,
+.wcf-footerNavigation > ul > li {
+ padding: 0 3px;
+ float: right;
+}
+
+.wcf-headerNavigation > ul > li.separator,
+.wcf-footerNavigation > ul > li.separator {
+ border-right: 1px dotted #bcd;
+}
+
+.wcf-headerNavigation > ul > li a,
+.wcf-headerNavigation > ul > li p,
+.wcf-footerNavigation > ul > li a,
+.wcf-footerNavigation > ul > li p {
+ text-decoration: none;
+ color: #369;
+ padding: 3px;
+ display: inline-block;
+}
+
+.wcf-headerNavigation > ul > li a:hover,
+.wcf-footerNavigation > ul > li a:hover {
+ text-decoration: none;
+ background-color: #d8e7f5;
+}
+
+.wcf-headerNavigation > ul > li a:active,
+.wcf-headerNavigation > ul > li a:focus,
+
+.wcf-footerNavigation > ul > li a:active,
+.wcf-footerNavigation > ul > li a:focus {
+ background-color: #fff9f4;
+}
+
+/* Special -> Page Scroll Links */
+
+#tplLogin .wcf-headerNavigation .toBottomLink,
+#tplLogin .wcf-footerNavigation .toTopLink {
+ /* Removes the jump-to-links on the log-in page */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+/* Special -> Sub Menu */
+
+.wcf-headerNavigation .wcf-menu {
+ padding: 0 7px;
+ display: inline;
+ max-width: 75%;
+}
+
+.wcf-headerNavigation .wcf-menu > ul {
+ text-align: left;
+ top: -3px;
+ display: inline;
+ position: relative;
+}
+
+.wcf-headerNavigation .wcf-menu > ul > li {
+ margin-top: 7px;
+}
+
+
+
+/* ############## Main ############## */
+
+.wcf-main {
+ background-color: rgba(216, 231, 245, 1);
+ margin: 0 23px;
+ position: relative;
+ z-index: 90;
+
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-main {
+ min-width: 800px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-main {
+ /* none */
+ }
+
+}
+
+
+
+/* -- -- -- Content -- -- -- */
+
+/* ToDo: Change the class name, since now we have the class "content" 2 times! */
+
+section.wcf-content {
+ background-color: rgba(255, 255, 255, 1);
+ position: relative;
+ min-height: 100px;
+ z-index: 20;
+ box-sizing: border-box;
+
+ -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);
+ /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera
+ -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+ box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
+
+ -webkit-transition: margin .1s ease;
+ -moz-transition: margin .1s ease;
+ -ms-transition: margin .1s ease;
+ -o-transition: margin .1s ease;
+ transition: margin .1s ease;
+}
+
+section.wcf-content:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.left section.wcf-content {
+ border-left: 1px solid rgba(187, 204, 221, 1);
+ margin-left: 249px;
+}
+
+.right section.wcf-content {
+ border-right: 1px solid rgba(187, 204, 221, 1);
+ margin-right: 249px;
+}
+
+/* ToDo: Does this still work? */
+.wcf-main > div section:only-child {
+ border-width: 0 !important;
+ margin: 0 !important;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ section.wcf-content {
+ padding: 5px 40px 20px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ section.wcf-content {
+ padding: 5px 15px 20px;
+ }
+
+}
+
+.wcf-contentDecor {
+ background-color: rgba(253, 253, 253, 1);
+}
+
+
+
+/* -- -- -- Content Header & Footer -- -- -- */
+
+.wcf-contentHeader,
+.wcf-contentFooter {
+ margin-top: 15px;
+ display: table;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+
+
+/* ############## Sidebar ############## */
+
+/* Globals */
+
+.wcf-sidebar {
+ margin-bottom: -10px;
+ display: block;
+ width: 250px;
+ overflow: hidden;
+ z-index: 10;
+
+ -webkit-transition: width .1s ease;
+ -moz-transition: width .1s ease;
+ -ms-transition: width .1s ease;
+ -o-transition: width .1s ease;
+ transition: width .1s ease;
+}
+
+/* Toggle for sidebar orientation (options: left|right|top|bottom) */
+
+.left .wcf-sidebar {
+ float: left;
+}
+
+.right .wcf-sidebar {
+ float: right;
+}
+
+
+
+/* -- -- -- Collapsible Sidebar -- -- -- */
+
+/* Globals */
+
+.wcf-sidebar.collapsed {
+ width: 0;
+ height: 0;
+}
+
+.left .wcf-sidebar.collapsed + .wcf-content {
+ border: 0;
+ margin-left: 0;
+}
+
+.right .wcf-sidebar.collapsed + .wcf-content {
+ border: 0;
+ margin-right: 0;
+}
+
+
+
+/* -- -- -- Collapsible Sidebar Button -- -- -- */
+
+/* Globals */
+
+.wcf-collapsibleSidebarButton {
+ cursor: pointer;
+ background-position: center 1%, center 99%;
+ background-size: 10px 10px, 10px 10px;
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 20px;
+ height: 100%;
+ overflow: hidden;
+ z-index: 30;
+ opacity: .3;
+}
+
+.wcf-collapsibleSidebarButton:hover,
+.wcf-collapsibleSidebarButton:hover span {
+ background-color: rgba(252, 252, 252, 1);
+ opacity: 1;
+}
+
+.wcf-collapsibleSidebarButton span {
+ background-color: rgba(255, 255, 255, 1);
+ background-position: center center;
+ background-size: 10px 10px;
+ background-repeat: no-repeat;
+ margin-top: -300px;
+ display: block;
+ position: absolute;
+ top: 50%;
+ width: 20px;
+ height: 600px;
+}
+
+.wcf-collapsibleSidebarButton span:focus,
+.wcf-collapsibleSidebarButton span: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);
+}
+
+/* Orientation */
+
+.left .wcf-collapsibleSidebarButton {
+ border-right: 1px solid rgba(187, 204, 221, .5);
+ background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+ left: 250px;
+
+ -webkit-transition: left .1s ease;
+ -moz-transition: left .1s ease;
+ -ms-transition: left .1s ease;
+ -o-transition: left .1s ease;
+ transition: left .1s ease;
+}
+
+.left .wcf-collapsibleSidebarButton span {
+ background-image: url('../../icon/arrowLeft1.svg');
+}
+
+.right .wcf-collapsibleSidebarButton {
+ border-left: 1px solid rgba(187, 204, 221, .5);
+ background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+ right: 250px;
+
+ -webkit-transition: right .1s ease;
+ -moz-transition: right .1s ease;
+ -ms-transition: right .1s ease;
+ -o-transition: right .1s ease;
+ transition: right .1s ease;
+}
+
+.right .wcf-collapsibleSidebarButton span {
+ background-image: url('../../icon/arrowRight1.svg');
+}
+
+/* Collapsed (Left) */
+
+.left .collapsed .wcf-collapsibleSidebarButton {
+ background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+ left: 0;
+}
+
+.left .collapsed .wcf-collapsibleSidebarButton span {
+ background-image: url('../../icon/arrowRight1.svg');
+}
+
+/* Collapsed (Right) */
+
+.right .collapsed .wcf-collapsibleSidebarButton {
+ background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+ right: 0;
+}
+
+.right .collapsed .wcf-collapsibleSidebarButton span {
+ background-image: url('../../icon/arrowLeft1.svg');
+}
+
+
+
+/* -- -- -- Sidebar Content -- -- -- */
+
+.wcf-sidebarContent > div {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ position: relative;
+ overflow: hidden;
+ z-index: 40;
+}
+
+.collapsed .wcf-sidebarContent > div {
+ width: 0;
+}
+
+.wcf-sidebarContent a:hover {
+ text-decoration: none !important;
+ color: #369;
+}
+
+.wcf-sidebarContent > div > h1 {
+ cursor: pointer;
+ font-weight: bold;
+ color: #369;
+ margin-top: 5px;
+}
+
+.wcf-sidebarContent > .collapsibleMenus > h1 {
+ background-image: url('../../icon/arrowRight.svg');
+ background-position: 15px center;
+ background-size: 16px;
+ background-repeat: no-repeat;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-sidebarContent > div > h1 {
+ font-size: 130%;
+ padding: 7px 15px 7px 35px;
+ }
+
+ .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
+ padding: 7px 15px 7px 15px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-sidebarContent > div > h1 {
+ font-size: 150%;
+ padding: 7px 15px 7px 35px;
+ }
+
+ .wcf-sidebarContent > div:not(.collapsibleMenus) > h1 {
+ padding: 7px 15px 7px 15px;
+ }
+
+}
+
+.wcf-sidebarContent > .collapsibleMenus h1.activeMenuItem {
+ background-image: url('../../icon/arrowDown.svg');
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-sidebarContent > div ul > li {
+ font-size: 110%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-sidebarContent > div ul > li {
+ font-size: 120%;
+ }
+
+}
+
+.wcf-sidebarContent > div ul > li > a,
+.wcf-sidebarContent > div ul > li > div {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: #69c;
+ padding: 5px 15px 7px 35px;
+ display: block;
+}
+
+.wcf-sidebarContent > div ul > li.activeMenuItem {
+ background-color: rgba(255, 255, 255, 1);
+ 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);
+ -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);
+}
+
+.wcf-sidebarContent > div ul > li.activeMenuItem a {
+ font-weight: bold;
+ color: #369;
+}
+
+
+
+/* ############## Status Display ############## */
+
+.wcf-statusDisplay {
+ padding: 1px 0;
+ float: right;
+}
+
+.wcf-statusDisplay .wcf-statusIcons li {
+ display: inline-block;
+}
+
+
+
+/* ############## Headings ############## */
+
+/* -- -- -- Main Heading -- -- -- */
+
+.wcf-mainHeading {
+ margin-top: 25px;
+}
+
+.wcf-mainHeading:not(:first-of-type) {
+ margin-top: 30px;
+}
+
+.wcf-mainHeading > hgroup {
+ min-height: 48px;
+}
+
+.wcf-mainHeading > hgroup h1 {
+ font-weight: bold;
+ border-bottom: 1px solid rgba(153, 153, 153, 1);
+ padding: 1px 0 10px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-mainHeading .wcf-containerIcon {
+ width: 48px;
+ height: 48px;
+ }
+
+ .wcf-mainHeading hgroup h1 {
+ font-size: 175%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-mainHeading .wcf-containerIcon {
+ width: 64px;
+ height: 64px;
+ }
+
+ .wcf-mainHeading hgroup h1 {
+ font-size: 200%;
+ }
+
+}
+
+.wcf-mainHeading > hgroup h1,
+.wcf-mainHeading > hgroup h1 a {
+ text-decoration: none;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: rgba(102, 102, 102, 1);
+}
+
+.wcf-mainHeading > hgroup h2 {
+ font-size: 100%;
+ font-weight: normal;
+ color: rgba(153, 153, 153, 1);
+ padding-top: 5px;
+}
+
+.wcf-mainHeading > hgroup p {
+ padding-top: 3px;
+}
+
+/* Special -> Badges */
+
+.wcf-mainHeading > hgroup h1 .wcf-badge,
+.wcf-mainHeading > hgroup h1 a .wcf-badge {
+ font-size: 75%;
+ text-decoration: none;
+ background-color: rgba(102, 102, 102, 1);
+ color: rgba(255, 255, 255, 1);
+}
+
+/* Special -> Dialog */
+
+.wcf-dialogContainer .wcf-mainHeading {
+ margin-top: 0;
+}
+
+.wcf-dialogContainer .wcf-mainHeading > hgroup h1,
+.wcf-dialogContainer .wcf-mainHeading > hgroup h1 a {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ color: rgba(255, 255, 255, 1);
+}
+
+
+
+/* -- -- -- Sub Heading -- -- -- */
+
+.wcf-subHeading h1 {
+ font-size: 150%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: rgba(153, 153, 153, 1);
+ border-bottom: 1px solid #ccc;
+ margin: 10px 0;
+ padding: 10px 0;
+ box-sizing: border-box;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-subHeading h1 {
+ font-size: 150%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-subHeading h1 {
+ font-size: 175%;
+ }
+
+}
+
+.wcf-subHeading h2 {
+ font-weight: normal;
+ color: #aaa;
+}
+
+
+
+/* ############## Fieldsets ############## */
+
+fieldset {
+ border: 1px solid #ccc;
+ border-radius: 7px;
+ background-color: rgba(250, 250, 250, 1);
+ margin: 15px 0 0;
+ padding: 5px 15px 15px;
+ box-sizing: border-box;
+}
+
+fieldset:last-child,
+fieldset:only-child {
+ margin-bottom: 7px !important;
+}
+
+fieldset legend {
+ color: rgba(153, 153, 153, 1);
+ padding: 0 7px 0;
+ margin: auto -7px;
+}
+
+fieldset legend ~ p {
+ margin-bottom: 14px;
+}
+
+/* Special Sidebar */
+
+.wcf-sidebar fieldset {
+ border-width: 0;
+ background-color: transparent;
+}
+
+.wcf-sidebar fieldset legend {
+ text-transform: uppercase; /* That's possibly problematic */
+ padding: 0;
+}
+
+.fieldsetDecor {
+ border: 1px solid #ccc;
+ border-radius: 7px;
+ background-color: rgba(250, 250, 250, 1);
+}
+
+
+
+/* ############## Labeled Content ############## */
+
+/* Simple */
+
+dl {
+ margin-top: 7px;
+ position: relative;
+}
+
+fieldset dl:first-of-type {
+ margin-top: 0;
+}
+
+dl > dt {
+ text-align: right;
+ color: rgba(102, 153, 204, 1);
+ margin-top: 5px;
+ float: left;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ dl > dt {
+ width: 230px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ dl > dt {
+ width: 130px;
+ }
+
+}
+
+dl.wide > dt {
+ width: auto; /* ToDo */
+}
+
+dl > dt > label {
+ margin-top: 5px;
+ display: block;
+}
+
+dl.disabled > dt {
+ color: rgba(119, 119, 119, 1);
+}
+
+dl > dd {
+ padding-top: 5px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ dl > dd {
+ margin-left: 250px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ dl > dd {
+ margin-left: 150px;
+ }
+
+}
+
+dl.wide > dd {
+ margin-left: 0;
+}
+
+dl > dd > small {
+ font-size: 85%;
+ color: rgba(153, 153, 153, 1);
+ margin: 3px 0 7px;
+ display: block;
+}
+
+dl > dd > p {
+ margin-top: 5px;
+}
+
+/* Nested */
+
+dl > dd > fieldset {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+dl > dd > fieldset > legend {
+ display: none;
+}
+
+dl > dd > fieldset > dl > dt {
+ margin-right: 20px;
+ width: 150px;
+}
+
+dl > dd > fieldset > dl > dd {
+ margin-left: 0;
+}
+
+dl > dd > fieldset > dl > dd > label {
+ display: block;
+}
+
+/* Reversed (flips the label aside the checkbox or radio button) -
+ use only when automatically generating checkboxes or radio-buttons! */
+
+.reversed {
+ text-align: left;
+ margin-top: 2px;
+ position: absolute;
+ width: auto;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .reversed {
+ left: 270px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .reversed {
+ left: 170px;
+ }
+
+}
+
+.reversed ~ dd > input[type='checkbox'] {
+ margin-left: 0;
+}
+
+/* Special -> Sidebar */
+
+.wcf-sidebar dl > dt {
+ text-align: left;
+ float: none;
+ width: auto;
+}
+
+.wcf-sidebar dl > dd {
+ margin-left: 0;
+ display: block;
+ margin-bottom: 13px;
+}
+
+.wcf-sidebar dl > dd * {
+ display: block;
+}
+
+/* Special -> Overlay */
+
+.wcf-dialogContainer dl > dt {
+ width: 130px;
+}
+
+.wcf-dialogContainer dl > dd {
+ margin-left: 150px;
+}
+
+.wcf-dialogContainer dl > .reversed {
+ left: 170px;
+ width: auto;
+}
+
+
+
+/* ############## Forms ############## */
+
+/* Globals */
+
+label {
+ color: rgba(102, 153, 204, 1);
+}
+
+/* Structure */
+
+.wcf-formSubmit {
+ text-align: center;
+ margin-top: 15px;
+}
+
+input[type='checkbox'] ~ small,
+input[type='radio'] ~ small {
+ margin-top: 0;
+ margin-left: 21px;
+}
+
+
+
+/* -- -- -- Form Elements -- -- -- */
+
+/* Globals */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'],
+input[type='radio'],
+select:not([multiple]) {
+ cursor: pointer;
+}
+
+input[type='text'],
+input[type='search'], /* Does not work in WebKit browsers */
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+ padding: 5px 3px;
+ box-sizing: border-box;
+}
+
+select[multiple] {
+ font-family: 'Courier New', Courier, monospace;
+}
+
+/* Normal State */
+
+input[type='text'],
+input[type='search'],
+input[type='date'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+textarea,
+select[multiple] {
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgba(153, 153, 153, 1) rgba(204, 204, 204, 1) rgba(238, 238, 238, 1);
+ border-radius: 3px;
+ background-color: rgba(255, 255, 255, 1);
+
+ -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
+
+ -webkit-transition: background-color, border .2s linear;
+ -moz-transition: background-color, border .2s linear;
+ -ms-transition: background-color, border .2s linear;
+ -o-transition: background-color, border .2s linear;
+ transition: background-color, border .2s linear;
+}
+
+/* Hover State */
+
+input[type='text']:hover,
+input[type='search']:hover,
+input[type='date']:hover,
+input[type='email']:hover,
+input[type='url']:hover,
+input[type='password']:hover,
+textarea:hover,
+select[multiple]:hover {
+ border: 1px solid rgba(255, 170, 34, 1);
+ background-color: rgba(255, 249, 244, 1);
+}
+
+/* Active & Focus State */
+
+input[type='text']:active,
+input[type='search']:active,
+input[type='date']:active,
+input[type='email']:active,
+input[type='url']:active,
+input[type='password']:active,
+textarea:active,
+select[multiple]:active,
+
+input[type='text']:focus,
+input[type='search']:focus,
+input[type='date']:focus,
+input[type='email']:focus,
+input[type='url']:focus,
+input[type='password']:focus,
+textarea:focus,
+select[multiple]:focus {
+ border: 1px solid rgba(255, 170, 34, 1);
+ background-color: rgba(255, 249, 244, 1);
+ outline: none;
+
+ -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+ -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+ box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+}
+
+/* Read Only State */
+
+input[type='text'][readonly],
+input[type='search'][readonly],
+input[type='email'][readonly],
+input[type='date'][readonly],
+input[type='url'][readonly],
+input[type='password'][readonly],
+textarea[readonly],
+select[multiple][readonly] {
+ border-style: solid;
+ border-color: rgba(204, 204, 204, 1) rgba(221, 221, 221, 1) rgba(238, 238, 238, 1);
+ background-color: transparent;
+
+ -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+ -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+ -ms-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+ -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+ box-shadow: inset 0 1px 5px rgba(0, 0, 0, .05);
+}
+
+/* Disabled State */
+
+input[type='text'][disabled],
+input[type='search'][disabled],
+input[type='date'][disabled],
+input[type='email'][disabled],
+input[type='url'][disabled],
+input[type='password'][disabled],
+textarea[disabled],
+select[multiple][disabled] {
+ border-style: solid;
+ border-color: rgba(255, 255, 255, .5);
+ background-color: rgba(255, 255, 255, .5);
+}
+
+
+
+/* -- -- -- Input Widths -- -- -- */
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ textarea {
+ width: 100%;
+ min-width: 200px;
+ }
+
+ .tiny {
+ width: 100px;
+ }
+
+ .short {
+ width: 10%;
+ min-width: 75px;
+ }
+
+ .medium {
+ width: 50%;
+ min-width: 150px;
+ }
+
+ .long {
+ width: 100%;
+ min-width: 200px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ textarea {
+ width: 99%;
+ /* none */
+ }
+
+ .tiny {
+ width: 50px;
+ }
+
+ .short {
+ width: 10%;
+ min-width: 50px;
+ }
+
+ .medium {
+ width: 30%;
+ min-width: 100px;
+ }
+
+ .long {
+ width: 100%;
+ min-width: 150px;
+ }
+
+}
+
+.auto {
+ width: auto;
+}
+
+/* Special -> Search Input WebKit */
+
+input[type=search] {
+ border-radius: 30px;
+
+ -webkit-appearance: textfield;
+ -webkit-box-sizing: content-box;
+}
+
+::-webkit-search-decoration {
+ display: none;
+}
+
+
+
+/* -- -- -- Form Errors -- -- -- */
+
+.wcf-formError input[type='text'],
+.wcf-formError input[type='search'],
+.wcf-formError input[type='email'],
+.wcf-formError input[type='url'],
+.wcf-formError input[type='password'],
+.wcf-formError textarea {
+ border-color: rgba(255, 0, 0, 1);
+ background-color: rgba(255, 246, 246, 1);
+}
+
+
+
+/* ############## ToDo: Pre-Input Buttons & Dropdowns ############## */
+
+/* -- -- -- Bounding Box -- -- -- */
+
+/**
+ * This defines the shape of the Pre-Input Buttons
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+.wcf-preInput {
+ display: table;
+ position: relative;
+ width: 100%;
+}
+
+.wcf-preInput > input,
+.wcf-preInput > textarea { /* ToDo: The textarea solution is not so nice */
+ border-radius: 0 3px 3px 0;
+ margin: 0 !important;
+ display: table-cell;
+ width: 99%;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-preInput > input,
+ .wcf-preInput > textarea {
+ min-width: 300px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-preInput > input,
+ .wcf-preInput > textarea {
+ min-width: 100px;
+ }
+
+}
+
+
+
+/* -- -- -- Dropdowns -- -- -- */
+
+/* Dropdown Caption */
+
+.wcf-preInput .wcf-dropdownCaption {
+ letter-spacing: -1px;
+ cursor: pointer;
+ border-radius: 3px 0 0 3px;
+ padding-right: 5px;
+ display: table-cell;
+ width: 1%;
+ vertical-align: middle;
+}
+
+.wcf-preInput .wcf-dropdownCaption span {
+ margin-right: -1px;
+ padding-left: 5px;
+ white-space: nowrap;
+}
+
+.wcf-preInput .wcf-dropdownCaption span.active {
+ background-image: url('../../icon/dropdown1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 10px;
+}
+
+
+
+/* -- -- -- Special -> System Notification -- -- -- */
+
+.wcf-preInput .wcf-dropdown > li.missingValue { /* ToDo */
+ /* color: #990; */
+ background-image: url('../../icon/systemWarning.svg');
+ background-size: 16px;
+ background-position: 95% center;
+ background-repeat: no-repeat;
+ /* background-color: #ffd; */
+}
+
+
+
+/* ############## ToDo: Small Buttons ############## */
+
+/**
+ * This defines the shape of the Small Buttons
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+/* -- -- -- Standard -- -- -- */
+
+/* Globals */
+
+.wcf-smallButtons {
+ list-style-type: none;
+ margin-right: -1px;
+ margin-bottom: -1px;
+}
+
+.wcf-smallButtons > li {
+ margin-left: -5px;
+ display: inline-block;
+}
+
+.wcf-smallButtons > li > a {
+ white-space: nowrap;
+ padding: 3px 7px;
+ display: block;
+ min-height: 16px;
+}
+
+.wcf-smallButtons > li.separator > a {
+ border-right: 1px dotted #bcd;
+}
+
+.wcf-smallButtons > li:first-child > a {
+ border-top-left-radius: 13px;
+}
+
+.wcf-smallButtons > li:last-child > a {
+ border-bottom-right-radius: 7px;
+}
+
+
+
+/* -- -- -- Small Button Bar -- -- -- */
+
+.wcf-smallButtonBar {
+ text-align: center !important;
+ border-top: 1px solid rgba(204, 204, 204, 1);
+ border-radius: 0 0 7px 7px;
+
+ background-color: rgba(0, 0, 0, .015);
+ background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+
+ padding: 3px;
+ position: relative;
+ z-index: 100;
+}
+
+.wcf-smallButtonBar li {
+ display: inline;
+ position: relative;
+}
+
+.wcf-smallButtonBar li span {
+ /* Removes the button-caption */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+
+
+/* ############## Large Buttons ############## */
+
+/**
+ * This defines the shape of the Large Buttons
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+/* Globals */
+
+.wcf-largeButtons {
+ text-align: right;
+ float: right;
+}
+
+.wcf-largeButtons > li {
+ display: inline;
+}
+
+.wcf-largeButtons > li > a img {
+ margin: -5px 1px -5px -5px;
+ vertical-align: middle;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-largeButtons > li > a img {
+ height: 24px;
+ width: 24px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-largeButtons > li {
+ font-size: 125%;
+ }
+
+ .wcf-largeButtons > li > a {
+ padding: 10px 15px !important;
+ white-space: nowrap;
+ }
+
+ .wcf-largeButtons > li > a img {
+ height: 32px;
+ width: 32px;
+ }
+
+}
+
+/* Normal State */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.wcf-largeButtons > li > a {
+ font-size: 100%;
+ font-weight: bold;
+ border-radius: 30px;
+ margin: 3px 2px;
+ padding: 5px 13px;
+ display: inline-block;
+}
+
+/* ToDo: Special */
+
+.wcf-sidebar .wcf-largeButtons *,
+.wcf-sidebar input {
+ font-size: 75% !important;
+ padding: 3px 7px;
+}
+
+.wcf-sidebar .wcf-largeButtons *,
+.wcf-sidebar input {
+ font-size: 75% !important;
+}
+
+
+
+/* ############## Boxes ############## */
+
+/**
+ * This defines a box with rounded borders
+ * Use the extra classes to further style boxes
+ */
+
+/* Globals */
+
+.wcf-box {
+ border: 1px solid rgba(204, 204, 204, 1);
+ border-radius: 5px;
+ box-sizing: border-box;
+}
+
+.wcf-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;
+ display: table;
+ width: 100%;
+}
+
+.wcf-boxPadding {
+ padding: 13px 23px 23px;
+}
+
+.wcf-boxDecor {
+ background-color: rgba(253, 253, 253, 1);
+}
+
+/* Headings */
+
+.wcf-boxTitle > hgroup {
+ text-shadow: 0 -1px 0 #000;
+ color: rgba(255, 255, 255, 1);
+ padding: 7px;
+ display: inline-block;
+}
+
+.wcf-boxTitle > a,
+.wcf-boxTitle > hgroup a {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 1);
+}
+
+.wcf-boxTitle > hgroup h1 {
+ font-size: 120%;
+ display: inline-block;
+}
+
+.wcf-boxTitle > hgroup h2 {
+ font-size: 85%;
+ color: rgba(255, 255, 255, .9);
+ margin-top: 5px;
+}
+
+.wcf-boxTitle > hgroup .wcf-badge {
+ font-size: 65%;
+ color: #036;
+}
+
+/* Leading icon */
+
+.wcf-boxTitle > a {
+ margin: 7px 0 0 10px;
+ float: left;
+}
+
+.wcf-boxTitle > a img {
+ height: 16px;
+ width: 16px;
+}
+
+
+
+/* ############## Tab Menu ############## */
+
+/* Globals */
+
+.wcf-tabMenu {
+ /* Toggle for tab menu orientation (options: left|center|right) */
+ text-align: center;
+ margin-top: 15px;
+ padding: 0 10px;
+ display: block;
+ position: relative;
+}
+
+fieldset ~ .wcf-tabMenuContainer .wcf-tabMenu {
+ margin-top: 30px;
+}
+
+/* -- -- -- Tabs -- -- -- */
+
+/* Globals */
+
+.wcf-tabMenu ul {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ white-space: nowrap;
+ 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);
+ padding: 0 5px 3px 5px;
+ display: inline-block;
+ position: relative;
+}
+
+.wcf-tabMenu li {
+ white-space: nowrap;
+ list-style: none;
+ display: inline-block;
+}
+
+.wcf-tabMenu li.ui-state-active {
+ margin-right: -7px;
+ margin-left: -7px;
+}
+
+.wcf-tabMenu li a {
+ text-decoration: none;
+ color: rgba(153, 153, 153, 1);
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ bottom: -3px;
+ z-index: 10;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-tabMenu li a {
+ font-size: 110%;
+ padding: 1px 10px 3px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-tabMenu li a {
+ font-size: 150%;
+ padding: 5px 10px;
+ max-width: 100px;
+ }
+
+}
+
+.wcf-tabMenu li:not(.ui-state-active) a:hover {
+ color: rgba(102, 102, 102, 1);
+}
+
+.wcf-tabMenu li.ui-state-active a {
+ font-weight: bold;
+ color: #333 !important;
+ border-width: 1px;
+ border-style: solid;
+ border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ border-color: #ccc #ccc #fff;
+ background-color: rgba(255, 255, 255, 1);
+ padding: 10px 15px 5px;
+ margin-top: -10px;
+ z-index: 30;
+}
+
+/* Rounded Bottom Corners */
+
+.wcf-tabMenu li.ui-state-active a:before {
+ position: absolute;
+ bottom: -1px;
+ width: 5px;
+ height: 5px;
+ content: " ";
+ border: 1px solid #ccc;
+ left: -6px;
+ border-bottom-right-radius: 6px;
+ border-width: 0 1px 1px 0;
+
+ -webkit-box-shadow: 2px 2px 0 #fff;
+ -moz-box-shadow: 2px 2px 0 #fff;
+ -ms-box-shadow: 2px 2px 0 #fff;
+ -o-box-shadow: 2px 2px 0 #fff;
+ box-shadow: 2px 2px 0 #fff;
+}
+
+.wcf-tabMenu li.ui-state-active a:after {
+ position: absolute;
+ bottom: -1px;
+ width: 5px;
+ height: 5px;
+ content: " ";
+ border: 1px solid #ccc;
+ right: -6px;
+ border-bottom-left-radius: 6px;
+ border-width: 0 0 1px 1px;
+
+ -webkit-box-shadow: -2px 2px 0 #fff;
+ -moz-box-shadow: -2px 2px 0 #fff;
+ -ms-box-shadow: -2px 2px 0 #fff;
+ -o-box-shadow: -2px 2px 0 #fff;
+ box-shadow: -2px 2px 0 #fff;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-tabMenu li.ui-state-active a {
+ font-size: 130%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-tabMenu li.ui-state-active a {
+ font-size: 150%;
+ }
+
+}
+
+.wcf-tabMenu li.ui-state-active a,
+.wcf-tabMenu li.ui-state-disabled a,
+.wcf-tabMenu li.ui-state-processing a {
+ cursor: default;
+}
+
+
+
+/* -- -- -- Tab Menu Content -- -- -- */
+
+.wcf-tabMenuContent {
+ background-color: rgba(255, 255, 255, 1);
+ margin-top: -1px;
+ display: block;
+ position: relative;
+ z-index: 20; /* Prevents border overlay during transition */
+}
+
+/* ToDo: 2x hidden? */
+
+.ui-tabs .ui-tabs-hide {
+ display: none !important;
+}
+
+.ui-helper-hidden {
+ display: none;
+}
+
+.ui-helper-hidden-accessible {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px,1px,1px,1px);
+}
+
+
+
+/* ############## Menu ############## */
+
+/* Standard */
+
+.wcf-menu {
+ color: rgba(102, 102, 102, 1);
+}
+
+.wcf-menu ul {
+ /* General toggle switch for menu orientation (options: left|center|right) */
+ text-align: center;
+}
+
+.wcf-menu ul li {
+ white-space: nowrap;
+ margin-top: 10px;
+ display: inline-block;
+}
+
+.wcf-menu ul li a {
+ font-size: 85%;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-decoration: none;
+ color: rgba(153, 153, 153, 1);
+ border: 1px solid rgba(0, 0, 0, .2);
+ border-radius: 13px;
+ background-color: rgba(255, 255, 255, .5);
+ padding: 2px 10px;
+
+ -webkit-transition: color .1s linear;
+ -moz-transition: color .1s linear;
+ -ms-transition: color .1s linear;
+ -o-transition: color .1s linear;
+ transition: color .1s linear;
+}
+
+.wcf-menu ul li:not(.ui-state-active) a:hover {
+ color: #333;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #fa2;
+ background-color: rgba(255, 249, 244, 1);
+}
+
+.wcf-menu ul li:not(.ui-state-active) a:active,
+.wcf-menu ul li:not(.ui-state-active) a:focus {
+ -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);
+}
+
+.wcf-menu ul li.ui-state-active a {
+ font-weight: bold;
+ text-shadow: 0 1px 0 #000;
+ color: rgba(255, 255, 255, 1);
+ cursor: default;
+ border: 1px solid rgba(0, 0, 0, .2);
+ background-color: rgba(0, 0, 0, .5);
+}
+
+/* Special -> Menu within box-title */
+
+.wcf-boxTitle > .wcf-menu {
+ color: rgba(255, 255, 255, 1);
+ border: none;
+ margin: 0 !important;
+ padding: 6px 7px !important;
+}
+
+.wcf-boxTitle > .wcf-menu ul li {
+ margin-top: 0;
+}
+
+.wcf-boxTitle > .wcf-menu ul li a {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ color: #eee !important;
+ background-color: rgba(0, 0, 0, .1);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a:hover {
+ color: rgba(255, 255, 255, 1) !important;
+ border: 1px solid rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, .2);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a:active,
+.wcf-boxTitle > .wcf-menu ul li a:focus,
+.wcf-boxTitle > .wcf-menu ul li.ui-state-active a {
+ border: 1px solid rgba(0, 0, 0, .5);
+
+ -webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+ -moz-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+ -ms-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+ -o-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+ box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
+}
+
+.wcf-boxTitle > .wcf-menu ul li a .wcf-badge {
+ color: #369 !important;
+}
+
+/* Special: Menu below tab-menu */
+
+.wcf-tabMenuContainer > .wcf-menu {
+ border-bottom: 1px solid #ccc;
+ margin: -15px -23px 0;
+ padding: 0 7px 10px;
+}
+
+.wcf-tabMenuContainer > .wcf-menu {
+ background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+}
+
+
+
+/* ############## Bread Crumbs ############## */
+
+/* Globals */
+
+.wcf-breadcrumbs {
+ text-align: left;
+ border: 1px solid rgba(204, 204, 204, 1);
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 1);
+ display: block;
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+.wcf-breadcrumbs > ul > li {
+ font-size: 85%;
+ list-style: none;
+ float: left;
+ position: relative;
+ max-width: 30%;
+
+ -webkit-transition: max-width .2s linear;
+ -moz-transition: max-width .2s linear;
+ -ms-transition: max-width .2s linear;
+ -o-transition: max-width .2s linear;
+ transition: max-width .2s linear;
+}
+
+.wcf-breadcrumbs > ul > li:hover {
+ max-width: 100%;
+}
+
+/* Arrow */
+
+.wcf-breadcrumbs > ul > li > span {
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent rgba(204, 204, 204, 1);
+ display: block !important;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -4px;
+ right: -15px;
+ z-index: 20;
+}
+
+.wcf-breadcrumbs > ul > li > .pointer > span {
+ text-indent: -9000px;
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent rgba(255, 255, 255, 1);
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -15px;
+ left: -16px;
+ overflow: hidden;
+}
+
+/* Caption */
+
+.wcf-breadcrumbs > ul > li a {
+ text-decoration: none;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: rgba(153, 153, 153, 1);
+ margin: 0;
+ padding: 5px 1px 5px 20px;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.wcf-breadcrumbs > ul > li:first-child a {
+ border-radius: 5px 0 0 5px;
+ background-image: url('../../icon/home1.svg');
+ background-position: 7px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ padding-left: 30px;
+}
+
+.wcf-breadcrumbs > ul > li:hover a {
+ color: rgba(102, 102, 102, 1);
+ background-color: rgba(249, 249, 249, 1);
+ position: relative;
+ z-index: 10;
+}
+
+.wcf-breadcrumbs > ul > li:hover > .pointer > span {
+ border-color: transparent transparent transparent rgba(249, 249, 249, 1);
+}
+
+
+
+/* ############## Tables ############## */
+
+/* Globals */
+
+table {
+ border-spacing: 0;
+ width: 100% !important;
+}
+
+
+
+/* -- -- -- Table Header -- -- -- */
+
+thead th {
+ font-size: 87%;
+ white-space: nowrap;
+}
+
+thead th:first-child {
+ /* Rounded corners for the first table header cell
+ (only in effect if the table is not inside a "div" with class ".boxTitle") */
+ border-top-left-radius: 5px;
+}
+
+thead th:last-child {
+ /* Rounded corners for the last table header cell
+ (only in effect if the table is not inside a "div" with class ".boxTitle") */
+ border-top-right-radius: 5px;
+}
+
+thead th {
+ text-shadow: 0 -1px 0 #000;
+ color: #69c;
+ border-right: 1px solid rgba(0, 0, 0, .2);
+
+ 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;
+
+ -webkit-transition: background .2s linear;
+ -moz-transition: background .2s linear;
+ -ms-transition: background .2s linear;
+ -o-transition: background .2s linear;
+ transition: background .2s linear;
+}
+
+thead th a {
+ text-shadow: 0 -1px 0 #000;
+ text-decoration: none !important;
+ color: #69c;
+ margin: -7px;
+ padding: 7px;
+ display: block;
+}
+
+thead th:last-child a {
+ border-right-width: 0;
+}
+
+thead th:hover a {
+ color: rgba(255, 255, 255, 1);
+ background-color: rgba(0, 0, 0, .2);
+}
+
+thead th a:active,
+thead th a:focus,
+thead th.active a {
+ color: rgba(255, 255, 255, 1);
+ background-color: rgba(0, 0, 0, .1);
+
+ -webkit-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+ -moz-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+ -ms-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+ -o-box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+ box-shadow: inset 0 5px 15px rgba(0, 0, 0, .4);
+}
+
+thead th.active a {
+ font-weight: bold;
+}
+
+thead th.active:hover a {
+ background-color: rgba(0, 0, 0, .3);
+}
+
+thead th a img {
+ /* ToDo: Sort-icon orientation does not work */
+ text-align: right;
+ /* Negative margins to prevent table-cells from expanding vertically when the sort-icon shows up */
+ margin-top: -5px !important;
+ margin-bottom: -5px !important;
+}
+
+
+
+/* -- -- -- Table Body -- -- -- */
+
+tbody tr {
+ border-bottom: 1px solid rgba(255, 255, 255, .3);
+}
+
+tbody tr:last-child {
+ /* No border for the last table row */
+ border-bottom-width: 0;
+}
+
+tbody tr:last-child td:first-child {
+ /* Rounded corners for the first table cell in the last row */
+ border-bottom-left-radius: 5px;
+}
+
+tbody tr:last-child td:last-child {
+ /* Rounded corners for the last table cell in the last row */
+ border-bottom-right-radius: 5px;
+}
+
+tbody td {
+ background-color: #fcfdfe;
+ border-right: 1px solid rgba(255, 255, 255, .3);
+ padding: 5px;
+
+ -webkit-transition: background .1s linear;
+ -moz-transition: background .1s linear;
+ -ms-transition: background .1s linear;
+ -o-transition: background .1s linear;
+ transition: background .1s linear;
+}
+
+tbody td:last-child {
+ border-right-width: 0;
+}
+
+tbody tr:nth-child(2n+1) td {
+ /* Auto-colorer for every 2nd row */
+ background-color: #f2f6fa;
+}
+
+tbody tr:hover td {
+ background-color: #d8e7f5;
+}
+
+
+
+/* -- -- -- Special -> Table Header -- -- -- */
+
+.wcf-menu ~ .wcf-box thead th:first-child { /* ToDo: Does this case really exist any more? */
+ border-top-left-radius: 0 !important;
+}
+
+.wcf-menu ~ .wcf-box thead th:last-child { /* ToDo: Does this case really exist any more? */
+ border-top-right-radius: 0 !important;
+}
+
+.wcf-boxTitle > hgroup + table th:first-child, /* Boxes with a title bar */
+.wcf-boxTitle > nav + table th:first-child { /* Boxes with a menu in the title bar */
+ border-top-left-radius: 0 !important;
+}
+
+.wcf-boxTitle > hgroup + table th:last-child, /* Boxes with a title bar */
+.wcf-boxTitle > .wcf-menu + table th:last-child { /* Boxes with a menu in the title bar */
+ border-top-right-radius: 0 !important;
+}
+
+
+
+/* -- -- -- Special -> Checkboxes in Table Headers -- -- -- */
+
+thead input[type='checkbox'] {
+ margin-top: -5px !important;
+ margin-bottom: -5px !important;
+}
+
+
+
+/* -- -- -- ToDo: Table Column Formats -- -- -- */
+
+.columnMark,
+.columnStatus {
+ text-align: center;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+.columnStatus .wcf-badge {
+ margin-right: 1px !important;
+ margin-left: 1px !important;
+}
+
+.columnDigits,
+.columnID {
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+.columnIcon {
+ text-align: left;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+tr img[src$="D.svg"] {
+ cursor: not-allowed;
+}
+
+tr .columnIcon img {
+ height: 16px;
+ width: 16px;
+}
+
+.big .columnIcon img {
+ height: 24px;
+ width: 24px;
+}
+
+.columnTitle {
+ font-weight: bold;
+ text-align: left;
+}
+
+.columnText {
+ font-weight: normal;
+ text-align: left;
+ max-width: 20%;
+}
+
+.columnDate,
+.columnRegistrationDate {
+ font-size: 85%;
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+.columnURL {
+ font-size: 85%;
+ text-align: left;
+}
+
+
+
+/* ############## ToDo: Page Navigation ############## */
+
+/**
+ * This defines the shape of the Page-Navigation widget
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+/* Globals */
+
+:not(.wcf-statusDisplay) > .wcf-pageNavigation {
+ margin: 5px 0 3px;
+ float: left;
+}
+
+/* -- -- -- Buttons (Level 1 & 2) -- -- -- */
+
+.wcf-pageNavigation ul li {
+ font-weight: bold;
+ text-align: center;
+ border-radius: 3px;
+ margin: 1px;
+ float: left;
+ min-width: 19px;
+}
+
+.wcf-contentHeader .wcf-pageNavigation ul li,
+.wcf-contentFooter .wcf-pageNavigation ul li {
+ margin: 2px;
+}
+
+.wcf-pageNavigation ul li:not(.active):not(.disabled) {
+ cursor: pointer;
+}
+
+.wcf-pageNavigation ul li.disabled {
+ cursor: not-allowed;
+ border: 1px solid rgba(0, 0, 0, .1) !important;
+ background-image: none !important;
+}
+
+.wcf-pageNavigation ul li img {
+ height: 16px;
+ width: 16px;
+}
+
+.wcf-pageNavigation ul li.skip {
+ padding: 2px 0 1px;
+}
+
+.wcf-pageNavigation ul li a {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ text-decoration: none;
+ color: rgba(153, 153, 153, 1);
+ display: inline-block;
+}
+
+.wcf-pageNavigation ul li:not(.disabled):hover a {
+ color: rgba(102, 102, 102, 1);
+}
+
+.wcf-pageNavigation ul li:not(.skip) a {
+ padding: 3px 1px;
+}
+
+.wcf-pageNavigation ul li:active a,
+.wcf-pageNavigation ul li:focus a {
+ color: #333;
+}
+
+.wcf-pageNavigation ul li.active,
+.wcf-pageNavigation ul li.active:hover {
+ text-shadow: 0 1px 0 #000 !important;
+ color: rgba(255, 255, 255, 1) !important;
+ border: 1px solid rgba(0, 0, 0, .3) !important;
+
+ 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 0;
+}
+
+/* -- -- -- ToDo: Children (Level 2) -- -- -- */
+
+/* Buttons */
+
+.wcf-pageNavigation ul li.children {
+ position: relative;
+}
+
+.wcf-pageNavigation ul li.children > a {
+ margin-right: -10px;
+ position: relative;
+ z-index: 10;
+}
+
+.wcf-pageNavigation ul li.children input {
+ margin-left: 1px;
+ width: 30px;
+ height: 9px;
+}
+
+.wcf-pageNavigation ul li.children img {
+ position: relative;
+ width: 7px;
+ height: 9px;
+ bottom: 1px;
+ left: 25px;
+}
+
+/* Dropdown */
+
+.wcf-pageNavigation ul li.children .wcf-dropdown {
+ text-align: left;
+ border-color: transparent;
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, .7);
+ margin-top: 28px;
+ margin-left: -2px;
+ padding: 2px 1px;
+ display: inline-block;
+ position: absolute;
+ height: 0;
+ overflow: hidden;
+ min-width: 165px;
+ max-width: 250px;
+ opacity: 0;
+
+ -webkit-transition: opacity .2s linear;
+ -moz-transition: opacity .2s linear;
+ -ms-transition: opacity .2s linear;
+ -o-transition: opacity .2s linear;
+ transition: opacity .2s linear;
+}
+
+.wcf-pageNavigation ul li.children:hover .wcf-dropdown {
+ border-color: rgba(255, 255, 255, .7);
+ height: auto;
+ overflow: visible;
+ opacity: 1;
+}
+
+.wcf-pageNavigation ul li.children .wcf-dropdown ul {
+ padding: 0 5px 5px 2px;
+ display: block;
+}
+
+.wcf-pageNavigation ul li.children .wcf-dropdown ul li {
+ margin: 2px 3px;
+}
+
+/* Pointer */
+
+.wcf-pageNavigation ul li.children .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, .7) transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -7px !important;
+ left: 11px;
+}
+
+.wcf-pageNavigation ul li.children .pointer span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: rgba(0, 0, 0, .7) transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+}
+
+/* Special -> Status Display */
+
+.wcf-statusDisplay .wcf-pageNavigation {
+ font-size: 80%;
+}
+
+.wcf-statusDisplay .wcf-pageNavigation ul li {
+ min-width: 13px;
+}
+
+.wcf-statusDisplay .wcf-pageNavigation ul li:not(.skip) a {
+ padding: 1px;
+}
+
+
+
+/* ############## System Notifications (Inline) ############## */
+
+/* Globals */
+
+.wcf-info,
+.wcf-error,
+.wcf-success,
+.wcf-warning {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ line-height: 1.5;
+ border-radius: 7px;
+ margin-top: 15px;
+ padding: 7px 15px 7px 50px;
+ box-sizing: border-box;
+}
+
+/* Types */
+
+.wcf-info {
+ color: #68b;
+ border: 1px solid #9be;
+ background-color: #def;
+
+ background-image: url('../../icon/systemInfo.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+ background-image: url('../../icon/systemInfo.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+ background-image: url('../../icon/systemInfo.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+ background-image: url('../../icon/systemInfo.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+ background-image: url('../../icon/systemInfo.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .3) 15px, rgba(255, 255, 255, .3) 30px);
+
+ background-size: 24px, auto;
+ background-position: 13px center, left top;
+ background-repeat: no-repeat, repeat;
+}
+
+.wcf-success {
+ color: #090;
+ border: 1px solid #0c0;
+ background-color: #efe;
+
+ background-image: url('../../icon/systemSuccess.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemSuccess.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemSuccess.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemSuccess.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemSuccess.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+
+ background-size: 24px, auto;
+ background-position: 13px center, left top;
+ background-repeat: no-repeat, repeat;
+
+}
+
+.wcf-warning {
+ color: #990;
+ border: 1px solid #cc0;
+ background-color: #ffd;
+
+ background-image: url('../../icon/systemWarning.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemWarning.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemWarning.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemWarning.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemWarning.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+
+ background-size: 24px, auto;
+ background-position: 13px center, left top;
+ background-repeat: no-repeat, repeat;
+}
+
+.wcf-error {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+
+ background-image: url('../../icon/systemError.svg'), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemError.svg'), -moz-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemError.svg'), -ms-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemError.svg'), -o-repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+ background-image: url('../../icon/systemError.svg'), repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255, 255, 255, .5) 15px, rgba(255, 255, 255, .5) 30px);
+
+ background-size: 24px, auto;
+ background-position: 13px center, left top;
+ background-repeat: no-repeat, repeat;
+}
+
+/* Inline Errors */
+
+.wcf-innerError {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ line-height: 1.5;
+ color: #c00;
+ border: 1px solid #f99;
+ border-radius: 7px;
+ background-color: rgba(255, 238, 238, 1);
+ background-image: url('../../icon/systemError.svg');
+ background-size: 16px;
+ background-position: 5px center;
+ background-repeat: no-repeat;
+ margin-top: 5px;
+ padding: 2px 10px 2px 25px;
+ display: table !important;
+ position: relative; /* Firefox support (from version 10 on) is buggy */
+ clear: both;
+
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.wcf-innerError .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: #f99 transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -7px !important;
+ left: 10%;
+}
+
+.wcf-innerError .pointer span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: rgba(255, 238, 238, 1) transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+}
+
+/* Special -> Pre Input */
+
+.wcf-preInput ~ .wcf-innerError .pointer {
+ right: 10%;
+ left: auto;
+}
+
+
+
+/* ############## ToDo: System Notifications (Sheet) ############## */
+
+/* Globals */
+
+.wcf-systemNotification { /* declarations taken from .success */
+ background-color: rgba(238, 255, 238, 1);
+ border: 1px solid rgba(0, 204, 0, 1);
+ border-top-width: 0;
+ border-radius: 0 0 5px 5px;
+ color: rgba(0, 153, 0, 1);
+ left: 40%;
+ padding: 14px;
+ padding-top: 10px;
+ position: fixed;
+ text-align: center;
+ top: -38px;
+ width: auto;
+ z-index: 500;
+
+ -webkit-transition: top .5s linear;
+ -moz-transition: top .5s linear;
+ -ms-transition: top .5s linear;
+ -o-transition: top .5s linear;
+ transition: top .5s linear;
+}
+
+.wcf-systemNotification.open {
+ top: 0;
+}
+
+
+
+/* ############## ToDo: WCF Dialog ############## */
+
+/* Globals */
+
+.wcf-dialogContainer {
+ border: 23px solid transparent;
+ border-radius: 15px;
+ background-color: rgba(0, 0, 0, .4);
+ margin-right: auto !important;
+ margin-left: auto !important;
+ position: fixed !important;
+
+ -webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+ -moz-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+ -ms-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+ -o-box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 23px rgba(0, 0, 0, .3);
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-dialogContainer {
+ min-width: 500px !important;
+ max-width: 780px !important;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-dialogContainer {
+ min-width: 200px !important;
+ max-width: 380px !important;
+ }
+
+}
+
+/* Titlebar */
+
+.wcf-dialogTitlebar {
+ border-bottom: 1px solid #036;
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ background-color: #29374a;
+ /* 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;
+ padding: 10px 20px;
+ position: relative;
+ display: block;
+ /*cursor: move;*/
+}
+
+.wcf-dialogTitle {
+ font-size: 170%;
+ font-weight: bold;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
+ color: rgba(255, 255, 255, 1);
+ display: block;
+}
+
+.wcf-dialogCloseButton {
+ background-image: url('../../icon/delete2.svg');
+ background-size: 32px;
+ background-position: top left;
+ background-repeat: no-repeat;
+ position: absolute !important;
+ width: 32px;
+ height: 32px;
+ top: 5px;
+ right: 10px;
+ cursor: pointer;
+}
+
+.wcf-dialogCloseButton span {
+ /* Removes the button-caption */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+/* Content */
+
+.wcf-dialogContent {
+ color: rgba(238, 238, 238, 1);
+ background-color: #333;
+ overflow: auto;
+}
+
+.wcf-dialogContent a {
+ color: #69c;
+}
+
+.wcf-dialogContent a:hover {
+ color: #fff;
+}
+
+.wcf-dialogContainer > .wcf-dialogContent {
+ border-radius: 7px;
+ padding: 0;
+ /*width: auto !important;*/
+}
+
+.wcf-dialogTitlebar ~ .wcf-dialogContent {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 7px;
+ border-bottom-right-radius: 7px;
+ padding: 10px 20px 20px;
+}
+
+/* Special */
+
+#ajaxExceptionStacktrace {
+ white-space: nowrap;
+ overflow: scroll;
+ overflow-y: hidden;
+}
+
+#ajaxExceptionStacktrace {
+ font-family: monospace;
+ font-size: 90%;
+ line-height: 1.2;
+ border: 1px solid #ccc;
+ padding: 3px;
+}
+
+
+
+/* ############## ToDo: Overlay Spinner ############## */
+
+.wcf-dialogOverlay {
+ background-color: rgba(0, 0, 0, 1);
+ opacity: .5;
+ position: fixed;
+ width: 100% !important;
+ top: 0;
+ left: 0;
+}
+
+
+/* ToDo: What is that and change that class-name! */
+
+.wcf-overlayLoading {
+ background-color: rgba(255, 255, 255, 1);
+ background-image: url('../../icon/spinner1.svg');
+ background-position: center center;
+ background-size: 32px;
+ background-repeat: no-repeat;
+}
+
+
+
+/* ############## Balloon Tooltips ############## */
+
+/* Globals */
+
+.jsTooltip { /* Do not change this style */
+ cursor: pointer;
+}
+
+.wcf-balloonTooltip {
+ font-size: .85em;
+ color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ padding: 5px 10px 7px;
+ position: absolute;
+ max-width: 300px;
+ z-index: 800;
+
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ -o-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
+}
+
+/* Pointer */
+
+.wcf-balloonTooltip .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, .7) transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -7px !important;
+ left: 50%;
+}
+
+.wcf-balloonTooltip .pointer span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: rgba(0, 0, 0, .7) transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+}
+
+
+
+/* ############## ToDo: Likes Widget ############## */
+
+/* @see theadPostList.tpl */
+
+/**
+ * This defines the shape of the Likes widget
+ * Colors & effects are being defined by the
+ * "Global Button Color & Effect Library"
+ */
+
+/* -- -- -- -- Widget -- -- -- -- -- */
+
+/* Globals */
+
+.wcf-likesWidget {
+ margin: 0 0 0 15px;
+}
+
+/* Buttons */
+
+.wcf-likesWidget > ul {
+ float: right;
+ margin-right: 7px;
+ margin-left: 10px;
+}
+
+.wcf-likesWidget > ul > li {
+ text-align: right;
+ margin-top: 3px;
+ display: inline-block;
+}
+
+.wcf-likesWidget > ul > li > a {
+ padding: 2px 4px 3px;
+}
+
+.wcf-likesWidget > ul > li:first-child {
+ margin-right: -5px;
+}
+
+
+
+/* ############## ToDo: Clipboard Editor Buttons ############## */
+
+/* Globals */
+
+.wcf-clipboardEditor > ul > li {
+ font-size: .85em;
+ border-radius: 30px;
+ margin-top: 7px;
+ margin-right: 3px;
+ margin-left: 3px;
+ float: left;
+ position: relative;
+}
+
+.wcf-clipboardEditor > ul > li span {
+ text-decoration: none !important;
+ cursor: pointer;
+ background-image: url('../../icon/dropdown1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ margin-right: 5px;
+ padding: 3px 12px 5px 10px;
+ display: inline-block;
+}
+
+
+
+/* ############## ToDo: CK-Editor ############## */
+
+.wcf-wideEditor dt {
+ display: none;
+}
+
+.wcf-wideEditor dd {
+ margin-left: 0;
+}
+
+
+
+/* ############## Global Button Color & Effect Library ############## */
+
+/**
+ * This defines the colors & effects of Button elements
+ * Define the shape of the element in a separate class
+ */
+
+/* -- -- -- Normal Buttons -- -- -- */
+
+/* Normal State */
+
+.wcf-button,
+input[type='reset']:not([disabled]),
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]),
+button:not([disabled]) {
+ text-decoration: none;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ color: rgba(153, 153, 153, 1);
+ border-width: 1px;
+ 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));
+
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+
+ -webkit-transition-property: border, box-shadow, background-color, background-image, color;
+ -webkit-transition-duration: .1s;
+ -webkit-transition-timing-function: linear;
+
+ -moz-transition-property: border, box-shadow, background-color, background-image, color;
+ -moz-transition-duration: .1s;
+ -moz-transition-timing-function: linear;
+
+ -ms-transition-property: border, box-shadow, background-color, background-image, color;
+ -ms-transition-duration: .1s;
+ -ms-transition-timing-function: linear;
+
+ -o-transition-property: border, box-shadow, background-color, background-image, color;
+ -o-transition-duration: .1s;
+ -o-transition-timing-function: linear;
+
+ transition-property: border, box-shadow, background-color, background-image, color;
+ transition-duration: .1s;
+ transition-timing-function: linear;
+}
+
+/* Hover State */
+
+.wcf-button:hover,
+.default .wcf-button:hover,
+input[type='reset']:not([disabled]):hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]):hover,
+button:not([disabled]):hover {
+ text-decoration: none;
+ color: rgba(102, 102, 102, 1);
+ 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 State */
+
+.wcf-button:focus,
+.default .wcf-button:focus,
+input[type='reset']:not([disabled]):focus,
+input[type='submit']:not([disabled]):focus,
+input[type='button']:not([disabled]):focus,
+button:not([disabled]):focus,
+
+.wcf-button:active,
+.active .wcf-button,
+.default .wcf-button:active,
+input[type='reset']:not([disabled]):active,
+input[type='submit']:not([disabled]):active,
+input[type='button']:not([disabled]):active,
+button:not([disabled]):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);
+}
+
+
+
+/* -- -- -- Default Buttons -- -- -- */
+
+/* Default State Glow */
+
+@-webkit-keyframes glowButtons {
+ 0% {
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+@-moz-keyframes glowButtons {
+ 0% {
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+@-ms-keyframes glowButtons {
+ 0% {
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowButtons {
+ 0% {
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+*/
+@keyframes glowButtons {
+ 0% {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+
+/* Default Normal State */
+
+.default .wcf-button,
+input[type='submit']:not([disabled]),
+input[type='button']:not([disabled]).default,
+button:not([disabled]).default {
+ 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 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #369;
+
+ -webkit-animation-name: glowButtons;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+
+ -moz-animation-name: glowButtons;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowButtons;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+ /* disabled to ease rendering work for Opera
+ -o-animation-name: glowButtons;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+ */
+ animation-name: glowButtons;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
+}
+
+/* Default Hover State Glow */
+
+@-webkit-keyframes glowButtonsHover {
+ 0% {
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+@-moz-keyframes glowButtonsHover {
+ 0% {
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+@-ms-keyframes glowButtonsHover {
+ 0% {
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowButtonsHover {
+ 0% {
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+*/
+@keyframes glowButtonsHover {
+ 0% {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+
+/* Default Hover State */
+
+.default .wcf-button:hover,
+input[type='submit']:not([disabled]):hover,
+input[type='button']:not([disabled]).default:hover,
+button:not([disabled]).default:hover {
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 10px #fa2;
+
+ -webkit-animation-name: glowButtonsHover;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+
+ -moz-animation-name: glowButtonsHover;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowButtonsHover;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+ /* disabled to ease rendering work for Opera
+ -o-animation-name: glowButtonsHover;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+ */
+ animation-name: glowButtonsHover;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
+}
+
+/* Default Active State Glow */
+
+@-webkit-keyframes glowDefaultButtonsActive {
+ 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 glowDefaultButtonsActive {
+ 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 glowDefaultButtonsActive {
+ 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);
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowDefaultButtonsActive {
+ 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 glowDefaultButtonsActive {
+ 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 */
+
+.default .wcf-button:focus,
+input[type='submit']:not([disabled]):focus,
+input[type='button']:not([disabled]).default:focus,
+button:not([disabled]).default:focus,
+
+.default .wcf-button:active,
+input[type='submit']:not([disabled]):active,
+input[type='button']:not([disabled]).default:active,
+button:not([disabled]).default: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: glowDefaultButtonsActive;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: ease-in-out;
+
+ -moz-animation-name: glowDefaultButtonsActive;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-direction: alternate;
+ -moz-animation-timing-function: ease-in-out;
+
+ -ms-animation-name: glowDefaultButtonsActive;
+ -ms-animation-duration: 1s;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-direction: alternate;
+ -ms-animation-timing-function: ease-in-out;
+ /* disabled to ease rendering work for Opera
+ -o-animation-name: glowDefaultButtonsActive;
+ -o-animation-duration: 1s;
+ -o-animation-iteration-count: infinite;
+ -o-animation-direction: alternate;
+ -o-animation-timing-function: ease-in-out;
+ */
+ animation-name: glowDefaultButtonsActive;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
+}
+
+
+
+/* -- -- -- Special Buttons -- -- -- */
+
+/* Disabled State */
+
+.disabled .wcf-button,
+input[disabled],
+input[type='button'][disabled],
+button[disabled] {
+ color: rgba(153, 153, 153, 1);
+ cursor: default;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc #bbb #aaa;
+ background-color: transparent;
+}
+
+
+
+/* ############## ACP Package List ############## */
+
+/* -- -- -- Application Package -- -- -- */
+
+/* Globals */
+
+.wcf-infoPackageApplication {
+ position: relative;
+}
+
+.wcf-infoPackageApplication .wcf-packageApplicationIcon {
+ position: absolute;
+ top: 30px;
+ left: 25px;
+ width: 96px;
+ height: 96px;
+}
+
+.wcf-infoPackageApplication div {
+ margin-bottom: -15px;
+ margin-left: 30px;
+}
+
+.wcf-infoPackageApplication footer {
+ position: relative;
+ right: -15px;
+ bottom: -15px;
+}
+
+.wcf-infoPackageApplication footer nav {
+ /* General toggle switch for package nav-bar orientation (options: left|center|right) */
+ text-align: right;
+}
+
+
+
+/* -- -- -- Package Plugin -- -- -- */
+
+/* Globals */
+
+.wcf-infoPackagePlugin {
+ text-align: center;
+ margin: 15px 10px 0 0;
+ display: inline-block;
+ position: relative;
+ width: 150px;
+ height: 150px;
+ overflow: hidden;
+
+ -webkit-transition: background, border, color .1s linear;
+ -moz-transition: background, border, color .1s linear;
+ -ms-transition: background, border, color .1s linear;
+ -o-transition: background, border, color .1s linear;
+ transition: background, border, color .1s linear;
+}
+
+.wcf-infoPackagePlugin a {
+ text-decoration: none;
+}
+
+.wcf-infoPackagePlugin > div > a {
+ color: rgba(153, 153, 153, 1);
+ background-size: 96px;
+ background-position: center 70%;
+ background-repeat: no-repeat;
+ margin: 1px;
+ display: block;
+ position: relative;
+ width: 148px;
+ height: 148px;
+}
+
+.wcf-infoPackagePlugin:hover > div > a {
+ color: rgba(102, 102, 102, 1);
+}
+
+.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
+ font-size: 100%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+ word-wrap: break-word;
+ margin: 0 -1px;
+ padding: 3px 1px;
+ display: block;
+ position: relative;
+ z-index: 100;
+}
+
+.wcf-infoPackagePlugin:hover > div > a > h1 {
+ border-bottom: 1px solid rgba(204, 204, 204, 1);
+
+ background-color: rgba(0, 0, 0, .015);
+ background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+ background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
+}
+
+.wcf-infoPackagePlugin footer {
+ margin-top: -22px;
+ width: 100%;
+}
+
+.wcf-infoPackagePlugin > div > a > small {
+ font-size: 85%;
+ font-weight: normal;
+ text-shadow: none;
+ border-radius: 7px;
+ padding: 40px 5px;
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 139px;
+ opacity: 0;
+
+ -webkit-transition: opacity .1s linear;
+ -moz-transition: opacity .1s linear;
+ -ms-transition: opacity .1s linear;
+ -o-transition: opacity .1s linear;
+ transition: opacity .1s linear;
+}
+
+.wcf-infoPackagePlugin:hover > div > a > small {
+ background-color: rgba(255, 255, 255, .9);
+ z-index: 10;
+ opacity: 1;
+}
+
+
+
+/* -- -- -- Package Footers -- -- -- */
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .wcf-infoPackageApplication footer nav,
+ .wcf-infoPackagePlugin footer nav {
+ opacity: 0;
+
+ -webkit-transition: opacity .1s linear;
+ -moz-transition: opacity .1s linear;
+ -ms-transition: opacity .1s linear;
+ -o-transition: opacity .1s linear;
+ transition: opacity .1s linear;
+ }
+
+ .wcf-infoPackageApplication:hover footer nav,
+ .wcf-infoPackagePlugin:hover footer nav {
+ opacity: 1;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .wcf-infoPackageApplication footer nav,
+ .wcf-infoPackagePlugin footer nav {
+ opacity: 1;
+ }
+
+}
+
+
+
+/* ############## TODO: Sortable lists ############## */
+
+/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
+ when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
+ behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
+
+/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
+.wcf-sortableListContainer .wcf-badgeYellow {
+ border-radius: 5px;
+ margin: 3px 0;
+ padding: 4px;
+}
+
+/* TODO: This was taken from badgeRed and is used to indicate a list which is not a valid drop target */
+.wcf-badgeYellow.wcf-sortableInvalidTarget {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+}
+
+/* Notice: min-height was safely removed */
+.wcf-sortableList {
+ list-style-position: outside;
+ list-style-type: decimal;
+ margin-left: 21px;
+}
+
+.wcf-sortableNode {
+ cursor: move;
+}
+
+.wcf-sortableNodeLabel {
+ border-bottom: 1px solid rgba(216, 231, 245, 1);
+ padding: 7px 7px 11px 0;
+ display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
+}
+
+
+
+
+
+
+/* ############## CSS Experiments (active) ############## */
+
+
+
+
+/* ############## ToDo: Action Proxy Loading ############## */
+
+/* Spinner */
+
+.wcf-spinner {
+ text-align: center;
+ text-shadow: 0 -1px 0 #000;
+ color: #fff;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgba(0, 0, 0, .3);
+ border-radius: 5px;
+
+ background-color: rgba(0, 0, 0, .5) !important;
+ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+ background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+ background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+ background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+ background-image: linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) !important;
+
+ padding: 7px 0;
+ position: fixed;
+ top: 200px;
+ left: 46%;
+ right: 46%;
+ width: 70px;
+ z-index: 1000;
+
+ -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);
+}
+
+.wcf-spinner img {
+ margin-bottom: 10px;
+ height: 48px;
+ width: 48px;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* DEBUG ONLY - DO NOT TOUCH! */
+
+.ajaxDebugMessage p {
+ border-bottom: 1px solid rgb(192, 192, 192);
+ margin: 0 3px;
+ padding: 7px 0 3px 0;
+}
+
+.ajaxDebugMessage p:first-child,
+.ajaxDebugMessage p:last-child {
+ border-bottom-width: 0;
+ margin: 0;
+ padding: 3px;
+}
+
+.ajaxDebugMessage p:last-child {
+ font-family: Monospace;
+ font-size: 110%;
+}
+
+
+
+
+
+/* Like colors */
+
+.wcf-liked {
+ color: #090;
+}
+
+.wcf-disliked {
+ color: #900;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* -- -- -- -- -- EOF -- -- -- -- -- */
projects / GitHub / WoltLab / WCF.git / commitdiff