/****************
    - Reset -
****************/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, 
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, 
h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, 
ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, 
tr, th, td, u, ul, var, video {
	font-family:inherit;
	font-size:100%;
	font-weight:inherit;
	font-style:inherit;
	vertical-align:baseline;
	white-space:normal;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

*:focus {
	outline:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/*************************
    - Basic settings -
*************************/
body {
	background:#e9e9e9;
}

.content-wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:1px;
	height:1px;
	display:inline;
}

#center {
	position:absolute;
	top:-248px;
	left:-480px;
	width:960px;
	height:496px;
}

/*********************
    - Responsive -
*********************/
@media only screen and (min-width:0) and (max-width:767px) {
	.content-wrapper {
		top:0;	
	}
	
	#center {
		top:0;
		height:auto;
		padding:15px 0;
	}
}

@media only screen and (min-width:768px) and (max-width:959px) {
	#center {
		left:-380px;
		width:760px;
	}
}


@media only screen and (min-width:480px) and (max-width:767px) {
	#center {
		left:-240px;
		width:480px;
	}
}

@media only screen and (min-width:0px) and (max-width:479px) {	
	#center {
		left:-160px;
		width:320px;
	}
}