/****************************************************************************

gala city guides - main stylesheet 
v.1 - January 2009 - domenica lucifora - kontakt@deeluxe.de


TABLE OF CONTENTS
-----------------

  - reset styles
  - base
  - grid
  - navigation
  - elements
    - headlines
    - left side
      - keyvisual
      - intro
      - vcard
    - main
      - elements
      - form
    - sub
      - additional info on the right
  - fontsizes
  - helpers
  
  
COLOR DEFINITION
----------------

  background:     #000
  color:  #fff or #000
  red:    #d3031d
  darkgrey 1      #191919
  darkgrey 2 (subnav background)  #0f0f0f
  links   #fff

*****************************************************************************/

/* --- RESET - ERIC MEYER --- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
a { outline: none; text-decoration: none; }
legend, caption { display: none; }


/* --- BASE --- */

body {
  background: #000 url(/images/5.png) repeat-x left top;
  color: #fff;
  font-family: sans-serif;
  line-height: 1.2em;
  text-align: center;
}
em {
  font-style: italic;
}
strong {
  font-weight: 700;
}


/* --- GRID --- */

div.grid-wrap {
  margin: 0 auto;
  position: relative;
  text-align: left;
  width: 985px;
}
div.grid-head {
  text-align: right;
}
div.grid-wrap-content {
  background: #000;
  width: 985px;
}
/* the container, that covers the scrolled content - comment the overflow for bugfixing */
.grid-content-container {
  float: left;
  height: 461px;
  overflow: hidden;
  position: relative;
  width: 985px;
}
#front .grid-content-container {
  height: 580px;
}
div.grid-keyvisual {
  background: url(/images/7.gif) no-repeat left top;
  float: left;
  height: 443px;
  margin: 20px 10px 0 10px;
  width: 257px;
}
/* without the keyvisual */
#front div.grid-content-intro {
  float: left;
  height: 560px;
  margin: 20px 10px 0 10px;
  /* no scrollbar needed - if you need one, set this to auto */
  overflow: hidden;
  width: 257px;
}
div.grid-content-intro {
  float: left;
  height: 360px;
  margin: 100px 10px 0 10px;
  overflow: auto;
  width: 257px;
}
div.grid-content {
  float: left;
  margin-right: 10px;
}
div.grid-navigation-sub {
  background: #0f0f0f;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  width: 964px;
  display:inline;
}
div.grid-footer {
  text-align: right;
}


/* --- NAVIGATION --- */
/* - main - */

ul.navigation-main {
  float: right;
  list-style: none;
  margin: 25px 40px 10px 0;
}
.navigation-main li {
  display: block;
  float: left;
  margin-left: 4px;
  position: relative;
}
.navigation-main li.europe {
  margin-right: 12px;
}
.navigation-main li span {
  position: absolute;
  z-index: 2;
}
.navigation-main li.home span {
  left:0px;
}
.navigation-main li.germany span {
  background: url(/images/2.png) no-repeat left top;
  height: 39px;
  left: -5px;
  top: -7px;
  width: 37px;
}
.navigation-main li.europe span {
  background: url(/images/3.png) no-repeat left top;
  height: 48px;
  right: -20px;
  top: -1px;
  width: 57px;
}
.navigation-main li.worldwide span {
  background: url(/images/4.png) no-repeat left top;
  height: 41px;
  margin-left: 22px;
  right: -50px;
  top: -3px;
  width: 88px;
}
.navigation-main li a {
  background: #d3031d;
  color: #fff;
  display: block;
  padding: 6px 40px 4px;
}
.navigation-main li a:hover {
  background: #000;
}


/* navigation - sub */

ul.navigation-sub {
  width:915px;
  list-style: none;
  margin: 4px 4px 4px 0px;
}
.navigation-sub li {
  display: inline;
  margin-right: 10px;
}
.navigation-sub li a img {
  -moz-opacity:.60;
  opacity:.60;
}
.navigation-sub li a:hover img {
  -moz-opacity:1;
  opacity:1;
}


/* navigation- footer */

