/*

Spark
Responsive dashboard prototype
Preston So
Acquia

*/

/* @group Base elements */

body {
  font: 0.8em/1.6em 'Open Sans', 'Lucida Grande', 'Segoe UI', sans-serif;
  margin: 0;
  padding: 40px 0 0;
  background: transparent url(images/spark_bg_tile.png);
}
body.admin-expanded {
  margin-left: 260px;
}
a {
  color: #0059B2;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 10px 0;
}
h1 {
  font-size: 1.538em;
}
h2 {
  font-size: 1.385em;
}
h3 {
  font-size: 1.231em;
}

/* @group Spark icons */

[data-icon]:before {
  font-family: 'Spark Icons', symbol;
  margin-right: 5px;
  content: attr(data-icon);
  speak: none;
}

/* @group Toolbar */

#toolbar {
  font-weight: bold;
  color: #ccc;
  background-color: #010101;
  padding: 8px 0;
  zoom: 1;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
#toolbar:before, #toolbar:after {
  display: table;
  content: "";
}
#toolbar:after {
  clear: both;
}
#toolbar ul {
  margin: 0;
  padding: 0;
}
#toolbar ul li {
  list-style: none;
  display: inline;
  padding: 8px 12px;
}
#toolbar ul li a {
  color: #ccc;
}
#toolbar ul li a:hover, #toolbar ul li a:active, #toolbar ul li.active a {
  text-decoration: none;
  color: #fff;
}
#toolbar ul [data-icon]:before {
  font-size: 180%;
}
#toolbar ul#toolbar-menu {
  float: left;
  width: 50%;
}
#toolbar ul#toolbar-menu .screen-reader-text {
  position: relative;
  bottom: 3px;
}
#toolbar ul#toolbar-user {
  float: right;
  width: 50%;
  text-align: right;
}
#toolbar ul#toolbar-user .screen-reader-text {
  position: relative;
  bottom: 3px;
}
#toolbar ul#toolbar-user li.pulldown [data-icon]:before {
  font-size: 100%;
}
#toolbar ul#toolbar-user li.pulldown .screen-reader-text {
  display: none;
  position: relative;
  bottom: 0;
}

/* @group Admin toolbar */

#admin-toolbar {
  font-size: 110%;
  font-weight: bold;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  margin-top: 42px;
  z-index: 100;
  width: 260px;
  background-color: white;
  border-right: 1px solid #999;
}
#admin-toolbar.not-displayed {
  width: 0;
}
#admin-toolbar.not-displayed * {
  display: none;
}
#admin-toolbar.not-displayed .admin-toggle {
  display: block;
}
#admin-toolbar ul {
  margin: 0;
  padding: 0;
}
#admin-toolbar ul li {
  list-style: none;
}
#admin-toolbar ul li a {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 10px 15px;
  color: #333;
}
#admin-toolbar ul li a:hover, #admin-toolbar ul li a:active,
#admin-toolbar ul li.active a, #admin-toolbar ul li a.active {
  background-color: #eee;
  text-decoration: none;
}
#admin-toolbar ul li [data-icon]:before {
  color: #666;
}
#admin-toolbar ul li ul {
  display: none;
}
#admin-toolbar ul li ul.displayed {
  background-color: #eee;
  padding: 0 0 15px 0;
  display: block;
}
#admin-toolbar ul li ul li a {
  font-size: 85%;
  padding: 0 0 0 40px;
  font-weight: normal;
}
#admin-toolbar ul li ul li a:hover, #admin-toolbar ul li ul li a:active {
  text-decoration: underline;
}
#admin-toolbar .admin-toggle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 37px;
  background: #333 url('images/pullout.png') no-repeat;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 3px 3px #999;
  -moz-box-shadow: 0 3px 3px #999;
  box-shadow: 0 3px 3px #999;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 1000;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
}
.admin-expanded #admin-toolbar .admin-toggle {
  background-position: 0 -37px;
  -webkit-border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  left: 246px;
}

/* @group Tab bar */

#tab-bar a:hover, #tab-bar a:active {
  text-decoration: none;
}
#tab-bar .tabs.primary {
  overflow: hidden;
  position: relative;
  background-color: #555;
  -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  z-index: 100;
}
#tab-bar .tabs.secondary {
  clear: both;
  overflow: hidden;
  position: relative;
  background-color: #333;
  -moz-box-shadow: 0 4px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 4px 3px rgba(0,0,0,0.2);
  box-shadow: 0 5px 3px rgba(0,0,0,0.2);
  z-index: 150;
}

/* @group Branding */

#branding {
  overflow: hidden;
  padding: 25px 20px 0 20px; /* LTR */
  position: relative;
}
.breadcrumb {
  padding-bottom: 10px;
}
#page-title {
  background: #ddd;
  padding-top: 20px;
}
#branding h1.page-title {
  color: #555;
  margin: 0;
  padding-bottom: 10px;
  font-size: 1.9em;
  font-weight: normal;
  float: left; /* LTR */
}

