Template:Team:TU-Eindhoven Website CSS

.active_1{ background-color: rgba(0, 0, 0, 0.5); } .Image{ width: 130px; height: 136px; position:absolute; left:50%; top:50%; margin-left:-65px; margin-top: -68px; } .Slide_Row{ height:300px; display: flex; position: relative; z-index: 1; width:800px; min-height: 100px; overflow: hidden; } a.Button{ z-index:999; position:absolute; right:20px; bottom:2px; width:125px; height:50px; border: solid black 1px; box-shadow: 1px 1px 1px black; font-size:20px; font-weight: bold; line-height: 50px; float:right; background:rgba(163, 16, 48, 1); text-align:center; color:white; display:block; transition: 0.5s; } a.Button:hover{ background:rgba(163, 16, 48, 0.8); } #Homepage_Video{ margin: 185px auto 0px; width:700px; border: #e6e6e6 solid 2px; } .Slide_Header{ border-bottom: dashed rgba(0,0,0,0.5) 1px; padding: 10px 0px 10px 0px; margin: 10px 20px 0px 50px; text-shadow:1px 1px 1px black; color: #083645; font-size: 45px; letter-spacing: 0px; } #Slideshow_Image_1{ width:300px; height:256px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top: -128px; } #Slideshow_Image_2{ width:300px; height:225px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top: -130px; } #Slideshow_Image_3{ width:300px; height:235px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top: -118px; } #Slideshow_Image_4{ width:300px; height:225px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top: -135px; } #Slideshow_Image_5{ width:200px; height:274px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top: -137px; } #Paused{ position:absolute; top:0px; right:0px; color:transparent; } #slideshow-wrap:hover #Paused{ color:black; } h1 { color: white } #slideshow-wrap { border-radius: 10px; display: block; height: 370px; min-width: 260px; max-width: 800px; margin: auto; margin-bottom: 50px; margin-top: 20px; position: relative; } #slideshow-inner { padding:5px; border: #e6e6e6 solid 2px; width: 100%; height: 100%; background-color: white; overflow: hidden; position: relative; } #slideshow-inner>ul { list-style: none; height: 100%; width: 500%; overflow: hidden; position: relative; left: 0px; -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); } #slideshow-inner>ul>li { width: 20%; height: 370px; float: left; position: relative; } #slideshow-inner>ul>li>img { margin: auto; height: 100%; } #slideshow-wrap input[type=radio] { position: absolute; left: 50%; bottom: 15px; z-index: 100; visibility: hidden; } #slideshow-wrap label:not(.arrows):not(.show-description-label) { position: absolute; left: 50%; bottom: -45px; z-index: 100; width: 12px; height: 12px; background-color: rgba(200,200,200,1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8); box-shadow: 0px 0px 3px rgba(0,0,0,.8); -webkit-transition: background-color .2s; -moz-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; } #slideshow-wrap label:not(.arrows):active { bottom: -46px } #slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) } #slideshow-wrap label[for=button-1] { margin-left: -36px } #slideshow-wrap label[for=button-2] { margin-left: -18px } #slideshow-wrap label[for=button-4] { margin-left: 18px } #slideshow-wrap label[for=button-5] { margin-left: 36px } #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 } #slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% } #slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% } #slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% } #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% } label.arrows { display:none; font-family: 'WebSymbolsRegular'; font-size: 25px; color: black; position: absolute; top: 50%; margin-top: -25px; display: none; opacity: 0.7; cursor: pointer; z-index: 1000; background-color: transparent; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; text-shadow: 0px 0px 3px rgba(0,0,0,.8); } label.arrows:hover { opacity: 1 } label.arrows:active { margin-top: -23px } input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 { right: -55px; display: block; } input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -55px; display: block; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px } input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px } input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px } .description { position: absolute; top: 0; left: 0; width: 260px; font-family: 'Yanone Kaffeesatz'; z-index: 1000; } .description input { visibility: hidden } .description label { font-family: 'WebSymbolsRegular'; background-color: rgba(255,255,240,1); position: relative; left: -17px; top: 00px; width: 40px; height: 27px; display: inline-block; text-align: center; padding-top: 7px; border-bottom-right-radius: 15px; cursor: pointer; opacity: 0; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; z-index: 5; color: rgb(20,20,20); } #slideshow-inner>ul>li:hover .description label { opacity: 1 } .description input[type=checkbox]:checked~label { opacity: 1 } .description .description-text { background-color: rgba(255,255,230,.5); padding-left: 45px; padding-top: 25px; padding-right: 15px; padding-bottom: 15px; position: relative; top: -35px; z-index: 4; opacity: 0; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; color: rgb(20,20,20); } .description input[type=checkbox]:checked~.description-text { opacity: 1 }