@charset "utf-8";/* CSS Document */ /* HEAD */ #head { width: 1000px; height: 100px; float: none; background-image: url(/multimedia/images/universal/headv2010.jpg); padding-top: 10px; line-height: normal; } #invisiblehome { font-family: Arial, Helvetica, sans-serif; float: left; height: 70px; width: 175px; margin-top: 15px; margin-left: 10px; cursor: Pointer; } /* Top links */ #toplinks { height: 30px; width: 250px; float: right; margin-right: 0px; margin-top: 0px; } #contactlnk { float: right; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-transform: uppercase; font-weight: normal; font-style: normal; text-decoration: none; font-size: 11px; padding-top: 6px; padding-right: 20px; padding-left: 20px; } #contactlnk:hover { cursor: Pointer; text-decoration: underline; } #loginlnk { float: right; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-transform: uppercase; font-weight: normal; font-style: normal; text-decoration: none; font-size: 11px; padding-top: 6px; padding-right: 20px; padding-left: 20px; } #loginlnk:hover { cursor: Pointer; text-decoration: underline; } /* Main Navigation */ #headlinks { width: 500px; float: right; clear: right; margin-top: 40px; margin-right: 250px; height: 30px; } #headerbar { width: 1000px; height: 125px; clear: both; background-color: #FFFFFF; float: left; border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; border-top-color: #CCCCCC; border-bottom-color: #FFFFFF; } /* CONTENT */ /* The pages content area to the right of the side bar. */ #content { background-color: #FFFFFF; width: 100%; float: left; height: auto; } #content a { text-decoration: underline; } #breadcrumb { background-repeat:repeat-x; height:26px; color:#666666; width:1000px; overflow:hidden; margin:0px; padding:0px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #EEEEEE; border-bottom-color: #EEEEEE; font-family: Arial, Helvetica, sans-serif; font-size: 11px; float: left; display: block; line-height: 26px; } #breadcrumb li { list-style-type:none; float:left; padding-left:10px;} #breadcrumb a { height:26px; display:block; background-image:url(../multimedia/images/universal/breadcrumbs/bc_separator.png); background-repeat:no-repeat; background-position:right center; padding-right: 15px; text-decoration: none; color:#B5B5B5; } #breadcrumb a:hover { color:#666666; background-image:url(../multimedia/images/universal/breadcrumbs/bc_separator-hover.png); background-repeat:no-repeat; background-position:right center; } #breadcrumb .home { border: none; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #social-footer { float: left; height: 25px; width: 150px; margin-top: 15px; margin-left: 20px; } #social-twitter { background-image: url(/multimedia/images/universal/social/twitter.png); background-repeat: no-repeat; height: 24px; width: 24px; float: left; margin-top: 1px; margin-right: 2px; margin-left: 2px; } #social-twitter:hover {margin-top: 0px; cursor: pointer; } #social-facebook { background-image: url(/multimedia/images/universal/social/facebook.png); background-repeat: no-repeat; height: 24px; width: 24px; float: left; margin-top: 1px; margin-right: 2px; margin-left: 2px; } #social-facebook:hover {margin-top: 0px; cursor: pointer; } #social-youtube { background-image: url(/multimedia/images/universal/social/youtube.png); background-repeat: no-repeat; height: 24px; width: 24px; float: left; margin-top: 1px; margin-right: 2px; margin-left: 2px; } #social-youtube:hover {margin-top: 0px; cursor: pointer; } #social-blog { background-image: url(/multimedia/images/universal/social/wordpress.png); background-repeat: no-repeat; height: 24px; width: 24px; float: left; margin-top: 1px; margin-right: 2px; margin-left: 2px; } #social-blog:hover {margin-top: 0px; cursor: pointer; } #social-digg { background-image: url(/multimedia/images/universal/social/digg.png); background-repeat: no-repeat; height: 24px; width: 24px; float: left; margin-top: 1px; margin-right: 2px; margin-left: 2px; display: none; } #social-digg:hover {margin-top: 0px; cursor: pointer; } /* FOOTER ----------------------------------------------- */ #foot-links { width:500px; height:auto; z-index:1; margin-left: 0px; margin-top: 0px; text-align: right; float: right; padding-right: 20px; padding-top: 10px; } #foot-statement { width:500px; height:17px; z-index:1; text-align: right; font-size: 10px; color: #999999; float: right; padding-right: 20px; padding-top: 5px; } .twoColElsLtHdr #footer { height: 200px; width: 1000px; background-image:url(/multimedia/images/universal/white-footer-bar.png); _background-image:url(/multimedia/images/universal/footer-ie6.gif); background-repeat: no-repeat; background-position: bottom; padding-top: 10px; } .footertext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; color: #999999; letter-spacing: 0px; } .twoColElsLtHdr #footer p { margin: 0; margin-top: 10px;} /* BairScreen ----------------------------------------------- */ body { color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: x-small; /*for IE5/Win */ font-size: small; /*for compliant browsers */ background-color: #999999; background-repeat: repeat-x; background-image: url(/multimedia/images/universal/bluelight-to-gray.png); margin: 0; padding: 0; } html>body { font-size: small; } /* be nice to Opera */ /* Links ----------------------------------------------- */ a img { border-style: none; } /* Paragraph Headings ----------------------------------------------- */ /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } p { margin-top: .375em; margin-right: 0; margin-bottom: 0.375em; margin-left: 0; } li ul, li ol { margin-top: 0; margin-right: 1.5em; margin-bottom: 0; margin-left: 1.5em; } ul, ol { margin-top: 0; margin-right: .25em; margin-bottom: 1.5em; margin-left: 0.25em; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} body,td,th { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 12px; border-color: #FFFFFF; line-height: 1.5em; } a:link { color: #0066CC; text-decoration: underline; } a:visited { text-decoration: underline; color: #0066CC; } a:active { text-decoration: underline; color: #0066CC; } a:hover { text-decoration: underline; color: #0066CC;} .twoColElsLtHdr #containall { width: 1000px; border: 0px solid #000000; text-align: left; height: auto; margin: 0px auto; clear: both;} .twoColElsLtHdr #containcenter { width: 1000px; background-repeat: no-repeat; margin-top: 0px; background-color: #FFFFFF;} .SpryHiddenRegion { visibility: hidden;} /* Form Elements ----------------------------------------------- */ label, select { font-size: 85%; font-family: "Lucida Grande", "Trebuchet MS", sans-serif;} select {color: #000000; background-color: #FFFFFF; border: 1px solid #b1b1bc; font-size: 12px; font-weight: normal; font-variant: normal; font-family: Arial, Helvetica, sans-serif;} /* Spry Validation Widgets Demo*/ .clear { visibility: hidden; display: block; clear: none; height: 100%; } .ClearAll { clear: none; height: 0; font-size: 0; line-height: 0; } /* Miscellaneous classes for reuse */ .fltrt { float: right; margin-left: 8px;} .fltlft { float: left; margin-right: 8px;} .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;} code { color: #009966; } pre {font-size: small; color: #CC33FF;} .Text1-2 { font-family: Arial, Helvetica, sans-serif; font-size: 48px; font-variant: normal; color: #666666; margin-top: 3px; margin-bottom: 3px; font-weight: normal; line-height: 1.5; font-style: normal; } .Text2-2 { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-variant: normal; font-weight: normal; color: #666666; font-style: normal; line-height: 1.25em; } .Text2-4 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-variant: normal; color: #4F575A; font-style: normal; line-height: 1.25em; font-weight: normal; } .Text2-5 { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-variant: normal; font-weight: normal; color: #FFFFFF; font-style: normal; line-height: 1.25em; } .Text3-2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-variant: normal; font-weight: normal; color: #666666; font-style: normal; line-height: 1.5em; } .Text3-3 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-variant: normal; font-weight: normal; color: #0066CC; font-style: normal; line-height: 1.5em; } .required { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #CC0000; } /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; cursor: default; width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; list-style-type: none; font-size: 14px; position: relative; text-align: left; cursor: pointer; float: left; padding-top: 0; padding-right: 5px; padding-bottom: 0; padding-left: 5px; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8.2em; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; text-decoration: none; width: 175px; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible a { cursor: pointer; color: #666666; text-decoration: none; font-size: 12px; text-transform: none; } ul.MenuBarHorizontal ul.MenuBarSubmenuVisible a:hover { cursor: pointer; color: #0066CC; text-decoration: underline; text-transform: none; } ul.MenuBarHorizontal li.dropbtm { cursor: pointer; color: #666666; text-transform: none; font-size: 12px; text-decoration: none; font-weight: normal; font-variant: normal; padding-top: 10px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; } ul.MenuBarHorizontal li.dropbtm:hover { color: #0066CC; text-transform: none; text-decoration: underline; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 175px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin-top: -5%; margin-right: 0; margin-bottom: 0; margin-left: 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { width: 175px; background-image: url(/multimedia/images/universal/dropback.png); background-position: 0px bottom; background-repeat: no-repeat; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #FFFFFF; text-decoration: none; text-transform: uppercase; padding-top: 0.5em; padding-right: 1.5em; padding-bottom: 0.5em; padding-left: 1.5em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { text-decoration: underline; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #FFFFFF; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-image: url(/multimedia/images/universal/droplist-back.png); background-position: left; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: 95% 50%; background-color: #00CC99; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } ul.MenuBarHorizontal li.MenuBarItemIE { display: block; f\loat: left; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { } #MainSub-Title { background-image: url(/multimedia/images/universal/header-blue-1000x90.png); background-repeat: no-repeat; background-position: center bottom; height: 64px; width: 980px; font-family: "Century Gothic"; font-size: 34px; font-weight: normal; text-align: center; color: #FFFFFF; padding-right: 10px; padding-left: 10px; line-height: normal; padding-top: 15px; } #MainSub-Content { height: auto; width: 660px; float: left; vertical-align: top; background-color: #FFFFFF; padding: 20px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } #MainSub-Side { width: 279px; float: right; height: auto; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC; } #MainSub-SideContent { width: 259px; height: auto; padding: 10px; clear: both; background-color: #f6f6f6; } #MainSub-Foot{ display:none; float: left; width: 1000px; height: 75px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #MainSub-SideLinks { width: 279px; height: auto; padding: 0px; clear: right; } #MainSub-SideLinks #sidemain { padding: 0; margin: 0; cursor: Pointer; background-color: #EEEEEE; } #MainSub-SideLinks #sidemain li { height: 30px; width: 264px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; text-decoration: none; padding-left: 15px; list-style-type: none; display: block; vertical-align: top; background-image: url(../multimedia/images/universal/breadcrumbs/right-arrow.png); background-position: 97% center; background-repeat: no-repeat; } #MainSub-SideLinks #sidemain li:hover { background-color: #f6f6f6; color: #0066CC; } #MainSub-SideLinks #sidemain li a { font-size: 12px; float: left; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; height: 24px; padding-top: 7px; color: #666666; } #MainSub-SideLinks #sidelks { padding-right: 0; padding-left: 0px; margin: 0; cursor: Pointer; } #SubNav-Title { width: 1000px; height: 200px; float: left; background-image: url(/multimedia/images/universal/header-gray.png); background-position: center top; background-repeat: no-repeat; } #SubNav-ContentBound { float: left; height: auto; width: 500px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-left-color: #CCCCCC; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #SubNav-Content { float: left; height: auto; width: 460px; padding: 20px; } #SubNav-Footer { float: left; height: auto; width: 460px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; padding: 20px; } #SubNav-CallOut { float: right; width: 258px; height: auto; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; padding: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC; background-color: #eeeeee; } #SubNav-CallOut-Odd { float: right; width: 258px; height: auto; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; padding: 10px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC; background-color: #FFFFFF; } #SubNav-SideBar { float: left; height: auto; width: 200px; } /* SIDE BAR */ /* contains links on the left side of each page. */ #sidetitle { text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; padding-top: 15px; color: #333333; font-style: normal; background-image: url(/multimedia/images/universal/gray-gradient.png); background-repeat: repeat-x; height: 30px; font-size: 12px; cursor: Pointer; } #SubNav-SideBar #sidemain { padding: 0; margin: 0; cursor: Pointer; } #SubNav-SideBar #sidemain li { height: 35px; width: 185px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; text-decoration: none; padding-left: 15px; list-style-type: none; display: block; vertical-align: top; } #SubNav-SideBar #sidemain li:hover { background-image: url(/multimedia/images/universal/blue.gif); background-repeat: repeat; } #SubNav-SideBar #sidemain li a { color: #006699; font-size: 12px; float: left; width: 185px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; height: 24px; padding-top: 11px; } .sidecurrent { background-image: url(/multimedia/images/universal/blue.gif); background-repeat: repeat; } #SubNav-SideBar #sidelks { padding-right: 0; padding-left: 0px; margin: 0; cursor: Pointer; } #SubNav-SideBar #sidelks li { height: 35px; width: 170px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; text-decoration: none; list-style-type: none; padding-left: 30px; vertical-align: top; display: block; } #SubNav-SideBar #sidelks li:hover { background-image: url(/multimedia/images/universal/blue.gif); background-repeat: repeat; } #SubNav-SideBar #sidelks li a { color: #666666; font-size: 12px; float: left; width: 170px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; padding-top: 11px; height: 24px; } #SubNav-SideBar #sidelks #sidebottom { background-image: url(/multimedia/images/universal/gray.gif); height: 10px; background-color: #999999; width: 170px; float: left; } /* SpryFormValidation.css - version 0.5 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* These are the classes applied on the error messages * which prevent them from being displayed by default. */ .textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg, .textareaValidMsg { display:none; } /* These selectors change the way messages look when the widget is in one of the error states. * These classes set a default red border and color for the error text. * The state class (e.g. .textareaRequiredState) is applied on the top-level container for the widget, * and this way only the specific error message can be shown by setting the display property to "inline". */ .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg { display: inline; color: #CC0000; border: 0px solid #CC3333; } /* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the TEXTAREA * - the widget id is placed on the TEXTAREA element itself (there are no error messages) */ /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */ .textareaValidState textarea, textarea.textareaValidState { background-color:#B8F5B1; } /* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */ textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea { background-color:#FF9F9F; } /* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */ .textareaFocusState textarea, textarea.textareaFocusState { background-color:#FFFFFF; } /* This class applies only for a short period of time and changes the way the text in the textarea looks like. * It applies only when the widget has enforce max chars enabled and the user tries to type some more. */ .textareaFlashState textarea, textarea.textareaFlashState{ color:red !important; } /* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */ textarea.textareaHintState, .textareaHintState textarea{ /* color: red !important;*/ } /* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* These are the classes applied on the error messages * which prevent them from being displayed by default. */ .textfieldRequiredMsg, .textfieldInvalidFormatMsg, .textfieldMinValueMsg, .textfieldMaxValueMsg, .textfieldMinCharsMsg, .textfieldMaxCharsMsg, .textfieldValidMsg { display: none; } /* These selectors change the way messages look when the widget is in one of the error states. * These classes set a default red border and color for the error text. * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget, * and this way only the specific error message can be shown by setting the display property to "inline". */ .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg { display: inline; color: #CC0000; border: 0px solid #CC3333; } /* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid * There are two selectors for each state, to cover the two main usecases for the widget: * - the widget id is placed on the top level container for the INPUT * - the widget id is placed on the INPUT element itself (there are no error messages) */ /* When the widget is in the valid state the INPUT has a green background applied on it. */ .textfieldValidState input, input.textfieldValidState { background-color: #B8F5B1; } /* When the widget is in an invalid state the INPUT has a red background applied on it. */ input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input { background-color: #99CCFF; } /* When the widget has received focus, the INPUT has a yellow background applied on it. */ .textfieldFocusState input, input.textfieldFocusState { background-color: #FFFFFF; } /* This class applies only for a short period of time and changes the way the text in the textbox looks like. * It applies only when the widget has character masking enabled and the user tries to type in an invalid character. */ .textfieldFlashText input, input.textfieldFlashText { color: red !important; } /* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */ .textfieldHintState input, input.textfieldHintState { /*color: red !important;*/ } /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* Horizontal Tabbed Panels * * The default style for a TabbedPanels widget places all tab buttons * (left aligned) above the content panel. */ /* This is the selector for the main TabbedPanels container. For our * default style, this container does not contribute anything visually, * but it is floated left to make sure that any floating or clearing done * with any of its child elements are contained completely within the * TabbedPanels container, to minimize any impact or undesireable * interaction with other floated elements on the page that may be used * for layout. * * If you want to constrain the width of the TabbedPanels widget, set a * width on the TabbedPanels container. By default, the TabbedPanels widget * expands horizontally to fill up available space. * * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabbedPanels container. */ .TabbedPanels { margin: 0px; padding: 0px; float: left; clear: none; width: 660px; } /* This is the selector for the TabGroup. The TabGroup container houses * all of the tab buttons for each tabbed panel in the widget. This container * does not contribute anything visually to the look of the widget for our * default style. * * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabGroup container. */ .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } /* This is the selector for the TabbedPanelsTab. This container houses * the title for the panel. This is also the tab "button" that the user clicks * on to activate the corresponding content panel so that it appears on top * of the other tabbed panels contained in the widget. * * For our default style, each tab is positioned relatively 1 pixel down from * where it wold normally render. This allows each tab to overlap the content * panel that renders below it. Each tab is rendered with a 1 pixel bottom * border that has a color that matches the top border of the current content * panel. This gives the appearance that the tab is being drawn behind the * content panel. * * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget function. You can use any class name you want * to style this tab container. */ .TabbedPanelsTab { position: relative; top: 1px; float: left; background-color: #FFFFFF; list-style: none; cursor: pointer; color: #FFFFFF; width: auto; font-size: 14px; height: 20px; background-image: url(/multimedia/images/universal/header-gray.png); background-repeat: no-repeat; background-position: -20px top; margin-right: 0px; margin-left: 0px; padding-top: 5px; padding-right: 30px; padding-bottom: 5px; padding-left: 30px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #CCCCCC; border-right-color: #999999; border-bottom-color: #666666; border-left-color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-top: 0px; margin-bottom: 0px; } /* This selector is an example of how to change the appearnce of a tab button * container as the mouse enters it. The class "TabbedPanelsTabHover" is * programatically added and removed from the tab element as the mouse enters * and exits the container. */ .TabbedPanelsTabHover { color: #000000; } /* This selector is an example of how to change the appearance of a tab button * container after the user has clicked on it to activate a content panel. * The class "TabbedPanelsTabSelected" is programatically added and removed * from the tab element as the user clicks on the tab button containers in * the widget. * * As mentioned above, for our default style, tab buttons are positioned * 1 pixel down from where it would normally render. When the tab button is * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is part of the content panel. */ .TabbedPanelsTabSelected { background-color: #0066CC; color: #000000; background-repeat: repeat; background-image: url(/multimedia/images/universal/header-blue.png); background-position: -20px top; z-index: 1000; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666666; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; } /* This selector is an example of how to make a link inside of a tab button * look like normal text. Users may want to use links inside of a tab button * so that when it gets focus, the text *inside* the tab button gets a focus * ring around it, instead of the focus ring around the entire tab. */ .TabbedPanelsTab a { color: #333333; text-decoration: none; } /* This is the selector for the ContentGroup. The ContentGroup container houses * all of the content panels for each tabbed panel in the widget. For our * default style, this container provides the background color and borders that * surround the content. * * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the ContentGroup container. */ .TabbedPanelsContentGroup { background-color: #FFFFFF; width: 658px; height: auto; clear: left; overflow: hidden; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #B0BDC9; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } /* This is the selector for the Content panel. The Content panel holds the * content for a single tabbed panel. For our default style, this container * provides some padding, so that the content is not pushed up against the * widget borders. * * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the Content container. */ .TabbedPanelsContent { width: 100%; height: auto; padding: 20px; } /* This selector is an example of how to change the appearnce of the currently * active container panel. The class "TabbedPanelsContentVisible" is * programatically added and removed from the content element as the panel * is activated/deactivated. */ .TabbedPanelsContentVisible { width: 620px; float: none; } /* SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* This is the selector for the main CollapsiblePanel container. For our * default style, the CollapsiblePanel is responsible for drawing the borders * around the widget. * * If you want to constrain the width of the CollapsiblePanel widget, set a width on * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill * up available space. * * The name of the class ("CollapsiblePanel") used in this selector is not necessary * to make the widget function. You can use any class name you want to style the * CollapsiblePanel container. */ .CollapsiblePanel { margin: 0px; padding: 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } /* This is the selector for the CollapsiblePanelTab. This container houses * the title for the panel. This is also the container that the user clicks * on to open or close the panel. * * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * CollapsiblePanel panel tab container. */ .CollapsiblePanelTab { margin: 0px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; background-position: 97%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #EEEEEE; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-left-color: #CCCCCC; background-image: url(../multimedia/images/universal/panel-closed.png); background-repeat: no-repeat; background-color: #f6f6f6; padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 10px; } /* This is the selector for a CollapsiblePanel's Content area. It's important to note that * you should never put any padding on the content area element if you plan to * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate. * * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary * to make the widget function. You can use any class name you want to style a * CollapsiblePanel content container. */ .CollapsiblePanelContent { margin: 0px; padding: 20px; border-right-width: 1px; border-right-style: solid; border-right-color: #E6E6E6; border-left-width: 1px; border-left-style: solid; border-left-color: #E6E6E6; } /* An anchor tag can be used inside of a CollapsiblePanelTab so that the * keyboard focus ring appears *inside* the tab instead of around the tab. * This is an example of how to make the text within the anchor tag look * like non-anchor (normal) text. */ .CollapsiblePanelTab a { text-decoration: none; } /* This is an example of how to change the appearance of the panel tab that is * currently open. The class "CollapsiblePanelOpen" is programatically added and removed * from panels as the user clicks on the tabs within the CollapsiblePanel. */ .CollapsiblePanelOpen .CollapsiblePanelTab { background-image: url(../multimedia/images/universal/panel-opened.png); background-repeat: no-repeat; background-position: 97%; background-color: #EEEEEE; } /* This is an example of how to change the appearance of the panel tab as the * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added * and removed from panel tab containers as the mouse enters and exits the tab container. */ .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover { background-color: #CCCCCC; } /* This is an example of how to change the appearance of all the panel tabs when the * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed * whenever the CollapsiblePanel gains or loses keyboard focus. */ .CollapsiblePanelFocused .CollapsiblePanelTab { } .contact-table { background-color: #f6f6f6; width: 450px; margin-right: auto; margin-left: auto; } @charset "UTF-8"; .contact-table-wide { background-color: #f6f6f6; width: 650px; margin-right: auto; margin-left: auto; } /* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* This is the selector for the main Accordion container. For our default style, * we draw borders on the left, right, and bottom. The top border of the Accordion * will be rendered by the first AccordionPanelTab which never moves. * * If you want to constrain the width of the Accordion widget, set a width on * the Accordion container. By default, our accordion expands horizontally to fill * up available space. * * The name of the class ("Accordion") used in this selector is not necessary * to make the widget function. You can use any class name you want to style the * Accordion container. */ .Accordion { overflow: hidden; } /* This is the selector for the AccordionPanel container which houses the * panel tab and a panel content area. It doesn't render visually, but we * make sure that it has zero margin and padding. * * The name of the class ("AccordionPanel") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel container. */ .AccordionPanel { margin: 0px; padding: 0px; } /* This is the selector for the AccordionPanelTab. This container houses * the title for the panel. This is also the container that the user clicks * on to open a specific panel. * * The name of the class ("AccordionPanelTab") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel tab container. * * NOTE: * This rule uses -moz-user-select and -khtml-user-select properties to prevent the * user from selecting the text in the AccordionPanelTab. These are proprietary browser * properties that only work in Mozilla based browsers (like FireFox) and KHTML based * browsers (like Safari), so they will not pass W3C validation. If you want your documents to * validate, and don't care if the user can select the text within an AccordionPanelTab, * you can safely remove those properties without affecting the functionality of the widget. */ .AccordionPanelTab { background-color: #CCCCCC; margin: 0px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #DDDDDD; border-bottom-color: #DDDDDD; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; font-weight: bold; } /* This is the selector for a Panel's Content area. It's important to note that * you should never put any padding on the panel's content area if you plan to * use the Accordions panel animations. Placing a non-zero padding on the content * area can cause the accordion to abruptly grow in height while the panels animate. * * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel * Content container. * * The name of the class ("AccordionPanelContent") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel content container. */ .AccordionPanelContent { overflow: auto; margin: 0px; height: 315px; background-image: url(../multimedia/images/universal/bottom-shadow.png); background-position: center bottom; background-repeat: no-repeat; } /* This is an example of how to change the appearance of the panel tab that is * currently open. The class "AccordionPanelOpen" is programatically added and removed * from panels as the user clicks on the tabs within the Accordion. */ .AccordionPanelOpen .AccordionPanelTab { background-color: #EEEEEE; } /* This is an example of how to change the appearance of the panel tab as the * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added * and removed from panel tab containers as the mouse enters and exits the tab container. */ .AccordionPanelTabHover { background-color: #f6f6f6; } .AccordionPanelOpen .AccordionPanelTabHover { color: #555555; } /* This is an example of how to change the appearance of all the panel tabs when the * Accordion has focus. The "AccordionFocused" class is programatically added and removed * whenever the Accordion gains or loses keyboard focus. */ .AccordionFocused .AccordionPanelTab { } /* This is an example of how to change the appearance of the panel tab that is * currently open when the Accordion has focus. */ .AccordionFocused .AccordionPanelOpen .AccordionPanelTab { } /* SprySlidingPanels.css - version 0.1 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* This is the selector for the main SlidingPanels container. This selector * defines the width and height of the view port for the widget. Note that * this selector does not set the overflow property since that is done programatically * by the widget. Setting the overflow property programatically ensures that * the contens of the widget will be fully visible should JavaScript be disabled * in the browser. * * If you want to constrain the width of the SlidingPanels widget, set a width on * the SlidingPanels container. By default, our sliding panels widget expands * horizontally to fill up available space. * * The SlidingPanels container is positioned relative so that content inside it * can be positioned relative to its upper left corner. * * Avoid placing any CSS border or padding properties on the SlidingPanels container * as they can affect the proper positioning and sliding animations of the contents * inside the container. * * The name of the class ("SlidingPanels") used in this selector is not necessary * to make the widget function. You can use any class name you want to style the * SlidingPanels container. */ .SlidingPanels { position: relative; width: 972px; height: 100px; padding: 0px; border: none; overflow: hidden; float: left; } /* This is the selector for the container that holds all of the content panels * for the widget. The SlidingPanelsContentGroup container is what gets programtically * positioned to create the slide animation. It is also what governs the layout of * the panels. * * By default, the width of the container is the same as its parent, the SlidingPanels * container. * * You can make the panels within the SlidingPanelsContentGroup container layout * horizontally by giving the SlidingPanelsContentGroup container a width that is as wide * or larget than the sum of the widths of all of the content panels, and then floating * the content panels inside the SlidingPanelsContentGroup container so they all appear * on the same line. You may also need to float the SlidingPanels and SlidingPanelsContentGroup * containers to insure that none of the content panels "leak" outside of the widget. * * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels * container as they can affect the proper positioning and sliding animations of the * the container within the widget. * * The name of the class ("SlidingPanelsContentGroup") used in this selector is not * necessary to make the widget function. You can use any class name you want to style the * SlidingPanelsContentGroup container. */ .SlidingPanelsContentGroup { position: relative; width: 972px; margin: 0px; padding: 0px; border: none; float: left; overflow: hidden; } /* This is the selector for the container that holds content for a given panel. In our * default style implementation, the dimensions of each content panel exactly match the * dimensions of the view port (SlidingPanels) container. This ensures that only one * panel ever shows within the view port. * * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels * container as they can affect the proper positioning and sliding animations of the * the panel within the widget. You can place border, margins and padding on any content * *inside* the content panel. * * The name of the class ("SlidingPanelsContent") used in this selector is not * necessary to make the widget function. You can use any class name you want to style the * SlidingPanelsContent container. */ .SlidingPanelsContent { width: 972px; height: 100px; margin: 0px; padding: 0px; border: none; float: left; overflow: hidden; } /* The class used in this selector is programatically added to the SlidingPanels container * anytime we are animating between panels. This rule makes sure that *all* content inside * the widget is overflow:none to avoid a rendering glitch that occurs in FireFox 1.5 whenever * there is an element inside the widget that displays a scrollbar. * * The class is automatically removed once the animation has stopped so that the overflow * properties of the content inside the widget should be restored. */ .SlidingPanelsAnimating * { overflow: hidden !important; } /* The class used in this selector is programatically added to the SlindingPanelsContent * container that is currently visible in the view port. The class is automatically removed * when the widget switches to a different panel. */ .SlidingPanelsCurrentPanel { } /* The class used in this selector is programatically added to the SlidingPanels container * anytime the SlidingPanels container is given focus. The class is automatically removed * once the SlidingPanels container loses focus. */ .SlidingPanelsFocused { } .borderbottom { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; }