/* Theme Name: Zirkzee Bv Theme Responsive Theme URI: http://zirk.nl Description: Uniek ontwikkeld WordPress thema voor Zirkzee B.V. Version: 1.0.0 Author: PAS Reclame Author URI: http://pasreclame.nl/ Tags: License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html **Opmerkingen: bij het bouwen van een responsive site bouw je de basis op voor het kleinste media screen - phone portrait: min-width: 321px; - phone landscape: @media only screen and (min-width: 550px) {} - tablet portrait: @media only screen and (min-width: 770px) {} - tablet landscape: @media only screen and (min-width: 770px) {} - desktop: @media only screen and (min-width: 990px) {} - desktop: @media only screen and (min-width: 1235px) {} tekst: #777 darkblue : 000068 cyan : 00aeef green : 069b4b pastel-green : a9d3ad pastel-blue : 7e7cbb grey 1 : bcbdc0 grey 2 : dcddde bg-grey : fdfcfc */ /* General */ /*////////////////////////////////////////////////////////////////////////////////////////////*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } html { -webkit-text-size-adjust: 100%; } .clear { clear:both; } .hidden { display:none; } .no-padding { padding:0 !important; } .no-style { margin:0; padding:0; background:none; border:none; } .left, .alignleft { float:left; } .right, .alignright { float: right; } .center { text-align:center; } .text-left { text-align:left; } .text-right { text-align: right; } .text-center { text-align:center; } .strong { font-weight: bold; } .error { margin:10px; padding:10px; border:#FF0000 1px solid; background:#ffdddd; color:#333; } .message, .success, .succes { margin:10px; padding:10px; border:#009900 1px solid; background:#FFFFCC; color:#333; } .req { color:#FF0000;} .green { color:#1B8A00; } .bold { font-weight:bolder; } a.call-to-action { outline: 0; margin: 5px 0 0 0; padding:3px 6px 6px 6px; } a.call-to-action { -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; box-shadow: 2px 2px 5px rgba(0,0,0,0.75);} a.call-to-action { color: #fff; text-decoration: underline; background: #000068; display: inline-block; } a.call-to-action:link { background: #000068; color: #fff; } a.call-to-action:visited { background: #000068; color: #fff; } a.call-to-action:hover { background:#7e7cbb; box-shadow: 0px 0px 0px rgba(0,0,0,0.75); } a.call-to-action:active { background:#7e7cbb; box-shadow: 0px 0px 0px rgba(0,0,0,0.75); } a { color: #1a64af; outline: 0; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { color: #000; text-decoration: underline; } a:active { color: #000; text-decoration: underline; } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:1px solid #333; width: calc(100% - 8px); height: 200px; background:#fff; padding: 3px; -webkit-border-radius: 5px; border-radius: 5px; } input[type=text], input[type=password], input[type=email], input[type=number] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:1px solid #333; outline:none; width:calc(100% - 8px); background:#fff; padding: 3px; -webkit-border-radius: 5px; border-radius: 5px; } select { /* -webkit-appearance: none; -moz-appearance: none; appearance: none; */ border:1px solid #333; outline:none; width:calc(100% - 8px); background:#fff; padding: 3px; -webkit-border-radius: 5px; border-radius: 5px; } input[type=submit], .button { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; outline:none; width:calc(100% - 10px); display:block; overflow:hidden; text-align:center; font-size: 18px; padding: 5px; color: #333; -webkit-box-shadow: 2px 2px 2px 0px #333; box-shadow: 2px 2px 2px 0px #333; -webkit-border-radius: 5px; border-radius: 5px; background: rgb(251,251,251); /* Old browsers */ background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(163,163,163,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(163,163,163,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(163,163,163,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(163,163,163,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(163,163,163,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(163,163,163,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#a3a3a3',GradientType=0 ); /* IE6-9 */ } input[type=submit]:visited, input[type=button]:visited, .button:visited { color: #333; text-decoration:none; } input[type=submit]:active, input[type=button]:active, .button:active {color: #333; text-decoration:none; } input[type=submit]:hover, input[type=button]:hover, .button:hover { color: #333; text-decoration:none; background: rgb(163,163,163); /* Old browsers */ background: -moz-linear-gradient(top, rgba(163,163,163,1) 0%, rgba(251,251,251,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(163,163,163,1)), color-stop(100%,rgba(251,251,251,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(163,163,163,1) 0%,rgba(251,251,251,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(163,163,163,1) 0%,rgba(251,251,251,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(163,163,163,1) 0%,rgba(251,251,251,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(163,163,163,1) 0%,rgba(251,251,251,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#fbfbfb',GradientType=0 ); /* IE6-9 */ } body { background: #fdfcfc url(images/bg-body.png) repeat-x ; font: normal 18px Arial, Verdana, sans-serif; color: #333; padding: 0; margin: 0; min-width:321px; } #background { width:100%; height:auto; display:block; background:url(images/bg-screen-wrapper.jpg) top center no-repeat; } /*------------------------------------------ Header -----------------------------------------------------*/ #header-wrap { margin: 0; width:100%; height:auto; position: relative; } #header-cont{ margin: 0 auto; max-width:990px; overflow:hidden; position: relative; } .logo { text-align:center; width:100%; height: auto; overflow:hidden; padding: 0 0 0 0; float:left; } .logo img { margin: 5px 5% 0 5%; width:90%; } @media only screen and (min-width: 550px) { .logo { margin:-25px 0 0 0; } } @media only screen and (min-width: 770px) { .logo { width:50%; margin:-50px 0 0 0; } } @media only screen and (min-width: 990px) { .logo { float:left; width:423px; margin: 0;} .logo img { margin:0; } } /* Main menu */ #main-menu-wrap { width:100%; background:url(images/bg-texture-dropshadow-box-repeat.png) center top repeat-y; } #main-menu-wrap .main-menu-cont { max-width:990px; margin:0 auto; background:#fff; overflow:hidden; } ul.main-nav-menu { list-style:none; margin:0 15px 15px 15px; padding:0; overflow:hidden; } ul.main-nav-menu li { padding:0; margin: 0; float:left; width:25%; text-align:center; } ul.main-nav-menu li ul.sub-menu { list-style:none; margin:0; padding:0; } ul.main-nav-menu li ul.sub-menu li {} ul.main-nav-menu li ul.sub-menu li a { padding: 5px; } ul.main-nav-menu li ul.sub-menu li a:hover { } ul.main-nav-menu li a { color:#333; text-decoration:none; display:block; padding:5px; overflow:hidden; font-size:14px; } ul.main-nav-menu li a { border-top: 1px solid #000068; border-bottom: 1px solid #000068; background: #ebebeb; } ul.main-nav-menu li a:active { color:#fff; text-decoration:none; background: #69686b; } ul.main-nav-menu li a:visited { color:#333; text-decoration:none; background: #ebebeb; } ul.main-nav-menu li a:hover { color:#fff; text-decoration:none; background: #69686b; } @media only screen and (min-width: 550px) { ul.main-nav-menu li a { font-size:18px; } } /*Secondary bar*/ #secondary-menu { width:100%; height: 83px; background:url(images/bg-second-nav.png) center top no-repeat; margin:0; clear:both; } #secondary-menu ul { max-width:990px; height: 83px; margin:0 auto; padding:0; cursor:pointer; overflow:visible;} #secondary-menu ul li { background:none; width:50%; list-style:none;} #secondary-menu ul li a { text-decoration:none; height: 58px; display:block; overflow:hidden; } #secondary-menu ul li a:visited { text-decoration:none;} #secondary-menu ul li a:hover { text-decoration:none; background:url(images/bg-second-nav-hover.png) repeat-x; } #secondary-menu ul li a:active { text-decoration:none; } .secondary-menu-left{ float:left; margin:7px 0 0 0; } .secondary-menu-left img { height:22px; margin: 18px 0 0 5px; } .secondary-menu-right{ float:right; text-align:right; margin:7px 0 0 0; } .secondary-menu-right img{ height:22px; margin: 18px 5px 0 0; } @media only screen and (min-width: 550px) { .secondary-menu-left img { height:38px; margin: 11px 0 0 5px; } .secondary-menu-right img{ height:38px; margin: 11px 5px 0 0; } } @media only screen and (min-width: 770px) { .secondary-menu-left img{ height:50px; margin: 5px 0 0 5px; } .secondary-menu-right img{ height:50px; margin: 5px 5px 0 0; } } @media only screen and (min-width: 990px) { .secondary-menu-left img{ height:50px; margin: 5px 0 0 5px; } .secondary-menu-right img{ height:50px; margin: 5px 5px 0 0; } } /* top widget area */ .top-widget-area { width:100%; height:auto; overflow:hidden; font-size:14px; } .top-widget-area ul { list-style:none; overflow:hidden; } .top-widget-area ul li { float:right; } .top-widget-area .zirk-shoping-cart-widget { position:fixed; top:0; width:100%; z-index:100;} .top-widget-area .zirk-shoping-cart-widget ul li { float:none; height: 24px; padding: 5px 0 0 30px; font-size:16px; background: #373737 url(images/icon-cart-25px.png) 2px 2px no-repeat; } .top-widget-area .all4u-social-media-widget { width:auto; float:right; padding:5px; margin: 30px 5px 0 0; } .top-widget-area .all4u-social-media-widget .widget-title { float:left; color:#fff; font-weight:normal; } .top-widget-area .all4u-social-media-widget ul li { float:left; } .top-widget-area .all4u-social-media-widget img { height:33px; margin:0 0 0 5px; } @media only screen and (min-width: 550px) { .top-widget-area .all4u-social-media-widget { width:auto; margin: 30px 5px 0 0; } } @media only screen and (min-width: 770px) { .top-widget-area .all4u-social-media-widget { width:auto; margin: 30px 5px 0 0; } } @media only screen and (min-width: 990px) { .top-widget-area { float:right; width:525px; } .top-widget-area .zirk-shoping-cart-widget { position:static; width:auto; margin: 10px 0 0 0; } .top-widget-area .zirk-shoping-cart-widget ul li { width: 220px; height: 19px; padding: 3px 3px 0 30px; font-size:14px; background: #373737 url(images/icon-cart-25px.png) 0px -1px no-repeat; } .top-widget-area .all4u-social-media-widget { width:auto; margin: 5px 5px 0 0; } .top-widget-area .all4u-social-media-widget .widget-title { font-size:12px; } .top-widget-area .all4u-social-media-widget img { height:25px; } } /*------------------------------------------ Content Wrap -----------------------------------------------------*/ #top-content-wrap { width:100%; height: 26px; background:url(images/bg-texture-dropshadow-box-top.png) center top no-repeat; } #top-content-cont { max-width:990px; height: 20px; margin:0 auto; padding-top:6px; background:none; } #top-content-cont .spacer { max-width:990px; height: 20px; margin:0 auto; background:#fff; } #content-wrap {width:100%; background:url(images/bg-texture-dropshadow-box-repeat.png) center top repeat-y;} #content-cont { max-width:960px; padding: 0 15px; margin:0 auto; background:#fff; overflow:hidden; } #content { width:100%; overflow:hidden; } #sidebar { width:100%; overflow:hidden; } @media only screen and (min-width: 770px) { #content { width:calc(100% - 265px); padding-right:15px; float:left; } #sidebar { width:250px; float:right; } } @media only screen and (min-width: 990px) { } /*------------------------------------------ Footer -----------------------------------------------------*/ #footer-wrap { width:100%; overflow:hidden; background: #69686b;} #footer-cont { max-width:990px; margin:0 auto; overflow:hidden; text-align:center; } #footer-cont ul.footer-areas { width:auto; } #footer-cont li.footer-area { display:inline-block; vertical-align:text-top; width:100%; overflow:hidden; } #footer-cont .widget-container { text-align:left; padding:5px; font-size:18px; margin: 10px 0;} #footer-cont .widget-container .widget-title{ color:#fff; font-size:20px; font-weight:bold; margin: 0 0 10px 0; } #footer-cont .widget-container ul { list-style:none; } #footer-cont .widget-container ul li { overflow:hidden; } #footer-cont .widget-container ul li a { color:#fff; padding:10px 5px; display:block; overflow:hidden; border-bottom:#fff 1px solid; } #footer-cont .widget-container ul li a:hover { background:#000068; } #copyright { width:100%; font-size:9px; } #copyright p { display:block; max-width:990px; margin: 0 auto; padding:10px; } @media only screen and (min-width: 550px) { #footer-cont li.footer-area { width:49.5%; } #footer-cont .widget-container { font-size:16px; } #footer-cont .widget-container .widget-title { font-size:18px; } #copyright { font-size:10px; } } @media only screen and (min-width: 770px) { #footer-cont li.footer-area { width:32%; } #footer-cont .widget-container { font-size:14px; } #footer-cont .widget-container .widget-title { font-size:16px; } #copyright { font-size:11px; } } @media only screen and (min-width: 990px) { #footer-cont li.footer-area { width:19.5%; } #footer-cont .widget-container { font-size:12px; } #footer-cont .widget-container .widget-title { font-size:14px; } #copyright { font-size:12px; } } /*------------------------------------------ Sidebar -----------------------------------------------------*/ /*Side bar contents*/ #sidebar ul.sidebar-widget-list { width: auto; height:auto; list-style:none; padding: 0 0 15px 0; } #sidebar ul.sidebar-widget-list li { } #sidebar .widget-title { font-size: 20px; font-weight: 500; color: #fff; background: #000068; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 8px 5px 8px 10px; } /*deafult widget container*/ #sidebar .widget-container { background: #ebebeb; overflow:hidden; margin: 0 0 15px 0; } #sidebar .widget-container p { margin: 5px 0; } #sidebar .widget-container ul { list-style:none; margin:0; padding: 10px; } #sidebar .widget-container ul li { background:none; } #sidebar .widget-container ul li a { display:block; color: #333; text-decoration:none; padding: 5px; border-bottom: 1px solid #000068; } #sidebar .widget-container ul li a:active { color: #fff; background: #7e7cbb; } #sidebar .widget-container ul li a:visited { color: #333; } #sidebar .widget-container ul li a:hover { color: #fff; background: #7e7cbb; } /* WP Text Widget */ #sidebar .textwidget p img { width:100%; height:auto; } /* WP Custom Menu Widget */ #sidebar ul.menu { list-style:none; margin:0; padding: 10px; } #sidebar li.menu-item { margin:0; padding:0; background:none; } #sidebar li.menu-item a { display:block; color: #333; text-decoration:none; padding: 5px; border-bottom: 1px solid #000068; } #sidebar li.menu-item a:active { color: #fff; background: #7e7cbb; } #sidebar li.menu-item a:visited { color: #333; } #sidebar li.menu-item a:hover { color: #fff; background: #7e7cbb; } #sidebar ul.sub-menu { list-style:none; } #sidebar ul.sub-menu li.menu-item a { padding: 5px 5px 5px 20px; } /* WP Search Widget */ #sidebar .widget_search div { padding: 10px; } #sidebar .widget_search #searchsubmit { margin-top:10px; } /* All4u Multilang Widget */ #sidebar ul#lang-wrap { list-style:none; margin:0 ; padding:0; } #sidebar ul#lang-wrap li { background:none; margin:0; padding:0; } #sidebar ul#lang-wrap li a { display:block; color: #333; text-decoration:none; padding: 5px; border-bottom: 1px solid #000068; } #sidebar ul#lang-wrap a:active { color: #fff; background: #7e7cbb; } #sidebar ul#lang-wrap a:visited { color: #333; } #sidebar ul#lang-wrap a:hover { color: #fff; background: #7e7cbb; } /* All4u Social Media Widget */ #sidebar .all4u-social-media-widget ul li { float:left; border:none; } #sidebar .all4u-social-media-widget ul li a { padding:0; border:none; } #sidebar .all4u-social-media-widget ul li a:active { background: none; } #sidebar .all4u-social-media-widget ul li a:visited { background: none; } #sidebar .all4u-social-media-widget ul li a:hover { background: none; } /* Zirk login */ #sidebar .zirk-login-widget li { } #sidebar .zirk-login-widget li a { font-size:14px; } #sidebar .zirk-login-widget li.blockhover { margin: 0 0 10px 0; } #sidebar .zirk-login-widget li.blockhover:hover { background:none; } #sidebar .zirk-login-widget label { font-size: 14px; display:block; } /* Zirk verwijzende producten */ #sidebar .zirk-verwijz-prod-widget { text-align: center; } #sidebar .zirk-verwijz-prod-widget img{ text-align: center; width:100%; height:auto; } #sidebar input[type=text] { font-size:14px; width:99%; } #sidebar input[type=password] { font-size:14px; width:99%; } #sidebar input[type=submit] { } @media only screen and (min-width: 770px) { #sidebar ul.sidebar-widget-list { } #sidebar .widget-title { font-size: 18px; } #sidebar input[type=text] { width:97%; } #sidebar input[type=password] { width:97%; } #sidebar input[type=submit] { width:99%; } #sidebar .widget-container ul li a { font-size:16px; } #sidebar .zirk-login-widget li a { font-size:12px !important; } #sidebar .all4u-social-media-widget img { width:30px; height:30px; } } @media only screen and (min-width: 820px) { #sidebar .all4u-social-media-widget img { width:35px; height:35px; } } @media only screen and (min-width: 990px) { #sidebar .widget-container ul li a { font-size:14px; } #sidebar .all4u-social-media-widget img { width:43px; height:43px; } } /*------------------------------------------ Content -----------------------------------------------------*/ #content .post-entry { overflow:hidden; padding: 0 0 15px 0; } #content { line-height: 24px; font-size: 12px; } #content h1 { margin: 10px 0; font-size: 1.65em; } #content h2 { margin: 10px 0 ; font-size: 1.25em; } #content p { margin: 5px 0 15px 0; } #content .space-bottom { margin-bottom: 25px; } #content ul { list-style:disc; overflow:hidden; padding-left: 1em; margin-bottom: 15px; } #content ul li { margin-left: 1em; } #content .pagination-wrap { width:100%; overflow:hidden; line-height:normal; margin-bottom:15px; } #content .pagination { overflow:hidden; background:#ebebeb; border-top:1px solid #000068; border-bottom:1px solid #000068;} #content .pagination h4 { float:left; font-size:9px; padding:5px; color:#333;} #content .pagination ul { float:left; list-style:none; font-size:9px; margin:0; } #content .pagination li { float:left; padding: 5px 5px 5px 12px; margin-left:5px; } #content .pagination li { background:url(images/arrow-right-blue-sm.png) no-repeat; background-position: 0 5px; } #content .pagination li a { } #content img.alignleft { margin: 0 0 15px 0; width:100%; } #content img.alignright { margin: 0 0 15px 0; width:100%; } #content #all4u-cf-form-1 { margin-bottom:25px; } #content #all4u-cf-form-2 { margin-bottom:25px; } #content #all4u-cf-form-3 { margin-bottom:25px; } @media only screen and (min-width: 550px) { #content { line-height: 24px; font-size: 14px; } #content h1 { margin: 0 0 15px 0; font-size: 1.75em; } #content .pagination h4 { font-size:14px; } #content .pagination ul { font-size:14px; } #content .pagination li { background-position: 0 9px; } #content img.alignleft { margin: 0 15px 15px 0; width:300px; } #content img.alignright { margin: 0 0 15px 15px; width:300px; } } @media only screen and (min-width: 770px) { #content h1 { margin: 0 0 15px 0; font-size: 1.85em; } } @media only screen and (min-width: 990px) { #content h1 { margin: 0 0 15px 0; font-size: 2em; } } /*------------------------------------------ frontpage -----------------------------------------------------*/ .home #content h1 { margin: 0 0 15px 0; font-size: 1em; text-align:center; } .home #content h2.box-header { margin:0; padding: 10px 0; } .home #content p.box-footer { margin:0; padding: 5px 0; } .home #content p { margin: 0; } #frontpage-wrapper li.frontpage-container.box-3 { margin: 0 0 15px 0; width:100%; } #frontpage-wrapper li.frontpage-container.box-3 .box-body h3 { margin: 5px 0 10px 0; font-size:16px; } #frontpage-wrapper li.frontpage-container.box-3 .box-body p { margin: 5px 0 10px 0; font-size:14px; } #frontpage-wrapper li.frontpage-container.box-4 { margin: 0 0 15px 0; width:100%; } #frontpage-wrapper li.frontpage-container.box-4 .box-body { height:150px; overflow:hidden; } #frontpage-wrapper li.frontpage-container.box-4 .box-body h3 { margin: 5px 0 10px 0; font-size:16px; } #frontpage-wrapper li.frontpage-container.box-4 .box-body p { margin: 5px 0 10px 0; font-size:14px; } #frontpage-wrapper li.frontpage-container.box-5 { margin: 0 0 15px 0; width:100%; } #frontpage-wrapper li.frontpage-container.box-5 .box-body { height:150px; overflow:hidden; } #frontpage-wrapper li.frontpage-container.box-5 iframe { width:100%; height:150px; } @media only screen and (min-width: 550px) { .home #content h1 { font-size: 1.2em; } } @media only screen and (min-width: 650px) { #frontpage-wrapper li.frontpage-container.box-4 { margin: 0 7.5px 15px 0; width:calc(50% - 7.5px); } #frontpage-wrapper li.frontpage-container.box-4 .box-body { padding: 0 5px; } #frontpage-wrapper li.frontpage-container.box-5 { margin: 0 0 15px 7.5px; width:calc(50% - 7.5px); } } @media only screen and (min-width: 770px) { .home #content h1 { font-size: 1.2em; } #frontpage-wrapper li.frontpage-container.box-4 { margin: 0 0 15px 0; width:100%; } #frontpage-wrapper li.frontpage-container.box-4 .box-body { padding: 0; } #frontpage-wrapper li.frontpage-container.box-5 { margin: 0 0 15px 0; width:100%; } } @media only screen and (min-width: 890px) { .home #content h1 { font-size: 1.2em; } #frontpage-wrapper li.frontpage-container.box-4 { margin: 0 7.5px 15px 0; width:calc(50% - 7.5px); } #frontpage-wrapper li.frontpage-container.box-4 .box-body { padding: 0 5px; } #frontpage-wrapper li.frontpage-container.box-5 { margin: 0 0 15px 7.5px; width:calc(50% - 7.5px); } } /* ------------------------------------------- Catalogus ---------------------------------------------------- */ #zirk-cat-main { width:100%; margin:15px 0; overflow:hidden; } #zirk-cat-main ul { margin:0; padding:0; text-align:center; list-style:none; } #zirk-cat-main ul li {list-style:none; display:inline-block; vertical-align:text-top; margin:0; margin-bottom: 5px; } #zirk-cat-main ul li a { display:block; overflow:hidden; } #zirk-cat-main ul li a img { width:100%; height:auto;} #zirk-cat-main .thumbnail { width: 32.0%; font-size:9px; } @media only screen and (min-width: 550px) { #zirk-cat-main .thumbnail { width: 32.6%; font-size:12px; } } @media only screen and (min-width: 770px) { #zirk-cat-main .thumbnail { font-size:13px; } } @media only screen and (min-width: 990px) { #zirk-cat-main .thumbnail { font-size:14px; } } #zirk-cat-sub { width:100%; margin:15px 0; overflow:hidden; } #zirk-cat-sub ul { margin:0; padding:0; text-align:center; list-style:none; } #zirk-cat-sub ul li {list-style:none; display:inline-block; vertical-align:text-top; margin:0; margin-bottom: 5px; } #zirk-cat-sub ul li a { display:block; overflow:hidden; } #zirk-cat-sub ul li a img { width:100%; height:auto;} #zirk-cat-sub .thumbnail { width: 32.0%; font-size:9px; } @media only screen and (min-width: 550px) { #zirk-cat-sub .thumbnail { width: 32.6%; font-size:12px; } } @media only screen and (min-width: 770px) { #zirk-cat-sub .thumbnail { font-size:13px; } } @media only screen and (min-width: 990px) { #zirk-cat-sub .thumbnail { font-size:14px; } } /* ------------------------------------------- Item page ---------------------------------------------------- */ #zirk-item-wrapper { margin-bottom:15px; } #zirk-item-wrapper ul { margin:0; } /* layout 2 - layout B */ #content ul.zrk-item-thumb-list { list-style:none; text-align:center; font-size:12px; padding:0; } #content ul.zrk-item-thumb-list li.zrk-item-thumb { width: 32%; display:inline-block; vertical-align:text-top; color: #1a64af; margin:0; } #content ul.zrk-item-thumb-list li.zrk-item-thumb:hover { color: #000; text-decoration: underline; } #content ul.zrk-item-thumb-list li.zrk-item-thumb img { width:100%; } #TB_content .tb-btn-wrap { width: 75%; margin: 25px auto; clear:both; } #TB_content ul {} #TB_content ul li { overflow:hidden; } /* layout 3 - layout C */ .zrk-item-text { font-size:16px; line-height: 22px; } .zrk-item-text p { margin:15px 0; } .zrk-image-wrap { width: calc(100% - 2 px); border:1px solid #333; margin-bottom: 15px; } .zrk-image-wrap img { width: 100%; } #zirk-item-variation-3 { font-size:11px; line-height:14px; } #zirk-item-variation-3 .colomn-left { width: 100% ; float:none; padding: 0; } #zirk-item-variation-3 .colomn-right { width: 100%; float:none; padding: 0; } #zirk-item-variation-3 ul { list-style:none; overflow:hidden; width:100%; padding:0; } #zirk-item-variation-3 ul li { float:left; display:block; overflow:hidden; height:17px; margin:0; padding-top:5px; } #zirk-item-variation-3 ul ul { list-style:none; } #zirk-item-variation-3 ul ul li { border:none; float:none; height:auto; } #zirk-item-variation-3 ul.variation-display { margin-top:-1px; cursor:default; width:calc(100% - 2px); border: #333 1px solid; } #zirk-item-variation-3 ul.variation-display:hover { border: #000068 1px solid; background:#7e7cbb; color:#fff; } #zirk-item-variation-3 ul.variation-display:hover li.variation-mesu { background: url(../../plugins/zirk-webshop-plugin/images/icon-arrow-down-white.png) 0px 1px no-repeat; background-size:20px 20px; } #zirk-item-variation-3 ul.variation-display:hover li.variation-order .btn-bestel { background: url(../../plugins/zirk-webshop-plugin/images/icon-cart-white-32px.png) 0px 3px no-repeat; background-size:16px 16px; } #zirk-item-variation-3 ul.variation-display.zrk-active { border: #333 1px solid; background:#000068; color:#fff; } #zirk-item-variation-3 ul.variation-display.zrk-active li.variation-mesu { background: url(../../plugins/zirk-webshop-plugin/images/icon-arrow-down-white.png) 0px 1px no-repeat; background-size:20px 20px; } #zirk-item-variation-3 ul.variation-display.zrk-active li.variation-order .btn-bestel { background: url(../../plugins/zirk-webshop-plugin/images/icon-cart-white-32px.png) 0px 3px no-repeat; background-size:16px 16px; } #zirk-item-variation-3 ul li.header-mesu { width:calc(47% - 21px); padding-left:20px; height:30px; } #zirk-item-variation-3 ul li.header-uitv { width:calc(26% - 0px); } #zirk-item-variation-3 ul li.header-price { width:calc(27% - 20px); } #zirk-item-variation-3 ul li.header-order { width: 20px; } #zirk-item-variation-3 ul li.variation-mesu { width:calc(47% - 20px); padding-left:20px; cursor:pointer; } #zirk-item-variation-3 ul li.variation-mesu { background: url(../../plugins/zirk-webshop-plugin/images/icon-arrow-down.png) 0px 1px no-repeat; background-size:20px 20px; } #zirk-item-variation-3 ul li.variation-uitv { width:calc(26% - 0px); cursor:pointer; } #zirk-item-variation-3 ul li.variation-price { width:calc(27% - 20px); cursor:pointer; } #zirk-item-variation-3 ul li.variation-order { width: 20px; padding-top:0; height:22px; cursor:pointer; } #zirk-item-variation-3 ul li.variation-order .btn-bestel { padding:3px 3px 3px 0; width:16px; height:16px; } #zirk-item-variation-3 ul li.variation-order .btn-bestel { background: url(../../plugins/zirk-webshop-plugin/images/icon-cart-32px.png) 0px 3px no-repeat; background-size:16px 16px; } #zirk-item-variation-3 ul li.variation-popup { height:285px; width:100%; margin: 0; background: #ebebeb; position:relative; color:#333; } #zirk-item-variation-3 ul li.variation-popup { border-top: 1px solid #333; } #zirk-item-variation-3 ul li.variation-popup { cursor:default; } #zirk-item-variation-3 ul li.variation-popup ul li .col-1 { width:calc(35% - 20px); float:left; padding: 0 5px 0 15px; } #zirk-item-variation-3 ul li.variation-popup ul li .col-2 { width:65%; float:left; } #zirk-item-variation-3 ul li.variation-popup .btn-close { position:absolute; right:5px; top:5px; color:#000068; cursor:pointer; z-index:200; } #zirk-item-variation-3 ul li.variation-popup .btn-bestel { position:absolute; left:10px; bottom:10px; padding: 10px; width:calc(100% - 40px); } #zirk-item-variation-3 ul li.init-variation-popup { position:absolute; left:-5000px; height:0px; } @media only screen and (min-width: 770px) { #zirk-item-variation-3 .colomn-left { width:calc(100% - 2.5px); float:left; padding: 0 2.5px 0 0; } #zirk-item-variation-3 .colomn-right { width:calc(100% - 2.5px); float:right; padding: 0 0 0 2.5px; } .zrk-item-text { font-size:14px; line-height: 18px;float:left; width:55%; } .zrk-image-wrap { width: calc(40% - 2px); float:right; } #zirk-item-variation-3 { font-size:8px; } #zirk-item-variation-3 .colomn-left { width:calc(50% - 2.5px); float:left; } #zirk-item-variation-3 .colomn-right { width:calc(50% - 2.5px); float:right; } } @media only screen and (min-width: 850px) { #zirk-item-variation-3 { font-size:9px; } } @media only screen and (min-width: 850px) { #zirk-item-variation-3 { font-size:9px; } } @media only screen and (min-width: 880px) { #zirk-item-variation-3 { font-size:11px; } } @media only screen and (min-width: 990px) { #zirk-item-variation-3 { font-size:12px; } } /* ----------------------------------------- Shoping Cart ------------------------------------------------- */ #shoping-cart { margin-top:15px; color: #333; line-height:normal; } #shoping-cart table td { vertical-align:top; padding:3px; } #shoping-cart .cart-item {border-top: #000 1px solid; font-size:8px; } #shoping-cart .col-desc { position:relative; } #shoping-cart .col-desc img{ width:20%; float:left; margin-right: 10px; } #shoping-cart .col-stuks { width:15%; background:#b3d2df; vertical-align:top; text-align:right; } #shoping-cart .col-totaal { width:15%; background:#ebebeb; vertical-align:top; text-align:right; position:relative; } #shoping-cart .col-input { width:calc(40% - 10px); background:#b3d2df; } #shoping-cart .col-display { width:30%; background:#ebebeb; vertical-align:top; text-align:right; } #shoping-cart .col-input .aantal-box{ height:auto; margin-bottom: 25px; } #shoping-cart .fake-btn { cursor: pointer; font-weight: bold; text-align: center; padding:3px 10px; margin-bottom:5px; -webkit-box-shadow: 3px 3px 3px 0 #333; box-shadow: 3px 3px 3px 0 #333; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; background: #cdeb8e; background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); } #shoping-cart .zirk-info-btn { position:absolute; bottom:5px; right:5px; } #shoping-cart .zirk-info-btn img { width:18px; } #shoping-cart .product-delete { cursor:pointer; } #shoping-cart .product-delete img { width:12px; margin: 0 5px 0 0; } #shoping-cart .product-delete span { color:#1a64af; margin: 3px 0 0 0; display:block; float:left; } #shoping-cart .product-delete:hover span { color:#000; text-decoration:underline; } #shoping-cart input.input-aantal { width: 8%; font-size: 9px; padding:1px; } #shoping-cart input.input-lengte { width: 20%; font-size: 9px; padding:1px; } #shoping-cart input.input-breedte { width: 20%; font-size: 9px; padding:1px; } #shoping-cart .shop-item-spacer { clear:both; margin-bottom:15px; } #shoping-cart .add-item { cursor:pointer; margin: 15px 0 0 0; display:block; width:100%; height:auto; } #shoping-cart .add-item img { width:18px; margin: 0 5px 0 0; float:left; } #shoping-cart .add-item span { color:#1a64af; margin: 3px 0 0 0; display:block; float:left; } #shoping-cart .add-item:hover span { color:#000; text-decoration:underline; } #shoping-cart .request-delete { display:inline-block; } #shoping-cart .request-delete img { width:12px; } #shoping-cart .discount_product_price { position:absolute; bottom:25px; right:0; padding:5px; background: #ebebeb; color:#000; border-top: 1px solid #999; width:calc(200% - 10px); } #shoping-cart .final_product_price { position:absolute; bottom:0; right:0; padding:5px; background: #a9d3ad; color:#07470d; border-top: 1px solid #299233; width:calc(200% - 10px); } @media only screen and (min-width: 520px) { #shoping-cart .cart-item { font-size:10px; } #shoping-cart .zirk-info-btn { top:5px; right:5px; } #shoping-cart .zirk-info-btn img { width:36px; } #shoping-cart input.input-aantal { width: 10%; font-size: 10px; padding:3px; } #shoping-cart input.input-lengte { width: 22%; font-size: 10px; padding:3px; } #shoping-cart input.input-breedte { width: 22%; font-size: 10px; padding:3px; } } @media only screen and (min-width: 550px) { #shoping-cart .cart-item { font-size:11px; } #shoping-cart .zirk-info-btn { top:5px; right:5px; } #shoping-cart .zirk-info-btn img { width:36px; } #shoping-cart input.input-aantal { width: 10%; font-size: 11px; padding:3px; } #shoping-cart input.input-lengte { width: 22%; font-size: 11px; padding:3px; } #shoping-cart input.input-breedte { width: 22%; font-size: 11px; padding:3px; } } @media only screen and (min-width: 770px) { #shoping-cart .cart-item { font-size:11px; } #shoping-cart .zirk-info-btn { top:5px; right:5px; } #shoping-cart .zirk-info-btn img { width:36px; } #shoping-cart input.input-aantal { width: 10%; font-size: 11px; padding:3px; } #shoping-cart input.input-lengte { width: 22%; font-size: 11px; padding:3px; } #shoping-cart input.input-breedte { width: 22%; font-size: 11px; padding:3px; } } @media only screen and (min-width: 825px) { #shoping-cart table td { padding:5px; } #shoping-cart .cart-item { font-size:12px; } #shoping-cart .zirk-info-btn { top:5px; right:5px; } #shoping-cart .zirk-info-btn img { width:36px; } #shoping-cart .product-delete img { width:16px; } #shoping-cart input.input-aantal { width: 10%; font-size: 12px; padding:3px; } #shoping-cart input.input-lengte { width: 22%; font-size: 12px; padding:3px; } #shoping-cart input.input-breedte { width: 22%; font-size: 12px; padding:3px; } #shoping-cart .request-delete img { width:16px; } } #shoping-cart .cart-total-box { overflow:hidden; background:#a9d3ad; font-size:12px; } #shoping-cart .cart-total-box ul { list-style:none; } #shoping-cart .cart-total-box ul li { padding:5px; } #shoping-cart .cart-total-box ul li.left { float:left; clear:both; } #shoping-cart .cart-total-box ul li.right { float:right; text-align:right; } #shoping-cart .cart-total-box ul li.underline { border-bottom: 1px solid #000; min-width: 20%; } #shoping-cart .button-box { overflow:hidden; background:#a9d3ad; font-size:12px; margin-bottom: 15px; } #shoping-cart .button-box ul { list-style:none; padding:0; margin:0; } #shoping-cart .button-box ul li { padding:10px 5px; background:#fff; width:calc(48% - 10px); margin:0; } #shoping-cart .button-box ul li img { width:12px; } #shoping-cart .button-box ul li.previous { float:left; } #shoping-cart .button-box ul li.next { float:right; text-align:right; } @media only screen and (min-width: 520px) { #shoping-cart .button-box { font-size:14px; } #shoping-cart .button-box ul li { width: 40%; } #shoping-cart .button-box ul li img { width:14px; } } @media only screen and (min-width: 770px) { #shoping-cart .button-box { font-size:15px; } #shoping-cart .button-box ul li { width: 35%; } #shoping-cart .button-box ul li img { width:15px; } } @media only screen and (min-width: 790px) { #shoping-cart .button-box { font-size:16px; } #shoping-cart .button-box ul li { width: 35%; } #shoping-cart .button-box ul li img { width:16px; } } #shoping-cart .zirk-question-pointer{ cursor: pointer; margin:0; padding:0; } #popup-wrapper { width:255px; background:#7e7cbb; color:#fff; border:1px solid #000000; padding:15px; cursor:pointer; font-size:12px; } #popup-wrapper { -webkit-box-shadow: 5px 5px 0 5px #000000; box-shadow: 3px 3px 3px 0 #292929; } #popup-wrapper { -webkit-border-radius: 5px; border-radius: 5px; } #popup-wrapper { display: none; } #popup-wrapper .zirk-info-popup { cursor:pointer; } #popup-wrapper .zirk-info-popup { background:#7e7cbb; color:#fff; border:1px solid #000000; padding:15px; } #popup-wrapper .zirk-info-popup { -webkit-box-shadow: 5px 5px 0 5px #000000; box-shadow: 3px 3px 3px 0 #292929; } #popup-wrapper .zirk-info-popup { -webkit-border-radius: 5px; border-radius: 5px; } /* ------------------------------------------- order page ------------------------------------------------ */ #order-page { overflow:hidden; font-size:14px; line-height:20px; color: #333; } #order-page .order-block { overflow:hidden; padding: 10px; background: #ebebeb; margin-bottom: 10px; } #order-page .order-block h2 { margin-top:0; } #order-page .order-block ul { list-style:none; margin:0; padding:0; overflow:hidden; } #order-page .order-block ul li { margin:0; padding:0; overflow:hidden; clear:both; } #order-page .order-block ul li span.cart-item-name { display:block; width:70%; float:left; } #order-page .order-block ul li span.cart-item-price { display:block; width:20%; float:right; text-align:right; } #order-page .order-block ul.bg-pastel-green { background: #a9d3ad; } #order-page .order-block ul li.cart-item { border-bottom: #000 solid 1px; padding: 5px 0; } #order-page .order-block ul li.cart-total { padding: 5px 0 0 0; } #order-page .order-block ul li.cart-ship { padding: 5px 0; } #order-page .order-block ul li.cart-final { border-top: #000 solid 1px; padding: 5px 0; } #order-page .order-block ul.btn-wrap { overflow:visible; } #order-page .order-block ul.btn-wrap li { overflow:visible; } #order-page .cart-contents { margin-top:10px; } #order-page .payway-block { width:calc(50% - 25px); float:left; margin-right:5px; } #order-page .shiping-block { width:calc(50% - 25px); float:right; margin-left:5px; } #order-page .invoice-block { height:200px; clear:both; width:calc(50% - 25px); float:left; margin-right:5px; } #order-page .adress-block { height:200px; width:calc(50% - 25px); float:right; margin-left:5px; } #order-page .invoice-block ul { margin-top:15px; } #order-page .invoice-block ul li span { display:inline-block; width: 70px; } #order-page .adress-block h3 { margin-bottom:5px; } #order-page .adress-block ul { margin-top:10px; } #order-page .adress-block ul li span { display:inline-block; width: 70px; } /* ------------------------------------------- Register page ---------------------------------------------------- */ #all4u-reg-form ul { padding:0; list-style:none; font-size:10px; } #all4u-reg-form ul li { margin:0 0 15px 0; background:#ebebeb; } #all4u-reg-form fieldset { overflow:hidden; padding:5px; } #all4u-reg-form legend { overflow:hidden; margin:5px 0 15px 0; font-size: 16px; font-weight:bold; color:#333; } #all4u-reg-form label { width:30%; display:block; float:left; clear:both; } #all4u-reg-form input[type=text] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #all4u-reg-form input[type=password] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #all4u-reg-form select { width:65%; display:block; float:right; margin-bottom:5px; } #all4u-reg-form img { margin-left:5%; } #all4u-reg-form .btn-wrap { background:none; margin-left: auto; margin-right:auto; } #all4u-reg-form .static-input { display:block; float:right; width:65%; } @media only screen and (min-width: 520px) { #all4u-reg-form ul { font-size:12px; } #all4u-reg-form legend { font-size: 18px; } } @media only screen and (min-width: 770px) { #all4u-reg-form ul { font-size:14px; } #all4u-reg-form legend { font-size: 19.5px; } } @media only screen and (min-width: 990px) { #all4u-reg-form ul { font-size:16px; } #all4u-reg-form legend { font-size: 21px; } } /* ------------------------------------------- Login page ---------------------------------------------------- */ #login-page ul { padding:0; list-style:none; font-size:10px; } #login-page ul li { margin:0 0 15px 0; } #login-page p { overflow:auto; } #login-page label { width:30%; display:block; float:left; } #login-page input[type=text] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #login-page input[type=password] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #login-page .btn-wrap { overflow:visible; margin-bottom:25px; } #login-welcome-text { margin-bottom:25px; } @media only screen and (min-width: 520px) { #login-page p { font-size:12px; } } @media only screen and (min-width: 770px) { #login-page p { font-size:14px; } } @media only screen and (min-width: 990px) { #login-page p { font-size:16px; } } #login-page ul.fancy-btn-wrap { text-align:center; margin:0; padding:0; list-style:none; line-height:normal; text-shadow: 1px 1px 3px #000; } #login-page ul.fancy-btn-wrap li { display:inline-block; margin: 3px; padding:0; width:135px; } #login-page ul.fancy-btn-wrap li a.button-fancy-square { display:block; width:calc(135px - 50px); } #login-page ul.fancy-btn-wrap li a.button-fancy-square { color:#fff; font-size:13px; font-weight:700; padding: 53px 25px 52px 25px;} #login-page ul.fancy-btn-wrap li a.button-fancy-square:active, #login-page ul.fancy-btn-wrap li a.button-fancy-square:hover { text-decoration:none; } #login-page ul.fancy-btn-wrap li a.pass-lost { background: url(../../plugins/zirk-webshop-plugin/images/btn-lost-password-st.png)no-repeat; background-size:100%; } #login-page ul.fancy-btn-wrap li a.pass-lost:active, #login-page ul.fancy-btn-wrap li a.pass-lost:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-lost-password-mo.png)no-repeat; background-size:100%; } #login-page ul.fancy-btn-wrap li a.register { background: url(../../plugins/zirk-webshop-plugin/images/btn-register-st.png)no-repeat; background-size:100%; } #login-page ul.fancy-btn-wrap li a.register:active, #login-page ul.fancy-btn-wrap li a.register:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-register-mo.png)no-repeat; background-size:100%; } @media only screen and (min-width: 370px) { #login-page ul.fancy-btn-wrap li { width:160px; } #login-page ul.fancy-btn-wrap li a.button-fancy-square { width:calc(160px - 50px); font-size:16px; padding: 62px 25px 62px 25px; } } /* ------------------------------------------- Bedankt page ---------------------------------------------------- */ #bedankt { margin-bottom:25px; } #bedankt ul.btn-wrap { text-align:center; margin:0; padding:0; list-style:none; line-height:normal; text-shadow: 1px 1px 3px #000; } #bedankt ul.btn-wrap li { display:inline-block; margin: 3px; padding:0; width:160px; } #bedankt ul.btn-wrap li a.button-fancy-square { display:block; width:calc(160px - 50px); } #bedankt ul.btn-wrap li a.button-fancy-square { color:#fff; font-size:16px; font-weight:700; padding: 62px 25px 62px 25px;} #bedankt ul.btn-wrap li a.button-fancy-square:active, #bedankt ul.btn-wrap li a.button-fancy-square:hover { text-decoration:none; } #bedankt ul.btn-wrap li a.button-fancy-square { background: url(../../plugins/zirk-webshop-plugin/images/btn-dont-register-st.png)no-repeat; background-size:100%; } #bedankt ul.btn-wrap li a.button-fancy-square:active, #bedankt ul.btn-wrap li a.button-fancy-square:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-dont-register-mo.png)no-repeat; background-size:100%; } /* ------------------------------------------- Account page ------------------------------------------------ */ #account-tab ul { overflow:hidden; display:block; padding: 0 0 0 15px; list-style:none; font-size:10px; } #account-tab ul li { overflow:hidden; display:block; float:left; margin: 5px 3px 0 0; } #account-tab ul li a { display:block; padding:5px; border: 1px solid #000; background:#ebebeb; -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;} #account-tab ul li a:hover { background:#fff; border-bottom:1px solid #000; } #account-tab ul li a.active-tab { background:#fff; border-bottom:1px solid #000; } @media only screen and (min-width: 520px) { #account-tab ul { border-bottom:1px solid #000 ; } #account-tab ul li { margin-bottom: -1px; } #account-tab ul li a:hover { background:#fff; border-bottom:1px solid #fff; } #account-tab ul li a.active-tab { background:#fff; border-bottom:1px solid #fff; } } @media only screen and (min-width: 545px) { #account-tab ul { font-size: 9px; } } @media only screen and (min-width: 600px) { #account-tab ul { font-size: 10px; } } @media only screen and (min-width: 770px) { #account-tab ul { font-size: 9.5px; } } @media only screen and (min-width: 800px) { #account-tab ul { font-size: 10px; } } @media only screen and (min-width: 880px) { #account-tab ul { font-size: 11px; } } @media only screen and (min-width: 990px) { #account-tab ul { font-size: 12px; } } #account-wrapper { font-size:14px; padding:5px; overflow:auto; margin-bottom:25px; } #account-wrapper .col-1-wrapper { width:100%; float:none; } #account-wrapper .col-2-wrapper { width:100%; float:none; } #account-wrapper h3 { margin:15px 0 0 0; } #account-wrapper ul { list-style:none; margin:10px 0 0 0; padding:0; overflow:hidden; } #account-wrapper ul li { margin:0; padding:0; overflow:hidden; } #account-wrapper ul li p { font-weight:bold; } #account-wrapper ul li span { width:40%; display:inline-block; } #account-wrapper ul li a span { width:auto; } #account-wrapper ul li a img { width: 18px; margin: 0 5px 0 0; } #account-wrapper ul li span.req { width:auto; } #account-wrapper ul li.tel { border-top: 1px solid #777; border-bottom: 1px solid #777; margin-bottom:5px; margin-right:15px; } #account-wrapper label { width:35%; display:block; float:left; clear:both; } #account-wrapper input[type=text] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #account-wrapper input[type=password] { width:calc(65% - 8px); display:block; float:right; margin-bottom:5px; } #account-wrapper select { width:60%; display:block; float:right; margin-bottom:5px; } #account-wrapper .static-input { display:block; float:right; width:65%; font-weight:normal; } #account-wrapper .btn-wrap { width: 35%; padding: 0 5px 5px 0; margin:10px 0; } #account-wrapper .history-table { width:100%; } #account-wrapper .history-table th { text-align: left; border-bottom:1px solid #333; } #account-wrapper .history-table td { border-bottom:1px solid #333; padding: 3px 0; } #account-wrapper .history-table input[type=submit].submit-link { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; outline:none; width:calc(100% - 10px); display:block; overflow:hidden; text-align:center; text-decoration: underline; padding: 0 5px; color: #1a0dab; font-size: 12px; box-shadow: none; background: none; /* Old browsers */ } @media only screen and (min-width: 520px) { #account-wrapper .col-1-wrapper { width:50%; float:left; } #account-wrapper .col-2-wrapper { width:50%; float:right; } #account-wrapper ul li span { width:30%; } } @media only screen and (min-width: 600px) { #account-wrapper ul li span { width:40%; } } @media only screen and (min-width: 770px) { #account-wrapper ul li span { width:30%; } } @media only screen and (min-width: 990px) { #account-wrapper ul li span { width:40%; } } /* ------------------------------------------- prompt: Not logged --------------------------------------------- */ #prompt-not-logged { margin-bottom:25px; } #prompt-not-logged ul.btn-wrap { text-align:center; margin:0; padding:0; list-style:none; line-height:normal; text-shadow: 1px 1px 3px #000; } #prompt-not-logged ul.btn-wrap li { display:inline-block; margin: 3px; padding:0; width:135px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { display:block; width:calc(135px - 50px); } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { color:#fff; font-size:13px; font-weight:700; padding: 53px 25px 52px 25px;} #prompt-not-logged ul.btn-wrap li a.button-fancy-square:active, #prompt-not-logged ul.btn-wrap li a.button-fancy-square:hover { text-decoration:none; } #prompt-not-logged ul.btn-wrap li a.login { background: url(../../plugins/zirk-webshop-plugin/images/btn-login-st.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.login:active, #prompt-not-logged ul.btn-wrap li a.login:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-login-mo.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.pass-lost { background: url(../../plugins/zirk-webshop-plugin/images/btn-lost-password-st.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.pass-lost:active, #prompt-not-logged ul.btn-wrap li a.pass-lost:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-lost-password-mo.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.register { background: url(../../plugins/zirk-webshop-plugin/images/btn-register-st.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.register:active, #prompt-not-logged ul.btn-wrap li a.register:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-register-mo.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.dont-register { background: url(../../plugins/zirk-webshop-plugin/images/btn-dont-register-st.png)no-repeat; background-size:100%; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(135px - 30px); padding: 53px 15px 52px 15px; } #prompt-not-logged ul.btn-wrap li a.dont-register:active, #prompt-not-logged ul.btn-wrap li a.dont-register:hover { background: url(../../plugins/zirk-webshop-plugin/images/btn-dont-register-mo.png)no-repeat; background-size:100%; } #img-preloader { position:absolute; z-index:0; } #img-preloader .login { background: url(../../plugins/zirk-webshop-plugin/images/btn-login-mo.png)no-repeat; } #img-preloader .pwlost { background: url(../../plugins/zirk-webshop-plugin/images/btn-lost-password-mo.png) no-repeat; } #img-preloader .register { background: url(../../plugins/zirk-webshop-plugin/images/btn-register-mo.png) no-repeat; } #img-preloader .noregister { background: url(../../plugins/zirk-webshop-plugin/images/btn-dont-register-mo.png) no-repeat; } @media only screen and (min-width: 450px) { #prompt-not-logged ul.btn-wrap { margin: 0 25px; } } @media only screen and (min-width: 480px) { #prompt-not-logged ul.btn-wrap { margin: 0; } #prompt-not-logged ul.btn-wrap li { width:110px; margin:0; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(110px - 36px); font-size:11px; padding: 43px 18px 43px 18px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(110px - 20px); padding: 43px 10px 43px 10px; } } @media only screen and (min-width: 540px) { #prompt-not-logged ul.btn-wrap li { width:125px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(125px - 50px); font-size:12px; padding: 48px 25px 49px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(125px - 20px); padding: 48px 10px 49px 10px; } } @media only screen and (min-width: 610px) { #prompt-not-logged ul.btn-wrap li { width:140px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(140px - 50px); font-size:13px; padding: 54px 25px 56px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(140px - 30px); padding: 54px 15px 56px 15px; } } @media only screen and (min-width: 650px) { #prompt-not-logged ul.btn-wrap li { width:150px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(150px - 50px); font-size:15px; padding: 57px 25px 59px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(150px - 30px); padding: 57px 15px 59px 15px; } } @media only screen and (min-width: 770px) { #prompt-not-logged ul.btn-wrap { margin: 0; } #prompt-not-logged ul.btn-wrap li { width:110px; margin:0; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(110px - 36px); font-size:11px; padding: 43px 18px 43px 18px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(110px - 20px); padding: 43px 10px 43px 10px; } } @media only screen and (min-width: 840px) { #prompt-not-logged ul.btn-wrap li { width:125px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(125px - 50px); font-size:12px; padding: 48px 25px 49px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(125px - 20px); padding: 48px 10px 49px 10px; } } @media only screen and (min-width: 900px) { #prompt-not-logged ul.btn-wrap li { width:140px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(140px - 50px); font-size:14px; padding: 53px 25px 55px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(140px - 20px); padding: 53px 10px 55px 10px; } } @media only screen and (min-width: 940px) { #prompt-not-logged ul.btn-wrap li { width:150px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(150px - 50px); font-size:15px; padding: 57px 25px 59px 25px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(150px - 30px); padding: 57px 15px 59px 15px; } } @media only screen and (min-width: 990px) { #prompt-not-logged ul.btn-wrap li { width:160px; margin:0 5px 0 5px; } #prompt-not-logged ul.btn-wrap li a.button-fancy-square { width:calc(160px - 60px); font-size:15.5px; padding: 62px 30px 62px 30px; } #prompt-not-logged ul.btn-wrap li a.dont-register { width:calc(160px - 30px); padding: 62px 15px 62px 15px; } } /*----------------------------------------------------- ZIRK ZETWERK -----------------------------------------------------------------------------*/ #zirk-zetcalc .quest{ background: url(../../plugins/zirk-webshop-plugin/images/icon-quest-32px.png) no-repeat top left; background-size: 24px 24px; } #zirk-zetcalc .quest{ display: inline-block; width:24px; height:24px; margin-right: 5px; vertical-align:bottom; cursor:pointer; } #zirk-zetcalc .zirk-styled-selector {position:relative; } #zirk-zetcalc .zirk-styled-selector span { background: url(../../plugins/zirk-webshop-plugin/images/icon-arrow-down.png) no-repeat top left; background-size: 24px 24px; } #zirk-zetcalc .zirk-styled-selector span { position:absolute; display:block; width:24px; height:24px; top:0; right:0; } /* ------------------------------------------- Thickbox ---------------------------------------------------- */ .TB_button { cursor: pointer; } #TB_background { position:absolute; width:100%; height:100%; z-index:100; background: rgba(0, 0, 0, 0.75); top:0px; left:0px; display:none;} #TB_window { width:90%; } #TB_window { position:absolute; display:none; background:#fff; z-index:101; border: 1px solid #000068; } #TB_window { -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 3px 3px 3px 0px #333; box-shadow: 3px 3px 3px 0px #333; } #TB_inner { position:relative; background: #ebebeb; margin:1px; -webkit-border-radius: 2px; border-radius: 2px; overflow:hidden; } #TB_top { background: #000068; height:20px; -webkit-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;} #TB_top .TB_btn_close_sq { border:0; margin: 3px 8px 0px 0px; padding:0; float:right; cursor: pointer; width:15px; height:15px; background:url(../../plugins/zirk-webshop-plugin/images/tb-btn-close-sq.png) no-repeat; } #TB_content { padding:10px; overflow:hidden; } #TB_bot { background: #000068; height:20px; -webkit-border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px;} #TB_content ul { list-style:none; } #TB_content ul li { font-size:12px; line-height:18px; clear:both; } #TB_content p img { width:100%; } #TB_content ul li .col-1 { width:35%; float:left; } #TB_content ul li .col-2 { width:65%; float:left;} @media only screen and (min-width: 550px) { #TB_content ul li { font-size:13px; line-height:19px; } #TB_content ul li .col-1 { width:30%; } #TB_content ul li .col-2 { width:70%; } } @media only screen and (min-width: 770px) { #TB_content ul li { font-size:14px; line-height:20px; } #TB_content ul li .col-1 { width:25%; } #TB_content ul li .col-2 { width:75%; } }