/* top.css */
/* Tip - For style sheets, use the property names defined in CCS1 (Cascading Style Sheets, level 1) and avoid the HTML Extension property names used in Hot Metal */
/* Default text style */
p {
font-family: Arial, Helvetica;
font-size: 10pt;
}
/* Top Menu bar specified in Top.htm */
/* Color scheme from www.mountainviewtennis.net website */
/*
chartreuse #B0BC1F;
*/
/* Top Header CSS Style Sheet */
/* Note that bgcolor is not defined in CCS1 but background-color is */
/* Body ID Selectors - Not using any */
/* Classes */
/* --------------- Home Page.html ------------------------ */
/* ------------------ Top.html ----------------------------*/
#top_header table.TITLE_BLOCK {
/* width:980px; */
width:1100px;
/* height:70px; */
height:70px;
background-color: #7BBC6B /* Mid Green */
/* OLD Color (2012) #B0BC1F; chartreuss */
}
#top_header table.TITLE_BLOCK font.TITLE_TEXT {
color: black;
font-size: 22pt;
font-weight:bolder;
vertical-align: middle;
text-decoration:underline;
}
#top_header table.TOP_MENU { /* Top Menu Bar */
width:980px;
/* height:40px; */
height:40px;
background-color: black; /* black */
font-size: 12pt;
font-weight: bold;
font-variant: normal;
font-style: normal;
vertical-align: middle;
text-align: center;
line-height: 16pt;
color:white; /* a default menu item that isn't highlighted yet */
}
/* Colors for general links: Make all links blue, visited links gray.
Make hovered links red with yellow background */
#left_content A:link { color: black; }
#left_content A:visited {color: black;}
#left_content A:active {color: black;} /* Don't know if this works */
#left_content A:hover {color: red; background : yellow; }
#right_content A:link { color: black; }
#right_content A:visited {color: black;}
#right_content A:active {color: black;} /* Don't know if this works */
#right_content A:hover {color: red; background : yellow; }
/* Class for featured larger menu item */
A.LARGE_ITEM FONT { /* Example of a Contextual Selector: A & FONT */
font-size: 14pt;
color: white;
}
table.TOP_MENU A.SPEC_HIGHLIGHT {
font-size: 14pt;
}
A.LARGE_ITEM:hover FONT {color: red; }
A.LARGE_ITEM:hover {background : yellow; }
/* Top Menu Bar link colors - Puesdo-classes (e.g., link, visited, hover)
We are using a Contextual Selector: "TABLE.TOP_MENU A"
that refers to anchors in a class of tables */
/* colors for high lighted menu items with anchors */
table.TOP_MENU A:link {color: white; }
table.TOP_MENU A:visited {color: white; }
table.TOP_MENU A:hover {color: red; background: yellow; }
/* colors for special high lighted menu items with anchors
- change back to normal highlight after entry closes */
table.TOP_MENU A.SPEC_HIGHLIGHT:link {color: yellow; }
table.TOP_MENU A.SPEC_HIGHLIGHT:visited {color: yellow; }
table.TOP_MENU A.SPEC_HIGHLIGHT:hover {color: red; background: yellow; }
A._LINK { /* general links except for home page */
color: blue;
font-weight:bold;
}
A._LINK:hover {color:blue; background:yellow; }
A._TOC:link { color:blue;} /* Table of Content on Entry Info & Cuesta Page */
A._TOC:visited { color:blue; }
A._TOC:hover { background:yellow; }
/* -------------------------------------------------------------------------------------------
----------------- Beginning of CSS Syntax -----------------------------
----------------------------------------------------------------------------------------------
This information can be found by doing a google search for "css1 specification".
It is included here as a quick reference.
CSS Syntax
----------------
A style sheet is made up of style rules that tell a browser how to present a document.
Each rule is made up of a selector -- Usually an HTML element such as BODY, P or I -- and the style to be applied to the selector.
The syntax rules are as follows:
Selector { property: value }
To assign multiple values to a property
selector { property: value, value }
Selectors
-------------
Any HTML element can be a CSS selector. The selector is simply the element that is linked to a particular style. For example, the selector in
P { text-indent: 3em }
is P.
Class Selectors
---------------------
A simple selector can have different classes, thus allowing the same element to have different styles. For example, you might want to have paragraphs be different colors.
P.red { color:red }
P.blue { color:blue }
A class can be used as shown below.
Only one class is allowed per selector
Classes may also be defined without an associated element.
.note { font-size: small }
in this case .note may be used with any element.
ID Selectors
-----------------
ID Selectors are individually assigned for the purpose of defining on a per-element basis.
#red_parag { color:red }
This would be referenced in the following manner:
this text would be red
Contextual Selectors
----------------------------
Contextual selectors are merely strings of two or more simple selectors separated by a white space.
P I { color:blue }
This rules says that italicized text inside a paragraph should be blue; italicized text in a heading would be unaffected.
Grouping
------------
Selectors can be grouped together, to decrease repetitious statements. For example all the H1 and H2 in a document could be given the same declarations.
H1, H2 { color: green }
Inheritance
---------------
Virtually all selectors which are nested within selectors will inherit the property values to the outer selector unless otherwise modified.
Puesdo-classes and Puesdo-elements
---------------------
Puesdo-classes and Puesdo-elements are special classes and elements that are automatically recognized by the browser. Puesdo-classes distinguish among different element types (e.g., visited links and active links). Puesdo-elements refer to sub-parts of elements, such as the first letter of a paragraph.
selector:puesdo-class { property: value }
selector:puesdo-element { property: value }
class.selector:puesdo-class { property: value }
class.selector:puesdo-element { property: value }
--------- End of CSS Syntax -------------------------------------
*/