body, html {
  font-size: 12px;
}

#indexBody {
  background-color: #000;
  color: #eee;
  text-align: center;
}

#insideBody{
  background-image: url('/img/site/bg.jpg');
  color: #ec8;
  text-align: center;
}

#inside {
  width: 850px;
  position: relative;
  margin: 8px auto;
  text-align: left;
  font-size: 12px;
  color: #362f26;
}

ul { margin: 0; padding: 0; list-style-type: none; }
li { margin: 0; padding: 0; }

table, tr, th, td { }

.t25 { opacity:.25; -moz-opacity: 0.25; filter: alpha(opacity=25); }
.t50 { opacity:.50; -moz-opacity: 0.50; filter: alpha(opacity=50); }
.t75 { opacity:.75; -moz-opacity: 0.75; filter: alpha(opacity=75); }

.inline { display: inline; }
.block { display: block; }

/* Links */
a { color: #C4AE97; text-decoration: none; }
a:active { color: #fff; text-decoration: none; }
a:hover { color: #fff; text-decoration: none;}

a.teaser { color: #362f26; text-decoration: none; }
a.teaser:active { color: #362f26; text-decoration: none; }
a.teaser:hover { color: #362f26; text-decoration: none; }

h1 { font-size: 16px; }

h2 { padding: 8px; color: #ca9; font-size: 16px; }
h3 { color: #76624E; font-size: 16px; font-weight: bold; }
h4 { padding-left: 6px; line-height: 25px; color: #ca9; font-size: 13px; }

.green { color: #363; }
.red { color: #c00; }
.poison {color: #0f0; }
.matrix { color: #3f6; }
.yellow { color: #d90; }
.grey { color: #999; }
.sand { color: #ca9; }
.black { color: #362f26; }
.white { color: #fff; }

.bgSand { background-color: #B7A28C; }
.bgFoot { background-color: #74624c; }
.bgBox { background-image: url('/img/site/bg_box.jpg'); }
.bgBoxGrey { background-image: url('/img/site/bg_box_grey.jpg'); }
.bgHead { background: url('/img/inside/head.jpg') no-repeat; }
.bgBlack { background-color: #000; }
.bgWhite { background-color: #fff; }
.bgBlack25 { background-color: rgba(54, 47, 38, 0.25); }

.overlay { position: absolute; top: 40px; left: 0px; background: transparent url('/img/bgTransparent/white25.png') repeat scroll 0% 0%; width: 660px; height: 475px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; z-index: 10;}

#navTop li { float: left; padding-right: 10px; }

#navHead a.aTown      { background: url('/img/inside/bg_nav_town.png'); }
#navHead a.aMap       { background: url('/img/inside/bg_nav_map.png'); }
#navHead a.aMessages  { background: url('/img/inside/bg_nav_messages.png'); }
#navHead a.aUnits     { background: url('/img/inside/bg_nav_units.png'); }
#navHead a.aGroup     { background: url('/img/inside/bg_nav_group.png'); }
#navHead a.aExtras    { background: url('/img/inside/bg_nav_extras.png'); }

#navHead a { display: block; width: 89px; height: 84px; float: left; margin: 0 8px 4px 0; }
#navHead a:hover { background-position: bottom; }
#navHead p { text-align: center; padding-top: 55px; }

#left { float: left; width: 235px; padding-left: 5px; color: #ca9; }
#left h3 { height: 16px; width: 219px; padding: 8px; color: #ca9; font-size: 14px; font-weight: bold; background: url('/img/site/bg_title_left.png'); }
#left p.big { font-size: 16px; font-weight: bold; color: #fff; }

#left ul { line-height: 30px; font-size: 14px; }
#left li a { display: block; background: url('/img/nav/bg_li.png'); font-size: small; color: #ca9; }
#left li a:active { background: url('/img/nav/bg_li_hover.png'); color: #fff; }
#left li a:hover { background: url('/img/nav/bg_li_hover.png'); color: #fff; }
#left ul.navExtras li.navPayment a { background-image: url('/img/nav/bg_li_payment.png'); font-weight: bold; color: #fff; }

#left ul li p { padding-left: 30px; width: 193px; background: url('/img/nav/bullet_unit.png') no-repeat; } /* default */

#left ul.navGroup li p { background-image: url('/img/nav/bullet_group.png'); }
#left ul.navProfile li p { background-image: url('/img/nav/bullet_profile.png'); }
#left ul.navRanking li p { background-image: url('/img/nav/bullet_ranking.png'); }
#left ul.navUnit li p { background-image: url('/img/nav/bullet_unit.png'); }
#left ul.navResearch li p { background-image: url('/img/nav/bullet_research.png'); }
#left ul.navResearch li.done p { background-image: url('/img/nav/bullet_research_done.png'); }
#left ul.navExtras li p { background-image: url('/img/nav/bullet_ranking.png'); }
#left ul li.navNews p { background-image: url('/img/nav/bullet_news.png'); }
#left ul li.navMessage p { background-image: url('/img/nav/bullet_message.png'); }
#left ul li.navInbox p { background-image: url('/img/nav/bullet_inbox.png'); }
#left ul li.navOutbox p { background-image: url('/img/nav/bullet_outbox.png'); }
#left ul li.navArchive p { background-image: url('/img/nav/bullet_archive.png'); }
#left ul li.navEvents p { background-image: url('/img/nav/bullet_research.png'); }
#left ul li.navSpying p { background-image: url('/img/nav/bullet_spying.png'); }
#left ul li.navBattle p { background-image: url('/img/nav/bullet_battle.png'); }

#right { float: right; width: 660px; padding-right: 5px; }
#right h2 { border: 1px solid #a98; background: url('/img/site/bg_title_right.jpg') no-repeat right; }
#right h3 { line-height: 25px;
            background: url('/img/site/arrowLink.png') no-repeat right !important;
            /* IE-Pngfix setzt den png nach links */ background: url('/img/site/arrowLinkIE6.gif') no-repeat right; }
#right h4 { height: 23px; border: 1px solid #a98; background: url('/img/site/bg_subtitle_right.jpg') no-repeat right; }

#right .brown { color: #76624E; }

/* Iconlisten f�r Werte daneben und darunter */
p.arms  { background: url('/img/icons/i_arms.png') no-repeat; }
p.brick { background: url('/img/icons/i_brick.png') no-repeat; }
p.corn  { background: url('/img/icons/i_corn.png') no-repeat; }
p.money { background: url('/img/icons/i_money.png') no-repeat; }
p.time  { background: url('/img/icons/i_time.png') no-repeat; }
p.energy { background: url('/img/icons/i_energy.png') no-repeat; }
p.coin { background: url('/img/icons/i_coin.png') no-repeat; background-position: 10px 50%;}

ul.iconsRight { line-height: 30px; font-size: 13px; height: 30px; color: #fff; }
ul.iconsRight li { float: left; }
ul.iconsRight li p { padding-left: 30px; }

ul.iconsTop { font-size: 10px; color: #fff; text-align: center; height: 45px;
              /* IE6 macht zerhackt die H�he: */ overflow: hidden ;  }
ul.iconsTop li { position: relative; float: left; width: 30px; }
ul.iconsTop li p { background-position: top center; padding-top: 30px; } /* IE6 legt die Bilder nach dem fix nicht mittig! */
ul.iconsTop li span { position: absolute; top: 43px; left: 0px; width: 40px; }

ul.icons80 { color: #fff; text-align: center; font-weight: bold; }
ul.icons80 li { position: relative; margin: 3px; float: left; width: 80px; height: 86px; }
ul.icons80 li p { line-height: 14px; font-size: 10px; margin-top: 72px;  background: url('/img/bgTransparent/black50.png'); }

ul.icons80 li.archer  { background: url('/img/units/tn80_archer.png') no-repeat; }
ul.icons80 li.axeman  { background: url('/img/units/tn80_axeman.png') no-repeat; }
ul.icons80 li.cavalry { background: url('/img/units/tn80_cavalry.png') no-repeat; }
ul.icons80 li.pikeman { background: url('/img/units/tn80_pikeman.png') no-repeat; }
ul.icons80 li.templar { background: url('/img/units/tn80_templar.png') no-repeat; }

/* Listen f�r Werte im unteren bereich des Bildes, mit transparentem Texthintergrund */
ul.icons { height: 50px; color: #fff; text-align: center; font-weight: bold; }
ul.icons li { position: relative; margin: 5px; float: left; width: 50px; }
ul.icons li p { line-height: 12px; font-size: 10px; margin-top: 38px;  background: url('/img/bgTransparent/black50.png'); }
ul.icons li span { position: absolute; top: 50px; left: 0px; width: 50px; }
ul.icons li h1 { position: absolute; top: 17px; left: 55px; }

ul.icons li.health  { background: url('/img/icons/i_health.jpg') no-repeat; }
ul.icons li.wareMax { background: url('/img/icons/i_wareMax.jpg') no-repeat; }
ul.icons li.speed   { background: url('/img/icons/i_speed.jpg') no-repeat; }

ul.icons li.agent   { background: url('/img/units/i_agent.png') no-repeat; }
ul.icons li.archer  { background: url('/img/units/i_archer.png') no-repeat; }
ul.icons li.axeman  { background: url('/img/units/i_axeman.png') no-repeat; }
ul.icons li.cavalry { background: url('/img/units/i_cavalry.png') no-repeat; }
ul.icons li.guard   { background: url('/img/units/i_guard.png') no-repeat; }
ul.icons li.ox      { background: url('/img/units/i_ox.png') no-repeat; }
ul.icons li.pikeman { background: url('/img/units/i_pikeman.png') no-repeat; }
ul.icons li.settler { background: url('/img/units/i_settler.png') no-repeat; }
ul.icons li.spy     { background: url('/img/units/i_spy.png') no-repeat; }
ul.icons li.templar { background: url('/img/units/i_templar.png') no-repeat; }
ul.icons li.sentinel { background: url('/img/units/i_sentinel.png') no-repeat; }

ul.icons li.arms        { background: url('/img/buildings/i_arms.jpg') no-repeat; }
ul.icons li.armsdepot   { background: url('/img/buildings/i_armsdepot.jpg') no-repeat; }
ul.icons li.barracks    { background: url('/img/buildings/i_barracks.jpg') no-repeat; }
ul.icons li.brick       { background: url('/img/buildings/i_brick.jpg') no-repeat; }
ul.icons li.brickdepot  { background: url('/img/buildings/i_brickdepot.jpg') no-repeat; }
ul.icons li.church      { background: url('/img/buildings/i_church.jpg') no-repeat; }
ul.icons li.corn        { background: url('/img/buildings/i_corn.jpg') no-repeat; }
ul.icons li.corndepot   { background: url('/img/buildings/i_corndepot.jpg') no-repeat; }
ul.icons li.lab         { background: url('/img/buildings/i_lab.jpg') no-repeat; }
ul.icons li.main        { background: url('/img/buildings/i_main.jpg') no-repeat; }
ul.icons li.money       { background: url('/img/buildings/i_money.jpg') no-repeat; }
ul.icons li.moneydepot  { background: url('/img/buildings/i_moneydepot.jpg') no-repeat; }
ul.icons li.trade       { background: url('/img/buildings/i_trade.jpg') no-repeat; }
ul.icons li.wall        { background: url('/img/buildings/i_wall.jpg') no-repeat; }
ul.icons li.den         { background: url('/img/buildings/i_den.jpg') no-repeat; }
ul.icons li.sentry    { background: url('/img/buildings/i_sentry.jpg') no-repeat; }

ul.bigIcons { color: #fff; text-align: center; font-weight: bold; }
ul.bigIcons li { position: relative; margin: 3px; float: left; width: 116px; height: 125px; }
ul.bigIcons li p { line-height: 16px; font-size: 12px; margin-top: 109px;  background: url('/img/bgTransparent/black50.png'); }

ul.bigIcons li.agent   { background: url('/img/units/tn_agent.jpg') no-repeat; }
ul.bigIcons li.archer  { background: url('/img/units/tn_archer.jpg') no-repeat; }
ul.bigIcons li.axeman  { background: url('/img/units/tn_axeman.jpg') no-repeat; }
ul.bigIcons li.cavalry { background: url('/img/units/tn_cavalry.jpg') no-repeat; }
ul.bigIcons li.guard   { background: url('/img/units/tn_guard.jpg') no-repeat; }
ul.bigIcons li.ox      { background: url('/img/units/tn_ox.jpg') no-repeat; }
ul.bigIcons li.pikeman { background: url('/img/units/tn_pikeman.jpg') no-repeat; }
ul.bigIcons li.settler { background: url('/img/units/tn_settler.jpg') no-repeat; }
ul.bigIcons li.spy     { background: url('/img/units/tn_spy.jpg') no-repeat; }
ul.bigIcons li.templar { background: url('/img/units/tn_templar.jpg') no-repeat; }
ul.bigIcons li.sentinel { background: url('/img/units/tn_sentinel.jpg') no-repeat; }

p.spacer380 { background-image: url('/img/site/spacer.png'); width: 380px; height: 3px; font-size: 3px; }
p.borderLine { border-bottom: 1px solid #362f26; margin: 3px; font-size: 1px; }
p.borderLineGrey { border-bottom: 1px solid #c7ae98; margin: 3px; font-size: 1px; }

#box { background-color: #4a3e32; border: solid 1px #c7ae98; padding: 3px; color: #fff; }
#box h4 {  color: #fff; line-height: 30px; font-size: 16px; font-weight: bold; padding: 3px; border: none;
           background: url('/img/site/close.png') no-repeat right !important;
           /* IE-Pngfix setzt den png nach links */ background: url('/img/site/closeIE6.gif') no-repeat right; }
#box form hierselect { border: none; color: #ca9; background-image: url('/img/site/bg_box_grey.jpg'); }


#buildBox ul { background-color: #362F26; width: 390px; margin: 3px; }
#buildBox ul li {
  padding-left: 10px;
  /* iePngFix resetet/addiert zu Formatierung */
  width: 80px !important; /* Firefox, Opera & CO */
  width: 50px; /* IE 5.01, 5.5, 6 */
 }

#buildBox h4 {  color: #fff; line-height: 30px; font-size: 16px; font-weight: bold; width: 390px; padding: 3px; border: none;
                background: url('/img/site/close.png') no-repeat right !important;
                /* IE-Pngfix setzt den png nach links */ background: url('/img/site/closeIE6.gif') no-repeat right; }
#buildBox h4 a { color: #fff; font-size: 14px; font-weight: normal; }
#buildBox h4 a:active { color: #900; text-decoration: none; }
#buildBox h4 a:hover { color: #900; text-decoration: none; }

a.formLink { border: solid 1px #fff; line-height: 30px; font-size: 16px; font-weight: bold; color: #fff;
             text-align: center; display: block; width: 100%; height: 30px; background: url('/img/inside/bg_button.png'); }
#buildBox a.formLink:active { border: solid 1px #900; color: #900; }
#buildBox a.formLink:hover { border: solid 1px #900; color: #900; }

#battleContent h3 { font-size: 14px; background: none !important; border: none; padding: 0; }
#battleContent h4 { font-size: 12px; background: none !important; border: none; padding: 0; color: #c5ae97; }

#userInfo h2 { font-size: 16px; font-weight: bold; background: none !important; border: none; color: #fff; padding: 0; }
#userInfo h3 { font-size: 14px; font-weight: bold; background: none !important; border: none; color: #fff; padding: 0; }
#userInfo h4 { font-size: 12px; font-weight: bold; background: none !important; border: none; color: #fff; padding: 0; }
#userInfo p { font-size: 12px; font-weight: bold; background: none !important; border: none; color: #fff; padding: 0; }



#groupForum h4 {  color: #fff; line-height: 20px; font-size: 16px; font-weight: bold; padding: 3px; border: none;
                  background: url('/img/bgTransparent/black.png'); }


.aYellow a { color: #d90; }
.aYellow a:hover { color: #900; }

.aWhite a { color: #fff; }
.aWhite a:active { color: #fff; }
.aWhite a:hover { color: #bd9e4c;}

.aWhiteG a { color: #fff; }
.aWhiteG a:active { color: #fff; }
.aWhiteG a:hover { color: #bd9e4c;}

.aBlack a { color: #362f26; }
.aBlack a:active { color: #c00; }
.aBlack a:hover { color: #633; font-weight: bold; }

.aBlackW a { color: #362f26; }
.aBlackW a:active { color: #fff; }
.aBlackW a:hover { color: #bd9e4c;}

.aGreen a { color: #0f0; }
.aGreen a:active { color: #fff; }
.aGreen a:hover { color: #bd9e4c;}

.aRed a { color: #c00; }
.aRed a:active { color: #fff; }
.aRed a:hover { color: #bd9e4c;}

.aBlue a { color: #6fa9ac; }
.aBlue a:active { color: #6fa9ac; }
.aBlue a:hover { color: #bd9e4c;}

.aGold a { color: #bd9e4c; }
.aGold a:active { color: #bd9e4c; }
.aGold a:hover { color: #c00;}


.borderBottom {  border-bottom: solid 1px #c7ae98; }
.borderTop { border-top: solid 1px #c7ae98; }
.borderLeft { border-Left: solid 1px #c7ae98; }
.borderRight { border-Right: solid 1px #c7ae98; }

.borderBottomBlack {  border-bottom: solid 1px #362f26; }
.borderTopBlack { border-top: solid 1px #362f26; }
.borderLeftBlack { border-Left: solid 1px #362f26; }
.borderRightBlack { border-Right: solid 1px #362f26; }

.border {  border: solid 1px #c7ae98; }
.borderBlack {  border: solid 1px #362f26; }
.borderGrey {  border: solid 1px #ccc; }
.borderSand { border: solid 1px #B7A28C;  }

a.hoverImg img {
  display: block;
  visibility: visible;
  text-decoration: none;
  cursor: pointer;
}
a.hoverImg:link img, a.hoverImg:visited img { visibility: hidden; }
a.hoverImg:hover img, a.hoverImg:active img { visibility: visible; }
a.hoverImg p { color: #362f26; color: #fff; }
a.hoverImg:hover p { cursor: pointer; color: #362f26; }

hr.green { background-color: #0f0; }

/* ie png fix */
div, img, p, h3, h4, td { behavior: url(js/iepngfix.htc) }

input.formText, input.formButton { margin-bottom: 2px; }
input.formText { padding: 1px; }
input.formButton, input.formBigButton {
  padding: 1px 4px;
  border: solid 1px #fff;
  background: url('/img/inside/bg_button.png');
  color: white;
}
/*input.formButton { font-size: 12px; }*/
input.formButton {
  height: 30px;
  font-size: 14px;
  font-weight: bold;
}
input.formBigButton {
  width: 175px;
  margin-top: 25px;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

form input, select, textarea { background-color: #c4ae97; border: solid 1px #362f26; color: #362f26;  }
form input.noBorder { border: none; }

form input.build {  border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff;
                    margin: 3px 10px; height: 30px; background: url('/img/inside/b_build.png'); }


form input.upgrade    { border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff; width: 100%; cursor: pointer;
                        margin: 3px 10px; width: 375px; height: 40px; background: url('/img/inside/b_upgrade.png'); }
form input.downgrade  { border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff;
                        width: 100%; height: 30px; cursor: pointer;
                        margin: 3px 10px; width: 375px; background: url('/img/inside/b_downgrade.png'); }
form input.repair     { border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff;
                        width: 100%; height: 30px; cursor: pointer;
                        margin: 3px 10px; width: 375px; height: 40px; background: url('/img/inside/b_repair.png'); }

form input.yes  { border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff;
                        width: 100%; height: 30px; cursor: pointer;
                        margin: 3px 10px; width: 176px; background: url('/img/inside/b_greenButton.jpg'); }

form input.no   { border: solid 1px #fff; font-size: 16px; font-weight: bold; color: #fff;
                        width: 100%; height: 30px; cursor: pointer;
                        margin: 3px 10px; width: 176px; background: url('/img/inside/b_greenButton.jpg'); }

/*form input:active { border: solid 1px #900; color: #000; }  /* toDo IE6 */
/*form input:hover  { border: solid 1px #900; color: #000; }*/

.spacer {
  display: block;
  margin: 3px;
}

.tdPadding td { padding: 8px; }
.tdPadding th { padding: 8px 16px; }
.tdBorder td, .tdBorder th { border: 1px solid #ccc; }

.tdPadding2 td { padding: 2px; }
.tdPadding2 th { padding: 2px 2px; }

th { border-bottom: 1px solid #362f26; font-size: 14px; }
tr.trOdd { background-image: url('/img/site/bg_odd.png'); }
tr.trEven { }

.monospace { font-family: monospace; }
.caps { font-variant: small-caps; }

.teaser_grail {
  overflow: hidden;
  position: absolute;
  width: 100px;
  height: 75px;
  margin-left: 130px;
  margin-top: 35px;
  cursor: pointer;
}

.grailEnd {
  background:transparent url(/img/collections/grail/map/map_complete_white40.jpg) repeat scroll 0 0;
  height:475px;
  width:660px;
  z-index:999999;
  left: 140px;
  top:650px;
  margin-top:-475px;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;
  -moz-border-radius-topleft:15px;
  -moz-border-radius-topright:15px;
  -moz-box-shadow:10px 10px 20px #000000;  
}

a.grailEnd_link {
  font-size: 18px; 
  color: #f00;
}

a.grailEnd_link:hover {
  background-color: #d33;
  color: #fff;
} 

a.teaser:hover {
  color: #fff;
}

.eventTeaser {
  background:transparent url(/img/event/event_teaser.png) repeat scroll 0 0;
  height: 400px;
  width: 400px;
  z-index:999999;
  left: 290px;
  top: 590px;
  margin-top: -420px;
  -moz-background-clip: border;
  -moz-background-inline-policy: continuous;
  -moz-background-origin: padding;
  -moz-border-radius-bottomleft: 15px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  -moz-box-shadow: 10px 10px 20px #000000;  
}

.premiumExpire {
	background: none repeat scroll 0 0 #74624C;
  height: 170px;
  width: 350px;
  z-index:999999;
  left: 310px;
  top: 300px;
  margin-top: -170px;
  -moz-background-clip: border;
  -moz-background-inline-policy: continuous;
  -moz-background-origin: padding;
  -moz-border-radius-bottomleft: 15px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  -moz-box-shadow: 10px 10px 20px #000000;  
}