source: Dev/branches/jos-branch/css/awesome.css @ 237

Last change on this file since 237 was 233, checked in by fpvanagthoven, 13 years ago
File size: 18.6 KB
Line 
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}
33
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;
43    -moz-border-radius: 1em;
44    border-radius: 1em;
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%;
54    font-size: 12px;
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%;
87    min-width: 800px;
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;
103    padding-top: 15px;
104    /*line-height: 2em;*/
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
129#creation {
130    position: relative;
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 {
150
151}
152
153#surveyTitle:hover {
154
155}
156
157.titleBox {
158    width: 17em;
159    font-size: large;
160    color: #555;
161}
162
163.titleBox:hover {
164    color: black;
165}
166
167#surveyDescription {
168
169}
170
171.descriptionBox {
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
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
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 ======================== */
331.padding2em {
332    padding: 2em;
333}
334
335.padding1em {
336    padding: 1em;
337}
338
339.topMargin {
340    margin-top: 2em;
341}
342
343.leftPadding {
344    padding-left: 2em;
345}
346
347.leftPadding1 {
348    padding-left: 1em;
349}
350
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
365.nextLine {
366    display: block;
367}
368
369.leftAlign {
370    text-align: left;
371}
372
373.leftMargin {
374    margin-left: 10px;
375}
376
377.width100p {
378    width: 100%;
379}
380
381.floatLeft {
382    float: left;
383}
384
385/* ##################################################################
386   ===================== STYLESHEET OF GLORY ======================== */
387
388.answerInput {
389    display: block;
390}
391
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;
417}
418
419.topRight {
420    position: absolute;
421    top: 2.3em;
422    right: 2.3em;
423    padding-left: 1em;
424    padding-right: 1em;
425}
426
427.borderRadius {
428    -moz-border-radius: 15px;
429    border-radius: 15px;
430}
431
432.boxShadow {
433    -moz-box-shadow: 2px 2px 2px #888;
434    -webkit-box-shadow: 2px 2px 2px #888;
435    box-shadow: 2px 2px 2px #888;
436}
437
438/* ##################################################################
439   ===================== STYLESHEET OF GLORY ======================== */
440
441#questionEditForm {
442
443}
444
445#saveQuestion {
446    position: absolute;
447    top: 1em;
448    right: 1em;
449}
450
451#clearQuestionFields {
452    position: absolute;
453    top: 1em;
454    right: 5em;
455}
456
457/* ##################################################################
458   ===================== STYLESHEET OF GLORY ======================== */
459#sessionCreationForm {
460    padding-bottom: 16em;
461}
462
463#pipelineWrapper {
464    float: left;
465    width: 40%;
466}
467
468.pipelineHead {
469    margin-top: 1em;
470    text-shadow: #fff 0px 0px 1px;
471}
472
473#pipeline {
474    display: block;
475    width: 100%;
476    height: 15em;
477    overflow: hidden;
478}
479
480#surveysList {
481    height: 15em;
482}
483
484#applicationsList {
485    height: 15em;
486}
487
488.pipelineButton {
489
490}
491
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%;
505}
506
507/* ##################################################################
508   ===================== STYLESHEET OF GLORY ======================== */
509.resultsDiv {
510    height: 10em;
511    border: 1px solid white;
512}
513
514.resultDiv {
515    width: 10em;
516    height: 10em;
517    border: 1px solid white;
518    background-color: #c6c6c6;
519    float: left;
520    margin-left: 2em;
521}
522
523/* ##################################################################
524   ===================== STYLESHEET OF GLORY ======================== */
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
543#questionListWrapper {
544    float: left;
545    text-align: center;
546    margin-bottom: 5em;
547    width: 40%;
548    margin-right: 2em;
549}
550
551#questionListWrapper #questionsList {
552    height: 30em;
553    width: 100%;
554}
555
556#questionEditForm {
557
558}
559
560/* ##################################################################
561   ===================== STYLESHEET OF GLORY ======================== */
562.xdebug-var-dump {
563    color:white;
564}
565
566
567/*
568#pipelineFrame{
569    height: 12em;
570    width: 96em;
571    display: block;
572    background-image: url('../images/bg/pipelineFrameBG.png');
573    background-color: #e3eff3;
574}
575
576.pipelineFrame .pipelineObject {
577    width: 10em;
578    height: 10em;
579    margin: 1em auto 1em auto;
580    text-align: center;
581}
582*/
583
584/*
585*
586*
587*   Horizontal sequencer styling
588*
589*
590*/
591
592#sequencer {
593    width: 100%;
594    /*max-width: 800px;*/
595    margin: 0 auto 0 auto;
596    padding-right: 0.5em;
597    /*background-image: url('../images/bg/sequencerBG.png');*/
598    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
599    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
600    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
601    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
602    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
603
604    background-image: -webkit-gradient(
605        linear,
606        left top,
607        left bottom,
608        color-stop(0.21, #B0B0B0),
609        color-stop(0.8, #888888)
610        );
611    background-position: bottom;
612    background-repeat: repeat-x;
613    float: left;
614}
615
616#sequencer #seqContent {
617    height: 9em;
618    width: 98%;
619    overflow-x: scroll;
620    overflow-y: hidden;
621
622    margin-bottom: 0.5em;
623
624    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
625    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
626    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
627    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
628    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
629    background-image: -webkit-gradient(
630        linear,
631        left bottom,
632        left top,
633        color-stop(0.25, #B0B0B0),
634        color-stop(0.8, #888888)
635        );
636
637    border: 1px solid #ddd;
638    -moz-border-radius: 0.5em;
639    border-radius: 0.5em;
640    padding: 0.5em;
641    /*white-space: nowrap;*/
642    float: left;
643}
644
645#sequencer #controls {
646    width: auto;
647    text-align: right;
648    margin-bottom: -0.5em;
649    float: right;
650}
651
652.displayStep {
653    width: 52px;
654    padding: 0;
655    margin: 10px 0 0 0;
656    background-repeat: no-repeat;
657    float: left;
658    text-align: center;
659    -webkit-user-select: none;
660    -khtml-user-select: none;
661    -moz-user-select: none;
662    -o-user-select: none;
663    user-select: none;
664}
665
666.displayStep.selected {
667    -moz-box-shadow: 0 0 50px #FFF;
668    -webkit-box-shadow: 0 0 50px #FFF;
669    box-shadow: 0 0 50px #FFF;
670
671}
672
673.displayStep .displayStepIcon {
674    width: 50px;
675    height: 50px;
676    border: 2px solid #444444;
677    color: #FFF;
678    /*float: left;*/
679}
680
681.displayStep p{
682    margin-top: 5px;
683    font-weight: normal;
684    font-size: 0.875em;
685    /*float: left;*/
686
687}
688
689#seqContent .divider {
690    width: 10px;
691    height: 50px;
692    margin: 10px 15px 0 20px;
693    background-image: url('../images/ui/sequencerDivider.png');
694    float: left;
695    /*display: inline-block;*/
696}
697
698#seqContentWrapper {
699    float: left;
700    margin-right: -32767px; /* maximum for opera, enough for ~320 steps*/
701    padding: 0 10px;
702}
703
704
705
706
707
708
709/*
710 *
711 *
712 *  TOOLBOX
713 *
714 *
715*/
716
717#toolbox {
718    /*width: 40%;*/
719    float: left;
720    margin: 1em 2em 0 0;
721    /*background-image: url('../images/bg/sequencerBG.png');*/
722    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
723    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
724    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
725    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
726    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
727
728    background-image: -webkit-gradient(
729        linear,
730        left top,
731        left bottom,
732        color-stop(0.25, #B0B0B0),
733        color-stop(0.8, #888888)
734        );
735
736}
737
738#toolbox .creationButton {
739    height: 50px;
740    margin: 0 0 5px 0;
741    border: 1px solid #000;
742    border-radius: 6px;
743    -moz-border-radius: 6px;
744    cursor: pointer;
745}
746
747#toolbox .creationButton:hover {
748    border: 1px solid #FFF;
749    background: rgba(255, 255, 255, 0.2);
750}
751
752#toolbox .buttonIcon {
753    border: none;
754    border-radius: 6px;
755    margin: 0 10px 0 0;
756    float: left;
757}
758
759#toolbox .creationButton p {
760    margin: 15px 10px 0 0;
761    color: #444;
762    float: left;
763}
764
765#infoPanel {
766    width: 500px;
767    float: right;
768    margin: 1em 0 0 0;
769    /*background-image: url('../images/bg/sequencerBG.png');*/
770    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
771    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
772    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
773    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
774    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
775
776    background-image: -webkit-gradient(
777        linear,
778        left top,
779        left bottom,
780        color-stop(0.25, #B0B0B0),
781        color-stop(0.8, #888888)
782        );
783}
784
785#infoContent {
786    float: left;
787    display: block;
788    width: 500px;
789    background-color: #ff0000;
790}
791
792.fieldsetTitle {
793    height: 1em;
794    margin-bottom: 0.5em;
795    margin-top:0.5em;
796    margin-left: 1em;
797    font-size: 1.25em;
798    color: #FFF;
799    /*float: left;*/
800    display: block;
801    clear: right;
802}
803
804fieldset p {
805    display: block;
806}
807
808
809
810/* QUESTION EDITOR
811*/
812
813#questionEditor {
814    width: 60em;
815    background-color: #00FF00;
816    border: 1px solid #FFF;
817    display: block;
818    margin: 0;
819    padding: 0;
820    float: left;
821    background-color: #5c5c5c;
822    -moz-box-shadow: 2px 2px 1px #888;
823    -webkit-box-shadow: 2px 2px 1px #888;
824    box-shadow: 2px 2px 1px #888;
825}
826
827#questionEditor_header {
828    height: 1.5em;
829    float: left;
830    font-size: 1.25em;
831    color: #FFF;
832    padding: 0.5em 1em 0 1em;
833}
834
835#questionEditor_content {
836    width: 58em;
837    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
838    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
839    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
840    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
841    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
842    background-image: -webkit-gradient(
843        linear,
844        left top,
845        left bottom,
846        color-stop(0.21, #B0B0B0),
847        color-stop(0.8, #888888)
848        );
849    background-position: bottom;
850    background-repeat: repeat-x;
851    float: left;
852    padding: 0.5em 1em;
853
854}
855
856#questionEditor_controls {
857    float: right;
858    height: 2em;
859    text-align: right;
860}
861
862
863
864#questionEditor_bodyText_textArea {
865    resize: none;
866    width: auto;
867    min-width: 51em;
868    margin: 3px;
869}
870
871#questionEditor_bodyText_staticText {
872    color: white;
873    font-size: 12px;
874}
875
876.questionParamField {
877    float: left;
878    margin: 2px 0 2px 0;
879}
880
881#questionEditor_questionParams label {
882    width: 130px;
883    float: left;
884    margin: 4px 0 0 0;
885}
886
887.formLineBreak {
888    clear: left;
889}
890
891#surveyEditor {
892   
893    margin: 0 auto 0 auto;
894   
895    /*background-image: url('../images/bg/sequencerBG.png');*/
896    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
897    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
898    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
899    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
900    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
901
902    background-image: -webkit-gradient(
903        linear,
904        left top,
905        left bottom,
906        color-stop(0.21, #B0B0B0),
907        color-stop(0.8, #888888)
908        );
909    background-position: bottom;
910    background-repeat: repeat-x;
911    float: left;
912   
913    background-color: #aeb2b3;
914    border: 1px solid #fff;
915    -moz-border-radius: 1em;
916    border-radius: 1em;
917    margin-bottom: 2em;
918    padding: 0 1em 1em 1em;
919    -moz-box-shadow: 2px 2px 1px #888;
920    -webkit-box-shadow: 2px 2px 1px #888;
921    box-shadow: 2px 2px 1px #888;
922}
923
924#surveyEditorContent {
925    overflow-x: hidden;
926
927    margin-bottom: 0.5em;
928
929    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
930    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
931    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
932    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
933    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
934    background-image: -webkit-gradient(
935        linear,
936        left bottom,
937        left top,
938        color-stop(0.25, #B0B0B0),
939        color-stop(0.8, #888888)
940        );
941
942    border: 1px solid #ddd;
943    -moz-border-radius: 0.5em;
944    border-radius: 0.5em;
945    padding: 1em;
946    float: left;
947}
948
949.questionDisplay {
950    width: 60em;
951    border: 1px solid #FFF;
952    display: block;
953    margin: 0;
954    padding: 0;
955    float: left;
956    background-color: #5c5c5c;
957    -moz-box-shadow: 2px 2px 1px #888;
958    -webkit-box-shadow: 2px 2px 1px #888;
959    box-shadow: 2px 2px 1px #888;
960}
961
962.questionDisplayContent {
963    margin: 0;
964    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
965    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
966    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
967    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
968    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
969    background-image: -webkit-gradient(
970        linear,
971        left top,
972        left bottom,
973        color-stop(0.25, #B0B0B0),
974        color-stop(0.8, #888888)
975        );
976    padding: 0.5em;
977}
978
979.questionDisplayControls {
980    text-align: right;
981}
982
983p.questionBody {
984    border: 1px solid #cccccc;
985    background-color: #c5c5c5;
986}
987
988#surveyEditorControls {
989    text-align: right;
990}
Note: See TracBrowser for help on using the repository browser.