/***
* su-pa.net // pinkytoes.com goes4su-pa.net!
* df greetz you, 10.2016
***/

/*#region general*/
body {
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    background: #e2e1e0;
    background: #f2f2f2;
    /*background-image: url('../images/bg-noise.jpg');*/  /* todo: yes or no or other? */
    font-size: 1rem;
    line-height: 1.467;
    font-family: "Segoe UI","Segoe WP",Arial,Sans-Serif;
    color: #5c5252;
}
a:link{ text-decoration: none; color: #434FC1; }
a:hover{ }
a:active{ outline: 0; }
a:visited{}
.doNotShow { display: none; }
main{ display: block; }
.overAll{
    margin: 0 auto;
    padding-left: 0.1rem;
    width: 100%;
}
header {
    margin: 1.5rem 0.6rem 0 0.6rem;
    position: relative;
}
.top{
    width: 100%;
    display: inline-block;
}
.top p a { font-size: 1rem; }
.top p a:hover {
    color: #72b1e6;
    text-decoration: dotted; /*to-do*/
}
.imgLogo{
    width: 100%;
    display: block;
}
.titTop {
    display: block;
    font-size: 1.7em;
    padding-bottom: 0.8rem;
    padding-right: 0.8rem;
    font-family: 'Open Sans', sans-serif;
    color: #3286C4;
}
.top p {
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 1rem;
}
.linksOther{ padding: 2rem 0.6rem; }
.linksOther h1{
    margin: 0 0 0.1rem 0;
    font-size: 1.2rem;
    font-weight: normal;
}
.titTop > span { white-space: nowrap; }
#btnScrollToTop{
    display: none;
    right: 5px; bottom: 5px; position: fixed; cursor: pointer; opacity: 1; z-index: 3; border: 0;
}
footer{
    height: 3rem;
    text-align: center;
    /*margin: .4rem;*/
}
/*#endregion*/

/*#region SEARCH*/
#selSearch {
    position: relative;
	z-index: 2;
    padding: 0;
    margin: 1.5rem 0.6rem 2rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff url('../images/select-ETHZ.png') no-repeat 90% 50%;
}
#selSearch select {
    padding: 15px 8px;
    font-size: 1.2rem;
    border: none;
    outline: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.selWebsiteBox {
    position: relative;
    z-index:4;
    width: 250px;
}

/*modal window*/
.modal{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgb(0, 0, 0);
    opacity: 0;
    -webkit-transition: opacity 250ms ease-in;
    -moz-transition: opacity 250ms ease-in;
    transition: opacity 250ms ease-in;
}
.modalSearch {
    z-index: 3;
    opacity: 0.6;
}
/*#endregion SEARCH*/

/*#region boxes*/
#archivedWebsites {
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.website {
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
    margin: 0.6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    font-size: 0.8rem;
    z-index:0;
}
    .website:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.boxText {
    position: absolute;
    height: 880px;
    width: 100%;
    top: 0%;
    -moz-transition: ease-out 0.5s;
    -o-transition: ease-out 0.5s;
    -webkit-transition: ease-out 0.5s;
    transition: ease-out 0.5s;
}
/***********************************************************/
a>i:first-of-type{
    font-family: "ethwebarchiv";
    font-style: normal;
    speak: none;
    text-align: center;
    margin-left: .5em;
    font-size: 0.8rem;
    display: inline-block;
}
a:hover i:first-of-type{
    color: #ff0000;
}
hr{ display: none; } /*todo*/

.addHeight{ /* 4borderline cases: add a little height => make a big box */
    display: inline-block;
    width: 100%;
    max-width: 200px;
    height: 2.5rem;
}

.btnShutter {
    position: absolute;
    z-index: 99;
    /*background-color: #EDDCDC;*/
    background-color: #F1F1F1;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 65px;
    line-height: 30px;
    padding: 20px;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    color: #535353;
    font-size: 1.1rem;
    outline: 0; /*no blue line around the button about, Opera */
    -ms-touch-action: manipulation;	/* IE10  no touch delay */
	touch-action: manipulation;		/* IE11+ */
}
    .btnShutter:hover {
        cursor: pointer;
    }
    .btnShutter:focus, .btnShutter:active{
        outline: none;
    }

.part1 {
    background-color: white;
    height: 50%;
    padding: 196px 20px 20px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:#6C6767;
    background-repeat: no-repeat;
    background-position: top, center;
    display: block;
}

.part1 h2 {
    /*color: #7F6F6F;*/
    color: #6c5d5d;
    font-size: 1rem;
    font-weight: normal;
    /*font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4rem;
    height: 42px;
    /* TODO: hyp or not hyp? */
    /*-moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;*/
}

.part2 {
    background-color: white;
    height:440px;
    display: block;
    padding: 20px;
    color: #7F6F6F;
    display: table-cell; /* needed for box-resizing "to much text" */
    width: 100%;
}

    .part2 .text {
        color: #4a4141;
    }
.part1 a, .part2 a {
    display: inline-block;
    padding-bottom: 0.8rem;
    -ms-word-break: break-all;
    word-break: break-all;
}
.backTitle {
    display: block;
    font-family: 'Times New Roman', Georgia, serif;
    font-weight: 100;
    font-size: 1.4rem;
    line-height: 1.7rem;
    padding-bottom: 0.4rem;
    font-variant: small-caps;
    word-break: break-all;
}
.backShortDesc {
    color:#968181;
    font-size: 0.9rem;
    display: inline-block;
    padding-bottom: 0.9rem;
    line-height: 1.1rem;
}
.noImgOrDoc{
    color:#b7a5a5;
}
/*#endregion boxes*/

/*#region todo*/
.titTop, .txtBgBlack {
    font-family: 'Raleway-ExtraLight', Arial, sans-serif; 
    color: #3e3d3d;
    font-weight: 600;
    font-size: 20px;
}
.txtBgBlack {
    font-family: 'Raleway-ExtraLight', Arial, sans-serif;
    background-color: #000000;
    color: white;
    font-weight: 100;
    font-size: 44px;
}
.txtIntro {
    display: none;
}