randio-radio/stile.css

/*=======================COMUNE=====================*/

html{
	width: 100%;
	height: 100%;
}

body {
  margin:0;
  font-family: monospace;
}

article:not(:target){
	display: none;
}

article{
	height: 100%;
}


#about{
	background: transparent;
	z-index: 10;
	/*
	border-left:solid 1em white;
	*/
	transition: border-left 3s ease-in 4s;
}

#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
{
	display:block;
}

#radio-wrapper{
	width:100%;
	/*margin: 0.5em 0 1.5em -3.7em;
	allineare il player con info-wrapper*/
	margin: 0.5em 0 1.5em 0em;
	justify-content: center;
}

#now-playing{
	margin: auto;
	width: 100%;
}

.text
{
	display:none;
	color:#333333;
	line-height: 1.5em;
	overflow-y: scroll;
	overflow-x: hidden;
}

.pd-style{
	background:white;
	border: solid 0.12em black;
	position: relative;
}

h3.pd-style{

}

.pdlet{
}

.pd-style::before{
        content: " ";
        display: block;
				position: absolute;
				background: black;
				width: 2em;
				height: 0.4em;
}

.pd-style::after{
        content: " ";
        display: block;
				position: absolute;
				background: black;
				width: 2em;
				height: 0.4em;
				bottom:0;
}

.text-wrapper{
	height:100%;
}

.text-wrapper > article{
	margin: 0;
	font-size: 1.2em;
}

.accordion-strip > a > h3{
	margin: 0;
	background: white;
	border:0.1em solid black;
	color:black;
	padding-left:0.4em;
	padding-right:0.4em;
}

.accordion-strip{
	display: flex;
	flex-wrap: wrap;
}

.accordion-title{
	text-decoration: none;
	display: block;
}

.text
{
}

.cookies{
	background:black;
	width:100%;
	height: 0%;
	position: fixed;
	text-align: center;
	left: 0;
	display: flex;
	bottom:0;
	animation-name: schiacciamento;
	animation-duration: 4s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.cookies > p{
	color: white;
	animation-name: scomparsa;
	animation-duration: 4s;
	animation-delay: 0.3s;
}

@keyframes schiacciamento {
		0% {height: 0em;}
		50% {height: 4em;}
		100% {height: 0em;}
}

@keyframes scomparsa {
		0% {color: transparent;}
		20% {color: white;}
		50% {color: white;}
		80% {color: transparent;}
}

/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){

	html{
		font-size:1.7em;
	}
}




@media screen and (max-width: 700px) {

	.accordion-strip{
		right: 0;
		border-top: 0.1em solid black;
	}

	.accordion-strip > a > h3{
		margin-top:0em;
	}

	#about{
		bottom:0 !important;
	}
}


@media screen and (max-width: 999px) {

	body{
		justify-content: center;
		flex-wrap: wrap;
		display: flex;
	}

	main{
		position: relative;
		width: 100%;
		max-width: 45em;
		padding-bottom: 4em;
	}

	aside{
	}

	  nav {
			flex-wrap: wrap;
			position: relative;
			padding:2em;
	  }

		p{
			max-width: 40em;
		}

		#about{
		padding-right: 1em;
		}

		#logo{
			height:7em;
			flex: 1 1 100%;
		}

		#logo > div{
		margin: auto;
		}

		#info-wrapper{
		padding: 0 1em 0 1em;
		}

		#description-wrapper{
			padding: 0 1em 0.5em 1em;
		}

	 #ring-wrapper{
		 position:absolute;
		 bottom:10em;
		 justify-content:center;
		 width:100%;
		 padding-bottom:2em;
		 padding-top:2em;
		 display:flex;
		 flex:1 1 100%;"
		}

		#radio-info{
			display: flex;
			flex-wrap: wrap;
		}

		.accordion-strip{
			bottom: 0;
			position: absolute;
			margin-top: 5em;
		}

		.accordion-title{
			flex: 1 1 auto;
		}

		.info-wrapper {
			padding:1em;
		}

		.text{
		}

		.text > *{
			max-width: 35em;
			padding: 0 5% 0 1%;
			list-style-type: none;
		}

		.text-wrapper{
			padding: 1em 1em 19em 1em;
			overflow:hidden;
		}

		.text-wrapper > article{
			padding: 0;
			width: 116%;
		}
}


