/******************************************************************************************
these definitions override others in a well organized manner. Overrides maintain the name from the orginal style sheet for easy identification yet adds a prefix
[xo-] which provides definition and scope.
The primary goal here is to minimize the frustration of combining multiple libraries in one application. For example, you company/client has a corporate identity with elements defined in CSS, yet you would like to extend the UX and the client-side scripting using tools such as Twitter Bootstrap or HTML5 Boilerplate. Well by bundling those scripts in the appropriate order and then lastly adding an overrides.css file in the end, you can easily maintain the architecture look and feel of the site.
Overrides.css protects the integrity of your base styles so that if they are being used in other environments throughout your organization and should your lone app needs to revert back, it would take minimal effort.
The implementation is still kinda stirring around in my head, but I was faced with this with client-side script some time ago and blogged about it here: http://www.bacardibryant.com/problems-with-un-scoped-client-side-calls-in-securityguard.mvc-nuget-package. But further as a result, I began to think of formal strategies that provided a solution.
It would be awesome if someday there was a client-side method to handle the transition.
Something like: $('#search-btn').override('xo'); or $('#search-btn').override('xo','-'); where the last paramater is the prefix separator.
*******************************************************************************************/

/* overriding the search-btn class defined in some other style sheet.*/
#xo-search-btn {
	background-clip:content-box;
	background-origin:content-box;
	padding:0 0 0 0;
	margin:0 0 0 0;
	border:none;
	vertical-align:top;
}
#xo-primary-nav {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border-width: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
	background-image:none;
	background-attachment:scroll;
	background-repeat:repeat;
	background-position-x:0%;
	background-position-y:0%;
	background-color:transparent;
}

#xo-primary-nav li { display: inline; float: left; margin: 0 0.5em 0 0; padding: 0.375em 0.75em; color: #ffffff; font-weight: bold; background: #333333 }
#xo-primary-nav li a { font: bold 1em/150% Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;  }
#xo-primary-nav li:hover, #primary-nav li a:hover { color: #B4B0AB }
#xo-primary-nav li.options-parent {position: relative }
#xo-primary-nav li.options-parent ul { position: absolute; top: 8.1em; width: 47.5em; top: 2.6em; left: 0 }
#xo-primary-nav li.options-parent ul li {float: none; display: block; margin: 0 0 1.5em 0; background: none; padding: 0 }
#xo-primary-nav li.options-parent ul li:hover {color: #ffffff}
#xo-primary-nav li.options-parent .options-wrapper { background: #ffffff;  }
#xo-primary-nav li.options-parent .options { border: 0.083em solid #999999; font-weight: normal; padding: 1.5em; width: 44.5em; background: #ffffff;  }
#xo-primary-nav li.options-parent .options .options-left { float: left; width: 45%; margin: 0 10% 0 0; position: relative; top: 0;  }
#xo-primary-nav li.options-parent .options .options-right { float: right; width: 45%; position: relative; top: 0;  }
#xo-primary-nav li.options-parent .options a { color: #165788; text-decoration: underline; font-weight: normal;  }
#xo-primary-nav li.options-parent .options a:hover { text-decoration: none }
#xo-primary-nav li.options-parent .options p {color: #000000; margin: 0 0 0.75em 0; }
#xo-primary-nav li.options-parent .options ul li { padding: 0; margin: 0 0 0.75em 0;  }
#xo-primary-nav li.options-parent .options ul .list-title { font: normal 1.5em/100% Arial, Helvetica, sans-serif; color: #000000; margin-top: 0.75em;  }

/* global overried of the cursor element */
.cursor-pointer {
	cursor: pointer;
}

	.cursor-pointer a:hover {
		background-color:inherit;
	}

.xo-container-fluid {
	padding:0 0 0 0;
	margin-left:4%;
}

.xo-logo {
	background-clip:content-box;
	border:none;
}

.xo-hero-unit {
  padding: 60px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
  line-height: 30px;
  color: inherit;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.xo-hero-unit h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

.xo-hero-unit li {
  line-height: 30px;
}