/*------------------------+
 | Site: Budget Breakdown |
 | Part: Master styles    |
 +------------------------*/

/* Imports
=====================================================================*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Droid+Serif:400,400italic,700,700italic);
@import "../styles/reset.css";


/* Fonts
======================================================================*/
body, #credit { font-family: "Droid Sans", Arial, sans-serif; }
#header { font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; }


/* Basics
======================================================================*/
a { color: #f85204; text-decoration: none; }
a:hover { text-decoration: underline; }

body {
  background: #213b57 url(../images/bg.jpg);
  font-size: 15px;
  line-height: 1.45;
  padding: 50px 0;
}

dl, ol, p, ul, table { margin-bottom: 1.5em; }
cite, em { font-style: italic; }
h1 { font-size: 39px; margin-bottom: 0.3em; line-height: 1.1; }
h1, h2 { color: #264870; }
h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h2 { font-size: 25px; line-height: 1.2; margin-bottom: 0.3em; }
h3 { font-size: 20px; line-height: 1.2; }
hr { background: #e5e6e7; border: 0; clear: both; color: #e5e6e7; height: 1px; margin: 1em 0; }
ol { list-style: decimal; }
ol, ul { margin-left: 2em; }
table { border-collapse: collapse; width: 100% !important; }
td { vertical-align: top; }
sup { font-size: 11px; vertical-align: top; }
ul { list-style: disc; }

/* Stock classes */
.l { float: left; }
.r { float: right; }


/* Core layout
======================================================================*/
.clear { clear: both; }
#page { margin: 0 auto; width: 980px; }

/* Content */
#content {
  background: #fff;
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.33);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.33);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.33);
  clear: both;
}

#content-primary, #content-secondary, #content-tertiary { padding: 30px 30px 15px }
#content-secondary { background: #e1e9f2; }
#content-tertiary { background: #d3dfed; padding-bottom: 30px; }


/* Content
======================================================================*/

/* Actions */
.action {
  background: #f9dd87;
  background: -moz-linear-gradient(top, #f9dd87 0%, #f4c130 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9dd87), color-stop(100%,#f4c130));
  background: -webkit-linear-gradient(top, #f9dd87 0%,#f4c130 100%);
  background: -o-linear-gradient(top, #f9dd87 0%,#f4c130 100%);
  background: -ms-linear-gradient(top, #f9dd87 0%,#f4c130 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9dd87', endColorstr='#f4c130',GradientType=0 );
  background: linear-gradient(top, #f9dd87 0%,#f4c130 100%);
  border: 1px solid #b2b2b2;
  -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	box-shadow: 0 1px 3px #999;
	color: #653733;
	display: inline-block;
	font-size: 21px;
	font-weight: bold;
	padding: 0.3em 0.7em 0.2em;
	white-space: nowrap;
}

/* Breakdown table */
#breakdown a { cursor: pointer; }
#breakdown .num { text-align: right; }
#breakdown td, #breakdown th { border: 1px solid #ddd; font-size: 14px; padding: 0.3em 10px; }
#breakdown th { background: #e1e9f2; font-size: 12px; font-weight: bold; text-align: left; }
#breakdown th.charts { width: 50%; }
#breakdown th.controls { width: 20px; }
#breakdown th span { color: #f85204; cursor: pointer; }

#breakdown th.sorting_asc span {
  background: url(../images/sort-up.png) no-repeat 100% 50%;
  padding-right: 10px;
}

#breakdown th.sorting_desc span {
  background: url(../images/sort-down.png) no-repeat 100% 50%;
  padding-right: 10px;
}

  /* Bars */
  .bars span { border-style: solid; border-width: 5px 0; display: block; height: 1px; margin: 1px 0; }
  
  /* Colors */
  .budgeted { color: #264870; }
  .spent { color: #7d9abb; }
  .bars .budgeted { background: #264870; border-color: #264870; }
  .bars .spent { background: #7d9abb; border-color: #7d9abb; }
  
  /* Expanded rows */
  #breakdown .expanded-content td {
    border-bottom: 2px solid #7f7f7f;
    border-top: 0;
    padding-top: 20px;
  }
  
  #breakdown .expanded-head td {
    border-top: 2px solid #7f7f7f;
    font-weight: bold;
  }
  
  .expanded-primary { float: left; width: 48%; }
  .expanded-secondary { float: right; width: 48%; }
  
  /* Nav */
  #breakdown-nav { margin-top: -1px; }
  #breakdown-nav a { display: block; padding: 0.4em 1em 0.3em; }
  #breakdown-nav li { float: left; }
  #breakdown-nav li.current { background: #264870; color: #fff; padding: 0.4em 1em 0.3em; }
  #breakdown-nav ul { list-style: none; margin: 0; }
  
  /* Scorecard */
  #scorecard { border-top: 3px solid #264870; margin: 0; }
  #scorecard h2 { font-size: 20px; }
  #scorecard h2, #scorecard p { margin: 0; }
  #scorecard td { border: 1px solid #ddd; border-bottom: 0; padding: 0.8em 10px; width: 25%; }
  #scorecard td#scorecard-desc { width: 50%; }  
  
  /* Stats */
  .stats { list-style: none; margin: 0 0 0.5em 0; }
  .stats li { display: inline; margin-right: 1em; white-space: nowrap; }
  .stats strong { font-size: 25px; }

/* FAQ */
#faq { list-style: none; margin-left: 0; }

/* Footer */
#footer { color: #7c8a9b; font-size: 12px; padding: 15px 0 0; }
#footer a { color: #fff; }

  /* Credit */
  #credit { float: right; text-align: right; }
  
  /* Sharing links */
  .share { list-style: none; margin: 0; }
  .share img { float: left; margin-right: 5px; }
  .share li { float: left; font-size: 11px; line-height: 1.1; width: 155px; }
  .share strong { display: block; font-size: 20px; }

/* Footnotes */
#footnotes { color: #777; font-size: 13px; }
#footnotes li { display: none; }
#footnotes ul { list-style: none; margin: 0; }

/* Header */
#header { color: #b7c6d6; font-size: 13px; padding-bottom: 30px; position: relative; }
#header a { color: #fff; }
#header-secondary { float: right; font-style: italic; padding-top: 23px; text-align: right; }
#header-secondary p { margin: 0; }

  /* Credit */
  #header #credit { color: #93a4b8; font-size: 11px; font-style: normal; }
  #header #credit a { color: #c8ced5; }
  
  /* Logo */
  #logo { float: left; }
  #logo-print { display: none; }

/* Icons */
a[class*="icon"] {
  background-repeat: no-repeat;
  background-position: 0 0.1em;
  padding: 3px 0 3px 22px;
}

.icon-facebook { background-image: url(../images/facebook-sm.png); }
.icon-twitter { background-image: url(../images/twitter-sm.png); }

/* Muted text */
.mute { color: #777; font-size: 13px; }

/* Tertiary content */
#content-tertiary .action { margin-right: 10px; }

/* Timelines */
#readme { display: none; left: -75px; position: absolute; top: 110px; }
#timeline { position: relative; }
#timeline-chart { height: 300px; }

  /* Sparklines */
  .sparkline { height: 100px; margin-bottom: 15px; }