/* @override 
	http://alext.dev.clearbubble.localdev1.aa/css/clear.css
*/

/* Typography
-------------------------------------------------------------- */

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { 
	font-size: 75%;
	color: #fff; 
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-weight: 300;
	margin: 30px 30px 2em 30px; padding: 0;
	background-color: #ccc;
	background-position: 50% 0;
	background-attachment: fixed;
}

body.morning { background-image: url(/img/backgrounds/greyscale/morning.jpg); }
body.afternoon { background-image: url(/img/backgrounds/greyscale/afternoon-2.jpg); }
body.evening { background-image: url(/img/backgrounds/greyscale/evening.jpg); }
body.night { background-image: url(/img/backgrounds/greyscale/night.jpg); }

.container {
	/*padding-bottom: 2em;
	border-bottom: 2px solid #ccc;*/
	position: relative;
}

.box {
	background: transparent url(/img/30-black.png) repeat;
	padding: 12px 10px;
	margin-bottom: 1.5em;
}

.box p {
	font-size: 1em;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

.box ul {
	padding-bottom: 12px;
}

.box .span-4 {
	width: 295px;
}

.leader {
	color: #fff;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.667em;
	line-height: 1.2em;
	margin-bottom: 1.2em;
}

a { color: #fff; }

a:hover {
	color: #568AB1;
	text-decoration: none;
	background-color: #fff;
}

a.logolink:hover {
	background-color: transparent;
}

a:active {
	color: #568AB1;
	text-decoration: none;
	background-color: transparent;
}

ul {
	display: block;
	list-style-type: square;
}

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
}

h3 {
	font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	border-bottom: 2px solid white;
	font-size: 1.667em;
	line-height: 1.2em;
	margin-bottom: 22px;
}

h3 a { text-decoration: none; color: #fff; }
h3 a:hover { background: transparent; color: #fff; }

/* Header
-------------------------------------------------------------- */

#header {
	height: 120px;
}

#header h1 {
	position: absolute;
	top: 0; left: -3px;
	margin: 0;
	width: 148px; height: 85px;

	background-image: url(/img/clear-bubble-logo-trans.png);

	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	outline: none;
}

#header h1 a {
	display: block;
	height: 100%; width: 100%;
	outline: none;
}

#header h1 a:hover, #header h1 a:active {
	background-color: transparent;
}

/* Footer
-------------------------------------------------------------- */
#footer {
	color: #fff;
	margin-top: 2em;
	padding: 10px 0 2em 0;
	border-top: 2px solid #fff;
}

#footer ul.footer-logos {
	list-style: none;
	padding: 0; margin: 0;
	
	float: left;
}

#footer ul.footer-logos li {
	float: left;
	margin-right: 5px;
}

#footer ul.footer-links {
	list-style: none;
	padding: 0; margin: 0;

	float: right;
}

#footer ul.footer-links li {
	font-size: 10px;
	float: left;
	margin-right: 5px;
}

#footer ul.footer-links a {
	color: #fff;
	text-decoration: none;
}

#footer ul.footer-links a:hover {
	background-color: transparent;
	color: #fff;
	text-decoration: underline;
}

/* Contact
-------------------------------------------------------------- */

#header div.contact p {
	color: #fff;
	font-size: 0.833em;
	line-height: 1.2em;
	margin-bottom: 1.2em;
}

#header div.contact a {
	color: #fff; text-decoration: none;
}

#header div.contact a:hover, #header div.contact a:active {
	background-color: transparent;
}

/* User Account
-------------------------------------------------------------- */
div#user-account {
	position: absolute;
	left: 640px ;top: -30px;
	height: 24px;
	background-color: #fff;
	color: #000;
}

div#user-account p {
	line-height: 24px;
	margin: 0 5px;
	position: relative;
}

div#user-account span.control {
	position: absolute;
	right: 0; top: 0;
	text-align: right;
}

div#user-account a { color: #568AB1; }

div#user-account a:hover {
	color: #568AB1;
	text-decoration: none;
	background-color: #fff;
}

div#user-account a:active {
	color: #568AB1;
	text-decoration: none;
	background-color: transparent;
}

/* Upper Navigation
-------------------------------------------------------------- */
ul#upper-nav {
	position: absolute;
	top: -30px; left: 640px;
	list-style: none;
	margin: 0;
}

