/* @font-face decralation */
@font-face {
    font-family: 'MEgalopolisExtraRegular';
    src: url('font/megalopolisextra-webfont.eot');
    src: url('font/megalopolisextra-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/megalopolisextra-webfont.woff') format('woff'),
         url('font/megalopolisextra-webfont.ttf') format('truetype'),
         url('font/megalopolisextra-webfont.svg#MEgalopolisExtraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KomikaAxisRegular';
    src: url('font/komikax_-webfont.eot');
    src: url('font/komikax_-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/komikax_-webfont.woff') format('woff'),
         url('font/komikax_-webfont.ttf') format('truetype'),
         url('font/komikax_-webfont.svg#MEgalopolisExtraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OrbitronLight';
    src: url('font/orbitron-light-webfont.eot');
    src: url('font/orbitron-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/orbitron-light-webfont.woff') format('woff'),
         url('font/orbitron-light-webfont.ttf') format('truetype'),
         url('font/orbitron-light-webfont.svg#MEgalopolisExtraRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family:Kondolar-Regular, Georgia, serif;
	font-size:100%;
	margin:0;
	padding:0;
	background:url(bg.jpg) 0 0 repeat #f4f4f4;
}
header, section, footer, nav{
	display:block;
}

/* Header */
header{
	width:100%;
	background:#000;
	background:rgba(0, 0, 0, 0.8);
	color:#ccc;
	padding:15px 0;
	font-family:Arial Narrow, Arial, sans-serif;
	letter-spacing:1px;
	margin-bottom:20px;
	position:fixed;
	top:0;
	left:0;
	z-index:99;
}
header h1{
	margin:0 50px;
	text-shadow:1px 1px 0 #FFF, 2px 1px 1px #CCC;
	float:left;
}
#backlinks{
	float:right;
	margin:-10px 20px;
	line-height:25px;
	font-weight:bold;
	font-size:12px;
	text-align:right;
}
#backlinks a{
	color:#35BFFF;
	text-decoration:none;
	margin:3px 0 0;
	display:block;
}
#backlinks a:hover{
	color:#91DCFF;
}

/* Footer */
footer{
	background:rgb(0, 0, 0);
	background:rgba(0, 0, 0, 0.8);
	height:25px;
	width:100%;
	line-height:25px;
	position:fixed;
	bottom:0;
	left:0;
	bottom:0;
	left:0;
	color:#888;
	font-size:11px;
	z-index:99;
}
footer span{
	padding-left:20px;
}
footer a{
	color:#1FA2E1;
}

/* clearfix */
.clearfix {
	clear:both;
}

/* navigation */
#nav {
	position:fixed;
	top:70px;
	left:1%;
	border:1px solid #ccc;
	background:#fff;
	font-weight:bold;
	font-size:12px;
	text-shadow:0 1px 0 #fff;
	z-index:77;

	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s; 
}
#nav:hover{

	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
}	
#nav ul{
	list-style:none;
	padding:0;
	margin:0;
}
#nav li{
	padding:0 10px;
	border-top:1px solid #ddd;
}
#nav li:first-child{
	border-top:none;
}
#nav a{
	text-decoration:none;
	color:#333;
	display:block;
	padding:10px;
}
#nav li:hover{
	background:#ddd !important;
}
li.active{
	background:#eee;
}

/* content */
#wrapper{
	width:700px;
	max-width:100%;
	margin:3em auto;
}
#wrapper h2{
	font-size:4em;
	margin:0;
}
#wrapper p{
	line-height:150%;
	text-align:left;
}
.font1{
	font-family: 'MEgalopolisExtraRegular';
}
.font2{
	font-family: 'OrbitronLight';
}
.font3{
	font-family: 'KomikaAxisRegular';
}

#wrapper h1{
	font-family: 'LeagueGothicRegular','Bebas Neue','Arial Narrow', Arial, sans-serif;
	font-size:3.5em;
	color:#333;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #333;
	margin: 10px 0;
}
#wrapper section {
	margin: 10px 0;
	padding: 20px 25px;
	border-bottom: 1px solid #ccc;
}
#wrapper .border{
	border:3px solid;
	border-color:#ccc;
}
#wrapper .border:hover{
	border-color:#999;
}
.holder {
	text-align:center;
	padding:30px;
	background:#fafafa;
}
.holder div {
	margin: 10px 0;
}
.viewcode {
	font-size:20px;
	margin:5px 0 0;
	padding: 5px 20px;
	background: #aaa;
	text-shadow:0 1px 0 #fff; 
	cursor:pointer;
}
.viewcode:hover {
	background: #ccc;
}
.code {	
	background: #333;
	color:#fff;
	padding: 10px 30px;
	border:1px solid #ccc;
	word-wrap: break-word;
	margin:0 0 10px;
}

/* @face-font */
#facefont h2{
	font-size: 2em;
}

