source: Dev/trunk/css/awesome.css @ 218

Last change on this file since 218 was 218, checked in by fpvanagthoven, 13 years ago

Laatste versies van alles!
File size: 18.3 KB
RevLine 
[59]1/*
2    Document   : style
3    Created on : 12-jul-2011, 15:12:02
4    Author     : fpvanagthoven
5    Description:
6        Purpose of the stylesheet follows.
7*/
8
9/*
10   TODO customize this sample style
11   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
12*/
13
14h1 {
15    width: 100%;
16    text-align: center;
17    color: white;
18    text-shadow: #888 0px 0px 1em;
19    margin: 0 0 0.1em 0;
20}
21
22h2 {
23    margin: 0;
24    font-size: larger;
25}
26
27h3 {
28    margin: 0;
29    font-size: small;
30    font-weight: normal;
31    color: #333;
32}
[177]33
[59]34legend {
35    padding-left: 0em;
36    color: #fff;
37    text-shadow: #000 0px 0px .4em;
38}
39
40fieldset {
41    background-color: #aeb2b3;
42    border: 1px solid #fff;
[175]43    -moz-border-radius: 1em;
44    border-radius: 1em;
[59]45    margin-bottom: 2em;
46    padding: 0 1em 1em 1em;
47    -moz-box-shadow: 2px 2px 1px #888;
48    -webkit-box-shadow: 2px 2px 1px #888;
49    box-shadow: 2px 2px 1px #888;
50}
51html {
52    background-image: url('../images/bg/blueishgridblock.png');
53    height: 100%;
[144]54    font-size: 12px;
[59]55}
56
57root {
58    display: block;
59}
60
61body {
62    font-family: sans-serif;
63    background-image: url('../images/bg/blueishgrid.png');
64    background-repeat: repeat-x;
65    margin: 0;
66    padding: 0;
67    height: 100%;
68}
69
70input {
71    background-color: #c6c6c6;
72    border: 1px solid #888;
73}
74
75textarea {
76    background-color: #c6c6c6;
77    border: 1px solid #888;
78}
79
80select {
81    background-color: #c6c6c6;
82    border: 1px solid #888;
83}
84
85#wrapper {
86    width: 80%;
[97]87    min-width: 800px;
[59]88    margin: auto;
89}
90
91#header {
92    height: 4em;
93    background-color: transparent;
94}
95
96#logo{
97    background-image: url('../images/headlogo.png');
98    background-position: top center;
99    background-repeat: no-repeat;
100    font-size: 2em;
101    font-weight: bold;
102    text-align: center;
[168]103    padding-top: 15px;
104    /*line-height: 2em;*/
[59]105    text-shadow: #555 0px 0px .2em;
106    height: 189px;
107}
108
109#logo a {
110    text-decoration: none;
111    color: #ddd;
112}
113
114#logo a:hover {
115    color: #fff;
116}
117
118#content {
119    position: relative;
120    width: 100%;
121    padding: 2em 0;
122}
123
124
125
126/* ##################################################################
127   ===================== STYLESHEET OF GLORY ======================== */
128
[103]129#creation {
[64]130    position: relative;
[59]131    min-height: 10em;
132    background-image: url('../images/bg/graygradient.png');
133    background-repeat: repeat-x;
134    background-color: #aeb2b3;
135    -moz-border-radius: 15px;
136    border-radius: 15px;
137    -moz-box-shadow: 2px 2px 2px #888;
138    -webkit-box-shadow: 2px 2px 2px #888;
139    box-shadow: 2px 2px 2px #888;
140    padding: 2em;
141    border: 1px solid white;
142}
143
144#surveyHead {
145    position: relative;
146    width: 100%;
147}
148
149#surveyTitle {
[64]150
151}
152
153#surveyTitle:hover {
154
155}
156
157.titleBox {
[59]158    width: 17em;
159    font-size: large;
160    color: #555;
161}
162
[64]163.titleBox:hover {
[59]164    color: black;
165}
166
167#surveyDescription {
[64]168
169}
170
171.descriptionBox {
[59]172    display: block;
173    width: 30em;
174    max-width: 30em;
175    font-family: sans-serif;
176    color: #555;
177}
178
179#timeStamp {
180    position: absolute;
181    color: #333;
182    font-size: small;
183    right: 6em;
184    top: 0;
185    line-height: 2.3em;
186}
187
188#surveySaveButton {
189    position: absolute;
190    top: 0;
191    right: 0;
192    width: 5em;
193}
194
195#surveyDescription:hover {
196    color: black;
197}
198
199#surveyLink {
200    position: absolute;
201    top: -2em;
202    right: 0;
203    font-size: x-small;
204    color: #333;
205    width: 30em;
206    border-color: transparent;
207    background-color: transparent;
208}
209
210#questionsDiv {
211    margin-top: 2em;
212}
213
214.answersDiv {
215    margin-left: 0.5em;
216}
217
218#submitSurvey {
219    display: block;
220    height: 3em;
221    width: 10em;
222    margin-top: 2em;
223    background-color: #aeb2b3;
224    border: 1px solid white;
225}
226
227#submitSurvey:hover {
228    background-color: #e3eff3;
229    color: #111;
230    border-color: deepskyblue;
231}
232
233#submitSurvey:active {
234    background-color: #fff;
235    border-style: inset;
236    border-color: orange;
237}
238
239#addQuestionButton {
240    margin-top: 1em;
241    width: 20em;
242}
243
244#addOpt {
245    margin-left: 1em;
246}
247
248
249.surveyButton {
250    color: #444;
251    font-weight: bold;
252    background-color: transparent;
253    border: 1px solid #555;
254    -moz-border-radius: 6px;
255    border-radius: 6px;
256}
257
[146]258
259.surveyButton.dis {
260    color: #666;
261}
262
263.surveyButton.dis:hover {
264    background-color: transparent;
265    color: #666;
266    border-color: #555;
267}
268
[59]269.bigSurveyButton {
270    margin-top: 1px;
271    height: 3em;
272    width: 12em;
273}
274
275.surveyButton:hover {
276    background-color: #e3eff3;
277    color: #111;
278    border-color: deepskyblue;
279}
280
281.surveyButton:active {
282    background-color: #fff;
283    border-style: inset;
284    border-color: orange;
285}
286
287.question { 
288    margin-top: 3em;
289    border-top: 1px solid #ddd;
290    text-shadow: #fff 0px 0px 1px;
291}
292
293.questionTable td{
294    width: 8em;
295}
296
297.questionTable th{
298    text-align: left;
299}
300
301
302
303/* ##################################################################
304   ===================== STYLESHEET OF GLORY ======================== */
305
306.menu {
307    width: 30em;
308    margin: 1em auto 0 auto;
309    padding: 2em;
310    text-align: center;
311    background-image: url('../images/bg/graygradient.png');
312    background-repeat: repeat-x;
313    background-color: #aeb2b3;
314    -moz-border-radius: 15px;
315    border-radius: 15px;
316    border: 1px solid white;
317}
318
319.menuButtons {
320    float: left;
321}
322
323.toLoad {
324    background-color: #c6c6c6;
325    width: 23em;
326    height: 10em;
327}
328
329/* ##################################################################
330   ===================== STYLESHEET OF GLORY ======================== */
[64]331.padding2em {
332    padding: 2em;
333}
[59]334
[75]335.padding1em {
[102]336    padding: 1em;
[75]337}
338
[59]339.topMargin {
340    margin-top: 2em;
341}
342
343.leftPadding {
344    padding-left: 2em;
345}
346
[64]347.leftPadding1 {
348    padding-left: 1em;
349}
350
[59]351.noPadding {
352    padding: 0;
353}
354
355.centerBoxed {
356    margin: 1em auto;
357    width: 30em;
358    text-align: center;
359    padding: 0 1em;
360    font-size: small;
361    color: white;
362    /*    border: 1px solid gray;*/
363}
364
[64]365.nextLine {
366    display: block;
367}
368
369.leftAlign {
370    text-align: left;
371}
372
[104]373.leftMargin {
374    margin-left: 10px;
375}
376
[65]377.width100p {
378    width: 100%;
379}
380
[104]381.floatLeft {
382    float: left;
383}
384
[59]385/* ##################################################################
386   ===================== STYLESHEET OF GLORY ======================== */
387
[103]388.answerInput {
389    display: block;
390}
391
[59]392.answerBox {
393    padding-left: 1em;
394}
395
396.textBox {
397    width: 20em;
398}
399
400.intBox {
401    width: 5em;
402    margin: 0 .3em;
403    border: 1px solid #abadb3;
404}
405
406.scaleLabel {
407    display: inline;
408    color: #333;
409}
410
411.questionTitle {
412
413}
414
415.questionDescription {
416    font-size: small;
[64]417}
418
[68]419.topRight {
420    position: absolute;
421    top: 2.3em;
422    right: 2.3em;
423    padding-left: 1em;
424    padding-right: 1em;
425}
426
[75]427.borderRadius {
[102]428    -moz-border-radius: 15px;
[75]429    border-radius: 15px;
430}
431
432.boxShadow {
[102]433    -moz-box-shadow: 2px 2px 2px #888;
[75]434    -webkit-box-shadow: 2px 2px 2px #888;
435    box-shadow: 2px 2px 2px #888;
436}
437
[64]438/* ##################################################################
439   ===================== STYLESHEET OF GLORY ======================== */
[104]440
441#questionEditForm {
442
443}
444
445#saveQuestion {
446    position: absolute;
447    top: 1em;
448    right: 1em;
449}
450
[112]451#clearQuestionFields {
452    position: absolute;
453    top: 1em;
454    right: 5em;
455}
456
[104]457/* ##################################################################
458   ===================== STYLESHEET OF GLORY ======================== */
[65]459#sessionCreationForm {
[67]460    padding-bottom: 16em;
[65]461}
462
463#pipelineWrapper {
464    float: left;
465    width: 40%;
466}
467
468.pipelineHead {
[64]469    margin-top: 1em;
470    text-shadow: #fff 0px 0px 1px;
471}
472
473#pipeline {
[65]474    display: block;
475    width: 100%;
[67]476    height: 15em;
[65]477    overflow: hidden;
[64]478}
479
[67]480#surveysList {
481    height: 15em;
482}
483
484#applicationsList {
485    height: 15em;
486}
487
[64]488.pipelineButton {
[67]489
[64]490}
491
[65]492#surveysApplicationsWrapper {
493    float: left;
494    width: 60%;
495}
496
497#surveysForPipelineWrapper {
498    float: left;
499    width: 50%;
500}
501
502#applicationsForPipelineWrapper {
503    float: left;
504    width: 50%;
[75]505}
506
507/* ##################################################################
508   ===================== STYLESHEET OF GLORY ======================== */
509.resultsDiv {
[102]510    height: 10em;
511    border: 1px solid white;
[75]512}
513
514.resultDiv {
[102]515    width: 10em;
516    height: 10em;
517    border: 1px solid white;
518    background-color: #c6c6c6;
519    float: left;
520    margin-left: 2em;
[92]521}
522
523/* ##################################################################
524   ===================== STYLESHEET OF GLORY ======================== */
[104]525#questionCreation
526{
527    position: relative;
528    min-height: 10em;
529    min-width: 500px;
530    width: 50%;
531    background-image: url('../images/bg/graygradient.png');
532    background-repeat: repeat-x;
533    background-color: #aeb2b3;
534    -moz-border-radius: 15px;
535    border-radius: 15px;
536    -moz-box-shadow: 2px 2px 2px #888;
537    -webkit-box-shadow: 2px 2px 2px #888;
538    box-shadow: 2px 2px 2px #888;
539    padding: 2em;
540    border: 1px solid white;
541}
542
[102]543#questionListWrapper {
[104]544    float: left;
[102]545    text-align: center;
[104]546    margin-bottom: 5em;
547    width: 40%;
548    margin-right: 2em;
[102]549}
550
551#questionListWrapper #questionsList {
552    height: 30em;
[104]553    width: 100%;
[102]554}
555
556#questionEditForm {
[175]557
[102]558}
559
560/* ##################################################################
561   ===================== STYLESHEET OF GLORY ======================== */
[92]562.xdebug-var-dump {
563    color:white;
[142]564}
565
566
567#sequencer {
568    width: 100%;
[167]569    /*max-width: 800px;*/
[144]570    margin: 0 auto 0 auto;
[167]571    padding-right: 0.5em;
[144]572    /*background-image: url('../images/bg/sequencerBG.png');*/
573    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
574    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
575    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
576    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
577    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
578
579    background-image: -webkit-gradient(
[175]580        linear,
581        left top,
582        left bottom,
583        color-stop(0.21, #B0B0B0),
584        color-stop(0.8, #888888)
585        );
[142]586    background-position: bottom;
587    background-repeat: repeat-x;
[167]588    float: left;
[142]589}
590
[153]591#sequencer #seqContent {
[144]592    height: 9em;
[167]593    width: 98%;
[144]594    overflow-x: scroll;
595    overflow-y: hidden;
[175]596
[142]597    margin-bottom: 0.5em;
[175]598
[144]599    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
600    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
601    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
602    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
603    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
604    background-image: -webkit-gradient(
[175]605        linear,
606        left bottom,
607        left top,
608        color-stop(0.25, #B0B0B0),
609        color-stop(0.8, #888888)
610        );
611
[142]612    border: 1px solid #ddd;
613    -moz-border-radius: 0.5em;
614    border-radius: 0.5em;
615    padding: 0.5em;
[167]616    /*white-space: nowrap;*/
617    float: left;
[142]618}
619
620#sequencer #controls {
621    width: auto;
622    text-align: right;
623    margin-bottom: -0.5em;
[168]624    float: right;
[142]625}
626
[150]627.displayStep {
[144]628    width: 52px;
629    padding: 0;
[142]630    margin: 10px 0 0 0;
631    background-repeat: no-repeat;
632    float: left;
633    text-align: center;
[175]634    -webkit-user-select: none;
635    -khtml-user-select: none;
636    -moz-user-select: none;
637    -o-user-select: none;
638    user-select: none;
[142]639}
640
[150]641.displayStep.selected {
[154]642    -moz-box-shadow: 0 0 50px #FFF;
643    -webkit-box-shadow: 0 0 50px #FFF;
644    box-shadow: 0 0 50px #FFF;
[175]645
[150]646}
647
648.displayStep .displayStepIcon {
[144]649    width: 50px;
650    height: 50px;
651    border: 2px solid #444444;
652    color: #FFF;
[167]653    /*float: left;*/
[144]654}
655
[150]656.displayStep p{
[146]657    margin-top: 5px;
[142]658    font-weight: normal;
659    font-size: 0.875em;
[167]660    /*float: left;*/
[175]661
[142]662}
663
[153]664#seqContent .divider {
[142]665    width: 10px;
[144]666    height: 50px;
667    margin: 10px 15px 0 20px;
[142]668    background-image: url('../images/ui/sequencerDivider.png');
669    float: left;
[167]670    /*display: inline-block;*/
[142]671}
672
[167]673#seqContentWrapper {
674    float: left;
675    margin-right: -32767px; /* maximum for opera, enough for ~320 steps*/
676    padding: 0 10px;
677}
[144]678
679
680
681
682
[167]683
[142]684/*
[144]685 *
686 *
687 *  TOOLBOX
688 *
689 *
[142]690*/
691
692#toolbox {
[144]693    /*width: 40%;*/
[142]694    float: left;
[146]695    margin: 1em 2em 0 0;
[144]696    /*background-image: url('../images/bg/sequencerBG.png');*/
697    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
698    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
699    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
700    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
701    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
702
703    background-image: -webkit-gradient(
[175]704        linear,
705        left top,
706        left bottom,
707        color-stop(0.25, #B0B0B0),
708        color-stop(0.8, #888888)
709        );
710
[142]711}
712
[144]713#toolbox .creationButton {
714    height: 50px;
715    margin: 0 0 5px 0;
716    border: 1px solid #000;
[146]717    border-radius: 6px;
718    -moz-border-radius: 6px;
719    cursor: pointer;
[144]720}
721
722#toolbox .creationButton:hover {
723    border: 1px solid #FFF;
724    background: rgba(255, 255, 255, 0.2);
725}
726
727#toolbox .buttonIcon {
[146]728    border: none;
729    border-radius: 6px;
730    margin: 0 10px 0 0;
[142]731    float: left;
732}
733
[144]734#toolbox .creationButton p {
735    margin: 15px 10px 0 0;
736    color: #444;
737    float: left;
[167]738}
739
740#infoPanel {
741    width: 500px;
742    float: right;
743    margin: 1em 0 0 0;
744    /*background-image: url('../images/bg/sequencerBG.png');*/
745    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
746    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
747    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
748    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
749    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
750
751    background-image: -webkit-gradient(
[175]752        linear,
753        left top,
754        left bottom,
755        color-stop(0.25, #B0B0B0),
756        color-stop(0.8, #888888)
757        );
[167]758}
759
760#infoContent {
761    float: left;
762    display: block;
763    width: 500px;
764    background-color: #ff0000;
765}
766
767.fieldsetTitle {
768    height: 1em;
769    margin-bottom: 0.5em;
770    margin-top:0.5em;
771    margin-left: 1em;
772    font-size: 1.25em;
773    color: #FFF;
[168]774    /*float: left;*/
[167]775    display: block;
[168]776    clear: right;
777}
778
779fieldset p {
780    display: block;
[175]781}
782
783
784
785/* QUESTION EDITOR
786*/
787
788#questionEditor {
789    width: 60em;
790    background-color: #00FF00;
791    border: 1px solid #FFF;
792    display: block;
793    margin: 0;
794    padding: 0;
795    float: left;
796    background-color: #5c5c5c;
797    -moz-box-shadow: 2px 2px 1px #888;
798    -webkit-box-shadow: 2px 2px 1px #888;
799    box-shadow: 2px 2px 1px #888;
800}
801
802#questionEditor_header {
803    height: 1.5em;
804    float: left;
805    font-size: 1.25em;
806    color: #FFF;
807    padding: 0.5em 1em 0 1em;
808}
809
810#questionEditor_content {
811    width: 58em;
812    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
813    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
814    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
815    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
816    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
817    background-image: -webkit-gradient(
818        linear,
819        left top,
820        left bottom,
821        color-stop(0.21, #B0B0B0),
822        color-stop(0.8, #888888)
823        );
824    background-position: bottom;
825    background-repeat: repeat-x;
826    float: left;
827    padding: 0.5em 1em;
828
829}
830
831#questionEditor_controls {
832    float: right;
833    height: 2em;
834    text-align: right;
835}
836
837
838
839#questionEditor_bodyText_textArea {
840    resize: none;
841    width: auto;
842    min-width: 51em;
843    margin: 3px;
844}
845
846#questionEditor_bodyText_staticText {
847    color: white;
848    font-size: 12px;
849}
850
851.questionParamField {
[176]852    float: left;
853    margin: 2px 0 2px 0;
854}
855
856#questionEditor_questionParams label {
857    width: 130px;
858    float: left;
859    margin: 4px 0 0 0;
860}
861
862.formLineBreak {
863    clear: left;
[177]864}
865
866#surveyEditor {
867   
868    margin: 0 auto 0 auto;
869   
870    /*background-image: url('../images/bg/sequencerBG.png');*/
871    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
872    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
873    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
874    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
875    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
876
877    background-image: -webkit-gradient(
878        linear,
879        left top,
880        left bottom,
881        color-stop(0.21, #B0B0B0),
882        color-stop(0.8, #888888)
883        );
884    background-position: bottom;
885    background-repeat: repeat-x;
886    float: left;
887   
888    background-color: #aeb2b3;
889    border: 1px solid #fff;
890    -moz-border-radius: 1em;
891    border-radius: 1em;
892    margin-bottom: 2em;
893    padding: 0 1em 1em 1em;
894    -moz-box-shadow: 2px 2px 1px #888;
895    -webkit-box-shadow: 2px 2px 1px #888;
896    box-shadow: 2px 2px 1px #888;
897}
898
899#surveyEditorContent {
900    overflow-x: hidden;
901
902    margin-bottom: 0.5em;
903
904    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
905    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
906    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
907    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
908    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
909    background-image: -webkit-gradient(
910        linear,
911        left bottom,
912        left top,
913        color-stop(0.25, #B0B0B0),
914        color-stop(0.8, #888888)
915        );
916
917    border: 1px solid #ddd;
918    -moz-border-radius: 0.5em;
919    border-radius: 0.5em;
920    padding: 1em;
921    float: left;
922}
923
924.questionDisplay {
925    width: 60em;
926    border: 1px solid #FFF;
927    display: block;
928    margin: 0;
929    padding: 0;
930    float: left;
931    background-color: #5c5c5c;
932    -moz-box-shadow: 2px 2px 1px #888;
933    -webkit-box-shadow: 2px 2px 1px #888;
934    box-shadow: 2px 2px 1px #888;
935}
936
937.questionDisplayContent {
938    margin: 0;
939    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
940    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
941    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
942    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
943    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
944    background-image: -webkit-gradient(
945        linear,
946        left top,
947        left bottom,
948        color-stop(0.25, #B0B0B0),
949        color-stop(0.8, #888888)
950        );
951    padding: 0.5em;
952}
953
954.questionDisplayControls {
955    text-align: right;
956}
957
958p.questionBody {
959    border: 1px solid #cccccc;
960    background-color: #c5c5c5;
961}
962
963#surveyEditorControls {
964    text-align: right;
[103]965}
Note: See TracBrowser for help on using the repository browser.