/* @reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight:normal;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}

:focus {
outline: 0;
}

/* @fonts */

@font-face {
font-family: 'SignPainterHouseScript';
src: url('../fonts/signpainter-housescript-webfont.eot');
src: local('☺'), url('../fonts/signpainter-housescript-webfont.woff') format('woff'), url('../fonts/signpainter-housescript-webfont.ttf') format('truetype'), url('../fonts/signpainter-housescript-webfont.svg#webfonttE60Hoo5') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'NeueHelveticaBQMedium';
src: url('../fonts/neuehelbqmed-webfont.eot');
src: local('☺'), url('../fonts/neuehelbqmed-webfont.woff') format('woff'), url('../fonts/neuehelbqmed-webfont.ttf') format('truetype'), url('../fonts/neuehelbqmed-webfont.svg#webfontYtfCsOzT') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'NeueHelveticaBQBlack';
src: url('../fonts/neuehelbqbla-webfont.eot');
src: local('☺'), url('../fonts/neuehelbqbla-webfont.woff') format('woff'), url('../fonts/neuehelbqbla-webfont.ttf') format('truetype'), url('../fonts/neuehelbqbla-webfont.svg#webfont6hojNj2d') format('svg');
font-weight: normal;
font-style: normal;
}

/* @layout */

html {
background-color:white; 
background-image: url("../images/tablecloth.png"); /* until all browsers can fully support linear gradients */
background-image: -moz-linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), -moz-linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
height:140%;
overflow-x:hidden;
overflow-y:scroll;
}

body {
width:655px;
position:absolute;
top:20px;
left:50%;
-moz-box-sizing:padding-box;
margin-left:-315px;
padding:0 25px 0;
color:#373634;
opacity:1;
text-shadow:0 1px 0 #f9f9f9;
background:#f9f9f9 url("/images/pbg.png");
-moz-box-shadow: 0 10px 10px rgba(0,0,0,.5), 0 1px 150px 30px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,.5);
-ms-box-shadow: 0 10px 10px rgba(0,0,0,.5), 0 1px 150px 30px rgba(0,0,0,.1) inset;
-o-box-shadow: 0 10px 10px rgba(0,0,0,.5), 0 1px 150px 30px rgba(0,0,0,.1) inset;
box-shadow: 0 10px 10px rgba(0,0,0,.5), 0 1px 150px 30px rgba(0,0,0,.1) inset;
/*-moz-transform:scale(.4) rotate(-5deg);
-moz-transition-property: -moz-transform, color, top, box-shadow;
-moz-transition-duration:200ms;
-moz-transition-delay: 250ms;
-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transform:scale(.4) rotate(-5deg);
-webkit-transition-property: -moz-transform, color, top, box-shadow;
-webkit-transition-duration:200ms;
-webkit-transition-delay: 250ms;
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
transform:scale(.4) rotate(-5deg) translateZ(0);
transition-property: -moz-transform, color, top, box-shadow;
transition-duration:200ms;
transition-delay: 250ms;
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-background-clip: padding-box;*/
}

body::after {
content: '\00A2';
font:bold 84px/1 SignPainterHouseScript, sans-serif;
position:absolute;
top:405px;
left:50%;
margin-left:-15px;
}

/*html:hover body {
color:#272626;
opacity:1;
top:100px;
-moz-transform:scale(1) rotate(0deg);
-webkit-transform:scale(1) rotate(0deg);
-ms-transform:scale(1) rotate(0deg);
-o-transform:scale(1) rotate(0deg);
transform:scale(1) rotate(0deg);
-moz-box-shadow: 10px 100px 100px rgba(0,0,0,1), 0 1px 150px 30px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 10px 100px 100px rgba(0,0,0,1), 0 1px 150px 30px rgba(0,0,0,.1) inset;
-ms-box-shadow: 10px 100px 100px rgba(0,0,0,1), 0 1px 150px 30px rgba(0,0,0,.1) inset;
-o-box-shadow: 10px 100px 100px rgba(0,0,0,1), 0 1px 150px 30px rgba(0,0,0,.1) inset;
box-shadow: 10px 100px 100px rgba(0,0,0,1), 0 1px 150px 30px rgba(0,0,0,.1) inset;
}*/



header {
width:620px;
display:block;
background:transparent url("../images/tp.png") 85% 0 no-repeat;
position:relative;
min-height:239px;
margin-bottom:10px;
}

header h1 {
text-transform:uppercase;
position:absolute;
top:70px;
font:100 69px/1 NeueHelveticaBQBlack, sans-serif;
}

header h1::before {
text-transform:none;
content: 'Head for';
position:absolute;
margin-top:-20px;
text-align:center;
width:230px;
font:100 28px/1 NeueHelveticaBQBlack, sans-serif;
}

header h1::after {
text-transform:none;
text-align:right;
content:'Interactive designer and cheeseburger connoisseur.';
font:100 32px/.75 SignPainterHouseScript, sans-serif;
width:300px;
position:absolute;
left:-45px;
bottom:-55px;
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}

header::after {
position:absolute;
bottom:10px;
left:53px;
content:'Open: 8 A.M. to midnight, 7 days a week!';
font:100 12px/1 NeueHelveticaBQBlack, sans-serif;
text-transform:uppercase;
}

