@charset "UTF-8";
/* CSS Document */


/* --------------------| BODY |-------------------- */

html, body {
font-size: 12px;
color: #000000;
width: 100%;
height: 100%;
}

body {
	background:url(images/bg.jpg) repeat-x #bdcbd8;
	font-family: Helvetica, Arial, sans-serif;
margin:0;
}

/* --------------------| GENERAL TEXT |-------------------- */

.blue { 	color: #457dae; }

a {
	font-family: Helvetica, Arial, sans-serif;
	color:#fff;
	line-height:18px;
	font-size:12px;
	}
	
	a:hover{
		text-decoration:none;}
		
		.mainOtto{
			background: url(images/new-way.jpg); display:block;}
			
			.pricing{
			background: url(images/pricing.jpg); display:block;}
			
			.webinar{
			background: url(images/webinar.jpg); display:block;}
			
			.ottoInvitation{
				background: url(images/presentation.jpg); display:block;
				width:168px;
				height:34px;
				}



h1,h2,h3,h4,h5,h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
font-weight: normal;
}
	h1 {
		font-size: 21px;
		line-height:26px;
		margin-bottom: 12px;
		color:#02649f;
	}

	h2{
	}
	
	h3{
		font-size:16px;
		line-height:20px;
		padding:0 0 10px 0;
		color: #457dae;
	}

strong {
font-weight: bold;
}

em {
font-style: oblique;
}

p{
	font-size:12px;
line-height: 14px;
color:#fff;
font-family: Helvetica, Arial, sans-serif;
margin-bottom:10px;
}

.newsBig{
	text-transform:uppercase;
	color: #457dae;}


/* --------------------| GENERAL CRAP |-------------------- */

.clear {
clear:both;
display: block;
}

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

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

.clear10 {height:10px; clear:both;}
.clear15 {height:15px; clear:both;}
.clear20 {height:20px; clear:both;}
.clear30 {height:30px; clear:both;}
.clear45 {height:45px; clear:both;}
.clear40 {height:40px; clear:both;}
.clear60 {height:60px; clear:both;}
.clear100 {height:100px; clear:both;}
.clear300 {height:300px; clear:both;}

#leftArea .titles{height:60px; clear:both;}

.right { float: right !important; }
.left { float: left !important; }

.textRight { text-align: right; }
.textLeft { text-align: left; }


/* --------------------| MAIN CONTENT AREA |-------------------- */

#container{
	width:960px;
	margin:0 auto;
	margin-top:10px;
	}
	
	#header{
		height:149px;}

