/*

*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}@charset "utf-8";

/* COMMON COLORS USED:
 * "Default Brown" -> color:#542c0f;                        // default color for... everything
 * "Large/Bold Brown" -> color:#906646;                // a lighter variant of default brown, for when text gets bigger but has to blend in
 * "Default Link" -> color:#434a93;                                // Desaturated blue for Text-Links
 * "" -> color:#;
 */

html, body {
        width:100%;        height:100%;
        margin:0px;        padding:0px;
        /* always show scrollbar to avoid page jumping */
        }

td {
  background-color:transparent;
  font-size:12px;
        }

body {


         font:normal 11px Arial, Helvetica, sans-serif;
        text-align:center;
        color:#542c0f; /*Default Brown*/
         overflow-x: hidden;
        }

p { line-height:1.34em; }
#mainview p {        margin: 4px 20px;        }
a {
        font:normal 11px Arial, Helvetica, sans-serif;
        color:#434a93;
        text-decoration:none;
        }

#container #mainview hr {
        color:#bc575d;
        background-color:#bc575d;
        border:none;
        border-color: #bc575d;
        height:1px;
        margin:12px 20px;
        }


a:hover {        text-decoration:underline;        }

/* hide dotted outlines in Firefox */
*:focus {        outline:none;        border:none;        }

/* We're using reset... */
strong { font-weight:bold; }

/* use for hidden accessibility hints, for example AJAX-updates */
.accesshint {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

/*-----------------------------------------------------------------------------------------------
 * GENERAL UI
 * Styles for the general appearance of the ingame-ui - everything outside the content
 *-----------------------------------------------------------------------------------------------*/

#globalResources h3, #cityResources h3, #advisors h3, #GF_toolbar h3, #cityNav h3, #breadcrumbs h3 {
        position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
        }

/*------------------------------------------------ Toolbar Styles */

#GF_toolbar {
        position:absolute;
        top:0px; left:0px;
        height:24px; width:100%;
        z-index:100;
        }
#GF_toolbar ul {
        position:relative;
        width:900px; height:24px;
        margin:0 auto;
        padding-left:80px;
        text-align:left;
        }
#GF_toolbar li { display:inline; }
#GF_toolbar a {
        margin:0 14px;
        line-height:24px;
        font:bold 11px Arial, Helvetica, sans-serif;
        color:#FFFFFF;
        }
#GF_toolbar .premium a .textLabel  {
    color: #FFDC26;
}

/*-------------------------------------------- Container Styles */
/* There are two containers that make up the frame of the website:
 * - one with 980px with that cares that 1024 users don't have to scroll sideways.
 * - one that extends a bit to the sides to contain the extra regular layout elements
 */

#container2 {
        position:relative;
        width:100%;
        margin:0 -10px;
        min-height:1px; /*IE7 hasLayout "disappearing content" bugfix*/
        z-index:20;

        text-align:left;
        background-repeat: repeat-y;
        }

/*-------------------------------------------- Header Styles */
/* The div#header is just a div with the game title and slogan. It contains a backgroundimage, but
 * does not contain all the menu items that make up the visible "header" in the current layout
 */

#header {
        position:relative;
        height:336px;
        margin:0 -132px -189px -132px;
        background:#f3dcb6 url(bg_heade.jpg) no-repeat;
        }
#header * {
        display:none;
        }

/*-------------------------------------------- Breadcrumbs Styles */
/* the breadcrumbs overlapping at the top of the content area
 * only the deepest two elements in the hierarchy get displayed with visible text, the others only as icons.

BREADCRUMBS:

World SHORT
<a href="?view=worldmap_iso&amp;islandX=<?=$island->getXCoord();?>&amp;islandY=<?=$island->getYCoord();?>" title="<?=TXT_BREADCRUMBS_WORLDLINK_TITLE;?>"><img src="skin/layout/icon-world.gif" alt="<?=TXT_BREADCRUMBS_WORLDLINK_TEXT;?>" /></a> &gt;

World NORM
<a href="?view=worldmap_iso&amp;islandX=<?=$island->getXCoord();?>&amp;islandY=<?=$island->getYCoord();?>" class="world" title="<?=TXT_BREADCRUMBS_WORLDLINK_TITLE;?>"><?=TXT_BREADCRUMBS_WORLDLINK_TEXT;?></a> &gt;

-----

Island SHORT
<a href="?view=island&amp;id=<?=$island->getId(); ?>" title="<?=TXT_BREADCRUMBS_ISLANDLINK_TITLE;?>"><img src="skin/layout/icon-island.gif" alt="<?=$city->getIsland()->getName(); ?>" /> [<?=$city->getIsland()->getXCoord(); ?>:<?=$city->getIsland()->getYCoord(); ?>]</a> &gt;

Island NORM
<a href="?view=island&amp;id=<?=$island->getId(); ?>" class="island" title="<?=TXT_BREADCRUMBS_ISLANDLINK_TITLE;?>"><?=$island->getName(); ?> [<?=$island->getXCoord(); ?>:<?=$island->getYCoord(); ?>]</a> &gt;

---------

City SHORT
<a href="?view=city&amp;id=<?=$city->getId(); ?>" title="<%=i18n("BREADCRUMBS_CITYLINK_TITLE", "Zurck zur Stadt"); %>"><?=$city->getName(); ?></a> &gt;

City NORM
<a href="?view=city&amp;id=<?=$city->getId(); ?>" class="city" title="<%=i18n("BREADCRUMBS_CITYLINK_TITLE", "Zurck zur Stadt"); %>"><?=$city->getName(); ?></a> &gt;

 */
#breadcrumbs {
        position:absolute;
        width:366px; height:22px;
        top:147px; left:250px;
        z-index:50;

        line-height:20px;
        font-size:12px;
        color:#ffdc26; /* for arrows and last entry */
        padding:3px 10px;
        }
#breadcrumbs a {
        color:#ffefc0; /* for linked entries */
        text-decoration:none;
        padding:3px 0px;
        }
#breadcrumbs img {
        vertical-align:middle;
        }

#breadcrumbs a.world {
        background:url(icon-wor.gif) no-repeat left center;
        padding-left:24px;
        }
#breadcrumbs a.island {
        background:url(icon-isl.gif) no-repeat left center;
        padding-left:32px;
        }
#breadcrumbs a.city {
        background:url(icon-cit.gif) no-repeat left center;
        padding-left:32px;
        }



#breadcrumbs a:hover {
        color:#fff8e4;
        }

/*-------------------------------------------- CityNav Styles*/
/* cityNav are the select-dropdown for choosing the current source city and
 * three buttons for quick navigation. Left/right buttons are functionally available, but not used in this layout.
 */
#cityNav {
        position:absolute;
        left:146px; top:36px;
        width:450px; height:60px;
        text-align:center;
        z-index: 10000;
        }

#cityNav .textLabel {
        font-size:11px;
        color:#542c0f; /*Default Brown*/
        }

#cityNav li {
        position:absolute;
        top:0; left:0;
        }
#cityNav li a {
        display:block;
        font-size:11px;
        text-decoration:none;
        background-repeat:no-repeat;
        background-position:0px 0px;
        }

#cityNav .previousCity {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
#cityNav .nextCity {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#cityNav .viewWorldmap {
        left:194px; top:4px;
        }
#cityNav .viewWorldmap a {
        width:84px; height:18px;
        padding-top:36px;
        background-image:url(btn_worl.jpg);
        }
#cityNav .viewWorldmap a:hover { background-position:0px -54px; }
#cityNav .viewWorldmap a.down { background-position:0px -108px; }

#cityNav .viewIsland {
        left:278px; top:4px;
        }
#cityNav .viewIsland a {
        width:84px; height:18px;
        padding-top:36px;
        background-image:url(btn_isla.jpg);
        }
#cityNav .viewIsland a:hover { background-position:0px -54px; }
#cityNav .viewIsland a.down { background-position:0px -108px; }

#cityNav .viewCity {
        left:362px; top:0px;
        }
#cityNav .viewCity a {
        width:84px; height:18px;
        padding-top:40px;
        background-image:url(btn_city.jpg);
        }
#cityNav .viewCity a:hover { background-position:0px -58px; }
#cityNav .viewCity a.down { background-position:0px -116px; }

#cityNav label {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

/* ///////////////// Dropdown SELECT Styles ///////////////// */

#cityNav .citySelect {
        position:absolute;
        display:block;
        top:6px; left:12px;
        width:177px; height:24px;
        }
#cityNav .citySelect * {
        background:url(select_c.jpg) no-repeat 0px 0px;
        }
#cityNav .citySelect li {
        position:static; /* kill the position:absolute from above*/
        line-height:24px;
        }

/* this part does not work correctly in IE6 due to the multiclass-bug.
cleanest possible workaround: the dropdown javascript should include a header&footer and the items should stay the same,
instad of relying exclusively the first/last thing.
Focus Highlight doesn't work yet too.
*/
#cityNav .citySelect .optionList li { height:24px; background-image:url(select_c.jpg); background-position: 0px -98px; }
#cityNav .citySelect .optionList li.first { padding-top:2px; background-position: 0px -72px; }
#cityNav .citySelect .optionList li.first.hover { background-position: 0px -172px; }
#cityNav .citySelect .optionList li.last { padding-bottom:2px; background-position: 0px -146px; }
#cityNav .citySelect .optionList li.last.hover { background-position: 0px -200px; }
#cityNav .citySelect .optionList { position:absolute; display:none; top:24px; left:0px; z-index:1000; width:177px; }
#cityNav .citySelect .optionList.expanded { display:block;}
#cityNav .citySelect .optionList .hover {        background-position: 0px -122px; }
#cityNav .citySelect .optionList li.active { }
#cityNav .citySelect .dropbutton { height:24px; line-height:24px; }
#cityNav .citySelect .dropbutton.expanded { background-position: 0px -48px; }
/*#cityNav .citySelect.focused { background-position: 0px -24px; }*/

