@charset 'utf-8';

/**********************************************************************/
/* 1. Global reset courtesy of Eric Meyer:                            */
/*    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/    */
/*    (slightly modified version)                                     */
/**********************************************************************/

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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

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

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

caption, th, td {
    text-align: left;
    font-weight: normal;
}


/**********************************************************************/
/* 2. Some very basic helper styles which alwaye come in handy        */
/**********************************************************************/

/* Hide elements the screen user doesn't need */
.invisible {
    position: absolute;
    left: -9999em;
}

a.invisible:focus {
    position: static;
    left: 0;
}

/* Easy clearing */
.clearfix { display: inline-block; }

.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.no-border { border: 0px none; }


/**********************************************************************/
/* 3. Basic styles against the reset                                  */
/**********************************************************************/

body {
    background: #404040 url(../img/bodybg.png) top left repeat-x;
    color: #fff;
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
    line-height: 1.5;
}

code, kbd, var,
tt, pre { font-family: Consolas, "Courier New", Courier, monospace; }

pre { font-size: 13px; }

p code, p kbd,
p var, p tt { line-height: 1; }

a:link,
a:visited {
    color: #ddd;
    text-decoration: underline;
}

a:hover { color: #fff; }

a:active,
a:focus { outline: 1px dotted #888; }

strong, dt { font-weight: bold; }

em, cite { font-style: italic; }

abbr[title] { cursor: help; }

a abbr { cursor: pointer!important; }

del {
    color: #888;
    text-decoration: line-through;
}

ins {
    border-bottom: 1px dashed #888;
    text-decoration: none;
}

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

sub, sup {
    font-size: 75%;
    line-height: 1;
}

ol { list-style-type: decimal; }
ul { list-style-type: disc; }

ol, ul { padding-left: 15px; }

blockquote {
    margin: 1.5em 0 1.5em 2.5em;
    padding: 0;
    text-indent: -.3em;
    width: 80%;
}

/* text-indent doesn't make sense in IE6 + IE7  */
/* because it doesn't do :before or :after      */
* html blockquote { text-indent: 0em; }
*:first-child+html blockquote { text-indent: 0; }

blockquote { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(de) { quotes: "\201E" "\201C" "\201A" "\2018"; }
blockquote:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }

blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }

/* Safari support */
blockquote * { quotes: none; }
blockquote > *:before { content: "\201E"; }
blockquote > *:after  { content: "\201C"; }

*[lang~='de'] blockquote > *:before,
blockquote[lang~='de'] > *:before { content: "\201E"; }
*[lang~='de'] blockquote > *:after,
blockquote[lang~='de'] > *:after { content: "\201C"; }

*[lang~='en'] blockquote > *:before,
blockquote[lang~='en'] > *:before { content: "\201C"; }
*[lang~='en'] blockquote > *:after,
blockquote[lang~='en'] > *:after { content: "\201D"; }

legend, label, select,
input, textarea { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; }

input, textarea, select { font-size: 1em; }

label { font-weight: normal; }

label, button,
input[type=button],
input[type=submit] { cursor: pointer; }

fieldset {
    display: block;
    margin: 0 0 1.5em;
}

input, textarea { padding: 2px; }

/* This positions an unstyled legend element */
/* correctly in IE6 + IE7                    */
* html legend,
*:first-child+html legend {
    position: relative;
    left: -10px;
}


/**********************************************************************/
/* 4. Screen styles                                                   */
/**********************************************************************/

h1, h2, h3,
h4, h5, h6 { font-weight: bold; }

h1 { font-size: 40px; }

h2 { font-size: 24px; }

h3 { font-size: 18px; }

h3, h4, h5, h6,
p, ol, ul, dl,
address, pre, table { margin-bottom: 16px; }


img { vertical-align: bottom; }

.img-single { display: inline; }

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img-left {
    float: left;
    margin-right: 20px;
}

.img-right {
    float: right;
    margin-left: 20px;
}

#page {
    margin: 20px auto;
    width: 960px;
}

