/* Normal, standard links. */
a:link
{
	color: #000;
	text-decoration: none;
}
a:visited
{
	color: #818F6C;
	text-decoration: none;
}
a:hover
{
	 color: #000;
	text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
	color: #76815F;
	text-decoration: none;
}
a.nav:hover
{
	color: #000;
	text-decoration: underline;
}

/* Tables should show empty cells. */
table
{

	empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
	color: #000000;
	font-size: small;
	font-family: verdana, sans-serif;
}


/* The main body of the entire forum. */
body
{
	background-repeat: repeat;
	background-attachment: scroll;
	background: #4F5B43 url(images/bg.jpg);
	margin: 0px;
	padding: 0px 104px 0px 104px;
}
@media only screen and (min-width: 1400px){
  body {
	background-repeat: repeat;
	background-attachment: scroll;
	background: #4F5B43 url(images/bg.jpg);
	margin: 0px;
	padding: 0px 534px 0px 534px;
  }
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
	color: #000000;
	font-family: verdana, sans-serif;
}
input, button
{
	font-size: 90%;
}

textarea
{
	font-size: 100%;
	color: #000000;
	font-family: verdana, sans-serif;
	background-color: #E8ECD1;
	border: 1px inset #767a81;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
	font-size: 90%;
	font-weight: normal;
	color: #000000;
	font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
  display:block;
  border:0;
  height:10px;
  background-image:url('images/divider.gif');
}

/* Standard horizontal rule.. ([hr], etc.) */
hr2, .hrcolor
{
  display:block;
  border:0;
  height:10px;
  background-image:url('images/divider.gif');
}

/* No image should have a border when linked */
a img{
border: 0;
}

/* A quote, perhaps from another post. */
.quote
{
	color: #000000;
	background-color: #5abbd3;
	border: 1px solid #202020;
	margin: 1px;
	padding: 2px;
	font-size: x-small;
	line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
	color: #000000;
	background-color: #D6BD58;
	font-family: "courier new", "times new roman", monospace;
	font-size: x-small;
	line-height: 1.3em;
	/* Put a nice border around it. */
	border: 1px solid #000000;
	margin: 1px auto 1px auto;
	padding: 2px;
	width: 99%;
	/* Don't wrap its contents, and show scrollbars. */
	white-space: nowrap;
	overflow: auto;
	/* Stop after about 24 lines, and just show a scrollbar. */
	max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
	color: #000000;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	font-size: x-small;
	line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
	cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
	color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
	width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
	background-color: #4F5B43;
	font-weight: bold;
	color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
	color: #000000;
	background-color: #E8ECD1;
	border-right : 1px solid #f5f5e7; 
	border-bottom: 1px solid #f5f5e7; 

}
.windowbg2
{
	color: #000000;
	background-color: #E8ECD1;
	border-right : 1px solid #f5f5e7; 
	border-bottom: 1px solid #f5f5e7; 
}
.windowbg3
{
	color: #000000;
	background-color: #E8ECD1;
	border-right : 1px solid #f5f5e7; 
	border-bottom: 1px solid #f5f5e7; 
}
/* the today container in calendar */
.calendar_today
{
	background-color: #E8ECD1;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
	color: #E8ECD1;
	font-style: normal;
	background: #4F5B43 url(images/titlebg1.gif) repeat-x;
	text-align: center;
	height: 10px;
	
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
    font-weight: bold;
    color: #E8ECD1;
    font-style: normal;
    height: 10px;
    padding: 4px;
}

.titlebg a:hover
{
	color: #E8ECD1;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
	color: #3e3827;
	font-style: normal;
	text-decoration: underline;
}

