The following Cascading Style Sheets (CSS) have been created and published at http://www.sju.edu/css.

1) global.css:

body, div, p, blockquote, ol, ul, li, dl, dt, dd, th, td, form {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

This defines the general default properties of all the web pages on our website. All the general tags including body, div etc take the above declared font family and size. It means any text within these tags would use this font family and size unless they are overriden by a locally defined style.

body {
margin-top: 8px;
color: black;
background-color: #fff;
background-image: url(/i/light_pinstripe.gif);
}

These are the default body tag properties for all the webpages on our site. The background image is the pinstripe that we see on every page of our website.

a {
color: #900;
}

a:visited {
color: #636;
}

The "a" tag is used to denote the colors for the hyperlinks. All hyperlinks unless locally defined have the active links taking #900 color and visited links would be of the color #636 which are our standard colors for active and visited links.

h1 {
font-weight: bold;
font-size: 16px;
}

h2 {
font-weight: bold;
font-size: 14px;
}

h3 {
font-weight: normal;
font-size: 14px;
}

h4 {
font-weight: bold;
font-size: 12px;
}

h5 {
font-weight: bold;
font-size: 12px;
text-align: center;
}
h6 {
font-weight: bold;
font-size: 12px;
text-align: left;
color:#660000;
}

"h" stands for heading. We have deifned 6 different heading tags with different font siozes and in some instances, colors and alignment. You can directly reference any of these 6 tags according to your size requirements on your webpages. You can also define your own heading tags in your local style sheets.

.dnp {
/* DO NOT PUBLISH -- for information that we need others to look
AT BEFORE BEFORE BEFORE BEFORE Publication
So keep this BIG AND BOLD - preferably RED */
border: 2px red dotted;
}

This tag is useful if you are making changes to a webpage and need approval of your head. The text that needs approval would carry a border of 2 pixels wide around it making it easier to identify for person who would be approving the changes.

#top_navbar {
color: #fc6;
background-color: #fc6;
}

The top navigation bar where the drop down resides carry these properties. The "top_navbar" is the table id where the drop down is located.

td.flank {
color: #fc6;
background-color: #933;
}

.flank a:link, .flank a:visited, a.breadcrumb, a.flanklink {
color: #fff;
background-color: #933;
}

.flank a:hover {
color: #fc6;
background-color: #933;
text-decoration: none;
}

"Flank" is a style name that we gave for the Search options table cell at the bottom of the Homepage as well as the breadcrumb that we find at the bottom of every page on our website

#trunk {
background-color: #fff;
color: #333;
border-left: 1px black solid;
border-right: 1px black solid;
}

#dropdowntable {
color: #000;
background-color: #933;
padding: 0px;
}

#dropdownrow {
color: #000;
background-color: #933;
}

#sidebar {
color: #000;
background-color: #ccc;
}
#togglebar {
color: #000;
background-color: #ccc;
}.

The "td.flank" associates the table cell with the flank styles properties. The background color of the cell is #933 .

Also, The hyperlink colors for the text in this table cell are defined in the next two sections below the cell-style definition.

The #tableidname identifies the style that a [particular table carries in our website. For example, "#trunk" corresponds to the central portion of our webpage in between the drop down menu and serach or breadcrumb table. The trunk has a white background ( #fff is the code for white color) , the text within the table has a default greyish font ( #333) and it has a left and right border of 1 pixel wide which we can clearly see on the website.

For any table you create on your web page, you can globally define the syles of that table as we see here.

"#dropdowntable" corresponds to the drop down menu table which we are not using now on our website.

#sidebar corresponds to the side gray table that we have on every core page of our website. This table holdsthe image and the " The Ex perience is Everything" section on the website.

#togglebar carries the properties for the toggle navigation button.

.sidebartext, .sidebartext p {
font-size: 10px;
padding: 8px;
}

.content {
padding: 8px;
}

.content P.subtitle {
font-weight: bold;
}

.content P.subtext {
margin-left: 7px;
}

.dykbox {
border: 4px #600 double;
color:#000;
background-color: #fff;
valign:top;
}

