body {
	background-image:none;
	background-color: rgb(36, 87, 122, 1);
}

#div_main_frame {
	position: absolute;
	z-index: 20000;
	background-color: rgba(55, 30, 40, 0.8); 
	color: #dddddd;
	width:100%; 
	height:100%; 
	clear:both; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	/*top: 80px;*/
	top: 0px;
	left: 0;
	transition: max-height 2s ease 2s, 
		width 2s ease 2s, 
		top 2s ease 2s, 
		left 2s ease 2s, 
		opacity 2s ease 6s, 
		border 1s ease 2s, 
		border-radius 1s ease 2s;
}

div.beforeLoad {
	background-color: rgb(36, 87, 122, 1)!important;
}

#header {
	display: flex;
	justify-content: space-between;
	width: 100%;
	/*
	background-color: rgba(55, 30, 40, 0.8);
	position: absolute;
	*/
	top: 0;
	left: 0;
	height: 80px;
	font-family: "Source Sans Pro", sans-serif!important;
	/*font-size: 0.9em!important;*/
	transition: all 1s linear;	
	z-index: 20000;
}
#header.mapper {
	background-color: rgba(55, 30, 40, 0);
	pointer-events: none !important;
	visibility: visible;
}
#header-sub {
	display: flex;
	width: 45%;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	font-size:1em;
	letter-spacing: 0.1em;
	height: 5.5rem;
	padding: 18px 50px 0 0;
	/*transition: all 1s linear;*/	
}

#header-sub.mapper {
	flex-direction: row;
	width: 100%;
	justify-content: flex-end;
	height: 55px;
	align-items: flex-start;
	pointer-events: none !important;
	padding-top: 13px;
}

#tboxCoverQuickSearch-labelCell {
	width: 8.5em;
}
#tboxCoverQuickSearch-bodyEl {
	width: 100%;
}

#cover_quick_search {
	flex: 1 1 auto;
}
#tboxCoverQuickSearch {
	width: 100% !important;
}
#logo {
	height: 5.5rem;
	width: 5.5rem;
	border-radius: 100%;
	background-image: url(/icons/seamap_logo_72x50.png);
	background-repeat: no-repeat;
	background-position-x: 20px;
	background-position-y: 8px;
	transition: all 1s linear;	
	pointer-events: all;
}
#logo.mapper {
	height: 55px;
	background-size: 50px;
	width: 80px;
}
#logo.mainContentVisibleStart {
	top: 0!important;
	left: 1vw!important;
}
#logo.mainContentVisibleEnd {
}
#header-fill {
	width: 45%;
}

#header-sub-fill {
	flex:1;
	display:none;
	justify-content: flex-end;
}

#header-sub-fill.mapper {
	display:flex!important;
	flex: 1;
}

#subMenuFrame.mapper {
	order: 2;
	flex: 1;
	display: flex;
	justify-content: flex-end;
	/*height: 24px;*/
	line-height: 24px;
	height: auto;
}
#subMenu {
	color: #dddddd;
	z-index: 100;
	transition: all 1s linear;	
	pointer-events: all;
}

.subMenu-loggedin {
	line-height: 14px !important;
	margin-top: -8px !important;
}

#subMenuFrame.subMenu-loggedin #subMenu.mapper {
	padding-top: 3px;
	padding-bottom: 4px;
}
#subMenu hr {
	display: none;
}
#subMenu.mapper {
	/*background-color: rgba(55, 30, 40, 0.5);*/
	background-color: rgb(86, 137, 172, 0.7);
	padding: 0px 15px 0px 3px;
	height: auto;
	border-radius: 4px;
	margin-left: 35px;
	text-align: right;
}
#subMenu.mapper hr {
	display: block!important;
}

#cover_search_frame {
	display:flex; 
	visibility:hidden;
	pointer-events: all;
	
	width: 44vw; 
	height: 1.8em;
	justify-content: space-around; 
	margin-top: 6px;
	margin-bottom: 12px;
	opacity: 0;
	animation: createBox 2s 1 1s;
	animation-fill-mode: forwards;
}

#cover_search_frame.top {
	position: absolute !important;
	top: 0 !important;
}

#cover_search_frame.mapper {
	order: 1;
	margin-top: 12px;
	width: 48vw;
	margin-left: auto;
	margin-right: auto;
	transition: 2s all;
	top: 0px;
	height:2.5em;
}
#cover_search_frame.mapper.top {
	height: 1.8em !important;
	border: none !important;
	width: 44vw;
}