#cityNav .replaced {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

/* ///////////////// Dropdown Styles END ///////////////// */

/*-------------------------------------------- City Resources Styles*/
/* INHERITS FROM .resources
 * the resources of the currently seledcted city, including the specially placed population.
 */
#container #cityResources {
        z-index:5000;
        position:absolute;
        left:146px; top:96px;
        width:450px; height:32px;
        }
#container #cityResources .resources .disabled {
        background-image:none;
        color:#999999;
        }
#container #cityResources li {
        position:absolute;
        top:3px;
        width:48px;
        overflow:visible;
        }
#container #cityResources li .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#container #cityResources .population {
        left:70px; top:-28px;
/*        width:40px;*/
        width:70px;
        }
#container #cityResources .actions {
        left:16px; top:-28px;
/*        width:40px;*/
        width:40px;
        }

#container #cityResources .storage_full {        color:#CC0000; font-weight:bold;        }
#container #cityResources .storage_danger {        color:#CC3300;        }

#container #cityResources .wood {        left:14px;        }
#container #cityResources .wine {        left:103px; }
#container #cityResources .marble {        left:192px;        }
#container #cityResources .glass {        left:281px;        }
#container #cityResources .sulfur {        left:370px;        }

#container #cityResources li .tooltip {
        position:absolute;
        display:none;
        top:26px; left:0px;
        background-color:#f1d7ad;
        border:1px solid #be8d53;
        border-top-width:4px;
        font-size:11px;
        line-height:1em;
        color:#542c0f;
  width:160px;
        padding:4px 8px;
        }

#container #cityResources li .tooltip .textLabel {
        position:static; display:inline; left:0; height:auto;        overflow:visible;
        }





/*-------------------------------------------- Global Res Styles*/
/* Transporters and gold. these have become buttons during development, so beware
 */
#globalResources {
        position:absolute;
        top:36px; left:37px;
        width:110px; height:92px;
        }
#globalResources .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#globalResources li {
        position:absolute;
        }
#globalResources li a {
        position:absolute;
        font-weight:bold;
        color:#906646; /* Large/Bold Brown */
        }
#globalResources li a:hover {
        text-decoration:none;
        }

#globalResources .transporters a {
        top:4px; left:0px;
        width:110px;height:53px;
        background:url(btn_tran.jpg) no-repeat 0px 0px;
        text-align:center;
        }
#globalResources .transporters a:hover {        background-position:0px -53px;        }
#globalResources .transporters a.down {        background-position:0px -106px;        }

#globalResources .transporters .transSum, #globalResources .transporters .transAvail {
        display:block;
        margin-left:64px;
        }
#globalResources .transporters .transAvail {
        margin-top:9px;
        font-size:18px;
        }

#globalResources .gold a {
        top:57px;
        width:98px;        height:34px;
        background:url(btn_trea.jpg) no-repeat 0px 0px;
        padding-right:12px;
        line-height:32px;
        text-align:right;
        }
#globalResources .gold a:hover {        background-position:0px -34px;        }
#globalResources .gold a.down {        background-position:0px -68px;        }

#globalResources .goldBalance {
        display:none; /*Javascript-overlay?*/
        }

/*-------------------------------------------- Advisors Styles*/
/* The four advisors. Signal when they have got a message.
 */
#advisors li {
        position:absolute;
        }
#advisors li a {
        display:block;
        font-size:11px;
        color:#542c0f; /*Default Brown*/
/*        color:#811b0b; Advisors royal red */
        text-decoration:none;
        }
#advisors li a .textLabel {
        position:absolute;
        top:89px;
        width:90px; height:18px;
        line-height:18px;
        text-align:center;
        cursor:pointer;
        }

#advisors #advCities {        left:618px; top:39px;        }
#advisors #advCities a {
        width:90px; height:108px;
}

#advisors #advCities a.normal { background-image:url(mayor000.gif); }
#advisors #advCities a.normalactive {        background-image:url(mayor_ac.gif);        }
#advisors #advCities a.premium { background-image:url(mayor_pr.gif); }
#advisors #advCities a.premiumactive { background-image:url(mayor_pr.gif); }

#advisors #advMilitary {        left:708px; top:39px;        }
#advisors #advMilitary a {
        width:90px; height:108px;
}

#advisors #advMilitary a.normal {        background-image:url(general0.gif);        }
#advisors #advMilitary a.normalactive {        background-image:url(general_.gif);        }
#advisors #advMilitary a.normalalert {        background-image:url(general1.gif);        }
#advisors #advMilitary a.premium {        background-image:url(general1.gif);        }
#advisors #advMilitary a.premiumactive {        background-image:url(general1.gif);        }
#advisors #advMilitary a.premiumalert {        background-image:url(general1.gif);        }

#advisors #advResearch {        left:798px; top:39px;        }
#advisors #advResearch a {
        width:90px; height:108px;
}

#advisors #advResearch a.normal {        background-image:url(scientis.gif);        }
#advisors #advResearch a.normalactive {        background-image:url(scientit.gif);        }
#advisors #advResearch a.premium {        background-image:url(scientit.gif);        }
#advisors #advResearch a.premiumactive {        background-image:url(scientit.gif);        }

#advisors #advDiplomacy {        left:888px; top:39px;        }
#advisors #advDiplomacy a{
        width:90px; height:108px;
}
#advisors #advDiplomacy a.normal {        background-image:url(diplomat.gif);        }
#advisors #advDiplomacy a.normalactive {        background-image:url(diplomau.gif);        }
#advisors #advDiplomacy a.premium {        background-image:url(diplomau.gif);        }
#advisors #advDiplomacy a.premiumactive {        background-image:url(diplomau.gif);        }


/*-------------------------------------------- The main view window */
/* mainview is 720px and has a default padding of 0 20;
 */
#mainview {
         position:relative;


         z-index:30;
         padding: 0px 18px;/* <----- 18 PX STATT 20!*/
         }

/*-------------------------------------------- Footer Styles */
/* this is the footer of the page. Don't cnofuse with the various footer classes used with div-containers
 */
#footer {
        clear:both;
        position:relative;
        width:560px;        height:33px; /*real width is 1000px... add padding*/
        padding:47px 120px 0px 340px;
        margin:0 -10px;
        background-image:url(bg_foote.jpg);
        font-size:11px;
        font-weight:bold;
        color:#edd090; /* footer gold */
        text-align:right;
        }
#footer .copyright {
        float:left;
        }
#footer a {
        margin:0 10px;
        color:#edd090; /* footer gold */
        }
#footer a:hover {        color:#FFFFFF;        }

#footer a#gflink { margin:0px;}

/*-------------------------------------------- ExtraDiv Styles */
/* conExtraDivs are Divs that are inside the container, extraDiv are outside.
 * These are for general styling purposes. See CSS Zen Garden.
 * TODO: Add the overlapping corner-gifs at the edges of the mainview. (Planned as conExtradivs)
 */
#conExtraDiv1 {
        position:absolute;
        z-index:3000;
        bottom:62px;        left:251px;
        width:9px; height:12px;
        background:url(corner_b.gif) no-repeat bottom left;
}
#conExtraDiv2 {
        position:absolute;
        z-index:3000;
        bottom:62px;        right:29px;
        width:9px; height:12px;
        background:url(corner_c.gif) no-repeat bottom right;
}
#conExtraDiv3 {
        position:absolute;
        z-index:3000;
        top:147px;        right:29px;
        width:5px; height:10px;
        background:url(corner_t.gif) no-repeat top right;
}

#extraDiv1 {
        position:absolute;
        top:0px;        right:0px;
        width:100%;        height:147px;
        background:url(bg_sky00.jpg) repeat top center;
        z-index:1;
        }

#extraDiv2 {
        position:absolute;
        top:147px;        left:0px;
        width:100%;        height:189px;
        background:url(bg_ocean.jpg) repeat top center;
        z-index:1;
        }


/*-----------------------------------------------------------------------------------------------
 * DYNAMIC (LEFT COLUMN FLOATING BOXES) STYLES
 * styling for the boxes on the left side with varying content
 *-----------------------------------------------------------------------------------------------*/

/* dynamic - sidebox with visible heading, the help link is optional */
/* ------ USAGE: -----
<div class="dynamic">
        <h3 class="header">[INSERT HEADING] <a class="help" href="[INSERT HELP LINK]" title="[INSERT HELP TITLE]"><span class="textLabel">[INSERT HELP TEXT]</span></a></h3>
        <div class="content">
                [INSERT CONTENT]
        </div>
        <div class="footer"></div>
</div>
 * --------------------*/

#container .dynamic {
        position:relative; /*Workaround for silly float stacking */
        display:inline; /*Workaround for IE double float margin bug */
        clear:both;
        float:left;
        width:228px;
        margin:2px 0 0 18px;
        background:url(bg_sideb.gif) repeat-y;
        }

