@import "reset";
@import "fontface";
@import "adapted960";

/* Variables
----------------------------------------------------------------------------------------------------*/

@background: #F2F2F2;
@primary: purple;
@secondary: grey;
@tertiary: white;

.smallFont {
	font: 8pt/11pt ariel, Helvetica Neue, sans-serif, Ariel; letter-spacing: 0;
}

.mediumFont {
	font: 10pt/16pt ariel, Helvetica Neue, sans-serif, Ariel; letter-spacing: 0; font-weight: bold;
}

.largeFont {
	font: 13pt/16pt ariel, Helvetica Neue, sans-serif, Ariel; letter-spacing: 0; font-weight: bold;
}

.displayFont {
	font: 60px/60px 'BPdotsRegular', Arial, sans-serif; letter-spacing: 2px;
}

/* Mixins
----------------------------------------------------------------------------------------------------*/

.boxRadius (@radius: 5px){
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

.reflect{
	-webkit-box-reflect:below -20px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
	box-reflect:below -20px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
}

.opacityfilter{
	/* CSS3 opacity */
	opacity: 0.3;
	/* IE opacity */
	filter: alpha(opacity=30);
}
.opacitybackgroundfilter{
	/* CSS3 opacity */
	opacity: 0.2;
	/* IE opacity */
	filter: alpha(opacity=20);
}

.btn {
	.boxRadius(20px);
	margin: 10px 10px 0px 0px;
	font-weight: bold;
	color: #666;
	text-shadow: 1px 1px 1px white;
	padding: 5px 20px 5px 20px;
	border-style:solid;
	border-width:1px;
	border-color: white;
	background-color: @background;
	cursor: pointer;	
}

.btn:hover {
	background-color: @secondary;
}


/* structure
----------------------------------------------------------------------------------------------------*/

body{
	.smallFont;
	background-color: @background;
	
	#wrapper{
		header {
			.grid_12;
			display: block;

			#logo_animation{
				.grid_10;
				.opacityfilter;
				visibility: hidden;
				text-transform: uppercase;
				.displayFont;
				color: @primary;
				text-shadow: @primary 0 0 4px;
				margin: 80px 0px 80px 100px;
			}
/*
			#logo_animation:before {
				content: "###################"; position: absolute; .opacitybackgroundfilter;
			}
*/
		}
		
		a {
			text-decoration: none;
			color: inherit;
		}
		
		img {
			.grid_3;
		}
		
		#content{
			.grid_12;
			.grid_setup;
			
			#sideNav{
				.grid_3;
				.grid_setup;
	
				li{
					width:30px;
					position: relative;
					left: -20px;
					padding: 5px 20px 6px 20px;
					background-color: @tertiary;
					margin-bottom: 5px;
				}
				
				li:hover {
					background-color: @secondary;
					color: white;
				}
	
	
				#categories {
					margin: 15px 0 10px 0;

					ul{
						padding-left: 30px;
					}

					li {
						display: block;
						color: @secondary;
						background-color: @background;
					}
					
					li:hover {
					color: @primary;
					}
				}
			}
			
			article{
				.grid_9;
				.grid_setup;

				h1 {
					.largeFont;
				}
				
				.gallery {
					.grid_3;
					.grid_setup;
	
					.listImage {
						background-color: black;
						overflow: hidden;
						height: 165px;
						
						img {
							margin-top: 20px;
						}
					}

					p {
						margin-top: 15px;
						text-transform: uppercase;
						color: @secondary;
					}

				}
							
				.gallery:nth-child(2+3) {
					.alpha;
				}

				h1 {
					margin-bottom: 20px;
				}

				
				p:nth-child(3) {
					margin: 10px 0 0 0;
				}

				.videolist {
				
					iframe {
						width: .grid_6;
						height: 250px;
						margin:20px 0px 10px 0px;
						display: block;
					}
					
					p {
						.grid_5;
					}
					
		
					p:nth-child(3) {
						margin-bottom: 10px;
					}
					
					.activity{
						margin: 10px 0px 10px 0px;

						p, a{
							font-weight: normal;
							margin: 0px 0px 0px 0px;
						}
						
						

					}
					
					
					
					img {
						width: 30px;
						display: block;
						float: left;
						margin-right: 10px;
					}
				}
				
				form {
					.grid_7;
					padding: 2em;
					border: @tertiary;
					background-color: @background - #111;
					border-style: solid;
					border-width: thin;
					
					label{
						.mediumFont;
					}
					
					h2 {
						.largeFont;
						margin: 0 0 20px 0;
					}
					
					input[type='text']{
						display: block;
						margin: 0 0 1em 0;
						width: 520px;
						border: 10px;
						border-color: @tertiary;
						border-style: solid;
						.mediumFont;
						
					}
					
					span {
						color: red;
						display: block;
						clear: both;
					}
					textarea{
						display: block;
						margin: 2em 0 1em 0;
						width: 520px;
						border: 10px;
						border-color: @tertiary;
						border-style: solid;
						.mediumFont;
	
					}
					input[type='submit']{
						.btn;
					}
				}
				
			}

			article:after #sideNav:after {
				content: "."; display: block; visibility: hidden; clear: both;
			}
		}		
		
		footer {
			.grid_12;
			.grid_setup;
			color: @secondary;
			margin-top: 50px;
			
			#sharethis {
				padding: 10px;
			}
			
			img {
				width: auto;
				position: relative;
				top: 5px;
			}
			section {
				.grid_3;
				.grid_setup;
				padding: 10px;

			}
		}
	}
}