/**
 *  Stylesheet for Velopa Citystyle Portal (homepage only)
 *  ===============================================================
 *  $Revision: 1.1.2.4 $
 *  ===============================================================
 *
 *  global styleguide:
 *
 *  colors {
 *    white : #fff;
 *    black : #000;
 *    red   : #9f1d38;
 *    blue  : #8f95a4;
 *    gray  : #a6aab6;
 *    green : #4c555e;
 *  }
 *
 *  fonts {
 *    headers : Frutiger;
 *    text    : Arial, Helvetica, sans-serif;
 *  }
 */


/**
 * GLOBAL HTML ELEMENTS
 *
 * default html elements, such as html, body, img, p, a.
 */

/* links */
a { padding: 0 0 1px 0; color: white; font-weight: bold; text-decoration: none; }
a:visited { }
a:hover { color: #9f1d38; }
a:active { color: #9f1d38; }
a:focus, a:hover, a:active { outline: none; }

/* headers */
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; font-family: Arial, Helvetica, sans-serif; color: white; }
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1em; }

/* images */
img, a img { border: 0; }

/* paragraphs */
p { }

/* lists and definition lists */
ul { }
    ul li {}

dl {}
    dl dt {}
    dl dd {}

/* tables */
table { font-size: 1em; vertical-align: top; border-collapse: collapse; }
    table thead { }
    table tbody { }

    table td, table th { font-size: 1em; line-height: 1.6em; text-align: left; }

/* form elements, labels & fieldsets */
form { margin: 0; }