#container .dynamic h3.header {
        height:24px;
        padding-top:2px;
        line-height:24px;
        font-weight:bold;
        text-align:center;
        background:url(bg_sideb.jpg) no-repeat;
        }
#container .dynamic .content {
        position:relative;
        width:218px;
        margin:4px 5px;
        }
#container .dynamic div.footer {
        height:5px;
        overflow:hidden; /* IE6 enforces min-height = line-height */
        background:url(bg_sidec.gif) no-repeat;
        clear:left;
        }

#container .help {
        position:absolute;
        top:0px; right:0px;
        width:34px; height:24px;
        background:-2px 1px no-repeat url(help0000.gif);
        }
#container .help .textLabel{
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#container .dynamic .content p {
        margin:5px 10px;
        }

#container .dynamic img {
        display:block;
        margin:0 auto;
        }

#container .dynamic .button {
    display:block;
    margin:auto;
    width:150px;
}
/*-----------------------------------------------------------------------------------------------
 * COMMON STYLES
 * use on every page as you please.
 *-----------------------------------------------------------------------------------------------*/


/* contentBox - general purpose content box with bright background and own heading. The heading is inside a textlabel for easy disposal */
/* ------ USAGE: -----
<div class="contentBox">
        <h3 class="header"><span class="textLabel">[INSERT HEADING]</span></h3>
        <div class="content">
                [INSERT CONTENT]
        </div>
        <div class="footer"></div>
</div>
 * --------------------*/

.contentBox {
        background-image:url(bg_conte.gif);
        position:relative;
        width:670px;
        margin-bottom:10px;
        }
.contentBox h3.header {
        background-image:url(bg_contf.gif);
        background-repeat:no-repeat;
        height:20px;
        line-height:20px;
        padding:10px 6px 0px 6px;
        color:#7e4a21;
        font-weight:bold;
        text-align:center;
        }
.contentBox div.content {
        position:relative;
 /*        overflow:hidden;to stop margins collapsing */
        margin:0px 3px;
        }
.contentBox div.footer {
        background:url(bg_contg.gif) no-repeat;
        overflow:hidden;
        height:3px;
        }












/* contentBox01 - general purpose content box with bright background and no visible heading */
/* ------ USAGE: -----
<div class="contentBox01">
        <h3 class="header"><span class="textLabel">[INSERT HEADING]</span></h3>
        <div class="content">
                [INSERT CONTENT]
        </div>
        <div class="footer"></div>
</div>
 * --------------------*/

.contentBox01,
.contentBox01h {
        background-image:url(bg_conte.gif);
        position:relative;
        width:675px;
        margin-bottom:10px;
        }

.contentBox01 div.content,
.contentBox01h div.content {
        position:relative;
        margin:0px 3px;
        }

.contentBox01h div.content .value {
        background:transparent none repeat scroll 0% 50%;
        border:medium none;
        color:#906646;
        font-size:10px;
        margin-left:0pt;
        padding-left:0pt;
        text-align:right;
        width:30px;
}
.contentBox01h div.content label.valueLabel {
}

.contentBox01 h3.header {
        background-image:url(bg_conth.gif);
        height:7px;
        padding:0; margin:0;
        overflow:hidden;
        }
.contentBox01 h3.header .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
.contentBox01h h3.header {
        background-image:url(bg_contf.gif);
        background-repeat:no-repeat;
        height:20px;
        line-height:20px;
        padding:10px 6px 0px 6px;
        color:#7e4a21;
        font-weight:bold;
        text-align:center;
        }
.contentBox01 div.footer,
.contentBox01h div.footer {
        background:url(bg_contg.gif) no-repeat;
        overflow:hidden;
        height:3px;
        }


/* table01 - general purpose table with bright background, horizontal heading */
/* ------ USAGE: -----
    <table cellpadding="0" cellspacing="0" class="table01">
                         <caption>[INSERT CAPTION]</caption>
                        <thead>
                                <tr><th>[INSERT TH]</th><th>[INSERT TH2]</th></tr>
                        </thead>
                        <tbody>
                                <tr>
                                        <td>[INSERT TD]</td><td>[INSERT TD2]</td>
                                </tr>
                                <tr class="alt">
                                        <td>[INSERT TD3]</td><td>[INSERT TD4]</td>
                                </tr>
                        </tbody>
                </table>
 * --------------------*/

#container #mainview table.table01{
        width:600px;
        margin:0px auto 10px auto;
        color:#612d04;
        font:bold 12px Arial, Helvetica, sans-serif;
        border: 1px solid #e4b873;
        background-color:#fdf7dd;
        text-align:center;
        }
#container #mainview table.table01 caption {
        text-align:center;
        margin:3px 0px;
        }
#container #mainview table.table01 tr {
        font-weight:normal;
        }
#container #mainview table.table01 tr.alt {
        background-color:#FfEAcf;
        }
#container #mainview table.table01 tr.ownally {
        background-color:#FAE877;
        }
#container #mainview table.table01 tr.own {
        background-color:#CAE877;
        }

#container #mainview table.table01 th {
        background-color:#faeac6;
        text-align:center;
        }
#container #mainview table.table01 th {
        height:24px;
        padding:4px;
        font-weight:bold;
        }
#container #mainview table.table01 td {
        padding:4px 10px;
        }



/* CLASS TableHoriMax - default style for resource display */

#container #mainview table.TableHoriMax td { text-align:center; }

#container #mainview table.TableHoriMax {
        width:100%;
        margin:0px auto 10px auto;
        color:#612d04;
        font:bold 12px Arial, Helvetica, sans-serif;
        border: 0px solid #e4b873;
        background-color:#fdf7dd;
        }
#container #mainview table.TableHoriMax tr {
        font-weight:normal;
        }
#container #mainview table.TableHoriMax tr.alt {
        background-color:#fdf1d4;
        }
#container #mainview table.TableHoriMax th {
        text-align:center;
        height:24px;
        padding:4px;
        font-weight:bold;
        background-color:#faeac6;
        }





/* CLASS resources - default style for resource display */
/* ------ USAGE: -----
                <div>
                        <ul class="resources">
                                <li class="[INSERT RESOURCE CLASS]"><span class="textLabel">[INSERT RESOURCE NAME]: </span>[INSERT AMOUNT]</li>
                                [...]
                        </ul>
                </div>

available resource classes are:
                * gold
                * wood
                * marble
                * sulfur
                * glass
                * wine
                * population (three guys, used for display)
                * citizens  (one guy, used for costs)
                * upkeep
                * time

 * --------------------*/

#container ul.resources {
        text-align:left;
        } /*ul*/

#container ul.resources li {
        width:100px; height:26px;
        padding-left:32px;
        line-height:26px;
        background-repeat:no-repeat;
        }
#container ul.resources li .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
#container .resources .gold {
        background-image:url(icon_gol.gif);
        background-position:4px 2px;
        }
#container ul.resources .wood {
        background-image:url(icon_woo.gif);
        background-position:4px 2px;
        }
#container ul.resources .wine {
        background-image:url(icon_win.gif);
        background-position:4px 2px;
        }
#container ul.resources .marble {
        background-image:url(icon_mar.gif);
        background-position:2px 2px;
        }
#container ul.resources .glass {
        background-image:url(icon_gla.gif);
        background-position:4px 2px;
        }
#container ul.resources .sulfur {
        background-image:url(icon_sul.gif);
        background-position:2px 2px;
        }
#container ul.resources .population {
        background-image:url(icon_pop.gif);
        padding-left:40px;
        background-position:2px 0px;
        }
#container ul.resources .actions {
        background-image:url(icon_act.gif);
        padding-left:28px;
        background-position:2px 0px;
        }
#container ul.resources .citizens {
        background-image:url(icon_cit.gif);
        background-position:4px 2px;
        }
#container ul.resources .upkeep {
        background-image:url(icon_upk.gif);
        background-position:2px 0px;
        }
#container ul.resources .time {
        background-image:url(icon_tim.gif);
        background-position:4px 2px;
        }

/* CLASS button - default style for input buttons */
/* ------ USAGE: -----
                        <input type="submit" class="button" value="[INSERT VALUE]" />
                        OR
                        <a class="button" >Link </a>
 * --------------------*/

*.button {
        border: 3px double #5d4c2f;
        border-top-color: #c9a584;
        border-left-color: #c9a584;
        padding: 2px 0px;
        background:#eccf8e url(button00.gif) repeat-x;
        font-weight: bold;
        font-size:12px;
/*        line-height:22px; */
        text-align:center;
        color:#542c0f; /*Default Brown*/
        }