.titlebg2 a:hover
{
	text-decoration: underline;
}
.titlebg4
{
    color: #fffff9;
    font-style: normal;
    background: #e8ecd4 url(images/titlebg1.gif) repeat-x;
    height: 14px;
    padding: 5px;
}
.titlebg10
{
	background:  url(images/pattern.gif) repeat-x;
	font-weight: bold;
	color: #fff;
	font-style: normal;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
	color: #B6C19F; 
	font-style: normal;
	background: red url(images/bg.jpg) repeat-x;
	background-color: #E8Ecd1;
	padding-left: 10px;
	padding-right: 10px;
	height: 25px;
	
}
.catbg2 , tr.catbg2 td
{
	background: url(images/bg.jpg) repeat-x;
	background-color: #E8ECD1;
	color: #B6C19F; 
	padding-left: 10px;
	padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
	background-repeat: repeat-x;
}
.catbg, .catbg2
{
	font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
	font-size: 95%;
	color: #B6C19F;
	text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
	color: #B6C19F;
	text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
	color: #5c3903;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
	background-color: #E8ECD1;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
	padding: 0px;
	background: #E8ECD1;
	border: solid 1px #DCE2BA;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
	font-size: x-small;
	font-family: verdana, sans-serif;
}
.middletext
{
	font-size: 90%;
}
.normaltext
{
	font-size: small;
}
.largetext
{
	font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
	width: 100%;
	overflow: auto;
	line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
	width: 100%;
	overflow: auto;
	padding-bottom: 3px;
	line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error{
color: red;
}

#foot-r {
	 height: 70px;
	 background: #E8ECD1;
	 border-top: solid 2px #9A9E85;
}
 
#footer {
	 text-align: center;
	 font-family: arial, verdana, sans-serif;
	 color: #325A5F;
	 font-size: 10px;
}
#footer a:link, #footer a:visited {
	 color: #325A5F;
	 font-weight: bold;
}
#footer a:hover {
	 color: #050505;
	 text-decoration: none;
	 border-bottom: 3px groove #325A5F;
	 font-weight: bold;
}

#footerarea {
	 text-align: center;
	 padding-top: 22px;
	 color: #325A5F;
}
.footera {
	color: #666;
	font-size: 1.1em;
	line-height: 41px; 
	margin: 0 auto;
	text-align: center;
	width: 792px;
	height: 41px;
}

.harita {
  display: inline-block;
  width: 205px;
  height: 145px;
  background-image: url(/Themes/Hogwarts_v2/images/icons/harita.png);
  background-size: cover;
  background-position: center;
  border: none;
  text-decoration: none;
}

/* definitions for the main tab, active means the tab reflects which page is displayed */

.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last, .mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last {
	 color: #070707;
	 vertical-align: top;
	 text-transform: uppercase;
}

.maintab_back, .maintab_active_back, .mirrortab_back, .mirrortab_active_back {
	 color: #090909;
	 text-decoration: none;
	 font-size: 9px;
	 font-family: tahoma, sans-serif;
	 padding: 5px 10px 5px 10px;
}

.maintab_first,.mirrortab_first {
	 display: none;
}

.maintab_back,.mirrortab_back {}

.maintab_last,.mirrortab_last {
	 display: none;
}

.maintab_active_first, .mirrortab_active_first {
	 display: none;
}

.maintab_active_back, .mirrortab_active_back {
	 background: #BEBA57;
	 border: solid 2px  #132C00;
}

.maintab_active_last, .mirrortab_active_last {
	 display: none;
}
/* how links behave in main tab. */

.maintab_back a:link, .maintab_back a:visited, .mirrortab_back a:link, .mirrortab_back a:visited {
	 color: #252525;
	 text-decoration: none;
	 font-weight: bold;
}

.maintab_active_back a:link, .maintab_active_back a:visited, .mirrortab_active_back a:link, .mirrortab_active_back a:visited {
	 color: #272727;
	 text-decoration: none;
	 font-weight: bold;
}

.maintab_back a:hover, .maintab_active_back a:hover, .mirrortab_back a:hover, .mirrortab_active_back a:hover {
	 text-decoration: underline;
}
/* template menu */
#toolbarust {
    padding: 20px 0 20px 0;
    height: 60px;
    font-size: 12px;
    background-size: 100% 100%;
    margin: 0 auto; /* Bu kısımı ekleyin */
    width: 80%; /* Ya da istediğiniz genişliği belirleyin */
}