#cover_search_frame ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 0.95em;
}
#cover_search_frame ::-moz-placeholder { /* Firefox 19+ */
  font-size: 0.95em;
}
#cover_search_frame.mapper.top ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 0.9em;
}
#cover_search_frame.mapper.top ::-moz-placeholder { /* Firefox 19+ */
  font-size: 0.9em;
}

#cover_search_frame .search-box {
	background-color: rgba(240, 240, 240, 0.8);
	border-radius: 20px;
	display: flex;
	flex-basis: 85%;
}
#cover_search_frame.mapper .search-box {
	border: 1px solid #aaa;
}
#cover_search_frame div.browse-button {
	background-color: #eee;
	border-radius: 20px;
	width: 1.8em;
	height: 1.8em; 
	flex-basis: 1.8em;
	margin: 1px;
	opacity: 0.8;
	background-repeat: no-repeat;
}
#cover_search_frame.mapper div.browse-button {
	opacity: 0.9;
}
#cover_search_frame.mapper div.browse-button {
	width: 2.4em;
	height: 2.4em; 
	flex-basis: 2.4em;
	border: 1px solid #aaa;
}
#cover_search_frame.mapper.top div.browse-button {
	width: 1.8em;
	height: 1.8em; 
	flex-basis: 1.8em;
}
#cover_search_frame div.browse-species {
	background-image: url(/icons/icon_whale_fluke_transparent.png);
	background-size: 25px;
}
#cover_search_frame.mapper div.browse-species {
	background-size: 30px;
	background-position: 1px;
}
#cover_search_frame.mapper.top div.browse-species {
	background-size: 25px;
	background-position: 0px;
}
#cover_search_frame div.browse-species:hover {
	background-color:rgb(210, 224, 249);
}
#cover_search_frame div.browse-datasets {
	background-image: url(/icons/icon_copy.png);
	background-size: 24px;
	background-position: 1px;
}
#cover_search_frame div.browse-datasets:hover {
	background-color:rgb(247, 206, 179);
}
#cover_search_frame.mapper div.browse-datasets {
	background-size: 29px;
}
#cover_search_frame.mapper.top div.browse-datasets {
	background-size: 23px;
	background-position: 0;
}
#cover_search_frame img.browse-contributors {
	width:26px;
	margin-top: -1px;
	opacity: 0.7;
}
#cover_search_frame.mapper img.browse-contributors {
	width:32px;
}
#cover_search_frame.mapper.top img.browse-contributors {
	width:26px;
	margin-top: -2px;
}
#cover_search_frame div.browse-contributors:hover {
	background-color:rgb(209, 236, 191);
}
#cover_search_frame.mapper input {
	height: 1.9em !important;
}
#cover_search_frame.mapper.top input {
	height: 1.4em !important;
	padding-top: 0px;
}
#cover_search_frame.mapper.top div.link {
	margin-top: 0px !important;
}
#cover_search_frame.mapper div.link {
	margin-top: 4px;
}

#subMenu.mainContentVisibleStart {
	top: 20px;
	margin-top: 0;
}
#subMenu.mainContentVisibleEnd input {
	width: 140px!important;
}

#subMenu .menuItem {
	display: inline-block;
	margin-left: 10px;
}

#divCover {
	position: relative;
	right: 0;
	font-family: "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	font-size: 0.9em;
	width:100%;
	height: auto;
	background-color: transparent!important;
	text-align: center; 
	opacity: 1; 
	z-index: 200;
	border-bottom: 6px solid #4e8596;
	border-bottom: none;
}

#divCover.mainContentVisibleEnd {
	overflow: auto;
}

.cover-quick-search-label {
	/*background-color: rgb(86, 137, 172, 0.5);*/
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	height: 22px;
	line-height: 22px;'
	display: inline-block;
	vertical-align: middle;	
	color: #dddddd;	
}
.cover-quick-search-field {
	/*width:300px;*/
	/*font-size: 1.1em;*/
	font-size: 1.2em;
	color: #333333;
	/*background: rgba(240, 240, 240, 0.8);*/
	background: transparent;
	border: 0;
	/*border-top-right-radius: 3px;*/
	padding: 3px 4px;
	/*border-bottom-right-radius: 3px;*/
	/*height: 24px!important;*/
	height: 1.4em!important;
	display: inline-block;vertical-align: middle;
	margin-top: 1px;
}
#tboxCoverQuickSearch.quick-search-box .x-form-empty-field {
	color: #333333!important;
	/*font-size: 0.9em;*/
	font-size: 1.2em;
	background: transparent;
}

