@font-face {
	font-family: 'DINreg';
	src: url('https://fonts.tufts.edu/DIN/DINWeb.eot'); /* IE9 Compat Modes */
	src: url('https://fonts.tufts.edu/DIN/DINWeb.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('https://fonts.tufts.edu/DIN/DINWeb.woff') format('woff'); /* Modern Browsers */
	}	
	
@font-face {
	font-family: 'DINmed';
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Medium.eot'); /* IE9 Compat Modes */
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('https://fonts.tufts.edu/DIN/DINWeb-Medium.woff') format('woff'); /* Modern Browsers */
	}			
	
@font-face {
	font-family: 'DINbold';
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Bold.eot'); /* IE9 Compat Modes */
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('https://fonts.tufts.edu/DIN/DINWeb-Bold.woff') format('woff'); /* Modern Browsers */
	}					
				
@font-face {
	font-family: 'DINlight';
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Light.eot'); /* IE9 Compat Modes */
	src: url('https://fonts.tufts.edu/DIN/DINWeb-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('https://fonts.tufts.edu/DIN/DINWeb-Light.woff') format('woff'); /* Modern Browsers */
	}


html {
	width: 100%;
	position: relative;
	min-height: 100%;
	}

body {
	margin: 0 0 151px;
	padding: 0;
    background: url(images/bkrnd2.jpg) repeat-x top;
	background-repeat: repeat-x; 
	height: auto;
	width: 100%;
	font-family: Arial, sans-serif;
	font-weight: normal;
    background-color:transparent;
}

div.header {
    display: block;
    margin: 0 auto; 
	height: 93px;
	width: 600px;
	padding-left: 10px;
}

div.footer  {
    display: block;
    margin-left: auto;
    margin-right: auto; 
	height: 151px;
    width: 100%;
	padding: 0 35px;
	clear: both;
    overflow: hidden;
}

footer.img  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/footbar.jpg) repeat-x;
    background-color: transparent;
}

.banner {
	background-color: #3172ae;
	background-repeat: repeat-x;
	height: 93px;
}


.content    {
	font-family: Arial, sans-serif;
	font-size: 13pt;
	color: #787878;
	font-weight: normal;
	line-height: 1.5em;
	text-decoration: none;
	vertical-align: top;

}

h1   {
	color: #572700;
	font-size: 28px;
	top: auto; 
	vertical-align: top; 
	font-family: 'DINreg', arial, sans-serif;
	font-weight: normal;
	padding-bottom: 0px;
	padding-top: 20px;
	margin-bottom: 6px;
	margin-top: 0px;
	line-height: 31px;
}

h2   {
	color: #a85114;
	font-size: 21px;
	top: auto; 
	vertical-align: top; 
	font-family: Arial, sans-serif;
	font-weight: normal;
	line-height: 26px;
	padding-bottom: 2px;
	padding-top: 0px;
	margin-bottom: 6px;
	margin-top: 14px;
}


h3  {
	color: #3172ae;
	font-family: verdana, sans-serif;
	Font-size: 13px;
	font-weight: bold;
}

h4   {
    color: #c0311a;
	font-family: Verdana, sans-serif;
	Font-size: 13px;
	font-weight: bold;
}

h5   {
	font-size: 11pt;
	color: #6699CC;
	top: auto;
	vertical-align: top;
	font-family: Arial, sans-serif;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 4px;
	text-decoration: none;
}

h5:hover   {
	font-size: 11pt;
	color: #080808;
	top: auto;
	vertical-align: top;
	font-family: Arial, sans-serif;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 4px;
	text-decoration: none;
}	

.banner {
	background-color: #3172ae;
	background-repeat: repeat-x;
	height: 93px;
}

td.banner {
	background-color: #3172ae;
	background-repeat: repeat-x;
	height: 93px;
	padding-left: 10px;
}

h6   {
	font-size: 11px;
	color: #000000;
	top: auto;
	vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin-top: 2px;
	margin-bottom: 2px;
}		  	

img.centdisplay {
    display: block;
    padding-right: 0 !important; 
}

div.menu  {
    display: block;
    background: #333333;
    padding-top: 10px;
    margin: 0 auto;
    margin-bottom: 12px;
    width: 600px;
}

div.menu a:hover {
text-decoration: underline;	
}

div.footer  {
    display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 151px;
}

