1/* Copyright (c) Microsoft Corporation. All rights reserved. */
2html
3{
4    cursor: default;
5}
6
7#featureLabel
8{
9    font: 20pt/24pt "Segoe UI Semilight";
10    margin:0;
11    padding:5px 0 10px 0;
12    font-weight: normal;
13}
14
15#inputLabel, #outputLabel
16{
17    font: 11pt/15pt "Segoe UI";
18    margin:0;
19    padding:0;
20    font-weight: normal;
21}
22
23#listLabel, #descLabel
24{
25    font: 11pt/15pt "Segoe UI Semilight";
26    font-weight:normal;
27}
28
29#rootGrid
30{
31    width: 100%;
32    height: 100%;
33    display: -ms-grid;
34    -ms-grid-columns: 100px 1fr 100px;
35    -ms-grid-rows: 20px auto 1fr auto 20px;
36}
37
38#header
39{
40    -ms-grid-column: 2;
41    -ms-grid-row: 2;
42}
43
44#content
45{
46    padding-right:20px;
47    padding-bottom:20px;
48    overflow:auto;
49    display:-ms-grid;
50    -ms-grid-columns:1fr;
51    -ms-grid-rows: auto 1fr;
52    -ms-grid-column: 2;
53    -ms-grid-row: 3;
54}
55
56#footer
57{
58    -ms-grid-column: 2;
59    -ms-grid-row: 4;
60    padding-bottom:10px;
61}
62
63#featureLabel
64{
65    -ms-grid-row: 1;
66}
67
68#contentHost
69{
70    display:-ms-grid;
71    -ms-grid-columns:1fr;
72    -ms-grid-rows: auto auto auto 1fr;
73    -ms-grid-row: 2;
74}
75
76#inputLabel
77{
78    -ms-grid-row: 1;
79}
80
81
82#input
83{
84    -ms-grid-row: 2;
85    display: -ms-grid;
86    -ms-grid-columns: auto auto;
87    -ms-grid-rows: auto;
88    margin-top:10px;
89}
90
91#outputLabel
92{
93    -ms-grid-row: 3;
94    padding-top:10px;
95    padding-bottom:10px;
96}
97
98#output
99{
100    height:100%;
101    -ms-grid-row: 4;
102    -ms-grid-row-align:stretch;
103}
104
105.clear
106{
107    clear:both;
108}
109
110
111#footer span
112{
113    font-size:12px;
114}
115
116#footer .company
117{
118    float:left;
119}
120
121#footer .links
122{
123    float:right;
124}
125
126#footer .links a
127{
128    font-size:12px;
129    margin-left:8px;
130    text-decoration:none;
131}
132
133#footer .links .pipe
134{
135    font-size:9px;
136    margin-left:8px;
137}
138
139#statusMessage
140{
141    margin-bottom:5px;
142}
143
144#input .options
145{
146    -ms-grid-row: 1;
147    -ms-grid-column: 1;
148}
149
150#input .details
151{
152    -ms-grid-row: 1;
153    -ms-grid-column: 2;
154    cursor:text;
155}
156
157.imageHolder
158{
159    max-width:382px;
160}
161
162.imageHolder.withText
163{
164     float:left;
165     margin-right:10px;
166}
167
168#scenarios
169{
170    margin-right:20px;
171}
172
173
174
175@media screen and (min-width: 800px) and (max-width: 1024px)
176{
177    #rootGrid
178    {
179        -ms-grid-columns: 40px 1fr 40px;
180    }
181}
182
183@media screen and (max-width: 799px)
184{
185    #rootGrid
186    {
187        -ms-grid-columns: 20px 1fr 20px;
188    }
189
190    #output
191    {
192        padding-bottom:20px;
193    }
194
195    #input
196    {
197        -ms-grid-columns: auto;
198        -ms-grid-rows: auto auto;
199    }
200
201    #input .options
202    {
203        -ms-grid-row: 1;
204        -ms-grid-column: 1;
205        margin-bottom:10px;
206    }
207
208    #input .details
209    {
210        -ms-grid-row: 2;
211        -ms-grid-column: 1;
212    }
213}