*.button:hover {        color: #FFFFFF; text-decoration:none;        }
*.button:active {
        border: 3px double #c9a584;
        border-top-color: #5d4c2f;
        border-left-color: #5d4c2f;
        padding:3px 1px 1px 3px;
        }

/*
TODO: schoenmachen! -> Slider wurde bewegt, Button wird gehighlightet
*/
*.buttonChanged {
    border: 3px double #5d4c2f;
    border-top-color: #c9a584;
    border-left-color: #c9a584;
    padding: 2px 0px;
    background:#eccf8e url(button00.gif) repeat-x;
    font-weight: bold;
    font-size:12px;
/*  line-height:22px; */
    text-align:center;
    color:#b03937; /*rot aus h1*/
    }


/* CLASS dangerbutton, cancelUpgrade - default style for link "cancel" button */
/* ------ USAGE: -----
                        <input type="submit" class="dangerbutton" value="[INSERT VALUE]" />
                        OR
                        <a class="dangerButton" >Link </a>
 * --------------------*/

*.dangerButton, *.cancelUpgrade {
        border: 3px double #5d1b12;
        border-top-color: #ba4d4f;
        border-left-color: #ba4d4f;
        padding: 2px 2px;
        background: #d36c69 url(dangerbu.gif) repeat-x;
        color: #5c2222;
        font-weight: bold;
        font-size:12px;
        text-align:center;
        }
*.dangerButton:hover, *.cancelUpgrade:hover {
        background-color: #d36c69;
        color: #FFFFFF;
        }
*.dangerButton:active, *.cancelUpgrade:active {
        border: 3px double #ba4d4f;
        border-top-color: #5d1b12;
        border-left-color: #5d1b12;
        padding:3px 1px 1px 3px;
        }


#container #mainview .important {
        font-weight:bold;
}



/* CLASS textfield - default style for input textfields */
/* ------ USAGE: -----
                        <input type="text" class="textfield" />
 * --------------------*/

input.textfield {
        border: 1px solid #c9a584;
        border-top-color: #5d4c2f;
        border-left-color: #5d4c2f;
        padding: 2px;
        background: #fff7e1 url(textfiel.gif) repeat-x;
        font:normal 14px Arial, Helvetica, sans-serif;
        }

input.textfield:focus {
        background-image:none;
        background-color: #ffffff;
        }

textarea.textfield {
        border: 1px solid #c9a584;
        border-top-color: #5d4c2f;
        border-left-color: #5d4c2f;
        padding: 2px;
        background: #fff7e1 url(textfiel.gif) repeat-x;
        font:normal 12px Arial, Helvetica, sans-serif;
}

/* CLASS displayframe - for the double-border crap */
/* TODO: deprecated?*/
/* ------ USAGE: -----
                        <div class="displayframe1">
                                <div class="displayframe2">
                                </div>
                        </div>
 * --------------------*/

.displayframe1 {
        width:304px;
        border:1px solid #f3ddb2;
        padding:1px;
        }

.displayframe2 {
        border:1px solid #e4b873;
        background-color:#fdf7dd;
        }









#backTo a {
        display:block;
        margin:10px auto;
        width:180px;
        font-weight: bold;
        font-size:12px;
        text-align:center;
        color:#542c0f; /*Default Brown*/
        }







/* TODO: rename to something else than buildingdescription? */

#mainview h1 {
        margin: 0 auto 0 375px;
        font-weight:bold;
        font-size:18px;
        line-height:40px;
        color:#b03937; /* h1 red */
        }

#mainview .buildingDescription {
        position:relative;
        height:120px;
        margin:0px 10px;
        }
#mainview .buildingDescription p{        margin-right:160px;        }

#barracks .buildingDescription {        background:url(barracks.gif) no-repeat right 10px;        }
#townHall .buildingDescription {        background:url(townHall.gif) no-repeat right 10px;        }

#academy .buildingDescription {        background:url(academy0.gif) no-repeat right 10px;        }
/*#researchOverview .buildingDescription {        background:url(buildings/y100/academy.gif) no-repeat right 10px;        }*/
/*#changeResearch .buildingDescription {        background:url(buildings/y100/academy.gif) no-repeat right 10px;        }*/

#port .buildingDescription {        background:url(port0000.gif) no-repeat right 10px;        }
#embassy .buildingDescription {        background:url(embassy0.gif) no-repeat right 10px;        }
#branchOffice .buildingDescription {        background:url(branchOf.gif) no-repeat right 10px;        }

#museum .buildingDescription {        background:url(museum00.gif) no-repeat right 10px;        }
#palace .buildingDescription {        background:url(palace00.gif) no-repeat right 10px;        }
#palaceColony .buildingDescription {        background:url(palaceCo.gif) no-repeat right 10px;        }
#safehouse .buildingDescription {        background:url(safehous.gif) no-repeat right 10px;        }
#shipyard .buildingDescription {        background:url(shipyard.gif) no-repeat right 10px;        }
#warehouse .buildingDescription {        background:url(warehous.gif) no-repeat right 10px;        }
#winehouse .buildingDescription {        background:url(winehous.gif) no-repeat right 10px;        }
#workshop .buildingDescription {        background:url(workshop.gif) no-repeat right 10px;        }
#tavern .buildingDescription {        background:url(tavern00.gif) no-repeat right 10px;        }

#forester .buildingDescription {        background:url(forester.gif) no-repeat right 10px;        }
#stonemason .buildingDescription {        background:url(stonemas.gif) no-repeat right 10px;        }
#glassblowing .buildingDescription {        background:url(glassblo.gif) no-repeat right 10px;        }
#winegrower .buildingDescription {        background:url(winegrow.gif) no-repeat right 10px;        }
#alchemist .buildingDescription {        background:url(alchemis.gif) no-repeat right 10px;        }
#carpentering .buildingDescription {        background:url(carpente.gif) no-repeat right 10px;        }
#architect .buildingDescription {        background:url(architec.gif) no-repeat right 10px;        }
#optician .buildingDescription {        background:url(optician.gif) no-repeat right 10px;        }
#vineyard .buildingDescription {        background:url(vineyard.gif) no-repeat right 10px;        }
#fireworker .buildingDescription {        background:url(firework.gif) no-repeat right 10px;        }

#militaryAdvisor .buildingDescription {        background:url(military.gif) no-repeat right 10px;        }
#tradeAdvisor .buildingDescription {        background:url(city_log.gif) no-repeat right 10px;        }
#researchAdvisor .buildingDescription {        background:url(research.gif) no-repeat right 22px;        }
#diplomacyAdvisor .buildingDescription {        background:url(diplomac.gif) no-repeat right 20px;        }


#colonize .buildingDescription {        background:url(colonize.gif) no-repeat right 10px;        }
#merchantNavy .buildingDescription { background:url(ship_tra.gif) no-repeat right 10px;}
#sendSpy .buildingDescription {        background:url(safehous.gif) no-repeat right 10px;        }

#takeOffer .buildingDescription {        background:url(branchOf.gif) no-repeat right 27px;
                                                                        height:130px;
                                                                }
#finances .buildingDescription {}
#wall .buildingDescription {        background:url(stadtmau.gif) no-repeat right 10px;}

#researchDetail .buildingDescription { background:url(forschun.gif) no-repeat right 10px;}
#informations .buildingDescription {/* background:url(layout/erste_schritte.gif) no-repeat right 10px;*/}
#noluxury .buildingDescription {}


/* --------------------------------------------------- Upgradebox normal */

#buildingUpgrade {
        text-align:center;
        }
#buildingUpgrade .buildingLevel {
        font-size:36px;
  font-weight:bold;
        color:#906646; /* Large/Bold Brown */
        }
#buildingUpgrade .buildingLevel .textLabel {
        display:block;
        margin-top:4px;
        font-size:12px;
        font-weight:normal;
        color:#542c0f; /*Default Brown*/
        }
#buildingUpgrade h4 {
        margin:6px 0px;
        padding:2px;
        background-color:#fffbdb;
        font-size:12px;
        font-weight:normal;
        text-align:center;
}

#buildingUpgrade .actions {
        position:absolute;
        top:0px; left:0px;
        }
#buildingUpgrade .actions .upgrade {
        position:absolute;
        top:0px; left:10px;
        }
#buildingUpgrade .actions .downgrade {
        position:absolute;
        top:0px; left:130px;
        }

#buildingUpgrade .actions .upgrade a, #buildingUpgrade .actions .downgrade a {
        display:block;
        width:80px; height:16px;
        padding-top:44px;
        color:#542c0f; /*Default Brown*/
        text-decoration:none;
        }
#buildingUpgrade .actions .upgrade a {        background:url(btn_upgr.jpg) no-repeat center 8px;        }
#container #buildingUpgrade .actions .downgrade a {        background:url(btn_down.jpg) no-repeat center 8px;        }

#container #buildingUpgrade .actions .upgrade a.disabled {        background:url(btn_upgs.jpg) no-repeat center 8px;        }
#container #buildingUpgrade .actions .downgrade a.disabled {        background:url(btn_dowo.jpg) no-repeat center 8px;        }


#container #buildingUpgrade .resources {
        margin:0px 15px;
        }
#container #buildingUpgrade .resources li.alt {
        border-left:3px solid #F6EBBC;
        }
#container #buildingUpgrade .resources li {
        float:left;
        width:60px;
        /*        margin:4px 10px; */
        }
#container #buildingUpgrade .resources li.time {
        /*
        display:none;

        */
        float:none;
        clear:left;
        display:block;
        text-align:left;
        margin:2px auto;
        }

/* --------------------------------------------------- Upgradebox, WHILE BEING UPGRADED */
#container #buildingUpgrade.upgrading .isUpgrading{
        font-weight:bold;
        width:140px;
        margin: 8px auto 4px 70px;
        }
#container #buildingUpgrade.upgrading .buildingLevel{
        position:absolute;
        left:10px; top:0px;
        width:60px;
        background:url(nextleve.gif) no-repeat 6px 48px;
        text-align:center;
        font-size:24px;
        }

