/* * WFS Solution Advisor * * @author DS */ .sub-header { border:none !important; } .right-col { position:static !important; } #advisor_overlay { position:fixed; z-index: 1100; top:-40px; right:0; bottom:0; left:0; background-color:#000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */ filter: alpha(opacity=75); /* IE 5-7 */ -moz-opacity: 0.75; /* Netscape */ -khtml-opacity: 0.75; /* Safari 1.x */ opacity: 0.75; /* Good browsers */ } // fonts new /* #advisor { font-family: "Gotham SSM Book", Arial, Helvetica, sans-serif; font-size: 12px; } */ /* #advisor h1 { font-family: 'Gotham Medium'; font-weight:normal; font-size:40px; line-height:40px; } */ /* #advisor h2 { font-family: 'Gotham Medium'; font-weight:normal; font-size:25px; line-height:25px; } */ /* #advisor h1.dark { font-family: 'Gotham Book'; font-weight:normal; font-size:34px; line-height:40px; } */ /* #advisor h1.dark strong { font-family: 'Gotham Medium'; font-weight:normal; } */ /* #topics li h3 strong { font-family: 'Gotham Medium'; font-weight:normal; } */ /* #topics li .topic_box ul.items li label.sel { font-family:"Gotham SSM Medium"; } */ /* #result_sheet h3 { font-family:"Gotham SSM Medium"; font-size:15px; line-height:15px; } */ /* #result_sheet h4 { font-family:"Gotham SSM Medium"; font-size:14px; line-height:13px; } */ /* #result_sheet ul.highlights li h4 { font-family:"Gotham SSM Medium"; line-height:14px; font-size:12px; } */ // fonts old #advisor { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px; } #advisor .h1, #advisor .h2, #advisor .h3, #advisor .h4, #advisor .h5, #advisor .h6, #advisor h1, #advisor h2, #advisor h3, #advisor h4, #advisor h5, #advisor h6, #advisor * { font-family: Arial, Helvetica, sans-serif; } #advisor .glyphicon { font-family: 'Glyphicons Halflings' !important; } #advisor .tt-icon { font-family: 'tomtom-icons' !important; } #advisor h1 { font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:40px; line-height:40px; } #advisor h2 { font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:25px; line-height:25px; } #advisor h1.dark { font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-size:34px; line-height:40px; } #advisor h1.dark strong { font-family: Arial, Helvetica, sans-serif; font-weight:bold; } #topics li h3 strong { font-family: Arial, Helvetica, sans-serif; font-weight:bold; } #topics li .topic_box ul.items li label.sel { font-family:Arial, Helvetica, sans-serif;; } #result_sheet h3 { font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:15px; font-weight:bold; } #result_sheet h4 { font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:13px; font-weight:bold; } #result_sheet ul.highlights li h4 { font-family:Arial, Helvetica, sans-serif; line-height:14px; font-size:12px; font-weight:bold; } #advisor { position:relative; z-index:1200; margin:auto; width:948px; height:628px; top: 20px; left: 50%; margin-left: -474px; color:#424542; border:1px solid #fff; background: #ffffff; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #ffffff 10%, #d7d7d6 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%,#ffffff), color-stop(100%,#d7d7d6)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ffffff 10%,#d7d7d6 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ffffff 10%,#d7d7d6 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ffffff 10%,#d7d7d6 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #ffffff 10%,#d7d7d6 100%); /* W3C */ -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; cursor: default; -webkit-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.75); /* WebKit */ -moz-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.75); /* Firefox */ box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.75); /* Standard */ } /* box-sizing: border-box; */ /*@media (min-width: 1024px) and (max-width: 1279px) { #advisor { left: 16px; } } @media (max-width: 1023px) { #advisor { left: 0; } }*/ #advisor *, #advisor:after, #advisor:before { box-sizing: initial; } /* Don't show shadows when selecting text */ ::-moz-selection { background: #5af; color: #fff; text-shadow: none; } ::selection { background: #5af; color: #fff; text-shadow: none; } #border { position:absolute; top:0; left:0; width:946px; height:626px; } /* TODO: This shouldn't have a fixed with */ #advisor #loading { position:absolute; top:50%; left:50%; width:300px; height:30px; margin:-15px 0 0 -150px; font-weight:bold; text-align: center; /*display:none;*/ } #advisor #loading img { position:relative; top:0; } #advisor #loading span { padding:0 0 0 4px; } #container { position:absolute; top:0; left:0; width:946px; height:626px; } #advisor h1, #advisor h2, #advisor h3 { padding:0; margin:0; text-shadow: 0px 1px 1px #fff, 0 0 0 #555; /*-webkit-text-stroke: 1px rgba(0,0,0,0.01);*/ } /* green = #bdd52e = rgba(156,176,44, 0.8) =>> rgba(177,200,38, 0.8) dark grey = #424542 = rgba(66,69,66, 0.8) =>> rgba(0,0,0, 0.8) */ #advisor h1 { color: rgba(177,200,38, 0.8); border-bottom:1px solid #313431; margin:0 29px 0 29px; } #advisor h1 span { display:block; border-bottom:1px solid #111; padding:0 0 8px 0; } #advisor h2 { color: rgba(30,30,30, 0.8); padding:11px 0 0 0; } #advisor h1.dark { color: rgba(20,20,20, 0.8); } #advisor h1.dark strong { color: rgba(177,200,38, 0.8); } table.sheet { text-align:center; vertical-align:middle; width:948px; height:628px; } table.sheet tr td { text-align:center; vertical-align:middle; width:948px; height:628px; } i.icon { background:url(/_ttt/lib/components/solution-advisor/img/icons.png) no-repeat; } p.notice { padding:16px; text-align:center; } p.notice span { background:#ddd; padding:10px; } iframe.thankyou { position:absolute; bottom:0; right:0; width:10px; height:10px; } /* * intro sheet */ #sheet-intro .btn { margin-top:50px; } #sheet-intro #advisorlogo { margin-bottom:20px; } /* * intro cookie sheet */ #sheet-introc p.notice { margin:20px; font-size:20px; } #sheet-introc #advisorlogo { margin-bottom:20px; } /* * fleet size sheet */ #sheet-fleetsize #txtFleetsize { font-size:60px; line-height:60px; font-family: Arial, Helvetica, sans-serif; color:#424542; margin:40px 0; padding:0; text-align:center; font-weight:bold; width:164px; border:1px solid transparent; background:transparent; } #sheet-fleetsize #txtFleetsize.hover, #sheet-fleetsize #txtFleetsize:focus { background-color:#fff; border-color:#424542; outline:none; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* WebKit */ -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* Firefox */ box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* Standard */ } #sheet-fleetsize #notice250 { position:relative; top:30px; } #sheet-fleetsize .btn { margin-top:50px; } #sheet-fleetsize #slider { margin:0 auto; cursor:pointer; background:#424542; width:600px; height:16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 2px 2px 7px 0px rgba(0, 0, 0, 1), 1px 1px 1px 0px rgba(255, 255, 255, 0.75); /* WebKit */ -moz-box-shadow: inset 2px 2px 7px 0px rgba(0, 0, 0, 1), 1px 1px 1px 0px rgba(255, 255, 255, 0.75); /* Firefox */ box-shadow: inset 2px 2px 7px 0px rgba(0, 0, 0, 1), 1px 1px 1px 0px rgba(255, 255, 255, 0.75); /* Standard */ } #sheet-fleetsize #slider .ui-slider-range { background:#bdd52e; top:-1px; bottom:-1px; left:-1px; height:18px; cursor:pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.75), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.75); /* WebKit */ -moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.75), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.75); /* Firefox */ box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.75), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.75); /* Standard */ } #sheet-fleetsize #slider .ui-slider-handle { width:30px; height:30px; cursor:pointer; top:-8px; left:-8px; border:1px solid #b2b2b2; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); /* WebKit */ -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); /* Firefox */ box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); /* Standard */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #b2b2b2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#b2b2b2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#b2b2b2 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#b2b2b2 100%); /* W3C */ } /* * vehicle type sheet */ #vehicletypes { margin:20px 0 0 0; padding:0; list-style-type:none; text-align:center; } #vehicletypes li { display:inline-block; width:164px; height:152px; position:relative; margin:0 20px 0 0; padding:0; background: #e5e5e5; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ border:2px solid #d9dad9; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; } #vehicletypes li#trucks { margin-right:0; } #vehicletypes li.hover { cursor:pointer; border-color:#bdd52e; } #vehicletypes li.active { border-color:#424542; } #vehicletypes li h3 { position:absolute; text-align:center; font-size:22px; font-weight:bold; line-height:22px; bottom:30px; left:0; right:0; } #vehicletypes li.hover h3 { color: rgba(177,200,38, 0.8); } #vehicletypes li .icon { display:block; height:60px; position:absolute; bottom:62px; left:50%; } #vehicletypes li#cars .icon { width:89px; margin-left:-45px; } #vehicletypes li#vans .icon { width:95px; background-position:-89px 0; margin-left:-47px; } #vehicletypes li#coaches .icon { width:125px; background-position:-184px 0; margin-left:-62px; } #vehicletypes li#trucks .icon { width:110px; background-position:-309px 0; margin-left:-55px; } #sheet-secondary #btn-show-result { margin-top:40px; } /* * topics sheet */ td#topics_sheet { text-align:left; } #topics_sheet h1 { position:relative; } #topics_sheet h1 span { padding-left:30px; padding-right:120px; } #topics_sheet h1 .icon { position:absolute; right:0; bottom:4px; height:46px; } .cars h1 .icon { width:68px; background-position:0 -60px; } .vans h1 .icon { width:73px; background-position:-68px -60px; } .coaches h1 .icon { width:96px; background-position:-141px -60px; } .trucks h1 .icon { width:84px; background-position:-237px -60px; } #topics_sheet #sheet_nav { position:absolute; bottom:29px; left:59px; right:29px; } .btnGroup { position:absolute; right:0; top:-2px; height:46px; } .btnGroup .or { padding:0 8px; } .btnGroup .btn { position:relative; top:-1px; margin:5px; } #topics_sheet .notice { text-align:left; padding:0; } ul#topics { margin:20px 0 80px 59px; padding:0; list-style-type:none; width:850px; height:330px; } #topics li { margin:0 30px 25px 0; padding:0; display:block; width:400px; height:88px; float:left; position:relative; z-index:80; } #topics li.col_right { margin-right:0 !important; } .topic_box { position:absolute; top:0; left:0; right:0; padding:84px 0 0 0; height:0px; overflow:hidden; position:relative; border:2px solid transparent; z-index:100; } #topics li table { position:absolute; top:0px; height:84px; left:85px; right:10px; width:260px; } #topics li table tr td { text-align:left; vertical-align:middle; width:auto; height:auto; } #topics li h3 { font-size:18px; line-height:22px; font-weight:normal; } #topics li h3 strong { color: rgba(177,200,38, 0.8); } #topics li span.itemCount { position:absolute; width:16px; height:13px; font-size:10px; line-height:10px; padding:4px 0 0 0; margin:0; top:1px; right:1px; background:#424542; color:#fff; text-align:center; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } #topics li i.icon { width:60px; height:60px; position:absolute; top:12px; left:13px; } #topics .costs_MJ i.icon { background-position:-297px -174px; } #topics .safety_J i.icon { background-position:-357px -294px; } #topics .service_J i.icon { background-position:-357px -354px; } #topics .tracking_M i.icon { background-position:-237px -294px; } #topics .navigation_MC i.icon { background-position:-237px -234px; } #topics .navigation_MT i.icon { background-position:-237px -234px; } #topics .efficiency_MC i.icon { background-position:-357px -234px; } #topics .efficiency_MT i.icon { background-position:-357px -234px; } #topics .tachograph_MJT i.icon { background-position:-297px -234px; } #topics .integration_J i.icon { background-position:-237px -174px; } #topics .fuel_MJC i.icon { background-position:-357px -174px; } #topics .productivity_JC i.icon { background-position:-297px -294px; } #topics .productivity_JT i.icon { background-position:-297px -294px; } #topics .driverperformance_M i.icon { background-position:-237px -354px; } #topics .btnDelete { position:absolute; top:0; right:0; margin:0; width:20px; height:20px; padding:0; font-weight:bold; z-index:150; color:#8d8e8c; text-decoration:none; } #topics .btnDelete span { display:none; } #topics .btnDelete i { position:absolute; top:5px !important; right:5px !important; left:auto !important; width:9px !important; height:9px !important; background:url(/_ttt/lib/components/solution-advisor/img/icons.png) no-repeat !important; background-position: -199px -164px !important; } #topics .btnDelete:hover i { background-position: -199px -154px !important; } #topics li.hover { z-index:1200; } #topics li.hover .topic_box { cursor:pointer; border-color:#bdd52e; background: #e5e5e5; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; } #topics li.active .topic_box { cursor:default; border-color:#424542; background: #e5e5e5; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; } #topics li .topic_box h4 { margin:0 15px; padding:0; font-size:12px; font-weight:bold; } #topics li .topic_box ul.items { margin:5px 0 10px 0; padding:0; list-style-type:none; } #topics li .topic_box ul.items li { margin:0; padding:0; width:auto; height:auto; display:block; float:none; } #topics li .topic_box ul.items li label { font-weight:normal; position:relative; display:block !important; margin:0; padding:4px 10px 3px 35px; width:auto !important; float:none !important; } #topics li .topic_box ul.items li label .icon { position:absolute; top:5px; left:15px; width:14px; height:14px; margin:0; padding:0; background-image:url(/_ttt/lib/components/solution-advisor/img/icons.png) !important; background-repeat:no-repeat !important; background-position:-237px -154px; } #topics li .topic_box ul.items li label input { margin:0; padding:0; display:none; } #topics li .topic_box ul.items li label .name { margin:0; padding:0; font-size:12px; position:relative; top:-2px; } #topics li .topic_box ul.items li label.hover { background-color:#fff; cursor:pointer; } #topics li .topic_box ul.items li label.hover .icon { background-position:-252px -154px; } #topics li .topic_box ul.items li label.pressed .icon { background-position:-267px -154px; } // #topics li .topic_box ul.items li label.sel { } #topics li .topic_box ul.items li label.sel .icon { background-position:-282px -154px; } #topics li .topic_box ul.items li label.sel.hover .icon { background-position:-297px -154px; } #topics li .topic_box ul.items li label.sel.pressed .icon { background-position:-312px -154px; } /* * result sheet */ #result_sheet { height:628px; width:948px; } /*#result_sheet h1 { font-size:30px; line-height:30px; border-color:#b0c237; }*/ #result_sheet h1 { font-size:30px; line-height:30px; border-color:#b0c237; margin:0 19px; } /*#result_sheet h1 span { padding:27px 0 8px 10px; color: rgba(20,20,20, 0.8); border-color:#b0c237; }*/ #result_sheet h1 span { padding:27px 0 5px 10px; color: rgba(20,20,20, 0.8); border-color:#b0c237; } /*#result_sheet h2 { font-size:16px; line-height:16px; font-weight:normal; margin:0 0 0 39px; }*/ #result_sheet h2 { font-size:16px; line-height:16px; font-weight:normal; margin:0 0 0 29px; padding-top:7px; } #result_info { position:absolute; right:21px; top:0px; color:#a9aaa9; } #result_info div { float:left; padding:0 8px; text-align:center; } #result_info div i.icon { display:block; height:28px; margin:12px auto 3px auto; } #result_info div.cars .icon { width:42px; background-position:0 -106px !important; } #result_info div.vans .icon { width:45px; background-position:-42px -106px !important; } #result_info div.coaches .icon { width:59px; background-position:-87px -106px !important; } #result_info div.trucks .icon { width:53px; background-position:-146px -106px !important; } #result_info div .number { display:block; font-weight:bold; font-size:28px !important; line-height:28px; padding:15px 0 0 0; } #result_info div .text { font-size:11px; font-weight:bold; line-height:11px; height:11px; position:relative; top:-3px; } .result_box { position:relative; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* WebKit */ -moz-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* Firefox */ box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* Standard */ } #result_sheet .image { height:120px !important; background-repeat:no-repeat; background-position:bottom center; } #result_sheet h3 { position:relative; padding:12px 10px 10px 10px; margin:1px; text-shadow:none; } #result_sheet h4 { margin:10px 10px 0 10px; padding:0; text-align:center; } #result_sheet h5 { margin:5px 10px 0 10px; padding:0; height:40px; text-align:center; font-size:11px; line-height:14px; font-weight:normal; border-bottom:1px solid #d4d4d4;} #result_sheet ul.features { margin:0 10px; padding:5px 0 0 0; list-style-type:none; border-top:1px solid #ffffff; font-size:11px; line-height:13px; } #result_sheet ul.features li { margin:0; padding:3px 0 3px 7px !important; position:relative; } #result_sheet ul.features li i.icon { position:absolute; left:0px; top:8px; background:#454245; width:3px; height:3px; } #result_sheet ul.highlights { margin:0; padding:0; list-style-type:none; position:absolute; bottom:10px; left:0; right:0; } #result_sheet ul.highlights li { margin:0; padding:0; position:relative; } #result_sheet ul.highlights li i.icon { position:absolute; left:9px; top:-1px; width:41px; height:42px; } #result_sheet ul.highlights li.appcenter .icon { background-position:-278px -106px; } #result_sheet ul.highlights li.tomtomtraffic .icon { background-position:-320px -106px; } #result_sheet ul.highlights li h4 { margin:0 0 0 55px; padding:0; text-align:left; display:none; } #result_sheet ul.highlights li p { margin:0 10px 0 55px; padding:0; text-align:left; font-size:11px; font-weight:normal; line-height:13px; } /*#in_office { width:220px; height:450px; position:absolute; top:120px; left:29px; }*/ #in_office { width:230px; height:465px; position:absolute; top:105px; left:19px; } #in_office h3 { background-color:#b0c237; color:#fff; } #in_office h3 .icon { position:absolute; bottom:0; right:10px; width:38px; height:30px; background-position:-199px -106px; } #in_office .image { background-image:url(https://media.webfleet.com/h_120,c_scale,f_auto,q_auto/media/img/photos/products/screens/wf-mobile-devices.png); } #in_office .lang_fr { background-image:url(https://media.webfleet.com/h_120,c_scale,f_auto,q_auto/media/img/photos/products/screens/wf-mobile-devices.png); } #in_office .lang_de { background-image:url(https://media.webfleet.com/h_120,c_scale,f_auto,q_auto/media/img/photos/products/screens/wf-mobile-devices.png); } #in_office .lang_nl { background-image:url(https://media.webfleet.com/h_120,c_scale,f_auto,q_auto/media/img/photos/products/screens/wf-mobile-devices.png); } /*#in_office.hover { color:#000 !important; }*/ /*#vehicle_tabs { position:absolute; top:120px; left:275px; width:642px; }*/ #vehicle_tabs { position:absolute; top:105px; left:279px; width:650px; } #vehicle_tabs h3 { float:left; position:relative; border:none; margin:0px; color:#424542; text-shadow:none; } #vehicle_tabs h3.active { z-index:80; display:block; padding:12px 70px 12px 10px; background-color:#fff; font-size:16px; line-height:16px; } #vehicle_tabs h3.inactive { z-index:60; top:9px; padding:8px 70px 8px 10px; background-color:#cfcfcf; font-size:14px; line-height:14px; } #vehicle_tabs h3.inactive.hover { text-decoration:underline; cursor:pointer; } #vehicle_tabs h3.active.hover { text-decoration:none; cursor:default; } #vehicle_tabs h3 i.icon { display:block; height:20px; position:absolute; } #vehicle_tabs h3.inactive i.icon { right:5px; bottom:5px; } #vehicle_tabs h3.cars .icon { width:31px; background-position:0 -154px; } #vehicle_tabs h3.vans .icon { width:33px; background-position:-31px -154px; } #vehicle_tabs h3.coaches .icon { width:43px; background-position:-64px -154px; } #vehicle_tabs h3.trucks .icon { width:38px; background-position:-107px -154px; } #vehicle_tabs h3.active .icon { right:10px; bottom:10px; } #vehicle_tabs #tab_bgs { position:absolute; left:0; top:0; width:642px; } #vehicle_tabs .tab_bg { float:left; position:relative; display:block; background-color:#fff; font-weight:bold; -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); } #vehicle_tabs .tab_bg.active { z-index:70; top:0; padding:12px 70px 12px 10px; font-size:16px; line-height:16px; } #vehicle_tabs .tab_bg.inactive { z-index:55; top:9px; padding:8px 70px 8px 10px; font-size:14px; line-height:14px; } /*#in_vehicles { position:absolute; z-index:70; top:159px; left:265px; width:652px; height:411px; }*/ #in_vehicles { position:absolute; z-index:70; top:144px; left:269px; width:660px; height:426px; } #in_vehicles div.vehicle_solution { position:absolute; } #in_vehicles div.inactive { display:none; } #in_vehicles ul.products { margin:0; padding:0; list-style-type:none; } /*#in_vehicles ul.products li { margin:0; padding:0; float:left; width:217px; height:411px; position:relative; }*/ #in_vehicles ul.products li { margin:0; padding:0; float:left; width:220px; height:426px; position:relative; } #in_vehicles ul.products li ul { } #in_vehicles ul.products li ul li { float:none; width:auto; height:auto; } #in_vehicles ul.products li.seperator { margin:0; padding:0; float:left; width:0px; height:426px; position:relative; overflow:visible; } #in_vehicles ul.products li.seperator i.icon { display:block; width:31px; height:31px; background-position:-145px -134px; position:absolute; left:-15px; top:80px; } #in_vehicles ul.products li.seperator span.line { display:block; width:0px; height:215px; border-left:1px solid #d1d1d1; border-right:1px solid #f7f7f7; position:absolute; left:-1px; bottom:10px; } /*#in_vehicles ul.products li.hover { color:#000 !important; }*/ #in_vehicles .image.link410 { background-image:url(/_ttt/lib/components/solution-advisor/img/link.png); } #in_vehicles .image.link510 { background-image:url(/_ttt/lib/components/solution-advisor/img/link.png); } #in_vehicles .image.pro7350 { background-image:url(/_ttt/lib/components/solution-advisor/img/pro7350.png); } #in_vehicles .image.pro7350truck { background-image:url(/_ttt/lib/components/solution-advisor/img/pro7350truck.png); } #in_vehicles .image.pro5350 { background-image:url(/_ttt/lib/components/solution-advisor/img/pro5350.png); } #in_vehicles .image.pro5350truck { background-image:url(/_ttt/lib/components/solution-advisor/img/pro5350truck.png); } #in_vehicles .image.link105 { background-image:url(https://media.webfleet.com/h_120,c_scale,f_auto,q_auto/media/img/photos/products/lines/link/link105.png); } /*#result_navigation { position:absolute; bottom:7px; right:28px; }*/ #result_navigation { position:absolute; bottom:7px; right:17px; } #result_navigation .btn { margin-left:7px; } /* tooltips */ .tooltip { z-index:2000; } .ui-tooltip { background: #424542; color: white; border: 2px solid #c7d744; padding: 12px 15px; text-align:left; z-index:999; } .ui-tooltip.ui-widget-content::after { content: ''; position: absolute; border-style: solid; display: block; width: 0; } .ui-tooltip.ui-widget-content::after { top: 50%; left: -10px; margin-top:-15px; border-color: transparent #424542; border-width: 10px 10px 10px 0; } .tooltip-left.ui-widget-content::after { top: 50%; left: 330px; margin-top:-15px; border-color: transparent #424542; border-width: 10px 0 10px 10px; } /*.top .ui-widget-content::after { bottom: -10px; left: 72px; border-color: #424542 transparent; border-width: 10px 10px 0; } .bottom .ui-widget-content::after { top: -10px; left: 72px; border-color: #424542 transparent; border-width: 0 10px 10px; }*/ /* form popups */ table.advDialog { position:absolute; z-index:200; top:-1px; right:-1px; bottom:-1px; left:-1px; text-align:center; vertical-align:middle; width:950px; height:630px; } table.advDialog tr td { text-align:center; vertical-align:middle; width:950px; height:630px; } .advDialog .dialogOverlay { position:absolute; z-index:210 !important; top:0; right:-2px; bottom:19px; left:0; background-color:#000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */ filter: alpha(opacity=75); /* IE 5-7 */ -moz-opacity: 0.75; /* Netscape */ -khtml-opacity: 0.75; /* Safari 1.x */ opacity: 0.75; /* Good browsers */ } .dialogContainer { position:relative; width:400px; z-index:220 !important; margin:0 auto; text-align:left; /*position:absolute; z-index:220; width:400px; left:50%; top:50%; margin:-200px 0 0 -200px;*/ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ -webkit-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* WebKit */ -moz-box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* Firefox */ box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.45); /* Standard */ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } #advisor .dialogContainer h3 { margin:0; padding:25px 30px 15px 30px; font-size:22px; line-height:24px; color:#424542; font-weight:bold; border-bottom:2px solid #bdd52e; } #advisor .dialogContainer p { margin:0; padding:15px 30px; } #advisor .dialogContainer .frmContainer { margin:5px 30px; padding:0; } #advisor .frmContainer form { margin:0; padding:0; } #advisor .frmContainer fieldset { margin:0; padding:0; } #advisor .frmContainer .element label { padding-top:5px; } #advisor .frmContainer .element label span { color:#bdd52e !important; font-weight:bold; } #advisor .frmContainer .formelement input, #advisor .frmContainer .formelement select, #advisor .frmContainer .formelement textarea { font: 12px Verdana, Arial, Helvetica, sans-serif; color: #000; } #advisor .frmContainer .formelement { text-align:right; } #advisor .frmContainer .formelement input { padding:5px 3px; height:auto; width:170px; border-color:#ccc; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #advisor .frmContainer .formelement select { padding:4px 3px; height:auto; width:178px; border-color:#ccc; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } /*#advisor .frmContainer .formelement select option { padding:4px 3px; }*/ #advisor .frmContainer .formelement input.error, #advisor .frmContainer .formelement select.error { border-color:red; float:none; margin:0px !important; display:inline; } #advisor .frmContainer .error { margin:0; padding:1px 5px 5px 5px; display: block; text-align:left; color:red !important; font-weight:bold; } #advisor .frmContainer .col { width:320px; float:left; margin-bottom:10px; } #advisor .frmContainer .col1 { padding-right:44px; border-right:1px solid #ccc; } #advisor .frmContainer .col2 { margin-left:15px; } /*#advisor .frmContainer .col label { width:140px; }*/ #advisor .frmContainer .col label { width:280px; } #advisor .frmContainer .col label.error { width:auto; } #advisor .frmContainer .newsletter label { float:none; display:inline; width:auto; } #advisor .frmContainer .newsletter { text-align:right; margin:5px 0; padding:0; } #advisor .frmContainer .newsletter input { width:auto; position:relative; top:2px; border:none; } #frmSave { display:none; } #frmContact { display:none; } /*#frmContact .dialogContainer { width:760px; }*/ #frmContact .dialogContainer { width:800px; } #advisor .advDialog .dialog_nav { clear:both; position:relative; height:70px; } #advisor .advDialog .btnGroup { top:20px; } #advisor .advDialog .cancel { font-weight:bold; text-decoration:underline; cursor:pointer; float:right; margin-left: 5px; padding-top: 5px;} #advisor .advDialog .or { margin-left: 5px; float:right; padding-top: 5px; } #advisor .advDialog button { float:right; position:relative; } .advDialog .status { display:none; text-align:right; padding-top:15px; } .advDialog .status i { display:inline-block; position:relative; left:-4px; top:4px; } .advDialog .status .text { font-weight:bold; } .advDialog .frmLoading i { width:16px; height:16px; background:url(/_ttt/lib/components/solution-advisor/img/loader.gif); } .advDialog .frmSuccess i { width:20px; height:20px; background:url(/_ttt/lib/components/solution-advisor/img/icons.png) -327px -148px no-repeat; } .advDialog .frmError i { width:20px; height:20px; background:url(/_ttt/lib/components/solution-advisor/img/icons.png) -347px -148px no-repeat; } .advDialog div#loader { height:0px !important; width:0px !important; position:absolute !important; visibility:hidden !important; display:none !important; line-height:0px !important; } #debug { display:none; } #preload { position:absolute; width:1px; height:1px; overflow:hidden; } /* button styles for solution advisor */ #advisor .btn { display:inline-block; border:1px solid #fff; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3); /* WebKit */ -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3); /* Firefox */ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3); /* Standard */ } /* Opera hack */ /*doesnotexist:-o-prefocus,#advisor .btn {}*/ #btnBack, #btnClose { cursor:pointer; position:absolute; top:0; margin:0; padding:0; font-weight:bold; z-index:150; color:#8d8e8c; text-decoration:none; } #btnClose { right:0; width:30px; height:30px; } #btnClose span { display:none; } #btnClose i { position:absolute; top:5px; right:5px; width:9px; height:9px; background-position:-199px -164px; } #btnClose:hover i { background-position:-199px -154px; } #btnBack { left:0; padding:1px 15px 15px 15px; } #btnBack span { text-transform:lowercase; } #btnBack i { position:absolute; top:5px; left:5px; width:9px; height:9px; background-position:-209px -164px; } #btnBack:hover { color:#424542; } #btnBack:hover i { background-position:-209px -154px; } /* misc stuff */ #advisor .error { display:block; text-align: center; padding:0; margin:270px 0 0 0; color:#424542 !important; } /* exceptions */ body.lang_de div#result_sheet.result_social h1 { font-size:24px; } body.lang_es div#result_sheet.result_social h1 { font-size:24px; } body.lang_nl div#result_sheet.result_social h1 { font-size:24px; } /* TTT */ #advisor .frmContainer input { padding-right: 0px } .iradio_ttt { border: none; } /* responsiveness */ @media only screen and (max-height: 828px) { /*#advisor { position:absolute; top:50%; margin-top:-315px; }*/ } @media only screen and (max-height: 629px) { /*#advisor { height:530px; margin-top:-265px; }*/ #container, table.sheet, table.sheet td.sheet_content { height:530px !important; } table.advDialog, table.advDialog td { height:532px !important; } #advisor h1.dark { font-size: 26px; line-height: 30px; } #vehicletypes li h3 { font-size:18px; } #topics li h3 { font-size:17px; } #result_sheet h1 { font-size: 26px; line-height: 30px; border:none; } #result_sheet h1 span { padding-top:11px; padding-left:0; padding-bottom:10px; border:none; } #result_sheet h2 { display:none; } #result_info { display:none; } #in_office, #vehicle_tabs { top:55px; } #in_vehicles { top:94px; } #result_navigation { bottom:auto; top:10px; } #btnBack span { display:none; } body.lang_de div#result_sheet.result_social h1 { font-size:22px; } } body { overflow:auto !important; } @media only screen and (max-width: 946px) { #advisor { left: 0; margin-left: 0; } } #frmContact .col { padding-top: 0 !important; padding-bottom: 0 !important; } .btn.disabled .btn-label { color:black !important; }