/*

Color List:  http://paletton.com/#uid=73d0u0kllll11Skbbuzvvc7XW2U


6E82A1

*/


header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

/*
Ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
*/
* {
    box-sizing: border-box;
}

/*
We should change the design when the width gets larger than 768px. This will make our design Mobile First.
For mobile phones: */
[class*="coll-"] {
    width: 100%;
}


body {
	background-color: #E1E3E8;
	font-family: Tahoma, Geneva, sans-serif;
}

header {
	background-color: #900;
	color: #E1E3E8;
	border-radius: 3px;
	margin: 0;
	border-bottom: 1px solid #fff;
}

header h1 {
	font-size: 20px;
	margin: 0;
	padding: 2px 5px;
}

/*
nav {
	margin: 0;
	padding: 0;
}

nav ul li {
	display: inline-block;
	margin: 1px 3px;
}

nav ul li a {
	background-color: #613E02;
	color: #FFFCF7;
	border-radius: 7px;
	font-size: 1.5em;
	text-decoration: none;
	padding: 3px 5px; 
	margin: 3px;
	width: auto;
	border: 1px solid #613E02;
}

nav ul li a:hover {
	background-color: #FFFCF7;
	color: #613E02;
	border: 1px solid #613E02;
}
*/

#main_window {
	margin: 0 0 0 5px;
}

#ff {
	border-radius: 7px;
	border: 1px solid #044907;
	width: auto;
	display: inline-block;
	box-shadow: 10px 10px 5px #888888;
	background-color: #c9ffd3;
}

fieldset legend, p {
	font-size: 1.2em;
}

#ff legend {
	color: #044907;
	font-weight: bold;
}

input[type=text], input[type=password], input[type=submit], input[type=button], select {
	font-size: .9em;
}

input[type=submit], input[type=button] {
	font-weight: bold;
	background-color: #071D40;
	border: 1px solid #00060F;
	color: #DEE6E4;
	border-radius: 7px;
	font-family: Arial, Helvetica, sans-serif
}

input[type=submit]:hover, input[type=button]:hover {
	background-color: #dee6e4;
	color: #071d40;
}

a {
	text-decoration: none;
	color: #00f;
}

a:hover {
	color: #613E02;
}

.sequence_up {
	/*background-image: url("images/arrows/broad_down_green_sm.jpg");*/
}

.sequence_down {
	/*background-image: url("images/arrows/broad_up_blue_sm.jpg");*/
}

.sequence_up,
.sequence_down {
	color:transparent !important;
	text-shadow:none !important;
	border:none !important;
	box-shadow:none !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: pointer;
	width: 25px;
	height: 27px;
/*	box-shadow: none;
	padding: 0;
	border: transparent; */
	
}


[class*="coll-"] {
	float: left;
	padding: 5px 10px;
	/* border: 1px solid red; */
}

.row::after {
	content: "";
	clear: both;
	display: block;
}

.req, .error {
	color: #f00;
	font-weight: bold;
}

.error {
	font-size: .7em;
}
	
.rsc_checkbox {
	transform: scale(1.5);
	color: #00060F;
}

.alert {
	color: #f00;
	border-radius: 5px;
	padding: 5px;
	background-color: #fdffbc;
}

/*
If the width property is set to 100%, the image will be responsive and scale up and down
Example: <img src="img_chania.jpg" width="460" height="345">  --still use the width/height!
*/

img {
    width: 100%;
    height: auto;
}

/*
For different image sizes for different devices, see
http://www.w3schools.com/css/css_rwd_images.asp
*/

/*
If the video width property is set to 100%, the video player will be responsive and scale up and down
*/
video {
    width: 100%;
    height: auto;
}
	
.mrpen_tbl {
	width: 100%;
}
	
.mrpen_tbl caption {
	background-color: #036;
	color: #fff;
	border-collapse: collapse;
	border: none;
	text-align: left;
	padding: 3px;
	font-weight: bold;
	font-size: 1em;
	caption-side: top;
}
	
.mrpen_tbl th,
.mrpen_tbl td,
.mrpen_child_tbl th,
.mrpen_child_tbl td,
.mrpen_tbl input,
.mrpen_child_tbl input,
.mrpen_tbl select,
.mrpen_child_tbl select, 
.mrpen_tbl select option,
.mrpen_child_tbl select option {
	font-size: 1em;
}

.mrpen_tbl,
.mrpen_child_tbl {
	font-family: Tahoma, Geneva, sans-serif;
	color: #036;
	font-size: 12px;
	background-color: #fff;
}

.mrpen_tbl {
	margin: 20px 5px;
	border: 1px solid #999;
	border-collapse: collapse;
}

.mrpen_child_tbl {
	border-left: 1px solid #999;
	border-collapse: collapse;
	border-right: 1px solid #999;
	border-top: none;
	border-bottom: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.mrpen_tbl input,
.mrpen_child_tbl input,
.mrpen_tbl select,
.mrpen_child_tbl select, 
.mrpen_tbl select option,
.mrpen_child_tbl select option {
	color: #036;
	border: 1px solid #999;
	background-color: #f2f2f2;
	width: auto;
}

.mrpen_tbl th,
.mrpen_tbl td,
.mrpen_child_tbl td {
	padding: 1px 3px;
	border: 1px solid #999;
	border-collapse: collapse;
}


.mrpen_child_tbl th {
	border-top: none;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-collapse: collapse;
}

#disc_tbl {
	width: 80%;
	}
