.tabscontainer {
        display: block;
        width: 100%;
}

/* Tabs container */
.r-tabs {
        position: relative;
        background-color: #194e60;
        border-top: 1px solid #194e60;
        border-right: 1px solid #194e60;
        border-left: 1px solid #194e60;
        border-bottom: 4px solid #194e60;
        border-radius: 4px;
}

/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
        position: relative;
        background-color: #194e60;
}
/* Tab anchor */
.r-tabs .r-tabs-nav .r-tabs-anchor {
        display: inline-block;
        padding: 10px 12px;
        text-decoration: none;
        text-shadow: 0 1px rgba(0, 0, 0, 0.4);
        font-size: 14px;
        font-weight: bold;
        color: #fff;
}

/* Disabled tab */
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
        opacity: 0.5;
}

/* Active state tab anchor */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
        color: #194e60;
        text-shadow: none;
        background-color: white;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
}

/* Tab panel */
.r-tabs .r-tabs-panel {
        background-color: white;
        border-bottom: 4px solid white;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        padding: 0;
}

/* Accordion anchor */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
        display: block;
        padding: 10px;
        background-color: #194e60;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px rgba(0, 0, 0, 0.4);
        font-size: 14px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
}

/* Active accordion anchor */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
        background-color: #fff;
        color: #194e60;
        text-shadow: none;
}

/* Disabled accordion button */
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
        opacity: 0.5;
}



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: 18px;
	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%;
	background-color: #eff1ef;
}

th {
	padding: 6px;
}
thead {
        background-color: #414040;
        color: #ffffff;
	text-align: left;
}

tr:hover {
	background-color: #f2f2f2;
	color: #000000;
}

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;
 }


.block_title {
        font-size: 18px;
        font-weight: bold;
        background-color: #cacaff;
        padding: 8px;
        margin-bottom: 20px;
}
.block_warning {
        border: 2px #661111 solid;
        background-color: #e35757;
        color: #ffffff;
        padding: 10px;
        margin: 10px;
}

.block_info {
        border: 2px #111166 solid;
        background-color: #5757e3;
        color: #ffffff;
        padding: 10px;
        margin: 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;
}

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

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

        .r-tabs .r-tabs-panel {
                padding: 10px;
        }

	div#content {
		max-width: 1000px;
		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: 14px;
		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;
}