/lenasys/trunk

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/trunk

« back to all changes in this revision

Viewing changes to codeigniter/css/bannermenu.css

  • Committer: galaxyAbstractor
  • Date: 2013-04-10 15:49:32 UTC
  • mto: (19.1.5 lenasys)
  • mto: This revision was merged to the branch mainline in revision 23.
  • Revision ID: galaxyabstractor@gmail.com-20130410154932-4vizlzk0ar5gykvi
* Added an simple admin panel to the codeviewer-cmssy stuff
* Redesigned a bit like the mockups - still stuff to come
* Implemented the codeviewer + admin panel again using the Framework CodeIgniter instead 

Show diffs side-by-side

added added

removed removed

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