/* A NOTE ON SIze of WINDOWS -
seems body needs to be set to 100% in IE in order for left & right & width to work correctly.
there's no problem innetscape.  in IE width=100% is not quite that amount so having trouble 
aligning left &right hand margins. ALso note borders, padding & margin are not included in
the width calculation, so we overlap content over the navigation, but align one to the right 
and the other to the left and it seems to work OK. ALternative would be to do by pixels but
I'd rather adjust to the browser size than make a really small default to start with. */

/* or can use background:url(image.gif) if wanted */

/* Colours palette used from Jan 2012 - all websafe but need not be 
color: #333333; Very dark grey - NOT BEING USED
color: #555555; dark grey
color: #666666; medium -dark grey
color: #888888; medium grey
color: #999999; light grey
color: #CCCCCC; very light grey
color: #CCFF66; lime
*/


/* Previous colours used  - note can't define colours in CSS */

#goodgreen {color: rgb(204,255,102);}    /* A good green, more yellow than above. goes well with grey */
#lightgreen {color: #D4E7B2; }           /* light green - for rollover & main font? */
#darkgrey{background: #898989;}           /* use for highlighting page on & for labelling pictures */ 
#lightergrey{background:#CCCCCC;}         /*  A bit like silver anyway - used for hover */
#inbetweengrey{background: #D7D7D7;}      /* usedfor image border - really like CCCCCC though */

/*other colours previously considered*/

#brightlime {color: #00ff00;}            /* Lime -  this is nice, but too bright.*/
#brightgreen {color: #99FF00; }          /* bright green   a good colour, still quite green. Use this for text */
#toogreen {color: #AED673;}              /*too dull and dark and doesn't show up */
#dullgreen {color: #BBDB88;}             /* too dull and doesn't show up */
#lightdullgreen {color: #C7E19E;}        /* the light green is better*/
#whitegreen {color: #E0EDC5;}            /* almost white */
#whitegrey{background: #ECECEC; }         /* very light & nice */
#silvergrey{background: silver;}
/* orange 
#F1A629 - doesn't go with green & too rusty
#F3B044

*/



body{
left: 0%;
width: 100%;
background-color: white; 
font-family: "Helvetica", "Arial", "Verdana",  sans-serif;

/*background-color: silver; CHANGED JAN 2012 */
}


/* I don't think goudy old style is supported so save as a gif */
/* letter-spacing if in em seems to vary with browser, but px is OK */


#breezefont{
margin-top: 5px; 
margin-bottom: 0px;
margin-left: 10px;
margin-right: 5px;
color:#CCFF66; /* lime - either use this or 999999*/
font-family: "Goudy Old Style", "Times New Roman", serif;
font-weight: normal;
font-size: 50px;
letter-spacing:14px;

/* font-size: 50px;  CHANGED JAN 2012 */
/* margin-bottom: 5px; CHANGED JAN 2012 */
/*letter-spacing:14px; CHANGED JAN 2012 */
}



#gardenfont{
margin-top: 0px; 
margin-bottom: 4px;
margin-left: 10px;
margin-right: 5px;
color:#CCCCCC;
font-family: "Century Gothic";
font-weight: bold; /* BUT LOOKS NICER IF NOT BOLD*/
font-size: 24px; 
letter-spacing:4px; 

/*margin-top: 5px; CHANGED JAN 2012 */
/*color:#898989; CHANGED JAN 2012 */
/* font-family: "Goudy Old Style", "Times New Roman", serif; Changed JAN 2012 -also trialled with 35px if lower case*/
/*font-size: 23px; CHANGED JAN 2012 */
/*letter-spacing:5px; CHANGED JAN 2012 */
}

/* this is used for the telephone number under the heading */
#gardenfontA{
margin-top: 0px; 
margin-bottom: 5px;
margin-left: 10px;
margin-right: 5px;
color:#CCCCCC; 
font-family: "Century Gothic";
font-weight: normal; 
font-size: 24px;
letter-spacing:7px; 

