@import "fonts.less"; @dark_orange: #da460c; @grey: #7f7f7f; @silver: #979797; @strongColor: #dd521c; @strongColorTab: #fff; @up_height: 150px; @arrwidth: 100px; @contentwidth: 960px; @tablist_height_section_50: 100px; @tablist_height_section_5: 60px; @spol_lok_width: 300px; @transition_horizontal: 800ms; @transition_vertical: 800ms; * { box-sizing: border-box; } p { margin-top: 0; margin-bottom: 8px; } ul { list-style-type: none; } body { overflow: hidden; background-image: url("../img/back.png"); font-family: "Oswald-Regular", Verdana, Tahoma, sans-serif; } #background { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } #background_1, #background_2 { width: 300%; height: 300%; position: fixed; transition-property: margin-left, margin-top; /* alpha? */ } #background { transition-property: left, top; } #background, #background_1, #background_2 { transition-duration: @transition_horizontal, @transition_vertical; transition-timing-function: ease; transition-delay: 0, @transition_horizontal; } .background_notopdelay { transition-delay: 0, 0 !important; } .screen { width: 100%; height: 100%; min-height: 800px; position: absolute; } .box { float: left; width: 90%; height: 80%; min-height: 180px; } #ver-controls { position: fixed; top: 40%; left: 0px; height: 250px; width: 50px; } .bkmrk { width: 200px; height: 47px; margin-top: -5px; margin-bottom: -5px; background: 102% 48% no-repeat; opacity: 0.9; transition: all 200ms ease-out 0; z-index: 100; } .center { position: relative; width: 100%; height: 100%; margin: auto; } .up { position: relative; width: 960px; margin: 0 auto; height: @up_height; h1 { position: absolute; bottom: 0; text-align: left; font-family: "Oswald-Regular"; font-size: 43px; line-height: 44px; } } .middle { position: relative; width: @contentwidth + 2 * @arrwidth; height: 525px; margin: 0 auto; } .down { width: 100%; height: 25px; } .arr_left { float: left; width: @arrwidth; height: 100%; opacity: 0.5; background: 50% 50% no-repeat url("../img/arrows/arr_left.png"); } .arr_left_inactive { float: left; width: @arrwidth; height: 100%; } .arr_right { float: left; width: @arrwidth; height: 100%; background: 50% 50% no-repeat url("../img/arrows/arr_right.png"); opacity: 0.5; } .arr_right_inactive { float: left; width: @arrwidth; height: 100%; } .arr:hover { opacity: 0.9; } .content { position: relative; float: left; width: @contentwidth; height: 100%; } .content_up { position: relative; height: 50%; } .content_down { position: relative; height: 50%; } .content_left { position: relative; float: left; height: 100%; width: 28%; } .content_right { position: relative; float: left; height: 100%; width: 72%; } .main { float: left; width: 100%; height: 100%; } .hor-controls { height: 100px; text-align: center; .btn { display: inline-block; margin: 0 1px 0 0; width: 50px; height: 13px; background-color: #ffffff; opacity: 0.5; &:hover { opacity: 1; } } .btn_curr { opacity: 0.8; } } #bkmrk0 { background-image: url("../img/bkmrks/1.png"); width: 121px; margin-left: -81px; } #bkmrk1 { width: 427px; margin-left: -387px; background-image: url("../img/bkmrks/2.png"); } #bkmrk2 { background-image: url("../img/bkmrks/3.png"); width: 286px; margin-left: -246px; } #bkmrk3 { background-image: url("../img/bkmrks/4.png"); width: 359px; margin-left: -319px; } #bkmrk4 { background-image: url("../img/bkmrks/5.png"); width: 204px; margin-left: -160px; } #bkmrk5 { background-image: url("../img/bkmrks/6.png"); width: 238px; margin-left: -195px; } .text { background-color: white; padding: 15px; margin: 0; float: left; font-family: "SourceSansPro-Regular"; font-size: 14px; strong { color: @strongColor; font-family: "SourceSansPro-Bold"; } } .citation { background: 0% 0% no-repeat url("../img/citation.png"); width: 200px; color: white; padding-top: 17px; padding-right: 15px; padding-left: 65px; padding-bottom: 20px; margin: auto; font-family: "SourceSansPro-Bold", Verdana, Tahoma, sans-serif; font-size: 26px; line-height: 26px; overflow: hidden; } .citation strong { padding-top: 50px; } .pic { height: 100px; width: 300px; } a { background: 0% 0% no-repeat url("../img/citation.png"); } .dropdown_cont { float: right; height: 100%; min-height: 200px; min-width: 200px; .dropdown { margin: 0; } } h1 { color: white; text-align: center; } h2 { float: left; text-align: left; } .tabs h2 { float: left; text-align: left; } .dropdown { padding-top: 0px; margin: auto; width: 200px; li { width: 100%; p { opacity: 1 !important; color: white; margin: 0px; padding: 2.5px; padding-left: 10px; cursor:pointer; } &:hover { background-color: grey; } } } .list_up { background: white 95% 50% no-repeat url("../img/down_arrow.png"); height: 50px; padding: 10px; padding-bottom: 15px; padding-left: 15px; font-size: 20px; color: orangered; } .list_up:hover { opacity: 0.8; } .list_down { overflow-y: auto; background-color: none; color: white; height: 199px; opacity: 0; display: none; width: 100%; ul { margin: 0px; padding: 0px; } } .hover { position: absolute; top: 15%; right: 200px; width: 500px; height: 500px; background-color: #aaaaaa; overflow-y: auto; display: none; z-index: 3; } #content_0_0 { .text_up { position: absolute; width: 650px; height: 294px; left: 0; top: 50px; } .citation { position: absolute; right: 0; top: 70px; width: 310px; height: 280px; } .text_down { position: absolute; width: 650px; height: 112px; right: 0; top: 325px; z-index: 2; } } #content_0_1 { .text_up { position: absolute; width: 650px; height: 230px; left: 0; top: 20px; } .citation_up { position: absolute; right: 0; top: 50px; width: 310px; height: 123px; } .text_down { position: absolute; width: 650px; height: 255px; right: 0; top: 230px; z-index: 2; } .citation_down { position: absolute; left: 0; top: 280px; width: 310px; height: 150px; } } #content_0_2 { .text_up { position: absolute; width: 650px; height: 195px; left: 0; top: 60px; } .citation { position: absolute; right: 0; top: 70px; width: 310px; height: 123px; } .text_down { position: absolute; width: 650px; height: 157px; right: 0; top: 235px; z-index: 2; } } #content_0_3 { .spolecznosc_lokalna { position: absolute; } } #content_1_0 { .text_up { position: absolute; width: 650px; height: 175px; right: 0; top: 10px; z-index: 2; } .citation { position: absolute; left: 0; top: 30px; width: 310px; height: 97px; } .text_down { position: absolute; width: 650px; height: 325px; left: 0; top: 170px; } #dropdown-0 { position: absolute; right: 0; top: 195px; width: 300px; height: 50px; .dropdown { width: 100%; } } } #content_1_1 { .content_left { width: 310px; .citation { position: absolute; width: 320px; height: 175px; top: 50px; left: -5px; } .text { position: absolute; top: 275px; width: 100%; height: 174px; } } .content_right { width: 650px; .tab_box { position: absolute; width: 100%; height: 100%; .close_button { top: 30px; } .tab_list { position: relative; left: 10px; top: 55px; } h1 { position: absolute; margin: 0; padding: 0; left: 20px; top: 305px; height: 50px; font-family: "SourceSansPro-Black"; font-size: 26px; line-height: 26px; letter-spacing: 0.05em; } .tabs { position: relative; width: 100%; top: 15px; height: 295px; .tab { position: absolute; width: 100%; z-index: 2; .text { position: absolute; width: 100%; height: 350px; color: white; background-color: @silver; div { display: table-cell; vertical-align: middle; width: 95%; padding-left: 5%; color: white; font-size: 14px; height: 315px; strong { color: darken(@strongColor, 5%); } } } .start_page { background: #fff; div { color: black; background: white; } } .text-first { height: 275px; background: transparent; div { color: black; background: white; } } } .white { div { font-size: 27px !important; line-height: 1.1em; } } } .tab_pos { &.active { background-color: @silver; } &:first-child { clear: left; } } } } } ul li.item { font-size: 12px; } #content_1_2 { .content_left { width: 650px; .text { position: absolute; top: 100px; width: 100%; } .citation { position: absolute; top: 240px; width: 100%; } } .content_right { position: absolute; right: 0; width: 310px; #dropdown-1 { position: absolute; top: 100px; width: 300px; right: 0; .dropdown { width: 300px; } } } } #content_2_0 { .text_up { position: absolute; width: 650px; height: 190px; left: 315px; top: 30px; } .text_down { position: absolute; top: 210px; left: 0; width: 650px; } .citation_up { position: absolute; top: 20px; left: -20px; width: 340px; height: 170px; font-size: 24px; } #dropdown-2 { position: absolute; height: 300px; top: 230px; left: 660px; .dropdown { width: 300px; } } } ul.comments { padding-left: 15px; } ul.comments li { border-top: 3px solid #FC9435; padding-right: 10px; } ul.comments li span.title { color: #FC9435; font-size: 17px; font-weight: bold; } ul.comments li span.desc { padding-top: 3px; color: white; font-size: 17px; } #content_2_1 { .tab_box .close_button { top: 30px; } h2 { position: absolute; top: 250px; left: 0; } .text { width: 960px; height: auto; position: absolute; top: 20px; left: 0; background-color: @grey; height: 300px; z-index: 2; } .tabs { .text { div { display: table-cell; vertical-align: middle; height: 265px; font-size: 21px; } } } .text.text-first { width: 650px; background-color: white; div { font-size: 18px; } } ul.tab_list { position: absolute; top: 320px; left: 0; li.tab_pos { border-right: 2px solid #fff; width: 94px; height: 90px; &:last-child { border-right: none; } &.active { background-color: @grey; } } } .tab_pos:first-child { clear: left; } #dropdown-3 { position: absolute; top: 20px; left: 665px; .dropdown { width: 300px; } } } #content_3_0 { margin-top: 50px; .text { position: absolute; width: 960px; height: auto; background-color: @grey; z-index: 2; height: 300px; } .tab_pos:first-child { clear: left; } .tabs { .text { height: 355px; div { height: 323px; display: table-cell; vertical-align: middle; font-size: 17px; } } } .text.text-first { width: 650px; height: auto; background-color: white; } #dropdown-4 { position: absolute; top: 0px; right: 0; .dropdown { width: 300px; } } h2 { position: absolute; top: 280px; left: 0; } ul.tab_list { position: absolute; top: 350px; left: 0; li.tab_pos { border-right: 2px solid #fff; width: 78px; height: 90px; &:last-child { border-right: none; } &.active { background-color: @grey; } } } } #tab_box-5, #tab_box-6, #tab_box-7, #tab_box-8 { .title_text_box h2 { margin: 0; font-size: 35px; text-align: right; } } #tab_box-6 .title_text_box h2 { font-size: 45px; } #tab_box-7 .title_text_box h2 { font-size: 50px; } #tab_box-8 .title_text_box h2 { font-size: 30px; line-height: 35px; width: 185px; overflow: visible; /* layout won't break when font fails to load */ } #tab_box-5 { div.citation { float: left; clear: left; } } #tab_box-6 div.citation { float: left; clear: left; } #tab_box-7 div.citation { float: left; clear: left; } #up_4_0, #up_4_1, #up_4_2, #up_4_3, #up_4_4, #up_4_5 { margin-top: 40px; } #content_4_2, #content_4_3, #content_4_4, #content_4_5 { .title_text_box { h2 { padding: 0; margin: 0; img { float: left; } } } } #content_4_0 { .content_up { height: 45%; .citation { width: 40%; position: absolute; left: 0; } .text { width: 60%; height: 100%; position: absolute; left: 40%; top: 0; overflow-y: auto; } } .content_down { height: 55%; .text { width: 60%; } .citation { width: 40%; position: absolute; left: 60%; } } } #content_4_1 { .content_up { height: 45%; .text { width: 65%; height: 100%; position: absolute; top: 0; left: 0; } .citation { height: 100%; position: absolute; top: 0; left: 65%; width: 35%; } } .content_down { height: 55%; .text { width: 60%; position: absolute; top: 0; left: 40%; } .citation { position: absolute; top: 0; left: 0; width: 40%; } } } #content_4_2 { .content_up { height: 35%; .text { width: 76%; height: 100%; position: absolute; top: 0; left: 24%; } .title_text_box { width: 24%; display: block; } } .content_down { height: 65%; .text { width: 75%; } } } #content_4_3 { .content_up { height: 30%; .text { width: 83%; height: 100%; position: absolute; top: 0; left: 17%; } .title_text_box { display: block; width: 17%; } } .content_down { height: 70%; .text { width: 75%; } } } #content_4_4 { .content_up { height: 25%; .text { width: 68%; height: 100%; position: absolute; top: 0; left: 32%; overflow-y: auto; } .title_text_box { width: 32%; display: block; } } .content_down { height: 75%; .text { width: 75%; } } } #content_4_5 { .content_up { height: 27%; .text { width: 76%; height: 100%; position: absolute; top: 0; left: 24%; overflow-y: auto; } .title_text_box { width: 24%; display: block; } } .content_down { height: 73%; .text { width: 75%; } } } .tabs() { .tab_pos { border-right: 2px solid white; cursor: pointer; } .tab_pos:last-child { border-right: none; } .tab_pos.active { background-color: #F3B57F; } } .tabs105() { .tabs; .tab_pos { width: 105px; height: 105px; } } .changing-tabs() { .tabs; .tab_pos img.normal-img { display: inline; } .tab_pos img.active-img { display: none; } .tab_pos.active { background-color: white; } .tab_pos.active img.normal-img { display: none; } .tab_pos.active img.active-img { display: inline; } } .lettered-lists() { .text ol { list-style-type: lower-alpha; } } .centered-texts() { .text { display: table; .text-content { display: table-cell; vertical-align: middle; } } } #up_5_0, #up_5_1, #up_5_2, #up_5_3, #up_5_4 { h1 { font-size: 40px; white-space: nowrap; } } #content_5_0 { .tabs; .changing-tabs; .centered-texts; .text { float: right; width: 650px; height: 215px; font-size: 1.1em; } .citation { float: left; width: 310px; } .tab_pos { width: 320px; height: 190px; } .tab_pos:first-child { clear: both; } .tab .text { width: 100%; height: 260px; } .tab:first-child .text { width: 600px; height: 200px; margin-bottom: 20px; font-size: 1em; } .tab:first-child h2 { clear: right; height: 30px; width: 100%; margin: 0 0 10px; text-align: center; } } #content_5_1 { .tabs105; .lettered-lists; .changing-tabs; .centered-texts; .text { float: right; width: 100%; height: 300px; font-size: 1.1em; } .tab_pos:first-child { margin-left: 50px; } } #content_5_2 { .tabs105; .lettered-lists; .changing-tabs; .centered-texts; .text { float: right; width: 100%; height: 300px; font-size: 1.1em; } .tab_pos:first-child { margin-left: 30px; } } #content_5_3 { .tabs105; .lettered-lists; .changing-tabs; .centered-texts; ul { list-style-type: disc; } .text { float: left; width: 100%; height: 300px; font-size: 1.1em; } .tab_pos:first-child { margin-left: 100px; } } #content_5_4 { .tabs105; .lettered-lists; .changing-tabs; .centered-texts; .text { float: left; width: 100%; height: 300px; font-size: 1.1em; } .tab_pos:first-child { margin-left: 20px; } } #hover-btn0 { position: absolute; bottom: 135px; width: @spol_lok_width; height: @spol_lok_width/3; } #hover-btn img { width: @spol_lok_width; height: @spol_lok_width/3; } .plank { position: absolute; top: 15%; left: 8%; background-color: white; display: none; } .case_description { float: left; clear: left; color: white; padding: 20px; } .tab_list { margin: 0; padding: 0; } .tab_pos { position: relative; list-style-type: none; float: left; width: 58px; height: 73px; .bordered_container { position: absolute; top: 15px; border-left: white 1px solid; width: 100%; height: 58px; } &:first-child { .bordered_container { border-left: none; } } img { width: 100%; height: 100%; } } h2 { color: white; } .tablist img { margin: auto; } .title_text_box { min-width: 100px; } .case_title { text-size: medium; color: orange; padding: 20px; float: left; } .dropdown_add { background: white 95% 50% no-repeat url("../img/plus.png"); padding: 10px; padding-bottom: 15px; padding-left: 15px; font-size: 15px; color: orangered; } .dropdown_add:hover { opacity: 0.8; } .hover_close { width: 25px; height: 25px; background-color: orange; margin: 0px; float: right; margin-right: 0px; } .hover_close:hover, #comment_close:hover { opacity: 0.8; } .case_submit { margin: auto; width: 150px; height: 30px; background-color: white; color: orangered; font-size: smaller; font-family: "Oswald-Regular", Verdana, Tahoma, sans-serif; margin-left: 35%; margin-top: 20px; } .case_form { margin: 30px; label { color: white; font-size: medium; font-family: "Oswald-Regular", Verdana, Tahoma, sans-serif; width: 100px; padding: 10px; } input { background-color: white; color: orangered; padding: 10px; width: 150px; margin-left: 35%; } div { width: 100%; margin: auto; } } .content_title { display: none; } .hover h1 { text-align: center; } input { padding: 5px; margin-left: 34%; } input, label, button { float: left; text-align: center; margin-left: 42%; } label, button { padding: 10px; text-align: center; } button { margin: auto; margin-top: 20px; } button, input, label { margin-left: 35%; } button { margin-left: 42%; } #cmmnt-bkmrk { position: absolute; left: 0; height: 50px; width: 250px; background: url("../img/bkmrks/cmmnt.png") no-repeat; z-index: 100; } #comment_hover { position: fixed; top: 170px; right: -472px; width: 532px; bottom: 0; opacity: 0.99; z-index: 1000; } #comment-bg { margin-left:60px; background-color: #999999; height: 100%; } #comment_scrollpane { position: absolute; top: 50px; bottom: 15px; right: 7px; width: 465px; } #top-bar { position: fixed; left: 0; top: 0; width: 100%; height: 50px; padding: 4px 20px 0; z-index: 1000; background: url("../img/top-bar-bg.png") repeat-x; .right { float: right; } .left { float: left; } img { vertical-align: middle; } .fb-like { margin-right: 30px; margin-top: 5px; } a { opacity: 0.8; color: #F07000; text-decoration: none; } a:hover { opacity: 1; } } #comment_add2 { position: absolute; top: 85%; left: 85%; width: 7%; height: 7%; background-color: #ff4500; color: white; padding: 15px; } #splashdiv { position: absolute; top: -500px; left: -200px; height: 2000px; width: 2000px; background-color: white; opacity: 1; } #introlabel { position: absolute; width: 830px; height: 190px; right: 0; background: white; padding: 35px 20px; } #introlabel_inner { position: absolute; width: 750px; height: 125px; padding: 0; margin: 0; border-left: 3px solid @dark_orange; h1, h2 { padding: 0; margin: 0; font-family: "SourceSansPro-Semibold"; color: @dark_orange; text-align: left; } h1 { font-size: 80px; line-height: 63px; } h2 { font-size: 30px; line-height: 30px; padding-left: 4px; } } div.comment_add { margin: 0px !important; padding: 3px; color: white; background-color: #FC9435; width: 157px; } #add_comment_content { padding: 15px; color: orangered; } label.form_label { margin: 0px !important; color: #FC9435; font-size: 15px; padding: 3px !important; } textarea.form_label { width: 100%; border: none; } input.form_label { width: 203px; margin: 0px !important; } button.comments_send_button { background-color: #FC9435; border: 0px none; color: white; font-size: 15px; } #comment_close { width: 25px; height: 25px; background-color: orange; margin: 0px; float: right; margin-right: 0px; margin-top: 0px; } .hover h2 { position: clear !important; } #pdf-hover { float: right; position: fixed; margin: 0px; } .text_content { display: table-cell; vertical-align: middle; } #return_bookmark { width: 150px; background-color: white; height: 50px; display: table; } form.add_example { padding: 0px 20px; } form.add_example input, form.add_example textarea { border: 1px solid #d94809; margin: 0px; clear: left; padding: 5px; } form.add_example label { padding: 10px 0px 2px 0px; clear: left; color: #d94809; font-size: 14px; font-weight: bold; } div.hover-header { color: #d94809; font-size: 17px; font-weight: bold; display: block; padding: 12px 12px 0px 20px; min-height: 50px; width: 100%; border-bottom: 1px solid #d94809; } span.hover_close { background: url("../img/close.png") center center no-repeat; float: right; display: block; } .white { color: #fff !important; strong { color: #fff !important; } } .hover_content { h2 { position: relative !important; top: 0 !important; } } #thesentence { width: 100%; text-align: center; padding-top: 100px; } .tab_box { .close_button { position: absolute; right: 10px; top: 10px; z-index: 1000; display: none; } } span.created-at { font-size: 11px }