//	----------------------------------------------------------------------------------------------------------------
//
//	Easy Site Maps
//	========================
//
//	This is an adaptation of SlickMap CSS (http://astuteo.com/slickmap/) by Astuteo.
//	It's not as pretty as the sitemaps produced by that library (this one doen't 
//	include any images), but it gets the job done. It creates clickable sitemaps 
//	from unordered lists. Use it to help develop the architecture for your site
//	during your prototyping process.
//
//	To use it, simply mix +build-sitemap into the top level ul element.
//
//	----------------------------------------------------------------------------------------------------------------

@import graphpaper/modules/reset.sass
@import graphpaper/modules/colors.sass
@import graphpaper/modules/grid.sass


=build-sitemap

	:font-family "Helvetica", "Arial", sans-serif
	
	#info
		:margin-top 40px
		:margin-left 40px
		
		
		h1
			:font-size 36px
			:font-weight bold
			:line-height 36px
			:margin-bottom 18px
		
		h2
			:font-size 14px
			:font-weight bold
			:line-height 18px
	
	ul#sitemap
		:color #{!black}
		:padding 40px
		:font-size 12px
		:line-height 1
		:list-style none
	
		a
	
			&:link, &:visited
		
				&:before
					:content " "attr(href)" "
					:display block
					:text-transform uppercase
					:font-size 10px
					:margin-bottom 5px
					:word-wrap break-word
	
		li
			:float left
			:width 200px
			:padding 30px 0
			:margin-top -30px
		
			a
				:margin 0 20px 0 0
				:padding 10px 0
				:display block
				:font-size 14px
				:font-weight bold
				:text-align center
				:color #{!black}
				:background #C3EAFB
				:border 2px solid #B5D9EA
			
				&:hover
					:background-color #E2F4FD
					:border-color #97BDCF
			
				// Second Level
	
			li
				:width 100%
				:clear left
				:margin-top 0
				:padding 10px 0 0 0
		
				&:first-child
					:padding-top 30px
		
				a
					:background-color #CEE3AC
					:border-color #B8DA83
			
					&:link, &:visited
				
						&:before
							:color #8FAF5C
		
				// Third Level
		
				ul
					:margin 0
					:width 100%
					:float right
			
					li
						:padding 5px 0
				
						&:first-child
							:padding 15px 0 5px 0
				
						a
							:background-color #FFF7AA
							:border-color #E3CA4B
							:font-size 12px
							:padding 5px 0
							:margin-right 10%
							:width 70%
							:float right
					
							&:link, &:visited
					
								&:before
									:color #CCAE14
									:font-size 9px