/* Section specific text styles: Solutions */

/* ******************** FEATUREAREAS ****************************** */

div#featureArea {
	width: 960px;
	height: 170px;
	padding: 50px 20px 20px 200px;
}

div.index {
	background: #fff url(/images/feature/solutions_sharedata_feature.jpg) no-repeat;
}

div.starter {
	background: #fff url(/images/feature/solutions_starter_feature.jpg) no-repeat;
}

div#smallfeatureArea {
	width: 960px;
	height: 30px;
	padding: 50px 10px 20px 0px;
}

div .startersmall {
	background: #fff url(/images/feature/solutions_startersmall_feature.png) no-repeat;
}

/* ******************** FEATURENAV Adjustments ****************************** */

#featureNav {
	background: #333 url(../images/nav/featureNav_bkgd_solutions.png) no-repeat;
}

#featureNav ul li {
	background: url(../images/nav/featureNav_gutter_solutions.png) no-repeat;
	background-position: top right;
}

#featureNav #selected {
	background: url(../images/nav/featureNav_selected_solutions.png) no-repeat;
	background-position: top right;
}

#featureNav ul li.first#selected {	
	background: url(../images/nav/featureNav_selected_solutions.png) no-repeat;
	background-position: top left;
}

/* ******************** QUOTE, ATTRIBUTION Adjustments ********************** */

/* ******************** SIDEBAR Adjustments********************************* */



/* ******************** REFRESH TEMP STYLES - Some to move to global?********************************* */


/* Table classes - again, we may want to determine which table styles will be global vs page specific */

table.bumblebee {
	border-collapse: collapse;
	width: 100%;
}

table.bumblebee td {
	vertical-align: top;
	background-color: #fff;
	padding: 4px 4px 4px 6px;
}
table.bumblebee th {
	color: #999;
	font-size: 1.2em;
	font-weight: bold;
	vertical-align: bottom;
	text-align: left;
	padding: 4px 4px 4px 6px;
	border-bottom: 1px solid #ccc;
}

table.bumblebee tr.shade td {
	vertical-align: top;
	background-color: #E9F2F6;
}

table.open {
	border-spacing: 0px;
	width: 100%;
}

table.open td {
	vertical-align: top;
	padding: 8px 8px 8px 10px;
	border-top: 1px solid #ccc;
}

table.open th {
	color: #999;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	padding: 8px 8px 8px 10px;
	border-bottom: 1px solid #ccc;
}

/* List classes - these still need some work but we should probably have some specific list styles that are global */

div#sidebar #sidebartop ul {
	list-style: none outside;
	margin: 0;
	padding: 10px 0 0 0;
}

div#sidebar #sidebartop ul li {
	/* padding-left: 20px; */
	line-height: 14px;
	padding-bottom: .3em;
}

div#sidebar ul.nobullet {
	list-style: none outside;
	margin: 0;
	padding: 0 0 1em 0;
}

div#lowerArea ul.nobullet {
	list-style: none outside;
	margin: 0;
	padding: 0 0 1em 0;
}

div#lowerArea ul.nobullet li {
	padding-bottom: .3em;
}

/* Blue box classes - used for three column Starter Solutions page layout */

div.blueBox {
	width: 260px;
	height: 210px;
	background: #E9F2F6 url(/images/sidebar/bkgd/blueBox_top.png) top no-repeat;
	padding: 0 10px 10px 10px;
	margin: 0 0 0 0;
}

div.blueBoxbottom {
	width: 260px;
	background: #E9F2F6 url(/images/sidebar/bkgd/blueBox_bottom.png) bottom no-repeat;
	padding: 0 10px 5px 10px;
	margin: 0 0 15px 0;
}


/* 3 Column classes - */

/* Background color to override the gray */

div#col1 {
	width: 300px;
	float: left;
	margin-right: 30px;
	background: #fff;
}

div#col2 {
	width: 300px;
	float: left;
	margin-right: 30px;
	background: #fff;
}

div#col3 {
	width: 300px;
	float: left;
	margin-right: 0;
	background: #fff;
}

/* this is the background for the 3-col mid page title */

.bannerbak {
	background: url(/images/bkgd/solutions_titlebackground.png) top no-repeat;

}

h2.bannertext {
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	font-weight: normal;
	text-align: left;
	padding: 0px 0px 0px 8px;
	margin: 0 0 0 0;
}


/* Not sure how you want to handle this, see support/options.shtml as a example */

div#col4 {
	width: 300px;
	float: left;
	margin-right: 30px;
}

div#col5 {
	width: 300px;
	float: left;
	margin-right: 30px;
}

div#col6 {
	float: right;
	width: 300px;
}
/* Perhaps these should be a global element */

.fl {
	float: left;
}
.fr {
	float: right;
}

div.clearall {
	clear:both;
}

img.fl {
	padding: 10px 15px 10px 0;
}

img.fr {
	padding: 10px 0 10px 15px;
}