/**
 * Nama : NgeeShare Css
 * Author : Afid Arifin
 * Pesan : Hanya jangan sembarangan intip. Jika Nekat, semoga mata loe busuk!
 */
a {
color : #cc0f16;
text-decoration : none;
}
div span a img {
width: 100px;
height: 25px;
}
img {
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle; 
} 
input, textarea, select {
background: #fff;
padding: 5px;
margin: 1px;
border: #ddd 1px solid;
color: #555; 
}
input[type="radio"]{
padding: 1px;
}
body {
color : #333;
font-size : 12px;
background : #fff;
font-family : sans-serif;
margin : 0;
padding : 0;
margin: auto; 
max-width: 800px;
}
form {
font-size : small;
margin : 0;
padding : 0;
}
h3 {
margin : 0;
padding : 0;
padding-bottom : 2px;
}
hr {
border : 0;
border-top : 1px dotted #ccc;
margin : 0; 
}
p {
margin: 1px;
}
ul {
margin : 0;
padding-left : 20px;
}
/* Header */
.header {
background:#620303;
padding: 7px;
margin: 0;
color: #eee;
font-weight:bold;
}
.header img { max-width:760px; }
@media screen and (min-device-width:100px) and (max-device-width:130px){ .header img,. screenshot, img { max-width: 80px; } }
@media screen and (min-device-width:131px) and (max-device-width:180px){ .header img, .screenshot, img { max-width: 150px; } } 
@media screen and (min-device-width:181px) and (max-device-width:250px) { .header img, .screenshot, img { max-width:180px; }}
@media screen and (min-device-width:251px) and (max-device-width:320px){ .header img, .screenshot, img { max-width:280px; }} 
@media screen and (min-device-width:321px) and (max-device-width:480px){ .header img, .screenshot , img{ max-width: 420px; }}
@media screen and (min-device-width:481px) and (max-device-width:640px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:641px) and (max-device-width:720px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:720px) and (max-device-width:5000px){ .header img, .screenshot , img{ max-width: 480px; }}
 
.navigation {
background:#A80000;
color: #eee;
padding: 0;
margin:0;
}
.navigation .select {
background: #000;
padding: 7px 0;
margin: 0;
}
.navigation span a {
display: inline-block;
color: #fafafa;
padding: 7px 5px;
margin: 0;
font-weight: bold;
border-right: 1px solid #911;
}

/* Footer */
.qfooter {
background: #680000;
color: #fff;
padding: 5px 7px;
margin:0;
font-weight: bold;
}
.qfooter input, .qfooter select, .qfooter .button{
padding: 3px 5px;
display: inline-block;
}
.qfooter .button{
background: #333;
border: 1px solid #111;
}
.nav-footer {
background: #ddd;
color: #333;
font-weight: bold;
padding: 7px;
}
.footer {
background: #660606;
padding: 7px;
margin: 0;
color: #ddd;
text-align: center;
}
.footer a{
color: #EE9090;
text-decoration: none;
}

