/*
==============================================================
  basic layout and general formatting rules for GEOlino.de
  
  author: Jan-Eric Strohsal <strohsal.jan-eric@geo.de>
  last modified: 2005/07/06
==============================================================
*/

/* global whitespace reset */
* { margin: 0; padding: 0; }

body { 
  font: 90% Verdana,Arial,sans-serif;
  margin: 8px 0 0 8px;
  margin-top: 0px;
}

a {
  text-decoration: none;
  color: #f59008;
}
a:hover { text-decoration: underline; }

/* Rahmen fuer Grafiklinks unterdruecken */
a img { border: none; }

acronym, abbr {
  border-bottom: none;
}

*.b { font-weight: bold; }
*.i { font-style: italic; }
*.ok { color: #090; }
*.error { color: #c00; }

/* set color for hyperlinks within right col */
#right a { color: #000; }

ul, li {
  list-style: none;
}
ul.disc li {
  list-style: disc;
  margin-left: 25px;
}
/* invisible element */
.invisible {
  display: none;
  position: absolute;
  left: -1000px;
  top: -1000px;
}
/* clear floatings */
.clearFloat {
  height: 1px;
  line-height: 1px;
  clear: both; 
}
/* non-semantic italic and bold style */
.i { font-style: italic; }
.b { font-weight: bold; }

/* arial font faces */
h1, h2, .subhead { font-family: Arial, Helvetica, sans-serif; }

.issueInfo {
  color: #6d6d6d;
  font-weight: normal;
}

.tocBoxRight a, .tocBoxLeft a, #pager a {
  color: #000;
}
a.startButton {
  color: #333;
  display: block;
  text-align: center;
  float:right;
  border: 3px solid #f59008;
  padding: 3px 0;
  width: 505px;
  font-weight: bold;
}
a.startButton:hover {
  text-decoration:none;
  background: #f7aa43;
  color: #fff;
}

/* ============= MAIN LAYOUT ============= */

/* ---- top bar ---- */
#magNav {
 background: #ededed;
 border-bottom: 1px solid #999; 
 margin: 0 0 0px -8px;
 height: 21px;
}
#magNav ul {
  text-align: center;
  width: 875px;    
}
#magNav ul li {
  float: left;
  height: 23px;
  margin: 0 10px;   
}
#magNav ul li a {  
  font-size: 0.72em;
}

/* ---- header ---- */
#mainHeader { 
  background: #9c3; 
  width: 823px;
  height: 92px;
  font-size: 0.76em;
  /*overflow: hidden;*/
  margin-top: 8px;
}
#mainHeader #logo {
  float: left;
  width: 182px;
  margin: -8px 0 7px 10px;
}
#mainHeader .content {
  float: right;
  color: #fff;
  font-weight: bold; 
  margin-top: -5px; 
  padding-right: 10px;
}
#shortNav {
  margin-left: 188px;
}
#mainHeader #shortNav ul li {
  float: left;  
  margin-bottom: 2px;
}
#mainHeader #shortNav a {
  display: block;
  border-right: 1px solid #fff;
  line-height: 1.1em;
  padding: 0 7px;  
  color: #fff;
}
#mainHeader #shortNav a.login, #mainHeader #shortNav a.last {
  border-right: none;
  margin-right: -5px;
}
#breadcrumb { 
  background: #fff; 
  margin-top: 3px;
  font-size: 10px;
}
#breadcrumb a {
  color: #000;
}
#mainContent #breadcrumb  h1{
  display: inline;
  font-size: 10px;
  height: 12px;
  color: #000;
  padding-top: 1px;
  font-weight: normal;
  font-family: Verdana;
}
.catMarker {
  float: left;
  width: 10px;
  height: 10px;
  background: url(http://www.geo.de/images/GEOlino/start/catMarker.png) no-repeat;
  margin-right: 5px;
  margin-top: 1px;
}

/* search form */
#searchForm {
  padding: 10px 0 0 7px;
}
#searchField {
  width: 367px;
  height: 16px;
  font-size: 12px;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  border: 1px solid #fff;
  padding-left: 5px;
  margin-left: 7px;
  margin-right: 3px;
}
#searchButton, #searchButtonIE {
  vertical-align: top;
}
.formButton {
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #f1f1f1;
  text-align: center;
  padding: 1px;
  color: #333;
  cursor: pointer;
}
.survey-submit, .formButton, .ecard-submit {
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  background: #f5f5f5;
  background: #f9f9f9;
  text-align: center;
  padding: 2px;
  color: #333;
  cursor: pointer;
}
.survey-submit:hover, .formButton:hover, .ecard-submit:hover {
  border-left: 1px solid #333;
  border-top: 1px solid #333;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  text-decoration: none;
}
/* ------------- round corners ------------- */
#mainHeader .rbtop div { background: url(http://www.geo.de/images/GEOlino/tl.gif) no-repeat top left; }
#mainHeader .rbtop     { background: url(http://www.geo.de/images/GEOlino/tr.gif) no-repeat top right; }
.rbtop div, .rbtop, .rbbot div, .rbbot { 
  height: 17px; font-size: 1px;  clear: both;
}
#mainHeader .rbbot div { width: 10px; }

