@import url('reset.css');
@import url('default-mobile.css');
@import url('social.css');


#social { width: 100%; }

#ads1 {
	width: 100%;
	height: auto;
	min-height: 50px;
	max-height: 90px;
	margin-bottom: 10px;
}
#ads2 {
	margin-left: auto;
	width: 300px;
	height: 600px;
	float: right;
}


#testo .interno table {
	width: 100%;
	margin:10px 0px;
}

#testo .interno table td {
	width:200px;
}

#testo .interno table td.big {
	width:300px;
}

#testo .interno table .freccia {
	background: url("img/freccia.png") no-repeat 5px 5px;
	padding: 0px 10px;
}


#rime_gui {
	float: left;
	width: 430px;
}
#rime_gui input[type=text] { width: 100%; padding: 5px 24px 5px 5px; height: 32px;   font-size: 16px; }
#rime_gui label {
	display: block;
  	font-size: 16px;
  	line-height: 28px;
  	font-weight: bolder;
}
#rime_gui #btn_confirm {
	margin-top: 10px;
	display: block;
	margin-left: auto;
	font-size: 24px;
	text-align: center;
	padding: 20px;

	cursor: pointer;
}

#results {
	display: none;
	-webkit-transform: translate3d(0, 0, 0);
}
#results ul {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: white;
}
#results ul::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#results ul::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#results ul::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

#results span.titolo {
	display: block;
	width: 100%;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
}

#results ul li {
	font-size: 14px;
	padding: 8px 5px;
	text-transform: uppercase;
}
#results ul li:nth-child(odd) { background: #efefef; }

/********************************
Wrapper più piccolo del target
********************************/
@media screen and (max-width: 979px) {
	#rime_gui { width: 63%; }
	#testo .interno table td , #testo .interno table td.big { width: 100%; display: block; }
}

@media screen and (max-width: 845px) {
	#rime_gui { width: 48%; }
}


/********************************
Scatto GUI risultati parole: l'ads passa sotto l'elenco parole (bottone retry diventa visibile)
********************************/
@media screen and (max-width: 610px) {

	#rime_gui { 
		float: none;
		width: 100%; 
	}

	#results {
		float: none;
		width: 100%;

		height: auto;
		border-radius: 10px;
	}
	#results ul {
		width: 100%;
		height: auto;
		max-height: 200px;

		border: 2px solid #ccc;
		border-radius: 10px;
	}
	#ads2_container {
		float: none;
		width: 100%;
		height: 280px;
	}
	#ads2 {
		float: none;
		width: 300px;
		height: 250px;
		margin: 20px auto;
	}


}