/* VIP related styles */

.vip-login-container {
    width:350px; 
    margin:20px 0 10px 210px
}

.vip-label {
    float:left; 
    width:120px; 
    text-align:right; 
    padding-right:10px
}

.vip-login-textbox {
    width:120px;
    margin:0 40px 10px 0;
}

.vip-login-button {
    width:50px;
    margin-left:130px;
}

.vip-login-text {
    margin: 10px 0 0 20px;
}


.vip-home-container {
    width:100%; 
}

#member-only { 
    width:750px;
    margin-left: 20px;
    text-align:center;
    vertical-align:middle; 
}

#member-only img.logo{
    float:left;
    width:150px;
    margin-bottom:20px
}

#member-only .heading{
    width:150px;
    margin:0 0 6px;
    padding:0;
    font-size:12px;
    font-family:Verdana,Helvetica,Arial,sans-serif;
    color:#aaa;
    border-bottom:1px solid #E0E0E2;
    font-weight:bold;
}

#spnMonthsAni{
    display:inline-block; width:16px; height:16px;
    vertical-align:top; 
}


.content ul.main { display:inline-block; margin-bottom:10px }
.content ul.secondary {display:inline-block; width:750px; margin-left:20px } 

.admin-only {
    background-color:#ffebed;
    color:#ff0000;
    font-size:11px;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:bold;
}

.admin-entry {
    clear:left;
    margin:10px 20px;
    width:740px;
    padding:6px 3px 3px 3px;
    border:1px solid #ff0000;
}
.admin-entry input { width:90px }

table.vip { 
    width:750px; 
    margin:20px 20px 10px 20px; 
    border:1px solid #8888aa;
}
table.vip tr.header { vertical-align: text-top; background: transparent url(../images/bg_nav_chrome.gif) repeat-x }
table.vip tr.header th { height:15px; padding:4px}
table.vip tr.even {background-color:#eeeef3}
table.vip tr.odd {background-color:#e5e5ec}
table.vip tr td {height:23px; vertical-align:middle}

table.vip tr td.created {width:130px; text-align:center}
table.vip tr td.status {width:60px; text-align:center}
table.vip tr td.desc {width:120px; text-align:left}
table.vip tr td.model, table.vip tr td.serial {width:60px; text-align:left}
table.vip tr td.points {width:60px; text-align:right}
table.vip tr td.balance {width:60px; text-align:right; padding-right:3px}
table.vip tr td.message { background-color:#eeeef3; text-align:center; padding:3px}
input, select {font-size:11px}
table.vip tr td.admin-only {width:40px; text-align:center}
/* table.vip tr td.admin-only input {display:none; margin: 0 4px 0 4px}  */

input#txtDesc {width:100px}
input#txtModel {width:50px}
input#txtSerial{width:50px}
input#txtPoints {width:50px; text-align: right}
input#btnEdit, input#btnSave, input#btnCancel {border-width: 0px; margin: 0 4px}

input#txtSerialPopup {width:100px}

.jqmOverlay { background-color: #000; }

.jqDrag {
  width: 100%;
  height: 23px;
  cursor: move;
  text-align:right;
  background: transparent url(../images/bg_nav_chrome.gif) repeat-x;
}

.jqResize {
   position: absolute;
   bottom: 0;
   right: 0;
   background: transparent url(../images/resize-handle.png);
   width: 12px;
   height: 12px;
   cursor: se-resize;
}

#popUp, #dialogSerial, #dialogRedeem {
    display: none;
    position: absolute;
    font-size: 10px;
    padding: 0px;
    background-color: #eee;
    border: 1px solid #ccc;
}
#popUp {
    width:650px;
    height:560px;
    z-index: 3000;
}
#dialogSerial {
    width:280px;
    height:200px;
    z-index: 4000;
}
#dialogSerial div.row, #dialogRedeem div.row { width:100%; height:30px;}
#dialogSerial div.label, #dialogRedeem div.label  { width:100px; float:left; }
#dialogSerial .spnModel, #dialogRedeem .spnModel { font-weight:bold }

#dialogRedeem {
    width:480px;
    height:170px;
    z-index: 4000;
}
#dialogRedeem #txtRedeemPopup {width:300px;}


img.close {
    width:11px;
    height: 10px;
    margin: 6px 6px 0 0;
}

#popUp h2, #dialogSerial h2, #dialogRedeem h2  {
    float:left;
    color: #666;
    font-size:11px; 
    font-weight:bold;
    margin: 5px 10px 10px 10px;
}

#popUp .message, #dialogSerial .message {
    text-align:left;
    color:#f00;
    padding: 5px 12px; 
    font-weight:bold; 
}

#popUp .content, #dialogSerial .content, #dialogRedeem .content{
    position:absolute;
    font-size: 10px;
    top:60px;
    right:12px;
    left:12px;
    bottom:18px;
    padding:12px;
    overflow:auto;
    background-color: #fff;
    border: 1px solid #ccc;    
}
#dialogRedeem .content { top:40px; }

/* popup product tree */
#popUp table { width:90%; margin: 0 0 15px 50px;  padding:5px }
#popUp th {  padding:4px; font-size: 10px; font-weight:bold; color:#666; text-align:left;  border-bottom:dotted 1px #ccc}
#popUp .itemText { color:#333; font-size: 10px; position: relative; top: -6px }
#popUp .treelink { text-decoration: none }
#popUp .subgroup { font-weight: 500; font-size: 10px; }
#popUp .expander { padding:0px; margin: 0px;}
#popUp .open { display: block }
#popUp .closed { display: none }
#popUp td { padding:4px; }
#popUp td a { color:#5FACCC; text-decoration:underline;}
#popUp td img { vertical-align:middle }

#tblContactDetails { width:750px; margin:20px 20px 30px 20px }
#tblContactDetails td div.scrollable {
    width: 720px;
    height: 200px;
    border: dotted 1px #E0E0E2;
    padding: 10px;
    margin-right:20px;
    overflow:auto; 
}
#tblContactDetails td.label { width:150px; padding:2px; background-color:#eee; text-align:right; vertical-align:middle }
#tblContactDetails td input,#tblContactDetails td span { margin-left:10px; width:250px; }
#tblContactDetails td input.button { margin:10px; width:100px; }
#tblContactDetails td input.checkbox { margin: 0 5px 0 0; width:10px; }
#tblContactDetails td p.box { padding:5px; border: dotted 1px red; color:red;}

.validateMessage { height:12px; clear:left; margin-left:20px }