/* @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 {
    /*background: #ffffff url(images/around_sprites.png) repeat-x 0px -546px;*/
/*    font-size: 87.5%;*/ /*14px*/
    font-size: 85%; /*13px*/
    color: #777777; /* #a4a4a4 #858585*/
/*    font-family: Cambria, Georgia, sans-serif;*/
    font-family: Georgia, sans-serif, Cambria;
/*    font-family: Arial,"Lucida Grande",Verdana,Lucida,Helvetica,sans-serif;*/
    line-height: 1.4em; /*todo: not sure yet;*/
/*    text-align: center;*/ /* centering canvas */
}

a:link {
    color: #a4a4a4;
}
a:hover {
    color: #858585;
}
a:visited {
    color: #a4a4a4;
}

.tagLine,
h1,
h2 {
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
    font-size: 100%; /*13px*/
    text-transform: uppercase;   
    font-weight: bold;
    margin-bottom: 0.75em;
}
.tagLine,
h1 {
    color: #c0c0c0;
/*    vertical centering todo: probarly change in to em approach remember #portal-tag-line*/
    height: 50px;
    line-height: 50px;
/*    line-height: 0.9em;*/
/*    letter-spacing: -2px;*/ /*todo: or -2px*/
}
.tagLine {
    float: left;    
}
h2 {
/*    font-size: 125%;*/
    color: #434343;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 0.25em;
/*    letter-spacing: -1px; *//*todo: or -2px*/
}
.section-contact .column h2 {
    margin-bottom: 0em;    
}
h3 {
    font-size: 100%;
/*    color: #737373;*/
    font-weight: bold;
    margin-bottom: 0.25em;
/*    line-height: 1.07em;
    margin-bottom: 0.1em;*/
}
p {
    padding-bottom: 1em; /*dont use marhin it dosent work well in portlets/boxes*/
}
.section-contact .column p {
    padding-bottom: 1.5em;
}
/*todo: not sure what should happen with this one yet*/
.documentDescription {}
.contentArea ul {
    list-style-type: disc; /*none/disc/circle/square*/
    margin-bottom: 0.5em;
    padding-left: 1.25em;
}
.contentArea ol {
    list-style-type: decimal; /*decimal/decimal-leading-zero/zero*/
    margin-bottom: 0.5em;
    padding-left: 2em;
}
.contentArea li {
    margin-bottom: 0.5em;
}
/* @end */




/* @group GRID */
.centeringFixedContent {
    /* fixed width and centering */
    width: 995px;
    margin: 0 auto 0 auto;
    position: relative;
}
.contentArea {
    width: 498px;
    float: left;
    padding-bottom: 25px; /*i'm aving some problems with setting padding on #content .visualPadding perhaps because of the sticky footer so i go for his one*/
}
/*sometimes there is not .contentArea then children of #content might floats as well stop taht*/
#content {
    clear: both;
}
#content .visualPadding {
    padding-top: 20px;
}
/*todo: at the front page     padding-top: 0px;*/

.sideBar {
    max-width: 478px;
    float: left;
/*    padding-top: 20px;*/
}
.sideBarImageRight {
    margin-left: 19px; /*995-498-478*/
}
.sideBarImageLeft {
    margin-right: 19px; /*995-498-478*/
}

#global-top {
    background: #434343;
    font-size: 93%; /*13px*/
    color: #a3a2a3;
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
/*    note: needed to get the tool tips to go over the logo;*/
    position: relative;
    z-index: 9000; /*10000-1 - dont use 9999 for this one then it breaks overlay*/
    line-height: 0.9em;

}/*todo: not sure yet about the heights */
#portal-top {
    padding-top: 50px;
}
#portal-tag-line {
    min-height: 50px;
}

#portal-sitemap {
    padding-top: 7px;
}

/* @end */


/* @group VARIOUS */

/* important to get the image top top work right 
maybe add global .tile */
.tile {
    display: block;
}

.hidden,
.hiddenStructure {
    display: none;
}

/* Helper element to work with CSS floats */
.visualClear {
    display: block;
    clear: both;
}

