*{
	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:30px
}
#panControls img,#zoomControls img{
	position:absolute;
	padding:0 !important;
	margin:0;
	cursor:pointer;
}
#panNorth{
	top:0;
	left:20px;
}
#panSouth{
	top:48px;
	left:20px
}
#panEast{
	top:21px;
	left:49px;
	width:21px

}
#panWest{
	left:0;
	top:21px;
	width:21px;
}
#panCentre{
	top:23px;
	left:23px;
	width:24px;
	cursor:default!important
}

#zoomControls{
	position:absolute;
	left:30px;
	top:78px;
	width:30px;
}
#zoomIn{
	top:10;
	left:0
}
#zoomOut{
	top:44px;
	left:0
}
#resetZoom {
    background: none repeat scroll 0 0 #666666;
    border-radius: 0;
	border-width: 0;
    color: #FFFFFF;
    left: 23px;
    position: absolute;
	padding-top:3px;
	padding-bottom:3px;
    top: 160px;
	width:45px;
}
#svgContainer{
	width:650px;
	overflow:hidden;
}
svg{
	background:#66ccff;
	height:850px;
	width:650px;
	position:relative;
	z-index:1
}

#fileManagerLinkActive{

	display:none;

}


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,#modalImageSelector{
	position:absolute;
	width:150px;
	border:1px solid black;
	background:white;
	z-index:2;
	padding:10px;
	display:none;
} 

#modalImageSelector{
	width:415px;
}

#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:410px;
	top:215px;
	text-align:center;
	background-image: url(ArrowLeftBlue.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 75px;
}

#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;
}


#resetColours{ 
	display: inline-block;
   	background-image: src="/images/default-colours-button.svg";
   	background-repeat:no-repeat;  
}
#mapStyling input{
	padding-left: 9px;
	padding-top: 7px;
	padding-bottom: 7px;
}



#mapStyling ul{
	border:none;
	background-color: #E9E9E9;
}

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

#mapStyling li{
	width:160px;
	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,#saveButtonPDF,#fileManagerLinkActive{
	display:none;
	
	padding-top:3px;
	padding-bottom:0px;
}

#buttonSizes input img{

	padding-top:3px;
	padding-bottom:0px;
	-webkit-appearance: none;
}

#saveButtonDisabled,#saveButtonPDFDisabled,#fileManagerLinkDisabled,#addImage,#uploadNewImage{	
	
	padding-top:3px;
	padding-bottom:0px;
	-webkit-appearance: none;
}

#markerControls td div,#imageControls td div{
	width:21px;
	height:21px;
	cursor:pointer
}
#markerControls td,#imageControls td{
	padding-left:2px;
}
.imageText{
	vertical-align:middle;
	cursor:pointer;
}
/*colour map page*/
#mapSidebar {
    float: left;
    margin-bottom: 8px;
    margin-top: 0;
    overflow: hidden;
    padding: 0 10px 15px 40px;
    position: relative;
    width: 240px;
}
#mapSidebar h2{
	font-size:16px;
	background-color:#999999;
	margin: 0 -10px 10px;
	padding: 10px;
	background-image: url("images/test2.svg");
	background-position: 185px center;
	background-repeat: no-repeat;
	cursor:pointer;
}
.sidebarSection{
	display:none;
}
#mapSidebar h2.active{
		font-size:16px;
	background-color:#999999;
	margin: 0 -10px 10px;
	padding: 10px;
 background-image: url("images/test1.svg");
 	background-position: 185px center;
	background-repeat: no-repeat;
	cursor:pointer;
}
#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{
	font-size:13px; 

}

input #resetColours {
    height: 35px;
	width: 170px;
}


#mapSidebar button{
	font-size:13px;
}


#mapSidebar buttonADS{
	font-size:13px;
	padding-left:18px;
	margin-left:15;
	background: url(/images/delete-image.svg)no-repeat;
    cursor:pointer;
    border:none;
    width:100px;
    height:100px;
}


#mapSidebar uploadButton{
	font-size:13px;
	padding-left:18px;
	margin-left:0;
	background: url(images/upload-images.svg)no-repeat;
    cursor:pointer;
    border:none;
    width:170px;
    height:35px;
}
#imageWidth{
	width:50px;
}
#mapSidebar ul{
	list-style-type:none;
}
#mainContent{
    font-size: 13px;
    margin: 0 0 0 300px;
    padding: 0 10px 5px;
}


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

}
#ringControls 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:20px;
	height:20px;
	vertical-align:bottom;
	cursor:pointer;
	padding-left:5;
}


#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;}

#modalImageSelector{background:#eee;padding:20px}
#modalImageSelector p{position:absolute;top:3px;right:0;z-index:3}
#modalImageSelector p a{text-decoration:none;color:#FFFFFF;background:#777777;padding:3px 5px;font-weight:bold}
#modalImageSelector #selectorWrap{overflow:scroll}
#modalImageSelector #selectorWrap > div{ display:none;}
#modalImageSelector #selectorWrap > div.active{ display:block;}
#modalImageSelector .imageHolder{width:100px;height:100px;float:left;padding:10px;text-align:center;margin:0 5px 5px 0;background:#eee}
#modalImageSelector .landscape img{max-width:100%;vertical-align:middle}
#modalImageSelector .portrait,#modalImageSelector .landscape,{text-align:center}
#modalImageSelector .portrait img{max-height:100%;}
#modalImageSelector img{cursor:pointer}

#imageControls .imageholder{
	display:inline-block;
	text-align:center;
	width:100px;
	padding:5px;
}
#imageControls .landscape img{max-width:100%;vertical-align:middle}
#imageControls .portrait img{max-height:100px;}

#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}

.datasetElement{display:none}
.datasetElement label{display:block}