/*      =================================================================
        kflorence.com
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @ Author: Kyle Florence
        @ Update: August 3, 2009
        =================================================================       */

/*      =================================================================
        Global Tags
        =================================================================       */

/*      Override all pre-defined margins and borders                            */
        * {
            margin: 0;
            padding: 0;
            border: 0;
            }

/*      Disable default focus styles (set them individually later)              */
        :focus { outline: none; }

/*      -----------------------------------------------------------------
        Body
        -----------------------------------------------------------------       */

        body {
            color: #333;
            font-family: verdana, sans-serif;
            font-size: 0.825em;
            line-height: 1.4em;
            background-color: #fff;
            }

/*      -----------------------------------------------------------------
        Anchors
        -----------------------------------------------------------------       */

        a {
            color: #3795ed;
            text-decoration: underline;
            }

        a:hover {
            color: #fff;
            background-color: #3795ed;
            }

/*      Clearly mark external links                                             */
        a.external {
            padding-right: 12px;
            background-image: url('../images/site/external.gif');
            background-position: 100% 0;
            background-repeat: no-repeat;
            }

        a.external:hover { background-position: 100% -20px; }

        a.external span { display: none; }

/*      Icons                                                                   */
        a.icon {
            padding: 0 0 0 20px;
            background-position: left center !important;
            background-repeat: no-repeat !important;
            }

        a.pdf { background-image: url('../images/site/pdf.gif'); }

/*      -----------------------------------------------------------------
        Images
        -----------------------------------------------------------------       */

        img { vertical-align: text-bottom; }

