/*
    Document   : formattings
    Created on : 2012-04-18, 17:34:38
    Author     : tech-prog
    Description:
        Formatting functions
*/

/* Required by javascript to hide & show something */
a { text-decoration: none }
.hidden { display: none }
.jsVisible { display: none }

/* Tables */
table.list { width: 100% }

table.value.list thead td { border: 0; height: 25px; background: #777; color: #fff; padding: 4px 0 4px 0; text-align: center; }
table.value.list thead td.first { border-right: 1px solid #777; border-top-left-radius: 8px;  }
table.value.list thead td.last { border-left: 1px solid #777; border-top-right-radius: 8px;  }
table.value.list { border-spacing: 0; border-collapse: separate; font: 13px tahoma; color: #282828; width: 515px; padding: 0; margin: 10px 0 0 6px; }
form table.value.list.register {width: 495px;}
table.value.list tbody td { border-bottom: 1px solid #777;; border-top:0; border-left: 1px solid #777; border-right: 1px solid #777; }
table.value.list.next { background: #ececec; }
table.value.list td.name { border-right: 1px solid #777; width: 143px; padding: 8px 6px 0 6px }
table.value.list td.value { border-left: 0; width: 348px; padding: 0px 6px 0 6px }
table.value.list td.noBLeft { border-left: 0; }
table.value.list label { width: auto }
table.value.list input, table.value.list select { min-width:140px; width: 98%; border: 0; background: none; }
table.value.list input[type=checkbox] { min-width: 40px; width: 40px; }
table.value.list .short { min-width: 100px; width: 100px; margin: 0 0 0 8px; background: #eee;  }

/* Sizes */
input.long { width: 90% }
div.long { width: 100% }

td.imgWidth { width: 60px }
td.imgWidth img.box { position: absolute; margin: 21px 0 0 -20px; width: 25px; height: 25px; border: 0 }
td.shortWidth { width: 40px }
td.quantWidth { width: 120px }
td.priceWidth { width: 75px }

td.quant { width: 70px }
td.cod { width: 110px; background: #eee; padding: 4px 4px 4px 8px }
td.cod input { width: 70px }
td.tabPrice { width: 70px }
td.package { width: 120px }

td.quant { text-align: center; }
td.quant div.const { float: right; width: 34px; }

p.small { font-size: 9px; color: #aaa; }

.iRow { clear: left; padding-top: 16px; width: 100%; min-height: 24px; height: 100%; overflow: auto; margin: 0 0 0 0  }
.iRowButtons { vertical-align: bottom; clear: both; overflow: auto; margin: 14px 0 0 0; border-radius: 4px; -moz-border-radius: 4px;	-webkit-border-radius: 4px;  }
.iRowButtons div { float: left; }
.iRowOne { clear: left; padding-top: 16px; width: 100%; min-height: 1px; height: 100%; overflow: auto; margin: 0 0 0 0  }
.iRowInputs { clear: left; width: 100%; min-height: 24px; height: 100%; overflow: auto; margin: 0 0 0 0  }

/* Grouping elements */
.iItem { height: auto; width: 194px; clear: left }
.iItem input { width: 190px; }
.halfPlace .iItem { padding-top: 16px; height: auto; width: 230px; clear: left }
.halfPlace .iItem input[type=text] { width: 220px; }
.halfPlace p { padding-left: 8px; }
.halfPlace h3 { margin-left: 8px !important; }

.iItemLeft { width: 194px; float: left;  }
.iItemLeft input[type=text], .iItemLeft input[type=password] { width: 182px; }
.iItemShort { width: 42px; float: left; }
.iItemShort input { width: 40px; }
.iItemMid { width: 300px; float: left; }
.iItemMid input { width: 280px; }
.iItemMidShort { width: 72px; float: left; }
.iItemMidShort input { width: 64px; }

.halfPlace { width: 50%; float: left; height: 100%; /*overflow: auto;*/ }
.halfPlace h2 { background: url('images/separator.gif') repeat-x bottom center; }
.halfPlace.border { background: url('images/footer_sep.gif') repeat-y right top;  }
.halfPlace label { width: 100%; clear: both;  }

ul { list-style-type: none }

/* Separated */
.separate { padding-bottom: 12px; background: url('images/separator.gif') repeat-x bottom center; }
.borderTop { padding-top: 8px; background: url('images/separator.gif') repeat-x left 8px; }
.borderBottom { padding-bottom: 8px; background: url('images/separator.gif') repeat-x left bottom; }

/* HTML Input elements */
.art-content form { width:100% }
form { margin: 0 0 0 0; overflow: hidden; }
input { width: 140px; }
input[type="checkbox"] { margin: 3px 3px 3px 0; width: 24px; }
input[type=text], input[type=password] { height: 21px; padding: 0; line-height: 21px; background: #f8f8f8; border-left: 1px #dbdedf solid; border-top: 1px #dbdedf solid; border-bottom: 1px #ececec solid; border-right: 1px #ececec solid; border-radius: 3px; -moz-border-radius: 3px;	-webkit-border-radius: 3px;}
input[type=radio] { width: 30px; }
input[type=button], input[type=submit] { cursor: pointer; font: normal 13px verdana; color: #fff; border: 0; width: 80px; height: 33px; background: url(images/button-bg-rolover.gif) center top repeat-x; border-radius: 5px; }
input[type=button]:hover, input[type=submit]:hover { background: url(images/button-bg-rolover.gif) center bottom repeat-x; }

input[type=button].htmlButton { cursor: pointer; font: normal 11px arial; color: #fff; border: 0; width: 130px; height: 35px; background: url('../images/button-all-rolover.png') left top no-repeat; }
input[type=button].htmlButton:hover { background-position: left-bottom }
input.wnd, textarea.wnd { background: #fff; padding: 4px 6px 4px 6px; border: 1px solid #777; margin: 4px 4px } 

textarea { width: 90%; height: 80px; background: #f8f8f8; border-left: 1px #dbdedf solid; border-top: 1px #dbdedf solid; border-bottom: 1px #ececec solid; border-right: 1px #ececec solid; border-radius: 3px; -moz-border-radius: 3px;	-webkit-border-radius: 3px; }

/* Buttons */
div.button { float: left; margin-right : 4px; margin-left: 4px; }
div.button { float: left; text-align: center; cursor: pointer; border: 0; width: 80px; height: 33px; background: url(images/button-bg-rolover.gif) center top repeat-x; border-radius: 5px; }
div.button a { text-decoration: none; font: normal 16px verdana; color: #fff; display: block; width: 100%; padding-top: 6px; }
div.button:hover { background: url(images/button-bg-rolover.gif) center bottom repeat-x; }

div.midButton, input.midButton { float: left; text-align: center; cursor: pointer; border: 0; width: 122px; height: 22px; background: #2480ff url('objects/cms/button_middle.gif') left top no-repeat; }
div.midButton.bottom, input.midButton.bottom, div.button.bottom { margin-top: 26px; }
div.midButton a { text-decoration: none; line-height: 22px; color: #fff; display: block; width: 100%; }
div.midButton:hover, input.midButton:hover { width: 122px; }

input.small { width: 80px; background-image: url('objects/cms/button_small.gif'); }
input.medium { width: 120px; background-image: url('objects/cms/button_medium.gif'); }

/* Margins */
.nopadd { padding: 0 0 0 0!important; }
.nopaddl { padding: 0 0 0 1px!important; }
.sepBigTop { margin-top: 64px; }
.sepTop { margin: 16px 0 16px 0; }
.sepTopLog { margin: 20px 0 16px 0; }
div.padd { padding: 0 0 0 48px;  }

/* Hints */
.hint { float: left; display: block; position: relative; padding: 2px 2px 2px 2px; width: 16px; height: 16px; }
.hint img { }
.hint span { width: 270px; display: none; position: absolute; z-index: 1;  }
.hint:hover {  }
.hint:hover span{ position: absolute; color: #444; display: block; background: #ffffaa; padding: 6px 6px 6px 6px; border: 1px solid #777; height: auto; }

.static_hint { background: #ffffaa; padding: 6px 6px 6px 6px; border: 1px solid #777; margin: 4px 4px  }

/* Images */
.image { padding: 0; margin: 0; }
img { border: none; }
img.mini { border: 1px solid #ddd; }
img.noResize { width: auto !important; height: auto!important; }
td.rightSep { background: url('images/sepator-horizontal.gif') right top repeat-y }
label.wnd { font-weight: bold }
div.max-img-state { width: auto; height: auto; }
div.max-img-state img { max-width: 180px; max-height: 40px; }
div.max-img-state:hover img { max-width: none; max-height: none; border:2px solid #F7AE37; box-shadow: 0 0 40px #F7AE37; }
div.max-img-state:hover { position: absolute; z-index: 3; left: 100px; bottom: 20px; }
img.mgsi { width: 48px; margin: 8px 8px 0 0; box-shadow: 0 0 2px #F7AE37; padding: 0 0; }

div.availbler { width: 25px; height: 25px; background: url('images/check-orb-rolover.png') left top }
div.availbler.avail { background-position: left bottom }


/* Align */
.clear { clear: both }
.clearLeft { clear: left; }
.left { float: left }
.center { vertical-align: middle; text-align: center; margin: 0 auto; }
div.right, input.right, img.right { float: right }
td.right { padding-right: 12px; vertical-align: middle; text-align: right; }
td.right input {text-align: right;}
table.vtop td { vertical-align: top }