/***
* su-pa.net // pinkytoes.com goes4 su-pa.net!
* df greetz you, 12.2016
***/

#siteInfo span {
    margin-top: -20px;
    padding: 0;
    display:inline-block;
    margin-top: 0;
    padding-right: 1rem;
    line-height: 1.5rem;
}
#siteInfo a{ font-weight: normal; margin-right: 1.2rem; }
#siteInfo a:hover{ font-weight: normal; margin-left:0.2rem;}
#siteInfo span b {display: inline-block; width: 8rem;}

.selPicsDocs span { display: block; }
.selPicsDocs span:first-child {margin-bottom: 0rem; }

/* img hover little animation */
figure a:hover { margin-left: 2px;}

/*#region IMAGES*/
label {
    display: inline-block;
    width: 250px;
    margin-left: 2%;
}
figure {
    display: inline-block;
    padding: 2%;
    padding-left: 0.6rem; /*****/
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
}
figcaption {
    margin: 0; padding: 0;
    margin-bottom: 1.3rem;
}
img {
    padding: 0px;
    border: 1px solid #dbd9d9;
    max-width: 100%;
    display: inline;
}
#allImgs img {
    margin: 0;
    padding: 0;
}
[id^=allImgs] {
    font-weight: normal;
    font-size: 0.9rem;
}
#allImgs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 1rem;
}
    #allImgs h2 {
        padding: 0;
        margin-left: 0.6rem;
        margin-bottom: 1.2rem;
        width: 100%;
        max-width: 100%;
        line-height: 2.4rem;
    }
/*#endregion IMAGES*/

/**{border: 1px solid red !important;}*/

/*#region DOCS*/
#allDocs {
    /*border: 1px solid #ffd800;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 2rem;
}

.docBox {
    width: 90%;
    margin-left: 0.6rem;
}
    .docBox h2, #allImgs h2 {
        border-bottom: 1px solid #bdbbbb;
        white-space: nowrap;        
        overflow: hidden;
        font-weight: normal;
        font-size: 1.5rem;
    }
    .docBox h2 {
        padding: 1.5%;
        margin-bottom: 0.5rem;
        width: 100%;
    }
        .docBox h2 span, #allImgs h2 span {
            font-weight: normal;
            font-size: 0.9rem;
        }
        .docBox h2:hover, #allImgs h2:hover {
            cursor: default;
        }
        .docBox a{
            word-wrap: break-word;            
        }
.docLnkToPage {
    background: url(../images/open-site.png) left bottom no-repeat;
    display: inline-block;
    margin: -6px auto;
    text-indent: -999px; /*don't show the link-text here, but let the info, acc ("seo") */
    width: 30px; height: 25px;
}
/*#endregion DOCS*/

