/* Will Dayble's a pretty cool guy. Eh designs the whole css and doesn't afraid of anything */
/* But then there are fully some other dudes and dudettes who helped out. They broke EVERYTHING */
/* LOL, Squareweave doing on the internets!!!! */
/* ------------------------------------------------------------------ */


/* z-index'd, together, for evar! 
/* Remember to set things in big sections, like, thousands...
/* ------------------------------------------------------------------ */

body{z-index: 500;}
.js_hide_trigger{z-index: 750}
h1{z-index: 1000;}
.photo_credit{z-index: 1200;}
.delicious{z-index: 1500;}



html, body{min-height: 100%}


body{ 
	background: url(../img/delicious/adnate.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/delicious/bagel.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/delicious/bagel.jpg', sizingMethod='scale')";	
}

/* Luke LG go here edit this */
body.caravan{background-image: url(../img/delicious/caravanz.jpg);}
body.tea{background-image: url(../img/delicious/bagel.jpg);}

/* aaaand some animation */
html.hasjs .delicious,
html.hasjs .delicious .menu{transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;}

html.hasjs .delicious{overflow: hidden; width: 0;}
html.hasjs .delicious section{display: none;}
html.hasjs .delicious .menu{margin-right: -400px;}

html.hasjs .delicious.active{width: 400px; }
html.hasjs .delicious.active section{display: block;}
html.hasjs .delicious.active .menu{margin-right:0;}


/* no I hate this now... html.hasjs .delicious.active.hovering{width:590px} */

/* brand */
h1.brand{display: block; background: #fff; width: 200px; height: 200px; padding: 25px; position: fixed; top:20px; right: 0; display: block; text-decoration: none; margin: 0; box-shadow: 0 0 2px rgba(0,0,0,0.2);}
h1.brandsub{ height: 220px;}
h1.brand:hover{background-color: rgba(255,255,255,0.9);}
h1.brand img{max-width: 100%}

h1.brand a{color: #463a3d; text-align: center; display: block; font-size: 22px; font-weight: normal; font-style: italic; text-decoration: none;}
h1.brand a.sub{padding: 15px 0 0;}

/* js_hide_trigger */
.js_hide_trigger{position: fixed; top:0; left: 0; width: 100%; height: 100%;}

.delicious{position: absolute; top:0; left: 0; width: 400px; padding: 0;  min-height: 100%; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.2);}
.delicious .menu {position: fixed; top:0; left: 400px; width: 500px; padding:20px 0 0}
.delicious .menu a{display: block; float: left; clear:left; margin: 0 0 20px; font-size: 24px;  color: #463a3d; text-transform: uppercase; line-height: 36px; padding: 6px 20px; background:rgba(255,255,255,0.9); text-decoration: none; box-shadow: inset -2px 0px 1px rgba(0,0,0,0.1); text-align: right}
.delicious .menu a .icon{opacity: 0.5; margin: 0; width: 20px; font-size: 18px; margin: -5px 6px 0 -2px}
.delicious .menu a small{font-size: 20px; display: block; line-height: 24px; padding-bottom: 15px;}
.delicious .menu a em{font-style: normal;}



.delicious .menu a:hover,
.delicious .menu a:focus,
.delicious .menu a.active{color: #000; background: #fff; box-shadow: 2px 0 1px rgba(0,0,0,0.2);}



.delicious .le_content section{padding: 20px 40px; text-align: center; border-bottom: 20px solid #eee}

.delicious .le_content h2{font-size: 36px;  color: #463a3d; line-height:100%; margin:15px 0; /*  border-bottom: 1px solid #999; line-height: 32px; */}
.delicious .le_content h3{font-size: 20px; line-height: 100%; letter-spacing: 1px; text-transform: uppercase; font-weight: 200; padding: 0; margin: 30px 0 10px;}
.delicious .le_content h3 a{color: #000}
.delicious .le_content h3 .suitability{background: #eff8d6; border-radius: 999px; padding: 0 5px; color: #9da97d; font-size: 16px; display: inline-block; margin-bottom: 5px;}
.delicious .le_content p{color: #5f5b5c;}
.delicious .le_content p a{color: #000;}
.delicious .le_content p a:hover{color: #09f;}

.delicious .le_content .slash{opacity: 0.6; margin: 0 2px}

.delicious .le_content hr{background-color: #fff; border: none; border-bottom: 1px solid #ddd; margin: 30px 0;}

.delicious .le_content iframe{border: 1px solid #ddd; padding: 10px; background: #fff; box-shadow: 0 3px 2px rgba(0,0,0,0.2);}



.photo_credit{position: fixed; top: 100%; left: 0; display: block; background: rgba(0,0,0,0.5); color: #fff; padding: 8px 13px 6px; font-size: 12px; float: left; margin: -60px 0 0;}
.photo_credit a{color: #fff; text-decoration: underline;}
.photo_credit a:hover{color: #fff; text-decoration: none;}


html.wf-active .photo_credit,
html.wf-active .delicious .le_content h2,
html.wf-active .delicious .le_content p{font-family: "calluna",serif; font-style: italic; font-weight: 200;}
html.wf-active .delicious .menu a,
html.wf-active .delicious .le_content h3{font-family: "futura-pt-condensed",sans-serif;}



/* Let's make this a bit more responsive */

/* ipad */
@media (max-width: 1200px) {

	h1.brand{width: 80px; height: 80px; padding: 10px;}
	.delicious .menu{padding-top: 150px;}
	.delicious .menu a{font-size: 28px; line-height: 32px; margin-bottom: 10px}
	.delicious .menu a small{padding-bottom: 5px;}
}


@media (max-width: 1200px) {
	html.hasjs .delicious,
	html.hasjs .delicious .menu{transition: none; -moz-transition: none; -webkit-transition: none;}
}


@media (max-width: 860px) {

	h1.brand{z-index: 2000; left: auto; right: 0;}
	.delicious,
	html.hasjs .delicious.active{width: auto;}
	.delicious .menu{position: relative; top:auto; left:auto; padding-top: 10px; width: auto;}
	.delicious .menu a{float: none; text-align: left; box-shadow: none;}
	.delicious .menu a small{}
	
	.delicious iframe{display: none;}
	
	.photo_credit{display: none;}
}

@media (max-width: 480px) {
	h1.brand{position: absolute;}
	.delicious .menu{padding-top: 140px;}

}