/* this sets the generic padding and margin settings for the whole page */
* {
padding : 0;
margin : 0;
}

/* This sets the style for the body tag in the website */
body {			/* this sets the settings for the body tag */
background : #fafafa;			/* this sets the background to white */
font-family : Tahoma, Verdana, Arial, sans-serif;					/* this sets the avaliable fonts */
font-size : 8pt;			/* this sets the font size for the body text */
color : #585858;			/* this sets the text colour */
}

input, textarea {			/* this sets the settings for the 'input' and 'textarea' elements */
border : 1px solid #aaa;			/* this sets a red solid border of 1 pixel */
}

input:hover, textarea:hover {			/* this sets the hover properties for the input and textarea form elements */
border : 1px solid #888;			/* this sets a red solid border of 1 pixel */
}

/* This sets additional settings for the img tag */
img {
border : 0;			/* this sets the image to have no border */
float : left;			/* this sets the image to float to the left */
margin-right : 10px;			/* this sets the right margin to 10 pixels */
}

/* Hyperlink styles */
a {
color : #0076D4;		/* colour */
text-decoration : none;		/* decoration e.g. underlining */
background : transparent;		/* background colour of white #fff*/
}

a:hover {
text-decoration : underline;	/* style change of hyperlink when mouse is placed over link */
}

/* this sets several properties for the form element */
form {
display : inline;		/* this sets the display property to inline which reduces wasted white space */
margin : 0;				/* this sets the margin to zero */
padding : 0;			/* this sets the padding to zero */
}

input:hover, textarea:hover {
border : 1px solid #0099FF;		/* this sets the hover property of the submit button to make the border bolder */
}

.date {			/* this sets the sormat settings for the date in the latest news section */
font-weight : bold;			/* this sets the font weight to bold */
background : transparent;			/* this sets the background to transparent so the colour will be taken from the latest news section */
}

/* second colour of heading text */
.red {
color : #0076D4;			/* this sets the colour to red, the same shade as part of the menu bar  */
}

/* this sets the settings for the content div, this is the area containing everything from the header, menu, main content and footer */
#content {
padding : 0;			/* this sets the padding setting to zero */
margin : 15px auto;			/* this sets the margin to 15 pixels */
width : 780px;			/* this sets the width to 780 pixels */
background : #fafafa;			/* this sets the background to white */
}

/* this sets the settings for the header function */
#header {
margin : 0;			/* this sets the margin to 0 */
padding : 0;			/* this sets the padding to 0 */
width : 100%;			/* this sets the width to 100%, this will not exceed the width of the content div though */
background : inherit;			/* this sets the background colour to inherit which means the colour will be taken from the content div */
height : 130px;			/* this sets the height to 130 pixels */
}

/* contact header in top right of screen */
#header .topcontact {
background : #fafafa url(images/topcontact.jpg) no-repeat bottom;	/* background image and set to no repeat in case image is smaller than div size */
height : 130px;		/* height of div */
width : 230px;		/* width of div */
float : right;		/* place div on the right of the screen */
}

#header .topcontact .padding {
padding : 15px 5px 0 30px;	/* set padding of topcontact div, this sets the distance between the border and the content */
}

#header .topcontact .txt {	/* this sets the colour of the text (small sentence) within the topcontact div */
padding : 0;			/* this sets the padding to zero */
color : #585858;			/* this sets the text colour to grey */
}

#header h4 {			/* this sets the header 4 settings, Contact Us is the heading 4 text */
font : bold 1em "Tahoma", verdana, Arial;			/* this sets the font settings */
}
#header h4 a {			/* this sets the hylerlink text for header 4 */
color : #585858;			/* this sets the hyperlink colour for header 4 */
}
#header h4 a:hover {			/* this sets the hover properties for header 4 hyperlinks */
text-decoration : none;			/* this sets the text decoration to none so no underlineing */
}

/* This sets the styles and images for the image header bar */
#logoimgs {
height : 130px;			/* this sets the height of the logoimages div */
width : 540px;			/* this sets the width of the logoimages div */
margin : 0 0;			/* this sets the margin of the logoimages div */
padding : 0;			/* this sets the padding of the logoimages to 0 */
vertical-align : bottom;			/* this sets the logo image to align at the bottom */
}

