/*************************************
 * Basic page styling and layout
 *************************************/

html {
	background: black;
}

body {
	font-family: 'Bitstream Vera Sans', 'Helvetica', 'Arial', 'Sans-Serif';
	color: #444444;
	margin: 0;
	padding: 0;
	background: black;
}

img {
	border: 0;
}

hr {
	border: none;
	border-bottom: 1px solid #cccccc;
	margin-top: 1em;
	margin-bottom: 1em;
}

h1 {
	font-size: 20pt;
	color: black;
}

h2 {
	font-size: 16pt;
}

h3 {
	font-size: 12pt;
}

dt {
	font-weight: bold;
}

pre {
	background: #e0e0e0;
	border: solid 1px #aaaaaa;
	padding: 6px;
	white-space: pre-wrap;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#page_container {
	position: absolute;
	width: 100%;
	background: white;
}


/***** Header *****/

#page_header {
	position: absolute;
	height: 100px;
	width: 100%;
	left: 0px;
	top: 0px;
	background: url('../images/header-gradient.png') top left repeat-x;
}

#site_logo_icon a {
	position: absolute;
	left: 100px;
	top: 0px;
	width: 188px;
	height: 100px;
	background: url('../images/header.png') top left no-repeat;
	cursor: pointer;
}

#site_logo_banner a {
	position: absolute;
	left: 12px;
	top: 0px;
	width: 93px;
	height: 95px;
	background: url('../images/gems.png') top left no-repeat;
	cursor: pointer;
}

#site_logo_text {
	display: none;
}

#site_logo_text h1 {
	margin: 0;
	padding: 0;
	display: inline;
}

#site_logo_text a {
	color: white;
	text-decoration: none;
	font-size: 28px;
}

#site_logo_text .footnote {
	display: inline;
	margin-left: 20px;
	font-size: 14px;
	font-style: italic;
}

#page_header .navigation {
	position: absolute;
	display: block;
	right: 35px;
	bottom: 0px;
	font-family: 'Myriad Pro', 'Trebuchet MS', Arial, Sans-Serif;
	font-size: 12pt;
}

#page_header .navigation .user_specific {
	margin-left: 2em;
}

#page_header .navigation ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}

#page_header .navigation ul li {
	display: block;
	float: left;
	margin-right: 1.4em;
}

#page_header .navigation ul li.last {
	margin-right: 0;
}

#page_header .navigation ul li.active a {
	background: white;
	color: black;
	padding-left: 16px;
	padding-right: 16px;
}

#page_header .navigation ul li.active a:hover {
	color: blue;
}

#page_header .navigation ul li a {
	display: block;
	color: white;
	text-decoration: none;
	padding-top: 7px;
	padding-bottom: 7px;
}

#page_header .navigation ul li a:hover {
	color: yellow;
}

#page_header .search {
	position: absolute;
	top: 30px;
	right: 35px;
}

#page_header .search .label {
	display: none;
}

#page_header #global_search_box {
	width: 200px;
}

#page_header .search input {
	border: 1px solid #cccccc;
}


/***** Eyecatcher, body and footer *****/

#non_header_area {
	margin-top: 130px;
}

#page_content {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, Sans-Serif;
}

#page_content a {
	color: #4351d9;
	text-decoration: none;
	border-bottom: dotted 1px #4351d9;
}

#page_content a:visited {
	color: #7a26c8;
}

#page_content a:hover {
	color: #9090ff;
	border-bottom: none;
}

#page_footer {
	margin-top: 30px;
	padding-top: 25px;
	padding-bottom: 25px;
	background: black;
	border-top: 3px solid #555555;
	color: #e0e0e0;
	font-size: 10pt;
	line-height: 1.5em;
}

#page_footer > .inner {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#page_footer a {
	color: #9090ff;
	text-decoration: none;
}

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

#eyecatcher .staging_warning {
	background: #ffd0d0;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 12px;
	margin-bottom: 12px;
	padding: 18px;
	font-size: 16pt;
	text-align: center;
}


/*************************************
 * Frontpage-specific
 *************************************/

/***** Introduction box *****/

.frontpage.introduction {
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, Sans-Serif;
	font-size: 14pt;
}

.frontpage.introduction .inner1 {
	background-color: #ffdeaf;
	background-image: url(../images/eyecatcher-bg.png);
	background-position: top left;
	background-repeat: repeat-x;
	margin-bottom: 30px;
	border-bottom: 6px solid #ffb675;
	padding: 24px;
}

.frontpage.introduction .inner2 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.frontpage.introduction .summary {
	float: left;
	width: 280px;
	line-height: 1.3em;
	text-align: center;
	white-space: nowrap;
}

.frontpage.introduction .summary .what {
	font-size: 14pt;
}

.frontpage.introduction .summary .operating_systems {
	margin-top: 12px;
	margin-bottom: 12px;
	font-size: 18pt;
}

.frontpage.introduction .summary .benefit {
	font-size: 14pt;
	font-style: italic;
}

.frontpage.introduction .summary .logos {
	margin-top: 16px;
}

.frontpage.introduction .summary .logos img {
	margin-left: 8px;
}

.frontpage.introduction .example {
	float: right;
	width: 470px;
	font-size: 22pt;
	text-align: center;
}

