/*------------------------------------------------------------

	GLOBAL RBA Styles
	
- If its not global don't put it here. 
- This file should be small, mainly comments about where to find a resource if its not here
- base changes to HTML elements are found in lib/style.css

NOTES:
	This file contains style for base mobile site add any resolution specific styles in 480, 768 and 1024

FONTS:

http://developer.yahoo.com/yui/fonts/
If you want this size in pixels (px) Declare this percent (%)

	10     77%
	11     85%
	12     93%
	13     100%
	14     108%
	15     116%
	16     123.1%
	17     131%
	18     138.5%
	19     146.5%
	20     153.9%
	21     161.6%
	22     167%
	23     174%
	24     182%
	25     189%
	26     197%

For an explanation of this cross-browser @font-face syntax, see: 
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 

IF using font face DO NOT include in media queries, it will break IE7/IE8

@font-face {
	font-family: 'SurfaceMedium';
	src: url('../fonts/surface-medium-webfont.eot');
	src: local('☺'),
		url('../fonts/surface-medium-webfont.woff') format('woff'),
		url('../fonts/surface-medium-webfont.ttf') format('truetype'),
		url('../fonts/surface-medium-webfont.svgz#webfontq0qu7DTT') format('svg'),
		url('../fonts/surface-medium-webfont.svg#webfontq0qu7DTT') format('svg');
	font-weight: normal;
	font-style: normal;
}
------------------------------------------------------------*/
/*-----------------------------------
	Global DOM Elements
-----------------------------------*/
/* put these in lib/style.css */
/*-----------------------------------
	Major Layout Classes
	- Page Row & Columns
	- Content Columns
-----------------------------------*/
.rba {
  /* the body tag */
  background: #222222; }

.rba-no-branding {
  background: #ffffff; }

.rba-page-row {
  display: block;
  width: 100%; }

.rba-page-column {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0 15px; }

#body-row {
  background: #222222; }

#body-column {
  background: #ffffff; }

.rba-no-branding #body-row {
  background: none; }

.rba-no-branding #body-column {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100% !important;
  /* make sure we override anything set by page column*/
  background: none; }

/*-----------------------------------
	Base Sprite
	All sprite based elements
	must use this class

	For a primer on CSS sprites and the technique below see:
	http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/
-----------------------------------*/
/* background-image: expression for IE lt 8, 
	must contain path to image relative to current URL not css file */
