div.block_segment {
	margin-bottom: 25px;
	padding: 15px;
	border: 1px #000000 dashed;
	font-size: 12px;
}
div.smalltext {
	font-size: 10px;
	font-weight: bold;
	color: #f04c23;
}
input.password {
        -webkit-text-security: square !important;
}

div.center_content {
	margin: 0 auto;
	width: 500px;
	text-align: center;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
.attachment_frame {
	display: inline-block;
	margin: 5px;
	border: 1px #555555 solid;
	max-width: 250px;
}
.attachment_caption {
	background-color: #ffffff;
	padding: 4px;
	font-sie: 10px;
}
.attachment_img {
	max-width: 240px; 
	max-height: 240px; 
	padding: 5px;
}
a.back_button {
	display: block;
	background-color: #444444;
	color: #ffffff;
	text-decoration: none;
	font-size: 10px;
	padding: 5px;
	border-bottom: 2px #000000 solid;
}
.square-box{
	position: block;
	text-shadow: 2px 2px #444444;
	background: #f9c701;
	border: 1px #000000 solid;
	padding-top: 10px;
	padding-bottom: 10px;
}
.square-box:hover {
	background: #151515;
	border: 1px #444444 solid;
}
.square-content div {
	display: table;
	width: 100%;
	height: 100%;
}
.square-content a {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
}
.square-content a:hover {
	color: #efefef;
	text-shadow: 2px 2px #000000;
}
.footer {
	width: 100%;
	background-color: #000000;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 5px #747366 solid;
	color: #ffffff;
	font-family: verdana;
	font-size: 14px;
	text-align: center;
}
html {
	/*height: 100%;*/
	min-height: 100%;
}
table {
	width: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: verdana;
	min-height: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+40,b3bead+100;Wax+3D+%233 */
	background: rgb(252,255,244); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgb(252,255,244) 0%, rgb(223,229,215) 40%, rgb(179,190,173) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgb(252,255,244) 0%,rgb(223,229,215) 40%,rgb(179,190,173) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgb(252,255,244) 0%,rgb(223,229,215) 40%,rgb(179,190,173) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 12px;
}

tr.table_head {
        background-color: #414040;
        color: #ffffff;
}

tr.table_row_a {
	background-color: #d0d2d2;
}

.profilebar {
	padding: 5px;
	font-size: 11px;
	background-color: #000000;
	color: #ffffff;
	text-align: right;
}

.profilebar a {
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
}

.header {
	border-top: 10px #f9c701 solid;
	border-bottom: 8px #747366 solid;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 10px;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,2c2c2c+38,2c2c2c+38,2c2c2c+39,000000+79,111111+86,1c1c1c+97,131313+100 */
	background: rgb(76,76,76); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(44,44,44,1) 38%, rgba(44,44,44,1) 38%, rgba(44,44,44,1) 39%, rgba(0,0,0,1) 79%, rgba(17,17,17,1) 86%, rgba(28,28,28,1) 97%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(44,44,44,1) 38%,rgba(44,44,44,1) 38%,rgba(44,44,44,1) 39%,rgba(0,0,0,1) 79%,rgba(17,17,17,1) 86%,rgba(28,28,28,1) 97%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(44,44,44,1) 38%,rgba(44,44,44,1) 38%,rgba(44,44,44,1) 39%,rgba(0,0,0,1) 79%,rgba(17,17,17,1) 86%,rgba(28,28,28,1) 97%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.header_text {
	color: #ffffff;
	font-size: 45px;
	text-shadow: 3px 2px #444444;
}
.header_sub_text {
	color: #ffffff;
	font-size: 17px;
	text-shadow: 3px 2px #444444;
}
.header a, .header_text a, .header_sub_text a {
	text-decoration: none;
}
.center {
	width: 100%;
	text-align: center;
}

.low_pri {
	display: none;
}

.lowest_pri {
	display: none;
}

h1, h2, h3 {
	margin: 0;
	padding-top: 0;
	padding-bottom: 15px;
}
.front_info {
	text-align: left; 
	display: block; 
	padding: 25px;
	margin: 2%;
}
form {
	display: block;
	padding: 0;
	margin: 0;
}
.icon {
        margin: 0 .3em;
        padding: 0 !important;
        width: 16px;
        height: 16px;
        background-image: url('/img/sprites.png') !important;
        background-repeat: no-repeat !important;
        background-position: top left !important;
}
.icon_edit {
        background-position: 0 -512px !important;
}
.icon_what {
        background-position: 0 -368px !important;
}
.icon_warn {
        background-position: 0 -2000px !important;
}
.icon_show {
        background-position: 0 -1552px !important;
}
.icon_free {
        background-position: 0 -1135px !important;
}
.icon_add {
        background-position: 0 -1216px !important;
}
.icon_yes {
        background-position: 0 -2160px !important;
}
.icon_delete {
        background-position: 0 -432px !important;
}
.icon_details {
        background-position: 0 -48px !important;
}
.icon_db {
        background-position: 0 -1872px !important;
}
.icon_events {
        background-position: 0 -576px !important;
}
.icon_reports {
        background-position: 0 -992px !important;
}
.icon_tools {
        background-position: 0 -1280px !important;
}
.icon_key {
        background-position: 0 -944px !important;
}

.block_button {
        display: block;
        width: 100%;
        padding-top: 11px;
        padding-bottom: 11px;
        text-align: center;
	background-color: #f04c23;
	padding: 15px;
	font-size: 20px;
	border: 1px #ae3112 solid;
	border-radius: 5px;
	color: #ffffff;
	display: block;
	margin-top: 5px;
	cursor: pointer;
 }

.block_button:hover {
	background-color: #ea2f00;
	border: 1px #ff3300 solid;
}

.block_frame {
	display: block;
	border: 2px #efffef solid;
	background-color: #eeeeee;
	margin: 5px;
	padding: 15px;
}
.block_info {
	display: block;
	border-bottom: 1px #aaaaea solid;
}
.block_warning {
	display: block;
	border-bottom: 2px #ff0000 solid;
	margin-bottom: 15px;
	color: #ff3333;
}
.block_title {
	display: block;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 2px #aaaaea solid;
	margin-bottom: 10px;
}
.block_input, .block_info {
	display: block;
	padding-top: 5px;
	padding-bottom: 7px;
}
.block_input input, .block_input select, .block_input textarea {
	display: block;
	width: 100%;
	padding-top: 4px;
	padding-bottom: 4px;
}
.block_input textarea {
	height: 80px;
	font-size: 18x;
}
.block_info input[type=checkbox] {
	transform: scale(2);
	-webkit-transform: scale(2);
	margin-right: 10px;
}
input, select {
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 15px;
}

a {
	text-decoration: none;
}

a.button {
	text-decoration: none;
	background-color: #f04c23;
	padding: 15px;
	font-size: 20px;
	border: 1px #ae3112 solid;
	border-radius: 5px;
	color: #ffffff;
	display: block;
	margin-top: 5px;
}

a.button:hover {
	background-color: #ea2f00;
	border: 1px #ff3300 solid;
}


div#bannerframe, div#headertext_container {
	display: none;
}
div#header {
	width: 100%;
	top: 0;
	display: block;
	background-color: #ffffff;
	border-bottom: 1px #dfdfdf solid;
	margin-bottom: 8px;
}
img#headerlogo_img {
	width: 100%;
	max-width: 250px;
	margin: 5px;
}

