/lenasys/trunk : contents of codeigniter/css/bannermenu.css at revision 137

: (revision 137)

To get this branch, use:

bzr branch
http://gegoxaren.bato24.eu/bzr/lenasys/trunk

/*
 * 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;
 }

90.1.2 by a11emmjo Made a standard css-file to be used for the whole lenasys-page.	1	/*
	2	* BannerBody----------------------------------------------------------------------------------------------------------------------------
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	3	*/
	4
	5	#bannerBody {
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	6	position: fixed;
67.1.6 by a11emmjo Replaced bannermenu/topmenu/header... on login-page.	7	width: 100%;
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	8	height: 54px;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	9	background: url(../img/bannermenu_bg.png) repeat-x;
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	10	z-index: 999;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	11	}
	12
	13	#bannerBody a:link, a:visited, a:active {
	14	color: #eee;
	15	text-decoration: none;
	16	}
	17
	18	/*
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	19	* Banner--------------------------------------------------------------------------------------------------------------------------
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	20	*/
	21
	22	/* Is used for the icons in the bannermenu */
	23	.icomoon{
	24	font-family: "icomoon";
	25	}
	26
	27	/* Centers the bannermenu */
	28	#bannerWrapper {
	29	width: 1024px;
	30	margin: 0 auto;
	31	color: #eee;
	32	}
	33
	34	#bannerLogoButton {
	35	width: 159px; /* Total width: 162px with :before below */
	36	height: 53px;
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	37	background-color: #333;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	38	background-image: url(../img/logo_button.png);
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	39	background-repeat: no-repeat;
	40	border-right: 1px solid #111;
	41	border-left: 1px solid #111;
	42	float: left;
	43	}
	44
	45	/* Draws the extra light grey border for emboss effect */
	46	#bannerLogoButton:before {
	47	content: '';
	48	width: 159px;
	49	height: 53px;
	50	position: absolute;
	51	border-right: 1px solid #555;
	52	border-left: 1px solid #555;
	53	}
	54
	55	#bannerLogoButton:hover {
	56	height: 53px;
	57	background-color: #ae2771;
	58	}
	59
	60	/* Groups the content in the header between the LenaSYS button and the user button */
	61	#bannerContent {
	62	width: 698px; /* Total width: 698px */
	63	height: 54px;
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	64	background: url(../img/bannermenu_bg.png) repeat-x;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	65	float: left;
	66	}
	67
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	68	#bannerContentCMS {
90.1.9 by a11emmjo Updated branch.	69	display: relative;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	70	}
	71
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	72	/* Contains the header for the CMS page */
	73	#bannerHeaderCMS{
	74	width: 640px; /* Total width: 640px */
	75	height: 18px;
	76	padding: 24px 29px 12px;
	77	color: #eee;
	78	font-size: 1.8em;
	79	font-weight: bold;
	80	overflow: hidden;
	81	white-space: nowrap;
	82	}
	83
	84	/*
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	85	* Start of content for bannermenu in Codeviewer. Everything in this block is needed for the bannermenu in CodeViewer--------------
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	86	*/
	87
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	88	#bannerContentExample {
	89	display: none;
	90	}
	91
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	92	/* Contains the icon for the dropdownmenu in Codeviewer */
	93	#bannerCodeviewerMenuButton {
	94	width: 31px; /* Total width: 52px with :before below */
	95	height: 29px;
	96	background-repeat: no-repeat;
	97	padding: 12px 10px;
	98	font-size: 3.0em;
	99	border-right: 1px solid #111;
	100	float: left;
	101	}
	102
	103	/* Draws the extra light grey border for emboss effect */
	104	#bannerCodeviewerMenuButton:before {
	105	content: '';
	106	width: 31px;
	107	height: 53px;
	108	margin: -12px 11px;
	109	position: absolute;
	110	border-right: 1px solid #555;
	111	}
	112
	113	#bannerCodeviewerMenuButton:hover {
	114	height: 29px;
	115	background-color: #ae2771;
	116	}
	117
	118	#bannerLeftArrowButton {
	119	width: 25px; /* Total width: 40px */
	120	height: 34px;
	121	background-repeat: no-repeat;
	122	padding: 16px 5px 8px 10px;
	123	font-size: 2.5em;
	124	float: left;
	125	}
	126
	127	#bannerLeftArrowButton:hover {
	128	height: 29px;
	129	background-color: #ae2771;
	130	}
	131
	132	#bannerRightArrowButton {
	133	width: 24px; /* Total width: 42px with :before below */
	134	height: 29px;
	135	background-repeat: no-repeat;
	136	padding: 16px 12px 8px 5px;
	137	font-size: 2.5em;
	138	border-right: 1px solid #111;
	139	float: left;
	140	}
	141
	142	/* Draws the extra light grey border for emboss effect */
	143	#bannerRightArrowButton:before {
	144	content: '';
	145	width: 24px;
	146	height: 53px;
	147	margin: -16px 13px;
	148	position: absolute;
	149	border-right: 1px solid #555;
	150	}
	151
	152	#bannerRightArrowButton:hover {
	153	height: 29px;
	154	background-color: #ae2771;
	155	}
