/* authored by s.berger and r.paul (UX + Marketing/Communications)
   original:     22 apr 2010
   version:      10 sep 2010 v3

I.  PRESENTATIONAL LAYOUT (structure) */


#support-header h2 {float:left; margin-right: 20px;}
#support-header h3 {float:left;}
#support-header h3 a {color: #777; display:block;}

noscript { display: none !important; visibility: hidden !important; }

body#faq {
  text-align: left;
}
div#faq-content {
  margin: 0 0 40px 0.25em;
  min-height: 500px;
  clear: both;
}
#results-faq {
  clear: both; margin: 0;
}
    div#attachments {
      border-top: 1px solid #c5c5c5;
      margin: 20px 0 0 0;
      padding: 20px 0 0 0;
    }
div#faq-user-evaluation {
  border-top: 1px solid #c5c5c5;
  margin: 0px 0 40px 0;
  padding: 20px 0 0 0;
  float:left; 
  clear:both;
  width: 100%;
  background: #fdfdfd; /* oatmeal white */
}
div#faq-user-evaluation form {
    float:left;
}
div#faq-actions { /* print & share */
  clear: both;
  margin: 5px 0 0 0;
}
#faq-actions ul {margin: 0px 0px 15px 10px; padding: 0px; float:left;}
#faq-actions li {list-style:none;float:left; margin: 0px 10px 0px 0px;}
#faq-actions li a {display:block;}
#faq-pagination {
  float: right;
}

/***
 II.   CAROUSEL (topic selector) */
/* this version of the carousel is temporary & will be removed by sb week of july 26 */
body#faq noscript { /* failover for user's with javascript turned off */
  width: 875px; height: 60px;
  display: block; clear: both;
  border: 2px dashed #bbb;
  margin: 0 auto 30px 0; padding: 15px 35px;
}
body#faq noscript h3 {
  font-size: 1.30em;
  line-height: 1.45em;
  text-align: center;
}


div.open { visibility: visible; display: block; }
body.customer-support div#select-category p,
body.customer-support div#select-subcategory p,
body.customer-support div#select-category li,
body.customer-support div#select-subcategory li {
  text-align: left;
}

/* end of temp carousel version */

body#faq noscript { /* failover for user's with javascript turned off */
  width: 875px; height: 60px;
  display: block; clear: both;
  border: 2px dashed #bbb;
  margin: 0 auto 30px 0; padding: 15px 35px;
}
body#faq noscript h3 {
  font-size: 1.30em;
  line-height: 1.45em;
  text-align: center;
}
/*** 2.1 Select Category */
#select-category {
  width: 935px; /*height: 140px;*/
  /*border: 1px solid #ccc;*/
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  /*background: url(https://my.garmin.com/static/m/g/support/ui/bg_topic_selection.jpg) no-repeat 0 -110px;*/
  margin-bottom: 1.25em;
  /*border: 1px solid #ccc;
  padding-left: 10px;*/
 }
div#select-subcategory {
  clear: left;
  width: 944px; /*min-height: 195px;*/
  background: #f3f2ef;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  background: url(https://my.garmin.com/static/m/g/support/ui/bg_topic_selection.jpg) no-repeat 0 0;
}
div#items-for-category {
  /* third-most level, list items */
  /*clear: left;*/
  margin: 0px;
  /*padding: 0px 0px 0px 10px;*/
  width: 780px;
  float:left;
}
#kanaProducts {
    float:left;
    width: 100%;
    padding-bottom: 20px;
}
div.container div.closed {border: none !important; margin: 0px !important; height: auto !important; background: none;}
div.closed .ui-browse, div.closed #help-categories, div.closed #kanaProducts{ visibility: hidden !important; display: none !important; }
div.closed #kanaSelectionBreadcrumb {display:block;}
div.open { visibility: visible; display: block; }
body.customer-support div#select-category p,
body.customer-support div#select-subcategory p,
body.customer-support div#select-category li,
body.customer-support div#select-subcategory li {
  text-align: left;
}
#select-subcategory ul {
    margin: 10px 0px 0px 0px; 
    padding: 0px;
    float:left; 
    display:inline;
    list-style:none;
}
#select-subcategory ul li {
    float:left;
    margin-bottom: 5px;
}
#select-subcategory li a {
    display: block; 
    width: 230px; 
    padding: 4px 10px 4px 15px;
    background: url(https://my.garmin.com/static/m/g/support/ic_bullet_arrow.gif) left 10px no-repeat;
    float:left;
}
#select-subcategory li a:hover {color: #000;}

