/* =install.html */
div#dl-client { position: relative; width: 750px; margin: auto; }
div#items ul { width: 100%; height: 32px; margin: 0; padding: 0; }
div#items ul li { float: left; list-style: none; padding: 0; 
    background: #ddd; 
    margin: 0 0 0 1em;
    height: 32px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    font-size: 90%; }
div#items ul li a { display: block; padding: 0.6em 1em; }
div#items ul li.selected { background: #eee; border-bottom: 1px solid #ddd;}
div#items ul li.selected a { font-weight: bold; color: #000;  }
div#details { padding: 1em; border: 1px solid #aaa; 
    height: 26em;
    -webkit-box-shadow: 0 0 2px #666;
    -webkit-border-radius: 6px;
    -webkit-border-radius: 6px;
    font-size: 90%; }

ul.tuto li { margin-bottom: 1em; }
ul.dl-packages { margin-bottom: 2em; }
ul.dl-packages li { margin-bottom: 0.2em; }

table.dl-otherlinux {}
table.dl-otherlinux tr {}
table.dl-otherlinux th { text-align: left; border: 0; border-left: 1px solid #ccc; }
table.dl-otherlinux td { border: 0; border-left: 1px solid #ccc; }


/* =plan.html */
table.plans { border: 0; width: 100%; margin: auto; }
table.plans tr td { border: 0; }
table tr.packs td { vertical-align: bottom; text-align: center; }
table tr.packs-txt { vertical-align: top; text-align: center; }
table tr.packs-txt td h3,
table tr.packs td h3 { font-size: 180%; font-weight: normal; }
.pack20, .pack40, .pack100 { background: #aaf; color: #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.pack20 { height: 20px; }
.pack40 { height: 40px; }
.pack100 { height: 100px; }
td.base-20, td.plus-20, td.plus-40, td.plus-100 { height: 150px; border: 0px solid #aaa !important;}
td.base-20 { width: 20%; }
td.plus-20, td.plus-40, td.plus-100 { width: 18%; }
.pack20 { background: #44a; }
.pack40 { background: #44a; }
.pack100 { background: #44a; }

td.base-20 div.pack20 { background: #4a4; }

table.uplans { width: 100%; border: 0; }
table.uplans th { border: 0; border-bottom: 1px solid #444; text-align: right; }
table.uplans td { border: 0; border-bottom: 1px solid #aaa; text-align: right; }
table.uplans input { width: 3em; }
table.uplans tfoot td { padding-top: 3em; }

ul.pay_options { margin: 2em 1em; padding: 0; }
ul.pay_options li { list-style: none; margin-bottom: 1em; }
ul.pay_options li input { margin-right: 0.5em; }
ul.pay_options li label { font-weight: bold; }
ul.pay_options li p { margin-left: 1.9em; font-size: 90%; }

table.addPlans { border: 0; text-align: right; }

/* =account.html */
div.storageUi { position: relative; }
div.storageUi .boundary {
    width: 100px; height: 10px;
    border: 1px solid rgb(40, 84, 176);
    float: right;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px #bbf;
}
div.bigStorageUi div.storageUi .boundary { 
    width: 100%; height: 25px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px; 
}

div.storageUi .label {
    float: right;
    font-size: 0.8em;
    margin-left: 1em;
}

div.storageUi .usage {
    height: 10px;
    background: rgb(40, 84, 176);
    float: left;
    color: #fff; font-weight: bold;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
div.storageUi .error {
    background: #EE2A0D;
}

div.bigStorageUi div.storageUi .usage span { vertical-align: middle; padding-top: 0.3em; }
div.bigStorageUi div.storageUi .usage { height: 25px; }
div.bigStorageUi div.storageUi div.regl { position: relative; }


div.bigStorageUi .label-0,
div.bigStorageUi .label-max {
  font-size: 0.8em;
  position: absolute;
  top: 30px;

}
div.bigStorageUi .label-0 { left: 0; }
div.bigStorageUi .label-max { right: 0; }

div.bigStorageUi .label-usage {
    display: block;
    text-align: center;
    font-size: 0.8em;
}