/*
  ff and safari: width of borders ADDED to width of element
  ff and safari: width of padding NOT SUBTRACTED from width of element
  margin is consistent for big 4 (opera, ff, safari, ie)
*/

/*------------------------------------------------------------------------------
                       Layout and Positioning
/*----------------------------------------------------------------------------*/

/*------------  Crucial Widths  --------------------*/
.support-page {
  width: 750px;
  padding: 30px 10px 30px 10px;
}

.left-panel {
  width: 327px;
}

.right-panel, 
.faq-update-message {
   width: 422px; }

.faq .answer .full-answer {
  /* must subtract padding and margins */
  width: 100%;
  }


/*------------------  Overall  ---------------------*/
.support-page {
  /* width and padding handled in crucial widths section */
  min-height: 750px;
  margin: 0 auto 0 auto;
}


/*----------------  Left Panel  --------------------*/
.left-panel {
  /* width and padding handled in crucial widths section */
  float: left;
}


/*---------  Left Panel - Above FAQ  ---------------*/
.left-panel .description {
  margin-right: 10px;
}

.left-panel .instructions {
  vertical-align: top;
  margin-top: 20px;
  height: 110px;
  padding-right: 2px;
}


/*------------  Left Panel - Titles  ---------------*/
.left-panel .input {
  margin: 3px 0 8px 0;
}

.left-panel .category-selectors .input {
  height: 19px;
  display: block;
}

.left-panel .input .title {
  float: left;
  width: 85px; 
  margin-left: 35px;
}

.left-panel .category-selectors {
  padding: 15px 0 9px 0;
  margin-bottom: 20px;
}

.left-panel .category-selectors .title {
  width: 120px;
  margin-left: 20px;
}
  
.left-panel .question {
  margin-bottom: 3px;
}

.left-panel .question .title {
  display: block;
  width: 80%;
}


/*------------  Left Panel - Inputs  ---------------*/
.left-panel .input input {
  width: 180px;
}

.category-selectors select {
  width: 160px;
}

.left-panel textarea {
  margin-left: 35px;
  width: 265px;
  height: 160px;
}

.left-panel .submit {
  margin: 30px 0 20px 0;
}

.left-panel .category-selectors .submit {
  margin-bottom: 0px;
  margin-top: 0px;
}


/*---------  Right Panel - Overall  ----------------*/
.right-panel {
  /* width and padding handled in crucial widths section */
  float: right;
  margin: 20px 0 35px -1px;
  min-height: 215px;
  height: 100%;
}

.right-panel h2 {
  margin: 0;
  padding: 8px 0 8px 0;
  width: 100%;
}

/* IE doesn't do min-height so force it with an image */
.right-panel .spacer {
  height: 155px;
  float: right;
  width: 1px;
}


/*---------  Right Panel - FAQ  --------------------*/
.faq {
  margin-left: 10px;
  margin-right: 10px;
  padding: 8px 0 4px 5px;
}

.faq .answer {
  margin: 3px 0 8px 10px;
}

.faq .answer .full-answer {
  /* width and padding handled in crucial widths section */
}

.faq .answer .link-to-faq {
  margin: 4px 0 2px 0;
  width: 96%;
}

.right-panel a .faq .button,
.right-panel a:link .faq .button, 
.right-panel a:hover .faq .button, 
.right-panel a:visited .faq .button {
  width: 25px;
  height: 25px;
  float: right;
  margin: 8px 10px 0px 2px;
  background: url(/images/support/support_down_arrow.png) 0% 0% no-repeat;
}

.right-panel a:hover .faq .button {
  background-position: 0% 100%;
}

.faq-update-message {
  /* width and padding handled in crucial widths section */
  position: absolute;
  height: 300px;
}

.overlay {
  position: absolute;
  height: 130%;
  width: 100%;
  z-index: 5;
}

.popup {
  position: absolute;
  margin: 10% 0px;
  padding: 0 5px 0 25px;
   width: 600px;   z-index: 10;
  min-height: 200px;
 }

