<!-- Stylesheets -->
<style type="text/css">
- @import url("{@RELATIVE_WCF_DIR}acp/style/style.css") screen;
+ @import url("{@RELATIVE_WCF_DIR}acp/style/wcf.css") screen;
{*
@import url("{@RELATIVE_WCF_DIR}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
new WCF.Date.Time();
new WCF.Effect.SmoothScroll();
new WCF.Effect.BalloonTooltip();
- $('<span class="arrowOuter"><span class="arrowInner"></span></span>').appendTo('.innerError');
+ $('<span class="pointer"><span></span></span>').appendTo('.innerError');
{event name='javascriptInit'}
});
+++ /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;
-}
-
-a.externalURL {
- background-image: url('../../icon/externalURL1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 17px;
-}
-
-hr {
- display: none;
-}
-
-.invisible {
- position: absolute;
- left: -9000px;
- top: -9000px;
-}
-
-.separated {
- margin-top: 13px;
-}
-
-::selection {
- text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
- color: #300;
- background-color: rgba(255, 170, 34, .7);
-}
-
-.hot {
- color: #b00;
-}
-
-
-/* ############## Body ############## */
-
-/* Globals */
-
-body {
- font-family: 'Trebuchet MS', Arial, sans-serif;
- font-size: 80%;
- color: #666;
- line-height: 1;
- background-color: #29374a;
-}
-
-/* Special */
-
-body#tplWCFInstaller {background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
- background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
- background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
- background-image: linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
-
- -webkit-background-size: 50px 50px;
- -moz-background-size: 50px 50px;
- -ms-background-size: 50px 50px;
- -o-background-size: 50px 50px;
- background-size: 50px 50px;
-
- background-position: left top;
- background-repeat: repeat;
-}
-
-
-
-/* ############## Page Header ############## */
-
-/* Globals */
-
-header.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%;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
- header.pageHeader {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
- header.pageHeader {
- min-width: auto;
- }
-}
-
-
-
-/* -- -- -- Top Menu -- -- -- */
-
-/* Globals */
-
-header.pageHeader nav.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: 500;
-
- -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: 0px;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-@-moz-keyframes glowButtons {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0px;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-@-ms-keyframes glowButtons {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0px;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtons {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0px;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-*/
-@keyframes glowButtons {
- 0% {
- opacity: 0;
- top: -50px;
- }
- 60% {
- top: 0px;
- }
- 80% {
- top: -15px;
- }
- 100% {
- opacity: 1;
- top: auto;
- }
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- header.pageHeader nav.topMenu {
- min-width: 800px;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- header.pageHeader nav.topMenu {
- min-width: auto;
- }
-}
-
-header.pageHeader nav.topMenu:hover {
- background-color: rgba(0, 0, 0, .5);
-}
-
-header.pageHeader nav.topMenu > div {
- padding: 0 23px 0;
-}
-
-header.pageHeader nav.topMenu > div > ul {
- /* none */
-}
-
-header.pageHeader nav.topMenu > div > ul > li {
- cursor: pointer;
- float: left;
- position: relative;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Caption */
-
-nav.topMenu > div > ul > li {
- border-width: 0 1px;
- border-style: solid;
- border-color: transparent;
-}
-
-nav.topMenu > div > ul > li,
-nav.topMenu > div > ul > li a {
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: #69c;
-}
-
-nav.topMenu > div > ul > li:hover,
-nav.topMenu > div > ul > li:hover a {
- border-color: rgba(255, 255, 255, .5);
-}
-
-nav.topMenu > div > ul > li .dropdownCaption,
-nav.topMenu > div > ul > li .dropdownCaption a {
- padding-right: 5px;
-}
-
-nav.topMenu > div > ul > li:hover .dropdownCaption,
-nav.topMenu > div > ul > li:hover .dropdownCaption a {
- text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
- color: #fff;
- background-color: rgba(0, 0, 0, .7);
-}
-
-nav.topMenu > div > ul > li > .dropdownCaption > .badge,
-nav.topMenu > div > ul > li:hover > .dropdownCaption > .badge {
- font-size: 75%;
- color: #369 !important;
- margin: -3px 3px;
- padding: 1px 3px;
-}
-
-nav.topMenu > div > ul > li > .dropdownCaption > img {
- margin: -7px 0 -5px 0;
-}
-
-nav.topMenu > div > ul > li > span:not(.badge) {
- padding: 6px;
-}
-
-nav.topMenu ul li .dropdownCaption {
- cursor: pointer;
- background-image: url('../../icon/dropdown2.svg');
- background-position: 97% center;
- background-repeat: no-repeat;
- padding-right: 15px !important;
- display: inline-block;
-}
-
-
-
-/* ToDo: Top-Menu Dropdown Tweaks */
-
-/* Auto-Opening Dropdowns */
-nav.topMenu ul li:hover .dropdownCaption ~ .dropdown {
- border-color: rgba(255, 255, 255, .5);
- background-color: rgba(0, 0, 0, .7);
- height: auto !important;
- left: -1px;
-}
-
-nav.topMenu ul li {
- white-space: nowrap;
-}
-
-nav.topMenu ul li .dropdown {
- border-width: 0 1px 1px 1px;
- border-radius: 0 0 5px 5px;
-}
-
-nav.topMenu ul li .dropdown > :first-child {
- border-top-width: 0;
-}
-
-
-
-/* -- -- -- Logo -- -- -- */
-
-header.pageHeader div#logo {
- margin: 0 23px 0;
- position: relative;
- z-index: 1;
-}
-
-header.pageHeader div#logo h1 {
- text-shadow: 0 -1px 0 #000;
- color: #d8e7f5;
- position: relative;
- top: 70px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- header.pageHeader div#logo h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- header.pageHeader div#logo h1 {
- font-size: 175%;
- }
-
-}
-
-header.pageHeader div#logo a:hover {
- text-decoration: none !important;
- color: #d8e7f5;
-}
-
-header.pageHeader div#logo img {
- position: absolute;
- bottom: 20px;
- left: 0;
-}
-
-header.pageHeader div#logo > a,
-header.pageHeader div#logo > div {
- text-align: right;
- display: block;
- height: 120px;
-}
-
-
-
-/* -- -- -- Main Menu -- -- -- */
-
-nav.mainMenu {
- /* This is the general toggle switch for main menu orientation (options: left|center|right) */
- text-align: left;
- margin: 0 30px;
- display: block;
- position: relative;
-}
-
-nav.mainMenu:after {
- content: '';
- display: block;
- clear: both;
-}
-
-nav.mainMenu ul {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- background-color: rgba(0, 0, 0, .4);
- display: inline-block;
-}
-
-nav.mainMenu ul li {
- display: inline-block;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.mainMenu ul li {
- font-size: 120%;
- }
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.mainMenu ul li {
- font-size: 150%;
- }
-}
-
-nav.mainMenu ul li.activeMenuItem:first-child {
- margin: -5px -5px 0 0;
-}
-
-nav.mainMenu ul li.activeMenuItem:last-child {
- margin: -5px 0 0 -5px;
-}
-
-nav.mainMenu ul li:only-child,
-nav.mainMenu ul li.activeMenuItem:only-child {
- margin: -5px 0 0;
-}
-
-nav.mainMenu ul li a {
- font-weight: normal;
- text-shadow: 0 -1px 0 #000;
- color: #69c;
- cursor: pointer;
- display: inline-block;
- position: relative;
- z-index: 1;
-
- -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) {
-
- nav.mainMenu ul li a {
- padding: 10px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.mainMenu ul li a {
- padding: 10px 10px;
- }
-
-}
-
-nav.mainMenu ul li a,
-nav.mainMenu ul li:hover a {
- text-decoration: none;
-}
-
-nav.mainMenu ul li:not(.activeMenuItem):hover a {
- color: #fff;
-}
-
-nav.mainMenu ul li.activeMenuItem a {
- font-size: 110%;
- font-weight: bold;
- text-shadow: 0 1px 0 #fff;
- color: #369;
- white-space: nowrap;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(#fff, #e7f2fd);
- background-image: -moz-linear-gradient(#fff, #e7f2fd);
- background-image: -ms-linear-gradient(#fff, #e7f2fd);
- background-image: -o-linear-gradient(#fff, #e7f2fd);
- background-image: linear-gradient(#fff, #e7f2fd);
-
- z-index: 100;
-}
-
-
-
-/* ToDo: Special */
-
-nav.mainMenu ul li.activeMenuItem .badge {
- font-size: 75% !important;
- color: #fff;
- 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 -- -- -- */
-
-nav.headerNavigation {
- background-color: #e7f2fd;
- border-bottom: 1px solid #bcd;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- margin: 0 23px;
- display: block;
- position: relative;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.headerNavigation {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.headerNavigation {
- min-width: auto;
- }
-
-}
-
-nav.headerNavigation:after {
- content: '';
- display: block;
- clear: both;
-}
-
-nav.headerNavigation > div {
- padding: 0 7px;
-}
-
-nav.headerNavigation > div:after {
- content: '';
- display: block;
- clear: both;
-}
-
-nav.headerNavigation ul,
-nav.footerNavigation ul {
- display: block;
-}
-
-nav.headerNavigation ul li,
-nav.footerNavigation ul li {
- cursor: pointer;
- margin: 0 3px;
- float: right;
-}
-
-nav.headerNavigation ul li a,
-nav.footerNavigation ul li a {
- padding: 3px;
- display: inline-block;
-}
-
-nav.headerNavigation ul li a:hover,
-nav.footerNavigation ul li a:hover {
- background-color: #d8e7f5;
-}
-
-#tplLogin header.pageHeader nav.headerNavigation ul li.toBottomLink,
-#tplLogin footer.pageFooter nav.footerNavigation ul li.toTopLink {
- /* Removes the to-bottom-link on the log-in page */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-
-
-/* ############## Main ############## */
-
-div.main {
- background-color: #d8e7f5;
- margin: 0 23px;
- position: relative;
-
- -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) {
-
- div.main {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- div.main {
- min-width: auto;
- }
-
-}
-
-
-
-/* -- -- -- Content -- -- -- */
-
-section.content {
- background-color: rgba(255, 255, 255, 1);
- position: relative;
- min-height: 100px;
- z-index: 100;
-
- -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 50pxrgba(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.content:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.left section.content {
- border-left: 1px solid rgba(187, 204, 221, 1);
- margin-left: 249px;
-}
-
-.right section.content {
- border-right: 1px solid rgba(187, 204, 221, 1);
- margin-right: 249px;
-}
-
-/* ToDo: The sidebar should be removed completely, when there is no content, as on the login-page and similar! Then this declaration would work as expected. */
-div.main > div section:only-child {
- margin: 0 !important;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- section.content {
- padding: 5px 40px 20px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- section.content {
- padding: 5px 15px 20px;
- }
-
-}
-
-section.content .content {
- border: 1px solid #ccc;
- background-color: rgba(0, 0, 0, .01);
- padding: 13px 23px 23px;
-}
-
-
-
-/* -- -- -- Content Header & Footer -- -- -- */
-
-.contentHeader,
-.contentFooter {
- margin-top: 15px;
-}
-
-
-
-/* ############## Sidebar ############## */
-
-/* Note that the sidebar may change to float soon! */
-
-/* Globals */
-
-aside.sidebar {
- margin-bottom: -10px;
- display: block;
- width: 250px;
- z-index: 80;
-
- -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 aside.sidebar {
- float: left;
-}
-
-.right aside.sidebar {
- float: right;
-}
-
-
-
-/* -- -- -- Collapsible Sidebar -- -- -- */
-
-/* Collapsed */
-
-aside.collapsed {
- width: 0;
-}
-
-.left aside.sidebar.collapsed + section.content {
- border: 0;
- margin-left: 0;
-}
-
-.right aside.sidebar.collapsed + section.content {
- border: 0;
- margin-right: 0;
-}
-
-
-
-/* -- -- -- Collapsible Button -- -- -- */
-
-/* Default (Right) */
-
-aside.sidebar .collapsibleSidebarButton {
- cursor: pointer;
- background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
- background-position: center 1%, center 99%;
- background-size: 10px 10px, 10px 10px;
- background-repeat: no-repeat;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 250px;
- width: 20px;
- height: 100%;
- overflow: hidden;
- z-index: 150;
- opacity: .3;
-
- -webkit-transition: left .1s ease;
- -moz-transition: left .1s ease;
- -ms-transition: left .1s ease;
- -o-transition: left .1s ease;
- transition: left .1s ease;
-}
-
-aside.sidebar .collapsibleSidebarButton span {
- background-color: rgba(255, 255, 255, 1);
- background-image: url('../../icon/arrowLeft1.svg');
- 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;
-}
-
-/* Collapsed (Left) */
-
-aside.sidebar.collapsed .collapsibleSidebarButton {
- background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
- left: 0;
-}
-
-aside.sidebar.collapsed .collapsibleSidebarButton span {
- background-image: url('../../icon/arrowRight1.svg');
-}
-
-aside.sidebar .collapsibleSidebarButton:hover,
-aside.sidebar .collapsibleSidebarButton:hover span{
- border-right: 1px solid rgba(187, 204, 221, .5);
- background-color: rgba(252, 252, 252, 1);
- opacity: 1;
-}
-
-
-
-/* -- -- -- Sidebar Menu -- -- -- */
-
-nav.sidebarMenu {
- white-space: nowrap;
-}
-
-nav.sidebarMenu > div {
- text-shadow: 0 1px 0 #fff;
- color: #69c;
- position: relative;
- overflow: hidden;
- z-index: 110;
-}
-
-.collapsed nav.sidebarMenu > div {
- width: 0;
-}
-
-nav.sidebarMenu > div a:hover {
- text-decoration: none !important;
- color: #369;
-}
-
-nav.sidebarMenu > div h1 {
- cursor: pointer;
- font-weight: bold;
- color: #369;
- background-image: url('../../icon/arrowRight.svg');
- background-position: 15px center;
- background-size: 16px;
- background-repeat: no-repeat;
- margin-top: 5px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.sidebarMenu > div h1 {
- font-size: 130%;
- padding: 7px 25px 7px 35px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.sidebarMenu > div h1 {
- font-size: 150%;
- padding: 7px 15px 7px 35px;
- }
-
-}
-
-nav.sidebarMenu > div h1.activeMenuItem {
- background-image: url('../../icon/arrowDown.svg');
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- nav.sidebarMenu > div ul li {
- font-size: 110%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- nav.sidebarMenu > div ul li {
- font-size: 120%;
- }
-
-}
-
-nav.sidebarMenu > div ul li a {
- text-shadow: 0 1px 0 #fff;
- color: #69c;
- padding: 5px 25px 7px 35px;
- display: block;
-}
-
-nav.sidebarMenu > div ul li.activeMenuItem {
- background-color: #fff;
- 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);
-}
-
-nav.sidebarMenu > div ul li.activeMenuItem a {
- font-weight: bold;
- color: #369;
-}
-
-
-
-/* ############## Page Footer ############## */
-
-/* Globals */
-
-footer.pageFooter {
- text-align: center;
- padding: 0 23px;
- clear: both;
- position: relative;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- footer.pageFooter {
- min-width: 800px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- footer.pageFooter {
- min-width: auto;
- }
-
-}
-
-footer.pageFooter:after {
- content: '';
- display: block;
- clear: both;
-}
-
-footer.pageFooter > div {
- border-top: 1px solid #bcd;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- background-color: #e7f2fd;
- padding: 0 7px;
- clear: both;
-}
-
-footer.pageFooter > div:after {
- content: '';
- display: block;
- clear: both;
-}
-
-
-
-/* -- -- -- Copyright -- -- -- */
-
-footer.pageFooter .copyright {
- padding-top: 20px;
- display: inline-block;
- min-height: 40px;
-}
-
-footer.pageFooter .copyright a {
- text-shadow: 0 -1px 0 #000;
-}
-
-footer.pageFooter .copyright a:hover {
- text-decoration: none;
- color: #69c;
-}
-
-
-
-/* ############## Badges ############## */
-
-/* Globals */
-
-.badge {
- font-size: 85%;
- font-weight: bold;
- text-shadow: none;
- border-radius: 13px;
- background-color: #fff;
- margin-right: -3px;
- margin-left: 3px;
- padding: 2px 5px;
- display: inline-block;
- position: relative;
- top: -1px;
-}
-
-/* Types */
-
-.badgeNote {
- border: 1px solid #ccc;
-}
-
-.badgeInfo {
- color: #68b;
- border: 1px solid #9be;
- background-color: #def;
-}
-
-.badgeSuccess {
- color: #090;
- border: 1px solid #0c0;
- background-color: #efe;
-}
-
-.badgeWarning {
- color: #990;
- border: 1px solid #cc0;
- background-color: #ffd;
-}
-
-.badgeError {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
-}
-
-/* Buttons */
-
-.badgeButton,
-.clipboardEditor > ul > li {
- cursor: pointer;
- border-radius: 30px;
- margin-right: 0;
- margin-left: 0;
- padding: 3px 10px 5px;
- display: inline-block;
-}
-
-li.badgeButton,
-li > .badgeButton {
- margin-top: 7px;
- margin-right: 3px;
- margin-left: 3px;
- float: left;
-}
-
-.badgeButton,
-.badgeButton a,
-.clipboardEditor > ul > li > span {
- text-decoration: none !important;
-}
-
-
-
-/* ############## ToDo: Dropdown Global ############## */
-
-.dropdown {
- color: #fff;
- border-width: 0 1px 1px 1px;
- border-style: solid;
- border-color: rgba(255, 255, 255, 0);
- border-radius: 5;
- background-color: rgba(0, 0, 0, 0);
- margin-top: 25px;
- position: absolute;
- top: 0;
- left: 0;
- height: 0;
- z-index: 500;
- overflow: hidden;
-
- -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 height .1s ease;
- -moz-transition: color background height .1s ease;
- -ms-transition: color background height .1s ease;
- -o-transition: color background height .1s ease;
- transition: color background height .1s ease;
-}
-
-/* Dropdown Items */
-
-.dropdown > li,
-.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;
-}
-
-.dropdown > div {
- padding: 5px 7px;
-}
-
-.dropdown > :first-child {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-.dropdown > :last-child {
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
-.dropdown > :hover:not(ul):not(.pointer),
-.dropdown > .active {
- color: #fff;
- background-color: rgba(0, 0, 0, .5);
-}
-
-.dropdown > li.divider:not(:first-child) {
- border-top: 1px solid rgba(255, 255, 255, .7);
-}
-
-.dropdown > li a {
- text-decoration: none;
- padding: 5px 7px;
- display: inline-block;
-}
-
-.dropdown > li a:hover {
- color: #fff !important;
-}
-
-
-
-/* ############## Headings ############## */
-
-/* -- -- -- Main Heading -- -- -- */
-
-.mainHeading {
- margin-top: 25px;
-}
-
-.mainHeading:not(:first-of-type) {
- margin-top: 30px;
-}
-
-.ui-dialog .mainHeading {
- margin-top: 0;
-}
-
-.mainHeading > img {
- float: left;
-}
-
-.mainHeading > hgroup {
- display: block;
- position: relative;
- min-height: 48px;
-}
-
-.mainHeading > hgroup h1 {
- font-weight: bold;
- border-bottom: 1px solid #999;
- padding: 1px 0 10px;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .mainHeading > img {
- width: 48px;
- height: 48px;
- }
-
- .mainHeading > img ~ hgroup {
- padding-left: 60px;
- }
-
- .mainHeading > hgroup h1 {
- font-size: 175%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .mainHeading > img {
- width: 64px;
- height: 64px;
- }
-
- .mainHeading > img ~ hgroup {
- padding-left: 65px;
- }
-
- .mainHeading > hgroup h1 {
- font-size: 200%;
- }
-
-}
-
-.mainHeading > hgroup h1,
-.mainHeading > hgroup h1 a {
- text-decoration: none;
- text-shadow: 0 1px 0 #fff;
- color: #666;
-}
-
-.mainHeading > hgroup h2 {
- font-size: 100%;
- font-weight: normal;
- color: #999;
- padding-top: 5px;
-}
-
-/* ToDo: Get rid of that ".overlay" class! */
-.overlay .mainHeading > hgroup h1,
-.overlay .mainHeading > hgroup h1 a,
-.overlay .mainHeading > hgroup h2 {
- text-shadow: 0 -1px 0 #000;
- color: #fff;
-}
-
-.mainHeading > hgroup p {
- padding-top: 3px;
-}
-
-
-
-/* -- -- -- Sub Heading -- -- -- */
-
-.subHeading h1 {
- font-size: 150%;
- font-weight: bold;
- text-shadow: 0 1px 0 #fff;
- color: #999;
- border-bottom: 1px solid #ccc;
- margin: 10px 0;
- padding: 10px 0;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .subHeading h1 {
- font-size: 150%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .subHeading h1 {
- font-size: 175%;
- }
-
-}
-
-.subHeading h2 {
- font-weight: normal;
- color: #aaa;
-}
-
-
-
-/* ############## Fieldsets ############## */
-
-fieldset {
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: rgba(0, 0, 0, .015);
- margin: 15px 0 0;
- padding: 15px;
-}
-
-fieldset:last-child, fieldset:only-child {
- margin-bottom: 7px !important;
-}
-
-/* experimental
-fieldset.topLink {
- background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
- background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
- background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
- background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
- background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
-}
-*/
-
-fieldset legend {
- color: #999;
- padding: 0 7px 0;
-}
-
-fieldset legend ~ p {
- margin-bottom: 14px;
-}
-
-fieldset p.description {
- font-size: 90%;
- color: #999;
-}
-
-
-
-/* ############## Tabbed Content ############## */
-
-/* Simple */
-
-dl {
- margin-bottom: 7px;
- position: relative;
-}
-
-dl > dt {
- text-align: right;
- color: #69c;
- margin-top: 5px; /* not so nice */
- 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 > dt > label {
- margin-top: 5px;
- display: block;
-}
-
-dl.disabled > dt {
- color: #777;
-}
-
-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 > dd > small {
- font-size: 85%;
- color: #999;
- margin: 3px 0 7px;
- display: block;
-}
-
-/* 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 */
-
-dt.reversed {
- text-align: left;
- margin-top: 2px;
- position: absolute;
- width: auto;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- dt.reversed {
- left: 270px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- dt.reversed {
- left: 170px;
- }
-
-}
-
-dt.reversed ~ dd > input[type='checkbox'] {
- margin-left: 0;
-}
-
-
-
-/* ############## Forms ############## */
-
-/* Globals */
-
-label {
- color: #69c;
-}
-
-/* Structure */
-
-.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 {
- cursor: pointer;
-}
-
-input[type='text'],
-input[type='search'],
-input[type='email'],
-input[type='password'] {
- padding: 5px 3px;
-}
-
-/* Normal State */
-
-input[type='text'],
-input[type='search'],
-input[type='email'],
-input[type='password'],
-textarea {
- border-width: 1px;
- border-style: solid;
- border-color: #999 #ccc #eee;
- border-radius: 3px;
- background-color: #fff;
-
- -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='email']:hover,
-input[type='password']:hover,
-textarea:hover {
- border: 1px solid #fa2;
- background-color: #fff9f4;
-}
-
-/* Active & Focus State */
-
-input[type='text']:active,
-input[type='search']:active,
-input[type='email']:active,
-input[type='password']:active,
-textarea:active,
-input[type='text']:focus,
-input[type='search']:focus,
-input[type='email']:focus,
-input[type='password']:focus,
-textarea:focus {
- border: 1px solid #fa2;
- background-color: #fff9f4;
- 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='readonly'],
-input[type='search'][readonly='readonly'],
-input[type='email'][readonly='readonly'],
-input[type='password'][readonly='readonly'],
-textarea[readonly='readonly'] {
- border-style: solid;
- border-color: #ccc #ddd #eee;
- 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='disabled'],
-input[type='search'][disabled='disabled'],
-input[type='email'][disabled='disabled'],
-input[type='password'][disabled='disabled'],
-textarea[disabled='disabled'] {
- border-style: solid;
- border-color: rgba(0, 0, 0, .5);
- background-color: rgba(255, 255, 255, .5);
-}
-
-
-
-/* -- -- -- Input Widths -- -- -- */
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- textarea {
- width: 99%;
- min-width: 300px;
- }
-
- .tiny {
- width: 100px;
- }
-
- .short {
- width: 10%;
- min-width: 100px;
- }
-
- .medium {
- width: 50%;
- min-width: 200px;
- }
-
- .long {
- width: 99%;
- min-width: 300px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- textarea {
- width: 99%;
- min-width: auto;
- }
-
- .tiny {
- width: 50px;
- }
-
- .short {
- width: 10%;
- min-width: 50px;
- }
-
- .medium {
- width: 30%;
- min-width: 100px;
- }
-
- .long {
- width: 99%;
- min-width: 150px;
- }
-
-}
-
-.auto {
- width: auto;
-}
-
-
-
-/* -- -- -- Form Errors -- -- -- */
-
-.formError input[type='text'],
-.formError input[type='search'],
-.formError input[type='email'],
-.formError input[type='password'],
-.formError textarea {
- border-color: #f00;
- background-color: #fff6f6;
-}
-
-
-
-/* -- -- -- Input Buttons & Dropdowns -- -- -- */
-
-/* Bounding Box */
-
-/* ToDo: Change the class-name! */
-.preInput {
- display: table;
- position: relative;
- width: 100%;
-}
-
-.preInput > input,
-.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) {
-
- .preInput > input,
- .preInput > textarea {
- min-width: 300px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .preInput > input,
- .preInput > textarea {
- min-width: 100px;
- }
-
-}
-
-/* Dropdown Caption */
-
-.preInput .dropdownCaption {
- letter-spacing: -1px;
- cursor: pointer;
- border-radius: 3px 0 0 3px;
- padding-right: 5px;
- display: table-cell;
- width: 1%;
- vertical-align: middle;
-}
-
-.preInput .dropdownCaption span {
- margin-right: -1px;
- padding-left: 5px;
- white-space: nowrap;
-}
-
-.preInput .dropdownCaption span.active {
- background-image: url('../../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 10px;
-}
-
-.preInput .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 ############## */
-
-/* Globals */
-
-.smallButtons {
- list-style-type: none;
- margin-right: -1px;
- margin-bottom: -1px;
-}
-
-.smallButtons > li {
- margin-left: -5px;
- display: inline-block;
-}
-
-.smallButtons > li > a {
- white-space: nowrap;
- padding: 3px 7px;
- display: block;
-}
-
-.smallButtons > li.separator > a {
- border-right: 1px dotted #bcd;
-}
-
-.smallButtons > li:first-child > a {
- border-top-left-radius: 13px;
-}
-
-.smallButtons > li:last-child > a {
- border-bottom-right-radius: 7px;
-}
-
-
-
-/* ############## Large Buttons ############## */
-
-/* Colors are being taken from the global color styles */
-
-/* Globals */
-
-.largeButtons {
- text-align: right;
-}
-
-.largeButtons > li {
- display: inline;
-}
-
-.largeButtons > li > a img {
- margin: -5px 1px -5px -5px;
- vertical-align: middle;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .largeButtons > li > a img {
- height: 24px;
- width: 24px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .largeButtons > li {
- font-size: 125%;
- }
-
- .largeButtons > li > a {
- padding: 10px 15px !important;
- white-space: nowrap;
- }
-
- .largeButtons > li > a img {
- height: 32px;
- width: 32px;
- }
-
-}
-
-/* Normal State */
-
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.largeButtons > li > a {
- font-size: 100%;
- font-weight: bold;
- border-radius: 30px;
- margin: 3px 2px;
- padding: 5px 13px;
- display: inline-block;
-}
-
-
-
-/* ############## Border ############## */
-
-.border {
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-top: 15px;
-
- -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);*/
-}
-
-.tabMenu ~ .border {
- -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);*/
-}
-
-/* ToDo: Get rid of that ".overlay" class! */
-.border.overlay {
- margin-top: 0 !important;
-}
-
-
-
-/* ############## Box Title ############## */
-
-/* Globals */
-
-.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%;
-}
-
-/* Headings */
-
-.boxTitle > hgroup {
- text-shadow: 0 -1px 0 #000;
- color: #fff;
- padding: 7px;
- display: inline-block;
-}
-
-.boxTitle > a,
-.boxTitle > hgroup a {
- text-decoration: none;
- color: #fff;
-}
-
-.boxTitle > hgroup h1 {
- font-size: 120%;
- display: inline-block;
-}
-
-.boxTitle > hgroup h2 {
- font-size: 85%;
- color: rgba(255, 255, 255, .9);
- margin-top: 5px;
-}
-
-.boxTitle > hgroup .badge {
- font-size: 75%;
- color: #369;
-}
-
-/* Collapse Icon */
-
-.boxTitle > a {
- margin: 7px 0 0 10px;
- float: left;
-}
-
-.boxTitle > a img {
- height: 16px;
- width: 16px;
-}
-
-
-
-/* ############## Tab Menu ############## */
-
-/* Globals */
-
-.tabMenu {
- text-shadow: 0 1px 0 #fff;
- /* Toggle for tab menu orientation (options: left|center|right) */
- text-align: center;
- white-space: nowrap;
- background-color: none;
- margin-top: 15px;
- padding: 0 5px;
- display: block;
- position: relative;
-}
-
-/* Tabs */
-
-.tabMenu li {
- white-space: nowrap;
- list-style: none;
- display: inline-block;
-}
-
-.tabMenu li.ui-state-active {
- margin-right: -7px;
- margin-left: -7px;
-}
-
-.tabMenu li a {
- text-decoration: none;
- color: #999;
- cursor: pointer;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: #ddd;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: rgba(0, 0, 0, .05);
- display: inline-block;
- position: relative;
- bottom: -1px;
- z-index: 10;
-
- -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) {
-
- .tabMenu li a {
- font-size: 110%;
- padding: 10px 15px 7px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .tabMenu li a {
- font-size: 150%;
- padding: 5px 10px;
- max-width: 100px;
- }
-
-}
-
-.tabMenu li:not(.ui-state-active) a:hover {
- color: #666;
- border-width: 1px;
- border-style: solid;
- border-color: rgb(255, 170, 34) rgb(255, 170, 34) rgb(204, 204, 204);
- background-color: rgba(255, 249, 244, 1);
-}
-
-.tabMenu li:not(.ui-state-active) a:active,
-.tabMenu li:not(.ui-state-active) a:focus {
- border-width: 1px;
- border-style: solid;
- border-color: #fa2 #fa2 #ccc;
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-.tabMenu li.ui-state-active a {
- font-weight: bold;
- color: #333 !important;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc;
- border-bottom-color: #fff;
- background-color: rgba(255, 255, 255, 1);
- bottom: 0;
- z-index: 30;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .tabMenu li.ui-state-active a {
- font-size: 130%;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .tabMenu li.ui-state-active a {
- font-size: 150%;
- }
-
-}
-
-.tabMenu li.ui-state-active a,
-.tabMenu li.ui-state-disabled a,
-.tabMenu li.ui-state-processing a {
- cursor: default;
-}
-
-/* Tab Menu Content */
-
-.tabMenuContent {
- border: 1px solid #ccc;
- background-color: rgba(255, 255, 255, 1);
- margin-top: -1px;
- padding: 15px 23px;
- 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);
-}
-
-
-
-/* ############## Pill Menu ############## */
-
-/* Standard */
-
-.menu {
- color: #666;
- border-bottom: 1px solid #ccc;
- margin: -15px -23px 0;
- padding: 0 7px 10px;
-}
-
-.tabMenuContent > .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));
-}
-
-.menu ul {
- /* Toggle switch for menu orientation (options: left|center|right) */
- text-align: center;
-}
-
-.menu ul li {
- white-space: nowrap;
- margin-top: 10px;
- display: inline-block;
-}
-
-.menu ul li a {
- font-size: 85%;
- text-shadow: 0 1px 0 #fff;
- text-decoration: none;
- color: #999;
- 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;
-}
-
-.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);
-}
-
-.menu ul li:not(.ui-state-active) a:active,
-.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);
-}
-
-.menu ul li.ui-state-active a {
- font-weight: bold;
- text-shadow: 0 1px 0 #000;
- color: #fff;
- cursor: default;
- border: 1px solid rgba(0, 0, 0, .2);
- background-color: rgba(0, 0, 0, .5);
-}
-
-/* Special */
-
-.boxTitle > .menu {
- color: #fff;
- border: none;
- margin: 0 !important;
- padding: 6px 7px !important;
-}
-
-.boxTitle > .menu ul li {
- margin-top: 0;
-}
-
-.boxTitle > .menu ul li a {
- font-size: 85%;
- text-decoration: none;
- text-shadow: 0 -1px 0 #000;
- color: #eee !important;
- border: 1px solid rgba(0, 0, 0, .3);
- border-radius: 13px;
- background-color: rgba(0, 0, 0, .1);
- 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;
-}
-
-.boxTitle > .menu ul li a:hover {
- color: #fff !important;
- border: 1px solid rgba(0, 0, 0, .3);
- background-color: rgba(0, 0, 0, .2);
-}
-
-.boxTitle > .menu ul li a:active,
-.boxTitle > .menu ul li a:focus,
-.boxTitle > .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);
-}
-
-.boxTitle > .menu ul li a .badge {
- color: #369 !important;
-}
-
-
-
-/* ############## Bread Crumbs ############## */
-
-/* Globals */
-
-.breadcrumbs {
- text-align: left;
- border: 1px solid #ccc;
- border-radius: 5px;
- background-color: rgba(255, 255, 255, 1);
- margin-top: 15px;
- display: block;
- clear: both;
- position: relative;
- overflow: hidden;
-}
-
-.breadcrumbs ul li {
- font-size: 85%;
- list-style: none;
- float: left;
- position: relative;
-}
-
-/* Arrow */
-
-.breadcrumbs ul li > span {
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent #ccc;
- display: block !important;
- position: absolute;
- width: 0;
- height: 0;
- top: -4px;
- right: -15px;
- z-index: 100;
-}
-
-.breadcrumbs ul li > span > span {
- text-indent: -9000px;
- border-width: 15px;
- border-style: solid none solid solid;
- border-color: transparent transparent transparent #fff;
- display: block;
- position: absolute;
- width: 0;
- height: 0;
- top: -15px;
- left: -16px;
- overflow: hidden;
-}
-
-/* Caption */
-
-.breadcrumbs ul li a {
- text-decoration: none;
- text-shadow: 0 1px 0 #fff;
- color: #999;
- margin: 0;
- padding: 5px 1px 5px 20px;
- display: block;
- overflow: hidden;
- white-space: nowrap;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .breadcrumbs ul li a {
- max-width: 250px;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .breadcrumbs ul li a {
- max-width: 100px;
- }
-
-}
-
-.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;
-}
-
-.breadcrumbs ul li:hover a {
- color: #666;
- background-color: #f9f9f9;
- position: relative;
- z-index: 90;
-}
-
-.breadcrumbs ul li:hover > span > span {
- border-color: transparent transparent transparent #f9f9f9;
-}
-
-
-
-/* ############## 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 to the left */
- border-top-left-radius: 5px;
-}
-
-thead th:last-child {
- /* Rounded corners for the last table header cell to the left */
- 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: #fff;
- background-color: rgba(0, 0, 0, .2);
-}
-
-thead th a:active,
-thead th a:focus,
-thead th.active a {
- color: #fff;
- 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 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 last table cell to the left */
- border-bottom-left-radius: 5px;
-}
-
-tbody tr:last-child td:last-child {
- /* Rounded corners for the last table cell to the right */
- border-bottom-right-radius: 5px;
-}
-
-tbody td {
- background-color: #fcfdfe;
- border-right: 1px solid rgba(255, 255, 255, .3);
- padding: 5px;
- /* This is experimental - only works in combination with "table-layout: fixed;" */
- word-wrap: break-word;
-
- -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;
-}
-
-/* ToDo: Table Header Specials */
-
-.menu ~ .border thead th:first-child {
- border-top-left-radius: 0 !important;
-}
-
-.menu ~ .border thead th:last-child {
- border-top-right-radius: 0 !important;
-}
-
-.menu ~ .border thead th:first-child,
-.boxTitle > table thead th:first-child {
- border-top-left-radius: 0 !important;
-}
-
-.menu ~ .border thead th:last-child,
-.boxTitle > table thead th:last-child {
- border-top-right-radius: 0 !important;
-}
-
-/* Table Checkboxes */
-
-table input[type='checkbox'] {
- margin-top: -5px !important;
- margin-bottom: -5px !important;
-}
-
-/* Table Column Formats */
-
-tr .columnMark,
-tr .columnStatus {
- text-align: center;
- width: 1% !important;
- white-space: nowrap;
-}
-
-tr .columnStatus .badge {
- margin-right: 1px !important;
- margin-left: 1px !important;
-}
-
-tr .columnDigits,
-tr .columnID {
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-tr .columnIcon {
- text-align: left;
- width: 1% !important;
- white-space: nowrap;
-}
-
-/* ToDo: does not function any more!
-tr .columnIcon img:not(.balloonTooltip):hover {
- cursor: not-allowed;
-}
-*/
-
-tr .columnIcon img {
- height: 16px;
- width: 16px;
-}
-
-.bigList tr .columnIcon img {
- height: 24px;
- width: 24px;
-}
-
-tr .columnTitle {
- font-weight: bold;
- text-align: left;
-}
-
-tr .columnText {
- font-weight: normal;
- text-align: left;
- max-width: 20%;
-}
-
-tr .columnDate,
-tr .columnRegistrationDate {
- font-size: 85%;
- text-align: right;
- width: 1% !important;
- white-space: nowrap;
-}
-
-tr .columnURL {
- font-size: 85%;
- text-align: left;
-}
-
-
-
-/* ############## Page Navigation ############## */
-
-/* ToDo */
-
-.pageNavigation ul li {
- text-align: center;
- min-width: 19px;
-}
-
-.pageNavigation ul li:not(href):not(.disabled) {
- cursor: pointer;
-}
-
-.pageNavigation ul li:not(:first-child) {
- margin-left: 3px;
-}
-
-.pageNavigation ul li {
- border-radius: 3px;
- display: inline-block;
- position: relative;
-}
-
-.pageNavigation ul li.disabled {
- cursor: not-allowed;
- border: 1px solid rgba(0, 0, 0, .1) !important;
- background-image: none !important;
-}
-
-.pageNavigation ul li img {
- height: 16px;
- width: 16px;
-}
-
-.pageNavigation ul li.skip {
- padding: 2px 0 1px;
- top: -1px;
-}
-
-.pageNavigation ul li a {
- text-shadow: 0 1px 0 #fff;
- text-decoration: none;
- color: #999;
- display: inline-block;
-}
-
-.pageNavigation ul li:not(.disabled):hover a {
- color: #666;
-}
-
-.pageNavigation ul li:not(.skip) a {
- padding: 3px 5px;
-}
-
-.pageNavigation ul li:active a,
-.pageNavigation ul li:focus a {
- color: #333;
-}
-
-.pageNavigation ul li.active,
-.pageNavigation ul li.active:hover {
- text-shadow: 0 1px 0 #000 !important;
- color: #fff !important;
- border: 1px solid rgba(0, 0, 0, .3) !important;
-
- background-color: rgba(0, 0, 0, .5) !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 */
-
-.pageNavigation ul li.children {
- position: relative;
-}
-
-.pageNavigation ul li.children > a {
- margin-right: -30px;
- position: relative;
- z-index: 100;
-}
-
-.pageNavigation ul li.children input {
- width: 28px;
- height: 9px;
-}
-
-.pageNavigation ul li.children img {
- height: 9px;
- width: 7px;
-}
-
-.pageNavigation ul li.children .dropdown {
- text-align: left;
- border-color: transparent;
- border-radius: 3px;
- background-color: rgba(0, 0, 0, .7);
- margin-top: 28px;
- margin-left: -2px;
- 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;
-}
-
-.pageNavigation ul li.children:hover .dropdown {
- border-color: rgba(255, 255, 255, .7);
- height: auto;
- overflow: visible;
- opacity: 1;
-}
-
-.pageNavigation ul li.children .dropdown ul {
- padding: 0 5px 5px 2px;
- display: block;
-}
-
-.pageNavigation ul li.children .dropdown ul li {
- margin-top: 5px;
- margin-left: 3px;
-}
-
-/* Pointer */
-
-.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;
-}
-
-.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;
-}
-
-/* ############## System Notifications ############## */
-
-/* Globals */
-
-.info,
-.error,
-.success,
-.warning {
- text-shadow: 0 1px 0 #fff;
- line-height: 1.5;
- border-radius: 7px;
- margin-top: 15px;
- padding: 7px 15px 7px 50px;
-}
-
-/* Types */
-
-.info {
- color: #68b;
- border: 1px solid #9be;
- background-color: #def;
- background-image: url('../../icon/systemInfo.svg');
- background-size: 24px;
- background-position: 13px center;
- background-repeat: no-repeat;
-}
-
-.success {
- color: #090;
- border: 1px solid #0c0;
- background-color: #efe;
- background-image: url('../../icon/systemSuccess.svg');
- background-size: 24px;
- background-position: 13px center;
- background-repeat: no-repeat;
-}
-
-.warning {
- color: #990;
- border: 1px solid #cc0;
- background-color: #ffd;
- background-image: url('../../icon/systemWarning.svg');
- background-size: 24px;
- background-position: 13px center;
- background-repeat: no-repeat;
-}
-
-.error {
- color: #c00;
- border: 1px solid #f99;
- background-color: #fee;
- background-image: url('../../icon/systemError.svg');
- background-size: 24px;
- background-position: 13px center;
- background-repeat: no-repeat;
-}
-
-/* Inline Errors */
-
-.innerError {
- text-shadow: 0 1px 0 #fff;
- line-height: 1.5;
- color: #c00;
- border: 1px solid #ccc;
- border-radius: 7px;
- background-color: #fff;
- 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 should support this from version 10 on */
- 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);
-}
-
-.innerError .pointer {
- border-width: 0 7px 7px;
- border-style: solid;
- border-color: #ccc transparent;
- display: inline-block !important;
- width: 0;
- position: absolute;
- top: -7px !important;
- left: 10%;
-}
-
-.innerError .pointer span {
- border-width: 0 5px 5px;
- border-style: solid;
- border-color: #fff transparent;
- display: inline-block;
- width: 0;
- position: absolute;
- top: 2px;
- left: -5px;
-}
-
-/* Special */
-
-.preInput ~ .innerError .pointer {
- right: 10%;
- left: auto;
-}
-
-
-
-
-
-
-
-
-.wcfDimensions {
- display: inline-block;
-}
-
-
-
-
-
-/* ############## ToDo: Overlay ############## */
-
-.ui-dialog,
-.wcfDialogContainer {
- 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) {
-
- .ui-dialog,
- .wcfDialogContainer {
- min-width: 500px !important;
- max-width: 780px !important;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .ui-dialog,
- .wcfDialogContainer {
- min-width: 200px !important;
- max-width: 380px !important;
- }
-
-}
-
-/* Dialog Titlebar */
-
-.ui-dialog-titlebar,
-.wcfDialogTitlebar {
- 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;*/
-}
-
-.ui-dialog-title,
-.wcfDialogTitle {
- font-size: 170%;
- font-weight: bold;
- text-shadow: 0 -1px 0 #000;
- color: rgba(255, 255, 255, 1);
- display: block;
-}
-
-a.ui-dialog-titlebar-close,
-a.wcfDialogCloseButton {
- 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;
-}
-
-a.ui-dialog-titlebar-close span,
-a.wcfDialogCloseButton span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-/* Dialog Content */
-
-.ui-dialog-content,
-.wcfDialogContent {
- background-color: #333;
- overflow: auto;
-}
-
-.ui-dialog > .ui-dialog-content,
-.wcfDialogContainer > .wcfDialogContent {
- border-radius: 7px;
- padding: 0;
- /*width: auto !important;*/
-}
-
-.ui-dialog-titlebar ~ .ui-dialog-content,
-.wcfDialogTitlebar ~ .wcfDialogContent {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-left-radius: 7px;
- border-bottom-right-radius: 7px;
- padding: 10px 20px 20px;
-}
-
-/* ToDo: Installation */
-
-.ui-dialog-content > div {
- height: 100%;
- max-width: 600px;
-}
-
-.ui-dialog-content > div fieldset {
- border-color: #666;
- background-color: rgba(0, 0, 0, .1);
-}
-
-.ui-dialog-content > div p.error {
- border: 1px solid #ed1c24;
- border-radius: 5px;
- background-color: #fdd;
- margin-bottom: 15px;
- padding: 7px;
-}
-
-/* Special */
-
-div#ajaxExceptionStacktrace {
- white-space: nowrap;
- overflow: scroll;
- overflow-y: hidden;
-}
-
-div#ajaxExceptionStacktrace {
- font-family: monospace;
- font-size: 90%;
- line-height: 1.2;
- border: 1px solid #ccc;
- padding: 3px;
-}
-
-/* Login Box */
-
-/* Note: Do not use the class ".loginBox" to style the box! */
-
-#loginBox dl {
- margin-right: 20px;
-}
-
-#loginBox dl dt,
-#loginBox dl dd,
-#loginBox dl label {
- color: #fff;
-}
-
-
-
-/* ############## ToDo: Overlay Spinner ############## */
-
-.ui-widget-overlay,
-.wcfDialogOverlay {
- background-color: #000;
- opacity: .5;
- position: fixed;
- width: 100% !important;
- top: 0;
- left: 0;
-}
-
-
-/* ToDo: What is that and change that class-name! */
-.overlayLoading {
- background-color: #fff;
- background-image: url('../../icon/spinner1.svg');
- background-position: center center;
- background-size: 32px;
- background-repeat: no-repeat;
-}
-
-
-
-
-
-
-
-/* ############## GUI Widgets ############## */
-
-/* -- -- -- Balloon Tooltips -- -- -- */
-
-#balloonTooltip {
- font-size: .85em;
- color: #fff;
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- padding: 5px 10px 7px;
- max-width: 300px;
- z-index: 900;
-
- -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);
-}
-
-a.balloonTooltip,
-a .balloonTooltip,
-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;
-}
-
-#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%;
-}
-
-#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: Clipboard Editor ############## */
-
-/* Globals */
-
-.clipboardEditor > ul {
- font-size: .85em;
- margin: 6px 3px 0;
- display: block;
- position: relative;
- float: left;
-}
-
-.clipboardEditor > ul > li > span {
- background-image: url('../../icon/dropdown1.svg');
- background-position: right center;
- background-repeat: no-repeat;
- padding-right: 12px;
- display: inline-block;
-}
-
-/* ToDo: Dropdown (merge with other dropdown-declarations!) */
-
-.clipboardEditor ul > li > ol {
- border: 1px solid rgba(255, 255, 255, .7);
- border-radius: 5px;
- background-color: rgba(0, 0, 0, .7);
- margin-top: 23px;
- position: absolute;
- top: 0;
- left: 0;
-
- -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
- box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
-}
-
-.clipboardEditor ul > li > ol > li {
- text-shadow: none;
- color: #ccc;
- cursor: pointer;
- padding: 5px 7px;
-
- -webkit-transition: 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;
-}
-
-.clipboardEditor ul > li > ol > li:first-child {
- border-top-width: 0;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-.clipboardEditor ul > li > ol > li:last-child {
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
-.clipboardEditor ul > li > ol > li:hover {
- color: #fff;
- background-color: rgba(0, 0, 0, .5);
-}
-
-
-
-/* ############## Global Button Color & Effect Library ############## */
-
-/* Normal State */
-button,
-input[type='reset'],
-input[type='submit'],
-input[type='button'],
-.smallButtons > li > a,
-.largeButtons > li > a,
-.badgeButton,
-.pageNavigation ul li:not(.children),
-.clipboardEditor > ul > li,
-.preInput .dropdownCaption {
- text-decoration: none;
- text-shadow: 0 1px 0 #fff;
- color: #999;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-
- 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-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 */
-
-button:hover,
-input[type='reset']:hover,
-input[type='submit']:hover,
-input[type='button']:hover,
-input[type='button'].default:hover,
-input[type='button'].default:hover,
-.smallButtons > li > a:hover,
-.smallButtons > li.default > a:hover,
-.largeButtons > li > a:hover,
-.largeButtons > li.default > a:hover,
-.badgeButton:hover,
-.pageNavigation ul li:not(.disabled):not(.children):hover,
-.clipboardEditor > ul > li:hover,
-.preInput:hover .dropdownCaption {
- color: #666;
- border-width: 1px;
- border-style: solid;
- border-color: #ffc053 #fa2 #fc9e07;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(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 */
-
-button:focus,
-input[type='reset']:focus,
-input[type='submit']:focus,
-input[type='button']:focus,
-input[type='button'].default:focus,
-input[type='button'].default:focus,
-.smallButtons > li > a:focus,
-.smallButtons > li.default > a:focus,
-.largeButtons > li > a:focus,
-.largeButtons > li.default > a:focus,
-.badgeButton:focus,
-.pageNavigation ul li:not(.disabled):not(.children):active,
-.clipboardEditor > ul > li:focus,
-.preInput .dropdownCaption:focus,
-button:active,
-input[type='reset']:active,
-input[type='submit']:active,
-input[type='button']:active,
-input[type='button'].default:active,
-.smallButtons > li > a:active,
-.smallButtons > li.default > a:active,
-.largeButtons > li a:active,
-.largeButtons > li.default > a:active,
-.badgeButton:active,
-.pageNavigation ul li:not(.disabled):not(.children):focus,
-.clipboardEditor > ul > li:active,
-.preInput .dropdownCaption:active {
- color: #333;
- border-width: 1px;
- border-style: solid;
- border-color: #fc9e07 #fa2 #ffc053;
-
- background-color: #fff9f4;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
- background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
-
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-}
-
-/* Default State Glow */
-
-@-webkit-keyframes glowButtons {
- 0% {
- -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-moz-keyframes glowButtons {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-@-ms-keyframes glowButtons {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtons {
- 0% {
- -o-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-*/
-@keyframes glowButtons {
- 0% {
- box-shadow: 0 0 13px rgba(102, 153, 204, .5);
- }
- 100% {
- box-shadow: 0 0 13px rgba(102, 153, 204, .1);
- }
-}
-
-/* Default Normal State */
-
-button.default,
-input[type='submit'],
-input[type='button'].default,
-.smallButtons > li.default > a,
-.largeButtons > li.default > a {
- color: #69c;
- border-width: 1px;
- border-style: solid;
- border-color: #7aade0 #69c #5285b8;
-
- background-color: #e7f2fd;
- background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
-
- -webkit-box-shadow: 0 0 10px #369;
- -moz-box-shadow: 0 0 10px #369;
- -ms-box-shadow: 0 0 10px #369;
- -o-box-shadow: 0 0 10px #369;
- box-shadow: 0 0 10px #369;
-
- -webkit-animation-name: 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 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-moz-keyframes glowButtonsHover {
- 0% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-@-ms-keyframes glowButtonsHover {
- 0% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-/* disabled to ease rendering work for Opera
-@-o-keyframes glowButtonsHover {
- 0% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-*/
-@keyframes glowButtonsHover {
- 0% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .3);
- }
- 100% {
- box-shadow: 0 0 13px rgba(255, 153, 51, .1);
- }
-}
-
-/* Default Hover State */
-
-button.default:hover,
-input[type='submit']:hover,
-input[type='button'].default:hover,
-.largeButtons > li.default > a:hover,
-.smallButtons > li.default > a:hover {
- -webkit-box-shadow: 0 0 10px #fa2;
- -moz-box-shadow: 0 0 10px #fa2;
- -ms-box-shadow: 0 0 10px #fa2;
- -o-box-shadow: 0 0 10px #fa2;
- box-shadow: 0 0 10px #fa2;
-
- -webkit-animation-name: 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 */
-
-button.default:focus,
-input[type='submit']:focus,
-input[type='button'].default:focus,
-.smallButtons > li.default > a:active,
-.largeButtons > li.default > a:active,
-button.default:active,
-input[type='submit']:active,
-input[type='button'].default:active,
-.smallButtons > li.default > a:active,
-.largeButtons > li.default > a:active {
- -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
-
- -webkit-animation-name: 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;
-}
-
-/* Disabled State */
-
-button[disabled='disabled'],
-input[disabled='disabled'],
-input[type='button'][disabled='disabled'],
-.smallButtons > li.disabled > a,
-.largeButtons > li.disabled > a {
- color: #999;
- cursor: default;
- border-width: 1px;
- border-style: solid;
- border-color: #ccc #bbb #aaa;
-}
-
-
-
-/* ############## ACP Package List ############## */
-
-/* -- -- -- Package Standalone -- -- -- */
-
-/* Globals */
-
-.infoPackageStandalone {
- position: relative;
-}
-
-.infoPackageStandalone img.packageStandaloneIcon {
- position: absolute;
- top: 30px;
- left: 25px;
- width: 96px;
- height: 96px;
-}
-
-.infoPackageStandalone div {
- margin-bottom: -15px;
- margin-left: 30px;
-}
-
-.infoPackageStandalone footer {
- position: relative;
- right: -15px;
- bottom: -15px;
-}
-
-/* -- -- -- Package Plugin -- -- -- */
-
-/* Globals */
-
-.infoPackagePlugin {
- text-align: center;
- border: 1px solid rgba(204, 204, 204, 1);
- border-radius: 7px;
- background-color: rgba(0, 0, 0, .015);
- margin-top: 15px;
- 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;
-}
-
-.infoPackagePlugin a {
- text-decoration: none;
-}
-
-.infoPackagePlugin > div > a {
- color: #999;
- background-size: 96px;
- background-position: center center;
- background-repeat: no-repeat;
- margin: 1px;
- display: block;
- position: relative;
- width: 148px;
- height: 148px;
-}
-
-.infoPackagePlugin:hover > div > a {
- color: #666;
-}
-
-.infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
- font-size: 100%;
- font-weight: bold;
- text-shadow: 0 1px 0 #fff;
- word-wrap: break-word;
- 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));
-
- margin: 0 -1px;
- padding: 3px 1px;
- display: block;
- position: relative;
- z-index: 100;
-}
-
-.infoPackagePlugin footer {
- position: absolute;
- bottom: 0;
- width: 100%;
-}
-
-.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;
-}
-
-.infoPackagePlugin:hover > div > a > small {
- background-color: rgba(255, 255, 255, .9);
- z-index: 10;
- opacity: 1;
-}
-
-/* SmallButtonBar */
-
-.infoPackagePlugin .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;
-}
-
-.infoPackagePlugin .smallButtonBar li {
- display: inline;
- position: relative;
-}
-
-.infoPackagePlugin .smallButtonBar li span {
- /* Removes the button-caption */
- position: absolute;
- left: -9000px;
- top: -9000px;
- width: 0;
-}
-
-
-
-/* -- -- -- Package Footers -- -- -- */
-
-.infoPackageStandalone footer nav,
-.infoPackagePlugin footer nav {
- text-align: right;
-}
-
-@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
-
- .infoPackageStandalone footer nav,
- .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;
- }
-
- .infoPackageStandalone:hover footer nav,
- .infoPackagePlugin:hover footer nav {
- opacity: 1;
- }
-
-}
-
-@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
-
- .infoPackageStandalone footer nav,
- .infoPackagePlugin footer nav,
- .infoPackageStandalone:hover footer nav,
- .infoPackagePlugin:hover footer nav {
- opacity: 1;
- }
-
-}
-
-
-
-
-
-
-
-
-
-
-/* ############## CSS Experiments (active) ############## */
-
-
-
-/* ToDo: User Panel
-
-this is taken from "userPanel.tpl" (inline-css)
-will change soon!
-
- CSS should be moved to a user css-file, whereas many parts may be left out except for the following ones:
- - [.scrollableContainer] Don't touch!
- - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated
- - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the scrollable class
- from jQueryTools. Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic
-
-*/
-
-/* ToDo: User Notifications */
-
-.userNotificationContainer {
- width: 240px;
- z-index: 510; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */
- overflow: hidden;
-}
-
-/* ToDo: Scrollable Container */
-
-.scrollableContainer {
- position: relative;
- width: 250px;
- overflow: hidden;
-}
-
-.scrollableContainer .scrollableItems {
- position: relative;
- width: 20000em;
-}
-
-.scrollableContainer .scrollableItems > div {
- border-right: 1px solid rgba(192, 192, 192, 1);
- float: left;
- width: 250px;
-}
-
-.scrollableContainer {
- font-size: 90%;
-}
-
-.scrollableContainer > div:first-child ul {
- margin: 0;
- padding: 0;
-}
-
-.scrollableContainer > div:first-child li {
- border-top: 1px solid rgba(192, 192, 192, 1);
- cursor: pointer;
- padding: 7px;
-}
-
-.scrollableContainer > div:first-child li:first-child {
- border-top-width: 0;
-}
-
-div.scrollableContainer > div:first-child p {
- padding: 0 1px;
-}
-
-/* ToDo: User Notification Details */
-
-.userNotificationDetails {
- padding: 7px;
- width: 236px;
-}
-
-.userNotificationDetails header {
- margin-bottom: 7px;
- display: table;
- width: 100%;
-}
-
-.userNotificationDetails .row {
- display: table-row;
-}
-
-.userNotificationDetails .row div {
- text-align: center;
- display: table-cell;
- vertical-align: middle;
-}
-
-.userNotificationDetails .row div:first-child {
- width: 64px;
-}
-
-.userNotificationDetails .row div:last-child {
- padding-left: 7px;
-}
-
-.userNotificationDetails .avatar img {
- height: 64px;
- width: 64px;
-}
-
-.userNotificationDetails h1 {
- font-size: 110%;
-}
-
-.userNotificationDetails section {
- border-top: 1px solid rgba(192, 192, 192, 1);
- padding-top: 7px;
-}
-
-.userNotificationDetails nav {
- text-align: center;
- border-top: 1px solid rgba(192, 192, 192, 1);
- margin-top: 7px;
- padding-top: 7px;
-}
-
-.userNotificationDetails ul {
- list-style-type: none;
- display: inline-block;
-}
-
-.userNotificationDetails li {
- cursor: pointer;
- border: 1px solid rgba(192, 192, 192, 1) !important;
- padding: 3px;
- display: inline-block;
-}
-
-#userNotificationDetailsLoading {
- background-color: rgba(255, 255, 255, .5);
- background-image: url('{@RELATIVE_WCF_DIR}icon/spinner1.svg');
- background-position: center center;
- background-size: 24px;
- background-repeat: no-repeat;
- position: absolute;
-}
-
-
-
-
-
-
-
-
-
-
-
-/* ToDo: Profile Button */
-
-#profileButtonContainer {
- text-align: center;
-}
-
-
-
-/* ############## ToDo: Action Proxy Loading ############## */
-
-#actionProxyLoading {
- 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);
-}
-
-#actionProxyLoading img {
- margin-bottom: 10px;
- height: 48px;
- width: 48px;
-}
-
-
-
-
-
-
-
-
-
-
-/* ToDo: User Comment List */
-
-.commentList {
- line-height: 1.5;
-}
-
-.commentList > li {
- border-top: 1px solid rgb(204, 204, 204);
-}
-
-.commentList > li:first-child {
- border-top-width: 0;
-}
-
-.commentList > li > div {
- padding: 7px;
- position: relative;
-}
-
-.commentList > li > div:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.commentList > li > div .userAvatar {
- margin-right: 10px;
- float: left;
-}
-
-.commentList > li:first-child:not([data-type="comment"]) > div .userAvatar {
- margin-right: 0;
- margin-left: 15px;
-}
-
-.commentList > li > div .userAvatar img {
- background-color: #fff;
- padding: 1px;
- border: 1px solid #ddd;
-}
-
-.commentList > li > div .userAvatar img:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.commentList > li > div > div {
- display: block;
- margin-left: 65px;
- position: relative;
-}
-
-.commentList > li > div > div small {
- margin-top: 3px;
- color: rgb(192, 192, 192);
- font-size: 85%;
-}
-
-
-
-/* ToDo: User Comment Content */
-
-.commentContent {
- margin-left: 50px;
-}
-
-.commentContent > div {
- padding-top: 7px;
- position: relative;
-}
-
-.commentContent > div > .commentResponseAdd {
- border-top: 1px solid rgb(204, 204, 204);
- background-color: rgba(0, 0, 0, .015);
- padding: 7px;
-}
-
-.commentContent > div > .commentResponseAdd:after {
- content: '';
- display: block;
- clear: both;
-}
-
-.commentContent > div > .commentResponseAdd > div .userAvatar {
- float: left;
- margin-right: 10px;
-}
-
-.commentContent > div > .commentResponseAdd > div .userAvatar img {
- background-color: #fff;
- padding: 1px;
- border: 1px solid #ddd;
-}
-
-.commentContent > div > .commentResponseAdd > div > div {
- margin-left: 50px;
- display: block;
-}
-
-.commentContent > .userName {
- margin-bottom: 3px;
- display: block;
-}
-
-.commentContent > .userName time {
- font-size: 85%;
- color: rgb(153, 153, 153);
-}
-
-
-
-/* Comment Response List */
-
-.commentResponseList > li {
- border-top: 1px solid rgb(204, 204, 204);
- background-color: rgba(0, 0, 0, .015);
-}
-
-.commentResponseList > li > div {
- padding: 7px;
- position: relative;
-}
-
-.commentResponseList > li:nth-child(2n+1) {
- /* auto-colorer for every 2nd row */
- background-color: rgba(0, 0, 0, .0);
-}
-
-
-
-/* Comment Options */
-
-.commentContent > .commentOptions,
-.commentResponseList > li .commentOptions {
- display: block;
- font-size: 85%;
- position: absolute;
- top: 2px;
- right: 2px;
-}
-
-.commentContent > .commentOptions > li,
-.commentResponseList > li .commentOptions > li {
- 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;
-}
-
-.commentContent:hover > .commentOptions > li,
-.commentResponseList > li:hover .commentOptions > li {
- opacity: 1;
-}
-
-.commentContent > .commentOptions > li a,
-.commentResponseList > li .commentOptions li a {
- color: rgb(153, 153, 153);
- cursor: pointer;
- display: inline-block;
- padding: 5px 10px;
-}
-
-
-
-/* Toggle Comments Links */
-
-.commentResponsePrevious,
-.commentResponseRecent {
- text-align: right;
- color: rgb(153, 153, 153);
- cursor: pointer;
- margin-top: 7px;
-}
-
-
-
-
-
-
-/* DEBUG ONLY - DO NOT TOUCH! */
-
-div.ajaxDebugMessage p {
- border-bottom: 1px solid rgb(192, 192, 192);
- margin: 0 3px;
- padding: 7px 0 3px 0;
-}
-
-div.ajaxDebugMessage p:first-child,
-div.ajaxDebugMessage p:last-child {
- border-bottom-width: 0;
- margin: 0;
- padding: 3px;
-}
-
-div.ajaxDebugMessage p:last-child {
- font-family: Monospace;
- font-size: 110%;
-}
-
-
-
-/* ############## ToDo ############## */
-
-/* Is that really still necessary? We wanted to support good browsers only */
-
-/* End clearfix */
-.ui-helper-zfix {
- opacity: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
-
-/* -- -- -- -- -- 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;
+}
+
+a.externalURL {
+ background-image: url('../../icon/externalURL1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 17px;
+}
+
+hr {
+ display: none;
+}
+
+.invisible {
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+}
+
+.separated {
+ margin-top: 13px;
+}
+
+::selection {
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
+ color: #300;
+ background-color: rgba(255, 170, 34, .7);
+}
+
+.hot {
+ color: #b00;
+}
+
+
+/* ############## Body ############## */
+
+/* Globals */
+
+body {
+ font-family: 'Trebuchet MS', Arial, sans-serif;
+ font-size: 80%;
+ color: #666;
+ line-height: 1;
+ background-color: #29374a;
+}
+
+/* Special */
+
+body#tplWCFInstaller {background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
+ background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
+
+ -webkit-background-size: 50px 50px;
+ -moz-background-size: 50px 50px;
+ -ms-background-size: 50px 50px;
+ -o-background-size: 50px 50px;
+ background-size: 50px 50px;
+
+ background-position: left top;
+ background-repeat: repeat;
+}
+
+
+
+/* ############## Page Header ############## */
+
+/* Globals */
+
+header.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%;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+ header.pageHeader {
+ min-width: 800px;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+ header.pageHeader {
+ min-width: auto;
+ }
+}
+
+
+
+/* -- -- -- Top Menu -- -- -- */
+
+/* Globals */
+
+header.pageHeader nav.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: 500;
+
+ -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: 0px;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+@-moz-keyframes glowButtons {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0px;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+@-ms-keyframes glowButtons {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0px;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowButtons {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0px;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+*/
+@keyframes glowButtons {
+ 0% {
+ opacity: 0;
+ top: -50px;
+ }
+ 60% {
+ top: 0px;
+ }
+ 80% {
+ top: -15px;
+ }
+ 100% {
+ opacity: 1;
+ top: auto;
+ }
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ header.pageHeader nav.topMenu {
+ min-width: 800px;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ header.pageHeader nav.topMenu {
+ min-width: auto;
+ }
+}
+
+header.pageHeader nav.topMenu:hover {
+ background-color: rgba(0, 0, 0, .5);
+}
+
+header.pageHeader nav.topMenu > div {
+ padding: 0 23px 0;
+}
+
+header.pageHeader nav.topMenu > div > ul {
+ /* none */
+}
+
+header.pageHeader nav.topMenu > div > ul > li {
+ cursor: pointer;
+ float: left;
+ position: relative;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Caption */
+
+nav.topMenu > div > ul > li {
+ border-width: 0 1px;
+ border-style: solid;
+ border-color: transparent;
+}
+
+nav.topMenu > div > ul > li,
+nav.topMenu > div > ul > li a {
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+ color: #69c;
+}
+
+nav.topMenu > div > ul > li:hover,
+nav.topMenu > div > ul > li:hover a {
+ border-color: rgba(255, 255, 255, .5);
+}
+
+nav.topMenu > div > ul > li .dropdownCaption,
+nav.topMenu > div > ul > li .dropdownCaption a {
+ padding-right: 5px;
+}
+
+nav.topMenu > div > ul > li:hover .dropdownCaption,
+nav.topMenu > div > ul > li:hover .dropdownCaption a {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
+ color: #fff;
+ background-color: rgba(0, 0, 0, .7);
+}
+
+nav.topMenu > div > ul > li > .dropdownCaption > .badge,
+nav.topMenu > div > ul > li:hover > .dropdownCaption > .badge {
+ font-size: 75%;
+ color: #369 !important;
+ margin: -3px 3px;
+ padding: 1px 3px;
+}
+
+nav.topMenu > div > ul > li > .dropdownCaption > img {
+ margin: -7px 0 -5px 0;
+}
+
+nav.topMenu > div > ul > li > span:not(.badge) {
+ padding: 6px;
+}
+
+nav.topMenu ul li .dropdownCaption {
+ cursor: pointer;
+ background-image: url('../../icon/dropdown2.svg');
+ background-position: 97% center;
+ background-repeat: no-repeat;
+ padding-right: 15px !important;
+ display: inline-block;
+}
+
+
+
+/* ToDo: Top-Menu Dropdown Tweaks */
+
+/* Auto-Opening Dropdowns */
+nav.topMenu ul li:hover .dropdownCaption ~ .dropdown {
+ border-color: rgba(255, 255, 255, .5);
+ background-color: rgba(0, 0, 0, .7);
+ height: auto !important;
+ left: -1px;
+}
+
+nav.topMenu ul li {
+ white-space: nowrap;
+}
+
+nav.topMenu ul li .dropdown {
+ border-width: 0 1px 1px 1px;
+ border-radius: 0 0 5px 5px;
+}
+
+nav.topMenu ul li .dropdown > :first-child {
+ border-top-width: 0;
+}
+
+
+
+/* -- -- -- Logo -- -- -- */
+
+header.pageHeader div#logo {
+ margin: 0 23px 0;
+ position: relative;
+ z-index: 1;
+}
+
+header.pageHeader div#logo h1 {
+ text-shadow: 0 -1px 0 #000;
+ color: #d8e7f5;
+ position: relative;
+ top: 70px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ header.pageHeader div#logo h1 {
+ font-size: 150%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ header.pageHeader div#logo h1 {
+ font-size: 175%;
+ }
+
+}
+
+header.pageHeader div#logo a:hover {
+ text-decoration: none !important;
+ color: #d8e7f5;
+}
+
+header.pageHeader div#logo img {
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+}
+
+header.pageHeader div#logo > a,
+header.pageHeader div#logo > div {
+ text-align: right;
+ display: block;
+ height: 120px;
+}
+
+
+
+/* -- -- -- Main Menu -- -- -- */
+
+nav.mainMenu {
+ /* This is the general toggle switch for main menu orientation (options: left|center|right) */
+ text-align: left;
+ margin: 0 30px;
+ display: block;
+ position: relative;
+}
+
+nav.mainMenu:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+nav.mainMenu ul {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: rgba(0, 0, 0, .4);
+ display: inline-block;
+}
+
+nav.mainMenu ul li {
+ display: inline-block;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ nav.mainMenu ul li {
+ font-size: 120%;
+ }
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.mainMenu ul li {
+ font-size: 150%;
+ }
+}
+
+nav.mainMenu ul li.activeMenuItem:first-child {
+ margin: -5px -5px 0 0;
+}
+
+nav.mainMenu ul li.activeMenuItem:last-child {
+ margin: -5px 0 0 -5px;
+}
+
+nav.mainMenu ul li:only-child,
+nav.mainMenu ul li.activeMenuItem:only-child {
+ margin: -5px 0 0;
+}
+
+nav.mainMenu ul li a {
+ font-weight: normal;
+ text-shadow: 0 -1px 0 #000;
+ color: #69c;
+ cursor: pointer;
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+
+ -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) {
+
+ nav.mainMenu ul li a {
+ padding: 10px 20px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.mainMenu ul li a {
+ padding: 10px 10px;
+ }
+
+}
+
+nav.mainMenu ul li a,
+nav.mainMenu ul li:hover a {
+ text-decoration: none;
+}
+
+nav.mainMenu ul li:not(.activeMenuItem):hover a {
+ color: #fff;
+}
+
+nav.mainMenu ul li.activeMenuItem a {
+ font-size: 110%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 #fff;
+ color: #369;
+ white-space: nowrap;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+
+ background-color: #e7f2fd;
+ background-image: -webkit-linear-gradient(#fff, #e7f2fd);
+ background-image: -moz-linear-gradient(#fff, #e7f2fd);
+ background-image: -ms-linear-gradient(#fff, #e7f2fd);
+ background-image: -o-linear-gradient(#fff, #e7f2fd);
+ background-image: linear-gradient(#fff, #e7f2fd);
+
+ z-index: 100;
+}
+
+
+
+/* ToDo: Special */
+
+nav.mainMenu ul li.activeMenuItem .badge {
+ font-size: 75% !important;
+ color: #fff;
+ 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 -- -- -- */
+
+nav.headerNavigation {
+ background-color: #e7f2fd;
+ border-bottom: 1px solid #bcd;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ margin: 0 23px;
+ display: block;
+ position: relative;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ nav.headerNavigation {
+ min-width: 800px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.headerNavigation {
+ min-width: auto;
+ }
+
+}
+
+nav.headerNavigation:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+nav.headerNavigation > div {
+ padding: 0 7px;
+}
+
+nav.headerNavigation > div:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+nav.headerNavigation ul,
+nav.footerNavigation ul {
+ display: block;
+}
+
+nav.headerNavigation ul li,
+nav.footerNavigation ul li {
+ cursor: pointer;
+ margin: 0 3px;
+ float: right;
+}
+
+nav.headerNavigation ul li a,
+nav.footerNavigation ul li a {
+ padding: 3px;
+ display: inline-block;
+}
+
+nav.headerNavigation ul li a:hover,
+nav.footerNavigation ul li a:hover {
+ background-color: #d8e7f5;
+}
+
+#tplLogin header.pageHeader nav.headerNavigation ul li.toBottomLink,
+#tplLogin footer.pageFooter nav.footerNavigation ul li.toTopLink {
+ /* Removes the to-bottom-link on the log-in page */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+
+
+/* ############## Main ############## */
+
+div.main {
+ background-color: #d8e7f5;
+ margin: 0 23px;
+ position: relative;
+
+ -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) {
+
+ div.main {
+ min-width: 800px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ div.main {
+ min-width: auto;
+ }
+
+}
+
+
+
+/* -- -- -- Content -- -- -- */
+
+section.content {
+ background-color: rgba(255, 255, 255, 1);
+ position: relative;
+ min-height: 100px;
+ z-index: 100;
+
+ -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 50pxrgba(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.content:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.left section.content {
+ border-left: 1px solid rgba(187, 204, 221, 1);
+ margin-left: 249px;
+}
+
+.right section.content {
+ border-right: 1px solid rgba(187, 204, 221, 1);
+ margin-right: 249px;
+}
+
+/* ToDo: The sidebar should be removed completely, when there is no content, as on the login-page and similar! Then this declaration would work as expected. */
+div.main > div section:only-child {
+ margin: 0 !important;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ section.content {
+ padding: 5px 40px 20px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ section.content {
+ padding: 5px 15px 20px;
+ }
+
+}
+
+section.content .content {
+ border: 1px solid #ccc;
+ background-color: rgba(0, 0, 0, .01);
+ padding: 13px 23px 23px;
+}
+
+
+
+/* -- -- -- Content Header & Footer -- -- -- */
+
+.contentHeader,
+.contentFooter {
+ margin-top: 15px;
+}
+
+
+
+/* ############## Sidebar ############## */
+
+/* Note that the sidebar may change to float soon! */
+
+/* Globals */
+
+aside.sidebar {
+ margin-bottom: -10px;
+ display: block;
+ width: 250px;
+ z-index: 80;
+
+ -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 aside.sidebar {
+ float: left;
+}
+
+.right aside.sidebar {
+ float: right;
+}
+
+
+
+/* -- -- -- Collapsible Sidebar -- -- -- */
+
+/* Collapsed */
+
+aside.collapsed {
+ width: 0;
+}
+
+.left aside.sidebar.collapsed + section.content {
+ border: 0;
+ margin-left: 0;
+}
+
+.right aside.sidebar.collapsed + section.content {
+ border: 0;
+ margin-right: 0;
+}
+
+
+
+/* -- -- -- Collapsible Button -- -- -- */
+
+/* Default (Right) */
+
+aside.sidebar .collapsibleSidebarButton {
+ cursor: pointer;
+ background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+ background-position: center 1%, center 99%;
+ background-size: 10px 10px, 10px 10px;
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 250px;
+ width: 20px;
+ height: 100%;
+ overflow: hidden;
+ z-index: 150;
+ opacity: .3;
+
+ -webkit-transition: left .1s ease;
+ -moz-transition: left .1s ease;
+ -ms-transition: left .1s ease;
+ -o-transition: left .1s ease;
+ transition: left .1s ease;
+}
+
+aside.sidebar .collapsibleSidebarButton span {
+ background-color: rgba(255, 255, 255, 1);
+ background-image: url('../../icon/arrowLeft1.svg');
+ 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;
+}
+
+/* Collapsed (Left) */
+
+aside.sidebar.collapsed .collapsibleSidebarButton {
+ background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+ left: 0;
+}
+
+aside.sidebar.collapsed .collapsibleSidebarButton span {
+ background-image: url('../../icon/arrowRight1.svg');
+}
+
+aside.sidebar .collapsibleSidebarButton:hover,
+aside.sidebar .collapsibleSidebarButton:hover span{
+ border-right: 1px solid rgba(187, 204, 221, .5);
+ background-color: rgba(252, 252, 252, 1);
+ opacity: 1;
+}
+
+
+
+/* -- -- -- Sidebar Menu -- -- -- */
+
+nav.sidebarMenu {
+ white-space: nowrap;
+}
+
+nav.sidebarMenu > div {
+ text-shadow: 0 1px 0 #fff;
+ color: #69c;
+ position: relative;
+ overflow: hidden;
+ z-index: 110;
+}
+
+.collapsed nav.sidebarMenu > div {
+ width: 0;
+}
+
+nav.sidebarMenu > div a:hover {
+ text-decoration: none !important;
+ color: #369;
+}
+
+nav.sidebarMenu > div h1 {
+ cursor: pointer;
+ font-weight: bold;
+ color: #369;
+ background-image: url('../../icon/arrowRight.svg');
+ background-position: 15px center;
+ background-size: 16px;
+ background-repeat: no-repeat;
+ margin-top: 5px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ nav.sidebarMenu > div h1 {
+ font-size: 130%;
+ padding: 7px 25px 7px 35px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.sidebarMenu > div h1 {
+ font-size: 150%;
+ padding: 7px 15px 7px 35px;
+ }
+
+}
+
+nav.sidebarMenu > div h1.activeMenuItem {
+ background-image: url('../../icon/arrowDown.svg');
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ nav.sidebarMenu > div ul li {
+ font-size: 110%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ nav.sidebarMenu > div ul li {
+ font-size: 120%;
+ }
+
+}
+
+nav.sidebarMenu > div ul li a {
+ text-shadow: 0 1px 0 #fff;
+ color: #69c;
+ padding: 5px 25px 7px 35px;
+ display: block;
+}
+
+nav.sidebarMenu > div ul li.activeMenuItem {
+ background-color: #fff;
+ 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);
+}
+
+nav.sidebarMenu > div ul li.activeMenuItem a {
+ font-weight: bold;
+ color: #369;
+}
+
+
+
+/* ############## Page Footer ############## */
+
+/* Globals */
+
+footer.pageFooter {
+ text-align: center;
+ padding: 0 23px;
+ clear: both;
+ position: relative;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ footer.pageFooter {
+ min-width: 800px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ footer.pageFooter {
+ min-width: auto;
+ }
+
+}
+
+footer.pageFooter:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+footer.pageFooter > div {
+ border-top: 1px solid #bcd;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ background-color: #e7f2fd;
+ padding: 0 7px;
+ clear: both;
+}
+
+footer.pageFooter > div:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+
+
+/* -- -- -- Copyright -- -- -- */
+
+footer.pageFooter .copyright {
+ padding-top: 20px;
+ display: inline-block;
+ min-height: 40px;
+}
+
+footer.pageFooter .copyright a {
+ text-shadow: 0 -1px 0 #000;
+}
+
+footer.pageFooter .copyright a:hover {
+ text-decoration: none;
+ color: #69c;
+}
+
+
+
+/* ############## Badges ############## */
+
+/* Globals */
+
+.badge {
+ font-size: 85%;
+ font-weight: bold;
+ text-shadow: none;
+ border-radius: 13px;
+ background-color: #fff;
+ margin-right: -3px;
+ margin-left: 3px;
+ padding: 2px 5px;
+ display: inline-block;
+ position: relative;
+ top: -1px;
+}
+
+/* Types */
+
+.badgeNote {
+ border: 1px solid #ccc;
+}
+
+.badgeInfo {
+ color: #68b;
+ border: 1px solid #9be;
+ background-color: #def;
+}
+
+.badgeSuccess {
+ color: #090;
+ border: 1px solid #0c0;
+ background-color: #efe;
+}
+
+.badgeWarning {
+ color: #990;
+ border: 1px solid #cc0;
+ background-color: #ffd;
+}
+
+.badgeError {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+}
+
+/* Buttons */
+
+.badgeButton,
+.clipboardEditor > ul > li {
+ cursor: pointer;
+ border-radius: 30px;
+ margin-right: 0;
+ margin-left: 0;
+ padding: 3px 10px 5px;
+ display: inline-block;
+}
+
+li.badgeButton,
+li > .badgeButton {
+ margin-top: 7px;
+ margin-right: 3px;
+ margin-left: 3px;
+ float: left;
+}
+
+.badgeButton,
+.badgeButton a,
+.clipboardEditor > ul > li > span {
+ text-decoration: none !important;
+}
+
+
+
+/* ############## ToDo: Dropdown Global ############## */
+
+.dropdown {
+ color: #fff;
+ border-width: 0 1px 1px 1px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, 0);
+ border-radius: 5;
+ background-color: rgba(0, 0, 0, 0);
+ margin-top: 25px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 0;
+ z-index: 500;
+ overflow: hidden;
+
+ -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 height .1s ease;
+ -moz-transition: color background height .1s ease;
+ -ms-transition: color background height .1s ease;
+ -o-transition: color background height .1s ease;
+ transition: color background height .1s ease;
+}
+
+/* Dropdown Items */
+
+.dropdown > li,
+.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;
+}
+
+.dropdown > div {
+ padding: 5px 7px;
+}
+
+.dropdown > :first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+.dropdown > :last-child {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.dropdown > :hover:not(ul):not(.pointer),
+.dropdown > .active {
+ color: #fff;
+ background-color: rgba(0, 0, 0, .5);
+}
+
+.dropdown > li.divider:not(:first-child) {
+ border-top: 1px solid rgba(255, 255, 255, .7);
+}
+
+.dropdown > li a {
+ text-decoration: none;
+ padding: 5px 7px;
+ display: inline-block;
+}
+
+.dropdown > li a:hover {
+ color: #fff !important;
+}
+
+
+
+/* ############## Headings ############## */
+
+/* -- -- -- Main Heading -- -- -- */
+
+.mainHeading {
+ margin-top: 25px;
+}
+
+.mainHeading:not(:first-of-type) {
+ margin-top: 30px;
+}
+
+.ui-dialog .mainHeading {
+ margin-top: 0;
+}
+
+.mainHeading > img {
+ float: left;
+}
+
+.mainHeading > hgroup {
+ display: block;
+ position: relative;
+ min-height: 48px;
+}
+
+.mainHeading > hgroup h1 {
+ font-weight: bold;
+ border-bottom: 1px solid #999;
+ padding: 1px 0 10px;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .mainHeading > img {
+ width: 48px;
+ height: 48px;
+ }
+
+ .mainHeading > img ~ hgroup {
+ padding-left: 60px;
+ }
+
+ .mainHeading > hgroup h1 {
+ font-size: 175%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .mainHeading > img {
+ width: 64px;
+ height: 64px;
+ }
+
+ .mainHeading > img ~ hgroup {
+ padding-left: 65px;
+ }
+
+ .mainHeading > hgroup h1 {
+ font-size: 200%;
+ }
+
+}
+
+.mainHeading > hgroup h1,
+.mainHeading > hgroup h1 a {
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ color: #666;
+}
+
+.mainHeading > hgroup h2 {
+ font-size: 100%;
+ font-weight: normal;
+ color: #999;
+ padding-top: 5px;
+}
+
+/* ToDo: Get rid of that ".overlay" class! */
+.overlay .mainHeading > hgroup h1,
+.overlay .mainHeading > hgroup h1 a,
+.overlay .mainHeading > hgroup h2 {
+ text-shadow: 0 -1px 0 #000;
+ color: #fff;
+}
+
+.mainHeading > hgroup p {
+ padding-top: 3px;
+}
+
+
+
+/* -- -- -- Sub Heading -- -- -- */
+
+.subHeading h1 {
+ font-size: 150%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 #fff;
+ color: #999;
+ border-bottom: 1px solid #ccc;
+ margin: 10px 0;
+ padding: 10px 0;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .subHeading h1 {
+ font-size: 150%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .subHeading h1 {
+ font-size: 175%;
+ }
+
+}
+
+.subHeading h2 {
+ font-weight: normal;
+ color: #aaa;
+}
+
+
+
+/* ############## Fieldsets ############## */
+
+fieldset {
+ border: 1px solid #ccc;
+ border-radius: 7px;
+ background-color: rgba(0, 0, 0, .015);
+ margin: 15px 0 0;
+ padding: 15px;
+}
+
+fieldset:last-child, fieldset:only-child {
+ margin-bottom: 7px !important;
+}
+
+/* experimental
+fieldset.topLink {
+ background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
+ background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
+ background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
+ background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
+ background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 50px);
+}
+*/
+
+fieldset legend {
+ color: #999;
+ padding: 0 7px 0;
+}
+
+fieldset legend ~ p {
+ margin-bottom: 14px;
+}
+
+fieldset p.description {
+ font-size: 90%;
+ color: #999;
+}
+
+
+
+/* ############## Tabbed Content ############## */
+
+/* Simple */
+
+dl {
+ margin-bottom: 7px;
+ position: relative;
+}
+
+dl > dt {
+ text-align: right;
+ color: #69c;
+ margin-top: 5px; /* not so nice */
+ 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 > dt > label {
+ margin-top: 5px;
+ display: block;
+}
+
+dl.disabled > dt {
+ color: #777;
+}
+
+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 > dd > small {
+ font-size: 85%;
+ color: #999;
+ margin: 3px 0 7px;
+ display: block;
+}
+
+/* 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 */
+
+dt.reversed {
+ text-align: left;
+ margin-top: 2px;
+ position: absolute;
+ width: auto;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ dt.reversed {
+ left: 270px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ dt.reversed {
+ left: 170px;
+ }
+
+}
+
+dt.reversed ~ dd > input[type='checkbox'] {
+ margin-left: 0;
+}
+
+
+
+/* ############## Forms ############## */
+
+/* Globals */
+
+label {
+ color: #69c;
+}
+
+/* Structure */
+
+.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 {
+ cursor: pointer;
+}
+
+input[type='text'],
+input[type='search'],
+input[type='email'],
+input[type='password'] {
+ padding: 5px 3px;
+}
+
+/* Normal State */
+
+input[type='text'],
+input[type='search'],
+input[type='email'],
+input[type='password'],
+textarea {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #999 #ccc #eee;
+ border-radius: 3px;
+ background-color: #fff;
+
+ -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='email']:hover,
+input[type='password']:hover,
+textarea:hover {
+ border: 1px solid #fa2;
+ background-color: #fff9f4;
+}
+
+/* Active & Focus State */
+
+input[type='text']:active,
+input[type='search']:active,
+input[type='email']:active,
+input[type='password']:active,
+textarea:active,
+input[type='text']:focus,
+input[type='search']:focus,
+input[type='email']:focus,
+input[type='password']:focus,
+textarea:focus {
+ border: 1px solid #fa2;
+ background-color: #fff9f4;
+ 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='readonly'],
+input[type='search'][readonly='readonly'],
+input[type='email'][readonly='readonly'],
+input[type='password'][readonly='readonly'],
+textarea[readonly='readonly'] {
+ border-style: solid;
+ border-color: #ccc #ddd #eee;
+ 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='disabled'],
+input[type='search'][disabled='disabled'],
+input[type='email'][disabled='disabled'],
+input[type='password'][disabled='disabled'],
+textarea[disabled='disabled'] {
+ border-style: solid;
+ border-color: rgba(0, 0, 0, .5);
+ background-color: rgba(255, 255, 255, .5);
+}
+
+
+
+/* -- -- -- Input Widths -- -- -- */
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ textarea {
+ width: 99%;
+ min-width: 300px;
+ }
+
+ .tiny {
+ width: 100px;
+ }
+
+ .short {
+ width: 10%;
+ min-width: 100px;
+ }
+
+ .medium {
+ width: 50%;
+ min-width: 200px;
+ }
+
+ .long {
+ width: 99%;
+ min-width: 300px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ textarea {
+ width: 99%;
+ min-width: auto;
+ }
+
+ .tiny {
+ width: 50px;
+ }
+
+ .short {
+ width: 10%;
+ min-width: 50px;
+ }
+
+ .medium {
+ width: 30%;
+ min-width: 100px;
+ }
+
+ .long {
+ width: 99%;
+ min-width: 150px;
+ }
+
+}
+
+.auto {
+ width: auto;
+}
+
+
+
+/* -- -- -- Form Errors -- -- -- */
+
+.formError input[type='text'],
+.formError input[type='search'],
+.formError input[type='email'],
+.formError input[type='password'],
+.formError textarea {
+ border-color: #f00;
+ background-color: #fff6f6;
+}
+
+
+
+/* -- -- -- Input Buttons & Dropdowns -- -- -- */
+
+/* Bounding Box */
+
+/* ToDo: Change the class-name! */
+.preInput {
+ display: table;
+ position: relative;
+ width: 100%;
+}
+
+.preInput > input,
+.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) {
+
+ .preInput > input,
+ .preInput > textarea {
+ min-width: 300px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .preInput > input,
+ .preInput > textarea {
+ min-width: 100px;
+ }
+
+}
+
+/* Dropdown Caption */
+
+.preInput .dropdownCaption {
+ letter-spacing: -1px;
+ cursor: pointer;
+ border-radius: 3px 0 0 3px;
+ padding-right: 5px;
+ display: table-cell;
+ width: 1%;
+ vertical-align: middle;
+}
+
+.preInput .dropdownCaption span {
+ margin-right: -1px;
+ padding-left: 5px;
+ white-space: nowrap;
+}
+
+.preInput .dropdownCaption span.active {
+ background-image: url('../../icon/dropdown1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 10px;
+}
+
+.preInput .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 ############## */
+
+/* Globals */
+
+.smallButtons {
+ list-style-type: none;
+ margin-right: -1px;
+ margin-bottom: -1px;
+}
+
+.smallButtons > li {
+ margin-left: -5px;
+ display: inline-block;
+}
+
+.smallButtons > li > a {
+ white-space: nowrap;
+ padding: 3px 7px;
+ display: block;
+}
+
+.smallButtons > li.separator > a {
+ border-right: 1px dotted #bcd;
+}
+
+.smallButtons > li:first-child > a {
+ border-top-left-radius: 13px;
+}
+
+.smallButtons > li:last-child > a {
+ border-bottom-right-radius: 7px;
+}
+
+
+
+/* ############## Large Buttons ############## */
+
+/* Colors are being taken from the global color styles */
+
+/* Globals */
+
+.largeButtons {
+ text-align: right;
+}
+
+.largeButtons > li {
+ display: inline;
+}
+
+.largeButtons > li > a img {
+ margin: -5px 1px -5px -5px;
+ vertical-align: middle;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .largeButtons > li > a img {
+ height: 24px;
+ width: 24px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .largeButtons > li {
+ font-size: 125%;
+ }
+
+ .largeButtons > li > a {
+ padding: 10px 15px !important;
+ white-space: nowrap;
+ }
+
+ .largeButtons > li > a img {
+ height: 32px;
+ width: 32px;
+ }
+
+}
+
+/* Normal State */
+
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.largeButtons > li > a {
+ font-size: 100%;
+ font-weight: bold;
+ border-radius: 30px;
+ margin: 3px 2px;
+ padding: 5px 13px;
+ display: inline-block;
+}
+
+
+
+/* ############## Border ############## */
+
+.border {
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-top: 15px;
+
+ -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);*/
+}
+
+.tabMenu ~ .border {
+ -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);*/
+}
+
+/* ToDo: Get rid of that ".overlay" class! */
+.border.overlay {
+ margin-top: 0 !important;
+}
+
+
+
+/* ############## Box Title ############## */
+
+/* Globals */
+
+.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%;
+}
+
+/* Headings */
+
+.boxTitle > hgroup {
+ text-shadow: 0 -1px 0 #000;
+ color: #fff;
+ padding: 7px;
+ display: inline-block;
+}
+
+.boxTitle > a,
+.boxTitle > hgroup a {
+ text-decoration: none;
+ color: #fff;
+}
+
+.boxTitle > hgroup h1 {
+ font-size: 120%;
+ display: inline-block;
+}
+
+.boxTitle > hgroup h2 {
+ font-size: 85%;
+ color: rgba(255, 255, 255, .9);
+ margin-top: 5px;
+}
+
+.boxTitle > hgroup .badge {
+ font-size: 75%;
+ color: #369;
+}
+
+/* Collapse Icon */
+
+.boxTitle > a {
+ margin: 7px 0 0 10px;
+ float: left;
+}
+
+.boxTitle > a img {
+ height: 16px;
+ width: 16px;
+}
+
+
+
+/* ############## Tab Menu ############## */
+
+/* Globals */
+
+.tabMenu {
+ text-shadow: 0 1px 0 #fff;
+ /* Toggle for tab menu orientation (options: left|center|right) */
+ text-align: center;
+ white-space: nowrap;
+ background-color: none;
+ margin-top: 15px;
+ padding: 0 5px;
+ display: block;
+ position: relative;
+}
+
+/* Tabs */
+
+.tabMenu li {
+ white-space: nowrap;
+ list-style: none;
+ display: inline-block;
+}
+
+.tabMenu li.ui-state-active {
+ margin-right: -7px;
+ margin-left: -7px;
+}
+
+.tabMenu li a {
+ text-decoration: none;
+ color: #999;
+ cursor: pointer;
+ border-width: 1px 1px 0 1px;
+ border-style: solid;
+ border-color: #ddd;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ background-color: rgba(0, 0, 0, .05);
+ display: inline-block;
+ position: relative;
+ bottom: -1px;
+ z-index: 10;
+
+ -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) {
+
+ .tabMenu li a {
+ font-size: 110%;
+ padding: 10px 15px 7px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .tabMenu li a {
+ font-size: 150%;
+ padding: 5px 10px;
+ max-width: 100px;
+ }
+
+}
+
+.tabMenu li:not(.ui-state-active) a:hover {
+ color: #666;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgb(255, 170, 34) rgb(255, 170, 34) rgb(204, 204, 204);
+ background-color: rgba(255, 249, 244, 1);
+}
+
+.tabMenu li:not(.ui-state-active) a:active,
+.tabMenu li:not(.ui-state-active) a:focus {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #fa2 #fa2 #ccc;
+
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.tabMenu li.ui-state-active a {
+ font-weight: bold;
+ color: #333 !important;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc;
+ border-bottom-color: #fff;
+ background-color: rgba(255, 255, 255, 1);
+ bottom: 0;
+ z-index: 30;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .tabMenu li.ui-state-active a {
+ font-size: 130%;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .tabMenu li.ui-state-active a {
+ font-size: 150%;
+ }
+
+}
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+ cursor: default;
+}
+
+/* Tab Menu Content */
+
+.tabMenuContent {
+ border: 1px solid #ccc;
+ background-color: rgba(255, 255, 255, 1);
+ margin-top: -1px;
+ padding: 15px 23px;
+ 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);
+}
+
+
+
+/* ############## Pill Menu ############## */
+
+/* Standard */
+
+.menu {
+ color: #666;
+ border-bottom: 1px solid #ccc;
+ margin: -15px -23px 0;
+ padding: 0 7px 10px;
+}
+
+.tabMenuContent > .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));
+}
+
+.menu ul {
+ /* Toggle switch for menu orientation (options: left|center|right) */
+ text-align: center;
+}
+
+.menu ul li {
+ white-space: nowrap;
+ margin-top: 10px;
+ display: inline-block;
+}
+
+.menu ul li a {
+ font-size: 85%;
+ text-shadow: 0 1px 0 #fff;
+ text-decoration: none;
+ color: #999;
+ 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;
+}
+
+.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);
+}
+
+.menu ul li:not(.ui-state-active) a:active,
+.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);
+}
+
+.menu ul li.ui-state-active a {
+ font-weight: bold;
+ text-shadow: 0 1px 0 #000;
+ color: #fff;
+ cursor: default;
+ border: 1px solid rgba(0, 0, 0, .2);
+ background-color: rgba(0, 0, 0, .5);
+}
+
+/* Special */
+
+.boxTitle > .menu {
+ color: #fff;
+ border: none;
+ margin: 0 !important;
+ padding: 6px 7px !important;
+}
+
+.boxTitle > .menu ul li {
+ margin-top: 0;
+}
+
+.boxTitle > .menu ul li a {
+ font-size: 85%;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 #000;
+ color: #eee !important;
+ border: 1px solid rgba(0, 0, 0, .3);
+ border-radius: 13px;
+ background-color: rgba(0, 0, 0, .1);
+ 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;
+}
+
+.boxTitle > .menu ul li a:hover {
+ color: #fff !important;
+ border: 1px solid rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, .2);
+}
+
+.boxTitle > .menu ul li a:active,
+.boxTitle > .menu ul li a:focus,
+.boxTitle > .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);
+}
+
+.boxTitle > .menu ul li a .badge {
+ color: #369 !important;
+}
+
+
+
+/* ############## Bread Crumbs ############## */
+
+/* Globals */
+
+.breadcrumbs {
+ text-align: left;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, 1);
+ margin-top: 15px;
+ display: block;
+ clear: both;
+ position: relative;
+ overflow: hidden;
+}
+
+.breadcrumbs ul li {
+ font-size: 85%;
+ list-style: none;
+ float: left;
+ position: relative;
+}
+
+/* Arrow */
+
+.breadcrumbs ul li > span {
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent #ccc;
+ display: block !important;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -4px;
+ right: -15px;
+ z-index: 100;
+}
+
+.breadcrumbs ul li > span > span {
+ text-indent: -9000px;
+ border-width: 15px;
+ border-style: solid none solid solid;
+ border-color: transparent transparent transparent #fff;
+ display: block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: -15px;
+ left: -16px;
+ overflow: hidden;
+}
+
+/* Caption */
+
+.breadcrumbs ul li a {
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ color: #999;
+ margin: 0;
+ padding: 5px 1px 5px 20px;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .breadcrumbs ul li a {
+ max-width: 250px;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .breadcrumbs ul li a {
+ max-width: 100px;
+ }
+
+}
+
+.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;
+}
+
+.breadcrumbs ul li:hover a {
+ color: #666;
+ background-color: #f9f9f9;
+ position: relative;
+ z-index: 90;
+}
+
+.breadcrumbs ul li:hover > span > span {
+ border-color: transparent transparent transparent #f9f9f9;
+}
+
+
+
+/* ############## 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 to the left */
+ border-top-left-radius: 5px;
+}
+
+thead th:last-child {
+ /* Rounded corners for the last table header cell to the left */
+ 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: #fff;
+ background-color: rgba(0, 0, 0, .2);
+}
+
+thead th a:active,
+thead th a:focus,
+thead th.active a {
+ color: #fff;
+ 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 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 last table cell to the left */
+ border-bottom-left-radius: 5px;
+}
+
+tbody tr:last-child td:last-child {
+ /* Rounded corners for the last table cell to the right */
+ border-bottom-right-radius: 5px;
+}
+
+tbody td {
+ background-color: #fcfdfe;
+ border-right: 1px solid rgba(255, 255, 255, .3);
+ padding: 5px;
+ /* This is experimental - only works in combination with "table-layout: fixed;" */
+ word-wrap: break-word;
+
+ -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;
+}
+
+/* ToDo: Table Header Specials */
+
+.menu ~ .border thead th:first-child {
+ border-top-left-radius: 0 !important;
+}
+
+.menu ~ .border thead th:last-child {
+ border-top-right-radius: 0 !important;
+}
+
+.menu ~ .border thead th:first-child,
+.boxTitle > table thead th:first-child {
+ border-top-left-radius: 0 !important;
+}
+
+.menu ~ .border thead th:last-child,
+.boxTitle > table thead th:last-child {
+ border-top-right-radius: 0 !important;
+}
+
+/* Table Checkboxes */
+
+table input[type='checkbox'] {
+ margin-top: -5px !important;
+ margin-bottom: -5px !important;
+}
+
+/* Table Column Formats */
+
+tr .columnMark,
+tr .columnStatus {
+ text-align: center;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+tr .columnStatus .badge {
+ margin-right: 1px !important;
+ margin-left: 1px !important;
+}
+
+tr .columnDigits,
+tr .columnID {
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+tr .columnIcon {
+ text-align: left;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+/* ToDo: does not function any more!
+tr .columnIcon img:not(.balloonTooltip):hover {
+ cursor: not-allowed;
+}
+*/
+
+tr .columnIcon img {
+ height: 16px;
+ width: 16px;
+}
+
+.bigList tr .columnIcon img {
+ height: 24px;
+ width: 24px;
+}
+
+tr .columnTitle {
+ font-weight: bold;
+ text-align: left;
+}
+
+tr .columnText {
+ font-weight: normal;
+ text-align: left;
+ max-width: 20%;
+}
+
+tr .columnDate,
+tr .columnRegistrationDate {
+ font-size: 85%;
+ text-align: right;
+ width: 1% !important;
+ white-space: nowrap;
+}
+
+tr .columnURL {
+ font-size: 85%;
+ text-align: left;
+}
+
+
+
+/* ############## Page Navigation ############## */
+
+/* ToDo */
+
+.pageNavigation ul li {
+ text-align: center;
+ min-width: 19px;
+}
+
+.pageNavigation ul li:not(href):not(.disabled) {
+ cursor: pointer;
+}
+
+.pageNavigation ul li:not(:first-child) {
+ margin-left: 3px;
+}
+
+.pageNavigation ul li {
+ border-radius: 3px;
+ display: inline-block;
+ position: relative;
+}
+
+.pageNavigation ul li.disabled {
+ cursor: not-allowed;
+ border: 1px solid rgba(0, 0, 0, .1) !important;
+ background-image: none !important;
+}
+
+.pageNavigation ul li img {
+ height: 16px;
+ width: 16px;
+}
+
+.pageNavigation ul li.skip {
+ padding: 2px 0 1px;
+ top: -1px;
+}
+
+.pageNavigation ul li a {
+ text-shadow: 0 1px 0 #fff;
+ text-decoration: none;
+ color: #999;
+ display: inline-block;
+}
+
+.pageNavigation ul li:not(.disabled):hover a {
+ color: #666;
+}
+
+.pageNavigation ul li:not(.skip) a {
+ padding: 3px 5px;
+}
+
+.pageNavigation ul li:active a,
+.pageNavigation ul li:focus a {
+ color: #333;
+}
+
+.pageNavigation ul li.active,
+.pageNavigation ul li.active:hover {
+ text-shadow: 0 1px 0 #000 !important;
+ color: #fff !important;
+ border: 1px solid rgba(0, 0, 0, .3) !important;
+
+ background-color: rgba(0, 0, 0, .5) !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 */
+
+.pageNavigation ul li.children {
+ position: relative;
+}
+
+.pageNavigation ul li.children > a {
+ margin-right: -30px;
+ position: relative;
+ z-index: 100;
+}
+
+.pageNavigation ul li.children input {
+ width: 28px;
+ height: 9px;
+}
+
+.pageNavigation ul li.children img {
+ height: 9px;
+ width: 7px;
+}
+
+.pageNavigation ul li.children .dropdown {
+ text-align: left;
+ border-color: transparent;
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, .7);
+ margin-top: 28px;
+ margin-left: -2px;
+ 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;
+}
+
+.pageNavigation ul li.children:hover .dropdown {
+ border-color: rgba(255, 255, 255, .7);
+ height: auto;
+ overflow: visible;
+ opacity: 1;
+}
+
+.pageNavigation ul li.children .dropdown ul {
+ padding: 0 5px 5px 2px;
+ display: block;
+}
+
+.pageNavigation ul li.children .dropdown ul li {
+ margin-top: 5px;
+ margin-left: 3px;
+}
+
+/* Pointer */
+
+.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;
+}
+
+.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;
+}
+
+/* ############## System Notifications ############## */
+
+/* Globals */
+
+.info,
+.error,
+.success,
+.warning {
+ text-shadow: 0 1px 0 #fff;
+ line-height: 1.5;
+ border-radius: 7px;
+ margin-top: 15px;
+ padding: 7px 15px 7px 50px;
+}
+
+/* Types */
+
+.info {
+ color: #68b;
+ border: 1px solid #9be;
+ background-color: #def;
+ background-image: url('../../icon/systemInfo.svg');
+ background-size: 24px;
+ background-position: 13px center;
+ background-repeat: no-repeat;
+}
+
+.success {
+ color: #090;
+ border: 1px solid #0c0;
+ background-color: #efe;
+ background-image: url('../../icon/systemSuccess.svg');
+ background-size: 24px;
+ background-position: 13px center;
+ background-repeat: no-repeat;
+}
+
+.warning {
+ color: #990;
+ border: 1px solid #cc0;
+ background-color: #ffd;
+ background-image: url('../../icon/systemWarning.svg');
+ background-size: 24px;
+ background-position: 13px center;
+ background-repeat: no-repeat;
+}
+
+.error {
+ color: #c00;
+ border: 1px solid #f99;
+ background-color: #fee;
+ background-image: url('../../icon/systemError.svg');
+ background-size: 24px;
+ background-position: 13px center;
+ background-repeat: no-repeat;
+}
+
+/* Inline Errors */
+
+.innerError {
+ text-shadow: 0 1px 0 #fff;
+ line-height: 1.5;
+ color: #c00;
+ border: 1px solid #ccc;
+ border-radius: 7px;
+ background-color: #fff;
+ 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 should support this from version 10 on */
+ 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);
+}
+
+.innerError .pointer {
+ border-width: 0 7px 7px;
+ border-style: solid;
+ border-color: #ccc transparent;
+ display: inline-block !important;
+ width: 0;
+ position: absolute;
+ top: -7px !important;
+ left: 10%;
+}
+
+.innerError .pointer span {
+ border-width: 0 5px 5px;
+ border-style: solid;
+ border-color: #fff transparent;
+ display: inline-block;
+ width: 0;
+ position: absolute;
+ top: 2px;
+ left: -5px;
+}
+
+/* Special */
+
+.preInput ~ .innerError .pointer {
+ right: 10%;
+ left: auto;
+}
+
+
+
+
+
+
+
+
+.wcfDimensions {
+ display: inline-block;
+}
+
+
+
+
+
+/* ############## ToDo: Overlay ############## */
+
+.ui-dialog,
+.wcfDialogContainer {
+ 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) {
+
+ .ui-dialog,
+ .wcfDialogContainer {
+ min-width: 500px !important;
+ max-width: 780px !important;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .ui-dialog,
+ .wcfDialogContainer {
+ min-width: 200px !important;
+ max-width: 380px !important;
+ }
+
+}
+
+/* Dialog Titlebar */
+
+.ui-dialog-titlebar,
+.wcfDialogTitlebar {
+ 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;*/
+}
+
+.ui-dialog-title,
+.wcfDialogTitle {
+ font-size: 170%;
+ font-weight: bold;
+ text-shadow: 0 -1px 0 #000;
+ color: rgba(255, 255, 255, 1);
+ display: block;
+}
+
+a.ui-dialog-titlebar-close,
+a.wcfDialogCloseButton {
+ 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;
+}
+
+a.ui-dialog-titlebar-close span,
+a.wcfDialogCloseButton span {
+ /* Removes the button-caption */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+/* Dialog Content */
+
+.ui-dialog-content,
+.wcfDialogContent {
+ background-color: #333;
+ overflow: auto;
+}
+
+.ui-dialog > .ui-dialog-content,
+.wcfDialogContainer > .wcfDialogContent {
+ border-radius: 7px;
+ padding: 0;
+ /*width: auto !important;*/
+}
+
+.ui-dialog-titlebar ~ .ui-dialog-content,
+.wcfDialogTitlebar ~ .wcfDialogContent {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-bottom-left-radius: 7px;
+ border-bottom-right-radius: 7px;
+ padding: 10px 20px 20px;
+}
+
+/* ToDo: Installation */
+
+.ui-dialog-content > div {
+ height: 100%;
+ max-width: 600px;
+}
+
+.ui-dialog-content > div fieldset {
+ border-color: #666;
+ background-color: rgba(0, 0, 0, .1);
+}
+
+.ui-dialog-content > div p.error {
+ border: 1px solid #ed1c24;
+ border-radius: 5px;
+ background-color: #fdd;
+ margin-bottom: 15px;
+ padding: 7px;
+}
+
+/* Special */
+
+div#ajaxExceptionStacktrace {
+ white-space: nowrap;
+ overflow: scroll;
+ overflow-y: hidden;
+}
+
+div#ajaxExceptionStacktrace {
+ font-family: monospace;
+ font-size: 90%;
+ line-height: 1.2;
+ border: 1px solid #ccc;
+ padding: 3px;
+}
+
+/* Login Box */
+
+/* Note: Do not use the class ".loginBox" to style the box! */
+
+#loginBox dl {
+ margin-right: 20px;
+}
+
+#loginBox dl dt,
+#loginBox dl dd,
+#loginBox dl label {
+ color: #fff;
+}
+
+
+
+/* ############## ToDo: Overlay Spinner ############## */
+
+.ui-widget-overlay,
+.wcfDialogOverlay {
+ background-color: #000;
+ opacity: .5;
+ position: fixed;
+ width: 100% !important;
+ top: 0;
+ left: 0;
+}
+
+
+/* ToDo: What is that and change that class-name! */
+.overlayLoading {
+ background-color: #fff;
+ background-image: url('../../icon/spinner1.svg');
+ background-position: center center;
+ background-size: 32px;
+ background-repeat: no-repeat;
+}
+
+
+
+
+
+
+
+/* ############## GUI Widgets ############## */
+
+/* -- -- -- Balloon Tooltips -- -- -- */
+
+#balloonTooltip {
+ font-size: .85em;
+ color: #fff;
+ border: 1px solid rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ padding: 5px 10px 7px;
+ max-width: 300px;
+ z-index: 900;
+
+ -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);
+}
+
+a.balloonTooltip,
+a .balloonTooltip,
+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;
+}
+
+#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%;
+}
+
+#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: Clipboard Editor ############## */
+
+/* Globals */
+
+.clipboardEditor > ul {
+ font-size: .85em;
+ margin: 6px 3px 0;
+ display: block;
+ position: relative;
+ float: left;
+}
+
+.clipboardEditor > ul > li > span {
+ background-image: url('../../icon/dropdown1.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ padding-right: 12px;
+ display: inline-block;
+}
+
+/* ToDo: Dropdown (merge with other dropdown-declarations!) */
+
+.clipboardEditor ul > li > ol {
+ border: 1px solid rgba(255, 255, 255, .7);
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .7);
+ margin-top: 23px;
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ -webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -ms-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ -o-box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+ box-shadow: 0 1px 7px rgba(0, 0, 0, .5);
+}
+
+.clipboardEditor ul > li > ol > li {
+ text-shadow: none;
+ color: #ccc;
+ cursor: pointer;
+ padding: 5px 7px;
+
+ -webkit-transition: 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;
+}
+
+.clipboardEditor ul > li > ol > li:first-child {
+ border-top-width: 0;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+}
+
+.clipboardEditor ul > li > ol > li:last-child {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+.clipboardEditor ul > li > ol > li:hover {
+ color: #fff;
+ background-color: rgba(0, 0, 0, .5);
+}
+
+
+
+/* ############## Global Button Color & Effect Library ############## */
+
+/* Normal State */
+button,
+input[type='reset'],
+input[type='submit'],
+input[type='button'],
+.smallButtons > li > a,
+.largeButtons > li > a,
+.badgeButton,
+.pageNavigation ul li:not(.children),
+.clipboardEditor > ul > li,
+.preInput .dropdownCaption {
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ color: #999;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc #bbb #aaa;
+
+ 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-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 */
+
+button:hover,
+input[type='reset']:hover,
+input[type='submit']:hover,
+input[type='button']:hover,
+input[type='button'].default:hover,
+input[type='button'].default:hover,
+.smallButtons > li > a:hover,
+.smallButtons > li.default > a:hover,
+.largeButtons > li > a:hover,
+.largeButtons > li.default > a:hover,
+.badgeButton:hover,
+.pageNavigation ul li:not(.disabled):not(.children):hover,
+.clipboardEditor > ul > li:hover,
+.preInput:hover .dropdownCaption {
+ color: #666;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ffc053 #fa2 #fc9e07;
+
+ background-color: #fff9f4;
+ background-image: -webkit-linear-gradient(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 */
+
+button:focus,
+input[type='reset']:focus,
+input[type='submit']:focus,
+input[type='button']:focus,
+input[type='button'].default:focus,
+input[type='button'].default:focus,
+.smallButtons > li > a:focus,
+.smallButtons > li.default > a:focus,
+.largeButtons > li > a:focus,
+.largeButtons > li.default > a:focus,
+.badgeButton:focus,
+.pageNavigation ul li:not(.disabled):not(.children):active,
+.clipboardEditor > ul > li:focus,
+.preInput .dropdownCaption:focus,
+button:active,
+input[type='reset']:active,
+input[type='submit']:active,
+input[type='button']:active,
+input[type='button'].default:active,
+.smallButtons > li > a:active,
+.smallButtons > li.default > a:active,
+.largeButtons > li a:active,
+.largeButtons > li.default > a:active,
+.badgeButton:active,
+.pageNavigation ul li:not(.disabled):not(.children):focus,
+.clipboardEditor > ul > li:active,
+.preInput .dropdownCaption:active {
+ color: #333;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #fc9e07 #fa2 #ffc053;
+
+ background-color: #fff9f4;
+ background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+ background-image: linear-gradient(bottom, rgba(255, 255, 255, 1), rgba(255, 237, 217, 1) 2px, rgba(255, 229, 200, 1));
+
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+/* Default State Glow */
+
+@-webkit-keyframes glowButtons {
+ 0% {
+ -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+@-moz-keyframes glowButtons {
+ 0% {
+ -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+@-ms-keyframes glowButtons {
+ 0% {
+ -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -ms-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowButtons {
+ 0% {
+ -o-box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ -o-box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+*/
+@keyframes glowButtons {
+ 0% {
+ box-shadow: 0 0 13px rgba(102, 153, 204, .5);
+ }
+ 100% {
+ box-shadow: 0 0 13px rgba(102, 153, 204, .1);
+ }
+}
+
+/* Default Normal State */
+
+button.default,
+input[type='submit'],
+input[type='button'].default,
+.smallButtons > li.default > a,
+.largeButtons > li.default > a {
+ color: #69c;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #7aade0 #69c #5285b8;
+
+ background-color: #e7f2fd;
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -ms-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+ background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(233, 244, 255, 1) 2px, rgba(216, 231, 245, 1));
+
+ -webkit-box-shadow: 0 0 10px #369;
+ -moz-box-shadow: 0 0 10px #369;
+ -ms-box-shadow: 0 0 10px #369;
+ -o-box-shadow: 0 0 10px #369;
+ box-shadow: 0 0 10px #369;
+
+ -webkit-animation-name: 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 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+@-moz-keyframes glowButtonsHover {
+ 0% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+@-ms-keyframes glowButtonsHover {
+ 0% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -ms-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+/* disabled to ease rendering work for Opera
+@-o-keyframes glowButtonsHover {
+ 0% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ -o-box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+*/
+@keyframes glowButtonsHover {
+ 0% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .3);
+ }
+ 100% {
+ box-shadow: 0 0 13px rgba(255, 153, 51, .1);
+ }
+}
+
+/* Default Hover State */
+
+button.default:hover,
+input[type='submit']:hover,
+input[type='button'].default:hover,
+.largeButtons > li.default > a:hover,
+.smallButtons > li.default > a:hover {
+ -webkit-box-shadow: 0 0 10px #fa2;
+ -moz-box-shadow: 0 0 10px #fa2;
+ -ms-box-shadow: 0 0 10px #fa2;
+ -o-box-shadow: 0 0 10px #fa2;
+ box-shadow: 0 0 10px #fa2;
+
+ -webkit-animation-name: 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 */
+
+button.default:focus,
+input[type='submit']:focus,
+input[type='button'].default:focus,
+.smallButtons > li.default > a:active,
+.largeButtons > li.default > a:active,
+button.default:active,
+input[type='submit']:active,
+input[type='button'].default:active,
+.smallButtons > li.default > a:active,
+.largeButtons > li.default > a:active {
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
+
+ -webkit-animation-name: 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;
+}
+
+/* Disabled State */
+
+button[disabled='disabled'],
+input[disabled='disabled'],
+input[type='button'][disabled='disabled'],
+.smallButtons > li.disabled > a,
+.largeButtons > li.disabled > a {
+ color: #999;
+ cursor: default;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #ccc #bbb #aaa;
+}
+
+
+
+/* ############## ACP Package List ############## */
+
+/* -- -- -- Package Standalone -- -- -- */
+
+/* Globals */
+
+.infoPackageStandalone {
+ position: relative;
+}
+
+.infoPackageStandalone img.packageStandaloneIcon {
+ position: absolute;
+ top: 30px;
+ left: 25px;
+ width: 96px;
+ height: 96px;
+}
+
+.infoPackageStandalone div {
+ margin-bottom: -15px;
+ margin-left: 30px;
+}
+
+.infoPackageStandalone footer {
+ position: relative;
+ right: -15px;
+ bottom: -15px;
+}
+
+/* -- -- -- Package Plugin -- -- -- */
+
+/* Globals */
+
+.infoPackagePlugin {
+ text-align: center;
+ border: 1px solid rgba(204, 204, 204, 1);
+ border-radius: 7px;
+ background-color: rgba(0, 0, 0, .015);
+ margin-top: 15px;
+ 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;
+}
+
+.infoPackagePlugin a {
+ text-decoration: none;
+}
+
+.infoPackagePlugin > div > a {
+ color: #999;
+ background-size: 96px;
+ background-position: center center;
+ background-repeat: no-repeat;
+ margin: 1px;
+ display: block;
+ position: relative;
+ width: 148px;
+ height: 148px;
+}
+
+.infoPackagePlugin:hover > div > a {
+ color: #666;
+}
+
+.infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
+ font-size: 100%;
+ font-weight: bold;
+ text-shadow: 0 1px 0 #fff;
+ word-wrap: break-word;
+ 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));
+
+ margin: 0 -1px;
+ padding: 3px 1px;
+ display: block;
+ position: relative;
+ z-index: 100;
+}
+
+.infoPackagePlugin footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+}
+
+.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;
+}
+
+.infoPackagePlugin:hover > div > a > small {
+ background-color: rgba(255, 255, 255, .9);
+ z-index: 10;
+ opacity: 1;
+}
+
+/* SmallButtonBar */
+
+.infoPackagePlugin .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;
+}
+
+.infoPackagePlugin .smallButtonBar li {
+ display: inline;
+ position: relative;
+}
+
+.infoPackagePlugin .smallButtonBar li span {
+ /* Removes the button-caption */
+ position: absolute;
+ left: -9000px;
+ top: -9000px;
+ width: 0;
+}
+
+
+
+/* -- -- -- Package Footers -- -- -- */
+
+.infoPackageStandalone footer nav,
+.infoPackagePlugin footer nav {
+ text-align: right;
+}
+
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
+
+ .infoPackageStandalone footer nav,
+ .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;
+ }
+
+ .infoPackageStandalone:hover footer nav,
+ .infoPackagePlugin:hover footer nav {
+ opacity: 1;
+ }
+
+}
+
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
+
+ .infoPackageStandalone footer nav,
+ .infoPackagePlugin footer nav,
+ .infoPackageStandalone:hover footer nav,
+ .infoPackagePlugin:hover footer nav {
+ opacity: 1;
+ }
+
+}
+
+
+
+
+
+
+
+
+
+
+/* ############## CSS Experiments (active) ############## */
+
+
+
+/* ToDo: User Panel
+
+this is taken from "userPanel.tpl" (inline-css)
+will change soon!
+
+ CSS should be moved to a user css-file, whereas many parts may be left out except for the following ones:
+ - [.scrollableContainer] Don't touch!
+ - [.scrollableItems] Keep the inflated width, you may lower its number but it must be incredible bloated
+ - [.scrollableItems > div] Must be a fixed-width float, otherwise it would break the scrollable class
+ from jQueryTools. Do NOT use css-tables or [display: inline-block] as it won't work with the whole magic
+
+*/
+
+/* ToDo: User Notifications */
+
+.userNotificationContainer {
+ width: 240px;
+ z-index: 510; /* adjust to any value you like, it *MUST* be higher than 'header.pageHeader nav.topMenu' */
+ overflow: hidden;
+}
+
+/* ToDo: Scrollable Container */
+
+.scrollableContainer {
+ position: relative;
+ width: 250px;
+ overflow: hidden;
+}
+
+.scrollableContainer .scrollableItems {
+ position: relative;
+ width: 20000em;
+}
+
+.scrollableContainer .scrollableItems > div {
+ border-right: 1px solid rgba(192, 192, 192, 1);
+ float: left;
+ width: 250px;
+}
+
+.scrollableContainer {
+ font-size: 90%;
+}
+
+.scrollableContainer > div:first-child ul {
+ margin: 0;
+ padding: 0;
+}
+
+.scrollableContainer > div:first-child li {
+ border-top: 1px solid rgba(192, 192, 192, 1);
+ cursor: pointer;
+ padding: 7px;
+}
+
+.scrollableContainer > div:first-child li:first-child {
+ border-top-width: 0;
+}
+
+div.scrollableContainer > div:first-child p {
+ padding: 0 1px;
+}
+
+/* ToDo: User Notification Details */
+
+.userNotificationDetails {
+ padding: 7px;
+ width: 236px;
+}
+
+.userNotificationDetails header {
+ margin-bottom: 7px;
+ display: table;
+ width: 100%;
+}
+
+.userNotificationDetails .row {
+ display: table-row;
+}
+
+.userNotificationDetails .row div {
+ text-align: center;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.userNotificationDetails .row div:first-child {
+ width: 64px;
+}
+
+.userNotificationDetails .row div:last-child {
+ padding-left: 7px;
+}
+
+.userNotificationDetails .avatar img {
+ height: 64px;
+ width: 64px;
+}
+
+.userNotificationDetails h1 {
+ font-size: 110%;
+}
+
+.userNotificationDetails section {
+ border-top: 1px solid rgba(192, 192, 192, 1);
+ padding-top: 7px;
+}
+
+.userNotificationDetails nav {
+ text-align: center;
+ border-top: 1px solid rgba(192, 192, 192, 1);
+ margin-top: 7px;
+ padding-top: 7px;
+}
+
+.userNotificationDetails ul {
+ list-style-type: none;
+ display: inline-block;
+}
+
+.userNotificationDetails li {
+ cursor: pointer;
+ border: 1px solid rgba(192, 192, 192, 1) !important;
+ padding: 3px;
+ display: inline-block;
+}
+
+#userNotificationDetailsLoading {
+ background-color: rgba(255, 255, 255, .5);
+ background-image: url('{@RELATIVE_WCF_DIR}icon/spinner1.svg');
+ background-position: center center;
+ background-size: 24px;
+ background-repeat: no-repeat;
+ position: absolute;
+}
+
+
+
+
+
+
+
+
+
+
+
+/* ToDo: Profile Button */
+
+#profileButtonContainer {
+ text-align: center;
+}
+
+
+
+/* ############## ToDo: Action Proxy Loading ############## */
+
+#actionProxyLoading {
+ 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);
+}
+
+#actionProxyLoading img {
+ margin-bottom: 10px;
+ height: 48px;
+ width: 48px;
+}
+
+
+
+
+
+
+
+
+
+
+/* ToDo: User Comment List */
+
+.commentList {
+ line-height: 1.5;
+}
+
+.commentList > li {
+ border-top: 1px solid rgb(204, 204, 204);
+}
+
+.commentList > li:first-child {
+ border-top-width: 0;
+}
+
+.commentList > li > div {
+ padding: 7px;
+ position: relative;
+}
+
+.commentList > li > div:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.commentList > li > div .userAvatar {
+ margin-right: 10px;
+ float: left;
+}
+
+.commentList > li:first-child:not([data-type="comment"]) > div .userAvatar {
+ margin-right: 0;
+ margin-left: 15px;
+}
+
+.commentList > li > div .userAvatar img {
+ background-color: #fff;
+ padding: 1px;
+ border: 1px solid #ddd;
+}
+
+.commentList > li > div .userAvatar img:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.commentList > li > div > div {
+ display: block;
+ margin-left: 65px;
+ position: relative;
+}
+
+.commentList > li > div > div small {
+ margin-top: 3px;
+ color: rgb(192, 192, 192);
+ font-size: 85%;
+}
+
+
+
+/* ToDo: User Comment Content */
+
+.commentContent {
+ margin-left: 50px;
+}
+
+.commentContent > div {
+ padding-top: 7px;
+ position: relative;
+}
+
+.commentContent > div > .commentResponseAdd {
+ border-top: 1px solid rgb(204, 204, 204);
+ background-color: rgba(0, 0, 0, .015);
+ padding: 7px;
+}
+
+.commentContent > div > .commentResponseAdd:after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
+.commentContent > div > .commentResponseAdd > div .userAvatar {
+ float: left;
+ margin-right: 10px;
+}
+
+.commentContent > div > .commentResponseAdd > div .userAvatar img {
+ background-color: #fff;
+ padding: 1px;
+ border: 1px solid #ddd;
+}
+
+.commentContent > div > .commentResponseAdd > div > div {
+ margin-left: 50px;
+ display: block;
+}
+
+.commentContent > .userName {
+ margin-bottom: 3px;
+ display: block;
+}
+
+.commentContent > .userName time {
+ font-size: 85%;
+ color: rgb(153, 153, 153);
+}
+
+
+
+/* Comment Response List */
+
+.commentResponseList > li {
+ border-top: 1px solid rgb(204, 204, 204);
+ background-color: rgba(0, 0, 0, .015);
+}
+
+.commentResponseList > li > div {
+ padding: 7px;
+ position: relative;
+}
+
+.commentResponseList > li:nth-child(2n+1) {
+ /* auto-colorer for every 2nd row */
+ background-color: rgba(0, 0, 0, .0);
+}
+
+
+
+/* Comment Options */
+
+.commentContent > .commentOptions,
+.commentResponseList > li .commentOptions {
+ display: block;
+ font-size: 85%;
+ position: absolute;
+ top: 2px;
+ right: 2px;
+}
+
+.commentContent > .commentOptions > li,
+.commentResponseList > li .commentOptions > li {
+ 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;
+}
+
+.commentContent:hover > .commentOptions > li,
+.commentResponseList > li:hover .commentOptions > li {
+ opacity: 1;
+}
+
+.commentContent > .commentOptions > li a,
+.commentResponseList > li .commentOptions li a {
+ color: rgb(153, 153, 153);
+ cursor: pointer;
+ display: inline-block;
+ padding: 5px 10px;
+}
+
+
+
+/* Toggle Comments Links */
+
+.commentResponsePrevious,
+.commentResponseRecent {
+ text-align: right;
+ color: rgb(153, 153, 153);
+ cursor: pointer;
+ margin-top: 7px;
+}
+
+
+
+
+
+
+/* DEBUG ONLY - DO NOT TOUCH! */
+
+div.ajaxDebugMessage p {
+ border-bottom: 1px solid rgb(192, 192, 192);
+ margin: 0 3px;
+ padding: 7px 0 3px 0;
+}
+
+div.ajaxDebugMessage p:first-child,
+div.ajaxDebugMessage p:last-child {
+ border-bottom-width: 0;
+ margin: 0;
+ padding: 3px;
+}
+
+div.ajaxDebugMessage p:last-child {
+ font-family: Monospace;
+ font-size: 110%;
+}
+
+
+
+/* ############## ToDo ############## */
+
+/* Is that really still necessary? We wanted to support good browsers only */
+
+/* End clearfix */
+.ui-helper-zfix {
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+
+/* -- -- -- -- -- EOF -- -- -- -- -- */
<!-- Stylesheets -->
<style type="text/css">
- @import url("{@RELATIVE_WCF_DIR}acp/style/style.css") screen;
+ @import url("{@RELATIVE_WCF_DIR}acp/style/wcf.css") screen;
{*
@import url("{@RELATIVE_WCF_DIR}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
<!-- /HEADER -->
<!-- MAIN -->
- <div id="main" class="main left"><!-- ToDo: We now use a floating sidebar. Thus we need some trigger for its orientation, which has to reside at least one level above the sidebar. This trigger should be set either to "left" or "right", although "top" or "bottom" would also be nice (not for the ACP but maybe in other applications like the gallery or so). Also for 2 sidebars we can mix the trigger values, support is already here!!! -->
+ <div id="main" class="main left"><!-- ToDo: We now use a floated sidebar. Thus we need some trigger for its orientation, which has to reside at least one level above the sidebar. This trigger should be set either to "left" or "right", although "top" or "bottom" would also be nice (not for the ACP but maybe in other applications like the gallery or so). Also for 2 sidebars we can mix the trigger values, support is already here!!! -->
<div>
{hascontent}
<!-- SIDEBAR -->
projects / GitHub / WoltLab / WCF.git / commitdiff