@charset "UTF-8";

* {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	background-image:url(images/background-pattern.jpg);
	background-repeat: repeat-x;
	background-color: #cdcdcd;
	margin: 0px;
}

p {
	font-size: 13px;
	line-height: 140%;
}

.overview p, td, .nav {
	font-size: 14px;
}

p, h2, td {
	color: #3c3c3c;
}

p, h2, td, th, .footer {
	text-shadow: 0px 1px 1px white;
}

p, h2, td, .footer {
	text-align: left;
}

p.requirements {
	font-size: 80%;
	text-align: center;
}

.logo {
	position: absolute;
	background-image:url(images/logo.png);
	background-position: 0px 0px;
	width: 120px;
	height: 75px;
	top: 0px;
	left: 120px;
	z-index:1;
}

h2 {
	margin-top: 0.6em;
	margin-bottom: 0.4em;
	font-size: 1.5em;
}

.clearer {
	clear: both;
}


/** Main layout (header, footer & inbetween) */

.container, .footer, .header, .content {
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	z-index: 1;
}

.header {	
	height: 1012px;
	top:0px;
}

.content {
	margin-top: -360px;
}

.footer {
	background-image:url(images/seperator.jpg);
	height: 60px;
	font-size: 12px;
	line-height: 150%;
	color: #777777;
	text-align: center;
}

.container {
	background-repeat: no-repeat;
	background-position: top center;
	margin: 0;
}

#page-standard .container {
	background-image:url(images/background-header.jpg);
}

#page-index .container {	
	background-image:url(images/background-header-pro.jpg);
}

#page-compare .container {	
	background-image:url(images/background-header-compare.jpg);
}

#page-compare .header {
	height: 860px;
}


/** Navigation */

.navcontainer {
	float:right;
	text-align: right;
	margin-top:8px;
	margin-right:100px;
	width: 500px;
	color: #495b6a;
	z-index:1;
}

.nav {
	color: #495b6a;
	text-shadow: 0px 1px 1px #cacfd6;
	font-weight: bold;
	margin-left: 1.7em;
}

.nav:hover {
	color: #008fff;
}

.nav:active {
	color: #008fff;
}


/** Links **/

/* Normal links are underlined ... */
a {
	text-decoration: underline;
}

/* ... with the underline disappearing as a hover effect */
a:hover {
	text-decoration: none;
}

/* Only the navigation links at the top have no underline */
.nav a {
	text-decoration: none;
}

a:link {
	color: #495b6a;
}

a:visited {
	color: #495b6a;
}

a:hover {
	color: #008fff;
}

a:active {
	color: #0478d4;
}

/*
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
*/


/** Header images */

#header-overview, #header-compare, #header-nutshell {
	margin-left: auto;
	margin-right: auto;
	/* Make sure text is not visible, see http://css-tricks.com/css-image-replacement/ */
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	width: 358px;
}

#header-overview {
	background-image: url(images/overview.png);
	height: 28px;
}

#header-compare {
	background-image:url(images/comparison-table.png);
	height: 35px;
}

#header-nutshell {
	background-image:url(images/featuresinanutshell.png);
	height: 28px;
}


/** Sections */

.section {
	width: 80%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	margin-bottom: 6em;
	background-image: url(images/divider.png);
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 185px;
}

.column-left, .column-right {
	width: 46%;
	margin-top: 3em;
}

.column-left {
	float: left;
	margin-right: 2%;
}

.column-right {
	float: right;
	margin-left: 2%;
}


/** Overview box */

.overview {
	position: relative;
	background-repeat: no-repeat;
	padding-top: 3.0em;
}

.overview p {
	line-height: 150%;
	margin-bottom: 1.0em;
}

#page-standard .overview, #page-index .overview {
	width: 38%;
	max-width: 400px;
	top: -480px;
	left: 54%;
}

#page-standard .overview {
	background-image: url(images/whatismainmenu.png);
}

#page-index .overview {
	background-image: url(images/whymainmenupro.png);
}

#page-compare .overview {
	background-image: url(images/whichmainmenuareyou.png);
	top: -360px;   
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	max-width: 900px;
}


