/* 
style sheet krodde-aaa.css
last modified: August 27, 2020
*/
/*
page layout
*/
#container {
  position:         absolute;
  left:             0;
  top:              0;
  width:            100%;
  color:	    	black;
  background:		white;
  font-family:		arial, sans-serif;
  font-size:		1em; }
#container tr {
  text-align:       left;
  vertical-align:   top; }
#container td,th {
  padding:          5px; }
#top {
  position:         relative;
  float:            left;
  margin:           0 2%;
  width:            96%; }
#left {
  position:         relative;
  float:            left;
  margin-left:      2%;
  width:            18%; }
#right {
  position:         relative;
  float:            left;
  margin:           0 2%;
  padding-bottom:   2%;
  width:            76%; }
#bottom {
  position:         relative;
  float:            left;
  margin:           0 2%;
  width:            96%; }
/*
global properties
*/
a {
  color:            black; }
a:hover {
  background:	    #dddddd;
  text-decoration:  none; }
h1 {
  font:		    	bold x-large "comic sans ms", arial, sans-serif;
  border-bottom:	3px solid black;
  padding-bottom:	5px; }
h3 {
  font:			    bold larger "comic sans ms", arial, sans-serif; }
abbr {
  text-decoration-style:    dotted; }
.style1 {
  color:		    black; }
.style2 {
  color:		    black; }
.separator {
  clear:            both;
  height:           0; }
.col { 
  float:            left;
  width:            48%;
  padding:          1%; }
.col::after {
  content:          "";
  clear:            both;
  display:          table; }
.d-list {
  padding-left:     40px; }
.small {
  color:		    black;
  font-size:		small; }
.magazine {
  width:            100%;
  -webkit-column-count: 3;
  column-count:     3; }
.magazine::after {
  content:          "";
  clear:            both;
  display:          table; }
::selection {
  color:            black;
  background:       yellow; }
/*
top area: banner, hamburger and main menu
*/
/* banner */
#top #banner {
  display:			block;
  height:           115px;
  overflow:         hidden; }
#top #banner ul {
  display:			block;
  width:            10000px; }
#top #banner li {
  display:			inline; }
#top #banner li img {
  height:			100px;
  padding:          0 1px; }
#top #banner #trans {
  -webkit-animation-duration: 200s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: trans;
  animation-duration: 200s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: trans; }
#top #banner #trans:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }
@-webkit-keyframes trans {
  from { -webkit-transform: translate(400px, 0); }
  to { -webkit-transform: translate(-10000px, 0); } }
@keyframes trans {
  from { transform: translate(400px, 0); }
  to { transform: translate(-10000px, 0); } }
/* hamburger */
#top #hamburger {
  float:            left;
  width:            8%;
  padding:          1%; }
#top #hamburger img {
  width:            50px;
  padding-top:      5%; }   
/* menu */
#top #menu {
  float:            right;
  width:            90%;
  text-align:		center;
  font:				x-large "comic sans ms", arial, sans-serif; }
#top #menu ul {
  display:			block;
  padding:			10px 0;
  background:	    #eeeeee; }
#top #menu li {
  display:	    	inline;
  margin:	    	0;
  padding:		    10px;
  background:	    #eeeeee;
  border-left:		1px solid white;
  border-right:		1px solid white; }
#top #menu li:hover {
  background:	    #dddddd; }
#top #menu li a {
  background:	    #eeeeee;
  text-decoration:	none; }
#top #menu li:hover a {
  background-color:	#dddddd; }
#top #menu li a#activemenu {
  color:	    	red; }
#top #menu li img {
  padding:		    0; }
/*
left area: picture, submenu, alert, validator, and fly
*/
/* picture */
#left #picture {
  position:			relative;
  left:             2%; }
#left #picture img {
  width:            95%; }
/* submenu */
#left #submenu {
  position:			relative;
  left:		        0;
  margin:           2%; }
#left #submenu ul {
  margin:			0;
  list-style:		none; }
#left #submenu a {
  display:			block;
  width:            85%;
  background:	    #eeeeee;
  padding:	    	3px 0px 3px 15px;
  margin:	    	0px 0px 2px 0px;
  text-align:		left;
  font:				x-large "comic sans ms", arial, sans-serif;
  text-decoration:	none; }