td.footer {
	height: auto;
	width: auto;
    background-color:transparent;
	padding-left: 10px;
	padding-top: 20px;
}

.footerhead {
    font-family: DINmed, Arial, sans-serif;	
    height: auto;
	width: auto;
	font-size: 16px;
	color: white;
    padding-top: 10px;
    padding-left: 30px;
}

.footertext {
	font-size: 14px;
	font-weight: normal;
	color: white;
	line-height: 1.5em;
    padding-bottom: 10px;
    padding-left: 30px;
	text-decoration: none; 
}

.footertext a { 
	color: white;
	background-color: #6d6f72;
	text-decoration: underline; 
} 

.footertext a:hover { 
	color: #f1f1f1;
	background-color: #6d6f72;
	text-decoration: underline; 
} 


.button  {
    display: block;
    font-family: Arial, sans-serif;	
	text-decoration: none;	
	border:1px solid #666666;
	border-radius: 4px;
	font-size: 16px;
	padding: 13px;
	color: #000000;
    background-color: #f1f1f2;
    text-decoration: none;
}


.button:hover   {
    background: #525356;
    color: white;
}


.folio     {
	height: 42px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	background-color: #333333;
	color: #ffffff;
	vertical-align:middle ;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 10px;
}

.folio a:hover    {
	font-weight: normal;
	color: #f4f4f4;
}

.tip     {
	font-family: Arial, sans-serif;
	color: #3172ae;
	font-size: 13px;
	font-weight: normal;
	background-color: #ffffff;
	vertical-align: middle;
	text-decoration: none;
	margin-top: 100px;
}

.tip a:hover    {
	font-weight: normal;
	color: #333333;
}

.floatleft {
	float: left; margin: 0px 5px 5px 0px; 

}

.floatright {
	float: right; margin: 0px 0px 5px 5px; 

}
	
.steps   {
	color: #3172ae;
	font-family: verdana, sans-serif;
	Font-size: 13px;
	font-weight: bold;
}
.error   {
	color: #c0311a;
	font-family: verdana, sans-serif;
	Font-size: 13px;
	font-weight: bold;
}

.table-main     {
    width: 600px; 
    height: 75%;
    border: 0px;
    line-height: 22px;
}

.table-main li {
    margin-top: 4px;
    margin-bottom: 4px;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

input[value="Login"], input[value="Update"], input[value="Generate Password"], input[value="Logout"],input[value="Lookup"], input[value="Reset Password"], input[value="Next"] {
    float: left;
	font-family: arial, sans-serif !important;
	-webkit-border-radius:4px !important;
	-moz-border-radius:4px !important;
	border-radius:4px !important;
	padding: 10px 15px !important;
	color: white !important;
	font-size: 16px !important;
	border: 1px solid #255683 !important;
	background: #3172ae !important;  /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: -moz-linear-gradient(top,  #357abb 0%, #3172ae 100%) !important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#357abb), color-stop(100%,#3172ae)) !important; /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #357abb 0%,#3172ae 100%) !important; /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #357abb 0%,#3172ae 100%) !important; /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #357abb 0%,#3172ae 100%) !important; /* IE10+ */
	background: linear-gradient(to bottom,  #357abb 0%,#3172ae 100%) !important; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#357abb', endColorstr='#3172ae',GradientType=0 ) !important; /* IE6-8 */
}

input[value="Login"]:hover, input[value="Lookup"]:hover,input[value="Generate Password"]:hover,input[value="Update"]:hover, input[value="Logout"]:hover, input[value="Reset Password"]:hover, input[value="Next"]:hover {
    background: #525356 !important;
    border: 1px solid #525356 !important;
}



@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

html, body {
width: 100%;
}

img.centdisplay {
padding-left: 10px !important;
padding-right: 0 !important;
margin-left: 0;
}

div.menu {
margin-bottom: 10px;
width: 100%;
}

.folio {
line-height: 25px;
display: block;
}

.table-main {
width: 100%;
line-height: 26px;
}

.table-main table {
width: 300px;
}

.table-main td {
width: 300px !important;
padding: 0 !important;
}

.table-main form td {
padding: 5px !important;
}

.table-main a {
margin-bottom: 15px;
}

.table-main br {
display: none;
}

h1 {
padding-top: 0;
margin-bottom: 15px;
}

.tip {
margin-top: 20px;
}

div.footer {
padding: 0;
}

div.footer p {
padding-left: 10px;
}


}