style.css

 /*
 
 File: style.css
 
 Abstract: This example webpage showcases a variety of CSS visual 
 effects.  Buttons and other page elements are styled with CSS gradients
 and shadows, menus are animated with CSS transitions, custom fonts are 
 displayed with CSS web fonts, and elements are positioned, scaled, and 
 rotated on the page using CSS transforms.  The entire interface is drawn
 and animated without using any images or plug-ins.
 
 Version: 1.1
 
 Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
 Apple Inc. ("Apple") in consideration of your agreement to the
 following terms, and your use, installation, modification or
 redistribution of this Apple software constitutes acceptance of these
 terms.  If you do not agree with these terms, please do not use,
 install, modify or redistribute this Apple software.
 
 In consideration of your agreement to abide by the following terms, and
 subject to these terms, Apple grants you a personal, non-exclusive
 license, under Apple's copyrights in this original Apple software (the
 "Apple Software"), to use, reproduce, modify and redistribute the Apple
 Software, with or without modifications, in source and/or binary forms;
 provided that if you redistribute the Apple Software in its entirety and
 without modifications, you must retain this notice and the following
 text and disclaimers in all such redistributions of the Apple Software. 
 Neither the name, trademarks, service marks or logos of Apple Inc. 
 may be used to endorse or promote products derived from the Apple
 Software without specific prior written permission from Apple.  Except
 as expressly stated in this notice, no other rights or licenses, express
 or implied, are granted by Apple herein, including but not limited to
 any patent rights that may be infringed by your derivative works or by
 other works in which the Apple Software may be incorporated.
 
 The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
 MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
 THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
 FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
 OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
 
 IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
 OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
 MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
 AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
 STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 
 Copyright (C) 2010 Apple Inc. All Rights Reserved.
 
 */ 
 
/* Font face declaration generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'Lobster1.1Regular';
    src: url('Lobster-fontfacekit/Lobster_1.1_-webfont.eot');
    src: local('☺'), url('Lobster-fontfacekit/Lobster_1.1_-webfont.woff') format('woff'), url('Lobster-fontfacekit/Lobster_1.1_-webfont.ttf') format('truetype'), url('Lobster-fontfacekit/Lobster_1.1_-webfont.svg#webfont30G9S4nm') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
html {
    background: rgb(203, 222, 233);
    background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 800, from(white), to(rgba(255, 255 ,255, 0)));
    background-image: -moz-radial-gradient(bottom, circle, white 0px, rgba(255, 255, 255, 0) 800px); /* Radial gradient for Mozilla browsers */
    
    min-height: 100%; /* make the background gradient span the entire viewport in Firefox */
}
 
body {
    margin: 0;
    font-size: 20pt;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Thonburi, sans-serif;
    line-height: 1em;
}
 
#navigation-bar {
    position: relative;
    top: 2em;
    left: 0;
    right: 0;
    height: 2em;
    min-width: 1024px;
 
    background-color: #333;
    -webkit-box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5); /* Box shadow for Mozilla browsers */
    border-bottom: 0.1em solid white;
 
    font-family: "Futura-CondensedExtraBold", Tahoma, sans-serif;
    font-weight: bold;
    
    -webkit-user-select: none;
 
    z-index: 2;
}
 
#navigation-bar ul {
    list-style: none;
    padding: 0;
}
 
#navigation-menu {
    position: relative;
    margin: auto;
    width: 540px;
 
    background-color: rgb(98, 152, 148);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.3, rgba(255, 255, 255, 0.5)), color-stop(0.6, rgba(255, 255, 255, 0.3)), color-stop(0.6, transparent), to(rgba(0, 0, 0, 0.2)));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.3) 60%, transparent 60%, rgba(0, 0, 0, 0.2)); /* Linear gradient for Mozilla browsers */
 
    -webkit-transform: translateZ(0);
}
 
#navigation-menu li {
    /* Set metrics for all menu and submenu items */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    height: 1em;
}
 
