*{
	margin:0;
	padding:0;
	position: relative;
}
howtocolour{
	font-family:Arial, Helvetica, sans-serif;
	position: absolute;
}
img{
	border:none;
}
a.button{display:inline-block;background:#000000;color:#FFFFFF}
#mapControls{
	position:absolute;
	top:40px;
	left:0;
	z-index:2;
}
#panControls{
	position:absolute;
	left:10px;
	top:10px;
	width:80px
}
#panControls img,#zoomControls img{
	position:absolute;
	padding:0 !important;
	margin:0;
	cursor:pointer;
}
#panNorth{
	top:0;
	left:22px
}
#panSouth{
	top:48px;
	left:22px
}
#panEast{
	top:21px;
	left:49px
}
#panWest{
	left:0;
	top:21px;
}
#panCentre{
	top:23px;
	left:23px;
	width:24px;
	cursor:default!important
		
}

#zoomControls{
	position:absolute;
	left:27px;
	top:78px;
	width:80px;
}
#zoomIn{
	top:0;
	left:0
}
#zoomOut{
	top:34px;
	left:0
}
#resetZoom {
    background: none repeat scroll 0 0 #524F4F;
    border-radius: 5px;
    color: #FFFFFF;
    left: 21px;
    position: absolute;
    top: 150px;
	width:50px;
}
#svgContainer{
	width:650px;
	overflow:hidden;
}
svg{
	background:#66ccff;
	height:850px;
	width:650px;
	position:relative;
	z-index:1
}


polygon{z-index:1;cursor:pointer}
polygon.disabled{fill:#E6E7E8!important}
.districts polygon{stroke-width:0.25}

<?php echo $polygonCSS;?>
polygon.irl.hover{fill:white;cursor:default}

/*.districts polygon{stroke-opacity:0}
.showDistricts .districts polygon {stroke-opacity:1}*/

.labels Circle,text,text.nameControl,rect.colourControl,button{cursor:pointer}
text.noCursor{cursor:default}

text.active{fill:#ff0000}

#box{fill:#66ccff;stroke:gray}


#controls p{cursor:pointer}
#controls p.active{font-weight:bold;}

#modal_colour_selector{
	position:absolute;
	width:150px;
	border:1px solid black;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
} 

#modal_colour_selector rect{
	cursor:pointer
}
#modal_buy_credit{
	position:absolute;
	width:150px;
	border:1px solid black;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
}

#modal_colour_map
{
	position:absolute;
	width:150px;
	border:1px solid black;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
}

#modal_window2{
	position:absolute;
	border:2px solid green;
	width:225px;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
	left:410px;
	top:208px;
	text-align:center;
	background-image: url(ArrowRightBlue.gif);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 85px;
}

#modal_window3{
    position: absolute;
    border: 2px solid green;
    width: 275px;
    background: white;
    z-index: 2;
    padding: 10px;
    display: none;
    left: 388px;
    top: 122px;
    text-align: center;
    background-image: url(ArrowRightBlue.gif);
    background-repeat: no-repeat;
    background-position: top right;    
    padding-left: 5px;
    padding-right: 87px;
}
#modal_window3L{
    position: absolute;
    border: 2px solid green;
    width: 275px;
    background: white;
    z-index: 2;
    padding: 10px;
    display: none;
    left: 388px;
    top: 322px;
    text-align: center;
    background-image: url(ArrowRightBlue.gif);
    background-repeat: no-repeat;
    background-position: top right;    
    padding-left: 5px;
    padding-right: 87px;
}

#modal_window5, #modal_window5L{
    position: absolute;
    border: 2px solid green;
    width: 175px;
    background: white;
    z-index: 2;
    padding: 10px;
    display: none;
    left: 588px;
    top: 222px;
    text-align: center;
    background-image: url(ArrowLeftBlue.gif);
    background-repeat: no-repeat;
    background-position: top left;    
    padding-left: 87px;
    padding-right: 5px;
}

#modal_window5L{    
    left: 588px;
    top: 222px;    
}

#modal_window{
	position:absolute;
	border:1px solid black;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
	left:300px;
	top:300px;
	text-align:center
}
#modal_window button{
	display:block;
	margin:5px auto
}
#area_to_team{
	display:none;
	background:#eeeeee;
	padding:15px;

}
#area_to_team table{
	border-collapse:collapse
}
#area_to_team td{
	border:1px solid #bbb;
	padding:5px
}
#mainContent #prevArea,#mainContent #nextArea{
	display:block;
	height:auto;
	width:auto;
	padding:0;
	margin:0
}

#area_to_team  #prevArea img,#area_to_team  #nextArea img{
	padding:0;
	display:block;
}
#areaWrap{
	float:left;
	width:268px;
}
#areas{
	float:left;
	border:1px solid gray;
	height:60px;
	margin-bottom:10px
}
#area_holder{
	position:relative;
	height:60px;
	overflow:hidden;
	width:235px;
	background:#fff;
}
#area_holder ul{
	position:absolute;
	top:0;
	left:0;
}
#area_scrolls{
	float:left;
	border:1px solid gray;
	height:60px;
	border-left:none
}

