{event name='javascriptInclude'}
<!-- Stylesheets -->
-<style type="text/css">
- @import url("{@$__wcf->getPath('wcf')}acp/style/wcf.css") screen;
+<link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}acp/style/wcf.less" />
+<script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
+<style type="text/css">
{*
+ @import url("{@$__wcf->getPath('wcf')}acp/style/wcf.css") screen;
@import url("{@$__wcf->getPath('wcf')}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
@import url("{@$__wcf->getPath('wcf')}acp/style/print.css") print;
+++ /dev/null
-/**
- * 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;
-}
-
-/* -- -- -- 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);
- margin-top: 15px;
- 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-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) ############## */
-
-/* what is that? */
-/* Once we're determing the dimensions of an element (by JS) we move it into body and wrap it with
- a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also
- embed it directly in JS (using style-attribute) but I thought it was better this way. - Alex */
-.wcfDimensions {
- display: inline-block;
-}
-
-
-
-
-
-/* ############## 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 -- -- -- -- -- */
--- /dev/null
+/**
+ * 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;
+}
+
+/* -- -- -- 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);
+ margin-top: 15px;
+ 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-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) ############## */
+
+/* what is that? */
+/* Once we're determing the dimensions of an element (by JS) we move it into body and wrap it with
+ a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also
+ embed it directly in JS (using style-attribute) but I thought it was better this way. - Alex */
+.wcfDimensions {
+ display: inline-block;
+}
+
+
+
+
+
+/* ############## 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 -- -- -- -- -- */
</script>
<!-- Stylesheets -->
+ <link rel="stylesheet/less" type="text/css" href="{@$__wcf->getPath()}acp/style/wcf.less" />
+ <script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/less.min.js"></script>
+
<style type="text/css">
- @import url("{@$__wcf->getPath()}acp/style/wcf.css") screen;
{*
+ @import url("{@$__wcf->getPath()}acp/style/wcf.css") screen;
@import url("{@$__wcf->getPath()}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
@import url("{@$__wcf->getPath()}acp/style/print.css") print;
--- /dev/null
+//
+// LESS - Leaner CSS v1.2.2
+// http://lesscss.org
+//
+// Copyright (c) 2009-2011, Alexis Sellier
+// Licensed under the Apache 2.0 License.
+//
+(function(a,b){function c(b){return a.less[b.split("/")[1]]}function m(){var a=document.getElementsByTagName("style");for(var b=0;b<a.length;b++)a[b].type.match(k)&&(new d.Parser).parse(a[b].innerHTML||"",function(c,d){var e=d.toCSS(),f=a[b];f.type="text/css",f.styleSheet?f.styleSheet.cssText=e:f.innerHTML=e})}function n(a,b){for(var c=0;c<d.sheets.length;c++)o(d.sheets[c],a,b,d.sheets.length-(c+1))}function o(b,c,e,f){var g=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=h&&h.getItem(i),k=h&&h.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=g.slice(0,g.lastIndexOf("/")+1)+i);var m=i.match(/([^\/]+)$/)[1];s(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())r(l.css,b),c(null,null,a,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type,filename:m})).parse(a,function(d,e){if(d)return w(d,i);try{c(d,e,a,b,{local:!1,lastModified:g,remaining:f}),u(document.getElementById("less-error-message:"+q(i)))}catch(d){w(d,i)}})}catch(h){w(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function q(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function r(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||q(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(g){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&h&&(v("saving "+e+" to cache."),h.setItem(e,a),h.setItem(e+":timestamp",c))}function s(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var f=t(),h=g?!1:d.async;typeof f.overrideMimeType=="function"&&f.overrideMimeType("text/css"),f.open("GET",a,h),f.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),f.send(null),g?f.status===0||f.status>=200&&f.status<300?c(f.responseText):e(f.status,a):h?f.onreadystatechange=function(){f.readyState==4&&i(f,c,e)}:i(f,c,e)}function t(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return v("browser doesn't support AJAX."),null}}function u(a){return a&&a.parentNode.removeChild(a)}function v(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function w(a,b){var c="less-error-message:"+q(b),e='<li><label>{line}</label><pre class="{class}">{content}</pre></li>',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="<h3>"+(a.message||"There is an error in your .less file")+"</h3>"+'<p>in <a href="'+j+'">'+j+"</a> ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="<br/>"+a.stack.split("\n").slice(1).join("<br/>"):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":</p>"+"<ul>"+i.join("")+"</ul>"),f.innerHTML=h,r([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d<c;d++)d in this&&a.call(b,this[d],d,this)}),Array.prototype.map||(Array.prototype.map=function(a){var b=this.length>>>0,c=new Array(b),d=arguments[1];for(var e=0;e<b;e++)e in this&&(c[e]=a.call(d,this[e],e,this));return c}),Array.prototype.filter||(Array.prototype.filter=function(a){var b=[],c=arguments[1];for(var d=0;d<this.length;d++)a.call(c,this[d])&&b.push(this[d]);return b}),Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=this.length>>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c<b;c++)c in this&&(d=a.call(null,d,this[c],c,this));return d}),Array.prototype.indexOf||(Array.prototype.indexOf=function(a){var b=this.length,c=arguments[1]||0;if(!b)return-1;if(c>=b)return-1;c<0&&(c+=b);for(;c<b;c++){if(!Object.prototype.hasOwnProperty.call(this,c))continue;if(a===this[c])return c}return-1}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)Object.prototype.hasOwnProperty.call(a,c)&&b.push(c);return b}),String.prototype.trim||(String.prototype.trim=function(){return String(this).replace(/^\s\s*/,"").replace(/\s\s*$/,"")});var d,f;typeof environment=="object"&&{}.toString.call(environment)==="[object Environment]"?(typeof a=="undefined"?d={}:d=a.less={},f=d.tree={},d.mode="rhino"):typeof a=="undefined"?(d=exports,f=c("./tree"),d.mode="node"):(typeof a.less=="undefined"&&(a.less={}),d=a.less,f=a.less.tree={},d.mode="browser"),d.Parser=function(b){function t(){j=m[i],k=h,n=h}function u(){m[i]=j,h=k,n=h}function v(){h>n&&(m[i]=m[i].slice(h-n),n=h)}function w(a){var b,c,d,e,f,j,k,l;if(a instanceof Function)return a.call(o.parsers);if(typeof a=="string")b=g.charAt(h)===a?a:null,d=1,v();else{v();if(!(b=a.exec(m[i])))return null;d=b[0].length}if(b){l=h+=d,j=h+m[i].length-d;while(h<j){e=g.charCodeAt(h);if(e!==32&&e!==10&&e!==9)break;h++}return m[i]=m[i].slice(d+(h-l)),n=h,m[i].length===0&&i<m.length-1&&i++,typeof b=="string"?b:b.length===1?b[0]:b}}function x(a,b){var c=w(a);if(!!c)return c;y(b||(typeof a=="string"?"expected '"+a+"' got '"+g.charAt(h)+"'":"unexpected token"))}function y(a,b){throw{index:h,type:b||"Syntax",message:a}}function z(a){return typeof a=="string"?g.charAt(h)===a:a.test(m[i])?!0:!1}function A(a){return d.mode==="node"?c("path").basename(a):a.match(/[^\/]+$/)[0]}function B(a,b){return a.filename&&b.filename&&a.filename!==b.filename?o.imports.contents[A(a.filename)]:g}function C(a,b){for(var c=a,d=-1;c>=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function D(a,b){var c=B(a,b),d=C(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&C(a.call,c)+1,this.callExtract=g[C(a.call,c)],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var g,h,i,j,k,l,m,n,o,q=this,r=function(){},s=this.imports={paths:b&&b.paths||[],queue:[],files:{},contents:{},mime:b&&b.mime,error:null,push:function(a,c){var e=this;this.queue.push(a),d.Parser.importer(a,this.paths,function(b,d,f){e.queue.splice(e.queue.indexOf(a),1),e.files[a]=d,e.contents[a]=f,b&&!e.error&&(e.error=b),c(b,d),e.queue.length===0&&r()},b)}};return this.env=b=b||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,o={imports:s,parse:function(a,e){var j,k,p,q,s,t,u=[],v,x=null;h=i=n=l=0,g=a.replace(/\r\n/g,"\n"),m=function(a){var c=0,d=/[^"'`\{\}\/\(\)\\]+/g,e=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,f=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=a[0],k;for(var l=0,m,n;l<g.length;l++){d.lastIndex=l,(i=d.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0])),m=g.charAt(l),e.lastIndex=f.lastIndex=l,(i=f.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)),!k&&m==="/"&&(n=g.charAt(l+1),(n==="/"||n==="*")&&(i=e.exec(g))&&i.index===l&&(l+=i[0].length,j.push(i[0]),m=g.charAt(l)));switch(m){case"{":if(!k){h++,j.push(m);break};case"}":if(!k){h--,j.push(m),a[++c]=j=[];break};case"(":if(!k){k=!0,j.push(m);break};case")":if(k){k=!1,j.push(m);break};default:j.push(m)}}return h>0&&(x=new D({index:l,type:"Parse",message:"missing closing `}`",filename:b.filename},b)),a.map(function(a){return a.join("")})}([[]]);if(x)return e(x);try{j=new f.Ruleset([],w(this.parsers.primary)),j.root=!0}catch(y){return e(new D(y,b))}j.toCSS=function(a){var e,g,h;return function(e,g){var h=[],i;e=e||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof f.Value||(b instanceof f.Expression||(b=new f.Expression([b])),b=new f.Value([b])),new f.Rule("@"+a,b,!1,0)}),h=[new f.Ruleset(null,g)]);try{var j=a.call(this,{frames:h}).toCSS([],{compress:e.compress||!1})}catch(k){throw new D(k,b)}if(i=o.imports.error)throw i instanceof D?i:new D(i,b);return e.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):e.compress?j.replace(/(\s)+/g,"$1"):j}}(j.eval);if(h<g.length-1){h=l,t=g.split("\n"),s=(g.slice(0,h).match(/\n/g)||"").length+1;for(var z=h,A=-1;z>=0&&g.charAt(z)!=="\n";z--)A++;x={type:"Parse",message:"Syntax Error on line "+s,index:h,filename:b.filename,line:s,column:A,extract:[t[s-2],t[s-1],t[s]]}}this.imports.queue.length>0?r=function(){e(x,j)}:e(x,j)},parsers:{primary:function(){var a,b=[];while((a=w(this.mixin.definition)||w(this.rule)||w(this.ruleset)||w(this.mixin.call)||w(this.comment)||w(this.directive))||w(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(g.charAt(h)!=="/")return;if(g.charAt(h+1)==="/")return new f.Comment(w(/^\/\/.*/),!0);if(a=w(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new f.Comment(a)},entities:{quoted:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=='"'&&g.charAt(b)!=="'")return;c&&w("~");if(a=w(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new f.Quoted(a[0],a[1]||a[2],c)},keyword:function(){var a;if(a=w(/^[_A-Za-z-][_A-Za-z0-9-]*/))return f.colors.hasOwnProperty(a)?new f.Color(f.colors[a].slice(1)):new f.Keyword(a)},call:function(){var a,c,d=h;if(!(a=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(m[i])))return;a=a[1].toLowerCase();if(a==="url")return null;h+=a.length;if(a==="alpha")return w(this.alpha);w("("),c=w(this.entities.arguments);if(!w(")"))return;if(a)return new f.Call(a,c,d,b.filename)},arguments:function(){var a=[],b;while(b=w(this.entities.assignment)||w(this.expression)){a.push(b);if(!w(","))break}return a},literal:function(){return w(this.entities.dimension)||w(this.entities.color)||w(this.entities.quoted)},assignment:function(){var a,b;if((a=w(/^\w+(?=\s?=)/i))&&w("=")&&(b=w(this.entity)))return new f.Assignment(a,b)},url:function(){var a;if(g.charAt(h)!=="u"||!w(/^url\(/))return;return a=w(this.entities.quoted)||w(this.entities.variable)||w(this.entities.dataURI)||w(/^[-\w%@$\/.&=:;#+?~]+/)||"",x(")"),new f.URL(a.value||a.data||a instanceof f.Variable?a:new f.Anonymous(a),s.paths)},dataURI:function(){var a;if(w(/^data:/)){a={},a.mime=w(/^[^\/]+\/[^,;)]+/)||"",a.charset=w(/^;\s*charset=[^,;)]+/)||"",a.base64=w(/^;\s*base64/)||"",a.data=w(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,c=h;if(g.charAt(h)==="@"&&(a=w(/^@@?[\w-]+/)))return new f.Variable(a,c,b.filename)},color:function(){var a;if(g.charAt(h)==="#"&&(a=w(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new f.Color(a[1])},dimension:function(){var a,b=g.charCodeAt(h);if(b>57||b<45||b===47)return;if(a=w(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new f.Dimension(a[1],a[2])},javascript:function(){var a,b=h,c;g.charAt(b)==="~"&&(b++,c=!0);if(g.charAt(b)!=="`")return;c&&w("~");if(a=w(/^`([^`]*)`/))return new f.JavaScript(a[1],h,c)}},variable:function(){var a;if(g.charAt(h)==="@"&&(a=w(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!z(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=w(this.entity))&&w("/")&&(b=w(this.entity)))return new f.Shorthand(a,b)},mixin:{call:function(){var a=[],c,d,e,i=h,j=g.charAt(h),k=!1;if(j!=="."&&j!=="#")return;while(c=w(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new f.Element(d,c,h)),d=w(">");w("(")&&(e=w(this.entities.arguments))&&w(")"),w(this.important)&&(k=!0);if(a.length>0&&(w(";")||z("}")))return new f.mixin.Call(a,e,i,b.filename,k)},definition:function(){var a,b=[],c,d,e,i,j;if(g.charAt(h)!=="."&&g.charAt(h)!=="#"||z(/^[^{]*(;|})/))return;t();if(c=w(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=c[1];while(e=w(this.entities.variable)||w(this.entities.literal)||w(this.entities.keyword)){e instanceof f.Variable?w(":")?(i=x(this.expression,"expected expression"),b.push({name:e.name,value:i})):b.push({name:e.name}):b.push({value:e});if(!w(","))break}x(")"),w(/^when/)&&(j=x(this.conditions,"expected condition")),d=w(this.block);if(d)return new f.mixin.Definition(a,b,d,j);u()}}},entity:function(){return w(this.entities.literal)||w(this.entities.variable)||w(this.entities.url)||w(this.entities.call)||w(this.entities.keyword)||w(this.entities.javascript)||w(this.comment)},end:function(){return w(";")||z("}")},alpha:function(){var a;if(!w(/^\(opacity=/i))return;if(a=w(/^\d+/)||w(this.entities.variable))return x(")"),new f.Alpha(a)},element:function(){var a,b,c,d;c=w(this.combinator),a=w(/^(?:\d+\.\d+|\d+)%/)||w(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||w("*")||w(this.attribute)||w(/^\([^)@]+\)/),a||w("(")&&(d=w(this.entities.variable))&&w(")")&&(a=new f.Paren(d));if(a)return new f.Element(c,a,h);if(c.value&&c.value.charAt(0)==="&")return new f.Element(c,null,h)},combinator:function(){var a,b=g.charAt(h);if(b===">"||b==="+"||b==="~"){h++;while(g.charAt(h)===" ")h++;return new f.Combinator(b)}if(b==="&"){a="&",h++,g.charAt(h)===" "&&(a="& ");while(g.charAt(h)===" ")h++;return new f.Combinator(a)}if(b===":"&&g.charAt(h+1)===":"){h+=2;while(g.charAt(h)===" ")h++;return new f.Combinator("::")}return g.charAt(h-1)===" "?new f.Combinator(" "):new f.Combinator(null)},selector:function(){var a,b,c=[],d,e;while(b=w(this.element)){d=g.charAt(h),c.push(b);if(d==="{"||d==="}"||d===";"||d===",")break}if(c.length>0)return new f.Selector(c)},tag:function(){return w(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||w("*")},attribute:function(){var a="",b,c,d;if(!w("["))return;if(b=w(/^[a-zA-Z-]+/)||w(this.entities.quoted))(d=w(/^[|~*$^]?=/))&&(c=w(this.entities.quoted)||w(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!w("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(w("{")&&(a=w(this.primary))&&w("}"))return a},ruleset:function(){var a=[],b,c,d;t();while(b=w(this.selector)){a.push(b),w(this.comment);if(!w(","))break;w(this.comment)}if(a.length>0&&(c=w(this.block)))return new f.Ruleset(a,c);l=h,u()},rule:function(){var a,b,c=g.charAt(h),d,e;t();if(c==="."||c==="#"||c==="&")return;if(a=w(this.variable)||w(this.property)){a.charAt(0)!="@"&&(e=/^([^@+\/'"*`(;{}-]*);/.exec(m[i]))?(h+=e[0].length-1,b=new f.Anonymous(e[1])):a==="font"?b=w(this.font):b=w(this.value),d=w(this.important);if(b&&w(this.end))return new f.Rule(a,b,d,k);l=h,u()}},"import":function(){var a,b,c=h;if(w(/^@import\s+/)&&(a=w(this.entities.quoted)||w(this.entities.url))){b=w(this.mediaFeatures);if(w(";"))return new f.Import(a,s,b,c)}},mediaFeature:function(){var a=[];do if(e=w(this.entities.keyword))a.push(e);else if(w("(")){p=w(this.property),e=w(this.entity);if(!w(")"))return null;if(p&&e)a.push(new f.Paren(new f.Rule(p,e,null,h,!0)));else{if(!e)return null;a.push(new f.Paren(e))}}while(e);if(a.length>0)return new f.Expression(a)},mediaFeatures:function(){var a,b=[];while(a=w(this.mediaFeature)){b.push(a);if(!w(","))break}return b.length>0?b:null},media:function(){var a;if(w(/^@media/)){a=w(this.mediaFeatures);if(rules=w(this.block))return new f.Directive("@media",rules,a)}},directive:function(){var a,b,c,d,e,i;if(g.charAt(h)!=="@")return;if(b=w(this["import"])||w(this.media))return b;if(a=w(/^@page|@keyframes/)||w(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){d=(w(/^[^{]+/)||"").trim();if(c=w(this.block))return new f.Directive(a+" "+d,c)}else if(a=w(/^@[-a-z]+/))if(a==="@font-face"){if(c=w(this.block))return new f.Directive(a,c)}else if((b=w(this.entity))&&w(";"))return new f.Directive(a,b)},font:function(){var a=[],b=[],c,d,e,g;while(g=w(this.shorthand)||w(this.entity))b.push(g);a.push(new f.Expression(b));if(w(","))while(g=w(this.expression)){a.push(g);if(!w(","))break}return new f.Value(a)},value:function(){var a,b=[],c;while(a=w(this.expression)){b.push(a);if(!w(","))break}if(b.length>0)return new f.Value(b)},important:function(){if(g.charAt(h)==="!")return w(/^! *important/)},sub:function(){var a;if(w("(")&&(a=w(this.expression))&&w(")"))return a},multiplication:function(){var a,b,c,d;if(a=w(this.operand)){while(!z(/^\/\*/)&&(c=w("/")||w("*"))&&(b=w(this.operand)))d=new f.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,b,c,d;if(a=w(this.multiplication)){while((c=w(/^[-+]\s+/)||g.charAt(h-1)!=" "&&(w("+")||w("-")))&&(b=w(this.multiplication)))d=new f.Operation(c,[d||a,b]);return d||a}},conditions:function(){var a,b,c=h,d;if(a=w(this.condition)){while(w(",")&&(b=w(this.condition)))d=new f.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,e=h,g=!1;w(/^not/)&&(g=!0),x("(");if(a=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))return(d=w(/^(?:>=|=<|[<=>])/))?(b=w(this.addition)||w(this.entities.keyword)||w(this.entities.quoted))?c=new f.Condition(d,a,b,e,g):y("expected expression"):c=new f.Condition("=",a,new f.Keyword("true"),e,g),x(")"),w(/^and/)?new f.Condition("and",c,w(this.condition)):c},operand:function(){var a,b=g.charAt(h+1);g.charAt(h)==="-"&&(b==="@"||b==="(")&&(a=w("-"));var c=w(this.sub)||w(this.entities.dimension)||w(this.entities.color)||w(this.entities.variable)||w(this.entities.call);return a?new f.Operation("*",[new f.Dimension(-1),c]):c},expression:function(){var a,b,c=[],d;while(a=w(this.addition)||w(this.entity))c.push(a);if(c.length>0)return new f.Expression(c)},property:function(){var a;if(a=w(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),o({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e<c.length;e++)d=d.replace(/%[sda]/i,function(a){var b=a.match(/s/i)?c[e].value:c[e].toCSS();return a.match(/[A-Z]$/)?encodeURIComponent(b):b});return d=d.replace(/%%/g,"%"),new a.Quoted('"'+d+'"',d)},round:function(a){return this._math("round",a)},ceil:function(a){return this._math("ceil",a)},floor:function(a){return this._math("floor",a)},_math:function(b,d){if(d instanceof a.Dimension)return new a.Dimension(Math[b](c(d)),d.unit);if(typeof d=="number")return Math[b](d);throw{type:"Argument",message:"argument must be a number"}},argb:function(b){return new a.Anonymous(b.toARGB())},percentage:function(b){return new a.Dimension(b.value*100,"%")},color:function(b){if(b instanceof a.Quoted)return new a.Color(b.value.slice(1));throw{type:"Argument",message:"argument must be a string"}},iscolor:function(b){return this._isa(b,a.Color)},isnumber:function(b){return this._isa(b,a.Dimension)},isstring:function(b){return this._isa(b,a.Quoted)},iskeyword:function(b){return this._isa(b,a.Keyword)},isurl:function(b){return this._isa(b,a.URL)},ispixel:function(b){return b instanceof a.Dimension&&b.unit==="px"?a.True:a.False},ispercentage:function(b){return b instanceof a.Dimension&&b.unit==="%"?a.True:a.False},isem:function(b){return b instanceof a.Dimension&&b.unit==="em"?a.True:a.False},_isa:function(b,c){return b instanceof c?a.True:a.False}}})(c("./tree")),function(a){a.colors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgrey:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",grey:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}(c("./tree")),function(a){a.Alpha=function(a){this.value=a},a.Alpha.prototype={toCSS:function(){return"alpha(opacity="+(this.value.toCSS?this.value.toCSS():this.value)+")"},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Anonymous=function(a){this.value=a.value||a},a.Anonymous.prototype={toCSS:function(){return this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Assignment=function(a,b){this.key=a,this.value=b},a.Assignment.prototype={toCSS:function(){return this.key+"="+(this.value.toCSS?this.value.toCSS():this.value)},eval:function(a){return this.value.eval&&(this.value=this.value.eval(a)),this}}}(c("../tree")),function(a){a.Call=function(a,b,c,d){this.name=a,this.args=b,this.index=c,this.filename=d},a.Call.prototype={eval:function(b){var c=this.args.map(function(a){return a.eval(b)});if(!(this.name in a.functions))return new a.Anonymous(this.name+"("+c.map(function(a){return a.toCSS()}).join(", ")+")");try{return a.functions[this.name].apply(a.functions,c)}catch(d){throw{type:d.type||"Runtime",message:"error evaluating function `"+this.name+"`"+(d.message?": "+d.message:""),index:this.index,filename:this.filename}}},toCSS:function(a){return this.eval(a).toCSS()}}}(c("../tree")),function(a){a.Color=function(a,b){Array.isArray(a)?this.rgb=a:a.length==6?this.rgb=a.match(/.{2}/g).map(function(a){return parseInt(a,16)}):this.rgb=a.split("").map(function(a){return parseInt(a+a,16)}),this.alpha=typeof b=="number"?b:1},a.Color.prototype={eval:function(){return this},toCSS:function(){return this.alpha<1?"rgba("+this.rgb.map(function(a){return Math.round(a)}).concat(this.alpha).join(", ")+")":"#"+this.rgb.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b<c?6:0);break;case b:g=(c-a)/j+2;break;case c:g=(a-b)/j+4}g/=6}return{h:g*360,s:h,l:i,a:d}},toARGB:function(){var a=[Math.round(this.alpha*255)].concat(this.rgb);return"#"+a.map(function(a){return a=Math.round(a),a=(a>255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else{if(!c.compare)throw{type:"Type",message:"Unable to perform comparison",index:d};e=c.compare(b)}switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value<this.value?1:0:-1}}}(c("../tree")),function(a){a.Directive=function(b,c,d){this.name=b,this.features=d&&new a.Value(d),Array.isArray(c)?(this.ruleset=new a.Ruleset([],c),this.ruleset.allowImports=!0):this.value=c},a.Directive.prototype={toCSS:function(a,b){var c=this.features?" "+this.features.toCSS(b):"";return this.ruleset?(this.ruleset.root=!0,this.name+c+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return this.features=this.features&&this.features.eval(a),a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),typeof c=="string"?this.value=c.trim():c?this.value=c:this.value="",this.index=d},a.Element.prototype.eval=function(b){return new a.Element(this.combinator,this.value.eval?this.value.eval(b):this.value,this.index)},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+(this.value.toCSS?this.value.toCSS(a):this.value)},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e<c.rules.length;e++)c.rules[e]instanceof a.Import&&Array.prototype.splice.apply(c.rules,[e,1].concat(c.rules[e].eval(b)));return this.features?new
+a.Directive("@media",c.rules,this.features.value):c.rules}}}(c("../tree")),function(a){a.JavaScript=function(a,b,c){this.escaped=c,this.expression=a,this.index=b},a.JavaScript.prototype={eval:function(b){var c,d=this,e={},f=this.expression.replace(/@\{([\w-]+)\}/g,function(c,e){return a.jsify((new a.Variable("@"+e,d.index)).eval(b))});try{f=new Function("return ("+f+")")}catch(g){throw{message:"JavaScript evaluation error: `"+f+"`",index:this.index}}for(var h in b.frames[0].variables())e[h.slice(1)]={value:b.frames[0].variables()[h].value,toJS:function(){return this.value.eval(b).toCSS()}};try{c=f.call(e)}catch(g){throw{message:"JavaScript evaluation error: '"+g.name+": "+g.message+"'",index:this.index}}return typeof c=="string"?new a.Quoted('"'+c+'"',c,this.escaped,this.index):Array.isArray(c)?new a.Anonymous(c.join(", ")):new a.Anonymous(c)}}}(c("../tree")),function(a){a.Keyword=function(a){this.value=a},a.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(b){return b instanceof a.Keyword?b.value===this.value?0:1:-1}},a.True=new a.Keyword("true"),a.False=new a.Keyword("false")}(c("../tree")),function(a){a.mixin={},a.mixin.Call=function(b,c,d,e,f){this.selector=new a.Selector(b),this.arguments=c,this.index=d,this.filename=e,this.important=f},a.mixin.Call.prototype={eval:function(a){var b,c,d=[],e=!1;for(var f=0;f<a.frames.length;f++)if((b=a.frames[f].find(this.selector)).length>0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g<b.length;g++)if(b[g].match(c,a))try{Array.prototype.push.apply(d,b[g].eval(a,this.arguments,this.important).rules),e=!0}catch(h){throw{message:h.message,index:h.index,filename:this.filename,stack:h.stack,call:this.index}}if(e)return d;throw{type:"Runtime",message:"No matching definition was found for `"+this.selector.toCSS().trim()+"("+this.arguments.map(function(a){return a.toCSS()}).join(", ")+")`",index:this.index,filename:this.filename}}throw{type:"Name",message:this.selector.toCSS().trim()+" is undefined",index:this.index,filename:this.filename}}},a.mixin.Definition=function(b,c,d,e){this.name=b,this.selectors=[new a.Selector([new a.Element(null,b)])],this.params=c,this.condition=e,this.arity=c.length,this.rules=d,this._lookups={},this.required=c.reduce(function(a,b){return!b.name||b.name&&!b.value?a+1:a},0),this.parent=a.Ruleset.prototype,this.frames=[]},a.mixin.Definition.prototype={toCSS:function(){return""},variable:function(a){return this.parent.variable.call(this,a)},variables:function(){return this.parent.variables.call(this)},find:function(){return this.parent.find.apply(this,arguments)},rulesets:function(){return this.parent.rulesets.apply(this)},evalParams:function(b,c){var d=new a.Ruleset(null,[]);for(var e=0,f;e<this.params.length;e++)if(this.params[e].name){if(!(f=c&&c[e]||this.params[e].value))throw{type:"Runtime",message:"wrong number of arguments for "+this.name+" ("+c.length+" for "+this.arity+")"};d.rules.unshift(new a.Rule(this.params[e].name,f.eval(b)))}return d},eval:function(b,c,d){var e=this.evalParams(b,c),f,g=[],h;for(var i=0;i<Math.max(this.params.length,c&&c.length);i++)g.push(c[i]||this.params[i].value);return e.rules.unshift(new a.Rule("@arguments",(new a.Expression(g)).eval(b))),h=d?this.rules.map(function(b){return new a.Rule(b.name,b.value,"!important",b.index)}):this.rules.slice(0),(new a.Ruleset(null,h)).eval({frames:[this,e].concat(this.frames,b.frames)})},match:function(a,b){var c=a&&a.length||0,d,e;if(c<this.required)return!1;if(this.required>0&&c>this.params.length)return!1;if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;f<d;f++)if(!this.params[f].name&&a[f].eval(b).toCSS()!=this.params[f].value.eval(b).toCSS())return!1;return!0}}}(c("../tree")),function(a){a.Operation=function(a,b){this.op=a.trim(),this.operands=b},a.Operation.prototype.eval=function(b){var c=this.operands[0].eval(b),d=this.operands[1].eval(b),e;if(c instanceof a.Dimension&&d instanceof a.Color){if(this.op!=="*"&&this.op!=="+")throw{name:"OperationError",message:"Can't substract or divide a color from a number"};e=d,d=c,c=e}return c.operate(this.op,d)},a.operate=function(a,b,c){switch(a){case"+":return b+c;case"-":return b-c;case"*":return b*c;case"/":return b/c}}}(c("../tree")),function(a){a.Paren=function(a){this.value=a},a.Paren.prototype={toCSS:function(a){return"("+this.value.toCSS(a)+")"},eval:function(b){return new a.Paren(this.value.eval(b))}}}(c("../tree")),function(a){a.Quoted=function(a,b,c,d){this.escaped=c,this.value=b||"",this.quote=a.charAt(0),this.index=d},a.Quoted.prototype={toCSS:function(){return this.escaped?this.value:this.quote+this.value+this.quote},eval:function(b){var c=this,d=this.value.replace(/`([^`]+)`/g,function(d,e){return(new a.JavaScript(e,c.index,!0)).eval(b).value}).replace(/@\{([\w-]+)\}/g,function(d,e){var f=(new a.Variable("@"+e,c.index)).eval(b);return"value"in f?f.value:f.toCSS()});return new a.Quoted(this.quote+d+this.quote,d,this.escaped,this.index)}}}(c("../tree")),function(a){a.Rule=function(b,c,d,e,f){this.name=b,this.value=c instanceof a.Value?c:new a.Value([c]),this.important=d?" "+d.trim():"",this.index=e,this.inline=f||!1,b.charAt(0)==="@"?this.variable=!0:this.variable=!1},a.Rule.prototype.toCSS=function(a){return this.variable?"":this.name+(a.compress?":":": ")+this.value.toCSS(a)+this.important+(this.inline?"":";")},a.Rule.prototype.eval=function(b){return new a.Rule(this.name,this.value.eval(b),this.important,this.index,this.inline)},a.Shorthand=function(a,b){this.a=a,this.b=b},a.Shorthand.prototype={toCSS:function(a){return this.a.toCSS(a)+"/"+this.b.toCSS(a)},eval:function(){return this}}}(c("../tree")),function(a){a.Ruleset=function(a,b){this.selectors=a,this.rules=b,this._lookups={}},a.Ruleset.prototype={eval:function(b){var c=this.selectors&&this.selectors.map(function(a){return a.eval(b)}),d=new a.Ruleset(c,this.rules.slice(0));d.root=this.root,d.allowImports=this.allowImports,b.frames.unshift(d);if(d.root||d.allowImports)for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.Import&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Definition&&(d.rules[e].frames=b.frames.slice(0));for(var e=0;e<d.rules.length;e++)d.rules[e]instanceof a.mixin.Call&&Array.prototype.splice.apply(d.rules,[e,1].concat(d.rules[e].eval(b)));for(var e=0,f;e<d.rules.length;e++)f=d.rules[e],f instanceof a.mixin.Definition||(d.rules[e]=f.eval?f.eval(b):f);return b.frames.shift(),d},match:function(a){return!a||a.length===0},variables:function(){return this._variables?this._variables:this._variables=this.rules.reduce(function(b,c){return c instanceof a.Rule&&c.variable===!0&&(b[c.name]=c),b},{})},variable:function(a){return this.variables()[a]},rulesets:function(){return this._rulesets?this._rulesets:this._rulesets=this.rules.filter(function(b){return b instanceof a.Ruleset||b instanceof a.mixin.Definition})},find:function(b,c){c=c||this;var d=[],e,f,g=b.toCSS();return g in this._lookups?this._lookups[g]:(this.rulesets().forEach(function(e){if(e!==c)for(var g=0;g<e.selectors.length;g++)if(f=b.match(e.selectors[g])){b.elements.length>e.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j<this.rules.length;j++)i=this.rules[j],i.rules||i instanceof a.Directive?f.push(i.toCSS(g,c)):i instanceof a.Comment?i.silent||(this.root?f.push(i.toCSS(c)):e.push(i.toCSS(c))):i.toCSS&&!i.variable?e.push(i.toCSS(c)):i.value&&!i.variable&&e.push(i.value.toString());return f=f.join(""),this.root?d.push(e.join(c.compress?"":"\n")):e.length>0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d<c.length;d++)this.joinSelector(a,b,c[d])},joinSelector:function(b,c,d){var e=[],f=[],g=[],h=[],i=!1,j;for(var k=0;k<d.elements.length;k++)j=d.elements[k],j.combinator.value.charAt(0)==="&"&&(i=!0),i?h.push(j):g.push(j);i||(h=g,g=[]),g.length>0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l<c.length;l++)b.push(e.concat(c[l]).concat(f))}}}(c("../tree")),function(a){a.Selector=function(a){this.elements=a,this.elements[0].combinator.value===""&&(this.elements[0].combinator.value=" ")},a.Selector.prototype.match=function(a){var b=this.elements.length,c=a.elements.length,d=Math.min(b,c);if(b<c)return!1;for(var e=0;e<d;e++)if(this.elements[e].value!==a.elements[e].value)return!1;return!0},a.Selector.prototype.eval=function(b){return new a.Selector(this.elements.map(function(a){return a.eval(b)}))},a.Selector.prototype.toCSS=function(a){return this._css?this._css:this._css=this.elements.map(function(b){return typeof b=="string"?" "+b.trim():b.toCSS(a)}).join("")}}(c("../tree")),function(b){b.URL=function(b,c){b.data?this.attrs=b:(typeof a!="undefined"&&!/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(b.value)&&c.length>0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c<a.length;c++)if(d=b.call(a,a[c]))return d;return null},a.jsify=function(a){return Array.isArray(a.value)&&a.value.length>1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var g=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||g?"development":"production"),d.async=!1,d.poll=d.poll||(g?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&n(function(a,b,c,d,e){b&&r(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var h;try{h=typeof a.localStorage=="undefined"?null:a.localStorage}catch(i){h=null}var j=document.getElementsByTagName("link"),k=/^text\/(x-)?less$/;d.sheets=[];for(var l=0;l<j.length;l++)(j[l].rel==="stylesheet/less"||j[l].rel.match(/stylesheet/)&&j[l].type.match(k))&&d.sheets.push(j[l]);d.refresh=function(a){var b,c;b=c=new Date,n(function(a,d,e,f,g){g.local?v("loading "+f.href+" from cache."):(v("parsed "+f.href+" successfully."),r(d.toCSS(),f,g.lastModified)),v("css for "+f.href+" generated in "+(new Date-c)+"ms"),g.remaining===0&&v("css generated in "+(new Date-b)+"ms"),c=new Date},a),m()},d.refreshStyles=m,d.refresh(d.env==="development")})(window);
\ No newline at end of file
<title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.pageTitle{/lang}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet" type="text/css" href="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/style/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&showCSS={/if}wcf.css" />
+ <link rel="stylesheet" type="text/css" href="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/style/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&showCSS={/if}wcf.less" />
{if !$lastStep|isset}
<style type="text/css">
projects / GitHub / WoltLab / WCF.git / commitdiff