/* zenonstyle */
p {line-height:150%}
.g {background-color: #399}
#global {display: block;width:100%;height:2em;padding:.2em 4em;position:fixed; top:0; z-index: 100;color:#FFF;background:#399;clear: both; box-shadow: 0 1px 2px rgba(0,0,0,.5);}
.page {max-width:900px; margin-left: auto; margin-right:auto;}
/* REM paste bin
mainsearch {float:right}
border: 1px solid grey;

menu hover
-webkit-box-shadow: 2px 4px 12px #ccc; border-left:1px solid #acc;margin-left:0.5em
box-shadow: 4px 4px 6px #eee;
*/

#mainsearch * {white-space:nowrap !important; display: inline-block ;  }
#mainsearch {background: url('/img/zenon-bio-white-18.png') no-repeat left center; padding-left: 1.7em; padding-top: 0.3em;}
#mainsearch em {font: normal bold 1.2em "Helvetica Neu",Helvetica,sans-serif; }
#mainsearch input {  height:1.8em; font-size:0.9em; color:#333;}
#main {max-width:960px;margin-left: auto; padding-top:2em;}
#global a {text-decoration:none; color:#FFF;}
#contPh {font-size:80%; display:none; }

/* menu */
#topnavbar {overflow-x:auto; overflow-y:hidden;padding:0 1.4em;}
#topnavbar ul { background-image: linear-gradient(to bottom,#fff,#fafafa);  width:100%; margin-bottom:1.5em; }
#topnavbar li { box-shadow: 0  0.2px rgba(0,0,0,.5); }
#topnavbar a:hover {color: #07d;}
#heremi {padding-top:1em; font-size:.9em; margin-bottom: .7em; }
#heremi a{text-decoration:none; color:#222;}
#heremi a:hover{border-bottom: 1px solid #ccc; color:#198AEA;}

/* context menu */
#contextmenu {left:-100%; position:absolute; background-color:#FFF;}
#contextmenu p {display:block; margin:0em; padding: .8em;font-size: 90%; background-color: #333; color: #fff;} /*header row */
#leftlist  {margin:0}
#leftlist li {font-size:.8em; font-family:Segoe UI;  text-overflow:ellipsis; overflow:hidden; }
#leftlist li a {white-space:normal; margin:0; padding: .3em .1em;}
#leftlist li:hover {overflow:visible;z-index: 100;color:#198AEA;}
#leftlist li a:hover {color:#36C; background-color: #fff;} /* border-left: 1px solid #ccc */
.ident1 {padding-left:.8em}
.ident2 {padding-left:1.5em;}
.ident3 {padding-left:2.2em;}
.ident4 {padding-left:3.0em;}
.ident5 {padding-left:3.8em;}
.hereami {font-weight: bold;}

/* 
	page styles 
*/

#maincontent {padding: 0 0.8em;}

h1 {margin-top:0em;}
.intro {line-spacing: 120%;font-size:1.1em; color:#666; margin-left: 0em; padding-left: 1em; border-left:3px solid #CCC }
h3 { margin: 2.5em 1em 0 0; clear: left;}
h4 {clear:left;}
.ic {margin-right:.2em}
.enum li { margin: .5em 0;}
.enum {padding-left: 1.2em}
.caption {font-size:90%; font-weight:bold; color:#444;}
.caption img {padding-bottom: .5em;}
/* links */
a {text-decoration: none; color:#198ADA;}
a:hover {text-decoration: underline; color:#339;}
h3 a {text-decoration: none; color:#198ADA;}
h3 a:hover {text-decoration: none; color:#369;}
ol li {margin-bottom:.9em; line-height: 140%;}


/* product table */
.orderinfo {font-family: Calibri,Verdana,Tahoma;
	width: 80%;
	margin-top: 1em;
}
.orderinfo  td {padding: .4em 1em;}
.orderinfo  th {padding: .4em 1em;}
.orderinfo  tr {border-bottom: 1px solid grey;}
.orderinfo  th:nth-child(1) {width:18%;}
.orderinfo  td:nth-child(3) {text-align:right;}

img {
  max-width: 100%;
  height: auto;
  display:block;
  /* */
}

img.left {float:left; margin-right:.4em;}
img.right {float:right;}
img.parathumb {max-width: 260px}
img.banner {margin: .75em 0;}

figure {padding:0; margin: 1.75em 0;}
figcaption {padding:0.5em 0; }

#foot {
	margin-top: 1em;
	margin-left: auto;
	padding: .5em 1em;
	/* position: relative; */
	color:#888;
	font-size:85%; 
	background-color: #EEE;
	max-width:inherit;
	}
#foot a {text-decoration:none; color:#666;}
#foot a:hover {text-decoration:underline; color:#666;}

#foot p {margin-left: auto; margin-right: auto; max-width: 960px;}
/* colors */
.darkgrey {color:#888;}
.skyblue {color:#198AEA;}
.light {color: #EEE;}
/* search results 
*
*/

.search-results {font-size:1em; } 
.search-item-links	{font-size:120%; margin-top: .3em; margin-bottom: 0.1em;display:block;} 
.search-item-description	{line-height:150%;}
.search-item-url {font-size:120%} 

/* slides
*
*/

.slideshowbox {
  margin: 0px;
  padding: 0px;
  position: relative;
  display: inline-block;
  width: 100%;
  max-height: 480px;
  /* width: 980px; */
  overflow-y: hidden; 
}

.slide {
  position: relative;
  margin: 0px;
  top: 0px;
  display: none;
  
  /* max-width: 980px;
  max-height: 480px;
  height: 480px; */
  transition:  0.8s ease;
  overflow-y: hidden;
  /* border: 1px solid red; */
}

.slide h1, .slide h2, .slide h3 {
	font-family: "Segoe UI","SegoeUI","Helvetica Neu","Helvetica";
	line-height: 1.2em;
	color: #333;
}

.slide li {
	line-height: 1.5em;
	
}

h1.top { 
  margin-top: 2em;
}

h1.bottom { 
  position: absolute;
  bottom: 3em;
}

.sidebg {
	width: 60%;
	height: 100%;
	position: absolute;	
}


.fade:after {
	content:'';
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, transparent 33%, white 65%);
}


/* slide text
*
*/

.sltxt {
	width: 40%;
	height: 100%;
	position: absolute;
	padding: 2em 2em 1em 1em;
	right: 0px;
	top: 0px;
}

.sltxt em {
	display: inline-block;
	padding: .2em 1em .4em 1em;
	background-color: tomato;
	color: white;
	font: normal 1.3em "Segoe Ui", Arial, sans-serif;
}

.stlxt a {box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.fl {
  /* floatlink button */
  display: inline-block;
  padding: .25em .9em;
  position: absolute;	
  top: 111px;
  background-color: #E60;
  color: white;
  font-weight: bold;
}
.fl:hover {
  box-shadow: 1px 1px 6px #aaa;
  color: white;
}

.onimg {
  position: absolute;
  top: .2em;
  left: .5em;
  font-family: Arial;
  font-weight: bold;
  line-height: .8em;
}

.slideLinkButton:hover { color:#FFF;text-decoration: none;}

.slideLinkButton {
  font-family: "Segoe UI", "SegoeUI", "Helvetica Neu", Helvetica;
  font-weight: bold;  
  display: inline-block;
  padding: .25em .9em;
  position: relative;	
  /* top: 111px;*/
  background-color: #E60;
  color: #ccc;
}

#btnLeft, #btnRight {
	display: block;
	position: absolute;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 0px; 
    font-size:2em;
    color:white;
    transition: 0.4s ease-in-out;
    padding:22% 1em;
	margin: 0px;
   text-decoration:none;
	bottom:0;
	overflow: hidden;
	text-shadow: 2px 2px 4px #ccc;
	/* height: 44%;*/
}
#btnRight {
    right:0;
}

#btnRight:hover, #btnLeft:hover {
    background-color: rgba(222, 222, 222, 0.8);
  }

.slideNavDots {
    text-align: center;
    position: relative;
    top: -2em;
}

.dot {
    cursor: pointer;
    height: .8em;
    width: .8em;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 22%;
    display: inline-block;
    transition: background-color 0.6s ease;

}

.dot:hover {
    background-color:#55f;
  }
/* context menu */
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.

*/
/* 
    position: fixed;
    display: block; show this only on small screens 
    top: 0;
    left: 0;  "#menu width"
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px;  change this value to increase/decrease button size
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em; */
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #333;
    background: rgba(51,51,51,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 101;
    width: 2em;
    height: auto;
    padding: 1.8em 1.2em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }
 
 /*
Add transition to containers so they can push in and out.
*/
#main,
#contextmenu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.

#main {
    position: relative;
    left: 0;
    padding-left: 0;
	margin-top: 1em;
}
*/
    #main.active #contextmenu {
        left: 0;
        top: 3em;
        /* width: 150px; */
    }

    #main.active .menu-link {
        left: 150px;
    }

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/* default padding for main */
/*#main {
    padding-left: .8em;
    padding-right: .8em;
}*/
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

/*    .header,
 */
    /*#main {
        padding-left: 0em;
        padding-right: 0em;
    }*/

    #main {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
		margin-top: 1em;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }
	
	#maincontent { padding:0;}
	
	#foot { padding-left: 150px; /* left col width "#menu" */
        left: 0;}
    
    #contPh  {
    display: inline-block;
    padding-left:.5em; 
    padding-right:.5em; 
    }

    #contextmenu {
    position: static;
    }
    
    #contextmenu p { 
      display:none; 
      }
    
    #main.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 150px;
    }
	.desk { display: none; }
}