@font-face {
    font-family: 'avenirbook';
    src: url('fonts/avenir-book-webfont.eot');
    src: url('fonts/avenir-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/avenir-book-webfont.woff') format('woff'),
         url('fonts/avenir-book-webfont.ttf') format('truetype'),
         url('fonts/avenir-book-webfont.svg#avenirbook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenirlight';
    src: url('fonts/avenir-light-webfont.eot');
    src: url('fonts/avenir-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/avenir-light-webfont.woff') format('woff'),
         url('fonts/avenir-light-webfont.ttf') format('truetype'),
         url('fonts/avenir-light-webfont.svg#avenirlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{padding:0px; margin:0px; overflow:hidden; font-family:'avenirlight'; font-weight:100; color:black;}
html{}
.page, body{overflow:visible;}
h1{font-size:20px; font-family:'avenirbook', helvetica, arial; font-weight:100; color:#ccc;}
a{text-decoration:none;}
a:linked{text-decoration:none;}
a:visited{text-decoration:none;}

#header{position:fixed; top:0px; text-align:center; width:100%; height:70px;z-index:1;}

#logo{display:block; margin: 10px auto 0; position:relative; background-image: url(images/Joug_Logo_Small.png); width:130px; height:47px;}
.white_logo{background-image: url(images/Joug_Logo_Small_White.png) !important; -webkit-transition:0.5s;}
.black_background{background-color:#000; -webkit-transition:0.3s;}

#product_list {width:4000px; height:480px; margin:0px; position:relative; z-index:0; overflow:hidden;}
#product_list > li {width:320px; height:480px; position:relative; top:0px; display:inline-block;}
#product_list li ul li {background-size: 320px 480px;}

.product_details{position:relative; width:320px; height:2000px;}
.product_details li{position:relative; width:320px; height:480px; display:block; overflow:hidden; text-decoration:none; z-index:2;}

#product_list li h2{position:fixed; left:50px; bottom:125px; font-size:13pt; display:none; z-index:2; overflow:visible;}
#product_list li p{position:fixed; left:50px; bottom:65px; font-size:9pt; line-height:11pt; display:none; z-index:2; width:240px; overflow:visible;}
.offsetOneLine{bottom:87px !important;}

.product_btn{cursor:pointer;position:fixed; width:40px; height:40px; top:50%; margin-top:-20px; z-index:2;}
#product_btn_left{background-image:url(images/mob_btn_left.png); left:0px;}
#product_btn_right{background-image:url(images/mob_btn_right.png); right:0px;}
#swipe_notice{font-size:18px; padding:20px 40px; width:200px; height:44px; position:absolute; z-index:99; background-color:rgba(0,0,0,0.5); color:white;}

#tikumu ul li{background-image:url(images/mob/Tikumu_01.jpg);}
/*#seaflower ul li{background-image:url(images/mob/Seaflower_01.jpg);}*/
#matariki ul li{background-image:url(images/mob/Matariki_01.jpg);}
#seaflower_bamboo ul li{background-image:url(images/mob/Bamboo_Seaflower_01.jpg);}
#frangipani ul li{background-image:url(images/mob/Frangipani_01.jpg);}
#urchin_vanilla ul li{background-image:url(images/mob/Vanilla_Urchin_01.jpg);}
#urchin_bamboo_vanilla ul li{background-image:url(images/mob/Bamboo_Vanilla_Urchin_01.jpg);}
#urchin_white ul li{background-image:url(images/mob/White_Urchin_01.jpg);}
#urchin_bamboo ul li{background-image:url(images/mob/Bamboo_Urchin_01.jpg);}
#seaflower_vanilla ul li{background-image:url(images/mob/White_Seaflower_01.jpg);}
#puawai ul li{background-image:url(images/mob/Puawai_01.jpg);}

#product_icons{position:absolute; top:60px; right:15px; width: 70px; height:40px;}
#product_icons li{float:left; display:block; text-decoration:none; background-image: url(images/mob_img_icon.png); width: 12px; height:12px; margin:1px;  -webkit-transition:1s;}
#product_icons li.active_product{background-image: url(images/mob_img_icon_active.png);}

#product_detail_icons{position:absolute; top:60px; right:15px; width: 14px; height:56px; display:none;}
#product_detail_icons li{float:left; display:block; text-decoration:none; background-image: url(images/mob_img_icon.png); width: 12px; height:12px; margin:1px;  -webkit-transition:1s;}
#product_detail_icons li.active_product{background-image: url(images/mob_img_icon_active.png);}

#footer p{display:block; position:relative; float:left; text-align:center; background-color:white; height:32px; width:80px; margin:5px; color:#999; line-height:35px; border-radius:20px;}
#footer_wrapper{position:relative; left:50%; margin-left:-136px; bottom:-24px; height:40px;}
/*.footer_bg_color{background-color:#999; position:absolute; top:18px; width:100%; height:98px; z-index:1;}*/
#footer{background-color:#999; position:fixed; bottom:-80px; z-index:2; width:100%; display:block; color:white; text-align:center; font-size:12px; height:98px; overflow:visible;}
.footer_icon{background:url(images/footer_image.png) no-repeat center; width:43px; height:43px; position:absolute; left:50%; margin-left:-22px; top:-20px;}
#footer span{text-align:center; width:100%; color:#ccc; line-height:74px; font-size:10px;}
#footer a{position:absolute; right:10px; text-align:right; width:100%; color:#ccc; line-height:74px; font-size:10px;}

#contact{position:absolute; top:0px; left:0px; width:220px; height:300px; display:block; padding:50px; font-size:14px; display:none;}
#contact h1{padding:50px 0 10px 0;}
#contact div{position:relative; padding-right:10px; float:left;}
.grey_text p{color:#ccc;}
#contact p{line-height:40px;}
.padded_left{padding-left:22px;}

#stockists{position:absolute; top:70px; left:0px; width:250px; height:260px; display:block; padding:100px 50px 50px 50px; font-size:14px; display:none; line-height:20px; overflow:scroll; backgroun-color:yellow;}
#stockists h1{padding:10px 0; font-size:18px; font-weight:800; color:#aaa}
#stockists h2{padding:10px 0; font-size:18px; color:#ccc;}
#stockists h4{font-size:14px; font-family:'avenirbook', helvetica, arial; font-weight:800;}
#stockists a{cursor:pointer;}
#stockists div{position:relative; padding-right:10px;}
#stockists p{}
#stockists li{padding:10px 0; }

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #logo{background-image: url(images/Joug_Logo_Large.png); background-size: 130px 47px;}
	.white_logo{background-image: url(images/Joug_Logo_Large_White.png) !important; -webkit-transition:0.5s;}
	#product_icons li, #product_detail_icons li{background-image: url(images/mob_img_icon_large.png); background-size: 12px 12px;}
	#product_icons li.active_product, #product_detail_icons li.active_product{background-image: url(images/mob_img_icon_large_active.png);}
}