.daybody {  
	//background: #000000 url(./images/daybg2.jpg);
	//background-repeat:no-repeat;
	//background-size: 100%;
	//margin-top:20px;
	
	background-color:#000000;
	 }
	 
.nightbody { 
	//background: #000000 url(./images/nightbg2.jpg);
	//background-repeat:no-repeat;
	//background-size: 100%;
	//margin-top:20px;
	
	background-color:#000000;
	 }
	 
img {
    border: 0
}

.imgcustom {
   padding:0px;
   border:0px solid #000;
   border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
}


.tdcustom {
   padding:2px;
   border:1px solid #000;
   background-color:#fff;
   border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
}

.tdbox {
	border: 1px solid black;
	border-collapse: collapse;
}

.noline { text-decoration:none !important; }
a { text-decoration:none !important; }
	 
.mainscreen1 {
	width:900px;
	margin:0px auto;

	border: 2px solid #263408;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:url(./images/springheader.jpg);
	background-repeat: no-repeat;
	background-color:#263408;
}

.mainscreen2 {
	width:900px;
	margin:0px auto;
	border: 2px solid #263408;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:url(./images/summerheader.jpg);
	background-repeat: no-repeat;
	background-color:#263408;
}

.mainscreen3 {
	width:900px;
	margin:0px auto;
	border: 2px solid #263408;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:url(./images/fallheader.jpg);
	background-repeat: no-repeat;
	background-color:#263408;
}

.mainscreen4 {
	width:900px;
	margin:0px auto;
	border: 2px solid #263408;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:url(./images/winterheader.jpg);
	background-repeat: no-repeat;
	background-color:#263408;
}

.mainscreen5 {
	width:900px;
	margin:0px auto;
	background:url(./images/newheader4.png);
	background-repeat: no-repeat;
}

.menubar {
	width:100%;
	height:40px;
	border-top: 3px solid #000;
	border-bottom: 0px solid #000;
	border-right: 2px solid #000; 
	border-left: 2px solid #000;
	border--top-left-radius: 10px; 
	-moz-border-top-left-radius: 10px; 
	-webkit-border-top-left-radius: 10px; 
	border--top-right-radius: 10px; 
	-moz-border-top-right-radius: 10px; 
	-webkit-border-top-right-radius: 10px; 
	z-index: 999;
}

