/*
	should i do a logo anywhere...

	http://wnas.nl/images/logo_wnas_100x100.gif
 */


/*
	just to be sure, make 'm block
 */
header, article, main, section, aside {
	display: block;
}
/*
	typography
 */
body {
	font-family: helvetica, verdana, sans-serif;
}

article {
	line-height: 2;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/*
	colors
 */
body {
	color: #111;
	background-color: #FBF8EF;
}
main article aside,
main article aside a {
	background-color: transparent;
	color: #666;
}
a {
	color:#0063A6;
}
header,
main aside,
header h1 a,
aside a {
	background-color: #0090D2;
	color:#FBF8EF;
}
#searchform {
	text-align: right;
}
nav,
nav ul {
	padding:0;
	margin: 0;
}
nav li {
	list-style: none;
	display: inline-block;
	padding: 10px;
	padding: 1rem;
	margin:0;
}
nav li a {
	color: #fff;
	font-weight: bold;
}

/*
	margins and padding
 */
html,
body {
	padding: 0;
	margin:0;
}

header hgroup,
header nav,
main > section,
main > aside section,
footer p,
footer div,
#main-posts {
	margin: 0 auto;
	padding: 20px;
	padding: 2rem;
}
header nav {
	padding: 0;
}
header h1 {
	margin-top:0;
}
ul,
ol {
	margin: 0;
	padding: 5px;
	padding: .5rem;
}
li {
	padding-left: 10px;
	padding-left: 1rem;
}
body > header {
	margin-top: -20px;
	margin-top: -2rem;
}
@media screen and (max-width: 700px){
	header hgroup,
	header nav,
	main > section,
	main > aside section,
	footer p,
	#main-posts  {
		padding: .5rem;
	}

	footer {
		margin: 2px;
		margin: .2rem;
	}
}
@media screen and (max-width: 520px){
	footer div {
		width: 90%;
		margin: 0 5%
	}
}
/*
	rotate stuff
 */
header,
main aside {	/* Safari */
-webkit-transform: rotate(-1deg);

/* Firefox */
-moz-transform: rotate(-1deg);

/* IE */
-ms-transform: rotate(-1deg);

/* Opera */
-o-transform: rotate(-1deg);

transform: rotate(-1deg);
}



/*
	width's
 */
header hgroup,
header nav,
main > section,
main > aside section,
footer p,
#main-posts {
	max-width: 1040px;
	max-width: 65rem;
}
footer div { 
	width: 520px;
}

form div label {
	display: inline-block;
	width: 40%;
}

/*
	style for posts
 */
p[data-css3^="foo"] {
    color: green;
}
p[data-css3$="bar"]{
    color: red;
}
p[data-css3*="test"] {
	color: blue;
}

/*
	style for available piece
 */
h5 {
	font-size: 1em;
	margin:0;
}
.available,
.available li {
	padding:0;
	margin:0;
	list-style: none;
}
.available li {
	display: inline-block;
	width: 16%;
	padding: .2em .5em;
	box-sizing: border-box;
	background-color: green;
	font-weight: bold;
	position: relative;
}
body .booked {
	outline:0;
	background-color: red;
	color: white;
}
body .reserved {
	outline: 0;
	background-color: orange;
	color: white;
}
.available li:after {
	content: 'Available';
	position: absolute;
	top:-.5em;
	right: 0;
	z-index: 2;
	padding: 0 .3em;
	background-color: white;
	color: black;
	border: 1px solid black;
	border-radius: .5em;
	display: none;
	box-shadow:         -2px 5px 5px 0px rgba(50, 50, 50, 0.48);
}

.available .reserved:after {
	content: 'reserved (call)';
}
.available .booked:after {
	content: 'Booked';
}
.available li:hover:after {
	display: block;
}