#header .logo {
	margin-top:40px;
	float:left;}
	
	#header .social {
		float:left;
		margin:68px 0 0 30px;}
	
	
	#leftAreaOtto #leftContent h3{
			font-size:24px;
		text-align:center;
		color:#a8c2dd;
		font-weight:normal;
		line-height:32px;
		margin:60px 0 30px 0;}
		
		.otto2title{
			font-size:16px;
			font-weight:bold;}
		
		#leftAreaOtto #leftContent p{
			color:#fff;
			line-height:16px;
			}
			
			#leftAreaOtto #leftContent ul li{
				background:url(images/tickOtto.png) no-repeat;
				font-weight:bold;
				color:#a8c2dd;
				padding-left:30px;
				font-size:14px;
			}
			
			.ottoBlue{color:#a8c2dd;}
			
			
	.ottoLeftColumn{
		width:400px;
		}
		
		#leftAreaOtto #leftContent a{color:#a8c2dd;}
		
		#leftAreaOtto #leftContent a:hover{color:#fff;}
		
		.ottoButton{
			background:url(images/ottoButton.jpg) no-repeat;
			width:191px;
			height:67px;
			display:block;
			}
			
			.ottoButton:hover{
				background-position: 0 -67px;}
		
		
		
	#mainArea{
		width:958px;
		border:solid 1px #001935;
		margin:10px 0;
		float:left;
		background:#001936;}
		

	
	#leftArea{
		background:url(images/openDoors.jpg) repeat-y;
		width:724px;
		float:left;
		min-height:575px;
		}
		
		#videoPage{
			width:960px;
			background:url(images/videoBg.jpg) no-repeat;}
			
			#videoBox{
				padding:25px 0;
				width:760px;
				height:550px;
				margin: 0 auto 0 auto;}
				
				#metalCTA{
					background:url(images/metalPlate.png) no-repeat;
					width:475px;
					height:157px;
					padding:40px 20px;
					margin:10px auto;}
					
					.metalSections{
						width:120px;
						float:left;
						margin-right:30px;
						}
						
						.midPanel{
							margin-right:50px;}
					
							
							
							#leftContent .metalSections ul{
								width:100px;}
							
							#leftContent .metalSections ul li{
								background:url(images/sub_arrow.gif) no-repeat 0 2px;
								list-style:none;
								width:140px;
								line-height:14px;
								margin:0 0 7px 0;
								padding:0 0 0 12px;}
		
		.cta{
			width:250px;
			float:left;
			margin:20px 35px 0 0;
			text-align:center;
				}
			
			.cta a{
				color: #fd5e0a;
				text-decoration:none;
				font-size:15px;
				line-height:20px;
				font-weight:bold;}
		
		.cta a:hover{
			color:#021734;}
			
			.smlLinks{
				font-size:12px;}
			
			
	#flashcontent{
		width:724px;}
		
		.inlineImages{
			margin-bottom:20px;}
		
		#flashBox{
			width:724px;
			height:598px;
			float:left;}
			
			#leftContent{
				width:600px;
				margin:0 0 0 60px ;
				float:left;
				min-height:600px;
			}
			
			.leftContentTitles{
				background:url(images/titleBg.jpg) repeat-x;
				height:32px;
				padding:13px 0 0 20px;
				margin-bottom:15px;
				}
			
			#leftContent h2{
				height:32px;
				margin-bottom:20px;
				font-size:21px;
				color: #001936;
				text-transform:uppercase;
				border-bottom: solid 1px #006cb9;}
				
			#leftContent p{
				color:#001936;}
					
					#leftContent ul{
						width:100px;}
					
					#leftContent ul li{
						color:#001936;
						margin-bottom:10px;
						width:400px;
						font-size:12px;
						line-height:18px;
						padding-left:14px;
						background:url(images/bullet.jpg) no-repeat 0 6px;}
						
						
					#leftContent ul li ul li{
						margin-top:15px;
						line-height:16px;
						font-size:12px;
						margin-left:10px;
						list-style: outside disc;}
					
					#leftContent a{
						color:#FD5E0A;
						}
						
							#leftContent a:hover{
						color:#021734;
						}
					
					#leftContent h3{
						padding:10px 0;
						color:#457dae;
						font-size:16px;
						font-weight:bold;}
					
					#leftScroll{
						width:480px;
						
						float:left;
						background:url(images/gradient.png) repeat-y 460px 0;
						}
					
					#rightScroll{
						width:95px;
						float:right;
						height:480px;
						margin-top:-19px;
						padding:30px 0 0 0;
						}
		
			#rightArea .innerContent{
				padding:10px 15px 35px 25px;
				}
				
		
	
	#rightArea{
		
		width:234px;
		height:auto;
		float:right;
		
}
		
		
#contactDetails{
	border-top: solid 1px #457dae;
	height:30px;
	padding-top:10px;
	border-bottom: solid 1px #457dae;
	}
	
	#contactDetails p{
		font-size:14px;
		color: #457dae;}
		
		#contactDetails a{
			color:#FD5E0A;
			font-size:14px;
		}
		
		#contactDetails a:hover{
			color:#021734;
		}
		


#mainNav{
	width:960px;
	height:45px;}
	
	#mainNav li{
		float:left;
	}
	
	#mainNav li a{
	background:url(images/nav-new.jpg) no-repeat;
	height:45px;
	display:block;}
		
		#mainNav  li .home{
		width:42px;
		background-position:0 0;}
			
				#mainNav  li .home:hover{
				background-position:0 -45px;}
				
				
		#mainNav  li .videos{
		width:125px;
		background-position:-42px 0;}
			
				#mainNav  li .videos:hover{
				background-position:-42px -45px;}
				
				#mainNav  li .explore{
		width:137px;
		background-position:-167px 0;}
			
				#mainNav  li .explore:hover{
				background-position:-167px -45px;}
				
				#mainNav  li .benefits{
		width:139px;
		background-position:-304px 0;}
			
				#mainNav  li .benefits:hover{
				background-position:-304px -45px;}
		
				
				
		#mainNav  li .stories{
		width:85px;
		background-position:-443px 0;}
			
				#mainNav  li .stories:hover{
				background-position:-443px -45px;}
				
				
	/*	#mainNav  li .culture{
		width:140px;
		background-position:-574px 0;}
			
				#mainNav  li .culture:hover{
				background-position:-574px -45px;}
				
				
				*/


