/* @override 
	http://localhost:8880/jobs/hbk/relaunch2009/css/screen.css
	http://www.bergmedia.de/jobs/hbk/relaunch2009/css/screen.css
	http://127.0.0.1:8000/HBK%20Website%20Relaunch%202009/css/screen.css
*/

/* @group reset.css */

/* File: reset.css 
--------------------------------------------------------
inital author:      Eric Meyer
last editor:        Andre Berg / Berg Media
first version:      2008-12-02
last update:        2009-01-26
-------------------------------------------------------- */

/* Source: 
http://meyerweb.com/eric/tools/css/reset/index.html */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-weight: 100;

}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* @end */

/* @group effects.css */

/* File: effects.css 
--------------------------------------------------------
inital author:      André Berg / Berg Media
last editor:        André Berg / Berg Media
first version:      2009-01-26
last update:        2009-07-28
-------------------------------------------------------- */

/* Colors 
#ff187c     HBK Pink
#ec008c     HBK Pink Alt
#ec82b1     HBK Pink Muted (60% Tint)
#fffafa     Snow
#333        Footer BG
#999        Footer Text
#fff        White
#000        Black
*/

/* @group Tooltips */

/* @group FlexiTip */

/* dark grey bg no border */
.tooltip-style-plain {
    display: none; /* keeps the tooltip hidden if JS disabled */
    background-color: #333;
    color: #eee;
    width: auto;
    max-width: 400px;
    padding: 5px 6px;
    font: 1.2em/1.2em Arial, "Myriad Pro", "Lucida Sans", Helvetica, Geneva, sans-serif;
    opacity: 0.8;
    cursor: default;
}

/* dark grey bg no border round corners */
.tooltip-style-plain-round {
    display: none; /* keeps the tooltip hidden if JS disabled */
    background-color: #333;
    color: #eee;
    width: auto;
    max-width: 400px;
    padding: 5px 6px;
    font: 1.2em/1.2em Arial, "Myriad Pro", "Lucida Sans", Helvetica, Geneva, sans-serif;
    opacity: 0.8;
    cursor: default;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
}

/* black border with dark grey content */
.tooltip-style-grey {
    display: none; /* keeps the tooltip hidden if JS disabled */
    background-color: #111;
    color: #eee;
    width: auto;
    max-width: 300px;
    padding: 3px;
    margin-top: 4px;
    font: 1.2em/1.2em Arial, "Myriad Pro", "Lucida Sans", Helvetica, Geneva, sans-serif;
    opacity: 0.8;
    cursor: default;
}

.tooltip-style-grey p {
    background-color: #222;
    padding: 5px;
}

/* pink border with dark grey content */
.tooltip-style-pink {
    display: none; /* keeps the tooltip hidden if JS disabled */
    background-color: #ff187c;
    color: #eee;
    width: auto;
    max-width: 300px;
    padding: 3px;
    margin-top: 5px;
    font: 1.2em/1.2em  Arial, "Myriad Pro", "Lucida Sans", Helvetica,Geneva, sans-serif;
    opacity: 0.8;
    cursor: default;
}

.tooltip-style-pink p {
    background-color: #222;
    padding: 5px;
}

.mytooltip {
    position: absolute;
    z-index: 100;
    left: -9999px;
    background-color: #222;
    padding: 2px;
    border: 1px solid #000;
    width: 200px;
    font: 1.2em/1em Arial, "Myriad Pro", "Lucida Sans", Helvetica, Geneva, sans-serif;
}

.mytooltip p {
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #222;
    padding: 2px 7px;
    font: inherit;
}

/* @end */

/* @end */

/* @group Galleries */

/* @group Visor */

ul.thumblist li {
    position: relative;
    float: left;
}

ul.thumblist div.thumbdiv {
    border: 1px solid #000;
    float: left; 
    width: 45px; 
    height: 45px; 
    overflow: hidden; 
    margin: 1px;
    position: relative;
}

ul.thumblist div.thumbdiv.selected {
    border: 1px solid #ff187c;
}

ul.thumblist div.thumbdiv.hover {
    border: 1px solid #666;
}

/*
ul.thumblist div.thumbdiv.selected {
    border: 1px solid #ff187c;
    /* border: 1px solid #999; 
}
ul.thumblist div.thumbdiv.hover {
    border: 1px solid #ff187c;
}
*/

/*
ul.thumblist img.thumb {
    opacity: 1;
}

ul.thumblist img.thumb.selected {
    opacity: 1;
}

ul.thumblist img.thumb.hover {
    opacity: 1;
}*/


