/*

Sublink Interactive
Authored by Joseph North

Header BG           d0dfd7
Body BG             f2f0e6
Light BG            fefcf1
White BG            fafafa
Inset BG            eceae0

Dark Border         e1e1e1
Light Border        e6e4da
Header Border       bbc8c1

Action Blue         20505f
Action Red          c64e52
Action Green        85cc33

Dark                4b5457
Darker              343735

Highlight           faf591

*/

/* YUI Reset <http://developer.yahoo.com/yui/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;
}
fieldset,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:'';
}
abbr,acronym { border:0;
}


/* Basics */

body {
    background: #f2f0e6;
}

.content {
    width: 960px;

    margin: 0 auto;
}


/* Fonts */

body {
    color: #343735;
    font-family: "Myriad Pro", Calibri, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    line-height: 20px;
    letter-spacing: -0.02em;
}

a {
    color: #20505f;
    text-decoration: none;
}


/* Header */

#header {
    height: 39px;

    background: #d0dfd7;

    border-bottom: 1px solid #bbc8c1;
}

#logo {
    width: 230px;
    height: 20px;

    margin: 10px 0;

    float: right;

    overflow: hidden;

    text-indent: -1000px;

    background: transparent url(logo.png) no-repeat;
}


/* Nav */

#nav {
    
}
    #nav li {
        width: 80px;
        height: 39px;

        position: relative;
        float: left;
    }
        #nav li a {
            display: block;

            width: 62px;
            height: 23px;

            overflow: hidden;

            margin: 9px auto 0;

            text-indent: -1000px;

            background: transparent url(nav.png) no-repeat 0 0;
        }
            #nav li a.section-work {

            }

            #nav li a.section-icons {
                background-position: -62px 0;
            }

            #nav li a.section-blog {
                background-position: -124px 0;
            }

        #nav li a:focus {
            outline: none;
        }

        #nav li .nav-new {
            display: block;

            width: 21px;
            height: 9px;

            position: absolute;
            top: 6px;
            right: 2px;

            background: transparent url(nav.png) no-repeat -266px 0;
        }

    #nav li.selected {
        background: transparent url(nav.png) no-repeat -186px 0;
    }
        #nav li.selected a {
            
        }
            #nav li.selected a.section-work {
                background-position: 0 -23px;
            }

            #nav li.selected a.section-icons {
                background-position: -62px -23px;
            }

            #nav li.selected a.section-blog {
                background-position: -124px -23px;
            }

        #nav li.selected .nav-new {
            background: transparent url(nav.png) no-repeat -266px -9px;
        }


/* Heading */

#heading {
    background: #fafafa;

    border-top: 1px solid #fff;
    border-bottom: 1px solid #e1e1e1;
}
    #heading .content {
        width: 420px;

        padding: 145px 0 143px 200px;

        color: #4b5457;
        font-weight: bold;
        font-style: italic;
        font-size: 42px;

        background: transparent url(heading-work.png) no-repeat 0 center;
    }

#icons #heading {
    border-bottom: 0;
}
    #icons #heading .content {
        width: 400px;
        padding: 95px 0 93px 140px;

        background-image: url(heading-icons.png);
    }


/* Page */

#page {
    width: 100%;

    margin: 20px 0 0 0;
    padding: 0 0 20px;

    float: left;

    border-bottom: 1px solid #e1e1e1;
}

#work #page {
    border-bottom: 0;
}


/* Footer */

#footer {
    padding: 20px 0;

    clear: both;

    color: #4b5457;

    border-top: 1px solid #fafafa;
}

#copyright {
    width: 230px;

    padding: 0 0 40px;

    float: right;
}
    #copyright h2 {
        width: 122px;
        height: 20px;

        overflow: hidden;

        text-indent: -1000px;

        background: transparent url(logo.png) no-repeat right;
    }

    #copyright p {
        color: #aaa;
        font-size: 12px;
    }
        #copyright .fine {
            color: #ccc;
        }

#closing {
    width: 380px;

    padding: 0 0 40px;

    float: left;
}
    #closing ul {
        margin: 10px 0 0 0;
    }
        #closing ul li {
            display: inline;

            padding: 0 20px 0 0;
        }


/* Errors */