/* Kupu image alignment classes */
.image-left {
   float: left;
   clear: both;
   margin: 0.1em 1em 0.5em 0;
}
.image-inline {
   float: none;
}
.image-right {
   float: right;
   clear: both;
   margin: 0.1em 0 0.5em 1em;
}
/* @end */








/* @group NAVIGATION */
.navTree li {
    float: left;
    margin-right: 33px;
}
.navTree a {
    text-decoration: none;
    color: #777777; /*#a3a2a3*/
}
.navTree a:link {
    color: #777777; /*#a3a2a3*/
}
.navTree a:hover {
    color: #ffffff;
}
/*.navTree a:visited {} since a:link is set again */
.navTree a.navTreeCurrentItem {
    color: #ffffff;
}

/*Note: we use .navTreeLevel2 instead of .navTreeLevel1
which is very plone specific for teh site map*/
.js .navTreeLevel2 {
    display: none;
}
ul.navTreeLevel0 {
    position: absolute;
}
.navTree > li {
    float: left;
}
/* note: work around to get the tool tip not to disappear */
.navTreeLevel0 > li div a {
    padding-bottom: 10px;
    display: block;
}
/*.navTreeLevel0 > li div {
    padding-bottom: 10px; 
}*/

/*ul.navTree > ul {
    height: auto!important;
    line-height: auto!important;
}*/
.navTree > li > .navTreeLevel2 li{
    float: none;
}
.navTreeLevel2 li {
    background: #c0c0c0;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    margin: 2px 0;
}
.navTreeLevel2 li:hover {
    background: #a1a0a0;
}
.navTreeLevel2 > li div a {
    display: block;
    padding: 4px 6px 3px 6px; /*todo: may be change this 3px 10px 3px 6px*/
    white-space: nowrap;
}
.navTreeLevel2 > li div {
    padding-bottom: 0px; 
}
.navTreeLevel2 > li a:hover {
    color: #000000;
}
/*
seems not to needed ?
ul.navTreeLevel2 {
    position: relative; 
    bottom: 0;
    left: 0;
}*/
/*needed so navigation go over logo etc..*/
#canvas {
/*    position:relative;
    z-index:1;
    note: done on #global-top here its odd since content e.g. links in the content area is not click able
    */
}
/*work around*/
.navTreeLevel2 {
    display: none;
}


/*.navTreeLevel2.showMe {
    display: block;
}*/

/*.navTreeLevel0 > li {
    position: absolute;
}
.navTree li:first-child .navTreeLevel2 {
    display: block;
    position: relative;
}*/



/*.navTreeLevel0 .navTreeLevel2:first-child {
    display: block;    
}
*/

/*.navTree li:first-child .navTreeLevel2 {
    display: block;
}
.navTreeLevel2 li:last-child {
    background: transparent;
}
*//*

.navTreeLevel2:first-child {
    display: block;
    background: Red;
}*/


/* @end */

/* @group SEARCH */

/*hmm still having problems with this one: maybe look into the tweaks mentioned in  
http://flowplayer.org/tools/forum/30/29806 again */
#portal-search-wrapper {
    float:right;
    padding: 2px 0 3px 158px;
}
#portal-search {
    background: #767676;
    height: 19px;
    width: 19px;
    position: relative;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
#portal-search img {
    display: block;
    padding: 3px;
}
/* tooltip styling */
#portal-searchbox {
    display: none;
    position: absolute;
    bottom: -21px;
    right: 0;
}
#searchGadget { 
    width: 175px;
    border: 5px solid #767676;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    /* except of top right corner thx http://tr.im/IF9y */
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
}
#portal-searchbox .searchButton, 
#portal-searchbox .searchSection,
#portal-searchbox .LSResult {
    display: none;
}
/* @end */




/* css 3 example !
css 3 browser compability: http://www.css3.info/selectors-test/test.html*/
/*.navTree li:last-child {
    background: Red;
}
.navTreeLevel2 li:last-child {
    background: transparent;
}
*/





