/*$Id$*/

/**
 * @file
 * This file should ONLY contain reusable generic library classes; keep it short
   and sweet.  Please comment all library classes for easy reuse.
 */

/**
 * Adds a top gradient to a block element, e.g. front page news table
 */
.top-gradient {
  background: transparent url('../images/bg-titles-gradient.png') repeat-x top;
  position: relative;
  padding-top: 40px; /*make room for the gradient*/
  margin-bottom: 15px;
}
.top-gradient .gradient-title {
  font-size: 19px;
  line-height: 1.2em;
  font-weight: bold;
  color: #333;
}
.top-gradient .gradient-title,
.top-gradient .gradient-action-link {
  position: absolute;
}
.top-gradient .gradient-action-link,
.top-gradient .gradient-title {
  top: 10px;
}
.top-gradient .gradient-title {
  left: 10px;
}
.top-gradient .gradient-action-link {
  right: 10px;
  margin: 0;
}

/**
 * Blue Circle Arrow
 *
 * - notice the <span> that goes inside the <a>
 * - <a class="blue-circle-arrow" href="[path]"><span>Click Here</span></a>
 */
a.blue-circle-arrow {  
  /* Sliding right image */
  background: transparent url("../images/blue-circle-arrow-right.png") no-repeat right top; 
  display: block;
  float: left;
  margin: 10px 0; /* CHANGE THIS TO THE DESIRED MARGIN AROUND THE ENTIRE BUTTON */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding-right: 13px; /* CHANGE THIS VALUE ACCORDING TO BUTTON RIGHT PADDING */
  
  /* FONT PROPERTIES */
  text-align: center;
  color: #025A91 !important;
  font-size: 12px;
  font-weight: bold;
}
a.blue-circle-arrow span {
  /* Background left image */ 
  background: transparent url("../images/blue-circle-arrow-left.png") no-repeat left top;
  display: block;
  line-height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding: 0 0 0 27px; /* CHANGE THIS VALUE ACCORDING TO RIGHT BUTTON IMAGE WIDTH */
}
a:hover.blue-circle-arrow {
  background-position: bottom right;
  text-decoration: none;
}
a:hover.blue-circle-arrow span {
  background-position: bottom left;
}

/**
 * Blue Download
 *
 * - notice the <span> that goes inside the <a>
 * - <a class="blue-circle-arrow" href="[path]"><span>Click Here</span></a>
 */
a.blue-download {
  
  /* Sliding right image */
  background: transparent url("../images/blue-download-right.png") no-repeat right top; 
  display: block;
  float: left;
  margin: 10px 0; /* CHANGE THIS TO THE DESIRED MARGIN AROUND THE ENTIRE BUTTON */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding-right: 13px; /* CHANGE THIS VALUE ACCORDING TO BUTTON RIGHT PADDING */
  
  /* FONT PROPERTIES */
  text-align: center;
  color: #fff !important;
  font-size: 12px;
  font-weight: bold;
}
a.blue-download span {
  /* Background left image */ 
  background: transparent url("../images/blue-download-left.png") no-repeat left top;
  display: block;
  line-height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding: 0 0 0 30px; /* CHANGE THIS VALUE ACCORDING TO RIGHT BUTTON IMAGE WIDTH */
}
a:hover.blue-download {
  background-position: bottom right;
  text-decoration: none;
}
a:hover.blue-download span {
  background-position: bottom left;
}

/**
 * Blue Camera
 *
 * - notice the <span> that goes inside the <a>
 * - <a class="button" href="[path]"><span>Click Here</span></a>
 */
a.blue-camera {
  /* Sliding right image */
  background: transparent url("../images/blue-camera-right.png") no-repeat right top; 
  display: block;
  margin: 0; /* CHANGE THIS TO THE DESIRED MARGIN AROUND THE ENTIRE BUTTON */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding-right: 7px; /* CHANGE THIS VALUE ACCORDING TO BUTTON RIGHT PADDING */
  float: right;
  
  /* FONT PROPERTIES */
  text-align: center;
  color: #eee;
  font-size: 13px;
  font-weight: bold;
}
a.blue-camera span {
  /* Background left image */ 
  background: transparent url("../images/blue-camera-left.png") no-repeat left top;
  display: block;
  line-height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding: 0 0 0 28px; /* CHANGE THIS VALUE ACCORDING TO RIGHT BUTTON IMAGE WIDTH */
}
a:hover.blue-camera {
  background-position: bottom right;
  text-decoration: none;
}
a:hover.blue-camera span {
  background-position: bottom left;
}

/**
 * Blue Circle Arrow
 *
 * - notice the <span> that goes inside the <a>
 * - <a class="button" href="[path]"><span>Click Here</span></a>
 */
a.grey-button {
  /* Sliding right image */
  background: transparent url("../images/grey-button-right.png") no-repeat right top; 
  display: block;
  margin: 0; /* CHANGE THIS TO THE DESIRED MARGIN AROUND THE ENTIRE BUTTON */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding-right: 7px; /* CHANGE THIS VALUE ACCORDING TO BUTTON RIGHT PADDING */
  float: right;
  
  /* FONT PROPERTIES */
  text-align: center;
  color: #eee;
  font-size: 13px;
  font-weight: bold;
}
a.grey-button span {
  /* Background left image */ 
  background: transparent url("../images/grey-button-left.png") no-repeat left top;
  display: block;
  line-height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  height: 26px; /* CHANGE THIS VALUE ACCORDING TO BUTTON IMAGE HEIGHT */
  padding: 0 0 0 9px; /* CHANGE THIS VALUE ACCORDING TO RIGHT BUTTON IMAGE WIDTH */
}
a:hover.grey-button {
  background-position: bottom right;
  text-decoration: none;
}
a:hover.grey-button span {
  background-position: bottom left;
}

/**
 * Parchment
 */
.parchment-content {
  margin: 9px 15px 14px;
  position: relative;
}
#sidebar-last .parchment-content,
#sidebar-last .parchment-content p,
.parchment-content,
.parchment-content p {
  line-height: 1.4em;
  font-size: 14px;
  color: #666;
}
.sidebar-parchment {
  width: 304px;
  background: url('../images/sidebar-parchment-bg.jpg') repeat-y center;
  position: relative;
  padding: 1px;
}
.sidebar-parchment .title-sans {
  font-size: 19px;
  margin-bottom: 8px;
}
.sidebar-parchment .parchment-bottom,
.sidebar-parchment .parchment-top {
  width: 304px;
  height: 20px;  
  position: absolute;
}
.sidebar-parchment .parchment-top {
  background: url('../images/sidebar-parchment-top.jpg') no-repeat center;
  top: 0;
}
.sidebar-parchment .parchment-bottom {
  background: url('../images/sidebar-parchment-bottom.jpg') no-repeat center;
  bottom: 0;
}


/**
 * Take Action Font Styles
 */
.take-action-subtitle,
.take-action-title {
  color: #222;
  font-family: 'Arial', sans-serif;
  font-weight: normal;
}
.take-action-title {
  font-size: 40px;
  line-height: 60px;
}
.take-action-subtitle {
  font-size: 23px;
  margin-top: 10px;
}

.inside-title {
  color:#999;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-style: italic;
  margin: 0 0 10px 0;
}