.dyktitle {
border-bottom: 1px #600 solid;
border-right: 1px #600 solid;
font-size: 10px;
font-weight: bold;
text-transform: capitalize;
color:#990000;
vertical-align:text-top;
letter-spacing: 1px;
background-color: #ffcc66 ;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}

p.dykpoint {
margin-left: 15px;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 3px;
padding-bottom: 3px;
}

All the above defined style properties are for the side gray bar below the image on every core webpage of our site.

.sidebartext, .sidebartext p {
font-size: 10px;
padding: 8px;
}
holds the default properties for any text within or out of a paragraph of this table.

.content {
padding: 8px;
}

.content P.subtitle {
font-weight: bold;
}

.content P.subtext {
margin-left: 7px;
}

The content style tags are particular side bar text properties which over ride the default properties defined in the general table properties above.

.dykbox {
border: 4px #600 double;
color:#000;
background-color: #fff;
valign:top;
}

.dyktitle {
border-bottom: 1px #600 solid;
border-right: 1px #600 solid;
font-size: 10px;
font-weight: bold;
text-transform: capitalize;
color:#990000;
vertical-align:text-top;
letter-spacing: 1px;
background-color: #ffcc66 ;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}

p.dykpoint {
margin-left: 15px;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 3px;
padding-bottom: 3px;
}

dykbox is the style associated the the entire sidebar text in particular. dykbox holds the table properties like the border, color, background color and the alignment of the text withon that table cell.

dyktitle deals with the " The Experience iws Everything " inparticular. This deifnes the color of this text, the background color, font weight, family, size, alignment as wll as positioning of the text which is controlled by align and padding specifications.

dykpoint corresponds to all the text within a paragraph below the title.

#pgtitle {
text-align: left;
font-size: 20px;
padding: 0px;
margin: 0px;
}
#pgucommtitle {
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 0px;
margin: 0px;
color:#993333;
}

pgtitle is the title of the page that we see on every core page of the website. For example, When we click on the About Us" Home, the page has a title at the top below the drop down menu which says About SJU Home". This style controls the size and positioning of that text.

pgucommtitle defines the UCOMM page title properties.

.footercontent {
padding: 1px;
}

address.footer {
font-style: normal;
font-weight: bold;
}

.sjufoot {
color: #000;
font-size: 10px;
font-weight: bold;
}

The footercontent carries the footer text properties at the bottom of every page.
address.footer defines the address text at the botttom of each page on our website.
sjufoot is the general properties that this footer cell carries. It defines the color that the text with in the footer cell has ( #000, black), size of the text ( 10px) as well as the weight of the text ( bold).

#deptnamebarxx {
color: #fff;
background-color: #933;
padding: 0px;
}

.deptnameinbar {
font-weight: bold;
}

.dropdowntext a:link, .dropdowntext a:visited, a.ddtlink {
color: #fff;
background-color: #933;
}

.dropdowntext a:hover {
color: #fc6;
text-decoration: none;
}

The deptnameinbar and deptnamebarxx define the color, background color and font weight of the text that we see in design 1 of our departmental templates. This replaces the drop down menu of our Sjuw ebsite.

The drop downtext link definitions are for the text links on the same bar of the departmental templates where we have departmental home and conttact Us links as well as JjU directories, index and search links.

.depttoc p {
font-size: 10px;
padding: 0px;
text-indent: -10px;
margin-left: 10px;
}

p.depttoctitle {
color: #933;
font-size: 14px !important;
font-weight: bold;
text-align: center;
}

.depttocsect {
font-weight: bold;
}

.depthptoc {

}

.depthpsect {
font-weight: bold;
}

The above styles deifne the properties for the Department News and Information text as well as all the text that goes in the department template side bar.

p.depttoctitle defines the color as well as size and weight of the text in the side bar od the departmental pages.

campus_map.css

This style sheet is basically used for defining styles with in the Campus Map page of our website .

.cm-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #990000;
}

.cm-text defines the properties for all the text associated with the corresponding numbers on the map page.
for example below the map, we have the building names and numbers like
37 Undergraduate Admissions office - Bronstien Hall . " Undergraduate Admissions office - Bronstien Hall " properties are defined by the style above.