/* this sets the style for the horizontal menu bar */
#menu {
margin : 0 0;			/* this is the menu margin to 0 */
padding : 0;			/* this sets the padding to zero */
background : #0076D4 url(images/menubg_blue.gif) repeat-x top;			/* this sets the background image to repeat and the background colour to red in case the image doesnt load */
width : 100%;			/* this sets the width to 100% but will only reach the width of the content div as the header is inside this div */
height : 40px;			/* this sets the height of the menu */
}
#menu .pad {
padding-top : 12px;			/* this sets the the top padding to 12 pixels */
}
#menu a, #menu a:visited {
color : #fff;			/* this sets the visited link colour to red */
text-decoration : none;			/* this sets the text decoradation to none so no underlines */
background : inherit;			/* this sets the background to be taken from the menu div */
}
#menu .links {
vertical-align : bottom;			/* this sets the menu links to align at the bottom of the menu */
}
#menu .links ul {
margin : 0;			/* this sets the margin to 0 */
padding : 0 10px 0 0;			/* this sets the padding */
list-style : none;			/* this sets the list style to none, so there are no bullet points etc */
}
#menu .links li {
display : inline;			/* this sets the display to inline */
margin : 0;			/* this sets the margin to 0 */
padding : 0;			/* this sets the padding to 0 */
}
#menu .links a {
float : left;			/* this sets the links to float to the left */
background : transparent;			/* this sets the background colour to transparent so the background will be taken from the menu div */
margin : 0;			/* this sets the margin to 0 */
padding : 0 0 0 0;			/* this sets the padding to zero */
text-decoration : none;			/* this sets the text decoration to none so they dont underline */
}
#menu .links a span {
float : left;			/* this sets the links to float to the left */
background : url(images/menusep_blue.gif) no-repeat right;			/* this sets the span image or the small image between the links */
font-weight : bold;			/* this sets the fot weight to bold */
display : block;
padding : 0 15px 0 15px;			/* this sets the padding */
margin-right : 2px;			/* this sets the right margin to 2 pixels */
}
#menu .links a span {
float : none;			/* this sets the float property to none */
}

/* The modules are the three sections under the menu bar on the index page */
#modules {
margin-top : 10px;			/* this sets the top margin to 10 pixels */
height : 300px;			/* this sets the height to 300 pixels */
}
#modules #mod3 {		/* this is the section on the right */
background : #fafafa url(images/topgreybox2.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 300px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : right;		/* this sets the position of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#modules #mod2 {		/* this is the section in the middle */
background : #fafafa url(images/topgreybox2.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 300px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : right;		/* this sets the position of the module */
margin-right : 3px;	/* this sets the margin on the right of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#modules #mod1 {		/* this is the section on the left */
background : #fafafa url(images/topgreybox2.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 300px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : left;		/* this sets the position of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#modules .padding {	/* this sets the padding for the modules so that there is a gap between them */
padding : 13px 20px 10px 20px;	/* top, right, bottom, left */
}
#modules img {		/* this sets the additional properties for the image in the modules */
border : 1px solid #d3d3d3;		/* this sets the border to 1 pixel, solid and grey */
float : left;		/* this sets the image to float to the left */
margin-bottom : 5px;		/*  this sets the bottom margin to 15 pixels */
}
#modules .text {
width : 100%;		/* this sets the width to 100% of the available space */
float : left;		/* this sets the text to float to the left of the module */
color : #585858;	/* this sets the colour to dark grey */
text-align : justify;		/* this sets the text alignment to justify */
}
#modules h2 {		/* this sets the properties for the headings in the modules */
font : bold 1.2em "Tahoma", verdana, Arial;		/* this defines the header 2 font */
color : #0076D4;				/* this sets the colour to to red, although the link text colour overrides this as all of the header 2 text are links.   */
background : transparent;				/* This sets the background to transparent */
margin-bottom : 4px;				/* This sets the bottom margin to 4 pixels */
}
#modules h2 a {		/* this sets the properties for the link in the heading in the module */
color : #0076D4;			/* This sets the link colour to red */
background : transparent;					/* This sets the background to transparent */
}
#modules h2 a:hover {		/* this sets the properties for the hover or mouseover property in the heading of the module */
text-decoration : none;		/* this sets the text decoration to none which means no underlines or italics */
color : #0099FF;		/* this sets the hover colour to dark red #A94D53*/
}

