/* --------------------------------------- */
/* EMODnet Bathymetry GENERAL css */
/* --------------------------------------- */

@import url(reset.css);
@import url(font.css);
@import url(font-awesome.min.css);
@import url(menu.css);
@import url(google.css);

html							{ overflow: -moz-scrollbars-vertical; overflow-x: auto; overflow-y: scroll; }
body							{ background-color: #fff; }
body, td {
	font-family: "Open Sans", arial, helvetica, sans-serif;
	font-size: 1em;
	color: #444;
	line-height: 1.6em;
	}

.debug							{ color: #f00; display: block; }

a								{ color: #0e72b5; text-decoration: none; }
a:hover							{ color: #000; text-decoration: none; }


.wrapper {
	position: relative;
	width: 1240px;
	margin: 0px auto;
	padding: 0px 20px 0px 20px;
	display: block;
	}


/* font */
.btn,
#sidenav,
#sidenav h3
	{
	font-family: "OpenSans-bold", arial, helvetica, sans-serif;
	font-weight: normal;
	}


/* btn */
.btn {
	background-color: #f8b333;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 18px;
	}

.btn:hover 						{ background-color: #000; }

.btn a {
	color: #000;
	padding: 6px 10px 6px 10px;
	display: block;
	}

.btn a:hover					{ color: #f8b333; }


/* header */
header {
	height: 198px;
	margin-bottom: 18px;
	}

#topbar {
    background: url(/grfx/background_primary_header.jpg) no-repeat;
    background-size: cover;
    min-height: 125px;
	padding-top:10px;
	}

.topbar-left  { width: 66.66666667%; float:left; margin-top:5px;}
.topbar-right { width: 33.33%; float:right; padding-top:20px; }

.region-header .block {
    font-size: 0.857em;
    margin: 0 10px;
    padding: 0;
}

.block-contact-submit a {
    font-size: 15px;
    padding-left: 29px;
    text-decoration: none;
    font-weight: 600;
	color:#444;
}

.block-contact-submit a:first-child { color:#337ab7; text-transform:uppercase;}

#logo {
    background: url(/grfx/logo_2x.png) no-repeat;
    background-size: 110px auto;
    text-indent: -9999px;
    width: 130px;
    height: auto;
    float: left;
}

#logo a {
    height: 85px;
    display: block;
}

#branding h1 {
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    margin-left: 20px;
    color: #222;
    font-family: 'Open Sans', sans-serif;
	padding-top:5px;
	font-size:1.8em;
}

#branding p {
    font-size: 15px;
    margin-top: 7px;
    margin-left: 20px;
    word-spacing: 0.1em;
    color: #888;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

header .logo img {
    width: 110px;
    height: 85px;
}

#branding {
    width: 78%;
    float: left;
	padding-top:10px;
}

.border-branding {
    border-left: 3px solid #F8BC00;
    height: 70px;
}

header .logo a					{ height: 90px; display: block; }

header .wrapper 				{ position: relative; }

header h2 {
	position: absolute;
	font-size: 1.88em;
	color: #fff;
	top: -108px;
	right: 20px;
	z-index: 11;
	}

#freesearch {
	position: relative;
    float: right;
	max-width:250px;
	}

#freesearch input[type="submit"] {
    text-indent: -9999px;
    padding: 0 8px;
    height: 24px;
    width: 24px;
    background-image: url(/grfx/search-icon.png) ;
    background-repeat: no-repeat;
	border: 1px solid #ddd;
	background-color:#fff;
	padding:5px;
    background-size: 24px 24px;
    border: 0px;
    cursor: pointer;
    margin-top: 0px;
	right:10px;
	top:5px;
	position:absolute;
}

#tag-search						{ display: none; }

.search-icon {
	color: #f8b333;
	padding: 10px;
	cursor: pointer;
	display: none;
	}

.search-box {
	position: relative;
	clear: both;
	display: block;
	}

.search-box i {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: 0 solid;
    color: #aaa;
    position: absolute;
    right: 5px;
    font-size: 21px;
    bottom: 8px;
	}

#freesearch input[type=text] {
	border:0px;
    font-size: 1em;
    height: 35px;
	float:left;
    padding: 0px 12px;
    width: 100%;
	-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
	border: 1px solid #ddd;
	}

#freesearch input:focus			{ outline: none; }

#tag-search:checked + div.search-box {
	display: block;
	animation: trans-in 1s ease;
	animation-fill-mode: forwards;
	}

@keyframes trans-in {
	from {transform: scaleY(0);}
	to {transform: scaleY(1);}
	}

#freesearch input[type=search]::-webkit-input-placeholder { color: #eee; }
#freesearch input[type=search]::-moz-placeholder		{ color: #eee; }
#freesearch input[type=search]:-ms-input-placeholder	{ color: #eee; }
#freesearch input[type=search]:-moz-placeholder			{ color: #eee; }


