Statistics
| Branch: | Tag: | Revision:

root / astakos / im / static / im / grnetstyles / less / patterns.less @ 13858d75

History | View | Annotate | Download (20.8 kB)

1 13858d75 Kostas Papadimitriou
/* Patterns.less
2 13858d75 Kostas Papadimitriou
 * Repeatable UI elements outside the base styles provided from the scaffolding
3 13858d75 Kostas Papadimitriou
 * ---------------------------------------------------------------------------- */
4 13858d75 Kostas Papadimitriou
5 13858d75 Kostas Papadimitriou
6 13858d75 Kostas Papadimitriou
// TOPBAR
7 13858d75 Kostas Papadimitriou
// ------
8 13858d75 Kostas Papadimitriou
9 13858d75 Kostas Papadimitriou
// Topbar for Branding and Nav
10 13858d75 Kostas Papadimitriou
.topbar {
11 13858d75 Kostas Papadimitriou
  height: 40px;
12 13858d75 Kostas Papadimitriou
  position: fixed;
13 13858d75 Kostas Papadimitriou
  top: 0;
14 13858d75 Kostas Papadimitriou
  left: 0;
15 13858d75 Kostas Papadimitriou
  right: 0;
16 13858d75 Kostas Papadimitriou
  z-index: 10000;
17 13858d75 Kostas Papadimitriou
  overflow: visible;
18 13858d75 Kostas Papadimitriou
19 13858d75 Kostas Papadimitriou
  // Links get text shadow
20 13858d75 Kostas Papadimitriou
  a {
21 13858d75 Kostas Papadimitriou
    color: @grayLight;
22 13858d75 Kostas Papadimitriou
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23 13858d75 Kostas Papadimitriou
  }
24 13858d75 Kostas Papadimitriou
25 13858d75 Kostas Papadimitriou
  // Hover and active states
26 13858d75 Kostas Papadimitriou
  // h3 for backwards compatibility
27 13858d75 Kostas Papadimitriou
  h3 a:hover,
28 13858d75 Kostas Papadimitriou
  .brand:hover,
29 13858d75 Kostas Papadimitriou
  ul .active > a {
30 13858d75 Kostas Papadimitriou
    background-color: #333;
31 13858d75 Kostas Papadimitriou
    background-color: rgba(255,255,255,.05);
32 13858d75 Kostas Papadimitriou
    color: @white;
33 13858d75 Kostas Papadimitriou
    text-decoration: none;
34 13858d75 Kostas Papadimitriou
  }
35 13858d75 Kostas Papadimitriou
36 13858d75 Kostas Papadimitriou
  // Website name
37 13858d75 Kostas Papadimitriou
  // h3 left for backwards compatibility
38 13858d75 Kostas Papadimitriou
  h3 {
39 13858d75 Kostas Papadimitriou
    position: relative;
40 13858d75 Kostas Papadimitriou
  }
41 13858d75 Kostas Papadimitriou
  h3 a,
42 13858d75 Kostas Papadimitriou
  .brand {
43 13858d75 Kostas Papadimitriou
    float: left;
44 13858d75 Kostas Papadimitriou
    display: block;
45 13858d75 Kostas Papadimitriou
    padding: 8px 20px 12px;
46 13858d75 Kostas Papadimitriou
    margin-left: -20px; // negative indent to left-align the text down the page
47 13858d75 Kostas Papadimitriou
    color: @white;
48 13858d75 Kostas Papadimitriou
    font-size: 20px;
49 13858d75 Kostas Papadimitriou
    font-weight: 200;
50 13858d75 Kostas Papadimitriou
    line-height: 1;
51 13858d75 Kostas Papadimitriou
  }
52 13858d75 Kostas Papadimitriou
53 13858d75 Kostas Papadimitriou
  // Plain text in topbar
54 13858d75 Kostas Papadimitriou
  p {
55 13858d75 Kostas Papadimitriou
    margin: 0;
56 13858d75 Kostas Papadimitriou
    line-height: 40px;
57 13858d75 Kostas Papadimitriou
    a:hover {
58 13858d75 Kostas Papadimitriou
      background-color: transparent;
59 13858d75 Kostas Papadimitriou
      color: @white;
60 13858d75 Kostas Papadimitriou
    }
61 13858d75 Kostas Papadimitriou
  }
62 13858d75 Kostas Papadimitriou
63 13858d75 Kostas Papadimitriou
  // Search Form
64 13858d75 Kostas Papadimitriou
  form {
65 13858d75 Kostas Papadimitriou
    float: left;
66 13858d75 Kostas Papadimitriou
    margin: 5px 0 0 0;
67 13858d75 Kostas Papadimitriou
    position: relative;
68 13858d75 Kostas Papadimitriou
    .opacity(100);
69 13858d75 Kostas Papadimitriou
  }
70 13858d75 Kostas Papadimitriou
  // Todo: remove from v2.0 when ready, added for legacy
71 13858d75 Kostas Papadimitriou
  form.pull-right {
72 13858d75 Kostas Papadimitriou
    float: right;
73 13858d75 Kostas Papadimitriou
  }
74 13858d75 Kostas Papadimitriou
  input {
75 13858d75 Kostas Papadimitriou
    background-color: #444;
76 13858d75 Kostas Papadimitriou
    background-color: rgba(255,255,255,.3);
77 13858d75 Kostas Papadimitriou
    #font > .sans-serif(13px, normal, 1);
78 13858d75 Kostas Papadimitriou
    padding: 4px 9px;
79 13858d75 Kostas Papadimitriou
    color: @white;
80 13858d75 Kostas Papadimitriou
    color: rgba(255,255,255,.75);
81 13858d75 Kostas Papadimitriou
    border: 1px solid #111;
82 13858d75 Kostas Papadimitriou
    .border-radius(4px);
83 13858d75 Kostas Papadimitriou
    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84 13858d75 Kostas Papadimitriou
    .box-shadow(@shadow);
85 13858d75 Kostas Papadimitriou
    .transition(none);
86 13858d75 Kostas Papadimitriou
87 13858d75 Kostas Papadimitriou
    // Placeholder text gets special styles; can't be bundled together though for some reason
88 13858d75 Kostas Papadimitriou
    &:-moz-placeholder {
89 13858d75 Kostas Papadimitriou
      color: @grayLighter;
90 13858d75 Kostas Papadimitriou
    }
91 13858d75 Kostas Papadimitriou
    &::-webkit-input-placeholder {
92 13858d75 Kostas Papadimitriou
      color: @grayLighter;
93 13858d75 Kostas Papadimitriou
    }
94 13858d75 Kostas Papadimitriou
    // Hover states
95 13858d75 Kostas Papadimitriou
    &:hover {
96 13858d75 Kostas Papadimitriou
      background-color: @grayLight;
97 13858d75 Kostas Papadimitriou
      background-color: rgba(255,255,255,.5);
98 13858d75 Kostas Papadimitriou
      color: @white;
99 13858d75 Kostas Papadimitriou
    }
100 13858d75 Kostas Papadimitriou
    // Focus states (we use .focused since IE8 and down doesn't support :focus)
101 13858d75 Kostas Papadimitriou
    &:focus,
102 13858d75 Kostas Papadimitriou
    &.focused {
103 13858d75 Kostas Papadimitriou
      outline: 0;
104 13858d75 Kostas Papadimitriou
      background-color: @white;
105 13858d75 Kostas Papadimitriou
      color: @grayDark;
106 13858d75 Kostas Papadimitriou
      text-shadow: 0 1px 0 @white;
107 13858d75 Kostas Papadimitriou
      border: 0;
108 13858d75 Kostas Papadimitriou
      padding: 5px 10px;
109 13858d75 Kostas Papadimitriou
      .box-shadow(0 0 3px rgba(0,0,0,.15));
110 13858d75 Kostas Papadimitriou
    }
111 13858d75 Kostas Papadimitriou
  }
112 13858d75 Kostas Papadimitriou
}
113 13858d75 Kostas Papadimitriou
114 13858d75 Kostas Papadimitriou
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115 13858d75 Kostas Papadimitriou
// For backwards compatibility, include .topbar .fill
116 13858d75 Kostas Papadimitriou
.topbar-inner,
117 13858d75 Kostas Papadimitriou
.topbar .fill {
118 13858d75 Kostas Papadimitriou
  background-color: #222;
119 13858d75 Kostas Papadimitriou
  #gradient > .vertical(#333, #222);
120 13858d75 Kostas Papadimitriou
  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121 13858d75 Kostas Papadimitriou
  .box-shadow(@shadow);
122 13858d75 Kostas Papadimitriou
}
123 13858d75 Kostas Papadimitriou
124 13858d75 Kostas Papadimitriou
125 13858d75 Kostas Papadimitriou
// NAVIGATION
126 13858d75 Kostas Papadimitriou
// ----------
127 13858d75 Kostas Papadimitriou
128 13858d75 Kostas Papadimitriou
// Topbar Nav
129 13858d75 Kostas Papadimitriou
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130 13858d75 Kostas Papadimitriou
// For backwards compatibility, leave in .topbar div > ul
131 13858d75 Kostas Papadimitriou
.topbar div > ul,
132 13858d75 Kostas Papadimitriou
.nav {
133 13858d75 Kostas Papadimitriou
  display: block;
134 13858d75 Kostas Papadimitriou
  float: left;
135 13858d75 Kostas Papadimitriou
  margin: 0 10px 0 0;
136 13858d75 Kostas Papadimitriou
  position: relative;
137 13858d75 Kostas Papadimitriou
  left: 0;
138 13858d75 Kostas Papadimitriou
  > li {
139 13858d75 Kostas Papadimitriou
    display: block;
140 13858d75 Kostas Papadimitriou
    float: left;
141 13858d75 Kostas Papadimitriou
  }
142 13858d75 Kostas Papadimitriou
  a {
143 13858d75 Kostas Papadimitriou
    display: block;
144 13858d75 Kostas Papadimitriou
    float: none;
145 13858d75 Kostas Papadimitriou
    padding: 10px 10px 11px;
146 13858d75 Kostas Papadimitriou
    line-height: 19px;
147 13858d75 Kostas Papadimitriou
    text-decoration: none;
148 13858d75 Kostas Papadimitriou
    &:hover {
149 13858d75 Kostas Papadimitriou
      color: @white;
150 13858d75 Kostas Papadimitriou
      text-decoration: none;
151 13858d75 Kostas Papadimitriou
    }
152 13858d75 Kostas Papadimitriou
  }
153 13858d75 Kostas Papadimitriou
  .active > a {
154 13858d75 Kostas Papadimitriou
    background-color: #222;
155 13858d75 Kostas Papadimitriou
    background-color: rgba(0,0,0,.5);
156 13858d75 Kostas Papadimitriou
  }
157 13858d75 Kostas Papadimitriou
158 13858d75 Kostas Papadimitriou
  // Secondary (floated right) nav in topbar
159 13858d75 Kostas Papadimitriou
  &.secondary-nav {
160 13858d75 Kostas Papadimitriou
    float: right;
161 13858d75 Kostas Papadimitriou
    margin-left: 10px;
162 13858d75 Kostas Papadimitriou
    margin-right: 0;
163 13858d75 Kostas Papadimitriou
    // backwards compatibility
164 13858d75 Kostas Papadimitriou
    .menu-dropdown,
165 13858d75 Kostas Papadimitriou
    .dropdown-menu {
166 13858d75 Kostas Papadimitriou
      right: 0;
167 13858d75 Kostas Papadimitriou
      border: 0;
168 13858d75 Kostas Papadimitriou
    }
169 13858d75 Kostas Papadimitriou
  }
170 13858d75 Kostas Papadimitriou
  // Dropdowns within the .nav
171 13858d75 Kostas Papadimitriou
  // a.menu:hover and li.open .menu for backwards compatibility
172 13858d75 Kostas Papadimitriou
  a.menu:hover,
173 13858d75 Kostas Papadimitriou
  li.open .menu,
174 13858d75 Kostas Papadimitriou
  .dropdown-toggle:hover,
175 13858d75 Kostas Papadimitriou
  .dropdown.open .dropdown-toggle {
176 13858d75 Kostas Papadimitriou
    background: #444;
177 13858d75 Kostas Papadimitriou
    background: rgba(255,255,255,.05);
178 13858d75 Kostas Papadimitriou
  }
179 13858d75 Kostas Papadimitriou
  // .menu-dropdown for backwards compatibility
180 13858d75 Kostas Papadimitriou
  .menu-dropdown,
181 13858d75 Kostas Papadimitriou
  .dropdown-menu {
182 13858d75 Kostas Papadimitriou
    background-color: #333;
183 13858d75 Kostas Papadimitriou
    // a.menu for backwards compatibility
184 13858d75 Kostas Papadimitriou
    a.menu,
185 13858d75 Kostas Papadimitriou
    .dropdown-toggle {
186 13858d75 Kostas Papadimitriou
      color: @white;
187 13858d75 Kostas Papadimitriou
      &.open {
188 13858d75 Kostas Papadimitriou
        background: #444;
189 13858d75 Kostas Papadimitriou
        background: rgba(255,255,255,.05);
190 13858d75 Kostas Papadimitriou
      }
191 13858d75 Kostas Papadimitriou
    }
192 13858d75 Kostas Papadimitriou
    li a {
193 13858d75 Kostas Papadimitriou
      color: #999;
194 13858d75 Kostas Papadimitriou
      text-shadow: 0 1px 0 rgba(0,0,0,.5);
195 13858d75 Kostas Papadimitriou
      &:hover {
196 13858d75 Kostas Papadimitriou
        #gradient > .vertical(#292929,#191919);
197 13858d75 Kostas Papadimitriou
        color: @white;
198 13858d75 Kostas Papadimitriou
      }
199 13858d75 Kostas Papadimitriou
    }
200 13858d75 Kostas Papadimitriou
    .active a {
201 13858d75 Kostas Papadimitriou
      color: @white;
202 13858d75 Kostas Papadimitriou
    }
203 13858d75 Kostas Papadimitriou
    .divider {
204 13858d75 Kostas Papadimitriou
      background-color: #222;
205 13858d75 Kostas Papadimitriou
      border-color: #444;
206 13858d75 Kostas Papadimitriou
    }
207 13858d75 Kostas Papadimitriou
  }
208 13858d75 Kostas Papadimitriou
}
209 13858d75 Kostas Papadimitriou
210 13858d75 Kostas Papadimitriou
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
211 13858d75 Kostas Papadimitriou
.topbar ul .menu-dropdown li a,
212 13858d75 Kostas Papadimitriou
.topbar ul .dropdown-menu li a {
213 13858d75 Kostas Papadimitriou
  padding: 4px 15px;
214 13858d75 Kostas Papadimitriou
}
215 13858d75 Kostas Papadimitriou
216 13858d75 Kostas Papadimitriou
// Dropdown Menus
217 13858d75 Kostas Papadimitriou
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218 13858d75 Kostas Papadimitriou
// li.menu for backwards compatibility
219 13858d75 Kostas Papadimitriou
li.menu,
220 13858d75 Kostas Papadimitriou
.dropdown {
221 13858d75 Kostas Papadimitriou
  position: relative;
222 13858d75 Kostas Papadimitriou
}
223 13858d75 Kostas Papadimitriou
// The link that is clicked to toggle the dropdown
224 13858d75 Kostas Papadimitriou
// a.menu for backwards compatibility
225 13858d75 Kostas Papadimitriou
a.menu:after,
226 13858d75 Kostas Papadimitriou
.dropdown-toggle:after {
227 13858d75 Kostas Papadimitriou
  width: 0;
228 13858d75 Kostas Papadimitriou
  height: 0;
229 13858d75 Kostas Papadimitriou
  display: inline-block;
230 13858d75 Kostas Papadimitriou
  content: "&darr;";
231 13858d75 Kostas Papadimitriou
  text-indent: -99999px;
232 13858d75 Kostas Papadimitriou
  vertical-align: top;
233 13858d75 Kostas Papadimitriou
  margin-top: 8px;
234 13858d75 Kostas Papadimitriou
  margin-left: 4px;
235 13858d75 Kostas Papadimitriou
  border-left: 4px solid transparent;
236 13858d75 Kostas Papadimitriou
  border-right: 4px solid transparent;
237 13858d75 Kostas Papadimitriou
  border-top: 4px solid @white;
238 13858d75 Kostas Papadimitriou
  .opacity(50);
239 13858d75 Kostas Papadimitriou
}
240 13858d75 Kostas Papadimitriou
// The dropdown menu (ul)
241 13858d75 Kostas Papadimitriou
// .menu-dropdown for backwards compatibility
242 13858d75 Kostas Papadimitriou
.menu-dropdown,
243 13858d75 Kostas Papadimitriou
.dropdown-menu {
244 13858d75 Kostas Papadimitriou
  background-color: @white;
245 13858d75 Kostas Papadimitriou
  float: left;
246 13858d75 Kostas Papadimitriou
  display: none; // None by default, but block on "open" of the menu
247 13858d75 Kostas Papadimitriou
  position: absolute;
248 13858d75 Kostas Papadimitriou
  top: 40px;
249 13858d75 Kostas Papadimitriou
  z-index: 900;
250 13858d75 Kostas Papadimitriou
  min-width: 160px;
251 13858d75 Kostas Papadimitriou
  max-width: 220px;
252 13858d75 Kostas Papadimitriou
  _width: 160px;
253 13858d75 Kostas Papadimitriou
  margin-left: 0; // override default ul styles
254 13858d75 Kostas Papadimitriou
  margin-right: 0;
255 13858d75 Kostas Papadimitriou
  padding: 6px 0;
256 13858d75 Kostas Papadimitriou
  zoom: 1; // do we need this?
257 13858d75 Kostas Papadimitriou
  border-color: #999;
258 13858d75 Kostas Papadimitriou
  border-color: rgba(0,0,0,.2);
259 13858d75 Kostas Papadimitriou
  border-style: solid;
260 13858d75 Kostas Papadimitriou
  border-width: 0 1px 1px;
261 13858d75 Kostas Papadimitriou
  .border-radius(0 0 6px 6px);
262 13858d75 Kostas Papadimitriou
  .box-shadow(0 2px 4px rgba(0,0,0,.2));
263 13858d75 Kostas Papadimitriou
  .background-clip(padding-box);
264 13858d75 Kostas Papadimitriou
265 13858d75 Kostas Papadimitriou
  // Unfloat any li's to make them stack
266 13858d75 Kostas Papadimitriou
  li {
267 13858d75 Kostas Papadimitriou
    float: none;
268 13858d75 Kostas Papadimitriou
    display: block;
269 13858d75 Kostas Papadimitriou
    background-color: none;
270 13858d75 Kostas Papadimitriou
  }
271 13858d75 Kostas Papadimitriou
  // Dividers (basically an hr) within the dropdown
272 13858d75 Kostas Papadimitriou
  .divider {
273 13858d75 Kostas Papadimitriou
    height: 1px;
274 13858d75 Kostas Papadimitriou
    margin: 5px 0;
275 13858d75 Kostas Papadimitriou
    overflow: hidden;
276 13858d75 Kostas Papadimitriou
    background-color: #eee;
277 13858d75 Kostas Papadimitriou
    border-bottom: 1px solid @white;
278 13858d75 Kostas Papadimitriou
  }
279 13858d75 Kostas Papadimitriou
}
280 13858d75 Kostas Papadimitriou
281 13858d75 Kostas Papadimitriou
.topbar .dropdown-menu,
282 13858d75 Kostas Papadimitriou
.dropdown-menu {
283 13858d75 Kostas Papadimitriou
  // Links within the dropdown menu
284 13858d75 Kostas Papadimitriou
  a {
285 13858d75 Kostas Papadimitriou
    display: block;
286 13858d75 Kostas Papadimitriou
    padding: 4px 15px;
287 13858d75 Kostas Papadimitriou
    clear: both;
288 13858d75 Kostas Papadimitriou
    font-weight: normal;
289 13858d75 Kostas Papadimitriou
    line-height: 18px;
290 13858d75 Kostas Papadimitriou
    color: @gray;
291 13858d75 Kostas Papadimitriou
    text-shadow: 0 1px 0 @white;
292 13858d75 Kostas Papadimitriou
    // Hover state
293 13858d75 Kostas Papadimitriou
    &:hover,
294 13858d75 Kostas Papadimitriou
    &.hover {
295 13858d75 Kostas Papadimitriou
      #gradient > .vertical(#eeeeee, #dddddd);
296 13858d75 Kostas Papadimitriou
      color: @grayDark;
297 13858d75 Kostas Papadimitriou
      text-decoration: none;
298 13858d75 Kostas Papadimitriou
      @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299 13858d75 Kostas Papadimitriou
      .box-shadow(@shadow);
300 13858d75 Kostas Papadimitriou
    }
301 13858d75 Kostas Papadimitriou
  }
302 13858d75 Kostas Papadimitriou
}
303 13858d75 Kostas Papadimitriou
304 13858d75 Kostas Papadimitriou
// Open state for the dropdown
305 13858d75 Kostas Papadimitriou
// .open for backwards compatibility
306 13858d75 Kostas Papadimitriou
.open,
307 13858d75 Kostas Papadimitriou
.dropdown.open {
308 13858d75 Kostas Papadimitriou
  // .menu for backwards compatibility
309 13858d75 Kostas Papadimitriou
  .menu,
310 13858d75 Kostas Papadimitriou
  .dropdown-toggle {
311 13858d75 Kostas Papadimitriou
    color: @white;
312 13858d75 Kostas Papadimitriou
    background: #ccc;
313 13858d75 Kostas Papadimitriou
    background: rgba(0,0,0,.3);
314 13858d75 Kostas Papadimitriou
  }
315 13858d75 Kostas Papadimitriou
  // .menu-dropdown for backwards compatibility
316 13858d75 Kostas Papadimitriou
  .menu-dropdown,
317 13858d75 Kostas Papadimitriou
  .dropdown-menu {
318 13858d75 Kostas Papadimitriou
    display: block;
319 13858d75 Kostas Papadimitriou
  }
320 13858d75 Kostas Papadimitriou
}
321 13858d75 Kostas Papadimitriou
322 13858d75 Kostas Papadimitriou
323 13858d75 Kostas Papadimitriou
// TABS AND PILLS
324 13858d75 Kostas Papadimitriou
// --------------
325 13858d75 Kostas Papadimitriou
326 13858d75 Kostas Papadimitriou
// Common styles
327 13858d75 Kostas Papadimitriou
.tabs,
328 13858d75 Kostas Papadimitriou
.pills {
329 13858d75 Kostas Papadimitriou
  margin: 0 0 @baseline;
330 13858d75 Kostas Papadimitriou
  padding: 0;
331 13858d75 Kostas Papadimitriou
  list-style: none;
332 13858d75 Kostas Papadimitriou
  .clearfix();
333 13858d75 Kostas Papadimitriou
  > li {
334 13858d75 Kostas Papadimitriou
    float: left;
335 13858d75 Kostas Papadimitriou
    > a {
336 13858d75 Kostas Papadimitriou
      display: block;
337 13858d75 Kostas Papadimitriou
    }
338 13858d75 Kostas Papadimitriou
  }
339 13858d75 Kostas Papadimitriou
}
340 13858d75 Kostas Papadimitriou
341 13858d75 Kostas Papadimitriou
// Tabs
342 13858d75 Kostas Papadimitriou
.tabs {
343 13858d75 Kostas Papadimitriou
  border-color: #ddd;
344 13858d75 Kostas Papadimitriou
  border-style: solid;
345 13858d75 Kostas Papadimitriou
  border-width: 0 0 1px;
346 13858d75 Kostas Papadimitriou
  > li {
347 13858d75 Kostas Papadimitriou
    position: relative; // For the dropdowns mostly
348 13858d75 Kostas Papadimitriou
    margin-bottom: -1px;
349 13858d75 Kostas Papadimitriou
    > a {
350 13858d75 Kostas Papadimitriou
      padding: 0 15px;
351 13858d75 Kostas Papadimitriou
      margin-right: 2px;
352 13858d75 Kostas Papadimitriou
      line-height: (@baseline * 2) - 2;
353 13858d75 Kostas Papadimitriou
      border: 1px solid transparent;
354 13858d75 Kostas Papadimitriou
      .border-radius(4px 4px 0 0);
355 13858d75 Kostas Papadimitriou
      &:hover {
356 13858d75 Kostas Papadimitriou
        text-decoration: none;
357 13858d75 Kostas Papadimitriou
        background-color: #eee;
358 13858d75 Kostas Papadimitriou
        border-color: #eee #eee #ddd;
359 13858d75 Kostas Papadimitriou
      }
360 13858d75 Kostas Papadimitriou
    }
361 13858d75 Kostas Papadimitriou
  }
362 13858d75 Kostas Papadimitriou
  // Active state, and it's :hover to override normal :hover
363 13858d75 Kostas Papadimitriou
  .active > a,
364 13858d75 Kostas Papadimitriou
  .active > a:hover {
365 13858d75 Kostas Papadimitriou
    color: @gray;
366 13858d75 Kostas Papadimitriou
    background-color: @white;
367 13858d75 Kostas Papadimitriou
    border: 1px solid #ddd;
368 13858d75 Kostas Papadimitriou
    border-bottom-color: transparent;
369 13858d75 Kostas Papadimitriou
    cursor: default;
370 13858d75 Kostas Papadimitriou
  }
371 13858d75 Kostas Papadimitriou
}
372 13858d75 Kostas Papadimitriou
373 13858d75 Kostas Papadimitriou
// Dropdowns in tabs
374 13858d75 Kostas Papadimitriou
.tabs {
375 13858d75 Kostas Papadimitriou
  // first one for backwards compatibility
376 13858d75 Kostas Papadimitriou
  .menu-dropdown,
377 13858d75 Kostas Papadimitriou
  .dropdown-menu {
378 13858d75 Kostas Papadimitriou
    top: 35px;
379 13858d75 Kostas Papadimitriou
    border-width: 1px;
380 13858d75 Kostas Papadimitriou
    .border-radius(0 6px 6px 6px);
381 13858d75 Kostas Papadimitriou
  }
382 13858d75 Kostas Papadimitriou
  // first one for backwards compatibility
383 13858d75 Kostas Papadimitriou
  a.menu:after,
384 13858d75 Kostas Papadimitriou
  .dropdown-toggle:after {
385 13858d75 Kostas Papadimitriou
    border-top-color: #999;
386 13858d75 Kostas Papadimitriou
    margin-top: 15px;
387 13858d75 Kostas Papadimitriou
    margin-left: 5px;
388 13858d75 Kostas Papadimitriou
  }
389 13858d75 Kostas Papadimitriou
  // first one for backwards compatibility
390 13858d75 Kostas Papadimitriou
  li.open.menu .menu,
391 13858d75 Kostas Papadimitriou
  .open.dropdown .dropdown-toggle {
392 13858d75 Kostas Papadimitriou
    border-color: #999;
393 13858d75 Kostas Papadimitriou
  }
394 13858d75 Kostas Papadimitriou
  // first one for backwards compatibility
395 13858d75 Kostas Papadimitriou
  li.open a.menu:after,
396 13858d75 Kostas Papadimitriou
  .dropdown.open .dropdown-toggle:after {
397 13858d75 Kostas Papadimitriou
    border-top-color: #555;
398 13858d75 Kostas Papadimitriou
  }
399 13858d75 Kostas Papadimitriou
}
400 13858d75 Kostas Papadimitriou
401 13858d75 Kostas Papadimitriou
// Pills
402 13858d75 Kostas Papadimitriou
.pills {
403 13858d75 Kostas Papadimitriou
  a {
404 13858d75 Kostas Papadimitriou
    margin: 5px 3px 5px 0;
405 13858d75 Kostas Papadimitriou
    padding: 0 15px;
406 13858d75 Kostas Papadimitriou
    line-height: 30px;
407 13858d75 Kostas Papadimitriou
    text-shadow: 0 1px 1px @white;
408 13858d75 Kostas Papadimitriou
    .border-radius(15px);
409 13858d75 Kostas Papadimitriou
    &:hover {
410 13858d75 Kostas Papadimitriou
      color: @white;
411 13858d75 Kostas Papadimitriou
      text-decoration: none;
412 13858d75 Kostas Papadimitriou
      text-shadow: 0 1px 1px rgba(0,0,0,.25);
413 13858d75 Kostas Papadimitriou
      background-color: @linkColorHover;
414 13858d75 Kostas Papadimitriou
    }
415 13858d75 Kostas Papadimitriou
  }
416 13858d75 Kostas Papadimitriou
  .active a {
417 13858d75 Kostas Papadimitriou
    color: @white;
418 13858d75 Kostas Papadimitriou
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
419 13858d75 Kostas Papadimitriou
    background-color: @linkColor;
420 13858d75 Kostas Papadimitriou
  }
421 13858d75 Kostas Papadimitriou
}
422 13858d75 Kostas Papadimitriou
423 13858d75 Kostas Papadimitriou
// Stacked pills
424 13858d75 Kostas Papadimitriou
.pills-vertical > li {
425 13858d75 Kostas Papadimitriou
  float: none;
426 13858d75 Kostas Papadimitriou
}
427 13858d75 Kostas Papadimitriou
428 13858d75 Kostas Papadimitriou
// Tabbable areas
429 13858d75 Kostas Papadimitriou
.tab-content,
430 13858d75 Kostas Papadimitriou
.pill-content {
431 13858d75 Kostas Papadimitriou
}
432 13858d75 Kostas Papadimitriou
.tab-content > .tab-pane,
433 13858d75 Kostas Papadimitriou
.pill-content > .pill-pane,
434 13858d75 Kostas Papadimitriou
.tab-content > div,
435 13858d75 Kostas Papadimitriou
.pill-content > div {
436 13858d75 Kostas Papadimitriou
  display: none;
437 13858d75 Kostas Papadimitriou
}
438 13858d75 Kostas Papadimitriou
.tab-content > .active,
439 13858d75 Kostas Papadimitriou
.pill-content > .active {
440 13858d75 Kostas Papadimitriou
  display: block;
441 13858d75 Kostas Papadimitriou
}
442 13858d75 Kostas Papadimitriou
443 13858d75 Kostas Papadimitriou
444 13858d75 Kostas Papadimitriou
// BREADCRUMBS
445 13858d75 Kostas Papadimitriou
// -----------
446 13858d75 Kostas Papadimitriou
447 13858d75 Kostas Papadimitriou
.breadcrumb {
448 13858d75 Kostas Papadimitriou
  padding: 7px 14px;
449 13858d75 Kostas Papadimitriou
  margin: 0 0 @baseline;
450 13858d75 Kostas Papadimitriou
  #gradient > .vertical(#ffffff, #f5f5f5);
451 13858d75 Kostas Papadimitriou
  border: 1px solid #ddd;
452 13858d75 Kostas Papadimitriou
  .border-radius(3px);
453 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 0 @white);
454 13858d75 Kostas Papadimitriou
  li {
455 13858d75 Kostas Papadimitriou
    display: inline;
456 13858d75 Kostas Papadimitriou
    text-shadow: 0 1px 0 @white;
457 13858d75 Kostas Papadimitriou
  }