.cover-quick-search-list {
	/*background: rgba(200, 200, 200, 0.5);*/
	z-index: 50001!important;
}
.cover-search-option {
	/*
	width: 20px; 
	background-color: rgb(180, 180, 180, 1);
	*/ 
	width: 25px;
	height: 24px; 
	border-top-right-radius: 4px; 
	vertical-align: bottom; 
	border-bottom-right-radius: 4px; 
	z-index: 10;
	cursor: pointer;
}
#divSearchOptions {
	color: #dddddd;
	font-size: 1.1em;
	padding: 5px;
	border-radius: 4px;
	visibility: visible;
	z-index: 20100;
}

#divSearchOptions {
	background-color: rgb(86, 137, 172, 0.5);	
}
#divSearchOptions.mapper {
	background-color: rgb(86, 137, 172, 0.7);
}

#divSearchOptions div {
	cursor:pointer;
	padding: 1px 10px;
}

#subMenu div.button {
	display: inline-block;
}

.x-boundlist {
	/*z-index: 20002!important;*/
}

#wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
	
#mainMenu {
	height: auto;
	text-align: center;
	font-weight: 300;
	line-height: 27px;
	color: #dddddd;
	display: flex;
	flex-direction: column;
	background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%)-moz-image-rect;
	max-width: 100%;
	position: relative;
	align-items: center;
	margin: 0;
	width: 82vw;
}

#mainMenu nav a:hover, #mainMenu nav div:hover {
	color: #EB9900;
}

#mainMenu.static-content {
	height:24vh;
}
	
	.fixedPosition {
		position: fixed!important;
	}
	#nav.fixedPosition {
		margin-top: 0;
	}
	.transitionReady {
	    -webkit-transition: all 1s linear;
	    -moz-transition: all 1s linear;
	    -o-transition: all 1s linear;
	    transition: all 1s linear;	
	}

	
#mainTitle {
	letter-spacing: 0.1em;
    /*height: 28vh;*/
    height: 29vh;
    overflow:hidden;
	margin-top: 2vh;
	font-weight: 300;
	line-height: 27px;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*justify-content: center;*/
	justify-content: space-around;
	width: 82vw;
	text-align: center;
}
#mainTitle.mainContentVisibleStart {
    height:0px!important;
	margin-top:0px!important;
}
#mainTitle.mainContentVisibleEnd {
    border: none!important;
}
#mainTitle p, #mainTitle h1 {
}

#mainTitle .count {
	display: inline-block;
	font-size: 1.2em;
}

#subPanelFrame {
	letter-spacing: 0.05em;
	margin-top: 3vh;
    padding-bottom: 1px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 82vw;
    overflow:hidden;
    box-sizing: border-box;
    height: 37vh;
}
#subPanelFrame.transitionReady .subpanel {
	overflow: hidden;
}

#subPanelFrame.mainContentVisibleStart {
    height:0px!important;
	margin-top:0px!important;
}
#subPanelFrame.mainContentVisibleEnd {
    border: none!important;
}
#subPanelFrame.mainContentVisibleEnd .subpanel {
	display: none;
}
#frontPageMenu-Center {
	padding-top:2px; 
	width:60%;
	margin-left: 10px;
	font-size: 1.1em;
}

.subpanel a {
	border-bottom: none;
	/*color: #60b2ce;*/
	color: #dddddd;
	font-size:1.1em;
}

#mainMenu nav li {
	border-left: solid 1px #ffffff;
	text-transform: uppercase;
}
#mainMenu nav a, #mainMenu nav div {
	display: block;
	font-size: 1.3em;
	height: 2.5rem;
	line-height: 2.5rem;
	padding: 0 1.0rem;
	letter-spacing: 0.2rem;
	min-width: 7rem;
	border-bottom: 0;
	color: #dddddd;
	font-family: "Source Sans Pro", sans-serif;
	cursor: pointer;
}
#divSearchOptions div.active {
	background-color: rgba(86, 137, 172, 0.5);
	border-radius: 4px;
}
#nav {
	display: block;
	position: relative;
	margin-top: 0.7rem;
	text-align: center;
	font-size: 0.9em;
	background-color: rgba(51, 30, 30, 0.3);
}
#nav.mainContentVisibleStart {
	top: 24px!important;
	left:120px!important;
}


