body{
  background: #000;
  color: #fff;
  min-width: 800px;
  font-family: Arial, tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

* img{
  border: 0;
  vertical-align: top;
  padding: 0;
  margin: 0;
}

div#container {
  position: relative;
  min-height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}


div#header{
  border: 0;
  background:#000;
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 20px;
  padding: 0;
  margin: 0;
  min-width: 778px;
  overflow: hidden;
}
div#header table{
  margin:0;
  padding: 0;
}
div#header table tr,
div#header table tr td{ 
  padding: 0;
  margin: 0;
  vertical-align: top;
}


div#header a{
  vertical-align: top;
  font-size: 0.7em;
  margin: 0;
  border: 0;
  padding: 0;
  text-decoration: none;
  color: #ddd;
}


div#header ul{
  width: 100%;
  height: 15px;
  border: 0;
  margin: 0px;
  padding: 0px; 
  list-style-type: none;
  min-width: 778px;
  overflow: hidden;
}
div#header ul li{
  margin: 0;
  padding: 0;
  width: 25%;
  height: 15px;
  float:left;
  position:relative;
  text-align: center;
}
/* for IE */
* html div#header ul li{
  width: 24.5%;
  overflow: hidden;
}


div.wrapper{ 
  margin: 15px 130px;
  min-width: 640px;
  min-height: 100%;
  background: transparent;
}

div#mast{
  border: #ddd 1px solid;
  background: url(/sao/SiteImages/white40.png) 0 0 repeat;
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  display: block;
  top: 51px;
  margin: 36px auto 3px auto;
  width: 638px;
  height: 78px;
  overflow: hidden;
  z-index: 1;
}
* html div#mast{ 
  bbackground: #ccc;
}


div#mast .leftImage{
  margin: 4px 5px;
  padding: 0;
  display: block;
  float: left;
  clear: left;
}

div#mast .rightImage{
  margin: 4px 5px;
  padding: 0;
  float: right;
  clear: right;
}

div#mast .centreImage{
  display: block;
/* This should be here, but IE sucks
  position: absolute;
  margin-left: 160px;
*/
  margin-top: 25px;
  clear: none;
}
/* The Piture is a png - looks shit in IE: switch it off*/
* html div#mast .centreImage{ 
  display: none;
}


#tabbar{
  width: 638px;
  height: 32px;
  position: relative; 
  margin: 0px auto 0px auto;
  padding: 0;
  z-index: 10;
}

/* get rid of the default padding - margin and bullets */
#tabbar ul {
/* in IE if you set width here, it breaks the menu*/
  width: 638px;
  margin: 0px;
  padding: 0px; 
  list-style-type: none;
  font-size: 0.9em;
  margin-left: 1px;
}

*html #tabbar ul{
  width: auto;
}

/* make tabbar horizontal */
#tabbar ul li {
  margin: 0px 0px 0px 0px;
  padding: 0;
  border: 0;
  width: 159px;
  height: 32px;
  float:left;
  position:relative;
  text-align: center;
}

/* set up the default top level links */
#tabbar ul li a, #tabbar ul li a:visited {
  border: 1px solid #ddd;
  background: url(/sao/SiteImages/white40.png) 0 0 repeat;
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  color: #000;
  display:block;
  text-decoration: none; 
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;/* this could cause IE5 problems*/
}

#tabbar ul li a img{
  border: 0;
  vertical-align: top;
}
/* #tabbar ul li a img.on{ 
  display: none;
}
#tabbar ul li:hover a img.on{ 
  display: block;
}
#tabbar ul li:hover a img.off{ 
  display: none;
}
 */
/* hide the drop down tabbar */
#tabbar ul li ul {
  display: none;
}

/* remove all table style so that it does not interfere with the tabbar */
#tabbar table {
  border-collapse: collapse;
  font-size: 1em;
  padding: 0px;
  margin: -1px; 
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
#tabbar ul li:hover a,
#tabbar ul li a:hover,
#tabbar ul li a.tint {
  background: transparent url(/sao/SiteImages/black60.png) 0 0 repeat;
  color:#ddd;
  border-bottom: 0;
}
#tabbar ul li a.tint{ 
  border-bottom: 1px solid #ddd;
}
#tabbar ul li a.tint:hover,
#tabbar ul li:hover a.tint{ 
  border-bottom: 0;
}

/* make the drop down tabbar show and correctly position it */
#tabbar ul li:hover ul,
#tabbar ul li a:hover ul {
  border: 1px solid white;
  border-top: 0;
  display: block; 
  position: absolute; 
  width: 157px;
  left: 1px; 
  border-top: 0;
  top: 16px;
  margin-left: -1px;
  margin-top: 17px;
}

