/*******************************************************************/
/*** File: sabexo_css.css ***/
/*******************************************************************/
/** browser specific adaptations **/

  img {
/**
requires adaptations for internet explorer
**/
}

a.aY {
	href: "";
	color: rgb(76, 75, 0);
	font-weight: bold;
}
/*******************************************************************/

 h1.CompName {
	padding: 0.0vh 0.5vw 0.0vh 0.0vw;
	text-indent: 5%;
	font-family: Arial, Helvetica, sans-serif;
	/*
	font-size: 2.5vw;
	*/

}
 h1.OwnerName {
	text-indent: 10%;
	font-family:  "Times New Roman", Times, serif;
	/*
	font-size: 2vw;
	*/
	
}

/*
used / unused
*/

body{
	font-size: 12.5px;
	/*
	font-size: 1vw;
	*/
}

h1{
	font-size: 250%;
}

h2{
	font-size: 200%; 	
}

h3{
	font-size: 180%; 	
}

h4{
	font-size: 150%; 	
}
	
p{
	font-size: 120%;
	text-align: justify;
}

li.sabexolistitem{ 
	font-size: 120%;
	line-height: 2.0em;
}


label {
	display: inline-block;
	width: 200px;
	height: 3.0vh;
}

p.std{
	text-align: justify;
}

.WorkItem
	{
	/*
	min-width: 300px;
	*/
	width: 48%;
}

.Phone{
font-size: 150%;
}


/*******************************************************************/
/*
media query
*/

