@charset "utf-8";
/* Home Page Map */
.Cell
{
	width:4px;
	height:4px;
	margin:1px;
	float:left;
}
.Land
{
	background-color:#C6DBA0;
}
.Sea
{
}
.MapArea
{
	height:156px;
	width:180px;
}

.MapAreaHome
{
	margin-left: -10px;
	position:relative
}

.Project
{
	background-color:#2B9E9F;
}
.Project:hover
{
	background-color:#F3AB01;
	width:6px;
	height:6px;
	margin:0px;
}


/* ACCORDION STYLING */



#map-region {
	float: right;
	position:relative;
}

#accordion-map {
	float: left;
	/* width: 224px; */
}

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: normal 14px Arial;
color: #666666;
background: black url(../images/accordion-red.jpg) repeat-x center left;
text-transform: uppercase;
width: 224px;
height: 35px;
cursor: hand;
cursor: pointer;
border-top: 1px solid #c6c5c5;

}

.arrowlistmenu .menuheader2{ /*CSS class for menu headers in general (expanding or not!)*/
font: normal 14px Arial;
color: #666666;
background: black url(../images/accordion-yellow.jpg) repeat-x center left;
text-transform: uppercase;
width: 224px;
height: 35px;
cursor: hand;
cursor: pointer;
border-top: 1px solid #c6c5c5;

}

.arrowlistmenu .menuheader3{ /*CSS class for menu headers in general (expanding or not!)*/
font: normal 14px Arial;
color: #666666;
background: black url(../images/accordion-black.jpg) repeat-x center left;
text-transform: uppercase;
width: 224px;
height: 35px;
cursor: hand;
cursor: pointer;
border-top: 1px solid #c6c5c5;

}


#menuitem1 .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../images/accordion-red.jpg);
}

#menuitem2 .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../images/accordion-yellow.jpg);
}

#menuitem3 .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../images/accordion-black.jpg);
}



.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
color: #87300c;
width: 224px;

}

.arrowlistmenu ul li{
padding-top: 8px;
padding-bottom: 8px; /*bottom spacing between menu items*/
border-bottom: 1px solid #cccccb;
margin-right: 9px;
margin-left: 9px;
}

.arrowlistmenu ul li a{
color: #87300c;
display: block;
padding-left: 0px; 
text-decoration: none;
font-family: Arial;
font-size: 11px;
}

.arrowlistmenu ul li a:visited{
color: #87300c;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #87300c;
}

.switch {
	position: relative;
	float: right;
	margin-top: 8px;
	margin-right: 11px;
	z-index: 1000;
	height:20px;
	width:53px;
}
.OnSwitch
{
	background-image:url(../images/switch-on.png);	
}
.OffSwitch
{
	background-image:url(../images/switch-off.png);
}

.Marker
{
	position:absolute;
	width:26px;
	height:21px;
}

.Marker-Static
{
	position:absolute;
	width:26px;
	height:21px;
}

.YellowMarker
{
	background-image:url(yellow-marker.png);
	color: #fff;
	font-size: 8px;
	line-height: 8px;
	padding-top: 4px;
	width: 27px;
	height: 18px;
	text-indent: 4px;
	background-repeat: no-repeat;
}
.RedMarker
{
	background-image:url(redmarker.png);
	color: #fff;
	font-size: 8px;
	line-height: 8px;
	padding-top: 4px;
	width: 26px;
	height: 18px;
	text-indent: 4px;
	background-repeat: no-repeat;
}
.BlackMarker
{
	background-image:url(black-marker.png);
	color: #fff;
	font-size: 8px;
	line-height: 8px;
	padding-top: 4px;
	width: 26px;
	height: 18px;
	text-indent: 4px;
	background-repeat: no-repeat;
}
.ProjectOverlay
{
display:none;
	position: absolute;
background-color: #fff;
top: 0px;
padding: 11px;
margin: 20px;
height: 418px;
font-size: 13px;
font-family:Arial;
color: #5b5b5b;
width: 90%;
}

.ProjectOverlay p 
{
    font-size: 12px !important;
    margin-bottom: 5px;
}

.ProjectOverlay h3 
{
    font-size: 18px;
    color: #333333;
    font-weight: normal;
    font-family: 'HelveticaNeueW01-57Cn';
}

.ProjectOverlay a 
{
    color: #8DBB41 !important;
    font-size: 12px !important;
    text-decoration: none;
}

.ProjectOverlay img.thumbnail
{
	max-width:38%;
position:absolute;
top:0px;
right: 0px;
	margin-left: 0px !important;
	float:right;
	border:none !important;
}
.ProjectOverlay .wrapper {
 width:100% !important;
}

.ProjectOverlay .section{
  margin-bottom:10px;
}
.ProjectOverlay .section  .title{
display:block;
font-weight:bold;
font-family: Arial;
margin-bottom:10px;
color: #00539d;
}


.ProjectOverlay .details{
   width: 55%;
   float:left;
   margin:20px 0px 20px 20px;
}



.Visible
{
	display:inline;
}
.CloseOverlay
{
	float:right;
    background-image:url(close.png);
    width: 37px;
    height: 37px;
    text-indent: -9999px;
	position:absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
}


#map-region a 
{
    color: #fff;
    font-size: 8px;
    text-align: center;
    text-decoration: none;
}

#map-region a:hover 
{
    text-decoration: none;
}

/* NEW PROJECT MAP STYLING */

