/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

#wrapper a {color: rgb(175,50,50); text-decoration: none; border-bottom: 1px dotted rgb(175,50,50);}

a img {border: 0;}
p {margin-bottom: 24px;}
.mozilla-red {color: rgb(175,50,50);}
.img-left {float: left;}
.bg {background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;}

.pad {padding: 4px;}

/* @Fonts *********/
/* Regular */
@font-face {
	font-family: "Open Sans";
	src: url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans";
	src: url("//www.mozilla.org/media/fonts/OpenSans-Italic-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Italic-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Italic-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Open Sans";
	src: url("//www.mozilla.org/media/fonts/OpenSans-Semibold-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Semibold-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Semibold-webfont.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans";
	src: url("//www.mozilla.org/media/fonts/OpenSans-SemiboldItalic-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}

/* Light */
@font-face {
	font-family: "Open Sans Light";
	src: url("//www.mozilla.org/media/fonts/OpenSans-Light-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Light-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Light-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Open Sans Light";
	src: url("//www.mozilla.org/media/fonts/OpenSans-LightItalic-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-LightItalic-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-LightItalic-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "Open Sans Light";
	src: url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.eot");
	src: url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.woff") format("woff"),
			 url("//www.mozilla.org/media/fonts/OpenSans-Regular-webfont.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}
	
body {font-family: 'Open Sans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}

.huge, .large, h1, h2, h3, h4 {font-family: 'Open Sans Light', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}

.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
.small, small {	font-size: 12px; line-height: 100%;}

/*	Oh yes, your Gumdrop Buttons
	------------------	*/
	
	.button {

float: left; 
display: block; 
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
font: 14px/48px 'Open Sans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
letter-spacing: -0.25px;
height: 48px; 
width: 252px; 
background-color: #81BC2E; 
text-align: center; 
color: white;
border-bottom: none;



-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;

-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1); 

/* IE10 */ 
background-image: -ms-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #81BC2E), color-stop(1, #659C28));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #81BC2E 0%, #659C28 100%);

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-webkit-transition-duration: 0.25s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-moz-transition-duration: 0.25s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
transition-duration: 0.25s;  
transition-delay: 0s;

}

.button:hover {

-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12 px 24px 2px rgba(124,211,30,1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1); 

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-webkit-transition-duration: 0.25s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-moz-transition-duration: 0.25s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
transition-duration: 0.25s;  
transition-delay: 0s;

}

.button:active {

-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2); 

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-webkit-transition-duration: 0.25s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
-moz-transition-duration: 0.25s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
transition-duration: 0.25s;  
transition-delay: 0s;

}



/*	Column + Row presets
	------------------	*/

.one-col {width: 68px;}
.two-col {width: 160px;}
.three-col {width: 252px;}
.four-col {width: 344px;}
.five-col {width: 436px;}
.six-col {width: 528px;}
.seven-col {width: 620px;}
.eight-col {width: 712px;}
.nine-col {width: 804px;}
.auto {max-width: 100%;}
.full {width: 100%;}

.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .auto, .full img {max-width: 100%;}

.row {clear: both; border-bottom: 1px dotted rgba(175,50,50,0.4); overflow: auto; margin-bottom: 48px; padding-top: 24px;}

.gutter-bottom-24 {margin-bottom: 24px;}
.gutter-bottom-48 {margin-bottom: 48px;}

.gutter-top-24 {margin-top: 24px;}
.gutter-left-24 {margin-left: 24px;}
.gutter-right-24 {margin-right: 24px;}


/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

html {
	border-top: 2px solid white;
}


body {
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	background: url('../media/bg-gradient-sand.png') repeat-x scroll 0% 0%, url('../media/bg-sand.png') repeat scroll 0% 0%, none repeat scroll 0% 0% #F5F1E8;
}

#wrapper {
	width: 896px;
	margin: 0px auto;
	padding: 72px 48px 84px;
}

#menu {width: 100%; min-height: 72px; line-height: 72px; text-align: center; margin-bottom: 48px; font-family: 'Open Sans Light', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background-color: white;

-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);

}
.menuItem {display: inline; margin: 0px;}
#menu a {text-decoration: none; margin: 0px 24px; border-bottom: none;}
#menu a:hover {color: rgba(0,0,0,0.8);}
.top {font-family: 'Open Sans Light', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}


#framework {position: relative;}
#faux-tabzilla {position: absolute; top: -72px; right: 0px;}
.style-example {margin-left: 252px; margin-bottom: 48px; min-width: 252px;}
.style-example img {max-width: 100%;}
.style-example li {list-style-type: square;}
.style-example-text {float: left; margin-bottom: 48px; min-width: 252px; min-height: 436px; margin-right: 24px;}
.style-example-text p {width: 252px;}
.style-example-text h2 a {border-bottom: none;}
.css-code {float: left; margin-bottom: 48px; max-width: 160px; margin-right: 24px; line-height: 125%; min-height: 436px;}


/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	#wrapper {
		width: 712px;
		padding: 48px 28px 60px;
	}
	
	#faux-tabzilla {top: -48px;}
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	#wrapper {
		width: 252px;
		padding: 48px 34px 60px;
	}
	
.huge {font-size: 64px;}
.large {font-size: 58px;}

#faux-tabzilla {top: -48px;}

#menu {line-height: 48px;}	
#menu .menuItem {width: 252px; margin: 0px 24px; padding: 0px;}

.style-example {float: left; margin-bottom: 48px; width: 252px; margin-left: 0px;}
.style-example li {border-bottom: 1px dotted rgba(0,0,0,0.2); padding: 12px 0px;}
.style-example-text {float: left; margin-bottom: 48px; width: 252px;}
.css-code {float: none; max-width: 252px; margin: 0px; margin-bottom: 48px; line-height: 125%; min-height: 0px;}
	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#wrapper {
		width: 436px;
		padding: 36px 22px 48px;
	}
	
	#faux-tabzilla {top: -36px;}
	
}