/* * Roast Coffee Company website stylesheet * */ /* Reset */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } html, body { height: 100%; } body { font-size: 62.5%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #EEE; /*background-color: #ffeaa8;*/ } ul { list-style: square inside; } ol { list-style: decimal inside; } a { outline: none; text-decoration: none; } a img { border: none; } img, div, #topper { behavior: url(iepngfix.htc); } /* For the IE6 PNG fix */ /* Core stuff */ body { background: url(roastbacker2.jpg) repeat; } .wrap { margin: 0 auto; min-width: 960px; width: 960px; } #topper { height: 75px; /*background-color: #101010;*/ background: url(backlight20.png) repeat; border: 1px solid #202020; } #bottomer { position: relative; height: 50px; /*font-size: 1.2em;*/ text-align: center; margin-top: 10px; } #bottomer h5 { font-size: 1.2em; font-weight: normal; } #bottomer h6 { font-size: 1em; font-weight: normal; } #bottomer a { color: #cc6600; } #socials { position: relative; float: right; /* background: url(social.jpg); */ text-indent: -9999px; width: 150px; height: 32px; } /*#socials a { position: absolute; top: 0px; left: 0; width: 250px; height: 40px; background: url(social.jpg) no-repeat; }*/ #usuals { float: left; /*background-color: #555;*/ margin-left: 160px; display: inline; } #webbeams { position: absolute; float: left; background: url(webbeams2.png) no-repeat; width: 108px; height: 42px; } #blocker { height: 75px; } #blocker2 { height: 180px; } #main { position: relative; /*background-color: #0d0c0c;*/ height: 480px; background: url(cafeback01.jpg); /*background: url(homeback03.jpg);*/ border: 1px solid #202020; } #logo { background: url(logo05.png) no-repeat; height: 75px; width: 250px; } /* #logo { position: absolute; top: -78px; height: 75px; width: 250px; font-size: 6em; background: url(logo05.png) no-repeat; } */ #nav { position: absolute; top: -50px; right: 0px; height: 50px; /*background: url(navback.png) no-repeat;*/ color: #eee; padding: 15px 0 0 0; } #nav li { display: inline; font-size: 1.6em; margin-right: 5px; } .active { border-bottom: 2px dotted #cc6600; } #nav a { color: #EEE; /*background-color: #151515;*/ padding: 2px 5px 5px; } #nav a:hover { color: #999; /*background-color: #ddd;*/ border-bottom: 1px solid #333; } /* home page stuff */ #homebox { padding: 0 8px 8px 8px; /*height: 240px;*/ max-height: 440px; width: 260px; background: url(backlight65.png) repeat; color: #eee; overflow-y: auto; overflow-x: hidden; } #homebox p { margin-bottom: 10px; font-size: 1.2em; } #homebox h2 { font-size: 2em; } #homebox2 { font-size: 2.4em; font-weight: bold; border-bottom: 3px solid #eee; margin-bottom: 8px; color: #eee;/*111*/ overflow-y: auto; } #homebox a { color: #cc6600; border-bottom: 1px solid #aaa; } #homebloghead a { color: #eee;/* eee */ border-bottom: 0px; font-size: 2em; } #hometime { color: #aaa; font-size: 1em; margin-bottom: 10px; } #homeboxwrap { position: absolute; bottom: 5px; right: 5px; } #homelinkfix { position: relative; } #homesocialwrap { position: absolute; top: 5px; right: 10px; } #homesocial { position: relative; height: 128px; width: 210px; } #socialhead { position: absolute; top: 15px; left: -135px; /* WITH THREE LINKS left: -130px; left: -64px */ color: #333; font-size: 2.4em; /*background: url(backlight50.png) repeat;*/ text-align: right; } #sociallinks { /*height: 64px;*/ } #soctwit { position: relative; height: 64px; width: 64px; text-indent: -9999px; float: right; margin-right: 5px; } #socfli { position: relative; height: 64px; width: 64px; text-indent: -9999px; float: right; margin-right: 5px; } #socface { position: relative; height: 64px; width: 64px; text-indent: -9999px; float: right; margin-right: 5px; /*margin-left: 5px;*/ } #socmy { position: relative; height: 64px; width: 64px; text-indent: -9999px; float: right; margin-right: 5px; } #socyou { position: relative; height: 64px; width: 64px; text-indent: -9999px; float: right; } #soctwit a { position: absolute; top: 0px; left: 0px; background: url(soctwit.png) no-repeat; height: 64px; width: 64px; } #socfli a { position: absolute; top: 0px; left: 0px; background: url(socfli.png) no-repeat; height: 64px; width: 64px; } #socface a { position: absolute; top: 0px; left: 0px; background: url(socface.png) no-repeat; height: 64px; width: 64px; } #socmy a { position: absolute; top: 0px; left: 0px; background: url(socmy.png) no-repeat; height: 64px; width: 64px; } #socyou a { position: absolute; top: 0px; left: 0px; background: url(socyou.png) no-repeat; height: 64px; width: 64px; } #soctwit2 { position: relative; height: 32px; width: 32px; text-indent: -9999px; float: right; margin-right: 5px; } #socfli2 { position: relative; height: 32px; width: 32px; text-indent: -9999px; float: right; margin-right: 5px; } #socface2 { position: relative; height: 32px; width: 32px; text-indent: -9999px; float: right; margin-right: 5px; margin-left: 5px; } #socmy2 { position: relative; height: 32px; width: 32px; text-indent: -9999px; float: right; margin-right: 5px; } #socyou2 { position: relative; height: 32px; width: 32px; text-indent: -9999px; float: right; } #soctwit2 a { position: absolute; top: 0px; left: 0px; background: url(soctwit32.png) no-repeat; height: 32px; width: 32px; } #socfli2 a { position: absolute; top: 0px; left: 0px; background: url(socfli32.png) no-repeat; height: 32px; width: 32px; } #socface2 a { position: absolute; top: 0px; left: 0px; background: url(socface32.png) no-repeat; height: 32px; width: 32px; } #socmy2 a { position: absolute; top: 0px; left: 0px; background: url(socmy32.png) no-repeat; height: 32px; width: 32px; } #socyou2 a { position: absolute; top: 0px; left: 0px; background: url(socyou32.png) no-repeat; height: 32px; width: 32px; } /* obsession page stuff */ #obsessionmain { position: relative; /*background-color: #333;*/ height: 480px; background: url(ob-left-02.jpg) no-repeat; border: 1px solid #202020; } #obsessionbox { position: absolute; bottom: 5px; left: 5px; padding: 5px 8px 8px 8px; width: 250px; color: #eee; overflow-y: auto; background: url(backlight65.png) repeat; } #obsessionbox p { margin-bottom: 10px; font-size: 1.2em; } #obsessionbox h2 { font-size: 2em; border-bottom: 1px solid #eee; font-weight: normal; font-variant: small-caps; margin-bottom: 8px; } #obsessionright { float: right; margin-right: 5px; margin-top: 5px; display: inline; } #obimage1 { background: url(ob-auxa-01.jpg) no-repeat; height: 145px; width: 292px; margin-bottom: 5px; border: 4px solid #202020; } #obimage2 { background: url(ob-auxb-01.jpg) no-repeat; height: 145px; width: 292px; margin-bottom: 5px; border: 4px solid #202020; } #obimage3 { background: url(ob-auxc-01.jpg) no-repeat; height: 145px; width: 292px; border: 4px solid #202020; } /* The Spec Files #obimage1 { background: url(obaux05.jpg) no-repeat; height: 153px; width: 300px; margin-bottom: 5px; } #obimage2 { background: url(obaux06.jpg) no-repeat; height: 153px; width: 300px; margin-bottom: 5px; } #obimage3 { background: url(obaux04.jpg) no-repeat; height: 153px; width: 300px; } */ /* cafe page stuff */ /* #cafemain { position: relative; height: 480px; background: url(cafeback04.jpg); border: 1px solid #202020; } */ #cafebox { z-index: 5; min-height: 457px; position: absolute; bottom: 5px; left: 5px; padding: 5px 8px 8px 8px; background: url(backlight50.png) repeat; width: 260px; color: #eee; overflow-y: auto; } #cafebox h2 { font-size: 2em; border-bottom: 1px solid #eee; font-weight: normal; font-variant: small-caps; } #cafebox p { margin-bottom: 10px; font-size: 1.2em; } #cafemain2 { position: relative; /*background-color: #0d0c0c;*/ height: 480px; /*background: url(cafeback04.jpg);*/ border: 1px solid #202020; } #cafeshow { z-index: 1; position: absolute; top: 0px; right: 0px; width: 674px; height: 480px; background: url(cafeback04.jpg) no-repeat; } #flashcontent { z-index: 2; width:100%; height:100%; } /* baristas page stuff */ #baristasmain { position: relative; /*background-color: #0d0c0c;*/ height: 480px; background: url(barback02.jpg); border: 1px solid #202020; } #baristablock { position: relative; float: left; padding: 0px 0px 20px 0; overflow-y: scroll; width: 555px; height: 460px; /*border-left: 1px solid #eee;*/ } .infoblock { position: relative; /*height: 240px;*/ width: 535px; margin: 0px 0px 10px 0px; } .infohead { width: 535px; height: 120px; } .infotext { width: 505px; /*height: 120px;*/ font-size: 1.1em; line-height: 1.5em; padding: 8px 15px 0px; } .info1 { height: 150px; width: 150px; float: right; } .info2 { height: 100px; width: 120px; float: right; margin-top: 50px; } .info3 { height: 150px; width: 265px; float: right; font-size: 1.1em; line-height: 1.4em; } .info2 { font-size: 2em; text-align: center; } /* menu page stuff */ #menumain { position: relative; /*background-color: #0d0c0c;*/ height: 480px; /*background: url(baristaback02.jpg);*/ border: 1px solid #202020; } .menuhead { text-align: center; font-size: 1.8em; border-bottom: 1px solid #777; padding-bottom: 3px; } .menupricehead { float: right; padding-top: 2px; margin-right: 10px; border-bottom: 1px solid #ccc; font-size: 0.8em; } .menuheadbold { font-weight: bold; } .fooditem { margin-bottom: 0px; padding-bottom: 2px; border-bottom: 1px dashed #555; } .foodprice { float: right; padding-top: 2px; margin-right: 10px; } .foodhead { float: left; font-size: 1.4em; font-variant: small-caps; } .foodtext { margin-left: 8px; font-size: 1em; color: #999; } #menubox1 { width: 300px; min-height: 460px; padding: 5px; margin: 5px 10px 0px 5px; float: left; background: url(backlighttan24.png) repeat; } #menubox2 { width: 300px; min-height: 460px; padding: 5px; margin-right: 10px; margin-top: 5px; float: left; background: url(backlight50.png) repeat; } #menubox3 { width: 300px; height: 390px; padding: 5px; margin-top: 5px; float: left; background: url(backlighttan24.png) repeat; } /* #foodlink { width: 310px; height: 65px; float: left; margin-top: 5px; background: url(backlight65.png) repeat; } */ #foodlink { position: relative; width: 310px; height: 65px; float: left; margin-top: 5px; text-indent: -9999px; } #foodlink a { position: absolute; top: 0px; left: 0px; background: url(button-food01.jpg) no-repeat; width: 310px; height: 65px; overflow: hidden; } #foodlink a:hover { background-position: 0 -65px; } /* For IE6/7 */ #foodlink a { cursor: pointer; } /* food menu specifics */ #blockleft { width: 645px; position: relative; float: left; } #blockright { width: 315px; float: right; } #blocklefthead { position: relative; width: 630px; height: 135px; margin: 5px 0px 0px 5px; background: url(food-head-02.jpg) no-repeat; /*background: url(backlight65.png) repeat;*/ } #blocklefttext { position: absolute; bottom: 3px; right: 3px; text-align: right; font-size: 2.8em; color: #202020; padding: 0px 10px 3px 10px; border-bottom: 2px solid #202020; /*background: url(backlight65.png) repeat;*/ } /* #foodlinkf { width: 310px; height: 65px; margin-top: 5px; margin-right: 5px; background: url(backlight65.png) repeat; } */ #menubox1f { width: 300px; height: 320px; padding: 5px; margin: 5px 10px 0px 5px; float: left; background: url(backlight50.png) repeat; display: inline; } #menubox2f { width: 300px; height: 320px; padding: 5px; margin-right: 10px; margin-top: 5px; float: right; background: url(backlighttan24.png) repeat; display: inline; } #menubox3f { width: 300px; height: 395px; padding: 0px 5px 5px 5px; margin-top: 5px; background: url(backlight50.png) repeat; } #foodlinkf { position: relative; width: 310px; height: 65px; margin-top: 5px; margin-right: 5px; text-indent: -9999px; } #foodlinkf a { position: absolute; top: 0px; left: 0px; background: url(button-drink01.jpg) no-repeat; width: 310px; height: 65px; overflow: hidden; } #foodlinkf a:hover { background-position: 0 -65px; } /* For IE6/7 */ #foodlinkf a { cursor: pointer; } /* contact page stuff */ #contactmain { position: relative; /*background-color: #0d0c0c;*/ height: 480px; background: url(contact-back-02.jpg) no-repeat; border: 1px solid #202020; } #contactright { float: right; width: 295px; margin: 10px 10px 10px 10px; display: inline; } #contactbox { /*width: 295px;*/ height: 140px; /*margin: 10px 10px 40px 10px;*/ margin-bottom: 35px; padding: 0px 10px 10px; background: url(backlight50.png) repeat; } #minimap { /*width: 295px;*/ height: 275px; /*margin: 10px 10px 40px 10px;*/ padding: 0px 0px 0px; background: url(backlight50.png) repeat; } #contacthead { } #contacthead h2 { font-size: 3em; font-weight: lighter; } #contacthead p { font-size: 1.2em; margin-top: 10px; } #contacthead a { color: #eee; border-bottom: 1px solid #cc6600; } /* Utility things */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; }