/* CSS for the Pat's GROSS website */

/*
COLOURS
Spewy red --> #ff5449
mustardy yellow --> #fdd58d

/* GENERAL LAYOUT CRAPHOLA */

body {
	padding-top: 0px;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-weight:bold;
	font-size:15px;
	margin:-6; 
	padding-bottom: 0px;
	min-height: 0px;
	background-color: #fdd58d;
}

a img {
	border:medium none;
}
ul{
    list-style-type: none;
    margin: none;
    padding: none;
}


/* BANNER and TITLE */

#heightmeasure {
	min-width: 1100px;
}


#banner {
	position: relative;
	margin-top: 120px;
	z-index: -1;
	min-width:  inherit;
	overflow: inherit;	
	left: auto;
	margin-left: 0px;	
	background-color: #ff5449;

	
}

#banner img  {
	width: 100%;
	min-width: none;
	overflow: hidden;
	
}

#lowerzone {
	position: relative;
	z-index: -1;
	min-width:  inherit;
	overflow: inherit;	
	left: auto;
	margin-left: 0px;	
	background-color: #ff5449;
	min-width: 1100px;
	
}

#lowerzone img  {
	width: 100%;
	min-width: none;
	overflow: hidden;
	
}
#title {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-top: 0px;
	width: 100%;
	background-color: #fdd58d; 	
}
#title img {
	width: 100%;
	z-index: 1;
}
#titlecontainer {
	width: 50%;
	padding-left: 25%;	
	padding-right: 25%;
	background-color: #fdd58d;
	margin-top: -1px;
    margin-bottom: -2px;
	
}

#vommy {
	display: block;
}
#vommypad {
	display: none;
}
#vommymob {
	display: none;
}
#redblock {
	background-color: #FF5343;
	height: 300px;
}
#heel {
	background-color: #FF5343;
	background-image: url(images/footer.png);
	background-repeat: repeat;
	height: 110px;
}	
	

/* BUTTONS */


#buttoncontainer {

	display: none;	
	margin-left: auto;
	margin-right: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
	width: 498px;
	
}
  
#frontbutt {
    width: 200px; height: 42px;
    background: url(images/socials.png);
    margin: 10px auto; padding: 0;
    margin-bottom: 0px;
    position: relative;
}
#frontbutt li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;
}

#frontbutt li, #frontbutt a {
    height: 42px; display: block; 
}

#butrow1 {
    width: 400px;
    height: 173px;
    background: url(images/but1sm.png);
    margin: auto;
    position: relative;
    padding: 0px;
}
#butrow1 li {
	position: absolute;
}
#butrow1 li, #butrow1 a {
	height: 173px; 
	display: block;
}    
#butrow2 {
    width: 498px;
    height: 195px;
    background: url(images/but2sm.png);
    margin: auto;
    position: relative;
    padding: 0px;
}
#butrow2 li {
	position: absolute;
}
#butrow2 li, #butrow2 a {
	height: 195px; 
	display: block;
} 
#butrow3 {
    width: 399px;
    height: 132px;
    background: url(images/but3sm.png);
    margin: auto;
    position: relative;
    padding: 0px;
}
#butrow3 li {
	position: absolute;
}
#butrow3 li, #butrow3 a {
	height: 132px; 
	display: block;
} 
/* positioning the background for each link in the menu */
    
   #frontbutt1 { left: 0; width: 40px; }   
   #frontbutt2 { left: 40px; width: 40px;}
   #frontbutt3 { left: 80px; width: 40px; }
   #frontbutt4 { left: 120px; width: 40px; }
   #frontbutt5 { left: 160px; width: 40px; }
   #butt1 { left: 0; width: 200px; } 
   #butt2 { left: 200; width: 200px; } 
   #butt3 { left: 0; width: 166px; } 
   #butt4 { left: 166; width: 166px; } 
   #butt5 { left: 332; width: 166px; } 
   #butt6 { left: 0; width: 133px; } 
   #butt7 { left: 133; width: 133px; } 
   #butt8 { left: 266; width: 133px; } 
   
   
