improved layout flexibility

stylesheets/_layout.sass

@@ -1,20 +1,52 @@
-!page_width = 900px
-!main_width = 620px
 !page_pad = 30px
-!sidebar_margin = 30px
-!sidebar_width = !page_width - !main_width - !sidebar_margin
-!pad = 15px
+!page_width = 980px
+!sidebar_margin = 25px
+!sidebar_width = 250px
 !default_border_radius = 4px
 
 html body
-  background-color= !body_bg
-  color= !body_color
+  background-color: #{!body_bg}
+  color: #{!body_color}
   a
-    color= !link_color
+    color: #{!link_color}
+    &:hover, &:focus
+      color: #{saturate(darken(!link_color, 15), 20)}
+    &:visited
+      color: #{darken(adjust_hue(!link_color, 70), 10)}
 
-.page_width
-  width= !page_width
+#header, #footer, #nav
+  .content
+    position: relative
+    margin: 0 auto
+    width: #{!page_width - !page_pad}
+    padding: 0 #{!page_pad/2}
+
+#page, #header, #footer, #nav
+  min-width: #{!page_width}
+  
+#page, #content, .content
+  +pie-clearfix
+#content
   margin: 0 auto
-  padding:
-    left= !page_pad
-    right= !page_pad
+  width: #{!page_width - !sidebar_width - !page_pad/2}
+  padding: 0 #{!sidebar_width} 0 #{!page_pad/2}
+#main
+  float: left
+  width: 100%
+  .content
+    padding-right: #{!sidebar_margin}
+
+#sidebar
+  float: left
+  width: #{!sidebar_width - !page_pad}
+  margin: 0 -100% 0 0
+  padding: #{!page_pad} 0 #{!page_pad} #{!page_pad}
+
+#page.expanded
+  #content
+    width: #{!page_width}
+    padding: 0
+  #sidebar
+    float: none
+    margin: 0
+    padding: 0 0 #{!page_pad}