@font-face { font-family: 'Nimbus'; src: url('../font/nimbus.eot'); src: url('../font/nimbus.eot?#iefix') format('embedded-opentype'), url('../font/nimbus.woff') format('woff'), url('../font/nimbus.ttf') format('truetype'), url('../font/nimbus.svg#wf') format('svg'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+000-5FF; } @font-face { font-family: 'RobotoCondensedR'; src: url('../font/roboto/robotocondensed-regular-webfont.eot'); src: url('../font/roboto/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/roboto/robotocondensed-regular-webfont.woff') format('woff'), url('../font/roboto/robotocondensed-regular-webfont.ttf') format('truetype'), url('../font/roboto/robotocondensed-regular-webfont.svg#learning_curve_proregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+000-5FF; } @font-face { font-family: 'RobotoLight'; src: url('../font/roboto/roboto-light-webfont.eot'); src: url('../font/roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'), url('../font/roboto/roboto-light-webfont.woff') format('woff'), url('../font/roboto/roboto-light-webfont.ttf') format('truetype'), url('../font/roboto/roboto-light-webfont.svg#learning_curve_proregular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+000-5FF; } #disqus_thread { color: #5a5a5a; } #disqus_thread a { color: #292929; } * { margin:0; padding:0; } html, body, h1, h2, h3, h4, h5, h6, form, select, input, textarea, p, ul, li, option { padding:0; margin:0; font-weight:normal; font-size:14px; font-family:Arial, sans-serif; } 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, font, 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 { margin:0; padding:0; border:0; outline:0; background:transparent; font-size:14px; font-family: Arial, sans-serif; } input, textarea { font-family:Arial, sans-serif; } input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; } html { overflow: -moz-scrollbars-vertical; overflow-y: scroll;} body { overflow-x:hidden; } /* Reset lists */ ol, ul, li { list-style:none; } blockquote, q { quotes:none; } /* remember to define focus styles! */ :focus{ outline:0; } ins { text-decoration:none } del { text-decoration:line-through } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:collapse; border-spacing:0 } /* Reset anchors & remove dashed borders */ a, a:hover, a:active, a:focus, img, img:active, img:focus, div:focus, div:active, input:active, input:focus { outline:0; text-decoration:none; } input[type="text"], input[type="password"], textarea, select { outline:none; } input::-moz-focus-inner { border:0; padding:0} input.checkbox, input.radio{width:14px; height:14px; padding:0px; margin:0px; outline:none} img { border:none } /* Chrome fix */ textarea { resize:none } /* HTML 5 */ header, nav, section, article, aside, footer { display:block; } /* Crossbrowser float clear */ .fix { position:relative; display:inline-block; zoom:1; display:block; } .fix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0px; font-size:0px; } /* Anowave styles */ body { background:#f8f8f8; } /* HTML5 Support */ article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } .template { position:relative; background:#f8f8f8; z-index:1; margin:0px auto; padding-top:130px; } #canvas { position:absolute; top:0px; left:0px; z-index:9999; } a.logo { position:absolute; top:50%; margin:-26px 0px 0px 0px; left:0px; display:block; width:200px; height:50px; text-align:left; z-index:9999; } [data-mobile] { position:relative; display:none; background: rgba(77, 77, 77, 0.95); } [data-mobile] nav, [data-mobile] nav > ul, [data-mobile] nav > ul > li, [data-mobile] nav > ul > li > a { display:block; font-family:Nimbus, Arial, sans-serif; } [data-mobile] nav > ul > li > a { padding:10px; color:#fff; padding-left:20px; } [data-mobile] nav > ul > li > a:hover { color:#fff; } [data-mobile] nav > ul > li:first-child > a { border-top:none; } [data-mobile] nav > ul > li:last-child > a { border-bottom:none; } [data-mobile] nav { height:auto; } [data-mobile] nav ul li ul h2 { font-size:14px; } [data-mobile] nav { padding-top:10px; padding-bottom:10px; } [data-mobile] nav.nav ul ul { position:relative; padding:0px; z-index:9999; width:100%; background:none; display:none; } [data-mobile] nav.nav ul ul > li { position:relative; width:100%; padding:10px; } [data-mobile] nav.nav ul ul > li > div { position:relative; } [data-mobile] nav.nav ul ul > li > div > div { float:left; margin-right:20px; max-width:200px; } [data-mobile] nav.nav ul ul > li > div > div > h2 { font-family:Nimbus, Arial, sans-serif; color:#a7a7a7; font-size:14px; text-shadow:none; text-transform:uppercase; margin:20px 0px 10px 0px; text-shadow:#f5f5f5 1px 1px; } [data-mobile] nav.nav ul ul > li > div > div > a { display:block; padding:0px; margin:10px 0px 10px 0px; color:#000; font-family:Arial, sans-serif; font-size:14px; text-transform:none; } [data-mobile] nav.nav ul ul > li > div > div > p { display:block; margin:10px 0px 10px 0px; color:#7f7f7f; line-height:16px; min-height:50px; text-shadow:#f5f5f5 1px 1px; } header { position:fixed; top:50px; left:0px; width:100%; display:flex; justify-content: center; background:url(../images/header.png); z-index:9999; } header > div:first-child { margin:0px 20px 0px 20px; } header > div:first-child + div { position:absolute; bottom:-7px; height:7px; font-size:0px; line-height:0px; width:100%; background:url(../images/shadow.png) 0 0 repeat-x; display:none; } /* Nav */ header nav.nav { position:relative; } header nav.nav ul { display:block; padding-left:200px; } header nav.nav > ul, header nav.nav > ul > li { display:block; } header nav.nav > ul > li, header nav.nav > ul > li > a { display:block; float:left; transition: all 0.1s ease;} header nav.nav > ul > li > a { padding:0px 10px 0px 10px; height:80px; line-height:80px; font-family:RobotoCondensedR, Arial, sans-serif; color:#292929; font-size:16px; text-transform:uppercase; } header nav.nav > ul > li > a:hover { background: rgba(222, 222, 222, 0.95); } header nav.nav > ul > li.active, header nav.nav > ul > li.active:hover { background:#fb8800; } header nav.nav > ul > li.active > a, header nav.nav > ul > li.active > a:hover { background:#fb8800; color:#fff; text-shadow:#e97e00 -1px -1px } header nav.nav > ul > li.parent > a { background:url(../images/arrow.svg) 100% 55% no-repeat; padding-right:30px; } header nav.nav > ul > li.active.parent > a { background:url(../images/arrow.light.svg) 100% 55% no-repeat; } header nav.nav > ul > li.parent > a:hover, header nav.nav > ul > li.parent:hover > a { background:rgba(222, 222, 222, 0.95) url(../images/arrow.light.svg) 100% 55% no-repeat; } header nav.nav > ul > li.active.parent:hover > a { background:#fb8800 url(../images/arrow.light.svg) 100% 55% no-repeat; } header nav.nav > ul > li.awi > a { background:url(../images/buddy.svg) 10px 50% no-repeat; background-size: 32px 32px; padding-left:45px; } header nav.nav > ul > li.awi > a:hover {background: #fb8800 url(../images/buddy.svg) 10px 50% no-repeat; background-size: 32px 32px; } header nav.nav ul ul { position:fixed; padding:0px; top:130px; transition: all .2s; z-index:9999; left:0px; width:100%; height:0px; background: rgba(222, 222, 222, 0.95); overflow:hidden; transition: all 0.1s ease; } header nav.nav ul ul > li { position:absolute; bottom:30px; left:75px; width:100%; } header nav.nav ul ul > li > div { position:absolute; bottom:0px; } header nav.nav ul ul > li > div > div { float:left; margin-right:20px; min-width:200px; } header nav.nav ul ul > li > div > div + div { padding-left:30px; } header nav.nav ul ul > li > div > div > h2 { font-family:Nimbus, Arial, sans-serif; color:#a7a7a7; font-size:14px; text-shadow:none; text-transform:uppercase; margin:20px 0px 10px 0px; text-shadow:#efefef 1px 1px; } header nav.nav ul ul > li > div > div > img { width:100%; max-width:200px; } header nav.nav ul ul > li > div > div > a { display:block; padding:5px 0px 5px 0px; margin:5x 0px 5px 0px; color:#000; font-family:Arial, sans-serif; font-size:14px; text-transform:none; } header nav.nav ul ul > li > div > div > a.new { padding:5px 0px 5px 30px; margin-left:-30px; } header nav.nav ul ul > li > div > div > a.new.ai { background: url('../images/store/aistars.svg') 0 0 no-repeat; } header nav.nav ul ul > li > div > div > p { display:block; margin:10px 0px 10px 0px; color:#7f7f7f; line-height:16px; min-height:50px; text-shadow:#e3e3e3 1px 1px; } header nav.nav ul ul > li > div > div .social { float:left; } header nav.cart { display:block; float:right; margin-right:20px; } header nav.cart ul, header nav.cart ul li, header nav.cart ul li a { float:left; height:32px; line-height:32px; } header nav.cart ul li a { height:80px; line-height:75px; padding:0px 10px 0px 10px; font-family:Arial, sans-serif; color:#000; font-size:12px; } header nav.cart ul li a:hover { text-decoration:underline; } header nav.cart ul li a.cart { background:url(../images/icons/cart.png) center right no-repeat; padding-right:30px; } header nav.nav ul > li > a { transition: all .2s; } header nav.nav.shrink ul > li > a { height:60px; line-height: 60px; } header nav.nav.shrink ul ul { top:110px; } .search { position: relative; margin:0px auto; text-align: center;} #searchbox { position:fixed; top:0px; width:100%; display: flex; height:50px; background: rgb(248, 248, 248,0.9); z-index:10000; } .search #hits { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); width: 75%; z-index: 999; z-index: 10000; border-radius:10px; box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } .ais-SearchBox { width:100%; } .ais-SearchBox::after { content: "";clear: both;display: table; } .ais-SearchBox-reset, .ais-SearchBox-submit { display:none; } .ais-SearchBox-input { width:100%; max-width: 600px; margin:0px auto; border:none; border-bottom:4px solid #fb8800; } .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon { width:18px; height:18px; padding:8px; } .ais-SearchBox-input { display: block; padding:15px; min-width: 300px; box-sizing: border-box; background:url(../images/store/ai.svg) 95% 50% no-repeat; background-size: 32px 32px;} .ais-SearchBox-input::placeholder { color:rgba(0,0,0,0.6); } .ais-SearchBox-input:hover, .ais-SearchBox-input:focus { outline: 0;} .ais-Hits { padding:20px; border-top:4px solid #fb8800; border-radius:10px; background: rgba(221, 221, 221, 0.95); } .ais-Hits.ais-Hits-noResults { padding:50px; font-size:18px; } .ais-entity { display: block; } .ais-entity > a { display: flex; text-decoration: none; color:rgba(0,0,0,1); text-align: left; border-radius: 4px; } .ais-entity > a div { flex: 1 } .ais-entity > a div:first-child { flex: 0 0 100px; padding:0px 10px 0px 10px; } .ais-entity > a div:first-child img { width:100%; } .ais-entity > a div:first-child + div { padding:10px; line-height: 22px; } .ais-entity > a:hover { background: rgba(255,255,255,0.5); } .ais-Highlight-highlighted { background:none; text-decoration: underline;} .ais-Snippet-highlighted { background: none;} .quicks-menu small { display: block; margin:10px 0px 20px 0px; color:#656565; } a.button, input[type="submit"] { display: inline-flex;align-items: center;justify-content: center;padding:15px 20px 15px 20px;font-family: Nimbus, sans-serif;font-size: 16px;position: relative;border: none;cursor: pointer;color: #ffffff;background: linear-gradient(to bottom, #303030, #131313);border-radius: 4px;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);text-shadow: -1px -1px 0px rgba(0,0,0,0.2); z-index: 1; transition: box-shadow 200ms ease, transform 200ms ease; margin-top:5px; } a.button:hover, input[type="submit"]:hover { background: linear-gradient(to bottom, #ffa331, #fb8800); transform-origin: center; transition: transform 180ms ease; } a.button::before, input[type="submit"]::before {content: "";position: absolute;inset: 0;background: radial-gradient( circle at top left,rgba(255, 255, 255, 0.25),transparent 60%);-webkit-mask-image: radial-gradient( circle at 60px 90px, transparent 0 90px,black 20px);mask-image: radial-gradient( circle at 60px 90px, transparent 0 90px, black 20px);pointer-events: none; z-index: 2; } a.button.button-cart { position:relative; background-image: url('../images/button-cart.svg'), linear-gradient(to bottom, #303030, #131313);background-repeat: no-repeat;background-position: 15px center, center;background-size: 18px 18px, auto;padding-left:45px; margin:5px 5px 0px 0px; } a.button.button-cart:hover { background-image: url('../images/button-cart.svg'), linear-gradient(to bottom, #ffa331, #fb8800); } a.button.button-cart-loading, a.button.button-cart-loading:hover { background-image: none, linear-gradient(to bottom, #303030, #131313); } a.button.button-cart-loading::before {content: "";position: absolute;left: 13px;top: 13px;width: 18px;height: 18px;border: 2px solid rgba(255,255,255,0.3);border-top-color: #fff;border-radius: 50%;animation: spin 1s linear infinite;pointer-events: none;} a.button.button-center { display: flex; width: fit-content; margin-left: auto;margin-right: auto;} a.button.button-demo { float:none; position:absolute; top:0px; right:0px; } a.button.button-shopify { background-image: url('../images/button-shopify.svg'), linear-gradient(to bottom, #95BF47, #9cbe5c);background-repeat: no-repeat;background-position: 15px center, center;background-size: 18px 18px, auto;padding-left:45px; margin:5px 5px 0px 0px; } a.button.button-shopify:hover { background-image: url('../images/button-shopify.svg'), linear-gradient(to bottom, #ffa331, #fb8800); } a.button span, a.button span span { color:#fff; font-family: Nimbus, sans-serif; font-size: 16px; } a.button + a.button { margin-right:5px; } div.button { margin:0px auto; margin-top:50px; } a.cta { display:block; float:left; height:32px; line-height:32px; color:#000; margin:12px 0px 0px 10px; padding:0px 0px 0px 26px; color:#676767; background:url(../images/arrow.png) 0 0 no-repeat; } a.cart { display:none; } /* Forms */ .form .group { position:relative; zoom:1; display:block; margin-bottom:10px; } .form .group:after { content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0px; font-size:0px; } .form .group label { display:block; float:left; width:200px; text-align:right; padding:12px 10px 5px 0px; } .form .group label span { color:#c70000; } .form .group select { display:block; float:left; width:200px; margin-top:5px; padding:2px; } .form .group select option { padding:2px; } .form .group input[type="text"] { display:block; float:left; width:330px; padding:15px; border:1px solid #b1b1b1; font-size:13px; border-radius: 4px; box-sizing: border-box; } .form .group input[type="text"]:focus { -moz-box-shadow: 0px 0px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 0px 0px 4px #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc'); } .form .group input[type="password"] { display:block; float:left; width:330px; padding:15px; border:1px solid #b1b1b1; font-size:13px; border-radius: 4px; box-sizing: border-box; } .form .group input[type="password"]:focus { -moz-box-shadow: 0px 0px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 0px 0px 4px #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc'); } .form .group input[type="text"][data-postcode="true"] { width:100px; } .form .group textarea { display:block; float:left; overflow:auto; width:330px; min-height: 400px; padding:20px; border:1px solid #b1b1b1; font-size:14px; box-sizing: border-box; border-radius: 4px; } .form .group textarea[name="conversation_content"][data-helpdesk-content] { width:100%; padding:20px; max-width:100%; min-height:300px; font-size:14px; box-sizing: border-box; } .form .group input[type="text"].vat { background:#ffffd9; } .form .group input[type="text"][data-helpdesk-subject] { width:98%; padding:1%; } .form .group input[type="checkbox"] { margin:5px; margin-left:0px; cursor:pointer; width: 24px; height: 24px; border-radius: 9px; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgPHBhdGggZD0iTSAzIDEyIEwgMTAgMTcgTCAxOSA2IiBzdHJva2U9InJnYigyMjgsIDIyOCwgMjI4KSIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJ0cmFuc3BhcmVudCIgIC8+Cjwvc3ZnPg==') center center no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; position: relative; } .form .group input[type="checkbox"]:checked { background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0gMyAxMiBMIDEwIDE3IEwgMTkgNiIgc3Ryb2tlPSJyZ2IoMTAwLCAxODUsIDI1NSkiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0idHJhbnNwYXJlbnQiICAvPgo8L3N2Zz4=') center center no-repeat; } .form .group h2, .form .group p { display:block; margin-left:210px; } .form .group p { line-height:16px; font-size:14px; line-height: 18px; margin:10px 0px 10px 210px; color:#595959; } .form .group-options { float:left; width:420px; margin-top:3px; } .form .group-options label { position:relative; cursor:pointer; width:400px; float:none; clear:both; text-align:left; padding:2px 0px 2px 20px; } .form .group-options label input { display:block; position:absolute; top:4px; left:0px; } .form .group-separator { font-weight:bold; margin:20px 0px 20px 210px; color:#8e8e8e; text-shadow:#fff 1px 1px; } [data-enquiry-form] { padding:40px; margin-top:40px; border-radius: 4px; } [data-enquiry-form] .form .group input[type="text"], [data-enquiry-form] .form .group textarea { width:100%; max-width:800px; } .ticket .form .group input[type="checkbox"] { position:absolute; top:0px; left:0px; margin:0px; } .ticket .form .group-options label { padding-left:30px; } .cart-dialog .form .group label { text-align:left; } .cart-dialog .form .group input[type="text"] { width:375px; } /* Responsive tables */ .table { display:table; width:100%; } .table > div { display:table-row; } .table > div > div { display:table-cell; vertical-align:top; text-align:left; padding:10px; } .table > div > div.sidebar, .table > div > div.content { padding:30px; } .table > div > div.sidebar { width:350px; } .table.table2x > div > div { width:50%; } .table.table2x > div > div img { width:100%; max-width:400px; height: auto; } .table.table2x > div > div img.cycle { max-width:353px; margin:0px auto; height: auto; } .table.table2x.overview { margin-top:50px; margin-bottom:50px; } .table.table2x.overview > div > div { text-align:center; padding:50px; } .table.table2x.overview > div > div h2 { display:block; text-align:left; padding:10px 0px 10px 0px; } .table.table2x.overview > div > div p { display:block; text-align:left; line-height:26px; font-family:RobotoLight, Ariel, sans-serif; font-size:16px;} .table.table2x.overview > div > div strong { line-height:26px; font-size:16px; } .table.table2x.overview > div > div p a { line-height:26px; font-family:RobotoLight, Ariel, sans-serif; font-size:16px; color:#ff6200; } .table.table2x.overview > div > div img { margin:0px auto; } .table.overview > div > div { padding:0px; } .table.overview > div > div svg {margin-left:40px; } mark, [data-code] { display: block; padding:20px; margin:20px -20px 20px -20px; background:none; border-left:5px solid #ff6200; background: rgba(255,255,255,0.3);} mark { background: rgba(255, 213, 213, 0.3) } /* Reviews */ .table.table-reviews { margin:50px -10px 50px -10px; } .table.table-reviews > div > div > div { padding:0px 0px 10px 0px; } .table.table-reviews h2 { font-family: Nimbus, Arial, sans-serif; font-weight: 300;} .lifecycle { position:relative; } .lifecycle > div { position:absolute; top:50%; left:50%; margin:-55px 0px 0px -55px; background:url(../images/tooltip.png) center center no-repeat; width:110px; height:110px; } .lifecycle > div p { display: table-cell; vertical-align:middle; text-align:center; height:100px; width:105px; font-family:Arial, sans-serif; color:#fff; font-size:15px; text-align:center; text-shadow:#e86100 -1px -1px; line-height:14px; } .lifecycle > div p strong { font-size:20px; } /* Footer table */ .social { float:right; } .social a { display:block; float:left; width:24px; height:24px; margin:5px; } .social a:hover svg path { fill: #fb8800; } .social.social-tools { float:left; } .payments a { float:left; margin-right:10px; } a.payment { display:block; width:50px; height:50px; } a.payment.payment-visa { background-position:0px -100px; } a.payment.payment-maestro { background-position:0px 0px; } a.payment.payment-paypal { background-position:0px -150px; } a.payment.payment-mastercard { background-position:0px -50px; } .ai { position:relative; font-size:14px; padding:30px; color:rgb(203, 203, 203); z-index: 9999; } .ai a, .ai p, .ai h1, .ai h2, .ai h3, .ai textarea { display: block; font-weight: normal; font-size:16px; font-family: Nimbus, Arial, sans-serif; padding:0px; margin:0px; } .ai h1 { font-size:32px; color:rgb(0, 0, 0); } .ai textarea { display: block; border:none; height:100%; padding:20px; border-radius: 4px; margin-top:20px; width:100%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; overflow: auto; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; resize: none; background: rgb(73, 73, 73); color:rgb(183, 183, 183); } .ai textarea::placeholder { color:rgba(255,255,255,0.5); } .ai > a { display: block; cursor:pointer; width:100px; height:48px; margin:20px auto; text-align: center; margin-bottom:20px; } .ai > a svg { margin-top:10px; } .ai p { line-height: 18px; color:rgba(0,0,0,1); } .ai table td { padding:0px; margin:0px; vertical-align: middle; } .ai table td svg { margin-right: 10px; margin-top:5px; } .ai.ai-results { font-family: Nimbus, Arial, sans-serif; font-size:18px; } .ai.ai-results .ai-prompt a { display: block; text-decoration: none; color:rgb(35, 35, 35); margin-top:10px; margin-bottom:10px; font-family: Arial, sans-serif; } .ai.ai-results .ai-prompt p { line-height: 22px; color: rgb(86, 86, 86); } .ai.ai-wait { padding:50px; text-align: center; font-family: Nimbus, Arial, sans-serif; font-size:18px; color:rgba(0,0,0,1); } .ai .ai-prompt { margin-left:75px; } .ai .ai-result { margin-top:20px; background: url(../images/store/aistars.svg) 100% 0% no-repeat;} footer { background: #ececec; } .table.tablefoot > div {display: flex;align-items: flex-start;gap: 16px; /* controls spacing between all columns */} .table.tablefoot > div > div:first-child {flex: 1;} .table.tablefoot > div > div:not(:first-child):not(:last-child) {flex: 0 0 auto;} .table.tablefoot > div > div:last-child {margin-left: auto;text-align: right;} .table.tablefoot > div > div:not(:last-child) {padding:0px 30px 0px 30px;} .table.tablefoot > div > div ul li { display:block; padding:5px 0px 5px 0px; } .table.tablefoot > div > div ul li a, .table.tablefoot > div > div ul li a span { display:block; color:#4e4e4e; font-size:14px; } .table.tablefoot > div > div ul li a:hover, .table.tablefoot > div > div ul li a:hover span { display:block; color:#ec6a00; font-size:14px; } a.button.hold { display:none; } .copyright { color:#cfcfcf; text-shadow:#fff 1px 1px; font-size:11px; text-align:right; margin-top:20px; line-height:16px; } /* Typografy */ h1, h2, h3 { font-family:Nimbus, Arial, sans-serif; font-size:26px; text-shadow:0 0 1px rgba(0, 0, 0, 0.2); color:#171717; } h2 { margin:10px 0px 10px 0px; line-height:30px; } h3 { font-size:16px; } /* Carousel */ .carousel { z-index:2; min-height:100px; background:url(../images/loader/loader.gif) center top no-repeat; } .carousel ul li > img { max-width:100%; height: auto; } .paging { position:absolute; z-index:9998; display:none; } .paging > a { display:block; cursor:pointer; width:40px; height:40px; float:left; background:url(../images/dots.png) 0px -40px no-repeat; } .paging > a:hover, .paging > a.load.current, .paging > a.current { background:url(../images/dots.png) 0px 0px no-repeat; } a.spinner { position:absolute; top:50%; left:50%; margin:-35px 0px 0px -35px; display:block; width:70px; height:70px; z-index:1000; } a.spinner span { position:absolute; height:22px; width:22px; background:url(../images/loader/spinner.png) center center no-repeat; } /* Interactive paging */ [data-responsive] { position:relative; } .carousel ul li div[data-transition] { position:absolute; display:none; top:10%; font-family:Nimbus, Arial, sans-serif; } .carousel ul li:first-child div[data-transition] { font-size:60px; color:#fff; } .carousel ul li:first-child div[data-transition] + div { font-size:26px; color:#fff; top:25%; } .carousel ul li:first-child + li div[data-transition] { font-size:56px; color:#3f3f3f; text-shadow:0 0 1px rgba(255, 255, 255, 0.2);} .carousel ul li:first-child + li div[data-transition] + div { font-size:26px; color:#3f3f3f; top:25%; } .carousel ul li:first-child + li + li div[data-transition] { font-size:56px; color:#fff; } .carousel ul li:first-child + li + li div[data-transition] + div { font-size:26px; color:#fff; top:25%; } .carousel ul li:first-child + li + li + li div[data-transition] { font-size:56px; color:#fff; } .carousel ul li:first-child + li + li + li div[data-transition] + div { font-size:26px; color:#fff; top:25%; } .carousel ul li:first-child + li + li + li + li div[data-transition] { font-size:56px; color:#fff; } .carousel ul li:first-child + li + li + li + li div[data-transition] + div { font-size:26px; color:#979797; top:25%; } .carousel ul li:first-child + li + li + li + li + li div[data-transition] { font-size:56px; color:#fff; } .carousel ul li:first-child + li + li + li + li + li div[data-transition] + div { font-size:26px; color:#e8e8e8; top:25%; } .carousel ul li > span, .carousel ul li > span > span { display:block; position:absolute; width:210px; height:210px; z-index:9999; } .carousel ul li > span > span { background:url(../images/craft.line.png) center center no-repeat; } .carousel ul li > span { bottom:50%; left:100%; margin:0px 0px -105px -105px; background:url(../images/craft.png) center center no-repeat; } .carousel ul li > span > a { position:absolute; top:90px; left:55px; z-index:99999; } canvas { position:absolute; top:50%; left:50%; margin:-100px 0px 0px -100px; z-index:9000; border-radius: 100px; } canvas.chart { position:relative; top:auto; left:auto; border-radius:0; margin:0px; } .reverse { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); } .rotate { -webkit-animation-duration:6.0s; -moz-animation-duration:6.0s; -webkit-animation-iteration-count:1; -moz-animation-iteration-count:1; -webkit-animation-name: yoyo; -moz-animation-name: yoyo; -webkit-animation-timing-function:linear; -moz-animation-timing-function:linear; } @-webkit-keyframes yoyo { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(720deg);} } @-moz-keyframes yoyo { from {-moz-transform:rotate(0deg);} to {-moz-transform: rotate(720deg);} } .mask { position:absolute; bottom:0px; left:50%; margin-left:-247px; height: 62px; width:494px; background:url(../images/mask.png) 0 0 no-repeat; } .chunk { padding:10px; } .copy, .copy p, .copy p а { font-size: 14px; color:#595959; line-height:18px; } .copy p a, .copy ul li a, .copy ol li a { color:#ec6a00; font-size:14px; } .copy ul li a { font-size:14px; font-weight:normal; color:#131313; font-family:Arial, sans-serif; text-decoration:underline; } .copy ul li strong { font-size:14px; } [data-tabs] .copy table { width: 100%;} [data-tabs] .copy table tr:nth-child(even) td { background: #fff;} [data-tabs] .copy table tr:first-child td { font-weight: 700;} [data-tabs] .copy table td { font-size:14px; padding:10px; } .copy p { display:block; margin-bottom:10px; } .copy h1 { margin:0px 0px 20px 0px; font-size:32px; line-height:33px; } .copy h2 { margin-bottom:10px; } .copy ul { margin:20px 0px 20px 0px; } .copy ul, .copy ul li { display:block; } .copy ul li { padding:5px 0px 5px 26px; font-size:14px; text-shadow:0 0 1px rgba(0, 0, 0, 0.2); background:url(../images/bullet.svg) 8px 12px no-repeat; line-height:22px; margin-left:-20px; } .copy ol { margin:20px 0px 20px 0px; } .copy ol, .copy ol li { display:block; text-align:left; color:#595959; } .copy ol li { padding:5px 0px 5px 26px; font-size:14px; background:url(../images/bullet.svg) 8px 10px no-repeat; line-height:22px; margin-left:-20px; } .copy ol li a { color:#ec6a00; } .copy ol li strong { font-size:14px; } .copy ol ol { margin:0px 0px 0px 20px; } .copy ol ol li { background:none; } .copy.center { text-align:center; } .copy.copy-showcase p { font-size:14px; } .copy.policy { margin:0px auto; } .copy.policy p { line-height: 22px; } .copy.company-information { padding:0px 35px 0px 35px; } .copy.company-information span { display: block; padding:5px 0px 5px 0px; } .policy-block { padding:0px 20px 0px 40px; border-left:5px solid #000; margin:28px; } .quick-content, .quick-content .copy, .quick-content .copy p { font-size:16px; } .quick-content .copy ul { margin:20px 0px 20px 0px; } .quick-content .copy ul, .quick-content .copy ul li { display:block; font-family: Arial, Helvetica, sans-serif; font-size:14px; } .quick-content .copy ul li strong { font-size:11px; text-transform: uppercase;} .quick-content .copy ul li { padding:5px 0px 5px 26px; background:url(../images/bullet.svg) 8px 12px no-repeat; line-height:22px; margin-left:-20px; } .woman { width:100%; text-align:center; margin-bottom:30px; } .woman img { width:100%; margin:0px auto; max-width:856px; } .cms { width:100%; text-align:center; margin-bottom:30px; } .cms img { width:100%; margin:0px auto; max-width:688px; height: auto; } .flex { display: flex; width:100%; margin:0px auto; justify-content: space-between; font-family: Nimbus, sans-serif; margin-bottom:50px; } .flex > div { width: 31%; } .flex > div > strong { font-weight: normal; display: block; text-transform: uppercase; padding:20px; font-size:24px; margin-top:20px; font-family: Nimbus, sans-serif; color:rgb(0, 0, 0); } .flex > div ul, .flex > div ul li { display: block; list-style: none; padding:0px; margin:0px; font-family: Nimbus, sans-serif; } .flex > div ul li { padding:5px 0px 5px 0px; font-size:18px; line-height: 24px; background: url(../images/bullet.svg) 0px 12px no-repeat; padding-left:20px; -ms-transition:background-position .2s; -moz-transition:background-position .2s; -o-transition:background-position .2s; -webkit-transition:background-position .2s; } .flex > div ul li:hover { background-position: 0px 12px; } .flex > div ul li[data-tip] { background: url(../images/bulletinfo.svg) 0 12px no-repeat; } @media (max-width: 768px) { .flex { display: block; } .flex > div { width:98%; padding:2%; margin:0px; } } [data-tip] { position:relative; cursor: pointer; } [data-tip]::after { position: absolute; display: block;transform: scale(0.6) translateY(-50px); left: 0px; bottom:100%; opacity: 0; z-index: -100; border-top:5px solid; border-image: linear-gradient(to right, rgb(255, 133, 2) 0%, rgb(255, 198, 112) 100%) 1; color:rgb(245, 245, 245);content: attr(data-tip); margin-left:-10px; padding: 20px 20px 40px 20px; transition: all .45s cubic-bezier(0.68, -0.6, 0.32, 1.6); width: 300px;font-family: Arial, sans-serif;font-size:14px; font-weight: normal; text-transform: none; text-shadow: none; } [data-tip][data-tippy]::after { width:100px; } [data-tip][data-arrow] { text-align: center; } [data-tip][data-arrow]::after { width:60px; text-align: center; } [data-tip]::after { background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgICAgPHBhdGggZD0iTSAwIDAgTCA0MDAgMCBMIDQwMCAyODAgTCA1MCAyODAgTCA0MCAyOTAgTCAzMCAyODAgTCAwIDI4MCB6IiBmaWxsPSJyZ2JhKDAsIDAsIDAsIDAuOCkiIC8+CiAgICAgICAgPC9zdmc+") 0 100% no-repeat; } [data-tip]:hover::after, [data-tip]:focus::after { transform:scale(1) translateY(10px); opacity: 1; z-index: 100; } @media (max-width: 760px) { [data-tooltip]::after { font-size: .75em;margin-left: -5em;width: 10em; } } .flexcarousel-wrapper { position: relative; box-sizing: border-box; margin: 0; padding: 0;width: 100%;height: 100%; display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center;} .flexcarousel { min-height: 700px; width: 100%;height: 100%; display: flex; max-height: 550px; overflow: hidden;position: relative; } .flexcarousel-item { visibility:visible;display: flex;width: 100%;height: 100%;align-items: center;justify-content: flex-end;-webkit-align-items: center;-webkit-justify-content: flex-end;position: relative;flex-shrink: 0;-webkit-flex-shrink: 0;position: absolute;z-index: 0;transition: 0.6s all linear;} .flexcarousel-item__info { height: 100%;display: flex;justify-content: center;flex-direction: column;display: -webkit-flex;-webkit-justify-content: center;-webkit-flex-direction: column;order: 1;left: 0;margin: auto;padding: 0 40px;width: 40%;} .flexcarousel-item__info p { font-size:18px; font-family: Arial, Helvetica, sans-serif; font-size:16px; } .flexcarousel-item__image { border-color:#FD9C00; border-image: linear-gradient(45deg,#ffb641 0%, #FD9C00 50%, #ffb641 100%) 1; width: 60%;height: 100%;order: 2;align-self: flex-end;flex-basis: 60%;-webkit-order: 2;-webkit-align-self: flex-end;-webkit-flex-basis: 60%;background-position: center;background-repeat: no-repeat;background-size: cover;position:relative;transform: translateX(100%);transition: 0.6s all ease-in-out; } .flexcarousel-item__image > div { text-align: center; max-width: 600px; margin:0px auto; } .flexcarousel-item__image > div svg { display: block;} .flexcarousel-item__subtitle { font-family: Nimbus, Arial, sans-serif; font-size:18px; text-transform: uppercase;margin: 0;color: #7E7E7E; transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.4s all ease-in-out;} .flexcarousel-item__title { margin: 15px 0 0 0; transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;} .flexcarousel-item__title a { display: block; font-family: Nimbus, Arial, sans-serif; font-size: 44px;line-height: 45px;color: #2C2C2C; } .flexcarousel-item__description {transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;margin-top: 35px;font-size: 13px;color: #7e7e7e;line-height: 22px;margin-bottom: 35px;} .flexcarousel-item__btn { width: 35%; margin: 0;width: 35%;text-decoration: none;transform: translateY(25%);opacity: 0;visibility: hidden;transition: 0.6s all ease-in-out;} .flexcarousel__nav { position: absolute;left: 50%; z-index: 2; bottom: 100px; margin-left:-100px; } .flexcarousel__nav::after {content: "";clear: both;display: table;} .flexcarousel__icon { display: block; width: 32px; height:32px; fill: #5d5d5d;} .flexcarousel__arrow { float:left; cursor: pointer;display: block;padding: 11px 15px;position: relative;} .active { z-index: 1;display: flex;visibility:visible; } .active .flexcarousel-item__subtitle, .active .flexcarousel-item__title, .active .flexcarousel-item__description, .active .flexcarousel-item__btn { transform: translateY(0);opacity: 1;transition: 0.6s all ease-in-out;visibility: visible;} .active .flexcarousel-item__image{ transition: 0.6s all ease-in-out;transform: translateX(0);} .ai-search { display: block; float:left; } .ai-search ul[data-awi-nav], .ai-search ul[data-awi-nav] li, .ai-search ul[data-awi-nav] li a { display: block; background: none; } .ai-search ul[data-awi-nav] li a { cursor:pointer; width: 40px; height:50px; padding:0px 10px 0px 0px; line-height: 60px; color:rgba(0,0,0,1); text-shadow: none; text-align: left; text-indent: -9999; background:url(../images/store/ai.svg) 50% 50% no-repeat; } @media (max-width: 760px) { .flexcarousel-item__title { font-size:18px; line-height: 18px;} .flexcarousel-item__title a { font-size:18px; line-height: 18px; } .flexcarousel-item__info p { font-size:12px; line-height: 16px; } .flexcarousel-item__image > div svg { margin-top:100px; } .flexcarousel { min-height: 600px; } .flexcarousel__nav { margin-left:0px; } } .bubbles{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; } .bubbles li { position: absolute;display: block;list-style: none;width: 20px;height: 20px;background: rgba(255, 255, 255, 0.2);animation: animate 25s linear infinite;bottom: -150px;} .bubbles li:nth-child(1){ left: 25%;width: 80px;height: 80px;animation-delay: 0s;} .bubbles li:nth-child(2){ left: 10%;width: 20px;height: 20px;animation-delay: 2s;animation-duration: 12s;} .bubbles li:nth-child(3){ left: 70%;width: 20px;height: 20px;animation-delay: 4s;} .bubbles li:nth-child(4){ left: 40%;width: 60px;height: 60px;animation-delay: 0s;animation-duration: 18s;} .bubbles li:nth-child(5){ left: 65%;width: 20px;height: 20px;animation-delay: 0s;} .bubbles li:nth-child(6){ left: 75%;width: 110px;height: 110px;animation-delay: 3s;} .bubbles li:nth-child(7){ left: 35%;width: 150px;height: 150px;animation-delay: 7s;} .bubbles li:nth-child(8){ left: 50%;width: 25px;height: 25px;animation-delay: 15s;animation-duration: 45s;} .bubbles li:nth-child(9){ left: 20%;width: 15px;height: 15px;animation-delay: 2s;animation-duration: 35s;} .bubbles li:nth-child(10){left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;} @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } div[data-grid] { display: flex; max-width: 1200px; margin:50px auto; font-family: Nimbus, sans-serif; } div[data-grid] > div { padding:10px; flex:1; text-align: center; } div[data-grid] > div[data-content-management] { background:url(../images/icons/cms.svg) 50% 20px no-repeat; padding-top:100px; } div[data-grid] > div[data-ecommerce] { background:url(../images/icons/ecommerce.svg) 50% 20px no-repeat; padding-top:100px; } .separator { display:block; height:0px; font-size:0px; line-height:0px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; } .separator.separator-carousel { margin-top:-2px; border-top:none; } .container { position:relative; margin:0px auto; min-height:100px; max-width:1400px; } .sprite { display:block; height:3px; font-size:0px; line-height:0px; background-image:url(../images/sprite.png); background-repeat:no-repeat; background-size: 100%; background-position:center; } .wrapper { padding:50px 0px 50px 0px; } .wrapper.wrapper-orange { background:#f2f2f2; padding:100px 0px 100px 0px; } .wrapper.wrapper-orange .copy, .wrapper.wrapper-orange .copy p, .wrapper.wrapper-orange .copy h1, .wrapper.wrapper-orange .copy h2 { color:#6f6f6f; } .wrapper.wrapper-orange .copy h2 { font-size:60px; margin-bottom:60px; display:block; text-align:center; } .wrapper.wrapper-orange .copy h1, .wrapper.wrapper-orange .copy h2 { color:#6f6f6f; text-shadow:#fff 1px 1px; line-height: 40px; } .wrapper.wrapper-latest { background:linear-gradient(0deg, rgb(206, 206, 206) 0%, rgb(223, 223, 223) 100%); padding:100px 0px 0px 0px; } .wrapper.wrapper-latest .copy, .wrapper.wrapper-latest .copy p, .wrapper.wrapper-latest .copy h1, .wrapper.wrapper-latest .copy h2 { display: block; color:#6f6f6f; } .wrapper.wrapper-latest .copy h2 { font-size:60px; margin-bottom:60px; display:block; text-align:center; } .wrapper.wrapper-latest .copy h1, .wrapper.wrapper-latest .copy h2 { color:#6f6f6f; text-shadow:#fff 1px 1px; line-height: 40px; } .wrapper.wrapper-latest .copy h1 { text-align: center; font-size:44px; margin-bottom:50px; } .wrapper.wrapper-hidden { display:none; } .wrapper.wrapper-technology { background:#282828; padding:100px 0px 100px 0px; } .wrapper.wrapper-technology .copy, .wrapper.wrapper-technology .copy p, .wrapper.wrapper-technology .copy h1, .wrapper.wrapper-technology .copy h2, .wrapper.wrapper-technology .copy h3 { color:#fff; } .wrapper.wrapper-technology .copy h1, .wrapper.wrapper-technology .copy h2, .wrapper.wrapper-technology .copy h3 { color:#fff; text-shadow:#000 -1px -1px; font-size:60px; display:block; text-align:center; margin-bottom:50px; } .wrapper.wrapper-technology .copy h3 { color:#8e8e8e; font-size:30px; display:block; text-align:center; margin-bottom:50px; } .wrapper.wrapper-portfolio { background:#f2f2f2; padding:0px 0px 20px 0px; } .wrapper.wrapper-portfolio .copy, .wrapper.wrapper-portfolio .copy p, .wrapper.wrapper-portfolio .copy h1, .wrapper.wrapper-portfolio .copy h2, .wrapper.wrapper-portfolio .copy h3 { display:block; font-size:40px; text-shadow:#fff 1px 1px; } .wrapper.wrapper-portfolio .copy h3 { font-size:20px; display:block; text-align:center; } .wrapper.wrapper-portfolio .copy h2, .wrapper.wrapper-portfolio .copy h3 { color:#5b5b5b; margin-top:20px; } .wrapper.wrapper-portfolio .copy p { font-size:14px; } .wrapper.wrapper-portfolio .container { min-height:40px; } .wrapper.wrapper-portfolio.wrapper-portfolio-top { padding:50px 0px 20px 0px; } .wrapper.wrapper-preview { position:relative; padding:0px; background:#f2f2f2; height:0px; overflow:hidden; z-index:1; } .wrapper.wrapper-preview > div { position:absolute; bottom:0px; left:0px; width:100%; z-index:1; } .wrapper.wrapper-preview > div > img { position:absolute; bottom:0px; left:0px; z-index:1; } .wrapper.wrapper-preview > div > div:first-child { position:absolute; bottom:0px; left:0px; width:100%; height:27px; /* background:url(../images/portfolio.bottom.shadow.png) 0 0 repeat-x; */z-index:9000; } .wrapper.wrapper-preview > div > div:first-child + div { position:absolute; top:0px; left:0px; width:100%; height:27px; z-index:9998; } .wrapper.wrapper-footer { background:#393939; } .wrapper.wrapper-footer .copy, .wrapper.wrapper-footer .copy p, .wrapper.wrapper-footer .copy h1, .wrapper.wrapper-footer .copy h2 { color:#fff; } .wrapper.wrapper-footer .copy h1, .wrapper.wrapper-footer .copy h2 { color:#fff; text-shadow:#000 -1px -1px; } [data-errors] { display:none; background:#ffdfdf; padding:15px; border:1px solid #c70000; margin:20px 0px 10px 0px; border-radius: 4px; } [data-errors][data-errors-visible] { display:block; } [data-errors] > strong { display:block; margin-bottom:5px; } [data-errors] > div { font-size:13px; padding:5px 0px 5px 0px; text-shadow:#fff2f2 1px 1px; line-height:18px; } [data-success] { display:none; background:#e6ffee; padding:10px; border:1px solid #009c30; margin:10px 0px 10px 0px; } [data-success] > strong { display:block; margin-bottom:5px; } [data-success] > div { font-size:12px; padding:2px 0px 2px 0px; text-shadow:#fff2f2 1px 1px; } [data-alert] { background:#fff5e1; padding:10px; border:1px solid #e99000; margin:20px 0px 20px 0px; } [data-alert] > strong { display:block; margin-bottom:5px; } [data-alert] > div { font-size:12px; padding:2px 0px 2px 0px; text-shadow:#fff9e1 1px 1px; } ul.clients { display:block; width:1200px; margin:0px auto; } ul.clients li { display:block; text-align:center; float:left; } ul.clients li > a { display:block; } ul.clients > li img { margin:0px auto; width:100%; max-width:128px; height: auto; } .badge { width:200px; margin:0px auto; margin-top:-110px; height:50px; margin-bottom:50px; background:#393939; } .badge h2 { color:#fff; font-size:20px; text-align:center; display:block; height:50px; line-height:50px; } /* Adaptive centered content */ .swipe { position: relative; overflow:hidden; } .swipe > ul { width:100000px; } .swipe > ul > li { float:left; } .swipe > ul > li img { width:100%; } .side ul { display:block; } .side ul ul { margin-left:20px; display:none; } .side ul li a { display:block; height:34px; line-height:34px; padding-left:20px; color:#565656; } .side ul li.parent > a { background:url(../images/plus.png) center right no-repeat; } .side ul li.parent.expand > a { background:url(../images/minus.png) center right no-repeat; } .side ul li.parent.active ul { display:block; } .side ul li.active > a { padding-left:0px; } .side ul li.active > a { background:url(../images/buttons/input.button.right.png) top right no-repeat; padding-right:10px; } .side ul li.active > a > span { position:relative; display:block; height:34px; line-height:26px; color:#000; background:url(../images/buttons/input.button.left.png) top left no-repeat; padding-left:20px; } .side ul li.active > a > span > span { float:left; color:#d85800; zoom: 1; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2); padding-right:20px; } .side ul li.active > a > span > span:before { color: #fff; content: attr(data-text); position:absolute; top:1px; left:21px; } .side ul li.active > a:hover { background:url(../images/buttons/input.button.right.over.png) top right no-repeat; padding-right:10px; } .side ul li.active > a:hover > span { position:relative; display:block; height:34px; line-height:26px; color:#ffdad3; cursor:pointer; background:url(../images/buttons/input.button.left.over.png) top left no-repeat; padding-left:20px; } [data-debug] { padding:20px; background:#000; color:#fff; z-index:9999; } /* X/Y resizable box */ .box { position:relative; z-index:9900; color:#555; overflow:hidden; } .box > div { position:relative; } .box > div:first-child { height:10px; margin:0px 10px 0px 10px; background:url(../images/box/top.png) 0px 1px repeat-x; } .box > div:first-child > div, .box > div:first-child + div + div > div { position:absolute; top:0px; width:10px; height:10px; } .box > div:first-child + div + div { position:relative; height:10px; margin:0px 10px 0px 10px; background:url(../images/box/bottom.png) bottom left repeat-x; } .box > div:first-child + div { background:url(../images/box/left.png) 0 0 repeat-y; } .box > div:first-child + div > div { background:url(../images/box/right.png) top right repeat-y; } .box > div:first-child + div > div > div { margin:0px 10px 0px 10px; background:url(../images/box/pixel.png); } .box > div:first-child + div > div > div > div { margin-left:0px; padding:10px 10px 5px 10px; text-shadow:#fff 1px 1px; color:#555; min-height:100px; } .box > div:first-child + div + div > div:first-child { left:0px; background:url(../images/box/blc.png) 0px 0px no-repeat; margin-left:-10px;} .box > div:first-child + div + div > div:first-child + div { left:100%; background:url(../images/box/brc.png) 0px 0px no-repeat; margin-right:-10px; } .box > div:first-child > div:first-child { left:0px; background:url(../images/box/tlc.png) 0px 1px no-repeat; margin-left:-10px; height:10px; } .box > div:first-child > div:first-child + div { left:100%; background:url(../images/box/trc.png) 0px 1px no-repeat; margin-right:-10px; height:10px; } a.mail { color:#fb8800; text-decoration:underline; } a.arrow { display:block; width:34px; height:90px; position:absolute; top:50%; margin-top:-45px; z-index:9999; } a.arrow.next { right:0px; background:url(../images/next.png) 0 0 no-repeat; } a.arrow.next.disabled { background:url(../images/next.disabled.png) 0 0 no-repeat; } a.arrow.prev { left:0px; background:url(../images/prev.png) 0 0 no-repeat; } a.arrow.prev.disabled { left:0px; background:url(../images/prev.disabled.png) 0 0 no-repeat; } .demos { position:relative; padding:40px; background:#ebebeb; margin:20px 0px 20px 0px; } .demos .angle { display:block; width:104px; height:104px; position:absolute; top:-3px; left:-3px; background:url(../images/badge.png) 0 0 no-repeat; z-index:9000; } .copy h2.latest { display:block; text-align:center; color:#fb8800; } ul.products { display:block; height:250px; max-width:700px; margin:0px auto; margin-bottom:30px; } ul.products li.round-out h2, ul.products li.round-out h3 { max-width:240px } /* Store */ .product { min-width:300px; max-width:780px; } .product a.button { text-shadow:none; float:left; } .product h2 { display:block; padding:0px 20px 0px 0px; } .product h2 a { font-family:Nimbus, Arial, sans-serif; font-size:19px; line-height:18px; display:block; margin-bottom:20px; color:#a8a8a8; text-shadow:#000 -1px -1px; } .product h3 { font-family:Arial, sans-serif; font-size:12px; margin:0px; display:block; height:40px; color:#717171; padding:10px 0px 20px 0px; } .code { background:#fff; padding:10px; color:#353535; border:1px solid #dadada; } .code span.reserved { color:#0000ff; } .code span.comment, .code span.comment span.reserved, .code span.comment span..quote, .code span.comment span..digit { color:#c3c3c3; } .code span.quote, .code span.quote span.digit { color:#008200; } .code span.digit { color:#ff0000; } .map { height:500px; width:100%; } .showcase > a { display:block; width:24px; height:24px; margin:0px auto; background:url(../images/stop.png) center center no-repeat; cursor:pointer; z-index:9999; } .showcase > a.goto { background:url(../images/goto.png) center center no-repeat; } .showcase > div { position:relative; height:200px; overflow:hidden; } .showcase > div > div { position:absolute; top:0px; left:50%; display:block; width:200px; height:200px; background-repeat:no-repeat; background-position:center center; } .showcase > div > div:first-child > span, .showcase > div > div:first-child + div > span { display:block; width:300px; position:absolute; top:50px; padding:0px 20px 0px 20px; } .showcase > div > div:first-child > span { right:200px; text-align:right; } .showcase > div > div:first-child + div > span { left:200px; text-align:left; } .showcase > div > div p { color:#595959; line-height:18px; text-shadow:#fff 1px 1px; } .showcase p a { display: block; margin-top:10px; color:#ec6a00; } .curve { position:fixed; left:50%; margin:0px 0px 0px -193px; top:5px; width:387px; height:46px; background:url(../images/curve.png) center top no-repeat; z-index:9999; } /* Portfolio */ .portfolio { position:relative; height:50px; overflow:hidden; } .portfolio .portfolio-content { position:absolute; top:-100px; left:50%; height:60px; margin:0px 0px 0px -500px; width:750px; padding:20px 250px 20px 0px; background:url(../images/portfolio.separator.png) 100% 0px no-repeat; } .portfolio .portfolio-content > p { display:block; } .portfolio .portfolio-content > p, .portfolio .portfolio-content > p a, .portfolio .portfolio-content > p em, .portfolio .portfolio-content > p strong { font-size:14px; } .portfolio .portfolio-content > a { position:absolute; top:30px; right:10px; display:block; width:104px; height:34px; line-height:30px; background:url(../images/portfolio.view.png) 0 0 no-repeat; text-align:center; color:#fff; text-shadow:#000 -1px -1px; cursor:pointer; } .portfolio .portfolio-content img.preloader { position:absolute; top:32px; right:130px; } .portfolio ul.circles { position:absolute; bottom:50%; left:50%; z-index:1; } .portfolio ul.circles li, .portfolio ul.circles li a, .portfolio ul.circles li a > span, .portfolio ul.circles li a > span em { display:block; width:210px; height:210px; } .portfolio ul.circles li { position:absolute; top:50%; left:50%; z-index:1; display:none; } .portfolio ul.circles li a { position:relative; z-index:9999; background-position:center center; background-repeat:no-repeat; } .portfolio ul.circles li a > span { background:url(../images/portfolio.item.png) 50% 50% no-repeat; } .portfolio ul.circles li a > span em { background:url(../images/craft.line.png) 0 0 no-repeat; } .portfolio ul.circles li a:hover > span em { -webkit-animation-duration:6.0s;-moz-animation-duration:6.0s;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-webkit-animation-name: yoyo;-moz-animation-name: yoyo;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear; } .portfolio ul.circles li ul { position:absolute; top:50%; left:50%; display:block; z-index:1; width:0px; height:0px; } li.parent a.load { background:url(../images/loader/load.gif) 50% 50% no-repeat; } li.parent a.bind { background:url(../images/portfolio.png) 0px -5000px no-repeat; } li.parent a.bind[data-text="1"] { background-position:0px 0px; } li.parent a.bind[data-text="1"] + ul > li:first-child > a { background-position:-210px 0px; } li.parent a.bind[data-text="1"] + ul > li:first-child + li > a { background-position:-420px 0px; } li.parent a.bind[data-text="1"] + ul > li:first-child + li + li > a { background-position:-630px 0px; } li.parent a.bind[data-text="1"] + ul > li:first-child + li + li + li > a { background-position:-840px 0px; } li.parent a.bind[data-text="1"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px 0px; } li.parent a.bind[data-text="2"] { background-position:0px -210px; } li.parent a.bind[data-text="2"] + ul > li:first-child > a { background-position:-210px -210px; } li.parent a.bind[data-text="2"] + ul > li:first-child + li > a { background-position:-420px -210px; } li.parent a.bind[data-text="2"] + ul > li:first-child + li + li > a { background-position:-630px -210px; } li.parent a.bind[data-text="2"] + ul > li:first-child + li + li + li > a { background-position:-840px -210px; } li.parent a.bind[data-text="2"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -210px; } li.parent a.bind[data-text="3"] { background-position:0px -420px; } li.parent a.bind[data-text="3"] + ul > li:first-child > a { background-position:-210px -420px; } li.parent a.bind[data-text="3"] + ul > li:first-child + li > a { background-position:-420px -420px; } li.parent a.bind[data-text="3"] + ul > li:first-child + li + li > a { background-position:-630px -420px; } li.parent a.bind[data-text="3"] + ul > li:first-child + li + li + li > a { background-position:-840px -420px; } li.parent a.bind[data-text="3"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -420px; } li.parent a.bind[data-text="4"] { background-position:0px -630px; } li.parent a.bind[data-text="4"] + ul > li:first-child > a { background-position:-210px -630px; } li.parent a.bind[data-text="4"] + ul > li:first-child + li > a { background-position:-420px -630px; } li.parent a.bind[data-text="4"] + ul > li:first-child + li + li > a { background-position:-630px -630px; } li.parent a.bind[data-text="4"] + ul > li:first-child + li + li + li > a { background-position:-840px -630px; } li.parent a.bind[data-text="4"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -630px; } li.parent a.bind[data-text="5"] { background-position:0px -840px; } li.parent a.bind[data-text="5"] + ul > li:first-child > a { background-position:-210px -840px; } li.parent a.bind[data-text="5"] + ul > li:first-child + li > a { background-position:-420px -840px; } li.parent a.bind[data-text="5"] + ul > li:first-child + li + li > a { background-position:-630px -840px; } li.parent a.bind[data-text="5"] + ul > li:first-child + li + li + li > a { background-position:-840px -840px; } li.parent a.bind[data-text="5"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -840px; } li.parent a.bind[data-text="6"] { background-position:0px -1050px; } li.parent a.bind[data-text="6"] + ul > li:first-child > a { background-position:-210px -1050px; } li.parent a.bind[data-text="6"] + ul > li:first-child + li > a { background-position:-420px -1050px; } li.parent a.bind[data-text="6"] + ul > li:first-child + li + li > a { background-position:-630px -1050px; } li.parent a.bind[data-text="6"] + ul > li:first-child + li + li + li > a { background-position:-840px -1050px; } li.parent a.bind[data-text="6"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -1050px; } li.parent a.bind[data-text="7"] { background-position:0px -1260px; } li.parent a.bind[data-text="7"] + ul > li:first-child > a { background-position:-210px -1260px; } li.parent a.bind[data-text="7"] + ul > li:first-child + li > a { background-position:-420px -1260px; } li.parent a.bind[data-text="7"] + ul > li:first-child + li + li > a { background-position:-630px -1260px; } li.parent a.bind[data-text="7"] + ul > li:first-child + li + li + li > a { background-position:-840px -1260px; } li.parent a.bind[data-text="7"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -1260px; } li.parent a.bind[data-text="8"] { background-position:0px -1470px; } li.parent a.bind[data-text="8"] + ul > li:first-child > a { background-position:-210px -1470px; } li.parent a.bind[data-text="8"] + ul > li:first-child + li > a { background-position:-420px -1470px; } li.parent a.bind[data-text="8"] + ul > li:first-child + li + li > a { background-position:-630px -1470px; } li.parent a.bind[data-text="8"] + ul > li:first-child + li + li + li > a { background-position:-840px -1470px; } li.parent a.bind[data-text="8"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -1470px; } li.parent a.bind[data-text="9"] { background-position:0px -1680px; } li.parent a.bind[data-text="9"] + ul > li:first-child > a { background-position:-210px -1680px; } li.parent a.bind[data-text="9"] + ul > li:first-child + li > a { background-position:-420px -1680px; } li.parent a.bind[data-text="9"] + ul > li:first-child + li + li > a { background-position:-630px -1680px; } li.parent a.bind[data-text="9"] + ul > li:first-child + li + li + li > a { background-position:-840px -1680px; } li.parent a.bind[data-text="9"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -1680px; } li.parent a.bind[data-text="10"] { background-position:0px -1890px; } li.parent a.bind[data-text="10"] + ul > li:first-child > a { background-position:-210px -1890px; } li.parent a.bind[data-text="10"] + ul > li:first-child + li > a { background-position:-420px -1890px; } li.parent a.bind[data-text="10"] + ul > li:first-child + li + li > a { background-position:-630px -1890px; } li.parent a.bind[data-text="10"] + ul > li:first-child + li + li + li > a { background-position:-840px -1890px; } li.parent a.bind[data-text="10"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -1890px; } li.parent a.bind[data-text="11"] { background-position:0px -2100px; } li.parent a.bind[data-text="11"] + ul > li:first-child > a { background-position:-210px -2100px; } li.parent a.bind[data-text="11"] + ul > li:first-child + li > a { background-position:-420px -2100px; } li.parent a.bind[data-text="11"] + ul > li:first-child + li + li > a { background-position:-630px -2100px; } li.parent a.bind[data-text="11"] + ul > li:first-child + li + li + li > a { background-position:-840px -2100px; } li.parent a.bind[data-text="11"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -2100px; } li.parent a.bind[data-text="12"] { background-position:0px -2310px; } li.parent a.bind[data-text="12"] + ul > li:first-child > a { background-position:-210px -2310px; } li.parent a.bind[data-text="12"] + ul > li:first-child + li > a { background-position:-420px -2310px; } li.parent a.bind[data-text="12"] + ul > li:first-child + li + li > a { background-position:-630px -2310px; } li.parent a.bind[data-text="12"] + ul > li:first-child + li + li + li > a { background-position:-840px -2310px; } li.parent a.bind[data-text="12"] + ul > li:first-child + li + li + li + li > a { background-position:-1050px -2310px; } .portfolio ul.circles li li { display:none; z-index:9999; } .portfolio [data-text] { display:none; } .portfolio a.start { position:absolute; bottom:0px; left:50%; margin:0px 0px 0px -22px; display:block; width:45px; height:45px; background:url(../images/portfolio.icon.play.png) center center no-repeat; cursor:pointer; z-index:1000; } /* Generic icon styles */ a.icon { position:absolute; bottom:0; left:50%; margin:0px 0px 0px 20px; display:block; width:45px; height:45px; cursor:pointer; z-index:1000; } /* Icons */ a.icon.back { background:url(../images/portfolio.icon.back.png) center center no-repeat; } a.icon.home { background:url(../images/portfolio.icon.home.png) center center no-repeat; } a.icon.exit { background:url(../images/portfolio.icon.exit.png) center center no-repeat; } em.purchase-label { display:block; margin:0px 0px 10px 0px; color:#a7a7a7; font-style:normal; text-shadow:#fff 1px 1px; } .scroll { position:fixed; top:200px; right:10px; width:30px; z-index:9999; } .scroll > a { display:block; width:30px; height:30px; background:url(../images/scroll.svg) 0px 0px no-repeat; cursor:pointer; } .scroll > a.visible { background:url(../images/scroll.visible.svg) 0px 0px no-repeat } /* Tipsy */ .tipsy { font-size: 14px; position: absolute; padding: 5px; z-index: 100000; max-width:400px; } .tipsy, .tipsy span, .tipsy-inner { font-size:14px; } .tipsy.tipsy-wide { max-width:800px; } .tipsy-inner { background-color: #2e2e2e; color:#efefef; max-width: 900px; padding: 20px; text-align: left; text-shadow:#121212 -1px -1px; } /* Rounded corners */ .tipsy-inner { position:relative; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;line-height:14px; } .tipsy-inner span { position:relative; color:#48e3ff; text-shadow:#000 -1px -1px; display:block; margin-bottom:5px; } /* Uncomment for shadow */ .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } /* Rules to colour arrows */ .tipsy-arrow-n { border-bottom-color: #2e2e2e; } .tipsy-arrow-s { border-top-color: #2e2e2e; } .tipsy-arrow-e { border-left-color: #2e2e2e; } .tipsy-arrow-w { border-right-color: #2e2e2e; } .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-s .tipsy-arrow { bottom: 1px; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } /* anoFlow Css */ .flow { position:absolute; margin-top:30px; width:300px; top:50%; left:50%; margin-left:-50px; z-index:9999; display:none; } .flow div { position:relative; } .flow .corner { width:10px; height:10px; position:absolute; top:0px; background:url(../images/flow/sprite.c.png) 0 0px no-repeat; } .flow .top { height:10px; margin:0px 10px 0px 10px; background:url(../images/flow/sprite.y.png) 0 0 repeat-x; } .flow .mid { background:url(../images/flow/sprite.x.png) 0 0 repeat-y; } .flow .mid > div { background:url(../images/flow/sprite.x.png) top right repeat-y; padding:0px 10px 0px 10px; } .flow .mid > div > div { position:relative; background:#161717 url(../images/flow/loader.gif) center center no-repeat; overflow:hidden; color:#868686; line-height:16px; font-size:12px; } .flow .mid > div > div img { border: 0; -ms-interpolation-mode: bicubic; max-width: 100%;height: auto;width: auto; } .flow .bot { height:10px; margin:0px 10px 0px 10px; background:url(../images/flow/sprite.y.png) 0 -10px repeat-x; } .flow .bot .blc { left:0px; background-position:0px -10px; margin-left:-10px; } .flow .bot .brc { left:100%; background-position:-10px -10px; margin-right:-10px; } .flow .top .tlc { left:0px; background-position:0px 0px; margin-left:-10px; } .flow .top .trc { left:100%; background-position:-10px 0px; margin-right:-10px; } .flow .ribbon { position:absolute; bottom:60px; left:50%; margin-left:-100px; width:230px; height:38px; z-index:9999; } .flow .ribbon div { padding:15px; color:#818181; text-shadow:#000000 -1px -1px; font-size:11px; font-family:MagistralC; } .flow .controls { position:absolute; bottom:0px; left:0px; width:100%; height:38px; z-index:9999; } .flow .ui-flow-next, .flow .ui-flow-prev, .flow .ui-flow-close { display:block; width:78px; height:112px; position:absolute; top:50%; margin-top:-56px; z-index:9999; cursor:pointer; } .flow .ui-flow-next { background:url(../images/flow/flow.sprite.png) -78px 0px no-repeat; right:5px; } .flow .ui-flow-next span { position:absolute; top:0px; left:0px; display:block; width:78px; height:112px; background:url(../images/flow/flow.sprite.png) -78px -112px no-repeat; } .flow .ui-flow-prev { background:url(../images/flow/flow.sprite.png) 0px 0px no-repeat; left:5px; } .flow .ui-flow-prev span { position:absolute; top:0px; left:0px; display:block; width:78px; height:112px; background:url(../images/flow/flow.sprite.png) 0px -112px no-repeat; } .flow .ui-flow-close { background:url(../images/flow/close.png) 0 0 no-repeat; width:42px; height:37px; right:20px; top:0px; margin:0px 0px 0px 0px; } pre { display:block; } /* X/Y resizable box */ .dialog { position:absolute; top:50%; left:50%; z-index:9900; color:#555; } .dialog > div { position:relative; } .dialog > div:first-child { height:44px; margin:0px 10px 0px 10px; background:url(../images/dialog/top.png) 0px 1px repeat-x; } .dialog > div:first-child > div, .dialog > div:first-child + div + div > div { position:absolute; top:0px; width:10px; height:10px; } .dialog > div:first-child > h5 { cursor:move; display:block; height:44px; line-height:44px; color:#acacac; text-shadow:#fff 1px 1px; background:url(../images/dialog/shadow.h5.png) bottom left no-repeat; padding-left:10px; } .dialog > div:first-child + div + div { position:relative; height:10px; margin:0px 10px 0px 10px; background:url(../images/dialog/bottom.png) bottom left repeat-x; } .dialog > div:first-child + div { background:url(../images/dialog/left.png) 0 0 repeat-y; } .dialog > div:first-child + div > div { background:url(../images/dialog/right.png) top right repeat-y; } .dialog > div:first-child + div > div > div { margin:0px 10px 0px 4px; background:url(../images/dialog/pixel.png); overflow:hidden; } .dialog > div:first-child + div > div > div > div { position:relative; background:url(../images/dialog/shadow.png) 0 0 no-repeat; margin-left:0px; margin-right:-6px; padding:10px 10px 5px 10px; text-shadow:#f5f5f5 1px 1px; color:#555; min-height:250px; overflow:hidden; } .dialog > div:first-child + div + div > div:first-child { left:0px; background:url(../images/dialog/blc.png) 0px 0px no-repeat; margin-left:-10px;} .dialog > div:first-child + div + div > div:first-child + div { left:100%; background:url(../images/dialog/brc.png) 0px 0px no-repeat; margin-right:-10px; } .dialog > div:first-child > div:first-child { left:0px; background:url(../images/dialog/tlc.png) 0px 1px no-repeat; margin-left:-10px; height:44px; } .dialog > div:first-child > div:first-child + h5 + div { left:100%; background:url(../images/dialog/trc.png) 0px 1px no-repeat; margin-right:-10px; height:44px; } .dialog a.icon.close { cursor:pointer; position:absolute; top:15px; right:0px; width:20px; height:20px; left:auto; z-index:9999; background:url(../images/dialog/close.png) 0 0 no-repeat; margin:0px; padding:0px; } /** * files.css */ .dropzone { position:relative; font-weight: bold; text-align: center; padding: 40px; margin:0px 0px 10px 0px; color: #555; border: 2px dashed #d3d3d3; border-radius: 4px; cursor: default; border-image-source: url("../images/dropzone.png"); border-image-slice: 2; border-image-repeat: round; background:#fff; overflow:hidden; } .dropzone.hover { background:#eee; } .dropzoneProgress { position:relative; display:block; width:100%; height:5px; margin:10px 0px 10px 0px; } .dropzoneProgress > div { display:none; height:2px; width:0px; background:#dadada; font-size:0px; line-height:0px; } .dropzoneFiles { margin:0px 0px 10px 0px; } .dropzoneFiles, .dropzoneFiles li { display:block; } .dropzoneFiles li { float:left; width:100px; height:100px; overflow:hidden; margin-right:5px; margin-bottom:5px; border:2px solid #494949; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .dropzoneFiles:before, .dropzoneFiles:after { content: " "; display: table; } .dropzoneFiles:after { clear: both; } .ticket { position:relative; padding:20px; margin:5px 0px 5px 0px; background:#fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-left:4px solid transparent; } .ticket.ticket-open { border-left:4px solid #ff6384; } .ticket.ticket-pending-customer-reply { border-left:4px solid #00b411; } .ticket.ticket-pending-customer-reply .ticket-conversation-messages > div:last-child { background:#f8f8f8; margin-left:-40px; margin-right:-40px; padding:20px 60px 20px 60px; } .ticket.ticket-pending-helpdesk-reply { border-left:4px solid #ff6384; } .ticket.ticket-pending-helpdesk-action { border-left:4px solid #ffe980; } .ticket-conversation .form .group textarea[name=conversation_content] { width:100%; min-height:400px; box-sizing: border-box; } .form[id=upload] .group input[type="text"][name=ticket_subject] { height: auto; display: block; width:100%; padding:10px; box-sizing: border-box; font-size:14px; } .form[id=upload] .group textarea[name=conversation_content] { display: block; width:100%; min-height:400px; box-sizing: border-box; } .ticket.ticket-closed { background:#f0f0f0; } .ticket > a { position:relative; overflow: hidden; color:#000; display:block; padding:5px 0px 5px 15px; margin-top:10px; background:url(../images/ticket.expand.png) 0 50% no-repeat; } .ticket .ticket-conversation > div { display:none; padding:20px; } .ticket-message { padding:20px 20px 20px 20px; margin-bottom:2px; } .ticket-message.ticket-helpdesk-message { background:#f9f9f9; } .ticket-message.ticket-helpdesk-message pre { margin:10px 0px 10px 0px; } .message-content { padding-top:20px; } .message-content, .message-content p { line-height:18px; font-size:14px; } .message-content p { display:block; } .message-content ul, .message-content ul li, .message-content ol, .message-content ol li { display:block; margin:0px; padding:0px; } .message-content ul li, .message-content ol li { padding-left:10px; } .toggle-ticket-option { display:block; color:#000; cursor:pointer; background:url(../images/plus.png) -8px 50% no-repeat; padding-left:20px; color:#fb8800; } .toggle-ticket-option.toggle-option { background:url(../images/minus.png) -8px 50% no-repeat; } .ticket-option { display:none; padding-left:20px; } a.toggle-messages { display: inline-block; text-align: center; padding: 5px 10px 5px 10px; cursor: pointer; margin:0px auto; border-bottom: 5px solid rgb(255, 187, 0); margin-bottom:20px; } .ticket-message > a { font-weight:bold; color:#fb8800; } .ticket-message > span { font-weight:normal; color:#9a9a9a; } .ticket-errors { display:none; background:#fff5f7; border-left:4px solid #ff6384; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:20px; } .message-attachments { margin-top:10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .message-attachments > a { color:#fb8800; font-weight:normal; display:block; background:url(../images/store/secure.png) 0 50% no-repeat; padding:5px 0px 5px 20px; } .message-attachments ul { margin:10px 0px 10px 20px; } .message-attachments ul, .message-attachments ul li { display:block; } .message-attachments ul li { float:left; overflow:hidden; margin-right:5px; margin-bottom:5px; } .message-attachments ul li > div { border:2px solid #494949; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; height:100px; width:100px; } .message-attachments ul li > div img { cursor:pointer; } .message-attachments ul li > a { border:2px solid #494949; -webkit-border-radius: 2px; -moz-border-radius: 2px; text-align:center; border-radius: 2px; height:60px; width:100px; padding:20px; background:none; display:block; color:#000; font-weight:bold; clear:both; } .message-attachments ul li > a span { font-weight:normal; display:block; margin-top:10px; } .message-attachments ul:before, .message-attachments ul:after { content: " "; display: table; } .message-attachments ul:after { clear: both; } .message-attachments ul { display:none; } .helpdesk-note { position:relative; padding:40px 200px 40px 40px; border-radius: 4px; background:#fff url(../images/summer.png) bottom right no-repeat; } .helpdesk-note { margin-bottom:30px; } .helpdesk-note p { display:block; margin:5px 0px 5px 0px; } .helpdesk-note a[data-note] { position:absolute; top:20px; right:20px; cursor:pointer; text-indent:-9999px; text-align:left; display:block; width:32px; height:32px; background:#ff6384 url(../images/store/close.png) 50% 50% no-repeat; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .helpdesk-note p, .helpdesk-note a, .helpdesk-note strong { font-size:14px; line-height: 20px; } .helpdesk-refresh { margin-top:20px; display:block; color:#000; padding:0px 0px 0px 20px; max-width:80px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAICAYAAAAm06XyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNFMkQ3QTQ3N0FCNzExRThBQ0EwRTA3QzdEQTYzQzRGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNFMkQ3QTQ4N0FCNzExRThBQ0EwRTA3QzdEQTYzQzRGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0UyRDdBNDU3QUI3MTFFOEFDQTBFMDdDN0RBNjNDNEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0UyRDdBNDY3QUI3MTFFOEFDQTBFMDdDN0RBNjNDNEYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o3Z+FAAAAbUlEQVR42mL8//8/AwgwzrMBMRj/Jx1hgIOU1v8M2AEjw5xqBiYkjSDwH8hGKJlTzQhWiIrhgAlJIwNWA/AAFiTT/qObDLUdlZ/SirCZgQLAiDfAUG3ECDxSbEb3EiMLocACuoQRzQB42AAEGADLdiN9HYyeygAAAABJRU5ErkJggg==') 0% 50% no-repeat; } .helpdesk-note.helpdesk-note-christmas { background:#fff url(../images/christmas.png) bottom right no-repeat; } .helpdesk-note.helpdesk-note-covid19 { background:#fff url(../images/covid19.png) bottom right no-repeat; } .helpdesk-note.helpdesk-note-mcapi { background:#f1f1f1; } .table.ticket-headline { width:100%; } .table.ticket-headline > div { width:auto; } .table.ticket-headline > div > div { padding:0px; width:auto; text-align: left;} .table.ticket-headline > div > div:first-child { width:140px; } .table.ticket-headline > div > div:first-child + div + div { text-align: right; width:250px; } .table.ticket-headline > div > div:first-child + div + div + div { width:24px; padding-left:5px; } a.googlePlay { display:block; width:176px; height:53px; float:right; margin-top:40px; } .troubleshooting .troubleshooting-filter { text-align:center; margin:20px 0px 20px 0px; } .troubleshooting .troubleshooting-filter input { display:block; padding:20px 20px 20px 20px; margin:0px auto; margin-bottom:40px; width:400px; } .troubleshooting a { color:#fb8800; text-decoration: none;} a.troubleshoot-pin { display:block; cursor:pointer; padding:10px; color:#fb8800; margin-left:10px; } table.quick-access { width:100%; } table.quick-access tr td { padding:50px; width:33%; vertical-align:top; border:1px solid transparent; } table.quick-access tr td sup { text-transform:uppercase; color:#ff0000; } a[data-support] { color:#000; } a[data-support="0"] { color:#c70000; } code[class*="language-"], pre[class*="language-"] { color: #657b83; /* base00 */ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {background: #073642; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {background: #073642;} /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background-color: #fdf6e3; /* base3 */ } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #93a1a1; /* base1 */ } .token.punctuation { color: #586e75; /* base01 */ } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #268bd2; /* blue */ } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.url, .token.inserted { color: #2aa198; /* cyan */ } .token.entity { color: #657b83; /* base00 */ background: #eee8d5; /* base2 */ } .token.atrule, .token.attr-value, .token.keyword { color: #859900; /* green */ } .token.function { color: #b58900; /* yellow */ } .token.regex, .token.important, .token.variable { color: #cb4b16; /* orange */ } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; } /* Fallback, in case JS does not run, to ensure the code is at least visible */ .lang-markup script[type='text/plain'], .language-markup script[type='text/plain'], script[type='text/plain'].lang-markup, script[type='text/plain'].language-markup { display: block; font: 100% Consolas, Monaco, monospace; white-space: pre; overflow: auto; } .cookie-directive { display:none; position:fixed; left: 25px; bottom:10px; margin-right: auto; margin-left: auto; z-index:9999; width: 90%; max-width:400px } .cookie-directive.cookie-directive-visible { display:block; } .cookie-directive > div { background:url(../images/helper.left.png) 0 0 no-repeat; padding-left:90px; } .cookie-directive > div > div { height:114px; background:url(../images/helper.right.png) top right no-repeat; padding-right:20px; } .cookie-directive > div > div > div { color:#fff; text-shadow:#acacac -1px -1px; padding:20px; margin:0px 0px 0px -75px; height:90px; text-align:left; } .cookie-directive > div > div > div strong { text-transform:uppercase; display:block; margin:0px 0px 10px 0px; } .cookie-directive > div > div > div p { line-height:16px; } .cookie-directive > div > div > div p a { color:#000; text-shadow:none; } .cookie-directive > div > div > div p a em { font-style:normal; } .cookie-directive > div > div > div p a span { color:#606060; } .cookie-directive > div > div > div p a:hover span { color:#000; } .cookie-directive a.close { display:block; width:16px; height:16px; background:url(../images/accept.png) center center no-repeat; position:absolute; right:22px; top:18px; cursor:pointer; } .cookie-directive.cookie-directive-wait a.close { background:url(../images/cookie-preloader.gif) center center no-repeat; } .cookie-directive a.yes { text-align:center; margin-top:20px; cursor:pointer; text-transform:uppercase; } /* EOF files.css */ /** * tabs.css */ .z-tabs.vertical { margin: auto; padding: 5px 0px; clear: both; color: #333; font: 12px/1.7em "Helvetica Neue",Helvetica,Arial,sans-serif; } .z-tabs.vertical > ul.z-tabs-nav, .z-tabs.vertical > ul.z-tabs-nav > li, .z-tabs.vertical > .z-container{border-color: #ddd; border-style: solid;} .z-tabs.vertical > ul.z-tabs-nav { float: left; /*width: 210px;*/ /* display: block;*/ position: relative; top: 0; border-width: 1px 0 1px 1px; border-right-width: 0; /*margin: auto 0 !important;*/ margin-top:0; margin-bottom:0; padding: 0; } .z-tabs.vertical.top-left > ul.z-tabs-nav{ margin-left:0; margin-right: -1px;} .z-tabs.vertical.top-right > ul.z-tabs-nav{ margin-right:0; margin-left: -1px;} .z-tabs.vertical > ul.z-tabs-nav > li { background: #F9F9F9; border-width: 0 0 1px 0; list-style-type: none; margin: auto; min-width: 100%; padding: 0px; overflow:hidden; } .z-tabs.vertical > ul.z-tabs-nav > li > a.z-link { text-decoration: none !important; border-bottom-width: 0; outline: 0; color: #333; text-decoration: none; font-size: 1.11em; position: relative; margin:0 14px; font-weight: bold; } .z-tabs.vertical > ul.z-tabs-nav > li, .z-tabs.vertical > ul.z-tabs-nav > li > a.z-link{ cursor: hand; cursor: pointer; display: block; } .z-tabs.vertical > ul.z-tabs-nav > li.z-active , .z-tabs.vertical > ul.z-tabs-nav > li.z-active > a.z-link{ cursor:default; } .z-tabs.vertical > ul.z-tabs-nav > li.z-active { border-right-width: 0; z-index: 10; background: white; position: relative; font-weight: bold; } .z-tabs.vertical > ul.z-tabs-nav > li.z-first.z-active{border-bottom-width: 1px;} .z-tabs.vertical > ul.z-tabs-nav > li.z-last{border-bottom-width: 0;} .z-tabs.vertical > .z-container { /*margin-left: 210px;*/ border-width: 1px; background: white; min-height: 158px; position: relative; /* z-index: 9;*/ font-size: 1.2em; } .z-tabs.vertical > .z-container > .z-content{display: none; padding: 1.4em 2em;background: none;} .z-tabs.vertical > .z-container > h5 { font-weight: normal; } .z-tabs.vertical > .z-container > h4 { /*text-shadow: 0px 1px 1px #F2F1F0;*/ border-bottom: 1px dotted #EEEDED; padding-top: 15px; padding-bottom: 5px; } .ie7 body .z-tabs.vertical.top-left > ul.z-tabs-nav{ margin-right: 0;} .ie7 body .z-tabs.vertical.top-right > ul.z-tabs-nav{ margin-left: 0;} .ie7 body .z-tabs.vertical.top-left > ul > li, .ie7 body .z-tabs.vertical.top-left > ul > li > .z-link, .ie7 body .z-tabs.vertical.top-left > ul { z-index: 10 !important; } .ie7 body .z-tabs.vertical.top-left > ul > li.z-active { border-right: 1px solid #fff !important; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Vertical Rounded Cornors ========================================================================== */ .z-tabs.vertical.z-rounded > .z-container { -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; -khtml-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; } .z-tabs.vertical.z-rounded > ul.z-tabs-nav { -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -khtml-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } .z-tabs.vertical.z-rounded > ul.z-tabs-nav > li.z-first, .z-tabs.vertical.z-rounded > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -khtml-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } .z-tabs.vertical.z-rounded > ul.z-tabs-nav > li.z-last, .z-tabs.vertical.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Vertical Shadows ========================================================================== */ .z-tabs.vertical.z-shadows > ul.z-tabs-nav, .z-tabs.vertical.z-shadows > .z-container { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.125); -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.125); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.125); } .z-tabs.vertical.z-shadows > ul.z-tabs-nav > li { -webkit-box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px -3px rgba(0, 0, 0, 0.15); } /*.z-tabs.vertical.top-right.z-shadows > ul.z-tabs-nav > li:not(.z-active){box-shadow: inset 2px 2px 8px rgba(111, 111, 111, .05);} .z-tabs.vertical.top-left.z-shadows > ul.z-tabs-nav > li:not(.z-active){box-shadow: inset -2px 2px 8px rgba(111, 111, 111, .05);}*/ /*#endregion*/ /*#region ========================================================================== Zozo Tabs Vertical Positioning ========================================================================== */ .z-tabs.vertical.top-right > ul.z-tabs-nav{float: right;border-width: 1px 1px 1px 0;} /*.z-tabs.vertical.top-right > .z-container{margin-left: 0;margin-right: 210px;}*/ .z-tabs.vertical.z-rounded.top-right > ul.z-tabs-nav { -webkit-border-radius: 0 6px 6px 0; -moz-border-radius: 0 6px 6px 0; -khtml-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; } .z-tabs.vertical.z-rounded.top-right > ul.z-tabs-nav > li.z-first, .z-tabs.vertical.z-rounded.top-right > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -khtml-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } .z-tabs.vertical.z-rounded.top-right > ul.z-tabs-nav > li.z-last, .z-tabs.vertical.z-rounded.top-right > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .z-tabs.vertical.z-rounded.top-right > .z-container { -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -khtml-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } .ie7 body .z-tabs.vertical.top-right > ul.z-tabs-nav > li.z-active { border-right-width: 0 !important; border-left: 1px solid #fff !important; left:-1px; } .ie7 body .z-tabs.vertical.top-right > ul.z-tabs-nav > li, .ie7 body .z-tabs.vertical.top-right > ul { z-index: 10 !important; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Horizontal (Common) ========================================================================== */ .z-tabs.horizontal { /*padding: 40px 0px;*/ clear: both; color: #333; font: 12px/1.7em "Helvetica Neue",Helvetica,Arial,sans-serif; } .z-tabs.horizontal > ul.z-tabs-nav, .z-tabs.horizontal > ul.z-tabs-nav > li, .z-tabs.horizontal > .z-container{border-color: #ddd;border-style: solid;} .z-tabs.horizontal > ul.z-tabs-nav { margin: 0; padding: 0; border: 0; outline: 0; text-decoration: none; font-size: 100%; list-style: none; } .z-tabs.horizontal > ul.z-tabs-nav > li { position: relative; border-width: 1px 1px 0; float: left; margin: 0 -1px 0 0; padding: 0; display: block; vertical-align: top; background: #F9F9F9; } .z-tabs.horizontal > ul.z-tabs-nav > li > a.z-link { border-bottom-width: 0; padding:12px 0; outline: 0; text-decoration: none; border-bottom-width: 0; outline: 0; color: #111; text-decoration: none; position: relative; line-height: 18px; text-align: center; font-weight: bold; text-transform: uppercase; } .z-tabs.horizontal > ul.z-tabs-nav > li:hover{outline: 0 none;text-decoration: none;} .z-tabs.horizontal > ul.z-tabs-nav > li.z-active { margin-bottom: -1px; padding-bottom: 1px; z-index: 1; font-weight: bold; } .z-tabs.horizontal > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal > ul.z-tabs-nav > li.z-active:hover {background: #fff; } .z-tabs.horizontal > .z-container { position: static; border-width: 1px; clear: both; width: 100%; min-height: 80px; background: #fff; zoom: 1; } .z-tabs.horizontal > ul.z-tabs-nav > li, .z-tabs.horizontal > ul.z-tabs-nav > li > a.z-link{ cursor: hand; cursor: pointer; display: block; } .z-tabs.horizontal > ul.z-tabs-nav > li.z-active , .z-tabs.horizontal > ul.z-tabs-nav > li.z-active > a.z-link{ cursor:default; } .z-tabs.horizontal > .z-container > .z-content {/*padding: 1.4em 2em version 3.0;*/background: none;display: none;} /*#endregion*/ /*#region ========================================================================== Zozo Tabs Horizontal Positioning ========================================================================== */ /* top-center */ .z-tabs.horizontal.top-center{width: 100%;overflow: hidden;padding-right:2px;/*version 3.0*/} .z-tabs.horizontal.top-center > ul.z-tabs-nav { clear: left; float: left; position: relative; left: 50%; text-align: center; } .z-tabs.horizontal.top-center > ul.z-tabs-nav > li { right: 50%; display: block; position: relative; float: left; } .z-tabs.horizontal.top-center > .z-container, .z-tabs.horizontal.bottom-center > .z-container { width:100%; /*version 3.0*/ /*margin-right: 1px;version 3.0*/ } .z-tabs.horizontal.top-right > .z-container { margin-right: 0; padding-right: 0; margin-left: 0; padding-left: 0; } /* top-right */ .z-tabs.horizontal.top-right > ul.z-tabs-nav { float: right; position: relative; padding: 0; margin: 0 -1px 0 0; } .z-tabs.horizontal.top-right > .z-container { margin-right: 0; padding-right: 0; margin-left: 0; padding-left: 0; } .ie7 body .z-tabs.horizontal.top-right > .z-container{ clear: none;} .ie7 body .z-tabs.horizontal.top-right{margin-right:2px;} /* bottom-left*/ .z-tabs.horizontal.bottom-left > ul.z-tabs-nav { position: relative; padding: 0; margin: -3px 0px 0 3px; margin: 0; } .z-tabs.horizontal.bottom-left > ul.z-tabs-nav > li{border-width: 0px 1px 1px;} .z-tabs.horizontal.bottom-left > ul.z-tabs-nav > li.z-active { margin-bottom: 0px; padding-bottom: 0px; margin-top: -1px; padding-top: 1px; } .z-tabs.horizontal.z-rounded.bottom-left > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded.bottom-left > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .z-tabs.horizontal.z-rounded.bottom-left > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded.bottom-left > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .z-tabs.horizontal.z-rounded.bottom-left > .z-container { -webkit-border-radius: 6px 6px 6px 0; -moz-border-radius: 6px 6px 6px 0; -khtml-border-radius: 6px 6px 6px 0; border-radius: 6px 6px 6px 0; } .z-tabs.horizontal.bottom-left > .z-container{padding: 0;margin: 0;} /* bottom-center*/ .z-tabs.horizontal.bottom-center{width: 100%;overflow:hidden;padding-right:2px; /*version 3.0*/} .z-tabs.horizontal.bottom-center > ul.z-tabs-nav { padding: 0; margin: 0; float: left; position: relative; left: 50%; text-align: center; } .z-tabs.horizontal.bottom-center > ul.z-tabs-nav > li { border-width: 0px 1px 1px; right: 50%; display: block; position: relative; float: left; } .z-tabs.horizontal.bottom-center > ul.z-tabs-nav > li.z-active { margin-bottom: 0px; padding-bottom: 0px; margin-top: -1px; padding-top: 1px; } .z-tabs.horizontal.z-rounded.bottom-center > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded.bottom-center > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .z-tabs.horizontal.z-rounded.bottom-center > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded.bottom-center > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .z-tabs.horizontal.z-rounded.bottom-center > .z-container { -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } .z-tabs.horizontal.bottom-center > .z-container{padding: 0;/*margin: 0; version 3.0*/} /* bottom-right*/ .z-tabs.horizontal.bottom-right > ul.z-tabs-nav { float: right; position: relative; padding: 0; margin: 0; margin-right: -1px; } .z-tabs.horizontal.bottom-right > ul.z-tabs-nav > li{ border-width: 0px 1px 1px;} .z-tabs.horizontal.bottom-right > ul.z-tabs-nav > li.z-active { margin-bottom: 0px; padding-bottom: 0px; margin-top: -1px; padding-top: 1px; } .z-tabs.horizontal.z-rounded.bottom-right > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded.bottom-right > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .z-tabs.horizontal.z-rounded.bottom-right > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded.bottom-right > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .z-tabs.horizontal.z-rounded.bottom-right .z-container { -webkit-border-radius: 6px 6px 0 6px; -moz-border-radius: 6px 6px 0 6px; -khtml-border-radius: 6px 6px 0 6px; border-radius: 6px 6px 0 6px; } .z-tabs.horizontal.bottom-right > .z-container{padding: 0;margin: 0;} .ie7 body .z-tabs.horizontal.bottom-right{margin-right:2px;} /* top compact*/ .z-tabs.horizontal.top-compact > ul.z-tabs-nav { padding: 0px; /*display: table; version 3.0*/ width: 100%; margin-left: -1px; padding-left: 1px; } .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li{ /*width: 150px;*/margin: 0 -2px 0 0;display: inline-block;} .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li.z-active{font-weight: normal; margin-bottom: -1px;padding-bottom: 1px;} .z-tabs.horizontal.top-compact > .z-container { margin: 0; padding: 0; /*version 3.0*/width: initial; margin-right: -2px !important; /*version 3.0*/ } .z-tabs.horizontal.z-rounded.top-compact > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded.top-compact > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -khtml-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } .z-tabs.horizontal.z-rounded.top-compact > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded.top-compact > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -khtml-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } .z-tabs.horizontal.z-rounded.top-compact > .z-container { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } /* version 3.0*/ .ie7 body .z-tabs.horizontal.top-compact > ul.z-tabs-nav > li.z-first{padding-left: 1px;} .ie7 body .z-tabs.horizontal.top-compact > ul.z-tabs-nav, .ie7 body .z-tabs.horizontal.top-compact { width: auto; } .ie7 .z-tabs.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li {margin-right:-3px} .ie7 .z-tabs.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li.z-last {margin-right:0} /* bottom compact*/ .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav { padding: 0px; /* display: table; version 3.0*/ width: 100%; margin-left: -1px; padding-left: 1px; } .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li { /*width: 150px;*/ margin: 0 -2px 0 0; display: inline-block; border-width: 0px 1px 1px; } .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li > a.z-link { padding-left: 0; padding-right: 0; } .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li.z-active { margin-top: -1px; padding-top: 1px; margin-bottom: 0px; padding-bottom: 0px; } .z-tabs.horizontal.bottom-compact > .z-container { margin: 0; padding: 0; width: initial; margin-right: -2px !important;/*version 3.0*/ } .z-tabs.horizontal.z-rounded.bottom-compact > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded.bottom-compact > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .z-tabs.horizontal.z-rounded.bottom-compact > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded.bottom-compact > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .z-tabs.horizontal.z-rounded.bottom-compact > .z-container { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -khtml-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .ie7 body .z-tabs.horizontal.bottom-compact > ul.z-tabs-nav > li.z-first{padding-left: 1px;} .ie7 body .z-tabs.horizontal.bottom > ul.z-tabs-nav { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Horizontal Rounded Cornors ========================================================================== */ .z-tabs.horizontal.z-rounded > .z-container { -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -khtml-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .z-tabs.horizontal.z-rounded > ul.z-tabs-nav > li.z-first, .z-tabs.horizontal.z-rounded > ul.z-tabs-nav > li.z-first > a.z-link { -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -khtml-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } .z-tabs.horizontal.z-rounded > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -khtml-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } .z-tabs.horizontal.top-left.z-rounded > .z-container { -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -khtml-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } .z-tabs.horizontal.top-center.z-rounded > .z-container { -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -khtml-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; } .z-tabs.horizontal.top-right.z-rounded > .z-container { -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; -khtml-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } /*responsive*/ .z-tabs.horizontal.responsive.top-left.z-rounded > .z-container, .z-tabs.horizontal.responsive.top-center.z-rounded > .z-container, .z-tabs.horizontal.responsive.top-right.z-rounded > .z-container { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } .z-tabs.horizontal.responsive.bottom-left.z-rounded > .z-container, .z-tabs.horizontal.responsive.bottom-center.z-rounded > .z-container, .z-tabs.horizontal.responsive.bottom-right.z-rounded > .z-container { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -khtml-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .z-tabs.horizontal.responsive.top-left.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.top-left.z-rounded > .z-tabs-mobile > li, .z-tabs.horizontal.responsive.top-center.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.top-center.z-rounded > .z-tabs-mobile > li, .z-tabs.horizontal.responsive.top-right.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.top-right.z-rounded > .z-tabs-mobile > li { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -khtml-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .z-tabs.horizontal.responsive.bottom-left.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.bottom-left.z-rounded > .z-tabs-mobile > li, .z-tabs.horizontal.responsive.bottom-center.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.bottom-center.z-rounded > .z-tabs-mobile > li, .z-tabs.horizontal.responsive.bottom-right.z-rounded > .z-tabs-mobile, .z-tabs.horizontal.responsive.bottom-right.z-rounded > .z-tabs-mobile > li { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Horizontal Shadows ========================================================================== */ .z-tabs.horizontal.z-shadows > .z-container { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .125); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .125); box-shadow: 0px 0px 3px rgba(0, 0, 0, .125); } .z-tabs.horizontal.z-shadows > ul.z-tabs-nav > li{box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, .1);} .z-tabs.horizontal.top-left.z-shadows > ul.z-tabs-nav li.z-first, .z-tabs.horizontal.top-compact.z-shadows > ul.z-tabs-nav > li.z-first{box-shadow: -3px 1px 1px -3px rgba(0, 0, 0, .2);} .z-tabs.horizontal.top-right.z-shadows > ul.z-tabs-nav > li.z-last, .z-tabs.horizontal.top-compact.z-shadows > ul.z-tabs-nav > li.z-last{box-shadow: 3px 1px 1px -3px rgba(0, 0, 0, .2);} /*#endregion*/ /*#region ========================================================================== Zozo Tabs Underlined ========================================================================== */ /* underlined reset*/ .z-tabs.underlined, .z-tabs.underlined > ul.z-tabs-nav, .z-tabs.underlined > ul.z-tabs-nav > li, .z-tabs.underlined > ul.z-tabs-nav > li.z-first, .z-tabs.underlined > ul.z-tabs-nav > li.z-last, .z-tabs.underlined > ul.z-tabs-nav > li.z-first.z-active, .z-tabs.underlined > ul.z-tabs-nav > li.z-last.z-active, .z-tabs.underlined > ul.z-tabs-nav > li.z-active, .z-tabs.underlined > ul.z-tabs-nav > li:hover, .z-tabs.underlined > ul.z-tabs-nav > li > a.z-link, .z-tabs.underlined > ul.z-tabs-nav > li > a.z-link:hover, .z-tabs.underlined > .z-container { border-width: 0; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; background:none; filter:none; } .z-tabs.underlined.horizontal.top-left > ul.z-tabs-nav > li.z-first, .z-tabs.underlined.horizontal.bottom-left > ul.z-tabs-nav > li.z-first{margin-left:0;} .z-tabs.underlined.horizontal.top-right > ul.z-tabs-nav > li.z-last, .z-tabs.underlined.horizontal.bottom-right > ul.z-tabs-nav > li.z-last{margin-right:0;} .z-tabs.underlined.horizontal > ul.z-tabs-nav > li, .z-tabs.underlined.horizontal > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.horizontal > ul.z-tabs-nav > li:hover{filter:none;background: transparent;padding:0;margin-left:16px;} .z-tabs.underlined.horizontal > ul.z-tabs-nav > li{opacity: 0.80;} .z-tabs.underlined.horizontal > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.horizontal > ul.z-tabs-nav > li:hover{opacity: 1;} /*underlined horizontal top*/ .z-tabs.horizontal.underlined > ul.z-tabs-nav{border-width: 0;} /**/.z-tabs.horizontal.underlined > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined > ul.z-tabs-nav > li.z-active{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-bottom: 5px solid} .z-tabs.horizontal.underlined > ul.z-tabs-nav > li > a.z-link{text-shadow: 0 1px 1px white;color: #333} .z-tabs.horizontal.underlined > .z-container{border-width: 1px 0 0 0;} .z-tabs.horizontal.underlined >.z-container > .z-content .z-content-inner {padding: 1.4em 1em;} /*underlined horizontal bottom*/ .z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li, .z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li, .z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li, .z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li{background: transparent; border-width: 0;margin:0;margin-left:16px;padding:0;} .z-tabs.horizontal.underlined.bottom-left > .z-container, .z-tabs.horizontal.underlined.bottom-center > .z-container, .z-tabs.horizontal.underlined.bottom-right > .z-container, .z-tabs.horizontal.underlined.bottom-compact > .z-container{border-width: 0 0 1px 0;} .z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li:hover{background: transparent; border-width: 0;padding:0;color:#111;} .z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav > li.z-active{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-width:3px 0 0 0;background: #FCFCFC;} .z-tabs.horizontal.underlined > .z-container > .z-content {padding: 1.4em 0;} /* underlined vertical*/ .z-tabs.vertical.underlined > ul.z-tabs-nav > li, .z-tabs.vertical.underlined > ul.z-tabs-nav > li:hover{filter:none;background: transparent;border-width: 0 1px 0 0;margin:0;padding:0;} .z-tabs.vertical.underlined > ul.z-tabs-nav > li > a.z-link{text-shadow: 0 1px 1px white;color: #333} .z-tabs.vertical.underlined > .z-container{border-width: 0;} .z-tabs.vertical.underlined >.z-container > .z-content .z-content-inner {padding: 0 2em;} .z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li, .z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li:hover{filter:none;background: transparent;border-width: 0 0 0 1px;margin:0;padding:0;} .z-tabs.vertical.underlined.top-left > ul.z-tabs-nav > li.z-active, .z-tabs.vertical.underlined.top-left > ul.z-tabs-nav > li:hover{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-right: 3px solid;background: #eee;} .z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li.z-active, .z-tabs.vertical.underlined.top-right > ul.z-tabs-nav > li:hover{font-weight: bold; margin-bottom: 0;padding-bottom: 0;border-left: 3px solid;background: #eee;} .z-tabs.vertical.underlined.top-right > ul.z-tabs-nav{border-width:0;} .z-tabs.vertical.underlined > .z-container > .z-content {padding: 0 1.6em;} .ie7 body .z-tabs.underlined.vertical.top-right > ul.z-tabs-nav > li.z-active { border-right-width: 0 !important; border-left: 3px solid #444 !important; left:-1px; } .ie7 body .z-tabs.underlined.vertical.top-left > ul.z-tabs-nav > li.z-active { border-right: 3px solid #444 !important; } .z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li > a.z-link {padding: 6px 6px;} .z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li > a.z-link{padding: 8px 8px;} .z-tabs.horizontal.underlined.medium > ul.z-tabs-nav > li > a.z-link{padding: 10px 10px;} .z-tabs.horizontal.underlined.large > ul.z-tabs-nav > li > a.z-link{padding: 10px 12px;} .z-tabs.horizontal.underlined.xlarge > ul.z-tabs-nav > li > a.z-link{padding: 12px 14px;} .z-tabs.horizontal.underlined.xxlarge > ul.z-tabs-nav > li > a.z-link{padding: 14px 16px;} .z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined.mini > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li:hover, .z-tabs.horizontal.underlined.small > ul.z-tabs-nav > li.z-active {border-bottom-width: 2px;} .z-tabs.underlined.orange > .z-container,.z-tabs.underlined.orange > ul.z-tabs-nav > li { border-color:#e6e6e6;} .z-tabs.underlined.orange > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.orange.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.orange.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.orange > ul.z-tabs-nav > li:hover{ border-color:#FD9C00; border-image: linear-gradient(to right,#ffb641 0%, #FD9C00 50%, #ffb641 100%) 1; } .z-tabs.underlined.green > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.green.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.green.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.green > ul.z-tabs-nav > li:hover{border-color:#093;} .z-tabs.underlined.white > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.white.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.white.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.white > ul.z-tabs-nav > li:hover{border-color:#D8D8D8;} .z-tabs.underlined.crystal > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.crystal.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.crystal.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.crystal > ul.z-tabs-nav > li:hover{border-color:#999;} .z-tabs.underlined.silver > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.silver.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.silver.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.silver > ul.z-tabs-nav > li:hover{border-color:#777;} .z-tabs.underlined.gray > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.gray.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.gray.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.gray > ul.z-tabs-nav > li:hover{border-color:#333;} .z-tabs.underlined.black > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.black.vertical > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.black.vertical > ul.z-tabs-nav > li:hover, .z-tabs.underlined.black > ul.z-tabs-nav > li:hover{border-color:black;} /* orange */ .z-tabs.orange > ul.z-tabs-nav, .z-tabs.orange > ul.z-tabs-nav > li, .z-tabs.orange > .z-container{border-color: #D64817; border-style: solid;} .z-tabs.orange > ul.z-tabs-nav > li { background: #F2825B; background: -moz-linear-gradient(top, #F2825B 0%, #E55B2B 50%, #F07146 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2825B), color-stop(50%,#E55B2B), color-stop(100%,#F07146)); background: -webkit-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: -o-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: -ms-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: linear-gradient(to bottom, #F2825B 0%,#E55B2B 50%,#F07146 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 ); } .z-tabs.orange > ul.z-tabs-nav > li:hover { background: #F2825B; background: -moz-linear-gradient(top, #F2825B 0%, #E55B2B 50%, #F07146 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2825B), color-stop(50%,#E55B2B), color-stop(100%,#F07146)); background: -webkit-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: -o-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: -ms-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%); background: linear-gradient(to bottom, #F2825B 0%,#E55B2B 50%,#F07146 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=0 ); } .z-tabs.orange > ul.z-tabs-nav > li.z-active{ background: #fff;text-shadow: 0 1px 1px white;color: Black;filter: none;} .z-tabs.orange > ul.z-tabs-nav > li > a.z-link {color: white;text-shadow: 0 1px #5E1902;} .z-tabs.orange > ul.z-tabs-nav > li.z-active > a.z-link {color: black;text-shadow: 0 1px white;} /*#region ========================================================================== Zozo Tabs Sizes ========================================================================== */ /**/ .z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link, .z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.mini > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.small > ul.z-tabs-nav > li > a.z-link {font-weight: inherit;} .z-tabs.vertical.mini > ul.z-tabs-nav > li.z-active > a.z-link, .z-tabs.vertical.small > ul.z-tabs-nav > li.z-active > a.z-link, .z-tabs.horizontal.mini > ul.z-tabs-nav > li.z-active > a.z-link, .z-tabs.horizontal.small > ul.z-tabs-nav > li.z-active > a.z-link {font-weight: bold;} /* version 4.0*/ .z-tabs.vertical.mini > ul.z-tabs-nav > li > a.z-link {height: 34px;line-height: 32px;margin:0 10px;font-size: 11px;} .z-tabs.vertical.small > ul.z-tabs-nav > li > a.z-link {height: 40px;line-height: 38px;margin:0 12px;font-size: 11px;} .z-tabs.vertical.medium > ul.z-tabs-nav > li > a.z-link {height: 46px;line-height: 44px;margin:0 14px;font-size: 12px;} .z-tabs.vertical.large > ul.z-tabs-nav > li > a.z-link {height: 52px;line-height: 50px;margin:0 18px;font-size: 13px;} .z-tabs.vertical.xlarge > ul.z-tabs-nav > li > a.z-link {height: 58px;line-height: 56px;margin:0 20px;font-size: 13px;} .z-tabs.vertical.xxlarge > ul.z-tabs-nav > li > a.z-link{height: 62px;line-height: 66px;margin:0 22px 0 20px;font-size: 14px;} .z-tabs.vertical.mini > ul.z-tabs-nav{min-width: 180px;width:25%;} .z-tabs.vertical.small > ul.z-tabs-nav {min-width: 180px;width:25%;} .z-tabs.vertical.medium > ul.z-tabs-nav {min-width: 200px;width:25%;} .z-tabs.vertical.large > ul.z-tabs-nav {min-width: 220px;width:25%;} .z-tabs.vertical.xlarge > ul.z-tabs-nav {min-width: 240px;width:25%;} .z-tabs.vertical.xxlarge > ul.z-tabs-nav {min-width: 260px;width:25%;} .z-tabs.horizontal.mini > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 7px 20px;} .z-tabs.horizontal.small > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 10px 20px;} .z-tabs.horizontal.medium > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 13px 24px;} .z-tabs.horizontal.large > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 16px 28px;} .z-tabs.horizontal.xlarge > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 19px 32px;/*padding:20px 40px 8px 20px*/} .z-tabs.horizontal.xxlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 36px;} /**/ .z-tabs.horizontal.top-compact.mini > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 7px 10px;} .z-tabs.horizontal.top-compact.small > ul.z-tabs-nav > li > a.z-link {font-size: 11px;padding: 10px 11px;} .z-tabs.horizontal.top-compact.medium > ul.z-tabs-nav > li > a.z-link {font-size: 12px;padding: 13px 12px;} .z-tabs.horizontal.top-compact.large > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 16px 13px;} .z-tabs.horizontal.top-compact.xlarge > ul.z-tabs-nav > li > a.z-link {font-size: 13px;padding: 19px 14px;} .z-tabs.horizontal.top-compact.xxlarge > ul.z-tabs-nav > li > a.z-link {font-size: 14px;padding: 22px 15px;} /*#endregion*/ /*#region ========================================================================== Zozo Tabs Multiline ========================================================================== */ .z-tabs.vertical.z-multiline > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline > ul.z-tabs-nav > li > a.z-link { line-height: 18px; display: block; margin: 0px; padding: 16px 20px 16px 20px; text-align: left; text-transform: uppercase; } .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span, .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span { display: block; font-size: .9em; font-weight: normal; text-transform: none; text-align:left; line-height: 1.85em; } .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon, .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon { line-height: 1em; } /* .z-tabs.z-multiline.large > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-headline2{margin-top:1px;} .z-tabs.z-multiline.xlarge > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-headline2{margin-top:2px;} .z-tabs.z-multiline.xxlarge > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-headline2{margin-top:3px;} */ .z-tabs.z-multiline.mini > ul.z-tabs-nav > li > a.z-link {padding: 12px 28px 12px 12px;height: 32px;} .z-tabs.z-multiline.small > ul.z-tabs-nav > li > a.z-link {padding: 14px 32px 14px 14px;height: 32px;} .z-tabs.z-multiline.medium > ul.z-tabs-nav > li > a.z-link {padding: 16px 36px 16px 16px;height: 32px;} .z-tabs.z-multiline.large > ul.z-tabs-nav > li > a.z-link {padding: 17px 40px 17px 17px;height: 32px;} .z-tabs.z-multiline.xlarge > ul.z-tabs-nav > li > a.z-link {padding: 18px 44px 18px 18px;height: 32px;} .z-tabs.z-multiline.xxlarge > ul.z-tabs-nav > li > a.z-link{padding: 18px 48px 18px 18px;height: 32px;} .z-tabs.horizontal.z-multiline.top-compact.mini > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.mini > ul.z-tabs-nav > li > a.z-link {padding: 12px} .z-tabs.horizontal.z-multiline.top-compact.small > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.small > ul.z-tabs-nav > li > a.z-link {padding: 14px} .z-tabs.horizontal.z-multiline.top-compact.medium > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.medium > ul.z-tabs-nav > li > a.z-link {padding: 16px} .z-tabs.horizontal.z-multiline.top-compact.large > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.large > ul.z-tabs-nav > li > a.z-link {padding: 17px} .z-tabs.horizontal.z-multiline.top-compact.xlarge > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.xlarge > ul.z-tabs-nav > li > a.z-link {padding: 18px} .z-tabs.horizontal.z-multiline.top-compact.xxlarge > ul.z-tabs-nav > li > a.z-link, .z-tabs.horizontal.z-multiline.bottom-compact.xxlarge > ul.z-tabs-nav > li > a.z-link {padding: 18px} /*#endregion*/ /*#region ========================================================================== Zozo Tabs Responsive ========================================================================== */ /* animation slide tabs */ .z-tabs.horizontal.z-slide > .z-container, .z-tabs.vertical.z-slide > .z-container, .z-tabs > .z-container{overflow: hidden;position: relative;} /**/ .z-tabs.horizontal.z-slide > .z-container > .z-content, .z-tabs.vertical.z-slide > .z-container > .z-content, .z-tabs > .z-container > .z-content, .z-tabs > .z-container.z-animating > .z-content { position: absolute; width: 100%; height: 100%; overflow: hidden; padding:0; z-index:7; } .z-tabs.horizontal.z-slide > .z-container > .z-content.z-active, .z-tabs.vertical.z-slide > .z-container > .z-content.z-active { z-index:8; } .z-tabs.vertical > .z-container > .z-content > .z-content-inner, .z-tabs.horizontal > .z-container > .z-content .z-content-inner{padding:25px 25px 25px;padding: 1.4em 2em;height: auto;} /*responsive normal style */ .z-tabs > ul.z-tabs-nav.z-tabs-mobile{display: none;} .z-tabs.horizontal > ul.z-tabs-nav.z-tabs-mobile, .z-tabs.horizontal > ul.z-tabs-nav.z-tabs-mobile > li {width: 100%;float:none;} .z-tabs.horizontal.responsive > ul.z-tabs-nav.z-tabs-desktop > li {float: left;margin: 0 -2px 0 0;} .z-tabs.horizontal.responsive > ul.z-tabs-nav.z-tabs-desktop > li.z-last:nth-child(odd){width: 100%;} .ie7 .z-tabs.horizontal.responsive > ul.z-tabs-nav.z-tabs-desktop > li {margin-right:-3px} .z-tabs.horizontal.responsive > ul.z-tabs-nav {width: 100%;} .z-tabs.horizontal.responsive.top-right > ul.z-tabs-nav, .z-tabs.horizontal.responsive.bottom-right > ul.z-tabs-nav { margin:0;} .z-tabs.horizontal.responsive > ul.z-tabs-nav > li.z-active {margin-bottom: 0px;padding-bottom: 0px;z-index: initial;} .z-tabs.horizontal.responsive.bottom-left > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.responsive.bottom-center > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.responsive.bottom-right > ul.z-tabs-nav > li.z-active{margin-top: 0px;margin-bottom: 0px;padding:0; z-index: initial;} .z-tabs.horizontal.responsive > ul.z-tabs-nav.z-tabs-desktop {display: block; width: 100%;} /*responsive underlined style */ .z-tabs.horizontal.responsive.underlined > ul.z-tabs-nav {border-width:0;} .z-tabs.horizontal.responsive.underlined > ul.z-tabs-nav > li.z-active, .z-tabs.horizontal.responsive.underlined > ul.z-tabs-nav > li:hover {border-top-width:0;border-bottom-width:0;} .z-tabs.underlined.horizontal > ul.z-tabs-nav.z-tabs-mobile > li {margin-left: 0;} .z-tabs.underlined.horizontal > ul.z-tabs-nav.z-tabs-mobile > li a.z-link{padding-left: 0;} .z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li, .z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li.z-active, .z-tabs.underlined.horizontal.top-compact > ul.z-tabs-nav.z-tabs-desktop > li:hover {margin-left: 0;} /**/ .z-tabs.horizontal.underlined.bottom-left > ul.z-tabs-nav.z-tabs-desktop > li, .z-tabs.horizontal.underlined.bottom-center > ul.z-tabs-nav.z-tabs-desktop > li, .z-tabs.horizontal.underlined.bottom-right > ul.z-tabs-nav.z-tabs-desktop > li, .z-tabs.horizontal.underlined.bottom-compact > ul.z-tabs-nav.z-tabs-desktop > li{margin-left: 0;} .z-tabs.responsive.top-left.z-rounded > ul.z-tabs-desktop > li.z-right, .z-tabs.responsive.top-left.z-rounded > ul.z-tabs-desktop > li.z-right > a.z-link { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -khtml-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-first, .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-first > a.z-link { -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-left, .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-left > a.z-link { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -khtml-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-right, .z-tabs.responsive.z-rounded.bottom-left > ul.z-tabs-nav > li.z-right > a.z-link { -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; -khtml-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } /*#endregion*/ /*#region ========================================================================== Zozo Tabs Mobile Menu ========================================================================== */ /*reset*/ .z-tabs.mobile > ul.z-tabs-nav, .z-tabs.mobile > ul.z-tabs-nav > li, .z-tabs.mobile > ul.z-tabs-nav > li.z-active, .z-tabs.mobile > .z-container, .z-tabs.mobile > .z-container > .z-content { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow:none; } /*mobile horizontal style*/ .z-tabs.mobile.horizontal > ul.z-tabs-nav > li.z-active { margin-bottom: 0; padding-bottom: 0; } .z-tabs.mobile.horizontal > ul.z-tabs-nav > li { border-width: 0px 0px 1px 0px; } .z-tabs.mobile.horizontal > ul.z-tabs-nav > li > a.z-link { text-align: left; } .z-tabs.mobile.horizontal > ul.z-tabs-nav.z-tabs-desktop > li.z-last { border-bottom-width: 0; } .z-tabs.mobile.horizontal > ul.z-tabs-nav > li { margin: 0; } .z-tabs.mobile.z-shadows > ul.z-tabs-mobile { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset; } /*underlined tabs*/ .z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li, .z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li.z-active, .z-tabs.mobile.underlined.horizontal > ul.z-tabs-nav > li:hover { margin-left: 0; } .z-tabs.mobile.horizontal.underlined > .z-container {border-width: 0;} .z-tabs.mobile.horizontal.underlined > ul.z-tabs-nav > li:hover, .z-tabs.mobile.horizontal.underlined > ul.z-tabs-nav > li.z-active {border-bottom-width: 1px;} /* mobile vertical */ /* general*/ .z-tabs.mobile > ul.z-tabs-nav.z-tabs-desktop > li { float: none; display:block; } .z-tabs.mobile.vertical > ul.z-tabs-nav, .z-tabs.mobile.horizontal > ul.z-tabs-nav { width: auto; border-width: 1px 1px 0 1px; float: none; border-bottom-width: 1px; display:block; padding:0; margin:0; min-width:0 !important; } .z-tabs.mobile.vertical ul.z-tabs-mobile, .z-tabs.mobile.horizontal ul.z-tabs-mobile { border-bottom-width: 0px; } .z-tabs.mobile.vertical ul.z-tabs-mobile > li, .z-tabs.mobile.horizontal ul.z-tabs-mobile > li{ float: none; border-width: 0px; } .z-tabs.mobile > .z-container { margin-top: 2px; width: auto; } .z-tabs.mobile.horizontal.bottom > .z-container {margin-bottom: 4px;} .z-tabs.mobile.vertical.z-rounded > .z-container, .z-tabs.mobile.horizontal.z-rounded > .z-container { -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } .z-tabs.mobile > ul.z-tabs-desktop{ height:auto; opacity:1; visibility:visible; -webkit-transition: opacity 400ms ease-in-out; -moz-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } .z-tabs.mobile > ul.z-tabs-desktop.z-hide-menu { opacity:0; height:0; visibility: hidden; } /*arrow mobile icons*/ .z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > span.z-title { margin-left:6px; opacity:1; } .z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-title { margin-left:6px; opacity:1; } .z-tabs.mobile.horizontal > ul.z-tabs-nav > li > a.z-link, .z-tabs.mobile.vertical > ul.z-tabs-nav > li > a.z-link { padding-left: 0 !important; padding-right: 0 !important; margin: 0 18px !important; } .z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-arrow { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); opacity:1; } .z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > span.z-arrow { right: -10px; position: absolute; opacity: .25; background: url(../img/z-tabs-icons.png) no-repeat top left; background-position: -132px -4px; width: 25px; height: 40px; top: 50%; margin-top: -23px; /* CSS3 transition */ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); } .z-tabs.mobile > ul.z-tabs-mobile > li > a.z-link > i.z-icon-menu { background: url(../img/z-tabs-icons.png) no-repeat top left; background-position: -1470px -3px; width: 28px; height: 30px; margin-top: -24px; margin-left: -6px; display: inline-block; } .z-tabs.mobile > ul.z-tabs-mobile.z-state-closed > li > a.z-link > span.z-arrow {right: 0px;} .z-tabs.z-icons-light.mobile > ul.z-tabs-mobile > li > a.z-link > i.z-icon-menu {background-position: -1470px -60px;} .z-tabs.z-icons-light.mobile > ul.z-tabs-mobile > li > a.z-link > span.z-arrow {background-position: -132px -61px;} /*closed*/ .z-tabs.mobile.vertical > ul.z-tabs-mobile.z-state-closed, .z-tabs.mobile.horizontal > ul.z-tabs-mobile.z-state-closed { border-width: 1px; } .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed { -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed > li, .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile.z-state-closed > li > a.z-link, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed > li, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile.z-state-closed > li > a.z-link { -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } /*open*/ .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -khtml-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-mobile > li, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-mobile > li { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -khtml-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-nav > li.z-last, .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-nav > li.z-last, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-nav > li.z-last > a.z-link { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .z-tabs.mobile.vertical.z-rounded > ul.z-tabs-desktop, .z-tabs.mobile.horizontal.z-rounded > ul.z-tabs-desktop { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } /* mobile themes*/ .z-tabs.mobile.underlined > ul.z-tabs-nav > li > a.z-link {text-transform: uppercase;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .z-tabs.mobile.underlined > ul.z-tabs-desktop > li, .z-tabs.mobile.underlined > ul.z-tabs-desktop > li > a { -moz-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out; -o-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out; -webkit-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out; -ms-transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out; transition: background-color 200ms ease-out, color 200ms ease-out,text-shadow 200ms ease-out; } /*style 2*/ .z-tabs.underlined.mobile > ul.z-tabs-nav > li, .z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-last, .z-tabs.underlined.mobile > ul.z-tabs-nav > li:hover, .z-tabs.underlined.mobile > ul.z-tabs-nav > li.z-last:hover { border-color: #E6E6E6; background: #fff; border-width: 0 0 1px 0; opacity: 1; border-style: dotted; } .z-tabs.underlined.horizontal.mobile > ul.z-tabs-nav > li.z-last {border-width: 0 0 1px 0; } .z-tabs.underlined.mobile > ul.z-tabs-nav.z-tabs-mobile, .z-tabs.underlined.mobile > ul.z-tabs-nav.z-tabs-desktop{border-width:0;} .z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li.z-active, .z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li:hover {background: #FAFAFA;} .z-tabs.underlined.mobile.hover > ul.z-tabs-nav.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover > ul.z-tabs-desktop > li:hover > a{color: #333;text-shadow: 1px 0px 1px rgba(175, 175, 175, 0.25);} .z-tabs.underlined.mobile.m-red > ul.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover.m-red > ul.z-tabs-desktop > li:hover > a{color: #DD4B39;} .z-tabs.underlined.mobile.m-blue > ul.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover.m-blue > ul.z-tabs-desktop > li:hover > a{color: #00B0D8;} .z-tabs.underlined.mobile.m-deepblue > ul.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover.m-deepblue > ul.z-tabs-desktop > li:hover > a{color: #1E69DE;} .z-tabs.underlined.mobile.m-orange > ul.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover.m-orange > ul.z-tabs-desktop > li:hover > a{color: #FD9C00;} .z-tabs.underlined.mobile.m-green > ul.z-tabs-desktop > li.z-active > a, .z-tabs.underlined.mobile.hover.m-green > ul.z-tabs-desktop > li:hover > a{color: #093;} /*#endregion*/ /*#region ========================================================================== Mobile Fixes ========================================================================== */ /* Prevent any object from being highlighted upon touch event*/ .z-tabs .z-tabs *, .z-tabs ul, .z-tabs ul li, .z-tabs ul li a, .z-tabs .z-container .z-content {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;outline: none;} /*#endregion*/ /*#region ========================================================================== Zozo Tabs Theird Party Support ========================================================================== */ /* Font Awesome */ .z-tabs > ul.z-tabs-nav > li > a.z-link i { font-size: 16px; display: inline; width: auto; height: auto; line-height: normal; } .z-tabs > ul.z-tabs-nav > li > a.z-link > span.z-icon, .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-desktop > li > a.z-link > span.z-icon, .z-tabs.z-multiline > ul.z-tabs-nav.z-tabs-mobile > li > a.z-link > span > span.z-icon { width: 20px; display: inline-block; font-size: inherit; font-weight: normal; text-transform: initial; text-align: left; } .store .store-footer > div > ul > li > a { font-size:14px; } svg.logo-footer { display: block; margin-top:10px; } /* Large desktop */ @media (min-width: 1200px) { .container { max-width:1500px; } .table.table2x.overview > div > div img { height:auto !important; } } /* Portrait tablet to landscape and desktop (IPad) */ @media (min-width: 768px) and (max-width: 979px) { .container { width:600px; margin:0px 30px 0px 30px; } ul.clients { width:512px; margin:0px auto; } ul.clients li { width:128px; } .table > div > div.sidebar, .table > div > div.content { padding:30px; } .table > div > div.sidebar { width:150px; } .form { } .form .group { position:relative; zoom:1; display:block; margin-bottom:10px; width:100%; } .form .group:after { content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0px; font-size:0px; } .form .group label { display:block; float:none; clear:both; text-align:left; padding:5px 10px 5px 0px; } .form .group input[type="text"] { display:block; float:none; clear:both; width:330px; padding:15px; border:1px solid #b1b1b1; font-size:12px; } .form .group input[type="text"]:focus { -moz-box-shadow: 0px 0px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 0px 0px 4px #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc'); } .form .group textarea { display:block; float:none; overflow:auto; width:200px; height:200px; padding:10px; border:1px solid #b1b1b1; font-size:12px; } .form .group-options { float:none; width:180px; } .form .group-options label { position:relative; cursor:pointer; float:none; clear:both; text-align:left; padding:2px 0px 2px 20px; } .form .group-options label input { display:block; position:absolute; top:4px; left:0px; } .form .group input[type="text"][data-helpdesk-subject] { width:96%; padding:2%; } .form .group textarea[name="conversation_content"][data-helpdesk-content] { width:96%; padding:2%; max-width:100%; min-height:400px; } .table.table2x.overview > div > div img { height:auto !important; } header nav.nav > ul > li > a { font-size:10px; } } /* Custom screen */ @media (max-width: 1156px) { .container { width:auto; margin:0px auto; padding:0px 20px 0px 20px; } div[data-grid] > div { width:340px; margin:0px auto; } div[data-grid] > div:first-child { margin:0px auto; } ul.clients { width:620px; } .table.table2x.overview > div > div img { height:auto !important; } } /* Landscape phones and down */ @media (max-width: 485px), (max-width: 768px) { body { background:#eee; overflow-x:hidden; } .container { width:90%; padding:0px; } div[data-grid] > div { float:none; width:230px; margin:0px auto; } div[data-grid] > div:first-child { margin:0px auto; } [data-tabs] > ul li { float:none; } .form .group input[type="password"] { width:330px; } header { position:relative; } ul.clients { width:128px; margin:0px auto; } ul.clients li { width:128px; float:none; clear:both; margin:0px; } div[data-grid] > div[data-content-management] { background:url(../images/icons/cms@2x.png) 50% 20px no-repeat; padding-top:100px; background-size: 64px 64px; } div[data-grid] > div[data-ecommerce] { background:url(../images/icons/ecommerce@2x.png) 50% 20px no-repeat; padding-top:100px; background-size: 64px 64px; } .social { float:none; width:136px; margin:0px auto; margin-top:20px; } .copyright { text-align:center; } .container { margin:0px auto; } .sidebar { margin:0px auto; padding:0px; } .sidebar ul { padding:0px; margin:0px; } canvas { width:100%; } .table, .table > div, .table > div > div { display:block; text-align:center; padding:0px; } .table > div > div ul { margin:0px; } .table > div > div ul li { text-align:left; } .table > div > div:first-child, .table > div > div:first-child + div, .table > div > div:first-child + div + div , .table > div > div:first-child + div + div + div { width:auto; text-align:center; } .table.table2x > div > div, .table.table2x > div > div p { text-align: left; } .table.table2x.overview > div > div img { height:auto !important; } .table > div > div.sidebar, .table > div > div.content { padding:0px; } .table > div > div.sidebar { width:100% } .table.tablefoot, .table.tablefoot > div, .table.tablefoot > div > div { display:block; text-align:center; } .table.tablefoot > div > div:first-child, .table.tablefoot > div > div:first-child + div, .table.tablefoot > div > div:first-child + div + div , .table.tablefoot > div > div:first-child + div + div + div { width:auto; text-align:center; } .table.tablefoot > div > div ul li { display:block; padding:5px 0px 5px 0px; text-align:center; } .table.tablefoot > div > div ul li a { display:block; color:#4e4e4e; } .table.tablefoot > div > div ul li a:hover { display:block; color:#ec6a00; text-decoration:underline; } .form .group { position:relative; zoom:1; display:block; margin-bottom:10px; width:90%; } .form .group:after { content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0px; font-size:0px; } .form .group label { display:block; float:none; clear:both; text-align:left; padding:5px 10px 5px 0px; } .form .group input[type="text"] { display:block; float:none; clear:both; width:330px; padding:15px; border:1px solid #b1b1b1; font-size:12px; box-sizing: border-box;} .form .group input[type="text"]:focus { -moz-box-shadow: 0px 0px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 0px 0px 4px #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#cccccc'); } .form .group textarea { display:block; float:none; overflow:auto; width:200px; height:200px; padding:10px; border:1px solid #b1b1b1; font-size:12px; } .form .group-options { float:none; width:180px; } .form .group-options label { position:relative; cursor:pointer; float:none; clear:both; text-align:left; padding:2px 0px 2px 20px; } .form .group-options label input { display:block; position:absolute; top:4px; left:0px; } [data-errors] { text-align:left; } .form .group input[type="text"][data-helpdesk-subject] { width:96%; padding:2%; } .form .group textarea[name="conversation_content"][data-helpdesk-content] { width:96%; padding:2%; max-width:100%; min-height:400px; } .carousel { display:none; } .carousel ul li:first-child div[data-transition] { font-size:20px; color:#fff; } .carousel ul li:first-child div[data-transition] + div { font-size:12px; color:#fff; top:25%; } .carousel ul li:first-child + li div[data-transition] { font-size:20px; color:#3f3f3f; } .carousel ul li:first-child + li div[data-transition] + div { font-size:12px; color:#3f3f3f; top:25%; } .carousel ul li:first-child + li + li div[data-transition] { font-size:20px; color:#fff; } .carousel ul li:first-child + li + li div[data-transition] + div { font-size:12px; color:#fff; top:25%; } .carousel ul li:first-child + li + li + li div[data-transition] { font-size:20px; color:#fff; } .carousel ul li:first-child + li + li + li div[data-transition] + div { font-size:12px; color:#fff; top:25%; } .carousel ul li > span { display:none; } header { position:relative; width:100%; height:80px; background:#eee; top:45px; } header > div:first-child { margin:0px; height:80px; } header .logo { display:block; position:absolute; left:50%; margin:-22px 0px 0px -91px; } header .menu { display:block; position:absolute; left:0px; top:50%; margin:-25px 0px 0px 0px; transform: translateX(-150px); width:50px; height:50px; background:url(../images/menu.svg) center center no-repeat; background-size:25px 25px; cursor:pointer; } .template { padding:0px; margin:0px; } .wrapper { padding-top:100px; } header nav.nav, header nav.cart { display:none; } .portfolio .portfolio-content { position:absolute; top:-100px; left:50%; height:60px; margin:0px 0px 0px -150px; width:300px; padding:50px 20px 20px 0px; background:none; } .portfolio .portfolio-content > a { position:absolute; top:10px; right:50%; margin-right:-50px; display:block; width:104px; height:34px; line-height:30px; background:url(../images/portfolio.view.png) 0 0 no-repeat; text-align:center; color:#fff; text-shadow:#000 -1px -1px; cursor:pointer; } .store .store-footer { position:relative; margin:30px 0px 0px 0px; } .store .store-footer > div { display:block; width:100%; } .store .store-footer > div > ul { display:block; } .store .store-footer > div > ul > li { display:block; text-align:left; } .store .store-footer > div > ul > li:first-child { width:100%; } .store .store-footer > div > ul > li:first-child + li { width:100%; } .store .store-footer > div > ul > li:first-child + li + li { text-align:center; } .store .store-footer > div > ul > li:first-child + li + li img { width:100%; max-width:341px; margin:0px auto; } .store .store-footer > div > ul > li > h5 { display:block; color:#9a9a9a; margin-bottom:20px; text-transform:uppercase; text-shadow:#fff 1px 1px; margin-top:20px; } .store .store-footer > div > ul > li > a { display:block; color:#000; margin:8px 0px 8px 0px; font-size:14px; } .store .store-footer > div > ul > li > p { display:block; font-size:11px; color:#777777; line-height:14px; text-shadow:#fff 1px 1px; margin:0px 0px 10px 0px; text-align:right; border:1px solid #000; } .wrapper.wrapper-orange .copy .chunk h2 { font-size:36px; } .z-tabs.horizontal.underlined.large > ul.z-tabs-nav > li > a.z-link { text-align: left;} .z-tabs.underlined.horizontal > ul.z-tabs-nav > li, .z-tabs.underlined.horizontal > ul.z-tabs-nav > li.z-active, .z-tabs.underlined.horizontal > ul.z-tabs-nav > li:hover{filter:none;background: transparent;padding:0;margin-left:1px;} #searchbox { right:50%; transform: translate(50%); top:0px; border:none; border-radius:none; height:45px;} #searchbox input { background-color:none; border:none; background-color: rgb(238, 238, 238); } .ais-SearchBox-input { background:transparent url(../images/store/ai.svg) 95% 50% no-repeat; background-size: 32px 32px;} .search #hits { top:120px; width:95%; } .ais-entity > a div:first-child { flex: 0 0 60px; padding:0px 2px 0px 2px; } .ais-entity > a div:first-child + div p { display: none; } }