@media only screen and (max-width: 1250px) {
body{
		font-size: 1vw;
/*
		font-size: 12px;
*/
}
	
h1{
	font-size: 250%;
}

h2{
	font-size: 200%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h3{
	font-size: 180%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h4{
	font-size: 150%;
}

p {
 font-size: 120%;
}

li.sabexolistitem{ 
	font-size: 120%;
	line-height: 2.0em;
}


.WorkItem{
		/*	min-width: 300px;*/
	width: 45%;
}

}

/*******************************************************************/
/*
@media only screen and (max-width: 360px) {
*/

@media only screen and (max-width: 1000px) {

body { 
   font-size: 1.0vw;
}

h1.CompName{
	font-size: 2.0vw;
}

h1.OwnerName {
	font-size: 2.0vw;
}

h1{
	font-size: 250%;
}

h2{
	font-size: 200%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h3{
	font-size: 180%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h4{
	font-size: 150%;
}

p {
 font-size: 150%;
}


.Phone{
font-size: 150%;
}

.sabexoimprint{
	font-size: 120%;
}


.WorkItem{
   /*	min-width: 300px;*/
	width: 95%;
}
}

/*******************************************************************/
/** THIS IS NEW 20.12.2018 **/

@media only screen and (max-width: 400px) {

body { 
   font-size: 1.0vw;
}

h1.CompName{
	font-size: 2.0vw;
}

h1.OwnerName {
	font-size: 2.0vw;
}

h1{
	font-size: 250%;
}

h2{
	font-size: 240%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h3{
	font-size: 230%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
}

h4{
	font-size: 220%;
}

p {
    font-size: 200%;
}

li.sabexolistitem{ 
	font-size: 200%;
	line-height: 2.0em;
}


.Phone{
font-size: 100%;
}

.sabexoimprint{
	font-size: 100%;
}

.WorkItem{
   /*	min-width: 300px;*/
	width: 95%;
}

#PrivacyFixedHeader {
   position: fixed;
   left: 0;
   top: 0;
   min-height: 5%;
   //width: 98%;
   width: 20%;
   font-size: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: white /*#4c4b00*/;
   background-color: red;
   opacity: 0.8;   
   text-align: left;
   padding: 1%;
   float: right;
}

}


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

.SabexoHome{
  width: 100%;
  padding: 5px;
  border-style: solid;
  border-width: 0px;
  margin-top: 0px;
  background: #4A65A5;
  background-image: url(../graphics/SABEXObackgroundblue00.jpg);
  background-repeat: repeat;
 }

 /*******************************************************************/
   
 .SabexoPanel{
 /*
 min-width: 1000px;
 */
 max-width: 1200px;
 padding: 10px;
 margin: 0 auto;
 margin-bottom: 60px;
 }

/*******************************************************************/	
.CompPanel{
	  /*  max-width: 1180px;*/
  width: 100%;
  padding: 0px;  
  border-width: 0px;
  border-style: solid;
  border-color: green;
  border-radius: 5px;
  margin-bottom: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #4c4b00;
  background: #eadebd;
  background: url(../graphics/SABEXO_logo_background00.jpg);
  background-size: 6vw 4vw;  
  background-repeat: repeat;
   /*
   background: url("../graphics/SABEXO logo only TESTMOD0 resizedX.svg");
   */
 }

.CompTable{
	width: 100%;
}

.CompNameCell{
	vertical-align:middle;
}

.CompLogoCell{
	width: 30%;
	vertical-align:middle; 
	text-align: right;
}
	
 img#CompLogoX{
	width: 90%;
	/*	height: 180px; 150*/ 
    padding: 0px;
	border: 1px solid;
	border-color: #927549;
    border-radius: 5px;
	margin: 0px 0px 0px 0px;
	vertical-align:middle;
	background: #EEEEEE;
	}
	
 /********************************************/
 
.MainMenue{
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	border-radius: 15px;
	border-top: 	0px solid #4A65A5; /* SABEXO-HOME */ 
	border-bottom: 	0px solid #4A65A5; 
	background: yellow;
}

div.MenueLabel{
	width:  8.0vw; 
	padding-top: 6px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 2px;	
	margin-left: auto;
	margin-right: auto;	
	font-size: 150%;
	
/*
	font-size: 1.0vw;
	font-size: 100%;
*/
	font-weight: bold;
	color: #4A65A5;  
}

img.MenueIcon
{
	height: 5vw;  
	width: 50%;
	padding: 2px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid; 
	border-color: #ded09f; 
	background: white;
}



/********************************************************************/
/** mark invalid input as in Newsletter 						  ***/
/********************************************************************/

input[pattern]:invalid{
  color:red;
}

body{
	margin: 0px;
}

span.red {display:none;}

a:link    {color: blue; background-color:transparent; text-decoration:none}
a:visited {color:#4A65A5; background-color:transparent; text-decoration:none}
a:hover   {color: green; background-color:transparent; text-decoration:underline}
a:active  {color: yellow; background-color:transparent; text-decoration:underline}

/*******************************************************************/
.Header{
   left: 0;
   top: 0;
   /*
   height: 9px;
   */
   height: 12vw;
   width: 98%;
 	
}

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

#PrivacyFixedHeader {
   position: fixed;
   left: 0;
   top: 0;
   min-height: 5%;
   //width: 98%;
   width: 20%;
   font-size: 75%;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: white /*#4c4b00*/;
   background-color: red;
   opacity: 0.8;   
   text-align: left;
   padding: 1%;
   float: right;
}

#PrivacyFixedFooter {
   position: fixed;
   left: 0;
   bottom: 0;
   min-height: 5%;
   width: 96%;
   line-height: 1.5;
   font-size: 1.5vmin; /*75%;*/
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: yellow; /*#4c4b00*/
   background-color: red;
   opacity: 0.8;
   text-align: left;
   padding: 2%;
   float: right;
}
	
.PrivacyButton{
	color: blue;
	position: absolute;
	bottom: 0;
	float: right;
	}	
	
/*******************************************************************/
.ServicePanel
 {
  width: 100%;
  padding: 0px;
  border-radius: 5px;
  background: #eadebd;
  line-height: 4.5;
  text-align: center;
  font-family: "Times New Roman", "Comic Sans", "Comic Sans MS", "Cantaneo BT", "MV Boli", Arial, sans-serif;
  font-style:  italic;
  font-size: 150%;
  color: #4c4b00;

 }

/*******************************************************************/
 .MainPanel{
   width: 100%;
/*
   height: 700px;
*/

   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 100%;
   overflow: hidden;
   }
   
 /********************************************/
 
 .MainContent{
	width: 71.5%;
	/*
	min-width: 600px;
*/
	margin-left: 0px;
	margin-top: 0px;
	margin-right: auto;
    border-radius: 5px;

  	float: left; 
	text-align: left; 

    background: #eadebd;
	background: url(../graphics/SABEXO_logo_background00.jpg);
	background-size: 6vw 4vw;  
	/*
	background-size: 100px 60px;  
	*/
	background-repeat: repeat;
   /*
   background: url("../graphics/SABEXO logo only TESTMOD0 resizedX.svg");
   */
	padding-bottom: 5px;
}

DIV.ContentPanel{
     width: 90%;
     min-height: 97vh;	
	 line-height: 2.5;
	 padding: 5% 5% 5% 5%; 
	 text-align: justify;
	 font-family: Arial, Helvetica, sans-serif;
     font-size: 100%; 
	 font-style: normal;
     color: #4c4b00;
	 /*
	 line-height: 40px;
	 */
}	

caption{
	text-align: left;
	font-size: 150%;
	font-weight: bold;
}

/***
mark word and paragraphs
****/

p.CallRequest{
	font-size: 125%; 
	font-weight: bold;
	/* normal, bold, 900 ;*/ 
	color: #4A65A5;  
	text-align: center;
}


mark.CallWord
{
font-weight: bold;
color: #4A65A5;  
background-color:  #eadebd;
color: #4A65A5;  
	
}
mark.ForCheck
{
font-weight: bold;
color: red;
background: grey;
}

mark.Comment
{
	font-weight: bold;
	color: red;
	background: grey;
}

mark.bold
{
	font-weight: bold;
	color: #4c4b00;
	background: #eadebd;
}

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

.WorkItem
	{
	float: left; 
	min-width: 200px;
	min-height: 15vw;
/*
	min-height: 18vw;
	width: 48%;
	*/
	padding: 8px 4px 4px 4px;
	border-width: 0px;
	border-style: solid;
	border-radius: 4px;
	border-color: rgb(74, 101, 165);
	border-top-width: 2px;
}
	
.WorkItemrow{
	float: left;
	width: 100%;
	/*
	border-bottom: 1px dotted #4A65A5;
	*/
}


/*******************************************************************/
 
img.CompetenceItem{
	width: 8vw;
	height: 6vw;
/*
	min-width: 80px;
    padding: 5px;
	*/
	min-width: 25%;
	/*
	 padding: 15px;
 */
    padding: 1%;
	
	margin: 0px 0px 0px 0px;
	
    border: 2px solid;
	border-color: #ded09f;
    border-radius: 5px;
	
	background: white;

	float: left;
/*
	vertical-align: middle;
*/
	vertical-align: text-bottom;
}

img.WorkField{
 float: left; 
 width: 45%; 
 margin: 15px 20px 15px 0px; 
 padding: 10px 10px 10px 10px;
}

 /********************************************/
 .SidePanel{
  width: 28%; 
  height: auto;
  margin-top: 0px;
  margin-left: 0px; /* auto; */
  padding: 0px;  
  vertical-align: top;
  float: right; 
  }
 
 /********************************************/
  .SideContent{
  margin: 0px 0px 5px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 5px;
  vertical-align:top; 
  background: #cbc8bd;
  background-repeat: no-repeat;
  background-position: right top;
/*
  background-size: 160px 130px; 
  */
  background-size: 40%; 
  background-image: url(../graphics/as-animation-gluehbirne00.gif);
 }

/********************************************/
  .SideContact{
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  padding: 10px 10px 10px 0px;
  border-radius: 5px;
  vertical-align:top; 
  background: #cbc8bd;
  background-repeat: no-repeat;
  background-position: right top;
  /*
  background-size: 160px 220px; 
  */
  background-size: 35%; 
  background-image: url(../graphics/SprecherArno-sw.jpg);  
  }
  

.ContactPanel{
  width: 95%;
  margin: 5px 5px 5px 5px;
  padding: 3vh 0vw 0vh 1.5vw;
	/*
  padding: 5px 0px 0px 10px;
 */
  border-radius: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal; 
  font-size: 100%;
  color: #4A65A5;
/*  Comic Sans, Comic Sans MS, Cantaneo BT, MV Boli, Arial italic;*/
  }

table.ContactItems{
 width: 100%;	
 vertical-align: top;
 font-weight: normal; 
/*
 font-size: 100%;
 */
 } 

 img.ContactImage{
	/*
	height: 50px;
	width:  60px;
width: 30%;	
height: 50%;
	*/
	width: 4vw;	
	height: 3vw;
	border: 2px solid; 
	border-color: #ded09f; 
	border-radius: 5px; 
	padding: 5px 5px 5px 5px;
	vertical-align: middle;
	margin: 10px 5px 10px 0;
}
 
img.ContactImageOLD{
	width: 4vw;
	height: 5vh;
	/*
	height: 30px;
	width : 50px;
*/
	margin: 2px 5px 2px 0px;
	border: 1px solid; 
	border-color: #ded09f; 
	border-radius: 5px; 
	padding: 5px;
}	

img.MailAddress{
	vertical-align: middle;
	border: 0px solid; 
	background: transparent; 
	border-color: #eadebd; 
	border-radius: 0px; 
	padding: 0 0 0 0;
	max-width: 180px;
	width: 100%; 
	/*
	height: 60%; 
	width: 12.0vw; 
	height: 4.0vw; 
	min-width: 120px;
	*/
}

img.RegMailAddress{
	vertical-align: middle;
	border: 0px solid; 
	background: transparent; 
	border-color: #eadebd; 
	border-radius: 0px; 
	padding: 0 0 0 0;
	max-width: 180px;
	width: 75%; 
	/*
	height: 60%; 
	width: 12.0vw; 
	height: 4.0vw; 
	min-width: 120px;
	*/
}
	

.Phone{
font-family: "Comic Sans", "Comic Sans MS", "Cantaneo BT", Helvetica, sans-serif;

/*
font-size: 120%;	
height: 80px;
*/
width: 80%;
padding-left: 5px;
font-weight: 525; /* bold: 700; normal: 400*/;
}

div.ImageWarpperA
{
/*
overflow: hidden;
*/
}

div.ImageWarpperX
{
overflow: hidden;
width: 95%;
margin-left: 40px;
}

img.DataVisualization{
	float: left; 
	width: 40%;
	height: auto;
	padding: 1%;
	margin: 2%;
}
  
/***********************************************************************/

table.InfoItems{
	
}
  
.InfoItem{
	
	width: 150%;
	padding: 0.5em;
	border-bottom-style: dotted; 
	border-bottom-width: 1px; 
	border-bottom-color: #4A65A5; 
	vertical-align: middle;
	
/*
	font-size: 120%;		
	font-size: 95%; 
	color: yellow;
	*/
 } 
 
  
.InfoPanel{
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 1.0vh 0vw 0vh 1.0vw;
  /*
  padding: 5px 0px 0px 10px;
  */
  border-radius: 0px;
  line-height: 1.0em; 
  font-family: "Comic Sans", "Comic Sans MS", "Cantaneo BT", Helvetica, sans-serif;
/*
  MV Boli, Nimbus Sans L, ParkAvenue BT, Calligraph 421 BT, Arial;
  */
  font-style:  normal;
  font-size: 120%;
  color: #4A65A5;
}

/*******************************************************************************/
div.InfoPage
{
	line-height: 2.0; 
	padding: 2em;
	border-style: solid; 
	border-width: 2px;
}

img.MenueSideX{
	/*
	height: 50px;
	width:  60px;
width: 30%;	
height: 50%;
	*/
	width: 4vw;	
	height: 5vh;
	border: 2px solid; 
	border-color: #ded09f; 
	border-radius: 5px; 
	padding: 5px 5px 5px 5px;
	vertical-align: middle;
	margin: 10px 10px 10px 0;
}


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

 img {
    padding: 15px;
    border: 0px solid;
	border-color: #927549;
    border-radius: 5px;
	margin: 10px 20px 10px 0;
	vertical-align:middle;
	background: #F1F2F3;
	/*
	background: yellow;
	*/
}

#OROV{
	/*
	width: 120px;
	height: 60px;
	*/
     background-color: yellow;	
}

#OROV img {
	position: absolute;
	clip: rect(0px 80px 45px 0px);
	overflow: hidden;
	border: 1px solid;
	border-color: #f00;
    border-radius: 5px;
    padding: 5px;
	vertical-align:middle;
}

