@charset "utf-8";
/* Best to declare character encoding in stylesheet */



/* apply a natural box layout model to all elements, but allowing components to change */
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
	  margin: 0; /* Allows divs to go to edge of browser */
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1em; /* em is the font sizing unit recommended by w3c */
}

#container {
	  margin: 0px 0px 0px 0px;
}



#MenuMain {
		/* Fix menu in place */
	    /* position fixed means element positioned relative to the browser window */
	    position: fixed;
		
		
		/* 0px from top of browser window, i.e. right at top */
		/* top Required for correct fixed positioning */ 
	    top: 0;
	
		margin: 0px 0px 0px 0px;
		
		background-color: #dbeffc;
		
		/* background-color: #F0F0F0; */
		
		border-style: solid;
		
		border-width: 0.3em 0em 0.1em 0em;
		
		border-top-color: #1794F0;
			
		border-bottom-color: #666666;
		
		width: 100%;
		
		padding: 0.2em;
   }



#header {
		/* Need a margin-top on header div to make it appear below navigation */
		/* margin: 30px 0px 0px 0px; */
		margin: 1.8em 0em 0em 0em;
		
		background-color: #C3C3C3;
		
		width: 100%;
		
		padding: 0em;
   }
   
   
#LogoMain {
            margin: 6px 0px 2px 10px;
}   
   
#HeaderRightBanner {
       float: right;
	   margin: 6px 10px 2px 0px;
       display: none;	
}
   


   
#CookieMsg {
           float: right;
		   padding: 0em 0em 0em 0em;
	}




#intro {
       width: 100%;
	   margin: 0px 0px 0px 0px;
	   padding: 2px;
	   border-style: solid;
	   border-width: 0px 0px 1px 0px;
	   border-color: #E5E5E5;
}


/* Columns For Mobile, Start */
#Column1Left {
		width: 100%;
		
		padding: 2px;
		
		background-color: #D8D8D8;
		
		/* Bottom margin set so gap before first paragraph of Column2 on mobile */
		margin: 0em 0em 0.6em 0em;
}

#Column2Middle {
		width: 100%;
		padding: 2px;
		background-color: #FFFFFF;
}

#Column3Right {
		
		width: 100%;
		
		padding: 2px;
		
		background-color: #D8D8D8;	
		
		display: inline-block;	
}

/* Columns For Mobile, End */


h1 {
	color: #660099;
	font-size: 1.6em;
	margin: 0.3em 0em 0.3em 0em;
}

h2 {
	font-size: 1.4em;
	margin: 0.2em 0em 0.2em 0em;
	color: #660099;
}

h3 {
	font-size: 1.2em;
	margin: 0.2em 0em 0.2em 0em;
	color: #660099;
}

h4 {
	font-size: 1em;
	margin: 0.2em 0em 0.2em 0em;
	color: #660099;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0em 0em 1em 0em;	
}


.clear { clear: both; } /* Apply style to a br and you can clear the columns of floating divs above */
                        /* clear both will clear both left and right floated elements above */


.RelevantMerchantsImagesResponsive {
    /* Bottom margin set so will never touch an element below */
	margin: 0em 0em 0.6em 0em;	
}


.TableMerchantList {

    width: 100%;
	
	border: 1px solid #999999;
	
	background-color: #F5F5F5;
	
}


.celltopsites {
	font-weight: bold;
	background-color: #E9E9E9;
}


.LogoMerchant {
    float: left;
	margin: 0px 2px 0px 0px;
}


.DivAdsInPageResponsive {
     width: 100%;
	 background-color: #B9B9B9;
}

.DivAdsColLeft {
     width: 100%;
	 background-color: #E1E1E1;
}




.MultipleProductContainer {
	
	width: 100%;
	
    background-color: #E1E1E1;
	
	/* Want no margins as want AdSense directly underneath */
	margin: 0em 0em 0em 0em;
	
	/* overflow: hidden allows floating elements to be contained properly, it forces the containing block to expand and contain the floated elements. . In general, this technique works very well. However, if you have any absolutely positioned elements inside the container, they may not show up. */ 
	overflow: hidden;	 
}


.SingleProductContainer {
	width: 200px;
	
	float: left;
	
	text-align: center;
	
	background-color: #D3D3D3;	
	
	margin: 10px 0px 10px 10px;
}


.rightbanner {
    display: block;
	
    margin-left: auto;
	
    margin-right: auto;
	}
	


#MenuFooter {
	width: 100%;
	
	border-width: 0.1em 0em 0em 0em;
	
	border-style: solid;
	
	border-color: #999999;
	
	padding: 0.2em;
	
	background-color: #F5F5F5;
}

#FooterLowPrices {
    width: 100%;
	
	margin-left: auto;
	
    margin-right: auto;
	
	border-style: solid;
	
	border-width: 0.1em 0em 0.4em 0em;
	
	border-top-color: #666666; 
	
	border-bottom-color: #1794F0;
		
	padding: 0.2em;
	
	background-color: #D6D6D6;
}


#CopyrightMsg {

    text-align: center;
    
	margin: 0.7em 0.2em 0.2em 0.2em; 
	
} 




#LogoLowPrices {
    display: block;
	
	margin-top: 0.2em;
	
	margin-bottom: 1.6em;
	
    margin-left: auto;
	
    margin-right: auto;
} 






/* Link Styles */

a:link {
	color: #1144DD;
	font-weight: bold;
}


a:visited {
	color: #1144DD;
	font-weight: bold;

}

a:hover {
	color: #000099;
	font-weight: bold;
	background-color: #CFE9FE;
}







/* Old Styles */

.tblmain {
	background-color: #FFFFFF;
	border: 1px none;

}


.tablehighlighted {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	border: 1px solid #999999;
	background-color: #F5F5F5;
}


.txtnormal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

.tblmenumain {
	border: 1px solid #999999;
	background-color: #F5F5F5;

}

.txtmerchants {
	background-color: #EEEEEE;
	border: 1px solid #999999;
	padding: 5px;


}

.txtfooter {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 60%;
	color: #666666;
}




/* MEDIA QUERIES */  
/* for 768px screens or more */
@media only screen and (min-width: 768px) {

#Column1Left {
		/* Want to be able to display 260px images, so percentage calculated accordingly for 768px browser, with a bit of leeway */
		width: 34%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #FF0000; */
}

#Column2Middle {
		width: 64%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #E9F8F8; */
}

#Column3Right {
		width: 0%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #0066CC; */
		
		display: none;
}

}


/* for 1024px screens or more */
@media only screen and (min-width: 1024px) {

#Column1Left {
		/* Want to be able to display 160px images, so percentage calculated accordingly for 768px browser, with a bit of leeway */
		width: 26%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #99B4D1; */
}

#Column2Middle {
		width: 58%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #F5F8FA; */
}

#Column3Right {
		width: 14%;
		float: left;
		padding: 2px;
		/* For testing */
		/* background-color: #99B4D1; */	
		display: inline-block;	
}

#HeaderRightBanner {
       display: inline-block;	
}


}