/* Global reset from http://meyerweb.com/eric/tools/css/reset/ */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Start */

html
{
	min-height: 100%;
	height: 100%;
}

body
{
	color: #000000;
	background-color: #E8F4FF;
	background-image: url('../images/body.png');
	background-repeat: repeat-y;
	background-position: top center;
	min-height: 100%;
	height: 100%;
	font-family: "Helvetica", sans-serif;
	font-size: 16px;
	line-height: 1;
}

sup,
sub  { font-size: 70%; }

sup { vertical-align: top;    }
sub { vertical-align: bottom; }

a       { color: #191966; text-decoration: underline; }
a:hover { color: #CC6600; text-decoration: none; }

h1, .h1 { font-size: 30px; margin: .67em 0; font-weight: bold;   text-align: center; }
h2, .h2 { font-size: 20px; margin: .83em 0; font-weight: normal; text-align: left;   }

p,
li,
dt,
dd
{
	line-height: 1.2;
}

p
{
	text-align: justify;
	margin: 1.2em 0;
}

div.text-block > p             { text-indent: 3em  !important; }
div.text-block > p:first-child { text-indent: 0    !important; }

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p
{
	text-indent: 0 !important;
}

table
{
	margin: 1em auto;
}

th,
td
{
	font-weight: normal;
	padding: 0.1em;
}

th { text-align: right; }
td { text-align: left; }

form dl > dt
{
	font-weight: bold;
	margin: 0 0 0.25em 0;
	padding: 0 !important;
}

form dl > dd
{
	margin: 0 0 0.5em 2em;
	padding: 0 !important;
}

table.data
{
	border-collapse: collapse;
	border-spacing: 0px
}

table.data th,
table.data td
{
	border: #E0E0E0 1px solid;
}

table.data tr.odd  { background-color: #F2F2F2; }
table.data tr.even { background-color: #F7F7F7; }

th.anchor,
td.anchor,
tr.anchor > th,
tr.anchor > td
{
	padding: 0;
}

th.anchor > a,
td.anchor > a,
tr.anchor > th > a,
tr.anchor > td > a
{
	padding: 0.1em;
	display: block;
}

div.buttons,
div.learn-more
{
	text-align: right;
}

div.learn-more
{
	text-transform: lowercase;
	margin-top: -0.6em;
}

div#main       ul,
div#side-panel ul,
div#main       ol,
div#side-panel ol
{
	padding: 0 1.5em;
	margin: 1em 0;
}

div#main       ul,
div#side-panel ul
{
	list-style-type: disc;
}

div#main       ol,
div#side-panel ol
{
	list-style-type: decimal;
}

div#main       li > ul,
div#side-panel li > ul,
div#main       li > ol,
div#side-panel li > ol
{
	margin: 0;
}

div#main       li > ul,
div#side-panel li > ul
{
	list-style-type: circle;
}

div#main       li,
div#side-panel li
{
	padding: 0.2em 0;
}

div#main       dl > *,
div#side-panel dl > *
{
	padding: 0.2em 0;
}

body > div
{
	background-image: url('../images/body-fade.png');
	background-repeat: repeat-x;
	min-height: 100%;
	height: 100%;
}

div#page
{
	min-height: 100%;
	height: 100%;
	width: 800px;
	margin: 0 auto;
	padding: 0 8px;
	background-position: top left;
	background-image: url('../images/page.png');
	background-repeat: no-repeat;
}

div#page > div
{
	background-color: #FFFFFF;
	background-image: url('../images/page-sidebar.png');
	background-repeat: repeat-y;
	background-position: top left;
	min-height: 100%;
	position: relative;
	overflow: hidden;
}

div#header
{
	background-image: url('../images/header.jpg');
	background-repeat: no-repeat;
	color: #FFFFFF;
	width: 100%;
	border-bottom: #333333 2px solid;
	position: absolute;
	top: 0;
	left: 0;
	text-align: right;
	font-size: 12px;
	height: 196px;
}

div#header a
{
	text-decoration: none;
}

div#header > div
{
	position: relative;
	height: 100%;
}

div#header > div > div#logo
{
	background-image: url('../images/page.png');
	background-repeat: no-repeat;
	background-position: -8px 0px;
	width: 160px;
	height: 114px;
	position: absolute;
	left: 105px;
	top: 14px;
}

div#header > div > ul
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: url('../images/header.jpg');
	background-repeat: no-repeat;
	background-position: 0px -135px;
	height: 61px;
}

div#header > div > ul > li
{
	width: 104px;
	display: block;
	float: left;
	height: 100%;
	border-right: #666666 1px solid;
	background-image: url('../images/header.jpg');
	background-repeat: no-repeat;
}

div#header > div > ul > li.n0 { background-position:    0px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n1 { background-position: -105px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n2 { background-position: -210px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n3 { background-position: -315px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n4 { background-position: -420px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n5 { background-position: -525px -196px; /* -(n * (width + border)) -196px */ }
div#header > div > ul > li.n6 { background-position: -630px -196px; /* -(n * (width + border)) -196px */ }

div#header > div > ul       > li:hover,
div#header > div > ul       > li.active,
div#header > div > ul:hover > li.active:hover
{
	background-image: none;
}

div#header > div > ul:hover > li.active
{
	background-image: inherit;
}

div#header > div > ul > li > a
{
	display: block;
	height: 100%;
	color: inherit;
	position: relative;
}

div#header > div > ul > li > a > span.title
{
	color: #DDDDDD;
	text-transform: uppercase;
	font-size: 18px;
	position: absolute;
	top: 2px;
	right: 3px;
	z-index: 2;
}

div#header > div > ul > li > a > span.desc
{
	color: #BBBBBB;
	text-transform: lowercase;
	font-size: 12px;
	position: absolute;
	bottom: 2px;
	right: 3px;
	z-index: 2;
}

div#header > div > ul       > li:hover        > a > span.title,
div#header > div > ul       > li.active       > a > span.title,
div#header > div > ul:hover > li.active:hover > a > span.title { color: #FFFFFF; } /*C0E0F0 FFCC00*/
div#header > div > ul       > li:hover        > a > span.desc,
div#header > div > ul       > li.active       > a > span.desc,
div#header > div > ul:hover > li.active:hover > a > span.desc  { color: #DDDDDD; }

div#header > div > ul:hover > li.active > a > span.title { color: #DDDDDD; }
div#header > div > ul:hover > li.active > a > span.desc  { color: #BBBBBB; }

div#header > div > ul > li > a > span.title.shadow
{
	top: 3px;
	right: 2px;
}

div#header > div > ul > li > a > span.desc.shadow
{
	bottom: 1px;
	right: 2px;
}

div#header > div > ul > li > a > span.shadow
{
	color: #000000 !important;
	display: none;
	z-index: 1;
}

div#header > div > ul > li:hover  > a > span.shadow,
div#header > div > ul > li.active > a > span.shadow
{
	display: inline;
}

div#footer
{
	background-color: #000000;
	color: #FFFFFF;
	width: 100%;
	border-top: #333333 2px solid;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: right;
	font-size: 12px;
	line-height: 1.5;
}

div#footer > div
{
	padding: 0.5em 0.7em;
}

div#footer a
{
	color: #FFFFFF;
	text-decoration: underline;
}

div#footer a:hover
{
	text-decoration: none;
}

div#footer > div > ul
{
}

div#footer > div > ul > li
{
	display: inline;
	padding: 0 0.5em;
	border-right: #FFFFFF 1px solid;
}

div#footer > div > ul > li.last
{
	padding-right: 0;
	border-right: none;
}

span.inter
{
	color: #C0E0F0;
}

span.neti
{
	color: #FFCC00;
}

div#side-panel
{
	width: 272px;
	border-right: transparent 1px solid;
	padding: 198px 0 3em 0;
	float: right;
}

div#side-panel > div
{
	padding: 1.5em;
}

div#side-panel > div > div.block:first-child
{
	margin-top: 0;
}

div#side-panel > div > div.block
{
	margin: 1em 0;
	background-color: #333333;
	color: #FFFFFF;
	padding-bottom: 5px;
}

div#side-panel > div > div.block > div.head
{
	text-align: right;
	position: relative;
	height: 67px;
}

div#side-panel > div > div.block > div.head > div.title
{
	color: #DDDDDD;
	text-transform: uppercase;
	font-size: 18px;
	position: absolute;
	top: 6px;
	right: 6px;
}

div#side-panel > div > div.block > div.head > div.desc
{
	color: #BBBBBB;
	text-transform: lowercase;
	font-size: 12px;
	position: absolute;
	bottom: 4px;
	right: 6px;
	width: 60%;
}

div#side-panel > div > div.block > div.body
{
	background-color: #FFFFFF;
	color: #333333;
	border-left: #E0E0E0 1px solid;
	border-right: #E0E0E0 1px solid;
	padding: 9px;
}

div#main
{
	width: 526px;
	border-left: transparent 1px solid;
	padding: 198px 0 3em 0;
	float: right;
}

div#main > div
{
	padding: 2em;
}

div#main > div > *:first-child
{
	margin-top: 0;
}

div#main > div p
{
	text-indent: 3em;
}

div.columns
{
	overflow: hidden;
}

div.column
{
	float: left;
}

div.columns.two     > div.column { width: 50%; }
div.columns.three > div.column { width: 33%; }

div.column             > div { padding: 0 0.25em 0 0.25em; }
div.column.left   > div { padding: 0 0.25em 0 0;      }
div.column.right > div { padding: 0 0      0 0.25em; }

div.button
{
	border: #E0E0E0 1px solid;
	text-align: center;
	font-size: 14px;
	background-color: #FCFCFC;
	color: #333333;
}

div.button.blue
{
	text-transform: lowercase;
	background-color: #E6F2FF;
}

div.button.green
{
	text-transform: lowercase;
	background-color: #F2FFE6;
}

div.button > a
{
	display: block;
	padding: 0.2em;
	color: #333333; /*WAS: inherit;*/
	text-decoration: none;
}

table.top-products
{
	font-size: 14px;
	width: 100%;
	margin: 0;
}

table.top-products tr
{
	vertical-align: top;
	height: 42px;
}

table.top-products td
{
	vertical-align: top;
	height: 42px;
	padding: 0.2em;
}

table.top-products td.number { border-right: none; }
table.top-products td.name   { border-left:  none; padding: 0; }

table.top-products td.name > div
{
	position: relative;
	height: 100%;
}

table.top-products td.name > div > div
{
	padding: 0.2em;
}

table.top-products td.name > div > div > span.price
{
	position: absolute;
	bottom: 3px;
	right: 3px;
	font-size: 10px;
	color: #999999;
}

table.top-products td.img
{
	padding: 0;
	width: 42px;
	vertical-align: bottom;
}

table.top-products td.img img
{
	display: block;
}

dl.references > dt
{
	width: 2.5em;
	float: left;
	clear: left;
	text-align: right;
}

dl.references > dd
{
	margin-left: 3em;
}

table.comparison
{
	border-collapse: separate;
}

table.comparison > thead > tr         > th,
table.comparison > tbody > tr.overall > th
{
	font-weight: bold;
}

table.comparison > tbody > tr.overall > td,
table.comparison > tbody > tr.overall > th
{
	/*padding-top: 1em;*/
}

table.comparison > *     > tr > td,
table.comparison > thead > tr > th
{
	text-align: center;
}

table.comparison > tbody > tr > td,
table.comparison > tbody > tr > th
{
	border-right: 1px solid #E0E0E0;
	border-top:   1px solid #E0E0E0;
}

table.comparison > tbody > tr:first-child > td,
table.comparison > tbody > tr:first-child > th
{
	border-top: none;
}

table.comparison > tbody > tr > th
{
	border-left: 1px solid #E0E0E0;
}

table.comparison > thead > tr > td
{
	border-bottom: 1px solid #E0E0E0;
	border-right:  1px solid #333333;
}

table.comparison > tbody > tr.last > *
{
	border-bottom: 1px solid #E0E0E0;
}

table.comparison > thead > tr         > th,
table.comparison > tbody > tr.overall > *
{
	background-color: #333333;
	color: #DDDDDD;
	border: 1px solid #333333;
	font-weight: bold;
}

table.comparison > * > tr > *
{
	vertical-align: middle;
	padding: 0.2em 0.5em;
}

tr.even
{
	background-color: #F7F7F7;
}

tr.odd
{
	background-color: #F2F2F2;
}

td.first,
td.yes,
td.ino,
td.good   { color: #00CC00; }
td.second,
td.ok,
td.varies { color: #999900; }
td.third,
td.no,
td.iyes,
td.bad    { color: #CC0000; }

table.comparison > tbody > tr.overall > td.first  { color: #00FF00; }
table.comparison > tbody > tr.overall > td.second { color: #FFFF00; }
table.comparison > tbody > tr.overall > td.third  { color: #FF0000; }