.site-footer {
	border-top: 3px #f04c23 solid;
	display: block;
	background-color: #000000;
	text-align: center;
	position: fixed;
	bottom: 0;
	width: 100%;

}

div#footer_text {
	color: #ffffff;
	font-size: 12px;
	padding: 10px;
}

div#content {
	padding-bottom: 80px;
	max-width: 850px;
	margin: 0 auto;
}

form#login {
	font-size: 20px;
	margin-top: 60px;
	margin-bottom: 40px;
}
form#login input {
	font-size: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 450px;
	display: block;
}

@media screen and (min-width: 500px) {

	div#content {
		max-width: 1100px;
		width: 80%;
		margin: 0 auto;
	}

	div#headerframe {
		display: flex;
		max-width: 1000px;
		width: 80%;
		margin: 0 auto;
	}
	
	div#headertext_container {
		display: inline-block;
		flex: 1;
		padding-top: 35px;
	}
	
	div#headertext {
		font-size: 20px;
		color: #000000;
		border-left: 1px #f04c23 solid;
		padding-left: 10px;
	}
	
	div#headerlogo {
		display: inline-block;
		width: 40%;
		margin-left: 5%;
		margin-right: 5%;
	}

	img#headerlogo_img {
		width: 100%;
		max-width: 250px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	div#bannerframe {
		background-image: url('/bannerbg.png');
		background-size: cover;
		display: block;
		height: 50px;
		margin-bottom: 20px;
	}
	
	div#bannerfilla {
		background-color: #f04c23;
		width: 1%;
		display: block;
		height: 3px;
		animation: animatedBackgrounda 13s ease infinite;
	}
	div#bannerfillb {
		background-color: #ffffff;
		opacity: 0;
		display: block;
		height: 47px;
		animation: animatedBackgroundb 8s ease infinite;
	}
	div#bannerfillc {
		background-color: #f04c23;
		width: 1%;
		float: right;
		display: block;
		height: 3px;
		animation: animatedBackgroundc 13s ease infinite;
	}
	
	@keyframes animatedBackgrounda {
		0%{ width: 0%; float: left; }
		79%{ width: 100%; float: left; }
		80%{ width: 100%; float: right; }
		99%{ width: 0%; float: right; }
		100%{ width: 0%; float: left; }
	}
	@keyframes animatedBackgroundb {
		0%{ opacity: 0; }
		50%{ opacity: 0.24; }
		100%{ opacity: 0; }
	}
	@keyframes animatedBackgroundc {
		0%{ width: 0%; float: right; }
		19%{ width: 100%; float: right; }
		20%{ width: 100%; float: left; }
		99%{ width: 0%; float: left; }
		100%{ width: 0%; float: right; }
	}

	td.lowest_pri {
		display: none;
	}
	td.low_pri {
		display: table-cell;
	}
}