.subpanel {
	color: #bbbbbb;
	height: 100%;
	overflow: auto;
	padding: 0px 10px;
	border: 1px solid #dddddd;
	border-radius: 4px;
	text-align: left;
	background-color: rgba(51, 30, 30, 0.4);
	font-size: 1.2em;
	width: 49%;
}

.subpanel-side-menu {
	width: 18em;
	border: none;
	background-color: unset;
}

.subpanel li {
	line-height: 1.1em;
	margin-top: 4px;
	list-style-type: square;
	margin-left: 10px;"
}

#coverContent {
	display:none;		
	height: 0vh;
	background-color: transparent;
	font-family: "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	font-size: 0.9rem;
	
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;	
}
#coverContent.mainContentVisible {
	display:block!important;
	height: 87vh;
	width: 100vw;
	margin-top: 2vh;
	padding: 3% 15% 5%;
}
#coverContent.visible {
	display: block;
	width: 88vw;
	overflow: auto;
	border-radius: 20px 6px 6px 20px;
	
	margin-left: 6vw;
	margin-right: 6vw;
	padding-top: 180px;
	height: auto;
	overflow: auto;
}

#coverContent.browsing {
	border-radius: 6px!important;
}
#coverContent.visible .static-content {
	background-color: rgba(250, 250, 250, 0.9);
	border-radius: 6px;
	padding: 20px 0px 0px 20px;
	height: 100%;
	overflow: auto;
	color: #444444;
	text-align: left;
	border-top: 6px solid #2a76a9;
	/*border-top: 8px solid #4e8596;*/
	/*border-bottom: 8px solid #4e8596;*/		
}
#coverContent .div_content {
	/*overflow: auto;*/
	height: 100%;
	padding-right: 30px;
}

#main {
	display:block;
	height:100%;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;	
	background-color: rgba(250, 250, 250, 0.9);
	/*padding: 180px 10vw 3em;*/
	padding: 30px 10vw 3em;
	margin-top: 3vh;
	font-family: "Source Sans Pro", sans-serif;
	letter-spacing: 0.1em;
	font-size: 0.9rem;
	border-bottom: 6px solid #4e8596;
}

#main h1 {
	font-size:1.0rem;
	margin-top: 5px;
	margin-bottom: 5px;
}
#main h2, #coverContent h2 {
	font-size:0.9rem;
	margin-top: 5px;
	margin-bottom: 5px;
}
#main .content h2 {
	font-size:1.1rem;
}

#main ul {
	margin-left: 20px;
	list-style-position: outside;
}
#main ul li {
	list-style-type: square;
}
#coverContent a, #main a, .meta-edit-menu a {
	/*color: #436976;*/
	color: #2d7986;
	/*border-bottom: 1px solid #cccccc;*/
	text-decoration: none;
}

#coverContent a:hover, #main a:hover, .meta-edit-menu a:hover {
	color: #EB9900;
}

#main p {
	margin-bottom: 10px;
}

.static-content p {
	line-height: 1.5em;
	margin-top: 8px;
	margin-bottom: 3px;
}

.help ol {
	margin-left: 6px;
	margin-bottom: 10px;
}
ol.numbered li {
	list-style-type: decimal;
	margin-left: 2.3em;
	margin-bottom: 0.4em;
	padding-left: 6px;
}

ul.square li {
	list-style-image: url("/icons/bullet.gif");
	margin-left: 2.3em;
	margin-bottom: 0.4em;
}

div.inset-box {
	background-color: rgb(238, 238, 238);
	margin: 10px 10% 20px !important;
	padding: 10px;
	border-radius: 4px;
}

.div_content h3 {
	margin: 15px 0px 5px 0px;
}

.div_content .inset-table {
	margin: 20px 30px 20px 30px;
	/*background-color: rgb(241, 241, 241);*/
	background-color: #fcfcfc;
}

.subpanel ul.new-datasets, ul.references {
	margin-left: 20px;
}
ul.references {
	margin-left: 40px;
	margin-right: 60px;
}

.subpanel ul.new-datasets li, ul.references li {
	text-indent: -20px;
	list-style-position: inside;
}

ul.references li {
	margin-bottom: 10px;
}

.subpanel .title {
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: underline;
	line-height: 2em;
	padding-bottom: 0px;
	padding-top: 2px;
}