458 13858d75 Kostas Papadimitriou
  .divider {
459 13858d75 Kostas Papadimitriou
    padding: 0 5px;
460 13858d75 Kostas Papadimitriou
    color: @grayLight;
461 13858d75 Kostas Papadimitriou
  }
462 13858d75 Kostas Papadimitriou
  .active a {
463 13858d75 Kostas Papadimitriou
    color: @grayDark;
464 13858d75 Kostas Papadimitriou
  }
465 13858d75 Kostas Papadimitriou
}
466 13858d75 Kostas Papadimitriou
467 13858d75 Kostas Papadimitriou
468 13858d75 Kostas Papadimitriou
// PAGE HEADERS
469 13858d75 Kostas Papadimitriou
// ------------
470 13858d75 Kostas Papadimitriou
471 13858d75 Kostas Papadimitriou
.hero-unit {
472 13858d75 Kostas Papadimitriou
  background-color: #f5f5f5;
473 13858d75 Kostas Papadimitriou
  margin-bottom: 30px;
474 13858d75 Kostas Papadimitriou
  padding: 60px;
475 13858d75 Kostas Papadimitriou
  .border-radius(6px);
476 13858d75 Kostas Papadimitriou
  h1 {
477 13858d75 Kostas Papadimitriou
    margin-bottom: 0;
478 13858d75 Kostas Papadimitriou
    font-size: 60px;
479 13858d75 Kostas Papadimitriou
    line-height: 1;
480 13858d75 Kostas Papadimitriou
    letter-spacing: -1px;
481 13858d75 Kostas Papadimitriou
  }
482 13858d75 Kostas Papadimitriou
  p {
483 13858d75 Kostas Papadimitriou
    font-size: 18px;
484 13858d75 Kostas Papadimitriou
    font-weight: 200;
485 13858d75 Kostas Papadimitriou
    line-height: @baseline * 1.5;
486 13858d75 Kostas Papadimitriou
  }
487 13858d75 Kostas Papadimitriou
}
488 13858d75 Kostas Papadimitriou
footer {
489 13858d75 Kostas Papadimitriou
  margin-top: @baseline - 1;
490 13858d75 Kostas Papadimitriou
  padding-top: @baseline - 1;
491 13858d75 Kostas Papadimitriou
  border-top: 1px solid #eee;
492 13858d75 Kostas Papadimitriou
}
493 13858d75 Kostas Papadimitriou
494 13858d75 Kostas Papadimitriou
495 13858d75 Kostas Papadimitriou
// PAGE HEADERS
496 13858d75 Kostas Papadimitriou
// ------------
497 13858d75 Kostas Papadimitriou
498 13858d75 Kostas Papadimitriou
.page-header {
499 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline - 1;
500 13858d75 Kostas Papadimitriou
  border-bottom: 1px solid #ddd;
501 13858d75 Kostas Papadimitriou
  .box-shadow(0 1px 0 rgba(255,255,255,.5));
502 13858d75 Kostas Papadimitriou
  h1 {
503 13858d75 Kostas Papadimitriou
    margin-bottom: (@baseline / 2) - 1px;
504 13858d75 Kostas Papadimitriou
  }
505 13858d75 Kostas Papadimitriou
}
506 13858d75 Kostas Papadimitriou
507 13858d75 Kostas Papadimitriou
508 13858d75 Kostas Papadimitriou
// BUTTON STYLES
509 13858d75 Kostas Papadimitriou
// -------------
510 13858d75 Kostas Papadimitriou
511 13858d75 Kostas Papadimitriou
// Shared colors for buttons and alerts
512 13858d75 Kostas Papadimitriou
.btn,
513 13858d75 Kostas Papadimitriou
.alert-message {
514 13858d75 Kostas Papadimitriou
  // Set text color
515 13858d75 Kostas Papadimitriou
  &.danger,
516 13858d75 Kostas Papadimitriou
  &.danger:hover,
517 13858d75 Kostas Papadimitriou
  &.error,
518 13858d75 Kostas Papadimitriou
  &.error:hover,
519 13858d75 Kostas Papadimitriou
  &.success,
520 13858d75 Kostas Papadimitriou
  &.success:hover,
521 13858d75 Kostas Papadimitriou
  &.info,
522 13858d75 Kostas Papadimitriou
  &.info:hover {
523 13858d75 Kostas Papadimitriou
    color: @white
524 13858d75 Kostas Papadimitriou
  }
525 13858d75 Kostas Papadimitriou
  // Sets the close button to the middle of message
526 13858d75 Kostas Papadimitriou
  .close{
527 13858d75 Kostas Papadimitriou
    font-family: Arial, sans-serif;
528 13858d75 Kostas Papadimitriou
    line-height: 18px;
529 13858d75 Kostas Papadimitriou
  }
530 13858d75 Kostas Papadimitriou
  // Danger and error appear as red
531 13858d75 Kostas Papadimitriou
  &.danger,
532 13858d75 Kostas Papadimitriou
  &.error {
533 13858d75 Kostas Papadimitriou
    .gradientBar(#ee5f5b, #c43c35);
534 13858d75 Kostas Papadimitriou
  }
535 13858d75 Kostas Papadimitriou
  // Success appears as green
536 13858d75 Kostas Papadimitriou
  &.success {
537 13858d75 Kostas Papadimitriou
    .gradientBar(#62c462, #57a957);
538 13858d75 Kostas Papadimitriou
  }
539 13858d75 Kostas Papadimitriou
  // Info appears as a neutral blue
540 13858d75 Kostas Papadimitriou
  &.info {
541 13858d75 Kostas Papadimitriou
    .gradientBar(#5bc0de, #339bb9);
542 13858d75 Kostas Papadimitriou
  }
543 13858d75 Kostas Papadimitriou
}
544 13858d75 Kostas Papadimitriou
545 13858d75 Kostas Papadimitriou
// Base .btn styles
546 13858d75 Kostas Papadimitriou
.btn {
547 13858d75 Kostas Papadimitriou
  // Button Base
548 13858d75 Kostas Papadimitriou
  cursor: pointer;
549 13858d75 Kostas Papadimitriou
  display: inline-block;
550 13858d75 Kostas Papadimitriou
  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
551 13858d75 Kostas Papadimitriou
  padding: 5px 14px 6px;
552 13858d75 Kostas Papadimitriou
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
553 13858d75 Kostas Papadimitriou
  color: #333;
554 13858d75 Kostas Papadimitriou
  font-size: @basefont;
555 13858d75 Kostas Papadimitriou
  line-height: normal;
556 13858d75 Kostas Papadimitriou
  border: 1px solid #ccc;
557 13858d75 Kostas Papadimitriou
  border-bottom-color: #bbb;
558 13858d75 Kostas Papadimitriou
  .border-radius(4px);
559 13858d75 Kostas Papadimitriou
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
560 13858d75 Kostas Papadimitriou
  .box-shadow(@shadow);
561 13858d75 Kostas Papadimitriou
562 13858d75 Kostas Papadimitriou
  &:hover {
563 13858d75 Kostas Papadimitriou
    background-position: 0 -15px;
564 13858d75 Kostas Papadimitriou
    color: #333;
565 13858d75 Kostas Papadimitriou
    text-decoration: none;
566 13858d75 Kostas Papadimitriou
  }
567 13858d75 Kostas Papadimitriou
568 13858d75 Kostas Papadimitriou
  // Focus state for keyboard and accessibility
569 13858d75 Kostas Papadimitriou
  &:focus {
570 13858d75 Kostas Papadimitriou
    outline: 1px dotted #666;
571 13858d75 Kostas Papadimitriou
  }
572 13858d75 Kostas Papadimitriou
573 13858d75 Kostas Papadimitriou
  // Primary Button Type
574 13858d75 Kostas Papadimitriou
  &.primary {
575 13858d75 Kostas Papadimitriou
    color: @white;
576 13858d75 Kostas Papadimitriou
    .gradientBar(@blue, @blueDark)
577 13858d75 Kostas Papadimitriou
  }
578 13858d75 Kostas Papadimitriou
579 13858d75 Kostas Papadimitriou
   // Transitions
580 13858d75 Kostas Papadimitriou
  .transition(.1s linear all);
581 13858d75 Kostas Papadimitriou
582 13858d75 Kostas Papadimitriou
  // Active and Disabled states
583 13858d75 Kostas Papadimitriou
  &.active,
584 13858d75 Kostas Papadimitriou
  &:active {
585 13858d75 Kostas Papadimitriou
    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
586 13858d75 Kostas Papadimitriou
    .box-shadow(@shadow);
587 13858d75 Kostas Papadimitriou
  }
588 13858d75 Kostas Papadimitriou
  &.disabled {
589 13858d75 Kostas Papadimitriou
    cursor: default;
590 13858d75 Kostas Papadimitriou
    background-image: none;
591 13858d75 Kostas Papadimitriou
    .reset-filter();
592 13858d75 Kostas Papadimitriou
    .opacity(65);
593 13858d75 Kostas Papadimitriou
    .box-shadow(none);
594 13858d75 Kostas Papadimitriou
  }
595 13858d75 Kostas Papadimitriou
  &[disabled] {
596 13858d75 Kostas Papadimitriou
    // disabled pseudo can't be included with .disabled
597 13858d75 Kostas Papadimitriou
    // def because IE8 and below will drop it ;_;
598 13858d75 Kostas Papadimitriou
    cursor: default;
599 13858d75 Kostas Papadimitriou
    background-image: none;
600 13858d75 Kostas Papadimitriou
    .reset-filter();
601 13858d75 Kostas Papadimitriou
    .opacity(65);
602 13858d75 Kostas Papadimitriou
    .box-shadow(none);
603 13858d75 Kostas Papadimitriou
  }
604 13858d75 Kostas Papadimitriou
605 13858d75 Kostas Papadimitriou
  // Button Sizes
606 13858d75 Kostas Papadimitriou
  &.large {
607 13858d75 Kostas Papadimitriou
    font-size: @basefont + 2px;
608 13858d75 Kostas Papadimitriou
    line-height: normal;
609 13858d75 Kostas Papadimitriou
    padding: 9px 14px 9px;
610 13858d75 Kostas Papadimitriou
    .border-radius(6px);
611 13858d75 Kostas Papadimitriou
  }
612 13858d75 Kostas Papadimitriou
  &.small {
613 13858d75 Kostas Papadimitriou
    padding: 7px 9px 7px;
614 13858d75 Kostas Papadimitriou
    font-size: @basefont - 2px;
615 13858d75 Kostas Papadimitriou
  }
616 13858d75 Kostas Papadimitriou
}
617 13858d75 Kostas Papadimitriou
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
618 13858d75 Kostas Papadimitriou
:root .alert-message,
619 13858d75 Kostas Papadimitriou
:root .btn {
620 13858d75 Kostas Papadimitriou
  border-radius: 0 \0;
621 13858d75 Kostas Papadimitriou
}
622 13858d75 Kostas Papadimitriou
623 13858d75 Kostas Papadimitriou
// Help Firefox not be a jerk about adding extra padding to buttons
624 13858d75 Kostas Papadimitriou
button.btn,
625 13858d75 Kostas Papadimitriou
input[type=submit].btn {
626 13858d75 Kostas Papadimitriou
  &::-moz-focus-inner {
627 13858d75 Kostas Papadimitriou
  	padding: 0;
628 13858d75 Kostas Papadimitriou
  	border: 0;
629 13858d75 Kostas Papadimitriou
  }
630 13858d75 Kostas Papadimitriou
}
631 13858d75 Kostas Papadimitriou
632 13858d75 Kostas Papadimitriou
633 13858d75 Kostas Papadimitriou
// CLOSE ICONS
634 13858d75 Kostas Papadimitriou
// -----------
635 13858d75 Kostas Papadimitriou
.close {
636 13858d75 Kostas Papadimitriou
  float: right;
637 13858d75 Kostas Papadimitriou
  color: @black;
638 13858d75 Kostas Papadimitriou
  font-size: 20px;
639 13858d75 Kostas Papadimitriou
  font-weight: bold;
640 13858d75 Kostas Papadimitriou
  line-height: @baseline * .75;
641 13858d75 Kostas Papadimitriou
  text-shadow: 0 1px 0 rgba(255,255,255,1);
642 13858d75 Kostas Papadimitriou
  .opacity(25);
643 13858d75 Kostas Papadimitriou
  &:hover {
644 13858d75 Kostas Papadimitriou
    color: @black;
645 13858d75 Kostas Papadimitriou
    text-decoration: none;
646 13858d75 Kostas Papadimitriou
    .opacity(40);
647 13858d75 Kostas Papadimitriou
  }
648 13858d75 Kostas Papadimitriou
}
649 13858d75 Kostas Papadimitriou
650 13858d75 Kostas Papadimitriou
651 13858d75 Kostas Papadimitriou
// ERROR STYLES
652 13858d75 Kostas Papadimitriou
// ------------
653 13858d75 Kostas Papadimitriou
654 13858d75 Kostas Papadimitriou
// Base alert styles
655 13858d75 Kostas Papadimitriou
.alert-message {
656 13858d75 Kostas Papadimitriou
  position: relative;
657 13858d75 Kostas Papadimitriou
  padding: 7px 15px;
658 13858d75 Kostas Papadimitriou
  margin-bottom: @baseline;
659 13858d75 Kostas Papadimitriou
  color: @grayDark;
660 13858d75 Kostas Papadimitriou
  .gradientBar(#fceec1, #eedc94); // warning by default
661 13858d75 Kostas Papadimitriou
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
662 13858d75 Kostas Papadimitriou
  border-width: 1px;
663 13858d75 Kostas Papadimitriou
  border-style: solid;
664 13858d75 Kostas Papadimitriou
  .border-radius(4px);
665 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
666 13858d75 Kostas Papadimitriou
667 13858d75 Kostas Papadimitriou
  // Adjust close icon
668 13858d75 Kostas Papadimitriou
  .close {
669 13858d75 Kostas Papadimitriou
    margin-top: 1px;
670 13858d75 Kostas Papadimitriou
    *margin-top: 0; // For IE7
671 13858d75 Kostas Papadimitriou
  }
672 13858d75 Kostas Papadimitriou
673 13858d75 Kostas Papadimitriou
  // Make links same color as text and stand out more
674 13858d75 Kostas Papadimitriou
  a {
675 13858d75 Kostas Papadimitriou
    font-weight: bold;
676 13858d75 Kostas Papadimitriou
    color: @grayDark;
677 13858d75 Kostas Papadimitriou
  }
678 13858d75 Kostas Papadimitriou
  &.danger p a,
679 13858d75 Kostas Papadimitriou
  &.error p a,
680 13858d75 Kostas Papadimitriou
  &.success p a,
681 13858d75 Kostas Papadimitriou
  &.info p a {
682 13858d75 Kostas Papadimitriou
    color: @white;
683 13858d75 Kostas Papadimitriou
  }
684 13858d75 Kostas Papadimitriou
685 13858d75 Kostas Papadimitriou
  // Remove extra margin from content
686 13858d75 Kostas Papadimitriou
  h5 {
687 13858d75 Kostas Papadimitriou
    line-height: @baseline;
688 13858d75 Kostas Papadimitriou
  }
689 13858d75 Kostas Papadimitriou
  p {
690 13858d75 Kostas Papadimitriou
    margin-bottom: 0;
691 13858d75 Kostas Papadimitriou
  }
692 13858d75 Kostas Papadimitriou
  div {
693 13858d75 Kostas Papadimitriou
    margin-top: 5px;
694 13858d75 Kostas Papadimitriou
    margin-bottom: 2px;
695 13858d75 Kostas Papadimitriou
    line-height: 28px;
696 13858d75 Kostas Papadimitriou
  }
697 13858d75 Kostas Papadimitriou
  .btn {
698 13858d75 Kostas Papadimitriou
    // Provide actions with buttons
699 13858d75 Kostas Papadimitriou
    .box-shadow(0 1px 0 rgba(255,255,255,.25));
700 13858d75 Kostas Papadimitriou
  }
701 13858d75 Kostas Papadimitriou
702 13858d75 Kostas Papadimitriou
  &.block-message {
703 13858d75 Kostas Papadimitriou
    background-image: none;
704 13858d75 Kostas Papadimitriou
    background-color: lighten(#fceec1, 5%);
705 13858d75 Kostas Papadimitriou
    .reset-filter();
706 13858d75 Kostas Papadimitriou
    padding: 14px;
707 13858d75 Kostas Papadimitriou
    border-color: #fceec1;
708 13858d75 Kostas Papadimitriou
    .box-shadow(none);
709 13858d75 Kostas Papadimitriou
    ul, p {
710 13858d75 Kostas Papadimitriou
      margin-right: 30px;
711 13858d75 Kostas Papadimitriou
    }
712 13858d75 Kostas Papadimitriou
    ul {
713 13858d75 Kostas Papadimitriou
      margin-bottom: 0;
714 13858d75 Kostas Papadimitriou
    }
715 13858d75 Kostas Papadimitriou
    li {
716 13858d75 Kostas Papadimitriou
      color: @grayDark;
717 13858d75 Kostas Papadimitriou
    }
718 13858d75 Kostas Papadimitriou
    .alert-actions {
719 13858d75 Kostas Papadimitriou
      margin-top: 5px;
720 13858d75 Kostas Papadimitriou
    }
721 13858d75 Kostas Papadimitriou
    &.error,
722 13858d75 Kostas Papadimitriou
    &.success,
723 13858d75 Kostas Papadimitriou
    &.info {
724 13858d75 Kostas Papadimitriou
      color: @grayDark;
725 13858d75 Kostas Papadimitriou
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
726 13858d75 Kostas Papadimitriou
    }
727 13858d75 Kostas Papadimitriou
    &.error {
728 13858d75 Kostas Papadimitriou
      background-color: lighten(#f56a66, 25%);
729 13858d75 Kostas Papadimitriou
      border-color: lighten(#f56a66, 20%);
730 13858d75 Kostas Papadimitriou
    }
731 13858d75 Kostas Papadimitriou
    &.success {
732 13858d75 Kostas Papadimitriou
      background-color: lighten(#62c462, 30%);
733 13858d75 Kostas Papadimitriou
      border-color: lighten(#62c462, 25%);
734 13858d75 Kostas Papadimitriou
    }
735 13858d75 Kostas Papadimitriou
    &.info {
736 13858d75 Kostas Papadimitriou
      background-color: lighten(#6bd0ee, 25%);
737 13858d75 Kostas Papadimitriou
      border-color: lighten(#6bd0ee, 20%);
738 13858d75 Kostas Papadimitriou
    }
739 13858d75 Kostas Papadimitriou
    // Change link color back
740 13858d75 Kostas Papadimitriou
    &.danger p a,
741 13858d75 Kostas Papadimitriou
    &.error p a,
742 13858d75 Kostas Papadimitriou
    &.success p a,
743 13858d75 Kostas Papadimitriou
    &.info p a {
744 13858d75 Kostas Papadimitriou
      color: @grayDark;
745 13858d75 Kostas Papadimitriou
    }
746 13858d75 Kostas Papadimitriou
747 13858d75 Kostas Papadimitriou
  }
748 13858d75 Kostas Papadimitriou
}
749 13858d75 Kostas Papadimitriou
750 13858d75 Kostas Papadimitriou
751 13858d75 Kostas Papadimitriou
// PAGINATION
752 13858d75 Kostas Papadimitriou
// ----------
753 13858d75 Kostas Papadimitriou
754 13858d75 Kostas Papadimitriou
.pagination {
755 13858d75 Kostas Papadimitriou
  height: @baseline * 2;
756 13858d75 Kostas Papadimitriou
  margin: @baseline 0;
757 13858d75 Kostas Papadimitriou
  ul {
758 13858d75 Kostas Papadimitriou
    float: left;
759 13858d75 Kostas Papadimitriou
    margin: 0;
760 13858d75 Kostas Papadimitriou
    border: 1px solid #ddd;
761 13858d75 Kostas Papadimitriou
    border: 1px solid rgba(0,0,0,.15);
762 13858d75 Kostas Papadimitriou
    .border-radius(3px);
763 13858d75 Kostas Papadimitriou
    .box-shadow(0 1px 2px rgba(0,0,0,.05));
764 13858d75 Kostas Papadimitriou
  }
765 13858d75 Kostas Papadimitriou
  li {
766 13858d75 Kostas Papadimitriou
    display: inline;
767 13858d75 Kostas Papadimitriou
  }
768 13858d75 Kostas Papadimitriou
  a {
769 13858d75 Kostas Papadimitriou
    float: left;
770 13858d75 Kostas Papadimitriou
    padding: 0 14px;
771 13858d75 Kostas Papadimitriou
    line-height: (@baseline * 2) - 2;
772 13858d75 Kostas Papadimitriou
    border-right: 1px solid;
773 13858d75 Kostas Papadimitriou
    border-right-color: #ddd;
774 13858d75 Kostas Papadimitriou
    border-right-color: rgba(0,0,0,.15);
775 13858d75 Kostas Papadimitriou
    *border-right-color: #ddd; /* IE6-7 */
776 13858d75 Kostas Papadimitriou
    text-decoration: none;
777 13858d75 Kostas Papadimitriou
  }
778 13858d75 Kostas Papadimitriou
  a:hover,
779 13858d75 Kostas Papadimitriou
  .active a {
780 13858d75 Kostas Papadimitriou
    background-color: lighten(@blue, 45%);
781 13858d75 Kostas Papadimitriou
  }
782 13858d75 Kostas Papadimitriou
  .disabled a,
783 13858d75 Kostas Papadimitriou
  .disabled a:hover {
784 13858d75 Kostas Papadimitriou
    background-color: transparent;
785 13858d75 Kostas Papadimitriou
    color: @grayLight;
786 13858d75 Kostas Papadimitriou
  }
787 13858d75 Kostas Papadimitriou
  .next a {
788 13858d75 Kostas Papadimitriou
    border: 0;
789 13858d75 Kostas Papadimitriou
  }
790 13858d75 Kostas Papadimitriou
}
791 13858d75 Kostas Papadimitriou
792 13858d75 Kostas Papadimitriou
793 13858d75 Kostas Papadimitriou
// WELLS
794 13858d75 Kostas Papadimitriou
// -----
795 13858d75 Kostas Papadimitriou
796 13858d75 Kostas Papadimitriou
.well {
797 13858d75 Kostas Papadimitriou
  background-color: #f5f5f5;
798 13858d75 Kostas Papadimitriou
  margin-bottom: 20px;
799 13858d75 Kostas Papadimitriou
  padding: 19px;
800 13858d75 Kostas Papadimitriou
  min-height: 20px;
801 13858d75 Kostas Papadimitriou
  border: 1px solid #eee;
802 13858d75 Kostas Papadimitriou
  border: 1px solid rgba(0,0,0,.05);
803 13858d75 Kostas Papadimitriou
  .border-radius(4px);
804 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
805 13858d75 Kostas Papadimitriou
  blockquote {
806 13858d75 Kostas Papadimitriou
    border-color: #ddd;
807 13858d75 Kostas Papadimitriou
    border-color: rgba(0,0,0,.15);
808 13858d75 Kostas Papadimitriou
  }
809 13858d75 Kostas Papadimitriou
}
810 13858d75 Kostas Papadimitriou
811 13858d75 Kostas Papadimitriou
812 13858d75 Kostas Papadimitriou
// MODALS
813 13858d75 Kostas Papadimitriou
// ------
814 13858d75 Kostas Papadimitriou
815 13858d75 Kostas Papadimitriou
.modal-backdrop {
816 13858d75 Kostas Papadimitriou
  background-color: @black;
817 13858d75 Kostas Papadimitriou
  position: fixed;
818 13858d75 Kostas Papadimitriou
  top: 0;
819 13858d75 Kostas Papadimitriou
  left: 0;
820 13858d75 Kostas Papadimitriou
  right: 0;
821 13858d75 Kostas Papadimitriou
  bottom: 0;
822 13858d75 Kostas Papadimitriou
  z-index: 10000;
823 13858d75 Kostas Papadimitriou
  // Fade for backdrop
824 13858d75 Kostas Papadimitriou
  &.fade { opacity: 0; }
825 13858d75 Kostas Papadimitriou
}
826 13858d75 Kostas Papadimitriou
827 13858d75 Kostas Papadimitriou
.modal-backdrop,
828 13858d75 Kostas Papadimitriou
.modal-backdrop.fade.in {
829 13858d75 Kostas Papadimitriou
  .opacity(80);
830 13858d75 Kostas Papadimitriou
}
831 13858d75 Kostas Papadimitriou
832 13858d75 Kostas Papadimitriou
.modal {
833 13858d75 Kostas Papadimitriou
  position: fixed;
834 13858d75 Kostas Papadimitriou
  top: 50%;
835 13858d75 Kostas Papadimitriou
  left: 50%;
836 13858d75 Kostas Papadimitriou
  z-index: 11000;
837 13858d75 Kostas Papadimitriou
  width: 560px;
838 13858d75 Kostas Papadimitriou
  margin: -250px 0 0 -280px;
839 13858d75 Kostas Papadimitriou
  background-color: @white;
840 13858d75 Kostas Papadimitriou
  border: 1px solid #999;
841 13858d75 Kostas Papadimitriou
  border: 1px solid rgba(0,0,0,.3);
842 13858d75 Kostas Papadimitriou
  *border: 1px solid #999; /* IE6-7 */
843 13858d75 Kostas Papadimitriou
  .border-radius(6px);
844 13858d75 Kostas Papadimitriou
  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
845 13858d75 Kostas Papadimitriou
  .background-clip(padding-box);
846 13858d75 Kostas Papadimitriou
  .close { margin-top: 7px; }
847 13858d75 Kostas Papadimitriou
  &.fade {
848 13858d75 Kostas Papadimitriou
    .transition(e('opacity .3s linear, top .3s ease-out'));
849 13858d75 Kostas Papadimitriou
    top: -25%;
850 13858d75 Kostas Papadimitriou
  }
851 13858d75 Kostas Papadimitriou
  &.fade.in { top: 50%; }
852 13858d75 Kostas Papadimitriou
}
853 13858d75 Kostas Papadimitriou
.modal-header {
854 13858d75 Kostas Papadimitriou
  border-bottom: 1px solid #eee;
855 13858d75 Kostas Papadimitriou
  padding: 5px 15px;
856 13858d75 Kostas Papadimitriou
}
857 13858d75 Kostas Papadimitriou
.modal-body {
858 13858d75 Kostas Papadimitriou
  padding: 15px;
859 13858d75 Kostas Papadimitriou
}
860 13858d75 Kostas Papadimitriou
.modal-body form {
861 13858d75 Kostas Papadimitriou
  margin-bottom: 0;
862 13858d75 Kostas Papadimitriou
}
863 13858d75 Kostas Papadimitriou
.modal-footer {
864 13858d75 Kostas Papadimitriou
  background-color: #f5f5f5;
865 13858d75 Kostas Papadimitriou
  padding: 14px 15px 15px;
866 13858d75 Kostas Papadimitriou
  border-top: 1px solid #ddd;
867 13858d75 Kostas Papadimitriou
  .border-radius(0 0 6px 6px);
868 13858d75 Kostas Papadimitriou
  .box-shadow(inset 0 1px 0 @white);
869 13858d75 Kostas Papadimitriou
  .clearfix();
870 13858d75 Kostas Papadimitriou
  margin-bottom: 0;
871 13858d75 Kostas Papadimitriou
  .btn {
872 13858d75 Kostas Papadimitriou
    float: right;
873 13858d75 Kostas Papadimitriou
    margin-left: 5px;
874 13858d75 Kostas Papadimitriou
  }
875 13858d75 Kostas Papadimitriou
}
876 13858d75 Kostas Papadimitriou
877 13858d75 Kostas Papadimitriou
// Fix the stacking of these components when in modals
878 13858d75 Kostas Papadimitriou
.modal .popover,
879 13858d75 Kostas Papadimitriou
.modal .twipsy {
880 13858d75 Kostas Papadimitriou
  z-index: 12000;
881 13858d75 Kostas Papadimitriou
}
882 13858d75 Kostas Papadimitriou
883 13858d75 Kostas Papadimitriou
884 13858d75 Kostas Papadimitriou
// POPOVER ARROWS
885 13858d75 Kostas Papadimitriou
// --------------
886 13858d75 Kostas Papadimitriou
887 13858d75 Kostas Papadimitriou
#popoverArrow {
888 13858d75 Kostas Papadimitriou
  .above(@arrowWidth: 5px) {
889 13858d75 Kostas Papadimitriou
    bottom: 0;
890 13858d75 Kostas Papadimitriou
    left: 50%;
891 13858d75 Kostas Papadimitriou
    margin-left: -@arrowWidth;
892 13858d75 Kostas Papadimitriou
    border-left: @arrowWidth solid transparent;
893 13858d75 Kostas Papadimitriou
    border-right: @arrowWidth solid transparent;
894 13858d75 Kostas Papadimitriou
    border-top: @arrowWidth solid @black;
895 13858d75 Kostas Papadimitriou
  }
896 13858d75 Kostas Papadimitriou
  .left(@arrowWidth: 5px) {
897 13858d75 Kostas Papadimitriou
    top: 50%;
898 13858d75 Kostas Papadimitriou
    right: 0;
899 13858d75 Kostas Papadimitriou
    margin-top: -@arrowWidth;
900 13858d75 Kostas Papadimitriou
    border-top: @arrowWidth solid transparent;
901 13858d75 Kostas Papadimitriou
    border-bottom: @arrowWidth solid transparent;
902 13858d75 Kostas Papadimitriou
    border-left: @arrowWidth solid @black;
903 13858d75 Kostas Papadimitriou
  }
904 13858d75 Kostas Papadimitriou
  .below(@arrowWidth: 5px) {
905 13858d75 Kostas Papadimitriou
    top: 0;
906 13858d75 Kostas Papadimitriou
    left: 50%;
907 13858d75 Kostas Papadimitriou
    margin-left: -@arrowWidth;
908 13858d75 Kostas Papadimitriou
    border-left: @arrowWidth solid transparent;
909 13858d75 Kostas Papadimitriou
    border-right: @arrowWidth solid transparent;
910 13858d75 Kostas Papadimitriou
    border-bottom: @arrowWidth solid @black;
911 13858d75 Kostas Papadimitriou
  }
912 13858d75 Kostas Papadimitriou
  .right(@arrowWidth: 5px) {
913 13858d75 Kostas Papadimitriou
    top: 50%;
914 13858d75 Kostas Papadimitriou
    left: 0;
915 13858d75 Kostas Papadimitriou
    margin-top: -@arrowWidth;
916 13858d75 Kostas Papadimitriou
    border-top: @arrowWidth solid transparent;
917 13858d75 Kostas Papadimitriou
    border-bottom: @arrowWidth solid transparent;
918 13858d75 Kostas Papadimitriou
    border-right: @arrowWidth solid @black;
919 13858d75 Kostas Papadimitriou
  }
920 13858d75 Kostas Papadimitriou
}
921 13858d75 Kostas Papadimitriou
922 13858d75 Kostas Papadimitriou
// TWIPSY
923 13858d75 Kostas Papadimitriou
// ------
924 13858d75 Kostas Papadimitriou
925 13858d75 Kostas Papadimitriou
.twipsy {
926 13858d75 Kostas Papadimitriou
  display: block;
927 13858d75 Kostas Papadimitriou
  position: absolute;
928 13858d75 Kostas Papadimitriou
  visibility: visible;
929 13858d75 Kostas Papadimitriou
  padding: 5px;
930 13858d75 Kostas Papadimitriou
  font-size: 11px;
931 13858d75 Kostas Papadimitriou
  z-index: 1000;
932 13858d75 Kostas Papadimitriou
  .opacity(80);
933 13858d75 Kostas Papadimitriou
  &.fade.in {
934 13858d75 Kostas Papadimitriou
    .opacity(80);
935 13858d75 Kostas Papadimitriou
  }
936 13858d75 Kostas Papadimitriou
  &.above .twipsy-arrow   { #popoverArrow > .above(); }
937 13858d75 Kostas Papadimitriou
  &.left .twipsy-arrow    { #popoverArrow > .left(); }
938 13858d75 Kostas Papadimitriou
  &.below .twipsy-arrow   { #popoverArrow > .below(); }
939 13858d75 Kostas Papadimitriou
  &.right .twipsy-arrow   { #popoverArrow > .right(); }
940 13858d75 Kostas Papadimitriou
}
941 13858d75 Kostas Papadimitriou
.twipsy-inner {
942 13858d75 Kostas Papadimitriou
  padding: 3px 8px;
943 13858d75 Kostas Papadimitriou
  background-color: @black;
944 13858d75 Kostas Papadimitriou
  color: white;
945 13858d75 Kostas Papadimitriou
  text-align: center;
946 13858d75 Kostas Papadimitriou
  max-width: 200px;
947 13858d75 Kostas Papadimitriou
  text-decoration: none;
948 13858d75 Kostas Papadimitriou
  .border-radius(4px);
949 13858d75 Kostas Papadimitriou
}
950 13858d75 Kostas Papadimitriou
.twipsy-arrow {
951 13858d75 Kostas Papadimitriou
  position: absolute;
952 13858d75 Kostas Papadimitriou
  width: 0;
953 13858d75 Kostas Papadimitriou
  height: 0;
954 13858d75 Kostas Papadimitriou
}
955 13858d75 Kostas Papadimitriou
956 13858d75 Kostas Papadimitriou
957 13858d75 Kostas Papadimitriou
// POPOVERS
958 13858d75 Kostas Papadimitriou
// --------
959 13858d75 Kostas Papadimitriou
960 13858d75 Kostas Papadimitriou
.popover {
961 13858d75 Kostas Papadimitriou
  position: absolute;
962 13858d75 Kostas Papadimitriou
  top: 0;
963 13858d75 Kostas Papadimitriou
  left: 0;
964 13858d75 Kostas Papadimitriou
  z-index: 1000;
965 13858d75 Kostas Papadimitriou
  padding: 5px;
966 13858d75 Kostas Papadimitriou
  display: none;
967 13858d75 Kostas Papadimitriou
  &.above .arrow { #popoverArrow > .above(); }
968 13858d75 Kostas Papadimitriou
  &.right .arrow { #popoverArrow > .right(); }
969 13858d75 Kostas Papadimitriou
  &.below .arrow { #popoverArrow > .below(); }
970 13858d75 Kostas Papadimitriou
  &.left .arrow  { #popoverArrow > .left(); }
971 13858d75 Kostas Papadimitriou
  .arrow {
972 13858d75 Kostas Papadimitriou
    position: absolute;
973 13858d75 Kostas Papadimitriou
    width: 0;
974 13858d75 Kostas Papadimitriou
    height: 0;
975 13858d75 Kostas Papadimitriou
  }
976 13858d75 Kostas Papadimitriou
  .inner {
977 13858d75 Kostas Papadimitriou
    background: @black;
978 13858d75 Kostas Papadimitriou
    background: rgba(0,0,0,.8);
979 13858d75 Kostas Papadimitriou
    padding: 3px;
980 13858d75 Kostas Papadimitriou
    overflow: hidden;
981 13858d75 Kostas Papadimitriou
    width: 280px;
982 13858d75 Kostas Papadimitriou
    .border-radius(6px);
983 13858d75 Kostas Papadimitriou
    .box-shadow(0 3px 7px rgba(0,0,0,0.3));
984 13858d75 Kostas Papadimitriou
  }
985 13858d75 Kostas Papadimitriou
  .title {
986 13858d75 Kostas Papadimitriou
    background-color: #f5f5f5;
987 13858d75 Kostas Papadimitriou
    padding: 9px 15px;
988 13858d75 Kostas Papadimitriou
    line-height: 1;
989 13858d75 Kostas Papadimitriou
    .border-radius(3px 3px 0 0);
990 13858d75 Kostas Papadimitriou
    border-bottom:1px solid #eee;
991 13858d75 Kostas Papadimitriou
  }
992 13858d75 Kostas Papadimitriou
  .content {
993 13858d75 Kostas Papadimitriou
    background-color: @white;
994 13858d75 Kostas Papadimitriou
    padding: 14px;
995 13858d75 Kostas Papadimitriou
    .border-radius(0 0 3px 3px);
996 13858d75 Kostas Papadimitriou
    .background-clip(padding-box);
997 13858d75 Kostas Papadimitriou
    p, ul, ol {
998 13858d75 Kostas Papadimitriou
      margin-bottom: 0;
999 13858d75 Kostas Papadimitriou
    }
1000 13858d75 Kostas Papadimitriou
  }
1001 13858d75 Kostas Papadimitriou
}
1002 13858d75 Kostas Papadimitriou
1003 13858d75 Kostas Papadimitriou
1004 13858d75 Kostas Papadimitriou
// PATTERN ANIMATIONS
1005 13858d75 Kostas Papadimitriou
// ------------------
1006 13858d75 Kostas Papadimitriou
1007 13858d75 Kostas Papadimitriou
.fade {
1008 13858d75 Kostas Papadimitriou
  .transition(opacity .15s linear);
1009 13858d75 Kostas Papadimitriou
  opacity: 0;
1010 13858d75 Kostas Papadimitriou
  &.in {
1011 13858d75 Kostas Papadimitriou
    opacity: 1;
1012 13858d75 Kostas Papadimitriou
  }
1013 13858d75 Kostas Papadimitriou
}
1014 13858d75 Kostas Papadimitriou
1015 13858d75 Kostas Papadimitriou
1016 13858d75 Kostas Papadimitriou
// LABELS
1017 13858d75 Kostas Papadimitriou
// ------
1018 13858d75 Kostas Papadimitriou
1019 13858d75 Kostas Papadimitriou
.label {
1020 13858d75 Kostas Papadimitriou
  padding: 1px 3px 2px;
1021 13858d75 Kostas Papadimitriou
  font-size: @basefont * .75;
1022 13858d75 Kostas Papadimitriou
  font-weight: bold;
1023 13858d75 Kostas Papadimitriou
  color: @white;
1024 13858d75 Kostas Papadimitriou
  text-transform: uppercase;
1025 13858d75 Kostas Papadimitriou
  white-space: nowrap;
1026 13858d75 Kostas Papadimitriou
  background-color: @grayLight;
1027 13858d75 Kostas Papadimitriou
  .border-radius(3px);
1028 13858d75 Kostas Papadimitriou
  &.important { background-color: #c43c35; }
1029 13858d75 Kostas Papadimitriou
  &.warning   { background-color: @orange; }
1030 13858d75 Kostas Papadimitriou
  &.success   { background-color: @green; }
1031 13858d75 Kostas Papadimitriou
  &.notice    { background-color: lighten(@blue, 25%); }
1032 13858d75 Kostas Papadimitriou
}
1033 13858d75 Kostas Papadimitriou
1034 13858d75 Kostas Papadimitriou
1035 13858d75 Kostas Papadimitriou
// MEDIA GRIDS
1036 13858d75 Kostas Papadimitriou
// -----------
1037 13858d75 Kostas Papadimitriou
1038 13858d75 Kostas Papadimitriou
.media-grid {
1039 13858d75 Kostas Papadimitriou
  margin-left: -@gridGutterWidth;
1040 13858d75 Kostas Papadimitriou
  margin-bottom: 0;
1041 13858d75 Kostas Papadimitriou
  .clearfix();
1042 13858d75 Kostas Papadimitriou
  li {
1043 13858d75 Kostas Papadimitriou
    display: inline;
1044 13858d75 Kostas Papadimitriou
  }
1045 13858d75 Kostas Papadimitriou
  a {
1046 13858d75 Kostas Papadimitriou
    float: left;
1047 13858d75 Kostas Papadimitriou
    padding: 4px;
1048 13858d75 Kostas Papadimitriou
    margin: 0 0 @baseline @gridGutterWidth;
1049 13858d75 Kostas Papadimitriou
    border: 1px solid #ddd;
1050 13858d75 Kostas Papadimitriou
    .border-radius(4px);
1051 13858d75 Kostas Papadimitriou
    .box-shadow(0 1px 1px rgba(0,0,0,.075));
1052 13858d75 Kostas Papadimitriou
    img {
1053 13858d75 Kostas Papadimitriou
      display: block;
1054 13858d75 Kostas Papadimitriou
    }
1055 13858d75 Kostas Papadimitriou
    &:hover {
1056 13858d75 Kostas Papadimitriou
      border-color: @linkColor;
1057 13858d75 Kostas Papadimitriou
      .box-shadow(0 1px 4px rgba(0,105,214,.25));
1058 13858d75 Kostas Papadimitriou
    }
1059 13858d75 Kostas Papadimitriou
  }
1060 13858d75 Kostas Papadimitriou
}