/* Full Cream Milk Style Sheet */

/* last update: 25 April 2008 */

/* copyright 2008 Full Cream Milk */

body {
   font : normal small "Corbel", "Myriad Pro", Tahoma, "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
   line-height : 140%;
   color : #000;
   background : #ca9865;
}

a:link, a:visited {
   text-decoration : none;
   color : #ac5225;
}

a:hover, a:focus, a:active {
   text-decoration : underline;
   color : #db6f26;
}

a.book {
   font-style : italic;
}

a.more {
   padding-left : 20px;
   background : transparent url(/i/more.png) no-repeat 0 50%;
}

abbr {
   cursor : help;
}

.package #secondary dl {
   margin-top : 1em;
}

#full-width dl {
   float : left;
   width : 177px;
   margin-right : 48px;
}

#full-width dl.last-dl {
   margin-right : 0;
}

dt {
   font-size : 125%;
   font-weight : bold;
}

dd em {
   font-style : italic;
   font-size : 125%;
}

em {
   font-weight : bold;
   font-style : normal;
}

h1, h2, h3, h4 {
   font : normal small "Myriad Pro", Corbel, Tahoma, "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
   font-weight : normal;
   margin-bottom : 0.25em;
   color : #7a6640;
}

h1 {
   font-size : 167%;
}

h2 {
   font-size : 167%;
}

h2#comments {
   padding-top : 48px;
   background : #fff url(/i/divider.png) no-repeat 50% 0;
}

#tertiary h3 {
   clear : both;
}

h3 {
   font-size : 140%;
   margin-bottom : 0.33em;
}

img.portrait, img.screenshot, img.img {
   border : 1px solid #999;
   padding : 3px;
   background : #fff;
}

img.img {
   margin : 0 24px 12px 0;
   float : left;
}

img.first {
   margin-right : 48px;
}

img.screenshot+p {
   margin-top : 12px;
}

li {
   margin-bottom : 0.5em;
}

ol, p, ul {
   margin-bottom : 1em;
}

.hentry ol {
   margin-left : 16px;
   list-style-type : decimal;
}

.compact li {
   margin-bottom : 0.25em;
}

p.clear {
   clear : both;
}

p.cmt-exp {
   padding-top : 48px;
   background : #fff url(/i/divider.png) no-repeat 50% 0;
}

p.feed {
   padding-left : 20px;
   background : #fff url(/i/feed.png) no-repeat 0 50%;
}

ul {
   margin-left : 14px;
   list-style-type : disc;
   clear : both;
}

ul.shots {
   list-style : none;
   margin-left : 0;
   float : left;
}

ul.shots li {
   float : left;
   margin-bottom : 24px;
}

/* ============ vcard ============ */

.vcard {
}

.vcard span {
}

.vcard p {
   margin : 0;
}

.vcard ul {
   margin : 0;
}

.vcard em {
   display : block;
}

.vcard li {
   float : left;
   list-style-type : none;
   border-right : 1px solid #fff;
   padding : 0 0.5em;
   margin : 0;
}

.vcard ul li:first-child {
   padding-left : 0;
}

.vcard ul li:last-child {
   border-right-width : 0;
}

p.vcard {
   padding-top : 0;
}

p#copy, p#ee { 
   clear : both;
   margin-bottom : 0;
}

ul.contact-list, ul.project-list {
   margin-left : 0;
   list-style : none;
}

li.tel-li {
   padding-left : 20px;
   background : transparent url(/i/tel.gif) no-repeat 0 50%;
}

li.email-li {
   padding-left : 20px;
   background : transparent url(/i/email.gif) no-repeat 0 50%;
}

/* ============ main columns ============ */

#primary, #secondary {
   width : 402px;
   float : left;
   padding : 24px 0;
}

.wide #primary, .wide #secondary, .wide #tertiary {
   padding-top : 0;
}

#secondary, #tertiary {
   float : right;
}

.section #secondary {
   float : left;
   margin-left : 48px;
   width : 177px;
}

#tertiary {
   width : 177px;
   padding : 24px 0;
}

