@import url(/_css/mixims.less);

/* Color Pallet */
@upurple:#5E2750;
@upurple_light:#77216F;
@upurple_dark:#2C001E;
@uorange:#DD4814;
@htext:#FFFFFF;
@text:#333333;
@shadow:rgba(0,0,0,0.3);

html, body {background:white; margin:0; padding:0; font-family:Ubuntu, sans-serif;}
.container{background:@upurple; height:auto; margin:0 auto; text-align:left;}
header{.gradient(@upurple, @upurple_dark); width:100%; position:relative;}
h1 {color:@htext; font-size:3em; font-weight:normal; margin:0; line-height:1em; .textshadow();}
.tagline {display:none;}
a, a:visited {color:@upurple_dark; text-decoration:none; border-bottom:1px dotted @upurple; .transition(.25s);
	&:hover {text-decoration:none; color:@upurple_light; .transition(.25s);}
}
nav{margin:10px; text-align:center;
	a, a:visited {font-family:Ubuntu, sans-serif; color:#FFFFFF; text-decoration:none; padding:3px; font-size:1.1em; border:none; display:inline-block; *display:inline; *zoom:1;
		&:hover {text-decoration:underline; color:#fff;}
	}
	&.home .home,
	&.tux .tux,
	&.guides .guides,
	&.products .products,
	&.support .support,
	&.contatc .contact,
	&.meego .meego,
	&.n900 .n900,
	&.n9 .n9 {/*color:lighten(@uorange, 10%);*/ text-decoration:underline;}
}
.sub-sections {width:100%; margin:0; padding:0; background:@upurple_dark;
	li {display:inline-block; *display:inline; *zoom:1; vertical-align:bottom; border-bottom:2px solid @upurple_dark; border-radius:7px 7px 0 0; margin-right:2px; .gradient(lighten(@uorange, 20%), @uorange); .transition(.25s);
		&:hover {.gradient(lighten(@uorange, 25%), lighten(@uorange, 5%)); .transition(.25s);}
	} 
	.selected {.gradient(lighten(@uorange, 50%), #fff); border-color:#fff;
		&:hover {.gradient(lighten(@uorange, 50%), #fff);}
	}
	a {border:none; color:white; padding:10px; display:block; .textshadow();
		&:hover {color:#fff;}
	}
	h2 {color:@upurple; text-decoration:none; margin:0; padding:12px 10px; font-size:1em; line-height:100%; .textshadow();}
}
.content {background:#FFFFFF; margin:0; width:auto; border:2px solid @upurple_dark; min-height:200px; text-align:justify;
	.inner {padding:10px;}
	li {color:@text;}
}
blockquote {background:#e7e7e7; font-family:Courier; padding:10px; line-height:100%; text-align:left;}
.faq li {margin:10px 0; border-top:1px solid @upurple;}
footer{.gradient(@upurple_dark, @upurple); width:%100; text-align:center; padding:8px 0;
	p {color:@htext; font-size:0.8em; margin:0;}
}
h3 {color:@upurple_dark; font-size:1.0em; line-height:0.6em; .textshadow();
	span {color:@upurple_light; font-weight:bold;}
}
h4 {color:@upurple; font-size:.95em; .textshadow();}
p {font-size:1em; line-height:1.2em; color:@text;}
hr {border:none; border-top:2px dotted @uorange;}

/* Tux Page */
.tuxImg {float:right; width:180px; margin:0 10px;}
.gallery {clear:both;
	.thumbnails {
		li {display:inline-block; *display:inline; *zoom:1; vertical-align:top; margin:5px auto; width:150px; text-align:center;}
		a {border:none; display:block;}
		h3 {margin:0; line-height:100%;}
	}
}
#gallery-overlay {height:100%; width:100%; position:fixed; top:0; left:0; cursor:pointer;
	img {position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; background:#fff; box-shadow:0 10px 50px -10px #2e2e2e;}
}

@media (min-width:800px) {
	.container {width:800px;}
	header {height:100px;}
	.title {font-size:4.5em;}
	.tagline {display:block; color:@htext; font-size:1em; margin:0.2em;}
	nav{position:absolute; bottom:0; right:0; margin:10px;}	
	.content{background:#FFFFFF url("/_img/background.png") no-repeat right top; margin:0; width:auto; min-height:400px;}
	.column {display:inline-block; width:380px; margin:0 8px; text-align:center; vertical-align:top;
		img { width:240px; margin:10px auto;}
		p {text-align:justify;}
		h3 {text-align:justify;}	
	}
}

@media (min-width:960px) {
	.container {width:960px;}
	.column {width:300px;}
}

@media (max-width:480px) {
	.tuxImg {float:none; margin:auto;}
}