body.customer-support div#select-category li.selected a,
body.customer-support div#select-subcategory li.selected a {
    font-weight: bold; 
    font-size: 1.1em;
    color: #000;
    text-decoration:none;
}
#select-category #carouselGreeting {
    margin-left: 10px;
    margin-bottom: 0.5em;
}
#select-category h4 {
  /*position: relative; top: 10px; left: 10px;*/
  font-weight: 400;
  font-size: 1.05em;
  margin-bottom: 3px;
  letter-spacing: -0.030em;
  /*text-shadow: #c7c7c7 1px 1px 2px;*/
  text-align: left;
}
#select-category h4 a {
  margin: 0 2px;
  cursor: pointer;
}
div.scrollable { /* acts as a layout mask for .items */
  float: left;   /* this makes it possible to add next button beside scrollable */
  position: relative; /*top: 10px; left: 5px;*/
  overflow: hidden;
  width: 828px; height: 140px;
  margin: 0 5px 0 0;
}
div.scrollable img#loader {
  width: 16px; height: 16px;
  margin: 44px 0 0 406px;
}
div.items { /* approaches infinite width, holds all products & topics */
  width: 20000em;
  position: absolute;
  clear: both;  
}
.items div {
  float: left;
}
.fir, .ui { 
  display: block; overflow: hidden;
  height: 0 !important;
/* note: def FIR (Fahrner Image Replacement): a type replacement technique;
         the method below is used for ui-browse and uses the Langridge Image
         Replacement
         learn:
         1- http://stopdesign.com/archive/2003/03/07/replace-text.html#notes
         2- http://en.wikipedia.org/wiki/Fahrner_Image_Replacement
*/
}
div.ui-browse { /* back and forward buttons */
  float: left;
  cursor: pointer;
  /*width: 50px; height: 50px;*/
  margin: 25px 0px 0px 0px;
}
div.ui-browse h5 a { /* this serves as a specific instance of image replacement */
  background: url("https://my.garmin.com/static/m/g/support/ui/ui_browse.gif") no-repeat 0 0;
  cursor: pointer;
  display:block;
  width: 48px; height: 50px !important;
  text-indent: -1000px;
  margin: 0px;
  /*padding-top: 47px;*/
}
div.ui-browse h5#back a {       background-position:   0px 0px;}
div.ui-browse h5#back a:hover { background-position:   0px -51px; }
div.ui-browse h5#fwd a {        background-position: -101px 0px; }
div.ui-browse h5#fwd a:hover {  background-position: -101px -51px; }
a.disabled {} /* optional */
div.category {
  float: left;
  width: 138px; height: 140px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
}
.category .topic-thumb {
    float:none;
    margin-bottom: 5px;
}
/*
div.category:hover,
div.sel {
  background: #62a2d2;
}*/
div.category:hover a, div.sel a {
  /* color: #fff; */
  text-decoration: none;
}
div.category:hover p, div.sel p {
  color: #111 !important;
}
div#select-category .topic-thumb:hover,
div.sel .topic-thumb {
  cursor: pointer;
}
body#faq div.category h6, body#faq div.category p {
  text-align: center;
  margin: 0 auto; /*width: 120px; width: 105px;*/
  position: relative;
}
div.category h6 {
  clear: left;
/*top: 5px;
  font-size: 0.98em;
  line-height: 1.25em; */
  letter-spacing: -0.035em;
  cursor: pointer;
  font-size: 0.95em;
  line-height: 1.25em;
  padding: 0px 5px;
}
div.category p {
  top: 8px;
  font-size: 0.68em;
  line-height: 0.78em;ro
  color: #575757;
  text-transform: uppercase;  
}
div.topic-thumb {
  width: 110px; /*width: 95px; height: 65px;*/
  /*background: #fff;
  border: 1px solid #fff;*/
  margin: 0 auto;
  height: 100px;
}
.topic-thumb a img,
.topic-thumb img {
  cursor: pointer;
  margin: 0px auto;
  display: block;
  
  /*width: 100px; height: 100px;
  width: 50px; height: 50px; */
}
/*** 2.b Select subcategory */
div#category-info {
  margin: 15px 0 0 0;
  /*height: 90px;
  background: url(https://my.garmin.com/static/m/g/support/ui/bg_bar_repeat.gif) repeat-x 0 15px;*/
  padding: 0px 0px 0px 10px;
  float:left;
  /*width: 934px;*/
}
div#category-info .topic-thumb {
  float: left;
  margin: 0 20px 0 10px;
  border: 1px solid #ccc;
  padding: 5px;
  display:inline;
  /*width: 97px;*/
  
  background: #fff;
}
div#category-info .topic-thumb img {
    /*width: 75px;
    height: 75px;*/
}
div#category-info div.category-details {
  float: left;
  /*position: relative; top: 28px;width: 230px;*/
  margin: 28px 20px 0px 0px;
  display:none;

}
div#category-info div.category-details h4 {
    display:none;
  color: #000;
  font-weight: 600;
  font-size: 1.10em;
  line-height: 1.10em;
  margin: 0px 0px 3px 0px;
  float:left;
 }
div.category-details h5 {
  vertical-align: baseline;
  font-weight: 400;
  font-size: 0.80em;
  line-height: 1.10em;
  color: #444;
  text-transform: uppercase;
  margin: 0;
  clear:left;
  float:left;
}
div.category-details span {
  font-size: 0.90em;
  font-weight: 400;
  line-height: 1.50em;
  display: block;
  vertical-align: baseline;
  text-transform: uppercase;
  color: #444;
}
div.category-details h4 a {
  font-weight: 400;
  margin: 0px 8px 0px 10px;
  /*display:block;
  float:left;
  font-size: 1em !important;
  vertical-align: baseline;*/
}
div#category-info h6 {
  float: left; 
  /*width: 540px;*/
  color: #222;
  font-weight: 400;
  font-size: 0.95em;
  margin: 34px 0px 0px 0px;
  /*position: relative; margin-top: 2.85em;*/
  vertical-align: baseline;
  display:none;
}
div#select-subcategory ul {
  /*position: relative; left: 118px;
  margin: 0 9.00em 0 -8.00em;*/
}
div#select-subcategory li {
  float: left; /*width: 190px;*/
  font-size: 0.98em;
  line-height: 1.25em;
  /*margin: 14px 0 0 15px;
  list-style-type: none;*/
}
div#select-subcategory a, div#select-subcategory li { 
  cursor: pointer !important;
  
}

/***
 III.  SEARCH & ADVANCED SEARCH */
div#search-result-summary {
  clear: both;
  margin: 0px;
}
div#kanaSelectionBreadcrumb {
  float: left; /*width: 350px;*/
  display: block !important;
  visibility: visible;
  width: 100%;
  margin-bottom: 5px;
}
div#kanaSelectionBreadcrumb a {
    float:right;
    width: 340px;
    padding-right: 10px;
}
div#kanaSelectionBreadcrumb h4 {
    float:left;
    font-size: 100%;
}
div#kanaSelectionBreadcrumb h4 a {
    float:none;
    width: auto;
    padding: 0px;
}
#product-selected-for-help {
    float:left;
    width: 100%;
    margin-bottom: 5px;
    display:none;
}
#kanaSearchTerm {
    float:left;
}
#kanaSearchInput a {
    
}
#kanaSearchSuggestions {
    clear: both; 
    margin: 0px;
    text-align: center;
    padding: 0px 0px 6px 0px;
    /*border-bottom: 1px solid #ccc;*/
    position:absolute;
    left: -220px;
    top: 5px;
    width: 200px;
    text-align:right;
}
#faq-search {
  float: left; /*width: 190px;*/
  margin: 5px 80px 0 0;
  position: relative; top: 0; left: 20px;
}

#kanaSearchInput a,
a.close-adv-search {
/*display:none;*/
position:absolute;
left: 230px;
top: 2px;

z-index:18;
background: #f2f2f2;
padding: 3px 5px;
display:block;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #ccc;
text-decoration:none;
font-weight:bold;

}
#kanaSearchInput a:hover,
a.close-adv-search:hover {
    color: #000;
}
div#support-search {
  float: right; /*width: 250px;*/
  z-index: 13;
  display: block;
  position: relative;/* top: 100px; height: 90px;*/
}
form#support-search-form {
 
  position: relative; /*height: 50px; top: -45px;*/
}
#faq-search form label { /* currently removed from layout */
  color: #888;
  font-weight: 400;
  font-size: 1.05em;
  line-height: 1.40em;
  margin: 0 0 0 10px;
}
input.help-textfield,
div#adv-search div input.textfield {
  margin: 0;
  position: relative; 
  z-index: 12;
  /*left: 11px;*/
  font-size: 1.00em;
  line-height: 1.40em;
  padding: 2px 19px 2px 2px;
  width: 226px;
  color: #222;
  float:left;
  border: 2px solid #c7c7c7;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
p#help-button {
  float:left;
  margin: 0px;
  /*height: 34px;
  width: 150px;*/
  position: absolute; top: 0px; left: 245px; z-index: 11;
}

#help-button a span {
    padding: 0px 8px 0px 20px;
}
  p#help-button.more-search-options { 
    top: 200px; 
}
div#faq-user-evaluation .button {
    font-size: 11px;
    font-weight: 400 !important;
}
a.button {
    background: url("https://my.garmin.com/static/m/g/bt-sq-rt.jpg") no-repeat right top;
    color: #fff !important;
    margin: 0px;
}
a.button span {
  background: url("https://my.garmin.com/static/m/g/bt-sq-lt.jpg") no-repeat left top;
  padding: 0px 9px 0px 16px;
  color: #fff !important;
}

div#adv-search div input.textfield {
  font-size: 0.77em;
  border-color: #ddd;
}
div#adv-search {
  background: #fff;
  display: none;
  width: 400px; /*height: 180px;*/
  padding: 70px 15px 50px 15px;
  position: absolute; top: -15px; left: -145px; z-index: 9;
  border: 1px solid #c5c5c5;
}
#simple-search {
  /*clear: both;*/ 
  width: 325px;
  position: relative; 
  z-index: 10;
}
#simple-search #help-button a{
    background: url(https://my.garmin.com/static/m/g/bt-sq-rt.gif) right top repeat-x;
}
#simple-search #help-button a span{
    background: url(https://my.garmin.com/static/m/g/bt-sq-lt.gif) left top no-repeat;
}
#adv-search.simple-search {
  height: 0px; border: 1px solid #fff;
  display:none;
}

div#adv-search div {
  clear: both; 
    float:left;
    display:inline;
    width: 100%;
    z-index: 14;
    position:relative;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}
div#adv-search div label,
div#adv-search div input.textfield {
  float: left;
}
div#adv-search div label {
  text-align: right;
  width: 120px;
  font-weight: 400;
  font-size: 0.84em;
  line-height: 1.45em;
  /*position: relative; top: 8px; right: 10px;*/
  float:left;
  margin-right: 10px;
}
div#adv-search div input.textfield {
  /*font-size: 0.70em;*/
  float:left;
}
p#open-adv-search { 
  font-size: 0.80em;
  position: relative;
  z-index: 15;
  /*width: 125px; top: -70px; left: 180px;*/
  text-align: right;
  margin: 0px;
  clear:left;
  display: block; cursor: pointer;
}
  p#open-adv-search.more-search-options {
    display: none;
  }

input.javax.faces.ViewState {
  visibility: hidden; display: none;
}

/***
 IV.   KEY SOLUTIONS & RELATED ITEMS
       right column of 2010 redesign */
body.solution div#key-solutions {
  margin: 0px;
}
div#related-items {
  margin: 2.00em 0px 0px 2.85em;
  padding: 0;
  width: 250px;
}
div#key-solutions div {
  margin: 0px 0px 10px 2.90em;
  height: 58px;
  padding-top: 10px;
}
div#key-solutions div ul {
  margin: 0px; padding: 0px 0px 10px 75px;
}
div#key-solutions div li {
  font-size: 1.00em;
  line-height: 1.45em;
  margin: 3px 0px 0px 2px;
  list-style-type: none;
}
  div#quickhelps-devices { background: url("https://my.garmin.com/static/m/g/support/ui/bg_key_solutions_devices.gif") no-repeat -2px -2px; }
  div#quickhelps-maps {    background: url("https://my.garmin.com/static/m/g/support/ui/bg_key_solutions_maps.gif") no-repeat -2px -2px; }
  div#quickhelps-repair {  background: url("https://my.garmin.com/static/m/g/support/ui/bg_key_solutions_repair.gif") no-repeat -2px -2px; }
  div#quickhelps-contact { background: url("https://my.garmin.com/static/m/g/support/ui/bg_key_solutions_contact.gif") no-repeat -2px -2px; }


/****
IV. 
    4.1 Email this answer */

#emailInfo {clear:both; margin-left: 10px;}
#emailInfo label {display:block;}
#emailInfo div {margin-bottom: 6px;}

/****
    4.2 Was this Answer Helpful? */
form#suggestion table {margin-bottom: 0px; float:left;}
form#suggestion table td {vertical-align:top; border: none;}    
form#suggestion table input {width: 15px; height: 15px; float:left; margin-right: 10px;}
form#suggestion div.customer-info table label {width: 220px; float:left;}

/***
 V. ANSWER 
    5.1 CONTENT */