input, select, textarea { border: 1px solid #4c555e; padding: .2em 0; font: normal 1em Arial, Helvetica, sans-serif; background-color: #e2e3e7; }
    input:focus, textarea:focus { border-style: inset; }
    input.disabled { cursor: pointer; }

fieldset { border: 0; padding: 0; }
    fieldset legend { margin: 0; padding: 0; color: black; }
    fieldset form { margin-left: 0 !important; }

label { cursor: pointer; }
    label:hover { color: #4c555e; }

iframe { min-height: 35em; border: 0px; }

object, object:focus { outline: none; }

ins { text-decoration: none; }

/**
 * BASIC PAGE LAYOUT
 *
 * describes the default page layout
 */

html, body { margin: 0; padding: 0; border: 0; background: #9095a4 url(/images/citystyle_portal/bg_portal.gif) repeat-x left top; }
body { font: normal .7em/1.6em Arial, Helvetica, sans-serif; color: black; }

#body { position: relative; margin: 0 auto; width: 984px; }
    #container { }
        #content { padding: 240px 0 0 0; }

        #header { position: absolute; top: 0; left: 0; width: 100%; height: 233px; }
            #header h2 { position: absolute; top: 5px; left: 0; width: 84px; height: 73px; background: transparent url(/images/citystyle_portal/logo.gif) no-repeat left top; }
                #header h2 a { display: block; width: 100%; height: 100%; }
                    #header h2 a span { visibility: hidden; }

            #logo-omniplay { position: absolute; top: 15px; right: 5px; width: 72px; height: 63px; background: transparent url(/images/citystyle_portal/logo_omniplay.gif) no-repeat left top; }
                #logo-omniplay a { display: block; width: 100%; height: 100%; }
                    #logo-omniplay a span { font-size: 0; visibility: hidden; }

            #headervisual { position: absolute; top: 84px; left: 0; width: 983px; height: 149px; background-color: transparent; background-repeat: no-repeat; background-position: left top; }

        #footer { position: relative; clear: both; float: left; padding: 1em 0 3em 0; width: 100%; }
            #footer #extra-information { position: absolute; top: 0; left: 0; }
                #footer #extra-information p { color: white; font-size: 1.2em; margin: 0; padding: 0; }
                    #footer #extra-information p a { text-decoration: underline; }
            #footer #footernav { position: absolute; top: 4px; right: 1px; }
                #footer #footernav ul { float: right; margin: 0; padding: 0; list-style-type: none; }
                    #footer #footernav ul li { float: left; margin: 0 0 0 10px; padding: 0 0 0 15px; border-left: 1px solid white; line-height: 1; }
                    #footer #footernav ul li.first-item { margin-left: 0; padding-left: 0; border-left: 0; }

#blocks { float: left; width: 100%; }
    .block { position:relative; float: left; margin: 0 1px 0 0; min-height: 300px; background-color: #e5e5e5; }
        .block:hover { background-color: #efefef; }
        .block .block-title { height: 77px; background-color: #c2c3c8; }
            .block .block-title h2 { color: black; margin: 0; padding: 10px 5px; }
        .block .block-body { min-height: 114px; }
            .block .block-body p { margin: 0; padding: 5px; }
        .block .block-link { position:absolute; bottom:25px; display: block; color: black; text-decoration: underline; padding: 2px 5px; border-top: 1px dotted #c2c3c8; }
            .block .block-link:hover { text-decoration: none; }
        .block .menu-items { position: absolute; bottom:0; width:99%; color: black; margin: 0 0 3px 0; border: 1px solid #c2c3c8; height: 18px; background-color: white; }
            .block .menu-items h3 { color: black; font-weight: normal; margin: 0; padding: 0 5px; cursor: pointer; }
            .block .menu-items ul { display: none; position: absolute; top: -139px; left: -1px; width: 100%; height: 138px; margin: 0; padding: 0; border: 1px solid #c2c3c8; list-style-type: none; background-color: white; overflow: auto; opacity: .9; }
                .block .menu-items ul li { padding: 2px 5px 2px 12px; border-bottom: 1px solid #e5e5e5; background: transparent url(/images/citystyle_portal/stripe.gif) no-repeat 5px 11px; }
                    .block .menu-items ul li:hover { background-color: #efefef; }
                    .block .menu-items ul li a { color: black; }
                    .block .menu-items ul li ul { position: relative; top: 0; border: 0; width: auto; height: auto; }
                        .block .menu-items ul li ul li { padding: 0 0 0 22px; border: 0; background-position: 15px 9px; }
                            .block .menu-items ul li ul li a { font-weight: normal; }
                            	.block .menu-items ul li ul li a:hover { text-decoration: underline; }
                            .block .menu-items ul li:hover ul li { background-color: #efefef; }
            .block .menu-items:hover ul { display: block; }

    .block-1-column .block { width: 983px; }
    .block-1-column .block .block-title { height: 59px; }
    .block-1-column .block .block-body { min-height: 132px; }
    .block-1-column .block .menu-items { margin: 0 10px 3px 10px; }
    .block-1-column .block .menu-items ul { width: 961px; }
    .block-1-column .block .menu-items ul li ul { width: auto; }
    .block-2-column .block { width: 491px; }
    .block-2-column .block .block-title { height: 59px; }
    .block-2-column .block .block-body { min-height: 132px; }
    .block-2-column .block .menu-items { margin: 0 10px 3px 10px; }
    .block-2-column .block .menu-items ul { width: 469px; }
    .block-2-column .block .menu-items ul li ul { width: auto; }
    .block-3-column .block { width: 327px; }
    .block-3-column .block .block-title { height: 59px; }
    .block-3-column .block .block-body { min-height: 132px; }
    .block-3-column .block .menu-items { margin: 0 10px 3px 10px; }
    .block-3-column .block .menu-items ul { width: 305px; }
    .block-3-column .block .menu-items ul li ul { width: auto; }
    .block-4-column .block { width: 245px; }
    .block-5-column .block { width: 195px; }
    .block-6-column .block { width: 163px; }

/* default and rich menu */
.menu_default { margin: 0; padding: .5em 0; list-style-type: none; }
    .menu_default li { margin-bottom: .5em; }
        .menu_default li a { padding-left: 10px; background: url(/images/a_bul010_cs.gif) left center no-repeat; }
            .menu_default li a:hover { background-image: url(/images/a_bul011_cs.gif); }

/**
 * GLOBAL CLASSES
 *
 * global classes are used for very common styles, such as floating, coloring or clearing. Often used in combination, such as: <a href="link.html" class="align-right no-border">link to the right without border</a>.
 */

/* positioning and visibility */
.clear-both     { clear: both; }
.clear-none     { clear: none !important; }
.float-left     { float: left; }
.float-right    { float: right; }
.inline         { display: inline; }
.block          { display: block; }
.nodisplay      { display: none; }
.show           { visibility: visible; }
.hide           { visibility: hidden; }
.align-left     { text-align: left; }
.align-right    { text-align: right; }
.fullwidth        { width: 100%; }

/* coloring and text decoration/transformation */
.no-border      { text-decoration: none; border: 0 !important; }
.no-spacing     { margin: 0; padding: 0; }
.back           { }
.red            { color: #9f1d38; }
.req            { color: black; }
.err            { color: #9f1d38; font-weight: bold; }
.notice         { background-color: #ffa; color: #f60; }
.white          { color: white; }
.chosen         { color: #f60; font-weight: bold; }
.strong         { font-weight: bold; }
.normal         { font-weight: normal; }