/* @group FOOTER */

/*note: sticky footer thx: 
http://ryanfait.com/sticky-footer
http://www.cssstickyfooter.com/style.css */
html, body {
    height: 100%;
}
#canvas-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
/*    margin-bottom: -30px; note: why was this necessary ? */
    margin-bottom: -30px;
    position: relative;
}
#content .visualPadding {
    padding-bottom: 30px; 
}
#footer-wrapper {
/*    padding-top: 30px; */
    height: 30px;
}
/*end of sticky footer specific tweaks*/
#footer {
    float: left;
    padding-top: 10px; 
/*    centering content only works on inline elements in ie http://blog.themeforest.net/tutorials/vertical-centering-with-css 
    so there is added some padding in ie.css */
/*    height: 30px;
    line-height: 30px;*/
}
#footer div {
    display:inline;
    padding: 0 6px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    font-size: 78.5%; /*11px*/
    line-height: 1em;
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
    color: #434343;
}
#footer div:first-child {
    padding-left: 0;
    border-left: none;
}
#footer div:last-child {
    padding-right: 0;
    border-right: none;
}


#login-area {
    float: right;
    min-height: 30px;
    background: #434343;
    padding: 0 15px;
}
#login-area ul {
    float: left;
}
#login-area h2 a {
    text-decoration: none;
}

#login-area h2,
#login-area li {
    float: left;
    padding-top: 8px;
/*    height: 30px;
    line-height: 30px;*/
}
#login-area li {
    padding-top: 6px;
    margin-left: 15px;
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
    font-size: 93%; /*13px*/
    font-weight: normal;    
}
#login-area li a {
    text-decoration: none;
}
#login-area li a:hover {
    color: #ffffff;
}
#login-area h2 {
    color: #858585;
    margin: 0;
/*    padding: 1px 0 0 0;*/
}


/* @end */



/* @group IMAGE(s) */

.imageWrapper {
    position: relative;
}
.imageWrapper img {
    display: block;
}
.imageCaption {
    display: inline;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #434343;
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
    background: rgba(255, 255, 253, 0.7); /*todo: not sure yet about this one its white for now */
    padding: 3px 12px 2px 5px;
}


/* @end */


/* @group PANE(s) - tabbed views */

/* initially all panes are hidden in js mode */ 
.js div.panes div.pane {
    display: none;
}

ul.tabs {
    float: left;
}
ul.tabs li {
    float: left;
    height: 47px; /*50px*/
    line-height: 47px; /*50px*/
    margin-left: 40px;
}
ul.tabs li a {
    display: block;
}

ul.tabs li a.current {
    text-decoration: none;
    color: #434343;
}
/* @end */



/* @group FRONT PAGE */
.js .portletStaticText .slide {
    display:none;
}
/*quick fix it didnt work on the plone site without !important*/
.js .portletStaticText .notASlideShow {
    display:block!important;
}


.slideshowLink {
    display: block;
}
.portletStaticText a {
    color: #434343;
    padding: 7px 0;
    margin-bottom: 48px;
}
.column {
    float: left;
    max-width: 219px;
    margin-right: 40px;
}
.columnThird {
    margin-right: 39px;
}
.column:last-child {
    margin-right: 0px;
}


/*.column:nth-child(3)*/

/*secound last item - not work in ff 22 
.column:nth-last-child(2) {
    background: Red;
}
*/


.template-two-columns h1 {
    display: none;
}
.template-two-columns .tagLine {
    display: none;    
}
.template-two-columns #portal-tag-line {
    min-height: 50px;
}
.template-two-columns #content .visualPadding {
    padding: 0;
}
/* @end */






/* @group FORM */
input,
select,
label {
    font-size: 93%; /*13px*/
    color: #c0c0c0; /*or #a3a2a3*/
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
}
input {
/*    vertical-align: middle;*/
    background: #fff;
    padding: 4px;
    border: 1px solid #a9a9a9;
}
select {
    color: #434343;
    border: 1px solid #a9a9a9;
/*    vertical-align: middle;*/
}
option {
    padding: 1px 0 2px 0;
}
/* @end */







