/* === Reset ===================================================== HTML5 Boilerplate CSS: h5bp.com/css =============================================================== */ section{display:block} nav{display:block} hgroup{display:block} header{display:block} footer{display:block} figure{display:block} figcaption{display:block} details{display:block} aside{display:block} article{display:block} [hidden]{display:none} html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%} textarea{font-family:arial,sans-serif;color:#333} select{font-family:arial,sans-serif;color:#333} input{font-family:arial,sans-serif;color:#333} button{font-family:arial,sans-serif;color:#333} html{font-family:arial,sans-serif;color:#333} body{margin:0;font-size:12px;line-height:1.333;background:url('../img/content_bg.png') fixed center center;font-family:Arial, sans-serif!important;color:#333} hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle} form{margin:0} fieldset{border:0;margin:0;padding:0;position:relative} label{cursor:pointer} legend{border:0;*margin-left:-7px;padding:0;white-space:normal} textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle} select{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle} input{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle} button{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle} input{line-height:normal} button{line-height:normal} input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible} input[type="reset"]{cursor:pointer;-webkit-appearance:button;*overflow:visible} input[type="button"]{cursor:pointer;-webkit-appearance:button;*overflow:visible} button{cursor:pointer;-webkit-appearance:button;*overflow:visible} input[disabled]{cursor:default} button[disabled]{cursor:default} input[type="radio"]{box-sizing:border-box;padding:0;*width:13px;*height:13px;cursor:pointer} input[type="checkbox"]{box-sizing:border-box;padding:0;*width:13px;*height:13px;cursor:pointer} input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} input::-moz-focus-inner{border:0;padding:0} button::-moz-focus-inner{border:0;padding:0} textarea{overflow:auto;vertical-align:top;resize:vertical} textarea:valid{} input:valid{} textarea:invalid{background-color:#f0dddd} input:invalid{background-color:#f0dddd} table{border-collapse:collapse;border-spacing:0} td{vertical-align:top} /* Custom Table */ table.ms-rteTable-rsaTable { -ms-name: "Custom RSA Table"; } .ms-rteTable-rsaTable .table-container { margin: 20px 20px 20px 0; } .ms-rteTable-rsaTable table { border-collapse: collapse; } .ms-rteTable-rsaTable th, .ms-rteTable-rsaTable td { padding: 12px 24px; } .ms-rteTable-rsaTable th { background-color: #eee; font-weight: bold; } .ms-rteTable-rsaTable table th { font-weight: bold; } .ms-rteTable-rsaTable table td, .ms-rteTable-rsaTable table th, .ms-rteTableHeaderEvenCol-rsaTable, .ms-rteTableHeaderOddCol-rsaTable { padding: 14px 12px; text-align: left; word-wrap: break-word; } .ms-rteTable-rsaTable tr:nth-of-type(2n+1) > td { background-color: #f8f8f8; } .accordion .content .table-container { margin: 20px 20px 20px 0; } .accordion .content table { border-collapse: collapse; } .accordion .content th, .accordion .content td { padding: 12px 24px; } .accordion .content th { background-color: #eee; font-weight: bold; } .accordion .content table th { font-weight: bold; } .accordion .content table td, .accordion .content th { padding: 14px 12px; text-align: left; word-wrap: break-word; } .accordion .content tr:nth-of-type(2n+1) > td { background-color: #FFF; } /* Custom Table */ .active { display: inherit; } .inactive { display: none; } /* ===== Primary Styles ===================================================== Author: IQ Content - www.iqcontent.com - Luddy ========================================================================== Typography - sizes based on 12px base... http://pxtoem.com/ ========================================================================== */ H3{font-size:inherit} .ms-rteElement-H3{font-size:inherit} H2{font-size:inherit} .ms-rteElement-H2{font-size:inherit} H1{font-size:inherit} .ms-rteElement-H1{font-size:inherit} H2{color:#C46F50;font-size:116.7%;margin:0} .ms-rteElement-H2{color:#C46F50;font-size:116.7%;margin:0} H4{margin:0;font-size: 100%} .ms-rteElement-H4 { margin: 0; font-size: 100%; font-style:normal; font-weight:bold; } H1 span{color:#959595;padding:0 1em} .ms-rteElement-H1 span{color:#959595;padding:0 1em} .link-item a:link { font-family: Arial, sans-serif; font-size:12px; } a{color:#c46f50;font-weight: bold;text-decoration: none;} a:link{color:#c46f50;font-weight: bold;text-decoration: none;} a:visited{color:#c46f50;} a:hover{text-decoration: underline;} a:focus{outline:thin dotted} a:active{outline:0} a:hover{outline:0} a{-webkit-transition:color 100ms ease-in;-moz-transition:color 100ms ease-in;-ms-transition:color 100ms ease-in;-o-transition:color 100ms ease-in;transition:color 100ms ease-in} .ms-WPBody a{color:#c46f50} .ms-WPBody a:link{color:#c46f50} .ms-WPBody a:visited{color:#c46f50;} /*.ms-WPBody a:hover{color:#525252}*/ .ms-WPBody a:focus{outline:thin dotted} .ms-WPBody a:active{outline:0} .ms-WPBody a:hover{outline:0} .ms-WPBody a{-webkit-transition:color 100ms ease-in;-moz-transition:color 100ms ease-in;-ms-transition:color 100ms ease-in;-o-transition:color 100ms ease-in;transition:color 100ms ease-in} abbr[title]{border-bottom:1px dotted} strong{font-weight:700} b{font-weight:700} q{quotes:none} q:after{content:"";content:none} q:before{content:"";content:none} small{font-size:91.65%} p{margin:0 0 1.333%} .bigger{font-size:116.7%!important;line-height:142.9%} .centered-text{text-align:center!important} .big-bold{font-size:150%!important;font-weight:700!important} .dark-555{color:#555} .light-777{color:#777} .err{color:#F00} ::-moz-selection{background:#c46f50;color:#fff;text-shadow:none} ::selection{background:#c46f50;color:#fff;text-shadow:none} /* ::-webkit-input-placeholder { color: #333; } :-moz-placeholder { color: #333; } */ .placeholder { color: #333; } /* ========================================================================== Overwrite SharePoint CSS ========================================================================== */ #box-wrapper .ms-WPTitle { font-family: Arial, sans-serif; color: #333; } #box-wrapper .box-half { line-height: 1; } /* ========================================================================== Non-Semantic Helper Classes ========================================================================== */ .last{margin-right:0!important} .ir{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0} .ir br{display:none} .hidden{display:none!important;visibility:hidden} .invisible{visibility:hidden} .clearfix:after{content:"";display:table} .clearfix:before{content:"";display:table} .clearfix:after{clear:both} .clearfix{*zoom:1} .left{float:left!important} img.left{margin-right:30px} .right{float:right!important} img.right{margin-left:30px} .block{display:block!important} .ms-rteElement-P { color: #333; } /* ============================================ Lists ============================================ */ ul{margin:0;padding:0;list-style:none} .inline-list{list-style-type:none!important} .inline-list li{float:left} ol { list-style: decimal inside none; margin: 0; padding: 0; margin-left: 15px; } ol { counter-reset:li; margin-left: 0; padding-left: 35px; } ol > li { position:relative; margin: 0; padding: 4px 8px 4px 0; list-style:none; } ol > li:before { content:counter(li) '.'; counter-increment:li; position:absolute; top:-2px; left: -1.5em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /*width: 0.5em;*/ /* Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example) */ margin-right: 0px; padding: 6px 0 0 0; color: #098A9D; font-weight:bold; text-align:center; } li ol, li ul { margin-top:6px; } ol ol li:last-child { margin-bottom:0; } ol.title-list { margin-left: 0; padding-left: 25px; } ol.title-list > li:before { font-size: 1.333em; } /* ============================================ Gradients ============================================ */ .orange-grad-bg { /* Vertical */ background: #c46e4d; background: -moz-linear-gradient(top, #c46e4d 0%, #af5533 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c46e4d), color-stop(100%,#af5533)); background: -webkit-linear-gradient(top, #c46e4d 0%,#af5533 100%); background: -o-linear-gradient(top, #c46e4d 0%,#af5533 100%); background: -ms-linear-gradient(top, #c46e4d 0%,#af5533 100%); background: linear-gradient(to bottom, #c46e4d 0%,#af5533 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c46e4d', endColorstr='#af5533',GradientType=0 ); } .white-to-transparent-grad-bg { /* Horizontal */ background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .light-grey-grad-bg { /* Vertical */ background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ffffff 9%, #f7f7f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(9%,#ffffff), color-stop(100%,#f7f7f7)); background: -webkit-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -o-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -ms-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: linear-gradient(to bottom, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 ); } #box-wrapper .box-half .ms-WPHeaderTdSelection, #box-wrapper .box-half .ms-WPHeaderTdMenu, #box-wrapper .box-half .ms-wpTdSpace, #box-wrapper .box-half .ms-WPTitle { /* Overwrite SharePoint css */ background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ffffff 9%, #f7f7f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(9%,#ffffff), color-stop(100%,#f7f7f7)); background: -webkit-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -o-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -ms-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: linear-gradient(to bottom, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 ); } .other-light-grey-grad-bg { /* horizontal */ background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZX"); background: -moz-linear-gradient(left, rgba(248,248,248,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(248,248,248,1) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(248,248,248,1) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(248,248,248,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(248,248,248,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#00ffffff',GradientType=1 ); } /* ============================================ Buttons ============================================ */ .button{ display: inline-block; padding: 10px 12px; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .button.orange-grad-bg{ color: #FFF } /* ============================================================================================== Generic Layout and styles ============================================================================================== */ .row { min-width: 940px; width: 100%; } .row-inner { display: block; margin:0 auto; position: relative; width:940px; } .left-sidebar{} .right-sidebar{} .no-sidebar{} #main .row-inner { padding-top: 14px; /*Changed by NM to make top same as IQ version*/ } /* ============================================ Header ============================================ */ #header { background: #098a9d url('../img/headFootShadow.png') repeat-x 0 112px; border-bottom: 0 solid #E1E1E1; height: 120px; } #branding { background:url('../img/covisLogo.png') no-repeat left center transparent; /*background:url('../img/covisLogo.png') no-repeat left center transparent;*/ float: left; height: 120px; margin: 0; width: 440px; } #branding a { display: block; height: 100%; width: 100%; } #banner-head-home { background:url('../img/banners/home-head-large.png') no-repeat center center transparent; border: 1px solid #DFDFDF; } #banner-head-decision { background:url('../img/banners/decision-head-large.png') no-repeat center center transparent; border: 1px solid #DFDFDF; height: 168px } #banner-head-decision strong { text-indent: -9999px; } #banner-head-landing { background:url('../img/banners/landing-head-large.png') no-repeat center center transparent; border: 1px solid #DFDFDF; height: 220px; margin-bottom: 12px; } .box-border { border: 1px solid #DFDFDF; } #link-box{margin:18px 0 18px 320px;float:right} /*--- Header links ---*/ #link-box a{color:#fff;text-decoration:none;padding-right:5px} #link-box a:hover{text-decoration:underline} #link-box .left{padding-right:5px;border-right:solid 1px #47a7b6} #link-box .right{padding-left:5px} #link-box .active{font-weight:700} /*--- HEader login button ---*/ a.btn-HGV-Login { color: #FFF; text-decoration:none; } .btn-HGV-Login { padding:0 25px; height:36px; border:none; float: right; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:#47a7b6; text-decoration: none; font-size: 1.167em; line-height:36px; color: #FFF; margin-right: 10px; } .btn-HGV-Login:hover { background:#047083; text-decoration:none } input { outline: 0; } #search-wrap /*--- Header search ---*/ { float: right; width: 150px; height: 36px; background-color: #FFF; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow: hidden; } #search-wrap {} #txtSearch { background-color: #FFF; border: 0; height: 100%; padding-left: 10px; width: 105px; float: left; } #WebPartWPQ1 .s4-search input.ms-sbplain { background-color: #FFF; border: 0; height: 35px; /*100%;*/ padding-left: 10px; width: 105px !important; float: left; } #btnSearch { background-color: #FFFFFF; background-position: 5px 7px; border: medium none; border-left: solid 1px #dfdfdf; float: right; height: 100%; width: 34px; } .s4-search .srch-gosearchimg { background-color: #FFFFFF; /*background-image: url("../img/sprite.png");*/ background-position: 5px 7px; border: medium none; border-left: solid 1px #dfdfdf; float: right; height: 35px; /*100%;*/ width: 35px; } .mob-link { display: none; } /* ============================================ Navigation ============================================ */ .primary-nav { background: #47A7B6 url(../img/headFootShadow.png) repeat-x 0 38px; height:46px; } .primary-nav ul { font-size: 1.333em; font-weight: 700; } .primary-nav ul li a { color:#FFF; display:block; height:46px; line-height:46px; padding:0 41px; text-decoration:none; background:transparent url(../img/horizSprite.png) no-repeat 100% 14px; position: relative; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none } .primary-nav ul li span.sectionsTab { color:#FFF; display:block; height:46px; line-height:46px; text-decoration:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none } .primary-nav ul li.last a { background: none; padding-right: 40px; } /*using the li for hover and active because we need styles on both the LI and A elements*/ .primary-nav ul li:hover { background: transparent url(../img/horizSprite.png) 0 -40px; padding: 0 1px; left: -1px; position: relative; } .primary-nav .hide-for-small li:hover a, .primary-nav li.selected a, .primary-nav ul.inline-list li.active span.sectionsTab { background: url(../img/horizSprite.png) repeat-x 0 -100px; padding: 4px 33px 0 32px; margin-top: -4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .primary-nav ul.inline-list .hide-for-small li.last:hover a, .primary-nav ul.inline-list li.last.selected a { padding-right: 40px; } /* ============================================ Sprites ============================================ */ .sprite{background:url('../img/sprite.png') no-repeat transparent} /* ============================================ Main area - Left Sidebar Layout ============================================ */ .left-sidebar{} /* ============================================ Main area - Right Sidebar Layout ============================================ */ .right-sidebar{background:#fff} /* ============================================ Main area - No Sidebar Layout ============================================ */ .no-sidebar{} /* ============================================ Main area ============================================ */ .box-full { background-color: #FFF; /*Ommited by NM to get rid of blank space behind smaller images Banner*/ /* border: 1px solid #dfdfdf; */ width: 100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .box-full input { width: 100%; } h3.box-full { margin: 0 } h2.box-full { margin: 0 } h2.box-full { border-bottom: 1px solid #dfdfdf; font-size: 1.6em; font-weight: bold; padding: 18px 25px; } .ms-rteElement-H2.box-full { margin: 0 } .ms-rteElement-H2.box-full { border-bottom: 1px solid #dfdfdf; font-size: 1.6em; font-weight: normal; padding: 18px 25px; } .box-half { width: 49%; background-color: #FFF; border: solid 1px #dfdfdf; margin-bottom: 0px; margin-top:10PX; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /*- Replacement CRW pages ============================================================================================== */ .ms-rteStyle-box-grey{ -ms-name:"CRW Grey Box"; background: #f8f8f8; border: solid 1px #dfdfdf; /*margin: 3em 0;*/ font-size: 1.6em; font-weight: normal; padding: 12px 20px 12px 30px; } .ms-rteStyle-border { -ms-name: "CRW Border"; display: block; position: relative; padding-left: 60px; padding-right: 100px; padding-top:12px; font-size: 1.167em; /*margin: 4em 0;*/ border: solid 1px #dfdfdf; border-top:none; } #box-wrapper .inner#CRWpage .ms-rteElement-H3 { font-size:1.5em; } .ms-rteStyle-box-grey h3{ background: #eee; border-bottom: 1px solid #dfdfdf; margin-top: 0; } .ms-rteStyle-box-grey ul{ } .ms-rteStyle-box-grey li{ display: block; position: relative; padding-left: 190px; padding-right: 100px; font-size: 1.167em; margin: 4em 0; } .ms-rteStyle-box-grey i{ position: absolute; left: 60px; top: 50%; } #banner-head-home { height: 200px; margin-top: 20px } .s4-ca { margin-left: 0px; margin-right: 0px; } .inner ul { list-style-type: disc; margin-left: 15px; } .inner ul li { background: url('../img/arrows.png') no-repeat -30px -365px; list-style: none; margin: 0; padding: 0px 8px 4px 12px; position: relative; } .inner h4 { font-size: 1.125em; padding: 0 0 12px; } .inner p { margin: 0; padding-bottom: 14px; padding-right: 24px; } .inner ol { margin-bottom: 24px; margin-left: 0; margin-top: 8px; } .inner ul { list-style-type: disc; margin-bottom: 24px; margin-left: 16px; margin-top: 8px; } .inner ul li { padding-bottom: 9px; } .inner ul > li { background: url('../img/arrows.png') no-repeat -30px -366px; list-style: none; margin: 0; padding: 0px 8px 4px 12px; position: relative; } /* ============================================ Secondary navigation ============================================ */ #zz18_CurrentNavigationMenu { background-color: #42a7b9; box-sizing: border-box; margin-top:10px; } .menu-vertical a.static.selected.menu-item { background-color: #7ec2cd; } .menu-vertical a.static.selected.menu-item:hover { background-color: #7ec2cd; } .menu-vertical { background-color: #42a7b9; box-sizing: border-box; width: 235px; /*margin-top:10px;Added by NM To bring side nav in line with box divs in Landing page - Removed*/ } .menu-vertical li { border-bottom: 1px dotted #add8e0; color: #FFF; cursor: pointer; display: block; line-height: 40px; overflow: hidden; width: 100%; } .menu-vertical li strong { display: block; font-size: 1.22em; font-weight: normal; padding: 4px 23px; } .menu-vertical li a { background: transparent url("../img/bullet-blue.png") no-repeat scroll 22px 15px; color: #FFF; display: block; padding-left: 35px; text-decoration: none; } .menu-vertical li.active a { background-color: #7ec2cd; } .menu-vertical li a:hover { background-color: #7ec2cd; } .menu-vertical li.active a li { background-color:#42a7b9; } .menu-vertical li a:hover li { background-color:#42a7b9; } .menu-vertical li li.active a { background-color:#7ec2cd; } .menu-vertical li li a:hover { background-color:#7ec2cd; } .menu-vertical li ul li { border-bottom: none; border-top: 1px dotted #add8e0; } .menu-vertical li ul li a { font-weight: normal; } /* ============================================ Sprites ============================================ */ .vehicle-boxes .sprite { display: block;margin:25px auto 12px;height: 32px;} #vans { background-position:0 -32px; width: 125px} #trucks { background-position:-5px -68px; width: 119px} #buses { background-position: -5px -144px; width: 104px } #caravans { background-position: -2px -106px;width: 61px} #mixed { background-position: -2px -181px; width: 126px} /* ============================================ Page specific - Decision page ============================================ */ #decision-boxes li { float: left; width: 178px; margin: 10px 10px 10px 0; height: 145px; border: solid 1px #dedede; font-size: 1.333em; position: relative; } #decision-boxes .fifth { margin-right: 0; float: right; } #decision-boxes li a { border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; bottom: 1px; color: #575757; display: block; height: 144px; left: 0; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; width: 178px; } #decision-boxes li:hover { background: #f5efef; background: -moz-linear-gradient(top, #f5efef 0%, #f5efef 26%, #edecea 43%, #eeeaeb 47%, #e9e7e8 56%, #e7e5e6 57%, #e8e6e7 59%, #e1e1e1 73%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5efef), color-stop(26%,#f5efef), color-stop(43%,#edecea), color-stop(47%,#eeeaeb), color-stop(56%,#e9e7e8), color-stop(57%,#e7e5e6), color-stop(59%,#e8e6e7), color-stop(73%,#e1e1e1), color-stop(100%,#dfdfdf)); background: -webkit-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -o-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -ms-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: linear-gradient(to bottom, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5efef', endColorstr='#dfdfdf',GradientType=0 ); } /* ============================================ Page specific - Find test centre ============================================ */ .mapFrame { height:620px; width:800px; } .textCenterContentBox { background: #FFF; border: solid 1px #DFDFDF; padding: 12px; } .textCenterContentBox #mapCanvas { height: 526px; width: 690px; } .textCenterContentBox .finderBox { background: #EEE; border: solid 1px #DFDFDF; padding: 12px; } .textCenterContentBox h2 { font-size: 1.6em; margin-bottom: 12px; margin-top: 16px; } .textCenterContentBox .ms-rteElement-H2 { font-size: 1.6em; margin-bottom: 12px; margin-top: 16px; } #vehicleType.inlineList { clear: both; } #vehicleType.inlineList li { display: block; height: 20px; margin: 15px 12px 30px 0; } .inlineList li { float: left; } #listBox { background: #FFF; border-top: solid 1px #ccc; border-left: solid 1px #ccc; color: #525252; height: 438px; line-height: 1.333; overflow-y: scroll; padding: 2px; width: 178px; } #listBox li { background: url('../img/dotBorder.png') repeat-x bottom left; padding: 10px; } #listBox li.current { background-color: #fff6ea; } #listBox li h4 { color: #c46f50; font-size: 108.3%; padding: 0; margin: 0 0 5px; text-decoration: underline; } #listBox li .ms-rteElement-H4 { color: #c46f50; font-size: 108.3%; padding: 0; margin: 0 0 5px; text-decoration: underline; } #listBox li.current h4 { color: #333; } #listBox li.current .ms-rteElement-H4 { color: #333; } .textCenterContentBox #selectCounty { float: right; width: 130px; } /* ============================================ Page specific - Landing page ============================================ */ #box-wrapper { margin-bottom: 50px; width: 700px; } #box-wrapper .box-half { min-height:280px; } #box-wrapper .box-half .ms-WPTitle nobr { word-wrap: break-word !important; white-space: normal !important; } #box-wrapper .box-half h3 { /*border-bottom: 1px solid #DFDFDF;*/ font-size: 1.5em; height: 54px; margin: 0; padding-left: 20px; padding-top: 16px; } #box-wrapper .box-half .content { font-size: 1.14em; padding: 20px; } #box-wrapper .box-half .content p { padding-bottom: 14px; } #box-wrapper .box-half .content a { font-weight: bold; text-decoration: none; } #box-wrapper .box-half .content ul li { background: transparent url('../img/arrows.png') no-repeat -22px -30px; padding-bottom: 8px; padding-left: 16px; } #box-wrapper.right { /* border-bottom: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; */ } #box-wrapper.right h3 { font-size: 1.313em; font-weight: normal; } #box-wrapper.right h4 { color: #525252; font-size: 1.333em; padding-bottom: 14px; } #box-wrapper.right h4 a{ color: #525252; font-size: 1.333em; padding-bottom: 14px; } #box-wrapper.right h5 { margin-bottom: 4px; padding-bottom: 0; } #box-wrapper.right h5.extra-base { margin-bottom: 24px; } #box-wrapper.right h5 a { font-size: 1.333em; text-decoration: none; } #box-wrapper.right .inner a { font-weight: bold; text-decoration: none; color:#c46f50 } #box-wrapper.right .inner a:hover { text-decoration: underline; color:#c46f50; } #box-wrapper.right .inner h3 { font-weight: normal; } /* Overwrite Sharepoint CSS */ #box-wrapper .box-half .ms-WPTitle { /*border-bottom: 1px solid #DFDFDF;*/ font-size: 1.313em; height: 54px; margin: 0; padding-left: 20px; padding-top: 16px; font-weight:bold; } #box-wrapper .box-half .ms-WPBody, #box-wrapper .box-half .ms-rtestate-field { font-size: 1.14em; padding: 20px; } #box-wrapper .box-half .ms-WPBody p, #box-wrapper .box-half .ms-rtestate-field p { padding-bottom: 14px; } #box-wrapper .ms-WPBody a, #box-wrapper .ms-rtestate-field a { font-weight: bold; text-decoration: none; } #box-wrapper .box-half .ms-WPBody ul li, #box-wrapper .box-half .ms-rtestate-field ul li { background: transparent url('../img/bullet-orange.png') no-repeat scroll 0 4px; padding-bottom: 8px; padding-left: 35px; color:#c46f50; font-weight:bold; } #box-wrapper.right { /* border-bottom: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; */ } #box-wrapper .box-half .ms-WPTitle .ms-rteElement-H3 { font-size: 1.500em; font-weight: normal; } #box-wrapper .box-half .ms-WPBody .ms-rteElement-H4, #box-wrapper .box-half .ms-rtestate-field .ms-rteElement-H4 { color: #525252; font-size: 1.333em; padding-bottom: 14px; } #box-wrapper .box-half .ms-WPBody .ms-rteElement-H5, #box-wrapper .box-half .ms-rtestate-field .ms-rteElement-H5 { margin-bottom: 4px; padding-bottom: 0; } #box-wrapper .box-half .ms-WPBody .ms-rteElement-H5.extra-base, #box-wrapper .box-half .ms-rtestate-field .ms-rteElement-H5.extra-base { margin-bottom: 24px; } #box-wrapper .box-half .ms-WPBody .ms-rteElement-H5 a, #box-wrapper .box-half .ms-rtestate-field .ms-rteElement-H5 a { font-size: 1.333em; text-decoration: none; } #box-wrapper .box-half .ms-WPBody .inner a, #box-wrapper .box-half .ms-rtestate-field .inner a { font-weight: bold; text-decoration: none; } #box-wrapper.right .inner .ms-rteElement-H3 { font-weight: normal; } /* ============================================ Accordion ♩-♪♪♪-♫-♬ ============================================ */ .ms-rteElement-download { background: url('../img/arrows.png') no-repeat -16px -492px; padding-left: 32px; padding-bottom: 5px; padding-top: 5px; } .content-a .wide-content .box-full { padding-bottom: 20px; } .accordion { display: block; /* margin: 0 auto; changed by NM to stop 'Earthquake' in drop down accordion*/ margin: 1px; margin-left:30px; padding: 20px 0px 20px 0px; width: 878px; } .accordion li { border: 1px solid #DFDFDF; border-bottom: none; position: relative; } .accordion li:last-of-type { border-bottom: 1px solid #DFDFDF; } .accordion li li { border: none !important; } .accordion h3 { margin: 0; } .accordion h3 a { background: #fff url('../img/arrows.png') no-repeat 827px -231px; border-bottom: none; /* 1px solid #dfdfdf; */ color: #333; display: block; font-size: 1.250em; margin: 0; padding: 16px; padding-right: 24px; text-decoration: none; /* width: 879px; -added by NM*/ } .accordion h3 a:hover { background-color: #eee; cursor: pointer; } .accordion .active h3 a { background: #eee url('../img/arrows.png') no-repeat 825px -165px; border-bottom: 1px solid #dfdfdf; /* width:879px; -added by NM*/ } .accordion .content { background-color: #f8f8f8; display: none; font-size: 1.083em; margin-bottom: 0; padding: 18px 0 24px 18px; position: relative; } .accordion .active .content { display: block; } .accordion .content h4 { font-size: 1.125em; padding: 12px 0; } .accordion .content { margin: 0; /*width: 660px; Commented out by NM to position vehicle and road sprite porperly*/ } .accordion .content.vehicle-frame { /*width: 460px; Commented out by NM to position vehicle and road sprite porperly*/ } .accordion .content p { margin: 0; padding-bottom: 14px; padding-right: 24px; } .accordion .content p a.button { background-color: #c45434; border-radius: 6px; color: #fff; font-size: 1.417em; margin: 20px 0; padding: 12px 22px; text-decoration: none; } .accordion .content ol { margin-bottom: 24px; margin-left: 0; margin-top: 8px; } .accordion .content ul { list-style-type: disc; margin-bottom: 24px; margin-left: 16px; margin-top: 8px; } .accordion .content ul li { padding-bottom: 4px; } .accordion .content ul li { padding-bottom: 9px; } .accordion ul > li { background: url('../img/arrows.png') no-repeat -30px -365px; list-style: none; margin: 0; padding: 0px 8px 4px 12px; position: relative; } .accordion .road-strip { width: 540px; background: url('../img/road-slice.png') repeat-x; bottom: 30px; height: 64px; position: absolute; right: 0; width: 440px; } .accordion li .content .vehicles { position: absolute; } .accordion li .content .vehicles li { background-image: url('../img/sprite2x.png'); background-repeat: no-repeat; bottom: 43px; display: none; height: 64px; position: absolute; width: 250px; padding-bottom:0px; } .accordion .vehicles.van-jeeps .van-jeeps { background-position: 0 -64px; display: block; right: -782px; } .accordion .vehicles.truck-artic .truck-artic { background-position: -10px -136px; display: block; right: -782px; } .accordion .vehicles.bus-ambulance .bus-ambulance { background-position: -12px -289px; display: block; right: -782px; } .accordion .vehicles.caravans .caravans { background-position: -6px -212px; bottom: 54px; display: block; right: -782px; } .accordion .vehicles.mixed-fleet .mixed-fleet { background-position: -6px -362px; bottom: 53px; display: block; right: -782px; } /* ============================================ Pagination ============================================ */ .paging { background-color: #eee; overflow: hidden; } .paging * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #box-wrapper.search-results-box .paging { border-left: 1px solid #DFDFDF; } /*#box-wrapper.search-results-box .paging li { border: 1px solid #dfdfdf; border-left: none; display: block; float: left; height: 49px; width: 48px; } #box-wrapper.search-results-box .paging li:last-of-type { border-bottom: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; width: 49px; } .paging li a { border: 1px solid #fff; color: #c45434; display: block; float: left; font-weight: bold; height: 47px; padding-top: 16px; text-align: center; text-decoration: none; width: 47px; } .paging li.active a { background-color: #fff; color: #333; font-weight: normal; } .paging li a:hover { background-color: #fff; }*/ /* ============================================ Page specific - Search Results ============================================ */ .search-box { background-color: #fff; border-bottom: 1px solid #DFDFDF; border-left: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; margin-bottom: 18px; overflow: hidden; } .search-box div#search-wrap { border: 1px solid #DFDFDF; border-radius: 6px; float: none; margin: 28px; width: 320px; } .search-box div#search-wrap #txtSearch { width: 272px; } .searchFilter { background-color: #42a7b8; clear: right; color: #fff; margin-bottom: 10px; width: 240px; } .searchFilter h4 { padding: 18px; } .searchFilter li { border-bottom: 1px dotted #add8e0; } .searchFilter a { color: #fff; cursor: pointer; display: block; padding: 12px 18px; } .searchFilter li a:hover { background-color: #7ec2cd; } .searchFilter li.active a { background: #7ec2cd url('../img/arrows.png') no-repeat 181px -114px; border: none; } /* ---------✂---------------- Dropdown menu ---------✂---------------- */ .dropdown-box { background-color: #7EC2CD; left: 0; position: absolute; width: 300px; visibility: hidden; z-index: 200; } li.active .dropdown-box { visibility: visible; } .primary-nav .dropdown-box ul { font-size: 1em; font-weight: normal; } .primary-nav .dropdown-box ul li { display: block; float: none; padding-left: 12px; } .dropdown-menu { margin: 0 auto; } .primary-nav .dropdown-box ul li:hover a { background-image: none; border-radius: 0; } .primary-nav ul.inline-list li.active .dropdown-box a, .primary-nav .dropdown-box ul li a { background: url(../img/arrows.png) no-repeat scroll -26px 21px transparent; border-radius: 0; color: #FFFFFF; display: block; font-size: 0.8em; margin-left: 12px; padding: 4px 0 4px 12px; text-decoration: none; } .primary-nav .dropdown-box ul li:hover { background: none; padding-left: 12px; position: relative; left: 0; } #box-wrapper.search-results-box { background-color: #fff; border: 1px solid #dfdfdf; padding: 20px 40px 0; width: 610px; } #box-wrapper.search-results-box ul { margin-bottom: 36px; } /*#box-wrapper.search-results-box li { background: transparent url('../img/bottomDotBorder.png') left bottom repeat-x; padding-bottom: 8px; } #box-wrapper.search-results-box li:last-of-type { border-bottom: none;*/ } #box-wrapper.search-results-box a { text-decoration: none; color: #c45434; } #box-wrapper.search-results-box h3 { font-size: 1.333em; margin-bottom: 6px; } #box-wrapper.search-results-box p { color: #525252; font-size: 1.167em; } #box-wrapper.search-results-box p em { color: #c45434; font-style: normal; } /*- Sidebar stuff - right sidebar only shows on large view ============================================================================================== */ .right-sidebar { background: url('../img/rightSideBarPageBg.png') repeat-y transparent top right; } .right-sidebar .inner { padding: 20px 30px; width: 400px; } .right-sidebar .aside { width: 240px } /* .right-sidebar ul li { /*background: url('../img/arrows.png') no-repeat -18px -75px;/* co ordinates changed by NM to show orange arrow for li list-style: none; margin: 0; padding: 0px 8px 4px 12px; position: relative; }*/ /* Sidebar link box */ .linkBox { float: right; width:210px; display:block; margin:15px 15px 15px 0; } .linkBoxInner { background:#FFF; border:solid 1px #dcdcdc } .linkBox h3 { background:#9c9c9c; color:#FFF; margin:0; line-height:100%; padding:10px 15px; font-size:120.8%; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px } .linkBox li { border-bottom: 1px dotted #a6a6a6; } .linkBox li:last-of-type { border: none; } .linkBox .link-item a:link { color: #c46f50; display: block; padding: 14px 12px; text-decoration: none; } .linkBox .link-item a:hover { text-decoration:underline; color:#c46f50; } .linkBox .link-item a:visited { color:#c46f50; } /*- ============================================================================================== */ .no-sidebar { background: #FFF; color: #555; } .no-sidebar .inner { padding: 20px 30px; width: auto; display: block; } .no-sidebar p{ font-size: 1.167em } .no-sidebar .accordion{ width: auto; display: block; margin-left: -30px; margin-right: -30px; margin-top: 50px; font-size: 0.857em; border-top: solid 1px #dfdfdf; } .no-sidebar .accordion .active h3 { background: url("../img/arrows.png") no-repeat scroll 97% -165px #EEEEEE; } /*- Replacement CRW pages ============================================================================================== */ .no-sidebar .accordion li li{ display: block; position: relative; padding-left: 80px; padding-right: 20px; font-size: 1.167em; margin: 1em 0 3em; } .no-sidebar .accordion li h3{ padding-left: 25px; } .no-sidebar .accordion i{ position: absolute; left: -20px; top: 50%; } /* ============================================ Footer ============================================ */ /*Set main content min height to position footer correctly*/ .s4-ca { min-height: 459px; } #footer { background:#098a9d url('../img/headFootShadow.png') repeat-x 0 -8px; padding:20px 0 0 0; display:block; margin-top:30px; color:#fff; width:100% } #footer a { color:#FFF; font-weight:700; text-decoration:none } #footer a:hover { text-decoration:underline } #footer-links-wrap{ opacity: 0.85 } #footer-links-wrap h3 { font-size: 1.333em; margin: 10px 0 10px;/*CHANGED*/ } #footer-links-wrap li { float:left; width:21%; padding-right:4%; height:200px;/*CHANGED*/ line-height: 1.333em; } #footer-links-wrap li li { height: auto !important; margin-bottom: 13px; width: 100% !important; } #footer-links-wrap a { font-weight: normal; } /* ============================================================================================== End Generic Layout ============================================================================================== */ /* ============================================================================================== Responsive...Layout ============================================================================================== */ /* 001_Desktop / 002_Tablet (Landscape) - very similar to desktop ============================================================================================== */ @media only screen and (min-width: 940px) { .box-half { min-height: 260px; } .box-half-edit { min-height: 410px; } /*Sticky footer hack for desktop*/ body {height: 100%;} html {height: 100%;} html#lightbox{height:auto;} #full-wrap {min-height: 100%;margin-bottom: 40px} #main {overflow:auto;/*padding-bottom:220px;*/} /* must be same height as the footer */ #footer { clear: both; /*height: 230px;*/ position: relative; /*margin-top: -230px;*/ } .primary-nav.hide-for-small ul li:hover, .primary-nav ul li.active { padding: 0; left: 0; } /* Media specific helpers */ .ir-for-large{display:block;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0} .ir-for-large br{display:none} .ir-for-med-large{display:block;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0} .ir-for-med-large br{display:none} /*- Interactive homepage box - This covers all of the animation etc on the homepage vehicle box ============================================================================================== */ #interactive-vehicle-box { height: 345px; margin: 20px 0 80px; position: relative; } #interactive-vehicle-box ul { border-bottom:solid 1px #dfdfdf; height: 120px; } #interactive-vehicle-box li { cursor: pointer; float:left; width:187px; height:120px; border-right:solid 1px #dfdfdf; text-align: center; } #interactive-vehicle-box li.active { background: #f5efef; background: -moz-linear-gradient(top, #f5efef 0%, #f5efef 26%, #edecea 43%, #eeeaeb 47%, #e9e7e8 56%, #e7e5e6 57%, #e8e6e7 59%, #e1e1e1 73%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5efef), color-stop(26%,#f5efef), color-stop(43%,#edecea), color-stop(47%,#eeeaeb), color-stop(56%,#e9e7e8), color-stop(57%,#e7e5e6), color-stop(59%,#e8e6e7), color-stop(73%,#e1e1e1), color-stop(100%,#dfdfdf)); background: -webkit-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -o-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -ms-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: linear-gradient(to bottom, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5efef', endColorstr='#dfdfdf',GradientType=0 ); } #interactive-vehicle-box li:hover { background: #f5efef; background: -moz-linear-gradient(top, #f5efef 0%, #f5efef 26%, #edecea 43%, #eeeaeb 47%, #e9e7e8 56%, #e7e5e6 57%, #e8e6e7 59%, #e1e1e1 73%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5efef), color-stop(26%,#f5efef), color-stop(43%,#edecea), color-stop(47%,#eeeaeb), color-stop(56%,#e9e7e8), color-stop(57%,#e7e5e6), color-stop(59%,#e8e6e7), color-stop(73%,#e1e1e1), color-stop(100%,#dfdfdf)); background: -webkit-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -o-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -ms-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: linear-gradient(to bottom, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5efef', endColorstr='#dfdfdf',GradientType=0 ); } #interactive-vehicle-box li.last { border-right:0; width:186px; } #interactive-vehicle-box li.active .show-on-hover { display: inherit } #interactive-vehicle-box li:hover .show-on-hover { display: inherit } #interactive-vehicle-box li .hide-on-hover { display: inherit } #interactive-vehicle-box li.active .hide-on-hover { display: none } #interactive-vehicle-box li:hover .hide-on-hover { display: none } #interactive-vehicle-box li .show-on-hover { display: none } #interactive-vehicle-box .sprite.marker { /* Little down arrow/triangle */ background-position: -27px 0; height: 10px; left: 85px; margin: 0; position: relative; top: 32px;/*changed by NM from 15px*/ width: 19px; z-index: 300; display: none } #interactive-vehicle-box .sprite.marker.last { /* Little down arrow/triangle. Coppied from above by NM. 'top' changed to compensate for extra lines of text and space.. */ top: 13px; } #interactive-vehicle-box li.active .sprite.marker { display: inherit; } #interactive-vehicle-box li:hover .sprite.marker { display: inherit; } #interactive-vehicle-box li .button { font-size: 1.417em; } #interactive-vehicle-box li .button { padding: 0; margin: 14px auto 0; width: 160px; height: 45px; line-height: 45px; } #interactive-vehicle-box li h3 { font-size: 1.167em; line-height: 1.333em; margin: 10px 0 0; text-shadow: 0 1px 0 #FFFFFF; } .detail-box .button { z-index: 300; position: absolute; left: 40px; } .detail-box h4 { z-index: 300; position: absolute; left: 40px; } .detail-box h4 { font-size: 2em; line-height: 1.2em; top: 33px; text-align: left; } .detail-box .ms-rteElement-H4 { z-index: 300; position: absolute; left: 40px; } .detail-box .ms-rteElement-H4 { font-size: 2em; line-height: 1.2em; top: 33px; text-align: left; } .detail-box .button { bottom: 33px; height: 33px; line-height: 33px; background: #c55434; padding: 13px 20px; } .detail-box #find-out-btn { line-height: 1.2em; text-align: center; } /* The main content area where the magic happens */ #interactive-vehicle-box .detail-box { background-color: #FFF; position: absolute; bottom: 0; left: 0; right: 0; top: 121px; z-index: 100; overflow: hidden; } #interactive-vehicle-box li .detail-box { /*Not the same as above, the above one isn't inside an LI*/ cursor: default; z-index: 0; } #interactive-vehicle-box li.active .detail-box { /* Pop it on top */ z-index: 200; } #interactive-vehicle-box li:hover .detail-box { /* Pop it on top */ z-index: 200; } /* This causes the vehicle body to bounce or vibrate, depending on settings */ #interactive-vehicle-box li.active .vehicle-body { -webkit-animation: vibrate 200ms linear infinite alternate; -moz-animation: vibrate 200ms linear infinite alternate; -ms-animation: vibrate 200ms linear infinite alternate; -o-animation: vibrate 200ms linear infinite alternate; animation: vibrate 200ms linear infinite alternate; } #interactive-vehicle-box li:hover .vehicle-body { -webkit-animation: vibrate 200ms linear infinite alternate; -moz-animation: vibrate 200ms linear infinite alternate; -ms-animation: vibrate 200ms linear infinite alternate; -o-animation: vibrate 200ms linear infinite alternate; animation: vibrate 200ms linear infinite alternate; } @-webkit-keyframes vibrate { from{-webkit-transform:rotate(-0.1deg); -webkit-transform-origin: 250% 50%} to{-webkit-transform:rotate(0.1deg);} } @-moz-keyframes vibrate { from{-moz-transform:rotate(-0.1deg); -moz-transform-origin: 250% 50%} to{-moz-transform:rotate(0.1deg);} } @-ms-keyframes vibrate { from{-ms-transform:rotate(-0.1deg); -ms-transform-origin: 250% 50%} to{-ms-transform:rotate(0.1deg);} } @-o-keyframes vibrate { from{-o-transform:rotate(-0.1deg); -o-transform-origin: 250% 50%} to{-o-transform:rotate(0.1deg);} } @keyframes vibrate { from{transform:rotate(-0.2deg); transform-origin: 250% 50%} to{transform:rotate(0.1deg);} } /* This causes the vehicle body to bounce or vibrate, depending on settings */ #interactive-vehicle-box li.active .vehicle-body.longbounce { -webkit-animation: longbounce 400ms linear infinite alternate; -moz-animation: longbounce 400ms linear infinite alternate; -ms-animation: longbounce 400ms linear infinite alternate; -o-animation: longbounce 400ms linear infinite alternate; animation: longbounce 400ms linear infinite alternate; } #interactive-vehicle-box li:hover .vehicle-body.longbounce { -webkit-animation: longbounce 400ms linear infinite alternate; -moz-animation: longbounce 400ms linear infinite alternate; -ms-animation: longbounce 400ms linear infinite alternate; -o-animation: longbounce 400ms linear infinite alternate; animation: longbounce 400ms linear infinite alternate; } @-webkit-keyframes longbounce { from{-webkit-transform:rotate(-0.1deg); -webkit-transform-origin: 250% 50%} to{-webkit-transform:rotate(0.1deg);} } @-moz-keyframes longbounce { from{-moz-transform:rotate(-0.1deg); -moz-transform-origin: 250% 50%} to{-moz-transform:rotate(0.1deg);} } @-ms-keyframes longbounce { from{-ms-transform:rotate(-0.1deg); -ms-transform-origin: 250% 50%} to{-ms-transform:rotate(0.1deg);} } @-o-keyframes longbounce { from{-o-transform:rotate(-0.1deg); -o-transform-origin: 250% 50%} to{-o-transform:rotate(0.1deg);} } @keyframes longbounce { from{transform:rotate(-0.2deg); transform-origin: 250% 50%} to{transform:rotate(0.1deg);} } /* This causes the vehicle body to bounce or vibrate, depending on settings */ #interactive-vehicle-box li.active .vehicle-body.longbounce { -webkit-animation: bigbounce 300ms linear infinite alternate; -moz-animation: bigbounce 300ms linear infinite alternate; -ms-animation: bigbounce 300ms linear infinite alternate; -o-animation: bigbounce 300ms linear infinite alternate; animation: bigbounce 300ms linear infinite alternate; } #interactive-vehicle-box li:hover .vehicle-body.longbounce { -webkit-animation: bigbounce 300ms linear infinite alternate; -moz-animation: bigbounce 300ms linear infinite alternate; -ms-animation: bigbounce 300ms linear infinite alternate; -o-animation: bigbounce 300ms linear infinite alternate; animation: bigbounce 300ms linear infinite alternate; } @-webkit-keyframes bigbounce { from{-webkit-transform:rotate(-0.4deg); -webkit-transform-origin: 200% 50%} to{-webkit-transform:rotate(0.1deg);} } @-moz-keyframes bigbounce { from{-moz-transform:rotate(-0.4deg); -moz-transform-origin: 200% 50%} to{-moz-transform:rotate(0.1deg);} } @-ms-keyframes bigbounce { from{-ms-transform:rotate(-0.4deg); -ms-transform-origin: 200% 50%} to{-ms-transform:rotate(0.1deg);} } @-o-keyframes bigbounce { from{-o-transform:rotate(-0.4deg); -o-transform-origin: 200% 50%} to{-o-transform:rotate(0.1deg);} } @keyframes bigbounce { from{transform:rotate(-0.4deg); transform-origin: 200% 50%} to{transform:rotate(0.1deg);} } /* This causes the vehicle body to bounce or vibrate, depending on settings */ #interactive-vehicle-box li.active .vehicle-body.longbounce { -webkit-animation: offroadbounce 300ms linear infinite alternate; -moz-animation: offroadbounce 300ms linear infinite alternate; -ms-animation: offroadbounce 300ms linear infinite alternate; -o-animation: offroadbounce 300ms linear infinite alternate; animation: offroadbounce 300ms linear infinite alternate; } #interactive-vehicle-box li:hover .vehicle-body.longbounce { -webkit-animation: offroadbounce 300ms linear infinite alternate; -moz-animation: offroadbounce 300ms linear infinite alternate; -ms-animation: offroadbounce 300ms linear infinite alternate; -o-animation: offroadbounce 300ms linear infinite alternate; animation: offroadbounce 300ms linear infinite alternate; } @-webkit-keyframes offroadbounce { from{-webkit-transform:rotate(-0.2deg); -webkit-transform-origin: 72% 75%} to{-webkit-transform:rotate(2deg);} } @-moz-keyframes offroadbounce { from{-moz-transform:rotate(-0.2deg); -moz-transform-origin: 72% 75%} to{-moz-transform:rotate(2deg);} } @-ms-keyframes offroadbounce { from{-ms-transform:rotate(-0.2deg); -ms-transform-origin: 72% 75%} to{-ms-transform:rotate(2deg);} } @-o-keyframes offroadbounce { from{-o-transform:rotate(-0.2deg); -o-transform-origin: 72% 75%} to{-o-transform:rotate(2deg);} } @keyframes offroadbounce { from{transform:rotate(-0.1deg); transform-origin: 72% 75%} to{transform:rotate(3deg);} } .road-strip { position: absolute; right: 0; bottom: 30px; width: 640px; height: 64px; background:url('../img/road-slice.png') repeat-x; } .road-strip .white-to-transparent-grad-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 70%; } .road-strip .other-light-grey-grad-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 70%; } /* This causes the road to 'move' */ #interactive-vehicle-box li.active .road-strip { -webkit-animation-name: roadshift; -moz-animation-name: roadshift; -ms-animation-name: roadshift; -o-animation-name: roadshift; animation-name: roadshift; -webkit-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 400ms; -moz-animation-duration: 400ms; -ms-animation-duration: 400ms; -o-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } #interactive-vehicle-box li:hover .road-strip { -webkit-animation-name: roadshift; -moz-animation-name: roadshift; -ms-animation-name: roadshift; -o-animation-name: roadshift; animation-name: roadshift; -webkit-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 400ms; -moz-animation-duration: 400ms; -ms-animation-duration: 400ms; -o-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes roadshift { from{background-position:0 0} to{background-position:40px 0} } @-moz-keyframes roadshift { from{background-position:0 0} to{background-position:40px 0} } @-ms-keyframes roadshift { from{background-position:0 0} to{background-position:40px 0} } @-o-keyframes roadshift { from{background-position:0 0} to{background-position:40px 0} } @keyframes roadshift { from{background-position:0 0} to{background-position:40px 0} } /* This causes the vehicles to slide in from the side */ #interactive-vehicle-box li .vehicle-strip { -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #interactive-vehicle-box li.active .vehicle-strip { right:30px; /* Default slide in amount */ } #interactive-vehicle-box li:hover .vehicle-strip { right:30px; /* Default slide in amount */ } #interactive-vehicle-box li .vehicle-strip { position: absolute; bottom: 65px; background-image:url('../img/big-vehicle-sprite.png'); background-repeat: no-repeat; } #interactive-vehicle-box .vehicle-body { background-image:url('../img/big-vehicle-sprite.png'); width: 100%; height: 100%; display: block; } /* Van and Jeep */ #van-large { background-position:-670px 0; height:80px; width:180px; right:-380px; } #van-large .vehicle-body{background-position:-170px 0;} #interactive-vehicle-box li.active .vehicle-strip#truck-large { right:30px; } #interactive-vehicle-box li:hover .vehicle-strip#truck-large { right:30px; } #interactive-vehicle-box li .vehicle-strip#van-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms;} #jeep-large { background-position:-500px 0; height:80px; width:160px; right:-380px; } #jeep-large .vehicle-body { background-position:0 0; } #interactive-vehicle-box li.active .vehicle-strip#jeep-large { right:260px; } #interactive-vehicle-box li:hover .vehicle-strip#jeep-large { right:260px; } li.active #jeep-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } li:hover #jeep-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } /* Trucks */ #truck-large { background-position:-500px -300px; height:91px; width:175px; right:-450px; } #truck-large .vehicle-body{background-position:0 -300px;} #interactive-vehicle-box li.active .vehicle-strip#truck-large { right:350px; } #interactive-vehicle-box li:hover .vehicle-strip#truck-large { right:350px; } li.active #truck-large .vehicle-body{ -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms;} li:hover #truck-large .vehicle-body{ -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms;} #artic-large { background-position:-675px -300px; height:91px; width:280px; right:-450px; } #artic-large .vehicle-body { background-position:-175px -300px; } #interactive-vehicle-box li.active .vehicle-strip#artic-large { right:40px; } #interactive-vehicle-box li:hover .vehicle-strip#artic-large { right:40px; } #interactive-vehicle-box li .vehicle-strip#artic-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } /* Bus and ambulance */ #bus-large { background-position:-500px -600px; height:88px; width:260px; right:-450px; } #bus-large .vehicle-body{background-position:0 -600px;} #interactive-vehicle-box li.active .vehicle-strip#bus-large { right:240px; } #interactive-vehicle-box li:hover .vehicle-strip#bus-large { right:240px; } li.active #bus-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } li:hover #bus-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } #ambulance-large { background-position:-780px -600px; height:88px; width:160px; right:-450px; } #ambulance-large .vehicle-body{background-position:-280px -600px;} #interactive-vehicle-box li.active .vehicle-strip#ambulance-large { right:40px; } #interactive-vehicle-box li:hover .vehicle-strip#ambulance-large { right:40px; } #interactive-vehicle-box li.active .vehicle-strip#ambulance-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } #interactive-vehicle-box li:hover .vehicle-strip#ambulance-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } /* Mobile caravans */ #caravans-large { background-position:-500px -900px; height:99px; width:210px; right:-210px; } #caravans-large .vehicle-body{background-position:0 -900px;} #interactive-vehicle-box li.active .vehicle-strip#caravans-large { right:150px; } #interactive-vehicle-box li:hover .vehicle-strip#caravans-large { right:150px; } /* Mixed vehicles */ #tanker-large { background-position:-500px -1200px; height:96px; width:200px; right:-390px; } #tanker-large .vehicle-body{background-position:0 -1200px;} #interactive-vehicle-box li.active .vehicle-strip#tanker-large { right:320px; } #interactive-vehicle-box li:hover .vehicle-strip#tanker-large { right:320px; } li.active #tanker-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } li:hover #tanker-large .vehicle-body { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } #crane-large { background-position:-500px -1200px; height:96px; width:200px; right:-390px; } #crane-large .vehicle-body{background-position:-190px -1200px;} #interactive-vehicle-box li.active .vehicle-strip#crane-large { right:60px; } #interactive-vehicle-box li:hover .vehicle-strip#crane-large { right:60px; } #interactive-vehicle-box li.active .vehicle-strip#crane-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } #interactive-vehicle-box li:hover .vehicle-strip#crane-large { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } /*- Decision page ============================================================================================== */ #decision-boxes ul{} /*- Landing page ============================================================================================== */ .box-half { min-height: 260px; } .box-half-edit { min-height: 410px; } .box-half h3 { border-bottom: 1px solid #DFDFDF; font-size: 1.5em; height: 54px; margin: 0; padding-left: 20px; padding-top: 16px; } .box-half .content { font-size: 1.14em; padding: 20px; } .box-half .content p { padding-bottom: 14px; } .box-half .content a { font-weight: bold; text-decoration: none; } .box-half .content ul li { background: transparent url('../img/arrows.png') no-repeat -12px -30px; padding-bottom: 8px; padding-left: 16px; } } /*============================================================================================== / 001_Desktop / 002_Tablet (Landscape) - very similar to desktop ============================================================================================== */ /*============================================================================================== Anything less than 940 - eg tablet portrait and mobile ============================================================================================== */ @media only screen and (max-width: 939px) { #smallDecision.show-for-small .ms-rtestate-field, #smallLanding.show-for-small .ms-rtestate-field { background: url('../img/content_bg.png') fixed center center; } #smallDecision.show-for-small .ms-rtestate-field img, #smallLanding.show-for-small .ms-rtestate-field img { padding-left: 77px; } #banner-head-home { margin-top: 0; } /* ---------✂---------------- Homepage boxes ---------✂---------------- */ #mobile-vehicle-boxes .box-half p{ min-height: 100px } #mobile-vehicle-boxes h3{ margin: 0; padding-left: 20px; position: relative; border-bottom: 1px solid #DFDFDF; } #mobile-vehicle-boxes a h3{ color: #333; text-decoration: none; } #mobile-vehicle-boxes .sprite { display: block; margin: 25px auto 16px; height: 32px; position: absolute; right: 20px; top: 50%; margin-top: -16px; } #vans { background-position:0 -28px; width: 125px} #trucks { background-position:-5px -68px; width: 119px} #buses { background-position: -5px -144px; width: 104px } #caravans { background-position: -2px -106px;width: 61px} #mixed { background-position: -2px -181px; width: 126px} #mobile-vehicle-boxes p{ padding: 20px; font-size: 1.083em; } #mobile-vehicle-boxes p a{ font-size: 1.231em; display: block; padding-top: 20px; text-decoration: none; color:#c46f50; font-weight: bold; } #mobile-vehicle-boxes .box-full a { text-decoration: none!important } #mobile-vehicle-boxes .box-full h3 { border-bottom: 0 } #mobile-vehicle-boxes .box-full:hover h3 { background: #f5efef; background: -moz-linear-gradient(top, #f5efef 0%, #f5efef 26%, #edecea 43%, #eeeaeb 47%, #e9e7e8 56%, #e7e5e6 57%, #e8e6e7 59%, #e1e1e1 73%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5efef), color-stop(26%,#f5efef), color-stop(43%,#edecea), color-stop(47%,#eeeaeb), color-stop(56%,#e9e7e8), color-stop(57%,#e7e5e6), color-stop(59%,#e8e6e7), color-stop(73%,#e1e1e1), color-stop(100%,#dfdfdf)); background: -webkit-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -o-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -ms-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: linear-gradient(to bottom, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5efef', endColorstr='#dfdfdf',GradientType=0 ); } #mobile-vehicle-boxes .box-half:hover h3 { background: #f5efef; background: -moz-linear-gradient(top, #f5efef 0%, #f5efef 26%, #edecea 43%, #eeeaeb 47%, #e9e7e8 56%, #e7e5e6 57%, #e8e6e7 59%, #e1e1e1 73%, #dfdfdf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5efef), color-stop(26%,#f5efef), color-stop(43%,#edecea), color-stop(47%,#eeeaeb), color-stop(56%,#e9e7e8), color-stop(57%,#e7e5e6), color-stop(59%,#e8e6e7), color-stop(73%,#e1e1e1), color-stop(100%,#dfdfdf)); background: -webkit-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -o-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: -ms-linear-gradient(top, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); background: linear-gradient(to bottom, #f5efef 0%,#f5efef 26%,#edecea 43%,#eeeaeb 47%,#e9e7e8 56%,#e7e5e6 57%,#e8e6e7 59%,#e1e1e1 73%,#dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5efef', endColorstr='#dfdfdf',GradientType=0 ); } /*- Replacement CRW pages ============================================================================================== */ .ms-rteStyle-box-grey li{ padding-left: 150px; padding-right: 60px; } .ms-rteStyle-box-grey i{ left: 30px; } /*- Sidebar stuff - right sidebar only shows on large view ============================================================================================== */ #box-wrapper.search-results-box { width: 395px; } .accordion .road-strip { background: url('../img/road-slice.png') repeat-x; bottom: 30px; height: 64px; position: absolute; right: 0; width: 440px; } .accordion .road-strip span.other-light-grey-grad-bg { bottom: 0; left: 0; position: absolute; right: 70%; top: 0; } .neilRoadBlur { bottom: 0; left: 0; position: absolute; right: 70%; top: 0; height:10px; width:50px; } .accordion h3 { background: white url('../img/arrows.png') no-repeat 620px -231px; } .accordion .active h3 { background: #eee url('../img/arrows.png') no-repeat 620px -165px; } .accordion .content p { width: 624px; } .accordion h3 a { background: #fff url(../img/arrows.png) no-repeat 620px -231px; } .accordion .active h3 a { background: #eee url(../img/arrows.png) no-repeat 620px -168px; } .accordion .vehicles.van-jeeps .van-jeeps { right: -620px; } .accordion .vehicles.truck-artic .truck-artic { right: -630px; } .accordion .vehicles.bus-ambulance .bus-ambulance { right: -660px; } .accordion .vehicles.caravans .caravans { right: -725px; } .accordion .vehicles.mixed-fleet .mixed-fleet { bottom: 50px; right: -615px; } } /*============================================================================================== / Anything less than 940 - eg tablet portrait and mobile ============================================================================================== */ /*============================================================================================== 003_Tablet (Portrait) ============================================================================================== */ @media only screen and (max-width: 939px) and (min-width: 769px){ #branding { background:url('../img/covisLogo.png') no-repeat left center transparent; } #banner-head-home { background:url('../img/banners/home-head-medium.png') no-repeat center center transparent; margin-bottom: 10px; } #banner-head-decision { background:url('../img/banners/decision-head-medium.png') no-repeat center center transparent; height: 150px; } #banner-head-landing { background:url('../img/banners/landing-head-medium.png') no-repeat center center transparent; height: 220px; } /* ---------✂---------------- Header layout ---------✂---------------- */ .row{min-width:768px} .row-inner{width:728px} #branding{width:160px;} #link-box{float:left;margin:54px 0 0 60px} .btn-HGV-Login{margin:42px 10px 0} #search-wrap{margin:42px 0 0} /* ---------✂---------------- Header Nav ---------✂---------------- */ .primary-nav ul li a, .primary-nav ul li span.sectionsTab { padding: 0 15px; } .primary-nav ul li:hover, .primary-nav ul li.active { padding: 0; left: 0; } .primary-nav ul li a i, .primary-nav ul li span i { font-style: normal; } .primary-nav ul li.last a, .primary-nav ul li.last span.sectionsTab { padding-right: 15px; } .primary-nav ul li:hover, .primary-nav ul li.active { padding: 0; left: 0; } .primary-nav ul.inline-list li:hover a, .primary-nav.hide-for-small ul.inline-list li.active a, .primary-nav ul.inline-list li:hover span.sectionsTab, .primary-nav ul.inline-list li.active span.sectionsTab { /* padding: 4px 16px 0 18px; */ } .primary-nav ul.inline-list li.last:hover a, .primary-nav.hide-for-small ul.inline-list li.last.active a, .primary-nav ul.inline-list li.last:hover span.sectionsTab, .primary-nav.hide-for-small ul.inline-list li.last.active span.sectionsTab { padding-right: 15px; } /* ---------✂---------------- Homepage boxes ---------✂---------------- */ #mobile-vehicle-boxes h3 { height: 70px; line-height: 70px; font-size: 1.500em; margin: 0; } #mobile-vehicle-boxes .box-full { margin-bottom: 30px; margin-top:10px; } #mobile-vehicle-boxes .mixed-box { border: 1px solid #DFDFDF; } /* ---------✂---------------- Decision page ---------✂---------------- */ #decision-boxes li{ width: 172.5px; margin: 10px 10px 10px 0; } #decision-boxes .fourth{ float: right; margin: 10px 0 0 0; height: 145px; font-size: 1.333em } #decision-boxes li a { width: 170.5px; } #decision-boxes .fourth a{ width: 170px; } .right-sidebar { background-color: #FFF; background-image: none; } /* ============================================ Accordion ♩-♪♪♪-♫-♬ ============================================ */ .accordion { margin: 0 auto 20px; padding: 20px 0; width: 670px; } /* ============================================ Page specific - Landing page ============================================ */ #box-wrapper { width: 484px; margin-bottom: 30px } #box-wrapper .box-half { min-height: 272px; } #box-wrapper .box-half h3 { font-size: 1.24em; height: auto; min-height: 40px; padding: 12px; } #box-wrapper .box-half .content { padding: 12px; } /* Overwrite SharePoint css */ #box-wrapper .box-half .ms-WPBody h3, #box-wrapper .box-half .ms-rtestate-field h3 { font-size: 1.24em; height: auto; min-height: 40px; padding: 12px; } #box-wrapper .box-half .ms-WPBody, #box-wrapper .box-half .ms-rtestate-field { padding: 12px; } #box-wrapper .box-half .ms-rtestate-field ul li { color: #c46f50; } /* ============================================ Page specific - Find test centre ============================================ */ .textCenterContentBox #mapCanvas { height: 526px; width: 480px; } .mapFrame { height: 620px;width: 550px; } /*Sticky footer hack for desktop*/ body {height: 100%;} html {height: 100%;} html#lightbox{height:auto;} #full-wrap {min-height: 100%;margin-bottom: 40px} #main {overflow:auto;padding-bottom:220px;} /* must be same height as the footer */ #footer {position: relative;/*margin-top: -220px;height:220px;/* negative value of footer height */clear:both;} /* Media specific helpers */ .ir-for-medium{display:block;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0} .ir-for-medium br{display:none} .ir-for-med-large{display:block;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0} .ir-for-med-large br{display:none} } /*============================================================================================== / 003_Tablet (Portrait) ============================================================================================== */ /*============================================================================================== 004_Mobile (Landscape) ============================================================================================== */ @media only screen and (max-width: 768px) and (min-width: 481px){ #smallDecision.show-for-small .ms-rtestate-field, #smallLanding.show-for-small .ms-rtestate-field { background: url('../img/content_bg.png') fixed center center; } #smallDecision.show-for-small .ms-rtestate-field img, #smallLanding.show-for-small .ms-rtestate-field img { padding-left: 40px; } #branding { background:url('../img/mobile/covisLogo.png') no-repeat left center transparent; } #banner-head-home { background:url('../img/banners/home-head-small.png') no-repeat center center transparent; height: 104px; margin-bottom: 10px; } /* ============================================ Layout */ .row{min-width:480px} .row-inner{width:460px} /* ============================================ Header */ #header{height:74px;background-position: 0 68px;} #branding{height:74px;width: 100px} #link-box { float: left; margin: 29px 0 0 20px; } .btn-HGV-Login{display: none} #search-wrap{margin:19px 0 0} body #s4-bodyContainer {/*Added by NM to get rid of horizontal scroll on mobile view*/ min-width:0px; } /* ---------✂---------------- Header Nav ---------✂---------------- */ .primary-nav ul li:hover, .primary-nav ul li.active { padding: 0; left: 0; } .primary-nav ul li a, .primary-nav ul li span.sectionsTab { padding: 0 78px; position: relative; } .primary-nav ul li a i, .primary-nav ul li span.sectionsTab i { font-style: normal; } .primary-nav ul li.last a, .primary-nav ul li.last span.sectionsTab { padding-right: 74px; } .primary-nav.hide-for-small ul.inline-list li:hover a, .primary-nav ul.inline-list li.active a, .primary-nav.hide-for-small ul.inline-list li:hover span.sectionsTab, .primary-nav ul.inline-list li.active span.sectionsTab { padding: 4px 78px 0 78px; } .primary-nav.hide-for-small ul.inline-list li.last:hover a, .primary-nav ul.inline-list li.last.active a, .primary-nav.hide-for-small ul.inline-list li.last:hover span.sectionsTab, .primary-nav ul.inline-list li.last.active span.sectionsTab { padding-right: 74px; } .primary-nav ul li span.sectionsTab i { background: transparent url(../img/arrows.png) no-repeat -22px -322px; bottom: 11px; display: inline-block; font-style: normal; height: 14px; left: 151px; position: absolute; width: 14px; } .primary-nav ul.hide-for-small li:hover span.sectionsTab i, .primary-nav ul li.active span.sectionsTab i { background: transparent url(../img/arrows.png) no-repeat -22px -322px; bottom: 20px; display: inline-block; left: 149px; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); } /* ---------✂---------------- Dropdown menu ---------✂---------------- */ .dropdown-box { width: 460px; } .primary-nav .dropdown-box ul li { float: left; padding-bottom: 24px; padding-top: 24px; width: 47%; } .primary-nav .dropdown-box ul li:first-of-type, .primary-nav .dropdown-box ul li:nth-of-type(2n) { border-bottom: 1px dotted #add8e0; } .primary-nav .dropdown-box ul li:first-of-type, .primary-nav .dropdown-box ul li:nth-of-type(3n) { border-right: 1px dotted #add8e0; } .primary-nav ul.inline-list li.active .dropdown-box a, .primary-nav .dropdown-box ul li a { font-size: 0.9em; line-height: 1.3em; } .primary-nav ul.inline-list li.active .dropdown-box a, .primary-nav .dropdown-box ul li a { background: url(../img/arrows.png) no-repeat scroll -26px 6px transparent; line-height: auto; height: auto; margin: 0; padding: 0; padding-left: 12px; padding-top: 3px; } .box-full { border-top: none; margin-top: 10px; /*PUT BACK IN BY NM TO FIX BOTTOM BOX ON HOME PAGE MINI VERSION*/ } /*- Replacement CRW pages ============================================================================================== */ .ms-rteStyle-box-grey{ margin-left: -31px; margin-right: -31px; } /* ============================================ Secondary navigation ============================================ */ #zz18_CurrentNavigationMenu { width: 100%; } .noindex .left .menu-vertical { width: 460px; } .menu-vertical li { line-height: 50px; } .menu-vertical li a { background: transparent url("../img/bullet-blue.png") no-repeat scroll 22px 15px; font-size: 1.2em; } .menu-vertical li ul li a { font-size: 1.167em; } /* ============================================ Accordion ♩-♪♪♪-♫-♬ ============================================ */ .accordion { width: 100%; margin: 0; padding: 0; } .accordion .vehicles, .accordion .road-strip { display: none; } .accordion h3 { background: white url('../img/arrows.png') no-repeat 411px -231px; } .accordion .active h3 { background: #EEE url('../img/arrows.png') no-repeat 410px -165px; } .accordion .content p, .accordion .content.vehicle-frame p { width: 425px; } .accordion li { border: none; border-bottom: 1px solid #ccc; } .content-a .wide-content .box-full { padding-bottom: 20px; } /* ---------✂---------------- Homepage boxes ---------✂---------------- */ #mobile-vehicle-boxes .box-half { min-height: auto; } #mobile-vehicle-boxes .box-half p { min-height: 140px; } #mobile-vehicle-boxes h3 { font-size: 1.167em; height: 48px; line-height: 48px; margin: 0; } #mobile-vehicle-boxes .box-half h3 { font-size: 1.167em; height: 48px; line-height: 1.2em; margin: 0; padding-left: 15px; padding-right: 60%; padding-top: 12px; border-bottom: 0 } #mobile-vehicle-boxes .sprite { right: 15px; } #mobile-vehicle-boxes .mixed-box { border: 1px solid #DFDFDF; } /* ---------✂---------------- Decision page banner ---------✂---------------- */ #banner-head-landing { background: #FFF; font-size: 1.2em; font-weight: normal; height: auto; margin-bottom: 10px; margin-top: 0; padding: 15px; text-align: center; } #banner-head-decision { background: #FFF; font-size: 1.2em; font-weight: normal; height: auto; margin-bottom: 10px; margin-top: 0; padding: 15px; text-align: center; } /*- Sidebar stuff - right sidebar only shows on large view ============================================================================================== */ .right-sidebar { background-color: #FFF; background-image: none; } .right-sidebar .inner { width: auto; } /* ============================================ Landing page ============================================ */ #box-wrapper { margin-bottom: 0; padding-bottom: 30px; width: 100%; } #box-wrapper .box-half { min-height: 295px; } #box-wrapper .box-half h3 { font-size: 1.1em; font-weight: bold; height: auto; min-height: 44px; padding: 10px 20px 0; } #box-wrapper .box-half .content { padding: 14px; } #box-wrapper .box-half .content p { font-size: 0.95em; } /* Overwrite SharePoint css */ #box-wrapper .box-half .ms-WPBody h3, #box-wrapper .box-half .ms-rtestate-field h3 { font-size: 1.1em; font-weight: bold; height: auto; min-height: 44px; padding: 10px 20px 0; } #box-wrapper .box-half .ms-WPBody, #box-wrapper .box-half .ms-rtestate-field { padding: 14px; } #box-wrapper .box-half .ms-WPBody p, #box-wrapper .box-half .ms-rtestate-field p { font-size: 0.95em; } .search-box div#search-wrap #txtSearch { width: 272px; } #box-wrapper.search-results-box { width: 378px; } .searchFilter { background-color: #42A7B8; clear: right; color: white; margin-bottom: 0; margin-top: 18px; width: 459px; } .searchFilter li h3 { font-size: 1.333em; } .searchFilter li a { font-size: 1.167em; } .searchFilter li.active a { background: #7EC2CD url('../img/arrows.png') no-repeat 405px -113px; } /* ============================================ Page specific - Find test centre ============================================ */ #listBox { width: 400px; } .textCenterContentBox #selectCounty { float: left !important; margin-left: 24px; width: 130px; } .mapFrame { width:425px; } /*- Replacement CRW pages ============================================================================================== */ .ms-rteStyle-box-grey{ margin-left: -31px; margin-right: -31px; } .ms-rteStyle-box-grey li{ padding-left: 120px; padding-right: 30px; } .ms-rteStyle-box-grey i{ left: 20px; } /* ============================================ Footer */ #footer-links-wrap li{ width: 45%; padding-right: 5%; /*height: 210px;*/ } } /*============================================================================================== / 004_Mobile (Landscape) ============================================================================================== */ /*============================================================================================== 005_Mobile (Portrait) ============================================================================================== */ @media only screen and (max-width: 480px) { #smallDecision.show-for-small .ms-rtestate-field img, #smallLanding.show-for-small .ms-rtestate-field img { padding-left: 0px; } body #s4-bodyContainer {/*Added by NM to get rid of horizontal scroll on mobile view*/ min-width:0px; } .show-for-mobile .srch-gosearchimg { height:34px; width:36px } #branding { background: url('../img/mobile/covisLogo.png') no-repeat left center transparent; } #banner-head-home { background:url('../img/banners/home-head-xsmall.png') no-repeat center center transparent; height: 88px; margin-bottom: 10px; } /* ============================================ Layout */ .row { min-width: 320px; } .row-inner { width: 300px; /*margin: 0 10px;*/ } /* ============================================ Header */ #header { background-position: 0 68px; height: 74px; } #branding { height: 74px; width: 100px; } #link-box { position: absolute; right: 50px; text-align: right; top: 0; width: 100px; } #link-box .right { border: 0; padding: 0; width: 100%; } #link-box .left { border: 0; padding: 0; width: 100%; } #link-box a:first-of-type { margin-bottom: 10px; } .btn-HGV-Login { display: none; } #search-wrap { margin: 0; position: absolute; right: 0; top: 19px; width: 38px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } #header .row-inner { position: static; } #btnSearch { display: none; } #txtSearch { display: none; } .mob-link { background-color: white; background-position: 5px 7px; border: medium none; display: block; float: right; height: 100%; width: 34px; } .box-full { margin-top:10px; } /* ---------✂---------------- Header Nav ---------✂---------------- */ .primary-nav ul li:hover, .primary-nav ul li.active { padding: 0; left: 0; } .primary-nav ul li a, .primary-nav ul li span.sectionsTab { padding: 0 40px; position: relative; } .primary-nav ul.inline-list li.active span.sectionsTab { padding: 4px 40px 0 40px; } .primary-nav ul li span.sectionsTab i { background: transparent url(../img/arrows.png) no-repeat -22px -322px; bottom: 11px; display: inline-block; font-style: normal; height: 14px; left: 109px; position: absolute; width: 14px; } .primary-nav.hide-for-small ul li:hover a i, .primary-nav ul li.active a i, .primary-nav.hide-for-small ul li:hover span.sectionsTab i, .primary-nav ul li.active span.sectionsTab i { background: transparent url(../img/arrows.png) no-repeat -22px -322px; bottom: 20px; display: inline-block; left: 107px; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); } .primary-nav ul.inline-list li:hover a { /* padding: 4px 38px 0 40px; */ } .primary-nav ul.inline-list li.active a { padding: 4px 38px 0 40px; } .primary-nav ul li.last a { padding-right: 28px; } .primary-nav ul.inline-list li.last:hover a, .primary-nav ul.inline-list li.last.active a, .primary-nav ul.inline-list li.last:hover span.sectionsTab, .primary-nav ul.inline-list li.last.active span.sectionsTab { padding-right: 28px; } .dropdown-box { width: 300px; } .primary-nav ul.inline-list li:hover .dropdown-box a, .primary-nav ul.inline-list li.active .dropdown-box a, .primary-nav ul.inline-list li:hover .dropdown-box span.sectionsTab, .primary-nav ul.inline-list li.active .dropdown-box span.sectionsTab { background: url("../img/arrows.png") no-repeat scroll -26px 21px transparent; border-radius: 0; color: #FFFFFF; display: block; font-size: 0.8em; margin-left: 12px; padding: 4px 0 4px 12px; text-decoration: none; } /* ============================================ Secondary navigation ============================================ */ #zz18_CurrentNavigationMenu { width: 100%; } .noindex .left .menu-vertical { width: 300px; } .menu-vertical li { line-height: 50px; } .menu-vertical li a { background: transparent url("../img/bullet-blue.png") no-repeat scroll 22px 15px; font-size: 1.2em; } .menu-vertical li ul li a { font-size: 1.167em; } /* ============================================ Accordion ♩-♪♪♪-♫-♬-.. ============================================ */ .accordion { margin: 0; padding: 0; width: 100%; } .accordion .vehicles, .accordion .road-strip { display: none; } .accordion h3 { background: white url('../img/arrows.png') no-repeat 250px -231px; } .accordion .active h3 { background: #EEE url('../img/arrows.png') no-repeat 250px -165px; } .accordion .content.vehicle-frame { width: auto; } .accordion .content p, .accordion .content.vehicle-frame p { width: 260px; } .accordion li { border: none; border-bottom: 1px solid #ccc; } .content-a .wide-content .box-full { padding-bottom: 0; } .right-sidebar { background-color: #FFF; background-image: none; } .right-sidebar .inner { width: auto; } /* ---------✂---------------- Homepage boxes ---------✂---------------- */ .box-full { border: solid 1px #DFDFDF; } .box-half { width: 100%!important; } #mobile-vehicle-boxes .box-half p { min-height: 90px; } #mobile-vehicle-boxes {} #mobile-vehicle-boxes h3 { height: 50px; line-height: 50px; font-size: 1.167em; border-bottom: 0 } #mobile-vehicle-boxes p { padding: 12px 20px; } #mobile-vehicle-boxes p a { padding-top: 8px; } #mobile-vehicle-boxes .sprite { right: 10px; } #mobile-vehicle-boxes .box-full h3 { font-size: 1.167em; height: 60px; line-height: 1.5em; margin: 0; padding-left: 15px; padding-right: 45%; padding-top: 15px; } #mobile-vehicle-boxes .box-half { min-height: auto !important; } #mobile-vehicle-boxes .box-half p { min-height: auto; } #mobile-vehicle-boxes p a { font-size: 1.167em; } /* ---------✂---------------- Decision page banner ---------✂---------------- */ #banner-head-landing { background: #FFF; font-size: 1.3em; /* 1.417em; */ height: auto; margin-bottom: 10px; margin-top: 0; padding: 15px; text-align: center; } #banner-head-decision { background: #FFF; font-size: 1.3em; /* 1.417em; */ height: auto; margin-bottom: 10px; margin-top: 0; padding: 15px; text-align: center; } /* ============================================ Landing page ============================================ */ h2.box-full { font-size: 1.500em; } .ms-rteElement-H2.box-full { font-size: 1.500em; } #box-wrapper { margin-bottom: 0; padding-bottom: 30px; width: 100%; } #box-wrapper .box-half h3 { font-size: 1.35em; font-weight: bold; height: auto; padding: 14px 20px; } #box-wrapper p { font-size: 1.167em; } /* Overwrite SharePoint css */ #box-wrapper .box-half .ms-WPBody h3, #box-wrapper .box-half .ms-rtestate-field h3 { font-size: 1.35em; font-weight: bold; height: auto; padding: 14px 20px; } .search-box div#search-wrap { margin: 20px; position: relative; top: 0; width: 253px; } .search-box div#search-wrap #txtSearch { display: block; width: 205px; } .search-box div#search-wrap #btnSearch { border-left: solid 1px #DFDFDF; } #box-wrapper.search-results-box { padding: 10px 25px 0; width: 248px; } .searchFilter { margin-bottom: 0; margin-top: 18px; width: 299px; } .searchFilter li h3 { font-size: 1.333em; } .searchFilter li a { font-size: 1.167em; } .searchFilter li.active a { background: #7EC2CD url('../img/arrows.png') no-repeat 242px -113px; } #box-wrapper.search-results-box .paging { background-color: #fff; } /*#box-wrapper.search-results-box .paging li { width: 49px; }*/ /* ============================================ Page specific - Find test centre ============================================ */ #listBox { width: 240px; } .textCenterContentBox #selectCounty { float: left !important; margin-left: 24px; width: 130px; } .mapFrame { width:335px; } /* ============================================ Footer */ #footer-links-wrap li{width: 45%;padding-right: 5%;/*height: 210px*/} } /*============================================================================================== / 005_Mobile (Portrait) ============================================================================================== */ /* ============================================ Borrowed from Zurb Foundation ============================================ */ .show-for-print { display: none!important; } .hide-for-large { display: none!important; } .show-for-medium { display: none!important; } .show-for-small { display: none!important; } .hide-for-print { display: inherit!important; } .show-for-large-and-medium { display: inherit!important; } .show-for-large { display: inherit!important; } .hide-for-medium { display: inherit!important; } .hide-for-small { display: inherit!important; } .hide-for-mobile { display:inherit!important } @media only screen and (min-width:940px) { .hide-for-large { display:inherit!important } .hide-for-medium { display:inherit!important } .hide-for-small { display:inherit!important } .hide-for-large { display:none!important } .show-for-medium { display:none!important } .show-for-large-and-medium { display: inherit!important; } .show-for-small { display:none!important } .hide-for-mobile { display:inherit!important } } @media only screen and (max-width:939px) and (min-width:768px) { .hide-for-large { display:inherit!important } .show-for-medium { display:inherit!important } .show-for-large-and-medium { display: inherit!important; } #largeHomepage { display: none!important; } .hide-for-small { display:inherit!important } .show-for-large { display:none!important } .hide-for-medium { display:none!important } .show-for-small { display:none!important } .hide-for-mobile { display:inherit!important } .show-for-homepage { display: inherit!important; } } @media only screen and (max-width: 768px) { .hide-for-large { display:inherit!important } .hide-for-medium { display:inherit!important } .show-for-small { display:inherit!important } .show-for-large { display:none!important } .show-for-medium { display:none!important } .show-for-large-and-medium { display: none!important; } .hide-for-small { display:none!important } .hide-for-mobile { display:inherit!important } .show-for-mobile { display: none!important; } } @media only screen and (max-width: 480px) { .hide-for-mobile { display: none!important; } .show-for-mobile { display:inherit!important } } .hide-for-portrait{display:inherit!important} .show-for-landscape{display:inherit!important} .show-for-portrait{display:none!important} .hide-for-landscape{display:none!important} @media screen and (orientation:landscape) { .hide-for-portrait{display:inherit!important} .show-for-landscape{display:inherit!important} .show-for-portrait{display:none!important} .hide-for-landscape{display:none!important} } @media screen and (orientation:portrait) { .hide-for-landscape{display:inherit!important} .show-for-portrait{display:inherit!important} .show-for-landscape{display:none!important} .hide-for-portrait{display:none!important} } /* ============================================================================================== End Responsive Layout ============================================================================================== */ /* ====== Retina ========================================= */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 2/1) { .primary-nav ul.inline-list li.active .dropdown-box a, .primary-nav .dropdown-box ul li a, .box-half .content ul li { background-image: url(../img/arrows2x.png); background-size: 40px 355px; } .searchFilter li.active a { background-image: url('../img/arrows2x.png'); background-size: 40px 355px; } .accordion h3, .accordion .active h3 { background-image: url('../img/arrows2x.png'); background-size: 40px 355px; } #box-wrapper .box-half .content ul li { background-image: url('../img/arrows2x.png'); background-size: 40px 355px; } #box-wrapper .box-half .ms-WPBody ul li, #box-wrapper .box-half .ms-rtestate-field ul li { background: url('../img/arrows2x.png') no-repeat scroll 0 -30px; background-size: 40px 355px; padding-bottom: 8px!important; } .menu-verticalondaryNav li ul li a { background-image: url('../img/arrows2x.png'); background-size: 40px 355px; } .menu-vertical li a { background: transparent url("../img/bullet-blue2x.png") no-repeat scroll 20px 20px; /*background: url("../img/bullet-orange2x.png") no-repeat scroll 0 4px transparent;*/ background-size: 8px 9px; } /* #interactive-vehicle-box li .vehicle-strip, #interactive-vehicle-box .vehicle-body { background-image: url('../img/big-vehicle-sprite2x.png'); background-size: 1000px 1350px; } */ .sprite { background-image: url('../img/sprite2x.png'); background-size: 134px 214px; } .road-strip { background-image: url('../img/road-slice.png'); } } /* ============================================================================================== End Responsive Images ============================================================================================== */ /* ============================================================================================== Formatting Search Results Page ============================================================================================== */ .s4-search input.ms-sbplain { width: 105px!important; height: 37px; } .srch-Page { font-family:Arial, sans-serif!important; } .search-results .srch-Icon, .search-results .srch-urllink, .search-results .srch-Metadata2 { display:none; } .search-results .srch-URL2, .search-results .srch-Title2 a:link, .search-results .srch-Title3 a { color: #c45434 !important; text-decoration: none; } .search-results .srch-Metadata1 { background: transparent url(../img/bottomDotBorder.png) left bottom repeat-x; padding-bottom: 8px; } .search-box .s4-search input.ms-sbplain { width: 272px!important; height:37px; } .search-box .s4-search .srch-gosearchimg { background-color: #FFFFFF; /*background-image: url("../img/sprite.png");*/ background-position: 5px 7px; border: medium none; border-left: solid 1px #dfdfdf; float: right; height: 35px; /*100%;*/ width: 40px; } /* Refinement Panel */ .searchFilter .srch-WPBody { width: 240px; color: #fff; clear: right; margin-bottom: 10px; background-color: rgb(66, 167, 184); } .searchFilter .ms-searchref-filterlink { width: 100%; padding-right: 0px; } .searchFilter li.ms-searchref-filtermsg { background-color: #42a7b8; } .searchFilter .ms-searchref-main { font-family: Arial,sans-serif!important; } .searchFilter .ms-searchref-categoryname, .searchFilter .ms-searchref-filter, .searchFilter .ms-searchref-filterlink { color: #fff!important; } .searchFilter .ms-searchref-filter { font-size:12px; } .searchFilter .ms-searchref-selected, .searchFilter .ms-searchref-selected a:hover { background: #7ec2cd url('../img/arrows.png') no-repeat 181px -114px; border: none; background-color:rgb(126, 194, 205) } .searchFilter li.ms-searchref-filter { margin: 0px 0px 0px 0px; padding-left: 0px } /*Search Paging*/ .paging .srch-Page { padding: 0px 0px 0px 0px; } .paging .srch-Page-img { display: none; } .paging .srch-Page strong { border-left: none; background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ffffff 9%, #f7f7f7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(9%,#ffffff), color-stop(100%,#f7f7f7)); background: -webkit-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -o-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: -ms-linear-gradient(top, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); background: linear-gradient(to bottom, #fefefe 0%,#ffffff 9%,#f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 ); } .paging .srch-Page a, .paging .srch-Page strong { border: 1px solid #fff; color: #c45434!important; display: block; float: left; font-weight: bold; height: 47px; padding-top: 16px; text-align: center; text-decoration: none; width: 47px; } .paging .srch-Page a:hover { background-color: #fff; } .paging .srch-Page strong { background-color: #fff; color: #333!important; font-weight: normal; } .srch-results { padding-left: 0px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 2/1) { .searchFilter .ms-searchref-selected, .searchFilter .ms-searchref-selected a:hover { background-image: url('../img/arrows2x.png'); background-size: 40px 355px; } } @media only screen and (max-width: 768px) and (min-width: 481px) { .searchFilter .ms-searchref-selected, .searchFilter .ms-searchref-selected a:hover { background: #7EC2CD url('../img/arrows.png') no-repeat 405px -113px; } .searchFilter .srch-WPBody { background-color: #42A7B8; clear: right; color: white; margin-bottom: 0; margin-top: 18px; width: 459px; } .search-results .srch-Title3, .search-results .srch-Description2, .search-results .srch-Metadata1 { max-width: 378px; } } @media only screen and (max-width: 480px) { .searchFilter .ms-searchref-selected, .searchFilter .ms-searchref-selected a:hover { background: #7EC2CD url('../img/arrows.png') no-repeat 242px -113px; } .searchFilter .srch-WPBody { background-color: #42A7B8; clear: right; color: white; margin-bottom: 0; margin-top: 18px; width: 248px; } .search-results .srch-Title3, .search-results .srch-Description2, .search-results .srch-Metadata1 { max-width: 248px; } .srch-results { max-width: 248px; } } /* IE 10 issue with ribbon */ .ms-cui-modalDiv-ie, .ms-cui-glass-ie { background-color:transparent !important; }