/* ==== layout container ==== */
#mainContent {
  width: 823px;
  margin-bottom: 5px;
}
#mainContent #left {
  float: left;
  width: 637px;
  background: #fff;
  margin-left: -8px;
  overflow: hidden;
}
#mainContent #right {
  background: #6ca101;
  background: #9c3;
  width: 180px;
  float: right;
  margin-top: 15px;
}
#footer {
  width: 823px;
  margin-top: 14px;  
  margin-bottom: 8px;
  background: #9c3;
  text-align: center;
}
#footer .rbbot div { background: url(http://www.geo.de/images/GEOlino/bl.gif) no-repeat bottom left; }
#footer .rbbot     { background: url(http://www.geo.de/images/GEOlino/br.gif) no-repeat bottom right; }
#footer .links {
  padding-top: 4px;  
  margin-bottom: -10px;
}
#footer a {
  margin-right: 40px;
  color: #fff;
  font-size: 0.76em;
  font-weight: bold;
}
/* ==== navigation ==== */
#mainNav { 
  position: relative;
  font-size: 11px; 
  margin: 0 6px;
  padding-bottom: 7px;
  clear: both;
  z-index: 50;
  width: 950px;
}
#mainNav a {
  text-decoration: none;
}
#mainNav li {
  float: left;
  position: relative;
}
#mainNav li a {
  display: block;
  float: left;
  text-align: center;
  padding: 4px 4px;
  padding-top:3px;
  height: 15px;
  color: #fff;
  font-weight: bold;
  margin-left: 4px;
}

#mainNav ul { 
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 19px;
  padding-top: 4px;
  z-index: 300;
}
#mainNav li ul li.first {
  border-top: 3px solid #9c3;
}
#mainNav ul li a {
  padding: 3px;
  text-align: left;
}

#topNav1 a { background: #f59008; width: 36px; }
#topNav2 a { background: #999900; width: 72px; }
#topNav3 a { background: #c35c13; width: 72px; }
#topNav4 a { background: #069; width: 72px; }
#topNav5 a { background: #fbc100; width: 72px; }
#topNav6 a { background: #993333; width: 76px; }
#topNav7 a { background: #003258; width: 92px; }
#topNav8 a { background: #f59008; width: 80px; }
#topNav9 a { background: #f59008; width: 56px; }
#topNav10 a { background: #f59008; width: 60px; }

#topNav1 a:hover, #topNav8 a:hover, #topNav9 a:hover, #topNav10 a:hover { background: #f7aa43; }
#topNav2 a:hover { background: #cccc00; }
#topNav3 a:hover { background: #f60; }
#topNav4 a:hover { background: #39c; }
#topNav5 a:hover { background: #fcd749; }
#topNav6 a:hover { background: #c63e3e; }
#topNav7 a:hover { background: #014d87; }