#area_to_team p{
	clear:both
}
#area_to_team  #areas li{
	padding:0 10px;
	line-height:60px;
	width:auto;
}
#area_to_team  #areas li.activeAreaSelector{
	display:block
}
#teams{
	float:left;
	margin-left:30px;
	background:#fff;
	padding:10px;
}

#teams li,#areas li,#mapStyling li{
	background-repeat:no-repeat
}
#area_to_team #areas li{
	padding-right:30px;
	background-position:right center;
}
#area_to_team #teams li{
	padding-left:30px;
	width:auto;
}
#teams li:hover{
	cursor:pointer;
	background-color:#eee
	
}
.switcher{
	display:block
}
#mapStyling{
	background-color:#FFF;
	padding:2px;
	overflow:hidden;
	margin:15px 0;
}
#mapStyling ul{
	border:none;
	background-color: #E9E9E9;
}

#mapStyling button{
	margin-top: 10px;
	margin-left: 35px;
}

#mapStyling li{
	width:170px;
	padding-left:35px;
	float:left;
	cursor:pointer;
	font-size:15px;
	background-position:left center;
	margin-left: 10px;
	margin-top: 5px;
	line-height:25px;
}
#districtBoundariesSelector{
	display:none
}

#labelControls{
	margin-bottom:15px;
}
#labelControls label{
	display:block
}
#saveButtonActive{
	display:none;
}

#fileManagerLinkActive{
	display:none;
}

/*colour map page*/
#mapSidebar {
    float: left;
    margin-bottom: 8px;
    margin-top: 0;
    overflow: hidden;
    padding: 0 10px 14px 10px;
    position: relative;
    width: 240px;
}
#mapSidebar h2{
	font-size:17px;
	font-weight:600;
	background-color:#999999;
	margin: 0 -10px 10px;
	padding: 10px;
	background-image: url(images/test2.svg);
	background-position: 200px center;
	background-repeat: no-repeat;
	cursor:pointer;
	border-radius: 21px;
}
.sidebarSection{
	display:none;
}
#mapSidebar h2.active{
	background-image: url("/images/test1.svg");
}
#mapSidebar h1{
	font-size:18px;
	background-color:#0C0;
	margin: 0 -10px 10px;
	padding: 10px;
	color: #FFF;
}
#mapSidebar label{
	font-size:1em;
	float:none;
	margin:0;
	width:auto;
	text-align:left
}
#mapSidebar input,#mapSidebar button{
	font-size:13px
}
#mapSidebar ul{
	list-style-type:none;
}
#mainContent{
    font-size: 13px;
    margin: 0 0 0 224px;
    padding: 0 10px 5px;
}

svg.centreRing, svg.centreRing polygon, svg.centreRing text{
	cursor:crosshair;
}
#ringControls{
	background:#eeeeee;
	padding:5px;
}
#ringControls label{
	display:block;
}

#markerControls{
	background:#eeeeee;
	padding:5px;

}
#markerControls label{
	display:block;
}

#ringLegend li{
	display:none;
	margin-bottom:1px;
}
#ringLegend li label{
	display:inline-block;
	width:22px;
	text-align:center
}
#ringLegend input{
	width:145px;
}
#ringLegend li img{
	width:30px;
	height:20px;
	vertical-align:bottom;
	cursor:pointer
}


#modal_colour_selector{background:#eee;width:199px;padding:20px}
#modal_colour_selector p{position:absolute;top:3px;right:0;z-index:3}
#modal_colour_selector p a{text-decoration:none;color:#FFFFFF;background:#777777;padding:3px 5px;font-weight:bold}
#selectorWrap{position:relative;padding:10px 7px 7px 10px;height:263px;z-index:1}
#selectorWrap > div{float:left;position:absolute;left:0;top:0;background:#FFFFFF;z-index:1;padding:10px 7px 7px 10px}
#selectorWrap >div.active{z-index:2;}
#tabs-wrap{position:relative;z-index:2}
#tabs{margin:0;padding:0;list-style-type:none;overflow:hidden;}
#tabs li{ float:left;padding:5px;background:#FFFFFF;margin-right:2px;border-bottom:1px solid #ccc;background:#ccc;cursor:pointer}
#tabs li.active{background:#fff;border-bottom:1px solid #fff}
#modal_colour_selector svg{height:100%;width:100%}

.colour{width:24px;height:24px;border:1px solid black;float:left;margin:2px}
.colour.selected{margin:0;border:3px solid black}
.colour svg, #tabs svg{width:100%;height:100%}
#tabs .colour{margin:0;width:18px;height:18px;}

.markerText{width:120px}
.addMarkerToMap{margin:0 5px}
.markerOrientation{margin:0 5px}
.deleteMarker{width:30px}