/* breadcrumb */
#breadcrumb 					{ font-size: 0.88em; margin-bottom: 18px; z-index: 10; }
#breadcrumb ul					{ list-style: none; }
#breadcrumb ul li				{ display: inline-block;}
#breadcrumb ul li:after {
	content:"/";
	padding-left: 6px;
	padding-right: 4px;
	}

#breadcrumb ul li:last-child:after	{ content: none; }

/* content */
main							{ min-height: 480px; margin-bottom: 54px; padding-top: 18px; display: block; }

#content 						{ width: 885px; float: left; }

#content a[href$=".pdf"]:after, #content a[href$=".xlsx"]:after {
	background: url(/grfx/pdf-icon.png) no-repeat;
	content:'';
	width:21px;
	height:26px;
    display: inline-block;
	margin-left: 1px;
	background-position:center center;
	background-size: 60%;
	vertical-align:bottom;
}

#content a[href$=".xlsx"]:after {
	background: url(/grfx/xlsx-icon.png) no-repeat;
	background-size: 60%;
	background-position:center center;
}

aside {
	width: 295px;
	margin-right: 20px;
	float: left;
	}

.sidephoto {
	border: 1px solid #0b72b5;
	margin-bottom: 18px;
	width: 275px;
	height: 198px;
	overflow: hidden;
	}

.sidephoto p 					{ }
.sidephoto img					{ width: 100%; }

#content h1,
#content ul,
#content ol,
#content p {
	margin-bottom: 18px;
	}

#content ul,
#content ol {
	margin-left: 20px;
	}

#content ul li					{ list-style-type: square; }

#content h1						{ font-size: 1.5em; margin-bottom: 18px; }

#content a						{ font-weight: bold; }


/* browse */
.cookie-table,
.browse_table {
	border: 1px solid #ebebeb;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
	}

.cookie-table					{ border-collapse: separate; border-spacing: 1px; }

.browse_table tr {
	border: 1px solid #ebebeb;
 	padding: 5px;
	}

.cookie-table tr:nth-of-type(odd),	
.browse_table tr:nth-of-type(odd) {
	background: #ebebeb;
	}

.cookie-table th,
.cookie-table td,
.browse_table td {
	text-align: left;
	padding: 10px;
	vertical-align: top;
	}

.cookie-table th,
.cookie-table td {
	font-size: 0.8em;
}
	

.browse_table tr.browse_subject {
	background: #444;
	}

.browse_table .browse_subject td {
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	}

.browse_desc-1					{ width: 15%; }
.browse_desc-2					{ width: 5%; }


/* footer */

footer {
	 background-color: #333;
    display: block;
	}

#photobar {
	background: url(/grfx/photobar-bg.jpg) no-repeat;
	background-size: cover;
	height: 216px;
	margin-bottom: 36px;
	}

footer .col {
	font-size: 0.88em;
	max-width:100%;
	margin-right: 20px;
	margin-bottom: 18px;
	float: left;
	}