/* @group Tabs */

ul.primary {
  /* float: right; */
  font-size: 1em;
  height: 3.2em;
  margin: 0;
  padding: 0;
}
ul.primary li {
  float: left; /* LTR */
  list-style: none;
}
ul.primary li a:link,
ul.primary li a.active,
ul.primary li a:active,
ul.primary li a:visited,
ul.primary li a:hover,
ul.primary li.active a {
  display: block;
  float: left; /* LTR */
  height: 100%;
  line-height: 1.8em;
  padding: 10px 15px 15px;
  background: none;
  color: #ccc;
  font-weight: bold;
}
ul.primary li a {
  background: none;
}
ul.primary li.active a,
ul.primary li.active a.active,
ul.primary li.active a:active,
ul.primary li.active a:visited {
  background-color: #333;
  color: #fff;
}
ul.primary li a:hover {
  color: #fff;
}
ul.primary li.active a:hover {
  color: #eee;
}

/* @group Page */

#page {
  padding: 20px 0 40px 0; /* LTR */
  margin-right: 40px; /* LTR */
  margin-left: 40px; /* LTR */
  position: relative;
  color: #333;
}

/* @group Dashboard actions */

#dashboard-actions {
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 0 8px #ccc;
  -moz-box-shadow: 0 0 8px #ccc;
  box-shadow: 0 0 8px #ccc;
  width: 50%;
  padding: 25px 30px 15px;
  background-color: white;
  margin: 0 auto 25px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
#dashboard-actions ul {
  margin: 0;
  padding: 0;
  zoom: 1;
}
#dashboard-actions ul:before, #dashboard-actions ul:after {
  display: table;
  content: "";
}
#dashboard-actions ul:after {
  clear: both;
}
#dashboard-actions ul#dashboard-action-list li {
  list-style: none;
  display: inline;
  float: left;
  width: 25%;
  padding-top: 20px;
}
#dashboard-actions ul#dashboard-action-list li a {
  display: block;
  text-align: center;
}
#dashboard-actions ul#dashboard-action-list li a:hover, #dashboard-actions ul li a:active {
  text-decoration: none;
}
#dashboard-actions ul#dashboard-action-list li a span {
  font-size: 350%;
  padding-bottom: 10px;
  display: block;
  color: rgba(153,153,153, 0.8);
  text-shadow: 1px 2px 3px #fff, 0 0 0 #000, 1px 2px 3px #fff;
}
#dashboard-actions ul#dashboard-action-list li a [data-icon]:before {
  margin-right: 0;
}
#dashboard-actions ul#dashboard-action-list li a:hover span,
#dashboard-actions ul#dashboard-action-list li a:active span,
#dashboard-actions ul#dashboard-action-list li.active span {
  text-shadow: none;
  color: #575757;
}
#dashboard-actions ul#dashboard-action-list li a span.screen-reader-text {
  font-size: 100%;
  padding-top: 10px;
  color: #333;
}
#dashboard-actions ul#dashboard-action-list li a:hover span.screen-reader-text,
#dashboard-actions ul#dashboard-action-list li a:active span.screen-reader-text,
#dashboard-actions ul#dashboard-action-list li.active span.screen-reader-text {
  color: #0059b2;
  font-weight: bold;
}
#dashboard-actions ul.dashboard-list {
  display: none;
}
#dashboard-actions ul.dashboard-list.displayed {
  display: block;
  width: 80%;
  margin: 0 0 25px 20%;
  clear: both;
}
#dashboard-actions ul.dashboard-list li {
  width: 50%;
  float: left;
  padding-top: 15px;
  list-style: none;
}
#dashboard-actions ul.dashboard-list li a {
  float: left;
  font-size: 105%;
}
#dashboard-actions ul.dashboard-list li a:hover,
#dashboard-actions ul.dashboard-list li a:active {
  text-decoration: underline;
}

/* @group Dashboard actions, list-specific */

