@charset "utf-8";
/*
Author: Darren Jones
Author URL: http://www.gcweb.com.au/
*/

/* Overall page structure
========================================================== */
body { background:#FFF url(../images/bg_body.jpg) no-repeat center top; margin:0;padding:0; font-family: 'Open Sans', sans-serif;}
div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,p,label {margin:0px;padding:0px;}

.wrapper { width:100%;}
.content { width:960px; margin:0 auto;}
a img { border:0px none;}
.clear { clear:both;}
.pngfix {}


/* Header 
========================================================== */
#header { height:280px; margin-bottom:1px; background:url(../images/bg_top.png) left bottom repeat-x;}
#header .logo { margin:0 auto; padding:20px 0 0 0; display:block; width:530px; height:175px;}

#header .phone { display:block; width:960px; height:60px; font-size:36px; font-weight:300; color:#CC1619; line-height:60px; text-align:center; margin-top:25px;}
#header .phone strong { font-weight:700; color:#fff;}

/* Brands Area
========================================================== */
#brands { height:568px; background:url(../images/bg_brands.jpg) center top no-repeat;}

#brands ul.ebg { width:980px; margin:0 auto;}
#brands ul.ebg li { list-style:none; display:block; *display: inline; zoom: 1; margin:0px; padding:0px;}
#brands ul.ebg li a { display:block; float:left; width:490px; height:285px; margin:0px; padding:0px; background:url(../images/bg_quarters.png) no-repeat;
-webkit-transition:background .3s;
-moz-transition:background .3s;
-ms-transition:background .3s;
-o-transition:background .3s;
transition:background .3s;}

#brands ul.ebg li a.ee { background-position: 489px 283px;}
#brands ul.ebg li a.esc { background-position: -50px 283px;}
#brands ul.ebg li a.ilc { background-position: 489px -50px;}
#brands ul.ebg li a.fru { background-position: -55px -55px;}

#brands ul.ebg li a.ee:hover { background-position: 458px 253px;}
#brands ul.ebg li a.esc:hover { background-position: -33px 253px;}
#brands ul.ebg li a.ilc:hover { background-position: 459px -35px;}
#brands ul.ebg li a.fru:hover { background-position:-33px -35px;}

#brands ul.ebg li a:hover img { opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */}

#brands ul.ebg li a:hover {
-webkit-transition:background .3s;
-moz-transition:background .3s;
-ms-transition:background .3s;
-o-transition:background .3s;
transition:background .3s;
}


/* Footer 
========================================================== */
#footer { border-top:5px solid #333; background:#444; padding:25px 0 0 0; margin:1px 0 0 0; font-size:12px; color:#999;}
#footer h3 { font-size:16px; font-weight:400; color:#fff; display:block; padding-bottom:5px; margin-bottom:15px; border-bottom: 1px solid #555;}
#footer .four { width:220px; float:left; margin-right:20px;}

#footer ul.menus { list-style:none; margin-bottom:15px;}
#footer ul.menus li a { color:#999; text-decoration:none;}
#footer ul.menus li a:hover { color:#fff;}

#footer ul.social li { display:block; width:32px; float:left; margin-right:5px; list-style:none;}
#footer ul.social li a img { width:32px; height:32px;}

#footer .copyright { background:#222; border-top:1px solid #333; margin-top:25px; padding:10px 0; font-size:12px; color:#999;}
#footer .copyright a.gcweb { float:right; color:#999; text-decoration:none;}
#footer .copyright a.gcweb:hover { color:#fff;}



/* Responsive 
========================================================== */

@media only screen and (max-width: 959px) {
	
	
	.content { width:100%;}
	
	#header .logo { text-align:center; padding:20px 0 0 0; width:100%; height:175px;}
	#header .phone { display:block; width:100%; height:60px; font-size:large; font-weight:300; color:#CC1619; line-height:60px; text-align:center; margin-top:25px;}
	#header .phone a { color:#fff;}
	
	#brands { background:none;}
	#brands ul.ebg { width:100%;}
	#brands ul.ebg li a { background:none; width:100%; text-align:center;}
	#brands ul.ebg li a img { width:490px;}
	#brands ul.ebg li a.ee { background:url(../images/bg_espresso-essential.jpg) right top no-repeat;}
	#brands ul.ebg li a.esc { background:url(../images/bg_essential-slush-co.jpg) left top no-repeat;}
	#brands ul.ebg li a.ilc { background:url(../images/bg_i-love-coffee.jpg) right top no-repeat;}
	#brands ul.ebg li a.fru { background:url(../images/bg_frozee.jpg) left top no-repeat;}
	
	#brands ul.ebg li a.ee:hover { background-position: right top;}
	#brands ul.ebg li a.esc:hover { background-position: left top;}
	#brands ul.ebg li a.ilc:hover { background-position: right top;}
	#brands ul.ebg li a.fru:hover { background-position: left top;}
	
	#footer .four { width:160px; float:left; margin:0 10px;}
	#footer .four.phones a { color:#ccc;}
	
}

@media only screen and (max-width: 480px) {
	
	#header { height:220px; background:url(../images/bg_top.png) left bottom repeat-x;}
	#header .logo { text-align:center; padding:20px 0 0 0; height:115px;}
	#header .phone { font-size:medium;}
	#header .phone a { color:#fff;}
	#brands ul.ebg li a { height:195px;}
	img { width:300px !important; margin:0 auto;}
	#footer .four { width:220px; float:none; margin:0px auto;}
	#footer .four.phones a { color:#ccc;}
	#footer ul.social li a img { width:32px !important; height:32px !important;}

}