1 | /* stylesheet for innovation stories */
|
---|
2 |
|
---|
3 | body.story {
|
---|
4 | }
|
---|
5 |
|
---|
6 | div#idea {
|
---|
7 | width:120px;
|
---|
8 | height:108px;
|
---|
9 | margin: 0 auto;
|
---|
10 | }
|
---|
11 |
|
---|
12 | img.status {
|
---|
13 | position: absolute;
|
---|
14 | bottom:2%;
|
---|
15 | left:35%;
|
---|
16 | width:25%;
|
---|
17 | }
|
---|
18 |
|
---|
19 | body {
|
---|
20 | margin:0;
|
---|
21 | padding:0;
|
---|
22 | border: none;
|
---|
23 |
|
---|
24 | /* Safe fonts web.mit.edu/jmorzins/www/fonts.html */
|
---|
25 | /* Can't find out what the designer used and custom fonts are a pain to set up anyway. Supposed to be sans-serif but stout, Garamond is serif but stout */
|
---|
26 | /*font-family: "Century Gothic", "Garamond", "Tahoma", "Helvetica", sans-serif; */
|
---|
27 | font-family: "Century Gothic", serif;
|
---|
28 | }
|
---|
29 |
|
---|
30 | div.story-title {
|
---|
31 | position:relative;
|
---|
32 | }
|
---|
33 | .center {
|
---|
34 | text-align:center;
|
---|
35 | }
|
---|
36 |
|
---|
37 | .swipe-text {
|
---|
38 | position:absolute;
|
---|
39 | background-image:url("../images/textforswipe.png");
|
---|
40 | width: 466px;
|
---|
41 | height: 300px;
|
---|
42 | right:7%;
|
---|
43 | bottom:9%;
|
---|
44 | }
|
---|
45 |
|
---|
46 | /* The Go Back button */
|
---|
47 | .back-button {
|
---|
48 | z-index:100;
|
---|
49 | position:absolute;
|
---|
50 | display: inline;
|
---|
51 | /*float:left;*/
|
---|
52 | background-image:url("../images/backbutton.png");
|
---|
53 | width: 116px;
|
---|
54 | height: 162px;
|
---|
55 | }
|
---|
56 |
|
---|
57 | .back-left {
|
---|
58 | /*top:20px;
|
---|
59 | left:60px;*/
|
---|
60 | top:2%;
|
---|
61 | left:2%;
|
---|
62 | }
|
---|
63 |
|
---|
64 | .back-right {
|
---|
65 | right:5%;
|
---|
66 | bottom:5%;
|
---|
67 | }
|
---|
68 |
|
---|
69 | /* The forward anchor link - bottom right */
|
---|
70 | a.fwd-button {
|
---|
71 | z-index:100;
|
---|
72 |
|
---|
73 | position:absolute;
|
---|
74 | display: inline;
|
---|
75 | /*float:left;*/
|
---|
76 | background-image:url("../images/forwardbutton.png");
|
---|
77 | width: 116px;
|
---|
78 | height: 162px;
|
---|
79 |
|
---|
80 | right:5%;
|
---|
81 | bottom:5%;
|
---|
82 | /*width: 69px;
|
---|
83 | height: 72px;*/
|
---|
84 | }
|
---|
85 |
|
---|
86 |
|
---|
87 | /* Forward and Back buttons on the left and right */
|
---|
88 | .left-button {
|
---|
89 | position:absolute;
|
---|
90 | top:50%;
|
---|
91 | width: 28px;
|
---|
92 | height: 31px;
|
---|
93 | }
|
---|
94 |
|
---|
95 | .right-button {
|
---|
96 | position:absolute;
|
---|
97 | top:50%;
|
---|
98 | width: 28px;
|
---|
99 | height: 31px;
|
---|
100 | }
|
---|
101 |
|
---|
102 | .idea-fwd {background-image:url("../images/idea-forward.png");}
|
---|
103 | .idea-back { background-image:url("../images/idea-back.png");}
|
---|
104 | .res-fwd {background-image:url("../images/research-forward.png");}
|
---|
105 | .res-back {background-image:url("../images/research-back.png");}
|
---|
106 | .dev-fwd {background-image:url("../images/development-forward.png");}
|
---|
107 | .dev-back {background-image:url("../images/development-back.png");}
|
---|
108 | .test-fwd {background-image:url("../images/testing-forward.png");}
|
---|
109 | .test-back {background-image:url("../images/testing-back.png");}
|
---|
110 | .sol-fwd {background-image:url("../images/solution-forward.png");}
|
---|
111 | .sol-back {background-image:url("../images/solution-back.png");}
|
---|
112 | .gen-fwd {background-image:url("../images/general-forward.png");}
|
---|
113 | .gen-back {background-image:url("../images/general-back.png");}
|
---|
114 |
|
---|
115 |
|
---|
116 | /* demo-page is defined in the jquery sliding part of this phonegap app*/
|
---|
117 |
|
---|
118 | /* http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ */
|
---|
119 | div.story-page {
|
---|
120 | background: none; /*#632468;*/
|
---|
121 |
|
---|
122 | /*overflow: scroll;*/
|
---|
123 | position:absolute; /* position with respect to entire window */
|
---|
124 |
|
---|
125 |
|
---|
126 | /* To get total width of textbox, add 2x padding. To get total height, add 2x padding. */
|
---|
127 |
|
---|
128 | /*left: 160px;
|
---|
129 | top: 80px;
|
---|
130 | width: 610px;
|
---|
131 | height: 350px;
|
---|
132 | padding: 10px;
|
---|
133 | */
|
---|
134 |
|
---|
135 | /*border:2px solid white;*/
|
---|
136 |
|
---|
137 | margin:5.5% 10.5%;
|
---|
138 | width: 71%;
|
---|
139 | height: 74.5%;
|
---|
140 | padding: 2%;
|
---|
141 |
|
---|
142 | /*
|
---|
143 | width: 62%; 64%;
|
---|
144 | height: 67%;
|
---|
145 | margin:9% 14.5%; 6.5% 15%; margin:7% 14.5%;
|
---|
146 | padding:2%;
|
---|
147 | */
|
---|
148 |
|
---|
149 | }
|
---|
150 |
|
---|
151 | div.story-page {
|
---|
152 | line-height: 1.5; /* no unit means number of lines, e.g. 2 is double-spaced */
|
---|
153 | }
|
---|
154 |
|
---|
155 | div.story-page h1, h2 { /*, h3, h4, h5, h6*/
|
---|
156 | font-weight: normal;
|
---|
157 | }
|
---|
158 |
|
---|
159 | div.story-page h2, h3, h4, h5, h6, p {
|
---|
160 | /*padding-left:50px;*/ /*indented*/
|
---|
161 | }
|
---|
162 |
|
---|
163 | div.story-page p {
|
---|
164 | font-size: 250%;
|
---|
165 | /*text-align: justify;*/
|
---|
166 | }
|
---|
167 |
|
---|
168 | img.left, video.left {
|
---|
169 | float:left;
|
---|
170 | margin-right:20px;
|
---|
171 | }
|
---|
172 | img.right, video.right {
|
---|
173 | float:right;
|
---|
174 | margin-left:20px;
|
---|
175 | }
|
---|
176 |
|
---|
177 | /* Section Icons
|
---|
178 | http://stackoverflow.com/questions/1496203/css-displaying-one-particular-icon-from-an-image-file
|
---|
179 | */
|
---|
180 | .story-icon {
|
---|
181 | display: inline;
|
---|
182 | width: 53px;
|
---|
183 | height: 53px;
|
---|
184 | background-image:url("../images/icons_smaller.png");
|
---|
185 | float:left;
|
---|
186 | margin-right:10px;
|
---|
187 | }
|
---|
188 | .idea {
|
---|
189 | background-position: -30px -12px ;
|
---|
190 | /*background-position: top left;*/
|
---|
191 | }
|
---|
192 | .research {
|
---|
193 | background-position: -88px -12px ;
|
---|
194 | }
|
---|
195 | .testing {
|
---|
196 | background-position: -145px -12px ;
|
---|
197 | }
|
---|
198 | .development { /* 4th image down */
|
---|
199 | background-position: -202px -191px ;
|
---|
200 | }
|
---|
201 | .solution {
|
---|
202 | background-position: -255px -12px ;
|
---|
203 | }
|
---|
204 | /* End Section Icons */
|
---|
205 |
|
---|
206 | /* Image and video */
|
---|
207 | img.bodyimg {
|
---|
208 |
|
---|
209 | }
|
---|
210 |
|
---|
211 | .constrainHeight {
|
---|
212 | height:200px; /*100px*/
|
---|
213 | }
|
---|
214 |
|
---|
215 | .constrainHeight2 {
|
---|
216 | height:180px;
|
---|
217 | padding-top:10px;
|
---|
218 | }
|
---|
219 |
|
---|
220 | .constrainHeight3 {
|
---|
221 | height:220px;
|
---|
222 | }
|
---|
223 |
|
---|
224 | .constrainWidth {
|
---|
225 | width:320px; /*100px*/
|
---|
226 | }
|
---|
227 |
|
---|
228 | .full-length {
|
---|
229 | position:relative;
|
---|
230 | height:100%
|
---|
231 | }
|
---|
232 |
|
---|
233 | .full-width {
|
---|
234 | position:relative;
|
---|
235 | width:100%
|
---|
236 | }
|
---|
237 |
|
---|
238 | .h75 {
|
---|
239 | position:relative;
|
---|
240 | height:75%
|
---|
241 | }
|
---|