/* Menu */
.mainpage {
padding: 7px;
border-top: 0;
border-bottom: 0;
}
.tmenu, .tnews {
background: #870B0B;
padding: 7px;
color: #eee;
margin: 5px 0 0 0;
font-weight: bold;
border: 1px solid #ddd;
}
.tnews {
margin: 0;
}
.menu, .container, .list, .back-menu, .news {
padding: 7px;
color: #555;
margin: 0;
border: 1px solid #ddd;
border-top: 0;
}
.container .textarea {
width: 90%;
}
.back-menu {
padding: 3px;
}
.back-menu a {
display: inline-block;
padding: 5px;
font-weight: bold;
}
.back-menu .back {
background: #cc0f16;
color: #fff;
border: 1px solid #911;
}
.back-menu .next {
background: #179023;
color: #fff;
border: 1px solid #071;
float:right;
}
.dlads {
text-align: center;
}
.dfile .dl {
background: #1279ee;
border: 1px solid #1279ee;
padding: 10px;
margin: 5px 5px 0px 5px;
color: #fff;
font-weight: bold;
text-align: center;
display: inline-block;
}
/* guestbook */
.guest-form {
padding: 7px;
margin: 0;
border: 1px solid #ddd;
border-top: 0;
}
.guest-form .textarea, .guest-form .input {
width: 90%;
}
.block-comment{
padding: 0;
margin: 5px 0 0 0;
position: relative;
}
.block-comment .thumbnail {
position:absolute;
border: 1px solid #ddd;
top:0px;
left:0px;
width:32px;
height:32px;
padding:1px;
}
.comment-author {
padding: 3px;
}
.comment-author .date {
color: #777;
}
.comment-list {
margin: 0 0 0 40px;
background: #fff;
border: 1px solid #ddd;
padding: 5px;
}
.comment-message, .comment-actions{
padding: 3px 0;
}
.comment-actions a, .comment-actions span{
background: #179023;
padding: 3px 7px;
display: inline-block;
color: #fff;
font-weight: bold;
}
.comment-actions span{
background: #cc0f16;
}
.block-reply {
margin: 0 1px 1px 15px;
padding: 5px 0 5px 5px;
}
.block-reply .block-comment {
border: 0;
}
.block-reply .thumbnail {
left: 0;
}
.block-reply .comment-list {
margin: 0 0 0 40px;
}
/* paging */
.pagelink {
  background: #A85F5F;
 padding: 7px;
 color: #eee;
 margin: 5px 0 0 0;
 font-weight: bold;
 border: 1px solid #ddd
 font-family:serif;
 text-align:center;
}
.page span, .pag, .pagelink {
  font-size: 0px;
  color: #FFFFFF;
}
.page span .pag b, .pagelink  b {
  color:#FFFFFF;
  background-color: #E36A6A;
  border: 1px solid #417394;
  padding: 2px 5px 2px 5px;
  font-size: 12px !important; font-weight: bold;
}
.page span a, .pag a, .pagelink  a {
  border: 1px solid #417394;
  background-color: #F59E9E;
  padding: 2px 5px 2px 5px;
  text-decoration: none;font-size: 12px !important;
  color:#B70707;
}
.page span a:hover, .pag a:hover, .pagelink a:hover {
  background-color: #f2f6f8;
  font-size: 12px !important;
  border: 1px solid #417394;
}
 
/* Error Message */
.error {
  background:#FB2525;
  color:#eee;
  padding:5px;
  margin:5px;
  border-radius:4px;
  font-family:Verdana;
  text-align:center;
  text-decoration:none;
}

/* Vote situs*/
.vote_cont {
border: 1px solid #ddd;
}
.vote_cont h3{
background: #eee;
border-bottom: 1px solid #ddd;
margin: 0;
padding: 7px;
}
.container h3{
font-size: 13px;
margin: 0;
}

.vote_cont .answer, .vote_cont .submit, .vote_cont .result{
padding: 5px 7px;
}
.vote_cont #answer1, .vote_cont #answer2, .vote_cont #answer3, .vote_cont #answer4, .vote_cont #answer5, .container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
padding: 1px;
}
.container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
display: inline-block;
}

/* Sharer */
.share-button {
padding: 7px;
font-weight: bold;
border: 1px solid #ddd;
border-top: 0;
}
.share-button a{
display: inline-block;
}
.social-button{
padding: 3px 0px;
font-weight: bold;
}
.share-button .fb-share {
background: #3b5998;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .tw-share {
background: #4099ff;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .gp-share {
background: #c0361a;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}

/* Search */
#search {
  background:#eee;
  color:#000;
  padding:5px;
  margin:5px;
  font-family:serif;
  font-size:12px;
  border-radius:6px;
  border:2px solid #6D0606;
  width:70%
}
#button {
  background:#8A0101;
  color:#fff;
  padding:5px;
  margin:5px;
  font-family:serif;
  font-size:12px;
  border-radius:6px;
  border:2px solid #6D0606;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s;
}
#button:hover {
  background: #AD0303;
  color: #fff;
  text-shadow: 1px 2px 2px #111;
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  box-shadow: 2px 4px 3px 2px #222;
}
/*Breadcrumbs*/
#breadcrumbs {
  background:#D48B8B;
  color:#eee;
  font-family:serif;
  padding:5px;
  margin:5px;
  border:1px solid #F6DFDF;
  border-radius:4px;
