html { background: #FFF; font-family: Futura, Arial, sans-serif; color: black; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body { font-size: 85%; }
#top { width: 976px; height: 80px; padding: 10px 10px 10px 10px; border: none; position: absolute; top: 10px; left: 50%; margin-left: -488px; }

#contact-link, #contact-table { width: 976px; padding: 0 20px; margin-bottom: 50px; border: none; position: relative; top: 110px; left: 50%; margin-left: -488px; }
#contact-link a {
    margin: 0 auto;
    text-decoration: none;
    width: 310px;
    padding: 10px;
    display: block;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgb(200, 200, 200);
}

#contact-link a {
    color: rgb(100, 100, 100);
    box-shadow: 4px 4px rgb(200, 200, 200);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#contact-link a:hover {
    color: rgb(30, 30, 30);
    box-shadow: 4px 4px rgb(0, 159, 223);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* contact table */
#contact-link { display: none; }

#contact-table {
    border: 1px solid rgb(200, 200, 200);
    box-shadow: 4px 4px rgb(200, 200, 200);
    color: rgb(50, 50, 50);
    box-sizing: border-box;
}

#contact-table .contact-grid {
}

#contact-table .contact-grid .contact-column {
    display: inline-block;
    width: 32%;
    margin-bottom: 15px;
}

#contact-table .contact-grid .contact-column p,
#contact-table .contact-grid .contact-column a {
    display: block;
    margin: 0;
    margin-bottom: 7px;
}

#contact-table .contact-grid .contact-column .contact-name,
#contact-table .contact-grid .contact-column .contact-function {
    font-weight: bold;
}

#contact-table .contact-grid .contact-column .contact-name {
    font-size: 110%;
}

#contact-table .contact-grid .contact-column .contact-function {
    font-size: 85%;
}

#contact-table .contact-grid .contact-column a {
    text-decoration: none;
}

#contact-table .contact-grid .contact-column a {
    color: rgb(100, 100, 100);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#contact-table .contact-grid .contact-column a:hover {
    color: rgb(30, 30, 30);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* /contact table */

#holder, #selection, #solution-list { width: 976px; padding: 10px 0px 10px 0px; border: none; position: absolute; left: 50%; margin-left: -488px; }
#holder, #selection { height: 920px; top: 330px; }
/* #holder { background: url('../img/Edytor_BG.jpg'); } */
#selection { background: #FFF; height: 1150px; }
.selection-nogl { height: 520px !important; }

#solution-list { height: 20px; top: 1030px; }
.solution-list-lowered      {  top: 1510px !important; }
.solution-list-lowered-nogl {  top: 870px !important; }

.solution-display { cursor: pointer; display: block; width: 976px; height: 50px; margin-bottom: 10px; border: 1px solid rgb(230, 230, 230); position: relative; }
.solution-display > .solution-display-name { position: absolute; width: 98%; top: -12px; left: 10px; }
.solution-display > .solution-display-open { position: absolute; top: -2px; right: 20px; display: none; }

#logotyp { width: auto; height: 50px; margin: 15px 0px 0px 20px; float: left; }
#tytul-edytora { width: 700px; float: left; padding: 26px 0px 0px 40px; font-size: 1.5em; margin: 0; }

.button { cursor: pointer; }
.buttonColumnCommon { position: relative; }
.buttonColumnContainer { float: left; margin-right: 0px; }

.buttonColumn     { width: 152px; min-height: 630px; padding-top: 20px; padding-bottom: 20px; margin-left: 8px; margin-right: 8px; }
.buttonColumnWide { width: 274px; min-height: 630px; padding-bottom: 20px; }

.buttonHolder, .buttonHolderWide { border: 1px solid rgb(200, 200, 200); }
.buttonHolder { position: relative; left: 11px; width: 131px; height: 68px; margin-bottom: 20px; font-size: 95%; }
.buttonHolderWide { position: relative; left: 12px; width: 262px; height: 80px; margin-bottom: 20px; }


