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

/*HERO BOX */

#heroBox {
	width:860px;
	overflow:hidden;
	background:url(images/index/heroBox_bg.png) repeat-y;
	padding:0;
	float:left;
	clear:both;
	display:block;
	position:relative;
	}

#heroImage {
	background:url(images/index/heroClouds_v4.png) no-repeat;
	padding-top:85px;
	display:block;
	float:left;
	width:860px;
	height:260px;
	overflow:hidden;
	}

#heroText {
	width:420px;
	font-size:15px;
	color:#666;
	line-height:17px;
	padding:5px 0 5px 0;
	font-weight:bold;
	margin-left:20px;
	margin-bottom:10px;
	}
	
img#bestInShow08, img#ws08_testDrive {
	margin:0px 0 10px 17px;
	}
	
#promoButtons {
	text-align:center;
	width:425px;
	}
	
#promoButtons a {
	text-decoration:none!important;
	}
	
#heroButtons {
	float:left;
	display:block;
	clear:both;
	padding:0 5px 20px 5px;
	}
	
#heroButtons_lower {
	float:left;
	display:block;
	clear:both;
	padding:30px 5px 12px 5px;
	width:100%;
	}
	
a.heroButton {
	float:left;
	display:inline;
	font-size:23px;
	color:#333!important;
	text-decoration:none!important;
	text-align:center;
	font-weight:100;
	}
	
a.heroButton:hover {
	background-position:bottom;
	}
	
a#signUp {
	background:url(images/index/bigButton_signUp.png) no-repeat top;
	margin-right:58px;
	padding-top:40px;
	padding-right:35px;
	width:360px;
	height:42px;
	text-align:right;
	}
	
a#signUp_lower {
	background:url(images/index/bigButtonLower_signUp.png) no-repeat top;
	margin-right:58px;
	padding-top:40px;
	padding-right:35px;
	width:360px;
	height:42px;
	text-align:right;
	}
	
a#tour {
	background:url(images/index/bigButton_tour.png) no-repeat top;
	margin-top:25px;
	padding-top:15px;
	width:390px;
	height:42px;
	}
	
a#tour_lower {
	background:url(images/index/bigButtonLower_tour.png) no-repeat top;
	margin-top:25px;
	padding-top:15px;
	width:390px;
	height:42px;
	}
	
a#tour:hover, a#tour_lower:hover, a#signUp:hover, a#signUp_lower:hover {
	background-position:bottom;
	}

/* LIGHT GRAY BOXES */


.grayBox {
	background:url(images/index/grayBox_bg.png) repeat-y;
	width:861px;
	display:block;
	clear:both;
	margin-top:20px;
	float:left;
	display:block;
	clear:both;
	}
	
.grayBox_top {
	width:860px;
	background:url(images/index/grayBox_top.png) no-repeat;
	padding:5px 0;
	}
	
.grayBox_inner {
	padding:10px 0 5px 15px;
	float:left;
	display:block;
	clear:both;
	}
	
.grayBox_top h1 {
	margin:0 20px;
	padding:0;
	}
	
.whiteBox {
	background:url(images/index/smBevBox.png) no-repeat;
	height:170px;
	width:270px;
	float:left;
	display:inline;
	margin-right:10px;
	}
	
.serverIcon {
	float:left;
	display:inline;
	margin:0 5px 0 5px;
	}
	
.whiteBox_title {
	font-size:16px;
	padding:10px 0 0 5px;
	float:left;
	display:inline;
	width:210px;
	}
	
.featureList {
	float:left;
	display:inline;
	width:200px;
	padding:15px 0 0 5px;
	}
	
.featureList ul {
	margin:0;
	padding:0;
	list-style:none;
	}
	
.featureList ul li {
	padding:0 0 7px 0;
	}
	
.ctaButton {
	width:364px;
	height:24px;
	float:right;
	display:block;
	clear:both;
	text-align:right;
	margin:15px 20px 0 0;
	}
	
.ctaButton a:link, .ctaButton a:visited {
	font-weight:bold;
	font-size:16px;
	background:url(images/index/ctaButton.png) no-repeat top;
	color:#333;
	text-decoration:none;
	padding: 5px 10px 0 0;
	width:364px;
	height:24px;
	display:block;
	}
	
.ctaButton a:hover {
	color:#333!important;
	background-position:bottom;
	}
		
		
/* BULLET COLUMNS */

