@CHARSET "ISO-8859-1"; /* -------------------------------------------- * * Muistilista * * Tummanharmaa : #333 * Keskiharmaa : #484848 * Vaalein harmaa : #5f5f5f * * Linkit : #4a4d51; * * Nav border : #e4e4e4; * * ------------------------------------------*/ /* -------------------------- * * RESET * * ----------------------- */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } body { font-family: 'Verdana', 'Tahoma', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', 'sans'; color: #333; margin: 0; padding: 0; font-size: 12px; line-height: 1.4; } h1, h2, h3, h4, h5, h6 { color: #333; font-family: 'Verdana', 'Tahoma', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', 'sans'; font-weight: normal; } h1 { font-size: 42px; line-height: 1; } h2 { font-size: 36px; line-height: 1; } h3 { font-size: 30px; line-height: 1; } h4 { font-size: 1em; line-height: 1; } h2 + h3 { margin: 0 0 20px; } h2:first-child { margin: 0 0 5px; } a, a:hover { color: #50453c; } a:hover, a:visited { } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } ::-moz-selection { background: #cacaca; color: #fff; text-shadow: none; } ::selection { background: #cacaca; color: #fff; text-shadow: none; } /* Tällä pakotetaan editorin sisällön linkit oikean näköisiksi Eli yleensä sama tyyli kuin tuossa yllä a-elementille, mutta jokaisen perään !important */ .mceContentBody a,.mceContentBody a:link, .mceContentBody a:visited{ font-family: arial !important; color: #50453c !important; text-decoration: underline !important; } .mceContentBody{ background:#fff !important; text-align:left !important; } th { font-weight: normal; } b, strong { } /*input, select { color: #333 !important; font-size: 100%; background: none; filter: none !important; line-height: 1; margin: 0; padding: 0; }*/ label { line-height: 2; } p { margin: 0 0 10px; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } hr { height: 1px; border-width:0; border-bottom: 1px solid #cacaca; margin-bottom: 10px; } input { font-family: 'Verdana', 'Tahoma', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', 'sans'; font-weight: normal; } /* -------------------------- * * COLUMNS * * ----------------------- */ .col-wrap { margin: 0 0 20px; overflow: hidden; } .container { margin: 0 0 20px; } .col.remove-padding { padding: 0 !important; } .col { float: left; min-height: 10px; } .col.right { float: right; } .col.no-min-height { min-height: 0; } .col-20 { width: 210px; } .col-30 { width: 290px; } .col-40 { width: 350px; } .col-60 { width: 570px; } .col-80 { padding: 20px 34px 30px 34px; width: 661px; } .col-100 { width: 100%; } /* -------------------------- * * PAGE Constructors * * ----------------------- */ body { background: #bcbcbc url(../img/bg_2013.jpg) center top fixed no-repeat; text-align: center; } #wrapper {} #page { min-height: 100%; height: auto !important; height: 100%; margin: 0px auto -79px; text-align: left; width: 1120px; position:relative;}/*944px*/ #wrapper {margin-left:100px;} #logo { color: white; margin: 40px 0 0; text-transform: uppercase; } #logo h1 { color: white; font-size: 28px; margin: 0; } #logo h1 a { color: white; text-decoration: none; } #header-wrapper { margin-top: -25px; } #header-wrapper .col-80 { width: 730px; } #header { padding-top: 15px; position: relative; z-index: 12;} #header h1 { /* display: none; */ } #header-content { width: 720px; float: right; position: relative; z-index: 80; } #search { float: right; margin: 0 10px; } #search #frame { background: url(../img/search2.png) top left repeat-x; height: 30px; padding: 3px 10px 4px 0px; width: 220px; } #header-search { width: 300px; } #search input { background: none; border: none; display: block; } #search input[type="text"] { box-shadow: none; color: #5f5f5f; float: left; outline: none; width: 165px; } #search input[type="submit"] { background: url(../img/search3.png) top right no-repeat; cursor: pointer; float: right; height: 33px; width: 33px;} #Autocomplete_product-search { margin-left: -1px; right: -215px; } #language-select { margin: 0 10px 0 0; text-align: right; float: right;} #language-select a { } #login-and-cart { color: #007cb5; height: 34px; margin: 0 0 5px; padding: 0 0 0 10px; float: right; position:relative;} #login-and-cart a { color: #007cb5; text-decoration: none; } #language-select-and-info { float: left; padding: 7px 0 0; } #info-and-cart a { color: #007cb5; text-decoration: none; } #login-info { float: right; text-align: right; } #login-info a { text-decoration: none; } #login-info span { display: inline; margin: 0 10px; } #top-menu { position: relative; z-index: 20; float: right; width: 730px; text-align:right; height:60px;} #top-menu-list { margin: 0px 0; padding: 7px 0; float:right; list-style-type: none; } #top-menu-list a, #top-menu-list a:hover, #top-menu-list a:active, #top-menu-list a:visited { font-size: 36px; color: #75675a; text-decoration: none;} .top-menu-div { float:left; list-style-type: none; position: relative; z-index: 80;} .top-menu-div a { padding: 0 7px; } .top-menu-div.current a { color: #007cb5 !important; } .menuarea { display: none; background: url(../img/dropdown-bg.png) left top repeat; border: 1px solid #75675a; right: 0px; position: absolute; text-align: right; top: 55px; padding: 7px 0; z-index:90; width: 180px;} .menuarea #menu_4, .menuarea #menu_1{ display:none; } #top-menu-list .menuarea a, #top-menu-list .menuarea a:hover, #top-menu-list .menuarea a:active, #top-menu-list .menuarea a:visited { font-size: 11px; color: #007cb5; text-decoration: none; padding: 7px 17px 7px 7px; display: block; } #breadcrumbs { float: right; width: 729px; text-align:right; margin-left: auto; padding-right: 5px;} .push { height: 79px; position: relative; z-index: 1;} #footer-wrap { height: 79px; position: relative; z-index: 2; background: url(../img/footer_bg.png) top left repeat-x; } #footer { color: #75675a; margin: 0 auto; width: 1020px; height: 50px; font-size: 10px; padding-top:20px;} #footer-left { float: left; width: 680px; } #footer-right { float: right; width: 40px; } #footer a { color: #75675a; text-decoration: none; } /* runkoa */ .brown-8 { width: 234px; margin: 0 8px; background: #604b3d; height:12px; float: left; } .brown-9 { width: 232px; margin: 0 9px; background: #604b3d; height:12px; float: left; } .brown-8-full { width: 1004px; margin: 0 8px; background: #604b3d; height:12px; float: left; } .brown-11 { width: 733px; margin: 0 11px; *margin-left: 25px; background: #604b3d; height:12px; } .cuf { font-size: 36px !important; } .main-col-right { height: 100%; width: 710px; padding: 15px 15px 60px 30px; min-height: 800px} .main-col-left { height: 100%; width: 215px; float: left;} .fronth2 { font-size: 36px; margin: 25px 8px 0px; padding: 7px 7px 7px 15px; *padding: 0 0 0 15px; background: #604b3d; color: white; } #front-slider { height: 292px; width: 895px; float: left; background: #f0e3dd; position: relative; padding: 18px 35px 10px 90px;} #front-slider h2 { font-size: 25px; text-align: right; color: #0091b5; } #content { float: left; } #front-wrap { float: left; } #front-left-wrap { float: left; width: 250px; margin-bottom: 40px;} .front-left-content { background: #f0e3dd; margin: 0; padding: 20px 5px 10px 10px; color: #604b3d;} #front-left-down { padding-left: 20px; } #front-left-down a { font-size: 10px; text-decoration: none; color: #50453c;} #front-left-down td { width: 106px; } #front-right-wrap { float: left; width: 720px; color: #604b3d; padding-bottom: 80px;} #front-right-wrap .fronth2 { *padding-bottom: 15px; } #front-category { background: url(../img/front-paper-bg-top.png) left top no-repeat; width: 772px; margin:-75px 0 0 -15px; text-align: center;} #front-category h2 { font-size: 25px; text-align: left; color: #0091b5; display: block; padding-left: 20px;} #front-category td { width: 210px;} #front-category a, #front-category a:hover, #front-category a:active, #front-category a:visited { font-size: 25px; color: #0091b5; text-decoration: none;} #front-category-content { background: url(../img/front-paper-bg-mid.png) left top repeat-y; padding: 40px;} #front-category-bottom { background: url(../img/front-paper-bg-bottom.png) left bottom no-repeat; padding: 34px;} .slides_container { width: 100%; height: 250px; } .slides_container .slide { display: block; width: 100%; height: 245px; } .slides_container .item-info { bottom: -40px !important; padding: 0 !important; left: 0 !important; position: absolute; width: 140px !important; } .s-item-info { -moz-transition: bottom 0.1s ease-in 0s; /*bottom: 15px;*/ left: 13px; padding: 5px; position: absolute; /* width: 130px;*/ z-index: 10; position: absolute; line-height: 1.1; font-size: 12px; } .slide img{ position: absolute; bottom: 0px; } .slide .scol { height: 250px !important; border:none !important; overflow: hidden; padding: 0px 0 0px 15px !important; margin:0 !important; position: relative; width: 160px !important; } .pagination { margin: 0; padding: 0; float: right; list-style: none;} .pagination a {text-decoration: none; display: block; text-indent: -9999px; overflow: hidden;} .pagination li { float: left; background: url(../img/pagination.png) 0 -24px no-repeat; height: 12px; width: 12px; margin: 2px;} .pagination .current { background: url(../img/pagination.png) 0 0px no-repeat;} /* -------------------------- * * #cart eli SHOPPING CART * * ----------------------- */ #cart { width: 366px; color: #007cb5; height: 34px; position: absolute; overflow: hidden; right: 0; top: 0; z-index: 80; float: right; margin-top: -5px;} #cart a { color: #007cb5; text-decoration: none; display: block; } #cart:hover, #cart.open { height: auto; } #cart:hover #cart-list, #cart.open #cart-list { height: auto; margin: 0; } #cart-list tr.highlight-cart-item, #cart #cart-list table.border { border-bottom: 1px solid #707070 !important; border-top: 1px solid #707070 !important; } #cart-list .border { border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-collapse: collapse; } #cart-wrapper { cursor: default; } #cart-wrapper.closed { } #cart-wrapper span { white-space: nowrap; } #cart-info { cursor: pointer; overflow: hidden; text-align: right; } #cart-info #cart-count-and-price{ font-size: 13px; } #cart-info #to-basket { padding: 9px 10px; } #cart-info #to-basket span { background: url(../img/icons/cart_basket.png) right 1px no-repeat !important; height: 25px !important; color: #707070; line-height: 2.4; overflow: visible; padding-right: 30px !important; font-size: 11px;} #cart:hover #to-basket, #cart.open #to-basket { background: url(../img/dropdown-bg.png) } #cart-list { background: url(../img/dropdown-bg.png); height: 340px; padding: 8px 8px 5px; width:350px; } #cart-list b { font-size: 12px; } #cart-list ul { list-style: none; padding: 0 2px 0 0; text-align: right; } #cart-list table { border-collapse: collapse; margin: 0 0 5px; width: 100%; text-align: left; } #cart-list tr.highlight-cart-item td { background: url(../img/dropdown-bg.png); color: #007cb5 !important; } #cart-list table td { padding: 0 3px 1px 3px; vertical-align: middle; } #cart-list .item-name { overflow-x:hidden; width: 340px; display: block; margin: 5px 0 0; } #cart-list .variation-item-container { } #cart-list .variation-item { width: 75%; } /* -------------------------- * * #content * * Itse contentin wrapper * * ----------------------- */ #content-wrapper { position: relative; z-index: 11; } #content { position: relative; margin: 10px 0 0; z-index: 11;} #display-area { position: absolute; right: -205px; top: 0; width: 200px; } /* -------------------------- * * #left-content * eli sidebar :) * * ----------------------- */ #left-content-wrap { width: 250px; float: left; } #left-content { padding-left: 35px; padding-top: 75px; background: #ebe6e4; } #left-content h2 { color: white; display: none; font-size: 14px; margin: 0; padding: 10px 10px 10px 20px; } #left-content #active { color: #f4f3f2; list-style: none; } #left-content .active, #shop-category-navigation .active { margin-left: -25px; padding-left: 25px; background: url(../img/submenu-act-bg.png) 0 3px repeat-y; } .sidebar-menu { padding: 0 0; margin: 0 0 0px; list-style: none; } .sidebar-menu .dotted { border-top: 1px dotted; margin-right: 37px;} .sidebar-menu a { display: block; font-size: 11px; text-decoration: none; } .sidebar-menu li a { border-top: 1px solid #e4e4e4; padding: 5px 23px 5px 0px; } /*.sidebar-menu li:first-child a { }*/ .dotted .cuf { padding-top: 10px; padding-bottom: 10px; *padding-top: 0px; *padding-bottom: 0px; } .sidebar-menu ol { padding: 0 0 15px 0; margin: 0; list-style: none; } .sidebar-menu li a:hover { background-color: transparent; } .sidebar-menu li.current a { color: #007cb5; list-style: none; } .sidebar-menu li.current ol li a { border: none; color: #007cb5;} .sidebar-menu li.current.active a, #menu li.current a { font-weight: normal; } .sidebar-menu li.current.active ol li a { font-weight: normal; } .sidebar-menu .submenu { color: #007cb5; } .sidebar-menu .menu-lvl-0 { padding-left: 0px; } .sidebar-menu .menu-lvl-1 { padding-left: 0; font-size:36px; } .sidebar-menu .menu-lvl-2 { padding-left: 10px; font-size:12px;} .sidebar-menu .menu-lvl-3 { padding-left: 30px; } .sidebar-menu .menu-lvl-4 { padding-left: 40px; } #shop-category-navigation { padding-bottom: 10px; *padding-bottom: 0px; } #shop-category-navigation li { list-style: none; } #shop-category-navigation li a { padding-left: 0px; } #shop-category-navigation li li a { padding-left: 15px; } #shop-category-navigation li li li a { padding-left: 35px; } #shop-category-navigation li li li li a { padding-left: 35px; } #shop-category-navigation li li li li li a { padding-left: 35px; } /* -------------------------- * * #right-content * eli päänäkymä :) * * ----------------------- */ #right-content-wrapper { margin-left: 14px; *margin-left: 0; } #right-content { background: white; } #shop-breadcrumbs { display: block; overflow: hidden; padding: 0 0 5px; float: right; margin: 0px} #shop-breadcrumbs.col-wrap { margin: 0; } #shop-breadcrumbs li { display: block; float: left; margin: 0 8px 0 0; } #shop-breadcrumbs li span { display: block; float: left; height: 16px; margin: 0 0 0 5px; width: 5px; } #shop-breadcrumbs, #shop-breadcrumbs a { color: #604b3d; text-decoration: none; } #shop-breadcrumbs a.add-arrow { background: url(../img/gui/arrows/arrow-nav.png) no-repeat right 5px; padding: 0 15px 0 0; } #shop-breadcrumbs li.darker a { color: #604b3d; } #item-container { overflow: hidden; } #item-container h2 span, #item-container h3 { color: #666; font-size: 16px; } #item-container h3 a { color: #666; font-size: 12px; } #item-container #item-info-header-cont { margin-bottom: 10px; overflow: hidden; } #item-container #item-info-header { float: left; } #item-container #qr-code { float: right; } #item-container .item-price { margin-top: 0; } #item-container .item-price span { font-size: 25px; font-weight: bold; } #item-container select#variation-select { width: 100%; } #item-info-wrapper { } #item-info-wrapper #item-image-container { float: left; position: relative; text-align: center; width: 165px; } #item-info-wrapper #item-image-container #item-image-big { text-align: left; padding: 0px 0px 0; } #item-info-wrapper #item-image-container img { cursor: pointer; } #item-info-wrapper #item-image-container .no-image { height: 200px; width: 165px; } #item-info-wrapper #item-image-container .item-thumbnails { float: left; margin: 5px 0 0 5px; } #item-image-thumbs { border: 1px dotted #dadada; border-top: none; border-bottom: none; } #item-info-wrapper #item-image-container .button-holder { border: 1px dotted #dadada; border-top: none; } #item-info-wrapper #item-image-container .button-holder .button { width:140px; /*border-top: 1px dotted #75675A;*/ } #item-info-wrapper #item-data-container { float: left; margin-left: -1px; padding: 0px 20px 20px 20px; width: 500px; } #item-info-wrapper #item-data-container .form-button-container { border-bottom: 1px solid #eee; padding-bottom: 7px; } #item-info-wrapper #item-data-container .form-button-container p { margin: 5px 0 2px; } #item-info-wrapper #item-data-container .exclusive { float:right; position: relative; top: -20px; right: -20px; } /* #related-items-container { margin: 20px 0 0; } */ .item-lift { border-left: 1px solid #e0e0e0; float: left; padding: 0 0 0 20px; margin: 20px 20px 0 0; width: 130px; } .item-lift:first-child { border: none; } /* Product listing */ #categoryDescription { } #categoryDescription img { margin-left: -15px; } #categoryDescription h2 { padding: 0; margin: 25px 0 15px 0; } #categoryDescription p { display:block; padding-left:25px;} #categoryDescription.no-p p { display: none; } #category-news h3 { display: block; color: white; background: #00aa86; padding:3px 25px; font-size: 30px; } #category-products h3 { display: block; color: white; background: #0091b5; padding:3px 25px; font-size: 30px; } /* -------------------------- * * PRODUCT CONTAINERS * * ----------------------- */ .product-lift-container { position: relative; } .borders { border: 1px solid #dadada; border-top: 4px solid #dadada; } .product-lift-container a, .revolver a, .cartitems a { text-decoration: none; } .product-lift-container h2 { border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; font-size: 14px; margin: 0; padding: 10px 15px; } /*.product-lift-container .top-border { border-top: 1px solid #e0e0e0; }*/ .product-lift-container .product-image, .revolver .product-image { display: block; height: 205px; overflow: hidden; position: relative; width: 160px; } .product-lift-container .item-is-exclusive, .revolver .item-is-exclusive { height: 46px; overflow: hidden; position: absolute; right: 0px; top: 0; width: 54px; background: url(../img/shop/excl_thumb.png) top right no-repeat; } .revolver .item-is-exclusive { top:-15px; right: -35px; } .product-lift-container { margin-left: -18px; border-bottom: 0; border-right: 0; /*display: inline-block; *display: inline: *zoom: 1;*/ } .product-lift-container.block { display: block; *display: block; } .product-lift-container ol, .product-lift-container ul { padding: 0; list-style: none; } .product-lift-container ol li, .product-lift-container ul li { display: block; float: left; } /* SMALL */ .product-lift-container.small { border-top-color: #333; } .product-lift-container.small ol, .product-lift-container.small ul { list-style: none; margin: 0; } .product-lift-container.small ol li, .product-lift-container.small ul li { /*background: url(../img/shop/arrows/arrow-basic.png) 0 5px no-repeat;*/ border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 10px 7px; text-align: center; width: 150px; } .product-lift-container.small ol li a, .product-lift-container.small ul li a { display: block; } .product-lift-container.small ol li span.title, .product-lift-container.small ul li span.title { display: block; margin: 0; } .product-lift-container.small .no-image { display: inline-block; height: 50px; width: 50px; *display: inline; *zoom: 1; } .product-lift-container.small .no-image span { background-image: url(../img/shop/icons/icon-no-image-small.png); } /* BIG */ .product-lift-container.big .col-25 { height: 330px; overflow: hidden; padding: 0px 0 10px 0px; position: relative; margin-left: 17px; float: left; width:165px;} .product-lift-container.big .col { border: 1px dotted #75675a; border-top: none; } .product-lift-container.big .col .item-info { } .product-lift-container.big .col .price, .revolver .price { margin-top: 2px; margin-bottom: 12px; text-align: left !important; } .product-lift-container.big .no-image { height: 205px; width: 160px; } .product-lift-container.big .no-image span { background-position: center 35%; } .product-lift-container.big .item-info, .revolver .item-info { background: white; height: 99px; left: 0px; padding: 15px 10px 10px 10px; position: absolute; width: 143px; z-index: 10; } .product-lift-container.big .item-info a, .revolver a { color: #50453c; font-size: 12px; display: block; line-height: 14px; } .product-lift-container.big .item-info a span, .revolver a span { color: #75675a; font-size: 11px; } .product-lift-container.big .col:hover > .item-info { bottom: 10px; } .product-lift-container.big .col:hover > .no-lift { bottom: -35px; } .product-lift-container.big .item-info .button { font-size: smaller; width: 140px; position: absolute; left: 10px; bottom: 0px; border-radius: 0 0 0 0 !important; border-top: 1px dotted #75675a; padding: 6px 7px 7px 0;} .product-lift-container.big .item-info .button span { line-height: 1.2; } .top-gear-setting { position: absolute; right: -12px; top: -12px; z-index: 5; } /* -------------------------- * * ORDER * * ----------------------- */ #wizard-statusbar { } #wizard-statusbar ul { height: 30px; margin: 20px 0 0; padding: 0; list-style: none; } #wizard-statusbar ul li { display: block; float: left; position: relative; text-align: center; } #wizard-statusbar ul li a { display: block; padding: 8px 9px 10px; text-decoration: none; width: 141px; } #wizard-statusbar ul li.current a { color: white; } #wizard-statusbar ul li.current { background: #333; } #wizard-statusbar ul li.current span { bottom: -10px; position: absolute; display: block; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; } #remove-cart { margin-bottom: 10px; } .lighter-description { color:#7e7e7e; } fieldset legend, #cart-content h3 { font-size: 14px; text-transform: uppercase; } #cart-content h3 { margin-bottom: 5px; } .cartitems { border-collapse: collapse; overflow: hidden; } .cartitems .no-image { height: 82px; margin: 0 auto; width: 82px; } .cartitems table { width: 100%; } .cartitems tr { border-bottom: 1px solid #e0e0e0; } .cartitems tr:last-of-type { border: 0; } .cartitems tr td { padding: 5px; } .cartitems tr td:first-child { background: white; border-right: 1px solid #e0e0e0; text-align: center; } .cartitems tr .cartitem-image-container { width: 84px; vertical-align:top; } .cartitems tr .cartitem-data-container { border-top: 1px solid #E0E0E0; vertical-align: top; } .cartitems tr:first-child .cartitem-data-container { border-top: none; } .cartitems tr .cartitem-data-container table { border-collapse: collapse; border:none; } .cartitems tr .cartitem-data-container table tr { border-bottom: none; } .cartitems tr .cartitem-data-container td { background: transparent; border: none; text-align: left; padding: 1px 5px; height:28px; } .cartitems tr .cartitem-data-container td.amount{ text-align: right; width: 70px; } .cartitems tr .cartitem-data-container td.amount p { margin-top: 9px; } .cartitems tr .cartitem-data-container td.amount p, .cartitems tr .cartitem-data-container td.amount input { display: block; float: left; margin-left: 2px; padding:4px 7px; } .cartitems tr .cartitem-data-container td.amount button { display: block; float: left; margin-top: 5px; margin-left: 5px; } .cartitem-data-container input { text-align: center; width: 20px; } .cartitem-data-container .cartitem-data-info{ /*width: 200px;*/ } .cartitem-data-container .cartitem-data-shop{ color: #c3c3c3; font-style: italic; } .cartitem-data-container .price { width: 50px; text-align: right; } .itemlist { border-collapse: collapse; width: 100%; } .itemlist thead th { border-bottom: 1px solid #e0e0e0; font-weight: bold; padding: 5px 10px; } .itemlist tr:first-child td, .itemlist tr.no-border td { border: 0; } .itemlist tr.no-border td { padding-bottom: 15px; } .header-and-date tr:first-child td { padding-top: 5px; } .header-and-date tr td { padding: 10px 5px; vertical-align: top; } .itemlist td { border: 0; border-top: 1px solid #e0e0e0; border-collapse: collapse; padding: 5px 10px; } .itemlist td label { padding-top:5px !important; } .itemlist tr td:first-child { } .itemlist.total-value tr td:first-child { text-align: right; width: 85%; } .itemlist .price-total { font-size: 20px; } #email-cart { } #email-cart input { width: 320px; } .summaryinfo-container { overflow: hidden; } .summaryinfo-container fieldset { float: left; padding-left: 20px; padding-right: 20px; width: 280px; } .summaryinfo-container .payment > td { padding: 0 0 5px; } .summaryinfo-container .total { border-top: 1px solid #e0e0e0; } .summaryinfo-container .total .price { white-space: nowrap; } .summaryinfo-container .total > td { padding: 5px 0 0; } .equal-height-fieldsets { width: 100%; } .equal-height-fieldsets td.container { border: 1px solid #E0E0E0; border-top: none; padding: 0; vertical-align: top; width: 280px; background-color: white; } .equal-height-fieldsets td fieldset { border-bottom: none; border-left: none; border-right: none; margin-top: -7px; margin-bottom: 0; width: 278px; } /* -------------------------- * * REVOLVER * * ----------------------- */ .revolver { background: white; height: 300px; position: relative; } .revolver .revolver-item { /*height: 220px;*/ position: absolute; left: 35px; top: 15px; } .revolver .revolver-item .no-image, .revolver .revolver-item .no-image span { background-position: center 30%; height: 200px; width: 150px; } .revolver .revolver-item .button { font-size: 11px; width: 140px; } .revolver .revolver-item .button span { line-height: 1.2; } .revolver .revolver-item a.button { width: 130px; } .revolver .revolver-item a.button span { padding-left: 18px; } .revolver .item-info { bottom: -40px !important; padding: 0 !important; left: 0 !important; position: absolute; width: 140px !important; } /* -------------------------- * * TABS * * ----------------------- */ .tabs-container { } .tab-header { list-style: none; margin: 0; padding: 0; overflow: hidden; } .tab-header .tab { background: #e0e0e0; border: 1px solid #e0e0e0; border-bottom: none; color: #333; float: left; padding: 10px 15px; text-decoration: none; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 0 0; margin: 0 2px 0 0; } .tab-header .tab a { text-decoration: none; } .tab-header .tab.current { background: white; color: black; } .tab-content { background: white; border: 1px solid #e0e0e0; margin: -1px 0 0; padding: 5px 20px; } .tab-content fieldset:last-of-type { margin-bottom: 0; } #account-tabs .tab-content { padding: 20px; } #account-tabs .tab-content h2 { margin: 0 0 20px; } #account-tabs .tab-content h3 { margin-top: -15px; } /* -------------------------- * * LIGHtBOX * * ----------------------- */ #item-image-popup { padding: 10px; } #item-image-popup #lightbox-container { position: relative; } #item-image-popup #lightbox-caption { background: white; bottom: 0; opacity: .8; filter: alpha(opacity = 80); padding: 10px; position: absolute; left: 0; text-align: center; width: 783px; z-index: 110; } #item-image-popup .thumbs { padding: 10px 10px 0 10px; } #item-image-popup .thumbs img { border: 1px solid #cacaca; padding: 2px; cursor:pointer;} #item-image-popup .thumbs .hover { border: 1px solid #333; } /* -------------------------- * * BUTTONS * * .dark ja .white * * ----------------------- */ .button { color: #75675a; background: none; border: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; cursor: pointer; font-family: 'Verdana', 'Tahoma', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', 'sans'; font-size: 100%; line-height: 1; margin: 0; padding: 0; } .button.white, input[type="text"], input[type="password"], select { background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 88%, #d3d3d3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(88%,#f9f9f9), color-stop(100%,#d3d3d3)); background: -webkit-linear-gradient(top,#f9f9f9 88%,#d3d3d3 100%); background: -o-linear-gradient(top, #f9f9f9 88%,#d3d3d3 100%); background: -ms-linear-gradient(top, #f9f9f9 88%,#d3d3d3 100%); background: linear-gradient(top, #f9f9f9 88%,#d3d3d3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d3d3d3',GradientType=0 ); -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); border: 1px solid #c7c7c7; color: #333; } .button.dark { background: #333; background: -moz-linear-gradient(top, #5e5e5e 0%, #3f3f3f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(100%,#3f3f3f)); background: -webkit-linear-gradient(top, #5e5e5e 0%,#3f3f3f 100%); background: -o-linear-gradient(top, #5e5e5e 0%,#3f3f3f 100%); background: -ms-linear-gradient(top, #5e5e5e 0%,#3f3f3f 100%); background: linear-gradient(top, #5e5e5e 0%,#3f3f3f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#3f3f3f',GradientType=0 ); -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); color: white; border: 1px solid transparent; } select { background: #f9f9f9 !important; } input[type="text"], input[type="password"] { height: 16px; padding: 6px 7px; } .button.no-bg { background: none; } .button.padding { padding: 6px 7px; } .button.dark.padding { padding: 6px 7px; } select.button.padding { padding: 5px 7px; } .button.add-margin-to-left { display: inline-block; margin-left: 10px !important; *display: inline; *zoom: 1; } .button.only-icon { padding: 5px; line-height: 2; } div.button, a.button { display: inline-block; *display: inline; *zoom: 1; } a.button { text-decoration: none; } .button.disabled, .button[disabled="disabled"] { cursor: default; filter: alpha(opacity = 60); opacity: .6; } .button.thin-padding { padding: 2px 3px; } .button.fat-padding { padding: 10px 12px; } .button.input { cursor: text; } .button.center { margin: 0 auto; } .button.margin { margin-bottom: 5px; } .button.fixed-size { background-image: url(../img/shop/bg/bg-fixed-color-button.png); background-position: left top; background-repeat: repeat-x; height: 16px; width: 12px; } .button.opacity-down { opacity: .6; filter: alpha(opacity = 60); } .button.with-indicator { height: 14px; width: 10px; } .color-button-wrapper { border: 1px solid #333; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; display: inline-block; padding: 1px; *display: inline; *zoom: 1; } .button.no-border-radius { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .button span { font-size: 100%; text-align: left; display: block; height: 16px; line-height: 1; } .button.icon-left span { background-position: left center !important; padding-left: 25px; padding-top: 2px; } .button.icon-right span { background-position: right center !important; padding-right: 25px; } .button.only-icon span { background-position: center center !important; display: block; height: 16px; width: 16px; } .button.no-padding-icon, .button.no-padding-icon span { height: 16px; width: 16px; } .form-input.button { margin-bottom: 5px; padding-bottom: 7px; } /* -------------------------- * * BUTTON ICONS * * ----------------------- */ .button span { background-repeat: no-repeat; } .button.icon-add-to-basket span { background-image: url(../img/icons/basket_put2.png); } .button.icon-add-to-memo span { background-image: url(../img/icons/page_white_add.png); } .button.icon-tell-to-friend span { background-image: url(../img/icons/comments.png); } .button.icon-cart-clear span { background-image: url(../img/icons/cart_delete.png); } .button.icon-cart-new span { background-image: url(../img/icons/cart_add.png); } .button.icon-delete span { background-image: url(../img/icons/delete.png); } .button.icon-save span { background-image: url(../img/icons/save.png); } .button.icon-email span { background-image: url(../img/icons/email_go.png); } .button.icon-cart-next span { background-image: url(../img/icons/cart_go.png); } .button.icon-cart-prev span { background-image: url(../img/icons/arrow_undo.png); } .button.icon-cart-accept span { background-image: url(../img/icons/accept.png); } .button.icon-search span { background-image: url(../img/icons/magnifier.png); } .button.icon-search-clear span { background-image: url(../img/icons/textfield.png); } .button.icon-basic-arrow span { background-image: url(../img/icons/icon-basic-arrow.png); } .button.icon-settings span { background-image: url(../img/icons/cog.png); } .button.icon-print span { background-image: url(../img/icons/printer.png); } .button.icon-new-contact span { background-image: url(../img/icons/vcard_add.png); } /* -------------------------- * * COMMON * * ----------------------- */ .info-box { background: #f3f3f3; border: 1px solid #eee; margin: 0 0 10px; padding: 10px; text-align: center; } input[type="password"], input[type="text"] { outline: none; } select { padding: 4px 0; } .text-center { /*padding-left: 5px;*/ text-align: center; } .text-center .button:first-child { margin-right: 3px; } textarea { border: 1px solid #e0e0e0; font-family: 'Tahoma', 'Verdana', 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', 'sans'; font-size: 100%; outline: none; padding: 2%; resize: none; width: 96%; } .full-width { width: 100%; } table.valign-top td { vertical-align: top; } fieldset { background: white; border: 1px solid #e0e0e0; border-top-width: 4px; margin: 0 0 20px; padding: 10px; } fieldset legend { padding: 0 10px; } fieldset ol, fieldset ul { list-style: none; } fieldset fieldset:last-child { margin-bottom: 0; } .bottom-4px-light-border { border-bottom: 4px solid #cacaca; } .icon { height: 16px; width: 16px; } .border-radius-3 { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .border-radius-5 { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .border-radius-10 { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .only-right-side-radius { border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; -ms-border-top-right-radius: 0; -o-border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; -ms-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0; } .only-left-side-radius { border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; -ms-border-top-left-radius: 0; -o-border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; -ms-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .element-thumb { width: 120px; height: 90px; margin: 1px; border: 1px solid #333; background-color: #fff; border-radius: 3px; position: relative; } .element-thumb span { display: block; background: url(../img/shop/transparent_white.png); color: #3e3e3e; border: 1px solid #555; padding: 2px 5px; font-size: 12px; line-height: 18px; margin: 2px; text-align: left; font-weight: bold; height: 35px; border-radius: 3px; overflow: hidden;} .element-thumb .availability { background: none no-repeat; right: 0px; top: 0px; position: absolute; height: 16px; width: 16px; } .element-thumb .available { background-image: url(../img/icons/bullet_green.png); } .element-thumb .not-available { background-image: url(../img/icons/bullet_red.png); } .new-price, .green { color: #51ab4a !important; text-transform: uppercase; } .old-price, .red { color: #d73636 !important; text-transform: uppercase; } .blue { color: #3f8dcf !important; text-transform: uppercase; } .orange { color: #e79c19 !important; text-transform: uppercase; } .hide { display: none; } .no-image { background: url(../img/shop/bg/bg-no-image.png) repeat; position: relative; } .no-image span { background: url(../img/shop/icons/icon-no-image.png) center center no-repeat; display: block; height: 100%; width: 100%; } .remove-padding-top { padding-top: 0 !important; } .remove-padding-right { padding-right: 0 !important; } .remove-padding-bottom { padding-bottom: 0 !important; } .remove-padding-left { padding-left: 0 !important; } .remove-margin-top { margin-top: 0 !important; } .remove-margin-right { margin-right: 0 !important; } .remove-margin-bottom { margin-bottom: 0 !important; } .remove-margin-left { margin-left: 0 !important; } .remove-border-top { border-top: none !important; } .remove-border-right { border-right: none !important; } .remove-border-bottom { border-bottom: none !important; } .remove-border-left { border-left: none !important; } .relative { position: relative; } .strike { text-decoration: line-through; } .text-left { text-align: left; } .text-right { text-align: right; } .width-auto { width: auto !important; } .price, .price-total { text-align: right !important; white-space:nowrap; } .shopbanner { border: 1px solid black; width: 90px; height: 50px; margin-bottom: 5px; background-color:white; overflow: hidden; } .shopbanner div { border: 5px solid white; overflow: hidden; width: 80px; height: 40px; } .shopbanner span { display: none; } /* Ostoskori-widgetti */ .divider{ border-bottom: 1px solid #ccc; height: 1px; width: 100%; } .clear{ clear: both; } .preorder-caption{ color: #cf3737; } div.summaryinfo{ width:250px; height:100%; float:left; padding:5px; border:1px solid red; margin-right:5px; } table.summary{ width: 100%; border-collapse: collapse; } table.summary td.price{ text-align: right; vertical-align: top; white-space: nowrap; } /* Maksupainikkeet */ .payment-button-container{} .payment-button{ float: left; margin: 2px; border: 1px solid #ababab; width: 145px; height: 105px; overflow: hidden; text-align: center; cursor: pointer; background-color: white; text-align: center; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .payment-button:hover{ border: 1px solid #484848; box-shadow: 1px 1px 5px #888888; -webkit-box-shadow: 1px 1px 5px #888888; -moz-box-shadow: 1px 1px 5px #888888; -ms-box-shadow: 1px 1px 5px #888888; -o-box-shadow: 1px 1px 5px #888888; } .payment-button span{ display: table-cell; vertical-align: middle; text-align: center; width: 150px; height: 65px; } .payment-button div{ height: 12px; font-size: 10px; } /* Arvonlisäveroerittely */ table.vats{ border-collapse: collapse; } table.vats th, table.vats td{ /* text-align: right !important; */ vertical-align: top !important; padding: 0 0 0 10px !important; font-size: 11px !important; border: 0 !important; } table.vats th{ text-transform: uppercase; } /* Tuotehaku */ .autocomplete { border-radius: 3px; z-index:100; position: absolute; margin-left:0px; margin-top:-1px;} .autocomplete>div{ border-bottom: 1px solid #eeeeee; cursor: pointer; padding: 2px; } .autocomplete>div:last-child{ border-bottom-width: 0px; } .autocomplete .search-item{} .autocomplete .search-item img{ border-radius: 3px; float: left; } .autocomplete .no-image{ border: 1px solid #eeeeee; border-radius: 3px; float: left; background: url(../img/shop/icons/icon-no-image-small.png) center no-repeat; height: 40px; width: 40px; } .autocomplete .search-item-value{ float: left; padding: 1px 0 0 8px; margin: 0; } .autocomplete .search-item-value i{ display: block; } #searchtools{ float: right; border-collapse: collapse; margin-bottom: 20px; } #searchtools td{ padding-right: 10px; } #searchtools td label{ margin-left: 10px; } #searchresults{} #searchresults .no-image { width: 38px; height: 38px; border: 1px solid #eeeeee; border-radius: 3px; } #searchresults .no-image span { background-image: url(../img/shop/icons/icon-no-image-small.png); } /* -------------------------- * * KUITTI * * ----------------------- */ #receipt { background-color: white; } #receipt #receipt-header { margin-bottom: 20px; padding: 10px; } #receipt #receipt-footer { margin-top: 20px; font-size: 12px; text-align: center; } #receipt #receipt-footer div { width: 33%; display: inline; margin: 10px; } #receipt #shoplogo { z-index: 1; position: relative; float:left; top: 0; left: 0; } #receipt #barcode { z-index: 1; position: relative; float:right; top: 0; right: 0; } #receipt #receipt-title { margin-top: 10px; margin-bottom: 0; text-align: center; z-index: 2; position: absolute; top: 0; width: 100%; } #receipt #receipt-title * { margin: 0; } #receipt fieldset { padding: 5px; } #receipt legend { text-align: left; } #receipt .contactinfo { margin-bottom: 20px; text-align: left; padding-left:10px; } #receipt .contactinfo h2 { font-size: 18px; } #receipt .contactinfo table { border-collapse: collapse; } #receipt .contactinfo td { padding-right: 10px; vertical-align:top; } #receipt .itemlist .id { width: 60px; } #receipt .itemlist th { text-align: left; color: black; font-size: 1.1em; } #receipt .itemlist td { padding: 3px; vertical-align: top; text-align: left; } #receipt .itemlist td.price { width: 60px; text-align: right; } #receipt .vats { font-size: 12px; float: right; margin-top: 10px; margin-right: -6px; } /* -------------------------- * * ASIAKASPROFIILIN TOIMINNOT * * ----------------------- */ #account-tools { } #account-tools .button { margin-left:4px !important; float: right; } /* -------------------------- * * ASIAKKAAN YHTEYSTIEDOT * * ----------------------- */ div.contactinfo-container { line-height: 16px; background-color: white; width: 240px; height: 65px; border: 1px solid #c3c3c3; float: left; margin: 5px 5px 0 0; padding: 5px; position: relative; overflow: hidden; } div.contactinfo-selector { float: left; margin-right: 5px; margin-top: 1px; } div.contactinfo-container label { float: left; width:85%; line-height: 16px; } div.contactinfo-container div.contactinfo-tools { float: right; position: absolute; right: 3px; top: 3px; width: 40px; text-align: right; } div.contactinfo-container div.contactinfo-tools button { margin-bottom: 2px; } /* -------------------------- * * SOME-CONTAINERIT * * ----------------------- */ .some { padding: 0px 5px 5px 5px; margin-bottom: 10px; } .some div.container { margin-bottom: 5px; } /* -------------------------- * * KIRJAT * * ----------------------- */ #books { } .book { height:350px; width:165px; float:left; margin:10px 5px; background:url(../img/item_bg.gif) repeat-y; overflow:hidden; border-bottom:1px dotted #9a9086; } .book .book_pic { height:220px; width:165px; overflow:hidden; display:block; background-color:#FFF; position:relative;} .book_pic img { position:absolute; bottom:0; } .book .book_author { padding:6px 12px; font-weight:normal; font-size:11px; color:#50453c; } .book .book_title { padding:6px 12px; font-weight:bold; font-size:11px; } .book .book_info { height:100px; width:165px; overflow:hidden; display:block; } .add_to_cart { padding:0 12px; cursor:pointer; } .lataa_kansi { padding:8px 12px 6px 12px; cursor:pointer; } .prod-name {font-weight:bold; margin-bottom:20px;} .prodimgContainer { padding-bottom:6px; background:url(../img/item_bg.gif) repeat-y; border-bottom:1px dotted #9a9086; } h2.uutuudet { background-color:#00aa86; color:#fff; padding:4px 15px; font-size:30px; clear:both; } h2.aiemmat { background-color:#0091b5; color:#fff; padding:4px 15px; font-size:30px; clear:both; margin-top:20px; display:block; } .clearfloat { clear:both; height:10px; width:10px; display:block; } .cat_picture {margin-left:-19px; width:730px; height:96px; overflow:hidden;} .cat_description {padding-right: 10px;} /* Kirjailijat */ .writer-list {position:relative;width:100%;} .writer {float:left;width:49%;margin-right:1%;min-height:160px;} .writer-image {float:left;width:82px;} .writer-text {float:left;margin-left:10px;} .writer-text h2 {font-size:32px;} /* -------------------------- * * PRINT * * ----------------------- */ body#print { background: none; padding: 10px; text-align: left; } #print fieldset { padding: 10px 20px; } #barcode { display: block; margin-right: auto; margin-left: auto; } @media print { * { font-family: 'Tahoma' !important; } * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { 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: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } body { margin: 0; padding: 0; } fieldset { padding-left: 20px; } }