#container #buildingUpgrade.upgrading .buildingLevel .textLabel {
        display:block;
        margin-bottom:46px;
        font-size:12px;
        }
#container #buildingUpgrade.upgrading .nextLevel{
        position:absolute;
        left:10px; top:20px;
        width:60px;
        font-size:24px;
        font-weight:bold;
        text-align:center;
        }
#container #buildingUpgrade.upgrading .nextLevel .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
#container .progressBar{
        width:120px;
        margin: 12px auto 2px 80px;
        height:20px;
        border:1px solid #775726;
        background-color:#fefbe8;
        text-align:left;
        }
#container .progressBar .bar{
        height:100%;
        background-color:#73443e;
        }
#container #buildingUpgrade.upgrading .time{
        display:block;
        font-weight:bold;
        width:140px;
        margin: 4px auto 4px 70px;
        text-align:center;
        }
#container #buildingUpgrade.upgrading .cancelUpgrade {
        display:block;
        width:110px;
        margin: 4px auto 4px 80px;
        }



/*-------------------------------------------- VIEW Worldmap Styles */

/* #container div#information { margin-top:8px; } */

#container div#navigation { margin-top:8px; }


img {
        border:none;
        }

/*-------------------------------------------- VIEW Island Styles */

#island #container #mainview h3 {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#island #container #mainview {
        padding:0;
        height:440px;
        background-image:url(bg_islan.jpg);
        }

#island #container #mainview .cityinfo {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#island #container #mainview .cityactions {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

#information li {
        margin:2px 10px;
        }
#information .name {
        }
#information .name .textLabel {
        float:left;
        width:80px;
        }
#information .owner {
        font-weight:bold;
        }
#information .owner .textLabel {
        float:left;
        width:80px;
        }
#information .owner .messageSend img {
        display:inline;
        vertical-align:middle;
        }
#information .ally a{
        color:#542c0f;
        }
#information .ally .textLabel {
        float:left;
        width:80px;
        }
#information .ally .messageSend img {
        display:inline;
        vertical-align:middle;
        }
#information .citylevel {
        }
#information .citylevel .textLabel {
        float:left;
        width:80px;
        }
#information .spy {
        text-align:center;
        }

#actioncontainer .footer { clear:left;}
#infocontainer .footer { clear:left;}
#information .footer { clear:left;}

#island #actions ul {
        position:relative;
        }

#island #actions {
        position:relative;
        }

#island #actions li {
        position:relative;
        float:left;
        margin:4px 0px;
        width:100px;
        font-size:10px;
        }
#island #actions li a {
        display:block;
        height:1em;
        padding-top:36px;
        color:#542c0f;
        }

#island #actions li a .textLabel {
        display:block;
        text-align:center;
        }


#island #actions .disabled {
        width:100px;
        padding-top:36px;
        }
#island #actions .disabled .textLabel {
        display:block;
        text-align:center;
        }


#island #container #actions .diplomacy {        background:url(diplomac.gif) no-repeat top center;        }
#island #container #actions .diplomacy a {        background:url(diplomad.gif) no-repeat top center;        }
#island #container #actions .diplomacy a:hover {        background:url(diplomae.gif) no-repeat top center;        }

#island #container #actions .transport {        background:url(transpor.gif) no-repeat top center;        }
#island #container #actions .transport a {        background:url(transpos.gif) no-repeat top center;        }
#island #container #actions .transport a:hover {        background:url(transpot.gif) no-repeat top center;        }


#island #container #actions .trade {        background:url(trade_di.gif) no-repeat top center;        }
#island #container #actions .trade a {        background:url(trade000.gif) no-repeat top center;        }
#island #container #actions .trade a:hover {        background:url(trade_ov.gif) no-repeat top center;        }


#island #container #actions .espionage {        background:url(espionag.gif) no-repeat top center;        }
#island #container #actions .espionage a {        background:url(espionah.gif) no-repeat top center;        }
#island #container #actions .espionage a:hover {        background:url(espionah.gif) no-repeat top center;        }


#island #container #actions .blockade {        background:url(blockade.gif) no-repeat top center;        }
#island #container #actions .blockade a {        background:url(blockadf.gif) no-repeat top center;        }
#island #container #actions .blockade a:hover {        background:url(blockadf.gif) no-repeat top center;        }

#island #container #actions .defend_city {  background:url(defend_d.gif) no-repeat top center;  }
#island #container #actions .defend_city a {    background:url(defend00.gif) no-repeat top center;   }
#island #container #actions .defend_city a:hover {  background:url(defend_o.gif) no-repeat top center;  }

#island #container #actions .defend_port {  background:url(defend_p.gif) no-repeat top center;  }
#island #container #actions .defend_port a {    background:url(defend_p.gif) no-repeat top center;   }
#island #container #actions .defend_port a:hover {  background:url(defend_p.gif) no-repeat top center;  }


#island #container #actions .plunder {        background:url(plunder_.gif) no-repeat top center;        }
#island #container #actions .plunder a {        background:url(plunder0.gif) no-repeat top center;        }
#island #container #actions .plunder a:hover {        background:url(plunder1.gif) no-repeat top center;        }


#island #container #actions .occupy {        background:url(occupy_d.gif) no-repeat top center;        }
#island #container #actions .occupy a {        background:url(occupy00.gif) no-repeat top center;        }
#island #container #actions .occupy a:hover {        background:url(occupy_o.gif) no-repeat top center;        }

#island #container #actions .deploy_army {        background:url(move_arm.gif) no-repeat top center;        }
#island #container #actions .deploy_army a {        background:url(move_arm.gif) no-repeat top center;        }
#island #container #actions .deploy_army a:hover {        background:url(move_arm.gif) no-repeat top center;        }

#island #container #actions .deploy_fleet {        background:url(move_fle.gif) no-repeat top center;        }
#island #container #actions .deploy_fleet a {        background:url(move_fle.gif) no-repeat top center;        }
#island #container #actions .deploy_fleet a:hover {        background:url(move_fle.gif) no-repeat top center;        }




#island #container #mainview #cities .cityLocation { position:absolute; width:64px; height:64px; z-index:500; }
#island #container #mainview #cities .cityLocation a { position:absolute; display:block; width:64px; height:64px; z-index:500; cursor:pointer;}
#island #container #mainview #cities .selectimg { position:absolute; top:18px; left:-7px; visibility:hidden;  background-image:url(select_c.gif); width:81px; height:55px; }
#island #container #mainview #cities .selected div.selectimg{ visibility:visible;}

#island #container #mainview #cities #cityLocation0 { top:171px; left:39px; }
#island #container #mainview #cities #cityLocation1 { top:91px; left:128px; }
#island #container #mainview #cities #cityLocation2 { top:50px; left:208px; }
#island #container #mainview #cities #cityLocation3 { top:35px; left:295px; }
#island #container #mainview #cities #cityLocation4 { top:43px; left:398px; }
#island #container #mainview #cities #cityLocation5 { top:82px; left:472px; }
#island #container #mainview #cities #cityLocation6 { top:59px; left:575px; }
#island #container #mainview #cities #cityLocation7 { top:157px; left:628px; }
#island #container #mainview #cities #cityLocation8 { top:204px; left:482px; }
#island #container #mainview #cities #cityLocation9 { top:239px; left:610px; }
#island #container #mainview #cities #cityLocation10 { top:302px; left:526px; }
#island #container #mainview #cities #cityLocation11 { top:293px; left:420px; }
#island #container #mainview #cities #cityLocation12 { top:334px; left:323px; }
#island #container #mainview #cities #cityLocation13 { top:293px; left:208px; }
#island #container #mainview #cities #cityLocation14 { top:200px; left:195px; }
#island #container #mainview #cities #cityLocation15 { top:280px; left:93px; }

#island #container #mainview #cities a { text-decoration:none; }

#island #container #mainview #cities .buildplace .claim { display:block; position:absolute; left:26px; bottom:20px; background-image:url(flag_yel.gif); width:29px; height:40px; }
#island #container #mainview #cities .buildplace { display:block; position:absolute; width:64px; height:64px; }
#island #container #mainview #cities .buildplace .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }

/* Fremde St?dte */

#island #container #mainview #cities .level1 div.cityimg {
        display:block;
        position:absolute;
        left:0px;
        bottom:0px;
        background:url(city_1_r.gif) no-repeat 20px top;
        width:64px;
        height:63px;
        }
#island #container #mainview #cities .level1 div.cityimg {
        background:url(city_1_r.gif) no-repeat 13px 10px;
}