.rba-sprite {
  position: relative;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="images/rba/rba_sprite.png?%SVNREV_TOKEN%" />'+this.innerHTML); }

/* IE9 needs the ltr direction to position and clip properly */
.rba-sprite:before,
.rba-sprite img {
  content: url(../../images/rba/rba_sprite.png?%SVNREV_TOKEN%);  
  position: absolute;
  left: -50px;
  direction: ltr; }

/* Stop IE7 from blowing out the page scroll with the sprite image */
.ie6 .rba-sprite,
.ie7 .rba-sprite {
  overflow: hidden; }

/* 
	IE7 (and probably 6) chokes on nested sprites when body is position relative. 
	they struggle and recover when its not, but for performance its best not to 
	allow nested css expressions that manipluate innerHTML
*/
.ie6 .rba-sprite .rba-sprite,
.ie7 .rba-sprite .rba-sprite {
  background-image: none; }

/*-----------------------------------
	Content Columns
	Column layout starts at 768
	see rba-768.css & rba-1024.css 
	for details
-----------------------------------*/
/* MAJOR LAYOUT COLUMN - portlet container */
.rba-layout-column {
  float: left;
  display: inline;
  overflow: hidden;
  width: 100%; }

/* first layout column pushes down from top*/
.lc-top-margin {
  margin-top: 15px; }

.lc-bottom-margin {
  margin-bottom: 15px; }

/* CONTENT LAYOUT COLUMN - within portlet content */
.rba-content-column {
  float: left;
  display: inline;
  overflow: hidden;
  width: 100%; }

.rba-content-column-w-20 {
  width: 20%; }

.rba-content-column-w-25 {
  width: 25%; }

.rba-content-column-w-33 {
  width: 33.33%; }

.rba-content-column-w-40 {
  width: 40%; }

.rba-content-column-w-50 {
  width: 50%; }

.rba-content-column-w-60 {
  width: 60%; }

.rba-content-column-w-66 {
  width: 66.66%; }

.rba-content-column-w-75 {
  width: 75%; }

.rba-content-column-w-80 {
  width: 80%; }

.rba-content-column-w-100 {
  width: 100%; }

.ie7 .rba-content-column-w-20 {
  width: 19.9%; }

.ie7 .rba-content-column-w-25 {
  width: 24.9%; }

.ie7 .rba-content-column-w-33 {
  width: 33%; }

.ie7 .rba-content-column-w-40 {
  width: 39.9%; }

.ie7 .rba-content-column-w-50 {
  width: 49.9%; }

.ie7 .rba-content-column-w-60 {
  width: 59.9%; }

.ie7 .rba-content-column-w-66 {
  width: 66%; }

.ie7 .rba-content-column-w-75 {
  width: 74.9%; }

.ie7 .rba-content-column-w-80 {
  width: 79.9%; }

.ie7 .rba-content-column-w-100 {
  width: 99.9%; }

.cc-top-margin {
  margin-top: 10px; }

.cc-bottom-margin {
  margin-bottom: 10px; }

.cc-left-margin {
  margin-left: 10px; }

.cc-right-margin {
  margin-right: 10px; }

.dbl-top-margin {
  margin-top: 20px; }

.dbl-bottom-margin {
  margin-bottom: 20px; }

.dbl-left-margin {
  margin-left: 20px; }

.dbl-right-margin {
  margin-right: 20px; }

.tri-top-margin {
  margin-top: 30px; }

.tri-bottom-margin {
  margin-bottom: 30px; }

.tri-left-margin {
  margin-left: 30px; }

.tri-right-margin {
  margin-right: 30px; }

.flush-top {
  padding-top: 0 !important;
  margin-top: 0 !important; }

.flush-bottom {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important; }

.flush-left {
  padding-left: 0 !important;
  margin-left: 0 !important; }

.flush-right {
  padding-right: 0 !important;
  margin-right: 0 !important; }

/*-----------------------------------
	RBA Portlets & YUI Widgets
	SEE: components/portlet-base.css 
		for headers and backgrounds
	SEE: responsive/WIDTH.css 
		for widths & margins
-----------------------------------*/
/* porlet stacking */
#body-column .rba-portlet {
  margin: 0 0 15px 0; }

/*-----------------------------------
	Header
-----------------------------------*/
/* put these in components/header.css */
/*-----------------------------------
	Navigation
-----------------------------------*/
/* put these in components/navigation.css */
/*-----------------------------------
	Footer
-----------------------------------*/
/* put these in components/footer.css */
/*-----------------------------------*
	BUTTONS
-----------------------------------*/
/* put these in components/buttons.css */
/*-----------------------------------
	RBA & AUI helper classes
-----------------------------------*/
.re-768-toggle-trigger,
.rba-helper-clickable,
.rba-toggle-control {
  cursor: pointer; }

.rba-helper-hidden,
.aui-helper-hidden {
  display: none !important;
  /* !important used to overide any display setting from other class names*/ }

.rba-loading-bg {
  background: black url(/rba-theme/images/loading_black.gif) no-repeat center; }