.frontpage.introduction .example pre {
	margin: 0;
	margin-bottom: 1em;
	padding: 12px;
	text-align: left;
	font-size: 13pt;
	background: #fff8db;
	border: solid 1px #fbae70;
}

.frontpage.introduction .install_pane {
	text-align: center;
	margin-top: 25px;
	padding-top: 25px;
	border-top: solid 3px #ffb675;
}

.frontpage.introduction .install_pane img {
	vertical-align: middle;
}

.frontpage.introduction .install_pane .separator {
	display: none;
}

.frontpage.introduction .install_pane .description {
	margin-left: 30px;
}


/***** Search box *****/

.frontpage.search {
	background: #eeeeee;
	border: solid 3px #bbbbbb;
	margin-bottom: 20px;
	padding: 20px;
	text-align: center;
	font-size: 13pt;
}

.frontpage.search h2 {
	margin-top: 0;
}

.frontpage.search p.first {
	margin-top: 0;
}

.frontpage.search .gem_name {
	width: 300px;
}

.frontpage.search p.last {
	margin-bottom: 0;
}

.frontpage.search.panel,
.frontpage.information .install_pane {
	background-image: url(../images/panel-bg.png);
	background-repeat: no-repeat;
	background-position: top left;
}

/***** Explanation area *****/

.frontpage.information .left {
	float: left;
	width: 380px;
}

.frontpage.information .right {
	float: right;
	width: 380px;
}

.frontpage.information {
	text-align: justify;
	font-size: 1em;
	line-height: 1.5em;
}

.frontpage.information .left p,
.frontpage.information .right p,
	margin-top: 1.8em;
	margin-bottom: 1.8em;
}

.frontpage.information .left h2 + p,
.frontpage.information .right h2 + p,
.frontpage.information .right h3 + p {
	margin-top: 0;
}

.frontpage.information .left h2,
.frontpage.information .right h2,
.frontpage.information .right h3 {
	margin-bottom: 0.2em;
	color: #222;
}

.frontpage.information .column {
	margin-bottom: 25px;
}

.frontpage.information .advantages {
	margin-left: 1.25em;
	padding-left: 0;
}

.frontpage.information .advantages li {
	margin-bottom: 1em;
}

.frontpage.information .install_pane {
	clear: both;
	font-size: 14pt;
	background: #eeeeee;
	border: solid 3px #bbbbbb;
	margin-bottom: 20px;
	padding: 20px;
	text-align: center;
}

.frontpage.information .install_pane h2 {
	margin-top: 0;
}

.frontpage.information .install_pane a {
	border-bottom: none !important;
}

.frontpage.information .install_pane img {
	vertical-align: middle;
}

.frontpage.information .install_pane .separator {
	display: none;
}

.frontpage.information .install_pane .description {
	margin-left: 20px;
}


/*************************************
 * "Supported distributions" table
 *************************************/

.supported_distributions {
	border-collapse: collapse;
	margin-top: 1em;
	margin-bottom: 1em;
}

.supported_distributions th {
	background: #222222;
	color: #f7f7f7;
	border-left: solid 1px white;
	font-size: small;
	padding: 5px;
	text-align: center;
}

.supported_distributions th:first-child {
	border-left: solid 1px black;
}

.supported_distributions td {
	border: solid 1px #666666;
	font-size: small;
	padding: 5px;
	text-align: center;
}

.supported_distributions td.supported {
	color: #00aa00;
}

.supported_distributions td.unsupported {
	color: #dd0000;
}


/*************************************
 * Tip and note boxes
 *************************************/

.tip, .note {
	background: #fff0c6;
	border: solid 1px #ffa63d;
	margin: 12px;
	padding: 12px;
}


/*************************************
 * Usage page
 *************************************/

.distro .instructions {
	margin-left: 20px;
}

.distro .instructions ol {
	margin-left: 1.25em;
	padding-left: 0;
}


/*************************************
 * Pricing & Signup page
 *************************************/

.plans {
	border-collapse: collapse;
	margin-top: 1em;
	margin-bottom: 1em;
}

.plans th {
	padding: 6px;
	background: #222222;
	border-left: solid 1px #bbbbbb;
	border-right: solid 1px #bbbbbb;
	color: #efefef;
}

.plans td {
	border: solid 1px #bbbbbb;
	text-align: center;
	padding: 6px;
	padding-left: 8px;
	padding-right: 8px;
}

.plans td.what {
	font-weight: bold;
}

.plans td .monthly_price {
	font-size: 16pt;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.plans tr.price td small {
	display: block;
	margin-top: 0.5em;
}


/*************************************
 * Packages
 *************************************/

.package {
	margin-bottom: 1em;
}

.package h3 {
	margin-top: 0;
	margin-bottom: 0.25em;
	cursor: pointer;
	color: #2222ff;
}

.package h3:hover {
	text-decoration: underline;
}

.package .details {
	margin-left: 20px;
}

.package table {
	width: 100%;
	margin: 0;
	padding: 0;
	border-spacing: 0;
}

.package table .what {
	white-space: nowrap;
	padding-right: 8px;
	font-weight: bold;
	text-align: right;
}

.package table .value {
	width: 100%;
}

.package .description {
	padding-top: 6px;
}