#tabbar ul li:hover ul li,
#tabbar ul li a:hover ul li{ 
 color: #000;
 margin-top: 0px;
 height: auto;
 width: 157px;
 border: 0;
 text-align: left;
}
#tabbar ul li:hover ul li.tint,
#tabbar ul li a:hover ul li.tint{
  display: block;
  background: transparent url(/sao/SiteImages/black60.png);
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  color: #fff;
  padding: 5px 2px 5px 2px;  /* xxxBox model hack req*/
  width: 153px;
}

*.tint{
  background: transparent url(/sao/SiteImages/black60.png);
  color: #fff;
}

/* style the drop down links with no hover */
#tabbar ul li:hover ul li a,
#tabbar ul li a:hover ul li a{
  display: block;
  background: transparent url(/sao/SiteImages/black60.png);
  color: #fff;
  border: 0;
  margin: 0;
  height: auto; 
  padding: 5px 2px 5px 12px; /*xxxBox model hack needed*/ 
  height: 100%;
}

/* style the drop down tabbar links when hovered */
#tabbar ul li:hover ul li a:hover,
#tabbar ul li a:hover ul li a:hover {
  border: 0;
  background: url(/sao/SiteImages/white80.png) 0 0 repeat;
  color: #000;
  margin: 0;
  /*width: 159px;*/
  z-index: 1;
}

div.content {
  clear: both;
  background: transparent;
/*   background:transparent filter: alpha(opacity=40);
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
     background: url(/sao/SiteImages/white40.png) 0 0 repeat;
*/
  color: #000;
  text-align: left;
  padding: 20px;
  padding-bottom: 50px;
  margin: 20px;
  min-height: 400px;
/*  overflow: auto; */
  z-index: -1;
}

div.content .centreImage{
  display:block;
  color: #fff;
  font-size: 200%;
  font-variant: small-caps;
  margin: 150px auto;
  width: 520px;
  text-align: center;
  vertical-align: middle;
  text-shadow: #000 1px 1px 4px;
}

div.centreAlert{
  display:block;
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  color: #fff;
  font-size: 125%;
  font-variant: small-caps;
  margin: 0px auto;
  width: 637px;
  text-align: center;
  vertical-align: middle;
  text-shadow: #000 1px 1px 4px;
}

div.centreAlert table{
  background: transparent url(SiteImages/white40.png) 0 0 repeat;
  border: 1px solid #dddddd;
  margin: 0 auto;
}
div.centreAlert table a{
  text-decoration: none;
  color: #aaf;
}
div.centreAlert table a:hover{
  color: #aaf;
  background: transparent url(SiteImages/black60.png) 0 0 repeat;
}


div#menu{
  background: transparent;
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  color: #000;
  position: absolute;
  top: 160px;
  left: 10px;
  width: 115px;
  font-size: 70%;
  margin: 0;
  padding: 0;
}

div#menu ul{
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
  margin: 0;
}

div#menu ul li{
  width: 100%;
  height: auto;/*32px;*/
  text-align: left;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

div#menu ul li a, div#menu ul li a:visited{
  background: url(/sao/SiteImages/white40.png) 0 0 repeat;
  display: block;
  text-decoration: none;
  color: #000;
  margin: 0;
  width: 99px;
  padding: 5px 2px 5px 12px; /*xxxBox model hack needed*/
}

div#menu ul li a:hover{
  background: url(/sao/SiteImages/black60.png) 0 0 repeat;
  color: #fff;
}
div#menu ul li.tint{
  background: transparent url(/sao/SiteImages/black60.png) 0 0 repeat;
  color: #fff;
  display: block;
  padding: 5px 2px; /*xxxBox model hack needed */
  width: 109px;
  margin: 0;
}

div.newsBar{
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  display: block;
  font-size: 0.9em;
  position: absolute;
  bottom: 22px;
  color: #338;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0px;
  height: 26px;
  overflow: hidden;
}
div.newsBar table{
  background: transparent url(SiteImages/white40.png) 0 0 repeat;
  border: 1px solid #dddddd;
  margin: 0 auto;
}
div.newsBar table a{
  margin: 0;
  padding: 3px 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
}
div.newsBar table a:hover{
  color: white;
  background: transparent url(SiteImages/black60.png) 0 0 repeat;
}

div.fbIcon {
  display: block;
  font-size: 65%;
  position: absolute;
  bottom: 0; 
  color: black;
  width: 100%;
  margin: 0 auto;
  padding: 4px 4px 4px 4px;
  height: 24px;
  overflow: hidden;
}

div#footer{
  background:transparent filter: alpha(opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  display: block;
  font-size: 65%;
/* changing this causes funky footer behaviour to disappear, but other to appear */
  position: absolute;
  bottom: 0;
  color: #338;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0px;
  height: 22px;
  overflow: hidden;
}
div#footer table{
  background: transparent url(/sao/SiteImages/white40.png) 0 0 repeat;
  border: 2px solid #aaa;
  margin: 0 auto;
}

div#footer a{
  color: #338;
  text-decoration: none;
}
div#footer a:hover{
  text-decoration: underline;
}