article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

a { background: transparent; }

a:focus { outline: thin dotted; }

a:active, a:hover { outline: 0; }

h1 { font-size: 2em; margin: 0.67em 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

mark { background: #ff0; color: #000; }

code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }

pre { white-space: pre-wrap; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }

button, input { line-height: normal; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }

html { background: url(../img/bg_lowres.jpg) no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; }

body { color: #333333; font: 100%/1.5 "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0 auto; max-width: 60em; padding: 2em 0; }

a { color: #4863a0; text-decoration: none; }

a:hover, a:focus { text-decoration: underline; }

h1 { font-weight: normal; line-height: 1.25; margin: 0 0 0.25em; }

h2 { font-size: 1em; font-weight: bold; line-height: 1.25; margin: 0 0 0.25em; }
#content h2 { color: #00a0e1; font-size: 1.5em; /* 24 */ font-weight: 600; margin-bottom: 0.75em; }

h3 { margin: 0 0 0.5em; }

h4 { font-size: 1em; line-height: 1.1; margin: 0 0 0.5em; }

p { margin: 0 0 1em; }
p.note { color: #666666; font-size: 0.75em; margin-bottom: 0; }
p.legend { font-weight: bold; }

.notes { *zoom: 1; color: #666666; font-size: 0.75em; font-weight: bold; line-height: 1.25; margin-bottom: 20px; position: relative; }
.notes:before, .notes:after { content: " "; display: table; }
.notes:after { clear: both; }
.notes p { margin-bottom: 0; }
.notes ul { border: 3px solid #929292; border-radius: 8px; padding: 4px; *zoom: 1; background: white; display: none; list-style: none; margin: 0; padding: 10px 10px 4px; position: absolute; right: 6px; top: 24px; width: 260px; z-index: 100000; }
.notes ul:before, .notes ul:after { content: " "; display: table; }
.notes ul:after { clear: both; }
.notes ul.visible { display: block; }

#othernotes { background: white; border: 0; color: #929292; font: bold 100% "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; padding: 5px 7px 4px; position: absolute; right: 14px; top: 0; }
#othernotes:hover, #othernotes.open { background: #929292; color: white; }

.legend { background-image: url(../img/legend.png); background-repeat: no-repeat; padding-bottom: 6px; padding-left: 32px; padding-top: 6px; }

.legend-overfished { background-position: 0 0; }

.legend-dual { background-position: 0 -155px; }

.legend-nodata { background-position: 0 -290px; }

.legend-half { background-position: 0 -444px; }

#notice { border: 3px solid white; border-radius: 8px; padding: 4px; background: white; font: 1.25em/1.5 "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; padding: 1em 1em 0; }
.js #notice { display: none !important; visibility: hidden !important; }

.sharing { list-style: none; margin: 0; padding-left: 0; padding-top: 2em; }
.sharing li { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; font-size: 24px; line-height: 1.125; padding-left: 0; padding-right: 0.5em; }
.sharing a { color: #4863a0; }
.sharing a:hover, .sharing a:focus { text-decoration: none; }

.chart-wrapper { clear: both; margin-bottom: 1.5em; overflow: hidden; }

#chart, #selections { display: none; }

.js #chart, .js #selections { display: block; float: left; margin-right: -100%; }

#selections { width: 260px; }

#chart { margin-left: 270px; width: 690px; }

.controlbox { *zoom: 1; }
.controlbox:before, .controlbox:after { content: " "; display: table; }
.controlbox:after { clear: both; }
.controlbox #infobox, .controlbox .controls { border: 3px solid white; border-radius: 8px; padding: 4px; float: left; height: 160px; margin-right: -100%; }
.controlbox #infobox { width: 190px; }
.controlbox .controls { margin-left: 214px; width: 462px; }

@media only screen and (max-width: 960px) { #chart, #selections { float: none; margin-right: 0; width: 100%; }
  #chart { position: relative; }
  #selections { margin-left: 0; } }
#content { border: 3px solid white; border-radius: 8px; padding: 4px; background-color: #feffff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feffff), color-stop(35%, #ddf1f9), color-stop(100%, #89eaf4)); background-image: -webkit-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #89eaf4 100%); background-image: linear-gradient(to bottom,#feffff 0%, #ddf1f9 35%, #89eaf4 100%); clear: both; padding-bottom: 0; }
#content .content-inner { *zoom: 1; background: url(../img/swimming-fishbg.png) no-repeat 95% 103%; padding-bottom: 4em; }
#content .content-inner:before, #content .content-inner:after { content: " "; display: table; }
#content .content-inner:after { clear: both; }

.oldie #content, .ie9 #content { background-color: #d2f3fe; }

.column { float: left; margin-right: -100%; padding: 2.083333333%; width: 45.833333333%; }
.column.column-right { margin-left: 50%; }

[role="contentinfo"] { clear: both; color: #666666; font-size: 0.75em; padding: 0 2em; width: 45.833333333%; }
[role="contentinfo"] p { margin-bottom: 0; }

.section-hdr { border-radius: 4px; color: white; font-size: 15px; margin: 0 0 5px; padding: 7px 7px 7px 10px; }
.section-hdr i { background: url(../img/sprite-icons.png) no-repeat; overflow: hidden; padding: 0 28px 10px 0; }

.section-region { background: #e2ab33; }
.section-region i { background-position: -10px 0; }

.section-species { background: #95bc48; }
.section-species i { background-position: -50px 2px; }

.section-details { background: #39bb92; }
.section-details i { background-position: -100px 1px; padding-right: 20px; }

.section-animation { background: #1ba7b4; margin-bottom: 2em; }
.section-animation i { background-position: -150px 2px; padding-right: 20px; }

#intro { border: 3px solid white; border-radius: 8px; padding: 4px; background-color: #87e0fd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); background-image: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background-image: linear-gradient(to bottom,#87e0fd 0%, #53cbf1 40%, #05abe0 100%); margin-bottom: 20px; padding: 10px; }
#intro .intro-inner { background-image: url(../img/hdr_fishicon.png); background-position: 0 5px; background-repeat: no-repeat; min-height: 87px; padding-left: 110px; position: relative; }
#intro h1 { color: white; font-size: 2.5em; font-weight: 600; line-height: 1.25; margin: 0; text-transform: uppercase; }
#intro p { color: white; font-weight: 700; line-height: 1.25; margin: 0; padding: 0; }
#intro p.note { font-weight: normal; margin-top: 0.5em; }
#intro p.note a { text-decoration: underline; }
#intro a { color: white; }
#intro .sharing { position: absolute; right: 0; top: 2.75em; }

#steps { display: none; }

.js #steps { background-color: #87e0fd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); background-image: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background-image: linear-gradient(to bottom,#87e0fd 0%, #53cbf1 40%, #05abe0 100%); border: 3px solid white; border-radius: 8px; padding: 4px; *zoom: 1; display: block; margin-bottom: 20px; }
.js #steps:before, .js #steps:after { content: " "; display: table; }
.js #steps:after { clear: both; }

.step { color: white; float: left; font-size: 100%; padding: 15px 5px; width: 19%; }
.step:first-child { padding-left: 15px; width: 15%; }
.step i { background-image: url(../img/sprite-steps.png); background-repeat: no-repeat; float: left; height: 52px; margin-right: 10px; width: 52px; }

.step-region i { background-position: -2px -2px; }

.step-species i { background-position: -60px -2px; }

.step-details i { background-position: -118px -2px; }

.step-animation i { background-position: -176px -2px; }

#menu { border: 3px solid white; border-radius: 8px; padding: 4px; background: white; font-size: 12px; margin-bottom: 0.833333333em; }

.button { *zoom: 1; background: transparent; border: 0; border-bottom: 1px solid #e8e8e8; color: #4f5050; display: block; font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; line-height: 2.5; margin: 0; padding: 5px 0; text-align: left; text-transform: uppercase; width: 100%; }
.button:before, .button:after { content: " "; display: table; }
.button:after { clear: both; }
.button.button-all { border-bottom: 0; }

.button:hover { cursor: pointer; }

.button:focus { outline: 0; }

.button i { background: url(../img/location.png) no-repeat 100px 100px; border: 1px solid #c2c2c2; border-radius: 30px; float: left; height: 28px; margin-right: 10px; width: 28px; }

.button-all i { background: white; border: 1px solid white; }

.button-gmfmc i { background-color: #fdb3fe; }

.button-hms i { background-color: #c2c2c2; }

.button-mafmc i { background-color: #b6c1d9; }

.button-nefmc i { background-color: #9999cc; }

.button-npfmc i { background-color: #cc9999; }

.button-pfmc i { background-color: #ede1d1; }

.button-safmc i { background-color: #d6dfe9; }

.button-gmfmc:hover i { background-color: #fa40fd; }

.button-hms:hover i { background-color: #666666; }

.button-mafmc:hover i { background-color: #4863a0; }

.button-nefmc:hover i { background-color: navy; }

.button-npfmc:hover i { background-color: maroon; }

.button-pfmc:hover i { background-color: #d2841d; }

.button-safmc:hover i { background-color: #98afc7; }

.showing-gmfmc .button-gmfmc i { background-color: #fa40fd; }

.showing-hms .button-hms i { background-color: #666666; }

.showing-mafmc .button-mafmc i { background-color: #4863a0; }

.showing-nefmc .button-nefmc i { background-color: navy; }

.showing-npfmc .button-npfmc i { background-color: maroon; }

.showing-pfmc .button-pfmc i { background-color: #d2841d; }

.showing-safmc .button-safmc i { background-color: #98afc7; }

.showing-gmfmc .button-gmfmc i, .showing-hms .button-hms i, .showing-mafmc .button-mafmc i, .showing-nefmc .button-nefmc i, .showing-npfmc .button-npfmc i, .showing-pfmc .button-pfmc i, .showing-safmc .button-safmc i { background-position: 9px 6px; border-color: #a8a8a8; }

#species-box { border: 3px solid white; border-radius: 8px; padding: 4px; background: white; font-size: 12px; }

#species-box h3 { margin-bottom: 0.25em; }

.species-wrapper { border: 1px solid #e8e8e8; height: 216px; overflow-x: hidden; overflow-y: scroll; padding: 0; }

.species { background: transparent; border: 0; color: #666666; display: block; font: 13px/1.30769 "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0.5em 0.75em; padding: 0; text-align: left; }

.species:hover { cursor: pointer; }

.species.selected { font-weight: bold; }

.chart-container { border: 3px solid white; border-radius: 8px; padding: 4px; background: white; margin-bottom: 0.833333333em; min-height: 403px; padding: 10px 5px 10px 15px; }

.chart-container-inner { background: url(../img/fishing-zones.jpg) no-repeat 56px 4px; position: relative; }

text { fill: #666666; font: 10px "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; }

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

.label { fill: black; font-size: 10px; }

.x.label, .y.label { font-size: 18px; font-weight: bold; }

.label .meta { font-weight: normal; }

.label .sub { baseline-shift: sub; font-size: 10px; }

.label .sub tspan { font-size: 18px; }

.year { fill: #b8b8b8; font: 98px/1 "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; }

.dot { display: none; position: relative; stroke: white; }

.dot.overfished { stroke: #00b300; stroke-width: 5; }

.dot.no-data { fill-opacity: 0.25; }

.dot.visible, .showing-all .dot, .showing-nefmc .dot.nefmc, .showing-mafmc .dot.mafmc, .showing-safmc .dot.safmc, .showing-gmfmc .dot.gmfmc, .showing-npfmc .dot.npfmc, .showing-pfmc .dot.pfmc, .showing-hms .dot.hms { display: inline; }

.dot.gmfmc { fill: #fa40fd; }

.dot.hms { fill: #666666; }

.dot.mafmc { fill: #4863a0; }

.dot.nefmc { fill: navy; }

.dot.npfmc { fill: maroon; }

.dot.pfmc { fill: #d2841d; }

.dot.safmc { fill: #98afc7; }

.stop-ne { stop-color: navy; }

.stop-ma { stop-color: #4863a0; }

.stop-sa { stop-color: #98afc7; }

.stop-gm { stop-color: #fa40fd; }

.tooltip { background: white; background: rgba(255, 255, 255, 0.75); border: 2px solid #666666; display: none; font-size: 11px; font-weight: bold; line-height: 1.1; max-width: 225px; padding: 5px 10px 3px; position: absolute; }

.tooltip.visible { display: block; }

.tooltip.gmfmc { border-color: #fa40fd; }

.tooltip.hms { border-color: #666666; }

.tooltip.mafmc { border-color: #4863a0; }

.tooltip.nefmc { border-color: navy; }

.tooltip.npfmc { border-color: maroon; }

.tooltip.pfmc { border-color: #d2841d; }

.tooltip.safmc { border-color: #98afc7; }

.tooltip.nefmc.mafmc { border-color: navy #4863a0 #4863a0 navy; }

.tooltip.safmc.gmfmc { border-color: #98afc7 #fa40fd #fa40fd #98afc7; }

.tooltip p { font-size: 100%; font-weight: bold; margin: 0; }

#infobox { background: white; font-size: 12px; }
#infobox p { font-size: 1em; line-height: 1.166666667; margin: 0 0 0.25em; }

.controls { *zoom: 1; background: white; }
.controls:before, .controls:after { content: " "; display: table; }
.controls:after { clear: both; }

button.btn { background-color: white; border: 1px solid #929292; color: #1ba7b4; float: left; font-size: 1em; font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0 1em 0 0; padding: 2px 7px; width: 2em; }

button.btn:hover, button.btn:focus { background-color: #1ba7b4; color: white; cursor: pointer; }

.slider-wrapper { background: white; border: 1px solid #929292; float: left; height: 10px; margin-right: 1em; margin-top: 7px; position: relative; width: 70%; }

.slider { background: #1ba7b4; height: 100%; width: 0%; }

.slider-handle { background: #147e88; border: 1px solid #666666; height: 18px; left: 0; margin: 0; padding: 0; position: absolute; top: -4px; width: 10px; }

.slider-year { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); color: #929292; font-weight: bold; position: absolute; font-size: 12px; margin-left: -1em; top: 20px; }

.slider-overfish { color: #1ba7b4; left: 56.666666667%; }

.slider-end { left: 100%; }