#mainNav .spacer{ width:67px; display:block; background:url(images/spacer.jpg) right; height:45px;}


					
					#mainNav  li .otto{
		width:67px;
		background-position:-528px 0;}
			
				#mainNav  li .otto:hover{
				background-position:-528px -45px;}
				
				#mainNav  li .promo{
		width:153px;
		background-position:-595px 0;}
			
				#mainNav  li .promo:hover{
				background-position:-595px -45px;}
			
		
				
		#mainNav  li .apply{
		width:118px;
		background-position:-748px 0;}
			
				#mainNav  li .apply:hover{
				background-position:-748px -45px;}
				
		#mainNav  li .connect{
		width:94px;
		background-position:-866px 0;}
			
				#mainNav  li .connect:hover{
				background-position:-866px -45px;}
				
				#leftContent .siteMap  li{
					background:url(images/page.png) no-repeat;
					padding-left:24px;
					}
					
					#leftContent .siteMap li ul li{
					list-style:none;}
					
					
				#leftContent .siteMap  li a{
					color: #457dae;}
				/* --------------------| OTTO EXTRAS |-------------------- */
#leftAreaOtto #leftContent .ottoNav {
	background-image:none;
	margin:7px 0 0 4px;;
	float:left;
	width:600px;}
	
	#leftAreaOtto #leftContent .ottoNav li{
	background-image:none;
	float:left;
	padding:0;
	width:auto;
	}
	
#leftAreaOtto #leftContent .ottoNav li a{
	height:31px;
	display:block;
	float:left;
	margin-left:5px;}

	.mainOtto{
background:url(images/new-way.jpg);
width:111px;
display:block;

}

	.pricing{
background:url(images/pricing.jpg);
width:82px;
display:block;

}

.webinar{
background:url(images/webinar.jpg);
width:158px;
display:block;

}

.pdf{
	background:url(images/pdf.png) no-repeat;
	padding: 0 20px;
	height:21px;
	float:right;}
	
	.pricingPage{
			background:url(images/otto-pricing.jpg) no-repeat;
			height:1600px;}
		
		.newWay{
			background:url(images/ottoBG.jpg) no-repeat;
			height:875px;
			}
			
			.webinarPage{
				background:url(images/otto-webinar.jpg) no-repeat;
			height:650px;}
		
		
.pricingTable td{
	color:#fff;
	}
	
	.ottoSubmit{
		background:url(images/otto-submit.jpg);
		width:140px;
		height:48px;
		display:block;
		float:right;
		margin-right:125px;
		}
	



	
/* --------------------| ELEVATOR |-------------------- */


#elevator ul li{
	margin-bottom:10px;
	width:95px;
	height:95px;
	list-style:none;
	background:none;
	margin:0 0 5px 0;
	padding:0;
	}	
	
		#elevator ul li .otto{
			background:url(images/ottoNew.png) no-repeat;
		background-position:0 0;}
			
			#elevator ul li .otto:hover{
			background-position: -95px 0;}
			
			
	
	#elevator ul li a{
		background:url(images/elevatorButtons.png) no-repeat;
		width:95px;
		height:95px;
		display:block;}
		
		#elevator ul li .unique{
		background-position:0 0;}
			
			#elevator ul li .unique:hover{
			background-position: -95px 0;}
			
		#elevator ul li .intranet{
		background-position:0 -95px;}
			
			#elevator ul li .intranet:hover{
			background-position: -95px -95px;}
			
		#elevator ul li .crm{
		background-position:0 -190px;}
			
			#elevator ul li .crm:hover{
			background-position: -95px -190px;}
			
			#elevator ul li .fuel{
		background-position:0 -285px;}
			
			#elevator ul li .fuel:hover{
			background-position: -95px -285px;}
			
				#elevator ul li .marketing{
		background-position:0 -380px;}
			
			#elevator ul li .marketing:hover{
			background-position: -95px -380px;}
			
				#elevator ul li .support{
		background-position:0 -475px;}
			
			#elevator ul li .support:hover{
			background-position: -95px -475px;}
			
				#elevator ul li .seminars{
		background-position:0 -570px;}
			
			#elevator ul li .seminars:hover{
			background-position: -95px -570px;}
			
				#elevator ul li .coaching{
		background-position:0 -665px;}
			
			#elevator ul li .coaching:hover{
			background-position: -95px -665px;}
			
			#elevator ul li .goingUp{
		background-position:0 -760px;}
			
			#elevator ul li .goingUp:hover{
			background-position: -95px -760px;}
			
			#elevator ul li .advisor{
		background-position:0 -855px;}
			
			#elevator ul li .advisor:hover{
			background-position: -95px -855px;}
			
			#elevator ul li .mentor{
		background-position:0 -950px;}
			
			#elevator ul li .mentor:hover{
			background-position: -95px -950px;}
			
			#elevator ul li .partner{
		background-position:0 -1045px;}
			
			#elevator ul li .partner:hover{
			background-position: -95px -1045px;}
	
