/* jfstyle.css - stylesheet */

/* body */
body {
font-family: Helvetica, Ariel, sans-serif; 
word-spacing: .05em;
font-size: 100%;
background: #71cddf;
margin: 0;
padding: 30px 0 30px 0;
} 
/* I have included this font size 100% as I have read that IE oversizes ems and this is a workaround */

/* headers */
h1,h2,h3,h4,h5 {
color: #209fd9;
font-weight: normal;
}

h1 {
font-size: 2.2em; 
margin: 0 0 0 0;
text-transform: lowercase;
}

h2 {
font-family: "times new roman", times, serif;
font-size: 1.5em; 
font-style: italic;
font-weight: bold;
margin: 20px 0 0 0;
color: #005491; 
}

h3,h4,h5 {
font-size: 1.1em; 
margin:  20px 0 0 0;
}

/* paragraph and lists */
p {
color: #005491; 
font-size: 0.9em;
line-height: 1.53em;
margin: 10px 0 0 0;
}

ul,ol {
color: #005491; 
font-size: 0.9em;
line-height: 1.5;
margin: 10px 0 0 0;
}

li {
margin: 0 0 5px 0;
}

/* inline quotes */
em.q {
font-family: "times new roman", times, serif;
font-weight: bold;
font-size: 1.1em;
line-height: 1.5;
}

/* links */
a:link {color: #209fd9; text-decoration: none;}
a:visited {color: #209fd9; text-decoration: none;}
a:hover {color: #71cddf; text-decoration: none;}
a:active {color: #209fd9; text-decoration: none;}

img {border: none}

/* overall container */
#container {
width:750px;
padding: 0;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
/* left and right auto margin centres the page in complient browsers */

#banner {
width: 750px;
height: 110px;
margin: 0;
padding: 0;
}

#banner h1{
float:left;
width:750px;
height:110px;
background-image: url(images/wit-logo.gif);
text-indent: -1000em;
} 

#banner a{
display: block;
width:750px;
height:110px;
overflow:hidden;
}

/* local navigation within the section */
#leftnav {
float:left;
width:180px;
margin:0;
padding:0;
}

/* local navigation menu style */
#leftnav ul{
list-style: none;
margin:0;
padding:0;
}

#leftnav li{
display: inline;
margin:0;
padding:0;
}

#leftnav a{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
text-indent: -1000em;
overflow:hidden;
}

#menu2 a {
background-position: 0px -40px;
}

#menu3 a {
background-position: 0px -80px;
}

#menu4 a {
background-position: 0px -120px;
}

#menu5 a {
background-position: 0px -160px;
}

#menu6 a {
background-position: 0px -200px;
}

#menu1 a:hover {
background-position: -180px -0px;
}

#menu2 a:hover {
background-position: -180px -40px;
}

#menu3 a:hover {
background-position: -180px -80px;
}

#menu4 a:hover {
background-position: -180px -120px;
}

#menu5 a:hover {
background-position: -180px -160px;
}

#menu6 a:hover {
background-position: -180px -200px;
}

#leftnav li#active1{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px 0px;
text-indent: -1000em;
overflow:hidden;
}

#leftnav li#active2{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -40px;
text-indent: -1000em;
}

#leftnav li#active3{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -80px;
text-indent: -1000em;
}

#leftnav li#active4{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -120px;
text-indent: -1000em;
}

#leftnav li#active5{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -160px;
text-indent: -1000em;
}

#leftnav li#active6{
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -200px;
text-indent: -1000em;
}

/* page content */
#content {
margin: 0px 0px 0px 210px;
width: 510px;
padding: 5px 20px 20px 0px;
}

/* right align images */
.imageright
{
float: right;
margin: 5px 0px 5px 10px;
border: none;
}

/* left align images */
.imageleft
{
float: left;
margin: 5px 10px 5px 0px;
border: none;
}

/* center align images */
.imagecenter
{
float: center;
margin: 5px 0px 0px 0px;
border: none;
}