html
{
	background-color: #fff;
}


body {

    margin: 0;
    background-repeat: no-repeat;

    
	background: rgba(202,212,255,1);
	background: -moz-linear-gradient(top, rgba(202,212,255,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(202,212,255,1)), color-stop(100%, rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(202,212,255,1) 0%, rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(202,212,255,1) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(202,212,255,1) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(202,212,255,1) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cad4ff', endColorstr='#ffffff', GradientType=0 );	
	background-color: #fff;
}

#JWLogo
{
	position:absolute;
	background-image:url(http://www.ciesm.org/gis/JW/img/JellyLogo.png);
	top:30px;
	width:64px;
	height:64px;
	margin: auto;
	margin-left: -20px;
}
#main
{
	width: 1200px;
	margin: auto;

}

#mapid {
	position:absolute; 
height: 400px;  
width: 960px;

	top:830px;

	margin: auto;
 }
 
#geoTitle
 {
	position:relative; 


	margin: auto;
 }


svg {
  font: 14px 'Open Sans';
}
.grid line {
  stroke: #ccf;
  stroke-opacity: 1.0;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

#sortableDiv{
position:absolute;
top:70px;
width: 500px;
margin: auto;
margin-left: 970px;
z-index:200;

}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  fill: #000;
}

.axis .tick line {
  stroke: rgba(0, 0, 0, 0.1);
}

.axisYear path,
.axisYear line {
  fill: none;
  stroke: transparent;
  shape-rendering: crispEdges;
}

.axisYear text {
  fill: rgba(0,0,80,0.25);
 
  font-size: 18px;
}

.axisYear .tick line {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 0px;
}


.area {
  stroke-width: 1px;
  
}

.area.pelagia,
.legend .pelagia {
  fill: rgba(75, 168, 255, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.rhizostoma,
.legend .rhizostoma {
  fill: rgba(255, 139, 139, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.rhopilema,
.legend .rhopilema {
  fill: rgba(53, 46, 107, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.aurelia,
.legend .aurelia {
  fill: rgba(0, 222, 201, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.velella,
.legend .velella {
  fill: rgba(68, 114, 196, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.mnemiopsis,
.legend .mnemiopsis {
  fill: rgba(167, 255, 213, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.cotylorhiza,
.legend .cotylorhiza {
  fill: rgba(255, 218, 101, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}

.area.phyllorhiza,
.legend .phyllorhiza {
  fill: rgba(172, 116, 213, 1.0);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}


.checker {
  fill: #aaa;
}

.area.others,
.legend .others {
  fill: url(#pattern-checkers);
  stroke: rgba(216, 216, 255, 0.8);
  stroke-width: 0;
  clip-path: url(#clip);

}



.area.inner,
.legend .inner {
  fill: rgba(127, 127, 255, 0.8);
  stroke: rgba(96, 96, 255, 0.8);
}

.median-line,
.legend .median-line {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.legend .legend-bg {
  fill: rgba(0, 0, 0, 0.5);
  stroke: rgba(0, 0, 0, 0.5);
}

.marker.client .marker-bg,
.marker.client path {
  fill: rgba(255, 127, 0, 0.8);
  stroke: rgba(255, 127, 0, 0.8);
  stroke-width: 3px;
}

.marker.server .marker-bg,
.marker.server path {
  fill: rgba(0, 153, 51, 0.8);
  stroke: rgba(0, 153, 51, 0.8);
  stroke-width: 3px;
}

.marker path {
  fill: none;
}

.legend text,
.marker text {
  fill: #fff;
  font-weight: bold;
}

.marker text {
  text-anchor: middle;
}

rect.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

.jellys
{
color:#006;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    vertical-align:middle;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,dbd6ff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #dbd6ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#dbd6ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#dbd6ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbd6ff',GradientType=0 ); /* IE6-9 */

}
.jellysAfterOther
{
color:#006;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    vertical-align:middle;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,948faa+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #948faa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#948faa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#948faa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#948faa',GradientType=0 ); /* IE6-9 */
}

.jellysOther
{
color:#006;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
text-align:center;
vertical-align:middle;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#32ffe7+0,ffa5a5+100 */
background: #32ffe7; /* Old browsers */
background: -moz-linear-gradient(top, #32ffe7 0%, #ffa5a5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #32ffe7 0%,#ffa5a5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #32ffe7 0%,#ffa5a5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32ffe7', endColorstr='#ffa5a5',GradientType=0 ); /* IE6-9 */}


 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.jellys:active{ 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}