/* --------------------- */
/* --------------------- */
/* Demo Builder 11 */
/* --------------------- */
/* --------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* sticky footer */
body { min-width: 320px; font-family: 'opensans', Arial, Helvetica, sans-serif;/* background: url("../images10/bg.png"); */ background-color: #EDEDEF; font-size: 13px; color: #211D26; line-height: 150%; margin: 0; }
html, body { height: 100%; width: 100%; }
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body * { box-sizing: border-box; }
.hide { display: none !important; }
.centered { text-align: center; }
strong { font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; }
.clear { clear: both; }
/* headers */
h1, h2, h3, h4 { font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; font-weight: normal; line-height: 150%; color: #28243C; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p.emphase { font-size: 12px; font-weight: bold; line-height: 150%; margin:5px 0; }
p {line-height:150%}
/* forms */
input[type="submit"] { cursor: pointer }
input[type="text"] { box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; }
input:focus { outline: none; }
/* menus */
ul.menu { margin: 0; padding: 0; }
ul.menu > li { display: inline-block; }
/* highslide */
.highslide-popup .highslide-image { border: none; }
/* regions */
.region { width: 100%; padding: 0; margin: 0 auto; clear: both; }
.region > .inner { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 20px; }
/* links */
a { text-decoration: none; color: #00B1A1 }
a.icon-gotop { width: 30px; height: 30px; position: absolute; right: 28px; top: 20px; background: url("../images10/db10.png") -85px -48px no-repeat; text-indent: -9999px; opacity: 0.3; }
a.icon-gotop:hover { opacity: 0.6; }
a.button-preview { position: absolute; right: 5px; top: 17px; display: inline-block; width: 26px; height: 26px; margin: 0; text-indent: -9999px; border-radius: 3px; background: url("../images10/db10.png") -7px -51px no-repeat; background-color: #28243C; opacity: 0.3; -webkit-transition: all 0.25s; transition: all 0.25s; }
a.button-preview:hover { opacity: 1 !important; }
a.button-preview.video { background-position: -46px -52px; }
a.load-more { position: relative; display: block; text-align: center; border-radius: 0 0 8px 8px; background: #c4c3ca; opacity: 0.5; padding: 10px; color: inherit; text-transform: uppercase; font-family: "opensansbold", Arial, Helvetica, sans-serif; }
a.load-more:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(51, 51, 51, 0); border-top-color: #c4c3ca; border-width: 9px; margin-left: -10px; }
a.load-more:hover { opacity: 1; }
/* buttons */
.button { cursor: pointer; background: #28243C; text-decoration: none !important; border: none; border-radius: 4px; display: inline-block; box-sizing: border-box; padding: 15px 20px; color: #FFF; text-transform: none; font-family: 'opensansbold', Arial, Helvetica, sans-serif; overflow: hidden; min-width: 145px; text-align: center; -webkit-transition: all 0.25s; transition: all 0.25s }
.button:hover { background: #636171; box-shadow: 0 3px 0 rgba(32, 39, 42, 0.1); }
.button.icon { text-align: left; padding: 10px 16px; }
.button.disabled, .button.disabled:hover { box-shadow: none !important; cursor: default; background: #777 !important; }
/* button icon */
.button span:not(.info) { padding: 10px; display: inline-block; font-size: 14px; -webkit-transition: all 0.25s; transition: all 0.25s }
.button span.icon { padding: 0; margin-right: 5px; float: right; width: 38px; height: 38px; background: url("../images10/arrow-white.png") center center no-repeat; }
.button:active span.icon { margin-right: 0; margin-left: 5px; }
/* button tooltips */
.button.tooltips { overflow: inherit; }
.button.tooltips span.info { text-transform: none; font-size: 12px; padding: 10px; }
.button:hover.tooltips span.info { bottom: 35px; }
/* color1 */
.button.color1 { background: #2BD0C2; }
.button.color1:hover { background: #41d8cb; box-shadow: 0 3px 0 rgba(32, 39, 42, 0.15); }
/* color2 */
.button.color2 { background: #ff573b; }
.button.color2:hover { background: #ff684f; box-shadow: 0 3px 0 rgba(32, 39, 42, 0.15); }
/* color3 */
.button.color3 { background: #41c550; }
.button.color3:hover { background: #53cf61; box-shadow: 0 3px 0 rgba(32, 39, 42, 0.1); }
/* color4 */
.button.color4 { background: #888; }
.button.color4:hover { background: #999; box-shadow: 0 3px 0 rgba(32, 39, 42, 0.1); }
/* tooltips */
.tooltips { position: relative; display: inline; }
.tooltips span.info { font-size: 12px; text-transform: none; position: absolute; width: 200px; color: #FFFFFF; background: #636074; text-align: center; visibility: hidden; border-radius: 6px; padding: 10px; line-height: normal; font-family: 'opensans', Arial, Helvetica, sans-serif; box-sizing: border-box; }
.tooltips span.info:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #636074; border-right: 8px solid transparent; border-left: 8px solid transparent; }
a:hover.tooltips span.info, span:hover.tooltips span.info { visibility: visible; bottom: 100%; left: 50%; margin-left: -100px; z-index: 999; }
span:hover.tooltips span.info { margin-left: -50px; }
/* messages */
.msg { background: #4FBA76; border-radius: 3px; color: #FFF; padding: 2px 10px; font-size: 12px; margin: 10px 0; display: inline-block; }
.msg-error { background: #FF6464 }
/* panels */
.panel { clear: both; overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 40px 0; }
.panel:nth-child(even) .panel-image { float: right; }
.panel h1 { font-family: "opensans", sans-serif; text-align: center; font-size: 22px; font-weight: bold; }
.panel h1 span {/*font-family:"opensansbold",sans-serif*/padding-bottom: 2px; color: #ff573b; border-bottom: 2px solid #EDEDEF;/*text-decoration: underline;*/ }
.panel h2 { font-size: 22px; font-family: 'opensans', Arial, Helvetica, sans-serif; }
.panel p { }
.panel p span {/*padding-bottom: 2px;*/border-bottom: 1px solid silver;/*text-decoration: underline;*/ }
.panel-image { float: left; }
.panel.split-3 { text-align: center;/* border: none; */ overflow: hidden; clear: both; }
.panel.split-3 .panel-split { width: 33%; }
.panel.split-2 .panel-split { width: 50%; }
.panel .panel-split { float: left; margin: 20px 0; display: inline-block; vertical-align: top; padding: 0 20px; }
.panel .panel-split h2 { font-size: 16px; margin-top: 10px; font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; }
.panel.split-3 ul.menu li { margin: 20px; vertical-align: top }
/* list panels */
.list-panel, .list-thumb { background: #FFF; padding: 20px 25px 10px; margin: 0 0 20px; position: relative; clear: both; }
.list-panel ul { margin: 0; padding: 0; list-style: none }
.list-panel ul li { border-top: 1px solid rgba(32, 39, 42, 0.05); position: relative; -webkit-transition: all 0.25s; transition: all 0.25s; }
.list-panel ul li:first-child { border: none; }
.list-panel ul li:hover { background-color: rgba(32, 39, 42, 0.02) !important }
.list-panel ul li:hover a.button-preview { opacity: 0.6; }
.list-panel ul li > a { display: inline-block; margin: 0; }
.list-panel h2 { font-size: 20px; margin: 0 60px 10px 0; }
.list-panel h3 { font-size: 16px; margin: 0; color: #00b1a1; font-family: 'opensans', Arial, Helvetica, sans-serif; }
.list-panel h2 span.icon { width: 40px; height: 40px; background-color: #00b1a1; display: inline-block; vertical-align: top; margin: -6px 10px 0 0; }
.list-panel ul span.icon { width: 40px; height: 40px; position: absolute; display: inline-block; }
.list-thumb { overflow: hidden; }
/* panel steps */
.panel-steps img { /* height: 160px; */
width: 100%; height: auto; max-width: 180px; }
/* panel presenters */
.panel-presenters { text-align: center; }
.panel-presenters p { max-width: 600px; margin: 10px auto 30px;/* font-weight: bold; */ }
.panel-presenters .panel { padding: 0; border: none; }
.panel-presenters .panel-split { background: #EDEDEF; border: 10px solid #FFF; text-align: center; margin-bottom: 0; padding: 10px 20px 0; position: relative; overflow: hidden; border-radius: 14px; }
.panel-presenters .panel-split h3 { position: absolute; text-transform: uppercase; }
.panel-presenters .panel-split a:hover { padding-bottom: 70px; }
.panel-presenters .panel-split img { width: 100%; }
.panel-presenters .panel-split a { position: absolute; bottom: 0; width: 100%; background: url("../images10/play_.png") center 38px no-repeat; background-color: #1FB9AC; color: #FFF; left: 0; padding: 10px; text-transform: uppercase; transition: 0.3s ease; }
.panel-presenters .panel-split a:hover { background-color: #42CABE; }
/* panel how */
.panel.panel-how { border: none; }
/* panel fine-tune */
.panel-finetune { background: #EDEDEF; }
.panel-finetune p { max-width: 600px; margin: 10px auto 30px;/* font-weight: bold; */ text-align: center; }
.panel-finetune ul { list-style: none; margin: 0; padding: 20px 0; overflow: hidden; }
.panel-finetune ul li { width: 20%; text-align: center; display: inline-block; float: left; padding: 20px 0; }
.panel-finetune ul .img { width: 88px; background: url("../images10/icon-bi.png") 0 0 no-repeat; height: 90px; margin: 0 auto 10px; transform: scale(0.7); }
.panel-finetune ul .img.icon-3d { background-position: -87px 0; }
.panel-finetune ul .img.icon-scale { background-position: -172px 0; }
.panel-finetune ul .img.icon-timeline { background-position: -262px 0; }
.panel-finetune ul .img.icon-player { background-position: -350px 0; }
.panel-finetune ul .img.icon-auto { background-position: -437px 0; }
.panel-finetune ul .img.icon-record { background-position: -527px 0; }
.panel-finetune ul .img.icon-zoom { background-position: -611px 0; }
.panel-finetune ul .img.icon-hide { background-position: 0 -91px; }
.panel-finetune ul .img.icon-zones { background-position: -89px -91px; }
.panel-finetune ul .img.icon-ask { background-position: -175px -91px; }
.panel-finetune ul .img.icon-audio { background-position: -262px -91px; }
.panel-finetune ul .img.icon-narrate { background-position: -348px -91px; }
.panel-finetune ul .img.icon-edit { background-position: -439px -91px; }
.panel-finetune ul .img.icon-export { background-position: -528px -91px; }
.panel-finetune ul li span { display: block; }
/* panel more */
.panel-more { text-align: center; padding: 20px 0; }
.panel-more h2 { margin: 0; }
.panel-more p { margin: 0 0 30px }
.panel-more .button { text-align: center; }
.panel-more li { margin: 0 10px }
/* outline box */
.outline-box { width: 31%; margin: 20px 2% 20px 0; display: inline-block; vertical-align: top; border: 1px solid #FFF; color: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 8px 20px; min-height: 110px; }
.outline-box h4 { margin: 10px 0 0; font-size: 16px; color: #FFF }
.outline-box p { margin: 0; font-size: 12px; line-height: normal }
.outline-box p a { color: inherit; }
/* page navigation */
.navigation ul.menu { padding: 10px 0 10px; }
.navigation li { margin: 0 5px 5px 0; display: inline-block; }
.navigation a { padding: 3px 14px; color: #3A363E; font-size: 12px; background: rgba(32, 39, 42, 0.05); border-radius: 4px; display: inline-block; -webkit-transition: all 0.25s; transition: all 0.25s; }
.navigation a:hover { background: rgba(32, 39, 42, 0.09); }
/* Header Navigation */
.nav-header { width: 100%; height: 50px; background: #727080; }
.nav-header li { float: left; }
.nav-header li a { padding: 16px; height: 50px; display: inline-block; color: #FFF; text-transform: uppercase; font-family: 'opensansbold', Arial, Helvetica, sans-serif; cursor: pointer; }
.nav-header li a:hover { background: #676574 }
.nav-header li a.current { background: #FBFBFB; color: #28243C; }
.nav-header li a span:not(.info) { text-indent: -9999px; width: 40px; height: 40px; display: inline-block; vertical-align: top; margin: -10px 0 0 0; background: url('../images10/db10.png') -240px -45px no-repeat; }
.nav-header li.button-next, .nav-header li.button-prev { float: right; }
.nav-header li.button-next a, .nav-header li.button-prev a { padding-bottom: 2px; }
.nav-header li.button-all a { padding: 15px 15px 2px 0 }
.nav-header li.button-all a span { margin-right: 10px; }
.nav-header li.button-next a span { background-position: -160px -45px; }
.nav-header li.button-prev a span { background-position: -200px -45px; }
.nav-header li a span.info { background-color: #807e8c }
.nav-header li a span.info:after { border-top: 8px solid #807e8c; }
/* --------------------- */
/* Main Structure */
/* --------------------- */
.page { min-height: 100%;/* height: auto !important; *//* height: 100%; */width: 100%;/* max-width: 1400px; */ margin: 0 auto; background: #FFF; background: #ffffff; overflow: hidden; background: -moz-linear-gradient(top, #ffffff 15%, #e5e4e7 100%);/* background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #ffffff), color-stop(100%, #e5e4e7)); *//* background: -webkit-linear-gradient(top, #ffffff 15%, #e5e4e7 100%); */background: -o-linear-gradient(top, #ffffff 15%, #e5e4e7 100%); background: -ms-linear-gradient(top, #ffffff 15%, #e5e4e7 100%);/* background: linear-gradient(to bottom, #ffffff 15%, #e5e4e7 100%); */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e4e7', GradientType=0); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
#main-content { padding-bottom: 30px; padding-top: 10px; }
/* --------------------- */
/* Top Navigation */
/* --------------------- */
#nav-top { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; overflow: hidden; background: #FFF; }
#nav-top > div { position: relative; padding: 20px 0; }
#nav-top > div * { display: inline-block; }
#nav-top a.db-logo { text-indent: -9999px; background: url("../images10/logo.png") center center no-repeat; width: 244px; height: 54px; float: left; margin-right: 20px; }
#nav-top a.db-trial { float: right; margin: 12px 0 10px 10px; font-family: 'opensansbold', Arial, Helvetica, sans-serif; }
#nav-top a.db-trial span { padding: 10px 10px; text-transform: uppercase; font-size: 14px; }
#nav-top a.db-trial span.icon { padding: 0; float: right; width: 38px; height: 38px; background: url("../images10/arrow-blue.png") center center no-repeat; }
#nav-top ul.menu { float: right; margin: 17px 0; }
#nav-top ul.menu a { color: #28243C; padding: 10px 5px; text-transform: uppercase; font-family: 'opensansbold', Arial, Helvetica, sans-serif; -webkit-transition: all 0.25s; transition: all 0.25s; }
#nav-top ul.menu a:hover { color: #2BD0C2; }
#nav-top ul.menu .active a { opacity: 0.5; }
#nav-top ul.menu:not(.secondary) li:last-child a { background: url("../images10/arrow-blue.png") 84px center no-repeat; color: #2bd0c2; width: 128px; height: 40px; overflow: hidden; vertical-align: middle; overflow: hidden }
#nav-top ul.menu:not(.secondary) li:last-child a span { float: left; }
#nav-top ul.menu:not(.secondary) li:last-child a:active { background-position: 89px center; }
#nav-top ul.menu.secondary { position: absolute; top: 0px; right: 0; margin: 0; }
#nav-top ul.menu.secondary a { color: #838086; font-size: 11px; font-family: 'opensans', Arial, Helvetica, sans-serif; text-transform: none }
#nav-top ul.menu.secondary a:hover, #nav-top ul.menu.secondary li:last-child a:hover { color: #28243C }
#nav-top ul.menu.secondary li:last-child a { background: none; color: #838086; padding: 0; }
/* --------------------- */
/* Footer */
/* --------------------- */
.page-footer {/* max-width: 1400px; */margin: 0 auto;/* border-top: 15px solid #211d26; */ }
.page-footer, .nav-inverse {/* height: 75px; *//* overflow: hidden; */clear: both; }
.page-footer > .region { margin: 0 auto;/* color: #FFF; */ padding: 15px 0; }
.page-footer .db-logo, .page-footer .qb-logo { width: 160px; height: 45px; background: url("../images10/db10.png") 0 0 no-repeat; text-indent: -9999px; display: inline-block; margin: 8px 5px 10px 0; vertical-align: top; -webkit-transition: all 0.25s; transition: all 0.25s; opacity: 0.9;/* filter: url("data:image/svg+xml;utf8,#grayscale"); */ filter: gray;/* -webkit-filter: grayscale(100%); */ }
.page-footer .qb-logo { background-position: -160px 0 }
.page-footer .db-logo:hover, .page-footer .qb-logo:hover, .page-footer ul.menu.social li a:hover { opacity: 1;/* filter: url("data:image/svg+xml;utf8,#grayscale"); *//* -webkit-filter: grayscale(0%); */ }
.page-footer ul.menu { display: inline-block; margin: 22px 0 0; font-size: 11px; text-transform: uppercase; color: #949494; }
.page-footer ul.menu li { padding: 0 4px;/* border-right: 1px solid #4D4852; */ }
.page-footer ul.menu li a { color: inherit; -webkit-transition: all 0.25s; transition: all 0.25s; font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; }
.page-footer ul.menu li a:hover { color: #28243C }
.page-footer ul.menu.social { float: right; margin: 10px 0 0; }
.page-footer ul.menu.social li { vertical-align: middle; display: inline-block; padding: 0; }
.page-footer ul.menu.social li a { width: 36px; height: 40px; display: inline-block; background: url("../images10/db10.png") -40px -287px no-repeat; text-indent: -9999px;/* filter: url("data:image/svg+xml;utf8,#grayscale"); */ filter: gray;/* -webkit-filter: grayscale(100%); */ }
.page-footer ul.menu.social li a.twitter { background-position: -3px -287px; }
.page-footer ul.menu.social li a.linkedin { background-position: -82px -287px; }
/* --------------------- */
/* Header */
/* --------------------- */
#header { background-color: #28243C; clear: both; color: #FFF; overflow: hidden; position: relative; padding-top: 50px; padding-bottom: 40px; }
#header:before { content: ""; position: absolute; opacity: 0.4; z-index: 2; top: 0; height: 50px; left: 0; right: 0; background: url("../images10/moviestrip.png") center 5px repeat-x; }
#header h1 { font-size: 37px; font-family: 'opensans', Arial, Helvetica, sans-serif; margin: 0; color: #FFF; }
#header h1 strong { font-family: 'opensansbold', Arial, Helvetica, sans-serif; }
#header h2 { font-size: 14px; margin: 0; font-family: 'opensans', Arial, Helvetica, sans-serif; color: #FFF; }
#header.front { background: url("../images10/front.jpg") center center; background-size: cover; min-height: 350px; padding: 0; background-color: #28243C; color: #FFF; position: relative; }
#header.front .overlay { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(25, 21, 45, 0.7); }
#header.front .inner { z-index: 2; position: relative; overflow: hidden; min-height: 350px; }
#header.front h1 { font-size: 40px; font-family: 'opensansbold', Arial, Helvetica, sans-serif; line-height: 100%; padding: 90px 0 50px; color: #FFF; }
#header.front h1 span { display: block; font-size: 16px; font-family: 'opensans', Arial, Helvetica, sans-serif; }
#header.front .presentation { min-height: 400px; position: relative; }
#header.front .presentation img { display: block; position: absolute; top: 0; left: 50%; margin-left: -240px; z-index: 1; opacity: 0; -webkit-transition: all 0.15s; transition: all 0.15s; }
#header.front .presentation img:first-child { opacity: 1; }
#header.front .header-box { padding: 0;/* text-align: center; *//* max-width: 80%; */padding: 20px 0 20px;/* position: absolute; *//* z-index: 2; *//* bottom: 20px; */ }
#header.front .header-box h2 { font-size: 16px; font-family: 'opensans', Arial, Helvetica, sans-serif; color: #3a363e; padding-bottom: 10px; }
#header.front .header-box ul.menu li a { opacity: 0.4; color: #FFF; padding: 2px; margin-right: 20px; display: inline-block;/* border-right: 1px solid #e3e3e3; */ font-size: 12px; transition: 0.3s; }
#header.front .header-box ul.menu li a:hover { opacity: 0.8; }
#header.front .header-box ul.menu li:last-child a { border: none; }
#header.front .header-box a.button {/* position: absolute; *//* top: -80px; *//* right: 100px; *//* left: inherit; */padding: 5px 8px; margin: 20px 0; }
#header.front .header-box a.button span:not(.icon) { padding: 10px; }
#header.front .header-box a:not(.color2) { left: 100px; right: inherit; }
.play-presentation { width: 80px; height: 80px; border-radius: 50%; position: absolute; top: 260px; left: 275px; opacity: 0.8; text-indent: -9999px; background: url("../images10/play.png") center center no-repeat; background-size: 100%; z-index: 10; -webkit-transition: all 0.25s; transition: all 0.25s; }
.play-presentation:hover { opacity: 1; }
/* --------------------- */
/* Features Page */
/* --------------------- */
.list-panel.features ul li { padding: 10px 0; }
.list-panel.features ul li > a:not(.button-preview), .list-panel.features p { margin: 0 60px }
/* feature icons */
.features span.icon { background: url("../images10/db10.png") -5px 0 no-repeat; }
.features span.icon-record { background-position: 0px -85px }
.features span.icon-media { background-position: -40px -85px }
.features span.icon-character { background-position: -80px -85px }
.features span.icon-characterdir { background-position: -120px -85px }
.features span.icon-3drotate { background-position: -160px -85px }
.features span.icon-3dscale { background-position: -200px -85px }
.features span.icon-timeline { background-position: -240px -85px }
.features span.icon-playerbar { background-position: -280px -85px }
.features span.icon-startend { background-position: -320px -85px }
.features span.icon-auto { background-position: -360px -85px }
.features span.icon-cursors { background-position: -400px -85px }
.features span.icon-balloon { background-position: -440px -85px }
.features span.icon-animation { background-position: -0px -125px }
.features span.icon-zoom { background-position: -40px -125px }
.features span.icon-hide { background-position: -80px -125px }
.features span.icon-clickzone { background-position: -120px -125px }
.features span.icon-editzone { background-position: -160px -125px }
.features span.icon-recordaudio { background-position: -200px -125px }
.features span.icon-narrate { background-position: -240px -125px }
.features span.icon-editaudio { background-position: -280px -125px }
.features span.icon-export { background-position: -320px -125px }
.features span.icon-share { background-position: -360px -125px }
/* --------------------- */
/* Sample Page */
/* --------------------- */
.side-description { width: 34%; float: right; }
.side-description > h2 { margin-top: 0; }
.side-list { width: 62%; margin: 0; padding: 0; }
.side-list li { background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 45%; float: left; margin: 0 5% 20px 0; box-sizing: border-box; border-radius: 3px; overflow: hidden; }
.side-list li:hover { box-shadow: 0 1px 7px rgba(0, 0, 0, 0.17); }
.side-list li > a:first-child { background: #28243C; width: 100%; height: 150px; display: inline-block; overflow: hidden; }
.side-list li > a span { width: 100px; height: 100px; margin: 25px auto 0; background: #FFF; display: block; background: url("../images10/icon-thumbs.png") 0 0 no-repeat; -webkit-transition: all 0.25s; transition: all 0.25s; transform: scale(0.9, 0.9); }
.side-list li:hover > a span { transform: scale(1, 1) }
.side-list li > a h3 { margin: 0; padding: 10px 15px 0; font-size: 14px; color: #00B1A1; display: inline-block }
.side-list li > p { margin: 0; padding: 0 15px 10px; font-size: 11px; height: 40px; }
.side-list .details { width: 100%; border-top: 1px solid #efefef; float: left; }
.side-list .details p { display: inline-block; float: right; padding: 5px 10px; margin: 0; border-left: 1px solid #efefef; margin: 0; font-size: 11px; text-align: right; min-width: 40px }
.side-list .details a { padding: 5px 10px 5px 35px; display: inline-block; color: inherit; background: url("../images10/db10.png") -120px -52px no-repeat; font-size: 11px; text-indent: 0; position: inherit; opacity: 0.8; min-width: 70px; }
.side-list .details > span { width: 26px; height: 28px; float: right; background: url("../images10/db10.png") -46px -251px no-repeat; }
.side-list .details span.info { width: 100px; }
.side-list .details span.i-flash { background-position: -87px -251px; }
.side-list .details span.i-voice { background-position: -127px -251px; }
.side-list .details span.i-tts { background-position: -7px -251px; }
/* sample icons */
.side-list span.icon-basic1 { background-position: -0 -100px; }
.side-list span.icon-basic2 { background-position: -100px -100px; }
.side-list span.icon-character1 { background-position: -200px -100px; }
.side-list span.icon-character2 { background-position: 0px -200px; }
.side-list span.icon-character3 { background-position: 0px -400px; }
.side-list span.icon-character4 { background-position: -100px -400px; }
.side-list span.icon-tools1 { background-position: -100px -200px; }
.side-list span.icon-tools2 { background-position: -200px -200px; }
.side-list span.icon-tools3 { background-position: -0px -298px; }
.side-list span.icon-interactivity1 { background-position: -100px -298px; }
.side-list span.icon-interactivity2 { background-position: -200px -298px; }
/* --------------------- */
/* Tutorials Page */
/* --------------------- */
.list-thumb.tutorials { padding: 10px 0 30px; margin: 0 0 10px; background: none; border-bottom: 1px solid #efefef; }
.list-thumb.tutorials h2 { margin-top: 0; }
.list-thumb.tutorials .side-list { width: 100%; float: none; }
.list-thumb.tutorials .side-list li { width: 29%; margin: 0 2%; }
.list-panel.tutorials li { margin-left: 48px; }
.list-panel.tutorials a:first-child { color: inherit; display: block; padding: 8px 60px 8px 10px; margin: 0; }
.list-panel.tutorials a.button-preview { top: 4px; }
.list-panel.tutorials h2 span.icon { background: url("../images10/db10.png") -5px 0 no-repeat; margin: -3px 15px 0 0; }
/* icons */
.list-panel.tutorials h2 span.icon-character { background-position: -161px -161px; }
.list-panel.tutorials h2 span.icon-create { background-position: 0px -85px; }
.list-panel.tutorials h2 span.icon-publish { background-position: -320px -125px }
.list-panel.tutorials h2 span.icon-transform { background-position: -41px -165px; }
.list-panel.tutorials h2 span.icon-scenes { background-position: -1px -165px; }
.list-panel.tutorials h2 span.icon-timeline { background-position: -240px -85px; }
.list-panel.tutorials h2 span.icon-cursor { background-position: -400px -85px; }
.list-panel.tutorials h2 span.icon-enhance { background-position: -440px -85px; }
.list-panel.tutorials h2 span.icon-zoom { background-position: -40px -125px; }
.list-panel.tutorials h2 span.icon-interactivity { background-position: -120px -125px; }
.list-panel.tutorials h2 span.icon-voice { background-position: -240px -125px; }
.list-panel.tutorials h2 span.icon-extras { background-position: -440px -127px; }
.list-panel.tutorials h2 span.icon-adding { background-position: -400px -127px; }
.tutorials li > a span { background: url("../images10/icon-thumbs.png") 0 0 no-repeat; }
.tutorials .icon-start1 { background-position: 0 0; }
.tutorials .icon-start2 { background-position: -100px 0; }
.tutorials .icon-start3 { background-position: -200px 0; }
/* individual tutorial */
#header .video { width: 100%; height: 400px; background: url("../images10/sample-video.png") center center no-repeat; }
#header.header-tutorial { padding: 25px 0 0; }
.page-tutorial h1 { font-size: 24px; margin: 20px 0; }
.page-tutorial h2 { font-size: 16px; margin: 20px 0 0; font-family: "opensans", Arial, Helvetica, sans-serif; }
.page-tutorial .details { padding: 15px 0; display: block; }
#media { max-width: 750px; width: 100%; margin: 10px auto 4px; display: block; }
/* --------------------- */
/* Contact Page */
/* --------------------- */
.list-panel.contact { background: none; padding: 10px 0 30px; margin: 0; }
.list-panel.contact a.icon-gotop { top: 0; right: 0; }
#panel-branding { overflow: hidden; }
.branding-box { width: 48%; margin: 0 1% 20px; float: left; overflow: hidden; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 10px; }
.branding-box img { float: left; margin-right: 10px; position: relative; z-index: 2; }
.branding-box ul { width: 100%; float: none; }
.branding-box a { color: inherit; font-size: 12px; padding: 8px 0; min-width: 210px; overflow: inherit; }
.branding-box a span { float: right; }
#panel-press ul { /* background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 10px; */ }
#panel-press ul li { overflow: hidden; }
#panel-press ul li a { padding: 10px; color: inherit; display: block; }
#panel-press ul li a span { float: right; opacity: 0.5; }
#panel-screenshots ul { border-radius: 6px; }
#panel-screenshots ul li { display: inline-block; margin: 0 1px; padding: 0; }
/* --------------------- */
/* What's New Page */
/* --------------------- */
.whatsnew { width: 100%; background: none; padding: 20px 0 30px; margin: 0; position: relative; float: left; clear: both; }
.whatsnew:last-child { margin-bottom: 60px; }
.whatsnew .side-date { font-size: 16px; font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; padding: 5px 0; width: 21%; float: left; position: absolute; top: 20px; bottom: 0; left: 0; }
.whatsnew .side-date:after { content: ""; position: absolute; top: 4px; right: -12px; background: #00B1A1; width: 20px; height: 20px; border-radius: 6px; }
.whatsnew .side-date:before { content: ""; position: absolute; top: 4px; right: -5px; bottom: -50px; background: #28243C; width: 6px; border-radius: 50%; }
.whatsnew .side-description { width: 75%; vertical-align: top; }
.whatsnew .side-description h2 { color: #00B1A1; }
.whatsnew a.icon-gotop { right: 8px; top: 15px; }
.whatsnew ul.images li { display: inline-block; }
.whatsnew ul:not(.images) li { padding: 11px 60px 11px 40px; position: relative; }
.whatsnew ul:not(.images) li:before { content: ""; position: absolute; width: 24px; height: 24px; left: 5px; top: 10px; background: url('../images10/db10.png') -167px -255px no-repeat; }
.whatsnew ul:not(.images) li:nth-child(odd) { background: rgba(255, 255, 255, 0.2) }
.whatsnew ul:not(.images) h3 { font-size: 13px; font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; color: #3A363E; }
.whatsnew ul:not(.images) p { margin: 0; padding: 0; }
.whatsnew.list-panel a.button-preview { top: 11px; }
/* --------------------- */
/* Login Page */
/* --------------------- */
.wrapper { width: 100%; float: left; text-align: center; }
.wrapper > p { color: #FFF; opacity: 0.3; display: inline-block; font-size: 11px; margin: 0 0 20px; }
#page-login { background: none; filter: none; background: #28243C; }
.panel-login { width: 100%; margin: 0 auto; position: relative; border-radius: 14px 14px 8px 8px; text-align: center; }
.panel-login h1 { padding: 20px 0; }
.panel-login > .box-form { width: 100%; max-width: 412px; }
.panel-login form label { display: block; padding: 5px; opacity: 0.5; text-transform: uppercase; font-size: 11px; }
.panel-login form input { width: 100%; max-width: 360px; margin: 0 auto 10px; border: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 10px; text-align: center; font-size: 14px; color: #3A363E; font-family: 'opensanssemibold', Arial, Helvetica, sans-serif; }
.panel-login form input:focus { outline: none; border: 1px solid rgba(255, 255, 255, 0.8) }
.panel-login form input:invalid, .panel-login input:-moz-submit-invalid, .panel-login input:-moz-ui-invalid { box-shadow: none; }
.panel-login form input[type="submit"] { max-width: 360px; border: none; color: #FFF; border-radius: 9px; padding: 14px; margin: 15px 0; cursor: pointer; font-family: 'opensansbold', Arial, Helvetica, sans-serif; }
.panel-login form input[type="email"], .panel-login form input[type="password"] { background: none; color: #FFF; }
.panel-login p { font-size: 12px; margin: 0 auto 10px; max-width: 600px; }
.panel-login #box-forgot { clear: both; width: 100%; margin: 0 auto; font-size: 12px; padding: 10px; }
.panel-login #box-forgot > * { clear: both; padding: 0 20px; line-height: normal; }
.panel-login #box-forgot form { padding: 10px 0; overflow: hidden; max-width: 400px; margin: 0 auto; }
.panel-login #box-forgot input { width: 70%; float: left; padding: 9px; border-right: 0; border-radius: 6px 0 0 6px; border: 1px solid #53cf61; height: 38px; }
.panel-login #box-forgot .button { width: 30%; float: right; padding: 8px; margin: 0; border-radius: 0 6px 6px 0; min-width: inherit; color: #FFF; height: 38px; }
.panel-login #box-forgot p:not(:first-child) { color: #71E47E; border-radius: 6px; margin: 3px auto; padding: 5px 15px; display: block; font-size: 20px; }
.panel-login #box-forgot #forgotpass-error { color: #FF6464 }
/* --------------------- */
/* Support Page */
/* --------------------- */
.outline-box.support { background: url('../images10/arrow-white.png') 95% 35px no-repeat; padding-top: 18px; position: relative; -webkit-transition: all 0.25s; transition: all 0.25s; }
.outline-box.support:hover { background-color: #5d5a6c; }
#header .outline-box.support h2 { color: #FFF; font-size: 27px; font-weight: 100; }
#header .outline-box.support h2 span { font-family: "opensansbold", Arial, Helvetica, sans-serif; }
.outline-box.support a { color: #FFF; padding-top: 20px; position: absolute; top: 0; bottom: 0; width: 100%; }
.list-panel.quicktips { background: none; margin: 0; padding: 20px 0; }
.list-panel.quicktips li a:first-child { padding: 10px 60px 10px 0; color: inherit; display: block; }
.list-panel.quicktips a.button-preview { top: 7px; }
.quick-links { background: rgba(79, 186, 118, 1); color: #FFF; clear: both; overflow: hidden; }
.quick-links a { color: #FFF; }
.quick-links ul { display: table; width: 100%; margin: 0; padding: 0; }
.quick-links ul li { display: table-cell; width: 33%; padding: 25px 20px; }
.quick-links ul li span.icon { width: 44px; height: 44px; margin-right: 20px; display: inline-block; float: left; background: url('../images10/db10.png') -360px 0 no-repeat; border: 2px solid #FFF; border-radius: 50%; }
.quick-links ul li span.icon-mail { background-position: -400px 0; }
.quick-links ul li span.icon-manual { background-position: -440px 0; }
.quick-links h3 { margin: 0; color: #FFF }
/* search quick tips */
#form-search-tips { position: relative; margin: 0 0 15px; }
#form-search-tips input[type="text"] { width: 100%; padding: 10px 15px; height: 40px; }
#form-search-tips input[type="submit"] { position: absolute; top: 0; right: 0; border-radius: 0 6px 6px 0; height: 40px; width: 46px; border: none; box-shadow: none; background: url('../images10/db10.png') -277px -45px no-repeat; background-color: #28243C; text-indent: -9999px; }
#form-search-tips input[type="submit"].clear { background-position: -317px -45px; background-color: #9A9FA9; }
/* --------------------- */
/* Download Page */
/* --------------------- */
.page-download h3 { padding: 20px 0 0; margin: 0; border-top: 1px solid rgba(0, 0, 0, 0.05) }
.page-download h3:first-child { border: none; }
.page-download p { margin: 5px 0 10px }
#header.header-download { overflow: initial !important; }
.header-download .inner { position: relative; }
.header-download .download-dbbox { clear: both; z-index: 2; position: absolute; width: 400px; height: 400px; bottom: -108px; right: -170px; background: url('../images10/db11-box1.png') center center no-repeat; }
.download-link { display: block; vertical-align: top; padding: 70px 30px 40px 0; }
.download-link a.button { padding: 15px 25px; min-width: 250px }
.download-link p { margin: 30px 0 0 20px; display: inline-block; vertical-align: top; }
.download-table { display: inline-block; position: absolute; right: 250px; bottom: 0; font-size: 11px; border: 1px solid #FFF; padding: 15px; border-radius: 6px; }
.download-table tr > td { padding: 0; }
.download-table tr > td:last-child { text-align: right; padding-left: 20px; }
/* --------------------- */
/* Customer Page */
/* --------------------- */
#header.header-customer .inner { position: relative; }
/* user box */
.user {position: absolute;top: 11px;right: 5px;z-index: 5;}
.user p { font-size: 18px; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; text-align: right; display: block; clear: both; float: right; }
.user p span { display: block; font-style: italic; font-size: 12px; }
.user ul { margin-bottom: 20px; font-size: 11px; text-align: right; }
.user ul li { float: right; list-style-type: none; }
.user ul li a { padding: 5px; color: #FFF; opacity: 0.5; }
.user ul li a:hover { opacity: 1 }
.page-customer .content ol { font-family: "opensanssemibold", Arial, Helvetica, sans-serif; padding: 0 0 0 15px }
table.products-table {width: 90%;margin-bottom: 20px;}
table.products-table th { text-align: center; position: relative; font-weight: normal; padding: 14px 10px; border-bottom: 2px solid rgba(32, 39, 42, 0.05); font-family: "opensanssemibold", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 11px; color: rgba(157, 155, 171, 1) }
table.products-table td { padding: 10px; border-bottom: 1px solid rgba(32, 39, 42, 0.05); font-size: 12px; text-align: center; }
table.products-table td:first-child { font-size: 12px; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
table.products-table td:first-child, table.products-table th:first-child { text-align: left; padding-left: 15px; }
table.products-table th.support { text-align: left; background-color: rgba(32, 39, 42, 0.03); border-left: 1px solid rgba(32, 39, 42, 0.1); padding-left: 15px }
table.products-table td.support { text-align: center; background-color: rgba(32, 39, 42, 0.03); font-size: 11px; }
table.products-table td.support.status { border-left: 1px solid rgba(32, 39, 42, 0.1); }
table.products-table td.support a.button { font-size: 11px; }
table.products-table td.support.status span { background: #4FBA76; padding: 2px 6px; color: #FFF; border-radius: 2px; width: 55px; font-size: 11px; display: inline-block; }
table.products-table td.support.status span.expired { background: #c7cbcd }
table.products-table td a.button { padding: 6px 10px; border-radius: 4px; line-height: normal; display: inline-block; min-width: 90px; text-align: center; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
table.products-table td a:not(.button) { color: inherit; text-decoration: underline; padding: 3px; display: inline-block; }
table.products-table td a:not(.button):hover { color: #19ac9f }
table.products-table tr.upgrade td { background: rgba(249, 235, 213, 1); font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
table.products-table tr.upgrade td a span { padding: 0 5px; line-height: normal; }
table.products-table tr.upgrade td.support { font-size: 16px; }
table.products-table th a.tooltips { position: absolute; right: 10px; width: 24px; height: 24px; background: rgba(255, 164, 75, 1); text-align: center; color: #FFF; border-radius: 50%; }
table.products-table th a.tooltips > span:not(.info) { text-transform: none; font-family: serif; font-weight: bold; font-size: 16px; padding: 3px; color: #FFF; display: block; }
/* customer tabs */
.content > div { padding-top: 10px; }
#tab2 > .form-item { padding: 0; display: block; }
#tab2 > .form-item:first-child { border: none; }
#tab2 > .form-item label { max-width: 150px; width: 100%; display: inline-block; }
#tab2 .form-item p { display: inline-block; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; margin: 8px 0; }
#tab2 form { margin-left: 150px; margin-bottom: 15px; }
#tab2 form label { display: block; font-size: 12px; padding: 10px 0 3px; }
#tab2 form .form-item { display: inline-block; margin-right: 10px; }
#tab2 form input[type="email"], #tab2 form input[type="password"] { color: #28243C; outline: none; vertical-align: top; border: 1px solid rgba(32, 39, 42, 0.3); background: rgba(255, 255, 255, 0.5); padding: 9px 10px; border-radius: 6px; width: 220px; }
#tab2 form input:focus, #tab2 form input:invalid { outline: none; box-shadow: none }
#tab2 form input.button { vertical-align: bottom; margin-top: 10px; padding: 9px 10px 10px; border-radius: 6px; font-size: 11px; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
/* --------------------- */
/* Thank You Page */
/* --------------------- */
.header-connect .inner { position: relative; text-align: center; }
.box-training-board { width: 121px; height: 85px; position: absolute; right: 50%; bottom: -87px; margin-right: -62px; display: block; background: url('../images10/board.png') center center no-repeat; }
.box-training { position: relative; max-width: 500px; border: 6px solid #FFF; border-bottom: 6px solid #FFF; padding: 20px; border-radius: 2px; margin: 30px auto 40px; color: #FFF; }
.box-training h3 { color: #FFF; margin: 0; }
#connect { background: none; height: inherit; padding: 15px 0 35px; text-align: center; }
#connect form { width: 100%; max-width: 400px; margin: 20px auto 0; }
#connect input[type="email"] { width: 280px; border: 1px solid #28243C; background: rgba(255, 255, 255, 0.5); padding: 10px; border-radius: 6px; margin: 0; display: inline-block; height: 40px; }
#connect input[type="submit"] { border-radius: 0 6px 6px 0; margin: 0 0 0 -10px; padding: 10px 20px; min-width: inherit; height: 40px; vertical-align: top; }
/* --------------------- */
/* Sitemap Page */
/* --------------------- */
.page-sitemap ul { padding: 0; list-style: none }
.page-sitemap a { color: inherit; font-size: 12px; }
.page-sitemap > div > ul ul { border-left: 2px solid rgba(32, 39, 42, 0.1); padding: 10px 0 10px 35px; list-style: none; }
.page-sitemap > div > ul > li { padding-left: 0px; }
.page-sitemap > div > ul > li > a { font-size: 13px; padding: 5px 0; display: block; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
/* --------------------- */
/* Buy Page */
/* --------------------- */
/*buy panel*/
.panel-buy { position: relative; max-width: 83%; font-size: 12px; width: 100%; }
.panel-buy > h2 { font-size: 35px; margin: 10px 0 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(32, 39, 42, 0.08); }
.panel-buy > h2 strong { font-family: "opensansextra", Arial, Helvetica, sans-serif; }
.panel-buy .db-logo { position: absolute; left: 0; top: 88px; width: 114px; height: 114px; background: url('../images10/db10-icon2.png') center center no-repeat; text-indent: -9999px; }
/* buy settings */
.buy-settings { width: 100%; float: left; position: relative; }
.buy-settings .row { display: block; width: 100%; float: left; clear: both; }
.buy-settings .row.marked { padding: 10px 0; border-top: 1px solid rgba(32, 39, 42, 0.08); margin-top: 5px; }
.buy-settings .row.row-buy { border-top: 1px solid rgba(32, 39, 42, 0.08); margin-bottom: 10px; }
.buy-settings .row.row-buy .button { float: right; margin: 10px 0 10px 0; padding: 1px 0 2px 10px; min-width: inherit; width: auto; display: inline-block; border-radius: 3px; }
.buy-settings .row.row-buy .button span:not(.icon) { padding: 8px 15px 0 5px; }
.buy-settings .row.row-buy .button span.icon { height: 32px; width: 24px; background: url("../images10/arrow-white-small.png") center center no-repeat; }
.buy-settings .row.row-buy .button.top { clear: both; }
.row-buy-position { position: absolute; top: 0; right: 0; }
/* price */
#total-price, #offer-price { float: right; display: inline-block; vertical-align: top; font-size: 35px; font-family: "opensansbold", Arial, Helvetica, sans-serif; color: #28243C; line-height: 100%; }
#total-price > span, #offer-price > span { /* vertical-align: top; */ padding: 0 4px; position: relative; }
#total-price > span:last-child { vertical-align: top; font-size: 14px; top: -5px; }
/* offer */
#offer-price { margin-right: 30px; font-size: 22px; position: relative; margin-top: 3px; }
#offer-price:before { content: ""; position: absolute; top: 9px; left: -9px; height: 2px; width: 70px; background: red; z-index: 2; }
#offer-price > span { font-size: 23px; top: 0; font-family: "opensansbold", Arial, Helvetica, sans-serif; padding: 0; }
#offer-end { clear: both; display: inline-block; float: right; text-align: right; width: auto; background: #e43333; margin: 8px 0; border-radius: 3px; color: #FFF; padding: 1px 10px; font-size: 11px; }
/* add boxes */
.buy-settings .row.row-add { position: relative; border: 1px solid rgba(32, 39, 42, 0.08); padding: 10px; border-radius: 4px; margin-bottom: 10px; background: rgba(32, 39, 42, 0.02); }
.buy-settings .row.row-add p { padding: 0 100px 0 140px; margin: 4px 0 0; }
.buy-settings .row.row-add a:not(.button) { position: absolute; top: 15px; left: 20px; opacity: 0.7; -webkit-transition: all 0.25s; transition: all 0.25s; cursor: pointer; z-index: 2; }
.buy-settings .row.row-add a:not(.button):hover { opacity: 1 !important; }
.buy-settings .row.row-add a:hover img { }
.buy-settings .row.row-add .button { position: absolute; top: 18px; right: 15px; padding: 4px 10px 3px; font-size: 11px; min-width: 70px; float: right; border-radius: 3px; }
.buy-settings .row.row-add.added > * { opacity: 0.5 }
/* form settings */
.row .label { width: 35%; float: left; text-align: right; padding: 4px 0; }
.row .setting { width: 50%; float: left; margin-left: 1%; cursor: default; position: relative; }
.row .setting > a { padding: 4px 20px 2px 10px; display: inline-block; font-family: "opensansbold", Arial, Helvetica, sans-serif; color: inherit; text-transform: uppercase; background: url('../images10/drop.png') right center no-repeat; min-width: 51px; }
.row .setting > a.tooltips { width: 22px; height: 27px; display: inline-block; vertical-align: middle; padding: 0; margin: -8px 0 0 8px; min-width: inherit; background: url("../images10/db10.png") -209px -249px no-repeat; opacity: 0.5; }
.row .setting > a.tooltips:hover { opacity: 1; }
.row .setting > span { display: inline-block; padding: 4px 10px; }
.row .setting > span span.info { margin-left: -100px; }
.row .setting > span.description { opacity: 0.7; }
.row .setting > span.added { background: #2BD0C2; font-size: 11px; border-radius: 2px; padding: 1px 6px 0; vertical-align: top; margin: 2px 0 0 15px; display: inline-block; color: #FFF; font-family: "opensanssemibold", Arial, Helvetica, sans-serif; }
/* dropdowns:general */
a.dropdown { position: relative; border-radius: 4px; -webkit-transition: all 0.25s; transition: all 0.25s; }
a.dropdown:hover { background-color: #e5e4e8 }
a.dropdown.dropdown-active { color: #FFFFFF; background-color: #8C8A94; }
.dropdown-menu { background: #6B6877; color: #FFF; border-radius: 4px; position: absolute; top: 27px; left: 0; display: none; z-index: 50; width: 51px; padding: 0; overflow: hidden; /* text-align: center; */ }
.dropdown-menu ul { list-style: none; margin: 0; padding: 0; }
.dropdown-menu ul li { border-bottom: 1px solid #7F7D89; }
.dropdown-menu ul li:hover { background: #7F7D89 }
.dropdown-menu ul li:last-child { border: none; }
.dropdown-menu p { font-size: 11px; }
.dropdown-menu a:link, .dropdown-menu a:visited { font-size: 11px; color: #FFF; padding: 5px 10px; display: block; text-transform: uppercase; font-family: "opensanssemibold", Arial, Helvetica, sans-serif }
.dropdown-menu a:active, .dropdown-menu a:hover { }
.dropdown-menu#menu-license, .dropdown-menu#menu-want { width: 150px; text-align: left; border-radius: 4px; }
/* clients */
.panel-clients { text-align: center; padding: 20px 0; }
.panel-clients ul { padding: 0; overflow: hidden; }
.panel-clients ul li { width: 13%; height: 70px; display: inline-block; }
.panel-clients ul li img { max-width: 100%; border-bottom: 1px solid #ccc; padding: 10px 0; margin: 0 auto; filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%); opacity: 0.5; -webkit-transition: all 0.25s; transition: all 0.25s }
.panel-clients ul li img:hover { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); opacity: 1; }
/* upgrade */
.region-upgrade { background: #28243C; color: #FFF; }
.panel-upgrade { padding: 20px 0 30px; text-align: center; }
/*
.panel-upgrade { padding: 20px 0 30px; border-radius: 6px; text-align: center; border-bottom: 1px solid #ccc; }
.panel-upgrade h3 { font-size: 26px; color: #FFF; }
.panel-upgrade .button { margin-top: 15px; }
*/
/* --------------------- */
/* Responsive */
/* --------------------- */
/* structure top nav */
@media (max-width:850px) {
#nav-top ul.menu { float: left; }
}
@media (max-width:600px) {
#nav-top ul.menu.secondary { right: inherit; left: 0; }
#nav-top a.db-logo { margin-top: 20px; }
}
/* structure header */
@media (max-width:760px) {
#header.front .header-box a.button { position: relative; right: inherit; left: inherit; top: inherit; margin: 10px; }
.panel-finetune ul li { width: 33%; }
}
@media (max-width:600px) {
#header h1, #header.front h1 { font-size: 32px; }
#header.front h1 span { font-size: 18px; line-height: normal; margin-top: 10px }
#header.header-download { padding-bottom: 0; }
#header.front .presentation img { height: 300px; width: auto; margin-left: -190px; }
#header.front .presentation { min-height: 300px; }
.panel.split-3 .panel-split { width: 100%; }
.panel-finetune ul li { width: 50%; }
.panel.split-2 .panel-split { width: 100%; }
}
@media (max-width:400px) {
#header.front .presentation { background-size: 100% auto; }
.nav-header { padding: 0; }
}
/* structure footer */
@media (max-width:850px) {
.page-footer, .nav-inverse {height: 120px;overflow: hidden;background: #EDEDEF;}
.page { margin-bottom: -120px }
.page-footer .db-logo, .page-footer .qb-logo { margin-bottom: 0; }
.page-footer ul.menu { margin-top: 15px; }
.page-footer ul.menu.social { margin-top: 5px; }
}
@media (max-width:620px) {
.page-footer, .nav-inverse { height: 160px; }
.page { margin-bottom: -160px }
.page-footer ul.menu.social { float: none; }
}
@media (max-width:370px) {
.page-footer, .nav-inverse { height: 220px; }
.page { margin-bottom: -220px }
}
/*buy page*/
@media (max-width:959px) {
.panel-buy { max-width: 100%; }
}
@media (max-width:800px) {
.panel-buy > h2 { float: left; padding: 7px 0 20px 75px; font-size: 30px; width: 100%; margin: 0 0 20px; }
.panel-buy .db-logo { top: 0; height: 55px; width: 55px; background-size: 100%; margin-bottom: 0; }
.panel-clients ul li { width: 16% }
}
@media (max-width:700px) {
.row-buy-position { position: inherit; padding: 20px 10px; }
}
@media (max-width:500px) {
.buy-settings .row.row-buy { text-align: right; }
.row .setting { width: 64%; }
.buy-settings .row.row-add a:not(.button) { position: inherit; left: inherit; top: 10px; }
.buy-settings .row.row-add p { padding: 20px 0 0; }
.panel-clients ul li { width: 23% }
}
@media (max-width:400px) {
.panel-clients ul li { width: 31% }
}
/* All pages */
@media (max-width:850px) {
.side-list, .side-description { width: 100%; }
.list-thumb.tutorials .side-list li { width: 46%; margin-left: 2%; margin-right: 2%; margin: 0 2% 30px }
.outline-box.contact { width: 100%; margin: 5px 0; padding: 0 15px 15px; min-height: inherit; }
.branding-box { width: 100%; }
.whatsnew .side-date { width: 33%; }
.whatsnew .side-description { width: 60% }
.outline-box.support { width: 46%; margin-right: 3%; }
.quick-links ul li span.icon { display: block; float: none; margin-bottom: 10px; padding-left: 10px; padding-right: 10px; }
.download-table { position: inherit; z-index: 0; right: inherit; }
.download-link { padding-top: 40px; }
}
@media (max-width:760px) {
/* table products */
table.products-table { width: 100%; }
table.products-table th { display: none; }
table.products-table td:not(.support) { display: block; border: none; text-align: left; padding: 6px 20px !important }
table.products-table tr { border-bottom: 1px solid rgba(32, 39, 42, 0.2); }
table.products-table td:before { content: attr(data-foo); display: block; opacity: 0.5; font-size: 12px; }
table.products-table td.support { position: relative; }
table.products-table td.support:before { font-size: 13px; margin: 0 0 10px; position: absolute; top: 10px; opacity: 1; }
table.products-table.products-table td:first-child { font-size: 16px }
table.products-table td a:not(.button) { padding-left: 0; }
.panel .panel-split { width: 100%; }
.panel-image, .panel-content { width: 100%; text-align: center; }
#main-content.page-samples, #main-content.page-tutorials, #main-content.page-features { padding-left: 0; padding-right: 0; }
}
@media (max-width:600px) {
.list-thumb.tutorials .side-list { padding: 0 15px }
.side-list li, .list-thumb.tutorials .side-list li { width: 100%; margin-left: 0; margin-right: 0; }
.list-panel.tutorials li { margin-left: 0; }
.list-panel h2 span.icon { display: block; margin: 0 0 10px }
#panel-press ul li a span { float: none; display: block; }
.whatsnew .side-date, .whatsnew .side-description { width: 100%; padding-left: 30px }
.whatsnew .side-description { padding-top: 50px; }
.whatsnew .side-date:after { right: inherit; left: -12px; }
.whatsnew .side-date:before { left: -6px; right: inherit; }
.outline-box.support { width: 100%; }
.quick-links ul li span.icon { display: inline-block; margin: 0 0 10px; }
.quick-links ul li { width: 100%; display: block; text-align: center; padding-left: 0; padding-right: 0; }
#connect input[type="email"] { display: block; width: 90%; margin: 10px auto; text-align: center; }
#connect input[type="submit"] { border-radius: 6px; }
/* table products */
table.products-table td.support { background: none !important; text-align: left !important; width: 32%; display: inline-block; height: 50px; padding: 6px !important; margin-top: 40px; }
table.products-table td.support span { text-align: center; margin-left: 14px }
table.products-table td.support:before { top: -30px; left: 20px; }
table.products-table tr.upgrade td.support { display: none; }
.user { position: relative; width: 100%; margin: 20px 0 0; clear: both; top: inherit; left: inherit; right: inherit; left: inherit; }
.user p { float: none; text-align: left; margin: 0; }
.user ul { display: none; }
#tab2 > .form-item label, #tab2 > .form-item p { width: 100%; padding: 0 0 0; margin: 0; }
#tab2 > .form-item label { padding: 30px 0 0; }
#tab2 > form { margin: 0; }
#tab2 form .form-item { width: 100% }
#tab2 form input[type="email"], #tab2 form input[type="password"] { width: 100% }
.download-table, .download-table td { max-width: 100%; width: 100%; }
.header-download .download-dbbox { position: inherit; background-size: auto 100%; background-position: left bottom; width: 100%; height: 250px; bottom: -35px; right: -30%; }
.download-link { text-align: center; padding: 70px 0 30px; }
.download-link p { display: block; text-align: center; margin: 20px 0 0; }
}
/* --------------------- */
/* misc */
.sample-tech { text-align: center; }
.new-feature { color: #ff573b; }
.simple-list {
padding-left:30px;
margin: 5px 0 10px;
}
.unavailable {
display: none!important;
}
#panel-staytuned {
}
#panel-staytuned p {
margin-bottom: 10px;
}
#panel-staytuned p.emph {
font-weight: bold;
}
#panel-staytuned p.emph2 {
color: #ffffff;
background-color: #28243c;
padding: 10px;
border-left: 10px solid #ff573b;
}
ul.instructions {
margin: 5px 0 10px;
list-style-type: none;
}