#nav {
    margin: 0 100px 20px;
    width: 760px;
}

#imprint {
    display: inline;
    float: right;
    height: 28px;
    width: 28px;
}

#imprint a,
#imprint strong { padding: 0!important; }

#nav ul {
    float: left;
    font-size: 14px;
    list-style: none;
    padding-left: 0;
    width: auto;
}

#nav li {
    background: url(../img/navbg.png) top left no-repeat;
    float: left;
    height: 40px;
    margin-right: 1px;
    width: 144px;
}

#nav li li {
    background: url(../img/navdd.png) top left repeat-y;
    float: none;
    height: 30px;
    width: 144px;
}

ul.dropdown {
    background: url(../img/navde.png) bottom left no-repeat;
    padding-bottom: 7px;
    position: absolute;
    left: -9999em;
}

#nav li:hover ul {
    left: auto;
    text-indent: 0;
}

#nav li#current { background: url(../img/navcp.png) top left no-repeat; }

#nav a,
#nav strong,
#nav em {
    color: #666;
    display: block;
    font-weight: normal;
    padding-top: 3px;
    min-height: 0;
    text-align: center;
    text-decoration: none;
}

#nav em {
    color: #aaa;
    font-style: normal;
}

#nav #current strong,
#nav #current a { color: #fff; }

#nav #current .dropdown a { color: #666; }

a.submenu { background: url(../img/navad.png) 95% 60% no-repeat; }

#header {
    background: url(../img/appicon.png) top left no-repeat;
    min-height: 100px;
}

#index #header,
#features #header {
    float: right;
    margin: 0 150px 25px 0;
    width: 450px;
}

#reminder #header,
#support #header,
#impressum #header,
#destination #header,
#hamburg #header,
#muenchen #header,
#berlin #header,
#stuttgart #header,
#frankfurt #header,
#koeln #header {
    margin: 0 100px 25px;
    width: 760px;
}

#hamburg #header { background: url(../img/appicon-hamburg.png) top left no-repeat; }
#muenchen #header { background: url(../img/appicon-muenchen.png) top left no-repeat; }
#berlin #header { background: url(../img/appicon-berlin.png) top left no-repeat; }
#stuttgart #header { background: url(../img/appicon-stuttgart.png) top left no-repeat; }
#frankfurt #header { background: url(../img/appicon-frankfurt.png) top left no-repeat; }
#koeln #header { background: url(../img/appicon-koeln.png) top left no-repeat; }

#header h1 {
    background: url(../img/logo.png) top left no-repeat;
    margin: 0 0 0 105px;
    min-height: 50px;
    text-indent: -9999em;
    width: 345px;
}

#header h2 {
    margin-left: 118px;
    width: 345px;
}

#index #header h2 { font-size: 16px; }

#destination #header h2,
#hamburg #header h2,
#muenchen #header h2,
#berlin #header h2,
#stuttgart #header h2,
#frankfurt #header h2,
#koeln #header h2,
#support #header h2 { width: 415px; }

#destination #header h2,
#hamburg #header h2,
#muenchen #header h2,
#berlin #header h2,
#stuttgart #header h2,
#frankfurt #header h2,
#koeln #header h2 {
    background: url(../img/tramauto.png) top left no-repeat;
    min-height: 75px;
    padding-left: 145px;
}

#content { font-size: 14px; }

#index #content,
#features #content {
    display: inline;
    float: right;
    margin-right: 150px;
    width: 450px;
}

#reminder #content {
    margin-top: -70px;
    margin-left: 218px;
    width: 600px;
}

#support #content,
#impressum #content,
#destination #content,
#hamburg #content,
#muenchen #content,
#berlin #content,
#stuttgart #content,
#frankfurt #content,
#koeln #content {
    margin: 0 100px;
    width: 760px;
}

#stadt-karte { margin-bottom: 24px; }

#forum, #faq,
#anschrift, #legal-stuff,
#external-links, #privacy-policy,
#sneak, #cities-de,
#schmuck {
    display: inline;
    width: 350px;
}

