@tailwind base;


html {
  @apply min-h-screen;
}
body {
  @apply min-h-screen;
}

.input-group {
    @apply py-2;
}
.input-group label {
    @apply text-lg;
}
input[type=text], input[type=password] {
    @apply border-gray-500 border px-2 py-2 rounded w-full bg-white;
}
select {
    @apply border-gray-500 border px-2 py-2 rounded bg-white text-yuika-blue-500 appearance-none;
}
textarea {
    @apply border-gray-500 border px-2 py-2 rounded w-full bg-white;
}
button {
    @apply rounded px-2 py-2 text-white bg-yuika-blue-500;
}
h1 {
    @apply text-4xl;
}
h2 {
    @apply text-3xl;
}
h3 {
    @apply text-2xl;
}
h4 {
    @apply text-xl;
}
h5 {
    @apply text-lg;
}
h6 {
    @apply text-base;
}

hr {
    @apply my-4;
}

code {
    @apply bg-gray-200 border border-gray-500 py-1 px-2 text-yuika-blue-700;
}

dt {
    @apply float-left mr-4 text-lg text-yuika-blue-700;
}
dd {
    @apply text-base text-gray-700;
}

ol {
    @apply list-decimal;
}

ul {
    @apply list-disc;
}

td, th {
    @apply border border-gray-500 py-2 px-2;
}

th {
    @apply bg-gray-200 text-yuika-blue-700;
}

pre {
    @apply bg-gray-200 py-2 px-2 border-gray-500;
}
pre code {
    @apply border-none;
}

blockquote {
    @apply block pl-8 border-l-4 border-yuika-blue-500 my-2;
}

a {
    @apply text-yuika-blue-500;
}

header {
    @apply h-16 w-full z-10 flex flex-row justify-start items-center px-4 text-white text-lg bg-yuika-blue-500;
    min-height: 3rem;
}

.header-link {
  @apply px-2 text-white;
}

footer {
    @apply h-16 w-full z-10 flex flex-row justify-start items-center px-4 text-white text-lg bg-yuika-blue-500;
    min-height: 3rem;
}

main {
    @apply mx-auto w-full py-4 px-4;
    min-height: calc(100vh - 8rem);
}


.header-middle {
    @apply flex-grow;
}

.form-title {
    @apply text-4xl text-center mb-4;
}

#forumbrowser {
    @apply flex flex-row justify-start items-start;
}
.forumbrowser-left {
    @apply flex flex-col mx-1;
}

.forumbrowser-item {
    @apply px-2 border-r-2 border-white text-yuika-blue-500 cursor-pointer flex flex-col justify-center items-end h-8 transition-colors;
}
.forumbrowser-item.selected {
    @apply border-yuika-blue-500 bg-yuika-blue-100 transition-colors;
}
.forumbrowser-item:hover {
    @apply bg-yuika-blue-100 transition-colors;
}

.forumbrowser-right-table {
    @apply flex flex-col flex-grow;
}
.forumbrowser-right {
    @apply text-left py-2 px-1 flex flex-row h-8 border-white border-l-2 text-yuika-blue-500 cursor-pointer transition-colors;
}
.forumbrowser-right.selected {
    @apply border-yuika-blue-500 bg-yuika-blue-100 transition-colors;
}
.forumbrowser-right:hover {
    @apply bg-yuika-blue-100 transition-colors;
}
.forumbrowser-right-col {
    @apply px-2 flex flex-col justify-center items-start;
}

.forum-post {
    @apply border my-4 border-yuika-blue-500;
}
.forum-post-title {
    @apply h-12 w-full text-white py-2 px-2 flex flex-row justify-start items-center flex flex-row bg-yuika-blue-500;
}
.forum-post-content {
    @apply flex flex-row py-2 px-2;
    min-height: 200px;
}
.forum-post-user {
    @apply w-1/6 py-2 px-4 flex flex-col;
}
.forum-post-user-detail {
    @apply flex flex-col justify-center;
}
.forum-post-user-detail img{
    @apply rounded-full w-full;
}
.forum-post-text {
    @apply w-5/6 py-2 px-2;
}
.forum-post-profile {
    @apply w-5/6 py-2 px-2 flex flex-col;
}
.forum-post-profile-detail {
    @apply flex flex-row;
}
.forum-post-profile-about {
    min-height: 100px;
}
.forum-post-footer {
    @apply h-12 w-full py-2 flex flex-row justify-start items-center;
}
.forum-post-footer-left {
    @apply px-2;
}
.forum-post-footer-mid {
    @apply flex-grow px-2;
}
.forum-post-footer-right {
    @apply px-2;
}
.forum-post-footer-action {
    @apply px-4 cursor-pointer border-b-2 border-white py-2;
}
.forum-post-footer-action:hover {
    @apply bg-gray-200 border-yuika-blue-500 transition-colors;
}
.forum-post-footer-action.danger:hover{
    @apply bg-red-200 border-red-500 text-red-700 transition-colors;
}

.lock-message {
    @apply bg-red-200 py-4 px-4 border-red-500 border my-2 mx-2;
}

#forumbrowser {
    @apply flex flex-row my-4;
}
#editor-poster {
    @apply h-full;
}
@tailwind components;

@tailwind utilities;