# Style Sheet Guide

Modifying the style sheet allows you to change the colors and fonts of application elements such as the header, the footer, and the main body. There are a few style sheets that are installed with Ripplestone, but you can create your own or modify the existing style sheets. The style sheets are located in the Ripplestone/Style directory.

## Overall Size Section

The following element in the style sheet controls the size of the application in the browser.

/* Controls the overall size of the application*/
div.MainSize
{ width: 770;
height:100%;
text-align:center;
border-style: solid;
border-width: 0px;
}

## Header Section

The following element in the style sheet controls the appearance of the header.

/* The company name portion of the header */
.CompanyName
{
font-weight: bold;
font-size: 1.7em;
color: white;
text-align: center;
background-color:white;
background-image: url(HeaderBackgroundBlue.gif);
background-repeat: no-repeat;
height:50px;
border-color: #111111;
border-width: 0px;
border-style:solid;
}

## User Defined Links Section

The following element in the style sheet controls the appearance of the user link bar.

/* The user defined links in the header */
.Links
{
font-weight: bold;
font-size: 1em;
background-color: #000080;
}
a.UserLink
{
font-size: .8em;
color: white;
font-weight: bold;
}
a.UserLink:hover
{
color: #ffff00;
}

## Title Section

The following element in the style sheet controls the appearance of most titles and headings.

/* Used like an H1 on all admin forms*/
.Title
{
font-size: 1.25em;
font-weight: bold;
border-style: solid;
border-width: 0px;
margin: 0px;
padding: 5px;
}

## Main Body Section

The following element in the style sheet controls the appearance of the main body of the application

/*Creates area between header and footer. On every page.*/
Table.MainContentBox
{
border-color: #111111;
border-width: 1px;
border-style:solid;
background-image: url(images/toptxtr.jpg);
height:80%;
width:100%;
}

## Footer Section

The following element in the style sheet controls the appearance of the footer located at the bottom of each page.

/*Used for page footer on every page.*/
Table.PageFooter
{
color:white;
font-size: .75em;
font-family: Times New Roman;
background-color:white;
background-image: url(FooterBackgroundBlue.gif);
background-repeat: no-repeat;
height: 22px;
border-color: #111111;
border-width: 0px;
border-style:solid;
} a.PageFooter
{
color:white;
font-size: 1em;
font-family: Times New Roman;
}
a.PageFooter:hover
{
color: #ffff00;
}

## Sign On Page Image

The following element in the style sheet controls the image that appears next to the form elements for user id and password.

/*Image on sign on page*/
.SignOnLogo
{
background-image: url(icbreports.jpg);
background-repeat: no-repeat;
height:137px;
width: 200px;
}

## Other Elements - Navigation bar, column headings, alternating row colors.

## Navigation Bar Section

The following elements in the style sheet controls the appearance of the navigation bar that is on all pages except the sign on form.

/* The link trail that contains the Ripplestone links used for navigation on every page except signon.aspx */
div.nav
{
margin: 10px;
margin-top: 15px;
padding: 0px;
width: 99%;
background-color: #e5e5e5;
border-color:black;
border-width: 1px;
border-style:solid;
height:28px;
vertical-align:middle;
padding-bottom:2px;
padding-top:2px;
}
/*Text for non links in menu system.*/
span.nav
{
font-family: Arial;
font-size: .8em;
font-weight: normal;
}
/*Menu links*/
a.nav
{
text-decoration: underline;
color: blue;
font-family: Arial;
font-size: .8em;
font-weight: normal;
}
a.nav:hover
{
color: red;
}

## Column Headings Section

The following elements in the style sheet controls the appearance of the column headings used on tables of data.

/* A column heading in tables */
.Label
{
font-size: 1em;
font-weight: bold;
color: Black;
}

## Alternating Rows in tables

The following elements in the style sheet controls the appearance of alternating rows in tables of data.

/*For tables that use alternating colors for each row*/
tr.FirstRowColor
{
background-color:#F0F0FF;
}
tr.AlternatingRowColor
{
background-color:#FFFFE8;
}

## Labels for data entry form elements

The following elements in the style sheet controls the appearance of labels used on data entry forms.

/*Lable for data entry field on all forms*/
.FormLabel
{
font-size: 1em;
font-weight: bold;
color: Navy;
}
/*Read Only for data entry form*/
.ReadOnly
{
background-color: #EFEFEF;
}

## Main reports page and report administration page

The following elements in the style sheet controls the appearance of the main page used to run reports.

/* Following elements on PublishedReportByFolder.aspx and ReportAdministration.aspx */
.folder
{
border-style: solid;
border-width: 1px;
border-color: black;
}
.FolderHeadings
{
text-align:center;
font-weight: bold;
background-image: url(FolderListTopBlue.gif);
background-repeat: no-repeat;
height: 25px;
}
table.report
{
margin-left:20px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.reportbox
{ border-style: solid;
border-width: 1px;
border-color: black;
}
.ReportHeadings
{
text-align:center;
font-weight: bold;
background-image: url(ReportListCenterBlue.gif);
background-repeat: no-repeat;
height: 25px;br> }
a.FolderList
{
text-decoration: underline;
color: blue;
font-family: Arial;
font-size: .9em;
font-weight: normal;
}
a.FolderList:hover
{
color: red;
}
/*Link to run report*/
A.Report
{
text-decoration: underline;
color: blue;
font-weight: bold;
font-family: Times;
font-size: 1em;
}
/*Link to scheduled output and history*/
A.schedule
{
text-decoration: underline;
color: blue;
font-weight: normal;
font-size: .8em;
}