#disc_tbl	input[type=text],
#plan_amt_tbl	input[type=text],
#disc_tbl	input[type=number],
#plan_amt_tbl	input[type=number] {
	width: 5em;
}
	
.rsc_pagination a {
	border: 1px solid #AA8139;
	border-radius: 5px;
	margin: 0 3px 0 3px;
	padding: 2px 5px;
	background-color: #f2f2f2;
}

.rsc_active_page {
	border: 1px solid #999;
	border-radius: 5px;
	margin: 0 3px 0 3px;
	padding: 2px 5px;
	color: #999;
	background-color: #f2f2f2;
}


/*
However, we want to use a responsive grid-view with 12 columns, to have more control over the web page.
First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.
Then we make one class for each of the 12 columns, class="coll-" and a number defining how many columns the section should span
*/

/*
We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
*/

@media only screen and (min-width: 600px) {
	/* For tablets: */
	.coll-m-1 {width: 8.33%;}
	.coll-m-2 {width: 16.66%;}
	.coll-m-3 {width: 25%;}
	.coll-m-4 {width: 33.33%;}
	.coll-m-5 {width: 41.66%;}
	.coll-m-6 {width: 50%;}
	.coll-m-7 {width: 58.33%;}
	.coll-m-8 {width: 66.66%;}
	.coll-m-9 {width: 75%;}
	.coll-m-10 {width: 83.33%;}
	.coll-m-11 {width: 91.66%;}
	.coll-m-12 {width: 100%;}
	
	fieldset legend, p {
		font-size: 1.75em;
	}
	
	input[type=text],
	input[type=number],
	input[type=password],
	input[type=submit],
	input[type=button]
	select {
		font-size: 1em;
	}
	
	.rsc_checkbox {
		transform: scale(2);
	}
	
	.req, .error {
		font-size: .9em;
	}
	
	.mrpen_tbl {
		width: 90%;
	}
	
	.mrpen_tbl th,
	.mrpen_tbl td,
	.mrpen_child_tbl th,
	.mrpen_child_tbl td,
	.mrpen_tbl input,
	.mrpen_child_tbl input,
	.mrpen_tbl select,
	.mrpen_child_tbl select, 
	.mrpen_tbl select option,
	.mrpen_child_tbl select option {
		font-size: 1.7em;
	}
	
	#billing_tbl {
		width: 100%;
	}
	
	#disc_tbl {
	width: 70%;
	}
	
	#plan_amt_tbl {
		width: 80%;
	}
	
	#email {
		width: 450px;
	}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */ 
	.coll-1 {width: 8.33%;}
	.coll-2 {width: 16.66%;}
	.coll-3 {width: 25%;}
	.coll-4 {width: 33.33%;}
	.coll-5 {width: 41.66%;}
	.coll-6 {width: 50%;}
	.coll-7 {width: 58.33%;}
	.coll-8 {width: 66.66%;}
	.coll-9 {width: 75%;}
	.coll-10 {width: 83.33%;}
	.coll-11 {width: 91.66%;}
	.coll-12 {width: 100%;}

	nav ul li a, p, fieldset legend {
		font-size: .9em;
	}
	
	input[type=text],
	input[type=number],
	input[type=password],
	select {
		font-size: .9em;
	}
	
	#email {
		width: 225px;
	}
	
	input[type=submit],
	input[type=button] {
		font-size: 1em;
	}
	
	.rsc_checkbox {
		transform: scale(1.2);
	}
	
	.req, .error {
		font-size: 1em;
	}
	
	.mrpen_tbl {
		width: 60%;
	}
	
	#billing_tbl {
		width: 60%;
	}
	
	#disc_tbl {
		width: 25%;
	}
	
	#plan_amt_tbl {
		width: 35%;
	}
	
	.mrpen_tbl th,
	.mrpen_tbl td,
	.mrpen_child_tbl th,
	.mrpen_child_tbl td,
	.mrpen_tbl input,
	.mrpen_child_tbl input,
	.mrpen_tbl select,
	.mrpen_child_tbl select, 
	.mrpen_tbl select option,
	.mrpen_child_tbl select option {
		font-size: 12px;
	}
}

.fam_form p {
	margin: 10px 0 0 0;
	/*padding: 0 2px;*/
}


/*
USAGE EXAMPLE

For desktop:
The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:
The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

<div class="row">
<div class="coll-3 coll-m-3">...</div>
<div class="coll-6 coll-m-9">...</div>
<div class="coll-3 coll-m-12">...</div>
</div>
*/


.reports {
	color: #00f;
	font-weight: bold;
}

.rpt_body,
.rpt_body_events,
.rpt_forms {
	background-color: #fff;
}

.rpt_body article {
	width: 650px;
	margin: auto;
}

.rpt_body h1, h2, h3 {
	margin: 10px auto;
	text-align: center;
	color: #000;
}

.rpt_body_events h1, h2, h3 {
	margin: 10px auto;
	text-align: center;
	color: #000;
}

.rpt_forms h1, h2, h3 {
	margin: 10px auto;
	text-align: center;
	color: #000;
}

.rpt_body article h3 {
	text-align: left;
	margin: 20px 0px 10px 25px;
	color: #000;
}

.rpt_body article p {
	text-align: left;
	margin: 10px 0px 0px 75px;
}