/* andreas07 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.
Version: 1.1, November 28, 2005
Version: 1.2, September 24, 2006 */
/**************** Page and tag styles ****************/
/* added in a picture called bodybg.jpg - was called but absent in the original template */
/* then decided to have different pictures for each page - body class selector seemed to work */
body
{margin:0; padding:0; color:#303030; font:76% "Trebuchet MS",Verdana,Tahoma,sans-serif; }
/* .Home {background:#ffffff url(images/one_bg.jpg) bottom right no-repeat; } */
/* .Intro {background:#ffffff url(images/five_bg.jpg) bottom right no-repeat; } */
/* .Babies {background:#ffffff url(images/two_bg.jpg) bottom right no-repeat; } */
/* .Children {background:#ffffff url(images/three_bg.jpg) bottom right no-repeat; } */
/* .Teens {background:#ffffff url(images/four_bg.jpg) bottom right no-repeat; } */
/* .Adults {background:#ffffff url(images/one_bg.jpg) bottom right no-repeat; } */
/* .Parties {background:#ffffff url(images/five_bg.jpg) bottom right no-repeat; } */
/* .Weddings {background:#ffffff url(images/two_bg.jpg) bottom right no-repeat; } */
/* .Contact {background:#ffffff url(images/three_bg.jpg) bottom right no-repeat; } */
/* .Digital {background:#ffffff url(images/four_bg.jpg) bottom right no-repeat; } */
/* .Film {background:#ffffff url(images/one_bg.jpg) bottom right no-repeat; } */
/* DAH Additions to template CSS to control company logo and replace it with
a picture if available. As described in
http://www.stopdesign.com/articles/replace_text/. I know that this method is
not preferred because some screen readers don't deal with it well, but my
(rather blunt) view is that screen readers are for blind people and blind
people don't have much use for photographs, so that's fine by me. I did try the
recommended alternative
http://wellstyled.com/files/css-replace-text-by-image/example02.html but while
it worked fine on the Mac it didn't work properly on the PC; the image was
glued in place on the screen and the content scrolled up underneath it. A
simple fix seemed to be to use the FIR method and make sacriligious use of a
"CENTER" tag in the HTML file. Bite me. */
.CPPlogo {
display:block;
width:270px;
height:80px;
margin-right:5px;
background-image:url("images/CPPlogo.gif");
background-repeat:no-repeat;
}
.CPPlogo span {display:none;}
/* I have a feeling the use of a point size here is at odds with the em sizes elsewhere */
.CPPstrap {
font: normal 1.4em "Bradley Hand ITC","Trebuchet MS",sans-serif;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
/* some changes here to separate lists from the text */
ul
{list-style:circle; margin:15px 0px 20px 10px; background:#ffffff;
border-top:2px solid #c0c0c0;
border-bottom:2px solid #c0c0c0; padding:10px;}
li
{margin:0 0 8px 25px; font-size:1.2em; line-height:1.3em; }
a
{color:#5d5dd8; font-weight:bold; text-decoration:none;}
a:hover
{color:#3030c0; }
/* Padding tickled a bit to make the border go up to the pictures (was 1px) */
/* Border emboldened to emphasise contrast in the pictures. */
img
{float:left; margin:0 15px 15px 0; padding:0px; background:#ffffff; border:3px solid #000000;}
/* No border for some pics. */
img.noborder
{float:left; margin:0 15px 15px 0; padding:0px; background:#ffffff; border:0px;}
a img
{border-color:#5d5dd8;}
a img:hover
{background:#d85d5d; border-color:#3030C0;}
/* variable text for equation characters */
var
{ font-family:"Times New Roman","Times",serif;}
/* is formatting a table with CSS a heresy? what if it really is a table? */
table
{margin-bottom:20px;}
/* ...and I want some rows in bold? */
tr.featured
{ font-weight:bold; color:black;}
/**************** Sidebar area styles ****************/
#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0 url(images/sidebarbg.gif) top right repeat-y; text-align:right;}
body > #sidebar
{position:fixed;}
/* letter-spacing wound back - -2px doesn't work well with Trebuchet */
#sidebar h1
{margin:20px 18px 0 5px; color:#5d5d5d; font-size:1.6em; letter-spacing:-1px; text-align:right;}
/* letter-spacing wound back - -2px doesn't work well with Trebuchet */
/* top and bottom margins halved, I just preferred it */
#sidebar h2, #sidebar h3
{margin:0 10px 9px 5px; color:#808080; font-size:1.1em; font-weight:bold; letter-spacing: 0px; text-align:right;}
#sidebar h3
{margin:20px 18px 4px 5px; color:#606060;}
#sidebar p
{margin:0 20px 18px 5px; color:#606060; font-size:0.8em;}
/**************** Navigation menu styles ****************/
#menu a
{display:block; width:202px; padding:5px 18px 5px 0; color:#6060e0; background:#e0e0e0 url(images/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}
#menu a:hover
{color:#3030c0; background:#f0f0f0 url(images/sidebarbg.gif) top right repeat-y;}
/* for links that aren't links - make them not flinch */
#menu a.active
{padding:5px 18px 5px 0; background:#ffffff; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}
#menu a.active:hover
{color:#5050f0; background:#ffffff;}
/* Want a sub-class in the menu. Too much content? */
#menu a.sub
{padding:2px 18px 2px 0px; background:#ffffff; font-size:1.2em; letter-spacing:0px;}
/* Want a border on the lowest sub-class. */
#menu a.sublowest
{padding:2px 18px 2px 0px; background:#ffffff; font-size:1.2em; border-bottom:2px solid #c0c0c0; letter-spacing:0px;}
/**************** Content area styles ****************/
/* Align left to put the text back where I want it even though the div is centered. */
/* Wish I could work out how to center the content div with the navbar; I can center
without one but not with it. Sigh. Still, that's what HTML was invented for, eh? */
#content
{width:520px; margin:0 0 0 240px; padding:20px 0; background:#ffffff; text-align:left;}
/* increase in font size for readers with reading glasses */
#content p
{margin:0 0 20px 0; font-size:1.2em; line-height:1.3em; color:#202020;}
/* smaller writing for these */
#content p.footnote { margin-left:10px; font-size: 1.0em; }
/* smaller writing for these too */
#content p.caption { color:#808080; font-weight:italic; text-align:center; font-size: 0.8em; }
/* want not to destroy the line spacing */
#content p sup { font-size:0.9em; vertical-align:20%; padding-left:1px; }
#content h1
{margin:0; color:#202020; font-size:4em; letter-spacing: 0px;
font: normal 42pt "Eras Light ITC","Trebuchet MS","Verdana",sans-serif;}
#content h2
{margin:0; color:#808080; font-weight:normal; font-size:2.5em; letter-spacing:-2px; text-align:center;}
#content h3
{clear:both; margin:30px 0 10px 0; color:#5d5d58; font-weight:normal; font-size: 2em; letter-spacing:-1px;}
#content h3 a
{clear:both; margin:30px 0 10px 0; color:#5d5d58; font-weight:normal; font-size: 2em; letter-spacing:-1px;}
#content h3 a:hover
{clear:both; margin:30px 0 10px 0; color:#5d5d58; font-weight:normal; font-size: 2em; letter-spacing:-1px; text-decoration:none;}
/* Somehow I always need more levels than I have */
#content h4
{clear:both; margin:30px 0 10px 0; color:#000000; font-weight:bold; font-size: 1.2em; letter-spacing:-1px;}
#captioned_photo_one
{margin:30px; clear:both;}
#captioned_photo_two
{margin:30px; clear:both;}
#captioned_photo_three
{margin:30px; clear:both;}
#captioned_photo_four
{margin:30px; clear:both;}
#copyright
{border-top: solid #d0d0d0; clear:both;}