ul.navigation-footer {
  list-style: none;
  margin-bottom: 5px;
}
.navigation-footer li {
  display: inline;
  margin-right: 10px;
}
.navigation-footer li a {
  color: #fff;
  text-decoration: underline;
}
.navigation-footer li a:hover {
  text-decoration: none;
}


/* --- ELEMENTS --- */

h1 { /* this is the logo */
  background: url(/images/1t.gif) no-repeat left top;
  display: block;
  width:81px;
  height:60px;
  position: absolute;
  text-indent: -8000px;
  left:10px;
  top:84px;
  z-index: 5;
}
#front h1 { /* this is the logo */
  background: url(/images/1.gif) no-repeat left top;
  width:130px;
  height:96px;
  left:0px;
  top:64px;
}
h1 a {
  display:block;
  width:81px;
  height:60px;
}

#front h1 a {
  width:130px;
  height:96px;
}
  
h2 { /* title headline */
  background: url(/images/6.gif) no-repeat left top;
  border-bottom: 1px solid #fff;
  font-family: Arial, Helvetica, sans-serif;
  margin: 20px 0 12px 7px;
  padding: 25px 0 20px;
  width: 690px;
}
h2 a {
  color: #fff;
}
h2 a span {
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  margin-left: -8px;
  text-transform: uppercase;
} 


/* body elements - keyvisual (if no main image) */

.content-intro {
  background-color: #fff;
  color: #000;
  height: 425px;
}
#front .grid-content-intro h3 {
  margin-top: 105px;
}
.grid-content-intro h3 {
  margin-top: 20px;
}
.grid-content-intro h4 {
  margin-bottom: 5px;
}
.grid-content-intro p {
  padding: 10px 15px;
}
.grid-content-intro div.disclaim p {
  line-height: 150%;
  margin: 0;
  padding: 0 3px 5px 0;
}
ul.list-content li ul.list-content-intro {
  list-style-type: disc;
  margin: 10px 40px;
}
.list-content li .list-content-intro li {
  clear: both;
  width: 200px;
  }
.grid-content-intro a.link-newsfeed {
  background: url(../images/layout/ic_newsfeed.png) no-repeat left 5px;
  color: #d3031d;
  display: block;
  margin: 0 10px 5px;
  padding: 4px 0 4px 25px;
  text-decoration: underline;
}


/* vcard - microformats */

.vcard span {
  line-height: 140%;
  margin: 0;
}
.vcard span.street-address {
  display: block;
}
.vcard span.fn {
  font-weight: 700;
}
.vcard span.country-name {
  display: block;
}
.vcard span.tel {
  display: block;
}
.vcard span.email {
  display: block;
}
.vcard a {
  color: #d3031d;
  text-decoration: underline;
}
.vcard a:hover {
  text-decoration: none;
}


/* body elements - main */

.content-main {
  float: left;
  height: 360px;
  margin-left: 7px;
  overflow: auto;
  width: 480px;
}
#front .content-main {
  overflow: auto;
}
/* this is the key to a wide scrolled content - enlarge if needed - around 1000 px for each list item */
ul.list-content {
  list-style: none;
  width: 20000px;
}
 .list-content li {
  display: block;
  float: left;
  width: 985px;
}
li#contact .content-main {
  width: 690px;
}
#front li#contact .content-main {
  height: 480px;
  width: 690px;
}

/* this is the color definition for the text background of each title */
li .content-main {
  background: #0f224c;
}

li#contact .content-main {
  background: #0f0f0f;
}
li#start .content-main {
  background: #191919;
  height: 481px;
}
.content-main p {
  margin: 0 20px 10px 40px;
  padding-top: 10px;
}
.content-main a {
  color: #fff;
  text-decoration: underline;
}
.content-main a:hover {
  text-decoration: none;
}
#front .content-main h3 {
  margin: 20px 10px 0;
}
#front .content-main p.date {
  margin: 0 10px 0;
  padding-top: 0;
}
#front .content-main p {
/*  margin: 0 10px;
  padding: 0 0 15px 0;*/
}
#front a.link-download {
  background: url(../images/layout/ic_pdf.png) no-repeat left top;
  color: #d3031d;
  display: block;
  margin: 0 10px;
  padding: 4px 0 4px 25px;
}


