DIV.aonaid {padding: 10px 80px 10px 80px; margin: 4px 0px 4px 0px; border-top: 1px dotted #999999; font-size: 95%; }
DIV.aonaid LI {list-style-image: url(Nabytek/BulletS.gif);padding-bottom: 3px;padding-left: 10px;font-size: 1em;}
DIV.aonaid P {margin-top: 5px;font-size: 1em;margin-bottom: 0px;padding-bottom: 0px;}
DIV.aonaid UL {margin-top: 4px;margin-bottom: 4px;}
DIV.aonaidlist {font-size: 1.1em;color: #678FC2;text-align: center;padding-bottom: 4px;margin-bottom: 4px;}

/*Line under the upper menu with links to course and unit*/
DIV#coursemenubar {width: 100%; position: relative; background-color: #c0d5f2; /*background-image: url(/Nabytek/menu_back.gif); */
                   background-repeat: repeat-x; background-position: 0px -2px; height: 30px;}
DIV#coursemenubar DIV.ranganna-logo {position: absolute; left: 200px; top: -6px; display: none;}	
DIV#coursemenubar DIV.ranganna-logo A.rangana-logo {display: inline;}
DIV#coursemenubar DIV.icons {position: absolute; right: 3px; top: 6px;}
DIV#coursemenubar DIV.course_menu_button {padding: 10px 0px 6px 10px; border-right: solid 1px #fff; display: block; width: 180px;
                                          text-align: left; text-transform: uppercase; color: #fff; font-weight: bold;}
DIV#coursemenubar DIV.course_menu_button_small {display: none; width: 40px; height: 30px;} 
DIV#coursemenubar DIV.course_menu_button_small > ul > li > A {border-right: solid 1px #fff; display: block; width: 40px; height: 30px; 
                                              background-image: url(/Nabytek/HamburgerBlue.png);}
DIV#coursemenubar DIV.course_menu_button_small > ul > li > A:hover {background-image: url(/Nabytek/HamburgerBlueHighlight.png);}
DIV#coursemenubar DIV.course_menu_button_small ul#course_nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

OL#navigation-bar {border: none; margin: 0px;}
DIV#pathrow {margin: 6px 0px 6px 0px; /*min-height: 25px;*/ border: 1px solid #cccccc; border-radius: 6px; font-size: 10px;
    -webkit-border-radius: 6px;
	-moz-border-radius: 6px;}
DIV#pathrow DIV.icons {float: right; margin-top: 3px; margin-left: 10px;}
DIV#body DIV#pathrow A.rangana-logo {display: none;}

DIV#contentdiv {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px;}

