/*
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 url('http://fonts.googleapis.com/css?family=Anton');
@import "../twentyeleven/style.css";
@import "twentyeleven-fix.scss";
@import "logo-style.scss";



$yellow         : #FFFF00;
$background-blue: #2210D2;
$highlight-blue : #0000FF; //<-lighter than 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 {
		//I wouldn't use px, but we get roundoff errors otherwise
		$border-width: 1px;
		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;
				$bg-width: 472px;
				$bg-height: 200px;
				$padding-top: 25px;
				height: $bg-height - $padding-top;
				padding: $padding-top $bg-width 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%));
			}
		}
	}	
}

@mixin small_branding {
	body #page header#branding hgroup {
		#team-name {
			font-size: 60px;
		}
		h2 {
			font-size: 30px;
		}
	}	
}

@mixin mobile_branding {
	body #page header#branding {
		hgroup {
			height: auto;
			background-image: none;
			padding: 2em;
			
			h1, h2 {
				clear:none;
			}
			#team-name{
				font-size: 3em;
				float: left
			}
			h2 {
				font-size: 2em;
				float: left;
			}
			#team-number {
				font-size: 5em;
				float: right;
				
				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;
				}
			}
		}
	}
}

#ie7, #ie8 {
	@include small_branding;
}

#ie6 {
	@include mobile_branding;
}

@media (max-width: 1050px) {
	@include small_branding;
}
@media (max-width: 800px) {
	@include mobile_branding;
}