#toolbar {
	height: 80px;
	font-size: 12px;
	background: url(./images/usto.gif) no-repeat;
	background-size: 100% 100%; 
}
#toolbar2 {
	height: 80px;
	background: url(./images/usto.gif) no-repeat;
	background-size: 100% 100%; 
}
#nav li.active_menu a {
	background: url(./images/menuma.gif) repeat-x;
	height: 20px;
}
#nav {
	background: url(./images/menuma.gif) repeat-x;
	height: 15px;
}
#nav li {
	background: url(./images/menuma.gif) repeat-x;
	height: 28px;
}
#nav li a {
	color: #6C7151;
	font-family: Thoma, verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#nav a:hover {
	color: #A2B186;
	border-bottom: solid 5px #A2B186; 
}
#nav {
    margin: 10px 0 0 20px;
	padding: 0;
	height: 28px;
    display: flex;
    justify-content: center;
}
#nav ul {
	padding: 0;
	margin: 0;
}
#nav li {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}
#nav a {
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}
#nav ul li a:hover, #nav #active a {
	color: #2e362e;
	border-bottom: solid 5px #A2B186;  
} 
#nav li a {
	display: block;
	float: left;
	height: 28px;
	padding: 0 15px;
} 
.bar_left
{ 
background: #A1B085 url(./images/solkenar.jpg) repeat-y;

width: 23px;
}
.bar_right
{ 
background: #4F5B43 url(./images/sagkenar.jpg) repeat-y;
width: 24px;
}
.top {
	background: url(images/bgcontent.gif) no-repeat 0 -4%;
	float: left;
	text-align: center;
		  height: 50px;
		  width: 792px;
}
.bodycolor
{
margin: 40px;	
background: #E8ECD1 no-repeat;
}
.content {
	background: url(images/usto.gif) no-repeat;
	clear: both;
	font-size: 1.2em;
	margin: 0;
	padding: 0 38px 12px;
	height: 86px;
}
.content .spacer {
	height: 42px;
}
.bannerbg
{
background-color: #555F47;
background-image: url(images/bannerimg.png);
background-repeat: cover;
background-position: center;
height: 306px;
}
.bannerimg {
    background-image: url(https://hogwartsrevisited.com/Themes/Hogwarts_v2/bannerimg.png);
    background-size: cover;
    background-position: center bottom 70%;
    height: 100%;
}
.forumname
{
	font-family: Comic Sans Ms, Verdana, sans-serif; 
	color: #D2D6BB;
	font-size: 240%; 
	 margin-left: 240px;  
	top: 120px; 
	position: absolute;  
	left: 90px; 

}
 
#kullanici {
	 font-size: 12px;
	 color: #D2D6BB;
	 font-family: Thoma, verdana, serif;
	 float: right;
	 padding-left: 25px;
	 padding-right: 5px;
	 text-align: center;
	 margin-top: 140px; 
	 margin-right: 5px;
	 margin-left: 210px;
	 text-align: center;
	
}
#kullanici a:link, #userarea a:visited {
	 color: #E8ECD1;
}

#kullanici a:hover {
	 color: yellow;
	 text-decoration: underline;
}
.post-new
{
	background-image: url(images/on.gif);
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
}
.post-child
{
	 background-image: url(images/on2.gif);
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
}
.post-none
{
	background-image: url(images/off.gif);
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
}
.post-small-none
{
	background-image: url(images/new_none.gif);
	background-repeat: no-repeat;
	height: 25px;
	width: 24px;
}
.post-small-new
{
	background-image: url(images/new_some.gif);
	background-repeat: no-repeat;
	height: 25px;
	width: 24px;
}
#news
{
	color: #445044;
	font-family: Thoma, verdana, sans-serif;
	font-size: 12px;
	font-weight: bold; 
	text-align: center;
	padding-top: 30px; 
}
#news h2
{
	font-size: 85%;
	font-weight: bold;
	margin: 1px 0 0 1px;
}
#news p
{
	color: #000;
	height: 50px;
	overflow: hidden;
	font-size: 100%;
}
#buyuksalon {
    background-image: url('http://hogwartsrevisited.com/Themes/Hogwarts/images/psd/buyuksalon.png');

}


ul.reset, ul.reset li
{
	padding: 0;
	margin: 0;
	list-style: none;
}