.extras {
   padding-right : 60px;
}

.bluetop .extras {
   background : transparent url(/i/blue-top.png) no-repeat 100% 100%;
}

.redtop .extras {
   background : transparent url(/i/red-top.png) no-repeat 100% 100%;
}

.silvertop .extras {
   background : transparent url(/i/silver-top.png) no-repeat 100% 100%;
}

.goldtop .extras {
   background : transparent url(/i/gold-top.png) no-repeat 100% 100%;
}

/* ============ generic container for grid ============ */

.container {
   width : 852px;
   margin : 0 auto;
   display : block;
   position : relative;
}

#nav .container {
   height : 96px;
}

/* ============ page sections ============ */

#masthead {
   width : 100%;
   height : 170px;
   background : #fefdf2;
   border-bottom : 1px solid #fff6c2;
   border-top : 4px solid #7a6640;
}

#masthead a {
   display : block;
   width : 243px;
   height : 106px;
}

#masthead h1, #masthead p {
   padding-top : 32px;
   width : 243px;
   height : 106px;
   position : relative;
   z-index : 2;
}

#content {
   width : 100%;
   float : left;
   background : #fff;
}

#lede {
   padding-top : 24px;
   background : #fff url(/i/divider.png) no-repeat 50% 100%;
}

#full-width {
   clear : both;
   float : left;
   width : 852px;
   border-top : 1px solid #e0dcc1;
   border-bottom : 1px solid #e0dcc1;
   padding : 24px 0;
}

#content-supp {
   clear : both;
   float : left;
   background : #ede6af;
   border-top : 1px solid #c4bb86;
   width : 100%;
}

#supp-one, #supp-two, #supp-three, #supp-four {
   float : left;
   width : 177px;
   padding : 24px 0;
   margin-right : 48px;
}

#supp-four {
   margin-right : 0;
}

#supp-three.double {
   width : 402px;
   margin-right : 0;
}

#content-supp a {
   color : #c32f32;
}

#content-supp h3 a {
   color : #7a6640;
}

#content-supp li {
   line-height : 115%;
}

.offscreen {
   display : block;
   font-size : 0;
   line-height : 0;
   height : 0;
   text-indent : -10000em;
}

p.intro {
   font-size : 133%;
   line-height : 140%;
   padding-bottom : 48px;
   background : #fff url(/i/divider.png) no-repeat 50% 100%;
}

#lede p.intro {
   width : 627px;
   background-image : none;
   background-color : transparent;
}

ol.hfeed p {
   line-height : 125%;
}

h3.price {
   width : 100px;
   height : 101px;
   position : absolute;
   top : 12px;
   right : -24px;
}   

h3#bluetop-price {
   background : transparent url(/i/blue-price.png) no-repeat 0 0;
}

h3#redtop-price {
   background : transparent url(/i/red-price.png) no-repeat 0 0;
}

h3#silvertop-price {
   background : transparent url(/i/silver-price.png) no-repeat 0 0;
}

h3#goldtop-price {
   background : transparent url(/i/gold-price.png) no-repeat 0 0;
}

h3.price+ul li:first-child {
   margin-right : 80px;
}

ul#showcase {
   list-style : none;
   margin-left : 0;
}

ul#showcase li {
   position : relative;
   margin-bottom : 24px;
}

ul#showcase img {
   position : absolute;
   top : 0;
   left : 0;
   background : #fff;
   padding : 2px;
   border : 1px solid #999;
}

ul#showcase h2 {
   font-size : 133%;
   margin-left : 112px;
}

ul#showcase p, ul#showcase h4 {
   margin-left : 112px;
}

ul#showcase h4 {
   font-size : 115%;
   margin-bottom : 0.33em;
}

#content-supp #showcase p {
   line-height : 1.4em;
}

/* ============ comments ============ */

.comment {
   line-height : 125%;
   border-top : 1px solid #e1ddc2;
   padding-top : 12px;
}

.comment.author {
   color : #7A6640;
}

h2#comments + div {
   border-top-width : 0;
   padding-top : 0;
}

.comment em {
   display : inline;
}

