@charset "utf-8";


/* The tabs used to switch between the products */ 

div.productTabs {
	position: relative;
	width: 900px;
	height: 30px;
	margin-top: 8px;
	background-color:#a3a3a3; 
	background-image: url('/skin/images/tab_back.png');
	background-repeat: repeat-x;
	font-size: 10px;
	font-weight: bold;
	color: black;
}

div.productTabs span {
	display: inline-block;
	white-space: nowrap;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 8px;
	height: 22px;
	cursor: pointer;
	background-repeat: no-repeat;
}
div.productTabs span.active { color: white; }
div.productTabs span.hover { opacity: 0.8 }
div.productTabs img { position: absolute; right: 5px; top: 2px; }
div.productTabs span.opinioBack { background: url('/skin/buttons/opinio-active-background.png');}
div.productTabs span.probeBack { background: url('/skin/buttons/probe-active-background.png') -108px 0px; }
div.productTabs span.easychartsBack { background: url('/skin/buttons/chart-active-background.png') -244px 0px; }


/* The main display boxes */

div.main { width: 900px; height: 410px; font-size: 12px; color: white; line-height: 150%; overflow: hidden; }
div.main h1 { font-size: 22px; font-weight: normal; line-height: 130%;}
div.main h2 { font-size: 14px; font-weight: bold; color: white; white-space: nowrap;}
div.main div { background-repeat: no-repeat; height: 268px; }
div.main div.left { float: left; cursor: pointer; width: 300px; height: 248px; padding-top: 20px; padding-left: 20px; padding-right: 280px;}
div.main div.right { float: right; clear: right; cursor: pointer; width: 260px; height: 258px; padding-top: 10px; padding-left: 20px; padding-right: 20px; background-color: #5d5d5d; }
div.main div.right ul { font-size: 11px; width: 260px; margin-left: 0px; padding-left: 16px; margin-bottom: 35px; line-height: 120%;}
div.main div.bottom { clear: both; top: 268px; width: 900px; height: 138px; white-space: nowrap; overflow: visible; }
div.main div.bottom div { cursor: pointer; }

/* Product specific styles for the main boxes */ 

div.main#opinioMain div.left { background-image: url('/skin/images/opinio_main.png'); }
div.main#opinioMain div.right { background-image: url('/skin/images/opinio_screenshots.png'); background-position: 30px 135px; }
div.main#opinioMain div.right p { padding-right: 130px; }
div.main#probeMain div.left { background-image: url('/skin/images/probe_main.png'); }
div.main#probeMain div.right { background-image: url('/skin/images/probe_rightbox.png'); background-position: 40px 135px; }
div.main#probeMain div.right p { padding-right: 130px; }
div.main#easychartsMain div.left { background-image: url('/skin/images/easycharts_main.png'); width: 270px; padding-right: 310px;}
div.main#easychartsMain div.right { background-image: url('/skin/images/chart_rightbox.png'); background-position: 30px 135px; }
div.main#easychartsMain div.right p { padding-right: 130px; }


/* The buttons used below the main area */ 

div.main div.bottom div {
	position: relative;
	float: left;
	width: 219px;
	height: 131px;
	margin-top: 5px;
	margin-left: 5px;
	text-align: center;
	border: 1px solid #b7b7b7;
}
div.main div.bottom :first-child { margin-left: 0px; margin-right: 1px; }
div.main div.bottom img { position: absolute; left: 30px; top: 5px; }
div.main div.bottom h3 { font-size: 11px; font-weight: bold; margin: 0px; margin-top: 94px; white-space: normal;}
div.main div.bottom p { font-size: 10px; color: #5d5d5d;; margin-top: -5px; }

div.main#opinioMain h3 { color: #53803C; }
div.main#probeMain h3 { color: #45759C; }
div.main#easychartsMain h3 { color: #E8730F; }
div.main#easychartsMain .comment { height: 131px; position: relative; left: 0px; top: 0px; overflow: hidden; line-height: 120%;}
div.main#easychartsMain .comment h3 { margin-top: 20px; padding-left: 20px; padding-right: 20px; }
div.main#easychartsMain .comment p { margin-top: 10px; margin-right: 20px; }