/************  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  ************/
h1 { 
  font-family:          sans-serif; 
  color:                #033E6B; 
}

h2 { 
  font-family:          sans-serif; 
  color:                #033E6B; 
  margin-left:          2%;
  font-size:            2.5em;
}

h3 { 
  font-family:          sans-serif; 
  font-size:            2.0em;
  color:                #25567B; 
  border-bottom:        1px solid #ACB0B5; 
  padding-left:         1%; 
  width:                50%;
}

h4 { 
  font-family:          sans-serif; 
  font-size:            1.3em;
  color:                #25567B;
  margin-bottom:        3%;
  margin-top:           3%;
}


/************  BODY - CONTAINER  ************/
body{ 
  margin-left:		0%;  
  margin-right:		0%;
  margin-bottom:       -1%;  
  background: 		#fff;
  height:               100%;
}

div.container_large{
  position:             relative;
  min-height:           97vh; 
}


/************  MENU  ************/
div.menu{
  position:		absolute; 
  font-family: 		sans-serif; 
  font-size:		1.4em; 
  color: 		#033E6B;
  width:                15%;
  padding-top: 		3%;
  padding-left:		2%;
  padding-right:	4%;
  float:                left;
}

ul.main_menu{
  background-color: 	#ddd;	
  margin-top: 		2%;
  padding: 		0%;
  width: 		100%;
  list-style: 		none;
}

ul.main_menu li{
  font-family:  	sans-serif; 
  font-size: 		0.7em;
  margin: 		0%;
  padding-top: 		1%;
}

ul.main_menu a {
  background-color: 	#ddd;
  color: 		#333;
  border-bottom: 	0.15em solid #fff;
  display: 		block;
  margin: 		0%;
  padding: 		5% 5% 5% 5%;  
  text-decoration: 	none;
}

ul.main_menu a:hover {
  background-color: 	#033E6B;
  color: 		#fff;
  padding: 		5% 5% 5% 5%;  
}


/************  CONTENT  ************/
div.content{
  position:		relative;
  width:                75%;
  padding-right:        2%;
  padding-left:		2%;
  margin-left:		21%;
  padding-bottom:       8vh;
}

div.container{ 
  padding-bottom:	2%; 
  padding-left:		2%;
  font-family: 		sans-serif ;
  clear:                both;
}

div.container_left{
  width: 		45%; 
  float: 		left;
}

div.container_right{
  width: 		45%; 
  float: 		right;
}


div.saparator{ 
  padding:              1%;
}

div.clear{ 
  clear:                both;
}

div.mini_image{
  padding-bottom:	5%; 
  padding-left:  	5%;
  font-family: 		sans-serif ;
}

div.mini_image img{
  width:                85%;
  border:               0.1em solid #336699;
}


/************  NAVISTRING  ************/
div.container_bottom{
  padding-top:          2%;
  padding-bottom:       3%;
  padding-left:         3%;
  font-family: 		sans-serif ;
}

/*div.container span.navistring {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid lightgrey;
  padding: 3px;
  background-color: lightgrey;
  width: 15px;
}

div.container span.navistring a {
  font-size: 140%;
  text-decoration: none;
  font-weight: bold;
  border: 0px solid lightgrey;
  padding: 3px;
  background-color: transparent;
}	
*/

div.container_bottom span.navistring {
  font-size:            1.1em;
}

div.container_bottom span.navistring a {
  font-size:            1.1em;
  font-weight:          bold;
  padding-right:        0.2em;
}

div.container_bottom span.navistring_grey {
  color:                #888888;
}


/************  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.85em;
}

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

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


/************  static content pages  ************/
div.static_info{
  width: 		50%;
  padding-left:		1%;
  padding-right:	1%;
  font-family: 		sans-serif;
}


div.static_image{
  width: 		30%; 
  padding-left:  	2%;
  padding-right:  	20%;
  padding-bottom:  	2%;
  float: 		right;
  font-family: 		sans-serif ;
}

div.static_image img{
  width:                100%;
  border:               0.1em solid #336699;
}

div.static_small {
  font-family: 		sans-serif ; 
  font-weight: 		normal;
  font-size: 		0.85em;
}



/************  Tablet (landscape) ************/
@media only screen and
(max-device-width:1500px) and
(orientation: landscape){

div.mini_image img{
  width:                98%;
}

}



/************  Smartphone (landscape) ************/
@media only screen and
(max-device-width:800px) and 
(orientation: landscape){

h2 { 
  font-size:           1.5em;
}

h3 { 
  font-size:           1.3em;
}

h4 { 
  margin-bottom:       1%;
  font-size:           0.9em;
}

div.menu{
  font-size:		1.3em; 
  width:                20%;
  padding-top: 		1%;
}

div.content{
  width:                70%;
  margin-left:          26%;
}

div.container_bottom span.navistring {
  font-size:            1.4em; 
}

div.container_bottom span.navistring a {
  font-size:            0.9em;
}

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

}


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

h4 { 
  margin-bottom:        1%;
  font-size:            1.5em;
}

div.menu{
  font-size:		1.5em; 
  width:                30%;
  padding-top: 		8%;
}

div.content{
  width:                60%;
  margin-left:		36%;
}

div.container_left{
  width: 		auto;
  float:                none;
}
 
div.container_right{
  width: 		auto; 
  float:                none;
}

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

div.mini_image img{
  width:                100%;
}

div.container_bottom{
  padding-bottom:        6%;
  padding-right:         2%;
  margin-left:         -55%;
}


div.container_bottom span.navistring {
  font-size:            1.5em; 
}

div.container_bottom span.navistring a {
  padding-left:        0.2em;
}

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



div.static_image{
  width:                70%;
  float:                none;
  margin-left:          auto;
  margin-right:         auto;
  margin-bottom:        4%;
}

div.static_small {
  font-size: 		1.0em;
}

div.mini_info{
  font-size:            1.2em;
}

}



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

h2 { 
  font-size:           2.0em; 
  margin-left:         2%;
  margin-right:        2%;
}

h3 { 
  font-size:            1.5em;
}

h4 { 
  margin-bottom:       1%;
  font-size:           0.9em;
}

div.menu{
  font-size:		1.3em; 
  width:                31%;
  padding-right:	1%;
}

div.content{
  padding-left:		4%;
  width:                60%;
  margin-left:		34%
}

div.container_bottom span.navistring {
  font-size:            1.4em; 
}

div.container_bottom span.navistring a {
  font-size:            0.9em;
}

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

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

div.mini_info{
  font-size:            1.0em;
}

}