156
157	#bannerPlayButton {
158	width: 24px; /* Total width: 52px with :before below */
159	height: 29px;
160	background-repeat: no-repeat;
161	padding: 16px 14px 8px 13px;
162	font-size: 2.5em;
163	border-right: 1px solid #111;
164	float: left;
165	}
166
167	/* Draws the extra light grey border for emboss effect */
168	#bannerPlayButton:before {
169	content: '';
170	width: 24px;
171	height: 53px;
172	margin: -16px 15px;
173	position: absolute;
174	border-right: 1px solid #555;
175	}
176
177	#bannerPlayButton:hover {
178	height: 29px;
179	background-color: #ae2771;
180	}
181
182	/* Contains the header for the Codeviewer page */
183	#bannerHeaderExample{
184	width: 440px; /* Total width: 460px */
185	height: 18px;
186	padding: 24px 10px 12px;
187	font-size: 1.8em;
188	font-weight: bold;
189	overflow: hidden;
190	white-space: nowrap;
191	float: left;
192	}
193
194	/* Contains the icon for keywords for the instructor and change view for the student */
195	#bannerExtraButton {
196	width: 24px; /* Total width: 52px with :before below */
197	height: 24px;
198	background-repeat: no-repeat;
199	padding: 17px 13px 12px 14px;
200	font-size: 2.5em;
201	border-left: 1px solid #111;
202	float: left;
203	}
204
205	/* Draws the extra light grey border for emboss effect */
206	#bannerExtraButton:before {
207	content: '';
208	width: 24px;
209	height: 53px;
210	margin: -17px -14px;
211	position: absolute;
212	border-left: 1px solid #555;
213	}
214
215	#bannerExtraButton:hover {
216	height: 24px;
217	background-color: #ae2771;
218	}
219
220	/*
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	221	* End of content for bannermenu in Codeviewer-------------------------------------------------------------------------------------
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	222	*/
	223
	224	#bannerUserMenuButton {
	225	width: 94px; /* Total width: 164px */
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	226	height: 16px;
	227	background-color: #333;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	228	background-image: url(../img/user_menu_button.png);
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	229	background-repeat: no-repeat;
	230	padding: 25px 56px 13px 14px;
	231	font-family: Arial, Helvetica, sans-serif;
	232	font-size: 1.7em;
	233	text-align: center;
	234	float: left;
	235	}
	236
	237	#bannerUserMenuButton:hover {
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	238	height: 16px;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	239	background-color: #ae2771;
90.1.12 by a11emmjo Fixed so the bannermenu is scrollable horizontally but not vertically.	240	cursor: hand;
	241	cursor: pointer;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	242	}
	243
	244	/*
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	245	* Dropdownmenus-------------------------------------------------------------------------------------------------------------------
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	246	*/
	247
	248	/* Contains the dropdownmenu for the codeviewer menu button */
	249	#dropdownCodeviewerMenu {
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	250	position: absolute;
	251	top: 54px;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	252	display: none;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	253	min-width: 100px;
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	254	color: #eee;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	255	float: left;
	256	}
	257
	258	/* Contains the dropdownmenu for the userbutton */
	259	#dropdownUserMenu {
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	260	display: none;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	261	min-width: 162px;
	262	margin: 0 1px;
