/* @group Reset 
thx meyer - reset.css
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,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}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* @end */


/* @group Basics */
body {
    font: 75% Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #000000;
}
a{
    text-decoration: none;
}
a:link, 
a:visited {
    color: #ffffff;
}
a:hover {
    color: #000000;
}
h1 {
    font-size: 100%;
    margin-bottom: 8px;
    letter-spacing: 0.5em;
    line-height: 1.8em;
    text-transform: uppercase;
}
p,
label {
    margin-bottom: 15px;
    font-size: 70%;
    letter-spacing: 0.5em;
    line-height: 1.8em;
    color: #ffffff;
    text-transform: uppercase;
}

table.invisible {
    width: 546px;
}

table.invisible td {
    min-width: 273px; /*268+5*/
    padding-right: 5px;
}
* html table.invisible td {
    width: 268px;
}

/* @end */


/* @group Navigation */

/*ul#portal-globalnav {
    font-size: 85%;
}*/
#portal-globalnav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #535353;
}
#portal-globalnav .selected a {
    color: #000000;
}
#portal-globalnav li {
/*    margin-bottom: 8px;*/
}
/* @end */


/* @group Grid */

    /* ———————————————————————-
    Grid/column concept based on:
    "Faux Absolute Positioning" - http://tinyurl.com/62bgfq 
    - seems to be very robust though it referes to the equal height concept 
    that might be a bit weak (padding minus ... margin minus) e.g. with anchors and so.

    Observations:
    sometimes there is a 1px gab in safari between .item's -
    but only when canvas has not declared a width or are 100%
    ———————————————————————- */
    .line {
        float: left;
        width: 100%;
        display: block;
        position: relative;
    }
    .item {
        position: relative;
        float: left;
        left: 100%;
        overflow: hidden;
    }


    /* ———————————————————————-
    Custom stuff
    ———————————————————————- */
    #canvas {
        /* fixed width and centering */
        width: 1024px;
        margin: 160px auto 0 auto;
        padding: 0;
    }

    #main {
        margin-left: -1024px; /* canvas width */
        width: 810px;
        overflow: hidden;
    }

    #sidebar {
        margin-left: -214px; /* 810px - 1024px */
        width: 214px; 
        overflow: visible;
/*        overflow: hidden;*/
    }
    #sidebar .visualPadding {
        padding-left: 30px;
    }

    #content {
        margin-left: -610px;
        width: 610px;
        min-height: 444px;;
        overflow: hidden;
        background: #999999 url(/++resource++skinny/loader.gif) no-repeat center center;
    }
    * html #content {
        height: 444px;;
/*        take care with this one especially in ie6 since we have a height there
and potentially hides the */
        overflow: visible;
/*        ie6 dont like that one*/
        background-image:none;
    }
    #content .visualPadding {
        padding: 30px 30px 0px 30px;
/*        quick work around*/
        background: #999999;
        min-height: 375px; /*445-60*/
    }
    * html #content .visualPadding {
        height: 375px;
    }
    #content .visualPaddingNoHeight {
        padding: 30px;
    }
    #sidebar-2 {
        margin-left: -810px; /* 477px + 10px(margin) - 720px */
        width: 200px;
        overflow: hidden;
    }
    #logo {
        height: 444px;;
        background: transparent url(/++resource++skinny/logo.png) bottom left no-repeat;
    }


    /* ———————————————————————-
    Needed to get ie6 center align work properly.
    Todo: move to a ie fixes css
    ———————————————————————- */
    * html body {
      text-align: center;
      }
    * html #canvas {
        text-align: left;
    }

/* @end */








/* @group Accessibility and visual enhancement elements */

/*thx plone.css*/
.hiddenStructure {
    display: block;
    background: transparent;
    background-image: none; /* safari bug */
    border: none;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px 0 0 -1px;
    width: 1px;
/*    needed for ie6 / ie7 move eventually to a seperate ie stylesheet*/
    position: absolute;
}

/* @end */





/* @group Gallery -collection */
.fpPager.hidden,
.js .hidden{
    display: none;
}
/* the back and next image arrow should have button cursor look */
.fpGalleryImage img,
.fpPager img {
    cursor: pointer;
}
.fpPager {
    background: #ffffff;
    position: relative;
    height: 50px;
}
#previous {
    position: absolute;
    left: 360px;
    top: 10px;
}
#next {
    position: absolute;
    left: 383px; /*360+16+7*/
    top: 10px;
}

/*solve odd border stuff*/
.js #gallery {
    height: 444px;
    overflow:hidden;
    background: transparent;
}