#island #container #mainview #cities .level2 div.cityimg,
#island #container #mainview #cities .level3 div.cityimg {
        background:url(city_2_r.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level4 div.cityimg,
#island #container #mainview #cities .level5 div.cityimg,
#island #container #mainview #cities .level6 div.cityimg {
        background:url(city_3_r.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level7 div.cityimg,
#island #container #mainview #cities .level8 div.cityimg,
#island #container #mainview #cities .level9 div.cityimg {
        background:url(city_4_r.gif) no-repeat 11px 13px;
}
#island #container #mainview #cities .level10 div.cityimg,
#island #container #mainview #cities .level11 div.cityimg,
#island #container #mainview #cities .level12 div.cityimg {
        background:url(city_5_r.gif) no-repeat 8px 13px;
}
#island #container #mainview #cities .level13 div.cityimg,
#island #container #mainview #cities .level14 div.cityimg,
#island #container #mainview #cities .level15 div.cityimg {
        background:url(city_6_r.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level16 div.cityimg,
#island #container #mainview #cities .level17 div.cityimg {
        background:url(city_7_r.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level18 div.cityimg,
#island #container #mainview #cities .level19 div.cityimg,
#island #container #mainview #cities .level20 div.cityimg,
#island #container #mainview #cities .level21 div.cityimg,
#island #container #mainview #cities .level22 div.cityimg,
#island #container #mainview #cities .level23 div.cityimg,
#island #container #mainview #cities .level24 div.cityimg {
        background:url(city_8_r.gif) no-repeat 2px 4px;
}



#island #container #mainview #cities .city { display:block; position:absolute; width:64px; height:64px; }
#island #container #mainview #cities .city .cityimg { display:block; position:absolute; left:0px; bottom:0px; background-image:url(city_red.gif); width:64px; height:63px;}

/* Eigene St?dte */

#island #container #mainview #cities .level1 div.ownCityImg {
        display:block;
        position:absolute;
        left:0px;
        bottom:0px;
        background:url(city_1_b.gif) no-repeat;
        width:64px;
        height:63px;
        }


#island #container #mainview #cities .level1 div.ownCityImg {
        background:url(city_1_b.gif) no-repeat 13px 10px;
}

#island #container #mainview #cities .level2 div.ownCityImg,
#island #container #mainview #cities .level3 div.ownCityImg {
        background:url(city_2_b.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level4 div.ownCityImg,
#island #container #mainview #cities .level5 div.ownCityImg,
#island #container #mainview #cities .level6 div.ownCityImg {
        background:url(city_3_b.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level7 div.ownCityImg,
#island #container #mainview #cities .level8 div.ownCityImg,
#island #container #mainview #cities .level9 div.ownCityImg {
        background:url(city_4_b.gif) no-repeat 11px 13px;
}
#island #container #mainview #cities .level10 div.ownCityImg,
#island #container #mainview #cities .level11 div.ownCityImg,
#island #container #mainview #cities .level12 div.ownCityImg {
        background:url(city_5_b.gif) no-repeat 8px 13px;
}
#island #container #mainview #cities .level13 div.ownCityImg,
#island #container #mainview #cities .level14 div.ownCityImg,
#island #container #mainview #cities .level15 div.ownCityImg {
        background:url(city_6_b.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level16 div.ownCityImg,
#island #container #mainview #cities .level17 div.ownCityImg {
        background:url(city_7_b.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level18 div.ownCityImg,
#island #container #mainview #cities .level19 div.ownCityImg,
#island #container #mainview #cities .level20 div.ownCityImg,
#island #container #mainview #cities .level21 div.ownCityImg,
#island #container #mainview #cities .level22 div.ownCityImg,
#island #container #mainview #cities .level23 div.ownCityImg,
#island #container #mainview #cities .level24 div.ownCityImg {
        background:url(city_8_b.gif) no-repeat 2px 4px;
}



#island #container #mainview #cities .city .ownCityImg {
        display:block;
        position:absolute;
        left:0px;
        bottom:0px;
        background:url(city_1_b.gif) no-repeat;
        width:64px;
        height:63px;
        }

/* Alliierte St?dte */




#island #container #mainview #cities .level1 div.allyCityImg {
        background:url(city_1_g.gif) no-repeat 13px 10px;
}

#island #container #mainview #cities .level2 div.allyCityImg,
#island #container #mainview #cities .level3 div.allyCityImg {
        background:url(city_2_g.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level4 div.allyCityImg,
#island #container #mainview #cities .level5 div.allyCityImg,
#island #container #mainview #cities .level6 div.allyCityImg {
        background:url(city_3_g.gif) no-repeat 13px 13px;
}
#island #container #mainview #cities .level7 div.allyCityImg,
#island #container #mainview #cities .level8 div.allyCityImg,
#island #container #mainview #cities .level9 div.allyCityImg {
        background:url(city_4_g.gif) no-repeat 11px 13px;
}
#island #container #mainview #cities .level10 div.allyCityImg,
#island #container #mainview #cities .level11 div.allyCityImg,
#island #container #mainview #cities .level12 div.allyCityImg {
        background:url(city_5_g.gif) no-repeat 8px 13px;
}
#island #container #mainview #cities .level13 div.allyCityImg,
#island #container #mainview #cities .level14 div.allyCityImg,
#island #container #mainview #cities .level15 div.allyCityImg {
        background:url(city_6_g.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level16 div.allyCityImg,
#island #container #mainview #cities .level17 div.allyCityImg {
        background:url(city_7_g.gif) no-repeat 4px 7px;
}
#island #container #mainview #cities .level18 div.allyCityImg,
#island #container #mainview #cities .level19 div.allyCityImg,
#island #container #mainview #cities .level20 div.allyCityImg,
#island #container #mainview #cities .level21 div.allyCityImg,
#island #container #mainview #cities .level22 div.allyCityImg,
#island #container #mainview #cities .level23 div.allyCityImg,
#island #container #mainview #cities .level24 div.allyCityImg {
        background:url(city_8_g.gif) no-repeat 2px 4px;
}


/*

#island #container #mainview #cities .level1 div.allyCityImg {
        background:url(img/island/city_1_green.gif) no-repeat 17px 7px;
}

#island #container #mainview #cities .level2 div.allyCityImg {
        background:url(img/island/city_2_green.gif) no-repeat 17px 7px;
}

#island #container #mainview #cities .level3 div.allyCityImg {
        background:url(img/island/city_3_green.gif) no-repeat 17px 7px;
}

#island #container #mainview #cities .level4 div.allyCityImg {
        background:url(img/island/city_4_green.gif) no-repeat 17px 7px;
}

#island #container #mainview #cities .level5 div.allyCityImg {
        background:url(img/island/city_5_green.gif) no-repeat 17px 7px;
}

#island #container #mainview #cities .level6 div.allyCityImg {
        background:url(img/island/city_6_green.gif) no-repeat 6px 7px;
}

#island #container #mainview #cities .level7 div.allyCityImg {
        background:url(img/island/city_7_green.gif) no-repeat 6px 7px;
}

#island #container #mainview #cities .level8 div.allyCityImg {
        background:url(img/island/city_8_green.gif) no-repeat 2px 7px;
}*/

#island #container #mainview #cities .city .allyCityImg {
        display:block;
        position:absolute;
        left:0px;
        bottom:0px;
        background:url(city_1_g.gif) no-repeat;
        width:64px;
        height:63px;
        }


#island #container #mainview #cities .city .allyCityImg { display:block; position:absolute; left:0px; bottom:0px; background-image:url(city_gre.gif); width:64px; height:63px;}
#island #container #mainview #cities .city .buildCityImg { display:block; position:absolute; left:0px; bottom:0px; background-image:url(city_con.gif); width:64px; height:63px;}
#island #container #mainview #cities .city .textLabel {
        display:block;
        position:absolute;
        top:60px;        left:-4px;
        text-align:center;
        line-height:23px;        height:23px;
        background-image:url(scroll_b.gif);
        padding:0 16px;
        white-space:nowrap;
        font-size:10px;
        color:#50110a;
        }
#island #container #mainview #cities .city .textLabel .before {
        display:block;
        position:absolute;
        top:0; left:0;
        width:12px; height:23px;
        background-image:url(scroll_l.gif);
        }
#island #container #mainview #cities .city .textLabel .after {
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:12px;
        height:23px;
        background-image:url(scroll_r.gif);
        }

#island #container #mainview #cities .city .textLabel .palm {
        background-image:url(icon-pal.gif);
        display:block;
        position:absolute;
        top:0; left:0;
        height:16px;
        width:16px;
}

#island #container #mainview #cities .city .textLabel .disabled {
        background-image:url(disabled.gif);
        display:block;
        position:absolute;
        top:0; left:0;
        height:16px;
        width:16px;
}

#island #container #mainview #cities .city .textLabel .vacation {
        color:#336633;
}

#island #container #mainview #cities .city .textLabel .inactivity {
        color:#999999;
}


#island #container #mainview #islandfeatures li {        position:absolute; z-index:500;}
#island #container #mainview #islandfeatures .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
#island #container #mainview #islandfeatures a {        display:block;        }
#island #container #mainview #islandfeatures .wood {        left:435px; top:160px;        }
#island #container #mainview #islandfeatures .wood a {        width:45px; height:41px; background-image:url(resource.gif);        }
#island #container #mainview #islandfeatures .marble {        left:273px; top:121px;        }
#island #container #mainview #islandfeatures .marble a {        width:60px; height:63px; background-image:url(resourcf.gif);        }
#island #container #mainview #islandfeatures .wine {        left:159px; top:145px;        }
#island #container #mainview #islandfeatures .wine a {        width:93px; height:48px; background-image:url(resourcf.gif);        }
#island #container #mainview #islandfeatures .crystal {        left:307px; top:281px;        }
#island #container #mainview #islandfeatures .crystal a {        width:56px; height:43px; background-image:url(resourcg.gif);        }
#island #container #mainview #islandfeatures .sulfur {        left:548px; top:148px;        }
#island #container #mainview #islandfeatures .sulfur a {        width:78px; height:46px; background-image:url(resourcg.gif);        }

