html {
}

body {
  padding:0;
  margin: 15px auto;
  background-color:#8c9163;
    background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;  
  overflow-y: auto;  /* here and not in 'bgfader' to avoid click in scrollbar to generate event in 'bgfader' */
  overflow-x: hidden; /* see above */
  /*position:absolute;*/
  height:100%;
}
.bgfader {
  /* http://codepen.io/jedierikb/pen/JqaCb */
  position:absolute; /* so that a vertical scrollbar is created when needed but it will belong to the body */
  top:0;
  left:0;
  width:100%; /* do not use height:100%; it makes bgfader end at the bottom of screen; whatever scrolls, is not covered*/
  min-height:100%; /* without this, bgfader will always end where the body ends  min-height fixed all, apparently*/
  padding:0;
  margin:0;
  background-color:transparent;
}
.holder{
    border-radius:18px;  /* bigger than base to hide better underneath */
    margin: 15px auto 3px auto;
    position: relative;
    width: 640px;
    background-color:#aaaaaa;  /* not seen */
    color: #656948;
    overflow:auto; /* avoids header logo from moving down breaking the layout when layout is squeezed */
    box-shadow: 6px 6px 14px 2px rgba(0,0,0,0.3);
    z-index:3;
 }
.top-wrapper{ 
    width: 100%;
    height: 80px;
    background: linear-gradient(to right,#99cc66,#cde6b5);
    border-radius:30px 30px 0 0;  /* hidden rounded corners */
}
.top-bg {
    background-color:#ffffcc;
    border-radius:15px;
    width:100%;
    height:100%;
}
.logo {
    background-color:#cdd397;
    border-radius:10px;
    width:110px;
    height:50px;   
    text-align: center;
    font-size:.65em;
    font-family:verdana,georgia,arial,sans-serif;
    line-height: 48px;  /* -2 makes the text seem more at the center vertically */
    text-align: center;
    float:left;
    margin: 15px 0 0 15px;
    cursor:pointer;
}
.ctitle {
    background-color:#b6bc82;
    border-radius:10px;
    width:485px;
    height:50px;   
    text-align: center;
    font-size:.7em;
    font-family:verdana,georgia,arial,sans-serif;
    line-height: 50px;  /* -5 makes the text seem more at the center vertically */
    text-align: center;
    float:right;
    margin: 15px 15px 0 0;
}
.core-wrapper{
    display:table;
    width: 100%;
    height: 100%;
    background-color:#ffffcc;
    position:relative;
    min-height:300px;
}
.core-row {
    display:table-row;
    font-family:"trebuchet MS",georgia,arial,sans-serif;
    font-size:14px;
    height: 300px;  /* defines a minimum height that works in Firefox too */
}
.navigation {
    display:table-cell;
    background-color:#99cc66;
    border-radius:0 15px 15px 0;
    width:105px;
    height:100%;
    padding:0 10px 0 10px;
}
.navigation p {
	line-height: 20px;
}
.separator {
    display:table-cell;
    width:15px;
}
.contents {
    display:table-cell;
    padding: 0 15px 0 15px;
    background-color:#cde6b5;
    border-radius:15px 0 0 15px;
    overflow:hidden;
}
.footer-wrapper {
    background: linear-gradient(to right,#99cc66,#cde6b5);
    border-radius:0 0 30px 30px;  /* hidden rounded corners */
    width:100%;
    height: 80px;
    vertical-align:middle;
}
.footer-bg {
    background-color:#ffffcc;
    border-radius:15px;
    width:100%;
    height: 65px;
    padding: 15px 0 0 0;
}
.footer {
    background-color:#cdd397;
    border-radius:10px;
    width:610px;
    height:50px;
    margin: 0 auto;
    text-align: center;
    font-size:.65em;
    font-family:verdana,georgia,arial,sans-serif;
    line-height:13px;
}
.ctitle img {
    display: inline-block;
    padding: 6px 0 0 0;
    width:400px;
}
.footer span {
    display: inline-block;
    padding: 5px 0 0 0;
}

/* unvisited link */
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
/* visited link */
a:visited {
    color: #ffffcc;
}
/* mouse over link */
a:hover {
    color: #8c9163;
}
/* selected link */
a:active {
    color: #6D714D;
}
.acc-container a:link, .acc-container a:visited {
  color: green;
}
.acc-container a:hover {
  color: #8c9163;
}
.ins a:link {
    color: #8c9163;
    text-decoration: none;
}
.ins a:visited {
    color: #73994D;
}
.ins a:hover {
    color: #71715a;
}
.ins a:active {
    color: #6D714D;
}
a.val:link {
   color: #656948;
}
a.val:visited {
   color: #656948;
}
.tut a:link {
    color: #bd9060;
}
.tut a:visited {
    color: #bd9060;
}
.tut span {
  font-size:12px;
  padding:0;
}
.itson a:visited, .itson a:link {
  color:#cde6b5;
}
.itson a:hover {
  color: #8c9163;
}
.itsoff a:visited, .itsoff a:link, .imon a:visited, .imon a:link {
  color: #ba6363;
}
.itsoff a:hover {
  color: #8c9163;
}
.imon a:hover {   /* dunno why cannot be combined with class 'ins' */
    color: #71715a;
}
#playlist li {
  color:#99cc66;
}
hr {
	background-color:#ffffcc;
	height:1px;
	border:none;
}
.turnon:visited {
  color:#cde6b5;
}
.turnon:hover {
  color:#8c9163;
}
/* http://www.bennadel.com/blog/1735-using-css-fixed-position-elements-across-browsers-without-javascript.htm */
#arrowL {
  margin:15px 0 0 15px;
  opacity:0.7;
  position:fixed;
  left:0px;
  top:0px;
  z-index:7;
  cursor:pointer;
  width:64px;
  height:96px;
  /*transition: opacity .25s ease-in-out;*/ /* see http://www.levihackwith.com/css-transitions-cause-jquery-fadein-to-not-work/ */
}
#arrowL:hover {
  opacity:1;
}
#arrowR {
  width:64px;
  height:96px;
  margin:15px 15px 0 0;
  opacity:0.7;
  position:fixed;
  right:0px;
  top:0px;
  z-index:7;
  cursor:pointer;
  /*transition: opacity .25s ease-in-out;*/  /* this breaks the jQuery fadein effect */
}
#arrowR:hover {
  opacity:1;
}
#bingtext {
  display:inline-block;
  padding:0;
  margin:0;
  max-width:580px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

