/*
 * CMS Level Generic Elements that is available across entire website
*/

/***************** VISIBILITY CONTROL *********************/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be a collapsible fieldset that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.element-hidden {
  display: none;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user. Must
 * not be used for focusable elements (such as links and form elements) as this
 * causes issues for keyboard only or voice recognition users. "!important" is
 * used to prevent unintentional overrides.
 */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
/***************** END VISIBILITY CONTROL *********************/

/***************** Breadcrumb & Pager *********************/
.breadcrumb {
  padding-bottom: 0;
  margin: 1em 0;
  color:#292929;
}

.breadcrumb a {
  color:#292929;
}

ul.links {
  margin: 1em 0;
  padding: 0;
}

ul.links.inline {
  margin: 0;
  display: inline;
}

ul.links li {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em;
}

.pager {
  clear: both;
  margin: 1em 0;
  text-align: center;
}

.pager a,
.pager strong.pager-current {
  padding: 0.5em;
}

.feed-icons {
  margin: 1em 0;
}

.more-link {
  text-align: right;
  /* LTR */
}
/***************** END Breadcrumb & Pager *********************/

/***************** BLOCKS / WIDGET *********************/
.block {
  margin-bottom: 1em;
}

.block-region {
  color:#333;
}

.region-header-top .block {
  margin-bottom:0;
  float:right;
  margin-left:1em;
}
/***************** END BLOCKS / WIDGET *********************/

/***************** MENU *********************/
.block-menu ul.menu {
  padding-left: 0;
}

.block-menu ul.menu li {
  list-style: none;
  margin-bottom: 8px;
}

.block-menu ul.menu li a {
  color: #000000;
  text-transform: uppercase;
}

.block-menu ul.menu li a.active {
  color: #000000;
}

.block-menu ul.menu li:hover > a,
.block-menu ul.menu li a:hover {
  color: #808080;
  text-decoration:none;
}
/***************** END MENU *********************/

/***************** ALL NODES *********************/
.node-unpublished {
  /* background-color: #fff4f4; */
}

.node-unpublished div.unpublished,
.comment-unpublished div.unpublished {
  height: 0;
  overflow: visible;
  color: #d8d8d8;
  font-size: 45px;
  line-height: 1;
  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  word-wrap: break-word;
  /* A very nice CSS3 property */
}

.marker {
  color: #c00;
}

.node.node-unpublished .picture,
.comment.comment-unpublished .picture {
  position: relative;
  /* Otherwise floated pictures will appear below the "Unpublished" text. */
}
/***************** END ALL NODES *********************/

/***************** AJAX POPUP *********************/
.ajax-content {
  padding: 10px;
  font-size: 13px;
}

.ajax-content h2 {
  text-align: center;
}
/***************** END AJAX POPUP *********************/


/***************** OTHERS *********************/
div#admin-menu a,
div#admin-menu {
  font-size: 12px;
}
#admin-menu {
    position: fixed;
    z-index:9999;
}
/***************** END OTHERS *********************/

#cboxOverlay {
  background: transparent;
}

#cboxClose {
  text-indent: 0;
  background: transparent;
  color: #FFF;
  top: 15px;
  right: 15px;
  font-size: 13px;  
  height: auto;
  width: auto;
}




/*******************************************************************************
 * ASAS
 ******************************************************************************/

#reward-summary {
  max-width: 500px;
  text-align:center;
  margin: auto;
  padding-top: 30px;
  margin-bottom: 20px;
}

#reward-amount {
  position: absolute;;
  top: -15px;
}

#reward-progress {
  position: relative;
  display:inline-block;
  width: 80%;
  max-width: 310px;
  padding: 1px;
  border:1px solid #000;
  background:#FFF;
  height: 10px;
  text-align:left;
}

#reward-progress .bar {
  background:#000;
  height:10px;
  display:inline-block;
}

#reward-message {
  margin-top:12px;
}

body.node-page h1.title,
body.bigtitle h1.title,
.section-faq h1.title {
  font-size: 76px;
  letter-spacing: 0.08em;
  padding-bottom:12px;
  margin-bottom: 50px;
  line-height: 1;
  position: relative;
}

body.node-page h1.title::after,
body.bigtitle h1.title::after,
.section-faq h1.title::after {
  background:#000;
  height: 5px;
  width: 97px;  
  left: 50%;
  margin-left: -48.5px;
  bottom: 0;
  position: absolute;
  content: " ";  
}

body.node-page #content-area {
  max-width: 700px;
  margin: auto;
  font-size: 12px;
  line-height: 1.5em;
  letter-spacing: 0.24em;
}

div.divline {
  height: 5px;
  position: relative;
  margin-top: 25px;
  margin-bottom: 50px;
}

div.divline::after {
  background:#000;
  height: 5px;
  width: 97px;  
  left: 50%;
  margin-left: -48.5px;
  bottom: 0;
  position: absolute;
  content: " ";    
}

h2.smalltitle {
  text-align: center;
  font-size: 32px;
  letter-spacing: 0.08em;
  margin: 0 0 45px 0;
  line-height: 1;
}

h3.smalltitle {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.08em;
  margin: 0 0 45px 0;
  line-height: 1;
}

.brightblue {
  color:#0000FF;
}

.pre-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  font-family: DIN1451Com-Engschrift, 'Arial Narrow', sans-serif;
  margin-bottom: 15px;
  letter-spacing: 0.22em;
}