/*margin-top: 4px; CHANGED JAN 2012 though not sure makes any difference*/
/*color:#898989; CHANGED JAN 2012 */
/* font-family: "Goudy Old Style", "Times New Roman", serif; Changed JAN 2012 */
/*font-size: 21px;CHANGED JAN 2012 */
/* font-weight: bold; CHANGED JAN 2012 */
/*letter-spacing:9px; CHANGED JAN 2012 */
}


#titlebar {
position:absolute; 
top :0px;
right: 0%;
width: 100%;
height: 130px; 
background-color: #666666;  /*999999 is also good and lighter */

/* background:silver;  CHANGED JAN 2012 */
/* Trying out JAN 2011 if going to get rid of grey top border and go with white and underlined
border-bottom-style:solid;  /* need to specify this in orde to get a border to appear at all */
border-bottom-width: 6px; 
border-bottom-color: #898989; */
/*background-color: silver; CHANGED JAN 2012 */

}

/* z-index:3; */ /* z-index only seems to work in IE */
/* specifying left & top as 0 as it seemed to pick up a margin from somewhere in IE */
/* allign it right, rather than left as IE thinks 100% is slightly less than screen width and I don't know why. OK in others */
/* would have liked to make fixed, but this always seems to add a margin around the edge or something */


/* TOP MENU BAR - are the horizontal links on the page */
#topmenubar { 
top: 100px; 
position:absolute; 
right: 35px;
font-family: "Century GOthic", "Helvetica", "Arial", "Verdana",  sans-serif; /*added in CG and swapped helvetica location Jan 2012*/
font-size: 20px; /* could go down to 18*/
font-weight: normal; 
white-space:nowrap;  /* nowrap means the menu bar won't wrap as browser width is reduced */
z-index:4;

/* top: 105px; CHANGED JAN 2012 */
/* right: 210px; changed JAN 2012 */
} 

#topmenubar a{display:inline; }  /* this makes each element appear on same line*/
#topmenubar a{text-decoration: none; } 



/* NAVIGATION - are the vertical links on the page */

#navigation {
position:absolute;
top:130px; 
left: 0%;
width: 24%; /*try putting real width in as the percentage meant I ended up with two borders*/
width: 330px;
height: 730px;
font-family:  "Century Gothic", "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 15px;
font-weight: normal;
line-height:3em;
line-height:1.8em;
padding:35px 10px 0px 10px;
z-index:1;
white-space:nowrap; 

/* border-style:solid;  removed JAN 2012  so rest of border attributes are not used and therefore border is not visible */
/* border-color:#D7D7D7;  */
/* border-width: 5px; */
/* height: 710px;*/
/* font-size: 18px; CHANGED JAN 2012 */
} 


#navigation a{display:block}  /* this makes each element appear on its own line*/
#navigation a{text-decoration: none; }  /* to show hyper links without them being underlined */


/*background-color:aqua;*/

/* make navigation wider so no gap with content as differences between browsers*/
/* position is fixed means navigation will not scroll if rest of screen scrolls - 
works in netscape but not IE, and in IE seems to set the nav bar at top */



/* link for unvisited links*/
/* visited for visitied links */
/* hover for when mouse is over link */
/* active for when link is clicked - but doens't seem to work*/


