/** * main style sheet * @author knguyen@zestedegenie.com * @creationDate 2014-01-14 * @editDate 2014-01-14 */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, button, 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, main { display: block;} body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} table { border-collapse: collapse; border-spacing: 0;} /* migth as well since inherit doesn't work for IE7 and below */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } strong { font-weight: bold;} em { font-style: italic;} a, button { outline: none;} button::-moz-focus-inner { padding: 0; border: 0 } ::selection { background: #3fae49; color: #fff;} ::-moz-selection { background: #3fae49; color: #fff;} html { } body { background: #fff; font-size: 14px; line-height: 1.4; color: #666; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center;} /* iphone */ @media only screen and (max-device-width: 568px) { body{ -webkit-text-size-adjust: none;} } /* bug chrome */ @-webkit-keyframes body { from { opacity: 1; } to { opacity: 1; } } /* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 9, 2014 */ @font-face { font-family: 'national_bookbook'; src: url('fonts/natioboo-webfont.eot'); src: url('fonts/natioboo-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/natioboo-webfont.woff') format('woff'), url('fonts/natioboo-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'national_mediummedium'; src: url('fonts/natiomed-webfont.eot'); src: url('fonts/natiomed-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/natiomed-webfont.woff') format('woff'), url('fonts/natiomed-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bryantbold'; src: url('fonts/bryanbol-webfont.eot'); src: url('fonts/bryanbol-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bryanbol-webfont.woff') format('woff'), url('fonts/bryanbol-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bryantregular'; src: url('fonts/bryanreg-webfont.eot'); src: url('fonts/bryanreg-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bryanreg-webfont.woff') format('woff'), url('fonts/bryanreg-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } body, input, textarea, #time li p { font-family: 'national_bookbook', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} #nav-sec, strong, .QapTcha .dropError, .QapTcha .dropSuccess, .features h4 { font-family: 'national_mediummedium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} #nav, .content h1, .content h3, .content h4, #foot h3, button span span, .bt, #home-main h2, .content .service-main h2, .link, .benefits, .ubi-sloution div em, .solution-other, .stats, #panel .event a, .world2 em, #m2m-home .panel-nav, #foot nav { font-family: 'bryantbold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} .content h2, /*.intro, .tech,*/ #timeline li, .news time, #foot h2 { font-family: 'bryantregular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;} /** ******************************************************* * links */ a { color: #3fae49; text-decoration: none;} a:hover, a:active, a:focus { color: #000;} a.selected, .selected a, .disabled a { cursor: default !important; text-decoration: none!important;} a.selected:hover, a.selected:active, a.selected:focus, .selected a:hover, .disabled a:hover { cursor: default!important;} a:visited {} /** ******************************************************* * transitions */ #head h1 img, .social img, #home-main p img, button span span, .bt, .ls-pag a, .solution img, .solution-other, .instagram li img, #time .nav a, .news article img, .features a img, #m2m-home .panel-nav a, .downloads img, #panel .event a { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} /* { -webkit-transition: none 0 linear; -moz-transition: none 0 linear; -o-transition: none 0 linear; transition: none 0 linear;} */ #home-main p:hover img:not(.play), #home-main p:focus img:not(.play), #head h1 a:hover img, #head h1 a:focus img, .solution:hover img, .social a:hover img, .social a:focus img, .instagram li a:hover img, .instagram li a:focus img, .news a:hover img, .news a:focus img, #time .nav a:hover, #time .nav a:focus, .downloads a:hover img, .downloads a:focus img, #m2m-home .panel-nav a:not(.disabled):hover, #m2m-home .panel-nav a:not(.disabled):focus { opacity: 0.5;} #pg-acc #head h1 a:hover img, #pg-acc #head h1 a:focus img, .how img { opacity: 1;} /** ******************************************************* * class gen */ .hide { position: absolute; margin-left: -9000px!important;} .hidden { visibility: hidden;} .none, .printonly { display: none!important;} .ir { display: block; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; text-indent: -9999px;} .clear { clear: both;} .clearer { display: block!important; width: 100%!important; clear: both!important; height: 0!important; min-height: 0!important; line-height: 0!important; font-size: 1px!important; float: none!important; overflow: hidden; margin: 0!important; padding: 0!important; border: none!important} .selfclear { overflow: hidden;} .center { text-align: center;} .right { text-align: right;} .fl { float: left!important;} .fl-r { float: right!important;} .no-fl { float: none!important;} .no-space { margin-bottom: 0!important;} .space-sml { margin-bottom: 5px;} .space { margin-bottom: 10px;} .spaced { margin-bottom: 15px;} .space-top { margin-top: 15px;} .space-big { margin-bottom: 30px;} .space-bigger, .text.space-bigger { margin-bottom: 45px;} .space-top-big { margin-top: 30px;} .sup, sup { font-size: 0.75em; position: relative; top: -2px;} /** * jquery-ui */ body #ui-datepicker-div { display: none;} body .ui-widget { font-size: 1em;} body .ui-dialog { text-align: left;} body .ui-dialog .ui-dialog-content { padding-top: 20px !important;} #cboxLoadedContent { text-align: left;} #tip { display: none; position: absolute; max-width: 300px; padding: 2px 10px; font-size: 11px; background: #222; color: #fff; white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #222; -webkit-box-shadow: 0 1px 5px #222; box-shadow: 0 1px 5px #222; z-index: 9999;} .rgba #tip { background: rgba(0,0,0,.75);} #overlay { position:fixed; top: 0; left: 0; z-index:9999; width:100%; height:100%; background:url(images/overlay.png) repeat 0 0;} .browsehappy { padding: 5px;} .browsehappy a { color: #cb4343;} #pop { position: fixed; z-index: 10000; top: 50%; left: 50%; min-height: 200px; width: 570px; margin: -100px 0 0 -305px; padding: 20px; background: #fff;} #pop.absolute { position: absolute; z-index: 10000; top: 20px; margin-top: 0;} /** ******************************************************* * forms */ fieldset { margin-bottom: 20px;} form input, form select, form textarea, button { font-size: 1em;} form div { margin-bottom: 10px;} input[type=text], input[type=password], input[type=email], textarea { width: 250px; height: 20px; padding: 3px 5px 3px; background: #fafafa; border: 1px solid #ddd; outline-color: #3fae49;} select[multiple=multiple] { width: 260px; padding: 3px 5px 3px; background: #fafafa; border: 1px solid #ddd; outline-color: #3fae49;} textarea { height: 150px; overflow: auto; vertical-align: top;} select { max-width: 250px; outline-color: #3fae49;} input[type=file] { font-size: 12px;} form .label-in { color: #999;} input.sml { width: 60px;} input.med { width: 125px;} input.i-date { width: 130px; background-image: url(../img/icn-cal.png); background-position: right center; background-repeat: no-repeat;} input.disabled { background-color: #ddd;} .i-multi {} .i-multi p, .i-multi span, .i-multi input[type=text], .i-multi input[type=password], .i-multi input[type=email], .i-multi select { margin-right: 15px;} .i-multi .last { margin-right: 0;} .i-info { color: #ccc; font-size: 11px; line-height: 1; font-style: italic;} .i-lg {} .i-lg label, .i-lg .label { float: left; width: 100px; margin: 4px 0 0; text-align: left;} .i-lg label.label-option { margin-left:10px; width: auto;} .i-lg input[type=text], .i-lg input[type=password], .i-lg input[type=email], .i-lg input[type=file], .i-lg input[type=checkbox], .i-lg textarea, .i-lg select { float: left; margin-left: 10px;} .i-lg .submit, .inside { margin-left: 110px;} .i-lg .i-select label, .i-lg .i-file label { margin-top: 1px;} .i-lg textarea { width: 325px;} .i-lg .i-xtra { float: left; margin: 6px 0 0 5px;} .i-lg .i-select .i-xtra { margin-top: 3px;} .i-lg .i-checkbox .i-multi, .i-lg .i-radio .i-multi { float: left; margin-left: 10px; margin-bottom: 0;} .i-lg .i-checkbox .label, .i-lg .i-radio .label { margin-top: 0;} .i-lg .i-checkbox label, .i-lg .i-radio label { float: none; width: auto; margin: 0 0 0 5px; font-weight: normal;} .i-lg input[type=checkbox], .i-lg input[type=radio] { float: none; width: auto; margin: 0;} .i-hg {} .i-hg label, .i-hg .label { display: block; width: auto; margin-bottom: 2px; line-height: 1.2; float: none; text-align: left;} .i-hg input[type=text], .i-hg input[type=password], .i-hg input[type=email], .i-hg input[type=file], .i-hg textarea, .i-hg select, .i-hg .i-checkbox p, .i-hg .i-radio p { margin-left: 0;} .i-hg .i-checkbox label, .i-hg .i-radio label { display: inline; font-weight: normal;} .i-hg textarea { max-width: 98%;} .i-hg .col2 input[type=text], .i-hg .col2 input[type=password], .i-hg .col2 input[type=email], .i-hg .col2 select, .i-hg .col3 input[type=text], .i-hg .col3 input[type=password], .i-hg .col3 input[type=email], .i-hg .col3 select { max-width: 95%;} .submit { margin: -10px 0 30px;} .submit button, .submit a { margin-right: 15px; vertical-align: middle;} button { display: inline; background: none; cursor: pointer;} button>span { display: inline-block;} button span span, .bt { display: inline-block; padding: 12px 30px; background: #3fae49 url(../img/bg-bt.png) center center no-repeat; color: #fff; font-size: 18px; text-transform: uppercase; white-space: nowrap;} button:hover span span, button:focus span span, .bt:hover, .bt:focus { background-position: center 200px; color: #fff;} button[disabled=disabled] span span, button.disabled span span, button[disabled=disabled]:hover span span, button.disabled:hover span span { cursor: default; text-decoration: line-through; background-color: #ccc; background-position: center center;} .bt.sml { padding: 5px 15px; font-size: 11px;} .bt.med { padding: 10px 25px; font-size: 12px;} .bt.big { padding: 10px 25px; font-size: 24px;} .bt2 { background-color: #666;} .msgbox { position: relative; margin-bottom: 15px; padding: 0 30px 15px 20px; color: #666; line-height: 1.4; border: 1px solid #666;} .msgbox p, .msgbox ul { padding: 15px 0 0;} .msgbox ul { margin-left: 20px; list-style-type: disc;} .msgbox label { display: block; float: none; margin: 0;} .msgbox .close { position: absolute; top: 2px; right: 2px; display: none;} .success { background: #c4e5a9 url(../img/bg-success.png) 0 0 repeat; border-color: #869c74;} .errors, .browsehappy { background: #f68c95 url(../img/bg-error.png) 0 0 repeat; border-color: #cb4343; } /** ******************************************************* * bts */ .msgbox .close, .tech-nav a, #time .nav a, #nav-menu { display: block; width: 18px; height: 18px; background: url(../img/icons.png) 0 0 no-repeat; text-indent: -9999px;} #line li a:after { display: block; width: 18px; height: 18px; background: url(../img/icons.png) 0 0 no-repeat; text-indent: -9999px;} .success .close { background-position: 0 0;} .errors .close { background-position: -18px 0;} .tech-nav a { background-position: -36px 0;} .tech-nav .selected { background-position: -58px 0;} #line li a:after { background-position: -36px -44px;} #line li a.selected:after { background-position: -72px -44px;} #time .nav .next { background-position: -196px 0;} #time .nav .prev { background-position: -158px 0;} #nav-menu { background-position: 0 -18px;} /* iphone 4 */ @media only screen and (-webkit-min-device-pixel-ratio: 2){ .msgbox .close, .tech-nav a, #time .nav a, #nav-menu { background-image: url(../img/icons@2x.png); background-size: 233px 72px;} #line li a:after { background-image: url(../img/icons@2x.png); background-size: 233px 72px;} } /** * cols */ #wrapper { text-align: center;} #head > .container, .content > .container, #foot > .container { position: relative; width: 1280px; margin: 0 auto; text-align: left;} .col { float: left; width: 850px;} .side { float: right; width: 300px;} /** ******************************************************* * header */ #head { margin: 50px 0 30px; border-top: 24px solid #40ae49;} #head > .container { padding: 30px 0 30px;} #head h1 { float: left; margin-left: 50px;} #head h1 a, #head h1 img { display: block; max-width: 175px;} #nav { float: right; margin: 0 50px 0; text-transform: uppercase;} #nav-sec { position: absolute; top: -58px; right: 50px; left: 0; text-align: right;} #head nav li { display: inline;} #nav li { padding: 0 0 0 50px;} #nav a { font-size: 24px; color: #666;} #nav a:hover, #nav a:focus { color: #40ae49;} #nav .selected { border-bottom: 2px solid #40ae49;} #nav-sec li:after { content: '—';} #nav-sec li.split:after, #nav-sec li.last:after { content: '';} #nav-sec li.split { margin-right: 15px;} #nav-sec a { padding: 0 5px; color: #666;} #nav-sec a:hover, #nav-sec a:focus, #nav-sec .last a:hover, #nav-sec .last a:focus { color: #40ae49;} #nav-sec .last a { text-transform: uppercase; color: #000;} #nav-sec .external { color: #a16197} #nav-menu { position: absolute; right: 15px; top: 20px; display: none; width: 36px; height: 36px;} #mobile-menu { display: none; margin: 0 0 20px; background-color: #40ae49; font-size: 24px;} #mobile-menu a { display: block; color: #fff;} #mobile-menu a:hover, #mobile-menu a:focus { background-color: #2e7e35;} #mobile-menu .selected, #mobile-menu .selected:hover, #mobile-menu .selected:focus { background-color: #9fd6a4;} /** ******************************************************* * content */ .content { padding: 0 0 1px 0;} .content > .container { width: 1180px; padding: 0 50px 29px;} .content h1 { font-size: 42px; line-height: 1.2; margin-bottom: 30px; text-transform: uppercase; color: #40ae49;} .content h2 { font-size: 42px; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase; color: #40ae49;} .content h3 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; text-transform: uppercase; color: #40ae49;} .content h4 { font-size: 18px; line-height: 1; margin-bottom: 10px; text-transform: uppercase; color: #40ae49;} .content h1 + time { display: block; margin: -30px 0 30px;} .text { margin-bottom: 30px;} .text p, .text ul, .text ol, .text dl { margin-bottom: 15px; line-height: 1.4;} .text ul, .ls { list-style-type: disc; margin-left: 20px;} .text ol { list-style-type: decimal; margin-left: 20px;} .text ol[type=i] { list-style-type: lower-roman;} .text ol[type=a] { list-style-type: lower-alpha;} .text .no-ls { list-style-type: none; margin-left: 0;} img { max-width: 100%; max-height: 100%; width: auto; height: auto;} .intro { margin-bottom: 60px;} .intro, .intro p { font-size: 24px; line-height: 1.4;} .color { color: #40ae49;} .source { font-size: 12px; color: #999;} .med { font-size: 18px; } .med sup { font-size: 12px; top: -5px;} .col2, .col2-3, .col3, .col3-4, .col4 { float: left; margin-right: 3.8%;} .col2 { width: 48%;} .col2-3 { width: 65.4%;} .col3 { width: 30.75%;} .col3-4 { width: 74.05%;} .col4 { width: 22.05%;} .col2.last, .col2-3.last, .col3.last, .col3-4.last, .col4.last { margin-right: 0;} .ls-pag { margin-bottom: 45px; text-align: center; font-size: 18px; line-height: 1.2; text-transform: uppercase;} .ls-pag li { display: inline;} .ls-pag a { display: inline-block; padding: 5px 12px; background-color: #40ae49; color: #fff;} .ls-pag a:hover, .ls-pag a:focus, .ls-pag .selected { background-color: #9fd6a4;} #gmap { width: 100%; height: 300px;} #gmap img { max-width: inherit; max-height: inherit;} .link { text-transform: uppercase; font-size: 16px; text-decoration: underline; white-space: nowrap;} .link:after { content: " →";} .inner { padding: 0 40px 1px;} .actions {} .actions a { margin-right: 15px; vertical-align: middle;} #home-main, #m2m-home, .service-main, .instagram, #about-intro, .videos, .tech { margin: 0 -50px 45px; padding: 50px 50px 0;} .middle { text-align: center; margin-left: 60px; margin-right: 60px;} /** ******************************************************* * pages */ #home-main { margin-bottom: 60px; padding: 30px 50px; background: #f4f2f2;} #home-main div { float: left; max-width: 400px; margin: 20px 0;} #home-main h2 { margin-bottom: 40px; font-size: 42px; line-height: 1; color: #666;} #home-main h2 .color { color: #40ae49;} #home-main .bt { margin-bottom: 5px;} #home-main p { position: relative; float: right; max-width: 768px;} #home-main p .play { position: absolute; left: 335px; top: 185px;} #solutions-acc { margin-bottom: 90px; text-align: center;} #solutions-acc .intro { padding: 0 260px;} #solutions-acc .solution-container { margin-bottom: 30px; background: url(../img/split-v.png) center 0 repeat-y;} #m2m-home { position: relative; margin-bottom: 0; padding: 50px 0 0; background: #f1efef} #m2m-home h2, #m2m-home .desc { position: relative; z-index: 5; margin-left: 50px; margin-right: 50px;} #m2m-home .intro { margin-bottom: 0;} #concepts { float: right; margin-bottom: 15px; color: #999; text-transform: uppercase;} #panel { position: relative; z-index: 1; width: 1280px; overflow: scroll; overflow-y: hidden;} #panel > div { position: relative; width: 2246px;} #panel img { display: block;} #panel p { position: absolute; right: 100px; top: 130px;} #panel .event { position: absolute; z-index: 10;} #panel .event a { display: block; width: 28px; height: 28px; color: #40ae49; font-size: 20px; line-height: 28px; text-align: center; border: 3px solid #40ae49; background-color: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-box-shadow: #999 0 0 15px; -webkit-box-shadow: #999 0 0 15px; box-shadow: #999 0 0 15px;} #panel .event .selected, #panel .event .selected:hover, #panel .event .selected:focus { background-color: #f0ebeb; border-color: #999; color: #999;} #panel .event a:hover, #panel .event a:focus { border-color: #666; color: #666;} #panel .event p { display: none; position: absolute; top: 58px; left: -82px; width: 180px; padding: 10px; background: url(../img/opacity75-w.png) 0 0 repeat; font-size: 14px; text-align: center; border: 1px solid #6d6c72; -moz-box-shadow: #666 0 5px 15px; -webkit-box-shadow: #666 0 5px 15px; box-shadow: #666 0 5px 15px;} #panel #event4 p, #panel #event7 p { top: 78px;} #event1 { top: 133px; left: 176px;} #event2 { top: 150px; left: 353px;} #event3 { top: 150px; left: 486px;} #event4 { top: 72px; left: 760px;} #event5 { top: 15px; left: 1213px;} #event6 { top: 226px; left: 1417px;} #event7 { top: 27px; left: 1716px;} #panel::-webkit-scrollbar { -webkit-appearance: none; } #panel::-webkit-scrollbar:vertical { width: 11px;} #panel::-webkit-scrollbar:horizontal { height: 11px;} #panel::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; background-color: rgba(0, 0, 0, .5);} #panel::-webkit-scrollbar-track { background-color: #fff; border-radius: 8px; } #m2m-home .panel-nav { margin-left: 50px;} #m2m-home .panel-nav a { display: inline-block; margin: 0 1px 0 0; padding: 3px 8px; background-color: #40ae49; color: #fff; text-transform: uppercase;} #m2m-home .panel-nav .disabled { cursor: default; background-color: #999;} /* solutions */ .solution-container { margin-bottom: 60px; text-align: center;} .solution-container > p { margin: 30px 0;} .solution { max-width: 490px; margin: 0 auto; font-size: 18px;} .solution img { position: relative; top: 0; z-index: 1; margin-bottom: -115px;} .solution:hover img { top: -20px;} .solution h3, .solution p { position: relative; z-index: 2;} #automative-insurance-telematics .service-main { background: url(../img/ait.jpg?v=2) 0 0 no-repeat;} #vehicle-finance-telematics .service-main { background: url(../img/vft.jpg?v=2) 0 0 no-repeat;} .service-main { position: relative; height: 487px; max-height: 487px; overflow: hidden;} .service-main h1 { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 0; padding: 25px 0 25px 85px; font-size: 24px; color: #fff; background-color: #40ae49;} .service-main h1.fixed { position: fixed; top: 0; bottom: auto; z-index: 300; background: transparent url(../img/bg-bar.png) 0 0 repeat;} .service-main h1.fixed em { display: block; width: 1195px; padding: 0 0 0 0; margin: 0 auto; font-style: normal;} .service-main h2 { max-width: 500px; font-size: 42px; color: #fff;} .solution-other { position: absolute; width: 125px; right: -300px; top: 50px;} .solution-other.pos { right: 50px; top: 50px;} .solution-other em { display: block; margin-top: -45px; text-align: center; font-size: 12px; font-style: normal; text-align: center; text-transform: uppercase; line-height: 1;} .ubi-sloution { margin-bottom: 60px;} .ubi-sloution h3 { margin-bottom: 50px; color: #40ae49;} .ubi-sloution div { margin-bottom: 25px; text-align: center;} .ubi-sloution div .pc { position: relative; display: block; margin-bottom: 3px;} .ubi-sloution div .pc em { position: absolute; top: 45px; left: 0; right: 0; font-size: 42px; font-style: normal; color: #40ae49; text-align: center;} .ubi-sloution div strong { display: block;font-size: 14px; line-height: 1.2; letter-spacing: 0.15em; font-weight: normal; text-transform: uppercase;} .ubi-sloution > p { color: #999;} .ubi-world { margin-bottom: 60px;} .ubi-world > div { position: relative;} .ubi-world h2 { font-size: 32px; text-align: center;} .ubi-world h2 b { color: #666;} .world1 h4 { position: absolute; left: 138px; right: 0; top: 110px; width: 204px; text-align: center; font-size: 26px;} .world2 img { display: block; margin-bottom: 15px;} .world2 em { position: absolute; color: #fff; width: 66px; text-align: center; font-style: normal; font-size: 18px;} .na { left: 138px; top: 33px;} .eu { left: 262px; top: 33px;} .as { left: 405px; top: 83px;} .benefits { margin-bottom: 60px; font-size: 24px; line-height: 1.2;} .benefits li { margin-bottom: 12px;} .benefits em { float: left; display: block; width: 30px; height: 30px; margin-top: -2px; line-height: 32px; background-color: #40ae49; color: #fff; font-size: 20px; font-style: normal; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} .benefits p { margin-left: 55px;} .features { margin-bottom: 60px; text-align: center;} .features h4 { margin-bottom: 10px; font-size: 16px; letter-spacing: 0.15em; text-transform: uppercase;} .features a:hover img, .features a:focus img { transform:rotate(-7deg); -ms-transform:rotate(-7deg); -webkit-transform:rotate(-7deg);} .features p { text-align: left; font-size: 13px;} .spec-sheet { margin: -30px 0 60px;} .tech { position: relative; padding-bottom: 80px; background-color: #40af49; color: #f7f5f5; font-size: 24px; overflow: hidden;} .tech h2 { color: #fff;} .tech p { margin-bottom: 60px;} .tech img { margin-top: -30px;} .tech .col2.last { text-align: center;} .tech-nav { position: absolute; bottom: 30px; margin-bottom: 0!important;} .tech-nav a { display: inline-block; width: 22px; height: 22px; margin-right: 5px;} .stats { margin-bottom: 60px; font-size: 20px; line-height: 1; text-transform: uppercase; color: #40af49;} .fr .stats { font-size: 18px;} .stats div { position: relative; min-height: 138px; margin-bottom: 40px;} .stats .up { text-align: right;} .stats p { max-width: 200px; margin-left: 80px;} .stats .up p { margin-left: 95px;} .stats img { position: absolute; left: 0; top: 0;} .stats em { font-style: normal; font-size: 52px; line-height: 1; vertical-align: text-top;} .stats b { white-space: nowrap;} .fr .stats .first em { margin-left: 25px;} /* what we do */ .how { margin-bottom: 60px; font-size: 24px;} .how .inner { padding: 0 80px 1px;} .how h2 { margin-bottom: 45px; text-align: center;} .how h3 { font-size: 30px;} .how li { width: 100%; margin-bottom: 45px; padding-bottom: 45px; background: url(../img/split-h.png) 0 bottom repeat-x;} .how p { margin-bottom: 15px;} .how p + h3 { margin-top: 45px;} .how .how-img { visibility: hidden;} /* about */ #about-intro { margin-bottom: 60px; padding-right: 0;} #about-intro .inner { padding-left: 60px; padding-right: 0;} #about-intro h3 { color: #666;} #about-intro img { float: right; margin-top: -150px; width: auto; height: auto; max-height: 600px;} .t-icon {} .t-icon img { float: left;} .t-icon h1 { margin-left: 145px; padding-top: 10px; color: #666;} #timeline { margin: 0 40px 45px;} #line { position: relative; width: 100%; overflow: hidden; margin-bottom: 45px; background: url(../img/split-h.png) 0 75px repeat-x;} #line:after { content: ''; position: absolute; z-index: 5; right: 0; top: 0; bottom: 0; width: 70px; background: url(../img/fade-right.png) 0 0 repeat-y;} #line:before { content: ''; position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 70px; background: url(../img/fade-left.png) 0 0 repeat-y;} #line div { position: relative; z-index: 4; padding: 0 0 0 43%; overflow: hidden;} #line ul { width: 9999px; padding-bottom: 30px; overflow: hidden;} #line li { position: relative; float: left; min-width: 126px; margin-right: 50px; text-align: center;} #line li a:after { position: absolute; left: 50%; bottom: -30px; content: ''; display: block; width: 29px; height: 28px; margin-left: -14px;} #line b { font-size: 42px; line-height: 1; color: #40ae49;} #line small { display: block; font-size: 18px; line-height: 1; text-transform: uppercase;} #time { position: relative; width: 1020px; overflow: hidden; margin-bottom: 30px;} #time ul { width: 99999px;} #time li { float: left; width: 780px; font-size: 24px; padding: 0 120px; text-align: center;} #time img { float: left;} #time li b { font-size: 45px; line-height: 1; color: #40ae49;} #time li small { display: block; margin-bottom: -5px; text-transform: uppercase; font-size: 24px; line-height: 1;} #time .img { text-align: left;} #time .img b, #time .img p { display: block; margin-left: 235px;} #time .nav a { position: absolute; top: 50%; display: block; margin-top: -22px; width: 36px; height: 44px;} #time .nav .next { right: 0;} #time .nav .prev { left: 0;} .instagram { margin-bottom: 60px; padding-bottom: 30px; background-color: #f1efef; text-align: center;} .instagram li { display: inline-block; margin: 0 30px 30px 0;} .instagram li img { display: block; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} .side .instagram { margin: 30px 0; padding: 0; text-align: left; background-color: transparent;} .side .instagram li { margin: 0 0 5%;} .side .instagram img { display: block; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} #jobs {} #jobs img { float: right; width: 330px; height: auto; margin-top: -30px;} /* contact */ .text .social { margin-left: 0;} .content .social { margin-top: 30px;} #map { margin-bottom: 60px;} /* news */ .news { font-size: 16px;} .news article { width: 100%; overflow: hidden; margin-bottom: 45px;} .news article img { float: left; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} .news time { display: block; text-transform: uppercase; color: #999;} .news article h3, .news article time, .news article p { margin-left: 170px;} .news .no-img h3, .news .no-img time, .news .no-img p { margin-left: 0;} .news.single { margin-bottom: 45px;} .news p + h2, .news ul + h2, .news p + h3, .news ul + h3 { margin-top: 30px;} .news.single time { margin: -30px 0 30px;} .news.single img { float: right; margin: 0 0 25px 25px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} /* agent toolbox */ #pg-agt {} #pg-agt .content h1 { font-size: 64px; line-height: 1;} #frm-login { position: relative;} #frm-login input { height: 30px; padding: 5px 15px; font-size: 18px;} #pg-agt section { margin-bottom: 30px;} #pg-agt .downloads { margin-bottom: 30px;} .downloads > div { margin-bottom: 25px;} .downloads img { display: block; margin-bottom: 12px;} .downloads a:hover h4, .downloads a:focus h4 { color: #000;} .videos { padding-bottom: 25px; background-color: #f1efef;} .youtube { display: block; position: relative; margin-bottom: 12px; background-color: #fff;} .youtube img { margin-bottom: 0;} .youtube:after { content: ""; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/bt-play-sml.png) 0 0 no-repeat;} .more-download em { font-size: 85%; color: #999;} /* error */ #error-img { float: left;} #error-404 { margin-left: 360px;} /** ******************************************************* * footer */ #foot { background-color: #f2f1f1; font-size: 18px;} #foot > .container { width: 1180px; padding: 30px;} #foot h2 { margin-bottom: 10px; font-size: 24px; line-height: 1; color: #40ae49;} #foot h3 { font-size: 18px; color: #40ae49;} .copy { margin-top: 15px; font-size: 14px;} .imetrik {} .imetrik img { float: left; margin-top: 20px; max-width: 80px;} .imetrik > div { margin: 0 0 30px 115px;} .imetrik p { margin-bottom: 12px;} #foot nav { margin-bottom: 15px; font-size: 18px;} #foot nav li { } #foot nav a { } #foot form { margin-bottom: 20px;} #foot form * { vertical-align: middle;} #foot form input { max-width: 65%; margin-right: -5px; padding: 10px 12px 11px;} .fr #foot form input { max-width: 60%;} #foot form button span span { padding: 13px 20px; background-color: #8a8a8d;} .social {} .social li { display: inline;} .social a { display: inline-block; width: 38px; height: 38px; line-height: 34px; margin-right: 15px; text-align: center; border: 1px solid #ddd; background-color: #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} .social a img { vertical-align: middle;} /** ******************************************************* * responsive */ @media screen and (max-width: 1079px) { #head > .container, .content > .container, #foot > .container, #panel { width: 1024px;} .content > .container { width: 924px;} #foot > .container { width: 964px;} #time { width: 844px;} .col { float: left; width: 594px;} #nav { margin-left: 0; margin-top: 32px;} #nav li { padding-left: 40px;} #nav a { font-size: 22px;} /* home */ #home-main div { max-width: 25%;} #home-main h2 { font-size: 30px;} #home-main p { max-width: 70%;} #home-main p .play { left: 270px; top: 155px;} #m2m-home { padding: 30px 0 0;} #m2m-home h2, #m2m-home .desc { margin-left: 30px;} #panel p .bt { font-size: 16px;} #m2m-home .panel-nav { margin-left: 30px;} /* solutions */ .solution { max-width: 90%;} #solutions-acc .intro { padding: 0 60px;} .service-main h1 { padding-left: 90px;} .ubi-sloution div .pc em { top: 40px; font-size: 36px;} .ubi-sloution div strong { font-size: 12px;} .world1 h4 { left: 105px; top: 80px; width: 157px; font-size: 19px;} .world2 em { width: 55px; font-size: 14px;} .na { left: 105px; top: 26px;} .eu { left: 200px; top: 26px;} .as { left: 310px; top: 64px;} .stats { font-size: 16px;} .fr .stats { font-size: 14px;} .stats em { font-size: 32px;} .stats .up p { margin-left: 110px;} .fr .stats .first em { margin-left: 0;} .fr .features h4 { font-size: 13px;} /* about */ #about-intro img { max-width: 250px; margin-top: -100px;} #timeline { margin-left: 0; margin-right: 0;} #time li { width: 604px;} #jobs img { width: 280px;} /* contact */ .i-lg textarea { width: 300px;} /* agent toolbox */ #pg-agt .content h1 { font-size: 60px;} .more-download { font-size: 14px;} /* foot */ #foot { font-size: 15px;} .imetrik > div { margin-left: 100px;} #foot form input { width: 180px;} .fr #foot form input { width: 160px;} .social a { margin-right: 5px;} } @media screen and (max-width: 1023px) { #head > .container, .content > .container, #foot > .container, #panel { width: 768px;} #timeline, #time, .content > .container { width: 668px;} #foot > .container { width: 708px;} #timeline { margin-left: 0; margin-right: 0;} .col { float: left; width: 338px;} .inner, .how .inner { padding: 0;} .middle { margin-left: 0; margin-right: 0;} #head > .container { padding: 20px 0 0;} #head h1 { margin-top: -87px;} #head h1 img { max-width: 120px} #nav { float: none; margin-top: 0; clear: left;} #nav a { font-size: 20px;} #nav-sec { left: 250px;} /* home */ #home-main div { margin-top: 0;} #home-main h2 { margin-bottom: 20px; font-size: 20px;} #home-main .bt { font-size: 16px;} #home-main p .play { left: 180px; top: 85px;} /* solutions */ .service-main h1 { padding-left: 50px;} .solution h3 { font-size: 20px;} .solution img { margin-bottom: -90px;} .ubi-sloution div .pc em { top: 50px;} .ubi-sloution div strong { font-size: 14px;} .world1 { margin-bottom: 30px;} .world1 h4 { left: 165px; top: 130px; width: 237px; font-size: 31px;} .world2 em { width: 86px; font-size: 20px;} .na { left: 174px; top: 43px;} .eu { left: 332px; top: 43px;} .as { left: 513px; top: 105px;} .tech { font-size: 20px;} .tech img { margin-top: 0; max-width: 90%;} .stats { font-size: 20px;} .fr .stats { font-size: 20px;} .fr .features h4 { font-size: 18px;} /* about */ #about-intro .inner { padding-left: 0;} #about-intro img { max-width: 200px; margin-top: -80px;} #line div { padding-left: 40%;} #time li { width: 508px; padding-left: 80px; padding-right: 80px;} .instagram li { width: 20%; margin: 0 2% 2%;} .side .instagram li { width: 45%; margin: 0 2% 2%;} .twitter-timeline { margin-bottom: 30px;} #jobs img { width: 200px; margin-top: 0;} /* news */ .news article img { display: none;} .news article h3, .news article time, .news article p { margin: 0;} .news.single img { float: none; display: block; margin: 0 auto 15px;} /* agent toolbox */ .more-download { font-size: 16px;} /* footer */ #foot { font-size: 14px;} #foot > .container { padding-top: 15px; padding-bottom: 1px;} #foot nav { font-size: 16px;} #foot-contact { width: 100%; overflow: hidden; margin: 30px 0 0;} } @media screen and (max-width: 767px) { #head > .container, .content > .container, #foot > .container, #panel { width: 640px;} .content > .container, #foot > .container, #timeline, #time, #timeline { width: 580px;} .content > .container { padding: 0 30px 1px;} #home-main, #m2m-home, .service-main, .instagram, #about-intro, .tech { margin: 0 -30px 45px; padding: 30px 30px 0;} .col { float: none; width: auto;} .side { width: 100%;} .intro, .intro p { font-size: 20px;} #head h1 { margin-left: 30px;} #nav { margin-left: 30px;} #nav li { padding-left: 0; padding-right: 20px;} #nav a { font-size: 18px;} #nav-sec { left: 200px; right: 30px;} #nav-sec li.split { margin-right: 5px;} /* home */ #home-main { padding-bottom: 30px;} #home-main h2 { font-size: 18px;} #home-main p .play { left: 150px; top: 70px;} #panel { margin-left: -30px;} #m2m-home h2, #m2m-home .desc { width: auto; margin-left: 0; margin-right: 15px;} #m2m-home .panel-nav { margin-left: 0;} /* solutions */ .solution { font-size: 16px;} .service-main { height: 300px;} .service-main h1 { font-size: 16px; padding: 15px 30px;} .service-main h2 { max-width: 380px; font-size: 30px; color: #fff;} .tech-nav { bottom: 15px;} .world1 h4 { left: 155px; top: 120px; width: 222px; font-size: 28px;} .world2 em { width: 70px; font-size: 20px;} .na { left: 153px; top: 36px;} .eu { left: 292px; top: 36px;} .as { left: 448px; top: 93px;} .fr .stats { font-size: 18px;} /* how */ .how { font-size: 18px;} /* about */ #about-intro .col2-3 { width: 100%; margin-right: 0;} #about-intro img { display: none;} #line div { padding-left: 39%;} #time li { width: 420px; font-size: 16px;} .instagram { padding-bottom: 30px;} #jobs .col2-3 { width: 100%; margin-right: 0;} #jobs img { display: block; float: none; width: 250px; margin: 0 auto; margin-bottom: 45px;} /* news */ .news article img { display: block; max-width: 75px;} .news article h3, .news article time, .news article p { margin-left: 95px;} .twitter-timeline { float: left; width: 300px;} .side .instagram { float: right; width: 250px; margin-top: 0;} /* agent toolbox */ .more-download { font-size: 14px;} #error-img { float: none;} #error-404 { margin-left: 0;} /* footer */ #foot form input { width: 130px;} .fr #foot form input { width: 110px;} .social a { margin-right: 2px;} } @media screen and (max-width: 639px) { #head > .container, .content > .container, #foot > .container, #panel { width: 480px;} .content > .container, #foot > .container, #timeline, #time, #timeline { width: 450px;} #nav, #nav-sec { display: none;} #nav-menu { display: block;} #pg-agt.login #nav-menu { display: none;} .content > .container { padding: 0 15px 1px;} #home-main, #m2m-home, .service-main, .instagram, #about-intro, .tech { margin: 0 -15px 45px; padding: 30px 15px 0;} .content h1, #pg-agt .content h1 { font-size: 28px;} .content h2 { font-size: 24px;} .content h3 { font-size: 18px;} .content h4 { font-size: 16px;} .middle { text-align: left;} #head { min-height: 60px; margin: 0; border-top-width: 12px;} #head .container { padding-top: 10px;} #head h1 { margin: 0 0 15px 15px;} /* home */ #home-main { padding-bottom: 1px;} #home-main div { float: none; max-width: 100%;} #home-main p { float: none; max-width: 100%; margin: 15px 0;} #home-main p .play { left: 170px; top: 85px;} #m2m-home h2, #m2m-home .desc { margin-left: 15px;} #m2m-home { padding-left: 0; padding-right: 0;} #panel { margin-left: 0;} #m2m-home .panel-nav { margin-left: 15px;} #m2m-home #slide { width: auto; height: 310px;} #panel > div { width: 1698px;} #panel p { top: 85px; right: 80px;} #panel .event p { top: 55px; font-size: 12px;} #panel #event4 p, #panel #event7 p { top: 70px;} #event1 { top: 92px; left: 129px;} #event2 { top: 104px; left: 260px;} #event3 { top: 104px; left: 364px;} #event4 { top: 44px; left: 573px;} #event5 { top: 5px; left: 914px;} #event6 { top: 161px; left: 1068px;} #event7 { top: 10px; left: 1292px;} /* solutions */ #solutions-acc .intro { padding: 0;} #solutions-acc .solution-container { background: transparent;} .solution-container > div { margin-bottom: 30px;} #automative-insurance-telematics .service-main, #vehicle-finance-telematics .service-main { background-size: cover;} .service-main h1 { font-size: 16px; padding-left: 15px; padding-right: 15px;} .service-main h2 { max-width: 280px; font-size: 22px;} .ubi-sloution div .pc em { top: 45px;} .ubi-sloution div strong { font-size: 12px;} .world1 h4 { left: 120px; top: 90px; width: 172px; font-size: 22px;} .world2 em { width: 62px; font-size: 15px;} .na { left: 117px; top: 28px;} .eu { left: 223px; top: 28px;} .as { left: 345px; top: 70px;} .fr .features h4 { font-size: 14px;} /* how */ .how { font-size: 16px;} /* about */ .tech { font-size: 18px;} .tech .col2 { width: 100%; margin-right: 0;} .tech img { display: block; max-width: 75%; margin: 10px auto 30px;} .tech-nav { position: absolute; bottom: 15px;} .benefits { font-size: 20px;} .stats { font-size: 16px;} .actions a { margin-bottom: 10px;} .t-icon img { max-width: 80px;} .t-icon h1 { margin-left: 100px; padding-top: 0;} #line { background-position: 0 63px;} #line div { padding-left: 40%;} #line li { min-width: 80px; margin-right: 25px;} #line b { font-size: 32px;} #line small { font-size: 14px;} #time { width: 480px; margin-left: -15px;} #time li { width: 400px; padding-left: 40px; padding-right: 40px;} #time li b { font-size: 32px;} #time li small { font-size: 16px; margin-bottom: 0;} #time img { max-width: 100px;} #time .img b, #time .img p { margin-left: 115px;} .instagram { padding-bottom: 30px;} /* news */ .twitter-timeline { float: none; width: 100%;} .side .instagram { float: none; width: 300px; margin: 0 auto 30px;} /* agent toolbox */ .more-download { font-size: 18px;} /* footer */ #foot > .container { padding: 15px;} #foot form input { width: 250px;} .fr #foot form input { width: 230px;} #foot nav { display: none;} .social a { margin-right: 5px;} } @media screen and (max-width: 479px) { #head > .container, .content > .container, #foot > .container, #panel { width: 320px;} .content > .container, #foot > .container, #timeline { width: 290px;} .intro, .intro p { font-size: 16px;} .med { font-size: 16px;} button span span, .bt { font-size: 16px;} .bt.big { font-size: 18px;} .fr .bt.big { font-size: 16px;} /* home */ .fr #m2m-home .bt { font-size: 12px; padding: 10px 15px;} #home-main p .play { display: none;} /* solutions */ .solution-other { width: 80px; height: 80px;} .solution-other.pos { right: 15px; top: 30px;} .solution-other em { display: none;} .service-main { height: 200px; padding-top: 15px;} .service-main h1, .service-main h1.fixed { font-size: 14px; padding: 10px 15px;} .service-main h2 { max-width: 185px; font-size: 16px;} .ubi-sloution div .pc em { top: 30px; font-size: 24px;} .ubi-sloution div strong { font-style: 14px;} .ubi-world h2 { font-size: 24px;} .world1 h4 { left: 85px; top: 60px; width: 100px; font-size: 14px;} .world2 em { width: 40px; font-size: 11px;} .na { left: 75px; top: 17px;} .eu { left: 143px; top: 17px;} .as { left: 222px; top: 45px;} .benefits { font-size: 18px;} .ubi-sloution div strong { font-size: 10px;} .stats { font-size: 11px;} .fr .stats { font-size: 11px;} .stats div { min-height: 80px; margin-bottom: 5px;} .stats img { max-width: 30%;} .stats p { margin-left: 45px;} .stats .up p { margin-left: 40px;} .features h4 { font-size: 12px;} .fr .features h4 { font-size: 10px;} .features p { font-size: 10px;} /* about */ .how .col2 { float: none; width: 100%; margin-right: 0;} .how img { margin-bottom: 15px;} .t-icon img { display: none;} .t-icon h1 { margin-left: 0;} #line { background-position: 0 56px;} #line b { font-size: 28px;} #line small { font-size: 12px;} #line div { padding-left: 35%;} #time { width: 320px;} #time li { width: 280px; padding-left: 20px; padding-right: 20px; font-size: 14px;} #time li b { font-size: 32px;} #time li small { font-size: 16px; margin-bottom: 0;} #time img { max-width: 100px;} #time .img b, #time .img p { margin-left: 115px;} .instagram li { width: 44%; margin: 0 2.5% 2.5%;} #jobs .bt { padding: 10px 10px;} .fr #jobs .bt { font-size: 12px;} /* news */ .news article img { display: none;} .news article h3, .news article time, .news article p { margin-left: 0;} /* contact */ .content .social a { margin-right: 2px;} .i-lg label { float: none; display: block;} .i-lg input[type=text], .i-lg input[type=password], .i-lg input[type=email], .i-lg input[type=file], .i-lg textarea, .i-lg select { margin-left: 0;} .i-lg textarea { width: 250px;} .i-lg .submit, html .QapTcha #bgSlider, html .QapTcha #TxtStatus { margin-left: 0;} /* foot */ #foot { font-size: 14px;} #foot h2 { font-size: 18px;} .imetrik > div { margin-left: 105px;} #foot form input { width: 170px;} .fr #foot form input { width: 150px;} } br[data-mce-bogus] {display: none;} /** ******************************************************* * clear */ .clearfix:after, .i-lg .i-text:after, .i-lg .i-textarea:after, .i-lg .i-select:after, .i-lg .i-file:after, .i-lg .i-checkbox:after, .i-lg .i-radio:after, .i-lg .i-multi:after, .how li:after, #foot .container:after, .content >.container:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden;} /** ******************************************************* * anims */ .slideUpGen {animation-name: slideUpGen; -webkit-animation-name: slideUpGen;animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease; -webkit-animation-timing-function: ease;visibility: visible!important}@keyframes slideUpGen {0 {transform: translateY(15%);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}@-webkit-keyframes slideUpGen {0% {-webkit-transform: translateY(15%);opacity: 0;}100% {-webkit-transform: translateY(0);opacity: 1;}} /** ******************************************************* * ColorBox Core Style */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /** ******************************************************* * QapTcha CSS */ .QapTcha{ width: 492px; margin: 0 0;} .QapTcha .clr{clear:both;} .QapTcha #bgSlider{width:202px;height:22px; margin-bottom: 3px; margin-left: 110px; background:transparent url('../img/slider.png') no-repeat 0 -22px;float:left;} .QapTcha #Slider{width:48px;height:22px;background:transparent url('../img/slider.png') no-repeat -32px 0;cursor:e-resize;} .QapTcha #Icons{float:left;width:16px;height:16px; margin-bottom: 0;background:transparent url('../img/slider.png') no-repeat 0 0;margin-top:3px;margin-left:10px;} .QapTcha #TxtStatus{ margin:-10px 0 0 110px;font-size:14px;clear:both;} .QapTcha .dropSuccess{color:#40ae49;} .QapTcha .dropError{color:#40ae49;}