/*      -----------------------------------------------------------------
        Headings
        -----------------------------------------------------------------       */

        h1,
        h2 {
            color: #fff;
            font-size: 1.6em;
            line-height: 1.2em;
            font-weight: normal;
            text-transform: uppercase;
            }

        h1 a,
        h2 {
            color: #fff;
            padding: 10px;
            padding-bottom: 9px;
            }

        h1 a {
            width: 170px;
            display: block;
            text-decoration: none;
            background-color: #333;
            }

        h1 a:hover,
        h1 a:focus { background-color: #444; }

        h2 { background-color: #3795ed; }

        h3 {
            color: #333;
            padding: 10px;
            padding-bottom: 6px;
            font-size: 1.0em;
            line-height: 1.0em;
            font-weight: normal;
            background-color: #eee;
            text-transform: uppercase;
            }

        h4 {
            color: #333;
            padding: 0 10px;
            font-size: 1.0em;
            font-weight: normal;
            font-style: italic;
            }

        #entry h4 {
            color: #333;
            padding: 10px 0;
            font-size: 1.0em;
            font-weight: bold;
            font-style: normal;
            border-bottom: #bbb 1px solid;
            }

        h5 {
            color: #333;
            margin: 0;
            padding: 0;
            font-size: 1.0em;
            font-weight: bold;
            }

        h5 span {
            color: #999;
            font-weight: normal;
            font-family: monospace;
            position: relative;
            left: 5px; top: 0;
            }

        h6 {
            color: #666;
            padding-bottom: 5px;
            font-size: 1.2em;
            font-weight: normal;
            font-family: monospace;
            text-transform: uppercase;
            }

/*      -----------------------------------------------------------------
        Paragraphs & Lists
        -----------------------------------------------------------------       */

        p { padding: 10px 0; }

        ul {
            padding: 10px;
            margin: 10px 0;
            list-style: none;
            }

        ul.unordered {
            margin: 0;
            margin-left: 20px;
            list-style: circle;
            }

        ol {
            margin: 10px 0;
            margin-left: 30px;
            }

        .ul-bullets {
            margin-left: 40px;
            list-style: circle;
            }

        .ul-inline li { display: inline; }

/*      -----------------------------------------------------------------
        Forms & Input
        -----------------------------------------------------------------       */

        fieldset {
            padding: 10px 0;
            background-color: #fff;
            border-top: #3795ed 1px solid;
            }

        form {
            color: #333;
            margin-left: 10px;
            padding-left: 10px;
            border-left: #ddd 1px solid;
            }

        form .input {
            margin: 0;
            padding: 0;
            }

        form .input span {
            display: block;
            margin-bottom: 10px;
            }

/*      Required form element                                                   */
        form .required {
            padding-left: 12px;
            background-image: url('../images/site/required.gif');
            background-position: 0px 6px;
            background-repeat: no-repeat;
            }

        legend { display: none; }

        input, textarea, select {
            color: #333;
            padding: 5px;
            margin-bottom: 10px;
            font-size: 1.1em;
            background-color: #f4f4f4;
            font-family: Verdana, Sans-Serif;
            }

        textarea {
            width: 400px;
            }

        input { width: 200px; }

        input[type="submit"] {
            margin: 0;
            width: auto;
            color: #333;
            font-size: 1.0em;
            font-weight: bold;
            margin-right: 10px;
            padding: 5px 10px;
            }

/*      Input focus events                                                      */
        input:focus,
        textarea:focus,
        select:focus {
            color: #fff;
            background-color: #3795ed;
            }

/*      -----------------------------------------------------------------
        Errors / Successes
        -----------------------------------------------------------------       */

        .errors {
            color: #7C3D3D;
            margin: 0;
            padding: 10px;
            margin-top: 10px;
            background-color: #FFECEC;
            border: #ECC0C0 1px solid;
            }

        .success {
            color: #80854C;
            padding: 10px;
            margin-top: 10px;
            background-color: #FEFFF1;
            border: #D9DDAC 1px solid;
            }

/*      -----------------------------------------------------------------
        Misc
        -----------------------------------------------------------------       */

        acronym {
            color: #666;
            cursor: help;
            text-decoration: underline;
            }

        .quote {
            padding: 10px;
            margin: 10px 20px;
            background-color: #f4f4f4;
            border: #ddd 1px solid;
            }

        blockquote {
            color: #666;
            font-style: italic;
            background-image: url('../images/site/open-quote.gif');
            background-repeat: no-repeat;
            background-position: top left;
            }

        blockquote p {
            padding: 10px 20px;
            text-align: justify;
            background-image: url('../images/site/close-quote.gif');
            background-repeat: no-repeat;
            background-position: bottom right;
            }

        cite {
            display: block;
            padding: 0 20px;
            font-size: 0.8em;
            text-align: right;
            text-transform: uppercase;
            color: #999;
            }

/*      =================================================================
        Convenience Classes
        =================================================================       */

        .center { text-align: center; }

/*      -----------------------------------------------------------------
        Images
        -----------------------------------------------------------------       */

        .img,
        .img-left,
        .img-right {
            margin: 10px;
            padding: 10px;
            background-color: #f4f4f4;
            }

        .img img,
        .img-left img,
        .img-right img {
            }

        .img span,
        .img-left span,
        .img-right span {
            color: #999;
            display: block;
            padding-top: 10px;
            }

        .img-right {
            float: right;
            margin-right: 0;
            }

        .img-left {
            float: left;
            margin-left: 0;
            }

/*      Loading icon                                                            */
        .loading {
            background-color: transparent;
            background-image: url('../images/site/loading.gif');
            background-repeat: no-repeat;
            background-position: 50% 50%;
            }

/*      -----------------------------------------------------------------
        Text Formatting
        -----------------------------------------------------------------       */

/*      Indents content to the right by 10 pixels                               */

        .indent { margin-left: 10px; }

/*      A block of content indented by 10 pixels with a left border             */
        .section {
            padding: 10px 0;
            margin: 10px 0 10px 10px;
            border-left: #ddd 1px solid;
            }

        .section ul {
            margin: 0 0 0 20px;
            padding: 10px 0;
            }

        .section p { padding: 0 10px; }
        .section li p { padding: 10px 0 0 0; }
        .section .ul-bullets { margin: 0 0 0 30px; }

/*      Sections within sections have no border                                 */
        .section .section {
            border: 0;
            margin: 0 0 0 10px;
            }

        .section .section .ul-bullets { margin: 0 0 0 40px; }

/*      -----------------------------------------------------------------
        Expand/Collapse javascript toggle classes
        -----------------------------------------------------------------       */

        span.expand,
        span.collapse {
            display: block;
            margin-top: 10px;
            padding-top: 10px;
            text-align: right;
            border-top: #DDD 1px solid;
            }

        span.expand a,
        span.collapse a {
            text-decoration: none;
            }


/*      Expand properties                                                       */
        span.expand a {
            padding-right: 12px;
            background-image: url('../images/site/darr.gif');
            background-position: 100% 4px;
            background-repeat: no-repeat;
            }

        span.expand a:hover { background-position: 100% -4px; }

/*      Collapse properties                                                     */
        span.collapse a {
            padding-right: 12px;
            background-image: url('../images/site/uarr.gif');
            background-position: 100% 4px;
            background-repeat: no-repeat;
            }

        span.collapse a:hover { background-position: 100% -4px; }

/*      -----------------------------------------------------------------
        Padding, Margins & Borders
        -----------------------------------------------------------------       */

        .grey { background-color: #EEE; }
        .darkgrey { background-color: #BBB; }
        .lightgrey { background-color: #f4f4f4; }

        .np { padding: 0 !important; }
        .npt { padding-top: 0 !important; }
        .npl { padding-left: 0 !important; }
        .npb { padding-bottom: 0 !important; }
        .npr { padding-right: 0 !important; }

        .nm { margin: 0 !important; }
        .nmt { margin-top: 0 !important; }
        .nml { margin-left: 0 !important; }
        .nmb { margin-bottom: 0 !important; }
        .nmr { margin-right: 0 !important; }

        .nb { border: 0 !important; }
        .nbt { border-top: 0 !important; }
        .nbl { border-left: 0 !important; }
        .nbb { border-bottom: 0 !important; }
        .nbr { border-right: 0 !important; }

/*      -----------------------------------------------------------------
        Floats and positioning
        -----------------------------------------------------------------       */

        .float-left { float: left; }
        .float-right { float: right; }
        .clear-all { clear: both; }

/*      -----------------------------------------------------------------
        Hacks and fixes
        -----------------------------------------------------------------       */

        .hide {
            width: 1px;
            height: 1px;
            overflow: hidden;
            position: absolute;
            top: -242px;
            left: 242px;
            }

        .invisible { visibility: hidden; }

        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
            }

        .clearfix {
            display: inline-block;
            }

        html[xmlns] .clearfix {
            display: block;
            }

        * html .clearfix {
            height: 1%;
            }

/*      =================================================================
        Basic Structure
        =================================================================       */

        #wrapper {
            width: 860px;
            margin: 0 auto;
            background-image: url('../images/site/center.gif');
            background-repeat: repeat-y;
            background-position: top left;
            }

        #top {
            padding-top: 56px;
            background-image: url('../images/site/top.gif');
            background-repeat: no-repeat;
            background-position: top left;
            }

        #container {
            width: 800px;
            margin: 0 auto;
            }

        #content {
            margin: 10px;
            background-image: url('../images/site/left.gif');
            background-repeat: repeat-y;
            background-position: top left;
            }

