exarcheia-web

/* Roundal with inset shadow */

body {
	background: #28effc;
}

.roundal {
	/* change these three to adjust size */
	font-size: 		16px;
	width: 			170px;

exarcheia-web

/**
 * Paper Stack with box shadow (unsuccessful)
 */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
}

.paper {
	width: 280px;

exarcheia-web

/**
 * Paper Stack with pseudo elements
 */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
}

.paper {
	width: 280px;

exarcheia-web

/* SKY */

body {
	background: skyblue;
}

.cloud {
	width: 200px;
	height: 100px;
	background: white;

exarcheia-web

/* Sky and cloud with box shadow */

body {
	background: skyblue;
}

.cloud {
	width: 200px;
	height: 100px;
	background: white;

exarcheia-web

/**
 * Space Invader
 */

.space-invader{
	margin: 100px auto;
	display: block;
	width: 200px;
  box-shadow:
    0 0 0 1em red,

exarcheia-web

/* CSS Triangle */

* { box-sizing: border-box }

.triangle {
	width: 0; height: 0;
	border-bottom: 50px solid black;
	border-left: 	20px solid transparent;
	border-right: 	70px solid transparent;	
	

exarcheia-web

/* Modal with CSS */

@import url(http://fonts.googleapis.com/css?family=Audiowide);

p {
  font-family: Arial, sans-serif;
}

.box {
  padding: 2em;

exarcheia-web

/** Media block **/

figure img {
	vertical-align: middle;
}

.media {
	background: #ededed;
	width: 630px;
	margin: 20px auto;

exarcheia-web

/* Basic menu with sub-menu css */

.menu-main li {
	list-style: none;
}
.menu-main > li {
	display: 		inline-block;
	vertical-align: top;
	position: 		relative;
}