body
{
	margin: 0;
	padding: 0;
	color: #515151;
	text-align: center;
	font: 100 15px 'Arial';
	line-height: 20px;
	background-color: #0C2C45;
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/bg.png') center center / cover;
	background-size: auto;
	background-position: top right;
}

#sidepanel
{
	max-width: 700px;
	min-width: 400px;
	margin: auto; 
	padding: 0px; 
	color: #FFFFFF;
	background: rgba(0,0,0,0.75);
	border-left: 10px solid #111111;
	border-right: 10px solid #111111;
	text-align: center;
}
		.imgfade {
		  	opacity: 1.0;                /* starts at 60% opacity */
		  	transition: opacity 0.4s ease; /* smooth fade */
		}
		
		.imgfade:hover {
		  	opacity: 0.6;                /* full opacity on hover */
		}
        .thumbnail-link {
            text-decoration: none;
            cursor: pointer;
            display: inline-block;
			border: 4px solid #555555; 
            border-radius: 10px;
        }
		.thumbnail-link:hover {
			border: 4px solid #FFDD79;
        }
        .thumbnail-link img {
            max-width: 300px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
        }
        #preview {
            display: none;
            position: fixed;
            top: 2%;
            left: 2%;
            width: 98%;
            height: 98%;
            background-size: cover;
            background-position: right;
            background-repeat: no-repeat;
            border-radius: 12px;
            z-index: 1001;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        /* Optional: Close button */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            z-index: 1002;
            display: none;
        }
        #preview:hover .close-btn {
            display: block;
        }

/*
#preview
{
	margin: auto; 
	width: 96%; 
	height: 200px; 
	border-radius: 10px; 
	border: 4px solid #111111; 
	cursor: pointer;
	background-image:url(images/bg.png); 
	background-position: center right; 
	background-size: cover; 
}

#preview:hover
{
	border: 4px solid #FFDD79;
}
*/

#form
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	display: none;
	color: #515151;
	text-align: left;
	background-color: #0C2C45;
}

#error
{
	background-color: #990000; 
	border: 1px solid #660000; 
	padding: 10px 20px;
}

div.button
{
	padding: 20px;
	margin-bottom: 2px;
	text-align: center;
	font-weight: bold;
	color: #FFDD79;
	background-color: #364B56;
	cursor: pointer;
}

input, textarea, bttn
{
	border-radius: 10px; 
	padding: 10px;
	font: 100 12px 'Arial';
}

div.button:hover
{
	padding: 20px;
	margin-bottom: 2px;
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #364B56;
	cursor: pointer;
}


p
{
	margin: 0px;
	text-align: left;
	color: #515151;
	background-color: transparent;
}

p.center
{
	margin: 0px;
	text-align: center;
	color: #FFFFFF;
	background-color: transparent;
}

p.bold
{
	margin: 0px;
	text-align: left;
	font-weight: bold;
	color: #515151;
	background-color: transparent;
}

p.right
{
	margin: 0px;
	text-align: right;
	vertical-align: middle;
	color: #515151;
	background-color: transparent;
}

p.white
{
	color: #FFFFFE;
	background-color: transparent;
}

p.red
{
	color: #FF8080;
	background-color: transparent;
}

p.yellow
{
	color: #FFDD79;
	background-color: transparent;
}

a
{
	font-weight: bold;
	text-decoration: none;
	color: #FFDD79;
	background-color: transparent;
}

span.yellow
{
	font-weight: bold;
	text-decoration: none;
	color: #FFDD79;
	background-color: transparent;
}

h1
{
	margin: 0px 0px 5px 0px;
	text-align: left;
	font: 100 20px 'Arial';
	font-weight: bold;
	color: #FFDD79;
	background-color: transparent;
}

h2
{
	margin: 0px 0px 5px 0px;
	text-align: left;
	font: 100 14px 'Arial';
	font-weight: bold;
	color: #FFDD79;
	background-color: transparent;
}