header::before {
position:absolute;
bottom:6px;
right:60px;
content:'We accept Square and Bank with Simple!';
font:100 16px/1 SignPainterHouseScript, sans-serif;
}


h2 {
width:625px;
text-align:left;
font:100 175px/1 NeueHelveticaBQBlack, sans-serif;
position:relative;
height:375px;
margin-bottom:20px;
margin-left:-5px;
background:transparent url("../images/hb.png") 100% 100% no-repeat;
}

h2::before {
position:absolute;
margin-top:-10px;
content:'Delicious jumbo all pure \2026';
font:100 28px/1 NeueHelveticaBQBlack, sans-serif;
text-align:center;
width:490px;
}

h2::after {
position:absolute;
top:110px;
left:-23px;
content:'10';
letter-spacing: -42px;
font:100 280px/1 NeueHelveticaBQBlack, sans-serif;

}

section {
width:240px;
float:left;
margin-top:-30px;
padding:0;
}

section h4 {
font:100 12px/1 NeueHelveticaBQBlack, sans-serif;
margin-bottom:5px;
text-align:center;
text-transform:uppercase;
}

section nav {
width:270px;
display:block;
padding:25px 20px 20px;
margin-left:-10px;
background:
url("../images/b1.png") 50% 4% no-repeat,
url("../images/b2.png") 94% 0 repeat-y,
url("../images/b3.png")  50% 98% no-repeat,
url("../images/b4.png") 8% 0 repeat-y;
}

section ol {
margin-left:20px;
}

section li {
width:91%;
position:relative;
text-align:right;
font:100 13px/1 NeueHelveticaBQBlack, sans-serif;
}

section li::after {
content: '. \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0 . \00a0';
position:absolute;
left:0;
bottom:1px;
color:#333;
width:100%;
text-align:left;
font:100 12px/1.2 NeueHelveticaBQMedium, sans-serif;

}

section h3 {
font:100 15px/1 NeueHelveticaBQBlack, sans-serif;
text-transform:uppercase;
text-align:center;
font-size: 19px;
margin: 0;
width: 300px;
}

section + section h3 {
margin:0 auto 10px;
width:90%;
font-size:14px;
}



section p, section li a {
font:100 12px/1.2 NeueHelveticaBQMedium, sans-serif;
}

section a {
color:inherit;
text-align:left;
text-decoration:none;
position:absolute;
left:0;
background:#f9f9f9 url("/images/pbg.png") 100% 0;
padding-right:10px;
z-index:1;
}

section + section {
padding:0;
margin-top:0;
width:286px;
float:right;
padding-bottom:148px;
position:relative;
background:transparent url("../images/bt.png") 0 100% no-repeat;
}

section + section h4 {
font:100 48px/1 NeueHelveticaBQBlack, sans-serif;
position:absolute;
bottom:0;
right:10px;
padding-bottom:10px;
text-transform:uppercase;
}

section + section h4::after {
font:100 13px/1 NeueHelveticaBQBlack, sans-serif;
content:'HTML5 CSS3 jQUERY';
position:absolute;
bottom:0;
right:0;
}

figure {
display: block;
float: right;
font: 100 39px/0.75 SignPainterHouseScript,sans-serif;
margin-bottom: 0;
margin-right: -40px;
margin-top: 19px;
position: relative;
text-align: right;
width: 287px;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);

}

figure::after {
width:42px;
height:22px;
display:block;
content: '\00a0';
position:absolute;
top:30px;
margin-left:0;
background:transparent url("../images/ar.png") no-repeat;
-moz-transform:rotate(-290deg) scale(.8);
-webkit-transform:rotate(-290deg) scale(.8);
-ms-transform:rotate(-290deg) scale(.8);
transform:rotate(-290deg) scale(.8);
}

footer, footer .menu {
width:590px;
display:block;
clear:both;
margin:10px auto 10px;

}

footer .menu {
margin-left:0;
float:left;
}


footer .menu li {
display:inline;
}

footer .menu a {
width:41px;
height:40px;
display:block;
text-indent:-999em;
background-image: url("../images/ic.png");
background-repeat:no-repeat;
background-color:transparent;
float:left;
margin-right:50px;
-moz-border-radius:45px;
-webkit-border-radius:45px;
-ms-border-radius:45px;
-o-border-radius:45px;
border-radius:45px;
}

footer .menu li:last-child a {
margin-right:0;
}

footer .menu a:hover {
background-color:#fff;
}

footer .menu a[rel="twitter"] { background-position:0 0; }
footer .menu a[rel="facebook"] { background-position:-41px 0; }
footer .menu a[rel="instagram"] { background-position:-82px 0; }
footer .menu a[rel="dribbble"] { background-position:-123px 0; }
footer .menu a[rel="lastfm"] { background-position:-164px 0; }
footer .menu a[rel="linkedin"] { background-position:-205px 0; }
footer .menu a[rel="email"] { background-position:-246px 0; }

footer cite {
	display: block;
	    font: 100 10px/1 NeueHelveticaBQBlack,sans-serif;
	    text-align: center;
	    text-transform: uppercase;
	    width: 590px;
}

footer cite::after {
text-transform:none;
content:'\00a0 \00a0Thanks for visiting. See you next time!';
font:100 17px/1 SignPainterHouseScript, sans-serif;
}