/*      -----------------------------------------------------------------
        Content
        -----------------------------------------------------------------       */

        #main {
            padding: 0;
            margin-left: 200px;
            }

/*      -----------------------------------------------------------------
        Left
        -----------------------------------------------------------------       */

        #left {
            float: left;
            width: 190px;
            background-color: #fff;
            }

/*      -----------------------------------------------------------------
        Navigation
        -----------------------------------------------------------------       */

        .nav {
            padding: 10px 0;
            margin: 10px 0 0 0;
            background-color: #f4f4f4;
            border-right: #bbb 1px solid;
            }

        .nav li {
            margin: 0;
            padding: 0 10px;
            text-align: right;
            }

        .nav li a {
            color: #666;
            cursor: pointer;
            text-decoration: none;
            }

        .nav li a:hover,
        .nav li a:focus {
            color: #000;
            background: transparent;
            }

        #me #trigger-me,
        #work #trigger-work,
        #play #trigger-play {
            /*color: #000;
            text-decoration: line-through;*/
            color: #333;
            font-weight: bold;
            }

/*      Subnavigation menu                                                      */
        .nav .subnav {
            padding: 0;
            margin: 0 10px;
            }

        .nav .subnav li {
            padding: 0;
            }

        .nav .subnav li a {
            color: #999;
            padding: 1px 10px;
            border-right: #ddd 1px solid;
            }

        .nav .subnav li a:hover {
            color: #666;
            background: transparent;
            }

        #me.about #me-about,
        #me.contact #me-contact,
        #me.resume #me-resume,
        #work.web_design #work-web_design,
        #work.photography #work-photography,
        #play.projects #play-projects,
        #play.tutorials #play-tutorials {
            /*background-color: transparent;
            background-image: url('../images/site/nav-sel.gif');
            background-repeat: no-repeat;
            background-position: center right;*/
            }

        #me.about #me-about a,
        #me.contact #me-contact a,
        #me.resume #me-resume a,
        #work.web_design #work-web_design a,
        #work.photography #work-photography a,
        #play.projects #play-projects a,
        #play.tutorials #play-tutorials a {
            color: #333;
            /*font-weight: bold;*/
            background-color: transparent;
            background-image: url('../images/site/nav-sel.gif');
            background-repeat: no-repeat;
            background-position: center right;
            }

