@charset "utf-8"; /* c2c master CSS /* !!!!!!!!! DO NOT EDIT, EDITING BY SHERWEN ONLY !!!!!!!!!! */ /*HTML RESET*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,#container,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} body{line-height:1} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,#container{display:block} nav ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration: none;} ins{background-color:#ff9;color:#000;text-decoration:none} mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold} del{text-decoration:line-through} abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} table{border-collapse:collapse;border-spacing:0} hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} input,select{vertical-align:middle} /*ipad reset*/ input, textarea, select {-webkit-appearance: none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0} input[type=checkbox]{ -webkit-appearance:checkbox } * { -webkit-tap-highlight-color:transparent; } .firefox select, .ie select {background-image:none !important} /*end*/ .clearfix:before, .clearfix:after { content: " "; display: table;} .clearfix:after { clear: both;} .clearfix { *zoom: 1;} /*COMMON*/ /*Fonts used font-family:'Helvetica W01 Bold'; font-family:'Helvetica Neue LT W06 55 Roman', helvetica, verdana, sans-serif; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-family:'HelveticaNeueW01-65Medi’; */ body {font-family:'Helvetica Neue LT W06 55 Roman', helvetica, verdana, sans-serif; background-color:#FFF; color: #333333; font-size: 100%;} /*Containers*/ header, header nav, table, #importantAnnouncement, section, #banner, #blueBand, #contentArea, #about, #customerRel, #footerBar, #stationSummary, #body, #liveDepartureBoard, #additionalInformation {float: left; width: 100%} .container, #importantAnnouncement p {width: 944px; margin: 0 auto; padding: 0 5px} #contentArea.twoThirds, #contentArea.full, aside {margin-top: 28px} #contentArea .container, nav#main-menu .container {width: 954px; padding: 0 0} #contentArea article {overflow: hidden} aside {float: left} /*Section Background Colours*/ header nav, #contentArea, #footerBar {background-color: #eeeeee} #blueBand, #about {background-color: #000f30; color: #FFF} #contentArea.twoThirds, #contentArea.full {padding-bottom: 70px; background-color: #FFF} /*Link Colours*/ a {color: #bc0087} header ul li a, .box2 h2 a, .box2 h3 a, nav#main-menu ul li ul.sub li a, #footerBar nav#footer-menu ul li a, .dropDown a, nav#main-menu ul li ul.sub li a {color: #bc0087} /*pink*/ #journeyChecker p a, #about nav#about-menu ul li a, aside article h3 a, .pagination li a {color: #FFF}/*white*/ header nav ul li a, #buyTickets #buyticketsform a, .box1 h3 a, .box2 p a, nav#main-menu ul li ul.sub li a:hover {color: #000f30} /*dark blue*/ #breadcrumb ul li a {color: #999} /*grey*/ /*Link Hover Colours*/ a:hover {color: #000f30} #buyTickets #buyticketsform a:hover, #about nav#about-menu ul li a:hover, #journeyChecker p a:hover {color: #bc0087} /*pink*/ header nav ul li a:hover, #buyTickets #buyticketsform a:hover, .box1 h3 a:hover, .box2 p a:hover {color: #FFF} /*white hover*/ #footerBar nav#footer-menu ul li a:hover, #breadcrumb ul li a:hover {color: #000f30} /*dark blue*/ .box1.third a:hover, .box2.third a:hover {color: #999} /*grey*/ .button.blue:hover{color:#FFF; background:#bc0087 !important} /*Common*/ h1, h2, h3, input, blockquote, textarea, label, select, .dropDown, .button, #pagination li a {font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight:normal} h1, h2, h3 {color: #000f30} h1, #contentArea.twoThirds h2 {font-size: 2em; letter-spacing: -0.9px} #stationInfo #sAddress, #stationInfo #sOpeningTimes, #body p, header p, #departureTimes p {font-size: 0.875em; line-height: 1.3em; letter-spacing: 0px; font-weight: normal; color: #131551} header p {margin-top: 22px; font-size: 1.125em; line-height: 1.2em; float:none} #contentArea.twoThirds h2 {margin-bottom: 9px} ul {list-style-type: none; margin: 0; padding: 0} ul li, p {float: left} form p {float: none} a, select, .button {cursor: pointer; cursor: hand} select::-ms-expand{display:none} strong {font-family:'HelveticaNeueW01-75Bold', helvetica, verdana, sans-serif; font-weight:normal} label {font-size: 0.875em; color: #131551} input[type=checkbox] {width: 22px; height: 22px !important; padding: 0 0 !important; border: 2px solid #b7b7b7 !important; background-color: #fff; border-radius: 50px !important; -webkit-border-radius: 50% !important; -moz-border-radius: 50px !important} .button {float: left; color: #FFF; background-color: #bc0087; text-align: left} .button:hover {background-color: #000f30; color:#FFF} a.arrow {color: #bc0087 !important; padding-right: 20px; background: url('/media/7905036/arrowright.png') no-repeat right 50%} .thumb {width: 150px; height: 150px} .dropDown {float: left; height: auto; /*height: 45px;*/ padding: 0 2%; background: url('/media/64990/arrowright.png') no-repeat 96% 12px; line-height: 47px; font-size: 1.125em; letter-spacing: -0.5px; color: #bc0087; list-style-type: none !important} .dropDown li {width: 100%; font-size: 1.3em} .left {float: left} .row {float: left; width: 100%; margin-top: 16px; background-color:#eeeeee} .hidden {display: none} .blue {background-color: #000f30} .available, .unavailable {float: left; width: 50px; height: 35px; text-indent: -9999999px} .available {background: url('/media/65005/tick.png') no-repeat 50% 50%} .unavailable {background: url('/media/64996/cross.png') no-repeat 50% 50%} /*Widths*/ .box1.third, .box2.third, .box1.half, .box2.half {float: left; height: auto; min-height: 410px; margin: 38px 0.5%} .third {width: 33.333%} .box1.third, .box2.third {width: 32.333%} .box3.third {width: 32.333%} .box3.third:nth-child(odd) {margin-left:1.5%; margin-right: 1.5%} .half {float: left; width: 50%} .full {float:left; width: 100%; height: auto} .box1.half, .box2.half {width: 49%} .twoThirds {width: 66.667% !important} #contentArea.twoThirds {width: 62.667% !important; margin-right: 4%} .clear-both {clear:both !important} .mobile-only {display:none} /******************************************************************** PAGE STYLING - COMMON ********************************************************************/ /*Body*/ #body {margin-bottom: 2em} /*Table*/ table {float: none; width: 86%; margin: 0 auto; background-color: #eee} table.sub {float: left; width: 100%; margin: 8px 0; background-color: transparent !important} .toggleContent {padding-bottom: 40px; background-color: #eee; display:none} th, tr {height: 36px; line-height: 1.2em; text-align: left; } tbody tr:nth-child(odd) {background-color: #FFF} th, td {text-align: left; vertical-align: middle; font-size: 0.875em; font-weight: normal} tr td tr {height: 18px; line-height: 18px; background-color: transparent !important; font-size: 1.105em} /*Breadcrumb*/ #breadcrumb {float: left; width: 100%; padding-bottom: 13px} #breadcrumb ul li {font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; color:#999; padding-right:5px; font-size: 0.875em; letter-spacing: -0.5px; font-weight: normal} #breadcrumb .current {color:#000f30} /*Social*/ #social-bar {float:left} #stations #social-bar, #destinationLanding #social-bar, #twoforone #social-bar, #newsEvents #social-bar {margin-top:2em; clear:both} /*importantAnnouncement*/ #importantAnnouncement {background-color:#da0202} #importantAnnouncement p {padding: 14px 2% 14px; position:relative; float:none; font-family: 'Helvetica Neue LT W06 55 Roman', helvetica, verdana, sans-serif; font-size: 1em; line-height:1.2em; color: #FFF} #importantAnnouncement a {color:#FFF; width: 90%; display:block} #importantAnnouncement.medium {background-color:#ff9900} #importantAnnouncement.low {background-color:#66c600} #importantAnnouncement .close {position:absolute; top:14px; right:2%; width:auto; padding:0 5px 2px; border:2px solid #FFF; font-size:1.2em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif;} /*Pagination*/ ul.pagination {float: left; margin-top: 12px} .pagination li a {float: left; width: 42px; height: 42px; margin-right: 10px; line-height: 42px; background-color: #eee; text-align: center; font-size: 1.500em; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px} .pagination li a.active, .pagination li a:hover {background-color: #bc0087} /*BuyTickets*/ #buyTickets {float: left; position: relative; width: 300px; height: auto; padding: 13px 23px; margin-top: -180px; z-index: 100; background-color: #eee; border: 6px solid #000f30} #buyTickets h2 {display:inline; padding-right:40px; margin-bottom: 15px; background: url('/media/64994/buyticketsboxicon.png') no-repeat 100% 0; font-size: 1.672em; letter-spacing: -0.5px} #buyTickets #buyticketsform {height: auto; margin-top: 15px} #buyTickets #buyticketsform a {font-size: 0.875em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight: normal} #buyTickets #buyticketsform a:hover{color:#bc0087} #buyTickets input#findTickets, #buyTickets input#buyTicketsBtn {width:100%} #buyTickets input[type=submit], #buyTickets a.button {height: 34px; padding: 0 2%; line-height: 34px; border-radius: 0px; -webkit-border-radius: 0%; -moz-border-radius: 0px; color:#FFF !important} #buyTickets a.button {width: 96%; margin-bottom:.5em; font-size: 1.063em !important} #buyTickets .season {float:left; color: #000; font-size:.8em; padding: .5em; border-top: solid 1px #CCC} #buyTickets input, #buyTickets select {height: 24px; line-height: 24px; border: none; font-size: 1.063em; letter-spacing: -0.5px; border-radius: 7px; -webkit-border-radius: 7%; -moz-border-radius: 7px} #buyTickets select {padding: 0px 4%; font-size: 0.875em} .firefox #buyTickets select, .ie #buyTickets select {padding:0} #buyTickets fieldset#primary {margin-bottom: 8px} #buyTickets input#lcOrigin, #buyTickets input#lcDestination { position:relative; padding: 2% 3%; width: 94%; margin-bottom: 12px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; background:#FFF url('/media/65017/locationiconfield.gif') no-repeat right center;} #buyTickets #secondary {display: none; float: left; margin-top: 20px} #buyTickets .half {width: 48%; margin: 14px 0 23px 0} #buyTickets #leavingColumn.half {margin-right: 2%} #buyTickets #returningColumn.half {margin-left: 2%} #buyTickets #leavingColumn label, #buyTickets #returningColumn label {color: #bc0087} #buyTickets #leavingColumn label[for=outh], #buyTickets #returningColumn label[for=reth] {margin-right: 6%; color: #000f30} .firefox #buyTickets #leavingColumn label[for=outh], .firefox #buyTickets #returningColumn label[for=reth] {display:block; clear:right; margin-bottom:.5em} #buyTickets input.datepicker {width: 96%; height: 21px; line-height: 21px; margin: 8px 0; font-size: 0.750em; color: #131551} #buyTickets select#outh, #buyTickets select#outmi, #buyTickets select#reth, #buyTickets select#retmi {color: #131551} #buyTickets select#outh, #buyTickets select#reth {margin-right: 2%} #buyTickets .quickSelect {float: left; width: 100%; margin-top: 8px; color: #666} #buyTickets a#goToday, #buyTickets a#goTomorrow, #buyTickets a#returnToday, #buyTickets a#returnTomorrow {font-size: 0.750em; color: #666} #buyTickets #adultOptions, #buyTickets #childOptions, #buyTickets #railcardOptions, #buyTickets #railcardCount {float: left; margin-right: 3%} #buyTickets #adultOptions select, #buyTickets #childOptions select, #buyTickets #railcardOptions select, #buyTickets #railcardCount select {width: 100%; height: 34px; line-height: 34px; margin-top: 5px; background: url('/media/64990/arrowdown.png') no-repeat 81% 10px; background-color: #FFF; color: #999} #buyTickets #railcardOptions select {background-position-x: 90%} #buyTickets #adultOptions, #buyTickets #childOptions {width: 19%} #buyTickets #railcardOptions {width: 34%} #buyTickets #railcardCount {width: 19%; margin-right: 0} #buyTickets #buyTicketsBtn {margin:10px 0} .ui-autocomplete li {width:inherit !important} /*Box Styles*/ .box1, .box2 {background-color: #FFF} .box1 p, .box1 h3, .box2 p, .box2 h2, .box2 h3 {float: left; padding: 0 6%} .box1 p, .box2 p {font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight: normal} .box1 img.rightArrow, .box2 img.rightArrow {float: right; width: 25px !important; height: 43px !important; text-align: right} .box1 img.rightArrow {margin: 30px 7px 0 0} .box2 img.rightArrow {margin: 24px 28px 24px 0} /*box1*/ .box1 header h2 {float: left; position: relative; width: 100%; height: 86px; line-height: 86px; background-color: #bc0087; font-size: 1.500em; color: #FFF; text-align: center} .box1 header h2:after {content: ''; position: absolute; bottom: -25px; left: 45%; width: 0; height: 0; border: 10px solid transparent; border-top: 15px solid #bc0087} .box1 p {position: relative; margin: 32px 0 29px 0; font-size: 1em; letter-spacing: -0.4px; color: #999999} .box1 h3 {margin-bottom: 29px; font-size: 1.063em; line-height: 1.4em} .box1 h3 strong {font-size: 1.3em; line-height: 27px; font-weight: normal; color:#bc0087} /*box2*/ .box2 img {float: left; width: 100%; height: auto; position: relative} .box2 img:before {content: ''; position: absolute; bottom: 0px; left: 45%; width: 0; height: 0; border: 10px solid transparent; border-top: 15px solid #FFF} .box2 h2, .box2 h3 {width: 88%; margin-top: 23px; font-size: 1.3em; letter-spacing: -0.1px} .box2 p {margin-top: 10px; font-size: 1.063em; line-height: 1.4em; width:88%} /*box3*/ .box3 {float: left} .box3 h3, .box3 span, .box3 p {float: left; width: 96%; padding: 0 2%; text-align:center; color: #FFF} .box3 h3 {font-size: 1.144em; background-color: #bc0087} .box3 h3:before {content: ''; position: relative; bottom: -20px; left: 15%; width: 0; height: 0; border: 5px solid transparent; border-bottom: 11px solid #000f30} .box3 h3 .standard, .box3 h3 .travel {font-size: 2.5em} .box3 p {font-size: 0.801em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight: normal; background-color: #000f30} .box3 p .standard, .box3 p .travel {font-size: 1.35em} /*box4*/ .box4 {float: left} .box4 h3, .box4 span, .box4 p {float: left; width: 96%; padding: 0 2%; text-align:center; color: #FFF} .box4 h3 {font-size: 1.144em; background-color: #bc0087} .box4 h3:before {content: ''; position: absolute; bottom: -20px; left: 45%; width: 0; height: 0; border: 5px solid transparent; border-bottom: 11px solid #000f30} .box4 h3 .standard, .box4 h3 .travel {font-size: 1.9em} .box4 p {font-size: 0.801em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight: normal; background-color: #000f30} .box4 p .standard, .box4 p .travel {font-size: 1.35em} /*Row Articles*/ article.row {position:relative} article.row h3 { font-size: 1.500em} article.row p {font-size: .8em; line-height: 1.2em; padding-top:.5em} article.row a.button {position:absolute; width: 112px; height: 29px; margin: -15px 2% 0 0; top:50%; right:2%; padding-left: 3%; line-height: 29px; font-size: 0.891em} article.row .wrapper {float: left; width: 45%; padding: 1em 2%} article.row .wrapper.no-image {width: 65%; padding: 1.5em 4%} .row strong {color:#bc0087; font-weight:normal} /*twitter*/ #twitter .twitterTextBubble {width: 90%; height: 120px; padding: 0 5% 14px 5%; margin: 30px 0 0 0; background: url('/media/65006/twitterbg.png') no-repeat 97% 18%; background-color: #bc0087; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px} #twitter .twitterTextBubble:before {content: ''; position: relative; bottom: -150px; left: 90%; width: 0; height: 0; border: 15px solid transparent; border-top: 15px solid #bc0087} #twitter .tweetfeed-list-container {height: 100px; overflow: hidden} #twitter .tweetfeed-item-container {margin-bottom: 10px} #twitter .tweetfeed-item-content-container {width: 90%; min-height:100px; color: #FFF} #twitter .tweetfeed-author-name, #twitter .tweetfeed-date-container {font-size: 0.875em} #twitter .tweetfeed-item-content {font-size: 1.2em; margin:1% 0} /*slider*/ #banner {margin: 21px 0 9px 0} #banner .rsABlock {width: 45%; height: auto; top: 40px; left: 0.5%; padding: 1.5% 2.5%; background-color: #FFF; -moz-opacity: 0.8 !important; opacity: 0.8 !important; filter: alpha(opacity=80) !important} #banner .rsABlock h2 {float:left; font-size: 2.250em; letter-spacing: -1px; width:100%} #banner .rsABlock p {float: left; margin-top: 9px; clear: both;} #banner .rsABlock p a.button {width: 200px; height: 35px; padding: 0 8%; font-size: 1.063em; line-height: 35px; background-color: #000f30} #banner .rsABlock p a.button:hover {background-color: #bc0087; color: #FFF} #banner .rsABlock p.distanceFrom {width: 94%; height: 25px; margin-top: 3px; padding-right: 6%; line-height: 25px; text-align: right; background: url('/media/64997/locationicon.png') no-repeat 100% 0px; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-size: 1.05em; font-weight: normal; color: #131551} header #banner .rsABlock {width: 90%; top: 71%; left: 0; padding: 3% 5%} header #banner .rsABlock h2 {font-size: 1.765em !important; width:100%} header #banner .rsABlock p {float: none} header #banner .rsABlock p a.button {height: 35px; padding: 0 2%; line-height: 35px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; font-size: 0.785em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-weight: normal} header #banner .rsABlock p.distanceFrom {float: right; width: auto; margin-top: 6px; font-size: 0.882em} .royalSlider.c2cHero {height: 401px !important} .royalSlider .rsContainer .container {position: relative} img.rsImg {max-width: none; position: absolute; top: 0; left 0;} /*Default*/ .royalSlider { width: 100%; height: 438px !important; position: relative; direction: ltr} .royalSlider, .royalSlider .rsOverflow, .royalSlider .rsSlide, .royalSlider .rsVideoFrameHolder, .royalSlider .rsThumbs {background: #FFF; color: #000f30} .royalSlider > * {float: left} .rsWebkit3d .rsSlide {-webkit-transform: translateZ(0)} .rsWebkit3d .rsSlide, .rsWebkit3d .rsContainer, .rsWebkit3d .rsThumbs, .rsWebkit3d .rsPreloader, .rsWebkit3d img, .rsWebkit3d .rsOverflow, .rsWebkit3d .rsBtnCenterer, .rsWebkit3d .rsAbsoluteEl, .rsWebkit3d .rsABlock, .rsWebkit3d .rsLink { -webkit-backface-visibility: hidden; } .rsFade.rsWebkit3d .rsSlide, .rsFade.rsWebkit3d img, .rsFade.rsWebkit3d .rsContainer { -webkit-transform: none} .rsOverflow {width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color:rgba(0,0,0,0)} .rsVisibleNearbyWrap {width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color:rgba(0,0,0,0)} .rsVisibleNearbyWrap .rsOverflow {position: absolute; left: 0; top: 0} .rsContainer {position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color:rgba(0,0,0,0)} .rsArrow, .rsThumbsArrow {cursor: pointer} .rsThumb {float: left; position: relative} .rsArrow, .rsNav, .rsThumbsArrow {opacity: 1; -webkit-transition:opacity 0.3s linear; -moz-transition:opacity 0.3s linear; -o-transition:opacity 0.3s linear; transition:opacity 0.3s linear} .rsHidden {opacity: 0; visibility: hidden; -webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear; -moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear; -o-transition:visibility 0s linear 0.3s,opacity 0.3s linear; transition:visibility 0s linear 0.3s,opacity 0.3s linear} .rsSlide {position: absolute; left: 0; top: 0; display: block; opacity:1; overflow: hidden; height: 100%; width: 100%} .royalSlider.rsAutoHeight, .rsAutoHeight .rsSlide {height: auto} .rsContent {width: 100%; height: 100%; position: relative} .rsABlock {left: 0; top: 0; position: absolute; z-index: 15} .grab-cursor {cursor:url(grab.png) 8 8, move} .rsNoDrag {cursor: auto} .rsLink {left:0; top:0; position:absolute; width:100%; height:100%; display:block; z-index: 20;} /* Arrows */ .royalSlider .rsArrow { height: 100%; width: 44px; position: absolute; display: block; cursor: pointer; z-index: 21} .royalSlider.rsHor .rsArrowLeft { left: 0; top: 0} .royalSlider.rsHor .rsArrowRight { right: 0; top:0} .royalSlider.rsHor .rsArrowIcn {width: 50px; height: 80px; top: 44%; left: 28%; border-radius: 0px; border: 1px solid #FFF} .royalSlider .rsArrowIcn { width: 32px; height: 32px; top: 50%; left: 50%; margin-top:-16px; margin-left: -16px; position: absolute; cursor: pointer; background: url('/media/65003/sliderarrows.png'); background-color: #000f30; background-color: rgba(20,22,84,0.75); *background-color: #000f30; border-radius: 2px} .royalSlider .rsArrowIcn:hover { background-color: rgba(20,22,84,0.9)} .royalSlider.rsHor .rsArrowLeft .rsArrowIcn { background-position: 0px 0px} .royalSlider.rsHor .rsArrowRight .rsArrowIcn { background-position: 0px 80px} .royalSlider .rsArrowDisabled .rsArrowIcn { opacity: .2; filter: alpha(opacity=20); *display: none} /*Calendar*/ .calendar {width: 94%; margin: 20px 0 40px 0; padding: 3% 3%; background-color: #eee} .calendar tr {background-color: transparent !important} .calendar th {background-color: #bc0087; color: #FFF; font-size: 1em} #serviceAlterations main#contentArea.twoThirds .calendar h2 {height: 62px; line-height: 62px; padding: 0 4%; margin-bottom: 0 !important; background-color: transparent; font-size: 2.067em !important; color: #000f30} .fc {direction: ltr; text-align: left} .fc table {border-collapse: collapse; border-spacing: 0} html .fc, .fc table {font-size: 1em} .fc td, .fc th {padding: 0; vertical-align: top} /*Calendar Header*/ .fc-header td {white-space: nowrap} .fc-header-left {float: right; width: 50%; margin-top: 16px; text-align: right} .fc-header-center {float: left; text-align: center} .fc-header-right {display:none; width: 50%; text-align: right} .fc-header-title {display: inline-block; vertical-align: top} .fc-header-title h2 {margin-top: 0; white-space: nowrap} .fc-header .fc-button {vertical-align: top} /* buttons edges butting together */ .fc-header .fc-button {margin-right: -1px} .fc-header .fc-corner-right, .fc-header .ui-corner-right {margin-right: 0} /* button layering (for border precedence) */ .fc-header .fc-state-hover, .fc-header .ui-state-hover {z-index: 2} .fc-header .fc-state-down {z-index: 3} .fc-header .fc-state-active, .fc-header .ui-state-active {z-index: 4} /*Content*/ .fc-content {position: relative; margin-top: 16px; z-index: 1; /* scopes all other z-index's to be inside this container */ clear: both; zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */} .fc-view {position: relative; width: 100%; overflow: hidden} /*Cell Styles*/ .fc-widget-header, /* , usually */.fc-widget-content { /* , usually */border: 1px solid #FFF} .fc-state-highlight { /* today cell */ /* TODO: add .fc-today to */background: #FFF} .fc-cell-overlay { /* semi-transparent rectangle while dragging */ background: #bce8f1; opacity: .3; filter: alpha(opacity=30); /* for IE */} /*Buttons*/ .fc-button {position: relative; display: inline-block; padding: 0 .6em; overflow: hidden; height: 40px; line-height: 40px; white-space: nowrap; cursor: pointer} .fc-state-default.fc-corner-left { /* non-theme */ border-top-left-radius: 4px; border-bottom-left-radius: 4px} .fc-state-default.fc-corner-right { /* non-theme */ border-top-right-radius: 4px; border-bottom-right-radius: 4px} .fc-button-prev, .fc-button-next {margin-right: 10px !important; border-radius: 4px !important} .fc-button-today {width: 100px; font-size: 1.378em; text-align:center} /* Our default prev/next buttons use HTML entities like ‹ › « » and we'll try to make them look good cross-browser. */ .fc-button .fc-icon {margin: 0 .1em; font-size: 2em; font-family: "Courier New", Courier, monospace; vertical-align: baseline; /* for IE7 */} .fc-icon-left-single-arrow:after {content: "\02039"; font-weight: bold} .fc-icon-right-single-arrow:after {content: "\0203A"; font-weight: bold} .fc-icon-left-double-arrow:after {content: "\000AB"} .fc-icon-right-double-arrow:after {content: "\000BB"} /* icon (for jquery ui) */ .fc-button .ui-icon {position: relative; top: 50%; float: left; margin-top: -8px; /* we know jqui icons are always 16px tall */} /* button states borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/) */ .fc-state-default {background-color: #FFF; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #999; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)} .fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled {color: #999999; background-color: #FFF} .fc-state-hover {color: #333333; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear} .fc-state-down, .fc-state-active {background-color: #cccccc; background-image: none; outline: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)} .fc-state-disabled {cursor: default; background-image: none; box-shadow: none} /*Global Event Styles*/ .fc-event-container > * {z-index: 8} .fc-event-container > .ui-draggable-dragging, .fc-event-container > .ui-resizable-resizing {z-index: 9} .fc-event {border: 1px solid #3a87ad; /* default BORDER color */ background-color: #3a87ad; /* default BACKGROUND color */ color: #fff; /* default TEXT color */ font-size: .85em; cursor: default} a.fc-event {text-decoration: none} a.fc-event, .fc-event-draggable, .fc-event-inner {cursor: pointer} .fc-rtl .fc-event {text-align: right} .fc-event-inner {width: 100%; height: 100%; overflow: hidden} .fc-event-time, .fc-event-title {padding: 0 1px} .fc .ui-resizable-handle {display: block; position: absolute; z-index: 99999; overflow: hidden; /* hacky spaces (IE6/7) */font-size: 300%; line-height: 50%} /* Horizontal Events*/ .fc-event-hori {border-width: 1px 0; margin-bottom: 1px} .fc-ltr .fc-event-hori.fc-event-start, .fc-rtl .fc-event-hori.fc-event-end {border-left-width: 1px;} .fc-ltr .fc-event-hori.fc-event-end, .fc-rtl .fc-event-hori.fc-event-start {border-right-width: 1px;} /* resizable */ .fc-event-hori .ui-resizable-e { top: 0 !important; /* importants override pre jquery ui 1.7 styles */ right: -3px !important; width: 7px !important; height: 100% !important; cursor: e-resize; } .fc-event-hori .ui-resizable-w { top: 0 !important; left: -3px !important; width: 7px !important; height: 100% !important; cursor: w-resize} .fc-event-hori .ui-resizable-handle {_padding-bottom: 14px; /* IE6 had 0 height */} /* Reusable Separate-border Table */ table.fc-border-separate {border-collapse: separate} .fc-border-separate th, .fc-border-separate td {border-width: 1px 0 0 1px; width: 14.285%} .fc-border-separate th.fc-last, .fc-border-separate td.fc-last {border-right-width: 1px} .fc-border-separate tr.fc-last th, .fc-border-separate tr.fc-last td {border-bottom-width: 1px} .fc-border-separate tbody tr.fc-first td, .fc-border-separate tbody tr.fc-first th {border-top-width: 0} /* Month View, Basic Week View, Basic Day View */ .fc-grid th {text-align: center; vertical-align:middle} .fc .fc-week-number {width: 22px; text-align: center} .fc .fc-week-number div {padding: 0 2px} .fc-grid .fc-day-number {float: right; padding: 0 5px; line-height: 20px; color: #999; font-size:.9em} .fc-grid .fc-other-month .fc-day-number {opacity: 0.3; filter: alpha(opacity=30); /* for IE */} .fc-grid .fc-day-content {clear: both; padding: 2px 2px 1px; /* distance between events and day edges */} /* event styles */ .fc-grid .fc-event-time {font-weight: bold} /* right-to-left */ .fc-rtl .fc-grid .fc-day-number {float: left} .fc-rtl .fc-grid .fc-event-time {float: right} /*Agenda Week View, Agenda Day View*/ .fc-agenda table {border-collapse: separate} .fc-agenda-days th {text-align: center} .fc-agenda .fc-agenda-axis {width: 50px; padding: 0 4px; vertical-align: middle; text-align: right; font-weight: normal} .fc-agenda-slots .fc-agenda-axis {white-space: nowrap} .fc-agenda .fc-week-number {font-weight: bold} .fc-agenda .fc-day-content {padding: 2px 2px 1px} /* make axis border take precedence */ .fc-agenda-days .fc-agenda-axis {border-right-width: 1px} .fc-agenda-days .fc-col0 {border-left-width: 0} /* all-day area */ .fc-agenda-allday th {border-width: 0 1px} .fc-agenda-allday .fc-day-content {min-height: 34px; /* TODO: doesnt work well in quirksmode */_height: 34px} /* divider (between all-day and slots) */ .fc-agenda-divider-inner {height: 2px; overflow: hidden} .fc-widget-header .fc-agenda-divider-inner {background: #eee} /* slot rows */ .fc-agenda-slots th {border-width: 1px 1px 0} .fc-agenda-slots td {border-width: 1px 0 0; background: none} .fc-agenda-slots td div {height: 20px} .fc-agenda-slots tr.fc-slot0 th, .fc-agenda-slots tr.fc-slot0 td {border-top-width: 0} .fc-agenda-slots tr.fc-minor th, .fc-agenda-slots tr.fc-minor td {border-top-style: dotted} .fc-agenda-slots tr.fc-minor th.ui-widget-header {*border-top-style: solid; /* doesn't work with background in IE6/7 */} /*Vertical Events*/ .fc-event-vert {border-width: 0 1px} .fc-event-vert.fc-event-start {border-top-width: 1px; border-top-left-radius: 3px; border-top-right-radius: 3px} .fc-event-vert.fc-event-end {border-bottom-width: 1px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px} .fc-event-vert .fc-event-time {white-space: nowrap; font-size: 10px} .fc-event-vert .fc-event-inner {position: relative; z-index: 2} .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: .25; filter: alpha(opacity=25); } .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */ .fc-select-helper .fc-event-bg {display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */} /* resizable */ .fc-event-vert .ui-resizable-s { bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */ width: 100% !important; height: 8px !important; overflow: hidden !important; line-height: 8px !important; font-size: 11px !important; font-family: monospace; text-align: center; cursor: s-resize} .fc-agenda .ui-resizable-resizing { /* TODO: better selector */_overflow: hidden} /*contour forms*/ .contourField {margin: 0 0 1.5em} .contour label {font-size: 1em} .contour .legend label, .contour .legend .help-text {display:none} .contour .mandatory label {color:#bc0087} .contour input, .contour textarea, .contour select, .contour .btn {border: 1px solid #ccc; font-size: 1em; line-height:1.2em; padding: 2% 1%; margin-top:.6em; background-color: #FFF; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width:50%} .contour select {background: url('/media/64990/arrowdown.png') #FFF no-repeat 90% 16px} .contour .help-block {display:block; margin: .3em 0 0} .contour .btn {border-radius:0; background-color: #bc0087; color:#FFF; padding:2% 4%; width:auto} .contour input[type="radio"], .contour input[type="checkbox"] {width:auto; margin-top:0} .contour input[type="radio"] {-webkit-appearance:radio;} .contour .validation-summary-errors {padding: 2%; background: #eeeeee; margin: 2% 0} .contour .validation-summary-errors li, .contour .field-validation-error {color:#FF0000 !important} .contour fieldset, .contourMessageOnSubmit {margin: 4% 0; padding: 4% 4%; background:#eee} .contour fieldset h2 {margin-top:.5em !important} /*.contour .field-validation-error {vertical-align:sub}*/ .contour .field-validation-error {position: relative; display: inline-block; width: auto; max-width: 36%; padding: 6px 7px; margin-left: 2%; top: 13px; background: #bc0087; font-size: 0.8em; line-height: 1.2em; color: #FFF !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px} /*.contour .field-validation-error:after {content: ''; position: absolute; border-style: solid; border-width: 11px 10px 0; border-color: #bc0087 transparent; display: block; width: 0; z-index: 1; bottom: -11px; left: 16px}*/ .recaptchatable th, .recaptchatable tr {height:auto!important} #recaptcha_table {margin-top:.4em !important} .contour legend { font-size: 1.6em !important; padding: 2% 0; width:100%; font-family: 'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; line-height: 1.1em; } .contour textarea {width:80%} .contour .radiobuttonlist label, .contour .checkboxlist label {display:inline-block; margin:.6em 1em 0 0} .contour .checkboxlist ul {float:left; margin:0 0 1.5em !important} .contour .checkboxlist li{list-style-type:none; margin:0 !important; padding:0; float:left !important; width:50%!important} .timeEntry-control {display:none !important} /******************************************************************** HEADER / ASIDE / FOOTER ********************************************************************/ /*HEADER*/ header img {float: left; margin: 10px 0 19px 0} header ul {float: right; margin:0.5em 0 0; clear:right} header ul li {display:inline; color: #bc0087; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-size:1.188em; font-weight: normal; padding-left:.5em} header .tel {padding-left: 1em} header input#search {float: left; width: 200px;/*194px;*/ height: 35px; line-height: 35px; border: none; font-size: 0.9em; background: url('/media/64999/searchicon.png') no-repeat 6px 5px; background-color: #eeeeee; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; padding: 0 20px 0 40px} header .button {height: 35px; line-height: 35px; padding: 0 15px 0 40px; font-size: 1em; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; font-family:'Helvetica Neue LT W06 55 Roman', helvetica, verdana, sans-serif} header ul li a.button.buyTickets {background: #bc0087 url('/media/64995/buyticketsicon.png') no-repeat 6px 5px;} header ul li a.button.signIn {background: #bc0087 url('/media/65002/signinicon.png') no-repeat 6px 7px} header ul li a.button:hover{background-color:#000f30; color:#FFF} header .social {width:40px; padding:0; text-indent:-9999px} header .social:hover {opacity:.6} header ul li a.button.facebook {background: #3b579d url('/media/65199/facebook.png') no-repeat 50% 50%} header ul li a.button.twitter {background: #5ea9dd url('/media/65200/twitter.png') no-repeat 50% 50%;} /*nav*/ nav#main-menu ul {float: none; margin:0 auto} nav#main-menu ul li {font-family:'Helvetica W01 Bold', helvetica; position:relative; float: left; margin:0; height: 50px; line-height: 50px; font-size: 1.413em; letter-spacing: -0.6px; padding:0} nav#main-menu ul li a {display:block; height: 50px; white-space: nowrap; padding:0 10px; line-height: 50px} nav#main-menu a#pull {display: none} nav#main-menu ul li ul.sub {display:none; position: absolute; width: auto; min-width:100%; left: 0; background-color: #FFF; z-index: 2000; box-shadow: 0 2px 5px #b0b0b0;} nav#main-menu ul li:hover {background-color: #bc0087} nav#main-menu ul li ul.sub li {display: block; float: none; width: auto; height:auto; line-height: 40px; font-size: 0.8em} nav#main-menu ul li ul.sub li a {line-height:40px; height:auto} nav#main-menu ul li ul.sub li:hover {background-color: transparent} nav#main-menu ul ul ul.sub {display:none; top: 0; left: 100%} nav#main-menu li:hover > ul.sub, nav#main-menu ul ul li:hover ul.sub {display:block} /*ASIDE*/ aside {margin-bottom: 40px} aside #buyTickets {width: 100%; padding: 27px 23px; margin: 0 0; border: none; box-sizing: border-box} aside #buyTickets h2 {margin-bottom: 20px} aside article {width: 100%; float: left; margin-top: 14px} aside article h3 {height: 50px; margin-top: 144px; padding: 0 2px; line-height: 47px; background-color: #bc0087; font-size: 1.250em; letter-spacing: -0.5px} aside article h3:before {content: ''; position: relative; bottom: 50px; left: 46%; width: 0; height: 0; border: 9px solid transparent; border-bottom: 15px solid #bc0087} aside article h3.blue:before {content: ''; position: relative; bottom: 50px; left: 46%; width: 0; height: 0; border: 9px solid transparent; border-bottom: 15px solid #000f30} aside article img {float: left; width: 100%; height: 144px; margin-top: -194px} /*FOOTER*/ /*About*/ #about h2 {float: left; width: 100%; margin: 35px 0 18px 0; font-size: 1.55em; letting-spacing: 0.45px; color:#bc0087} #about nav {float: left; margin-bottom: 50px} #about nav#about-menu ul li{width: 45%; margin-right:5%; font-size: 0.938em; line-height: 18px} #about nav#about-menu ul li:nth-child(even) {width: 45%; margin-right:0} /*CustomerRel*/ #customerRel {padding-bottom: 40px} #customerRel h2 {float: left; width: 100%; margin: 30px 0 20px 0; font-size: 1.6em; letter-spacing: 0.1px; color: #000f30} #customerRel p {font-size: 0.9em; padding-left: 0px; line-height: 20px; letter-spacing: -0.4px} #customerRel span {font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-size: 1em; color: #bc0087} #customerRel p.address {float: left; width: 34%} #customerRel p.contactDetails {float: left; width: 66%} #customerRel #logos {margin: 8% 0 0 0; text-align: right} /*FooterBar*/ #footerBar {padding-bottom: 33px} #footerBar nav#footer-menu {margin: 14px 0 7px 0} #footerBar nav#footer-menu, #footerBar p {float: left; width: 100%} #footerBar nav#footer-menu ul li, #footerBar p {font-size: 0.813em; letter-spacing: -0.24px; line-height:1.2em} #footerBar nav#footer-menu ul li {padding-right: 11px} #footerBar a img {float: right; margin-top: -22px; line-height: 20px} /******************************************************************** PAGE STYLING - INDIVIDUAL ********************************************************************/ /*HOME*/ /*Slider / Banner*/ #banner.c2cHome {margin: 0 0 !important} /*BlueBand*/ #blueBand {height: 58px} #journeyChecker {float: left; width: 320px; margin: 13px 0} #journeyChecker p {float: left; margin: 0 13px; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; font-size: 0.813em; font-weight: normal} #journeyChecker p span {float: left; width: 42px; height: 30px; line-height: 30px; margin-right: 9px; background-color: #eee; font-size: 0.938em; text-align: center; color: #bc0087; border-radius: 5%; -webkit-border-radius: 5px; -moz-border-radius: 5px} #journeyChecker p a {float:left; margin-top: 9px} #stationLinks {float: right; margin: 13px 0} #stationLinks select.station-select-home {float:left; width: 240px; height: 30px; padding: 0 4%; line-height: 22px; border: none; background: url('/media/64990/arrowdown.png') no-repeat 93% 10px; background-color: #eeeeee; border-radius: 5%; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 1em; letter-spacing: -0.5px} /*Advance Fares*/ #advanceFares{background:#bc0087; padding:1em 0} #advanceFares table{width:100%;border-collapse:collapse;font-weight:700;text-align:left} #advanceFares tbody tr:nth-child(even), #advanceFares th {background-color:#bc0087} #advanceFares tr {border-bottom:.5em solid #bc0087} #advanceFares tr:nth-of-type(odd){background:#aa017e} #advanceFares th{color:#fff;font-size:.8em;border:none;text-align:center;padding:.5% 2%} #advanceFares th:first-child{font-size:1.2em; text-align:left} #advanceFares td{color:#fff; text-align:center; padding:1em; font-size:1.2em} #advanceFares td:first-child{text-align:left;} #advanceFares .buy{padding:0} #advanceFares .button{display:block;text-align:center;width:100%;height:100%;padding:1em 0;background:#000f30;} #advanceFares.sale, #advanceFares.sale tbody tr:nth-child(even), #advanceFares.sale th{background:#db0b32} #advanceFares.sale tr {border-bottom:.5em solid #db0b32} #advanceFares.sale tr:nth-of-type(odd) {background:#c50b31} #advanceFares.sale td:first-child {background: url('../media/905145/saleicon.png') no-repeat left center; padding-left: 60px} /*STATIONS*/ /*Station Summary*/ #stations #body {margin-bottom:28px} #stationSummary {margin: 28px 0 15px 0; background-color: #eeeeee} #stationSummary img {height: 398px; margin: 0 0} #stationSummary img#sMap {height: 192px; max-width:50%} #stationInfo #sAddress {padding: 12px 20px 10px 65px; min-height:30px; background: url('/media/65007/locationicon.png') no-repeat 10% center} #stationInfo #sOpeningTimes {padding: 10px 20px 0px 65px; min-height:40px; background: url('/media/65008/openinghoursicon.png') no-repeat 10% 12px;} /*Live Departure Board*/ #liveDepartureBoard h2, #additionalInformation h2 {color: #000f30} #liveDepartureBoard {margin-bottom:2em} #departureTimes {float: left; width:100%} #liveDepartureBoard table {width:100%; margin:.5em 0} #liveDepartureBoard td {padding:1% 2%;} #liveDepartureBoard th {color: #FFF; background:#bc0087; padding:0 2%;} /*Additional Information*/ #passengerServices, #ticketing, #facilities, #accessibility, #transportLinks {float: left; width: 100%; margin-top: 15px} #additionalInformation h3 {height: 53px; cursor:pointer; line-height: 53px; padding: 0 24px; font-size: 1.462em; background: #eeeeee url('/media/64990/arrowdown.png') no-repeat 96% 21px;} #additionalInformation h3.active {background: #eeeeee url('/media/64993/arrowup.png') no-repeat 96% 21px} /*Accordion*/ /*.accordion h3 {height: 53px; cursor: pointer; line-height: 53px; padding: 0 24px; font-size: 1.462em; background: #eeeeee url('/media/64990/arrowdown.png') no-repeat 96% 21px;} .accordion h3.active {background: #eeeeee url('/media/64993/arrowup.png') no-repeat 96% 21px}*/ .accordion h3 {height: auto; margin-bottom: 0.2em !important; cursor: pointer; line-height: 24px; padding: 10px 24px; font-size: 1.462em; background: #eeeeee url('/media/64990/arrowdown.png') no-repeat 96% 21px;} .accordion h3.active {background: #eeeeee url('/media/64993/arrowup.png') no-repeat 96% 21px} .accordion p {padding: 0 10px 0 24px} /*2FOR1*/ #twoforone #body {margin-bottom:1em} #twoforone #banner {margin-bottom: 1.5em; } #twoforone section p {line-height: 1.2em} #twoforone #contentArea.twoThirds header {position: relative} #twoforone #contentArea.twoThirds h2 {font-size: 1.500em; margin-bottom: 20px} #twoforone .wrapper {padding:1em 2%} #twoforone .button {width:auto !important} #twoforone article.row a.button {width:112px !important} #twoforone section .additional {margin-top:1em; float:left; clear:both;} ul#categorySelect.dropDown li {font-size: 1em; line-height:1.2em; padding:3% 2%; display:none} ul#categorySelect {display: block; position: absolute; width: 39%; top: -28px; right: 0; background-color: #eee; z-index:1000} ul#categorySelect.dropDown:hover li, ul#categorySelect.dropDown .active {display:block} /*DESTINATION LANDING*/ #destinationLanding header {margin-top: -14px} #destinationLanding #banner.c2cHero {height: 400px; margin: 22px 0 25px 0} #destinationLanding #contentArea.twoThirds {padding-bottom: 27px} #destinationLanding #contentArea.twoThirds h2 {margin-bottom: 16px; font-size: 2.250em; letter-spacing: -1px} #destinationLanding .box2 img {height: 229px} #destinationLanding .box2 {padding-bottom: 27px; background-color: #eee} #destinationLanding .half {width: 49.25%; min-height:455px} #destinationLanding .half:nth-child(even) {padding-right: 1.5%} #searchDestinations {float: right} #searchDestinations input {float: left; width: 186px; height: 40px; padding: 0 20px 0 37px; line-height: 40px; border: none; font-size: 1.125em; background: url('/media/64999/searchicon.png') no-repeat 6px 8px; background-color: #eeeeee; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; font-family:'Helvetica Neue LT W06 55 Roman', helvetica, verdana, sans-serif; letter-spacing: 0.3px} /*DESTINATION*/ #destination #body {width: 84%; padding: 18px 8%; background-color: #eee} #destination #body h2 {font-size: 1.500em; margin-bottom: 16px} #destination #body p, #destination #body h3 {font-size: 1.125em; line-height: 24px} #destination #body footer {margin-top: 27px} #destination .dropDown {width: 96%; margin-top: 8px; background-color: #FFF !important; background-position: 96% 19px !important} #destination .dropDown li {font-size: 1em; line-height:1.2em; padding:2% 2%; width:96% !important; display:none} #destination .dropDown:hover li, #destination .dropDown .active {display:block} #destination .dropDown .active {padding:3% 2%;} #destination .royalSlider, #destination .royalSlider .rsOverflow, #destination .img.rsImg {height: 350px !important} /*LANDING GRID*/ #landingGrid .box2 {padding-bottom: 27px; background-color: #eee} #landingGrid .half {width: 49.25%; margin-bottom: 25px; min-height:455px} #landingGrid .half:nth-child(odd) {padding-right: 1.5%} /*QUICK LINKS*/ .contentAboveWrapper {top: -180px; z-index: 100; position: relative} .quicklinks-container {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box; background: #FFF;} .quicklinks-boxes.third {width: 31.8%; position: relative; float: left; box-sizing: border-box; margin: 0 2.3% 2.3% 0; overflow:hidden} .quicklinks-boxes.third:nth-child(3n+3) {margin-right: 0 !important;} .quicklinks-boxes img {width: 100%;} .quicklinks-boxes * {box-sizing: border-box;} @media screen and (max-width: 960px) { .contentAboveWrapper {top: -110px;} } @media screen and (max-width: 680px) { .quicklinks-boxes.third {width: 48.8%} .quicklinks-boxes.third:nth-child(3n+3) {margin-right: 2.3% !important;} .quicklinks-boxes.third:nth-child(2n+2) {margin-right: 0 !important;} } @media screen and (max-width: 500px) { .contentAboveWrapper {top: 0} .quicklinks-boxes.third {width: 100%; margin: 0 0 18px 0 !important;} } /* CSS before box changes .quicklinks-boxes p.box-title {position: absolute; width: 90%; color: #FFF; bottom: 2px; padding: 5%; background: rgba(188, 0, 135, 0.82);} .quicklinks-boxes .box-content {width: 90%; height: 84%; padding: 5%; position: absolute; bottom: 1px; background: rgba(0, 15, 48, 0.82); color: #FFF;} .quicklinks-boxes .box-content * { float: none; } */ .quicklinks-boxes p.box-title {float: none; margin-bottom: 10px; width: 90%; padding: 10px 5% 0 5%;} .quicklinks-boxes .box-content {height: 0; width: 90%; padding: 0 5% 0 5%;} .quicklinks-boxes .box-content p {float: none;} .quicklinks-boxes .box-overlay {width: 100%; height: auto; position: absolute; bottom: 2px; color: #fff; background: rgba(188, 0, 135, 0.82); transition: background .5s;} .quicklinks-boxes .box-overlay.hover {background: rgba(0, 15, 48, 0.82); transition: background .5s;} /*SEASONTICKET*/ #seasonTicket h1 {font-size: 2.250em; margin-bottom: 20px} #seasonTicket .row {width: 90%; padding: 5% 5%; margin: 1em 0} #seasonTicket .row h3 {font-size: 0.9em; padding:15% 2%} #seasonTicket h3 span {margin:8% 0 10%} #seasonTicket .box3 h3:before {bottom:-82px} #seasonTicket .box3 p {padding:8% 2%} #seasonTicket .box4 h3:before {bottom:0px} #seasonTicket .box4 p {float: left; padding:8% 2%; color: #FFF} #seasonTicket .box4.daily h3 {background-color: #000f30} #seasonTicket .box4.daily p {padding-bottom: 15%} #seasonTicket p span{margin-top:.5em} #seasonTicket #contentArea.twoThirds h2 {margin-bottom:.5em} #seasonTicket .dropDown {width: 100%; margin: 16px 0 31px 0; font-size: 1.462em !important; paading: 0 3% !important; border: none; line-height: 45px; background: #FFF url('/media/64990/arrowdown.png') 96% center no-repeat } #seasonTicket .row label {font-size: 1.125em} #seasonTicket .pricing {float:left; width: 100%} #seasonTicket #body {margin-bottom:0} /*DEANS TO COPY OVER TO WEB2 WHEN COMPLETE*/ body #seasonTicket #body form p {margin: 0 0} body #seasonTicket form .dropDown {width: 100%; height: auto; line-height: 45px; color: #bc0087; background: #FFF url('/media/64990/arrowdown.png') 96% center no-repeat; } body #seasonTicket #body .pricing h2 {font-size: 2em} body #seasonTicket .box3.third {margin-right: 0} body #seasonTicket .box3.third:nth-child(odd) {margin-right: 1.5% !important} body #seasonTicket .box3.third p {float: left; color: #FFF} body #seasonTicket .row h3 {margin: 0 0; position: relative;} body #seasonTicket .box4.quarter:nth-last-child(1) {margin-right: 0% !important} /*SERVICE ALTERATIONS*/ #serviceAlterations main#contentArea.twoThirds h2 {height: 62px; line-height: 62px; padding: 0 4%; margin-bottom: 0 !important; background-color: #bc0087; font-size: 1.125em !important; color: #FFF} #serviceAlterations article.row {width: 94%; padding: 9px 3% 17px 3%; margin-top: 0} #serviceAlterations article.row:nth-child(odd) {background-color: #FFF} #serviceAlterations article.row h3, #serviceAlterations article.row h3 a, #serviceAlterations article.row h3 a span {float: left; width: 100%; padding: 0 0; margin: 0 0} #serviceAlterations article.row h3 {height: auto; margin-bottom: 17px; font-size: 0.875em} #serviceAlterations article.row p {width: 100%; padding: 0 0; font-weight: normal; font-size: 0.87em; color: #000f30} #serviceAlterations article.row h3 a {color: #bc0087; line-height: 16px; letter-spacing: -0.5px} #serviceAlterations article.row h3 a span {color: #000f30} #serviceAlterations #key {margin:2em 0; text-align:center} #serviceAlterations #key li {display:inline; padding: 0 1em; line-height:1.5em; border-left:1.5em solid #bc0000; margin: 0 0 .5em} #serviceAlterations #key li.sel {border-color: #f18144} #serviceAlterations #key li.gn {border-color: #008b09} #serviceAlterations #key li.sp {border-color: #bc0087} /*NEWS EVENTS*/ #newsEvents #body {margin:0em 0} /*GENERIC - FREE TEXT AREA (BODY)*/ #body h1 {font-size: 2.250em; margin:0 0 .5em} #body h2 {font-size: 1.6em !important; margin:1em 0 .5em; line-height: 1.1em} #body h3 {font-size: 1.2em; margin:1em 0 .5em; line-height: 1.3em} #body p {font-size: 1em; margin: 0 0 .5em; float:none} #body blockquote {float: left; font-style: italic; font-size: 18px; line-height: 24px; color: #bc0087} #body ol, #body ul {font-weight: normal; letter-spacing: 0px; margin: 1em 0 .5em} #body ul {list-style-type: disc} #body ol {list-style-type: decimal} #body li {float: left; width: 94%; margin: 0 0 0.4em 6%; font-size: 1em; line-height: 1.3em; color: #131551} #body .half li {margin-left: 16%} #body ul li, #body ol li {float: none} #body .last {margin-right: 0 !important} #body .half {width:42.5%; margin-right: 7.5%} #body .third {float: left; width: 32.333%; margin-right: 1.5%} #body .quarter {float: left; width: 23.87%; margin-right: 1.5%} #body .button {width: 34%; height: 35px; padding: 0 2%; margin-right: 2%; line-height: 32px} #body form {float: left; width: 100%} #body form .dropDown{width: 40%; height: 30px; line-height: 30px; background-color: #eee; background-position-y: 10px; color: #000f30; border: none; font-size: 1em} #body .bodyDropdown {float: left; width: 70%; padding: 20px 8%; background-color: #eee} #body .bodyDropdown .dropDown {width: 96%; background-color: #FFF} #body table {margin:1em 0} #body th, #body td {padding:1% 2%; border:1px solid #FFF} #body th {background:#bc0087; color:#FFF} #body img {max-width:46%; margin:3px 4% 2% 0; float:left; height:auto !important} #body img.left {float: left; margin:3px 4% 2% 0} #body img.right {float: right; margin: 3px 0 2% 4%} #body img.clear {clear:both} #body .clear {clear: both} #body img.full {clear:both; margin:0 0 4%; width: 100% !important; max-width:100% !important} #body img.mobile-only {display: none} #body table img {max-width:100% !important; margin:0 auto; display:block; float:none} #body .dropDown {width: 96%; margin-top: 8px; background-color: #eee; background-position: 96% 22px} #body .dropDown li {float: left; font-size: 1em; line-height:1.2em; width:40%; padding:1% 2% !important; display:none} #body .dropDown:hover li, #body .dropDown .active {display:block} #body .dropDown .active {padding:3% 2% 1% !important; width:96%} #body iframe{max-width:100%} /*USER ADDED STYLES*/ .super-table table{width:100%;border-collapse:collapse;color:#000f30} .super-table tr {background:#FFF} .super-table tr:nth-of-type(odd) {background:#eee} .super-table th{background:#000f30 !important;color:white;font-size:0.8em} .super-table td,th{padding:6px;border:1px solid #fff;text-align:left} .super-table .off-peak{font-size:1.3em;color:#abadb2} .super-table .off-1{font-size:1.3em;color:#979aa1} .super-table .off-2{font-size:1.3em;color:#83878f} .super-table .off-3{font-size:1.3em;color:#2c2c4c} .super-table .terms{font-size:12px;color:#2c2c4c} .super-table .button {width:96% !important} /*MESSAGE OVERLAY*/ #messageOverlay { position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; background-color: rgba(0, 0, 0, 0.6); z-index: 10000;} .messageOverlayContainer {width: 40%; height: auto; min-height: 320px; padding: 15px 15px; margin: 0 auto; position: relative; background: #FFF; border: 5px solid #cbcbcb; text-align: center; top:10px } .messageOverlayContainer p {width: 100%; text-align: center; line-height: 1.3em;} .messageOverlayContainer p.closemessageOverlay, .messageOverlayContainer h1 {color: #bc0088} .messageOverlayContainer p.closemessageOverlay {width: auto; position: absolute; right: 15px; font-family: 'HelveticaNeueW01-75Bold', helvetica, verdana, sans-serif;} .messageOverlayContainer h1 { margin-top: 35px; font-size: 2em;} .messageOverlayContainer h2 {width: 44%; margin: 15px auto; font-size: 1.4em} .messageOverlayContainer ul {float: left; width: 100%; list-style-type: none; margin-bottom: 14px;} .messageOverlayContainer li {float: left; width: 47.8%; margin: 1.1% 1.1%} .messageOverlayContainer li a {float: left; width: 98%; height: auto; padding: 15px 1%; background: #BC0088; color: #FFF; text-transform: uppercase;} .messageOverlayContainer li a:hover, .messageOverlayContainer p.closemessageOverlay:hover {opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; cursor: hand;} @media (max-width: 880px) { .messageOverlayContainer {width: 60%} } @media (max-width: 600px) { .messageOverlayContainer {width: 80%} .messageOverlayContainer {min-height: 360px} .messageOverlayContainer h1 {font-size: 1.7em !important} .messageOverlayContainer h2 {width: 80%; font-size: 1.1em !important} } @media (max-width: 460px) { .messageOverlayContainer h1 {margin-top: 25px} .messageOverlayContainer li a {height: 30px} } /*WHERE TO NEXT*/ /*#w2nBanner {float: left; width: 100%; height: auto; background: #fcdf9b url('/media/9994363/where2next_1440x524.jpg') no-repeat 46% 0%; background-size: cover}*/ /*#w2nBanner {float: left; width: 100%; height: auto; background: #ffffff url('/media/9994423/c2cwhere2next9-11-15.jpg') no-repeat 56% bottom; background-size: cover}*/ #w2nBanner {float: left; width: 100%; height: auto; background: #18B4DA url('/media/7905050/w2nheaderbg.jpg') no-repeat right bottom; background-size: cover} #w2nBanner .container {position: relative} #w2nBanner h1 {text-indent: -99999px} #w2nBanner img.where2nextTitle {position: absolute; width: 40%; top: 75px; left: 5%} nav#findYourInspiration {width: 82%; height: 315px; padding: 20px 20px; margin: 180px/*260px*/ auto 0 auto; position: relative; background: #FFF; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.12);} nav#findYourInspiration .FYITitleBG {float: left; width: 100%; position: relative; text-align: center; background: #ffffff url('/media/7905002/w2ntitlebg.jpg') repeat-x 0 15px} nav#findYourInspiration h2, #findYourInspiration p {text-align: center} nav#findYourInspiration h2 {width: 310px; margin: 0 auto; background: #FFFFFF; font-size: 1.250em /*20px*/; line-height: 1.400em /*28px*/; color: #b81b8d} nav#findYourInspiration p {width: 100%; font-size: 1.125em /*18px*/; line-height: 1.556em /*28px*/; color: #cccccc; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif} nav#findYourInspiration ul {width: 93%; margin: 0 auto} nav#findYourInspiration li {float: left; width: 15.4%; height: 102px; margin: 20px 2.3% 0 2.3%; text-align: center; color: #cccccc; font-size: 0.800em /*12.8*/; line-height: 1.4em /*25.6*/} nav#findYourInspiration li img {position: static; display: block; margin: 0 auto 8px auto; opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70)} nav#findYourInspiration li a {color: #cccccc} nav#findYourInspiration li.last img {margin-top: -20px; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100)} nav#findYourInspiration li.last.active {display:none} nav#findYourInspiration li a:hover {color: #808080} nav#findYourInspiration li img:hover {opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50)} nav#findYourInspiration .circle {width: 12px; height: 12px; background: #b81b8d; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%} nav#findYourInspiration .fyileft, nav#findYourInspiration .fyiright {position: absolute; top: 10px} nav#findYourInspiration .fyileft {left: -1px} nav#findYourInspiration .fyiright {right: -1px} nav#findYourInspiration ul li a {float: left; width: 100%; height: auto} nav#findYourInspiration ul li a span {float: left; width: 100%; height: 54px; margin-bottom: 10px} nav#findYourInspiration ul li.city a span {background: #ffffff url('/media/9994424/london.png') no-repeat center 0px} nav#findYourInspiration ul li.city a:hover span, nav#findYourInspiration ul li.city.active a span {background: #ffffff url('/media/9994425/londonpink.png') no-repeat center 0px} nav#findYourInspiration ul li.beach a span {background: #ffffff url('/media/7905008/beach.png') no-repeat center 0px} nav#findYourInspiration ul li.beach a:hover span, nav#findYourInspiration ul li.beach.active a span {background: #ffffff url('/media/7905010/beachpink.png') no-repeat center 0px} nav#findYourInspiration ul li.beachTwo a span {background: #ffffff url('/media/9994571/beachv2.png') no-repeat center 0px} nav#findYourInspiration ul li.beachTwo a:hover span, nav#findYourInspiration ul li.beachTwo.active a span {background: #ffffff url('/media/9994572/beachv2pink.png') no-repeat center 0px} nav#findYourInspiration ul li.christmas a span {background: #ffffff url('/media/9994419/christmas.png') no-repeat center 0px} nav#findYourInspiration ul li.christmas a:hover span, nav#findYourInspiration ul li.christmas.active a span {background: #ffffff url('/media/9994421/christmaspink.png') no-repeat center 0px} nav#findYourInspiration ul li.food a span {background: #ffffff url('/media/9994420/food-drink.png') no-repeat center 0px} nav#findYourInspiration ul li.food a:hover span, nav#findYourInspiration ul li.food.active a span {background: #ffffff url('/media/9994422/food-drink-pink.png') no-repeat center 0px} nav#findYourInspiration ul li.shopping a span {background: #ffffff url('/media/7905029/shopping.png') no-repeat center 0px} nav#findYourInspiration ul li.shopping a:hover span, nav#findYourInspiration ul li.shopping.active a span {background: #ffffff url('/media/7905030/shoppingpink.png') no-repeat center 0px} nav#findYourInspiration ul li.family a span {background: #ffffff url('/media/7905017/family.png') no-repeat center 0px} nav#findYourInspiration ul li.family a:hover span, nav#findYourInspiration ul li.family.active a span {background: #ffffff url('/media/7905018/familypink.png') no-repeat center 0px} nav#findYourInspiration ul li.history a span {background: #ffffff url('/media/7905020/history.png') no-repeat center 0px} nav#findYourInspiration ul li.history a:hover span, nav#findYourInspiration ul li.history.active a span {background: #ffffff url('/media/7905021/historypink.png') no-repeat center 0px} nav#findYourInspiration ul li.culture a span {background: #ffffff url('/media/7905012/culture.png') no-repeat center 0px} nav#findYourInspiration ul li.culture a:hover span, nav#findYourInspiration ul li.culture.active a span {background: #ffffff url('/media/7905013/culturepink.png') no-repeat center 0px} nav#findYourInspiration ul li.outdoors a span {background: #ffffff url('/media/9994426/outdoors.png') no-repeat center 0px} nav#findYourInspiration ul li.outdoors a:hover span, nav#findYourInspiration ul li.outdoors.active a span {background: #ffffff url('/media/9994427/outdoorspink.png') no-repeat center 0px} nav#findYourInspiration ul li.theatre a span {background: #ffffff url('/media/7905031/theater.png') no-repeat center 0px} nav#findYourInspiration ul li.theatre a:hover span, nav#findYourInspiration ul li.theatre.active a span {background: #ffffff url('/media/7905032/theaterpink.png') no-repeat center 0px} /*Rain Proof*/ main#contentArea.whereToNextContent {margin-top: -66px !important} nav#findYourInspiration ul li.rainProof {position: relative; float: right; width: 209px; height: auto; padding: 0 8px 13px 33px; margin: 0 0; top: 5px; right: -56px; overflow: hidden} nav#findYourInspiration ul li.rainProof .rainProofInner {float: left; width: 90%; height: 20px; padding: 0 10% 13px 0; background: #FFF; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.05)} nav#findYourInspiration ul li.rainProof .rainProofInner::before {content: ""; position: relative; float: left; width: 0; height: 0; border-style: solid; border-width: 0 25px 33px 0; border-color: transparent #FFFFFF transparent transparent; left: -25px; top: 0} nav#findYourInspiration ul li.rainProof .toggleSwitchWrapper {position: relative; float: left; width: 53px; height: 20px; margin-top:2px; background: #CCC; border-radius: 43% 100%; -moz-border-radius: 43% 100%; -webkit-border-radius: 43% 100%; border: 2px solid #bababa;} nav#findYourInspiration ul li.rainProof .toggleSwitch {position: absolute; width: 23px; height: 23px; background: #FFF; top: -3px; left: -3px; border-radius: 100% 100%; -moz-border-radius: 100% 100%; -webkit-border-radius: 100% 100%; border: 1px solid #bababa; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12)} nav#findYourInspiration ul li.rainProof img {float: left; width: 23px; margin: 2px 5px} nav#findYourInspiration ul li.rainProof p {float: left; width: auto; margin-top: 3px; line-height: 1.4em; font-size: 1em; color: #9f9f9f} nav#findYourInspiration ul li.rainProof p span {position: absolute; top: 2px; text-transform: uppercase; color:#FFF} nav#findYourInspiration ul li.rainProof p span.rainProofNo {left: 25px} nav#findYourInspiration ul li.rainProof p span.rainProofYes {display: none; left: 3px} nav#findYourInspiration ul li.rainProof.active .toggleSwitch {left: 31px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s} nav#findYourInspiration ul li.rainProof.active p span.rainProofYes {display: block;} nav#findYourInspiration ul li.rainProof.active p span.rainProofNo {display: none} nav#findYourInspiration ul li.rainProof.active .toggleSwitchWrapper {background:#56c4dc} nav#findYourInspiration ul li.rainProof:hover {cursor:pointer} main#contentArea.whereToNextContent {margin-top: -35px; padding-top: 65px} main#contentArea.whereToNextContent .box2.third {margin-top: 10px} main#contentArea.whereToNextContent .pagination li a {background: #FFFFFF; color: #CCCCCC} main#contentArea.whereToNextContent .pagination li a:hover, main#contentArea.whereToNextContent .pagination li a.active {background: #bc0087; color: #FFFFFF} main#contentArea.whereToNextContent img:hover {opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80)} /*WHERE TO NEXT RESULTS*/ #w2n-grid .results article.third {float: left; width: 32.333%; height: 180px; margin: 4px 0.5%; position: relative; overflow: hidden} #w2n-grid .results article h3 {float: left; width: 96%; height: 30px; padding: 3% 3%; position: absolute; bottom: 0; color: #000; background: #FFF} #w2n-grid .results article h3 a {color: #000f30} #w2n-grid .results article img, #w2n-grid footer {float: left; width: 100%; height: auto} #w2n-grid .results article img {position: absolute; left: 0; top: -30px} #w2n-grid .results article img:hover, #w2n-grid article a:hover {color: #ccc; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80)} #w2n-grid .results article.twoForOne img {top: -77px} #w2n-grid footer {margin: 35px 0 25px 0} #w2n-grid footer #social-bar {float: left} #w2n-grid footer #pagination {float: right; margin-top: 0} #w2n-grid #social-bar {margin-bottom:2em} #w2n-grid a.arrow {float:right; margin-bottom:.5em} #w2nResultsBanner, #w2nResultsBannerKids {float: left; width: 100%; height: auto; padding: 45px 0 25px 0} /*#w2nResultsBanner {background: #ffffff url('/media/7905004/w2nresultsbanner.jpg') no-repeat top right; background-size: cover;}*/ #w2nResultsBanner {background: #ffffff url('/media/9994444/where2nextbg-nov.jpg') no-repeat top right; background-size: cover;} #w2nResultsBannerKids {background: #ffffff url('/media/7905005/w2nresultsbannerkids.jpg') no-repeat top center; background-size: cover;} .resultsBannerText {width: 30%; margin: 0 auto; text-align: center} .resultsBannerText p {width: 100%; color: #FFF; font-size: 1.375em; line-height: 1.364em; font-family:'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; text-align: center} .resultsBannerText p {background: rgba(0, 0, 0, 0.4); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 1% 1%; margin-top: 15px;} .resultsBannerText img {width: 60%} #kids1pound.resultsBannerText {width: 40%} #kids1pound.resultsBannerText p {color: #3F4041; font-size: 1.1em} #kids1pound.resultsBannerText img {width: 46%} /*DELAY REPAY*/ .delayrepayment .contourField {float: left; width: 48%; padding-right: 2%} .delayrepayment .contourField div {position: relative} .delayrepayment input, .delayrepayment textarea, .delayrepayment select, .delayrepayment .btn {width: 98%; line-height: 1.1em; padding: 1.5% 1%;} .delayrepayment select { background-position:95% 8px; height:1.8em} .delayrepayment .field-validation-error {position: absolute; top: -37px; right: 0%} .delayrepayment .ticketprice span {margin-bottom: 16px} .delayrepayment .btn {width: auto !important} .delayrepayment .btn:hover {background-color: #000f30; color: #FFF} @media screen and (max-width: 600px) { .delayrepayment .contourField {width: 100%; padding-right: 0} .delayrepayment select {background-position-x: 98% !important; background-position-y: 14px !important;} .delayrepayment input, .delayrepayment textarea, .delayrepayment select, .delayrepayment .btn {width: 98%; padding: 2% 1%; line-height: 1.2em; height:auto} .delayrepayment .contourNavigation {text-align: center} .delayrepayment .btn {float: none; width: 96% !important; height: 40px; margin: 0 auto; line-height: 40px; padding: 0% 2% !important} } /*TIMETABLE COMPARISON*/ #timetable-comparison {float:left; width: 100%; height: auto; background: linear-gradient(#dedede, #eeeeee); background: -webkit-linear-gradient(#dedede, #eeeeee); background: -o-linear-gradient(#dedede, #eeeeee); background: -moz-linear-gradient(#dedede, #eeeeee); } .timetableBG {float: left; width: 100%; height: auto; background: url('/media/9994409/timetablecomparisonbg.jpg') no-repeat; background-size: 100% 404px} #timetable-comparison #contentArea.full {background-color: transparent} .currentNewTimetablecomparison {float: left; display:none; width: 90%; margin: 15px 5% 0; background: #FFF; padding: 3px 3px; box-shadow:0 0 15px rgba(0, 0, 0, 0.2);} #body .currentNewTimetablecomparison h2 {width:100%; font-size:1em !important; text-align:center; line-height:80px !important; margin:0 !important; background:#777777; color:#FFF; box-sizing:border-box; border-right:solid 1px #FFF} #body .currentNewTimetablecomparison .half {width:50%; margin:0} #body .currentNewTimetablecomparison table {width:100%; margin:0} #body .currentNewTimetablecomparison th, #body .currentNewTimetablecomparison td {border:none; font-family: 'HelveticaNeueW01-65Medi', helvetica, verdana, sans-serif; background:#FFF; padding:2%} #body .currentNewTimetablecomparison th {background: #a0a0a0} #body .currentNewTimetablecomparison tr {border-top: solid #dfdfdf 1px} #body .currentNewTimetablecomparison td {color:#999999} #body .currentNewTimetablecomparison td:first-child, #body .currentNewTimetablecomparison th:first-child {padding-left:8%} #body .currentNewTimetablecomparison tr:nth-child(3) td {background:#eeeeee; color:#3a3a3a} #body .currentNewTimetablecomparison .half:nth-child(2) h2 {background:#bc0087} #body .currentNewTimetablecomparison .half:nth-child(2) th {background:#d04dab} #body .currentNewTimetablecomparison .circle, #body .timetableComparisonDownload .circle {border-radius:11px; display:block; width:22px; height:22px; background:#19af54; float:left} #body .currentNewTimetablecomparison .circle {margin:5px} .circle.LSA {background:#fdbe2c !important} .circle.SRO {background:#FF6600 !important} .circle.TF {background:#fc0d1b !important} .circle.UKN {background:#000000 !important} #body .currentNewTimetablecomparison .msg {display: block; float: left; width: 40px; line-height: 1em; font-size:.8em} #body .timetableComparisonDownload {margin:1em 0 0; float:left; width:100%; text-align:center} #body .timetableComparisonDownload .circle {border-radius:8px; display:inline-block; width:16px; height:16px; margin-right:10px} #body .timetableComparisonDownload ul li {list-style-type:none; display:inline-block; width:30%; margin:0 2% .5em 0;} #body .timetableComparisonDownload ul li:nth-child(2) {width:60%} #body .timetableComparisonDownload ul {width:70%; float:left; display:none} #body .timetableComparisonDownload a.button {display:block; width:22%; text-align:center; padding:1% 3%; margin-top:.9em; float:right} #body .timetableComparisonDownload a.button.center {display:inline-block; height:auto; float:none; line-height:1.2em; margin:0 2% 2% 0} #body .timetableComparisonDownload a.amendments {background:#000f30} #timetable-comparison .terms {display:none; float:left} #timetable-comparison header p, #timetable-comparison .feedback { font-family: 'Helvetica W01 Bold', helvetica; color: #777777; text-align: center; font-size: 0.875em} #timetable-comparison header h1 {float:left; width: 100%; text-align: center} #timetable-comparison header h1 img {float: none; margin: 0 0} #timetable-comparison form {width:90%; margin:1em 5% .5em; background:#fff; height:60px; box-shadow:0 0 15px rgba(0, 0, 0, 0.2);} #timetable-comparison form p {float:left; width:28%; height:100%; border-right:1px solid #dddddd} #timetable-comparison form label { width:30%; display: block; float: left; box-sizing: border-box; font-size:1em; color:#b1a9a9; line-height:60px; padding:0 10px } #timetable-comparison form select {height:100%; border:none; background: #FFF; width:70%; font-size:1em; background:url('/media/64990/arrowdown.png') no-repeat center right;} #timetable-comparison form select#from, #timetable-comparison form select#to {background:url('/media/65017/locationiconfield.gif') no-repeat center right; padding-right:20px} #timetable-comparison form p.departs-arrives label, #timetable-comparison form p.time label {display:none} #timetable-comparison form p.departs-arrives, #timetable-comparison form p.time{width:12.5%; border:none} #timetable-comparison form p.departs-arrives select, #timetable-comparison form p.time select {width:100%; padding:0 10%;} #timetable-comparison form .button {width:18%; line-height:60px; height:100%; font-size:1em; text-align:center; border:none; float:right; margin:0} } /********** MEDIA QUERIES **********/ /* CSS for high-resolution devices */ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){ /* .logo {background: url(images/logo-2x.png) no-repeat}*/ } @media screen and (min-width: 1400px) { .royalSlider { height: 500px !important;} } @media screen and (min-width: 1700px) { .royalSlider { height: 550px !important;} } @media screen and (min-width: 955px) { .resultsBannerText img, #kids1pound.resultsBannerText img {width: 247px} .resultsBannerText {width: 40%} } @media screen and (max-width: 954px) { .container {width: 94%; padding: 0 1.8%} #importantAnnouncement p {width:90%} #contentArea .container {width: 97.6%} nav#main-menu .container {width: 100%} .box1.third, .box2.third {width: 30.333%; margin: 38px 1.5%} /*Header*/ nav#main-menu ul li {font-size: 1.2em} nav#main-menu ul li a {padding:0 12px} header input#search {width:100px} /*Buy Tickets*/ label[for=outh], label[for=reth] {display:block; clear:right; margin-bottom:.3em} #buyticketsform p:last-child {float:left; clear:both} #buyticketsform .button, #buyTickets #secondary input, #buyTickets #secondary select {line-height:40px !important; height:40px !important} #buyTickets #secondary select {background-position: 90% 15px} /*HOME*/ /*Banner - Slider*/ #banner.c2cHome .rsABlock {left: 10.5%; top: 19px} #banner.c2cHome .rsABlock {width: 59%} header #banner .rsABlock {top: 66.5%} .royalSlider { height: 350px !important;} /*BlueBand*/ #blueBand {height: 190px} #blueBand .container {width: 77%} #buyTickets {margin: -173px auto; width: 100%; padding: 13px 3.5%; box-sizing: border-box} #journeyChecker, #stationLinks {margin-top: 139px} #journeyChecker p {margin-left: 0} #stationLinks select.station-select-home {width: 211px; padding: 0 2px} /*Season Ticket*/ #seasonTicket .box4.daily p {padding-bottom: 8% !important} #seasonTicket .box4 p {min-height: 55px} /*ContentArea*/ .box1 header h2 {font-size: 1.3em} /*ARTICLE ROW*/ article.row h3 {padding-top: 6px} article.row a.button {margin-top: 0} article.row .wrapper {width:40%} /*w2n*/ nav#findYourInspiration ul {width: 100%} nav#findYourInspiration li {margin: 20px 0.5% 0 0.5%} nav#findYourInspiration li.last {width: 30%} .resultsBannerText img {width: 80%} #kids1pound.resultsBannerText img {width: 62%} .resultsBannerText {width: 40%} #w2nResultsBanner {background-position-x: center} nav#findYourInspiration ul li.rainProof {right: -28px} /*Timetable*/ #body .timetableComparisonDownload ul {width:60%} #body .timetableComparisonDownload ul li, #body .timetableComparisonDownload ul li:nth-child(2) {width:45%} #body .timetableComparisonDownload a.button {width:30%} #timetable-comparison form, .currentNewTimetablecomparison {width:100%; margin-left:0; margin-right:0} } @media screen and (max-width: 768px) { #contentArea.twoThirds {width: 100% !important; margin-right: 0; padding-bottom: 30px} aside.third {width: 100%} /*HOME*/ /*Banner - Slider*/ header #banner .rsABlock {top: 71.5%} .royalSlider { height: 330px !important;} #banner.c2cHome .rsABlock {width: 65%; top: 10px} /*MOBILE Nav*/ nav#main-menu { width: 100%; margin-bottom:.5em; background-color: #FFF} nav#main-menu a#pull {display: block; float: none; width: 98%; height: 50px; margin: 0 auto; padding: 0 0; line-height: 37px; box-sizing: border-box; border: 3px solid #ccc; background-color: #eeeeee; background-position-y: 15px; border-radius: 5%; -webkit-border-radius: 5px; -moz-border-radius: 5px} nav#main-menu a#pull span {margin-left: 2%; line-height:45px} nav#main-menu ul {float: left; padding-bottom: 1.8%; position: relative; margin-left: 0; text-align: center; background-color: #FFF; z-index: 99999999} nav#main-menu ul li:hover {background-color: transparent} nav#main-menu ul.activeMenu {padding-bottom: 35px; border-bottom: 3px solid #999} nav#main-menu li {display: none; float: none; width: 100%; height: 30px; padding: 3.5% 0 0; margin: 0 auto; line-height:30px; text-align: center; font-size: 1.5em} nav#main-menu li a {color:#bc0087} nav#main-menu ul.activeMenu li {display:block !important; height:auto} nav#main-menu ul.activeMenu li:hover {height:auto} nav#main-menu ul.activeMenu ul.sub {border-bottom: none; box-shadow:none !important; left:auto; position:relative !important } nav#main-menu ul.activeMenu ul li {font-size: 0.8em;} nav#main-menu ul li:hover ul.sub {display:block !important; position:relative !important; box-shadow:none;} nav#main-menu ul li:hover ul.sub ul {display:none !important; float:none} nav#main-menu ul li:hover ul.sub li:hover ul {display:block !important} /*nav#main-menu ul li.has_sub a {pointer-events: none; cursor: default} nav#main-menu ul li a {pointer-events: auto !important; cursor: pointer !important}*/ /*ContentArea*/ .box1.third, .box2.third {margin: 56px 1.5%; height: auto; min-height: 475px} .box1 header h2 {font-size: 1.125em} .box2.third img {width: auto; height: 221px} .box2 img.rightArrow {margin-right: 0} /*DESTINATION*/ /*ASIDE*/ aside {margin-bottom: 50px} aside #buyTickets {margin: 0 auto 25px auto} aside article {width: 315px; margin-top: 38px} aside article:nth-last-child(odd) {float: right} #destination aside {margin-top: 0} /*FOOTER*/ /*About*/ #about .half {width: 41.66%} #about #twitter.half {width: 58.333%} #about nav {margin-bottom: 76px} #about nav#about-menu ul li {width: 100%} #about #twitter .twitterTextBubble {height: 148px} #about #twitter .twitterTextBubble:after {bottom: -179px} /*CustomerRel*/ #customerRel .half {width: 64.667%} #customerRel #logos.half {width: 33.333%} #customerRel #logos img {float: right; clear:both} #customerRel p.contactDetails {clear:both} /*w2n*/ #w2nBanner .container {width: 96%} nav#findYourInspiration {width: 93%} .resultsBannerText {width: 60% !important} .resultsBannerText img {width: 60%} #kids1pound.resultsBannerText img {width: 62%} } @media screen and (max-width: 700px) { header .container ul li, header .container ul li a {display:none} header .container ul li.mobile-show, header .container ul li a.mobile-only {display:block} header .container ul {margin: .8em 0 0} #blueBand .container {width: 95.4%} .box1.third, .box2.third {min-height: 569px} .box1 header h2 {font-size: 1em} /*Row Article*/ article.row a {font-size: 0.791em} /*HOME*/ /*Banner - Slider*/ #banner.c2cHome .rsABlock {width: 76%; left: 1.5%; top: 12px} header #banner .rsABlock {top: 65%} /*ASIDE*/ aside article {display:none} /*Timetable*/ #timetable-comparison form {height:120px} #timetable-comparison form p {width:49.8%; height:50%; border-bottom:1px solid #dddddd; margin:0} #timetable-comparison form p.departs-arrives, #timetable-comparison form p.time {width:24%} #timetable-comparison form p.departs-arrives {margin-left:10%} #timetable-comparison form .button {height:50%; float:left; width:25%; margin-left:10%} #body .timetableComparisonDownload ul {width:100%} #body .timetableComparisonDownload a.button {width:50%; margin-bottom:.75em} } @media screen and (max-width: 650px) { .box4 h3 .standard, .box4 h3 .travel {font-size: 1.5em} /*w2n*/ nav#findYourInspiration {height: 435px} nav#findYourInspiration li {width: 23.4%} nav#findYourInspiration li.last {width: 40%} #w2nBanner {background-image: none; background-color: #fcdf9b } #w2nBanner img.where2nextTitle {width: 95%; top: 53px; left: 2%} } @media screen and (max-width: 600px) { .container {width: 96.4%} #contentArea .container {width: 100%} #blueBand .container {width: 100%; padding: 0 0} .royalSlider.rsHor .rsArrowIcn {top: 48px} /*BlueBand*/ #blueBand {height: 168px} #blueBand #journeyChecker {margin-left: 1.8%} #blueBand #stationLinks {margin-right: 1.8%} #blueBand #stationLinks select.station-select-home {width: 172px} #journeyChecker, #stationLinks {margin-top: 122px} #buyTickets {border:none; padding: 13px 1.5%} /*ContentArea*/ #contentArea {padding-bottom: 20px} .box1.third, .box2.third, .box3.third {width: 97%; min-height: inherit; margin: 18px 1.5% 0 1.5%} .box2.third img {width: 100%; height: auto} section.half {width: 100% !important;} /*HOME*/ /*Banner - Slider*/ #banner.c2cHome .rsABlock {width: 92%; top: 11px; left: 0; margin: 0 1.5%} header #banner .rsABlock {top: 68%} /*About*/ #about {display: none} /*CustomerRel*/ #customerRel {padding-bottom: 18px} #customerRel #logos img {float: left; clear: none} #footerBar a img {float:none} #footerBar p a{display:block; margin-top:30px} #footerBar p {clear:right} /*DESTINATION LANDING*/ #destinationLanding section.half {margin-top: 18px} #searchDestinations {float:none; margin:0 auto 1em !important; height:80px} /*ASIDE*/ aside {margin-bottom: 0} aside #buyTickets {border-top: 6px solid #000f30; border-bottom: 6px solid #000f30} /*w2n*/ #w2nBanner .container {width: 100%; padding: 0 0} nav#findYourInspiration {width: 97%; height: 470px; box-sizing: border-box} #w2n-grid .results article.third {width: 99%; height: 300px} /*Timetable*/ #timetable-comparison form {height:240px} #timetable-comparison form p {width:100%; height:25%} #timetable-comparison form p.departs-arrives, #timetable-comparison form p.time {width:48%; margin:0; border-bottom:1px solid #dddddd; margin:0} #timetable-comparison form .button {height:25%; width:100%; margin:0} #body .timetableComparisonDownload ul li{width:47%} /*Forms*/ .contour .checkboxlist li{width:98%!important} } @media screen and (max-width: 500px) { #buyTickets #primary, #buyTickets p, #buyTickets input, #buyTickets a {display:none} #buyTickets #secondary {display:block !important} #returningColumn {display:none !important} .mobile-only, .mobile-show {display:block !important} #buyTickets #buyticketsform {margin-top:-5px} #buyTickets .season.daily {border:none} footer #buyTickets {background: #FFF; border-bottom: 6px solid #000f30; border-top: 6px solid #000f30; padding: 27px 23px; margin: 2em 0 1em} #importantAnnouncement p {font-size:0.8em} #stationSummary .half {width: 100%} #stationSummary img#sMap {max-width:100%; width:100%} #stationInfo {padding-bottom: 35px} #stationInfo #sAddress {padding-bottom: 8px; background-position: 5% 9px} #stationInfo #sOpeningTimes {background-position: 5% 12px} #body {margin-bottom: 28px} #body img.hide {display:none} ul.pagination {margin: 22px 0} #body .quarter {width: 49.1%} #body .quarter:nth-child(3) {margin-right: 0} #seasonTicket .box4.daily p {padding-bottom: 26px} /*Row Articles*/ article.row .wrapper {clear:both; width:92% !important; padding:4%} article.row img{margin:2em auto 0 ; float:none !important; position:relative; display:block;} article.row a.button {position:relative; margin: 0 5% 2em; font-size: 0.891em} /*HOME*/ /*Banner - Slider*/ #banner.c2cHome .rsABlock {top: 29px} #banner .rsABlock h2 {font-size: 1.437em} #banner .rsABlock p a.button {font-size: 0.679em} #banner .rsABlock p.distanceFrom {font-size: 0.770em} #banner.royalSlider { height: 170px !important; margin-bottom:0 !important} .royalSlider.rsHor .rsArrowIcn {top: 56px} .royalSlider .rsArrow {width: 26px; display:none!important;} #blueBand {height: 55px} #journeyChecker, #stationChecker {margin-top: 12px} /*Advance Fares*/ #advanceFares thead tr { position: absolute; top: -9999px; left: -9999px; } #destination .royalSlider, #destination .royalSlider .rsOverflow, #destination .img.rsImg {height: 170px !important} #advanceFares table, #advanceFares thead, #advanceFares tbody, #advanceFares th, #advanceFares td, #advanceFares tr { display: block; } #advanceFares tr {height:auto} #advanceFares td:last-child{position:absolute;top:-9999px;left:-9999px} #advanceFares td:first-child{color:#FFF} #advanceFares td{border:none;position:relative;font-size:.8em;padding-left:50%;padding-top:6px;padding-bottom:6px;text-align:left} #advanceFares td:before{position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap} #advanceFares td:nth-of-type(1):before{content:"Example Return Fare";font-weight:700} #advanceFares td:nth-of-type(2):before{content:"Off-Peak Walk Up";font-weight:700} #advanceFares td:nth-of-type(3):before{content:"3+ Days 50% Off";font-weight:700} #advanceFares td:nth-of-type(4):before{content:"6+ Days 50% Off";font-weight:700} #advanceFares.sale td:first-child {background:none; padding-left:50%} header #banner .rsABlock {display: none !important} #body img, #body img.full, #body img.right {max-width:96%; width:96% !important; margin:0 2% 4% !important} .mobile-ignore, #body img.mobile-ignore {width:auto !important} #body .dropDown li {padding: 2% 1%; width:98%; font-size: 1.2em} /*ASIDE*/ aside {margin-top: 18px} /*USER ADDED STYLES*/ .super-table table, .super-table thead, .super-table tbody, .super-table th, .super-table td, .super-table tr { display: block; } .super-table thead tr{position:absolute;top:-9999px;left:-9999px} .super-table tr{border:1px solid #fff; height:auto} .super-table td{border:none !important;position:relative;font-size:.8em;padding-left:50% !important} .super-table .off-peak{font-size:1em;color:#abadb2} .super-table .off-1{font-size:1em;color:#979aa1} .super-table .off-2{font-size:1em;color:#83878f} .super-table .off-3{font-size:1em;color:#2c2c4c} .super-table .terms{font-size:12px;color:#2c2c4c} .super-table td:before{position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap} .super-table td:nth-of-type(1):before{content:"Example Return Fare";} .super-table td:nth-of-type(2):before{content:"Off-Peak Walk Up";} .super-table td:nth-of-type(3):before{content:"3-5 Days 20% Off*";} .super-table td:nth-of-type(4):before{content:"6+ Days 40% Off*";} .super-table td:nth-of-type(5):before{content:"14+ Days 40% Off*";} .super-table.sale td:nth-of-type(3):before{content:"3-5 Days 25% Off*";} .super-table.sale td:nth-of-type(4):before{content:"6+ Days 40% Off*";} .super-table td.buy:nth-of-type(1):before{content:"";} .super-table td.buy:nth-of-type(2):before{content:"";} /*w2n*/ nav#findYourInspiration {height: 455px} nav#findYourInspiration h2 {width: 270px; font-size: 1.150em} nav#findYourInspiration p {font-size: 1.025em} nav#findYourInspiration li {margin-top: 10px} nav#findYourInspiration li.last {width: 210px} /*Timetable*/ #body .currentNewTimetablecomparison .half {width:100%; margin-bottom:.5em} #body .currentNewTimetablecomparison h2 {line-height:40px !important} /*Forms*/ .contour input[type="text"], .contour input[type="password"], .contour input[type="file"], .contour textarea, .contour select {width:98%!important; height:1.6em} .contour textarea {height:3.2em} .contour .btn, .contour select { width:100%!important; height:3em } } @media screen and (max-width: 470px) { nav#findYourInspiration li.last {width: 53%} #w2nBanner img.where2nextTitle {top: 24px} nav#findYourInspiration {margin-top: 85px} } @media screen and (max-width: 400px) { nav#findYourInspiration {height: 580px} nav#findYourInspiration li {width: 32.3%; margin-top: 0} nav#findYourInspiration h2 {width: 220px; font-size: 1em} nav#findYourInspiration p {margin: 5px 0 20px 0; font-size: 0.95em} nav#findYourInspiration li.last {width: 100%} nav#findYourInspiration li.last img {width: 35%; margin-top: -5px} #w2n-grid .results article.third {height: 230px} #w2n-grid .results article h3 {height: 25px; font-size: 0.9em} .resultsBannerText {width: 80%} #w2nResultsBanner {background-position: 20% 0px} } @media screen and (max-width: 320px) { .royalSlider .rsArrow {width: 26px; display:none!important} .royalSlider.rsHor .rsArrowIcn {width: 24px; height: 49px; left: 60%; background: url('/media/65004/sliderarrowssmall.png'); background-color: #000f30; background-color: rgba(20,22,84,0.75)} .royalSlider.rsHor .rsArrowLeft .rsArrowIcn {background-position: 0px 3px} .royalSlider.rsHor .rsArrowRight .rsArrowIcn {background-position: 0px 51px} #banner.royalSlider { height: 130px !important; margin-bottom:10px !important} #banner.c2cHome .rsABlock {top: 9px} #destination .royalSlider, #destination .royalSlider .rsOverflow, #destination .img.rsImg {height: 130px !important} #w2nResultsBanner {background-position: 25% 0px} } /*@media screen and (min-device-width: 641px) and (max-device-width: 1024px) { html.touch nav li {display:inline; opacity: 0.9} }*/ /*! jQuery UI - v1.11.2 - 2014-10-29 * http://jqueryui.com * Includes: core.css, autocomplete.css, button.css, datepicker.css, menu.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; max-height:200px; overflow:scroll; } .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-datepicker { width: 225px; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .8em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: 0; text-align: center; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } /* Component containers ----------------------------------*/ .ui-widget { font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 1em; } .ui-widget-content { border: 1px solid #dddddd; background: #FFF; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { background: #bc0087; color: #ffffff; } .ui-widget-header a { color: #ffffff; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { color: #bc0087; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #bc0087; text-decoration: none; border:1px solid #bc0087; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { color: #bc0087; } .ui-datepicker .ui-state-hover{opacity:0.5;} .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #c77405; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #ffffff; color: #eb8f00; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background: #bc0087; color: #FFFFFF; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #FFFFFF; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { color: #ffffff; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-widget-header .ui-icon { background-image: url("/media/65018/ui-icons_ffffff_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { opacity:0.75; } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0; } /* Overlays */ .ui-widget-overlay { background: #666666; opacity: .5; filter: Alpha(Opacity=50); /* support: IE8 */ } .ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000; opacity: .2; filter: Alpha(Opacity=20); /* support: IE8 */ border-radius: 5px; /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */