body { margin:0; padding:0; background:#F9F9F9 url(/css/backgrounds/dot/ddd.gif) repeat fixed; font-size:12px; font-family:Arial, Helvetica, sans-serif; }
a { color:#999; text-decoration:none; }
a:hover, .months a:hover { color:#F33; }
::selection, ::-moz-selection {
background:#f8f7b0;
}
/*mono font*/
header .logo span, .mono, #nav, header { font-family: botanika-mono-web, sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase; }
/*serif font */
.fruit { font-family: arvo, sans-serif; font-style: normal; font-weight: 400; }
/*box shadow */
header .logo, header .box, .fruit .current .entry { background-color:#FFF; -moz-box-shadow: 10px 10px 0 rgba(204, 204, 204, 0.15); -webkit-box-shadow: 10px 10px 0 rgba(204, 204, 204, 0.15); box-shadow: 10px 10px 0 rgba(204, 204, 204, 0.15); }
header { position:fixed; top:0; left:0; z-index:100; width:170px; }
header .logo { width:150px; height:150px; border-right:2px solid #CCC; border-bottom:2px solid #CCC; display:block; color:#CCC; }
header .logo:hover { border-color:#F33; }
header .logo span.wrap { display:block; height:100px; width:100px; position:absolute; top:35px; left:30px; }
header .logo span.title { font-size: 30px; line-height:30px }
header .logo span.bybugsy { font-size:14px; }
header .logo span.est { font-size:12px; text-transform:none; }
header .box { width:150px; border-right:2px solid #CCC; border-bottom:2px solid #CCC; display:block; margin:40px 0 0 0; position:relative; text-transform:uppercase; }

.box.calendar { font-size:12px; color:#DDD; padding:10px 0; }

table.calendar { margin:0 0 0 10px; }
table.calendar td { text-align:center; }
table.calendar .calendar-month { color:#999; }
table.calendar .calendar-prev { padding-right:15px; }
table.calendar .calendar-next { padding-left:15px; }
table.calendar .active a { color:#F33; }
table.calendar span.off { visibility:hidden; }

#nav { list-style:none; padding:12px 0 12px 12px; margin:0; }
#nav li { padding:2px 0; margin:2px 0; }

.fruit { width:600px; position:absolute; top:175px; left:280px; font-size:16px; }
.fruit .theDfBox { color:#666; margin:2x 0; padding:16px 0; }
.fruit .entry, .fruit .entry:hover, .fruit time, .fruit time:hover { cursor:pointer; }
.fruit .entry { position:relative; width:450px; margin:0 0 0 0; padding:5px 10px 5px 20px; border-left:2px solid transparent; }
.fruit .active .entry { border-left:2px solid #F33; }
.fruit .theDfBox time { display:none; position:absolute; width:95px; text-align:right; font-size:14px; top:50%; left:-115px; line-height:0px; }
.fruit .theDfBox.active time, .fruit .theDfBox.current time, .fruit .theDfBox .entry:hover time { display:block; }
.fruit .theDfBox.active time:hover { color:#F33; }
.fruit .entry p:nth-child(2) {
margin-top: 5px;
}
.fruit .entry p:last-child { margin-bottom: 5px; }
.fruit .prev { color:#DDD; }
.fruit .active { color:#333; }
.fruit .current { color:#F33; font-size:24px; }

.months { float:left; width:95px; color:#DDD; }
.months ul { padding:0; list-style:none; }
.months a, .months h3 { color:#666; }

.archive .fruit { position:absolute; top:20px; left:200px; padding-bottom:150px; }
.archive table h2 { margin:0 0 20px 0; font-size:20px; }
.archive table h2 strong { color:#F33; }
.archive table.months { color:#CCC; }
.archive table.months th { font-size:18px; color:#999; }
.archive table.months tr.monthRow th { padding-bottom:20px; }
.archive table.months tr.yearRow th { padding-right:20px; }
.archive table.months th.active { color:#F33; }
.archive table.months a { color:white; display:block; padding:10px 18px; }
.archive table.months a span { visibility:hidden; }
.archive table.months td { text-align:center; }
.archive table.months td a:hover { color:white; }

.colorGuide h5 { margin:3px 0; }
.colorGuide ul { list-style:none; margin:0; padding:0; width:80px; }
.colorGuide ul li { height:10px; position:relative; }
.colorGuide ul li span { display:none; }
.colorGuide ul li.active .line, .colorGuide ul li:hover .line { display:block; position:absolute; top:5px; left:-12px; height:1px; width:100px; background-color:black; }
.colorGuide ul li.active .dot, .colorGuide ul li:hover .dot { color: black; font-size: 29px; position: absolute; left: -3px; display: block; line-height: 2px; }

table.months {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}