/*
******************************************************************************************************
*                                                                                                    *
*   S C R E E N . C S S                                                                              *
*                                                                                                    *
*   Version: 1.1                                                                                     *
*   Last modified: 11.01.2010                                                                        *
*                                                                                                    *
******************************************************************************************************
*/



/*  G L O B A L   S E T T I N G S
--------------------------------------------------------------------------------------------------- */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, legend, fieldset, label, table, th, tr, td { background: transparent; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; margin: 0; padding: 0; }

html { height: 100%; }
body { background: #F0F5Fa url("../images/_bg/header.png") repeat-x; font: normal 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #535557; text-align: center; -webkit-text-stroke: 1px transparent; }
@media only screen and (max-device-width:480px) { body {-webkit-text-stroke: 0 black; } }

.inner { text-align: left; position: relative; width: 790px; margin: 0 auto; padding: 0 20px; z-index: 1 }


/* Global Offset -------------- */

h2, h3, p { margin: 0 0 12px; }


/* Headings ------------------- */

h2, h3 { font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; letter-spacing: -1px; }

h1 { background: url("../images/_bg/h1.png") no-repeat -15px 100px; text-indent: -9999px; display: block; width: 500px; height: 225px; margin-bottom: 65px }
body#en h1 { background-image: url("../images/_bg/h1-en.png"); }
h2 { font-size: 22px; color: #194e92; display: block; border: 1px solid #CCC; border-width: 0 0 1px; margin-bottom: 20px; padding: 10px 0 10px; }
h3 { font-size: 18px; color: #737577; }


/* Links ---------------------- */

a:link { color: #69c; text-decoration: underline; }
a:hover { color: #369; text-decoration: underline; }
a:active { color: #369; text-decoration: underline; }
a:visited { color: #69c; text-decoration: underline; }

a, :focus { outline: 0; -moz-outline-style: 0 none; }


/* Common Formatting ---------- */

strong, b { font-weight: bold; }
sup { line-height: 0; color: #999; font-size: 60% }
hr { display: none; }


/* Buttons -------------------- */

button { cursor: pointer; vertical-align: middle; margin: 0; }

.btn { background-color: transparent; background-position: 0 0; text-indent: -9999px; display: block; height: 38px; border: 0 none; }
.btn:active { position: relative; top: 1px; }


/*  G L O B A L   C L A S S E S
--------------------------------------------------------------------------------------------------- */

.left { float: left !important; }
.right { float: right !important; }

.hidden { overflow: hidden; position: absolute; height: 0; width: 0; left: -9999px; }

.clr { overflow: hidden; }
.clear { clear: both; }

img, a img { border: 0; margin: 0; }

img.left { margin: 0 10px 10px 0; }
img.right { margin: 0 0 10px 10px; }

.rc { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }


/*  H E A D E R
--------------------------------------------------------------------------------------------------- */

img#logo { position: absolute; top: 0; left: 18px; }
img#iphone { position: absolute; display: block; top: 0px; right: -35px; }

#flag-en { position: absolute; top: 50px; left: 85px; z-index: 200 }
#flag-de { position: absolute; top: 32px; left: 85px; z-index: 200 }


/*  M A I N
--------------------------------------------------------------------------------------------------- */

#main { background: #FFF; }
#main .inner { padding-bottom: 30px; }

.group { width: 840px; overflow: hidden; margin: 0 0 20px -50px; }
.group>div { display: inline; float: left; width: 230px; margin: 0 0 0 50px; }

.no01, .no02, .no03 { background-repeat: no-repeat; background-position: 0 50%; padding: 2px 0 2px 28px }
.no01 { background-image: url("../images/01.gif"); }
.no02 { background-image: url("../images/02.gif"); }
.no03 { background-image: url("../images/03.gif"); }

.group>div img { display: block; margin-bottom: 16px; }

.cta { position: relative; background: #d0d5da; width: 485px; margin-bottom: 40px; padding: 10px 10px 8px 15px; border-top: 1px solid #FFF; border-bottom: 1px solid #AAA; overflow: hidden; }
.cta p { float: left; margin: 0; }
.cta .btn { background: url(../images/_btn/download.png); width: 132px; margin: 0 0 0 18px }

p#price { font-size: 11px; line-height: 1.3; color: #939597; display: block; border-top: 1px solid #CCC; padding-top: 15px; }
p#price sup { font-size: 10px; color: #535557; }


/*  F O O T E R
--------------------------------------------------------------------------------------------------- */

#footer { border-top: 1px solid #D1D5D9; padding-top: 20px; }