diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml
index e818657e8..5573fe020 100644
--- a/app/views/aspects/manage.html.haml
+++ b/app/views/aspects/manage.html.haml
@@ -7,7 +7,7 @@
= javascript_include_tag 'aspect-edit.js'
- content_for :left_pane do
- %h1=t('.requests')
+ %h3=t('.requests')
.requests
%ul.dropzone
@@ -19,7 +19,7 @@
= person_image_tag(request.person)
.name
= request.person.real_name
- %h1=t('.ignore_remove')
+ %h3=t('.ignore_remove')
%li.remove
%ul.dropzone
@@ -34,7 +34,7 @@
.aspect_name
%span.edit_name_field
- %h1{:contenteditable => true}= aspect.name
+ %h3{:contenteditable => true}= aspect.name
%span.tip click to edit
%ul.tools
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
index 3e927f723..7e22a3cd2 100644
--- a/app/views/comments/_comment.html.haml
+++ b/app/views/comments/_comment.html.haml
@@ -4,8 +4,9 @@
%li.comment{:id => post.id}
= person_image_tag(post.person)
- %span.from
- = link_to post.person.real_name, post.person
+ .content
+ .from
+ = link_to post.person.real_name, post.person
= post.text
- %div.time
- = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
+ %div.time
+ = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}"
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 99dec9e35..b8de1dd24 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -56,7 +56,7 @@
= render "shared/sub_header"
.container
- .span-5.last
+ .span-4.append-1.last
= yield :left_pane
.span-19.last
diff --git a/app/views/photos/_photo.haml b/app/views/photos/_photo.haml
index 71049ac72..85a2cd80a 100644
--- a/app/views/photos/_photo.haml
+++ b/app/views/photos/_photo.haml
@@ -7,28 +7,27 @@
= person_image_tag(post.person)
.content
- %span.from
+ .from
= link_to post.person.real_name, post.person
- %b
- =t('.posted_a_new_photo_to')
- = link_to post.album.name, object_path(post.album)
+ .aspect
+ →
+ - if post.public?
+ the world
+ - else
+ - for aspect in current_user.aspects_with_post( post.id )
+ = aspect.name
- %br
- = render "albums/album", :post => post.album, :current_user => current_user
- = link_to (image_tag post.url(:thumb_medium)), object_path(post)
+ =t('.posted_a_new_photo_to')
+ = link_to post.album.name, object_path(post.album)
+
+ %br
+ %br
+ = render "albums/album", :post => post.album, :current_user => current_user
+ = link_to (image_tag post.url(:thumb_medium)), object_path(post)
.info
- = link_to(how_long_ago(post), photo_path(post))
- \--
+ %span.time= link_to(how_long_ago(post), photo_path(post))
= link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments"
+
= render "comments/comments", :post => post
- - if post.public?
- .public_aspect_tag
- public
- - else
- .aspect_tag
- %ul
- - for aspect in current_user.aspects_with_post( post.id )
- %li= aspect.name
-
diff --git a/app/views/shared/_sub_header.haml b/app/views/shared/_sub_header.haml
index 227b63d4e..e7dc4e79d 100644
--- a/app/views/shared/_sub_header.haml
+++ b/app/views/shared/_sub_header.haml
@@ -2,10 +2,10 @@
.container
.span-5.last
- if @person
- %h1
+ %h2
= @person.real_name
- else
- %h1
+ %h2
- if @aspect == :all
= link_to t('.all_aspects'), root_path
- elsif @aspect == :public
diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml
index d8c56ff2f..391251358 100644
--- a/app/views/status_messages/_status_message.html.haml
+++ b/app/views/status_messages/_status_message.html.haml
@@ -7,28 +7,26 @@
= person_image_link(post.person)
.content
- %span.from
+ .from
= link_to post.person.real_name, post.person
- = post.message
+ .aspect
+ →
+ - if post.public?
+ the world
+ - else
+ - for aspect in current_user.aspects_with_post( post.id )
+ = link_to aspect.name, aspect
+
+ - if current_user.owns?(post)
+ .destroy_link
+ = render "shared/reshare", :post => post, :current_user => current_user
+ = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
+
+ = post.message
.info
%span.time= link_to(how_long_ago(post), object_path(post))
- \--
= link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments"
= render "comments/comments", :post => post
- - if current_user.owns?(post)
- .destroy_link
- = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete"
- = render "shared/reshare", :post => post, :current_user => current_user
-
- - if post.public?
- .public_aspect_tag
- public
- - else
- .aspect_tag
- %ul
- - for aspect in current_user.aspects_with_post( post.id )
- %li= aspect.name
-
diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml
index 80d426202..397035a80 100644
--- a/app/views/users/edit.html.haml
+++ b/app/views/users/edit.html.haml
@@ -14,7 +14,7 @@
- content_for :publish do
- %h1="#{t('.editing_profile')}"
+ %h2="#{t('.editing_profile')}"
- content_for :left_pane do
%ul#settings_nav
diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js
index 59ba6e331..2d6564e6b 100644
--- a/public/javascripts/aspect-edit.js
+++ b/public/javascripts/aspect-edit.js
@@ -94,7 +94,7 @@ $(function() {
});
- $(".aspect h1").live( 'focus', function() {
+ $(".aspect h3").live( 'focus', function() {
var $this = $(this),
id = $this.closest("li").children("ul").attr("id"),
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 80d0dfe39..fa7be11c8 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -11,23 +11,16 @@ body {
margin: 0; }
a {
- color: #556270;
color: #107fc9;
- color: #019dbe;
text-decoration: none; }
a:hover {
- color: white;
- background-color: #556270;
- background-color: #019dbe; }
+ color: #22aae0; }
-h1 {
- font-size: 21px;
- font-weight: bold;
- line-height: 36px; }
+h1, h2, h3, h4 {
+ color: #444444; }
h3 {
- font-size: 18px;
- font-weight: bold; }
+ font-size: 18px; }
.avatar {
width: 50px;
@@ -125,17 +118,15 @@ header {
border-top: 1px solid white;
padding: 20px 0; }
header #aspect_header h1 {
- margin-bottom: 0;
- text-shadow: 0 2px 0 white; }
+ text-shadow: 0 1px 0 white; }
header #aspect_header a {
- color: #111111; }
+ color: #444444; }
header #aspect_header a:hover {
background: none;
color: #999999; }
header #aspect_header .page_title {
text-transform: uppercase;
- text-shadow: 0 2px 0 white;
- margin-top: -5px; }
+ text-shadow: 0 1px 0 white; }
ul#stream {
margin: 0;
@@ -146,7 +137,6 @@ ul#stream {
padding: 12px 0;
border-bottom: 1px solid #eeeeee; }
ul#stream > li:hover {
- background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#fafafa), to(#fcfcfc));
background-color: #fafafa;
border-bottom: 1px solid #dddddd; }
ul#stream > li:hover .destroy_link {
@@ -156,26 +146,47 @@ ul#stream {
li.message {
position: relative;
- line-height: 140%;
- font-family: "Lucida Grande", sans-serif;
- color: #999999; }
+ line-height: 19px;
+ font-family: "Arial", "Helvetica", sans-serif;
+ color: #777777; }
li.message .avatar {
float: left;
margin-right: 15px; }
li.message .delete:hover {
background: #eeeeee; }
li.message .content {
+ max-width: 610px;
+ margin-top: -4px;
padding-left: 65px;
- width: 600px; }
- li.message .content span.from {
- color: black;
- font-weight: normal;
- font-size: 110%; }
+ color: #444444;
+ font-weight: normal;
+ font-size: 14px; }
+ li.message .content .from {
+ font-family: "Helvetica neue", Arial, Helvetica, sans-serif;
+ text-shadow: 0 1px white; }
+ li.message .content .from .aspect {
+ display: inline;
+ color: #bbbbbb;
+ font-size: 12px; }
+ li.message .content .from .aspect a {
+ font-weight: normal;
+ color: #bbbbbb; }
+ li.message .content .from .aspect a:hover {
+ text-decoration: underline; }
+ li.message .content .from a {
+ font-weight: bold; }
li.message .content div.info {
- color: #bababa;
- font-size: 70%; }
- li.message .content div.info .time a {
- color: #666666; }
+ color: #eeeeee;
+ font-size: 11px; }
+ li.message .content div.info a {
+ color: #cccccc; }
+ li.message .content div.info .time {
+ font-weight: bold;
+ margin-right: 5px; }
+ li.message .content div.info .time a {
+ color: #bbbbbb; }
+ li.message:hover div.info a, li.message:hover .time a {
+ color: #107fc9; }
.reshare_pane {
margin-left: 5px;
@@ -248,8 +259,8 @@ form {
#stream div.comments {
display: none; }
#stream div.comments .avatar {
- width: 30px;
- height: 30px;
+ width: 35px;
+ height: 35px;
margin-right: 10px; }
input.comment_submit {
@@ -261,7 +272,7 @@ ul.comment_set {
margin-top: 1em;
padding: 0;
list-style: none;
- width: 495px; }
+ max-width: 610px; }
ul.comment_set textarea {
width: 100%; }
ul.comment_set li.comment {
@@ -269,11 +280,18 @@ ul.comment_set {
background-color: rgba(10, 81, 109, 0.05);
padding: 0.6em;
border-bottom: 1px solid #dddddd; }
- ul.comment_set li.comment .from {
- font-size: 1em; }
- ul.comment_set li.comment div.time {
- color: #666666;
- font-size: 70%; }
+ ul.comment_set li.comment .content {
+ color: #777777;
+ margin-top: -2px;
+ padding-left: 45px;
+ font-size: 12px;
+ line-height: 18px; }
+ ul.comment_set li.comment .content .from a {
+ color: #444444; }
+ ul.comment_set li.comment .content div.time {
+ color: #bbbbbb;
+ font-size: 11px;
+ font-weight: bold; }
ul.comment_set li.comment form {
margin-top: -5px;
margin-bottom: 0;
@@ -304,20 +322,16 @@ ul.comment_set {
.pagination a {
padding: 3px; }
-.destroy_link, .request_button {
+li.message .from .destroy_link {
+ display: none;
position: absolute;
- right: 2em;
- bottom: 15px; }
- .destroy_link a, .request_button a {
+ right: 0;
+ font-size: 12px; }
+ li.message .from .destroy_link a {
color: #999999;
font-weight: normal; }
- .destroy_link a:hover, .request_button a:hover {
- text-decoration: underline;
- background: none; }
-
-.destroy_link {
- display: none;
- font-size: smaller; }
+ li.message .from .destroy_link a:hover {
+ text-decoration: underline; }
.request_buttons {
position: absolute;
@@ -350,7 +364,7 @@ ul.comment_set {
input[type='text'],
input[type='password'],
textarea {
- font-family: "lucida grande", "lucida sans", "sans-serif";
+ font-family: "Arial", "Helvetica", sans-serif;
font-size: 14px;
padding: 0.3em;
display: block;
@@ -374,11 +388,13 @@ form p {
margin: 0; }
label {
+ font-family: "Arial", "Helvetica", sans-serif;
+ font-weight: normal;
color: #999999;
position: absolute;
top: 3px;
left: 0.48em;
- font-weight: normal; }
+ text-shadow: 0 1px 1px #eeeeee; }
#publisher {
color: #999999;
@@ -506,7 +522,8 @@ h1.big_text {
#aspect_nav {
color: black;
margin-top: 8px;
- margin-bottom: 1px; }
+ margin-bottom: 1px;
+ font-family: "Arial", "Helvetica", sans-serif; }
#aspect_nav #aspect_manage_button {
display: inline; }
#aspect_nav #aspect_manage_button a {
@@ -520,12 +537,8 @@ h1.big_text {
display: inline;
margin-right: 2px; }
#aspect_nav ul > li a {
- text-shadow: 0 2px 0 #444444;
- -webkit-border-radius: 3px 3px 0 0;
- -moz-border-radius: 3px 3px 0 0;
+ text-shadow: 0 1px 0 #444444;
line-height: 22px;
- background-color: #444444;
- border: 1px solid #555555;
padding: 3px 8px;
padding-bottom: 3px;
color: #999999; }
@@ -533,9 +546,11 @@ h1.big_text {
background-color: #4e4e4e;
color: #cccccc; }
#aspect_nav ul > li.selected a {
+ -webkit-border-radius: 5px 5px 0 0;
+ -moz-border-radius: 5px 5px 0 0;
-webkit-box-shadow: 0px -4px 6px -2px #777777;
-moz-box-shadow: 0px -4px 6px -2px #777777;
- text-shadow: 0 2px 0 white;
+ text-shadow: 0 1px 0 white;
padding-top: 4px;
padding-bottom: 5px;
line-height: 18px;
@@ -545,7 +560,7 @@ h1.big_text {
background: -moz-linear-gradient(19% 75% 90deg, #f7f7f7, white);
border: 1px solid white;
border-bottom: 1px solid #f7f7f7;
- color: black; }
+ color: #444444; }
#aspect_nav ul > li.selected a:hover {
background-color: #efefef; }
#aspect_nav ul > li.selected a a {
@@ -574,9 +589,9 @@ h1.big_text {
.requests,
.remove {
list-style: none; }
- .aspect h1,
- .requests h1,
- .remove h1 {
+ .aspect h3,
+ .requests h3,
+ .remove h3 {
display: inline-block; }
.aspect .tip,
.requests .tip,
@@ -596,7 +611,7 @@ h1.big_text {
.requests .aspect_name ul.tools,
.remove .aspect_name ul.tools {
position: absolute;
- top: 10px;
+ top: 5px;
right: 0;
display: inline;
padding: 0;
@@ -616,7 +631,7 @@ h1.big_text {
.remove .grey {
color: #999999;
cursor: default;
- text-shadow: 0 2px white; }
+ text-shadow: 0 1px white; }
.aspect ul.dropzone,
.requests ul.dropzone,
.remove ul.dropzone {
@@ -678,10 +693,11 @@ ul#settings_nav {
marign: 0;
font-size: larger; }
ul#settings_nav > li a {
+ font-size: smaller;
display: block;
height: 100%;
border-bottom: 1px solid #eeeeee;
- padding: 5px 0; }
+ padding: 2px; }
.settings_pane {
display: none; }
@@ -689,53 +705,16 @@ ul#settings_nav {
#fancybox-close:hover {
background-color: transparent; }
-.aspect_tag,
-.public_aspect_tag {
- position: absolute;
- top: 15px;
- right: 2em;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- font-size: smaller;
- padding: 0 6px;
- color: #999999;
- text-shadow: 0 1px white;
- border-bottom: 1px solid #eeeeee;
- cursor: default; }
-
-.public_aspect_tag {
- background: -moz-linear-gradient(19% 75% 90deg, #fffa75, #fff8ba);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff8ba), to(#fffa75));
- background-color: #fffc7f;
- border-top: 1px solid #ebe66c; }
-
-.aspect_tag {
- background: -moz-linear-gradient(19% 75% 90deg, #e0e0e0, #f0f0f0);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#e0e0e0));
- background-color: #eeeeee;
- color: #999999;
- text-shadow: 0 1px white;
- border-top: 1px solid #dddddd; }
- .aspect_tag ul {
- display: inline;
- margin: 0;
- padding: 0;
- list-style: none; }
- .aspect_tag ul li {
- display: inline-block;
- margin-right: 2px;
- padding-right: 4px;
- border-right: 1px solid #cccccc; }
- .aspect_tag ul li:last-child {
- margin-right: 0;
- padding-right: 0;
- border-right: none; }
-
#friend_pictures {
line-height: 1em; }
#friend_pictures img {
- margin-right: -1px; }
+ margin-right: -1px;
+ width: 35px;
+ height: 35px; }
#thumbnails {
line-height: 14px; }
+
+#aspect_list {
+ margin: 0;
+ padding: 0; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index e50888c9d..a35c9dfd3 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -15,28 +15,18 @@ body
:padding 2em
:margin 0
a
- :color #556270
:color #107FC9
- :color #019DBE
:text
:decoration none
&:hover
- :color #fff
- :background
- :color #556270
- :color #019DBE
+ :color #22AAE0
-h1
- :font
- :size 21px
- :weight bold
- :line
- :height 36px
+h1, h2, h3, h4
+ :color #444
h3
:font
:size 18px
- :weight bold
.avatar
:width 50px
@@ -158,12 +148,10 @@ header
:padding 20px 0
h1
- :margin
- :bottom 0
- :text-shadow 0 2px 0 #fff
+ :text-shadow 0 1px 0 #fff
a
- :color #111
+ :color #444
&:hover
:background none
:color #999
@@ -171,9 +159,7 @@ header
.page_title
:text
:transform uppercase
- :shadow 0 2px 0 #fff
- :margin
- :top -5px
+ :shadow 0 1px 0 #fff
ul#stream
@@ -187,14 +173,10 @@ ul#stream
:bottom 1px solid #eee
&:hover
- :background -webkit-gradient(linear, 0% 0%, 0% 50%, from(#FAFAFA), to(#FCFCFC))
-
:background
:color #fafafa
-
:border
:bottom 1px solid #ddd
-
.destroy_link
:display inline
@@ -203,10 +185,10 @@ ul#stream
li.message
:position relative
- :line-height 140%
+ :line-height 19px
:font
- :family 'Lucida Grande', sans-serif
- :color #999
+ :family 'Arial', 'Helvetica', sans-serif
+ :color #777
.avatar
:float left
@@ -217,24 +199,58 @@ li.message
:background #eee
.content
+ :max-width 610px
+ :margin
+ :top -4px
:padding
:left 65px
- :width 600px
- span.from
- :color #000
+ .from
:font
- :weight normal
- :font
- :size 110%
+ :family 'Helvetica neue', Arial, Helvetica, sans-serif
+ :text
+ :shadow 0 1px #fff
+
+ .aspect
+ :display inline
+ :color #bbb
+ :font
+ :size 12px
+ a
+ :font
+ :weight normal
+ :color #bbb
+
+ &:hover
+ :text
+ :decoration underline
+
+ a
+ :font
+ :weight bold
+
+ :color #444
+ :font
+ :weight normal
+ :size 14px
div.info
- :color #bababa
- :font-size 70%
-
+ :color #eee
+ :font-size 11px
+ a
+ :color #ccc
.time
a
- :color #666
+ :color #bbb
+ :font
+ :weight bold
+ :margin
+ :right 5px
+
+ &:hover
+ div.info, .time
+ a
+ :color #107FC9
.reshare_pane
:margin
@@ -338,8 +354,8 @@ form
:display none
.avatar
- :width 30px
- :height 30px
+ :width 35px
+ :height 35px
:margin
:right 10px
@@ -354,7 +370,7 @@ ul.comment_set
:top 1em
:padding 0
:list-style none
- :width 495px
+ :max-width 610px
textarea
:width 100%
@@ -368,13 +384,26 @@ ul.comment_set
:border
:bottom 1px solid #ddd
- .from
+ .content
+ :color #777
+ :margin
+ :top -2px
+ :padding
+ :left 45px
+ .from
+ a
+ :color #444
:font
- :size 1em
+ :size 12px
- div.time
- :color #666
- :font-size 70%
+ :line
+ :height 18px
+
+ div.time
+ :color #bbb
+ :font
+ :size 11px
+ :weight bold
form
:margin
@@ -416,10 +445,12 @@ ul.comment_set
a
:padding 3px
-.destroy_link, .request_button
+li.message .from .destroy_link
+ :display none
:position absolute
- :right 2em
- :bottom 15px
+ :right 0
+ :font
+ :size 12px
a
:color #999
:font
@@ -427,11 +458,6 @@ ul.comment_set
&:hover
:text
:decoration underline
- :background none
-
-.destroy_link
- :display none
- :font-size smaller
.request_buttons
:position absolute
@@ -471,7 +497,7 @@ input[type='text'],
input[type='password'],
textarea
:font
- :family 'lucida grande', 'lucida sans', 'sans-serif'
+ :family 'Arial', 'Helvetica', sans-serif
:size 14px
:padding 0.3em
:display block
@@ -499,12 +525,15 @@ form p
:margin 0
label
+ :font
+ :family 'Arial', 'Helvetica', sans-serif
+ :weight normal
:color #999
:position absolute
:top 3px
:left 0.48em
- :font
- :weight normal
+ :text
+ :shadow 0 1px 1px #eee
#publisher
:color #999
@@ -676,6 +705,8 @@ h1.big_text
:top 8px
:bottom 1px
+ :font
+ :family 'Arial', 'Helvetica', sans-serif
#aspect_manage_button
:display inline
@@ -697,15 +728,9 @@ h1.big_text
:right 2px
a
- :text-shadow 0 2px 0 #444
- :-webkit-border-radius 3px 3px 0 0
- :-moz-border-radius 3px 3px 0 0
+ :text-shadow 0 1px 0 #444
:line
:height 22px
- :background
- :color #444
-
- :border 1px solid #555
:padding 3px 8px
:bottom 3px
@@ -717,10 +742,13 @@ h1.big_text
:color #ccc
&.selected a
+ :-webkit-border-radius 5px 5px 0 0
+ :-moz-border-radius 5px 5px 0 0
+
:-webkit-box-shadow 0px -4px 6px -2px #777
:-moz-box-shadow 0px -4px 6px -2px #777
- :text-shadow 0 2px 0 #fff
+ :text-shadow 0 1px 0 #fff
:padding
:top 4px
:bottom 5px
@@ -736,7 +764,7 @@ h1.big_text
:border 1px solid #fff
:bottom 1px solid #F7F7F7
- :color #000
+ :color #444
&:hover
:background
:color #efefef
@@ -776,7 +804,7 @@ h1.big_text
:list
:style none
- h1
+ h3
:display inline-block
.tip
@@ -795,7 +823,7 @@ h1.big_text
ul.tools
:position absolute
- :top 10px
+ :top 5px
:right 0
:display inline
:padding 0
@@ -814,7 +842,7 @@ h1.big_text
.grey
:color #999
:cursor default
- :text-shadow 0 2px #fff
+ :text-shadow 0 1px #fff
ul.dropzone
:min-height 20px
@@ -868,13 +896,14 @@ ul#settings_nav
:size larger
> li
-
a
+ :font
+ :size smaller
:display block
:height 100%
:border
:bottom 1px solid #eee
- :padding 5px 0
+ :padding 2px
.settings_pane
@@ -885,75 +914,17 @@ ul#settings_nav
:background
:color transparent
-.aspect_tag,
-.public_aspect_tag
- :position absolute
- :top 15px
- :right 2em
-
- :border-radius 5px
- :-webkit-border-radius 5px
- :-moz-border-radius 5px
-
- :font
- :size smaller
- :padding 0 6px
-
- :color #999
- :text
- :shadow 0 1px #fff
-
- :border
- :bottom 1px solid #eee
-
- :cursor default
-
-.public_aspect_tag
- :background -moz-linear-gradient(19% 75% 90deg,#FFFA75, #FFF8BA)
- :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF8BA), to(#FFFA75))
- :color #FFFC7F
- :border
- :top 1px solid #EBE66C
-
-.aspect_tag
- :background -moz-linear-gradient(19% 75% 90deg,#E0E0E0, #F0F0F0)
- :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#E0E0E0))
- :color #eee
- :color #999
- :text
- :shadow 0 1px #fff
- :border
- :top 1px solid #ddd
-
- ul
- :display inline
- :margin 0
- :padding 0
- :list
- :style none
-
- li
- :display inline-block
- :margin
- :right 2px
- :padding
- :right 4px
- :border
- :right 1px solid #ccc
-
- &:last-child
- :margin
- :right 0
- :padding
- :right 0
- :border
- :right none
-
#friend_pictures
:line-height 1em
img
:margin-right -1px
+ :width 35px
+ :height 35px
#thumbnails
:line-height 14px
+
+#aspect_list
+ :margin 0
+ :padding 0