@charset "utf-8";
/* Responsive Design for DCPages */



#topLinks {
	padding-top: 5px;
}

.tablet-only, .show-on-tablet {
	display:none;
	visibility:hidden
}

.right-col-ad:nth-of-type(7) {
		display:none;
	}
	
	.slideshow {
		margin:0;
		margin-bottom: 1em !important;
	}

@media only screen and (min-width : 768px) and (max-width : 950px) {
	#body-wrapper {
		width: 768px;
	}
	
	
	/* Header ---- */
	
	#header-col-1 {
		width: 100%;
		moz-border-radius: 0;
		-webkit-border-radius: 0;
		background: url("/asset/image/logo.gif") no-repeat, url("/asset/image/background.gif") repeat;
	}
	
	
	.tablet-only {
	display: block;
	visibility: visible
	}
	/* Header fixing */
	
	#header-weather {
		display: none;
	}
	
	#header-col-2 {
		position: absolute;
		width: 368px;
		right: 0px;
	}
	
	#header-col-2 {
		background-color: transparent;
		background-image: none;
	}
	
	#SearchInput {
		width: 240px;
		margin: 0 auto;
	}
	
	#SearchButton {
		margin-top: 1px;
	}
	
	#SearchAddListing {
		float: none;
	}
	
	#SearchText {
		margin:5px 0 2px;
	}
	
	/* Search */
	
	#googlequery {
		width: 100%;
	}
	
	/* navigation bar */
	#topLinks {
		height: auto;
		moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	
	/* About Us */
	#about-us-wrapper, #feature-wrapper {
		width: 98%;
		margin-left: 1%;
	}
	#topLinks a {
		padding-left: 0;
		padding-right: 15px;
	}
	#topLinks {
		height: auto;
		moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	
	
	/* left bar ----------------------------- */
	
	#left-col-wrapper {
		width: 250px;
		padding-left: 5px;
		padding-right: 35px;
	}
	
	.left-menu-body, .left-menu {
		width: 240px;
	}
	
	ul.navlist a {
		width: auto;
	}
	
	/* left column */
	
	/*#right-col-wrapper {
		width: 470px;
	}
	
	#events a {
		width: 464px;
	}*/
	
	/* div that fix the events problem 
	Line 686 
------------------------------------------*/
	
	.events-container {
		width: 470px !important;
		margin: 0 auto;
		float: right !important;
		padding-right: 6px !important;
	}
	
	.events-container .left {
		float: left;
		margin-right: 6px;
	}
	
	#dcpEvents table {
		width:250px !important;
	}
	
	
	/* Forum  */
	#events a {
		width: auto;
	}
	
	.hide-on-tablet {
		display:none;
		visibility:hidden;
	}


	.left img {
		width:208px
	}
	
	.round-top, .round-bottom {
		-moz-border-radius: 0px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		-webkit-border-radius: 0px;
	}
	
	.events-container .right-col-ad:nth-of-type(5) {
		display:none;
	}
	
	
	/* change the order of the events and the links and remove the ads on tablets */
	
	.events-container {
		float: right !important;
		width: 268px !important;
		padding-top:0 !important;
	}
	
	#center-col-wrapper {
		float: right !important;
		padding-top: 0;
	}
	
	.ad-01 {
		display:none;
	}
	
	.left-menu-body, .left-menu {
		width: 250px;
	}
	
	#left-col-wrapper {
		width: 275px;
		padding-left: 3px;
		padding-right: 10px;
	}
	
	.right-col-ad, .right-menu-header, .right-menu-body {
		width: 250px;
	}
	
	
		
		

}