#navigation-menu > li {
    position: relative;
    display: inline-block;
    width: 135px;
    
    overflow: none;
 
    cursor: default;
    color: black;
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.3, rgba(255, 255, 255, 0.5)), color-stop(0.6, rgba(255, 255, 255, 0.3)), color-stop(0.6, transparent), to(rgba(0, 0, 0, 0.2)));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.3) 60%, transparent 60%, rgba(0, 0, 0, 0.2));
    
    text-align: center;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
 
    /* Shorthand notation for:
    -webkit-transition-property: width, color;
    -webkit-transition-duration: 0.25s;
    -webkit-transition-delay: 0.25s; */
    -webkit-transition: width, color, 0.25s 0.25s;
}
 
#navigation-menu > li > .submenu {
    pointer-events: none;
}
 
/* Assume that devices of width 1025px and larger are
 * desktops - show the submenu on hover. Assume devices
 * of width 1024px and smaller are touch-based (e.g. iPhone,
 * iPad) - define a class which shows the submenu, applied
 * when the menu is touched.
 */
@media only screen and (min-device-width: 1025px) {
    #navigation-menu:hover {
        overflow: visible;
    }
 
    #navigation-menu:hover > li {
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0); /* this needs to be here for animation to take effect */
        width: 100px;
        color: transparent;
 
        /* The menu buttons should begin resizing instantly; no delay! */
        -webkit-transition-delay: 0;
    }
 
    #navigation-menu > li:hover {
        color: inherit;
        width: 240px;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    }
 
    #navigation-menu > li:hover > .submenu {
        opacity: 1;
        pointer-events: auto;
    }
}
@media only screen and (max-device-width: 1024px) {
    #navigation-menu.expanded-menu {
        overflow: visible;
    }
 
    #navigation-menu.expanded-menu > li {
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0); /* this needs to be here for animation to take effect */
        width: 100px;
        color: transparent;
 
        /* The menu buttons should begin resizing instantly; no delay! */
        -webkit-transition-delay: 0;
    }
 
    #navigation-menu > li.expanded {
        color: inherit;
        width: 240px;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    }
 
    #navigation-menu > li.expanded > .submenu {
        opacity: 1;
        pointer-events: auto;
    }
}
 
.submenu {
    position: absolute;
    top: 1.9em; /* 1em of height and 1em of padding on the buttons minus navbar border */
    margin-left: -0.5em; /* padding of the parent li */
    width: 10em;
 
    opacity: 0;
}
 
.submenu > li {
    margin: 5px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
 
.submenu > li:hover {
    color: white;
    text-shadow: 0 0 5px white;
}
 
/* per link styles */
#about, #about .submenu > li {
    background-color: rgb(101, 139, 29);
}
#photo, #photo .submenu > li {
    background-color: rgb(248, 161, 85);
}
#design, #design .submenu > li {
    background-color: rgb(209, 104, 79);
}
#contact, #contact .submenu > li {
    background-color: rgb(98, 152, 148);
}
 
/* Styles for everything under the navigation bar */
.content {
    position: relative;
    padding-top: 3em;
 
    min-width: 1024px;
 
    z-index: 1;
}
 
.content p {
    position: relative;
    margin-left: auto;
    margin-right: auto;
 
    width: 45%;
    min-width: 400px;
    max-width: 800px;
 
    background-color: rgba(203, 222, 233, 0.5);
    text-indent: 1em;
 
    padding: 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    
    -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
 
    font-size: 13pt;
}
 
.content h1 {
    font-size: 34pt;
    font-family: "Lobster1.1Regular", Impact, cursive;
    text-align: center;
    line-height: 1.3em;
    margin: 0.2em auto 0.2em auto;
 
    text-shadow: white 0 0 20px;
}
 
#badge_container {
    position: absolute;
    top: 200px;
    left: -50px;
    height: 450px;
    overflow: hidden;
 
    width: 400px;
 
    z-index: 0;
}
 
