body {
	background-color: #0D5096;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

#imagerotate { 
width: 350px; 
height: 170px; 
margin: 0px; 
padding: 0px; 
float: left; 
border-left: 3px solid white; 
border-right: 2px solid white;
border-bottom: 1px solid white;
}

#imagerotate li { 
list-style: none; 
}

img  { border: none;}


h2
	{
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 2px;
	}
	
h3
	{
	color: #545454;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	}

#container {
	background: url(/newplanninghome/en/media/greybg.png) repeat-y right top;
	background-color: #fff;
	width: 73em;
	margin-right: auto;
	margin-left: auto;
	border: 10px solid #fff;
}
#accessnav{
	background:#E5E5E5;
	border-bottom: 2px solid #ffffff;
	text-align:right;
	margin:0em;
	padding:0.3em 0em;
	width:	100%;
}

#accessnav li {
	list-style: none;
	display: inline;
}
#accessnav a {
	margin-left:0.5em;
	margin-right:0.5em;
	color:#000000;
}
#accessnav ul {
	float:right;
	margin:0em;
	display:inline;
	width:100%;
	text-align:right;
}
html:first-child #accessnav ul{
	margin-left: -3em;
}
#accessnav a.smallest{
font-size:80%;}
#accessnav a.largest{
font-size:130%;}

#spacer
{
	margin-top:3px;
}


#header{
	background:#fff;
	border-bottom: 1px solid #fff;
	}
	
*html #header {
	border-bottom: 2px solid #fff;
}



	
#search {
	background:#E5E5E5;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	width: 100%;
}
	
#title {
	background:#545454;
	}	
	
html>body #header{
	clear:both;}

img  { border: none;}
/* ### ### ### */

#searcharea {
	background: #
	float: right;
	width: 100%;
	border: 0px solid red;
	margin:0em;
}
#searcharea h2{
	background:#0D5096;
	color:#FFFFFF;
	margin:0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
#searcharea p{
display:inline;
margin:0em;
padding:0em;}
.button{
	background:#676767;
	border:#999999 solid 1px;
	color:#ffffff;
	font-weight:bold;
	padding: 2px;
}
html>/**/body .button{
	padding-top:0.1em;
	padding-bottom:0.05em;
	margin-bottom:-0.03em;
	margin-left:0.3em;
	padding-left:0.45em;
	padding-right:0.45em;
}
form{
	padding-left:5px;
	padding-right:5px;
	margin:0em;}
input        {
}

/* ## IE ONLY ## */

*html #greybg{

        background: url(/newplanninghome/en/media/greybg.png) repeat-y right top;

        border: 0px solid white;

}

/* ## All Browsers ## */

#greybg{ background: url(/newplanninghome/en/media/greybg_ff.png) repeat-y left top; }

/* ## IE7 ONLY ## */

*:first-child+html #greybg { background: url(/newplanninghome/en/media/greybg_ie7.png) repeat-y right top; border: 1px solid white; }

#leftcolumn {
	float: left;
	width: 21%;
	clear: both;
	padding-top: 18px;	
}
html:first-child #leftcolumn {
		width: 18%;
}
#leftcolumn h2 {
	background: #E5E5E5;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-top: 1px;
	margin-bottom: 1px;
	border-bottom: 0px solid #FFFFFF;
}

#leftnav ul {
	margin-left: 0em;
}
html>/**/body #leftnav ul {
	margin-left: -2.9em;
}
#leftnav li {
	list-style: none;
		padding-top: 0.1em;
	padding-bottom: 0.1em;
}
#leftnav a {
	color: #000000;
	text-decoration: none;
	background: url(/newplanninghome/en/images/listitem_toplevel.png) no-repeat left center;
	padding-left: 1.3em;
	margin-left:0.5em;
}
#leftnav a:hover {
	text-decoration: underline;
}


#leftnav .currentsection {
	font-weight: bold;
	background: url(/newplanninghome/en/images/listitem_toplevel_open.png) no-repeat left center;
	padding-left: 1.3em;
	margin-left:0.5em;
}

#leftnav .multilevel-linkul-0 {
	padding-left: 1.3em;
	margin-left: 0.5em;
}

#leftnav .multilevel-linkul-0 a {
	color: #000000;
	text-decoration: none;
	background: url(/newplanninghome/en/images/listitem_secondlevel.png) no-repeat left center;
}