.rba-loading-mask {
  background: #000000;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50); }

.rba-loading-throber {
  position: absolute;
  background: transparent url(/rba-theme/images/bg-loading-throbber.png) center center no-repeat;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 77px;
  margin: -37px 0 0 -75px; }

.rba-loading-throber:before {
  position: absolute;
  content: "";
  background: transparent url(/rba-theme/images/loading_black.gif) center center no-repeat;
  width: 32px;
  height: 32px;
  left: 59px;
  top: 22px; }

/*-----------------------------------
	GENERIC helper classes
-----------------------------------*/
/* Look in lib/style.css before adding declarations here */
/* floats and text aligns */
.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.float-left {
  float: left; }

.float-right {
  float: right; }

/* force left to right text in right to left flow*/
.ltr-in-rtl {
  direction: ltr !important; }

/* 
pseudo paragraph element (allows valid nesting) 
	eg use :
		<div class="pseudo-p">
			<ul>
	over 
		<p>
			<ul>
*/
.pseudo-p {
  display: block;
  margin: 0 0 1em 0; }

/* scrollable divs */
.vertical-scroll {
  overflow-x: hidden;
  overflow-y: auto; }

/* hidden elements for various widths */
.display-block-480,
.display-block-768,
.display-block-1024 {
  display: none !important; }

.display-inline-480,
.display-inline-768,
.display-inline-1024 {
  display: none !important; }

.display-inline-block-480,
.display-inline-block-768,
.display-inline-block-1024 {
  display: none !important; }

/* hide until print.css kicks in*/
.print-only {
  display: none; }

/*-----------------------------------
	Alternate Header styles
-----------------------------------*/
.h-lvl-1 {
  color: #e87722;
  font-weight: normal; }

.h-lvl-2 {
  color: #000000;
  font-weight: normal; }

/*-----------------------------------
	Messaging
	SEE: forms.css
		for errors and form validation
	SEE: portlet-base.css
		for error portlet 
-----------------------------------*/
.status-msg,
.text-highlight {
  color: #106042; }

.rba-new,
.rba-orange {
  color: #e87722; }

.disabled {
  color: #bfc0be; }

.rba-user-name,
.current-index {
  color: #20579e; }

.text-color {
  color: #000000 !important; }

.value-label {
  color: #404040; }

.child-value-label {
  color: #404040;
  margin: 0 10px; }

.static-value {
  margin: 0 0 0 5px; }

.js-localizations,
.rba-dictionary {
  display: none;
  visibility: hidden; }

/* addthis adds opacity to hover states - stop it*/
.at300b:hover {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important; }

/*-----------------------------------
	Dates
-----------------------------------*/
.day {
  color: #5c6065;
  font-size: 93%; }

/*-----------------------------------
	Misc Components
-----------------------------------*/
.separator {
  border-top: 1px dotted #bfbfbf;
  margin: 10px 0; }

.rba-separator {
  position: relative;
  height: 1px;
  margin: 10px 0;
  clear: both; }

.rba-separator.dots {
  border-top: 1px dotted #bfbfbf; }

.separator-text {
  position: absolute;
  top: -12px;
  left: 0px;
  height: 24px;
  width: 100%;
  text-align: center; }

.separator-text span {
  background: #ffffff;
  vertical-align: top;
  line-height: 24px;
  padding: 0 8px; }

/*-----------------------------------
	Right to Left
-----------------------------------*/
.rtl {
  direction: rtl;
  unicode-bidi: embed; }

.rtl .rba-page-row {
  /* IE9 needs a width under 100% for a rtl flow and an internal rba-page-column with borders (ie the body) */
  width: 99.9%; }

.rtl .rba-layout-column {
  float: right; }

.rtl .rba-content-column {
  float: right; }

.rtl .cc-left-margin {
  margin-left: 0;
  margin-right: 10px; }

.rtl .cc-right-margin {
  margin-right: 0;
  margin-left: 10px; }

.rtl .dbl-left-margin {
  margin-left: 0;
  margin-right: 20px; }

.rtl .dbl-right-margin {
  margin-right: 0;
  margin-left: 20px; }

.rtl .tri-left-margin {
  margin-left: 0;
  margin-right: 30px; }

.rtl .tri-right-margin {
  margin-right: 0;
  margin-left: 30px; }

.rtl .text-left {
  text-align: right; }

.rtl .text-right {
  text-align: left; }

.rtl .float-left {
  float: right; }

.rtl .float-right {
  float: left; }

.rtl .static-value {
  margin: 0 5px 0 0; }

.rtl .punc-fix:after {
  /* fix for rtl and () with non rtl text, the extra character defines the flow for the punctuation */
  visibility: hidden;
  content: "i"; }