/*      -----------------------------------------------------------------
        Footer
        -----------------------------------------------------------------       */

        #footer {
            clear: both;
            height: 56px;
            background-image: url('../images/site/bottom.gif');
            background-repeat: no-repeat;
            background-position: top center;
            }

        #footer ul {
            margin: 0 50px;
            padding: 15px;
            float: right;
            }

        #footer li {
            display: inline;
            padding-right: 10px;
            }

        #footer li a {
            color: #999;
            padding-right: 0;
            background-color: transparent;
            background-image: none;
            text-decoration: none;
            }

        #footer li a:hover,
        #footer li a:focus {
            color: #333;
            text-decoration: underline;
            }

/*      =================================================================
        Invdividual Page Styles
        =================================================================       */

/*      Pagination                                                              */
        .pager {
            margin: 10px 0;
            padding: 10px;
            position: relative;
            background-color: #f4f4f4;
            border-bottom: #bbb 1px solid;
            }

        .pages p { padding: 0; }

        .pages span {
            color: #666;
            position: absolute;
            top: 10px; right: 10px;
            font-family: monospace;
            }

/*      -----------------------------------------------------------------
        Home
        -----------------------------------------------------------------       */

        #home-quote { margin: 0; }

/*      Featured item                                                           */
        .featured { margin: 10px 0; }

        .featured h3 { margin-bottom: 10px; }

        .featured img {
            height: 250px;
            margin-bottom: -1px;
            }

        .featured ul {
            height: 20px;
            }

        .featured ul {
            margin: 0;
            padding: 10px;
            margin: 10px 0;
            background-color: #f4f4f4;
            border-top: #ddd 1px solid;
            }

        .featured ul .title {
            color: #333;
            float: left;
            font-style: italic;
            }

        .featured ul .brief {
            color: #666;
            float: right;
            text-align: right;
            margin-bottom: 10px;
            font-family: monospace;
            }

/*      -----------------------------------------------------------------
        About
        -----------------------------------------------------------------       */

/*      -----------------------------------------------------------------
        Portfolio
        -----------------------------------------------------------------       */

/*      -----------------------------------------------------------------
        Projects / Tutorials
        -----------------------------------------------------------------       */

        #list { margin: 0; }

        #entry {
            margin-top: 10px;
            }

/*      Forms                                                                   */
        #entry fieldset {
            margin: 0;
            padding: 0;
            border: 0;
            }

        #entry form {
            margin: 0;
            padding: 0;
            border: 0;
            }

        #entry input,
        #entry select,
        #entry textarea {
            margin: 0;
            color: #333;
            background-color: #fff;
            }

        #entry option { padding: 0 5px; }

        #entry input[type="text"] {
            border-bottom: #bbb 1px solid;
            }

        #entry input[type="submit"] {
            color: #fff;
            background-color: #666;
            }

/*      Lists                                                                   */
        #entry .information {
            margin: 0;
            padding: 0;
            margin-top: 10px;
            list-style: none;
            background-color: #f4f4f4;
            border: #ddd 1px solid;
            border-bottom: 0;
            }

        #entry .information li {
            color: #999;
            border-bottom: #ddd 1px solid;
            }

        #entry .information li span {
            display: block;
            padding: 5px 10px;
            font-family: monospace;
            }

        #entry .information li span.title {
            color: #666;
            float: left;
            width: 100px;
            background-color: #eee;
            }

        #entry .information li span.value {
            color: #999;
            margin-left: 120px;
            background-color: #fcfcfc;
            border-left: #ddd 1px solid;
            }

        #entry .changelog {
            margin: 0 10px;
            padding: 10px;
            font-family: monospace;
            border: #ddd 1px solid;
            border-top: 0;
            }

        #entry .changelog ul {
            margin: 0;
            padding: 0;
            list-style: none;
            }

        #entry .changelog ul li {
            padding: 5px 0;
            background-color: #fff;
            border-top: #ddd 1px solid;
            }

        #entry .questions {
            color: #666;
            padding: 10px;
            text-align: right;
            background-color: #f4f4f4;
            border-top: #ddd 1px solid;
            }

        #entry .questions a {
            color: #666;
            }

        #entry .questions a:hover {
            background-color: #fff;
            }

        #entry .fires {
            width: 580px;
            margin-top: 10px;
            }

        #entry .spiral {
            margin-top: 10px;
            text-align: center;
            }

/*      -----------------------------------------------------------------
        Contact
        -----------------------------------------------------------------       */

        #contact-form .left {
            float: left;
            width: 200px;
            }

        #contact-form .left input { width: 190px; }

        #contact-form .right {
            padding-left: 10px;
            margin-left: 200px;
            }

        #contact-form .right textarea {
            width: 338px;
            height: 170px;
            }