/*	SA flag colours are
	# Green: 3415 C or #007C59
	# Gold: 1235 C or #FCB514
	# Red: 179 C or #
	# Blue: Reflex Blue C
*/

* { /*this sets ALL margins/pads/borders to zero, thus removing browser variations, then I can respecify them as needed */
margin:0;
padding:0;
border:none;
}

html, body {
/*font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;*/
/*but Arial/Helvetica are 'narrow' sans fonts, compared to 'wide' Verdana*/
font-family : Verdana, Geneva, sans-serif;
font-size:11px; /*8pt is good too?*/
color : #000;
line-height: 140%; /*increases legibility*/
}

body {
background-color : #FFFFFF;
}

html { /*force the browser to allow space for the scrollbar on short pages so that the centre-alignment of the site doesn't change from page to page*/
/*see old/unused versions of this file for alt but inferior solutions */
/*this solution is the best (see http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html)*/
height: 102%;
}


/*===================================================================*/
/* FRAMEWORK */
/*===================================================================*/


#frame { /*contains bgslide, nav, submenu and foreground*/
width: 960px; /*=the width of the JPG bg (960) less twice the padding !!!*/
	/*NB 960w is made up of 322 then 604w nav then 34 */
height:560px; /*=the height of the JPG bg (560) less twice the padding !!!*/
margin: 0px auto; /*centre the frame on the page*/
margin-top:20px; /*to push it down from the top of the screen; does this need tweaking +/-5? */
position: relative; /* so I can absolutely position other elements inside the frame - "If you want other elements to be absolutely positioned inside the wrapper, make it relatively positioned first." says http://www.yourhtmlsource.com/stylesheets/csslayout.html */
}

#bgslide { /*the background image slideshow*/
width: 960px;
height:560px;
z-index:-1;  /*this might be improvable*/
position: absolute; top: 0; left: 0; /*lock the slide to the top LHS of the frame*/
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
}

#foreground { /*boxes of content*/
width: 960px;
height:560px;
z-index:1;  /*this might be improvable*/
position: absolute; top: 0; left: 0; /*lock the foreground to the top LHS of the frame*/
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
}

#nav { /*the menu with xparent unhover state, it needs to be 322px from the LHS of the frame*/
z-index:2; /*1000 also works*/  /*this might be improvable*/
width: 604px;
height:66px;
position: absolute; left: 0; top: 0; /*it is abs positioned within the frame*/
margin-left:322px; /*to move it in from the left of the frame, instead of using left - both margin and padding work in both IE and FF*/
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
}


#nav img { /*to lay out the nav horizontally WITHOUT the TABLE and with NO gaps between images*/
float:left;
}


/*===================================================================*/
/* TEXTBOXES AND CONTENT */
/*===================================================================*/

#leftbox {
margin-top:100px; /*100px from top of frame*/
padding-left:40px; /*to move it in from the left of the frame - I tried margin but it fucked up in IE*/
width: 248px;
float: left; /*needed when 2 boxes are displayed side by side*/
/*NB bg is specced in the content class, not in its containing box*/
}

#widebox {
width: 880px;
margin: 0px auto; /*centre the box within the frame*/
margin-top:100px; /*box is 100px from top of frame*/
/*NB bg is specced in the content class, not in its containing box*/
}

#midrightbox {
margin-top:100px; /*box is 100px from top of frame*/
padding-right:40px; /*this moves the box in from the rhs*/
float: right;
/*NB bg is specced in the content class, not in its containing box*/
}

.contentonbg { /*THESE LINES ARE ALL COMMENTED OUT AND COULD BE REMOVED*/
/*text-align:justify;*/
/*height: 400px;*/ /*specifying it makes CSS opacity work in IE6, but box is always full height irrespective of content*/
/*i could add overflow:auto if I want to display lots of scrollable text in this box*/
}

.scrollablecontentonbg, .scrollableleftcontentonbg {
overflow: auto; /*the contents of the div will have a scrollbar if it's too big to fit the height/width quoted*/
width: 572px;
height: 400px;
}

.leftcontentonbg { /*for testimonials page*/
width: 572px;
}

.scrollablecontentonbg { /*for menus page*/
text-align:center;
}

.fullscreencontentonbg { /*for photos page*/
text-align:center;
height: 401px; /*should be 400 but photo gallery thumbs fit nicely into a 401h box*/
padding:10px; /*whitespace around the text*/
background-color:white;
}

.contentonbg, .leftcontentonbg, .scrollablecontentonbg, .scrollableleftcontentonbg {
/*text colour, padding, and textbox background/opacity settings*/

color:black;
padding:10px; /*whitespace around the text*/

/*CSS-based opaque bg (requires a textbox's height to be specified for it to work in IE6) - NB text is ALSO opaque */
background-color:white;
filter:alpha(opacity=85);		/* set opacity for IE */
-moz-opacity:0.85;	/* set opacity for old FireFox - needed ?*/
opacity:0.85;		/* set opacity for new browsers using CSS3 standard */

/*PNG-based opaque bg, fails for non-height-specified boxes in IE6 otherwise fine BUT IT LOOKS TOO TRANSPARENT !!!*/
/*background:url('../images/white90pc.png');*/
}

/*===================================================================*/
/* SUBMENU */
/*===================================================================*/

#mysubmenu {
position: absolute; left: 0; top: 0; /*it is abs positioned within the frame*/
margin-left:548px; /*to move it in from the left of the frame, instead of using left - both margin and padding work in both IE and FF BUT padding stops Services hover effect from working in FF*/
margin-top:66px; /*to move it down from the top of the frame, instead of using top - both margin and padding work in both IE and FF BUT padding stops Services hover effect from working in FF*/
z-index: 3; /*this might be improvable*/
width: 194px; /* default width for menu */ /*removing this makes the submenu move in IE ??? actually it is ok*/
display: none; /*hide it initially*/
}

#mysubmenu a {
width:194px;
height:28px;
display:block;
text-decoration:none;
}

/*===================================================================*/
/* HYPERLINK STYLING */
/*===================================================================*/

A,A:link,A:active,A:visited {
color:white;
}

.contentonbg A, .contentonbg A:link, .contentonbg A:active, .contentonbg A:visited, 
.leftcontentonbg A, .leftcontentonbg A:link, .leftcontentonbg A:active, .leftcontentonbg A:visited
{
color:black;
}

A:hover, A.overlink {
color : #FCB514;
}

A B { /*bold anchors, e.g. course names, are merely targets and not proper links*/
color:black;
}

.scrollablecontentonbg A, .scrollablecontentonbg A:link, .scrollablecontentonbg A:active, .scrollablecontentonbg A:visited { /*links within the scrollbox*/
color:black;
}


/*===================================================================*/
/* CONTACT FORMSTYLING */
/*===================================================================*/

.contactformbox {
width:226px; /*248 width of text box, less 10 each side for padding, less 1 each side for border*/
margin-bottom:10px;
border: 1px solid black;
font-family : Verdana, Geneva, sans-serif;
font-size:11px;
/*padding:1px;*/ /*???*/
}

.submitbutton {
font-family : Verdana, Geneva, sans-serif;
font-size:11px;
color : #000;
}