a.aX
{
	color: green;
}


ul.sabexolist{
  list-style-type: none;
	/*
  list-style-type: square;
  */
  
  width: 95%;
  /*margin: 0px;*/
  margin: 0.5em 1.0em 1.0em 1.5em;

 
  /*  
  */
  overflow: visible;
  border-top: 0px solid #ccc;
  padding: 10px 10px 10px 10px;
  text-align: top;
  
  /*
  list-style-image: url("../graphics/bluesquare00.svg");
  list-style-image: url("../graphics/bluesquare00.jpg");
  */
}

li.sabexolistitem{ 
	margin: 0;
	padding: 0px 0px 0px 2vw;
	/*
	vertical-align: 
	center;
	list-style-position: outside;
	*/

	list-style: none;
	background-image: url("../graphics/bluesquare00.svg");
	background-repeat: no-repeat;
	background-position: 0% 0.5em;
	/*
	background-position: left center;
	*/
	background-size: 1vw;
	}


 ul{
  list-style-type: none;
  width: 98%;
  margin: 0px;

  overflow: hidden;
  border-top: 0px solid #ccc;
  padding: 10px;
}

/*******************************************************************/
/**** lx ***/
/*******************************************************************/

.lx{
  line-height: 1.5em; /*??*/
  margin: 1px 3px  1px 3px;
  /*
  padding: 2px;
  font-size: 100%;
  border-bottom: 1px solid red; 
  */
  /*#ccc;
  */
  float: left;
  
  
  overflow: auto;
  display: inline-block;
  
 /*
 text-align: justify;
  width: 48%;

 */
}

