@charset "utf-8";
/* CSS Document */
h2 {display: none;}
#btntop, #pulldown, #vips {display: none;}

#name {grid-area: name;}
#eMail {grid-area: email;}
#commentText {grid-area: comment;}
#vrcodeDiv {grid-area: vrcode;} 
#buttons {grid-area: buttons;}

#comment {margin: 0 0 1em; padding: 0.5rem; display: grid; grid-template-areas: 'name email' 'comment comment' 'vrcode vrcode' 'buttons buttons'; 
	grid-template-columns: 50%; font-size: small;}
#comment label, #approvedField, #bannedField {font-family: var(--defaultBookFontFamily); color: var(--fontBrown); font-size:small; font-weight: bold; margin: 0.25em 0 0;}
#name label, #eMail label, #commentText label {display: block;}
#name input, #eMail input {width: calc(100% - 1rem);}
#emailRubric {font-size: x-small;}

#commentText textarea {width: calc(100% - 1rem);}

#vrcodeField {margin: 0.5em 0; font-size: small;}
#vrcodeField span {font-weight: normal;}
#vrcodeField img {vertical-align: middle;}
#approvedField, #bannedField {display: inline-block;}

#buttons {text-align: center;}
#buttons li {display: inline-block;}

.smallPrint {font-size: small;}
main > p:nth-of-type(5) {text-indent: -1em; margin-left: 1em;}

#ajhsig {background-position: left;}
#oops {font-weight: bold}
.btnbigclose {margin: 0.5em 0;}

@media only screen and (max-width: 750px)
{
	#comment {grid-template-areas: 'name' 'email' 'comment' 'vrcode' 'buttons'; grid-template-columns: 100%;}
	#name input, #eMail input {width: 50%;}	
}
@media only screen and (max-width: 520px)
{
	#name input, #eMail input {width: calc(100% - 1rem);}	
	#emailRubric {display: block;}
}