div#caption {
    /* ideal would have been to remove the float 
    property so it auto-aligns between the two 
    float left/right and the clear both following it 
    but Firefox seems to have a problem with that
    where Safari doesn't... don't even think about IE */
    width: 70%;
    float: left;
    min-height: 35px;
    text-align: center;
    line-height: 16px;
}

body[id="video"] div#caption {
    /* ideal would have been to remove the float 
    property so it auto-aligns between the two 
    float left/right and the clear both following it 
    but Firefox seems to have a problem with that
    where Safari doesn't... don't even think about IE */
    width: 70%;
    float: left;
    text-align: center;
    line-height: 16px;
    height: 60px;
    padding-top: 30px;
}

body[id="makingof"] div#caption {
    /* ideal would have been to remove the float 
    property so it auto-aligns between the two 
    float left/right and the clear both following it 
    but Firefox seems to have a problem with that
    where Safari doesn't... don't even think about IE */
    width: 70%;
    float: left;
    min-height: 35px;
    padding-top: 50px;
    text-align: center;
    line-height: 16px;
}

div#prev {
    clear: left;
    float: left;
    width: 12%;
    text-align: left;
}

div#next {
    clear: right;
    float: left;
    width: 12%;
    text-align: right;
}

div#prev a {
    font: 100 13px Arial;
}

div#next a {
    font: 100 13px Arial;
}


img.bulletprev {
    padding-right: 7px;
}

img.bulletnext {
    padding-left: 7px;
    vertical-align: -1px;
}


/* @end */

/* @end */

.position-absolute-z100 {
    position: absolute;
    z-index: 100;
}

/* @end */

/* @group screen.css */

/* File: screen.css (Master Stylesheet)
--------------------------------------------------------
inital author:      Andre Berg / Berg Media
last editor:        Andre Berg / Berg Media
first version:      2009-01-24
last update:        2009-07-05
-------------------------------------------------------- */

/*  Notes
--------------------------------------------------------
    - Had to make extensive use of overrides again,
    as a considerable amount of new page roles had
    to be added to cope with client wishes.
    Each page role is identified by the id attribute
    of the body tag. If something doesn't make sense
    check the overrides at the end. Most of the time
    theres a new rule overriding another to fit to
    another page role.

    - Implemented footerStickAlt method 
    for automatic footer positioning.
    
    Makes heavy use of min-height and min-width
    which are not supported or buggy with MSIE 6.
    It was therefore decided to use Dean Edward's
    IE8 JavaScript library to get around IE 6's 
    buggy behaviour regarding CSS.
    
    - Comments with the at-symbol are targeted
    at a Mac CSS editor called CSSEdit.
    You may safely ignore them in other editors.
-------------------------------------------------------- */


/* Colors
-------------------------------------------------------- 
#ff187c     HBK Pink
#ec008c     HBK Pink Alt
#ec82b1     HBK Pink Muted (60% Tint)
#2e68d9     Slate Blue (Audio Links)
#fffafa     Snow
#333        Footer BG
#999        Footer Text
#fff        White
#000        Black
-------------------------------------------------------- */


/* @group Tags */

html {
    height:  100%;
}

body {
    font: 62.5% Arial;
    background: #000 url(../images/header_bg_pink.png) repeat-x;
    height: 100%;
    /* setting opacity to 0.99 will, with most AA engines,
       decrease the font's weight by a significant amount */
    opacity: 0.99;
}

a {
    text-decoration: none;
    color: #ff187c;
}

h1 {
    font-weight: 100;
}

h2 {
    font-weight: 100;
}

h3 {
    font-weight: 100;
    line-height: 25px;
}

pre {
    font: inherit;
}

/* @end */

/* @group Classes */

/* JavaScript FX: slide*/
.fxslide {
    display: block;
}

/* all selected menu items */ 
.selected {
    cursor: default;
}

/* can be used to add a pointing hand cursor 
   to make non-clickable items appear clickable */
.clickable {
    cursor: pointer;
}

.loading {
    background: black url(../images/loading_circle_ball_333.gif) no-repeat center center;
}

.error {
    color: red;
    background: url(../images/exclam.png) no-repeat center center;
}

/* all audio content in the stage's viewer */
.audio {
    padding: 10px 0 10px 0;
}

.video {
    /*width: 360px;
    height: 202px;*/
}

.primary-color {
    color: #ff187c;
}

/* @end */

/* @group Divs */

