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

: (revision 83.2.7)

To get this branch, use:

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

@charset "utf-8";
/* CSS Document */

/*
 * Standard----------------------------------------------------------------------------------------------------------------------------------------
 * TODO: Move to indexpage css
 */

/* This sets all the margins and paddings to zero so you can controll this individually for each element instead. */
* {
	margin: 0;
	padding: 0;
}

/* This two rows sets 1em to 10px. */
html { 
	font-size: 125%;
}

body {
	font-size: 50%;
}

@font-face{
	font-family: icomoon;
	src: url(../img/icomoon.ttf);
}

/*
 * Body--------------------------------------------------------------------------------------------------------------------------------------------
 */

#bannerBody {
	position: fixed;
	width: 100%;
	background: url(../img/bannermenu_bg.png) repeat-x;
	font-family:  Arial, Helvetica, sans-serif;
}

#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-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;
	float: left;
}

#bannerContentCMS {
	display: none;
}

/* 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: 15px;
	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: 15px;
	background-color: #ae2771;
}

/*
 * Dropdownmenu------------------------------------------------------------------------------------------------------------------------------------
 */

/* Centers the div that contains the dropdownmenus */
#dropdownMenuWrapper {
	width: 1024px;
	margin: 0 auto;
	color: #eee;
	clear: both;
}

/* Contains the dropdownmenu for the codeviewer menu button */
#dropdownCodeviewerMenu {
	display: none;
	z-index: 999;
	min-width: 100px;
	margin: 0 0 0 161px;
	float: left;
}

/* Contains the dropdownmenu for the userbutton */
#dropdownUserMenu {
	display: none;
	z-index: 999;
	min-width: 162px;
	margin: 0 1px;
	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;
}

#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 {
	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;
}

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

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