.mainscreenbg {
	height:100%;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.explorebg { 
	background-color:#a2912d;
	background-image:url(../images/genericbg.png);
	background-repeat: repeat-x;
}

.arrowbgcolor {
	background-color:#a2912d;
}

    .fade {
      opacity: 0;
      transition: opacity .09s ease-in;
    }

    .fade.show {
      opacity: 1;
    }


.admin {
 					background-color: #4b4bac;
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}
				
.mod {
 					background-color: #337e5c;
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}


.forummod {
 					background-color: #bc6a21;
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}

.staff {
					background-color: #84478d;
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}

.new {
					background-color: #723232;
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}

.smalltag {

 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
					font-size:10px !important;
}

.anycolor {
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:3px;
}

.anycolorsmall {
 					border: 0px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:2px;
}

.set {
	border: 0px solid #000;
 	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:3px;
	color:#FFFFFF;
}

.event-banner {
	border-radius: 10px; 
	border:3px dashed #000;
	
}


.tableshadow {
					box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
					//box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.smallbutton {
 					border: 1px solid #000;
 					color: white;
 					-moz-border-radius: 3px;
					border-radius: 3px;
					padding:2px;
}
.smallbutton a:hover { color:#f9f9f3; }

.bl {
	border-bottom-left-radius: 10px;
}

.br {
	border-bottom-right-radius: 10px;
}

.bl2 tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
.br2 tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
.bl3 tbody tr:last-child td:first-child {
				border-radius: 0 0 10px 10px;
			}
			
.tl2 tbody tr:first-child td:first-child {
				border-radius: 10px 0 0 0;
			}
			
.tr2 tbody tr:first-child td:last-child {
				border-radius: 0 10px 0 0;
			}
			
				
.whitefont { font-family:arial,sans-serif; font-size:12px; color:#d6d8d7; text-decoration: none; }
.whitefont a:visited { font-family:arial,sans-serif; font-size:12px; color:#d6d8d7; text-decoration: none;}
.whitefont a:link { font-family:arial,sans-serif; font-size:12px; color:#d6d8d7; text-decoration: none;}
.whitefont a:hover { font-family:arial,sans-serif; font-size:12px; color:#d6d8d7; text-decoration: none;}

.blackfont { font-family:arial,sans-serif; font-size:12px; color:#000; text-decoration: none; }
.blackfont a:visited { font-family:arial,sans-serif; font-size:12px; color:#000; text-decoration: none;}
.blackfont a:link { font-family:arial,sans-serif; font-size:12px; color:#000; text-decoration: none;}
.blackfont a:hover { font-family:arial,sans-serif; font-size:12px; color:#000; text-decoration: none;}cd


.greenbox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:10px;
	background-color:#8aa275;
}

.lightgreenbox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#b8cca7;
	z-index:-1;
}

.saleschat {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	z-index:-1;
}

.greybox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	padding:10px;
	background-color:#b9bfb9;
}

.tanbox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	background-color:#f6edb7;
	text-align:left;
	z-index:-1;
}

.creambox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#beb26c;
    background-repeat: repeat-x;
	z-index:-1;
}

.creambox2 {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#efecbf;
    background-repeat: repeat-x;
	z-index:-1;
}

.creambox3 {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#efecc8;
    background-repeat: repeat-x;
	z-index:-1;
}

.yellowbox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 1px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#fffbcd;
    background-repeat: repeat-x;
	z-index:-1;
}

.whitebox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border: 0px solid #263408;
	padding:5px; 
	text-align:left;
	background-color:#fff;
    background-repeat: repeat-x;
	z-index:-1;
}

.genericbox {
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	/* border: 1px solid #263408; */
	padding:5px; 
	text-align:left;
    background-repeat: repeat-x;
	z-index:-1;
}

.nav-link  {
	  font-family:arial,sans-serif;
  font-weight:bold;  
  transition: 0.3s;
  
  text-shadow: 1px 1px 5px #000; 
  -moz-text-shadow: 1px 1px 5px #000;
  -webkit-text-shadow: 1px 1px 5px #000; 
}

.tablebg {
	background-color:#ffffff;
}

.footercolor {
	background-color:#b8b6b5;
}

.forumalt {
	background-color:#ffffff;
}

.dcorner {
	
	border-radius: 0 0 10px 10px;'
}


.forums font { font-family:arial,sans-serif;  color:#000; }

.errormsg {
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:95%;
	padding: 5px;
	border: 1px solid #d0b3af;
	font-family:arial,sans-serif;  color:#000; 
	background-color:#f3d1cc;
}

.validmsg {
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:95%;
	padding: 5px;
	border: 1px solid #b7c1b4;
	font-family:arial,sans-serif;  color:#000; 
	background-color:#d7e8d2;
}

.statusbar {
	width:100%
	height:42px;
	z-index:3;
	
}

.divheader { font-family:arial,sans-serif; font-size:18px; color:#f8f5da; font-weight:bold; 
	text-shadow: 1px 1px 2px black, 0 0 25px #545553, 0 0 10px #3f3f38; font-weight:bold; 
	-moz-text-shadow: 1px 1px 2px black, 0 0 25px #545553, 0 0 10px #3f3f38;   font-weight:bold; 
	-webkit-text-shadow: 1px 1px 2px black, 0 0 25px #545553, 0 0 10px #3f3f38; font-weight:bold;  
}

//.divheader span:hover { font-size:18px; color:#97b47a; }


.explorelevel { font-family:arial,sans-serif; font-size:18px; color:#000;

}

.sidebartext { font-family:arial,sans-serif;  color:#dfdcbd; }
.sidebartext a:visited { font-family:arial,sans-serif;  color:#dfdcbd;}
.sidebartext a:link { font-family:arial,sans-serif;  color:#dfdcbd;}
.sidebartext a:hover { font-family:arial,sans-serif;  color:#bdb570;}

.recentactivity {
	font-family:arial,sans-serif;  color:#000;
}

.mainlinetan { font-family:arial,sans-serif;  color:#f8f5da;
	text-shadow: 1px 1px #000; 
	-moz-text-shadow: 1px 1px #000;
	-webkit-text-shadow: 1px 1px #000;
}
.mainlinetan a:visited { font-family:arial,sans-serif;  color:#f8f5da;
	text-shadow: 1px 1px #000; 
	-moz-text-shadow: 1px 1px #000;
	-webkit-text-shadow: 1px 1px #000;
}
.mainlinetan a:link { font-family:arial,sans-serif;  color:#f8f5da;
	text-shadow: 1px 1px #000; 
	-moz-text-shadow: 1px 1px #000;
	-webkit-text-shadow: 1px 1px #000;
}
.mainlinetan a:hover { font-family:arial,sans-serif;  color:#83bbc0;
	text-shadow: 1px 1px #000; 
	-moz-text-shadow: 1px 1px #000;
	-webkit-text-shadow: 1px 1px #000;
}

.sexsymbol { font-family:arial,sans-serif; font-size:25px; color:#263408; font-weight:900;
}


.headline { font-family:arial,sans-serif; font-size:30px; }

.mainlineblacksmall { font-family:arial,sans-serif; font-size:10px; color:#000;  }
.mainlineblacksmall a:visited { font-family:arial,sans-serif; font-size:10px; color:#000;  }
.mainlineblacksmall a:link { font-family:arial,sans-serif; font-size:10px; color:#000;  }
.mainlineblacksmall a:hover { font-family:arial,sans-serif; font-size:10px; color:#4f2907;  }

.verysmalltextblack { font-family:arial,sans-serif; font-size:9px; color:#000; }
.verysmalltextblack a:visited { font-family:arial,sans-serif; font-size:9px; color:#000;}
.verysmalltextblack a:link { font-family:arial,sans-serif; font-size:9px; color:#000;}
.verysmalltextblack a:hover { font-family:arial,sans-serif; font-size:9px; color:#4f2907;}

.mainlineblack{ font-family:arial,sans-serif;  color:#000; }
.mainlineblack a {
    text-decoration: none;
}

.mainlineblack a:link,
.mainlineblack a:visited {
    color: #457c15;
}

.mainlineblack a:hover {
    color: #a6bc93;
}



.mainline { font-family:arial,sans-serif;  color:#4f2907; }
.mainline a:visited { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:link { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:hover { font-family:arial,sans-serif;  color:#3c623e;}

.mainline { font-family:arial,sans-serif;  color:#4f2907; }
.mainline a:visited { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:link { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:hover { font-family:arial,sans-serif;  color:#3c623e;}

/* Explore button misspelled, these are on the explore, battle, and battleground pages*/

a.exlporebutton { font-family:arial,sans-serif;  color:#fdf3c2; background-color:#586949; padding:3px; -moz-border-radius: 5px; border-radius: 5px; text-decoration:none; }
a.exlporebutton:visited { font-family:arial,sans-serif;  background-color:#586949;  color:#fdf3c2;}
a.exlporebutton:link { font-family:arial,sans-serif;  background-color:#586949; color:#fdf3c2; }
a.exlporebutton:hover { font-family:arial,sans-serif;  color:#a6bc93;  text-decoration:none;}


.smalltextblack { font-family:arial,sans-serif; font-size:12px; color:#000; }
.smalltextblack a { text-decoration:none;}
.smalltextblack a:visited { font-family:arial,sans-serif; font-size:12px; color:#000;}
.smalltextblack a:link { font-family:arial,sans-serif; font-size:12px; color:#000;}
.smalltextblack a:hover { font-family:arial,sans-serif; font-size:12px; color:#4f2907;}

.mainline { font-family:arial,sans-serif;  color:#4f2907; }
.mainline a:visited { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:link { font-family:arial,sans-serif;  color:#4f2907;}
.mainline a:hover { font-family:arial,sans-serif;  color:#3c623e;}

.bsmalltext { font-family:arial,sans-serif; font-size:12px; color:#263408;}
.bsmalltext a { text-decoration:none;}
.bsmalltext a:visited { font-family:arial,sans-serif; font-size:12px; color:#263408;}
.bsmalltext a:link { font-family:arial,sans-serif; font-size:12px; color:#263408;}
.bsmalltext a:hover { font-family:arial,sans-serif; font-size:12px; color:#694717;}

.mainlinegr { font-family:arial,sans-serif;  color:#263408; }
.mainlinegr a:visited { font-family:arial,sans-serif;  color:#263408;}
.mainlinegr a:link { font-family:arial,sans-serif;  color:#263408;}
.mainlinegr a:hover { font-family:arial,sans-serif;  color:#694717;}

.mainlinesmall { font-family:arial,sans-serif; font-size:12px; color:#644314; }
.mainlinesmall a:visited { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.mainlinesmall a:link { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.mainlinesmall a:hover { font-family:arial,sans-serif; font-size:12px; color:#3c623e;}

.veryblack { font-family:arial,sans-serif;  color:#000; }
.veryblack a:visited { font-family:arial,sans-serif;  color:#000;}
.veryblack a:link { font-family:arial,sans-serif;  color:#000;}
.veryblack a:hover { font-family:arial,sans-serif;  color:#4f2907;}

.smalltext { font-family:arial,sans-serif; font-size:12px; color:#644314; }
.smalltext a:visited { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.smalltext a:link { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.smalltext a:hover { font-family:arial,sans-serif; font-size:12px; color:#3c623e;}

.mainlinemedium { font-family:arial,sans-serif; font-size:12px; color:#644314; }
.mainlinemedium a:visited { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.mainlinemedium a:link { font-family:arial,sans-serif; font-size:12px; color:#644314;}
.mainlinemedium a:hover { font-family:arial,sans-serif; font-size:12px; color:#3c623e;}

.smalltextred { font-family:arial,sans-serif; font-size:12px; color:#FF0000; }
.smalltextred a:visited { font-family:arial,sans-serif; font-size:12px; color:#FF0000;}
.smalltextred a:link { font-family:arial,sans-serif; font-size:12px; color:#FF0000;}
.smalltextred a:hover { font-family:arial,sans-serif; font-size:12px; color:#3c623e;}

.mainlinetan2 { font-family:arial,sans-serif;  color:#fdf3c2; }
.mainlinetan2 a:visited { font-family:arial,sans-serif;  color:#fdf3c2;}
.mainlinetan2 a:link { font-family:arial,sans-serif;  color:#fdf3c2;}
.mainlinetan2 a:hover { font-family:arial,sans-serif;  color:#4f2907;}

.mainlinetan2small { font-family:arial,sans-serif; font-size:10px; color:#fdf3c2; }
.mainlinetan2small a:visited { font-family:arial,sans-serif; font-size:10px; color:#fdf3c2;}
.mainlinetan2small a:link { font-family:arial,sans-serif; font-size:10px; color:#fdf3c2;}
.mainlinetan2small a:hover { font-family:arial,sans-serif; font-size:10px; color:#4f2907;}

.mainlineltgreen { font-family:arial,sans-serif;  color:#b3d296; }
.mainlineltgreen a:visited { font-family:arial,sans-serif;  color:#b3d296;}
.mainlineltgreen a:link { font-family:arial,sans-serif;  color:#b3d296;}
.mainlineltgreen a:hover { font-family:arial,sans-serif;  color:#fdf3c2;}

.goldtext { font-family:arial,sans-serif;  color:#bda11a; }
.goldtext a:visited { font-family:arial,sans-serif;  color:#bda11a;}
.goldtext a:link { font-family:arial,sans-serif;  color:#bda11a;}
.goldtext a:hover { font-family:arial,sans-serif;  color:#eeb667;}


.wpbuttonsmall { font-size:12px; padding:5px; cursor: pointer; }

.vspace {
	display:inline-block; 
	margin:10px 0;
}

.exploremap { border: 1px solid black; -moz-border-radius: 10px; border-radius: 10px; }
.icon { border: 1px solid #000; -moz-border-radius: 5px; border-radius: 5px; }
.explorelevel { font-family:arial,sans-serif;  }

.mainlinegreen { font-family:arial,sans-serif;  color:#187f49; }

#leftcolumn { width: 176px; height:100%; float: left; text-align:center; border-right: 0px solid #000000; border-bottom: 0px solid #000000; z-index:1; position: relative;}
#rightcolumn { width: 723px;  float: right; text-align:left; z-index:1; position: relative;}
.clear { clear: both;}
	
.iclass2 {background-color:#c8d4bd; color:#000000; -moz-border-radius: 7px;
	border-radius: 7px; border: 1px solid #868686;
	padding:5px;}
	
.iclasschat {background-color:#97ad87; color:#000000; -moz-border-radius: 7px;
	border-radius: 7px;}

.scrolltop { background-image:url("../images/scroll/top.png"); 
             background-repeat: repeat-x;}
.scrollbottom { background-image:url("../images/scroll/bottom.png"); 
             background-repeat: repeat-x;}
.scrollleft { background-image:url("../images/scroll/lside.png"); 
             background-repeat: repeat-y;}
.scrollright { background-image:url("../images/scroll/rside.png"); 
             background-repeat: repeat-y;}
             
.iclass {
	border-color:#bcbcba;
	padding:2px;
}
             
div.pedigreescroll {
width: 95%;
overflow: auto;
border: 1px solid #bcbcba;
padding: 3px;
-moz-border-radius: 10px;
border-radius: 10px;
}

div.shoutscroll {
height: 200px;
overflow: auto;
white-space: normal;
border: 1px solid #bcbcba;
padding: 8px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.shoutscrollsmall {
height: 200px;
width: 100%
overflow: auto;
white-space: normal;
border: 1px solid #bcbcba;
background-color: #efecbf;
padding: 8px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.ksscroll {
max-height: 150px;
overflow: auto;
white-space: normal;
}

div.roleplayscroll {
height: 500px;
width: 100%;
overflow: auto;
white-space: normal;
border: 1px solid #bcbcba;
padding: 8px;
-moz-border-radius: 15px;
border-radius: 15px;
}

div.storescroll {
height: 300px;
width: 100%;
overflow: auto;
border: 1px solid #bcbcba;
padding: 2px;
}

div.maillistscroll {
height: 250px;
width: 570px;
overflow-y: auto;
white-space: normal;
padding: 5px;
-moz-border-radius: 15px;
border-radius: 15px;
word-wrap: break-word;
}

#pinnedFooter {
z-index:99999999999;
display: block;
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: #2e1e03;
opacity:0.85;
filter:alpha(opacity=85);

}

.header { font-family:arial,sans-serif; font-size:22px; color:#000000; }

tr.wp {
	background-color:#f6edb7;
}

blockquote {  padding: 0 15px;  margin-left: 0;  }

.wrap {
    position: relative;
    display: inline-block;
}
.wrap span {
    position: absolute;
    bottom: -20px;
    right: 0px;
    }
.counter{
    background-color: #8aa275;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    line-height: 12px;
    height: 14px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 400;
}

/*For Item Modal Window*/

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
  z-index: 1000000000000000; /* Sit on top */
  left:0;
  right:0;
  top:30%;
  bottom:0;
  position: fixed;
  margin:0px auto;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.modal.show {
  opacity: 1;
  display: block;
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding:5px;
  border: 1px solid #cfcfcf;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:350px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Infobox Base color */
.info-icon {
  color: black;
  transition: color 0.3s ease;
}

/* Hover color */
.info-icon-wrapper:hover .info-icon {
  color: grey; /* or any color you want */
}

::-webkit-scrollbar {
      width: 8px; 
   }

::-webkit-scrollbar-track {
    background-color: #5a5b59;
  }

::-webkit-scrollbar-thumb {
    background: #9b9b99;
    border-radius: 25px;
  }

#poll-popup-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  opacity:0.9;
}

.poll-popup {
  color: white;
  border-radius: 5px;
  width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-family: "Segoe UI", sans-serif;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.7s ease, transform 0.7s ease;
  animation: popupIn 0.7s forwards;
}

@keyframes popupIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.poll-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poll-title {
  font-size: 16px;
  font-weight: bold;
}

.poll-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease;
}

.poll-close:hover {
  color: #grey;
}

.poll-body {
  padding: 10px;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}


.paw-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* shared paw particle */
.paw-hover::before,
.paw-hover::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 60%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;

    background-image: url(./images/menu/menuarrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    filter: drop-shadow(0 0 4px rgba(255, 246, 176, 0.6));
}

/* animation triggers */
.paw-hover:hover::before {
    animation: pawRise1 1s ease-out forwards;
}

.paw-hover:hover::after {
    animation: pawRise2 1.2s ease-out forwards;
    animation-delay: 0.15s;
}

@keyframes pawRise1 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.8);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(1.2);
    }
}

@keyframes pawRise2 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.6);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-60px) scale(1.4);
    }
}