/* --------------------------------------- */
/* EMODNet Chemistry MATRIX css */
/* --------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, em, img, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, figcaption, figure, footer, header, menu, nav, section, audio, video {
    margin: 0px;
    padding: 0px;
    outline: 0;
}

header {
	position: relative;
	margin-bottom: 18px;
}

#map {
	border-top:0px solid #000;
}

#content						{
	width: 100%; float: none; padding: 2px 20px; 
	/* max-width:925px; */
}

#content h4 {
	font-size: 1.1em;
	margin-bottom: 0px;
	}

#graphic-map {
	position: relative;
	height: 492px;
	overflow: hidden;
	clear: both;
	}

#graphic-map img				{ width: 100%; }

#graphic-overview {
	border: 1px solid #009de0;
	width: 100%;
	}

#graphic-overview tr:nth-of-type(odd) {
	background-color: #d6eaec;
	}

.map-container
{
	max-width:925px;
	position:absolute;
	top:0;
}

#content iframe, #content object {
    max-width: 100%;
    height: 1500px;
    width: 100%;
    border: none;
}

#graphic-overview th {
	background-color: #0073ba;
	font-size: 0.85em;
	color: #fff;
	text-align: left;
	padding: 5px;
	width: 120px;
	max-width:100%
    word-wrap: break-word;
	text-align:center;
	line-height:normal;
	}

#graphic-overview th:first-child { width: auto; width:230px; max-width:100%; text-align:left;}

#graphic-overview td {
	font-size: 0.85em;
	padding: 5px;
	}

.map_image
{
    max-width: 100%;
    height: auto;
}

.graphic-icon-info {
	background-color: #000;
	background-image: url(/cdi_v5/grfx/info-icon.png);
	background-repeat: no-repeat;
	background-size: auto 14px;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	display: inline-block;
	cursor: pointer;
	margin:0 auto;
	}

.graphic-status {
	width: 14px;
	height: 14px;
	margin: auto;
	/* cursor:pointer; */
	}

.stat-0							{ background-color: transparent; }
.stat-1							{ background-color: #ff1f24; }
.stat-2							{ background-color: #ff8455; }
.stat-3							{ background-color: #dddd55; }
.stat-4							{ background-color: #a5f12c; }
.stat-5							{ background-color: #00f04a; }
.stat-6							{ background-color: #00f0e4; }
.stat-7							{ background-color: #00b5fa; }
.stat-8							{ background-color: #002efc; }

#graphic-legend-overview		{ margin-bottom: 18px; }
#graphic-legend-overview h5		{ font-weight: normal; font-size: 0.85em; }

#graphic-legend .graphic-status { margin:auto; }

#graphic-legend {
	border: solid #009de0;
	border-width: 0px 1px 1px 1px;
	padding: 10px;

    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
	}

#graphic-legend dl {
	display: block;
	max-width:100%;
	overflow:hidden;
	-moz-column-break-inside:avoid;
	-webkit-column-break-inside:avoid;
  	column-break-inside:avoid;
	-webkit-transform: translate3d(0, 0, 0);
	}

#graphic-legend dt {
	width: 24px;
	padding-top: 5px;
	float: left;
	}

#graphic-legend dd {
	font-size: 0.85em;
	margin-left: 24px;
	}

/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */

@media only screen and (max-width: 1280px) {

	#graphic-map					{ height: auto; max-width:917px;}

	#graphic-legend-overview		{ width: 64%; }

	#superbox-innerbox iframe, #superbox-innerbox {
		height:auto !important; 
		min-height: 480px;
		overflow:hidden; 
		overflow-y: hidden;
		}
  
}

@media only screen and (max-width: 1152px) {

	#graphic-legend-overview		{ width: 70%; }

}

@media only screen and (max-width: 1024px) {

	#graphic-legend-overview		{ width: 75%; }

	#graphic-legend dd,
	#graphic-legend-overview h5,
	#graphic-overview th,
	#graphic-overview td {
		padding-top:0px;
		}

}

@media only screen and (max-width: 960px) {

	#graphic-legend-overview		{ width: 100%; float: none; }

	.graphic-status 				{ margin: 0 auto; }

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 800px) {

	#graphic-legend-overview								{ margin-bottom: 36px; }
	.map-container, .graphic-map, #content					{ width:100%; max-width:100%;}
	#content iframe, #content object {width:100% !important;}

}

/* ==> breakpoint mobiles */
@media only screen and (max-width: 640px) {

	#graphic-map img				{ width: auto; max-width: 100%; }

}


@media only screen and (min-width: 321px) and (max-width: 600px) {

	#graphic-legend-overview		{ width: 100%; float: none; }

	.graphic-status 				{ margin: 0px; }

	#graphic-overview, #graphic-overview thead, #graphic-overview tbody,
	#graphic-overview tr, #graphic-overview th, #graphic-overview td {
		display: block;
		}

		#graphic-overview {
		 overflow: scroll;
   		 height: 600px;
			}

	#graphic-overview th {
		position: absolute;
		top: -9999px;
		left: -9999px;
		}

	#graphic-overview tr		{ border-bottom: 1px solid #009de0; }
	#graphic-overview tr:first-child		{ border-bottom: 0px; }

	#graphic-overview td {
		border: none;
		position: relative;
		padding-left: 50% !important;
		height:20px;
		}

	#graphic-overview td:before {
		position: absolute;
		top: 1px;
		left: 4px;
		width: 45% !important;
		font-weight: bold;
		white-space: nowrap;
		}

	#graphic-overview td:nth-of-type(1):before { content: "Group of Variables"; }
	#graphic-overview td:nth-of-type(2):before { content: "Greater North Sea..."; }
	#graphic-overview td:nth-of-type(3):before { content: "Baltic Sea"; }
	#graphic-overview td:nth-of-type(4):before { content: "Iberian peninsula..."; }
	#graphic-overview td:nth-of-type(5):before { content: "Mediterranean Sea"; }
	#graphic-overview td:nth-of-type(6):before { content: "Black Sea - Sea of Azov"; }

	#graphic-legend {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 20px;
		-webkit-column-gap: 20px;
		column-gap: 20px;
		}

}

/* print */
@media print {


}