html, body { height:99%;}
body {
 font: 0.95em arial, helvetica, sans-serif;
 text-align: center; /* for IE */
 margin:0 0.25em 0.5em;
}
a, #menu div.sub a { color:#243A64; }
#container, .footer {
 max-width: 1280px;
 min-width: 999px;
 margin: 0 auto;
 text-align: left;
}
#container {
 margin: 0 auto -2.3em;  /* allow for footer */
 text-align: left; /* counter the body center */
 padding:0;
 height: 100%;
 min-height:100%;
 height:auto;
}
#header {
position:relative;
 background: #44568B url(img/header-b.jpg) repeat-x;
 margin:0 0 0.1em;
 padding: 0;
 height:8em;
 width:100%;
}
#header div#left {
 float:left;
 background: url(img/header-l.jpg) no-repeat;
 height:8em;
 width:18%;
}
#header div#left span {
 background: url(img/4c-Logo24.png) no-repeat;
 height:100px;
 width:100px;
 margin:0.4em 0 0 1em;
 position:absolute;
}
#header div#centre{
 float:left;
 background: url(img/header-c.jpg) no-repeat right top;
 height:8em;
 width:60%;
}
#header div#right {
 float:right;
 background: url(img/header-r.jpg) no-repeat right top;
 height:8em;
 width:22%;
}
/* contact info*/
#header #contact {
 position:absolute; 
 right: 1.5em;
 top:1em; 
 line-height:165%; 
 font-weight:600; 
 text-align:right; 
 clear:both;
 font-size:0.85em;
}
#main {
 margin: 0 4% 0 34%;
 padding: 0 0 0 1em;
}
#section {
 list-style:none;
 margin-left:33%;
 margin: 0.5em 0 4em 33%;
}
#section li, #section li a {
 font-weight:bold;
 font-size:1.25em;
 float: left;
 text-decoration:none;
 margin: 0 2.5em 0 0;
}
#home #section-home a:hover, #about #section-about a:hover, #portfolio #section-portfolio a:hover {
 color:#243a64;
}
#section li a:hover {
 color:#912c2a
}
/*current section*/
#home #section-home, #about #section-about, #portfolio #section-portfolio {
  border-bottom: 3px solid #5765a7;
}
#section #section-portfolio {
  margin:0;
}
#leftnav, #menu {
 width:33%;
 float:left;
 min-height:29em;
 font-size:0.9em;
}
#leftnav p, #menu p {
 padding:0.5em;
 margin:0;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 white-space: pre-wrap;
 word-wrap: break-word;
}
#menu p {
 margin:0 0.3em;
}
div.newstext, #menu div.sub {
 background-color: #fff;
 color:black;
 font-weight:normal;
 width:100%;
 border:none;
 overflow:auto;
 -moz-border-radius:0 0 8px 8px;
 border-radius:0 0 8px 8px;
}
div.newstext {
 height: 12em;
 display:none;
}
#leftnav p.title {
 padding: 0.25em 0.5em 0;
 color:white;
 font-weight:bold;
 cursor:pointer;
}
#leftnav p.subtitle {
 padding:0 0 0.25em 0.5em;
 font-weight:bold;
 color:white;
 font-style:italic;
 cursor:pointer;
}
#menu a {
 color:#fff;
}
#menu div p {
 font-weight:bold;
 color:white;
}
#menu div.sub p {
 color:black;
 font-weight:normal;
}
.item span {
 background-repeat:no-repeat;
 float:right;
 width:20px;
 background-image: url(img/down-icon.png);
 height:20px;
 margin:0.6em 0.3em;
 width:20px;
 cursor:pointer;
}
.item, #menu div {
 background-color: #44568b;
 border: 2px solid #44568b;
 margin:0 2px 2px 0;
 -moz-border-radius:8px;
 border-radius:8px;
 -moz-box-shadow: 1px 1px 2px #aaa;
 -webkit-box-shadow: 2px 2px 2px #aaa;
 box-shadow: 2px 2px 2px #aaa;
}
#menu .sub ul {
 list-style:none;
 margin:0;
 padding:0.3em 1em;
 /*text-align:right;*/
}
#menu .sub li {
 padding:0.3em 0;
}
/*always show the text for the active li*/
#leftnav .active .newstext {
 display:block;
}
/* hide the active text, if it is not the hovered one ie hovering somewhere else*/
#leftnav:hover .active .newstext {
 display:none;
}
/* show highlight currently hovered newstext */
#leftnav div:hover .newstext, #leftnav div:hover .active .newstext {
 display:block;
}
/* header text styles */
#header, #contact, #contact a:link{
 color:#fff;
}
#header h1, h2{ 
 font-family: verdana, arial, helvetica, sans-serif;
 font-weight:900;
 font-size:2em;
 margin:0.8em 0 0;
 letter-spacing:-0.05em;
 word-spacing:-0.1em;
}
#header h2{
 font-size:1.5em;
 line-height:100%;
 margin:0.3em;
}
.right {
 float:right;
}
.left {
 float:left;
}
h4 .right {
 /* back to top icon  */
 font-weight:normal;
 font-size:0.85em;
 background: url(img/up-icon.png) no-repeat top right;
 padding: 0 25px;
 line-height:1.4em;
}
.icon-pdf {
 background: url(img/icon_pdf.gif) no-repeat top left;
 padding: 0 0 0 20px;
}
#portfolio h4 {
 clear:right;
}
#main h3 {
 color:#35219b;
 /*float:left;*/
 font-weight:600;
 line-height:155%;
 text-align:justify;
 font-size:1.15em;
}
#main ol {
 list-style-type:lower-alpha;
}
#imgrow {
 clear: both;
 padding: 0.5em 0 0.1em 0;
 height:10.8em;
}
#imgrow a, #imgrow img {
 border:none;
 text-decoration:none;
 color:#243A64;
}
div.captioned {
 float:left;
 margin:0.5em;
 line-height: 0.75em;
 text-align:center;
}
/*#links {
 margin:0 auto;
 width: 90%;
 clear:left;
}
#links .link {
 margin:0 6.5% 0 0;
}
#links .link5 {
 margin:0;
}*/
div.figure {
 margin: 0;
 position:relative;
 padding:0.5em;
 font-size:0.85em;
}
div.figure p {
 text-align: center;
 text-indent: 0;
 margin:0;
 padding-bottom:0.5em;
}
#home .figure {
 float: left;
 width: 20%;
 padding: 0;
 font-weight:bold;
 font-size:0.95em;
}
/*div.photo {width:135px;height:100px; margin:0 auto;}*/
.footer {
 height:1.3em;
 clear:left;
}
.push {
 height:2.3em;
 clear:left;
}
.footer {
 clear: both;
 margin: 0.1em auto 0.5em;
 padding: 0.3em 0;
 border: 2px solid #5765a7;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -opera-border-radius:8px;
 -khtml-border-radius:8px;
 border-radius:12px;
}
.footer p, .footer a, .footer a:visited {
 color: #555;
 text-decoration:none;
 margin: 0pt;
 padding: 0 1em;
}
.footer a, .footer a:visited  {
 padding: 0;
 }