#forum, #anschrift,
#external-links,
#sneak {
    float: left;
    margin-right: 30px;
}

#faq, #legal-stuff,
#privacy-policy,
#cities-de,
#schmuck {
    float: right;
    margin-left: 30px;
}

#legal-stuff p { margin-top: 34px; }

#legal-stuff p#credit { margin-top: 20px; }

#external-links { clear: both; }

#external-links h3,
#privacy-policy h3 { font-size: .75em; }

#external-links p,
#privacy-policy p { font-size: .7142em;; }

#intro { font-weight: bold; }

#update {
    font-size: 1.2857em;
    margin-bottom: 22px;
}

#update strong {
    letter-spacing: 2px;
    text-transform: uppercase;
}

#getsatisfaction { text-align: center; }

#getsatisfaction a,
#cities-de a { display: inline-block; }

#feature-list,
#cities-de ul,
#gallery ul,
#faq ul {
    list-style: none;
    padding-left: 0;
}

#feature-list,
#cities-de ul { margin-bottom: 16px; }

#gallery ul { margin-bottom: 32px; }

#gallery li {
    display: inline;
    float: left;
    width: 126px;
}

#gallery a { display: inline-block; }

#gallery img { border: 3px solid #bfbfbf; }

#cities-de ul li { margin-bottom: 5px; }

#cities-de ul li span {
    margin-left: 25px;
    padding-bottom: 80px;
    vertical-align: middle;
}

.price {
    font-size: 1.25em;
}

#cities-de ul li span.price {
    display: block;
    margin-left: 0;
    max-width: 100px;
    padding-bottom: 0;
    position: relative;
    top: -62px;
    left: 300px;
}

#cities-de ul li#special span.price { top: -76px; }

p.price {
    margin: 0;
    position: relative;
    top: -127px;
    text-align: center;
}

#feature-list li {
    margin-bottom: 10px;
    padding-left: 35px;
}

li#karte { background: url(../img/uibutton-search.png) top left no-repeat;}
li#offline { background: url(../img/uibutton-routing.png) top left no-repeat;}
li#gps { background: url(../img/uibutton-position.png) top left no-repeat;}

#aside {
    background: url(../img/iphone.png) top left no-repeat;
    display: inline;
    float: left;
    margin-left: 80px;
    height: 540px;
    width: 240px;
}

#appstore {
    display: block;
    margin: 80px 0 0;
}

#storelink { margin-bottom: -30px; }

#storelink a {
    display: inline-block;
    margin: -25px 0 0 -30px;
}

#storelink span.price {
    display: block;
    font-size: 1.25em;
    margin-left: 0;
    max-width: 100px;
    padding-bottom: 0;
    position: relative;
    top: -72px;
    left: 200px;
}

#berlin #storelink span.price { top: -86px; }

#iphone-content {
    margin-top: 62px;
    margin-left: 39px;
}

#footer { clear: both; }

#footer ul {
    list-style: none;
    padding-left: 0;
}

#umaps {
    position: absolute;
    top: 20px;
    left: 10px;
}

#languages {
    position: absolute;
    top: 310px;
    left: 10px;
    line-height: 1;
    margin-bottom: 0;
}

#languages img { vertical-align: top; }

#twitter {
    position: absolute;
    top: 370px;
    left: 10px;
}

#facebook {
    position: absolute;
    top: 430px;
    left: 10px;
}

.indicate-required { text-align: right; }

.indicate-required,
.mc-field-group,
.response { margin-bottom: 10px; }

#mce-success-response,
#mce-error-response {
    background: #fff;
    border: 1px solid #bfbfbf;
    padding: 5px;
}

#mce-success-response { color: #090; }
#mce-error-response { color: #900; }

#mce-EMAIL {
    border: 2px solid #404040;
    margin-left: 10px;
    padding: 2px;
}

.input-group { margin: 5px 0; }

.input-group ul {
    display: inline;
    float: left;
    list-style: none;
    margin-right: 10px;
    padding-left: 0;
    width: 135px;
}

.input-group ul li input { margin: 3px 10px 3px 0; }