/* smile */
.smile {
padding: 7px;
border: 1px solid #ddd;
border-top: 0;
margin: 0;
}
.smile span {
margin: 1px;
display: inline-block;
}
/*Image Rotation*/
.img {
  -o-transition:all 1.5s ease;
  -moz-transition:all 1.5s ease;
  -webkit-transition:all 1.5s ease;
}
.img:hover {
  -o-transform:scale(1) rotate(360deg) translate(0px);
  -moz-transform:scale(1) rotate(360deg) translate(0px);
  -webkit-transform:scale(1.5) rotate(360deg) translate(0px);
  -o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
  -webkit-transition:all 1.5s ease;
}
.gallery {     overflow-x: auto; 
    white-space: nowrap; 
    padding: 5px;
    background-color: #f0f0f0;
}
.gallery img { 
    max-height: 200px; 
    margin-right: 5px; 
    display: inline-block; 
    vertical-align: middle;
    border: 1px solid #ccc;
}
/* Untuk daftar gambar yang sudah ada */.image-selector-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #f9f9f9;
}
.image-selector-label {
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    border: 2px solid transparent;
}
.image-selector-label img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    vertical-align: middle;
}
.image-selector-label input[type="checkbox"]:checked + img {
    border: 2px solid #007bff;
}

/* CSS BARU untuk tombol '+' */
.add-image-button {
    width: 64px;
    height: 64px;
    font-size: 32px;
    font-weight: bold;
    color: #555;
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 60px; /* Atur agar '+' pas di tengah */
}
.add-image-button:hover {
    background-color: #e9e9e9;
    border-color: #bbb;
}
/* -- CSS UNTUK GALERI GAMBAR BARU -- */
.image-gallery-container {
    padding: 5px;
}

/* Wadah untuk gambar utama */
.main-image-wrapper {
    width: 100%;
    margin-bottom: 5px;
}

/* Gambar utama agar responsif */
#main-forum-image {
    width: 100%;
    height: auto;
    max-height: 400px; /* Batasi tinggi maksimum */
    object-fit: contain; /* Pastikan gambar tidak terpotong */
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Wadah untuk thumbnail yang bisa digeser */
.thumbnail-wrapper {
    overflow-x: auto; /* Memungkinkan scroll horizontal */
    white-space: nowrap; /* Mencegah thumbnail turun ke baris baru */
    padding: 5px 0;
}

/* Gaya untuk setiap gambar thumbnail */
.forum-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover; /* Membuat gambar thumbnail seragam */
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 5px;
    cursor: pointer;
    display: inline-block; /* Agar bisa berjajar horizontal */
}

.forum-thumb:hover {
    border-color: #007bff;
}
/* -- CSS UNTUK GALERI GAMBAR -- */
.image-gallery-container {
    padding: 5px;
}

.main-image-wrapper {
    width: 100%;
    margin-bottom: 5px;
    background-color: #f0f0f0; /* Latar belakang untuk gambar */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden; /* Mencegah gambar keluar dari bingkai */
}

#main-product-image {
    display: block;
    width: 100%;
    height: auto; /* Tinggi otomatis menyesuaikan lebar */
    max-height: 350px; /* Batasi tinggi maksimum */
    object-fit: contain; /* Pastikan seluruh gambar terlihat */
}

/* Wadah thumbnail yang bisa digeser */
.thumbnail-wrapper {
    overflow-x: auto; /* Scroll horizontal */
    white-space: nowrap; /* Jaga thumbnail tetap satu baris */
    padding: 5px 0;
}

/* Setiap gambar thumbnail */
.product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #ddd;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    display: inline-block;
}

.product-thumb:hover {
    border-color: #007bff;
}