End chapter 8
[depot.git] / public / stylesheets / depot.css
1 /* Global styles */
2
3 /* Global styles */
4
5 /* START:notice */
6 #notice {
7 border: 2px solid red;
8 padding: 1em;
9 margin-bottom: 2em;
10 background-color: #f0f0f0;
11 font: bold smaller sans-serif;
12 }
13 /* END:notice */
14
15 h1 {
16 font: 150% sans-serif;
17 color: #226;
18 border-bottom: 3px dotted #77d;
19 }
20
21 /* Styles for products/index */
22
23 #product-list table {
24 border-collapse: collapse;
25 }
26
27 #product-list table tr td {
28 padding: 5px;
29 vertical-align: top;
30 }
31
32 #product-list .list-image {
33 width: 60px;
34 height: 70px;
35 }
36
37 #product-list .list-description {
38 width: 60%;
39 }
40
41 #product-list .list-description dl {
42 margin: 0;
43 }
44
45 #product-list .list-description dt {
46 color: #244;
47 font-weight: bold;
48 font-size: larger;
49 }
50
51 #product-list .list-description dd {
52 margin: 0;
53 }
54
55 #product-list .list-description .unavailable {
56 color: #f00;
57 }
58
59 #product-list .list-actions {
60 font-size: x-small;
61 text-align: right;
62 padding-left: 1em;
63 }
64
65 #product-list .list-line-even {
66 background: #e0f8f8;
67 }
68
69 #product-list .list-line-odd {
70 background: #f8b0f8;
71 }
72
73
74 /* Styles for main page */
75 #banner {
76 background: #9c9 ;
77 padding-top: 10px;
78 padding-bottom: 10px;
79 border-bottom: 2px solid;
80 font: small-caps 40px/40px "Times New Roman", serif;
81 color: #282 ;
82 text-align: center;
83 }
84
85 #banner img {
86 float: left;
87 padding: 2px 15px;
88 }
89
90 #columns {
91 background: #141 ;
92 }
93
94 #main {
95 margin-left: 13em;
96 padding-top: 4ex;
97 padding-left: 2em;
98 background: white;
99 }
100
101 #side {
102 float: left;
103 padding-top: 1em;
104 padding-left: 1em;
105 padding-bottom: 1em;
106 width: 12em;
107 background: #141 ;
108 }
109
110 #side a {
111 color: #bfb ;
112 font-size: small;
113 }
114
115 /* An entry in the store catalog */
116
117 #store .entry {
118 overflow: auto;
119 margin-top: 1em;
120 border-bottom: 1px dotted #77d;
121 }
122
123 #store .title {
124 font-size: 120%;
125 font-family: sans-serif;
126 }
127
128 #store .entry img {
129 width: 75px;
130 float: left;
131 border: 0;
132 }
133
134 #store .entry h3 {
135 margin-top: 0;
136 margin-bottom: 2px;
137 color: #227;
138 }
139
140 #store .entry h3 a:link, #store .entry h3 a:visited, #store .entry h3 a:active {
141 color: #227;
142 text-decoration: none;
143
144 }
145
146 #store .entry p {
147 margin-top: 0.5em;
148 margin-bottom: 0.8em;
149 }
150
151 #store .entry .price-line {
152 clear: both;
153 }
154
155 #store .entry .add-to-cart {
156 position: relative;
157 }
158
159 #store .entry .price {
160 color: #44a;
161 font-weight: bold;
162 margin-right: 2em;
163 }
164
165 #store .entry form, #store .entry form div {
166 display: inline;
167 }
168
169
170 /* START:cartmain */
171 /* Styles for the cart in the main page */
172
173 .cart-title {
174 font: 120% bold;
175 }
176
177 .item-price, .total-line {
178 text-align: right;
179 }
180
181 .total-line .total-cell {
182 font-weight: bold;
183 border-top: 1px solid #595;
184 }
185 /* END:cartmain */
186
187
188 /* The error box */
189
190 .fieldWithErrors {
191 padding: 2px;
192 background-color: #EEFFEE;
193 display: inline;
194 }
195
196 .fieldWithErrors * {
197 background-color: red;
198 }
199
200 #errorExplanation {
201 width: 400px;
202 border: 2px solid red;
203 padding: 7px;
204 padding-bottom: 12px;
205 margin-bottom: 20px;
206 background-color: #f0f0f0;
207 }
208
209 #errorExplanation h2 {
210 text-align: left;
211 font-weight: bold;
212 padding: 5px 5px 5px 15px;
213 font-size: 12px;
214 margin: -7px;
215 background-color: #c00;
216 color: #fff;
217 }
218
219 #errorExplanation p {
220 color: #333;
221 margin-bottom: 0;
222 padding: 5px;
223 }
224
225 #errorExplanation ul li {
226 font-size: 12px;
227 list-style: square;
228 }