div#all {
    position: relative;
    min-height: 100%;
}

div#wrapper {
    min-height: 800px;
    width: 1200px; /* no width: continuous bg colors */
    margin: 0 auto; /* set to "0 auto" to center */
}

body[id="audio"] div#wrapper {
    min-height: 800px;
    width: 1234px; /* no width: continuous bg colors */
    margin: 0 auto; /* set to "0 auto" to center */
}

body[id="impressum"] div#wrapper {
    width: 370px;
    height: 870px;
    margin: 0;
    padding: 0;
}

body[id="impressum"] {
    background: #000;
}

div#header {
    background-color: #ff187c;
    height: 200px;
}

div#content {
    /* float: left; */
    padding:0 0 44px;
}

body[id="impressum"] div#content {
    width: 100%;
}

div#stage {
    padding: 60px 85px 0 90px;
    float: left;
    width: 590px;
    min-height: 690px;
}

div#stage p {
    padding-top: 30px;
}

body[id="home"] div#stage {
    padding: 60px 65px 60px 90px;
    float: left;
    width: 700px;
}

body[id="video"] div#stage {
    padding: 60px 65px 60px 90px;
    float: left;
    width: 590px;
}

body[id="impressum"] div#stage {
    width: 100%;
    padding: 30px 0 0 30px;
}

body[id="makingof"] div#stage {
    padding: 60px 75px 60px 110px;
    float: left;
    width: 590px;
}

div#viewer {
    margin-top: 30px;
    padding-bottom: 40px;
    width: 590px;
    text-align: center;
    overflow: hidden;
    /*visibility: hidden;*/ /* this breaks correct markup of the image list for ppl with disabled JS */
    
}

div#teamviewer {
    margin-top: 30px;
    padding-bottom: 40px;
    width: 630px;
    text-align: center;
    overflow: hidden;
}


div#teamrow1 {
    margin-top: 30px;
    padding-bottom: 10px;
    width: 80%;
    text-align: center;
    overflow: hidden;
}

div#teamrow2 {
    margin-top: 30px;
    padding-bottom: 40px;
    width: 100%;
    text-align: center;
    overflow: hidden;
}


div#videoviewer {
    margin-top: 30px;
    padding-bottom: 40px;
    width: 590px;
    text-align: center;
    overflow: hidden;
    visibility: hidden;
}

/* #textviewer might be deprecated */
div#textviewer {
    width: 530px;
    padding: 0 0 40px 50px;
    overflow: hidden;
}

div#introviewer {
    width: 700px;
    padding-top: 10px;
}

div#introviewer p {
    font: 100 44px Arial;
    color: white;
    text-align: right;
    padding-top: 5px;
}

div#kreislogo {
    clear: both;
    text-align: center;
    margin-bottom:40px;
}


div#thumbs {
    min-height: 275px;
}

div#thumbs-tall {
    min-height: 395px;
}

div#sidebar {
    float: left;
    padding: 60px 0px;
    width: 180px;
}

body[id="audio"] div#sidebar {
    float: left;
    padding: 60px 0px;
    width: 22.25%;
}

div#sidebar h2 {
    line-height: 25px;  
}

div#sidebar h3 {
    line-height: 25px;  
}

div#footer {
    clear: both;
    color: #999;
    background-color: #333;
    font: 11px Arial, sans-serif;
    text-align: center;
    padding: 24px 0px 20px 0px;
    
    /* won't work in vanilla IE 6
    relies on IE8.js to be loaded */
    min-width: 1100px;
    position: relative;
    margin-top: -54px;
    float: left;
    width: 100%;
}

div#footer a {
    color: #777;
}

div#footer p {
    display: inline;
}

div#contactviewer li {
    display: inline;
}

div#contactviewer pre {
    font: inherit;
    line-height: inherit;
}

div#kreislogo-kontakt {
    float: left;
    height: 800px;
    margin: 0 4% 0 19%;
}

div#making-of-infotext p {
    color: #ff187c;
    font: 1.2em/1.2em Arial, "Myriad Pro", sans-serif;
    font-size: 14px;
    font-weight: 100;
    line-height: 17px;
}

div#impressum-text h1 {
    line-height: normal;
}

div#impressum-text p {
    line-height: 15px;
}

div#impressum-text span.bodytext {
    line-height: normal;
}

body[id="impressum"] div#impressum-text {
    font-size: 14px;
    line-height: 18px;
    color: #fff;
}

/* @end */



/* @group Inhalte */

