/*
/*  application.css
*/

body {
  background-color: #384958;
}

* html body {
  margin-top: 58px;
}

body, td {
  font-family: "Lucida Grande", 
    Verdana, "Trebuchet MS", sans-serif;
  font-size: 13px;
}

a {
  color: #20b2e9;
  text-decoration: none;
}

a:hover {
  color: #0084b6;
}

em {
  font-style: normal;
  font-weight: bold;
}

tt {
  font-family: "Monaco", monospace;
  color: #000;
}

/*  B R O W S E R  */
/*  Styles the Explorer warning.  */

html > body div#browser {
  display: none;
}

div#browser {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 49px;
  text-align: center;
  background-image: url("../images/browser.png");
  background-repeat: repeat-x;
}

div#browser p {
  margin: 4px 0px;
  margin-bottom: -2px;
  color: #fff;
}

/*  T I T L E  */
/*  Styles the title bar and logo.  */

div#title {
  position: relative;
  width: 820px;
  height: 54px;
  margin: 0px auto;
  background-image: url("../images/title.png");
  background-repeat: no-repeat;
  background-color: #20b2e9;
}

div#title h1 {
  position: absolute;
  bottom: 7px;
  left: 26px;
  margin: 0px;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 27px;
  color: #000;
  letter-spacing: -1px;
}

html > body div#title h1 + div.shading {
  position: absolute;
  width: 180px;
  height: 12px;
  top: 30px;
  left: 22px;
  background-image: url("../images/shading/logo.png");
  background-repeat: repeat-x;
}

div#title span.account {
  position: absolute;
  top: 24px;
  right: 34px;
  text-align: right;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #004569;
}

div#title span.account em {
  color: #000;
}

html > body div#title span.account + div.shading {
  position: absolute;
  width: 180px;
  height: 6px;
  top: 34px;
  right: 28px;
  background-image: url("../images/shading/account.png");
  background-repeat: repeat-x;
}

div#title a {
  position: relative;
  color: #000;
  z-index: 2;
}

div#title a:hover {
  color: #004569;
}

/*  H E A D E R  */
/*  Styles the fashionable alternative to buttons.  */

div#header {
  width: 820px;
  height: 20px;
  margin: 0px auto;
  background-image: url("../images/header.png");
  background-repeat: no-repeat;
  background-color: #fff;
}

/*  B U T T O N S  */
/*  Styles the menu buttons.  */

ul#buttons {
  position: relative;
  width: 760px;
  height: 48px;
  margin: 0px auto;
  padding: 0px 30px;
  list-style: none;
  background-repeat: no-repeat;
  background-color: #fff;
}

ul#buttons.two   { background-image: url("../images/buttons-two.png"); }
ul#buttons.three { background-image: url("../images/buttons-three.png"); }

* html ul#buttons {
  margin-bottom: -2px;
}

ul#buttons li {
  display: block;
  float: left;
  width: 220px;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 8px;
  margin-right: 5px;
}

ul#buttons li.current {
  background-image: url("../images/current.png");
  background-repeat: no-repeat;
}

ul#buttons li.normal a:hover {
  background-image: url("../images/hover.png");
  background-repeat: no-repeat;
}

ul#buttons li a {
  display: block;
  width: 220px;
  padding: 7px 0px;
  text-align: center;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #5c5e58;
}

ul#buttons li.current a,
ul#buttons li a:hover {
  color: #000;
}

/*  C O N T E N T  */
/*  Styles the content area.  */

div#content {
  position: relative;
  width: 740px;
  min-height: 320px;
  margin: 0px auto;
  padding: 10px 40px;
  background-image: url("../images/content.png");
  background-repeat: repeat-y;
  background-color: #fff;
}

div#content.narrow {
  width: 520px;
  padding: 10px 150px;
}

h2 {
  margin-top: 0px;
  margin-bottom: -12px;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 24px;
  letter-spacing: -1px;
}

html > body h2 + div.shading {
  position: relative;
  height: 14px;
  margin-bottom: -10px;
  background-image: url("../images/shading/headline.png");
  background-repeat: repeat-x;
}

h2 a {
  position: relative;
  margin-left: 12px;
  font-family: "Lucida Grande", 
    Verdana, "Trebuchet MS", sans-serif;
  font-size: 13px;
  letter-spacing: 0px;
  z-index: 2;
}

h3 {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 14px;
  margin-bottom: -12px;
}

p {
  color: #555;
  line-height: 18px;
}

p em {
  color: #000;
}

/*  F O R M S  */
/*  Styles forms and form fields.  */

form {
  margin: 24px;
}

form * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

form table {
  position: relative;
  margin: 0px auto;
  left: -24px;
  border-collapse: collapse;
}