.cm-box {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
height: 15px;
text-align: center;
vertical-align: middle;
font-weight: bold;
width: 15px;
background-color: #990000;
}

The properties for the number 37 from " 37 Undergraduate Admissions office - Bronstien Hall " are defined by the style above.

.cm-instruct {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
vertical-align: middle;
margin: 5px;
}

General text properties for the building names.

.cm-subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-transform: uppercase;

}

coreglobal_sophisto.css

This CSS file is basically used to define the form properties on the SJU homepage. The form properties are for the search boxes for Facult/Staff Search as well as general search text box that we have at the bottom of our SJU Homepage above the footer.

form {
border: none;
margin: 2px 0px 10px 0px;
}

form.sjusearch {
border: none;
margin: 0;
padding: 0;
}

form.sjusearch input {
font-size: 10px;
padding: 1px 2px 1px 2px;
margin: 0px 0px 1px 0px;
border: 1px #ccc solid;
color: #fff;
background-color: #666;
margin-bottom: 1px ! important; /* IE bug fix */
}

form.sjusearch input:focus {
color: #000;
background-color: #fff;
}

form and form.sjusearch define the cell properties. The text margins are specified in the above definitions.

The form.sjusearch input defines the format and style in which the text within the "typable text box" can be typed by the visitor. If you type some text within these search boxes and look cosely, they have a background color and the style is a little different. This sia ll defines in the above two style definitions, form.sjusearch input and form.sjusearch input:focus.

This style definition defines the subtitle stating what the buildings are classified into. For example "Student Life"

.doclocation {
display: none;
font-size: smaller;
font-style: italic;
}

coreglobal.css

This CSS file inherits all the coreglobal_sophisto properties.

@import "coreglobal_sophisto.css";

mysju.css

This CSS file defines the properties of the table that houses the MySJu search box and other text in the low graphics SJU Homepage. http://www.sju.edu/index-lg.html.

We no longer use this style on our website.

print.css

This style sheet helps us customize the print page option on our website. While printing a webpage, more often that not, people are basically interested in the text and we can live with no images, no fancy stuff and just plain text.

This file just enables us to do the same.

/* This is a PRINT StyleSheet, for those browsers that understand them */

body {
color: #000;
background: #fff;
}

body, div, p, blockquote, ol, ul, li, dl, dt, dd, th, td, form {
font-family: 'Times New Roman', times, serif;
font-size: 12pt;
}

a:link {
color: #000;
background: #fff;
text-decoration: underline;
}

a:visited {
color: #333;
background: #fff;
text-decoration: underline;
}

All the above properties basically define the general page properties . As you might see, all the tags carry a slightly different default font because they look better in print than the one we use for the web. Also, the link colors are changed.

table#masthead, table#trunk, table#footertable {
width: 95% !important;
}

This enables the above defined tables to shrink to 95% of thier width so that they can come in one page.

#top_navbar, #sidebar, table#top_navbar, table#dropdowntable, table#bottomstriptable, p#permlinks {
display: none;
}

All the above mentioned tables are fancy stuff that we don't ned to see in a print version. By saying Display: none we are eliminating them from getting printed, thus reducing the clutter on the page and focusing solely on the contents of the page.

.relbox {
display: none;
}

table#trunk, table#masthead, {
border: 1px;
}

table#footertable {
border-bottom: 2px; }

All the above define the same style for print page option.

.doclocation {
margin-left: 3em;
margin-right: 3em;
text-align: center;
display: block;
border-top: 1px black solid;
font-size: 12pt;
font-weight: bold;
}

.doclocation defines the positioning of the text on the printed pageas well as the font weight and colors and size of the text on this page.

Sjuhomepage.css

This page basically defines the style of the text that displays the Hawk Hill Today section of our Homepage.

#newsbox {
/* This refers to the entire news box, including title */
}

#newsboxcontent {
padding-left: 3px;
}

The above style deifnes the left margin of Hawk Hill Today text section.

.newstext {
font-size: 11px;
}

This defines the font size of the text in this section.

