Flesh out basic website pages a little more
[entangle:entangle.git] / docs / website / index.css
1
2 /************************** LAYOUT ************************/
3
4 /* Reset default page padding / margins */
5 body {
6     padding: 0px;
7     margin: 0px;
8 }
9
10 /* These 4 areas must all have no border, padding, margin
11  * to ensure that their widths end up *exactly* 100%
12  * otherwise scrollbars appear
13  */
14 #main, #panel, #header, #footer {
15     padding: 0px;
16     margin: 0px;
17     border: 0px;
18 }
19
20 /* Header occupies entire top strip */
21 #header {
22     position: absolute;
23     width: 100%;
24     top: 0px;
25 }
26
27 /* Content takes most of the space */
28 #main {
29     width: 75%;
30     margin-top: 120px;
31 }
32
33 /* Right hand panel takes the remainder, over on right */
34 #panel {
35     position: absolute;
36     width: 25%;
37     top: 115px;
38     right: 0px;
39 }
40
41 /* Footer is lined up with content */
42 #footer {
43     width: 75%;
44 }
45
46
47 /******************** GRAPHICS / COLOURS ************************/
48
49 body {
50     background-color: #eee;
51 }
52
53 #header {
54     height: 113px;
55     background: #dfb63b url(header-bg.png) repeat-x top left;
56     border-bottom: 1px solid #7d6621;
57     color: white;
58
59     /* The next <h1> spills out of header, so force this down
60        to botom to avoid covering hyperlinks */
61     z-index: -1;
62 }
63
64 #header h1 {
65     background-image: url(logo-bg.png);
66     background-repeat: no-repeat;
67     background-position: top right;
68     height: 463px;
69     margin: 0px;
70     padding: 0px;
71     padding: 1em;
72 }
73
74 #header h1 a {
75     color: inherit;
76     text-decoration: none;
77 }
78
79 #footer {
80     color: #888;
81 }
82
83 #footer a {
84     color: inherit;
85 }
86
87 #content {
88     margin: 2em;
89 }
90
91 #navigation a, #content a {
92     color: #2c3b5f;
93 }
94
95 #navigation div.section {
96     border: 2px solid #332a0d;
97     margin: 10px;
98     padding: 1px;
99     background: url(panel-bg.png) repeat top left;
100 }
101
102 #navigation h3 {
103     margin: 5px;
104     padding-left: 40px;
105     height: 32px;
106     line-height: 32px;
107 }
108
109 #navigation h3 a {
110     text-decoration: none;
111 }
112
113 #docs {
114     background: url(icon-docs.png) no-repeat center left;
115 }
116 #comms {
117     background: url(icon-comms.png) no-repeat center left;
118 }
119 #bugs {
120     background: url(icon-bugs.png) no-repeat center left;
121 }
122 #scm {
123     background: url(icon-scm.png) no-repeat center left;
124 }
125 #download {
126     background: url(icon-download.png) no-repeat center left;
127 }
128
129 #navigation p, #navigation pre {
130     margin: 5px;
131     margin-top: 1em;
132     margin-bottom: 1em;
133 }
134
135 ol.styled li, ul.styled li {
136     line-height: 32px;
137     margin-left: 2em;
138 }
139
140 li.launch {
141     list-style: url(item-launch.png);
142 }
143
144 li.connect {
145     list-style: url(item-connect.png);
146 }
147
148 li.shoot {
149     list-style: url(item-shoot.png);
150 }
151
152 li.handsfree {
153     list-style: url(item-handsfree.png);
154 }
155
156 li.preview {
157     list-style: url(item-preview.png);
158 }
159
160 li.download {
161     list-style: url(item-download.png);
162 }
163
164 li.settings {
165     list-style: url(item-settings.png);
166 }
167
168 dl dt {
169     font-weight: bold;
170 }
171
172 dl dd {
173     margin-bottom: 2em;
174 }