#badge {
    background-color: rgb(183, 3, 0);
    background-image: -webkit-gradient(radial, center center, 140, center center, 150, from(transparent), color-stop(0.8, rgba(255, 255, 255, 0.65)), to(rgba(255, 255, 255, 0.4))),
                      -webkit-gradient(radial, 175 200, 0, 150 300, 350, from(rgba(0, 0, 0, 0.2)), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.65)));
 
    background-image: -moz-radial-gradient(circle contain, transparent 93%, rgba(255, 255, 255, 0.65) 98%, rgba(255, 255, 255, 0.4) 100%),
                      -moz-radial-gradient(175px 200px, circle cover, rgba(0, 0, 0, 0.2), transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.65));
 
    -webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.25)));
 
    z-index: 1;
}
 
#badge, #badge_shadow {
    position: absolute;
    width: 300px;
    height: 300px;          
 
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}
 
#badge_text {
    position: absolute;
    top: 70px;
    left: -20px;
    right: 0;
    bottom: 0;
 
    font-family: "Lobster1.1Regular";
    font-size: 40pt;
    line-height: 0.8em;
    text-align: center;
    text-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
    letter-spacing: -3px;
    -webkit-text-stroke: 0.5px gray;
    color: white;
 
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg); /* Transformation for Mozilla browsers */
}
 
#badge_shadow {
    background-image: -webkit-gradient(radial, center center, 0, center center, 150, from(black), to(transparent));
    background-image: -moz-radial-gradient(circle contain, black, transparent);
    
    -webkit-transform-origin: center bottom;
    -webkit-transform: translateY(5px) scale(1, 0.1);
    
    -moz-transform-origin: center bottom; /* Transform origin for Mozilla browsers */
    -moz-transform: translateY(5px) scale(1, 0.1);
 
    z-index: 0;
}
 
#sticky_container { /* the container covers the right side of the sticky and the shadow above the sticky */
    position: absolute;
    top: 200px;
    right: 0;
    width: 300px;
    height: 400px;
    overflow: hidden;
    pointer-events: none;
 
    /* Rotate the stick 5 degrees counter-clockwise, from the top right. Applied here instead of in #sticky so that the top shadow is cropped off. */
    -webkit-transform: rotate(-5deg);
    -webkit-transform-origin: top right;
}
#sticky {
    position: absolute;
    right: -10px;
    width: 170px;
    height: 170px;
    padding: 35px;
    text-align: center;
    pointer-events: auto;
 
    line-height: 1.4em;
    font-family: "BradleyHandITCTT-Bold", "Comic Sans MS", sans-serif;
    color: #333;
 
    background-color: rgba(255, 255, 175, 1);
 
    /* Use custom border radii to give the sticky note shape some subtle curves. */
    border-top-right-radius: 160px 10px;
    border-bottom-left-radius: 160px 10px;
    border-bottom-right-radius: 160px 20px;
    
    /* Use vendor-prefixed names since the standardized CSS syntax for browsers where the standard prefix hasn't yet been adopted */
    -webkit-border-top-right-radius: 160px 10px;
    -webkit-border-bottom-left-radius: 160px 10px;
    -webkit-border-bottom-right-radius: 160px 20px;
    -moz-border-radius-topright: 160px 10px;
    -moz-border-radius-bottomleft: 160px 10px;
    -moz-border-radius-bottom-right: 160px 20px;
 
    /* A radial gradient from 20% opaque black to transparent gives the surface of the sticky a lighting effect. */
    background-image: -webkit-gradient(radial, center top, 200, center top,300,  from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.9))),
                      -webkit-gradient(linear, center top, left bottom, from(rgba(0, 0, 0, 0.15)), to(transparent));
    background-image: -moz-radial-gradient(center top, circle cover, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.9)),
                      -moz-linear-gradient(150px 0px, rgba(0, 0, 0, 0.15), transparent);
 
    /* A shadow gives the sticky more depth, making it look like the bottom edge is raised. */
    -webkit-box-shadow: 10px 8px 25px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 10px 8px 25px rgba(0, 0, 0, 0.4);
 
    /* Equivalent to the -webkit-transform applied to #sticky_container. Applied here because -moz-transform affects scrollbar visibility. */
    -moz-transform: rotate(-5deg);
    -moz-transform-origin: top right;
}
 
#sticky a {
    text-decoration: none;
    font-style: italic;
    color: #970200;
}
 
#sticky a:hover {
    color: #C8403E;
}


Copyright © 2010 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2010-06-22