#sjunews {
font-size: 14px;

}

Not used anymore.

span.qltitle {
color: #900;
font-size: 12px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 2px;
}

This styles defines how Quick links look on oue SJU Homepage. The quicklinks can be seen at the bottom right of our SJu Homepage above the footer. The style, size , color weight, positioning of the quick links section is defined in the 2 style definitions below.

#quicklinks SELECT,OPTION {
font-size: 10px;
}

#sjunews {
/* This is simply our phrase, 'SJU News' and nothing else */
font-size: 16px;
font-weight: bold;
}

span.hpsearchtitle {
font-size: 10px;
color: #900;
font-weight: bold;
}

This is no longer used.

sjuhomepage_sophisto.css

This page basically defines the style of the text that displays the Hawk Hill Today section of our Homepage.

.popdd {
/* "Popular Sites" Drop Down */
display: inline;
float: left;
}

This div class defines how the popular sites are displayed on our core site pages of our website.

.specdd {
/* "Specific Info For" Drop Down */
display: inline;
float: right;
}

Not used anymore.

#quicklinks {
display: block;
/* padding: 3px; */
}

Not used anymore.

/*
.newsboxtitle {
margin-left: -8px;
padding: 3px;
border-top: 1px black solid;
border-left: 10px black solid;
color: #900;
background-color: #eee;
}

This defines the properties of the cell where we have the title " Hawk Hill Today" on our Homepage.

*/
.newsboxcontents {
border-right: 1px black solid;
color: #000;
padding: 2px 1px 2px 1px;
}

This actually defines the postioning as well as the border padding and decorations that go with this cell.

form {
border: none;
margin: 2px 0px 10px 0px;
}

This defines SJU search table cell.

form.hpsearch {
border: none;
margin: 0;
padding: 0;
}

form.hpsearch input, form.hpsearch select {
font-size: 10px;
padding: 1px 2px 1px 2px;
margin: 0px 0px 1px 0px;
border: 1px #000 solid;
color: #000;
background-color: #fff;
margin-bottom: 1px ! important; /* IE bug fix */
}

form.hpsearch input:focus {
color: #000;
background-color: #fff;
}

All the above three definitions define the Search table contents, style as well as positioning of the text and search elements present there.

.hpevents {
border: 1px #999 solid;
background-color: #eee;
}

.hpevents .eventstitle {
font-size: 10px;
font-weight: bold;
margin-left: -5px;
padding-left: 5px;
}

.hpeventscontent {
font-size: 10px;
padding: 4px;
}

.hpeventsimg {
float: left;
}

All the above .hpevents styles used to define the style and properties of the news and events section of the Low graphics Homepage of our website.

.imgpromo {
display: table-cell;
border: 1px #999 solid;
padding: 5px;
background-color: #ddd;
}

.imgpromotitle {
padding: 3px 3px 3px 3px;
background-color: #ddd;
color: #990000;
font-weight: bold;
text-align: center;
}

All the above .imgpromo styles are no longer used on our website.

.quicklinkarea {
height: 30px;
background-color: #ccc;
margin-top: 10px;
border-left: 1px #999 solid;
border-bottom: 1px #999 solid;
border-right: 1px #999 solid;
padding: 5px;
}

The above .quicklinkarea style is no longer used on our website.

.promoandevents {
display: block;
padding: 10px;
background-color: #fcc;
border: 1px yellow solid;
}

The above .promoandeventsuicklinkarea style is used to define the positioning of the new and events tag on the low graphics home page of our website.

sophisto.css

This file will contain all the CSS that we cannot let NS4 see as its poor/buggy implementation of CSS will cause all sorts of havoc we don't want. That is the reason we import this this file with an:@import "file.css";
directive on our webpages.

#masthead {
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 100px;
}

Masthead is the table id for our masthead. This sytle defines the height and border properties of the masthead table.

#news {

border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 130px;
background-color: #fff;

}

No longer used on our website.

#news1 {

border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 130px;
background-color: #fff;

}

news1 is the table id for our Hawk Hill Today section. This style defines the height and border properties of the news1 table.