/* The smallmodules are the three sections under the menu bar on the index page */
#smallmodules {
margin-top : 10px;			/* this sets the top margin to 10 pixels */
height : 187px;			/* this sets the height to 300 pixels */
}
#smallmodules #mods3 {		/* this is the section on the right */
background : #fafafa url(images/topgreybox.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 187px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : right;		/* this sets the position of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#smallmodules #mods2 {		/* this is the section in the middle */
background : #fafafa url(images/topgreybox.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 187px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : right;		/* this sets the position of the module */
margin-right : 3px;	/* this sets the margin on the right of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#smallmodules #mods1 {		/* this is the section on the left */
background : #fafafa url(images/topgreybox.jpg) no-repeat top;		/* this sets the background image for the module, a colour so that the css validates or the image doesnt load and sets the image to not repeat */
height : 187px;		/* this sets the height of the module */
width : 258px;		/* this sets the width of the module */
float : left;		/* this sets the position of the module */
margin-top : 5px;	/* this sets the margin on the top of the module */
}
#smallmodules .padding {	/* this sets the padding for the smallmodules so that there is a gap between them */
padding : 13px 20px 10px 20px;	/* top, right, bottom, left */
}
#smallmodules img {		/* this sets the additional properties for the image in the smallmodules */
border : 1px solid #d3d3d3;		/* this sets the border to 1 pixel, solid and grey */
float : left;		/* this sets the image to float to the left */
/* margin-bottom : 5px;		  this sets the bottom margin to 15 pixels */
}
#smallmodules .text {
width : 100%;		/* this sets the width to 100% of the available space */
float : left;		/* this sets the text to float to the left of the module */
color : #585858;	/* this sets the colour to dark grey */
text-align : justify;		/* this sets the text alignment to justify */
}
#smallmodules h2 {		/* this sets the properties for the headings in the smallmodules */
font : bold 1.2em "Tahoma", verdana, Arial;		/* this defines the header 2 font */
color : #0076D4;				/* this sets the colour to to red, although the link text colour overrides this as all of the header 2 text are links.   */
background : transparent;				/* This sets the background to transparent */
margin-bottom : 4px;				/* This sets the bottom margin to 4 pixels */
}
#smallmodules h2 a {		/* this sets the properties for the link in the heading in the module */
color : #0076D4;			/* This sets the link colour to red */
background : transparent;					/* This sets the background to transparent */
}
#smallmodules h2 a:hover {		/* this sets the properties for the hover or mouseover property in the heading of the module */
text-decoration : none;		/* this sets the text decoration to none which means no underlines or italics */
color : #0099FF;		/* this sets the hover colour to dark red #A94D53*/
}
#smallmodules p {
margin-top : 0px;		/* this sets the top margin of paragraph text to 10 pixels */
}


/* this sets the properties for the main content section of the homepage */
#maincontent {
background : #fafafa;		/* this sets the background colour to white */
width : 100%;
}
#maincontent p {
margin-top : 10px;		/* this sets the top margin of paragraph text to 10 pixels */
}
#maincontent .readmore {
color : #0076D4;	/* this sets the text colour */
font-weight : bold;		/* this sets the font weight to bold */
background : transparent;		/* this sets the background to transparent */
}
#maincontent h2 {
font : bold 1.6em "Tahoma", verdana, Arial;			/* this sets the font settings */
color : #585858;	/* this sets the text colour */
background : transparent;
margin-bottom : 4px;
border-bottom : 1px solid #e3eaef;	/* this adds a border to the bottom of the header 2  */
}
#maincontent h4 {
font : bold 1.2em "Tahoma", verdana, Arial;
color : #585858;	/* this sets the text colour */
background : transparent;
margin-bottom : 4px;
margin-top : 4px;
border-bottom : 1px solid #e3eaef;	/* this adds a border to the bottom of the header 2  */
}

