body { font-family: Arial; font-size: 13px; line-height: 17px; }
strong { font-weight: bold;}

a:link { color: #0066CC; text-decoration: none !important;} 
a:active { color: #0066CC;} 
a:visited { color: #0066CC;} 
a:hover { color: #0066CC; text-decoration: underline !important;} 

.alertBox {font-family:  Arial; text-align: center; border: 1px solid; border-color: #333333; margin-top: 10px; margin-bottom: 5px;  display: block; width: 95%;}
.alertBoxHeader {font-family:  Arial; color: #FFFFFF; font-weight: normal; background-color: #3366CC; font-size:30px; padding: 5px; text-transform: uppercase;}
.alertBoxText { font-family:  Arial; color: #222; background-color: #DEDEDE; padding: 10px; font-size: 13px;}

#header {
	min-height: 90px;
	height: 90px;
	background: #252C6D;
}

#header #title { display: inline; float: left; padding-left: 20px; width: 300px; text-align: left; line-height: 90px; height: 90px; min-height:90px; }
#header #title h1 { color: #FFF; font-size: 22px; font-family: Arial; }

#header #mainNav { display: inline; float: right; text-align: right; font-family: Arial; height: 90px; min-height: 90px; }
#header #mainNav ul { display: inline; }
#header #mainNav li { float: left; }
#header #mainNav a { text-decoration: none; font-size: 13px; display: block; width: 125px; line-height:35px; margin-top:55px; background-color: #ebf1f6; color: #555; text-align:center; margin-right: 10px; border-top-right-radius:0.75em; border-top-left-radius:0.75em; }
#header #mainNav a:hover { color: #FFF; background-color: #555; }

body#navigation a#navNavigation, a#navReporting, body#pages a#navPages, body#commerce a#navCommerce, body#home { color: #FFF; background-color: #555; }

#body { margin-top: 20px;  min-height: 100px; display: block;  width: 100%; }

#body #sideNav 
{
   float: left; display: inline; width: 200px;  padding: 10px; margin-bottom: 20px; text-align: left; margin-left: 20px; min-height: 50px;
   background-color:#72A7E5;
   border-radius:0.5em;
}

#body #sideNav ul {}
#body #sideNav h2 { font-family:Arial; font-size: 16px; color:#333; font-weight: bold; padding-bottom: 20px; }
#body #sideNav li { display: block; }
#body #sideNav li a { background-image: url('../img/icons/arrow_black.gif'); background-position: left; background-repeat: no-repeat; padding-left: 20px; width: 100%; text-align: left; height: 20px; min-height:20px; line-height:20px; font-family: Arial; font-size: 13px; text-decoration: none; color: #FFF; }
#body #sideNav li a:hover { width: 100%; text-align: left; height: 20px; min-height:20px; line-height:20px; font-family: Arial; font-size: 13px; text-decoration: underline; color: #FFF; }

#body #content { padding-left: 260px;  display: block; text-align: left; padding-right: 20px;  }
#body #content p { line-height: 20px; font-size: 13px; font-family: Arial; color:#333; padding-bottom:20px; }
#body #content h1 { font-size: 30px;  font-family: Arial; color: #99B5CD; padding-bottom: 10px; border-bottom: solid 1px #999; margin-bottom: 10px;}
#body #content h2 { font-size: 22px; font-family: Arial; color: #999; padding-bottom: 10px;}
#body #content h3 { font-size: 18px; font-family: Arial; font-weight: normal; padding-top:10px; color: #72A7E5; padding-bottom: 10px;}

#body #modal { float: left; display: block; text-align: center;  padding-bottom: 20px; width: 100%; }
#body #modal #text {
        margin:0 auto; width: 600px; height:auto; min-height:315px; padding: 20px 10px 10px 10px;  border: solid 1px #999; text-align: left;  
        border-radius:2em;
 }
 
 #text p {text-align: left;}
 
#body #modal #text p { line-height: 20px; font-size: 13px; font-family: Arial; color:#333; padding-bottom:20px; }
#body #modal #text h1 { font-size: 30px;  font-family: Arial; color: #99B5CD; padding-bottom: 10px; border-bottom: solid 1px #1e5799; margin-bottom: 10px; text-align:center;}
#body #modal #text h2 { font-size: 22px; font-family: Arial; color: #999; padding-bottom: 10px;}

.clear { clear: both; }

#footer 
{
    line-height: 25px;
    min-height: 50px;
    height: 50px;
    background-color: #f0f0e1;
    padding: 10px;
} 

#footer h2 { font-family:Arial; font-size: 16px; color:#333; padding-bottom: 10px; }

#footer div.copyright 
{
    width: 30%;
    text-align:left;
    line-height: 20px;
    font-size: 11px;
    font-family: Arial;
    color: #333;
    margin: 0 auto;
    text-align: center;
}

.footer_logos {
    float: right;
    width: 353px;
    height: 65px;
    margin-right: 3%;
    margin-top: 10px;
}

#optionBar 
{
    line-height: 25px;
    background-color: #000;
    height: 25px;
    min-height:25px;
    text-align: right;
    padding: 0 10px 0 0;
    color: #FFFFFF;
}

#optionBar p { font-family: Arial; font-size: 11px; }
#optionBar a { color: #FFF; text-decoration: underline; }

/* Forms */

dl { display: block; overflow: auto;  padding-top:10px; font-family: Arial;}
dt { width:30%; float:left; text-align:left; margin-top:5px; padding-left:20px; }
dd { float:left; width:64%; margin: 0 0 0.8em 0.35em; }
label { font-size: 15px; font-weight: bold; color:#666; }
.error { font-style:italic; color:#CC0000; }
.inputForm { border: solid 1px #999; padding: 5px 5px 5px 7px; margin-bottom: 5px; }
.hint { font-family: Arial; font-size: 11px; color: #666; }

table.legend td {font-family: Arial; font-size: 13px; color: #FFFFFF; vertical-align: top; padding-bottom: 10px;}
table.legend td.icon { width: 15%;}

a.options { color:#1e5799; font-size: 13px;}

/* Base button */
/* Base button styles (for both .button and .button-sm) */
.button,
.button-sm {
	display: inline-block;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	border-radius: 4px;
	background-color: #0e6ebb;
	color: #ffffff !important;
	cursor: pointer;
	transition: background-color .2s ease, transform .1s ease;
	border: none;
	text-align: center;
}

/* Size variants */
.button {
	font-size: 13px;
	padding: 6px 18px;
}

.button-sm {
	font-size: 11px;
	padding: 3px 10px;
}

/* When applied to TD cells */
td.button,
td.button-sm {
	padding: 0; /* remove default cell padding */
}

	/* Links inside any button container */
	.button a,
	.button-sm a,
	td.button a,
	td.button-sm a,
	td.button a:link,
	td.button-sm a:link,
	td.button a:visited,
	td.button-sm a:visited {
		display: block;
		color: #ffffff !important;
		text-decoration: none !important;
	}

		/* Hover / active on the button cell or anchor */
		.button:hover,
		.button-sm:hover,
		td.button:hover,
		td.button-sm:hover,
		td.button a:hover,
		td.button-sm a:hover {
			background-color: #0a5da0;
		}

		.button:active,
		.button-sm:active,
		td.button:active,
		td.button-sm:active,
		td.button a:active,
		td.button-sm a:active {
			transform: translateY(1px);
		}



a.button2 {
	background-color:#0e6ebb;
	border: none !important;
	display:inline-block;
	color:#FFFFFF;
	font-family:Arial;
	font-size:13px;
	padding:5px 20px;
	text-decoration:none;
	text-transform: uppercase;
	float: left;
	margin-bottom: 10px;
}
a.button2:hover {
	background-color:#999999;
}
a.button2:active {
	position:relative;
	top:1px;
}

a.button3 {
	background-color:#0e6ebb;
	border: none !important;
	display:inline-block;
	color:#FFFFFF;
	font-family:Arial;
	font-size:13px;
	padding:5px 20px;
	text-decoration:none;
	text-transform: uppercase;
	float: right;
	margin-bottom: 10px;
}
a.button3:hover {
	background-color:#999999;
}
a.button3:active {
	position:relative;
	top:1px;
}

a.buttonRed {
	background-color:red;
	border:none !important;
	display:inline-block;
	color:#FFFFFF;
	font-family:Arial;
	font-size:13px;
	padding:5px 20px;
	text-decoration:none;
	text-transform: uppercase;
	float: left;
	margin-bottom: 10px;
	margin-right: 30px;
}
a.buttonRed:hover {
	background-color:#999999;
}
a.buttonRed:active {
	position:relative;
	top:1px;
}

a.buttonGreen {
	background-color:green;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#FFFFFF;
	font-family:Arial;
	font-size:13px;
	padding:5px 20px;
	text-decoration:none;
	text-transform: uppercase;
	float: left;
	margin-bottom: 10px;
}
a.buttonGreen:hover {
	background-color:#999999;
}
a.buttonGreen:active {
	position:relative;
	top:1px;
}

div.alertBox { display: block;  width: auto; background-color: #FCFCC2; padding: 5px; margin-bottom: 10px; text-align: center; }
#body .alertBox p, #body #modal #text .alertBox p {font-family: Arial; font-size: 11px; line-height: 20px; margin: 0px; padding: 0px; color: #CC0000;  }

div.infoBox { display: block;  width: auto; background-color: #DEDEDE; padding: 5px; margin-bottom: 20px; text-align: center; }
div.infoBox p {font-family: Arial; font-size: 11px; line-height: 14px; margin: 0px; padding: 0px; color: #333;  }

.validate {font-size: 11px; color:#CC0000; }

.gridView { font-family: Arial; font-size: 13px; }
.gridView td { padding: 5px; color: #fff; }
.gridView2 { font-family: Arial; font-size: 13px; }
.gridView2 td { padding: 5px; color: #000; }
.dark { color: #666; font-weight: bold;}

div.container { width: 100%; float: left; }
div.container div.left { float: left; width: 59%; display: block; border: solid 1px #ddd; border-radius: 15px; padding-bottom: 20px; margin-bottom: 20px; }
div.container div.right { float: right; width: 39%; display: block; border: solid 1px #ddd; border-radius: 15px; }

.left_container {width: 95%; margin: 0 auto;}
.right_container {width: 95%; margin: 0 auto;}

div.left h3 {text-align: center; font-size: 20px;}
div.right h3 {text-align: center;}

div.left h4 {text-align: center; font-size: 20px;}
div.right h4 {text-align: center;}

table.paging { width: 100%; padding:5px; margin-top:10px; }

.recent_activity {width: 700px;
margin: 0 auto; border: solid 1px #333;}

/* Shared styling for all form controls */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background-color: #fff;
	color: #000;
}

/* Remove resize on horizontal for textarea only */
textarea {
	resize: vertical;
	min-height: 80px;
}

	/* Focus styles */
	input:focus,
	textarea:focus,
	select:focus {
		border-color: #4CB04F;
		outline: none;
		box-shadow: 0 0 4px rgba(76, 176, 79, 0.25);
	}



	/* Grid container */
/* Row: compensate for column padding */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -5px;
	margin-right: -5px;
}

/* Column gutter spacing */
[class^="col-"] {
	padding-left: 5px;
	padding-right: 5px;
	box-sizing: border-box;
}


[class^="col-"].text-right,
[class^="col-"] .text-right {
	text-align: right !important;
}

[class^="col-"].text-center,
[class^="col-"] .text-center {
	text-align: center !important;
}

[class^="col-"].text-left,
[class^="col-"] .text-left {
	text-align: left !important;
}

/* Padding Top */
.pt-sm { padding-top: 5px !important; }
.pt-md { padding-top: 12px !important; }
.pt-lg { padding-top: 20px !important; }

/* Padding Bottom */
.pb-sm { padding-bottom: 5px !important; }
.pb-md { padding-bottom: 12px !important; }
.pb-lg { padding-bottom: 20px !important; }


/* 12-column grid system */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

/* Force full width on very small screens (optional) */
@media (max-width: 600px) {
    [class^="col-"] {
        width: 100% !important;
    }
}

/* Text alignment helpers */
.text-left {
	text-align: left !important;
}

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}