@media screen and (min-width: 414px) and (max-width: 736px) and (-webkit-min-device-pixel-ratio : 3)  {
	/* Considering something trying to be bad boy and editing body (especially portals!) */
	body {
    -moz-transform: scale(0.5, 0.5); /* Moz-browsers */
    zoom: 0.5; /* Other non-webkit browsers */
    zoom: 50%; /* Webkit browsers */
	padding: 0px 0px 0px 0px;
	font-size: small;
	}    }

    @media screen and (min-width: 414px) and (max-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio : 3)  {
    /* Considering something trying to be bad boy and editing body (especially portals!) */
    body {
    -moz-transform: scale(0.5, 0.5); /* Moz-browsers */
    zoom: 0.5; /* Other non-webkit browsers */
        zoom: 100%; /* Webkit browsers */
    padding: 0px 0px 0px 0px;
    font-size: small;
    }    }
    
    @media screen and (min-width: 820px) and (max-width: 1180px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
    body {
    zoom: 0.5; /* Other non-webkit browsers */
        zoom: 100%; /* Webkit browsers */
    margin-top: 0px;
    margin-bottom: 0px;
        margin-left: 0px;
    padding: 0px 0px 0px 0px;
    } }
    
    @media screen and (min-width: 820px) and (max-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio : 2)  {
    body {
    zoom: 0.5; /* Other non-webkit browsers */
        zoom: 100%; /* Webkit browsers */
    margin-top: 0px;
    margin-bottom: 0px;
        margin-left: 0px;
    padding: 0px 534px 0px 534px;
    } }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
    zoom: 0.5; /* Other non-webkit browsers */
        zoom: 100%; /* Webkit browsers */
    margin-top: 0px;
    margin-bottom: 0px;
        margin-left: 0px;
    padding: 0px 0px 0px 0px;
    } }

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
    body {
   
        padding: 0px 120px 0px 120px;
    } }

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 1)  {
body {

    padding: 0px 0px 0px 0px;
}
#toolbarust {
        font-size: 12px; /* Yazı boyutunu küçültün */
        width: 90%; /* Genişliği artırın */
        padding: 0px 0 0px 0;
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio : 1)  {
body {

    padding: 0 90px 0 90px;
}

}

    @media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
    body {
    zoom: 0.5; /* Other non-webkit browsers */
    padding: 0px 0px 0px 0px;
    
    } }

    @media screen and (min-width: 360px) and (max-width: 640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio : 3)  {
    /* Considering something trying to be bad boy and editing body (especially portals!) */
    body {
    -moz-transform: scale(0.5, 0.5); /* Moz-browsers */
    zoom: 0.5; /* Other non-webkit browsers */
    padding: 0px 0px 0px 0px;
    } }

@media screen and (min-width: 2400px) {
body {
    height: 650px;
zoom: 0.5; /* Other non-webkit browsers */
    zoom: 100%; /* Webkit browsers */
margin-top: 0px;
margin-bottom: 0px;
    margin-left: 0px;
padding: 0px 460px 0px 460px;
} }

@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
#toolbarust {
        font-size: 12px; /* Yazı boyutunu küçültün */
        width: 90%; /* Genişliği artırın */
        padding: 0px 0 20px 0;
} }


@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
.bar_left
{
background: #A1B085 url(./images/solkenar.jpg) repeat-y;
width: 25px;
}}
@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
.bar_right
{
background: #4F5B43 url(./images/sagkenar.jpg) repeat-y;
width: 25px;
}}

@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
.titlebg4
{
color: #fffff9;
font-style: normal;
background: #e8ecd4 url(images/titlebg1.gif) repeat-x;
height: 14px;
padding: 5px;
}}

@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
    .smalltext
    {
        font-size: xx-small;
        font-family: verdana, sans-serif;
    }}

@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
    #kullanici {
        margin-top: 100px;
        margin-right: center;
        margin-left: 100px;
        
    }}
@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2)  {
    input, button
    {
        font-size: 80%;
    }}


table.ncode_imageresizer_warning, table.ncode_imageresizer_warning td
{
    background-color: #fefee1; /* the bgcolor behind the text and image */
}
table.ncode_imageresizer_warning {
    color: #000000; /* the font color */
    border: 1px solid #CCCDCD; /* the border around the whole thing */
    cursor: pointer;
}
table.ncode_imageresizer_warning td {
    font-size: 10px;
    vertical-align: middle;
    text-decoration: none;
}

table.ncode_imageresizer_warning td.td1 {
    padding: 5px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#gotop, #gobottom {
    position: fixed;
    bottom: 50%;
    left: 0;
    z-index: 9;
    padding: 1.286em 0.1em 0 0.1em;
    height: 3em;
    font-weight: bold;
    font-size: 2em;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid;
    border-bottom: none;
    border-radius: 0 20px 0 0;
}

#gobottom {
    top: 50%;
    padding: 0.8em 0.1em 0.5em 0.1em;
    border-top: none;
    border-radius: 0 0 20px 0;
}