@media only screen and (max-width : 767px) {
	
	#header-col-1 a {
		width: auto;
	}
	

	#body-wrapper {
		width: 420px;
	}
	
	ul.slideshow li img {
		width: 400px;
		height: 400px;
	}
	ul.slideshow {
		width: 400px;
		height: 420px;
		margin: 0 auto;
	}
	
	/* Header ---- */
	
	#header-col-1 {
		width: 100%;
		moz-border-radius: 0;
		-webkit-border-radius: 0;
		background: url("/asset/image/logo.gif") no-repeat, url("/asset/image/background.gif") repeat;
		background-color:#ced6de

	}
	
	#header-col-2 {
		width: 100%;
	} 	
	
	
	
	
	/* Header fixing */
	
	#header-weather {
		display: none;
	}
	
	#header-col-2 {
		/*position: absolute;
		width: 50%;
		right: 0px;*/
		width: 94%;
		height: 80px;
		padding-left: 6%;
		padding-top: 3%;
		background: #ced6de;
		border-radius: 0;
	}
	
	#header-col-2 {
		/*
		background-color: transparent;*/
		background-image: none;
	}
	
	#SearchInput {
		width: 80%;
		margin: 0 auto;
	}
	
	#SearchButton {
		margin-top: 1px;
	}
	
	#SearchAddListing {
		float: none;
	}
	
	#SearchText {
		margin:5px 0 2px;
	}
	
	/* Search */
	
	#googlequery {
		width: 100%;
	}
	
	/* navigation bar */
	#topLinks {
		height: auto;
		moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	
	/* About Us */
	#about-us-wrapper, #feature-wrapper {
		width: 98%;
		margin-left: 1%;
	}
	
	/* Created a div to wrap the Directory Categories on the left bar, so we can add them both (Directory Categories & Business Resources) at the same level on mobile version  */
	
	#left-col-wrapper {
		width: 100%;
		padding:0 1%;
	}
	
	.left-bar-table {
		width:100%;
	}
	
	/* Center Column */
	
	#center-col-wrapper {
		width: 100%;
	}
	
	.right-col-ad {
		text-align: center;
	}
	
	.right-col-ad img {
		max-width:100%;
		height:auto
	}
	

	
	#center-menu-wrapper {
		width:100%
	}
	
	
	/*ul.slideshow li img {
		width: 100%;
		height: inherit;
	}*/
	/*img {
		max-width: 100%;
		height: auto; 
	}*/
	
	/*menu under the slider */
	#center-left-wrapper, #center-right-wrapper  {
		width: 100%;
	}
	
	#center-left-body a {
		width: 98%;
	}
	
	#center-right-body a {
		width: 98%;
	}
	
	.round-bottom {
		-moz-border-radius-bottomleft: 0;
		-moz-border-radius-bottomright: 0;
		-webkit-border-bottom-left-radius: 0;
		-webkit-border-bottom-right-radius: 0;
	}
	
	.round-top {
		-moz-border-radius-topleft: 0;
		-moz-border-radius-topright: 0;
		-webkit-border-top-left-radius: 0;
		-webkit-border-top-right-radius: 0;
	}
	
	/* Forum Styles */
	#activity-nav-wrapper {
		padding: 3px 0;
	}
	
	#activity-nav-wrapper {
		width: 100%;
	}
	
	#matt_recent_activity {
		width: 100%;
	}
	
	/* Events */
	
	#right-col-wrapper {
		width: 100%;
	}
	
	
	
	#right-col-wrapper .right-col-ad {
		width: 100%;
		text-align: center;
	}
	
	#right-col-wrapper .right-col-ad #dcpEvents   {
		width: 250px;
		margin: 0 auto;
	}
	
	/* upcoming events */
	#events a {
		width: 100%;
		font-size: 14px;
		padding: 0;
		text-align: center;
	}
	
	/* slider */
	
	ul.slideshow {
		margin:0 auto;
		/*height: 488px;*/
		text-align:center;
		padding: 0;
	}
	
	ul.slideshow li img {
		margin:0 auto
	}
	
	



	/* forums */
	
	#matt_recent_activity div.event a {
	    width: 98%;
	}
	
	#matt_recent_activity div.event span.cal {
	    margin: 0px 3px;
	}
	
	.hide-on-mobile {
		display:none;
		visibility:hidden
	}
	
	
	.left-menu-header, .left-menu-body {
		width: 97%;
		margin-left: -2%;
	}
	
	ul.navlist a {
		width: auto;
		text-align:center
	}
	
	.ad-01  {
		display:none;
		visibility:hidden;	
	}
	
	
	.ad-03, .center-ad {
		clear: both;
	}
	
	.left-col-wrapper .right-col-ad:nth-of-type(4), .left-col-wrapper .right-col-ad:nth-of-type(8), .left-col-wrapper .right-col-ad:nth-of-type(10) {
		display:none;
	}
	
	.ad-02, .ad-01, #left-col-wrapper .right-col-ad , #center-col-wrapper  .right-col-ad {
		display:none;
	}

}

@media only screen and (max-width : 480px) {
	
	#body-wrapper {
		width: 300px;
	}
	
	#about-us-wrapper, #feature-wrapper {
		width: 96%;
		margin-left: 2%;
	}
	
	#header-col-1 a {
		width: auto;
	}
	
	ul.slideshow {
		width: 360px;
		height: 420px;
		margin:0 auto;
		text-align:center;
		padding: 0;
	}
	
	ul.slideshow {
		margin: 0 auto;
		width: 280px;
		height: 320px;
	}
	
	ul.slideshow li img {
		width: 280px;
		height: 320px;
		margin:0 auto
	}
	
	.left-bar-table {
		width: 98%;
	}
	
	#center-left-wrapper, #center-right-wrapper {
		width: 100%;
	}
	
	#center-left-body a {
		width: auto;
	}
	
	#header-col-1 {
		background: url("/asset/image/logo.gif") no-repeat #ced6de;;
		background-size: 100%;
		height: 160px;
	}
	
	.left-menu-header{
		clear: both;
	} 
	
	.left-bar-table {
		width: 100%;
	}
	.center-ad {
		clear: both;
	}
}


@media only screen and (max-width : 321px) {

	#header-col-1 {

		height: 120px;
	}
	#about-us-wrapper, #feature-wrapper {
		width: 95%;
		margin: 0.5em auto;
	}
	
	#feature-content, #about-us-content {
		padding: 1em 0.2em;
	}
	
	#about-us-wrapper H3 {
		font-size: 12px;
	}
	
	#feature-wrapper h3, #about-us-wrapper H3 {
		font-size: 12px;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	
	ul.slideshow {
		width: 280px;
		height: 320px;
		margin:0 auto
	}
	
	ul.slideshow li img {
		width: 280px;
		height: 320px;
	}
	
	.left-bar-table, .round-top, .round-bottom {
		width: 98%;
	}
	
	ul.navlist a:link, ul.navlist a:visited {
		width: 97%;
		text-align: center;
	}
}