/* form */

form {
  margin: 20px 10px 0 40px;
}
label {
  float: left;
  width: 200px;
}
input.text, textarea {
  background: #191919;
  border: 1px solid #000;
  margin-bottom: 6px;
  width: 350px;
}
  input:focus, textarea:focus {
background: #fff;
border: 1px solid #666;
  }
input.submit {
  background: #000;
  border: 1px solid #191919;
  color: #fff;
  margin: 0 0 0 200px;
  padding: 4px 10px;
}
form span {
  color: #d3031d;
}
form p.advice {
  display: block;
  line-height: 140%;
  margin: 5px 10px 40px 200px !important;
  padding: 0 0 15px 0;
}


/* body elements - sub */

.content-sub {
  float: left;
  margin-left: 10px;
  width: 200px;
}
#front .content-sub {
  background: #fff;
  color: #000;
  height: 481px;
}
#front .content-sub img {
  float: right;
/*  border-bottom: 10px solid #000;*/
  margin: 2px 10px 3px 6px;
}
#front .content-sub h3 {
  color: #d3031d;
  margin: 0 10px 0 10px;
}
#front .content-sub h4 {
  margin: 5px 10px;
}
#front .content-sub h4 span {
  margin-left: -2px;
  text-transform: uppercase;
}
#front .content-sub p {
  line-height: 140%;
  margin: 5px 10px;
}
#front .content-sub a {
  color: #d3031d;
/*  float: right;*/
/*  margin: 5px 10px;*/
  text-decoration: underline;
}
#front .content-sub a:hover {
  text-decoration: none;
}
.content-sub-title {
  background: #191919;
  height: 110px;
  margin-bottom: 10px;
  padding: 30px 10px 0;
}
dt {
  margin-bottom: 10px;
}
dd.title {
  margin-bottom: 0;
}
dd.subtitle {
  line-height: 120%;
  margin-bottom: 20px;
}
.content-sub-info {
  background: #fff;
  color: #000;
  height: 85px;
  margin-bottom: 10px;
  padding: 15px 10px 0;
}
ul.list-details li {
  line-height: 120%;
  list-style: none;
  width: 200px;
}
.content-sub-info ul.list-details li.isbn {
  margin-top: 20px;
}
.content-sub-price {
  background: #d3031d;
  height: 92px;
  padding: 9px 10px 0;
}


/* Titelscroll */

.title_scroll_mask
  {
  position:relative;
  width:880px;
  margin-left:10px;
  height:104px;
  overflow:hidden;
  }

#title_scroll_box1
  {
  position:absolute;
  }

.title_scroll_buttons
  {
  width:11px;
  height:104px;
  margin:4px 0px 0px 0px;
  }

.title_scroll_buttons img
  {
  cursor:pointer;
  }


/* --- social bookmarks --- */

.social_bookmarks
  {
  font-size:0.75em;
  margin:10px;
  text-align:center;
  }


/* --- FONTSIZES --- */

body  { font-size: 100%; } /* 16px */

h2{ font-size: 2.75em; } /* 44 px */

#front .content-main h3  { font-size: 1.375em; } /* 18 px */

.content-sub-price,
legend, form  { font-size: 1.125em; } /* 18px */

dd.title{ font-size: 1em; } /* 16px */


dt,
form p,
input.submit,
#front .content-sub h3,
.grid-content-intro h3   { font-size: .875em; } /* 14px */

dd.edition,
.content-sub-info ul  { font-size: .75em; } /* 12px */

span a,
.navigation-main,
.content-main,
.navigation-footer,
#front .content-sub h4,
#front .content-sub p,
.grid-content-intro h4,
.grid-content-intro p,
.grid-content-intro ul,
.vcard span.fn,
.vcard span.adr,
.vcard span.tel  { font-size: .6875em; } /* 11px */

.content-main p  { font-size: 1.2em; }

dd.subtitle { font-size: .625em; } /* 10px */


/* --- HELPER --- */

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