.lx a {
	padding:  2px;
	
  /*
  color: #4A65A5;
  font-family: 'Comic Sans', 'Comic Sans MS', Arial; 
  text-decoration: none;
  font-family: Arial;
  font-size: 20px;
 */
}

.lx a:link    {color:#4A65A5; background-color:transparent; text-decoration:none}
.lx a:visited {color:#4A65A5; background-color:transparent; text-decoration:none}
.lx a:hover   {color:red; background-color:transparent; text-decoration:underline}
.lx a:active  {color:#4A65A5; background-color:transparent; text-decoration:underline}



.lx h4 {
	font: bold 1.2em/1.5 Arial, Helvetica, Verdana, sans-serif;
	font-size: 150%;
	/*
	font-size: 1.0vw;
	*/
	padding-top: 20px;
	padding-bottom: 25px;
	color: red;
}


.lx h4.CompetenceItem
{
	padding-left: 9.0vw;
	padding-top: 2.0vw; 
	padding-bottom: 1.8vw;
}

.lx p {
/*
	font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
*/
padding: 0px 5px 5px 5px;
	line-height: 1.5em;
	font-size: 125%;

	/*
	font-size: 1.0vw;
	font-size: 75%;
	*/
	font-family: Arial, Helvetica, sans-serif;
	color: #4A65A5; /*red;*/
	/*
	width: 95%;
	*/
}


/*
side navigation panel images 
*/


.lx:hover {
	background: #F1F3F4; /* lightbluegrey */
	color: yellow;
	/****
	color: #4A65A5;
	******/

	/* font-weight: bold;*/
	cursor: pointer;
	/** BAS ***/
	
}

.lx.current{
	color: #4A65A5; 
	/*
	 
	SABEXO-HOME */
	font-weight: bold;
	color: green;
	background: #ECEFBE ;
}

.lx a.current{
		/*
		color: #4A65A5; 
	*/
	/* SABEXO-HOME */
	font-weight: bold;
	/*
	background: yellow;
	color: #ECEFBE;
	*/
	color: green;
}

.OneCol     { width: 95%;}
.TwoCol     { width: 48%;}
.ThreeCol  { width: 32.0%; }
.FourCol   { width: 24.9%; }
.SixCol    { width: 15.0%; }

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

nav {
	
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	font-size: 80%;
	}

nav ul {
	width:   100%;
    padding: 0em;
	border:  0px solid black;
	border-radius: 5px;

	/* SABEXO-HOME 
	background-color: #4A65A5; 
	*/
	background-color: #cbc8bd; /* grey as of side panel */
    text-align: center;
}

nav li {
	list-style: none;
	display: inline-block;
	width: 13.0%;
	margin: 0.01em;
}

nav a {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-align: center;
	border: 0px solid blue;
	border-radius: 5px;
	box-shadow: 0 5px 10px white inset;
	color: #4c4b00;
	background-color: #EDF1E3;
	/*
	background-color: #eadebd;
*/
	}
	
/********************************************/

nav	a.current{
	/*
	color: #4A65A5;  
	SABEXO-HOME */
	font-weight: bold;
	color: red;
	background: #F1F2F3;
	/*
	background: green;
	background: #ECEFBE;
	*/
}
 /********************************************/

nav a:focus,
nav a:hover {
	/*color: royalblue;
	background-color: red;*/
	color: #4A65A5; /* SABEXO-HOME */
	font-weight: bold;
	background-color: #F1F3F4;
	border-color: #ECEFBE;
	}
	
nav	a:visited {
	background: yellow;
	color: red;
	}

/*
nav a:active {
    border-bottom:3px #FFF solid;
    }
*/

/*************************************************************/
/* tables */
/*
table tbody tr td{
	font-size: 120%;
	}
*/

table.PlanningInstances 
{
	
	border: 1px inset blue;
	
	font-size: 120%;
	/* 
	background: #efebdc;
	yellow; 
	border: 4px red;
	*/

}
	
table.PlanningInstances td
{
	padding: 8px;
	padding-left: 10px;

	border: 1px inset blue;
	
	width: 250px;
	color: blue;
}

/*************************************************************/
table.newsTable textarea {font-size: 120%; font-family: Arial, Helvetica, sans-serif;}
table.newsTable select {font-size: 100%;} 
table.newsTable input{font-size: 120%; font-family: Arial, Helvetica, sans-serif;}
table.newsTable td { width: 30%;}

table.newsTable { width: 95%;table-layout:fixed; }
table.newsTable tr { height: 1.5vw; line-height:2.0vw; }

/* check if used */


/*************************************************************/
.footnotes {
	border-top: 1px solid #ccc;
	font-size: .75rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
}

<script>
</script>