img.login {
	height: 15px;
	vertical-align: text-bottom;
	margin-left: 5px;
	width: 20px;
	opacity: 0.9;
}

#footerFrame {
	position:fixed; 
	width:100%; 
	bottom:0px; 
	height:30px; /* roughly 2.0rem */ 
	/*background-color:rgb(36, 87, 122, 1);*/
	background-color: transparent;
	visibility: visible;
	/* 
	height:2.3rem; 
	border-top:6px solid #4e8596;
	*/
}
#subMenu a, #divSearchOptions a, #divSearchOptionsCover a, #footer a {
	color: #dddddd;
	text-decoration: none;
}
#subMenu a:hover, #divSearchOptions a:hover, #divSearchOptionsCover a:hover, #footer a:hover {
	color: #EB9900;
}

.login-form label, .account-form label, .contact-form label, .metadata-form label {
	font-weight: bold;
	margin-top: 8px;
	display: block;
}

.contact-form input {
	display: inline-block!important;
}
.contact-form label {
	display: block!important;
}
.metadata-form label{
	font-weight: normal!important;
}
.contact-form span.err {
	margin-left: 20px;
	color: red;
}

.form-required {
	color: #ff0000;
}

.login-form input, .account-form input, .metadata-form input, 
.metadata-form select, .contact-form input, #form_download input {
	height: 26px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px;
	font-size: 1rem;
	color: #444444;
	margin: 2px 10px;
}

.contact-form textarea, #form_download textarea {
	margin: 2px 5px;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 3px 6px;
	color: #444;	
}

.account-form input, .metadata-form input, .metadata-form select {
	margin-bottom: 0!important;
}
.login-form input:focus, .account-form input:focus, .contact-form input:focus {
	border-color: #8ccadc
}

.metadata-form textarea, .account-form textarea {
	margin: 4px 10px;
	border-radius: 4px;
	border: 1px solid #cccccc;
	padding: 3px 5px;
	color: #444444;
}
.metadata-form input[type="submit"], .metadata-form input[type="reset"], .account-form input[type="submit"], .account-form input[type="reset"]  {
	padding: 5px 18px !important;
	height: auto;
	cursor: pointer;
}

.metadata-form select {
	padding: 1px 5px!important;
}

.metadata-form fieldset {
	border-radius: 4px;
	border: 1px solid #8CACBB;
	margin: 1.5em 0;
	padding: 0 1em 1em;	
}

.sneak-peek {
	position:absolute; 
	z-index:30000;
}

.icon-look, .icon-back {
	width: 24px;
	height: auto;
	margin-top: 2px;
	cursor: pointer;
}

/* Front page specific adjustments for the cover */
#coverContent.visible {
	height: 68vh!important;
	padding: 0!important;
	/*background-color: rgba(250, 250, 250, 0.8);*/
	background-color: transparent;
	margin-top: 3vh;
}

/* merged into below
#footer {
	height: 3em;
	padding-top: 1em;
	text-align: center;
	background-color: rgb(36, 87, 122, 1);
}
*/

#footer {
	position: fixed;
	bottom: 0;
	background-color: transparent;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
}
#footer.mapper {
	height: 1.2rem!important;
	line-height: 1.2rem!important;
}

.main-title-div-1 {
	opacity: 0; 
	animation: roll 3s linear 1 2s; 
	animation-fill-mode: forwards; 
	margin-left:-61px; 
	transform: rotate(-15deg);
}
.main-title-div-1-after {
	text-shadow: 2px 3px 0px #555, 5px 7px 0px rgba(10, 10, 10, 0.2);
}

.main-title-div-1-h1 { /* OBIS-SEAMAP */
	font-size: 40px;
	/* 
	margin-bottom: 16px; 
	line-height: 47px;*/
	margin-top: 12px; 
	margin-bottom: 10px; 
	line-height: 40px;
}
.main-title-div-2 {
	opacity: 0; 
	animation: createBox 3s 1 3s; 
	animation-fill-mode: forwards;
}

.main-title-div-2-p {
	font-size: 1.2em;
	font-weight: 300;
	letter-spacing: 2px;
	/*line-height: 25.6px;*/
	line-height: 1.2em;
}
.main-title-div-3 {
	opacity: 0; 
	animation: createBox 3s 1 4s; 
	animation-fill-mode: forwards;
	font-size:1em;
}

