/* =============================================================================
Site Styles
========================================================================== */


@import "variables.less";

body {

	button {
		
		background-color: @iniziativa;
		
	}

	
	#page-header {
		
		background-color: @iniziativa;
		height: auto;
		
	}
	
	#pages {
		
		padding-top: 0;
		background-size: 108px 289px;
		background-image: url('images/Iniziativa%20Pattern@2x.png');
		
		h1,h2,h3  {
			
			color: @iniziativa;
			
		}
		h1  {
			
			font-size: 1.4em;
			font-weight: 500;
			text-transform: uppercase;
			margin: 0;
			
		}
		
		h2  {
		
			color: @iniziativa-bg;	
			font-size: 1.1em;
			font-weight: 500;
			text-transform: uppercase;
			line-height: 1.3em;
			
			&.elenco {
				
				padding: 1.5em;
				margin-bottom: 0;
				border-radius: 1.5em 1.5em 0 0;
				text-transform: none;
				font-size: 1em;
				
			} //elenco
			
		}
		
		p {
			
			color: @black;
			
			.purple {
				
				color: @purple;
				
			}
			
			a, a:visited, a:hover  {
				
				color: @black;
				text-decoration: underline;
				
				&.button {

					display: inline-block;
					padding: 0.65em 1em 0.5em 1em;
					text-transform: uppercase;
					color: @button-tx;
					background-color: @button-bg;
					text-decoration: none;
					border-radius: 0.45em;
					font-weight: 500;
					
					&:hover  {

						background-color: @button-tx;
						color: @button-bg;
						
					}
					
				}
				
			}			
		}

		.center {
			
			text-align: center;
			
		}
		
		.right {
			
			text-align: right;
			
		}

		#tuttiatavola {
			
			max-width: 100%;
			margin: 0 auto;
			position: relative;
			
		}
		
		.sidebox {
			
			display: block;
			background-color: rgba(255,255,255,0.81);
			border-radius: 0.5em;
			margin-top: 2em;
			padding: 1em 0;
			font-weight: 500;
			text-transform: uppercase;
			
			&> * {
				
				margin: 0 1em;
				
			}
			
			h2 {
				
				color: @iniziativa;
				font-size: 1.2222222em;
				line-height: 1.179em;
				font-weight: 500;
				text-transform: uppercase;

				&.insegnante {
					
					color: @iniziativa-bg;
					
				}
			
			}

			p {
				font-size: 1em;
				line-height: 1.179em;
				
			} //p
			
			a {
				&.insegnante {
					
					color: @iniziativa-bg;
					
				}
			}
			button {
				
				margin-top: 1em;
				
				
				&.insegnante {
					
					background-color: @iniziativa-bg;
						
					
				}
				
			}
			
		} //sidebox
		
		.testo {
			
			background-color: rgba(255,255,255,0.81);
			padding: 2em;
			
			h1,h2,h3  {
				
				color: @iniziativa;
				
			}
			
		}

		.regione {
			
			margin-top: 1em;
			background-color: @iniziativa-bg;
			padding: 1em;

			a,h1 {
				display: inline-block;
				color: #FFF;
			}
			h1 {
				
				margin-left: 3em;
				line-height: 3em;
				
			}
			
		}//.regione

		#elenco {
			
			overflow-y: scroll;
			height: 15em;
			display: inline-block;
			border-top: 2px solid @iniziativa-darkgreen;
			background-color: @iniziativa-bg;
			padding: 1.5em 1.5em 3em 1.5em;
			border-radius: 0 0 1.5em 1.5em;
			
			p {
				
				color: @white;
				margin: 0 0.5em 0.5em 0.5em;
				
			}
						
		} // elenco
		
	} //#pages
	

	
}

/* =============================================================================
Media Queries
========================================================================== */

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 736px) and (max-width: 969px) {

	body {
	}
}

/* All Mobile Sizes */
@media only screen and (min-width: 600px) and (max-width: 736px) {
	body {
	}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (max-width: 600px) {
	body {
	}
}

/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {

	body {

	}
	
}