/* Media Queries
---------------------------------------------------------------------------------------------------- */

/* Smaller computers ----------- */
@media only screen 
and (max-width : 1050px) {
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 990px!important;
	}

	#content {
		width: 100%;
		background-image: none;
		background-color: #fff;
	}
	
	#page-text {
		width: 100%;
		background: none!important;
		float: none;
	}
	
	#menu-left {
		display: none;
	}

	#menu-top {
		background: none;
		font-size:1.35em;
	}

	.responsive-menu-icon {
		background:#75797e;
		cursor: pointer;
		display: block;
		text-align: center;
		padding: 5px;
	}
	
	.responsive-menu {
		display: none;
		margin: 0px;
	}

	.responsive-menu  ul {
		width:100%;
	}

	.responsive-menu  li {
		width:100%;
		float:left;
		list-style: none;
		padding: 0px!important;
	}

	.responsive-menu  li:first-child {
		border-top: 1px solid #333!important;
	}

	.responsive-menu  li:last-child {
		margin-bottom: 10px!important;
	}

	.responsive-menu  li a {
		display: block;
		background:#75797e;
		padding:5px 10px 5px 10px;
		text-decoration: none;
		border-bottom: 1px dotted #fff;
		color: #fff;
	}

	.responsive-menu  li a:hover {
		background-image: none!important;
		background:#999;
		color: #333;
	}
}


/* Smaller computers 950 ----------- */
@media only screen 
and (max-width : 950px) {
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 850px!important;
	}
}

/* Smaller computers 900 ----------- */
@media only screen 
and (max-width : 900px) {
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 800px!important;
	}
}

/* Old computers 800x600 ----------- */
@media only screen 
and (max-width : 800px) {
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 700px!important;
	}
	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 900px!important;
	}
	
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 700px!important;
	}
	
}

/* Android in Landscape ----------- */
@media only screen
and (max-width: 720px)
and (orientation : landscape) {

	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 500px!important;
	}
	
}

/* small tablet (portrait) ----------- */
@media only screen 
and (max-device-width : 600px) 
and (orientation : portrait) {
	
	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 580px!important;
	}
	
}

@media only screen 
and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)  {

	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 350px!important;
	}
	
	#header {
		height: 80px;
	}
	
	.header-left a img {
		width: 150px;
		height: 59px; 
		margin: 10px;
	}
	
	#facebook {display: none;}
	.left-column.top,
	.middle-column.top {clear: both; width: 250px!important;}
	
	#designBrochures td textarea {margin-left: -140px; width: 250px!important;}
	
	#footer {min-height: 70px;}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr, th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
	}
	
	/*
	Label the Agents Fees data
	*/
	table.agentsfees td:nth-of-type(1):before { content: "Price"; }
	table.agentsfees td:nth-of-type(2):before { content: "Agent Fee"; }
	table.agentsfees td:nth-of-type(3):before { content: "Admin"; }
	table.agentsfees td:nth-of-type(4):before { content: "Total Fee"; }
	table.agentsfees td:nth-of-type(5):before { content: ""; }
	table.agentsfees td:nth-of-type(6):before { content: "Price"; }
	table.agentsfees td:nth-of-type(7):before { content: "Agent Fee"; }
	table.agentsfees td:nth-of-type(8):before { content: "Price"; }
	table.agentsfees td:nth-of-type(9):before { content: "Total Fee"; }
	
	form input, form textarea, form select,
	#productform .selectfield, 
	#surveyform .selectfield,
	#contactform .textarea, #productform .textarea, #surveyform .textarea,
	#contactform .textfield, #productform .textfield, #surveyform .textfield {
		clear: left;
		width: 90%;
	}	
	
	table.prods td:nth-of-type(4):before { content: "Cost (each)"; }
	
	.left-column.top,
	.middle-column.top {clear: both; width: 250px!important;}
	
	#designBrochures td textarea {margin-left: -350px; width: 250px!important;}
	
	.featured-listing ul,
	.paid-listing ul {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 320px)
and (max-width : 321px) {

	#container,
	#footer,
	#header,
	#menu-top,
	#form,
	table {
		max-width: 280px!important;
	}
	
	#facebook {display: none;}

	.left-column.top,
	.middle-column.top {clear: both; width: 250px!important;}
	
	#designBrochures td textarea {margin-left: -140px; width: 250px!important;}
	
	#footer {min-height: 70px;}
}

@media screen and (min-width: 1050px) {
	.responsive-menu-icon {
		display: none;
	}
}