body#start     #topNav1 a.top { background: #fff; color: #f59008; }
body#natur       #topNav2 a.top { background: #fff; color: #999900; }
body#mensch      #topNav3 a.top { background: #fff; color: #c35c13; }
body#technik     #topNav4 a.top { background: #fff; color: #069; }
body#kreativ     #topNav5 a.top { background: #fff; color: #fbc100; }
body#tests_spiele      #topNav6 a.top { background: #fff; color: #993333; }
body#nachrichten #topNav7 a.top { background: #fff; color: #003258; }
body#community   #topNav8 a.top { background: #fff; color: #f59008; }
body#service     #topNav9 a.top { background: #fff; color: #f59008; }
body#bestellen   #topNav10 a.top { background: #fff; color: #f59008; }

#mainNav #topNav1 ul a  { width: 77px; }
#mainNav #topNav2 ul a, #mainNav #topNav4 ul a { width: 77px; }
#mainNav #topNav3 ul a  { width: 107px; }
#mainNav #topNav5 ul a  { width: 150px; }
#mainNav #topNav6 ul a  { width: 98px; }
#mainNav #topNav8 ul a  { width: 131px; }
#mainNav #topNav7 ul a  { width: 102px; }
#mainNav #topNav9 ul a { width: 122px; }
#mainNav #topNav10 ul a {
  width: 64px; 
}
#mainNav li ul li {
  clear: both;
  position: relative;
}
#mainNav ul a.secondLevel { clear: both; padding-left: 10px; width: 115px !important}
#mainNav li:hover>ul {
  visibility: visible;
  /*display: block;*/
}

/* ---- rounded menu corners ---- */
/* global */

li.bottom div.left, li.bottom div.middle, li.bottom div.right {
  float: left; 
  position: relative;
  width: 10px;
  height: 10px;
}
li.bottom div.left {  
  /*border: 1px solid blue;*/
}
li.bottom div.middle {
  font-size:1px;
  float: left;
}
/* default (orange) */
#topNav1 li.bottom div.left, #topNav6 li.bottom div.left, #topNav7 li.bottom div.left, #topNav8 li.bottom div.left, #topNav9 li.bottom div.left, #topNav10 li.bottom div.left { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/start/bl_menu.gif) no-repeat bottom left;}
#topNav1 li.bottom div.middle, #topNav6 li.bottom div.middle, #topNav7 li.bottom div.middle, #topNav8 li.bottom div.middle, #topNav9 li.bottom div.middle, #topNav10 li.bottom div.middle  { background: #f59008;}
#topNav1 li.bottom div.right, #topNav6 li.bottom div.right, #topNav7 li.bottom div.right, #topNav8 li.bottom div.right, #topNav9 li.bottom div.right, #topNav10 li.bottom div.right   { background: url(http://www.geo.de/images/GEOlino/start/br_menu.gif) no-repeat bottom right;}
#topNav1 li.bottom div.middle { width: 63px; }

/* natur */
#topNav2 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/natur/bl_menu.gif) no-repeat bottom left;}
#topNav2 li.bottom div.middle { width: 63px; background: #999900;}
#topNav2 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/natur/br_menu.gif) no-repeat bottom right;}
/* mensch */
#topNav3 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/mensch/bl_menu.gif) no-repeat bottom left;}
#topNav3 li.bottom div.middle { width: 93px; background: #c35c13;}
#topNav3 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/mensch/br_menu.gif) no-repeat bottom right;}
/* technik */
#topNav4 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/technik/bl_menu.gif) no-repeat bottom left;}
#topNav4 li.bottom div.middle { width: 63px; background: #069;}
#topNav4 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/technik/br_menu.gif) no-repeat bottom right;}
/* kreativ */
#topNav5 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/kreativ/bl_menu.gif) no-repeat bottom left;}
#topNav5 li.bottom div.middle { width: 136px; background: #fbc100;}
#topNav5 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/kreativ/br_menu.gif) no-repeat bottom right;}
/* spiele */
#topNav6 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/tests_spiele/bl_menu.gif) no-repeat bottom left;}
#topNav6 li.bottom div.middle { width: 84px; background: #993333;}
#topNav6 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/tests_spiele/br_menu.gif) no-repeat bottom right;}