#project-holder 
{
	width:100%;
    position:relative;
}

.project-map 
{
    position: relative;

}

.project-map  img{
	margin-left: 0px !important;
	float:none !important;
	border:none !important;
}

.project-guniea 
{
    float: left;
    margin-left: 72px;
    position: relative;
    margin-top: -36px;
}

.project-australia 
{
    float: right;
margin-left: 65px;
padding-top: 15px;
position: absolute;
bottom: 0px;
margin-top: 20px;
right: 0px;
}

.map-overview
{
	margin-left:40px !important;
	float:none !important;
	border:none !important;
}

.project-legend
{
	float: left;
padding-left: 45px;
margin-top: 20px;
position: relative;
width: 250px;
height: 245px;
background-color: #f1f2f2;
}
.project-legend a
{
	margin-top: 20px;
}

.project-legend .instruction
{
	position:relative;
	top: 80px;
	left: -10px;
}

.MarkerHover 
{

}

.ItemHighlight 
{
    font-weight: bold;
    text-decoration: underline !important;
}

.YellowMarkerHighlight
{
	background-image:url(yellow-marker-large.png);
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	padding-top: 5px;
	background-repeat: no-repeat;
	width: 34px;
	height: 23px;
}
.RedMarkerHighlight
{
	background-image:url(red-marker-large.png);
	background-repeat: no-repeat;
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	width: 36px;
	height: 24px;
	padding-top: 5px;
	text-indent: 6px;
}
.BlackMarkerHighlight
{
	background-image:url(black-marker-large.png);
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	background-repeat: no-repeat;
	width: 34px;
	height: 23px;
	padding-top: 5px;
}

a.Marker 
{
    color: #fff !important;
    text-decoration: none;
}

.ListHover 
{
    font-weight: bold;
    text-decoration: none !important;
}

.YellowMarkerHover
{
	background-image:url(yellow-marker-large.png);
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	padding-top: 5px;
	background-repeat: no-repeat;
	width: 34px;
	height: 23px;
}
.RedMarkerHover
{
	background-image:url(red-marker-large.png);
	background-repeat: no-repeat;
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	width: 36px;
	height: 24px;
	padding-top: 5px;
	text-indent: 6px;
}
.BlackMarkerHover
{
	background-image:url(black-marker-large.png);
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	background-repeat: no-repeat;
	width: 34px;
	height: 23px;
	padding-top: 5px;
}


 .CurrentProjectMarker
{
	background-image:url(project-map/blue-marker.png);
	color: #fff;
	font-size: 9px;
	line-height: 11px;
	background-repeat: no-repeat;
	width: 17px;
	height: 25px;
	padding-top: -2px;
	 padding-left: 2px;
}

.CurrentProjectMarkerHover
{
	background-image:url(project-map/blue-marker-big.png);
	width: 20px;
	height: 30px;
	 padding-left: 4px;
    padding-top: 2px;
	z-index: 2;
}


.CompletedProjectMarker
{
	background-image:url(project-map/black-marker.png);
	color: #fff;
	font-size: 9px;
	line-height: 11px;
	background-repeat: no-repeat;
	width: 17px;
	height: 25px;
	padding-top: -2px;
	padding-left: 2px;
}

.CompletedProjectMarkerHover
{
	background-image:url(project-map/black-marker-big.png);
	width: 20px;
	height: 30px;
 padding-left: 4px;
    padding-top: 2px;
	}

.OfficeMarker
{
	background-image:url(project-map/green-marker.png);
	color: #fff;
	font-size: 9px;
	line-height: 11px;
	background-repeat: no-repeat;
	width: 17px;
	height: 25px;
	padding-top: -2px;
	padding-left: 2px;
}

.OfficeMarkerHover
{
	background-image:url(project-map/green-marker-big.png);
	width: 20px;
	height: 30px;
 padding-left: 4px;
    padding-top: 2px;
}

.center-hover
{
	text-decoration: none;
}

.center {
	margin-left:auto;
	margin-right:auto;
}

#map-list{
 float:right;
 position:relative;
}

#location-list{
	float:left;
	min-width:300px;
}

.Marker.LocationMarker{
width:31px;
height:47px;
background: url(pin.png) no-repeat;
}

.Marker.LocationMarker.Current{
background: url(pin-blue.png) no-repeat;
}

.Marker-Static.LocationMarker{
width:8px;
height:13px;
background: url(small-pin.png) no-repeat;
}
.Marker-Static.LocationMarker.Current{
background: url(small-pin-blue.png) no-repeat;
}

.location h2{
  color: #fff;
  padding: 0px !important;
}
.location .name{
	width: 100%;
	background-color:#5b5b5b;
   margin:0px !important;
  padding: 10px !important;
  display:block;
}
.project-list{
padding: 0px !important;
 list-style-image: none;
width: 310px;
}
li.project a{
color: #5b5b5b !important;
display:block;
}

li.project.current a{
color: #fff !important;
}
li.project.current:hover a{
color: #5b5b5b !important;
}

li.project a:hover{
text-decoration: none;
}
li.project{
 list-style-image: none;
 border-bottom: dotted 1px #000;
 padding: 10px !important;
 cursor: hand;
 cursor:pointer;
}

li.project.current{
background-color: #00539d;
color:#fff;
}

li.project:hover{
background-color: #fff;
}

.marker-title {
    display:none;
   position:absolute;
}

    .marker-title.active {
          display:block;
    }