/web-app/css/main.css

  1/* FONT STACK */
  2body,
  3input, select, textarea {
  4	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  5}
  6
  7/* BASE LAYOUT */
  8
  9html {
 10	background-color: #ddd;
 11	background-image: -moz-linear-gradient(center top, #aaa, #ddd);
 12	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #ddd));
 13	background-image: linear-gradient(top, #aaa, #ddd);
 14	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#aaa', EndColorStr = '#ddd');
 15	background-repeat: no-repeat;
 16	height: 100%;
 17	/* change the box model to exclude the padding from the calculation of 100% height (IE8+) */
 18	-webkit-box-sizing: border-box;
 19	   -moz-box-sizing: border-box;
 20	        box-sizing: border-box;
 21}
 22
 23html.no-cssgradients {
 24	background-color: #aaa;
 25}
 26
 27.ie6 html {
 28	height: 100%;
 29}
 30
 31html * {
 32	margin: 0;
 33}
 34
 35body {
 36	background: #ffffff;
 37	color: #333333;
 38	margin: 0 auto;
 39	overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
 40	   -moz-box-shadow: 0 0 0.3em #255b17;
 41	-webkit-box-shadow: 0 0 0.3em #255b17;
 42	        box-shadow: 0 0 0.3em #255b17;
 43}
 44
 45#grailsLogo {
 46	background-color: #abbf78;
 47}
 48
 49.encabezado a {
 50    margin: 0 !important;
 51	color: #FFFFFF !important;
 52    text-decoration: none;
 53}
 54
 55.encabezado a:hover, a:active {
 56	outline: none; /* prevents outline in webkit on active links but retains it for tab focus */
 57    text-decoration: underline;
 58}
 59
 60#logo {
 61    float: left;
 62}
 63
 64.encabezado {
 65    height: 80px;
 66    margin-right: 5px;
 67    margin-top: 5px;
 68    text-align: right;
 69}
 70
 71/* replace with .no-boxshadow body if you have modernizr available */
 72.ie6 body,
 73.ie7 body,
 74.ie8 body {
 75	border-color: #255b17;
 76	border-style: solid;
 77	border-width: 0 1px;
 78}
 79
 80.ie6 body {
 81	height: 100%;
 82}
 83
 84a:link, a:visited, a:hover {
 85	color: #48802c;
 86}
 87
 88a:hover, a:active {
 89	outline: none; /* prevents outline in webkit on active links but retains it for tab focus */
 90}
 91
 92h1 {
 93	color: #48802c;
 94	font-weight: normal;
 95	font-size: 1.25em;
 96	margin: 0.8em 0 0.3em 0;
 97}
 98
 99h2 {
100	color: #48802c;
101	font-weight: normal;
102	font-size: 1em;
103	margin: 0.8em 0 0.3em 0;
104    padding: 0 0.6em;
105}
106
107ul {
108	padding: 0;
109}
110
111img {
112	border: 0;
113}
114
115/* GENERAL */
116
117#grailsLogo a {
118	display: inline-block;
119	margin: 10px;
120}
121
122.content {
123}
124
125.content h1 {
126	border-bottom: 1px solid #CCCCCC;
127	margin: 0.8em 1em 0.3em;
128	padding: 0 0.25em;
129}
130
131.scaffold-list h1 {
132	border: none;
133}
134
135.footer {
136	background: #abbf78;
137	color: #000;
138	clear: both;
139	font-size: 0.8em;
140	padding: 1em;
141	min-height: 1em;
142}
143
144.footer a {
145	color: #255b17;
146}
147
148.spinner {
149	background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
150	height: 16px;
151	width: 16px;
152    padding: 0.5em;
153    position: absolute;
154    right: 0;
155	top: 0;
156	text-indent: -9999px;
157}
158
159/* NAVIGATION MENU */
160
161.nav {
162	background-color: #efefef;
163	padding: 0.5em 0.75em;
164	   -moz-box-shadow: 0 0 3px 1px #aaaaaa;
165	-webkit-box-shadow: 0 0 3px 1px #aaaaaa;
166	        box-shadow: 0 0 3px 1px #aaaaaa;
167	zoom: 1;
168}
169
170.nav ul {
171	overflow: hidden;
172	padding-left: 0;
173	zoom: 1;
174}
175
176.nav li {
177	display: block;
178	float: left;
179	list-style-type: none;
180	margin-right: 0.5em;
181	padding: 0;
182}
183
184.nav a {
185	color: #666666;
186	display: block;
187	padding: 0.25em 0.7em;
188	text-decoration: none;
189	   -moz-border-radius: 0.3em;
190	-webkit-border-radius: 0.3em;
191	        border-radius: 0.3em;
192}
193
194.nav a:active, .nav a:visited {
195	color: #666666;
196}
197
198.nav a:focus, .nav a:hover {
199	background-color: #999999;
200	color: #ffffff;
201	outline: none;
202	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
203}
204
205.no-borderradius .nav a:focus, .no-borderradius .nav a:hover {
206	background-color: transparent;
207	color: #444444;
208	text-decoration: underline;
209}
210
211.nav a.home, .nav a.list, .nav a.create {
212	background-position: 0.7em center;
213	background-repeat: no-repeat;
214	text-indent: 25px;
215}
216
217.nav a.home {
218	background-image: url(../images/skin/house.png);
219}
220
221.nav a.list {
222	background-image: url(../images/skin/database_table.png);
223}
224
225.nav a.create {
226	background-image: url(../images/skin/database_add.png);
227}
228
229/* CREATE/EDIT FORMS AND SHOW PAGES */
230
231fieldset,
232.property-list {
233	margin: 0.6em 1.25em 0 1.25em;
234	padding: 0.3em 1.8em 1.25em;
235	position: relative;
236	zoom: 1;
237	border: none;
238}
239
240.property-list .fieldcontain {
241	list-style: none;
242	overflow: hidden;
243	zoom: 1;
244}
245
246.fieldcontain {
247	margin-top: 1em;
248}
249
250.fieldcontain label,
251.fieldcontain .property-label {
252	color: #666666;
253	text-align: right;
254	width: 25%;
255}
256
257.fieldcontain .property-label {
258	float: left;
259}
260
261.fieldcontain .property-value {
262	display: block;
263	margin-left: 27%;
264}
265
266label {
267	cursor: pointer;
268	display: inline-block;
269	margin: 0 0.25em 0 0;
270}
271
272input, select, textarea {
273	background-color: #fcfcfc;
274	border: 1px solid #cccccc;
275	font-size: 1em;
276	padding: 0.2em 0.4em;
277}
278
279select {
280	padding: 0.2em 0.2em 0.2em 0;
281}
282
283select[multiple] {
284	vertical-align: top;
285}
286
287textarea {
288	width: 250px;
289	height: 150px;
290	overflow: auto; /* IE always renders vertical scrollbar without this */
291	vertical-align: top;
292}
293
294input[type=checkbox], input[type=radio] {
295	background-color: transparent;
296	border: 0;
297	padding: 0;
298}
299
300input:focus, select:focus, textarea:focus {
301	background-color: #ffffff;
302	border: 1px solid #eeeeee;
303	outline: 0;
304	   -moz-box-shadow: 0 0 0.5em #ffffff;
305	-webkit-box-shadow: 0 0 0.5em #ffffff;
306	        box-shadow: 0 0 0.5em #ffffff;
307}
308
309.required-indicator {
310	color: #48802C;
311	display: inline-block;
312	font-weight: bold;
313	margin-left: 0.3em;
314	position: relative;
315	top: 0.1em;
316}
317
318ul.one-to-many {
319	display: inline-block;
320	list-style-position: inside;
321	vertical-align: top;
322}
323
324.ie6 ul.one-to-many, .ie7 ul.one-to-many {
325	display: inline;
326	zoom: 1;
327}
328
329ul.one-to-many li.add {
330	list-style-type: none;
331}
332
333/* EMBEDDED PROPERTIES */
334
335fieldset.embedded {
336	background-color: transparent;
337	border: 1px solid #CCCCCC;
338	padding-left: 0;
339	padding-right: 0;
340	   -moz-box-shadow: none;
341	-webkit-box-shadow: none;
342	        box-shadow: none;
343}
344
345fieldset.embedded legend {
346	margin: 0 1em;
347}
348
349/* MESSAGES AND ERRORS */
350
351.errors,
352.message {
353	font-size: 0.8em;
354	line-height: 2;
355	margin: 1em 2em;
356	padding: 0.5em;
357}
358
359.message {
360	background: #f3f3ff;
361	border: 1px solid #b2d1ff;
362	color: #006dba;
363	   -moz-box-shadow: 0 0 0.25em #b2d1ff;
364	-webkit-box-shadow: 0 0 0.25em #b2d1ff;
365	        box-shadow: 0 0 0.25em #b2d1ff;
366}
367
368.errors {
369	background: #fff3f3;
370	border: 1px solid #ffaaaa;
371	color: #cc0000;
372	   -moz-box-shadow: 0 0 0.25em #ff8888;
373	-webkit-box-shadow: 0 0 0.25em #ff8888;
374	        box-shadow: 0 0 0.25em #ff8888;
375}
376
377.errors ul,
378.message {
379	padding: 0;
380}
381
382.errors li {
383	list-style: none;
384	background: transparent url(../images/skin/exclamation.png) 0 50% no-repeat;
385	text-indent: 22px;
386}
387
388.message {
389	background: transparent url(../images/skin/information.png) 0 50% no-repeat;
390	text-indent: 22px;
391}
392
393/* form fields with errors */
394
395.error input, .error select, .error textarea {
396	background: #fff3f3;
397	border-color: #ffaaaa;
398	color: #cc0000;
399}
400
401.error input:focus, .error select:focus, .error textarea:focus {
402	   -moz-box-shadow: 0 0 0.5em #ffaaaa;
403	-webkit-box-shadow: 0 0 0.5em #ffaaaa;
404	        box-shadow: 0 0 0.5em #ffaaaa;
405}
406
407/* same effects for browsers that support HTML5 client-side validation (these have to be specified separately or IE will ignore the entire rule) */
408
409input:invalid, select:invalid, textarea:invalid {
410	background: #fff3f3;
411	border-color: #ffaaaa;
412	color: #cc0000;
413}
414
415input:invalid:focus, select:invalid:focus, textarea:invalid:focus {
416	   -moz-box-shadow: 0 0 0.5em #ffaaaa;
417	-webkit-box-shadow: 0 0 0.5em #ffaaaa;
418	        box-shadow: 0 0 0.5em #ffaaaa;
419}
420
421/* TABLES */
422
423table {
424	border-top: 1px solid #DFDFDF;
425	border-collapse: collapse;
426	width: 100%;
427	margin-bottom: 1em;
428}
429
430tr {
431	border: 0;
432}
433
434tr>td:first-child, tr>th:first-child {
435	padding-left: 1.25em;
436}
437
438tr>td:last-child, tr>th:last-child {
439	padding-right: 1.25em;
440}
441
442td, th {
443	line-height: 1.5em;
444	padding: 0.5em 0.6em;
445	text-align: left;
446	vertical-align: top;
447}
448
449th {
450	background-color: #efefef;
451	background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
452	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));
453	    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#ffffff', EndColorStr = '#eaeaea');
454	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eaeaea')";
455	color: #666666;
456	font-weight: bold;
457	line-height: 1.7em;
458	padding: 0.2em 0.6em;
459}
460
461thead th {
462	white-space: nowrap;
463}
464
465th a {
466	display: block;
467	text-decoration: none;
468}
469
470th a:link, th a:visited {
471	color: #666666;
472}
473
474th a:hover, th a:focus {
475	color: #333333;
476}
477
478th.sortable a {
479	background-position: right;
480	background-repeat: no-repeat;
481	padding-right: 1.1em;
482}
483
484th.asc a {
485	background-image: url(../images/skin/sorted_asc.gif);
486}
487
488th.desc a {
489	background-image: url(../images/skin/sorted_desc.gif);
490}
491
492.odd {
493	background: #f7f7f7;
494}
495
496.even {
497	background: #ffffff;
498}
499
500th:hover, tr:hover {
501	background: #E1F2B6;
502}
503
504/* PAGINATION */
505
506.pagination {
507	border-top: 0;
508	margin: 0;
509	padding: 0.3em 0.2em;
510	text-align: center;
511	   -moz-box-shadow: 0 0 3px 1px #AAAAAA;
512	-webkit-box-shadow: 0 0 3px 1px #AAAAAA;
513	        box-shadow: 0 0 3px 1px #AAAAAA;
514	background-color: #EFEFEF;
515}
516
517.pagination a,
518.pagination .currentStep {
519	color: #666666;
520	display: inline-block;
521	margin: 0 0.1em;
522	padding: 0.25em 0.7em;
523	text-decoration: none;
524	   -moz-border-radius: 0.3em;
525	-webkit-border-radius: 0.3em;
526	        border-radius: 0.3em;
527}
528
529.pagination a:hover, .pagination a:focus,
530.pagination .currentStep {
531	background-color: #999999;
532	color: #ffffff;
533	outline: none;
534	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
535}
536
537.no-borderradius .pagination a:hover, .no-borderradius .pagination a:focus,
538.no-borderradius .pagination .currentStep {
539	background-color: transparent;
540	color: #444444;
541	text-decoration: underline;
542}
543
544/* ACTION BUTTONS */
545
546.buttons {
547	background-color: #efefef;
548	overflow: hidden;
549	padding: 0.3em;
550	   -moz-box-shadow: 0 0 3px 1px #aaaaaa;
551	-webkit-box-shadow: 0 0 3px 1px #aaaaaa;
552	        box-shadow: 0 0 3px 1px #aaaaaa;
553	margin: 0.1em 0 0 0;
554	border: none;
555}
556
557.buttons input,
558.buttons a {
559	background-color: transparent;
560	border: 0;
561	color: #666666;
562	cursor: pointer;
563	display: inline-block;
564	margin: 0 0.25em 0;
565	overflow: visible;
566	padding: 0.25em 0.7em;
567	text-decoration: none;
568
569	   -moz-border-radius: 0.3em;
570	-webkit-border-radius: 0.3em;
571	        border-radius: 0.3em;
572}
573
574.buttons input:hover, .buttons input:focus,
575.buttons a:hover, .buttons a:focus {
576	background-color: #999999;
577	color: #ffffff;
578	outline: none;
579	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
580	   -moz-box-shadow: none;
581	-webkit-box-shadow: none;
582	        box-shadow: none;
583}
584
585.no-borderradius .buttons input:hover, .no-borderradius .buttons input:focus,
586.no-borderradius .buttons a:hover, .no-borderradius .buttons a:focus {
587	background-color: transparent;
588	color: #444444;
589	text-decoration: underline;
590}
591
592.buttons .delete, .buttons .edit, .buttons .save {
593	background-position: 0.7em center;
594	background-repeat: no-repeat;
595	text-indent: 25px;
596}
597
598.buttons .delete {
599	background-image: url(../images/skin/database_delete.png);
600}
601
602.buttons .edit {
603	background-image: url(../images/skin/database_edit.png);
604}
605
606.buttons .save {
607	background-image: url(../images/skin/database_save.png);
608}
609
610a.skip {
611	position: absolute;
612	left: -9999px;
613}