body {
    background-image: url("./images/paper.gif");	
} 

header {
    background-color:clear; 
    background-image: url('../images/banner.gif'); 
		background-position: 50% 25%;
		background-repeat: no-repeat;
    color:black;
    top: 5;
/*position: fixed;*/
    text-align:center;
    padding:100px;
}

/* screen sizing */
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


/* ================================================== Headings ==================================*/
h1 {
		text-align: left;
}

h2,h3 {
    text-align: left;    
}

/* ================================================== Navigation ==================================*/
/* Setup for the side menu */
.nav {
    line-height:30px;
    /*background-color:#eeeeee;*/
    height:300px;
    width:30px;
    float:left;
    padding:5px 0 0 0;	
    font-size: 14px;
}

/* ================================================== Lists ==================================*/
li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 06px;
    text-decoration: none;
    border-style: outset;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px;
    background-color: #f1f1f1;
}
/* End of menu */

/* ================================================== ==================================*/
.main {
		width: 87%; 
		height: 100%; 
		float: right; 
		padding: 0px 0px 0px 30px;
}

.login {
    background-color: lightgrey;
    width: 400px;
    height: 200px;
    padding: 10px;
    border: 5px solid navy;
    margin: 5px;
    text-align: center;
}

.new_user {
    background-color: lightgrey;
    width: 350px;
    height: 200px;
    padding: 10px;
    border: 5px solid navy;
    margin: 5px;
    text-align: center;
}
/* ================================================== Tables ==================================*/
.checkbook_summary_table{
		width: 800px;		
		text-align: left;
		font-size: 12px;
}

.checkbook_table_header{
		background-color: #3a6070;
		border-collapse: collapse;
		border: 1px solid black; 
		width: 1400px;
		color: #FFF;
}

.data_table{
		width:1400px; 
		height:448px; 
		overflow:auto;
}

.data_table_2{
		width:1200px; 
		height:548px; 
		overflow:auto;
}

.data_table_3{
		width:1400px; 
		height:300px; 
		overflow:auto;
}

.table_header{
		width:1400px; 
		height:448px; 
}

.checkbook_table{		
		border-collapse: collapse;
		border: 1px solid black; 
		width: 1400px;
		overflow: auto;		
}

.checkbook_table tr:nth-child(odd){
		background-color:#e7edf0;
		border: 1px solid black; 		
		text-align: left;
		font-size: 15px;
		padding: 0px;
		width:9%;		
}

.checkbook_table_2{		
		border-collapse: collapse;
		border: 1px solid black; 
		width: 1250px;
		overflow: auto;		
}

.checkbook_table_2 tr:nth-child(odd){
		background-color:#e7edf0;
		border: 1px solid black; 		
		text-align: left;
		font-size: 15px;
		padding: 0px;
		width:9%;		
}

.simple_table{
		background-color: #3a6070;
		border-collapse: collapse;
		border: 1px solid black; 
		width: 1200px;
		color: #FFF;
}

.simple_data_table{		
		border-collapse: collapse;
		border: 1px solid black; 
		width: 900px;
		overflow: auto;		
}
.simple_data_table2{		
        background-color:#e7edf0;
		border-collapse: collapse;
		border: 1px solid black; 
		width: 1200px;
		overflow: auto;		
}

.simple_data_table3{		
		border-collapse: collapse;
		border: 1px solid black; 
		width: 100px;
		overflow: auto;		
}
.simple_data_table tr:nth-child(odd){
		background-color:#e7edf0;
		border: 1px solid black; 		
		text-align: left;
		font-size: 15px;
		padding: 0px;
		width:16.5%;		
}



#CheckbookTable{
    border: 1px solid black;
}

/* ================================================== td ==================================*/
#td1{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:9%;
}

.td1{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:9%;
}

.td2{	
		border: 1px solid black; 
		text-align: right;
		font-size: 15px;
		padding: 1px;
		width:9%;
}
.td2A{	
		border: 1px solid black; 
		text-align: center;
		font-size: 2px;
		padding: 1px;
		width:1%;
}