ul#dashboard-find-list {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #999;
}
ul#dashboard-find-list.displayed {
  margin: 15px 10% 0 !important;
  width: 80% !important;
}
ul#dashboard-find-list li {
  float: left;
  list-style: none;
  height: 40px;
  padding: 0 !important;
}
ul#dashboard-find-list li span {
  padding: 10px;
  display: block;
}
ul#dashboard-find-list li span span {
  padding: 0;
  display: inline;
}
ul#dashboard-find-list li .screen-reader-text {
  display: none;
}
ul#dashboard-find-list li.find-type {
  color: #777;
  width: 60%;
}
ul#dashboard-find-list li.find-select {
  border: 1px solid #c8c8c8;
  width: 29%;
  font-weight: bold;
	background-image:-moz-linear-gradient(rgb(255,255,255) 0%,rgb(221,221,221) 100%); 
	background-image:-webkit-gradient(linear,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(221,221,221)));
	background-image:-webkit-linear-gradient(rgb(255,255,255) 0%,rgb(221,221,221) 100%);
	background-image:linear-gradient(rgb(255,255,255) 0%,rgb(221,221,221) 100%);
}
ul#dashboard-find-list li.find-select a {
  color: #494949;
  zoom: 1;
}
ul#dashboard-find-list li.find-select:before,
ul#dashboard-find-list li.find-select:after {
  display: table:
  content: "";
}
ul#dashboard-find-list li.find-select:after {
  clear: both;
}
ul#dashboard-find-list li.find-select span {
  display: block;
}
ul#dashboard-find-list li.find-select span.find-select-left {
  float: left;
  width: 80%;
}
ul#dashboard-find-list li.find-select span.find-select-right {
  float: right;
  width: 20%;
  text-align: right;
}
ul#dashboard-find-list li.find-submit {
  background-color: #488fe2;
  border: 1px solid #488fe2;
  border-right-width: 2px;
  width: 10%;
}
ul#dashboard-find-list li.find-submit a {
  color: white;
  font-size: 125%;
}
ul#dashboard-find-list a:hover, ul#dashboard-find-list a:active {
  text-decoration: none !important;
}

/* @group Content */

#content {
  zoom: 1;
}
#content:before, #content:after {
  display: table;
  content: "";
}
#content:after {
  clear: both;
}
#content .region-content-left {
  float: left;
  width: 49%;
  margin-right: 1%;
}
#content .region-content-right {
  float: right;
  width: 49%;
  margin-left: 1%;
}

/* @group Dashboard tables */

.dashboard-table {
  -moz-box-shadow:0px 0px 3px 3px rgba(0,0,0,0.03);
  -webkit-box-shadow:0px 0px 3px 3px rgba(0,0,0,0.03);
  box-shadow:0px 0px 3px 3px rgba(0,0,0,0.03);
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 0 0 10px;
}
.dashboard-table-header {
  zoom: 1;
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;
}
.dashboard-table-header:before, .dashboard-table-header:after {
  display: table;
  content: "";
}
.dashboard-table-header:after {
  clear: both;
}
.dashboard-table-header h2 {
  font-weight: normal;
  float: left;
}
.dashboard-table-header ul {
  margin: 0;
  padding: 0;
  float: left;
}
.dashboard-table-header ul li {
  list-style: none;
}
.dashboard-table-header ul .screen-reader-text {
  display: none;
}
.dashboard-table-header ul.dashboard-table-move {
  font-size: 150%;
  padding-top: 10px;
}
.dashboard-table-header ul.dashboard-table-move li a {
  color: #333;
  display: block;
}
.dashboard-table-header ul.dashboard-table-move li a:hover,
.dashboard-table-header ul.dashboard-table-move li a:active {
  color: black;
  text-decoration: none;
}
.dashboard-table-header ul.dashboard-table-toggle {
  float: right;
}
.dashboard-table-header ul.dashboard-table-toggle li a {
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #333;
  padding: 5px 10px;
  margin-top: 3px;
}
.dashboard-table-header ul.dashboard-table-toggle li a:hover,
.dashboard-table-header ul.dashboard-table-toggle li a:active {
  text-decoration: none;
  background-color: #eee;
  color: #0059b2;
}

/* @group Tables */

table {
  width: 100%;
  font-size: 0.923em;
  padding: 15px;
}
table td,
table th {
  vertical-align: middle;
  padding: 5px 8px;
  border: 0;
  color: #555;
  font-size: 1.1em;
}
table th {
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
table tbody.not-displayed {
  display: none;
}

/* @group Media queries */

@media (max-width: 960px) {
  
  #content .region-content-left, #content .region-content-right {
    width: 100%;
    margin: 0;
    float: none;
  }

  #dashboard-actions {
    width: 80%;
  }

}

@media (max-width: 480px) {

  body.admin-expanded {
    margin-left: 0;
  }
  #toolbar .screen-reader-text {
    display: none;
  }
  #admin-toolbar {
    width: 100%;
  }
  .admin-expanded #admin-toolbar .admin-toggle {
    position: absolute;
    left: 96.5%;
  }
  #tab-bar {
    display: none;
  }
  #dashboard-actions {
    width: 80%;
    font-size: 95%;
  }
  #dashboard-actions ul.dashboard-list.displayed {
    display: block;
    width: 90%;
    margin: 0 0 25px 10%;
    clear: both;
  }
  #dashboard-actions ul.dashboard-list li {
    width: 100%;
  }

}

/* @end */