/** Tabs */

.tabs {
	position: relative;
	top: 393px;
	margin-left: auto;
	margin-right: auto;
	width: 508px;
	height: 33px;
}

.tab {
	display: block;
	position: absolute;
	background-position: 0 0px;
	height: 33px;
	width: 168px;
	z-index:1;
}

.tab:hover {
	background-position: 0 -33px;
}

.tab-standard {
	background-image:url(images/mainmenu.png);
}

.tab-index {
	background-image:url(images/mainmenupro.png);
	left: 170px;
}

.tab-compare {
	background-image:url(images/compare.png);
	left: 340px;
}

.tab-active {
	height: 34px;
}

.tab-active:hover {
	background-position: 0 -34px;
}

.tab-standard.tab-active {
	background-image:url(images/mainmenu-active.png);
}

.tab-index.tab-active {
	background-image:url(images/mainmenupro-active.png);
}

.tab-compare.tab-active {
	background-image:url(images/compare-active.png);
}


/** Download/buy buttons **/

.buttons, .download, .buy {
	position: absolute;
	height: 32px;
}

.buttons {
	top: 265px;
	left: 49%;
	width: 400px;
/*	border: 1px solid black;*/
}

.download, .buy {
	background-position: 0 0px;
	width: 156px;
}

.download {
	background-image:url(images/downloadbutton.png);
}

.buy {
	background-image:url(images/buynowbutton.png);
	left: 164px;
}

.download:hover, .buy:hover {
	background-position: 0 -32px;
}

.download:active, .buy:active {
	background-position: 0 -64px;
}


/** App Store **/

.available-on-app-store {
	/* position a bit above the bottom right */
	position: absolute;
	bottom: -10px;
	right: 0px;
	background-image: url(images/app-store.png);
	background-repeat: no-repeat;
	width: 149px;
	height: 45px;
}


/** Screenshots **/

.screenshot, .screenshot-overlay, .screenshot-magnifying-glass {
	background-repeat: no-repeat;
	position: absolute;
	height: 288px;
	width: 470px;
	top: 483px;
}

.screenshot {
	background-image: url(images/screenshot-thumbnail-background.png);
	right: 49.3%;
/*	border: 1px solid red;*/
}

.screenshot-overlay {
	background-position: center center;
	right: 50.6%;
	top: 472px;
}

.screenshot-magnifying-glass {
	background-image: url(images/screenshot-magnifying-glass.png);
	background-position: bottom right;
	right: 49.4%;
/*	border: 1px solid green;*/
}

#page-standard .screenshot-overlay {
	background-image: url(images/overlay-standard-thumbnail.png);
}

#page-index .screenshot-overlay {
	background-image: url(images/overlay-pro-thumbnail.png);
}



/** Features **/

.feature {
	float: left;
	width: 46%;
	margin-top: 3em;
	margin-bottom: 2em;
/*	border: 1px solid black;*/
}

.left {
	margin-right: 4%;
}

.right {
	margin-left: 4%;
}


/** Comparison table **/

.tablecontainer {
	margin-left: auto;
	margin-right: auto;
/*	background-color: transparent;*/
	margin-top: 40px;
	border-width:1px;
	border-style:solid;
	border-color: #b6b6b6;
	-webkit-box-shadow: 0px 1px 1px white;
	-webkit-border-radius: 5px;
	z-index:1;
}

#comparison-table tr.even {
	background-color: transparent;
}

#comparison-table tr.odd {
	background-color: #d8d8d8;
}

#comparison-table th {
	color: #787878;
	font-weight:bold;
	font-size:18px;
	line-height:2.5em;
	padding-left: 10px;
	padding-right: 10px;
}

#comparison-table td {
	line-height: 150%;
}


/** Link lists **/

#page-standard p.link-list, #page-index p.link-list {
	text-align: left;
}

#page-standard .overview p.link-list {
	margin-bottom: 0;
}

#page-compare p.link-list {
	text-align: center;
}

/* Text links at bottom of feature and nutshell sections */
#page-standard .section p.link-list, #page-index .section p.link-list {
	text-align: center;
	font-size: 1em;
	margin-top: 2em;
}