/*#region ICONS*/
a[href$='.pdf'], a[href$='.PDF'], a[href*='.doc'], a[href*='.DOC'],a[href*='.xls'], a[href*='.XLS'],a[href*='.ppt'], a[href*='.PPT'],a[href*='.fla'], a[href*='.FLA'],a[href*='.java'], a[href*='.JAVA'],a[href*='.mp3'], a[href*='.MP3'],a[href*='.psd'], a[href*='.PSD'],a[href*='.swf'], a[href*='.SWF'],a[href*='.tex'], a[href*='.TEX'],a[href*='.txt'], a[href*='.TXT'],a[href*='.wav'], a[href*='.WAV'],a[href*='.xml'], a[href*='.XML'],a[href*='.zip'], a[href*='.ZIP'], a[href$='.exe'], a[href$='.EXE'], a[href$='.ps'], a[href$='.PS'], a[href$='.gz'], a[href$='.GZ'], a[href$='.mp4'], a[href$='.MP4'], a[href$='.rtf'], a[href$='.RTF'], a[href$='.mov'], a[href$='.MOV'], a[href$='.pps']  {
    background-repeat: no-repeat;
    padding: 1px 0 1px 25px;
}
/*mb later: make one pic*/
a[href$='.pdf'], a[href$='.PDF'] { background: url(../images/icons/pdf.png) left center no-repeat; }
a[href*='.doc'], a[href*='.DOC'] { background: url(../images/icons/docx.png) left center no-repeat; }
a[href*='.xls'], a[href*='.XLS'] { background: url(../images/icons/xlsx.png) left center no-repeat; }
a[href*='.ppt'], a[href$='.PPT'] { background: url(../images/icons/ppt.png) left center no-repeat; }
a[href$='.fla'], a[href$='.FLA'] { background: url(../images/icons/fla.png) left center no-repeat; }
a[href$='.swf'], a[href$='.SWF'] { background: url(../images/icons/swf.png) left center no-repeat; }
a[href$='.java'], a[href$='.JAVA'] { background: url(../images/icons/java.png) left center no-repeat; }
a[href$='.mp3'], a[href$='.MP3'] { background: url(../images/icons/mp3.png) left center no-repeat; }
a[href$='.tex'], a[href$='.TEX'] { background: url(../images/icons/tex.png) left center no-repeat; }
a[href$='.txt'], a[href$='.TXT'], a[href$='.rtf'], a[href$='.RTF'] { background: url(../images/icons/txt.png) left center no-repeat; }
a[href$='.wav'], a[href$='.WAV'] { background: url(../images/icons/wav.png) left center no-repeat; }
a[href$='.xml'], a[href$='.XML'] { background: url(../images/icons/xml.png) left center no-repeat; }
a[href$='.zip'], a[href$='.ZIP'], a[href$='.gz'], a[href$='.GZ'] { background: url(../images/icons/zip.png) left center no-repeat; }
a[href$='.psd'], a[href$='.PSD'] { background: url(../images/icons/psd.png) left center no-repeat; }
a[href$='.mov'], a[href$='.MOV'] { background: url(../images/icons/mov.png) left center no-repeat; }
a[href$='.exe'], a[href$='.EXE'], a[href$='.ps'], a[href$='.PS'], a[href$='.mp4'], a[href$='.MP4'], a[href$='.pps'] { background: url(../images/icons/nn.png) left center no-repeat; }
/*#endregion ICONS*/

/*#region OTHER*/
header {
    margin-left: 0.5rem;  /*****/
}
    header img {
        border: 0;
        margin-left: -0.5rem;
    }
    header h1 {
        font-weight: normal;
        margin-bottom: 0.4rem;
        margin-top: 1rem;
    }
.imgLogo {
    transition: none;
    max-width: 616px;
}
    .imgLogo:hover {
        margin-left: 0;
    }

.selPicsDocs{ margin: 1rem 0 -0.3rem 0.5rem;} /*****/
.selPicsDocs a{ margin-right: 1.5rem; }
footer { margin-top: 3rem; margin-bottom: 1rem; }

/*little animation*/
a { transition: margin-left 0.2s; }
a:hover { margin-left: 4px; }
#moreImages{ padding-left: 0.6rem; }
#moreImages a { padding-right: 1rem; }
#moreImages .btnBack, #navLinkImgs .btnBack { display: block; margin-top: 2rem; height: 3rem; line-height: 3rem; max-width: 400px; /* 4fat & other fingers */ }
#navLinkImgs .btnBack { margin-top: 0.7rem; }

/*#endregion OTHER*/

/*#region MEDIA SCREEN 520PX*/
@media screen and (min-width: 520px) {
    header { margin-left: 2rem; }
    header img {
        border: 0;
        margin-left: -2rem;
    }
    .selPicsDocs{ margin: 1rem 0 -0.3rem 2rem; }
    figure { padding-left: 2rem; }
    #allImgs h2 {
        padding: 0;
        margin-left: 2rem;
    }
    .docBox {
        width: 350px;
        margin-left: 1.8rem;
    }
    .docBox h2 { max-width: 350px; }
    #moreImages{ padding-left: 2rem; }
    #moreImages .btnBack { margin-top: 0.3rem; }
    #moreImages a { padding-right: 0.5rem; }
    #navLinkImgs .btnBack { margin-top: 0rem; line-height: 1.5rem; }
    footer { margin-bottom: 0;}
}
/*#endregion MEDIA SCREEN 520*/