CSS Examples

From PeformIQ Upgrade
Revision as of 09:45, 21 February 2008 by PeterHarding (talk | contribs)
Jump to navigation Jump to search

Mail

<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>
Retrieved from "https://performiq.com/kb/index.php?title=CSS_Examples&oldid=1418"