/* Guestbook theme */

:root {
  --guestbookcolour1: #6D6868;
  --guestbookcolour2: #848080;
}
/*

#guestbook_input_form
{
	display: none;
	max-width: 400px;
    padding: 16px;
    margin: 16px 0;
    border: 1px solid #ccc;
}

#guestbook_input_form p
{
	margin:0;
}

#guestbook_input_form input
{
	border: solid 1px #ccc;
    border-radius: 0;
    margin-top: 8px;
    width: 100%;
    margin-bottom: 16px;
}

#form-content
{
	border: solid 1px #ccc;
    border-radius: 0;
    margin-top: 8px;
    width: 100%;
    margin-bottom: 16px;
	height:128px;
	resize: none;
}

*/

#guestbook_input_form
{
	display: none;
    justify-self: center;
    width: 100%;
    max-width: 512px;
    padding: 16px;
    border: 1px solid #ccc;
    grid-gap: 16px;
}

#guestbook_input_form p
{
	margin:0;
}

#form-content
{
	height: 64px;
	resize: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.guestbook-content
{
	width: 100%;
	display: grid;
}

.guestbook_post
{
	display: grid;
	padding: 32px;
    margin: 16px;
    border: solid 1px #ccc;
    grid-gap: 16px;
}

.post_title
{
	color: var( --guestbookcolour1 );
}

.post_content
{
	
}

.post_name
{
	color: var( --guestbookcolour1 );
}

.display-star
{
	color: var( --guestbookcolour1 );
}

/* - */

.top-16
{
	margin-top: 16px!important;
}


.showing_input_form
{
	display: grid!important;
}

.guestbook_btn
{
	background-color: var( --guestbookcolour1 );
    color: #fff;
    font-size: 16px;
    font-weight: 100;
    padding: 12px 16px;
    float: left;
}

.guestbook_btn:hover
{
	cursor: pointer;
	background-color: var( --guestbookcolour2 );
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#status_text
{
	text-align: center;
    font-size: 32px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



.star-selection .star:hover
{
	color: var( --guestbookcolour1 );
	cursor: pointer;	
	transform: scale(1.2);
}

.star
{
	color: #b0b0b0;
	transition: ease all .2s;
}

.active-star
{
	color: var( --guestbookcolour2 );
}

.star-inner
{
	justify-content: center;
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */