@import url("http://www.mozdev.org/project.css");

/* Page header */

.project-name {
  /* The name of the project is only shown when no styles are applied */
  display: none;
}

/* Navigation links, inline version for Internet Explorer 6 */

#main-content-no-nav {
  /* Ensure that the navigation links are aligned to the left */
  text-align: left;
}

.maf-column-contents {
  /* Use the justified alignment for the other content */
  text-align: justify;
}

ul.maf-navigation,
ul.maf-navigation li,
ul.maf-navigation div,
ul.maf-navigation ul {
  /* Treat all the navigation elements as plain inline content */
  display: inline;
  padding: 0px !important;
  margin: 0px !important;
}

ul.maf-navigation li {
  /* Treat all the navigation elements as plain inline content */
  list-style-type: none;
}

ul.maf-navigation span {
  /* Hide elements that are used as top level menu items */
  display: none;
}

ul.maf-navigation a {
  /* Ensure that each navigation link is not split across multiple lines */
  white-space: nowrap;
  /* Separate each link from the next one */
  padding-right: 0.5em !important;
  border-right: 1px solid black;
  margin-right: 0.5em !important;
}

/* Navigation links, dropdown menu version for modern browsers */

ul.maf-navigation > li {
  /* The top level items are aligned together on the left */
  float: left;
}

#main-content-no-nav > div.maf-navigation-end {
  /* This element is placed after the list to terminate it */
  clear: left;
}

ul.maf-navigation > li > div {
  /* This item is empty and only serves as a reference for the dropdown */
  position: relative;
}

ul.maf-navigation > li > div > ul {
  /* This dropdown is not part of the normal flow of the page */
  position: absolute;
  /* The dropdown must appear above other elements in case of overlapping */
  z-index: 1;
  /* Hide the dropdown when the mouse is not over the top level item */
  display: none;
}

ul.maf-navigation > li:hover > div > ul {
  /* Display the dropdown when the mouse is over the top level item */
  display: block;
}

ul.maf-navigation > li a,
ul.maf-navigation > li span {
  /* Effective style for all menu items */
  display: block;
  padding: 1px 8px !important;
  border: 1px solid #CDE;
  margin: 0px !important;
  background-color: #DEF;
  color: #900;
  font-weight: bold;
  text-decoration: none;
}

ul.maf-navigation > li a:hover,
ul.maf-navigation > li:hover span {
  /* Effective style for all menu items when the mouse is over them */
  background-color: #EFF;
}

ul.maf-navigation > li span {
  /* For top level elements that cannot be selected, always use the arrow */
  cursor: default;
}

/* Boxes around the navigation links */

#main-content-no-nav > div.maf-navigation-image {
  float: left;
  width: 76px;
  height: 20px;
  background-image: url(http://www.mozdev.org/sharedimages/boxes.gif);
  background-repeat: no-repeat;
  background-position: 7px 7px;
}

#main-content-no-nav > ul.maf-navigation {
  float: left;
}

/* Column layout*/

.maf-column-outer {
  float: left;
  width: 100%;
}

.maf-column-left {
  float: left;
  min-width: 50%;
  max-width: 50em;
}

.maf-column-outer.maf-even .maf-column-left {
  width: 50%;
  min-width: 30em;
  max-width: none;
}

.maf-column-outer.maf-auto .maf-column-left {
  width: auto;
  min-width: 0px;
  max-width: none;
}

.maf-column-right {
  display: table-cell;
  min-width: 30em;
}

.maf-column-outer.maf-even .maf-column-right {
  width: 50%;
}

.maf-column-contents {
  padding: 10px;
}

/* Headers */

h2 {
  color: #00C;
  border-bottom: 2px solid #00C;
}

.maf-tagline {
  font-size: large;
  font-weight: bold;
}

/* Lists */

#main-content-no-nav ul,
#main-content-no-nav ul ul,
#main-content ul,
#main-content ul ul {
  list-style-type: square;
  list-style-image: url(http://www.mozdev.org/sharedimages/bullet.gif);
  list-style-position: outside;
  padding-left: 20px;
  margin-left: 0;
}

dt {
  font-weight: bold;
}

dd p,
li p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Inline text */

code.maf-file-ext {
  font-weight: bold;
}

/* Code blocks */

pre.code {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 16px;
  margin: 0px;
}