#island #container #mainview #islandfeatures #wonder { position:absolute; width:120px; height:200px; left:320px; top:60px; background-position:bottom center; background-repeat:no-repeat; z-index:100;}
#island #container #mainview #islandfeatures #wonder a { display:block; width:80px; height:120px; margin-left:20px; margin-top:80px; cursor:pointer;}
#island #container #mainview #islandfeatures .wonder1 { background-image:url(wonder1_.gif); }
#island #container #mainview #islandfeatures .wonder2 { background-image:url(wonder2_.gif); }
#island #container #mainview #islandfeatures .wonder3 { background-image:url(wonder3_.gif); }
#island #container #mainview #islandfeatures .wonder4 { background-image:url(wonder4_.gif); }
#island #container #mainview #islandfeatures .wonder5 { background-image:url(wonder5_.gif); }
#island #container #mainview #islandfeatures .wonder6 { background-image:url(wonder6_.gif); }
#island #container #mainview #islandfeatures .wonder7 { background-image:url(wonder7_.gif); }
#island #container #mainview #islandfeatures .wonder8 { background-image:url(wonder8_.gif); }


/*--------------------------------------------- VIEW townhall Styles */

/* sliced into seperate file */

/*--------------------------------------------- VIEW resources Styles */

/* sliced into seperate file */


/*-------------------------------------------- VIEW City Styles */

#city #container #mainview {
        padding:0;
        height:440px;
        }

#city #container .phase1 {
    background-image:url(city_pha.jpg);
}
#city #container .phase2,
#city #container .phase3 {
    background-image:url(city_pha.jpg);
}
#city #container .phase4,
#city #container .phase5,
#city #container .phase6 {
    background-image:url(city_phb.jpg);
}
#city #container .phase7,
#city #container .phase8,
#city #container .phase9 {
    background-image:url(city_phb.jpg);
}
#city #container .phase10,
#city #container .phase11,
#city #container .phase12 {
    background-image:url(city_phb.jpg);
}
#city #container .phase13,
#city #container .phase14,
#city #container .phase15 {
    background-image:url(city_phb.jpg);
}
#city #container .phase16,
#city #container .phase17 {
    background-image:url(city_phb.jpg);
}
#city #container .phase18,
#city #container .phase19
 {
    background-image:url(city_phb.jpg);
}
#city #container .phase20
 {
    background-image:url(city_phb.jpg);
}


#city #container #mainview #locations {
        position:relative;
        margin:0;
        height:440px;
        overflow:hidden;
        }
#city #container #mainview #locations li {
        position:absolute;
        width:86px;
        height:43px;
        }
#city #container #mainview #locations .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }
#city #container #mainview ul#locations li { z-index:300;        }
#city #container #mainview ul#locations li.wall { z-index:100; }

#city #container #mainview #locations #position0 {        left:356px; top:182px;}
#city #container #mainview #locations #position1 {        left:227px; top:351px;        }
#city #container #mainview #locations #position2 {        left:539px; top:342px;        }
#city #container #mainview #locations #position3 {        left:617px; top:260px;        }
#city #container #mainview #locations #position4 {        left:485px; top:258px;        }
#city #container #mainview #locations #position5 {        left:323px; top:283px;        }
#city #container #mainview #locations #position6 {        left:136px; top:262px;        }
#city #container #mainview #locations #position7 {        left:11px; top:226px;         }
#city #container #mainview #locations #position8 {        left:84px; top:144px;        }
#city #container #mainview #locations #position9 {        left:225px; top:187px; }
#city #container #mainview #locations #position10 {        left:466px; top:141px;         }
#city #container #mainview #locations #position11 {        left:580px; top:114px;         }
#city #container #mainview #locations #position12 {        left:373px; top:65px; }
#city #container #mainview #locations #position13 {        left:253px; top:82px; }
#city #container #mainview #locations #position14 {        left:501px; top:13px;         }

#city #container #mainview #locations li a{
        display:block;
        position:absolute;
        bottom:0px; left:-2px;
        width:90px;
        height:70px;
        }
#city #container #mainview #locations .buildingGround .flag {
        position:absolute;
        bottom:18px; left:36px;
        width:30px;
        height:40px;
        background-repeat:no-repeat;
        background-position:0px 0px;
        }
#city #container #mainview #locations .land .flag {        background-image:url(flag_red.gif);        }
#city #container #mainview #locations .shore .flag {        background-image:url(flag_blu.gif);        }
#city #container #mainview #locations .wall .flag {        background-image:url(flag_yem.gif);        }

#city #container #mainview #locations li .buildingimg {        position:absolute;        }
#city #container #mainview #locations li .constructionSite {        position:absolute; }
#city #container #mainview #locations li .constructionSite { left:-20px; top:-30px; width:114px; height:81px; background-image:url(construc.gif);        }
#city #container #mainview #locations li .timetofinish {
        z-index:500;
        position:absolute;
        top:50px;        left:0px;
        text-align:center;
        line-height:23px;        height:23px;
        background-image:url(scroll_b.gif);
        padding:0 16px;
        white-space:nowrap;
        font-size:10px;
        color:#50110a;
        }
#city #container #mainview #locations li .timetofinish .before {
        display:block;
        position:absolute;
        top:0; left:0;
        width:12px; height:23px;
        background-image:url(scroll_l.gif);
        }
#city #container #mainview #locations li .timetofinish .after {
        display:block; position:absolute; top:0; right:0; width:12px; height:23px; background-image:url(scroll_r.gif);
        }
#city #container #mainview #locations li .timetofinish .textLabel {
        position:absolute; left:-9999px; width:1px; height:1px;        overflow:hidden;
        }


.militaryAdvisorTabs li em {

        }
.militaryAdvisorTabs li a {
        vertical-align:bottom;
}

.militaryAdvisorTabs li a em {

}


.militaryAdvisorTabs .selected a,
.militaryAdvisorTabs a:hover {
/*        background:transparent url(layout/bg_tabs_single.jpg) no-repeat scroll 0px 4px;
        color:#906646;*/
}


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

NEUE KAMPFBERICHTE

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

#militaryAdvisorReportView #mainview .content table#result {
        width:100%;
}

#militaryAdvisorReportView #mainview .content table#result td{
        padding:5px 0px;
        text-align:center;
}

#militaryAdvisorReportView #mainview .content table#ergebnis {
        width:100%;
        border-collapse:collapse;
}


#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.battle {
        font-weight:bold;
        font-size:14px;
        vertical-align:middle
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.leftover {
        font-weight:bold;
        text-align:center;
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.details {
        font-weight:bold;
        font-size:11px;
        text-align:center
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.details a {
        text-decoration:underline;
}

#militaryAdvisorReportView #mainview .content table#ergebnis td{
        padding:5px 0px;
        text-align:center;
}

#militaryAdvisorReportView #mainview .content table#ergebnis a {
        color:#542c0f;
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td{
        background-color:#fce9c5;
        text-align:left;
        border-bottom:2px solid #fdf7dd;

}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.sum {
        padding-left:5px;
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.winner {
        font-weight:bold;
        font-size:14px;
        vertical-align:middle;
        text-align:center;
        background-color:#542C0F;
        color:#FCE9C5;
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.own {
        color:#009736;
}

#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td span.loss {
        color:#D20000;
        font-weight:bold;
}
#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.shortdesc {
        text-align:center;
}

#militaryAdvisorReportView #mainview .content table#ergebnis ul.resources {
        text-align:center;
}


#militaryAdvisorReportView #mainview .content table#ergebnis ul.resources li {
        display:inline;
}


#militaryAdvisorReportView #mainview .content table#ergebnis tr.rep td.units {
        padding-left:5px;
}



#militaryAdvisorReportView #mainview .content table#result td img,
#militaryAdvisorReportView #mainview .content table#ergebnis td img {
        vertical-align:middle;
}

#militaryAdvisorReportView #mainview .content table#result {
        margin:0px 0px;
}

#militaryAdvisorReportView #mainview .content table#result a {
        text-decoration:none;
        color:#542c0f;
}

#militaryAdvisorReportView #mainview .content table#result a:hover {
        text-decoration:underline;
        color:#542c0f;
}

#militaryAdvisorReportView #mainview .content table#result th {
        background-color:#FAEAC6;
        color:#906646;
        font-weight:bold;
        padding:3px 6px;
}

#militaryAdvisorReportView #mainview .content table#result th.attacker,
#militaryAdvisorReportView #mainview .content table#result th.defender {
        text-align:center;
        font-weight:normal;
        background-color:#FADFAB;
}

#militaryAdvisorReportView #mainview .content table#result td.section {
        text-align:left;
        padding:4px 0px 4px 5px;
        background-color:#542c0F;
        color:#fce9c5;
        font-weight:bold;
}

#militaryAdvisorReportView #mainview .content table#result td.value {
        width:30px;
}

#militaryAdvisorReportView #mainview .content table#result td.special {
        text-align:left;
}


#militaryAdvisorReportView #mainview .content table#result td.loot {
        padding-left:10px;
}

#militaryAdvisorReportView #mainview .content table#result td.loot span.round {
        font-weight:bold;
}

#militaryAdvisorReportView #mainview .contentBox01h h3.header a:link,
#militaryAdvisorReportView #mainview .contentBox01h h3.header a:visited,
#militaryAdvisorReportView #mainview .contentBox01h h3.header a:active
{
        text-decoration:none;
        color:#542c0f;
}

