/* Below line is used for online Google font */
/* @import url(http://fonts.googleapis.com/css?family=Droid+Serif); */
h2{
text-align: center;
font-size: 24px;
}
hr{
margin-bottom: 30px;
}
div.container{
width: 99%;   /*1020px; */
/* height: 94%; /*450px; */
margin:5px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 55px 40px;
background-color:  rgba(187, 255, 184, 0.65); 
border: 15px solid yellow;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}


input password,[type=password],[type=textUcase] {
background-color: white;
height: 21px;
border-radius: 5px;
padding-left: 4px;
margin-bottom: 2px;
margin-top: 1px;
box-shadow: 0 0 5px #8d8e4c;
border: 1px solid #149ea2;
color: #4f4f4f;
font-size: 12px;
font-weight: bold;
}

input text,date,select,numeric,number,[type=text],[type=date],[type=select],[type=numeric],[type=number]{
background-color: white;
height: 21px;
border-radius: 5px;
padding-left: 4px;
margin-bottom: 2px;
margin-top: 1px;
box-shadow: 0 0 5px #8d8e4c;
border: 1px solid #149ea2;
color: #4f4f4f;
font-size: 12px;
font-weight: bold;
}

input [type=textarea], textarea {
background-color: white;
height: 70px;
width: 400px;
border-radius: 5px;
padding-left: 4px;
margin-bottom: 2px;
margin-top: 1px;
box-shadow: 0 0 5px #8d8e4c;
border: 1px solid #149ea2;
color: #4f4f4f;
font-size: 12px;
font-weight: bold;
}



label{
color: #464646;
text-shadow: 0 1px 0 #4CAF50;
font-size: 13px;
font-weight: bold;
padding-right:10px;
}

#register {
font-size: 20px;
margin-top: 5px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}



body {
			font-size: 12px;
			color: #0a0103;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 5;
			margin: 5;
			background: #f8f8f3;
			margin-top: 1px;
		}
h3 {
			font-size: 20px;
			color: #77b513;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 5;
			margin: 5;
		}	
h4 {
			font-size: 18px;
			color: #fdf8fa;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 5;
			margin: 5;
		}
h5 {
			font-size: 13px;
			color: white;
			background-color: blue;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 5;
			margin: 5;
		}		
		


textarea:focus {
	background-color: #fffa82; /*#f1f8a4; */
	font-size: 1em;
	font-weight: bold;
	font-family: Verdana;
	border: 1px solid black;
}
select:focus {
	background-color: #fffa82; /*#f1f8a4; */
	font-size: 1em;
	font-weight: bold;
	font-family: Verdana;
	border: 1px solid black;
}

/* Style the submit button with a specific background color etc */
input[type=submit],[type=button] {
    background-color: #054943;
    color: white;
    padding: 1px 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width:100px;
	height: 25px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #ffdd57; /* #45a049; */
	color: black;
	font-weight: bold;
	width:100px;
	height:25px;
}

input[type=button]:hover {
    background-color: #ffdd57; /* #45a049; */
	color: black;
	font-weight: bold;
	width:100px;
	height:25px;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #ddddd9;
	padding: 2px;
	border:4px solid #ddddd9;
	box-shadow: 0 0 20px;
} 

input:focus {
    background-color: #fffa82; /*#f1fdde; /*#f1f8a4; */
	font-size: 1em;
	font-weight: bold;
	font-family: Verdana;
	border: 1px solid black;
}

/* *************************************************************************************** */

<style type="text/css">
		body {
			font-size: 14px;
			color: #343d44;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 0;
			margin: 0;
		}
		table {
			margin: auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 12px;
		}

		h1 {
			margin: 25px auto 0;
			text-align: center;
			/*text-transform: uppercase; */
			font-size: 17px;
			background: bisque;
		}

		table td {
			transition: all .5s;
		}
		
		.wrapper{
			max-height: 90%;
			max-width: 100%;
			overflow: auto;
		}
		
		/* Table */
		.data-table {
			border-collapse: collapse;
			font-size: 12px;
			min-width: 80%; /*537px; */
			max-width: 98%;
			background-color: #d2e0df;
			color: white;
			font-weight: bold;
			border:4px solid #6d9696;
			/*box-shadow: 0 0 10px;
			border-radius: 5px; */
		}
		

		.data-table th, 
		.data-table td {
			border: 1px solid #263f66;
			padding: 2px 5px;
		}
		.data-table caption {
			margin: 7px;
		}

		/* Table Header */
		.data-table thead th {
			background-color: teal;
			color: #FFFFFF;
			border-color: #3e5d76 !important;
			/*text-transform: uppercase; */
			text-align: left;
		}

		/* Table Body */
		.data-table tbody td {
			color: #353535;
		}
		.data-table tbody td:first-child,
		.data-table tbody td:nth-child(4),
		.data-table tbody td:last-child {
			text-align: left;
		}

		.data-table tbody tr:nth-child(odd) td {
			background-color: #f5f6f7 ; /*#dee1e3; */
			font-weight: bold;
		}
		.data-table tbody tr:hover td {
			background-color: #b9dfe1; /* #f7f8c1; */
			/*border-color: #6ea1cc; */
		}

		/* Table Footer */
		.data-table tfoot th {
			background-color: #009688;
			text-align: right;
		}
		.data-table tfoot th:first-child {
			text-align: left;
		}
		/*
		.data-table tbody td:empty
		{
			background-color: #ffcccc;
		}
		*/
	</style>