/* ----------------------------------------------------------------------------------- MASS RESET ------------------------------------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} /* ----------------------------------------------------------------------------------- BODY ATTRIBUTES ------------------------------------------------------------------------------------- */ body.home_image { background: #faddb8; background-image: url(images/home-image.jpg); background-repeat: no-repeat; background-position: top left; } body.about_image { background: #faddb8; background-image: url(images/about-image.jpg); background-repeat: no-repeat; background-position: top left; } body.events_image { background: #faddb8; background-image: url(images/coffee_at_events.jpg); background-repeat: no-repeat; background-position: top left; } body.training_image { background: #faddb8; background-image: url(images/barista_training.jpg); background-repeat: no-repeat; background-position: top left; } body.case_studies_image { background: #faddb8; background-image: url(images/case_studies.jpg); background-repeat: no-repeat; background-position: top left; } body.contact_image { background: #faddb8; background-image: url(images/contact.jpg); background-repeat: no-repeat; background-position: top left; } body.blog_image { background: #faddb8; background-image: url(images/blog-image.jpg); background-repeat: repeat-y; background-position: top left; } /* ----------------------------------------------------------------------------------- GENERAL ------------------------------------------------------------------------------------- */ p { font-family: Helvetica, Arial; font-size: 85%; margin-bottom: 10px; line-height: 1.4; } a:link, a:visited { outline:none; line-height: 1.4; color: #5d4134; text-decoration:none; } a:hover {color:#5d4134; outline: none; text-decoration:underline; } ul { font-family: arial; font-size: 80%; line-height: 1.4;} h1 { margin-left: 10%; margin-top: 20px; } h2 {font-family: arial; font-size: 170%; font-weight: bold; letter-spacing: -0.08em; line-height: 1.2; color: #341710; margin-bottom: 10px; } h2.home { font-family: arial; font-size: 125%; font-weight: bold; letter-spacing: -0.04em; line-height: 1.2; color: #341710; margin-bottom: 10px;} h3 { font-family: arial; font-size: 125%; font-weight: bold; letter-spacing: -0.04em; line-height: 1.2; color: #341710; margin-bottom: 10px;} .red-button { background-color: #b12025; color: #fff; font-weight: bold; margin-top: 10px; padding: 5px;} /* ----------------------------------------------------------------------------------- SECTION HEADINGS ------------------------------------------------------------------------------------- */ h3.heading_ABOUT { text-indent:-9999px; background-image: url(images/_about.png); background-repeat: no-repeat;} h3.heading_WORKING_TOGETHER { text-indent:-9999px; background-image: url(images/_working_together.png); background-repeat: no-repeat;} h3.heading_EVENTS{ text-indent:-9999px; background-image: url(images/_events.png); background-repeat: no-repeat;} h3.heading_TRAINING{ text-indent:-9999px; background-image: url(images/_training.png); background-repeat: no-repeat;} h3.heading_COFFEE{ text-indent:-9999px; background-image: url(images/_coffee.png); background-repeat: no-repeat;} h3.heading_CONTACT{ text-indent:-9999px; background-image: url(images/_contact.png); background-repeat: no-repeat;} h3.heading_CASE_STUDIES{ text-indent:-9999px; background-image: url(images/_case_studies.png); background-repeat: no-repeat;} /* ----------------------------------------------------------------------------------- NAVIGATION ------------------------------------------------------------------------------------- */ #left_band {position: absolute; margin-left:0px; width: 250px; height: 99%; margin-right: 0px; background: #faddb8; border:0px solid #000;} #left_band h1.strapline { margin-left: 10%; margin-top: 50px; text-indent:-9999px; height: 45px; background-image: url(images/best_coffee_served_anywhere.gif); background-repeat: no-repeat;} /* Measurements for nav menu Distance from left: initial state = 0 rollover state = 217 Distance from top of: home = 0 about = 26px events = 51px training = 76px case-studies = 101px blog = 126px contact = 151px home = 25px about = 25px events = 25px training = 25px case-studies = 25px blog = 25px contact = 25px */ ul#nav_menu { margin-left: 10%; margin-top: 70px; } ul#nav_menu li { list-style-type: none; } ul#nav_menu li a {width:187px; display:block; /*postion:absolute;*/ top:0; text-indent:-9999px; outline:none; } li#menu_home a, li#menu_about a, li#menu_events a, li#menu_training a, li#menu_case_studies a, li#menu_blog a, li#menu_contact a {background:url(/images/TE_nav_menu.gif); } li#menu_home a {background-position: 0 0; height: 25px; top:0; } li#menu_home a:hover { background-position: -187px 0; } li#menu_about a {background-position: 0 -26px; height: 25px; top:26px; } li#menu_about a:hover { background-position: -187px -26px; } li#menu_events a {background-position: 0 -51px; height: 25px; top:51px; } li#menu_events a:hover { background-position: -187px -51px; } li#menu_training a {background-position: 0 -76px; height: 25px; top:76px; } li#menu_training a:hover { background-position: -187px -76px; } li#menu_case_studies a {background-position: 0 -101px; height: 25px; top:101px; } li#menu_case_studies a:hover { background-position: -187px -101px; } li#menu_blog a {background-position: 0 -126px; height: 25px; top:126px; } li#menu_blog a:hover { background-position: -187px -126px; } li#menu_contact a {background-position: 0 -151px; height: 25px; top:151px; } li#menu_contact a:hover { background-position: -187px -151px; } /* Measurements for case studies Distance from top: initial state = 0 rollover state = 10 */ ul#sub_nav_events{ background:url(/images/sub_nav_events.png); margin-top: 20px; margin-bottom: 30px;} ul#sub_nav_events li { float:right; list-style-type: none; } ul#sub_nav_events li a {height:12px; display:block; /*postion:absolute;*/ top:0; text-indent:-9999px; outline:none; } li#sub_nav_events_case a {background:url(/images/sub_nav_events.png); } li#sub_nav_events_case a {background-position: 0 0; width: 188px; top:0; } li#sub_nav_events_case a:hover { background-position: 0 -12px; } /* ----------------------------------------------------------------------------------- HOMEPAGE ------------------------------------------------------------------------------------- */ #home-text { position: absolute; margin: 200px 20px 0px 272px; min-width: 690px; max-width: 780px; } #home-headline-box { /*margin: 225px 20px 0px 280px; max-width: 780px;*/ padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #home-headline-box h2{ font-family: arial; font-size: 290%; font-weight: bold; letter-spacing: -0.08em; line-height: 0.8; color: #341710; } #home-sub-text-1 {float:left; width: 46%; margin-top: 20px; margin-right: 2.5%; padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #home-sub-text-2 {float:left; width: 46%; margin-top: 20px; padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #home-sub-text-1 p { font-family: arial; font-size: 175%; font-weight: bold; letter-spacing: -0.08em; line-height: 1.2; color: #341710; } #home-sub-text-2 p { font-family: arial; font-size: 175%; font-weight: bold; letter-spacing: -0.08em; line-height: 1.2; color: #341710; } /* ----------------------------------------------------------------------------------- PAGES ------------------------------------------------------------------------------------- */ #page-text { position: absolute; margin: 200px 20px 0px 272px; min-width: 690px; max-width: 780px; } #page-headline-box { /*margin: 225px 20px 0px 280px; max-width: 780px;*/ padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #page-headline-box h2{ font-family: arial; font-size: 290%; font-weight: bold; letter-spacing: -0.08em; line-height: 0.8; color: #341710; } #page-headline-box h2 p{ line-height: 1.2;} #page-sub-text {float:left; margin-top: 20px; padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #page-sub-text p { font-family: arial; font-size: 102%; font-weight: bold; letter-spacing: -0.06em; line-height: 1.2; color: #341710; } #breadcrumb {float:right; font-weight: bold; font-size: 90%;} /* ----------------------------------------------------------------------------------- BLOG ------------------------------------------------------------------------------------- */ #blog-page-text { position: absolute; margin: 20px 0px 20px 272px; min-width: 690px; max-width: 840px; } #main-blog-text {float:left; margin-left: 0%; margin-right: 2%; margin-bottom: 20px; width: 65%; padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #blog-subscribe {float:left; width: 25%; margin: 0 0 15px 0; padding: 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } .blog_entry_list {margin:0 0 40px 0;} .blog_entry_list img {float:left; padding: 0 10px 0 0;} .blog_entry { margin-bottom: 30px; margin-top: 20px; } .blog_entry li {display: inline; } .blog_entry img {float:right; padding: 0 0 10px 10px;} #blog-subscribe .red-button { outline:none; line-height: 1.4; color: #FFF; } #twitter-box {float:left; width: 25%; margin: 0 0 15px 0; padding: 10px 10px 20px 10px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #twitter-box h3 {padding: 40px 0 0 0; margin: -25px 0 -10px 0; width: 75%; height: 50px; background-image: url(/images/twitter-logo.png); background-repeat: no-repeat; background-position: 70px; } #twitter-box ul { margin-bottom: 20px; } #twitter-box .red-button { color: #FFF; font-family: Helvetica, Arial; font-size: 90%; border: 0px;} #comment_submit h3 {margin-top: 30px; } #comment_submit .red-button { color: #FFF; font-family: Helvetica, Arial; font-size: 90%;} .comment-item { background-image: url(images/trans_brown_tile.png); padding:10px; margin-bottom: 10px;} /* ----------------------------------------------------------------------------------- FLICKR ------------------------------------------------------------------------------------- */ #flickr-sidebar {float: left; width: 24%; margin-bottom: 20px; padding: 10px 10px 10px 20px; background-image: url(images/trans_tile.png); background-repeat: repeat; } #flickr-sidebar a.flickr-link {font-family: Helvetica, Arial; font-weight: bold; margin-left: 10px; clear: both;} #flickr_badge_uber_wrapper {text-align:center; width:150px;} #flickr_badge_wrapper {padding:10px 0 10px 0;} .flickr_badge_image {float: left; margin:0 10px 10px 10px;} .flickr_badge_image img {border: 1px solid black !important;} #flickr_badge_source {text-align:left; margin:0 10px 0 10px;} #flickr_badge_icon {float:left; margin-right:5px;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;} #flickr_badge_wrapper {} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} #home_image { position: absolute; margin-left:-65px; width:100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/home.jpg); background-repeat: no-repeat; background-position: top left; z-index:1;} #about_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/about.jpg); background-repeat: no-repeat; background-position: top left; } #working_together_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/working_together.jpg); background-repeat: no-repeat; background-position: top left; } #events_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/coffee_at_events.jpg); background-repeat: no-repeat; background-position: top left; } #training_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/barista_training.jpg); background-repeat: no-repeat; background-position: top left; } #coffee_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/the_perfect_coffee.jpg); background-repeat: no-repeat; background-position: top left; } #contact_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/contact.jpg); background-repeat: no-repeat; background-position: top left; } #case_studies_image { position: absolute; width: 100%; height: 99%; border:0px solid #000; border-left:0px solid #000; background-image: url(images/case_studies.jpg); background-repeat: no-repeat; background-position: top left; } #box_container { margin-top: 200px; width: 200px;} #about_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #working_together_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #events_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #contact_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #training_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #coffee_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } #case_studies_box { background-image: url(images/trans_tile.png); background-repeat: repeat; border:0px solid #faddb8; position: absolute; margin-left: 315px; min-height: 300px; bottom: 0px; width: 420px; padding: 20px; } .highlight-box { background-image: url(images/trans_brown_tile.png); padding:10px; margin: 20px; font-size: 90%; }