/*
	styles.css
*/

@-ms-viewport {
	width: device-width ;
}
@viewport {
	width: device-width ;
}

html, body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: #FFFFFF;
    background-image: url('../images/cnvbkgnd.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

ul.topnav li {
	float: left;
	border-right: 1px solid #bbb;
}

ul.topnav li a {
    display: block;
	color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover {

	color: white;
	background-color: #111;
}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

#psicontent {
    width: 90%;
    margin: auto;
    background: transparent;
    padding: 16px;
}

.centerbox {
	margin:auto;
    width: 75%;
    height: inherit;
    border: 3px solid #73AD21;
    padding: 10px;
	overflow: hidden;
}

hr {
 	border: 0;
 	color: #9E9E9E;
 	background-color: #9E9E9E;
 	height: 1px;
 	width: 100%;
 	text-align: left;
}

.button-link {
    display: inline-block;
    width: 200px;              /* Fixed width */
    height: 60px;              /* Fixed height */
    line-height: 60px;         /* Vertically center text */
    background-color: lightgray;
    color: black;
    border-radius: 4px;
    text-decoration: none;     /* Remove underline */
    font-size: 18px;
    font-family: Arial, sans-serif;
    text-align: center;        /* Center text horizontally */
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #bfbfbf; /* Slightly darker gray on hover */
}