/* nachrichten */
#topNav7 li.bottom div.left   { margin-left: 4px; background: url(http://www.geo.de/images/GEOlino/nachrichten/bl_menu.gif) no-repeat bottom left;}
#topNav7 li.bottom div.middle { width: 88px; background: #003258;}
#topNav7 li.bottom div.right  { background: url(http://www.geo.de/images/GEOlino/nachrichten/br_menu.gif) no-repeat bottom right;}

/* community */
#topNav8 li.bottom div.middle { width: 117px; }
/* service */
#topNav9 li.bottom div.middle { width: 108px; }
/* bestellen */
#topNav10 li.bottom div.middle { width: 50px; }


/* ==== right col elements ==== */
#right .teaserBox { 
  overflow: hidden;
  border-top: none;
  background: #fff;
  font-size: 0.86em;
  margin-bottom: 15px;
  width: 180px;
}
#right .teaserBox .content { 
  width: 174px; 
}
#right .teaserBox ul { 
  margin-bottom: 12px; 
}
#right .teaserBox .imgContent { 
  text-align: center;
}
#right .teaserBox .imgContent img { 
  margin: 5px 0;
}
#right .teaserBox .textBlock { 
  padding: 7px 0;
}
#right .teaserBox h3 { 
  color: #fff;
  padding: 3px;
  font-size: 1em;
}
#right .teaserBox .item { 
  padding: 7px 4px 7px 7px;
  font-size:11px;
}
#right ul {
  margin: 10px 0;
}
#right li {
  text-indent: -12px;
  margin: 1px 4px 0 20px;
}
#right .teaserBox .issue { 
  float: left;
  width: 82px;
  text-align: center;
  font-weight: bold;
  color: #666;
  font-size: 0.86em;
  margin: 10px 0;
  margin-left: 4px;
}
#right img { 
  margin-bottom: 15px;
}
#right .teaserBox .issue img { 
  margin: 5px 0;
}
#right .userImage {
  border-bottom: 3px solid #f59008;
}
/* vote box */
#right .teaserBox .voteContent {
  padding: 10px;
  font-size: 90%;
}
#right .teaserBox .voteContent p {
  padding-bottom: 10px;
}
#right .teaserBox .voteContent li {
  line-height: 130%;
  color: #000;
  text-indent: -11px;
  margin: 2px 3px 0 12px;
}
#right .teaserBox .voteContent ul { 
 padding: 0;
 margin-bottom: 0; 
}
.voteBar { 
  padding:3px 1px 3px 1px; overflow: visible; color:#333; font-size:10px; background:#f59008; border: 1px solid #666;
}


.catMarker { background: url(http://www.geo.de/images/GEOlino/start/catMarker.png) no-repeat; }
#right .teaserBox .content { border: 3px solid #f59008; border-top: none;}
#right .teaserBox h3 { background: #f59008; }
#right .teaserBox .leftCorner  { background: url(http://www.geo.de/images/GEOlino/start/bl_right.gif) no-repeat bottom left; }
#right .teaserBox .rightCorner { background: url(http://www.geo.de/images/GEOlino/start/br_right.gif) no-repeat bottom right; }

/* rounded corners */
.leftCorner, .rightCorner {
  position: relative;
  width: 18px; height: 18px;
  padding: 0px; border: 0px;
  margin-top: -18px;
  z-index: 1;
}
.topLeftCorner, .topRightCorner {
  position: relative;
  width: 18px; height: 18px;
  padding: 0px; border: 0px;
  margin-bottom: -18px;
  z-index: 1;
}
.leftCorner, .topLeftCorner { 
  float: left;
  clear: both;
}
.rightCorner, .topRightCorner {
  float: right;
  clear: right;
}
.cornerSpacer {
  margin: 0px; 
  padding: 0px;
  border: 0px;
  clear: both;
  font-size: 1px;
  line-height: 1px;
}

h1.ecards {
  font-size: 140%;
  margin-bottom: 20px;
  font-weight: bold;
  color: #9c3;
  font-family: Verdana;
}

/* ==== pager ===== */
#pager {
  text-align: center;
  font-size: 0.76em;
  margin-bottom: 20px;
}
#pager .pageIndex {
  margin-top: 25px;  
  padding-bottom: 5px;
}
.pagingBar {
  padding: 3px 0 3px 0;
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
  text-align: center;
  height: 13px;
}
#toc .pagingBar { margin-top: 15px; font-size: 0.76em; border-bottom: 1px solid #690; border-top: 1px solid #690; }

