/* All common CSS from main.css and homepage.css */

* { margin: 0; padding: 0; font-size: 1em; }

body, input, textarea, select {
  font-family: "Lucida Grande", Lucida, "Lucida Sans", "Trebuchet MS",
               Verdana, Geneva, Arial, Helvetica, sans-serif;
}

body {
  background: #8ec73f url(images/bg-stripe.gif) repeat-y left top;
  color: #333;
  font-size: 76%;
  height: 100%;
  line-height: 1.75;
}

#body-extra {
  background: url(images/bg-reverse.gif) repeat-y right top;
  height: auto;
  min-height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

* html #body-extra {
  height: 100%;
}

#wrapper {
  background: #fff;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 20px 1.75em;
  width: 910px;
}

#content {
  position: relative;
}

/* GENERAL: Forms
-----------------------------------*/

#content fieldset {
  border: 1px solid #496a31;
  margin: 20px 0;
  padding: 1em 20px 0;
}

#content legend {
  color: #496a31;
  font-size: 1.1667em;
  font-weight: bold;
  padding: 0 10px;
}

#content form div {
  margin-bottom: 1em;
}

#content form div.errors {
  background: #f99;
  border: 1px solid #ff4c4c;
  padding: 5px 19px;
}

#content form div.errors+div.errors {
  margin-top: 6px;
}

#content form div.errors p {
  background: url(images/icons/exclamation.png) no-repeat left center;
  margin: 2px 0 0 160px;
  padding-left: 20px;
}

#content form p.error {
  background: url(images/icons/exclamation.png) no-repeat left center;
  color: #c33;
  font-size: 1.1667em;
  font-weight: bold;
  margin: 0;
  padding-left: 20px;
}

#content form label,
#content form div.radiofield p.legend,
#content form div.hidden p.label {
  color: #8ec73f;
  display: inline;
  font-weight: bold;
}

#content form label em {
  color: #c33;
  font-style: normal;
}

#content form div.textfield input,
#content form div.textarea textarea,
#content form div.password input,
#content form div.radiofield label {
  color: #000;
  font-size: 1.1667em;
  font-weight: bold;
  padding: 6px 4px;
  width: 66%;
}

#content form div.select select,
#content form div.submit input,
div.warning span.submit input {
  font-size: 1.1667em;
  font-weight: bold;
  padding: 6px 4px;
}

#content form div.textarea textarea {
  height: 9em;
}

#content form div.textarea textarea.tab-enabled {
  font: 12px/1.2 "Lucida Console", Monaco, "Courier New", monospace;
  height: 40em;
  padding: 0;
  width: 640px;
}

#content form div.textfield.errors input,
#content form div.password.errors input {
  border-color: #ff4c4c;
}

#content form div.submit {
  padding: 0;
}

#content form div.submit input.start {
  background-color: #fff;
  border: 3px solid #2e9fcf;
  color: #2e9fcf;
  cursor: pointer;
  display: block;
  font-size: 24px;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  width: 250px;
}

#content form div.submit input.start:hover {
  background-color: #2e9fcf;
  color: #fff;
}

#content form p.help {
  color: #666;
  margin: 0;
}

#system-message {
  background-position: 5px 11px;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 2px 0;
  font-size: 1.3333em;
  margin-bottom: 20px;
  padding: 5px 5px 5px 26px;
}

#system-message.sys-error {
  background-color: #ffa599;
  background-image: url(images/icons/cross.gif);
  border-color: #c74f3f;
}

#system-message.sys-success {
  background-color: #b5e573;
  background-image: url(images/icons/tick.gif);
  border-color: #8ec73f;
}

#system-message.sys-notice {
  background-color: #c2e6fd;
  background-image: url(images/icons/help.gif);
  border-color: #6a92a0;
}

/* SECTION: Header
-----------------------------------*/

#header {
  padding: 20px 0;
  position: relative;
}

#header h1 {
  background: url(images/logo.png) no-repeat;
  height: 93px;
  text-indent: -9999px;
  width: 213px;
}

body.branded #header h1 {
  background-image: url(images/company_logo);
  font-size: 20px;
  line-height: 20px;
  height: 20px;
  padding-top: 73px;
  text-indent: 0;
  width: 500px;
}

body.branded #header h1.largelogo {
  text-indent: -9999px;
}

