@import "defs.less";

html {
    
    overflow-y: scroll;
}

#everything {

    width: 820px;
    padding: 0px 25px;
    margin: 0px auto;
}

body {

    background-color: @all_bgcolor;
    background-image: url("/img/tlo.jpg");
    background-attachment: fixed;
    color: @all_text;
    font-family: Arial; font-size: 14px;
    margin: 0px;
    padding: 0px;
}

#siatka-winiety {
    
    border: none;
    border-collapse: collapse;
    width: 818px;
    font-size: 0px;
    line-height: 0px;
    
    tr, td { outline: none; }
    
    td {
        
        border: none;
        padding: 0;
        margin: 0;
        outline: none;
        width: 164px;
    }
}



a { color: @edge_color; text-decoration: none; }

#content-table {

    border-collapse: collapse;
    width: 100%;
    
    > tr > td, > tbody > tr > td {
        
        border: 0;
        padding: 0;
        
        &#content-cell {

            background-color: @flat_bgcolor;
            background-image: url("/img/bottomslice.jpg");
            background-repeat: no-repeat;
            background-position: 164px 0px;
            vertical-align: top;
            padding-top: 24px;
        }
        
    }
}

#content-table-border-donor {

    background-color: @edge_color;
    padding: 0px;
    padding-left: 1px;
    padding-right: 1px;
}

#fauxcol-cell {

    width: 213px + 22px - 1px;
    background-color: @flat_bgcolor;
    background-image: url("/img/fauxcol-edge.gif");
    background-repeat: repeat-y;
    background-position: right;
    vertical-align: top;
}

#main-menu {position: relative; z-index: 10 }

div.main-menu {
    
    padding-top: 28px;
    a {
        color: rgb(217, 225, 211);
        text-decoration: none;
        
        &:hover { color: @edge_color }
        
        &.current {
            
            color: @all_text;
            text-shadow: 3px 3px 3px rgba(0,0,0,0.66);
        }
        
        &.level0 {
            
            font-family: Comic Sans MS;
            font-size: 18px;
            font-style: italic;
            background-image: url("/img/menubullet.gif");
            background-position: 4px 8px;
            background-repeat: no-repeat;
            padding-left: 18px;
            
            &.current {
                
                background-image: url("/img/menubullet-current.gif");
            }
        }
        &.spacer {
            
            line-height: 4px;
        }
    }
    
    div.children {

        margin-left: 16px;
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 12px;
        
        &.level0 { margin-left: 40px; }
        
        a.current { font-weight: bold; }
    }
    div.spacer {
        
        height: 8px;
        
        &.level0 { height: 12px; }
    }
    div.group {
        
        margin: 8px 0;
    }
    
    > div.group {
        
        margin: 12px 0;
        
        &:first-child { margin-top: 0 }
    }
}





#footer-cell {

    background-color: @edge_color;
    background-image: url("/img/footerslice.jpg");
    background-repeat: no-repeat;
    background-position: -1px 0px;
    height: 61px;
}

#titlebar {

    height: 31px;
    position: relative;
}

#titleslot {

    position: absolute;
    font-family: Comic Sans MS;
    font-style: italic;
    color: @edge_color;
    font-size: 24px;
    bottom: 0px;
    font-weight: normal;
    line-height: inherit;
    margin: 0;
}

#titleunderline {

    position: absolute;
    bottom: 0px;
}

#contentslot {
    
    margin-right: 24px;
    margin-top: 16px;
    p { text-align: justify; }
}


#footer-cell {

    color: rgb(61, 102, 33);
    font-size: 10px;
    text-align: right;
    padding-right: 23px;
    padding-top: 20px;
    a { color: rgb(61, 102, 33); }
}

#flagbox {

    position: absolute;
    top:180px;
    right:610px;
    img { border: solid black 1px; }
}

@togglerw: 25px;
@togglerh: 100px;
@fbw: 348px;
@fbh: 558px;
@fbpadding: 5px;
@fbborder: 2px;
@fbcolor: rgb(58, 96, 166);
@fbround: 8px;

#likebox {
    
    position: fixed;
    top: 0px;
    right: 0px;
    -o-transition: right 400ms;
    -moz-transition: right 400ms;
    -webkit-transition: right 400ms;
    transition-property: right 400ms;
    padding-left: @togglerw;
    
    & > .toggler {
        
        width: @togglerw;
        height: @togglerh;
        position: absolute;
        top: 0px;
        left: 0px;
        background: transparent url(/tng/img/facebook-left.png);
    }
    
    & > .frame {
        
        border-left: solid @fbcolor @fbborder;
        border-bottom: solid @fbcolor @fbborder;
        border-bottom-left-radius: @fbround;
        background-color: @fbcolor;
        
        & > .canvas {
            
            padding: @fbpadding;
            background-color: white;
            
            //for Opera, who won't clip inner DIV to rounded corners of outer DIV
            border-bottom-left-radius: @fbround - @fbborder - 1px;
            
            & > .occluder {
                
                overflow: hidden;
                
                & > .fbslot { margin: -1px; }
            }
        }
    }
    
    &.hidden {
        
        right: 0px - @fbpadding + 1px - @fbw + 1px - @fbpadding - @fbborder;
    }
}

a.fancybox-item > img {
    
    border: none;
    margin: 0;
    margin-top: 0.5ex;
    
    &.left { margin-right: 12px; float: left; }
    &.right { margin-left: 12px; float: right; }
    
    &.noborder { border: none; }
}

#video-tn { border: solid #bfbfbf 1px; }


#sttw-poleca {

    @roundness: 8px;
    @white-h: 40px;
    @white-tilt: 0.7;
    
    cursor: pointer;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    > div {
        
        border: solid black 2px;
        padding: @roundness;
        &.white-field {
            
            position: relative;
            border-top-left-radius: @roundness;
            border-top-right-radius: @roundness;
            border-bottom: none;
            background-color: white;
            color: black;
            padding: @roundness;
            position: relative;
            
            > .text-1993 { position: absolute; left: @roundness; top: @roundness; }
            > .text-copyright { position: absolute; right: @roundness; top: @roundness; }
            > .text-poleca { text-align: center; letter-spacing: -1px; }
            > .sun-holder {
                text-align: center;
                > .sttw-sun { width: 80px; height: auto; }
            }
        }
        &.blue-field {
            
            border-bottom-left-radius: @roundness;
            border-bottom-right-radius: @roundness;
            border-top: none;
            background-color: #005493;
            text-align: center;
            
            > .sttw-holder {
                
                display: inline-block;
                > div {
                    
                    font-size: 12px;
                    display: block;
                    text-align: left;
                    color: white;
                    font-weight: bold;
                    > span {
                        text-shadow: black -2px 0px;
                        -o-text-shadow: black -2px 0px;
                    }
                }
                > .line-2 { padding-left: @white-tilt * 1em; }
                > .line-3 { padding-left: @white-tilt * 2em; }
                > .line-4 { padding-left: @white-tilt * 3em; }
            }
        }
    }
}