/* @group PANE(s) - tabbed views */
.template-stores ul.tabs,
.storesLocator legend {
    display: none;
}
fieldset.storesLocator {
    min-width: 250px;
    float: right;
}
/*todo: use this in a general label style*/
/*.storesLocator*/ 
.storesLocator select {
    min-width: 165px;
/*todo: tryout to vertical centering real oain do it later */
/*    height: 30px;
    line-height: 30px;*/
}
.storesLocator option {
/*    height: 30px;
    line-height: 30px;*/
}

.storesLocator label {
    margin-right: 10px;
}


.store { 
    min-width: 165px;
    float: left;
/*    padding-right: 40px;*/
    margin-bottom: 20px;
}
.store h2 {
    max-width: 145px;
} 
.showAsBlock {
    display: block;
    max-width: 145px;
    font-size: 93%; /*13px*/
/*    color: ; todo: check this one;*/
}

/* @end */


/* @group IMAGEVIEWER  */


/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(images/bn_arrows.png) no-repeat;
    display:block;
    width:17px;
    height:17px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { 
    background-position: 0 -17px; 
    position: absolute;
    top: 32px;
    right: 6px;
        z-index:99999;
    }
/*a.right:hover  { background-position:-17px -17px; }
a.right:active { background-position:-34px -17px; } 
*/

/* left */
a.left { 
    position: absolute;
    top: 32px;
    left: 6px;
    z-index:99999;    
} 
/*a.left:hover  { background-position:-17px 0; }
a.left:active { background-position:-34px 0; }
*/

/* disabled navigational button */
a.disabled {
    visibility:hidden !important;        
}     



/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    background: #e8e8e8;
    margin-left: 10px;
    
    
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 458px; /*478-20*/
    height: 78px; /*58+ 10+10 have to be verified*/
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:10px 0px 10px 3px; /*5-2 compensate for borders*/
    background-color:#fff;
/*    padding:2px;*/
    border:1px solid #e8e8e8; /*should be same color as scrollable background*/
    cursor:pointer;
    width:86px;
    height:58px;
    overflow: hidden;
}
.scrollable img:hover {
    border:1px solid #434343;
}

/* active item */
.scrollable .active {
    border:1px solid #434343;
    z-index:9999;
    position:relative;
}
.galleryWrapper {
    position: relative;
    max-width: 478px;
    background: #e8e8e8;
}
.galleryWrapper .imageWrapper {
    max-width: 478px;
    background: #ffffff; /*note: quickfix this div create da 2px bottom space;*/
}

/* @end */






/* @group COLLECTION VIEW */



/*compensate for the grid / broder*/
.collection {
    padding-left:1px;
    padding-right:1px;
}

/*note: its essential to set a tag as block element to get the position of the tooltip to work better */
.collection .item a {
    display: block;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    float: left;
    /* note: dont use max-width|height here*/
    width:123px;
    height:184px;
    overflow: hidden;
    /* needed for the next step where wide images are moved left */
    position:relative;

}

.collection .item .wideImage img {
    display: block;    
    position:absolute;
/*    left:50%;*/
    margin-left:-82px; /*- 165 / 2 */
} 

/*todo: remove med*/
.collectionTurnedOff .item img {
    display: block;    
    position:absolute;
    top:50%;
    margin-top:-124px; /*- 247 / 2 */    
    left:50%;
    margin-left:-82px; /*- 165 / 2 */
} 
/*todo: margin-left have to be calclated with js*/





.collectionTip { 
    display:none; 
    height:12px; /*22-5*/
    width:113px; /*123-5-5*/
    background: rgba(255, 255, 253, 0.7); /*todo: not sure yet about this one its white for now */
    padding: 2px 5px 8px 5px;
    color: #434343;
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,Lucida,sans-serif;
    font-size: 93%; /*13px*/
    overflow: hidden; /*we are pragmatic here dont show text out side the tooltip*/
} /*note: should look like the caption*/