.main-title-div-4 {
	animation: createBox 3s 1 2s!important; 
	animation-fill-mode: forwards!important;
}
#linkRollUp0 {
	opacity: 1;
	transition: all 2s ease; 
	display: none; 
	width:26px;
	margin-right: -5px;
	margin-left: 5px;
	margin-top: 2px;	
}

.hide-on-tablet {
	display: unset;	
}
.show-on-tablet {
	display: none;	
}

#frontPageMenu-Center ul {
	margin-left: 10px;
}
#footer p.copyright {
	letter-spacing: 0.1rem;
	font-size: 0.8rem;
	opacity: 0.75;
	color: #dddddd;
}

.div_content div {
	margin: 10px 10% 10px;
}

@media screen and (max-width: 1024px){
	#footer p.copyright {
		letter-spacing: 0.05rem;
	}	
}

/* This is for smart phone in landscape */
@media screen and (min-width: 601px) and (max-width: 1000px) and (max-height: 400px){
	#logo {
		width: 6rem;
		height: 3rem;
		background-position-x: center;
		background-size: 60px auto;
		background-position-y: 8px;
	}
	#nav {
		margin-top: 0.5rem;
	}
	#mainMenu nav a {
		padding: 0;
		letter-spacing: 0.1rem;
		height: 1.0rem;
		line-height: 1.0rem;
	}

	#mainTitle {
		margin-top: 1vh;
		line-height: 18px;
		width: 90vw;
		height: 24vh;
	}
	#subPanelFrame {
		width: 90vw;	
		height: 39vh;
	}
	#subMenu {
		padding: 0.2rem 0.5rem;
	}
	#tboxCoverQuickSearch {
		width: 250px!important;
	}
	#subPanelFrame {
		width: 92vw;
		margin-top: 1vh;
	}
	#frontPageMenu-Center {
		padding-left: 8px;!important;
		padding-right: 8px;!important;
	}
	.subpanel {
		padding: 0;
	}
	.main-title-div-2 p {
		font-size: 10px;
		line-height: 11px;
		letter-spacing: 1px;
	}
	.main-title-div-1 h1 {
		font-size: 26px;
		margin-bottom: 2px;
		line-height: 26px;
	}	
	.frontpage-menu {
		padding: 1px 8px!important;
		margin: 2px 0!important;
	}
	#footer {
		height: 1rem;
		line-height: 1rem;
	}
}

/* This is for smart phone in portrait */
@media screen and (max-width: 600px){
	#logo {
		align-self: flex-start;
		width: 5rem;
		height: 5rem;
	}
	#nav {
		margin-top: 0.5rem;
		font-size: 0.85em;
	}
	#mainMenu {
		/*align-items: flex-start;*/
	}
	#mainMenu nav a {
		padding: 0;
		letter-spacing: 0rem;
		min-width: 4.4rem;
		
	}
	#subMenu {
		padding: 0.2rem 0.5rem;
		letter-spacing: 0em;
	}
	#tboxCoverQuickSearch {
		width: 200px!important;
	}
	#tboxCoverQuickSearch-labelEl {
		width: 75px;
	}
	.cover-quick-search-label {
		padding: 4px;
	}
	#mainMenu {
		width: 95vw;
	}
	#mainTitle {
		width: 95vw;
		margin-top: 2vh;
		line-height: 20px;
		height: 180px;
	}
	.main-title-div-1 h1 {
		/*margin-bottom: 10px;*/
		line-height: 40px;
		font-size: 30px;
	}
	.main-title-div-2 p {
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 20px;
	}
	
	.main-title-div-3 {
		margin-top: 10px;
	}
	
	#subPanelFrame {
		width: 98vw;
		height: 38vh;
		margin-top: 2vh;
	}
	
	.subpanel {
		padding: 0;
	}
	.subpanel .title {
		padding-bottom: 0px;
		padding-top: 2px;
	}
	.subpanel-side-menu {
		width: 11em;	
	}
	
	.not-show-on-mobile {
		display: none;
	}
	#frontPageMenu-Center {
		padding-left: 8px!important;
		padding-right: 8px!important;
		margin-left: 5px!important;
	}
	#frontPageMenu-Center ul {
		margin-left: 0;
	}
	
	#footer p.copyright {
		letter-spacing: 0rem;
	}
	
	#coverContent.visible {
		width: 95vw;
	}
	#coverContent.visible .static-content {
	padding: 10px 0px 10px 15px;
	}
	#coverContent .div_content {
		padding-right: 20px;
	}
	ul.square li {
		margin-left: 1em;
	}
	.div_content div {
		margin: 10px 10px 20px;
	}
	
	ul.references {
		margin-left: 20px;
	}
	
	#main {
		padding: 20px 3vw 3em;
	}
}

