/*
 * BannerBody----------------------------------------------------------------------------------------------------------------------------
 */

#bannerBody {
	position: fixed;
	width: 100%;
	height: 54px;
	background: url(../img/bannermenu_bg.png) repeat-x;
	z-index: 999;
}

#bannerBody a:link, a:visited, a:active {
	color: #eee;
	text-decoration: none;
}

/*
 * Banner--------------------------------------------------------------------------------------------------------------------------
 */

/* Is used for the icons in the bannermenu */
.icomoon{
	font-family: "icomoon";
}

/* Centers the bannermenu */
#bannerWrapper {
	width: 1024px;
	margin: 0 auto;
	color: #eee;
}

#bannerLogoButton {
	width: 159px; /* Total width: 162px with :before below */
	height: 53px;
	background-color: #333;
	background-image: url(../img/logo_button.png);
	background-repeat: no-repeat;
	border-right: 1px solid #111;
	border-left: 1px solid #111;
	float: left;
}

/* Draws the extra light grey border for emboss effect */
#bannerLogoButton:before {
	content: '';
	width: 159px;
	height: 53px;
	position: absolute;
	border-right: 1px solid #555;
	border-left: 1px solid #555;
}

#bannerLogoButton:hover {
	height: 53px;
	background-color: #ae2771;
}

/* Groups the content in the header between the LenaSYS button and the user button */
#bannerContent {
	width: 698px; /* Total width: 698px */
	height: 54px;
	background: url(../img/bannermenu_bg.png) repeat-x;
	float: left;
}

#bannerContentCMS {
	display: relative;
}

/* Contains the header for the CMS page */
#bannerHeaderCMS{
	width: 640px; /* Total width: 640px */
	height: 18px;
	padding: 24px 29px 12px;
	color: #eee;
	font-size: 1.8em;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
}

/*
 * Start of content for bannermenu in Codeviewer. Everything in this block is needed for the bannermenu in CodeViewer--------------
 */

#bannerContentExample {
	display: none;
}

/* Contains the icon for the dropdownmenu in Codeviewer */
#bannerCodeviewerMenuButton {
	width: 31px; /* Total width: 52px with :before below */
	height: 29px;
	background-repeat: no-repeat;
	padding: 12px 10px;
	font-size: 3.0em;
	border-right: 1px solid #111;
	float: left;
}

/* Draws the extra light grey border for emboss effect */
#bannerCodeviewerMenuButton:before {
	content: '';
	width: 31px;
	height: 53px;
	margin: -12px 11px;
	position: absolute;
	border-right: 1px solid #555;
}

#bannerCodeviewerMenuButton:hover {
	height: 29px;
	background-color: #ae2771;
}

#bannerLeftArrowButton {
	width: 25px; /* Total width: 40px */
	height: 34px;
	background-repeat: no-repeat;
	padding: 16px 5px 8px 10px;
	font-size: 2.5em;
	float: left;
}

#bannerLeftArrowButton:hover {
	height: 29px;
	background-color: #ae2771;
}

#bannerRightArrowButton {
	width: 24px; /* Total width: 42px with :before below */
	height: 29px;
	background-repeat: no-repeat;
	padding: 16px 12px 8px 5px;
	font-size: 2.5em;
	border-right: 1px solid #111;
	float: left;
}

/* Draws the extra light grey border for emboss effect */
#bannerRightArrowButton:before {
	content: '';
	width: 24px;
	height: 53px;
	margin: -16px 13px;
	position: absolute;
	border-right: 1px solid #555;
}

#bannerRightArrowButton:hover {
	height: 29px;
	background-color: #ae2771;
}

#bannerPlayButton {
	width: 24px; /* Total width: 52px with :before below */
	height: 29px;
	background-repeat: no-repeat;
	padding: 16px 14px 8px 13px;
	font-size: 2.5em;
	border-right: 1px solid #111;
	float: left;
}

/* Draws the extra light grey border for emboss effect */
#bannerPlayButton:before {
	content: '';
	width: 24px;
	height: 53px;
	margin: -16px 15px;
	position: absolute;
	border-right: 1px solid #555;
}

#bannerPlayButton:hover {
	height: 29px;
	background-color: #ae2771;
}