#militaryAdvisorReportView #mainview .contentBox01h h3.header a:hover {
        text-decoration:underline;
}



#militaryAdvisorReportView #mainview .content table#result td {
        background-color:#FCE9C5;
        border-bottom:2px solid #fdf7dd;
}

#militaryAdvisorReportView #mainview .content table#result td.loot {
        text-align:left;
}

#militaryAdvisorReportView #mainview .content table#result td.winner {
        background-color:#542C0F;
        color:#FCE9C5;
        font-size:14px;
        font-weight:bold;
}

#militaryAdvisorReportView #mainview .content table#result ul.resources {
        text-align:left;
        padding-left:30px;
}

#militaryAdvisorReportView #mainview .content table#result ul.resources li {
        display:inline;
}
@charset "utf-8";
/* CSS Document */

/* ------------------------------------------- Kontor/Branch Office */

#branchOffice #container #mainview .tablekontor td {
        text-align:center;
}

#branchOffice .tablekontor {
        width:100%;
        margin:0px auto 10px auto;
        color:#612d04;
        font:bold 12px Arial, Helvetica, sans-serif;
        border: 0px solid #e4b873;
        background-color:#fdf7dd;
        }
#branchOffice #container #mainview table.tablekontor tr {
        font-weight:normal;
        }
#branchOffice #container #mainview table.tablekontor tr.alt {
        background-color:#fdf1d4;
        }
#branchOffice #container #mainview .content table.tablekontor th {
        background-color:#faeac6;
        text-align:center;
        }

#branchOffice #container #mainview table.tablekontor2 th {
        background-color:#faeac6;
        text-align:center;
        height:24px;
        padding:4px;
        font-weight:bold;
        }

#branchOffice #container #mainview table.tablekontor th {
        height:24px;
        padding:4px;
        font-weight:bold;
        background-color:#faeac6;
        }
#branchOffice #container #mainview table.tablekontor td.icon {
        width:40px;
        margin:auto;
}

#branchOffice #container #mainview table.tablekontor td.select {
        text-align:left;
        padding-left:20px;
        width:160px;
}


#branchOffice #container #mainview #contentBox01 h3.header {
        background-image:url(bg_contf.gif);
        height:20px;
        padding:10px 6px 0px 6px; margin:0;
        color:#612d04;
        font:bold 12px Arial, Helvetica, sans-serif;
        text-align:center;
        }


/***/

#branchOffice #container #mainview .content div {
        text-align:center;
        padding:0px 0px;
        }


#branchOffice td.paginator a{
        color:#542c0f;
}


/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
.yui-overlay,
.yui-panel-container {
    visibility:hidden;
    position:absolute;
    z-index: 2;
}

.yui-tt {
    visibility:hidden;
    position:absolute;
    color:#333;
    background-color:#FDFFB4;
    font-family:arial,helvetica,verdana,sans-serif;
    padding:2px;
    border:1px solid #FCC90D;
    font:100% sans-serif;
    width:auto;
}

/*
    PLEASE NOTE: The <DIV> element used for a Tooltip's shadow is appended
    to its root element via JavaScript once it has been rendered.  The
    code that creates the shadow lives in the Tooltip's public "onRender"
    event handler that is a prototype method of YAHOO.widget.Tooltip.
    Implementers wishing to remove a Tooltip's shadow or add any other markup
    required for a given skin for Tooltip should override the "onRender" method.
*/

.yui-tt-shadow {
    display: none;
}

* html body.masked select {
    visibility:hidden;
}

* html div.yui-panel-container select {
    visibility:inherit;
}

* html div.drag select {
    visibility:hidden;
}

* html div.hide-select select {
    visibility:hidden;
}

.mask {
    z-index: 1;
    display:none;
    position:absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
    background-color:#CCC;
}

/*

There are two known issues with YAHOO.widget.Overlay (and its subclasses) that
manifest in Gecko-based browsers on Mac OS X:

    1) Elements with scrollbars will poke through Overlay instances floating
       above them.

    2) An Overlay's scrollbars and the scrollbars of its child nodes remain
       visible when the Overlay is hidden.

To fix these bugs:

    1) The "overflow" property of an Overlay instance's root element and child
       nodes is toggled between "hidden" and "auto" (through the application
       and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes)
       as its "visibility" configuration property is toggled between
       "false" and "true."

    2) The "display" property of <SELECT> elements that are child nodes of the
       Overlay instance's root element is set to "none" when it is hidden.

PLEASE NOTE:

    1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are
       applied only for Gecko on Mac OS X and are added/removed to/from the
       Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and
       "showMacGeckoScrollbars" methods of YAHOO.widget.Overlay.

    2) There may be instances where the CSS for a web page or application
       contains style rules whose specificity override the rules implemented by
       the Container CSS files to fix this bug.  In such cases, is necessary to
       leverage the provided "hide-scrollbars" and "show-scrollbars" classes to
       write custom style rules to guard against this bug.

** For more information on this issue, see:

   + https://bugzilla.mozilla.org/show_bug.cgi?id=187435
   + SourceForge bug #1723530

*/

.hide-scrollbars,
.hide-scrollbars * {

    overflow: hidden;

}

.hide-scrollbars select {

    display: none;

}

.show-scrollbars {

    overflow: auto;

}

.yui-panel-container.show-scrollbars {

    overflow: visible;

}

.yui-panel-container.show-scrollbars .underlay {

    overflow: auto;

}

.yui-panel-container.focused {

}


/* Panel underlay styles */

.yui-panel-container .underlay {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}

.yui-panel-container.matte {

    padding: 3px;
    background-color: #fff;

}

.yui-panel-container.shadow .underlay {

/*    top: 3px;
    bottom: -3px;
    right: -3px;
    left: 3px;
    background-color: #000;
    opacity: .12;
    filter: alpha(opacity=12);  /* For IE */*/

}

/* Gesamtbreite des TT */

#port #container #mainview .yui-panel {
        width:120px;
}

.yui-panel {
    visibility:hidden;
    border-collapse:separate;
    position:relative;
    left:0;
    top:0;
    background-color:#fdf7dd;
    border:1px solid #e4b783;
    z-index:1;
    overflow:hidden;
}

.yui-panel .hd {
    background-color:transparent;
        background:url(bg-panel.gif) repeat-x;
    color:#7E4A21;
    font-size:100%;
    line-height:100%;
    border-bottom:1px solid #f3ddb2;
    font-weight:bold;
    padding:4px;
    white-space:nowrap;
}

.yui-panel .bd {
    overflow:hidden;
    padding:4px;
}

.yui-panel .bd p {
    margin:0 0 1em;
}

.yui-panel .container-close {
    position:absolute;
    top:5px;
    right:4px;
    z-index:6;
    height:12px;
    width:12px;
    margin:0px;
    padding:0px;
    background:url(close12_.gif) no-repeat;
    cursor:pointer;
    visibility:inherit;
}

.yui-panel .ft {
    padding:4px;
    overflow:hidden;
}

.yui-simple-dialog .bd .yui-icon {
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    margin-right:10px;
    float:left;
}

.yui-simple-dialog .bd span.blckicon {
    background: url("blck16_1.gif") no-repeat;
}

.yui-simple-dialog .bd span.alrticon {
    background: url("alrt16_1.gif") no-repeat;
}

.yui-simple-dialog .bd span.hlpicon {
    background: url("hlp16_10.gif") no-repeat;
}

.yui-simple-dialog .bd span.infoicon {
    background: url("info16_1.gif") no-repeat;
}

.yui-simple-dialog .bd span.warnicon {
    background: url("warn16_1.gif") no-repeat;
}

.yui-simple-dialog .bd span.tipicon {
    background: url("tip16_10.gif") no-repeat;
}

.yui-dialog .ft,
.yui-simple-dialog .ft {
    padding-bottom:5px;
    padding-right:5px;
    text-align:right;
}

.yui-dialog form,
.yui-simple-dialog form {
    margin:0;
}

.button-group button {
    font:100 76% verdana;
    text-decoration:none;
    background-color: #E4E4E4;
    color: #333;
    cursor: hand;
    vertical-align: middle;
    border: 2px solid #797979;
    border-top-color:#FFF;
    border-left-color:#FFF;
    margin:2px;
    padding:2px;
}

.button-group button.default {
    font-weight:bold;
}

.button-group button:hover,
.button-group button.hover {
    border:2px solid #90A029;
    background-color:#EBF09E;
    border-top-color:#FFF;
    border-left-color:#FFF;
}

.button-group button:active {
    border:2px solid #E4E4E4;
    background-color:#BBB;
    border-top-color:#333;
    border-left-color:#333;
}.yui-navset .yui-nav li a, .yui-navset .yui-content {

        /*color:#FFF1DC;*/
        color:#000;
          /* label and content borders */
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-content {
        background:url(bg_tabs1.jpg) no-repeat 0px 4px;
        color:#906646;

         /* active tab, tab hover, and content bgcolor */
}

.yui-navset .yui-nav li em {
        padding:15px 0px 0px 0px;  /* tab padding */
        text-align:center;
        font-weight:bold;
        width:199px;
}



/* default space between tabs */
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
        height:32px;
        width:199px;
        margin: 0px 0px 0px 20px;
    /*margin:0 0.5em 0 0;  horizontal tabs */
}