/* css by Jason Nguyen */ /* 1999 layout */ /* css reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,del,dfn,em,img,ins,q,s,samp,small,strike,strong,sub,sup,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} html{background:#e4e4e4; font-size:62.5%} body{background-color:#fff; font-family:arial, helvetica, serif; margin:0 auto; padding:20px 20px 0; width:940px; font-size: 1.4rem} .ie8 body {font-size: 14px} /* header */ header {background:url(https://www.matson.com/css/img/hull-lft.png) repeat-x bottom; height:80px;position: relative;} header:after {content:''; background:url(https://www.matson.com/css/img/hull-rt.png) no-repeat top right; height:65px; width:100%;display: inline-block; margin-top: 16px} header h1 a {background:url(https://www.matson.com/css/img/matson-logo.png) no-repeat; display:block; float:left; margin-left:24px; height:41px; width:183px; text-indent:-9999px} header img.mainlogo {display:none} /* ie7/8 (no print) */ /* search */ form#site-search {float:right; margin-top:15px} form#site-search .q, form#site-search input[type="image"]#btn {color:#aaa} form#site-search input.q {box-shadow:none; font-size:1.2rem} .ie8 form#site-search input.q {font-size:12px} form#site-search input[type="image"]#btn {float:right} form#site-search .q { background:#fff url(https://www.matson.com/css/img/site-search_top-bg.png) repeat-x top; border:1px solid #aaa; border-right:none; border-radius:3px 0 0 3px; float:right; font-size:1.2em; padding:2px; width:128px; height:18px} form#site-search input[type="image"]#btn {background:#fff url(https://www.matson.com/css/img/site-search_top-bg.png) repeat-x top; display:block; border:1px solid #aaa; padding:4px; height:14px; width:14px; outline:none} form#site-search input[type="image"]#btn {border-left:none; border-radius:0 3px 3px 0} form#site-search input[type="image"]#btn:active {padding:5px 4px 3px} form#site-search input[type="image"]#btn:focus {outline: 0} /* headings, paragraphs & misc */ h2 {color:#fff} p {margin-bottom:1.0rem; font-size: 1.2rem; line-height: 1.3em} .ie8 p {font-size: 12px; line-height: 16px} a, button, input {text-decoration:none; outline-width: 0; font-family: arial, helvetica, serif} strong {font-weight:bold} .left {float:left} .right {float:right} .print {color:#fff; font-size:.8em; padding-left:20px} span a.print {background: url('img/print_icon_blue.gif') no-repeat 0 -12px; display:inline-block; height:12px; margin-right: 40px} span:hover a.print {text-decoration:underline} .hide-txt {text-indent: 100%; white-space: nowrap; overflow: hidden} /* featured garbage... STEPS! we NEED STEPS! Forget the acutal form, people need to traverse this garbage first! */ #feature {background:url('../images/feat-car.png') no-repeat 605px 30px; padding:20px} #feature h2, #feature h3 {font-size:2.2rem; letter-spacing:-.02rem; font-weight:bold; color:black; padding: 17px 0; position:relative} #feature h3 {font-size:1.6rem} #feature img {position:absolute; margin:-50px 0 0 580px} #feature p {width:550px} #feature p:nth-child(4) {width:100%; margin-bottom:20px} .ie8 #feature h2, .ie8 #feature h3 {font-size:22px; letter-spacing:0} .ie8 #feature h3 {font-size:16px} .ie8 #feature h2 + p {margin-bottom:15px} .ie8 #feature p + h3 + p {width:100%; margin-bottom:20px} /* ugly 1990's sphere buttons - yes, this was designed for 2015 by the untalented "creative director". Don't mean to name-drop but... john ziztsman. */ ul#hiw-ugly-btns {margin:0 auto; width:100%; height: 80px} ul#hiw-ugly-btns li {float:left; margin: 0 0 0 78px; width: 95px; height:80px; background:#31c7ff; border-radius:60%} ul#hiw-ugly-btns li:first-child {margin-left:15rem} ul#hiw-ugly-btns li:nth-child(2) {background:#31a8ff} ul#hiw-ugly-btns li:nth-child(3) {background:#4894ff} ul#hiw-ugly-btns button {background:none; border:none} ul#hiw-ugly-btns button:hover {cursor:pointer} ul#hiw-ugly-btns button span {color:#fff; font-weight:bold; position: absolute; width:89px} ul#hiw-ugly-btns button span:first-child {margin:-12px auto 0 -5px; font-size:10rem; line-height:10rem; opacity:.3; height:80px} ul#hiw-ugly-btns button span:last-child {margin:30px auto 0 -5px; font-size:1.2rem; text-transform:uppercase} .ie8 ul#hiw-ugly-btns li {background:none} .ie8 ul#hiw-ugly-btns li:first-child {background: url(../img/feat_prep-btn.png) no-repeat; margin-left:229px} .ie8 ul#hiw-ugly-btns li + li {background: url(../img/feat_del-btn.png) no-repeat} .ie8 ul#hiw-ugly-btns li + li + li {background: url(../img/feat_pick-btn.png) no-repeat} .ie8 ul#hiw-ugly-btns button span {text-indent: 100%; white-space:nowrap; overflow:hidden} /* form */ .preloader {background:url('img/loader3.gif') no-repeat; float:left; height:16px; width:16px; position:absolute; margin:188px 0 0 163px; z-index:1} .preloaderZip {background:url('img/loader3.gif') no-repeat; float:left; height:16px; width:16px; position:absolute; margin:52px 0 0 180px; z-index:1} .preloaderZip-ptd {background:url('img/loader3.gif') no-repeat; float:left; height:16px; width:16px; position:absolute; margin:143px 0 0 180px; z-index:1} .preloaderVin {background:url('img/loader3.gif') no-repeat; float:left; height:16px; width:16px; position:absolute; margin:8px 0 0 180px; z-index:1} .ie8 .ie8-gte .preloader .preloaderVin .preloaderZip .preloaderZip-ptd{margin:7px 0 0 -45px} /*.preloader-slide {background: url('img/loader2.gif') no-repeat 438px 100px; position:absolute; top: 150px; z-index:100; color: #fff; font-size: 2em; line-height:1.3em; text-align: center; height:100%; width:100%} */ .preloader-slide {background: url('img/loader2.gif') no-repeat 438px 100px; margin-top: -40%;position: absolute;z-index: 100;color: #fff; font-size: 2em; line-height:1.3em; text-align: center; height:100%; width:100%} #prepare .preloader-slide {top:170px; left: 0; background-position: 450px 110px} #rate .preloader-slide {} body.steps header {margin-bottom: 40px} #povapp {background: #e4e4e4 url('../images/form-car-opacity30.png') no-repeat 470px 175px; border-radius:10px; min-height:390px; color:#fff; position:relative; overflow:hidden} body.steps #povapp {background: #e4e4e4 url('../images/form-car-opacity30.png') no-repeat 470px 175px; color:#fff; position:relative} body.steps #povapp {height:auto} body.steps.summary #povapp {height: 730px} .form h1, .form h2, .form h3, .form h4 {float:left; text-align:right; text-transform:capitalize} .form h4 {color:#01205c} .form {padding-top: 94px; padding-left: 20px } #povapp #blocker {position:absolute; top:0; left:0; background:#000; opacity: .8; width: 100%; height:100%; z-index: 2} #prepare, #rate, #shipping, #paymethod, #pay, #confirmation {position:relative; height:410px} #paymethod {height:440px} #summary{ height: 700px; } section h2 {position:absolute; padding: 1.3rem 0 0 4rem; font-size:2.6rem; z-index:1} .ie8 section h2 {font-size:26px} /*#povapp h2:before {content:"Ship My Auto - "}*/ .clear {clear:both; height:0; line-height:0} .fl-left {float:left} .fl-right {float:right} .bdr-btm-none {border:0} .form fieldset {float:left; width:235px} .ie8 form fieldset {width:241px} .form fieldset.col-1 {width:228px} .ptddtp {float:left} #shipping fieldset, #pay fieldset {/* margin-right:10px; */ width: 230px} #pay fieldset {margin-right:0} #pay fieldset.bdr-left {padding-left:1rem; min-height: 156px} legend, .legend {color:#377dc3; font-size:1.6rem; letter-spacing:-.02rem; padding-bottom: 1.1rem; } .ie8 legend, .ie8 .legend, .ie8-gte legend, .ie8-gte .legend {font-size:16px; padding-bottom: 11px;} table .legend {color: #fff} label {display:none; font-size: 1.4rem; line-height: 1rem; color:#377dc3} .ie8 label {font-size:14px; line-height:10px} .ie8-gte label {line-height: 1.5em} #rate label, .show {display:block} .hidden, .ui-dialog-titlebar {display:none} .form input, .form select, .form option {box-shadow:inset 1px 1px 1px #bbb; border: 1px solid #dfe9f0; color:#005da4; font-size: 14px; margin-bottom: 15px; padding-left: 10px; float:left; height: 30px; width: 200px; text-transform:capitalize} .form select {outline:none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; height: 30px; width:210px; } select:-moz-focusring {color: rgba(0,0,0,0); text-shadow: 0 0 0 #000;} .form select option {border: none; box-shadow: none; margin:0; padding-top: 1rem} /* html 5 placeholder styles - xbrowser*/ input::-webkit-input-placeholder {color: #888} input:-moz-placeholder{color: #888} input:-ms-input-placeholder {color: #888} .placeholder {color: #888} input:hover {background-image:none} .form input[type="radio"], .form input[type="checkbox"] {background:none; border:0; box-shadow:none; width: initial} .form input[type="submit"], .form input[type="button"] {position:absolute; top: 350px; right:0} .ie8-gte .form input[type="submit"] {right:20px} .ie8, .ie8-gte input[type="text"] {line-height: 2em} option.default {color:#888} select option {color:#005da4} select.enabled {cursor: pointer} select.disabled {background-color: #ccc; cursor: auto} input#dropOffDate {width:210px;margin-bottom: 0} .ie8 #ptp-fields {float:left} input#dropOffDate.disabled {background:#ccc; color: #aaa; cursor: auto} /* disabled state */ input#dropOffDate.enabled-date, input#ptd-date.enabled-date, input#dtp-date.enabled-date {background: url(img/icon-date.gif) no-repeat 186px 7px #fff; color: rgb(0, 93, 164); cursor: auto; line-height:2.1em} #prepare input.medium {width:98px} #prepare select.medium {width:98px} .form #color {margin-right: 4px;} .form #licenseState {width: 113px !important} /*.ie8-gte .form #year {width:87px}*/ /*.ie8-gte .form #color {width:86px}*/ /*.ie8-gte .form #licenseState {width:102px}*/ #cc-exp-mo, #cc-exp-yr, #st-diff-bill {background-position:70px 2px} .styled-select-tiny{margin-right:5px} /* prepare */ .shipping-info input {width: 200px} /*#date-icon {background:url('img/icon-date.gif') no-repeat; float:left; height:16px; width:16px; position:absolute; margin:8px 0 0 193px}*/ div.ui-datepicker{font-size: 1.2rem} #pickUpDate {float:left; font-size: 1.4rem; padding: 0 7px; border:1px dashed rgb(0, 93, 164); border-top:none; color:rgb(0, 93, 164); /* margin: 0 0 5px; */ text-align:center; background: #eee; width: 195px; height: 30px; line-height:2.6rem} .ie8 span#pickUpDate {font-size:14px; line-height:46px} #pickUpDate span {font-weight:bold} #pickup span {display: inline;} .form #make, #povapp #model, #povapp #licenseNumber {width: 98px} .form #licenseNumber {margin-left: 3px;} .form #make {margin-left: 4px; width: 90px} .form #vin {text-transform:uppercase; width: 213px;} .form #bookingNumber #vinLast7 {text-transform:uppercase; width: 213px;} /* rate */ #rate fieldset {width:100%} #rate label, #shipping label, #pay label {cursor:pointer; float:left; /* padding-bottom: 2rem; */} input[type="radio"], #shipping input[type="radio"], #shipping input[type="checkbox"], #pay input[type="radio"], #pay input[type="checkbox"] {cursor:pointer; float:left; margin:-7px 10px 0 0; width:15px} #rate label span {font-weight:bold} /* shipping and #pay inputs */ #shipping input.tiny, #pay input.tiny {width:2.2rem; margin-left:5px} #shipping input.small, #pay input.small {width: 67px; margin-right: 7px} .ph-wrap {position:relative;float: left;} .ph-txt {background:#fff; color: #888; height:15px; width: 110px; position:absolute; top: 2px; left: 6px; padding: 5px 0 5px 5px; line-height:1.2em; z-index: 1;} input.paren-l {box-shadow:inset 0 1px 0 #bbb; border-right:none} input.paren-r {box-shadow:inset 0 1px 0 #bbb; border-left:none; border-right:none; margin-left:-5px; padding-left:0; padding-right:7px} input.paren-l, input.paren-r, input.single-digit {box-shadow: inset 0 1px #bbb; width: 5px; margin:0} input.single-digit {padding: 1px 0 1px 3px; border-left:0; border-right:none} input.triple-digit {box-shadow:inset 0 1px 0 #bbb; width:23px; padding:1px 0; border-left:none; border-right:none; } input.four-digit {box-shadow:inset 0 1px 0 #bbb; border-left:0; padding-left: 3px; width:38px} /* span.dash {float:left; padding:0 1px; color:#8c763f; font-size:1.1rem; line-height:2.7rem} */ #shipping select.small, #pay select.small {/* width: 10.2rem; */margin-right: 7px} #shipping select.small:after {content:""; border:1px solid red; height:10px; width:100px} #shipping input.medium, #pay input.medium {width: 171px} #shipping label[for="sameShipperAddress"] {padding-bottom:20px} #shipping input[type="email"] {text-transform: none} #shipping input#shipperFirstName, #shipping input#consigneeFirstName, #pay input#fname-diff-bill {margin-right: 1px} #shipping label#NotifyTypeEmail-label {margin-right:20px;margin-top:2px} #shipping label#NotifyTypePhone-label {margin-right:70px;margin-top:2px} #shipping label#NotifyTypeCell-label {margin-left:-25px;;margin-top:2px} .ie8 #shipping label#NotifyTypePhone-label, .ie8-gte #shipping label#NotifyTypePhone-label {margin-right:0} #shipperState, #consigneeState {background-position:70px} #diff-pickup {/* height: 135px; */ width:229px} #NotifyTypeEmail-field, #NotifyTypePhone-field #NotifyTypeCell-field {height:40px; width:185px} .NotifyTypeCell-field {position:relative;float: left;} #diff-bill {height:180px; width:220px} fieldset .help {display: inline-block} .ui-tooltip {width: 210px} /* credit card icons */ #cc-icon {position: absolute; margin: -33px 0 0 144px; width: 40px; height: 25px} .cc-mc, .cc-visa, .cc-amex, .cc-discover {display: none; background: url('img/creditcard-icons.png') no-repeat; width: 40px; height: 25px} .cc-visa {background-position: 0 0} .cc-mc {background-position: 0 -25px} .cc-amex {background-position: 0 -50px} .cc-discover {background-position: 0 -75px} /* buttons */ table button, button.prev {background:none; border:none; color:#aaa; font-size:1em; position:absolute; top: 350px; right: 140px} #flowBack {background:none; border:none; color:#aaa; font-size:1em; position:absolute; top: 290px; right: 140px} table button:hover {color:#ff9200} ie8 button.prev, .ie8-gte input[type="submit"] {font-size:16px; line-height:18px;} .ie8 button.prev {right:172px} #flowBack { background: #ccd7dd; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjZDdkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2NhZDZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2MxYzlkMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZGQ5ZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ccd7dd 0%, #cad6dd 48%, #c1c9d2 52%, #cdd9dd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccd7dd), color-stop(48%,#cad6dd), color-stop(52%,#c1c9d2), color-stop(100%,#cdd9dd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ccd7dd 0%,#cad6dd 48%,#c1c9d2 52%,#cdd9dd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ccd7dd 0%,#cad6dd 48%,#c1c9d2 52%,#cdd9dd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ccd7dd 0%,#cad6dd 48%,#c1c9d2 52%,#cdd9dd 100%); /* IE10+ */ background: linear-gradient(to bottom, #ccd7dd 0%,#cad6dd 48%,#c1c9d2 52%,#cdd9dd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccd7dd', endColorstr='#cdd9dd',GradientType=0 ); /* IE6-8 */ right: 17.2rem; } /* button.prev:hover, input[type="submit"]:hover, input[type="button"]:hover, #flowBack:hover {color:#fff} */ body.steps #povapp input[type='submit'], body.steps #povapp input[type="button"] {position:absolute; right:0} body.steps #povapp #shipping button, body.steps #povapp #shipping input[type='submit'] {top: 497px} /* shipping */ body.steps #povapp #summary button.prev, body.steps #povapp #summary input[type='submit'] {top: 670px;} /* summary */ body.steps #povapp #paymethod input[type='submit'], body.steps #povapp #pay input[type='submit'] {top: 350px} body.steps #povapp #pay input[type='button'] {top: 350px} body.steps #povapp #paymethod button.prev, body.steps #povapp #paymethod input[type='submit'] {top: 380px} body.steps #povapp input[type='button'] {top: 380px} #confirmation .form input[type="submit"] {width:auto} .form input.sma {background:#14d100; /*background-position:0 -280px*/} .form input.sma:active {background:#8ae880 /*background-position:0 -240px*/} /* optional inputs */ .optional::-webkit-input-placeholder, ::-webkit-input-placeholder {color: #bbb} .optional:-moz-placeholder, :-moz-placeholder {color: #bbb} .optional:-ms-input-placeholder, :-ms-input-placeholder {color: #bbb} .optional .placeholder {color: #bbb} input#handlingInstructions {width: 213px} /*input#handlingInstructions:-moz-placeholder, :-moz-placeholder {color: #bbb}*/ /*input#handlingInstructions:-ms-input-placeholder, :-ms-input-placeholder {color: #bbb}*/ /*input#handlingInstructions .placeholder {color: #bbb}*/ /* status menu */ #status-bar { background: #377dc3; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM3N2RjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI4NmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYzVjYjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #377dc3 0%, #286bbb 50%, #1c5cb5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#377dc3), color-stop(50%,#286bbb), color-stop(100%,#1c5cb5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #377dc3 0%,#286bbb 50%,#1c5cb5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #377dc3 0%,#286bbb 50%,#1c5cb5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #377dc3 0%,#286bbb 50%,#1c5cb5 100%); /* IE10+ */ background: linear-gradient(to bottom, #377dc3 0%,#286bbb 50%,#1c5cb5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#377dc3', endColorstr='#1c5cb5',GradientType=0 ); /* IE6-8 */ position:absolute; top:0; left:0; height:50px; width:100% ; overflow: hidden; } #status-bar ul {height:50px; width: 530px; float:right} body.paynow #status-bar ul {width:530px} #status-bar li {float:left; text-align:center; padding:18px 13px 30px 0} #status-bar li.current {position:relative} #status-bar li.current:after {content:"?"; font-size:2rem; color:#1c5cb5; display:block; width:0; height:0; margin:9px auto } #status-bar li a {/*background: url("img/status-bar_right-arrow.png") no-repeat -5px 0;*/ font-size:14px; color:#fff; padding:0 0 0 16px; text-decoration:none} #status-bar li a:before {content:"> "; position:absolute; margin:0px 0 0 -16px} #status-bar li a:hover:before {text-decoration:none} #status-bar li:first-child a:before {content:none} #status-bar li a:hover {text-decoration:underline} #status-bar li.completed a {color:#fff; cursor:pointer} #status-bar li.current a {color:#ff9200} #status-bar li.current a:before {color:#fff} #status-bar li.current a:hover {cursor:default; text-decoration:none} #status-bar li.first a {background:none} #status-bar li.incomplete a {color:#c2c2c2; cursor:default; text-decoration:none} #summary .form {position:relative; width: 920px; padding: 80px 10px 0; /* margin-top: 80px */} .ie8 #summary .form {width:890px} /* table styles */ #confirmation table {width:95%} #summary table, #confirmation table, .infotip {background: #5b8ab9; /* box-shadow:0 0 10px #5e9fd2; */ margin: 0 0 10px 0; position:relative; } #summary table {margin:0 0 10px 0; height: 260px;width: 49.5%;} #summary tbody, #confirmation tbody {color:#cecece; margin:0 10px; display:block} .ie8 #summary tbody, .ie8 #confirmation tbody, .ie8-gte #summary tbody, .ie8-gte #confirmation tbody {min-height:inherit} .ie8 #summary table, .ie8-gte #summary table {height:259px} #summary th.legend, #confirmation th.legend {font-size:1.05em; text-align:left; padding:10px 0 10px 10px} #summary td, #confirmation td {font-size:1em; border-bottom: 1px dotted #bbb; line-height:1.6em; height:23px; width:217px; white-space: nowrap} #summary td:nth-child(2), #confirmation td:nth-child(2) {color:#fff} .ie8 #summary tr:last-child, .ie8-gte #summary tr:last-child {border-bottom: none} .ie8 #summary td, .ie8 #confirmation td, .ie8-gte #summary td, .ie8-gte #confirmation td {padding-left:10px} #summary table button, #confirmation table button {/*height:30px; width:40px;*/ box-shadow:0 1px 1px #000; padding: 12px; line-height:.2em; background:#eee; color:#666; cursor:pointer; position:absolute; right:10px; top: 220px; border-radius: 2px} #summary table button:hover, #confirmation table button:hover {color:#ff9200} #summary table#s-ship-rate {height:60px} #summary table#s-ship-rate button {top:46px} #svin {text-transform: uppercase} .bts{top:695px} /* back to shipping button */ #confirmation table tbody {min-height:110px} #confirmation p span {font-weight:bold} #confirmation p {width: 453px, font-size: 1.4rem;} #confirmation #thanks {width:450px} /* aside buttons & anchors */ aside {height:80px; margin-top:20px} aside a, aside button {border-radius:5px; color:#fff; float:left; height:60px; width:210px; margin:0 0 0 20px; background: #5e9ad7; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlOWFkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzU1OTVkNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZThmZDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #5e9ad7 0%, #5595d4 44%, #4e8fd2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e9ad7), color-stop(44%,#5595d4), color-stop(100%,#4e8fd2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5e9ad7 0%,#5595d4 44%,#4e8fd2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5e9ad7 0%,#5595d4 44%,#4e8fd2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5e9ad7 0%,#5595d4 44%,#4e8fd2 100%); /* IE10+ */ background: linear-gradient(to bottom, #5e9ad7 0%,#5595d4 44%,#4e8fd2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9ad7', endColorstr='#4e8fd2',GradientType=0 ); /* IE6-8 */ } aside button {border:none; cursor: pointer; margin-top:0px} /* aside button and anchor label shared styles */ aside a, aside button span {display:inline-block; line-height:40px} aside a span, aside button span:last-child {font-size:1.3rem; line-height:2rem; display:inline-block; width:50%; text-transform:uppercase; float:right; text-align:center; } /* labels */ aside a span {margin-top:12px} /* button styles */ aside button span:first-child {font-size:4rem; letter-spacing:.01rem; font-family:"arial black", arial, helvetica, serif} aside a span:first-child {margin-top:0; height:100%; float:left} /* track button */ aside a:first-child span:first-child {background:url(../images/btn-car.png) no-repeat 29px 5px} /* port button */ aside a:nth-child(2) span:first-child {background:url(../images/btn-port.png) no-repeat 24px 5px} /* FAQ button */ aside button:nth-child(3) span:first-child {font-size:8.8rem; line-height:5rem; margin-left:2.8rem} /* "?" label */ aside button:nth-child(3) span:last-child {line-height:6rem; text-indent:-20px} /* "faq" label */ /* how it works */ aside button:nth-child(4) span:first-child {font-size:4rem; letter-spacing:-.2rem; text-align:right} /* "1-2-3"" label */ aside button:nth-child(4) span:last-child {width:40%; margin-top:6px} .ie8 aside a span, .ie8 aside button span {display:none} /* removes text so background images can be displayed */ .ie8 aside a, .ie8 aside button {background: transparent url(../img/aside-btns.png) no-repeat; filter: none} .ie8 aside a + a {background-position-y:-60px} /* port locations */ .ie8 aside a + a + button {background-position-y:-120px} /* faqs */ .ie8 aside a + a + button + button {background-position-y:-180px} /* how it works */ /* mobile app badges */ #mobile-badges {padding-bottom:20px; text-indent: 100%; white-space:nowrap; overflow:hidden} #mobile-badges a {float:right; height:50px; display:block; padding-left:5px} .applebtn {background:url(../images/apple-btn.png) no-repeat; width:157px} .gplaybtn {background:url(../images/gplay-btn.png) no-repeat; width:153px} footer li a:hover {text-decoration: underline} /* aside .widget:hover p {text-shadow:0 0 2px #fff}*/ /* how it works */ #hiw li button {background:none; border:none; font-size: .8em; color: #1f537b} #hiw li button:hover {text-decoration:underline; color:#fff; cursor: pointer} footer {margin:20px auto 0; width: 600px} footer nav li {color:#000; font-size:1.1rem; text-indent:0px; float:left; margin-left:10px; } .ie8 footer nav li {font-size:11px} footer nav li:before {content:"\2022"; margin-right:5px; color:#000; } footer nav li:first-child:before {content:none} footer nav li:nth-child(2):before {content:"| "} footer nav li a {color:#5e9fd2} /* hovtip */ #servicetype-tip, #s-rate-tip, #p-rate-tip, #ptddtp-zip-tip, #notices-tip {position:absolute; overflow: auto;width:200px; box-shadow: 15px 15px 30px #878787} #servicetype-tip {margin: -22px 0 0 208px} #s-rate-tip {margin:-31px 0 0 234px} .ie8 #s-rate-tip, .ie8-gte #s-rate-tip {margin:-28px 0 0 249px} #p-rate-tip {margin:-31px 0 0 295px} .ie8 #p-rate-tip, .ie8-gte #p-rate-tip {margin: -29px 0 0 313px} #ptddtp-zip-tip {margin: -20px 0 0 216px; width:210px} .hovtip {background: url(img/arrow-tooltip.png) no-repeat 0 30px; font-size: 1.4rem; padding: 0 0 0 9px; z-index:1} .hovtip div {background: #e0f5fe; padding:10px} .form .hovtip h4 {width:100%; font-weight:bold; padding-bottom:5px; text-align:left} .hovtip p {line-height:1.2em;color: #01205c} .hovtip span {color: #01205c;/*#61D7A4 (green)*/} .hovtip ul {padding-top:20px} .hovtip li {list-style-type: square; margin:5px 20px} .tip-error h4 {color: #f14950} .divider {border:0; border-bottom: 1px dashed #005da4; margin:20px 0; height:1px; width:100%} .infotip { color:#eee; float:right; font-size:1.2rem; /* width: 616px; */ padding: 0 10px; margin:0 40px 0 0; position:relative} /* .infotip:before {color:#005da4; content:"i"; font-style:italic; font:georgia, arial; position:absolute; top:20px; right:16px; font-size:2.5em; text-shadow:0 0 6px #fff} */ .infotip p {float:left; padding: 0 0 5px; margin:0; line-height:1.2em} .form .infotip h3 {color:#fff; font-weight:bold; padding:10px 0; text-align:left} .infotip ul {list-style:square inside; clear:left} .infotip li {margin:0 0 5px} .infotip li span {padding-left:10px; display:block} /* notifications */ #notices-btn {background:#FEFCA0; position:absolute; top: 34px; right: 10px; border:none; color:#5e9fd2; padding:5px 10px; margin:0; font-size: .85em;font-weight: bold} #notices {position:absolute; width:372px; height:105px; right:0; top: -5px; z-index:1; display:none} /*#notices:hover {z-index:1}*/ #notices-circle {background:#eee url("img/dashedcircle_sm_clear.png") no-repeat; width: 32px; height: 32px; position:absolute; right:370px; top:30px} #notices-circle div {color:#ccddeb; font-size: 1.5em; float:left; margin: 5px 0 0 12px} #notices:hover #notices-circle {background:#5E9FD2 url("img/dashedcircle_sm_clear.png") no-repeat} #notices:hover #notices-circle div {color:#005da4} /*.notices-main p {margin:25px 0 0 10px; color:#ccc; text-align:center} *//* page not found */ .notices-main {background:#fff; width:362px; margin:0; padding:10px 0 0 0; box-shadow:0 1px 3px #000} .notices-main h4 {color:#666; font-size: 1.3em; font-weight:bold; padding: 5px 0 5px 0; width:100%} .notices-main h4:first-of-type {background:none} .notices-main h5 {padding-top:5px;font-size:1.1em; font-weight:bold; text-transform:capitalize} .notices-main ul {border-bottom:1px dotted #fff; margin:0 0 5px; padding:0 10px} .notices-main ul:last-child, .notices-main li:last-child {border:0} /*.notices-main ul.last {display:none}*/ .notices-main li {border-bottom:dashed 1px #444; color:#666; font-size:.7em; line-height:1.4em; padding:5px 5px 15px} /* .notices-main li:hover {background:#eee} */ .notices-main span {font-weight:bold; text-transform:capitalize} .notices-main span.closed {color:#FF4900} .notices-main ul li span.open {color:#61D7A4} /* #news */ #news-wrap {background: url("img/bg_news.png") repeat; color:#fff; padding: 5px 10px; min-height: 15px; width: 460px; position:absolute; top: -20px; right: 20px; z-index: 3; /* display:none */} #news-wrap:hover #news {display:block} #news-btn h3 { float:left; font-family: arial, helvetica, serif; font-size: 1.4rem; letter-spacing: normal; font-weight: bold; text-align:left; text-transform:uppercase; width:430px} #news {display: none;} #news .notices-main {background:#333; padding:0 10px 5px; margin-top:27px; width:440px} #news-wrap:hover #news {display:block} #news .notices-main h4 {color:#fff; font-size: 1.4rem; font-weight:bold; padding:5px 0 0; width:100%; } .ie8 #news-btn h3, .ie8 #news .notices-main h4 {font-size: 14px} #news .notices-main h5 {color:#fff; font-size:1.1em; font-weight:bold; padding-top:10px; text-transform:capitalize} .ie8 #news .notices-main h5 {font-size: 11px} #news .notices-main li {border-bottom:dashed 1px #444; color:#ddd; font-size: 1.2rem; line-height: 1.4rem; padding:5px 5px 15px} #news .notices-main li:hover {background:#222} /* drop-down delay */ #news-wrap.with-js #news, #notices.with-js #notices {display:none !important} #news-wrap.show #news, #notices.show #notices /*delay*/ {display:block} /*reveal drop-down*/ /* notifications - hovtip */ #notices-tip {margin: -64px 0 0 208px; width:330px; z-index:1} .ie8 #notices-tip, .ie8-gte #notices-tip {margin-top: -208px} #notices-tip.dtp {margin-top:-243px} /* door to port */ #notices-tip div div div {padding:0; margin:0; box-shadow:none; width:100%; height:310px; overflow: auto} #notices-tip .hovtip {background-position: 0 203px} /*.notices-tip p {margin:25px 0 0 10px; color:#ccc; text-align:center} *//* page not found */ .notices-tip {width:100%} .notices-tip h4 {color:#fff; font-size: 1.3em; font-weight:bold; padding: 0 0 5px 0; width:100%} .notices-tip h4:first-of-type {background:none} .notices-tip h5 {padding-top:5px; font-size:11px; font-weight:bold; text-transform:capitalize} .notices-tip ul {background:none;border-bottom:1px dotted #555; margin:5px 5px; padding:0} .notices-tip ul:last-child, .notices-tip li:last-child {border:0} /*.notices-tip ul.last {display:none}*/ .notices-tip li {border-bottom:dashed 1px #444; color: #01205c; /* font-size: 1.2rem; */ line-height: 1.4em; margin:0;padding:5px 5px 5px 0; list-style-type:none} /* .notices-tip li:hover {background:#eee} */ .notices-tip span {font-weight:bold; text-transform:capitalize} .notices-tip span.closed {color:#FF4900} .notices-tip ul li span.open {color:#61D7A4} /* #assist & shared #news styles */ #assist-wrap {background:#555; box-shadow:0 0 20px #000; color:#fff; position:fixed; bottom:0; right:0; width: 267px} #assist-wrap:hover #assist {display:block} #assist-btn {cursor:pointer; padding:10px; width:247px; height:10px; float:left} #assist-btn h4 {color:#fff; float:left; font-size: 1.4rem; font-family:arial, dejavusans, serif; text-align:left; width:200px} #assist-btn span, #news-btn span {background: url("img/arrow-white.png") no-repeat 0 -7px; height: 10px; width: 13px;} #news-btn span {/* padding-top: 0; */} #assist {padding:0 10px; width:247px; display:none} #assist p {color:#ccc; padding-right:10px; margin: 10px -5px 10px 0} #assist p.left {border-right:1px solid #fff} #assist p.right, #assist a, #assist a:visited, #assist a:active {color:#ff9200} #assist a:visited {text-decoration:underline} #assist p span {display:block; text-align:right} #assist-arrow.up, #news-arrow.up { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); zoom: 1; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; } #modal {font-family:arial, helvetica, serif} #modal #header {margin: -12px 0 0 -19px; background:#fff; box-shadow: 0 4px 15px -6px #aaa; padding:10px; width: 918px;} #modal h1 {display:inline; color:#005da4; font-size: 2.5rem; padding-bottom:40px; line-height: 1.3em} #modal h2 {color:#005da4; font-size: 1.6rem; padding-bottom:10px} #modal h2#rates {color:#005da4; font-size: 1.6rem; padding-bottom:2px} #modal h3 {color:#005da4; font-size: 1.2rem; font-weight:bold; padding-bottom:5px} #modal p {color:#666; font-size:1.2rem; line-height:1.6rem } #modal strong {font-weight:bold} /*#modal button {font-size:.8em; z-index: 5}*/ #modal #info-wrap ul {list-style-type:square; padding:0 40px} #modal #info-wrap li {color:#666; font-size:1.2rem; line-height:1.4em; padding-bottom:5px} #modal #info-wrap li:first-letter {text-transform:capitalize} /*#modal #info-wrap li:after {content:"."}*/ #modal #info-wrap li#ratepay:after {content:none;} #modal nav#info {margin-right:70px;padding:5px; background: #fff} #modal nav#info ul li, #modal #info-wrap ul {float:left} #modal nav#info li {font-size:inherit; width:inherit; padding:5px 10px} /* #modal nav#info li a {color:#005da4; font-size:1em; text-transform: uppercase} */ #modal nav#info li a {color:#005da4; font-size:12px; text-transform: uppercase} #modal nav#info li a:hover {color:#ff9200; cursor:pointer} #modal nav#info li a.current {color:#5e9fd2; border-bottom:2px solid #5e9fd2; padding-bottom:.5rem} #info-wrap {margin-top: 160px;margin-left:-25px} #modal #info-wrap ul.full { margin:0 20px 20px; padding:0} #modal #info-wrap ul.full li {margin:0; padding:0 0 10px} #modal #info-wrap ul.two-list {width:300px} #modal #info-wrap .three-list ul {background:#eee;border:1px solid #ddd; border-radius:3px; display:block; min-height:130px; width:180px; margin:0 15px 20px} #modal #info-wrap .three-list ul li:first-child {list-style-type:none; font-weight:bold; margin-top:10px; margin-left:-20px} #modal #info-wrap .three-list ul li:last-child {margin-bottom:10px} #modal #info-wrap .three-list ul li:after {content:none} #modal #info-wrap .four-list ul {background:#eee;border:1px solid #ddd; border-radius:3px; display:block; min-height:130px; width:134px; margin:0 2px 5px} .port-loc-hrs span {display:inline-block; vertical-align:middle} .port-loc-hrs h3 span {margin:10px 0 0; width:170px} .port-loc-hrs h3 span:first-child {margin-left:10px} .port-loc-hrs div {background:#eee; border:1px solid #ddd; border-radius:3px; margin:0 0 10px; padding:5px 0 5px 10px; max-width:650px;width: 100%; line-height:1.2em} .port-loc-hrs div span {font-size: .7em} .port-loc-hrs span.port {font-weight:bold; width:170px} /* .port-loc-hrs span.hours {width:390px} */ .port-loc-hrs span.maplink {} .port-loc-hrs span a:hover {color:#ff9200; text-decoration:underline} .port-loc-hrs-rate span {display:inline-block; vertical-align:middle} .port-loc-hrs-rate h3 span {margin:10px 0 0; width:170px} .port-loc-hrs-rate h3 span:first-child {margin-left:10px} .port-loc-hrs-rate div {background:#eee; border:1px solid #ddd; border-radius:3px; margin:0 0 10px; padding:5px 0 5px 10px; width:355px; line-height:1.2em} .port-loc-hrs-rate div span {font-size: .7em} .port-loc-hrs-rate span.port {font-weight:bold; width:280px} .port-loc-hrs-rate span.hours {width:200px; float: right; margin-right: -120px;margin-top: -15px} .port-loc-hrs-rate span.maplink {} .port-loc-hrs-rate span a:hover {color:#ff9200; text-decoration:underline} .port-loc-hrs span.portfeehead {font-weight:bold; width:100px} .port-loc-hrs span.camperhead {font-weight:bold; width:170px} .port-loc-hrs span.portfee {width:100px} .port-loc-hrs span.camper {width:170px} #prepare-info {padding-top:80px} #pay-later-info span {display: inline-block} #pay-later-info span.legend {margin-left: 50px;padding-bottom: 10px} #pay-later-info div div {float:left; width:300px; padding-bottom: 10px;/* height:230px */} .ie8 #pay-later-info div div {width:50%; padding-bottom: 0} #pay-later-tac-non-ak-info span {display: inline-block} #pay-later-tac-non-ak-info span.legend {margin-left: 50px;padding-bottom: 10px} #pay-later-tac-non-ak-info div div {float:left; width:300px; padding-bottom: 10px;/* height:230px */} .ie8 #pay-later-tac-non-ak-info div div {width:50%; padding-bottom: 0} /* retina devices */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { header h1 a {background:url(https://www.matson.com/css/img/matson-logo@2x.png) no-repeat -7px -1px; background-size:195px; width:196px; height:42px; margin:5px 0 0 40px} header h1 a:hover {background-position:-7px -1px} header:after {margin-top:1rem} .styled-select select, .styled-select-small select, .styled-select-tiny select {background: url(http://www.matson.com/css/img/down_arrow@2x.png) no-repeat 195px 15px; background-size:13px} .styled-select-small select {background-position:93px 15px} #shipperState, #consigneeState {background-position:86px 15px} #cc-exp-mo, #cc-exp-yr, #st-diff-bill {background-position:85px 15px} /* dialog styles*/ .ui-dialog-titlebar { display: block !important; } } .rates{ font-size: 1.4rem; line-height: 1rem; color: #377dc3; } .tip { background: #e4e4e4; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); position: relative; width: 240px; height: 15px; background-color: #ffc4c4; color: rgb(0, 93, 164); } /* arrows - :before and :after */ .tip:before { position: absolute; top: -7px; left: 10px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #eee; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .tip:after { position: absolute; display: inline-block; border-top: 6px solid transparent; border-right: 6px solid #eee; border-bottom: 6px solid transparent; left: -12px; top: 21px; content: ''; } .doorRates{ border-style: solid; border-width: 2px; width: 300px; height: 41px; padding: 5px; margin-top: 10px; } #sameShipperAddress{ clear:both; } #shipperZip, #consigneeZip, #shipperStation, #consigneeStation, #contactStation{ width: 75px; } #shipperAreaCode, #consigneeAreaCode, #shipperExchange, #consigneeExchange, #contactAreaCode, #contactExchange{ width: 50px; } .disabledLink { pointer-events: none; cursor: default; color: #C2C2C2 !important; } .editButton { position: relative !important; top: 7px !important; width: 5rem !important; left: 17rem !important; padding: 12px !important; line-height: .2em !important; font-size: 1em !important; text-transform: none !important; height: 3rem !important; } .disableButton { pointer-events: none; cursor: default; } .removeLink { text-decoration: none !important; cursor: default; } .tinyText { font-family: sans-serif; font-size: 8pt; color: #333; } .getrate-float-left { width: 100%; float: left; } span#dime { margin-top: 25px; position: absolute; margin-left: 11px; } .padBottom{ padding-bottom: 14px; } h3#notification{ -webkit-animation: color-change 1s infinite; -moz-animation: color-change 1s infinite; -o-animation: color-change 1s infinite; -ms-animation: color-change 1s infinite; animation: color-change 1s infinite; } @-webkit-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-moz-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-ms-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @-o-keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } @keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } a#trackVehicle{ margin-top: 13px; position: absolute; margin-left: 104px; text-align: center; font-weight: 700; color: #c60; text-decoration: none; } a#trackVehicle:hover { color: blue; text-decoration: underline; }