.boxDesc {
	margin:15px 0 0 10px;
	padding:0 0 15px 5px;
	font-size:16px;
	/*background:url(/images/index/iconBullet_big.png) no-repeat;*/
	}
	
.bullet {
	background:url(images/index/iconBullet_small.png) no-repeat;
	padding:0 0 15px 20px;
	}

.bulletColumn {
	width:248px; 
	padding:15px 9px 15px 10px;
	float:left;
	display:inline;
	margin:0;
	}	
	
.bulletColumn#col_1 {
	padding-left:5px;
	}	
	
.bulletColumn#col_2, .bulletColumn#compare {
	border-left:1px dotted #666;
	margin-right:5px;
	}
	
.bulletColumn#compare {
	padding-bottom:50px;
	}	
	
.bulletColumn#col_1 {
	margin-left:10px;
	}	


/* INTERACTIVE BOX STYLES */

.interactiveBox {
	background:#fff;
	width:819px;
	border-right:2px solid #e5e5e5;
	border-bottom:2px solid #e5e5e5;
	float:left;
	display:block;
	clear:both;
	padding:5px 5px 10px 5px;
	}
	
.interactiveBox#bullet_container {
	border-bottom:0px;
	padding-bottom:15px;
	}
	
.interactiveButtons {
	float:left;
	display:inline;
	width:270px;
	padding:0;
	margin-right:5px;
	overflow:hidden;
	}
	
.horizontalCarousel_wrapper {
	float:left;
	display:inline;
	border-left:2px solid #e5e5e5;
	border-top:2px solid #e5e5e5;
	width:538px;
	height:170px;
	background:url(images/index/carousel_bg.png) repeat-x bottom;
	overflow:hidden;
	}
	
.button {
	float:left;
	display:block;
	clear:left;
	margin:0 0 18px 0;
	}	
	
.button a:link, .button a:visited {
	color:#333;
	font-weight:bold;
	text-decoration:none;
	background:url(images/index/carouselButtons.png) left bottom no-repeat;
	font-size:12px;
	padding:5px 0 10px 15px;
	width:270px;
	display:block;
	}
	
.button a.selected {
	background-position:left top!important;
	color:#fff!important;
	font-weight:bold;
	}
	
.button a:hover {
	background-position:left -29px;
	color:#333!important;
	}
	
.button a.selected:hover {
	color:#fff!important;
	}
	
.container {
	position:relative;
	overflow:hidden;
	width:665px;
	}
	
.container ul {
	width:3000px;
	margin:0;
	padding:0;
	position:relative;
	left:0;
	}
	
.container ul .carouselFrame {
	float:left;
	display:inline;
	width:665px;
	color:#000;
	padding:0 0 0 0;
	}	
	
.previous_button, .next_button {
	display:none;
	}
	
.carouselImage {
	float:left;
	display:inline;
	margin:0 10px 10px 10px;
	}
	
.carouselText {
	float:left;
	display:inline;
	width:400px;
	position:relative;
	}
	
.carouselText h3 {
	margin-top:0;
	padding-top:0;
	}


/* OS BUTTONS */

ul.OS_buttons {
	list-style-type:circle;
	list-style:circle;
	display:block;
	margin:0;
	padding:10px 0 0 0;
	}	
	
ul.OS_buttons li {
	float:left;
	display:inline; 
	width:370px;
	height:30px;
	font-size:13px;
	font-weight:bold;
	padding:4px 0 8px 5px;
	background:url(images/templateButton_tall.png) no-repeat top left;
	margin:0 0 10px 0;
	}
	
ul.OS_buttons li.left {
	margin-right:80px;
	margin-left:5px;
	}
	
a.templateLink {
	color:#333!important;
	text-decoration:none!important;
	padding:4px 0 0 55px;
	display:block;
	height:25px;
	margin-top:2px;
	}
	
a.templateLink:hover {
	color:#0099FF!important;
	}
	
a#ror {
	background:url(images/icon-rails.gif) no-repeat left;
	}
	
a#servers_all {
	background:url(images/icon-servers_all.gif) no-repeat left;
	}
	
a#fb {
	background:url(images/icon-fb.gif) no-repeat left;
	}
	
a#ws03 {
	background:url(images/icon-ws03.gif) no-repeat left;
	}
	
a#lamp {
	background:url(images/icon-lamp.gif) no-repeat left;
	}