footer .col:last-of-type		{ margin-right: 0px; float:right; width:auto;}
footer .col:first-child         { width:250px; }
footer .col ul 					{ list-style: none; text-transform:uppercase; vertical-align:top; width:300px; }
footer .col:nth-child(2) ul     { display:inline-block; }
footer .col a					{ color: #fff; text-decoration: none; }
footer .col a:hover				{ color: #0b72b5; }
footer .col h3					{ font-size: 1.3em; color: #0b72b5; margin-bottom: 10px; }
footer .col h4					{ font-size: 1.1em; margin-bottom: 18px; color:#fff; text-transform:Uppercase; }
footer .hosted					{ font-weight:200; margin-top:10px; color:#fff; font-size: 0.9em; line-height: 20px; }

footer .logo {
	background:url("/grfx/logo-footer.png") no-repeat scroll 0 0 / 60% auto;
	text-indent: -9999px;
	min-height: 167px;
	margin-bottom: 18px;
	display: block;
	}

footer .logo a 					{ display: block;     height: 168px; }

footer .btn a:hover				{ color: #fff; }

footer #socialmedia li a i {
    font-size: 31px;
    padding: 0 5px 0 0;
}

#socialmedia li {
	width: 18px;
	height: 18px;
	margin-right: 20px;
	display: inline-block;
	}

.footer-copyright {
	background:#f8b334;
	font-size: 0.75em;
	display: block;
	clear: left;
	padding:15px 0px;
	}

.footer-copyright p {
	float: left;
	}

.footer-copyright ul {
	list-style: none;
	width: 295px;
	float: right;
	}

.footer-copyright ul li a		{ color: #333; }


.footer-copyright ul li { float:left; margin-right:15px; }


.copyright-eu {
    background: #f1f1f1 none repeat scroll 0 0;
    padding: 18px 20px;
}

.copyright-eu dt {
    background: url("/grfx/european-commission.png") no-repeat scroll 0 0 / 100% auto;
    float: left;
    height: 67px;
    margin-right: 40px;
	width: 100px;
	margin-top:20px;
}

.copyright-eu dd {
    font-size: 0.9em;
    margin-left: 114px;
    padding-top: 18px;
	font-weight: 100;
    padding-top: 30px;
    text-align: left;
}

/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */
@media only screen and (max-width: 1280px) {

	.wrapper					{ width: 1110px; }

	#freesearch					{ width: 198px; }

	#content 					{ width: 790px; }
	footer .col:nth-child(2) ul:last-of-type              { width: 100px; }

	aside 						{ width: 257px; }

	.sidephoto,
	.sidephoto p {
		width: 237px;
		height: 171px;
		}

}

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

	.wrapper					{ width: 1000px; }

	#freesearch					{ width: 180px; }

	#content 					{ width: 700px; }
	#content img				{ max-width: 100%; height: auto; }

	footer .col,
	aside						{ width: 227px; margin-right: 18px; }

	.sidephoto,
	.sidephoto p {
		width: 207px;
		height: 149px;
		}

	footer .col:first-child { width:150px; }
	footer .col:nth-child(2) { width:300px; }
	footer .col:nth-child(2) ul { width:200px; }

}

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

	.wrapper					{ width: 936px; }

	#freesearch					{ width: 162px; margin-left:30px;}

	#content 					{ width: 667px; }

	footer .col,
	aside						{ width: 209px; margin-right: 20px; }

	footer .col h3				{ font-size: 1.1em; }
	footer .col:nth-child(2) ul { width:170px; }

	.sidephoto,
	.sidephoto p {
		width: 189px;
		height: 136px;
		}

}

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

	.wrapper					{ width: 778px; }
	footer .col ul 				{ width:auto; }
	#content 					{ width: 486px; }
	.copyright-eu dd            { padding-top:10px; }

	.footer-copyright p 		{ max-width: 70%; }

	.footer-copyright ul		{ max-width: 23%; }

	footer .col,
	aside						{ width: 234px; margin-right: 18px; }
	#branding h1 				{ font-size: 1.6em; }
	#branding					{ width:70%; }
	footer .col					{ width: 171px; }
	.block-contact-submit a 	{ padding-left:10px; }
	footer .col h3				{ font-size: 1.3em; }
	footer .col:last-of-type	{ width:170px; }
	.sidephoto,
	.sidephoto p {
		width: 214px;
		height: 154px;
		}

}

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

	.wrapper					{ width: 100%; }
	#content,
	aside {
		width: 100% !important;
		float: none;
		}

	#content 					{ display: table-header-group; }
	#content img				{ float: none !important; margin-bottom: 18px !important;}
	aside						{ margin-right: 0px; display: table-footer-group; }

	#photobar 					{ height: 162px; }
	footer .col					{ width: 23%; }
	.block-contact-submit a     { padding-left:5px; }
	#branding p 				{ max-width:auto; }

}

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

	footer .col h3				{ display: none; }
	#topbar						{ overflow:hidden; }
	.border-branding			{ height:auto; line-height:30px; width:450px; }
	footer .col:last-of-type	{ float:none; width:auto;}
	#topbar						{ padding:20px 0px; }
	.topbar-left 				{ width: 100%; float: left;}
	#freesearch					{ width:100%; margin-top:10px; }
	.topbar-right				{ padding-top:0px; width:70%; }
	header 						{ height:250px; }
	.footer-copyright p 		{ max-width: 100%; margin-bottom: 18px; float: none; }
	.footer-copyright ul		{ max-width: 100%; float: none; }

}

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

	header h2					{ display: none; }
	#branding, .border-branding	{ text-align: center; padding-top:0px;  margin-left: 0px; width:100%; float:none; border:0;}
	#logo {
		background-position: center 0px;
		border-right: 0px;
		width: 100%;
		height: auto;
		margin-bottom: 8px;
		float: none;

	}
	#photobar 					{ background: #0b72b5; height: 8px; }
	footer .col					{ width: 46%; }
	footer .col:first-child		{ width: 100%; }
	footer .logo				{ background-position: center 0px; background-size: auto 100%; width: 100%; margin-left: 0px; margin-bottom: 36px;  float: none; }
	#branding p 				{ max-width:100%; margin-top:0px;}
	.copyright-eu dt {
		background-size: auto 100%;
		margin-right: 0px;
		width: 100%;
		float: none;
	}
	.copyright-eu dd            { margin-left:0px; }
	header 						{ height:330px; }
	footer .col:nth-child(2) {
		width: 100%;
		float:none;
	}
	footer .col:nth-child(2) ul,	footer .col:nth-child(2) ul:last-of-type  { width:46%; }

	footer .col:last-of-type{ 
		float: none;
		margin: 0 auto;
		width:200px;
		margin-bottom: 50px;
		margin-top: 50px;
	}

}


@media only screen and (max-width: 640px) {
	main { padding-top:40px; }
	footer .col:nth-child(2) { margin-left:40px; }

}



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

	footer .col:nth-child(2) ul {
		width: 100%;
		float: none;
	}


}