90.1.1 by a11emmjo Fixed the bannermenu so it shouldn't interfer with the content below.	263	color: #eee;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	264	float: right;
	265	}
	266
	267	.drowdownMenuHeader{
	268	height: 16px;
	269	border-top: 1px solid #0e91f2;
	270	border-bottom: 1px solid #074877;
	271	padding: 8px 10px 8px;
	272	background-color: #0a68ad;
	273	font-size: 1.6em;
	274	font-weight: bold;
	275	}
	276
	277	.dropdownMenuButton {
	278	height: 16px;
	279	border-top: 1px solid #555;
	280	border-bottom: 1px solid #111;
	281	padding: 6px 10px;
	282	background-color: #333;
	283	font-size: 1.6em;
	284	font-weight: 500;
	285	}
	286
	287	.dropdownMenuButton:hover {
	288	background-color: #ae2771;
	289	border-top: 1px solid #c14288;
	290	border-bottom: 1px solid #90215e;
90.1.9 by a11emmjo Updated branch.	291	cursor: hand;
90.1.9 by a11emmjo Updated branch.	292	cursor: pointer;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	293	}
	294
	295	#dropdownMenuButtonArrow {
	296	width: 18px;
	297	height: 18px;
	298	margin: -2px;
67.1.2 by a11emmjo Changed from html to php and with that added some functions to the bannermenu.	299	background-image: url(../img/icomoon_arrow_down.png);
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	300	float: right;
	301	}
	302
	303	/* Contains the list of all the courses */
	304	#dropdownMenuCourseBlock {
90.1.9 by a11emmjo Updated branch.	305	display: none;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	306	margin: 0 1px;
	307	padding: 5px 0;
	308	background-color: #333;
85.2.1 by a11emmjo Combined bannermenu with startview to get correct start-page.	309	font-size: 1.4em;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	310	}
	311
	312	#dropdownMenuCourseBlock li {
	313	display: block;
85.2.1 by a11emmjo Combined bannermenu with startview to get correct start-page.	314	padding: 3px 10px 3px 32px;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	315	}
	316
	317	#dropdownMenuCourseBlock li:hover {
	318	background-color: #ae2771;
90.1.9 by a11emmjo Updated branch.	319	cursor: hand;
90.1.9 by a11emmjo Updated branch.	320	cursor: pointer;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	321	}
	322
85.2.1 by a11emmjo Combined bannermenu with startview to get correct start-page.	323	/* Sets the active course to bold */
	324	.dropdownMenuCourseBlockActiveCourse {
	325	padding-left: 10px !important;
	326	font-weight: bold;
	327	}
	328
	329	/* Puts a checkmark before the active course */
	330	.dropdownMenuCourseBlockActiveCourse:before {
	331	margin: 0 5px 0 0;
	332	content: url(../img/icomoon_checkmark.png);
	333	}
	334
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	335	/* The divider between the list of the courses and Manage Courses */
	336	#dropdownMenuCourseBlock hr {
	337	height: 1px;
	338	border-width: 0;
	339	margin: 5px 10px;
	340	color: #555;
	341	background-color: #555;
	342	}
	343
85.2.1 by a11emmjo Combined bannermenu with startview to get correct start-page.	344	#dropdownMenuCourseBlock p {
	345	display: block;
67.1.1 by a11emmjo Added a new header/topmenu/bannermenu from now on called bannermenu.	346	padding: 3px 10px;
	347	}
	348
85.2.1 by a11emmjo Combined bannermenu with startview to get correct start-page.	349	#dropdownMenuCourseBlock p:hover {
	350	background-color: #ae2771;
90.1.9 by a11emmjo Updated branch.	351	cursor: hand;
90.1.9 by a11emmjo Updated branch.	352	cursor: pointer;
90.1.5 by a11emmjo Added popup-div to bannermenu.	353	}
	354
	355	/*
	356	* Popup---------------------------------------------------------------------------------------------------------------------------
	357	*/
	358
	359	#popup {
	360	display: none;
	361	position: absolute;
	362	top: 120px;
	363	left: 50%;
90.1.8 by a11emmjo Fixed some redirect-links.	364	width: 1px;
90.1.8 by a11emmjo Fixed some redirect-links.	365	height: 1px;
90.1.5 by a11emmjo Added popup-div to bannermenu.	366	}