/* 
A Message To You, Rudy | CSS production notes
Author: Andy Clarke 
URL: http://www.stuffandnonsense.co.uk 
Date: December 2006 
Shameless plug: http://www.transcendingcss.com
*/

/* (1) */

ol#notes {
width : 320px; 
height : 320px;
background : url(/images/bg-notes.png) repeat; 
border : 1px solid #333; 
border-bottom-width : 2px; 
color : #000; 
overflow : auto; }

ol#notes blockquote { 
font-size: 11px;
min-height: 60px;
margin : .5em; 
padding : .5em; 
background-color : #fff;
border : 1px solid #666; }

ol#notes blockquote:before { 
content : " "attr(cite)" said: "; 
margin-left : 0; 
font-weight : bold; }

ol#notes p { 
font-size: 11px; 
margin : 0;
padding : .15em; }

ol#notes p q:before { 
content : " "attr(cite)" said: '..."; 
margin-left : 0; 
font-weight : normal;
font-style : italic; }
ol#notes p q:after { 
content : " ' "; }

ol#notes p.date { 
padding-left: 50px; 
font-size : 10px;
color : #666; 
text-transform : uppercase; }

/* (2) */

/* add a :hover state */
ol#notes blockquote:hover { 
background-color : #faf8eb; 
border-top : 1px solid #fff; 
border-bottom : 1px solid #333; }

/* highlight the most recent comment */
ol#notes li:last-child blockquote { 
background-color : #FFF8BF; }

/* style all first paragraphs in a blockquote with a cite attribute */
ol#notes blockquote[cite] p:first-child {
min-height : 34px;
padding-left : 50px; }

/* add background images */
ol#notes blockquote[cite="Miriam"] p:first-child { background : url(/images/av-miriam.jpg) no-repeat 5px 5px; }
ol#notes blockquote[cite="Bryan"] p:first-child { background : url(/images/av-bryan.jpg) no-repeat 5px 5px; }
ol#notes blockquote[cite="Dave"] p:first-child { background : url(/images/av-dave.jpg) no-repeat 5px 5px; }
ol#notes blockquote[cite="Gene"] p:first-child { background : url(/images/av-gene.jpg) no-repeat 5px 5px; }

/* add styling for job titles */
ol#notes blockquote.designer { border-color : #600; }
ol#notes blockquote.developer { border-color : #036; }
/* (3) */
ol#notes { position : absolute; 
opacity : .25;
z-index : 2000;  
top : -315px; 
left : 500px; }

ol#notes:hover, ol#notes:focus {
top : 0; 
opacity : 1; }