Customizing Sharepoint Portal Server CSS

Tracking down correct css classes and overriding the right attributes can be very cumbersome. These CSS elements shows how to customize the main elements in the portal.

/* Top Portal Bar */
.ms-banner, .ms-GRHeaderText
{
    font-size: 8pt;
    font-family: verdana;
 text-align: right;
 background-color: #003366;
 color: Blue;
}

/* The Portal Navigation bar */
.ms-phnav1wrapper, ms-navframe
{
 background-image: url();
 /* BACKGROUND-REPEAT: repeat-x; */
 WIDTH: 100%;
 border-bottom: 1px #99adc2 solid;
 border-top: 1px #99adc2 solid;
 background-color: #99adc2;
}

/* The title area frame has a border top with color by default */
Div.ms-titleareaframe
{
    border-top: 3px solid #99adc2;
    background-image: url(/_layouts/images/headcornerp.gif);
    background-repeat: no-repeat;
}

/* The background in the portal search interface */
.ms-sbtable
{
 background-color: #99adc2;
}

/* Override two custom gif's in the search interface (remove "_ow" for originals) */
.ms-sblbcorner
{ 
 background-color: #FFFFFF;
 background-image: url(/_layouts/images/cornerbl_ow.gif);
 background-repeat: no-repeat;
 background-position: right top;
 padding-left: 0px; 
 padding-right: 5px;
 padding-bottom: 4px
}
.ms-sbtopcorner
{ 
 background-color: #FFFFFF;
 background-image: url(/_layouts/images/cornertop_ow.gif);
 background-repeat: no-repeat;
 background-position: left top;
 border-bottom-width: 0px;
}

/* Set custom gradient in the left portal navigation bar */
.ms-navframe, .ms-GRStatusBar
{
 background-image: url(/_layouts/images/vgradp_ow.gif);
 background-color: #FBFBFd;
    BACKGROUND-REPEAT: repeat-y;
}

/* Set custom gradient for the webpart headers */
.ms-WPHeader
{
   background-image: url(/_layouts/images/partgradp_ow.gif);
   background-color: #ffffff;
   BORDER-TOP:  solid 1px #FEE8CA;
}