#popup-update-message {
  height: 200px;
  width: 100%;
}

.popup h3{
  margin-top: 5px;
  margin-bottom: 4px;
}

.popup .instructions {
  float: left;
  margin: 5px 5px 10px 0;
}

.popup a .popup-button {
  max-width: 160px;
  margin: 5px auto 5px auto;
  padding: 2px 0 2px 0;
}


/*------------------------------------------------------------------------------
                         Styles and Color 
/*----------------------------------------------------------------------------*/

/*-------------  Overall  --------------------------*/
body {
  background: url(/images/bg/bg-fade-yellow.png) 0% 0% repeat-x;
}


/*---------  Left Panel - Above FAQ  ---------------*/
.left-panel .instructions h4 {
  color: #333333;
  font-size: 12px;
}


/*------------  Left Panel - Titles  ---------------*/
.left-panel .category-selectors {
  font-weight: 700;
  font-size: 13px;
  background-color: #fff8dd; 
  background-color: #f6fad9;
  color: #222222;
  border: 1px solid #8f8f5A; 
  border-right: none;
}


/*------------  Left Panel - Inputs  ---------------*/
.left-panel .submit {
  text-align: center;
}

.category-selectors select {
  font-size: 11px;
  text-indent: 3px;
}

.category-selectors select option {
  text-indent: 3px;
}

.category-selectors select option.default {
  text-indent: 12px;
}


/*---------  Right Panel - Overall  ----------------*/
.right-panel {
  color: #222222;
  background-color: #fff8dd; 
  background-color: #f6fad9;
  border: 1px solid #8f8f5A; 
}

.right-panel h2 {
  text-align: center;
  background-color: #c8d095;
}

.right-panel a, 
.right-panel a:link, 
.right-panel a:visited, 
.right-panel a:hover {
  text-decoration: none;
  cursor: pointer;
}

.right-panel a .faq,
.right-panel a:link .faq,
.right-panel a:visited .faq,
.right-panel a:hover .faq {
  color: #333333;
  background-color: #f6fad9;
  border-top: 1px solid #8f8f5A; 
  cursor: pointer;
}

.right-panel a:hover .faq {
  background: #f0f5c0;
}

.right-panel a .faq p,
.right-panel a:link .faq p,
.right-panel a:visited .faq p,
.right-panel a:hover .faq p {
  color: #333333;
}

.right-panel a .faq .question, 
.right-panel a:link .faq .question, 
.right-panel a:visited .faq .question,
.right-panel a:hover .faq .question {
  color: #222222;
  font-weight: 700;
}

.hidden_faq {
  background-color: #eeffdd; 
  border-top: 1px solid #8f8f5A; 
}

.faq-update-message {
  text-align: center;
  background: url(/images/mac_spinner.gif) 50% 15% no-repeat;
  background-color: #f6fad9; 
}

#popup-update-message {
  background: url(/images/mac_spinner.gif) 50% 15% no-repeat;
  background-color: white;
}

.faq .link {
  text-decoration: underline;
  color: #111111;
  cursor: default;
}

.faq span.link:hover {
  text-decoration: none;  
}

.faq .answer .link-to-faq {
  color: #666666;
  text-align: right;
}

/*-------------  Popup and Overlay  ----------------*/
.overlay {
  background-color: #aaaa77;
   opacity: 0.6; 
}

.popup {
  background-color: #f8f5e5;
  border: 1px solid black;
}

.popup h3{
  color: #222222;
  text-align: center;
}

.popup .instructions {
  font-weight: 700;
  color: #222222;
}

.popup a .popup-button {
  
  text-align: center;
  font-weight: 800;
  background-color: #cccc88;
  color: #222222;
  cursor: pointer;
  border: 1px solid #333311;
  text-decoration: none;
}

.popup a:hover .popup-button {
  background-color: #dddd99;
  text-decoration: none;
}