#errors {
    
}
    #errors #heading .content {
        width: 960px;

        padding: 100px 0;

        text-align: center;

        background-image: none;
    }

    #errors .error {
        padding: 20px;

        background: #e6e4da;

        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
    }
        #errors .error h2 {
            font-size: 20px;
        }

        #errors .error p {
            padding: 10px 0 0;

            font-size: 18px;

            color: #4b5457;
        }


/* Bio */

#bio {
    width: 220px;

    padding: 10px;

    float: left;

    color: #20505f;

    background: #fff;
    background:
        -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow:
        0 1px 3px rgba(0, 0, 0, .25);

    -moz-box-shadow:
        0 1px 3px rgba(0, 0, 0, .25),
        inset 0 -50px 50px rgba(0, 0, 0, .03),
        inset 0 -3px 20px rgba(0, 0, 0, .05);

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .25),
        inset 0 -50px 50px rgba(0, 0, 0, .03),
        inset 0 -3px 20px rgba(0, 0, 0, .05);
}
    #bio p {
        font-size: 16px;
    }

    #bio a {
        display: block;

        margin: 10px 0 0 0;
        padding: 10px 0;

        text-align: center;
        font-weight: bold;

        background: #fff;

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow:
            0 0 1px rgba(0, 0, 0, .25);

        -moz-box-shadow:
            0 0 1px rgba(0, 0, 0, .1);

        box-shadow:
            0 0 1px rgba(0, 0, 0, .1);
    }


    #bio-mug {
        width: 99px;
        height: 75px;

        margin: 0 auto 9px;

        background: transparent url(bio-mug.png) no-repeat;
    }


/* Splash */

#splash {
    width: 680px;

    padding: 10px;

    float: right;

    background: #fff url(splash-grill.png) repeat-x 0 0;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow:
        0 1px 3px rgba(0, 0, 0, .25);

    -moz-box-shadow:
        0 1px 3px rgba(0, 0, 0, .25),
        inset 0 -50px 50px rgba(0, 0, 0, .03),
        inset 0 -3px 20px rgba(0, 0, 0, .05);

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .25),
        inset 0 -50px 50px rgba(0, 0, 0, .03),
        inset 0 -3px 20px rgba(0, 0, 0, .05);
}
    #splash p {
        padding: 117px 0 57px;

        color: #ccc;
        text-align: center;
        font-size: 24px;

        background: transparent url(splash-icons.png) no-repeat center 65px;
    }


/* Holiday */

#holiday {
    height: 82px;

    background: transparent url(holiday-bg.png) repeat-x;
}
    #holiday p {
        width: 720px;
        height: 80px;

        margin: 0 auto;
        padding: 30px;

        color: #f2f0e6;
        text-align: center;
        font-size: 24px;
        font-weight: 300;

        background: transparent url(holiday-glow.png) no-repeat center 0;
    }
        #holiday p .holiday-price {
            position: relative;
            top: 2px;

            padding: 0 5px;

            color: #fff;
            font-size: 32px;
            font-weight: 700;
            font-style: italic;

            text-shadow: #d23c43 0 2px 1px;
        }
            #holiday p .holiday-price small {
                font-size: 18px;
                letter-spacing: .05em;
            }


/* Icons */