.sitelogo {
    margin-top: 122px;
    margin-left: 76px;
}

.kreislogo.stage {
    padding: 60px 20px 100px 35px;
}

body[id="makingof"] .kreislogo.stage {
    padding: 60px 20px 100px 40px;  
}

.kreislogo.contact {
}

.text {
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    padding: 0 0 17px;
}

.thumbs {
    display: inline;
    padding: 0 0 0 3px;
}

.spacerpixel {
    height: 5px;
}

.teampic {
    display: inline;
    float: left;
    padding-left: 40px;
}

.teamlist {

}

.teamname {
    color: #fff;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    line-height: 20px;
    display: block;
    text-align: left;
    padding-left: 2px;
    padding-top: 10px;
    padding-bottom: 4px;
}

.teamtitle {
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 7px;
    display: block;
    text-align: left;
    padding-left: 2px;
}

/* @end */



/* @group Navigation */
/* @group Main */

ul#main-nav {
    color: #ff187c;
    float: left;
    font-size: 22px;
    padding: 55px 0px 0px 60px;
    width: 120px;
    line-height: 35px;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 0px;    
}

body[id="audio"] ul#main-nav {
    color: #ff187c;
    float: left;
    font-size: 22px;
    padding: 55px 0px 0px 60px;
    width: 130px;
}

ul#main-nav a {
    color: #ff187c;
}

ul#main-nav li {
    text-indent: 15px;
}

ul#main-nav li.main-nav.selected {
    cursor: default;
}

div#drawer {

}

div#handle {
    background: transparent url(../images/bullet_selected_opaque3.gif) no-repeat 0 center;
}

ul#main-nav li.sub {
    font-size: 16px;
    line-height: .8;
    text-indent: 52px;
    margin-bottom: 15px;
    margin-top: 12px;
    margin-right: 25px;
}

ul#main-nav li.sub.selected {
    color: #fff;
}

ul.sub-nav {
    color: #ff187c;
    width: 100%;
}

ul.sub-nav li {
    position: relative;
}

ul.sub-nav li.sub.selected h2 {
    font-weight: 100;
}

/* @end */



/* @group Viewer */

div#viewer-navi {
    clear: both;
    color: #fff;
    font-size: 13px;
    width: 90%;
    margin: 0 auto;
    padding-left: 6%;
}

body[id="makingof"] div#viewer-navi {
    clear: both;
    color: #fff;
    font-size: 12.5px;
    width: 70%;
    margin: 0 auto;
    padding-left: 7%;
}

body[id="video"] div#viewer-navi {
    clear: both;
    color: #fff;
    font-size: 12.5px;
    width: 80%;
    margin: 0 auto;
    padding-left: 7%;
}

div#viewer-navi a {
    color: #fff;
}

div#viewer-navi a#making-of-link {
    color: #fff;
    text-decoration: none;
}

div#viewer-navi span.prev {
    float: left;
    text-align: left;
    width: 10%;
}

div#viewer-navi span.next {
    float: right;
    text-align: right;
    width: 10%;
}


/* @end */



/* @group Client List */

div#clientlist {
    font-size: 14px;
    font-weight: 100;
    line-height: 25px;
    color: #ff187c;
    padding-top: 40px;
    padding-bottom: 100px;
    clear: both;
}

body[id="audio"] div#clientlist {
    padding-top: 0;
    overflow: visible;
}

body[id="audio"] div#clientlist a {
    font-size: 13px;
    color: #2e68d9;
}

body[id="audio"] div#clientlist span.pseudolink {
    font-size: 12.5px;
    color: #ff187c;
}

div#clientlist a.selected, li.client.selected {
    color: #fff;
}


div#clientlist span.videotitle {
    line-height: 18px;
}

div#clientlist li.client {
    line-height: 20px;
}

div#clientlist li.client.spacer {
    line-height: 12px;
}

/* this overwrites the setting for div#sidebar's h3 */
body[id="video"] div#clientlist li.client h3 {
    line-height: normal;
}

/* @end */


/* @group Thumbs */

div#thumbs-navi {
    color: #fff;
    font-size: 12.5px;
    padding: 10px 0 43px;
    float: left;
    height: 16px;
}

div#thumbs-navi li {
    display: inline;
}

div#thumbs-navi li.selected {
    color: #ff187c;
}

div#thumbs-navi a {
    color: #fff;
}

/* @end */

/* @end */


/* @group Hacks */

/* Needed for IE 6  */
* html #all {
    height: 100%;
}

/* @end */

/* @end */