source: main/adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content/topic/_introduction.xml @ 19878

Last change on this file since 19878 was 19878, checked in by GarthBraithwaite_STG, 2 years ago

nm content - topic intro pages. IP and topic megu menu selections Authoring and Searchable table.

File size: 3.8 KB
Line 
1<?xml version="1.0" encoding="ISO-8859-1"?>
2
3<CONTENT  xmlns:ibis="http://www.ibisph.org">
4
5        <style>
6                .TopImageNavigation
7                {
8                        width:                          100%;
9                        margin-bottom:          1rem;
10                }
11
12                .TopImageNavigation .Container
13                {
14                        display:                        inline-block;
15                        position:                       relative;
16                        margin:                         0;
17                        padding:                        0;
18                        width:                          235px;
19                        height:                         235px;
20                        background:                     transparent 0 0 no-repeat;
21                        background-size:        contain;
22                }
23/* if implemented as img then can use width 24% and height: auto */
24                .TopImageNavigation .Container .Overlay
25                {
26                        display:                        inline-block;
27                        position:                       absolute;
28                        bottom:                         0;
29                        left:                           0;
30                        height:                         60px;
31                        width:                          100%;
32                        background-color:       rgb(7, 7, 7, 0.5);
33                        color:                          white;
34                        padding-top:            0.7rem;
35                        font-size:                      1.25rem;
36                        text-align:             center;
37                }
38
39
40                .TopImageNavigation #healthstatus
41                {
42                        background-image: url("../../view/image/topic/category/healthstatus-bw.jpg");
43                }
44                .TopImageNavigation #healthcare
45                {
46                        background-image: url("../../view/image/topic/category/healthcare-bw.jpg");
47                }
48                .TopImageNavigation #lifestyle
49                {
50                        background-image: url("../../view/image/topic/category/lifestyle-bw.jpg");
51                }
52                .TopImageNavigation #population
53                {
54                        background-image: url("../../view/image/topic/category/population-bw.jpg");
55                }
56
57                .TopImageNavigation #healthstatus:hover,
58                .TopicHealthStatus .TopImageNavigation #healthstatus
59                {
60                        background-color: transparent;
61                        background-image: url("../../view/image/topic/category/healthstatus.jpg");
62                }
63                .TopImageNavigation #healthcare:hover,
64                .TopicHealthCare .TopImageNavigation #healthcare
65                {
66                        background-color: transparent;
67                        background-image: url("../../view/image/topic/category/healthcare.jpg");
68                }
69                .TopImageNavigation #lifestyle:hover,
70                .TopicLifestyle .TopImageNavigation #lifestyle
71                {
72                        background-color: transparent;
73                        background-image: url("../../view/image/topic/category/lifestyle.jpg");
74                }
75                .TopImageNavigation #population:hover,
76                .TopicPopulation .TopImageNavigation #population
77                {
78                        background-color: transparent;
79                        background-image: url("../../view/image/topic/category/population.jpg");
80                }
81
82                .TopicLifestyle p:first-of-type,
83                .TopicPopulation p:first-of-type,
84                .TopicHealthCare p:first-of-type,
85                .TopicHealthStatus p:first-of-type
86                {
87                        margin-top:                     0;
88                }
89
90
91                h3:last-of-type
92                {
93                        margin-top: 2rem;
94                }
95
96                .Container.TextIconBlocks
97                {
98                        margin:                         0 auto;
99                        max-width:                      900px;
100                }
101                .TextIconBlocks li
102                {
103                        display:                        inline-block;
104                        vertical-align:         top;
105                }
106                .TextIconBlocks li > a 
107                {
108                        display:                        inline-block;
109                        display:                        block;
110                        background-color:       #336699;
111                        width:                          170px;
112                        height:                         170px;
113                        padding:                        18px 20px 10px 20px;
114                        vertical-align:         top;
115                        font-size:                      1rem;
116                        text-align:             center;
117                        color:                          white;
118                }
119                .TextIconBlocks li a:hover
120                {
121                        background-color:       var(--background-color-hover);
122                        color:                          var(--color-hover);
123                }
124                .TextIconBlocks li a img
125                {
126                        display:                        block;
127                        height:                         64px;
128                        margin:                         0 auto 5px auto;
129                        background-color:       inherit;
130                }
131        </style>
132
133        <nav class="TopImageNavigation">
134                <a id="population" ibis:href="topic/population/Introduction.html" class="Container">
135                        <span class="Overlay">Population <br/>Characteristics
136                        </span>
137                </a>
138                <a id="healthcare" ibis:href="topic/healthcare/Introduction.html" class="Container">
139                        <span class="Overlay">Health Care <br/>Services
140                        </span>
141                </a>
142                <a id="lifestyle" ibis:href="topic/lifestyle/Introduction.html" class="Container">
143                        <span class="Overlay">Lifestyle and <br/>Risk Factors
144                        </span>
145                </a>
146                <a id="healthstatus" ibis:href="topic/healthstatus/Introduction.html" class="Container">
147                        <span class="Overlay">Health <br/>Status
148                        </span>
149                </a>
150        </nav>
151
152</CONTENT>
Note: See TracBrowser for help on using the repository browser.