/* this sets the options for the introduction section on the index page */
#maincontent #introduction {
margin: 15px 0 10px 0;		/* this sets the margin, top, right, bottom, left */
width : 780px;	/* this sets the width of the div */
background : inherit;	/* this instructs the div to inherit the background from the content div */
text-align : justify;	/* this sets the text alignment to justify */
}

/* This sets the formatting of the literature sections, news name = legacy */
#maincontent #news {
float : right;	/* this sets the div to the right */
width : 210px;	/* this sets the width of the div */
background : #f0f0f0;	/* this sets the background colour of the div */
padding : 10px;		/* this sets the padding */
margin : 0px 0 10px 0;		/* this sets the margin, top, right, bottom, left */
}
#maincontent #news h2 {
margin-bottom : 5px;	/* this sets the margin at the bottom of the header 2 text in the right side div */
}
#maincontent #news img {		/* this sets the additional properties for the image in the modules */
border : 1px solid #d3d3d3;		/* this sets the border to 1 pixel, solid and grey */
float : right;		/* this sets the image to float to the left */
margin-bottom : 5px;		/*  this sets the bottom margin to 15 pixels */
}

/* Left side refers to the left section on the home (index) page */
#maincontent #leftcontent {
background : inherit;	/* this instructs the div to inherit the background from the content div */
margin-right : 10px;		/* this sets the right margin to 10 pixels */
width : 780px;		/* this sets the left content width */
padding : 15px 0 15px 0;			/* this sets the padding, top, right, bottom, left */
text-align : justify;		/* this sets the text alignment to justify */
}
#maincontent img {		/* this sets the additional properties for the image in the modules */
border : 1px solid #d3d3d3;		/* this sets the border to 1 pixel, solid and grey */
float : right;		/* this sets the image to float to the left */
margin-bottom : 5px;		/*  this sets the bottom margin to 15 pixels */
}

/* Left side refers to the right section on the main text */
#maincontent #rightcontent {
float : right;
background : inherit;	/* this instructs the div to inherit the background from the content div */
margin-left : 10px;		/* this sets the left margin to 10 pixels */
margin-right : 10px;		/* this sets the right margin to 10 pixels */
width : 780px;		/* this sets the left content width */
padding : 15px 0 15px 0;			/* this sets the padding, top, right, bottom, left */
text-align : right;		/* this sets the text alignment to justify */
}

#leftimage img {		/* this sets the additional properties for the image in the modules */
border : 1px solid #d3d3d3;		/* this sets the border to 1 pixel, solid and grey */
float : left;		/* this sets the image to float to the left */
margin-bottom : 5px;		/*  this sets the bottom margin to 5 pixels */
margin-top : 5px;		/*  this sets the top margin to 5 pixels */
margin-left : 10px;		/* this sets the right margin to 10 pixels */
}

/* this sets the properties for the footer */
#footer {
bottom : 0;			/* this sets the footer to appear at the bottom of the page */
text-align : left;					/* this aligns the text to the left */
border-top : 2px solid #e5e5e5;				/* this sets the top border to 2 pxels and grey */
padding : 3px 0 0 0;			/* this sets the padding, top, right, bottom, left */
margin-top : 5px;				/* this sets the top margin to 5 pixels */
height : 50px;					/* this sets the height of the footer to 50 pixels */
background : inherit;			/* this sets the background to be inherited from the body element */
}
#footer .right {		/* this sets the properties for the right footer */
float : right;
}
#footer .left {		/* this sets the properties for the left footer */
float : left;
}
#footer img {		/* this sets the additional properties for the image in the modules */
margin-bottom : 15px;		/*  this sets the bottom margin to 5 pixels */
margin-top : 5px;		/*  this sets the top margin to 5 pixels */
margin-left : 5px;		/* this sets the left margin to 5 pixels */
margin-right : 5px;		/* this sets the right margin to 5 pixels */
padding : 0px 5px 15px 5px;			/* this sets the padding, top, right, bottom, left */
}