#product-selected-for-help h4,
#product-selected-for-help h4 span {
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: -0.035em;
  line-height: 1.40em;
  color: #555;
}
#product-selected-for-help h4 span {
  font-size: 1.00em;
  color: #111;
  display: block;
}
#product-selected-for-help a {
  font-size: 0.80em;
}
#product-selected-for-help h5 {
  color: #555;
  font-size: 0.95em;
  line-height: 1.40em;
  border-bottom: 0.15em solid #aaa;
  padding: 0.15em 0 0.90em 0;
}
#faq-content h3.question {
  font-size: 1.70em;
  line-height: 1.40em;
  letter-spacing: -0.040em;
  font-weight: 600;
  margin: 0px;
  color: #111;
}
#faq-content p#faq-timestamp {
  clear: both;
  color: #adadad;
  font-size: 0.80em;
  margin: 10px 0 0 0;
}
#faq-content span.highlight {
  background: #97c9f2; /* light blue */
  color: #000;
}
div#attachments h4 {
  text-shadow: none;
  font-size: 1.35em;
  margin: 0;
  color: #000;
}
#faq-pagination p {
  text-align: right;
  line-height: 2.60em;

}
#faq-pagination em {
  display: block;
}
#faq-pagination a,
#faq-pagination span {
  margin: 0 0 0 5px;
  padding: 4px 7px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#faq-pagination span { /* current page */
  background: #eeeeef url("https://my.garmin.com/static/m/g/support/ui/gradient.gif") 0 -5px repeat-x;
  border: 1px solid #bbb;
  font-weight: 600;
  padding: 9px 12px; /* current page is bigger than other page links */
}
#faq-pagination a {
  color: #333;
  background: #eeeeef url("https://my.garmin.com/static/m/g/support/ui/gradient.gif") 0 0 repeat-x;
  border: 1px solid #bbb;
}
#faq-pagination a:hover {
  text-decoration: underline;
  border-color: #555;
}

/***
 5.2 USER RESPONSE 
 about: user allowed to determine & suggest how helpful an individual 
        Q&A is */
#faq-user-evaluation h5,
#faq-user-evaluation p {
  color: #444;
}
#faq-user-evaluation h5 {
  float: left; /*width: 160px;*/
  font-weight: 400;
  font-size: 1.50em;
}
#faq-user-evaluation form#faqFeedback {
    float:left;
}
#faq-user-evaluation form#faqFeedback p {
    float:left;
}
#user-says-no {
  clear: left;
}
#user-suggestion,
#user-says-no-options { /* hidden by default on page load */
  clear: both;
  position: relative; top: 1.00em;
  visibility: hidden; display: none;
}
#user-says-no-options p {
  margin: 0;
  cursor: pointer;
  line-height: 1.40em;
}
#faq-user-evaluation p,
#faq-user-evaluation textarea,
#user-suggestion form input {
  background: #fff !important;
  font-size: 1.15em;
  line-height: 1.40em;
  font-weight: 400;
}
#user-suggestion p {
  margin: 0;
}
#user-suggestion textarea {
  width: 97%; height: 150px;
  border: 1px solid #c7c7c7;
  color: #444;
  margin: 1.0em 0 0 0;
}
#faq-user-evaluation div.response {
  float: left;
  color: #444;
  font-size: 0.80em;
  line-height: 1.50em;
}
#faq-user-evaluation div.response {
    
}
div.response label {
  font-size: 1.45em;
  color: #444;
  margin: 0.095em 0.35em 0em 0em;
  font-weight: 400;
  float:left; display:block;
  /*width: 150px;*/
}
div.response input {
  margin: 0 0 0 2.50em;
  float:left;
}
input#this-answer-helped {
  float: left;
  position: relative; top: -0.50em; left: 3.00em;
  cursor: pointer;
  font-size: 1.15em;
  padding: 3px 4px;
  border: 1px solid #777;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 6px 15px;
  background: #fff url("https://my.garmin.com/static/m/g/support/ui/gradient.gif") 0 -10px repeat-x;
}
input#this-answer-helped:hover {
  border-color: #222;   
}
#user-suggestion a,
#user-suggestion a.send-message {
  display:block;
  clear:both;
  text-decoration: none;
  
  float:left;
  background: #fff url("https://my.garmin.com/static/m/g/bt-sq-lt.gif") -10px top no-repeat;
  color: #fff;
  padding-right: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#user-suggestion a:hover,
#user-suggestion a.send-message:hover {
background-position: -10px -24px;   
}
    form#suggestion a:hover {
      border-color: #222;   
    }
form#suggestion div.customer-info {
  clear: left;
  width: 600px; height: 35px;
  margin: 15px 0 0 0;
}
form#suggestion div.customer-info label {
  float: left; width: 80px;
  color: #444;
  font-weight: 400;
  margin: 2px 15px 20px 0;
}
form#suggestion p {
  font-size: 1.15em;
  line-height: 1.40em;
}
form#suggestion input {
  float: left; width: 170px;    
  padding: 2px 4px;
  border: 1px solid #c7c7c7;
}