Altered Arcs.css file listing

Annotated Altered CSS file for Arcs.css

The changed properties are shown in red. Screenshots showing the effects of the change are shown inline with commentary in green. A complete screenshot of the entire altered page is here. 

  
/* Combined style sheet for the index pages and the slide pages. */
/* Style for all bodies and to control the margin on top. */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 16px;
	color: #000000;
	margin: 0px;
	padding: 0px;	
	background-color: #F0F0F0;
}
The ‘body’ selector was unchanged. 
html {
	SCROLLBAR-FACE-COLOR: #ACC2E3; 
	SCROLLBAR-HIGHLIGHT-COLOR: #F7F7F7; 
	SCROLLBAR-SHADOW-COLOR: #F7F7F7; 
	SCROLLBAR-3DLIGHT-COLOR: #ACC2E3; 
	SCROLLBAR-ARROW-COLOR:#F7F7F7; 
	SCROLLBAR-TRACK-COLOR:#F7F7F7; 
	SCROLLBAR-DARKSHADOW-COLOR: #ACC2E3; 
	SCROLLBAR-BASE-COLOR: #F7F7F7;
	overflow-x: auto;
}
The ‘html’ selector was unchanged. 

/* Style for the Top bar */
.topbar {
	background-color: #6595D6;
	background-image: url(../topbars/blue/topbarnew.gif)
	background-repeat: repeat-x;
	height: 29px;
}

The ‘topbar’ selector has been changed to give a new background-image and a new height to match. 
/* Style for the Top ruler */
.topruler {
	background-image: url(arcs/rule_new.gif);
	background-position: center;
	background-repeat: no-repeat;
	height: 0px;
}

The ‘topruler’ selector has been changed to give a new background-image. 
/* Style for the Bottom bar */
.bottomruler {
	background-image: url(Arcs/rule.gif);
	background-position: center;
	background-repeat: no-repeat;
	height: 10px;
}
The ‘bottomruler’ selector has not been changed, but it has been enabled by removing the ‘/*’ and ‘*/’ comment delimiters. 
/* Style for the Image/Folder Path Information */
.bpppath {
	font-size: 12px;
	font-weight: bold;
	color:#000000;
}

The ‘bpppath’ selector has its color changed. 
/* Style for the Image/Folder Index Information */
.bppindex {
	color: #FFFF00;
}

The ‘bppindex’ selector has its color changed. 
/* Style for the Header */
.bppheader {
	color: #000000;
}
The ‘bppheader’ selector was unchanged. 
/* Style for the Footer */
.bppfooter {
	color: #000000;
  font-size: 10px;
}

The ‘bppfooter’ selector was unchanged. 

/* Style for the Page Bottom Shadow */
.shadow {
	visibility: hidden;
}
The ‘shadow’ selector was changed so that the page shadow is omitted. 
/* Style for the page body */
.index-pagebody, .slide-pagebody, .original-slide-pagebody {
	background-image: url(arcs/background_new.jpg);
	padding: 10px;
}

The ‘pagebody’ selectors have their background-image property changed to background-image:url(arcs/background_new.jpg). An ark was added (sorry, I could’t resist!). 
/* Style for the Image Comment */
.comment {
	color: #00CC33;
	font-size: 10px;
	text-decoration: underline overline;
}

The ‘comment’ selector has its color changed and a text-decoration property added. 
/* Style for the Image comment header */
.commentheader {
	vertical-align: top;
	font-weight: bold;
	color: black;
	margin-right: 10px;
}

/* Style for any note/comment */
.note {
	color: #0000CC;
	font-size: 14px;
	font-style: italic;
}

The ‘note’ selector has its color and font-size changed and the font-style property added to make the note italic. 
/* Style for help-tips statusbar */
.statusbar1, .statusbar2 {
  color: red;
	font-size: 10px;
	text-align: center;
	margin-top: 10px;
	position:relative;
	top: -7px;
	left: 100px;
	border: 1px solid #666666;
	background-color:#FAFAFA;
}
The ‘statusbar’ selector had its color changed, a border and background color added, and its position changed. ‘Position:relative;’ means that the displayed position is relative to where it would otherwise appear; ‘top: -7px; left: 100px;’ shifts the statusbar up 7 pixels and to the right 100 pixels. 
/* Style for photographic meta information */	
.photometainfo {
	position:absolute;
	left:75px;
	top:100px;
	z-index:1;
	background-color: #FFFFCC;
	layer-background-color: #FFFFFF;
	color: #999999;
	visibility: hidden;
	border: 1px dashed #000000;
	padding: 5px 5px 5px 5px;
}
The ‘photometainfo’ selector was unchanged. 
.metainfo-header {
	font-weight: bold;
}
.metainfo-name {
}
.metainfo-value {
	font-style: italic;
}
The ‘metainfo-header’. ‘metainfo-name’, and ‘metainfo-value’ selectors were unchanged. 
/* Style for help tips */	
.help {
	position: absolute;
	right: 40px;
	top: 80px;
	z-index: 1;
	background-color: #FFFFCC;
	layer-background-color: #FFFFFF;
	color: #999999;
	visibility: hidden;
	border: 1px dashed #000000;
	padding: 5px 5px 5px 5px;
}
The ‘help’ selector was unchanged. 
.small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #990099;
}