@media screen and (min-width: 1200px) {
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #000000;
		padding-top: 15px;
		padding-bottom: 15px;
		border-top: 5px #747366 solid;
		color: #ffffff;
		font-family: verdana;
		font-size: 12px;
		text-align: center;
	}
	td.lowest_pri {
		display: table-cell;
	}
	td.low_pri {
		display: table-cell;
	}
	.square-box{
		position: relative;
		width: 15%;
		overflow: hidden;
		text-shadow: 2px 2px #444444;
		background: #f9c701;
		border: 5px #000000 solid;
		float: left;
		margin: 2%;
	}
	.square-box:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.square-content{
		position:  absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		color: white;
	}
	.square-box:hover {
		background: #151515;
		border: 5px #444444 solid;
	}
	.square-content a:hover {
		padding-bottom: 20px;
	}

	.front_info {
		text-align: left; 
		display: block; 
		padding: 25px;
		margin: 2%;
	}
	.header {
		padding-top: 20px;
		padding-bottom: 30px;
	}
}

@media screen and (min-width: 1500px) {

	.header {
		padding-top: 20px;
		padding-bottom: 30px;
	}

}

label.error {
	display: block;
	border: 2px #ff0000 dashed;
	background-color: #ffe9e9;
	color: #550000;
	padding: 4px;
	font-size: 10px;
	margin-top: 2px;
}