form table th,
form table td {
  padding: 11px 6px 8px 6px;
  background-image: url("../images/form.png");
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

form table tr td {
  background-position: 100% 100%;
}

form table tr.actions th,
form table tr.actions td,
div.actions {
  background: none;
  color: #999;
  font-weight: bold;
}

form table th {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 14px;
  text-align: right;
  padding-top: 16px;
  padding-right: 8px;
  vertical-align: top;
}

form table tr.field input {
  font-size: 13px;
  width: 220px;
  margin-bottom: 6px;
}

form table tr.field select {
  font-size: 16px;
  margin: 2px 6px 6px -1px;
}

form table tr.field textarea {
  font-family: "Lucida Grande", "Verdana", sans-serif;
  font-size: 13px;
  line-height: 20px;
  width: 220px; height: 120px;
  padding: 3px;
  border: none;
  resize: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

form table tr.field p.note {
  margin: 0px;
  margin-top: -2px;
  font-size: 11px;
  color: #828874;
}

form table tr.field div.image img {
  display: block;
  margin: 0 0 12px;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

form table tr.actions input.submit,
div.actions input.submit {
  width: 90px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 2px;
}

div.actions {
  text-align: center;
}

/*  C A T E G O R I E S  */
/*  Formatting for the iTunes category list.  */

ul#categories {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

ul#categories ul.children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
}

ul#categories li {
  margin: 2px 0;
}

ul#categories label {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 14px;
  color: #000;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
}

ul#categories label small {
  font-family: "Lucida Grande", "Verdana", sans-serif;
  font-size: 11px;
  color: #7f7f7f;
  font-weight: normal;
  margin-left: 10px;
}

ul#categories input {
  font-size: 16px;
}

ul#categories ul.disabled {
  display: none;
}

ul#categories ul.disabled label {
  font-weight: normal;
  color: #9c9c9c;
}

/*  E R R O R  */
/*  Styles form error messages.  */

div.error {
  margin: 18px 36px;
  margin-bottom: -8px;
}

/*  I T E M S  */
/*  Styles the items.  */

ol.items {
	padding-left: 21px;
	padding-right: 0px;
	margin-left: 16px;
	margin-right: 21px;
	font-family: Georgia, Times, 
		"Times New Roman", Serif;
	font-size: 16px;
	color: #a4a59d;
}

ol.items li {
	position: relative;
	padding: 10px 0px;
	border-bottom: 1px solid #e7e7e7;
}

ol.items li:hover {
  background-image: url("../images/item.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
	border-bottom: 1px solid #dadace;
}

ol.items li.empty,
ol.items li.empty:hover {
  list-style: none;
  border: none;
  background: none;
}

ol.items li h3 {
	margin: 0px;
	margin-right: 12px;
	margin-left: 8px;
	display: inline;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 16px;
	color: #5a5a56;
}

ol.items li:hover h3 {
	color: #000;
}

ol.items li p {
	display: inline;
  font-family: "Lucida Grande", 
    Verdana, "Trebuchet MS", sans-serif;
	font-size: 11px;
	color: #a5a5a5;
}

ol.items li:hover p {
	color: #7f7f7f;
}

ol.items li div.options {
	position: absolute;
	top: 9px; 
	right: 10px;
}

ol.items li input {
	width: 75px;
	margin-left: 4px;
	opacity: 0.5;
}

ol.items li:hover input {
	opacity: 1.0;
}

/*  M I S C E L L A N E O U S  */
/*  Styles all kinds of stuff.  */

div.script {
  margin-bottom: -6px;
}

div.script textarea {
  font-family: "Monaco", monospace;
  font-size: 13px;
  width: 100%;
  height: 140px;
  opacity: 0.5;
}

div.script textarea:hover {
  opacity: 1.0;
}

ul.fork {
  list-style: none;
  padding: 0px;
}

ul.fork li {
  font-weight: bold;
}

ul.fork li a:after {
  content: "\00BB";
  font-size: 15px;
  margin-left: 6px;
}

table.stylesheets {
  border-collapse: collapse;
  width: 100%;
}

table.stylesheets td {
  border: 1px solid #ddd;
  padding: 4px 6px;
}

table.stylesheets td.label {
  font-weight: bold;
  text-align: right;
}

table.stylesheets td.value {
  font-family: "Monaco", monospace;
}

table.stylesheets td.value a {
  text-decoration: underline;
}

/*  F O O T E R  */
/*  Styles the footer.  */

div#footer {
  position: relative;
  width: 820px;
  height: 62px;
  margin: 0px auto;
  background-image: url("../images/footer.png");
  background-repeat: no-repeat;
  background-color: #fff;
}
