/* NOTE: If you adjust this stylesheet and want to keep vertical rhythm, you must follow the below rules for baseline calculations. This stylesheet uses blueprint framework. In order to keep semantic class names It is best to recompile with the compress.rb script included with blueprint. Semantic class name settings are in the settings.yml file included with source Baseline calculations Desired font-size in px/16px = % value Font-size in px from previous equation * 1.5 = New Baseline Make all images and box heights a multiple of the New Baseline for more information about calculating margins, borders and padding, see one of the below links: http://24ways.org/2006/compose-to-a-vertical-rhythm http://www.alistapart.com/articles/settingtypeontheweb NOTE: for the profile/author image 366 px high makes sense, allows for the 275 wide when the image is a standard iPhone or 4x6 shot 1200x1600 or 1600x1200 depending on the orientation. Either way, that's a 4:3 ratio. this equals, with margins, for profile photos to be 260px x 347px (medium) thumbnails to be 110px x 147px large images to be 600px x 800px and medium to be 310px x 313px or 300px x 400px */ /* Custom semantic styles generated from settings.yml by compress.rb WARNING: DO NOT EDIT THESE STYLES DIRECTLY !!! Make changes in settings.yml and generated a new screen.css using compress.rb from the Blueprint CSS distro and then copy the custom styles here (should probably use @import to include these or do via php delivering css to make the process of changing these styles and incorporating the changes easier) */ #author-archive { width:950px;margin:0 auto; background:url(src/grid.png); display:block; } #author-header { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:950px;margin-right:0; margin-top:1.5em; } #author-profile { float:left;margin-right:10px; width:630px; padding-right:4px;margin-right:5px;border-right:1px solid #eee; margin-bottom:1.5em; } #author-profile-box { float:left;margin-right:10px; width:630px; } #author-photo { float:left;margin-right:10px; width:270px; } #author-meta { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:350px; } #adspace-1 { margin-right:0;padding-right:10; float:left;margin-right:10px; margin-right:0; width:300px; } .feature-post { float:left;margin-right:10px; width:950px;margin-right:0; margin-top:1.5em; clear:both; } .outfits-section { float:left;margin-right:10px; width:630px; padding-right:4px;margin-right:5px;border-right:1px solid #eee; } .feature-post-info { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:630px; margin-bottom:1.5em; clear:both; } .author-thumbnail { float:left;margin-right:10px; width:70px; } .feature-meta { float:left;margin-right:10px; width:430px; } .must-have { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:110px; } .feature-content { clear:both; } .feature-outfits { float:left;margin-right:10px; width:630px; clear:both; } .outfit { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:630px; clear:both; } .outfit-image { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:630px; clear:both; } .adspace-2 { margin-right:0;padding-right:0; /* float:left; */ float: right; margin-right:10px; margin-right:0; width:300px; } .picks { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; /* width:950px; */ margin-right:0; /* clear:both; */ clear: left; } .pick { float:left;margin-right:10px; width:310px; max-height:470px; min-height:470px; overflow:hidden;} .pick-image { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:310px; } .comment-info { clear:both; } .post-footer { clear:both; } .adspace-3 { float:left;margin-right:10px; width:750px; clear:both; } .adspace-4 { margin-right:0;padding-right:0; float:left;margin-right:10px; margin-right:0; width:190px; } /* END SEMANTIC STYLES GENERATED FROM settings.yml */ /* START OF EDITABLE CUSTOM STYLES SECTION */ /* Setup entire author archive area base styles */ #author-archive { font-size: 12px; font-weight: 200;} #author-archive, #author-archive p, #author-archive dl, #author-archive dt, #author-archive dd, #author-archive ul, #author-archive li { font-family: 'HelveticaNeue','Helvetica Neue', Arial, Helvetica,sans-serif; } #author-archive h1, #author-archive h2, #author-archive h3, #author-archive h4, #author-archive h5 { font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue', Arial, Helvetica,sans-serif; } #author-archive h2 {font-size: 3.2em; display: block; line-height:1em; margin-bottom:0px} #author-archive h3 {font-size: 2.5em; line-height: 24px; font-weight: 200;} #author-archive h4 {font-size: 2em;} #author-archive h5 {font-size: 1.5 em;} .outfit-title dt, .outfit-title dd { font-size: 20px; } .comment-info { font-size: 20px; } #author-archive a { text-decoration: none; color: #1496ff; } #author-archive a:hover { color: #aaaaaa; text-decoration: underline; } #author-archive a:link, #author-archive a:visited { color: #007eff;} #author-archive a:active { color: #aaaaaa; } /* Author profile area */ #author-photo {max-height: 347px; overflow: hidden; margin-bottom:5px;} #author-photo img { width: 260px; margin:5px; border: solid 1px #aaa; } #author-profile { border-right: 1px solid #aaa;} #author-profile-box{ border-top: solid 1px #aaa; border-bottom: solid 1px #aaa ; border-left: solid 1px #aaa; border-right: 1px solid #aaa; width: 620px;} #author-meta { width: 340px; } #author-meta dl { margin-top: -.6em; } #author-meta dt, #author-meta dd { display: inline;} #author-meta dt { } #author-meta dd {margin-left: .1em;} #author-meta ul { list-style: none; display: inline; margin-left: .1em;} #author-meta li { display:inline; margin-left: 0; border-left: .1em solid #000; padding-left:.5em; margin-right:.2em;} #author-meta li.first { border-left: none; padding-left: 0; } #locals-link { float: right; margin-right: .5em; font-size: 16px; } #adspace-1, .adspace-2 { text-align: right; } /* outfits area */ .outfits-section { border-right: 1px solid #aaa; } .author-thumbnail img{ max-width: 110px; margin-left: 5px; border: 1px solid #aaa; max-height: 147px;} div.feature-content { margin-left: 5px; margin-right: 5px; /* text-indent: 2.5em; */ font-size:14px;} .post-title, .outfits-title, .outfit-title { margin-left: 5px; } .outfits-title { border-bottom: 1px solid #aaa; padding-bottom: .2em; margin-right:20px;} dl.outfit-title, dl.outfit-title dt, .outfit-title dd { display: inline; margin-left: .1em; } /* Must have thumb */ .must-have-pick-image-container { position: relative; text-align: center; } .must-have-pick-image { max-width: 110px; max-height: 147px; margin: auto; margin-left:10px;} .must-have-small-overlay { position: absolute; top: 2px; left: 2px; } .outfit-1 { margin-top: -1.5em; } .outfit { margin-bottom: 2em; } .outfit-image { position: relative; } .outfit-image img {max-width: 600px; max-height: 800px; margin-left: 5px; margin-top: 1em; border: 1px solid #aaa; float: left;} .outfit-overlay /*{ position: absolute; bottom: 10px; max-width: 580px;} */ { float:left; max-width: 580px; z-index:150;} .outfit-whyworks { margin: 20px; padding: 5px; } .outfit-whyworks dt, .outfit-whyworks dd { display: inline; margin-left: .1em; } .outfit-whyworks dt, .outfit-items dt { color: black; font-size: 12px;} .outfit-items { margin: 20px; list-style: none; padding: 5px;} .outfit-items li, .outfit-items dl, .outfit-items dt, .outfit-items dd { display: inline; } .outfit-items li { border-left: 1px solid #000; margin-left: .5em; padding-left: .5em; } .outfit-items li.first {border-left: none; margin-left: 0; padding-left: 0; } .outfit-items dd { margin-left: .1em; } /* transparency hacks */ .outfit-whyworks, .outfit-items { color: black; background-color: white; /* for IE */ filter:alpha(opacity=75); /* CSS3 standard */ opacity:0.75; } /* Picks Section */ .picks { margin-top: 1em; } .picks-title { margin-left: 5px; } .pick-title { border-bottom: 1px solid #aaa; text-align: right; margin-right: 1em; margin-left: 5px; padding-bottom: .3em; font-size: 1.8em;} .pick { margin-bottom: 1.5em ; text-align: center; } .pick img { max-width: 300px; max-height: 400px; margin: auto; } .picks .must-have { position: relative;} .picks .must-have-big-overlay { position: absolute; top: 5px; left: 5px; margin-top: 5px; } /* city based archives */ .portfolio-image-wrapper img {height: 500px; } .portfolio-image-wrapper {width: 310px; max-height: 300px; overflow: hidden; margin-bottom:10px;} /*CHIS TYPE STYLES */ dl {font-size:12px; font-weight:500;} #author-style {font-weight:200; font-size:20px; margin-top:10px} #author-name {font-size: 24px; font-weight:200; margin-top:3px;} #author-mantra, #author-city, #author-style-icons {font-size: 15px; line-height:1.25em;} #locals-link {font-size: 20px;} .post-title {font-weight:200;} .feature-meta {font-size: 18px; margin-left:0px; margin-right:60px; margin-top:0px; width:380px} .feature-post-info .outfits-title {font-size:16px; font-weight:200;} .author-thumbnail img {width:75px;} .author-thumbnail {margin-right:15px; width:75px} dd {font-weight:200} dl { font-weight:normal}