CSS Examples
Jump to navigation
Jump to search
Mail
Links
<style> BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: 15px; font-weight: normal; color: #081c55; } </style>
MRS
BODY { BACKGROUND-COLOR: White; COLOR: Black; FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-VARIANT: Normal } H1 { COLOR: #003399; FONT-FAMILY: Arial; FONT-SIZE: 16pt; FONT-STYLE: Normal; FONT-WEIGHT: Bold } P.Info { COLOR: #003399; FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-STYLE: Normal; FONT-WEIGHT: Normal } A.BookmarkIndicator { COLOR: #003399; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-STYLE: Normal; FONT-WEIGHT: Normal } P.Status { COLOR: #0066cc; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-STYLE: Normal; FONT-WEIGHT: Bold } TR.MainHead { BACKGROUND-COLOR: #003399; COLOR: White; FONT-FAMILY: Arial; FONT-SIZE: 9pt; FONT-WEIGHT: Bold; TEXT-INDENT: 1mm } TR.SubHead { BACKGROUND-COLOR: #99ccff; COLOR: #000066; FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-INDENT: 1mm } TD.FieldLabel { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black } TD.RequiredFieldLabel { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Red } TD.DisplayLabel { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: bold; COLOR: Blue } TD.TableValue { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black } TD.TableValueLeftTopBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-LEFT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid } TD.TableValueBottomLeftTopBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-BOTTOM: rgb(128,128,128) 1px solid; BORDER-LEFT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid } TD.TableValueBottomLeftBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-BOTTOM: rgb(128,128,128) 1px solid; BORDER-LEFT: rgb(128,128,128) 1px solid } TD.TableValueBottomLeftRightBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-BOTTOM: rgb(128,128,128) 1px solid; BORDER-LEFT: rgb(128,128,128) 1px solid; BORDER-RIGHT: rgb(128,128,128) 1px solid } TD.TableValueBottomLeftTopBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-BOTTOM: rgb(128,128,128) 1px solid; BORDER-LEFT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid } TD.TableValueBottomLeftTopRightBorder { FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: Normal; COLOR: Black; BORDER-BOTTOM: rgb(128,128,128) 1px solid; BORDER-LEFT: rgb(128,128,128) 1px solid; BORDER-TOP: rgb(128,128,128) 1px solid; BORDER-RIGHT: rgb(128,128,128) 1px solid } B.SpecialTxt { COLOR: #003399; FONT-FAMILY: Verdana; FONT-SIZE: 13pt; FONT-WEIGHT: normal } P.StatusFailure { COLOR: Red; FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-STYLE: Normal; FONT-WEIGHT: Bold } </STYLE>
Hover Manipulation
style type="text/css"> * { margin: 0; padding: 0 } body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #ffffff; } p { margin-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: White; } h2 { text-align: center; font-weight: bold; } h3 { color: White; font-size: 14px; font-weight: bold; font-style: italic; } h4 { color: Black; font-size: 14px; font-weight: normal; } p.CJoffset10 { margin-left: 10px; } #CIoffset10 { margin-left: 10px; } #page { width: auto; min-height: 450px; margin: 0 auto 0 auto; padding: 0px; background-color: #FFFFFF; color: #1A1718; text-align: center; } #container { margin: 0 auto; min-height: 450px; width: auto; text-align: left; } #header { height: 170px; background-position: 100% 0; background-repeat: no-repeat; z-index: 50; } #header #front { background-position: 100% 0; background-repeat: no-repeat; z-index: 50; } #header #logo { position: relative; top: 30px; left: 20px; float: left } #header #slogan { position: relative; top: 80px; font-size: 20px; font-weight: bold; font-style: italic; float: right } #subheader { width: 100%; background-color: #adc7d5; padding: 15px; padding-left: 0px; padding-right: 0px; } #subheader #menu { position: relative; float: left } #subheader p { color: #1A1718; margin-left: 10px; } #greenstrip { width: 100%; background-color: #008542; padding: 15px; padding-left: 0px; padding-right: 0px; } #bannerimages { width: 100%; text-align: center; white-space: nowrap; background-color: #adc7d5; } #bannerimages img { } #bannerimages #inner { width: auto; min-height: 50px; border-top: solid 3px white; border-bottom: solid 3px white; margin: 0 auto 0 auto; text-align: center; } #content { width: 100%; background-color: #4386a1; color: White; min-height: 300px; padding: 15px; padding-left: 0px; padding-right: 0px; } #skipNav { display: none } /* --NAVIGATION */ #nav, #nav ul { list-style: none; line-height: 1em; padding: 0; border: solid white; border-width: 0; margin: 0; } #nav a { display: block; width: 7em; color: white; text-decoration: none; padding: 0.25em 0.5em; text-transform: uppercase; text-align: center } * html #nav a { width: 8em } #nav li { background-color: red; float: left; padding: 0; width: 8em; margin: 2px; } #nav li ul { position: absolute; left: -999em; height: auto; width: 8.0em; w\idth: 7.8em; font-weight: normal; border-width: 0em; margin: 0 0.1em; } #nav li li { float: left; padding-right: 0em; width: 7.8em; margin: 0; text-align: left } #nav li ul a { width: 8em; w\idth: 7em; text-align: left; } #nav il ul ul { margin: -1.75em 0 0 3em; } #nav li:hover ul, #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { background: #ffcc00; } /* --CLASSES */ .fullBorder { border: solid 3px white } .rightBorder { border-right: solid 43px white } .items td { padding-right: 15px; padding-bottom: 15px } .items-centered { margin: 0 auto 0 auto; text-align: center; } .items-centered td { padding-bottom: 15px; } .items-centered td p { width: 300px; text-align: center; margin: 0 auto 0 auto } </style>
<script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); var sfhx = " sfhover"; var sfhb = " sfhover\\b"; for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover = function() { this.className += sfhx; } sfEls[i].onmouseout = function() { this.className = this.className.replace(new RegExp(sfhb), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script>