responsive.css

/************************************************************************
 * Responsive magic added by Arnav Gupta <dev@championswimmer.in>	*
 * Originally theme TrendyBiz, adapted into PavementCafe		*
 * And further adapted into PebblestoneCafe				*
 *									*
 ************************************************************************/
@media only screen and (min-width: 1281px) {
	#sidebar.noscroll {
		width:300px;
		float:right;
		position: fixed;
		top: 80px;
		right: 0px;
		margin-right: 10px;
		z-index: 10000;
	}
}
@media only screen and (min-device-width: 1500px) {
	#sidebar.noscroll {
		width:300px;
		float:right;
		position: fixed;
		top: 80px;
		right: 0px;
		margin-right: 10px;
		z-index: 10000;
	}
}

@media only screen and (max-width: 1280px) {
	#sidebar.noscroll {
	}
}

@media only screen and (max-device-width: 1280px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}
	.container {
	width: 1080px;
	margin: 0px auto;
	}
	#logo {
	height: 320px;
	width: 1080px;
	word-wrap: break-word;
	margin-top: 55px;
	}
	#logo p {
	margin-top: -20px;
	padding: 10px 15px 10px 15px;
	font-size: 36px;
	color: #696969;
	}

	#logo h1 {
	padding: 10px 10px 10px 10px;
	letter-spacing: -4px;
	font-family: 'Dancing Script', cursive;
	font-size: 92px;
	}
	#menu-wrapper {
	height: 53px;
	width: 1080px;
	background: url(images/img02.jpg) repeat;
	text-align: center;
	padding: 0px 0px 0px 0px;
	display:inline-block;
	position: fixed;
	top: 0px;
	z-index: 999;
	text-align: center;
	}
	#page {
	width: 1040px;
	padding: 20px 20px 40px 20px;
	}
	#content {
	float: left;
	width: 700px;
	padding: 10px 10px 10px 10px;
	}

	#sidebar {
	float: none;
	width: 700px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	color: black;
	text-align: left;
	}
	#footer {
	height: 70px;
	width: 760px;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	background: url(images/img01.jpg) repeat;
	}
}
@media  only screen and (max-device-width: 1080px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}	
	#content {
	float: none;
	width:800px
	padding: 10px 10px 10px 10px;
	}
	#menu-wrapper {
	height: 53px;
	width: 1080px;
	background: url(images/img02.jpg) repeat;
	text-align: center;
	padding: 0px 0px 0px 0px;
	display:inline-block;
	position: fixed;
	top: 0px;
	z-index: 999;
	text-align: center;
	}
	#sidebar {
	float: none;
	width: 700px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	color: black;
	text-align: left;
	}
	#sidebar.noscroll {
	}

}
@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}
	.container {
	width: 720px;
	margin: 0px auto;
	}
	#logo {
	height: 320px;
	width: 720px;
	word-wrap: break-word;
	margin-top: 55px;
	}
	#logo p {
	margin-top: -20px;
	padding: 5px 10px 5px 10px;
	font-size: 36px;
	color: #696969;
	}

	#logo h1 {
	padding: 5px 5px 5px 5px;
	letter-spacing: -6px;
	font-family: 'Dancing Script', cursive;
	font-size: 86px;
	}
	#menu-wrapper {
	height: 53px;
	width: 710px;
	background: url(images/img02.jpg) repeat;
	text-align: center;
	padding: 5px 5px 5px 5px;
	display:inline-block;
	}
	#page {
	width: 700px;
	padding: 15px 15px 30px 15px;
	}
	#content {
	float: none;
	padding: 0px 0px 0px 0px;
	}

	#sidebar {
	float: none;
	width: 610px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	color: black;
	text-align: left;
	}
	#sidebar.noscroll {
	}

	#footer {
	height: 70px;
	width: 720px;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	background: url(images/img01.jpg) repeat;
	}
}
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}	
	#content {
	float: none;
	padding: 0px 0px 0px 0px;
	}
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}
	.container {
	width: 480px;
	margin: 0px auto;
	}
	#logo {
	height: 280px;
	width: 480px;
	word-wrap: break-word;
	margin-top: 55px;
	}
	#logo p {
	margin-top: -20px;
	padding: 0px 5px 0px 5px;
	letter-spacing: -2px;
	font-size: 30px;
	color: #696969;
	}

	#logo h1 {
	padding: 5px 5px 5px 5px;
	letter-spacing: -6px;
	font-family: 'Dancing Script', cursive;
	font-size: 72px;
	}
	#menu-wrapper {
	height: 53px;
	width: 480px;
	background: url(images/img02.jpg) repeat;
	text-align: center;
	padding: 0px 0px 0px 0px;
	display:inline-block;
	}
	#page {
	width: 440px;
	padding: 10px 10px 20px 10px;
	}
	#content {
	float: none;
	width: 400px;
	padding: 0px 0px 0px 0px;
	}
	.post .entry {
	padding: 0px 0px 0px 0px;
	padding-bottom: 20px;
	text-align: justify;
	}

	#sidebar {
	float: none;
	width: 400px;
	margin: 0px;
	padding: 10px 10px 10px 10px;
	color: black;
	text-align: left;
	}
	#sidebar.noscroll {
	}

	#footer {
	height: 70px;
	width: 480px;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	background: url(images/img01.jpg) repeat;
	}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	body {
	display:inline-block;
	background: #003569 url(images/pebblestone.jpg) repeat;
	font-family: 'Neucha', 'Coming Soon', sans-serif;
	font-size: 16px;
	color: black;
	width: 100%;
	background-attachment:fixed;
	}
		
	#content {
	float: none;
	width: 420px;
	padding: 0px 0px 0px 0px;
	}
}