pre.code code {
  display: block;
  overflow: auto;
  padding: 0.5em;
  border: 1px dotted #999999;
  margin: 0px;
  background-color: #EEEEEE;
  font-size: small;
}

/* Feature lines */

.maf-feature-line > b,
#maf-feature-overview > li > b > span {
  display: block;
  margin: 2px;
  border: 1px solid lightgrey;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 2px;
  background-color: #DEF;
  background: -moz-linear-gradient(#EFF, #DEF);
}

.maf-feature-line > span {
  display: block;
  margin-left: 8px;
  margin-top: 0.5em;
}

ul#maf-feature-overview {
  display: table;
  margin: 0px;
  padding: 0px;
  margin-top: 1em;
  border-top: 2px solid #00C;
  padding-top: 2em;
}

#maf-feature-overview > li {
  display: table-row;
}

#maf-feature-overview > li > b {
  display: table-cell;
  white-space: nowrap;
}

#maf-feature-overview > li > a {
  font-weight: normal;
}

#maf-feature-summary {
  width: 100%;
  font-size: x-small;
}

#maf-feature-summary > ul {
  float: left;
  padding: 0px;
}

#maf-feature-summary > ul > li {
  display: block;
  margin: 2px;
  border: 1px solid #DDD;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 2px;
}

#maf-feature-summary > div {
  clear: left;
}

/* Boxes */

.maf-box {
  width: 35em;
  margin: 1em 10px;
  border: 1px solid grey;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 10px 20px;
  background-color: lightgreen;
  background: -moz-linear-gradient(lightgreen, #3D3);
}

.maf-box.maf-preview {
  background-color: #FC0;
  background: -moz-linear-gradient(#FE9, #FC0);
}

.maf-box.maf-features,
.maf-box.maf-alternative {
  background-color: #CFF;
  background: -moz-linear-gradient(#EFF, #DEF);
}

.maf-box.maf-features {
  width: 40em;
}

.maf-box a {
  color: #900;
}

.maf-box-icon {
  min-height: 48px;
  padding-left: 68px;
  background-image: url("images/icon48.png");
  background-position: left center;
  background-repeat: no-repeat;
}

.maf-box-title {
  margin: 0px;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: x-large;
  white-space: nowrap;
}

.maf-box-text {
  margin: 0px;
}

.maf-box-after {
  width: 35em;
  margin: 1em 31px 3em;
}

/* Features page */

.maf-feature-box {
  clear: both;
  position: relative;
  z-index: 1;
  margin: 1em 0px;
  padding: 1em;
  border: 1px solid lightgrey;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background-color: #DEF;
  background: -moz-linear-gradient(#EFF, #DEF);
}

.maf-feature-text {
  display: table-cell;
  min-width: 15em;
}

.maf-feature-list h3 {
  margin: 0px;
  font-family: Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: x-large;
  text-align: left;
}

.maf-feature-list p {
  margin: 0px;
  margin-top: 1em;
}

.maf-feature-list img{
  clear: both;
}

.maf-feature-list img.maf-left {
  float: left;
  margin: 0px 2em 1em 0px;
}

.maf-feature-list img.maf-right {
  float: right;
  margin: 0px 0px 1em 2em;
}

.maf-feature-list img.maf-center {
  display: block;
  margin: 1em auto 0px auto;
}

/* Feedback page */

.maf-feedback-intro {
  max-width: 60em;
}

.maf-feedback-box {
  clear: left;
  float: left;
  padding: 0px;
  margin: 10px 0px;
}

.maf-feedback-box .maf-box {
  width: 28em;
}

.maf-feedback-tips {
  float: left;
  padding: 0px;
  /*
   * This negative margin is required to compensate the padding introduced by
   *  "maf-column-contents". Not compensating it would cause a horizontal
   *  scrollbar to appear when the page is viewed using Internet Explorer 6.
   */
  margin: 0px -10px;
  max-width: 28em;
}

.maf-feedback-tips-contents {
  color: #666;
  padding: 0px;
  margin: 20px 20px;
  text-align: left;
}

.maf-feedback-tips-contents.limitwidth {
  max-width: 21em;
}

.maf-feedback-tips p {
  margin: 0px;
}

/* Footer */

.maf-footer {
  clear: both;
  padding: 10px 20px 0px 20px;
}

.maf-footer p {
  border-top: 2px solid #00C;
  padding: 5px 0px;
}