#gotop:hover, #gobottom:hover {
    text-decoration: none;
}


#top {
    position: absolute;
    top: -10em;
    left: 3em;
    padding: 1em 2em;
    background: none repeat scroll 0 0 #ffffff;
    font-weight: bold;
    transition: top .5s ease-out 0s, background 1s linear 0s;
    border: 4px solid;
    border-radius: 0 0 6px 6px;
    z-index: 200;
}

#top:focus {
    top: -4px;
}


/* Topic Header */
.threadhead
{
    color: #000000;
    font-size: 20pt;
    text-transform:   capitalize;
    
}
.threadhead a
{
    color: #476C8E;
}

/* Footnotes mod by Nao */
table.footnotes {
    border-top: 1px solid #888;
    margin-top: 20px;
    padding-top: 4px;
}
blockquote table.footnotes {
    margin: 8px 0 4px 0;
}
table.footnotes td {
    font-size: smaller;
    padding: 0 2px;
}
td.footnum {
    vertical-align: top;
    text-align: right;
    width: 30px;
}
td.footnum a { text-decoration: none }
a.fnotel {
    text-decoration: none;
    vertical-align: super;
    font-size: smaller;
    line-height: normal;
}
td.footnum a:target, a.fnotel:target { background-color: #ddeeff !important }
/* Footnotes End */

.uyegrubu {
    background-size: 50% 50%; 
    width: 150px;
    height: 32px;
}

@media screen and (max-width: 44.950em) {


    #gobottom, #gotop {
        display: none;
        padding-right: 0.25em;
        border: 1px solid;
    }

    #gobottom {
        border-radius: 0;
    }

    #gotop {
        border-radius: 0 0.5em 0 0;
    }

    #gotop:hover, #gobottom:hover {
        text-decoration: none;
    }
    

}
.post_best_answer { border: 5px solid #33cc33; border-radius: 0 0 7px 7px; }
.best_answer_button span, .remove_best_answer_button span { width: 20px; height: 20px; display: inline-block; }
.best_answer_button span { background: url(images/buttons/best_answer.png) no-repeat; }
.remove_best_answer_button span { background: url(images/buttons/best_answer.png) no-repeat 0 -20px; }
#best_answer_goto { border-radius: 7px 7px 7px 7px !important; margin-bottom: 3px; min-height: 20px }
.is_best_answer { padding: 10px 0 6px; background: #33cc33; color: #fff; font-size: 14px; border-radius: 7px 7px 0 0; text-align: center; }
.is_best_answer a { font-weight: 800; color: #ffffff}
.is_best_answer a:hover { color: #ffdd99 }
.mirror {
  display: block;
  -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  -o-transform: matrix(-1, 0, 0, 1, 0, 0);
}

.rp-baglanti-btn {
  background: linear-gradient(to right, #777742, #404030);
  color: #bec8a5;
  padding: 6px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 85%;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
}
a.rp-baglanti-btn,
a.rp-baglanti-btn:visited,
a.rp-baglanti-btn:hover,
a.rp-baglanti-btn:active {
color: #bec8a5;
text-decoration: none;
}
                              .custom-tooltip {
                                position: relative;
                                display: inline-block;
                              }

                              .custom-tooltip::after {
                                content: attr(data-tooltip);
                                position: absolute;
                                bottom: 125%;
                                left: 50%;
                                transform: translateX(-50%);
                                background: #222;
                                color: #fff;
                                padding: 8px 12px;
                                border-radius: 6px;
                                white-space: nowrap;
                                font-size: 12px;
                                opacity: 0;
                                pointer-events: none;
                                transition: opacity 0.3s ease;
                                z-index: 9999;
                                box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
                              }

                              .custom-tooltip:hover::after {
                                opacity: 1;
                              }


.pet-info {
display: table-row;
}

.pet-info__cell {
          background-color: #750000;
          color: #ffffff;
          font-weight: bold;
          padding: 10px;
          text-align: center;
          border: 1px solid #dddddd;
}

.pet-info__header-cell {
          background-color: #750000;
          color: #ffffff;
          font-weight: bold;
          padding: 10px;
          text-align: center;
          border: 1px solid #dddddd;
}

.breed-header {
  background-color: #f2f2f2;
  font-size: 1.2em;
  font-weight: bold;
}

.breed-image {
  width: 120px;
  height: 120px;
}

.breed-description {
  padding-top: 10px;
}