/* --------------------------------------------------------------------------------------
+
+   SATURIZED - The Interactive Agency
+
+   = MyCity Forums
+
-------------------------------------------------------------------------------------- */

/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= Layout
-------------------------------------------------------------------------------------- */
html,
body { height: 100%;}
body { background: #a5bfd6 url('../images/background.jpg') 50% 50% no-repeat; min-height: 640px;}

/* Content -*/
#wrapper{ width: 820px; margin: 0 auto; position: relative; height: 380px; top: 50%; margin-top: -190px; }
#ui-overlay{ display: none; position: absolute; display: block; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; top: 0; background: #000; z-index: 99;}

    /* Main menu--*/
    #menu-main{ margin: 80px 10px 0 10px;}
        #menu-main li,
        #menu-main li a { float: left; display: block; position: relative; height: 180px;}
            #menu-main li a * { display: none;}
        #menu-main li { margin: 0 10px; width: 246px;}

            * html #menu-main li { margin: 0 !important; width: 226px !important;}
        #menu-main li a { background: #c0c0c0; background: url('../images/main-menu-sprite.png') no-repeat; margin: 0 10px; width: 226px; z-index: 10; }
            #menu-main li a:after { content: " "; background: url('../images/main-menu-item-shadow.png') no-repeat; display: block; bottom: -48px; position: absolute; width: 264px; height: 24px; left: -10px;}

            /* Menu sprites --*/
            #menu-main li.tech a { background-position: 0 0;}
            #menu-main li.common a { background-position: 0 -180px;}
            #menu-main li.military a { background-position: 0 -360px;}

            #menu-main li.tech a.selected,
            #menu-main li.tech a.hover,
            #menu-main li.tech:hover a { background-position: -226px 0 !important;}
            #menu-main li.common a.selected,
            #menu-main li.common a.hover,
            #menu-main li.common:hover a { background-position: -226px -180px !important;}
            #menu-main li.military a.selected,
            #menu-main li.military a.hover,
            #menu-main li.military:hover a { background-position: -226px -360px !important;}

    /* Friends menu --*/
    #menu-friends { list-style: none; position: absolute; z-index: 10; margin: 60px 286px 0 286px;}
        #menu-friends li,
        #menu-friends li a { float: left; display: block; width: 114px; height: 87px; text-indent: -99999px; position: relative; z-index: 9;}
        #menu-friends li{ margin: 0 5px;}
        #menu-friends li a { background: url('../images/menu-friends.png') no-repeat;}
            #menu-friends li a:after { content: " "; background: url('../images/menu-friends-shadow.png') no-repeat; display: block; bottom: -12px; position: absolute; width: 111px; height: 22px; left: 4px; z-index: 1;}

        /* Menu sprites*/
        #menu-friends li.vesti a{ background-position: top left;}
            #menu-friends li.vesti a:hover{ background-position: bottom left;}
        #menu-friends li.igrice a{ background-position: top right;}
            #menu-friends li.igrice a:hover{ background-position: bottom right;}

/* Footer -*/
footer { display: block; position: absolute; bottom: 0; width: 100%; height: 18px; background: url('../images/footer-bg.png') repeat-x; padding: 18px 0 6px;}
    footer > * { color: #8a8a8a; font-size: 0.75em; font-weight: normal;}
    footer a { color: #5e7f9c; font-weight: bold;}
    footer h2,
    footer p { position: absolute;}
    footer h2 { left: 1em;}
    footer p { right: 1em;}

/*
= Mobile devices
-------------------------------------------------------------------------------------- */
/*
@media screen and (max-width: 800px) {
    #wrapper{ margin: 0; display: block; height: auto; width: 100%; top: 0;}
    #menu-main{ display: block; margin: 0;}
        #menu-main li,
        #menu-main li a{ display: block; float: none; height: auto; background: #fff;}
            #menu-main li a{ width: 100%; height: 3.2em;}
            #menu-main li a *{ display: block;}
            #menu-main li a:after{ display: none;}
}
*/
@media all and (orientation:portrait) {

}
@media all and (orientation:landscape) {

}
@media screen and (max-device-width: 480px) {

/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/*
= Print
-------------------------------------------------------------------------------------- */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}