.buttonHolder .text { width: 100px; position: absolute; top: 9px; left: 27px; text-align: center; font-weight: bold; margin: 0; padding: 0; color: #EEE; }
.buttonHolder p {  pointer-events: none; }
.button { position: absolute; top: 0px; left: 0px; }
.buttonHolder .num { font-size: 3em; position: absolute; top: 8px; left: 6px; padding: 0; margin: 0; width: 20px; color: rgba(198, 198, 198, 0.8); }

h1 { margin: 0; padding: 0; text-align: left; margin-left: 12px; font-weight: bold; font-size: 1em; }
hr { margin-left: 12px; width: 60px; height: 2px; border: none; border-bottom: 4px solid rgb(0, 159, 223); margin-bottom: 40px; }
.hr-rozwiazanie { margin-bottom: 8px; }

.buttonNum { position: absolute; top: 1px; left: 1px; z-index: 2; pointer-events: none; display: none; }
.buttonText { position: absolute; top: 0px; left: 0px; z-index: 3; pointer-events: none; display: none; }
.buttonDisabled { pointer-events: none; }

.buttonManagement { padding: 0; margin: 0; cursor: pointer; width: 91px; height: 47px; box-shadow: 3px 3px rgb(200, 200, 200); border: 1px solid rgb(200, 200, 200); }
.buttonManagementHighlight { box-shadow: 3px 3px rgb(203, 62, 39); }

#button-reset-text, #button-open-text, #button-close-text { margin-left: 8px; }

#button-open-div { position: absolute; bottom: 5px; right: 35px; width: 91px; height: 47px; }
#buttonOpen, #buttonOpenText { position: absolute; top: 0px; left: 0px; width: 91px; height: 47px; }
#buttonOpenText { pointer-events: none; }

#button-reset-div { position: absolute; bottom: 5px; left: 8px; width: 100%; height: 47px; }
#buttonReset, #buttonResetText { position: absolute; top: 0px; left: 0px; width: 100%; height: 47px; }
#buttonResetText { pointer-events: none; }

#button-close-div { position: absolute; bottom: 0px; right: 45px; width: 91px; height: 47px; }
#buttonClose, #buttonCloseText { position: absolute; top: 0px; left: 0px; width: 91px; height: 47px; }
#buttonCloseText { pointer-events: none; }

.button-type-normal { width: 131px; height: 68px; }
.button-type-wide   { width: 262px; height: 80px; }

.button-idle,   .button-idle-wide   {
    box-shadow: 4px 4px rgb(200, 200, 200);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.button-hover,  .button-hover-wide  {
    box-shadow: 4px 4px rgb(246, 192, 35);
}
.button-active, .button-active-wide {
    box-shadow: 0px 0px rgb(246, 192, 35) !important;
    background: rgba(0, 0, 0, 0.07);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.button-dl-hover { box-shadow: 3px 3px rgb(246, 192, 35); }

.download-page-photo { border: 0; width: 570px; height: 430px; position: absolute; top: 70px; right: 40px; }

.button-num  { margin: 0; padding: 0; font-size: 1.3em; color: rgb(111,111,110); position: absolute; bottom: 2px; right: 5px; }
.button-text   { line-height: 1.1em; margin: 0; padding: 0; padding-top: 5px; padding-left: 8px; color: rgb(111,111,110); }
.button-text-e { line-height: 1.1em; margin: 0; padding: 0; padding-top: 9px; font-size: 10pt; padding-left: 8px; color: rgb(111,111,110); }

.button-num, .button-text, .button-text-e { z-index: 1; }

.subtitle { color: rgb(111, 111, 110); font-size: 0.7em; line-height: 0.5em; }

#contents { width: 100%; height: 100%; padding: 0; margin: 20px 0px 0px 8px; position: relative; }

#numer-rozwiazania {
    font-size: 1em;
    position: absolute;
    font-weight: bold;
    top: 10px;
    left: 30px;
    margin: 0;
}

#solutions-count {
    margin-left: 10px;
    color: rgb(0, 159, 223);
}


#numer-rozwiazania-nr { /* sam numer z całego napisu */ }

.download-div { width: 260px; height: 400px;  }

#pdf, #dwg { position: absolute; top: 70px; }
#pdf { left: 0px; }
#dwg { left: 160px; }

.icon-separator { width: 100%; height: 100px; }

.dl-pdf, .dl-dwg, .dl-pdf-e, .dl-dwg-e { margin: 0; padding: 0; height: auto; background-size: contain; position: absolute; right: 4px; bottom: 5px; /* filter: grayscale(100%) opacity(0.5); */ border: 0; text-decoration: none; }
.dl-pdf, .dl-dwg { width: 20px; }
.dl-pdf-e, .dl-dwg-e { width: 16px; }

.download-link { clear: both; float: left; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; }

.download-pdf {}
.download-dwg {}
.download-all {}

#download-all-div { position: absolute; left: 10px; bottom: 0px; }

.bottom-spacer { width: 100%; display: block; height: 150px; }


.buttonHolderSolution {
    width:  75px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    text-align: left;
}

.buttonHolderSolution-e {
    width:  64px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    text-align: left;
}

.solution-button {
    width:  75px;
    height: 30px;
}

.solution-button-e {
    width:  64px;
    height: 30px;
}

.webgl-animation {
    border: 2px dotted #EEE;
    position: relative;
    float:    left;
    display:  inline-block;
    width:    860px;
    height:   510px;
    margin-left: 52px;
    text-align: center;
    margin-right: 4px;
}

.webgl-animation-frame {
    border: none;
    width:  100%;
    height: 100%;
}

.animation-separator {
    width: 100%; height: 4px;
    clear: both;
}

.rozwiazanie-komponent {
    /* border: 1px dashed #EEE; */
    border: 1px dashed #FFF;
    position: relative;
    float:    left;
    display:  inline-block;
    width:    189px;
    height:   390px;
    text-align: center;
    margin-right: 4px;
}
.rozwiazanie-komponent-e {
    width:    156px;
    height:   370px;
}


.rozwiazanie-komponent-nazwa {
    padding: 0px;
    margin:  8px 0px 0px 0px;
    height:  38px;
}
.rozwiazanie-komponent-nazwa-e {
    font-size: 10pt;
    height: 46px;
}

.solution-bg-on {
    background: rgba(0, 159, 223, 0.1);
}


.solution-img-small {
    width: auto;
    height: 270px;
}
.solution-img-small-e {
    height: 235px;
}

.animation-button-holder {
    position: relative;
    width: 100%;
    height: 50px;
}

.animation-selection-button {
    /* display: inline-block; */
    float: left;
    position: relative;
    width: 184px;
    margin-right: 9px;
    height: 30px;
    border: 1px solid rgb(200, 200, 200);
}
.animation-selection-button-e {
    /* display: inline-block; */
    float: left;
    position: relative;
    width: 151px;
    margin-right: 9px;
    height: 30px;
    border: 1px solid rgb(200, 200, 200);
}

.animation-selection-button > .button-text {
    padding-left: 3px;
}

.animation-selection-button-e > .button-text {
    padding-left: 3px;
    font-size:   9pt;
    margin-top: -3px;
    line-height: 11pt;
}


.animation-selection-button-active {
    box-shadow: 4px 4px rgb(0, 159, 223) !important;
    background: rgba(0, 0, 0, 0.07);
    top: 13px;
    pointer-events: none;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}