This CSS Editor allows you to edit an entire CSS file at once with a dynamic preview shown below. The preview will show the exact line you're editing, and it will update as you type. If you want to show the entire file then move focus to the start or the end of the CSS text.

Works on modern versions of Internet Explorer, Firefox (Mac and PC), Safari, Mozilla.

pre, body, div, td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height:15px;} td a, a, a:link, a:visited {color: #003377; border-bottom: dashed 1px #4F9ED9; text-decoration: none;} a:active{background-color: #4F9ED9; color:#ffffff} a:hover {color: #0033aa; border-bottom: solid 1px #4F9ED9; text-decoration: none;} form {margin:0px;} body {margin:0px; background-color:#ffffff} body {background-repeat: repeat-y; background-image: url(i/splash.gif);} body {overflow-y:auto} body {border-left: 2px outset #4F9ED9;} img {border-color: #666666} /* clearfix all divs */ div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* page blocks */ .head {padding:0px 1px 3px 1px; background-color:#ffffff; position:absolute; top:35px; left:190px; z-Index:103; font-size: 19px; color: #000F41; font-family: Trebuchet, Trebuchet MS, Helvetica, Arial, sans-serif; font-weight:normal;} .subhead {padding:0px 1px 2px 1px; background-color:#ffffff; position:absolute; top:53px; left:242px; z-Index:102; font-size: 15px; color: #001A94; font-family: Trebuchet, Trebuchet MS, Helvetica, Arial, sans-serif; font-weight:normal;} /* images */ .shellLeftCorner {position:absolute; top:370px; left:70px; z-Index:100} .shellLeft {position:absolute; top:400px; left:0px; z-Index:101} .iconicoLogo {position:absolute; top:9px; left:12px; width:83px} .iconicoLogo a, .iconicoLogo a:link, .iconicoLogo a:visited {text-align:center; display:block; border-bottom-width:0px} .Content {position:absolute; top:90px; left:120px; width:615px; z-index: 2;} /* adverts */ .adColumn {position:absolute; top:90px; left:735px;} .adColumn span, .adColumn td, .adColumn a {font-family: Verdana, Arial, Helvetica, sans-serif;} .pageTools {position:absolute; top:505px; left:0px; width:99px; z-Index:102; font-size:10px; letter-spacing: -1px; background-color: #EBF3FD; line-height: 18px; border: solid 1px #005CB2; padding-left: 3px; margin: 0px 3px 0px 7px;} .pageTools a, .pageTools a:link, .pageTools a:visited {display:block; border-bottom-width:0px} .pageTools a:hover {padding-left:1px; } .pageTools input {font-size:10px;} .copyrightText {margin-top:6px; text-align:center; color:#8F9CB8; font-size:9px; line-height: 14px; letter-spacing: -1px;} /* quotes */ .quoteMarks {font-size: 22px; font-family: Trebuchet, Trebuchet MS, "Times New Roman", Times, serif; position: relative; top: 4px; color: #005CB2; margin: 3px; font-weight: bold;} .quote {text-decoration: none; font-style: italic; line-height: 20px;} /* sections */ .section {border: 1px solid #005CB2; margin-bottom:20px; margin-right:20px; background-color:#ffffff;} .sectionPopup {border: 1px solid #005CB2; margin:10px; background-color:#ffffff} .sectionHead {background-color:#B2C1DA; border-bottom: 1px solid #88ACE3; padding:2px; font-variant: small-caps; color:#000F41;} .sectionHead a {color: #000F41;} .sectionHead img {float: right; margin:-2px 0px -2px 2px;} .sectionBody {padding:4px; padding-top:8px; padding-bottom:12px; border-bottom: 2px solid #f4f4f0;} .sectionFoot, .magicTableFoot {background-color: #f4f4f0; padding: 2px; text-align: right; border-bottom: 2px solid #f4f4f0; border-top: 1px solid #ffffff;} .sectionFoot a, .magicTableFoot a {margin-left: 12px;} .sectionFoot input, .magicTableFoot input {margin-left:4px; width:75px} /* Hides from IE5-mac \*/ * html .sectionFoot {height: 1%;} /* End hide from IE5-mac */ .magicTable {border-collapse: collapse; margin-top:1px; background-color: #ffffff; border:1px #C7D7EE solid} .magicTable td {font-size: 11px;} .mini {border: 1px solid #005CB2; margin-bottom:10px;} .miniHead {background-color:#B2C1DA; border-bottom: 1px solid #88ACE3; padding:2px; font-variant: small-caps; color:#000F41;} .miniHead a {color: #000F41;} .miniHead img {float: right; margin:-2px 0px -2px 2px;} .miniBody {padding: 6px 4px 10px 4px; background-color:#EBF3FD; } /* min-height: 46px;} */ .miniFoot {background-color: #D8E8FC; padding: 2px; text-align: right;} /* sub menus - inpage on right */ .subMenu {border: 1px solid #005CB2; margin-bottom:20px; margin-right:20px} .subMenuHead {background-color:#B2C1DA; border-bottom: 1px solid #88ACE3; padding:2px; font-variant: small-caps; color:#000F41;} .subMenuHead a {color: #000F41;} .subMenuBody {font-size: 11px; background-color: #f4f4f0; padding: 4px; padding-left: 8px; border-bottom: 2px solid #f4f4f0; line-height:18px; border-left: solid 1px #4F9ED9;} .subMenuBody button {line-height: normal; width: 174px; margin-top: 3px;} /* forms etc */ .ErrorMsg {font-style: italic; padding-left: 10px; padding-right: 10px; color: #DC2121;} .ErrorMsgBox {font-style: italic; color: #DC2121; padding:2px; border:1px solid #d0d0d0; background-color:#F4F4F0; margin-bottom:8px;} /* menu */ .menuSection {position:absolute; left:3px; color:#000000} .menuSection a, .menuSection a:hover, .menuSection a:link, .menuSection a:visited {border-bottom-width: 0px;} .menuTop {height:16px; width:98px; background-color:#f4f4f0; border:outset 1px #005CB2; text-align:right;} .menuTop a div {height:16px; width:94px; font-size:11px; padding-right: 4px; font-variant: small-caps; cursor:hand; color:#000F41} .menu {background-color: #EBF3FD; font-size: 10px; line-height: 13px; height: 225px; width: 86px; border-left: solid 1px #005CB2; border-right: solid 1px #005CB2; padding-left: 3px; margin: 0px 3px 0px 9px;} .menu a:hover {padding-left:1px} .menuLight {position:absolute; top:90px; width:100px; left:6px; z-Index:1; background-color:#f4f4f0; padding:4px; border: 1px solid #d0d0d0} .menuLight a {border-bottom-width: 0px} .menuLight a:hover {padding-left:1px; border-bottom-width: 0px;} .textLogo {font-size:4px; font-weight:bold; line-height:5px; color:#000000; font-family: 'Courier New', Courier, monospace;} .textLogoLink {border-bottom-width: 0px} .textLogoLink:hover {border-bottom-width: 0px} /* quiz page */ .quizBar {background-color: #EBF6FC; border: 1px solid #27699D; border-right: 1px solid #27699D} .quizBarEnd {border: 1px solid #4F9ED9; border-left: 2px solid #4F9ED9} /* discussions */ .message { padding: 4px; width:100%; margin-top:8px; background-color:#f4f4f0;} /* image chooser */ .imageChooser {background-color: #cccccc; border: 1px solid #d0d0d0; width: 122px; margin-bottom:20px; margin-right:20px;} .imageChooserTop {text-align:center; cursor:default; border: 1px outset #4F9ED9; height:16px; padding:3px;} .imageChooserBody {background-color: #f4f4f0; overflow:hidden; padding:2px; text-align:center;} .imageChooserContent {position:relative; padding-bottom:4px;} .imageChooserContent a , .imageChooserContent img{margin-bottom:4px; font-size:9px;} .imageChooserBot {background-color:#4F9ED9; text-align:center; cursor:default; border: 1px outset #4F9ED9; height:16px; padding:3px;} .galleryImage {border: 1px solid #d0d0d0;} /* Notes */ .infoNote {background-color: infobackground; padding:2px; border:1px solid #d0d0d0; color:#004180; font-size: 11px; margin-bottom:8px;} .iconTrue {font-family:Webdings; font-size:18px; color:#009900; } .iconFalse {font-size:10px; color:#990000;} /* Breadcrumb */ .breadcrumb {height:20px} .breadcrumbPanelLeft {font-size: 11px; float: left;} .breadcrumbPanelRight {font-size: 11px; float: right;} /* Toolbar */ .toolbar {font-size:11px; border:1px solid; height:28px; border-color:#ffffff #D0D0D0 #D0D0D0 #ffffff;} .toolbarPanelLeft, .toolbarPanelRight {font-size:11px; border-left:3px double #DFDFD9; padding:2px 4px 2px 6px; height:100%; line-height:22px;} .toolbarPanelLeft {float: left;} .toolbarPanelRight {float: right;} .toolbar input, .toolbar select, .toolbar button {font-size: 11px; padding:0px} .toolButton {border: 1px outset #89ADE4; font-size: 11px; cursor: hand; color:#000033; background-color:#F0EFF7; margin-left:1px; height:20px; text-align:center;} .infoButton {border: 1px outset #89ADE4; font-size: 10px; cursor: hand; color:#000033; background-color:#F0EFF7; margin-left:1px; float:right; height:13px; width:13px; line-height:3px} .toolButtonDown {border: 1px inset #333366; font-size: 11px; cursor: hand; color:#000033; background-color:#89ADE4; margin-left:1px; height:20px; text-align:center;} .infoButtonDown {border: 1px solid #333366; font-size: 10px; cursor: hand; color:#000033; background-color:#005CB2; margin-left:1px; float:right; height:13px; width:13px; line-height:3px} /* Calendar */ .calendar td {font-size:11px} .calendar a, .calendar a:link, .calendar a:visited{border-bottom-width:0px} .calendar a:hover{border-bottom-width:1px} .calendarHeader { border-width: 0px 0px 0px 0px; border-style: solid; border-color: #d0d0d0; background-color: #f4f4f0; border-bottom: 1px solid #d0d0d0; font-variant: small-caps; margin:0px; } /* iFrame */ .innerPage {MARGIN-TOP:1px; border:1px solid #cccccc} .break {word-break: break-all;} /* buttons */ .downloadButton, .downloadButtonMinor {width: 300px; background-color:#0066CC; color:#ffffff; border:1px raised; border-color:#CBE3FF #0A32A1 #0A32A1 #CBE3FF; height:25px; font-size:12px; } .downloadButton {font-weight:bold;}