@keyframes createBox {
  from {
    transform: scale(0);
	opacity: 0;
  }
  to {
    transform: scale(1);
  	opacity: 1;
  }
}

@keyframes roll {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-60px;
    margin-top:0px;
    /*transform: rotate(-25deg);*/
    transform: rotate(-15deg);
  }
  40% {
    opacity:1;
	margin-left:-50px;
    transform: rotate(0deg);
  }
 
  70% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
 
  100% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
	text-shadow: 2px 3px 0px #555, 5px 7px 0px rgba(10, 10, 10, 0.2);
  }
}

.frontpage-menu {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 6px 0;
}

.frontpage-menu a {
	text-decoration: none;
}
.frontpage-menu.selected {
	background-color: rgba(86, 137, 172, 0.5);
}

.frontpage-menu a:hover {
	color: #EB9900;
}

#cover_search_frame td.x-field-label-cell {
	background-color: rgba(86, 137, 172, 0.5);
	text-align: center;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
#cover_search_frame.mapper td.x-field-label-cell {
	background-color: rgba(86, 137, 172, 0.7);
}

/* Front Page Slideshow */
#divCoverSlideshow {
	display:none;	/* When activated, display:flex */
	color: #dddddd;
	position: absolute;
	z-index: 20001; 
	width: 98%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 98%;
	justify-content: center;
	flex-direction: column; 
	background-color:#484747; 
	border-radius:6px;
	transition: all 2s ease 0s; 
}

#divCoverSlideshowTitle {
	text-align: center;
	height: 1.5em;
	font-size: 1.5em;
	margin: 0.5em 0 0.2em;
}

#divCoverSlides {
	 position: relative;
	 flex: 0 1 auto;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 82%;
}

.slideshow-slide {
	z-index: 5; 
	position: absolute;
	text-align:center; 
	transition: all 1s ease 0s; 
	height: 98%; 
	width: auto; 
	opacity: 1;
}
.slideshow-slide img {
	visibility: visible;
	max-height: 100%;
	width: auto;	
	max-width: 100%;
}

.slideshow-desc {
	transition: all 1s ease 0s; 
	opacity: 1; 
	text-align: center; 
	margin-left: 15%; 
	margin-right: 15%;
}

#divCoverSlideNav {
	display:flex;
	font-style: normal; 
	justify-content: center;
}

.slideshow-nav {
	padding: 4px;
	margin: 15px 4px;
}

.slideshow-button {
	margin: 15px;
	background-color: #666;
	padding: 4px 10px;
	border-radius: 4px;
}
.slide-label-active {
	font-weight: bold;
	color: #F7B130;
}
.front-more-section {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 48%;
	align-items: flex-start;
	height: 100%;
	justify-content: center; 
	margin: 6px 6px 20px 4px;
}

.front-more-section-title {
	flex-basis: 100%;
	text-align: center;
	height: 2em;
}

.front-more-button {
	border: 1px solid #8CACBB;
	width: 8em;
	border-radius: 20px;
	padding: 5px;
	text-align: center;
	margin: 4px;
	height: 2em;
}
.front-swot-button {
	border: 1px solid #aaa;
	border-radius: 20px;
	padding: 2px;
	text-align: center;
	margin: 2px;
	background-image: url("/icons/icon_download_blue.png");
	background-repeat: no-repeat;
	background-size: 16px;
	background-position-y: 0.2em;
}
.front-swot-button-s {
	width: 9em;
	background-position-x: 7.5em;
}
.front-swot-button-l {
	width: 13em;
	background-position-x: 11.5em;
}
.list-of-included-swot {
	opacity: 0;
	width: 0;
	height: 0;
	transition: height 2s , opacity 2s;
	overflow: hidden;
	border: none;
	border-radius: 4px;
	font-size: 0.95em;
}

#divPasswordReset {
	display: block;
	width: 400px;
	font-size: 0.9em;
	margin-top: 10px;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 4px;
}

.partner-logo {
	padding: 15px 5px 20px 5px;
	max-height: 90px;
	max-width: 110px;
}

.partner-title h2 {
	font-size: 1.2em;
	color: ;
}