* {	box-sizing: border-box; 
	margin: 0px; 
	padding: 0px;
}

body {
  	font-family: calibri,arial;
	color: black;
  	background-color: #f4f4f4;
}

div.pgmajor {
 	width: 80%;
	height: 110%;
      	margin: auto;
	border: royalblue 2px transparent;
	border-radius: 10px;	
	padding-top: 10px;
	padding-bottom: 10px;		
}

div.hdg {
	width:100%;
      	margin: auto;
	color: #ffffff;
    	background-color: royalblue;       	
    	min-height:37%;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
   	border-bottom: royalblue 2px solid;	
	float: left;	
	font-size: 0.9em;
}

#picha{
	width:19%;
	height: 100%;
	border-top: royalblue 1px solid;    		
	background-color: royalblue; 	
	border-top-left-radius: 12px;
	float: left;	
}

.pic{
    	width: 168px;
    	height: 158px;
   	float: left;
    	margin-left: 8px;
    	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 8px;
    	padding:1px;
}

img.fot {
    	/* width: 293px; */
    	/* height: 281px; */ 	
    	margin: 8px;    	
    	padding:1px;
	text-align: left;
	vertical-align: text-top;	
}

#title{
	width:81%;
	height: 100%;
    	text-align: left;
	border-top-right-radius: 12px;
    	color: #ffffff;
	background-color: royalblue; 
    	text-shadow: 2px 2px 4px #000000;
	float: left;	
}

#title h1{
	font-family: arial,calibri;
    	margin-top: 20px;
    	font-size: 36px;
    	margin-bottom: 10px;
}

span.tagi {
	font-weight: 600;
	font-size: 1.5em;	
}

div.row2 { /* container for main text at top */
	width: 100%;
	min-height: 45%;
	border: 1px solid LightSalmon;
	padding-top: 7px;
	color: black;		
	background-color: LightSalmon; 	
	font-family: inherit;	
	font-size: 1.05em;
	font-weight: 300;
	line-height: 1.56em;
	margin:auto;	
	padding-left:1.1em;	
	padding-right:1.1em;	 
	float: left;	
}

div.row2a { /* inner container for main text at top left */
	width: 56%;
	min-height: 45%;	
	color: black;		
	background-color: LightSalmon; 	
	font-family: inherit;		
	font-size: 1.05em;
	font-weight: 300;
	line-height: 1.56em;
	margin:auto;	
	padding-right:2em;	 
	float: left;	
}

div.row2b { /* container for image at top right */
	width: 44%;
	min-height: 45%;	 		
	font-size: 1.05em;
	font-family: inherit;	
	font-weight: 300;
	line-height: 1.2em;
	margin:auto;	
	padding-left:1.2em;	
	padding-right:1.2em;	 
	float: left;	
}

div.row3 {
	width:100%;
      	margin: auto;
	color: #ffffff;
    	background-color: royalblue;  	
    	min-height: 110px;
	border-bottom: royalblue 2px solid;		
	font-family: inherit;	
	font-size: 0.9em;
	float: left;
}

div.hapandipo {
	width:30%;
	min-height: 110px;
	border-top: royalblue 1px solid;    		
	background-color: royalblue; 	
	padding-left: 0.8em;
	float: left;	
}

div.hapasipo {
	width:88%;
	min-height: 65px;
	border: royalblue 1px solid; 
	border-radius: 8px;   		
	background-color: BlanchedAlmond; 	
	padding-left: 0.8em;
	font-family: inherit;
	font-size: 1.12em;
	float: left;	
}

div.storo {
	width:50%;
	min-height: 110px;
	border-top: royalblue 1px solid;    		
	background-color: royalblue; 
	font-family: inherit;
	font-size: 1.15em;
	line-height: 1.45em;
	padding-right:1em;
	float: left;	
}

div.fomu {
	width:20%;
	min-height: 110px;
	border-top: royalblue 1px solid;    		
	background-color: SkyBlue; 
	font-family: inherit;
	font-size: 1.15em;
	line-height: 1.45em;
	padding-left:0.7em;
	padding-right:0.7em;
	padding-bottom:0.7em;
	float: left;	
}

div.uju { /* container for special messages */
	width: 100%;
	height: 155px;
	border: 1px solid LightSalmon;
	padding-top: 5px;
	color: grey;		
	background-color: white; 
	text-align: center;			
	font-size: 1.02em;
	font-style: italic;	
	line-height: 1.7em;
	margin:auto;		 
	float: left;	
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;		
}

input[type='text'],input[type='password'],input[type='submit'] {  
	font-family: inherit;
  	font-size: 100%;
	box-sizing: border-box;
	width: 90%;  
	padding: 0.5em 0.85em;
    	margin: 4px 0;    	
	border: 1px solid rgb(180,180,180);
	border-radius: 7px;
}		

input[id="smit"] {
  	color: white; 	
	background: green;	
	font-size: 116%;
	font-weight: bold;	
	box-shadow: 3px 3px rgba(50,120,0,0.5);
}

table {width: 98%;}

td.lgnrow1 {
	font-size: 1.2em;
	font-weight: bold;
	color: white; 
}

td.lgnrow2 {
	font-family: arial,'Times New Roman';
	font-size: 0.9em;
	width: 98%;
}

td.lgnrow3 {
	font-size: 0.82em;	
	width: 98%;
}

ul li, ol li {margin-left: 1.3em;}

p.ht2 {
	font-weight: 600;
	font-size: 117%;
	padding-bottom: 0.4em;
}

/* rule for narrow screens */
@media only screen and (max-width: 1366px) {
	div.pgmajor {
 		width: 94%;	
		border-radius: 8px;	
		padding-top: 8px;
		padding-bottom: 8px;		
	}

	#title h1{
		font-family: arial,calibri;
    		margin-top: 14px;
    		font-size: 32px;
    		margin-bottom: 6px;
	}

	span.tagi {		
		font-size: 1.35em;	
	}

	div.row2b { /* container for image at top right */				
		padding-left:0.6em;	
		padding-right:0.6em;		
	}

	img.fot {
    		max-width: 505px; */
    		max-height: 396px; */ 	
    		margin: 5px;    	
    		padding:1px;
		text-align: left;
		vertical-align: text-top;	
	}
	
}