//Variables
@max-width: 1200px;

@white: #ffffff;
@black: #333333;
@blue: #0e0059;
@medium-blue: #003da0;
@gold: #c38e5e;
@light-gold: #faf7f2;

//Imports
@import "grid.less";

//Semantic Grid System (http://semantic.gs/)
@column-width: 60;
@gutter-width: 20;
@columns: 12;
@total-width: 100%;

/********************
Reset Styles
********************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
b, strong {
	font-weight: bold;
}
i, em {
	font-style: italic;
}

/* float clearing for IE6 */
* html .clearfix{
	height: 1%;
	overflow: hidden;
}

/* float clearing for IE7 */
*+html .clearfix{
	min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	font-size: 0;
}

.dont-show { height: 0px; margin: 0px; padding: 0px; }

/********************
Page Styles
********************/

body {
	background: @white;
	font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
	font-size: 100%;
	line-height: 1.75em;
}

a, a:link, a:visited {
	border-bottom: 1px dotted @blue;
	color: @blue;
	text-decoration: none;
	&:hover {
		border-bottom: 1px dotted @medium-blue;
		color: @medium-blue;
	}
}

em {
	font-style: italic;
}

p {
	margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
	color: @black;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 0.5em;	
	text-shadow: 0 1px 0 @white;
	text-transform: capitalize;
}

h1 {
	color: @gold;
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

ul {
	li {
		list-style-type: disc; 
		margin: 1em 0 1em 2em;
	}
}

address {
	border-left: 3px solid @gold;
	color: @black;
	font-style: italic;
	font-weight: normal;
	padding-left: 1em;
}

/********************
Header
********************/

header {
	background-color: @white;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(lighten(@black, 78%)), to(@white));
	background-image: -webkit-linear-gradient(bottom, lighten(@black, 78%), @white);
	background-image:  -moz-linear-gradient(bottom, lighten(@black, 78%), @white);
	background-image:  -ms-linear-gradient(bottom, lighten(@black, 78%), @white);
	background-image:  -o-linear-gradient(bottom, lighten(@black, 78%), @white);
	border-bottom: 1px solid darken(@light-gold, 10%);
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	height: 7.4375em !important;
	position: relative;
	a, a:link, a:visited {
		border-bottom: 0px;
		font-weight: bold;
		text-decoration: none;
		&:hover { border-bottom: 0px !important; }
	}
	.logo {
		.column(3);
	}
	nav {
		.column(6);
		a:hover {
			color: lighten(@blue, 10%);
		}
	}
	ul {
		margin-bottom: 0px;
		li {
			font-weight: bold;
			float: left;
			list-style-type: none; 
			margin: 0;
			text-align: center;
			a, a:link, a:visited {
				border-right: 1px solid lighten(@black, 70%);
				line-height: 7.4375em !important;
				padding: 0.5em 1.75em 0.5em 1.75em;
				&:hover { border-bottom: 0px !important; }
			}
			a.last {
				border-right: 0px;
			}
		}
	}
	
	.donate-topper {
		.column(3);
		color: @white;
	}
}

.donate-topper, a.donate-topper, .button {
	background: @blue;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;			
	color:#ffffff;
	font-size: 1.25em;
	margin-bottom: 0px;		
	padding: 0.5em 0;
	text-align: center;
	text-transform: uppercase;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
	&:hover {
		background: @gold;	
		border-bottom: 0px !important;
		color: @white !important;
	}
}

/********************
Sections
********************/

.float-right {
	float: right;
	margin: 0 20px 10px 0px; /* was -10 for left */
}

.float-left {
	float: left;
	margin: 0 20px 10px -10px;
}

.wrapper {
	margin: 0px auto;
	overflow: hidden;
	padding: 0px;
	width: @max-width;
}

section, footer { padding: 1em 0; }

.intro {
	font-size: 1.25em;
	text-shadow: 0 1px 0 @white;
}

.about, .goals {
	background: url("http://www.gaar.com/images/realtor-fund/bg.gif") @light-gold;
	border-top: 1px solid @white;
	border-bottom: 1px solid @white;
	color: @black;
	article { .column(12); overflow: hidden; vertical-align: bottom; }
	ul {
		color: @gold;
		font-size: 1.25em;
		font-weight: bold;
		list-style-type: decimal;	
		li {
			margin-left: 1.25em;
			padding: 0px;
		}
		p {
			color: @black;
			font-weight: normal;
		}
	}	
}

.goals td {
	padding: 0.5em 0.25em 0.5em 0;
}

.goals td.giftee {
	padding: 0 2em 0 0;
}

.small { font-size: 0.75em;  }
.center { text-align: center; }

.donate {
	article { .column(8); }
	border-top: 1px solid darken(@light-gold, 10%);
	border-bottom: 1px solid darken(@light-gold, 10%);
	ol {
		color: @gold;
		font-size: 1.25em;
		font-weight: bold;
		list-style-type: decimal;	
		margin-left: 1.25em;
		p {
			color: @black;
			font-weight: normal;
		}
	}
}

.donate-side {
	.column(4);
	cursor: pointer;
	padding: 2.5em 0 0 0;
	text-align:center;
	img {
		float: right;
	}
	a.hover {
			background: @gold;
	}
}

.impact {
	article { .column(12); }
	border-top: 1px solid darken(@light-gold, 10%);	
	border-bottom: 1px solid darken(@blue, 10%);
	.donar-list {
		color: @gold;
		float: left;
		font-size: 1.120em;
		font-weight: bold;
		list-style-type: decimal;
		margin-right: 1em;
		li {
			margin-left: 1.25em;
			padding: 0px;
		}
		p {
			color: @black;
			font-weight: normal;
		}
	}	
}

.donate, .impact {
	background: url('http://www.gaar.com/images/realtor-fund/light_wool.png') top left repeat @white;
}

a.button {
	background: @blue;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px;
	border-bottom: 0px;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size: 28px;
	font-weight: bold;
	padding:11px 28px;
	text-decoration:none;
}
/* This imageless css button was generated by CSSButtonGenerator.com */


.small-back-to-top {
	.column(12);
	text-align: right;
}

/********************
Footer
********************/

footer {
	background: @blue;
	border-top: 1px solid lighten(@blue, 20%);
	color: @white;
	text-align: center;
	a, a:link, a:visited {
		border-bottom: 1px dotted @white;
		color: @white;
	}
}

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

@media screen and (max-width: 1260px) {
	.wrapper { max-width: 100%; }
	
	header {
		font-size: 0.825em;
		img {
			width: 100%;
		}
	}
}

@media screen and (max-width: 865px) {
	header {
		padding-bottom: 1em;
		.logo { .column(4); img { margin: 0 auto; text-align: center; width: 270px; } }
		.donate-topper { display: none; }
		nav { .column(8);  font-size: 1.2em; }
		section { img { width: 100%; } }
	}
}

@media screen and (max-width: 769px) {
	body {
		font-size: 85%;
	}
	
	img, aside img { max-width: 100%; }
	
	header {
		display: block;
		height: 9em !important;
		padding-bottom: 1em;
		.logo { .column(12); text-align: center; }
		nav {
			display: none;
		}
		.donate { img { display: none; } }
	}
} 

@media screen and (max-width: 520px) {
	article aside  { .column(12);  text-align: center;}
	#donate article, #donate .donate-side { .column(12); }
}