.pages {
  float: left;
  width: 35.9%;
}
#pager .back {
  float: left;
  width: 32%;
  text-align: left;
}
#pager .next {
  float: left;
  width: 32%;
  text-align: right;
}
/* ==== ad section ==== */
#rubrikenAd, #contentAd, #textAd, #bufferRubrikenAd, #bufferContentAd, #bufferPromoAd {
  display: none;
}
#rubrikenAd, .superbanner {
  width: 823px;
  height: 90px;
  font-size: 1px;
  text-align: center;
  margin: 8px 0 8px 0;
}
#contentAd {
  clear:both;
  text-align: center;
  margin: 0 24px 0 22px;
  padding: 0;
  display: block;  
}
#article #contentAd {
  margin: 0 24px 5px 0;
}
#contentAd hr {
  margin: 10px 0 0 0;
  width: 596px;
}
#contentAd hr.top {
  margin-top: 0;
  width: 596px;
}

#left>#contentAd {
  margin-top: 17px;
}
#article #contentAd hr {
  width: 517px;
}
#promoAd {
  text-align: center;
  margin-bottom: 15px;
  width: 180px;
  display: none;
}
#promoAd img {
  margin-top: 0;
}
#promoAdContainer {
  background: #fff;
  border: 1px solid #999; 
  text-align:center;
  padding-bottom: 11px;
}
#promoAdContainer180 { 
  text-align:center;
  margin-top: -5px;
}
#promoAdContainer .header {
  border-bottom: 1px solid #999; 
  text-align:left; 
  padding: 2px; 
  margin-bottom: 10px; 
  font-size: 76%; 
  color: #333;
  background: #fff;
  /*font-weight: bold;*/
}
#promoAdContainer180 .header {  
  text-align:left; 
  padding: 2px; 
  font-size: 76%; 
  color: #333;
}
#textAd {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #a8cd41;
  width: 168px;
  font-size: 76%;
  background: #ededed;
}
#floater, .skyscraper {
  position: absolute;
  left: 838px;
  top: 32px;
  width: 160px;
  height: 600px;
  z-index: 1;
}
.addHeadline{font-size:76%;border-left:1px solid #999;font-weight:700;text-align:left;line-height:130%;margin:0 0 5px;padding:0 5px}


div.socialMediaContainer {padding: 0 0 35px 0; float: right; margin-right: -8px; margin-top: -5px}
div.socialMediaContainer ul li,
div.socialMediaContainer ul{list-style:none;}
div.socialMediaContainer ul li{ display:inline; padding-right: 8px}
/* Image Popup */
#nextNavBox + #socialMediaWrapper > .socialMediaContainer {margin-top: 10px}

/*Related Video Bar*/
#videoSelectionBar{
  margin-top: 10px;
  width: 524px;
  overflow: show;
  background-color: #ccc;
}

#videoSelectionBar div{
  width:120px;
  float:left; 
  margin-right:11px;
}

#videoSelectionBar .pic{
}

#videoSelectionBar p{
  text-align:left;
  color:#000; 
  line-height:14px; 
}

#videoSelectionBar img{
  border-width:3px;
  border-style:solid;
  border-color:#ddd;
  float:left;
  margin-bottom:5px;
}

#videoSelectionBar p a{
  font-size:80%;
  background-color:#fff;
  color:#000;
}

.activeVideo{
  border-color:#eee !important;
  background-repeat:no-repeat;

}