/* Stolen from:
 * http://people.mozilla.org/~smartell/persona/
 * version: 2012-06-25
 */

/*	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;
}

a {color: rgb(59,155,218); text-decoration: none;}

a img {border: 0;}
p {margin: 24px 0px;}
.img-left {float: left;}
.logo {float: left; margin-top: -80px; margin-right: 24px;}
.pad {padding: 4px;}


/*	Typography presets
	------------------	*/
	
@font-face {
	font-family: "OpenSans";
	src: url(OpenSans-Light.ttf) format("truetype");
	}
	
@font-face {
	font-family: "OpenSans-Reg";
	src: url(OpenSans-Regular.ttf) format("truetype");
	}
	
body {font: 14px/21px  'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}

.headline-main, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75); color: rgb(66,79,90);}

.headline-main {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
h1 {font-size: 36px; letter-spacing: -1.5px; 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%;}

.white {color: rgba(255,255,255,1); text-shadow: 0px 1px 0px rgba(0,0,0,0.25);}

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

margin: 0px auto;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
font: 16px/24px 'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
letter-spacing: -0.25px;
height: 25px; 
width: 166px; 
background-color: #2f597b; 
text-align: center; 
color: white;

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

-webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255,255,255,0.2);
-moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255,255,255,0.2);
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 0px 0px rgba(255,255,255,0.2); 

/* IE10 */ 
background-image: -ms-linear-gradient(top, #42a5e1 0%, #267cc2 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #42a5e1 0%, #267cc2 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #42a5e1 0%, #267cc2 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #42a5e1), color-stop(1, #267cc2));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #42a5e1 0%, #267cc2 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #42a5e1 0%, #267cc2 100%);

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-webkit-transition-duration: 0.2s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.2s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.2s;  
transition-delay: 0s;

}

.button:hover {

line-height: 24px;
-webkit-box-shadow: 0px 4px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 1px 0px rgba(0, 0, 0, 0.2), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.2); 

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-webkit-transition-duration: 0.2s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.2s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.2s;  
transition-delay: 0s;

}

.button:active {

line-height: 24px;
-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, line-height;  
-webkit-transition-duration: 0.1s;  
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.1s;  
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.1s;  
transition-delay: 0s;

}

.menu-tile {
height: 120px;
width: 120px;
margin: 0px auto;
background-color: #d9dde0;
display: block;
line-height: 120px;
text-align: center;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 12px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 12px 0px rgba(0,0,0,0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 12px 0px rgba(0,0,0,0.05);

-webkit-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-webkit-transition-duration: 0.1s;  
-webkit-transition-delay: 0s;

-moz-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.1s;  
-moz-transition-delay: 0s;

transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.1s;  
transition-delay: 0s;

}

.menu-tile:hover {
height: 120px;
width: 120px;
display: block;
line-height: 118px;
text-align: center;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 4px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -3px 0px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 4px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -3px 0px 0px rgba(0,0,0,0.15);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 4px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -3px 0px 0px rgba(0,0,0,0.15);

-webkit-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-webkit-transition-duration: 0.1s;  
-webkit-transition-delay: 0s;

-moz-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.1s;  
-moz-transition-delay: 0s;

transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.1s;  
transition-delay: 0s;

}

.menu-tile:active {
height: 120px;
width: 120px;
display: block;
background-color: rgba(0,0,0,0.1);
line-height: 124px;
text-align: center;
-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 2px 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 2px 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 2px 2px 2px rgba(0,0,0,0.2); 

-webkit-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-webkit-transition-duration: 0.1s;  
-webkit-transition-delay: 0s;

-moz-transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
-moz-transition-duration: 0.1s;  
-moz-transition-delay: 0s;

transition-property: background-color, -moz-box-shadow, -webkit-box-shadow, box-shadow, line-height;  
transition-duration: 0.1s;  
transition-delay: 0s;

}

.glyph {
vertical-align: middle;
}

.asset {
margin: 4px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
}



/*	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; overflow: auto; margin: 24px -24px; padding: 24px; background-color: rgb(220,225,227); background-image: url('wallpaper.png');

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


}

table {margin-bottom: 24px; width: 100%;}

.asset-cell {width: 252px; background-color: rgba(255,255,255,0.15); padding: 24px; text-align: center;
-webkit-box-shadow: inset 0px 0px 48px 0px rgba(255,255,255,0.5);
-moz-box-shadow: inset 0px 0px 48px 0px rgba(255,255,255,0.5);
box-shadow: inset 0px 0px 48px 0px rgba(255,255,255,0.5);
}

.desc-cell {font-size : 11px; line-height: 14px; width: auto; padding: 6px 24px; background-color: rgba(255,255,255,0.15);}


.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 {
	width: 896px;
	margin: 0px auto;
	padding: 72px 48px 84px;
	background-color: rgb(106,123,134); 
	background-image:  url('marketplace-header.png'), url('wallpaper.png');
	background-position: top center, top center;
	background-repeat: repeat-x, repeat;
	color: rgb(66,79,90);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

#menu {min-height: 72px; line-height: 72px; text-align: center; margin: 24px -24px; font-size: 14pt; font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background:  rgb(255,255,255) url('wallpaper.png') repeat-x top center; background-color: white;

-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -2px 0px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -2px 0px 0px rgba(0,0,0,0.05);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 12px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 48px 0px rgba(255,255,255,1), inset 0px -2px 0px 0px rgba(0,0,0,0.05);

}

.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-size: 9pt; font-family: 'OpenSans', "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: 276px; 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: 200px; margin-right: 24px;}
.style-example-text p {width: 252px;}
.style-example-text h2 a {border-bottom: none;}
.css-code {float: left; margin-bottom: 48px; width: 252px; margin-right: 24px; min-height: 200px;}