.set {
    width: 700px;

    margin: 0 0 20px;
    padding: 10px;

    float: left;

    background: #e6e4da;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
    .set .content {
        width: 700px;

        float: left;

        background: #f2f0e6;

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow:
            0 1px 3px rgba(0, 0, 0, .15);

        -moz-box-shadow:
            0 1px 3px rgba(0, 0, 0, .15),
            inset 0 -10px 10px rgba(0, 0, 0, .03);

        box-shadow:
            0 1px 3px rgba(0, 0, 0, .15),
            inset 0 -10px 10px rgba(0, 0, 0, .03);
    }

    .set .heading {
        width: 700px;

        padding: 0 0 10px;

        float: left;

        background: #d0dfd7;
        background:
            -webkit-gradient(linear, left top, left bottom, from(#f0fff7), to(#c0cfc7));

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow:
            0 1px 3px rgba(0, 0, 0, .25);

        -moz-box-shadow:
            0 1px 3px rgba(0, 0, 0, .25),
            inset 0 -10px 10px rgba(0, 0, 0, .03);

        box-shadow:
            0 1px 3px rgba(0, 0, 0, .25),
            inset 0 -10px 10px rgba(0, 0, 0, .03);
    }

    .set .preview {
        width: 700px;

        float: left;

        text-align: center;

        background: #fafafa;
        background:
            -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow:
            0 1px 3px rgba(0, 0, 0, .25);

        -moz-box-shadow:
            0 1px 3px rgba(0, 0, 0, .25),
            inset 0 -30px 40px rgba(0, 0, 0, .02),
            inset 0 -3px 20px rgba(0, 0, 0, .05);

        box-shadow:
            0 1px 3px rgba(0, 0, 0, .25),
            inset 0 -30px 40px rgba(0, 0, 0, .02),
            inset 0 -3px 20px rgba(0, 0, 0, .05);
    }
        .set .preview img {
            padding: 60px 0;
        }

    .set .title {
        padding: 20px 20px 0 10px;

        clear: both;
    }
        .set .title h2 {
            float: left;

            color: #4b5457;
            font-size: 20px;
            font-weight: 300;

            text-shadow: #eee 0 1px 0;
            text-shadow: rgba(255, 255, 255, .4) 0 1px 0;
        }

        .set .title h3 {
            padding: 0 0 0 20px;

            float: left;

            color: #fff;
            font-size: 20px;
            font-weight: 500;

            text-shadow: #222 0 2px 2px;
            text-shadow: rgba(0, 0, 0, .3) 0 1px 2px;
        }
            .set .title h3 .currency {
                padding: 0 0 0 2px;

                font-size: 12px;
                font-weight: bold;
                letter-spacing: .02em;
            }

        .set .title a {
            width: 92px;
            height: 23px;

            overflow: hidden;

            position: relative;
            top: -5px;
            float: right;

            text-indent: -100px;

            background: transparent url(btns.png) no-repeat 0 0;
        }
            .set .title a:focus {
                outline: none;
            }

            .set .title a.more {
                margin: 0 10px 0 0;

                background-position: 0 0;
            }
                .set .title a.more:hover {
                    background-position: -92px 0;
                }

                .set .title a.more.selected {
                    background-position: -184px 0;
                }

            .set .title a.buy {
                background-position: 0 -23px;
            }
                .set .title a.buy:hover {
                    background-position: -92px -23px;
                }

                .set .title a.buy:focus {
                    background-position: -184px -23px;
                }

            .set .title a.download {
                background-position: 0 -46px;
            }
                .set .title a.download:hover {
                    background-position: -92px -46px;
                }

                .set .title a.download:focus {
                    background-position: -184px -46px;
                }

    .set .details {
        display: none;

        padding: 10px;

        clear: both;
    }
        .set .details .intro {
            width: 640px;

            padding: 20px;

            float: left;

            background: #eceae0;

            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
            .set .details .intro img {
                margin-left: 20px;

                float: left;
            }

            .set .details .intro p {
                width: 450px;

                padding: 5px 0 0 0;

                float: right;

                color: #4b5457;
                line-height: 25px;
            }
                .set .details .intro p em {
                    color: #343735;
                }

        .set .details table {
            width: 680px;

            margin: 10px 0;
        }
            .set .details table tr.first th,
            .set .details table tr.first td {
                border: none;
            }

            .set .details table th {
                width: 210px;

                padding: 10px 0;

                text-align: center;

                border-top: 1px solid #e6e4da;
            }

            .set .details table td {
                border-top: 1px solid #e6e4da;
            }

            .set .details table td img {
                padding: 0 5px 0 0;

                position: relative;
                top: 2px;
            }

        .set .details .size {
            padding: 0 10px 0 0;

            color: #4b5457;
            font-size: 14px;
        }

        .set .details .format {
            padding: 0 10px 0 0;

            color: #4b5457;
            font-size: 14px;
        }

        .set .details .delay-load {
            display: none;
        }


.info-pane {
    width: 220px;

    float: right;
}
    .info-pane h2 {
        padding: 15px 0;

        color: #4b5457;
        font-size: 18px;
        font-weight: bold;
    }

    .info-pane .info {
        margin: 10px 0 5px;
        padding: 10px 0;
    }
        .info-pane .info h3 {
            padding: 0 0 5px;

            color: #4b5457;
        }

        .info-pane .info p {
            color: #aaa;
        }