/* Main compliant stylesheet for compliant, level 6+ ONLY, browsers. It must be overridden for any non-standards-compliant browsers * such as IE5 & IE5.5 (e.g. have to do the work twice - no thanks to Microsoft). * * Designed for use with Cobra-cms: Web content management, simply. www.Cobra-cms.com */ /* Credits: * Original stylesheet design (c)2004, Glenn Gilbert, Broker Net Associates - StyleSheets@broker.co.uk or StyleSheets@cobra-cms.com. * The structure and general design may not be copied without our permission. * * Original site graphic design by Ed Texier - ed@herringbone.co.uk. */ body {margin: 0; padding: 0; background: #039 url(Images/MarconiBodyBackground.jpg) 0 0 repeat-x; font: small Verdana, Arial, Helvetica, sans-serif; /* A proprietary MS rule that will prevent the left nav from expanding to it's contents when it contains a long word */ word-wrap: break-word; /* Windows/IE behaviour call -- understood and imported only by Win/IE. Enables IE6 to do dynamic menus * like every other CSS compliant browser. * Credit to Peter Nederhof (http://www.xs4all.nl/~peterned/) */ behavior: url(skins/MarconiSkins/Images/csshover.htc); } /* Override the body background for different site sections */ body#ECPRTwoCol, body#ECPRThreeCol { background: #039 url(Images/ECPR_BodyBackground.jpg) 0 0 repeat-x;} body#PrinterFriendly { background:#fff; margin:2em;} body#Popup, body#Flow { background:#fff; margin:4px 0em;} /* Main container for centering (set a fixed width and use auto for left & right margins) * Position set to relative to enable absolute positioning of child elements. */ #Main { position:relative; left:auto; right:auto; width:755px; padding:0; margin:0 auto; border:0; background:#fff;} #PopupMain { left:auto; right:auto; padding:0; margin:0 auto; background:#fff; border:0; } /* Title area - handles logo & ECPR button. * The text "Marconi Sailing Club" is hidden in CSS compliant browsers and * displayed as the background to the strapline. For non-compliant browsers, * the text is displayed, and the background ignored. Simple! */ div#TitleArea { background-color:#fff; width:100%; margin: 0 auto; height:83px;} div#TitleArea .HideFromCSS { display:none; } /* Hide the "Marconi Sailing Club" text from css browsers */ div#TitleArea H2 { margin:0; padding: 50px 0 33px 78px; background: #fff url(Images/MarconiSailingClubLogoText.gif) 78px 16px no-repeat; font: normal 10pt/0 Arial, Helvetica, sans-serif; color: #36f;} div#TitleArea img#Logo { background-color: #fff; margin:8px; padding:0; float:left;} div#TitleArea a img#ECPRButton { border:0; float:right; padding:0; margin:18px 8px;} /* TextOnly version of this site */ div#TitleArea p.TextOnly { position:absolute; right:15px; top:60px; padding:0.5em; font:normal 10pt/0 Arial, Helvetica, sans-serif; color: #369; } div#TitleArea p.TextOnly a { text-decoration:none; } div#TitleArea p.TextOnly a:hover { text-decoration:underline; background:#06f;color:#fff;} /* Title area for popups - significantly different from all other skins */ div#PopupTitleArea { margin:5px 0 5px 15px; padding:0;} /* Dynamic Top-level navigation menu that uses full-on css. */ div#TopNav { z-index:10; width:auto; height:1em; margin:0 auto; padding:0 0 0 15px; font-size:small; font-weight:bold; background:#039 url(Images/CornerTL.jpg) no-repeat top left; } div#Main>div#TopNav { padding:0 0 0.25em 15px; height: 1.8em;} div#TopNav ul { z-index:10; width:auto; margin:0; padding:0; background: #039 url(Images/TopNavRight.jpg) 0 0 no-repeat; height: 2em; } div#TopNav li { z-index:10; position:relative; float:left; list-style:none; margin:0; width:auto; line-height:1.5em; border-right:1px solid #9cf; padding:0.25em 0.5em; /* Applies to all menu title items */ color:#ff0; } div#TopNav li:hover { background:#36f; /* set the background hover colour of NON-parent items */ } div#TopNav li.Title:hover { background:#039; /* set the background hover colour of Titles (the same as the background as you can't *exclude* a specified child). Annoyingly this doesn't work with IE.*/ } div#TopNav li.ParentMenu { /* background:#039; set the background non-hover colour of parent items */ } div#TopNav li.ParentMenu:hover { background:#05f; /* set the background hover of L1 parent items */ } div#TopNav li a { display:block; width:auto; text-decoration:none; padding:0; color:#fff; /* Applies to all anchor (non-title) menu items unless overridden in next rules */} div#TopNav ul.L1 li a { /* color:#f00; */ /* Override properties for L1 AND HIGHER anchor items - if you use this, use all the others */ } div#TopNav ul.L2 li { line-height:1em; /* Override properties for L2 AND HIGHER items - if you use this, use all the others */ } div#TopNav ul.L2 li a { line-height:1em; /* Override properties for L2 AND HIGHER anchor items */ } div#TopNav ul.L3 li a { /* Override properties for L3 AND HIGHER anchor items */} div#TopNav ul.L4 li a { /* Override properties for L4 AND HIGHER anchor items */} div#TopNav ul.L5 li a { /* Override properties for L5 AND HIGHER anchor items */} div#TopNav ul ul { z-index:10; display:none; position:absolute; width:8em; padding:0; font-weight:normal; height:1.5em; /* <-- */ background:#039; /* override parent UL's background image */ border:0; /* border:1px solid #ff0; This is rather strange, both Opera and Mozilla incorrectly render a partial box around drop-down menus */ border-left:1px solid #99c; } div#TopNav ul ul li { width:8em; background:#039; /* Oddity; Mozilla doesn't render the bottom border properly (it misses every second item), so set top border */ border-top:1px solid #9cf; /* border-bottom:1px solid #ff0; */ } div#TopNav li.ParentMenu li.ParentMenu { background:#039 url(Images/RightArrow.gif) 8.5em 0.5em no-repeat; /* render right arrow pointer for parents */} div#TopNav li.ParentMenu li.ParentMenu:hover { background:#05f; /* Background rollover colour for all L2+ items */} div#TopNav ul.L1 li.ParentMenu:hover ul.L2, div#TopNav ul.L2 li.ParentMenu:hover ul.L3, div#TopNav ul.L3 li.ParentMenu:hover ul.L4, div#TopNav ul.L4 li.ParentMenu:hover ul.L5 { display:block;} div#TopNav ul.L2 { z-index:10; top:1.9em; left:-1px; /* set the x-offset for top-level dropdown menus */ border-bottom: 1px solid #99c;} div#TopNav ul.L3, div#TopNav ul.L4, div#TopNav ul.L5 { z-index:10; top:-1px; left:9em; border-bottom: 1px solid #99c;} /* Flow format overrides */ body#Flow div#TopNav { width:100%; background:#039 url(Images/TopNavBackground.jpg) 0 0 repeat-x; } body#Flow div#TopNav ul { background: #039 url(Images/TopNavBackground.jpg) 0 0 repeat-x; } /* East Coast Piers Race colour scheme */ div#ECPRTopNav { z-index:10; width:auto; height:1em; margin:0 auto; padding:0 0 0 15px; font-size:small; font-weight:bold; background:#930 url(Images/ECPR_CornerTL.jpg) no-repeat top left; } div#Main>div#ECPRTopNav { padding:0 0 0.25em 15px; height: 1.8em;} div#ECPRTopNav ul { z-index:10; width:auto; margin:0; padding:0; background: #930 url(Images/ECPR_TopNavRight.jpg) 100% 0 no-repeat; height: 2em; } div#ECPRTopNav li { z-index:10; position:relative; float:left; list-style:none; margin:0; width:auto; line-height:1.5em; border-right:1px solid #f90; padding:0.25em 0.5em; /* Applies to all menu title items */ color:#6cf; } div#ECPRTopNav li:hover { background:#c60; /* set the background hover colour of NON-parent items */ } div#ECPRTopNav li.ECPRTitle:hover { background:#930; /* set the background hover colour of Titles (the same as the background as you can't *exclude* a specified child. Annoyingly this doesn't work with IE. */ } div#ECPRTopNav li.ParentMenu { /* background:#930; set the background non-hover colour of parent items */ } div#ECPRTopNav li.ParentMenu:hover { background:#c60; /* set the background hover of L1 parent items */ } div#ECPRTopNav li a { display:block; width:auto; text-decoration:none; padding:0; color:#fff; /* Applies to all anchor (non-title) menu items unless overridden in next rules */} div#ECPRTopNav ul.L1 li a { /* color:#f00; */ /* Override properties for L1 AND HIGHER anchor items - if you use this, use all the others */ } div#ECPRTopNav ul.L2 li { line-height:1em; /* Override properties for L2 AND HIGHER items - if you use this, use all the others */ } div#ECPRTopNav ul.L2 li a { line-height:1em; /* Override properties for L2 AND HIGHER anchor items */ } div#ECPRTopNav ul.L3 li a { /* Override properties for L3 AND HIGHER anchor items */} div#ECPRTopNav ul.L4 li a { /* Override properties for L4 AND HIGHER anchor items */} div#ECPRTopNav ul.L5 li a { /* Override properties for L5 AND HIGHER anchor items */} div#ECPRTopNav ul ul { z-index:10; display:none; position:absolute; width:8em; padding:0; font-weight:normal; height:1.5em; /* <-- */ background:#930; /* override parent UL's background image */ border:0; /* border:1px solid #ff0; This is rather strange, both Opera and Mozilla incorrectly render a partial box around drop-down menus */ border-left:1px solid #f90; } div#ECPRTopNav ul ul li { width:8em; background:#930; /* Oddity; Mozilla doesn't render the bottom border properly (it misses every second item), so set top border */ border-top:1px solid #f90; /* border-bottom:1px solid #ff0; */ } div#ECPRTopNav li.ParentMenu li.ParentMenu { background:#930 url(Images/RightArrow.gif) 8.5em 0.5em no-repeat; /* render right arrow pointer for parents */} div#ECPRTopNav li.ParentMenu li.ParentMenu:hover { background:#c60; /* Background rollover colour for all L2+ items */} div#ECPRTopNav ul.L1 li.ParentMenu:hover ul.L2, div#ECPRTopNav ul.L2 li.ParentMenu:hover ul.L3, div#ECPRTopNav ul.L3 li.ParentMenu:hover ul.L4, div#ECPRTopNav ul.L4 li.ParentMenu:hover ul.L5 { display:block;} div#ECPRTopNav ul.L2 { z-index:10; top:1.9em; left:-1px; /* set the x-offset for top-level dropdown menus */ border-bottom: 1px solid #f90;} div#ECPRTopNav ul.L3, div#ECPRTopNav ul.L4, div#ECPRTopNav ul.L5 { z-index:10; top:-1px; left:9em; border-bottom: 1px solid #f90;} /* Bottom navigation menu. Also displays bottom border graphic (hence the absolute width & padding). */ div#BottomNav { clear:both; left:auto; right:auto; width:auto; margin:0; padding: 22px 15px 10px 15px; background: #039 url(Images/BottomBorder.gif) no-repeat;} div#BottomNav.ECPR { background: #039 url(Images/ECPR_BottomBorder.gif) no-repeat; /* ECPR Override */ } div#BottomNav ul { position:relative; width:auto; left:auto; right:auto; margin:0; padding: 0; background: #039; font-size:x-small;} /* Two ways of positioning the LI elements; use float=left, or display=inline. Subtle differences in rendering between them. */ /* div#BottomNav li { position:relative; float:left; list-style:none; margin:0 auto; padding: 0 1em; background: #106 url(Images/TopNavDivider.gif) repeat-y left; } */ /* div#BottomNav li { position:relative; display:inline; top:0; left:0; list-style:none; margin:0; padding: 0 1em; background: #106 url(Images/TopNavDivider.gif) repeat-y left; } */ div#BottomNav li { position:static; display:inline; list-style:none; margin:5em 0 0 0; border-left:1px solid #fff; padding:0; background: #039; } div#BottomNav li#BottomNavFirstItem { border-left:0; } /* doesn't show divider on LHS */ div#BottomNav a { padding:0.2em 1em; color: #9cf; text-decoration: none; } div#BottomNav a:hover { color: #fff; text-decoration: underline; /* background-color:#05f; */ } div#BottomNav a.BottomNavCrumbTrail { padding:0.2em 1em; background-color:#05f; color: #fff; text-decoration: none; } div#BottomNav a.BottomNavCrumbTrail:hover { color: #fff; text-decoration: underline; background-color:#05f; } div#BottomNav h1, div#BottomNav h2, div#BottomNav h3, div#BottomNav h4, div#BottomNav p, div#BottomNav li { color: #9cf; } div#BottomNav p a {color:#fff; padding:0; text-decoration:underline;} /* ContentArea. Displays the main page content including left-nav, Content, PictureArea, Masthead, and Search/Logon area. * There are three variants of this ContentArea dependent upon it's class -- OneCol (Content area only - default), * TwoCol (LeftNav and Content), and ThreeCol (LeftNav, Content, and PictureArea). */ div#ContentArea { z-index:9; position:relative; float:left; margin:0; padding: 10px 10px 0 10px; /* padding:98px 0 0 0; */ border-left: 15px solid #9cf; border-right: 15px solid #9cf; background: #fff; width:705px; /* Width needs to be explicitly defined for Opera; doesn't upset the other browsers (note width is calculated as width minus border width) */ font: 1em Verdana, Arial, Helvetica, sans-serif; } body#ECPRTwoCol div#ContentArea, body#ECPRThreeCol div#ContentArea { border-left: 15px solid #f90; border-right: 15px solid #f90; /* ECPR Override */ } body#PrinterFriendly div#ContentArea, body#Popup div#ContentArea, body#Flow div#ContentArea { border:0; width:95%; margin:0 1em; padding:0; /* PrinterFriendly Override */ } /* 'Graphical' main masthead title area. * Masthead is positioned relative to ContentArea, therefore must be contained within ContentArea. It works * due to specificity: it's more specific than the general definitions of h1/h2/h3, etc. * Note this uses a fixed font size - as this emulates a graphical banner. * Specify position once for the div, set the block size for all other items. div#Masthead { position:absolute; left:-15px; top:0; } div#Masthead * { position:relative; height:72px; width:555px; margin:0; padding: 24px 0 3px 20px; color:white; font:italic normal 20pt Verdana, Arial, Helvetica, sans-serif; background: #036 url(Images/banner_image_Home.jpg) 0 0 no-repeat; } */ div#ContentArea div#Masthead { position:absolute; left:-15px; top:0; height:72px; width:555px; margin:0; padding:24px 0 3px 20px; background: #036 url(Images/banner_image_Home.jpg) 0 0 no-repeat; } div#ContentArea div#Masthead * { color:white; border:0; font:italic normal 20pt Verdana, Arial, Helvetica, sans-serif; padding:0; margin:0; } /* Override the pictures/colours for different site sections */ div#ContentArea.Pic1 div#Masthead { background: #036 url(Images/banner_image_Home.jpg) 0 0 no-repeat; } div#ContentArea.Pic2 div#Masthead { background: #036 url(Images/banner_image_Dinghies.jpg) 0 0 no-repeat; } div#ContentArea.ECPR div#Masthead { background: #630 url(Images/banner_image_EastCoast.jpg) 0 0 no-repeat; } /* PrinterFriendly override */ body#PrinterFriendly div#ContentArea div#Masthead, body#Popup div#ContentArea div#Masthead { position:static; left:0; top:0; height:auto; width:auto; padding:0; margin:0; background:none; } body#PrinterFriendly div#ContentArea div#Masthead *, body#Popup div#ContentArea div#Masthead * { color:#036; } /* Search and logon input fields. These are contained in the Main area, but displayed in the Content area. * * Have a small 'challenge' here; can't use float as this imposes the source order (we must have the content all together) * so therefore we can't use float and are forced to use absolute positioning. Note that as the Main area has the position * defined as relative, absolute positioning is relative to the Main element, not the root (html/body) element. * Note this uses a fixed font size - as it is only a simple label and must fit within the boundaries of the box. */ div#SearchLogon { position:relative; float:right; right:-25px; top:-10px; height:99px; border:0; margin:0; padding:0; background:#106; width:184px; font-size:10pt; } div#SearchLogon.ECPRsrch { background:#930; /* Override colour for ECPR */ } /* #Main>div#SearchLogon { height:100px; right:0; } Minor irritant with IE6: different understanding of the box model. This is ignored by IE6, but interpreted by other browsers */ #frmSearch { background-color: #9cf; left:auto; right:auto; padding:4px; margin:10px 15px 0 15px; } #frmLogon { background-color: #039; left:auto; right:auto; padding:4px; margin:0 15px 10px 15px; } div#SearchLogon.ECPRsrch #frmSearch { background-color:#f90; /* Override colour for ECPR */ } div#SearchLogon.ECPRsrch #frmLogon { background-color:#039; /* Override colour for ECPR */ } .txtSearch { display:inline; margin:2px; padding:1px; vertical-align: middle; border:0; background-color: #fff; width:90px; font: 10px Verdana, Arial, Helvetica, sans-serif;} .txtUser { display:block; /* Note the "display:block" to add a break after the User name field */ margin:2px; padding:1px; vertical-align: middle; border:0; background-color: #fff; width:90px; font: 10px Verdana, Arial, Helvetica, sans-serif;} .txtPass { display:inline; margin:2px; padding:1px; vertical-align: middle; border:0; background-color: #fff; width:90px; font: 10px Verdana, Arial, Helvetica, sans-serif;} .btnGo { display:inline; vertical-align: middle; padding: 0 0 1px 0; border:1px solid; background-color:#79a; border-bottom-color:#567; border-left-color:#bdf; border-top-color: #bdf; border-right-color: #567; color: #fff; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } form#frmLogon p { width:auto; margin:0; padding:0; font-size:10px; color:#fff; } form#frmLogon p em { font-weight:bold; text-decoration:normal; font-style:normal; } .btnLogoff { float:right; vertical-align: middle; margin:0; padding: 0; border:1px solid; background-color:#79a; border-bottom-color:#567; border-left-color:#bdf; border-top-color: #bdf; border-right-color: #567; color: #fff; font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } /* Left-hand navigation menu - 'standard format'; contained in the ContentArea to float left. * Displayed as a vertical menu of lists in lists. */ /* div#LeftNav { float:left; background:#039; width:150px; border:0; margin:0; padding:15px 0; } */ div#LeftNav { float:left; position:relative; left:-10px; background:#039; width:150px; border:0; margin:89px 0 0 0; padding:15px 0; } div#LeftNav ul { margin:0; padding:0; border:0; } /* L1 */ div#LeftNav ul li { display:inline; list-style:none; margin:0; background:#039 url(Images/TopNavBackground.jpg) 0 0 repeat-x; color:#fff; font-weight: bold; } div#LeftNav ul li a { display:block; width:135px; padding:0 5px 0 10px; border-top:1px solid #9cf; color:#fff; text-decoration:none; background:#039; /* No arrow icon for L1 items */ } /* For anchor items */ div#LeftNav ul li a:hover { background:#05f; } div#LeftNav ul li.Title { display:block; width:140px; margin:0; border-top:1px solid #9cf; padding:10px 0 0 10px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps; } div#LeftNav ul li#LeftNavFirstItem { border-top:0;} /* crude, but works to remove the top boder on the first title item */ /* L2 */ div#LeftNav ul li ul li { display:inline; list-style:none; margin:0; background:#039; color:#fff; } div#LeftNav ul ul li a { display:block; width:120px; padding:0 5px 0 25px; border:0; color:#fff; background:#039 url(Images/RightArrow.gif) 18px 0.33em no-repeat; text-decoration:none; font-weight: normal; } /* For anchor items */ div#LeftNav ul ul li a:hover { background:#05f url(Images/RightArrow.gif) 18px 0.33em no-repeat; } div#LeftNav ul ul li.Title { display:block; width:130px; margin:2px 0 0 0; border:0; padding:0 0 0 20px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps; } /* L3 */ div#LeftNav ul li ul li ul li { display:inline; list-style:none; margin:0; background:#039; color:#fff; } div#LeftNav ul ul ul li a { display:block; width:110px; padding:0 5px 0 35px; border:0; color:#fff; background:#039 url(Images/RightArrow.gif) 28px 0.33em no-repeat; text-decoration:none; font-weight: normal; } /* For anchor items */ div#LeftNav ul ul ul li a:hover { background:#05f url(Images/RightArrow.gif) 28px 0.33em no-repeat; } div#LeftNav ul ul ul li.Title { display:block; width:120px; margin:0; border:0; padding:0 0 0 30px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps;} /* Left-nav rollover background colour */ div#LeftNav a:hover { background:#05f; } /* Left-nav crumbtrail colours */ div#LeftNav a.LeftNavCrumbTrail { background:#36f; text-decoration: none; } div#LeftNav a.LeftNavCrumbTrail:hover { background:#36f; text-decoration: underline; } /* Email and PrinterFriendly links. * Bit of an odd shape, largely due to positioning. */ div#LeftNav p {margin:0; padding:0; } div#LeftNav p a { display:block; width:auto; text-decoration:none; margin:0; font: normal normal 0.9em Verdana, Arial, Helvetica, sans-serif; } div#LeftNav p a#PrinterFriendly { padding:20px 0 5px 24px; border-top:1px solid #9cf; background: #039 url(Images/PrinterIcon.gif) 5px 24px no-repeat; color: #9cf; } div#LeftNav p a#PrinterFriendly:hover { padding:20px 0 5px 24px; border-top:1px solid #9cf; background: #05f url(Images/PrinterIcon.gif) 5px 24px no-repeat; color: #fff; } div#LeftNav p a#EmailPage { padding:5px 0 20px 24px; background: #039 url(Images/EmailIcon.gif) 5px 7px no-repeat; color: #9cf; } div#LeftNav p a#EmailPage:hover { padding:5px 0 20px 24px; background: #05f url(Images/EmailIcon.gif) 5px 7px no-repeat; color: #fff; } div#LeftNav p a:hover { background-color:red;} /* Left-hand navigation menu - ECPR colour scheme; contained in the ContentArea to float left. * Displayed as a vertical menu of lists in lists. */ /* div#ECPRLeftNav { float:left; background:#039; width:150px; border:0; margin:0; padding:15px 0; } */ div#ECPRLeftNav { float:left; position:relative; left:-10px; background:#930; width:150px; border:0; margin:89px 0 0 0; padding:15px 0; } div#ECPRLeftNav ul { margin:0; padding:0; border:0; } /* L1 */ div#ECPRLeftNav ul li { display:inline; list-style:none; margin:0; background:#930; color:#fff; font-weight: bold; } div#ECPRLeftNav ul li a { display:block; width:135px; padding:0 5px 0 10px; border-top:1px solid #fc9; color:#fff; text-decoration:none; background:#930; /* No arrow icon for L1 items */ } /* For anchor items */ div#ECPRLeftNav ul li a:hover { background:#c60; } div#ECPRLeftNav ul li.Title { display:block; width:140px; margin:0; border-top:1px solid #fc9; padding:10px 0 0 10px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps; } div#ECPRLeftNav ul li#LeftNavFirstItem { border-top:0;} /* crude, but works to remove the top boder on the first title item */ /* L2 */ div#ECPRLeftNav ul li ul li { display:inline; list-style:none; margin:0; background:#930; color:#fff; } div#ECPRLeftNav ul ul li a { display:block; width:120px; padding:0 5px 0 25px; border:0; color:#fff; background:#930 url(Images/RightArrow.gif) 18px 0.33em no-repeat; text-decoration:none; font-weight: normal; } /* For anchor items */ div#ECPRLeftNav ul ul li a:hover { background:#c60 url(Images/RightArrow.gif) 18px 0.33em no-repeat; } div#ECPRLeftNav ul ul li.Title { display:block; width:130px; margin:2px 0 0 0; border:0; padding:0 0 0 20px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps; } /* L3 */ div#ECPRLeftNav ul li ul li ul li { display:inline; list-style:none; margin:0; background:#930; color:#fff; } div#ECPRLeftNav ul ul ul li a { display:block; width:110px; padding:0 5px 0 35px; border:0; color:#fff; background:#930 url(Images/RightArrow.gif) 28px 0.33em no-repeat; text-decoration:none; font-weight: normal; } /* For anchor items */ div#ECPRLeftNav ul ul ul li a:hover { background:#c60 url(Images/RightArrow.gif) 28px 0.33em no-repeat; } div#ECPRLeftNav ul ul ul li.Title { display:block; width:120px; margin:0; border:0; padding:0 0 0 30px; color:#ff0; font-weight:bold; /* font-size:smaller; */ font-variant:small-caps;} /* Left-nav rollover background colour */ div#ECPRLeftNav a:hover { background:#c60; } /* Left-nav crumbtrail colours */ div#ECPRLeftNav a.LeftNavCrumbTrail { background:#f90; text-decoration: none; } div#ECPRLeftNav a.LeftNavCrumbTrail:hover { background:#f90; text-decoration: underline; } /* Email and PrinterFriendly links. * Bit of an odd shape, largely due to positioning. */ div#ECPRLeftNav p {margin:0; padding:0; } div#ECPRLeftNav p a { display:block; width:auto; text-decoration:none; margin:0; font: normal normal 0.9em Verdana, Arial, Helvetica, sans-serif; } div#ECPRLeftNav p a#PrinterFriendly { padding:20px 0 5px 24px; border-top:1px solid #fc9; background: #930 url(Images/ECPR_PrinterIcon.gif) 5px 24px no-repeat; color: #fc9; } div#ECPRLeftNav p a#PrinterFriendly:hover { padding:20px 0 5px 24px; border-top:1px solid #fc9; background: #c60 url(Images/ECPR_PrinterIcon.gif) 5px 24px no-repeat; color: #fc9; } div#ECPRLeftNav p a#EmailPage { padding:5px 0 20px 24px; background: #930 url(Images/ECPR_EmailIcon.gif) 5px 7px no-repeat; color: #fc9; } div#ECPRLeftNav p a#EmailPage:hover { padding:5px 0 20px 24px; background: #c60 url(Images/ECPR_EmailIcon.gif) 5px 7px no-repeat; color: #fc9; } div#ECPRLeftNav p a:hover { background-color:red;} /* PictureArea third column, displayed on RHS of ContentArea. */ /* #PictureArea { float:right; width:150px; margin: 0; border-left: 1px dotted #999; padding:0 0 0 10px; background:#fff;} */ /* div#PictureArea { position:absolute; width:140px; right:0; top:99px; margin:0; border-left:1px dotted #999; padding:10px; background:#fff;} */ div#PictureArea { float:right; position:relative; top:-10px; width:140px; margin:0; border-left:1px dotted #999; padding:0 0 0 10px; background:#fff;} div#PictureArea p, #PictureArea h1, #PictureArea h2, div#PictureArea h3 { margin:0; padding:0; font-size:0.8em; background:#fff;} div#PictureArea img { margin:0; padding:0; background:#fff; } div#PictureArea p img { margin-top:10px; padding:1px; background:#fff; } /* Need different formatting for the popup's picture area -- don't display */ body#Popup div#PictureArea { display:none; /* float:none; border:0; position:absolute; right:0; top:10px; */ } /* List Controls * Formatting of the Cobra list control (lists of items such as press releases, etc.). */ div#ListControl {z-index:9; position:relative; padding:0; margin:110px auto 1em auto; /* Has the large margin to get it out of the way of the Masthead */ } div#ContentArea.OneCol #ListControl { width:auto; text-align:center; } div#ContentArea.TwoCol #ListControl { width:550px; text-align:center;} div#ContentArea.ECPRTwoCol #ListControl { width:550px; text-align:center;} div#ContentArea.ThreeCol #ListControl { display:block; width:395px; text-align:center;background:#fff;} div#ContentArea.ThreeCol>div#ListControl { width:560px; /* seems to keep Firefox happy */ } div#ListControl select { width:300px; margin:0; padding:1px; border:0; background-color:#fff; color:#036; font-size:0.9em; font-weight:bold;} div#ListControl select option {background-color:#fff; color:#036; } div#ListControl select option:hover {background-color:#36f; color:#fff; /* looks nice in other browsers but IE doesn't support it */ } /* Nice CSS version of the form & JS lists */ /* div#CSSListControl { position:relative; padding:0; margin:0 auto; clear:right; border:solid 10px red;} */ ul.CSSListControl { position:relative; margin:0 auto; padding:0; clear:right; width:300px; /* 200px */ border-top:1px solid #9cf; border-right:2px solid #003; border-bottom:2px solid #003; border-left:1px solid #9cf; } ul.CSSListControl li { display:inline; list-style:none; /* padding:0; margin:0; border:0; border-top:1px solid #05a; */ } ul.CSSListControl li.SelectedListItem a { background:#05f url(Images/RightArrow.gif) 5px 0.5em no-repeat; font-weight:bold;} ul.CSSListControl li a { width:290px; display:block; padding:0.1em 0 0.1em 10px; color:#fff; text-decoration:none; margin:0; background:#039 url(Images/RightArrow.gif) 5px 0.5em no-repeat; border-top:1px solid #05a; } ul.CSSListControl li a:hover { background:#05f url(Images/RightArrow.gif) 5px 0.5em no-repeat; text-decoration:none; } /* width and colour overrides for ECPR */ body#ECPROneCol ul.CSSListControl li.SelectedListItem a, body#ECPRTwoCol ul.CSSListControl li.SelectedListItem a, body#ECPRThreeCol ul.CSSListControl li.SelectedListItem a { background-color:#f90; } body#ECPROneCol ul.CSSListControl li a, body#ECPRTwoCol ul.CSSListControl li a, body#ECPRThreeCol ul.CSSListContro li a { background-color:#c60; border-top-color:#d88;} body#ECPROneCol ul.CSSListControl li a:hover, body#ECPRTwoCol ul.CSSListControl li a:hover, body#ECPRThreeCol ul.CSSListContro li a:hover { background-color:#f90; } /* Content areas: display the actual content from Cobra-CMS. * Three variants of this area depending upon the class of the ContentArea (OneCol, TwoCol, ThreeCol). * Overall size: 755px - (less margins & borders) */ div#Content {float:left; margin:0; padding:0; width:auto; background:#fff; } body#OneCol div#ContentArea #Content {width:700px; background-color:#fff;} body#TwoCol div#ContentArea #Content, body#ECPRTwoCol div#ContentArea #Content {width:530px; background-color:#fff;} /* Can't set to larger than 555px as IE6 falls over! */ body#ThreeCol div#ContentArea #Content, body#ECPRThreeCol div#ContentArea #Content {width:390px; margin:0; background-color:#fff;} /* Can't set to anything larger than 385px as IE6 falls over! */ /* Printer friendly format layout. Unfortunately we're a bit of a victim of css' lack of */ body#PrinterFriendly #ContentArea {background-color:#fff; width:auto;} body#PrinterFriendly #Content {background-color:#fff; width:70%;} body#PrinterFriendly #PictureArea {float:right; width:26%; top:0; right:0; } /* Just for a larf, hide the unused columns for OneCol/TwoCol -- means we can change the layout by just changing one class, * e.g.
*/ body#OneCol #ContentArea #LeftNav {display:none;} body#OneCol #ContentArea #PictureArea {display:none;} body#TwoCol #ContentArea #PictureArea {display:none;} body#ECPRTwoCol #ContentArea #PictureArea {display:none;} /* Main Content styles, apply to all three Content variants */ #ContentArea h1 { font-size:1.5em; font-weight: bold; color:#339; border-bottom: 1px dashed #339; margin-top:0.33em; margin-bottom:0.5em; } #ContentArea h2 { font-size:1.25em; font-weight: bold; color:#339; margin-top:1.33em; margin-bottom:0.33em; } #ContentArea h3 { font-size:1.1em; font-weight:bold; color:#339; margin-top:1.33em; margin-bottom:0.33em; } #ContentArea h4, #Content h5, #Content h6 { font-size:0.9em; font-weight:bold; color:#339; margin-top:1.33em; margin-bottom:0.33em; } #ContentArea p, #Content li { font-size:0.9em; padding: 0; margin-top:0.66em; margin-bottom:0.66em; } #ContentArea li { margin-top:0.25em; margin-bottom:0; /* have a smaller gap between list items than for paragraphs */ } #ContentArea ul { margin-top:0.5em; margin-bottom:0.5em; /* have a smaller gap between list items than for paragraphs */ } #ContentArea img { margin:0.66em; border:0; padding:0; } /* Page last updated text formatting. */ div#ContentArea p.PageLastUpdated { font-size:0.66em; clear:both; text-align:right; margin:0.1em 0 0.5em 0; color:#06c;} body#ECPRTwoCol p.PageLastUpdated, body#ECPRThreeCol p.PageLastUpdated { color:#930; } /* Table styles */ #ContentArea table { border-collapse:collapse; border:1px solid #ccc; /* outer border of the table */ margin:1em auto; /* Centre align the table within the text (same as */ } #ContentArea th { padding:1px 0.5em; border:1px solid #fff; text-align:left;font-size:0.85em; font-weight:bold; vertical-align:top; color:#000; /* Heading text colour */ background:#e6e6e6; /* Heading background colour */} #ContentArea td { border:1px solid #ccc; padding:1px 3px; font-size:0.85em; vertical-align:top; color:#000; /* Cell text colour */ background:#ffe; /* Cell background colour */ } /* Layout table; as used by search, etc. * Have to use div#ContentArea due to specificity */ div#ContentArea table.Layout { border-collapse:collapse; border:0; /* outer border of the table */ margin:1em auto; /* Centre align the table within the text (same as
*/ } div#ContentArea table.Layout th { padding:1px 0.5em; border:0; text-align:left; font-size:0.85em; font-weight:bold; vertical-align:top; color:#000; /* Heading text colour */ background:#e6e6e6; /* Heading background colour */} div#ContentArea table.Layout td { border:0; padding:1px 3px; font-size:0.85em; vertical-align:top; color:#000; /* Cell text colour */ background:#ffe; /* Cell background colour */ } /* Homepage content areas;
and
*/ div#ContentArea div#HomeLeftContent { float:left; width:410px; position:static; display:block; padding:2px 0; margin:0; background-color:#fff; border:0;} div#ContentArea div#HomeLeftContent .LeadIn { font-size:1.2em; font-weight: bold; font-style:normal; color:#339; margin-top:0; margin-bottom:0.2em; /* Lead-in; kind of like a H2, but not flagged that way */} div#ContentArea div#HomeRightContent { float:right; position:relative; top:0; right:-5px; width:260px; margin:0; padding:2px 10px; border:1px solid #06c; background-color:#e9e9e9;} div#ContentArea div#HomeRightContent h1 { margin-top:0; margin-bottom:0.33em; /* Reduce the size of the homepage vertical gaps */ } div#ContentArea div#HomeRightContent h2 { background:#ddd; font-size:1em; margin-top:0; margin-bottom:0.2em; /* Reduce the size of the homepage vertical gaps */ } div#ContentArea div#HomeRightContent h3 { background:#ddd; font-size:1em; margin-top:0; margin-bottom:0.2em; /* Reduce the size of the homepage vertical gaps */ } div#ContentArea div#HomeRightContent h4 { font-size:1em; margin-top:0; margin-bottom:0.2em; /* Reduce the size of the homepage vertical gaps */ } div#ContentArea div#HomeRightContent p { margin-top:0; margin-bottom:1em; /* Reduce the size of the homepage vertical gaps */ } /* Inline image style classes */ .Left { border:0; margin: 3px 1em 3px 0; padding:0; } .Right { border:0; margin: 3px 0 3px 1em; padding:0; } .Centre { border:0; margin:1em auto; padding:0p } /* Search results formatting */ #SearchResults {margin:1em auto;} #SearchResults table { border-collapse:collapse; font-size:1.15em; border:0; /* outer border of the table */ margin:1em 0 1em 2em; /* Centre align the table within the text (same as
*/ } #SearchResults th { padding:1px 0.5em; border-top:1px solid #fff; text-align:left;font-size:0.85em; font-weight:bold; vertical-align:top; color:#000; /* Heading text colour */ background:#fff; /* Heading background colour */} #SearchResults td { border:0; padding:0.5em 3px; font-size:0.85em; vertical-align:top; color:#000; /* Cell text colour */ background:#fff; /* Cell background colour */ } #SearchResults label {display:inline; } .SearchInputField { display:inline; margin:2px; padding:1px; vertical-align: middle; border:1px solid #06c; background-color: #fff; width:190px; font: 10px Verdana, Arial, Helvetica, sans-serif;} /* Photo Gallery Table styles */ div#ContentArea table.Gallery { table-layout:auto; border-collapse:separate; border-width:10px; border:0; /* outer border of the table */ margin:1em auto; /* Centre align the table within the text (same as
*/ } div#ContentArea table.Gallery th, /* headings & cells formatted the same */ div#ContentArea table.Gallery td { margin:0; padding:0 2px; font-size:0.85em; vertical-align:top; text-align:center; width:140px; border-top:1px solid #ccc; border-right:2px solid #666; border-bottom:2px solid #666; border-left:1px solid #ccc; color:#036; /* Cell text colour */ background:#ffc; /* Cell background colour */ } table.Gallery td p {text-align:center; padding:0; margin:0; border:0;} /* Hide the hyperlink to skip the navigation menus from compliant(ish) browsers. */ #SkipNav { display:none; } /* Utility class to hide some object - probably for a broken browser. */ .Hide { display:none; } /* Don't display labels. Most browsers won't, but IE5/5.5 is knackered and needs to be explicitly told not to! */ label { display:none; } /* Comment styling */ #Comments { float:right; background:#f7f7f7; border:1px solid #ccc; padding:1em; } body#OneCol div#Comments { width:690px; } body#TwoCol div#Comments, body#ECPRTwoCol div#Comments { width:520px; } /* Can't set to larger than 555px as IE6 falls over! */ body#ThreeCol div#Comments, body#ECPRThreeCol div#Comments { width:380px; } /* Can't set to anything larger than 385px as IE6 falls over! */ #Comments #CommentBody h3 { margin:0.5em 0 0; padding:0; font-size:small;} #Comments #CommentBody h4 { margin:0 0 1em 1em; padding:0; font-weight:normal; font-size:x-small; color:#666; } #Comments #CommentBody p { margin:0.5em 0; padding:0; } #Comments #CommentForm p.CommentFormErrors { clear:both; float:left; width:510px; margin:0.2em 0; padding:0; color:#f33; font-weight:bold; } #Comments #CommentForm .FormFieldError { background:#ffe7e7; border:1px solid red;} #Comments #CommentForm hr { clear:both; } #Comments #CommentForm p { xclear:both; xfloat:left; width:510px; margin:0.2em 0; padding:0; border:0px solid red; } #Comments #CommentForm label { display:block; float:left; clear:left; width:120px; margin:2px 15px 0 0; } #Comments #CommentForm input { float:left; width:340px; margin:1px 0; } #Comments #CommentForm textarea { float:left; width:340px; height:150px; } #Comments #CommentForm p.Buttons { width:350px; padding:5px 5px 5px 130px; } #Comments #CommentForm input.Button { width:auto; margin:5px; } #Comments #CommentForm input.EditMyCommentsButton { width:auto; margin:5px 0px; float:right; clear:right; }