/* Contains the header for the Codeviewer page */
#bannerHeaderExample{
	width: 440px; /* Total width: 460px */
	height: 18px;
	padding: 24px 10px 12px;
	font-size: 1.8em;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	float: left;
}

/* Contains the icon for keywords for the instructor and change view for the student */
#bannerExtraButton {
	width: 24px; /* Total width: 52px with :before below */
	height: 24px;
	background-repeat: no-repeat;
	padding: 17px 13px 12px 14px;
	font-size: 2.5em;
	border-left: 1px solid #111;
	float: left;
}

/* Draws the extra light grey border for emboss effect */
#bannerExtraButton:before {
	content: '';
	width: 24px;
	height: 53px;
	margin: -17px -14px;
	position: absolute;
	border-left: 1px solid #555;
}

#bannerExtraButton:hover {
	height: 24px;
	background-color: #ae2771;
}

/*
 * End of content for bannermenu in Codeviewer-------------------------------------------------------------------------------------
 */

#bannerUserMenuButton {
	width: 94px; /* Total width: 164px */
	height: 16px;
	background-color: #333;
	background-image: url(../img/user_menu_button.png);
	background-repeat: no-repeat;
	padding: 25px 56px 13px 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.7em;
	text-align: center;
	float: left;
}

#bannerUserMenuButton:hover {
	height: 16px;
	background-color: #ae2771;
	cursor: hand;
	cursor: pointer;
}

/*
 * Dropdownmenus-------------------------------------------------------------------------------------------------------------------
 */

/* Contains the dropdownmenu for the codeviewer menu button */
#dropdownCodeviewerMenu {
	position: absolute;
	top: 54px;
	display: none;
	min-width: 100px;
	color: #eee;
	float: left;
}

/* Contains the dropdownmenu for the userbutton */
#dropdownUserMenu {
	display: none;
	min-width: 162px;
	margin: 0 1px;
	color: #eee;
	float: right;
}

.drowdownMenuHeader{
	height: 16px;
	border-top: 1px solid #0e91f2;
	border-bottom: 1px solid #074877;
	padding: 8px 10px 8px;
	background-color: #0a68ad;
	font-size: 1.6em;
	font-weight: bold;
}

.dropdownMenuButton {
	height: 16px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #111;
	padding: 6px 10px;
	background-color: #333;
	font-size: 1.6em;
	font-weight: 500;
}

.dropdownMenuButton:hover {
	background-color: #ae2771;
	border-top: 1px solid #c14288;
	border-bottom: 1px solid #90215e;
	cursor: hand;
	cursor: pointer;
}

#dropdownMenuButtonArrow {
	width: 18px;
	height: 18px;
	margin: -2px;
	background-image: url(../img/icomoon_arrow_down.png);
	float: right;
}

/* Contains the list of all the courses */
#dropdownMenuCourseBlock {
	display: none;
	margin: 0 1px;
	padding: 5px 0;
	background-color: #333;
	font-size: 1.4em;
}

#dropdownMenuCourseBlock li {
	display: block;
	padding: 3px 10px 3px 32px;
}

#dropdownMenuCourseBlock li:hover {
	background-color: #ae2771;
	cursor: hand;
	cursor: pointer;
}

/* Sets the active course to bold */
.dropdownMenuCourseBlockActiveCourse {
	padding-left: 10px !important;
	font-weight: bold;
}

/* Puts a checkmark before the active course */
.dropdownMenuCourseBlockActiveCourse:before {
	margin: 0 5px 0 0;
	content: url(../img/icomoon_checkmark.png);
}

/* The divider between the list of the courses and Manage Courses */
#dropdownMenuCourseBlock hr {
	height: 1px;
	border-width: 0;
	margin: 5px 10px; 
	color: #555;
	background-color: #555;
}

#dropdownMenuCourseBlock p {
	display: block;
	padding: 3px 10px;
}

#dropdownMenuCourseBlock p:hover {
	background-color: #ae2771;
	cursor: hand;
	cursor: pointer;
}

/*
 * Popup---------------------------------------------------------------------------------------------------------------------------
 */
 
 #popup {
	display: none;
	position: absolute;
	top: 120px;
	left: 50%;
	width: 1px;
	height: 1px;
 }