/***************************************************************************************************************** * Copyright 2011, Anthonys Pizza and Pasta. All rights Reserved * No License Provided or Implied. As Is, No Warranty Provided or Implied. * * Several concepts and ideas from html5boilerplate.com *****************************************************************************************************************/ /********************************************************* * * Reset * * Utilizes ideas from modernizer and bulletproof... * This resets any default css parameters applied by the * browser's CSS. It also includes some commonly used * functionality for floating, clearing, etc. * *********************************************************/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-text-size-adjust:100%;position:relative;font-weight:normal}input,select{vertical-align:middle;margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}.clearfix:after{content:".";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.floatL{float:left}.floatR{float:right}.zeroFont{font-size:0;line-height:0}.zero{height:0;font-size:0;line-height:0;border:0;padding:0;margin:0}.pointer{cursor:pointer}#pageBin input:-webkit-autofill,input:-webkit-autofill{background-color:blue !important;outline:none} /********************************************************* * * Sprites * * _sprite.css is generated automatically by * SpriteGenerator.php * *********************************************************/ .logo.ms{background-position:-1px -1px;width:226px;height:143px}#headerBin.ms{background-position:-228px -1px;width:1000px;height:115px}.gcPhotoBG.ms{background-position:-1229px -1px;width:316px;height:322px}.footerLogo.ms{background-position:-1546px -1px;width:123px;height:62px}.icon .at.ms{background-position:-1670px -1px;width:25px;height:25px}.icon .mapPin.ms{background-position:-1696px -1px;width:21px;height:32px}.icon .pizza.ms{background-position:-1718px -1px;width:29px;height:36px}.icon .bg.ms{background-position:-1748px -1px;width:52px;height:52px}#headerBin .icon.facebook.ms{background-position:-1801px -1px;width:18px;height:18px}#headerBin .icon.twitter.ms{background-position:-1820px -1px;width:18px;height:18px}#headerBin .icon.mobile.ms{background-position:-1839px -1px;width:18px;height:18px}.white.up .arrow.ms,.arrow.white.up.ms{background-position:-1858px -1px;width:19px;height:10px}.t4 .open .white .arrow.ms,.white.down .arrow.ms,.arrow.white.down.ms{background-position:-1878px -1px;width:19px;height:11px}.t4 .white .arrow.ms,.white.right .arrow.ms,.arrow.white.right.ms{background-position:-1898px -1px;width:10px;height:19px}.white.left .arrow.ms,.arrow.white.left.ms{background-position:-1909px -1px;width:10px;height:19px}.arrow.red.down.ms{background-position:-1920px -1px;width:26px;height:14px}.location .arrow.red.down.ms{background-position:-1947px -1px;width:18px;height:10px}#nav .arrow.ms{background-position:-1966px -1px;width:18px;height:10px}.ms{background:url('../images/ms.png') no-repeat}#footer.bg.xs{background-position:-0px -0px;width:100%;height:132px}#topBG.xs{background-position:-0px -133px;width:100%;height:144px}#mainBG.xs{background-position:-0px -278px;width:100%;height:719px}.location .subNav.active.xs{background-position:-0px -998px;height:30px}.gradient.red.large.xs{background-position:-0px -1029px;width:100%;height:498px}.gradient.red.medium.xs{background-position:-0px -1528px;width:100%;height:204px}.gradient.red.small.xs{background-position:-0px -1733px;width:100%;height:112px}.xs{background:url('../images/xs.png') repeat-x}.menuHeader .bg.ys{background-position:-0px -0px;width:610px;height:100%}.ys{background:url('../images/ys.png') repeat-y}#bodyBG{background:url('../images/bodyBG.png') 50% 0 repeat-y} /********************************************************* * * Colors * * All of the generic colors used in the CSS. Both * backgrounds and text colors. Backgrounds should be * prefixed with the class .bg ie: * .bg.red { * background: red; * } * *********************************************************/ .lightBrown a,.lightBrown{color:#C3996B}.lightBrownBG{background-color:#C3996B}.brown a,.brown{color:#603813}.brownBG{background-color:#603813}.darkBrown a,.darkBrown{color:#2A180D}.darkBrownBG{background-color:#2A180D}.red a,.red{color:#C0272D}.redBG{background-color:#C0272D}.green a,.green{color:#008E7F}.greenBG{background-color:#008E7F}.white a,.white{color:#FFF}.whiteBG{background-color:#FFF} /********************************************************* * * Default * * All of the main css for various templates in the * site * *********************************************************/ html{overflow-y:scroll}html,body{font-family:Georgia, serif;font-size:13px;line-height:23px;height:100%;width:100%}#topBG{position:absolute;width:100%}#mainBG{top:144px;position:absolute;width:100%}#pageLayout{height:100%;width:100%;z-index:100}#bodyBG{position:fixed;width:100%;height:100%;z-index:100}#pageBody{z-index:500;width:1000px;margin:auto;min-height:100%}#headerBin{overflow:hidden}#headerBin .logo{position:absolute;top:-10px}#headerBin .iconBin{position:absolute;right:0}#headerBin .iconBin{position:absolute;right:26px;bottom:16px;list-style-type:none}#headerBin li{float:right;padding:0 0 0 18px}#headerBin .icon{float:left;top:2px;left:-4px}#headerBin a{text-decoration:none}#navBin{padding:0 0 12px 0}#subNav a,#nav a{text-decoration:none}#subNav a:hover{text-decoration:underline}#nav{z-index:10000;height:60px;list-style-type:none;font-size:24px;font-family:'FONT3';text-transform:uppercase;line-height:60px}#nav .divider{width:1px;height:60px}#nav li{float:left;text-align:center;cursor:pointer}#nav .bg{display:none;top:0;left:0;height:60px;position:absolute;width:100%;z-index:15000;opacity:.55}#nav .active .bg{display:block}#nav .arrow{display:none;position:absolute;top:60px;left:-9px;z-index:20000;margin:0 0 0 50%}#nav .active .arrow{display:block}#nav .noSubNav .arrow{display:none}#nav a{z-index:20000;position:relative}#nav .home{width:132px}#nav .locationsAndMenus{width:298px}#nav .craft{width:136px}#nav .aboutUs{width:176px}#nav .franchiseInfo{width:254px}#subNav{z-index:5000;height:30px;font-size:12px;line-height:14px;text-transform:uppercase;overflow:hidden}#subNav ul{list-style-type:none;display:none;padding:0 12px 0 12px}#subNav li{padding:8px 0 8px 0;float:left}#subNav .divider{margin:0 10px 0 10px;font-size:14px;top:-1px}#subNav ul.active{display:block}#footer{position:absolute;height:132px;bottom:0;left:0;font-size:12px;line-height:16px}#footerNav{margin:12px 20px 0 0;opacity:.40;filter:alpha(opacity=40)}#footer td{padding:0 14px 0 14px}#footer ul{list-style-type:none}#footer .footerLogo{position:absolute;top:12px;left:12px}#footer .parent{text-transform:uppercase;font-size:13px}#footer .divider{width:1px;padding:0}#footer a{text-decoration:none}#footer a:hover{text-decoration:underline}#mainBin{width:978px;padding:0 0 140px 0;margin:auto}#mainBin .leftCol{float:left;width:316px}#mainBin .rightCol{float:right;width:648px}#mainBin .body{padding:14px 0 12px 0}#mainBin .body .headline{font-family:'FONT3';font-size:18px;padding:0 24px 12px 24px;border-bottom:1px solid #CCC}#mainBin .body .copy{width:610px;padding:12px 0 0 0;margin:auto}.button{display:inline;padding:8px;cursor:pointer}.slideBin{overflow:hidden}#nav .active .bg{display:block}#nav .arrow{display:none}.slideBin .slider{position:absolute;width:10000px;top:0;left:0}.slideBin .slide{float:left}.links{position:absolute;bottom:0;left:0;padding:10px 6px 10px 10px;border-top:1px solid #FFF;border-right:1px solid #FFF}.links .link{width:10px;height:10px;line-height:0;font-size:0;opacity:.4;filter:alpha(opacity=40);cursor:pointer;margin:0 4px 0 0;float:left}.links .link.active{opacity:1;filter:alpha(opacity=100)}.splitBin{margin:0 0 12px 0}#mainBin .header{height:112px}#mainBin .header{background-position:-450px -1px}#mainBin .header h1{text-transform:uppercase;padding:0 0 0 24px;font-size:70px;line-height:112px}.t1 .slide,.t1 .slideBin{width:978px;height:342px}.t1 .slideBin{margin:0 0 12px 0}.t1 .feature{float:left;height:150px;width:316px;overflow:hidden}.t1 .body{height:124px;overflow:hidden}.t2 .downloadBin{height:112px}.t2 .downloadBin a{text-decoration:none}.t2 .downloadBin .body{text-align:center;padding:15px 0 0 0}.t2 .downloadBin .label{font-size:14px;position:absolute;left:0;top:-22px}.t2 .downloadBin .file{font-size:18px;line-height:18px;padding:6px 0 6px 0;text-transform:uppercase;border-top:1px solid #FFF;border-bottom:1px solid #FFF;display:inline;top:38px}.t2 .downloadBin .arrow{position:absolute;top:6px;left:-16px}.t2 .gcPhotoBG{text-align:center;background-color:#2A180D}.t2 .gcPhotoBG img{top:36px}.t4 .location,.t3 .locations{margin:12px 0 0 0}.t3 .location{padding:14px 24px 14px 24px;border-bottom:1px solid #CCC}.t4 .location{padding:0;border:0}#selectedLocation{border-bottom:8px solid #008E7F}.t3 .location .details{float:left;width:400px}.t3 .location .icons{width:174px;float:right}.t3 .location .icons .arrow{position:absolute;top:85px;margin:0 0 0 50%;left:-9px;display:none}.t3 .location .icons .active .arrow{display:block}.t3 .location .name{font-size:20px}.t3 .location .phone{font-size:10px}.t3 .location .icon{width:52px;height:52px;float:right;margin:0 0 0 5px;cursor:pointer}.t3 .location .icon .bg{position:absolute;top:0;left:0}.t3 .location .icon .at,.t3 .location .icon .mapPin,.t3 .location .icon .pizza{position:absolute}.t3 .location .icon .pizza{top:8px;left:11px}.t3 .location .icon .mapPin{top:10px;left:15px}.t3 .location .icon .at{top:13px;left:13px}.t3 .location .icon .label{font-size:10px;line-height:12px;width:52px;text-align:center;position:absolute;top:54px}.t3 .findLocation .bin{width:256px;margin:auto}.t3 .findLocation .headline{font-size:24px;text-align:center;padding:30px 0 9px 0;margin:0 0 10px 0;border-bottom:1px solid #FFF}.t3 .findLocation input{width:248px;background:#FFF;border:1px solid #FFF;padding:3px;height:22px;line-height:22px;font-size:16px;margin:0 0 10px 0}.t3 .findLocation .or div{margin:12px 0 0 0;float:left;width:56px;text-align:center;font-size:18px}.t3 .findLocation .or .line{width:100px;border-bottom:1px solid #FFF;top:-10px}.t3 .mapBin{margin:10px auto 0 auto;padding:14px 30px 30px 30px;font-size:14px}#map{width:256px;height:256px;background:#FFF;margin:8px auto 0 auto}.t3 .location a{text-decoration:none}.t4 .locationBin{padding:14px 24px 14px 24px;border-bottom:1px solid #CCC}.t4 .location .button{padding:8px 8px 8px 24px;left:-24px}.t3 .location .distance{padding:0 12px 0 12px}.t4 .arrow{position:absolute;top:6px;left:8px}.t4 .menuHeader .arrow{left:12px;top:5px}.t4 .open .arrow{top:8px;left:8px}.t4 .actionBin{margin:12px 0 0 0;overflow:hidden}.t4 .categoryBin{display:none}.t4 .menuHeader{height:30px;line-height:30px;text-transform:uppercase;font-size:14px;margin:0 0 8px 0;padding:0 0 0 40px;cursor:pointer}.t4 .categoryLayout .subNavBin{padding:0 0 0 50px;height:30px;line-height:30px;font-size:14px}.t4 .subNavBin ul{list-style-type:none}.t4 .subNavBin li{padding:0 8px 0 8px;float:left}.t4 .subNav{cursor:pointer}.t4 .subNavBin .arrow{top:-2px}.t4 .subNav .arrow{top:30px;margin:0 0 0 50%;left:-9px;display:none}.t4 .subNav.active .arrow{display:block}.t4 .category{padding:18px 0 18px 84px;display:none}.t4 .category.active{display:block}.category .description{font-size:11px;padding:0 0 0 8px}.wholePieBin{float:left;width:212px}.pizzaToppings{float:right;width:277px;border-left:1px solid #C0272D;padding:0 15px 0 8px}.wholePieHeadline{font-weight:bold}.wholePieItems{padding:4px 0 8px 0}.emailBin .label{font-size:16px}.emailBin .label .small{font-size:12px}.t4 .location .action{display:none}.t4 .location .action.active{display:block}.form{min-height:300px}.inputGroup{margin:0 0 8px 0}.inputGroup label{float:left;width:142px;text-align:right;padding:0 8px 0 0}.inputGroup .inputBin{float:right;width:450px}.inputGroup input,.inputGroup select,.inputGroup textarea{width:450px;border:1px solid #C0272D;height:18px;padding:3px;line-height:18px;font-size:12px;color:#C0272D}.inputGroup select{height:26px}.inputGroup textarea{height:90px}#mainBin .inputGroup .button{padding:8px;left:0}.requiredMessage{margin:0 0 12px 0} /********************************************************* * * Default IE * * Any special CSS necessary for all IE browsers. Prefix * the class with .ie6, .ie7, .ie8, etc. This allows * us to target specific IE browsers by appending the * various ie version to the html tag utilizing javascript * * ex: * .ie8 .someBin { ... } * .ie .someBin { ... } * .ie6 .someBin { ... } * *********************************************************/ .ie #nav .active .bg.ys{background:url('../images/ys.png') repeat-y;background-position:-611px -0px;height:100%}.ie #mainBin .body .headline{font-size:16px}.ie .t3 .findLocation .headline{font-size:20px} /********************************************************* * * Progressive Enhancement * * This file allows us to adjust the layout of the * website when specific dimension parameters are met. * * At defined intervals a wNUMBER will be appended to * the html element on the page. Therefore we can have * our CSS adjust based upon that. * * ex: * // this would be applied when the width of the browser * is 1000 pixels or less. * .w1000 .someClassAdjustment { ... } * * // this would be applied when the width of the browser * is both 767 pixels or less * .w1000 .someClassAdjustment { ... } * .w767 .someClassAdjustment { ... } * * Standard Dimension Applications are: * w1000 - Applied for 768 width * w767 - Applied for 480 width * w479 - Applied for 320 width * *********************************************************/ /********************************************************* * * Fonts * * Special CSS for any custom fonts used in the design. * CSS and files can be generated at fontsquirrel.com * *********************************************************/ /*@font-face { font-family: 'FONT1'; src: url('../fonts/font1.eot'); src: url('../fonts/font1.eot?#iefix') format('embedded-opentype'), url('../fonts/font1.woff') format('woff'), url('../fonts/font1.ttf') format('truetype'), url('../fonts/font1.svg#CenturyGothicBold') format('svg'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'FONT2'; src: url('../fonts/font2.eot'); src: url('../fonts/font2.eot?#iefix') format('embedded-opentype'), url('../fonts/font2.woff') format('woff'), url('../fonts/font2.ttf') format('truetype'), url('../fonts/font2.svg#CenturyGothicRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FONT3'; src: url('../fonts/font3.eot'); src: url('../fonts/font3.eot?#iefix') format('embedded-opentype'), url('../fonts/font3.woff') format('woff'), url('../fonts/font3.ttf') format('truetype'), url('../fonts/font3.svg#CenturyGothicRegular') format('svg'); font-weight: normal; font-style: normal; } /*.fontIR { font-family: 'FONT1'; }*/ .fontIB { font-family: 'FONT2'; } .fontIL { font-family: 'FONT3'; } #nav .bg { background: -moz-linear-gradient( left center, #ECDFD1 0%, #FFF 30%, #FFF 60%, #D7BB99 100% ); background: -webkit-gradient( linear, left top, right top, color-stop(0, #ECDFD1), color-stop(0.30, #FFF), color-stop(0.60, #FFF), color-stop(1.00, #D7BB99) ); } .slideBin { background: -moz-linear-gradient( top, #C0272D 0%, #8B191B 100% ); background: -webkit-gradient( linear, center top, center bottom, color-stop(0, #C0272D), color-stop(1.00, #8B191B) ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C0272D', endColorstr='#8B191B'); }