/* This style sheet was written by Nadia Perre www.perrelink.com.au and distributed  with the BA Blue Template
- This comment should remain intact though you are free to edit the style sheet as you see fit. */

 /* set everything to zero  to remove any browser default settings.  You set the padding and margins on the elements themselves.*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6{ 
margin: 0; 
padding: 0; 
border: 0; 
}

body {
	background-color: #FFF; 
	background-image: url(../images/bg.gif); /*body background image */
	background-position: center; /*centres the background image */
	color: #333; 
	font-family: Arial, Helvetica, sans-serif; /*default font on page*/
	font-size: 101%; /*default font size  set to 101% */
	margin: 0 auto;
	min-width: 770px;
	padding: 0; 
	text-align: center; /*for IE to make sure the layout is centred*/
	}
	
#wrapper {
	background-color: #FFF; /*sets the background colour of our wrapper div to white */
	margin: 0 auto;
	padding: 0;
	text-align: left;         /* re-aligns the text to the left, after centering for IE  */
	width: 740px;           /* sets the wrapper width */
	border: 2px solid black;
}


#logo {
	height: 60px;     /*sets the height of the logo div*/
	background-image: url(../images/topnavback.gif);  /*the background image of the logo div*/
}

#topnav {
         width: 742px;/*sets the width for our topnav div*/
}


#topnav li {
	display: block;
	padding: 0;    /*padding set to zero */
	float: left;   /*positions the top nav to the left */
}

#topnav ul {
	height: 30px;   /*sets the height */
	margin: 0;     /*margin set to zero */
	padding-top: 10px; /*padding set to zero */
	text-align: center;/*aligns the link text centre */
	margin: 0px;
}
/* top nav link styles */
#topnav ul li a {
	color:  #9C124E;   /*font colour for top nav text link */
	display: block;   /* makes the links act like a button*/
	font-size: .80em;   /*sets the font size */
	font-weight: bold;
height: 40px;  
	text-decoration: none;  /*removes the default underline*/
	width: 121px;    /*sets the width of the links */
	padding-top: 10px;   /*positions the link text*/
	background-color: white;
	vertical-align: middle;
}

#topnav ul li a:hover {
	color: #666666;/*sets the font colour*/
	display: block;/*set the display to block so the nav displays vertically*/
}


#topnav a:active {
	color: #FFF;    
	display: block;   /*displays block as to act like a button*/
}


.headings {
margin-top:4px;
margin-bottom: 4px;
border-bottom: 1px dotted #9C124E;  /*places a solid border under the headings*/
}


#leftlogo {
float: left;  /*positions the div to the left*/
	background-image: url(../images/header.gif); /*the background image for the leftlogo div*/
		background-repeat: no-repeat;   /*no repeat for our background image*/
	height:  232px;  /* height which is the same as our background image*/
	width: 740px;     /* the width which is also the same as our background image*/
	margin-top: 0px; 
}

#content {
	width: 742px;   /* the content div */
	clear: both;   /*ensures the content is  placed below the logoleft and logoright divs*/
}

/* left column styles */
#content .contentleft {
	float: left;
	margin-top: 6px;
	padding: 0 15px 10px 15px;
	text-align: left;
	width: 480px;
	line-height: 120%;
	background-color: White;	
	border-right: 1px dotted black;
}

 #content .contentleft p {
	font-size: .9em;
	margin-bottom: 1em;
}

 #content .contentleft H1 {
 	color: #7E0F3E;
	font-size: 1.0em;
	margin-top:8px;
margin-bottom: 8px;
	border-bottom: 1px dotted #9C124E; /*places a solid border under the headings*/
 }
  #content .contentleft H2 {
 	color: #7E0F3E;
	font-size: .95em;
	margin-top:6px;
margin-bottom: 6px;
	border-bottom: 1px dotted #9C124E; /*places a solid border under the headings*/
 }