*:first-child+html .collectionTip {
    background: #ffffff;
    filter: alpha(opacity = 70);
}

/* the overlayed element */
.simple_overlay {
    
    /* must be initially hidden */
    display:none;
    
    /* place overlay on top of other elements */
    /*    should be over #global-top*/
    z-index: 10001;
    
    /* styling */
    background-color:#fff;
    width:400px; /*todo: try to manipulate this one to get closer to the view point;*/
    min-height:600px;
}


/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(images/bn_close.png);
    position:absolute;
    right:-8px;
    top:-8px;
    cursor:pointer;
    height:17px;
    width:17px;
}

/* the large image. we use a white border around it */
#img {
    border:1px solid #fff;
}

/* "next image" and "prev image" links */
/*.next, .prev */
.prevImage,
.nextImage {    
    /* absolute positioning relative to the overlay */
    position:absolute;
    top:40%;    
    cursor:pointer;
    font-size:1px;
    display:block;
    height:32px;
    width:32px;
}
.prevImage {
    left:-16px;
    background:transparent url(images/bn_arrow_big_left.png) no-repeat;
}
.nextImage {
    right:-17px;
    background:transparent url(images/bn_arrow_big_right.png) no-repeat;
}

/*todo: clean up and set up sprites - hover effects etc.*/
/*
a.right { 
    background-position: 0 -17px; 
    position: absolute;
    top: 32px;
    right: 6px;
        z-index:99999;
    }
a.right:hover  { background-position:-17px -17px; }
a.right:active { background-position:-34px -17px; } 
*/
/*.next:hover, .prev:hover {
    text-decoration:underline;
    background-color:#000;
}
*/
/* when there is no next or previous link available this class is added */
.disabled {
    visibility:hidden;        
}

/* the "information box" */
.info {
    position:absolute;
    bottom:-1px;
    left:1px; 
    padding:10px 15px 10px 20px;
    background: rgba(255, 255, 253, 0.7); /*todo: not sure yet about this one its white for now */
/*    border-top:1px solid #666;*/
}

/*apperntly this didnt work in th ie.css in combination with the jq tools overlay strange*/
/**:first-child+html .info {
    background: #ffffff;
}*/

.info h2 {
    text-transform: uppercase;
    color: #767676;
}

/* @end */


/* @group PRESS VIEW  based on COLLECTION VIEW */

.template-press_view .collection .item a {
/*    note: dont use max-width|height here*/
    height:329px;
    width:247px;
}
.template-press_view .collection .item img {
    display: block;    
    position:absolute;
    top:0;
    margin-top:0;
    left:0;
    margin-left:0;
} 
.template-press_view .collectionTip { 
    width:237px; /*247-5-5*/
}

/* @end */




/*quick fixes plone related*/


.template-folder_listing #content div {
    max-width: 498px;
}

.template-folder_listing #content dd {
    padding-bottom: 1.5em;
}

#content .documentFirstHeading,
#content h1 {
    display: none;
}


/*plone specific - might merge in the more geenral styles*/
.template-document_view #content #parent-fieldname-text {
    max-width: 498px;
    float: left;
    padding-top: 20px; /*usually added through the #content .visualPadding*/
    padding-bottom: 25px; /*i'm aving some problems with setting padding on #content .visualPadding perhaps because of the sticky footer so i go for his one*/
}




.template-collection_view #content {
    clear: both;
    padding-bottom: 30px;
}



/*
rgba try out */

/*div.color {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}
 
div.color:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(142, 213, 87, 0.6);
}
*/


/*loader*/
.js #content{
    display: none;
}
.js #page-loader {
    position: absolute;
    top: 250px;
    left: 50%;
}
/*quick fix*/
#plone-document-byline,
.documentByLine {
    display:none;
}
/*hide advanced search link*/
#searchform .discreet {
    display:none;    
}
.template-search  p.discreet {
    padding-top: 2em;
    padding-bottom: 2em;
}
.template-logged_out h3,
.template-logged_out p,
.template-login_form h3,
.template-login_form p {
    display:none;
}