Add overview page with sitemap

assets/css/slickmap.css

@@ -0,0 +1,225 @@
+.sp-sitemap {
+	margin: 40px 0;
+	float: left;
+	width: 100%;
+	position: relative;
+}
+
+/* ------------------------------------------------------------
+	Reset Styles (adapted from meyerweb.com)
+------------------------------------------------------------ */
+
+.sp-sitemap div, .sp-sitemap span, .sp-sitemap applet, .sp-sitemap object, .sp-sitemap iframe, .sp-sitemap
+h1, .sp-sitemap h2, .sp-sitemap h3, .sp-sitemap h4, .sp-sitemap h5, .sp-sitemap h6, .sp-sitemap p, .sp-sitemap blockquote, .sp-sitemap pre, .sp-sitemap
+a, .sp-sitemap abbr, .sp-sitemap acronym, .sp-sitemap address, .sp-sitemap big, .sp-sitemap cite, .sp-sitemap code, .sp-sitemap
+del, .sp-sitemap dfn, .sp-sitemap em, .sp-sitemap font, .sp-sitemap img, .sp-sitemap ins, .sp-sitemap kbd, .sp-sitemap q, .sp-sitemap s, .sp-sitemap samp, .sp-sitemap
+small, .sp-sitemap strike, .sp-sitemap strong, .sp-sitemap sub, .sp-sitemap sup, .sp-sitemap tt, .sp-sitemap var, .sp-sitemap
+dl, .sp-sitemap dt, .sp-sitemap dd, .sp-sitemap ol, .sp-sitemap ul, .sp-sitemap li, .sp-sitemap
+fieldset, .sp-sitemap form, .sp-sitemap label, .sp-sitemap legend, .sp-sitemap
+table, .sp-sitemap caption, .sp-sitemap tbody, .sp-sitemap tfoot, .sp-sitemap thead, .sp-sitemap tr, .sp-sitemap th, .sp-sitemap td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	vertical-align: baseline;
+}
+
+/* ------------------------------------------------------------
+	NUMBER OF COLUMNS: Adjust .sp-sitemap li to set the number
+	of columns required in your site map. The default is 
+	4 columns (25%). 5 columns would be 20%, 6 columns would 
+	be 16.6%, etc. 
+------------------------------------------------------------ */
+
+.sp-sitemap li {
+	width: 10%;
+}
+
+.sp-sitemap li ul li {
+	width:100% !important;
+}
+
+.sp-sitemap .col0 { max-width: 300px; }
+.sp-sitemap .col1 { max-width: 300px; }
+.sp-sitemap .col2 { max-width: 600px; }
+.sp-sitemap .col3 { max-width: 900px; }
+.sp-sitemap .col4 { max-width: 1200px; }
+.sp-sitemap .col5 { max-width: 1500px; }
+.sp-sitemap .col6 { max-width: 1800px; }
+.sp-sitemap .col7 { max-width: 2100px; }
+.sp-sitemap .col8 { max-width: 2400px; }
+.sp-sitemap .col9 { max-width: 2700px; }
+.sp-sitemap .col10 { max-width: 3000px; }
+.sp-sitemap .col11 { max-width: 3300px; }
+.sp-sitemap .col12 { max-width: 3600px; }
+
+.sp-sitemap .col1 li { width:99.9%; }
+.sp-sitemap .col2 li { width:50%; }
+.sp-sitemap .col3 li { width:33.3%; }
+.sp-sitemap .col4 li { width:25%; }
+.sp-sitemap .col5 li { width:20%; }
+.sp-sitemap .col6 li { width:16.6%; }
+.sp-sitemap .col7 li { width:14.2%; }
+.sp-sitemap .col8 li { width:12.5%; }
+.sp-sitemap .col9 li { width:11.1%; }
+.sp-sitemap .col10 li { width:10%; }
+.sp-sitemap .col11 li { width:9%; }
+.sp-sitemap .col12 li { width:8.3%; }
+
+/* ------------------------------------------------------------
+	General Styles
+------------------------------------------------------------ */
+
+.sp-sitemap h1 {
+	font-weight: bold;
+	text-transform: uppercase;
+	font-size: 20px;
+	margin: 0 0 5px 0;
+}
+.sp-sitemap h2 {
+	font-size: 10px;
+	color: #777777;
+	margin: 0 0 20px 0;
+}
+.sp-sitemap a {
+	text-decoration: none;
+}
+.sp-sitemap ol, .sp-sitemap ul {
+	list-style: none;
+}
+.sp-sitemap li {
+	margin: 0;
+}
+.sp-sitemap li a.button {
+	white-space: normal;
+}
+
+
+/* ------------------------------------------------------------
+	Site Map Styles
+------------------------------------------------------------ */
+
+/* --------	Top Level --------- */
+
+.sp-sitemap #sp-primary .sp-home {
+	display: block;
+	float: none;
+	background: #f1f1f1 url('../images/slickmap/L1-left.png') center bottom no-repeat;
+	position: relative;
+	z-index: 2;
+	padding: 0 0 30px 0;
+}
+.sp-sitemap #sp-primary .sp-breadcrumb {
+	display: block;
+	float: none;
+	background: #f1f1f1 url('../images/slickmap/vertical-line.png') center bottom repeat-y;
+	position: relative;
+	z-index: 2;
+	padding: 0 0 30px 0;
+	margin-bottom: 30px;
+}
+.sp-sitemap #sp-primary li {
+	min-width: 150px;
+	float: left;
+	background: url('../images/slickmap/L1-center.png') center top no-repeat;
+	padding: 30px 0;
+	margin-top: -30px;
+}
+.sp-sitemap #sp-primary li a.button {
+	margin: 0 20px 0 0;
+	padding: 10px 0;
+	display: block;
+	font-size: 13px;
+	font-weight: bold;
+	text-align: center;
+	height: auto;
+	line-height: normal;
+}
+.sp-sitemap #sp-primary li:last-child {
+	background: url('../images/slickmap/L1-right.png') center top no-repeat;
+}
+
+/* --------	Second Level --------- */
+
+.sp-sitemap #sp-primary li li {
+	width: 100%;
+	clear: left;
+	margin-top: 0;
+	padding: 10px 0 0 0;
+	background: url('../images/slickmap/vertical-line.png') center bottom repeat-y;
+}
+.sp-sitemap #sp-primary li li:first-child {
+	padding-top: 30px;
+}
+.sp-sitemap #sp-primary li li:last-child {
+	background: url('../images/slickmap/vertical-line.png') center bottom repeat-y;
+}
+
+/* --------	Third Level --------- */
+
+.sp-sitemap #sp-primary li li ul {
+	margin: 10px 0 0 0;
+	width: 100%;
+	float: right;
+	padding: 9px 0 10px 0;
+	background: #f1f1f1 url('../images/slickmap/L3-ul-top.png') center top no-repeat;
+}
+.sp-sitemap #sp-primary li li li {
+	background: url('../images/slickmap/L3-center.png') left center no-repeat;
+	padding: 5px 0;
+}
+.sp-sitemap #sp-primary li li li a {
+	padding: 5px 0;
+	width: 80%;
+	float: right;
+}
+.sp-sitemap #sp-primary li li li:first-child {
+	padding: 15px 0 5px 0;
+	background: url('../images/slickmap/L3-li-top.png') left center no-repeat;
+}
+.sp-sitemap #sp-primary li li li:last-child {
+	background: url('../images/slickmap/L3-bottom.png') left center no-repeat;
+}
+
+
+/* ------------------------------------------------------------
+	Utility Navigation
+------------------------------------------------------------ */
+
+.sp-sitemap #sp-utility {
+	float: right;
+	max-width: 80%;
+	margin-top: -30px;
+	margin-right: 10px;
+}
+.sp-sitemap #sp-utility li {
+	float: left;
+	margin-bottom: 10px;
+	width: auto;
+}
+.sp-sitemap #sp-utility li a.button {
+	margin: 0 10px 0 0;
+	padding: 10px 16px;
+	display: block;
+	font-size: 13px;
+	font-weight: bold;
+	text-align: center;
+	height: auto;
+	line-height: normal;
+	position: relative;
+	z-index: 10;
+}
+.sp-sitemap #sp-utility li a:link:before,
+.sp-sitemap #sp-utility li a:visited:before {
+	margin-bottom: 3px;
+}
+
+@media screen and ( max-width: 782px ) {
+	.sp-sitemap #sp-primary {
+		clear: both;
+		padding-top: 50px;
+	}
+	.sp-sitemap #sp-utility {
+		max-width: none;
+	}
+}