/* 1st Kimpton Rainbows Stylesheet */ /* Main structural divs and body */ body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; font-size: 0.875em; /* Sets base font-size for site - usual default font-size for browsers is 16pt therefore 16*0.875 = 14pt */ color: #000000; background-color: #7DD2F7; /* Blue from the Rainbows uniform. The red from the Rainbows uniform is #ED1B24. */ margin: 4px 4px 4px 4px; } div#maincontent { position: relative; width: 870px; left: 50%; margin-left: -435px; background-color: #FFFFFF; text-align: center; } div#header { background: url(../images/1stkimptonrainbowsmasthead.gif) top center no-repeat; width: 870px; margin: 0 auto; height: 107px; } div#center { text-align: center; margin: 0 auto; padding: 0; width: 870px; } /* wrapper div needed to correct horizontal centering bug in IE<7 (see www.yourhtmlsource.com/stylesheets/csslayout.html) */ div#wrapper { margin: 0 auto; width: 870px; text-align: left; } div#content { width: 870px; margin: 0 auto; text-align: center; padding: 0; } div#top { width: 870px; margin: 0 auto; background-color: #7DD2F7; } div#leftcol { margin: 0 5px 0 0; width: 100px; height: 718px; float: left; text-align: left; padding: 0; background: url(../images/rainbowclips.gif) top center no-repeat; } div#main_full { float: left; width: 759px; padding: 3px 3px 3px 3px; text-align: left; } /* Main menu container centre top (ie. in div#top) */ div#top ul { width: 870px; margin: 0; padding: 0; } div#top ul li { display: inline; /* Shows each item side-by-side */ list-style-type: none; /* Removes bullet points */ /* white-space: nowrap; - Prevents menu item text breaking across lines - Removed because works with IE6 and IE7 but fault with IE8, FireFox, Safari and Chrome */ line-height: 1.5em; } div#top ul li a:link, div#top ul li a:visited { padding: 0 0 0 4px; /* Provides horizontal separation between menu items */ text-decoration: none; color: #FFFFFF; font-weight: normal; font-size: 1em; margin: 0; } div#top ul li a:hover { color: #FFFFFF; text-decoration: underline; } /* .active is the class of the menu item which represents the current page - not used here */ /* Footer */ div#footer { margin: 0 auto; width: 870px; height: 10px; text-align: center; vertical-align: top; padding: 10px 0; background-color: #7DD2F7; color: #FFFFFF; font-size: 0.785em; /* 0.785 * base font-size in = 0.785*14 = 11pt */ } div#footer a:link, div#footer a:visited { color: #FFFFFF; font-size: 1em; /* ie. 100% of the div#footer font-size = 1*0.785*14 = 11pt */ font-family: Arial, Helvetica, sans-serif; text-decoration: underline; } div#footer a:hover { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; } .copyright { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; /* ie. 100% of the div#footer font-size = 1*0.785*14 = 11pt */ padding: 0; margin: 0; text-align: center; } a.copyright:link, a.copyright:visited { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; /* ie. 100% of the div#footer font-size = 1*0.785*14 = 11pt */ padding: 0; margin: 0; text-align: center; } /* Miscellaneous HTML tags and classes */ h1 { font-family: Arial, Helvetica, sans-serif; color: #ED1B24; /* Red from the Rainbows uniform */ text-align: center; font-size: 150%; font-weight: bold; padding: 10px; margin-top: 5px; margin-bottom: 25px; border-bottom: 2px solid #ED1B24; width: auto; /* Use width:auto not width:100% because width:100% makes the element 100% of its containing element *PLUS* margins and borders, and therefore the element would extend to *WIDER* than its containing element - using width:auto *INCLUDES* the container box and all padding, margins and borders *WITHIN* the containing element - see http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100 */ } h2 { font-family: Arial, Helvetica, sans-serif; color: #ED1B24; text-align: center; font-size: 150%; font-weight: bold; margin-top: 5px; margin-bottom: 25px; } h3, h4 { font-family: Arial, Helvetica, sans-serif; color: #ED1B24; text-align: center; font-size: 125%; font-weight: normal; margin-top: 0; margin-bottom: 25px; } td { font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 1em; /* Maintains base font size in for table contents */ } ul { margin: 0; padding: 0; list-style: none; } li { padding-left: 12px; padding-top: 0; } a:link, a:visited { text-decoration: underline; font-weight: normal; color: #000000; } a:hover { text-decoration: none; font-weight: normal; color: #000000; } p { padding: 0 0 1em 0; margin: 0; text-align: left; } /* General bulleted list */ ul.discList { list-style-type: disc; margin-left: 15px; margin-bottom: 12px; } .clr { clear: both; } .quotation { font-family: Arial, Helvetica, sans-serif; color: #000000; text-align: left; font-size: 100%; font-style: italic; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; } /* Images */ a img { border: 0; } img.centered { display: block; margin-left: auto; margin-right: auto; } img.websafeImage { border: 0px; padding: 0px; float: right; margin: 0 0 15px 15px; } /* Styles for Programme page */ table.programmeTable { width: 100%; /* Needed because tables have their default width set to auto, ie. they stretch by default only as far as their content */ border-collapse: collapse; /* Equivalent of setting cellspacing="0" in the HTML (see http://stackoverflow.com/questions/339923/how-to-set-cellpadding-cellspacing-in-css) */ font-size: 100%; border: 1px solid #7DD2F7; } table.programmeTable td { font-size: 100%; border: 1px solid #7DD2F7; padding: 3px; /* Equivalent of setting cellpadding="3" in the HTML (see http://stackoverflow.com/questions/339923/how-to-set-cellpadding-cellspacing-in-css) */ margin: 0; vertical-align: top; text-align: left; } table.programmeTable tr.headerrow1, table.programmeTable tr.headerrow1 td, table.programmeTable td.headerrow1 { vertical-align: top; font-weight: bold; background: #C4F5FB; } table.programmeTable tr.headerrow2, table.programmeTable tr.headerrow2 td, table.programmeTable td.headerrow2 { vertical-align: top; font-weight: bold; background: #C4F5FB; text-align: center; } table.programmeTable tr.headerrow3, table.programmeTable tr.headerrow3 td, table.programmeTable td.headerrow3 { vertical-align: top; background: #C4F5FB; } tr.redrow, tr.redrow td, td.redrow { vertical-align: top; color: red; } /* Styles for Patrols page */ table.patrolsTable { border-collapse: collapse; font-size: 100%; border: none; } table.patrolsTable td { vertical-align: top; text-align: left; } table.patrolsTable td.centered { vertical-align: top; text-align: center; } img.patrolsEmblem { border: 0; margin: 0; } /* Styles for Announcements page */ div.announce { padding: 6px; border: 1px solid #FF0000; } .announcementSubheading { color: #ED1B24; font-weight: bold; } /* Styles for Badges page */ .badges ul { float: left; margin: 0; } .badges ul li { margin: 0; padding: 0 0 16px 0; list-style-type: none; float: left; width: 118px; height: 80px; text-align: center; } .badges ul li span { display: block; margin: 4px 0 0 0; } .badges ul li a { color: #000000; width: 118px; display: block; text-decoration: underline; } .badges ul li a:hover { color: #000000; text-decoration: underline; } /* Styles for Rainbow Song page */ .lyrics { font-style: italic; }