/* Stylesheet for On The Matrix pages */ /* Standard "teal" color: #005C5C */ /* background-color: #EEEFEF; */ /* background-image: url( /shared/labels/bg_stripes.gif ); */ body { background-color: #EEEFEF; margin: 0px; padding: 0px; /* This needed for Opera. See: http://www.opera.com/docs/specs/index.dml */ font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #000000; font-size: 14px; font-style: normal; line-height: 16px; } /* This creates border around almost all pages. */ .PageArea { width: 725px; margin-left: 15px; margin-top: 15px; margin-bottom: 30px; padding: 5px; background-color: #FFFFFF; border: 1px solid #005C5C; } /* This used with CSS-based PageStyle to constrain dimensions of main part of the page. */ .MainPageArea { margin-left: 10px; margin-top: 15px; width: 710px; } /* This used on information and other non-photo pages. */ .InfoPageArea { margin-left: 10px; width: 700px; text-align: justify; } /* This used on all pages that list pop-up slide shows. */ .SlideshowListArea { margin-left: 10px; width: 700px; text-align: justify; } /* This used on all pages that list pop-up slide shows. Creates indented area. */ .SlideshowInfo { margin-left: 25px; width: 675px; text-align: justify; } /* Following are text-related styles */ /* .headingx classes used when want look of , but inline */ h1, h2, h3, .heading1, .heading2, .heading3 { color: #005C5C; font-size: 18px; font-weight: bolder; line-height: 20px; } h2, .heading2 { font-size: 16px; line-height: 18px; } h3, .heading3 { font-size: 14px; line-height: 16px; } /* Should be identical to text style in tag, but seems to be needed for tables, etc. */ .text { font-family: Arial,Helvetica; font-weight: normal; color: #000000; font-size: 14px; font-style: normal; line-height: 16px; } /* Used for regular text paragraphs */ .RegText { margin-bottom: -2px; } /* Used for slideshow listings */ .ShowList { margin-right: 20px; margin-bottom: -5px; } /* Used for title on page (at beginning of main text) */ .PageTitle { line-height: 20px; text-align: left; margin-left: 0px; margin-bottom: -10px; } /* Used for titles at top of pop-up slideshow list */ .SlideshowTitle { line-height: 20px; text-align: left; margin-left: 0px; margin-bottom: -5px; } /* This creates BOLD type */ strong { font-weight: bolder; } /* This creates italic type */ em { font-style: italic; } /* This creates red text for warnings, etc. */ .textred { color: #DC143C; } .legal { font-family: Arial,Helvetica; font-weight: normal; color: #666666; font-size: 12px; font-style: normal; } /* This used on pages to create look of blockquote or list item. Gets around validation problems. */ .IndentBlock { text-align: justify; margin-left: 20px; margin-right: 30px; } /* This section contains all the styles for hyperlinks */ /* Standard hyperlink style */ a { color: #005C5C; text-decoration: underline; } a:hover, a:focus { color: #800000; text-decoration: underline; } a:active { color: #800000; text-decoration: underline; } /* These used for links to Preview Slide Show */ a.grn { color: #333333;; text-decoration: none; } a.grn:hover, a.grn:focus { text-decoration: underline; color: #005C5C; } a.grn:active { text-decoration: underline; color: #005C5C; } /* Used for external links. Note: Starred attributes only read by IE, which doesn't position ext_link icon properly if anchor text wraps to a new line. Bug still present in IE7. Thus, icon appears only in non-IE browsers. */ a.extLink { background: url(/shared/labels/ext_link.gif) center right no-repeat; *background: url(/shared/labels/spacer.gif) center right no-repeat; padding-right: 13px; *padding-right: 0px; } /* These styles set dimensions and margins for photo slide show area */ /* Defines the area where the PhotoGUI will be. Use of "float:right" causes text to wrap. Height is adjusted by PageStyle.xsl to accomodate link to slide shows, where needed. */ .SlideFrameArea { width: 515px; height: 460px; float: right; margin-top: 0px; margin-left: 10px; margin-bottom: 10px; margin-right: 0px; padding: 0px; } /* This used by CSS-based PageStyle to set GUI area. Note, must be within SlideFrameArea so text will wrap. Text will NOT wrap around area positioned absoutely. */ .PhotoGUI { position: absolute; top: 135px; left: 210px; width: 515px; height: 460px; margin-left: 10px; } /* This adds area below PhotoGui for link to slide shows lower on page. */ .PhotoGuiLinkArea { position:absolute; top: 595px; left: 210px; width: 515px; height: 30px; text-align: center; } .PhotoArea { width: 486px; /* This is H and W of photo + caption area inside GUI */ height: 357px; } /* This used to display date, location and other information at bottom of GUI */ .PhotoInfo { width: 485px; height: 40px; font-family: Arial, Helvetica, "sans-serif"; color: #444444; font-size: 12px; font-style: normal; vertical-align: middle; text-align: center; } /* These apply styles to nav buttons on slide show area */ a#AutoButton, a#BeginButton, a#PreviousButton, a#NextButton { position: absolute; top: 0px; width: 40px; height: 45px; padding: 0px; margin: 0px; z-index: 1; outline: none; } a#AutoButton { background: url( /shared/labels/PhotoAutoOff.png ) no-repeat top left; left: 345px; } a#BeginButton { background: url( /shared/labels/PhotoBegin.png ) no-repeat top left; left: 385px; } a#PreviousButton { background: url( /shared/labels/PhotoPrevious.png ) no-repeat top left; left: 425px; } a#NextButton { background: url( /shared/labels/PhotoNext.png ) no-repeat top left; left: 465px; width: 35px; } a#AutoButton:hover, a#BeginButton:hover, a#PreviousButton:hover, a#NextButton:hover { background-position: bottom left; } /* This blanks out the auto button for users without JavaScript */ div.NoButton { position: absolute; background: url( /shared/labels/PhotoBlank.png ) no-repeat top left; top: 0px; left: 345px; width: 40px; height: 45px; padding: 0px; margin: 0px; z-index: 2; } /* This is to reset placement of map images after adding Google leaderboard ad across top */ .MapImg { margin-top: 0px; } /* This is space for weather RSS feed to display -- if turned on. */ .WeatherRSS { width: 678px; /* height: 90px; */ margin-left: 10px; padding: 10px; margin-bottom: 10px; border: 1px solid #005C5C; } .WeatherFrame { width: 678px; height: 110px; padding: 0px; margin: 0px; border: solid 0px red; } /* This contains a dynamic map page */ .DMapFrame { width: 694px; height: 500px; padding: 0px; margin: 0px; } /* This contains the DMapFrame */ .DMapDiv { margin-top: 0px; /* This should center

*/ margin-left: auto; margin-right: auto; padding: 0px; width: 694px; height: 500px; border: double 3px #005C5C; } /* A similar, but smaller bordered area for Preview pages. */ .PreviewPageArea { margin-left: 10px; margin-top: 10px; margin-bottom: 20px; padding: 8px; width: 475px; background-color: #FFFFFF; border: 1px solid #005C5C; } /* Styles relating to tables, buttons and other HTML images */ th { color: #FDFDFD; color: #FFFFFF; background-color: #005C5C; border: 1px solid white; } a.mButton { float: left; background: url( /shared/labels/mButton_left.png ) no-repeat top left; height: 22px; margin: 0px; padding: 0px 0px 0px 4px; text-decoration: none; outline: none; cursor: pointer; } a.mButton span { float: left; height: 22px; line-height: 22px; background: url( /shared/labels/mButton_right.png ) no-repeat top right; padding: 0px 8px 0px 5px; font-size: 12px; color: #7A7A7A; text-decoration: none; font-weight: bold; } a.mButton:hover { background-position: bottom left; text-decoration: none; } a.mButton:hover span { background-position: bottom right; text-decoration: none; color: #005C5C; }