exarcheia-web

/* Position fixed demo */

.article-main {
	padding-top: 	40px;
}
.box {
	background: hotpink;
	width: 		100%;
	height: 	43px;
	

exarcheia-web

/* Centering elements with position: absolute */

.method1 {
	width: 	340px;
	height: 160px;

	background: gainsboro;
	text-align: center;

	position: absolute;

exarcheia-web

/* Position relative / absolute demo */

.box {
	width: 		150px;
	height: 	150px;
	background: hotpink;
	display: 	inline-block;
	margin-right: 5px;
	position: 	relative;
}

exarcheia-web

/* Checkbox hack */

.click-me {
	background: gainsboro;
	padding: 	15px 20px;
	display: 	block;
	width: 		80px;
	text-align: center;	
	margin: 	10px auto;
}

exarcheia-web

/* Transition hack - courtesy of tympanus, those legendary guys */

.to-be-changed {
    transition: all 0s 9999999s;
}
 
span:active ~ .to-be-changed {
    transition: all 0s;
    color: red;
}

exarcheia-web

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

exarcheia-web

/* Position Property - Demo */

.box {
	height: 160px;
	width: 	400px;
	background: red;
	margin: 120px auto;
	padding: 50px 10px;
	text-align: center;
	

exarcheia-web

/* Image Replacement */
.site-logo {
	background: url(http://nosotros.gr.80-241-209-237.drb-srv.org/wp-content/uploads/2013/05/logo.png);
	width: 		639px;
	height: 	230px;
	display: 	block;
	
	margin: 	20px auto; /* stoixisi sto kentro */
	
	text-indent: 	100%;

exarcheia-web

/* Grid System - Demo */

* {
	box-sizing: border-box;
}

.site-header {
	background: hotpink;
	padding: 20px;
}

exarcheia-web

/* Pseudo element - Demo */

* {box-sizing: border-box}

.box {
	width: 300px;
	height: 200px;
	background: hotpink;
	text-align: center;
	color: white;