ul#upper-nav>li {
	height: 24px;
	text-indent: 5px;
	line-height: 24px;
	background-color: #fff
}

ul#upper-nav>li>a {
	margin-right: 5px;
	background: url(/img/nav-arrow.png) no-repeat 100% 0%;
}

ul#upper-nav>li>a:hover {
	background-position: 100% 100%;
}

ul#upper-nav a {
	display: block;

	text-decoration: none;
	white-space: nowrap;

	color: #333;
}

ul#upper-nav ul {
	display: none;
	list-style: none;
	margin: 0; padding: 0;
}

ul#upper-nav ul a {
	float: none;
	background-color: #fff;
	color: #333;
	font-size: 10px;
	line-height: 18px;
	height: 17px;
	border-bottom: 1px solid #ccc;
}

ul#upper-nav ul li.last a {
	line-height: 17px;
	height: 17px;
	border-bottom: none;
}

ul#upper-nav ul a {
	
}

ul#upper-nav ul a:hover {
	background-color: #eee;
	color: #568AB1;
}

/* Circle Nav
-------------------------------------------------------------- */

#circle-nav {
	position: relative;
}

#circle-nav ul {
	position: absolute;
	width: 100%; height: 92px;
	
	list-style: none;
	
	padding: 20px 0 0 0;
	margin: 24px 0 0 0;
	border: 2px solid #fff;
	border-width: 2px 0 0 0;
}

#circle-nav ul li {
	display: block;
	float: left;
	
	width: 92px; height: 92px;
	margin-right: 14px;

	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	outline: none;
}

#circle-nav ul li#circle-contact {
	margin-right: 0;
}

#circle-nav ul li a {
	display: block;
	width: 100%; height: 100%;

	background: transparent url(/img/location-about.png) no-repeat 0 -92px;
	outline: none;
}

#circle-nav ul li a:hover {
	background-position: 0 -184px;
}

#circle-nav ul li a:active, #circle-nav ul li.here a {
	background-position: 0 -0;
}


#circle-nav ul li#circle-about a { background-image: url(/img/location-about.png); }
#circle-nav ul li#circle-products a { background-image: url(/img/location-products.png); }
#circle-nav ul li#circle-contact a { background-image: url(/img/location-contact.png);}

/* Quote
-------------------------------------------------------------- */

.quote {
	display: block;
	height: 180px;
	
	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	outline: none;
	
	background-repeat: no-repeat;
	background-position: top left;	
}

#quote-morning { background-image: url(/img/headers/welcome-01.png); }
#quote-afternoon { background-image: url(/img/headers/welcome-02.png); }
#quote-evening { background-image: url(/img/headers/welcome-03.png); }
#quote-night { background-image: url(/img/headers/welcome-04.png); }

#quote-start { background-image: url(/img/quote-start.png); }
#quote-forward { background-image: url(/img/quote-forward.png); }
#quote-plus { background-image: url(/img/quote-plus.png); }

.topper {
	padding-top: 22px;
	margin-top: 24px;
	border-top: 2px solid #fff;
}


/* Menu
-------------------------------------------------------------- */

ul.menu {
	list-style: none;
	padding: 0;
	margin: 0 0 22px 0;
}

ul.menu li {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.667em;
	line-height: 1.2em;
}

ul.menu li a {
	display: block;
	width: 100%; height: 100%;
	text-decoration: none;
	color: #fff;
	border-bottom: 2px solid #fff;
	outline: none;
}

ul.menu li a.go {
	background: transparent url(/img/arrow.png) no-repeat top left;
	text-indent: 25px;
}