/* @end */


/* @group Collection overview - archive */
.galleryItem,
.galleryItemOdd {
    float: left;
    padding-bottom: 30px;
}
.galleryItemOdd {
    padding-right: 30px;
}

.galleryItem img,
.galleryItemOdd img {
    display: block;
    padding-bottom: 10px;
}

/* @end */


/* @group login */
#login-form legend {
    display: none;
}
#login-form .field input {
    margin-bottom: 15px;
    width: 200px;
    border: solid 1px #ffffff;
}
/* @end */

/* @group Lightbox */


#lightbox{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

#lightbox a img{ border: none; }

/*todo: maybe more stuff isnt needed*/
#outerImageContainer{
    position: relative;
/*  background-color: #fff;*/
    background-color: transparent;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
/*  padding: 10px;*/
    padding: 0;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink,
#nextLink,
#numberDisplay {
    display: none!important;
}

/*#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat;
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }*/

/*** START : next / previous text links ***/
/*#nextLinkText, #prevLinkText{
color: #FF9834;
font-weight:bold;
text-decoration: none;
}
#nextLinkText{
padding-left: 20px;
}
#prevLinkText{
padding-right: 20px;
}*/
/*** END : next / previous text links ***/
/*** START : added padding when navbar is on top ***/

.ontop #imageData {
    padding-top: 5px;
}

/*** END : added padding when navbar is on top ***/

#imageDataContainer{
    margin: 0 auto;
}
#imageData{
    padding: 5px 0px;
    height: 0.1%;
}
/*if float is needed on the caption dont set it here it dont play well in ie
set the float on #imageData #caption instead*/
#imageData #imageDetails{ }    
#imageData #caption{
    width: 95%; /*38%*/
    float: right;  
    text-align: right;
    font-size: 70%;
    letter-spacing: 0.5em;
    line-height: 1.8em;
    color: #000!important;
    text-transform: uppercase;
}
#imageData #numberDisplay{ 
    display: none; 
}
#imageData #bottomNavClose{ 
    width: 9px; /*width of the close image*/
    float: left; 
    text-align: left;
    padding: 3px 3px 3px 0;
}
/*#imageData #helpDisplay {clear: left; float: left; display: block; }*/

#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #fff;
/*    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;*/
    display: none;
    }
    
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html>body .clearfix {
    display: inline-block; 
    width: 100%;
    }

* html .clearfix {
    /* Hides from IE-mac \*/
    height: 1%;
    /* End hide from IE-mac */
    }    
#lightboxIframe {
    display: none;
}    
/* @end */


/* @group supersize slide show */
.js body.slideShow,
.js body.frontPage {
    overflow:hidden;/*Needed to eliminate scrollbars*/
    background: #000 url(/++resource++skinny/loader.gif) no-repeat center center;    
    height: 100%;
    width: 100%;
}
/* quickfix: support small/narrow screens -  of course */
.js .frontPageScroll {
    overflow:visible!important;
}
html {
    height: 100%; /* note: needed to get the loader placed well cross browser wise 
    in combination with slide show etc - though in ff it has a minor odd side effect with minimal scrolling   */
}
body.slideShow #content,
body.frontPage #content {
    display: none;    
}
body.slideShow #logo {
    background-image: none!important;
}
body.frontPage #logo {
    background-image: url(/++resource++skinny/logo_negativ.png);
}

/* canvas should always be on top - lets support that 
only do it for the slideshows it breaks light box etc. */
.js body.slideShow #canvas-wrapper,
.js body.frontPage #canvas-wrapper {
    width: 100%;
    height: 100%;
	position:absolute; /*dont have it relative here it seems to break the supersize*/
    top: 0px;
    left: 0px;
    z-index: 100;
}
/*hide show used for the jq loading approach*/
.js #supersize {
    display: none;
}
.showSlideShow#supersize {
    display: block;
}
/*Supersize Plugin Styles*/
.js #supersize img, #supersize a{
	height:100%;
	width:100%;
	display:none;
}
.js #supersize .activeslide, #supersize .activeslide img{
	display:inline;
}
.js #supersize-nav {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 300;
    opacity: 0.7;
    background: #000000;       
}
.js #supersize-nav {
    filter:alpha(opacity=70); 
}

.js #supersize-nav a {
    display: block;
    padding:  5px 10px;
}

/* @end */

/* @group video */

.autoFlowPlayer.video {
    display:block;
    width:610px; /*720*/
    height:342px;/*404*/
}

.playerPage #content {
    background: #ffffff;
}

/* @end */