The ‘small’ selector has a color property added to change the text color. Note that changing the appearance of a drop-down box may not work on all browsers. 

/* Style for server side error messages */
.errorbox { 
	background-color: #fcc;
	border: 1px solid #c00;
	padding: 5px;
	margin: 10px 0px 10px 0px;
}
The ‘errorbox’ selector was unchanged. 
.errormessage {
	color: #c00;
}
The ‘errormessage’ selector was unchanged. 
/* Style for remarks*/
.remarksheader {
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	padding: 3px 0px 2px 0px;
	margin: 8px 4px 2px 0px;
	color: #003366;
	border-bottom: 1px solid #3c78b5;
}
The ‘remarksheader’ selector was unchanged. 
.remarksbody {
	width: 80%;
	visibility: hidden;
	display: none;
}
The ‘remarksbody’ selector was unchanged. 
.remarksinput {
	border: 1px solid #ddd;
	padding: 10px;
	margin: 5px 1px 5px 1px;
	background: #f0f0f0;
	width: 70%;
}
The ‘remarksinput’ selector was unchanged. 
.remarksadmin {
	border: 1px dashed #3c78b5;
	padding: 10px;
	margin: 5px 0px 10px 0px;
	background: #f0f0f0;
}
The ‘remarksadmin’ selector was unchanged. 
.remarksadminheader {
	margin: 0px 20px 0px 0px;
	font-weight: bold;
	vertical-align: super;
}
The ‘remarksadminheader’ selector was unchanged. 
.remarkbox {
	padding: 5px 10px 5px 10px;
	margin: 5px 0px 5px 0px;
	border: 1px #bbb solid;
}
The ‘remarkbox’ selector was unchanged. 
.remarkblock {
	margin: 0px 0px 10px 0px;
	color: #000000;
}
The ‘remarkblock’ was unchanged. 
.remarksource {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666666;
 	width: 98%;
}
The ‘remarksource’ was unchanged. 
.remarkstatusbox {
	border: 1px dashed red;
	background-color: #f0f0f0;
	font-size: 11px;
	font-style: italic;
	padding: 10px 5px 10px 5px;
	margin: 5px 0px 5px 0px;
  }
The ‘remarkstatusbox’ selector was unchanged. 
/* Custom link styles */
a:active {
	text-decoration: none;
	color: #000000;
}

a:visited {
	text-decoration: none;
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: red;
}

a:link {
	text-decoration: none;
	color: #000000;
}
The ‘a:’ selectors were unchanged. 
a.note:active {
	text-decoration: none;
	color: #000000;
}

a.note:visited {
	text-decoration: none;
	color: #000000;
}

a.note:hover {
	text-decoration: none;
	color: red;
}

a.note:link {
	text-decoration: none;
	color: #000000;
}
The ‘a:note’ selectors, controlling the appearance of the hyperlinks used within a section with the ‘note’ class, are unchanged (see explanation of ‘note’ selector above). 
a.path:active {
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	color: #663300;
}

a.path:visited {
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	color: #663300;
}

a.path:hover {
	text-decoration: underline;
	font-size: 14px;
	font-weight: bold;
	color: #336600;
}

a.path:link {
	text-decoration: overline;
	font-size: 14px;
	font-weight: bold;
	color: #663300;
}

The ‘a:path’ selectors had their font-size and color changed; the text-decoration properties were also changed on two of the ‘a:path’ selectors.

The complete screenshot of the entire altered page contains a reference to the footer selector which controls the appearance of links in the footer sections. The Arcs style does not define this selector, so links contained in the footer take their appearance from a:active, a:visited, a:hover, a:link.