hellojs-xiaotian/demos/Collage/style.css

A clientside Javascript library for standardizing requests to OAuth2 web services (and OAuth1 - with a shim)

*{
	font-size:inherit;
}
body{
	font-size:2em;
	font-family: Tahoma;
	margin:0;
	background-color: #6d695c;
background-image:
-webkit-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-webkit-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-webkit-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
-webkit-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

background-image:
-moz-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-moz-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-moz-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
-moz-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

background-image:
-ms-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-ms-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
-ms-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
-ms-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

background-image:
repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

	background-size: 70px 120px;
}
header{
	height:30px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}
	header h1{
		margin:0;
		padding: 3px;
		display: inline-block;
		text-decoration: capitalize;
		color:white;
		background-color:rgba(71, 167, 255, 0.6);
	}
	header button{
		vertical-align: top;
	}
nav{
	position:absolute;
	top:60px;
	left:30px;
	background-color: beige;
	display: inline-block;
	padding: 20px;
	border: 6px inset #6D695C;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
	z-index:10;
}

	nav button.close{
		position:absolute;
		top:0;
		right:0;
	}

nav:before, nav:after{
	content: " ";

	border:30px solid transparent;
	border-bottom-color:black;
	position:absolute;
	top:-60px;
	left:0;
}
nav:after{
	border-bottom-color:beige;
	top:-54px;
}

section{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
}