/*              */
/*   This is for the home-index list with two(2) columns  */

<style type="text/css">
* {padding:0;margin:0:}
a {text-decoration:none}
p{text-align:center ;}


@font-face{ 
	font-family: "hairfont";   /* 'CAC-Champagne-fontfacekit\web fonts\cacchampagne_regular_macroman'; */
	src:;
	src: url('CAC-Champagne-fontfacekit\web fonts\cacchampagne_regular_macroman.eot');
	src: url('cacchampagne_regular_macroman.eot?iefix') format('eot'),
	     url('cacchampagne_regular_macroman.woff') format('woff'),
	     url('cac_champagne-webfont.ttf') format('truetype'),
	     url('cac_champagne-webfont.svg#cac_champagne-webfont') format('svg');
}


/* the entire page ------------------------------------------------------------- the entire page */
body {
    max-width:1350px;
	min-width:400px;
	background-color: black;
	background-attachment: fixed;
	/* background-image:url(http://landofoz.com.au/landof4.gif); */
	background-position:0px 50px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center ;
	font-size:20px;
	margin:auto;

}
ul {
    list-style-type: none;
	display:inline;
    padding: 0px;
    margin: 0px;
	font-size:1em;
}
/* the website container - within the body -------------------------------- the website container */
.container{
	border-style: solid;
    border-width: 1px;
	border-color:black;
	background-color:black;
	margin-left:20px;
	
}
/* the business name and image -------------------------------------- the business name */
#header{
    display: block;
	margin:5%;
}
#paypal{
	float:left;
	width:10%;
	padding-top:3%;
}
#buyinfo{
	float:right;
	width:10%;
	padding-top:3%;
}
#title {

}
#title img{
	width:60%;
	padding-bottom:20px;
}

#titlebox  ul{
	display:block;
}

#phones{
	position:relative;
	padding-bottom:20px;
	color:white;

}
#phones li{
    display: inline;
	padding:0px 20px 0px 20px;
	font-size:20px;
}

.listlinks{
	position:relative;

}
.listlinks li{
	display:inline;
	font-size:1em;
	color:black;
	background-color:black;
	padding:5px 20px 5px 20px;
}
/* the main page  -------------------------------------- the content in between the header and footer    */

/* the index page  - in two columns  ----------- */

#table2{
	max-width:1300px;
	color:black;
	padding:20px;
}
.tablecolumn{
	/* two columns  ----------- */
	display:inline;
}
h1{
	margin:auto;
	color:orange;
	font-style:italic;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
#album1{
	 float:left;
	 width:600px;
	 min-height:500px;
	 margin-left:20px;
	 background-color:white;
	 border-radius: 20px;
	 padding:5px 0px 5px 0px;
}
#album2{
	float:right;
	width:600px;
	min-height:500px;
	margin-right:20px;
	background-color:white;
	border-radius: 20px;
	padding:5px 0px 5px 0px;
}
.album img{
	padding-top:10px;
}
.Typetext{
	clear:left;
}
/* the footer area     ----------- */
#search{
	font-size:1em;
	font-style:bold;
	color:White;
	clear: left;
	position:static;
	padding: 0 0 20px 0 ;
}

#footer{
	
}

hr{
	width:50%;
	margin:auto;
	border-width: 3px;
	border-color:black;
}

@media only screen and (max-width: 1300px) {
		/* For an xx-wide browser................................................................................................................. */
#album1{
	 width:500px;
}
#album2{
	 width:500px;
}
}
@media only screen and (max-width: 1200px) {
		/* For an 1000-1200 wide browser................................................................................................................... */
	h1{
		font-size:1.5em;
	}
	#phones li{
		display: inline;
		padding:0px 20px 0px 20px;
		font-size:15px;
	}	
	#buyinfo{
		font-size:15px;
	}	
	.listlinks li{
		font-size:0.8em;
	}
	#album1{
	 width:450px;
	}
	#album2{
	 width:450px;
	}
}
@media only screen and (max-width: 1000px) {
		/* For an xx-wide browser............................................................................................................ */
	/*  make one column */
	h1{
		font-size:2em;
	}	
	#phones li{
		display: inline;
		padding:0px 20px 0px 20px;
		font-size:15px;
	}	
	#buyinfo{
		font-size:15px;
	}	
	.listlinks li{
		font-size:1em;
	}
	#album1{
		float:initial;
		width:600px;
		display:block;
		top:15px;
		margin:auto;
	}
	#album2{
		float:initial;
		width:600px;
		display:block;
		margin:auto;
		top:25px;
	}
	#llink2{
		display:block;
		position:relative;
		top:20px;
	}
}

@media only screen and (max-width: 800px) {
		/*  Break listlinks into 2 rows */
	#phones li{
		display: block;
		padding:0px 20px 0px 20px;
		font-size:20px;
	}	
	/* break the eight inline boxes into four over four   */
	.listlinks li{
		font-size:1em;
	}		
	
}

@media only screen and (max-width: 700px) {
		
}		
		
@media only screen and (max-width: 550px) {
		/* For a phone browser ...............................................................................................................*/
	#album1{
		 width:500px;
	}
	#album2{
		 width:500px;
	}
}