/* -----------------------------------------
CSS for new OBB web site etc.
version:        0.1
author:         PH Cowley
date:           13-Aug-2007 12:14:30
website:        www.quarndoncognition.co.uk

note: put gallery photos in Photos and all 
other images in Images
------------------------------------------- */
/* =Typography
------------------------------------------- */
p {color:black;}
a {text-decoration: underline;}



/* =Headlines
------------------------------------------- */
h1 {font-size: 2em;
color: #336699;}
h2 {font-size: 1.2em;
color: #336699;
margin: 30px 0 0 0;}


/* =Links
------------------------------------------- */
a:link {color: blue;}
a:visited {color: #000080;}
a:hover {color: #8080c0;}


/* =Banner
------------------------------------------- */
#banner {
background: url("./Images/OBBmasthead.jpg") no-repeat;
width: 720px;
height: 150px;
margin: 0;
padding: 0;

}

#banner h1 {

text-indent: -5000px;
font-size: 100px;
margin-top: 0;
}

/* =Main Content
-------------------------------------------
centered wrapper using negative margins
set min width for small screens
main content has a single column
clear class allows text in the body to go
below the header elements
------------------------------------------- */

body {
min-width: 760px;
font:100% 'Lucida Grande',Verdana, Helvetica, sans-serif;

}

#wrapper{
width:720px;
position: relative;
left: 50%;
margin-left: -360px;
border:1px solid #336699;
}
#content{
padding: 80px 10px 0px 10px;
}

.quote {
font-style: italic;
color: #808080;
}

.external {
background: url(./Images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}

.clear {
clear: both;
}
/* =Secondary Content
------------------------------------------- */

/* =Main Navigation
-------------------------------------------
horizontal tabs for navigation
width matches wrapper
images tab-left and right for tabs
set image colors and font colors to match 
overall colour scheme
-------------------------------------------- */

.mainNav ul {
margin: 0 0 0 0px;
padding: 0;
list-style: none;
width: 720px;
float: left;
}

.mainNav ul li {
float: left;
background:url(./Images/OBBtab-right.gif) no-repeat top right;

}

.mainNav ul a {
display: block;
float: left;
padding: 0 1em;
line-height:2.1em;
background: url(./Images/OBBtab-left.gif) no-repeat top left;
text-decoration: none;
color: #336699;
font-size: 84%
}

.mainNav ul a:hover {
color: #333;
}

.mainNav ul span {
color: #ffffff;
font-weight: bold;
}

/* =Secondary Navigation
------------------------------------------- */
/* =Footer
------------------------------------------- 
clear both in case there are multiple 
elements above
*/
#footer{
clear:both;
width: 720px;
height: 100px;
background: transparent url(Images/OBBfooterbg.jpg);
padding: 0px;

}
#footer em {
display: block;
line-height: 2.1em;
padding: 0px 4px 4px 0;
color: #333300;
background: #ccccff;
}

#footer p {
font-size: 60%;
color: #ffffff;
}

#footer a:link{
color: #330033;
}
#footer a:visited{
color: #222222;
}
#footer a:hover {
color: #d0d033;
background: #000;
}
/* =Events Table

------------------------------------------- */

#events table{
border-collapse: collapse;
}

#events th{
font-size: 1.2em;
font-weight: bold;}

#events td{
color: #101010;
padding:5px;
margin: 0;
border-top: 1px solid #333399;

}

.old {
background-color: #d0d0d0;
}

.highlight {
background-color: #ffdddd;
}
/* =Gallery
------------------------------------------- 
images set with a white margin from img
padding and border and a shaded 
background from shadow.gif
put descriptive text outside the img-wrapper div
-------------------------------------------- */
.img-wrapper {
background: url(./Images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
margin: 10px 10px 10px 10px;
}
.img-wrapper img {
background: #f0f0ff;
padding: 4px;
border:1px solid #a9a9a9;
position: relative;
display: block;
margin: -5px 5px 5px -5px;
}