css
/*
CSS file for Battery capacity calculator (www.42unita.ru)
*/
#calc-body {
margin: 15px auto 0;
max-width: 640px;
border-radius: 5px;
box-shadow: 1px 2px 5px #e0e0e0;
}
div#calc-body { margin-left: 25px; }
#calc-body #calc-tabs { overflow: hidden; }
#calc-body h1, #calc-body h2 {
padding: 10px 15px;
background: #fff;
border: 1px solid #ff7720;
border-color: #ff7720 #ffa84b #ffb85b;
border-radius: 5px 5px 0 0;
border-bottom: none;
color: #ff7720;
text-align: left;
font: 20px Tahoma,sans-serif;
}
#calc-body h2 {display: none;}
#calc-body h1.tab, #calc-body h2.tab {
position: relative;
float: left;
width: 289px;
margin: 0 -15px 0 0;
border-bottom: 1px solid #ff7720;
border-color: #969696 #b8b8b8 #ffb85b;
box-shadow: -2px -2px 2px #f7f7f7 inset;
color: #ccc;
text-align: center;
cursor: pointer;
}
#calc-body h1.tab span, #calc-body h2.tab span {border-bottom: 1px dashed;}
#calc-body h2.tab {
display: block;
float: right;
margin: 0 0 0 -15px;
box-shadow: 2px -2px 2px #f7f7f7 inset;
}
#calc-body h1.tab.active, #calc-body h2.tab.active {
padding-bottom: 11px;
color: #ff7720;
border-color: #ff7720 #ffa84b #ffb85b;
border-bottom: none;
box-shadow: none;
cursor: default;
z-index: 10;
}
#calc-body h1.tab.active span, #calc-body h2.tab.active span {border-bottom: none;}
#calc-body div#calc-content {
/*clear: both;*/
padding: 10px 15px;
border: 1px solid #ff7720;
border-color: #ff7720 #ffa84b #ffb85b;
border-radius: 0 0 5px 5px;
border-top: none;
}
#calc-body form {
overflow: hidden;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px dashed #aaa;
}
#calc-body div.line {
overflow: hidden;
padding-bottom: 5px;
}
#calc-body div.line label {
float: left;
margin-top: 12px;
color: #555;
font: bold 13pt/10pt Tahoma;
}
#calc-body div.line input, #calc-body div.line select {
float: right;
margin: 0;
padding: 3px;
width: 57px;
text-align: right;
font: 13pt/15pt Tahoma;
border: 1px solid #ffaa20;
border-color: #ffaa20 #ffd84b #ffc85b;
border-radius: 2px;
box-shadow: inset 1px 2px 4px #eee;
}
#calc-body div.line input:hover, #calc-body div.line select:hover { border-color: #ffbb20 #ffe84b #ffd85b; }
#calc-body div.line select {
width: 65px;
text-align: left;
}
#calc-body div.line span {
color: #494;
font: bold 13pt/13pt Tahoma;
}
#calc-body .comment {
margin-bottom: 15px;
padding-bottom: 5px;
color: #333;
text-align: justify;
font: 8pt Arial;
border-bottom: 1px dotted #ddd;
}
#calc-body .comment i {font-weight: bold;}
#calc-body .comment.result {
margin-top: 5px;
padding: 5px 10px;
height: 50px;
font: 9pt/12pt Arial;
background: #eee;
background: -moz-linear-gradient(left, #fff 0%, #eee 1%, #eee 99%, #fff 100%);
background: -webkit-linear-gradient(left, #fff 0%, #eee 1%, #eee 99%, #fff 100%);
background: -o-linear-gradient(left, #fff 0%, #eee 1%, #eee 99%, #fff 100%);
background: -ms-linear-gradient(left, #fff 0%, #eee 1%, #eee 99%, #fff 100%);
background: linear-gradient(left, #fff 0%, #eee 1%, #eee 99%, #fff 100%);
border-top: 1px dotted #ddd;
overflow: auto;
}
#calc-body .comment.marginless {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
#calc-body button {
float: right;
margin-right: 10px;
width: 90px;
height: 30px;
}
#plot_plhldr {
position: relative;
margin: 0 auto 23px;
width:600px;
height:300px;
}
#plot_plhldr .legendColorBox {
height:1.5em;
padding:2px;
vertical-align:middle;
}
#plot_plhldr .legendLabel {
height:1.5em;
min-width:22.5em;
padding:0 5px;
color:#444;
font-size:11px;
vertical-align:baseline;
}