body.branded #header h2 {
  background: url(images/logo_small.png) no-repeat;
  height: 46px;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  top: 20px;
  width: 106px;
}

#header p {
  position: absolute;
  right: 0;
  top: 96px;
}

#header p span {
  background: url(images/icons/user.gif) no-repeat left center;
  font-weight: bold;
  padding: 5px 0 5px 20px;
}

#header p a {
  margin-left: 2em;
}

#header p#login a {
  margin-left: 0;
}

/* SECTION: Navigation
-----------------------------------*/

#nav {
  background: #8ec73f url(images/nav-left.gif) no-repeat left center;
  border-top: 10px solid #fff;
  clear: both;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  list-style: none;
  padding: 4px 8px 0;
}

#nav li {
  float: left;
}

#nav #admin-nav {
  float: right;
}

#nav a {
  color: #28591e;
  display: block;
  padding: 3px 8px 7px;
  text-decoration: none;
}

#nav a:hover,
#nav a:focus,
#nav a:active {
  background: transparent;
  color: #000;
}

#nav li {
  background: #d3eebb url(images/tab-light-left.gif) no-repeat left center;
}

#nav li a,
#nav li a:hover,
#nav li a:focus,
#nav li a:active {
  background: url(images/tab-light-right.gif) no-repeat right center;
}

#nav li.selected {
  background: #fff url(images/tab-left.gif) no-repeat left center;
}

#nav li.selected a,
#nav li.selected a:hover,
#nav li.selected a:focus,
#nav li.selected a:active {
  background: url(images/tab-right.gif) no-repeat right center;
  color: #28591e;
}

#subnav {
  padding: 4px 14px;
  border-bottom: 3px solid #496a31;
}

#subnav li {
  display: inline;
  font-size: 1.1667em;
  list-style: none;
}

#subnav li.sub {
  font-size: 0.8333em;
}

#subnav li a {
  color: #8ec73f;
  padding: 3px 5px;
}

#subnav li.sub a {
  padding: 3px;
  margin-left: -3px;
  margin-right: 8px;
}

#subnav li a:hover {
  background-color: #8ec73f;
  color: #fff;
}

#subnav li.selected a {
  background: #496a31;
  color: #fff;
  text-decoration: none;
}

/* GENERAL: General styling
-----------------------------------*/

a:link, a:visited {
  color: #6a92a0;
}

a:hover, a:focus, a:active {
  background: #6a92a0;
  color: #fff;
  text-decoration: none;
}

#content h2 {
  color: #8ec73f;
  font-size: 1.5em;
  line-height: 1.1667;
}

#content h2 a {
  font-size: 0.7778em;
  font-weight: normal;
}

#content h3 {
  color: #484430;
  font-size: 1.1667em;
  line-height: 1.5;
  margin-top: 2.0714em;
}

#content h2 + h3 {
  margin-top: 0.8571em;
}

#content p {
  margin-bottom: 1.75em;
}

#content ul,
#content ol {
  margin: 1.75em 0 1.75em 3.5em;
}

/* PAGE: Packages
---------------------------------------------*/

.price {
  background: url(images/price-button.png) no-repeat;
  color: #fff;
  font: 24px Helvetica, Arial, sans-serif;
  height: 60px;
  line-height: 60px;
  padding: 0 3px 3px 0;
  position: absolute;
  right: -15px;
  text-align: center;
  top: -15px;
  width: 60px;
}

.price span.currency {
  opacity: 0.66;
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
}

.price span.amount {
  font-size: 30px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  vertical-align: top;
}

.group_price {
  height: 55px;
  padding-top: 5px;
}

.group_price span.amount {
  font-size: 24px;
  line-height: 60px;
}

.group_price span.from {
  font-size: 10px;
  line-height: 16px;
  position: absolute;
  text-align: center;
  width: 60px;
  top: 8px;
}

/* HACK: Easy Clearing
---------------------------------------------*/

#wrapper:after,
#header:after,
#nav:after,
#prompts:after,
#user-types:after,
#type-test #image-pair:after,
ul.actions:after,
dl.progress:after,
ul.package-summaries dl.date:after,
#drag_container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

#admin-preview-box {
  position: absolute;
  right: 10px;
  top: 10px;
  background: blue;
  border: 1px solid black;
  padding: 1em;
  text-align: center;
}