li.hentry {
   border-bottom : 1px solid #e1ddc2;
   padding-bottom : 0.5em;
}

li.hentry h3 {
   font-size : 125%;
}

#primary div.hentry {
   margin-bottom : 24px;
}

/* ============ home page specifics ============ */

.home #primary p, .home #primary ul {
   font-size : 133%;
   line-height : 140%;
}

.home #primary h2 {
   color : #db6f26;
}

.home #secondary h2 {
   margin-bottom : 24px;
}

ul.bottles {
   position : relative;
   margin : 0;
   float : left;
   list-style-type : none;
}

ul.bottles h3 {
   font-size : 133%;
   margin-bottom : 0;
}

ul.bottles li {
   padding-left : 60px;
   margin-bottom : 24px;
   min-height : 106px;
}

.home ul.bottles li {
   width : 117px;
   float : left;
   margin : 0 48px 24px 0;
   line-height : 133%;
}

.home ul.bottles li#blue-top, .home ul.bottles li#silver-top {
   margin : 0;
}

li#blue-top { 
   background : url(/i/blue-top.png) no-repeat 0 0;
}

li#blue-top h3 a {
   color : #0083b9;
}

li#red-top { 
   background : url(/i/red-top.png) no-repeat 0 0;
}

li#red-top h3 a {
   color : #c32f32;
}

li#silver-top { 
   background : url(/i/silver-top.png) no-repeat 0 0;
}

li#silver-top h3 a {
   color : #b9b0ac;
}

li#gold-top { 
   background : url(/i/gold-top.png) no-repeat 0 0;
}

/* ============ lastfm/flickr ============ */

#lastfmrecords li, #flickr li {
   float : left;
   margin-bottom : 5px;
   margin-right : 6px;
}

#lastfmrecords img, #flickr img {
   width : 75px;
   height : 75px;
   background : #fff;
   padding : 2px;
   border : 1px solid #999;
}

em.flickr {
   color : #0063dc;
   font-weight : normal;
}

em.flickr span {
   color : #ff0084;
}

/* ============ flickr ============ */

#flickr {
   list-style : none;
   margin-left : 0;
}

/* ============ footer ============ */

#footer {
   background : #ca9865;
   clear : both;
   position : relative;
   font-size : 90%;
   border-top : 1px solid #7a6640;
   color : #fff;
}

#footer .container {
   padding : 24px 0 48px;
}

#footer a:link, #footer a:visited {
   font-weight : bold;
   color : #fff;
}

p#self {
   position : absolute;
   top : 64px;
   right : 0;
   background : #ca9865 url(/i/footer-logo.png) no-repeat 50% 0;
   height : 48px;
   width : 44px;
}

p#self a {
   display : block;
   width : 44px;
   height : 48px;
}

/* ============ navigation ============ */

#nav {
   position : absolute;
   top : 0;
   left : 0;
   width : 100%;
   font : bold small "Myriad Pro", Corbel, Tahoma, "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
}

#nav h2, p#skip {
   text-indent : -10000em;
   font-size : 0;
   height : 0;
   line-height : 0;
   margin : 0;
}

#nav ul {
   position : absolute;
   right : 0;
   list-style-type : none;
   top : 0;
   margin : 0;
   font-size : 125%;
   text-transform : lowercase;
}

#nav ul li {
   margin : 0 0 0 24px;
   float : left;
}

#nav ul li:first-child {
   margin-left : 0;
}

#nav ul a {
   display : block;
   padding : 114px 0 4px;
   float : left;
   color : #ca9865;
   border-top : 4px solid #7a6640;
   border-bottom : 1px solid #fefdf2;
}

#nav ul li.selected a {
   color : #7a6640;
   text-transform : uppercase;
   border-top : 4px solid #7a6640;
   border-bottom : 1px solid #fefdf2;
   background : #fefdf2;
   font-weight : normal;
}

#nav ul a:hover, #nav ul a:focus, #nav ul a:active {
   text-decoration : none;
   color : #db6f26;
   border-top : 4px solid #ee9756;
   border-bottom : 1px solid #ee9756;
}