@media screen and (min-width: 1000px) {

		nav {
		  -moz-box-shadow:    0 0 10px #000000;
		  -webkit-box-shadow: 0 0 10px #000000;
		  box-shadow:         0 0 10px #000000;
		  flex: 1 1 100%;
			height:7em;
			display: flex;position: fixed;
			width: 100%;
			background: white;
			z-index: 20;
		}

		main {
			padding-left: 5em;
			padding-top: 2em;
		}

		article{
			overflow: hidden;
			width: 43em;
		}

		.text-wrapper{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		#radio-info{
		max-width: 30em;
		}



		#now-playing{
		}

		#piece-text
		{
			border: solid 1px black;
			width:100%;
		}

		#radio-column{
			flex: 0 1 18%;
			padding-top:5em;
		}

		#piece-text > h3{
			padding-left: 1em;
			padding-right: 1em;
		}

		#description-wrapper{
			width: 23em;
			margin: 0 0 0 1em;
		}

		#about{
			height: 100vh;
/*			right: -61%; */
/* ====================== */
			right:0;
			opacity: 0;
			transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
/* ====================== */
			max-width: 60%;
			position: fixed;
			z-index: 33 !important;
			padding: 0 0 0 1%;
			top:0;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
		}

		.about-bar{
			position: fixed;
			right: 0em;
			height: 100%;
			width: 1em;
			top: 0;
			display: inline-block;
			z-index: 43;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
		}

		input[type=checkbox]:checked + label + h5 + #about{
			/*
			right:0em;
			border-left: solid 1em black;
			transition: border-left 3s ease-in;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
			*/
			opacity:1;
			transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
		}

		input[type=checkbox]:not(:checked) + label + h5 + #about{
			/*
			right:0em;
			border-left: solid 1em black;
			transition: border-left 3s ease-in;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
			*/
			opacity:0;
			transition: opacity 0.6s linear 0.1s;
		}

		input[type=checkbox]:active + .bang::after{
			background: black;
		}

		.bang{
			position: fixed;
			border: solid 1pt black;
			top: 0;
/*			right: 4em;*/
			right: 1em;
			width: 1.6em;
			height: 1.6em;
			padding: 0;
			margin: 0.4em 0.4em 0;
			z-index: 60;
		}

	.bang::after{
		width: 0;
    height: 0;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
    border-top: black;
    position: absolute;
    content: "";
    left: -0.8em;
    background: white;
    padding-left: 0.8em;
    padding-bottom: 1.6em;
    padding-right: 0.8em;
    border-radius: 1em;
    border: solid 1pt black;
    margin-left: 0.7em;
    top: -0.1em;
	 }

	 input[type=reset]:active{
    /* the reset button when mouse-down */
	 }

		.dx{
			background-color: aquamarine;
		}

		input[type="radio"]:checked + #about{
			right:0;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
		}

		.sx{
		background-color: black;
		}

		input[id="toggle-2"]:checked + .sx{
			right:60%;
			transition: right 1s cubic-bezier(.17,.84,.44,1);
		}

		input[id="toggle-2"]:checked + label + #about {
			transition: right 1s cubic-bezier(.17,.84,.44,1);
			right:0em;
		}

		label + h5{
			top: 0;
			right: 1.4em;
			position: fixed;
			margin: 0.7em 0 0 0em;
			padding: 0;
			font-size: 1em;
		}

		.text
		{
			max-width: auto;
			margin: 3em auto;
			padding-right: 2.5em;
			width: 42em;
			height: 45%;
		}

		.accordion-title{
			margin: 0.1em 0.5em 0 0.5em;
		}

		.accordion-strip{
			padding: 2em 8em 0 6em;
		}

		.accordion-strip > a > h3{
			margin-top:1em;
		}

		#ring-wrapper{
			bottom: 5.5em;
			position: absolute;
			width: 100%;
		}

		#logo > div{
			margin-left: 1em;
		}

		#news
		{
			display: flex;
			margin: 0 17em 0 4em;
		}

		#news-wrapper{
		}

		#pd-ring > table{
			margin:auto;
		}

		#now-playing > h2, #now-playing > h3{
			background: none;
			border:solid 1pt black;
			flex:1 1 100%;
			padding-left:1em;
			padding-right:1em;
			margin-bottom: 0;
			margin-top: 1em;
		}

		audio {
		  background-color:#000000;
		}

		.pd_ring {
		    width:260px;
		    height:75px;
		    background-color:"#FFFFFF";
		}

		.pd_ringnext {
		    width:55px;
		    height:25px;
		    vertical-align:middle;
		    border:none;
		}

		.pd_ringlist {
		    width: 62px;
		    height: 25px;
		    vertical-align:middle;
		    border:none;
		}

		.pd_ringrandom {
		    width:63px;
		    height:25px;
		    vertical-align:middle;
		    border:none;
		}

		.pd_ringprevious {
		    width:80px;
		    height:25px;
		    vertical-align:middle;
		    border:none;
		}

		.pd_ringinfo {
		    width:260px;
		    height:50px;
		    vertical-align:middle;
		    border:none;
		}

}

@media screen and (min-height: 701px) {
	.text{
		height:45%;
	}
}

@media screen and (max-height: 700){
	.text{
		height:65%;
	}
}