1 /***************************************/
4 background: -webkit-gradient(linear, left top, right top,
7 color-stop(0.80, #c5ccd3),
8 color-stop(0.80, #cfd5dd));
9 -webkit-background-origin: padding-box;
10 -webkit-background-clip: content-box;
11 -webkit-background-size: 10px 1px;
14 .fl-theme-iphone .fl-bevel-black {
15 text-shadow: rgba(0,0,0,0.35) 0px -1px 0px;
17 .fl-theme-iphone .fl-bevel-white {
18 text-shadow: rgba(255,255,255,1) 0px 1px 0px;
22 -webkit-touch-callout:none; /* prevents iphone popup menu to copy / follow / bookmark a particular link */
23 -webkit-tap-highlight-color: rgba(0,0,0,0);
31 text-shadow: rgba(255,255,255,1) 0px 1px 0px;
35 /***************************************/
39 .fl-theme-iphone .fl-navbar {
40 border-top-color:#ccd6e2;
41 border-bottom-color:#000;
42 background-image: -webkit-gradient(linear, left top, left bottom,
44 color-stop(0.5, #889BB3),
45 color-stop(0.50, #6D84A2),
49 .fl-theme-iphone .fl-navbar {
53 .fl-theme-iphone .fl-navbar h1 {
55 text-shadow: rgba(0,0,0,0.5) 0px -1px 0px;
58 .fl-theme-iphone .fl-navbar a {
60 text-shadow: rgba(0,0,0,0.5) 0px -1px 0px;
62 .fl-theme-iphone .fl-navbar .fl-button {
63 -webkit-border-image:none;
64 background-image: -webkit-gradient(linear, left top, left bottom,
66 color-stop(0.5, #6d8cb3),
67 color-stop(0.50, #4b6b90),
71 .fl-theme-iphone .fl-navbar [class*=fl-button]:active {
72 background-image: -webkit-gradient(linear, left top, left bottom,
73 from(rgba(149, 184, 239,1)),
74 to(rgba(35,109,229,1)),
75 color-stop(0.5, rgba(149, 184, 239,1)),
76 color-stop(0.50, rgba(75,148,244,1))
80 .fl-theme-iphone .fl-navbar .fl-backButton {
81 /* See mobile layout for details */
82 -webkit-border-image: url(../images/themes/iphone/navbar_back_button_insetShadow.png) 0 15 stretch;
83 -webkit-mask-box-image: url(../images/themes/iphone/backbutton_mask.png) 0 15 stretch;
86 .fl-theme-iphone .fl-navbar .fl-button-inner {
87 -webkit-border-image: url(../images/themes/iphone/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
90 /***************************************/
91 /* general purpose gel buttons */
92 /* effect is applied anywhere but the navbar, which has its own button look */
93 .fl-theme-iphone .fl-button {
96 -webkit-border-image: url(../images/themes/iphone/button_bg_insetShadow.png) 10 stretch;
98 .fl-theme-iphone .fl-button.fl-bevel-white {
101 .fl-theme-iphone .fl-button.fl-bevel-black {
104 .fl-theme-iphone .fl-button-white {
105 background-image: -webkit-gradient(linear, left top, left bottom,
106 from(rgba(240,240,240,0.25)),
107 to(rgba(220,220,220,0.75)),
108 color-stop(0.5, rgba(240,240,240,1)),
109 color-stop(0.50, rgba(200,200,200,0.8))
112 .fl-theme-iphone .fl-button-black {
113 background-image: -webkit-gradient(linear, left top, left bottom,
114 from(rgba(106,106,106,0.25)),
115 to(rgba(00,00,00,0.75)),
116 color-stop(0.5, rgba(130,130,130,1)),
117 color-stop(0.50, rgba(75,75,75,0.8))
120 .fl-theme-iphone .fl-button-green {
121 background-image: -webkit-gradient(linear, left top, left bottom,
122 from(rgba(120,190,130,0.2)),
123 to(rgba(50,170,60,0.75)),
124 color-stop(0.5, rgba(120,190,130,1)),
125 color-stop(0.50, rgba(0,150,10,0.8))
128 .fl-theme-iphone .fl-button-blue {
129 background-image: -webkit-gradient(linear, left top, left bottom,
130 from(rgba(149, 184, 239,0.2)),
131 to(rgba(35,109,229,0.75)),
132 color-stop(0.5, rgba(149, 184, 239,1)),
133 color-stop(0.50, rgba(75,148,244,0.8))
136 /***************************************/
137 /* tabs 1: small general purpose content dividers */
139 .fl-theme-iphone .fl-tabs li {
140 background-image: -webkit-gradient(linear, left top, left bottom,
142 color-stop(0.5, #6d8cb3),
143 color-stop(0.50, #4b6b90),
146 -webkit-border-image: url(../images/themes/iphone/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
147 -webkit-border-left-image: none;
148 -webkit-background-origin: border;
149 -webkit-background-clip: border;
152 .fl-theme-iphone .fl-tabs li a,
153 .fl-theme-iphone .fl-tabs .fl-tabs-active a {
155 border-right-color:rgba(255,255,255,0.35);
156 border-left-color:rgba(0,0,0,0.35);
159 .fl-theme-iphone .fl-tabs .fl-tabs-active {
160 background-image: -webkit-gradient(linear, left top, left bottom,
161 from(rgba(149, 184, 239,1)),
162 to(rgba(35,109,229,1)),
163 color-stop(0.5, rgba(149, 184, 239,1)),
164 color-stop(0.50, rgba(75,148,244,1))
168 /*************************************************/
169 /* Ordered lists, Unordererd lists, Thumbnail lists, Icon lists, Definition lists */
170 /*************************************************/
171 /* Default list system setup */
173 .fl-theme-iphone .fl-list a {
177 .fl-theme-iphone [class*=fl-list] > li {
179 border-color: rgb(169,173,176);
180 background-color:#fff;
183 /* secondary link info behaviour */
184 .fl-theme-iphone [class*=fl-list] > li .fl-link-secondary {
185 color: rgb(50, 79, 133);
188 /* summary link info ehaviour */
189 .fl-theme-iphone [class*=fl-list] > li .fl-link-summary {
193 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a {
194 background: url(../images/themes/iphone/listmenu_arrow.png) no-repeat right 5px;
197 /* A simulation for a:active on the device, requires JS */
198 /* since .fl-list is for mixed material lists, dont include them in these effects */
199 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
200 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
202 background: url(../images/themes/iphone/listmenu_arrow.png) no-repeat right -25px,
203 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
206 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a:active,
207 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a:active .fl-link-secondary,
208 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a:active .fl-link-summary,
209 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a.fl-link-loading * {
213 .fl-theme-iphone [class*=fl-list]:not(.fl-list) a.fl-link-loading {
215 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
216 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
219 /***************************************/
220 /* Grid overrides, removes nav coloring */
221 .fl-theme-iphone .fl-grid li {
222 background-color:transparent;
224 .fl-theme-iphone .fl-grid li,
225 .fl-theme-iphone .fl-grid li a {
226 background-image:none;
229 .fl-theme-iphone .fl-grid li a {
230 background-color:#333;
232 .fl-theme-iphone .fl-grid li a:active,
233 .fl-theme-iphone .fl-grid .fl-link-hilight {
235 background: -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
238 /***************************************/
239 /* instructional text (usually embossed too)*/
240 .fl-theme-iphone .fl-note {
244 /****************************/
245 /* Collapsing and expanding panels */
246 .fl-theme-iphone .fl-container-autoHeading > *:first-child {
248 color:rgba(255,255,255,1);
249 text-shadow: rgba(0,0,0, 1) 0px -1px 1px;
250 background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#000));
252 .fl-theme-iphone .fl-container-autoHeading > *:first-child:focus {
255 text-shadow: rgba(0,0,0, .5) 0px 1px 2px;
256 background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
259 /****************************/
260 /* Gloss tint for glossy icons/thumbnails */
262 .fl-theme-iphone .fl-list-glossy > li a::before {
263 background-image: -webkit-gradient(radial, 50% -15%, 10, 50% -50%, 45, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)), color-stop(90%, rgba(255,255,255,.65)));