ul.menu li a:hover { border-color: #8FA5BB; background-color: transparent;}
ul.menu li a:active, ul.menu li a.here { border-color: #568AB1; background-position: 0 100%;}

#menu-start, #menu-forward, #menu-plus {
	display: block;
	height: 24px;
	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	background: transparent url(/img/menu-start.png) no-repeat 0 0;
}

#menu-forward { background-image: url(/img/menu-forward.png); }
#menu-plus { background-image: url(/img/menu-plus.png); }

/* Product
-------------------------------------------------------------- */
div.product {
	border-bottom: 2px solid #fff;
	margin-bottom: 1.5em;
}

div.product.last { 
	border: none;
	margin-bottom: 0;
}

.product h3 {
	display: block;
	height: 50px;
	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	outline: none;
	
	background: transparent url(/img/product-start.png) no-repeat 0 0;
	border: none;
}

.product h3 a {
	display: block;
	width: 100%; height: 100%;
	outline: none;
}

.product h3 a:hover, a:active {
	background: transparent;
}

h3#product-forward { background-image: url(/img/product-forward.png); }
h3#product-plus { background-image: url(/img/product-plus.png); }

/* Sign up
-------------------------------------------------------------- */

h3.register-sting {
  position: relative;
  top: -40px; left: 140px;
  
  border: 0;
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  width: 235px; height: 235px;
  background: transparent url(/img/register-now-sting.png) no-repeat;
}

h3.register-sting a {
  display: block;
  width: 100%; height: 100%;
  outline: none;
}

.sign-up {
	padding-top: 144px;
}

.sign-up-home {
	padding-top: 192px;
}


h3.from-750-sting {
    position: relative;
  top: -40px; left: 140px;
  
  border: 0;
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  width: 235px; height: 235px;
  background: transparent url(/img/from-750-sting.png) no-repeat;
}

h3.from-850-sting {
    position: relative;
  top: -40px; left: 140px;
  
  border: 0;
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  width: 235px; height: 235px;
  background: transparent url(/img/from-850-sting.png) no-repeat;
}

/* People
-------------------------------------------------------------- */
img.about {
  float: left;
  margin-right: 10px;
}

div.about {
  width: 445px;
  float: left;
}

/* Values
-------------------------------------------------------------- */
ul.values {
	margin: 0;
	list-style: none;
}

ul.values li {
	display: block;
	float: left;
	
	width: 92px; height: 92px;
	margin-right: 9px;

	font-size: 1px; line-height: 1px;
	text-indent: -5000px;
	outline: none;
	
	background: transparent url(/img/values-trust.png) no-repeat 0 0;
}

#trust { background-image: url(/img/values-trust.png); }
#integrity { background-image: url(/img/values-integrity.png); }
#transparency { background-image: url(/img/values-transparency.png); margin-right: 0;}

/* Scroller
-------------------------------------------------------------- */
div#scrollpane {
	overflow: hidden;
}

div.train>div {
	float: left;
}

/* Map
-------------------------------------------------------------- */
.map {
	width: 625px; height: 348px;
	margin-bottom: 1.75em;
}

/* Forms
-------------------------------------------------------------- */

label, input {
	border: none;
	padding: 6px 4px;
	margin: 0;
	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.667em;
	line-height: 1.2em;
	
	color: #666;
}

label {
	padding: 6px 0;
	font-weight: 300;
	color: #666;
}

input.span-4 { width: 301px!important; }
input.span-6 { width: 461px!important; }

select {
  color: #333;
  
  border: none;
  padding: 6px 4px;
  
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

select.span-4 { width: 304px!important; }

/* Messages and Errors
-------------------------------------------------------------- */
.error, .notice, .success { padding:1em; margin-bottom:1.5em; border: none;}

.error {
	background:#b24b58;
	color:#fff;
}

.notice {
	background:#DA8D00;
	color:#514721;
}

.success {
	background:#8EB03E;
	color:#264409;
}

.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

.validation { padding: 0; margin-bottom: 0; }
.validation p { margin: 0 5px; }
.valid { position: relative; top: 6px; left: -28px; }

/* Buttons
-------------------------------------------------------------- */

button, a.button {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.667em;
	line-height: 1.2em;
	text-decoration: none;
	text-align: left;
	text-indent: 25px;
	
	display: block;
	width: 100%; height: 100%;
	margin: 6px 0 4px 0; padding: 0;
	
	background: transparent url(/img/arrow.png) no-repeat left top;
	color: #fff;
	border: 0;
	border-bottom: 2px solid #fff;
	
	outline: none;
}

button:hover, a.button:hover {
	background-position: 0 100%;
	background-color: transparent;
	color: #fff;
	text-decoration: none;
}

button:active, a.button:active {
	text-indent: 30px;
	background-position: 5px 100%;
}

.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11 { float:left; margin-right:15px; }
.span-12,.last{margin-right: 0;}
.showgrid {background:url(/img/grid.png);}