1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

<div id="container">

<div id="header">
  <h1>Headline</h1>
  <img src="header.jpg" alt="" />
</div>

<div id="navigation">
	<var>navigation[1|2|3]</var>
	<div id="sidebar"><var>sidebar</var></div>
</div>

<div id="content">
	<var>content</var>	
</div>


<div id="footer">
	<div class="gutter"><var>footer</var></div>
</div>


</div>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:

                            /*  Typo
----------------------------------------------- */

a:link, a:visited
{
	text-decoration: underline;
	color:#EC4413;
}
a:active { 	text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p {	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
	background: #333333 url(bg.gif) no-repeat top left;
	padding:35px 0 0 0;
	margin:0;
	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
	margin:0 auto;
	width:834px;
	background:white;
}

#header
{
	padding:17px;
}

#header h1,
#header a
{
	padding:0;
	font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
	font-size:30px;
	font-weight:normal;
	text-decoration:none;
	line-height:1.3em;
	color:#666666;
	text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
	float:left;
	width:220px;
	padding:17px;

}
#sidebar
{
	padding-top:10px;
}

#content
{
	float:right;

	width:530px;
	padding:17px;

}

#footer
{
	clear:both;
	margin-top:10px;
	background:url(footer-bg.gif) repeat-x top;
	height:65px;
}

#footer .gutter 
{
	height:30px;
	padding:35px 15px 0 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
	margin:0;
	padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
	display: inline;
	margin: 0;	
	padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
	font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	display: block;
	color:#333;
	border-bottom:1px solid #CCC;
}


ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
	background:#EEE;
	color:black;
}

ul.mainNav1 a.current { font-weight:bold; }