/*
Theme Name: Kil-a-Bytes
Theme URI: http://mckenzierobotics.org

Author: Luke Shumaker
Author URI: http://lukeshu.ath.cx

License: GNU General Public License
License URI: license.txt

Description: HTML5 Theme for FRC team 1024, a child theme of Twenty-Eleven
Version: 0.1

Template: twentyeleven
*/

@import "../twentyeleven/style.css";
@import "logo-style.scss";

$yellow         : #FFFF00;
$background-blue: #2210D2;
$highlight-blue : #0000FF; //<-lighter that background, darker than light
$light-blue     : #1E90FF;

@mixin gradient($color1, $color2) {
	background-color: $color1;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2});
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2)); // older syntax
	background-image: -webkit-linear-gradient($color1, $color2);
	background-image:    -moz-linear-gradient($color1, $color2);
	background-image:      -o-linear-gradient($color1, $color2);
	background-image:         linear-gradient($color1, $color2);
}

body {
	background-color: $background-blue;		
	#page {
		$border-width: 0.1em;
		border: {
			style: solid;
			width: $border-width;
			color: black;
			radius: 2em 2em 0 0;
		}
		header#branding {
			border: none;/* override inherit from twentyeleven */
			hgroup {
				margin: -$border-width;
				margin-bottom: 0;
				border: {
					style: solid;
					width: $border-width;
					color: #000099;
					radius: 2em 2em 0 0;
					bottom: none
				}

				overflow: hidden;
				box-shadow: 0 .15em 0 #AAAAFF inset;
				height: 175px;
				padding: 25px 50% 0 3em;
				background: {
					color: $light-blue;
					image: url('img/swoosh.png');
					repeat: no-repeat;
					position: right bottom;
				}
				a {
					text-decoration: inherit;
					color: inherit;
				}
				#team-name {
					@extend .logo-nowhite;
					font-size: 80px;
				}
				h2 {
					@extend .logo-nowhite;
					font-size: 40px;
				}
				#team-number {
					@extend .logo-white;
					position: absolute;
					bottom: 0.2em;
					right: 0.4em;
					font-size: 130px;
					line-height: 1em;
				}
			}
		}
		#access {
			box-shadow: none;
			border-top: solid 0.3em $yellow;
			@include gradient($light-blue, $highlight-blue);
			li:hover > a, a:focus {
				@include gradient($yellow, darken($yellow, 10%));
			}
		}
	}	
}

@media (max-width: 1050px) {
	body #page header#branding hgroup {
		#team-name {
			font-size: 60px;
		}
		h2 {
			font-size: 30px;
		}
	}
}
@media (max-width: 800px) {
	body #page header#branding hgroup {
		height: auto;
		background-image: none;

		#team-name{
			font-size: 3em;
		}
		h2 {
			font-size: 2em;
		}
		#team-number {
			font-size: 5em;
			position: relative;
			right: auto;
			&:before {
				text-shadow: none;
				transform: none;
				content: "FRC";
				color: white;
				font-family: serif;
				font-size: 0.2em;
				vertical-align: text-top;
			}
		}
	}
}
/*
div.menu-wp_nav_menu-container {
	margin: 0 .5em !important;
}
*/