/*Arrows for listing*/
A.arrow_right {float: right;margin-top: 5px;margin-left: 10px;}
A.arrow_left {float: left;margin-top: 5px;margin-right: 10px;}
DIV.repeat_arrows {padding-top: 5px;border-top: 1px dotted #999999;margin-top: 10px; height: 50px;}

DIV.aonadtitle {font-size: 1.5em;color: #678FC2;text-align: center;padding-bottom: 10px;border-bottom: 1px dotted #999999;
                margin-bottom: 10px; margin-top: 10px;}
DIV.steptitle {font-size: 1.5em;color: #444444;text-align: center;padding-bottom: 10px;border-bottom: 1px dotted #999999;
               margin-bottom: 10px; margin-top: 10px;}

DIV.boxik {padding: 10px 20px; margin: 30px 80px 30px 80px;background: #FFF0B7; font-size: 1.2em;}

/*Subtitles box*/
#subtitles {margin-bottom: 20px; padding: 10px 10px 5px 10px; background-color: #FEF5E3; border-bottom: 2px solid #FDD07C;
	float: right; width: 200px; margin-left: 20px; margin-top: 10px;}
#subtitles IMG {float: left; }
#subtitles DIV {margin-bottom: 5px}
#subtitles DIV.title {font-weight: bold; margin-left: 45px; margin-bottom: 10px}
#subtitles DIV.instructions {clear: left;}

/*Course menu (vertical, left-hand side)*/
/*#coursemenucolumn {width: 170px; float: left;}*/
#course_innards {position:relative;}
#coursemenucolumn {width: 180px; position: absolute; top: 30px; left: 0px; background: #fff;}
DIV.caption {padding: 10px 0px 4px 0px; text-align: left; text-transform: uppercase; color: #333333; font-weight: normal;}
DIV.underline {border-bottom: 1px solid #73A5A4; text-transform: uppercase; font-weight: normal; padding-bottom: 0px; margin-bottom: 4px;}
DIV.caption A { display: block; margin: 0px 0px 0px 0px; padding: 4px;}
DIV.noA { margin: 4px 0px 4px 0px; padding: 14px 4px 4px 4px;}
DIV.caption A:hover {text-decoration: none; background-color: #E0E5F2;}

UL.aonadmenu {margin: 10px 0px; padding: 0px}
UL.aonadmenu LI {display: block;}
UL.aonadmenu LI A { display: block; margin: 0px 0px 6px 0px; padding: 4px;}
UL.aonadmenu LI A:hover {text-decoration: none; background-color: #E0E5F2;}
UL.aonadmenu LI.current A {background-color: #D7D7D7;}
UL.aonadmenu LI span { display: block; margin: 0px 0px 6px 0px; padding: 4px; color: #808080;}
UL.aonadmenu LI.section {border-top: solid 1px #D7D7D7;}
UL.aonadmenu LI.section_after {border-bottom: solid 1px #D7D7D7;}

UL.aonadmenu-dropdown {padding: 8px;
                       background-color: #fff;
                       z-index: 999;
  margin: 0px 0;
  width: 190px;
  list-style: none;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) 3px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) 3px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) 3px 5px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  position: absolute;
}


#contentcolumn {margin-left: 190px; border-left: 1px solid #6F98CC; padding-top: 10px; z-index: 2;}
#onestep_contentcolumn {margin-left: 10px;}


/*Styles of a content of a step*/
#stepcontent {font-family: "Trebuchet MS"; font-size: 1.2em;}
#stepcontent A {color: #0066cc;}
#stepcontent P {line-height: 1.7em;}
#stepcontent TABLE {border-collapse: collapse;empty-cells: show;margin-bottom: 1em;background-color: #FFFFFF;border-top: 1px solid #8AAFE1;border-left: 1px solid #8AAFE1;border-right: 1px solid #8AAFE1;}
#stepcontent THEAD {background-color: #E5EEFD;}
#stepcontent TD {border-bottom: 1px solid #8AAFE1; padding: 4px 4px 4px 4px; vertical-align: top;}
#stepcontent H2 {font-size: 1.3em;color: #C26C67;padding-top: 10px;}
#stepcontent strong {color: #369074;font-weight: bold;}
#stepcontent LI {padding-bottom: 6px; padding-left: 14px; margin-left: 5px; text-indent: 5px;}

DIV#stepcontent LI
{
	margin-left: 10px;
	padding-left: 14px;
	font-weight: normal;
	font-size: 1.2em;
	margin-bottom: 10px;
	list-style-position: outside;
	text-indent: 0px;
	line-height: 20px;
}


#stepcontent UL {padding-bottom: 6px; padding-left: 4px; margin-left: 5px;}


/*Styles of a bilingual content of a step*/
#stepcontent DIV.bilingual .translation {clear: right; float: right; width: 45%; margin-left: 5%; font-style: italic; margin-top: 0px;}
#stepcontent DIV.bilingual .indent {margin-top: 10px;border-top: 2px solid #C1C1C1;padding-top: 10px;border-bottom: 2px solid #C1C1C1;margin-bottom: 10px;}
#stepcontent DIV.bilingual P {width: 45%; margin-top: 0px;}
#stepcontent DIV.bilingual H2 {width: 45%; margin-top: 0px;}


/*Styles for english texts*/
#stepcontent DIV.en {display: block; font-weight: normal; font-size: 90%; color: #888888; margin: auto; margin-top: 6px; 
                     line-height: 1.3em; /*position: relative;  top: -5px;*/}
#stepcontent A.en_plus {font-weight: normal;font-size: 0.8em;color: #AAAAAA;text-decoration: none;margin-left: 3px;border-bottom: none;
                        font-style: normal;padding: 0px 2px 0px 2px;}
#stepcontent A.en_plus:hover {text-decoration: none;background-color: #CCCCCC;}

#stepcontent DIV.eng {display: block; font-weight: normal; font-size: 95%; color: #666666; margin: auto; margin-top: 6px; line-height: 1.3em; /*position: relative;  top: -5px;*/}


/*Dialogové scénky v pohozené mezi textem*/
#stepcontent DIV.theatre {
	background-image: url(/Nabytek/speechbubble.gif);
	background-position: top left;
	background-repeat: no-repeat;
	padding: 0px 10px 0px 50px;
	background-color: #F8F5F1;
	border-top: 2px solid #AEE1FB;
	border-bottom: 2px solid #AEE1FB;
}
#stepcontent DIV.theatre P {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*Warning box*/
DIV.exclamation
{
	padding-right: 10px;
	background-position: left top;
	border-top: #ff7f50 2px solid;
	padding-left: 70px;
	background-image: url(/Nabytek/exclamationmark.png);
	padding-bottom: 0px;
	padding-top: 0px;
	border-bottom: #ff7f50 2px solid;
	background-repeat: no-repeat;
	background-color: #ffead6;
	margin: 15px 0px 15px 0px;
}
DIV.exclamation P 
{
	margin-top: 10px;
	margin-bottom: 10px;
}

DIV.exclamation_yellow
{
    background-color: #FFFF66;
    border-top-color: #FFCC00;
    border-bottom-color: #FFCC00;
}

/*Information box*/
DIV.info {
	background-image: url(/Nabytek/info_2.png);
	background-position: top left;
	background-repeat: no-repeat;
	padding: 0px 10px 0px 50px;
	background-color: #F8F5F1;
	border-top: 2px solid #AEE1FB;
	border-bottom: 2px solid #AEE1FB;
}
DIV.info P {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.9em;
}



DIV.yesno IMG {float: left; width: 20px; height: 20px; padding: 0px; margin: 0px 0px 0px -40px; }
DIV.yesno {clear: left; margin-left: 50px; margin-top: 6px; margin-bottom: 20px; vertical-align: text-top;}

DIV.gluais {font-family: Tahoma, sans-serif; font-size: 0.9em; margin-top: 6px;}
DIV.gluais DIV.irl {color: #555555; font-weight: bold; float: left; width: 300px; text-align: right; padding-right: 8px;}
DIV.gluais DIV.line {font-weight: normal; line-height: 20px;}
DIV.gluais H1 {font-weight: bold; color: #336699; margin-bottom: 8px; text-align: center; font-size: 1.3em;  border-bottom: 1px solid #555555; padding-bottom: 3px;}

#stepcontent A.pdf {display: block; padding-left: 64px; padding-top: 20px; background: url(/Nabytek/pdf-logo.png) no-repeat 0px 0px; min-height: 40px; color: #000000;}
#stepcontent A.pdf:hover {text-decoration: underline;}

iframe#coursedashboard {position: fixed; left: 0px; width: 100%; bottom: -1px; height: 32px; z-index: 20;}
* html iframe#coursedashboard {display: none;}



.coursealert {
  display: none; /* Hidden by default */
  /*position: absolute;*/ /* Stay in place */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  z-index: 1; /* Sit on top */
  left: 200px;
  bottom: 36px;
  width: 200px; /* Full width */
  height: 180px; /* Full height */
  overflow: hidden;
  background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  opacity: 1;
  transition: display 2s linear;
}

.coursealert.hideme {
    display:none !important;
}
.coursealert.showme {
    display:block !important;
}

.coursealert::after {
  content: "";
  position: relative;
  top: 100%;
  /*left: 50%;*/
  /*margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ffb944 transparent transparent transparent;*/
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #ffb944;
}

.coursealert:hover .coursealert-content {
  visibility: visible;
  opacity: 1;
}

/* Modal Content/Box */
.coursealert-content {
  border-radius: 6px;
  background-color: #ffb944;
  margin: 16px auto; /* 16px from the top and centered */
  padding: 10px;
  height: 130px;
}

/* The Close Button */
.coursealert .closebtn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.coursealert .closebtn:hover,
.closebtn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

div.epv_footer {
    margin: 0px;
    padding: 14px 0px 20px 0px;
    border-bottom: solid 2px #fff;
    color: #000;
    font-size: 12px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1000px or less */
@media screen and (max-width: 1000px) {
DIV#coursemenubar DIV.course_menu_button {display:none;}
DIV#coursemenubar DIV.course_menu_button_small {display: block;} 
#coursemenucolumn {display: none;}
#contentcolumn {margin-left: 0px; border-left: none;}
DIV#menubar {display:none;}

#bottom_nav_wide {display: none;}
#bottom_nav_narrow {display: block;}

iframe#coursedashboard {height: 64px;}

}

/* for 480px or less */
@media screen and (max-width: 480px) {
iframe#coursedashboard {height: 96px;}
}