#logcal {
position: relative;
width: 632px;
height: 100px;
border: solid 1px #040 ;
font-size: 7pt;
margin: 1em 0px 1em 0px;
cursor: pointer;
}

#logcal .selected {
background: #ff8;
}

#logcal .ui-boxscroller-left, #logcal .ui-boxscroller-right {
width: 16px;
height: 100px;

position: absolute;
background: #040;
color: white;
}
#logcal .nav {
height:100px;
width: 16px;
background: #040;
color: white;
border: none;
}


#logcal .ui-boxscroller-left {
left: 0px;
}
#logcal .ui-boxscroller-right {
left: 616px;
}

.ui-boxscroller-panel {
position: absolute;
overflow: hidden;
width: 600px;
height: 100px;
left: 16px;
}

.ui-boxscroller-content {
position: absolute;
left: 0px;
}

.ui-boxscroller-content div {
border-left: solid 1px #ccc;
position: absolute;
display: block;
}

#logcal h1 {
font-size: 10pt;
background: #6c6;
padding: 0;
margin: 0;
}
#logcal .selected h1 {
background: #cc6;
}

dt {
font-weight: bold;
display: inline;
}

dd {
display: inline;
}


/** Shape log */
table.shapelog {
border-collapse: collapse;
}
table.shapelog thead th {
text-align: center;
}
table.shapelog tbody th {
}
table.shapelog tbody td.mental {
}
table.shapelog tbody th.physical {
padding-left: 5em;
}

table.shapelog tbody th img {
display: block;
margin: auto;
padding-top: 1em;
}

table.shapelog td.buttons {
text-align: right;
vertical-align: bottom;
}

table.shapelog select {
background: #ff8;
}
table.shapelog option {
background: #fff;
}


/* Shape icons */
.shape-big-icon {
display: block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
text-indent: -5000px;
margin: .5em auto auto auto;
}



.shape-icons-box {
display: block;
}

.shape-small-icon {
display: -moz-inline-box;
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
}


.shape-big-clarity { background-image: url(/media/diary/img/shape/clarity-40.gif); }
.shape-big-temper { background-image: url(/media/diary/img/shape/temper-40.gif); }
.shape-big-hunger { background-image: url(/media/diary/img/shape/hunger-40.gif); }
.shape-big-happiness { background-image: url(/media/diary/img/shape/happiness-40.gif); }
.shape-big-health { background-image: url(/media/diary/img/shape/health-40.gif); }
.shape-big-energy { background-image: url(/media/diary/img/shape/energy-40.gif); }
.shape-big-stress { background-image: url(/media/diary/img/shape/stress-40.gif); }

.shape-small-clarity { background-image: url(/media/diary/img/shape/clarity-20.gif); }
.shape-small-temper { background-image: url(/media/diary/img/shape/temper-20.gif); }
.shape-small-hunger { background-image: url(/media/diary/img/shape/hunger-20.gif); }
.shape-small-happiness { background-image: url(/media/diary/img/shape/happiness-20.gif); }
.shape-small-health { background-image: url(/media/diary/img/shape/health-20.gif); }
.shape-small-energy { background-image: url(/media/diary/img/shape/energy-20.gif); }
.shape-small-stress { background-image: url(/media/diary/img/shape/stress-20.gif); }


.shape-big-0 { background-position: 0px 0px; }
.shape-big-1 { background-position: -40px 0px; }
.shape-big-2 { background-position: -80px 0px; }
.shape-big-3 { background-position: -120px 0px; }
.shape-big-4 { background-position: -160px 0px; }

.shape-small-0 { background-position: 0px 0px; }
.shape-small-1 { background-position: -20px 0px; }
.shape-small-2 { background-position: -40px 0px; }
.shape-small-3 { background-position: -60px 0px; }
.shape-small-4 { background-position: -80px 0px; }

/* Food log */
.fl_description {
padding-right: 1em;
}

.fl_kcal, .fl_weight {
text-align: right;
padding-left: 1em;
}

/* Shape legend */
table.shapelegendbox label {
padding-right: 2em;
}

div.shapelegend {
display: block;
width: 30px;
height: 8px;
background: url(/media/diary/img/shape-legend.png) no-repeat;
}
div.shapelegend_happiness { background-position: 0px -56px; }
div.shapelegend_overall { background-position: 0px -32px; }
div.shapelegend_temper { background-position: 0px 0px; }
div.shapelegend_clarity { background-position: 0px -24px; }
div.shapelegend_energy { background-position: 0px -8px; }
div.shapelegend_hunger { background-position: 0px -48px; }
div.shapelegend_health { background-position: 0px -40px; }
div.shapelegend_stress { background-position: 0px -16px; }