@charset "utf-8";
/* THEME - BASIC */
/* Author: Max van Doorn */
/*
	Pattern:#faed6c
	BG:#fed123
	Border:#faa819
	Text:#
*/

.nav-logo__2020 {
	background: url(../basic/images/v3/np-logo-R.svg) center center no-repeat;
	background-size:100%;
	width:133px;
	height:45px;
}
@media screen and (max-width:669px) { /* When the logo is in the center, and nav-top is 50px tall  */
	.nav-logo__2020 {
		top:2px; /* Since the header is 15px shorter, the distance from top should be 1/2 that, or -8px */
		margin-left:-66px; /* in order to center the logo on screen, the margin left should be negative half of the image width*/
	}
}
@media screen and (min-width:670px) { /* When the logo is on the left side, and nav-top is 65px tall  */
	.nav-logo__2020 {
		top:10px; 
	}	
}
.nav-top__2020 {
	background:#fed123;
	border-bottom: 3px solid #faa819;
}
.nav-top-pattern__2020 {
	background: url(../basic/images/pattern-basic.svg) center -10px;
	background-size:121px 58px;
	top:-10px;
	height:calc(100% + 10px)!important;
}
.nav-bottom__2020 {
	background:#fed123;
	border-top: 3px solid #faa819;
}
.nav-bottom-pattern__2020 {
	background: url(../basic/images/pattern-basic.svg) center -10px;
	background-size:121px 58px;
}
/* Top Navigation Icons */
.nav-community-icon__2020 {
	background: url(../basic/images/v3/community-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-games-icon__2020 {
	background: url(../basic/images/v3/games-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-explore-icon__2020 {
	background: url(../basic/images/v3/explore-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-shop-icon__2020 {
	background: url(../basic/images/v3/shop-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-premium-icon__2020 {
	background: url(../basic/images/v3/premium-icon.svg) center center no-repeat;
    background-size: contain;
}
/* Icons only appear in top nav */
.nav-search-icon__2020 {
	background: url(../basic/images/v3/search-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-bell-icon__2020 {
	background: url(../basic/images/v3/bell-icon.svg) center center no-repeat;
    background-size: contain;
}
.nav-notif-dot__2020 {
	background:#D42326;
    color:#fff;
}
.nav-npc-left__2020 {
	background: url(../basic/images/npc-left.png) center center no-repeat;
    background-size: 100%;
}
.nav-npc-right__2020 {
	background: url(../basic/images/npc-right.png) center center no-repeat;
    background-size: 100%;
}
.nav-text__2020,.nav-text-bottom__2020 {
	color: #363636;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
	text-align:center;
}
.animated-bg__2020 {
	display:none;
}
.nav-top__2020 .nav-dropdown-arrow__2020 {
    background-image:url(../basic/images/dropdown-arrow.svg);
}

/*PROFILE MENU DROPDOWN*/
.dropdown-triangle-up__2020 {
	border-bottom:13px solid #faa819; /*The color of the dropdown tail should match the bottom border color for this theme.*/
}
/*If this theme doesn't have a bottom border on the navbar, remove the middle number from these calculations.*/
/*These calculations position the dropdown tails vertically, and include the height of the navbar bottom border.*/
@media screen and (max-width:669px) { /* When the navbar is shorter. */
	.dropdown-triangle-up__2020 {
		top:calc(50px + 3px - 13px); /*The height of the navbar plus the height of the navbar bottom border minus the height of this triangle div (via its border bottom)*/
	}
}
@media screen and (min-width:670px) { /* When the navbar is taller. */
	.dropdown-triangle-up__2020 {
		top:calc(65px + 3px - 13px); /*The height of the navbar plus the height of the navbar bottom border minus the height of this triangle div (via its border bottom)*/
	}
}

.nav-profile-dropdown__2020 {
	background:#FFFACD;
}

.nav-profile-pet-box-lg__2020, .nav-profile-pet-sm__2020, .nav-pet-menu-icon__2020 {
    background-color:#faa819;
}

.nav-profile-pet-box-sm__2020 {
    border:2px solid #faa819;
	-webkit-box-shadow: 0px 3px 0px 0px rgba(250,168,25,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(250,168,25,1);
    box-shadow: 0px 3px 0px 0px rgba(250,168,25,1);
}

#navProfilePetExpandIcon__2020 {
    background-color:#FFFACD;
}

.nav-profile-dropdown-text {
    font-family: "MuseoSansRounded700", 'Arial', sans-serif;
	color:#363636;
    font-size:11pt;
}

.nav-profile-dropdown-text a {
    color:#faa819;
}

.nav-profile-dropdown__2020 ul li {
    color: #363636;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
	font-size:18pt;
}

/* Profile Menu Icons */

.nav-profile-pet-contract__2020 {
    background-image:url(../basic/images/v3/compress.svg);
}

.nav-profile-pet-expand__2020 {
    background-image:url(../basic/images/v3/expand.svg);
}

.nav-petcentral-icon__2020 {
    background-image:url(../basic/images/v3/mypets-icon.svg);
}
.nav-createpet-icon__2020 {
    background-image:url(../basic/images/v3/createpet-icon.svg);
}
.nav-adopt-icon__2020 {
    background-image:url(../basic/images/v3/adoptpet-icon.svg);
}
.nav-customise-icon__2020 {
    background-image:url(../basic/images/v3/customise-icon.svg);
}
.nav-userlookup-icon__2020 {
    background-image:url(../basic/images/v3/profile-icon.svg);
}
.nav-inventory-icon__2020 {
    background-image:url(../basic/images/v3/inventory-icon.svg);
}
.nav-neomail-icon__2020 {
    background-image:url(../basic/images/v3/neomail-icon.svg);
}
.nav-settings-icon__2020 {
    background-image:url(../basic/images/settings-icon.svg);
}
.nav-beta-icon__2020 {
    background-image:url(../basic/images/v3/viewclassic-icon.svg);
}
.nav-signout-icon__2020 {
   background-image:url(../basic/images/v3/signout-icon.svg); 
}
.nav-calendar-icon__2020 {
    background-image:url(../basic/images/v3/calendar-icon.svg);
}

/* News Dropdown Styling */
#navnewsdropdown__2020 {
	background:#faa819;
}
.news-tab-content__2020,.alerts-tab-content__2020,.tabActive__2020,.news-tab-viewall__2020,.alerts-tab-viewall__2020 {
	background:#FFFACD;
}
.tabHidden__2020 {
	background:#faa819;
}
.news-dropdown-text__2020 {
	color: #363636;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
	font-size:18pt;
}
.news-tab-icon__2020 {
	background:#767676;
}
.alerts-tab-icon__2020 {
	background-image:url(../basic/images/v3/bell-icon.svg);
    background-size:contain;
}
#alerts-notif__2020,#news-notif__2020 {
	color:#fff;
	background:#E1191D;
}
#newstab__2020 ul li {
    border-bottom:2px solid #BFB89E;
}
#newstab__2020 ul li h4 {
    color:#000;
}

/* Alerts dropdown styling */
#alertstab__2020 ul li {
    border: 2px solid #BFB89E;
	-webkit-box-shadow: 0px 3px 0px 0px rgba(191,184,158,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(191,184,158,1);
    box-shadow: 0px 3px 0px 0px rgba(191,184,158,1);
}

.alerts-none__2020 {
    margin:auto;
    text-align:center;
}

/* Neofriends Notification */
.nav-neofriends-dot__2020 {
	color:#fff;
	font-family: "MuseoSansRounded700", 'Arial Bold', sans-serif;
	background:#1AB41F;
}

/* FOOTER */
.footer__2020 {
    background:#fed123;
	border-top: 3px solid #faa819;
}

.footer-pattern__2020 {
    top:-10px;
    height:150%;
    background: url(../basic/images/pattern-basic.svg) center -10px;
	background-size:121px 58px;
}

.footer-logo__2020 {
    background-image: url(../basic/images/v3/np-logo-R.svg);
}

.footer-copyright__2020 {
    font-size:10pt;
	font-family: "MuseoSansRounded700", 'Arial Bold', sans-serif;
	color: #363636;
}

.footer-links__2020 {
    font-size:16pt;
}
.footer-link__2020 {
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    color: #363636;
}
.footer__2020 a {
    color: #363636;
}

/* Carousel Styling */

.hp-carousel-nameplate {
   /* border-image-slice: 27 27 27 27 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat repeat;
    border-image-source: url(../basic/images/hp-nameplate.png);*/
}

.hp-slick__2020 .slick-prev {
    background-image:url(../basic/images/carouselarrow-left.svg);
    left:5px;
}

.hp-slick__2020 .slick-next {
    background-image:url(../basic/images/carouselarrow-right.svg);
    right:5px;
}

.hp-slick__2020 .slick-prev,.hp-slick__2020 .slick-next {
    background-size:contain;
    width:35px;
    height:70px;
    border: none;
    background-color: unset;
}

/* Homepage Background */
.hp-bg-top__2020, .hp-bg-mid__2020, .hp-bg-bottom__2020 {
    background-position:center;
    width:100%;
}

.hp-bg-top__2020 {
    height: 40%;
    background-image: url(../basic/images/hp-bg-top.png);
    background-size: auto 100%;
    background-repeat-y: no-repeat;
    background-repeat-x: repeat;
    margin: 0;
    z-index:1;
}
.hp-bg-mid__2020 {
    height: 800px;
    background-image: url(../basic/images/hp-bg-mid.png);
    background-size: 1200px 800px;
    margin-top: -500px;
    z-index:3;
}
.hp-bg-bottom__2020 {
    height: calc(60% - 300px);
    background-image: url(../basic/images/hp-bg-bottom.png);
    background-size: 600px 600px;
    background-position:center 10px;
    z-index:4;
}
.hp-bg-obj__2020 { /* Rainbow object */
    width: 300px;
    height: 150px;
    position: absolute;
    top: 20%;
    left: calc(50% - 150px);
    margin: auto;
    background-image: url(../basic/images/hp-bg-object.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Non-Homepage Background */

body {
    /*background-color:#D7D7D7;*/
    background-image:url(../basic/images/bg-pattern.svg);
    background-size:200px 200px;
}

/* Some Default styling for popups. Can/should be overridden on a case by case basis. */
.popup-header__2020 { 
	position:relative;
	text-align:center;
	font-family: "Cafeteria", 'Arial Bold', sans-serif;
	padding:10px 0;
	border-radius: 15px 15px 0 0;
	background:#fed123;
	z-index:0; /* Ensures that pattern within this div will appear in front of background but behind other interior elements. */
}
.popup-header__2020 h3 {
	color: #363636;
	font-size:20pt;
	max-width:90%;
	margin: 0 auto;
}
.popup-header-pattern__2020,.popup-footer-pattern__2020 {
	position: absolute;
    width: 100%;
	background: url(../basic/images/pattern-basic.svg) center -10px;
    background-size: 121px 58px;
    top: 0px;
	left: 0px;
    height: 100%;
	z-index: -1; /* Ensures that pattern within this div will appear in front of background but behind other interior elements. */
}
.popup-header-pattern__2020 {
	border-radius: 15px 15px 0 0;
}
.popup-footer-pattern__2020 {
	border-radius: 0 0 15px 15px;
}
.popup-body__2020 {
	position:relative;
	overflow:auto;
	background:#fff;
	text-align:center;
	font-family: "MuseoSansRounded500", 'Arial', sans-serif;
	padding:20px 0;
	/* max-height: calc(70vh - 60px); */
}
.popup-image__2020 {
	margin:auto;
	width:90%;
}
.popup-body__2020 p {
	width:90%;
	margin: 20px auto auto;
	position:relative;
}
.popup-footer__2020 {
	position:relative;
	border-radius: 0 0 15px 15px;
	background:#fed123;
	padding:10px;
	z-index:0; /* Ensures that pattern within this div will appear in front of background but behind other interior elements. */
}

/* Community Dropdown */

#communitydropdown__2020, #communitydropdownbottom__2020, #shopdropdown__2020, #shopdropdownbottom__2020 {
    background-color:#fffacd;
    color:#363636;
    border:2px solid #faa819;
}
#communitydropdown__2020 ul li, #communitydropdownbottom__2020 ul li, #shopdropdown__2020 ul li, #shopdropdownbottom__2020 ul li, #communitydropdown__2020 .neofriendsOnline, #communitydropdownbottom__2020 .neofriendsOnline {
    border-bottom:2px solid #faa819;
}
#communitydropdown__2020 ul li:hover, #communitydropdownbottom__2020 ul li:hover, #shopdropdown__2020 ul li:hover, #shopdropdownbottom__2020 ul li:hover {
	background-color:#ffd35e;
}
#communitydropdown__2020 a:visited, #communitydropdownbottom__2020 a:visited, #communitydropdown__2020 a, #communitydropdownbottom__2020 a, #shopdropdown__2020 a:visited, #shopdropdownbottom__2020 a:visited, #shopdropdown__2020 a, #shopdropdownbottom__2020 a {
	color:#363636;
}
#shopdropdown__2020 h3, #shopdropdownbottom__2020 h3 {
    color:#fffacd;
}
#shopdropdown__2020 .shopdropdown-tabs, #shopdropdownbottom__2020 .shopdropdown-tabs {
    background-color:#faa819;
}
#shopdropdown__2020 .shopdropdown-tab-active, #shopdropdownbottom__2020 .shopdropdown-tab-active {
    background-color:#fffacd;
    
}
#shopdropdown__2020 .shopdropdown-tab-active h3, #shopdropdownbottom__2020 .shopdropdown-tab-active h3 {
    color:#363636;
}

/* Additional Theme Parameters to add */
/* 
Popup background texture
search field color
search text color
search button color
background animation layer
mouse cursor
mouse cursor hover
*/