/* Theme Name: Appelcado Theme Theme URI: http://www.applecado.co.uk Description: This is the theme for Applecado's latest website. Version: 0.5 Author: Alex Ball Author URI: http://altrezia.com/ Tags: applecado Kubrick v1.5 http://binarybonsai.com/kubrick/ This theme was designed and built by Michael Heilemann, whose blog you will find at http://binarybonsai.com/ The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ /* APPLECADO - Screen CSS. */ /* ### regular HTML stuff */ body { color:white; font-size:1em; font-family:arial, helvetica, sans-serif; background:#673409 url(/applecado-content/images/bg.jpg) top center; margin:0px; padding:0px; } img { border:0px; } p { margin:0px; padding:0px; font-size:0.8em; } h1 { margin:0px 0px 20px 0px; padding:0px; font-size:2.9em; font-family: 'times new roman', serif; font-weight:normal; text-shadow:0 1px 0 #000; filter: Shadow(Color=black, Direction=125, Strength=1); } h2 { margin:0px; padding:0px; font-weight:bold; color:#9af415; font-size:0.9em; } h3 { margin:0px 0px 16px 0px; padding:0px; font-weight:normal; font-size:1.8em; line-height:1em; } h4 { margin:0px 0px 10px 0px; padding:0px; font-weight:normal; color:#8dc140; font-size:0.8em; } h5 { margin:0px 0px 0px 0px; padding:0px; font-weight:normal; line-height:1.2em; font-size:1.2em; } a { color:#9af415; text-decoration:underline; outline:0px; } a:hover { color:#d9f6af; text-decoration:none; } /* Hide the HR */ hr { display:none; } /* And show the fake one :) */ .hr { width:100%; background:url(/applecado-content/images/hr.png) top center no-repeat; padding:0px; margin:30px 0px 30px 0px; height:3px; } .hr2 { width:100%; background:url(/applecado-content/images/hr2.jpg) top center no-repeat; padding:0px; margin:20px 0px 20px 0px; height:3px; } /* ### some useful styles */ .left { float:left; } .right { float:right; } .tleft { text-align:left; } .tright { text-align:right; } /* ### The wrappers - this means I can use two backgrounds, the main woody one, and the soggy wet footer. */ #outer-wrapper { width:100%; background:url(/applecado-content/images/bottom-bg.png) bottom center repeat-x; overflow:hidden; } #inner-wrapper { width:900px; margin:0 auto; overflow:hidden; } /* ### The applecado header */ #applecado-header { width:860px; float:left; height:77px; background:url(/applecado-content/images/applecado-header-bg.jpg) top left no-repeat; padding:0px 20px; } /* Header Logo */ #applecado-header h1.header-logo { margin:0px; padding:0px; } #applecado-header h1.header-logo a { display:block; width:174px; height:77px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/applecado-logo.jpg) top left no-repeat; } #applecado-header h1.header-logo a:hover { background-position: bottom left; } /* email and phone # */ #applecado-header p.cta-heading { color:white; letter-spacing:0.2px; padding-top:8px; line-height:1.4; font-size:1em; } #applecado-header p.cta-heading a { color:white; text-decoration:none; } #applecado-header p.cta-heading a span { color:#9af415; } #applecado-header p.cta-heading a:hover { color:white; text-decoration:underline; } /* ### The main header */ #header { width:860px; margin:0px; padding:0px 20px; float:left; background:url(/applecado-content/images/header-image.jpg) top left no-repeat; height:272px; position:relative; } /* the 'menu' - or something. not really a menu as we only have one page. */ #header #tabs { position:absolute; top:0px; right:20px; margin:0px; padding:0px; } #header #tabs ul { margin:0px; padding:0px; list-style:none; } #header #tabs ul li { margin:0px 1px; padding:0px; float:left; } #header #tabs ul li a.services { display:block; width:91px; height:22px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/button-services.jpg) top left no-repeat; } #header #tabs ul li a.portfolio { display:block; width:91px; height:22px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/button-portfolio.jpg) top left no-repeat; } #header #tabs ul li a.clients { display:block; width:91px; height:22px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/button-clients.jpg) top left no-repeat; } #header #tabs ul li a.more { display:block; width:110px; height:70px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/show-more.jpg) top left no-repeat; margin-left:30px; } #header #tabs ul li a:hover { background-position:bottom left; } /* contact button */ #header a.contact-us-now { display:block; width:197px; height:47px; overflow:hidden; text-indent:-10000px; background:url(/applecado-content/images/button-contact-us.jpg) top left no-repeat; position:absolute; bottom:20px; right:38px; } #header a.contact-us-now:hover { background-position:bottom left; } /* ### The main header */ #clients { width:100%; float:left; } #clients-content { width:860px; height:124px; padding:0px 20px; background:url(/applecado-content/images/clients-bg.jpg) top left no-repeat; } #clients-content h2 { font-size:1.2em; color:white; font-weight:normal; margin:8px 0px 0px 0px; } #clients-content p { font-size:0.75em; color:white; font-weight:normal; margin:8px 0px 0px 0px; } #clients-content .left { width:50%; } #clients-content .right-text { width:270px; float:left; margin-right:20px; } #clients-content .right-form { width:140px; float:left; } #clients-content form { width:140px; margin:55px 0px 0px 0px; } #clients-content form ul { width:100%; margin:0px; padding:0px; list-style:none; } #clients-content form ul li { margin:0px; padding:0px 0px 3px 0px; } #clients-content form label { font-size:0.75em; width:140px; display:block; } #clients-content form input { width:136px; border:0px; padding:3px 2px; } #clients-content form button { font-size:0.75em; width:66px; border:0px; padding:0px; margin:0px; background:0px; color:white; text-align:right; padding-right:16px; background:url(/applecado-content/images/arrow-right-light.png) 55px 2px no-repeat; float:right; } /* ### The main header */ #contact-us { width:100%; float:left; } #contact-us-content { width:860px; height:186px; padding:0px 20px; background:url(/applecado-content/images/contact-form-bg.png) 20px 0px no-repeat; } #contact-us-content #sendEmail { width:640px; float:right; margin:15px 0px 0px 0px; padding:0px; } #contact-us-content form { width:100%; } #contact-us-content form ul { margin:0px; padding:0px; list-style:none; width:100%; } #contact-us-content form ul li { margin:0px 0px 10px 0px; padding:0px; } #contact-us-content form ul li.left { float:left; width:240px; clear:left; } #contact-us-content form ul li.right { float:right; width:400px; clear:right; } #contact-us-content form ul li.strapline { float:left; width:400px; clear:left; padding-top:10px; } #contact-us-content form ul li.strapline p { font-size:1em; } #contact-us-content form ul li.buttons { float:right; width:230px; clear:right; padding-top:5px; padding-right:10px; text-align:right; } #contact-us-content form label { width:100%; display:block; margin:4px 0px; font-size:0.8em; height:20px; overflow:hidden; position:relative; } #contact-us-content form label span.error { font-weight:bold; color:red; font-size:2.4em; line-height:0.7em; display:block; position:absolute; top:4px; right:25px; } #contact-us-content form input { width:210px; height:17px; border:0px; background:white; padding:8px 3px; font-size:0.8em; font-family:arial, helvetica, sans-serif; font-weight:bold; } #contact-us-content form textarea { width:365px; height:88px; border:0px; background:white; padding:8px 5px; font-size:0.8em; font-family:arial, helvetica, sans-serif; font-weight:bold; } #contact-us-content form button { width:128px; height:29px; background:#9af415; border:0px; color:black; font-weight:bold; margin-right:15px; } #contact-us-content form button:hover { background:#98ff00; } #contact-us-content #sendEmailComplete { width:640px; float:right; margin:15px 0px 0px 0px; padding:0px; } /* ### Main Content */ #main-content { clear:both; float:left; width:860px; padding:15px 20px; } #main-content .large-shadow { font-size:1em; color:#ffffff; line-height:1.4em; text-shadow:0 1px 0 #000; filter: Shadow(Color=black, Direction=125, Strength=1); } #main-content .margin-top { margin-top:15px; } #main-content .green-highlight { color:#9af415; } /* ### Services Box */ #main-content #services-box { height:120px; overflow:hidden; background:url(/applecado-content/images/services-bg.jpg) top left no-repeat; width:820px; padding:18px 20px 20px 20px ; margin:0px; } #main-content #services-box .col-small { width:200px; float:left; } #main-content #services-box .col-desc { width:200px; float:right; } #main-content #services-box ul { font-size:0.9em; width:100%; margin:6px 0px 0px 0px; padding:0px 0px 0px 28px; } #main-content #services-box ul li { width:100%; list-style-image:url(/applecado-content/images/bullet-orange-on-dark.gif); padding:2px 0px; } #main-content #services-box p { font-size:0.9em; margin:0px 0px 20px 0px; padding:0px 0px 0px 0px; } /* ### Portfolio Items */ #main-content .portfolio-item { width:100%; background:url(/applecado-content/images/portfolio-item-bg-bot.png) bottom left no-repeat; padding-bottom:4px; margin:0px 0px 30px 0px; } #main-content .portfolio-item p { color:#e2c2b2; font-size:0.8em; padding:0px; margin:0px; } #main-content .portfolio-item p.first { margin:0px 0px 14px 0px; } #main-content .portfolio-item-inner { width:100%; padding:0px; background:url(/applecado-content/images/portfolio-item-bg-top.png) top left no-repeat; overflow:hidden; } #main-content .portfolio-item .description { width:290px; padding:16px 0px 6px 20px; float:left; overflow:hidden; position:relative; } #main-content .portfolio-item .quick-info { width:200px; padding:61px 0px 0px 20px; float:left; overflow:hidden; position:relative; } #main-content .portfolio-item .right { width:300px; padding:9px 9px 5px 9px; float:right; position:relative; } #main-content .portfolio-item a.visit-site { position:absolute; display:block; width:58px; bottom:14px; right:320px; font-size:0.7em; color:white; text-decoration:none; background:url(/applecado-content/images/arrow-right.png) top right no-repeat;} #main-content .portfolio-item a.visit-site:hover { color:#9af415; } #main-content .portfolio-item .deliverables { font-size:0.8em; width:100%; margin:6px 0px 0px 0px; padding:0px 0px 0px 20px; } #main-content .portfolio-item .deliverables li { width:100%; list-style-image:url(/applecado-content/images/bullet-orange-on-light.gif); padding:2px 0px; } /* ### lower page thing. */ #flickr { width:420px; } #twitter { width:420px; margin-left:20px; } #flickr .container, #twitter .container { background:url(/applecado-content/images/lower-page-bg-thing.png) top left no-repeat; margin:10px 0px 5px 15px; height:87px; width:388px; position:relative; } #flickr .container img { margin:6px 0px 0px 21px; } #flickr .container img.first { margin:6px 0px 0px 6px; } #twitter .container p { padding:5px 6px 0px 7px; } #twitter .container p.sub { display:block; position:absolute; bottom:5px; left:1px; font-size:0.7em; font-style:italic; } /* ### footer */ #footer { padding-top:70px; width:100%; height:100px; overflow:hidden; clear:both; } #footer .left { width:50%; } #footer .right { width:50%; text-align:right; margin-top:10px; } #footer h4 { padding-left:20px; margin-bottom:3px; margin-top:5px; font-weight:bold; } #footer p { padding-left:20px; line-height:1.4em; } #footer p span { display:block; float:left; width:120px; } .navigation { width:860px; overflow:hidden; clear:both; } span.tiny { font-size:0.7em; color:#aaa; font-style:italic; } div.client { width:100%; display:block; overflow:hidden; margin:40px 0px 30px 0px; } div.client .info { width:350px; float:left; overflow:hidden; } div.client .info p { text-shadow:0 1px 0 #000; filter: Shadow(Color=black, Direction=125, Strength=1); font-size:1em; padding:0px 0px 0px 22px; font-style:italic; } div.client .info p.link { text-shadow:0 1px 0 #000; filter: Shadow(Color=black, Direction=125, Strength=1); font-size:1em; padding:0px 0px 0px 22px; font-style:italic; text-align:right; } div.client .info p.link a { color:#b1aeab; text-decoration:none; } div.client .info p.link a:hover { color:#9AF415; } div.client .quote { margin-top:10px; position:relative; width:500px; float:right; overflow:hidden; background:url(/applecado-content/clients/speech-bubble.png) top left no-repeat; height:197px; } div.client .quote p { padding:10px 15px 0px 80px; color:#44413f; font-size:1em; text-shadow:0 1px 0 #fff; filter: Shadow(Color=white, Direction=125, Strength=1); } div.client .quote div.name { position:absolute; bottom:10px; right:14px; } div.client .quote div.name p { text-align:right; font-weight:bold; font-style:italic; padding:0px; color:#000; font-size:0.9em; text-shadow:0 1px 0 #fff; filter: Shadow(Color=white, Direction=125, Strength=1); }