.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .rounded-corners-4 (@r1: 5px, @r2: 5px, @r3: 5px, @r4: 5px) { border-radius: @r1 @r2 @r3 @r4; -webkit-border-radius: @r1 @r2 @r3 @r4; -moz-border-radius: @r1 @r2 @r3 @r4; } .justify { text-align: justify; } @error-color: red; @form-label-width: 150px; body { font-family: Arial, sans-serif; font-size: 13px; color: #47413f; background: #fff url(/img/bg.png) repeat top center; } a { color: #94714b; text-decoration: none; } a:hover { color: #bb9265; text-decoration: underline; } .center { text-align: center; } #page { min-width: 970px; padding: 0 0 50px 0; background: url(/img/stain.png) no-repeat top center; } .wrapper { width: 970px; margin: 0 auto; } .up-down-container { float: left; width: 15px; padding-top: 7px; margin-right: 3px; a { float: left; clear: left; width: 15px; height: 8px; margin-bottom: 1px; } a.up { background: url(/img/arrows_up_down.png) no-repeat left 0; } a.down { background: url(/img/arrows_up_down.png) no-repeat left -8px; } } .button-w-white-title (@font-size: 13px) { border: none; color: white; font-weight: bold; font-size: @font-size; text-shadow: 0 -1px #546c11; } ul#order-process-nav { width: 100%; overflow: hidden; margin-bottom: 30px; li { float: left; width: 160px; height: 57px; background: url(/img/basket_steps.png) no-repeat 0px 0px; margin-right: 37px; a, span { display: block; padding: 13px 0 0 50px; } a { color: #316EA9; } span { color: #6C6F6F; } } li.step-1 { background-position: 0px 0px; } li.step-2 { background-position: -160px 0px; } li.step-3 { background-position: -320px 0px; } li.step-4 { background-position: -480px 0px; margin-right: 0; span { padding-top: 20px; } } li.step-1-active { background-position: 0px -57px; } li.step-2-active { background-position: -160px -57px; } li.step-3-active { background-position: -320px -57px; } li.step-4-active { background-position: -480px -57px; } } .two-cols { width: 100%; overflow: hidden; .col { float: left; width: 50%; } } .scrollable { position:relative; overflow:hidden; width: 660px; height:90px; } .scrollable .items { width:20000em; position:absolute; } .scrollable .items div { float:left; } .slide { line-height: 1.5em; text-align: justify; } .slide .picture { margin: 0 1em 0 0; } .slide .title { font-size: 1.5em; } header { position: relative; height: 176px; background: url(/img/bg_menu.png) no-repeat right bottom; margin-bottom: 1em; h1 { margin: 0 0 0 10px; } ol.menu { position: absolute; bottom: 7px; left: 30px; font-weight: bold; text-transform: uppercase; text-shadow: 1px 1px #831116; list-style-type: none; li { float: left; padding: 0 40px 0 0; position: relative; height: 25px; span.icon { color: white; font-size: 1.5em; position: relative; top: -5px; } } a { color: #fff; vertical-align: top; } a:hover { color: #ffc3c6; text-decoration: none; } } ol.user { float: right; font-weight: bold; margin-top: 10px; list-style-type: none; li { float: left; padding: 0 30px 0 0; } } a#cart { display: block; float: right; height: 35px; font-weight: bold; text-shadow: 0 -1px #546c11; color: #fff; padding: 0 0 0 50px; background: url(/img/bg_cart_left.png) no-repeat left 0; div { background: url(/img/bg_cart_right.png) no-repeat right 0; padding: 10px 10px 0 0; height: 25px; } } a#cart:hover { background-position: left -35px; text-decoration: none; div { background-position: right -35px; } } form.search { position: absolute; bottom: 12px; right: 16px; input[type=text] { padding: 0 38px 0 12px; width: 128px; height: 25px; color: #000; background: url(/img/bg_search.png) no-repeat; border: none; outline: none; } input[type=text]:focus { width: 248px; color: #6f6a68; background: url(/img/bg_search_active.png) no-repeat; } } } .right-content { float: right; width: 752px; margin-top: 0; } a.search { float: right; margin: -1em 2em 0 0; } .advanced-search { text-align: left; padding: 20px 0; margin: 2em 0; background-color: white; border-top: 1px solid #CBBAA2; border-bottom: 3px solid #CBBAA2; fieldset { width: 450px; float: left; .input { margin-bottom: 10px; label { float: left; width: 150px; padding-right: 10px; text-align: right; } } .required { label { font-weight: bold; } } .text { input { width: 250px; border: 1px solid #CBBAA2; } } .select { select { width: 250px; border: 1px solid #CBBAA2; } } } .submit { clear: left; padding: 20px 0 0 376px; input { .button-w-white-title; width: 180px; height: 30px; background: url(/img/bg_blue_btn_180x30.png) no-repeat 0 0; } input:hover { background-position: 0 -30px; } } } .content { overflow: hidden; width: 970px; margin: 0 0 20px 0; .message-warning, .message-error, .message-info { .rounded-corners(2px); margin: 1em 5px; padding-left: 41px; .in { .rounded-corners-4(0, 2px, 2px, 0); padding: 1em; background-color: #47413F; color: white; font-weight: bold; } a { color: white; text-decoration: underline; } a:hover { text-decoration: none; } } .message-info { background: #7A9C1A url(/img/icon_message_info.png) no-repeat 8px 50%; } .message-error { background: #C53531 url(/img/icon_message_error.png) no-repeat 10px 50%; } .message-warning { background: #D3B200 url(/img/icon_message_warning.png) no-repeat 17px 50%; } article { .right-content; h2.title { font-weight: normal; font-size: 36px; font-style: italic; margin: 0 0 1em 0; } .tools { margin: 0 0 10px 0; padding: 0; width: 100%; overflow: hidden; .tool { float: left; margin-right: 30px; } } .slider1 { position: relative; height: 278px; background: url(/img/bg_slider1.jpg) no-repeat; margin-top: 2em; padding-top: 1em; a.left, a.right { overflow: hidden; position: absolute; top: 59px; width: 24px; height: 139px; text-indent: -999em; } a.left { left: 0; background: url(/img/slider_left.png) no-repeat; } a.right { right: 0; background: url(/img/slider_right.png) no-repeat; } a:hover { background-position: 0 -139px; } .scrollable { position: relative; overflow: hidden; width: 680px; height: 278px; margin: 0 auto; .slide { width: 630px; padding-left: 50px; } } } table.books { margin: 25px 0 0 0; background: url(/img/bg_list_row.png) no-repeat left bottom; td { width: 178px; margin: 0; padding: 0 0 20px 12px; img { display: block; margin: 0 auto; /* padding: 2px 20px 14px 18px; background: url(/img/bg_list_book.png) no-repeat left bottom; */ } a { display: block; margin: 0 0 0 18px; } a.price { width: 91px; height: 31px; padding: 0 0 0 49px; font-size: 17px; line-height: 31px; font-weight: bold; text-shadow: 0 -1px #546c11; color: #fff; background: url(/img/bg_list_price.png) no-repeat; sup { font-size: 10px; } } a.price:hover { text-decoration: none; background-position: 0 -31px; } a.title { margin-top: 10px; margin-bottom: 5px; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #47413f; } a.author { font-size: 12px; color: #94714b; } a.author:hover { color: #bb9265; } } td:first-child { padding-left: 4px !important; background-position: 4px bottom !important; } td.cover { /* padding-bottom: 3px; */ padding: 2px 0 14px 12px; background: url(/img/bg_list_book.png) no-repeat 12px bottom; text-align: center; vertical-align: bottom; a { margin-left: 0; } } } .paging { overflow: hidden; width: 752px; margin: 20px 0 0 0; text-align: center; a, span { display:inline-block; width: 28px; height: 32px; margin: 0 0 0 5px; font-size: 14px; line-height: 32px; font-weight: bold; text-align: center; color: #47413f; border: 1px solid #cbbaa2; .rounded-corners(3px); -webkit-background-clip: padding-box; } span.active { color: #fff; background: #b8292f; text-shadow: 1px 1px #801217; } } p.print { margin: 20px 0 0 0; text-align: center; } #breadcrumbs { padding-bottom: 0.5em; color: #94714b; border-bottom: 1px solid #e7e4e2; margin-bottom: 1em; span { color: #615751; font-weight: bold; } } #product { overflow: hidden; width: 752px; .data { float: left; width: 210px; .photo { background: url(/img/bg_product_img.png) no-repeat left bottom; padding: 0 9px 10px 9px; img { border-top: 2px solid #D9D9D9; border-right: 2px solid #D9D9D9; } } table { font-size: 12px; th { width: 85px; padding: 1em 0.5em 0 0; font-weight: normal; text-align: right; vertical-align: top; } td { padding: 1em 0 0 0; font-weight: bold; } } } .about { float: right; width: 490px; h2 { margin: 0 0 0.25em 0; font-size: 33px; font-weight: normal; font-style: italic; text-transform: uppercase; } h2:first-letter { font-size: 42px; } p.author { font-size: 28px; font-style: italic; color: #84633e; margin: 0 0 1em 0; } p.price { font-size: 23px; font-weight: bold; color: #719218; sup { font-size: 14px; } } p.delivery { font-weight: bold; color: #719218; } h3 { margin: 2em 0 0.5em 0; font-size: 15px; } form#ProductAddForm { .submit-container { position: relative; margin: 10px 0; width: 100%; overflow: hidden; input.button { .button-w-white-title; float: left; background: url(/img/btn_add_to_cart.png) no-repeat top left; width: 160px; height: 35px; text-align: left; padding: 0 0 0 38px; } input.button:hover { background-position: 0 -35px; } .count-container { .rounded-corners-4(0, 3px, 3px, 0); float: left; position: relative; top: 1px; border-top: 1px solid #BBC592; border-right: 1px solid #BBC592; border-bottom: 1px solid #BBC592; height: 31px; background-color: white; padding: 0 5px 0 10px; label { font-weight: bold; position: relative; top: 7px; float: left; color: #719218; margin-right: 10px; } .up-down-container { padding-top: 7px; margin-right: 3px; } input.text { border: 1px solid #DDDDDD; position: relative; top: 4px; width: 30px; height: 18px; text-align: center; font-weight: bold; } } } } } .related { width: 100%; clear: both; padding-top: 4em; p { padding-left: 22px; } } } table.events { th, td { padding: 5px 10px; text-align: left; } th { background-color: #D2D2D2; vertical-align: top; } .odd { background-color: white; } .even { background-color: #EFF2F2; } td.date { width: 80px; font-size: 0.8em; font-style: italic; strong { font-style: normal; } } td.links { a { font-weight: bold; font-size: 0.8em; } } } .photo-gallery { .row { width: 100%; overflow: hidden; margin-bottom: 20px; a { float: left; margin-right: 20px; img { padding: 3px; border: 1px solid #D2D2D2; background-color: #EFF2F2; } } } } } aside { float: left; width: 180px; margin: 0 0 0 4px; p.teachers-schools { margin: 0 0 22px 0; a { overflow: hidden; display: block; width: 175px; height: 71px; text-indent: -999em; background: url(/img/ucitelia_skoly.png) no-repeat; } a:hover { background-position: 0 -71px; } } ol.menu { width: 167px; margin: 0 0 0 3px; list-style-type: none; border-bottom: 3px solid #cbbaa2; li { width: 167px; padding: 10px 0 25px 0; background: #fff; a { display: block; padding: 0 0 0 25px; font-size: 14px; color: #615751; } a:hover { color: #b8292f; } a.active { width: 177px; color: #fff; background: url(/img/bg_aside_active.png) no-repeat; } a.parent { margin: 0 0 5px 0; padding: 0 0 5px 21px; font-weight: bold; text-transform: uppercase; color: #47413f; border-bottom: 3px solid #cbbaa2; } a.expanded { background: url(/img/list_expanded.png) no-repeat 6px 3px; } a.collapsed { background: url(/img/list_collapsed.png) no-repeat 6px 3px; } a.more { text-decoration: underline; color: #316ea9; } a.more:hover { color: #66aaec; } li { padding: 0; a { height: 25px; line-height: 25px; } } } li.categories { ol.category { padding-left: 10px; list-style-type: none; clear: left; li { width: 100%; overflow: hidden; } a { height: auto; line-height: 1em; margin: 0 0 10px 0; padding: 0 0 0 12px; display: block; float: left; width: auto; } a.parent { border: none; font-weight: normal; text-transform: none; padding: 0; width: 13px; text-decoration: none; } a.parent:hover { text-decoration: none; } a.next-parent { padding: 0; float: none; margin-left: 12px; } a.expanded, a.collapsed { background-position: 0px 2px; } a.active { background: none; color: black; font-weight: bold; } } ol.indent-1 { a { font-size: 12px; } } } } ul.menu { background-color: white; border-top: 3px solid #CBBAA2; border-bottom: 3px solid #CBBAA2; padding: 10px 20px; li { margin-bottom: 10px; a.active { font-weight: bold; } } } } article#basket { table.basket { margin: 0 0 20px 0; tr.odd { background-color: #EFF2F2; } tr.even { background-color: white; } th, td { padding: 15px 0px 10px 0px; text-align: left; } th { padding-top: 0; } th.title { padding-left: 30px; } td.title { width: 352px; padding-left: 20px; padding-right: 20px; padding-top: 10px; a { font-weight: bold; color: #47413F; } span.author { color: #94714B; } } th.price, td.price { width: 50px; padding-right: 30px; } td.count { width: 90px; padding-right: 20px; .up-down-container { padding-top: 2px; } input.text { width: 30px; height: 19px; border: 1px solid #DDDDDD; padding: 0; text-align: center; } } th.total-price, td.total-price { width: 90px; padding-right: 20px; } td.delete { width: 60px; } td.basket-refresh { input { .button-w-white-title; width: 180px; height: 30px; background: url(/img/bg_blue_btn_180x30.png) no-repeat 0 0; } input:hover { background-position: 0 -30px; } } } .bonus { background-color: #EFF2F2; border-top: 1px solid #E5E3E0; padding: 10px 0 10px 100px; margin-bottom: 10px; p { padding: 0; margin: 10px 0; em { font-size: 1.1em; font-weight: bold; font-style: normal; } input { position: relative; top: -1px; margin-right: 1em; } } } .total { background-color: #EFF2F2; padding: 30px 50px; margin-bottom: 10px; float: right; text-align: right; big { font-size: 1.5em; font-weight: bold; } } .submit { clear: both; border-top: 1px solid #E5E3E0; padding-top: 10px; text-align: right; input { .button-w-white-title(16px); width: 140px; height: 41px; background: url(/img/bg_green_btn_140x41.png) no-repeat 0 0; } input:hover { background-position: 0 -41px; } } } article#shipment-and-payment { .two-cols { margin: 0 0 30px 0; .col { .radio-row { height: 26px; padding: 5px 0 0 0; margin-bottom: 10px; position: relative; input { position: relative; top: 2px; float: left; margin-right: 10px; } label { float: left; } } .payment-row { padding: 5px 0 0 100px; background: url(/img/payment_icons_88x31.png) no-repeat 0 0; } /*dobierka*/ .payment-1 { background-position: 0 -31px; } /*prevod*/ .payment-2 { background-position: 0 0px; } /*paypal*/ .payment-3 { background-position: 0 -186px; } /*zadarmo*/ .payment-4 { background-position: 0 -31px; } /*tatrapay*/ .payment-5 { background-position: 0 -62px; } /*vub*/ .payment-6 { background-position: 0 -93px; } /*csob*/ .payment-7 { background-position: 0 -124px; } /*uniplatba*/ .payment-8 { background-position: 0 -155px; } /*hotovost*/ .payment-10 { background-position: 0 -31px; } } } } article.order-process { .bottom { clear: both; border-top: 1px solid #E5E3E0; padding-top: 10px; width: 100%; overflow: hidden; form.epayment, .submit { float: right; input { .button-w-white-title(16px); width: 140px; height: 41px; background: url(/img/bg_green_btn_140x41.png) no-repeat 0 0; } input:hover { background-position: 0 -41px; } } form.epayment { float: right; input.submit-button { .button-w-white-title(16px); width: 140px; height: 41px; background: url(/img/bg_green_btn_140x41.png) no-repeat 0 0; } input.submit-button:hover { background-position: 0 -41px; } } a.button { .button-w-white-title(16px); float: right; width: 140px; height: 31px; padding-top: 10px; text-align: center; background: url(/img/bg_green_btn_140x41.png) no-repeat 0 0; } a.button:hover { background-position: 0 -41px; text-decoration: none; } a.back { float: left; margin-top: 8px; background: url(/img/arrow_back.png) no-repeat 0 2px; height: 20px; font-size: 16px; font-weight: bold; padding-left: 30px; color: #615751; } a.back:hover { text-decoration: none; } .payment-description { float: right; clear: right; text-align: right; padding-top: 10px; } } } article#shipment-data { form { h2 { margin: 0 0 1em 0; font-size: 16px; } .inputs { padding-left: 30px; margin-bottom: 50px; .link-row { margin-bottom: 20px; } .text, .select { margin-bottom: 10px; label { display: block; margin-bottom: 1px; } select, input { width: 249px; height: 30px; padding: 0px 3px; border: 1px solid #C1C6C6; border-top: 2px solid #A4A9A9; font-size: 16px; } select { padding: 3px; height: 33px; width: 255px; } input.form-error { background-color: red; color: white; } .error-message { color: red; font-style: italic; } } } } } article#order-view, article#order-confirm { .two-cols { .col { width: 49%; float: right; } .col-left { float: left; } h2 { margin: 0 0 10px 0; } p { padding: 20px; background-color: #EFF2F2; margin-bottom: 1em; } } .four-cols { width: 752px; overflow: hidden; margin: 30px 0; .col { float: left; width: 178px; padding-right: 10px; } } .total { background-color: #EFF2F2; padding: 30px 50px; margin-bottom: 10px; float: right; text-align: right; font-size: 1.5em; font-weight: bold; } } article#order-view { h1 { font-size: 20px; margin: 0 0 1em 0; } h2.big { margin: 2em 0 1em 0; font-size: 1.5em; font-weight: normal; } div.pay-info { background-color: #EFF2F2; padding: 1em; margin-bottom: 2em; h3 { font-size: 16px; font-weight: normal; margin-bottom: 20px; } th, td { padding: 5px 10px; text-align: left; } } div.summary { padding: 1em; background-color: #EFF2F2; table { width: 100%; td, th { padding-bottom: 5px; font-weight: normal; text-align: right; } th { padding-right: 10px; em { font-size: 0.8em; } } td { em { font-size: 0.8em; } } .big { font-size: 1.5em; td, th { padding-top: 20px; } } } } table.products { background-color: white; width: 100%; th { vertical-align: middle; font-size: 0.8em; text-align: left; background-color: #EFF2F2; } td, th { padding: 5px 5px; } .right { text-align: right; } tr.odd { td { background-color: #EFF2F2; } } } } article { .frm { .error-message { margin-left: @form-label-width + 10; color: @error-color; } .input { margin-bottom: 0.5em; width: 100%; overflow: hidden; label { float: left; width: @form-label-width; margin-right: 10px; text-align: right; padding-top: 3px; } } .text, .password, .select { select, input { .rounded-corners(3px); border: 1px solid #7D7D7D; width: 200px; height: 24px; padding: 0 5px; } select { width: 212px; padding: 2px; height: 26px; } } .radio, .checkbox { input { float: left; clear: left; position: relative; top: 1px; } label { float: none; display: block; width: auto ! important; margin: 0 0 0 20px; text-align: left; padding: 0; } .error-message { margin-left: 20px; } } .submit { padding-left: @form-label-width + 10; margin-bottom: 0.5em; input { .button-w-white-title(16px); width: 140px; height: 41px; background: url(/img/bg_green_btn_140x41.png) no-repeat 0 0; } input:hover { background-position: 0 -41px; } } .big-row { margin-bottom: 20px; } h3 { margin: 1em 0 0.5em; padding-left: @form-label-width + 10; } .error { input { background-color: red; color: white; } } } } article#registration { .frm { .input { label { width: @form-label-width; } } .big-row { input { top: 3px; } } .container { } } } article.static-page { line-height: 1.4; h2.title { margin-bottom: 10px; } img.motto { margin-bottom: 20px; } h3 { margin: 1em 0; font-size: 15px; } p { margin: 1em 0; } ul, ol { padding: 0 0 0 25px; } ul { list-style-type: disc; } a { text-decoration: underline; } blockquote { margin: 2em 0; padding: 0 0 0 70px; font-style: italic; background: url(/img/icon-quote.gif) 0 5px no-repeat; p { margin: 0.25em 0 0 0; font-style: normal; } } blockquote.zivica { padding-left: 120px; background: url(/img/logo2_zivica.png) 0 5px no-repeat; } blockquote.unicef { padding-left: 120px; background: url(/img/logo2_unicef.png) 0 5px no-repeat; } .photo-gallery { border-top: 1px solid silver; margin: 1em 0; padding: 1em 0 0 0; a.fbox { margin: 0 1em 0 0; img { border: 1px solid silver; padding: 3px; } } } } article#regiony { .container { width: 100%; overflow: hidden; margin-top: 2em; h3 { font-weight: normal; font-size: 16px; margin: 0 0 1em; } .column1 { float: left; width: 50%; } .column2 { float: right; width: 50%; } p.person { width: 100%; overflow: hidden; margin: 0 0 2em 0; line-height: 1em; img { float: left; margin: 0 10px 0 0; } } } } article#kontakty { p { line-height: 1.2em; margin: 0 0 1em 0; } .container { width: 100%; overflow: hidden; margin: 2em 0; h3 { margin: 0 0 .5em; } .column1 { float: left; width: 48%; } .column2 { float: right; width: 48%; } } .map-photos { width: 100%; overflow: hidden; margin: 0 0 2em 0; .photos { float: right; width: 90px; a { margin-bottom: 1px; display: block; img { border: 1px solid #BDBDBD; } } } #map_canvas { border: 1px solid #BDBDBD; } } .persons { width: 100%; overflow: hidden; h3 { margin-bottom: 1em; } .person { margin-bottom: 3em; line-height: 1.4; img { float: left; margin: 0 10px 0 0; } a { text-decoration: underline; } } } } } .sugarbaci { overflow: hidden; width: 100%; margin: 2em 0; img { float: left; } blockquote { margin: 0 0 0 380px !important; padding: 0 !important; background: none !important; } } footer { padding: 11px 6px 0 6px; font-size: 12px; color: #615751; background: url(/img/bg_footer.png) no-repeat; a { color: #615751; } a:hover { color: #615751; } .inner { overflow: hidden; width: 817px; padding: 25px 0 15px 153px; background: #fff url(/img/sugarbooks_small.png) no-repeat 58px 26px; } .contact { float: left; line-height: 1.4; th { padding: 0 0.1em 0 0; font-weight: normal; vertical-align: top; } a { text-decoration: underline; } a:hover { color: #91837b; } } ol { float: left; margin: 0 0 0 73px; line-height: 1.9; list-style-type: none; li { padding: 0 0 0 7px; background: url(/img/list_square.png) no-repeat left center; } } ol.menu { margin-left: 130px; background: none; li { padding: 0; background: none; } } } /* AUTOCOMPLETE */ .ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } li { margin: 0px; padding: 2px 5px; cursor: default; display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/ font: menu; font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */ line-height: 16px; overflow: hidden; } } .ac_loading { background: white url(/img/indicator.gif) right center no-repeat; } .ac_odd { background-color: #eee; } .ac_over { background-color: #0A246A; color: white; }