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

Last change on this file since 22750 was 22750, checked in by GarthBraithwaite_STG, 7 months ago

nm content - added note for lois on CardioScreening?.xml missing IPs.

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