/* New font styles */
.algerian {
	text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #000000;
}
.castellar {
	color: #FFFFFF;
	text-shadow: -1px 0 0 #000000, 1px 1px 0 #000000, 2px -1px 0 #000000, 3px 0 0 #000000;
}
.outline {
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000;
}
.linking {
	color: #FFFFFF;
	letter-spacing:-3px;
	text-shadow: 3px 2px 0 #000000, -3px 2px 0 #000000, 3px -2px 0 #000000, -3px -2px 0 #000000, 4px 1px 0 #000000, -4px 1px 0 #000000, 4px -1px 0 #000000, -4px -1px 0 #000000;
}

/* Inset effect */
#inset .holder {
	background: #777777;
}
#inset h2 {
	color: #444444;
	font-family: 'MEgalopolisExtraRegular';
	text-transform: uppercase;
	text-shadow: -1px -1px 1px #000000, 1px 1px 1px #CCCCCC;
}
#inset p {
	background: #CCCCCC;
	font-size: 18px;
	padding: 10px;
	text-shadow: 0 1px 0 #FFFFFF;
}
#inset p.clean {
	text-shadow: none;
}

/* Embossed effect */
#emboss .holder {
	background: transparent;
	color: #ECECF6;
	text-shadow: -1px -1px 0 #fff, 1px 1px 1px #000;
}
#emboss .holder h2 {
	opacity: 0.5;
}

/* Shadow blurring */
#blurring .holder {
	background: #000000;
}
.burning {
	color: #FFF0E8;
	text-shadow: 0 -1px 4px #FFFFFF, 0 -2px 10px #FFDD00, 0 -10px 20px #ff8000, 0 -15px 20px red;
}
.neon {
	color: #D0F8FF;
	text-shadow: 0 0 5px #A5F1FF, 0 0 10px #A5F1FF, 0 0 20px #A5F1FF, 0 0 30px #A5F1FF, 0 0 40px #A5F1FF;
}
.blur {
	color: rgba(255,255,255,0);
	text-shadow:0 0 5px #FFFFFF, 0 0 10px #FFFFFF;
}

/* Multiple shadow-layers */
#multiple .holder{
	background:transparent;
}
#multiple .holder div{
	padding:30px;
}
.retro {
	background: #D8C083;
	color: #C29018;
	text-shadow: 3px 3px 0 #BF5E1A, 7px 6px 0 #5C3D28;
	font-family: Verdana;
}
.threed {
	color: #CCCCCC;
	text-shadow: 
		0 1px 0 #999999, 
		0 2px 0 #888888, 
		0 3px 0 #777777, 
		0 4px 0 #666666, 
		0 5px 0 #555555, 
		0 6px 0 #444444, 
		0 7px 0 #333333, 
		0 8px 0 #333333, 
		0 9px 0 #333333, 
		0 10px 7px rgba(0, 0, 0, 0.4), 
		0 11px 10px rgba(0, 0, 0, 0.2);
}	

/* Masking */
#masking .holder {
	background: #000000;
}
#masking h2 {
	color: #FFFFFF;
	-webkit-mask-box-image: url(mask.png) 0 0 repeat;
}

/* Gradient */
#gradient .holder {
	position: relative;
}
#gradient .holder h2 {
	color: #117FB2;
	position: relative;
	z-index: 10;
	-webkit-mask-box-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
}
#gradient .holder:after {
	content: 'Gradient ...';
	width:100%;
	font-size: 4em;
	font-weight: bold;
	font-family: 'MEgalopolisExtraRegular';
	text-align: center;
	padding: 30px 0;
	color: #000000;
	position: absolute;
	top: 0;
	left: 0;
}

/* Click effect */
#click a {
	margin: 0 10px;
}
#click a:active {
	position: relative;
	top: 1px;
}
#click a.button {
	text-decoration: none;
	font-weight: bold;
	color: #000000;
	padding: 5px 20px;
	background: #CCCCCC;
	border: 1px solid;
	border-color: #AAAAAA #000000 #000000 #AAAAAA;
	
}
#click a.button:active {
	position: relative;
	top: 1px;
	left: 1px;
	border-color: #000000 #AAAAAA #AAAAAA #000000;
}

/* Paragraph */
#paragraph p {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 40px;
	-webkit-column-gap: 40px;
	column-gap: 40px;
	text-align: justify;
}

#paragraph p:first-child {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	font-style: italic;
	color: #777777;
} 
#paragraph p:first-child:first-letter {
	font-size: 250%;
	margin: 10px 7px 0;
	float: left;
}
#paragraph p.green::selection{
	background: green;
	color: #FFFFFF;
}
#paragraph p.green::-moz-selection{
	background: green;
	color: #FFFFFF;
}
#paragraph p.red::selection{
	background: red;
}
#paragraph p.red::-moz-selection{
	background: red;
}
#paragraph p.blue::selection{
	background: blue;
	color: #FFF296;
}
#paragraph p.blue::-moz-selection{
	background: blue;
	color: #FFF296;
}