/* Generic Default CSS */
/* NAME OF SCHOOL HERE */
/* PrimarySchool CSS v1.9 */
/* Basic CSS Framework */
/*
(c) 2006 Robert Willie.
22 November 2006.
All Rights Reserved
This CSS cannot be resold, redistributed or reused without express permission.
Contact: robert_willie@hotmail.com
Author: Robert Willie
BEST VIEWED IN NOTEPAD ++ http://notepad-plus.sourceforge.net/
Table of Contents
1. General page layout
2. Page Titles
3. Accessibility and General Navigation
4. Home page elements
5. Kids' Zone
6. Classpages
7. Primarysite CMS specific styles
The plan is to try and keep this Pure - so no hacks. I've written a style sheet selector that works out if the browser is IE or not IE and forwards the correct style sheet. The Switcher can be adapted to be more browser specific too. Please put any IE specific styles into the IE_default_school.css sheet.
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Navigation Styles
Firstly we need to choose our nav type :-)
Comment out link to stylesheet that is not required - Edit stylesheet that is required. */
/*@import url(../styles/popup_nav.css);*/
@import url(../styles/list_nav.css);
/*(1) General Page layout
General notes on background images
This CSS relies heavily on the use of background images for decorative purposes. You will need to change the properties of the respective element to accommodate your own images. For example, if your image is 200px wide, by 100px high you will need to chnage the width and height of the element so that this image fits */
html,body{
margin: 0;
padding: 0;
font-family: Trebuchet MS, Verdana, sans-serif;
font-size: small;
color: #000000;
background-color: #043080;
background-image: url(../images/bg_body.jpg);
background-repeat: repeat-x;
}
#header{
height: 131px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}
/* #container , #container2, #container3 and #container4 are wrappers that contain col-one and col-two.
#container is for the main horizontal graphic that goes down the page (Y axis). The other containers are there so you can place additional graphics such as a watermark, or an image at the bottom of the page that extends under the footer.
http://www.westfield-inf.leics.sch.uk/ uses this technique for the bear's head at the base of the navigation. More containers can be added for extra background images, but the basic framework caters for 4.*/
#container{
margin: 0px auto;
background-color: #FDFAE9;
width: 780px;
position: relative;
top: 0px;
border: #ECC005 solid 3px;
}
#container2{
margin: 0px auto;
width: 780px;
position: relative;
background-image: url(../images/watermark.gif);
background-repeat: no-repeat;
background-position: top left;
top: 0px;
}
/* #col-one and #col-two are the main content areas. #col-one is used to provide a smaller box (for navigation), while #col-two is used to provide a bigger one. #col-one has absolute positioning, while #col-two is relative to the document. The only key thing to know about their usage is that the right margin on #col-two needs to be set with the width of #col-one in mind, and the min-height of col-two for some designs will need to be set so that it matches up with the bottom of col-one.
For example: #col-one is 100px wide, you will need to ensure that the left-margin on #col-two is greater than 100px */
#col-one{
position: absolute;
top: 131px;
left: 0px;
width: 171px;
margin: 0px 0px 0px 0px;
padding: 0px;
padding-top: 20px;
height: 432px;
background: url(../images/col-one-bg.jpg) no-repeat;
z-index: 10;
}
#col-two{
top: 0px;
margin: 0px 15px 20px 171px;
padding: 0px 0px 0px 0px;
position: relative;
min-height: 440px;
}
#footer{
height: 1px;
clear: both;
}
#randoms{
z-index: 100;
} /* Container in which on refresh image generator sits, not used on many sites, and often placed in header */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*(2) Page Titles
These have been set up with the base pages in mind, for additional page titles, please add to this, following the same syntax.
In the Xhtml:
Welcome
In the CSS:
height = height of your widest image,
width = width of your largest image,
margin = 0 auto as we want this to be in the middle of the box
text-align = center / left / right etc depending on where you wish the text to show,
text-indent = -5000px if you want to push the text off the screen, and only have the image showing
background-image = set this to none if you dont want background images to show.
*/
#title_brainbuilders,
#title_calendar,
#title_classpages,
#title_clubs,
#title_contact,
#title_curriculum,
#title_english,
#title_friendsreunion,
#title_gallery,
#title_games,
#title_governors,
#title_guestbook,
#title_history,
#title_keyinformation,
#title_kidszone,
#title_ks1links,
#title_ks2links,
#title_letters,
#title_maths,
#title_news,
#title_newsletters,
#title_parents,
#title_pta,
#title_science,
#title_staff,
#title_tour,
#title_welcome,
#title_whoswho,
#title_yeargroups
{
text-align:center;
margin: 0 0 1em 0;
font-size: large;
color: #3C52AC;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* (3) Accessibility and General Navigation
I'm not an accesssibility expert, but here are some styles which are used conjunction with the alternative style sheets for accessibility purposes.
Something to note:
visibility: hidden will hide content, while, display: none, will remove it from the flow. Display none has been known to remove content from screen readers.
.hidden_item is used to remove items from display in the normal view, but we can make this visible in other views.
*/
.hidden_item{
display:none;
}
.hiddenheadtext{
display: none;
}
#loginbox{
padding: 5px;
}
/* .accesstext is used to style the accesskey text. For example, we can hide the accesskey text from the normal view, but show it the alternative views */
.accesstext{
display: none;
}
#accessie {
display: none;
}
/* This style is for IE - it's property is given in the IE specific style sheet, but set to display none here */
#wai_logo img {border: none;} /* If you're satisfied that the site conforms to WAI standards, drop in a link , and remove the image border with this. */
/*This is used to style a link that will skip the navigation, going straight to the main content. */
#skip a{
color: #000000;
}
#skip a:hover{
color: #000000;
}
#skip a:visited{
color: #000000;
}
#skip a:active{
color: #000000;
}
/* For links to work, they must be in this order.. */
a{
color: #004e97;
text-decoration: none;
}
a:hover{
color: #870097;
text-decoration: underline;
}
/* Styles for links at the bottom of the page */
#bottomlinks ul li{
color: #FFFFFF;
font-weight: bold;
padding: 5px;
list-style-type: none;
display: inline;
}
#bottomlinks a{
text-decoration: none;
color: #FFFFFF;
padding-left: 5px;
border-left: 2px solid #FFFFFF;
}
#bottomlinks a:hover{
text-decoration: none;
color: #99CCFF;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* (4) Home page elements */
/* #fader is a container for the fading image slideshow. Please make it the width and height of your images */
#fader{
position: absolute;
top: 80px;
left: 280px;
width: 200px;
height: 200px;
z-index: 1;
}
/* #newsbox acts as a container for the news */
#newsbox{
position: absolute;
top: 100px;
left: 20px;
width: 240px;
height: 250px;
z-index: 0;
color: #0066CC;
text-align: center;
background: #F9EFBE;
border: #999999 1px solid;
}
#newsbox h3{
font-size: medium;
text-align: center;
background: #E9E4D1;
border-bottom: #999999 1px solid;
}
/* #hometext is where the main copy text goes */
#hometitle {
font-size: x-large;
color: #3C52AC;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
#hometext{
text-align: center;
font-size: small;
font-weight: bold;
margin: 0;
}
#newsbox a{
color: #000000;
}
#newsbox a:hover{
color:#000000;
}
/* #diarydatesbox acts as a container for the calendar */
#diarydatesbox{
position: absolute;
top: 40px;
left: 161px;
width: 243px;
height: 91px;
z-index: 0;
}
#hitcountbox{
position: absolute;
width: 141px;
height: 25px;
left: -152px;
top: 205px;
}
#teaser_imgs {
position: absolute;
left: 280px;
top: 280px;
width: 290px;
height: 99px;
z-index: 2;
}
#teaser_imgs img {
margin: 0 8px 0 8px;
}
/* Teaser Rollover images
I really like these - Rollovers without Javascript. Format the button as a list, or as a standalone. Create an image, on the left hand side place your normal state, on the right hand side place your over state. On the actiual item, set it so that only the left hand side is seen. Nb if the image is 400px wide, set the container to 200px.
On the hover property, just change the background position so that the right hand side of the image is shown. Nb if the image is 400px wide, and the container is 200px wide, set the background image to -200px. In the xhtml this appears as a text link - so just hide the link with the .hidden_item class above.
NB in xHTML:
click here for Class Pages
This technique is used for all rollover images throughout the site.
*/
#teaserbox ul li { display: inline; padding: 0; list-style-type: none;}
li.classpageshome a{
position: absolute;
width: 140px;
height: 110px;
display: block;
background: url(../images/teasers/classpages.gif) no-repeat;
overflow: hidden;
left: 8px;
top: 214px;
}
li.classpageshome a:hover{
background-position: -140px 0;
}
li.tourhome a{
position: absolute;
width: 150px;
height: 115px;
display: block;
background: url(../images/teasers/tour.gif) no-repeat;
overflow: hidden;
left: 319px;
top: 218px;
}
li.tourhome a:hover{
background-position: -150px 0;
}
li.galleryhome a{
position: absolute;
width: 163px;
height: 68px;
display: block;
background: url(../images/teasers/galleryhome.gif) no-repeat;
overflow: hidden;
left: 340px;
top: 64px;
}
li.galleryhome a:hover{
background-position: -163px 0;
}
li.kidszonehome a{
position: absolute;
width: 150px;
height: 115px;
display: block;
background: url(../images/teasers/kidszone.gif) no-repeat;
overflow: hidden;
left: 158px;
top: 219px;
}
li.kidszonehome a:hover{
background-position: -150px 0;
}
#fronter a{
position:absolute;
width: 150px;
height: 40px;
background: url(../images/fronter.gif);
text-indent:-5000px;
top: 400px;
left: 350px;
}
#fronter a:hover{background-position: -150px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* (5) Kids' Zone
These provide styles for the Kids' Zone Rollovers. To hide the text, please use the hidden_item class. It's the same method as above.*/
.back_to{
text-align:left;
font-weight:bold;
padding-top:10px;
} /* To style "back to" text */
#kidsbgbox{
background-image: url(../images/kidszoneimages/kidszonebg.gif);
background-repeat: no-repeat;
width: 454px;
height: 322px;
margin: 0 auto;
}
#kidsbgbox ul li { display: inline; padding: 0; list-style-type: none;}
li.kgames a{
position: absolute;
width: 101px;
height: 140px;
display: block;
background: url(../images/kidszoneimages/games.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 98px;
top: 190px;
}
li.kgames a:hover{
background-position: -101px 0;
}
li.ks1links a{
position: absolute;
width: 101px;
height: 111px;
display: block;
background: url(../images/kidszoneimages/ks1links.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 98px;
top: 66px;
}
li.ks1 a:hover{
background-position: -101px 0;
}
li.ks2links a{
position: absolute;
width: 90px;
height: 146px;
display: block;
background: url(../images/kidszoneimages/ks2links.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 200px;
top: 188px;
}
li.ks2 a:hover{
background-position: -90px 0;
}
li.english a{
position: absolute;
width: 90px;
height: 111px;
display: block;
background: url(../images/kidszoneimages/english.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 200px;
top: 66px;
}
li.english a:hover{
background-position: -90px 0;
}
li.history a{
position: absolute;
width: 130px;
height: 125px;
display: block;
background: url(../images/kidszoneimages/history.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 367px;
top: 66px;
}
li.history a:hover{
background-position: -130px 0;
}
li.science a{
position: absolute;
width: 77px;
height: 129px;
display: block;
background: url(../images/kidszoneimages/science.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 290px;
top: 126px;
}
li.science a:hover{
background-position: -77px 0;
}
li.maths a{
position: absolute;
width: 77px;
height: 133px;
display: block;
background: url(../images/kidszoneimages/maths.gif) no-repeat;
overflow: hidden;
font-weight: bold;
left: 292px;
top: 254px;
}
li.maths a:hover{
background-position: -77px 0;
}
li.brain a{
position: absolute;
width: 130px;
height: 133px;
display: block;
background-image: url(../images/kidszoneimages/brain.gif);
background-repeat:no-repeat;
overflow: hidden;
font-weight: bold;
left: 366px;
top: 254px;
}
li.brain a:hover{
background-position: -130px 0;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* (6) Classpages and Year Groups
*/
#classbox{position: relative; width: 600px; height: 470px; margin: 0 auto;}
#classbox ul {margin: 0 0 0 30px; padding: 0;}
#classbox ul li { display: inline; padding: 0; list-style-type: none;}
li.classR a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/classR.gif) no-repeat;
overflow: hidden;
top: 20px;
left: 50px;
text-indent: -5000px;
}
li.classR a:hover {
background-position: -130px 0;
}
li.class1 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year1.gif) no-repeat;
overflow: hidden;
top: 20px;
left: 230px;
text-indent: -5000px;
}
li.class1 a:hover {
background-position: -130px 0;
}
li.class2 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year2.gif) no-repeat;
overflow: hidden;
top: 20px;
left: 410px;
text-indent: -5000px;
}
li.class2 a:hover {
background-position: -130px 0;
}
li.class3 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year3.gif) no-repeat;
overflow: hidden;
top: 170px;
left: 140px;
text-indent: -5000px;
}
li.class3 a:hover {
background-position: -130px 0;
}
li.class4 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year4.gif) no-repeat;
overflow: hidden;
top: 170px;
left: 320px;
text-indent: -5000px;
}
li.class4 a:hover {
background-position: -130px 0;
}
li.class5 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year5.gif) no-repeat;
overflow: hidden;
top: 320px;
left: 140px;
text-indent: -5000px;
}
li.class5 a:hover {
background-position: -130px 0;
}
li.class6 a {
position: absolute;
width: 130px;
height: 130px;
display: block;
background: url(../images/classpages/year6.gif) no-repeat;
overflow: hidden;
top: 320px;
left: 320px;
text-indent: -5000px;
}
li.class6 a:hover {
background-position: -130px 0;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* (7) Primarysite CMS specific styles */
.sectionheading {
color: #009900;
}
#Guestbook {
border: #42A0FF solid thick;
}
#Guestbook .sort{
background-color: #42A0FF;
}
#Guestbook .sort a{
color: #FFFF00;
}
#Guestbook .sort a:hover{
color:#FFFFFF;
}
#Guestbook .allowdeny {
color: #FFFF00;
background-color: #42A0FF;
}
#Guestbook .allowdeny a{
color: #FFFF00;
}
#Guestbook .allowdeny a:hover{
color:#FFFFFF;
}
#Guestbook .guest {
background-color: #FFED6F;
}
#Guestbook .message {
background-color: #FFFFFF;
}
.hide_default {display: none;} /* To hide something from default view */