/* 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 used */

#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;}      /* currently usedfor image border */


/*other colours 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 */

/* other colours - greys */

#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: silver; 
font-family: "Arial", "Verdana", "Helvetica", sans-serif;
}


/* 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: 5px;
margin-left: 10px;
margin-right: 5px;
color:rgb(204,255,102);
font-family: "Goudy Old Style", "Times New Roman", serif;
font-weight: normal;
font-size: 50px;
letter-spacing:14px;
}


#gardenfont{
margin-top: 5px; 
margin-bottom: 4px;
margin-left: 10px;
margin-right: 5px;
color:#898989;
font-family: "Goudy Old Style", "Times New Roman", serif;
font-weight: bold;
font-size: 23px;
letter-spacing:5px;
}

/* this is used for the telephone number under the heading */
#gardenfontA{
margin-top: 4px; 
margin-bottom: 5px;
margin-left: 10px;
margin-right: 5px;
color:#898989;
font-family: "Goudy Old Style", "Times New Roman", serif;
font-weight: bold;
font-size: 21px;
letter-spacing:9px;
}



#titlebar {
position:absolute; 
top :0px;
right: 0%;
width: 100%;
height: 130px;
background:silver; 
}

/* 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 */


#topmenubar { 
top: 105px;
position:absolute; 
right: 210px;
font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
font-size: 20px;
font-weight: normal;
white-space:nowrap; 
z-index:4;
} 

/* nowrap means the menu bar won't wrap as browser width is reduced */

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



#navigation {
position:absolute;
top:130px; 
left: 0%;
width: 24%; /*try putting real width in as they percentage meant I ended up with two borders*/
width: 330px;
/* height: 710px;*/
height: 730px;
font-family:  "Arial", "Verdana", "Helvetica", sans-serif;
font-size: 18px;
font-weight: normal;
line-height:3em;
line-height:1.8em;
border-style:solid; 
border-color:#D7D7D7;  
border-width: 5px; 
padding:45px 10px 0px 10px;
z-index:1;
white-space:nowrap; 
} 

/*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 */


#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 */


/* 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;}  
a:hover {color:#CCCCCC; }
/* a:active{color:lime;} */

a:link.current{color: rgb(204,255,102);}
a:visited.current {color:rgb(204,255,102);}
a:hover.current {color:rgb(204,255,102); cursor:default;}



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

#navigation a:link.current {color:#00ff00;}
#navigation a:visited.current {color:#00ff00;}
#navigation a:hover.current {color:#00ff00; cursor:default}


.current {color:#3E0072}

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

#backgroundnavigation{
position:absolute;
top:130px;
width: 320px;  /*try this*/
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:77%;
min-height:710px;
background-color:white;
border-style:solid; 
border-color:#D7D7D7;  
border-width:5px; 
padding:10px;
z-index:2;
}


/* 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;}

/* 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:black;
font-family:  "Arial", "Verdana", "Helvetica", sans-serif;
font-size: 15px;
text-align: left;
line-height:200%;
}  


#boldp{
color:black;
font-family: "Arial", "Verdana", "Helvetica", sans-serif;
font-size: 14px;
font-weight: bold;
text-align: left;
line-height:200%;
}  

#contact{
color:#898989;
font-family: "Goudy Old Style", "Times New Roman", "Georgia", serif;
font-weight: normal;
font-size: 22px;
}

.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{
/*background: silver;*/
/*color:rgb(204,255,102);*/ /* this is the green colour*/
color:#898989;
font-family: "Goudy Old Style", "Times New Roman", "Georgia", serif;
/*font-family: "Times New Roman", "Georgia", serif;*/
font-weight: bold;
/*font-size: 28px;*/
font-size: 28px;
margin-top: 1.5em; 
margin-bottom:1em;
letter-spacing:5px;
/*text-transform: uppercase;*/
 }


h2{
color:#898989;
font-family: "Arial", "Verdana", sans-serif;
font-weight: normal;
font-size: 18px;
margin-top: 1.5em; 
margin-bottom:1em;
}


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;

}


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

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


img{
border:solid;
border-width:5px;
border-color:#D7D7D7;
}

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