﻿@font-face {
  font-family: "Expressway Free";
  src: url("expressway-free.ttf");
  src: local("☺"),
    url("expressway-free.ttf") format("truetype");
}
@font-face {
  font-family: "MoolBoran";
  src: url("moolboran.ttf");
  src: local("☺"),
    url("moolboran.ttf") format("truetype");
}
@font-face {
  font-family: "Mr Dna NBP";
  src: url("mr-dna-nbp.ttf");
  src: local("☺"),
    url("mr-dna-nbp.ttf") format("truetype");
}
@font-face {
  font-family: "Lane - Upper";
  src: url("lane---upper.ttf");
  src: local("☺"),
    url("lane---upper.ttf") format("truetype");
}
@font-face {
  font-family: "SF Atarian System";
  src: url("sf-atarian-system.ttf");
  src: local("☺"),
    url("sf-atarian-system.ttf") format("truetype");
}
strong {
	font-size : 30px;
    color : #f0f0f0;
}
unfocus {
    color : #b0b0b0;
}
body {
	margin: 0px;
	text-align: center;
    background-color : #141414;
}
	#header {
		width : 100%;
		height : 60px;
		background-color : #0c0c0c;
		margin-left : auto;
		margin-right : auto;
	}
		#header-top {
		margin-left : 33%;
		margin-right : 0px;
		}
			#header-top ul {
				margin-top : 0px;
				margin-bottom : 0px;
			}
				#header-top ul li {
					width: auto;
					margin: auto;
					text-align: left;
					margin-top : 10px;
					height : 26px;
					float : left;
					line-height : 40px;
					list-style-type : none;
					font-size : 36px;
					color : #f0f0f0;
					font-family: 'Expressway Free';
				}
					#header-top ul li a {
						color : #f0f0f0;
						width : 247px;
						height : 26px;
						display : block;
						text-decoration : none;
					}
					
		#header-side {
		margin-left : 0%;
		margin-right : 0%;
		}
			#header-side ul {
				margin-top : 0px;
				margin-bottom : 0px;
			}
				#header-side ul li {
					margin-top : 10px;
					width : 130px;
					height : 21px;
					float : left;
					line-height : 40px;
					list-style-type : none;
					font-size : 30px;
					color : #f0f0f0;
					font-family: 'SF Atarian System';
				}
					#header-side ul li a {
						color : #f0f0f0;
						width : 197px;
						height : 21px;
						display : block;
						text-decoration : none;
					}

	#body {
		width : auto;
		height : auto;
		margin-top : 50px;
		margin-left : auto;
		margin-right : auto;
		color : #f0f0f0;
	}
		#body ul {
			margin-top : auto;
		}
			#body ul li {
				width : 600px;
				height : 150px;
				margin-left : auto;
				margin-right : auto;
				display: block;
				margin-bottom : 50px;
				text-align:center;
			}
				#body ul li a {
					width : 600px;
					height : 150px;
					text-decoration : none;
				}
					#body ul li a:hover {
						opacity:0.6;
						transition: opacity .2s ease-out;
						-moz-transition: opacity .2s ease-out;
						-webkit-transition: opacity .2s ease-out;
						-o-transition: opacity .2s ease-out;
					}
						#body ul li a:active {
							height : 140px;
							border-bottom : 10px #03b8b2 solid;
						}		
	
	#aboutmebody {
		width : auto;
		height : auto;
		margin-left : 30%;
		margin-right : 30%;
		margin-top : 60px;
		color : #f0f0f0;
	}		
		#aboutmebody a{
			width : 266px;
			height : 300px;
			float: left;
			display : inline-block;
			color : #f0f0f0;
		}			
		#aboutmebody-inner-text {
			font-size : 13px;
			text-align: left;
			display : block;
			font-size : 25px;
			color : #656565;
			font-family: 'Lane - Upper';
		}
	
	#listitems {
		width : auto;
		height : auto;
		margin-top : 50px;
		margin-left : 32.5%;
		margin-right : 32.5%;
		color : #f0f0f0;
	}
		#listitems ul {
			margin-top : auto;
		}
			#listitems ul li {
				width : 263px;
				height : 203px;
				margin-left : 20px;
				margin-bottom : 25px;
				display: inline-block;
				text-align:center;
			}
				#listitems ul li a {
					width : 263px;
					height : 203px;
					text-decoration : none;
				}
					#listitems ul li a:hover {
						opacity:0.6;
						transition: opacity .2s ease-out;
						-moz-transition: opacity .2s ease-out;
						-webkit-transition: opacity .2s ease-out;
						-o-transition: opacity .2s ease-out;
					}
						#listitems ul li a:active {
							border-bottom : 10px #03b8b2 solid;
						}		
	
	#item-body {
		width : auto;
		height : auto;
		margin-top : 50px;
		margin-left : auto;
		margin-right : auto;
		color : #f0f0f0;
	}
		#item-body ul {
			margin-top : auto;
		}
			#item-body ul li {
				width : 1920px;
				height : 1080px;
				margin-left : 20px;
				margin-bottom : 25px;
				display: inline-block;
				text-align:center;
			}
			
	#footer {
		width : 100%;
		height : auto;
		margin-left : auto;
		margin-right : auto;
		margin-top : 3%;
		color : #f0f0f0;
		font-family: 'MoolBoran';
		font-size : 4.5em; 
		text-align : center;
	}
		#footer ul {
			margin-top : 0px;
		}
			#footer ul li {
				width : 70px;
				margin-left : 30px;
				margin-right : 30px;
				height : 70px;
				text-align: Center;
				display: inline-block;
			}
				#footer ul li a {
					width : 70px;
					height : 70px;
				}