/************  LINKS  ************/
a:link    {color: #336699;  font-family: sans-serif; text-decoration: none;}
a:active  {color: #336699;  font-family: sans-serif; text-decoration: none;}
a:visited {color: #336699;  font-family: sans-serif; text-decoration: none;}
a:hover   {color: #8C1000;  font-family: sans-serif; text-decoration: none;}

/************  HEADINGS  ************/
h2{
  border-bottom: 	1px solid #ACB0B5; 
  width: 		40%; 
  text-align:		left;
  font-family: 		sans-serif ; 
  padding-left:		1%;
}

/************  BODY - CONTAINER  ************/
body{ 
  margin:		0%;
  padding:		0%;  
  height:		100%; 
}

div.container {
  min-height:		100vh;
  position:		relative;
}

/************  HEADER  ************/
div.header {
  padding-left:		2.5%;
  padding-right:	2.5%;
  padding-top:		2%;
  padding-bottom: 	1%;
  background-color: 	#fff;
}

/************  CONTENT  ************/
div.content {
  padding-left:		2.5%;
  padding-right:	2.5%;
  padding-bottom:	8vh;	/* footer height */
}

div.image{
  width: 		50%; 
  float: 		left;
  color:		#999;
  font-family: 		sans-serif ; 
  font-weight: 		normal;
  font-size: 		0.85em;
}

div.image img{
  width:                90%;
  border:               0.1em solid #336699;
}

div.info{
  width: 		50%;
  float:		right; 
}

div.clear{ clear: both;}


/*** TABLE ***/
table.info_table{
  font-family: 		sans-serif ; 
  font-weight: 		normal;
  font-size: 		0.9em;
  width: 		100%;
  border: 		0px;
  border-collapse:	collapse;
  border-spacing: 	0px;  
}

table.info_table tr.table_head{
  background-color: 	#888;
  color: 		#fff;
  padding: 		5px;
  text-align: 		left;
  border-bottom: 	5px #fff solid;
  font-size: 		1.2em;
  font-weight: 		bold;  
} 

table.info_table tr.odd{  background-color: #eee; color:#000;}

table.info_table tr.even{ background-color: #ddd; color:#000;}

table.info_table td{
  padding: 		5px;
  border: 		2px #fff solid;
  vertical-align:	top;
  text-align: 		left;	
}

/************  BOTTOM LINKS  ************/
p.links{
  color:		#999;
  font-family: 		sans-serif ; 
  font-weight: 		normal;
  font-size: 		0.85em;
  text-align:		right;
  padding-right:	5%;

}

/************  FOOTER  ************/
div.footer {
  position:             absolute; 
  bottom:               0;
  width:                100%;
  height:               8vh;              
  background:           #eee;
  border-top:           0.2em solid #888;
  font-family:          sans-serif ; 
  font-weight:          normal;
  font-size:            0.75em;
}

div.footer p{
  padding-left:         2.5%;
  padding-right:        2.5%;
  color:                #888;
}

div.footer img{
  vertical-align:       middle;
  width:                6em;
}



@media only screen and
(max-device-width:1200px) and
(orientation: portrait){

h2{
  width: 		70%; 
}

div.image{
  width: 		auto; 
  padding-bottom:	5%;
  padding-left:         5%;
  padding-right:        5%;
}

div.image img{
  width: 		100%; 
}


div.info{
  float: 		none;
  width: 		100%;
}

p.links{
  font-size: 		1.0em;
  padding-bottom:	5%;
}

table.info_table tr.table_head{
  font-size: 		1.3em;
}

td:nth-child(1){
  width:                25%;
}

div.footer {
  font-size:            0.95em;
}

}


@media only screen and
(max-device-width:800px) and
(orientation: portrait){

div.image img{
  width: 		99%; 
}

div.image{
  padding-left:     2%;
  padding-right:    2%;
}

}

@media only screen and
(max-device-width:450px) and
(orientation: portrait){

div.footer {
  font-size:            0.75em;
}

}