/* --------------------| FOOTER |-------------------- */


	#footer{
		width:960px;
		height:30px;
		float:left;
		margin-bottom:5px;}
		
		#footer li{
			float:left;
			background:url(images/footer.jpg) no-repeat;
			height:30px;
			display:block;}
			
				#footer li a{
			float:left;
			background:url(images/footer.jpg) no-repeat;
			height:30px;
			display:block;}
			
			#footer li .home{
				width:58px;
				background-position: 0 0;}
				
				#footer li .home:hover{
				background-position: 0 -30px;}
				
			#footer li .siteMap{
			width:66px;
			background-position: -58px 0;}
				
				#footer li .siteMap:hover{
				background-position: -58px -30px;}
				
			#footer li .privacy{
			width:94px;
			background-position: -124px 0;}
				
				#footer li .privacy:hover{
				background-position: -124px -30px;}
				
				#footer li .email{
			width:114px;
			background-position: -218px 0;}
				
				#footer li .email:hover{
				background-position: -218px -30px;}
				
				#footer .spacer{
					width:464px;
					background-position:-332px 0;}
					
					#footer li .twitter{
						width:79px;
				background-position: -796px 0}
				
				/*--	#footer li .facebook{
						width:87px;
				background-position: -722px 0}
				
				#footer li .flickr{
						width:68px;
				background-position: -892px 0}*/
				
				#footer li .linkedin{
						width:85px;
				background-position: -875px 0}
				
				.juiceLink{
					float:right;
					margin: 0 15px 30px 0;
					color:#457dae;}	
					
						.juiceLink a{
							color:#fd610f;}
				
/* --------------------| ELEVATOR |-------------------- */

.awards{
	background:url(images/awardsBut.jpg);
	width:250px;
	height:60px;
	display:block;}
	
.awards:hover{
	background-position:0 -60px;}
	
.month{
	background:url(images/monthBut.jpg);
	width:250px;
	height:60px;
	display:block;}
	
.month:hover{
	background-position:0 -60px;}
	
.flickrBut{
	background:url(images/flikr.jpg);
	width:250px;
	height:60px;
	display:block;}
	
.flickrBut:hover{
	background-position:0 -60px;}
	
	.people{
	background:url(images/people.jpg);
	width:250px;
	height:60px;
	display:block;}
	
.people:hover{
	background-position:0 -60px;}
	
.olympic{
	background:url(images/olympics.jpg);
	width:250px;
	height:60px;
	display:block;}
	
.olympic:hover{
	background-position:0 -60px;}
	
	.applyBut{
	background:url(images/applyBut.jpg);
	width:250px;
	height:60px;
	display:block;
	float:left;
	}
	
.applyBut:hover{
	background-position:0 -60px;}
	
	.currentBut{
	background:url(images/currentBut.jpg);
	width:250px;
	height:60px;
	display:block;
	float:left;
	margin-right:15px;}
	
.currentBut:hover{
	background-position:0 -60px;}
	
	#socialLinks{
		float:right;
		width:140px;
		}
		
		#socialLinks a{
			margin-bottom:5px;}
				
/* --------------------| PAGE SLIDER |-------------------- */


	#slider {
  width: 460px;
  height:850px;
  margin: 0;
  position: relative;
    float:left;
}

.scroll {
 overflow: auto;
 height:850px;
  position: relative; /* fix for IE to respect overflow */
 float:left;
  
  
}

.scrollContainer div.panel {
  height: 850px;
  width: 460px;
  overflow:hidden;
  float:left;
padding-bottom:20px;

}

.scrollButtons {
  display:none;
}

/* --------------------| FORM |-------------------- */

td{
	font-size:14px;
	line-height:20px;
	color: #457dae;}
	
	.entry{
		border:solid 1px #457dae;}
		
		tr {
			height:30px;
			margin: 0 0 15px 0 }
			
		
/* --------------------| NEW RIGHT AREA |-------------------- */	

#rightArea a{
	text-decoration: none;
}	

#rightArea a:hover{
	text-decoration: underline;
}

.webinar #leftContent h2 {
	color:#0B508D;
	font-size:19px;
	text-decoration:none;
	border:none;
	height:1em;
	margin-bottom:0;
	margin-top:20px;
	text-transform: none
	}	
	
.webinar #leftContent .entry{
	border:none
}	

.webinar #leftContent .wpcf7{
	margin-top: 25px
}