a:link {color:white;}
a:visited {color:#898989;}  /* changed JAN 2012 to similar but websafe colours and slightly better*/
a:visited {color:#999999;}  
a:hover {color:#CCCCCC; }
/* a:active{color:lime;} */

a:link.current{color: #CCFF66;} 
a:visited.current {color:#CCFF66;}
a:hover.current {color:#CCFF66; cursor:default;}



#navigation a:link {color:white;}
#navigation a:visited {color:#CCCCCC; }  
#navigation a:hover {color:#898989; } /* changed JAN 2012*/
#navigation a:hover {color:#999999; }
/*#navigation a:active{color:#5C3E90;}*/


#navigation a:link.current {color:#CCFF66;} /* changd these from #00ff00 JAN 12 - much nicer colour */
#navigation a:visited.current {color:#CCFF66;}
#navigation a:hover.current {color:#CCFF66; cursor:default}

.current {color:#3E0072}


/* this is used for photos on the menu option pages */

#backgroundnavigation{
position:absolute;
top:130px; 
width: 320px;  
left:0%; 
}

/* and this is used for photos on the non menu option pages */

#homepagenavigation {
position:absolute;
top:130px; 
left: 0%;
width: 320px;
height: 730px;
z-index:1;
white-space:nowrap; 
} 


/* background:url(images/TulipsAextractwider.jpg);*/
/* border-style:solid; 
border-color:silver; 
border-width:5px; */  
/* these are not needed here, as superceded by img settings later and was drawing twice in other browsers,so not in line */


#copyrightstatement{
position:absolute;
left: 0%;
top:680px; 
color:white;
font-size: 12px;
font-weight: bold;
padding:20px;
}



#content {
position:absolute; 
top:130px; 
right:0%; 
width:75%; 
padding:30px; 
min-height:710px;
background-color:white;
z-index:2;

/* border-style:solid; removed JAN 2012 */
border-color:#D7D7D7;  
border-width:5px; 
/* width:77%; was 77% - experimenting with different widths to give bit more white space on left JAN 2012*/ 
/*padding:10px;  was 10px. wanted more white space around edge JAN 2012*/
}


/* TO GIVE MORE WHITE SPACE to left of text Jan 2012
72% and 35px padding is too wide. 76% and 25px works, as does 75% and 30px - see what is best on MAC too.

Either 1) make content % less - can do this now as no borders and the background and content are both white but needed to increase 
padding at the same time- as padding seems to go outside of the content somehow. (If had not changed padding would have had to 
reduce photo width as content overlaps this. So tried changing both width and padding and got something suitable. 

... or alternative would have been to use margin-left on every attribute like p or the divs.....but too hard work....
*/


/* height: 400px; took this out as most browsers accept as absolute, whereas IE uses it more usefully as a minimum */
/* height as a % works in fox but not in IE.  */
/* Min-height does not work in IE, but OK in others */
/* so we'll let height be variable in IE, cos it will at least cover the text, and min-height in others*/


/* width of navigation & content does not fill screen, so best to make content larger align right  & overlap navigation */
/* IE takes width to include padding,borders & margins but other browsers do not. */

/* Tried alternatively to set margin-left but only obeyed in some instances  - IE sees this as a mimimum, others a maximum??*/
/* min-width  doesn't work in iE */
/* setting right & left margins and width to auto is OK in firefox but IE the right side is correct but width varies with text*/
/* if set both left & right margins, and a width %, then width overrides the right one I believe.....*/
/* so two options - either have width same size but wider nav bar in some, or wider total screen width in non-IE */

/*width: 75%; vs width 82% ....  border :   gets ignored when add the top xml line */
/* with top xml line, border gets taken off the content, ie is included...*/
/* however adding the xml line in, means that the width 82% means just that and borders don't go outside the margins
like they do otherwise */


#topalign {
vertical-align:top;
}


#standardprojectphoto {
margin-left: 15px;
margin-right: 15px;}


#projectphoto {
float:left;
margin-left: 15px;
margin-right: 15px;}


/* introduced extra ones to deal with some issues with browsers ther than IE, which moved text over to the right on the screen */
/* IE ignores the width parameter and just wraps anyway but chrome  & safari need it */

/* this one used in project 1, project 22, project 31*/

#projectphoto1 {
float:left;
width: 410px;
margin-left: 15px;
margin-right: 15px;}

/* this one used in project 24 and 25, could be narrower for 24...but try & not have too many */

#projectphoto24 {
float:left;
width: 500px;
margin-left: 15px;
margin-right: 15px;}



/* either have margins in these sections, or around photos */
#projectdrawing{
float:right;
margin: 15px; 
}

#projectdrawing1{
margin: 15px; 
}


#cleardrawing{
clear:left;
}

#smallprojectphoto {
float:left;
clear:left;
margin-right:15px;
margin-top: 15px;
}

#projectdescription {
margin: 15px;
}

#projectdescription1{
float:left;
margin: 15px;
}

