/* TITLE : main.css DESCRIPTION : STANDARD CASCADING STYLE SHEET TO BE USED FOR ALL SITES BY : TIM MCALLISTER HISTORY: 11/12/2001 (TIM MCALLISTER) Written and Published at the intranet site "\webstandards\main.txt" as a potential standard for all future sites authored by MC2 Studios, Inc. COMMENTS: I THINK THAT THESE WILL COVER MOST OF YOUR BASIC NEEDS. HOWEVER IF YOU FIND THAT YOU NEED TO ADD NEW CLASSES, PLEASE GIVE SPECIAL THOUGHT TO WHETHER OR NOT IT WOULD BE BENEFICIAL TO ADD IT TO THE STANDARD. IF YOU DO ADD ONE PLEASE NOTE THAT I TRIED TO FOLLOW SOME SORT OF "STANDARD" .????hdr : IS THE HEADER INFO FOR THAT PAGE IF IT NEEDS TO BE DIFFERENT FROM THE PAGE HEADER (.hdr) .????text : IS THE PREDOMINANT FONT USED FOR THAT PAGE/SECTION .????link : FOR ANY LINKS IN THAT SECTION AS FAR AS THE "????", PLEASE BE DESCRIPTIVE AND BRIEF THE "STANDARD" STYLE NAMES IN THIS FILE SHOULD NEVER CHANGE UNLESS BY COMMITTEE. */ /* THE FOLLOWING FOUR STYLES ARE THE ONES USED THE MOST THROUGHOUT ANY SITE. THE NAMES SHOULD BE FAIRLY SELF EXPLANATORY BUT I'LL GIVE A BRIEF EXPLAINATION OF EACH: .hdr : THE MAIN HEADER AT THE TOP OF EACH PAGE. AN EXAMPLE WOULD BE "CART VIEW" AT THE TOP OF THE CART VIEW PAGE .subhdr : THE SUBHEADER WOULD BE ANY TEXT THAT WOULD DESCRIBE A SPECIFIC SECTION OF A PAGE ie. "BILLING INFO" & "SHIPPING INFO" ON A CHECKOUT PAGE .text : THIS IS THE STANDARD FONT USED THROUGHOUT THE SITE. ( IF THERE IS A BETTER WAY TO DO THIS ONE, LET US ALL KNOW. .link : FOR ALL LINKS THAT NEED TO BE THE SAME FONT/SIZE AS THE STANDARD FONT (.text) */ .hdr {font-family:verdana,arial,helvetica; font-size:24px; color:#1E0468; font-weight:bold; text-decoration:none; text-transform:uppercase;} .hdr2 {font-family:verdana,arial,helvetica; font-size:20px; color:#1E0468; font-weight:bold; text-decoration:none; text-transform:uppercase;} .subhdr {font-family:verdana,arial,helvetica; font-size:15px; color:#1E0468; font-weight:bold; text-decoration:none; text-transform:uppercase;} .text {font-family:verdana,arial,helvetica; font-size:13px; color:#1E0468; font-weight:normal;text-decoration:none;} .utext {font-family:verdana,arial,helvetica; font-size:13px; color:#1E0468; font-weight:normal;text-decoration:underline;} .link {font-family:verdana,arial,helvetica; font-size:12px; color:#1E0468; font-weight:bold; text-decoration:underline;} /* I HAD CREATED THIS FOR THE BROWSE CATALOG PAGES ON THE SUPPLY BRIDGE SITES; NOT SURE IF THIS IS NECESSARY ELSEWHERE */ .browselink {font-family:verdana,arial,helvetica; font-size:12px; color:#9966cb; font-weight:bold; text-decoration:none;} /* THESE TWO STYLES WOULD BE FOUND ON THE CART VIEW PAGE AS WELL AS THE CHECKOUT PAGE WHERE A LIST OF PRODUCTS IN A CART ARE LISTED .carthdr : THE TEXT AT THE TOP OF THE COLUMN " QTY | DESCRIPTION | PRICE " .carttext: THE TEXT WITHIN THE TABLE... " 8 | WIDGETS | $0.89 " */ .carthdr {font-family:verdana,arial,helvetica; font-size:9px; color:#000066; font-weight:bold; text-transform:uppercase;} .carttext {font-family:verdana,arial,helvetica; font-size:9px; color:#000066;} /* THE .errmsg CLASS HAS BEEN USED FOR ECHOING ERROR MESSAGES AS WELL AS RESPONSES TO QUERIES TO A DB TABLE. FOR EXAMPLE, IF YOU ARE QUERYING A TABLE FOR A LIST OF ITEMS AND NONE WERE FOUND, THE TEXT THAT SAYS "NONE FOUND" WOULD BE DISPLAYED WITH THIS CLASS. ALSO, IF YOU HAD JUST ADDED, EDITED, OR DELETED ANY INFO FROM A DB TABLE, YOU WOULD DISPLAY A MESSAGE TO THAT AFFECT WITH THIS CLASS. */ .errmsg {font-family:verdana,arial,helvetica; font-size:12px; color:#ff0000; font-weight:bold; text-decoration:none;} .suberrmsg {font-family:verdana,arial,helvetica; font-size:9px; color:#ff0000; font-weight:normal; text-decoration:none;} /* FOOTER INFO IS INFORMATION FOUND AT THE BOTTOM OF ANY PAGE. THIS IS USUALLY THE "COPYRIGHT" AND "DESIGNED BY" INFO */ .footertext {font-family:verdana,arial,helvetica; font-size:8px; color:#000066;} .footerlink {font-family:verdana,arial,helvetica; font-size:9px; color:#1E0468; font-weight:none; text-decoration:none;} .footerlink2 {font-family:verdana,arial,helvetica; font-size:11px; color:#1E0468; font-weight:none; text-decoration:none;} /* FORMS SHOULD USE THE FOLLOWING STYLES .formfld : THE LABEL OF THE FIELD .formreqd : THE TEXT OR SYMBOL INDICATING THAT THE FIELD IS A MANDATORY FIELD. .forminst : THE INSTRUCTIONS FOR ANY FORMS AS WELL AS THE SECONDARY LABELS FOR FIELDS WOULD BE DISPLAYED WITH THIS CLASS. A "SECONDARY LABEL" WOULD BE SOMETHING LIKE "VISA" NEXT TO A RADIO BUTTON (THE RADIO BUTTONS WERE LABELED WITH "CARD TYPE" IN THE .formfld class. */ .formfld {font-family:verdana,arial,helvetica; font-size:10px; color:#000066; font-weight:bold; text-transform:uppercase;} .formreqd {font-family:verdana,arial,helvetica; font-size:10px; color:#ff0000; font-weight:bold;} .forminst {font-family:verdana,arial,helvetica; font-size:10px; color:#000066;} /* MOST, IF NOT ALL, OF OUR SITES HAVE HAD A MAIN NAVIGATIONAL AREA AT THE LEFT OF EACH PAGE. I'VE DESCRIBED WHAT IT MAY LOOK LIKE BELOW: (.leftnavhdr)-------> MAIN MENU (.leftnavlink)------> HOME (.leftnavlink)------> VIEW CART (.leftnavlink)------> CHECKOUT (.leftnavlink)------> MAIN ADMIN (.leftnavcontact)---> COMPANY NAME (.leftnavcontact)---> COMPANY ADDRESS1 (.leftnavcontact)---> COMPANY ADDRESS2 (.leftnavcontact)---> CITY, ST, ZIP (.leftnavlink)------> DEFAULT WEB ADDRESS */ .leftnavhdr {font-family:verdana,arial,helvetica; font-size:12px; color:#000066; text-transform:uppercase;} .leftnavtext {font-family:verdana,arial,helvetica; font-size:10px; color:#000066;} .leftnavlink {font-family:arial,verdana,helvetica; font-size:15px; color:1E0468; font-weight:bold; text-decoration:none;} .leftnavsublink {font-family:arial,verdana,helvetica; font-size:9px; color:#FFF000; font-weight:bold; text-decoration:none;} .leftnavcontact {font-family:verdana,arial,helvetica; font-size:8px; color:#000066;} /* THE FOLLOWING WOULD BE USED ON ANY PAGE DISPLAYING INFORMATION MUCH LIKE A PRESS RELEASE (.newshdline)-------> US NUKES AFGHANISTAN (.newsbyline)-------> by: Tim McAllister (.newstext)---------> Sources report that Afghanistan was wiped off the face of the earth... (.newslink)---------> View Images of what was once Afganistan. */ .newshdline {font-family:verdana,arial,helvetica; font-size:15px; color:#2acc33; font-weight:bold; text-decoration:none; text-transform:uppercase;} .newsbyline {font-family:verdana,arial,helvetica; font-size:12px; color:#000066; font-weight:bold;} .newstext {font-family:verdana,arial,helvetica; font-size:10px; color:#000066; font-weight:none;} .newslink {font-family:verdana,arial,helvetica; font-size:10px; color:#9966cb; font-weight:bold; text-decoration:none;} /* PRODUCT INFO SHOULD BE DISPLAYED USING THESE CLASSES THIS AREA IS OPEN FOR DISCUSSION... I MAY HAVE GONE OVERBOARD HERE. I TRIED TO USE MANY CLASSES BECAUSE THERE MAY BE A NEED TO SHOW EACH OF THESE IN A DIFFERENT WAY. THEY ARE PRIMARILY USED ON THE CATALOG PAGES AND I THINK THE DESCRIPTIONS ARE FAIRLY INTUITIVE. */ .prodID {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468; font-weight:bold; text-transform:uppercase;} .prodtitle {font-family:Times New Roman; font-size:22px; color:#1E0468; font-weight:bold; text-transform:none; text-decoration:underline;} .prodartist {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468; text-transform:none;} .proddescr {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468;} .prodprice {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468; font-weight:bold;} .prodsale {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468; font-weight:bold; text-transform:uppercase;} .prodlink {font-family:verdana,arial,helvetica; font-size:10px; color:#1E0468; font-weight:bold; text-transform:uppercase;} .prodlabel {font-family:Times New Roman; font-size:16px; color:#1E0468; font-weight:bold;} /* TABLES (USUALLY THE ONES THAT SHOW PRODUCT LISTINGS) WOULD USE THESE CLASSES. ============================================- (.tblhdr)-----------> | CAR AUDIO | --------------------------------------------- (.tblcolhdr)--------> | prodid | descr | price | mfgr | --------------------------------------------- | xyz123 | blah | $5.99 | AIWA | ============================================= /\ /\ /\ /\ (.tbllink) (.tblcoltext) (.txtnavtext)----->[ 1 ]<------(.txtnavtext) [2] [3] [4] /\ (.txtnavlink) */ .tblhdr {font-family:verdana,arial,helvetica; font-size:15px; color:#000066; font-weight:bold; text-transform:uppercase;} .tblcolhdr {font-family:verdana,arial,helvetica; font-size:12px; color:#0000aa; font-weight:bold; text-transform:uppercase; text-decoration:none;} .tblcoltext {font-family:verdana,arial,helvetica; font-size:9px; color:#000066; } .tbllink {font-family:verdana,arial,helvetica; font-size:9px; color:#0000aa; font-weight:none; text-decoration:none;} .txtnavtext {font-family:verdana,arial,helvetica; font-size:8px; color:#000066;} .txtnavlink {font-family:arial,verdana,helvetica; font-size:15px; color:1E0468; font-weight:bold; text-decoration:none;} .dropdownlink {font-family:arial,verdana,helvetica; font-size:10px; color:CFBCA5; font-weight:bold; text-decoration:none;} .dropdownmenu {position:absolute;visibility:hidden;width:116px;} .aster {font-family:verdana,arial,helvetica; font-size:13px; color:#FF0101; font-weight:normal;text-decoration:none;}