#leftnav .multilevel-linkul-1 {
	padding-left: 1.3em;
	margin-left: 0.5em;
}

#leftnav .multilevel-linkul-1 a {
	color: #000000;
	text-decoration: none;
	background: url(/newplanninghome/en/images/listitem_secondlevel.png) no-repeat left center;
}


#back {
padding: 6px;
}


#back a {
color: #556C77;
text-decoration: none;
font-weight: bold;
}

#back a:hover {
color: red;
text-decoration: none;
font-weight: bold;
}





#rightcolumn {
	float: right;
	width: 737px;
	clear: right;
	min-height:480px;
	}
	
#topnav {
	background: #A8CDDF;
	width: 100%;
	text-align: right;
	margin-top: 1px;
	margin-bottom: 1px;
}
#topnav ul {
	text-align: right;
	float: right;
	margin: 0px;
	padding: 0px;
}
#topnav li {
	display: block;
	float: left;
	list-style: none;
	background: #93C0E1;
	padding: 0.2em 0.8em;
	border-left: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
}
#topnav a {
	font-weight: bold;
	color: #042F4F;
	text-decoration: none;
}

#topnav a:hover {
	color: #ffffff;
}
#contentarea {
	width: 318px;
	border: 0px solid red;
	border-left: 8px solid #fff;
	border-top: 0px solid #fff;
	float: left;
}

#contentarea1 {
	width: 383px;
	float: right;
	border-bottom: 2px solid white;
	border-left: 2px solid white;
	background: #fff;	
}

#bottom {
width: 100%;
background: url(/newenvironmenthome/en/media/homebg.gif) repeat-y left top;

}

#bottom2 {
width: 85%;
margin-left: 10px;
margin-bottom: 10px;
}

#faq {
	background: #fff;
	width: 100%;
	border: 0px solid red;
	height: 170px;
	}




#displaydocheader {
	margin-top: 106px;
	padding-left: 3px;
	color: #fff;
	font-weight: bold;
}

#displaydoc {
	background: #fff;
	font-weight: bold;
	width: 63%;
	margin-left: 125px;
	margin-top: 8px;
	padding: 0px;
	height: 86px;
	list-style-image: url(/newplanninghome/en/media/plisticon.jpg);
}

#displaydoc ul {
	padding-top: 4px;
}
#displaydoc li {
	padding-bottom: 4px;
}

#displaydoc a {
	text-decoration: none;
	color: black;}

#displaydoc a:hover {
	text-decoration: underline;
	}

#innerbottom {
width: 90%;
border-left: 8px solid #fff;
}


#slide {
float: left;
width: 350px;
}

#pandc {
background: #dce6ee;
width: 376px;
float: right;
padding-left: 3px;
padding-right: 3px;

}

#planninglists {
width: 180px;
padding: 3px;
border-top: 2px solid #fff;
float: left;
}


#planninglists li {
	padding-bottom: 3px;
	list-style-image: url(/newplanninghome/en/media/plisticon.jpg);
}

#planninglists a {
	text-decoration: none;
	font-weight: bold;
	color: #000;
}

#planninglists a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #000;
}



#contactus {
	width: auto;
	padding: 2px;
	border-top: 0px solid #fff;
}
#contactus p {
	padding-left: 0px;
	padding-right: 0px;
}


#faqinner {
	background:#ee8f1c;
	float: right;
	color: #fff;
	text-decoration: none;
	padding-left: 3px;
	padding-top: 3px;
	border: 0px solid red;
	font-weight: bold;
	height: 168px;
	width: 379px;
	}

#faqinner ul {
	padding-top: 3px;
}



#faqinner li {
	list-style: none;


}

#faqinner a {
	text-decoration: none;
	font-weight: normal;
	color: #fff;
}

#faqinner a:hover {
	text-decoration: underline;
	font-weight: normal;
	color: #fff;
}





#pageheader {
	background: #545454;
	width: 734px;
	border-top: 2px solid #fff;
	border-left: 3px solid #fff;
	border-bottom: 2px solid #fff;
	float: right;
	}
	
#pageheader a{
	color: #fff;
	text-decoration: none;	}
	
#pageheader a:hover{
	color: #fff;
	text-decoration: underline;
		}

	
#pageheader li{
	list-style: none;	}