#news2 {

border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 125px;
background-image: url(/i/hawk.gif);

}

This is no longer used on our website.

#information {
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 15px;
}

This is no longer used on our website.

#top_navbar {
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
height: 12px;
}

top_navbar is the table id for our navigation menu. This style defines the height and border properties of the navigation bar table.

#trunk {
border-top: 1px black solid;
}
Trunk is the table id for our central portion of our webpage. This style defines the height and border properties of the masthead table.

#mysju {
border-left: 1px black solid;
height:130px;
}
Mysju is the table id for our Mysju Table that is visible at the bottom of our homepage.. This sytle defines the height and border properties of the masthead table.

#dropdowntable {
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;

height: 18px;
}

This style is no longer used on our website.

#emergency {

border-left: 1px black solid;
border-right: 1px black solid;
height: 16px;
text-align: left;
color: #fff;
background-color: #990000;
padding: 5px;
}

This style is basicaly used for any important announcements that we need to make on our Homepage. This portion is the Featured events portion housed next to the Hawk Hill today section on our homepage. We used it for Hurricane Info recently on our homepage.

td.dropdowntext {
padding-left: 3px;
padding-right: 3px;
}

.perma:link, .perma:visited {
background-color: #000;
background-image: url(/i/darken.gif);
}

.perma:hover {
color: #fff;
background-color: #933;
background-image: none;
text-decoration: none;
}

All the above three styles are no longer used on our website.

.content .relbox {
width: 150px;
float: right;
display: block;
border: 1px #999 solid;
padding: 5px;
color: #000;
background-color: #eee;
}

.content .relboxtitle {
border-bottom: 1px #999 dashed;
padding-right: 5px;
padding-bottom: 3px;
margin-bottom: 5px;
}

The above two style definitions define how the popular sites box look on most of the coresite web pages of SJU website. The relbox is the style id for the division tag that defines the color, background color, text font,style, weight etc as well as positioning of text and borders on this box.

.content .newsboxtitle {
margin-left: 5px;
padding: 3px;
color: #000;
background-color: #ddd;
}

.content .timelyevent {
text-align: center;
color: #000;
background-color: #cc9;
padding: 10px;
}

The above 2 styles are no longer used on our website.

#bottomstriptable {
border-top: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
}

bottomstriptable is the table id for our search and quicklinks bar of homepage and breadcrumb bar of other core pages. This style defines the height and border properties of this table.

#footertable {
border-top: 1px black solid;
}

#footerrow P {
margin-top: 0px;
margin-bottom: 3px;
}

#footerrow A {
text-decoration: none;
font-weight: bold;
}

#footerrow A:hover {
text-decoration: underline;
}

All the above footer related style definitions correspond to the border and positiong aspect of the text in this cell as well as color of the links in the footer table.

#sidebar {
width: 245px;
background-image: url(/i/spacer.gif);
border-right: 1px #000 solid;
}

This style defines thedefault properties of the side gray bar of our coresite pages.

#togglebar {
border-right: 1px #000 solid;
}

.sidebarcontent p {
font-size: 10px;
}

.sbtext a:hover {
color: #990000;
font-weight: bold;
text-decoration: none;
}

The above CSS styles deinfes the general sidebar text properties.

#example { position: static }

.box
{
border: 1px solid #AAA;
background-color: #F8F6F7;
}

This style is not used on our website anymore.

.top, .bottom
{
position: relative;
left: 1px;
height: 11px;
}

.top { top: -1px }

.bottom { margin-bottom: -1px; top: 1px }

.box > .bottom { top: 0 }

.nw, .ne, .sw, .se
{
width: 11px;
height: 11px;
}

.nw, .sw { float: left; position: relative; left: -2px }

.ne, .se { float: right }

.nw { background: url(border-nw.gif) no-repeat left top }

.ne { background: url(border-ne.gif) no-repeat right top }

.sw { background: url(border-sw.gif) no-repeat left bottom }

.se { background: url(border-se.gif) no-repeat right bottom }

.content { margin: 0 1em }

This entire section defines jump properties to the top of the page and to the bottom of the page.