/* main nav menu */
#nav {
	float: right;/*positions our nav to the right*/
	padding-top: 18px;    /*IE hack to ensure our nav lines into position*/
    padd\ing-top: 22px;   /*this and the following position the Nav in accordance with the wrapper background and also creates the appearence of a right column*/
	padding-right:20px;   /*sets the right to 10 pixels as to position the nav in accordance with the wrapper background*/
	margin-right: 3px;
	width: 192px;/*ensures the content is  placed below the logoleft and logoright divs*/
}

#nav ul {
	border-top: 1px solid #4B1B25;/*places a border on the top of the list*/
	font-size: 90%;/*sets the font size for the right nav*/
	margin: 0;/*zero margins*/
	padding: 0;/*zero padding*/
	list-style-type: none;/*removes the list style*/
}

#nav ul li{
	border: solid #333333; /*sets a border*/
	border-width: 0 1px 1px 1px;/*sets the border width*/
	margin: 0;/*set the margin to zero*/		
}

#nav a, 
#nav a:visited {
	color: White; /*font colour */
	display: block;/*display set to block see http://www.w3.org/TR/REC-CSS2/visuren.html*/
	padding: 6px;/*gives a bit of breathing space to our text from the block */
	text-decoration: none;/*removes the default underline*/
	background-color: #4A4D56;/*background colour */
	height: 1%;   /* For IE to create the block hover effect */
}

#nav a:hover {
	color: White;   /*hover font colour */
	background-color: #83303E;;/*hover background colour */
}

#nav a:active {/*this is to make sure that when someone is using the tab key, there is a change of state similar to a:hover*/
	color: #000;/*font colour for nav active state*/
	background-color: #63242F;/*background colour*/
}

#nav a:focus {
	color: #000;/*font colour */
	text-decoration: none;/*removes the default underline*/
	background-color: #FFF;/*sets the background colour to white*/
}

/* styles the current page navbar color */
#nav a.currentLink {
	background-color: #75809E;
	color: white;
}

/* footer styles */
#footer {
	color: #800F3F;
	font-size: 80%;
	text-align: center; /*aligns the text centre*/
	width: 726px; /*width of the footer div*/
	padding: 10px;
	border-top: 1px dotted black; /* border top so it gives a bit of separation from the content area */
 
 /* heading styles */    
}
h1 {
	font-size: 100%;/*sets the font size of heading one*/
}
h2 {
	font-size: 95%;/*sets the font size of heading two*/
}


/* general link styles*/
a:link{
	color: #898A48;/*font colour for links*/
	text-decoration: underline;/*removes the underline*/
}
a:visited{
	color: #898A48;/*font colour for visited state of links*/
}
a:hover{
	color: #333;/*font colour for hover state of links*/
}
a:active{
	color: #333;/*font colour for active state of links*/
}

/* the image above the portfolio pics */
#specialpreview {
background-image: url(../images/specialpreview.gif);
background-repeat: no-repeat;
width: 150px;
height: 28px;
margin-left: 50px;
float: left;
padding: 0px;
clear: both;

}

/* div that holds the small portfolio icons */
#portcon {
border-top: 1px dotted black;
background-color: #FFFFFF;
width:700px;
margin-top: 10px;
/*float: left;*/
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
height: 72px;
clear: both;
}

/* FORM STYLES */
form {width: 450px;}

fieldset{
	padding:10px;
	border:1px solid #003366;
	margin-bottom:15px;
width: 460px;
}

.textarea2{
background-color:#F0F0FF;
background-image: none;
border: 1px solid #006666;
margin: 4px;
padding: 6px;
}

input,textarea{
background-color: #F9F9FF;
border: 1px solid #696A77;
margin: 4px;
}
/*styles the input fields*/
/*styles the form fields*/

label{
	color:#666666;
	font-weight: bold;
	font-size: 80%;
}
legend{
padding:10px;   /*gives a bit of padding between the border and the text*/
color:#000066;
}
.submitbutton {
	border: 1px solid #003366;
	background-color: #707481;
	color: white;
}
/* styles the input boxes when they have focus */
#textarea:focus, input:focus, select:focus {
	background-color: #E6E6E6;
	color: #464545;}

/*end of form styles */