#left #submenu a:hover {
  background:	    #dddddd; }
#left #submenu a#activesubmenu {
  color:		    red; }
/* alert */
#left #alert {
  position:			relative;
  margin:           10% 0;
  text-align:       center; }
/* validator */
#left #validator {
  position:			relative;
  margin:           10% 0;
  text-align:       center; }
/* fly */
#left #fly  {
  position:         fixed;
  top:              30%;
  left:             0; }
/*
right area: button, feed and tree-list
*/
#right img {
  border-radius:    8px;
}
/* button */
#right #button {
  width:            120px;
  font:	        	larger "comic sans ms", arial, sans-serif;
  background:   	#eeeeee;
  text-align:   	center;
  border:           1px solid #aaaaaa;
  padding:      	5px; }
#right #button:hover {
  background:   	#dddddd; }
/* tree-list */
#right #tree-list * {
  margin:           0;
  padding:          0; }
#right #tree-list   a {
  color:			black;
  background:	    white;
  text-decoration:	none; }
#right #tree-list   a:hover {
  color:			black;
  background:	    #dddddd; }
#right #tree-list ul {
  background:       transparent url(gifs/onepixel-black.png) repeat-y 25px 0;
  list-style:       none; }
#right #tree-list li {
  background:       white;
  padding:          2px 0 2px 10px; }
#right #tree-list li a {
  display:          block; }
#right #tree-list li ul {
  background:       transparent url(gifs/onepixel-black.png) repeat-y 15px 0; }
#right #tree-list li ul li {
  background:       transparent url(gifs/onepixel-black.png) repeat-x 0 8px;
  margin:           5px 0 0 15px;
  padding:          0 0 0 20px; }
#right #tree-list li ul li a {
  padding-left:     10px; }
/*
bottom area: footer
*/
/* footer */
#bottom #footer {
  position:         relative;
  background:       #eeeeee;
  margin:           10px 0;  }
#bottom #footer td {
  text-align:       center;
  background:       #eeeeee;
  vertical-align:   middle; }
#bottom #footer td:hover {
  background:       #dddddd; }
#bottom #footer a {
  background:       #eeeeee; }
/*
@media
*/
@media (max-width:  1280px) {
#top {
  margin:           0 1%;
  width:            98%; }
#top #menu {
  font-size:	    large; }
#top #menu li {
  padding:		    10px 4px; }
#left {
  margin-left:      1%;
  width:            19%; }
#left #submenu {
  margin-right:     0; }
#left #submenu a {
  padding:	    	3px 10px 3px 5px;
  font-size:        large; }
#right {
  margin:           0 1%;
  width:            78%; }
#bottom {
  margin:           0 1%;
  width:            98%; }
.magazine {
  -webkit-column-count: 2;
  column-count:     2; }
}
@media (max-width:  768px) {
#top #menu {
  font-size:	    medium; }
#left #submenu a {
  font-size:        medium; }
}
@media (max-width: 600px) {
#top {
  width:            55%;
  margin:           10px 2% 0 2%; }
#top #banner {
  display:          none; }
#top #hamburger {
  display:          block;
  width:            20%; }
#top #hamburger img {
  width:            100%; }
#top #menu {
  display:          block;
  float:            right;
  width:            55%;
  font-size:        medium; }
#top #menu ul {
  margin:           0;
  padding:          0; }
#top #menu li,li a {
  display:	        block;
  padding:          0 0 0 5%;
  text-align:       left; }
#top #menu img {
  display:	        none; }
#left {
  width:            30%;
  margin:           10px 0 0 5%; }
#left #picture {
  display:          none; }
#left #submenu {
  display:          block;
  margin:           0; }
#left #submenu a {
  width:            90%;
  margin:           0;
  padding:          0 0 0 10%;
  font-size:        medium;
  text-align:       left; }
#left #alert {
  display:          none; }
#left #validator {
  display:          none; }
#right {
  width:            96%;
  margin:           0 2% 0 2%; }
#right a {
  display:          inline;
  padding:          0;  }
.col {
  float:            none;
  width:            100%;
  padding:          0; }
.magazine {
  -webkit-column-count: 1;
  column-count:     1; }
}
/*
end of krodde-aaa.css
*/