// ************************************** // customizable styles which are mixed in // ************************************** // GENERAL .image_logo { background: url(/images/) no-repeat } .image_logo_hover { background: url(/images/.png) no-repeat } .image_logo_active { background: url(/images/.png) no-repeat } // TABS .tabbg { background: url(/images/tab_background.png) repeat-x } .tabbg_active { background: url(/images/tab_background_active.png) repeat-x } .tabbg_passive { background: url(/images/tab_background_passive.png) repeat-x } @colorReadLearnBackground: #ffbb00; @colorReadLearn: #fff; @colorReadLearnPassiveBackground: #ccc; @colorReadLearnPassive: #000; @colorReadLearnDisabledBackground: #ccc; @colorReadLearnDisabled: #000; .learnbg { background: @colorReadLearnBackground; color: @colorReadLearn; } .learnbg_passive { background: @colorReadLearnPassiveBackground; color: @colorReadLearnPassive; } //BUTTONS .icon_hyperlinks_button { background: url(/images/popups/hyperlinks_button.png) no-repeat top left } .icon_events_button { background: url(/images/popups/veranstaltungen_button.png) no-repeat top left } .icon_products_button { background: url(/images/popups/pauxprodukte_button.png) no-repeat top left } .icon_references_button { background: url(/images/popups/fundstellen_button.png) no-repeat top left } .icon_persons_button { background: url(/images/popups/personen_button.png) no-repeat top left } .icon_media_button { background: url(/images/popups/dateien_button.png) no-repeat top left } // ICONS .icon_hyperlinks { background: url(/images/popups/hyperlinks.png) no-repeat bottom right } .icon_sharing { background: url(/images/popups/sharing.png) no-repeat bottom right } .icon_sharinglinks { background: url(/images/popups/sharing_link.png) no-repeat bottom right } .icon_hyperlink_url {background: url(/images/popups/url.png) no-repeat bottom right } .icon_events { background: url(/images/popups/veranstaltungen.png) no-repeat bottom right } .icon_products { background: url(/images/popups/pauxprodukte.png) no-repeat bottom right } .icon_persons { background: url(/images/popups/personen.png) no-repeat bottom right } .icon_media { background: url(/images/popups/dateien.png) no-repeat bottom right } .icon_info { background: url(/images/popups/info.png) no-repeat bottom right } .icon_info_active { background: url(/images/popups/info_popup_weiss.png) no-repeat bottom right } .icon_word { background: url(/images/popups/wort.png) no-repeat bottom right } .icon_topic { background: url(/images/popups/thema.png) no-repeat bottom right } .icon_description { background: url(/images/popups/beschreibung.png) no-repeat bottom right } .icon_evaluation { background: url(/images/popups/bewertung.png) no-repeat bottom right } .icon_unit { background: url(/images/popups/lektion.png) no-repeat bottom right } .icon_test { background: url(/images/popups/test.png) no-repeat bottom right } .icon_module { background: url(/images/popups/modul.png) no-repeat bottom right } .icon_journal { background: url(/images/popups/zeitschrift.png) no-repeat bottom right } .icon_publisher { background: url(/images/popups/verlag.png) no-repeat bottom right } .icon_essay { background: url(/images/popups/aufsatz.png) no-repeat bottom right } .icon_verdict { background: url(/images/popups/urteil.png) no-repeat bottom right } .icon_bar_review_case { background: url(/images/popups/repetitoriumsfall.png) no-repeat bottom right } .icon_data_storage { background: url(/images/popups/datentraeger.png) no-repeat bottom right } .icon_textbook { background: url(/images/popups/lehrbuch.png) no-repeat bottom right } .icon_commentary { background: url(/images/popups/kommentar.png) no-repeat bottom right } .icon_graphics { background: url(/images/popups/grafik.png) no-repeat bottom right } .icon_animation { background: url(/images/popups/animation.png) no-repeat bottom right } .icon_audio { background: url(/images/popups/audio.png) no-repeat bottom right } .icon_video {background: url(/images/popups/video.png) no-repeat bottom right } .icon_product_external { background: url(/images/popups/produkt.png) no-repeat bottom right } .icon_cart { background: url(/images/einkaufswagen.png) no-repeat top right } .icon_booking { background: url(/images/popups/Buchen_aktiv.png) no-repeat top left } .icon_booking_hover { background: url(/images/popups/Buchen_passiv.png) } .icon_external_link { background: url(/images/popups/extlink.gif) no-repeat left center } .icon_pen { background: url(/images/annotations.png) no-repeat top left } /*.icon_pen_new { background: url(/images/popups/annotation_new_button.png) no-repeat top left } */ /* .icon_pen_new { background: url(/images/annotationpen_trans.png) no-repeat top left } */ .icon_pen_new { background: url(/images/info_annotation_hover.png) no-repeat top left } .icon_correct { background: url(/images/richtig.png) no-repeat 0 1px } .icon_incorrect { background: url(/images/falsch.png) no-repeat } .icon_possible { background: url(/images/moeglich.png) no-repeat 1px 3px } /* .icon_zaehler_richtig { background: url(/basic/resources/img/gesamtrichtig.png) no-repeat 0 1px } .icon_zaehler_falsch { background: url(/basic/resources/img/gesamtfalsch.png) no-repeat 0 1px } .icon_zaehler_neutral { background: url(/basic/resources/img/gesamtneutral.png) no-repeat 0 1px } */ .icon_zaehler_richtig { background: url(/images/gesamtrichtig.png) no-repeat 0 1px } .icon_zaehler_falsch { background: url(/images/gesamtfalsch.png) no-repeat 0 1px } .icon_zaehler_neutral { background: url(/images/gesamtneutral.png) no-repeat 0 1px } .icon_mc_points_correct { background: url(/images/punkte_richtig.png) no-repeat } .icon_mc_points_incorrect { background: url(/images/punkte_falsch.png) no-repeat } .icon_lt_correct { background: url(/images/richtigbewerten.png) repeat-x } .icon_lt_incorrect { background: url(/images/falschbewerten.png) } .icon_lt_points_correct { background: url(/images/richtig.png) no-repeat 0 0 } .icon_node { background: url(/images/arrow_down.gif) no-repeat 0 1px } .icon_node_open { background: url(/images/minus.png) no-repeat 0 1px } .icon_node_closed { background: url(/images/plus.png) no-repeat 0 0 } .icon_public { background: url(/images/oeffentlich.png) no-repeat } .icon_hide { background: url(/images/ausblenden.png) no-repeat } .icon_hide_remark { background: url(/images/AnmerkungAusblenden.png) no-repeat } .icon_followup { background: url(/images/merken.png) no-repeat } .icon_delete_annotation { background: url(/images/popups/schliessen_button_gross.png) no-repeat; display: block; width: 20px; height: 20px; } .icon_ausblenden { background: url(/images/popups/ausblenden-button.png) no-repeat top right; line-height: 20px; } .icon_einblenden { background: url(/images/popups/einblenden-button.png) no-repeat top right; line-height: 20px; } .icon_info_popup_hover { background: url(/images/popups/info_popup_gelb.png) } .icon_remove_topic { background: url(/images/popups/themen_weg.png) 0 5px } .image_video_bg { background: url(/images/video4.png) no-repeat 3px 3px } .image_1px_focused_popup { background: #ddd url(/images/popups/header_popup_1px.png) 50% 50% repeat-x; color: #333 } .image_pauxrein { background: url(/images/pauxrein_strafrecht.png) no-repeat } .image_powered_by { background: url(/images/powered_by_paux_strafrecht.png) no-repeat } // LOADING .image_loading_content { background: url(/images/content_loading.gif) no-repeat center center } .image_loading_popup { background: url(/images/popups/loading.gif) no-repeat center center } .image_header_bg { /* background: url(/images/kopfleiste_blau.png) repeat-x */ } // Body @colorBodyBg: #f2f8ff; @bodyWidth: 1055px; @bodyMargin: 10px; // Header @colorHeaderBg: #6cbfde; @headerHeight: 90px; .headerBG { .image_header_bg } // LogoBox .LogoBoxDimension { width: 147px; height: 63px; } .LogoBoxPosition { position: absolute; top: 8px; left: 48px; } .LogoBoxLinkBackground { .image_logo; background-position: 0 0; &:hover { .image_logo_hover } &:active { .image_logo_active } } .LogoBoxLinkDimension { width: 164px; height: 85px; } // Primary Nav. @colorPrimaryNav: #fff; @colorPrimaryNavCurrent: #555; @colorPrimaryNavCurrentBg: #fff; @colorPrimaryNavHover: #555; @colorPrimaryNavHoverBg: #fff; @colorPrimaryNavActiveBg: #eee; // Sec. Nav. @colorSecondayNav: #fff; @colorSecondayNavBgOdd: #44a7cc; @colorSecondayNavBgEven: #6cbfde; @colorSecondayNavHover: #2371a8; @colorSecondayNavHoverBg: #fff; @colorSecondayNavLinkHover: #44a7cc; @colorSecondayNavLinkActive: #999; @colorSecondayNavLinkActiveBg: #f0efe6; @colorSecondayNavBorder: #888; @colorSecondayNavCurrent: #44a7cc; @colorSecondNaviCount: #999; // Tern. Nav @colorTernaryNav: #44a7cc; @colorTernaryNavDesc: #777; @colorTernaryNavPageNo: #555; @colorLernebenenCounter: #aaa; // Content @colorHeading: #44a7cc; @colorMarkierung1: #08c5fc; @colorMarkierung1ambient: #ceeff9; @colorMarkierung2: #96fc29; @colorMarkierung2ambient: #e4fcca; @colorMarkierung3: #fd0674; @colorMarkierung3ambient: #fae1ec; @colorMarkierung4: #0074eb; @colorMarkierung4ambient: #59abff; @colorAussageMarkiert: #ccc; @colorAussageUnmarkiert: #fff; @colorBackgroundAussageMarkiert: #e9f1ff; @colorBackgroundAussageUnmarkiert: #fff; // Lernebenen @colorFrageAntwort: #333; @colorFrageBg: #c7e8ff; @colorAntwortBg: #eee; @colorAnswerOptionBg: #ddd; @colorAnswerOptionActive: #000; // Popups @pad5: 5px; @pad10: 10px; @pad20: 20px; @AnnotatedObjectWidth: 648px; @SymbolColumnWidth: 40px; @AnnotatedObjectSocialWidth: 16px; //@AnnotatedBasisWidth: @AnnotatedObjectWidth - @SymbolColumnWidth - @AnnotatedObjectSocialWidth; @AnnotatedBasisWidth: @AnnotatedObjectWidth - @SymbolColumnWidth; @InfoPopupInPopupsWidth: 26px; @InfoKategorienInPopupsWidth: 30px; @AussageInPopupsWidth: @AnnotatedBasisWidth - @InfoPopupInPopupsWidth - @InfoKategorienInPopupsWidth - @pad20 - 20px; // LoginLogout .LoginLogoutPosition { position: absolute; left: 0; top: 15px; margin-left: 240px; margin-top: -6px; padding-left: 535px; } .LoginLogoutDimension { width: 280px; height: 75px; } .LoginLogutFont { font-size: 11px; font-weight: normal; color: #ccc; } .LoginButtonDimension { width: 164px; height: 19px; .radius(10px); padding: 0 8px; } .LoginButtonPosition { display: block; top: 2px; left: 706px; margin-top: 4px; } // START CUSTOMIZED VARIABLES //Body @colorBodyBg: #eee; @bodyMargin: 10px; // Header @colorHeaderBg: none; @headerHeight: 0; .headerBG { .image_header_bg } // LogoBox .LogoBoxDimension { // width: 147px; // height: 63px; } #Header .LogoBox{ z-index: 10; } .LogoBoxPosition { position: absolute; top: 15px; left: 15px; } .LogoBoxLinkBackground { .image_logo; background-position: 0 0; &:hover { .image_logo_hover } &:active { .image_logo_active } } .image_logo { background: url(/images/paux_logo_big.png) no-repeat } .image_logo_hover { background: url(/images/paux_logo_big.png) no-repeat } .image_logo_active { background: url(/images/paux_logo_big.png) no-repeat } // LoginLogout .LoginLogoutPosition { position: absolute; left: 0; top: 10px; margin-left: 655px; margin-top: 0; padding-left: 0; } .LoginLogoutDimension { width: 280px; height: 75px; } .LoginLogutFont { font-size: 11px; color: #ccc; } .LoginButtonDimension { width: 164px; height: 19px; .radius(10px); padding: 0 8px; } .LoginButtonPosition { display: block; top: 2px; left: 706px; margin-top: 4px; } // Primary Nav. @colorPrimaryNav: #eee; @colorPrimaryNavCurrent: white; @colorPrimaryNavCurrentBg: transparent; @colorPrimaryNavHover: white; @colorPrimaryNavHoverBg: transparent; @colorPrimaryNavActiveBg: transparent; // Sec. Nav. @colorSecondayNav: black; @colorSecondayNavBgOdd: #eee; @colorSecondayNavBgEven: #eee; @colorSecondayNavHover: #ff0000; @colorSecondayNavHoverBg: #fff; @colorSecondayNavLinkHover: #000; @colorSecondayNavLinkActive: #000; @colorSecondayNavLinkActiveBg: #fff; @colorSecondayNavBorder: gray; @colorSecondayNavCurrent: gray; @colorSecondNaviCount: #aaa; // Tern. Nav @colorTernaryNav: #333332; @colorTernaryNavDesc: #777; @colorTernaryNavPageNo: #555; @colorLernebenenCounter: #aaa; //Content @colorHeading: #333; // Lernebenen @colorFrageAntwort: #333; @colorFrageBg: #c7e8ff; @colorAntwortBg: #eee; @colorAnswerOptionBg: #ddd; @colorAnswerOptionActive: #000; // LoginLogout .LoginLogout { /* visibility: hidden; */ } /* .LoginLogoutPosition { position: absolute; left: 0; top: 15px; margin-left: 340px; margin-top: -6px; padding-left: 435px; } .LoginLogutFont { font-size: 11px; font-weight: normal; color: #ccc; } .LoginButtonDimension { width: 164px; height: 19px; .radius(10px); padding: 0 8px; } .LoginButtonPosition { display: block; top: 2px; left: 706px; margin-top: 4px; } */ // ************************************** // some general 'functions' for mixing in // ************************************** .opaque (@value: 1.00) { filter: ~"alpha(opacity="@value*100~")"; opacity: @value; -moz-opacity: @value; -khtml-opacity: @value; } .radius (@value: 5px) { border-radius: @value; -moz-border-radius: @value; -webkit-border-radius: @value; } .radiusAll (@value1: 5px, @value2: 5px, @value3: 5px, @value4: 5px) { border-radius: @value1 @value2 @value3 @value4; -moz-border-radius: @value1 @value2 @value3 @value4; -webkit-border-radius: @value1 @value2 @value3 @value4; } .border (@width: 1px, @style: solid, @color1: #bbb, @color2: #777, @color3: #777, @color4: #bbb) { border-top: @width @style @color1; border-right: @width @style @color2; border-bottom: @width @style @color3; border-left: @width @style @color4; } .borderTR (@color1: #777, @color2: #eee) { border-top: 1px solid @color1; border-right: 1px solid @color2; } .borderLR (@color1: #ddd, @color2: #aaa) { border-left: 1px solid @color1; border-right: 1px solid @color2; } .shadow (@width: 2px, @color: #aaa) { box-shadow:@width @width @width @color; -moz-box-shadow:@width @width @width @color; -webkit-box-shadow:@width @width @width @color; } .width (@value) { width: @value; min-width: @value; max-width: @value; } .height (@value) { height: @value; min-height: @value; max-height: @value; } .indent (@factor) { padding-left: 15px * @factor } .nobg { background-image: none } .border_shadow_bot_right { .border( 1px, solid, #bbb, #777, #777, #bbb ) } .border_shadow_top_left { .border( 1px, solid, #777, #bbb, #bbb, #777 ) } // ** // * HTML5 ? Boilerplate // * // * style.css contains a reset, font normalization and some base styles. // * // * Credit is left where credit is due. // * Much inspiration was taken from these projects: // * - yui.yahooapis.com/2.8.1/build/base/base.css // * - camendesign.com/design/ // * - praegnanz.de/weblog/htmlcssjs-kickstart // ** // ** // * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) // * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark // * html5doctor.com/html-5-reset-stylesheet/ // ** html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } // Font normalization inspired by YUI Library-s fonts.css: developer.yahoo.com/yui/ body { font:13px/1.231 sans-serif; *font-size:small; } // Hack retained to preserve specificity select, input, textarea, button { font:99% sans-serif; } // Normalize monospace sizing: // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome pre, code, kbd, samp { font-family: monospace, sans-serif; } // Minimal base styles. // Always force a scrollbar in non-IE html { overflow-y: scroll; } // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test a:hover, a:active { outline: none; } ul, ol { margin-left: 2em; } ol { list-style-type: decimal; } // Remove margins for navigation lists nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } small { font-size: 85%; } strong, th { font-weight: bold; } td { vertical-align: top; } // Set sub, sup without affecting line-height: gist.github.com/413930 sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } textarea { overflow: auto; } // www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ .ie6 legend, .ie7 legend { margin-left: -7px; } // Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } // Hand cursor on clickable input elements label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } // Webkit browsers add a 2px margin outside the chrome of form elements button, input, select, textarea { margin: 0; } // Colors for form validity input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0 0 5px #f00; -webkit-box-shadow: 0 0 5px #f00; box-shadow: 0 0 5px #f00; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } // These selection declarations have to be separate // No text-shadow: twitter.com/miketaylr/status/12228805301 // Also: hot pink! ::-moz-selection{ background: #ff5e99; color:#fff; text-shadow: none; } ::selection { background:#ff5e99; color:#fff; text-shadow: none; } // j.mp/webkit-tap-highlight-color a:link { -webkit-tap-highlight-color: #ff5e99; } // Make buttons play nice in IE: // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ button { width: auto; overflow: visible; } // Bicubic resizing for non-native sized IMG: // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ .ie7 img { -ms-interpolation-mode: bicubic; } // You might tweak these.. body, select, input, textarea { // #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 color: #444; // Set your base font here, to apply evenly font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; } // Headers (h1, h2, etc) have no default font-size or margin; define those yourself h1, h2, h3, h4, h5, h6 { font-weight: bold; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } /********************************************************************************************************* * Primary styles * * Authors: Michael Dreusicke, Thomas Heinen *********************************************************************************************************/ // Abstaende aller Elemente auf Null setzen + weitere Formatierungen html, body, div, p, h1, h2, h3, ul, ol, li, span, a, table, td, form, img { margin: 0; padding: 0; outline: 0; font-family: Arial, Helvetica, sans-serif; font-weight: normal; } // html und body mit css versorgen... "font-size:101%;" hilft bei relativen Schriftgroessenproblemen html, body { .nobg; background-color: @colorBodyBg; font-size: 101%; margin: 0 0 0 2px; width: 98%; .radius(10px); } body { position: absolute; top: @bodyMargin; left: @bodyMargin; .width(@bodyWidth); font-size: 101%; color: #000; margin-bottom: 20px; } // ****************************** // * GENERAL * // ****************************** table { font-size: 12px } b { font-weight: bold } i { font-style: italic } img { border: 0 } .strong { font-weight: bold } .c { clear: both } .clear { clear: both } .center { text-align: center } .pointer { cursor: pointer } .heading { float: left } a.popup { outline: 0; cursor: hand; } .small_grey { font-size: 10px; color: #aaa } // ****************************** // * xxxxxxxxxx * // ****************************** .kategorie { margin-right: 5px } #info_kategorie { visibility: visible; position: relative; top: 20px; left: 620px; text-align: right; width: 120px; } .info_popup { vertical-align: top; text-align: center; .width(22px); height: 22px; float: right; margin: 0 0 0 7px; &:active { .icon_info_active } } .infoPopupInPopups .info_popup { float: left; margin: 0; } .OptionsMenu { width: 16px; height: 16px; //background-color: #000; margin: 4px 5px 0 0; float: right; background: url(/images/Optionen_Einstellungen_weiss1.png) no-repeat; } .hyperlinks_button { .icon_hyperlinks_button; &:active { .icon_hyperlinks_button } } .hyperlinks { .icon_hyperlinks; &:active { .icon_hyperlinks } } .hyperlink_url { .icon_hyperlink_url; &:active { .icon_hyperlink_url } } .sharing { .icon_sharing; &:active { .icon_sharing } } .sharinglinks { .icon_sharinglinks; &:active { .icon_sharinglinks } } .events_button { .icon_events_button; &:active { .icon_events_button } } .events { .icon_events; &:active { .icon_events } } .products { .icon_products; &:active { .icon_products } } .products_button { .icon_products_button; &:active { .icon_products_button } } .references_button { .icon_references_button; &:active { .icon_references_button } } .persons_button { .icon_persons_button; &:active { .icon_persons_button } } .persons { .icon_persons; &:active { .icon_persons } } .media_button { .icon_media_button; &:active { .icon_media_button } } .media { .icon_media; &:active { .icon_media } } .hyperlinks_button, .events_button, .products_button, .references_button, .persons_button, .media_button, .AnnotationLink { .opaque(0.9); } .NewAnnotationLink { .opaque(0.8); } .AnnotationLink, .NewAnnotationLink { text-decoration: none; } div.ChildAnnotations { margin-left: 55px; } span.hidden_data { color: #777; font-weight: bold; font-size: 10px; margin-left: 3px; visibility: hidden; } #satz_id_hidden { position: relative; float: right; left: 0; top: 40px; color: #777; span { color: #000; font-size: 10px; margin-left: 3px; .opaque(0.15); } } .right { text-align: right; } div.vertiefungKategorie { .width(20px); .height(17px); //padding: 0px 3px; padding: 20px 4px 0 4px; //background-color: none; .icon_info; //background-position: 8px 4px; cursor: default; float: left; clear: both; } div.vertiefungDetail { position: relative; left: 10px; // .width(540px); //.width(@AnnotatedObjectWidth); .width(@AnnotatedBasisWidth); height: auto; font-size: 12px; //background-color: none; padding: 20px 4px 0 4px; vertical-align: top; cursor: default; float: left; } span.Hyperlink{ a{ float: left; } span{ float: left; min-width: 100%; } } .vertiefungDetailInfoFilter_FrageAntwort { position: relative; float: right; width: 40px; margin: -90px 0 0 0; } div.vertiefungKategorie.AnzahlInfos { color: #888; font-size: 12px; //background-color: none; border-right: 2px solid #e7e5ca; border-bottom: 2px solid #e7e5ca; border-left: 2px solid #e7e5ca; padding: 4px; vertical-align: top; cursor: default; } div.vertiefungKategorie.Info { .icon_info } div.vertiefungKategorie.Infoteil { .icon_word } div.vertiefungKategorie.Wort { .icon_word } div.vertiefungKategorie.Gliederung { .icon_topic } div.vertiefungKategorie.Beschreibung { .icon_description } //div.vertiefungKategorie.PAUXProdukt { .icon_products } div.vertiefungKategorie.Bewertung { .icon_evaluation } div.vertiefungKategorie.Thema { .icon_topic } div.vertiefungKategorie.Lektion { .icon_unit } div.vertiefungKategorie.Test { .icon_test } div.vertiefungKategorie.Modul { .icon_module } div.vertiefungKategorie.Zeitschrift { .icon_journal } div.vertiefungKategorie.Verlag { .icon_publisher } div.vertiefungKategorie.Aufsatz { .icon_essay } div.vertiefungKategorie.Urteil { .icon_verdict } div.vertiefungKategorie.Repetitoriumsfall { .icon_bar_review_case } div.vertiefungKategorie.Datentraeger { .icon_data_storage } div.vertiefungKategorie.Lehrbuch { .icon_textbook } div.vertiefungKategorie.Kommentar { .icon_commentary } div.vertiefungKategorie.Datei { .icon_media_button } div.vertiefungKategorie.Datei { .icon_media } div.vertiefungKategorie.Grafik { .icon_graphics } div.vertiefungKategorie.Animation { .icon_animation } div.vertiefungKategorie.Audio { .icon_audio } div.vertiefungKategorie.Video { .icon_video } div.vertiefungKategorie.NatuerlichePerson { .icon_persons_button } div.vertiefungKategorie.NatuerlichePerson { .icon_persons } div.vertiefungKategorie.HyperlinksButton { .icon_hyperlinks_button } div.vertiefungKategorie.Hyperlink { .icon_hyperlinks } div.vertiefungKategorie.HyperlinkURL { .icon_hyperlink_url } div.vertiefungKategorie.Sharing { .icon_sharing } div.vertiefungKategorie.SharingLink { .icon_sharinglinks } div.vertiefungKategorie.Veranstaltung { .icon_events_button } div.vertiefungKategorie.Veranstaltung { .icon_events } div.vertiefungKategorie.Produkt { .icon_product_external } span.lehrbuch_buyme { color: #1c5d76; .icon_cart; padding-right: 24px; } div.vertiefungDetail.Medium { //background-color: none; } div.vertiefungDetail.Info, div.vertiefungDetail.Infoteil, div.vertiefungDetail.InfoText { color: #666; background-color: #fff; //padding: 13px 4px; //padding: 0px 4px; } .buchen { font-size: 16px; .icon_booking; border: none; vertical-align: top; margin: 0 0 0 10px; position: relative; top: -2px; &:active { .icon_booking } } #lektion_content { width: 100%; border: none; margin: 0; padding: 0; } div.thema { //background-color: #ffeeee; } span.thema { padding-left: 40px; line-height: 30px; } div.infoInLektion { line-height: 16px; padding: 0 6px; .width(560px); float: left; border: 1px dotted transparent; position: relative; left:-6px; &:hover { // cursor: pointer; // .icon_pen; // border: 1px dotted #ccc; //background-color: #f5f5f5; } } // FIXME where is this used? div.content_loading, div.annotate_loading, div.popup_loading { background-repeat: no-repeat; background-position: center center; overflow: hidden; } div.content_loading { width: 800px; height: 200px; margin-top: 50px; .image_loading_content; } div.annotate_loading, div.popup_loading { .image_loading_popup; height: 40px; margin-top: 10px; } div.annotate_loading { width: 800px; } div.popup_loading { width: 500px; } div.popup_url, div.annotation_url { font-size: 11px; color: #777; height: auto; width: auto; } div.popup_url { width: 470px; margin-top: 18px; margin-left: 40px; line-height: 1.6em; } div.annotation_url { //border-top: 1px solid #777; padding: 10px 0; width: 630px; margin-left: 15px; background-color: #f3f3f1; text-align: center; } span.popup_url_text { color: #777; line-height: 1em; } div.popup_url a, div.annotation_url a { color: #444; } div.modul_url{ a{ } } div.infoPopups, div.infoPopupInPopups { padding: 0 10px 0 0; float: left; clear: both; } .infoPopups { width: 100px; } .ResultFrame div.infoPopups { .width(20px) } div.infoPopupInPopups { .width(@InfoPopupInPopupsWidth); } div.aussageInPopups { //width: 350px; //max-width: 350px; .width(@AussageInPopupsWidth); float: left; } .ResultFrame .infoKategorien { .width(30px); } div.infoKategorien, div.infoKategorienInPopups { //width: 30px; .width(@InfoKategorienInPopupsWidth); padding: 5px 0 0 0; margin-left: 10px; vertical-align: top; text-align: center; float: left; background-color: #fff; //border-top: 1px solid #ccc; //border-left: 1px solid #ccc; cursor: default; img { width: auto; height: auto; padding: 0 0 0 3px; vertical-align: top; cursor: help; } } div.infoKategorienInPopups img { float: left; clear: left; padding: 5px; } span.AbsatzDanach div.info { margin-bottom: 25px; float: left; } div.InfosMitGrafik, div.InfoMitGrafik { float: left; width: 95px; } div.InfosMitGrafik { margin-left: 5px } div.InfoMitGrafik { margin-bottom: 5px } .AussageMarkiert, .AussageUnmarkiert { margin: -5px 0 0 -5px; padding: 5px 0 0 5px; } div.AussageMarkiert { border: 1px solid @colorAussageMarkiert; background-color: @colorBackgroundAussageMarkiert; } div.AussageUnmarkiert { border: 1px solid @colorAussageUnmarkiert; } div.InfoAussageteile { } div.InfoAussageteileSmall { width: 455px; float: left; } div.ThemenMitGrafik { position: relative; padding-top: 18px; left: 42px; clear: left; } span.ThemaMitGrafik { padding: 0 5px; } img.ThemaMitGrafikGrafik { padding: 0 5px; position: relative; height: 70px; left: -11px; } div.ThemaBeschreibung { clear: both; margin-bottom: 22px; .small_grey; text-align: justify; max-width: 700px; } // #vorschau { // position:absolute; // border:1px solid #ccc; // background:#e1ddd1; // padding:5px; // display:none; // color:#fff; // z-index: 100; // } // // #vorschau img { // max-width: 800px; // max-height: 800px; // width: expression(this.width > 800 ? "800px" : true); // height: expression(this.height > 800 ? "800px" : true); // } #lektion_thema_infos { clear: left; } span.multimediaInInfo { display: block; overflow: visible; position: relative; left: 16px; } a:link, a:visited { text-decoration: none; color: #00f; &:active { text-decoration: none } } a.uri:link, a.uri:visited { text-decoration: underline; color: #00f; //padding-left: 22px; margin-right: 28px; //.icon_external_link; overflow: hidden; } a.uri:active { text-decoration: none; color: #fff; } a.themenlink:link, a.themenlink:visited { font-size: 14px; font-weight: normal; } a.themenlink:active { } #LektionFilter { position: absolute; width: auto; margin-top: 0; margin-left: 500px; } .selectboxes { visibility: hidden } .navigationbar { } .demozielgruppe { color: #000; background-color: #fff; border: 1px solid #aaa; width: 120px; .opaque(0.30); } .demoschwierigkeitsgrad { color: #000; background-color: #fff; border: 1px solid #aaa; width: 120px; .opaque(0.30); } .demopruefungsrelevanz { color: #000; background-color: #fff; border: 1px solid #aaa; .opaque(0.30); width: 95px; } .demoapplybutton { color: #000; background-color: #fcc; border: 2px solid #bbb; .opaque(0.30); } a.verknuepfungAktion, a.verknuepfungAktion:visited, ul li span { text-decoration: none; color: #000; border-bottom-color: #888; border-bottom-style: dotted; border-bottom-width: 1px; padding: 0; font-size: 12px; &:active { } } p.verknuepfungAktion, p.verknuepfungAktion:visited { padding: 3px 0 0; max-width: @content_width - 100px; &:active { } } a.verknuepfung, a.verknuepfung:visited { text-decoration: none; color: #000; border-bottom: 1px dotted #999; padding: 0; font-weight: normal; &:active { background-image: none } } div.lektion_heading { // padding: 60px 100px 0; padding-top: 60px; float: left; } span.lektion_heading { font-size: 30px; color: @colorHeading; font-weight: bold; line-height: 100%; &:hover { // left: 15px !important; // top: -1px; a { // text-decoration: none !important } } } p.beschreibunglektion { font-size: 16px; color: #999; // margin: 8px 120px; margin: 8px 0 8px 0; line-height: 130%; } div.dauerlektion { .small_grey; margin: 0 120px 30px 0; text-align: right; clear: both; float: left; width: 100%; } span.lektion_thema, span.lektion_thema h1, span.lektion_thema h2, span.lektion_thema h3, span.lektion_thema h4, span.lektion_thema h5, span.lektion_thema h6, span.lektion_thema h6.heading7, span.lektion_thema h6.heading8, span.lektion_thema h6.heading9, span.lektion_thema h6.heading10, span.lektion_thema h6.heading11, span.lektion_thema h6.heading12 { color: @colorHeading; font-weight: bold; margin: 18px 0 6px 0; } @lektion_thema_margin_left: 75px; @lektion_thema_margin_left_inc: 10; @lektion_thema_margin_font_size: 24px; span.lektion_thema { margin: 0 130px 0 100px; font-weight: normal; font-size: 20px; display: block; h1 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 1; font-size: @lektion_thema_margin_font_size; } h2 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 2; font-size: @lektion_thema_margin_font_size - 1; } h3 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 3; font-size: @lektion_thema_margin_font_size - 2; } h4 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 4; font-size: @lektion_thema_margin_font_size - 3; } h5 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 5; font-size: @lektion_thema_margin_font_size - 4; } h6 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 6; font-size: @lektion_thema_margin_font_size - 5; } h6.heading6 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 7; font-size: @lektion_thema_margin_font_size - 6; } h6.heading7 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 8; font-size: @lektion_thema_margin_font_size - 7; } h6.heading8 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 9; font-size: @lektion_thema_margin_font_size - 8; } h6.heading9 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 10; font-size: @lektion_thema_margin_font_size - 9; } h6.heading10 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 11; font-size: @lektion_thema_margin_font_size - 10; } h6.heading11 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 12; font-size: @lektion_thema_margin_font_size - 11; } h6.heading12 { margin-left: @lektion_thema_margin_left + @lektion_thema_margin_left_inc * 13; font-size: @lektion_thema_margin_font_size - 12; } } span.hoverheading { font-weight: normal; &:active { } } span.lektion_at_verknuepfung { font-size: 14px; color: #333; line-height: 130%; text-decoration: none; vertical-align: baseline; &:visited { font-size: 14px; color: #333; } } span.lektion_at_ohneverknuepfung { font-size: 14px; color: #333; } /*body.use-hover*/ .fb_link img:hover, /*body.use-hover*/ ul li span:hover, /*body.use-hover*/ span.verknuepfungAktion:hover, /*body.use-hover*/ span.lektion_at_verknuepfung:hover, /*body.use-hover*/ span.hoverheading:hover, /*body.use-hover*/ span.lektion_heading:hover, /*body.use-hover*/ .InfoMitGrafik:hover img, /*body.use-hover*/ .lektion_gliederung:hover, /*body.use-hover*/ .lektion_fundstelle:hover, /*body.use-hover*/ .lektion_medium:hover, /*body.use-hover*/ .lektion_person:hover, /*body.use-hover*/ .lektion_veranstaltung:hover, /*body.use-hover*/ .lektion_hyperlink:hover { cursor: pointer; .shadow( 2px, #aaa ); position: relative; left: -1px; top: -1px; .radius(7px); .opaque(1.0); background-color: #fff; } .fb_link img:active, ul li span:active, span.verknuepfungAktion:active, span.lektion_at_verknuepfung:active, span.hoverheading:active, span.lektion_heading:active, .InfoMitGrafik:active img, .lektion_gliederung:active, .lektion_fundstelle:active, .lektion_medium:active, .lektion_person:active, .lektion_veranstaltung:active, .lektion_hyperlink:active { background-color: #fff; .border( 1px, solid, #777, #ccc, #ccc, #888 ); .shadow( 0, #666 ); padding: 0FIRE; position: relative; left: 0; top: 0; } /*body.use-hover*/ .references_button:hover, /*body.use-hover*/ .hyperlinks_button:hover, /*body.use-hover*/ .events_button:hover, /*body.use-hover*/ .products_button:hover, /*body.use-hover*/ .persons_button:hover, /*body.use-hover*/ .media_button:hover, /*body.use-hover*/ .AnnotationLink:hover, /*body.use-hover*/ .NewAnnotationLink:hover { .opaque(1.0); position: relative; left: -1px; top: -1px; } .references_button:active, .hyperlinks_button:active, .events_button:active, .products_button:active, .persons_button:active, .media_button:active, .AnnotationLink:active, .NewAnnotationLink:active { position: relative; left: 0; top: 0; } // span.lektion_heading:hover { // left: 16px !important; // } .lektion_heading:hover a{ text-decoration: none !important; } // .lektion_heading:active a{ // left: 14px !important; // } div.lektion_hinweis { font-size: 14px; line-height: 130%; color: #888; vertical-align: baseline; display: block; clear: both; } #AT { display: inline; .Level0 { .indent( 0 ) } .Level1 { .indent( 1 ) } .Level2 { .indent( 2 ) } .Level3 { .indent( 3 ) } .Level4 { .indent( 4 ) } .Level5 { .indent( 5 ) } .Level6 { .indent( 6 ) } .Level7 { .indent( 7 ) } .Level8 { .indent( 8 ) } .Level9 { .indent( 9 ) } .Level10 { .indent( 10 ) } } span.Satz.continuous{ display: inline; span.AT.continuous,{ } br.zeilenwechsel{} p.absatz{ margin-bottom: 30px; } } span.lektion_gliederung { //color: #000; color: @colorHeading; font-weight: normal; &:active { background-image: none } } span.lektion_fundstelle { color: #000; font-weight: normal; &:active { background-image: none } } span.lektion_medium { color: #000; font-weight: normal; &:active { background-image: none } } span.lektion_person { color: #000; font-weight: normal; &:active { .nobg } } span.lektion_veranstaltung { color: #000; font-weight: normal; &:active { background-image: none } } span.lektion_produkt { color: #000; font-weight: normal; &:active { background-image: none } } span.lektion_hyperlink { color: #000; font-weight: normal; &:active { background-image: none } } #Modul_Lernbereich_Navigation { margin: 4px 0 0; } a.loadInfo, a.navigational, a.navigational:visited, a.richtigbewerten, a.falschbewerten { text-decoration: none; color: #444; line-height: 200%; padding: 0 8px; .border_shadow_bot_right; margin-right: -3px; font-size: 12px; .tabbg_passive; .radius; } a.loadInfo:active, a.navigational:active, a.lt_antwort:active { .tabbg_active; .border_shadow_top_left; } a.navigational_active, a.navigational_active:visited { text-decoration: none; color: #bbb; line-height: 200%; padding: 2px 8px; margin-right: -3px; font-size: 16px; .tabbg_passive; .radius; } a.navigational:active, a.richtigbewerten:active, a.falschbewerten:active, a.lt_antwort:active { color: #444; .border_shadow_top_left; .tabbg_active; } span.hinweis { color: #666; } span.artikel { color: #bbb; } p.bewertung { margin: 0; } .relevanzgrafik { height: 8px; width: 70px; padding: 0 6px 2px 0; vertical-align: bottom; } .schwierigkeitgrafik { height: 9px; width: 70px; padding: 0 0 2px 5px; vertical-align: bottom; } .qualitaetgrafik { height: 8px; padding: 0 0 3px 5px; vertical-align: bottom; } span.zielgruppe { color: #666; font-size: 11px; padding: 0 0 0 5px; } span.begruendung { color: #999; font-size: 11px; } span.anmerkung { color: #999; font-size: 11px; } span.beschreibung { color: #666; font-size: 12px; } span.beschreibung_hidden { color: #fff; .opaque(0.00); } a.antwort_button { text-decoration: none; color: #444; line-height: 200%; padding: 2px 12px; margin-right: -3px; font-size: 12px; .tabbg_passive; .radius; &:active { color: #444; .border_shadow_top_left; .tabbg_active; } } #antwort_kuerzen_button { font-size: 12px; color: #555; position: relative; top: 0; left: 29px; width: 130px; } #antwort_kuerzen_text { font-size: 12px; color: #555; a:hover { color: #555; text-decoration: none; } } #frage { font-size: 14px; margin: 50px 0 0; color: @colorFrageAntwort; background-color: @colorFrageBg; padding: 30px 75px 30px 35px; width: @content_width - 210px; .radiusAll(40px, 40px, 0, 0); .borderLR; } #zwischennavigation { font-size: 14px; margin: 0; color: #224; background-color: #d8defd; .tabbg_passive; padding: 0 35px; /* .width(622px); */ .width(@content_width - 170px); .border( 1px, solid, #eee, #aaa, #ccc, #ddd ); text-align: left; text-indent: 0; } #zwischenfrage, #zwischenantwort { font-size: 13px; margin: 0; padding: 18px 35px 12px 80px; .width(577px); .borderLR; text-indent: 0; } #zwischenfrage { color: @colorFrageAntwort; background-color: @colorFrageBg; } #zwischenantwort { color: @colorFrageAntwort; background-color: @colorAntwortBg; } #antwort, #antwortkurz { font-size: 14px; margin: 0 0 30px; color: @colorFrageAntwort; background-color: @colorAntwortBg; padding: 30px 75px 30px 35px; width: @content_width - 210px; .radiusAll( 0, 0, 40px, 40px ); .border( 1px, solid, #ddd, #aaa, #aaa, #ddd ); text-indent: 0; } #mcantworteinleitung, #lueckentextmitluecken { font-size: 14px; margin: 0; color: @colorFrageAntwort; background-color: @colorAntwortBg; /* padding: 30px 35px 0; */ padding: 30px 75px 0 35px; width: @content_width - 210px; .borderLR; text-indent: 0; } #mcantworten_einzeln { width: 60px; margin: 0; } #mcantwortmitsymbolen { width: 643px; margin: 0; padding: 0; height: 60px; } #mcantworten, #ltantworten { margin: 0; color: @colorFrageAntwort; background-color: @colorAntwortBg; /* padding: 30px 30px 30px 19px; */ padding: 30px 75px 30px 35px; /* .width(643px); */ width: @content_width - 210px; .borderLR; border-bottom: 1px solid #aaa; text-indent: 0; .radiusAll( 0, 0, 40px, 40px ); } #mcantwort, #mcantwort_selected { margin: 0; font-size: 14px; text-decoration: none; line-height: 150%; padding: 10px 20px 10px 10px; /* .width(633px); */ .width(@content_width - 150px); text-indent: 0; } a.mcantwort { font-size: 14px; color: @colorFrageAntwort; text-decoration: none; padding: 1px 7px 3px; background-color: @colorAnswerOptionBg; .tabbg_passive; .radius; &:active { color: #000; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } } #mcantwort_selected { // text-indent: -10px; text-indent: 0; } @colorAnswerOptionBg: #fff; a.mcantwort_selected { font-size: 14px; color: #111; text-decoration: none; padding: 1px 7px 3px; background-color: @colorAnswerOptionBg; background: #fff; .border_shadow_top_left; .tabbg; .radius; } a.mcantwort_selected:active { color: @colorAnswerOptionActive; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } a.antwortmitverknuepfung, a.antwortmitverknuepfung:visited { font-size: 14px; color: @colorFrageAntwort; text-decoration: none; padding: 1px 7px 3px; .tabbg_passive; .radius; } a.antwortmitverknuepfung_selected, a.antwortmitverknuepfung_selected:visited { font-size: 14px; color: #111; text-decoration: none; padding: 1px 7px 3px; background-color: @colorAnswerOptionBg; .border( 1px, solid, #777, #777bbb #bbb, #777 ); .tabbg; .radius; } a.antwortmitverknuepfung:active, a.antwortmitverknuepfung_selected:active { background-color: #fff; } a.mc_error, a.mc_error:visited, a.mc_error:active { border: 1px solid #c33; } a.lueckenantwort, a.lueckenantwort:visited, a.lueckenantwort_alternative, a.lueckenantwort_alternative:visited { font-size: 14px; text-decoration: none; color: @colorFrageAntwort; padding: 1px 7px 3px; background-color: @colorAnswerOptionBg; .tabbg_passive; .radius; } a.lueckenantwort_alternative:active { color: @colorAnswerOptionActive; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } #lueckenantwort_inactive { font-size: 14px; text-decoration: none; color: @colorFrageAntwort; padding: 1px 7px 3px; background-color: @colorAnswerOptionBg; .tabbg_passive; .radius; float: left; &:active { color: @colorAnswerOptionActive; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } } // ZAEHLER // GROSSER ZAEHLER #zaehlergross_richtig, #zaehlergross_falsch, #zaehlergross_neutral { position: absolute; /* left: 917px; top: 116px; left: 590px; */ left: @bodyWidth - 120px; top: 50px; color: #070; text-align: center; vertical-align: 50%; line-height: 220%; .width(70px); .height(32px); font-size: 14px; cursor: default; } #zaehlergross_richtig { .icon_zaehler_richtig } #zaehlergross_falsch {.icon_zaehler_falsch } #zaehlergross_neutral { .icon_zaehler_neutral } /* #zaehlergross_richtig { .icon_correct} #zaehlergross_falsch {.icon_incorrect} #zaehlergross_neutral { .icon_zaehler_neutral } */ span.gesamtrichtig, span.gesamt_richtig_von, span.gesamtfalsch, span.gesamt_falsch_von, span.gesamtneutral, span.gesamt_neutral_von, span.zaehlergross_graueschrift { font-size: 14px; cursor: default; } span.gesamtrichtig { color: #070 } span.gesamt_richtig_von { color: #5c5 } span.gesamtfalsch { color: #700 } span.gesamt_falsch_von { color: #c77 } span.gesamtneutral { color: #777 } span.gesamt_neutral_von { color: #aaa } span.zaehlergross_graueschrift { color: #888; text-align: right; padding-left: 20px; } // KLEINER ZAEHLER #moegliche_punkte, #zaehlerklein_richtig { position: absolute; margin-top: -36px; top: auto; left: 918px; cursor: default; } #moegliche_punkte { .icon_possible; color: #666; font-size: 12px; float: right; vertical-align: top; padding: 7px 22px; } #zaehlerklein_richtig, #zaehlerklein_falsch { width: 50px; height: 25px; padding: 4px 0 0; text-align: center; cursor: default; } #zaehlerklein_richtig { .icon_correct } #zaehlerklein_falsch { .icon_incorrect; position: absolute; top: 285px; left: 920px; } span.richtig, span.richtig_von, span.falsch, span.falsch_von, span.zaehlerklein_graueschrift { font-size: 12px; cursor: default; } span.richtig { color: #070 } span.richtig_von { color: #5c5 } span.falsch { color: #700 } span.falsch_von { color: #c66 } // PUNKTE-SYMBOLE div.mcantwort_richtig, div.mcantwort_falsch { position: relative; line-height: 150%; padding: 3px 1px 5px 2px; text-align: center; font-size: 12px; background-position: 0 0; cursor: default; .width(27px); float: right; } div.mcantwort_richtig { color: #090; .icon_mc_points_correct; } div.mcantwort_falsch { color: #900; .icon_mc_points_incorrect; } #lueckentextmitluecken { color: #444; line-height: 200%; } #lueckentext { display: inline; } /* #ltantworten { line-height: 250%; padding: 30px 33px 40px; .width(626px); } */ #luecke_current { font-size: 14px; color: #111; text-decoration: none; padding: 1px 7px 3px; background-color: #ddd; .border_shadow_top_left; .tabbg; .radius; display: inline; &:active { } } #luecke_passive { font-size: 14px; color: #444; .height(20px); text-decoration: none; padding: 1px 7px 3px; background-color: #ddd; .tabbg_passive; .radius; display: inline; &:active { color: #000; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } } a.lueckenantwort, a.lueckenantwort:visited { text-decoration: none; color: #00f; line-height: 200%; margin-right: 5px; font-size: 1.3em; &:active { font-weight: bold; color: #fff; background-color: #00f; } } a.lueckenantwort_selected { font-size: 14px; color: #111; text-decoration: none; padding: 1px 7px 3px; background-color: #ddd; .border_shadow_top_left; .tabbg; .radius; &:active { color: #000; padding: 1px 7px 3px; .border_shadow_top_left; .tabbg_active; } } #lt_antwort_richtig { color: #040; font-size: 14px; padding: 2px 7px; .icon_lt_correct; .border_shadow_bot_right; .radius; display: inline; cursor: default; &:active { color: #fff } } #lt_antwort_richtig_punkte { color: #090; font-size: 14px; padding: 2px 14px; .icon_lt_points_correct; display: inline; cursor: default; } span.lueckenantwort_richtig { text-decoration: none; color: #070; font-size: 12px; &:active { color: #fff } } span.lueckenantwort_richtig_von { text-decoration: none; color: #5c5; font-size: 12px; } a.ltantwortmitverknuepfung { text-decoration: none; color: #700; font-size: 12px; } // Modul-Praesentation td.ModulUebersichtKategorieBewertung { .width(40px); padding: 3px; background-color: #fff; .icon_evaluation; background-position: 8px 4px; cursor: default; } // Modul-Ausgabe #Header { width: auto; height: @headerHeight; .border( 1px, solid, #aaa, #666, #aaa, #fff ); .headerBG; background-position: 0 1px; background-repeat: repeat-x; background-color: @colorHeaderBg; .radius(10px); .LogoBox { .LogoBoxDimension; .LogoBoxPosition; a { .LogoBoxLinkBackground; .LogoBoxLinkDimension; outline: 0; cursor: hand; display: block; float: left; text-decoration: none; color: transparent; letter-spacing: -2px; span { display: none } } } .LoginLogout { .LoginLogoutPosition; .LoginLogoutDimension; .LoginLogutFont; .Register { float: left; width: 100px; height: 75px; padding-top: 42px; a { color: #fff } } .Login { overflow: auto; height: 75px; width: 170px; input { font-size: 9px; background-color: #ddd; } .Username, .Password { float: left; width: 75px; .nobg; } .Username { margin-right: 10px; } .Password input, .Username input { display: block; color: #000; width: 75px; height: 12px; } .login_button { clear: both; padding-top: 3px; .LoginButton { .tabbg; font-size: 12px; color: #444; .LoginButtonDimension; .LoginButtonPosition; &:hover { color: #000; background-color: #fff; .image_header_bg; } &:active { .tabbg_active } } } .login_button input { } .password_reset { font-size: 9px; text-align: right; margin-right: 5px; margin-top: 2px; a { color: #fff; } } } a.Logout { position: relative; top: -5px; left: 115px; // 210px; margin-right: -3px; padding: 2px 8px; line-height: 200%; text-decoration: none; color: #555; font-size: 12px; .tabbg_passive; .radius; //.border_shadow_bot_right; &:hover { padding: 2px 7px; .tabbg; .border_shadow_bot_right; } &:active { color: #00f; .border_shadow_top_left; .tabbg_active; } } } .register { visibility: hidden; position: absolute; top: 20px; left: 946px; .radius; background-color: #fff; padding: 2px 6px; } } // FIXME! das haendige Angeben der Klassen in den input-Elementen klappt wohl nicht #pauxrein { visibility: hidden; position: absolute; top: 18px; left: 448px; width: 218px; height: 51px; .image_pauxrein; } .powered_by { visibility: hidden; position: absolute; top: 19px; left: 775px; width: 92px; height: 24px; .image_powered_by; &:hover { .image_powered_by } &:active { .image_powered_by } } #PrimaryNavigation { position: absolute; top: 0; font-size: 12px; height: 100px; margin: 72px 0 0 300px; padding: 0; .nobg; border: none; //border-right: 1px solid #bbb; width: auto; .height(26px); overflow: visible; form { display: inline; } .Item1, .Item2, .Item3, .Item4 { font-weight: bold; padding-left: 0; } a { color: @colorPrimaryNav; padding: 4px 10px 6px; &:hover { background-color: @colorPrimaryNavHoverBg; color: @colorPrimaryNavHover; text-decoration: none; padding: 4px 9px 6px 10px; .borderTR; .radiusAll( 6px, 6px, 0, 0 ); } &:active { background-color: @colorPrimaryNavActiveBg } } .Current, a.Current { font-weight: bold; .nobg; background-color: @colorPrimaryNavCurrentBg; padding: 4px 10px 6px; margin-right: 10px; &:active { background-color: @colorPrimaryNavActiveBg } } .Current { .borderTR; .radiusAll( 6px, 6px, 0, 0 ); } a.Current { color: @colorPrimaryNavCurrent; padding: 4px 15px 6px; .borderTR; &:hover { border-top: 1px solid #444; .radiusAll( 6px, 6px, 0, 0 ); text-decoration: none; } } .Count { visibility: hidden } } #GapBeforeSecondaryNavigation { visibility: hidden; position: absolute; top: 75px; left: 1px; width: 240px; height: 27px; background-color: @colorSecondayNavBgOdd; .radiusAll( 0, 0, 0, 3px ); } #SecondaryNavigation { position: absolute; top: 92px; left: 7px; width: 240px; height: auto; margin-left: 1px; z-index: 1; color: @colorSecondayNav; .Item { border-bottom: 1px solid @colorSecondayNavBorder; .radiusAll( 3px, 0, 0, 3px ); } .Level1 { padding: 8px 0 8px 15px; font-weight: normal; } .SubItem { padding: 3px 0 } .Level2 { .indent( 2 ) } .Level3 { .indent( 3 ) } .Level4 { .indent( 4 ) } .Level5 { .indent( 5 ) } .Level6 { .indent( 6 ) } .Level7 { .indent( 7 ) } .Level8 { .indent( 8 ) } .Level9 { .indent( 9 ) } div.Topic1, div.Topic3, div.Topic5, div.Topic7, div.Topic9, div.Topic11, div.Topic13, div.Topic15, div.Topic17, div.Topic19 { background-color: @colorSecondayNavBgOdd; font-size: 11px; font-weight: normal; &:hover { background-color: @colorSecondayNavHoverBg; cursor: pointer; a { color: @colorSecondayNavLinkHover } } &:active { background-color: @colorSecondayNavLinkActiveBg; a { color: @colorSecondayNavLinkActive } } } div.Topic2, div.Topic4, div.Topic6, div.Topic8, div.Topic10, div.Topic12, div.Topic14, div.Topic16, div.Topic18, div.Topic20 { background-color: @colorSecondayNavBgEven; font-size: 11px; font-weight: normal; &:hover { background-color: @colorSecondayNavHoverBg; cursor: pointer; a { color: @colorSecondayNavLinkHover } } &:active { background-color: @colorSecondayNavLinkActiveBg; a { color: @colorSecondayNavLinkActive } } } a.Topic1, a.Topic3, a.Topic5, a.Topic7, a.Topic9, a.Topic11, a.Topic13, a.Topic15, a.Topic17, a.Topic19 { color: @colorSecondayNav; .nobg; text-decoration: none; &:hover { background-color: #fff; color: @colorSecondayNavHover; cursor: pointer; } } a.Topic2, a.Topic4, a.Topic6, a.Topic8, a.Topic10, a.Topic12, a.Topic14, a.Topic16, a.Topic18, a.Topic20 { color: @colorSecondayNav; .nobg; text-decoration: none; &:hover { background-color: #fff; color: @colorSecondayNavHover; cursor: pointer; } } .HasChildren { font-size: 12px } div.Current.Item { background-color: #fff; .radiusAll( 3px, 0, 0, 3px ); &:hover { a { cursor: default } } a { color: @colorSecondayNavCurrent; font-weight: bold; .nobg; } span.Count { cursor: default } .Count { color: @colorSecondNaviCount } span.SecondNaviPageCount { color: @colorSecondNaviCount; font-weight: normal; .nobg; cursor: default; } &:hover { color: #000; font-weight: bold; background-color: #fff; .radiusAll( 3px, 0, 0, 3px ); text-decoration: none; cursor: default; } } .Count { color: #ddd; font-size: 9px; margin-right: 30px; } div:hover { span.Count { } span.SecondNaviPageCount { color: @colorSecondNaviCount; font-weight: normal; .nobg; } } .SecondNaviPageCount { position: absolute; left: 204px; width: 30px; text-align: right; top: auto; font-size: 11px; color:#ddd; padding: 2px; } .OpenedNode, .OpenedNodeCurrent { .icon_node_open; display: block; float: left; width: 9px; height: 12px; margin-left: -12px; margin-top: 3px } .ClosedNode { .icon_node_closed; display: block; float: left; width: 9px; height: 12px; margin-left: -12px; margin-top: 3px } // .HasChildren { font-size: 12px } .Leaf { display: block; float: left; margin-left: -10px; } img { } } @content_width: 800px; #Content { background-color: #fff; width: @content_width; min-height: 550px; margin-left: 247px; padding: 0; border: 2px solid #eee; th { border: 0 } } #ContentSurround { position: relative; float: left; /* none if secondary navigation is attached to the main menu - as in paux.de */ } #InteractivityLayer { position: relative; top: 0; right: 5px; float: right; #lesen, #lern { background: @colorReadLearnBackground; color: @colorReadLearn; float: left; padding: 0; .border( 1px, solid, #ccc, #999, #aaa, #ccc ); .radiusAll( 0, 0, 5px, 5px ); &:active { .tabbg_active; .border( 1px, solid, #777, #ccc, #ccc, #777 ); } } } #lesen_current, #lern_current { //.tabbg_passive; background: @colorReadLearnPassiveBackground; color: @colorReadLearn; float: left; padding: 0; .border_shadow_top_left; .radiusAll( 0, 0, 5px, 5px ); cursor: default; } #lesen a, #lern a, a.lesen_current, a.lern_current { color: @colorReadLearn; font-size: 12px; text-decoration: none; padding: 2px 10px 0; .radiusAll( 0, 0, 5px, 5px ); } #lesen a, #lern a { color: @colorReadLearnPassive; //background: @colorReadLearnPassiveBackground; } #lesen_inactive, #lern_inactive { //.tabbg_passive; background: @colorReadLearnDisabledBackground; color: @colorReadLearnDisabled; float: left; padding: 0; .border( 1px, solid, #ccc, #bbb, #bbb, #ccc ); .radiusAll( 0, 0, 5px, 5px ); cursor: default; } a.lesen_inactive, a.lern_inactive { color: #aaa; font-size: 12px; text-decoration: none; padding: 2px 10px 0; .radiusAll( 0, 0, 5px, 5px ); } div.annotation_url { background-color: #f3f3f1; // width: 660px; } .box { background-color: #f3f3f1 } .ShowHideButton { float: left; margin: 10px 0 0 5px; } a.NewAnnotation { text-decoration: none; color: #000; font-weight: normal; padding: 0 6px; font-size: 12px; .border_shadow_bot_right; background-color: #fff; .tabbg_passive; .radius; &:active { .tabbg_active } } .AnnotationFuerInfo { display: block; width: 20px; } .MarkierungsFarbeOff { background-color: white; } .MarkierungsFarbe1 { background-color: @colorMarkierung1; } .MarkierungsFarbe2 { background-color: @colorMarkierung2; } .MarkierungsFarbe3 { background-color: @colorMarkierung3; } .MarkierungsFarbe4 { background-color: @colorMarkierung4; } .info .MarkierungsFarbe1, .info .MarkierungsFarbe2, .info .MarkierungsFarbe3, .info .MarkierungsFarbe4 { padding-right: 10px; } .AnnotationAnWrapper .MarkierungsFarbe1, .info .MarkierungsFarbe1 { background-color: transparent; border-right: 5px solid @colorMarkierung1; } .AnnotationAnWrapper .MarkierungsFarbe2, .info .MarkierungsFarbe2 { background-color: transparent; border-right: 5px solid @colorMarkierung2; } .AnnotationAnWrapper .MarkierungsFarbe3, .info .MarkierungsFarbe3 { background-color: transparent; border-right: 5px solid @colorMarkierung3; } .AnnotationAnWrapper .MarkierungsFarbe4, .info .MarkierungsFarbe4 { background-color: transparent; border-right: 5px solid @colorMarkierung4; } textarea.MarkierungsFarbe1 { border: 2px solid @colorMarkierung1; background-color: @colorMarkierung1ambient; } textarea.MarkierungsFarbe2 { border: 2px solid @colorMarkierung2; background-color: @colorMarkierung2ambient; } textarea.MarkierungsFarbe3 { border: 2px solid @colorMarkierung3; background-color: @colorMarkierung3ambient; } textarea.MarkierungsFarbe4 { border: 2px solid @colorMarkierung4; background-color: @colorMarkierung4ambient; } div.AnnotationDescription { font-size: 12px; } div.AnnotationAnMarkierungFarbe { /* philippj: hintergrundfarbe bestimmende CSS-Klasse selbst kommt aus Datenbank z.B. MarkierungsFarbeNeonGelb */ width: 128px; height: 16px; text-align: center; color: blue; float: right; } div.AnnotationFormSocial, div.AnnotiertesObjektSocial { padding: 5px; float:right; width: 70px; max-width: 70px; margin-top: 10px; } @SymbolColumnWidth: 50px; @AnnotationBoxWidth: 685px; @AnnotiertesObjektWidth: @AnnotationBoxWidth - 15px; @AnnotationBasisObjektWidth: @AnnotiertesObjektWidth - SymbolColumnWidth; @AnnotatedObjectSocialWidth: 340px; div.AnnotationBox { background-color: #f3f3f1; width: @AnnotationBoxWidth; a { color: #000; text-decoration: none; } div.Symbolspalte { width: @SymbolColumnWidth; background-color: transparent; min-height: 10px; float: left; } div.AnnotiertesObjekt { margin: 15px 0 0 15px; padding: 5px 0; background: transparent; width: @AnnotiertesObjektWidth; float: left; clear: left; div.AnnotationBasisObjekt { float: left; background-color: #fff; //width: 570px; width: @AnnotatedBasisWidth; } div.aussageInPopups { margin-bottom: 10px; //width: 480px; //max-width: 480px; .width(@AussageInPopupsWidth); float:left; vertical-align:baseline; background-color: #FFF; padding:5px; } div.infoPopupInPopups { //width: 20px; //max-width: 20px; .width(@InfoPopupInPopupsWidth); margin: 0; padding: 5px; float:left; a.info_pop up { margin: 0; margin-bottom: 8px; } div.infoPopupInPopups, div.infoKategorienInPopups { .width(70px) } } div.AnnotiertesObjektSocial { padding-left: 3px; float:left; vertical-align:top; .width (@AnnotatedObjectSocialWidth - 3px); } } div.Bewertungen { margin-left: 20px; //border-top: 1px solid #999; width: 630px; div.AnnotationsIntro { font-size: 0.8em; margin-top: 10px; padding-bottom: 5px; clear: both; } div.MoeglicheAnnotationen { margin: 0px 12px 15px 80px; .nobg; .radius(10px); float: left; clear: both; width: 430px; div.MoeglicheAnnotation { margin: 3px 12px 0 0; .nobg; .radius(10px); float: left; } .InteraktionFlags { //FIXME Die Anzeigeoptionen sollen nur auf Hover irgendwo einstellbar sein, hier stoeren sie etwas display: none; clear: both; padding-top: 3px; span.InteraktionSymbol { background-repeat: no-repeat; background-position: 0 0; padding: 1px 8px; // Platz fuer die Grafik schaffen } span.InteraktionSymbol.Oeffentlich { .icon_public } span.InteraktionSymbol.Ausblenden { .icon_hide } span.InteraktionSymbol.AnmerkungAusblenden { .icon_hide_remark } span.InteraktionSymbol.Wiedervorlage { .icon_followup } span.InteraktionSymbolName { font-size: 10px; color: #666; } div.Anzeigeoptionen { font-size: 0.8em; margin-bottom: 2px; } } .AnnotationPair { float: left; margin-right: 55px; .AnnotationEntry { float: left; width: 25px; text-align: center; padding: 5px 0; .AnnotationSymbol { text-align: center; img.unselected { .opaque(0.80); .shadow (2px, #555); position: relative; left: -1px; top: -1px; } div.unselected { } } .AnnotationSymbolName { font-size: 10px; color: #666; margin: 0 3px; clear: both; } } } div.AnnotationSymbolName.selected, .selected span.InteraktionSymbolName { font-weight: bold; color: #222; } } div.BisherigeInteraktionen { clear: both; margin-left: 0; padding-top: 10px; table { width: 630px; margin-top: 10px; tfoot { span.line { border-top: 1px solid #AAA; width: 620px; display: block; line-height: 1px; } } tbody { } th { background: #aaa; padding: 5px 0; color: #222; font-weight: normal; font-size: 14px; } td { border: 0; padding: 3px; background: #fff; border: 0; vertical-align: middle; } td.Anno { } th.column-1 { width: auto; text-align: left; padding-left: 10px; } th.column-2 { width: auto } th.column-3 { } td.column-1 { text-align:left } td.column-2 { width: auto; text-align: center; } td.column-3, td.column-4, td.column-5, td.column-6, td.column-7 { width: auto; text-align: center; } th.column-1 { .radiusAll( 5px, 0, 0, 0 ) } th.column-1, th.column-1, th.column-2 { border-right: 1px solid #777 } th.column-3 { .radiusAll( 0, 5px, 0, 0 ) } } } } div.AnnotationenAn, div.AnnotiertesObjekt { clear: both; font-size: 12px; color: #111; padding-top: 7px; margin: 5px 0 0 15px; //border-top: 1px solid #999; //width: 648px; width: @AnnotatedObjectWidth; div.visibleAnnotationenAn { padding-top: 15px; } div.AnnotationAnWrapper { /* border-bottom: 1px solid #999; */ margin-bottom: 10px; div.AnnotationAnAvatar { border: 0; clear: both; float: left; height: 42px; width: 42px; img.Avatar { } div.FbProfilePic { .height (50px); .width (50px); overflow: hidden; .radius (2px); .fb_profile_pic_rendered img { //.height (42px); //.width (42px); } } } } div.AnnotationAnBox { margin: 12px 0px 0px 10px; vertical-align: top; float: left; width: 470px; //min-height: 70px; div.AnnotationAn { position: relative; margin-left: 5px; padding-bottom: 5px; } div.AnnotationAn.EigeneAnnotation { color: #117; } div.AnnotationAnUser { float: left; span { font-weight: bold } } div.AnnotationAnTrenner, div.AnnotationAnDatum, div.AnnotationAnStatus { float: left; margin-left: 7px; color: #aaa; } div.FacebookLikeCounter { float: left; margin-left: 7px; color: #aaa; } div.AnnotationAnHeader { float: left; padding-left: 5px; } div.AnnotationAnLoeschen { float: right; margin-right: -38px; a { .icon_delete_annotation } } div.AnnotationAnText { clear: both; padding: 5px 0 0 5px; margin-right: 2px; } div.AnnotationAnInteraktion { padding: 5px 0 0 5px; width: 25px; } } div.showMoreAnnotationenAn { div.showMoreAnnotationenAnLink { //border-bottom: 1px solid #999; padding-bottom: 7px; margin-bottom: 10px; clear: both; a { color: #2371a8; } } } } div.AnnotationForm { margin-left: 0; //padding: 15px 0; div.AnnotationFormTextareaWrapper { div.AnnotationAnAvatar { padding-right: 8px; float: left; div.FbProfilePic { .height (50px); .width (50px); overflow: hidden; .radius (2px); .fb_profile_pic_rendered img { //.height (42px); //.width (42px); } } } div.AnnotationAnKommentar { float:left; } div.AnnotationFormTextareaLabel { font-weight: bold; color: #666666; padding-bottom: 5px; } textarea { font-size: 0.8em; width: 580px; border: 1px solid #ccc; } } div.AnnotationFormStatusBar { padding: 5px 30px 0 0; margin-bottom: 10px; float:none; width:540px; span.AnFacebookSenden { background: url(/images/facebook_logo.png) no-repeat 160px center; padding: 9px 28px 4px 20px; span.AnFacebookSendenText { padding: 0px 0px 0px 4px; } input[type="checkbox"] { font-size: 16px; } } input.AnnotationFormSubmitButton { padding-top: 1px; float: left; font-size: 14px; } div.AnnotationFormMarkierungsFarbeGruppe { padding-top: 1px; div.AnnotationFormMarkierungsFarbeAuswahl { border: 1px solid #666; width: 20px; height: 20px; margin-left: 6px; float: right; color: blue; } } } } div.BewerteDenX { float: left; } div.BewertungenEinblenden { padding: 4px 0; margin-right: 5px; //border-top: 1px solid #777; width: 630px; margin-left: 15px; div.BewerteDenX { padding: 0 0 10px 0; font-size: 13px; } a { .icon_einblenden } } div.BewertungAusblenden a { .icon_ausblenden; } div.BewertungAusblenden a, div.BewertungenEinblenden a { float: right; text-align: right; font-size: 11px; color: #2371a8; width: 180px; position: relative; //left: 250px; top: -25px; padding-right: 25px; } } .AnnotationLink, .NewAnnotationLink { padding: 0 0 4px 20px; background-position: left 0 3px; display:block; height:20px; } .AnnotationLink { .icon_pen; &:active { .icon_pen } } .NewAnnotationLink { .icon_pen_new; &:active { .icon_pen_new } } #TernaryNavigation { width: auto; padding: 10px 128px 10px 110px; overflow: visible; float: left; .HatKinder { .icon_node_closed; display: block; float: left; width: 9px; height: 12px; margin-left: -14px; margin-top: 3px; } div.NavigationalLink { padding-top: 10px; overflow: visible; p.dauerlektion_overview { margin: 1px 0 0; font-size: 10px; } p.beschreibunglektion_overview { font-size: 11px; margin: 3px 0 0; color: @colorTernaryNavDesc; width: 560px; text-align: justify; } .Seitenzahl { display:block; border-bottom: 2px dotted #aaa; text-align: right; color: @colorTernaryNavPageNo; font-size: 12px; margin-top: -12px; } } .NavigationalLink { font-size: 13px; color: @colorTernaryNav; font-weight: bold; margin: 0; } a { text-decoration: none; &:active { text-decoration: none } } .Count { color: @colorTernaryNavDesc; font-size: 8px; } } div.dauerlektion, p.dauerlektion_overview { font-size: 10px; color: @colorLernebenenCounter; a { color: @colorLernebenenCounter; font-size: 10px; } span.anzahlFirst, a span.anzahlFirst:active { padding-left: 4px; } a span.anzahlFrageAntwort_von, a span.anzahlMCTest_von, a span.anzahlLueckentext_von { text-decoration: underline; } } div.dauerlektion { text-align: right; text-decoration: none; } #SeitenzahlNavi { float: left; top: 10px; text-align: center; width: 100%; color: #000; font-size: 14px; margin-top: 60px; padding-right: 30px; a { text-decoration: none; color: #555; line-height: 200%; padding: 2px 7px; font-size: 10px; background-color: #fff; .tabbg_passive; .radius(10px); &:active { text-decoration: none; padding: 3px 5px 1px; .tabbg_active; .border_shadow_top_left; } } .AktuelleSeite { font-size: 10px; text-decoration: none; padding: 2px 7px 3px 7px; background-color: #fff; .tabbg_passive; .border_shadow_bot_right; .radius(10px); } .LetzteSeite { color: #999; font-size: 10px; vertical-align: bottom; } } #Seitenzahl { top: 10px; text-align: right; width: 680px; color: #000; font-size: 14px; padding-right: 30px; clear: both; float: right; } .JumpTarget { .border_shadow_top_left; margin: 10px 0 0; width: 34px; height: 21px; text-align: right; .radius; padding: 1px 5px 0 0; vertical-align: bottom; } #seitencode_einbetten { font-size: 10px; text-align: left; color: #777; background-color: transparent; //padding: 40px 0 55px 0; //width: 100%; clear: both; div.seitencode_text { color: #777; } div.seitencode_link { color: #777 !important; &:hover { color: #000 } a { color: #777; text-decoration: underline; } } } #Content{ #seitencode_einbetten { text-align: center; } } #SeitennummerLernebene { position: relative; top: 40px; /* width: 1035px; */ width: @content_width - 60px; color: #666; font-size: 14px; text-align: right; margin-top: -20px; } #SiteMap { font-family: Verdana; font-size: 12px; color: #666; width: 698px; margin: 30px 0 0 30px; padding-top: 30px; line-height: 150%; div.header { position: relative; padding-top: 20px; span.anzahlinfosinlektion { } div.anzahlinfosinlektion, div.empfohlenedauerminuten, div.anzahlFrageAntwort, div.anzahlMCTest, div.anzahlLueckentext, div.Seitennummer { position: absolute; top: auto; left: 670px; width: 30px; text-align: right; font-size: 10px; color: #888; margin-top: -20px; z-index: 0; } div.anzahlinfosinlektion { color: #44a7cc; /*left: 500px;*/ left: @content_width - 300px; } div.empfohlenedauerminuten { /* left: 530px; */ left: @content_width - 260px; color: #b65; } div.anzahlFrageAntwort { /*left: 560px;*/ left: @content_width - 220px; color: #393; } div.anzahlMCTest { /* left: 590px;*/ left: @content_width - 180px; color: #393; } div.anzahlLueckentext { /* left: 620px;*/ left: @content_width - 140px; color: #393; } div.Seitennummer { /* left: 620px;*/ left: @content_width - 100px; color: #393; } } div.ActiveSiteMap { border-bottom: 1px dotted #ccc } .Level0, .Level1, .Level2, .Level3, .Level4, .Level5, .Level6, .Level6, .Level7, .Level8, .Level9, .Level10, .Level11, .Level12, .Level13 { color: #2371a8 } .HasChildren { font-size: 12px; color: #2371a8; } .Node { .icon_node; display: block; float: left; width: 9px; height: 12px; } ol { padding-left: 25px; color: #aaa; &:hover { color: #f00 } } ol.ListLevel0 { list-style: circle outside; &:hover { } } ol.ListLevel1 { list-style: upper-latin outside; &:hover { background-color: #fff } } ol.ListLevel2 { list-style: upper-roman outside; &:hover { background-color: #f4f9fd } } ol.ListLevel3 { list-style: decimal outside; &:hover { background-color: #e7f3ff } } ol.ListLevel4 { list-style: lower-latin outside; &:hover { background-color: #dceeff } } ol.ListLevel5 { list-style: decimal-leading-zero outside; &:hover { background-color: #d1e7fc } } ol.ListLevel6 { list-style: lower-roman outside; &:hover { background-color: #c5e1fc } } ol.ListLevel7 { list-style: lower-roman outside; &:hover { background-color: #b1d9ff } } ol.ListLevel8 { list-style: lower-latin outside; &:hover { background-color: #a1d0fc } } .ActiveSiteMap { cursor: pointer } .InactiveSiteMap span { color: #999 } .Count { color: #aaa; margin-left: 5px; } img { } } #Modul_Lernbereich { padding: 30px 5px 50px 0; margin-left: 50px; /* width: 100%; */ width: @content_width - 50px; font-size: 12px; // background-color: #fff; div.ControlButtons { position: absolute; top: 186px; left: 863px; width: 140px; text-align: center; } form { display: inline } div.Heading { padding: 0; margin: 20px 0 0; font-size: 10px; height: auto; overflow: auto; // background-color: #fff; width: @content_width - 110px; border-bottom: 1px solid #ccc; span.tab, span.tab_aktiv, span.firsttab, span.firsttab_aktiv, span.lasttab { font-size: 12px; text-align: center; padding: 3px 5px 2px; .border_shadow_bot_right; background-repeat: repeat-x; .radiusAll( 7px, 7px, 0, 0 ); display: block; float: left; } span.firsttab_aktiv, span.firsttab { color: #555; background-color: #ddd; } span.firsttab_aktiv { .tabbg } span.firsttab { .tabbg_passive } span.tabbg { color: #aaa; background-color: #fff; .tabbg_passive; &:active { .tabbg_active } } span.lasttab { font-size: 0; height: 30px; .width(20px); .icon_remove_topic; background-color: #000; } // FIXME: braucht noch eigenen Style, derzeit leuchtet er bei allen Tabs span.tab_aktiv { color: #444; background-color: #ddd; .tabbg; } a { color: #666 } } div.Navigation { margin: 20px 0; background-color: #fff; /* width: 560px; */ width: @content_width - 100px; text-align: right; form { position: absolute; top: 140px; left: 886px; width: 120px; text-align: left; } // um aktuelle Info-Nummer in Lernebenen-Navi hervorheben zu koennen a.Current { background-color: #eee; color: #111; text-decoration: none; padding: 2px 7px; .tabbg; .border_shadow_top_left; } a.SatzVorUndZurueck { text-decoration: none; color: #555; line-height: 200%; padding: 2px 8px; margin-right: -3px; // geht nicht gut im Lueckentext margin-right: 0; font-size: 12px; .tabbg_passive; .radius; &:active { color: #00f; .border_shadow_top_left; .tabbg_active; } } } div.Ebene { .info_popup { visibility: hidden } } div.Grafiken { width: 100%; height: auto; img { float: none; padding: 30px 35px 0; } img.Thumb { padding: 2% 0; width: 90px; float: right; margin-right: 5px; } } div.Vertiefung_Lernbereich { margin: 70px 0 0; background-color: #fff; .width(@content_width - 108px); padding-bottom: 10px; } } #antwort_zeigen_link a { width: 450px; color: #555; padding: 2px 14px; .border( 1px, solid, #fff, #fff, #fff, #fff ); } // Share-Buttons .popup_share, div.AnnotiertesObjektSocial, #microsite_share { padding: 4px 0 0 30px; } .popup_share { float: left; padding: 20px 0 0 4px; } .share_container { float: left; width: 500px; margin: 0 0 20px 0; } #popup_fb, #annotation_fb, #microsite_fb, #popup_twitter, #annotation_twitter, #microsite_twitter { float: left; margin: 0 0 0 5px; } #popup_gplusone, #annotation_gplusone, #microsite_gplusone { float: left; margin: 0 0 0 6px; } .fb_edge_widget_with_comment { width: 60px; } .ui-widget-content.focused_popup { opacity: 0.99; filter:Alpha(Opacity=99); border-right: 1px solid #777; border-bottom: 1px solid #777; border-left: 1px solid #bbb; border-top: 1px solid #ccc; box-shadow: 5px 25px 50px #555, inset 1px 2px 2px #777; -moz-box-shadow: 10px 30px 50px #555, inset 1px 2px 2px #777; -webkit-box-shadow: 5px 15px 140px #555, inset 1px 2px 2px #777; } .ui-widget-content.focused_popup.ui-draggable-dragging { opacity: 0.8 !important; filter: Alpha(Opacity=80) !important; -webkit-transition: none !important; -moz-transition: none !important; box-shadow: none !important; -moz-box-shadow: none !important!; -webkit-box-shadow: none !important!; } .ui-widget-header.focused_popup { .image_1px_focused_popup } .ui-dialog-titlebar.focused_popup .ui-dialog-title { color:#000; } .mandatory input { background-color: #f99; } // Page-Player ul.playlist { list-style-type:none; margin: 0; padding: 0; li { /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */ position:relative; display:block; width: 200px; font-size: 11px; color:#666; padding: 0.25em 0.5em 0.25em 2em; border:none; letter-spacing: 1px; /* ZOMG WEB X.0. ;) */ /* background-color:#f9f9f9; */ background-color:#44a7cc; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition-property: hover; -webkit-transition: background-color 0.15s ease-in-out; .image_video_bg; a { display:block; text-decoration:none; font-weight:normal; text-align: left; color:#fff; font-size: 110%; outline:none; position:relative; top: -2px; padding: 5px 5px 2px; /* z-index: 1; */ text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */ } } } .youtube-player { padding: 30px 0 10px 0; } body.use-hover { a:hover, a.uri:hover { text-decoration: underline; color: #00f; } a.themenlink:hover { .nobg; cursor: pointer; text-decoration: none; } .info_popup:hover { .icon_info_popup_hover } .hyperlinks_button:hover { .icon_hyperlinks_button } .events_button:hover { .icon_events_button } .products_button:hover { .icon_products_button } .references_button:hover { .icon_references_button } .persons_button:hover { .icon_persons_button } .media_button:hover { .icon_media_button } #satz_id_hidden span:hover { color: #999; .opaque } .buchen:hover { .icon_booking_hover; text-decoration: none } .selectboxes:hover { } .demozielgruppe:hover, .demoschwierigkeitsgrad:hover, .demopruefungsrelevanz:hover, .demoapplybutton:hover { color: #444; .opaque; } .demozielgruppe:hover, .demoschwierigkeitsgrad:hover, .demopruefungsrelevanz:hover { background-color: #eee; border: 1px solid #bbb; } .demoapplybutton:hover { background-color: #fdd; border: 2px outset #bbb; } span.hoverheading:hover, span.lektion_thema:hover, span.lektion_gliederung:hover, span.lektion_medium:hover, span.lektion_person:hover, span.lektion_veranstaltung:hover, span.lektion_produkt:hover, span.lektion_hyperlink:hover, span.lektion_fundstelle:hover, a.verknuepfungAktion:hover, a.verknuepfung:hover { .nobg; cursor: pointer; //background-color: none; } span.hoverheading:hover { text-decoration: none; background-color: #fff; color: #44a7cc; } span.lektion_gliederung:hover { color: #005; } span.lektion_medium:hover { color: #051; } span.lektion_person:hover { background-color: #dde8ab; color: #040; } span.lektion_veranstaltung:hover { color: #000; } span.lektion_produkt:hover { color: #f00; } span.lektion_hyperlink:hover { color: #500; } span.lektion_fundstelle:hover { color: #000; } a.verknuepfungAktion:hover { text-decoration: none } a.verknuepfung:hover { text-decoration: none; color: #220; } #lesen:hover, #lern:hover { .tabbg; cursor: pointer; } a.loadInfo:hover, a.navigational:hover, a.lt_antwort:hover, a.navigational_active:hover, a.antwort_button:hover, a.mcantwort:hover, a.mcantwort_selected:hover, a.lueckenantwort_alternative:hover, #lueckenantwort_inactive:hover, #luecke_passive:hover { text-decoration: none; background-repeat: repeat-x; .border_shadow_bot_right; } a.navigational:hover, a.lt_antwort:hover, a.navigational_active:hover, a.antwort_button:hover, a.mcantwort:hover, a.lueckenantwort_alternative:hover, #lueckenantwort_inactive:hover, #luecke_passive:hover, a.SatzVorUndZurueck:hover, #antwort_zeigen_link a:hover { .tabbg } a.navigational:hover, a.lt_antwort:hover { color: #111 } a.navigational_active:hover { color: #eee; padding: 2px 7px; } a.antwort_button:hover { color: #111; padding: 2px 11px; } a.mcantwort:hover { color: #111; padding: 1px 6px 3px; cursor: pointer; } a.lueckenantwort_alternative:hover, #lueckenantwort_inactive:hover, #luecke_passive:hover { color: #111; padding: 1px 6px 3px; cursor: pointer; } a.SatzVorUndZurueck:hover { text-decoration: none; padding: 2px 7px; background-repeat: repeat-x; .border_shadow_bot_right; } #antwort_zeigen_link a:hover { text-decoration: none; color: #444; background-repeat: repeat-x; .border_shadow_bot_right; } a.lueckenantwort:hover { text-decoration: none; color: #fff; background-color: #0000ff; } a.lueckenantwort_selected:hover, a.mcantwort_selected:hover { font-size: 14px; color: #444; background-color: #ddd; .tabbg_passive; .radius; } a.lueckenantwort_selected:hover { padding: 1px 7px 3px; text-decoration: none; .border_shadow_bot_right; } a.mcantwort_selected:hover { padding: 1px 6px 3px; } a.richtigbewerten:hover, a.falschbewerten:hover { text-decoration: none; padding: 0 8px; background-repeat: repeat-x; .border_shadow_bot_right; } a.richtigbewerten:hover { color: #030; .icon_lt_correct; } a.falschbewerten:hover { color: #400; .icon_lt_incorrect; } span.beschreibung_hidden:hover { color: #777; .opaque; } a.antwortmitverknuepfung:hover, a.antwortmitverknuepfung_selected:hover { .nobg } #lt_antwort_richtig:hover, span.lueckenantwort_richtig:hover { color: #111; .nobg; } a.mc_error:hover { border: 1px solid #c33 } #Header .LoginButton:hover { color: #000; background-color: #fff; .tabbg; cursor: pointer; } #Header a.Logout:hover { text-decoration: none; .tabbg; .border_shadow_bot_right; } .powered_by:hover { text-decoration: none } #PrimaryNavigation { a:hover { background-color: @colorPrimaryNavHoverBg; color: @colorPrimaryNavHover; text-decoration: none; padding: 4px 10px 6px 10px; .borderTR; .radiusAll( 6px, 6px, 0, 0 ); } .Current:hover, a.Current:hover { text-decoration: none; cursor: default; } } a.Annotation:hover, a.NewAnnotation:hover { text-decoration: none; .tabbg_passive; } .AnnotationLink:hover, .NewAnnotationLink:hover { text-decoration: none } .AnnotationLink:hover { .icon_pen } .NewAnnotationLink:hover { .icon_pen_new } #TernaryNavigation a.NavigationalLink:hover { text-decoration: underline } p.dauerlektion:hover a { text-align: right; text-decoration: none; color: #aaa; } a span.anzahlFirst:hover { text-decoration: none; color: #aaa; font-size: 10px; padding-left: 4px; } a span.anzahlFrageAntwort:hover, a span.anzahlMCTest:hover, a span.anzahlLueckentext:hover { color: #aaa } a span.anzahlFrageAntwort_von:hover, a span.anzahlMCTest_von:hover, a span.anzahlLueckentext_von:hover { color: #111 } #SeitenzahlNavi a:hover { color: #000; padding: 2px 6px; .tabbg; .border_shadow_bot_right; } div.empfohlenedauerminuten:hover, div.anzahlFrageAntwort:hover, div.anzahlMCTest:hover, div.anzahlLueckentext:hover { background-color: #fff } #SiteMap ol:hover { color: #ff0000 } ol.ListLevel1:hover { background-color: #fff } ol.ListLevel2:hover { background-color: #f4f9fd } ol.ListLevel3:hover { background-color: #e7f3ff } ol.ListLevel4:hover { background-color: #dceeff } ol.ListLevel5:hover { background-color: #d1e7fc } ol.ListLevel6:hover { background-color: #c5e1fc } ol.ListLevel7:hover { background-color: #b1d9ff } ol.ListLevel8:hover { background-color: #a1d0fc } span.Level1:hover { background-color: #fff } span.Level2:hover { background-color: #fff } span.Level3:hover { background-color: #fff } span.Level4:hover { background-color: #fff } span.Level5:hover { background-color: #fff } span.Level6:hover { background-color: #fff } span.Level7:hover { background-color: #fff } span.Level8:hover { background-color: #fff } span.Level1:hover, span.Level2:hover, span.Level3:hover, span.Level4:hover, span.Level5:hover, span.Level6:hover, span.Level7:hover, span.Level8:hover { padding: 2px 0 } a.Topic1:hover, a.Topic2:hover, a.Topic3:hover, a.Topic4:hover, a.Topic5:hover, a.Topic6:hover, a.Topic7:hover, a.Topic8:hover, a.Topic9:hover { text-decoration: none; color: #fff; } #Modul_Lernbereich_Heading { span.tab:hover { .tabbg_passive } } #Modul_Lernbereich_Navigation a.Current:hover { cursor: default } } #Werbevideo, #Werbegrafik { //padding-top: 10px; } #Werbevideo { float: left; padding-left: 10px;} #Werbegrafik img { padding-left: 10px; } #Registrierung { padding-left: 10px; font-size: 12px; #Select { margin-bottom: 15px; select { width: 360px; color: black; border-radius: 10px; font-size: 14px; border-right: 2px solid #777; border-bottom: 2px solid #777; border-left: 2px solid #bbb; border-top: 2px solid #ccc; padding: 5px; /* box-shadow: 5px 25px 50px #555; -moz-box-shadow: 10px 30px 50px #555; -webkit-box-shadow: 5px 15px 140px #555; */ margin-bottom: 20px; } option { border-radius: 10px; background-color: transparent; font-size: 14px; padding: 3px; } } input, select { width: 240px; } #Modul { #ModulGrunddaten { float: left; clear: both; width: 300px; padding-right: 10px; #ModulName { clear: both; font-size: 20px; line-height: 24px; font-weight: bold; } #ModulPreis { clear: both; text-align: right; font-size: 20px; margin-bottom: 15px; color: #666; span.ModulPreisEuro { font-weight: bold; } } #Email { clear: both; font-size: 16px; margin-bottom: 15px; } #Button { clear: both; font-size: 16px; input{ height: 58px; } } #ModulBewertung { clear: both; margin-top: 24px; h1 { font-size: 18px; margin-bottom: 5px; } p { margin-left: 6px; } } } #ModulScreenshot { float: left; width: 300px; padding: 0 10px; img { width: 300px; } } #ModulDetails { float: left; width: 300px; padding: 0 10px; #ModulBeschreibung { clear: both; font-size: 12px; margin-bottom: 15px; h1 { font-size: 16px; } p { padding-top: 5px; font-size: 14px; } } #ModulAutorenListe { clear: both; margin-bottom: 15px; h1 { font-size: 16px; } ul { margin-top: 5px; padding-left: 15px; font-size: 14px; line-height: 20px; } } } } } #RegistrierungFehler, #PasswordResetFehler { color: red; margin-left: 10px; padding: 10px; border: 1px solid #922; width: 755px; margin-bottom: 20px; background: #ddd; } #RegistrierungVorgemerkt, #PasswordReset { margin-left: 10px; margin-top: 10px; font-size: 14px; h1 { font-size: 24px; margin-bottom: 5px; } p { line-height: 22px; } } #PasswordReset #Email input { margin: 10px 0; width: 400px; } #PasswordReset #Password input { margin: 10px 0; width: 200px; } #RegistrierungAbschliessen { margin-left: 10px; margin-top: 10px; font-size: 14px; h1 { font-size: 16px; margin-bottom: 5px; } input { background: #ddd; margin-bottom: 5px; width: 180px; } .mandatory input { background: #eaa; } p.Widerruf { margin: 10px 0; } #AGB { margin: 10px 0; input { width: auto; } } } // style for the primary navigation search box #Item_search{ div div input{ margin-left: 10px; margin-top: 4px; border: 1px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 1px inset, rgba(255, 255, 255, 0.2) 0 1px 0; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 2px 1px inset, rgba(255, 255, 255, 0.2) 0 1px 0; box-shadow: rgba(0, 0, 0, 0.6) 0 2px 1px inset, rgba(255, 255, 255, 0.2) 0 1px 0; background-color: rgba(255, 255, 255, 0.1); color: white; } input:focus{ background-color: white; color: black; } } // Style for the start-template #ModulStartseite{ div.LektionStartseite{ position: relative; float: left; min-height: 200px; width: 220px; margin-top: 20px; margin-left: 15px; padding: 20px; background-image: url(/images/feld_1px.png); background-repeat:repeat-x; background-color:white; border: 5px double #F4F4F4; border-bottom: 2px solid #F4F4F4; border-radius: 1em; box-shadow:0px 3px lightgray; span.LektionName{ font-size: 16px; } span.LektionThemen{ div.Thema{ div.ThemaImages{ float: right; margin-top: -55px; margin-right: -10px; img.ThemaMitGrafikGrafik{ padding: 0; position: relative; height: auto; left: 0; } } div.ThemaInfos{ span.Satz{ float: left; font-size: 12px; } background-color: transparent; } } a.NavigationalLink{ float: right; font-size: 14px; color: #58F; } } } div.Lektion1{ width: 790px; margin-top: 10px; } } // Style for SearchPage #SearchSite{ .TabFrame { float: left; position: relative; width: 26%; } // CHANGE ME - DEMO CSS THIS IS THE FIRST LINE OF TABS ul.tabs{ margin: 0; padding: 0; float: left; list-style: none; height: 26px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 25px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 25px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #E0E2E4; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 13px; padding: 0 20px 0 30px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } // END DEMO CSS div.ResultFrame{ // CHANGE ME - DEMO CSS THIS ARE THE SUB_TABES float: left; position: relative; .hitCount { border: none; font-size: 13px; margin-left: 4px; &:hover { background-color: transparent; padding: 0; border:none; left: 0; top: 0; .shadow( 0px, #fff ); /* cursor: default; */ } } ul.tabs_lvl1{ margin: 0; padding: 0; float: left; list-style: none; width: 30%; } ul.tabs_lvl1 li { float: left; margin: 0; padding: 0; height: 20px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 19px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #fff; margin: 1px 8px 3px 0px; overflow: hidden; /* background: #dde9ff; */ background: #def; border-radius: 4px; box-shadow: 1px 1px 2px #666; } ul.tabs_lvl1 li a { .width(130px); text-decoration: none; color: #000; display: block; font-size: 12px; padding: 0 10px; outline: none; } .tab_container_lvl1 { border: 1px solid #999; overflow: hidden; //clear: both; float: left; width: 73%; background: #fff; margin-bottom: 15px; div.tab_content_lvl1{ span.result{ width: 500px; position: relative; float: left; margin-bottom: 18px; span.Satz.continuous{ float: left; width: 100%; } span.ThemenMitLektion{ float: left; margin: 0px 0px 5px 0px; width: 100%; span.ThemaMitLektion{ float: left; width: 100%; margin-top: 5px; float: left; span.Paragraph{ color: #aaa; padding-right: 10px; float: right; } a{ color: @colorHeading; font-size: 13px; float: left; width: 60%; } span.Seite{ font-size: 12px; color: #444; float: right; span.SeitenZahl{ font-size: 12px; padding: 0 3px; } } } } } } } .tab_content_lvl1 { padding: 20px; font-size: 13px; div.info{ div.infoInLektion{ min-width: 450px; max-width: 450px; } } } // Custom css div.results_lvl1{ div.ResultFrame_lvl1{ position: relative; float:left; ul.tabs_lvl1{ li{ &:hover { position: relative; top: -1px; left: -1px; box-shadow: 1px 2px 6px #444; } &:active { top: 0; left: 0; background-color: @colorReadLearnBackground; box-shadow: 1px 1px 2px #666 inset; } a:hover{ /* background-color: #fff; */ } } li.active{ background-color: @colorReadLearnBackground; box-shadow: 2px 2px 2px #666 inset; &:hover { position: relative; top: 0px; left: 0px; box-shadow: 2px 2px 2px #666 inset; } } a span.kategorieBild{ border:none; padding: 0; position: relative; top: 3px; &:hover { background-color: transparent; padding: 0; border:none; left: 0; top: 3px; .shadow( 0px, #fff ); /* cursor: default; */ } } } } } ul.tabs{ margin-top: 20px; li{ a{ span.hitCount{ } } } li.Satz{ background: url(/images/popups/info.png) no-repeat 8px 4px; background-color: #dadcde; } li.Absatz{ background: url(/images/popups/thema.png) no-repeat 8px 4px; background-color: #dadcde; } li.Seite{ background: url(/images/popups/lektion.png) no-repeat 8px 4px; background-color: #dadcde; } li.Werk{ background: url(/images/popups/modul.png) no-repeat 8px 4px; background-color: #dadcde; } li.Bild{ background: url(/images/popups/grafik.png) no-repeat 8px 4px; background-color: #dadcde; } li.active{ background-color: #fff; border-bottom: 1px solid #fff; } li:hover{ background-color: #fff; } } div.tab_container{ div.tab_content{ div.results{ div.result{ margin-top: 20px; border-width: thin; border-color: black; border-style: solid; } } } } } } // Style for autocomplete box ul.ui-autocomplete, ui-corner-all{ border-radius: 0px; padding-left: 5px; li.ui-menu-item{ list-style: none; a.ui-corner-all{ span{ border: none; font-size: 13px; &:hover { background-color: transparent; padding: 0; border:none; left: 0; top: 0; .shadow( 0px, #fff ); /* cursor: default; */ } } span.match{ font-weight:bold; font-size: 17px; } span.hits{ } } } } // style while loading input.ui-autocomplete-loading { background: white url('/images/spinner.gif') right center no-repeat;} // Default Style for onpage Annotations div.AnnotationSmallWrapper{ span.AnnotationBar{ background-color: #fffddd; span.KommentarCount{ } } span.AnnotationFuerInfo{ form span.AnFacebookSenden{ } a.annotate{ } } } // Hover style for learnbg a.learnbg:hoover { background-color: #FB0; } /* END */ /* Non-semantic helper classes */ // For image replacement .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } // Hide for both screenreaders and browsers: // css-discuss.incutio.com/wiki/Screenreader_Visibility .hidden { display: none; visibility: hidden; } // Hide only visually, but have it available for screenreaders: by Jon Neal. // www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } // Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } // Hide visually and from screenreaders, but maintain layout .invisible { visibility: hidden; } // The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. // j.mp/bestclearfix .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } // Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page .clearfix { zoom: 1; } /* Media queries for responsive design */ @media all and (orientation:portrait) { // Style adjustments for portrait mode goes here } @media all and (orientation:landscape) { // Style adjustments for landscape mode goes here } // Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) // consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ @media screen and (max-device-width: 480px) { // Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust // html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* Print styles */ // Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ @media print { * { background: transparent !important; color: #000 !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } // Black prints faster: sanbeiji.com/archives/953 a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } // Dont show links for images, or javascript/internal links pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } // css-discuss.incutio.com/wiki/Printing_Tables tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /* Platz auff?llen */ .fill { float: left; height: 10px; border: none; } /* Erfolgsbalken */ @successbarwidth: 500px; @successbarheight: 20px; .successbar { width: @successbarwidth; height: @successbarheight; float: left; position: relative; margin-left: 30px; } .bar { float: left; height: @successbarheight; } .spinner { position: fixed; top: 50%; left: 50%; margin-left: -50px; /* half width of the spinner gif */ margin-top: -50px; /* half height of the spinner gif */ text-align:center; z-index:1234; overflow: auto; width: 100px; /* width of the spinner gif */ height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */ } /* override settings from popups (ui-widget etc.) with more specific */ .cluetip-outer .cluetip-inner { border: none; box-shadow: none; background: none; background-color: #fff; } .optcontainer { float: none; clear: both; } .option-indicator { float: left; width: 20px; height: 20px; margin-right: 5px; } .option-text { float: left; height: 20px; cursor: pointer; margin-bottom: 4px; } .siteOptions { float: left; } .option_yes { right: 5px; //background-color: #000; margin: 4px 5px 0 0; background: url(/images/tick.png) no-repeat; } span.Satz { display: block; } #OptionsMenu a:hover { outline: none; border-right: none; border-top: none; border-radius: none; } #PrimaryNavigation .OptionsMenu:hover { outline: none; border-right: none; border-top: none; border-radius: none; } .login-box { position: relative; width: 300px; left: 50%; margin-left: -150px; margin-top: 20px; } div.PUsername, div.PPassword { float: left; margin: 10px 10px 10px 0px; } .login-page { h1 { font-size: 20px; } h2 { font-size: 16px; padding-top: 10px; color: #333; } } video { width: 560px; height: 420px; } .ThemaMitLektion { position: relative; } .Paragraph_Seite { position: absolute; right: 0; bottom: 0; } body, html { background: url(/images/bg.jpeg) repeat-x 0 0; background-color: #F5F6F7; max-width: none; min-width: none; padding:0px; position: relative; } body { width:auto; min-width:985px; width:auto; } #container { .width(1012px); margin-left: 3px; } #main { padding:0 15px; border: 1px solid #ddd; border-radius: 1em; width:auto; margin: 0 7% 0 2%; background-color:white; position:relative; top:80px; box-shadow: 0.6px 0.1px 4px 0.5px #000 inset; -moz-box-shadow: 0.6px 0.1px 4px 0.5px #000 inset; -webkit-box-shadow: 0.6px 0.1px 4px 0.5px #000 inset; } #Header { border:none; .LogoBox { a { } } } #Header { border: none; .headerBG; background-position: 0 1px; background-repeat: repeat-x; .radius(10px); .LogoBox { a { display: block; /* float: left; */ background: url("/images/paux_logo_big.png") no-repeat scroll 0 0 transparent; float:none; height: 72px; width: 224px; } } .LoginLogout { visibility: hidden; .Register { visibility: hidden; a { color: #fff } } .Login { overflow: auto; height: 75px; width: 170px; input { font-size: 9px; background-color: #ddd; } .Username, .Password { } .Username { } .Password input, .Username input { } .login_button { .LoginButton { .tabbg; &:hover { .image_header_bg; } &:active { .tabbg_active } } } .login_button input { } .password_reset { a { } } } a.Logout { top: -5px; left: 115px; // 210px; margin-right: -3px; color: #555; font-size: 12px; .tabbg_passive; .radius; &:hover { padding: 2px 7px; .tabbg; .border_shadow_bot_right; } &:active { .border_shadow_top_left; .tabbg_active; } } } } /* #Header a.register, #Header span.LoginLogout, #lesen_current, #lern_inactive, #PrimaryNavigation .Item5, #LektionFilter { display: none; } */ #Header a.register, #Header .LoginLogout .Login .password_reset, #lesen_current, #lern_inactive, #LektionFilter { display: none; } @content_width: 880px; #Content { position:relative; top:35px; clear:both; margin:0px; padding: 5px 0 40px 0; border:none; width:@content_width; background-color:transparent; } #ContentSurround { float: none; overflow:hidden; width: 100%; } #lektion_content { width: auto; } #Werbevideo { display:block; max-width:100%; float: left; background-color:lightgray; width:320px; height:auto; margin:0px; padding:0px; } #Werbegrafik img { float:left; //max-width: 700px; height:auto; padding:0px; margin:0px; min-width:none; margin-top: -70px; margin-left: 0px; } #PrimaryNavigation { position:relative; top: 11px; clear:both; font-weight:bold; background-image: url(/images/bg_menu.png); background: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0, transparent 5%, transparent 97%, rgba(0, 0, 0, .45) 100%), -o-linear-gradient(left, rgba(0, 0, 0, .2) 0, transparent .2%, transparent 99.8%, rgba(0, 0, 0, .2) 100%), no-repeat 50% 50%, -o-linear-gradient(bottom, #666 0, #5E5E5E 50%, #707070 51%, gray 100%); background: -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0, transparent 5%, transparent 97%, rgba(0, 0, 0, .45) 100%), -moz-linear-gradient(left, rgba(0, 0, 0, .2) 0, transparent .2%, transparent 99.8%, rgba(0, 0, 0, .2) 100%), no-repeat 50% 50%, -moz-linear-gradient(bottom, #666 0, #5E5E5E 50%, #707070 51%, gray 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, .2)), color-stop(0.05, transparent), color-stop(0.97, transparent), to(rgba(0, 0, 0, .45))), -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, .2)), color-stop(0.002, transparent), color-stop(0.998, transparent), to(rgba(0, 0, 0, .2))), no-repeat 50% 50%, -webkit-gradient(linear, 0 100%, 0 0, from(#666), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), to(gray)); margin: 0; border-radius:5px; height: 28px; -moz-box-shadow: 4px 5px 28px -3px #000; span.Item:hover{ background-color: #585858; } span { display: block; float: left; a { font-size: 13px; padding: 5px 22px; text-decoration: none; display:block; text-align:center; border-right:3px solid gray; &:hover { padding: 5px 22px; border-top: 0px solid gray; border-right: 3px solid gray; } } .Current, a.Current { padding: 5px 18px; margin-right: 0px; background-color: #424242; } .Current { border:none; .radiusAll(0); } a.Current { padding: 5px 18px; border-right:3px solid gray; &:hover { border-top: 0px solid gray; border-right: 3px solid gray; .radiusAll(0); } } } } #GapBeforeSecondaryNavigation { display: none; } #InteractivityLayer { visibility: hidden; } #SecondaryNavigation { z-index: 1; top: auto; left: 0; width: 240px; height: auto; margin-top: 11px; margin-left: 1px; color: @colorSecondayNav; box-shadow: 4px 5px 28px -3px #000; -moz-box-shadow: 4px 5px 28px -3px #000; -webkit-box-shadow: 4px 5px 28px -3px #000; .Item { border-bottom: 1px solid @colorSecondayNavBorder; .radiusAll( 3px, 3px, 3px, 3px ); display: none; } .Level1 { padding: 8px 0 8px 15px; } div.Topic1, div.Topic3, div.Topic5, div.Topic7, div.Topic9, div.Topic11, div.Topic13, div.Topic15, div.Topic17, div.Topic19 div.Topic2, div.Topic4, div.Topic6, div.Topic8, div.Topic10, div.Topic12, div.Topic14, div.Topic16, div.Topic18, div.Topic20 { background-color: @colorSecondayNavBgOdd; font-size: 11px; font-weight: normal; &:hover { background-color: @colorSecondayNavHoverBg; cursor: pointer; a { color: @colorSecondayNavLinkHover } } &:active { background-color: @colorSecondayNavLinkActiveBg; a { color: @colorSecondayNavLinkActive } } } a.Topic1, a.Topic3, a.Topic5, a.Topic7, a.Topic9, a.Topic11, a.Topic13, a.Topic15, a.Topic17, a.Topic19 { color: @colorSecondayNav; .nobg; text-decoration: none; &:hover { background-color: none; color: @colorSecondayNavHover; cursor: pointer; } } a.Topic2, a.Topic4, a.Topic6, a.Topic8, a.Topic10, a.Topic12, a.Topic14, a.Topic16, a.Topic18, a.Topic20 { color: @colorSecondayNav; .nobg; text-decoration: none; &:hover { background-color: none; color: @colorSecondayNavHover; cursor: pointer; } } .HasChildren { font-size: 12px } div.Current.Item { background-color: #fff; .radiusAll( 3px, 0, 0, 3px ); &:hover { a { cursor: default } } a { color: @colorSecondayNavCurrent; font-weight: bold; .nobg; } span.Count { cursor: default } .Count { color: @colorSecondNaviCount } span.SecondNaviPageCount { color: @colorSecondNaviCount; font-weight: normal; .nobg; cursor: default; } &:hover { color: #000; font-weight: bold; background-color: #fff; .radiusAll( 3px, 0, 0, 3px ); text-decoration: none; cursor: default; } } .Count { color: #aaa; font-size: 9px; margin-right: 30px; } div:hover { span.Count { } span.SecondNaviPageCount { color: @colorSecondNaviCount; font-weight: normal; .nobg; } } .SecondNaviPageCount { position: absolute; left: 204px; width: 30px; text-align: right; top: auto; font-size: 11px; color:#aaa; padding: 2px; } .OpenedNode, .OpenedNodeCurrent { .icon_node_open; display: block; float: left; width: 9px; height: 12px; margin-left: -12px; margin-top: 3px } .ClosedNode { .icon_node_closed; display: block; float: left; width: 9px; height: 12px; margin-left: -12px; margin-top: 3px } // .HasChildren { font-size: 12px } .Leaf { display: block; float: left; margin-left: -10px; } img { } } br { clear:both; } h1 { font-size:1.2em; padding: 5px; } div.lektion_heading { padding-top: 0px; } span.lektion_heading { font-size: 36px; } div.dauerlektion { display: none; .small_grey; margin: 0 50px 20px 0; text-align: right; clear: both; float: right; width: 100%; } div.thema { width:@content_width; clear:both; float: left; } @info_popup_width: 120px; @lektion_thema_margin_left: 42px; @lektion_thema_margin_left_inc: 0; @lektion_thema_margin_font_size: 24px; .lektion_thema { margin-left: @lektion_thema_margin_left; } #lektion_thema_infos { clear:none; } div.infoInLektion { margin-left:5px; margin-right:70px; width:@content_width - 275px; min-width:0; max-width:none; float:left; position: static; left: 0px; } div.infoKategorien { width: 20px; } div.infoPopups { .width(@info_popup_width); } div.InfoAussageteileSmall { width: 495px; } div.InfosMitGrafik, div.InfoMitGrafik { float: right; text-align: right; width: 65px; } div.ThemenMitGrafik { padding-top: 0px; padding-bottom: 18px; } div.InfosMitGrafik { margin-left:40px; //float:left; } div.infoKategorien { } #TernaryNavigation { width: auto; padding: 10px 160px 10px 140px; float: left; } #PrimaryNavigation{ span.SiteMap{ display: none; } a:hover { outline: none; border-right: none; border-top: none; padding: 4px 10px 6px 10px; } } div.aussageInPopups { background-color: #fff; } #NavigationLine{ top: -20px; font: 12px Arial; margin: 0px 0px 20px 14px; span.naviLine{ margin-left: 12px; a{ color: black; } } span.base{ font-weight: lighter; font-size: 19px; } span.current{ background-color: #646464; color: #fff; border-radius: 3px; padding: 3px 3px 3px 6px; a{ color:#fff; } //text-decoration: underline; } } div.cubic{ padding:5px; background-image: url(/images/feld_1px.png); background-repeat:repeat-x; border: 5px double #F4F4F4; border-bottom: 2px solid #F4F4F4; border-radius: 1em; box-shadow:0px 3px lightgray; background-color:white; } div.ThemenDateien{ margin-left: 140px; } // no annotation on paux_home page span.AnnotationFuerInfo{ height: 10px; width: 0px; a.annotate{ display: none; } } #cubicLayoutContainer{ #AT span{ font: 12px Arial; } font: 12px Arial; br.clear{ display: none; } #lektion_content { font: 12px Verdana; div.cubic{ margin: 5px 10px 15px 5px; width: 258px; height: 220px; position: relative; float: left; span.lektionName{ width: 100%; position: relative; float: left; font-weight: lighter; font-size: 18px; margin-left: 10px; margin-top: -25px; a{ color: black; } } span.lektionBeschreibung{ width: 90%; position: relative; float: left; color: grey; padding-top: 10px; padding-left: 10px; line-height: 15px; div.info{ div.infoInLektion{ border-width: 0px; max-width: 240px; } } } span.lektionLink{ position: absolute; bottom: 0; right: 0; margin-right: 15px; margin-bottom: 10px; a:link, a:visited{ color: #00AEEF; padding: 10px 5px 10px 15px; } } div.ThemaGrafiken{ position: relative; float: right; margin-right: 15px; margin-top: 5px; margin-bottom: 30px; img{ -webkit-box-reflect: below 3px -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(255,255,255,1) 200%); width: 60px; } } } div.bigcube{ width: 845px; div.ThemaGrafiken{ margin-top: 15px; margin-right: 30px; } span.lektionBeschreibung{ div.info{ div.infoInLektion{ max-width: 100%; } } } } } } #ternaryShortNavigation{ position: relative; float: left; margin: 25px 0px 35px 30%; font-size: 12px; padding-bottom: 30px; span.Item{ border-left: solid 1px; margin-left: 15px; padding-left: 15px; a:link, a:visited{ color: #00AEEF; } } span.Item1{ border: 0; } } #tabLayout{ position: relative; float: left; div.TabFrame{ font-size: 12px; margin: 18px 0px 0px 10px; ul.tabs{ li{ list-style: none; margin: -5px 0px 0px 20px; position: relative; float: left; a{ color: black; } } li.active{ font-size: 18px; } } } div.tab_container{ position: relative; float: left; width: 93%; min-width: 845px; min-height: 400px; margin: 15px 12px 15px 12px; div.tab_content{ div.Themen{ div.Thema{ div.infoMitGrafik{ margin-bottom: 10px; div.info{ float: left; div.infoPopups{ color: black; width: 20px; min-width: 0px; } } div.Bilder{ float: left; max-width: 75px; div.Bild{ float: right; } } div.Veranstalungen{ div.Veranstaltung{ div.VeranstaltungBild{ position: relative; float: right; a img{ float: right; } } } } } } } } } } @leftRightSpace: 120px; #SiteMap { font-family: Verdana; font-size: 12px; color: #666; width: 698px; margin: 0px 0 0 80px; padding-top: 0px; line-height: 150%; div.header { position: relative; padding-top: 20px; span.anzahlinfosinlektion { } div.anzahlinfosinlektion, div.empfohlenedauerminuten, div.anzahlFrageAntwort, div.anzahlMCTest, div.anzahlLueckentext, div.Seitennummer { position: absolute; top: auto; left: 670px; width: 30px; text-align: right; font-size: 10px; color: #888; margin-top: -20px; z-index: 0; } div.anzahlinfosinlektion { color: #44a7cc; /*left: 500px;*/ left: @content_width - 300px - @leftRightSpace; } div.empfohlenedauerminuten { /* left: 530px; */ left: @content_width - 260px - @leftRightSpace; color: #b65; } div.anzahlFrageAntwort { /*left: 560px;*/ left: @content_width - 220px - @leftRightSpace; color: #393; } div.anzahlMCTest { /* left: 590px;*/ left: @content_width - 180px - @leftRightSpace; color: #393; } div.anzahlLueckentext { /* left: 620px;*/ left: @content_width - 140px - @leftRightSpace; color: #393; } div.Seitennummer { /* left: 620px;*/ left: @content_width - 100px - @leftRightSpace; color: #393; } } }