code {
  font-size:12px;
  color: #8c9163;
  line-height:20px;
}

.ff {
    font-size:14px;
    padding:0;
}

#pt {
  width:65%;
  margin-left:auto; 
  margin-right:auto;
}

#red {
  color:#d90000;
}
#green {
  color:green;
}
#wait {
  position:relative;
  top:2px;
  margin-right:-25px;
  padding-left:5px;
}
.nonep {
  cursor: default;
}
tr.withp td {
  cursor: pointer;
  background-color:white;
}
#np {
  font-family:courier,"courier new";
}

.qmark {
  cursor: help;
}
#e404 {
    border-radius:15px;
}
.noscriptmsg {
  font-size:26px;
  font-family:'Trebuchet MS';
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color:chocolate;
  text-align:center;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url("/pics/nocando/pic_12.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;  
 }
 .noscriptmsg a {
 color:crimson;
 }

#cookie-notification {
    background: url(/pics/cookie-notification-bg.png) repeat;
    bottom: -300px;
    box-shadow: 0 -5px 15px #000;
    display: block;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 9999;
    border-top: 1px solid #333;
    color: #fff;
}

#cookie-notification-inner {
    margin: 20px 50px 30px 50px;
    padding-right: 125px;
    position: relative;
    font-size: 13px;
}

#cookie-notification-inner a {
    color: chocolate;
}

#cookie-notification-inner input#cn-except {
    background: url(/pics/cn-continue-btn.png) no-repeat center center;
    width: 110px;
    height: 33px;
    border: 0;
    color: transparent;
    font-size: 0;
    position: absolute;
    right: 0;
    top: 36%;
    cursor: pointer;
    opacity: 1;
}

#cookie-notification-inner input#cn-except:hover {
    top: 37%;
}

#cookie-notification-inner {
  font-family: Arial,'Trebuchet MS',sans-serif;
  font-size: .8em;
  word-wrap: break-word;
}

#loadwrapper {  /* wrapper just to make the loadpic div centered AND fixed */
  margin:0;
  padding:0;
  width:100%;
  position: fixed;
  z-index:5;
}
#loadpic {
  margin:0 auto;
  padding:0;
  text-align:center;
  position:relative;
  color:#999;
  font-family:Arial,sans-serif;
  font-size:13px;
  top:10px;
  background-color:black;
  width:100px;
}
/*
#clocksettings {
   padding-bottom: 12px;
   display: none; 
}
#clocksettings fieldset {
  width: 360px;
   padding:0 0 8px 15px;
   margin:10px 0 10px 40px;
   border:2px solid #99cc66;
   border-radius: 10px;
   background-image: url('http://oneoakway.com/mail/bg_green.jpg');
}
#clocksettings legend {
   font-size: 0.9em;
   color: black;
   padding-left:5px;
}
*/
input {
  vertical-align: -1px;
}
.humidify img {
	margin:15px 0 -5px 9px;
}
.humidify p {
	margin-left: 9px;
}

#audiop {
	height: 50px;
}

figure.zoom {
	background-position: 50% 50%;
	position: relative;
	/*width: 420px;*/
	overflow: hidden;
	cursor: zoom-in;
	margin: 0px 0px 0px 0px;			
}
figure.zoom img:hover {
	opacity: 0;
}
figure.zoom img {
	transition: opacity .5s;
	display: block;
	width: 100%;
	margin: 0px 0px 0px 0px;
}