html>/**/body #content ul{
	padding-left:5em;
}
#innerrightcolumn {
	float: right;
	width: 26%;
	vertical-align: top;

}
#innerrightcolumn a{
color:#000000;
text-decoration:none;}
#innerrightcolumn a:hover{
text-decoration:underline;}
h2{
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
	padding-left:5px;
}
#deptcontactinfo, #recentpublications, #southtippcontactinfo {
	background: #E5E5E5;
	border-bottom: 1px solid #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#deptcontactinfo p {
	font-size: 85%;
	padding-left:5px;
}

#deptcontactinfo a {
	text-decoration:underline;
}

#recentpublications ul{
	margin-left:0em;
}
html>/**/body #recentpublications ul{
	margin-left:-2.9em;
}
#recentpublications li{
	list-style:none;
	padding-bottom:0.5em;
	padding-left:-0.5em;
	border:none;
}

#recentpublications a{
	border:none;
}

html>/**/body  #recentpublications li{
padding-top:0.3em;
padding-bottom:0.3em;
}
#recentpublications a{
	text-decoration:none;
	color:#000000;
	padding-left:0.5em;
	margin-left:0.5em;
	margin-right:0.5em;
	display:block;

}
#recentpublications a:hover{
	text-decoration:underline;
}

#recentpublications a img{
	border:none;
}


#southtippcontactinfo p{
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	margin: 0px;
	text-align:right;
	padding-top:5em;
}
.ff {
	clear: both;
}
#mail {
	clear: both;
	text-align: right;
	width: 100%;
	background: #E5E5E5;
	border-top: 2px solid #fff;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
html>/**/body #mail {
	margin-top: -1.7em;
}
html:first-child #mail{
width: 18%;}
#mail img{
	margin-right: 0.5em;
	border:none;
	margin-top:0.2em;}
.invisible{
	overflow: hidden;
	position: absolute;
	height: 0em;
	width: 0em;
}#mail ul {
	margin: 0px;
	padding: 0px;
}
#homespacer {
	height: 15em;
}
html>/**/body #homespacer {
	height: 15.8em;
}
#mail li {
	list-style: none;
}
#homecontent h2{
	font-weight: normal;
	text-transform: uppercase;
	padding-left:0.5em;
	padding-right:0.5em;
	font-size:95%;
	font-weight: bold;
}
#homecontent li{
	list-style: url(/images/homelistitem.png);
	font-size:95%;
}

#homecontent p{
font-size:95%;
margin-left:0.5em;
 width:65%;
}
#homecontent a{
	text-decoration:none;
	color:#000000;
}
#homecontent a:hover{
	text-decoration:underline;
}
#homecontent ul{
	margin-left:1.5em;
	width:60%;
}
#homecontent ul.morenews{
margin-top:-0.5em;
margin-bottom:-0.5em;
}
html>/**/body #homecontent ul{
	margin-left:-1.5em;
}



#footer{
	text-decoration:none;
	color:#ffffff;
	font-size:80%;
	float: center;
	text-align:center;
	}

#footer a{
	text-decoration:none;
	color:#ffffff;
	float: center;
	text-align:center;
	}



#question q {
color: #556C77;
text-decoration: none;
font-weight: bold;
}

#question q:hover {
color: red;
text-decoration: none;
font-weight: bold;
}	
	
	
#fileupload a{
	text-decoration:none;
	color:#000000;
	

}
#fileupload  a:hover{
	text-decoration:underline;
}

#medialink a{
	text-decoration:none;
	color:#000000;
	

}
#medialink  a:hover{
	text-decoration:underline;
}


.searchresults {
	padding-left: 5px;
}
<style type="text/css">  /* Layout properties for your question  */
 .question{
  font-weight:bold; /* Bold font */  
  color: #FFFFFF;  /* The questions is in red */
 } 
 .answer{
  /* Layout properties - You can change these */
  
  border: 1px solid #555555;
  padding:3px;
  width:500px;
  background-color:#E2EBED;
  /* This one should not be changed */
  display:none; 
 }
 
 
 
 
 
 
#show {
border-right: 2px solid #fff;
border-left: 3px solid #fff;
float: left;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 170px;
	width: 350px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 170px;
	margin: 0 auto;
	width: 350px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}






#back {
padding: 6px;
}


#back a {
color: #556C77;
text-decoration: none;
font-weight: bold;
}

#back a:hover {
color: red;
text-decoration: none;
font-weight: bold;
}