/* positioning for rollovers */

   #frontbutt1 a:hover {
   background: transparent url(images/socials.png) 0px -42px no-repeat; }
   
   #frontbutt2 a:hover {
   background: transparent url(images/socials.png) -40px -42px no-repeat; }

   #frontbutt3 a:hover {
   background: transparent url(images/socials.png) -80px -42px no-repeat; }
   
   #frontbutt4 a:hover {
   background: transparent url(images/socials.png) -120px -42px no-repeat; }
   
   #frontbutt5 a:hover {
   background: transparent url(images/socials.png) -160px -42px no-repeat; }
   
	#butt1 a:hover {
   background: transparent url(images/but1sm.png) -0px -173px no-repeat; }

	#butt2 a:hover {
   background: transparent url(images/but1sm.png) -200px -173px no-repeat; }
   	
   	#butt3 a:hover {
   background: transparent url(images/but2sm.png) -0px -195px no-repeat; }

	#butt4 a:hover {
   background: transparent url(images/but2sm.png) -166px -195px no-repeat; }	
    
    #butt5 a:hover {
   background: transparent url(images/but2sm.png) -332px -195px no-repeat; }

	#butt6 a:hover {
   background: transparent url(images/but3sm.png) -0px -132px no-repeat; }	
   
   #butt7 a:hover {
   background: transparent url(images/but3sm.png) -133px -132px no-repeat; }

	#butt8 a:hover {
   background: transparent url(images/but3sm.png) -266px -132px no-repeat; }




/* Mobile buttons */
#mobbuttons {
	display: none;
	width:200px;
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: -100px;

}
#mobbuttons ul {
	padding: 0px;
	margin: 0px;
}

#mobbuttons li {
margin-left: auto;
margin-right: auto;
}

#mobbuttonsbig li {
margin-top: 15px;
}

.mob1 {width: 200px; height: 173px; background-image: url(images/but1sm.png); background-position: 0px 173px;}
.mob2 {width: 200px; height: 173px; background-image: url(images/but1sm.png); background-position: 200px 173px ;}
.mob3 {width: 166px; height: 195px; background-image: url(images/but2sm.png); background-position: 0px 195px;}
.mob4 {width: 166px; height: 195px; background-image: url(images/but2sm.png); background-position: 166px 195px;}
.mob5 {width: 166px; height: 195px; background-image: url(images/but2sm.png); background-position: 332px 195px;}
.mob6 {width: 133px; height: 132px; background-image: url(images/but3sm.png); background-position: 0px 132px;}
.mob7 {width: 133px; height: 132px; background-image: url(images/but3sm.png); background-position: 133px 132px;}
.mob6 {width: 133px; height: 132px; background-image: url(images/but3sm.png); background-position: 266px 132px;}



/* FOOTER */
#footer {
	width: 100%;

}



/* MOBILE OPTIMISATION */







/* ===== LESS than 800px MEDIA QUERY ===== */
@media screen and (max-width: 800px) {

#banner	{
min-width:  0px;
overflow: hidden;
left: 0;
margin-left: 0px;
}
#banner img  {
	min-width: 0px;
	
}
#vommypad {
	display:block;
	width:100%;
	
}
#vommy {
	display: none;
}
#titlecontainer {
	width: 70%;
	padding-left: 15%;
	padding-right: 15%;
	margin-left: 0;
	margin-right: 0;
} 
#title img {

}
/* ===== END LESS than 800px MEDIA QUERY =====





/* ===== LESS than 600px MEDIA QUERY ===== */
@media screen and (max-width: 600px) {

#banner	{
min-width: 0px;
width: 100%;
margin-top: 50px;
overflow: hidden;
left: 0;
margin-left: 0px;

}
#banner img  {
	min-width: 0px;
	width: 100%;
	
}
#titlecontainer {
	width: 70%;
	padding-left: 15%;
	padding-right: 15%;
	margin-left: 0;
	margin-right: 0;
} 
#title img {

}
#vommy {
	display: none;
}
#vommypad {
display: none;
}
#vommymob {
	display: block;	
	width: 100%;
}


#buttoncontainer {
	width: 200px;	
}
#social, #topbuttons, #midbuttons, #botbuttons {
display: none;
}
#mobbuttons {
display: block;
}

#redblock {
	background-color: #FF5343;
	height: 1300px;
}
#heel {
	background-color: #FF5343;
	background-image: url(images/footer.png);
	background-repeat: repeat;
	height: 110px;
	
}

	
}
#stream {
	width: 300px;
	height: 170px;
	
}

#streamcontainer iframe {
	width: 300px;
	height: 169px;

	
}

/* ===== END LESS than 600px MEDIA QUERY =====
















/* SCRIPTING TOOLBOX */

#redsquare {
	width: 200px;
	height: 200px;
	display: none;
	background-color: red;
}
#testimage {
	width: 200px;
	height: 200px;
	background-color: blue;
}