.td3{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:9%;		
}

.td6_1{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:16.5%;
}

.td6_1A{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:15px;
}

.td6_4{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:14.5%;
}
.td6_4A{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:14.5%;
}
.td6_4B{	
		border: 1px solid black; 
		text-align: right;
		font-size: 15px;
		padding: 1px;
		width:14.5%;
}
.td7{	
		border: 1px solid black; 
		text-align: left;
		font-size: 15px;
		padding: 1px;
		width:15px;
}
.td7_1A{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:15px;
}
.td7_1B{	
		border: 1px solid black; 
		text-align: right;
		font-size: 15px;
		padding: 1px;
		width:15px;
}

/* ================================================== th ==================================*/
#th1{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:10%;
		/*max-width: 5px;*/
}

#th1A{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:5px;
		max-width: 2px;
}

#th1B{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:35px;
		/*max-width: 2px;*/
}
.th6_1{
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:15px;
}

.th6_2{
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:375px;
}

.th6_4{	
		border: 1px solid black; 
		text-align: center;
		font-size: 15px;
		padding: 1px;
		width:14.5%;
}

#tdHide{
		display: none;
}

/* ================================================== Imputs  ==================================*/

input[type=text]{
	padding: 5px;
	margin-top:5px;
}

input[type=text]:focus {
    background-color: lightblue;
}
input[type=password]:focus {
    background-color: lightblue;
}


input[type=submit]:hover{
	background-color: #008CBA;
    color: white;
}

input[type=button]:hover{
	background-color: #008CBA;
    color: white;
}

input[type=reset]:hover{
	background-color: #008CBA;
    color: white;
}

input[type=date]
{
	color: green;
}

/* ================================================== Buttons ==================================*/
button {
    background-color: #e7e7e7 ; /* Green #4CAF50*/
    border:solid;
    color: black;
    padding: 1px 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius:6px;
}

button.new {
    background-color: #ccc;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius:6px;
    color: black;
    /*font-family: 'Oswald';*/
    font-size: 16px;
    text-decoration: none;
    cursor: poiner;
    border:solid;    
}

button.new2{
	width:400px;
	
}

button:hover {
    background-color: #008CBA;
    color: white;
}

/* ================================================== Radio ==================================*/
.date_sel_radio{
		width: 800px;
}

/* ================================================== Forms ==================================*/


/*
form {
  background-color: #3a6070;
	border-collapse: collapse;
	border: 1px solid black; 
	width: 600px;
	color: #FFF;
}
*/

form div label {
  float: left;
  width: 30%;
  font: 1.3em Times;
  padding: 1px 1px;
}
div.form1 {
    width:800px;
}
div.form2 {
    width:400px;
}
div.dropdown_container {
    width:100px;
}
/*=============================================================================================*/
#eventsummary{
    display: none; /* Hidden by default */
}

.select {
    width: 100%;
    padding: 5px 5px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

/*========================================== Modal ============================================*/

.button-modal{
  background:coral;
  padding:1em 2em;
  color:#fff;
  border:0;
}

.button-modal:hover{
  background:#333;
}

.modal{
  display:none;
  position: fixed;
  z-index:1;
  left: 0;
  top:0;
  height: 100%;
  width:100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content{
  background-color:#f4f4f4;
  margin: 20% auto;
  width:70%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  animation-name:modalopen;
  animation-duration:1s;
}

.modal-header h2, .modal-footer h3{
  margin:0;
}

.modal-header{
  background:coral;
  padding:15px;
  color:#fff;
}

.modal-body{
  padding:10px 20px;
}

.modal-footer{
  background:coral;
  padding:10px;
  color:#fff;
  text-align: center;
}

.closeBtn{
  color:#ccc;
  float: right;
  font-size:30px;
  color:#fff;
}

.closeBtn:hover,.closeBtn:focus{
  color:#000;
  text-decoration: none;
  cursor:pointer;
}

@keyframes modalopen{
  from{ opacity: 0}
  to {opacity: 1}
}