p{

color:#555555;
font-family:  "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 15px; /* body copy today is normally 12-14px*/
text-align: left;
line-height:160%; /* basic formula is line height *1.5% */

/* color:black; changed JAN 2012*/
/*line-height:200%; changed JAN 2012 */
/* line-length: 417px; basic forumla is line height x 27.8 but doesnt seem to do anything */
/* margin-left: 50px; this shift text to the right - but need to therefore do for everything and only once... beware when used inside divs */
}  


/* this is not used anywhere */
#othercolour{
color:#898989;
font-family:  "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 15px;
text-align: left;
line-height:200%;
}  


#boldp{
color:#555555;
/*font-family: "Arial", "Verdana", "Helvetica", sans-serif;  CHANGED JAN 2012 */
font-family:  "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
text-align: left;
line-height:160%;

/* color:black; changed JAN 2012*/
/*line-height:200%; changed JAN 2012 */
}  


#contact{
color:#888888; 
font-family: "Century Gothic", "Helvetica", "Arial", "Verdana", sans-serif;
font-weight: normal;
font-size: 18px;  

/*color:#898989;  changed from this JAN 2012 */
/* font-family: "Goudy Old Style", "Times New Roman", "Georgia", serif; CHANGED JAN 2012 */
/* font-size: 22px; changed JAN 2012 - now same as h2 */
}


#contactlime{
color:#CCFF66; 
font-family: "Century Gothic", "Helvetica", "Arial", "Verdana", sans-serif;
font-weight: normal;
font-size: 18px;  
float:left; /* use this to make following text appear on same line */
margin-right:10px; /* to make a gap with follow on text */
}

.emph{color:white;}


/* white-space:pre;  white=space as pre does not seem to be working for me now I've added in that xml line in IE, and 
seems to add on too much space and extend beyond the right margin in other browers so just forget it */


h1{

color:#898989; /* changed from this JAN 2012 */
color:#999999; /* maybe too  light*/
color:#888888; 
font-family: "Century Gothic", "Helvetica", "Arial","Verdana", sans-serif; /* use 22px is too big */
font-size: 20px;
font-weight: bold;
margin-top: 1.5em; 
margin-bottom:1em;
letter-spacing:0px;

/*font-family: "Goudy Old Style", "Times New Roman", "Georgia", serif; CHANGED JAN 2012 */
/*font-size: 28px; CHANGED JAN 2012 **/
/*font-weight: bold; CHANGED JAN 2012 **/
/* letter-spacing:5px; CHANGED JAN 2012 but looked better without this even if stay with goudy*/
/*text-transform: uppercase;*/
}


h2{
color:#898989; /changed from this JAN 2012 */
color:#999999; /* maybe too  light*/
color:#888888; 
font-family: "Century Gothic", "Helvetica", "Arial","Verdana", sans-serif;
font-weight: normal;
font-size: 18px;
margin-top: 1.5em; 
margin-bottom:1em;

/* font-family:  "Helvetica", "Arial", "Verdana", sans-serif; changed Jan 2012 */
}


h3
{
color:#cccccc;
font-family: "Goudy Old Style", "Times New Roman", "Georgia", serif;
font-weight: normal;
font-size: 28px;
margin-top: 0.5em; 
margin-bottom:0.2em;

}

/* h4 is used for the constructed by section */
h4{
color:#898989; /changed from this JAN 2012 */
color:#888888; 
font-family: "Helvetica", "Arial", "Verdana", sans-serif;
font-weight: normal;
font-size: 13px;
margin-top: 1em; 
margin-bottom:1em;
}




#labelfontleft{
color:#898989; /changed from this JAN 2012 */
color:#888888; 
font-family: "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
line-height:200%;
text-transform: uppercase;
}


#labelfontright{
color:#898989; /changed from this JAN 2012 */
color:#888888; 
font-family: "Helvetica", "Arial", "Verdana", sans-serif;
font-size: 12px;
font-weight: bold;
text-align: right;
line-height:200%;
text-transform: uppercase;
}



img{
/*border:solid; removed JAN 2012 to see effect -much smarter so leave off. This means rest of border commands are ignored */
border-width:5px;
border-color:#D7D7D7;
}

img.special {border-color:#898989;}